svedocs 0.1.0-beta.2

package/dist/theme/SearchDialog.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount, tick } from 'svelte';
+  import type { SvedocsSearchRecord } from '../core/types.js';
+  import { filterSearchRecords, searchRecords } from '../search/local.js';
+  import type { SearchResult, SearchScope } from '../search/types.js';
+  import { portal } from './portal.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';
+
+  let open = false;
+  let query = '';
+  let activeIndex = 0;
+  let trigger: HTMLButtonElement | undefined;
+  let input: HTMLInputElement | undefined;
+  let dialog: HTMLDivElement | undefined;
+  let previousFocus: HTMLElement | undefined;
+  let remoteResults: SearchResult[] = [];
+  let remoteStatus: 'idle' | 'loading' | 'ready' | 'error' = 'idle';
+  let remoteError = '';
+  let remoteKey = '';
+  let remoteRequestId = 0;
+  let loadedRecords: SvedocsSearchRecord[] = records;
+  let recordsStatus: 'idle' | 'loading' | 'ready' | 'error' = records.length > 0 ? 'ready' : 'idle';
+  let recordsRequest: Promise<SvedocsSearchRecord[]> | undefined;
+
+  $: if (records.length > 0 && loadedRecords !== records) {
+    loadedRecords = records;
+    recordsStatus = 'ready';
+  }
+  $: usesRemoteSearch = buildMode === 'edge' && provider !== 'local' && provider !== 'local-json';
+  $: localResults = query.trim()
+    ? searchRecords(loadedRecords, { query, limit: 8, ...scope })
+    : createDefaultResults(loadedRecords, scope);
+  $: results = usesRemoteSearch && query.trim()
+    ? remoteStatus === 'error' ? localResults : remoteResults
+    : localResults;
+  $: activeIndex = Math.min(activeIndex, Math.max(results.length - 1, 0));
+  $: if (usesRemoteSearch && open && query.trim()) {
+    const nextKey = createRemoteKey(provider, endpoint, query, scope);
+    if (nextKey !== remoteKey) {
+      remoteKey = nextKey;
+      void loadRemoteResults(query, scope, ++remoteRequestId);
+    }
+  }
+  $: if (!query.trim()) {
+    remoteResults = [];
+    remoteStatus = 'idle';
+    remoteError = '';
+    remoteKey = '';
+  }
+
+  function show() {
+    previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+    open = true;
+    void ensureRecords();
+    tick().then(() => input?.focus());
+  }
+
+  function hide() {
+    open = false;
+    query = '';
+    activeIndex = 0;
+    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();
+      activeIndex = Math.min(activeIndex + 1, results.length - 1);
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      activeIndex = Math.max(activeIndex - 1, 0);
+    }
+    if (event.key === 'Enter' && results[activeIndex]) {
+      void goto(results[activeIndex].url, { keepFocus: false });
+      hide();
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('svedocs:open-search', show);
+    return () => {
+      window.removeEventListener('keydown', handleKeydown);
+      window.removeEventListener('svedocs:open-search', show);
+    };
+  });
+
+  async function ensureRecords(): Promise<SvedocsSearchRecord[]> {
+    if (loadedRecords.length > 0 || !loadRecords) return loadedRecords;
+    if (!recordsRequest) {
+      recordsStatus = 'loading';
+      recordsRequest = loadRecords()
+        .then((nextRecords) => {
+          loadedRecords = nextRecords;
+          recordsStatus = 'ready';
+          return nextRecords;
+        })
+        .catch((error) => {
+          recordsStatus = 'error';
+          recordsRequest = undefined;
+          throw error;
+        });
+    }
+    try {
+      return await recordsRequest;
+    } catch {
+      return loadedRecords;
+    }
+  }
+
+  async function loadRemoteResults(query: string, scope: SearchScope, requestId: number) {
+    remoteResults = [];
+    remoteStatus = 'loading';
+    remoteError = '';
+    try {
+      const response = await fetch(createSearchUrl(endpoint, query, scope, provider));
+      if (!response.ok) throw new Error(`Search returned ${response.status}.`);
+      const payload = await response.json() as { results?: SearchResult[] };
+      if (requestId !== remoteRequestId) return;
+      remoteResults = payload.results ?? [];
+      remoteStatus = 'ready';
+    } catch (error) {
+      if (requestId !== remoteRequestId) return;
+      remoteResults = [];
+      remoteError = error instanceof Error ? error.message : 'Search failed.';
+      remoteStatus = 'error';
+    }
+  }
+
+  function createDefaultResults(records: SvedocsSearchRecord[], scope: SearchScope): SearchResult[] {
+    return filterSearchRecords(records, scope).slice(0, 6).map((record) => ({
+      id: record.id,
+      title: record.title,
+      url: record.url,
+      ...(record.section ? { section: record.section } : {}),
+      excerpt: record.content.slice(0, 150),
+      score: 0.1,
+      metadata: record.metadata
+    }));
+  }
+
+  function createSearchUrl(endpoint: string, query: string, scope: SearchScope, provider: string): string {
+    const url = new URL(endpoint, window.location.origin);
+    url.searchParams.set('q', query);
+    url.searchParams.set('limit', '8');
+    url.searchParams.set('provider', provider);
+    if (scope.locale) url.searchParams.set('locale', scope.locale);
+    if (scope.kind) url.searchParams.set('kind', scope.kind);
+    return url.toString();
+  }
+
+  function createRemoteKey(provider: string, endpoint: string, query: string, scope: SearchScope): string {
+    return JSON.stringify([provider, endpoint, query.trim(), scope.locale, scope.kind]);
+  }
+
+  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="Search documentation" aria-haspopup="dialog" aria-expanded={open} on:click={show}>
+  <span>Search</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="Search documentation"
+    tabindex="-1"
+    on:keydown={handleDialogKeydown}
+  >
+    <label class="sd-search-box">
+      <span class="sd-visually-hidden">Search query</span>
+      <input bind:this={input} bind:value={query} placeholder="Search docs" />
+    </label>
+    <div class="sd-search-results" role="listbox" aria-label="Search results">
+      {#if remoteStatus === 'loading'}
+        <p class="sd-empty-state">Searching...</p>
+      {/if}
+      {#if recordsStatus === 'loading' && !usesRemoteSearch}
+        <p class="sd-empty-state">Loading search index...</p>
+      {/if}
+      {#if recordsStatus === 'error' && !usesRemoteSearch}
+        <p class="sd-empty-state">Search index could not be loaded.</p>
+      {/if}
+      {#if remoteError}
+        <p class="sd-empty-state">{remoteError} Showing local results.</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={() => (activeIndex = 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">No matching docs yet.</p>
+      {/if}
+    </div>
+  </div>
+  </div>
+{/if}

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

@@ -0,0 +1,28 @@
+import type { SvedocsSearchRecord } from '../core/types.js';
+import type { SearchScope } from '../search/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;
+}, {
+    [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;AAE5D,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAoPpE,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;cAV0I,mBAAmB,EAAE;kBAAgB,CAAC,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,SAAS;YAAU,WAAW;;;;;;kBAUvK,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,136 @@
+<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 item.path === 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 });
+  }
+
+  $: 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}
+        <div class="sd-sidebar-section-heading" class:sd-first={sectionIndex === 0} class:sd-active={section.items.some((item) => isActiveBranch(item))}>
+          {#if section.heading.icon}
+            <span class="sd-sidebar-section-icon" aria-hidden="true">{section.heading.icon}</span>
+          {/if}
+          <span>{section.heading.title}</span>
+        </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} 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}>
+                {#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} 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}>
+            <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;AA6IxD,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/Textarea.svelte

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

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

@@ -0,0 +1,33 @@
+import type { HTMLTextareaAttributes } 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;
+}
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<Omit<HTMLTextareaAttributes, "value" | "class"> & {
+    class?: string;
+    density?: SvedocsControlDensity;
+    invalid?: boolean;
+    value?: HTMLTextareaAttributes["value"];
+}, {
+    blur: FocusEvent;
+    change: Event;
+    focus: FocusEvent;
+    input: InputEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;
+//# sourceMappingURL=Textarea.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AA0BpE,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,QAAQ;YA5BF,MAAM;cACJ,qBAAqB;cACrB,OAAO;YACT,sBAAsB,CAAC,OAAO,CAAC;;;;;;;;;;kBAyBkD,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/theme/ThemeToggle.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let defaultMode: 'light' | 'dark' | 'system' = 'system';
+
+  let mode: 'light' | 'dark' = 'light';
+
+  function apply(next: 'light' | 'dark') {
+    mode = next;
+    document.documentElement.dataset.theme = next;
+    document.documentElement.style.colorScheme = next;
+    localStorage.setItem('svedocs-theme', next);
+  }
+
+    onMount(() => {
+      const current = document.documentElement.dataset.theme;
+      if (current === 'dark' || current === 'light') {
+        mode = current;
+        return;
+      }
+      const stored = localStorage.getItem('svedocs-theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const configured = defaultMode === 'system' ? prefersDark ? 'dark' : 'light' : defaultMode;
+      apply(stored === 'dark' || stored === 'light' ? stored : configured);
+    });
+</script>
+
+<button class="sd-theme-toggle" type="button" aria-label={`Switch to ${mode === 'dark' ? 'light' : 'dark'} theme`} title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} theme`} on:click={() => apply(mode === 'dark' ? 'light' : 'dark')}>
+  {#if mode === 'dark'}
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M12 4V2m0 20v-2m8-8h2M2 12h2m13.66-5.66 1.42-1.42M4.92 19.08l1.42-1.42m11.32 0 1.42 1.42M4.92 4.92l1.42 1.42" />
+      <circle cx="12" cy="12" r="4" />
+    </svg>
+  {:else}
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M20 14.2A7.8 7.8 0 0 1 9.8 4a8 8 0 1 0 10.2 10.2Z" />
+    </svg>
+  {/if}
+</button>

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

@@ -0,0 +1,21 @@
+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 ThemeToggle: $$__sveltets_2_IsomorphicComponent<{
+    defaultMode?: "light" | "dark" | "system";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThemeToggle = InstanceType<typeof ThemeToggle>;
+export default ThemeToggle;
+//# sourceMappingURL=ThemeToggle.svelte.d.ts.map