npm - @axle-lang/ui - Versions diffs - 0.1.0 - Mend

@axle-lang/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/LICENSE +21 -0
package/README.md +70 -0
package/dist/app.css +337 -0
package/dist/components/Seo.svelte +38 -0
package/dist/components/Seo.svelte.d.ts +8 -0
package/dist/components/atoms/Badge.svelte +11 -0
package/dist/components/atoms/Badge.svelte.d.ts +8 -0
package/dist/components/atoms/Button.svelte +32 -0
package/dist/components/atoms/Button.svelte.d.ts +12 -0
package/dist/components/atoms/Callout.svelte +11 -0
package/dist/components/atoms/Callout.svelte.d.ts +8 -0
package/dist/components/atoms/CodeChip.svelte +11 -0
package/dist/components/atoms/CodeChip.svelte.d.ts +8 -0
package/dist/components/atoms/Eyebrow.svelte +9 -0
package/dist/components/atoms/Eyebrow.svelte.d.ts +8 -0
package/dist/components/atoms/HandNote.svelte +15 -0
package/dist/components/atoms/HandNote.svelte.d.ts +9 -0
package/dist/components/atoms/Icon.svelte +40 -0
package/dist/components/atoms/Icon.svelte.d.ts +11 -0
package/dist/components/atoms/Kbd.svelte +11 -0
package/dist/components/atoms/Kbd.svelte.d.ts +8 -0
package/dist/components/atoms/Logo.svelte +18 -0
package/dist/components/atoms/Logo.svelte.d.ts +6 -0
package/dist/components/atoms/SearchButton.svelte +23 -0
package/dist/components/atoms/SearchButton.svelte.d.ts +8 -0
package/dist/components/atoms/Tag.svelte +21 -0
package/dist/components/atoms/Tag.svelte.d.ts +10 -0
package/dist/components/atoms/ThemeToggle.svelte +30 -0
package/dist/components/atoms/ThemeToggle.svelte.d.ts +6 -0
package/dist/components/code/Code.svelte +22 -0
package/dist/components/code/Code.svelte.d.ts +9 -0
package/dist/components/code/CodeWindow.svelte +42 -0
package/dist/components/code/CodeWindow.svelte.d.ts +13 -0
package/dist/components/code/CopyCommand.svelte +28 -0
package/dist/components/code/CopyCommand.svelte.d.ts +7 -0
package/dist/components/landing/BenchExplorer.svelte +157 -0
package/dist/components/landing/BenchExplorer.svelte.d.ts +7 -0
package/dist/components/landing/CTASection.svelte +12 -0
package/dist/components/landing/CTASection.svelte.d.ts +11 -0
package/dist/components/landing/ComparisonPanel.svelte +75 -0
package/dist/components/landing/ComparisonPanel.svelte.d.ts +19 -0
package/dist/components/landing/FeatureCard.svelte +19 -0
package/dist/components/landing/FeatureCard.svelte.d.ts +10 -0
package/dist/components/landing/FeatureGrid.svelte +26 -0
package/dist/components/landing/FeatureGrid.svelte.d.ts +13 -0
package/dist/components/landing/Hero.svelte +23 -0
package/dist/components/landing/Hero.svelte.d.ts +14 -0
package/dist/components/landing/RecipeDeck.svelte +137 -0
package/dist/components/landing/RecipeDeck.svelte.d.ts +19 -0
package/dist/components/layout/DocLayout.svelte +36 -0
package/dist/components/layout/DocLayout.svelte.d.ts +21 -0
package/dist/components/layout/PageShell.svelte +15 -0
package/dist/components/layout/PageShell.svelte.d.ts +7 -0
package/dist/components/molecules/Card.svelte +18 -0
package/dist/components/molecules/Card.svelte.d.ts +9 -0
package/dist/components/molecules/DataTable.svelte +43 -0
package/dist/components/molecules/DataTable.svelte.d.ts +12 -0
package/dist/components/molecules/PageHeading.svelte +23 -0
package/dist/components/molecules/PageHeading.svelte.d.ts +10 -0
package/dist/components/molecules/Section.svelte +20 -0
package/dist/components/molecules/Section.svelte.d.ts +10 -0
package/dist/components/molecules/SectionHeading.svelte +27 -0
package/dist/components/molecules/SectionHeading.svelte.d.ts +10 -0
package/dist/components/nav/DocHeader.svelte +44 -0
package/dist/components/nav/DocHeader.svelte.d.ts +7 -0
package/dist/components/nav/Footer.svelte +67 -0
package/dist/components/nav/Footer.svelte.d.ts +3 -0
package/dist/components/nav/Header.svelte +55 -0
package/dist/components/nav/Header.svelte.d.ts +6 -0
package/dist/components/nav/PrevNext.svelte +27 -0
package/dist/components/nav/PrevNext.svelte.d.ts +13 -0
package/dist/components/nav/RightRail.svelte +30 -0
package/dist/components/nav/RightRail.svelte.d.ts +11 -0
package/dist/components/nav/Sidebar.svelte +33 -0
package/dist/components/nav/Sidebar.svelte.d.ts +18 -0
package/dist/components/reference/MethodDetail.svelte +72 -0
package/dist/components/reference/MethodDetail.svelte.d.ts +7 -0
package/dist/components/reference/MethodSummary.svelte +41 -0
package/dist/components/reference/MethodSummary.svelte.d.ts +8 -0
package/dist/i18n/index.d.ts +47 -0
package/dist/i18n/index.js +23 -0
package/dist/i18n/messages/en.d.ts +43 -0
package/dist/i18n/messages/en.js +50 -0
package/dist/index.d.ts +47 -0
package/dist/index.js +54 -0
package/dist/site/site.d.ts +45 -0
package/dist/site/site.js +66 -0
package/dist/utils/cn.d.ts +6 -0
package/dist/utils/cn.js +9 -0
package/dist/utils/icons.d.ts +26 -0
package/dist/utils/icons.js +55 -0
package/dist/utils/tokenizer.d.ts +12 -0
package/dist/utils/tokenizer.js +181 -0
package/dist/utils/types.d.ts +50 -0
package/dist/utils/types.js +4 -0
package/dist/utils/variants.d.ts +20 -0
package/dist/utils/variants.js +50 -0
package/package.json +77 -0

