@alliance-droid/svelte-docs-system 0.0.1

package/template-starter/src/lib/components/Callout.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * Callout component for documentation
+   * Displays alert boxes with different variants: info, warning, success, error
+   */
+
+  type Variant = 'info' | 'warning' | 'success' | 'error';
+
+  interface Props {
+    variant?: Variant;
+    title?: string;
+  }
+
+  let { variant = 'info', title, children }: Props & { children?: any } = $props();
+
+  const variantConfig: Record<Variant, { bgColor: string; borderColor: string; textColor: string; iconClass: string }> = {
+    info: {
+      bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+      borderColor: 'border-blue-200 dark:border-blue-700',
+      textColor: 'text-blue-900 dark:text-blue-100',
+      iconClass: 'fa-circle-info text-blue-500'
+    },
+    warning: {
+      bgColor: 'bg-amber-50 dark:bg-amber-900/20',
+      borderColor: 'border-amber-200 dark:border-amber-700',
+      textColor: 'text-amber-900 dark:text-amber-100',
+      iconClass: 'fa-triangle-exclamation text-amber-500'
+    },
+    success: {
+      bgColor: 'bg-green-50 dark:bg-green-900/20',
+      borderColor: 'border-green-200 dark:border-green-700',
+      textColor: 'text-green-900 dark:text-green-100',
+      iconClass: 'fa-circle-check text-green-500'
+    },
+    error: {
+      bgColor: 'bg-red-50 dark:bg-red-900/20',
+      borderColor: 'border-red-200 dark:border-red-700',
+      textColor: 'text-red-900 dark:text-red-100',
+      iconClass: 'fa-circle-xmark text-red-500'
+    }
+  };
+
+  const config = $derived(variantConfig[variant]);
+</script>
+
+<div class="my-4 rounded-lg border-l-4 p-4 {config.bgColor} {config.borderColor} {config.textColor}">
+  <div class="flex items-start gap-3">
+    <i class="fa-solid {config.iconClass} mt-0.5 flex-shrink-0"></i>
+    <div class="flex-1">
+      {#if title}
+        <h4 class="font-semibold">{title}</h4>
+      {/if}
+      <div class="text-sm">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

package/template-starter/src/lib/components/Callout.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Callout from './Callout.svelte';
+
+describe('Callout Component', () => {
+  it('renders with info variant by default', () => {
+    const { container } = render(Callout, {
+      props: {
+        children: () => ({ default: () => 'Info message' })
+      }
+    });
+
+    expect(container).toBeTruthy();
+    expect(container.querySelector('.bg-blue-50')).toBeTruthy();
+  });
+});

package/template-starter/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  /**
+   * CodeBlock component with copy button
+   * Shows code with optional language label
+   */
+
+  interface Props {
+    code: string;
+    language?: string;
+    filename?: string;
+  }
+
+  let { code, language = 'plaintext', filename }: Props = $props();
+
+  let copied = $state(false);
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(code);
+    copied = true;
+    setTimeout(() => {
+      copied = false;
+    }, 2000);
+  }
+</script>
+
+<div class="my-4 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900">
+  {#if filename}
+    <div class="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
+      <span class="text-sm font-mono font-semibold text-gray-700 dark:text-gray-300">{filename}</span>
+      {#if language}
+        <span class="text-xs text-gray-600 dark:text-gray-400">{language}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="relative">
+    <button
+      onclick={copyToClipboard}
+      class="absolute right-2 top-2 rounded bg-gray-300 px-3 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition-colors"
+    >
+      {#if copied}
+        <i class="fa-solid fa-check mr-1"></i>Copied!
+      {:else}
+        <i class="fa-solid fa-copy mr-1"></i>Copy
+      {/if}
+    </button>
+
+    <pre class="overflow-x-auto p-4 font-mono text-sm text-gray-800 dark:text-gray-100"><code>{code}</code></pre>
+  </div>
+</div>
+
+<style>
+  pre {
+    background-color: transparent;
+    padding: 1rem;
+    overflow-x: auto;
+  }
+
+  code {
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+    color: #1f2937;
+  }
+
+  :global(.dark) code {
+    color: #f3f4f6;
+  }
+</style>

package/template-starter/src/lib/components/CodeBlock.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import CodeBlock from './CodeBlock.svelte';
+
+describe('CodeBlock Component', () => {
+  it('renders code content', () => {
+    const code = 'console.log("Hello");';
+    const { container } = render(CodeBlock, { props: { code } });
+
+    expect(container.innerHTML).toContain('Hello');
+  });
+});

package/template-starter/src/lib/components/DocLayout.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { theme } from '$lib/stores/theme';
+  import Navbar from './Navbar.svelte';
+  import Sidebar from './Sidebar.svelte';
+  import Footer from './Footer.svelte';
+  import type { NavSection } from '$lib/stores/nav';
+
+  let {
+    title = 'Documentation',
+    logo = null,
+    sections = [] as NavSection[],
+    copyright = '© 2026 Documentation System',
+    footerLinks = [] as { label: string; href: string }[],
+    children,
+  }: {
+    title?: string;
+    logo?: string | null;
+    sections?: NavSection[];
+    copyright?: string;
+    footerLinks?: { label: string; href: string }[];
+    children: any;
+  } = $props();
+
+  let currentPath = $state('/');
+  let isMounted = $state(false);
+
+  onMount(() => {
+    // Initialize theme on mount
+    const storedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
+    if (storedTheme) {
+      theme.set(storedTheme);
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme.set('dark');
+    }
+
+    isMounted = true;
+
+    // Update currentPath
+    currentPath = window.location.pathname;
+
+    // Listen to route changes
+    const handleNavigation = () => {
+      currentPath = window.location.pathname;
+    };
+
+    window.addEventListener('popstate', handleNavigation);
+    return () => {
+      window.removeEventListener('popstate', handleNavigation);
+    };
+  });
+
+  function handleNavigate(path: string) {
+    currentPath = path;
+    window.history.pushState(null, '', path);
+  }
+
+  function handleLogoClick() {
+    handleNavigate('/');
+  }
+</script>
+
+<div class="min-h-screen flex flex-col bg-white dark:bg-claude-dark-bg text-claude-text dark:text-claude-dark-text transition-colors">
+  <!-- Navbar -->
+  <Navbar {title} {logo} onLogoClick={handleLogoClick} />
+
+  <!-- Main Content Area -->
+  <div class="flex flex-1 overflow-hidden">
+    <!-- Sidebar -->
+    <Sidebar {sections} {currentPath} onNavigate={handleNavigate} />
+
+    <!-- Main Content -->
+    <main class="flex-1 overflow-y-auto">
+      <div class="doc-container max-w-4xl mx-auto px-4 sm:px-6 py-8">
+        <article class="doc-content">
+          {@render children()}
+        </article>
+      </div>
+    </main>
+  </div>
+
+  <!-- Footer -->
+  <Footer {copyright} links={footerLinks} />
+</div>

package/template-starter/src/lib/components/Footer.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  let {
+    copyright = '© 2026 Documentation System',
+    links = [] as { label: string; href: string }[],
+  }: {
+    copyright?: string;
+    links?: { label: string; href: string }[];
+  } = $props();
+</script>
+
+<footer class="border-t border-claude-border dark:border-claude-dark-border bg-white dark:bg-claude-dark-bg-secondary mt-12">
+  <div class="doc-container px-4 sm:px-6 py-8">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+      <!-- About Section -->
+      <div>
+        <h3 class="font-semibold text-claude-text dark:text-claude-dark-text mb-4">About</h3>
+        <p class="text-sm text-claude-text-secondary dark:text-claude-dark-text-secondary">
+          Professional documentation system built with SvelteKit and Tailwind CSS.
+        </p>
+      </div>
+
+      <!-- Links Section -->
+      {#if links.length > 0}
+        <div>
+          <h3 class="font-semibold text-claude-text dark:text-claude-dark-text mb-4">Resources</h3>
+          <ul class="space-y-2">
+            {#each links as link (link.label)}
+              <li>
+                <a
+                  href={link.href}
+                  class="text-sm text-claude-accent dark:text-claude-dark-accent hover:underline transition-colors"
+                >
+                  {link.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      <!-- Social / Contact -->
+      <div>
+        <h3 class="font-semibold text-claude-text dark:text-claude-dark-text mb-4">Connect</h3>
+        <div class="flex gap-4">
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-claude-text-secondary dark:text-claude-dark-text-secondary hover:text-claude-accent dark:hover:text-claude-dark-accent transition-colors"
+            aria-label="GitHub"
+          >
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.01 12.01 0 0024 12c0-6.63-5.37-12-12-12z" />
+            </svg>
+          </a>
+          <a
+            href="https://twitter.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-claude-text-secondary dark:text-claude-dark-text-secondary hover:text-claude-accent dark:hover:text-claude-dark-accent transition-colors"
+            aria-label="Twitter"
+          >
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417a9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Copyright -->
+    <div class="border-t border-claude-border dark:border-claude-dark-border pt-8">
+      <p class="text-sm text-claude-text-secondary dark:text-claude-dark-text-secondary text-center">
+        {copyright}
+      </p>
+    </div>
+  </div>
+</footer>

package/template-starter/src/lib/components/Image.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  /**
+   * Image component with caption support
+   * Provides responsive images with optional captions and alt text
+   */
+
+  interface Props {
+    src: string;
+    alt: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+    zoomable?: boolean;
+  }
+
+  let { src, alt, caption, width, height, zoomable = true }: Props = $props();
+
+  let isZoomed = $state(false);
+
+  function handleZoom() {
+    if (zoomable) {
+      isZoomed = !isZoomed;
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isZoomed) {
+      isZoomed = false;
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<figure class="my-6 flex flex-col items-center gap-2">
+  <div class="relative w-full max-w-4xl overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+    <!-- Zoomed overlay -->
+    {#if isZoomed}
+      <div
+        class="fixed inset-0 z-50 flex cursor-pointer items-center justify-center bg-black/80 backdrop-blur"
+        onclick={() => (isZoomed = false)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            isZoomed = false;
+          }
+        }}
+        role="button"
+        tabindex="0"
+      >
+        <img
+          {src}
+          {alt}
+          class="max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+          {width}
+          {height}
+        />
+      </div>
+    {/if}
+
+    <!-- Regular image wrapper for clickability -->
+    <button
+      onclick={handleZoom}
+      class="w-full border-0 bg-transparent p-0"
+      aria-label={zoomable ? 'Click to zoom image' : ''}
+      type="button"
+    >
+      <img
+        {src}
+        {alt}
+        {width}
+        {height}
+        class="w-full object-cover {zoomable ? 'cursor-zoom-in hover:opacity-90' : ''} transition-opacity"
+      />
+    </button>
+  </div>
+
+  {#if caption}
+    <figcaption class="text-center text-sm text-gray-600 dark:text-gray-400">
+      {caption}
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  figure {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  figcaption {
+    margin-top: 0.5rem;
+    text-align: center;
+    font-size: 0.875rem;
+    color: #4b5563;
+  }
+
+  :global(.dark) figcaption {
+    color: #9ca3af;
+  }
+</style>

package/template-starter/src/lib/components/Image.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Image from './Image.svelte';
+
+describe('Image Component', () => {
+  it('renders image with src and alt', () => {
+    const { container } = render(Image, {
+      props: { src: 'test.jpg', alt: 'Test image' }
+    });
+
+    const img = container.querySelector('img');
+    expect(img?.getAttribute('src')).toBe('test.jpg');
+    expect(img?.getAttribute('alt')).toBe('Test image');
+  });
+});

package/template-starter/src/lib/components/Navbar.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { theme } from '$lib/stores/theme';
+  import { sidebarOpen } from '$lib/stores/nav';
+  import { version } from '$lib/stores/version';
+  import { i18n } from '$lib/stores/i18n';
+  import { onMount } from 'svelte';
+
+  let { 
+    title = 'Docs',
+    logo = null,
+    onLogoClick = () => {},
+    onVersionChange = (ver: string) => {},
+    onLanguageChange = (lang: string) => {},
+  }: {
+    title?: string;
+    logo?: string | null;
+    onLogoClick?: () => void;
+    onVersionChange?: (version: string) => void;
+    onLanguageChange?: (language: string) => void;
+  } = $props();
+
+  let isDark = $derived($theme === 'dark');
+  let currentVersion = $derived.by(() => $version.current);
+  let currentLanguage = $derived.by(() => $i18n.currentLanguage);
+  let availableVersions = $derived.by(() => $version.availableVersions);
+  let availableLanguages = $derived.by(() => $i18n.availableLanguages);
+  let isMounted = $state(false);
+
+  onMount(() => {
+    isMounted = true;
+  });
+
+  function toggleTheme() {
+    theme.toggle();
+  }
+
+  function toggleSidebar() {
+    sidebarOpen.update(v => !v);
+  }
+
+  function handleVersionChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    const newVersion = select.value;
+    version.setVersion(newVersion);
+    onVersionChange(newVersion);
+  }
+
+  function handleLanguageChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    const newLanguage = select.value;
+    i18n.setLanguage(newLanguage as any);
+    onLanguageChange(newLanguage);
+  }
+</script>
+
+<nav class="sticky top-0 z-40 border-b border-claude-border dark:border-claude-dark-border bg-white dark:bg-claude-dark-bg-secondary backdrop-blur-sm">
+  <div class="doc-container flex items-center justify-between h-16 px-4 sm:px-6">
+    <!-- Logo / Brand -->
+    <button
+      onclick={onLogoClick}
+      class="flex items-center gap-2 font-semibold text-lg text-claude-text dark:text-claude-dark-text hover:text-claude-accent dark:hover:text-claude-dark-accent transition-colors"
+      aria-label="Home"
+    >
+      {#if logo}
+        <img src={logo} alt="Logo" class="h-8 w-8" />
+      {/if}
+      <span>{title}</span>
+    </button>
+
+    <!-- Mobile Menu Button -->
+    <button
+      onclick={toggleSidebar}
+      class="md:hidden p-2 hover:bg-claude-bg-secondary dark:hover:bg-claude-dark-bg rounded-lg transition-colors"
+      aria-label="Toggle menu"
+    >
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+
+    <!-- Right Section: Language, Version, Theme Toggle -->
+    <div class="hidden md:flex items-center gap-4">
+      <!-- Language Switcher -->
+      {#if isMounted && availableLanguages.length > 0}
+        <select
+          value={currentLanguage}
+          onchange={handleLanguageChange}
+          class="px-3 py-2 rounded-lg bg-claude-bg-secondary dark:bg-claude-dark-bg border border-claude-border dark:border-claude-dark-border text-claude-text dark:text-claude-dark-text text-sm cursor-pointer hover:border-claude-accent dark:hover:border-claude-dark-accent transition-colors"
+          aria-label="Select language"
+        >
+          {#each availableLanguages as lang (lang.code)}
+            <option value={lang.code}>
+              {lang.label}
+            </option>
+          {/each}
+        </select>
+      {/if}
+
+      <!-- Version Switcher -->
+      {#if isMounted && availableVersions.length > 0}
+        <select
+          value={currentVersion}
+          onchange={handleVersionChange}
+          class="px-3 py-2 rounded-lg bg-claude-bg-secondary dark:bg-claude-dark-bg border border-claude-border dark:border-claude-dark-border text-claude-text dark:text-claude-dark-text text-sm cursor-pointer hover:border-claude-accent dark:hover:border-claude-dark-accent transition-colors"
+          aria-label="Select version"
+        >
+          {#each availableVersions as ver (ver.version)}
+            <option value={ver.version}>
+              {ver.label}
+            </option>
+          {/each}
+        </select>
+      {/if}
+
+      <!-- Dark Mode Toggle -->
+      <button
+        onclick={toggleTheme}
+        class="p-2 rounded-lg bg-claude-bg-secondary dark:bg-claude-dark-bg border border-claude-border dark:border-claude-dark-border hover:border-claude-accent dark:hover:border-claude-dark-accent transition-colors"
+        aria-label="Toggle dark mode"
+      >
+        {#if isDark}
+          <!-- Moon Icon -->
+          <svg class="w-5 h-5 text-claude-accent dark:text-claude-dark-accent" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+          </svg>
+        {:else}
+          <!-- Sun Icon -->
+          <svg class="w-5 h-5 text-claude-accent" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4.323 2.323a1 1 0 011.414 0l.707.707a1 1 0 11-1.414 1.414l-.707-.707a1 1 0 010-1.414zm2.828 2.828a1 1 0 011.414 0l.707.707a1 1 0 11-1.414 1.414l-.707-.707a1 1 0 010-1.414zm2.828 2.828a1 1 0 011.414 0l.707.707a1 1 0 11-1.414 1.414l-.707-.707a1 1 0 010-1.414zM10 11a1 1 0 110 2 1 1 0 010-2zm4.464-1.465a1 1 0 111.414-1.414l.707.707a1 1 0 11-1.414 1.414l-.707-.707zm2.828 2.828a1 1 0 111.414-1.414l.707.707a1 1 0 11-1.414 1.414l-.707-.707zm2.828 2.828a1 1 0 111.414-1.414l.707.707a1 1 0 11-1.414 1.414l-.707-.707zM10 18a1 1 0 110-2 1 1 0 010 2zm-4.464-1.465a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707zm-2.828-2.828a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707zm-2.828-2.828a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707z" clip-rule="evenodd" />
+          </svg>
+        {/if}
+      </button>
+    </div>
+  </div>
+</nav>
+
+<style>
+  :global(html.dark nav) {
+    background-color: #0f0f0f;
+  }
+</style>