@stackone/malachite 2.60.0 → 2.62.0

package/COMPONENTS.md

@@ -8,7 +8,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 
 - **`Chat`** — A chat column: `Chat.Thread` scrolls and pins itself to the newest message, `Chat.Composer` keeps its own height and owns the Enter/Shift+Enter convention, and `Chat.Message`, `Chat.ToolCall` and `Chat.Thinking` render one turn each. A user turn sits right and hugs its text; an assistant turn runs full width, and `variant="card"` frames it with its state, copy and rating controls, and a token/model line. `variant="bubble"` is a third treatment, not a repaint of either: tinted bubbles whose flattened corner points at whoever spoke, so authorship reads before the words do. `Chat.Context` lists what the conversation can see — a removable chip per source, and an add affordance only when a handler is given. `Chat.Thinking` and a loading turn draw bars in the shape of the answer rather than a spinner. The row under a composer is `ComposerChip`, `ContextMeter` and `ModelPicker` — PillButton tabs, so it reads as attached to the field; `ModelPicker` opens a portalled menu with a submenu per model. The transcript is a live `log` region, so a streamed reply is announced, and it shows a centred empty state until the first turn. _Key props:_ `Chat`: `children`, `className`. `Thread`: `aria-label`, `emptyTitle`, `emptyDescription`, `emptyIcon`. `Message`: `role`, `variant` (`plain` | `card`), `content`, `children`, `name`, `avatarSrc`, `status` (`streaming` | `completed` | `error`), `loading`, `onCopy`, `onFeedback`, `usage`. `ToolCall`: `name`, `status` (`running` | `completed` | `error`), `callId`, `input`, `output`, `defaultExpanded`. `Thinking`: `label`. `Composer`: `value`, `onChange`, `onSend`, `onStop`, `busy`, `disabled`, `placeholder`, `maxLength`, `rows`, `children`. `ComposerChip`: `label`, `icon`, `trailingIcon`, `onClick`, `disabled`. `ContextMeter`: `used`, `limit`, `cached`, `label`. `ModelPicker`: `models`, `value`, `optionValue`, `onChange`, `openUp`, `disabled`. `Context`: `label`, `items` (`{id, label, onRemove?}`), `onAdd`, `className`.
 - **`Surface`** — Rounded, bordered card container with the standard elevation shadow. Use `overflow="clip"` to keep the rounded clipping while letting a `position: sticky` descendant still pin (`hidden` would trap it); `visible` disables clipping. _Key props:_ `children`, `padding`, `overflow`, `className`, `style`.
-- **`SurfaceRow`** — A full-bleed row inside a Surface (used as `Surface.Row`). Owns hover highlight, colour transition and an optional bottom divider. Pass `onClick`/`href` to make the whole row clickable (renders as a real button/anchor, so keyboard nav works). For a selectable row use `role="radio"` + `selected` and put a presentational `<Radio>` inside as the indicator; `selected` then paints the same treatment `Table` gives `selectedRowKey`. Under `role="checkbox"` it only announces — a multi-select row carries its own checkbox, and a highlight marking one of many says nothing when most rows are checked. `selection` overrides that either way (`highlight` / `announce`). Use `trailing` for a control that must stay interactive — it renders outside the row button, which a nested control could not be. `tone="muted"` tints a row whose subject is inactive, which `disabled` does not: a muted row stays clickable. _Key props:_ `divider`, `disabled`, `tone` (`default` | `muted`), `onClick`, `href`, `target`, `rel`, `selected`, `selection` (`highlight` | `announce`), `trailing`, `role`, `className`, `style`.
+- **`SurfaceRow`** — A full-bleed row inside a Surface (used as `Surface.Row`). Owns hover highlight, colour transition and an optional bottom divider. Pass `onClick`/`href` to make the whole row clickable (renders as a real button/anchor, so keyboard nav works). For a selectable row use `role="radio"` + `selected` and put a presentational `<Radio>` inside as the indicator; `selected` then paints the same treatment `Table` gives `selectedRowKey`. Under `role="checkbox"` it only announces — a multi-select row carries its own checkbox, and a highlight marking one of many says nothing when most rows are checked. `selection` overrides that either way (`highlight` / `announce`). `selected="mixed"` marks a partly selected checkbox row (`aria-checked="mixed"`); it never paints or marks a row current, and counts as not selected under any other role. Use `trailing` for a control that must stay interactive — it renders outside the row button, which a nested control could not be. `revealTrailing` shows that control only on hover, keyboard focus or while a menu it opened is open, keeping it in the tab order and always showing it on a touch screen. `tone="muted"` tints a row whose subject is inactive, which `disabled` does not: a muted row stays clickable. _Key props:_ `divider`, `disabled`, `tone` (`default` | `muted`), `onClick`, `href`, `target`, `rel`, `selected` (`boolean` | `"mixed"`), `selection` (`highlight` | `announce`), `trailing`, `revealTrailing`, `role`, `className`, `style`.
 - **`SurfaceExpandableRow`** — A row that opens to reveal a body (used as `Surface.ExpandableRow`), for a line that carries its own controls. Not `Accordion`, which puts its header inside the toggle button, so a header holding a dropdown or a second button would be invalid: here the row surface takes the click and a cell opts out by wrapping its controls in `ExpandableRow.Controls`, while the arrow stays a real button so the keyboard reaches it. That opt-out is explicit rather than sniffing the event target for an interactive ancestor, because a control rendering into a shadow root retargets the event to its host. `sticky` pins the row while its body scrolls, offset by `stickyTopOffset` for whatever is already pinned above it; it only pins while open, since a closed row has nothing to scroll past. _Key props:_ `header`, `children`, `expanded`, `onToggle`, `sticky`, `stickyTopOffset`, `divider`, `tone`, `aria-label`, `className`, `style`.
 - **`DisclosureArrow`** — The expand/collapse triangle disclosure UI shares (`Accordion`, `Surface.ExpandableRow`). Owns its colour states so they never drift between usages: `text-primary` when expanded, `text-placeholder` otherwise, and dark on hover inside a `group` ancestor — put `group` on the clickable header or row so that hover state activates. _Key props:_ `expanded`, `size`, `className`.
 - **`Card`** — Generic content card.
