@charcuterie/ui 1.0.1 → 2.0.0

package/dist/Menu/Menu.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { selectTabIndex, useClonedChild, useRovingFocus, } from "@charcuterie/logic";
-import { autoUpdate, FloatingFocusManager, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { selectTabIndex, useRovingFocus, } from "@charcuterie/logic";
+import { FloatingFocusManager, FloatingPortal, } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
+import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.js";
+import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.js";
 import { toClassName } from "../toClassName.js";
 import { MenuAction } from "./MenuAction.js";
 /**
@@ -66,49 +68,17 @@ import { MenuAction } from "./MenuAction.js";
  */
 export const Menu = ({ className, isVisible, items, onDismiss, placement = "bottom-start", trigger, }) => {
     const itemElements = useRef(new Map());
-    const panelElement = useRef(null);
     const focus = useRovingFocus();
     const { activeValue, registeredValues, setActiveValue } = focus;
     const [firstValue] = registeredValues;
-    const { context, floatingStyles, refs } = useFloating({
-        open: isVisible,
-        onOpenChange: (isNextVisible) => {
-            if (!isNextVisible) {
-                onDismiss();
-            }
-        },
+    const { clonedTrigger, context, floatingStyles, getFloatingProps, setFloating, } = useAnchoredOverlay({
+        isVisible,
+        offsetValue: 4,
+        onDismiss,
         placement,
-        middleware: [offset(4), flip(), shift({ padding: 8 })],
-        strategy: "fixed",
-        whileElementsMounted: autoUpdate,
-    });
-    const { getFloatingProps, getReferenceProps } = useInteractions([
-        useDismiss(context),
-        useRole(context, { role: "menu" }),
-    ]);
-    const clonedTrigger = useClonedChild(trigger, {
-        ...getReferenceProps(),
-        ref: refs.setReference,
+        role: "menu",
+        trigger,
     });
-    /**
-     * The other half of the `isConnected` guard below. If the ref
-     * fired while the node was still detached, nothing has shown the
-     * popover — and a `[popover]` that was never shown is
-     * `display: none`, so the menu renders, passes typecheck, and is
-     * invisible to `getByRole` and to a user alike.
-     *
-     * Effects run after the tree is connected, so this is the
-     * backstop. It is idempotent: `:popover-open` is the same question
-     * the ref asks.
-     */
-    useEffect(() => {
-        const panel = panelElement.current;
-        if (isVisible &&
-            panel?.isConnected &&
-            !panel.matches(":popover-open")) {
-            panel.showPopover();
-        }
-    }, [isVisible]);
     /**
      * Opening **makes** a member active, and this is the step the
      * first version was missing.
@@ -137,63 +107,43 @@ export const Menu = ({ className, isVisible, items, onDismiss, placement = "bott
         }
         itemElements.current.get(activeValue)?.focus();
     }, [activeValue, isVisible]);
-    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingFocusManager, { context: context, 
-                // `false`, so Tab leaves the menu and lands on the next
-                // control in the page — which is what closes it, through
-                // `useDismiss`. A trapped menu is a dialog.
-                modal: false, 
-                // Focus is moved by the effect above, to whichever item
-                // `RovingFocus` made active. Letting the manager also aim
-                // it is two owners for one caret.
-                initialFocus: -1, children: _jsx("div", { ...getFloatingProps(), className: toClassName("inset-auto m-0 flex min-w-48 flex-col gap-0.5 rounded-md border border-border-default bg-surface-overlay p-1 shadow-medium", className), onKeyDown: (keyEvent) => {
-                        const commands = {
-                            ArrowDown: focus.next,
-                            ArrowUp: focus.previous,
-                            End: focus.last,
-                            Home: focus.first,
-                        };
-                        const command = commands[keyEvent.key];
-                        if (command) {
-                            // Arrow keys scroll the page by default, and a menu
-                            // that scrolls the document behind it while moving
-                            // focus is the hand-rolled version of this
-                            // component.
-                            keyEvent.preventDefault();
-                            command();
-                        }
-                    }, popover: "manual", ref: (node) => {
-                        refs.setFloating(node);
-                        panelElement.current = node;
-                        // A ref callback rather than an effect, for the same
-                        // reason as `Popover`: a `[popover]` is
-                        // `display: none` until shown, and every child effect
-                        // — including the focus move above — would otherwise
-                        // be aiming at a hidden element.
-                        //
-                        // `isConnected` is the guard `Popover` does not need
-                        // and this does. `FloatingFocusManager` renders a pair
-                        // of focus guards around its child, so React commits
-                        // this subtree in an order where the ref can fire
-                        // while the node is still detached — and
-                        // `showPopover()` on a disconnected element throws
-                        // `InvalidStateError`, which surfaces as an unhandled
-                        // rejection rather than as a failing assertion.
-                        if (node?.isConnected &&
-                            !node.matches(":popover-open")) {
-                            node.showPopover();
-                        }
-                    }, 
-                    // Duplicated from `getFloatingProps()` on purpose, and
-                    // the two cannot differ — `useRole(context, { role:
-                    // "menu" })` above is where it comes from. Stated here
-                    // because a linter cannot see a role through a spread.
-                    role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
-                            if (element) {
-                                itemElements.current.set(key, element);
-                            }
-                            else {
-                                itemElements.current.delete(key);
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, 
+                    // `false`, so Tab leaves the menu and lands on the next
+                    // control in the page — which is what closes it, through
+                    // `useDismiss`. A trapped menu is a dialog.
+                    modal: false, 
+                    // Focus is moved by the effect above, to whichever item
+                    // `RovingFocus` made active. Letting the manager also aim
+                    // it is two owners for one caret.
+                    initialFocus: -1, children: _jsx("div", { ...getFloatingProps(), className: toClassName(PANEL_SURFACE_CLASS, "z-[var(--layer-modal)] flex min-w-48 flex-col gap-0.5 p-1", className), onKeyDown: (keyEvent) => {
+                            const commands = {
+                                ArrowDown: focus.next,
+                                ArrowUp: focus.previous,
+                                End: focus.last,
+                                Home: focus.first,
+                            };
+                            const command = commands[keyEvent.key];
+                            if (command) {
+                                // Arrow keys scroll the page by default, and a menu
+                                // that scrolls the document behind it while moving
+                                // focus is the hand-rolled version of this
+                                // component.
+                                keyEvent.preventDefault();
+                                command();
                             }
-                        } }, item.key))) }) })) : null] }));
+                        }, ref: setFloating, 
+                        // Duplicated from `getFloatingProps()` on purpose, and
+                        // the two cannot differ — `useRole(context, { role:
+                        // "menu" })` in the hook is where it comes from. Stated
+                        // here because a linter cannot see a role through a
+                        // spread.
+                        role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
+                                if (element) {
+                                    itemElements.current.set(key, element);
+                                }
+                                else {
+                                    itemElements.current.delete(key);
+                                }
+                            } }, item.key))) }) }) })) : null] }));
 };
 //# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

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

package/dist/Modal/Modal.d.ts

@@ -1,66 +1,18 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
-export type ModalSize = "full" | "lg" | "md" | "sm" | "xl";
-export type ModalProps = Omit<ComponentPropsWithRef<"dialog">, "onClose" | "open"> & {
-    /** The footer row. Buttons, usually. */
-    footer?: ReactNode;
-    heading: string;
-    headingLevel?: 2 | 3 | 4;
-    /**
-     * Escape and a backdrop press both close. Off for the one
-     * honest case — a destructive confirm the user has to answer —
-     * and off means Escape is *cancelled* rather than ignored, so
-     * the browser cannot close a dialog the app still owns.
-     */
+import type { ReactNode } from "react";
+export type ModalProps = {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    children: ReactNode;
+    className?: string;
+    /** Escape and a backdrop press both close. */
     isDismissable?: boolean;
     isVisible: boolean;
     /**
-     * Every route out lands here: the close button, Escape, a
-     * backdrop press. Wire it to a `useVisibility()`'s `hide`.
+     * Every route out lands here: Escape, a backdrop press. Wire it to a
+     * `useVisibility()`'s `hide`.
      */
     onClose: () => void;
-    size?: ModalSize;
+    role?: "alertdialog" | "dialog";
 };
-/**
- * Four repos, and **plex-channels and ripdeck independently
- * converged on native `<dialog>`** — which is the design here
- * rather than a shortcut. `showModal()` gives a focus trap,
- * Escape, `::backdrop`, `inert` on everything behind it, and the
- * **top layer**, from the platform, correctly, in every browser
- * the fleet runs.
- *
- * What is not free — and the reason a component exists at all —
- * is that a native `<dialog>` is a *self-owning* control: call
- * `showModal()` and it decides it is open. That is the same
- * conflict Radix has, and it gets the same answer as everywhere
- * else in this library: **`isVisible` is the truth, and an effect
- * makes the element agree with it.** Nothing here reads
- * `dialogElement.open` as state; it is read only to avoid calling
- * a method that would throw.
- *
- * ### Why it is not portalled
- *
- * The top layer is a *paint* concept: a `<dialog>` renders above
- * everything while staying exactly where it is in the DOM. So it
- * needs no portal — and that matters well past tidiness, because a
- * portal moves the node to `document.body`, out of whatever
- * element a test or an agent scoped its queries to.
- * `canvas.getByRole("dialog")` finds this one. It would not find a
- * portalled one, and the story would have to reach for `screen`
- * and lose its scoping.
- *
- * ### `open:flex`, not `flex`
- *
- * A closed `<dialog>` is hidden by a UA rule that any
- * `display: flex` of ours would beat — so the modal would render
- * permanently, in the page flow, with no error. The layout is
- * therefore behind Tailwind's `open:` variant, which is the
- * `[open]` attribute the browser manages.
- *
- * ### The accessible name
- *
- * `heading` is required and is a string, not a `ReactNode`. A
- * dialog with no name is announced as "dialog" and nothing else,
- * which is what every hand-rolled modal in the inventory does.
- */
-export declare const Modal: ({ children, className, footer, heading, headingLevel, isDismissable, isVisible, onClose, size, ...dialogProps }: ModalProps) => ReactNode;
+export declare const Modal: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, isDismissable, isVisible, onClose, role, }: ModalProps) => ReactNode;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,SAAS,GAAG,MAAM,CACnB,GAAG;IACF,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK,GAAI,iHAWnB,UAAU,KAAG,SAsHf,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;CAChC,CAAA;AAqCD,eAAO,MAAM,KAAK,GAAI,+HASnB,UAAU,KAAG,SAYf,CAAA"}

package/dist/Modal/Modal.js

@@ -1,111 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUniqueId } from "@charcuterie/logic";
-import { useEffect, useRef } from "react";
-import { Button } from "../Button/Button.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayPanel } from "../Overlay/OverlayPanel.js";
 import { toClassName } from "../toClassName.js";
-import { lockScrollBehind } from "./lockScrollBehind.js";
 /**
- * `85dvh` rather than `85vh` — on a phone the two differ by the
- * address bar, and a dialog whose footer is under it is a dialog
- * with no buttons.
- */
-const SIZE_CLASS = {
-    sm: "max-h-[85dvh] w-full max-w-sm",
-    md: "max-h-[85dvh] w-full max-w-md",
-    lg: "max-h-[85dvh] w-full max-w-2xl",
-    // M5 added this, because the scale jumped from 42rem straight to
-    // the whole viewport and rip-deck's capture tail lands in the
-    // gap: a MakeMKV robot log is fixed-width `MSG:5072,0,1,"…"`
-    // lines that wrap badly at 42rem, and a full-screen dialog over a
-    // nine-bay dashboard hides the thing being diagnosed. 56rem is
-    // what that app's hand-rolled `<dialog>` used before the swap.
-    xl: "max-h-[85dvh] w-full max-w-4xl",
-    full: "h-[100dvh] max-h-[100dvh] w-full max-w-full rounded-none",
-};
-/**
- * Four repos, and **plex-channels and ripdeck independently
- * converged on native `<dialog>`** — which is the design here
- * rather than a shortcut. `showModal()` gives a focus trap,
- * Escape, `::backdrop`, `inert` on everything behind it, and the
- * **top layer**, from the platform, correctly, in every browser
- * the fleet runs.
- *
- * What is not free — and the reason a component exists at all —
- * is that a native `<dialog>` is a *self-owning* control: call
- * `showModal()` and it decides it is open. That is the same
- * conflict Radix has, and it gets the same answer as everywhere
- * else in this library: **`isVisible` is the truth, and an effect
- * makes the element agree with it.** Nothing here reads
- * `dialogElement.open` as state; it is read only to avoid calling
- * a method that would throw.
+ * The base layer. Backdrop, dismiss, and portal — and no chrome.
  *
- * ### Why it is not portalled
+ * This is the generic modal the library never had while `Modal` was
+ * secretly a *dialog*. A dialog is one kind of modal; so are a
+ * confirmation, a media lightbox, and anything else that wants a
+ * scrim, an Escape, and a click-outside. `Modal` is that foundation,
+ * and `Dialog` is `Modal` plus the heading/Close/footer/size chrome
+ * the old component shipped.
  *
- * The top layer is a *paint* concept: a `<dialog>` renders above
- * everything while staying exactly where it is in the DOM. So it
- * needs no portal — and that matters well past tidiness, because a
- * portal moves the node to `document.body`, out of whatever
- * element a test or an agent scoped its queries to.
- * `canvas.getByRole("dialog")` finds this one. It would not find a
- * portalled one, and the story would have to reach for `screen`
- * and lose its scoping.
+ * It renders an `OverlayPanel`: portalled to `document.body` (escaping
+ * `overflow: hidden` the top layer could not), focus-trapped, stacked
+ * by portal append order, and dismissible only when it is the top of
+ * the stack. All `Modal` adds is a sensible surface — a bordered,
+ * rounded, elevated box clamped to `85dvh` — that a caller composes
+ * over with `className`. `Dialog` replaces the width and layout; a
+ * bare `Modal` sizes to its content.
  *
- * ### `open:flex`, not `flex`
+ * ### One accessible name, required
  *
- * A closed `<dialog>` is hidden by a UA rule that any
- * `display: flex` of ours would beat — so the modal would render
- * permanently, in the page flow, with no error. The layout is
- * therefore behind Tailwind's `open:` variant, which is the
- * `[open]` attribute the browser manages.
+ * A `role="dialog"` takes no name from its content, so pass exactly
+ * one of `aria-label` / `aria-labelledby`. Missing both is a dev-time
+ * warning from `OverlayPanel`, not a throw — the lesson `Spinner`,
+ * `Popover`, and the old `Modal` each learned.
  *
- * ### The accessible name
+ * ### Stacking is zero-config, until it is not
  *
- * `heading` is required and is a string, not a `ReactNode`. A
- * dialog with no name is announced as "dialog" and nothing else,
- * which is what every hand-rolled modal in the inventory does.
+ * A lone `Modal` renders its own scrim with no setup. Only when modals
+ * **stack** — one opened from inside another — does the app need an
+ * `OverlayStackProvider` at its root, so the N of them share one scrim
+ * and dismiss top-first.
  */
-export const Modal = ({ children, className, footer, heading, headingLevel = 2, isDismissable = true, isVisible, onClose, size = "md", ...dialogProps }) => {
-    const dialogRef = useRef(null);
-    const headingId = useUniqueId();
-    const Heading = `h${headingLevel}`;
-    useEffect(() => {
-        const dialogElement = dialogRef.current;
-        if (!dialogElement) {
-            return;
-        }
-        // Guarded both ways. `showModal()` on an already-open dialog
-        // throws `InvalidStateError`, and `close()` on a closed one
-        // fires a spurious `close` event — either turns a re-render
-        // into a bug.
-        if (isVisible && !dialogElement.open) {
-            dialogElement.showModal();
-        }
-        if (!isVisible && dialogElement.open) {
-            dialogElement.close();
-        }
-    }, [isVisible]);
-    useEffect(() => (isVisible ? lockScrollBehind() : undefined), [isVisible]);
-    return (_jsxs("dialog", { ...dialogProps, "aria-labelledby": headingId, className: toClassName(
-        // `m-auto` and `p-0` undo the UA stylesheet, which centres
-        // by margin and adds padding of its own.
-        "m-auto flex-col overflow-hidden rounded-lg border border-border-default bg-surface-overlay p-0 text-content-primary shadow-high backdrop:bg-scrim open:flex", SIZE_CLASS[size], className), onCancel: (cancelEvent) => {
-            // Escape. Cancelled rather than ignored when the dialog is
-            // not dismissable: letting the browser close it would
-            // leave `isVisible` true and the element shut, which is
-            // precisely the desync this component exists to prevent.
-            cancelEvent.preventDefault();
-            if (isDismissable) {
-                onClose();
-            }
-        }, onClick: (clickEvent) => {
-            // The backdrop is not an element — a press on it targets
-            // the `<dialog>` itself, while a press on the content
-            // targets something inside. Comparing target to
-            // currentTarget is the whole test.
-            if (isDismissable &&
-                clickEvent.target === clickEvent.currentTarget) {
-                onClose();
-            }
-        }, ref: dialogRef, children: [_jsxs("header", { className: "flex shrink-0 items-start justify-between gap-3 border-b border-border-subtle p-4", children: [_jsx(Heading, { className: "font-semibold text-lg leading-tight", id: headingId, children: heading }), isDismissable ? (_jsx(Button, { appearance: "ghost", intent: "neutral", onClick: onClose, size: "sm", children: "Close" })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: children }), footer ? (_jsx("footer", { className: "flex shrink-0 flex-wrap justify-end gap-2 border-t border-border-subtle p-4", children: footer })) : null] }));
-};
+const MODAL_BOX_CLASS = "flex max-h-[85dvh] flex-col overflow-hidden rounded-lg border border-border-default bg-surface-overlay text-content-primary shadow-high";
+export const Modal = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, isDismissable = true, isVisible, onClose, role = "dialog", }) => (_jsx(OverlayPanel, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: toClassName(MODAL_BOX_CLASS, className), isDismissable: isDismissable, isVisible: isVisible, onClose: onClose, role: role, children: children }));
 //# sourceMappingURL=Modal.js.map

