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

package/dist/client/app-bootstrap.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "appBootstrap", {
         return appBootstrap;
     }
 });
-const version = "15.2.0-canary.28";
+const version = "15.2.0-canary.29";
 window.next = {
     version,
     appDir: true

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

@@ -13,9 +13,8 @@ const _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 const _iserror = /*#__PURE__*/ _interop_require_default._(require("../../../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.default.captureOwnerStack ? _react.default.captureOwnerStack : ()=>'';
 function getReactStitchedError(err) {
-    if (typeof _react.default.captureOwnerStack !== 'function') {
+    if (!process.env.__NEXT_REACT_OWNER_STACK) {
         return err;
     }
     const isErrorInstance = (0, _iserror.default)(err);
@@ -39,8 +38,9 @@ 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.default.captureOwnerStack();
     // Avoid duplicate overriding stack frames
-    const ownerStack = captureOwnerStack();
     if (ownerStack && stack.endsWith(ownerStack) === false) {
         stack += ownerStack;
         // Override stack

package/dist/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":["getReactStitchedError","REACT_ERROR_STACK_BOTTOM_FRAME","REACT_ERROR_STACK_BOTTOM_FRAME_REGEX","RegExp","captureOwnerStack","React","err","isErrorInstance","isError","originStack","stack","originMessage","message","stackLines","split","indexOfSplit","findIndex","line","test","isOriginalReactError","newStack","slice","join","newError","Error","Object","assign","appendOwnerStack","error","ownerStack","endsWith"],"mappings":";;;;+BAYgBA;;;eAAAA;;;;gEAZE;kEACE;AAEpB,MAAMC,iCAAiC;AACvC,MAAMC,uCAAuC,IAAIC,OAC/C,AAAC,SAAMF,iCAA+B,SAAMA,iCAA+B;AAG7E,MAAMG,oBAAoBC,cAAK,CAACD,iBAAiB,GAC7CC,cAAK,CAACD,iBAAiB,GACvB,IAAM;AAEH,SAASJ,sBAAmCM,GAAM;IACvD,IAAI,OAAOD,cAAK,CAACD,iBAAiB,KAAK,YAAY;QACjD,OAAOE;IACT;IACA,MAAMC,kBAAkBC,IAAAA,gBAAO,EAACF;IAChC,MAAMG,cAAcF,kBAAkBD,IAAII,KAAK,IAAI,KAAK;IACxD,MAAMC,gBAAgBJ,kBAAkBD,IAAIM,OAAO,GAAG;IACtD,MAAMC,aAAaJ,YAAYK,KAAK,CAAC;IACrC,MAAMC,eAAeF,WAAWG,SAAS,CAAC,CAACC,OACzCf,qCAAqCgB,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,UAAUjB;IACxBiB,SAASb,KAAK,GAAGU;IAEjB,0CAA0C;IAC1CO,iBAAiBJ;IAEjB,OAAOA;AACT;AAEA,SAASI,iBAAiBC,KAAY;IACpC,IAAIlB,QAAQkB,MAAMlB,KAAK,IAAI;IAC3B,0CAA0C;IAC1C,MAAMmB,aAAazB;IACnB,IAAIyB,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":["getReactStitchedError","REACT_ERROR_STACK_BOTTOM_FRAME","REACT_ERROR_STACK_BOTTOM_FRAME_REGEX","RegExp","err","process","env","__NEXT_REACT_OWNER_STACK","isErrorInstance","isError","originStack","stack","originMessage","message","stackLines","split","indexOfSplit","findIndex","line","test","isOriginalReactError","newStack","slice","join","newError","Error","Object","assign","appendOwnerStack","error","ownerStack","React","captureOwnerStack","endsWith"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;gEARE;kEACE;AAEpB,MAAMC,iCAAiC;AACvC,MAAMC,uCAAuC,IAAIC,OAC/C,AAAC,SAAMF,iCAA+B,SAAMA,iCAA+B;AAGtE,SAASD,sBAAmCI,GAAM;IACvD,IAAI,CAACC,QAAQC,GAAG,CAACC,wBAAwB,EAAE;QACzC,OAAOH;IACT;IACA,MAAMI,kBAAkBC,IAAAA,gBAAO,EAACL;IAChC,MAAMM,cAAcF,kBAAkBJ,IAAIO,KAAK,IAAI,KAAK;IACxD,MAAMC,gBAAgBJ,kBAAkBJ,IAAIS,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,UAAUpB;IACxBoB,SAASb,KAAK,GAAGU;IAEjB,0CAA0C;IAC1CO,iBAAiBJ;IAEjB,OAAOA;AACT;AAEA,SAASI,iBAAiBC,KAAY;IACpC,IAAIlB,QAAQkB,MAAMlB,KAAK,IAAI;IAC3B,mEAAmE;IACnE,MAAMmB,aAAaC,cAAK,CAACC,iBAAiB;IAC1C,0CAA0C;IAC1C,IAAIF,cAAcnB,MAAMsB,QAAQ,CAACH,gBAAgB,OAAO;QACtDnB,SAASmB;QACT,iBAAiB;QACjBD,MAAMlB,KAAK,GAAGA;IAChB;AACF"}

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

@@ -22,8 +22,8 @@ const _useerrorhook = require("../internal/container/runtime-error/use-error-hoo
 function ReactDevOverlay(param) {
     let { state, globalError, children } = param;
     const [isErrorOverlayOpen, setIsErrorOverlayOpen] = (0, _react.useState)(false);
-    const { readyErrors } = (0, _useerrorhook.useErrorHook)({
-        errors: state.errors,
+    const { readyErrors, totalErrorCount } = (0, _useerrorhook.useErrorHook)({
+        state,
         isAppDir: true
     });
     const devOverlay = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_shadowportal.ShadowPortal, {
@@ -34,7 +34,7 @@ function ReactDevOverlay(param) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_componentstyles.ComponentStyles, {}),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_devtoolsindicator.DevToolsIndicator, {
                 state: state,
-                readyErrorsLength: readyErrors.length,
+                errorCount: totalErrorCount,
                 setIsErrorOverlayOpen: setIsErrorOverlayOpen
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlay.ErrorOverlay, {

package/dist/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":["ReactDevOverlay","state","globalError","children","isErrorOverlayOpen","setIsErrorOverlayOpen","useState","readyErrors","useErrorHook","errors","isAppDir","devOverlay","ShadowPortal","CssReset","Base","Colors","ComponentStyles","DevToolsIndicator","readyErrorsLength","length","ErrorOverlay","DevOverlayErrorBoundary","onError"],"mappings":";;;;+BAcA;;;eAAwBA;;;;uBAXC;+BACe;8BACX;sBACR;iCACW;0BACP;wBACF;8BACM;mCACK;8BACL;AAEd,SAASA,gBAAgB,KAQvC;IARuC,IAAA,EACtCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EAKT,GARuC;IAStC,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGC,IAAAA,eAAQ,EAAC;IAC7D,MAAM,EAAEC,WAAW,EAAE,GAAGC,IAAAA,0BAAY,EAAC;QAAEC,QAAQR,MAAMQ,MAAM;QAAEC,UAAU;IAAK;IAE5E,MAAMC,2BACJ,sBAACC,0BAAY;;0BACX,qBAACC,kBAAQ;0BACT,qBAACC,UAAI;0BACL,qBAACC,cAAM;0BACP,qBAACC,gCAAe;0BAEhB,qBAACC,oCAAiB;gBAChBhB,OAAOA;gBACPiB,mBAAmBX,YAAYY,MAAM;gBACrCd,uBAAuBA;;0BAGzB,qBAACe,0BAAY;gBACXnB,OAAOA;gBACPM,aAAaA;gBACbH,oBAAoBA;gBACpBC,uBAAuBA;;;;IAK7B,qBACE,qBAACgB,sCAAuB;QACtBV,YAAYA;QACZT,aAAaA;QACboB,SAASjB;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":["ReactDevOverlay","state","globalError","children","isErrorOverlayOpen","setIsErrorOverlayOpen","useState","readyErrors","totalErrorCount","useErrorHook","isAppDir","devOverlay","ShadowPortal","CssReset","Base","Colors","ComponentStyles","DevToolsIndicator","errorCount","ErrorOverlay","DevOverlayErrorBoundary","onError"],"mappings":";;;;+BAcA;;;eAAwBA;;;;uBAXC;+BACe;8BACX;sBACR;iCACW;0BACP;wBACF;8BACM;mCACK;8BACL;AAEd,SAASA,gBAAgB,KAQvC;IARuC,IAAA,EACtCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EAKT,GARuC;IAStC,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGC,IAAAA,eAAQ,EAAC;IAC7D,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0BAAY,EAAC;QACpDR;QACAS,UAAU;IACZ;IAEA,MAAMC,2BACJ,sBAACC,0BAAY;;0BACX,qBAACC,kBAAQ;0BACT,qBAACC,UAAI;0BACL,qBAACC,cAAM;0BACP,qBAACC,gCAAe;0BAEhB,qBAACC,oCAAiB;gBAChBhB,OAAOA;gBACPiB,YAAYV;gBACZH,uBAAuBA;;0BAGzB,qBAACc,0BAAY;gBACXlB,OAAOA;gBACPM,aAAaA;gBACbH,oBAAoBA;gBACpBC,uBAAuBA;;;;IAK7B,qBACE,qBAACe,sCAAuB;QACtBT,YAAYA;QACZT,aAAaA;QACbmB,SAAShB;kBAERF;;AAGP"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.d.ts

@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import type { OverlayState } from '../../../../../shared';
-export declare function DevToolsIndicator({ state, readyErrorsLength, setIsErrorOverlayOpen, }: {
+export declare function DevToolsIndicator({ state, errorCount, setIsErrorOverlayOpen, }: {
     state: OverlayState;
-    readyErrorsLength: number;
+    errorCount: number;
     setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>;
 }): false | import("react/jsx-runtime").JSX.Element;

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

@@ -17,7 +17,7 @@ const _devrenderindicator = require("./internal/dev-render-indicator");
 const _usedelayedrender = require("./internal/use-delayed-render");
 const _usekeyboardshortcut = require("../../../hooks/use-keyboard-shortcut");
 function DevToolsIndicator(param) {
-    let { state, readyErrorsLength, setIsErrorOverlayOpen } = param;
+    let { state, errorCount, setIsErrorOverlayOpen } = param;
     const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = (0, _react.useState)(true);
     // Register `(cmd|ctrl) + .` to show/hide the error indicator.
     (0, _usekeyboardshortcut.useKeyboardShortcut)({
@@ -32,7 +32,7 @@ function DevToolsIndicator(param) {
     });
     return isDevToolsIndicatorOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsPopover, {
         semver: state.versionInfo.installed,
-        issueCount: readyErrorsLength,
+        issueCount: errorCount,
         isStaticRoute: state.staticIndicator,
         hide: ()=>{
             setIsDevToolsIndicatorOpen(false);
@@ -41,46 +41,99 @@ 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 = (0, _react.useRef)(null);
-    const buttonRef = (0, _react.useRef)(null);
-    const [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
-    const { mounted, rendered } = (0, _usedelayedrender.useDelayedRender)(isPopoverOpen, {
+const Context = /*#__PURE__*/ (0, _react.createContext)({});
+function DevToolsPopover(param) {
+    let { issueCount, isStaticRoute, isTurbopack, hide, setIsErrorOverlayOpen } = param;
+    const menuRef = (0, _react.useRef)(null);
+    const triggerRef = (0, _react.useRef)(null);
+    const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, _react.useState)(-1);
+    const { mounted, rendered } = (0, _usedelayedrender.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
     });
-    (0, _react.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);
+    // 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);
             }
-        };
-        // Close popover when pressing escape
-        const handleKeyDown = (event)=>{
-            if (event.key === 'Escape') {
-                setIsPopoverOpen(false);
-            }
-        };
-        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__*/ (0, _jsxruntime.jsxs)(_toast.Toast, {
         "data-nextjs-toast": true,
         style: {
@@ -88,153 +141,229 @@ const DevToolsPopover = (param)=>{
             zIndex: 2147483647
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                ref: buttonRef,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_nextlogo.NextLogo, {
-                    issueCount: issueCount,
-                    onLogoClick: onLogoClick,
-                    onIssuesClick: onIssuesClick,
-                    isDevBuilding: (0, _initializefornewoverlay.useIsDevBuilding)(),
-                    isDevRendering: (0, _devrenderindicator.useIsDevRendering)(),
-                    "aria-haspopup": "true",
-                    "aria-expanded": isPopoverOpen,
-                    "aria-controls": "dev-tools-popover",
-                    "data-nextjs-dev-tools-button": true
-                }, issueCount)
-            }),
-            mounted && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                ref: popoverRef,
-                id: "dev-tools-popover",
-                role: "dialog",
-                "aria-labelledby": "dev-tools-title",
-                "data-nextjs-dev-tools-popover": true,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_nextlogo.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: (0, _initializefornewoverlay.useIsDevBuilding)(),
+                isDevRendering: (0, _devrenderindicator.useIsDevRendering)()
+            }, issueCount),
+            mounted && /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("div", {
-                        "data-nextjs-dev-tools-content": true,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                            "data-nextjs-dev-tools-container": true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(Context.Provider, {
+                    value: {
+                        closeMenu,
+                        selectedIndex,
+                        setSelectedIndex
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "inner",
                             children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
-                                    id: "dev-tools-title",
-                                    style: {
-                                        display: 'none'
-                                    },
-                                    children: "Dev Tools Options"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(IndicatorRow, {
-                                    label: "Hide Dev Tools",
-                                    value: /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsShortcutGroup, {}),
-                                    onClick: hide
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(IndicatorRow, {
-                                    "data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic',
-                                    label: "Route",
-                                    value: isStaticRoute ? 'Static' : 'Dynamic'
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(IndicatorRow, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
+                                    index: 0,
                                     label: "Issues",
                                     value: /*#__PURE__*/ (0, _jsxruntime.jsx)(IssueCount, {
-                                        count: issueCount
+                                        children: issueCount
                                     }),
-                                    onClick: onIssuesClick
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        "data-nextjs-dev-tools-footer": true,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                            "data-nextjs-dev-tools-footer-text": true,
-                            children: [
-                                semver ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
-                                    "data-nextjs-dev-tools-version": true,
-                                    children: [
-                                        "Next.js ",
-                                        semver
-                                    ]
-                                }) : null,
-                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
-                                    "data-nextjs-dev-tools-version": true,
-                                    children: [
-                                        "Turbopack ",
-                                        isTurbopack ? 'enabled' : 'not enabled'
-                                    ]
+                                    onClick: openErrorOverlay
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
+                                    label: "Route",
+                                    value: isStaticRoute ? 'Static' : 'Dynamic',
+                                    "data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic'
+                                }),
+                                isTurbopack ? /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
+                                    label: "Turbopack",
+                                    value: "Enabled"
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
+                                    index: 1,
+                                    label: "Try Turbopack",
+                                    value: /*#__PURE__*/ (0, _jsxruntime.jsx)(ExternalIcon, {}),
+                                    href: "https://nextjs.org/docs/app/api-reference/turbopack"
                                 })
                             ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "footer",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
+                                label: "Hide Dev Tools",
+                                value: /*#__PURE__*/ (0, _jsxruntime.jsx)(HideShortcut, {}),
+                                onClick: hide,
+                                index: isTurbopack ? 1 : 2
+                            })
                         })
-                    })
-                ]
+                    ]
+                })
             })
         ]
     });
-};
-const IndicatorRow = (param)=>{
-    let { label, value, onClick, ...props } = param;
-    const Wrapper = onClick ? 'button' : 'div';
-    return /*#__PURE__*/ (0, _jsxruntime.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 } = (0, _react.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__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("span", {
-                "data-nextjs-dev-tools-row-label": true,
+                className: "label",
                 children: label
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                "data-nextjs-dev-tools-row-value": true,
+                className: "value",
                 children: value
             })
         ]
     });
-};
-const IssueCount = (param)=>{
-    let { count } = param;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-        "data-nextjs-dev-tools-issue-count": true,
-        "data-has-issues": count > 0,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-            "data-nextjs-dev-tools-issue-text": true,
-            "data-has-issues": count > 0,
-            children: count
-        })
+}
+function IssueCount(param) {
+    let { children } = param;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+        className: "issueCount",
+        "data-has-issues": children > 0,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsxs)("span", {
-        "data-nextjs-dev-tools-shortcut-group": true,
+        className: "shortcut",
         children: [
-            isMac ? /*#__PURE__*/ (0, _jsxruntime.jsx)(CmdIcon, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(CtrlIcon, {}),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(DotIcon, {})
+            isMac ? /*#__PURE__*/ (0, _jsxruntime.jsx)("kbd", {
+                "aria-label": "Command",
+                children: "⌘"
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("kbd", {
+                "aria-label": "Control",
+                style: {
+                    width: 'fit-content',
+                    padding: '0 4px'
+                },
+                children: "Ctrl"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("kbd", {
+                children: "."
+            })
         ]
     });
 }
-function CmdIcon() {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-        "data-nextjs-dev-tools-icon": true,
-        children: "⌘"
-    });
+//////////////////////////////////////////////////////////////////////////////////////
+function useFocusTrap(menuRef, triggerRef, isMenuOpen) {
+    (0, _react.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__*/ (0, _jsxruntime.jsx)("span", {
-        "data-nextjs-dev-tools-icon": true,
-        "data-nextjs-dev-tools-ctrl-icon": true,
-        children: "ctrl"
-    });
+//////////////////////////////////////////////////////////////////////////////////////
+function useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu) {
+    (0, _react.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__*/ (0, _jsxruntime.jsx)("span", {
-        "data-nextjs-dev-tools-icon": true,
-        children: "."
+//////////////////////////////////////////////////////////////////////////////////////
+function ExternalIcon() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        role: "img",
+        "aria-label": "External link",
+        children: /*#__PURE__*/ (0, _jsxruntime.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"
+        })
     });
 }