specra 0.1.13 → 0.2.0

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

@@ -0,0 +1,12 @@
+interface Props {
+    src: string;
+    caption?: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    poster?: string;
+}
+declare const Video: import("svelte").Component<Props, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { ChevronDown } from 'lucide-svelte';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    path: string;
+    summary?: string;
+    children?: Snippet;
+    defaultOpen?: boolean;
+  }
+
+  let { method, path, summary, children, defaultOpen = false }: Props = $props();
+
+  let isOpen = $state(defaultOpen);
+
+  const methodColors: Record<string, string> = {
+    GET: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+    POST: 'bg-green-500/10 text-green-600 dark:text-green-400',
+    PUT: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',
+    PATCH: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
+    DELETE: 'bg-red-500/10 text-red-600 dark:text-red-400',
+  };
+</script>
+
+<div class="not-prose mb-4 rounded-xl border border-border overflow-hidden">
+  <!-- Accordion Header -->
+  <button
+    onclick={() => (isOpen = !isOpen)}
+    class="w-full flex items-center gap-3 px-4 py-3 text-left bg-muted/30 hover:bg-muted/50 transition-colors"
+  >
+    <span
+      class={cn(
+        'text-xs font-semibold px-2 py-0.5 rounded',
+        methodColors[method]
+      )}
+    >
+      {method}
+    </span>
+    <code class="text-sm font-mono">{path}</code>
+    {#if summary}
+      <span class="text-sm text-muted-foreground ml-auto mr-2">{summary}</span>
+    {/if}
+    <ChevronDown
+      class={cn(
+        'h-5 w-5 text-muted-foreground transition-transform flex-shrink-0',
+        isOpen ? 'rotate-180' : ''
+      )}
+    />
+  </button>
+
+  <!-- Accordion Content -->
+  {#if isOpen && children}
+    <div class="border-t border-border bg-background">
+      <div class="px-4 py-4 space-y-6">
+        {@render children()}
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    path: string;
+    summary?: string;
+    children?: Snippet;
+    defaultOpen?: boolean;
+}
+declare const ApiEndpoint: import("svelte").Component<Props, {}, "">;
+type ApiEndpoint = ReturnType<typeof ApiEndpoint>;
+export default ApiEndpoint;

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+  export interface ApiParam {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    default?: string;
+  }
+
+  interface Props {
+    title?: string;
+    params: ApiParam[];
+  }
+
+  let { title = 'Parameters', params }: Props = $props();
+</script>
+
+{#if params && params.length > 0}
+  <div class="mb-6">
+    <h4 class="text-sm font-semibold text-foreground mb-3">{title}</h4>
+    <div class="overflow-x-auto">
+      <table class="w-full border-collapse">
+        <thead>
+          <tr class="border-b border-border">
+            <th class="text-left py-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Property
+            </th>
+            <th class="text-left py-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Type
+            </th>
+            <th class="text-left py-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Required
+            </th>
+            <th class="text-left py-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Default
+            </th>
+            <th class="text-left py-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each params as param, index}
+            <tr
+              class={index !== params.length - 1 ? 'border-b border-border/50' : ''}
+            >
+              <td class="py-2.5 px-3">
+                <code class="text-sm font-mono text-foreground">{param.name}</code>
+              </td>
+              <td class="py-2.5 px-3">
+                <span class="text-sm text-muted-foreground font-mono">{param.type}</span>
+              </td>
+              <td class="py-2.5 px-3">
+                {#if param.required}
+                  <span class="text-sm text-red-600 dark:text-red-400">Yes</span>
+                {:else}
+                  <span class="text-sm text-muted-foreground">No</span>
+                {/if}
+              </td>
+              <td class="py-2.5 px-3">
+                {#if param.default}
+                  <code class="text-sm font-mono text-muted-foreground">{param.default}</code>
+                {:else}
+                  <span class="text-sm text-muted-foreground">-</span>
+                {/if}
+              </td>
+              <td class="py-2.5 px-3">
+                {#if param.description}
+                  <span class="text-sm text-muted-foreground">{param.description}</span>
+                {:else}
+                  <span class="text-sm text-muted-foreground">-</span>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+export interface ApiParam {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    default?: string;
+}
+interface Props {
+    title?: string;
+    params: ApiParam[];
+}
+declare const ApiParams: import("svelte").Component<Props, {}, "">;
+type ApiParams = ReturnType<typeof ApiParams>;
+export default ApiParams;

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

@@ -0,0 +1,259 @@
+<script lang="ts">
+  import Button from '../../ui/Button.svelte';
+  import Input from '../../ui/Input.svelte';
+  import Textarea from '../../ui/Textarea.svelte';
+  import Badge from '../../ui/Badge.svelte';
+  import CodeBlock from '../CodeBlock.svelte';
+  import { Play, Loader2 } from 'lucide-svelte';
+
+  export interface PathParam {
+    name: string;
+    type: string;
+    example?: any;
+  }
+
+  interface Props {
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    path: string;
+    baseUrl?: string;
+    headers?: Record<string, string>;
+    defaultBody?: string;
+    pathParams?: PathParam[];
+  }
+
+  let {
+    method,
+    path,
+    baseUrl = '',
+    headers = {},
+    defaultBody,
+    pathParams = [],
+  }: Props = $props();
+
+  let loading = $state(false);
+  let response = $state<any>(null);
+  let error = $state<string | null>(null);
+  let requestBody = $state(defaultBody || '');
+
+  // Initialize headers with empty strings if not provided
+  let initialHeaders = $derived(() => {
+    const cleanHeaders: Record<string, string> = {};
+    Object.entries(headers).forEach(([key, value]) => {
+      cleanHeaders[key] = value || '';
+    });
+    return cleanHeaders;
+  });
+
+  let requestHeaders = $state(JSON.stringify(
+    (() => {
+      const cleanHeaders: Record<string, string> = {};
+      Object.entries(headers).forEach(([key, value]) => {
+        cleanHeaders[key] = value || '';
+      });
+      return cleanHeaders;
+    })(),
+    null,
+    2
+  ));
+
+  // Extract path parameters and initialize with defaults
+  let extractedParams = $derived(() => {
+    const params: Record<string, string> = {};
+    const pathParamPattern = /:(\w+)/g;
+    let match;
+
+    while ((match = pathParamPattern.exec(path)) !== null) {
+      const paramName = match[1];
+      const paramConfig = pathParams.find((p) => p.name === paramName);
+
+      // Set default value based on example or type
+      if (paramConfig?.example !== undefined) {
+        params[paramName] = String(paramConfig.example);
+      } else if (paramConfig?.type === 'number') {
+        params[paramName] = '1';
+      } else {
+        params[paramName] = '';
+      }
+    }
+
+    return params;
+  });
+
+  let pathParamValues = $state<Record<string, string>>(
+    (() => {
+      const params: Record<string, string> = {};
+      const pathParamPattern = /:(\w+)/g;
+      let match;
+
+      while ((match = pathParamPattern.exec(path)) !== null) {
+        const paramName = match[1];
+        const paramConfig = pathParams.find((p) => p.name === paramName);
+
+        if (paramConfig?.example !== undefined) {
+          params[paramName] = String(paramConfig.example);
+        } else if (paramConfig?.type === 'number') {
+          params[paramName] = '1';
+        } else {
+          params[paramName] = '';
+        }
+      }
+
+      return params;
+    })()
+  );
+
+  // Build the final URL with path params replaced
+  function buildUrl(): string {
+    let finalPath = path;
+    Object.entries(pathParamValues).forEach(([key, value]) => {
+      finalPath = finalPath.replace(`:${key}`, value);
+    });
+    return `${baseUrl}${finalPath}`;
+  }
+
+  let builtUrl = $derived(buildUrl());
+
+  async function handleSend() {
+    loading = true;
+    error = null;
+    response = null;
+
+    try {
+      const url = buildUrl();
+      const parsedHeaders = JSON.parse(requestHeaders);
+
+      const options: RequestInit = {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...parsedHeaders,
+        },
+      };
+
+      if (method !== 'GET' && method !== 'DELETE' && requestBody) {
+        options.body = requestBody;
+      }
+
+      const res = await fetch(url, options);
+      const data = await res.json();
+
+      response = {
+        status: res.status,
+        statusText: res.statusText,
+        headers: Object.fromEntries(res.headers.entries()),
+        body: data,
+      };
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'An error occurred';
+    } finally {
+      loading = false;
+    }
+  }
+
+  let hasPathParams = $derived(Object.keys(pathParamValues).length > 0);
+</script>
+
+<div class="not-prose border border-border rounded-lg overflow-hidden bg-card/30">
+  <div class="bg-muted/50 px-4 py-2 border-b border-border">
+    <h4 class="text-sm font-semibold text-foreground">API Playground</h4>
+  </div>
+
+  <div class="p-4 space-y-4">
+    <!-- Path Parameters -->
+    {#if hasPathParams}
+      <div>
+        <label class="text-xs font-semibold text-muted-foreground mb-2 block">
+          Path Parameters
+        </label>
+        <div class="space-y-2">
+          {#each Object.entries(pathParamValues) as [paramName, paramValue]}
+            {@const paramConfig = pathParams.find((p) => p.name === paramName)}
+            <div class="flex items-center gap-2">
+              <span class="text-xs text-muted-foreground min-w-[80px]">
+                :{paramName}
+              </span>
+              <Input
+                value={paramValue}
+                oninput={(e) => {
+                  pathParamValues = { ...pathParamValues, [paramName]: e.currentTarget.value };
+                }}
+                placeholder={paramConfig?.example || paramConfig?.type || 'value'}
+                class="font-mono text-sm"
+              />
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <!-- URL -->
+    <div>
+      <label class="text-xs font-semibold text-muted-foreground mb-2 block">
+        Request URL
+      </label>
+      <div class="flex items-center gap-2">
+        <Badge variant="outline" class="font-mono">
+          {method}
+        </Badge>
+        <Input value={builtUrl} readonly class="font-mono text-sm" />
+      </div>
+    </div>
+
+    <!-- Headers -->
+    <div>
+      <label class="text-xs font-semibold text-muted-foreground mb-2 block">
+        Headers (JSON)
+      </label>
+      <Textarea
+        value={requestHeaders}
+        oninput={(e) => (requestHeaders = e.currentTarget.value)}
+        class="font-mono text-sm"
+        rows={4}
+      />
+    </div>
+
+    <!-- Body (for POST, PUT, PATCH) -->
+    {#if method !== 'GET' && method !== 'DELETE'}
+      <div>
+        <label class="text-xs font-semibold text-muted-foreground mb-2 block">
+          Request Body (JSON)
+        </label>
+        <Textarea
+          value={requestBody}
+          oninput={(e) => (requestBody = e.currentTarget.value)}
+          class="font-mono text-sm"
+          rows={6}
+          placeholder={'{\n  "key": "value"\n}'}
+        />
+      </div>
+    {/if}
+
+    <!-- Send Button -->
+    <Button onclick={handleSend} disabled={loading} class="w-full">
+      {#if loading}
+        <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+        Sending...
+      {:else}
+        <Play class="mr-2 h-4 w-4" />
+        Send Request
+      {/if}
+    </Button>
+
+    <!-- Response -->
+    {#if response}
+      <div class="mt-4">
+        <label class="text-xs font-semibold text-muted-foreground mb-2 block">
+          Response ({response.status} {response.statusText})
+        </label>
+        <CodeBlock code={JSON.stringify(response.body, null, 2)} language="json" />
+      </div>
+    {/if}
+
+    <!-- Error -->
+    {#if error}
+      <div class="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-md">
+        <p class="text-sm text-red-600 dark:text-red-400">{error}</p>
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+export interface PathParam {
+    name: string;
+    type: string;
+    example?: any;
+}
+interface Props {
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    path: string;
+    baseUrl?: string;
+    headers?: Record<string, string>;
+    defaultBody?: string;
+    pathParams?: PathParam[];
+}
+declare const ApiPlayground: import("svelte").Component<Props, {}, "">;
+type ApiPlayground = ReturnType<typeof ApiPlayground>;
+export default ApiPlayground;