package/dist/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA6B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAkB/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,eAAe,GACnB,yIAAyI,CAAA;AAE3I,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,GACJ,EAAa,EAAE,CAAC,CAC3B,KAAC,YAAY,kBACC,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAE,WAAW,CAAC,eAAe,EAAE,SAAS,CAAC,EAClD,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,YAET,QAAQ,GACI,CAChB,CAAA"}

package/dist/Overlay/OverlayPanel.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+/**
+ * The portalled, backdrop-backed, focus-trapping panel that `Modal`
+ * renders. No chrome — that is `Dialog`'s job — only the four things
+ * every backdrop overlay needs: it portals to `document.body`, a
+ * scrim stands behind it, focus is trapped inside it, and Escape or an
+ * outside press closes it.
+ *
+ * ### Portalled, and the top layer is gone on purpose
+ *
+ * This supersedes the `<dialog>.showModal()` top-layer approach. The
+ * top layer paints above everything but cannot escape an
+ * `overflow: hidden` ancestor's *clipping* in every case the fleet
+ * hit; a portal to `document.body` does. The objection the old
+ * decision raised — a portal moves the node out of a scoped query —
+ * is answered by `useRole` writing `aria-controls`/`aria-labelledby`
+ * so the trigger→panel link is followable across the boundary, and by
+ * the stories scoping panels to `within(document.body)` while the
+ * structural `expectAgentDrivable` needs no change.
+ *
+ * ### Only the top of the stack is live
+ *
+ * `useDismiss` (Escape + outside press) is enabled **only when this is
+ * the top** of the stack, so an outside press or Escape closes the
+ * innermost modal and nothing under it — the same rule the platform's
+ * nested `<dialog>` gave for free, without a hand-rolled document
+ * keydown racing the focus manager. Everything below the top is
+ * `inert`, which is what `expectHiddenFromAgents` asserts and what
+ * makes `FloatingFocusManager`'s trap unambiguous.
+ *
+ * ### One accessible name, required
+ *
+ * A `role="dialog"` takes no name from its content, so one of
+ * `aria-label` / `aria-labelledby` must be present. Missing both is a
+ * dev-time warning, not a throw — the lesson `Spinner`, `Popover`, and
+ * `Modal` each learned, applied without breaking a render.
+ */
+export type OverlayPanelProps = {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    children: ReactNode;
+    className?: string;
+    /** Escape and an outside press both close. */
+    isDismissable?: boolean;
+    isVisible: boolean;
+    onClose: () => void;
+    role?: "alertdialog" | "dialog";
+};
+export declare const OverlayPanel: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, isDismissable, isVisible, onClose, role, }: OverlayPanelProps) => ReactNode;
+//# sourceMappingURL=OverlayPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanel.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,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,+HAS1B,iBAAiB,KAAG,SAsHtB,CAAA"}

