@charcuterie/ui 1.1.0 → 2.0.0

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"}

package/dist/Overlay/OverlayStack.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLatestRef } from "@charcuterie/logic";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { SharedBackdrop } from "./SharedBackdrop.js";
+const DEFAULT_STACK = {
+    depth: 0,
+    isProvided: false,
+    register: () => { },
+    requestCloseTop: () => { },
+    topId: null,
+    unregister: () => { },
+};
+const OverlayStackContext = createContext(DEFAULT_STACK);
+export const useOverlayStack = () => useContext(OverlayStackContext);
+export const OverlayStackProvider = ({ children, }) => {
+    const [entries, setEntries] = useState([]);
+    // Read through a ref so `requestCloseTop` stays stable while still
+    // seeing the live top.
+    const entriesRef = useLatestRef(entries);
+    const register = useCallback((entry) => {
+        setEntries((previous) => 
+        // In place when the id is already present — an `onClose`
+        // update must not reorder the stack, or a re-render would
+        // shuffle which modal is "top". New ids append, which is what
+        // makes the last-registered one the top.
+        previous.some((one) => one.id === entry.id)
+            ? previous.map((one) => one.id === entry.id ? entry : one)
+            : [...previous, entry]);
+    }, []);
+    const unregister = useCallback((id) => {
+        setEntries((previous) => previous.filter((one) => one.id !== id));
+    }, []);
+    const requestCloseTop = useCallback(() => {
+        entriesRef.current.at(-1)?.onClose();
+    }, [entriesRef]);
+    const value = useMemo(() => ({
+        depth: entries.length,
+        isProvided: true,
+        register,
+        requestCloseTop,
+        topId: entries.at(-1)?.id ?? null,
+        unregister,
+    }), [entries, register, requestCloseTop, unregister]);
+    return (_jsxs(OverlayStackContext.Provider, { value: value, children: [_jsx(SharedBackdrop, { isVisible: entries.length > 0 }), children] }));
+};
+//# sourceMappingURL=OverlayStack.js.map

package/dist/Overlay/OverlayStack.js.map

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

package/dist/Overlay/SharedBackdrop.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+/**
+ * The scrim, and there is exactly one of it however many backdrop
+ * modals are stacked.
+ *
+ * Purely visual: `aria-hidden`, no handlers. Dismissal — a press
+ * anywhere off the top panel — is the top panel's own
+ * `useDismiss({ outsidePress })`, not a click on this node, which is
+ * what lets the whole package drop the `useKeyWithClickEvents`
+ * suppression the `<dialog>` backdrop needed. A press lands on the
+ * top panel's full-viewport centring layer (which sits above this),
+ * so this element never has to be the click target.
+ *
+ * Portalled to `document.body` on `--layer-overlay`, one step **below**
+ * the panels' `--layer-modal`, so it always paints behind every open
+ * modal and never intercepts a click meant for the dialog on top of it
+ * — a real bug a same-z-plus-DOM-order scheme has, because a
+ * later-mounted scrim then covers the panel. Stacking *between* panels
+ * still falls out of append order at the one `--layer-modal`.
+ */
+export declare const SharedBackdrop: ({ isVisible, }: {
+    isVisible: boolean;
+}) => ReactNode;
+//# sourceMappingURL=SharedBackdrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SharedBackdrop.d.ts","sourceRoot":"","sources":["../../src/Overlay/SharedBackdrop.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc,GAAI,gBAE5B;IACD,SAAS,EAAE,OAAO,CAAA;CACnB,KAAG,SAaH,CAAA"}

package/dist/Overlay/SharedBackdrop.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingPortal } from "@floating-ui/react";
+/**
+ * The scrim, and there is exactly one of it however many backdrop
+ * modals are stacked.
+ *
+ * Purely visual: `aria-hidden`, no handlers. Dismissal — a press
+ * anywhere off the top panel — is the top panel's own
+ * `useDismiss({ outsidePress })`, not a click on this node, which is
+ * what lets the whole package drop the `useKeyWithClickEvents`
+ * suppression the `<dialog>` backdrop needed. A press lands on the
+ * top panel's full-viewport centring layer (which sits above this),
+ * so this element never has to be the click target.
+ *
+ * Portalled to `document.body` on `--layer-overlay`, one step **below**
+ * the panels' `--layer-modal`, so it always paints behind every open
+ * modal and never intercepts a click meant for the dialog on top of it
+ * — a real bug a same-z-plus-DOM-order scheme has, because a
+ * later-mounted scrim then covers the panel. Stacking *between* panels
+ * still falls out of append order at the one `--layer-modal`.
+ */
+export const SharedBackdrop = ({ isVisible, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx(FloatingPortal, { children: _jsx("div", { "aria-hidden": "true", className: "fixed inset-0 z-[var(--layer-overlay)] bg-scrim" }) }));
+};
+//# sourceMappingURL=SharedBackdrop.js.map

