gridsmith-ui 0.29.1 → 0.30.1

package/dist/chunk-ISONVOA7.js

@@ -0,0 +1,316 @@
+"use client";
+import { triggerType } from './chunk-ULCACQSA.js';
+import { useBreakpoint } from './chunk-ZHUVLBCC.js';
+import { usePopupFocus } from './chunk-R5QXMNW7.js';
+import { Icon } from './chunk-L6HWACK7.js';
+import { Slot } from './chunk-7Q46JXSK.js';
+import { usePosition } from './chunk-WIUGPZOH.js';
+import { cn, GLASS_DROPDOWN, FOCUS_RING } from './chunk-YL5KD5RC.js';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function isDivider(entry) {
+  return "type" in entry && entry.type === "divider";
+}
+function isSubmenu(entry) {
+  return "items" in entry;
+}
+var stopsOf = (entries) => entries.reduce((acc, e, i) => {
+  if (!isDivider(e) && !isUnavailable(e)) acc.push(i);
+  return acc;
+}, []);
+function isUnavailable(entry) {
+  return !!entry.disabled || isSubmenu(entry) && stopsOf(entry.items).length === 0;
+}
+var SUBMENU_GRACE_MS = 300;
+var ITEM = "flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer transition-colors rounded-[var(--ds-radius-sm)]";
+var itemLook = (entry, open = false) => cn(
+  ITEM,
+  FOCUS_RING,
+  isUnavailable(entry) ? "opacity-disabled cursor-not-allowed" : "variant" in entry && entry.variant === "destructive" ? "text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : cn("text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]", open && "bg-[var(--ds-bg-emphasis)]")
+);
+var PANEL = cn(
+  // the items' outline has its 4 px of room at any density (Sprint 30, P3)
+  "fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]",
+  "bg-[var(--ds-bg-surface-elevated)]",
+  GLASS_DROPDOWN,
+  "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+  "rounded-[var(--ds-radius-md)] overflow-hidden"
+);
+var Divider = () => /* @__PURE__ */ jsx("div", { role: "separator", className: "my-ds-1 h-px bg-[var(--ds-border-default)]" });
+function DropdownMenu({ trigger, items, align = "end", className, container }) {
+  const [open, setOpen] = useState(false);
+  const [focusedIdx, setFocusedIdx] = useState(-1);
+  const [sub, setSub] = useState(null);
+  const [subFocusedIdx, setSubFocusedIdx] = useState(-1);
+  const triggerRef = useRef(null);
+  const panelsRef = useRef(null);
+  const menuRef = useRef(null);
+  const subRef = useRef(null);
+  const subItemRef = useRef(null);
+  const isPhone = useBreakpoint("sm");
+  const graceTimer = useRef(null);
+  const cancelGrace = () => {
+    if (graceTimer.current) {
+      clearTimeout(graceTimer.current);
+      graceTimer.current = null;
+    }
+  };
+  const afterGrace = (then) => {
+    cancelGrace();
+    graceTimer.current = setTimeout(() => {
+      graceTimer.current = null;
+      then();
+    }, SUBMENU_GRACE_MS);
+  };
+  useEffect(() => {
+    if (!open) cancelGrace();
+  }, [open]);
+  useEffect(() => cancelGrace, []);
+  const pos = usePosition(triggerRef, menuRef, open, { side: "bottom", align, offset: 4, flip: true });
+  const [subPos, setSubPos] = useState({ top: 0, left: 0 });
+  useLayoutEffect(() => {
+    if (!open || sub === null || isPhone) return;
+    const place = () => {
+      const menu = menuRef.current;
+      const entry = subItemRef.current;
+      const panel = subRef.current;
+      if (!menu || !entry || !panel) return;
+      const m = menu.getBoundingClientRect();
+      const e = entry.getBoundingClientRect();
+      const p = panel.getBoundingClientRect();
+      const first = panel.querySelector("[data-sub-index]")?.getBoundingClientRect();
+      let left = m.right + 4;
+      if (left + p.width > window.innerWidth - 8) left = Math.max(8, m.left - 4 - p.width);
+      const top = Math.max(8, Math.min(e.top - (first ? first.top - p.top : 0), window.innerHeight - p.height - 8));
+      setSubPos((cur) => cur.top === top && cur.left === left ? cur : { top, left });
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, sub, isPhone]);
+  const enabledIndices = stopsOf(items);
+  const subEntry = sub !== null && isSubmenu(items[sub]) ? items[sub] : null;
+  const subIndices = subEntry ? stopsOf(subEntry.items) : [];
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) {
+      setFocusedIdx(-1);
+      setSub(null);
+      setSubFocusedIdx(-1);
+    }
+  }
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelsRef, close: () => setOpen(false), tabExits: "any" });
+  const closeSub = () => {
+    if (sub === null) return;
+    setFocusedIdx(sub);
+    setSub(null);
+    setSubFocusedIdx(-1);
+  };
+  const openSub = (i, focusFirst) => {
+    const entry = items[i];
+    if (!isSubmenu(entry) || isUnavailable(entry)) return;
+    cancelGrace();
+    setSub(i);
+    setFocusedIdx(i);
+    setSubFocusedIdx(focusFirst ? stopsOf(entry.items)[0] ?? -1 : -1);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      if (sub !== null) {
+        closeSub();
+        return;
+      }
+      returnFocus();
+      setOpen(false);
+    };
+    const onClick = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || panelsRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onClick);
+    };
+  });
+  useEffect(() => {
+    if (!open) return;
+    if (sub !== null && subFocusedIdx >= 0) panelsRef.current?.querySelector(`[data-sub-index="${subFocusedIdx}"]`)?.focus();
+    else if (sub !== null && isPhone) panelsRef.current?.querySelector("[data-sub-back]")?.focus();
+    else if (focusedIdx >= 0) menuRef.current?.querySelector(`[data-index="${focusedIdx}"]`)?.focus();
+  }, [open, focusedIdx, sub, subFocusedIdx, isPhone]);
+  const step = (stops, at, by) => stops[((stops.indexOf(at) + by) % stops.length + stops.length) % stops.length];
+  function handleMenuKeyDown(e) {
+    const inSub = sub !== null;
+    const stops = inSub ? subIndices : enabledIndices;
+    const at = inSub ? subFocusedIdx : focusedIdx;
+    const go = (i) => {
+      if (i === void 0) return;
+      if (inSub) setSubFocusedIdx(i);
+      else setFocusedIdx(i);
+    };
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      go(at < 0 ? stops[0] : step(stops, at, 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      go(at < 0 ? stops[stops.length - 1] : step(stops, at, -1));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      go(stops[0]);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      go(stops[stops.length - 1]);
+    } else if (e.key === "ArrowRight" && !inSub && focusedIdx >= 0 && isSubmenu(items[focusedIdx])) {
+      e.preventDefault();
+      openSub(focusedIdx, true);
+    } else if (e.key === "ArrowLeft" && inSub) {
+      e.preventDefault();
+      closeSub();
+    }
+  }
+  const choose = (item) => {
+    if (item.disabled) return;
+    returnFocus();
+    item.onClick();
+    setOpen(false);
+  };
+  const subItems = (entries) => entries.map((item, i) => isDivider(item) ? /* @__PURE__ */ jsx(Divider, {}, i) : /* @__PURE__ */ jsxs("button", { type: "button", "data-sub-index": i, role: "menuitem", disabled: item.disabled, tabIndex: subFocusedIdx === i ? 0 : -1, onFocus: () => setSubFocusedIdx(i), onClick: () => choose(item), className: itemLook(item), children: [
+    item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
+    /* @__PURE__ */ jsx("span", { children: item.label })
+  ] }, i));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ...triggerType(trigger),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        ref: triggerRef,
+        onClick: () => {
+          setOpen(!open);
+          if (!open && enabledIndices.length) setFocusedIdx(enabledIndices[0]);
+        },
+        children: trigger
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs("div", { ref: panelsRef, className: "contents", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: menuRef,
+            role: "menu",
+            "data-gs": "menu",
+            "aria-label": isPhone && subEntry ? subEntry.label : void 0,
+            onKeyDown: handleMenuKeyDown,
+            className: cn(PANEL, className),
+            style: { top: pos.top, left: pos.left },
+            onClick: (e) => e.stopPropagation(),
+            children: isPhone && subEntry ? (
+              // on a phone the submenu takes the menu's place: Back first, its entry's name on it
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("button", { type: "button", "data-sub-back": "", role: "menuitem", "aria-label": `Back from ${subEntry.label}`, tabIndex: -1, onClick: closeSub, className: cn(itemLook(subEntry), "text-[var(--ds-text-secondary)] font-[var(--ds-weight-heading)]"), children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16, className: "shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { children: subEntry.label })
+                ] }),
+                /* @__PURE__ */ jsx(Divider, {}),
+                subItems(subEntry.items)
+              ] })
+            ) : items.map((item, i) => {
+              if (isDivider(item)) return /* @__PURE__ */ jsx(Divider, {}, i);
+              if (isSubmenu(item)) {
+                const isOpen = sub === i;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    ref: isOpen ? (el) => {
+                      subItemRef.current = el;
+                    } : void 0,
+                    "data-index": i,
+                    role: "menuitem",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen,
+                    disabled: isUnavailable(item),
+                    tabIndex: focusedIdx === i ? 0 : -1,
+                    onFocus: () => setFocusedIdx(i),
+                    onClick: () => openSub(i, true),
+                    onMouseEnter: (e) => {
+                      if (isPhone || e.buttons !== 0) return;
+                      if (isOpen) cancelGrace();
+                      else if (sub === null) openSub(i, false);
+                      else afterGrace(() => openSub(i, false));
+                    },
+                    className: itemLook(item, isOpen),
+                    children: [
+                      item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                      /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "shrink-0 text-[var(--ds-text-muted)]" })
+                    ]
+                  },
+                  i
+                );
+              }
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-index": i,
+                  role: "menuitem",
+                  disabled: item.disabled,
+                  tabIndex: focusedIdx === i ? 0 : -1,
+                  onFocus: () => setFocusedIdx(i),
+                  onClick: () => choose(item),
+                  onMouseEnter: () => {
+                    if (!isPhone && sub !== null) afterGrace(() => {
+                      setSub(null);
+                      setSubFocusedIdx(-1);
+                    });
+                  },
+                  className: itemLook(item),
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { children: item.label })
+                  ]
+                },
+                i
+              );
+            })
+          }
+        ),
+        !isPhone && subEntry && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: subRef,
+            role: "menu",
+            "aria-label": subEntry.label,
+            onKeyDown: handleMenuKeyDown,
+            className: PANEL,
+            style: { top: subPos.top, left: subPos.left },
+            onClick: (e) => e.stopPropagation(),
+            onMouseEnter: cancelGrace,
+            children: subItems(subEntry.items)
+          }
+        )
+      ] }),
+      container ?? document.body
+    )
+  ] });
+}
+
+export { DropdownMenu };
+//# sourceMappingURL=chunk-ISONVOA7.js.map
+//# sourceMappingURL=chunk-ISONVOA7.js.map

