next 15.2.0-canary.15 → 15.2.0-canary.16

package/dist/bin/next

@@ -75,7 +75,7 @@ const program = new NextRootCommand();
 program.name('next').description('The Next.js CLI allows you to develop, build, start your application, and more.').configureHelp({
     formatHelp: (cmd, helper)=>(0, _formatclihelpoutput.formatCliHelpOutput)(cmd, helper),
     subcommandTerm: (cmd)=>`${cmd.name()} ${cmd.usage()}`
-}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.2.0-canary.15"}`, '-v, --version', 'Outputs the Next.js version.');
+}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.2.0-canary.16"}`, '-v, --version', 'Outputs the Next.js version.');
 program.command('build').description('Creates an optimized production build of your application. The output displays information about each route.').argument('[directory]', `A directory on which to build the application. ${(0, _picocolors.italic)('If no directory is provided, the current directory will be used.')}`).option('-d, --debug', 'Enables a more verbose build output.').option('--no-lint', 'Disables linting.').option('--no-mangling', 'Disables mangling.').option('--profile', 'Enables production profiling for React.').option('--experimental-app-only', 'Builds only App Router routes.').addOption(new _commander.Option('--experimental-turbo').hideHelp()).addOption(new _commander.Option('--experimental-build-mode [mode]', 'Uses an experimental build mode.').choices([
     'compile',
     'generate'

package/dist/build/index.js

@@ -361,7 +361,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
         const nextBuildSpan = (0, _trace.trace)('next-build', undefined, {
             buildMode: experimentalBuildMode,
             isTurboBuild: String(turboNextBuild),
-            version: "15.2.0-canary.15"
+            version: "15.2.0-canary.16"
         });
         _buildcontext.NextBuildContext.nextBuildSpan = nextBuildSpan;
         _buildcontext.NextBuildContext.dir = dir;
@@ -721,7 +721,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
             // Files outside of the distDir can be "type": "module"
             await writeFileUtf8(_path.default.join(distDir, 'package.json'), '{"type": "commonjs"}');
             // These are written to distDir, so they need to come after creating and cleaning distDr.
-            await (0, _builddiagnostics.recordFrameworkVersion)("15.2.0-canary.15");
+            await (0, _builddiagnostics.recordFrameworkVersion)("15.2.0-canary.16");
             await (0, _builddiagnostics.updateBuildDiagnostics)({
                 buildStage: 'start'
             });

package/dist/build/swc/index.js

@@ -119,7 +119,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const nextVersion = "15.2.0-canary.15";
+const nextVersion = "15.2.0-canary.16";
 const ArchName = (0, _os.arch)();
 const PlatformName = (0, _os.platform)();
 function infoLog(...args) {

package/dist/build/webpack-config.js

@@ -1499,7 +1499,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
             isClient && new _copyfileplugin.CopyFilePlugin({
                 // file path to build output of `@next/polyfill-nomodule`
                 filePath: require.resolve('./polyfills/polyfill-nomodule'),
-                cacheKey: "15.2.0-canary.15",
+                cacheKey: "15.2.0-canary.16",
                 name: `static/chunks/polyfills${dev ? '' : '-[hash]'}.js`,
                 minimize: false,
                 info: {
@@ -1727,7 +1727,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
         //  - Next.js location on disk (some loaders use absolute paths and some resolve options depend on absolute paths)
         //  - Next.js version
         //  - next.config.js keys that affect compilation
-        version: `${__dirname}|${"15.2.0-canary.15"}|${configVars}`,
+        version: `${__dirname}|${"15.2.0-canary.16"}|${configVars}`,
         cacheDirectory: _path.default.join(distDir, 'cache', 'webpack'),
         // For production builds, it's more efficient to compress all cache files together instead of compression each one individually.
         // So we disable compression here and allow the build runner to take care of compressing the cache as a whole.

package/dist/client/app-bootstrap.js

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

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

@@ -15,6 +15,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _nextlogo = require("./internal/next-logo");
 const _initializefornewoverlay = require("../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay");
 const _devrenderindicator = require("./internal/dev-render-indicator");
+const _usedelayedrender = require("./internal/use-delayed-render");
 function DevToolsIndicator(param) {
     let { versionInfo, hasStaticIndicator, readyErrors, fullscreen, hide, isTurbopack } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsPopover, {
@@ -26,11 +27,19 @@ function DevToolsIndicator(param) {
         isTurbopack: isTurbopack
     });
 }
+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 { onIssuesClick, issueCount, isStaticRoute, hide, semver, isTurbopack } = 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, {
+        // 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)=>{
@@ -64,20 +73,26 @@ const DevToolsPopover = (param)=>{
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_nextlogo.NextLogo, {
                     issueCount: issueCount,
                     onClick: togglePopover,
+                    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)
             }),
-            isPopoverOpen && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            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,
+                "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", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'\nimport { Toast } from '../../toast'\nimport React, { useState, useEffect, useRef } from 'react'\nimport { NextLogo } from './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\n\n// TODO: test a11y\n// TODO: add E2E tests to cover different scenarios\n\nexport function DevToolsIndicator({\n  versionInfo,\n  hasStaticIndicator,\n  readyErrors,\n  fullscreen,\n  hide,\n  isTurbopack,\n}: {\n  versionInfo: VersionInfo | undefined\n  readyErrors: ReadyRuntimeError[]\n  fullscreen: () => void\n  hide: () => void\n  hasStaticIndicator?: boolean\n  isTurbopack: boolean\n}) {\n  return (\n    <DevToolsPopover\n      semver={versionInfo?.installed}\n      onIssuesClick={fullscreen}\n      issueCount={readyErrors.length}\n      isStaticRoute={hasStaticIndicator === true}\n      hide={hide}\n      isTurbopack={isTurbopack}\n    />\n  )\n}\n\nconst DevToolsPopover = ({\n  onIssuesClick,\n  issueCount,\n  isStaticRoute,\n  hide,\n  semver,\n  isTurbopack,\n}: {\n  onIssuesClick: () => void\n  issueCount: number\n  isStaticRoute: boolean\n  hide: () => void\n  semver: string | undefined\n  isTurbopack: boolean\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLDivElement>(null)\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false)\n\n  useEffect(() => {\n    // Close popover when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(popoverRef.current?.getBoundingClientRect()\n          ? event.clientX >= popoverRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              popoverRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= popoverRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= popoverRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(buttonRef.current?.getBoundingClientRect()\n          ? event.clientX >= buttonRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= buttonRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= buttonRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= buttonRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        setIsPopoverOpen(false)\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsPopoverOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [])\n\n  const togglePopover = () => setIsPopoverOpen((prev) => !prev)\n\n  return (\n    <Toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n      }}\n    >\n      <div ref={buttonRef}>\n        <NextLogo\n          issueCount={issueCount}\n          onClick={togglePopover}\n          isDevBuilding={useIsDevBuilding()}\n          isDevRendering={useIsDevRendering()}\n          aria-haspopup=\"true\"\n          aria-expanded={isPopoverOpen}\n          aria-controls=\"dev-tools-popover\"\n          data-nextjs-dev-tools-button\n        />\n      </div>\n\n      {isPopoverOpen && (\n        <div\n          ref={popoverRef}\n          id=\"dev-tools-popover\"\n          role=\"dialog\"\n          aria-labelledby=\"dev-tools-title\"\n          data-nextjs-dev-tools-popover\n          tabIndex={-1}\n        >\n          <div data-nextjs-dev-tools-content>\n            <div data-nextjs-dev-tools-container>\n              <h2 id=\"dev-tools-title\" style={{ display: 'none' }}>\n                Dev Tools Options\n              </h2>\n\n              <IndicatorRow\n                label=\"Hide Dev Tools\"\n                value={<DevToolsShortcutGroup />}\n                onClick={hide}\n              />\n              <IndicatorRow\n                label=\"Route\"\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n              />\n              <IndicatorRow\n                label=\"Issues\"\n                value={<IssueCount count={issueCount} />}\n                onClick={issueCount > 0 ? onIssuesClick : undefined}\n              />\n            </div>\n          </div>\n          <div data-nextjs-dev-tools-footer>\n            <div data-nextjs-dev-tools-footer-text>\n              {semver ? (\n                <p data-nextjs-dev-tools-version>Next.js {semver}</p>\n              ) : null}\n\n              <p data-nextjs-dev-tools-version>\n                Turbopack {isTurbopack ? 'enabled' : 'not enabled'}\n              </p>\n            </div>\n          </div>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nconst IndicatorRow = ({\n  label,\n  value,\n  onClick,\n}: {\n  label: string\n  value: React.ReactNode\n  onClick?: () => void\n}) => {\n  const Wrapper = onClick ? 'button' : 'div'\n  return (\n    <Wrapper data-nextjs-dev-tools-row onClick={onClick}>\n      <span data-nextjs-dev-tools-row-label>{label}</span>\n      <span data-nextjs-dev-tools-row-value>{value}</span>\n    </Wrapper>\n  )\n}\n\nconst IssueCount = ({ count }: { count: number }) => {\n  return (\n    <span data-nextjs-dev-tools-issue-count data-has-issues={count > 0}>\n      <span data-nextjs-dev-tools-issue-text data-has-issues={count > 0}>\n        {count}\n      </span>\n    </span>\n  )\n}\n\nfunction DevToolsShortcutGroup() {\n  const isMac =\n    // Feature detect for `navigator.userAgentData` which is experimental:\n    // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform\n    'userAgentData' in navigator\n      ? (navigator.userAgentData as any).platform === 'macOS'\n      : // This is the least-bad option to detect the modifier key when using `navigator.platform`:\n        // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples\n        navigator.platform.indexOf('Mac') === 0 ||\n        navigator.platform === 'iPhone'\n\n  return (\n    <span data-nextjs-dev-tools-shortcut-group>\n      {isMac ? <CmdIcon /> : <CtrlIcon />}\n      <DotIcon />\n    </span>\n  )\n}\n\nfunction CmdIcon() {\n  return <span data-nextjs-dev-tools-icon>⌘</span>\n}\n\nfunction CtrlIcon() {\n  return (\n    <span data-nextjs-dev-tools-icon data-nextjs-dev-tools-ctrl-icon>\n      ctrl\n    </span>\n  )\n}\n\nfunction DotIcon() {\n  return <span data-nextjs-dev-tools-icon>.</span>\n}\n"],"names":["DevToolsIndicator","versionInfo","hasStaticIndicator","readyErrors","fullscreen","hide","isTurbopack","DevToolsPopover","semver","installed","onIssuesClick","issueCount","length","isStaticRoute","popoverRef","useRef","buttonRef","isPopoverOpen","setIsPopoverOpen","useState","useEffect","handleClickOutside","event","current","getBoundingClientRect","clientX","left","right","clientY","top","bottom","handleKeyDown","key","document","addEventListener","removeEventListener","togglePopover","prev","Toast","style","boxShadow","zIndex","div","ref","NextLogo","onClick","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","aria-haspopup","aria-expanded","aria-controls","data-nextjs-dev-tools-button","id","role","aria-labelledby","data-nextjs-dev-tools-popover","tabIndex","data-nextjs-dev-tools-content","data-nextjs-dev-tools-container","h2","display","IndicatorRow","label","value","DevToolsShortcutGroup","IssueCount","count","undefined","data-nextjs-dev-tools-footer","data-nextjs-dev-tools-footer-text","p","data-nextjs-dev-tools-version","Wrapper","data-nextjs-dev-tools-row","span","data-nextjs-dev-tools-row-label","data-nextjs-dev-tools-row-value","data-nextjs-dev-tools-issue-count","data-has-issues","data-nextjs-dev-tools-issue-text","isMac","navigator","userAgentData","platform","indexOf","data-nextjs-dev-tools-shortcut-group","CmdIcon","CtrlIcon","DotIcon","data-nextjs-dev-tools-icon","data-nextjs-dev-tools-ctrl-icon"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'\nimport { Toast } from '../../toast'\nimport React, { useState, useEffect, useRef } from 'react'\nimport { NextLogo } from './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from './internal/use-delayed-render'\n\n// TODO: test a11y\n// TODO: add E2E tests to cover different scenarios\n\nexport function DevToolsIndicator({\n  versionInfo,\n  hasStaticIndicator,\n  readyErrors,\n  fullscreen,\n  hide,\n  isTurbopack,\n}: {\n  versionInfo: VersionInfo | undefined\n  readyErrors: ReadyRuntimeError[]\n  fullscreen: () => void\n  hide: () => void\n  hasStaticIndicator?: boolean\n  isTurbopack: boolean\n}) {\n  return (\n    <DevToolsPopover\n      semver={versionInfo?.installed}\n      onIssuesClick={fullscreen}\n      issueCount={readyErrors.length}\n      isStaticRoute={hasStaticIndicator === true}\n      hide={hide}\n      isTurbopack={isTurbopack}\n    />\n  )\n}\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\nconst DevToolsPopover = ({\n  onIssuesClick,\n  issueCount,\n  isStaticRoute,\n  hide,\n  semver,\n  isTurbopack,\n}: {\n  onIssuesClick: () => void\n  issueCount: number\n  isStaticRoute: boolean\n  hide: () => void\n  semver: string | undefined\n  isTurbopack: boolean\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLDivElement>(null)\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false)\n\n  const { mounted, rendered } = useDelayedRender(isPopoverOpen, {\n    // Intentionally no fade in, makes the UI feel more immediate\n    enterDelay: 0,\n    // Graceful fade out to confirm that the UI did not break\n    exitDelay: ANIMATE_OUT_DURATION_MS,\n  })\n\n  useEffect(() => {\n    // Close popover when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(popoverRef.current?.getBoundingClientRect()\n          ? event.clientX >= popoverRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              popoverRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= popoverRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= popoverRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(buttonRef.current?.getBoundingClientRect()\n          ? event.clientX >= buttonRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= buttonRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= buttonRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= buttonRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        setIsPopoverOpen(false)\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsPopoverOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [])\n\n  const togglePopover = () => setIsPopoverOpen((prev) => !prev)\n\n  return (\n    <Toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n      }}\n    >\n      <div ref={buttonRef}>\n        <NextLogo\n          key={issueCount}\n          issueCount={issueCount}\n          onClick={togglePopover}\n          onIssuesClick={onIssuesClick}\n          isDevBuilding={useIsDevBuilding()}\n          isDevRendering={useIsDevRendering()}\n          aria-haspopup=\"true\"\n          aria-expanded={isPopoverOpen}\n          aria-controls=\"dev-tools-popover\"\n          data-nextjs-dev-tools-button\n        />\n      </div>\n\n      {mounted && (\n        <div\n          ref={popoverRef}\n          id=\"dev-tools-popover\"\n          role=\"dialog\"\n          aria-labelledby=\"dev-tools-title\"\n          data-nextjs-dev-tools-popover\n          data-rendered={rendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n            } as React.CSSProperties\n          }\n          tabIndex={-1}\n        >\n          <div data-nextjs-dev-tools-content>\n            <div data-nextjs-dev-tools-container>\n              <h2 id=\"dev-tools-title\" style={{ display: 'none' }}>\n                Dev Tools Options\n              </h2>\n\n              <IndicatorRow\n                label=\"Hide Dev Tools\"\n                value={<DevToolsShortcutGroup />}\n                onClick={hide}\n              />\n              <IndicatorRow\n                label=\"Route\"\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n              />\n              <IndicatorRow\n                label=\"Issues\"\n                value={<IssueCount count={issueCount} />}\n                onClick={issueCount > 0 ? onIssuesClick : undefined}\n              />\n            </div>\n          </div>\n          <div data-nextjs-dev-tools-footer>\n            <div data-nextjs-dev-tools-footer-text>\n              {semver ? (\n                <p data-nextjs-dev-tools-version>Next.js {semver}</p>\n              ) : null}\n\n              <p data-nextjs-dev-tools-version>\n                Turbopack {isTurbopack ? 'enabled' : 'not enabled'}\n              </p>\n            </div>\n          </div>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nconst IndicatorRow = ({\n  label,\n  value,\n  onClick,\n}: {\n  label: string\n  value: React.ReactNode\n  onClick?: () => void\n}) => {\n  const Wrapper = onClick ? 'button' : 'div'\n  return (\n    <Wrapper data-nextjs-dev-tools-row onClick={onClick}>\n      <span data-nextjs-dev-tools-row-label>{label}</span>\n      <span data-nextjs-dev-tools-row-value>{value}</span>\n    </Wrapper>\n  )\n}\n\nconst IssueCount = ({ count }: { count: number }) => {\n  return (\n    <span data-nextjs-dev-tools-issue-count data-has-issues={count > 0}>\n      <span data-nextjs-dev-tools-issue-text data-has-issues={count > 0}>\n        {count}\n      </span>\n    </span>\n  )\n}\n\nfunction DevToolsShortcutGroup() {\n  const isMac =\n    // Feature detect for `navigator.userAgentData` which is experimental:\n    // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform\n    'userAgentData' in navigator\n      ? (navigator.userAgentData as any).platform === 'macOS'\n      : // This is the least-bad option to detect the modifier key when using `navigator.platform`:\n        // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples\n        navigator.platform.indexOf('Mac') === 0 ||\n        navigator.platform === 'iPhone'\n\n  return (\n    <span data-nextjs-dev-tools-shortcut-group>\n      {isMac ? <CmdIcon /> : <CtrlIcon />}\n      <DotIcon />\n    </span>\n  )\n}\n\nfunction CmdIcon() {\n  return <span data-nextjs-dev-tools-icon>⌘</span>\n}\n\nfunction CtrlIcon() {\n  return (\n    <span data-nextjs-dev-tools-icon data-nextjs-dev-tools-ctrl-icon>\n      ctrl\n    </span>\n  )\n}\n\nfunction DotIcon() {\n  return <span data-nextjs-dev-tools-icon>.</span>\n}\n"],"names":["DevToolsIndicator","versionInfo","hasStaticIndicator","readyErrors","fullscreen","hide","isTurbopack","DevToolsPopover","semver","installed","onIssuesClick","issueCount","length","isStaticRoute","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","popoverRef","useRef","buttonRef","isPopoverOpen","setIsPopoverOpen","useState","mounted","rendered","useDelayedRender","enterDelay","exitDelay","useEffect","handleClickOutside","event","current","getBoundingClientRect","clientX","left","right","clientY","top","bottom","handleKeyDown","key","document","addEventListener","removeEventListener","togglePopover","prev","Toast","style","boxShadow","zIndex","div","ref","NextLogo","onClick","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","aria-haspopup","aria-expanded","aria-controls","data-nextjs-dev-tools-button","id","role","aria-labelledby","data-nextjs-dev-tools-popover","data-rendered","tabIndex","data-nextjs-dev-tools-content","data-nextjs-dev-tools-container","h2","display","IndicatorRow","label","value","DevToolsShortcutGroup","IssueCount","count","undefined","data-nextjs-dev-tools-footer","data-nextjs-dev-tools-footer-text","p","data-nextjs-dev-tools-version","Wrapper","data-nextjs-dev-tools-row","span","data-nextjs-dev-tools-row-label","data-nextjs-dev-tools-row-value","data-nextjs-dev-tools-issue-count","data-has-issues","data-nextjs-dev-tools-issue-text","isMac","navigator","userAgentData","platform","indexOf","data-nextjs-dev-tools-shortcut-group","CmdIcon","CtrlIcon","DotIcon","data-nextjs-dev-tools-icon","data-nextjs-dev-tools-ctrl-icon"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ interface Props extends React.ComponentProps<'button'> {
     onClick: () => void;
     isDevBuilding: boolean;
     isDevRendering: boolean;
+    onIssuesClick: () => void;
 }
-export declare const NextLogo: ({ issueCount, onClick, isDevBuilding, isDevRendering, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NextLogo: ({ issueCount, onClick, isDevBuilding, isDevRendering, onIssuesClick, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};