package/dist/Overlay/SharedBackdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedBackdrop.js","sourceRoot":"","sources":["../../src/Overlay/SharedBackdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,GAGV,EAAa,EAAE;IACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,cAAc,cACb,6BACc,MAAM,EAClB,SAAS,EAAC,iDAAiD,GAC3D,GACa,CAClB,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"lockScrollBehind.d.ts","sourceRoot":"","sources":["../../src/Overlay/lockScrollBehind.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,eAAO,MAAM,gBAAgB,QAAO,CAAC,MAAM,IAAI,CAiC9C,CAAA"}

package/dist/Overlay/lockScrollBehind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lockScrollBehind.js","sourceRoot":"","sources":["../../src/Overlay/lockScrollBehind.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,IAAI,gBAAgB,GAAG,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAiB,EAAE;IACjD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAA;IAEpC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAA;QAEjD,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC3C,CAAC;IAED,SAAS,IAAI,CAAC,CAAA;IAEd,IAAI,UAAU,GAAG,KAAK,CAAA;IAEtB,OAAO,GAAG,EAAE;QACV,6DAA6D;QAC7D,6DAA6D;QAC7D,qCAAqC;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,UAAU,GAAG,IAAI,CAAA;QAEjB,SAAS,IAAI,CAAC,CAAA;QAEd,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAA;QACnD,CAAC;IACH,CAAC,CAAA;AACH,CAAC,CAAA"}

package/dist/Overlay/overlayPanelClass.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The surface an anchored overlay's panel is drawn on — the four
+ * tokens `Popover` and `Menu` wrote out byte-identically, and that
+ * `Listbox` and `Combobox` are about to write a third and fourth
+ * time.
+ *
+ * Only the *surface* lives here: the raised background, the hairline
+ * border, the corner radius, and the elevation. Everything a panel
+ * does with that surface — a popover's `max-w-xs p-3`, a menu's
+ * `min-w-48 flex flex-col`, a listbox's scroll clamp — is the panel's
+ * own and stays at the call site, composed after this with
+ * `toClassName`. Pulling the shared half out is what keeps a change
+ * to the overlay surface (a new elevation token, say) from having to
+ * be made in four places and kept in agreement by hand.
+ */
+export declare const PANEL_SURFACE_CLASS = "rounded-md border border-border-default bg-surface-overlay shadow-medium";
+//# sourceMappingURL=overlayPanelClass.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelClass.d.ts","sourceRoot":"","sources":["../../src/Overlay/overlayPanelClass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,6EAC4C,CAAA"}

package/dist/Overlay/overlayPanelClass.js

@@ -0,0 +1,17 @@
+/**
+ * The surface an anchored overlay's panel is drawn on — the four
+ * tokens `Popover` and `Menu` wrote out byte-identically, and that
+ * `Listbox` and `Combobox` are about to write a third and fourth
+ * time.
+ *
+ * Only the *surface* lives here: the raised background, the hairline
+ * border, the corner radius, and the elevation. Everything a panel
+ * does with that surface — a popover's `max-w-xs p-3`, a menu's
+ * `min-w-48 flex flex-col`, a listbox's scroll clamp — is the panel's
+ * own and stays at the call site, composed after this with
+ * `toClassName`. Pulling the shared half out is what keeps a change
+ * to the overlay surface (a new elevation token, say) from having to
+ * be made in four places and kept in agreement by hand.
+ */
+export const PANEL_SURFACE_CLASS = "rounded-md border border-border-default bg-surface-overlay shadow-medium";
+//# sourceMappingURL=overlayPanelClass.js.map

package/dist/Overlay/overlayPanelClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelClass.js","sourceRoot":"","sources":["../../src/Overlay/overlayPanelClass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAC9B,0EAA0E,CAAA"}