@@ -26,8 +26,8 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`OverflowRow`** — Horizontal row that collapses items that do not fit into an overflow affordance.
 - **`ActionBar`** — A row of actions that collapses into a single `ActionMenu` once its container drops below `collapseBelow`. Measures the nearest genuinely-wider ancestor rather than itself, since the row shrinks to its own content. `dividerBefore` renders a vertical rule in the row and a divider in the collapsed menu, so both forms group the actions the same way. _Key props:_ `buttons` (`label`, `onClick`, `icon`, `variant`, `size`, `radius`, `tooltip`, `disabled`, `dividerBefore`), `collapseBelow`, `menuLabel`, `className`.
 - **`Popover`** — An anchored, non-modal panel for arbitrary content — a workspace switcher, an org flyout. The panel renders in its own shadow root, so malachite components inside it are styled, and joins the top layer like the other overlays. It prefers its `placement` and flips to the opposite side when there is no room, clamping along the other axis. Click-opened panels take focus and hand it back to the trigger on close; `openOn="hover"` also opens on focus and stays open while the pointer or focus is in the panel. A nested Popover counts as inside its parent for outside-press and hover dismissal, and Escape closes the topmost only. A click panel also closes when focus moves somewhere outside it and its trigger, and on close it hands focus back to the trigger only if focus would otherwise fall to the page. _Key props:_ `trigger`, `children`, `open`, `defaultOpen`, `onOpenChange`, `placement` (`bottom-start` | `bottom-end` | `top-start` | `top-center` | `right-start` | `right-end` | `left-start`), `openOn` (`click` | `hover`), `width` (`content` | `trigger`), `padding` (`none` | `small` | `medium`), `anchorRef` (position against another element, e.g. the section a trigger row sits in), `offset` (`small` 8px | `medium` 12px | `large` 14px), `elevation` (`default` | `raised`), `initialFocusRef` (what takes focus on open, in place of the first focusable), `role` (`dialog` | `menu` | `listbox`; `menu` brings no roving focus of its own), `aria-label` or `aria-labelledby` (one is required), `className`. The panel is capped to the viewport width, and only overlays opened from inside it (menus, dropdowns, modals) count as inside for outside-press dismissal. A side placement stays level with its anchor and scrolls within the room below, sliding up only when under 160px is left. Parts for the panel body: `Popover.Header` (`title`, `action`), `Popover.Action` (`icon`, `aria-label`, `onClick`, `href` (a link that opens in a new tab on Cmd/Ctrl-click or a middle click; a plain click runs `onClick` when one is given), `disabled`, `tooltip`), `Popover.List` (a scrolling list), `Popover.Section` (a bordered section) and `Popover.Empty` (an empty-state line).
