svedocs 0.1.0-beta.10

package/dist/search/utils.js

@@ -0,0 +1,93 @@
+export function createExcerpt(content, query) {
+    const terms = tokenizeSearchQuery(query);
+    const haystack = content.toLowerCase();
+    const index = terms.reduce((best, term) => {
+        const next = haystack.indexOf(term);
+        if (next < 0)
+            return best;
+        return best < 0 ? next : Math.min(best, next);
+    }, -1);
+    if (index < 0)
+        return content.slice(0, 160);
+    const start = Math.max(0, index - 60);
+    return content.slice(start, start + 180).trim();
+}
+export function normalizeSearchText(value) {
+    return value
+        .toLowerCase()
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^\p{L}\p{N}]+/gu, ' ')
+        .trim();
+}
+export function tokenizeSearchText(value) {
+    const normalized = normalizeSearchText(value);
+    if (!normalized)
+        return [];
+    return normalized.split(/\s+/).flatMap(tokenizeSearchSegment);
+}
+export function tokenizeSearchQuery(query) {
+    return normalizeSearchText(query).split(/\s+/).filter(Boolean);
+}
+export function stringMetadata(value) {
+    return typeof value === 'string' && value.trim() ? value : undefined;
+}
+export function stringifyMetadata(metadata) {
+    return Object.fromEntries(Object.entries(metadata)
+        .filter(([, value]) => value !== undefined && value !== null)
+        .map(([key, value]) => [key, Array.isArray(value) ? value.join(',') : String(value)]));
+}
+export function uniqueStrings(values) {
+    return [...new Set(values.map((value) => value.trim()).filter(Boolean))];
+}
+export function jsonResponse(value, status = 200) {
+    return new Response(JSON.stringify(value), {
+        status,
+        headers: {
+            'content-type': 'application/json; charset=utf-8'
+        }
+    });
+}
+export function chunkArray(items, size) {
+    const safeSize = Math.max(1, Math.floor(size));
+    const chunks = [];
+    for (let index = 0; index < items.length; index += safeSize) {
+        chunks.push(items.slice(index, index + safeSize));
+    }
+    return chunks;
+}
+export function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function tokenizeSearchSegment(segment) {
+    const tokens = [];
+    let run = '';
+    let runIsCjk;
+    for (const char of Array.from(segment)) {
+        const charIsCjk = isCjkSearchChar(char);
+        if (run && charIsCjk !== runIsCjk) {
+            tokens.push(...tokenizeSearchRun(run, runIsCjk === true));
+            run = '';
+        }
+        run += char;
+        runIsCjk = charIsCjk;
+    }
+    if (run)
+        tokens.push(...tokenizeSearchRun(run, runIsCjk === true));
+    return tokens;
+}
+function tokenizeSearchRun(run, cjk) {
+    if (!cjk)
+        return [run];
+    const chars = Array.from(run);
+    const tokens = [...chars];
+    for (let size = 2; size <= Math.min(3, chars.length); size += 1) {
+        for (let index = 0; index <= chars.length - size; index += 1) {
+            tokens.push(chars.slice(index, index + size).join(''));
+        }
+    }
+    return tokens;
+}
+function isCjkSearchChar(value) {
+    return /[\u3040-\u30ff\u3400-\u9fff\uf900-\ufaff\uac00-\ud7af]/u.test(value);
+}

package/dist/search.d.ts

@@ -0,0 +1,8 @@
+export * from './search/types.js';
+export * from './search/local.js';
+export * from './search/algolia.js';
+export * from './search/typesense.js';
+export * from './search/cloudflare.js';
+export * from './search/cloudflare-sync.js';
+export * from './search/runtime.js';
+//# sourceMappingURL=search.d.ts.map

package/dist/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../src/search.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC"}

package/dist/search.js

@@ -0,0 +1,7 @@
+export * from './search/types.js';
+export * from './search/local.js';
+export * from './search/algolia.js';
+export * from './search/typesense.js';
+export * from './search/cloudflare.js';
+export * from './search/cloudflare-sync.js';
+export * from './search/runtime.js';

package/dist/svelte.d.ts

