@charcuterie/ui 4.5.1 → 4.6.0

package/dist/Overlay/OverlayPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC5C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,6IAU1B,iBAAiB,KAAG,SA0HtB,CAAA"}
+{"version":3,"file":"OverlayPanel.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC5C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,6IAU1B,iBAAiB,KAAG,SAuLtB,CAAA"}

package/dist/Overlay/OverlayPanel.js

@@ -30,11 +30,46 @@ export const OverlayPanel = ({ "aria-label": ariaLabel, "aria-labelledby": ariaL
             // `outsidePress` on a *lower* modal would close it too, so it is
             // scoped to the top — which is also why the scrim needs no click
             // handler of its own.
-            outsidePress: isDismissable && isTop,
+            outsidePress: (event) => {
+                if (!isDismissable || !isTop)
+                    return false;
+                /*
+                 * ⚠️ A press on a toast is NOT an outside press.
+                 *
+                 * A `ToastRegion` renders in the page, so floating-ui sees a
+                 * press on its Undo as a press outside the floating element
+                 * — and closing the modal on the way to taking an action
+                 * back is the opposite of what the button says. The region
+                 * marks itself with `data-charcuterie-toast-region`; nothing
+                 * else in the fleet carries that attribute.
+                 *
+                 * ⚠️ Do not delete this on the evidence of a small story.
+                 * floating-ui has a *second*, accidental guard that hides
+                 * this one: `closeOnPressOutside` bails out early when the
+                 * press target's body-level ancestor contains none of the
+                 * `[data-floating-ui-inert]` markers `markOthers` left
+                 * behind, on the theory that such an element was injected
+                 * after the panel opened. A page that is nothing but a
+                 * region takes that branch and never reaches this predicate
+                 * at all. A page with content beside the region — every real
+                 * app — does reach it. `Toast.stories.tsx`'s
+                 * `OverStackedModals` carries a heading and a paragraph for
+                 * exactly that reason, and `ToastRegion.test.tsx` fails
+                 * without this predicate only because they are there.
+                 */
+                const target = event.target;
+                return (target?.closest?.("[data-charcuterie-toast-region]") == null);
+            },
         }),
         useRole(context, { role }),
     ]);
     const { register, unregister } = stack;
