@tiramisu-docs/kit 0.1.0

package/src/lib/components/Footer.svelte

@@ -0,0 +1,26 @@
+<a
+  href="https://tiramisudocs.com"
+  target="_blank"
+  rel="noopener noreferrer"
+  class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border bg-muted/40 px-3 py-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+>
+  <!-- Light logo -->
+  <svg class="h-3 w-3 dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <rect x="3" y="16" width="18" height="3" rx="1" fill="#5c4a3a"/>
+    <rect x="4" y="11" width="16" height="3" rx="1" fill="#7a6555"/>
+    <rect x="5" y="6" width="14" height="3" rx="1" fill="#3e2e22"/>
+    <circle cx="8" cy="4" r="0.7" fill="#5c4a3a"/>
+    <circle cx="12" cy="3.5" r="0.7" fill="#3e2e22"/>
+    <circle cx="16" cy="4" r="0.7" fill="#5c4a3a"/>
+  </svg>
+  <!-- Dark logo -->
+  <svg class="hidden h-3 w-3 dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <rect x="3" y="16" width="18" height="3" rx="1" fill="#e8e0d8" opacity="0.35"/>
+    <rect x="4" y="11" width="16" height="3" rx="1" fill="#e8e0d8" opacity="0.6"/>
+    <rect x="5" y="6" width="14" height="3" rx="1" fill="#e8e0d8" opacity="0.9"/>
+    <circle cx="8" cy="4" r="0.7" fill="#e8e0d8" opacity="0.45"/>
+    <circle cx="12" cy="3.5" r="0.7" fill="#e8e0d8" opacity="0.6"/>
+    <circle cx="16" cy="4" r="0.7" fill="#e8e0d8" opacity="0.45"/>
+  </svg>
+  Powered by Tiramisu
+</a>