package/dist/Overlay/OverlayPanel.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLatestRef, useUniqueId, } from "@charcuterie/logic";
+import { FloatingFocusManager, FloatingPortal, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { useCallback, useEffect } from "react";
+import { lockScrollBehind } from "./lockScrollBehind.js";
+import { useOverlayStack } from "./OverlayStack.js";
+import { SharedBackdrop } from "./SharedBackdrop.js";
+export const OverlayPanel = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, isDismissable = true, isVisible, onClose, role = "dialog", }) => {
+    const stack = useOverlayStack();
+    const id = useUniqueId();
+    // A stable close, so registering it does not churn the stack as the
+    // caller's `onClose` closure changes identity between renders.
+    const onCloseRef = useLatestRef(onClose);
+    const stableOnClose = useCallback(() => {
+        onCloseRef.current();
+    }, [onCloseRef]);
+    const isTop = !stack.isProvided || stack.topId === id;
+    const { context, refs } = useFloating({
+        open: isVisible,
+        onOpenChange: (isNextVisible) => {
+            if (!isNextVisible) {
+                onClose();
+            }
+        },
+    });
+    const { getFloatingProps } = useInteractions([
+        useDismiss(context, {
+            escapeKey: isDismissable && isTop,
+            // The top's outside press is the backdrop click. A per-panel
+            // `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,
+        }),
+        useRole(context, { role }),
+    ]);
+    const { register, unregister } = stack;
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+        register({ id, onClose: stableOnClose });
+        return () => {
+            unregister(id);
+        };
+    }, [id, isVisible, register, stableOnClose, unregister]);
+    // Ref-counted through `lockScrollBehind`'s module scope, so N
+    // stacked panels lock the page once and free it only when the last
+    // closes — with or without a provider.
+    useEffect(() => (isVisible ? lockScrollBehind() : undefined), [isVisible]);
+    useEffect(() => {
+        if (isVisible &&
+            ariaLabel === undefined &&
+            ariaLabelledBy === undefined) {
+            console.warn('OverlayPanel: a modal needs an accessible name. Pass `aria-label` or `aria-labelledby` — a `role="dialog"` takes none from its content and is announced as just "dialog".');
+        }
+    }, [ariaLabel, ariaLabelledBy, isVisible]);
+    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, 
+                        // Only the top traps focus; a lower panel is `inert`
+                        // anyway, and two live traps fight over one caret.
+                        disabled: !isTop, modal: true, children: _jsx("div", { ...getFloatingProps(), "aria-label": ariaLabel,
+                            "aria-labelledby": ariaLabelledBy, className: className, 
+                            // The fallback the plan calls for: `inert` on every panel
+                            // but the top, so a lower modal is unreachable across the
+                            // portal boundary even where `FloatingFocusManager`'s
+                            // outside-hiding does not reach a sibling portal.
+                            inert: isTop ? undefined : true, ref: refs.setFloating, role: role, children: children }) }) }) })] }));
+};
+//# sourceMappingURL=OverlayPanel.js.map

