@axle-lang/ui 0.1.0

package/dist/components/landing/Hero.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  /**
+   * Hero shell. Left column = `children` (kicker, headline, lead, actions).
+   * Right column = the `media` snippet (e.g. <RecipeDeck />). The route owns
+   * all the actual content.
+   */
+  import type { Snippet } from 'svelte';
+
+  let {
+    media,
+    class: klass = '',
+    children
+  }: { media?: Snippet; class?: string; children?: Snippet } = $props();
+</script>
+
+<section
+  class="max-w-[1180px] mx-auto px-6 pt-16 pb-12 grid lg:grid-cols-[1fr_minmax(0,560px)] gap-12 lg:gap-16 items-center {klass}"
+>
+  <div>{@render children?.()}</div>
+  {#if media}
+    <div class="lg:pl-4">{@render media()}</div>
+  {/if}
+</section>

package/dist/components/landing/Hero.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+   * Hero shell. Left column = `children` (kicker, headline, lead, actions).
+   * Right column = the `media` snippet (e.g. <RecipeDeck />). The route owns
+   * all the actual content.
+   */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    media?: Snippet;
+    class?: string;
+    children?: Snippet;
+};
+declare const Hero: import("svelte").Component<$$ComponentProps, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/components/landing/RecipeDeck.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import Code from '../code/Code.svelte';
+  import Icon from '../atoms/Icon.svelte';
+  import { cn } from '../../utils/cn.js';
+
+  /**
+   * The scattered Console-card stack. Auto-advances; pauses on hover.
+   * Click a card / dot / arrow to bring a recipe to the front.
+   * Data comes from the route (parsed from content/recipes/*.md).
+   */
+  interface Recipe {
+    file: string;
+    title: string;
+    note: string;
+    src: string;
+  }
+
+  let {
+    recipes = [],
+    interval = 5000,
+    class: klass = ''
+  }: { recipes?: Recipe[]; interval?: number; class?: string } = $props();
+
+  let index = $state(0);
+  let paused = $state(false);
+  let timer: ReturnType<typeof setTimeout>;
+
+  const scatter = [
+    'translate(-26px,10px) rotate(-6deg) scale(.94)',
+    'translate(22px,15px) rotate(5deg) scale(.95)',
+    'translate(-12px,30px) rotate(-3deg) scale(.93)',
+    'translate(28px,4px) rotate(7deg) scale(.94)',
+    'translate(6px,36px) rotate(-8deg) scale(.92)',
+    'translate(-20px,24px) rotate(3deg) scale(.95)'
+  ];
+  const scatterZ = [22, 18, 26, 14, 20, 16];
+
+  const active = $derived(recipes[index]);
+
+  function schedule() {
+    clearTimeout(timer);
+    if (paused) return;
+    timer = setTimeout(() => go(index + 1), interval);
+  }
+  function go(n: number) {
+    const len = recipes.length;
+    if (len === 0) return;
+    index = ((n % len) + len) % len;
+    schedule();
+  }
+  $effect(() => {
+    // Read both synchronously so the effect re-arms when either changes.
+    const _deps = [index, paused];
+    schedule();
+    return () => clearTimeout(timer);
+  });
+
+  function transformFor(i: number) {
+    return i === index
+      ? 'translate(0px,-10px) rotate(-0.5deg) scale(1.03)'
+      : scatter[i % scatter.length];
+  }
+  function zFor(i: number) {
+    return i === index ? 60 : scatterZ[i % scatterZ.length];
+  }
+</script>
+
+<div
+  class={klass}
+  onmouseenter={() => (paused = true)}
+  onmouseleave={() => (paused = false)}
+  role="group"
+>
+  <div class="relative h-[372px]">
+    {#each recipes as r, i}
+      <button
+        type="button"
+        onclick={() => go(i)}
+        class="absolute inset-x-0 top-1 text-left rounded-xl border border-white/10 bg-codebg dark-code overflow-hidden shadow-2xl shadow-black/40 cursor-pointer transition-all duration-500"
+        style="transform:{transformFor(i)};z-index:{zFor(i)};opacity:{i === index
+          ? 1
+          : 0.84};transition-timing-function:cubic-bezier(.2,.7,.2,1)"
+      >
+        <div class="flex items-center gap-2 px-4 h-10 border-b border-white/[0.08]">
+          <span class="h-2.5 w-2.5 rounded-full bg-[#ff5f57]"></span>
+          <span class="h-2.5 w-2.5 rounded-full bg-[#febc2e]"></span>
+          <span class="h-2.5 w-2.5 rounded-full bg-[#28c840]"></span>
+          <span class="ml-2 text-[12px] text-white/45 font-mono">{r.file}</span>
+        </div>
+        <div class="px-5 py-4 h-[268px] overflow-hidden">
+          <Code code={r.src} fontSize={12.5} lineHeight={19} />
+        </div>
+      </button>
+    {/each}
+  </div>
+
+  <!-- Fixed height so a 1- vs 2-line note never reflows the sections below. -->
+  <div class="mt-6 h-[76px] overflow-hidden">
+    {#if active}
+      <div class="text-[15px] font-semibold tracking-tight truncate">{active.title}</div>
+      <div class="mt-1.5 flex items-start gap-2 text-[13px] text-muted">
+        <span class="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-accent"></span>
+        <span class="leading-relaxed line-clamp-2">{active.note}</span>
+      </div>
+    {/if}
+  </div>
+
+  <div class="mt-4 flex items-center gap-3">
+    <button
+      type="button"
+      aria-label="Previous recipe"
+      onclick={() => go(index - 1)}
+      class="h-9 w-9 grid place-items-center rounded-lg border border-line text-muted hover:text-fg hover:bg-surface transition-colors shrink-0"
+      ><Icon name="prev" /></button
+    >
+    <div class="flex-1 flex justify-center items-center gap-2">
+      {#each recipes as _, i}
+        <button
+          type="button"
+          aria-label="Go to recipe {i + 1}"
+          onclick={() => go(i)}
+          class={cn(
+            'h-1.5 rounded-full transition-all',
+            i === index ? 'w-5 bg-accent' : 'w-1.5 bg-fg/20 hover:bg-fg/40'
+          )}
+        ></button>
+      {/each}
+    </div>
+    <button
+      type="button"
+      aria-label="Next recipe"
+      onclick={() => go(index + 1)}
+      class="h-9 w-9 grid place-items-center rounded-lg border border-line text-muted hover:text-fg hover:bg-surface transition-colors shrink-0"
+      ><Icon name="next" /></button
+    >
+  </div>
+</div>

package/dist/components/landing/RecipeDeck.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The scattered Console-card stack. Auto-advances; pauses on hover.
+ * Click a card / dot / arrow to bring a recipe to the front.
+ * Data comes from the route (parsed from content/recipes/*.md).
+ */
+interface Recipe {
+    file: string;
+    title: string;
+    note: string;
+    src: string;
+}
+type $$ComponentProps = {
+    recipes?: Recipe[];
+    interval?: number;
+    class?: string;
+};
+declare const RecipeDeck: import("svelte").Component<$$ComponentProps, {}, "">;
+type RecipeDeck = ReturnType<typeof RecipeDeck>;
+export default RecipeDeck;

package/dist/components/layout/DocLayout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import DocHeader from '../nav/DocHeader.svelte';
+  import Sidebar from '../nav/Sidebar.svelte';
+  import RightRail from '../nav/RightRail.svelte';
+  import PrevNext from '../nav/PrevNext.svelte';
+
+  // Full docs shell: header + sidebar + main content + right TOC + prev/next.
+  let {
+    crumb = '',
+    toc = [],
+    prev,
+    next,
+    children
+  }: {
+    crumb?: string;
+    toc?: { id: string; label: string; sub?: boolean }[];
+    prev?: { label: string; href: string };
+    next?: { label: string; href: string };
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class="min-h-screen flex flex-col">
+  <DocHeader {crumb} />
+  <div class="flex-1 w-full max-w-[1400px] mx-auto flex items-start">
+    <Sidebar />
+    <main class="flex-1 min-w-0 px-6 md:px-12 py-10 max-w-[860px]">
+      <article>
+        {@render children?.()}
+        <PrevNext {prev} {next} />
+      </article>
+    </main>
+    <RightRail items={toc} />
+  </div>
+</div>

package/dist/components/layout/DocLayout.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    crumb?: string;
+    toc?: {
+        id: string;
+        label: string;
+        sub?: boolean;
+    }[];
+    prev?: {
+        label: string;
+        href: string;
+    };
+    next?: {
+        label: string;
+        href: string;
+    };
+    children?: Snippet;
+};
+declare const DocLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocLayout = ReturnType<typeof DocLayout>;
+export default DocLayout;

package/dist/components/layout/PageShell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  // Marketing page chrome: header + content + footer on the base canvas.
+  // Used by every landing-side page so the wrapper lives in one place.
+  import Header from '../nav/Header.svelte';
+  import Footer from '../nav/Footer.svelte';
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<div class="font-sans antialiased text-fg bg-canvas min-h-screen">
+  <Header />
+  {@render children?.()}
+  <Footer />
+</div>

package/dist/components/layout/PageShell.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const PageShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageShell = ReturnType<typeof PageShell>;
+export default PageShell;

package/dist/components/molecules/Card.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn.js';
+
+  /**
+   * Bordered, rounded container. `tone` picks the surface (the design
+   * `.card` / `.card-muted` primitives); pass extra layout via `class`.
+   */
+  let {
+    tone = 'canvas',
+    class: klass = '',
+    children
+  }: { tone?: 'canvas' | 'surface'; class?: string; children?: Snippet } = $props();
+</script>
+
+<div class={cn(tone === 'surface' ? 'card-muted' : 'card', klass)}>
+  {@render children?.()}
+</div>

package/dist/components/molecules/Card.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    tone?: 'canvas' | 'surface';
+    class?: string;
+    children?: Snippet;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/molecules/DataTable.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  interface CodeCell {
+    code?: boolean;
+    text: string;
+  }
+  type Cell = string | CodeCell;
+
+  /**
+   * Generic doc table. Pass `head` (column labels) and `rows` (array of cell arrays).
+   * A cell can be a string, or { code:true, text } to render monospace/accent.
+   */
+  let { head = [], rows = [] }: { head?: string[]; rows?: Cell[][] } = $props();
+
+  const isCode = (c: Cell): boolean => typeof c === 'object' && !!c?.code;
+  const text = (c: Cell): string => (typeof c === 'object' ? c.text : c);
+</script>
+
+<div class="overflow-x-auto axle-scroll rounded-xl border border-line">
+  <table class="w-full text-[13.5px] border-separate border-spacing-0">
+    {#if head.length}
+      <thead>
+        <tr class="bg-surface text-left">
+          {#each head as h}
+            <th class="font-semibold py-2.5 px-4 text-fg whitespace-nowrap">{h}</th>
+          {/each}
+        </tr>
+      </thead>
+    {/if}
+    <tbody>
+      {#each rows as row}
+        <tr>
+          {#each row as cell}
+            <td
+              class="py-2.5 px-4 border-t border-line {isCode(cell)
+                ? 'font-mono text-accent text-[12.5px] whitespace-nowrap'
+                : 'text-muted'}">{text(cell)}</td
+            >
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

package/dist/components/molecules/DataTable.svelte.d.ts

@@ -0,0 +1,12 @@
+interface CodeCell {
+    code?: boolean;
+    text: string;
+}
+type Cell = string | CodeCell;
+type $$ComponentProps = {
+    head?: string[];
+    rows?: Cell[][];
+};
+declare const DataTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/components/molecules/PageHeading.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Doc page title block: optional breadcrumb + h1 + lead paragraph.
+   */
+  let {
+    crumb = '',
+    leaf = '',
+    title,
+    children
+  }: { crumb?: string; leaf?: string; title: string; children?: Snippet } = $props();
+</script>
+
+{#if crumb}
+  <div class="text-[13px] text-muted flex items-center gap-2">
+    {crumb} <span class="text-line">/</span> <span class="text-fg">{leaf}</span>
+  </div>
+{/if}
+<h1 class="mt-3 text-[34px] font-semibold tracking-[-0.02em] leading-tight">{title}</h1>
+{#if children}
+  <p class="mt-4 text-[17px] leading-[1.65] text-muted">{@render children()}</p>
+{/if}

package/dist/components/molecules/PageHeading.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    crumb?: string;
+    leaf?: string;
+    title: string;
+    children?: Snippet;
+};
+declare const PageHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeading = ReturnType<typeof PageHeading>;
+export default PageHeading;

package/dist/components/molecules/Section.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Generic section shell — max-width container with consistent padding.
+   * Put all content (eyebrow, heading, body) inside as children.
+   */
+  let {
+    muted = false,
+    bordered = false,
+    class: klass = '',
+    children
+  }: { muted?: boolean; bordered?: boolean; class?: string; children?: Snippet } = $props();
+</script>
+
+<section class="{bordered ? 'border-t border-line ' : ''}{muted ? 'bg-surface ' : ''}{klass}">
+  <div class="max-w-[1180px] mx-auto px-6 py-20">
+    {@render children?.()}
+  </div>
+</section>

package/dist/components/molecules/Section.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    muted?: boolean;
+    bordered?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/molecules/SectionHeading.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Eyebrow from '../atoms/Eyebrow.svelte';
+  import { cn } from '../../utils/cn.js';
+
+  /**
+   * Section heading block: eyebrow + h2 + optional lead (children).
+   */
+  let {
+    eyebrow = '',
+    title = '',
+    class: klass = '',
+    children
+  }: { eyebrow?: string; title?: string; class?: string; children?: Snippet } = $props();
+</script>
+
+<div class={cn('max-w-[700px]', klass)}>
+  {#if eyebrow}<Eyebrow>{eyebrow}</Eyebrow>{/if}
+  {#if title}
+    <h2 class="text-[clamp(27px,3.6vw,40px)] font-semibold tracking-[-0.02em] mt-3 leading-[1.1]">
+      {title}
+    </h2>
+  {/if}
+  {#if children}
+    <p class="mt-4 text-[16px] leading-relaxed text-muted">{@render children()}</p>
+  {/if}
+</div>

package/dist/components/molecules/SectionHeading.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    eyebrow?: string;
+    title?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const SectionHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type SectionHeading = ReturnType<typeof SectionHeading>;
+export default SectionHeading;

package/dist/components/nav/DocHeader.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Logo from '../atoms/Logo.svelte';
+  import Badge from '../atoms/Badge.svelte';
+  import Icon from '../atoms/Icon.svelte';
+  import SearchButton from '../atoms/SearchButton.svelte';
+  import ThemeToggle from '../atoms/ThemeToggle.svelte';
+  import { getSite } from '../../site/site.js';
+  import { t } from 'svelte-i18n';
+  import { K } from '../../i18n/index.js';
+
+  // Docs top bar (slimmer than the landing header). Version + repo link
+  // come from the site context (injected by the app layout).
+  let { crumb = '', onsearch }: { crumb?: string; onsearch?: () => void } = $props();
+
+  const { route, version } = getSite();
+</script>
+
+<header class="sticky top-0 z-[70] h-14 border-b border-line bg-canvas/85 backdrop-blur-md">
+  <div class="h-full px-5 flex items-center gap-4">
+    <a href={route('home')} class="flex items-center gap-2.5 select-none shrink-0 text-fg">
+      <Logo size={20} />
+      <span class="text-[15.5px] font-semibold tracking-tight">Axle</span>
+      <Badge class="ml-0.5 px-1.5 text-[10.5px] text-faint">{version}</Badge>
+    </a>
+
+    {#if crumb}
+      <span class="hidden md:flex items-center gap-2 text-[13px] text-muted min-w-0">
+        <span class="text-line">/</span>
+        <span class="truncate">{crumb}</span>
+      </span>
+    {/if}
+
+    <div class="ml-auto flex items-center gap-2">
+      <SearchButton class="hidden sm:flex w-[200px]" label={$t(K.search.docs)} onclick={onsearch} />
+      <ThemeToggle />
+      <a
+        href={route('repo')}
+        aria-label="Repository"
+        class="hidden sm:grid h-9 w-9 place-items-center rounded-lg border border-line bg-surface text-muted hover:text-fg transition-colors"
+        ><Icon name="git" /></a
+      >
+    </div>
+  </div>
+</header>

package/dist/components/nav/DocHeader.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    crumb?: string;
+    onsearch?: () => void;
+};
+declare const DocHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocHeader = ReturnType<typeof DocHeader>;
+export default DocHeader;

package/dist/components/nav/Footer.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import Logo from '../atoms/Logo.svelte';
+  import { getSite } from '../../site/site.js';
+  import { t } from 'svelte-i18n';
+  import { K } from '../../i18n/index.js';
+
+  const { route } = getSite();
+  const cols = $derived([
+    {
+      title: $t(K.footer.docs),
+      links: [
+        [$t(K.footer.link.guide), route('guide')],
+        [$t(K.footer.link.reference), route('reference')],
+        [$t(K.footer.link.recipes), route('recipes')]
+      ]
+    },
+    {
+      title: $t(K.footer.project),
+      links: [
+        [$t(K.footer.link.repo), route('repo')],
+        [$t(K.footer.link.roadmap), route('roadmap')],
+        [$t(K.footer.link.issues), route('issues')]
+      ]
+    },
+    {
+      title: $t(K.footer.language),
+      links: [
+        [$t(K.footer.link.memory), route('memory')],
+        [$t(K.footer.link.simd), route('simd')],
+        [$t(K.footer.link.ffi), route('ffi')]
+      ]
+    }
+  ]);
+</script>
+
+<footer class="border-t border-line bg-surface">
+  <div
+    class="max-w-[1180px] mx-auto px-6 py-14 grid sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10"
+  >
+    <div>
+      <span class="flex items-center gap-2.5 text-fg">
+        <Logo size={20} /><span class="text-[16px] font-semibold tracking-tight">Axle</span>
+      </span>
+      <p class="mt-4 text-[13px] leading-relaxed text-muted max-w-[34ch]">
+        {$t(K.footer.tagline)}
+      </p>
+    </div>
+    {#each cols as col}
+      <div class="flex flex-col gap-2.5 text-[13.5px]">
+        <span class="text-[12px] font-semibold uppercase tracking-wider text-faint mb-1"
+          >{col.title}</span
+        >
+        {#each col.links as [label, href]}
+          <a {href} class="text-muted hover:text-fg">{label}</a>
+        {/each}
+      </div>
+    {/each}
+  </div>
+  <div class="border-t border-line">
+    <div
+      class="max-w-[1180px] mx-auto px-6 h-14 flex items-center justify-between text-[12.5px] text-faint"
+    >
+      <span>© 2026 Axle Language</span>
+      <span class="font-mono">{$t(K.footer.note)}</span>
+    </div>
+  </div>
+</footer>

package/dist/components/nav/Footer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Footer: import("svelte").Component<Record<string, never>, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/nav/Header.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Logo from '../atoms/Logo.svelte';
+  import Badge from '../atoms/Badge.svelte';
+  import Button from '../atoms/Button.svelte';
+  import Icon from '../atoms/Icon.svelte';
+  import SearchButton from '../atoms/SearchButton.svelte';
+  import ThemeToggle from '../atoms/ThemeToggle.svelte';
+  import { getSite } from '../../site/site.js';
+  import { t } from 'svelte-i18n';
+  import { K } from '../../i18n/index.js';
+
+  // Landing top bar. Version + links come from the site context; labels
+  // from i18n ($t). Nothing is hardcoded at the call site.
+  let { onsearch }: { onsearch?: () => void } = $props();
+
+  const { route, version } = getSite();
+  const links = $derived([
+    { label: $t(K.nav.guide), href: route('guide') },
+    { label: $t(K.nav.reference), href: route('reference') },
+    { label: $t(K.nav.benchmarks), href: route('benchmarks') },
+    { label: $t(K.nav.recipes), href: route('recipes') }
+  ]);
+</script>
+
+<header class="sticky top-0 z-[70] border-b border-line bg-canvas/80 backdrop-blur-md">
+  <div class="max-w-[1180px] mx-auto px-6 h-16 flex items-center gap-6">
+    <a href={route('home')} class="flex items-center gap-2.5 select-none text-fg">
+      <Logo />
+      <span class="text-[17px] font-semibold tracking-tight">Axle</span>
+      <Badge class="ml-0.5">{version}</Badge>
+    </a>
+
+    <nav class="hidden md:flex items-center gap-0.5 ml-2 text-[14px]">
+      {#each links as link}
+        <a
+          href={link.href}
+          class="px-3 py-2 rounded-md text-muted hover:text-fg hover:bg-surface transition-colors"
+          >{link.label}</a
+        >
+      {/each}
+    </nav>
+
+    <div class="ml-auto flex items-center gap-2">
+      <SearchButton class="hidden sm:flex" onclick={onsearch} />
+      <ThemeToggle />
+      <a
+        href={route('repo')}
+        aria-label="Repository"
+        class="hidden sm:grid h-9 w-9 place-items-center rounded-lg border border-line bg-surface text-muted hover:text-fg transition-colors"
+        ><Icon name="git" /></a
+      >
+      <Button href={route('guide')} size="sm">{$t(K.nav.getStarted)}</Button>
+    </div>
+  </div>
+</header>

package/dist/components/nav/Header.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onsearch?: () => void;
+};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;