package/src/lib/components/Navbar.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+  import { SheetContent } from "$lib/components/ui/sheet/index.js"
+  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js"
+  import { Collapsible } from "$lib/components/ui/collapsible/index.js"
+  import type { ResolvedConfig } from "../../config.js"
+  import type { SidebarGroup, SidebarEntry, SidebarSubgroup } from "../../types.js"
+
+  let { config, sidebar = [], onSearchClick, locale }: { config: ResolvedConfig; sidebar?: SidebarGroup[]; onSearchClick: () => void; locale?: string } = $props()
+  let mobileOpen = $state(false)
+
+  function docHref(slug: string): string {
+    const prefix = locale ? `/docs/${locale}` : "/docs"
+    return slug === "index" ? prefix : `${prefix}/${slug}`
+  }
+
+  function isSubgroupActive(entry: SidebarSubgroup, pathname: string): boolean {
+    if (entry.slug) {
+      const href = docHref(entry.slug)
+      if (pathname === href) return true
+    }
+    return hasActiveDescendant(entry.items, pathname)
+  }
+
+  function hasActiveDescendant(items: SidebarEntry[], pathname: string): boolean {
+    for (const entry of items) {
+      if (entry.type === "item") {
+        const href = docHref(entry.slug)
+        if (pathname === href) return true
+      } else if (entry.type === "subgroup") {
+        if (isSubgroupActive(entry, pathname)) return true
+      }
+    }
+    return false
+  }
+</script>
+
+{#snippet renderMobileEntries(entries: SidebarEntry[], depth: number)}
+  {#each entries as entry}
+    {#if entry.type === "item"}
+      <a
+        href={docHref(entry.slug)}
+        onclick={() => (mobileOpen = false)}
+        class="block rounded-md py-1.5 text-sm text-muted-foreground hover:text-foreground"
+        style:padding-left="{0.5 + depth * 0.75}rem"
+      >
+        {entry.title}
+      </a>
+    {:else}
+      {@const subActive = entry.slug && $page.url.pathname === docHref(entry.slug)}
+      <Collapsible open={isSubgroupActive(entry, $page.url.pathname)} class="mt-0.5">
+        {#snippet trigger()}
+          {#if entry.slug}
+            <a
+              href={docHref(entry.slug)}
+              class="text-sm font-medium transition-colors
+                {subActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground'}"
+              style:padding-left="{0.5 + depth * 0.75}rem"
+              onclick={(e: MouseEvent) => { e.stopPropagation(); mobileOpen = false; }}
+            >
+              {entry.label}
+            </a>
+          {:else}
+            <span
+              class="text-sm font-medium text-muted-foreground"
+              style:padding-left="{0.5 + depth * 0.75}rem"
+            >
+              {entry.label}
+            </span>
+          {/if}
+        {/snippet}
+        <div class="mt-0.5">
+          {@render renderMobileEntries(entry.items, depth + 1)}
+        </div>
+      </Collapsible>
+    {/if}
+  {/each}
+{/snippet}
+
+<!-- Mobile-only top bar -->
+<header class="sticky top-0 z-50 flex h-14 items-center border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:hidden">
+  <button
+    onclick={() => (mobileOpen = true)}
+    class="mr-3 inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+    aria-label="Toggle menu"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="4" x2="20" y1="12" y2="12"></line>
+      <line x1="4" x2="20" y1="6" y2="6"></line>
+      <line x1="4" x2="20" y1="18" y2="18"></line>
+    </svg>
+  </button>
+
+  <a href="/" class="flex items-center gap-2">
+    {#if config.logo.light || config.logo.dark}
+      <img src={config.logo.light} alt="" class="h-5 w-5 dark:hidden" />
+      <img src={config.logo.dark || config.logo.light} alt="" class="hidden h-5 w-5 dark:block" />
+    {/if}
+    <span class="text-sm font-bold">{config.title}</span>
+  </a>
+</header>
+
+<!-- Mobile sheet -->
+<SheetContent open={mobileOpen} onclose={() => (mobileOpen = false)} side="left">
+  <div class="mt-6">
+    <ScrollArea class="h-[calc(100vh-8rem)]">
+      {#each sidebar as group}
+        <div class="mb-4">
+          <h4 class="mb-1 px-2 text-sm font-semibold text-foreground">{group.label}</h4>
+          <div class="space-y-0.5">
+            {@render renderMobileEntries(group.items, 0)}
+          </div>
+        </div>
+      {/each}
+    </ScrollArea>
+  </div>
+</SheetContent>

package/src/lib/components/PageFooter.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Footer from "./Footer.svelte"
+  import type { ResolvedConfig } from "../../config.js"
+
+  let { config }: { config: ResolvedConfig } = $props()
+
+  const socials = $derived(config.footer?.socials)
+  const copyright = $derived(config.footer?.copyright)
+
+  const socialEntries = $derived(
+    socials
+      ? Object.entries(socials).filter(([, url]) => url)
+      : []
+  )
+</script>
+
+{#snippet socialIcon(name)}
+  {#if name === "github"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+  {:else if name === "x"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+  {:else if name === "discord"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418Z"/></svg>
+  {:else if name === "bluesky"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.785 2.627 3.6 3.496 6.158 3.16-4.468.746-5.954 3.217-3.343 5.69 4.862 4.607 7.156-1.158 7.996-3.638.098-.288.14-.49.565-.49.426 0 .467.202.565.49.84 2.48 3.134 8.245 7.996 3.639 2.611-2.474 1.125-4.945-3.343-5.691 2.558.336 5.373-.533 6.158-3.16.246-.828.624-5.788.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.3-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg>
+  {:else if name === "mastodon"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.823V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
+  {:else if name === "youtube"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+  {:else if name === "linkedin"}
+    <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+  {/if}
+{/snippet}
+
+<footer class="border-t bg-background">
+  <div class="mx-auto max-w-[90rem] px-6 py-8 lg:px-10">
+    <div class="flex items-center justify-between">
+      <!-- Social icons -->
+      <div class="flex items-center gap-3">
+        {#each socialEntries as [name, url]}
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={name}
+          >
+            {@render socialIcon(name)}
+          </a>
+        {/each}
+      </div>
+
+      <!-- Powered by pill -->
+      <div class="w-40">
+        <Footer />
+      </div>
+    </div>
+
+    {#if copyright}
+      <p class="mt-4 text-center text-xs text-muted-foreground">{copyright}</p>
+    {/if}
+  </div>
+</footer>

package/src/lib/components/PrevNextNav.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { SidebarGroup, SidebarEntry } from "../../types.js"
+
+  let { sidebar = [], currentSlug = "", locale }: { sidebar?: SidebarGroup[]; currentSlug?: string; locale?: string } = $props()
+
+  function docHref(slug: string) {
+    const prefix = locale ? `/docs/${locale}` : "/docs"
+    if (slug === "index") return prefix
+    const clean = slug.replace(/\/index$/, "")
+    return `${prefix}/${clean}`
+  }
+
+  interface FlatItem {
+    title: string
+    href: string
+    slug: string
+  }
+
+  function flattenEntries(entries: SidebarEntry[]): FlatItem[] {
+    const result: FlatItem[] = []
+    for (const entry of entries) {
+      if (entry.type === "item") {
+        result.push({
+          title: entry.title,
+          href: docHref(entry.slug),
+          slug: entry.slug,
+        })
+      } else if (entry.type === "subgroup") {
+        if (entry.slug) {
+          result.push({
+            title: entry.label,
+            href: docHref(entry.slug),
+            slug: entry.slug,
+          })
+        }
+        result.push(...flattenEntries(entry.items))
+      }
+    }
+    return result
+  }
+
+  const items = $derived(
+    sidebar.flatMap((group: SidebarGroup) => flattenEntries(group.items))
+  )
+
+  const currentIndex = $derived(
+    items.findIndex((item: FlatItem) => item.slug === (currentSlug || "index"))
+  )
+
+  const prev = $derived(currentIndex > 0 ? items[currentIndex - 1] : null)
+  const next = $derived(currentIndex < items.length - 1 ? items[currentIndex + 1] : null)
+</script>
+
+{#if prev || next}
+  <nav class="mt-8 flex gap-4 border-t pt-8">
+    {#if prev}
+      <a
+        href={prev.href}
+        class="group flex flex-1 flex-col gap-1 rounded-lg border p-4 transition-colors hover:border-foreground/20 hover:bg-muted/50"
+      >
+        <span class="text-xs text-muted-foreground">Previous</span>
+        <span class="font-medium text-foreground group-hover:text-foreground/80">
+          &larr; {prev.title}
+        </span>
+      </a>
+    {:else}
+      <div class="flex-1"></div>
+    {/if}
+    {#if next}
+      <a
+        href={next.href}
+        class="group flex flex-1 flex-col items-end gap-1 rounded-lg border p-4 text-right transition-colors hover:border-foreground/20 hover:bg-muted/50"
+      >
+        <span class="text-xs text-muted-foreground">Next</span>
+        <span class="font-medium text-foreground group-hover:text-foreground/80">
+          {next.title} &rarr;
+        </span>
+      </a>
+    {:else}
+      <div class="flex-1"></div>
+    {/if}
+  </nav>
+{/if}

package/src/lib/components/SearchDialog.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { goto } from "$app/navigation"
+  import { fade, scale, fly } from "svelte/transition"
+  import MiniSearch, { type SearchResult } from "minisearch"
+  import { searchIndex, locales, defaultLocale } from "virtual:tiramisu-docs"
+
+  let { open = $bindable(false), locale }: { open?: boolean; locale?: string } = $props()
+  let query = $state("")
+  let selectedIndex = $state(0)
+  let inputEl: HTMLInputElement | null = $state(null)
+
+  const activeIndex = $derived(
+    locale && locales?.[locale]
+      ? locales[locale].searchIndex
+      : searchIndex
+  )
+
+  const miniSearch = $derived.by(() => {
+    const ms = new MiniSearch({
+      fields: ["title", "headings", "text"],
+      storeFields: ["title", "group", "slug"],
+      searchOptions: {
+        boost: { title: 3, headings: 2 },
+        fuzzy: 0.2,
+        prefix: true,
+      },
+    })
+    ms.addAll(activeIndex)
+    return ms
+  })
+
+  const results = $derived(
+    query.length > 0
+      ? miniSearch.search(query).slice(0, 8)
+      : []
+  )
+
+  $effect(() => {
+    if (open) {
+      query = ""
+      selectedIndex = 0
+      requestAnimationFrame(() => inputEl?.focus())
+    }
+  })
+
+  $effect(() => {
+    results;
+    selectedIndex = 0
+  })
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      open = false
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault()
+      selectedIndex = Math.min(selectedIndex + 1, results.length - 1)
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      selectedIndex = Math.max(selectedIndex - 1, 0)
+    } else if (e.key === "Enter" && results.length > 0) {
+      e.preventDefault()
+      navigate(results[selectedIndex])
+    }
+  }
+
+  function navigate(result: SearchResult) {
+    const prefix = locale ? `/docs/${locale}` : "/docs"
+    const href = result.slug === "index" ? prefix : `${prefix}/${result.slug}`
+    open = false
+    goto(href)
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed inset-0 z-50" onkeydown={handleKeydown}>
+    <button
+      class="fixed inset-0 bg-black/60 dark:bg-black/70 backdrop-blur-sm"
+      onclick={() => (open = false)}
+      aria-label="Close search"
+      transition:fade={{ duration: 150 }}
+    ></button>
+
+    <div
+      class="fixed left-1/2 top-[20%] z-50 w-full max-w-lg -translate-x-1/2 px-4"
+      transition:scale={{ duration: 150, start: 0.96, opacity: 0 }}
+    >
+      <div class="overflow-hidden rounded-xl border bg-background dark:bg-card shadow-2xl">
+        <div class="flex items-center gap-3 border-b px-4">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground">
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="m21 21-4.3-4.3"></path>
+          </svg>
+          <input
+            bind:this={inputEl}
+            bind:value={query}
+            type="text"
+            placeholder="Search documentation..."
+            class="h-12 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          />
+          <kbd class="rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">ESC</kbd>
+        </div>
+
+        {#if results.length > 0}
+          <ul class="max-h-80 overflow-y-auto p-2">
+            {#each results as result, i (result.id)}
+              <li in:fly={{ y: 8, duration: 150, delay: i * 30 }}>
+                <button
+                  class="flex w-full flex-col rounded-lg px-3 py-2.5 text-left transition-colors
+                    {i === selectedIndex
+                      ? 'bg-primary/10 text-foreground'
+                      : 'text-muted-foreground hover:bg-muted'}"
+                  onclick={() => navigate(result)}
+                  onmouseenter={() => (selectedIndex = i)}
+                >
+                  <span class="text-[11px] text-muted-foreground">{result.group}</span>
+                  <span class="text-sm font-medium">{result.title}</span>
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {:else if query.length > 0}
+          <div class="px-4 py-8 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/src/lib/components/Sidebar.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+  import { Collapsible } from "$lib/components/ui/collapsible/index.js"
+  import type { ResolvedConfig, LocaleConfig } from "../../config.js"
+  import type { SidebarGroup, SidebarEntry, SidebarSubgroup } from "../../types.js"
+
+  let { config, groups, onSearchClick, hasSections = false, locale, locales }: { config: ResolvedConfig; groups: SidebarGroup[]; onSearchClick: () => void; hasSections?: boolean; locale?: string; locales?: LocaleConfig[] } = $props()
+
+  let dark = $state(false)
+  let navEl: HTMLElement | null = $state(null)
+  let canScrollUp = $state(false)
+  let canScrollDown = $state(false)
+
+  function updateScroll() {
+    if (!navEl) return
+    const threshold = 4
+    canScrollUp = navEl.scrollTop > threshold
+    canScrollDown = navEl.scrollTop + navEl.clientHeight < navEl.scrollHeight - threshold
+  }
+
+  function docHref(slug: string): string {
+    const prefix = locale ? `/docs/${locale}` : "/docs"
+    if (slug === "index") return prefix
+    const clean = slug.replace(/\/index$/, "")
+    return `${prefix}/${clean}`
+  }
+
+  function initTheme() {
+    if (typeof window === "undefined") return
+    const stored = window.localStorage.getItem("theme")
+    dark = stored === "dark" || (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    document.documentElement.classList.toggle("dark", dark)
+  }
+
+  function toggleTheme() {
+    if (typeof window === "undefined") return
+    dark = !dark
+    document.documentElement.classList.toggle("dark", dark)
+    window.localStorage.setItem("theme", dark ? "dark" : "light")
+  }
+
+  function isSubgroupActive(entry: SidebarSubgroup, pathname: string): boolean {
+    if (entry.slug) {
+      const href = docHref(entry.slug)
+      if (pathname === href) return true
+    }
+    return hasActiveDescendant(entry.items, pathname)
+  }
+
+  function hasActiveDescendant(items: SidebarEntry[], pathname: string): boolean {
+    for (const entry of items) {
+      if (entry.type === "item") {
+        const href = docHref(entry.slug)
+        if (pathname === href) return true
+      } else if (entry.type === "subgroup") {
+        if (isSubgroupActive(entry, pathname)) return true
+      }
+    }
+    return false
+  }
+
+  $effect(() => {
+    initTheme()
+    updateScroll()
+  })
+</script>
+
+{#snippet renderEntries(entries: SidebarEntry[], depth: number)}
+  {#each entries as entry}
+    {#if entry.type === "item"}
+      {@const href = docHref(entry.slug)}
+      {@const active = $page.url.pathname === href}
+      <a
+        {href}
+        class="flex items-center gap-1.5 rounded-md py-[5px] text-[13px] transition-colors
+          {active
+            ? 'font-medium text-primary bg-primary/10'
+            : 'text-muted-foreground hover:text-foreground'}"
+        style:padding-left="{0.5 + depth * 0.75}rem"
+      >
+        {#if entry.icon}
+          <iconify-icon icon={entry.icon.includes(":") ? entry.icon : `lucide:${entry.icon}`} width="14" height="14" class="shrink-0"></iconify-icon>
+        {/if}
+        {entry.title}
+      </a>
+    {:else}
+      {@const subActive = entry.slug && $page.url.pathname === docHref(entry.slug)}
+      <Collapsible
+        open={isSubgroupActive(entry, $page.url.pathname)}
+        href={entry.slug ? docHref(entry.slug) : undefined}
+        class="mt-0.5"
+        triggerClass="rounded-md py-[5px] pr-2 transition-colors {subActive ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground'}"
+      >
+        {#snippet trigger()}
+          <span
+            class="flex w-full items-center gap-1.5 text-[13px] font-medium"
+            style:padding-left="{0.5 + depth * 0.75}rem"
+          >
+            {#if entry.icon}
+              <iconify-icon icon={entry.icon.includes(":") ? entry.icon : `lucide:${entry.icon}`} width="14" height="14" class="shrink-0"></iconify-icon>
+            {/if}
+            {entry.label}
+          </span>
+        {/snippet}
+        <div class="mt-0.5">
+          {@render renderEntries(entry.items, depth + 1)}
+        </div>
+      </Collapsible>
+    {/if}
+  {/each}
+{/snippet}
+
+<div class="flex h-full flex-col">
+  <!-- Header: logo (hidden when TopBar handles it) -->
+  {#if !hasSections}
+  <div class="flex h-14 shrink-0 items-center px-4 lg:px-6">
+    <a href="/" class="flex items-center gap-2">
+      {#if config.logo.light || config.logo.dark}
+        <img src={config.logo.light} alt="" class="h-5 w-5 dark:hidden" />
+        <img src={config.logo.dark || config.logo.light} alt="" class="hidden h-5 w-5 dark:block" />
+      {/if}
+      <span class="text-sm font-semibold">{config.title}</span>
+    </a>
+  </div>
+  {/if}
+
+  <!-- Search (hidden when TopBar has it) -->
+  {#if !hasSections}
+  <div class="px-4 pb-4 lg:px-6">
+    <button onclick={onSearchClick} class="flex h-8 w-full items-center gap-2 rounded-md border bg-muted/40 px-2.5 text-[13px] text-muted-foreground transition-colors hover:bg-muted">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 opacity-60">
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.3-4.3"></path>
+      </svg>
+      <span class="flex-1 text-left">Search</span>
+      <div class="flex items-center gap-0.5">
+        <kbd class="rounded border bg-background px-1 font-mono text-[10px] text-muted-foreground">⌘</kbd>
+        <kbd class="rounded border bg-background px-1 font-mono text-[10px] text-muted-foreground">K</kbd>
+      </div>
+    </button>
+  </div>
+  {/if}
+
+  <!-- Nav groups -->
+  <div class="relative flex-1 overflow-hidden">
+    <nav
+      bind:this={navEl}
+      onscroll={updateScroll}
+      class="h-full overflow-y-auto overscroll-contain px-4 pt-4 pb-4 lg:px-6"
+    >
+      {#each groups as group}
+        <div class="mb-5">
+          <h4 class="flex items-center gap-1.5 pl-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+            {#if group.icon}
+              <iconify-icon icon={group.icon.includes(":") ? group.icon : `lucide:${group.icon}`} width="14" height="14" class="shrink-0"></iconify-icon>
+            {/if}
+            {group.label}
+          </h4>
+          <div class="mt-1 space-y-0.5">
+            {@render renderEntries(group.items, 0)}
+          </div>
+        </div>
+      {/each}
+    </nav>
+
+    {#if canScrollUp}
+      <div class="pointer-events-none absolute inset-x-0 top-0 flex justify-center items-center h-12 bg-gradient-to-b from-background to-transparent">
+        <button
+          onclick={() => navEl?.scrollTo({ top: 0, behavior: "smooth" })}
+          class="pointer-events-auto flex h-6 w-6 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
+          aria-label="Scroll to top"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+        </button>
+      </div>
+    {/if}
+
+    {#if canScrollDown}
+      <div class="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center items-center h-12 bg-gradient-to-t from-background to-transparent">
+        <button
+          onclick={() => navEl?.scrollTo({ top: navEl.scrollHeight, behavior: "smooth" })}
+          class="pointer-events-auto flex h-6 w-6 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
+          aria-label="Scroll to bottom"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Bottom bar (hidden when TopBar handles theme toggle) -->
+  {#if !hasSections}
+  <div class="flex shrink-0 items-center gap-2 border-t px-4 py-3 lg:px-6">
+    {#if locales?.length > 1}
+      <select
+        class="h-7 rounded-md border bg-background px-1.5 text-xs text-muted-foreground"
+        onchange={(e: Event & { currentTarget: HTMLSelectElement }) => {
+          const loc = e.currentTarget.value
+          const currentPath = window.location.pathname
+          const newPath = locale
+            ? currentPath.replace(`/docs/${locale}`, `/docs/${loc}`)
+            : currentPath.replace("/docs", `/docs/${loc}`)
+          window.location.href = newPath
+        }}
+      >
+        {#each locales as loc}
+          <option value={loc.code} selected={loc.code === locale}>
+            {loc.flag ? loc.flag + " " : ""}{loc.label}
+          </option>
+        {/each}
+      </select>
+    {/if}
+    <div class="flex-1"></div>
+    <button
+      onclick={toggleTheme}
+      class="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      aria-label="Toggle dark mode"
+    >
+      <svg class="h-3.5 w-3.5 dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="4"></circle>
+        <path d="M12 2v2"></path>
+        <path d="M12 20v2"></path>
+        <path d="m4.93 4.93 1.41 1.41"></path>
+        <path d="m17.66 17.66 1.41 1.41"></path>
+        <path d="M2 12h2"></path>
+        <path d="M20 12h2"></path>
+        <path d="m6.34 17.66-1.41 1.41"></path>
+        <path d="m19.07 4.93-1.41 1.41"></path>
+      </svg>
+      <svg class="hidden h-3.5 w-3.5 dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+      </svg>
+    </button>
+  </div>
+  {/if}
+
+</div>