@master/internal-site 0.2.3 → 0.2.5

package/dist/{localization-LfIbIysE.mjs → localization-IeZXkrNw.mjs}

@@ -255,6 +255,15 @@ async function sharedInterfaceKeys(sourceRoot = join(dirname(fileURLToPath(impor
 	await visit(sourceRoot);
 	return [...keys].sort();
 }
+/**
+* Shared copy and data modules can hold reader-facing prose that a translation mirrors.
+* Shared components and compiled tooling cannot: their interface strings are reviewed
+* through the localized dictionaries, so a rendering change must not mark every
+* document that uses them as changed English source.
+*/
+function isSharedSourceModule(path) {
+	return !/^dist\//.test(path) && !/\.(?:astro|svelte)$/.test(path) && !/\/common\/(?:translations|locales)\.[jt]s$/.test(path);
+}
 /** Follow local prose/data modules without executing them or importing product compiler code. */
 async function collectSourceDependencies(files, { siteRoot }) {
 	const root = resolve(siteRoot);
@@ -264,13 +273,13 @@ async function collectSourceDependencies(files, { siteRoot }) {
 	const visit = async (file) => {
 		file = resolve(file).replace(/\.(tw|ja|ko|cn)\.mdx$/, ".mdx");
 		if (!file.startsWith(root + sep) && !file.startsWith(sharedRoot + sep) || seen.has(file)) return;
-		if (file.startsWith(sharedRoot + sep) && /\/common\/(?:translations|locales)\.[jt]s$/.test(file.replaceAll("\\", "/"))) return;
+		if (file.startsWith(sharedRoot + sep) && !isSharedSourceModule(relative(sharedRoot, file).replaceAll("\\", "/"))) return;
 		seen.add(file);
 		const source = await readFile(file, "utf8").catch(() => void 0);
 		if (source === void 0) return;
 		const key = file.startsWith(sharedRoot + sep) ? `@master/internal-site/${relative(sharedRoot, file)}` : relative(root, file);
 		collected[key.replaceAll("\\", "/")] = source;
-		const imports = source.matchAll(/(?:\bfrom\s*|\bimport\s*(?:\(\s*)?)(['"])([^'"\n]+)\1/g);
+		const imports = source.replace(/\b(?:import|export)\s+type\b[^'";]*?\bfrom\s*(['"])[^'"\n]+\1/g, "").matchAll(/(?:\bfrom\s*|\bimport\s*(?:\(\s*)?)(['"])([^'"\n]+)\1/g);
 		for (const [, , specifier] of imports) {
 			if (!specifier.startsWith(".") && !specifier.startsWith("~/site/") && !specifier.startsWith("@master/internal-site/")) continue;
 			let target;

package/dist/localization.mjs

@@ -1 +1 @@
-export { t as assertTranslations, n as auditTranslations, r as collectSourceDependencies, i as discoverDocumentResources, a as emptyReviews, o as headingAnchors, p as localizedMetadata, s as readLocalizedDocument, c as reviewTranslation, l as sharedInterfaceKeys, u as stabilizeHeadingAnchors, d as validateSiteTranslations } from "./localization-LfIbIysE.mjs";
+export { t as assertTranslations, n as auditTranslations, r as collectSourceDependencies, i as discoverDocumentResources, a as emptyReviews, o as headingAnchors, p as localizedMetadata, s as readLocalizedDocument, c as reviewTranslation, l as sharedInterfaceKeys, u as stabilizeHeadingAnchors, d as validateSiteTranslations } from "./localization-IeZXkrNw.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {
@@ -309,7 +309,7 @@
     "astro": "7.4.2",
     "svelte": "5.57.2",
     "@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-astro": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
+    "@master/css-astro": "^2.0.1",
     "vite": "8.3.5",
     "@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
     "@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
@@ -349,6 +349,7 @@
     "@astrojs/markdown-remark": "^7.3.4",
     "@resvg/resvg-js": "2.6.2",
     "satori": "0.63.2",
+    "sharp": "0.35.5",
     "mdast-util-mdx-jsx": "^3.2.0",
     "micromark-extension-mdx-jsx": "^3.0.2"
   },

package/src/astro/image-variants.ts

@@ -0,0 +1,96 @@
+import { createHash } from 'node:crypto'
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { basename, extname, join } from 'node:path'
+import sharp from 'sharp'
+import type { Plugin } from 'vite'
+import { cleanId } from './module-id'
+
+/** Widths a bitmap is also delivered at, when they are clearly smaller than its own. */
+export const variantWidths = [256, 640, 960, 1280, 1920, 2560]
+export const avifOptions = { quality: 60, effort: 3 } as const
+// libaom splits its work by the configured thread count, so the encoded bytes depend on it.
+// A fixed count keeps every builder's output identical regardless of its CPU count.
+const encoderThreads = 4
+const bitmap = /\.(?:png|jpe?g|webp)$/i
+const marker = '?master-image'
+
+export interface ImageVariants {
+  /** Files to write into the build output, keyed by their output-relative path. */
+  readonly files: Map<string, Uint8Array>
+  plugin(): Plugin
+  write(outDir: string): Promise<void>
+}
+
+/** Delivered widths for a bitmap of the given intrinsic width, smallest first. */
+export function deliveredWidths(width: number) {
+  return [...variantWidths.filter(candidate => candidate <= width * 0.8), width]
+}
+
+/**
+ * Build-time responsive images for bitmap imports.
+ *
+ * An imported PNG, JPEG or WebP resolves to `{ src, width, height, srcset }`, where every
+ * candidate is an AVIF encoded during the build. The module is plain data, so the server
+ * render and a hydrating island read the same `srcset`. Encoding is deterministic for a
+ * given sharp version; outputs are content-hashed under the assets directory.
+ * Development keeps Astro's own image modules so the dev server starts without encoding.
+ */
+export function imageVariants({ base, assetsDir }: { base: string; assetsDir: string }): ImageVariants {
+  const files = new Map<string, Uint8Array>()
+  const modules = new Map<string, Promise<string | undefined>>()
+  const directory = assetsDir.replace(/^\/|\/$/g, '')
+  const root = base.replace(/\/?$/, '/')
+
+  async function encode(source: Buffer, stem: string, width: number, intrinsic: number) {
+    const pipeline = sharp(source)
+    if (width !== intrinsic) pipeline.resize({ width })
+    const bytes = await pipeline.avif(avifOptions).toBuffer()
+    const hash = createHash('sha256').update(bytes).digest('base64url').slice(0, 8)
+    const name = `${directory}/${stem}-${width}.${hash}.avif`
+    files.set(name, bytes)
+    return { url: root + name, width }
+  }
+
+  async function load(file: string) {
+    const source = await readFile(file)
+    const { width, height, pages } = await sharp(source).metadata()
+    // Animated sources keep their original file.
+    if (!width || !height || (pages ?? 1) > 1) return
+    const stem = basename(file, extname(file)).replace(/[^\w-]+/g, '-')
+    const variants = await Promise.all(deliveredWidths(width).map(size => encode(source, stem, size, width)))
+    const image = { src: variants.at(-1)!.url, width, height, format: 'avif', srcset: variants.map(variant => `${variant.url} ${variant.width}w`).join(', ') }
+    return `export default ${JSON.stringify(image)}`
+  }
+
+  return {
+    files,
+    plugin: () => ({
+      name: '@master/internal-site:image-variants',
+      // Before Vite's asset handling and alongside Astro's image modules, which
+      // leave queried image ids to other plugins.
+      enforce: 'pre',
+      apply: 'build',
+      buildStart() { sharp.concurrency(encoderThreads) },
+      async resolveId(source, importer, options) {
+        if (!importer || importer.endsWith(marker) || source.includes('?') || !bitmap.test(source)) return
+        const resolved = await this.resolve(source, importer, { ...options, skipSelf: true })
+        if (!resolved || resolved.external || resolved.id.includes('?') || !bitmap.test(resolved.id)) return
+        return resolved.id + marker
+      },
+      async load(id) {
+        if (!id.endsWith(marker)) return
+        const file = cleanId(id)
+        this.addWatchFile(file)
+        if (!modules.has(file)) modules.set(file, load(file))
+        return await modules.get(file) ?? `export { default } from ${JSON.stringify(file)}`
+      }
+    }),
+    async write(outDir) {
+      for (const [name, bytes] of [...files].sort(([a], [b]) => a < b ? -1 : 1)) {
+        const target = join(outDir, name)
+        await mkdir(join(target, '..'), { recursive: true })
+        await writeFile(target, bytes)
+      }
+    }
+  }
+}

package/src/astro/index.ts

@@ -15,8 +15,11 @@ import { prepareContentPages } from './content-pages'
 import { validateSiteTranslations } from '../scripts/localization'
 import serverStyles from './server-styles'
 import svgMarkup from './svg-markup'
+import { imageVariants, type ImageVariants } from './image-variants'
 import localizedMdx from './localized-mdx'
 import { compactStyleAssets } from './style-assets'
+import { writeTranslationAssets } from './site-translations'
+import { hoistIslandScripts } from './island-scripts'
 import remarkSlugAndTOC from '../docs-shell/remark/slug-and-toc.js'
 import remarkMarkdownComponents from '../docs-shell/remark/markdown-components.js'
 import svgoConfig from '../docs-shell/common/svgo.config.js'
@@ -28,6 +31,7 @@ const propagated = (url: URL) => `() => import(${JSON.stringify(fsImport(url) +
 
 export default function masterSite(site: SiteConfig): AstroIntegration {
   let output: URL
+  let images: ImageVariants | undefined
   return {
     name: '@master/internal-site',
     hooks: {
@@ -102,10 +106,12 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
             })
           }
         }
+        images = command === 'build' ? imageVariants({ base: config.base, assetsDir: config.build.assets }) : undefined
         addRenderer({
           name: '@master/internal-site:svelte',
           serverEntrypoint: fileURLToPath(new URL('./svelte-renderer.ts', import.meta.url)),
-          clientEntrypoint: '@astrojs/svelte/client.js'
+          // Built pages deliver the island dictionary as a cached file; hydration waits for it.
+          clientEntrypoint: fileURLToPath(new URL('./svelte-client.ts', import.meta.url))
         })
         injectRoute({ pattern: '/[...path]', entrypoint: new URL('./Page.astro', import.meta.url), prerender: true })
         updateConfig({
@@ -114,8 +120,10 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
           build: { format: 'file' },
           markdown: { processor: unified({ remarkPlugins: [remarkSlugAndTOC, remarkMarkdownComponents], gfm: true, smartypants: false }), syntaxHighlight: false },
           experimental: { svgOptimizer: svgoOptimizer(svgoConfig as Parameters<typeof svgoOptimizer>[0]) },
-          vite: { plugins: [plugin, localizedMdx(site.i18n), sourceURL(), serverStyles([root, packageSource]), svgMarkup()], resolve: { dedupe: ['svelte'] }, server: { fs: { allow: [searchForWorkspaceRoot(root), packageSource] } } },
-          integrations: [svelte(), mdx(), masterCSS({ mode: 'progressive' })]
+          vite: { plugins: [plugin, localizedMdx(site.i18n), sourceURL(), serverStyles([root, packageSource]), svgMarkup(), ...images ? [images.plugin()] : []], resolve: { dedupe: ['svelte'] }, server: { fs: { allow: [searchForWorkspaceRoot(root), packageSource] } } },
+          // Every route is prerendered and its island classes are present in the rendered HTML,
+          // so pages ship their Master CSS without a browser runtime or hydration manifest.
+          integrations: [svelte(), mdx(), masterCSS({ mode: 'prerender' })]
         })
       },
       'astro:config:done': ({ config }) => { output = config.outDir },
@@ -123,7 +131,9 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
         const destination = output
         await mkdir(destination, { recursive: true })
         await cp(new URL('../public/', import.meta.url), destination, { recursive: true, force: false })
-        await compactStyleAssets(fileURLToPath(destination))
+        await images?.write(fileURLToPath(destination))
+        await compactStyleAssets(fileURLToPath(destination), hoistIslandScripts)
+        await writeTranslationAssets(fileURLToPath(destination), site.i18n)
       }
     }
   }

package/src/astro/island-scripts.ts

@@ -0,0 +1,31 @@
+export const islandScriptSlot = '<!--master-site:island-scripts-->'
+
+const islandStyles = '<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>'
+
+/** Move Astro's first client:load preamble ahead of the stylesheets. A classic
+ * script after a stylesheet pauses HTML parsing until that stylesheet arrives. */
+export function hoistIslandScripts(html: string) {
+  const slot = html.indexOf(islandScriptSlot)
+  if (slot < 0) return html
+  const unchanged = () => html.replace(islandScriptSlot, '')
+
+  const headEnd = html.indexOf('</head>', slot)
+  const body = html.indexOf('<body', headEnd)
+  if (headEnd < 0 || body < 0) return unchanged()
+
+  const island = html.indexOf('<astro-island ', body)
+  const styles = html.indexOf(islandStyles, body)
+  if (island < 0 || styles < 0 || styles > island) return unchanged()
+
+  const start = styles + islandStyles.length
+  const preamble = html.slice(start, island)
+  const scripts = preamble.match(/<script>[\s\S]*?<\/script>/g)
+  if (!scripts || scripts.length !== 2 || preamble.trim() !== scripts.join('')) return unchanged()
+  const [directive, runtime] = scripts
+  // Leave unfamiliar Astro output alone. Only the shell's known first island
+  // can supply this preamble. Author scripts and later directives stay put.
+  if (!directive.includes('astro:load') || !directive.includes('self.Astro')
+    || !runtime.includes('customElements.define(') || !runtime.includes('astro-island')) return unchanged()
+
+  return (html.slice(0, start) + html.slice(island)).replace(islandScriptSlot, directive + runtime)
+}

package/src/astro/site-translations.ts

@@ -0,0 +1,31 @@
+import { createHash } from 'node:crypto'
+import { mkdir, writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import sharedTranslations from '../docs-shell/common/translations'
+
+type Dictionaries = Record<string, Record<string, string>>
+
+/** The island dictionary of one locale: shared interface copy, then the site's own, as `siteContextOf()` merges it. */
+export function translationsOfLocale(siteTranslations: Dictionaries, locale: string): Record<string, string> {
+  return { ...sharedTranslations[locale], ...siteTranslations[locale] }
+}
+
+/**
+ * Built pages deliver the island dictionary as one content-addressed file per locale
+ * instead of serializing it into every page: browsers fetch it once and reuse it on
+ * every page of that locale. A locale without entries needs no file.
+ */
+export function translationAsset(translations: Record<string, string>) {
+  if (!Object.keys(translations).length) return
+  const json = JSON.stringify(translations)
+  const hash = createHash('sha256').update(json).digest('hex').slice(0, 16)
+  return { href: `/_astro/site-translations-${hash}.json`, json }
+}
+
+/** Write the files that `translationAsset()` names for every locale into the build output. */
+export async function writeTranslationAssets(output: string, i18n: { locales: readonly string[], translations: Dictionaries }) {
+  const assets = i18n.locales.map(locale => translationAsset(translationsOfLocale(i18n.translations, locale))).filter(asset => asset !== undefined)
+  if (!assets.length) return
+  await mkdir(resolve(output, '_astro'), { recursive: true })
+  await Promise.all(assets.map(({ href, json }) => writeFile(resolve(output, '.' + href), json)))
+}

package/src/astro/style-assets.ts

@@ -30,7 +30,7 @@ export async function inlineGeneratedStyles(file: string, ancestors: string[] =
 
 /** Preserve HTML link order and each reusable entry's cache identity. Originals
  * remain available to any JS/CSS references; no client loading logic is added. */
-export async function compactStyleAssets(output: string) {
+export async function compactStyleAssets(output: string, transformPage = (html: string) => html) {
   const root = resolve(output), replacements = new Map<string, string>()
   const documents = new Map<string, string>(), users = new Map<string, string[]>()
   const boundaries = new Set<string>()
@@ -102,6 +102,6 @@ export async function compactStyleAssets(output: string) {
       await flush()
       html = html.replace(run[0], replacement)
     }
-    await writeFile(file, html)
+    await writeFile(file, transformPage(html))
   }
 }

package/src/astro/svelte-client.ts

@@ -0,0 +1,13 @@
+import hydrateSvelte from '@astrojs/svelte/client.js'
+import { applySiteTranslations } from '../docs-shell/site-dictionary'
+
+type Hydrate = ReturnType<typeof hydrateSvelte>
+
+/** `@astrojs/svelte` hydration once the page's dictionary has reached the context `getSite()` reads. */
+export default (element: HTMLElement) => {
+  const hydrate = hydrateSvelte(element)
+  return async (...args: Parameters<Hydrate>) => {
+    await applySiteTranslations()
+    return hydrate(...args)
+  }
+}

package/src/docs-shell/components/Image.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-  /** Render a bitmap with intrinsic dimensions and, on Cloudflare, resized sources. */
+  /** Render a bitmap with intrinsic dimensions and resized sources: built AVIF candidates for imports, Cloudflare for URLs. */
   let { src, width, height, fill, priority, quality, placeholder: _placeholder, loading, sizes, style, alt = '', fetchpriority, ...props }: ImageProps = $props()
 
   const source = $derived(typeof src === 'string' ? src : src.src)
@@ -38,15 +38,18 @@
   const intrinsicHeight = $derived(fill ? undefined : Number(height ?? (typeof src === 'object' ? src.height : undefined)) || undefined)
   const url = (size: number) => createCloudflareImageUrl({ src: source, width: size, quality, siteUrl: import.meta.env.PUBLIC_URL })
   const widths = $derived(candidateWidths(intrinsicWidth, sizes))
-  const resized = $derived(transformations && url(widths[0]) !== source)
+  const built = $derived(typeof src === 'object' ? src.srcset : undefined)
+  const resized = $derived(!built && transformations && url(widths[0]) !== source)
+  // Built candidates use width descriptors; a fixed display width tells the browser which one fits.
+  const builtSizes = $derived(sizes ?? (fill ? '100vw' : width ? `${Number(width)}px` : undefined))
 </script>
 
 <img
   {...props}
   {alt}
   src={resized ? url(widths.at(-1)!) : source}
-  srcset={resized ? widths.map((size, index) => sizes || !intrinsicWidth ? `${url(size)} ${size}w` : `${url(size)} ${index + 1}x`).join(', ') : undefined}
-  sizes={resized ? sizes ?? (fill ? '100vw' : undefined) : undefined}
+  srcset={built ?? (resized ? widths.map((size, index) => sizes || !intrinsicWidth ? `${url(size)} ${size}w` : `${url(size)} ${index + 1}x`).join(', ') : undefined)}
+  sizes={built ? builtSizes : resized ? sizes ?? (fill ? '100vw' : undefined) : undefined}
   width={intrinsicWidth}
   height={intrinsicHeight}
   loading={priority ? 'eager' : loading ?? 'lazy'}

package/src/docs-shell/components/SearchButton.svelte

@@ -5,7 +5,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
   import IconSearch from '@tabler/icons-svelte-runes/icons/search'
-  import { openSearch, searchLabels } from '../contexts/search'
+  import { openSearch, prefetchSearch, searchLabels } from '../contexts/search'
   import { getSite } from '../site'
 
   interface Props extends HTMLButtonAttributes {
@@ -13,7 +13,7 @@
   }
 
   /** Opens the page's search dialog. Without children it renders the search field trigger (`ui-search-trigger`) with its shortcut. */
-  let { class: className, children, onclick, type = 'button', ...props }: Props = $props()
+  let { class: className, children, onclick, onfocus, onpointerenter, type = 'button', ...props }: Props = $props()
   const { t, locale } = getSite()
   const { searchText, searchLabel } = searchLabels(t, locale)
 
@@ -23,7 +23,9 @@
   }
 </script>
 
-<button {...props} {type} class={className} aria-label={props['aria-label'] ?? searchLabel} aria-keyshortcuts="Meta+K Control+K" onclick={handleClick}>
+<button {...props} {type} class={className} aria-label={props['aria-label'] ?? searchLabel} aria-keyshortcuts="Meta+K Control+K" onclick={handleClick}
+  onpointerenter={event => { onpointerenter?.(event); prefetchSearch() }}
+  onfocus={event => { onfocus?.(event); prefetchSearch() }}>
   {#if children}
     {@render children()}
   {:else}

package/src/docs-shell/components/SearchDialog.svelte

@@ -1,176 +1,62 @@
-<script lang="ts" module>
-  import type { Attachment } from 'svelte/attachments'
-  import type { DocumentationSearchPage } from '../utils/documentation-search'
-
-  const cache: Record<string, Promise<DocumentationSearchPage[]>> = {}
-
-  async function loadPages(locale: string) {
-    cache[locale] ??= fetch(`/search/${encodeURIComponent(locale)}.json`).then(response => {
-      if (!response.ok) throw new Error(`Search unavailable (${response.status})`)
-      return response.json()
-    }).catch(error => { delete cache[locale]; throw error })
-    return cache[locale]
-  }
-
-  /** The dialog lives at the end of the body, outside the island that opens it. */
-  const portal: Attachment<HTMLElement> = (node) => {
-    document.body.append(node)
-    return () => node.remove()
-  }
-</script>
-
 <script lang="ts">
-  import '@master/internal-site/styles/interface.css'
-  import '@master/internal-site/styles/system/dialog.css'
-
-  import '../../styles/docs-shell/documentation-search.css'
-  import { untrack } from 'svelte'
-  import Link from './Link.svelte'
-  import { getSite } from '../site'
-  import { createDocumentationSearch } from '../utils/documentation-search'
-  import { openSearchEvent } from '../contexts/search'
-  import IconArrowDown from '@tabler/icons-svelte-runes/icons/arrow-down'
-  import IconArrowUp from '@tabler/icons-svelte-runes/icons/arrow-up'
-  import IconCornerDownLeft from '@tabler/icons-svelte-runes/icons/corner-down-left'
-  import IconSearch from '@tabler/icons-svelte-runes/icons/search'
-  import IconX from '@tabler/icons-svelte-runes/icons/x'
-  import { isInteractOutside } from '../utils/isInteractOutside'
-
-  /** The page's single search dialog; search triggers in other islands open it by event (`contexts/search`). */
-  const { t, locale } = getSite()
-  let opened = $state(false)
-  let query = $state('')
-  let shortcutModifier = $state('⌘')
-  let pages = $state.raw<DocumentationSearchPage[]>([])
-  let error = $state('')
-  let loading = $state(false)
-  let retry = $state(0)
-  let selected = $state(0)
-  let dialog = $state<HTMLDialogElement>()
-  let input = $state<HTMLInputElement>()
-  let scroll = $state<HTMLDivElement>()
-  let scrollTop = 0
-  let returnFocus: HTMLElement | null = null
-  const search = $derived(createDocumentationSearch(pages))
-  const results = $derived(search(query))
-
-  function selectQuery(value: string) {
-    query = value
-    selected = 0
-    scrollTop = 0
-    if (scroll) scroll.scrollTop = 0
-    input?.focus()
-  }
-
-  function close() {
-    scrollTop = scroll?.scrollTop ?? 0
-    dialog?.close()
-    opened = false
-    returnFocus?.focus()
-  }
-
-  function open(event?: Event) {
-    shortcutModifier = /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? '⌘' : 'Ctrl'
-    const trigger = (event as CustomEvent<{ trigger?: HTMLElement }> | undefined)?.detail?.trigger
-    returnFocus = trigger instanceof HTMLElement ? trigger : document.activeElement as HTMLElement
-    opened = true
-  }
-
-  $effect(() => {
-    if (!opened) return
-    void retry
-    let active = true
-    loading = true
-    error = ''
-    loadPages(locale).then(data => {
-      if (active) { pages = data; loading = false }
-    }, reason => {
-      if (active) { error = reason.message; loading = false }
+  import type { Component } from 'svelte'
+  import { openSearchEvent, prefetchSearchEvent } from '../contexts/search'
+  // A client-only chunk delivers no CSS of its own: link the panel's compiled styles explicitly.
+  import searchStyles from '../../styles/docs-shell/documentation-search.css?url&no-inline'
+
+  type Panel = Component<{ initialTrigger?: HTMLElement | null }>
+
+  /** The page's single search dialog. Its panel and styles load on the first request or on intent
+   * (`prefetchSearch`), so a page does not deliver dialog CSS that its first render never uses. */
+  let Panel = $state<Panel>()
+  let initialTrigger = $state<HTMLElement | null>(null)
+  let loading: Promise<Panel | undefined> | undefined
+
+  function linkStylesheet(href: string) {
+    return new Promise<void>((resolve, reject) => {
+      if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`)) return resolve()
+      const link = Object.assign(document.createElement('link'), { rel: 'stylesheet', href })
+      link.onload = () => resolve()
+      link.onerror = () => { link.remove(); reject(new Error(`Cannot load ${href}`)) }
+      document.head.append(link)
     })
-    return () => { active = false }
-  })
+  }
 
-  $effect(() => {
-    if (opened && dialog) {
-      untrack(() => {
-        if (!dialog!.open) dialog!.showModal()
-        input?.focus()
-        if (scroll) scroll.scrollTop = scrollTop
+  // The panel mounts only after its styles apply, so its first frame is styled.
+  function load() {
+    return loading ??= Promise.all([import('./SearchDialogPanel.svelte'), linkStylesheet(searchStyles)])
+      .then(([module]) => module.default)
+      .catch(error => {
+        loading = undefined
+        console.error('Search dialog could not load', error)
       })
-    }
-  })
-
-  const closeOnBackdropClick: Attachment<HTMLDialogElement> = (element) => {
-    const onclick = (event: MouseEvent) => {
-      if (event.target === element && isInteractOutside(element, event)) close()
-    }
-    element.addEventListener('click', onclick)
-    return () => element.removeEventListener('click', onclick)
   }
 
-  $effect(() => {
-    window.addEventListener(openSearchEvent, open)
-    return () => window.removeEventListener(openSearchEvent, open)
-  })
+  async function request(event: Event) {
+    const trigger = (event as CustomEvent<{ trigger?: HTMLElement }>).detail?.trigger
+    initialTrigger = trigger instanceof HTMLElement ? trigger : document.activeElement as HTMLElement | null
+    Panel = await load()
+  }
 
+  // Until the panel mounts, it owns no listeners: forward the first opening to it.
   function shortcut(event: KeyboardEvent) {
-    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); opened ? close() : open() }
+    if (Panel || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return
+    event.preventDefault()
+    void request(event)
   }
 
-  function onkeydown(event: KeyboardEvent) {
-    if (event.isComposing || event.keyCode === 229) return
-    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(); return }
-    if (event.key === 'Enter' && results.length) { event.preventDefault(); document.getElementById(`documentation-result-${selected}`)?.click() }
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault()
-      const next = Math.max(0, Math.min(results.length - 1, selected + (event.key === 'ArrowDown' ? 1 : -1)))
-      selected = next
-      document.getElementById(`documentation-result-${next}`)?.scrollIntoView({ block: 'nearest' })
+  $effect(() => {
+    if (Panel) return
+    const prefetch = () => void load()
+    window.addEventListener(openSearchEvent, request)
+    window.addEventListener(prefetchSearchEvent, prefetch)
+    return () => {
+      window.removeEventListener(openSearchEvent, request)
+      window.removeEventListener(prefetchSearchEvent, prefetch)
     }
-  }
-
-  const kinds: Record<string, string> = { utility: 'Utility', rule: 'Rule', tokens: 'Tokens', directive: 'Directive', tool: 'Tool', package: 'API' }
-
+  })
 </script>
 
 <svelte:window onkeydown={shortcut} />
 
-{#snippet excerpt(text: string, query: string)}
-  {@const index = text.toLowerCase().indexOf(query.toLowerCase())}
-  {@const start = Math.max(0, index - 45)}
-  {@const value = text.slice(start, start + 220)}
-  {@const offset = value.toLowerCase().indexOf(query.toLowerCase())}
-  {start > 0 ? '…' : ''}{#if offset < 0}{value}{:else}{value.slice(0, offset)}<mark>{value.slice(offset, offset + query.length)}</mark>{value.slice(offset + query.length)}{/if}{start + 220 < text.length ? '…' : ''}
-{/snippet}
-
-{#if opened}
-  <dialog bind:this={dialog} {@attach portal} {@attach closeOnBackdropClick} class="ui-dialog" data-variant="search" aria-label={t('Search documentation')} oncancel={close}>
-    <div class="ui-dialog-search">
-      <IconSearch size={18} stroke={1.5} aria-hidden="true" />
-      <input bind:this={input} type="search" role="combobox" aria-autocomplete="list" aria-expanded={Boolean(query)} value={query} autocomplete="off" spellcheck={false} placeholder={t('Search documentation…')} aria-label={t('Search documentation')} aria-controls="documentation-search-results" aria-activedescendant={results[selected] ? `documentation-result-${selected}` : undefined}
-        oninput={event => selectQuery(event.currentTarget.value)}
-        {onkeydown} />
-      {#if query}<button type="button" class="ui-button" data-variant="quiet" data-shape="icon" data-size="sm" onclick={() => selectQuery('')} aria-label={t('Clear search')}><IconX size={16} stroke={1.5} aria-hidden="true" /></button>{/if}
-      <button type="button" class="ui-button ui-dialog-close" data-variant="quiet" data-size="sm" onclick={close} aria-label={t('Close search')}><span class="ui-kbd">esc</span><span>{t('Cancel')}</span></button>
-    </div>
-    <div class="ui-dialog-body" bind:this={scroll}>
-      <p class="ui-dialog-status" role="status">{loading ? (t('Loading documentation…')) : error ? (t('Search could not load.')) : query ? t(results.length === 40 ? 'Top {count} results' : '{count} results').replace('{count}', String(results.length)) : (t('Find a name, alias or CSS property'))}</p>
-      {#if error}<div class="ui-dialog-note"><p>{t('Check your connection and try again.')}</p><button type="button" class="ui-button" data-size="sm" onclick={() => { retry += 1; input?.focus() }}>{t('Try again')}</button></div>{/if}
-      {#if !query && !error && !loading}<div class="ui-dialog-note">
-        <p>{t('Try searching')}</p>
-        {#each ['padding', 'padding-inline-start:', 'fg-red:hover@sm'] as value (value)}<button type="button" class="ui-button" data-size="sm" onclick={() => selectQuery(value)}><code>{value}</code><IconCornerDownLeft size={14} stroke={1.5} aria-hidden="true" /></button>{/each}
-      </div>{/if}
-      {#if query && !results.length && !error && !loading}<div class="ui-dialog-note" data-align="center"><IconSearch size={24} stroke={1.25} aria-hidden="true" /><b>{t('No matching documents')}</b><p>{t('Try a property name, a token name or a different keyword.')}</p></div>{/if}
-      <ol id="documentation-search-results" class="ui-results" role="listbox" aria-label={t('Search results')} aria-busy={loading}>
-        {#if !error}{#each results as result, index (result.page.url)}<li role="presentation">
-          <Link id={`documentation-result-${index}`} role="option" tabindex={-1} aria-selected={selected === index} href={result.href} onclick={close} onpointermove={() => { selected = index }}>
-            <small>{t(result.page.category ?? '')} · {t(kinds[result.page.kind ?? ''] ?? (result.page.url.includes('/guide') ? 'Guide' : 'Page'))} · {t(result.reason)}</small>
-            <b>{result.page.title}</b>
-            <span>{@render excerpt(result.excerpt, query)}</span>
-          </Link>
-        </li>{/each}{/if}
-      </ol>
-    </div>
-    <div class="ui-dialog-foot" aria-hidden="true"><span><span class="ui-kbd"><IconArrowUp size={12} /></span><span class="ui-kbd"><IconArrowDown size={12} /></span>{t('Navigate')}</span><span><span class="ui-kbd"><IconCornerDownLeft size={12} /></span>{t('Open')}</span><span class="ui-search-shortcut">{t('Search anytime')}<kbd class="ui-kbd">{shortcutModifier}</kbd><kbd class="ui-kbd">K</kbd></span></div>
-  </dialog>
-{/if}
+{#if Panel}<Panel {initialTrigger} />{/if}