specra 0.1.13 → 0.2.0

package/dist/components/docs/Accordion.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    type?: 'single' | 'multiple';
+    collapsible?: boolean;
+    class?: string;
+  }
+
+  let { children, type = 'multiple', collapsible, class: className }: Props = $props();
+</script>
+
+<div class={className || 'my-6 space-y-2'}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    type?: 'single' | 'multiple';
+    collapsible?: boolean;
+    class?: string;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/docs/AccordionItem.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { ChevronDown } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    defaultOpen?: boolean;
+    value?: string;
+    children?: Snippet;
+  }
+
+  let { title, defaultOpen = false, value, children }: Props = $props();
+
+  let isOpen = $state(defaultOpen);
+
+  function toggle() {
+    isOpen = !isOpen;
+  }
+</script>
+
+<div class="border border-border rounded-xl overflow-hidden mb-2">
+  <button
+    onclick={toggle}
+    class="w-full flex items-center justify-between p-4 text-left bg-muted/30 hover:bg-muted/50 transition-colors"
+    aria-expanded={isOpen}
+  >
+    <span class="font-medium text-foreground">{title}</span>
+    <ChevronDown
+      class="h-5 w-5 text-muted-foreground transition-transform {isOpen ? 'rotate-180' : ''}"
+    />
+  </button>
+  {#if isOpen}
+    <div class="p-4 border-t border-border bg-background">
+      <div class="prose prose-sm dark:prose-invert max-w-none [&>*:last-child]:mb-0">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    defaultOpen?: boolean;
+    value?: string;
+    children?: Snippet;
+}
+declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/docs/Badge.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/Badge.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 Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/docs/Breadcrumb.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { ChevronRight } from 'lucide-svelte';
+  import { getConfigContext } from '../../stores/config.js';
+
+  interface Props {
+    version: string;
+    slug: string;
+    title: string;
+  }
+
+  let { version, slug, title }: Props = $props();
+
+  const configStore = getConfigContext();
+  let config = $derived($configStore);
+
+  let breadcrumbs = $derived.by(() => {
+    const i18n = config.features?.i18n;
+    const locales = typeof i18n === 'object' ? i18n.locales : i18n ? ['en'] : [];
+    const defaultLocale = typeof i18n === 'object' ? i18n.defaultLocale : 'en';
+
+    const parts = slug.split('/');
+
+    // Check if first part is a locale
+    const potentialLocale = parts[0];
+    const isLc = locales.includes(potentialLocale);
+
+    const homeHref = isLc ? `/docs/${version}/${potentialLocale}` : `/docs/${version}`;
+
+    const crumbs: Array<{ label: string; href: string }> = [
+      { label: 'Docs', href: homeHref }
+    ];
+
+    // Build breadcrumb path
+    let currentPath = '';
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      currentPath += (currentPath ? '/' : '') + part;
+
+      // Skip the locale part in the breadcrumb visual trail if it's the first part
+      if (i === 0 && isLc) {
+        continue;
+      }
+
+      crumbs.push({
+        label: part
+          .replace(/-/g, ' ')
+          .replace(/\b\w/g, (l) => l.toUpperCase()),
+        href: `/docs/${version}/${currentPath}`
+      });
+    }
+
+    // Add current page
+    crumbs.push({
+      label: title,
+      href: `/docs/${version}/${slug}`
+    });
+
+    return crumbs;
+  });
+</script>
+
+<nav class="flex items-center gap-2 text-sm text-muted-foreground mb-4" aria-label="Breadcrumb">
+  {#each breadcrumbs as crumb, index (crumb.href)}
+    <div class="flex items-center gap-2">
+      {#if index > 0}
+        <ChevronRight class="h-4 w-4" />
+      {/if}
+      {#if index === breadcrumbs.length - 1}
+        <span class="text-foreground font-medium">{crumb.label}</span>
+      {:else}
+        <a
+          href={crumb.href}
+          class="hover:text-foreground transition-colors"
+        >
+          {crumb.label}
+        </a>
+      {/if}
+    </div>
+  {/each}
+</nav>

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

@@ -0,0 +1,8 @@
+interface Props {
+    version: string;
+    slug: string;
+    title: string;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/docs/Callout.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import {
+    Info,
+    AlertTriangle,
+    CheckCircle2,
+    XCircle,
+    Lightbulb,
+  } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+
+  type CalloutType = 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note' | 'danger';
+
+  interface Props {
+    type?: CalloutType;
+    title?: string;
+    children?: Snippet;
+  }
+
+  let { type = 'info', title, children }: Props = $props();
+
+  const configs: Record<CalloutType, {
+    icon: typeof Info;
+    className: string;
+    iconClassName: string;
+    titleClassName: string;
+    defaultTitle: string;
+  }> = {
+    info: {
+      icon: Info,
+      className: 'bg-blue-500/10 border-blue-500/30 text-blue-900 dark:bg-blue-400/5 dark:border-blue-500/20 dark:text-blue-400',
+      iconClassName: 'text-blue-600 dark:text-blue-400',
+      titleClassName: 'text-blue-700 dark:text-blue-300',
+      defaultTitle: 'Info',
+    },
+    note: {
+      icon: Info,
+      className: 'bg-blue-500/10 border-blue-500/30 text-blue-900 dark:bg-blue-400/5 dark:border-blue-500/20 dark:text-blue-400',
+      iconClassName: 'text-blue-600 dark:text-blue-400',
+      titleClassName: 'text-blue-700 dark:text-blue-300',
+      defaultTitle: 'Note',
+    },
+    warning: {
+      icon: AlertTriangle,
+      className: 'bg-yellow-500/10 border-yellow-500/30 text-yellow-900 dark:bg-yellow-400/5 dark:border-yellow-500/20 dark:text-yellow-400',
+      iconClassName: 'text-yellow-600 dark:text-yellow-400',
+      titleClassName: 'text-yellow-700 dark:text-yellow-300',
+      defaultTitle: 'Warning',
+    },
+    success: {
+      icon: CheckCircle2,
+      className: 'bg-green-500/10 border-green-500/30 text-green-900 dark:bg-green-400/5 dark:border-green-500/20 dark:text-green-400',
+      iconClassName: 'text-green-600 dark:text-green-400',
+      titleClassName: 'text-green-700 dark:text-green-300',
+      defaultTitle: 'Success',
+    },
+    error: {
+      icon: XCircle,
+      className: 'bg-red-500/10 border-red-500/30 text-red-900 dark:bg-red-400/5 dark:border-red-500/20 dark:text-red-400',
+      iconClassName: 'text-red-600 dark:text-red-400',
+      titleClassName: 'text-red-700 dark:text-red-300',
+      defaultTitle: 'Error',
+    },
+    danger: {
+      icon: XCircle,
+      className: 'bg-red-500/10 border-red-500/30 text-red-900 dark:bg-red-400/5 dark:border-red-500/20 dark:text-red-400',
+      iconClassName: 'text-red-600 dark:text-red-400',
+      titleClassName: 'text-red-700 dark:text-red-300',
+      defaultTitle: 'Danger',
+    },
+    tip: {
+      icon: Lightbulb,
+      className: 'bg-purple-500/10 border-purple-500/30 text-purple-900 dark:bg-purple-400/5 dark:border-purple-500/20 dark:text-purple-400',
+      iconClassName: 'text-purple-600 dark:text-purple-400',
+      titleClassName: 'text-purple-700 dark:text-purple-300',
+      defaultTitle: 'Tip',
+    },
+  };
+
+  let config = $derived(configs[type] || configs.info);
+  let displayTitle = $derived(title || config.defaultTitle);
+  let IconComponent = $derived(config.icon);
+</script>
+
+<div class="flex gap-3 p-4 rounded-xl border my-2 {config.className}">
+  <div class="flex-shrink-0 mt-0.5">
+    <IconComponent class="h-5 w-5 {config.iconClassName}" />
+  </div>
+  <div class="flex-1 space-y-0">
+    <div class="font-semibold text-sm {config.titleClassName}">{displayTitle}</div>
+    <div class="text-sm leading-relaxed [&>p]:mb-0 [&>p]:text-current">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type CalloutType = 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note' | 'danger';
+interface Props {
+    type?: CalloutType;
+    title?: string;
+    children?: Snippet;
+}
+declare const Callout: import("svelte").Component<Props, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/docs/Card.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { ArrowRight, ExternalLink } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+  import Icon from './Icon.svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    href?: string;
+    icon?: string;
+    external?: boolean;
+    children?: Snippet;
+  }
+
+  let { title, description, href, icon, external = false, children }: Props = $props();
+</script>
+
+{#snippet cardContent(isLink: boolean)}
+  <div class="flex items-center gap-3">
+    {#if icon}
+      <div class="shrink-0 w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
+        <Icon {icon} size={20} />
+      </div>
+    {/if}
+    <div class="flex-1 min-w-0">
+      <h3 class="font-semibold text-foreground mb-1 no-underline {isLink ? 'group-hover:text-primary transition-colors' : ''}">
+        {title}
+      </h3>
+      {#if description}
+        <p class="text-sm text-muted-foreground line-clamp-2 no-underline">{description}</p>
+      {/if}
+      {#if children}
+        <div class="mt-2 text-sm text-muted-foreground no-underline">
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+    {#if href}
+      <div class="shrink-0 self-start mt-1">
+        {#if external}
+          <ExternalLink class="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+        {:else}
+          <ArrowRight class="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+{#if href}
+  <a
+    {href}
+    class="card-link group block p-4 rounded-xl border border-border hover:border-primary/50 hover:bg-muted/50 transition-all"
+    target={external ? '_blank' : undefined}
+    rel={external ? 'noopener noreferrer' : undefined}
+  >
+    {@render cardContent(true)}
+  </a>
+{:else}
+  <div class="p-4 rounded-xl border border-border bg-muted/30 no-underline">
+    {@render cardContent(false)}
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    href?: string;
+    icon?: string;
+    external?: boolean;
+    children?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/docs/CardGrid.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    cols?: 1 | 2 | 3;
+    children?: Snippet;
+  }
+
+  let { cols = 2, children }: Props = $props();
+
+  const gridCols: Record<number, string> = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  };
+
+  let gridClass = $derived(gridCols[cols] || gridCols[2]);
+</script>
+
+<div class="grid {gridClass} gap-4 my-6">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

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

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

package/dist/components/docs/CategoryIndex.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { FileText, ArrowRight } from 'lucide-svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+  import type { Snippet } from 'svelte';
+
+  interface DocItem {
+    slug: string;
+    filePath: string;
+    version?: string;
+    meta?: {
+      title?: string;
+      description?: string;
+      sidebar_position?: number;
+      icon?: string;
+      [key: string]: unknown;
+    };
+    title?: string;
+    description?: string;
+    [key: string]: unknown;
+  }
+
+  interface Props {
+    categoryPath: string;
+    version: string;
+    allDocs: DocItem[];
+    title?: string;
+    description?: string;
+    content?: Snippet;
+    config: SpecraConfig;
+  }
+
+  let { categoryPath, version, allDocs, title, description, content, config }: Props = $props();
+
+  // Filter docs that belong to this category (direct children)
+  const childDocs = $derived(() => {
+    if (!allDocs || allDocs.length === 0) return [];
+
+    return allDocs
+      .filter((doc) => {
+        const docPath = doc.filePath || doc.slug;
+        // Match direct children of this category path
+        if (!docPath.startsWith(categoryPath + '/')) return false;
+        const remaining = docPath.slice(categoryPath.length + 1);
+        // Only direct children (no further slashes, or is an index)
+        return !remaining.includes('/') && remaining !== 'index';
+      })
+      .sort((a, b) => {
+        const posA = a.meta?.sidebar_position ?? 999;
+        const posB = b.meta?.sidebar_position ?? 999;
+        return posA - posB;
+      });
+  });
+
+  const baseUrl = $derived(config.site?.baseUrl?.replace(/\/$/, '') || '');
+</script>
+
+<div class="space-y-8">
+  <!-- Category Header -->
+  {#if title}
+    <div class="space-y-2">
+      <h1 class="text-3xl font-bold tracking-tight text-foreground">{title}</h1>
+      {#if description}
+        <p class="text-lg text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- Rendered mdsvex content via slot -->
+  {#if content}
+    <div class="prose dark:prose-invert max-w-none">
+      {@render content()}
+    </div>
+  {/if}
+
+  <!-- Child Documents Grid -->
+  {#if childDocs().length > 0}
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
+      {#each childDocs() as doc}
+        {@const docTitle = doc.meta?.title || doc.title || doc.slug.split('/').pop() || 'Untitled'}
+        {@const docDescription = doc.meta?.description || doc.description || ''}
+        {@const docSlug = doc.slug}
+
+        <a
+          href="{baseUrl}/{version}/{docSlug}"
+          class="group flex flex-col gap-2 p-5 rounded-lg border border-border bg-card hover:bg-accent/50 hover:border-accent-foreground/20 transition-all duration-200"
+        >
+          <div class="flex items-start justify-between gap-2">
+            <div class="flex items-center gap-2">
+              <FileText class="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
+              <h3 class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
+                {docTitle}
+              </h3>
+            </div>
+            <ArrowRight class="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-0.5" />
+          </div>
+          {#if docDescription}
+            <p class="text-sm text-muted-foreground line-clamp-2 pl-6">
+              {docDescription}
+            </p>
+          {/if}
+        </a>
+      {/each}
+    </div>
+  {:else if !content}
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <FileText class="h-10 w-10 text-muted-foreground mb-4" />
+      <p class="text-muted-foreground">No documents found in this category.</p>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,29 @@
+import type { SpecraConfig } from '../../config.types.js';
+import type { Snippet } from 'svelte';
+interface DocItem {
+    slug: string;
+    filePath: string;
+    version?: string;
+    meta?: {
+        title?: string;
+        description?: string;
+        sidebar_position?: number;
+        icon?: string;
+        [key: string]: unknown;
+    };
+    title?: string;
+    description?: string;
+    [key: string]: unknown;
+}
+interface Props {
+    categoryPath: string;
+    version: string;
+    allDocs: DocItem[];
+    title?: string;
+    description?: string;
+    content?: Snippet;
+    config: SpecraConfig;
+}
+declare const CategoryIndex: import("svelte").Component<Props, {}, "">;
+type CategoryIndex = ReturnType<typeof CategoryIndex>;
+export default CategoryIndex;