package/dist/components/atoms/Kbd.svelte ADDED Viewed

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  /** Keyboard key cap. */
+  let { class: klass = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+<kbd
+  class="rounded border border-line bg-canvas px-1.5 py-0.5 text-[11px] font-sans text-muted {klass}"
+>
+  {@render children?.()}
+</kbd>

package/dist/components/atoms/Kbd.svelte.d.ts ADDED Viewed

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

package/dist/components/atoms/Logo.svelte ADDED Viewed

@@ -0,0 +1,18 @@
+<script lang="ts">
+  /** The Axle axle/wordmark glyph. */
+  let { size = 22 }: { size?: number } = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2" />
+  <circle cx="18" cy="12" r="3" stroke="currentColor" stroke-width="2" />
+  <line
+    x1="9"
+    y1="12"
+    x2="15"
+    y2="12"
+    stroke="var(--accent)"
+    stroke-width="2.6"
+    stroke-linecap="round"
+  />
+</svg>

package/dist/components/atoms/Logo.svelte.d.ts ADDED Viewed

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

package/dist/components/atoms/SearchButton.svelte ADDED Viewed

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Icon from './Icon.svelte';
+  import Kbd from './Kbd.svelte';
+  /**
+   * Search trigger button (wire `onclick` to your command palette).
+   */
+  let {
+    label = 'Search',
+    onclick,
+    class: klass = ''
+  }: { label?: string; onclick?: () => void; class?: string } = $props();
+</script>
+<button
+  type="button"
+  {onclick}
+  class="flex items-center gap-2 rounded-lg border border-line bg-surface pl-3 pr-2 h-9 text-[13px] text-faint hover:border-faint transition-colors {klass}"
+>
+  <Icon name="search" />
+  <span>{label}</span>
+  <Kbd class="ml-auto">⌘K</Kbd>
+</button>

package/dist/components/atoms/SearchButton.svelte.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label?: string;
+    onclick?: () => void;
+    class?: string;
+};
+declare const SearchButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchButton = ReturnType<typeof SearchButton>;
+export default SearchButton;

