diff --git a/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx
index 389bb92f226..1d5287652f2 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx
@@ -85,7 +85,7 @@ function BidirectionalDnDListBox(props) {
       style={{width: 300, height: 300, overflow: 'auto'}}>
       {item => (
         <ListBoxItem textValue={item.name} style={{display: 'flex', alignItems: 'center', gap: 8, flexDirection: 'row', justifyContent: 'flex-start'}}>
-          {item.type === 'folder' ? <Folder /> : <File />}
+          {item.type === 'folder' ? <Folder size={16} /> : <File size={16} />}
           <span>{item.name}</span>
         </ListBoxItem>
       )}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
index 8706cfd803e..770f1ab98d2 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
@@ -14,7 +14,7 @@ export default Layout;
 
 export const section = 'Blog';
 export const title = 'Blog';
-
+export const hideFromSearch = true;
 export const tags = ['blog', 'articles', 'posts'];
 
 # Blog
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
index cb881be4e06..1ca5bf0b8e2 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
@@ -14,6 +14,7 @@ export default Layout;
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
+export const hideFromSearch = true;
 
 # Releases
 
diff --git a/packages/dev/s2-docs/pages/s2/forms.mdx b/packages/dev/s2-docs/pages/s2/forms.mdx
index 91819b4641e..4288559894d 100644
--- a/packages/dev/s2-docs/pages/s2/forms.mdx
+++ b/packages/dev/s2-docs/pages/s2/forms.mdx
@@ -240,6 +240,7 @@ function Example() {
 
   return (
     <TextField
+      type="password"
       label="Password"
       placeholder="Choose a password"
       /*- begin highlight -*/
diff --git a/packages/dev/s2-docs/pages/s2/releases/index.mdx b/packages/dev/s2-docs/pages/s2/releases/index.mdx
index 4e4b662701a..2729fb13c99 100644
--- a/packages/dev/s2-docs/pages/s2/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/index.mdx
@@ -14,6 +14,7 @@ export default Layout;
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
+export const hideFromSearch = true;
 
 # Releases
 
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index 3d29323d221..cfbf7304ab3 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import {CopyButton} from './CopyButton';
 import {createCodeSandbox, getCodeSandboxFiles} from './CodeSandbox';
 import {createStackBlitz} from './StackBlitz';
@@ -120,7 +120,9 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
                     if (node instanceof HTMLHeadingElement && node.id) {
                       url.hash = '#' + node.id;
                     }
-                    navigator.clipboard.writeText(url.toString());
+                    navigator.clipboard.writeText(url.toString()).catch(() => {
+                      ToastQueue.negative('Failed to copy link.');
+                    });
                   }}>
                   <LinkIcon />
                   <Text slot="label">Copy link</Text>
@@ -300,7 +302,9 @@ function ShadcnDialog({registryUrl}) {
           <Button
             variant="accent"
             onPress={() => {
-              navigator.clipboard.writeText(preRef.current!.textContent!);
+              navigator.clipboard.writeText(preRef.current!.textContent!).catch(() => {
+                ToastQueue.negative('Failed to copy command. Please try again.');
+              });
               close();
             }}>
             Copy and close
diff --git a/packages/dev/s2-docs/src/CopyButton.tsx b/packages/dev/s2-docs/src/CopyButton.tsx
index ef0fc08197a..c045e19f9b5 100644
--- a/packages/dev/s2-docs/src/CopyButton.tsx
+++ b/packages/dev/s2-docs/src/CopyButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
 import React, {useEffect, useRef, useState} from 'react';
@@ -44,7 +44,7 @@ export function CopyButton({text, getText, ariaLabel = 'Copy', tooltip = 'Copy',
       setIsCopied(true);
       timeout.current = setTimeout(() => setIsCopied(false), 2000);
     }).catch(() => {
-      // noop
+      ToastQueue.negative('Failed to copy.');
     });
   };
 
diff --git a/packages/dev/s2-docs/src/Header.tsx b/packages/dev/s2-docs/src/Header.tsx
index 6353c74f703..ba79a8a6fa0 100644
--- a/packages/dev/s2-docs/src/Header.tsx
+++ b/packages/dev/s2-docs/src/Header.tsx
@@ -6,7 +6,6 @@ import BetaApp from '@react-spectrum/s2/icons/BetaApp';
 import {flushSync} from 'react-dom';
 import {getLibraryFromPage, getLibraryIcon, getLibraryLabel} from './library';
 import GithubLogo from './icons/GithubLogo';
-import {MarkdownMenu} from './MarkdownMenu';
 // @ts-ignore
 import {PageProps} from '@parcel/rsc';
 import React, {CSSProperties, useId, useState} from 'react';
@@ -115,7 +114,6 @@ export default function Header(props: PageProps) {
               <BetaApp />
               <Text>Beta Preview</Text>
             </Badge>
-            <MarkdownMenu url={currentPage.url} />
             <ActionButton aria-label="React Spectrum GitHub repo" size="L" isQuiet onPress={() => window.open('https://github.com/adobe/react-spectrum', '_blank', 'noopener,noreferrer')}>
               <GithubLogo />
             </ActionButton>
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index d88fab55d79..22eefb1ce6f 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -4,7 +4,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Close from '@react-spectrum/s2/icons/Close';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
@@ -50,7 +50,7 @@ export function useCopyImport() {
       setCopiedId(id);
       timeout.current = setTimeout(() => setCopiedId(null), 2000);
     }).catch(() => {
-      // noop
+      ToastQueue.negative('Failed to copy import statement.');
     });
   }, []);
 
@@ -124,16 +124,17 @@ const itemStyle = style({
 });
 
 interface IconSearchViewProps {
-  filteredItems: typeof iconList
+  filteredItems: typeof iconList,
+  listBoxClassName?: string
 }
 
-export function IconSearchView({filteredItems}: IconSearchViewProps) {
+export function IconSearchView({filteredItems, listBoxClassName}: IconSearchViewProps) {
   let {copiedId, handleCopyImport} = useCopyImport();
 
   return (
     <>
       <CopyInfoMessage />
-      <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} />
+      <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} listBoxClassName={listBoxClassName} />
     </>
   );
 }
@@ -218,7 +219,7 @@ export function IconSearchSkeleton() {
         <ListBox
           items={mockItems}
           layout="grid"
-          className={style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}>
+          className={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})}>
           {(item) => <SkeletonIconItem item={item} />}
         </ListBox>
       </Virtualizer>
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index 1d5f7cd4f9f..be0a82112a9 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
-import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 // @ts-ignore
 import Gradient from '@react-spectrum/s2/icons/Gradient';
@@ -100,7 +100,7 @@ let handleCopyImport = (id: string, variant: string, gradientStyle: string) => {
   navigator.clipboard.writeText(importText).then(() => {
     // noop
   }).catch(() => {
-    // noop
+    ToastQueue.negative('Failed to copy import statement.');
   });
 };
 
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index f10f7c23d47..43757368e28 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -1,6 +1,7 @@
 import {ExampleList} from './ExampleList';
-import {MobileOnPageNav, Nav, OnPageNav, SideNav, SideNavItem, SideNavLink} from '../src/Nav';
-import type {Page, PageProps, TocNode} from '@parcel/rsc';
+import {Nav, PendingPageProvider} from '../src/Nav';
+import {OptimisticMobileToc, OptimisticToc} from './OptimisticToc';
+import type {Page, PageProps} from '@parcel/rsc';
 import React, {ReactElement} from 'react';
 // @ts-ignore
 import '../src/client';
@@ -9,11 +10,13 @@ import internationalizedFavicon from 'url:../assets/internationalized.ico';
 // @ts-ignore
 import reactAriaFavicon from 'url:../assets/react-aria.ico';
 import './anatomy.css';
+import './footer.css';
 import ChevronRightIcon from '@react-spectrum/s2/icons/ChevronRight';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
 import {CodeBlock} from './CodeBlock';
 import {CodePlatterProvider} from './CodePlatter';
+import {Divider, Provider, UNSTABLE_ToastContainer as ToastContainer} from '@react-spectrum/s2';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
 import {getTextWidth} from './textWidth';
@@ -22,7 +25,7 @@ import Header from './Header';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Link, TitleLink} from './Link';
 import {MobileHeader} from './MobileHeader';
-import {PickerItem, Provider} from '@react-spectrum/s2';
+import {NavigationSuspense} from './NavigationSuspense';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
 import {TypeLink} from './types';
@@ -77,10 +80,6 @@ const subPageComponents = (previousPage?: Page) => ({
   )
 });
 
-function anchorId(children) {
-  return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
-}
-
 const getTitle = (currentPage: Page): string => {
   const explicitTitle = (currentPage as any).pageTitle || currentPage.exports?.pageTitle;
   if (explicitTitle && explicitTitle !== currentPage.tableOfContents?.[0]?.title && explicitTitle !== currentPage.name) {
@@ -139,6 +138,36 @@ let articleStyles = style({
   height: 'fit'
 });
 
+function Footer() {
+  const year = new Date().getFullYear();
+  return (
+    <footer
+      className={style({
+        marginTop: 32,
+        paddingY: 12
+      })}>
+      <Divider size="S" />
+      <ul
+        className={style({
+          display: 'flex',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+          paddingX: 12,
+          margin: 0,
+          marginTop: 16,
+          font: 'body-2xs',
+          listStyleType: 'none'
+        })}>
+        <li>Copyright © {year} Adobe. All rights reserved.</li>
+        <li><Link isQuiet href="//www.adobe.com/privacy.html" variant="secondary">Privacy</Link></li>
+        <li><Link isQuiet href="//www.adobe.com/legal/terms.html" variant="secondary">Terms of Use</Link></li>
+        <li><Link isQuiet href="//www.adobe.com/privacy/cookies.html" variant="secondary">Cookies</Link></li>
+        <li><Link isQuiet href="//www.adobe.com/privacy/ca-rights.html" variant="secondary">Do not sell my personal information</Link></li>
+      </ul>
+    </footer>
+  );
+}
+
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
   let hasToC = !currentPage.exports?.hideNav && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
@@ -218,120 +247,107 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             gap: {
               default: 0,
               lg: 12
+            },
+            minHeight: {
+              default: 'screen',
+              lg: 'auto'
             }
           })}>
           <Header pages={pages} currentPage={currentPage} />
