specra 0.1.13 → 0.2.0

package/dist/components/docs/CodeBlock.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { Copy, Check } from 'lucide-svelte';
+
+  interface Props {
+    code: string;
+    language: string;
+    filename?: string;
+  }
+
+  let { code, language, filename }: Props = $props();
+
+  let copied = $state(false);
+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  function handleCopy() {
+    navigator.clipboard.writeText(code).then(() => {
+      copied = true;
+      if (copyTimeout) clearTimeout(copyTimeout);
+      copyTimeout = setTimeout(() => {
+        copied = false;
+      }, 2000);
+    });
+  }
+
+  // Basic syntax tokenizer matching the React version's pattern-based approach
+  interface Token {
+    type: string;
+    value: string;
+  }
+
+  function tokenizeLine(line: string): Token[] {
+    const tokens: Token[] = [];
+    let currentPos = 0;
+
+    const patterns: Array<{ type: string; regex: RegExp }> = [
+      { type: 'comment', regex: /(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)/ },
+      { type: 'string', regex: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/ },
+      {
+        type: 'keyword',
+        regex:
+          /\b(const|let|var|function|return|if|else|for|while|do|break|continue|switch|case|default|import|export|from|as|class|extends|implements|interface|type|enum|namespace|async|await|try|catch|finally|throw|new|this|super|static|public|private|protected|readonly|abstract|void|null|undefined|true|false|typeof|instanceof|delete|in|of)\b/,
+      },
+      { type: 'operator', regex: /([+\-*/%=<>!&|^~?:]+)/ },
+      { type: 'number', regex: /\b(0x[a-fA-F0-9]+|0b[01]+|\d+\.?\d*(?:e[+-]?\d+)?)\b/ },
+      { type: 'function', regex: /\b([a-zA-Z_$][\w$]*)\s*(?=\()/ },
+      { type: 'property', regex: /\.([a-zA-Z_$][\w$]*)/ },
+      { type: 'punctuation', regex: /([{}[\]();,])/ },
+    ];
+
+    while (currentPos < line.length) {
+      let matched = false;
+
+      for (const { type, regex } of patterns) {
+        const match = line.slice(currentPos).match(regex);
+        if (match && match.index === 0) {
+          tokens.push({ type, value: match[0] });
+          currentPos += match[0].length;
+          matched = true;
+          break;
+        }
+      }
+
+      if (!matched) {
+        const nextSpecialChar = line.slice(currentPos).search(/["'`/\w.+\-*/%=<>!&|^~?:;,()[\]{}#]/);
+        if (nextSpecialChar === -1) {
+          tokens.push({ type: 'text', value: line.slice(currentPos) });
+          break;
+        } else if (nextSpecialChar > 0) {
+          tokens.push({ type: 'text', value: line.slice(currentPos, currentPos + nextSpecialChar) });
+          currentPos += nextSpecialChar;
+        } else {
+          tokens.push({ type: 'text', value: line[currentPos] });
+          currentPos++;
+        }
+      }
+    }
+
+    return tokens;
+  }
+
+  let lines = $derived(code.split('\n'));
+</script>
+
+<div class="relative group my-2">
+  <!-- Header - always visible -->
+  <div class="bg-muted/50 dark:bg-muted/30 px-4 py-2 rounded-t-xl border border-b-0 border-border/50 flex items-center justify-between">
+    <!-- Left section: Safari-style dots + filename -->
+    <div class="flex items-center gap-3">
+      <!-- Safari-style window controls -->
+      <div class="flex items-center gap-1.5">
+        <div class="w-3 h-3 rounded-full bg-red-500/80 dark:bg-red-500/60"></div>
+        <div class="w-3 h-3 rounded-full bg-yellow-500/80 dark:bg-yellow-500/60"></div>
+        <div class="w-3 h-3 rounded-full bg-green-500/80 dark:bg-green-500/60"></div>
+      </div>
+      <!-- Filename or "Code" -->
+      <span class="text-xs font-mono text-foreground">{filename || 'Code'}</span>
+    </div>
+
+    <!-- Right section: Language + Copy button -->
+    <div class="flex items-center gap-2">
+      <span class="text-xs text-muted-foreground/60 font-mono uppercase tracking-wide">{language}</span>
+      <button
+        onclick={handleCopy}
+        class="p-1.5 rounded-md hover:bg-muted/50 transition-colors"
+        aria-label="Copy code"
+      >
+        {#if copied}
+          <Check class="h-4 w-4 text-green-400" />
+        {:else}
+          <Copy class="h-4 w-4 text-muted-foreground" />
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  <!-- Code content -->
+  <div class="bg-gray-200/50 dark:bg-[#0d1117] rounded-b-xl overflow-x-auto border border-border/50">
+    <pre class="p-2 text-[13px] font-mono leading-relaxed text-gray-800 dark:text-gray-200"><code class="table w-full">{#each lines as line, i}{@const isDeletion = line.startsWith('-')}{@const isAddition = line.startsWith('+')}{@const isDiff = isDeletion || isAddition}{@const diffBgClass = isDeletion ? 'bg-red-500/5 dark:bg-red-500/10' : isAddition ? 'bg-green-500/5 dark:bg-green-500/10' : ''}{@const diffMarkerClass = isDeletion ? 'text-red-600 dark:text-red-400' : isAddition ? 'text-green-600 dark:text-green-400' : ''}{@const tokens = tokenizeLine(line)}<div class="table-row {diffBgClass}"><span class="table-cell pr-4 text-right select-none text-muted-foreground/40 w-8 align-top">{i + 1}</span><span class="table-cell align-top">{#if tokens.length === 0}&nbsp;{:else}{#each tokens as token, j}{#if j === 0 && isDiff && token.value.length > 0 && (token.value[0] === '+' || token.value[0] === '-')}<span class="{diffMarkerClass} font-bold">{token.value[0]}</span>{#if token.value.length > 1}<span class="token-{token.type}">{token.value.slice(1)}</span>{/if}{:else}<span class="token-{token.type}">{token.value}</span>{/if}{/each}{/if}</span></div>{/each}</code></pre>
+  </div>
+</div>
+
+<style>
+  .token-keyword {
+    color: #cf222e;
+  }
+  :global(.dark) .token-keyword {
+    color: #ff7b72;
+  }
+  .token-string {
+    color: #0a3069;
+  }
+  :global(.dark) .token-string {
+    color: #a5d6ff;
+  }
+  .token-comment {
+    color: #6e7781;
+    font-style: italic;
+  }
+  :global(.dark) .token-comment {
+    color: #8b949e;
+  }
+  .token-number {
+    color: #0550ae;
+  }
+  :global(.dark) .token-number {
+    color: #79c0ff;
+  }
+  .token-function {
+    color: #8250df;
+  }
+  :global(.dark) .token-function {
+    color: #d2a8ff;
+  }
+  .token-operator {
+    color: #cf222e;
+  }
+  :global(.dark) .token-operator {
+    color: #ff7b72;
+  }
+  .token-property {
+    color: #0550ae;
+  }
+  :global(.dark) .token-property {
+    color: #79c0ff;
+  }
+  .token-punctuation {
+    color: #24292f;
+  }
+  :global(.dark) .token-punctuation {
+    color: #c9d1d9;
+  }
+</style>

package/dist/components/docs/CodeBlock.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    code: string;
+    language: string;
+    filename?: string;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/docs/Column.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    span?: 1 | 2 | 3 | 4;
+    children?: Snippet;
+  }
+
+  let { span = 1, children }: Props = $props();
+
+  const spanClasses: Record<number, string> = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+  };
+
+  let spanClass = $derived(spanClasses[span] || spanClasses[1]);
+</script>
+
+<div class={spanClass}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/docs/Column.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    span?: 1 | 2 | 3 | 4;
+    children?: Snippet;
+}
+declare const Column: import("svelte").Component<Props, {}, "">;
+type Column = ReturnType<typeof Column>;
+export default Column;

package/dist/components/docs/Columns.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    cols?: {
+      sm?: 1 | 2 | 3 | 4;
+      md?: 1 | 2 | 3 | 4;
+      lg?: 1 | 2 | 3 | 4;
+      xl?: 1 | 2 | 3 | 4;
+    };
+    children?: Snippet;
+  }
+
+  let { cols = { sm: 1, md: 2, lg: 3 }, children }: Props = $props();
+
+  const colClasses: Record<number, string> = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+  };
+
+  // Build responsive class string matching React original
+  // sm is the base, md/lg/xl get responsive prefixes
+  let gridClasses = $derived(() => {
+    const smClass = cols.sm ? colClasses[cols.sm] : 'grid-cols-1';
+    const mdClass = cols.md ? `md:${colClasses[cols.md]}` : '';
+    const lgClass = cols.lg ? `lg:${colClasses[cols.lg]}` : '';
+    const xlClass = cols.xl ? `xl:${colClasses[cols.xl]}` : '';
+    return `${smClass} ${mdClass} ${lgClass} ${xlClass}`.trim();
+  });
+</script>
+
+<div class="grid {gridClasses()} gap-4 my-6">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/docs/Columns.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    cols?: {
+        sm?: 1 | 2 | 3 | 4;
+        md?: 1 | 2 | 3 | 4;
+        lg?: 1 | 2 | 3 | 4;
+        xl?: 1 | 2 | 3 | 4;
+    };
+    children?: Snippet;
+}
+declare const Columns: import("svelte").Component<Props, {}, "">;
+type Columns = ReturnType<typeof Columns>;
+export default Columns;