@@ -0,0 +1,27 @@
+import type { MdsvexOptions } from 'mdsvex';
+export declare const svedocsContentExtensions: readonly [".md", ".mdx", ".svx"];
+export declare const svedocsSvelteExtensions: readonly [".svelte", ".md", ".mdx", ".svx"];
+export interface SvedocsPreprocessor {
+    name: string;
+    markup(input: {
+        content: string;
+        filename?: string;
+    }): Promise<{
+        code: string;
+        data?: Record<string, unknown>;
+        map?: string;
+    } | undefined>;
+}
+export declare function svedocsPreprocess(options?: MdsvexOptions): SvedocsPreprocessor;
+export declare function createSvedocsMdsvexOptions(source: string, options?: MdsvexOptions, svedocsOptions?: {
+    codeTheme?: string;
+    codeThemes?: {
+        light?: string;
+        dark?: string;
+    };
+    shikiTransformers?: unknown[];
+    codeCopyButton?: boolean;
+    headingAnchorLabel?: string;
+    resolveHref?: (href: string) => string;
+}): MdsvexOptions;
+//# sourceMappingURL=svelte.d.ts.map

package/dist/svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.d.ts","sourceRoot":"","sources":["../src/svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAS5C,eAAO,MAAM,wBAAwB,kCAAmC,CAAC;AACzE,eAAO,MAAM,uBAAuB,6CAAoD,CAAC;AAEzF,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,KAAK,EAAE;QACZ,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,OAAO,CAAC;QACV,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,GAAG,SAAS,CAAC,CAAC;CAChB;AAED,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,aAAkB,GAAG,mBAAmB,CAQlF;AAED,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,aAAkB,EAC3B,cAAc,GAAE;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,iBAAiB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC,GACL,aAAa,CAyBf"}

package/dist/svelte.js

@@ -0,0 +1,45 @@
+import { mdsvex } from 'mdsvex';
+import rehypeKatex from 'rehype-katex';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { extractCodeBlocks, rehypeCodeBlocks, remarkSvedocsCodeBlocks } from './mdx/code.js';
+import { rehypeSvedocsHeadingAnchors } from './mdx/headings.js';
+import { rehypeSvedocsLinks } from './mdx/links.js';
+export const svedocsContentExtensions = ['.md', '.mdx', '.svx'];
+export const svedocsSvelteExtensions = ['.svelte', ...svedocsContentExtensions];
+export function svedocsPreprocess(options = {}) {
+    return {
+        name: 'svedocs-mdsvex',
+        async markup(input) {
+            const processor = mdsvex(createSvedocsMdsvexOptions(input.content, options));
+            return processor.markup(input);
+        }
+    };
+}
+export function createSvedocsMdsvexOptions(source, options = {}, svedocsOptions = {}) {
+    const codeBlocks = extractCodeBlocks(source);
+    return {
+        extensions: [...svedocsContentExtensions],
+        ...options,
+        remarkPlugins: [
+            remarkGfm,
+            remarkMath,
+            [remarkSvedocsCodeBlocks, codeBlocks, {
+                    theme: svedocsOptions.codeTheme,
+                    themes: svedocsOptions.codeThemes,
+                    transformers: svedocsOptions.shikiTransformers,
+                    ...(typeof svedocsOptions.codeCopyButton === 'boolean' ? { copyButton: svedocsOptions.codeCopyButton } : {})
+                }],
+            ...(options.remarkPlugins ?? [])
+        ],
+        rehypePlugins: [
+            rehypeSlug,
+            [rehypeSvedocsHeadingAnchors, { label: svedocsOptions.headingAnchorLabel }],
+            rehypeKatex,
+            [rehypeSvedocsLinks, { resolveHref: svedocsOptions.resolveHref }],
+            [rehypeCodeBlocks, codeBlocks],
+            ...(options.rehypePlugins ?? [])
+        ]
+    };
+}

package/dist/testing.d.ts

@@ -0,0 +1,3 @@
+import type { SvedocsPage } from './core.js';
+export declare function createFixturePage(overrides?: Partial<SvedocsPage>): SvedocsPage;
+//# sourceMappingURL=testing.d.ts.map

package/dist/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,SAAS,GAAE,OAAO,CAAC,WAAW,CAAM,GAAG,WAAW,CAsBnF"}

package/dist/testing.js

