npm - next - Versions diffs - 15.2.0-canary.65 → 15.2.0-canary.66 - Mend

next 15.2.0-canary.65 → 15.2.0-canary.66

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.

Potentially problematic release.

This version of next might be problematic. Click here for more details.

Files changed (334) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { Cross, NextLogo } from './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { noop as css } from '../../../helpers/noop-template'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n (process.env\n .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) \|\|\n 'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n state,\n errorCount,\n setIsErrorOverlayOpen,\n position = INDICATOR_POSITION,\n}: {\n state: OverlayState\n errorCount: number\n setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n // Technically this prop isn't needed, but useful for testing.\n position?: DevToolsIndicatorPosition\n}) {\n const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n\n return (\n isDevToolsIndicatorOpen && (\n <DevToolsPopover\n semver={state.versionInfo.installed}\n issueCount={errorCount}\n isStaticRoute={state.staticIndicator}\n hide={() => {\n setIsDevToolsIndicatorOpen(false)\n }}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n isTurbopack={!!process.env.TURBOPACK}\n position={position}\n />\n )\n )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n closeMenu: () => void\n selectedIndex: number\n setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n issueCount,\n isStaticRoute,\n isTurbopack,\n position,\n hide,\n setIsErrorOverlayOpen,\n}: {\n issueCount: number\n isStaticRoute: boolean\n semver: string \| undefined\n isTurbopack: boolean\n position: DevToolsIndicatorPosition\n hide: () => void\n setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n const menuRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement \| null>(null)\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const [selectedIndex, setSelectedIndex] = useState(-1)\n\n // This hook lets us do an exit animation before unmounting the component\n const { mounted, rendered } = useDelayedRender(isMenuOpen, {\n // Intentionally no fade in, makes the UI feel more immediate\n enterDelay: 0,\n // Graceful fade out to confirm that the UI did not break\n exitDelay: ANIMATE_OUT_DURATION_MS,\n })\n\n // Features to make the menu accessible\n useFocusTrap(menuRef, triggerRef, isMenuOpen)\n useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n\n function select(index: number \| 'first' \| 'last') {\n if (index === 'first') {\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 return\n }\n\n if (index === 'last') {\n const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n if (all) {\n const lastIndex = all.length - 1\n select(lastIndex)\n }\n return\n }\n\n const el = menuRef.current?.querySelector(\n `[data-index=\"${index}\"]`\n ) as HTMLElement\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 onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n if (isMenuOpen) {\n return\n }\n\n // Open with first item focused\n if (e.key === 'ArrowDown' \|\| e.key === 'Enter' \|\| e.key === ' ') {\n setIsMenuOpen(true)\n // Run on next tick because querying DOM after state change\n setTimeout(() => {\n select('first')\n })\n }\n\n // Open with last item focused\n if (e.key === 'ArrowUp') {\n setIsMenuOpen(true)\n // Run on next tick because querying DOM after state change\n setTimeout(() => {\n select('last')\n })\n }\n }\n\n function openErrorOverlay() {\n if (issueCount > 0) {\n setIsErrorOverlayOpen(true)\n }\n }\n\n function onTriggerClick() {\n setIsMenuOpen((prev) => !prev)\n }\n\n function closeMenu() {\n setIsMenuOpen(false)\n // Avoid flashing selected state\n setTimeout(() => {\n setSelectedIndex(-1)\n }, ANIMATE_OUT_DURATION_MS)\n }\n\n const [vertical, horizontal] = position.split('-', 2)\n\n return (\n <Toast\n data-nextjs-toast\n style={{\n boxShadow: 'none',\n zIndex: 2147483647,\n // Reset the toast component's default positions.\n bottom: 'initial',\n left: 'initial',\n [vertical]: 'var(--size-2_5)',\n [horizontal]: 'var(--size-5)',\n }}\n >\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 issueCount={issueCount}\n onTriggerClick={onTriggerClick}\n onKeyDown={onTriggerKeydown}\n openErrorOverlay={openErrorOverlay}\n isDevBuilding={useIsDevBuilding()}\n isDevRendering={useIsDevRendering()}\n />\n\n {mounted && (\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={rendered}\n style={\n {\n '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n [vertical]: 'calc(100% + var(--size-gap))',\n [horizontal]: 0,\n } as React.CSSProperties\n }\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 index={0}\n label=\"Issues\"\n value={<IssueCount>{issueCount}</IssueCount>}\n onClick={openErrorOverlay}\n />\n )}\n <MenuItem\n label=\"Route\"\n value={isStaticRoute ? 'Static' : 'Dynamic'}\n data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n />\n {isTurbopack ? (\n <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n ) : (\n <MenuItem\n index={1}\n label=\"Try Turbopack\"\n value={<ExternalIcon />}\n href=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n />\n )}\n </div>\n\n <div className=\"dev-tools-indicator-footer\">\n <MenuItem\n data-hide-dev-tools\n label=\"Hide Dev Tools\"\n value={<Cross color=\"var(--color-gray-900)\" />}\n onClick={hide}\n index={isTurbopack ? 1 : 2}\n />\n </div>\n </Context.Provider>\n </div>\n )}\n </Toast>\n )\n}\n\nfunction MenuItem({\n index,\n label,\n value,\n onClick,\n href,\n ...props\n}: {\n index?: number\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\nfunction useFocusTrap(\n menuRef: React.RefObject<HTMLDivElement \| null>,\n triggerRef: React.RefObject<HTMLButtonElement \| null>,\n isMenuOpen: boolean\n) {\n useEffect(() => {\n if (isMenuOpen) {\n menuRef.current?.focus()\n } else {\n const root = triggerRef.current?.getRootNode()\n const activeElement =\n root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n // Only restore focus if the focus was previously on the menu.\n // This avoids us accidentally focusing on mount when the\n // user could want to interact with their own app instead.\n if (menuRef.current?.contains(activeElement)) {\n triggerRef.current?.focus()\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n menuRef: React.RefObject<HTMLDivElement \| null>,\n triggerRef: React.RefObject<HTMLButtonElement \| null>,\n isMenuOpen: boolean,\n closeMenu: () => void\n) {\n useEffect(() => {\n if (!isMenuOpen) {\n return\n }\n\n // Close menu when clicking outside of it or its button\n const handleClickOutside = (event: MouseEvent) => {\n if (\n !(menuRef.current?.getBoundingClientRect()\n ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n : false) &&\n !(triggerRef.current?.getBoundingClientRect()\n ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n event.clientX <=\n triggerRef.current.getBoundingClientRect()!.right &&\n event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n : false)\n ) {\n closeMenu()\n }\n }\n\n // Close popover when pressing escape\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n closeMenu()\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n document.removeEventListener('keydown', handleKeyDown)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction ExternalIcon() {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"External link\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13.5 10.25V13.25C13.5 13.3881 13.3881 13.5 13.25 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25L2.5 2.75C2.5 2.61193 2.61193 2.5 2.75 2.5H5.75H6.5V1H5.75H2.75C1.7835 1 1 1.7835 1 2.75V13.25C1 14.2165 1.7835 15 2.75 15H13.25C14.2165 15 15 14.2165 15 13.25V10.25V9.5H13.5V10.25ZM9 1H9.75H14.2495C14.6637 1 14.9995 1.33579 14.9995 1.75V6.25V7H13.4995V6.25V3.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L12.4388 2.5H9.75H9V1Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nexport const DEV_TOOLS_INDICATOR_STYLES = css`\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: 36px;\n border-radius: 6px;\n text-decoration: none !important;\n user-select: none;\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-font-small);\n line-height: var(--size-5);\n color: var(--color-gray-1000);\n }\n\n .dev-tools-indicator-value {\n font-size: var(--size-font-small);\n line-height: var(--size-5);\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: 41px;\n height: 24px;\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: 13px;\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: 8px;\n height: 8px;\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: var(--size-1);\n\n kbd {\n width: var(--size-5);\n height: var(--size-5);\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-font-smaller);\n line-height: var(--size-4);\n }\n }\n`\n"],"names":["DEV_TOOLS_INDICATOR_STYLES","DevToolsIndicator","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","state","errorCount","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","useState","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","createContext","menuRef","useRef","triggerRef","isMenuOpen","setIsMenuOpen","selectedIndex","setSelectedIndex","mounted","rendered","useDelayedRender","enterDelay","exitDelay","useFocusTrap","useClickOutside","closeMenu","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","Toast","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","div","id","role","dir","aria-orientation","tabIndex","className","data-rendered","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ExternalIcon","href","data-hide-dev-tools","Cross","color","props","isInteractive","useContext","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","useEffect","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","svg","width","height","viewBox","fill","path","fillRule","clipRule","d","css"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { 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 './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { noop as css } from '../../../helpers/noop-template'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport { StopIcon } from '../../../icons/stop-icon'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n (process.env\n .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) \|\|\n 'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n state,\n errorCount,\n isBuildError,\n setIsErrorOverlayOpen,\n position = INDICATOR_POSITION,\n}: {\n state: OverlayState\n errorCount: number\n isBuildError: boolean\n setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n // Technically this prop isn't needed, but useful for testing.\n position?: DevToolsIndicatorPosition\n}) {\n const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n\n return (\n isDevToolsIndicatorOpen && (\n <DevToolsPopover\n semver={state.versionInfo.installed}\n issueCount={errorCount}\n isStaticRoute={state.staticIndicator}\n hide={() => {\n setIsDevToolsIndicatorOpen(false)\n }}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n isTurbopack={!!process.env.TURBOPACK}\n position={position}\n disabled={state.disableDevIndicator}\n isBuildError={isBuildError}\n />\n )\n )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n closeMenu: () => void\n selectedIndex: number\n setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n disabled,\n issueCount,\n isStaticRoute,\n isTurbopack,\n position,\n isBuildError,\n hide,\n setIsErrorOverlayOpen,\n}: {\n disabled: boolean\n issueCount: number\n isStaticRoute: boolean\n semver: string \| undefined\n isTurbopack: boolean\n position: DevToolsIndicatorPosition\n isBuildError: boolean\n hide: () => void\n setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n const menuRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement \| null>(null)\n const turbopackRef = useRef<HTMLElement>(null)\n const triggerTurbopackRef = useRef<HTMLButtonElement \| null>(null)\n const routeInfoRef = useRef<HTMLElement>(null)\n const triggerRouteInfoRef = useRef<HTMLButtonElement \| null>(null)\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)\n const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)\n const [selectedIndex, setSelectedIndex] = useState(-1)\n\n // This hook lets us do an exit animation before unmounting the component\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: ANIMATE_OUT_DURATION_MS,\n }\n )\n const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } =\n useDelayedRender(isTurbopackInfoOpen, {\n enterDelay: 0,\n exitDelay: ANIMATE_OUT_DURATION_MS,\n })\n const { mounted: routeInfoMounted, rendered: routeInfoRendered } =\n useDelayedRender(isRouteInfoOpen, {\n enterDelay: 0,\n exitDelay: ANIMATE_OUT_DURATION_MS,\n })\n\n // Features to make the menu accessible\n useFocusTrap(menuRef, triggerRef, isMenuOpen)\n useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen)\n useClickOutside(\n turbopackRef,\n triggerTurbopackRef,\n isTurbopackInfoOpen,\n closeTurbopackInfo\n )\n useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen)\n useClickOutside(\n routeInfoRef,\n triggerRouteInfoRef,\n isRouteInfoOpen,\n closeRouteInfo\n )\n\n function select(index: number \| 'first' \| 'last') {\n if (index === 'first') {\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 return\n }\n\n if (index === 'last') {\n const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n if (all) {\n const lastIndex = all.length - 1\n select(lastIndex)\n }\n return\n }\n\n const el = menuRef.current?.querySelector(\n `[data-index=\"${index}\"]`\n ) as HTMLElement\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 onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n if (isMenuOpen) {\n return\n }\n\n // Open with first item focused\n if (e.key === 'ArrowDown' \|\| e.key === 'Enter' \|\| e.key === ' ') {\n setIsMenuOpen(true)\n // Run on next tick because querying DOM after state change\n setTimeout(() => {\n select('first')\n })\n }\n\n // Open with last item focused\n if (e.key === 'ArrowUp') {\n setIsMenuOpen(true)\n // Run on next tick because querying DOM after state change\n setTimeout(() => {\n select('last')\n })\n }\n }\n\n function openErrorOverlay() {\n if (issueCount > 0) {\n setIsErrorOverlayOpen(true)\n }\n }\n\n function onTriggerClick() {\n setIsMenuOpen((prev) => !prev)\n }\n\n function closeMenu() {\n setIsMenuOpen(false)\n // Avoid flashing selected state\n setTimeout(() => {\n setSelectedIndex(-1)\n }, ANIMATE_OUT_DURATION_MS)\n }\n\n function closeTurbopackInfo() {\n setIsTurbopackInfoOpen(false)\n }\n\n function closeRouteInfo() {\n setIsRouteInfoOpen(false)\n }\n\n const [vertical, horizontal] = position.split('-', 2)\n\n return (\n <Toast\n data-nextjs-toast\n style={{\n boxShadow: 'none',\n zIndex: 2147483647,\n // Reset the toast component's default positions.\n bottom: 'initial',\n left: 'initial',\n [vertical]: 'var(--size-2_5)',\n [horizontal]: 'var(--size-5)',\n }}\n >\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 onKeyDown={onTriggerKeydown}\n openErrorOverlay={openErrorOverlay}\n isDevBuilding={useIsDevBuilding()}\n isDevRendering={useIsDevRendering()}\n isBuildError={isBuildError}\n />\n\n {routeInfoMounted && (\n <RouteInfo\n ref={routeInfoRef}\n routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n isOpen={isRouteInfoOpen}\n setIsOpen={setIsRouteInfoOpen}\n setPreviousOpen={setIsMenuOpen}\n style={{\n [vertical]: 'calc(100% + var(--size-gap))',\n [horizontal]: 0,\n }}\n data-rendered={routeInfoRendered}\n />\n )}\n\n {turbopackInfoMounted && (\n <TurbopackInfo\n ref={turbopackRef}\n isOpen={isTurbopackInfoOpen}\n setIsOpen={setIsTurbopackInfoOpen}\n setPreviousOpen={setIsMenuOpen}\n style={{\n [vertical]: 'calc(100% + var(--size-gap))',\n [horizontal]: 0,\n }}\n data-rendered={turbopackInfoRendered}\n />\n )}\n\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={\n {\n '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n [vertical]: 'calc(100% + var(--size-gap))',\n [horizontal]: 0,\n } as React.CSSProperties\n }\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 index={0}\n label=\"Issues\"\n value={<IssueCount>{issueCount}</IssueCount>}\n onClick={openErrorOverlay}\n />\n )}\n <MenuItem\n label=\"Route\"\n index={1}\n value={isStaticRoute ? 'Static' : 'Dynamic'}\n onClick={() => setIsRouteInfoOpen(true)}\n data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n />\n {isTurbopack ? (\n <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n ) : (\n <MenuItem\n index={2}\n label=\"Try Turbopack\"\n value={<ChevronRight />}\n onClick={() => setIsTurbopackInfoOpen(true)}\n />\n )}\n </div>\n\n <div className=\"dev-tools-indicator-footer\">\n <MenuItem\n data-hide-dev-tools\n label=\"Hide Dev Tools\"\n value={<StopIcon />}\n onClick={hide}\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\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 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\nfunction useFocusTrap(\n menuRef: React.RefObject<HTMLElement \| null>,\n triggerRef: React.RefObject<HTMLButtonElement \| null>,\n isMenuOpen: boolean\n) {\n useEffect(() => {\n if (isMenuOpen) {\n menuRef.current?.focus()\n } else {\n const root = triggerRef.current?.getRootNode()\n const activeElement =\n root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n // Only restore focus if the focus was previously on the menu.\n // This avoids us accidentally focusing on mount when the\n // user could want to interact with their own app instead.\n if (menuRef.current?.contains(activeElement)) {\n triggerRef.current?.focus()\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n menuRef: React.RefObject<HTMLElement \| null>,\n triggerRef: React.RefObject<HTMLButtonElement \| null>,\n isMenuOpen: boolean,\n closeMenu: () => void\n) {\n useEffect(() => {\n if (!isMenuOpen) {\n return\n }\n\n // Close menu when clicking outside of it or its button\n const handleClickOutside = (event: MouseEvent) => {\n if (\n !(menuRef.current?.getBoundingClientRect()\n ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n : false) &&\n !(triggerRef.current?.getBoundingClientRect()\n ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n event.clientX <=\n triggerRef.current.getBoundingClientRect()!.right &&\n event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n : false)\n ) {\n closeMenu()\n }\n }\n\n // Close popover when pressing escape\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n closeMenu()\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n document.removeEventListener('keydown', handleKeyDown)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = css`\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: 36px;\n border-radius: 6px;\n text-decoration: none !important;\n user-select: none;\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-font-small);\n line-height: var(--size-5);\n color: var(--color-gray-1000);\n }\n\n .dev-tools-indicator-value {\n font-size: var(--size-font-small);\n line-height: var(--size-5);\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: 41px;\n height: 24px;\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: 13px;\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: 8px;\n height: 8px;\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: var(--size-1);\n\n kbd {\n width: var(--size-5);\n height: var(--size-5);\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-font-smaller);\n line-height: var(--size-4);\n }\n }\n`\n"],"names":["DEV_TOOLS_INDICATOR_STYLES","DevToolsIndicator","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","useState","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","createContext","menuRef","useRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","useDelayedRender","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","Toast","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","TurbopackInfo","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","StopIcon","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","useContext","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","useEffect","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","css"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { DevToolsIndicator } from './dev-tools-indicator';
 declare const meta: Meta<typeof DevToolsIndicator>;
 export default meta;
 type Story = StoryObj<typeof DevToolsIndicator>;
-export declare const NoErrors: Story;
+export declare const StaticRoute: Story;
+export declare const DynamicRoute: Story;
 export declare const SingleError: Story;
 export declare const MultipleErrors: Story;
-export declare const WithStaticIndicator: Story;

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 0 && (module.exports = {
+    DynamicRoute: null,
     MultipleErrors: null,
-    NoErrors: null,
     SingleError: null,
-    WithStaticIndicator: null,
+    StaticRoute: null,
     default: null
 });
 function _export(target, all) {
@@ -16,17 +16,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    DynamicRoute: function() {
+        return DynamicRoute;
+    },
     MultipleErrors: function() {
         return MultipleErrors;
     },
-    NoErrors: function() {
-        return NoErrors;
-    },
     SingleError: function() {
         return SingleError;
     },
-    WithStaticIndicator: function() {
-        return WithStaticIndicator;
+    StaticRoute: function() {
+        return StaticRoute;
     },
     default: function() {
         return _default;
@@ -85,21 +85,32 @@ const state = {
     refreshState: {
         type: 'idle'
     },
+    disableDevIndicator: false,
     rootLayoutMissingTags: [],
     versionInfo: mockVersionInfo,
     notFound: false,
-    staticIndicator: false,
+    staticIndicator: true,
     debugInfo: {
         devtoolsFrontendUrl: undefined
     }
 };
-const NoErrors = {
+const StaticRoute = {
     args: {
         errorCount: 0,
         state,
         setIsErrorOverlayOpen: ()=>{}
     }
 };
+const DynamicRoute = {
+    args: {
+        errorCount: 0,
+        state: {
+            ...state,
+            staticIndicator: false
+        },
+        setIsErrorOverlayOpen: ()=>{}
+    }
+};
 const SingleError = {
     args: {
         errorCount: 1,
@@ -114,18 +125,6 @@ const MultipleErrors = {
         setIsErrorOverlayOpen: ()=>{}
     }
 };
-const WithStaticIndicator = {
-    args: {
-        errorCount: 3,
-        state: {
-            ...state,
-            staticIndicator: true
-        },
-        setIsErrorOverlayOpen: ()=>{
-            console.log('setIsErrorOverlayOpen called');
-        }
-    }
-};
 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/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { DevToolsIndicator } from './dev-tools-indicator'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { OverlayState } from '../../../../../shared'\n\nconst meta: Meta<typeof DevToolsIndicator> = {\n component: DevToolsIndicator,\n parameters: {\n layout: 'centered',\n },\n argTypes: {\n position: {\n control: 'select',\n options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],\n defaultValue: 'bottom-left',\n },\n },\n decorators: [\n withShadowPortal,\n // Test for high z-index\n (Story) => (\n <div\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 9999,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background:\n 'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',\n }}\n >\n <Story />\n </div>\n ),\n ],\n}\n\nexport default meta\ntype Story = StoryObj<typeof DevToolsIndicator>\n\n// Mock version info for stories\nconst mockVersionInfo: VersionInfo = {\n installed: '15.1.2',\n staleness: 'stale-major',\n}\n\nconst state: OverlayState = {\n nextId: 1,\n buildError: null,\n errors: [],\n refreshState: { type: 'idle' },\n rootLayoutMissingTags: [],\n versionInfo: mockVersionInfo,\n notFound: false,\n staticIndicator: ~~false~~,\n debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nexport const ~~NoErrors~~: Story = {\n args: {\n errorCount: 0,\n state,\n setIsErrorOverlayOpen: () => {},\n },\n}\n\nexport const ~~SingleError~~: Story = {\n args: {\n errorCount: 1,\n state,\n setIsErrorOverlayOpen: () => {},\n },\n}\n\nexport const ~~MultipleErrors~~: Story = {\n args: {\n errorCount: 3,\n state,\n setIsErrorOverlayOpen: () => {},\n },\n}\n\nexport const ~~WithStaticIndicator~~: Story = {\n args: {\n errorCount: 3,\n state~~: {\n ...state~~,\n ~~staticIndicator: true,\n~~ ~~},\n~~ setIsErrorOverlayOpen: () => {~~\n console.log('setIsErrorOverlayOpen called')\n~~ },\n },\n}\n"],"names":["~~MultipleErrors~~","~~NoErrors~~","SingleError","~~WithStaticIndicator~~","meta","component","DevToolsIndicator","parameters","layout","argTypes","position","control","options","defaultValue","decorators","withShadowPortal","Story","div","style","top","left","width","height","zIndex","display","alignItems","justifyContent","background","mockVersionInfo","installed","staleness","state","nextId","buildError","errors","refreshState","type","rootLayoutMissingTags","versionInfo","notFound","staticIndicator","debugInfo","devtoolsFrontendUrl","undefined","args","errorCount","setIsErrorOverlayOpen"~~,"console","log"~~],"mappings":";;;;;;;;;;;;;;;;;;~~IAgFaA~~,~~cAAc~~;~~eAAdA~~;;~~IAhBAC~~,~~QAAQ~~;~~eAARA~~;;~~IAQAC~~,WAAW;eAAXA;;~~IAgBAC~~,~~mBAAmB~~;~~eAAnBA~~;;~~IA7Cb~~,OAAmB;eAAnB;;;;mCA1CkC;kCACD;AAIjC,MAAMC,OAAuC;IAC3CC,WAAWC,oCAAiB;IAC5BC,YAAY;QACVC,QAAQ;IACV;IACAC,UAAU;QACRC,UAAU;YACRC,SAAS;YACTC,SAAS;gBAAC;gBAAY;gBAAa;gBAAe;aAAe;YACjEC,cAAc;QAChB;IACF;IACAC,YAAY;QACVC,kCAAgB;QAChB,wBAAwB;QACxB,CAACC,sBACC,qBAACC;gBACCC,OAAO;oBACLR,UAAU;oBACVS,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,YACE;gBACJ;0BAEA,cAAA,qBAACX;;KAGN;AACH;MAEA,WAAeZ;AAGf,gCAAgC;AAChC,MAAMwB,kBAA+B;IACnCC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,QAAsB;IAC1BC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE;IACVC,cAAc;QAAEC,MAAM;IAAO;IAC7BC,uBAAuB,EAAE;IACzBC,~~aAAaV~~;~~IACbW~~,UAAU;IACVC,iBAAiB;IACjBC,WAAW;QAAEC,qBAAqBC;IAAU;AAC9C;AAEO,~~MAAM1C~~,~~WAAkB~~;~~IAC7B2C~~,MAAM;QACJC,YAAY;~~QACZd~~;~~QACAe~~,uBAAuB,KAAO;IAChC;AACF;AAEO,~~MAAM5C~~,~~cAAqB~~;~~IAChC0C~~,MAAM;QACJC,YAAY;~~QACZd~~;~~QACAe~~,uBAAuB,KAAO;IAChC;AACF;AAEO,~~MAAM9C~~,~~iBAAwB~~;~~IACnC4C~~,MAAM;QACJC,YAAY;~~QACZd~~;~~QACAe~~,uBAAuB,KAAO;IAChC;AACF;AAEO,~~MAAM3C~~,~~sBAA6B~~;~~IACxCyC~~,MAAM;QACJC,YAAY;~~QACZd,OAAO~~;~~YACL~~,~~GAAGA,KAAK;YACRS,iBAAiB;QACnB;QACAM,~~uBAAuB~~;YACrBC~~,~~QAAQC,GAAG,CAAC~~;~~QACd~~;~~IACF;~~AACF"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { DevToolsIndicator } from './dev-tools-indicator'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { OverlayState } from '../../../../../shared'\n\nconst meta: Meta<typeof DevToolsIndicator> = {\n component: DevToolsIndicator,\n parameters: {\n layout: 'centered',\n },\n argTypes: {\n position: {\n control: 'select',\n options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],\n defaultValue: 'bottom-left',\n },\n },\n decorators: [\n withShadowPortal,\n // Test for high z-index\n (Story) => (\n <div\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: 9999,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background:\n 'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',\n }}\n >\n <Story />\n </div>\n ),\n ],\n}\n\nexport default meta\ntype Story = StoryObj<typeof DevToolsIndicator>\n\n// Mock version info for stories\nconst mockVersionInfo: VersionInfo = {\n installed: '15.1.2',\n staleness: 'stale-major',\n}\n\nconst state: OverlayState = {\n nextId: 1,\n buildError: null,\n errors: [],\n refreshState: { type: 'idle' },\n disableDevIndicator: false,\n rootLayoutMissingTags: [],\n versionInfo: mockVersionInfo,\n notFound: false,\n staticIndicator: true,\n debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nexport const StaticRoute: Story = {\n args: {\n errorCount: 0,\n state,\n setIsErrorOverlayOpen: () => {},\n },\n}\n\nexport const DynamicRoute: Story = {\n args: {\n errorCount: 0,\n state: {\n ...state,\n staticIndicator: false,\n },\n setIsErrorOverlayOpen: () => {},\n },\n}\n\nexport const SingleError: Story = {\n args: {\n errorCount: 1,\n state,\n setIsErrorOverlayOpen: () => {},\n },\n}\n\nexport const MultipleErrors: Story = {\n args: {\n errorCount: 3,\n state,\n setIsErrorOverlayOpen: () => {},\n },\n}\n"],"names":["DynamicRoute","MultipleErrors","SingleError","StaticRoute","meta","component","DevToolsIndicator","parameters","layout","argTypes","position","control","options","defaultValue","decorators","withShadowPortal","Story","div","style","top","left","width","height","zIndex","display","alignItems","justifyContent","background","mockVersionInfo","installed","staleness","state","nextId","buildError","errors","refreshState","type","disableDevIndicator","rootLayoutMissingTags","versionInfo","notFound","staticIndicator","debugInfo","devtoolsFrontendUrl","undefined","args","errorCount","setIsErrorOverlayOpen"],"mappings":";;;;;;;;;;;;;;;;;;IAyEaA,YAAY;eAAZA;;IAmBAC,cAAc;eAAdA;;IARAC,WAAW;eAAXA;;IAnBAC,WAAW;eAAXA;;IAtBb,OAAmB;eAAnB;;;;mCA1CkC;kCACD;AAIjC,MAAMC,OAAuC;IAC3CC,WAAWC,oCAAiB;IAC5BC,YAAY;QACVC,QAAQ;IACV;IACAC,UAAU;QACRC,UAAU;YACRC,SAAS;YACTC,SAAS;gBAAC;gBAAY;gBAAa;gBAAe;aAAe;YACjEC,cAAc;QAChB;IACF;IACAC,YAAY;QACVC,kCAAgB;QAChB,wBAAwB;QACxB,CAACC,sBACC,qBAACC;gBACCC,OAAO;oBACLR,UAAU;oBACVS,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,YACE;gBACJ;0BAEA,cAAA,qBAACX;;KAGN;AACH;MAEA,WAAeZ;AAGf,gCAAgC;AAChC,MAAMwB,kBAA+B;IACnCC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,QAAsB;IAC1BC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE;IACVC,cAAc;QAAEC,MAAM;IAAO;IAC7BC,qBAAqB;IACrBC,uBAAuB,EAAE;IACzBC,aAAaX;IACbY,UAAU;IACVC,iBAAiB;IACjBC,WAAW;QAAEC,qBAAqBC;IAAU;AAC9C;AAEO,MAAMzC,cAAqB;IAChC0C,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAM/C,eAAsB;IACjC6C,MAAM;QACJC,YAAY;QACZf,OAAO;YACL,GAAGA,KAAK;YACRU,iBAAiB;QACnB;QACAM,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAM7C,cAAqB;IAChC2C,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAM9C,iBAAwB;IACnC4C,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF"}

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

@@ -0,0 +1,8 @@
+export declare function DevToolsInfo({ title, children, learnMoreLink, setIsOpen, setPreviousOpen, ...props }: {
+    title: string;
+    children: React.ReactNode;
+    learnMoreLink: string;
+    setIsOpen: (isOpen: boolean) => void;
+    setPreviousOpen: (isOpen: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const DEV_TOOLS_INFO_STYLES: string;

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    DEV_TOOLS_INFO_STYLES: null,
+    DevToolsInfo: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEV_TOOLS_INFO_STYLES: function() {
+        return DEV_TOOLS_INFO_STYLES;
+    },
+    DevToolsInfo: function() {
+        return DevToolsInfo;
+    }
+});
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _jsxruntime = require("react/jsx-runtime");
+const _nooptemplate = require("../../../../helpers/noop-template");
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\n  [data-info-popover] {\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: 350px;\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-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function DevToolsInfo(param) {
+    let { title, children, learnMoreLink, setIsOpen, setPreviousOpen, ...props } = param;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-info-popover": true,
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "dev-tools-info-container",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("h1", {
+                    className: "dev-tools-info-title",
+                    children: title
+                }),
+                children,
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "dev-tools-info-button-container",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                            className: "dev-tools-info-close-button",
+                            onClick: ()=>{
+                                setIsOpen(false);
+                                setPreviousOpen(true);
+                            },
+                            children: "Close"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                            className: "dev-tools-info-learn-more-button",
+                            href: learnMoreLink,
+                            target: "_blank",
+                            rel: "noreferrer noopener",
+                            children: "Learn More"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+const DEV_TOOLS_INFO_STYLES = (0, _nooptemplate.noop)(_templateObject());
+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=dev-tools-info.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx"],"sourcesContent":["import { noop as css } from '../../../../helpers/noop-template'\n\nexport function DevToolsInfo({\n title,\n children,\n learnMoreLink,\n setIsOpen,\n setPreviousOpen,\n ...props\n}: {\n title: string\n children: React.ReactNode\n learnMoreLink: string\n setIsOpen: (isOpen: boolean) => void\n setPreviousOpen: (isOpen: boolean) => void\n}) {\n return (\n <div data-info-popover {...props}>\n <div className=\"dev-tools-info-container\">\n <h1 className=\"dev-tools-info-title\">{title}</h1>\n {children}\n <div className=\"dev-tools-info-button-container\">\n <button\n className=\"dev-tools-info-close-button\"\n onClick={() => {\n setIsOpen(false)\n setPreviousOpen(true)\n }}\n >\n Close\n </button>\n <a\n className=\"dev-tools-info-learn-more-button\"\n href={learnMoreLink}\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n Learn More\n </a>\n </div>\n </div>\n </div>\n )\n}\n\nexport const DEV_TOOLS_INFO_STYLES = css`\n [data-info-popover] {\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: 350px;\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-info-container {\n padding: var(--size-1_5);\n }\n\n .dev-tools-info-title {\n padding: var(--size-2) var(--size-1_5);\n color: var(--color-gray-1000);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n margin: 0;\n }\n\n .dev-tools-info-article {\n padding: var(--size-2) var(--size-1_5);\n color: var(--color-gray-1000);\n font-size: 14px;\n line-height: 20px;\n margin: 0;\n }\n .dev-tools-info-paragraph {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .dev-tools-info-button-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--size-2) var(--size-1_5);\n }\n\n .dev-tools-info-close-button {\n padding: 0 var(--size-2);\n height: 28px;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n transition: background var(--duration-short) ease;\n color: var(--color-gray-1000);\n border-radius: var(--rounded-md-2);\n border: 1px solid var(--color-gray-alpha-400);\n background: var(--color-background-200);\n }\n\n .dev-tools-info-close-button:hover {\n background: var(--color-gray-400);\n }\n\n .dev-tools-info-learn-more-button {\n align-content: center;\n padding: 0 var(--size-2);\n height: 28px;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n transition: background var(--duration-short) ease;\n color: var(--color-background-100);\n border-radius: var(--rounded-md-2);\n border: 1px solid var(--color-gray-1000);\n background: var(--color-gray-1000);\n }\n\n .dev-tools-info-learn-more-button:hover {\n text-decoration: none;\n color: var(--color-background-100);\n opacity: 0.9;\n }\n`\n"],"names":["DEV_TOOLS_INFO_STYLES","DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","css"],"mappings":";;;;;;;;;;;;;;;IA6CaA,qBAAqB;eAArBA;;IA3CGC,YAAY;eAAZA;;;;;8BAFY;;;;;;;;;;AAErB,SAASA,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,qBAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,sBAACC;YAAIE,WAAU;;8BACb,qBAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,sBAACK;oBAAIE,WAAU;;sCACb,qBAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,qBAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEO,MAAMjB,4BAAwBkB,kBAAG"}

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

@@ -0,0 +1,9 @@
+export declare function RouteInfo({ routeType, isOpen, setIsOpen, setPreviousOpen, ...props }: {
+    routeType: 'Static' | 'Dynamic';
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    setPreviousOpen: (isOpen: boolean) => void;
+    style?: React.CSSProperties;
+    ref?: React.RefObject<HTMLElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const DEV_TOOLS_INFO_ROUTE_INFO_STYLES: string;

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

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    DEV_TOOLS_INFO_ROUTE_INFO_STYLES: null,
+    RouteInfo: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEV_TOOLS_INFO_ROUTE_INFO_STYLES: function() {
+        return DEV_TOOLS_INFO_ROUTE_INFO_STYLES;
+    },
+    RouteInfo: function() {
+        return RouteInfo;
+    }
+});
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _jsxruntime = require("react/jsx-runtime");
+const _devtoolsinfo = require("./dev-tools-info");
+const _nooptemplate = require("../../../../helpers/noop-template");
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\n  .dev-tools-info-link {\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function StaticRouteContent() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
+        className: "dev-tools-info-article",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "The path",
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                        className: "dev-tools-info-code",
+                        children: window.location.pathname
+                    }),
+                    ' ',
+                    'is marked as "static" since it will be prerendered during the build time.'
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "With Static Rendering, routes are rendered at build time, or in the background after",
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                        className: "dev-tools-info-link",
+                        href: "https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "data revalidation"
+                    }),
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                className: "dev-tools-info-paragraph",
+                children: "Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page."
+            })
+        ]
+    });
+}
+function DynamicRouteContent() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
+        className: "dev-tools-info-article",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "The path",
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                        className: "dev-tools-info-code",
+                        children: window.location.pathname
+                    }),
+                    ' ',
+                    'is marked as "dynamic" since it will be rendered for each user at',
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                        children: "request time"
+                    }),
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                className: "dev-tools-info-paragraph",
+                children: "Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params."
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "During rendering, if a",
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                        className: "dev-tools-info-link",
+                        href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "Dynamic API"
+                    }),
+                    ' ',
+                    "or a",
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                        className: "dev-tools-info-link",
+                        href: "https://nextjs.org/docs/app/api-reference/functions/fetch",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "fetch"
+                    }),
+                    ' ',
+                    "option of",
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                        className: "dev-tools-info-code",
+                        children: "{ cache: 'no-store' }"
+                    }),
+                    ' ',
+                    "is discovered, Next.js will switch to dynamically rendering the whole route."
+                ]
+            })
+        ]
+    });
+}
+function RouteInfo(param) {
+    let { routeType, isOpen, setIsOpen, setPreviousOpen, ...props } = param;
+    const isStaticRoute = routeType === 'Static';
+    const learnMoreLink = isStaticRoute ? 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default' : 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_devtoolsinfo.DevToolsInfo, {
+        ...props,
+        title: "" + routeType + " Route",
+        learnMoreLink: learnMoreLink,
+        setIsOpen: setIsOpen,
+        setPreviousOpen: setPreviousOpen,
+        children: isStaticRoute ? /*#__PURE__*/ (0, _jsxruntime.jsx)(StaticRouteContent, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(DynamicRouteContent, {})
+    });
+}
+const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = (0, _nooptemplate.noop)(_templateObject());
+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=route-info.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { noop as css } from '../../../../helpers/noop-template'\n\nfunction StaticRouteContent() {\n return (\n <article className=\"dev-tools-info-article\">\n <p className=\"dev-tools-info-paragraph\">\n The path{' '}\n <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n is marked as \"static\" since it will be prerendered during the build\n time.\n </p>\n <p className=\"dev-tools-info-paragraph\">\n With Static Rendering, routes are rendered at build time, or in the\n background after{' '}\n <a\n className=\"dev-tools-info-link\"\n href=\"https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n data revalidation\n </a>\n .\n </p>\n <p className=\"dev-tools-info-paragraph\">\n Static rendering is useful when a route has data that is not\n personalized to the user and can be known at build time, such as a\n static blog post or a product page.\n </p>\n </article>\n )\n}\n\nfunction DynamicRouteContent() {\n return (\n <article className=\"dev-tools-info-article\">\n <p className=\"dev-tools-info-paragraph\">\n The path{' '}\n <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n is marked as \"dynamic\" since it will be rendered for each user at{' '}\n <strong>request time</strong>.\n </p>\n <p className=\"dev-tools-info-paragraph\">\n Dynamic rendering is useful when a route has data that is personalized\n to the user or has information that can only be known at request time,\n such as cookies or the URL's search params.\n </p>\n <p className=\"dev-tools-info-paragraph\">\n During rendering, if a{' '}\n <a\n className=\"dev-tools-info-link\"\n href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Dynamic API\n </a>{' '}\n or a{' '}\n <a\n className=\"dev-tools-info-link\"\n href=\"https://nextjs.org/docs/app/api-reference/functions/fetch\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n fetch\n </a>{' '}\n option of{' '}\n <code className=\"dev-tools-info-code\">{`{ cache: 'no-store' }`}</code>{' '}\n is discovered, Next.js will switch to dynamically rendering the whole\n route.\n </p>\n </article>\n )\n}\n\nexport function RouteInfo({\n routeType,\n isOpen,\n setIsOpen,\n setPreviousOpen,\n ...props\n}: {\n routeType: 'Static' | 'Dynamic'\n isOpen: boolean\n setIsOpen: (isOpen: boolean) => void\n setPreviousOpen: (isOpen: boolean) => void\n style?: React.CSSProperties\n ref?: React.RefObject<HTMLElement | null>\n}) {\n const isStaticRoute = routeType === 'Static'\n const learnMoreLink = isStaticRoute\n ? 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default'\n : 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering'\n return (\n <DevToolsInfo\n {...props}\n title={`${routeType} Route`}\n learnMoreLink={learnMoreLink}\n setIsOpen={setIsOpen}\n setPreviousOpen={setPreviousOpen}\n >\n {isStaticRoute ? <StaticRouteContent /> : <DynamicRouteContent />}\n </DevToolsInfo>\n )\n}\n\nexport const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = css`\n .dev-tools-info-link {\n }\n`\n"],"names":["DEV_TOOLS_INFO_ROUTE_INFO_STYLES","RouteInfo","StaticRouteContent","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMoreLink","DevToolsInfo","title","css"],"mappings":";;;;;;;;;;;;;;;IA2GaA,gCAAgC;eAAhCA;;IA/BGC,SAAS;eAATA;;;;;8BA5Ea;8BACD;;;;;;;;;;AAE5B,SAASC;IACP,qBACE,sBAACC;QAAQC,WAAU;;0BACjB,sBAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,qBAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,sBAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,qBAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,qBAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU;IACP,qBACE,sBAACX;QAAQC,WAAU;;0BACjB,sBAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,qBAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,qBAACM;kCAAO;;oBAAqB;;;0BAE/B,qBAACV;gBAAED,WAAU;0BAA2B;;0BAKxC,sBAACC;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,qBAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,qBAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,qBAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAMnF;AAEO,SAASH,UAAU,KAazB;IAbyB,IAAA,EACxBe,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAQJ,GAbyB;IAcxB,MAAMC,gBAAgBL,cAAc;IACpC,MAAMM,gBAAgBD,gBAClB,+GACA;IACJ,qBACE,qBAACE,0BAAY;QACV,GAAGH,KAAK;QACTI,OAAO,AAAC,KAAER,YAAU;QACpBM,eAAeA;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BAAgB,qBAACnB,wCAAwB,qBAACY;;AAGjD;AAEO,MAAMd,uCAAmCyB,kBAAG"}

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

@@ -0,0 +1,8 @@
+export declare function TurbopackInfo({ isOpen, setIsOpen, setPreviousOpen, ...props }: {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    setPreviousOpen: (isOpen: boolean) => void;
+    style?: React.CSSProperties;
+    ref?: React.RefObject<HTMLElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES: string;