npm - next - Versions diffs - 15.4.0-canary.19 → 15.4.0-canary.20 - Mend

next 15.4.0-canary.19 → 15.4.0-canary.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/bin/next CHANGED Viewed

@@ -79,7 +79,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.4.0-canary.19"}`, '-v, --version', 'Outputs the Next.js version.');
+}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.4.0-canary.20"}`, '-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.').option('--turbo', 'Starts development mode using Turbopack.').option('--turbopack', 'Starts development mode using Turbopack.').addOption(new _commander.Option('--experimental-build-mode [mode]', 'Uses an experimental build mode.').choices([
     'compile',
     'generate',

package/dist/build/index.js CHANGED Viewed

@@ -376,7 +376,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
         const nextBuildSpan = (0, _trace.trace)('next-build', undefined, {
             buildMode: experimentalBuildMode,
             isTurboBuild: String(isTurbopack),
-            version: "15.4.0-canary.19"
+            version: "15.4.0-canary.20"
         });
         _buildcontext.NextBuildContext.nextBuildSpan = nextBuildSpan;
         _buildcontext.NextBuildContext.dir = dir;
@@ -758,7 +758,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.4.0-canary.19");
+            await (0, _builddiagnostics.recordFrameworkVersion)("15.4.0-canary.20");
             await (0, _builddiagnostics.updateBuildDiagnostics)({
                 buildStage: 'start'
             });

package/dist/build/swc/index.js CHANGED Viewed

