next 15.2.0-canary.28 → 15.2.0-canary.29

package/dist/esm/client/app-bootstrap.js

@@ -3,7 +3,7 @@
  * sure the following scripts are executed in the correct order:
  * - Polyfills
  * - next/script with `beforeInteractive` strategy
- */ const version = "15.2.0-canary.28";
+ */ const version = "15.2.0-canary.29";
 window.next = {
     version,
     appDir: true

package/dist/esm/client/components/errors/stitched-error.js

@@ -2,9 +2,8 @@ import React from 'react';
 import isError from '../../../lib/is-error';
 const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame';
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp("(at " + REACT_ERROR_STACK_BOTTOM_FRAME + " )|(" + REACT_ERROR_STACK_BOTTOM_FRAME + "\\@)");
-const captureOwnerStack = React.captureOwnerStack ? React.captureOwnerStack : ()=>'';
 export function getReactStitchedError(err) {
-    if (typeof React.captureOwnerStack !== 'function') {
+    if (!process.env.__NEXT_REACT_OWNER_STACK) {
         return err;
     }
     const isErrorInstance = isError(err);
@@ -28,8 +27,9 @@ export function getReactStitchedError(err) {
 }
 function appendOwnerStack(error) {
     let stack = error.stack || '';
+    // This module is only bundled in development mode so this is safe.
+    const ownerStack = React.captureOwnerStack();
     // Avoid duplicate overriding stack frames
-    const ownerStack = captureOwnerStack();
     if (ownerStack && stack.endsWith(ownerStack) === false) {
         stack += ownerStack;
         // Override stack

package/dist/esm/client/components/errors/stitched-error.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/components/errors/stitched-error.ts"],"sourcesContent":["import React from 'react'\nimport isError from '../../../lib/is-error'\n\nconst REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame'\nconst REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp(\n  `(at ${REACT_ERROR_STACK_BOTTOM_FRAME} )|(${REACT_ERROR_STACK_BOTTOM_FRAME}\\\\@)`\n)\n\nconst captureOwnerStack = React.captureOwnerStack\n  ? React.captureOwnerStack\n  : () => ''\n\nexport function getReactStitchedError<T = unknown>(err: T): Error | T {\n  if (typeof React.captureOwnerStack !== 'function') {\n    return err\n  }\n  const isErrorInstance = isError(err)\n  const originStack = isErrorInstance ? err.stack || '' : ''\n  const originMessage = isErrorInstance ? err.message : ''\n  const stackLines = originStack.split('\\n')\n  const indexOfSplit = stackLines.findIndex((line) =>\n    REACT_ERROR_STACK_BOTTOM_FRAME_REGEX.test(line)\n  )\n  const isOriginalReactError = indexOfSplit >= 0 // has the react-stack-bottom-frame\n  let newStack = isOriginalReactError\n    ? stackLines.slice(0, indexOfSplit).join('\\n')\n    : originStack\n\n  const newError = new Error(originMessage)\n  // Copy all enumerable properties, e.g. digest\n  Object.assign(newError, err)\n  newError.stack = newStack\n\n  // Avoid duplicate overriding stack frames\n  appendOwnerStack(newError)\n\n  return newError\n}\n\nfunction appendOwnerStack(error: Error) {\n  let stack = error.stack || ''\n  // Avoid duplicate overriding stack frames\n  const ownerStack = captureOwnerStack()\n  if (ownerStack && stack.endsWith(ownerStack) === false) {\n    stack += ownerStack\n    // Override stack\n    error.stack = stack\n  }\n}\n"],"names":["React","isError","REACT_ERROR_STACK_BOTTOM_FRAME","REACT_ERROR_STACK_BOTTOM_FRAME_REGEX","RegExp","captureOwnerStack","getReactStitchedError","err","isErrorInstance","originStack","stack","originMessage","message","stackLines","split","indexOfSplit","findIndex","line","test","isOriginalReactError","newStack","slice","join","newError","Error","Object","assign","appendOwnerStack","error","ownerStack","endsWith"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AACzB,OAAOC,aAAa,wBAAuB;AAE3C,MAAMC,iCAAiC;AACvC,MAAMC,uCAAuC,IAAIC,OAC/C,AAAC,SAAMF,iCAA+B,SAAMA,iCAA+B;AAG7E,MAAMG,oBAAoBL,MAAMK,iBAAiB,GAC7CL,MAAMK,iBAAiB,GACvB,IAAM;AAEV,OAAO,SAASC,sBAAmCC,GAAM;IACvD,IAAI,OAAOP,MAAMK,iBAAiB,KAAK,YAAY;QACjD,OAAOE;IACT;IACA,MAAMC,kBAAkBP,QAAQM;IAChC,MAAME,cAAcD,kBAAkBD,IAAIG,KAAK,IAAI,KAAK;IACxD,MAAMC,gBAAgBH,kBAAkBD,IAAIK,OAAO,GAAG;IACtD,MAAMC,aAAaJ,YAAYK,KAAK,CAAC;IACrC,MAAMC,eAAeF,WAAWG,SAAS,CAAC,CAACC,OACzCd,qCAAqCe,IAAI,CAACD;IAE5C,MAAME,uBAAuBJ,gBAAgB,EAAE,mCAAmC;;IAClF,IAAIK,WAAWD,uBACXN,WAAWQ,KAAK,CAAC,GAAGN,cAAcO,IAAI,CAAC,QACvCb;IAEJ,MAAMc,WAAW,qBAAwB,CAAxB,IAAIC,MAAMb,gBAAV,qBAAA;eAAA;oBAAA;IAAuB;IACxC,8CAA8C;IAC9Cc,OAAOC,MAAM,CAACH,UAAUhB;IACxBgB,SAASb,KAAK,GAAGU;IAEjB,0CAA0C;IAC1CO,iBAAiBJ;IAEjB,OAAOA;AACT;AAEA,SAASI,iBAAiBC,KAAY;IACpC,IAAIlB,QAAQkB,MAAMlB,KAAK,IAAI;IAC3B,0CAA0C;IAC1C,MAAMmB,aAAaxB;IACnB,IAAIwB,cAAcnB,MAAMoB,QAAQ,CAACD,gBAAgB,OAAO;QACtDnB,SAASmB;QACT,iBAAiB;QACjBD,MAAMlB,KAAK,GAAGA;IAChB;AACF"}
+{"version":3,"sources":["../../../../src/client/components/errors/stitched-error.ts"],"sourcesContent":["import React from 'react'\nimport isError from '../../../lib/is-error'\n\nconst REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame'\nconst REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp(\n  `(at ${REACT_ERROR_STACK_BOTTOM_FRAME} )|(${REACT_ERROR_STACK_BOTTOM_FRAME}\\\\@)`\n)\n\nexport function getReactStitchedError<T = unknown>(err: T): Error | T {\n  if (!process.env.__NEXT_REACT_OWNER_STACK) {\n    return err\n  }\n  const isErrorInstance = isError(err)\n  const originStack = isErrorInstance ? err.stack || '' : ''\n  const originMessage = isErrorInstance ? err.message : ''\n  const stackLines = originStack.split('\\n')\n  const indexOfSplit = stackLines.findIndex((line) =>\n    REACT_ERROR_STACK_BOTTOM_FRAME_REGEX.test(line)\n  )\n  const isOriginalReactError = indexOfSplit >= 0 // has the react-stack-bottom-frame\n  let newStack = isOriginalReactError\n    ? stackLines.slice(0, indexOfSplit).join('\\n')\n    : originStack\n\n  const newError = new Error(originMessage)\n  // Copy all enumerable properties, e.g. digest\n  Object.assign(newError, err)\n  newError.stack = newStack\n\n  // Avoid duplicate overriding stack frames\n  appendOwnerStack(newError)\n\n  return newError\n}\n\nfunction appendOwnerStack(error: Error) {\n  let stack = error.stack || ''\n  // This module is only bundled in development mode so this is safe.\n  const ownerStack = React.captureOwnerStack()\n  // Avoid duplicate overriding stack frames\n  if (ownerStack && stack.endsWith(ownerStack) === false) {\n    stack += ownerStack\n    // Override stack\n    error.stack = stack\n  }\n}\n"],"names":["React","isError","REACT_ERROR_STACK_BOTTOM_FRAME","REACT_ERROR_STACK_BOTTOM_FRAME_REGEX","RegExp","getReactStitchedError","err","process","env","__NEXT_REACT_OWNER_STACK","isErrorInstance","originStack","stack","originMessage","message","stackLines","split","indexOfSplit","findIndex","line","test","isOriginalReactError","newStack","slice","join","newError","Error","Object","assign","appendOwnerStack","error","ownerStack","captureOwnerStack","endsWith"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AACzB,OAAOC,aAAa,wBAAuB;AAE3C,MAAMC,iCAAiC;AACvC,MAAMC,uCAAuC,IAAIC,OAC/C,AAAC,SAAMF,iCAA+B,SAAMA,iCAA+B;AAG7E,OAAO,SAASG,sBAAmCC,GAAM;IACvD,IAAI,CAACC,QAAQC,GAAG,CAACC,wBAAwB,EAAE;QACzC,OAAOH;IACT;IACA,MAAMI,kBAAkBT,QAAQK;IAChC,MAAMK,cAAcD,kBAAkBJ,IAAIM,KAAK,IAAI,KAAK;IACxD,MAAMC,gBAAgBH,kBAAkBJ,IAAIQ,OAAO,GAAG;IACtD,MAAMC,aAAaJ,YAAYK,KAAK,CAAC;IACrC,MAAMC,eAAeF,WAAWG,SAAS,CAAC,CAACC,OACzChB,qCAAqCiB,IAAI,CAACD;IAE5C,MAAME,uBAAuBJ,gBAAgB,EAAE,mCAAmC;;IAClF,IAAIK,WAAWD,uBACXN,WAAWQ,KAAK,CAAC,GAAGN,cAAcO,IAAI,CAAC,QACvCb;IAEJ,MAAMc,WAAW,qBAAwB,CAAxB,IAAIC,MAAMb,gBAAV,qBAAA;eAAA;oBAAA;IAAuB;IACxC,8CAA8C;IAC9Cc,OAAOC,MAAM,CAACH,UAAUnB;IACxBmB,SAASb,KAAK,GAAGU;IAEjB,0CAA0C;IAC1CO,iBAAiBJ;IAEjB,OAAOA;AACT;AAEA,SAASI,iBAAiBC,KAAY;IACpC,IAAIlB,QAAQkB,MAAMlB,KAAK,IAAI;IAC3B,mEAAmE;IACnE,MAAMmB,aAAa/B,MAAMgC,iBAAiB;IAC1C,0CAA0C;IAC1C,IAAID,cAAcnB,MAAMqB,QAAQ,CAACF,gBAAgB,OAAO;QACtDnB,SAASmB;QACT,iBAAiB;QACjBD,MAAMlB,KAAK,GAAGA;IAChB;AACF"}

package/dist/esm/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.js

@@ -12,8 +12,8 @@ import { useErrorHook } from '../internal/container/runtime-error/use-error-hook
 export default function ReactDevOverlay(param) {
     let { state, globalError, children } = param;
     const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false);
-    const { readyErrors } = useErrorHook({
-        errors: state.errors,
+    const { readyErrors, totalErrorCount } = useErrorHook({
+        state,
         isAppDir: true
     });
     const devOverlay = /*#__PURE__*/ _jsxs(ShadowPortal, {
@@ -24,7 +24,7 @@ export default function ReactDevOverlay(param) {
             /*#__PURE__*/ _jsx(ComponentStyles, {}),
             /*#__PURE__*/ _jsx(DevToolsIndicator, {
                 state: state,
-                readyErrorsLength: readyErrors.length,
+                errorCount: totalErrorCount,
                 setIsErrorOverlayOpen: setIsErrorOverlayOpen
             }),
             /*#__PURE__*/ _jsx(ErrorOverlay, {

package/dist/esm/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../shared'\nimport type { GlobalErrorComponent } from '../../../error-boundary'\n\nimport { useState } from 'react'\nimport { DevOverlayErrorBoundary } from './error-boundary'\nimport { ShadowPortal } from '../internal/components/shadow-portal'\nimport { Base } from '../internal/styles/base'\nimport { ComponentStyles } from '../internal/styles/component-styles'\nimport { CssReset } from '../internal/styles/css-reset'\nimport { Colors } from '../internal/styles/colors'\nimport { ErrorOverlay } from '../internal/components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from '../internal/components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { useErrorHook } from '../internal/container/runtime-error/use-error-hook'\n\nexport default function ReactDevOverlay({\n  state,\n  globalError,\n  children,\n}: {\n  state: OverlayState\n  globalError: [GlobalErrorComponent, React.ReactNode]\n  children: React.ReactNode\n}) {\n  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false)\n  const { readyErrors } = useErrorHook({ errors: state.errors, isAppDir: true })\n\n  const devOverlay = (\n    <ShadowPortal>\n      <CssReset />\n      <Base />\n      <Colors />\n      <ComponentStyles />\n\n      <DevToolsIndicator\n        state={state}\n        readyErrorsLength={readyErrors.length}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n      />\n\n      <ErrorOverlay\n        state={state}\n        readyErrors={readyErrors}\n        isErrorOverlayOpen={isErrorOverlayOpen}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n      />\n    </ShadowPortal>\n  )\n\n  return (\n    <DevOverlayErrorBoundary\n      devOverlay={devOverlay}\n      globalError={globalError}\n      onError={setIsErrorOverlayOpen}\n    >\n      {children}\n    </DevOverlayErrorBoundary>\n  )\n}\n"],"names":["useState","DevOverlayErrorBoundary","ShadowPortal","Base","ComponentStyles","CssReset","Colors","ErrorOverlay","DevToolsIndicator","useErrorHook","ReactDevOverlay","state","globalError","children","isErrorOverlayOpen","setIsErrorOverlayOpen","readyErrors","errors","isAppDir","devOverlay","readyErrorsLength","length","onError"],"mappings":";AAGA,SAASA,QAAQ,QAAQ,QAAO;AAChC,SAASC,uBAAuB,QAAQ,mBAAkB;AAC1D,SAASC,YAAY,QAAQ,uCAAsC;AACnE,SAASC,IAAI,QAAQ,0BAAyB;AAC9C,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,YAAY,QAAQ,4DAA2D;AACxF,SAASC,iBAAiB,QAAQ,wEAAuE;AACzG,SAASC,YAAY,QAAQ,qDAAoD;AAEjF,eAAe,SAASC,gBAAgB,KAQvC;IARuC,IAAA,EACtCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EAKT,GARuC;IAStC,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGf,SAAS;IAC7D,MAAM,EAAEgB,WAAW,EAAE,GAAGP,aAAa;QAAEQ,QAAQN,MAAMM,MAAM;QAAEC,UAAU;IAAK;IAE5E,MAAMC,2BACJ,MAACjB;;0BACC,KAACG;0BACD,KAACF;0BACD,KAACG;0BACD,KAACF;0BAED,KAACI;gBACCG,OAAOA;gBACPS,mBAAmBJ,YAAYK,MAAM;gBACrCN,uBAAuBA;;0BAGzB,KAACR;gBACCI,OAAOA;gBACPK,aAAaA;gBACbF,oBAAoBA;gBACpBC,uBAAuBA;;;;IAK7B,qBACE,KAACd;QACCkB,YAAYA;QACZP,aAAaA;QACbU,SAASP;kBAERF;;AAGP"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../shared'\nimport type { GlobalErrorComponent } from '../../../error-boundary'\n\nimport { useState } from 'react'\nimport { DevOverlayErrorBoundary } from './error-boundary'\nimport { ShadowPortal } from '../internal/components/shadow-portal'\nimport { Base } from '../internal/styles/base'\nimport { ComponentStyles } from '../internal/styles/component-styles'\nimport { CssReset } from '../internal/styles/css-reset'\nimport { Colors } from '../internal/styles/colors'\nimport { ErrorOverlay } from '../internal/components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from '../internal/components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { useErrorHook } from '../internal/container/runtime-error/use-error-hook'\n\nexport default function ReactDevOverlay({\n  state,\n  globalError,\n  children,\n}: {\n  state: OverlayState\n  globalError: [GlobalErrorComponent, React.ReactNode]\n  children: React.ReactNode\n}) {\n  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false)\n  const { readyErrors, totalErrorCount } = useErrorHook({\n    state,\n    isAppDir: true,\n  })\n\n  const devOverlay = (\n    <ShadowPortal>\n      <CssReset />\n      <Base />\n      <Colors />\n      <ComponentStyles />\n\n      <DevToolsIndicator\n        state={state}\n        errorCount={totalErrorCount}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n      />\n\n      <ErrorOverlay\n        state={state}\n        readyErrors={readyErrors}\n        isErrorOverlayOpen={isErrorOverlayOpen}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n      />\n    </ShadowPortal>\n  )\n\n  return (\n    <DevOverlayErrorBoundary\n      devOverlay={devOverlay}\n      globalError={globalError}\n      onError={setIsErrorOverlayOpen}\n    >\n      {children}\n    </DevOverlayErrorBoundary>\n  )\n}\n"],"names":["useState","DevOverlayErrorBoundary","ShadowPortal","Base","ComponentStyles","CssReset","Colors","ErrorOverlay","DevToolsIndicator","useErrorHook","ReactDevOverlay","state","globalError","children","isErrorOverlayOpen","setIsErrorOverlayOpen","readyErrors","totalErrorCount","isAppDir","devOverlay","errorCount","onError"],"mappings":";AAGA,SAASA,QAAQ,QAAQ,QAAO;AAChC,SAASC,uBAAuB,QAAQ,mBAAkB;AAC1D,SAASC,YAAY,QAAQ,uCAAsC;AACnE,SAASC,IAAI,QAAQ,0BAAyB;AAC9C,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,YAAY,QAAQ,4DAA2D;AACxF,SAASC,iBAAiB,QAAQ,wEAAuE;AACzG,SAASC,YAAY,QAAQ,qDAAoD;AAEjF,eAAe,SAASC,gBAAgB,KAQvC;IARuC,IAAA,EACtCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EAKT,GARuC;IAStC,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGf,SAAS;IAC7D,MAAM,EAAEgB,WAAW,EAAEC,eAAe,EAAE,GAAGR,aAAa;QACpDE;QACAO,UAAU;IACZ;IAEA,MAAMC,2BACJ,MAACjB;;0BACC,KAACG;0BACD,KAACF;0BACD,KAACG;0BACD,KAACF;0BAED,KAACI;gBACCG,OAAOA;gBACPS,YAAYH;gBACZF,uBAAuBA;;0BAGzB,KAACR;gBACCI,OAAOA;gBACPK,aAAaA;gBACbF,oBAAoBA;gBACpBC,uBAAuBA;;;;IAK7B,qBACE,KAACd;QACCkB,YAAYA;QACZP,aAAaA;QACbS,SAASN;kBAERF;;AAGP"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { Toast } from '../../toast';
 import { NextLogo } from './internal/next-logo';
 import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay';
@@ -7,10 +7,9 @@ import { useIsDevRendering } from './internal/dev-render-indicator';
 import { useDelayedRender } from './internal/use-delayed-render';
 import { useKeyboardShortcut } from '../../../hooks/use-keyboard-shortcut';
 import { MODIFIERS } from '../../../hooks/use-keyboard-shortcut';
-// TODO: test a11y
 // TODO: add E2E tests to cover different scenarios
 export function DevToolsIndicator(param) {
-    let { state, readyErrorsLength, setIsErrorOverlayOpen } = param;
+    let { state, errorCount, setIsErrorOverlayOpen } = param;
     const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true);
     // Register `(cmd|ctrl) + .` to show/hide the error indicator.
     useKeyboardShortcut({
@@ -25,7 +24,7 @@ export function DevToolsIndicator(param) {
     });
     return isDevToolsIndicatorOpen && /*#__PURE__*/ _jsx(DevToolsPopover, {
         semver: state.versionInfo.installed,
-        issueCount: readyErrorsLength,
+        issueCount: errorCount,
         isStaticRoute: state.staticIndicator,
         hide: ()=>{
             setIsDevToolsIndicatorOpen(false);
@@ -34,46 +33,99 @@ export function DevToolsIndicator(param) {
         isTurbopack: !!process.env.TURBOPACK
     });
 }
+//////////////////////////////////////////////////////////////////////////////////////
 const ANIMATE_OUT_DURATION_MS = 200;
 const ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)';
-const DevToolsPopover = (param)=>{
-    let { issueCount, isStaticRoute, semver, isTurbopack, hide, setIsErrorOverlayOpen } = param;
-    const popoverRef = useRef(null);
-    const buttonRef = useRef(null);
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const { mounted, rendered } = useDelayedRender(isPopoverOpen, {
+const Context = /*#__PURE__*/ createContext({});
+function DevToolsPopover(param) {
+    let { issueCount, isStaticRoute, isTurbopack, hide, setIsErrorOverlayOpen } = param;
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const { mounted, rendered } = useDelayedRender(isMenuOpen, {
         // Intentionally no fade in, makes the UI feel more immediate
         enterDelay: 0,
         // Graceful fade out to confirm that the UI did not break
         exitDelay: ANIMATE_OUT_DURATION_MS
     });
-    useEffect(()=>{
-        // Close popover when clicking outside of it or its button
-        const handleClickOutside = (event)=>{
-            var _popoverRef_current, _buttonRef_current;
-            if (!(((_popoverRef_current = popoverRef.current) == null ? void 0 : _popoverRef_current.getBoundingClientRect()) ? event.clientX >= popoverRef.current.getBoundingClientRect().left && event.clientX <= popoverRef.current.getBoundingClientRect().right && event.clientY >= popoverRef.current.getBoundingClientRect().top && event.clientY <= popoverRef.current.getBoundingClientRect().bottom : false) && !(((_buttonRef_current = buttonRef.current) == null ? void 0 : _buttonRef_current.getBoundingClientRect()) ? event.clientX >= buttonRef.current.getBoundingClientRect().left && event.clientX <= buttonRef.current.getBoundingClientRect().right && event.clientY >= buttonRef.current.getBoundingClientRect().top && event.clientY <= buttonRef.current.getBoundingClientRect().bottom : false)) {
-                setIsPopoverOpen(false);
-            }
-        };
-        // Close popover when pressing escape
-        const handleKeyDown = (event)=>{
-            if (event.key === 'Escape') {
-                setIsPopoverOpen(false);
+    // Features to make the menu accessible
+    useFocusTrap(menuRef, triggerRef, isMenuOpen);
+    useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu);
+    function select(index) {
+        var _menuRef_current;
+        if (index === 'last') {
+            var _menuRef_current1;
+            const all = (_menuRef_current1 = menuRef.current) == null ? void 0 : _menuRef_current1.querySelectorAll('[role="menuitem"]');
+            if (all) {
+                const lastIndex = all.length - 1;
+                select(lastIndex);
             }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleKeyDown);
-        return ()=>{
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
-    const togglePopover = ()=>setIsPopoverOpen((prev)=>!prev);
-    const onIssuesClick = ()=>issueCount > 0 ? setIsErrorOverlayOpen(true) : null;
-    const onLogoClick = ()=>{
-        togglePopover();
-        onIssuesClick();
-    };
+            return;
+        }
+        const el = (_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.querySelector('[data-index="' + index + '"]');
+        if (el) {
+            setSelectedIndex(index);
+            el == null ? void 0 : el.focus();
+        }
+    }
+    function onMenuKeydown(e) {
+        e.preventDefault();
+        switch(e.key){
+            case 'ArrowDown':
+                const next = selectedIndex + 1;
+                select(next);
+                break;
+            case 'ArrowUp':
+                const prev = selectedIndex - 1;
+                select(prev);
+                break;
+            case 'Home':
+                select(0);
+                break;
+            case 'End':
+                select('last');
+                break;
+            default:
+                break;
+        }
+    }
+    function onTriggerKeydown(e) {
+        if (isMenuOpen) {
+            return;
+        }
+        // Open with first item focused
+        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+            setIsMenuOpen(true);
+            // Run on next tick because querying DOM after state change
+            setTimeout(()=>{
+                select(0);
+            });
+        }
+        // Open with last item focused
+        if (e.key === 'ArrowUp') {
+            setIsMenuOpen(true);
+            // Run on next tick because querying DOM after state change
+            setTimeout(()=>{
+                select('last');
+            });
+        }
+    }
+    function openErrorOverlay() {
+        if (issueCount > 0) {
+            setIsErrorOverlayOpen(true);
+        }
+    }
+    function onTriggerClick() {
+        setIsMenuOpen((prev)=>!prev);
+    }
+    function closeMenu() {
+        setIsMenuOpen(false);
+        // Avoid flashing selected state
+        setTimeout(()=>{
+            setSelectedIndex(-1);
+        }, ANIMATE_OUT_DURATION_MS);
+    }
     return /*#__PURE__*/ _jsxs(Toast, {
         "data-nextjs-toast": true,
         style: {
@@ -81,153 +133,229 @@ const DevToolsPopover = (param)=>{
             zIndex: 2147483647
         },
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                ref: buttonRef,
-                children: /*#__PURE__*/ _jsx(NextLogo, {
-                    issueCount: issueCount,
-                    onLogoClick: onLogoClick,
-                    onIssuesClick: onIssuesClick,
-                    isDevBuilding: useIsDevBuilding(),
-                    isDevRendering: useIsDevRendering(),
-                    "aria-haspopup": "true",
-                    "aria-expanded": isPopoverOpen,
-                    "aria-controls": "dev-tools-popover",
-                    "data-nextjs-dev-tools-button": true
-                }, issueCount)
-            }),
-            mounted && /*#__PURE__*/ _jsxs("div", {
-                ref: popoverRef,
-                id: "dev-tools-popover",
-                role: "dialog",
-                "aria-labelledby": "dev-tools-title",
-                "data-nextjs-dev-tools-popover": true,
+            /*#__PURE__*/ _jsx(NextLogo, {
+                ref: triggerRef,
+                "aria-haspopup": "menu",
+                "aria-expanded": isMenuOpen,
+                "aria-controls": "nextjs-dev-tools-menu",
+                "aria-label": "" + (isMenuOpen ? 'Close' : 'Open') + " Next.js Dev Tools",
+                "data-nextjs-dev-tools-button": true,
+                issueCount: issueCount,
+                onTriggerClick: onTriggerClick,
+                onKeyDown: onTriggerKeydown,
+                openErrorOverlay: openErrorOverlay,
+                isDevBuilding: useIsDevBuilding(),
+                isDevRendering: useIsDevRendering()
+            }, issueCount),
+            mounted && /*#__PURE__*/ _jsx("div", {
+                ref: menuRef,
+                id: "nextjs-dev-tools-menu",
+                role: "menu",
+                dir: "ltr",
+                "aria-orientation": "vertical",
+                "aria-label": "Next.js Dev Tools Items",
+                tabIndex: -1,
+                className: "menu",
+                onKeyDown: onMenuKeydown,
                 "data-rendered": rendered,
                 style: {
                     '--animate-out-duration-ms': "" + ANIMATE_OUT_DURATION_MS + "ms",
                     '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION
                 },
-                tabIndex: -1,
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        "data-nextjs-dev-tools-content": true,
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            "data-nextjs-dev-tools-container": true,
+                children: /*#__PURE__*/ _jsxs(Context.Provider, {
+                    value: {
+                        closeMenu,
+                        selectedIndex,
+                        setSelectedIndex
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "inner",
                             children: [
-                                /*#__PURE__*/ _jsx("h2", {
-                                    id: "dev-tools-title",
-                                    style: {
-                                        display: 'none'
-                                    },
-                                    children: "Dev Tools Options"
-                                }),
-                                /*#__PURE__*/ _jsx(IndicatorRow, {
-                                    label: "Hide Dev Tools",
-                                    value: /*#__PURE__*/ _jsx(DevToolsShortcutGroup, {}),
-                                    onClick: hide
-                                }),
-                                /*#__PURE__*/ _jsx(IndicatorRow, {
-                                    "data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic',
-                                    label: "Route",
-                                    value: isStaticRoute ? 'Static' : 'Dynamic'
-                                }),
-                                /*#__PURE__*/ _jsx(IndicatorRow, {
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    index: 0,
                                     label: "Issues",
                                     value: /*#__PURE__*/ _jsx(IssueCount, {
-                                        count: issueCount
+                                        children: issueCount
                                     }),
-                                    onClick: onIssuesClick
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        "data-nextjs-dev-tools-footer": true,
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            "data-nextjs-dev-tools-footer-text": true,
-                            children: [
-                                semver ? /*#__PURE__*/ _jsxs("p", {
-                                    "data-nextjs-dev-tools-version": true,
-                                    children: [
-                                        "Next.js ",
-                                        semver
-                                    ]
-                                }) : null,
-                                /*#__PURE__*/ _jsxs("p", {
-                                    "data-nextjs-dev-tools-version": true,
-                                    children: [
-                                        "Turbopack ",
-                                        isTurbopack ? 'enabled' : 'not enabled'
-                                    ]
+                                    onClick: openErrorOverlay
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    label: "Route",
+                                    value: isStaticRoute ? 'Static' : 'Dynamic',
+                                    "data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic'
+                                }),
+                                isTurbopack ? /*#__PURE__*/ _jsx(MenuItem, {
+                                    label: "Turbopack",
+                                    value: "Enabled"
+                                }) : /*#__PURE__*/ _jsx(MenuItem, {
+                                    index: 1,
+                                    label: "Try Turbopack",
+                                    value: /*#__PURE__*/ _jsx(ExternalIcon, {}),
+                                    href: "https://nextjs.org/docs/app/api-reference/turbopack"
                                 })
                             ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "footer",
+                            children: /*#__PURE__*/ _jsx(MenuItem, {
+                                label: "Hide Dev Tools",
+                                value: /*#__PURE__*/ _jsx(HideShortcut, {}),
+                                onClick: hide,
+                                index: isTurbopack ? 1 : 2
+                            })
                         })
-                    })
-                ]
+                    ]
+                })
             })
         ]
     });
-};
-const IndicatorRow = (param)=>{
-    let { label, value, onClick, ...props } = param;
-    const Wrapper = onClick ? 'button' : 'div';
-    return /*#__PURE__*/ _jsxs(Wrapper, {
-        "data-nextjs-dev-tools-row": true,
-        onClick: onClick,
+}
+function MenuItem(param) {
+    let { index, label, value, onClick, href, ...props } = param;
+    const isInteractive = typeof onClick === 'function' || typeof href === 'string';
+    const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context);
+    const selected = selectedIndex === index;
+    function click() {
+        if (isInteractive) {
+            onClick == null ? void 0 : onClick();
+            closeMenu();
+            if (href) {
+                window.open(href, '_blank', 'noopener, noreferrer');
+            }
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "item",
+        "data-index": index,
+        "data-selected": selected,
+        onClick: click,
+        // Needs `onMouseMove` instead of enter to work together
+        // with keyboard and mouse input
+        onMouseMove: ()=>{
+            if (isInteractive && index !== undefined && selectedIndex !== index) {
+                setSelectedIndex(index);
+            }
+        },
+        onMouseLeave: ()=>setSelectedIndex(-1),
+        onKeyDown: (e)=>{
+            if (e.key === 'Enter' || e.key === ' ') {
+                click();
+            }
+        },
+        role: isInteractive ? 'menuitem' : undefined,
+        tabIndex: selected ? 0 : -1,
         ...props,
         children: [
             /*#__PURE__*/ _jsx("span", {
-                "data-nextjs-dev-tools-row-label": true,
+                className: "label",
                 children: label
             }),
             /*#__PURE__*/ _jsx("span", {
-                "data-nextjs-dev-tools-row-value": true,
+                className: "value",
                 children: value
             })
         ]
     });
-};
-const IssueCount = (param)=>{
-    let { count } = param;
-    return /*#__PURE__*/ _jsx("span", {
-        "data-nextjs-dev-tools-issue-count": true,
-        "data-has-issues": count > 0,
-        children: /*#__PURE__*/ _jsx("span", {
-            "data-nextjs-dev-tools-issue-text": true,
-            "data-has-issues": count > 0,
-            children: count
-        })
+}
+function IssueCount(param) {
+    let { children } = param;
+    return /*#__PURE__*/ _jsxs("span", {
+        className: "issueCount",
+        "data-has-issues": children > 0,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "indicator"
+            }),
+            children
+        ]
     });
-};
-function DevToolsShortcutGroup() {
+}
+function HideShortcut() {
     const isMac = // Feature detect for `navigator.userAgentData` which is experimental:
     // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform
     'userAgentData' in navigator ? navigator.userAgentData.platform === 'macOS' : // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples
     navigator.platform.indexOf('Mac') === 0 || navigator.platform === 'iPhone';
     return /*#__PURE__*/ _jsxs("span", {
-        "data-nextjs-dev-tools-shortcut-group": true,
+        className: "shortcut",
         children: [
-            isMac ? /*#__PURE__*/ _jsx(CmdIcon, {}) : /*#__PURE__*/ _jsx(CtrlIcon, {}),
-            /*#__PURE__*/ _jsx(DotIcon, {})
+            isMac ? /*#__PURE__*/ _jsx("kbd", {
+                "aria-label": "Command",
+                children: "⌘"
+            }) : /*#__PURE__*/ _jsx("kbd", {
+                "aria-label": "Control",
+                style: {
+                    width: 'fit-content',
+                    padding: '0 4px'
+                },
+                children: "Ctrl"
+            }),
+            /*#__PURE__*/ _jsx("kbd", {
+                children: "."
+            })
         ]
     });
 }
-function CmdIcon() {
-    return /*#__PURE__*/ _jsx("span", {
-        "data-nextjs-dev-tools-icon": true,
-        children: "⌘"
-    });
+//////////////////////////////////////////////////////////////////////////////////////
+function useFocusTrap(menuRef, triggerRef, isMenuOpen) {
+    useEffect(()=>{
+        if (isMenuOpen) {
+            var _menuRef_current;
+            (_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.focus();
+        } else {
+            var _triggerRef_current;
+            (_triggerRef_current = triggerRef.current) == null ? void 0 : _triggerRef_current.focus();
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isMenuOpen
+    ]);
 }
-function CtrlIcon() {
-    return /*#__PURE__*/ _jsx("span", {
-        "data-nextjs-dev-tools-icon": true,
-        "data-nextjs-dev-tools-ctrl-icon": true,
-        children: "ctrl"
-    });
+//////////////////////////////////////////////////////////////////////////////////////
+function useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu) {
+    useEffect(()=>{
+        if (!isMenuOpen) {
+            return;
+        }
+        // Close menu when clicking outside of it or its button
+        const handleClickOutside = (event)=>{
+            var _menuRef_current, _triggerRef_current;
+            if (!(((_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.getBoundingClientRect()) ? event.clientX >= menuRef.current.getBoundingClientRect().left && event.clientX <= menuRef.current.getBoundingClientRect().right && event.clientY >= menuRef.current.getBoundingClientRect().top && event.clientY <= menuRef.current.getBoundingClientRect().bottom : false) && !(((_triggerRef_current = triggerRef.current) == null ? void 0 : _triggerRef_current.getBoundingClientRect()) ? event.clientX >= triggerRef.current.getBoundingClientRect().left && event.clientX <= triggerRef.current.getBoundingClientRect().right && event.clientY >= triggerRef.current.getBoundingClientRect().top && event.clientY <= triggerRef.current.getBoundingClientRect().bottom : false)) {
+                closeMenu();
+            }
+        };
+        // Close popover when pressing escape
+        const handleKeyDown = (event)=>{
+            if (event.key === 'Escape') {
+                closeMenu();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isMenuOpen
+    ]);
 }
-function DotIcon() {
-    return /*#__PURE__*/ _jsx("span", {
-        "data-nextjs-dev-tools-icon": true,
-        children: "."
+//////////////////////////////////////////////////////////////////////////////////////
+function ExternalIcon() {
+    return /*#__PURE__*/ _jsx("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        role: "img",
+        "aria-label": "External link",
+        children: /*#__PURE__*/ _jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.5 10.25V13.25C13.5 13.3881 13.3881 13.5 13.25 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25L2.5 2.75C2.5 2.61193 2.61193 2.5 2.75 2.5H5.75H6.5V1H5.75H2.75C1.7835 1 1 1.7835 1 2.75V13.25C1 14.2165 1.7835 15 2.75 15H13.25C14.2165 15 15 14.2165 15 13.25V10.25V9.5H13.5V10.25ZM9 1H9.75H14.2495C14.6637 1 14.9995 1.33579 14.9995 1.75V6.25V7H13.4995V6.25V3.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L12.4388 2.5H9.75H9V1Z",
+            fill: "currentColor"
+        })
     });
 }