package/dist/components/docs/DevModeBadge.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Wrench } from 'lucide-svelte';
+  import { browser } from '$app/environment';
+  import { dev } from '$app/environment';
+</script>
+
+{#if dev}
+  <div
+    class="fixed bottom-4 left-4 z-50 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-orange-500/90 text-white text-xs font-medium shadow-lg backdrop-blur-sm"
+    title="Development mode"
+  >
+    <Wrench class="h-3 w-3" />
+    <span>Dev</span>
+  </div>
+{/if}

package/dist/components/docs/DevModeBadge.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DevModeBadge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DevModeBadge = InstanceType<typeof DevModeBadge>;
+export default DevModeBadge;

package/dist/components/docs/DocBadge.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+  interface Props {
+    variant?: BadgeVariant;
+    children?: Snippet;
+  }
+
+  let { variant = 'default', children }: Props = $props();
+
+  const variants: Record<BadgeVariant, string> = {
+    default: 'bg-muted text-foreground border-border',
+    success: 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20',
+    warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20',
+    error: 'bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20',
+    info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20',
+  };
+
+  let classes = $derived(variants[variant] || variants.default);
+</script>
+
+<span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {classes}">
+  {#if children}
+    {@render children()}
+  {/if}
+</span>

package/dist/components/docs/DocBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    variant?: BadgeVariant;
+    children?: Snippet;
+}
+declare const DocBadge: import("svelte").Component<Props, {}, "">;
+type DocBadge = ReturnType<typeof DocBadge>;
+export default DocBadge;

package/dist/components/docs/DocLayout.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { dev } from '$app/environment';
+  import { ExternalLink, FileEdit } from 'lucide-svelte';
+  import DocNavigation from './DocNavigation.svelte';
+  import Breadcrumb from './Breadcrumb.svelte';
+  import DocMetadata from './DocMetadata.svelte';
+  import DraftBadge from './DraftBadge.svelte';
+  import DocTags from './DocTags.svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+  import type { Snippet } from 'svelte';
+
+  interface DocMeta {
+    title: string;
+    description?: string;
+    draft?: boolean;
+    reading_time?: number;
+    last_updated?: string;
+    locale?: string;
+    authors?: Array<{ id: string; name?: string }>;
+    tags?: string[];
+    [key: string]: any;
+  }
+
+  interface NavDoc {
+    title: string;
+    slug: string;
+  }
+
+  interface Props {
+    meta: DocMeta;
+    previousDoc?: NavDoc;
+    nextDoc?: NavDoc;
+    version: string;
+    slug: string;
+    config: SpecraConfig;
+    children: Snippet;
+  }
+
+  let { meta, previousDoc, nextDoc, version, slug, config, children }: Props = $props();
+
+  let isDevelopment = $derived(dev);
+
+  // Build edit URL if configured
+  let editUrl = $derived(
+    config.features?.editUrl && typeof config.features.editUrl === 'string'
+      ? `${config.features.editUrl}/${version}/${slug}.mdx`
+      : null
+  );
+</script>
+
+<article class="flex-1 min-w-0">
+  {#if config.navigation?.showBreadcrumbs}
+    <Breadcrumb {version} {slug} title={meta.title} />
+  {/if}
+
+  {#if isDevelopment && meta.draft}
+    <DraftBadge />
+  {/if}
+
+  <div class="mb-8">
+    <h1 class="text-4xl font-bold tracking-tight mb-3 text-foreground">{meta.title}</h1>
+    {#if meta.description}
+      <p class="text-lg text-muted-foreground leading-relaxed">{meta.description}</p>
+    {/if}
+  </div>
+
+  <DocMetadata {meta} {config} />
+
+  <div class="prose prose-slate dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-semibold prose-h1:text-4xl prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-4 prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-3 prose-p:text-base prose-p:leading-7 prose-p:text-muted-foreground prose-p:mb-4 prose-a:font-normal prose-a:transition-all prose-code:text-primary prose-code:bg-muted/50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-[13px] prose-code:font-mono prose-code:border prose-code:border-border/50 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-transparent prose-pre:p-0 prose-ul:list-disc prose-ul:list-inside prose-ul:space-y-2 prose-ul:mb-4 prose-ol:list-decimal prose-ol:list-inside prose-ol:space-y-2 prose-ol:mb-4 prose-li:leading-7 prose-li:text-muted-foreground prose-strong:text-foreground prose-strong:font-semibold">
+    {@render children()}
+  </div>
+
+  {#if config.features?.showTags && meta.tags && meta.tags.length > 0}
+    <DocTags tags={meta.tags} />
+  {/if}
+
+  {#if editUrl || config.social?.github}
+    <div class="mt-12 pt-6 border-t border-border flex items-center justify-between">
+      {#if editUrl}
+        <a
+          href={editUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <FileEdit class="h-4 w-4" />
+          Edit this page
+        </a>
+      {:else}
+        <div></div>
+      {/if}
+      {#if config.social?.github}
+        <a
+          href="{config.social.github}/issues/new"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ExternalLink class="h-4 w-4" />
+          Report an issue
+        </a>
+      {/if}
+    </div>
+  {/if}
+
+  <DocNavigation {previousDoc} {nextDoc} {version} />
+</article>

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

@@ -0,0 +1,32 @@
+import type { SpecraConfig } from '../../config.types.js';
+import type { Snippet } from 'svelte';
+interface DocMeta {
+    title: string;
+    description?: string;
+    draft?: boolean;
+    reading_time?: number;
+    last_updated?: string;
+    locale?: string;
+    authors?: Array<{
+        id: string;
+        name?: string;
+    }>;
+    tags?: string[];
+    [key: string]: any;
+}
+interface NavDoc {
+    title: string;
+    slug: string;
+}
+interface Props {
+    meta: DocMeta;
+    previousDoc?: NavDoc;
+    nextDoc?: NavDoc;
+    version: string;
+    slug: string;
+    config: SpecraConfig;
+    children: Snippet;
+}
+declare const DocLayout: import("svelte").Component<Props, {}, "">;
+type DocLayout = ReturnType<typeof DocLayout>;
+export default DocLayout;

package/dist/components/docs/DocLoading.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  // DocLoading: Loading skeleton placeholder for documentation content
+</script>
+
+<div class="animate-pulse space-y-6 w-full max-w-3xl">
+  <!-- Title skeleton -->
+  <div class="space-y-3">
+    <div class="h-8 bg-muted rounded-md w-3/4"></div>
+    <div class="h-4 bg-muted rounded-md w-1/2"></div>
+  </div>
+
+  <!-- Metadata skeleton -->
+  <div class="flex items-center gap-4">
+    <div class="h-4 bg-muted rounded-md w-24"></div>
+    <div class="h-4 bg-muted rounded-md w-32"></div>
+  </div>
+
+  <!-- Content skeleton -->
+  <div class="space-y-4">
+    <div class="space-y-2">
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-5/6"></div>
+    </div>
+
+    <!-- Heading skeleton -->
+    <div class="h-6 bg-muted rounded-md w-2/5 mt-8"></div>
+
+    <div class="space-y-2">
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-3/4"></div>
+    </div>
+
+    <!-- Code block skeleton -->
+    <div class="h-32 bg-muted rounded-lg w-full"></div>
+
+    <div class="space-y-2">
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-2/3"></div>
+    </div>
+
+    <!-- Another heading skeleton -->
+    <div class="h-6 bg-muted rounded-md w-1/3 mt-8"></div>
+
+    <div class="space-y-2">
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+      <div class="h-4 bg-muted rounded-md w-4/5"></div>
+      <div class="h-4 bg-muted rounded-md w-full"></div>
+    </div>
+  </div>
+</div>

package/dist/components/docs/DocLoading.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DocLoading: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DocLoading = InstanceType<typeof DocLoading>;
+export default DocLoading;

package/dist/components/docs/DocMetadata.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { Clock, Calendar, User } from 'lucide-svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+
+  interface DocMeta {
+    readingTime?: number;
+    lastUpdated?: string;
+    authors?: Array<string | { name: string; avatar?: string; url?: string }>;
+    [key: string]: unknown;
+  }
+
+  interface Props {
+    meta: DocMeta;
+    config: SpecraConfig;
+  }
+
+  let { meta, config }: Props = $props();
+
+  const showReadingTime = $derived(config.features?.showReadingTime !== false && meta.readingTime);
+  const showLastUpdated = $derived(config.features?.showLastUpdated !== false && meta.lastUpdated);
+  const showAuthors = $derived(config.features?.showAuthors && meta.authors && meta.authors.length > 0);
+
+  function formatDate(dateStr: string): string {
+    try {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      });
+    } catch {
+      return dateStr;
+    }
+  }
+
+  function getAuthorName(author: string | { name: string }): string {
+    return typeof author === 'string' ? author : author.name;
+  }
+
+  function getAuthorUrl(author: string | { name: string; url?: string }): string | undefined {
+    return typeof author === 'string' ? undefined : author.url;
+  }
+
+  function getAuthorAvatar(author: string | { name: string; avatar?: string }): string | undefined {
+    return typeof author === 'string' ? undefined : author.avatar;
+  }
+</script>
+
+{#if showReadingTime || showLastUpdated || showAuthors}
+  <div class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground mb-6">
+    {#if showReadingTime}
+      <span class="inline-flex items-center gap-1.5">
+        <Clock class="h-3.5 w-3.5" />
+        <span>{meta.readingTime} min read</span>
+      </span>
+    {/if}
+
+    {#if showLastUpdated && meta.lastUpdated}
+      <span class="inline-flex items-center gap-1.5">
+        <Calendar class="h-3.5 w-3.5" />
+        <span>Updated {formatDate(meta.lastUpdated)}</span>
+      </span>
+    {/if}
+
+    {#if showAuthors && meta.authors}
+      <span class="inline-flex items-center gap-1.5">
+        <User class="h-3.5 w-3.5" />
+        <span class="flex items-center gap-1">
+          {#each meta.authors as author, index}
+            {#if getAuthorUrl(author)}
+              <a
+                href={getAuthorUrl(author)}
+                class="hover:text-foreground transition-colors underline-offset-2 hover:underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {#if getAuthorAvatar(author)}
+                  <img
+                    src={getAuthorAvatar(author)}
+                    alt={getAuthorName(author)}
+                    class="inline-block h-5 w-5 rounded-full mr-1"
+                  />
+                {/if}
+                {getAuthorName(author)}
+              </a>
+            {:else}
+              <span>
+                {#if getAuthorAvatar(author)}
+                  <img
+                    src={getAuthorAvatar(author)}
+                    alt={getAuthorName(author)}
+                    class="inline-block h-5 w-5 rounded-full mr-1"
+                  />
+                {/if}
+                {getAuthorName(author)}
+              </span>
+            {/if}
+            {#if index < meta.authors.length - 1}
+              <span>,</span>
+            {/if}
+          {/each}
+        </span>
+      </span>
+    {/if}
+  </div>
+{/if}