@@ -123,7 +123,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const nextVersion = "15.4.0-canary.19";
+const nextVersion = "15.4.0-canary.20";
 const ArchName = (0, _os.arch)();
 const PlatformName = (0, _os.platform)();
 function infoLog(...args) {

package/dist/build/webpack-config.js CHANGED Viewed

@@ -1653,7 +1653,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.4.0-canary.19",
+                cacheKey: "15.4.0-canary.20",
                 name: `static/chunks/polyfills${dev ? '' : '-[hash]'}.js`,
                 minimize: false,
                 info: {
@@ -1830,7 +1830,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.4.0-canary.19"}|${configVars}`,
+        version: `${__dirname}|${"15.4.0-canary.20"}|${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 CHANGED Viewed

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

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { OverlayState } from '../../../../shared';
+import { type OverlayState } from '../../../../shared';
 import { type DevToolsScale } from './dev-tools-info/preferences';
 export declare function DevToolsIndicator({ state, errorCount, isBuildError, setIsErrorOverlayOpen, ...props }: {
     state: OverlayState;
@@ -15,5 +15,5 @@ declare const OVERLAYS: {
     readonly Preferences: "preferences";
 };
 export type Overlays = (typeof OVERLAYS)[keyof typeof OVERLAYS];
-export declare const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: var(--size-36);\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n    white-space: nowrap;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: var(--size-40);\n    height: var(--size-24);\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: var(--size-13);\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: var(--size-8);\n      height: var(--size-8);\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: 4px;\n\n    kbd {\n      width: var(--size-20);\n      height: var(--size-20);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-12);\n      line-height: var(--size-16);\n    }\n  }\n";
+export declare const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: var(--size-36);\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n    white-space: nowrap;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: var(--size-40);\n    height: var(--size-24);\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: var(--size-13);\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: var(--size-8);\n      height: var(--size-8);\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: 4px;\n\n    kbd {\n      width: var(--size-20);\n      height: var(--size-20);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-12);\n      line-height: var(--size-16);\n    }\n  }\n\n  .dev-tools-grabbing {\n    cursor: grabbing;\n\n    > * {\n      pointer-events: none;\n    }\n  }\n";
 export {};

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.js CHANGED Viewed

@@ -22,6 +22,7 @@ _export(exports, {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _jsxruntime = require("react/jsx-runtime");
+const _shared = require("../../../../shared");
 const _react = require("react");
 const _toast = require("../../toast");
 const _nextlogo = require("./next-logo");
@@ -34,6 +35,7 @@ const _gearicon = /*#__PURE__*/ _interop_require_default._(require("../../../ico
 const _userpreferences = require("./dev-tools-info/user-preferences");
 const _utils = require("./utils");
 const _preferences = require("./dev-tools-info/preferences");
+const _draggable = require("./draggable");
 function DevToolsIndicator(param) {
     let { state, errorCount, isBuildError, setIsErrorOverlayOpen, ...props } = param;
     const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] = (0, _react.useState)(true);
@@ -62,6 +64,7 @@ const OVERLAYS = {
     Route: 'route',
     Preferences: 'preferences'
 };
+const INDICATOR_PADDING = 20;
 function DevToolsPopover(param) {
     let { routerType, disabled, issueCount, isStaticRoute, isTurbopack, isBuildError, hide, setIsErrorOverlayOpen, scale, setScale } = param;
     const menuRef = (0, _react.useRef)(null);
@@ -195,28 +198,34 @@ function DevToolsPopover(param) {
             '--animate-out-timing-function': _utils.MENU_CURVE,
             boxShadow: 'none',
             zIndex: 2147483647,
-            // Reset the toast component's default positions.
-            bottom: 'initial',
-            left: 'initial',
-            [vertical]: '20px',
-            [horizontal]: '20px'
+            [vertical]: "" + INDICATOR_PADDING + "px",
+            [horizontal]: "" + INDICATOR_PADDING + "px"
         },
         children: [
-            /*#__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,
-                disabled: disabled,
-                issueCount: issueCount,
-                onTriggerClick: onTriggerClick,
-                toggleErrorOverlay: toggleErrorOverlay,
-                isDevBuilding: (0, _initialize.useIsDevBuilding)(),
-                isDevRendering: (0, _devrenderindicator.useIsDevRendering)(),
-                isBuildError: isBuildError,
-                scale: scale
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_draggable.Draggable, {
+                padding: INDICATOR_PADDING,
+                onDragStart: ()=>setOpen(null),
+                position: position,
+                setPosition: (p)=>{
+                    localStorage.setItem(_shared.STORAGE_KEY_POSITION, p);
+                    setPosition(p);
+                },
+                children: /*#__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,
+                    disabled: disabled,
+                    issueCount: issueCount,
+                    onTriggerClick: onTriggerClick,
+                    toggleErrorOverlay: toggleErrorOverlay,
+                    isDevBuilding: (0, _initialize.useIsDevBuilding)(),
+                    isDevRendering: (0, _devrenderindicator.useIsDevRendering)(),
+                    isBuildError: isBuildError,
+                    scale: scale
+                })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_routeinfo.RouteInfo, {
                 isOpen: isRouteInfoOpen,
@@ -386,7 +395,7 @@ function IssueCount(param) {
         ]
     });
 }
-const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: var(--size-36);\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n    white-space: nowrap;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: var(--size-40);\n    height: var(--size-24);\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: var(--size-13);\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: var(--size-8);\n      height: var(--size-8);\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: 4px;\n\n    kbd {\n      width: var(--size-20);\n      height: var(--size-20);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-12);\n      line-height: var(--size-16);\n    }\n  }\n";
+const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: var(--size-36);\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n    white-space: nowrap;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: var(--size-40);\n    height: var(--size-24);\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: var(--size-13);\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: var(--size-8);\n      height: var(--size-8);\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: 4px;\n\n    kbd {\n      width: var(--size-20);\n      height: var(--size-20);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-12);\n      line-height: var(--size-16);\n    }\n  }\n\n  .dev-tools-grabbing {\n    cursor: grabbing;\n\n    > * {\n      pointer-events: none;\n    }\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { CSSProperties, Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './next-logo'\nimport { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'\nimport { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport GearIcon from '../../../icons/gear-icon'\nimport { UserPreferences } from './dev-tools-info/user-preferences'\nimport {\n MENU_CURVE,\n MENU_DURATION_MS,\n useClickOutside,\n useFocusTrap,\n} from './utils'\nimport {\n getInitialPosition,\n type DevToolsScale,\n} from './dev-tools-info/preferences'\n\n// TODO: add E2E tests to cover different scenarios\n\nexport function DevToolsIndicator({\n state,\n errorCount,\n isBuildError,\n setIsErrorOverlayOpen,\n ...props\n}: {\n state: OverlayState\n errorCount: number\n isBuildError: boolean\n setIsErrorOverlayOpen: (\n isErrorOverlayOpen: boolean \| ((prev: boolean) => boolean)\n ) => void\n scale: DevToolsScale\n setScale: (value: DevToolsScale) => void\n}) {\n const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =\n useState(true)\n\n return (\n <DevToolsPopover\n routerType={state.routerType}\n semver={state.versionInfo.installed}\n issueCount={errorCount}\n isStaticRoute={state.staticIndicator}\n hide={() => {\n setIsDevToolsIndicatorVisible(false)\n fetch('/__nextjs_disable_dev_indicator', {\n method: 'POST',\n })\n }}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n isTurbopack={!!process.env.TURBOPACK}\n disabled={state.disableDevIndicator \|\| !isDevToolsIndicatorVisible}\n isBuildError={isBuildError}\n {...props}\n />\n )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\ninterface C {\n closeMenu: () => void\n selectedIndex: number\n setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nconst OVERLAYS = {\n Root: 'root',\n Turbo: 'turbo',\n Route: 'route',\n Preferences: 'preferences',\n} as const\n\nexport type Overlays = (typeof OVERLAYS)[keyof typeof OVERLAYS]\n\nfunction DevToolsPopover({\n routerType,\n disabled,\n issueCount,\n isStaticRoute,\n isTurbopack,\n isBuildError,\n hide,\n setIsErrorOverlayOpen,\n scale,\n setScale,\n}: {\n routerType: 'pages' \| 'app'\n disabled: boolean\n issueCount: number\n isStaticRoute: boolean\n semver: string \| undefined\n isTurbopack: boolean\n isBuildError: boolean\n hide: () => void\n setIsErrorOverlayOpen: (\n isOverlayOpen: boolean \| ((prev: boolean) => boolean)\n ) => void\n scale: DevToolsScale\n setScale: (value: DevToolsScale) => void\n}) {\n const menuRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement \| null>(null)\n\n const [open, setOpen] = useState<Overlays \| null>(null)\n const [position, setPosition] = useState(getInitialPosition())\n const [selectedIndex, setSelectedIndex] = useState(-1)\n\n const isMenuOpen = open === OVERLAYS.Root\n const isTurbopackInfoOpen = open === OVERLAYS.Turbo\n const isRouteInfoOpen = open === OVERLAYS.Route\n const isPreferencesOpen = open === OVERLAYS.Preferences\n\n const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n isMenuOpen,\n {\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: MENU_DURATION_MS,\n }\n )\n\n // Features to make the menu accessible\n useFocusTrap(menuRef, triggerRef, isMenuOpen)\n useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n\n useEffect(() => {\n if (open === null) {\n // Avoid flashing selected state\n const id = setTimeout(() => {\n setSelectedIndex(-1)\n }, MENU_DURATION_MS)\n return () => clearTimeout(id)\n }\n }, [open])\n\n function select(index: number \| 'first' \| 'last') {\n if (index === 'first') {\n setTimeout(() => {\n const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n if (all) {\n const firstIndex = all[0].getAttribute('data-index')\n select(Number(firstIndex))\n }\n })\n return\n }\n\n if (index === 'last') {\n setTimeout(() => {\n const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n if (all) {\n const lastIndex = all.length - 1\n select(lastIndex)\n }\n })\n return\n }\n\n const el = menuRef.current?.querySelector(\n `[data-index=\"${index}\"]`\n ) as HTMLElement\n\n if (el) {\n setSelectedIndex(index)\n el?.focus()\n }\n }\n\n function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n e.preventDefault()\n\n switch (e.key) {\n case 'ArrowDown':\n const next = selectedIndex + 1\n select(next)\n break\n case 'ArrowUp':\n const prev = selectedIndex - 1\n select(prev)\n break\n case 'Home':\n select('first')\n break\n case 'End':\n select('last')\n break\n default:\n break\n }\n }\n\n function openErrorOverlay() {\n setOpen(null)\n if (issueCount > 0) {\n setIsErrorOverlayOpen(true)\n }\n }\n\n function toggleErrorOverlay() {\n setIsErrorOverlayOpen((prev) => !prev)\n }\n\n function openRootMenu() {\n setOpen((prevOpen) => {\n if (prevOpen === null) select('first')\n return OVERLAYS.Root\n })\n }\n\n function onTriggerClick() {\n if (open === OVERLAYS.Root) {\n setOpen(null)\n } else {\n openRootMenu()\n setTimeout(() => {\n select('first')\n })\n }\n }\n\n function closeMenu() {\n // Only close when we were on `Root`,\n // otherwise it will close other overlays\n setOpen((prevOpen) => {\n if (prevOpen === OVERLAYS.Root) {\n return null\n }\n return prevOpen\n })\n }\n\n function handleHideDevtools() {\n setOpen(null)\n hide()\n }\n\n const [vertical, horizontal] = position.split('-', 2)\n const popover = { [vertical]: 'calc(100% + 8px)', [horizontal]: 0 }\n\n return (\n <Toast\n data-nextjs-toast\n style={\n {\n '--animate-out-duration-ms': `${MENU_DURATION_MS}ms`,\n '--animate-out-timing-function': MENU_CURVE,\n boxShadow: 'none',\n zIndex: 2147483647,\n // Reset the toast component's default positions.\n bottom: 'initial',\n left: 'initial',\n [vertical]: '20px',\n [horizontal]: '20px',\n } as CSSProperties\n }\n >\n {/* Trigger /}\n <NextLogo\n ref={triggerRef}\n aria-haspopup=\"menu\"\n aria-expanded={isMenuOpen}\n aria-controls=\"nextjs-dev-tools-menu\"\n aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n data-nextjs-dev-tools-button\n disabled={disabled}\n issueCount={issueCount}\n onTriggerClick={onTriggerClick}\n toggleErrorOverlay={toggleErrorOverlay}\n isDevBuilding={useIsDevBuilding()}\n isDevRendering={useIsDevRendering()}\n isBuildError={isBuildError}\n scale={scale}\n />\n\n {/ Route Info /}\n <RouteInfo\n isOpen={isRouteInfoOpen}\n close={openRootMenu}\n triggerRef={triggerRef}\n style={popover}\n routerType={routerType}\n routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n />\n\n {/ Turbopack Info /}\n <TurbopackInfo\n isOpen={isTurbopackInfoOpen}\n close={openRootMenu}\n triggerRef={triggerRef}\n style={popover}\n />\n\n {/ Preferences /}\n <UserPreferences\n isOpen={isPreferencesOpen}\n close={openRootMenu}\n triggerRef={triggerRef}\n style={popover}\n hide={handleHideDevtools}\n setPosition={setPosition}\n position={position}\n scale={scale}\n setScale={setScale}\n />\n\n {/ Dropdown Menu */}\n {menuMounted && (\n <div\n ref={menuRef}\n id=\"nextjs-dev-tools-menu\"\n role=\"menu\"\n dir=\"ltr\"\n aria-orientation=\"vertical\"\n aria-label=\"Next.js Dev Tools Items\"\n tabIndex={-1}\n className=\"dev-tools-indicator-menu\"\n onKeyDown={onMenuKeydown}\n data-rendered={menuRendered}\n style={popover}\n >\n <Context.Provider\n value={{\n closeMenu,\n selectedIndex,\n setSelectedIndex,\n }}\n >\n <div className=\"dev-tools-indicator-inner\">\n {issueCount > 0 && (\n <MenuItem\n title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}\n index={0}\n label=\"Issues\"\n value={<IssueCount>{issueCount}</IssueCount>}\n onClick={openErrorOverlay}\n />\n )}\n <MenuItem\n title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}\n label=\"Route\"\n index={1}\n value={isStaticRoute ? 'Static' : 'Dynamic'}\n onClick={() => setOpen(OVERLAYS.Route)}\n data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n />\n {isTurbopack ? (\n <MenuItem\n title=\"Turbopack is enabled.\"\n label=\"Turbopack\"\n value=\"Enabled\"\n />\n ) : (\n <MenuItem\n index={2}\n title=\"Learn about Turbopack and how to enable it in your application.\"\n label=\"Try Turbopack\"\n value={<ChevronRight />}\n onClick={() => setOpen(OVERLAYS.Turbo)}\n />\n )}\n </div>\n\n <div className=\"dev-tools-indicator-footer\">\n <MenuItem\n data-preferences\n label=\"Preferences\"\n value={<GearIcon />}\n onClick={() => setOpen(OVERLAYS.Preferences)}\n index={isTurbopack ? 2 : 3}\n />\n </div>\n </Context.Provider>\n </div>\n )}\n </Toast>\n )\n}\n\nfunction ChevronRight() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n fill=\"#666\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z\"\n />\n </svg>\n )\n}\n\nfunction MenuItem({\n index,\n label,\n value,\n onClick,\n href,\n ...props\n}: {\n index?: number\n title?: string\n label: string\n value: React.ReactNode\n href?: string\n onClick?: () => void\n}) {\n const isInteractive =\n typeof onClick === 'function' \|\| typeof href === 'string'\n const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n const selected = selectedIndex === index\n\n function click() {\n if (isInteractive) {\n onClick?.()\n closeMenu()\n if (href) {\n window.open(href, '_blank', 'noopener, noreferrer')\n }\n }\n }\n\n return (\n <div\n className=\"dev-tools-indicator-item\"\n data-index={index}\n data-selected={selected}\n onClick={click}\n // Needs `onMouseMove` instead of enter to work together\n // with keyboard and mouse input\n onMouseMove={() => {\n if (isInteractive && index !== undefined && selectedIndex !== index) {\n setSelectedIndex(index)\n }\n }}\n onMouseLeave={() => setSelectedIndex(-1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n click()\n }\n }}\n role={isInteractive ? 'menuitem' : undefined}\n tabIndex={selected ? 0 : -1}\n {...props}\n >\n <span className=\"dev-tools-indicator-label\">{label}</span>\n <span className=\"dev-tools-indicator-value\">{value}</span>\n </div>\n )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n return (\n <span\n className=\"dev-tools-indicator-issue-count\"\n data-has-issues={children > 0}\n >\n <span className=\"dev-tools-indicator-issue-count-indicator\" />\n {children}\n </span>\n )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = `\n .dev-tools-indicator-menu {\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-menu);\n border-radius: var(--rounded-xl);\n position: absolute;\n font-family: var(--font-stack-sans);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n outline: 0;\n min-width: 248px;\n transition: opacity var(--animate-out-duration-ms)\n var(--animate-out-timing-function);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n .dev-tools-indicator-inner {\n padding: 6px;\n width: 100%;\n }\n\n .dev-tools-indicator-item {\n display: flex;\n align-items: center;\n padding: 8px 6px;\n height: var(--size-36);\n border-radius: 6px;\n text-decoration: none !important;\n user-select: none;\n white-space: nowrap;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: 0;\n }\n }\n\n .dev-tools-indicator-footer {\n background: var(--color-background-200);\n padding: 6px;\n border-top: 1px solid var(--color-gray-400);\n width: 100%;\n }\n\n .dev-tools-indicator-item[data-selected='true'] {\n cursor: pointer;\n background-color: var(--color-gray-200);\n }\n\n .dev-tools-indicator-label {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-1000);\n }\n\n .dev-tools-indicator-value {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-900);\n margin-left: auto;\n }\n\n .dev-tools-indicator-issue-count {\n --color-primary: var(--color-gray-800);\n --color-secondary: var(--color-gray-100);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-width: var(--size-40);\n height: var(--size-24);\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-small);\n padding: 2px;\n color: var(--color-gray-1000);\n border-radius: 128px;\n font-weight: 500;\n font-size: var(--size-13);\n font-variant-numeric: tabular-nums;\n\n &[data-has-issues='true'] {\n --color-primary: var(--color-red-800);\n --color-secondary: var(--color-red-100);\n }\n\n .dev-tools-indicator-issue-count-indicator {\n width: var(--size-8);\n height: var(--size-8);\n background: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-secondary);\n border-radius: 50%;\n }\n }\n\n .dev-tools-indicator-shortcut {\n display: flex;\n gap: 4px;\n\n kbd {\n width: var(--size-20);\n height: var(--size-20);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--rounded-md);\n border: 1px solid var(--color-gray-400);\n font-family: var(--font-stack-sans);\n background: var(--color-background-100);\n color: var(--color-gray-1000);\n text-align: center;\n font-size: var(--size-12);\n line-height: var(--size-16);\n }\n }\n`\n"],"names":["DEV_TOOLS_INDICATOR_STYLES","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","props","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","useState","DevToolsPopover","routerType","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","fetch","method","isTurbopack","process","env","TURBOPACK","disabled","disableDevIndicator","Context","createContext","OVERLAYS","Root","Turbo","Route","Preferences","scale","setScale","menuRef","useRef","triggerRef","open","setOpen","position","setPosition","getInitialPosition","selectedIndex","setSelectedIndex","isMenuOpen","isTurbopackInfoOpen","isRouteInfoOpen","isPreferencesOpen","mounted","menuMounted","rendered","menuRendered","useDelayedRender","enterDelay","exitDelay","MENU_DURATION_MS","useFocusTrap","useClickOutside","closeMenu","useEffect","id","setTimeout","clearTimeout","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","openErrorOverlay","toggleErrorOverlay","openRootMenu","prevOpen","onTriggerClick","handleHideDevtools","vertical","horizontal","split","popover","Toast","data-nextjs-toast","style","MENU_CURVE","boxShadow","zIndex","bottom","left","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","RouteInfo","isOpen","close","routeType","TurbopackInfo","UserPreferences","div","role","dir","aria-orientation","tabIndex","className","onKeyDown","data-rendered","Provider","value","MenuItem","title","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-preferences","GearIcon","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","href","isInteractive","useContext","selected","click","window","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues"],"mappings":";;;;;;;;;;;;;;;IAkeaA,0BAA0B;eAA1BA;;IAxcGC,iBAAiB;eAAjBA;;;;;uBAvBuD;uBACjD;0BACG;4BACQ;oCACC;kCACD;+BACH;2BACJ;mEACL;iCACW;uBAMzB;6BAIA;AAIA,SAASA,kBAAkB,KAejC;IAfiC,IAAA,EAChCC,KAAK,EACLC,UAAU,EACVC,YAAY,EACZC,qBAAqB,EACrB,GAAGC,OAUJ,GAfiC;IAgBhC,MAAM,CAACC,4BAA4BC,8BAA8B,GAC/DC,IAAAA,eAAQ,EAAC;IAEX,qBACE,qBAACC;QACCC,YAAYT,MAAMS,UAAU;QAC5BC,QAAQV,MAAMW,WAAW,CAACC,SAAS;QACnCC,YAAYZ;QACZa,eAAed,MAAMe,eAAe;QACpCC,MAAM;YACJV,8BAA8B;YAC9BW,MAAM,mCAAmC;gBACvCC,QAAQ;YACV;QACF;QACAf,uBAAuBA;QACvBgB,aAAa,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;QACpCC,UAAUvB,MAAMwB,mBAAmB,IAAI,CAACnB;QACxCH,cAAcA;QACb,GAAGE,KAAK;;AAGf;AAUA,MAAMqB,wBAAUC,IAAAA,oBAAa,EAAC,CAAC;AAE/B,MAAMC,WAAW;IACfC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,aAAa;AACf;AAIA,SAASvB,gBAAgB,KAyBxB;IAzBwB,IAAA,EACvBC,UAAU,EACVc,QAAQ,EACRV,UAAU,EACVC,aAAa,EACbK,WAAW,EACXjB,YAAY,EACZc,IAAI,EACJb,qBAAqB,EACrB6B,KAAK,EACLC,QAAQ,EAeT,GAzBwB;IA0BvB,MAAMC,UAAUC,IAAAA,aAAM,EAAiB;IACvC,MAAMC,aAAaD,IAAAA,aAAM,EAA2B;IAEpD,MAAM,CAACE,MAAMC,QAAQ,GAAG/B,IAAAA,eAAQ,EAAkB;IAClD,MAAM,CAACgC,UAAUC,YAAY,GAAGjC,IAAAA,eAAQ,EAACkC,IAAAA,+BAAkB;IAC3D,MAAM,CAACC,eAAeC,iBAAiB,GAAGpC,IAAAA,eAAQ,EAAC,CAAC;IAEpD,MAAMqC,aAAaP,SAASV,SAASC,IAAI;IACzC,MAAMiB,sBAAsBR,SAASV,SAASE,KAAK;IACnD,MAAMiB,kBAAkBT,SAASV,SAASG,KAAK;IAC/C,MAAMiB,oBAAoBV,SAASV,SAASI,WAAW;IAEvD,MAAM,EAAEiB,SAASC,WAAW,EAAEC,UAAUC,YAAY,EAAE,GAAGC,IAAAA,kCAAgB,EACvER,YACA;QACE,6DAA6D;QAC7DS,YAAY;QACZ,yDAAyD;QACzDC,WAAWC,uBAAgB;IAC7B;IAGF,uCAAuC;IACvCC,IAAAA,mBAAY,EAACtB,SAASE,YAAYQ;IAClCa,IAAAA,sBAAe,EAACvB,SAASE,YAAYQ,YAAYc;IAEjDC,IAAAA,gBAAS,EAAC;QACR,IAAItB,SAAS,MAAM;YACjB,gCAAgC;YAChC,MAAMuB,KAAKC,WAAW;gBACpBlB,iBAAiB,CAAC;YACpB,GAAGY,uBAAgB;YACnB,OAAO,IAAMO,aAAaF;QAC5B;IACF,GAAG;QAACvB;KAAK;IAET,SAAS0B,OAAOC,KAAgC;YAuBnC9B;QAtBX,IAAI8B,UAAU,SAAS;YACrBH,WAAW;oBACG3B;gBAAZ,MAAM+B,OAAM/B,mBAAAA,QAAQgC,OAAO,qBAAfhC,iBAAiBiC,gBAAgB,CAAC;gBAC9C,IAAIF,KAAK;oBACP,MAAMG,aAAaH,GAAG,CAAC,EAAE,CAACI,YAAY,CAAC;oBACvCN,OAAOO,OAAOF;gBAChB;YACF;YACA;QACF;QAEA,IAAIJ,UAAU,QAAQ;YACpBH,WAAW;oBACG3B;gBAAZ,MAAM+B,OAAM/B,mBAAAA,QAAQgC,OAAO,qBAAfhC,iBAAiBiC,gBAAgB,CAAC;gBAC9C,IAAIF,KAAK;oBACP,MAAMM,YAAYN,IAAIO,MAAM,GAAG;oBAC/BT,OAAOQ;gBACT;YACF;YACA;QACF;QAEA,MAAME,MAAKvC,mBAAAA,QAAQgC,OAAO,qBAAfhC,iBAAiBwC,aAAa,CACvC,AAAC,kBAAeV,QAAM;QAGxB,IAAIS,IAAI;YACN9B,iBAAiBqB;YACjBS,sBAAAA,GAAIE,KAAK;QACX;IACF;IAEA,SAASC,cAAcC,CAAsC;QAC3DA,EAAEC,cAAc;QAEhB,OAAQD,EAAEE,GAAG;YACX,KAAK;gBACH,MAAMC,OAAOtC,gBAAgB;gBAC7BqB,OAAOiB;gBACP;YACF,KAAK;gBACH,MAAMC,OAAOvC,gBAAgB;gBAC7BqB,OAAOkB;gBACP;YACF,KAAK;gBACHlB,OAAO;gBACP;YACF,KAAK;gBACHA,OAAO;gBACP;YACF;gBACE;QACJ;IACF;IAEA,SAASmB;QACP5C,QAAQ;QACR,IAAIzB,aAAa,GAAG;YAClBV,sBAAsB;QACxB;IACF;IAEA,SAASgF;QACPhF,sBAAsB,CAAC8E,OAAS,CAACA;IACnC;IAEA,SAASG;QACP9C,QAAQ,CAAC+C;YACP,IAAIA,aAAa,MAAMtB,OAAO;YAC9B,OAAOpC,SAASC,IAAI;QACtB;IACF;IAEA,SAAS0D;QACP,IAAIjD,SAASV,SAASC,IAAI,EAAE;YAC1BU,QAAQ;QACV,OAAO;YACL8C;YACAvB,WAAW;gBACTE,OAAO;YACT;QACF;IACF;IAEA,SAASL;QACP,qCAAqC;QACrC,yCAAyC;QACzCpB,QAAQ,CAAC+C;YACP,IAAIA,aAAa1D,SAASC,IAAI,EAAE;gBAC9B,OAAO;YACT;YACA,OAAOyD;QACT;IACF;IAEA,SAASE;QACPjD,QAAQ;QACRtB;IACF;IAEA,MAAM,CAACwE,UAAUC,WAAW,GAAGlD,SAASmD,KAAK,CAAC,KAAK;IACnD,MAAMC,UAAU;QAAE,CAACH,SAAS,EAAE;QAAoB,CAACC,WAAW,EAAE;IAAE;IAElE,qBACE,sBAACG,YAAK;QACJC,mBAAiB;QACjBC,OACE;YACE,6BAA6B,AAAC,KAAEvC,uBAAgB,GAAC;YACjD,iCAAiCwC,iBAAU;YAC3CC,WAAW;YACXC,QAAQ;YACR,iDAAiD;YACjDC,QAAQ;YACRC,MAAM;YACN,CAACX,SAAS,EAAE;YACZ,CAACC,WAAW,EAAE;QAChB;;0BAIF,qBAACW,kBAAQ;gBACPC,KAAKjE;gBACLkE,iBAAc;gBACdC,iBAAe3D;gBACf4D,iBAAc;gBACdC,cAAY,AAAC,KAAE7D,CAAAA,aAAa,UAAU,MAAK,IAAE;gBAC7C8D,8BAA4B;gBAC5BnF,UAAUA;gBACVV,YAAYA;gBACZyE,gBAAgBA;gBAChBH,oBAAoBA;gBACpBwB,eAAeC,IAAAA,4BAAgB;gBAC/BC,gBAAgBC,IAAAA,qCAAiB;gBACjC5G,cAAcA;gBACd8B,OAAOA;;0BAIT,qBAAC+E,oBAAS;gBACRC,QAAQlE;gBACRmE,OAAO7B;gBACPhD,YAAYA;gBACZ0D,OAAOH;gBACPlF,YAAYA;gBACZyG,WAAWpG,gBAAgB,WAAW;;0BAIxC,qBAACqG,4BAAa;gBACZH,QAAQnE;gBACRoE,OAAO7B;gBACPhD,YAAYA;gBACZ0D,OAAOH;;0BAIT,qBAACyB,gCAAe;gBACdJ,QAAQjE;gBACRkE,OAAO7B;gBACPhD,YAAYA;gBACZ0D,OAAOH;gBACP3E,MAAMuE;gBACN/C,aAAaA;gBACbD,UAAUA;gBACVP,OAAOA;gBACPC,UAAUA;;YAIXgB,6BACC,qBAACoE;gBACChB,KAAKnE;gBACL0B,IAAG;gBACH0D,MAAK;gBACLC,KAAI;gBACJC,oBAAiB;gBACjBf,cAAW;gBACXgB,UAAU,CAAC;gBACXC,WAAU;gBACVC,WAAW/C;gBACXgD,iBAAezE;gBACf2C,OAAOH;0BAEP,cAAA,sBAAClE,QAAQoG,QAAQ;oBACfC,OAAO;wBACLpE;wBACAhB;wBACAC;oBACF;;sCAEA,sBAAC0E;4BAAIK,WAAU;;gCACZ7G,aAAa,mBACZ,qBAACkH;oCACCC,OAAO,AAAGnH,aAAW,MAAGA,CAAAA,eAAe,IAAI,UAAU,QAAO,IAAE;oCAC9DmD,OAAO;oCACPiE,OAAM;oCACNH,qBAAO,qBAACI;kDAAYrH;;oCACpBsH,SAASjD;;8CAGb,qBAAC6C;oCACCC,OAAO,AAAC,sBAAmBlH,CAAAA,gBAAgB,WAAW,SAAQ,IAAE;oCAChEmH,OAAM;oCACNjE,OAAO;oCACP8D,OAAOhH,gBAAgB,WAAW;oCAClCqH,SAAS,IAAM7F,QAAQX,SAASG,KAAK;oCACrCsG,0BAAwBtH,gBAAgB,WAAW;;gCAEpDK,4BACC,qBAAC4G;oCACCC,OAAM;oCACNC,OAAM;oCACNH,OAAM;mDAGR,qBAACC;oCACC/D,OAAO;oCACPgE,OAAM;oCACNC,OAAM;oCACNH,qBAAO,qBAACO;oCACRF,SAAS,IAAM7F,QAAQX,SAASE,KAAK;;;;sCAK3C,qBAACwF;4BAAIK,WAAU;sCACb,cAAA,qBAACK;gCACCO,kBAAgB;gCAChBL,OAAM;gCACNH,qBAAO,qBAACS,iBAAQ;gCAChBJ,SAAS,IAAM7F,QAAQX,SAASI,WAAW;gCAC3CiC,OAAO7C,cAAc,IAAI;;;;;;;;AAQzC;AAEA,SAASkH;IACP,qBACE,qBAACG;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;kBAEL,cAAA,qBAACC;YACCD,MAAK;YACLE,UAAS;YACTC,UAAS;YACTC,GAAE;;;AAIV;AAEA,SAASlB,SAAS,KAcjB;IAdiB,IAAA,EAChB/D,KAAK,EACLiE,KAAK,EACLH,KAAK,EACLK,OAAO,EACPe,IAAI,EACJ,GAAG9I,OAQJ,GAdiB;IAehB,MAAM+I,gBACJ,OAAOhB,YAAY,cAAc,OAAOe,SAAS;IACnD,MAAM,EAAExF,SAAS,EAAEhB,aAAa,EAAEC,gBAAgB,EAAE,GAAGyG,IAAAA,iBAAU,EAAC3H;IAClE,MAAM4H,WAAW3G,kBAAkBsB;IAEnC,SAASsF;QACP,IAAIH,eAAe;YACjBhB,2BAAAA;YACAzE;YACA,IAAIwF,MAAM;gBACRK,OAAOlH,IAAI,CAAC6G,MAAM,UAAU;YAC9B;QACF;IACF;IAEA,qBACE,sBAAC7B;QACCK,WAAU;QACV8B,cAAYxF;QACZyF,iBAAeJ;QACflB,SAASmB;QACT,wDAAwD;QACxD,gCAAgC;QAChCI,aAAa;YACX,IAAIP,iBAAiBnF,UAAU2F,aAAajH,kBAAkBsB,OAAO;gBACnErB,iBAAiBqB;YACnB;QACF;QACA4F,cAAc,IAAMjH,iBAAiB,CAAC;QACtCgF,WAAW,CAAC9C;YACV,IAAIA,EAAEE,GAAG,KAAK,WAAWF,EAAEE,GAAG,KAAK,KAAK;gBACtCuE;YACF;QACF;QACAhC,MAAM6B,gBAAgB,aAAaQ;QACnClC,UAAU4B,WAAW,IAAI,CAAC;QACzB,GAAGjJ,KAAK;;0BAET,qBAACyJ;gBAAKnC,WAAU;0BAA6BO;;0BAC7C,qBAAC4B;gBAAKnC,WAAU;0BAA6BI;;;;AAGnD;AAEA,SAASI,WAAW,KAAkC;IAAlC,IAAA,EAAE4B,QAAQ,EAAwB,GAAlC;IAClB,qBACE,sBAACD;QACCnC,WAAU;QACVqC,mBAAiBD,WAAW;;0BAE5B,qBAACD;gBAAKnC,WAAU;;YACfoC;;;AAGP;AAIO,MAAMhK,6BAA8B","ignoreList":[0]}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { CSSProperties, Dispatch, SetStateAction } from 'react'\nimport { STORAGE_KEY_POSITION, type OverlayState } from '../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './next-logo'\nimport { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'\nimport { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport GearIcon from '../../../icons/gear-icon'\nimport { UserPreferences } from './dev-tools-info/user-preferences'\nimport {\n MENU_CURVE,\n MENU_DURATION_MS,\n useClickOutside,\n useFocusTrap,\n} from './utils'\nimport {\n getInitialPosition,\n type DevToolsScale,\n} from './dev-tools-info/preferences'\nimport { Draggable } from './draggable'\n\n// TODO: add E2E tests to cover different scenarios\n\nexport function DevToolsIndicator({\n state,\n errorCount,\n isBuildError,\n setIsErrorOverlayOpen,\n ...props\n}: {\n state: OverlayState\n errorCount: number\n isBuildError: boolean\n setIsErrorOverlayOpen: (\n isErrorOverlayOpen: boolean \| ((prev: boolean) => boolean)\n ) => void\n scale: DevToolsScale\n setScale: (value: DevToolsScale) => void\n}) {\n const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =\n useState(true)\n\n return (\n <DevToolsPopover\n routerType={state.routerType}\n semver={state.versionInfo.installed}\n issueCount={errorCount}\n isStaticRoute={state.staticIndicator}\n hide={() => {\n setIsDevToolsIndicatorVisible(false)\n fetch('/__nextjs_disable_dev_indicator', {\n method: 'POST',\n })\n }}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n isTurbopack={!!process.env.TURBOPACK}\n disabled={state.disableDevIndicator \|\| !isDevToolsIndicatorVisible}\n isBuildError={isBuildError}\n {...props}\n />\n )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\ninterface C {\n closeMenu: () => void\n selectedIndex: number\n setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nconst OVERLAYS = {\n Root: 'root',\n Turbo: 'turbo',\n Route: 'route',\n Preferences: 'preferences',\n} as const\n\nexport type Overlays = (typeof OVERLAYS)[keyof typeof OVERLAYS]\n\nconst INDICATOR_PADDING = 20\n\nfunction DevToolsPopover({\n routerType,\n disabled,\n issueCount,\n isStaticRoute,\n isTurbopack,\n isBuildError,\n hide,\n setIsErrorOverlayOpen,\n scale,\n setScale,\n}: {\n routerType: 'pages' \| 'app'\n disabled: boolean\n issueCount: number\n isStaticRoute: boolean\n semver: string \| undefined\n isTurbopack: boolean\n isBuildError: boolean\n hide: () => void\n setIsErrorOverlayOpen: (\n isOverlayOpen: boolean \| ((prev: boolean) => boolean)\n ) => void\n scale: DevToolsScale\n setScale: (value: DevToolsScale) => void\n}) {\n const menuRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement \| null>(null)\n\n const [open, setOpen] = useState<Overlays \| null>(null)\n const [position, setPosition] = useState(getInitialPosition())\n const [selectedIndex, setSelectedIndex] = useState(-1)\n\n const isMenuOpen = open === OVERLAYS.Root\n const isTurbopackInfoOpen = open === OVERLAYS.Turbo\n const isRouteInfoOpen = open === OVERLAYS.Route\n const isPreferencesOpen = open === OVERLAYS.Preferences\n\n const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n isMenuOpen,\n {\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: MENU_DURATION_MS,\n }\n )\n\n // Features to make the menu accessible\n useFocusTrap(menuRef, triggerRef, isMenuOpen)\n useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n\n useEffect(() => {\n if (open === null) {\n // Avoid flashing selected state\n const id = setTimeout(() => {\n setSelectedIndex(-1)\n }, MENU_DURATION_MS)\n return () => clearTimeout(id)\n }\n }, [open])\n\n function select(index: number \| 'first' \| 'last') {\n if (index === 'first') {\n setTimeout(() => {\n const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n if (all) {\n const firstIndex = all[0].getAttribute('data-index')\n select(Number(firstIndex))\n }\n })\n return\n }\n\n if (index === 'last') {\n setTimeout(() => {\n const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n if (all) {\n const lastIndex = all.length - 1\n select(lastIndex)\n }\n })\n return\n }\n\n const el = menuRef.current?.querySelector(\n `[data-index=\"${index}\"]`\n ) as HTMLElement\n\n if (el) {\n setSelectedIndex(index)\n el?.focus()\n }\n }\n\n function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n e.preventDefault()\n\n switch (e.key) {\n case 'ArrowDown':\n const next = selectedIndex + 1\n select(next)\n break\n case 'ArrowUp':\n const prev = selectedIndex - 1\n select(prev)\n break\n case 'Home':\n select('first')\n break\n case 'End':\n select('last')\n break\n default:\n break\n }\n }\n\n function openErrorOverlay() {\n setOpen(null)\n if (issueCount > 0) {\n setIsErrorOverlayOpen(true)\n }\n }\n\n function toggleErrorOverlay() {\n setIsErrorOverlayOpen((prev) => !prev)\n }\n\n function openRootMenu() {\n setOpen((prevOpen) => {\n if (prevOpen === null) select('first')\n return OVERLAYS.Root\n })\n }\n\n function onTriggerClick() {\n if (open === OVERLAYS.Root) {\n setOpen(null)\n } else {\n openRootMenu()\n setTimeout(() => {\n select('first')\n })\n }\n }\n\n function closeMenu() {\n // Only close when we were on `Root`,\n // otherwise it will close other overlays\n setOpen((prevOpen) => {\n if (prevOpen === OVERLAYS.Root) {\n return null\n }\n return prevOpen\n })\n }\n\n function handleHideDevtools() {\n setOpen(null)\n hide()\n }\n\n const [vertical, horizontal] = position.split('-', 2)\n const popover = { [vertical]: 'calc(100% + 8px)', [horizontal]: 0 }\n\n return (\n <Toast\n data-nextjs-toast\n style={\n {\n '--animate-out-duration-ms': `${MENU_DURATION_MS}ms`,\n '--animate-out-timing-function': MENU_CURVE,\n boxShadow: 'none',\n zIndex: 2147483647,\n [vertical]: `${INDICATOR_PADDING}px`,\n [horizontal]: `${INDICATOR_PADDING}px`,\n } as CSSProperties\n }\n >\n <Draggable\n padding={INDICATOR_PADDING}\n onDragStart={() => setOpen(null)}\n position={position}\n setPosition={(p) => {\n localStorage.setItem(STORAGE_KEY_POSITION, p)\n setPosition(p)\n }}\n >\n {/* Trigger /}\n <NextLogo\n ref={triggerRef}\n aria-haspopup=\"menu\"\n aria-expanded={isMenuOpen}\n aria-controls=\"nextjs-dev-tools-menu\"\n aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n data-nextjs-dev-tools-button\n disabled={disabled}\n issueCount={issueCount}\n onTriggerClick={onTriggerClick}\n toggleErrorOverlay={toggleErrorOverlay}\n isDevBuilding={useIsDevBuilding()}\n isDevRendering={useIsDevRendering()}\n isBuildError={isBuildError}\n scale={scale}\n />\n </Draggable>\n\n {/ Route Info /}\n <RouteInfo\n isOpen={isRouteInfoOpen}\n close={openRootMenu}\n triggerRef={triggerRef}\n style={popover}\n routerType={routerType}\n routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n />\n\n {/ Turbopack Info /}\n <TurbopackInfo\n isOpen={isTurbopackInfoOpen}\n close={openRootMenu}\n triggerRef={triggerRef}\n style={popover}\n />\n\n {/ Preferences /}\n <UserPreferences\n isOpen={isPreferencesOpen}\n close={openRootMenu}\n triggerRef={triggerRef}\n style={popover}\n hide={handleHideDevtools}\n setPosition={setPosition}\n position={position}\n scale={scale}\n setScale={setScale}\n />\n\n {/ Dropdown Menu /}\n {menuMounted && (\n <div\n ref={menuRef}\n id=\"nextjs-dev-tools-menu\"\n role=\"menu\"\n dir=\"ltr\"\n aria-orientation=\"vertical\"\n aria-label=\"Next.js Dev Tools Items\"\n tabIndex={-1}\n className=\"dev-tools-indicator-menu\"\n onKeyDown={onMenuKeydown}\n data-rendered={menuRendered}\n style={popover}\n >\n <Context.Provider\n value={{\n closeMenu,\n selectedIndex,\n setSelectedIndex,\n }}\n >\n <div className=\"dev-tools-indicator-inner\">\n {issueCount > 0 && (\n <MenuItem\n title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}\n index={0}\n label=\"Issues\"\n value={<IssueCount>{issueCount}</IssueCount>}\n onClick={openErrorOverlay}\n />\n )}\n <MenuItem\n title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}\n label=\"Route\"\n index={1}\n value={isStaticRoute ? 'Static' : 'Dynamic'}\n onClick={() => setOpen(OVERLAYS.Route)}\n data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n />\n {isTurbopack ? (\n <MenuItem\n title=\"Turbopack is enabled.\"\n label=\"Turbopack\"\n value=\"Enabled\"\n />\n ) : (\n <MenuItem\n index={2}\n title=\"Learn about Turbopack and how to enable it in your application.\"\n label=\"Try Turbopack\"\n value={<ChevronRight />}\n onClick={() => setOpen(OVERLAYS.Turbo)}\n />\n )}\n </div>\n\n <div className=\"dev-tools-indicator-footer\">\n <MenuItem\n data-preferences\n label=\"Preferences\"\n value={<GearIcon />}\n onClick={() => setOpen(OVERLAYS.Preferences)}\n index={isTurbopack ? 2 : 3}\n />\n </div>\n </Context.Provider>\n </div>\n )}\n </Toast>\n )\n}\n\nfunction ChevronRight() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n fill=\"#666\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z\"\n />\n </svg>\n )\n}\n\nfunction MenuItem({\n index,\n label,\n value,\n onClick,\n href,\n ...props\n}: {\n index?: number\n title?: string\n label: string\n value: React.ReactNode\n href?: string\n onClick?: () => void\n}) {\n const isInteractive =\n typeof onClick === 'function' \|\| typeof href === 'string'\n const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n const selected = selectedIndex === index\n\n function click() {\n if (isInteractive) {\n onClick?.()\n closeMenu()\n if (href) {\n window.open(href, '_blank', 'noopener, noreferrer')\n }\n }\n }\n\n return (\n <div\n className=\"dev-tools-indicator-item\"\n data-index={index}\n data-selected={selected}\n onClick={click}\n // Needs `onMouseMove` instead of enter to work together\n // with keyboard and mouse input\n onMouseMove={() => {\n if (isInteractive && index !== undefined && selectedIndex !== index) {\n setSelectedIndex(index)\n }\n }}\n onMouseLeave={() => setSelectedIndex(-1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n click()\n }\n }}\n role={isInteractive ? 'menuitem' : undefined}\n tabIndex={selected ? 0 : -1}\n {...props}\n >\n <span className=\"dev-tools-indicator-label\">{label}</span>\n <span className=\"dev-tools-indicator-value\">{value}</span>\n </div>\n )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n return (\n <span\n className=\"dev-tools-indicator-issue-count\"\n data-has-issues={children > 0}\n >\n <span className=\"dev-tools-indicator-issue-count-indicator\" />\n {children}\n </span>\n )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = `\n .dev-tools-indicator-menu {\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-menu);\n border-radius: var(--rounded-xl);\n position: absolute;\n font-family: var(--font-stack-sans);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n outline: 0;\n min-width: 248px;\n transition: opacity var(--animate-out-duration-ms)\n var(--animate-out-timing-function);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n .dev-tools-indicator-inner {\n padding: 6px;\n width: 100%;\n }\n\n .dev-tools-indicator-item {\n display: flex;\n align-items: center;\n padding: 8px 6px;\n height: var(--size-36);\n border-radius: 6px;\n text-decoration: none !important;\n user-select: none;\n white-space: nowrap;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: 0;\n }\n }\n\n .dev-tools-indicator-footer {\n background: var(--color-background-200);\n padding: 6px;\n border-top: 1px solid var(--color-gray-400);\n width: 100%;\n }\n\n .dev-tools-indicator-item[data-selected='true'] {\n cursor: pointer;\n background-color: var(--color-gray-200);\n }\n\n .dev-tools-indicator-label {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-1000);\n }\n\n .dev-tools-indicator-value {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-900);\n margin-left: auto;\n }\n\n .dev-tools-indicator-issue-count {\n --color-primary: var(--color-gray-800);\n --color-secondary: var(--color-gray-100);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-width: var(--size-40);\n height: var(--size-24);\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-small);\n padding: 2px;\n color: var(--color-gray-1000);\n border-radius: 128px;\n font-weight: 500;\n font-size: var(--size-13);\n font-variant-numeric: tabular-nums;\n\n &[data-has-issues='true'] {\n --color-primary: var(--color-red-800);\n --color-secondary: var(--color-red-100);\n }\n\n .dev-tools-indicator-issue-count-indicator {\n width: var(--size-8);\n height: var(--size-8);\n background: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-secondary);\n border-radius: 50%;\n }\n }\n\n .dev-tools-indicator-shortcut {\n display: flex;\n gap: 4px;\n\n kbd {\n width: var(--size-20);\n height: var(--size-20);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--rounded-md);\n border: 1px solid var(--color-gray-400);\n font-family: var(--font-stack-sans);\n background: var(--color-background-100);\n color: var(--color-gray-1000);\n text-align: center;\n font-size: var(--size-12);\n line-height: var(--size-16);\n }\n }\n\n .dev-tools-grabbing {\n cursor: grabbing;\n\n > {\n pointer-events: none;\n }\n }\n`\n"],"names":["DEV_TOOLS_INDICATOR_STYLES","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","props","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","useState","DevToolsPopover","routerType","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","fetch","method","isTurbopack","process","env","TURBOPACK","disabled","disableDevIndicator","Context","createContext","OVERLAYS","Root","Turbo","Route","Preferences","INDICATOR_PADDING","scale","setScale","menuRef","useRef","triggerRef","open","setOpen","position","setPosition","getInitialPosition","selectedIndex","setSelectedIndex","isMenuOpen","isTurbopackInfoOpen","isRouteInfoOpen","isPreferencesOpen","mounted","menuMounted","rendered","menuRendered","useDelayedRender","enterDelay","exitDelay","MENU_DURATION_MS","useFocusTrap","useClickOutside","closeMenu","useEffect","id","setTimeout","clearTimeout","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","openErrorOverlay","toggleErrorOverlay","openRootMenu","prevOpen","onTriggerClick","handleHideDevtools","vertical","horizontal","split","popover","Toast","data-nextjs-toast","style","MENU_CURVE","boxShadow","zIndex","Draggable","padding","onDragStart","p","localStorage","setItem","STORAGE_KEY_POSITION","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","RouteInfo","isOpen","close","routeType","TurbopackInfo","UserPreferences","div","role","dir","aria-orientation","tabIndex","className","onKeyDown","data-rendered","Provider","value","MenuItem","title","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-preferences","GearIcon","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","href","isInteractive","useContext","selected","click","window","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues"],"mappings":"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","ignoreList":[0]}

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/draggable.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+interface Point {
+    x: number;
+    y: number;
+}
+type Corners = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Corner {
+    corner: Corners;
+    translation: Point;
+}
+export declare function Draggable({ children, padding, position: currentCorner, setPosition: setCurrentCorner, onDragStart, }: {
+    children: React.ReactElement;
+    position: Corners;
+    padding: number;
+    setPosition: (position: Corners) => void;
+    onDragStart?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+interface UseDragOptions {
+    onDragStart?: () => void;
+    onDrag?: (translation: Point) => void;
+    onDragEnd?: (translation: Point, velocity: Point) => void;
+    onAnimationEnd?: (corner: Corner) => void;
+    threshold: number;
+}
+export declare function useDrag(options: UseDragOptions): {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    onPointerDown: (e: React.PointerEvent) => void;
+    animate: (corner: Corner) => void;
+};
+export {};

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/draggable.js ADDED Viewed

@@ -0,0 +1,271 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    Draggable: null,
+    useDrag: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Draggable: function() {
+        return Draggable;
+    },
+    useDrag: function() {
+        return useDrag;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+function Draggable(param) {
+    let { children, padding, position: currentCorner, setPosition: setCurrentCorner, onDragStart } = param;
+    const { ref, animate, ...drag } = useDrag({
+        threshold: 5,
+        onDragStart,
+        onDragEnd,
+        onAnimationEnd
+    });
+    function onDragEnd(translation, velocity) {
+        const projectedPosition = {
+            x: translation.x + project(velocity.x),
+            y: translation.y + project(velocity.y)
+        };
+        const nearestCorner = getNearestCorner(projectedPosition);
+        animate(nearestCorner);
+    }
+    function onAnimationEnd(param) {
+        let { corner } = param;
+        // Unset drag translation
+        setTimeout(()=>{
+            var _ref_current;
+            (_ref_current = ref.current) == null ? void 0 : _ref_current.style.removeProperty('translate');
+            setCurrentCorner(corner);
+        });
+    }
+    function getNearestCorner(param) {
+        let { x, y } = param;
+        const allCorners = getCorners();
+        const distances = Object.entries(allCorners).map((param)=>{
+            let [key, translation] = param;
+            const distance = Math.sqrt((x - translation.x) ** 2 + (y - translation.y) ** 2);
+            return {
+                key,
+                distance
+            };
+        });
+        const min = Math.min(...distances.map((d)=>d.distance));
+        const nearest = distances.find((d)=>d.distance === min);
+        if (!nearest) {
+            // Safety fallback
+            return {
+                corner: currentCorner,
+                translation: allCorners[currentCorner]
+            };
+        }
+        return {
+            translation: allCorners[nearest.key],
+            corner: nearest.key
+        };
+    }
+    function getCorners() {
+        var _ref_current, _ref_current1;
+        const offset = padding * 2;
+        const triggerWidth = ((_ref_current = ref.current) == null ? void 0 : _ref_current.offsetWidth) || 0;
+        const triggerHeight = ((_ref_current1 = ref.current) == null ? void 0 : _ref_current1.offsetHeight) || 0;
+        function getAbsolutePosition(corner) {
+            const isRight = corner.includes('right');
+            const isBottom = corner.includes('bottom');
+            return {
+                x: isRight ? window.innerWidth - offset - triggerWidth : 0,
+                y: isBottom ? window.innerHeight - offset - triggerHeight : 0
+            };
+        }
+        const basePosition = getAbsolutePosition(currentCorner);
+        // Calculate all corner positions relative to the current corner
+        return {
+            'top-left': {
+                x: 0 - basePosition.x,
+                y: 0 - basePosition.y
+            },
+            'top-right': {
+                x: window.innerWidth - offset - triggerWidth - basePosition.x,
+                y: 0 - basePosition.y
+            },
+            'bottom-left': {
+                x: 0 - basePosition.x,
+                y: window.innerHeight - offset - triggerHeight - basePosition.y
+            },
+            'bottom-right': {
+                x: window.innerWidth - offset - triggerWidth - basePosition.x,
+                y: window.innerHeight - offset - triggerHeight - basePosition.y
+            }
+        };
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        ref: ref,
+        ...drag,
+        style: {
+            touchAction: 'none'
+        },
+        children: children
+    });
+}
+function useDrag(options) {
+    const ref = (0, _react.useRef)(null);
+    const state = (0, _react.useRef)('idle');
+    const origin = (0, _react.useRef)({
+        x: 0,
+        y: 0
+    });
+    const translation = (0, _react.useRef)({
+        x: 0,
+        y: 0
+    });
+    const lastTimestamp = (0, _react.useRef)(0);
+    const velocities = (0, _react.useRef)([]);
+    function set(position) {
+        if (ref.current) {
+            translation.current = position;
+            ref.current.style.translate = position.x + "px " + position.y + "px";
+        }
+    }
+    function animate(corner) {
+        const el = ref.current;
+        if (el === null) return;
+        function listener(e) {
+            if (e.propertyName === 'translate') {
+                options.onAnimationEnd == null ? void 0 : options.onAnimationEnd.call(options, corner);
+                translation.current = {
+                    x: 0,
+                    y: 0
+                };
+                el.style.transition = '';
+                el.removeEventListener('transitionend', listener);
+            }
+        }
+        // Generated from https://www.easing.dev/spring
+        el.style.transition = 'translate 491.22ms var(--timing-bounce)';
+        el.addEventListener('transitionend', listener);
+        set(corner.translation);
+    }
+    function onClick(e) {
+        if (state.current === 'drag-end') {
+            var _ref_current;
+            e.preventDefault();
+            e.stopPropagation();
+            state.current = 'idle';
+            (_ref_current = ref.current) == null ? void 0 : _ref_current.removeEventListener('click', onClick);
+        }
+    }
+    function onPointerDown(e) {
+        var _ref_current;
+        origin.current = {
+            x: e.clientX,
+            y: e.clientY
+        };
+        state.current = 'press';
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        (_ref_current = ref.current) == null ? void 0 : _ref_current.addEventListener('click', onClick);
+    }
+    function onPointerMove(e) {
+        if (state.current === 'press') {
+            const dx = e.clientX - origin.current.x;
+            const dy = e.clientY - origin.current.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance >= options.threshold) {
+                var _ref_current, _ref_current1;
+                state.current = 'drag';
+                (_ref_current = ref.current) == null ? void 0 : _ref_current.setPointerCapture(e.pointerId);
+                (_ref_current1 = ref.current) == null ? void 0 : _ref_current1.classList.add('dev-tools-grabbing');
+                options.onDragStart == null ? void 0 : options.onDragStart.call(options);
+            }
+        }
+        if (state.current !== 'drag') return;
+        const currentPosition = {
+            x: e.clientX,
+            y: e.clientY
+        };
+        const dx = currentPosition.x - origin.current.x;
+        const dy = currentPosition.y - origin.current.y;
+        origin.current = currentPosition;
+        const newTranslation = {
+            x: translation.current.x + dx,
+            y: translation.current.y + dy
+        };
+        set(newTranslation);
+        // Keep a history of recent positions for velocity calculation
+        // Only store points that are at least 10ms apart to avoid too many samples
+        const now = Date.now();
+        const shouldAddToHistory = now - lastTimestamp.current >= 10;
+        if (shouldAddToHistory) {
+            velocities.current = [
+                ...velocities.current.slice(-5),
+                {
+                    position: currentPosition,
+                    timestamp: now
+                }
+            ];
+        }
+        lastTimestamp.current = now;
+        options.onDrag == null ? void 0 : options.onDrag.call(options, translation.current);
+    }
+    function onPointerUp(e) {
+        var _ref_current, _ref_current1;
+        state.current = state.current === 'drag' ? 'drag-end' : 'idle';
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        const velocity = calculateVelocity(velocities.current);
+        velocities.current = [];
+        (_ref_current = ref.current) == null ? void 0 : _ref_current.classList.remove('dev-tools-grabbing');
+        (_ref_current1 = ref.current) == null ? void 0 : _ref_current1.releasePointerCapture(e.pointerId);
+        options.onDragEnd == null ? void 0 : options.onDragEnd.call(options, translation.current, velocity);
+    }
+    return {
+        ref,
+        onPointerDown,
+        animate
+    };
+}
+function calculateVelocity(history) {
+    if (history.length < 2) {
+        return {
+            x: 0,
+            y: 0
+        };
+    }
+    const oldestPoint = history[0];
+    const latestPoint = history[history.length - 1];
+    const timeDelta = latestPoint.timestamp - oldestPoint.timestamp;
+    if (timeDelta === 0) {
+        return {
+            x: 0,
+            y: 0
+        };
+    }
+    // Calculate pixels per millisecond
+    const velocityX = (latestPoint.position.x - oldestPoint.position.x) / timeDelta;
+    const velocityY = (latestPoint.position.y - oldestPoint.position.y) / timeDelta;
+    // Convert to pixels per second for more intuitive values
+    return {
+        x: velocityX * 1000,
+        y: velocityY * 1000
+    };
+}
+function project(initialVelocity, decelerationRate) {
+    if (decelerationRate === void 0) decelerationRate = 0.999;
+    return initialVelocity / 1000 * decelerationRate / (1 - decelerationRate);
+}
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+//# sourceMappingURL=draggable.js.map