package/dist/chunk-ISONVOA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/DropdownMenu.tsx"],"names":[],"mappings":"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","file":"chunk-ISONVOA7.js","sourcesContent":["import { useRef, useEffect, useLayoutEffect, useState, type ReactNode, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { createPortal } from \"react-dom\";\nimport { cn, FOCUS_RING, GLASS_DROPDOWN } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { Slot } from \"../lib/slot\";\nimport { triggerType } from \"./Button\";\nimport { usePosition, type Align } from \"../lib/use-position\";\nimport { usePopupFocus } from \"../lib/focus\";\n\nexport interface DropdownMenuItem {\n  label: string;\n  icon?: IconName;\n  onClick: () => void;\n  variant?: \"default\" | \"destructive\";\n  disabled?: boolean;\n}\n\nexport interface DropdownMenuDivider {\n  type: \"divider\";\n}\n\n/**\n * An entry that opens a submenu of its own (Sprint 25.8.7's look check: a card's Move among its other actions), one\n * level deep. On a desktop it opens beside the menu: → or Enter opens it, its first item focused; ← or Escape closes it,\n * focus back on this entry; a hover opens it too. On a phone its items take the menu's place, under a Back item.\n */\nexport interface DropdownMenuSubmenu {\n  label: string;\n  icon?: IconName;\n  items: (DropdownMenuItem | DropdownMenuDivider)[];\n  disabled?: boolean;\n}\n\nexport type DropdownMenuEntry = DropdownMenuItem | DropdownMenuDivider | DropdownMenuSubmenu;\n\nfunction isDivider(entry: DropdownMenuEntry): entry is DropdownMenuDivider {\n  return \"type\" in entry && entry.type === \"divider\";\n}\nfunction isSubmenu(entry: DropdownMenuEntry): entry is DropdownMenuSubmenu {\n  return \"items\" in entry;\n}\n/** The indices of a list's items the arrows stop at: no divider, nothing unavailable. */\nconst stopsOf = (entries: DropdownMenuEntry[]): number[] => entries.reduce<number[]>((acc, e, i) => {\n  if (!isDivider(e) && !isUnavailable(e)) acc.push(i);\n  return acc;\n}, []);\n/** An entry that can't be chosen: disabled, or a submenu with nothing in it to choose, which never opens empty. */\nfunction isUnavailable(entry: DropdownMenuItem | DropdownMenuSubmenu): boolean {\n  return !!entry.disabled || (isSubmenu(entry) && stopsOf(entry.items).length === 0);\n}\n/**\n * How long a hover on another entry waits before it closes the open submenu (or opens the other's): a pointer on its way\n * to the submenu crosses the entries below its own, and reaching the submenu in that time keeps it open.\n */\nconst SUBMENU_GRACE_MS = 300;\n\nconst ITEM = \"flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer transition-colors rounded-[var(--ds-radius-sm)]\";\nconst itemLook = (entry: DropdownMenuItem | DropdownMenuSubmenu, open = false) => cn(\n  ITEM,\n  FOCUS_RING,\n  isUnavailable(entry)\n    ? \"opacity-disabled cursor-not-allowed\"\n    : \"variant\" in entry && entry.variant === \"destructive\"\n      ? \"text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]\"\n      : cn(\"text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]\", open && \"bg-[var(--ds-bg-emphasis)]\"),\n);\nconst PANEL = cn(\n  // the items' outline has its 4 px of room at any density (Sprint 30, P3)\n  \"fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]\",\n  \"bg-[var(--ds-bg-surface-elevated)]\",\n  GLASS_DROPDOWN,\n  \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n  \"rounded-[var(--ds-radius-md)] overflow-hidden\",\n);\nconst Divider = () => <div role=\"separator\" className=\"my-ds-1 h-px bg-[var(--ds-border-default)]\" />;\n\ninterface DropdownMenuProps {\n  trigger: ReactNode;\n  items: DropdownMenuEntry[];\n  align?: Align;\n  className?: string;\n  container?: Element | DocumentFragment;\n}\n\nexport function DropdownMenu({ trigger, items, align = \"end\", className, container }: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [focusedIdx, setFocusedIdx] = useState(-1);\n  // the submenu open, by its entry's index, and the focus inside it\n  const [sub, setSub] = useState<number | null>(null);\n  const [subFocusedIdx, setSubFocusedIdx] = useState(-1);\n  const triggerRef = useRef<HTMLElement>(null);\n  // both panels, the menu and its submenu, sit in one box (display: contents) that is the popup's for focus and presses\n  const panelsRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const subRef = useRef<HTMLDivElement>(null);\n  const subItemRef = useRef<HTMLElement>(null);\n  const isPhone = useBreakpoint(\"sm\");\n  // a hover elsewhere, waiting before it closes the open submenu (SUBMENU_GRACE_MS)\n  const graceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cancelGrace = () => {\n    if (graceTimer.current) { clearTimeout(graceTimer.current); graceTimer.current = null; }\n  };\n  const afterGrace = (then: () => void) => {\n    cancelGrace();\n    graceTimer.current = setTimeout(() => { graceTimer.current = null; then(); }, SUBMENU_GRACE_MS);\n  };\n  // closing the menu, or leaving the page, drops a hover's wait\n  useEffect(() => { if (!open) cancelGrace(); }, [open]);\n  useEffect(() => cancelGrace, []);\n\n  const pos = usePosition(triggerRef, menuRef, open, { side: \"bottom\", align, offset: 4, flip: true });\n  // beside the menu, 4 px from its edge, its first item level with its entry; on the other side where the screen has no\n  // room, and inside the screen (measured against the menu, not the entry: the menu's padding and edge sit between them)\n  const [subPos, setSubPos] = useState({ top: 0, left: 0 });\n  useLayoutEffect(() => {\n    if (!open || sub === null || isPhone) return;\n    const place = () => {\n      const menu = menuRef.current;\n      const entry = subItemRef.current;\n      const panel = subRef.current;\n      if (!menu || !entry || !panel) return;\n      const m = menu.getBoundingClientRect();\n      const e = entry.getBoundingClientRect();\n      const p = panel.getBoundingClientRect();\n      const first = panel.querySelector(\"[data-sub-index]\")?.getBoundingClientRect();\n      let left = m.right + 4;\n      if (left + p.width > window.innerWidth - 8) left = Math.max(8, m.left - 4 - p.width);\n      const top = Math.max(8, Math.min(e.top - (first ? first.top - p.top : 0), window.innerHeight - p.height - 8));\n      setSubPos((cur) => (cur.top === top && cur.left === left ? cur : { top, left }));\n    };\n    place();\n    window.addEventListener(\"resize\", place);\n    window.addEventListener(\"scroll\", place, true);\n    return () => {\n      window.removeEventListener(\"resize\", place);\n      window.removeEventListener(\"scroll\", place, true);\n    };\n  }, [open, sub, isPhone]);\n\n  const enabledIndices = stopsOf(items);\n  const subEntry = sub !== null && isSubmenu(items[sub]) ? (items[sub] as DropdownMenuSubmenu) : null;\n  const subIndices = subEntry ? stopsOf(subEntry.items) : [];\n\n  // Closing clears the keyboard focus index and the submenu (render-time state adjustment).\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    if (!open) { setFocusedIdx(-1); setSub(null); setSubFocusedIdx(-1); }\n  }\n\n  // Sprint 25.7: focus hands back on close, and Tab out carries on from the trigger (lib/focus usePopupFocus).\n  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelsRef, close: () => setOpen(false), tabExits: \"any\" });\n\n  /** The submenu closes, and focus goes back to the entry that opened it. */\n  const closeSub = () => {\n    if (sub === null) return;\n    setFocusedIdx(sub);\n    setSub(null);\n    setSubFocusedIdx(-1);\n  };\n  const openSub = (i: number, focusFirst: boolean) => {\n    const entry = items[i];\n    if (!isSubmenu(entry) || isUnavailable(entry)) return;\n    cancelGrace();\n    setSub(i);\n    setFocusedIdx(i);\n    setSubFocusedIdx(focusFirst ? stopsOf(entry.items)[0] ?? -1 : -1);\n  };\n\n  useEffect(() => {\n    if (!open) return;\n\n    // An Escape a control inside already handled is its own; the one this acts on is marked for overlays around it.\n    // In a submenu it closes the submenu alone.\n    const onKeyDown = (e: globalThis.KeyboardEvent) => {\n      if (e.key !== \"Escape\" || e.defaultPrevented || !isTopLayer()) return;\n      e.preventDefault();\n      if (sub !== null) { closeSub(); return; }\n      returnFocus();\n      setOpen(false);\n    };\n\n    const onClick = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (triggerRef.current?.contains(target) || panelsRef.current?.contains(target)) return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"mousedown\", onClick);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"mousedown\", onClick);\n    };\n  });\n\n  useEffect(() => {\n    if (!open) return;\n    // By the item's own index: items and dividers share one numbering, so indexing the buttons alone left every\n    // item after a divider unreachable by the arrows (the shell's user menu: Settings, divider, Log out).\n    if (sub !== null && subFocusedIdx >= 0) panelsRef.current?.querySelector<HTMLElement>(`[data-sub-index=\"${subFocusedIdx}\"]`)?.focus();\n    else if (sub !== null && isPhone) panelsRef.current?.querySelector<HTMLElement>(\"[data-sub-back]\")?.focus();\n    else if (focusedIdx >= 0) menuRef.current?.querySelector<HTMLElement>(`[data-index=\"${focusedIdx}\"]`)?.focus();\n  }, [open, focusedIdx, sub, subFocusedIdx, isPhone]);\n\n  const step = (stops: number[], at: number, by: number) => stops[((stops.indexOf(at) + by) % stops.length + stops.length) % stops.length];\n  function handleMenuKeyDown(e: ReactKeyboardEvent) {\n    const inSub = sub !== null;\n    const stops = inSub ? subIndices : enabledIndices;\n    const at = inSub ? subFocusedIdx : focusedIdx;\n    const go = (i: number | undefined) => { if (i === undefined) return; if (inSub) setSubFocusedIdx(i); else setFocusedIdx(i); };\n    if (e.key === \"ArrowDown\") { e.preventDefault(); go(at < 0 ? stops[0] : step(stops, at, 1)); }\n    else if (e.key === \"ArrowUp\") { e.preventDefault(); go(at < 0 ? stops[stops.length - 1] : step(stops, at, -1)); }\n    else if (e.key === \"Home\") { e.preventDefault(); go(stops[0]); }\n    else if (e.key === \"End\") { e.preventDefault(); go(stops[stops.length - 1]); }\n    else if (e.key === \"ArrowRight\" && !inSub && focusedIdx >= 0 && isSubmenu(items[focusedIdx])) { e.preventDefault(); openSub(focusedIdx, true); }\n    else if (e.key === \"ArrowLeft\" && inSub) { e.preventDefault(); closeSub(); }\n  }\n\n  /** A choice: focus back on the trigger first, so a dialog the item opens returns there (Sprint 25.7). */\n  const choose = (item: DropdownMenuItem) => {\n    if (item.disabled) return;\n    returnFocus();\n    item.onClick();\n    setOpen(false);\n  };\n\n  const subItems = (entries: (DropdownMenuItem | DropdownMenuDivider)[]) => entries.map((item, i) => (isDivider(item) ? <Divider key={i} /> : (\n    <button type=\"button\" key={i} data-sub-index={i} role=\"menuitem\" disabled={item.disabled} tabIndex={subFocusedIdx === i ? 0 : -1} onFocus={() => setSubFocusedIdx(i)} onClick={() => choose(item)} className={itemLook(item)}>\n      {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n      <span>{item.label}</span>\n    </button>\n  )));\n\n  return (\n    <>\n      <Slot\n        {...triggerType(trigger)}\n        // the APG's menu button: the trigger says it opens a menu, and whether it is open\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        ref={triggerRef}\n        onClick={() => {\n          setOpen(!open);\n          if (!open && enabledIndices.length) setFocusedIdx(enabledIndices[0]);\n        }}\n      >\n        {trigger}\n      </Slot>\n      {open && createPortal(\n        <div ref={panelsRef} className=\"contents\">\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            data-gs=\"menu\"\n            aria-label={isPhone && subEntry ? subEntry.label : undefined}\n            onKeyDown={handleMenuKeyDown}\n            className={cn(PANEL, className)}\n            style={{ top: pos.top, left: pos.left }}\n            // A choice is the menu's own: the click must not also reach a clickable row or card the menu sits in\n            // (React carries events from a portal to its React parents).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {isPhone && subEntry ? (\n              // on a phone the submenu takes the menu's place: Back first, its entry's name on it\n              <>\n                <button type=\"button\" data-sub-back=\"\" role=\"menuitem\" aria-label={`Back from ${subEntry.label}`} tabIndex={-1} onClick={closeSub} className={cn(itemLook(subEntry), \"text-[var(--ds-text-secondary)] font-[var(--ds-weight-heading)]\")}>\n                  <Icon name=\"chevron-left\" size={16} className=\"shrink-0\" />\n                  <span>{subEntry.label}</span>\n                </button>\n                <Divider />\n                {subItems(subEntry.items)}\n              </>\n            ) : items.map((item, i) => {\n              if (isDivider(item)) return <Divider key={i} />;\n              if (isSubmenu(item)) {\n                const isOpen = sub === i;\n                return (\n                  <button type=\"button\"\n                    key={i}\n                    ref={isOpen ? (el) => { subItemRef.current = el; } : undefined}\n                    data-index={i}\n                    role=\"menuitem\"\n                    aria-haspopup=\"menu\"\n                    aria-expanded={isOpen}\n                    disabled={isUnavailable(item)}\n                    tabIndex={focusedIdx === i ? 0 : -1}\n                    // the arrows go on from wherever focus is, however it got there (a click, a screen reader's command)\n                    onFocus={() => setFocusedIdx(i)}\n                    // Enter (its click) or a press goes into the submenu, its first item focused, whether a hover had\n                    // opened it or not (the APG's menu: Enter opens it and focuses its first item); ←, Escape or Back\n                    // closes it\n                    onClick={() => openSub(i, true)}\n                    // a hover opens it at once where no other is open; with another open it waits, as the pointer may be\n                    // on its way to that one (SUBMENU_GRACE_MS); back on its own entry, the wait for a close is dropped\n                    onMouseEnter={(e) => {\n                      if (isPhone || e.buttons !== 0) return;\n                      if (isOpen) cancelGrace();\n                      else if (sub === null) openSub(i, false);\n                      else afterGrace(() => openSub(i, false));\n                    }}\n                    className={itemLook(item, isOpen)}\n                  >\n                    {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n                    <span className=\"flex-1\">{item.label}</span>\n                    <Icon name=\"chevron-right\" size={14} className=\"shrink-0 text-[var(--ds-text-muted)]\" />\n                  </button>\n                );\n              }\n              return (\n                <button type=\"button\"\n                  key={i}\n                  data-index={i}\n                  role=\"menuitem\"\n                  disabled={item.disabled}\n                  tabIndex={focusedIdx === i ? 0 : -1}\n                  onFocus={() => setFocusedIdx(i)}\n                  onClick={() => choose(item)}\n                  // a hover on another entry closes an open submenu, as moving on from it does, after a moment: the\n                  // pointer may only be crossing it on its way to the submenu (SUBMENU_GRACE_MS)\n                  onMouseEnter={() => { if (!isPhone && sub !== null) afterGrace(() => { setSub(null); setSubFocusedIdx(-1); }); }}\n                  className={itemLook(item)}\n                >\n                  {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n                  <span>{item.label}</span>\n                </button>\n              );\n            })}\n          </div>\n          {!isPhone && subEntry && (\n            <div\n              ref={subRef}\n              role=\"menu\"\n              aria-label={subEntry.label}\n              onKeyDown={handleMenuKeyDown}\n              className={PANEL}\n              style={{ top: subPos.top, left: subPos.left }}\n              onClick={(e) => e.stopPropagation()}\n              // the pointer has reached the submenu: a hover it crossed on the way closes nothing\n              onMouseEnter={cancelGrace}\n            >\n              {subItems(subEntry.items)}\n            </div>\n          )}\n        </div>,\n        container ?? document.body\n      )}\n    </>\n  );\n}\n"]}

