specra 0.2.6 → 0.2.7

package/config/specra.config.schema.json

@@ -67,6 +67,25 @@
       ],
       "type": "object"
     },
+    "DefaultProductConfig": {
+      "additionalProperties": false,
+      "description": "Default product configuration in specra.config.json under site.defaultProduct. Used when the default product needs a custom label/icon instead of inheriting from site title.",
+      "properties": {
+        "activeVersion": {
+          "description": "Override active version for the default product",
+          "type": "string"
+        },
+        "icon": {
+          "description": "Icon for the default product",
+          "type": "string"
+        },
+        "label": {
+          "description": "Display name for the default product in the switcher",
+          "type": "string"
+        }
+      },
+      "type": "object"
+    },
     "DeploymentConfig": {
       "additionalProperties": false,
       "description": "Deployment configuration for different hosting scenarios",
@@ -410,6 +429,10 @@
           "description": "Base URL path for the documentation (e.g., '/docs')",
           "type": "string"
         },
+        "defaultProduct": {
+          "$ref": "#/definitions/DefaultProductConfig",
+          "description": "Configuration for the default product in multi-product mode"
+        },
         "description": {
           "description": "Short description of the documentation",
           "type": "string"

package/dist/category.d.ts

@@ -18,4 +18,4 @@ export declare function getCategoryConfig(folderPath: string): CategoryConfig |
 /**
  * Get all category configs for a version
  */
-export declare function getAllCategoryConfigs(version: string): Map<string, CategoryConfig>;
+export declare function getAllCategoryConfigs(version: string, product?: string): Map<string, CategoryConfig>;

package/dist/category.js

@@ -22,9 +22,11 @@ export function getCategoryConfig(folderPath) {
 /**
  * Get all category configs for a version
  */
-export function getAllCategoryConfigs(version) {
+export function getAllCategoryConfigs(version, product) {
     const configs = new Map();
-    const versionDir = path.join(DOCS_DIR, version);
+    const versionDir = (product && product !== "_default_")
+        ? path.join(DOCS_DIR, product, version)
+        : path.join(DOCS_DIR, version);
     if (!fs.existsSync(versionDir)) {
         return configs;
     }

package/dist/components/docs/Breadcrumb.svelte

@@ -6,9 +6,16 @@
     version: string;
     slug: string;
     title: string;
+    product?: string;
   }
 
-  let { version, slug, title }: Props = $props();
+  let { version, slug, title, product }: Props = $props();
+
+  let docsBase = $derived(
+    product && product !== '_default_'
+      ? `/docs/${product}/${version}`
+      : `/docs/${version}`
+  );
 
   const configStore = getConfigContext();
   let config = $derived($configStore);
@@ -24,7 +31,7 @@
     const potentialLocale = parts[0];
     const isLc = locales.includes(potentialLocale);
 
-    const homeHref = isLc ? `/docs/${version}/${potentialLocale}` : `/docs/${version}`;
+    const homeHref = isLc ? `${docsBase}/${potentialLocale}` : docsBase;
 
     const crumbs: Array<{ label: string; href: string }> = [
       { label: 'Docs', href: homeHref }
@@ -45,14 +52,14 @@
         label: part
           .replace(/-/g, ' ')
           .replace(/\b\w/g, (l) => l.toUpperCase()),
-        href: `/docs/${version}/${currentPath}`
+        href: `${docsBase}/${currentPath}`
       });
     }
 
     // Add current page
     crumbs.push({
       label: title,
-      href: `/docs/${version}/${slug}`
+      href: `${docsBase}/${slug}`
     });
 
     return crumbs;

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

@@ -2,6 +2,7 @@ interface Props {
     version: string;
     slug: string;
     title: string;
+    product?: string;
 }
 declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;

package/dist/components/docs/CategoryIndex.svelte

@@ -22,6 +22,7 @@
   interface Props {
     categoryPath: string;
     version: string;
+    product?: string;
     allDocs: DocItem[];
     title?: string;
     description?: string;
@@ -29,7 +30,7 @@
     config: SpecraConfig;
   }
 
-  let { categoryPath, version, allDocs, title, description, content, config }: Props = $props();
+  let { categoryPath, version, product, allDocs, title, description, content, config }: Props = $props();
 
   // Filter docs that belong to this category (direct children)
   const childDocs = $derived(() => {
@@ -51,7 +52,11 @@
       });
   });
 