package/dist/Overlay/OverlayPanel.js.map

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

package/dist/Overlay/OverlayStack.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+/**
+ * The ordered stack of open **backdrop** modals, and the one shared
+ * scrim that stands behind all of them.
+ *
+ * ### Why a stack at all
+ *
+ * A modal must know two things it cannot see for itself: whether it is
+ * the **top** of the stack (only the top traps focus and answers
+ * Escape / an outside press; everything under it is `inert`), and how
+ * **deep** the stack is (the scrim shows while at least one modal is
+ * open and hides when the last closes). An `OverlayPanel` registers on
+ * open and unregisters on close, and reads `topId`/`depth` back.
+ *
+ * ### The provider is optional
+ *
+ * `useOverlayStack()` has a self-hosting default — `isProvided:
+ * false`, a no-op register, `depth: 0` — so a lone `Modal` needs no
+ * setup: it sees it is unprovided and renders its own scrim, treating
+ * itself as the top. Only *stacking* needs `OverlayStackProvider` at
+ * the app root, where a single shared scrim and real top-of-stack
+ * bookkeeping replace N self-hosted scrims fighting for the same
+ * corner.
+ */
+export type OverlayStackEntry = {
+    id: string;
+    onClose: () => void;
+};
+export type OverlayStackValue = {
+    depth: number;
+    /**
+     * `false` in the context default. An `OverlayPanel` reads this to
+     * decide whether to render its own scrim (unprovided) or defer to
+     * the provider's shared one.
+     */
+    isProvided: boolean;
+    register: (entry: OverlayStackEntry) => void;
+    /** Closes the top entry — the imperative twin of an outside press. */
+    requestCloseTop: () => void;
+    topId: null | string;
+    unregister: (id: string) => void;
+};
+export declare const useOverlayStack: () => OverlayStackValue;
+export declare const OverlayStackProvider: ({ children, }: {
+    children: ReactNode;
+}) => ReactNode;
+//# sourceMappingURL=OverlayStack.d.ts.map

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

@@ -0,0 +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"}