svedocs 0.1.0-beta.10

package/dist/theme/SearchDialog.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onDestroy, onMount, tick } from 'svelte';
+  import type { SvedocsSearchRecord } from '../core/types.js';
+  import type { SearchResult, SearchScope } from '../search/types.js';
+  import { createSearchController, fallbackTranslate } from './headless.js';
+  import { lockDocumentScroll, portal } from './portal.js';
+  import type { SvedocsSearchController, SvedocsThemeContext } from './types.js';
+
+  export let records: SvedocsSearchRecord[] = [];
+  export let loadRecords: (() => Promise<SvedocsSearchRecord[]>) | undefined = undefined;
+  export let scope: SearchScope = {};
+  export let provider = 'local';
+  export let endpoint = '/api/search';
+  export let buildMode = 'edge';
+  export let controller: SvedocsSearchController | undefined = undefined;
+  export let context: SvedocsThemeContext | undefined = undefined;
+
+  const internalController = createSearchController({ records, loadRecords, scope, provider, endpoint, buildMode });
+  let activeController: SvedocsSearchController = internalController;
+  let open = false;
+  let query = '';
+  let activeIndex = 0;
+  let results: SearchResult[] = [];
+  let remoteStatus: 'idle' | 'loading' | 'ready' | 'error' = 'idle';
+  let remoteError = '';
+  let recordsStatus: 'idle' | 'loading' | 'ready' | 'error' = records.length > 0 ? 'ready' : 'idle';
+  let trigger: HTMLButtonElement | undefined;
+  let input: HTMLInputElement | undefined;
+  let dialog: HTMLDivElement | undefined;
+  let previousFocus: HTMLElement | undefined;
+  let boundController: SvedocsSearchController | undefined;
+  let unsubscribeController: (() => void) | undefined;
+  let releaseScrollLock: (() => void) | undefined;
+
+  $: t = context?.t ?? fallbackTranslate;
+  $: activeController = controller ?? internalController;
+  $: activeController.setOptions({ records, loadRecords, scope, provider, endpoint, buildMode, t });
+  $: bindController(activeController);
+
+  function show() {
+    previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+    activeController.show();
+    tick().then(() => input?.focus());
+  }
+
+  function hide() {
+    activeController.hide();
+    tick().then(() => (previousFocus ?? trigger)?.focus());
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      show();
+    }
+    if (event.key === 'Escape' && open) hide();
+  }
+
+  function handleDialogKeydown(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      trapFocus(event, dialog);
+    }
+    if (event.key === 'Escape') {
+      hide();
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      activeController.moveActive(1);
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      activeController.moveActive(-1);
+    }
+    if (event.key === 'Enter') {
+      const result = activeController.select();
+      if (result) void goto(result.url, { keepFocus: false });
+    }
+  }
+
+  function handleInput(event: Event) {
+    activeController.setQuery((event.currentTarget as HTMLInputElement).value);
+  }
+
+  function bindController(nextController: SvedocsSearchController): void {
+    if (boundController === nextController) return;
+    unsubscribeController?.();
+    boundController = nextController;
+    const unsubscribers = [
+      nextController.open.subscribe((value) => {
+        open = value;
+        if (value && !releaseScrollLock) releaseScrollLock = lockDocumentScroll();
+        if (!value && releaseScrollLock) {
+          releaseScrollLock();
+          releaseScrollLock = undefined;
+        }
+      }),
+      nextController.query.subscribe((value) => (query = value)),
+      nextController.activeIndex.subscribe((value) => (activeIndex = value)),
+      nextController.results.subscribe((value) => (results = value)),
+      nextController.remoteStatus.subscribe((value) => (remoteStatus = value)),
+      nextController.remoteError.subscribe((value) => (remoteError = value)),
+      nextController.recordsStatus.subscribe((value) => (recordsStatus = value))
+    ];
+    unsubscribeController = () => {
+      for (const unsubscribe of unsubscribers) unsubscribe();
+    };
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('svedocs:open-search', show);
+    return () => {
+      window.removeEventListener('keydown', handleKeydown);
+      window.removeEventListener('svedocs:open-search', show);
+    };
+  });
+
+  onDestroy(() => {
+    unsubscribeController?.();
+    releaseScrollLock?.();
+  });
+
+  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();
+    }
+  }
+</script>
+
+<button bind:this={trigger} class="sd-search-trigger" type="button" aria-label={t('search.dialog')} aria-haspopup="dialog" aria-expanded={open} on:click={show} data-theme-component="search-trigger">
+  <span>{t('search.trigger')}</span>
+  <kbd>⌘K</kbd>
+</button>
+
+{#if open}
+  <div class="sd-dialog-portal" use:portal>
+  <div class="sd-dialog-backdrop" role="presentation" on:click={hide}></div>
+  <div
+    bind:this={dialog}
+    class="sd-search-dialog"
+    role="dialog"
+    aria-modal="true"
+    aria-label={t('search.dialog')}
+    tabindex="-1"
+    on:keydown={handleDialogKeydown}
+    data-theme-component="search"
+  >
+    <label class="sd-search-box">
+      <span class="sd-visually-hidden">{t('search.query')}</span>
+      <input value={query} placeholder={t('search.placeholder')} on:input={handleInput} bind:this={input} />
+    </label>
+    <div class="sd-search-results" role="listbox" aria-label={t('search.results')}>
+      {#if remoteStatus === 'loading'}
+        <p class="sd-empty-state">{t('search.loading')}</p>
+      {/if}
+      {#if recordsStatus === 'loading' && !(buildMode === 'edge' && provider !== 'local' && provider !== 'local-json')}
+        <p class="sd-empty-state">{t('search.loadingIndex')}</p>
+      {/if}
+      {#if recordsStatus === 'error' && !(buildMode === 'edge' && provider !== 'local' && provider !== 'local-json')}
+        <p class="sd-empty-state">{t('search.indexError')}</p>
+      {/if}
+      {#if remoteError}
+        <p class="sd-empty-state">{t('search.remoteFallback', { error: remoteError })}</p>
+      {/if}
+      {#if results.length > 0}
+        {#each results as result, index}
+          <a
+            class:sd-active={index === activeIndex}
+            href={result.url}
+            role="option"
+            aria-selected={index === activeIndex}
+            on:mouseenter={() => activeController.activate(index)}
+            on:click={hide}
+          >
+            <span>{result.section ?? result.title}</span>
+            {#if result.section}
+              <small>{result.title}</small>
+            {/if}
+            <p>{result.excerpt}</p>
+          </a>
+        {/each}
+      {:else if remoteStatus !== 'loading' && recordsStatus !== 'loading'}
+        <p class="sd-empty-state">{t('search.empty')}</p>
+      {/if}
+    </div>
+  </div>
+  </div>
+{/if}

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

@@ -0,0 +1,31 @@
+import type { SvedocsSearchRecord } from '../core/types.js';
+import type { SearchScope } from '../search/types.js';
+import type { SvedocsSearchController, 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 SearchDialog: $$__sveltets_2_IsomorphicComponent<{
+    records?: SvedocsSearchRecord[];
+    loadRecords?: (() => Promise<SvedocsSearchRecord[]>) | undefined;
+    scope?: SearchScope;
+    provider?: string;
+    endpoint?: string;
+    buildMode?: string;
+    controller?: SvedocsSearchController | undefined;
+    context?: SvedocsThemeContext | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SearchDialog = InstanceType<typeof SearchDialog>;
+export default SearchDialog;
+//# sourceMappingURL=SearchDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/SearchDialog.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGpE,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AA6L/E,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,YAAY;cAVsL,mBAAmB,EAAE;kBAAgB,CAAC,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,SAAS;YAAU,WAAW;;;;iBAAqG,uBAAuB,GAAG,SAAS;cAAY,mBAAmB,GAAG,SAAS;;;kBAUtY,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/theme/Select.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+  import { classNames, type SvedocsControlDensity } from './forms.js';
+
+  interface $$Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+    class?: string;
+    density?: SvedocsControlDensity;
+    invalid?: boolean;
+    value?: HTMLSelectAttributes['value'];
+  }
+
+  export let value: HTMLSelectAttributes['value'] = '';
+  export let invalid = false;
+  export let density: SvedocsControlDensity = 'md';
+
+  let className = '';
+
+  export { className as class };
+</script>
+
+<span class={classNames('sd-select', className)} data-density={density}>
+  <select
+    {...$$restProps}
+    class="sd-select-control"
+    aria-invalid={invalid ? 'true' : undefined}
+    bind:value
+    on:blur
+    on:change
+    on:focus
+    on:input
+    on:keydown
+    on:keyup
+  >
+    <slot />
+  </select>
+  <span class="sd-select-icon" aria-hidden="true"></span>
+</span>

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

@@ -0,0 +1,42 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import { type SvedocsControlDensity } from './forms.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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Omit<HTMLSelectAttributes, "value" | "class"> & {
+    class?: string;
+    density?: SvedocsControlDensity;
+    invalid?: boolean;
+    value?: HTMLSelectAttributes["value"];
+}, {
+    default: {};
+}>, {
+    blur: FocusEvent;
+    change: Event;
+    focus: FocusEvent;
+    input: InputEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Select = InstanceType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AA+BpE,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;YAtCA,MAAM;cACJ,qBAAqB;cACrB,OAAO;YACT,oBAAoB,CAAC,OAAO,CAAC;;;;;;;;;;;;;;cAmCwD,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/theme/SidebarTree.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { SvedocsTreeItem } from '../core/types.js';
+
+  export let items: SvedocsTreeItem[] = [];
+  export let currentPath = '';
+  export let depth = 0;
+
+  function isActive(item: SvedocsTreeItem): boolean {
+    return normalizeHref(item.path) === normalizeHref(currentPath);
+  }
+
+  function isActiveBranch(item: SvedocsTreeItem): boolean {
+    return isActive(item) || Boolean(item.children?.some((child) => isActiveBranch(child)));
+  }
+
+  function shouldOpen(item: SvedocsTreeItem): boolean {
+    if (isActiveBranch(item)) return true;
+    return item.collapsed !== true;
+  }
+
+  function handleSummaryLinkClick(event: MouseEvent, href: string | undefined) {
+    if (!href) return;
+    if (event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    void goto(href, { keepFocus: false });
+  }
+
+  function normalizeHref(href: string | undefined): string {
+    if (!href) return '';
+    const [path = ''] = href.split(/[?#]/);
+    const normalized = path === '/' ? '/' : path.replace(/\/+$/, '');
+    return normalized || '/';
+  }
+
+  $: sections = depth === 0 ? splitIntoSections(items) : null;
+
+  function splitIntoSections(items: SvedocsTreeItem[]): { heading?: SvedocsTreeItem; items: SvedocsTreeItem[] }[] {
+    const hasSections = items.some((item) => item.section === true);
+    if (!hasSections) return [{ items }];
+    const out: { heading?: SvedocsTreeItem; items: SvedocsTreeItem[] }[] = [];
+    let current: { heading?: SvedocsTreeItem; items: SvedocsTreeItem[] } = { items: [] };
+    for (const item of items) {
+      if (item.section === true) {
+        if (current.items.length > 0 || current.heading) out.push(current);
+        current = { heading: item, items: [] };
+      } else {
+        current.items.push(item);
+      }
+    }
+    if (current.items.length > 0 || current.heading) out.push(current);
+    return out;
+  }
+</script>
+
+{#if depth === 0 && sections}
+  <div class="sd-sidebar-root">
+    {#each sections as section, sectionIndex}
+      {#if section.heading}
+        {@const sectionActive = isActive(section.heading)}
+        <div class="sd-sidebar-section-heading" class:sd-first={sectionIndex === 0} class:sd-active={sectionActive || section.items.some((item) => isActiveBranch(item))}>
+          {#if section.heading.icon}
+            <span class="sd-sidebar-section-icon" aria-hidden="true">{section.heading.icon}</span>
+          {/if}
+          {#if section.heading.path}
+            <a class="sd-sidebar-section-link" class:sd-active={sectionActive} href={section.heading.path} aria-current={sectionActive ? 'page' : undefined}>{section.heading.title}</a>
+          {:else}
+            <span>{section.heading.title}</span>
+          {/if}
+        </div>
+      {/if}
+      <ul class="sd-sidebar-list" data-depth={depth}>
+        {#each section.items as item}
+          {@const hasChildren = Boolean(item.children?.length)}
+          {@const active = isActive(item)}
+          {@const branchActive = isActiveBranch(item)}
+          <li class="sd-sidebar-item" class:sd-has-children={hasChildren} class:sd-branch-active={branchActive}>
+            {#if hasChildren}
+              <details class="sd-sidebar-group" open={shouldOpen(item)}>
+                <summary class="sd-sidebar-summary" class:sd-active={active}>
+                  {#if item.icon}
+                    <span class="sd-sidebar-icon" aria-hidden="true">{item.icon}</span>
+                  {/if}
+                  <span class="sd-sidebar-summary-label">
+                    {#if item.path}
+                      <a class="sd-sidebar-summary-link" href={item.path} aria-current={active ? 'page' : undefined} on:click={(event) => handleSummaryLinkClick(event, item.path)}>{item.title}</a>
+                    {:else}
+                      <span>{item.title}</span>
+                    {/if}
+                  </span>
+                  <span class="sd-sidebar-chevron" aria-hidden="true">
+                    <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>
+                  </span>
+                </summary>
+                <div class="sd-sidebar-group-body">
+                  <svelte:self items={item.children} {currentPath} depth={depth + 1} />
+                </div>
+              </details>
+            {:else if item.path}
+              <a class="sd-sidebar-link" class:sd-active={active} href={item.path} aria-current={active ? 'page' : undefined}>
+                {#if item.icon}
+                  <span class="sd-sidebar-icon" aria-hidden="true">{item.icon}</span>
+                {/if}
+                <span>{item.title}</span>
+              </a>
+            {:else}
+              <span class="sd-sidebar-section-label">{item.title}</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/each}
+  </div>
+{:else}
+  <ul class="sd-sidebar-list" data-depth={depth}>
+    {#each items as item}
+      {@const hasChildren = Boolean(item.children?.length)}
+      {@const active = isActive(item)}
+      {@const branchActive = isActiveBranch(item)}
+      <li class="sd-sidebar-item" class:sd-has-children={hasChildren} class:sd-branch-active={branchActive}>
+        {#if hasChildren}
+          <details class="sd-sidebar-group" open={shouldOpen(item)}>
+            <summary class="sd-sidebar-summary" class:sd-active={active}>
+              <span class="sd-sidebar-chevron" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>
+              </span>
+              {#if item.path}
+                <a class="sd-sidebar-summary-link" href={item.path} aria-current={active ? 'page' : undefined} on:click={(event) => handleSummaryLinkClick(event, item.path)}>{item.title}</a>
+              {:else}
+                <span class="sd-sidebar-summary-text">{item.title}</span>
+              {/if}
+            </summary>
+            <div class="sd-sidebar-group-body">
+              <svelte:self items={item.children} {currentPath} depth={depth + 1} />
+            </div>
+          </details>
+        {:else if item.path}
+          <a class="sd-sidebar-link" class:sd-active={active} href={item.path} aria-current={active ? 'page' : undefined}>
+            <span>{item.title}</span>
+          </a>
+        {:else}
+          <span class="sd-sidebar-section-label">{item.title}</span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+{/if}

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

@@ -0,0 +1,24 @@
+import type { 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 SidebarTree: $$__sveltets_2_IsomorphicComponent<{
+    items?: SvedocsTreeItem[];
+    currentPath?: string;
+    depth?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarTree = InstanceType<typeof SidebarTree>;
+export default SidebarTree;
+//# sourceMappingURL=SidebarTree.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTree.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/SidebarTree.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAyJxD,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,WAAW;YAVoE,eAAe,EAAE;;;;;kBAUN,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/theme/SocialNav.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { linkRel, resolveLocalizedNavItem } from './headless.js';
+  import type { SvedocsThemeContext } from './types.js';
+
+  export let context: SvedocsThemeContext;
+</script>
+
+{#if context.config.theme.social.length > 0}
+  <nav class="sd-socialnav" aria-label={context.t('nav.social')} data-theme-component="social-nav">
+    {#each context.config.theme.social as item}
+      {@const localized = resolveLocalizedNavItem(item, context)}
+      <a href={localized.href} rel={linkRel(localized)} target={localized.external ? '_blank' : undefined}>
+        {localized.label}
+      </a>
+    {/each}
+  </nav>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialNav.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/SocialNav.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAsBtD,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;aAViC,mBAAmB;;;kBAU2B,CAAC;AAC7E,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/theme/TableOfContents.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import type { SvedocsPage } from '../core/types.js';
+  import { createTocController, fallbackTranslate } from './headless.js';
+  import type { SvedocsThemeContext, SvedocsTocController } from './types.js';
+
+  export let page: SvedocsPage;
+  export let controller: SvedocsTocController | undefined = undefined;
+  export let context: SvedocsThemeContext | undefined = undefined;
+
+  const internalController = createTocController({ page });
+  let activeController: SvedocsTocController = internalController;
+  let tocEl: HTMLElement | null = null;
+  let activeHeading = page.headings[0]?.id ?? '';
+  let indicatorTop = 0;
+  let indicatorHeight = 0;
+  let indicatorReady = false;
+  let boundController: SvedocsTocController | undefined;
+  let unsubscribeController: (() => void) | undefined;
+
+  $: activeController = controller ?? internalController;
+  $: t = context?.t ?? fallbackTranslate;
+  $: activeController.setPage(page);
+  $: activeController.setContainer(tocEl);
+  $: bindController(activeController);
+
+  onMount(() => {
+    if (controller) return;
+    return internalController.mount();
+  });
+
+  onDestroy(() => {
+    unsubscribeController?.();
+  });
+
+  function bindController(nextController: SvedocsTocController): void {
+    if (boundController === nextController) return;
+    unsubscribeController?.();
+    boundController = nextController;
+    const unsubscribers = [
+      nextController.activeHeading.subscribe((value) => (activeHeading = value)),
+      nextController.indicatorTop.subscribe((value) => (indicatorTop = value)),
+      nextController.indicatorHeight.subscribe((value) => (indicatorHeight = value)),
+      nextController.indicatorReady.subscribe((value) => (indicatorReady = value))
+    ];
+    unsubscribeController = () => {
+      for (const unsubscribe of unsubscribers) unsubscribe();
+    };
+  }
+</script>
+
+<aside
+  bind:this={tocEl}
+  class="sd-toc"
+  class:sd-toc-ready={indicatorReady}
+  aria-label={t('toc.label')}
+  style={`--toc-indicator-top:${indicatorTop}px;--toc-indicator-height:${indicatorHeight}px;`}
+  data-theme-component="toc"
+>
+  {#if page.headings.length > 0}
+    <div class="sd-toc-title">{t('toc.label')}</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={() => activeController.activate(heading.id)}
+      >
+        {heading.text}
+      </a>
+    {/each}
+  {/if}
+</aside>

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

@@ -0,0 +1,25 @@
+import type { SvedocsPage } from '../core/types.js';
+import type { SvedocsThemeContext, SvedocsTocController } 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 TableOfContents: $$__sveltets_2_IsomorphicComponent<{
+    page: SvedocsPage;
+    controller?: SvedocsTocController | undefined;
+    context?: SvedocsThemeContext | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableOfContents = InstanceType<typeof TableOfContents>;
+export default TableOfContents;
+//# sourceMappingURL=TableOfContents.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/TableOfContents.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAkE5E,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;UAV8D,WAAW;iBAAe,oBAAoB,GAAG,SAAS;cAAY,mBAAmB,GAAG,SAAS;;;kBAUpF,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}