package/dist/{chunk-4TUJXDRU.js → chunk-KMKBOTFR.js}

@@ -1,16 +1,17 @@
 "use client";
-import { PreferencesContext, Button } from './chunk-RJEUQ7RL.js';
-import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
+import { useKeyboardScroll } from './chunk-SJZWEBHL.js';
+import { PreferencesContext } from './chunk-TYNDXMBV.js';
 import { FormChangeCtx } from './chunk-72SDAX54.js';
-import { SurfaceBoundary } from './chunk-QM4SJKWV.js';
+import { SurfaceBoundary, Button } from './chunk-ULCACQSA.js';
+import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 import { useRevealFocus } from './chunk-HTXP5BMM.js';
-import { usePopupFocus, useOverlayLayer, useReturnFocus, useFocusTrap, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-ZI3OQDET.js';
-import { useTextOverflow, AutoTooltip } from './chunk-37WOC7F7.js';
-import { Icon } from './chunk-MKFWHWBK.js';
-import { usePosition } from './chunk-HP7WUZPK.js';
-import { useLatest } from './chunk-WH2FUFAC.js';
-import { cn, FOCUS_RING, FOCUS_INSET, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, GROUP_FOCUS_RING } from './chunk-JTU7OBYJ.js';
-import { createContext, version, forwardRef, useState, useCallback, useRef, useEffect, useContext, useMemo, useId, useLayoutEffect } from 'react';
+import { usePopupFocus, useOverlayLayer, useReturnFocus, useFocusTrap, inertOutside, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-R5QXMNW7.js';
+import { useTextOverflow } from './chunk-IELIF4PJ.js';
+import { AutoTooltip } from './chunk-UDJOIVKQ.js';
+import { Icon } from './chunk-L6HWACK7.js';
+import { usePosition, useLatest } from './chunk-WIUGPZOH.js';
+import { cn, FOCUS_INSET_WHILE_STOP, FOCUS_RING, FOCUS_INSET, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, GROUP_FOCUS_RING } from './chunk-YL5KD5RC.js';
+import { createContext, version, forwardRef, useState, useCallback, useRef, useId, useEffect, useContext, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -268,6 +269,7 @@ function useOverlayMark(open) {
   const round = useRef(0);
   const [changed, setChanged] = useState(false);
   const [holds, setHolds] = useState(0);
+  const [pends, setPends] = useState(0);
   const [answers, setAnswers] = useState([]);
   const [wasOpen, setWasOpen] = useState(open);
   if (open !== wasOpen) {
@@ -325,6 +327,15 @@ function useOverlayMark(open) {
         setHolds((n) => n - 1);
       };
     },
+    pend: () => {
+      setPends((n) => n + 1);
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        setPends((n) => n - 1);
+      };
+    },
     open
   }), [open]);
   useEffect(() => {
@@ -345,7 +356,7 @@ function useOverlayMark(open) {
     setAnswers([]);
     setChanged([...forms.current.values()].some((f) => f.stamp > 0));
   }, [answers]);
-  return { marked: changed || holds > 0, mark };
+  return { marked: changed || holds > 0, pending: pends > 0, mark };
 }
 var OverlayCloseCtx = createContext(null);
 function useDirtyGuard(dirty, onClose, onDiscard) {
@@ -439,6 +450,7 @@ function useScrollbarInset() {
 }
 var insetLessScrollbar = (gutter) => `max(0px, calc(${gutter} - var(--gs-scrollbar, 0px)))`;
 var DrawerFooterCtx = createContext(null);
+var DrawerScopeCtx = createContext(null);
 var slideClasses = {
   right: {
     panel: "top-0 right-0 h-full",
@@ -466,8 +478,8 @@ function Drawer(props) {
   const shellWidth = useContext(DrawerWidthCtx) ?? void 0;
   const isPhone = useBreakpoint("sm");
   const mobileMode = mobile ?? (position === "left" && props.modal !== false ? "panel" : "sheet");
-  const { marked, mark } = useOverlayMark(open);
-  const guard = useDirtyGuard(dirty ?? marked, onClose, onDiscard);
+  const { marked, pending, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard((dirty ?? marked) || pending, onClose, onDiscard);
   const confirm = /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard });
   const [actionsMap, setActionsMap] = useState(/* @__PURE__ */ new Map());
   const registerActions = useCallback((formId, acts) => {
@@ -503,6 +515,9 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
   const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
   const isMobile = useBreakpoint("sm");
   const panelRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const scope = useContext(DrawerScopeCtx);
+  const scoped = !!scope && blocking && !sheet;
   const [mounted, setMounted] = useState(open);
   const [hidden, setHidden] = useState(!open);
   const [snapIdx, setSnapIdx] = useState(0);
@@ -538,7 +553,13 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
     return () => unlockBodyScroll();
   }, [open, blocking, container]);
   useReturnFocus(open && !nonModal, panelRef);
-  useFocusTrap(panelRef, open && blocking && (sheet || !topOffset), isTopLayer);
+  useFocusTrap(panelRef, open && blocking && (sheet || !topOffset || scoped), isTopLayer, scoped ? scope : null);
+  useEffect(() => {
+    const keep = scope?.current;
+    const own = wrapperRef.current;
+    if (!open || !mounted || !scoped || !keep || !own) return;
+    return inertOutside([keep, own], container instanceof Element ? container : document.body);
+  }, [open, mounted, scoped, scope, container]);
   useEffect(() => {
     if (!open || !mounted || nonModal) return;
     const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
@@ -573,7 +594,13 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
     const panel = panelRef.current;
     if (panel && !panel.contains(document.activeElement)) focusInitial(panel);
   }, [open, mounted, blocking]);
-  const bodyRef = useScrollbarInset();
+  const bodyInset = useScrollbarInset();
+  const [bodyEl, setBodyEl] = useState(null);
+  const bodyRef = useCallback((el) => {
+    bodyInset(el);
+    setBodyEl(el);
+  }, [bodyInset]);
+  useKeyboardScroll(bodyEl, typeof title === "string" ? title : "Content", open);
   useCloseSettle(open, panelRef, () => {
     if (keepMounted) setHidden(true);
     else setMounted(false);
@@ -627,6 +654,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: wrapperRef,
         hidden: keepMounted && hidden ? true : void 0,
         className: cn(
           `${positionClass} transition-opacity duration-[var(--ds-transition-speed)]`,
@@ -657,7 +685,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
               "data-gs": sheet ? "sheet" : "drawer",
               "data-ds-sheet": sheet ? "" : void 0,
               ...{ [OVERLAY_ROOT_ATTR]: "" },
-              "aria-modal": blocking ? "true" : void 0,
+              "aria-modal": blocking && !scoped ? "true" : void 0,
               "aria-labelledby": title ? titleId : labelledBy,
               style: sheet ? {
                 containerType: "inline-size",
@@ -731,7 +759,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                     },
                     children: [
                       !sheet && titleTruncated ? /* @__PURE__ */ jsx(AutoTooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: heading, children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: heading, children: title }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(AutoTooltip, { content: "Close", children: /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "button",
@@ -741,7 +769,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                           "aria-label": "Close",
                           children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
                         }
-                      )
+                      ) })
                     ]
                   }
                 ),
@@ -749,7 +777,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                   "div",
                   {
                     ref: bodyRef,
-                    className: "flex-1 overflow-y-auto",
+                    className: cn("flex-1 overflow-y-auto", FOCUS_INSET),
                     style: flush ? void 0 : { padding: `var(--ds-space-5) ${insetLessScrollbar(INSET)} var(--ds-space-5) ${INSET}` },
                     children: /* @__PURE__ */ jsx(SurfaceBoundary, { children })
                   }
@@ -882,6 +910,15 @@ var AppShell = forwardRef(function AppShell2({
   const isHome = currentPath != null && currentPath === homePath;
   const hasFooter = footer != null && scrollable;
   const mainRef = useRef(null);
+  const [mainEl, setMainEl] = useState(null);
+  const setMain = useCallback((el) => {
+    mainRef.current = el;
+    setMainEl(el);
+  }, []);
+  useKeyboardScroll(mainEl, "Main content");
+  const navbarRef = useRef(null);
+  const navbarSlot = navbar != null && navbar !== false ? /* @__PURE__ */ jsx("div", { ref: navbarRef, "data-ds-navbar-slot": "", className: "contents", children: navbar }) : navbar;
+  const menuNameId = useId();
   useEffect(() => {
     const main = mainRef.current;
     if (!hasFooter || !shellEl || !main || typeof ResizeObserver === "undefined") {
@@ -916,28 +953,45 @@ var AppShell = forwardRef(function AppShell2({
         // with the toolbar hidden). Sprint 25.21 S1: h-dvh alone, which an app's own height class replaces through cn();
         // the supports-[…] variant that stood beside it survived that merge and beat the app's class (the builder's
         // preview ran under its footer). Every browser that draws the themes' oklch() colours has dvh.
-        "relative h-dvh flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden",
+        // Sprint 25.8.7 item 31: clipped, not hidden. A box that hides its overflow is still a scroll container, which
+        // the browser scrolls to show a focused element past its edge: on run 73's roles page at 390 px it had moved
+        // 424 px after 15 Tab stops, and the next 50 stops sat in a blank band below <main>. Nothing can scroll a
+        // clipped box. The page scrolls in <main>, never here, and holds what it positions (below), so in a browser
+        // without overflow: clip (Safari 15) nothing of the library's runs past this box to need clipping.
+        "relative h-dvh flex flex-col bg-[var(--ds-bg-canvas)] overflow-clip",
         className
       ), children: [
         skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
-        layout === "sidebar-header" && navbar,
-        layout === "multi-column" && navbar,
+        layout === "sidebar-header" && navbarSlot,
+        layout === "multi-column" && navbarSlot,
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
           hasSidebar && !isMobile && /* @__PURE__ */ jsx("div", { className: "shrink-0 h-full", children: sidebar }),
           aside && asideSide === "left" && aside,
           /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [
-            layout === "sidebar" && navbar,
-            layout === "stacked" && navbar,
+            layout === "sidebar" && navbarSlot,
+            layout === "stacked" && navbarSlot,
             /* @__PURE__ */ jsx(
               "main",
               {
-                ref: mainRef,
+                ref: setMain,
                 id: mainId,
                 "data-shell-main": "",
                 tabIndex: -1,
                 className: cn(
-                  "flex-1 min-h-0 focus:outline-none",
-                  scrollable ? "overflow-y-auto" : "relative",
+                  // Sprint 25.8.7 item 31: <main> is the page's containing block, so what the page positions with no
+                  // positioned box of its own (a Checkbox's visually hidden input) scrolls with the page, and Tab scrolls
+                  // <main> to it. Placed against the shell instead, it stayed where the unscrolled page had put it, out of
+                  // <main>'s reach, and focus scrolled the shell's outer box to show it
+                  "relative flex-1 min-h-0 focus:outline-none",
+                  // the skip link's target draws no ring (GOV.UK's); a Tab stop while it scrolls with nothing in it to Tab
+                  // to, it draws the inset ring (Sprint 25.29 item 10)
+                  FOCUS_INSET_WHILE_STOP,
+                  // the outline's reach at the foot as scroll padding, which a control Tab reaches across the bottom edge
+                  // stops short of (Sprint 25.29 item 19; a pinned PageHeader claims the top inline). The page's last control
+                  // has its room from the page's own foot (PageContainer's bottom padding): padding here would sit under a
+                  // view that fills the page, past the gutter its sides keep (Sprint 25.16 A42)
+                  "scroll-pb-[4px]",
+                  scrollable && "overflow-y-auto",
                   layout === "multi-column" && "flex"
                 ),
                 style: { containerType: "inline-size" },
@@ -950,7 +1004,10 @@ var AppShell = forwardRef(function AppShell2({
           ] }),
           aside && asideSide === "right" && aside
         ] }),
-        showMobileDrawer && isMobile && /* @__PURE__ */ jsx(
+        showMobileDrawer && isMobile && // Under the navbar, the menu is modal over the page with the navbar in its scope: the rest inert, Tab cycling the
+        // two, Escape closing it (the Authoring Practices; Sprint 25.29 item 9). The stacked shell, with no offset, traps
+        // in the menu alone.
+        /* @__PURE__ */ jsx(DrawerScopeCtx, { value: layout !== "stacked" && navbar != null ? navbarRef : null, children: /* @__PURE__ */ jsxs(
           Drawer,
           {
             open: sidebarOpen,
@@ -961,9 +1018,13 @@ var AppShell = forwardRef(function AppShell2({
             flush: mobileMenuFlush,
             lightBackdrop: mobileMenuLightBackdrop,
             topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
-            children: mobileMenu
+            labelledBy: menuNameId,
+            children: [
+              /* @__PURE__ */ jsx("span", { id: menuNameId, hidden: true, children: "Menu" }),
+              mobileMenu
+            ]
           }
-        ),
+        ) }),
         isSmallMobile && hasMobileNav && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-[var(--ds-z-sticky)]", children: mobileNav }),
         !isSmallMobile && launcher
       ] })
@@ -1297,5 +1358,5 @@ function useElementWidth(ref) {
 }
 
 export { AppShell, Breadcrumbs, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, LAUNCHER_INSET_PRIORITY, NAVBAR_INSET_PRIORITY, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, PANEL_INSET_PRIORITY, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, besideRoom, crumbGoes, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useCornerInset, useCrumbFollow, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
-//# sourceMappingURL=chunk-4TUJXDRU.js.map
-//# sourceMappingURL=chunk-4TUJXDRU.js.map
+//# sourceMappingURL=chunk-KMKBOTFR.js.map
+//# sourceMappingURL=chunk-KMKBOTFR.js.map