-          <MobileHeader
-            toc={(currentPage.tableOfContents?.[0]?.children?.length ?? 0) > 1 ? <MobileToc key="toc" toc={currentPage.tableOfContents ?? []} currentPage={currentPage} /> : null}
-            pages={pages}
-            currentPage={currentPage} />
-          <div className={style({display: 'flex', width: 'full'})}>
-            {currentPage.exports?.hideNav ? null : <Nav pages={pages} currentPage={currentPage} />}
-            <main
-              key={currentPage.url}
-              style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
-              className={style({
-                isolation: 'isolate',
-                backgroundColor: 'base',
-                padding: {
-                  default: 12,
-                  lg: 40
-                },
-                borderRadius: {
-                  default: 'none',
-                  lg: 'xl'
-                },
-                boxShadow: {
-                  lg: 'emphasized'
-                },
-                width: 'full',
-                boxSizing: 'border-box',
-                flexGrow: 1,
-                display: 'flex',
-                justifyContent: 'space-between',
-                position: 'relative',
-                height: {
-                  lg: '[calc(100vh - 72px)]'
-                },
-                overflow: {
-                  lg: 'auto'
-                }
-              })}>
-              <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
-                <article
-                  className={articleStyles({isWithToC: hasToC})}>
-                  {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
-                  {React.cloneElement(children, {
-                    components: isSubpage ?
-                      subPageComponents(parentPage) :
-                      components,
-                    pages
-                  })}
-                  {currentPage.exports?.relatedPages && (
-                    <MobileRelatedPages pages={currentPage.exports.relatedPages} />
-                  )}
-                </article>
-              </CodePlatterProvider>
-              {hasToC && <aside
+          <PendingPageProvider currentPage={currentPage}>
+            <MobileHeader
+              toc={<OptimisticMobileToc currentPage={currentPage} />}
+              pages={pages}
+              currentPage={currentPage} />
+            <div className={style({display: 'flex', width: 'full', flexGrow: {default: 1, lg: 0}})}>
+              {currentPage.exports?.hideNav ? null : <Nav pages={pages} currentPage={currentPage} />}
+              <main
+                key={currentPage.url}
+                style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
                 className={style({
-                  position: 'sticky',
-                  top: 0,
-                  height: 'fit',
-                  maxHeight: 'screen',
-                  overflow: 'auto',
-                  paddingY: 32,
-                  boxSizing: 'border-box',
-                  display: {
+                  isolation: 'isolate',
+                  backgroundColor: 'base',
+                  padding: {
+                    default: 12,
+                    lg: 40
+                  },
+                  borderRadius: {
                     default: 'none',
-                    lg: 'block'
+                    lg: 'xl'
+                  },
+                  boxShadow: {
+                    lg: 'emphasized'
+                  },
+                  width: 'full',
+                  boxSizing: 'border-box',
+                  flexGrow: 1,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  position: 'relative',
+                  height: {
+                    lg: '[calc(100vh - 72px)]'
+                  },
+                  overflow: {
+                    lg: 'auto'
                   }
                 })}>
-                <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
-                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
-                {currentPage.exports?.relatedPages && (
-                  <RelatedPages pages={currentPage.exports.relatedPages} />
-                )}
-              </aside>}
-            </main>
-          </div>
+                <div
+                  className={style({
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    width: 'full'
+                  })}>
+                  <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
+                    <NavigationSuspense pages={pages}>
+                      <article
+                        className={articleStyles({isWithToC: hasToC})}>
+                        {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
+                        {React.cloneElement(children, {
+                          components: isSubpage ?
+                            subPageComponents(parentPage) :
+                            components,
+                          pages
+                        })}
+                        {currentPage.exports?.relatedPages && (
+                          <MobileRelatedPages pages={currentPage.exports.relatedPages} />
+                        )}
+                      </article>
+                    </NavigationSuspense>
+                  </CodePlatterProvider>
+                  <Footer />
+                </div>
+                {hasToC && <aside
+                  className={style({
+                    position: 'sticky',
+                    top: 0,
+                    height: {
+                      default: 'fit',
+                      lg: '[calc(100vh - 72px)]'
+                    },
+                    paddingY: 32,
+                    paddingX: 4,
+                    boxSizing: 'border-box',
+                    width: 180,
+                    flexShrink: 0,
+                    display: {
+                      default: 'none',
+                      lg: 'flex'
+                    },
+                    flexDirection: 'column'
+                  })}>
+                  <OptimisticToc currentPage={currentPage} />
+                </aside>}
+              </main>
+            </div>
+          </PendingPageProvider>
         </div>
+        <ToastContainer placement="bottom" />
       </body>
     </Provider>
   );
 }
 
-function Toc({toc}) {
-  return (
-    <OnPageNav>
-      <SideNav>
-        {toc.map((c, i) => (
-          <SideNavItem key={i}>
-            <SideNavLink href={'#' + anchorId(c.title)}>{c.title}</SideNavLink>
-            {c.children.length > 0 && <Toc toc={c.children} />}
-          </SideNavItem>
-        ))}
-      </SideNav>
-    </OnPageNav>
-  );
-}
-
-function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
-  return (
-    <div className={style({paddingTop: 24})}>
-      <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Related pages</div>
-      <OnPageNav>
-        <SideNav>
-          {pages.map((page, i) => (
-            <SideNavItem key={i}>
-              <SideNavLink href={page.url}>{page.title}</SideNavLink>
-            </SideNavItem>
-          ))}
-        </SideNav>
-      </OnPageNav>
-    </div>
-  );
-}
-
 function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
   const P = components.p;
   const Li = components.li;
@@ -360,35 +376,6 @@ function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>
     </div>
   );
 }