-- **`Modal`** — Centred dialog over a scrim, with header slots (icon/title/subtitle/extra), a scrolling body and a pinned footer. Locks background scroll and dismisses on ESC, the close button, or a scrim click unless `closeOnOverlayClick` is off; `busy` suppresses the two pointer routes while a request is in flight and sets `aria-busy`, so a stray click cannot tear the dialog down mid-write — but never ESC, which is the only guaranteed keyboard exit from a focus trap and so always reaches `onClose`. ESC, the Tab focus trap and `aria-modal` all apply to the topmost overlay only, so these may be stacked — a dialog opened from a panel keeps Tab to itself and the panel stops claiming to be modal. The Tab trap follows focus into a malachite popup portaled out of the dialog’s own tree — a `MultiSelect` listbox or a `Popover` opened from the body — and traps Tab within that popup while it holds focus, so Tab walks and wraps that popup’s own stops rather than being yanked back to the dialog’s first control or escaping the dialog altogether. A `Dropdown` list or an `ActionMenu` is dismissed by Tab rather than trapping it: it closes and focus returns to its trigger, so Tab carries on from there. A consumer’s own portaled popup is not known to the trap and Tab will pull focus out of it. Set `role="alertdialog"` for a consequential choice, which asks assistive tech to announce the body and not just the name, and point `aria-describedby` at whichever element carries it. Width comes from the `size` union (`small` 420px | `medium` 612px | `large` 760px) rather than a raw pixel prop. `titleAdornment` sits immediately after the title behind a hairline divider, for naming the thing being acted on — distinct from `headerExtra`, which pins to the far right. `tray` paints a tinted plate around the card and hangs a `caption` beneath it; the plate is the dialog element itself, so that caption stays inside the `aria-modal` subtree rather than being stranded outside it by the visual nesting, and it is added to `aria-describedby` automatically because it says what the dialog is asking. It takes a tone (`neutral` | `warning` | `error` | `success`) rather than a colour, so no consumer can paint it off-palette — and the tone sets the plate and its caption colour together, so the two cannot disagree. The caption is a `{ label?, message }` pair rather than a node, because its row height, type scale and colour belong to the plate. `size` names the card, and the plate’s 4px ring is added on top. Like `SidePanel` it sits in a z-index band from 1000 — one step per stacked overlay, so what paints on top is what holds the keyboard — and stays out of the browser top layer, so a host app’s own dialogs can still cover it. For a confirmation use `ConfirmationDialog`, which is a preset over this. _Key props:_ `open`, `onClose`, `title`, `subtitle`, `icon`, `headerExtra`, `titleAdornment`, `tray`, `headerDivider`, `footer`, `size`, `showCloseButton`, `closeOnOverlayClick`, `bodyPadding`, `busy`, `role` (`dialog` | `alertdialog`), `aria-label`, `aria-labelledby`, `aria-describedby`.
-- **`SidePanel`** — Right-hand slide-in overlay panel (drawer) with header slots (back/icon/title/subtitle/extra), scrollable body and optional footer. Locks background scroll and dismisses on ESC, an overlay click or close. ESC and the Tab focus trap apply to the topmost overlay only, so a `Modal` may be stacked over it. The Tab trap follows focus into a malachite popup portaled out of the panel’s own tree — a `MultiSelect` listbox or a `Popover` opened from the body — and traps Tab within that popup while it holds focus, so Tab walks and wraps that popup’s own stops rather than being yanked back to the panel’s first control or escaping the panel altogether. A `Dropdown` list or an `ActionMenu` is dismissed by Tab rather than trapping it: it closes and focus returns to its trigger, so Tab carries on from there. A consumer’s own portaled popup is not known to the trap and Tab will pull focus out of it. `callouts` stacks full-bleed `Alert` bands at the top of the body, above `children` and unaffected by `bodyPadding` — the same band `ConfirmationDialog` gives its `callout` — and `renderLink` routes their root-relative markdown links through the app’s router.
+- **`Modal`** — Centred dialog over a scrim, with header slots (icon/title/subtitle/extra), a scrolling body and a pinned footer. Locks background scroll and dismisses on ESC, the close button, or a scrim click unless `closeOnOverlayClick` is off; `busy` suppresses the two pointer routes while a request is in flight and sets `aria-busy`, so a stray click cannot tear the dialog down mid-write — but never ESC, which is the only guaranteed keyboard exit from a focus trap and so always reaches `onClose`. ESC, the Tab focus trap and `aria-modal` all apply to the topmost overlay only, so these may be stacked — a dialog opened from a panel keeps Tab to itself and the panel stops claiming to be modal. The Tab trap follows focus into a malachite popup portaled out of the dialog’s own tree — a `MultiSelect` listbox or a `Popover` opened from the body — and traps Tab within that popup while it holds focus, so Tab walks and wraps that popup’s own stops rather than being yanked back to the dialog’s first control or escaping the dialog altogether. A `Dropdown` list or an `ActionMenu` is dismissed by Tab rather than trapping it: it closes and focus returns to its trigger, so Tab carries on from there. A consumer’s own portaled popup is not known to the trap and Tab will pull focus out of it. Set `role="alertdialog"` for a consequential choice, which asks assistive tech to announce the body and not just the name, and point `aria-describedby` at whichever element carries it. Width comes from the `size` union (`small` 420px | `medium` 612px | `large` 760px) rather than a raw pixel prop. `titleAdornment` sits immediately after the title behind a hairline divider, for naming the thing being acted on — distinct from `headerExtra`, which pins to the far right. `tray` paints a tinted plate around the card and hangs a `caption` beneath it; the plate is the dialog element itself, so that caption stays inside the `aria-modal` subtree rather than being stranded outside it by the visual nesting, and it is added to `aria-describedby` automatically because it says what the dialog is asking. It takes a tone (`neutral` | `warning` | `error` | `success`) rather than a colour, so no consumer can paint it off-palette — and the tone sets the plate and its caption colour together, so the two cannot disagree. The caption is a `{ label?, message }` pair rather than a node, because its row height, type scale and colour belong to the plate. `size` names the card, and the plate’s 4px ring is added on top. Like `SidePanel` it sits in a z-index band from 1000 — one step per stacked overlay, so what paints on top is what holds the keyboard — and stays out of the browser top layer, so a host app’s own dialogs can still cover it. `callouts` stacks full-bleed `Alert` bands at the top of the body, as on `SidePanel`; they ignore `bodyPadding` and lead `aria-describedby`, ahead of the consumer’s own description and the tray caption. For a confirmation use `ConfirmationDialog`, which is a preset over this. _Key props:_ `open`, `onClose`, `title`, `subtitle`, `icon`, `headerExtra`, `titleAdornment`, `tray`, `callouts`, `renderLink`, `headerDivider`, `footer`, `size`, `showCloseButton`, `closeOnOverlayClick`, `bodyPadding`, `busy`, `role` (`dialog` | `alertdialog`), `aria-label`, `aria-labelledby`, `aria-describedby`.
+- **`SidePanel`** — Right-hand slide-in overlay panel (drawer) with header slots (back/icon/title/subtitle/extra), scrollable body and optional footer. Locks background scroll and dismisses on ESC, an overlay click or close. ESC and the Tab focus trap apply to the topmost overlay only, so a `Modal` may be stacked over it. The Tab trap follows focus into a malachite popup portaled out of the panel’s own tree — a `MultiSelect` listbox or a `Popover` opened from the body — and traps Tab within that popup while it holds focus, so Tab walks and wraps that popup’s own stops rather than being yanked back to the panel’s first control or escaping the panel altogether. A `Dropdown` list or an `ActionMenu` is dismissed by Tab rather than trapping it: it closes and focus returns to its trigger, so Tab carries on from there. A consumer’s own portaled popup is not known to the trap and Tab will pull focus out of it. `callouts` stacks full-bleed `Alert` bands at the top of the body, above `children` and unaffected by `bodyPadding` — the same band `ConfirmationDialog` gives its `callout` — and `renderLink` routes their root-relative markdown links through the app’s router. The callouts are announced as the panel’s description, ahead of `description`.
 - **`useHasOpenOverlay`** — Hook reporting whether any modal-type overlay - `SidePanel` or `Modal` - is open anywhere in the app. For host chrome that has to get out of an overlay’s way, a floating support widget being the case it was added for: overlays render through a portal, so a host has no DOM signal of its own to read, and reading the library’s internal markers would couple it to something it does not own. Dropdowns and tooltips are deliberately not counted - they do not trap focus, and chrome does not need to move for them. _Key props:_ No arguments. Returns a boolean.
 - **`SidePanelNavFooter`** — Keyboard-hint footer for SidePanel: up/down keycaps to step between records and an esc-to-close hint, with an optional right-aligned actions slot.
 

package/dist/components/Modal.js