package/dist/components/atoms/Tag.svelte ADDED Viewed

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { IconName } from '../../utils/icons.js';
+  import Icon from './Icon.svelte';
+  /**
+   * Small uppercase accent pill with an optional leading icon (the
+   * "Package" / "Reference" / "Benchmarks" kind labels).
+   */
+  let {
+    icon = '',
+    class: klass = '',
+    children
+  }: { icon?: IconName | ''; class?: string; children?: Snippet } = $props();
+</script>
+<div
+  class="inline-flex items-center gap-1.5 rounded-md bg-accent-soft text-accent px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wider {klass}"
+>
+  {#if icon}<Icon name={icon} size={13} />{/if}{@render children?.()}
+</div>

package/dist/components/atoms/Tag.svelte.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../../utils/icons.js';
+type $$ComponentProps = {
+    icon?: IconName | '';
+    class?: string;
+    children?: Snippet;
+};
+declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/atoms/ThemeToggle.svelte ADDED Viewed

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Icon from './Icon.svelte';
+  /** Toggles the `dark` class on <html> and persists the choice. */
+  let { class: klass = '' }: { class?: string } = $props();
+  let dark = $state(false);
+  $effect(() => {
+    // init from storage / system once on mount
+    const saved = localStorage.getItem('axle-theme');
+    dark = saved ? saved === 'dark' : document.documentElement.classList.contains('dark');
+    document.documentElement.classList.toggle('dark', dark);
+  });
+  function toggle() {
+    dark = !dark;
+    document.documentElement.classList.toggle('dark', dark);
+    localStorage.setItem('axle-theme', dark ? 'dark' : 'light');
+  }
+</script>
+<button
+  type="button"
+  onclick={toggle}
+  aria-label="Toggle theme"
+  class="h-9 w-9 grid place-items-center rounded-lg border border-line bg-surface text-muted hover:text-fg transition-colors {klass}"
+>
+  <Icon name="theme" />
+</button>

package/dist/components/atoms/ThemeToggle.svelte.d.ts ADDED Viewed

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

package/dist/components/code/Code.svelte ADDED Viewed

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { highlight } from '../../utils/tokenizer.js';
+  /** Syntax-highlighted code. Renders inside a <pre><code>. */
+  let {
+    code = '',
+    fontSize = 13,
+    lineHeight = 22,
+    class: klass = ''
+  }: {
+    code?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    class?: string;
+  } = $props();
+  const html = $derived(highlight(code));
+</script>
+<pre class="m-0 font-mono overflow-x-auto axle-scroll {klass}" style="white-space:pre"><code
+    class="font-mono block"
+    style="font-size:{fontSize}px;line-height:{lineHeight}px">{@html html}</code
+  ></pre>

package/dist/components/code/Code.svelte.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    code?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    class?: string;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/code/CodeWindow.svelte ADDED Viewed

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  /**
+   * Dark code window with macOS traffic lights and a filename tab.
+   * Always uses the dark syntax palette (.dark-code).
+   */
+  let {
+    file = '',
+    meta = '',
+    lights = true,
+    class: klass = '',
+    header,
+    children,
+    footer
+  }: {
+    file?: string;
+    meta?: string;
+    lights?: boolean;
+    class?: string;
+    header?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+  } = $props();
+</script>
+<div
+  class="rounded-xl border border-black/10 dark:border-white/10 bg-codebg dark-code overflow-hidden {klass}"
+>
+  <div class="flex items-center gap-2 px-4 h-10 border-b border-white/[0.08]">
+    {#if lights}
+      <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>
+    {/if}
+    {#if file}<span class="ml-2 text-[12px] text-white/45 font-mono">{file}</span>{/if}
+    {@render header?.()}
+    {#if meta}<span class="ml-auto text-[11px] text-white/30 font-mono">{meta}</span>{/if}
+  </div>
+  <div class="p-5">{@render children?.()}</div>
+  {@render footer?.()}
+</div>

package/dist/components/code/CodeWindow.svelte.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    file?: string;
+    meta?: string;
+    lights?: boolean;
+    class?: string;
+    header?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+};
+declare const CodeWindow: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeWindow = ReturnType<typeof CodeWindow>;
+export default CodeWindow;

package/dist/components/code/CopyCommand.svelte ADDED Viewed

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Icon from '../atoms/Icon.svelte';
+  /** Copyable command row (e.g. install script). */
+  let { command = '', class: klass = '' }: { command?: string; class?: string } = $props();
+  let copied = $state(false);
+  function copy() {
+    navigator.clipboard?.writeText(command);
+    copied = true;
+    setTimeout(() => (copied = false), 1400);
+  }
+</script>
+<div
+  class="flex items-center gap-3 rounded-xl border border-line bg-surface pl-4 pr-2 h-12 font-mono text-[13px] {klass}"
+>
+  <span class="text-accent select-none">$</span>
+  <span class="text-fg truncate flex-1">{command}</span>
+  <button
+    type="button"
+    onclick={copy}
+    class="shrink-0 flex items-center gap-1.5 rounded-md px-2.5 h-8 text-[12px] font-sans text-muted hover:text-fg hover:bg-surface2 transition-colors"
+  >
+    <Icon name={copied ? 'check' : 'copy'} size={14} class={copied ? 'text-accent' : ''} />
+    {copied ? 'Copied' : 'Copy'}
+  </button>
+</div>

package/dist/components/code/CopyCommand.svelte.d.ts ADDED Viewed

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

package/dist/components/landing/BenchExplorer.svelte ADDED Viewed

@@ -0,0 +1,157 @@
+<script lang="ts">
+  // Full benchmark view (à la `axle bench`). Programs grouped by category;
+  // each shows a metric table (columns grouped Run / Compile / Output,
+  // best value per column highlighted, rows sorted fastest-run first) and
+  // the per-language source in a collapsible block.
+  import Code from '../code/Code.svelte';
+  import Card from '../molecules/Card.svelte';
+  import { cn } from '../../utils/cn.js';
+  import { tab } from '../../utils/variants.js';
+  import { t } from 'svelte-i18n';
+  import { K } from '../../i18n/index.js';
+  import type { BenchData, BenchResult, Metric } from '../../utils/types.js';
+  let { data }: { data: BenchData } = $props();
+  let selected = $state<Record<string, string>>({});
+  const pick = (name: string, sources: Record<string, string>) =>
+    selected[name] ?? Object.keys(sources)[0];
+  // Consecutive metrics sharing a `group` form a spanning header cell.
+  const groups = $derived.by(() => {
+    const out: { group: string; metrics: Metric[] }[] = [];
+    for (const m of data.metrics) {
+      const last = out[out.length - 1];
+      if (last && last.group === m.group) last.metrics.push(m);
+      else out.push({ group: m.group, metrics: [m] });
+    }
+    return out;
+  });
+  const startsGroup = (i: number) => i > 0 && data.metrics[i - 1].group !== data.metrics[i].group;
+  function fmt(v: number | string, unit: string) {
+    const n = Number(v) || 0;
+    if (unit === 'B') return n >= 1024 ? (n / 1024).toFixed(0) + ' KB' : n + ' B';
+    if (unit === 'KB') return n >= 1024 ? (n / 1024).toFixed(1) + ' MB' : n + ' KB';
+    if (unit === 'ms') return n >= 1000 ? (n / 1000).toFixed(2) + ' s' : n + ' ms';
+    return String(n);
+  }
+  const best = (results: BenchResult[], key: string) =>
+    Math.min(...results.map((r) => Number(r[key]) || Infinity));
+  const sorted = (results: BenchResult[]) =>
+    [...results].sort((a, b) => (Number(a.runMs) || 0) - (Number(b.runMs) || 0));
+  const slug = (s: string) =>
+    s
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)/g, '');
+</script>
+{#if data.categories.length > 1}
+  <nav
+    class="sticky top-16 z-10 -mx-2 mb-4 flex flex-wrap gap-1.5 border-b border-line bg-canvas/85 px-2 py-2 backdrop-blur"
+  >
+    {#each data.categories as cat}
+      <a
+        href={'#cat-' + slug(cat.name)}
+        class="flex h-7 items-center rounded-md border border-line bg-surface pl-2.5 text-[12px] text-muted hover:text-fg"
+        >{cat.name}
+        <span class="ml-2.5 flex h-full items-center border-l border-line px-2 text-faint"
+          >{cat.programs.length}</span
+        ></a
+      >
+    {/each}
+  </nav>
+{/if}
+{#each data.categories as cat}
+  <div id={'cat-' + slug(cat.name)} class="mt-14 first:mt-0 scroll-mt-24">
+    <h2
+      class="text-[12px] font-semibold uppercase tracking-[0.1em] text-faint border-b border-line pb-2"
+    >
+      {cat.name}
+    </h2>
+    {#each cat.programs as p}
+      <section class="mt-7">
+        <h3 class="text-[18px] font-semibold tracking-tight font-mono">{p.name}</h3>
+        {#if p.blurb}<p class="mt-1 text-[14px] text-muted">{p.blurb}</p>{/if}
+        <Card class="mt-4 overflow-x-auto axle-scroll">
+          <table class="w-full text-[13px] border-separate border-spacing-0">
+            <thead>
+              <tr class="bg-surface text-[11px] uppercase tracking-wider text-faint">
+                <th rowspan="2" class="text-left font-semibold py-2 px-4 align-bottom"
+                  >{$t(K.bench.variant)}</th
+                >
+                {#each groups as g}
+                  <th
+                    colspan={g.metrics.length}
+                    class="font-semibold py-2 px-4 text-center border-l border-line"
+                  >
+                    {g.group}
+                  </th>
+                {/each}
+              </tr>
+              <tr class="bg-surface text-[11px] uppercase tracking-wider text-faint">
+                {#each data.metrics as m, i}
+                  <th
+                    class={cn(
+                      'font-medium py-1.5 px-4 text-right whitespace-nowrap',
+                      startsGroup(i) && 'border-l border-line'
+                    )}
+                  >
+                    {m.label}
+                  </th>
+                {/each}
+              </tr>
+            </thead>
+            <tbody>
+              {#each sorted(p.results) as r}
+                <tr class="hover:bg-surface/60 transition-colors">
+                  <td class="py-2 px-4 border-t border-line font-mono whitespace-nowrap">
+                    {r.lang} <span class="text-faint">{r.opt}</span>
+                  </td>
+                  {#each data.metrics as m, i}
+                    {@const isBest = (Number(r[m.key]) || 0) === best(p.results, m.key)}
+                    <td
+                      class={cn(
+                        'py-2 px-4 border-t border-line text-right font-mono whitespace-nowrap',
+                        startsGroup(i) && 'border-l border-line',
+                        isBest ? 'text-accent font-semibold' : 'text-muted'
+                      )}>{fmt(r[m.key], m.unit)}</td
+                    >
+                  {/each}
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </Card>
+        <details class="group mt-3">
+          <summary
+            class="cursor-pointer select-none text-[13px] text-muted hover:text-fg inline-flex items-center gap-1.5"
+          >
+            <span class="transition-transform group-open:rotate-90 text-faint">▸</span>
+            {$t(K.bench.source)}
+          </summary>
+          <Card tone="surface" class="mt-2 p-3">
+            <div class="flex flex-wrap gap-1">
+              {#each Object.keys(p.sources) as l}
+                <button
+                  type="button"
+                  onclick={() => (selected = { ...selected, [p.name]: l })}
+                  class={tab({ active: pick(p.name, p.sources) === l, size: 'sm', tone: 'canvas' })}
+                  >{l}</button
+                >
+              {/each}
+            </div>
+            <div class="mt-3">
+              <Code code={p.sources[pick(p.name, p.sources)]} fontSize={12.5} lineHeight={20} />
+            </div>
+          </Card>
+        </details>
+      </section>
+    {/each}
+  </div>
+{/each}

package/dist/components/landing/BenchExplorer.svelte.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { BenchData } from '../../utils/types.js';
+type $$ComponentProps = {
+    data: BenchData;
+};
+declare const BenchExplorer: import("svelte").Component<$$ComponentProps, {}, "">;
+type BenchExplorer = ReturnType<typeof BenchExplorer>;
+export default BenchExplorer;

package/dist/components/landing/CTASection.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script lang="ts">
+  /**
+   * Closing CTA shell — centered. All content (kicker, heading, buttons) in children.
+   */
+  import type { Snippet } from 'svelte';
+  let { class: klass = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+<section class="max-w-[1180px] mx-auto px-6 py-24 text-center {klass}">
+  {@render children?.()}
+</section>

package/dist/components/landing/CTASection.svelte.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+   * Closing CTA shell — centered. All content (kicker, heading, buttons) in children.
+   */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    class?: string;
+    children?: Snippet;
+};
+declare const CTASection: import("svelte").Component<$$ComponentProps, {}, "">;
+type CTASection = ReturnType<typeof CTASection>;
+export default CTASection;

package/dist/components/landing/ComparisonPanel.svelte ADDED Viewed

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import Code from '../code/Code.svelte';
+  import Section from '../molecules/Section.svelte';
+  import SectionHeading from '../molecules/SectionHeading.svelte';
+  import Card from '../molecules/Card.svelte';
+  import { tab, segmented } from '../../utils/variants.js';
+  /**
+   * "Side by side" — pick a task (scenario) × a language. Both selections persist
+   * independently. Data comes from the route (parsed from content/scenarios/*.md).
+   */
+  interface Scenario {
+    label: string;
+    file: string;
+    axle: string;
+    langs: Record<string, { src: string; note: string }>;
+  }
+  let { scenarios = [] }: { scenarios?: Scenario[] } = $props();
+  let si = $state(0);
+  let li = $state(0);
+  const scenario = $derived(scenarios[si]);
+  const langKeys = $derived(scenario ? Object.keys(scenario.langs) : []);
+  const lang = $derived(langKeys[Math.min(li, langKeys.length - 1)]);
+  const ref = $derived((scenario && lang && scenario.langs[lang]) || { src: '', note: '' });
+</script>
+<Section bordered>
+  <SectionHeading eyebrow="Side by side" title="The same job. Far less ceremony.">
+    Pick a task, then pick the language you would otherwise reach for. Same outcome — Axle just asks
+    less of you to get there.
+  </SectionHeading>
+  <div class="mt-8 flex flex-wrap gap-2">
+    {#each scenarios as s, i}
+      <button type="button" onclick={() => (si = i)} class={segmented({ active: i === si })}
+        >{s.label}</button
+      >
+    {/each}
+  </div>
+  <Card class="mt-5 overflow-hidden">
+    <div class="grid md:grid-cols-2">
+      <div class="bg-surface p-5 md:border-r border-line">
+        <div class="flex items-center gap-2 mb-3.5">
+          <span
+            class="text-[11px] font-semibold uppercase tracking-wider text-accent rounded bg-accent-soft px-2 py-0.5"
+            >Axle</span
+          >
+          <span class="text-[12px] text-faint font-mono">{scenario?.file}</span>
+        </div>
+        <Code code={scenario?.axle ?? ''} fontSize={13} lineHeight={21} />
+      </div>
+      <div class="bg-canvas p-5 border-t md:border-t-0 border-line">
+        <div class="flex items-center gap-1 mb-3.5">
+          {#each langKeys as l, i}
+            <button
+              type="button"
+              onclick={() => (li = i)}
+              class={tab({ active: l === lang, size: 'sm' })}>{l}</button
+            >
+          {/each}
+        </div>
+        <Code code={ref.src} fontSize={13} lineHeight={21} />
+      </div>
+    </div>
+    <div class="px-5 py-3 border-t border-line flex items-start gap-2.5 text-[13.5px] text-muted">
+      <span class="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-accent"></span>
+      <span class="leading-relaxed">{ref.note}</span>
+    </div>
+  </Card>
+</Section>

package/dist/components/landing/ComparisonPanel.svelte.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * "Side by side" — pick a task (scenario) × a language. Both selections persist
+ * independently. Data comes from the route (parsed from content/scenarios/*.md).
+ */
+interface Scenario {
+    label: string;
+    file: string;
+    axle: string;
+    langs: Record<string, {
+        src: string;
+        note: string;
+    }>;
+}
+type $$ComponentProps = {
+    scenarios?: Scenario[];
+};
+declare const ComparisonPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComparisonPanel = ReturnType<typeof ComparisonPanel>;
+export default ComparisonPanel;

package/dist/components/landing/FeatureCard.svelte ADDED Viewed

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Icon from '../atoms/Icon.svelte';
+  import type { Snippet } from 'svelte';
+  import type { IconName } from '../../utils/icons.js';
+  /**
+   * One feature cell. Description goes in children.
+   */
+  let { icon, title, children }: { icon?: IconName; title: string; children?: Snippet } = $props();
+</script>
+<div class="bg-canvas p-7 flex flex-col gap-3 hover:bg-surface transition-colors">
+  {#if icon}
+    <div class="h-9 w-9 grid place-items-center rounded-lg bg-accent-soft text-accent">
+      <Icon name={icon} size={18} />
+    </div>
+  {/if}
+  <h3 class="text-[16px] font-semibold tracking-tight mt-1">{title}</h3>
+  <p class="text-[14px] leading-relaxed text-muted">{@render children?.()}</p>
+</div>

package/dist/components/landing/FeatureCard.svelte.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../../utils/icons.js';
+type $$ComponentProps = {
+    icon?: IconName;
+    title: string;
+    children?: Snippet;
+};
+declare const FeatureCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/components/landing/FeatureGrid.svelte ADDED Viewed

@@ -0,0 +1,26 @@
+<script lang="ts">
+  /**
+   * Feature grid shell. `header` snippet = eyebrow + heading; `children` = the
+   * <FeatureCard> cells. Route composes the cards.
+   */
+  import type { Snippet } from 'svelte';
+  let {
+    header,
+    class: klass = '',
+    children
+  }: { header?: Snippet; class?: string; children?: Snippet } = $props();
+</script>
+<section class="border-t border-line bg-surface {klass}">
+  <div class="max-w-[1180px] mx-auto px-6 py-20">
+    {#if header}
+      <div class="max-w-[620px]">{@render header()}</div>
+    {/if}
+    <div
+      class="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-px bg-line rounded-2xl overflow-hidden border border-line"
+    >
+      {@render children?.()}
+    </div>
+  </div>
+</section>

package/dist/components/landing/FeatureGrid.svelte.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+   * Feature grid shell. `header` snippet = eyebrow + heading; `children` = the
+   * <FeatureCard> cells. Route composes the cards.
+   */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    header?: Snippet;
+    class?: string;
+    children?: Snippet;
+};
+declare const FeatureGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type FeatureGrid = ReturnType<typeof FeatureGrid>;
+export default FeatureGrid;