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

package/dist/esm/build/index.js

@@ -308,7 +308,7 @@ export default async function build(dir, reactProductionProfiling = false, debug
         const nextBuildSpan = trace('next-build', undefined, {
             buildMode: experimentalBuildMode,
             isTurboBuild: String(isTurbopack),
-            version: "15.4.0-canary.19"
+            version: "15.4.0-canary.20"
         });
         NextBuildContext.nextBuildSpan = nextBuildSpan;
         NextBuildContext.dir = dir;
@@ -690,7 +690,7 @@ export default async function build(dir, reactProductionProfiling = false, debug
             // Files outside of the distDir can be "type": "module"
             await writeFileUtf8(path.join(distDir, 'package.json'), '{"type": "commonjs"}');
             // These are written to distDir, so they need to come after creating and cleaning distDr.
-            await recordFrameworkVersion("15.4.0-canary.19");
+            await recordFrameworkVersion("15.4.0-canary.20");
             await updateBuildDiagnostics({
                 buildStage: 'start'
             });

package/dist/esm/build/swc/index.js

@@ -11,7 +11,7 @@ import { isDeepStrictEqual } from 'util';
 import { getDefineEnv } from '../webpack/plugins/define-env-plugin';
 import { getReactCompilerLoader } from '../get-babel-loader-config';
 import { TurbopackInternalError } from '../../shared/lib/turbopack/utils';
-const nextVersion = "15.4.0-canary.19";
+const nextVersion = "15.4.0-canary.20";
 const ArchName = arch();
 const PlatformName = platform();
 function infoLog(...args) {

package/dist/esm/build/webpack-config.js

@@ -1554,7 +1554,7 @@ export default async function getBaseWebpackConfig(dir, { buildId, encryptionKey
             isClient && new 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: {
@@ -1731,7 +1731,7 @@ export default async function getBaseWebpackConfig(dir, { buildId, encryptionKey
         //  - 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.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/esm/client/app-bootstrap.js

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

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { STORAGE_KEY_POSITION } from '../../../../shared';
 import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { Toast } from '../../toast';
 import { NextLogo } from './next-logo';
@@ -11,6 +12,7 @@ import GearIcon from '../../../icons/gear-icon';
 import { UserPreferences } from './dev-tools-info/user-preferences';
 import { MENU_CURVE, MENU_DURATION_MS, useClickOutside, useFocusTrap } from './utils';
 import { getInitialPosition } from './dev-tools-info/preferences';
+import { Draggable } from './draggable';
 // TODO: add E2E tests to cover different scenarios
 export function DevToolsIndicator(param) {
     let { state, errorCount, isBuildError, setIsErrorOverlayOpen, ...props } = param;
@@ -40,6 +42,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 = useRef(null);
@@ -173,28 +176,34 @@ function DevToolsPopover(param) {
             '--animate-out-timing-function': 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__*/ _jsx(NextLogo, {
-                ref: triggerRef,
-                "aria-haspopup": "menu",
-                "aria-expanded": isMenuOpen,
-                "aria-controls": "nextjs-dev-tools-menu",
-                "aria-label": "" + (isMenuOpen ? 'Close' : 'Open') + " Next.js Dev Tools",
-                "data-nextjs-dev-tools-button": true,
-                disabled: disabled,
-                issueCount: issueCount,
-                onTriggerClick: onTriggerClick,
-                toggleErrorOverlay: toggleErrorOverlay,
-                isDevBuilding: useIsDevBuilding(),
-                isDevRendering: useIsDevRendering(),
-                isBuildError: isBuildError,
-                scale: scale
+            /*#__PURE__*/ _jsx(Draggable, {
+                padding: INDICATOR_PADDING,
+                onDragStart: ()=>setOpen(null),
+                position: position,
+                setPosition: (p)=>{
+                    localStorage.setItem(STORAGE_KEY_POSITION, p);
+                    setPosition(p);
+                },
+                children: /*#__PURE__*/ _jsx(NextLogo, {
+                    ref: triggerRef,
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isMenuOpen,
+                    "aria-controls": "nextjs-dev-tools-menu",
+                    "aria-label": "" + (isMenuOpen ? 'Close' : 'Open') + " Next.js Dev Tools",
+                    "data-nextjs-dev-tools-button": true,
+                    disabled: disabled,
+                    issueCount: issueCount,
+                    onTriggerClick: onTriggerClick,
+                    toggleErrorOverlay: toggleErrorOverlay,
+                    isDevBuilding: useIsDevBuilding(),
+                    isDevRendering: useIsDevRendering(),
+                    isBuildError: isBuildError,
+                    scale: scale
+                })
             }),
             /*#__PURE__*/ _jsx(RouteInfo, {
                 isOpen: isRouteInfoOpen,
@@ -365,6 +374,6 @@ function IssueCount(param) {
     });
 }
 //////////////////////////////////////////////////////////////////////////////////////
-export 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 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";
 
 //# sourceMappingURL=dev-tools-indicator.js.map

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

@@ -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":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","GearIcon","UserPreferences","MENU_CURVE","MENU_DURATION_MS","useClickOutside","useFocusTrap","getInitialPosition","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","props","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","DevToolsPopover","routerType","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","fetch","method","isTurbopack","process","env","TURBOPACK","disabled","disableDevIndicator","Context","OVERLAYS","Root","Turbo","Route","Preferences","scale","setScale","menuRef","triggerRef","open","setOpen","position","setPosition","selectedIndex","setSelectedIndex","isMenuOpen","isTurbopackInfoOpen","isRouteInfoOpen","isPreferencesOpen","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","closeMenu","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","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","isDevBuilding","isDevRendering","isOpen","close","routeType","div","role","dir","aria-orientation","tabIndex","className","onKeyDown","data-rendered","Provider","value","MenuItem","title","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-preferences","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","href","isInteractive","selected","click","window","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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","ignoreList":[0]}
+{"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":["STORAGE_KEY_POSITION","useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","GearIcon","UserPreferences","MENU_CURVE","MENU_DURATION_MS","useClickOutside","useFocusTrap","getInitialPosition","Draggable","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","props","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","DevToolsPopover","routerType","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","fetch","method","isTurbopack","process","env","TURBOPACK","disabled","disableDevIndicator","Context","OVERLAYS","Root","Turbo","Route","Preferences","INDICATOR_PADDING","scale","setScale","menuRef","triggerRef","open","setOpen","position","setPosition","selectedIndex","setSelectedIndex","isMenuOpen","isTurbopackInfoOpen","isRouteInfoOpen","isPreferencesOpen","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","closeMenu","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","data-nextjs-toast","style","boxShadow","zIndex","padding","onDragStart","p","localStorage","setItem","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","isDevBuilding","isDevRendering","isOpen","close","routeType","div","role","dir","aria-orientation","tabIndex","className","onKeyDown","data-rendered","Provider","value","MenuItem","title","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-preferences","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","href","isInteractive","selected","click","window","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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","ignoreList":[0]}

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

@@ -0,0 +1,243 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+export 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__*/ _jsx("div", {
+        ref: ref,
+        ...drag,
+        style: {
+            touchAction: 'none'
+        },
+        children: children
+    });
+}
+export function useDrag(options) {
+    const ref = useRef(null);
+    const state = useRef('idle');
+    const origin = useRef({
+        x: 0,
+        y: 0
+    });
+    const translation = useRef({
+        x: 0,
+        y: 0
+    });
+    const lastTimestamp = useRef(0);
+    const velocities = 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);
+}
+
+//# sourceMappingURL=draggable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/draggable.tsx"],"sourcesContent":["import { useRef } from 'react'\n\ninterface Point {\n  x: number\n  y: number\n}\n\ntype Corners = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n\ninterface Corner {\n  corner: Corners\n  translation: Point\n}\n\nexport function Draggable({\n  children,\n  padding,\n  position: currentCorner,\n  setPosition: setCurrentCorner,\n  onDragStart,\n}: {\n  children: React.ReactElement\n  position: Corners\n  padding: number\n  setPosition: (position: Corners) => void\n  onDragStart?: () => void\n}) {\n  const { ref, animate, ...drag } = useDrag({\n    threshold: 5,\n    onDragStart,\n    onDragEnd,\n    onAnimationEnd,\n  })\n\n  function onDragEnd(translation: Point, velocity: Point) {\n    const projectedPosition = {\n      x: translation.x + project(velocity.x),\n      y: translation.y + project(velocity.y),\n    }\n    const nearestCorner = getNearestCorner(projectedPosition)\n    animate(nearestCorner)\n  }\n\n  function onAnimationEnd({ corner }: Corner) {\n    // Unset drag translation\n    setTimeout(() => {\n      ref.current?.style.removeProperty('translate')\n      setCurrentCorner(corner)\n    })\n  }\n\n  function getNearestCorner({ x, y }: Point): Corner {\n    const allCorners = getCorners()\n    const distances = Object.entries(allCorners).map(([key, translation]) => {\n      const distance = Math.sqrt(\n        (x - translation.x) ** 2 + (y - translation.y) ** 2\n      )\n      return { key, distance }\n    })\n    const min = Math.min(...distances.map((d) => d.distance))\n    const nearest = distances.find((d) => d.distance === min)\n    if (!nearest) {\n      // Safety fallback\n      return { corner: currentCorner, translation: allCorners[currentCorner] }\n    }\n    return {\n      translation: allCorners[nearest.key as Corners],\n      corner: nearest.key as Corners,\n    }\n  }\n\n  function getCorners(): Record<Corners, Point> {\n    const offset = padding * 2\n    const triggerWidth = ref.current?.offsetWidth || 0\n    const triggerHeight = ref.current?.offsetHeight || 0\n\n    function getAbsolutePosition(corner: Corners) {\n      const isRight = corner.includes('right')\n      const isBottom = corner.includes('bottom')\n\n      return {\n        x: isRight ? window.innerWidth - offset - triggerWidth : 0,\n        y: isBottom ? window.innerHeight - offset - triggerHeight : 0,\n      }\n    }\n\n    const basePosition = getAbsolutePosition(currentCorner)\n\n    // Calculate all corner positions relative to the current corner\n    return {\n      'top-left': {\n        x: 0 - basePosition.x,\n        y: 0 - basePosition.y,\n      },\n      'top-right': {\n        x: window.innerWidth - offset - triggerWidth - basePosition.x,\n        y: 0 - basePosition.y,\n      },\n      'bottom-left': {\n        x: 0 - basePosition.x,\n        y: window.innerHeight - offset - triggerHeight - basePosition.y,\n      },\n      'bottom-right': {\n        x: window.innerWidth - offset - triggerWidth - basePosition.x,\n        y: window.innerHeight - offset - triggerHeight - basePosition.y,\n      },\n    }\n  }\n\n  return (\n    <div ref={ref} {...drag} style={{ touchAction: 'none' }}>\n      {children}\n    </div>\n  )\n}\n\ninterface UseDragOptions {\n  onDragStart?: () => void\n  onDrag?: (translation: Point) => void\n  onDragEnd?: (translation: Point, velocity: Point) => void\n  onAnimationEnd?: (corner: Corner) => void\n  threshold: number // Minimum movement before drag starts\n}\n\ninterface Velocity {\n  position: Point\n  timestamp: number\n}\n\nexport function useDrag(options: UseDragOptions) {\n  const ref = useRef<HTMLDivElement>(null)\n  const state = useRef<'idle' | 'press' | 'drag' | 'drag-end'>('idle')\n\n  const origin = useRef<Point>({ x: 0, y: 0 })\n  const translation = useRef<Point>({ x: 0, y: 0 })\n  const lastTimestamp = useRef(0)\n  const velocities = useRef<Velocity[]>([])\n\n  function set(position: Point) {\n    if (ref.current) {\n      translation.current = position\n      ref.current.style.translate = `${position.x}px ${position.y}px`\n    }\n  }\n\n  function animate(corner: Corner) {\n    const el = ref.current\n    if (el === null) return\n\n    function listener(e: TransitionEvent) {\n      if (e.propertyName === 'translate') {\n        options.onAnimationEnd?.(corner)\n        translation.current = { x: 0, y: 0 }\n        el!.style.transition = ''\n        el!.removeEventListener('transitionend', listener)\n      }\n    }\n\n    // Generated from https://www.easing.dev/spring\n    el.style.transition = 'translate 491.22ms var(--timing-bounce)'\n    el.addEventListener('transitionend', listener)\n    set(corner.translation)\n  }\n\n  function onClick(e: MouseEvent) {\n    if (state.current === 'drag-end') {\n      e.preventDefault()\n      e.stopPropagation()\n      state.current = 'idle'\n      ref.current?.removeEventListener('click', onClick)\n    }\n  }\n\n  function onPointerDown(e: React.PointerEvent) {\n    origin.current = { x: e.clientX, y: e.clientY }\n    state.current = 'press'\n    window.addEventListener('pointermove', onPointerMove)\n    window.addEventListener('pointerup', onPointerUp)\n    ref.current?.addEventListener('click', onClick)\n  }\n\n  function onPointerMove(e: PointerEvent) {\n    if (state.current === 'press') {\n      const dx = e.clientX - origin.current.x\n      const dy = e.clientY - origin.current.y\n      const distance = Math.sqrt(dx * dx + dy * dy)\n\n      if (distance >= options.threshold) {\n        state.current = 'drag'\n        ref.current?.setPointerCapture(e.pointerId)\n        ref.current?.classList.add('dev-tools-grabbing')\n        options.onDragStart?.()\n      }\n    }\n\n    if (state.current !== 'drag') return\n\n    const currentPosition = { x: e.clientX, y: e.clientY }\n\n    const dx = currentPosition.x - origin.current.x\n    const dy = currentPosition.y - origin.current.y\n    origin.current = currentPosition\n\n    const newTranslation = {\n      x: translation.current.x + dx,\n      y: translation.current.y + dy,\n    }\n\n    set(newTranslation)\n\n    // Keep a history of recent positions for velocity calculation\n    // Only store points that are at least 10ms apart to avoid too many samples\n    const now = Date.now()\n    const shouldAddToHistory = now - lastTimestamp.current >= 10\n    if (shouldAddToHistory) {\n      velocities.current = [\n        ...velocities.current.slice(-5),\n        { position: currentPosition, timestamp: now },\n      ]\n    }\n\n    lastTimestamp.current = now\n    options.onDrag?.(translation.current)\n  }\n\n  function onPointerUp(e: PointerEvent) {\n    state.current = state.current === 'drag' ? 'drag-end' : 'idle'\n\n    window.removeEventListener('pointermove', onPointerMove)\n    window.removeEventListener('pointerup', onPointerUp)\n\n    const velocity = calculateVelocity(velocities.current)\n    velocities.current = []\n\n    ref.current?.classList.remove('dev-tools-grabbing')\n    ref.current?.releasePointerCapture(e.pointerId)\n    options.onDragEnd?.(translation.current, velocity)\n  }\n\n  return {\n    ref,\n    onPointerDown,\n    animate,\n  }\n}\n\nfunction calculateVelocity(\n  history: Array<{ position: Point; timestamp: number }>\n): Point {\n  if (history.length < 2) {\n    return { x: 0, y: 0 }\n  }\n\n  const oldestPoint = history[0]\n  const latestPoint = history[history.length - 1]\n\n  const timeDelta = latestPoint.timestamp - oldestPoint.timestamp\n\n  if (timeDelta === 0) {\n    return { x: 0, y: 0 }\n  }\n\n  // Calculate pixels per millisecond\n  const velocityX =\n    (latestPoint.position.x - oldestPoint.position.x) / timeDelta\n  const velocityY =\n    (latestPoint.position.y - oldestPoint.position.y) / timeDelta\n\n  // Convert to pixels per second for more intuitive values\n  return {\n    x: velocityX * 1000,\n    y: velocityY * 1000,\n  }\n}\n\nfunction project(initialVelocity: number, decelerationRate = 0.999) {\n  return ((initialVelocity / 1000) * decelerationRate) / (1 - decelerationRate)\n}\n"],"names":["useRef","Draggable","children","padding","position","currentCorner","setPosition","setCurrentCorner","onDragStart","ref","animate","drag","useDrag","threshold","onDragEnd","onAnimationEnd","translation","velocity","projectedPosition","x","project","y","nearestCorner","getNearestCorner","corner","setTimeout","current","style","removeProperty","allCorners","getCorners","distances","Object","entries","map","key","distance","Math","sqrt","min","d","nearest","find","offset","triggerWidth","offsetWidth","triggerHeight","offsetHeight","getAbsolutePosition","isRight","includes","isBottom","window","innerWidth","innerHeight","basePosition","div","touchAction","options","state","origin","lastTimestamp","velocities","set","translate","el","listener","e","propertyName","transition","removeEventListener","addEventListener","onClick","preventDefault","stopPropagation","onPointerDown","clientX","clientY","onPointerMove","onPointerUp","dx","dy","setPointerCapture","pointerId","classList","add","currentPosition","newTranslation","now","Date","shouldAddToHistory","slice","timestamp","onDrag","calculateVelocity","remove","releasePointerCapture","history","length","oldestPoint","latestPoint","timeDelta","velocityX","velocityY","initialVelocity","decelerationRate"],"mappings":";AAAA,SAASA,MAAM,QAAQ,QAAO;AAc9B,OAAO,SAASC,UAAU,KAYzB;IAZyB,IAAA,EACxBC,QAAQ,EACRC,OAAO,EACPC,UAAUC,aAAa,EACvBC,aAAaC,gBAAgB,EAC7BC,WAAW,EAOZ,GAZyB;IAaxB,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAE,GAAGC,MAAM,GAAGC,QAAQ;QACxCC,WAAW;QACXL;QACAM;QACAC;IACF;IAEA,SAASD,UAAUE,WAAkB,EAAEC,QAAe;QACpD,MAAMC,oBAAoB;YACxBC,GAAGH,YAAYG,CAAC,GAAGC,QAAQH,SAASE,CAAC;YACrCE,GAAGL,YAAYK,CAAC,GAAGD,QAAQH,SAASI,CAAC;QACvC;QACA,MAAMC,gBAAgBC,iBAAiBL;QACvCR,QAAQY;IACV;IAEA,SAASP,eAAe,KAAkB;QAAlB,IAAA,EAAES,MAAM,EAAU,GAAlB;QACtB,yBAAyB;QACzBC,WAAW;gBACThB;aAAAA,eAAAA,IAAIiB,OAAO,qBAAXjB,aAAakB,KAAK,CAACC,cAAc,CAAC;YAClCrB,iBAAiBiB;QACnB;IACF;IAEA,SAASD,iBAAiB,KAAe;QAAf,IAAA,EAAEJ,CAAC,EAAEE,CAAC,EAAS,GAAf;QACxB,MAAMQ,aAAaC;QACnB,MAAMC,YAAYC,OAAOC,OAAO,CAACJ,YAAYK,GAAG,CAAC;gBAAC,CAACC,KAAKnB,YAAY;YAClE,MAAMoB,WAAWC,KAAKC,IAAI,CACxB,AAACnB,CAAAA,IAAIH,YAAYG,CAAC,AAADA,KAAM,IAAI,AAACE,CAAAA,IAAIL,YAAYK,CAAC,AAADA,KAAM;YAEpD,OAAO;gBAAEc;gBAAKC;YAAS;QACzB;QACA,MAAMG,MAAMF,KAAKE,GAAG,IAAIR,UAAUG,GAAG,CAAC,CAACM,IAAMA,EAAEJ,QAAQ;QACvD,MAAMK,UAAUV,UAAUW,IAAI,CAAC,CAACF,IAAMA,EAAEJ,QAAQ,KAAKG;QACrD,IAAI,CAACE,SAAS;YACZ,kBAAkB;YAClB,OAAO;gBAAEjB,QAAQnB;gBAAeW,aAAaa,UAAU,CAACxB,cAAc;YAAC;QACzE;QACA,OAAO;YACLW,aAAaa,UAAU,CAACY,QAAQN,GAAG,CAAY;YAC/CX,QAAQiB,QAAQN,GAAG;QACrB;IACF;IAEA,SAASL;YAEcrB,cACCA;QAFtB,MAAMkC,SAASxC,UAAU;QACzB,MAAMyC,eAAenC,EAAAA,eAAAA,IAAIiB,OAAO,qBAAXjB,aAAaoC,WAAW,KAAI;QACjD,MAAMC,gBAAgBrC,EAAAA,gBAAAA,IAAIiB,OAAO,qBAAXjB,cAAasC,YAAY,KAAI;QAEnD,SAASC,oBAAoBxB,MAAe;YAC1C,MAAMyB,UAAUzB,OAAO0B,QAAQ,CAAC;YAChC,MAAMC,WAAW3B,OAAO0B,QAAQ,CAAC;YAEjC,OAAO;gBACL/B,GAAG8B,UAAUG,OAAOC,UAAU,GAAGV,SAASC,eAAe;gBACzDvB,GAAG8B,WAAWC,OAAOE,WAAW,GAAGX,SAASG,gBAAgB;YAC9D;QACF;QAEA,MAAMS,eAAeP,oBAAoB3C;QAEzC,gEAAgE;QAChE,OAAO;YACL,YAAY;gBACVc,GAAG,IAAIoC,aAAapC,CAAC;gBACrBE,GAAG,IAAIkC,aAAalC,CAAC;YACvB;YACA,aAAa;gBACXF,GAAGiC,OAAOC,UAAU,GAAGV,SAASC,eAAeW,aAAapC,CAAC;gBAC7DE,GAAG,IAAIkC,aAAalC,CAAC;YACvB;YACA,eAAe;gBACbF,GAAG,IAAIoC,aAAapC,CAAC;gBACrBE,GAAG+B,OAAOE,WAAW,GAAGX,SAASG,gBAAgBS,aAAalC,CAAC;YACjE;YACA,gBAAgB;gBACdF,GAAGiC,OAAOC,UAAU,GAAGV,SAASC,eAAeW,aAAapC,CAAC;gBAC7DE,GAAG+B,OAAOE,WAAW,GAAGX,SAASG,gBAAgBS,aAAalC,CAAC;YACjE;QACF;IACF;IAEA,qBACE,KAACmC;QAAI/C,KAAKA;QAAM,GAAGE,IAAI;QAAEgB,OAAO;YAAE8B,aAAa;QAAO;kBACnDvD;;AAGP;AAeA,OAAO,SAASU,QAAQ8C,OAAuB;IAC7C,MAAMjD,MAAMT,OAAuB;IACnC,MAAM2D,QAAQ3D,OAA+C;IAE7D,MAAM4D,SAAS5D,OAAc;QAAEmB,GAAG;QAAGE,GAAG;IAAE;IAC1C,MAAML,cAAchB,OAAc;QAAEmB,GAAG;QAAGE,GAAG;IAAE;IAC/C,MAAMwC,gBAAgB7D,OAAO;IAC7B,MAAM8D,aAAa9D,OAAmB,EAAE;IAExC,SAAS+D,IAAI3D,QAAe;QAC1B,IAAIK,IAAIiB,OAAO,EAAE;YACfV,YAAYU,OAAO,GAAGtB;YACtBK,IAAIiB,OAAO,CAACC,KAAK,CAACqC,SAAS,GAAG,AAAG5D,SAASe,CAAC,GAAC,QAAKf,SAASiB,CAAC,GAAC;QAC9D;IACF;IAEA,SAASX,QAAQc,MAAc;QAC7B,MAAMyC,KAAKxD,IAAIiB,OAAO;QACtB,IAAIuC,OAAO,MAAM;QAEjB,SAASC,SAASC,CAAkB;YAClC,IAAIA,EAAEC,YAAY,KAAK,aAAa;gBAClCV,QAAQ3C,cAAc,oBAAtB2C,QAAQ3C,cAAc,MAAtB2C,SAAyBlC;gBACzBR,YAAYU,OAAO,GAAG;oBAAEP,GAAG;oBAAGE,GAAG;gBAAE;gBACnC4C,GAAItC,KAAK,CAAC0C,UAAU,GAAG;gBACvBJ,GAAIK,mBAAmB,CAAC,iBAAiBJ;YAC3C;QACF;QAEA,+CAA+C;QAC/CD,GAAGtC,KAAK,CAAC0C,UAAU,GAAG;QACtBJ,GAAGM,gBAAgB,CAAC,iBAAiBL;QACrCH,IAAIvC,OAAOR,WAAW;IACxB;IAEA,SAASwD,QAAQL,CAAa;QAC5B,IAAIR,MAAMjC,OAAO,KAAK,YAAY;gBAIhCjB;YAHA0D,EAAEM,cAAc;YAChBN,EAAEO,eAAe;YACjBf,MAAMjC,OAAO,GAAG;aAChBjB,eAAAA,IAAIiB,OAAO,qBAAXjB,aAAa6D,mBAAmB,CAAC,SAASE;QAC5C;IACF;IAEA,SAASG,cAAcR,CAAqB;YAK1C1D;QAJAmD,OAAOlC,OAAO,GAAG;YAAEP,GAAGgD,EAAES,OAAO;YAAEvD,GAAG8C,EAAEU,OAAO;QAAC;QAC9ClB,MAAMjC,OAAO,GAAG;QAChB0B,OAAOmB,gBAAgB,CAAC,eAAeO;QACvC1B,OAAOmB,gBAAgB,CAAC,aAAaQ;SACrCtE,eAAAA,IAAIiB,OAAO,qBAAXjB,aAAa8D,gBAAgB,CAAC,SAASC;IACzC;IAEA,SAASM,cAAcX,CAAe;QACpC,IAAIR,MAAMjC,OAAO,KAAK,SAAS;YAC7B,MAAMsD,KAAKb,EAAES,OAAO,GAAGhB,OAAOlC,OAAO,CAACP,CAAC;YACvC,MAAM8D,KAAKd,EAAEU,OAAO,GAAGjB,OAAOlC,OAAO,CAACL,CAAC;YACvC,MAAMe,WAAWC,KAAKC,IAAI,CAAC0C,KAAKA,KAAKC,KAAKA;YAE1C,IAAI7C,YAAYsB,QAAQ7C,SAAS,EAAE;oBAEjCJ,cACAA;gBAFAkD,MAAMjC,OAAO,GAAG;iBAChBjB,eAAAA,IAAIiB,OAAO,qBAAXjB,aAAayE,iBAAiB,CAACf,EAAEgB,SAAS;iBAC1C1E,gBAAAA,IAAIiB,OAAO,qBAAXjB,cAAa2E,SAAS,CAACC,GAAG,CAAC;gBAC3B3B,QAAQlD,WAAW,oBAAnBkD,QAAQlD,WAAW,MAAnBkD;YACF;QACF;QAEA,IAAIC,MAAMjC,OAAO,KAAK,QAAQ;QAE9B,MAAM4D,kBAAkB;YAAEnE,GAAGgD,EAAES,OAAO;YAAEvD,GAAG8C,EAAEU,OAAO;QAAC;QAErD,MAAMG,KAAKM,gBAAgBnE,CAAC,GAAGyC,OAAOlC,OAAO,CAACP,CAAC;QAC/C,MAAM8D,KAAKK,gBAAgBjE,CAAC,GAAGuC,OAAOlC,OAAO,CAACL,CAAC;QAC/CuC,OAAOlC,OAAO,GAAG4D;QAEjB,MAAMC,iBAAiB;YACrBpE,GAAGH,YAAYU,OAAO,CAACP,CAAC,GAAG6D;YAC3B3D,GAAGL,YAAYU,OAAO,CAACL,CAAC,GAAG4D;QAC7B;QAEAlB,IAAIwB;QAEJ,8DAA8D;QAC9D,2EAA2E;QAC3E,MAAMC,MAAMC,KAAKD,GAAG;QACpB,MAAME,qBAAqBF,MAAM3B,cAAcnC,OAAO,IAAI;QAC1D,IAAIgE,oBAAoB;YACtB5B,WAAWpC,OAAO,GAAG;mBAChBoC,WAAWpC,OAAO,CAACiE,KAAK,CAAC,CAAC;gBAC7B;oBAAEvF,UAAUkF;oBAAiBM,WAAWJ;gBAAI;aAC7C;QACH;QAEA3B,cAAcnC,OAAO,GAAG8D;QACxB9B,QAAQmC,MAAM,oBAAdnC,QAAQmC,MAAM,MAAdnC,SAAiB1C,YAAYU,OAAO;IACtC;IAEA,SAASqD,YAAYZ,CAAe;YASlC1D,cACAA;QATAkD,MAAMjC,OAAO,GAAGiC,MAAMjC,OAAO,KAAK,SAAS,aAAa;QAExD0B,OAAOkB,mBAAmB,CAAC,eAAeQ;QAC1C1B,OAAOkB,mBAAmB,CAAC,aAAaS;QAExC,MAAM9D,WAAW6E,kBAAkBhC,WAAWpC,OAAO;QACrDoC,WAAWpC,OAAO,GAAG,EAAE;SAEvBjB,eAAAA,IAAIiB,OAAO,qBAAXjB,aAAa2E,SAAS,CAACW,MAAM,CAAC;SAC9BtF,gBAAAA,IAAIiB,OAAO,qBAAXjB,cAAauF,qBAAqB,CAAC7B,EAAEgB,SAAS;QAC9CzB,QAAQ5C,SAAS,oBAAjB4C,QAAQ5C,SAAS,MAAjB4C,SAAoB1C,YAAYU,OAAO,EAAET;IAC3C;IAEA,OAAO;QACLR;QACAkE;QACAjE;IACF;AACF;AAEA,SAASoF,kBACPG,OAAsD;IAEtD,IAAIA,QAAQC,MAAM,GAAG,GAAG;QACtB,OAAO;YAAE/E,GAAG;YAAGE,GAAG;QAAE;IACtB;IAEA,MAAM8E,cAAcF,OAAO,CAAC,EAAE;IAC9B,MAAMG,cAAcH,OAAO,CAACA,QAAQC,MAAM,GAAG,EAAE;IAE/C,MAAMG,YAAYD,YAAYR,SAAS,GAAGO,YAAYP,SAAS;IAE/D,IAAIS,cAAc,GAAG;QACnB,OAAO;YAAElF,GAAG;YAAGE,GAAG;QAAE;IACtB;IAEA,mCAAmC;IACnC,MAAMiF,YACJ,AAACF,CAAAA,YAAYhG,QAAQ,CAACe,CAAC,GAAGgF,YAAY/F,QAAQ,CAACe,CAAC,AAADA,IAAKkF;IACtD,MAAME,YACJ,AAACH,CAAAA,YAAYhG,QAAQ,CAACiB,CAAC,GAAG8E,YAAY/F,QAAQ,CAACiB,CAAC,AAADA,IAAKgF;IAEtD,yDAAyD;IACzD,OAAO;QACLlF,GAAGmF,YAAY;QACfjF,GAAGkF,YAAY;IACjB;AACF;AAEA,SAASnF,QAAQoF,eAAuB,EAAEC,gBAAwB;IAAxBA,IAAAA,6BAAAA,mBAAmB;IAC3D,OAAO,AAAED,kBAAkB,OAAQC,mBAAqB,CAAA,IAAIA,gBAAe;AAC7E","ignoreList":[0]}

package/dist/esm/client/components/react-dev-overlay/ui/components/fader/index.js

@@ -16,6 +16,6 @@ export const Fader = /*#__PURE__*/ forwardRef(function Fader(param, ref) {
         }
     });
 });
-export const FADER_STYLES = '\n  .nextjs-scroll-fader {\n    --blur: 1px;\n    --stop: 25%;\n    --height: 150px;\n    --color-bg: var(--color-background-100);\n    position: absolute;\n    pointer-events: none;\n    user-select: none;\n    width: 100%;\n    height: var(--height);\n    left: 0;\n    backdrop-filter: blur(var(--blur));\n\n    &[data-side="top"] {\n      top: 0;\n      background: linear-gradient(to top, transparent, var(--color-bg));\n      mask-image: linear-gradient(to bottom, var(--color-bg) var(--stop), transparent);\n    }\n  }\n\n';
+export const FADER_STYLES = '\n  .nextjs-scroll-fader {\n    --blur: 1px;\n    --stop: 25%;\n    --height: 150px;\n    --color-bg: var(--color-background-100);\n    position: absolute;\n    pointer-events: none;\n    user-select: none;\n    width: 100%;\n    height: var(--height);\n    left: 0;\n    backdrop-filter: blur(var(--blur));\n\n    &[data-side="top"] {\n      top: 0;\n      background: linear-gradient(to top, transparent, var(--color-bg));\n      mask-image: linear-gradient(to bottom, var(--color-bg) var(--stop), transparent);\n    }\n  }\n';
 
 //# sourceMappingURL=index.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/fader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/fader/index.tsx"],"sourcesContent":["import { type CSSProperties, type Ref, forwardRef } from 'react'\n\nexport const Fader = forwardRef(function Fader(\n  {\n    stop,\n    blur,\n    side,\n    style,\n    height,\n  }: {\n    stop?: string\n    blur?: string\n    height?: number\n    side: 'top' | 'bottom' | 'left' | 'right'\n    className?: string\n    style?: CSSProperties\n  },\n  ref: Ref<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-nextjs-scroll-fader\n      className=\"nextjs-scroll-fader\"\n      data-side={side}\n      style={\n        {\n          '--stop': stop,\n          '--blur': blur,\n          '--height': `${height}px`,\n          ...style,\n        } as React.CSSProperties\n      }\n    />\n  )\n})\n\nexport const FADER_STYLES = `\n  .nextjs-scroll-fader {\n    --blur: 1px;\n    --stop: 25%;\n    --height: 150px;\n    --color-bg: var(--color-background-100);\n    position: absolute;\n    pointer-events: none;\n    user-select: none;\n    width: 100%;\n    height: var(--height);\n    left: 0;\n    backdrop-filter: blur(var(--blur));\n\n    &[data-side=\"top\"] {\n      top: 0;\n      background: linear-gradient(to top, transparent, var(--color-bg));\n      mask-image: linear-gradient(to bottom, var(--color-bg) var(--stop), transparent);\n    }\n  }\n\n`\n"],"names":["forwardRef","Fader","ref","stop","blur","side","style","height","div","aria-hidden","data-nextjs-scroll-fader","className","data-side","FADER_STYLES"],"mappings":";AAAA,SAAuCA,UAAU,QAAQ,QAAO;AAEhE,OAAO,MAAMC,sBAAQD,WAAW,SAASC,MACvC,KAaC,EACDC,GAAwB;IAdxB,IAAA,EACEC,IAAI,EACJC,IAAI,EACJC,IAAI,EACJC,KAAK,EACLC,MAAM,EAQP,GAbD;IAgBA,qBACE,KAACC;QACCN,KAAKA;QACLO,aAAW;QACXC,0BAAwB;QACxBC,WAAU;QACVC,aAAWP;QACXC,OACE;YACE,UAAUH;YACV,UAAUC;YACV,YAAY,AAAC,KAAEG,SAAO;YACtB,GAAGD,KAAK;QACV;;AAIR,GAAE;AAEF,OAAO,MAAMO,eAAgB,ohBAqB5B","ignoreList":[0]}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/fader/index.tsx"],"sourcesContent":["import { type CSSProperties, type Ref, forwardRef } from 'react'\n\nexport const Fader = forwardRef(function Fader(\n  {\n    stop,\n    blur,\n    side,\n    style,\n    height,\n  }: {\n    stop?: string\n    blur?: string\n    height?: number\n    side: 'top' | 'bottom' | 'left' | 'right'\n    className?: string\n    style?: CSSProperties\n  },\n  ref: Ref<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-nextjs-scroll-fader\n      className=\"nextjs-scroll-fader\"\n      data-side={side}\n      style={\n        {\n          '--stop': stop,\n          '--blur': blur,\n          '--height': `${height}px`,\n          ...style,\n        } as React.CSSProperties\n      }\n    />\n  )\n})\n\nexport const FADER_STYLES = `\n  .nextjs-scroll-fader {\n    --blur: 1px;\n    --stop: 25%;\n    --height: 150px;\n    --color-bg: var(--color-background-100);\n    position: absolute;\n    pointer-events: none;\n    user-select: none;\n    width: 100%;\n    height: var(--height);\n    left: 0;\n    backdrop-filter: blur(var(--blur));\n\n    &[data-side=\"top\"] {\n      top: 0;\n      background: linear-gradient(to top, transparent, var(--color-bg));\n      mask-image: linear-gradient(to bottom, var(--color-bg) var(--stop), transparent);\n    }\n  }\n`\n"],"names":["forwardRef","Fader","ref","stop","blur","side","style","height","div","aria-hidden","data-nextjs-scroll-fader","className","data-side","FADER_STYLES"],"mappings":";AAAA,SAAuCA,UAAU,QAAQ,QAAO;AAEhE,OAAO,MAAMC,sBAAQD,WAAW,SAASC,MACvC,KAaC,EACDC,GAAwB;IAdxB,IAAA,EACEC,IAAI,EACJC,IAAI,EACJC,IAAI,EACJC,KAAK,EACLC,MAAM,EAQP,GAbD;IAgBA,qBACE,KAACC;QACCN,KAAKA;QACLO,aAAW;QACXC,0BAAwB;QACxBC,WAAU;QACVC,aAAWP;QACXC,OACE;YACE,UAAUH;YACV,UAAUC;YACV,YAAY,AAAC,KAAEG,SAAO;YACtB,GAAGD,KAAK;QACV;;AAIR,GAAE;AAEF,OAAO,MAAMO,eAAgB,khBAoB5B","ignoreList":[0]}

package/dist/esm/client/components/react-dev-overlay/ui/components/toast/styles.js

@@ -1,4 +1,4 @@
-const styles = "\n  .nextjs-toast {\n    position: fixed;\n    bottom: 16px;\n    left: 16px;\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px 16px 32px\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--rounded-4xl);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n";
+const styles = "\n  .nextjs-toast {\n    position: fixed;\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px 16px 32px\n      rgba(0, 0, 0, 0.25);\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--rounded-4xl);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n";
 export { styles };
 
 //# sourceMappingURL=styles.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/toast/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/toast/styles.ts"],"sourcesContent":["const styles = `\n  .nextjs-toast {\n    position: fixed;\n    bottom: 16px;\n    left: 16px;\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px 16px 32px\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--rounded-4xl);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n`\n\nexport { styles }\n"],"names":["styles"],"mappings":"AAAA,MAAMA,SAAU;AA2BhB,SAASA,MAAM,GAAE","ignoreList":[0]}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/toast/styles.ts"],"sourcesContent":["const styles = `\n  .nextjs-toast {\n    position: fixed;\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px 16px 32px\n      rgba(0, 0, 0, 0.25);\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--rounded-4xl);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n`\n\nexport { styles }\n"],"names":["styles"],"mappings":"AAAA,MAAMA,SAAU;AAkBhB,SAASA,MAAM,GAAE","ignoreList":[0]}