Update dependencies, including ApexCharts 7 and DocSearch 5 (#2918)

docs/components/DocsSearch.astro

@@ -56,11 +56,13 @@ import Icon from '@ui/Icon.astro'
       if (state === 'loading') return
       state = 'loading'
       try {
-        const { default: docsearch } = await import('@docsearch/js')
+        // The package root is the Ask AI build in v5; /docsearch is plain keyword search.
+        const { default: docsearch } = await import('@docsearch/js/docsearch')
         docsearch({
           container: '#docsearch',
           appId,
-          indexName,
+          // DocSearch 5 takes a list of indices instead of a single indexName.
+          indices: [indexName],
           apiKey,
         })
         state = 'ready'

docs/components/callouts/index.ts

@@ -0,0 +1,10 @@
+// The callout components every MDX page can use without importing them itself.
+// Both the page route and the llms.txt renderer pass this map to <Content />,
+// so a page that uses <Warning> renders the same in either.
+import Danger from './Danger.astro'
+import Info from './Info.astro'
+import Note from './Note.astro'
+import Tip from './Tip.astro'
+import Warning from './Warning.astro'
+
+export const callouts = { Danger, Info, Note, Tip, Warning }

docs/lib/llms.ts

@@ -17,6 +17,7 @@ import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import { getContainerRenderer } from '@astrojs/mdx/container-renderer'
 import { beautifyHtml, extractMarkedSnippet } from '@shared/lib/code-example'
 import { site } from '@shared/lib/site'
+import { callouts } from '@components/callouts/index.ts'
 import docs from '@data/docs.json'
 import packageManagers from '@data/package-managers.json'
 import { cdnCssTag, cdnJsTag, cdnPackageSnippet, cdnPluginSnippet } from './cdn-snippets.ts'
@@ -145,7 +146,8 @@ const getContainer = () => (container ??= loadRenderers([getContainerRenderer()]
 async function renderedExamples(entry: CollectionEntry<'docs'>): Promise<(string | null)[]> {
   try {
     const { Content } = await render(entry)
-    const html = await (await getContainer()).renderToString(Content)
+    // Same components the page route passes, or every page using a callout throws.
+    const html = await (await getContainer()).renderToString(Content, { props: { components: callouts } })
 
     return html
       .split(EXAMPLE_MARKER)

docs/package.json

@@ -16,20 +16,20 @@
     "type-check": "astro check"
   },
   "dependencies": {
-    "@astrojs/vercel": "^11.0.5",
-    "@docsearch/js": "^4.7.0",
+    "@astrojs/vercel": "^11.0.8",
+    "@docsearch/js": "^5.0.4",
     "@tabler/core": "workspace:*",
     "@vercel/functions": "^3.9.5",
-    "astro": "^7.1.6",
-    "shiki": "^4.3.1"
+    "astro": "^7.2.9",
+    "shiki": "^4.4.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-satteri": "^0.3.4",
-    "@astrojs/mdx": "^7.0.3",
-    "@docsearch/css": "^4.7.0",
+    "@astrojs/markdown-satteri": "^0.3.8",
+    "@astrojs/mdx": "^7.0.8",
+    "@docsearch/css": "^5.0.4",
     "@tabler/preview": "workspace:*",
-    "@types/node": "^26.1.1",
+    "@types/node": "^26.4.0",
     "js-beautify": "^2.0.3",
     "sharp": "^0.35.3",
     "shx": "^0.4.0",

docs/pages/[...slug].astro

@@ -7,14 +7,7 @@ import { getCollection, render } from 'astro:content'
 import DocsLayout from '@layouts/DocsLayout.astro'
 import { docsUrlFromId } from '@lib/docs-pages'
 import { markdownUrlFromDocsUrl } from '@lib/markdown-url'
-import Danger from '@components/callouts/Danger.astro'
-import Info from '@components/callouts/Info.astro'
-import Note from '@components/callouts/Note.astro'
-import Tip from '@components/callouts/Tip.astro'
-import Warning from '@components/callouts/Warning.astro'
-
-// Callouts are available to every MDX page without an import of its own.
-const callouts = { Danger, Info, Note, Tip, Warning }
+import { callouts } from '@components/callouts/index.ts'
 
 export const getStaticPaths = (async () => {
   const entries = await getCollection('docs')

docs/scss/docs.scss

@@ -26,8 +26,7 @@
   --docsearch-footer-background: var(--tblr-bg-surface);
   --docsearch-key-background: var(--tblr-bg-surface-secondary);
   --docsearch-key-color: var(--tblr-secondary);
-  --docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
-  --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
+  --docsearch-key-pressed-shadow: 0 0 0 1px var(--tblr-border-color);
 }
 
 .DocSearch-Button {