-
-function MobileToc({toc, currentPage}) {
-  let relatedPages = currentPage.exports?.relatedPages;
-  return (
-    <MobileOnPageNav currentPage={currentPage}>
-      {renderMobileToc(toc)}
-      {relatedPages && relatedPages.map((page, i) => (
-        <PickerItem key={`related-${i}`} id={page.url} href={page.url}>{page.title}</PickerItem>
-      ))}
-    </MobileOnPageNav>
-  );
-}
-
-function renderMobileToc(toc: TocNode[], seen = new Map()) {
-  return toc.map((c) => {
-    let href = c.level === 1 ? '#top' : '#' + anchorId(c.title);
-    if (seen.has(href)) {
-      seen.set(href, seen.get(href) + 1);
-      href += '-' + seen.get(href);
-    } else {
-      seen.set(href, 1);
-    }
-    return (<React.Fragment key={href}>
-      <PickerItem id={href} href={href}>{c.title}</PickerItem>
-      {c.children.length > 0 && renderMobileToc(c.children, seen)}
-    </React.Fragment>);
-  });
-}
-
 export function Time({date}: {date: string}) {
   let dateObj = new Date(date);
   return (
diff --git a/packages/dev/s2-docs/src/MarkdownMenu.tsx b/packages/dev/s2-docs/src/MarkdownMenu.tsx
index 18dbc2a9dba..3faca5a37cd 100644
--- a/packages/dev/s2-docs/src/MarkdownMenu.tsx
+++ b/packages/dev/s2-docs/src/MarkdownMenu.tsx
@@ -1,9 +1,12 @@
 'use client';
 
-import {ActionButton, Menu, MenuItem, MenuTrigger, Text} from '@react-spectrum/s2';
+import {ActionButton, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
-import OpenIn from '@react-spectrum/s2/icons/OpenIn';
-import React, {useCallback} from 'react';
+import {getLibraryFromUrl, getLibraryLabel} from './library';
+import More from '@react-spectrum/s2/icons/More';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 interface MarkdownMenuProps {
   url: string | undefined
@@ -11,51 +14,63 @@ interface MarkdownMenuProps {
 
 export function MarkdownMenu({url}: MarkdownMenuProps) {
   let mdUrl = (url ?? '').replace(/\.html?$/i, '') + '.md';
+  let [isCopied, setIsCopied] = useState(false);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  
+  let pageUrl = typeof window !== 'undefined' && url ? new URL(url, window.location.origin).href : url ?? '';
+  let fullMdUrl = typeof window !== 'undefined' && mdUrl ? new URL(mdUrl, window.location.origin).href : mdUrl;
+  let library = url ? getLibraryLabel(getLibraryFromUrl(url)) : '';
+  let aiPrompt = `Answer questions about the following ${library} documentation page: ${pageUrl}\nMarkdown source: ${fullMdUrl}`;
+  let chatGptUrl = `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`;
+  let claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(aiPrompt)}`;
 
-  let onAction = useCallback(async (key: import('react-aria-components').Key) => {
-    let action = String(key);
-    switch (action) {
-      case 'copy': {
-        if (typeof navigator !== 'undefined' && navigator.clipboard) {
-          try {
-            let response = await fetch(mdUrl);
-            // Fallback to copying the URL if the request fails or isn't ok.
-            if (!response.ok) {
-              throw new Error('Failed to fetch markdown');
-            }
-
-            let markdown = await response.text();
-            await navigator.clipboard.writeText(markdown);
-          } catch {
-            // ignore failures (e.g., insecure context, network errors)
-          }
-        }
-        break;
+  useEffect(() => {
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
       }
-      case 'view': {
-        if (typeof window !== 'undefined') {
-          window.open(mdUrl, '_blank');
-        }
-        break;
+    };
+  }, []);
+
+  let handleCopy = useCallback(async () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      try {
+        let response = await fetch(mdUrl);
+        let markdown = await response.text();
+        await navigator.clipboard.writeText(markdown);
+        setIsCopied(true);
+        timeout.current = setTimeout(() => setIsCopied(false), 2000);
+      } catch {
+        ToastQueue.negative('Failed to copy markdown.');
       }
     }
   }, [mdUrl]);
 
   return (
-    <MenuTrigger>
-      <ActionButton size="L" isQuiet aria-label="Markdown options">
-        <Copy />
+    <div className={style({display: 'flex', justifyContent: 'space-between', paddingX: 4, paddingBottom: 16})}>
+      <ActionButton isQuiet size="M" onPress={handleCopy}>
+        {isCopied ? <CheckmarkCircle /> : <Copy />}
+        <Text>Copy for LLM</Text>
       </ActionButton>
-      <Menu onAction={onAction}>
-        <MenuItem id="copy">
-          <Copy />
-          <Text>Copy Page as Markdown</Text>
-        </MenuItem>
-        <MenuItem id="view">
-          <OpenIn />
-          <Text>View Page as Markdown</Text>
-        </MenuItem>
-      </Menu>
-    </MenuTrigger>
+      <MenuTrigger>
+        <ActionButton size="M" isQuiet aria-label="Markdown options">
+          <More />
+        </ActionButton>
+        <Menu>
+          <MenuItem id="view" href={mdUrl} target="_blank">
+            View as Markdown
+          </MenuItem>
+          <MenuItem id="chatgpt" href={chatGptUrl} target="_blank">
+            Open in ChatGPT
+          </MenuItem>
+          <MenuItem id="claude" href={claudeUrl} target="_blank">
+            Open in Claude
+          </MenuItem>
+        </Menu>
+      </MenuTrigger>
+    </div>
   );
 } 
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index d8287476c45..4eb064a2558 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -1,15 +1,28 @@
 'use client';
 
+import {Autocomplete, Key, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
 import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import {CloseButton, Content, Heading, IllustratedMessage, SearchField, Tag, TagGroup, TextContext} from '@react-spectrum/s2';
+import {CloseButton, SearchField, TextContext} from '@react-spectrum/s2';
 import {ComponentCardItem, ComponentCardView} from './ComponentCardView';
+import {
+  filterAndSortSearchItems,
+  getOrderedLibraries,
+  getPageTitle,
+  getResourceTags,
+  SearchEmptyState,
+  type Section,
+  sortItemsForDisplay,
+  useFilteredIcons,
+  useSearchTagSelection,
+  useSectionTagsForDisplay
+} from './searchUtils';
 import {getLibraryFromPage} from './library';
-import {type Library, TAB_DEFS} from './constants';
-// eslint-disable-next-line monorepo/no-internal-import
-import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
-import {OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
-import type {PageProps} from '@parcel/rsc';
-import React, {ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
+// @ts-ignore
+import {type Library} from './constants';
+import {Page} from '@parcel/rsc';
+import React, {lazy, ReactNode, Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {SearchTagGroups} from './SearchTagGroups';
 import {stripMarkdown} from './SearchMenu';
 import {useId} from '@react-aria/utils';
 
@@ -127,6 +140,8 @@ const mobileTabPanel = style({
   outlineStyle: 'none'
 });
 
+const IconSearchView = lazy(() => import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView})));
+
 const stickySearchContainer = style({
   width: 'full',
   position: 'sticky',
@@ -171,7 +186,9 @@ function MobileTabList({children}: MobileTabListProps) {
         </RACTabList>
       </div>
       <div className={style({paddingEnd: 12, flexShrink: 0})}>
-        <CloseButton />
+        <Provider values={[[OverlayTriggerStateContext, null]]}>
+          <CloseButton onPress={() => {}} />
+        </Provider>
       </div>
     </div>
   );
@@ -187,7 +204,7 @@ function MobileTabPanel(props: Omit<RACTabPanelProps, 'children'> & {children: R
   );
 }
 
-export function MobileSearchMenu({pages, currentPage}) {
+export function MobileSearchMenu({pages, currentPage}: {pages: Page[], currentPage: Page}) {
   return (
     <MobileCustomDialog padding="none">
       <MobileNav pages={pages} currentPage={currentPage} />
@@ -209,11 +226,10 @@ const MobileCustomDialog = function MobileCustomDialog(props: MobileDialogProps)
   );
 };
 
-function MobileNav({pages, currentPage}: PageProps) {
+function MobileNav({pages, currentPage}: {pages: Page[], currentPage: Page}) {
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
   let [searchFocused, setSearchFocused] = useState(false);
   let [searchValue, setSearchValue] = useState('');
-  let prevSearchWasEmptyRef = useRef<boolean>(true);
   let scrollContainerRef = useRef<HTMLDivElement>(null);
   let [selectedLibrary, setSelectedLibrary] = useState<Library>(getLibraryFromPage(currentPage));
 
@@ -229,45 +245,8 @@ function MobileNav({pages, currentPage}: PageProps) {
     return sectionsMap;
   }, [pages]);
 
-  let currentLibrarySectionArray = useMemo(() => {
-    let librarySections = getSectionsForLibrary(selectedLibrary);
-    let sectionArray = [...librarySections.keys()];
-    // Ensure order matches TagGroup: 'Components' first, then alphabetical
-    sectionArray.sort((a, b) => {
-      if (a === 'Components') {
-        return -1;
-      }
-      if (b === 'Components') {
-        return 1;
-      }
-      return a.localeCompare(b);
-    });
-    return sectionArray;
-  }, [getSectionsForLibrary, selectedLibrary]);
-
-  let [selectedSection, setSelectedSection] = useState<string | undefined>(() => currentPage.exports?.section || currentLibrarySectionArray[0]);
-
-  // Ensure selected section is valid for the current library
-  const sectionIds = searchValue.trim().length > 0 ? ['all', ...currentLibrarySectionArray] : currentLibrarySectionArray;
-  if (!selectedSection || !sectionIds.includes(selectedSection)) {
-    setSelectedSection(currentLibrarySectionArray[0] || 'Components');
-  }
-
-  let getOrderedLibraries = () => {
-    let allLibraries = (Object.keys(TAB_DEFS) as Library[]).map(id => ({id, label: TAB_DEFS[id].label, icon: TAB_DEFS[id].icon}));
-    let currentLibId = getLibraryFromPage(currentPage);
 
-    // Move current library to first position
-    let currentLibraryIndex = allLibraries.findIndex(lib => lib.id === currentLibId);
-    if (currentLibraryIndex > 0) {
-      let currentLib = allLibraries.splice(currentLibraryIndex, 1)[0];
-      allLibraries.unshift(currentLib);
-    }
-
-    return allLibraries;
-  };
-
-  let libraries = getOrderedLibraries();
+  let libraries = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
 
   let handleSearchFocus = () => {
     setSearchFocused(true);
@@ -286,36 +265,15 @@ function MobileNav({pages, currentPage}: PageProps) {
     }
   };
 
-  let filterPages = (pages: any[], searchValue: string) => {
-    if (!searchValue.trim()) {
-      return pages;
-    }
-
-    let searchLower = searchValue.toLowerCase();
-
-    // Filter items where name or tags start with search value
-    let matchedPages = pages.filter(page => {
-      let pageTitle = title(page).toLowerCase();
-      let nameMatch = pageTitle.startsWith(searchLower);
-      let tags: string[] = page.exports?.tags || [];
-      let tagMatch = tags.some(tag => tag.toLowerCase().startsWith(searchLower));
-      return nameMatch || tagMatch;
-    });
-
-    // Sort to prioritize name matches over tag matches
-    return matchedPages.sort((a, b) => {
-      let aNameMatch = title(a).toLowerCase().startsWith(searchLower);
-      let bNameMatch = title(b).toLowerCase().startsWith(searchLower);
-
-      if (aNameMatch && !bNameMatch) {
-        return -1;
+  let filterPages = (pages: Page[], searchValue: string) => {
+    return filterAndSortSearchItems(pages, searchValue, {
+      getName: (page: Page) => getPageTitle(page),
+      getTags: (page: Page) => page.exports?.tags || [],
+      getDate: (page: Page) => page.exports?.date,
+      shouldUseDateSort: (page: Page) => {
+        const section = page.exports?.section;
+        return section === 'Blog' || section === 'Releases';
       }
-      if (!aNameMatch && bNameMatch) {
-        return 1;
-      }
-
-      // If both match by name or both match by tag, maintain original order
-      return 0;
     });
   };
 
@@ -326,8 +284,8 @@ function MobileNav({pages, currentPage}: PageProps) {
     let filteredPages = filterPages(pages, searchValue);
 
     return filteredPages
-      .sort((a, b) => title(a).localeCompare(title(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
+      .sort((a, b) => getPageTitle(a).localeCompare(getPageTitle(b)))
+      .map(page => ({id: page.url.replace(/^\//, ''), name: getPageTitle(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
   };
 
   let getAllContent = (libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
@@ -335,8 +293,8 @@ function MobileNav({pages, currentPage}: PageProps) {
     let allPages = Array.from(librarySections.values()).flat();
     let filteredPages = filterPages(allPages, searchValue);
     return filteredPages
-      .sort((a, b) => title(a).localeCompare(title(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
+      .sort((a, b) => getPageTitle(a).localeCompare(getPageTitle(b)))
+      .map(page => ({id: page.url.replace(/^\//, ''), name: getPageTitle(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
   };
 
   let getItemsForSelection = (section: string | undefined, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
@@ -347,24 +305,20 @@ function MobileNav({pages, currentPage}: PageProps) {
     if (section === 'all') {
       items = getAllContent(libraryId, searchValue);
     } else {
-      items = getSectionContent(section, libraryId, searchValue);
+      // Check if this is a resource tag (e.g., icons)
+      const libraryResourceTags = getResourceTags(libraryId as Library);
+      const libraryResourceTagIds = libraryResourceTags.map(t => t.id);
+      if (libraryResourceTagIds.includes(section)) {
+        // Resources are handled separately, return empty for now
+        return [];
+      }
+      // Convert lowercase ID back to section name for getSectionContent
+      const librarySections = getSectionNamesForLibrary(libraryId);
+      const sectionName = librarySections.find(s => s.toLowerCase() === section) || section;
+      items = getSectionContent(sectionName, libraryId, searchValue);
     }
 
-    // Sort to show "Introduction" first when search is empty
-    if (searchValue.trim().length === 0) {
-      items = [...items].sort((a, b) => {
-        const aIsIntro = a.name === 'Introduction';
-        const bIsIntro = b.name === 'Introduction';
-
-        if (aIsIntro && !bIsIntro) {
-          return -1;
-        }
-        if (!aIsIntro && bIsIntro) {
-          return 1;
-        }
-        return 0;
-      });
-    }
+    items = sortItemsForDisplay(items, searchValue);
 
     return items;
   };
@@ -389,28 +343,52 @@ function MobileNav({pages, currentPage}: PageProps) {
 
   let currentLibrarySections = getSectionNamesForLibrary(selectedLibrary);
 
-  let tags = useMemo(() => {
-    let base = currentLibrarySections.map(name => ({id: name, name}));
-    if (searchValue.trim().length > 0) {
-      return [{id: 'all', name: 'All'}, ...base];
-    }
-    return base;
-  }, [currentLibrarySections, searchValue]);
+  const sectionsForDisplay: Section[] = useMemo(() => {
+    return currentLibrarySections.map(name => ({
+      id: name.toLowerCase(),
+      name,
+      children: []
+    }));
+  }, [currentLibrarySections]);
+
+  const initialSelectedSection = useMemo(() => {
+    const section = currentPage.exports?.section;
+    const firstSection = currentLibrarySections[0]?.toLowerCase() || 'components';
+    return section ? section.toLowerCase() : firstSection;
+  }, [currentPage, currentLibrarySections]);
+
+  const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
+
+  const [selectedSection, setSelectedSection] = useSearchTagSelection(
+    searchValue,
+    sectionsForDisplay.map(s => ({id: s.id, name: s.name})),
+    resourceTags,
+    initialSelectedSection
+  );
 
-  // Auto-select All when search starts
-  useEffect(() => {
-    let isEmpty = searchValue.trim().length === 0;
-    if (prevSearchWasEmptyRef.current && !isEmpty) {
-      setSelectedSection('all');
-    }
-    prevSearchWasEmptyRef.current = isEmpty;
-  }, [searchValue]);
+  const sectionTags = useSectionTagsForDisplay(
+    sectionsForDisplay,
+    searchValue,
+    selectedSection,
+    resourceTags.map(t => t.id)
+  );
 
+  const filteredIcons = useFilteredIcons(searchValue);
+  const iconFilter = useIconFilter();
 
-  let handleTagSelection = (keys: any) => {
-    let key = [...keys][0] as string;
-    setSelectedSection(key);
-  };
+  let handleSectionSelectionChange = useCallback((keys: Iterable<Key>) => {
+    const firstKey = Array.from(keys)[0] as string;
+    if (firstKey) {
+      setSelectedSection(firstKey);
+    }
+  }, [setSelectedSection]);
+
+  let handleResourceSelectionChange = useCallback((keys: Iterable<Key>) => {
+    const firstKey = Array.from(keys)[0] as string;
+    if (firstKey) {
+      setSelectedSection(firstKey);
+    }
+  }, [setSelectedSection]);
 
   useEffect(() => {
     if (scrollContainerRef.current) {
@@ -431,7 +409,7 @@ function MobileNav({pages, currentPage}: PageProps) {
             if (!searchFocused) {
               let nextSections = getSectionNamesForLibrary(newLib);
               if (nextSections.length > 0) {
-                setSelectedSection(nextSections[0]);
+                setSelectedSection(nextSections[0].toLowerCase());
               }
             }
           }}>
@@ -447,62 +425,57 @@ function MobileNav({pages, currentPage}: PageProps) {
               ))}
             </MobileTabList>
           </div>
-          {libraries.map(library => (
-            <MobileTabPanel key={library.id} id={library.id}>
-              <div className={stickySearchContainer}>
-                <SearchField
-                  aria-label="Search"
-                  value={searchValue}
-                  onChange={handleSearchChange}
-                  onFocus={handleSearchFocus}
-                  onBlur={handleSearchBlur}
-                  styles={style({marginX: 16})} />
-                <div className={style({overflow: 'auto', paddingX: 8, paddingBottom: 8})}>
-                  <TagGroup
-                    aria-label="Navigation sections"
-                    selectionMode="single"
-                    selectedKeys={selectedSection ? [selectedSection] : []}
-                    disallowEmptySelection
-                    onSelectionChange={handleTagSelection}
-                    UNSAFE_style={{whiteSpace: 'nowrap'}}
-                    items={tags}>
-                    {tag => <Tag key={tag.id} id={tag.id}>{tag.name}</Tag>}
-                  </TagGroup>
-                </div>
-              </div>
-              <div ref={scrollContainerRef} className={style({paddingX: 12})}>
-                <ComponentCardView
-                  onAction={() => {
-                    setSearchValue('');
-                    overlayTriggerState?.close();
-                  }}
-                  items={getItemsForSelection(selectedSection, library.id, searchValue)}
-                  ariaLabel="Pages"
-                  size="S"
-                  renderEmptyState={() => (
-                    <IllustratedMessage styles={style({margin: 32})}>
-                      <NoSearchResults />
-                      <Heading>No results</Heading>
-                      {searchValue.trim().length > 0 ? (
-                        <Content>
-                          No results found for <strong className={style({fontWeight: 'bold'})}>{searchValue}</strong> in {selectedLibrary}.
-                        </Content>
-                      ) : (
-                        <Content>
-                          No results found in {selectedLibrary}.
-                        </Content>
-                      )}
-                    </IllustratedMessage>
-                  )} />
-              </div>
-            </MobileTabPanel>
-          ))}
+          {libraries.map(library => {
+            const isIconsSelected = selectedSection === 'icons' && library.id === 'react-spectrum';
+            return (
+              <MobileTabPanel key={library.id} id={library.id}>
+                <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
+                  <div className={stickySearchContainer}>
+                    <SearchField
+                      aria-label="Search"
+                      value={searchValue}
+                      onChange={handleSearchChange}
+                      onFocus={handleSearchFocus}
+                      onBlur={handleSearchBlur}
+                      styles={style({marginX: 16})} />
+                    <div className={style({overflow: 'auto', paddingX: 8, paddingBottom: 8})}>
+                      <SearchTagGroups
+                        sectionTags={sectionTags}
+                        resourceTags={resourceTags}
+                        selectedTagId={selectedSection}
+                        onSectionSelectionChange={handleSectionSelectionChange}
+                        onResourceSelectionChange={handleResourceSelectionChange}
+                        isMobile
+                        wrapperClassName={style({paddingTop: 0})}
+                        contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 0})} />
+                    </div>
+                  </div>
+                  <div ref={scrollContainerRef} className={style({paddingX: 12, flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
+                    {isIconsSelected ? (
+                      <Suspense fallback={<IconSearchSkeleton />}>
+                        <IconSearchView 
+                          filteredItems={filteredIcons} 
+                          listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
+                      </Suspense>
+                    ) : (
+                      <ComponentCardView
+                        onAction={() => {
+                          setSearchValue('');
+                          overlayTriggerState?.close();
+                        }}
+                        items={getItemsForSelection(selectedSection, library.id, searchValue)}
+                        ariaLabel="Pages"
+                        size="S"
+                        renderEmptyState={() => <SearchEmptyState searchValue={searchValue} libraryLabel={library.label} />} />
+                    )}
+                  </div>
+                </Autocomplete>
+              </MobileTabPanel>
+            );
+          })}
         </RACTabs>
       </div>
     </div>
   );
 }
 
-function title(page) {
-  return page.exports?.title ?? page.tableOfContents?.[0]?.title ?? page.name;
-}
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 6bfdc39b5c9..cd1c00c64d1 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -3,9 +3,35 @@
 import {focusRing, size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getLibraryFromPage} from './library';
 import {Link} from 'react-aria-components';
-import type {PageProps} from '@parcel/rsc';
+import type {Page, PageProps} from '@parcel/rsc';
 import {Picker, pressScale} from '@react-spectrum/s2';
-import React, {createContext, useContext, useEffect, useRef, useState} from 'react';
+import React, {createContext, startTransition, useContext, useEffect, useOptimistic, useRef, useState} from 'react';
+
+export function PendingPageProvider({children, currentPage}: {children: React.ReactNode, currentPage: Page}) {
+  let [displayPage, setDisplayPage] = useOptimistic(
+    currentPage,
+    (_, pendingPage: Page) => pendingPage
+  );
+  
+  useEffect(() => {
+    const unsubscribe = subscribeToClearPendingPage(() => {
+      startTransition(() => {
+        setDisplayPage(currentPage);
+      });
+    });
+    return unsubscribe;
+  }, [currentPage, setDisplayPage]);
+
+  let pendingPage = displayPage.url !== currentPage.url ? displayPage : null;
+
+  return (
+    <PendingPageContext.Provider value={pendingPage}>
+      <PendingNavContext.Provider value={setDisplayPage}>
+        {children}
+      </PendingNavContext.Provider>
+    </PendingPageContext.Provider>
+  );
+}
 
 export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
@@ -30,6 +56,8 @@ export function Nav({pages, currentPage}: PageProps) {
   }
 
   let [maskSize, setMaskSize] = useState(0);
+  let pendingPage = usePendingPage();
+  let displayUrl = pendingPage?.url ?? currentPage.url;
 
   let sortedSections = [...sections].sort((a, b) => {
     if (a[0] === 'Getting started') {
@@ -54,7 +82,7 @@ export function Nav({pages, currentPage}: PageProps) {
         maxHeight: 'calc(100vh - 72px)',
         overflow: 'auto',
         paddingX: 12,
-        minWidth: 180,
+        width: 200,
         display: {
           default: 'none',
           lg: 'block'
@@ -77,7 +105,7 @@ export function Nav({pages, currentPage}: PageProps) {
               })
               .filter(page => !page.exports?.isSubpage)
               .map(page => (
-                <SideNavItem key={page.url}><SideNavLink href={page.url} isSelected={page.url === currentPage.url}>{title(page)}</SideNavLink></SideNavItem>
+                <SideNavItem key={page.url}><SideNavLink href={page.url} page={page} isSelected={page.url === displayUrl}>{title(page)}</SideNavLink></SideNavItem>
             ))}
           </SideNav>
         </SideNavSection>
@@ -109,8 +137,27 @@ function SideNavSection({title, children}) {
 }
 
 const SideNavContext = createContext('');
+const PendingNavContext = createContext<React.Dispatch<Page> | null>(null);
+const PendingPageContext = createContext<Page | null>(null);
 
-export function SideNav({children}) {
+let clearPendingPageListeners = new Set<() => void>();
+
+function subscribeToClearPendingPage(callback: () => void): () => void {
+  clearPendingPageListeners.add(callback);
+  return () => {
+    void clearPendingPageListeners.delete(callback);
+  };
+}
+
+export function clearPendingPage() {
+  clearPendingPageListeners.forEach(callback => callback());
+}
+
+export function usePendingPage() {
+  return useContext(PendingPageContext);
+}
+
+export function SideNav({children, isNested = false}) {
   return (
     <ul
       className={style({
@@ -120,13 +167,17 @@ export function SideNav({children}) {
           default: 0,
           ':is(li > ul)': 16
         },
+        paddingTop: {
+          default: 0,
+          isNested: 8
+        },
         margin: 0,
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
         width: 'full',
         boxSizing: 'border-box'
-      })}>
+      })({isNested})}>
       {children}
     </ul>
   );
@@ -143,12 +194,22 @@ export function SideNavItem(props) {
 export function SideNavLink(props) {
   let linkRef = useRef(null);
   let selected = useContext(SideNavContext);
+  let setPendingPage = useContext(PendingNavContext);
+  let {page, ...linkProps} = props;
+  
   return (
     <Link
-      {...props}
+      {...linkProps}
       ref={linkRef}
       aria-current={props.isSelected || selected === props.href ? 'page' : undefined}
       style={pressScale(linkRef)}
+      onPress={() => {
+        if (setPendingPage && page) {
+          startTransition(() => {
+            setPendingPage(page);
+          });
+        }
+      }}
       className={style({
         ...focusRing(),
         minHeight: 32,
diff --git a/packages/dev/s2-docs/src/NavigationSuspense.tsx b/packages/dev/s2-docs/src/NavigationSuspense.tsx
new file mode 100644
index 00000000000..9cc4461df43
--- /dev/null
+++ b/packages/dev/s2-docs/src/NavigationSuspense.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import type {Page} from '@parcel/rsc';
+import {PageSkeleton} from './PageSkeleton';
+import React, {Suspense, use, useSyncExternalStore} from 'react';
+
+let navigationPromise: Promise<void> | null = null;
+let targetPathname: string | null = null;
+let listeners = new Set<() => void>();
+let cachedSnapshot: {promise: Promise<void> | null, pathname: string | null} = {promise: null, pathname: null};
+
+function subscribe(callback: () => void) {
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+}
+
+function getSnapshot() {
+  if (cachedSnapshot.promise !== navigationPromise || cachedSnapshot.pathname !== targetPathname) {
+    cachedSnapshot = {promise: navigationPromise, pathname: targetPathname};
+  }
+  return cachedSnapshot;
+}
+
+export function setNavigationPromise(promise: Promise<void> | null, pathname?: string) {
+  targetPathname = pathname || null;
+  navigationPromise = promise;
+  
+  if (promise) {
+    promise.finally(() => {
+      if (navigationPromise === promise) {
+        navigationPromise = null;
+        listeners.forEach(callback => callback());
+      }
+    });
+  }
+  
+  listeners.forEach(callback => callback());
+}
+
+function normalizePathname(urlOrPathname: string, publicUrlPrefix: string): string {
+  let pathname: string;
+  try {
+    if (urlOrPathname.startsWith('http://') || urlOrPathname.startsWith('https://')) {
+      pathname = new URL(urlOrPathname).pathname;
+    } else {
+      pathname = new URL(urlOrPathname, location.href).pathname;
+    }
+  } catch {
+    const [basePathname] = urlOrPathname.split('?');
+    const [cleanPathname] = basePathname.split('#');
+    pathname = cleanPathname;
+  }
+  
+  let pathnameWithoutPrefix = pathname;
+  if (publicUrlPrefix !== '/' && pathname.startsWith(publicUrlPrefix)) {
+    pathnameWithoutPrefix = pathname.slice(publicUrlPrefix.length);
+    if (!pathnameWithoutPrefix.startsWith('/')) {
+      pathnameWithoutPrefix = '/' + pathnameWithoutPrefix;
+    }
+  }
+  
+  return pathnameWithoutPrefix.startsWith('/') ? pathnameWithoutPrefix : '/' + pathnameWithoutPrefix;
+}
+
+function getPageTitle(page: Page): string {
+  return page.exports?.title ?? page.tableOfContents?.[0]?.title ?? page.name;
+}
+
+function getPageInfo(pages: Page[], pathname: string | null): {title?: string, section?: string, hasToC?: boolean} {
+  if (!pathname) {
+    return {};
+  }
+  
+  let publicUrl = process.env.PUBLIC_URL || '/';
+  let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
+  let publicUrlPrefix = publicUrlPathname === '/' ? '/' : publicUrlPathname.replace(/\/$/, '');
+  
+  let normalizedPathname = normalizePathname(pathname, publicUrlPrefix);
+  
+  const targetPage = pages.find(p => {
+    let normalizedPageUrl = normalizePathname(p.url, publicUrlPrefix);
+    
+    return normalizedPageUrl === normalizedPathname || 
+          normalizedPageUrl === normalizedPathname.replace(/\.html$/, '') ||
+          normalizedPageUrl === normalizedPathname + '.html';
+  });
+  
+  if (!targetPage) {
+    return {};
+  }
+  
+  const title = getPageTitle(targetPage);
+  const section = (targetPage.exports?.section as string) || 'Components';
+  const hasToC = !targetPage.exports?.hideNav && targetPage.tableOfContents?.[0]?.children && targetPage.tableOfContents?.[0]?.children?.length > 0;
+  
+  return {title, section, hasToC};
+}
+
+function NavigationContent({children}: {children: React.ReactNode}) {
+  // Subscribe to navigation promise changes to ensure React re-renders when setNavigationPromise() is called.
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (snapshot.promise) {
+    use(snapshot.promise);
+  }
+  return <>{children}</>;
+}
+
+export function NavigationSuspense({children, pages}: {children: React.ReactNode, pages: Page[]}) {
+  // Subscribe to get the latest targetPathname for skeleton page info
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const pageInfo = getPageInfo(pages, snapshot.pathname);
+  
+  return (
+    <Suspense fallback={<PageSkeleton title={pageInfo.title} section={pageInfo.section} hasToC={pageInfo.hasToC} />}>
+      <NavigationContent>{children}</NavigationContent>
+    </Suspense>
+  );
+}
diff --git a/packages/dev/s2-docs/src/OptimisticToc.tsx b/packages/dev/s2-docs/src/OptimisticToc.tsx
new file mode 100644
index 00000000000..6a75d0c2135
--- /dev/null
+++ b/packages/dev/s2-docs/src/OptimisticToc.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import {Divider, PickerItem} from '@react-spectrum/s2';
+import {MarkdownMenu} from './MarkdownMenu';
+import {MobileOnPageNav, OnPageNav, SideNav, SideNavItem, SideNavLink, usePendingPage} from './Nav';
+import type {Page, TocNode} from '@parcel/rsc';
+import React from 'react';
+import {ScrollableToc} from './ScrollableToc';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+function anchorId(children) {
+  return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
+}
+
+function Toc({toc, isNested = false}: {toc: TocNode[], isNested?: boolean}) {
+  return (
+    <OnPageNav>
+      <SideNav isNested={isNested}>
+        {toc.map((c, i) => (
+          <SideNavItem key={i}>
+            <SideNavLink href={'#' + anchorId(c.title)}>{c.title}</SideNavLink>
+            {c.children.length > 0 && <Toc toc={c.children} isNested />}
+          </SideNavItem>
+        ))}
+      </SideNav>
+    </OnPageNav>
+  );
+}
+
+function renderMobileToc(toc: TocNode[], seen = new Map()) {
+  return toc.map((c) => {
+    let href = c.level === 1 ? '#top' : '#' + anchorId(c.title);
+    if (seen.has(href)) {
+      seen.set(href, seen.get(href) + 1);
+      href += '-' + seen.get(href);
+    } else {
+      seen.set(href, 1);
+    }
+    return (<React.Fragment key={href}>
+      <PickerItem id={href} href={href}>{c.title}</PickerItem>
+      {c.children.length > 0 && renderMobileToc(c.children, seen)}
+    </React.Fragment>);
+  });
+}
+
+export function OptimisticToc({currentPage}: {currentPage: Page}) {
+  let pendingPage = usePendingPage();
+  let displayPage = pendingPage ?? currentPage;
+  
+  return (
+    <>
+      <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center', marginBottom: 4, flexShrink: 0})}>On this page</div>
+      <ScrollableToc>
+        <Toc toc={displayPage.tableOfContents?.[0]?.children ?? []} key={displayPage.url} />
+      </ScrollableToc>
+      <div className={style({flexShrink: 0})}>
+        <Divider size="S" styles={style({marginY: 12})} />
+        <MarkdownMenu url={currentPage.url} />
+      </div>
+    </>
+  );
+}
+
+export function OptimisticMobileToc({currentPage}: {currentPage: Page}) {
+  let pendingPage = usePendingPage();
+  let displayPage = pendingPage ?? currentPage;
+  
+  if ((displayPage.tableOfContents?.[0]?.children?.length ?? 0) <= 1) {
+    return null;
+  }
+  
+  return (
+    <MobileOnPageNav currentPage={currentPage}>
+      {renderMobileToc(displayPage.tableOfContents ?? [])}
+    </MobileOnPageNav>
+  );
+}
diff --git a/packages/dev/s2-docs/src/PageSkeleton.tsx b/packages/dev/s2-docs/src/PageSkeleton.tsx
new file mode 100644
index 00000000000..2c59cff79c6
--- /dev/null
+++ b/packages/dev/s2-docs/src/PageSkeleton.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import {getTextWidth} from './textWidth';
+import React from 'react';
+import {Skeleton, Text} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+const h1 = style({
+  font: 'heading-3xl',
+  fontSize: {
+    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+    lg: 'heading-3xl'
+  },
+  marginY: 0
+});
+
+const skeletonPageDescription = style({
+  font: {default: 'body-lg', lg: 'body-xl'},
+  marginY: 24,
+  width: '100%'
+});
+
+const skeletonParagraph = style({
+  font: {default: 'body', lg: 'body-lg'},
+  marginY: 24,
+  width: '100%'
+});
+
+const skeletonH2 = style({
+  font: 'heading-xl',
+  marginTop: 48,
+  marginBottom: 16,
+  width: '40%'
+});
+
+const skeletonVisualExample = style({
+  backgroundColor: 'layer-1',
+  padding: {
+    default: 12,
+    lg: 24
+  },
+  marginTop: {
+    default: 20
+  },
+  borderRadius: 'xl',
+  width: 'full',
+  boxSizing: 'border-box',
+  minHeight: {
+    default: 200,
+    lg: 300
+  }
+});
+
+function SkeletonVisualExample() {
+  return (
+    <div className={skeletonVisualExample} />
+  );
+}
+
+const skeletonArticle = style({
+  maxWidth: {
+    default: 'none',
+    isWithToC: 768
+  },
+  width: 'full',
+  height: 'fit'
+});
+
+export function PageSkeleton({title, section, hasToC}: {title?: string, section?: string, hasToC?: boolean}) {
+  const isComponents = section === 'Components';
+  
+  return (
+    <article className={skeletonArticle({isWithToC: hasToC})}>
+      {title && (
+        <h1 id="top" style={{'--width-per-em': getTextWidth(title)} as any} className={h1}>
+          {title}
+        </h1>
+      )}
+      <Skeleton isLoading>
+        {!title && (
+          <h1 className={style({font: 'heading-3xl', fontSize: {default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)', lg: 'heading-3xl'}, marginY: 0, width: '60%'})}>
+            <Text>Page Title</Text>
+          </h1>
+        )}
+        
+        {/* PageDescription */}
+        <p className={skeletonPageDescription}>
+          <Text>This is placeholder content for the page description that approximates the typical length of component descriptions.</Text>
+        </p>
+        
+        {isComponents ? (
+          <>
+            {/* VisualExample */}
+            <SkeletonVisualExample />
+            
+            {/* A few sections with visual examples */}
+            {[1, 2, 3].map(i => (
+              <React.Fragment key={i}>
+                <h2 className={skeletonH2}>
+                  <Text>Section Heading</Text>
+                </h2>
+                <p className={skeletonParagraph}>
+                  <Text>Placeholder content for a section that describes various aspects of the component or feature being documented.</Text>
+                </p>
+                <SkeletonVisualExample />
+              </React.Fragment>
+            ))}
+          </>
+        ) : (
+          <>
+            {/* A few sections */}
+            {[1, 2, 3, 4].map(i => (
+              <React.Fragment key={i}>
+                <h2 className={skeletonH2}>
+                  <Text>Section Heading</Text>
+                </h2>
+                <p className={skeletonParagraph}>
+                  <Text>Placeholder content for a section that describes various aspects of the topic being documented.</Text>
+                </p>
+              </React.Fragment>
+            ))}
+          </>
+        )}
+      </Skeleton>
+    </article>
+  );
+}
diff --git a/packages/dev/s2-docs/src/ScrollableToc.tsx b/packages/dev/s2-docs/src/ScrollableToc.tsx
new file mode 100644
index 00000000000..514c0d0a278
--- /dev/null
+++ b/packages/dev/s2-docs/src/ScrollableToc.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import React, {useEffect, useRef, useState} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+export function ScrollableToc({children}) {
+  let [topMaskSize, setTopMaskSize] = useState(0);
+  let [bottomMaskSize, setBottomMaskSize] = useState(0);
+  let scrollRef = useRef<HTMLDivElement>(null);
+
+  let updateMasks = (element: HTMLDivElement) => {
+    let scrollTop = element.scrollTop;
+    let scrollHeight = element.scrollHeight;
+    let clientHeight = element.clientHeight;
+    let distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    
+    setTopMaskSize(Math.min(scrollTop, 32));
+    setBottomMaskSize(Math.min(distanceFromBottom, 32));
+  };
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      updateMasks(scrollRef.current);
+    }
+  }, [children]);
+
+  let maskImage: string | undefined;
+  if (topMaskSize > 0 || bottomMaskSize > 0) {
+    let parts: string[] = [];
+    if (topMaskSize > 0) {
+      parts.push('transparent 0px');
+      parts.push(`black ${topMaskSize}px`);
+    } else {
+      parts.push('black 0px');
+    }
+    if (bottomMaskSize > 0) {
+      parts.push(`black calc(100% - ${bottomMaskSize}px)`);
+      parts.push('transparent 100%');
+    } else {
+      parts.push('black 100%');
+    }
+    maskImage = `linear-gradient(to bottom, ${parts.join(', ')})`;
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      onScroll={e => updateMasks(e.currentTarget)}
+      style={{
+        maskImage
+      }}
+      className={style({
+        overflowY: 'auto',
+        flex: 1,
+        minHeight: 0
+      })}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index bac5a524757..e1674bceb79 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -1,18 +1,30 @@
 'use client';
 
-import {ActionButton, Content, Heading, IllustratedMessage, SearchField, Tag, TagGroup} from '@react-spectrum/s2';
-import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider, Separator as RACSeparator} from 'react-aria-components';
+import {ActionButton, SearchField} from '@react-spectrum/s2';
+import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider} from 'react-aria-components';
 import Close from '@react-spectrum/s2/icons/Close';
 import {ComponentCardView} from './ComponentCardView';
+import {
+  type ComponentItem,
+  createSearchOptions,
+  filterAndSortSearchItems,
+  getOrderedLibraries,
+  getPageTitle,
+  getResourceTags,
+  SearchEmptyState,
+  sortItemsForDisplay,
+  sortSearchItems,
+  useFilteredIcons,
+  useSearchTagSelection,
+  useSectionTagsForDisplay
+} from './searchUtils';
 import {getLibraryFromPage, getLibraryFromUrl} from './library';
-import {iconList, IconSearchSkeleton, useIconFilter} from './IconSearchView';
+import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library, TAB_DEFS} from './constants';
-// eslint-disable-next-line monorepo/no-internal-import
-import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 // @ts-ignore
 import {Page} from '@parcel/rsc';
 import React, {CSSProperties, lazy, Suspense, useEffect, useMemo, useRef, useState} from 'react';
-import {SelectableCollectionContext} from '../../../react-aria-components/src/RSPContexts';
+import {SearchTagGroups} from './SearchTagGroups';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
@@ -66,15 +78,7 @@ export function SearchMenu(props: SearchMenuProps) {
   let [selectedLibrary, setSelectedLibrary] = useState<Library>(currentLibrary);
   let [searchValue, setSearchValue] = useState(props.initialSearchValue);
 
-  const orderedTabs = useMemo(() => {
-    const allTabs = (Object.keys(TAB_DEFS) as Library[]).map(id => ({id, ...TAB_DEFS[id]}));
-    const currentTabIndex = allTabs.findIndex(tab => tab.id === currentLibrary);
-    if (currentTabIndex > 0) {
-      const currentTab = allTabs.splice(currentTabIndex, 1)[0];
-      allTabs.unshift(currentTab);
-    }
-    return allTabs;
-  }, [currentLibrary]);
+  const orderedTabs = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
 
   const searchRef = useRef<TextFieldRef<HTMLInputElement> | null>(null);
 
@@ -97,7 +101,7 @@ export function SearchMenu(props: SearchMenuProps) {
       .filter(page => page.url && page.url.endsWith('.html') && getLibraryFromUrl(page.url) === selectedLibrary && !page.exports?.hideFromSearch)
       .map(page => {
         const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
-        const title = page.tableOfContents?.[0]?.title || name;
+        const title = getPageTitle(page);
         const section: string = (page.exports?.section as string) || 'Components';
         const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
         const description: string = stripMarkdown(page.exports?.description);
@@ -134,84 +138,27 @@ export function SearchMenu(props: SearchMenuProps) {
     });
   }, [transformedComponents]);
 
-  const sectionTags = useMemo(() => sections, [sections]);
-  const iconTag = useMemo(() => {
-    if (selectedLibrary === 'react-spectrum') {
-      return [{id: 'icons', name: 'Icons'}];
-    }
-    return [];
-  }, [selectedLibrary]);
+  const sectionTags = useMemo(() => sections.map(s => ({id: s.id, name: s.name})), [sections]);
+  const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
 
-  const [selectedSectionId, setSelectedSectionId] = useState<string>(() => currentPage.exports?.section?.toLowerCase() || 'components');
-  const prevSearchWasEmptyRef = useRef<boolean>(true);
+  const [selectedTagId, setSelectedTagId] = useSearchTagSelection(
+    searchValue,
+    sectionTags,
+    resourceTags,
+    currentPage.exports?.section?.toLowerCase() || 'components'
+  );
 
+  const filteredIcons = useFilteredIcons(searchValue);
   const iconFilter = useIconFilter();
 
-  const filteredIcons = useMemo(() => {
-    if (!searchValue.trim()) {
-      return iconList;
-    }
-    return iconList.filter(item => iconFilter(item.id, searchValue));
-  }, [searchValue, iconFilter]);
-
-  // Ensure selected section is valid for the current library
-  const baseSectionIds = sectionTags.map(s => s.id);
-  const baseIconIds = iconTag.map(t => t.id);
-  const allBaseIds = [...baseSectionIds, ...baseIconIds];
-  const sectionIds = searchValue.trim().length > 0 && selectedSectionId !== 'icons' ? ['all', ...allBaseIds] : allBaseIds;
-  if (!selectedSectionId || !sectionIds.includes(selectedSectionId)) {
-    setSelectedSectionId(sectionIds[0] || 'components');
-  }
-
-  // When search starts, auto-select the All tag (unless Icons is selected).
-  useEffect(() => {
-    const isEmpty = searchValue.trim().length === 0;
-    if (prevSearchWasEmptyRef.current && !isEmpty && selectedSectionId !== 'icons') {
-      setSelectedSectionId('all');
-    }
-    prevSearchWasEmptyRef.current = isEmpty;
-  }, [searchValue, selectedSectionId]);
-
   let filteredComponents = useMemo(() => {
     if (!searchValue) {
       return sections;
     }
 
-    const searchLower = searchValue.toLowerCase();
     const allItems = sections.flatMap(section => section.children);
 
-    // Filter items where name or tags start with search value
-    const matchedItems = allItems.filter(item => {
-      const nameMatch = item.name.toLowerCase().startsWith(searchLower);
-      const tagMatch = item.tags.some(tag => tag.toLowerCase().startsWith(searchLower));
-      return nameMatch || tagMatch;
-    });
-
-    // Sort to prioritize name matches over tag matches
-    const sortedItems = matchedItems.sort((a, b) => {
-      const aNameMatch = a.name.toLowerCase().startsWith(searchLower);
-      const bNameMatch = b.name.toLowerCase().startsWith(searchLower);
-
-      if (a.date && b.date) {
-        let aDate = new Date(a.date);
-        let bDate = new Date(b.date);
-        return bDate.getTime() - aDate.getTime();
-      } else if (a.date && !b.date) {
-        return 1;
-      } else if (!a.date && b.date) {
-        return -1;
-      }
-
-      if (aNameMatch && !bNameMatch) {
-        return -1;
-      }
-      if (!aNameMatch && bNameMatch) {
-        return 1;
-      }
-
-      // If both match by name or both match by tag, maintain original order
-      return 0;
-    });
+    const sortedItems = filterAndSortSearchItems(allItems, searchValue, createSearchOptions<ComponentItem>());
 
     const resultsBySection = new Map<string, typeof transformedComponents>();
 
@@ -231,13 +178,12 @@ export function SearchMenu(props: SearchMenuProps) {
       .filter(section => section.children.length > 0);
   }, [sections, searchValue]);
 
-  const tags = useMemo(() => {
-    if (searchValue.trim().length > 0 && selectedSectionId !== 'icons') {
-      // When searching, prepend an All tag (unless Icons is selected)
-      return [{id: 'all', name: 'All'}, ...sectionTags];
-    }
-    return sectionTags;
-  }, [searchValue, sectionTags, selectedSectionId]);
+  const sectionTagsForDisplay = useSectionTagsForDisplay(
+    sections,
+    searchValue,
+    selectedTagId,
+    resourceTags.map(t => t.id)
+  );
 
   const handleTabSelectionChange = React.useCallback((key: Key) => {
     if (searchValue) {
@@ -257,62 +203,50 @@ export function SearchMenu(props: SearchMenuProps) {
   const handleSectionSelectionChange = React.useCallback((keys: Iterable<Key>) => {
     const firstKey = Array.from(keys)[0] as string;
     if (firstKey) {
-      setSelectedSectionId(firstKey);
+      setSelectedTagId(firstKey);
     }
-  }, []);
+  }, [setSelectedTagId]);
 
   const handleIconSelectionChange = React.useCallback((keys: Iterable<Key>) => {
     const firstKey = Array.from(keys)[0] as string;
     if (firstKey) {
-      setSelectedSectionId(firstKey);
+      setSelectedTagId(firstKey);
     }
-  }, []);
+  }, [setSelectedTagId]);
 
   const selectedItems = useMemo(() => {
     let items: typeof transformedComponents = [];
-    if (searchValue.trim().length > 0 && selectedSectionId === 'all') {
+    if (searchValue.trim().length > 0 && selectedTagId === 'all') {
       items = filteredComponents.flatMap(s => s.children) || [];
+      items = sortSearchItems(items, searchValue, createSearchOptions<ComponentItem>());
     } else {
-      items = (filteredComponents.find(s => s.id === selectedSectionId)?.children) || [];
-    }
-
-    // Sort to show "Introduction" first when search is empty
-    if (searchValue.trim().length === 0) {
-      items = [...items].sort((a, b) => {
-        const aIsIntro = a.name === 'Introduction';
-        const bIsIntro = b.name === 'Introduction';
-
-        if (a.date && b.date) {
-          let aDate = new Date(a.date);
-          let bDate = new Date(b.date);
-          return bDate.getTime() - aDate.getTime();
-        } else if (a.date && !b.date) {
-          return 1;
-        } else if (!a.date && b.date) {
-          return -1;
-        }
-
-        if (aIsIntro && !bIsIntro) {
-          return -1;
-        }
-        if (!aIsIntro && bIsIntro) {
-          return 1;
-        }
-        return 0;
-      });
+      items = (filteredComponents.find(s => s.id === selectedTagId)?.children) || [];
+      items = sortItemsForDisplay(items, searchValue);
     }
 
     return items;
-  }, [filteredComponents, selectedSectionId, searchValue]);
+  }, [filteredComponents, selectedTagId, searchValue]);
 
   const selectedSectionName = useMemo(() => {
-    if (searchValue.trim().length > 0 && selectedSectionId === 'all') {
+    if (searchValue.trim().length > 0 && selectedTagId === 'all') {
       return 'All';
     }
-    return (filteredComponents.find(s => s.id === selectedSectionId)?.name)
-      || (sections.find(s => s.id === selectedSectionId)?.name)
+    return (filteredComponents.find(s => s.id === selectedTagId)?.name)
+      || (sections.find(s => s.id === selectedTagId)?.name)
       || 'Items';
-  }, [filteredComponents, sections, selectedSectionId, searchValue]);
+  }, [filteredComponents, sections, selectedTagId, searchValue]);
+
+  useEffect(() => {
+    const handleNavigationStart = () => {
+      setSearchValue('');
+      onClose();
+    };
+
+    window.addEventListener('rsc-navigation-start', handleNavigationStart);
+    return () => {
+      window.removeEventListener('rsc-navigation-start', handleNavigationStart);
+    };
+  }, [onClose]);
 
   return (
     <Dialog id={overlayId} className={style({height: 'full'})} aria-label="Search menu">
@@ -340,10 +274,10 @@ export function SearchMenu(props: SearchMenuProps) {
           ))}
         </TabList>
         {orderedTabs.map((tab, i) => {
-          const tabIconTag = tab.id === 'react-spectrum' ? [{id: 'icons', name: 'Icons'}] : [];
+          const tabResourceTags = getResourceTags(tab.id);
           return (
             <TabPanel key={tab.id} id={tab.id}>
-              <Autocomplete filter={selectedSectionId === 'icons' ? iconFilter : undefined}>
+              <Autocomplete filter={selectedTagId === 'icons' ? iconFilter : undefined}>
                 <div className={style({display: 'flex', flexDirection: 'column', height: 'full'})}>
                   <div className={style({flexShrink: 0, marginStart: 16, marginEnd: 64})}>
                     <SearchField
@@ -359,49 +293,20 @@ export function SearchMenu(props: SearchMenuProps) {
 
                   <CloseButton onClose={onClose} />
 
-                  {(tags.length > 0 || tabIconTag.length > 0) && (
-                    <div className={style({flexShrink: 0, zIndex: 1, paddingTop: 16})}>
-                      <SelectableCollectionContext.Provider value={null}>
-                        <div className={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 16})}>
-                          {tags.length > 0 && (
-                            <TagGroup
-                              selectionMode="single"
-                              selectedKeys={selectedSectionId && selectedSectionId !== 'icons' ? [selectedSectionId] : []}
-                              onSelectionChange={handleSectionSelectionChange}
-                              aria-label="Select section"
-                              items={tags}>
-                              {(tag) => (
-                                <Tag key={tag.id} id={tag.id}>
-                                  {tag.name}
-                                </Tag>
-                              )}
-                            </TagGroup>
-                          )}
-                          {tabIconTag.length > 0 && tags.length > 0 && (
-                            <RACSeparator className={divider} />
-                          )}
-                          {tabIconTag.length > 0 && (
-                            <TagGroup
-                              selectionMode="single"
-                              selectedKeys={selectedSectionId === 'icons' ? ['icons'] : []}
-                              onSelectionChange={handleIconSelectionChange}
-                              aria-label="Icons"
-                              items={tabIconTag}>
-                              {(tag) => (
-                                <Tag key={tag.id} id={tag.id}>
-                                  {tag.name}
-                                </Tag>
-                              )}
-                            </TagGroup>
-                          )}
-                        </div>
-                      </SelectableCollectionContext.Provider>
+                  <SearchTagGroups
+                    sectionTags={sectionTagsForDisplay}
+                    resourceTags={tabResourceTags}
+                    selectedTagId={selectedTagId}
+                    onSectionSelectionChange={handleSectionSelectionChange}
+                    onResourceSelectionChange={handleIconSelectionChange} />
+                  {selectedTagId === 'icons' ? (
+                    <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
+                      <Suspense fallback={<IconSearchSkeleton />}>
+                        <IconSearchView 
+                          filteredItems={filteredIcons} 
+                          listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
+                      </Suspense>
                     </div>
-                  )}
-                  {selectedSectionId === 'icons' ? (
-                    <Suspense fallback={<IconSearchSkeleton />}>
-                      <IconSearchView filteredItems={filteredIcons} />
-                    </Suspense>
                   ) : (
                     <ComponentCardView
                       onAction={onClose}
@@ -412,21 +317,7 @@ export function SearchMenu(props: SearchMenuProps) {
                         description: item.description
                       }))}
                       ariaLabel={selectedSectionName}
-                      renderEmptyState={() => (
-                        <IllustratedMessage styles={style({margin: 32})}>
-                          <NoSearchResults />
-                          <Heading>No results</Heading>
-                          {searchValue.trim().length > 0 ? (
-                            <Content>
-                              No results found for <strong className={style({fontWeight: 'bold'})}>{searchValue}</strong> in {tab.label}.
-                            </Content>
-                          ) : (
-                            <Content>
-                              No results found in {tab.label}.
-                            </Content>
-                          )}
-                        </IllustratedMessage>
-                      )} />
+                      renderEmptyState={() => <SearchEmptyState searchValue={searchValue} libraryLabel={tab.label} />} />
                   )}
                 </div>
               </Autocomplete>
diff --git a/packages/dev/s2-docs/src/SearchTagGroups.tsx b/packages/dev/s2-docs/src/SearchTagGroups.tsx
new file mode 100644
index 00000000000..54c8f6d05ea
--- /dev/null
+++ b/packages/dev/s2-docs/src/SearchTagGroups.tsx
@@ -0,0 +1,91 @@
+import {divider} from './SearchMenu';
+import {Key, Separator as RACSeparator} from 'react-aria-components';
+import React from 'react';
+import {SelectableCollectionContext} from '../../../react-aria-components/src/RSPContexts';
+import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
+import {Tag, TagGroup} from '@react-spectrum/s2';
+
+interface TagItem {
+  id: string,
+  name: string
+}
+
+interface SearchTagGroupsProps {
+  sectionTags: TagItem[],
+  resourceTags?: TagItem[],
+  selectedTagId: string | undefined,
+  onSectionSelectionChange: (keys: Iterable<Key>) => void,
+  onResourceSelectionChange?: (keys: Iterable<Key>) => void,
+  isMobile?: boolean,
+  wrapperClassName?: string,
+  contentClassName?: string
+}
+
+export function SearchTagGroups({
+  sectionTags,
+  resourceTags = [],
+  selectedTagId,
+  onSectionSelectionChange,
+  onResourceSelectionChange,
+  isMobile = false,
+  wrapperClassName,
+  contentClassName
+}: SearchTagGroupsProps) {
+  if (sectionTags.length === 0 && resourceTags.length === 0) {
+    return null;
+  }
+
+  const defaultWrapperClassName = style({flexShrink: 0, zIndex: 1, paddingTop: 16});
+  const defaultContentClassName = style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 16});
+
+  const resourceTagIds = resourceTags.map(tag => tag.id);
+  const isResourceSelected = selectedTagId && resourceTagIds.includes(selectedTagId);
+
+  return (
+    <div className={wrapperClassName || defaultWrapperClassName}>
+      <SelectableCollectionContext.Provider value={null}>
+        <div className={contentClassName || defaultContentClassName}>
+          {sectionTags.length > 0 && (
+            <div className={style({flexShrink: 0})}>
+              <TagGroup
+                escapeKeyBehavior="none"
+                selectionMode="single"
+                selectedKeys={selectedTagId && !isResourceSelected ? [selectedTagId] : []}
+                onSelectionChange={onSectionSelectionChange}
+                aria-label="Sections"
+                items={sectionTags}
+                UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}>
+                {(tag) => (
+                  <Tag key={tag.id} id={tag.id}>
+                    {tag.name}
+                  </Tag>
+                )}
+              </TagGroup>
+            </div>
+          )}
+          {resourceTags.length > 0 && sectionTags.length > 0 && (
+            <RACSeparator className={divider} />
+          )}
+          {resourceTags.length > 0 && (
+            <div className={style({flexShrink: 0})}>
+              <TagGroup
+                escapeKeyBehavior="none"
+                selectionMode="single"
+                selectedKeys={isResourceSelected && selectedTagId ? [selectedTagId] : []}
+                onSelectionChange={onResourceSelectionChange}
+                aria-label="Resources"
+                items={resourceTags}
+                UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}>
+                {(tag) => (
+                  <Tag key={tag.id} id={tag.id}>
+                    {tag.name}
+                  </Tag>
+                )}
+              </TagGroup>
+            </div>
+          )}
+        </div>
+      </SelectableCollectionContext.Provider>
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index a955a049d6f..0fe33508021 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -1,7 +1,24 @@
 'use client-entry';
 
+import {clearPendingPage} from './Nav';
 import {fetchRSC, hydrate} from '@parcel/rsc/client';
-import type {ReactElement} from 'react';
+import {getPrefetchedPromise, prefetchRoute} from './prefetch';
+import {type ReactElement} from 'react';
+import {setNavigationPromise} from './NavigationSuspense';
+import {UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+
+let isClientLink = (link: HTMLAnchorElement, pathname: string) => {
+  return (
+    link &&
+    link instanceof HTMLAnchorElement &&
+    link.href &&
+    (!link.target || link.target === '_self') &&
+    link.origin === location.origin &&
+    link.pathname !== location.pathname &&
+    !link.hasAttribute('download') &&
+    link.pathname.startsWith(pathname)
+  );
+};
 
 // Hydrate initial RSC payload embedded in the HTML.
 let updateRoot = hydrate({
@@ -11,41 +28,181 @@ let updateRoot = hydrate({
   }
 });
 
+// Track the current navigation to prevent race conditions
+let currentNavigationId = 0;
+let currentAbortController: AbortController | null = null;
+
 // A very simple router. When we navigate, we'll fetch a new RSC payload from the server,
 // and in a React transition, stream in the new page. Once complete, we'll pushState to
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
-  try {
-    let res = await fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
-    let currentPath = location.pathname;
-    let [newBasePath, newPathAnchor] = pathname.split('#');
-
-    updateRoot(res, () => {
-      if (push) {
-        history.pushState(null, '', pathname);
-        push = false;
+  let [basePath] = pathname.split('#');
+  let rscPath = basePath.replace('.html', '.rsc');
+  
+  // Cancel any in-flight navigation
+  if (currentAbortController) {
+    currentAbortController.abort('Aborting due to new navigation');
+  }
+  
+  // Create a new abort controller for this navigation
+  const abortController = new AbortController();
+  currentAbortController = abortController;
+  const navigationId = ++currentNavigationId;
+  
+  const navigationPromise = (async () => {
+    window.dispatchEvent(new CustomEvent('rsc-navigation-start'));
+    
+    // Use prefetched result if available, otherwise fetch
+    const prefetchedPromise = getPrefetchedPromise(rscPath);
+    const fetchPromise = prefetchedPromise ?? fetchRSC<ReactElement>(rscPath);
+    
+    try {
+      let res = await fetchPromise;
+      
+      // Check if this navigation is still current before updating
+      if (navigationId !== currentNavigationId) {
+        // A newer navigation has started, ignore this result
+        return;
+      }
+      
+      // Check if this navigation was aborted
+      if (abortController.signal.aborted) {
+        return;
       }
+      
+      let currentPath = location.pathname;
+      let [newBasePath, newPathAnchor] = pathname.split('#');
 
-      // Reset scroll if navigating to a different page without an anchor
-      if (currentPath !== newBasePath && !newPathAnchor) {
-        window.scrollTo(0, 0);
-      } else if (newPathAnchor) {
-        let element = document.getElementById(newPathAnchor);
-        if (element) {
-          element.scrollIntoView();
-        }
+      // Return a promise that resolves after updateRoot callback completes
+      await new Promise<void>((resolve) => {
+        updateRoot(res, () => {
+          if (push) {
+            history.pushState(null, '', pathname);
+            push = false;
+          }
+
+          // Reset scroll if navigating to a different page without an anchor
+          if (currentPath !== newBasePath && !newPathAnchor) {
+            window.scrollTo(0, 0);
+          } else if (newPathAnchor) {
+            let element = document.getElementById(newPathAnchor);
+            if (element) {
+              element.scrollIntoView();
+            }
+          }
+
+          queueMicrotask(() => {
+            window.dispatchEvent(new CustomEvent('rsc-navigation'));
+            resolve();
+          });
+        });
+      });
+    } catch (error) {
+      // Check if this navigation was aborted
+      if (abortController.signal.aborted) {
+        return;
       }
-    });
-  } catch {
-    let errorRes = await fetchRSC<ReactElement>('/error.rsc');
-    updateRoot(errorRes, () => {
-      if (push) {
-        history.pushState(null, '', '/error.html');
+      
+      // Check if this navigation is still current
+      if (navigationId !== currentNavigationId) {
+        return;
+      }
+      
+      clearPendingPage();
+      try {
+        let errorRes = await fetchRSC<ReactElement>('/error.rsc');
+        
+        // Check again if still current after error fetch
+        if (navigationId !== currentNavigationId || abortController.signal.aborted) {
+          return;
+        }
+        
+        await new Promise<void>((resolve) => {
+          updateRoot(errorRes, () => {
+            if (push) {
+              history.pushState(null, '', '/error.html');
+            }
+            resolve();
+          });
+        });
+      } catch {
+        // Only show error toast if this is still the current navigation
+        if (navigationId === currentNavigationId && !abortController.signal.aborted) {
+          ToastQueue.negative('Failed to load page. Check your connection and try again.');
+        }
+        throw error; // Re-throw to keep promise rejected
       }
-    });
+    }
+  })();
+  
+  // Store the promise for NavigationSuspense to use
+  setNavigationPromise(navigationPromise, pathname);
+}
+
+// Prefetch routes on pointerover
+// Use a delay to avoid prefetching when quickly moving over multiple links.
+const PREFETCH_DELAY_MS = 100;
+let prefetchTimeout: ReturnType<typeof setTimeout> | null = null;
+let currentPrefetchLink: HTMLAnchorElement | null = null;
+
+function clearPrefetchTimeout() {
+  if (prefetchTimeout) {
+    clearTimeout(prefetchTimeout);
+    prefetchTimeout = null;
   }
+  currentPrefetchLink = null;
 }
 
+document.addEventListener('pointerover', e => {
+  let link = (e.target as Element).closest('a');
+  let publicUrl = process.env.PUBLIC_URL || '/';
+  let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
+  
+  // Clear any pending prefetch
+  clearPrefetchTimeout();
+  
+  if (link && isClientLink(link, publicUrlPathname)) {
+    currentPrefetchLink = link;
+    prefetchTimeout = setTimeout(() => {
+      prefetchRoute(link.pathname + link.search + link.hash);
+      prefetchTimeout = null;
+    }, PREFETCH_DELAY_MS);
+  }
+}, true);
+
+// Clear prefetch timeout when pointer leaves a link
+document.addEventListener('pointerout', e => {
+  let link = (e.target as Element).closest('a');
+  if (link && link === currentPrefetchLink) {
+    clearPrefetchTimeout();
+  }
+}, true);
+
+document.addEventListener('focus', e => {
+  let link = (e.target as Element).closest('a');
+  let publicUrl = process.env.PUBLIC_URL || '/';
+  let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
+  
+  // Clear any pending prefetch
+  clearPrefetchTimeout();
+  
+  if (link && isClientLink(link, publicUrlPathname)) {
+    currentPrefetchLink = link;
+    prefetchTimeout = setTimeout(() => {
+      prefetchRoute(link.pathname + link.search + link.hash);
+      prefetchTimeout = null;
+    }, PREFETCH_DELAY_MS);
+  }
+}, true);
+
+// Clear prefetch timeout when focus leaves a link
+document.addEventListener('blur', e => {
+  let link = (e.target as Element).closest('a');
+  if (link && link === currentPrefetchLink) {
+    clearPrefetchTimeout();
+  }
+}, true);
+
 // Intercept link clicks to perform RSC navigation.
 document.addEventListener('click', e => {
   let link = (e.target as Element).closest('a');
@@ -53,13 +210,7 @@ document.addEventListener('click', e => {
   let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
   if (
     link &&
-    link instanceof HTMLAnchorElement &&
-    link.href &&
-    (!link.target || link.target === '_self') &&
-    link.origin === location.origin &&
-    link.pathname !== location.pathname &&
-    !link.hasAttribute('download') &&
-    link.pathname.startsWith(publicUrlPathname) &&
+    isClientLink(link, publicUrlPathname) &&
     e.button === 0 && // left clicks only
     !e.metaKey && // open in new tab (mac)
     !e.ctrlKey && // open in new tab (windows)
diff --git a/packages/dev/s2-docs/src/footer.css b/packages/dev/s2-docs/src/footer.css
new file mode 100644
index 00000000000..f279bcafd6b
--- /dev/null
+++ b/packages/dev/s2-docs/src/footer.css
@@ -0,0 +1,8 @@
+footer li:after {
+  margin: 0 8px;
+  content: '/';
+}
+
+footer li:last-child:after {
+  content: '';
+}
diff --git a/packages/dev/s2-docs/src/prefetch.ts b/packages/dev/s2-docs/src/prefetch.ts
new file mode 100644
index 00000000000..fe3425e5e31
--- /dev/null
+++ b/packages/dev/s2-docs/src/prefetch.ts
@@ -0,0 +1,34 @@
+'use client';
+
+import {fetchRSC} from '@parcel/rsc/client';
+import {type ReactElement} from 'react';
+
+const prefetchPromises = new Map<string, Promise<ReactElement>>();
+
+export function prefetchRoute(pathname: string) {
+  let [basePath] = pathname.split('#');
+  let rscPath = basePath.replace('.html', '.rsc');
+  
+  // Skip if currently prefetching
+  if (prefetchPromises.has(rscPath)) {
+    return;
+  }
+  
+  // Start prefetch and cache the promise
+  const prefetchPromise = fetchRSC<ReactElement>(rscPath)
+    .then(res => {
+      // Remove from cache once resolved (rely on browser cache for subsequent requests)
+      prefetchPromises.delete(rscPath);
+      return res;
+    })
+    .catch(() => {
+      prefetchPromises.delete(rscPath);
+      return Promise.reject<ReactElement>(new Error('Prefetch failed'));
+    });
+  
+  prefetchPromises.set(rscPath, prefetchPromise);
+}
+
+export function getPrefetchedPromise(rscPath: string): Promise<ReactElement> | undefined {
+  return prefetchPromises.get(rscPath);
+}
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
new file mode 100644
index 00000000000..5374e4af6f1
--- /dev/null
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -0,0 +1,315 @@
+'use client';
+
+import {Content, Heading, IllustratedMessage} from '@react-spectrum/s2';
+import {getLibraryFromPage} from './library';
+// @ts-ignore
+import {iconList, useIconFilter} from './IconSearchView';
+import {type Library, TAB_DEFS} from './constants';
+// eslint-disable-next-line monorepo/no-internal-import
+import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
+// @ts-ignore
+import {Page} from '@parcel/rsc';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+export interface SearchableItem {
+  name: string,
+  tags: string[],
+  date?: string
+}
+
+export interface ComponentItem {
+  id: string,
+  name: string,
+  href: string,
+  section: string,
+  tags: string[],
+  description?: string,
+  date?: string
+}
+
+export interface Section {
+  id: string,
+  name: string,
+  children: ComponentItem[]
+}
+
+export interface Tag {
+  id: string,
+  name: string
+}
+
+export interface SearchOptions<T> {
+  /**
+   * Function to extract the name from an item.
+   */
+  getName: (item: T) => string,
+  /**
+   * Function to extract tags from an item.
+   */
+  getTags: (item: T) => string[],
+  /**
+   * Optional function to extract date from an item for date-based sorting.
+   */
+  getDate?: (item: T) => string | undefined,
+  /**
+   * Optional function to determine if an item should use date-based sorting.
+   * If not provided, all items use alphabetical sorting.
+   */
+  shouldUseDateSort?: (item: T) => boolean
+}
+
+export function filterSearchItems<T>(
+  items: T[],
+  searchValue: string,
+  options: SearchOptions<T>
+): T[] {
+  if (!searchValue.trim()) {
+    return items;
+  }
+
+  const searchLower = searchValue.toLowerCase();
+  const {getName, getTags} = options;
+
+  return items.filter(item => {
+    const name = getName(item).toLowerCase();
+    const tags = getTags(item);
+    const nameMatch = name.includes(searchLower);
+    const tagMatch = tags.some(tag => tag.toLowerCase().includes(searchLower));
+    return nameMatch || tagMatch;
+  });
+}
+
+/**
+ * Sorts items to prioritize `startsWith` matches, then `includes` matches, then tag matches.
+ */
+export function sortSearchItems<T>(
+  items: T[],
+  searchValue: string,
+  options: SearchOptions<T>
+): T[] {
+  if (!searchValue.trim()) {
+    return items;
+  }
+
+  const searchLower = searchValue.toLowerCase();
+  const {getName, getDate, shouldUseDateSort} = options;
+
+  return [...items].sort((a, b) => {
+    const aName = getName(a).toLowerCase();
+    const bName = getName(b).toLowerCase();
+    const aNameStartsWith = aName.startsWith(searchLower);
+    const bNameStartsWith = bName.startsWith(searchLower);
+    const aNameIncludes = aName.includes(searchLower);
+    const bNameIncludes = bName.includes(searchLower);
+
+    // Check if either item should use date sorting
+    const aUseDateSort = shouldUseDateSort ? shouldUseDateSort(a) : false;
+    const bUseDateSort = shouldUseDateSort ? shouldUseDateSort(b) : false;
+    const bothUseDateSort = aUseDateSort && bUseDateSort;
+
+    // Prioritize startsWith matches
+    if (aNameStartsWith && !bNameStartsWith) {
+      return -1;
+    }
+    if (!aNameStartsWith && bNameStartsWith) {
+      return 1;
+    }
+
+    // If both start with, sort by date (if both use date sort) or alphabetically
+    if (aNameStartsWith && bNameStartsWith) {
+      if (bothUseDateSort && getDate) {
+        const aDate = getDate(a);
+        const bDate = getDate(b);
+        if (aDate && bDate) {
+          return new Date(bDate).getTime() - new Date(aDate).getTime();
+        } else if (aDate && !bDate) {
+          return 1;
+        } else if (!aDate && bDate) {
+          return -1;
+        }
+      }
+      return aName.localeCompare(bName);
+    }
+
+    // Prioritize includes matches over tag matches
+    if (aNameIncludes && !bNameIncludes) {
+      return -1;
+    }
+    if (!aNameIncludes && bNameIncludes) {
+      return 1;
+    }
+
+    // If both match by name (includes), sort by date (if both use date sort) or alphabetically
+    if (aNameIncludes && bNameIncludes) {
+      if (bothUseDateSort && getDate) {
+        const aDate = getDate(a);
+        const bDate = getDate(b);
+        if (aDate && bDate) {
+          return new Date(bDate).getTime() - new Date(aDate).getTime();
+        } else if (aDate && !bDate) {
+          return 1;
+        } else if (!aDate && bDate) {
+          return -1;
+        }
+      }
+      return aName.localeCompare(bName);
+    }
+
+    // If both match by tag, maintain original order
+    return 0;
+  });
+}
+
+export function filterAndSortSearchItems<T>(
+  items: T[],
+  searchValue: string,
+  options: SearchOptions<T>
+): T[] {
+  const filtered = filterSearchItems(items, searchValue, options);
+  return sortSearchItems(filtered, searchValue, options);
+}
+
+export function getPageTitle(page: Page): string {
+  return page.exports?.title ?? page.tableOfContents?.[0]?.title ?? page.name;
+}
+
+export function getOrderedLibraries(currentPage: Page) {
+  const allLibraries = (Object.keys(TAB_DEFS) as Library[]).map(id => ({id, ...TAB_DEFS[id]}));
+  const currentLibId = getLibraryFromPage(currentPage);
+  const currentIndex = allLibraries.findIndex(lib => lib.id === currentLibId);
+  if (currentIndex > 0) {
+    const currentLib = allLibraries.splice(currentIndex, 1)[0];
+    allLibraries.unshift(currentLib);
+  }
+  return allLibraries;
+}
+
+
+export function getResourceTags(library: Library): Tag[] {
+  if (library === 'react-spectrum') {
+    return [{id: 'icons', name: 'Icons'}];
+  }
+  return [];
+}
+
+export function useFilteredIcons(searchValue: string) {
+  const iconFilter = useIconFilter();
+  return useMemo(() => {
+    if (!searchValue.trim()) {
+      return iconList;
+    }
+    return iconList.filter(item => iconFilter(item.id, searchValue));
+  }, [searchValue, iconFilter]);
+}
+
+export function useSearchTagSelection(
+  searchValue: string,
+  sectionTags: Tag[],
+  resourceTags: Tag[],
+  initialTagId: string
+) {
+  const [selectedTagId, setSelectedTagId] = useState<string>(initialTagId);
+  const prevSearchWasEmptyRef = useRef<boolean>(true);
+
+  // Ensure selected tag is valid for the current library
+  const baseSectionIds = sectionTags.map(s => s.id);
+  const resourceTagIds = resourceTags.map(t => t.id);
+  const allBaseIds = useMemo(() => [...baseSectionIds, ...resourceTagIds], [baseSectionIds, resourceTagIds]);
+  const isResourceSelected = selectedTagId && resourceTagIds.includes(selectedTagId);
+  const sectionIds = useMemo(() => {
+    return searchValue.trim().length > 0 && !isResourceSelected ? ['all', ...allBaseIds] : allBaseIds;
+  }, [searchValue, isResourceSelected, allBaseIds]);
+  
+  useEffect(() => {
+    if (!selectedTagId || !sectionIds.includes(selectedTagId)) {
+      setSelectedTagId(sectionIds[0] || 'components');
+    }
+  }, [selectedTagId, sectionIds, setSelectedTagId]);
+
+  // Auto-select "All" when search starts (unless resource is selected)
+  useEffect(() => {
+    const isEmpty = searchValue.trim().length === 0;
+    if (prevSearchWasEmptyRef.current && !isEmpty && !isResourceSelected) {
+      setSelectedTagId('all');
+    }
+    prevSearchWasEmptyRef.current = isEmpty;
+  }, [searchValue, isResourceSelected]);
+
+  return [selectedTagId, setSelectedTagId] as const;
+}
+
+export function useSectionTagsForDisplay(
+  sections: Section[],
+  searchValue: string,
+  selectedTagId: string,
+  resourceTagIds: string[]
+): Tag[] {
+  return useMemo(() => {
+    const base = sections.map(s => ({id: s.id, name: s.name}));
+    if (searchValue.trim().length > 0 && !resourceTagIds.includes(selectedTagId)) {
+      return [{id: 'all', name: 'All'}, ...base];
+    }
+    return base;
+  }, [sections, searchValue, selectedTagId, resourceTagIds]);
+}
+
+export function sortItemsForDisplay<T extends {name: string, date?: string}>(items: T[], searchValue: string): T[] {
+  if (searchValue.trim().length === 0) {
+    return [...items].sort((a, b) => {
+      const aIsIntro = a.name === 'Introduction';
+      const bIsIntro = b.name === 'Introduction';
+
+      // Date sorting for Blog/Releases
+      if (a.date && b.date) {
+        const aDate = new Date(a.date);
+        const bDate = new Date(b.date);
+        return bDate.getTime() - aDate.getTime();
+      } else if (a.date && !b.date) {
+        return 1;
+      } else if (!a.date && b.date) {
+        return -1;
+      }
+
+      // Introduction first
+      if (aIsIntro && !bIsIntro) {
+        return -1;
+      }
+      if (!aIsIntro && bIsIntro) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+  return items;
+}
+
+export function createSearchOptions<T extends {name: string, tags: string[], date?: string, section?: string}>() {
+  return {
+    getName: (item: T) => item.name,
+    getTags: (item: T) => item.tags,
+    getDate: (item: T) => item.date,
+    shouldUseDateSort: (item: T) => {
+      const section = item.section;
+      return section === 'Blog' || section === 'Releases';
+    }
+  };
+}
+
+export function SearchEmptyState({searchValue, libraryLabel}: {searchValue: string, libraryLabel: string}) {
+  return (
+    <IllustratedMessage styles={style({margin: 32})}>
+      <NoSearchResults />
+      <Heading>No results</Heading>
+      {searchValue.trim().length > 0 ? (
+        <Content>
+          No results found for <strong className={style({fontWeight: 'bold'})}>{searchValue}</strong> in {libraryLabel}.
+        </Content>
+      ) : (
+        <Content>
+          No results found in {libraryLabel}.
+        </Content>
+      )}
+    </IllustratedMessage>
+  );
+}