specra 0.1.13 → 0.2.0

package/dist/components/docs/api/ApiReference.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import type { SpecraApiSpec } from '../../../api-parser.types.js';
+  import { parseApiSpec, type ParserType } from '../../../parsers/index.js';
+  import Accordion from '../Accordion.svelte';
+  import AccordionItem from '../AccordionItem.svelte';
+  import ApiParams from './ApiParams.svelte';
+  import ApiResponseDisplay from './ApiResponse.svelte';
+  import ApiPlayground from './ApiPlayground.svelte';
+  import CodeBlock from '../CodeBlock.svelte';
+  import { Loader2 } from 'lucide-svelte';
+
+  interface Props {
+    /**
+     * Path to the API spec JSON file (relative to /public or /static)
+     * Example: "/api-specs/my-api.json"
+     */
+    spec: string;
+
+    /**
+     * Parser type - auto-detect by default
+     * - "auto": Auto-detect format (Specra, OpenAPI, or Postman)
+     * - "specra": Native Specra format
+     * - "openapi": OpenAPI 3.x / Swagger
+     * - "postman": Postman Collection v2.x
+     */
+    parser?: ParserType;
+
+    /**
+     * Show API playground for testing
+     */
+    showPlayground?: boolean;
+  }
+
+  let { spec, parser = 'auto', showPlayground = true }: Props = $props();
+
+  let apiSpec = $state<SpecraApiSpec | null>(null);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  // Replace environment variables in text
+  function interpolateEnv(text: string, env?: Record<string, string>): string {
+    if (!env) return text;
+    return text.replace(/\{(\w+)\}/g, (match, key) => {
+      return env[key] || match;
+    });
+  }
+
+  // Fetch and parse spec reactively when spec or parser changes
+  $effect(() => {
+    const currentSpec = spec;
+    const currentParser = parser;
+
+    loading = true;
+    error = null;
+    apiSpec = null;
+
+    fetch(currentSpec)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to load API spec: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        apiSpec = parseApiSpec(data, currentParser);
+      })
+      .catch((err) => {
+        error = err instanceof Error ? err.message : 'Failed to load API spec';
+      })
+      .finally(() => {
+        loading = false;
+      });
+  });
+</script>
+
+{#if loading}
+  <div class="flex items-center justify-center py-12">
+    <Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+    <span class="ml-2 text-muted-foreground">Loading API specification...</span>
+  </div>
+{:else if error}
+  <div class="rounded-lg border border-red-500/20 bg-red-500/10 p-4">
+    <p class="text-sm text-red-600 dark:text-red-400">Error: {error}</p>
+  </div>
+{:else if apiSpec}
+  <div class="space-y-6">
+    <!-- API Info -->
+    {#if apiSpec.title || apiSpec.description}
+      <div class="mb-8">
+        {#if apiSpec.title}
+          <h2 class="text-2xl font-semibold mb-2 text-foreground">{apiSpec.title}</h2>
+        {/if}
+        {#if apiSpec.description}
+          <p class="text-muted-foreground">{apiSpec.description}</p>
+        {/if}
+        {#if apiSpec.baseUrl}
+          <div class="mt-4">
+            <p class="text-sm font-semibold text-muted-foreground mb-1">Base URL</p>
+            <code class="text-sm px-2 py-1 bg-muted rounded">{apiSpec.baseUrl}</code>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Authentication -->
+    {#if apiSpec.auth}
+      <div class="rounded-lg border border-border bg-card/30 p-4 mb-6">
+        <h3 class="text-lg font-semibold mb-2 text-foreground">Authentication</h3>
+        <p class="text-sm text-muted-foreground mb-2">
+          {apiSpec.auth.description || `This API uses ${apiSpec.auth.type} authentication.`}
+        </p>
+        {#if apiSpec.auth.type === 'bearer'}
+          <CodeBlock
+            code={`Authorization: ${apiSpec.auth.tokenPrefix || 'Bearer'} {YOUR_TOKEN}`}
+            language="bash"
+          />
+        {/if}
+        {#if apiSpec.auth.type === 'apiKey'}
+          <CodeBlock
+            code={`${apiSpec.auth.headerName || 'X-API-Key'}: {YOUR_API_KEY}`}
+            language="bash"
+          />
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Endpoints -->
+    <Accordion class="space-y-4">
+      {#each apiSpec.endpoints as endpoint, index}
+        {@const allHeaders = [
+          ...(apiSpec.globalHeaders || []),
+          ...(endpoint.headers || []),
+        ].map((header) => ({
+          ...header,
+          value: interpolateEnv(header.value, apiSpec?.env),
+        }))}
+
+        <AccordionItem
+          title={`${endpoint.method} ${endpoint.path} - ${endpoint.title || ''}`}
+        >
+          {#snippet children()}
+            <div class="space-y-6 pt-4">
+              <!-- Method + Path Badge -->
+              <div class="flex items-center gap-3">
+                <span
+                  class="text-xs font-semibold px-2 py-0.5 rounded {endpoint.method === 'GET'
+                    ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400'
+                    : endpoint.method === 'POST'
+                      ? 'bg-green-500/10 text-green-600 dark:text-green-400'
+                      : endpoint.method === 'PUT'
+                        ? 'bg-orange-500/10 text-orange-600 dark:text-orange-400'
+                        : endpoint.method === 'PATCH'
+                          ? 'bg-purple-500/10 text-purple-600 dark:text-purple-400'
+                          : 'bg-red-500/10 text-red-600 dark:text-red-400'}"
+                >
+                  {endpoint.method}
+                </span>
+                <code class="text-sm font-mono">{endpoint.path}</code>
+                {#if endpoint.title}
+                  <span class="text-sm text-muted-foreground ml-auto">{endpoint.title}</span>
+                {/if}
+              </div>
+
+              <!-- Description -->
+              {#if endpoint.description}
+                <p class="text-sm text-muted-foreground">{endpoint.description}</p>
+              {/if}
+
+              <!-- Path Parameters -->
+              {#if endpoint.pathParams && endpoint.pathParams.length > 0}
+                <ApiParams title="Path Parameters" params={endpoint.pathParams} />
+              {/if}
+
+              <!-- Query Parameters -->
+              {#if endpoint.queryParams && endpoint.queryParams.length > 0}
+                <ApiParams title="Query Parameters" params={endpoint.queryParams} />
+              {/if}
+
+              <!-- Headers -->
+              {#if allHeaders.length > 0}
+                <div>
+                  <h4 class="text-sm font-semibold text-foreground mb-3">Headers</h4>
+                  <div class="space-y-2">
+                    {#each allHeaders as header, idx}
+                      <div class="flex flex-col gap-1">
+                        <div class="flex items-center gap-2">
+                          <code class="text-sm font-mono text-foreground">{header.name}</code>
+                          <span class="text-xs text-muted-foreground">{header.value}</span>
+                        </div>
+                        {#if header.description}
+                          <p class="text-sm text-muted-foreground">{header.description}</p>
+                        {/if}
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+
+              <!-- Request Body -->
+              {#if endpoint.body}
+                <div>
+                  <h4 class="text-sm font-semibold text-foreground mb-3">Request Body</h4>
+                  {#if endpoint.body.description}
+                    <p class="text-sm text-muted-foreground mb-2">
+                      {endpoint.body.description}
+                    </p>
+                  {/if}
+                  {#if endpoint.body.example}
+                    <CodeBlock
+                      code={typeof endpoint.body.example === 'string'
+                        ? endpoint.body.example
+                        : JSON.stringify(endpoint.body.example, null, 2)}
+                      language="json"
+                    />
+                  {/if}
+                </div>
+              {/if}
+
+              <!-- Responses -->
+              <div>
+                <h4 class="text-sm font-semibold text-foreground mb-3">Responses</h4>
+                {#if endpoint.successResponse}
+                  <ApiResponseDisplay
+                    status={endpoint.successResponse.status}
+                    description={endpoint.successResponse.description}
+                    example={endpoint.successResponse.example}
+                    schema={endpoint.successResponse.schema}
+                  />
+                {/if}
+                {#if endpoint.errorResponses}
+                  {#each endpoint.errorResponses as response, idx}
+                    <ApiResponseDisplay
+                      status={response.status}
+                      description={response.description}
+                      example={response.example}
+                      schema={response.schema}
+                    />
+                  {/each}
+                {/if}
+              </div>
+
+              <!-- Code Examples -->
+              {#if endpoint.examples && endpoint.examples.length > 0}
+                <div>
+                  <h4 class="text-sm font-semibold text-foreground mb-3">Examples</h4>
+                  {#each endpoint.examples as example, idx}
+                    <div class="mb-3">
+                      <p class="text-xs font-semibold text-muted-foreground mb-2">
+                        {example.title}
+                      </p>
+                      <CodeBlock code={example.code} language={example.language} />
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+
+              <!-- API Playground -->
+              {#if showPlayground}
+                <ApiPlayground
+                  method={endpoint.method}
+                  path={endpoint.path}
+                  baseUrl={apiSpec?.baseUrl}
+                  headers={Object.fromEntries(allHeaders.map((h) => [h.name, h.value]))}
+                  pathParams={endpoint.pathParams}
+                  defaultBody={endpoint.body?.example
+                    ? typeof endpoint.body.example === 'string'
+                      ? endpoint.body.example
+                      : JSON.stringify(endpoint.body.example, null, 2)
+                    : undefined}
+                />
+              {/if}
+            </div>
+          {/snippet}
+        </AccordionItem>
+      {/each}
+    </Accordion>
+  </div>
+{/if}

package/dist/components/docs/api/ApiReference.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type ParserType } from '../../../parsers/index.js';
+interface Props {
+    /**
+     * Path to the API spec JSON file (relative to /public or /static)
+     * Example: "/api-specs/my-api.json"
+     */
+    spec: string;
+    /**
+     * Parser type - auto-detect by default
+     * - "auto": Auto-detect format (Specra, OpenAPI, or Postman)
+     * - "specra": Native Specra format
+     * - "openapi": OpenAPI 3.x / Swagger
+     * - "postman": Postman Collection v2.x
+     */
+    parser?: ParserType;
+    /**
+     * Show API playground for testing
+     */
+    showPlayground?: boolean;
+}
+declare const ApiReference: import("svelte").Component<Props, {}, "">;
+type ApiReference = ReturnType<typeof ApiReference>;
+export default ApiReference;

package/dist/components/docs/api/ApiResponse.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import CodeBlock from '../CodeBlock.svelte';
+
+  interface Props {
+    status: number;
+    description?: string;
+    example?: any;
+    schema?: any;
+  }
+
+  let { status, description, example, schema }: Props = $props();
+
+  const statusColors: Record<string, string> = {
+    '2': 'text-green-600 dark:text-green-400',
+    '3': 'text-blue-600 dark:text-blue-400',
+    '4': 'text-orange-600 dark:text-orange-400',
+    '5': 'text-red-600 dark:text-red-400',
+  };
+
+  let statusClass = $derived(statusColors[String(status)[0]] || 'text-muted-foreground');
+
+  let exampleCode = $derived(
+    example
+      ? typeof example === 'string'
+        ? example
+        : JSON.stringify(example, null, 2)
+      : ''
+  );
+
+  let schemaCode = $derived(
+    schema
+      ? typeof schema === 'string'
+        ? schema
+        : JSON.stringify(schema, null, 2)
+      : ''
+  );
+</script>
+
+<div class="mb-4">
+  <div class="flex items-center gap-2 mb-2">
+    <span class="text-sm font-semibold {statusClass}">{status}</span>
+    {#if description}
+      <span class="text-sm text-muted-foreground">{description}</span>
+    {/if}
+  </div>
+
+  {#if example}
+    <div class="mb-3">
+      <p class="text-xs font-semibold text-muted-foreground mb-2">Example Response</p>
+      <CodeBlock
+        code={exampleCode}
+        language="json"
+      />
+    </div>
+  {/if}
+
+  {#if schema}
+    <div>
+      <p class="text-xs font-semibold text-muted-foreground mb-2">Schema</p>
+      <CodeBlock
+        code={schemaCode}
+        language="json"
+      />
+    </div>
+  {/if}
+</div>

package/dist/components/docs/api/ApiResponse.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    status: number;
+    description?: string;
+    example?: any;
+    schema?: any;
+}
+declare const ApiResponse: import("svelte").Component<Props, {}, "">;
+type ApiResponse = ReturnType<typeof ApiResponse>;
+export default ApiResponse;

package/dist/components/docs/api/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ApiEndpoint } from './ApiEndpoint.svelte';
+export { default as ApiParams } from './ApiParams.svelte';
+export { default as ApiResponse, default as ApiResponseDisplay } from './ApiResponse.svelte';
+export { default as ApiPlayground } from './ApiPlayground.svelte';
+export { default as ApiReference } from './ApiReference.svelte';

package/dist/components/docs/api/index.js

@@ -0,0 +1,5 @@
+export { default as ApiEndpoint } from './ApiEndpoint.svelte';
+export { default as ApiParams } from './ApiParams.svelte';
+export { default as ApiResponse, default as ApiResponseDisplay } from './ApiResponse.svelte';
+export { default as ApiPlayground } from './ApiPlayground.svelte';
+export { default as ApiReference } from './ApiReference.svelte';

package/dist/components/docs/componentTextProps.d.ts

@@ -0,0 +1,3 @@
+export declare const COMPONENT_TEXT_PROPS: Record<string, string[]>;
+export declare function extractComponentPropsText(mdx: string): string;
+export declare function extractSearchText(mdx: string): string;

package/dist/components/docs/componentTextProps.js

@@ -0,0 +1,61 @@
+export const COMPONENT_TEXT_PROPS = {
+    // Accordion components
+    Accordion: ["title"],
+    AccordionItem: ["title"],
+    // Alert/Callout components
+    Alert: ["title", "description"],
+    Banner: ["title"],
+    Callout: ["title", "content"],
+    Note: ["title"],
+    Warning: ["title", "text"],
+    // Navigation components
+    BreadCrumb: ["title", "slug", "version"],
+    // Card components
+    Card: ["title", "description"],
+    ImageCard: ["title", "description", "alt"],
+    // Media components
+    Image: ["alt", "caption"],
+    Video: ["caption"],
+    Frame: ["title"],
+    Mermaid: ["caption"],
+    // Interactive components
+    Tooltip: ["content"],
+    // Code components
+    CodeBlock: ["filename"],
+    // Step components
+    Step: ["title"],
+};
+export function extractComponentPropsText(mdx) {
+    return mdx.replace(/<([A-Z][\w]*)\b([^/>]*)\/>/g, (_, component, props) => {
+        const searchableProps = COMPONENT_TEXT_PROPS[component];
+        if (!searchableProps)
+            return " ";
+        let extracted = "";
+        for (const prop of searchableProps) {
+            const match = props.match(new RegExp(`${prop}="([^"]+)"`, "i"));
+            if (match) {
+                extracted += " " + match[1];
+            }
+        }
+        return extracted || " ";
+    });
+}
+export function extractSearchText(mdx) {
+    return extractComponentPropsText(mdx)
+        // 2. Remove fenced code blocks
+        .replace(/```[\s\S]*?```/g, " ")
+        // 3. Remove JSX blocks with children
+        .replace(/<([A-Z][\w]*)\b[^>]*>[\s\S]*?<\/\1>/g, " ")
+        // 4. Remove remaining JSX & HTML
+        .replace(/<\/?[A-Za-z][^>]*>/g, " ")
+        // 5. Remove inline code
+        .replace(/`[^`]+`/g, " ")
+        // 6. Remove markdown links (keep text)
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+        // 7. Remove markdown noise
+        .replace(/[#>*_~=-]+/g, " ")
+        // 8. Normalize whitespace
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 1000);
+}

package/dist/components/docs/index.d.ts

@@ -0,0 +1,54 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as DocBadge } from './DocBadge.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as Callout } from './Callout.svelte';
+export { default as Card } from './Card.svelte';
+export { default as CardGrid } from './CardGrid.svelte';
+export { default as CategoryIndex } from './CategoryIndex.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Column } from './Column.svelte';
+export { default as Columns } from './Columns.svelte';
+export { default as DevModeBadge } from './DevModeBadge.svelte';
+export { default as DocLayout } from './DocLayout.svelte';
+export { default as DocLoading } from './DocLoading.svelte';
+export { default as DocMetadata } from './DocMetadata.svelte';
+export { default as DocNavigation } from './DocNavigation.svelte';
+export { default as DocTags } from './DocTags.svelte';
+export { default as DraftBadge } from './DraftBadge.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Frame } from './Frame.svelte';
+export { default as Header } from './Header.svelte';
+export { default as HeaderWithMenu } from './HeaderWithMenu.svelte';
+export { default as HotReloadIndicator } from './HotReloadIndicator.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Image } from './Image.svelte';
+export { default as ImageCard } from './ImageCard.svelte';
+export { default as ImageCardGrid } from './ImageCardGrid.svelte';
+export { default as Logo } from './Logo.svelte';
+export { default as Math } from './Math.svelte';
+export { default as MdxContent } from './MdxContent.svelte';
+export { default as MdxHotReload } from './MdxHotReload.svelte';
+export { default as Mermaid } from './Mermaid.svelte';
+export { default as MobileDocLayout } from './MobileDocLayout.svelte';
+export { default as MobileSidebar } from './MobileSidebar.svelte';
+export { default as MobileSidebarWrapper } from './MobileSidebarWrapper.svelte';
+export { default as NotFoundContent } from './NotFoundContent.svelte';
+export { default as SearchHighlight } from './SearchHighlight.svelte';
+export { default as SearchModal } from './SearchModal.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as SidebarMenuItems } from './SidebarMenuItems.svelte';
+export { default as SidebarSkeleton } from './SidebarSkeleton.svelte';
+export { default as SiteBanner } from './SiteBanner.svelte';
+export { default as Step } from './Step.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as TabGroups } from './TabGroups.svelte';
+export { default as TableOfContents } from './TableOfContents.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as VersionSwitcher } from './VersionSwitcher.svelte';
+export { default as Video } from './Video.svelte';
+export { ApiEndpoint, ApiParams, ApiResponse, ApiResponseDisplay, ApiPlayground, ApiReference, } from './api/index.js';

package/dist/components/docs/index.js

@@ -0,0 +1,56 @@
+// Layout & Content components
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as DocBadge } from './DocBadge.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as Callout } from './Callout.svelte';
+export { default as Card } from './Card.svelte';
+export { default as CardGrid } from './CardGrid.svelte';
+export { default as CategoryIndex } from './CategoryIndex.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Column } from './Column.svelte';
+export { default as Columns } from './Columns.svelte';
+export { default as DevModeBadge } from './DevModeBadge.svelte';
+export { default as DocLayout } from './DocLayout.svelte';
+export { default as DocLoading } from './DocLoading.svelte';
+export { default as DocMetadata } from './DocMetadata.svelte';
+export { default as DocNavigation } from './DocNavigation.svelte';
+export { default as DocTags } from './DocTags.svelte';
+export { default as DraftBadge } from './DraftBadge.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Frame } from './Frame.svelte';
+export { default as Header } from './Header.svelte';
+export { default as HeaderWithMenu } from './HeaderWithMenu.svelte';
+export { default as HotReloadIndicator } from './HotReloadIndicator.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Image } from './Image.svelte';
+export { default as ImageCard } from './ImageCard.svelte';
+export { default as ImageCardGrid } from './ImageCardGrid.svelte';
+export { default as Logo } from './Logo.svelte';
+export { default as Math } from './Math.svelte';
+export { default as MdxContent } from './MdxContent.svelte';
+export { default as MdxHotReload } from './MdxHotReload.svelte';
+export { default as Mermaid } from './Mermaid.svelte';
+export { default as MobileDocLayout } from './MobileDocLayout.svelte';
+export { default as MobileSidebar } from './MobileSidebar.svelte';
+export { default as MobileSidebarWrapper } from './MobileSidebarWrapper.svelte';
+export { default as NotFoundContent } from './NotFoundContent.svelte';
+export { default as SearchHighlight } from './SearchHighlight.svelte';
+export { default as SearchModal } from './SearchModal.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as SidebarMenuItems } from './SidebarMenuItems.svelte';
+export { default as SidebarSkeleton } from './SidebarSkeleton.svelte';
+export { default as SiteBanner } from './SiteBanner.svelte';
+export { default as Step } from './Step.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as TabGroups } from './TabGroups.svelte';
+export { default as TableOfContents } from './TableOfContents.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as VersionSwitcher } from './VersionSwitcher.svelte';
+export { default as Video } from './Video.svelte';
+// API components
+export { ApiEndpoint, ApiParams, ApiResponse, ApiResponseDisplay, ApiPlayground, ApiReference, } from './api/index.js';

package/dist/components/global/VersionNotFound.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { AlertTriangle } from 'lucide-svelte';
+
+  interface Props {
+    version?: string;
+    availableVersions?: string[];
+  }
+
+  let { version, availableVersions = [] }: Props = $props();
+</script>
+
+<div class="flex min-h-screen items-center justify-center px-4">
+  <div class="text-center">
+    <div class="mb-4 flex justify-center">
+      <AlertTriangle class="h-16 w-16 text-yellow-500" />
+    </div>
+    <h1 class="mb-2 text-4xl font-bold">Version Not Found</h1>
+    <p class="mb-6 text-muted-foreground">
+      {#if version}
+        The documentation version "{version}" doesn't exist.
+      {:else}
+        The documentation version you're looking for doesn't exist.
+      {/if}
+    </p>
+    {#if availableVersions.length > 0}
+      <div class="mb-6">
+        <p class="mb-3 text-sm text-muted-foreground">Available versions:</p>
+        <div class="flex flex-wrap justify-center gap-2">
+          {#each availableVersions as ver}
+            <a
+              href="/docs/{ver}"
+              class="inline-flex items-center rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted transition-colors"
+            >
+              {ver}
+            </a>
+          {/each}
+        </div>
+      </div>
+    {:else}
+      <a
+        href="/docs/v1.0.0"
+        class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+      >
+        Go to Latest Version
+      </a>
+    {/if}
+  </div>
+</div>

package/dist/components/global/VersionNotFound.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    version?: string;
+    availableVersions?: string[];
+}
+declare const VersionNotFound: import("svelte").Component<Props, {}, "">;
+type VersionNotFound = ReturnType<typeof VersionNotFound>;
+export default VersionNotFound;

package/dist/components/global/index.d.ts

@@ -0,0 +1 @@
+export { default as VersionNotFound } from './VersionNotFound.svelte';

package/dist/components/global/index.js

@@ -0,0 +1 @@
+export { default as VersionNotFound } from './VersionNotFound.svelte';