+    /**
+     * Where this panel sits in the stack, and therefore how far above
+     * `--layer-modal` it paints. `0` when unprovided — a lone `Modal`
+     * is the only thing open.
+     */
+    const stackIndex = Math.max(stack.orderedIds.indexOf(id), 0);
     useEffect(() => {
         if (!isVisible) {
             return;
@@ -58,7 +93,24 @@ export const OverlayPanel = ({ "aria-label": ariaLabel, "aria-labelledby": ariaL
     if (!isVisible) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [stack.isProvided ? null : (_jsx(SharedBackdrop, { isVisible: true })), _jsx(FloatingPortal, { children: _jsx("div", { className: "fixed inset-0 z-[var(--layer-modal)] flex items-center justify-center", children: _jsx(FloatingFocusManager, { context: context, 
+    return (_jsxs(_Fragment, { children: [stack.isProvided ? null : (_jsx(SharedBackdrop, { isVisible: true })), _jsx(FloatingPortal, { children: _jsx("div", { className: "fixed inset-0 flex items-center justify-center", 
+                    /*
+                     * ⚠️ Cascading, not one shared layer.
+                     *
+                     * Every panel used to render at the one `--layer-modal`, and
+                     * which of two open modals painted on top fell out of the
+                     * order their portals happened to be appended in. A modal
+                     * opened from inside another is the case that made this
+                     * visible. The index in the stack is the answer the stack
+                     * already knows.
+                     *
+                     * The scale's gaps are 100, so a cascade this deep is
+                     * arithmetic nobody has to think about — and the toast sits
+                     * at `--layer-toast` plus the same depth, above all of it.
+                     */
+                    style: {
+                        zIndex: `calc(var(--layer-modal) + ${stackIndex})`,
+                    }, children: _jsx(FloatingFocusManager, { context: context, 
                         // `undefined` keeps the manager's own default (the first
                         // tabbable), so nothing changes for a panel that does not
                         // ask.

package/dist/Overlay/OverlayPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.js","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OverlayPanel.js","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"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"}

package/dist/Overlay/OverlayStack.d.ts

@@ -28,6 +28,11 @@ export type OverlayStackEntry = {
 };
 export type OverlayStackValue = {
     depth: number;
+    /**
+     * The open ids, oldest first. A panel reads its own index out of
+     * this to cascade its z-index above the one below it.
+     */
+    orderedIds: string[];
     /**
      * `false` in the context default. An `OverlayPanel` reads this to
      * decide whether to render its own scrim (unprovided) or defer to

package/dist/Overlay/OverlayStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStack.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;IACpB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,CAAA;AAcD,eAAO,MAAM,eAAe,QAAO,iBACF,CAAA;AAEjC,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,KAAG,SAyDH,CAAA"}
+{"version":3,"file":"OverlayStack.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;IACpB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,CAAA;AAeD,eAAO,MAAM,eAAe,QAAO,iBACF,CAAA;AAEjC,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,KAAG,SAyDH,CAAA"}

package/dist/Overlay/OverlayStack.js

@@ -5,6 +5,7 @@ import { SharedBackdrop } from "./SharedBackdrop.js";
 const DEFAULT_STACK = {
     depth: 0,
     isProvided: false,
+    orderedIds: [],
     register: () => { },
     requestCloseTop: () => { },
     topId: null,
@@ -36,6 +37,7 @@ export const OverlayStackProvider = ({ children, }) => {
     const value = useMemo(() => ({
         depth: entries.length,
         isProvided: true,
+        orderedIds: entries.map((one) => one.id),
         register,
         requestCloseTop,
         topId: entries.at(-1)?.id ?? null,

package/dist/Overlay/OverlayStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStack.js","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAA;AA6CrD,MAAM,aAAa,GAAsB;IACvC,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IACzB,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;CACrB,CAAA;AAED,MAAM,mBAAmB,GACvB,aAAa,CAAoB,aAAa,CAAC,CAAA;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAsB,EAAE,CACrD,UAAU,CAAC,mBAAmB,CAAC,CAAA;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,GAGT,EAAa,EAAE;IACd,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,EAAE,CAAC,CAAA;IAEL,mEAAmE;IACnE,uBAAuB;IACvB,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;IAExC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAwB,EAAE,EAAE;QAC3B,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE;QACtB,yDAAyD;QACzD,0DAA0D;QAC1D,8DAA8D;QAC9D,yCAAyC;QACzC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC;YACzC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACnB,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAClC;YACH,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,CACzB,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC5C,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE,CACtB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CACxC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAA;IACtC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,OAAO,CAAC,MAAM;QACrB,UAAU,EAAE,IAAI;QAChB,QAAQ;QACR,eAAe;QACf,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,IAAI;QACjC,UAAU;KACX,CAAC,EACF,CAAC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CACjD,CAAA;IAED,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,aAGxC,KAAC,cAAc,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,GAAI,EAEhD,QAAQ,IACoB,CAChC,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"OverlayStack.js","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAA;AAkDrD,MAAM,aAAa,GAAsB;IACvC,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IACzB,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;CACrB,CAAA;AAED,MAAM,mBAAmB,GACvB,aAAa,CAAoB,aAAa,CAAC,CAAA;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAsB,EAAE,CACrD,UAAU,CAAC,mBAAmB,CAAC,CAAA;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,GAGT,EAAa,EAAE;IACd,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,EAAE,CAAC,CAAA;IACL,mEAAmE;IACnE,uBAAuB;IACvB,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;IAExC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAwB,EAAE,EAAE;QAC3B,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE;QACtB,yDAAyD;QACzD,0DAA0D;QAC1D,8DAA8D;QAC9D,yCAAyC;QACzC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC;YACzC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACnB,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAClC;YACH,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,CACzB,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC5C,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE,CACtB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CACxC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAA;IACtC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,OAAO,CAAC,MAAM;QACrB,UAAU,EAAE,IAAI;QAChB,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;QACxC,QAAQ;QACR,eAAe;QACf,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,IAAI;QACjC,UAAU;KACX,CAAC,EACF,CAAC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CACjD,CAAA;IAED,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,aAGxC,KAAC,cAAc,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,GAAI,EAEhD,QAAQ,IACoB,CAChC,CAAA;AACH,CAAC,CAAA"}

package/dist/Toast/ToastRegion.d.ts

@@ -46,12 +46,73 @@ export type ToastRegionProps = {
  * sync. The lifecycle *inside* one toast is state a store cannot
  * see, which is why `Toast` owns that and nothing more.
  *
+ * ### It is the top of the layer scale, and it moves to stay there
+ *
+ * ⚠️ The container was `z-50` — a hand-picked number, in the library
+ * whose whole point is that nobody picks one. It is
+ * `--layer-toast` now, the top of the scale, above `--layer-tooltip`.
+ * The owner's rule: *"I think toast should always exist on top of
+ * everything."*
+ *
+ * The open panels cascade — a modal over a modal paints at
+ * `--layer-modal + n` — so the depth is added here too, and the
+ * toast clears the whole stack rather than only its first floor.
+ * Both numbers come off `useOverlayStack`, so the ordering is
+ * arithmetic rather than portal-append order.
+ *
+ * ### Painting on top is only half of "on top"
+ *
+ * ⚠️ A press on a toast while a `Modal` is open is an **outside**
+ * press as far as floating-ui is concerned, and `useDismiss` would
+ * close the modal on the way to taking an action back. That is why
+ * the container carries `data-charcuterie-toast-region`:
+ * `OverlayPanel`'s `outsidePress` reads it and lets the press
+ * through. Nothing else in the fleet carries that attribute.
+ *
+ * ⚠️ Do **not** move this region inside the panel's portal to solve
+ * that. Two reasons, both measured. `FloatingFocusManager`'s `modal`
+ * already leaves it alone — `markOthers` concatenates
+ * `body.querySelectorAll('[aria-live],[role="status"],output')` onto
+ * its keep-list, and this region is a `role="status"`, so it is
+ * never marked `aria-hidden` where it stands. And the panel's
+ * container sets a z-index, so a region nested inside it would be
+ * trapped in that stacking context and lose to the *next* modal
+ * however high `--layer-toast` climbs.
+ *
  * ### `pointer-events-none` on the container, `auto` on each toast
  *
  * A fixed overlay across the bottom of the viewport swallows every
  * click in that band, including on the app behind it, and it does so
  * invisibly. The container passes clicks through and each toast
  * takes them back.
+ *
+ * The list keeps `pointer-events: none` and still scrolls: a wheel
+ * event over a toast chains to the nearest scrollable **ancestor**,
+ * which is the list, and hit-testing never has to reach it.
+ *
+ * ### Many at once, and the newest is the one you can see
+ *
+ * The column grows upward from the bottom of the viewport, so
+ * without a bound the oldest toasts climb off the top of the page —
+ * clipped by the viewport, and unreachable, because a fixed element
+ * is not something the page can scroll to. The list is capped at
+ * `min(60dvh, 32rem)` and scrolls `overscroll-contain`, so the page
+ * behind never moves because a notification arrived. The owner's
+ * rule: *"if you have multiple toasts, it should accomodate them
+ * somehow."*
+ *
+ * ⚠️ Bottom-pinned with `margin-block-start: auto` on the first
+ * toast, **not** `justify-content: flex-end`. Measured in chromium:
+ * with `justify-end` an overflowing list reports
+ * `scrollHeight === clientHeight` and the toasts above the fold
+ * cannot be scrolled to at all — content overflowing a flex
+ * container's *start* edge is not reachable overflow. An auto margin
+ * resolves to `0` the moment the free space runs out, so the same
+ * rule pins a short list and scrolls a long one.
+ *
+ * The scroll is taken to the bottom whenever the count changes,
+ * because the newest toast is the one with the action on it and it
+ * is the one at the far end.
  */
 export declare const ToastRegion: ({ className, label, onDismiss, toasts, }: ToastRegionProps) => ReactNode;
 //# sourceMappingURL=ToastRegion.d.ts.map

package/dist/Toast/ToastRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRegion.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,gBAAgB,KAAG,SA+BrB,CAAA"}
+{"version":3,"file":"ToastRegion.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,gBAAgB,KAAG,SAwDrB,CAAA"}

package/dist/Toast/ToastRegion.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useOverlayStack } from "../Overlay/OverlayStack.js";
 import { toClassName } from "../toClassName.js";
 import { Toast } from "./Toast.js";
 /**
@@ -28,14 +30,89 @@ import { Toast } from "./Toast.js";
  * sync. The lifecycle *inside* one toast is state a store cannot
  * see, which is why `Toast` owns that and nothing more.
  *
+ * ### It is the top of the layer scale, and it moves to stay there
+ *
+ * ⚠️ The container was `z-50` — a hand-picked number, in the library
+ * whose whole point is that nobody picks one. It is
+ * `--layer-toast` now, the top of the scale, above `--layer-tooltip`.
+ * The owner's rule: *"I think toast should always exist on top of
+ * everything."*
+ *
+ * The open panels cascade — a modal over a modal paints at
+ * `--layer-modal + n` — so the depth is added here too, and the
+ * toast clears the whole stack rather than only its first floor.
+ * Both numbers come off `useOverlayStack`, so the ordering is
+ * arithmetic rather than portal-append order.
+ *
+ * ### Painting on top is only half of "on top"
+ *
+ * ⚠️ A press on a toast while a `Modal` is open is an **outside**
+ * press as far as floating-ui is concerned, and `useDismiss` would
+ * close the modal on the way to taking an action back. That is why
+ * the container carries `data-charcuterie-toast-region`:
+ * `OverlayPanel`'s `outsidePress` reads it and lets the press
+ * through. Nothing else in the fleet carries that attribute.
+ *
+ * ⚠️ Do **not** move this region inside the panel's portal to solve
+ * that. Two reasons, both measured. `FloatingFocusManager`'s `modal`
+ * already leaves it alone — `markOthers` concatenates
+ * `body.querySelectorAll('[aria-live],[role="status"],output')` onto
+ * its keep-list, and this region is a `role="status"`, so it is
+ * never marked `aria-hidden` where it stands. And the panel's
+ * container sets a z-index, so a region nested inside it would be
+ * trapped in that stacking context and lose to the *next* modal
+ * however high `--layer-toast` climbs.
+ *
  * ### `pointer-events-none` on the container, `auto` on each toast
  *
  * A fixed overlay across the bottom of the viewport swallows every
  * click in that band, including on the app behind it, and it does so
  * invisibly. The container passes clicks through and each toast
  * takes them back.
+ *
+ * The list keeps `pointer-events: none` and still scrolls: a wheel
+ * event over a toast chains to the nearest scrollable **ancestor**,
+ * which is the list, and hit-testing never has to reach it.
+ *
+ * ### Many at once, and the newest is the one you can see
+ *
+ * The column grows upward from the bottom of the viewport, so
+ * without a bound the oldest toasts climb off the top of the page —
+ * clipped by the viewport, and unreachable, because a fixed element
+ * is not something the page can scroll to. The list is capped at
+ * `min(60dvh, 32rem)` and scrolls `overscroll-contain`, so the page
+ * behind never moves because a notification arrived. The owner's
+ * rule: *"if you have multiple toasts, it should accomodate them
+ * somehow."*
+ *
+ * ⚠️ Bottom-pinned with `margin-block-start: auto` on the first
+ * toast, **not** `justify-content: flex-end`. Measured in chromium:
+ * with `justify-end` an overflowing list reports
+ * `scrollHeight === clientHeight` and the toasts above the fold
+ * cannot be scrolled to at all — content overflowing a flex
+ * container's *start* edge is not reachable overflow. An auto margin
+ * resolves to `0` the moment the free space runs out, so the same
+ * rule pins a short list and scrolls a long one.
+ *
+ * The scroll is taken to the bottom whenever the count changes,
+ * because the newest toast is the one with the action on it and it
+ * is the one at the far end.
  */
-export const ToastRegion = ({ className, label = "Notifications", onDismiss, toasts, }) => (_jsx("div", { "aria-label": label, "aria-atomic": "false", className: toClassName("pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-center gap-2 p-4", className), role: "status", children: _jsx("ul", { className: "pointer-events-none flex w-full max-w-sm list-none flex-col gap-2 p-0", children: toasts.map((toast) => (_jsx(Toast, { duration: toast.duration, intent: toast.intent, onRemove: () => {
-                onDismiss(toast.key);
-            }, title: toast.title, children: toast.description }, toast.key))) }) }));
+export const ToastRegion = ({ className, label = "Notifications", onDismiss, toasts, }) => {
+    const { depth } = useOverlayStack();
+    const listRef = useRef(null);
+    const _toastCount = toasts.length;
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list) {
+            return;
+        }
+        list.scrollTop = list.scrollHeight;
+    }, []);
+    return (_jsx("div", { "aria-label": label, "data-charcuterie-toast-region": "", "aria-atomic": "false", className: toClassName("pointer-events-none fixed inset-x-0 bottom-0 flex flex-col items-center gap-2 p-4", className), role: "status", style: {
+            zIndex: `calc(var(--layer-toast) + ${depth})`,
+        }, children: _jsx("ul", { ref: listRef, className: "charcuterie-scrollbar pointer-events-none flex max-h-[min(60dvh,32rem)] w-full max-w-sm list-none flex-col gap-2 overflow-y-auto overscroll-contain p-0 [&>li]:shrink-0 [&>li:first-child]:mt-auto", children: toasts.map((toast) => (_jsx(Toast, { duration: toast.duration, intent: toast.intent, onRemove: () => {
+                    onDismiss(toast.key);
+                }, title: toast.title, children: toast.description }, toast.key))) }) }));
+};
 //# sourceMappingURL=ToastRegion.js.map

package/dist/Toast/ToastRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRegion.js","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAA;AAuBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,eAAe,EACvB,SAAS,EACT,MAAM,GACW,EAAa,EAAE,CAAC,CACjC,4BACc,KAAK,iBAML,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,wFAAwF,EACxF,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,YAEb,aAAI,SAAS,EAAC,uEAAuE,YAClF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EAEpB,QAAQ,EAAE,GAAG,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YACtB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,WAAW,IANb,KAAK,CAAC,GAAG,CAOR,CACT,CAAC,GACC,GACD,CACP,CAAA"}
+{"version":3,"file":"ToastRegion.js","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA6B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAA;AAuBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,eAAe,EACvB,SAAS,EACT,MAAM,GACW,EAAa,EAAE;IAChC,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;IAEnC,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE9C,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAA;IACpC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,4BACc,KAAK,mCACa,EAAE,iBAMpB,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,mFAAmF,EACnF,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;YACL,MAAM,EAAE,6BAA6B,KAAK,GAAG;SAC9C,YAED,aACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,oMAAoM,YAE7M,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EAEpB,QAAQ,EAAE,GAAG,EAAE;oBACb,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;gBACtB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,WAAW,IANb,KAAK,CAAC,GAAG,CAOR,CACT,CAAC,GACC,GACD,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/Toolbar/useToolbarOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarOverflow.d.ts","sourceRoot":"","sources":["../../src/Toolbar/useToolbarOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAEhC;IACD,qCAAqC;IACrC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAC5B,KAAG;IACF,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,SAAS,EAAE,CACT,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,CAAA;IACT,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,YAAY,EAAE,MAAM,CAAA;CAwKrB,CAAA"}
+{"version":3,"file":"useToolbarOverflow.d.ts","sourceRoot":"","sources":["../../src/Toolbar/useToolbarOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAEhC;IACD,qCAAqC;IACrC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAC5B,KAAG;IACF,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,SAAS,EAAE,CACT,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,CAAA;IACT,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,YAAY,EAAE,MAAM,CAAA;CAmNrB,CAAA"}

package/dist/Toolbar/useToolbarOverflow.js

@@ -103,6 +103,45 @@ export const useToolbarOverflow = ({ itemKeys, }) => {
      * answer, so a stable bar renders once and stops.
      */
     useLayoutEffect(measure);
+    /**
+     * Measure again once the webfont has actually arrived.
+     *
+     * Every width above is a **text** width, so it is only as correct
+     * as the font that was loaded when it was read. On a cold cache
+     * the first measurement happens in the fallback face, the items
+     * come out a few pixels off, and `chooseVisibleCount` keeps or
+     * drops one action it should not have — then never revisits it,
+     * because swapping a font changes no box the `ResizeObserver`
+     * watches and triggers no render.
+     *
+     * The user-visible symptom is a bar that settles one button wrong
+     * and stays there. It needs the two faces to disagree across a
+     * collapse boundary, so it is latent rather than observed: no
+     * story in the library crosses one today, which is why `vrt`
+     * reports nothing either way. That makes it a gap to close, not a
+     * regression to chase — the bar is supposed to measure what is on
+     * screen, and until now it could not.
+     *
+     * `document.fonts.ready` resolves immediately when the fonts are
+     * already in, so a warm load pays one microtask and
+     * `setVisibleCount` bails on the unchanged answer.
+     */
+    useLayoutEffect(() => {
+        // jsdom has no `document.fonts`, and neither does a very old
+        // browser. Nothing to wait for is not an error.
+        if (!document.fonts) {
+            return;
+        }
+        let isActive = true;
+        document.fonts.ready.then(() => {
+            if (isActive) {
+                measure();
+            }
+        });
+        return () => {
+            isActive = false;
+        };
+    }, [measure]);
     useLayoutEffect(() => {
         const container = containerRef.current;
         if (!container) {

package/dist/Toolbar/useToolbarOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarOverflow.js","sourceRoot":"","sources":["../../src/Toolbar/useToolbarOverflow.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useToolbarOverflow.js","sourceRoot":"","sources":["../../src/Toolbar/useToolbarOverflow.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@charcuterie/logic": "2.3.0",
-    "@charcuterie/tokens": "1.9.0",
+    "@charcuterie/tokens": "1.10.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",
     "tailwind-merge": "^3.6.0"
@@ -94,7 +94,7 @@
     }
   },
   "devDependencies": {
-    "@charcuterie/storybook-config": "0.4.0",
+    "@charcuterie/storybook-config": "0.4.1",
     "@codemirror/commands": "^6",
     "@codemirror/lang-markdown": "^6",
     "@codemirror/language": "^6",

package/src/Overlay/OverlayPanel.tsx

@@ -117,13 +117,55 @@ export const OverlayPanel = ({
       // `outsidePress` on a *lower* modal would close it too, so it is
       // scoped to the top — which is also why the scrim needs no click
       // handler of its own.
-      outsidePress: isDismissable && isTop,
+      outsidePress: (event) => {
+        if (!isDismissable || !isTop) return false
+        /*
+         * ⚠️ A press on a toast is NOT an outside press.
+         *
+         * A `ToastRegion` renders in the page, so floating-ui sees a
+         * press on its Undo as a press outside the floating element
+         * — and closing the modal on the way to taking an action
+         * back is the opposite of what the button says. The region
+         * marks itself with `data-charcuterie-toast-region`; nothing
+         * else in the fleet carries that attribute.
+         *
+         * ⚠️ Do not delete this on the evidence of a small story.
+         * floating-ui has a *second*, accidental guard that hides
+         * this one: `closeOnPressOutside` bails out early when the
+         * press target's body-level ancestor contains none of the
+         * `[data-floating-ui-inert]` markers `markOthers` left
+         * behind, on the theory that such an element was injected
+         * after the panel opened. A page that is nothing but a
+         * region takes that branch and never reaches this predicate
+         * at all. A page with content beside the region — every real
+         * app — does reach it. `Toast.stories.tsx`'s
+         * `OverStackedModals` carries a heading and a paragraph for
+         * exactly that reason, and `ToastRegion.test.tsx` fails
+         * without this predicate only because they are there.
+         */
+        const target = event.target as Element | null
+        return (
+          target?.closest?.(
+            "[data-charcuterie-toast-region]",
+          ) == null
+        )
+      },
     }),
     useRole(context, { role }),
   ])
 
   const { register, unregister } = stack
 
+  /**
+   * Where this panel sits in the stack, and therefore how far above
+   * `--layer-modal` it paints. `0` when unprovided — a lone `Modal`
+   * is the only thing open.
+   */
+  const stackIndex = Math.max(
+    stack.orderedIds.indexOf(id),
+    0,
+  )
+
   useEffect(() => {
     if (!isVisible) {
       return
@@ -169,7 +211,26 @@ export const OverlayPanel = ({
       )}
 
       <FloatingPortal>
-        <div className="fixed inset-0 z-[var(--layer-modal)] flex items-center justify-center">
+        <div
+          className="fixed inset-0 flex items-center justify-center"
+          /*
+           * ⚠️ Cascading, not one shared layer.
+           *
+           * Every panel used to render at the one `--layer-modal`, and
+           * which of two open modals painted on top fell out of the
+           * order their portals happened to be appended in. A modal
+           * opened from inside another is the case that made this
+           * visible. The index in the stack is the answer the stack
+           * already knows.
+           *
+           * The scale's gaps are 100, so a cascade this deep is
+           * arithmetic nobody has to think about — and the toast sits
+           * at `--layer-toast` plus the same depth, above all of it.
+           */
+          style={{
+            zIndex: `calc(var(--layer-modal) + ${stackIndex})`,
+          }}
+        >
           <FloatingFocusManager
             context={context}
             // `undefined` keeps the manager's own default (the first

package/src/Overlay/OverlayStack.tsx

@@ -40,6 +40,11 @@ export type OverlayStackEntry = {
 
 export type OverlayStackValue = {
   depth: number
+  /**
+   * The open ids, oldest first. A panel reads its own index out of
+   * this to cascade its z-index above the one below it.
+   */
+  orderedIds: string[]
   /**
    * `false` in the context default. An `OverlayPanel` reads this to
    * decide whether to render its own scrim (unprovided) or defer to
@@ -56,6 +61,7 @@ export type OverlayStackValue = {
 const DEFAULT_STACK: OverlayStackValue = {
   depth: 0,
   isProvided: false,
+  orderedIds: [],
   register: () => {},
   requestCloseTop: () => {},
   topId: null,
@@ -76,7 +82,6 @@ export const OverlayStackProvider = ({
   const [entries, setEntries] = useState<
     OverlayStackEntry[]
   >([])
-
   // Read through a ref so `requestCloseTop` stays stable while still
   // seeing the live top.
   const entriesRef = useLatestRef(entries)
@@ -112,6 +117,7 @@ export const OverlayStackProvider = ({
     () => ({
       depth: entries.length,
       isProvided: true,
+      orderedIds: entries.map((one) => one.id),
       register,
       requestCloseTop,
       topId: entries.at(-1)?.id ?? null,

package/src/Toast/Toast.stories.tsx

@@ -9,6 +9,8 @@ import {
   StoryCell,
   StoryGrid,
 } from "../board.storyHelpers.tsx"
+import { Modal } from "../Modal/Modal.tsx"
+import { OverlayStackProvider } from "../Overlay/OverlayStack.tsx"
 import { Toast } from "./Toast.tsx"
 import type { ToastRecord } from "./ToastRegion.tsx"
 import { ToastRegion } from "./ToastRegion.tsx"
@@ -192,3 +194,155 @@ export const Interactive: Story = {
     )
   },
 }
+
+/**
+ * Twelve at once, which is the case the bottom-anchored column
+ * cannot hold. Without a bound the oldest climb off the top of the
+ * page and take the stack with them; the list is capped, pinned to
+ * its bottom edge, and scrolls. The newest is always the one on
+ * screen.
+ */
+export const ManyAtOnce: Story = {
+  args: { title: "Rip finished" },
+  parameters: { layout: "fullscreen" },
+  render: function ManyRegion() {
+    const [toasts, setToasts] = useState<ToastRecord[]>(
+      Array.from({ length: 12 }, (_, index) => ({
+        description: `Bay ${index + 1} finished.`,
+        duration: 0,
+        intent: "success" as const,
+        key: `rip-${index}`,
+        title: `Rip ${index + 1} finished`,
+      })),
+    )
+
+    return (
+      <div className="h-dvh">
+        <ToastRegion
+          onDismiss={(key) => {
+            setToasts((previous) =>
+              previous.filter((one) => one.key !== key),
+            )
+          }}
+          toasts={toasts}
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * The story the `z-50` bug needed and never had.
+ *
+ * Two stacked modals and a pinned toast carrying an Undo. Three
+ * things have to be true at once, and each one was false before the
+ * layering change:
+ *
+ * 1. The toast paints **above both modals**, which cascade at
+ *    `--layer-modal + n`.
+ * 2. Pressing its Undo does **not** close the modal — a press on a
+ *    toast is not an outside press.
+ * 3. The toast stays in the accessibility tree while the focus
+ *    manager hides the rest of the page.
+ */
+export const OverStackedModals: Story = {
+  args: { title: "Rip finished" },
+  parameters: { layout: "fullscreen" },
+  render: function OverModalsRegion() {
+    const [isOuterVisible, setIsOuterVisible] =
+      useState(true)
+
+    const [isInnerVisible, setIsInnerVisible] =
+      useState(true)
+
+    const [isUndone, setIsUndone] = useState(false)
+
+    const [toasts, setToasts] = useState<ToastRecord[]>([
+      {
+        description: "Undo",
+        duration: 0,
+        intent: "success",
+        key: "moved",
+        title: "Moved to Done",
+      },
+    ])
+
+    return (
+      <OverlayStackProvider>
+        <div className="h-dvh p-4">
+          {/* Page content beside the region, and load-bearing.
+              `markOthers` marks it, which is what makes
+              `OverlayPanel`'s `outsidePress` predicate decide the
+              press on Undo — a story holding nothing but the
+              region takes a different branch inside floating-ui
+              and passes whether the guard exists or not. */}
+          <h2 className="m-0 text-lg">Rip queue</h2>
+
+          <p className="m-0">
+            Four bays, three of them busy.
+          </p>
+
+          <Modal
+            aria-label="Rip settings"
+            isVisible={isOuterVisible}
+            onClose={() => {
+              setIsOuterVisible(false)
+            }}
+          >
+            <div className="flex flex-col gap-2 p-4">
+              <p className="m-0">The outer modal.</p>
+
+              <Button
+                onClick={() => {
+                  setIsInnerVisible(true)
+                }}
+              >
+                Open the inner modal
+              </Button>
+            </div>
+          </Modal>
+
+          <Modal
+            aria-label="Confirm the rip"
+            isVisible={isOuterVisible && isInnerVisible}
+            onClose={() => {
+              setIsInnerVisible(false)
+            }}
+          >
+            <div className="flex flex-col gap-2 p-4">
+              <p className="m-0">
+                The inner modal, on top of the outer one.
+              </p>
+
+              <p className="m-0">
+                {isUndone ? "Undone" : "Not undone"}
+              </p>
+            </div>
+          </Modal>
+
+          <ToastRegion
+            onDismiss={(key) => {
+              setToasts((previous) =>
+                previous.filter((one) => one.key !== key),
+              )
+            }}
+            toasts={toasts.map((one) => ({
+              ...one,
+              description: (
+                <Button
+                  onClick={() => {
+                    setIsUndone(true)
+                  }}
+                  appearance="ghost"
+                  size="sm"
+                >
+                  Undo
+                </Button>
+              ),
+            }))}
+          />
+        </div>
+      </OverlayStackProvider>
+    )
+  },
+}

package/src/Toast/ToastRegion.test.tsx

@@ -0,0 +1,172 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, waitFor } from "storybook/test"
+import { test, expect as vitestExpect } from "vitest"
+
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./Toast.stories.tsx"
+
+const { ManyAtOnce, OverStackedModals } =
+  composeStories(stories)
+
+const layerOf = (element: Element): number =>
+  Number.parseInt(
+    globalThis.getComputedStyle(element).zIndex,
+    10,
+  )
+
+/**
+ * The region used to paint at a hand-picked `z-50`, which is below
+ * every overlay token in the scale — so an Undo raised from inside a
+ * modal was drawn *behind* the modal and could not be pressed at
+ * all. These are the three things "the toast is on top" has to mean,
+ * and each one was false.
+ */
+test("the toast paints above a cascade of modals", async () => {
+  const { body, canvasElement } = await mountStory(
+    OverStackedModals,
+  )
+
+  const [outer, inner] = [
+    ...document.querySelectorAll('[role="dialog"]'),
+  ].map((panel) => {
+    const container = panel.closest("[style*='z-index']")
+
+    if (!container) {
+      throw new Error("a panel rendered with no container")
+    }
+
+    return container
+  })
+
+  if (!outer || !inner) {
+    throw new Error("both modals should be open")
+  }
+
+  // Cascading, not one shared `--layer-modal`. Which of the two
+  // painted on top used to fall out of portal append order.
+  vitestExpect(layerOf(inner)).toBeGreaterThan(
+    layerOf(outer),
+  )
+
+  const region = expectAgentDrivable(body, {
+    name: "Notifications",
+    role: "status",
+  })
+
+  // Above the whole stack, not only its first floor.
+  vitestExpect(layerOf(region)).toBeGreaterThan(
+    layerOf(inner),
+  )
+
+  // And painted there, which the z-index alone does not prove: a
+  // region nested inside a panel's stacking context would report the
+  // same number and still be covered.
+  const undo = expectAgentDrivable(body, {
+    name: "Undo",
+    role: "button",
+  })
+
+  const box = undo.getBoundingClientRect()
+
+  const painted = document.elementFromPoint(
+    box.left + box.width / 2,
+    box.top + box.height / 2,
+  )
+
+  vitestExpect(undo.contains(painted)).toBe(true)
+
+  await expect(canvasElement).toBeTruthy()
+})
+
+test("pressing Undo does not dismiss the modal under it", async () => {
+  const { body } = await mountStory(OverStackedModals)
+
+  await userEvent.click(
+    expectAgentDrivable(body, {
+      name: "Undo",
+      role: "button",
+    }),
+  )
+
+  // The action ran...
+  await waitFor(() => {
+    vitestExpect(body.getByText("Undone")).toBeTruthy()
+  })
+
+  // ...and `useDismiss` did not read the press as an outside press.
+  // Closing a modal on the way to taking an action back is the
+  // opposite of what the button says.
+  vitestExpect(
+    document.querySelectorAll('[role="dialog"]'),
+  ).toHaveLength(2)
+})
+
+test("the toast stays in the accessibility tree behind a focus trap", async () => {
+  const { body } = await mountStory(OverStackedModals)
+
+  const region = expectAgentDrivable(body, {
+    name: "Notifications",
+    role: "status",
+  })
+
+  // `FloatingFocusManager`'s `modal` marks the body-level siblings
+  // of its portal `aria-hidden` — but `markOthers` concatenates
+  // `[aria-live],[role="status"],output` onto its keep-list, so a
+  // live region survives where it stands. That is load-bearing: it
+  // is why this region does not have to move inside the panel, and
+  // why it keeps `role="status"` rather than a bare `div`.
+  vitestExpect(region.closest("[aria-hidden='true']")).toBe(
+    null,
+  )
+  vitestExpect(region.closest("[inert]")).toBe(null)
+})
+
+test("a tall stack of toasts scrolls instead of climbing off the page", async () => {
+  const { body } = await mountStory(ManyAtOnce)
+
+  const region = expectAgentDrivable(body, {
+    name: "Notifications",
+    role: "status",
+  })
+
+  const list = region.querySelector("ul")
+
+  if (!list) {
+    throw new Error("the region should render a list")
+  }
+
+  // Bounded, so the column cannot grow past the viewport.
+  vitestExpect(list.scrollHeight).toBeGreaterThan(
+    list.clientHeight,
+  )
+  vitestExpect(
+    list.getBoundingClientRect().top,
+  ).toBeGreaterThanOrEqual(0)
+
+  // Taken to the far end on arrival: the newest toast is the one
+  // carrying the action, and it is the one at the bottom.
+  const newest = body.getByText("Rip 12 finished")
+
+  vitestExpect(
+    newest.getBoundingClientRect().bottom,
+  ).toBeLessThanOrEqual(
+    list.getBoundingClientRect().bottom + 1,
+  )
+
+  // And the oldest is reachable rather than clipped away. This is
+  // the assertion `justify-content: flex-end` fails: chromium does
+  // not make a flex container's start-edge overflow scrollable, so
+  // the toasts above the fold could not be reached at all.
+  list.scrollTop = 0
+
+  await waitFor(() => {
+    const oldest = body.getByText("Rip 1 finished")
+
+    vitestExpect(
+      oldest.getBoundingClientRect().top,
+    ).toBeGreaterThanOrEqual(
+      list.getBoundingClientRect().top - 1,
+    )
+  })
+})

package/src/Toast/ToastRegion.tsx

@@ -1,6 +1,8 @@
 import type { IntentName } from "@charcuterie/tokens"
 import type { ReactNode } from "react"
+import { useEffect, useRef } from "react"
 
+import { useOverlayStack } from "../Overlay/OverlayStack.tsx"
 import { toClassName } from "../toClassName.ts"
 import { Toast } from "./Toast.tsx"
 
@@ -52,47 +54,133 @@ export type ToastRegionProps = {
  * sync. The lifecycle *inside* one toast is state a store cannot
  * see, which is why `Toast` owns that and nothing more.
  *
+ * ### It is the top of the layer scale, and it moves to stay there
+ *
+ * ⚠️ The container was `z-50` — a hand-picked number, in the library
+ * whose whole point is that nobody picks one. It is
+ * `--layer-toast` now, the top of the scale, above `--layer-tooltip`.
+ * The owner's rule: *"I think toast should always exist on top of
+ * everything."*
+ *
+ * The open panels cascade — a modal over a modal paints at
+ * `--layer-modal + n` — so the depth is added here too, and the
+ * toast clears the whole stack rather than only its first floor.
+ * Both numbers come off `useOverlayStack`, so the ordering is
+ * arithmetic rather than portal-append order.
+ *
+ * ### Painting on top is only half of "on top"
+ *
+ * ⚠️ A press on a toast while a `Modal` is open is an **outside**
+ * press as far as floating-ui is concerned, and `useDismiss` would
+ * close the modal on the way to taking an action back. That is why
+ * the container carries `data-charcuterie-toast-region`:
+ * `OverlayPanel`'s `outsidePress` reads it and lets the press
+ * through. Nothing else in the fleet carries that attribute.
+ *
+ * ⚠️ Do **not** move this region inside the panel's portal to solve
+ * that. Two reasons, both measured. `FloatingFocusManager`'s `modal`
+ * already leaves it alone — `markOthers` concatenates
+ * `body.querySelectorAll('[aria-live],[role="status"],output')` onto
+ * its keep-list, and this region is a `role="status"`, so it is
+ * never marked `aria-hidden` where it stands. And the panel's
+ * container sets a z-index, so a region nested inside it would be
+ * trapped in that stacking context and lose to the *next* modal
+ * however high `--layer-toast` climbs.
+ *
  * ### `pointer-events-none` on the container, `auto` on each toast
  *
  * A fixed overlay across the bottom of the viewport swallows every
  * click in that band, including on the app behind it, and it does so
  * invisibly. The container passes clicks through and each toast
  * takes them back.
+ *
+ * The list keeps `pointer-events: none` and still scrolls: a wheel
+ * event over a toast chains to the nearest scrollable **ancestor**,
+ * which is the list, and hit-testing never has to reach it.
+ *
+ * ### Many at once, and the newest is the one you can see
+ *
+ * The column grows upward from the bottom of the viewport, so
+ * without a bound the oldest toasts climb off the top of the page —
+ * clipped by the viewport, and unreachable, because a fixed element
+ * is not something the page can scroll to. The list is capped at
+ * `min(60dvh, 32rem)` and scrolls `overscroll-contain`, so the page
+ * behind never moves because a notification arrived. The owner's
+ * rule: *"if you have multiple toasts, it should accomodate them
+ * somehow."*
+ *
+ * ⚠️ Bottom-pinned with `margin-block-start: auto` on the first
+ * toast, **not** `justify-content: flex-end`. Measured in chromium:
+ * with `justify-end` an overflowing list reports
+ * `scrollHeight === clientHeight` and the toasts above the fold
+ * cannot be scrolled to at all — content overflowing a flex
+ * container's *start* edge is not reachable overflow. An auto margin
+ * resolves to `0` the moment the free space runs out, so the same
+ * rule pins a short list and scrolls a long one.
+ *
+ * The scroll is taken to the bottom whenever the count changes,
+ * because the newest toast is the one with the action on it and it
+ * is the one at the far end.
  */
 export const ToastRegion = ({
   className,
   label = "Notifications",
   onDismiss,
   toasts,
-}: ToastRegionProps): ReactNode => (
-  <div
-    aria-label={label}
-    // `role="status"` is `aria-live="polite"` plus
-    // `aria-atomic="true"` by default — and atomic is wrong here,
-    // because it re-reads the entire stack every time one arrives.
-    // Spelling `aria-atomic="false"` next to it is what makes a
-    // second toast announce only itself.
-    aria-atomic="false"
-    className={toClassName(
-      "pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-center gap-2 p-4",
-      className,
-    )}
-    role="status"
-  >
-    <ul className="pointer-events-none flex w-full max-w-sm list-none flex-col gap-2 p-0">
-      {toasts.map((toast) => (
-        <Toast
-          duration={toast.duration}
-          intent={toast.intent}
-          key={toast.key}
-          onRemove={() => {
-            onDismiss(toast.key)
-          }}
-          title={toast.title}
-        >
-          {toast.description}
-        </Toast>
-      ))}
-    </ul>
-  </div>
-)
+}: ToastRegionProps): ReactNode => {
+  const { depth } = useOverlayStack()
+
+  const listRef = useRef<HTMLUListElement>(null)
+
+  const _toastCount = toasts.length
+
+  useEffect(() => {
+    const list = listRef.current
+
+    if (!list) {
+      return
+    }
+
+    list.scrollTop = list.scrollHeight
+  }, [])
+
+  return (
+    <div
+      aria-label={label}
+      data-charcuterie-toast-region=""
+      // `role="status"` is `aria-live="polite"` plus
+      // `aria-atomic="true"` by default — and atomic is wrong here,
+      // because it re-reads the entire stack every time one arrives.
+      // Spelling `aria-atomic="false"` next to it is what makes a
+      // second toast announce only itself.
+      aria-atomic="false"
+      className={toClassName(
+        "pointer-events-none fixed inset-x-0 bottom-0 flex flex-col items-center gap-2 p-4",
+        className,
+      )}
+      role="status"
+      style={{
+        zIndex: `calc(var(--layer-toast) + ${depth})`,
+      }}
+    >
+      <ul
+        ref={listRef}
+        className="charcuterie-scrollbar pointer-events-none flex max-h-[min(60dvh,32rem)] w-full max-w-sm list-none flex-col gap-2 overflow-y-auto overscroll-contain p-0 [&>li]:shrink-0 [&>li:first-child]:mt-auto"
+      >
+        {toasts.map((toast) => (
+          <Toast
+            duration={toast.duration}
+            intent={toast.intent}
+            key={toast.key}
+            onRemove={() => {
+              onDismiss(toast.key)
+            }}
+            title={toast.title}
+          >
+            {toast.description}
+          </Toast>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/Toolbar/Toolbar.test.tsx

@@ -284,3 +284,87 @@ test("the shell mounts exactly one toolbar", async () => {
     }),
   ).toHaveLength(1)
 })
+
+/**
+ * The font race, which is latent rather than observed: it needs the
+ * two faces to disagree across a collapse boundary, and no story in
+ * the library crosses one today. The test builds that boundary on
+ * purpose, so the mechanism is checked rather than waited for.
+ *
+ * Every width the bar measures is a **text** width. On a cold cache
+ * the first measurement is taken in the fallback face, and when the
+ * real face swaps in the items change size — but the container does
+ * not, so the `ResizeObserver` stays quiet, and nothing re-renders,
+ * so the layout effect does not run either. The bar keeps an answer
+ * computed against a font that is no longer on screen.
+ *
+ * The stub below is that swap with the timing made explicit: the bar
+ * mounts while `document.fonts.ready` is still pending, the items
+ * are widened with no change to the container's box, and the
+ * promise is then resolved. A bar that only measures on mount and
+ * on resize sees neither event and stays wrong.
+ */
+test("the bar re-measures once the webfont has loaded", async () => {
+  const realFonts = document.fonts
+
+  let markFontsReady = () => {}
+
+  const fontsReady = new Promise<FontFaceSet>((resolve) => {
+    markFontsReady = () => {
+      resolve(realFonts)
+    }
+  })
+
+  // Layered over the real set rather than replacing it, so anything
+  // else that reads `document.fonts` during the mount still works.
+  Object.defineProperty(document, "fonts", {
+    configurable: true,
+    value: Object.create(realFonts, {
+      ready: {
+        get: () => fontsReady,
+      },
+    }),
+  })
+
+  // Widens every action without touching the bar's own box — the
+  // `Frame` around `Playground` is a fixed `34rem`. That is exactly
+  // what a font swap does, and it is why the `ResizeObserver` is
+  // not a substitute for this effect.
+  const widenActions = document.createElement("style")
+
+  widenActions.textContent = `[role="toolbar"] button { padding-inline: 4rem; }`
+
+  try {
+    const { canvas } = await mountStory(Playground)
+
+    const toolbar = expectAgentDrivable(canvas, {
+      name: "Deck actions",
+      role: "toolbar",
+    })
+
+    // It fits in the fallback face.
+    await expect(
+      within(toolbar).queryByRole("button", {
+        name: "More actions",
+      }),
+    ).toBeNull()
+
+    document.head.append(widenActions)
+
+    markFontsReady()
+
+    await waitFor(() => {
+      expect(
+        within(toolbar).getByRole("button", {
+          name: "More actions",
+        }),
+      ).toBeInTheDocument()
+    })
+  } finally {
+    widenActions.remove()
+
+    // Back to the prototype getter — the stub was an own property
+    // shadowing it.
+    Reflect.deleteProperty(document, "fonts")
+  }
+})

package/src/Toolbar/useToolbarOverflow.ts

@@ -159,6 +159,49 @@ export const useToolbarOverflow = ({
    */
   useLayoutEffect(measure)
 
+  /**
+   * Measure again once the webfont has actually arrived.
+   *
+   * Every width above is a **text** width, so it is only as correct
+   * as the font that was loaded when it was read. On a cold cache
+   * the first measurement happens in the fallback face, the items
+   * come out a few pixels off, and `chooseVisibleCount` keeps or
+   * drops one action it should not have — then never revisits it,
+   * because swapping a font changes no box the `ResizeObserver`
+   * watches and triggers no render.
+   *
+   * The user-visible symptom is a bar that settles one button wrong
+   * and stays there. It needs the two faces to disagree across a
+   * collapse boundary, so it is latent rather than observed: no
+   * story in the library crosses one today, which is why `vrt`
+   * reports nothing either way. That makes it a gap to close, not a
+   * regression to chase — the bar is supposed to measure what is on
+   * screen, and until now it could not.
+   *
+   * `document.fonts.ready` resolves immediately when the fonts are
+   * already in, so a warm load pays one microtask and
+   * `setVisibleCount` bails on the unchanged answer.
+   */
+  useLayoutEffect(() => {
+    // jsdom has no `document.fonts`, and neither does a very old
+    // browser. Nothing to wait for is not an error.
+    if (!document.fonts) {
+      return
+    }
+
+    let isActive = true
+
+    document.fonts.ready.then(() => {
+      if (isActive) {
+        measure()
+      }
+    })
+
+    return () => {
+      isActive = false
+    }
+  }, [measure])
+
   useLayoutEffect(() => {
     const container = containerRef.current