-  const baseUrl = $derived(config.site?.baseUrl?.replace(/\/$/, '') || '');
+  const baseUrl = $derived(
+    product && product !== '_default_'
+      ? `/docs/${product}`
+      : (config.site?.baseUrl?.replace(/\/$/, '') || '')
+  );
 </script>
 
 <div class="space-y-8">

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

@@ -18,6 +18,7 @@ interface DocItem {
 interface Props {
     categoryPath: string;
     version: string;
+    product?: string;
     allDocs: DocItem[];
     title?: string;
     description?: string;

package/dist/components/docs/DocLayout.svelte

@@ -32,20 +32,21 @@
     nextDoc?: NavDoc;
     version: string;
     slug: string;
+    product?: string;
     config: SpecraConfig;
     children: Snippet;
   }
 
-  let { meta, previousDoc, nextDoc, version, slug, config, children }: Props = $props();
+  let { meta, previousDoc, nextDoc, version, slug, product, 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
-  );
+  // Build edit URL if configured — include product prefix for non-default products
+  let editUrl = $derived.by(() => {
+    if (!config.features?.editUrl || typeof config.features.editUrl !== 'string') return null;
+    const productPrefix = product && product !== '_default_' ? `${product}/` : '';
+    return `${config.features.editUrl}/${productPrefix}${version}/${slug}.mdx`;
+  });
 </script>
 
 <article class="flex-1 min-w-0">
@@ -103,5 +104,5 @@
     </div>
   {/if}
 
-  <DocNavigation {previousDoc} {nextDoc} {version} />
+  <DocNavigation {previousDoc} {nextDoc} {version} {product} />
 </article>

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

@@ -24,6 +24,7 @@ interface Props {
     nextDoc?: NavDoc;
     version: string;
     slug: string;
+    product?: string;
     config: SpecraConfig;
     children: Snippet;
 }

package/dist/components/docs/DocNavigation.svelte

@@ -10,16 +10,23 @@
     previousDoc?: NavDoc;
     nextDoc?: NavDoc;
     version: string;
+    product?: string;
   }
 
-  let { previousDoc, nextDoc, version }: Props = $props();
+  let { previousDoc, nextDoc, version, product }: Props = $props();
+
+  let docsBase = $derived(
+    product && product !== '_default_'
+      ? `/docs/${product}/${version}`
+      : `/docs/${version}`
+  );
 </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}"
+        href="{docsBase}/{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;"
       >
@@ -37,7 +44,7 @@
 
     {#if nextDoc}
       <a
-        href="/docs/{version}/{nextDoc.slug}"
+        href="{docsBase}/{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;"
       >

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

@@ -6,6 +6,7 @@ interface Props {
     previousDoc?: NavDoc;
     nextDoc?: NavDoc;
     version: string;
+    product?: string;
 }
 declare const DocNavigation: import("svelte").Component<Props, {}, "">;
 type DocNavigation = ReturnType<typeof DocNavigation>;

package/dist/components/docs/Header.svelte

@@ -3,6 +3,7 @@
   import { getConfigContext } from '../../stores/config.js';
   import { sidebarStore } from '../../stores/sidebar.js';
   import VersionSwitcher from './VersionSwitcher.svelte';
+  import ProductSwitcher from './ProductSwitcher.svelte';
   import VersionBanner from './VersionBanner.svelte';
   import ThemeToggle from './ThemeToggle.svelte';
   import SearchModal from './SearchModal.svelte';
@@ -20,16 +21,27 @@
     hidden?: boolean;
   }
 
