specra 0.1.13 → 0.2.0

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

@@ -0,0 +1,18 @@
+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;
+}
+declare const DocMetadata: import("svelte").Component<Props, {}, "">;
+type DocMetadata = ReturnType<typeof DocMetadata>;
+export default DocMetadata;

package/dist/components/docs/DocNavigation.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+
+  interface NavDoc {
+    title: string;
+    slug: string;
+  }
+
+  interface Props {
+    previousDoc?: NavDoc;
+    nextDoc?: NavDoc;
+    version: string;
+  }
+
+  let { previousDoc, nextDoc, version }: Props = $props();
+</script>
+
+{#if previousDoc || nextDoc}
+  <div class="mt-12 pt-8 border-t border-border grid grid-cols-2 gap-4">
+    {#if previousDoc}
+      <a
+        href="/docs/{version}/{previousDoc.slug}"
+        class="group flex flex-col gap-2 p-4 rounded-xl border border-border hover:border-primary/50 hover:bg-muted/50 transition-all"
+        style="text-decoration: none !important;"
+      >
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          <ChevronLeft class="h-4 w-4" />
+          <span>Previous</span>
+        </div>
+        <div class="text-base font-medium text-foreground group-hover:text-primary transition-colors">
+          {previousDoc.title}
+        </div>
+      </a>
+    {:else}
+      <div></div>
+    {/if}
+
+    {#if nextDoc}
+      <a
+        href="/docs/{version}/{nextDoc.slug}"
+        class="group flex flex-col gap-2 p-4 rounded-xl border border-border hover:border-primary/50 hover:bg-muted/50 transition-all text-right"
+        style="text-decoration: none !important;"
+      >
+        <div class="flex items-center justify-end gap-2 text-sm text-muted-foreground">
+          <span>Next</span>
+          <ChevronRight class="h-4 w-4" />
+        </div>
+        <div class="text-base font-medium text-foreground group-hover:text-primary transition-colors">
+          {nextDoc.title}
+        </div>
+      </a>
+    {:else}
+      <div></div>
+    {/if}
+  </div>
+{/if}

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

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

package/dist/components/docs/DocTags.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Tag } from 'lucide-svelte';
+
+  interface Props {
+    tags: string[];
+  }
+
+  let { tags }: Props = $props();
+</script>
+
+{#if tags && tags.length > 0}
+  <div class="flex flex-wrap items-center gap-2 mt-6 pt-4 border-t border-border">
+    <Tag class="h-3.5 w-3.5 text-muted-foreground" />
+    {#each tags as tag}
+      <span
+        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground"
+      >
+        {tag}
+      </span>
+    {/each}
+  </div>
+{/if}

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

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

package/dist/components/docs/DraftBadge.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Eye } from 'lucide-svelte';
+</script>
+
+<div
+  class="inline-flex items-center gap-1.5 px-3 py-1 rounded-md bg-yellow-500/10 border border-yellow-500/20 text-yellow-700 dark:text-yellow-300 text-xs font-medium mb-4"
+>
+  <Eye class="h-3.5 w-3.5" />
+  <span>Draft - Not visible in production</span>
+</div>

package/dist/components/docs/DraftBadge.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 DraftBadge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DraftBadge = InstanceType<typeof DraftBadge>;
+export default DraftBadge;

package/dist/components/docs/Footer.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { SpecraConfig } from '../../config.types.js';
+  import Logo from './Logo.svelte';
+
+  interface Props {
+    config: SpecraConfig;
+  }
+
+  let { config }: Props = $props();
+
+  // The watermark is ALWAYS shown by default per the license.
+  // It can only be hidden with an active paid subscription (Starter+).
+  // Setting showBranding: false without a paid tier is a license violation.
+  let hideBranding = $derived(config.footer?.branding?.showBranding === false);
+</script>
+
+<footer class="bg-muted/30 dark:bg-muted/10 rounded-2xl mt-24">
+  <div class="px-2 md:px-6 py-12">
+    {#if config.footer?.links && config.footer.links.length > 0}
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+        {#each config.footer.links as column, idx (idx)}
+          <div>
+            <h3 class="font-semibold text-foreground mb-4">{column.title}</h3>
+            <ul class="space-y-2">
+              {#each column.items as item, itemIdx (itemIdx)}
+                <li>
+                  <a
+                    href={item.href}
+                    class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <div class="pt-8 border-t border-border/50">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-4">
+        {#if config.footer?.copyright}
+          <p class="text-sm text-muted-foreground text-center md:text-left">
+            {config.footer.copyright}
+          </p>
+        {/if}
+
+        {#if !hideBranding}
+          <div class="flex items-center gap-2 text-sm text-muted-foreground">
+            {#if config.footer?.branding?.logo}
+              <Logo
+                logo={config.footer.branding.logo}
+                alt={config.footer.branding.title || 'Powered by'}
+                className="h-5 w-auto object-contain"
+              />
+            {/if}
+            <span>Powered by</span>
+            <a
+              href="https://specra-docs.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="font-semibold hover:text-foreground transition-colors"
+            >
+              Specra
+            </a>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,7 @@
+import type { SpecraConfig } from '../../config.types.js';
+interface Props {
+    config: SpecraConfig;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/docs/Frame.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    src: string;
+    title?: string;
+    height?: number | string;
+    width?: string;
+  }
+
+  let {
+    src,
+    title = 'Embedded content',
+    height = 500,
+    width = '100%',
+  }: Props = $props();
+</script>
+
+<div class="my-6 rounded-xl border border-border overflow-hidden bg-muted/30">
+  <iframe
+    {src}
+    {title}
+    {width}
+    {height}
+    class="w-full"
+    loading="lazy"
+    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+  ></iframe>
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    src: string;
+    title?: string;
+    height?: number | string;
+    width?: string;
+}
+declare const Frame: import("svelte").Component<Props, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/docs/Header.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { Search, Menu, Github, Twitter, MessageCircle } from 'lucide-svelte';
+  import { getConfigContext } from '../../stores/config.js';
+  import { sidebarStore } from '../../stores/sidebar.js';
+  import VersionSwitcher from './VersionSwitcher.svelte';
+  import ThemeToggle from './ThemeToggle.svelte';
+  import SearchModal from './SearchModal.svelte';
+  import Logo from './Logo.svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+
+  interface Props {
+    currentVersion: string;
+    versions: string[];
+    config?: SpecraConfig;
+  }
+
+  let { currentVersion, versions, config: configProp }: Props = $props();
+
+  const configStore = getConfigContext();
+  let config = $derived(configProp || $configStore);
+  let searchOpen = $state(false);
+  let isFlush = $derived(config?.navigation?.sidebarStyle === 'flush');
+
+  $effect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        searchOpen = true;
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  });
+</script>
+
+<header class="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+  <div class="{isFlush ? '' : 'container mx-auto'} flex h-16 items-center justify-between px-4 md:px-6">
+    <div class="flex items-center gap-1">
+      <button
+        onclick={() => sidebarStore.toggle()}
+        class="lg:hidden hover:bg-muted p-2 rounded-md transition-colors"
+        aria-label="Toggle menu"
+      >
+        <Menu class="h-5 w-5" />
+      </button>
+      <a href="/" class="flex items-center gap-2">
+        {#if !config.site.hideLogo}
+          {#if config.site.logo}
+            <Logo logo={config.site.logo} alt={config.site.title} className="w-18 object-contain" />
+          {:else}
+            <div class="h-8 w-8 rounded-xl bg-primary flex items-center justify-center">
+              <span class="text-primary-foreground font-bold text-lg">
+                {config.site.title.charAt(0).toUpperCase()}
+              </span>
+            </div>
+          {/if}
+        {/if}
+        {#if !config.site.hideTitle}
+          <span class="font-semibold text-lg text-foreground">{config.site.title ?? 'Specra'}</span>
+        {/if}
+      </a>
+    </div>
+
+    <div class="flex items-center gap-2">
+      {#if config.search?.enabled}
+        <button
+          onclick={() => (searchOpen = true)}
+          class="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground bg-muted rounded-md transition-colors"
+        >
+          <Search class="h-4 w-4" />
+          <span class="hidden sm:inline">{config.search.placeholder || 'Search'}</span>
+          <kbd class="hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-background px-1.5 font-mono text-xs font-medium">
+            ⌘K
+          </kbd>
+        </button>
+      {/if}
+
+      {#if config.features?.versioning}
+        <VersionSwitcher {currentVersion} {versions} />
+      {/if}
+
+      <!-- Social Links -->
+      {#if config.social?.github}
+        <a
+          href={config.social.github}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hidden md:flex items-center justify-center h-9 w-9 rounded-md hover:bg-muted transition-colors"
+          aria-label="GitHub"
+        >
+          <Github class="h-4 w-4" />
+        </a>
+      {/if}
+      {#if config.social?.twitter}
+        <a
+          href={config.social.twitter}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hidden md:flex items-center justify-center h-9 w-9 rounded-md hover:bg-muted transition-colors"
+          aria-label="Twitter"
+        >
+          <Twitter class="h-4 w-4" />
+        </a>
+      {/if}
+      {#if config.social?.discord}
+        <a
+          href={config.social.discord}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hidden md:flex items-center justify-center h-9 w-9 rounded-md hover:bg-muted transition-colors"
+          aria-label="Discord"
+        >
+          <MessageCircle class="h-4 w-4" />
+        </a>
+      {/if}
+
+      <ThemeToggle />
+    </div>
+  </div>
+
+  <!-- Search Modal -->
+  <SearchModal isOpen={searchOpen} onClose={() => (searchOpen = false)} {config} />
+</header>

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

@@ -0,0 +1,9 @@
+import type { SpecraConfig } from '../../config.types.js';
+interface Props {
+    currentVersion: string;
+    versions: string[];
+    config?: SpecraConfig;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/docs/HeaderWithMenu.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { sidebarStore } from '../../stores/sidebar.js';
+  import type { Snippet } from 'svelte';
+
+  /**
+   * HeaderWithMenu wraps a header snippet and provides mobile menu toggle functionality.
+   * In Svelte, instead of React's cloneElement pattern, the header component
+   * directly accesses the sidebarStore for toggle behavior.
+   * This component exists as a thin wrapper for layout composition.
+   */
+  interface Props {
+    /** Header content to render */
+    header?: Snippet;
+    /** Optional: override the toggle handler */
+    onMenuClick?: () => void;
+    children?: Snippet;
+  }
+
+  let { header, onMenuClick, children }: Props = $props();
+
+  function handleMenuClick() {
+    if (onMenuClick) {
+      onMenuClick();
+    } else {
+      sidebarStore.toggle();
+    }
+  }
+</script>
+
+{#if header}
+  {@render header()}
+{:else if children}
+  {@render children()}
+{/if}

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+/**
+ * HeaderWithMenu wraps a header snippet and provides mobile menu toggle functionality.
+ * In Svelte, instead of React's cloneElement pattern, the header component
+ * directly accesses the sidebarStore for toggle behavior.
+ * This component exists as a thin wrapper for layout composition.
+ */
+interface Props {
+    /** Header content to render */
+    header?: Snippet;
+    /** Optional: override the toggle handler */
+    onMenuClick?: () => void;
+    children?: Snippet;
+}
+declare const HeaderWithMenu: import("svelte").Component<Props, {}, "">;
+type HeaderWithMenu = ReturnType<typeof HeaderWithMenu>;
+export default HeaderWithMenu;

package/dist/components/docs/HotReloadIndicator.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { RefreshCw } from 'lucide-svelte';
+  import { browser } from '$app/environment';
+  import { dev } from '$app/environment';
+
+  let isReloading = $state(false);
+  let showIndicator = $state(false);
+
+  $effect(() => {
+    if (!browser || !dev) return;
+
+    // Listen for Vite HMR events
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:beforeUpdate', () => {
+        isReloading = true;
+        showIndicator = true;
+      });
+
+      import.meta.hot.on('vite:afterUpdate', () => {
+        isReloading = false;
+        // Keep indicator visible briefly after update
+        setTimeout(() => {
+          showIndicator = false;
+        }, 1500);
+      });
+
+      import.meta.hot.on('vite:error', () => {
+        isReloading = false;
+        showIndicator = false;
+      });
+    }
+  });
+</script>
+
+{#if dev && showIndicator}
+  <div
+    class="fixed top-4 right-4 z-50 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full shadow-lg backdrop-blur-sm text-xs font-medium transition-all duration-300 {isReloading
+      ? 'bg-blue-500/90 text-white'
+      : 'bg-green-500/90 text-white'}"
+  >
+    <RefreshCw class="h-3 w-3 {isReloading ? 'animate-spin' : ''}" />
+    <span>{isReloading ? 'Reloading...' : 'Updated'}</span>
+  </div>
+{/if}

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

@@ -0,0 +1,3 @@
+declare const HotReloadIndicator: import("svelte").Component<Record<string, never>, {}, "">;
+type HotReloadIndicator = ReturnType<typeof HotReloadIndicator>;
+export default HotReloadIndicator;

package/dist/components/docs/Icon.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import * as icons from 'lucide-svelte';
+  import type { ComponentType } from 'svelte';
+
+  interface Props {
+    icon: string | ComponentType;
+    iconType?: 'lucide' | 'url' | 'fa' | 'auto';
+    color?: string;
+    size?: number | string;
+    className?: string;
+  }
+
+  let { icon, iconType = 'auto', color, size = 20, className = '' }: Props = $props();
+
+  // Convert kebab-case or lowercase to PascalCase for Lucide icon lookup
+  function toPascalCase(str: string): string {
+    return str
+      .split(/[-_\s]/)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join('');
+  }
+
+  // Resolve a string icon name to a Lucide component
+  function getLucideIcon(name: string): ComponentType | null {
+    const pascalName = toPascalCase(name);
+    const iconMap = icons as Record<string, ComponentType>;
+    return iconMap[pascalName] || null;
+  }
+
+  // Determine icon type from the icon value
+  function detectIconType(iconValue: string): 'lucide' | 'url' | 'fa' | 'text' {
+    if (iconValue.startsWith('http') || iconValue.startsWith('/') || iconValue.startsWith('data:')) {
+      return 'url';
+    }
+    if (iconValue.startsWith('fa-') || iconValue.startsWith('fas ') || iconValue.startsWith('fab ') || iconValue.startsWith('far ')) {
+      return 'fa';
+    }
+    // Check if it's a valid Lucide icon
+    if (getLucideIcon(iconValue)) {
+      return 'lucide';
+    }
+    return 'text';
+  }
+
+  const resolvedType = $derived(
+    typeof icon === 'string'
+      ? iconType === 'auto'
+        ? detectIconType(icon)
+        : iconType
+      : 'component'
+  );
+
+  const lucideComponent = $derived(
+    typeof icon === 'string' && resolvedType === 'lucide' ? getLucideIcon(icon) : null
+  );
+
+  const sizeValue = $derived(typeof size === 'number' ? `${size}px` : size);
+  const sizeNum = $derived(typeof size === 'string' ? parseInt(size, 10) || 20 : size);
+</script>
+
+{#if typeof icon !== 'string'}
+  <!-- Svelte component passed directly -->
+  <svelte:component
+    this={icon}
+    size={sizeNum}
+    class="inline-block {className}"
+    style={color ? `color: ${color}` : undefined}
+  />
+{:else if resolvedType === 'lucide' && lucideComponent}
+  <!-- Lucide icon by name -->
+  <svelte:component
+    this={lucideComponent}
+    size={sizeNum}
+    class="inline-block {className}"
+    style={color ? `color: ${color}` : undefined}
+  />
+{:else if resolvedType === 'url'}
+  <!-- URL-based icon (image) -->
+  <img
+    src={icon}
+    alt=""
+    width={sizeNum}
+    height={sizeNum}
+    class="inline-block object-contain {className}"
+    style="width: {sizeValue}; height: {sizeValue};"
+  />
+{:else if resolvedType === 'fa'}
+  <!-- Font Awesome icon -->
+  <i
+    class="{icon} {className}"
+    style="font-size: {sizeValue}; {color ? `color: ${color}` : ''}"
+    aria-hidden="true"
+  ></i>
+{:else}
+  <!-- Fallback: render text (emoji or single char) -->
+  <span
+    class="inline-flex items-center justify-center {className}"
+    style="width: {sizeValue}; height: {sizeValue}; font-size: {sizeValue}; line-height: 1; {color ? `color: ${color}` : ''}"
+    aria-hidden="true"
+  >
+    {icon}
+  </span>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { ComponentType } from 'svelte';
+interface Props {
+    icon: string | ComponentType;
+    iconType?: 'lucide' | 'url' | 'fa' | 'auto';
+    color?: string;
+    size?: number | string;
+    className?: string;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;