specra 0.1.13 → 0.2.0

package/dist/components/docs/MobileDocLayout.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  import { sidebarStore } from '../../stores/sidebar.js';
+  import Footer from './Footer.svelte';
+  import SiteBanner from './SiteBanner.svelte';
+  import TabGroups from './TabGroups.svelte';
+  import Sidebar from './Sidebar.svelte';
+  import SidebarMenuItems from './SidebarMenuItems.svelte';
+  import Logo from './Logo.svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+  import type { Snippet } from 'svelte';
+
+  interface DocItem {
+    title: string;
+    slug: string;
+    filePath: string;
+    section?: string;
+    group?: string;
+    sidebar?: string;
+    sidebar_position?: number;
+    categoryLabel?: string;
+    categoryPosition?: number;
+    categoryCollapsible?: boolean;
+    categoryCollapsed?: boolean;
+    categoryIcon?: string;
+    categoryTabGroup?: string;
+    meta?: {
+      icon?: string;
+      tab_group?: string;
+      [key: string]: any;
+    };
+  }
+
+  interface Props {
+    docs: DocItem[];
+    version: string;
+    config: SpecraConfig;
+    activeTabGroup?: string;
+    onTabChange?: (tabId: string) => void;
+    header: Snippet;
+    toc?: Snippet;
+    children: Snippet;
+  }
+
+  let { docs, version, config, activeTabGroup, onTabChange, header, toc, children }: Props = $props();
+
+  let sidebarOpen = $derived($sidebarStore);
+  let isFlush = $derived(config.navigation?.sidebarStyle === 'flush');
+
+  function handleTabChange(tabId: string) {
+    onTabChange?.(tabId);
+  }
+
+  function closeSidebar() {
+    sidebarStore.close();
+  }
+</script>
+
+<div class="min-h-screen bg-background">
+  <!-- Header -->
+  {@render header()}
+
+  <!-- Site-wide Banner -->
+  <SiteBanner {config} />
+
+  <!-- Tab Groups - shown only if configured -->
+  {#if config.navigation?.tabGroups && config.navigation.tabGroups.length > 0}
+    <TabGroups
+      tabGroups={config.navigation.tabGroups}
+      activeTabId={activeTabGroup}
+      onTabChange={handleTabChange}
+      flush={isFlush}
+      {docs}
+      {version}
+    />
+  {/if}
+
+  <!-- Mobile Sidebar Overlay -->
+  {#if sidebarOpen}
+    <div
+      class="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
+      onclick={() => sidebarStore.close()}
+      onkeydown={(e) => { if (e.key === 'Escape') sidebarStore.close(); }}
+      role="button"
+      tabindex="-1"
+      aria-label="Close sidebar"
+    ></div>
+  {/if}
+
+  <!-- Mobile Sidebar -->
+  <div
+    class="lg:hidden fixed top-0 left-0 h-full w-72 bg-background border-r border-border z-50 transform transition-transform duration-300 ease-in-out {sidebarOpen ? 'translate-x-0' : '-translate-x-full'}"
+  >
+    <div class="flex flex-col h-full">
+      <!-- Logo and Site Title Header -->
+      <div class="shrink-0 px-4 py-4 border-b border-border">
+        <a href="/" class="flex items-center gap-2 group justify-center">
+          {#if !config.site?.hideLogo}
+            <Logo
+              logo={config.site?.logo}
+              alt={config.site?.title || 'Logo'}
+              className="w-18 object-contain"
+            />
+          {/if}
+          <div class="flex flex-col">
+            <span class="font-semibold text-foreground group-hover:text-primary transition-colors">
+              {config.site?.title || 'Documentation'}
+            </span>
+            {#if config.site?.description}
+              <span class="text-xs text-muted-foreground line-clamp-1">
+                {config.site.description}
+              </span>
+            {/if}
+          </div>
+        </a>
+      </div>
+
+      <!-- Documentation Label -->
+      <div class="shrink-0 px-4 pt-4 pb-2">
+        <h2 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">Documentation</h2>
+      </div>
+
+      <!-- Tab Groups Dropdown - Mobile Only -->
+      {#if config.navigation?.tabGroups && config.navigation.tabGroups.length > 0}
+        <div class="shrink-0 px-4 py-3 border-b border-border">
+          <TabGroups
+            tabGroups={config.navigation.tabGroups}
+            activeTabId={activeTabGroup}
+            onTabChange={handleTabChange}
+            mobileOnly={true}
+            {docs}
+            {version}
+          />
+        </div>
+      {/if}
+
+      <!-- Sidebar Menu Items -->
+      <div class="flex-1 overflow-y-auto px-4 py-4">
+        <SidebarMenuItems
+          {docs}
+          {version}
+          {config}
+          onLinkClick={closeSidebar}
+          {activeTabGroup}
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  {#if isFlush}
+    <div class="flex">
+      <!-- Desktop Sidebar - flush to left edge -->
+      <div class="hidden lg:block">
+        <Sidebar
+          {docs}
+          {version}
+          {config}
+          {activeTabGroup}
+        />
+      </div>
+
+      <main class="flex-1 min-w-0 px-2 md:px-6 py-8">
+        <div class="flex">
+          <div class="flex-1 min-w-0">
+            <div class="flex flex-col gap-2 px-2 md:px-8">
+              <!-- Content -->
+              {@render children()}
+
+              <!-- Footer -->
+              <Footer {config} />
+            </div>
+          </div>
+
+          <!-- ToC -->
+          {#if toc}
+            {@render toc()}
+          {/if}
+        </div>
+      </main>
+    </div>
+  {:else}
+    <main class="container mx-auto px-2 md:px-6 py-8">
+      <div class="flex">
+        <!-- Desktop Sidebar - inside container -->
+        <div class="hidden lg:block">
+          <Sidebar
+            {docs}
+            {version}
+            {config}
+            {activeTabGroup}
+          />
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-col gap-2 px-2 md:px-8">
+            <!-- Content -->
+            {@render children()}
+
+            <!-- Footer -->
+            <Footer {config} />
+          </div>
+        </div>
+
+        <!-- ToC -->
+        {#if toc}
+          {@render toc()}
+        {/if}
+      </div>
+    </main>
+  {/if}
+</div>

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

@@ -0,0 +1,35 @@
+import type { SpecraConfig } from '../../config.types.js';
+import type { Snippet } from 'svelte';
+interface DocItem {
+    title: string;
+    slug: string;
+    filePath: string;
+    section?: string;
+    group?: string;
+    sidebar?: string;
+    sidebar_position?: number;
+    categoryLabel?: string;
+    categoryPosition?: number;
+    categoryCollapsible?: boolean;
+    categoryCollapsed?: boolean;
+    categoryIcon?: string;
+    categoryTabGroup?: string;
+    meta?: {
+        icon?: string;
+        tab_group?: string;
+        [key: string]: any;
+    };
+}
+interface Props {
+    docs: DocItem[];
+    version: string;
+    config: SpecraConfig;
+    activeTabGroup?: string;
+    onTabChange?: (tabId: string) => void;
+    header: Snippet;
+    toc?: Snippet;
+    children: Snippet;
+}
+declare const MobileDocLayout: import("svelte").Component<Props, {}, "">;
+type MobileDocLayout = ReturnType<typeof MobileDocLayout>;
+export default MobileDocLayout;

package/dist/components/docs/MobileSidebar.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { sidebarStore } from '../../stores/sidebar.js';
+  import TabGroups from './TabGroups.svelte';
+  import SidebarMenuItems from './SidebarMenuItems.svelte';
+  import Logo from './Logo.svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+
+  interface DocItem {
+    title: string;
+    slug: string;
+    filePath: string;
+    section?: string;
+    group?: string;
+    sidebar?: string;
+    sidebar_position?: number;
+    categoryLabel?: string;
+    categoryPosition?: number;
+    categoryCollapsible?: boolean;
+    categoryCollapsed?: boolean;
+    categoryIcon?: string;
+    categoryTabGroup?: string;
+    meta?: {
+      icon?: string;
+      tab_group?: string;
+      [key: string]: any;
+    };
+  }
+
+  interface Props {
+    docs: DocItem[];
+    version: string;
+    config: SpecraConfig;
+    activeTabGroup?: string;
+    onTabChange?: (tabId: string) => void;
+  }
+
+  let { docs, version, config, activeTabGroup, onTabChange }: Props = $props();
+
+  let isOpen = $derived($sidebarStore);
+
+  function handleTabChange(tabId: string) {
+    onTabChange?.(tabId);
+  }
+
+  function handleClose() {
+    sidebarStore.close();
+  }
+</script>
+
+<!-- Mobile Sidebar Overlay -->
+{#if isOpen}
+  <div
+    class="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
+    onclick={handleClose}
+    onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }}
+    role="button"
+    tabindex="-1"
+    aria-label="Close sidebar"
+  ></div>
+{/if}
+
+<!-- Mobile Sidebar -->
+<div
+  class="lg:hidden fixed top-0 left-0 h-full w-72 bg-background border-r border-border z-50 transform transition-transform duration-300 ease-in-out {isOpen ? 'translate-x-0' : '-translate-x-full'}"
+>
+  <div class="flex flex-col h-full">
+    <!-- Logo and Site Title Header -->
+    <div class="shrink-0 px-4 py-4 border-b border-border">
+      <a href="/" class="flex items-center gap-2 group justify-center">
+        {#if !config.site?.hideLogo}
+          <Logo
+            logo={config.site?.logo}
+            alt={config.site?.title || 'Logo'}
+            className="w-18 object-contain"
+          />
+        {/if}
+        <div class="flex flex-col">
+          <span class="font-semibold text-foreground group-hover:text-primary transition-colors">
+            {config.site?.title || 'Documentation'}
+          </span>
+          {#if config.site?.description}
+            <span class="text-xs text-muted-foreground line-clamp-1">
+              {config.site.description}
+            </span>
+          {/if}
+        </div>
+      </a>
+    </div>
+
+    <!-- Documentation Label -->
+    <div class="shrink-0 px-4 pt-4 pb-2">
+      <h2 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
+        Documentation
+      </h2>
+    </div>
+
+    <!-- Tab Groups Dropdown - Mobile Only -->
+    {#if config.navigation?.tabGroups && config.navigation.tabGroups.length > 0}
+      <div class="shrink-0 px-4 py-3 border-b border-border">
+        <TabGroups
+          tabGroups={config.navigation.tabGroups}
+          activeTabId={activeTabGroup || ''}
+          onTabChange={handleTabChange}
+          mobileOnly={true}
+          {docs}
+          {version}
+        />
+      </div>
+    {/if}
+
+    <!-- Sidebar Menu Items -->
+    <div class="flex-1 overflow-y-auto px-4 py-4">
+      <SidebarMenuItems
+        {docs}
+        {version}
+        {config}
+        onLinkClick={handleClose}
+        {activeTabGroup}
+      />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+import type { SpecraConfig } from '../../config.types.js';
+interface DocItem {
+    title: string;
+    slug: string;
+    filePath: string;
+    section?: string;
+    group?: string;
+    sidebar?: string;
+    sidebar_position?: number;
+    categoryLabel?: string;
+    categoryPosition?: number;
+    categoryCollapsible?: boolean;
+    categoryCollapsed?: boolean;
+    categoryIcon?: string;
+    categoryTabGroup?: string;
+    meta?: {
+        icon?: string;
+        tab_group?: string;
+        [key: string]: any;
+    };
+}
+interface Props {
+    docs: DocItem[];
+    version: string;
+    config: SpecraConfig;
+    activeTabGroup?: string;
+    onTabChange?: (tabId: string) => void;
+}
+declare const MobileSidebar: import("svelte").Component<Props, {}, "">;
+type MobileSidebar = ReturnType<typeof MobileSidebar>;
+export default MobileSidebar;

package/dist/components/docs/MobileSidebarWrapper.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { sidebarStore } from '../../stores/sidebar.js';
+  import TabGroups from './TabGroups.svelte';
+  import SidebarMenuItems from './SidebarMenuItems.svelte';
+  import Logo from './Logo.svelte';
+  import type { SpecraConfig } from '../../config.types.js';
+  import type { Snippet } from 'svelte';
+
+  interface DocItem {
+    title: string;
+    slug: string;
+    filePath: string;
+    section?: string;
+    group?: string;
+    sidebar?: string;
+    sidebar_position?: number;
+    categoryLabel?: string;
+    categoryPosition?: number;
+    categoryCollapsible?: boolean;
+    categoryCollapsed?: boolean;
+    categoryIcon?: string;
+    categoryTabGroup?: string;
+    meta?: {
+      icon?: string;
+      tab_group?: string;
+      [key: string]: any;
+    };
+  }
+
+  interface Props {
+    header: Snippet;
+    docs: DocItem[];
+    version: string;
+    config: SpecraConfig;
+    activeTabGroup?: string;
+  }
+
+  let { header, docs, version, config, activeTabGroup }: Props = $props();
+
+  let sidebarOpen = $derived($sidebarStore);
+
+  function closeSidebar() {
+    sidebarStore.close();
+  }
+</script>
+
+<!-- Render header (the Header component reads sidebar store directly for menu toggle) -->
+{@render header()}
+
+<!-- Mobile Sidebar Overlay -->
+{#if sidebarOpen}
+  <div
+    class="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
+    onclick={closeSidebar}
+    onkeydown={(e) => { if (e.key === 'Escape') closeSidebar(); }}
+    role="button"
+    tabindex="-1"
+    aria-label="Close sidebar"
+  ></div>
+{/if}
+
+<!-- Mobile Sidebar -->
+<div
+  class="lg:hidden fixed top-0 left-0 h-full w-72 bg-background border-r border-border z-50 transform transition-transform duration-300 ease-in-out {sidebarOpen ? 'translate-x-0' : '-translate-x-full'}"
+>
+  <div class="flex flex-col h-full">
+    <!-- Logo and Site Title Header -->
+    <div class="shrink-0 px-4 py-4 border-b border-border">
+      <a href="/" class="flex items-center gap-2 group justify-center">
+        {#if !config.site?.hideLogo}
+          <Logo
+            logo={config.site?.logo}
+            alt={config.site?.title || 'Logo'}
+            className="w-18 object-contain"
+          />
+        {/if}
+        <div class="flex flex-col">
+          <span class="font-semibold text-foreground group-hover:text-primary transition-colors">
+            {config.site?.title || 'Documentation'}
+          </span>
+          {#if config.site?.description}
+            <span class="text-xs text-muted-foreground line-clamp-1">
+              {config.site.description}
+            </span>
+          {/if}
+        </div>
+      </a>
+    </div>
+
+    <!-- Documentation Label -->
+    <div class="shrink-0 px-4 pt-4 pb-2">
+      <h2 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
+        Documentation
+      </h2>
+    </div>
+
+    <!-- Tab Groups Dropdown - Mobile Only -->
+    {#if config.navigation?.tabGroups && config.navigation.tabGroups.length > 0}
+      <div class="shrink-0 px-4 py-3 border-b border-border">
+        <TabGroups
+          tabGroups={config.navigation.tabGroups}
+          activeTabId={activeTabGroup || ''}
+          onTabChange={() => {}}
+          mobileOnly={true}
+          {docs}
+          {version}
+        />
+      </div>
+    {/if}
+
+    <!-- Sidebar Menu Items -->
+    <div class="flex-1 overflow-y-auto px-4 py-4">
+      <SidebarMenuItems
+        {docs}
+        {version}
+        {config}
+        onLinkClick={closeSidebar}
+        {activeTabGroup}
+      />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+import type { SpecraConfig } from '../../config.types.js';
+import type { Snippet } from 'svelte';
+interface DocItem {
+    title: string;
+    slug: string;
+    filePath: string;
+    section?: string;
+    group?: string;
+    sidebar?: string;
+    sidebar_position?: number;
+    categoryLabel?: string;
+    categoryPosition?: number;
+    categoryCollapsible?: boolean;
+    categoryCollapsed?: boolean;
+    categoryIcon?: string;
+    categoryTabGroup?: string;
+    meta?: {
+        icon?: string;
+        tab_group?: string;
+        [key: string]: any;
+    };
+}
+interface Props {
+    header: Snippet;
+    docs: DocItem[];
+    version: string;
+    config: SpecraConfig;
+    activeTabGroup?: string;
+}
+declare const MobileSidebarWrapper: import("svelte").Component<Props, {}, "">;
+type MobileSidebarWrapper = ReturnType<typeof MobileSidebarWrapper>;
+export default MobileSidebarWrapper;

package/dist/components/docs/NotFoundContent.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { FileQuestion, Home, ArrowLeft } from 'lucide-svelte';
+
+  interface Props {
+    version?: string;
+  }
+
+  let { version = '' }: Props = $props();
+
+  const homeLink = $derived(version ? `/${version}` : '/');
+</script>
+
+<div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+  <div class="flex items-center justify-center w-20 h-20 rounded-full bg-muted mb-6">
+    <FileQuestion class="h-10 w-10 text-muted-foreground" />
+  </div>
+
+  <h1 class="text-4xl font-bold text-foreground mb-2">404</h1>
+  <h2 class="text-xl font-semibold text-foreground mb-4">Page Not Found</h2>
+  <p class="text-muted-foreground max-w-md mb-8">
+    The page you are looking for does not exist or has been moved. Check the URL or navigate back to the documentation.
+  </p>
+
+  <div class="flex items-center gap-3">
+    <a
+      href={homeLink}
+      class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+    >
+      <Home class="h-4 w-4" />
+      <span>Go to Docs Home</span>
+    </a>
+    <button
+      onclick={() => history.back()}
+      class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md border border-border bg-background hover:bg-accent transition-colors text-foreground"
+    >
+      <ArrowLeft class="h-4 w-4" />
+      <span>Go Back</span>
+    </button>
+  </div>
+</div>

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

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