+  interface ProductItem {
+    slug: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+    activeVersion?: string;
+    isDefault: boolean;
+  }
+
   interface Props {
     currentVersion: string;
     versions: string[];
     versionsMeta?: VersionMeta[];
     versionBanner?: BannerConfig;
     config?: SpecraConfig;
+    products?: ProductItem[];
+    currentProduct?: string;
     subheader?: Snippet;
   }
 
-  let { currentVersion, versions, versionsMeta, versionBanner, config: configProp, subheader }: Props = $props();
+  let { currentVersion, versions = [], versionsMeta, versionBanner, config: configProp, products, currentProduct, subheader }: Props = $props();
 
   const configStore = getConfigContext();
   let config = $derived(configProp || $configStore);
@@ -115,6 +127,10 @@
         </button>
       {/if}
 
+      {#if products && products.length > 1}
+        <ProductSwitcher {products} {currentProduct} />
+      {/if}
+
       {#if config.features?.versioning}
         <VersionSwitcher {currentVersion} {versions} {versionsMeta} />
       {/if}

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

@@ -7,12 +7,22 @@ interface VersionMeta {
     badge?: string;
     hidden?: boolean;
 }
+interface ProductItem {
+    slug: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+    activeVersion?: string;
+    isDefault: boolean;
+}
 interface Props {
     currentVersion: string;
     versions: string[];
     versionsMeta?: VersionMeta[];
     versionBanner?: BannerConfig;
     config?: SpecraConfig;
+    products?: ProductItem[];
+    currentProduct?: string;
     subheader?: Snippet;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;

package/dist/components/docs/MobileDocLayout.svelte

@@ -33,6 +33,7 @@
   interface Props {
     docs: DocItem[];
     version: string;
+    product?: string;
     config: SpecraConfig;
     activeTabGroup?: string;
     onTabChange?: (tabId: string) => void;
@@ -41,7 +42,7 @@
     children: Snippet;
   }
 
-  let { docs, version, config, activeTabGroup, onTabChange, header, toc, children }: Props = $props();
+  let { docs = [], version, product, config, activeTabGroup, onTabChange, header, toc, children }: Props = $props();
 
   let sidebarOpen = $derived($sidebarStore);
   let isFlush = $derived(config.navigation?.sidebarStyle === 'flush');
@@ -126,6 +127,7 @@
         <SidebarMenuItems
           {docs}
           {version}
+          {product}
           {config}
           onLinkClick={closeSidebar}
           {activeTabGroup}
@@ -142,6 +144,7 @@
         <Sidebar
           {docs}
           {version}
+          {product}
           {config}
           {activeTabGroup}
         />
@@ -174,6 +177,7 @@
           <Sidebar
             {docs}
             {version}
+            {product}
             {config}
             {activeTabGroup}
           />

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

@@ -23,6 +23,7 @@ interface DocItem {
 interface Props {
     docs: DocItem[];
     version: string;
+    product?: string;
     config: SpecraConfig;
     activeTabGroup?: string;
     onTabChange?: (tabId: string) => void;

package/dist/components/docs/MobileSidebar.svelte

@@ -29,12 +29,13 @@
   interface Props {
     docs: DocItem[];
     version: string;
+    product?: string;
     config: SpecraConfig;
     activeTabGroup?: string;
     onTabChange?: (tabId: string) => void;
   }
 
-  let { docs, version, config, activeTabGroup, onTabChange }: Props = $props();
+  let { docs = [], version, product, config, activeTabGroup, onTabChange }: Props = $props();
 
   let isOpen = $derived($sidebarStore);
 
@@ -113,6 +114,7 @@
       <SidebarMenuItems
         {docs}
         {version}
+        {product}
         {config}
         onLinkClick={handleClose}
         {activeTabGroup}

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

@@ -22,6 +22,7 @@ interface DocItem {
 interface Props {
     docs: DocItem[];
     version: string;
+    product?: string;
     config: SpecraConfig;
     activeTabGroup?: string;
     onTabChange?: (tabId: string) => void;

package/dist/components/docs/MobileSidebarWrapper.svelte

@@ -31,11 +31,12 @@
     header: Snippet;
     docs: DocItem[];
     version: string;
+    product?: string;
     config: SpecraConfig;
     activeTabGroup?: string;
   }
 
-  let { header, docs, version, config, activeTabGroup }: Props = $props();
+  let { header, docs, version, product, config, activeTabGroup }: Props = $props();
 
   let sidebarOpen = $derived($sidebarStore);
 
@@ -113,6 +114,7 @@
       <SidebarMenuItems
         {docs}
         {version}
+        {product}
         {config}
         onLinkClick={closeSidebar}
         {activeTabGroup}

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

@@ -24,6 +24,7 @@ interface Props {
     header: Snippet;
     docs: DocItem[];
     version: string;
+    product?: string;
     config: SpecraConfig;
     activeTabGroup?: string;
 }

package/dist/components/docs/ProductSwitcher.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { ChevronDown, Check } from 'lucide-svelte';
+  import { goto } from '$app/navigation';
+  import { browser } from '$app/environment';
+  import Icon from './Icon.svelte';
+
+  /** Flat shape (from page components) */
+  interface ProductItemFlat {
+    slug: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+    activeVersion?: string;
+    isDefault: boolean;
+  }
+
+  /** Nested shape (from SDK getProducts()) */
+  interface ProductItemNested {
+    slug: string;
+    config: {
+      label: string;
+      icon?: string;
+      badge?: string;
+      activeVersion?: string;
+    };
+    isDefault: boolean;
+  }
+
+  type ProductInput = ProductItemFlat | ProductItemNested;
+
+  interface Props {
+    products: ProductInput[];
+    currentProduct?: string;
+  }
+
+  let { products, currentProduct }: Props = $props();
+
+  /** Normalize either shape to flat */
+  function normalize(p: ProductInput): ProductItemFlat {
+    if ('config' in p && p.config) {
+      return {
+        slug: p.slug,
+        label: p.config.label,
+        icon: p.config.icon,
+        badge: p.config.badge,
+        activeVersion: p.config.activeVersion,
+        isDefault: p.isDefault,
+      };
+    }
+    return p as ProductItemFlat;
+  }
+
+  let normalizedProducts = $derived(products.map(normalize));
+
+  let isOpen = $state(false);
+  let dropdownEl = $state<HTMLDivElement | null>(null);
+
+  let currentLabel = $derived.by(() => {
+    const product = normalizedProducts.find(p =>
+      currentProduct ? p.slug === currentProduct : p.isDefault
+    );
+    return product?.label || 'Docs';
+  });
+
+  let currentIcon = $derived.by(() => {
+    const product = normalizedProducts.find(p =>
+      currentProduct ? p.slug === currentProduct : p.isDefault
+    );
+    return product?.icon;
+  });
+
+  $effect(() => {
+    if (!browser || !isOpen) return;
+
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownEl && !dropdownEl.contains(e.target as Node)) {
+        isOpen = false;
+      }
+    }
+
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        isOpen = false;
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  });
+
+  function switchProduct(product: ProductItemFlat) {
+    const isCurrentProduct = currentProduct
+      ? product.slug === currentProduct
+      : product.isDefault;
+
+    if (isCurrentProduct) {
+      isOpen = false;
+      return;
+    }
+
+    isOpen = false;
+
+    const version = product.activeVersion || 'v1.0.0';
+    if (product.isDefault) {
+      goto(`/docs/${version}`);
+    } else {
+      goto(`/docs/${product.slug}/${version}`);
+    }
+  }
+
+  function isCurrentProductItem(product: ProductItemFlat): boolean {
+    return currentProduct
+      ? product.slug === currentProduct
+      : product.isDefault;
+  }
+</script>
+
+{#if products.length > 1}
+  <div class="relative" bind:this={dropdownEl}>
+    <button
+      onclick={() => (isOpen = !isOpen)}
+      class="flex items-center gap-1.5 h-8 px-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-accent transition-colors text-foreground"
+      aria-expanded={isOpen}
+      aria-haspopup="listbox"
+      aria-label="Switch product"
+    >
+      {#if currentIcon}
+        <Icon icon={currentIcon} size={14} />
+      {/if}
+      <span>{currentLabel}</span>
+      <ChevronDown class="h-3.5 w-3.5 text-muted-foreground transition-transform {isOpen ? 'rotate-180' : ''}" />
+    </button>
+
+    {#if isOpen}
+      <div
+        class="absolute top-full left-0 mt-1 w-56 py-1 bg-popover border border-border rounded-md shadow-lg z-50"
+        role="listbox"
+        aria-label="Available products"
+      >
+        {#each normalizedProducts as product}
+          <button
+            role="option"
+            aria-selected={isCurrentProductItem(product)}
+            onclick={() => switchProduct(product)}
+            class="w-full flex items-center justify-between px-3 py-2 text-sm transition-colors {isCurrentProductItem(product)
+              ? 'text-primary bg-accent/50 font-medium'
+              : 'text-foreground hover:bg-accent'}"
+          >
+            <span class="flex items-center gap-2">
+              {#if product.icon}
+                <Icon icon={product.icon} size={14} />
+              {/if}
+              <span class="flex flex-col items-start">
+                <span class="flex items-center gap-1.5">
+                  {product.label}
+                  {#if product.badge}
+                    <span class="px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-primary/10 text-primary leading-none">{product.badge}</span>
+                  {/if}
+                </span>
+              </span>
+            </span>
+            {#if isCurrentProductItem(product)}
+              <Check class="h-3.5 w-3.5 text-primary" />
+            {/if}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,28 @@
+/** Flat shape (from page components) */
+interface ProductItemFlat {
+    slug: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+    activeVersion?: string;
+    isDefault: boolean;
+}
+/** Nested shape (from SDK getProducts()) */
+interface ProductItemNested {
+    slug: string;
+    config: {
+        label: string;
+        icon?: string;
+        badge?: string;
+        activeVersion?: string;
+    };
+    isDefault: boolean;
+}
+type ProductInput = ProductItemFlat | ProductItemNested;
+interface Props {
+    products: ProductInput[];
+    currentProduct?: string;
+}
+declare const ProductSwitcher: import("svelte").Component<Props, {}, "">;
+type ProductSwitcher = ReturnType<typeof ProductSwitcher>;
+export default ProductSwitcher;

package/dist/components/docs/Sidebar.svelte

@@ -26,12 +26,13 @@
   interface Props {
     docs: DocItem[];
     version: string;
+    product?: string;
     onLinkClick?: () => void;
     config: SpecraConfig;
     activeTabGroup?: string;
   }
 
-  let { docs, version, onLinkClick, config, activeTabGroup }: Props = $props();
+  let { docs = [], version, product, onLinkClick, config, activeTabGroup }: Props = $props();
 
   let isFlush = $derived(config.navigation?.sidebarStyle === 'flush');
   let containerClass = $derived(
@@ -53,6 +54,7 @@
       <SidebarMenuItems
         {docs}
         {version}
+        {product}
         {onLinkClick}
         {config}
         {activeTabGroup}

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

@@ -22,6 +22,7 @@ interface DocItem {
 interface Props {
     docs: DocItem[];
     version: string;
+    product?: string;
     onLinkClick?: () => void;
     config: SpecraConfig;
     activeTabGroup?: string;