svedocs 0.1.0-beta.2

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

@@ -0,0 +1,22 @@
+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 CodeBlock: $$__sveltets_2_IsomorphicComponent<{
+    code?: string;
+    language?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CodeBlock = InstanceType<typeof CodeBlock>;
+export default CodeBlock;
+//# sourceMappingURL=CodeBlock.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/CodeBlock.svelte.ts"],"names":[],"mappings":"AAYA,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;AAKD,QAAA,MAAM,SAAS;;;;;kBAA+E,CAAC;AAC7E,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/theme/DocPage.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Component } from 'svelte';
+  import type { SvedocsPage } from '../core/types.js';
+
+  export let page: SvedocsPage;
+  export let content: Component | undefined = undefined;
+  export let hasDocHeaderSlot: boolean | undefined = undefined;
+  $: breadcrumbs = createBreadcrumbs(page);
+  $: kind = page.kind === 'doc' ? 'Documentation' : 'Page';
+  $: eyebrow = breadcrumbs.length > 0 ? breadcrumbs : [{ label: kind, path: page.kind === 'doc' ? '/docs' : '/' }];
+  $: showDocHeaderSlot = hasDocHeaderSlot ?? Boolean($$slots['doc-header']);
+
+  const copyIconSvg = '<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5h9v14H9zM6 8v12h10"/></svg>';
+  const checkIconSvg = '<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg>';
+
+  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 copyToClipboard(button, source);
+    }
+    root.addEventListener('click', handleClick);
+    return () => root.removeEventListener('click', handleClick);
+  });
+
+  async function copyToClipboard(button: HTMLButtonElement, source: string) {
+    try {
+      await navigator.clipboard.writeText(source.trim());
+      button.dataset.state = 'copied';
+      button.innerHTML = checkIconSvg;
+      button.setAttribute('aria-label', 'Copied');
+      window.setTimeout(() => {
+        button.dataset.state = 'idle';
+        button.innerHTML = copyIconSvg;
+        button.setAttribute('aria-label', 'Copy code');
+      }, 1600);
+    } catch {
+      button.dataset.state = 'error';
+    }
+  }
+
+  function createBreadcrumbs(page: SvedocsPage) {
+    const segments = page.routePath.split('/').filter(Boolean);
+    const parentSegments = segments.slice(0, -1);
+    return parentSegments.map((segment, index) => {
+      const path = `/${segments.slice(0, index + 1).join('/')}`;
+      return { label: titleFromSegment(segment), path };
+    });
+  }
+
+  function titleFromSegment(segment: string): string {
+    return segment
+      .replace(/[-_]+/g, ' ')
+      .replace(/\b\w/g, (letter) => letter.toUpperCase());
+  }
+</script>
+
+<article class="sd-doc">
+  <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="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">
+    {#if content}
+      <svelte:component this={content} />
+    {:else}
+      {@html page.html}
+    {/if}
+  </div>
+  <footer class="sd-doc-footer">
+    <div class="sd-doc-meta">
+      {#if page.lastUpdated}
+        <span>Updated {new Date(page.lastUpdated).toLocaleDateString()}</span>
+      {/if}
+      {#if page.editUrl}
+        <a href={page.editUrl}>Edit this page</a>
+      {/if}
+    </div>
+    {#if page.prev}
+      <a class="sd-prev-next" data-direction="prev" href={page.prev.path}>
+        <span><i aria-hidden="true"></i>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>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/DocPage.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Component } from 'svelte';
+import type { SvedocsPage } from '../core/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 DocPage: $$__sveltets_2_IsomorphicComponent<{
+    page: SvedocsPage;
+    content?: Component | undefined;
+    hasDocHeaderSlot?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'doc-header': {
+        page: SvedocsPage;
+        breadcrumbs: {
+            label: string;
+            path: string;
+        }[];
+    };
+}, {}, string>;
+type DocPage = InstanceType<typeof DocPage>;
+export default DocPage;
+//# sourceMappingURL=DocPage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocPage.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/DocPage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AA8HpD,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;UAfkF,WAAW;cAAY,SAAS,GAAG,SAAS;uBAAqB,OAAO,GAAG,SAAS;;;;;;;;;;;cAejF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/theme/DocsApp.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/types.js';
+    import DocsLayout from './DocsLayout.svelte';
+    import HomePage from './HomePage.svelte';
+    import PageLayout from './PageLayout.svelte';
+
+  export let page: SvedocsPage;
+  export let pages: SvedocsPage[] = [];
+  export let tree: SvedocsTreeItem[] = [];
+  export let search: SvedocsSearchRecord[] = [];
+  export let config: SvedocsResolvedConfig;
+  export let components: Record<string, Component> = {};
+  export let layouts: Record<string, Component> = {};
+  export let loadSearch: (() => Promise<SvedocsSearchRecord[]>) | undefined = undefined;
+
+  $: layoutName = typeof page.frontmatter.layout === 'string' ? page.frontmatter.layout : '';
+  $: customLayout = layoutName && layoutName !== 'home' && layoutName !== 'docs' ? layouts[layoutName] : undefined;
+  $: hasBackgroundSlot = Boolean($$slots.background);
+  $: hasLandingSlot = Boolean($$slots.landing);
+  $: hasHomeHeroVisualSlot = Boolean($$slots['home-hero-visual']);
+  $: hasHomeFeaturesSlot = Boolean($$slots['home-features']);
+  $: hasDocHeaderSlot = Boolean($$slots['doc-header']);
+</script>
+
+{#if customLayout}
+  <svelte:component
+    this={customLayout}
+    {page}
+    {pages}
+    {tree}
+    {search}
+    {config}
+    {loadSearch}
+    content={components[page.id]}
+  />
+  {:else if page.routePath === '/' || page.frontmatter.layout === 'home'}
+    <HomePage
+      {page}
+      {pages}
+      {search}
+      {config}
+      {loadSearch}
+      content={components[page.id]}
+      {hasBackgroundSlot}
+      {hasLandingSlot}
+      {hasHomeHeroVisualSlot}
+      {hasHomeFeaturesSlot}
+    >
+      <svelte:fragment slot="background">
+        <slot name="background" />
+      </svelte:fragment>
+      <svelte:fragment slot="landing" let:page let:pages let:search let:config let:content>
+        <slot name="landing" {page} {pages} {search} {config} {content} />
+      </svelte:fragment>
+      <svelte:fragment slot="home-hero-visual" let:page let:pages let:config>
+        <slot name="home-hero-visual" {page} {pages} {config} />
+      </svelte:fragment>
+      <svelte:fragment slot="home-features" let:page let:pages let:config let:cards>
+        <slot name="home-features" {page} {pages} {config} {cards} />
+      </svelte:fragment>
+    </HomePage>
+  {:else if page.kind === 'page' || page.frontmatter.layout === 'page'}
+    <PageLayout {page} {pages} {search} {config} {loadSearch} content={components[page.id]} {hasBackgroundSlot}>
+      <svelte:fragment slot="background">
+        <slot name="background" />
+      </svelte:fragment>
+    </PageLayout>
+  {:else}
+    <DocsLayout {page} {pages} {tree} {search} {config} {loadSearch} content={components[page.id]} {hasBackgroundSlot} {hasDocHeaderSlot}>
+      <svelte:fragment slot="background">
+        <slot name="background" />
+      </svelte:fragment>
+      <svelte:fragment slot="doc-header" let:page let:breadcrumbs>
+        <slot name="doc-header" {page} {breadcrumbs} />
+      </svelte:fragment>
+    </DocsLayout>
+  {/if}

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

@@ -0,0 +1,63 @@
+import type { Component } from 'svelte';
+import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/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 DocsApp: $$__sveltets_2_IsomorphicComponent<{
+    page: SvedocsPage;
+    pages?: SvedocsPage[];
+    tree?: SvedocsTreeItem[];
+    search?: SvedocsSearchRecord[];
+    config: SvedocsResolvedConfig;
+    components?: Record<string, Component>;
+    layouts?: Record<string, Component>;
+    loadSearch?: (() => Promise<SvedocsSearchRecord[]>) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    background: {};
+    landing: {
+        page: SvedocsPage;
+        pages: SvedocsPage[];
+        search: SvedocsSearchRecord[];
+        config: SvedocsResolvedConfig;
+        content: Component<{}, {}, string> | undefined;
+    };
+    'home-hero-visual': {
+        page: SvedocsPage;
+        pages: SvedocsPage[];
+        config: SvedocsResolvedConfig;
+    };
+    'home-features': {
+        page: SvedocsPage;
+        pages: SvedocsPage[];
+        config: SvedocsResolvedConfig;
+        cards: {
+            label: string;
+            title: string;
+            description: string;
+            href: string;
+            glyph: string;
+        }[];
+    };
+    'doc-header': {
+        page: SvedocsPage;
+        breadcrumbs: {
+            label: string;
+            path: string;
+        }[];
+    };
+}, {}, string>;
+type DocsApp = InstanceType<typeof DocsApp>;
+export default DocsApp;
+//# sourceMappingURL=DocsApp.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsApp.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/DocsApp.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAkEjH,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;UAf6J,WAAW;YAAU,WAAW,EAAE;WAAS,eAAe,EAAE;aAAW,mBAAmB,EAAE;YAAU,qBAAqB;iBAAe,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;cAAY,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;iBAAe,CAAC,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAejV,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/theme/DocsLayout.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import type { Component } from 'svelte';
+  import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/types.js';
+  import { createPageTree as createCorePageTree } from '../core/navigation.js';
+  import DocPage from './DocPage.svelte';
+  import RootLayout from './RootLayout.svelte';
+  import SidebarTree from './SidebarTree.svelte';
+
+  export let page: SvedocsPage;
+  export let pages: SvedocsPage[] = [];
+  export let tree: SvedocsTreeItem[] = [];
+  export let search: SvedocsSearchRecord[] = [];
+  export let config: SvedocsResolvedConfig;
+  export let loadSearch: (() => Promise<SvedocsSearchRecord[]>) | undefined = undefined;
+  export let content: Component | undefined = undefined;
+  export let hasBackgroundSlot: boolean | undefined = undefined;
+  export let hasDocHeaderSlot: boolean | undefined = undefined;
+
+  let activeHeading = page.headings[0]?.id ?? '';
+  let tocEl: HTMLElement | null = null;
+  let indicatorTop = 0;
+  let indicatorHeight = 0;
+  let indicatorReady = false;
+  let headingFrame: number | undefined;
+  let stopHeadingTracking: (() => void) | undefined;
+  let headingTrackingVersion = 0;
+  let mounted = false;
+  $: scopedTree = createCorePageTree(filterPagesForCurrentScope(pages, page));
+  $: navigationTree = scopedTree.length ? scopedTree : tree;
+  $: showBackgroundSlot = hasBackgroundSlot ?? Boolean($$slots.background);
+  $: showDocHeaderSlot = hasDocHeaderSlot ?? Boolean($$slots['doc-header']);
+
+  onMount(() => {
+    mounted = true;
+    return () => {
+      headingTrackingVersion += 1;
+      stopHeadingTracking?.();
+      cancelHeadingFrame();
+    };
+  });
+
+  $: if (mounted) void attachHeadingTracker(page);
+
+  async function attachHeadingTracker(currentPage: SvedocsPage) {
+    const version = headingTrackingVersion + 1;
+    headingTrackingVersion = version;
+    stopHeadingTracking?.();
+    stopHeadingTracking = undefined;
+    cancelHeadingFrame();
+    indicatorReady = false;
+    activeHeading = currentPage.headings[0]?.id ?? '';
+    await tick();
+    if (version !== headingTrackingVersion) return;
+    const headings = currentPage.headings
+      .map((heading) => document.getElementById(heading.id))
+      .filter((element): element is HTMLElement => Boolean(element));
+    if (headings.length === 0) return;
+    const syncActiveHeading = () => {
+      headingFrame = undefined;
+      const nextHeading = getActiveHeading(headings);
+      if (nextHeading) activeHeading = nextHeading.id;
+    };
+    const scheduleActiveHeadingSync = () => {
+      if (headingFrame !== undefined) return;
+      headingFrame = requestAnimationFrame(syncActiveHeading);
+    };
+    window.addEventListener('scroll', scheduleActiveHeadingSync, { passive: true });
+    window.addEventListener('resize', scheduleActiveHeadingSync);
+    stopHeadingTracking = () => {
+      window.removeEventListener('scroll', scheduleActiveHeadingSync);
+      window.removeEventListener('resize', scheduleActiveHeadingSync);
+    };
+    scheduleActiveHeadingSync();
+  }
+
+  $: if (typeof document !== 'undefined' && tocEl && activeHeading) {
+    void updateIndicator(activeHeading);
+  }
+
+  async function updateIndicator(id: string) {
+    await tick();
+    if (!tocEl) return;
+    const link = tocEl.querySelector<HTMLElement>(`a.sd-toc-link[href="#${cssEscape(id)}"]`);
+    if (!link) return;
+    const markerHeight = Math.min(24, Math.max(16, link.offsetHeight - 12));
+    indicatorTop = link.offsetTop + (link.offsetHeight - markerHeight) / 2;
+    indicatorHeight = markerHeight;
+    indicatorReady = true;
+  }
+
+  function handleTocClick(event: MouseEvent, id: string) {
+    activeHeading = id;
+  }
+
+  function cssEscape(value: string): string {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(value);
+    return value.replace(/([^a-zA-Z0-9_-])/g, '\\$1');
+  }
+
+  function cancelHeadingFrame() {
+    if (headingFrame === undefined) return;
+    cancelAnimationFrame(headingFrame);
+    headingFrame = undefined;
+  }
+
+  function getActiveHeading(headings: HTMLElement[]): HTMLElement | undefined {
+    const viewportTop = 80;
+    const viewportBottom = window.innerHeight || document.documentElement.clientHeight;
+    const snapshots = headings.map((heading) => ({
+      element: heading,
+      top: heading.getBoundingClientRect().top
+    }));
+    const visible = snapshots.filter((heading) => heading.top >= viewportTop && heading.top <= viewportBottom);
+    if (visible.length > 0) {
+      return visible.reduce((lowest, heading) => heading.top > lowest.top ? heading : lowest).element;
+    }
+    return snapshots.filter((heading) => heading.top < viewportTop).at(-1)?.element ?? snapshots[0]?.element;
+  }
+
+  function filterPagesForCurrentScope(pages: SvedocsPage[], current: SvedocsPage): SvedocsPage[] {
+    return pages.filter((candidate) => candidate.kind === 'doc'
+      && candidate.locale === current.locale);
+  }
+
+</script>
+
+<RootLayout {config} {page} {pages} {search} {loadSearch} mobileTree={navigationTree} mobileCurrentPath={page.routePath} hasBackgroundSlot={showBackgroundSlot}>
+  <svelte:fragment slot="background">
+    <slot name="background" />
+  </svelte:fragment>
+  <div class="sd-doc-shell">
+    <aside class="sd-sidebar" aria-label="Documentation">
+      <nav>
+        <SidebarTree items={navigationTree} currentPath={page.routePath} />
+      </nav>
+    </aside>
+    <main id="content" class="sd-content">
+      <DocPage {page} {content} hasDocHeaderSlot={showDocHeaderSlot}>
+        <svelte:fragment slot="doc-header" let:page let:breadcrumbs>
+          <slot name="doc-header" {page} {breadcrumbs} />
+        </svelte:fragment>
+      </DocPage>
+    </main>
+    <aside
+      bind:this={tocEl}
+      class="sd-toc"
+      class:sd-toc-ready={indicatorReady}
+      aria-label="On this page"
+      style={`--toc-indicator-top:${indicatorTop}px;--toc-indicator-height:${indicatorHeight}px;`}
+    >
+      {#if page.headings.length > 0}
+        <div class="sd-toc-title">On this page</div>
+        {#each page.headings as heading}
+          <a
+            class:sd-active={heading.id === activeHeading}
+            class="sd-toc-link sd-depth-{heading.depth}"
+            href={'#' + heading.id}
+            on:click={(event) => handleTocClick(event, heading.id)}
+          >
+            {heading.text}
+          </a>
+        {/each}
+      {/if}
+    </aside>
+  </div>
+</RootLayout>

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

@@ -0,0 +1,40 @@
+import type { Component } from 'svelte';
+import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/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 DocsLayout: $$__sveltets_2_IsomorphicComponent<{
+    page: SvedocsPage;
+    pages?: SvedocsPage[];
+    tree?: SvedocsTreeItem[];
+    search?: SvedocsSearchRecord[];
+    config: SvedocsResolvedConfig;
+    loadSearch?: (() => Promise<SvedocsSearchRecord[]>) | undefined;
+    content?: Component | undefined;
+    hasBackgroundSlot?: boolean | undefined;
+    hasDocHeaderSlot?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    background: {};
+    'doc-header': {
+        page: SvedocsPage;
+        breadcrumbs: {
+            label: string;
+            path: string;
+        }[];
+    };
+}, {}, string>;
+type DocsLayout = InstanceType<typeof DocsLayout>;
+export default DocsLayout;
+//# sourceMappingURL=DocsLayout.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/DocsLayout.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAqKjH,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,UAAU;UAf6M,WAAW;YAAU,WAAW,EAAE;WAAS,eAAe,EAAE;aAAW,mBAAmB,EAAE;YAAU,qBAAqB;iBAAe,CAAC,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,SAAS;cAAY,SAAS,GAAG,SAAS;wBAAsB,OAAO,GAAG,SAAS;uBAAqB,OAAO,GAAG,SAAS;;;;;;;;;;;;cAeta,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/theme/FloatingToolbar.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { SvedocsResolvedConfig } from '../core/types.js';
+
+  export let config: SvedocsResolvedConfig;
+
+  let scrolled = false;
+
+  $: aiEnabled = config.ai.enabled;
+  $: showBackToTop = scrolled;
+  $: visible = aiEnabled || showBackToTop;
+  $: mode = aiEnabled ? 'pill' : 'solo';
+  $: aiCollapsed = aiEnabled && showBackToTop;
+
+  function openAskAi() {
+    window.dispatchEvent(new CustomEvent('svedocs:open-ai'));
+  }
+
+  function backToTop() {
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    window.scrollTo({ top: 0, behavior: reduceMotion ? 'auto' : 'smooth' });
+  }
+
+  onMount(() => {
+    function updateScrolled() {
+      scrolled = window.scrollY > 240;
+    }
+
+    updateScrolled();
+    window.addEventListener('scroll', updateScrolled, { passive: true });
+    return () => window.removeEventListener('scroll', updateScrolled);
+  });
+</script>
+
+{#if visible}
+  <div
+    class="sd-floating-toolbar"
+    role="toolbar"
+    aria-label="Page tools"
+    data-mode={mode}
+    data-scrolled={scrolled}
+  >
+    {#if aiEnabled}
+      <button
+        class="sd-floating-tool sd-floating-tool-ai"
+        type="button"
+        aria-label={config.ai.label}
+        title={config.ai.label}
+        data-collapsed={aiCollapsed}
+        on:click={openAskAi}
+      >
+        <svg class="sd-floating-tool-glyph" aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M5 5h14v10H9l-4 4V5Z" />
+          <path d="M8 9h8M8 12h5" />
+        </svg>
+        <span class="sd-floating-tool-label">{config.ai.label}</span>
+      </button>
+    {/if}
+    {#if showBackToTop}
+      <button
+        class="sd-floating-tool sd-floating-tool-icon sd-floating-tool-back"
+        type="button"
+        aria-label="Back to top"
+        title="Back to top"
+        on:click={backToTop}
+      >
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M12 5l-7 7m7-7 7 7M12 6v13" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,22 @@
+import type { SvedocsResolvedConfig } from '../core/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 FloatingToolbar: $$__sveltets_2_IsomorphicComponent<{
+    config: SvedocsResolvedConfig;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FloatingToolbar = InstanceType<typeof FloatingToolbar>;
+export default FloatingToolbar;
+//# sourceMappingURL=FloatingToolbar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/FloatingToolbar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AA2D9D,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;AAKD,QAAA,MAAM,eAAe;YAVwB,qBAAqB;;;kBAUkC,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}