svedocs 0.1.0-beta.10

package/dist/theme/RootLayout.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/types.js';
+  import { createJsonLdScript, createPageAlternates, createPageMetadata } from '../og/metadata.js';
+  import { createDomId, createMobileNavController, createThemeContext, createThemeStyle } from './headless.js';
+  import LayoutShell from './LayoutShell.svelte';
+  import SafeRenderError from './SafeRenderError.svelte';
+  import ThemeInit from './ThemeInit.svelte';
+  import type { SvedocsThemeComponentMap } from './types.js';
+
+  export let config: SvedocsResolvedConfig;
+  export let page: SvedocsPage | undefined = undefined;
+  export let localeCode: string | undefined = undefined;
+  export let pages: SvedocsPage[] = [];
+  export let tree: SvedocsTreeItem[] = [];
+  export let search: SvedocsSearchRecord[] = [];
+  export let loadSearch: (() => Promise<SvedocsSearchRecord[]>) | undefined = undefined;
+  export let headTitle = '';
+  export let headDescription = '';
+  export let headRobots = '';
+  export let mobileTree: SvedocsTreeItem[] = [];
+  export let mobileCurrentPath = '';
+  export let hasBackgroundSlot: boolean | undefined = undefined;
+  export let themeComponents: Partial<SvedocsThemeComponentMap> = {};
+
+  const mobileNav = createMobileNavController();
+  let mounted = false;
+  let mobileMenuOpen = false;
+  let unsubscribeMobileMenu: (() => void) | undefined;
+  let stopScrollbarVisibility: (() => void) | undefined;
+
+  $: metadata = page ? createPageMetadata(config, page, pages) : undefined;
+  $: alternates = page ? createPageAlternates(config, page, pages) : [];
+  $: jsonLdScripts = metadata ? [
+    createJsonLdScript(metadata.jsonLd),
+    ...metadata.head.jsonLd.map((entry) => createJsonLdScript(entry))
+  ] : [];
+  $: context = createThemeContext({
+    config,
+    ...(page ? { page } : {}),
+    pages,
+    tree: tree.length > 0 ? tree : mobileTree,
+    search,
+    ...(loadSearch ? { loadSearch } : {}),
+    ...(localeCode ? { localeCode } : {})
+  });
+  $: themeStyle = createThemeStyle(config);
+  $: mobileMenuId = `sd-mobile-menu-${createDomId(page?.id ?? page?.routePath ?? 'site')}`;
+  $: mobileTreePath = mobileCurrentPath || page?.routePath || '';
+  $: showBackgroundSlot = hasBackgroundSlot ?? Boolean($$slots.background);
+  $: title = headTitle || metadata?.title || (page ? config.site.title : `Error - ${config.site.title}`);
+  $: description = headDescription || metadata?.description || config.site.description;
+  $: robots = headRobots || metadata?.robots || (!page ? 'noindex' : '');
+  $: Layout = themeComponents.Layout ?? LayoutShell;
+
+  onMount(() => {
+    mounted = true;
+    unsubscribeMobileMenu = mobileNav.open.subscribe((value) => (mobileMenuOpen = value));
+    stopScrollbarVisibility = mountScrollbarVisibility();
+    markHydratedRoute();
+    return cleanupSubscriptions;
+  });
+
+  onDestroy(() => {
+    cleanupSubscriptions();
+  });
+
+  $: if (mounted) {
+    page?.routePath;
+    page?.locale;
+    markHydratedRoute();
+    mobileNav.close();
+  }
+
+  function markHydratedRoute() {
+    document.documentElement.dataset.svedocsRoute = page?.routePath ?? '';
+    document.documentElement.lang = context.languageTag;
+    document.documentElement.dir = context.locale?.dir ?? 'ltr';
+  }
+
+  function cleanupSubscriptions() {
+    unsubscribeMobileMenu?.();
+    unsubscribeMobileMenu = undefined;
+    stopScrollbarVisibility?.();
+    stopScrollbarVisibility = undefined;
+  }
+
+  function mountScrollbarVisibility() {
+    const root = document.documentElement;
+    const body = document.body;
+    const elementTimers = new Map<HTMLElement, number>();
+    let windowTimer: number | undefined;
+
+    function markWindowScrolling() {
+      root.classList.add('sd-is-window-scrolling');
+      body.classList.add('sd-is-window-scrolling');
+      if (windowTimer !== undefined) window.clearTimeout(windowTimer);
+      windowTimer = window.setTimeout(() => {
+        root.classList.remove('sd-is-window-scrolling');
+        body.classList.remove('sd-is-window-scrolling');
+        windowTimer = undefined;
+      }, 900);
+    }
+
+    function markElementScrolling(event: Event) {
+      const target = event.target;
+      if (!(target instanceof HTMLElement) || target === root || target === body) return;
+      if (!isScrollableElement(target)) return;
+      target.classList.add('sd-is-scrolling');
+      const existingTimer = elementTimers.get(target);
+      if (existingTimer !== undefined) window.clearTimeout(existingTimer);
+      elementTimers.set(target, window.setTimeout(() => {
+        target.classList.remove('sd-is-scrolling');
+        elementTimers.delete(target);
+      }, 900));
+    }
+
+    window.addEventListener('scroll', markWindowScrolling, { passive: true });
+    document.addEventListener('scroll', markElementScrolling, { capture: true, passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', markWindowScrolling);
+      document.removeEventListener('scroll', markElementScrolling, { capture: true });
+      if (windowTimer !== undefined) window.clearTimeout(windowTimer);
+      root.classList.remove('sd-is-window-scrolling');
+      body.classList.remove('sd-is-window-scrolling');
+      for (const [element, timer] of elementTimers) {
+        window.clearTimeout(timer);
+        element.classList.remove('sd-is-scrolling');
+      }
+      elementTimers.clear();
+    };
+  }
+
+  function isScrollableElement(element: HTMLElement) {
+    return element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1;
+  }
+</script>
+
+<svelte:window on:keydown={mobileNav.handleWindowKeydown} />
+
+<ThemeInit
+  defaultMode={config.theme.defaultMode}
+  languageTag={context.languageTag}
+  dir={context.locale?.dir ?? 'ltr'}
+/>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+  {#if robots}
+    <meta name="robots" content={robots} />
+  {/if}
+  {#if metadata?.keywords.length}
+    <meta name="keywords" content={metadata.keywords.join(', ')} />
+  {/if}
+  {#if metadata?.canonical}
+    <link rel="canonical" href={metadata.canonical} />
+  {/if}
+  {#each alternates as alternate}
+    <link rel="alternate" hreflang={alternate.lang} href={alternate.href} />
+  {/each}
+  {#if metadata}
+    <meta property="og:title" content={metadata.openGraph.title} />
+    <meta property="og:description" content={metadata.openGraph.description} />
+    <meta property="og:type" content={metadata.openGraph.type} />
+    <meta property="og:site_name" content={metadata.openGraph.siteName} />
+    {#if metadata.openGraph.locale}
+      <meta property="og:locale" content={metadata.openGraph.locale} />
+    {/if}
+    {#each metadata.openGraph.alternateLocales ?? [] as locale}
+      <meta property="og:locale:alternate" content={locale} />
+    {/each}
+    {#if metadata.openGraph.url}
+      <meta property="og:url" content={metadata.openGraph.url} />
+    {/if}
+    {#if metadata.openGraph.image}
+      <meta property="og:image" content={metadata.openGraph.image} />
+    {/if}
+    {#if metadata.openGraph.author}
+      <meta property="article:author" content={metadata.openGraph.author} />
+    {/if}
+    {#if metadata.openGraph.publishedTime}
+      <meta property="article:published_time" content={metadata.openGraph.publishedTime} />
+    {/if}
+    {#if metadata.openGraph.updatedTime}
+      <meta property="article:modified_time" content={metadata.openGraph.updatedTime} />
+    {/if}
+    <meta name="twitter:card" content={metadata.twitter.card} />
+    <meta name="twitter:title" content={metadata.twitter.title} />
+    <meta name="twitter:description" content={metadata.twitter.description} />
+    {#if metadata.twitter.image}
+      <meta name="twitter:image" content={metadata.twitter.image} />
+    {/if}
+    {#each metadata.head.meta as tag}
+      <meta
+        name={tag.name}
+        property={tag.property}
+        http-equiv={tag.httpEquiv}
+        itemprop={tag.itemprop}
+        content={tag.content}
+      />
+    {/each}
+    {#each metadata.head.links as tag}
+      <link
+        rel={tag.rel}
+        href={tag.href}
+        hreflang={tag.hreflang}
+        type={tag.type}
+        media={tag.media}
+        title={tag.title}
+        sizes={tag.sizes}
+        as={tag.as}
+        crossorigin={tag.crossorigin}
+      />
+    {/each}
+    {#each jsonLdScripts as script}
+      {@html script}
+    {/each}
+  {/if}
+</svelte:head>
+
+<svelte:boundary>
+  <svelte:component
+    this={Layout}
+    {context}
+    {themeStyle}
+    {mobileTree}
+    mobileCurrentPath={mobileTreePath}
+    {mobileMenuId}
+    {mobileMenuOpen}
+    hasBackgroundSlot={showBackgroundSlot}
+    {themeComponents}
+    onToggleMobileMenu={mobileNav.toggle}
+    onCloseMobileMenu={mobileNav.close}
+  >
+    <svelte:fragment slot="background">
+      <slot name="background" />
+    </svelte:fragment>
+    <slot />
+  </svelte:component>
+  {#snippet failed(error, reset)}
+    <svelte:component
+      this={LayoutShell}
+      {context}
+      {themeStyle}
+      {mobileTree}
+      mobileCurrentPath={mobileTreePath}
+      {mobileMenuId}
+      {mobileMenuOpen}
+      hasBackgroundSlot={showBackgroundSlot}
+      {themeComponents}
+      onToggleMobileMenu={mobileNav.toggle}
+      onCloseMobileMenu={mobileNav.close}
+    >
+      <svelte:fragment slot="background">
+        <slot name="background" />
+      </svelte:fragment>
+      <main id="content" class="sd-route-render-error" data-theme-component="route-render-error">
+        <svelte:component
+          this={SafeRenderError} component={themeComponents.RenderError}
+          {error}
+          {reset}
+          {context}
+          tree={context.tree}
+          variant="layout"
+          label={context.t('render.layout.label')}
+          title={context.t('render.layout.title')}
+          message={context.t('render.layout.message')}
+        />
+      </main>
+    </svelte:component>
+  {/snippet}
+</svelte:boundary>

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

@@ -0,0 +1,47 @@
+import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/types.js';
+import type { SvedocsThemeComponentMap } 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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const RootLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    config: SvedocsResolvedConfig;
+    page?: SvedocsPage | undefined;
+    localeCode?: string | undefined;
+    pages?: SvedocsPage[];
+    tree?: SvedocsTreeItem[];
+    search?: SvedocsSearchRecord[];
+    loadSearch?: (() => Promise<SvedocsSearchRecord[]>) | undefined;
+    headTitle?: string;
+    headDescription?: string;
+    headRobots?: string;
+    mobileTree?: SvedocsTreeItem[];
+    mobileCurrentPath?: string;
+    hasBackgroundSlot?: boolean | undefined;
+    themeComponents?: Partial<SvedocsThemeComponentMap>;
+}, {
+    background: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    background: {};
+    default: {};
+}, {}, string>;
+type RootLayout = InstanceType<typeof RootLayout>;
+export default RootLayout;
+//# sourceMappingURL=RootLayout.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RootLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/RootLayout.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAMjH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAgO3D,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,UAAU;YAfsW,qBAAqB;WAAS,WAAW,GAAG,SAAS;iBAAe,MAAM,GAAG,SAAS;YAAU,WAAW,EAAE;WAAS,eAAe,EAAE;aAAW,mBAAmB,EAAE;iBAAe,CAAC,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,SAAS;;;;iBAAuH,eAAe,EAAE;;wBAAoE,OAAO,GAAG,SAAS;sBAAoB,OAAO,CAAC,wBAAwB,CAAC;;;;;;;;;cAe7wB,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/theme/RouteRenderError.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/types.js';
+  import { createThemeContext } from './headless.js';
+  import SafeRenderError from './SafeRenderError.svelte';
+  import RootLayout from './RootLayout.svelte';
+  import type { SvedocsThemeComponentMap } from './types.js';
+
+  export let error: unknown = undefined;
+  export let reset: (() => void) | undefined = undefined;
+  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 themeComponents: Partial<SvedocsThemeComponentMap> = {};
+  export let label: string | undefined = undefined;
+  export let title: string | undefined = undefined;
+  export let message: string | undefined = undefined;
+
+  $: context = createThemeContext({ config, page, pages, tree, search, ...(loadSearch ? { loadSearch } : {}) });
+  $: resolvedLabel = label ?? context.t('render.page.label');
+  $: resolvedTitle = title ?? context.t('render.page.title');
+  $: resolvedMessage = message ?? context.t('render.page.message');
+</script>
+
+<svelte:component
+  this={RootLayout}
+  {config}
+  {page}
+  {pages}
+  {tree}
+  {search}
+  {loadSearch}
+  {themeComponents}
+  mobileTree={tree}
+  mobileCurrentPath={page.routePath}
+>
+  <main id="content" class="sd-route-render-error" data-theme-component="route-render-error">
+    <svelte:component
+      this={SafeRenderError} component={themeComponents.RenderError}
+      {error}
+      {reset}
+      {page}
+      {context}
+      tree={tree}
+      variant="layout"
+      label={resolvedLabel}
+      title={resolvedTitle}
+      message={resolvedMessage}
+    />
+  </main>
+</svelte:component>

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

@@ -0,0 +1,34 @@
+import type { SvedocsPage, SvedocsResolvedConfig, SvedocsSearchRecord, SvedocsTreeItem } from '../core/types.js';
+import type { SvedocsThemeComponentMap } 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 RouteRenderError: $$__sveltets_2_IsomorphicComponent<{
+    error?: unknown;
+    reset?: (() => void) | undefined;
+    page: SvedocsPage;
+    pages?: SvedocsPage[];
+    tree?: SvedocsTreeItem[];
+    search?: SvedocsSearchRecord[];
+    config: SvedocsResolvedConfig;
+    loadSearch?: (() => Promise<SvedocsSearchRecord[]>) | undefined;
+    themeComponents?: Partial<SvedocsThemeComponentMap>;
+    label?: string | undefined;
+    title?: string | undefined;
+    message?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RouteRenderError = InstanceType<typeof RouteRenderError>;
+export default RouteRenderError;
+//# sourceMappingURL=RouteRenderError.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RouteRenderError.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/RouteRenderError.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIjH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAoC3D,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,gBAAgB;YAV4N,OAAO;YAAU,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;UAAQ,WAAW;YAAU,WAAW,EAAE;WAAS,eAAe,EAAE;aAAW,mBAAmB,EAAE;YAAU,qBAAqB;iBAAe,CAAC,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,SAAS;sBAAoB,OAAO,CAAC,wBAAwB,CAAC;YAAU,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;cAAY,MAAM,GAAG,SAAS;;;kBAUrgB,CAAC;AACpF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/theme/SafeRenderError.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import type { SvedocsPage, SvedocsTreeItem } from '../core/types.js';
+  import { fallbackTranslate } from './headless.js';
+  import RenderError from './RenderError.svelte';
+  import type { SvedocsRenderErrorProps, SvedocsThemeContext } from './types.js';
+
+  export let component: Component<SvedocsRenderErrorProps> | undefined = undefined;
+  export let error: unknown = undefined;
+  export let reset: (() => void) | undefined = undefined;
+  export let title: string | undefined = undefined;
+  export let message: string | undefined = undefined;
+  export let label: string | undefined = undefined;
+  export let variant = 'section';
+  export let page: SvedocsPage | undefined = undefined;
+  export let context: SvedocsThemeContext | undefined = undefined;
+  export let tree: SvedocsTreeItem[] = [];
+
+  $: ErrorComponent = component ?? RenderError;
+  $: t = context?.t ?? fallbackTranslate;
+</script>
+
+<svelte:boundary>
+  <svelte:component
+    this={ErrorComponent}
+    {error}
+    {reset}
+    {title}
+    {message}
+    {label}
+    {variant}
+    {page}
+    {context}
+    {tree}
+  />
+  {#snippet failed(fallbackError)}
+    <RenderError
+      error={fallbackError}
+      {reset}
+      title={t('render.errorUi.title')}
+      message={t('render.errorUi.message')}
+      label={t('render.errorUi.label')}
+      variant="section"
+      {page}
+      {context}
+      {tree}
+    />
+  {/snippet}
+</svelte:boundary>

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

@@ -0,0 +1,33 @@
+import type { Component } from 'svelte';
+import type { SvedocsPage, SvedocsTreeItem } from '../core/types.js';
+import type { SvedocsRenderErrorProps, 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 SafeRenderError: $$__sveltets_2_IsomorphicComponent<{
+    component?: Component<SvedocsRenderErrorProps> | undefined;
+    error?: unknown;
+    reset?: (() => void) | undefined;
+    title?: string | undefined;
+    message?: string | undefined;
+    label?: string | undefined;
+    variant?: string;
+    page?: SvedocsPage | undefined;
+    context?: SvedocsThemeContext | undefined;
+    tree?: SvedocsTreeItem[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SafeRenderError = InstanceType<typeof SafeRenderError>;
+export default SafeRenderError;
+//# sourceMappingURL=SafeRenderError.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SafeRenderError.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/SafeRenderError.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAgC/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,eAAe;gBAViL,SAAS,CAAC,uBAAuB,CAAC,GAAG,SAAS;YAAU,OAAO;YAAU,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;cAAY,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;;WAAmC,WAAW,GAAG,SAAS;cAAY,mBAAmB,GAAG,SAAS;WAAS,eAAe,EAAE;;;kBAUxZ,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/theme/ScopeSwitcher.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { SvedocsLocale, SvedocsPage } from '../core/types.js';
+  import { fallbackTranslate } from './headless.js';
+  import type { SvedocsThemeContext } from './types.js';
+
+  export let page: SvedocsPage | undefined = undefined;
+  export let pages: SvedocsPage[] = [];
+  export let locales: SvedocsLocale[] = [];
+  export let context: SvedocsThemeContext | undefined = undefined;
+
+  let openMenu: 'locale' | undefined;
+  let root: HTMLDivElement;
+
+  $: localeOptions = createScopeOptions(
+    locales,
+    page?.locale,
+    (locale) => locale.code,
+    (locale) => locale.label,
+    (locale) => findScopedPage({ locale: locale.code })?.routePath
+  );
+  $: activeLocaleOption = localeOptions.find((option) => option.current);
+  $: t = context?.t ?? fallbackTranslate;
+  $: activeLocaleLabel = activeLocaleOption?.label ?? t('scope.locale');
+  $: activeLocaleShortLabel = activeLocaleOption
+    ? createShortLocaleLabel(activeLocaleOption.value, activeLocaleOption.label)
+    : t('scope.langShort');
+
+  function findScopedPage(scope: { locale?: string }): SvedocsPage | undefined {
+    if (!page) return undefined;
+    return pages.find((candidate) => (
+      candidate.scopePath === page.scopePath
+      && (scope.locale ? candidate.locale === scope.locale : candidate.locale === page.locale)
+    ));
+  }
+
+  function createScopeOptions<T>(
+    items: T[],
+    current: string | undefined,
+    getValue: (item: T) => string,
+    getLabel: (item: T) => string,
+    getPath: (item: T) => string | undefined
+  ) {
+    return items.map((item) => ({
+      value: getValue(item),
+      label: getLabel(item),
+      path: getPath(item),
+      current: getValue(item) === current
+    }));
+  }
+
+  function createShortLocaleLabel(value: string, label: string) {
+    const trimmedLabel = label.trim();
+    if ([...trimmedLabel].length <= 3) return trimmedLabel;
+
+    const trimmedValue = value.trim();
+    return trimmedValue ? trimmedValue.slice(0, 3).toUpperCase() : trimmedLabel.slice(0, 3);
+  }
+
+  function closeMenu() {
+    openMenu = undefined;
+  }
+
+  function toggleMenu(menu: 'locale') {
+    openMenu = openMenu === menu ? undefined : menu;
+  }
+
+  onMount(() => {
+    function closeOnPointer(event: PointerEvent) {
+      if (!root) return;
+      if (!root.contains(event.target as Node)) openMenu = undefined;
+    }
+
+    function closeOnEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') openMenu = undefined;
+    }
+
+    document.addEventListener('pointerdown', closeOnPointer);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('pointerdown', closeOnPointer);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  });
+</script>
+
+{#if localeOptions.length > 1}
+  <div bind:this={root} class="sd-scope-switcher" role="group" aria-label={t('scope.group')}>
+    <div class:sd-open={openMenu === 'locale'} class="sd-scope-menu">
+      <button type="button" class="sd-scope-trigger" aria-label={t('scope.locale')} aria-haspopup="menu" aria-expanded={openMenu === 'locale'} on:click={() => toggleMenu('locale')}>
+        <span class="sd-scope-label-full">{activeLocaleLabel}</span>
+        <span aria-hidden="true" class="sd-scope-label-short">{activeLocaleShortLabel}</span>
+      </button>
+      {#if openMenu === 'locale'}
+        <div class="sd-scope-options" role="menu" aria-label={t('scope.localeOptions')}>
+          {#each localeOptions as option}
+            {#if option.path}
+              <a href={option.path} role="menuitemradio" aria-checked={option.current} aria-current={option.current ? 'page' : undefined} on:click={closeMenu}>{option.label}</a>
+            {:else}
+              <span role="menuitemradio" aria-checked={option.current} aria-disabled="true">{option.label}</span>
+            {/if}
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScopeSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/ScopeSwitcher.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAgHtD,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,aAAa;WAV0E,WAAW,GAAG,SAAS;YAAU,WAAW,EAAE;cAAY,aAAa,EAAE;cAAY,mBAAmB,GAAG,SAAS;;;kBAU/G,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}