package/dist/Overlay/useAnchoredOverlay.d.ts

@@ -0,0 +1,97 @@
+import type { Placement } from "@floating-ui/react";
+import type { ReactElement } from "react";
+/**
+ * The floating-ui block every anchored overlay — `Popover`, `Menu`,
+ * `Listbox`, `Combobox` — wrote out for itself, consolidated once.
+ *
+ * `Popover` and `Menu` had the same twelve-line `useFloating` +
+ * `useInteractions` + `useClonedChild` preamble with two constants
+ * different (the offset and the role), and the fleet's four pickers
+ * hand-rolled a fifth, sixth, seventh and eighth `computePosition`
+ * that reimplemented `flip`/`shift` against `window.innerHeight`.
+ * This is the one implementation they all take.
+ *
+ * ### The owner's "configurable, but those are the basics"
+ *
+ * Escape and outside-press both close, **on by default**, for every
+ * anchored overlay — that is what an overlay is. A component switches
+ * one off through `dismiss` (a `Combobox`'s Escape clears the query
+ * before it closes; a menu opened from a context click wants no
+ * outside-press race with the thing that spawned it), but it opts out
+ * rather than opting in.
+ *
+ * ### `size`, for the pickers
+ *
+ * `matchTriggerWidth` and `maxHeightPx` are the two things
+ * `PortalDropdown` did with a hand-measured `TriggerRect` and a
+ * `window.innerHeight` clamp. The `size` middleware does both from the
+ * platform: the panel takes the trigger's width, and it never grows
+ * past the space actually left in the viewport.
+ *
+ * The computed width/height are written **straight onto the floating
+ * element's style** rather than lifted into React state, which is
+ * floating-ui's own documented shape and is deliberate twice over: a
+ * `setState` inside `apply` re-runs the position, which re-runs
+ * `apply`, which is a render loop; and because these properties never
+ * enter the `floatingStyles` object React manages, a component
+ * re-render (a keystroke in a combobox) does not wipe them — only an
+ * `autoUpdate` tick recomputes them.
+ *
+ * ### Portal-agnostic
+ *
+ * This returns the pieces — `clonedTrigger`, `getFloatingProps`,
+ * `setFloating`, `floatingStyles`, `context` — and renders nothing.
+ * Whether the panel goes in a `FloatingPortal`, the top layer, or in
+ * place is the component's call, which is what lets the same hook back
+ * a portalled `Listbox` and (for now) a top-layer `Popover`.
+ */
+export type AnchoredOverlayRole = "dialog" | "listbox" | "menu";
+export type UseAnchoredOverlayOptions = {
+    /**
+     * Both default **on** — Escape and outside-press are what makes an
+     * overlay an overlay. Switch one off for the honest exception (a
+     * combobox that swallows the first Escape to clear its query), never
+     * to make a plain overlay sticky. Named for the flattened
+     * floating-ui `useDismiss` options they carry.
+     */
+    isEscapeDismissable?: boolean;
+    isOutsidePressDismissable?: boolean;
+    /** Ports `PortalDropdown`'s anchor-width match, via `size`. */
+    isTriggerWidthMatched?: boolean;
+    isVisible: boolean;
+    /** Clamps the panel to `min(this, available viewport space)`. */
+    maxHeightPx?: number;
+    /** Popover 8, Menu/Listbox/Combobox 4. */
+    offsetValue?: number;
+    onDismiss: () => void;
+    placement?: Placement;
+    role: AnchoredOverlayRole;
+    /** The control the panel hangs off. **Cloned, not wrapped.** */
+    trigger: ReactElement;
+};
+export declare const useAnchoredOverlay: ({ isEscapeDismissable, isOutsidePressDismissable, isTriggerWidthMatched, isVisible, maxHeightPx, offsetValue, onDismiss, placement, role, trigger, }: UseAnchoredOverlayOptions) => {
+    clonedTrigger: ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>>;
+    context: {
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        x: number;
+        y: number;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    floatingStyles: import("react").CSSProperties;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    triggerId: string;
+};
+//# sourceMappingURL=useAnchoredOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/useAnchoredOverlay.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAYnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAEV,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,IAAI,EAAE,mBAAmB,CAAA;IACzB,gEAAgE;IAChE,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,sJAWhC,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;CA6F3B,CAAA"}