@@ -0,0 +1,23 @@
+export function createFixturePage(overrides = {}) {
+    const id = overrides.id ?? 'index';
+    const routePath = overrides.routePath ?? '/';
+    return {
+        id,
+        sourcePath: overrides.sourcePath ?? 'content/index.md',
+        routePath,
+        scopePath: overrides.scopePath ?? routePath,
+        slug: overrides.slug ?? [],
+        kind: overrides.kind ?? 'doc',
+        title: overrides.title ?? 'Introduction',
+        html: overrides.html ?? '<h1>Introduction</h1>',
+        plainText: overrides.plainText ?? 'Introduction',
+        headings: overrides.headings ?? [],
+        links: overrides.links ?? [],
+        codeBlocks: overrides.codeBlocks ?? [],
+        frontmatter: overrides.frontmatter ?? {},
+        seo: overrides.seo ?? { title: overrides.title ?? 'Introduction' },
+        search: overrides.search ?? [],
+        lastUpdated: overrides.lastUpdated ?? '2026-05-18T00:00:00.000Z',
+        ...overrides
+    };
+}

package/dist/theme/Article.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Component } from 'svelte';
+  import type { SvedocsPage } from '../core/types.js';
+  import { copyCodeToClipboard, fallbackTranslate } from './headless.js';
+  import SafeRenderError from './SafeRenderError.svelte';
+  import type { SvedocsThemeComponentMap, SvedocsThemeContext } from './types.js';
+
+  export let page: SvedocsPage;
+  export let content: Component | undefined = undefined;
+  export let context: SvedocsThemeContext | undefined = undefined;
+  export let hasDocHeaderSlot: boolean | undefined = undefined;
+  export let themeComponents: Partial<SvedocsThemeComponentMap> = {};
+
+  $: ErrorComponent = SafeRenderError;
+  $: t = context?.t ?? fallbackTranslate;
+  $: breadcrumbs = createBreadcrumbs(page, context);
+  $: kind = page.kind === 'doc' ? t('article.kind.doc') : t('article.kind.page');
+  $: eyebrow = breadcrumbs.length > 0 ? breadcrumbs : [{ label: kind, path: page.kind === 'doc' ? findDocsRoot(page, context) : '/' }];
+  $: showDocHeaderSlot = hasDocHeaderSlot ?? Boolean($$slots['doc-header']);
+
+  onMount(() => {
+    const root = document.querySelector<HTMLElement>('.sd-prose');
+    if (!root) return;
+    function handleClick(event: MouseEvent) {
+      const target = event.target as HTMLElement | null;
+      const button = target?.closest<HTMLButtonElement>('button.sd-code-copy');
+      if (!button) return;
+      event.preventDefault();
+      const block = button.closest<HTMLElement>('.sd-code');
+      if (!block) return;
+      const source = block.dataset.copy
+        ?? block.querySelector<HTMLElement>('code[data-copy]')?.dataset.copy
+        ?? block.querySelector('code')?.textContent
+        ?? block.textContent
+        ?? '';
+      void copyCodeToClipboard(button, source, t('code.copied'), button.getAttribute('aria-label') ?? t('code.copy'));
+    }
+    root.addEventListener('click', handleClick);
+    return () => root.removeEventListener('click', handleClick);
+  });
+
+  function createBreadcrumbs(page: SvedocsPage, context: SvedocsThemeContext | undefined) {
+    if (page.kind !== 'doc') return [];
+    const docsRoot = findDocsRoot(page, context);
+    if (page.routePath === docsRoot) return [];
+    const segments = page.routePath.split('/').filter(Boolean);
+    const rootLength = docsRoot.split('/').filter(Boolean).length;
+    const breadcrumbs = [{ label: t('nav.docs'), path: docsRoot }];
+    for (let length = rootLength + 1; length < segments.length; length += 1) {
+      const path = `/${segments.slice(0, length).join('/')}`;
+      const target = context?.pages.find((candidate) => candidate.routePath === path);
+      breadcrumbs.push({ label: target?.navTitle ?? target?.title ?? titleFromSegment(segments[length - 1] ?? ''), path });
+    }
+    return breadcrumbs;
+  }
+
+  function titleFromSegment(segment: string): string {
+    return segment
+      .replace(/[-_]+/g, ' ')
+      .replace(/\b\w/g, (letter) => letter.toUpperCase());
+  }
+
+  function findDocsRoot(page: SvedocsPage, context: SvedocsThemeContext | undefined): string {
+    const translatedRoot = context?.pages.find((candidate) => (
+      candidate.kind === 'doc'
+      && candidate.scopePath === '/docs'
+      && candidate.locale === page.locale
+    ));
+    if (translatedRoot) return translatedRoot.routePath;
+    const suffix = page.scopePath === '/docs' ? '' : page.scopePath.slice('/docs'.length);
+    if (suffix && page.routePath.endsWith(suffix)) {
+      return page.routePath.slice(0, -suffix.length) || '/docs';
+    }
+    return page.scopePath === '/docs' ? page.routePath : '/docs';
+  }
+</script>
+
+<article class="sd-doc" data-theme-component="article" data-site={context?.config.site.name}>
+  <span class="sd-doc-corner" data-corner="tl" aria-hidden="true"></span>
+  <span class="sd-doc-corner" data-corner="tr" aria-hidden="true"></span>
+  {#if showDocHeaderSlot}
+    <slot name="doc-header" {page} breadcrumbs={eyebrow} />
+  {:else}
+    <header class="sd-doc-header">
+      <nav class="sd-doc-eyebrow" aria-label={t('article.breadcrumb')}>
+        <span class="sd-doc-eyebrow-mark" aria-hidden="true"></span>
+        {#each eyebrow as item, i}
+          {#if i > 0}<span class="sd-doc-eyebrow-sep" aria-hidden="true">/</span>{/if}
+          <a href={item.path}>{item.label}</a>
+        {/each}
+      </nav>
+      <h1>{page.title}</h1>
+      {#if page.description}
+        <p class="sd-doc-lede">{page.description}</p>
+      {/if}
+    </header>
+  {/if}
+  <div class="sd-prose">
+    <svelte:boundary>
+      {#if content}
+        <svelte:component this={content} />
+      {:else}
+        {@html page.html}
+      {/if}
+      {#snippet failed(error, reset)}
+        <svelte:component
+          this={ErrorComponent} component={themeComponents.RenderError}
+          {error}
+          {reset}
+          {page}
+          {context}
+          variant="content"
+          label={t('render.article.label')}
+          title={t('render.article.title')}
+          message={t('render.article.message')}
+        />
+      {/snippet}
+    </svelte:boundary>
+  </div>
+  <footer class="sd-doc-footer">
+    <div class="sd-doc-meta">
+      {#if page.lastUpdated}
+        <span>{t('article.updated', { date: new Date(page.lastUpdated).toLocaleDateString(context?.languageTag) })}</span>
+      {/if}
+      {#if page.editUrl}
+        <a href={page.editUrl}>{t('article.edit')}</a>
+      {/if}
+    </div>
+    {#if page.prev}
+      <a class="sd-prev-next" data-direction="prev" href={page.prev.path}>
+        <span><i aria-hidden="true"></i>{t('article.previous')}</span>
+        <strong>{page.prev.title}</strong>
+        <em class="sd-prev-next-arrow" aria-hidden="true">←</em>
+      </a>
+    {/if}
+    {#if page.next}
+      <a class="sd-prev-next" data-direction="next" href={page.next.path}>
+        <span>{t('article.next')}<i aria-hidden="true"></i></span>
+        <strong>{page.next.title}</strong>
+        <em class="sd-prev-next-arrow" aria-hidden="true">→</em>
+      </a>
+    {/if}
+  </footer>
+</article>

package/dist/theme/Article.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Component } from 'svelte';
+import type { SvedocsPage } from '../core/types.js';
+import type { SvedocsThemeComponentMap, SvedocsThemeContext } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Article: $$__sveltets_2_IsomorphicComponent<{
+    page: SvedocsPage;
+    content?: Component | undefined;
+    context?: SvedocsThemeContext | undefined;
+    hasDocHeaderSlot?: boolean | undefined;
+    themeComponents?: Partial<SvedocsThemeComponentMap>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'doc-header': {
+        page: SvedocsPage;
+        breadcrumbs: {
+            label: string;
+            path: string;
+        }[];
+    };
+}, {}, string>;
+type Article = InstanceType<typeof Article>;
+export default Article;
+//# sourceMappingURL=Article.svelte.d.ts.map

package/dist/theme/Article.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Article.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/Article.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AA2IhF,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,OAAO;UAfwI,WAAW;cAAY,SAAS,GAAG,SAAS;cAAY,mBAAmB,GAAG,SAAS;uBAAqB,OAAO,GAAG,SAAS;sBAAoB,OAAO,CAAC,wBAAwB,CAAC;;;;;;;;;;;cAevO,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/theme/AskAiPanel.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+  import { onDestroy, onMount, tick } from 'svelte';
+  import type { SvedocsResolvedConfig, SvedocsSearchRecord } from '../core/types.js';
+  import type { SearchScope } from '../search/types.js';
+  import { createAskAiController, fallbackTranslate } from './headless.js';
+  import { portal } from './portal.js';
+  import type { SvedocsAskAiController, SvedocsAskAiMessage, SvedocsThemeContext } from './types.js';
+
+  export let config: SvedocsResolvedConfig;
+  export let records: SvedocsSearchRecord[] = [];
+  export let loadRecords: (() => Promise<SvedocsSearchRecord[]>) | undefined = undefined;
+  export let scope: SearchScope = {};
+  export let buildMode: SvedocsResolvedConfig['build']['mode'] = 'edge';
+  export let endpoint = '/api/ask';
+  export let controller: SvedocsAskAiController | undefined = undefined;
+  export let context: SvedocsThemeContext | undefined = undefined;
+
+  const internalController = createAskAiController({ config, records, loadRecords, scope, buildMode, endpoint });
+  let activeController: SvedocsAskAiController = internalController;
+  let open = false;
+  let input = '';
+  let messages: SvedocsAskAiMessage[] = [];
+  let loading = false;
+  let panel: HTMLDivElement | undefined;
+  let textarea: HTMLTextAreaElement | undefined;
+  let scrollEl: HTMLDivElement | undefined;
+  let previousFocus: HTMLElement | undefined;
+  let boundController: SvedocsAskAiController | undefined;
+  let unsubscribeController: (() => void) | undefined;
+
+  $: t = context?.t ?? fallbackTranslate;
+  $: activeController = controller ?? internalController;
+  $: activeController.setOptions({ config, records, loadRecords, scope, buildMode, endpoint, welcomeMessage: t('ask.welcome'), t });
+  $: enabled = config.ai.enabled;
+  $: label = t('ask.label');
+  $: placeholder = t('ask.placeholder');
+  $: suggestions = [
+    t('ask.suggestion.1'),
+    t('ask.suggestion.2'),
+    t('ask.suggestion.3')
+  ].filter(Boolean);
+  $: showSuggestions = suggestions.length > 0
+    && !loading
+    && messages.filter((message) => !message.welcome).length === 0;
+  $: bindController(activeController);
+
+  function show() {
+    if (!enabled) return;
+    previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+    activeController.show();
+    tick().then(() => {
+      textarea?.focus();
+      scrollToBottom();
+    });
+  }
+
+  function hide() {
+    activeController.hide();
+    tick().then(() => previousFocus?.focus());
+  }
+
+  function reset() {
+    activeController.reset();
+    tick().then(scrollToBottom);
+  }
+
+  function scrollToBottom() {
+    if (!scrollEl) return;
+    scrollEl.scrollTop = scrollEl.scrollHeight;
+  }
+
+  async function send(text = input) {
+    await activeController.send(text);
+    await tick();
+    scrollToBottom();
+  }
+
+  function handleInput(event: Event) {
+    activeController.setInput((event.currentTarget as HTMLTextAreaElement).value);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      hide();
+    }
+    if (event.key === 'Tab') trapFocus(event, panel);
+  }
+
+  function handleComposerKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void send(input);
+    }
+  }
+
+  function bindController(nextController: SvedocsAskAiController): void {
+    if (boundController === nextController) return;
+    unsubscribeController?.();
+    boundController = nextController;
+    const unsubscribers = [
+      nextController.open.subscribe((value) => (open = value)),
+      nextController.input.subscribe((value) => (input = value)),
+      nextController.loading.subscribe((value) => (loading = value)),
+      nextController.messages.subscribe((value) => {
+        messages = value;
+        if (open) tick().then(scrollToBottom);
+      })
+    ];
+    unsubscribeController = () => {
+      for (const unsubscribe of unsubscribers) unsubscribe();
+    };
+  }
+
+  function trapFocus(event: KeyboardEvent, root: HTMLElement | undefined) {
+    if (!root) return;
+    const focusable = Array.from(
+      root.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')
+    ).filter((element) => !element.hasAttribute('disabled') && element.offsetParent !== null);
+    const first = focusable[0];
+    const last = focusable.at(-1);
+    if (!first || !last) return;
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('svedocs:open-ai', show);
+    return () => window.removeEventListener('svedocs:open-ai', show);
+  });
+
+  onDestroy(() => {
+    unsubscribeController?.();
+  });
+</script>
+
+{#if open}
+  <div class="sd-chat-portal" use:portal>
+    <div
+      bind:this={panel}
+      class="sd-chat-panel"
+      role="dialog"
+      aria-modal="true"
+      aria-label={label}
+      tabindex="-1"
+      on:keydown={handleKeydown}
+      data-theme-component="ask-ai"
+    >
+      <header class="sd-chat-header">
+        <div class="sd-chat-title">
+          <span class="sd-chat-mark" aria-hidden="true"></span>
+          <strong>{label}</strong>
+        </div>
+        <div class="sd-chat-actions">
+          {#if messages.filter((message) => !message.welcome).length > 0}
+            <button type="button" class="sd-chat-icon-button" aria-label={t('ask.newChat')} title={t('ask.newChat')} on:click={reset}>
+              <svg aria-hidden="true" viewBox="0 0 24 24">
+                <path d="M4 12h8m4 0h4M12 4v8m0 4v4" />
+              </svg>
+            </button>
+          {/if}
+          <button type="button" class="sd-chat-icon-button" aria-label={t('ask.close')} title={t('ask.close')} on:click={hide}>
+            <svg aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </button>
+        </div>
+      </header>
+
+      <div bind:this={scrollEl} class="sd-chat-messages" role="log" aria-live="polite">
+        {#if messages.length === 0}
+          <div class="sd-chat-empty">
+            <p>{t('ask.empty')}</p>
+          </div>
+        {/if}
+        {#each messages as message (message.id)}
+          <div class="sd-chat-bubble" data-role={message.role}>
+            {#if message.content || (message.role === 'assistant' && loading && message.id === messages[messages.length - 1]?.id)}
+              <div class="sd-chat-bubble-body">
+                {#if !message.content}
+                  <span class="sd-chat-typing" aria-label={t('ask.thinking')}>
+                    <span></span><span></span><span></span>
+                  </span>
+                {:else}
+                  {message.content}
+                {/if}
+              </div>
+            {/if}
+            {#if message.citations && message.citations.length > 0}
+              <div class="sd-chat-citations">
+                {#each message.citations as citation}
+                  <a href={citation.url} on:click={hide}>
+                    {citation.section ?? citation.title}
+                  </a>
+                {/each}
+              </div>
+            {/if}
+            {#if message.error}
+              <p class="sd-chat-error">{message.error}</p>
+            {/if}
+          </div>
+        {/each}
+      </div>
+
+      {#if showSuggestions}
+        <div class="sd-chat-suggestions">
+          {#each suggestions as suggestion}
+            <button type="button" on:click={() => send(suggestion)}>{suggestion}</button>
+          {/each}
+        </div>
+      {/if}
+
+      <form class="sd-chat-composer" on:submit|preventDefault={() => send(input)}>
+        <textarea
+          bind:this={textarea}
+          value={input}
+          rows="1"
+          placeholder={placeholder}
+          on:input={handleInput}
+          on:keydown={handleComposerKeydown}
+        ></textarea>
+        <button
+          class="sd-chat-send"
+          type="submit"
+          aria-label={t('ask.send')}
+          title={t('ask.send')}
+          disabled={!input.trim() || loading}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24">
+            <path d="M4 12l16-8-6 16-2-7-8-1Z" />
+          </svg>
+        </button>
+      </form>
+    </div>
+  </div>
+{/if}