@@ -1,141 +1,148 @@
-import { jsx as r, jsxs as a, Fragment as D } from "react/jsx-runtime";
-import { useId as Z, useState as f, useRef as i, useEffect as j, useCallback as P } from "react";
-import { createPortal as J } from "react-dom";
-import { ShadowRootWrapper as Q } from "../ShadowRootWrapper.js";
-import ee from "./CustomIcons/DismissIcon.js";
-import { getDeepActiveElement as re } from "./activeElement.js";
-import { GLASS_SURFACE_STYLE as ae } from "./glassSurface.js";
-import { MODAL_TRAY_BACKGROUND as le, MODAL_TRAY_CAPTION_COLOR as ie } from "./modalTray.js";
-import { useOverlayBehaviour as te, OVERLAY_ICON_BUTTON_CLASSES as ne } from "./overlayBehaviour.js";
-import { OVERLAY_ELEVATED_ATTR as oe, overlayIdentity as V } from "./portalOverlay.js";
-const Y = {
+import { jsx as r, jsxs as l, Fragment as P } from "react/jsx-runtime";
+import { useId as V, useState as h, useRef as n, useEffect as Y, useCallback as B } from "react";
+import { createPortal as ae } from "react-dom";
+import { ShadowRootWrapper as le } from "../ShadowRootWrapper.js";
+import te from "./CalloutStrip.js";
+import ie from "./CustomIcons/DismissIcon.js";
+import { getDeepActiveElement as ne } from "./activeElement.js";
+import { GLASS_SURFACE_STYLE as oe } from "./glassSurface.js";
+import { MODAL_TRAY_BACKGROUND as se, MODAL_TRAY_CAPTION_COLOR as ce } from "./modalTray.js";
+import { useOverlayBehaviour as de, OVERLAY_ICON_BUTTON_CLASSES as me } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as ue, overlayIdentity as F } from "./portalOverlay.js";
+const U = {
   small: "420px",
   medium: "612px",
   large: "760px"
-}, x = 200, be = ({
-  open: s,
-  onClose: c,
-  title: d,
-  subtitle: m,
-  icon: h,
-  headerExtra: v,
-  titleAdornment: b,
+}, v = 200, Te = ({
+  open: c,
+  onClose: d,
+  title: u,
+  subtitle: p,
+  icon: b,
+  headerExtra: g,
+  titleAdornment: N,
   tray: e,
-  headerDivider: g = !1,
-  footer: N,
-  size: w = "medium",
-  showCloseButton: y = !0,
-  closeOnOverlayClick: B = !0,
-  bodyPadding: R = !0,
-  role: F = "dialog",
-  "aria-label": U,
-  "aria-labelledby": A,
-  "aria-describedby": W,
-  busy: t = !1,
-  children: T
+  headerDivider: w = !1,
+  footer: R,
+  size: A = "medium",
+  showCloseButton: W = !0,
+  closeOnOverlayClick: z = !0,
+  bodyPadding: T = !0,
+  callouts: f,
+  renderLink: G,
+  role: q = "dialog",
+  "aria-label": H,
+  "aria-labelledby": I,
+  "aria-describedby": K,
+  busy: o = !1,
+  children: _
 }) => {
-  const I = Z(), [u, _] = f(!1), [z, k] = f(!1), [G, S] = f(!1), E = i(null), n = i(null), l = i(null), O = i(t), C = i(c);
-  j(() => {
-    O.current = t, C.current = c;
-  }, [t, c]);
-  const $ = P(() => {
-    O.current || C.current();
-  }, []), L = i(null), {
-    ref: M,
-    isTopmost: q,
-    zIndex: H,
-    elevated: K
-  } = te({
-    open: s,
-    onClose: c,
-    hostRef: L
-  }), X = P(
-    (o) => {
-      E.current = o, M(o);
+  const k = V(), S = V(), m = (f == null ? void 0 : f.filter((a) => a.message.trim())) ?? [], [x, $] = h(!1), [X, E] = h(!1), [Z, O] = h(!1), C = n(null), s = n(null), t = n(null), L = n(o), M = n(d);
+  Y(() => {
+    L.current = o, M.current = d;
+  }, [o, d]);
+  const y = B(() => {
+    L.current || M.current();
+  }, []), D = n(null), {
+    ref: j,
+    isTopmost: J,
+    zIndex: Q,
+    elevated: ee
+  } = de({
+    open: c,
+    onClose: d,
+    hostRef: D
+  }), re = B(
+    (a) => {
+      C.current = a, j(a);
     },
-    [M]
+    [j]
   );
-  return j(() => {
-    var o;
-    if (s)
-      k(!0), S(!1), l.current && (clearTimeout(l.current), l.current = null), n.current = requestAnimationFrame(() => {
-        n.current = null, _(!0);
+  return Y(() => {
+    var a;
+    if (c)
+      E(!0), O(!1), t.current && (clearTimeout(t.current), t.current = null), s.current = requestAnimationFrame(() => {
+        s.current = null, $(!0);
       });
     else {
-      const p = re();
-      p && ((o = E.current) != null && o.contains(p)) && p.blur(), S(!0), _(!1), l.current = setTimeout(() => {
-        l.current = null, k(!1);
-      }, x);
+      const i = ne();
+      i && ((a = C.current) != null && a.contains(i)) && i.blur(), O(!0), $(!1), t.current = setTimeout(() => {
+        t.current = null, E(!1);
+      }, v);
     }
     return () => {
-      n.current !== null && (cancelAnimationFrame(n.current), n.current = null), l.current && (clearTimeout(l.current), l.current = null);
+      s.current !== null && (cancelAnimationFrame(s.current), s.current = null), t.current && (clearTimeout(t.current), t.current = null);
     };
-  }, [s]), z ? J(
+  }, [c]), X ? ae(
     // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise
     // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.
     /* @__PURE__ */ r(
-      Q,
+      le,
       {
-        hostRef: L,
-        hostStyle: { position: "relative", zIndex: H },
-        hostProps: K ? { ...V("modal"), [oe]: "" } : V("modal"),
-        children: /* @__PURE__ */ a(
+        hostRef: D,
+        hostStyle: { position: "relative", zIndex: Q },
+        hostProps: ee ? { ...F("modal"), [ue]: "" } : F("modal"),
+        children: /* @__PURE__ */ l(
           "div",
           {
-            className: `fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${s ? "" : "pointer-events-none"}`,
+            className: `fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${c ? "" : "pointer-events-none"}`,
             children: [
               /* @__PURE__ */ r(
                 "div",
                 {
                   "aria-hidden": "true",
-                  onClick: B ? $ : void 0,
-                  className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${u ? "opacity-100" : "opacity-0"}`
+                  onClick: z ? y : void 0,
+                  className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${x ? "opacity-100" : "opacity-0"}`
                 }
               ),
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "div",
                 {
-                  ref: X,
-                  role: F,
-                  "aria-hidden": G ? "true" : void 0,
-                  "aria-modal": q ? "true" : void 0,
-                  "aria-describedby": [W, e != null && e.caption ? I : null].filter(Boolean).join(" ") || void 0,
-                  "aria-busy": t || void 0,
+                  ref: re,
+                  role: q,
+                  "aria-hidden": Z ? "true" : void 0,
+                  "aria-modal": J ? "true" : void 0,
+                  "aria-describedby": [
+                    ...m.map((a, i) => `${S}-${i}`),
+                    K,
+                    e != null && e.caption ? k : null
+                  ].filter(Boolean).join(" ") || void 0,
+                  "aria-busy": o || void 0,
                   tabIndex: -1,
-                  "aria-label": A ? void 0 : U ?? (typeof d == "string" ? d : void 0),
-                  "aria-labelledby": A,
+                  "aria-label": I ? void 0 : H ?? (typeof u == "string" ? u : void 0),
+                  "aria-labelledby": I,
                   className: e ? "relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]" : "relative flex max-h-full w-full flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]",
                   style: {
-                    maxWidth: e ? `calc(${Y[w]} + 8px)` : Y[w],
+                    maxWidth: e ? `calc(${U[A]} + 8px)` : U[A],
                     ...e ? {
-                      backgroundColor: le[e.tone ?? "neutral"]
+                      backgroundColor: se[e.tone ?? "neutral"]
                     } : {},
                     // Inline: Tailwind scale/translate utilities silently break inside
                     // shadow roots (see CLAUDE.md Shadow DOM caveats).
-                    transform: u ? "scale(1)" : "scale(0.96)",
-                    opacity: u ? 1 : 0,
-                    transition: `transform ${x}ms ease-out, opacity ${x}ms ease-out`
+                    transform: x ? "scale(1)" : "scale(0.96)",
+                    opacity: x ? 1 : 0,
+                    transition: `transform ${v}ms ease-out, opacity ${v}ms ease-out`
                   },
                   children: [
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "div",
                       {
                         className: e ? "flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]" : "contents",
                         children: [
-                          /* @__PURE__ */ a(
+                          /* @__PURE__ */ l(
                             "div",
                             {
-                              className: `flex gap-[20px] p-[20px] ${m ? "items-start" : "items-center"} ${g ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                              className: `flex gap-[20px] p-[20px] ${p ? "items-start" : "items-center"} ${w ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
                               children: [
-                                /* @__PURE__ */ a("div", { className: "flex h-[18px] min-w-0 flex-1 items-center gap-[12px]", children: [
-                                  /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-[8px]", children: [
-                                    h ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: h }) : null,
-                                    /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col gap-[4px]", children: [
-                                      /* @__PURE__ */ r("span", { className: "truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]", children: d }),
-                                      m ? /* @__PURE__ */ r("span", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: m }) : null
+                                /* @__PURE__ */ l("div", { className: "flex h-[18px] min-w-0 flex-1 items-center gap-[12px]", children: [
+                                  /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center gap-[8px]", children: [
+                                    b ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: b }) : null,
+                                    /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-col gap-[4px]", children: [
+                                      /* @__PURE__ */ r("span", { className: "truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]", children: u }),
+                                      p ? /* @__PURE__ */ r("span", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: p }) : null
                                     ] })
                                   ] }),
-                                  b ? /* @__PURE__ */ a(D, { children: [
+                                  N ? /* @__PURE__ */ l(P, { children: [
                                     /* @__PURE__ */ r(
                                       "span",
                                       {
@@ -143,37 +150,55 @@ const Y = {
                                         className: "h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]"
                                       }
                                     ),
-                                    /* @__PURE__ */ r("span", { className: "flex min-w-0 items-center overflow-hidden", children: b })
+                                    /* @__PURE__ */ r("span", { className: "flex min-w-0 items-center overflow-hidden", children: N })
                                   ] }) : null
                                 ] }),
-                                v ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: v }) : null,
-                                y ? /* @__PURE__ */ r(
+                                g ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: g }) : null,
+                                W ? /* @__PURE__ */ r(
                                   "button",
                                   {
                                     type: "button",
                                     "aria-label": "Close",
-                                    onClick: $,
-                                    disabled: t,
-                                    className: ne,
-                                    children: /* @__PURE__ */ r(ee, { size: 10 })
+                                    onClick: y,
+                                    disabled: o,
+                                    className: me,
+                                    children: /* @__PURE__ */ r(ie, { size: 10 })
                                   }
                                 ) : null
                               ]
                             }
                           ),
-                          /* @__PURE__ */ r(
+                          /* @__PURE__ */ l(
                             "div",
                             {
-                              className: `min-h-0 flex-1 overflow-y-auto ${R ? "px-[20px]" : ""}`,
-                              children: R ? /* @__PURE__ */ r("div", { className: `pb-[20px] ${g ? "pt-[18px]" : ""}`, children: T }) : T
+                              className: `min-h-0 flex-1 overflow-y-auto ${T && m.length === 0 ? "px-[20px]" : ""}`,
+                              children: [
+                                m.map((a, i) => /* @__PURE__ */ r(
+                                  te,
+                                  {
+                                    id: `${S}-${i}`,
+                                    type: a.type,
+                                    message: a.message,
+                                    renderLink: G
+                                  },
+                                  i
+                                )),
+                                T ? /* @__PURE__ */ r(
+                                  "div",
+                                  {
+                                    className: m.length > 0 ? "px-[20px] pt-[18px] pb-[20px]" : `pb-[20px] ${w ? "pt-[18px]" : ""}`,
+                                    children: _
+                                  }
+                                ) : _
+                              ]
                             }
                           ),
-                          N ? /* @__PURE__ */ r(
+                          R ? /* @__PURE__ */ r(
                             "div",
                             {
                               className: "flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]",
-                              style: ae,
-                              children: N
+                              style: oe,
+                              children: R
                             }
                           ) : null
                         ]
@@ -182,11 +207,11 @@ const Y = {
                     e != null && e.caption ? /* @__PURE__ */ r(
                       "div",
                       {
-                        id: I,
+                        id: k,
                         className: "flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]",
-                        style: { color: ie[e.tone ?? "neutral"] },
-                        children: /* @__PURE__ */ a("span", { children: [
-                          e.caption.label ? /* @__PURE__ */ a(D, { children: [
+                        style: { color: ce[e.tone ?? "neutral"] },
+                        children: /* @__PURE__ */ l("span", { children: [
+                          e.caption.label ? /* @__PURE__ */ l(P, { children: [
                             /* @__PURE__ */ r("span", { className: "font-medium", children: e.caption.label }),
                             " "
                           ] }) : null,
@@ -206,7 +231,7 @@ const Y = {
   ) : null;
 };
 export {
-  be as Modal,
-  be as default
+  Te as Modal,
+  Te as default
 };
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { getDeepActiveElement } from './activeElement';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\nimport { MODAL_TRAY_BACKGROUND, MODAL_TRAY_CAPTION_COLOR, type ModalTrayTone } from './modalTray';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Widths keyed to the size union — a raw `width` prop would let a consumer off the scale. */\nconst SIZE_MAX_WIDTH: Record<ModalSize, string> = {\n    small: '420px',\n    medium: '612px',\n    large: '760px',\n};\n\nconst TRANSITION_MS = 200;\n\nexport interface ModalProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary line beneath the title. */\n    subtitle?: React.ReactNode;\n    /** Leading header slot, typically an icon or logo. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    titleAdornment?: React.ReactNode;\n    tray?: { tone?: ModalTrayTone; caption?: { label?: string; message: string } };\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Pinned action row below the scrolling body. */\n    footer?: React.ReactNode;\n    size?: ModalSize;\n    /** Default: true. */\n    showCloseButton?: boolean;\n    /** Default: true. Turn off for a dialog whose choice must be made deliberately. */\n    closeOnOverlayClick?: boolean;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /**\n     * `alertdialog` for a dialog interrupting the user over a consequential choice — it\n     * tells assistive tech to announce the body, not just the name.\n     */\n    role?: 'dialog' | 'alertdialog';\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** ID of the element describing what the dialog is asking. */\n    'aria-describedby'?: string;\n    /**\n     * Work is in flight: suppresses the pointer dismissal routes and announces the busy\n     * state. Never ESC — that is the only guaranteed keyboard exit from a focus trap, so it\n     * always reaches `onClose` and whether to abort is left to the caller.\n     */\n    busy?: boolean;\n    children: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    icon,\n    headerExtra,\n    titleAdornment,\n    tray,\n    headerDivider = false,\n    footer,\n    size = 'medium',\n    showCloseButton = true,\n    closeOnOverlayClick = true,\n    bodyPadding = true,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    busy = false,\n    children,\n}) => {\n    const captionId = useId();\n    const [isVisible, setIsVisible] = useState(false);\n    // Starts false even when `open` does: portals are unsupported on the server, so the\n    // dialog must reach `document.body` from the client effect below and nowhere else.\n    const [isMounted, setIsMounted] = useState(false);\n    // Distinct from `!isVisible`, which is also false on the frame the dialog opens.\n    const [isExiting, setIsExiting] = useState(false);\n    const panelRef = useRef<HTMLElement | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const busyRef = useRef(busy);\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n        busyRef.current = busy;\n        onCloseRef.current = onClose;\n    }, [busy, onClose]);\n\n    // Pointer routes only. Removing ESC too would leave a focus-trapped keyboard user no\n    // exit while a request hangs (WCAG 2.1.2), so ESC always reaches onClose.\n    const dismissByPointer = useCallback(() => {\n        if (!busyRef.current) {\n            onCloseRef.current();\n        }\n    }, []);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    // No prop of its own: it stays in the base band unless a SidePanel elevated the stack,\n    // and follows it up when one has.\n    const {\n        ref: takePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        hostRef,\n    });\n    const handlePanelRef = useCallback(\n        (node: HTMLElement | null) => {\n            panelRef.current = node;\n            takePanelRef(node);\n        },\n        [takePanelRef],\n    );\n\n    // Mounted outlives `open` by one transition, so the dialog can animate out.\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            setIsExiting(false);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            // A browser refuses `aria-hidden` on a subtree still holding focus, so the\n            // attribute waits for this point — after useOverlayBehaviour's cleanup has\n            // returned focus to the trigger — and blurs what is left if the trigger has gone.\n            const active = getDeepActiveElement();\n            if (active && panelRef.current?.contains(active)) {\n                active.blur();\n            }\n            setIsExiting(true);\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise\n        // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('modal'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('modal')\n            }\n        >\n            {/* The exit transition outlives `open`, so a closed-but-mounted dialog has to stop\n                taking clicks and leave the a11y tree — a faded opacity does neither. */}\n            <div\n                className={`fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${\n                    open ? '' : 'pointer-events-none'\n                }`}\n            >\n                <div\n                    aria-hidden=\"true\"\n                    onClick={closeOnOverlayClick ? dismissByPointer : undefined}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role={role}\n                    aria-hidden={isExiting ? 'true' : undefined}\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [ariaDescribedBy, tray?.caption ? captionId : null]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    aria-busy={busy || undefined}\n                    tabIndex={-1}\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className={\n                        tray\n                            ? 'relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                            : 'relative flex max-h-full w-full flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                    }\n                    style={{\n                        maxWidth: tray\n                            ? `calc(${SIZE_MAX_WIDTH[size]} + 8px)`\n                            : SIZE_MAX_WIDTH[size],\n                        ...(tray\n                            ? {\n                                  backgroundColor: MODAL_TRAY_BACKGROUND[tray.tone ?? 'neutral'],\n                              }\n                            : {}),\n                        // Inline: Tailwind scale/translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'scale(1)' : 'scale(0.96)',\n                        opacity: isVisible ? 1 : 0,\n                        transition: `transform ${TRANSITION_MS}ms ease-out, opacity ${TRANSITION_MS}ms ease-out`,\n                    }}\n                >\n                    <div\n                        className={\n                            tray\n                                ? 'flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]'\n                                : 'contents'\n                        }\n                    >\n                        <div\n                            className={`flex gap-[20px] p-[20px] ${\n                                subtitle ? 'items-start' : 'items-center'\n                            } ${\n                                headerDivider\n                                    ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                    : ''\n                            }`}\n                        >\n                            <div className=\"flex h-[18px] min-w-0 flex-1 items-center gap-[12px]\">\n                                <div className=\"flex min-w-0 items-center gap-[8px]\">\n                                    {icon ? (\n                                        <span className=\"flex shrink-0 items-center\">{icon}</span>\n                                    ) : null}\n                                    <div className=\"flex min-w-0 flex-col gap-[4px]\">\n                                        <span className=\"truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]\">\n                                            {title}\n                                        </span>\n                                        {subtitle ? (\n                                            <span className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                                {subtitle}\n                                            </span>\n                                        ) : null}\n                                    </div>\n                                </div>\n                                {titleAdornment ? (\n                                    <>\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]\"\n                                        />\n                                        <span className=\"flex min-w-0 items-center overflow-hidden\">\n                                            {titleAdornment}\n                                        </span>\n                                    </>\n                                ) : null}\n                            </div>\n                            {headerExtra ? (\n                                <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n                            ) : null}\n                            {showCloseButton ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Close\"\n                                    onClick={dismissByPointer}\n                                    disabled={busy}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <DismissIcon size={10} />\n                                </button>\n                            ) : null}\n                        </div>\n                        <div\n                            className={`min-h-0 flex-1 overflow-y-auto ${\n                                bodyPadding ? 'px-[20px]' : ''\n                            }`}\n                        >\n                            {bodyPadding ? (\n                                <div className={`pb-[20px] ${headerDivider ? 'pt-[18px]' : ''}`}>\n                                    {children}\n                                </div>\n                            ) : (\n                                children\n                            )}\n                        </div>\n                        {footer ? (\n                            <div\n                                className=\"flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]\"\n                                style={GLASS_SURFACE_STYLE}\n                            >\n                                {footer}\n                            </div>\n                        ) : null}\n                    </div>\n                    {tray?.caption ? (\n                        <div\n                            id={captionId}\n                            className=\"flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]\"\n                            style={{ color: MODAL_TRAY_CAPTION_COLOR[tray.tone ?? 'neutral'] }}\n                        >\n                            <span>\n                                {tray.caption.label ? (\n                                    <>\n                                        <span className=\"font-medium\">\n                                            {tray.caption.label}\n                                        </span>{' '}\n                                    </>\n                                ) : null}\n                                {tray.caption.message}\n                            </span>\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default Modal;\nexport { Modal };\n"],"names":["SIZE_MAX_WIDTH","TRANSITION_MS","Modal","open","onClose","title","subtitle","icon","headerExtra","titleAdornment","tray","headerDivider","footer","size","showCloseButton","closeOnOverlayClick","bodyPadding","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","busy","children","captionId","useId","isVisible","setIsVisible","useState","isMounted","setIsMounted","isExiting","setIsExiting","panelRef","useRef","frameRef","unmountTimerRef","busyRef","onCloseRef","useEffect","dismissByPointer","useCallback","hostRef","takePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","handlePanelRef","node","active","getDeepActiveElement","_a","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","MODAL_TRAY_BACKGROUND","Fragment","OVERLAY_ICON_BUTTON_CLASSES","DismissIcon","GLASS_SURFACE_STYLE","MODAL_TRAY_CAPTION_COLOR"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { AlertType } from './Alert';\nimport CalloutStrip from './CalloutStrip';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport type { RenderLink } from './PageLayout/types';\nimport { getDeepActiveElement } from './activeElement';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\nimport { MODAL_TRAY_BACKGROUND, MODAL_TRAY_CAPTION_COLOR, type ModalTrayTone } from './modalTray';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Widths keyed to the size union — a raw `width` prop would let a consumer off the scale. */\nconst SIZE_MAX_WIDTH: Record<ModalSize, string> = {\n    small: '420px',\n    medium: '612px',\n    large: '760px',\n};\n\nconst TRANSITION_MS = 200;\n\nexport interface ModalProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary line beneath the title. */\n    subtitle?: React.ReactNode;\n    /** Leading header slot, typically an icon or logo. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    titleAdornment?: React.ReactNode;\n    tray?: { tone?: ModalTrayTone; caption?: { label?: string; message: string } };\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Pinned action row below the scrolling body. */\n    footer?: React.ReactNode;\n    size?: ModalSize;\n    /** Default: true. */\n    showCloseButton?: boolean;\n    /** Default: true. Turn off for a dialog whose choice must be made deliberately. */\n    closeOnOverlayClick?: boolean;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by\n     *  `bodyPadding`, and announced ahead of the dialog's description. The message is markdown. */\n    callouts?: { type?: AlertType; message: string }[];\n    /** Routes root-relative links in `callouts` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    /**\n     * `alertdialog` for a dialog interrupting the user over a consequential choice — it\n     * tells assistive tech to announce the body, not just the name.\n     */\n    role?: 'dialog' | 'alertdialog';\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** ID of the element describing what the dialog is asking. */\n    'aria-describedby'?: string;\n    /**\n     * Work is in flight: suppresses the pointer dismissal routes and announces the busy\n     * state. Never ESC — that is the only guaranteed keyboard exit from a focus trap, so it\n     * always reaches `onClose` and whether to abort is left to the caller.\n     */\n    busy?: boolean;\n    children: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    icon,\n    headerExtra,\n    titleAdornment,\n    tray,\n    headerDivider = false,\n    footer,\n    size = 'medium',\n    showCloseButton = true,\n    closeOnOverlayClick = true,\n    bodyPadding = true,\n    callouts,\n    renderLink,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    busy = false,\n    children,\n}) => {\n    const captionId = useId();\n    const calloutId = useId();\n    const shownCallouts = callouts?.filter((callout) => callout.message.trim()) ?? [];\n    const [isVisible, setIsVisible] = useState(false);\n    // Starts false even when `open` does: portals are unsupported on the server, so the\n    // dialog must reach `document.body` from the client effect below and nowhere else.\n    const [isMounted, setIsMounted] = useState(false);\n    // Distinct from `!isVisible`, which is also false on the frame the dialog opens.\n    const [isExiting, setIsExiting] = useState(false);\n    const panelRef = useRef<HTMLElement | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const busyRef = useRef(busy);\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n        busyRef.current = busy;\n        onCloseRef.current = onClose;\n    }, [busy, onClose]);\n\n    // Pointer routes only. Removing ESC too would leave a focus-trapped keyboard user no\n    // exit while a request hangs (WCAG 2.1.2), so ESC always reaches onClose.\n    const dismissByPointer = useCallback(() => {\n        if (!busyRef.current) {\n            onCloseRef.current();\n        }\n    }, []);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    // No prop of its own: it stays in the base band unless a SidePanel elevated the stack,\n    // and follows it up when one has.\n    const {\n        ref: takePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        hostRef,\n    });\n    const handlePanelRef = useCallback(\n        (node: HTMLElement | null) => {\n            panelRef.current = node;\n            takePanelRef(node);\n        },\n        [takePanelRef],\n    );\n\n    // Mounted outlives `open` by one transition, so the dialog can animate out.\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            setIsExiting(false);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            // A browser refuses `aria-hidden` on a subtree still holding focus, so the\n            // attribute waits for this point — after useOverlayBehaviour's cleanup has\n            // returned focus to the trigger — and blurs what is left if the trigger has gone.\n            const active = getDeepActiveElement();\n            if (active && panelRef.current?.contains(active)) {\n                active.blur();\n            }\n            setIsExiting(true);\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise\n        // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('modal'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('modal')\n            }\n        >\n            {/* The exit transition outlives `open`, so a closed-but-mounted dialog has to stop\n                taking clicks and leave the a11y tree — a faded opacity does neither. */}\n            <div\n                className={`fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${\n                    open ? '' : 'pointer-events-none'\n                }`}\n            >\n                <div\n                    aria-hidden=\"true\"\n                    onClick={closeOnOverlayClick ? dismissByPointer : undefined}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role={role}\n                    aria-hidden={isExiting ? 'true' : undefined}\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [\n                            ...shownCallouts.map((_, index) => `${calloutId}-${index}`),\n                            ariaDescribedBy,\n                            tray?.caption ? captionId : null,\n                        ]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    aria-busy={busy || undefined}\n                    tabIndex={-1}\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className={\n                        tray\n                            ? 'relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                            : 'relative flex max-h-full w-full flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                    }\n                    style={{\n                        maxWidth: tray\n                            ? `calc(${SIZE_MAX_WIDTH[size]} + 8px)`\n                            : SIZE_MAX_WIDTH[size],\n                        ...(tray\n                            ? {\n                                  backgroundColor: MODAL_TRAY_BACKGROUND[tray.tone ?? 'neutral'],\n                              }\n                            : {}),\n                        // Inline: Tailwind scale/translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'scale(1)' : 'scale(0.96)',\n                        opacity: isVisible ? 1 : 0,\n                        transition: `transform ${TRANSITION_MS}ms ease-out, opacity ${TRANSITION_MS}ms ease-out`,\n                    }}\n                >\n                    <div\n                        className={\n                            tray\n                                ? 'flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]'\n                                : 'contents'\n                        }\n                    >\n                        <div\n                            className={`flex gap-[20px] p-[20px] ${\n                                subtitle ? 'items-start' : 'items-center'\n                            } ${\n                                headerDivider\n                                    ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                    : ''\n                            }`}\n                        >\n                            <div className=\"flex h-[18px] min-w-0 flex-1 items-center gap-[12px]\">\n                                <div className=\"flex min-w-0 items-center gap-[8px]\">\n                                    {icon ? (\n                                        <span className=\"flex shrink-0 items-center\">{icon}</span>\n                                    ) : null}\n                                    <div className=\"flex min-w-0 flex-col gap-[4px]\">\n                                        <span className=\"truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]\">\n                                            {title}\n                                        </span>\n                                        {subtitle ? (\n                                            <span className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                                {subtitle}\n                                            </span>\n                                        ) : null}\n                                    </div>\n                                </div>\n                                {titleAdornment ? (\n                                    <>\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]\"\n                                        />\n                                        <span className=\"flex min-w-0 items-center overflow-hidden\">\n                                            {titleAdornment}\n                                        </span>\n                                    </>\n                                ) : null}\n                            </div>\n                            {headerExtra ? (\n                                <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n                            ) : null}\n                            {showCloseButton ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Close\"\n                                    onClick={dismissByPointer}\n                                    disabled={busy}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <DismissIcon size={10} />\n                                </button>\n                            ) : null}\n                        </div>\n                        <div\n                            className={`min-h-0 flex-1 overflow-y-auto ${\n                                bodyPadding && shownCallouts.length === 0 ? 'px-[20px]' : ''\n                            }`}\n                        >\n                            {shownCallouts.map((callout, index) => (\n                                <CalloutStrip\n                                    key={index}\n                                    id={`${calloutId}-${index}`}\n                                    type={callout.type}\n                                    message={callout.message}\n                                    renderLink={renderLink}\n                                />\n                            ))}\n                            {bodyPadding ? (\n                                <div\n                                    className={\n                                        shownCallouts.length > 0\n                                            ? 'px-[20px] pt-[18px] pb-[20px]'\n                                            : `pb-[20px] ${headerDivider ? 'pt-[18px]' : ''}`\n                                    }\n                                >\n                                    {children}\n                                </div>\n                            ) : (\n                                children\n                            )}\n                        </div>\n                        {footer ? (\n                            <div\n                                className=\"flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]\"\n                                style={GLASS_SURFACE_STYLE}\n                            >\n                                {footer}\n                            </div>\n                        ) : null}\n                    </div>\n                    {tray?.caption ? (\n                        <div\n                            id={captionId}\n                            className=\"flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]\"\n                            style={{ color: MODAL_TRAY_CAPTION_COLOR[tray.tone ?? 'neutral'] }}\n                        >\n                            <span>\n                                {tray.caption.label ? (\n                                    <>\n                                        <span className=\"font-medium\">\n                                            {tray.caption.label}\n                                        </span>{' '}\n                                    </>\n                                ) : null}\n                                {tray.caption.message}\n                            </span>\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default Modal;\nexport { Modal };\n"],"names":["SIZE_MAX_WIDTH","TRANSITION_MS","Modal","open","onClose","title","subtitle","icon","headerExtra","titleAdornment","tray","headerDivider","footer","size","showCloseButton","closeOnOverlayClick","bodyPadding","callouts","renderLink","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","busy","children","captionId","useId","calloutId","shownCallouts","callout","isVisible","setIsVisible","useState","isMounted","setIsMounted","isExiting","setIsExiting","panelRef","useRef","frameRef","unmountTimerRef","busyRef","onCloseRef","useEffect","dismissByPointer","useCallback","hostRef","takePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","handlePanelRef","node","active","getDeepActiveElement","_a","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","_","index","MODAL_TRAY_BACKGROUND","Fragment","OVERLAY_ICON_BUTTON_CLASSES","DismissIcon","CalloutStrip","GLASS_SURFACE_STYLE","MODAL_TRAY_CAPTION_COLOR"],"mappings":"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"}