jamdesk 1.0.0

package/vendored/components/CodeBlockCopyButton.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+
+/**
+ * Helper to create an icon element safely
+ */
+function createIcon(iconClass: string, additionalClass?: string): HTMLElement {
+  const icon = document.createElement('i');
+  icon.className = `${iconClass} text-sm${additionalClass ? ' ' + additionalClass : ''}`;
+  icon.setAttribute('aria-hidden', 'true');
+  return icon;
+}
+
+/**
+ * Client component that adds copy buttons to code blocks after hydration.
+ * This avoids server/client component conflicts by manipulating the DOM directly.
+ * Also enables copy functionality for HTTP code blocks.
+ * Re-runs on page changes to handle new code blocks from client-side navigation.
+ */
+export function CodeBlockCopyButton() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    // Enable copy functionality for HTTP code blocks
+    const httpBlocks = document.querySelectorAll('.http-code-block:not([data-copy-initialized])');
+    httpBlocks.forEach((block) => {
+      block.setAttribute('data-copy-initialized', 'true');
+      const copyBtn = block.querySelector('.http-copy-btn');
+      const copyText = block.getAttribute('data-copy-text');
+
+      if (copyBtn && copyText) {
+        copyBtn.addEventListener('click', async () => {
+          try {
+            await navigator.clipboard.writeText(copyText);
+            // Replace icon with check
+            const icon = copyBtn.querySelector('i');
+            if (icon) {
+              icon.className = 'fa-solid fa-check text-sm text-emerald-500';
+              setTimeout(() => {
+                icon.className = 'fa-regular fa-copy text-sm';
+              }, 2000);
+            }
+          } catch (err) {
+            console.error('Failed to copy:', err);
+          }
+        });
+      }
+    });
+
+    // Enable copy functionality for Color component items
+    const colorItems = document.querySelectorAll('.color-item-compact:not([data-copy-initialized]), .color-item-table:not([data-copy-initialized])');
+    colorItems.forEach((item) => {
+      item.setAttribute('data-copy-initialized', 'true');
+      const copyText = item.getAttribute('data-copy-text');
+
+      if (copyText) {
+        item.addEventListener('click', async () => {
+          try {
+            await navigator.clipboard.writeText(copyText);
+            // Show feedback via icon if present (table variant)
+            const icon = item.querySelector('i.fa-copy');
+            if (icon) {
+              icon.className = 'fa-solid fa-check text-xs text-emerald-500';
+              setTimeout(() => {
+                icon.className = 'fa-regular fa-copy text-xs text-[var(--color-text-muted)]';
+              }, 2000);
+            }
+          } catch (err) {
+            console.error('Failed to copy:', err);
+          }
+        });
+      }
+    });
+
+    // Find all pre.shiki elements that don't already have a copy button
+    const allCodeBlocks = document.querySelectorAll('pre.shiki:not([data-copy-button])');
+
+    allCodeBlocks.forEach((pre) => {
+      // Skip code blocks inside CodePanel (they already have a copy button in the header)
+      if (pre.closest('[data-code-panel]')) {
+        return;
+      }
+      // Mark as processed
+      pre.setAttribute('data-copy-button', 'true');
+
+      // Create wrapper div
+      const wrapper = document.createElement('div');
+      wrapper.className = 'code-block-wrapper relative group';
+      wrapper.style.cssText = 'position: relative;';
+
+      // Insert wrapper before pre and move pre inside
+      pre.parentNode?.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+
+      // Create copy button - minimal styling to match HTTP code block
+      const button = document.createElement('button');
+      button.className = 'code-copy-btn';
+      button.title = 'Copy code';
+      button.appendChild(createIcon('fa-regular fa-copy'));
+      button.style.cssText = `
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        padding: 6px;
+        background: transparent;
+        border: none;
+        border-radius: var(--radius-sm, 6px);
+        color: var(--color-text-muted, #6b7280);
+        cursor: pointer;
+        transition: color 0.2s, background-color 0.2s;
+        z-index: 10;
+      `;
+
+      // Copy functionality
+      button.addEventListener('click', async () => {
+        const code = pre.textContent || '';
+        try {
+          await navigator.clipboard.writeText(code);
+          // Replace icon with check
+          button.replaceChildren(createIcon('fa-solid fa-check', 'text-emerald-500'));
+          setTimeout(() => {
+            button.replaceChildren(createIcon('fa-regular fa-copy'));
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+      });
+
+      // Hover effect - subtle background like HTTP code block
+      button.addEventListener('mouseenter', () => {
+        button.style.backgroundColor = 'var(--color-bg-secondary, rgba(0,0,0,0.1))';
+        button.style.color = 'var(--color-text-primary, #111827)';
+      });
+      button.addEventListener('mouseleave', () => {
+        button.style.backgroundColor = 'transparent';
+        button.style.color = 'var(--color-text-muted, #6b7280)';
+      });
+
+      wrapper.appendChild(button);
+    });
+  }, [pathname]); // Re-run when pathname changes (client-side navigation)
+
+  return null;
+}

package/vendored/components/HeaderLinkCopy.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+
+/**
+ * Helper to create an icon element
+ */
+function createIcon(iconClass: string): HTMLElement {
+  const icon = document.createElement('i');
+  icon.className = iconClass;
+  icon.setAttribute('aria-hidden', 'true');
+  return icon;
+}
+
+/**
+ * Copy text to clipboard and return success status
+ */
+async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (err) {
+    console.error('Failed to copy:', err);
+    return false;
+  }
+}
+
+/**
+ * Client component that adds link icons and copy functionality to H2/H3 headings.
+ * - Hover: Shows link icon to the left of header text (instant, no animation)
+ * - Click header text: Copies link AND navigates to anchor
+ * - Click icon: Copies link only (no navigation)
+ * - Visual feedback: Icon turns accent color for 1.5s after copy
+ * - Mobile: Icon hidden, headers function normally
+ */
+export function HeaderLinkCopy() {
+  const pathname = usePathname();
+
+  const processHeadings = useCallback(() => {
+    // Find all h2 and h3 elements with IDs in main content that haven't been processed
+    const headings = document.querySelectorAll(
+      'main h2[id]:not([data-header-link]), main h3[id]:not([data-header-link])'
+    );
+
+    headings.forEach((heading) => {
+      const headingEl = heading as HTMLHeadingElement;
+      const headingId = headingEl.id;
+      const headingText = headingEl.textContent?.trim() || '';
+
+      // Skip empty headings
+      if (!headingId || !headingText) return;
+
+      // Mark as processed
+      headingEl.setAttribute('data-header-link', 'true');
+      headingEl.classList.add('header-link-wrapper');
+
+      // Move all existing child nodes to a document fragment
+      const fragment = document.createDocumentFragment();
+      while (headingEl.firstChild) {
+        fragment.appendChild(headingEl.firstChild);
+      }
+
+      // Create link icon element
+      const linkIcon = document.createElement('a');
+      linkIcon.href = `#${headingId}`;
+      linkIcon.className = 'header-link-icon';
+      linkIcon.setAttribute('aria-label', `Copy link to ${headingText}`);
+      linkIcon.appendChild(createIcon('fa-solid fa-link'));
+
+      // Create text wrapper and move original content into it
+      const textWrapper = document.createElement('span');
+      textWrapper.className = 'header-link-text';
+      textWrapper.appendChild(fragment);
+
+      // Add new structure to heading
+      headingEl.appendChild(linkIcon);
+      headingEl.appendChild(textWrapper);
+
+      // Build the full URL for copying
+      const buildUrl = () => {
+        return `${window.location.origin}${window.location.pathname}#${headingId}`;
+      };
+
+      // Visual feedback function
+      const showCopiedFeedback = () => {
+        linkIcon.classList.add('copied');
+        setTimeout(() => {
+          linkIcon.classList.remove('copied');
+        }, 1500);
+      };
+
+      // Icon click: Copy only, no navigation
+      linkIcon.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const url = buildUrl();
+        const success = await copyToClipboard(url);
+        if (success) {
+          showCopiedFeedback();
+        }
+      });
+
+      // Text click: Copy AND navigate
+      textWrapper.addEventListener('click', async (e) => {
+        // Don't interfere with links inside the heading
+        if ((e.target as HTMLElement).tagName === 'A') return;
+
+        const url = buildUrl();
+        const success = await copyToClipboard(url);
+        if (success) {
+          showCopiedFeedback();
+        }
+
+        // Navigate to the anchor
+        window.history.pushState(null, '', `#${headingId}`);
+        headingEl.scrollIntoView({ behavior: 'instant', block: 'start' });
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    // Process immediately
+    processHeadings();
+
+    // Also process after a delay for dynamically rendered content
+    // (e.g., OpenAPI endpoints that render after hydration)
+    const timer = setTimeout(processHeadings, 500);
+
+    return () => clearTimeout(timer);
+  }, [pathname, processHeadings]);
+
+  return null;
+}

package/vendored/components/errors/NotFoundContent.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import type { DocsConfig } from '@/lib/docs-types';
+import { SearchModal } from '@/components/search/SearchModal';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+
+interface NotFoundContentProps {
+  config: DocsConfig;
+}
+
+export function NotFoundContent({ config }: NotFoundContentProps) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const linkPrefix = useLinkPrefix();
+
+  // Get custom 404 config or use defaults
+  const errorConfig = config.errors?.['404'];
+  const title = errorConfig?.title || 'Page not found';
+  const description =
+    errorConfig?.description ||
+    "The page you're looking for doesn't exist or has been moved.";
+
+  // Get the first page from navigation for the home link
+  const getHomePath = () => {
+    const navigation = config.navigation;
+    if (!navigation) return `${linkPrefix}/docs`;
+
+    // Helper to extract path from a page entry
+    // Pages can be: string, NavigationPageObject (has 'page'), or GroupConfig (has 'group')
+    const getPagePath = (page: unknown): string | null => {
+      if (typeof page === 'string') return page;
+      if (page && typeof page === 'object' && 'page' in page) {
+        return (page as { page: string }).page;
+      }
+      return null; // GroupConfig or other nested structure
+    };
+
+    // Check tabs first
+    if (navigation.tabs && navigation.tabs.length > 0) {
+      const firstTab = navigation.tabs[0];
+      if (firstTab.groups && firstTab.groups.length > 0) {
+        const firstGroup = firstTab.groups[0];
+        if (firstGroup.pages && firstGroup.pages.length > 0) {
+          for (const page of firstGroup.pages) {
+            const path = getPagePath(page);
+            if (path) return `${linkPrefix}/${path}`;
+          }
+        }
+      }
+    }
+
+    // Check groups (top-level groups)
+    if (navigation.groups && navigation.groups.length > 0) {
+      const firstGroup = navigation.groups[0];
+      if (firstGroup.pages && firstGroup.pages.length > 0) {
+        for (const page of firstGroup.pages) {
+          const path = getPagePath(page);
+          if (path) return `${linkPrefix}/${path}`;
+        }
+      }
+    }
+
+    // Check pages array (Mintlify format with groups inside pages)
+    if (navigation.pages && Array.isArray(navigation.pages)) {
+      for (const item of navigation.pages) {
+        // Could be a string page
+        const directPath = getPagePath(item);
+        if (directPath) return `${linkPrefix}/${directPath}`;
+
+        // Could be a group object { group: "...", pages: [...] }
+        if (item && typeof item === 'object' && 'group' in item && 'pages' in item) {
+          const group = item as { group: string; pages: unknown[] };
+          if (group.pages && group.pages.length > 0) {
+            for (const page of group.pages) {
+              const pagePath = getPagePath(page);
+              if (pagePath) return `${linkPrefix}/${pagePath}`;
+            }
+          }
+        }
+      }
+    }
+
+    return `${linkPrefix}/index`;
+  };
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center min-h-[60vh] px-4 py-16">
+      {/* 404 Badge */}
+      <div className="text-[120px] sm:text-[160px] font-bold leading-none text-[var(--color-accent)] opacity-20 select-none">
+        404
+      </div>
+
+      {/* Title */}
+      <h1 className="text-2xl sm:text-3xl font-bold text-[var(--color-text-primary)] mb-3 text-center -mt-4">
+        {title}
+      </h1>
+
+      {/* Description */}
+      <p className="text-[var(--color-text-secondary)] text-center max-w-md mb-8">
+        {description}
+      </p>
+
+      {/* Actions */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <button
+          onClick={() => setIsSearchOpen(true)}
+          className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg border border-[var(--color-border)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
+        >
+          <i className="fa-solid fa-magnifying-glass text-sm" aria-hidden="true" />
+          Search docs
+        </button>
+        <Link
+          href={getHomePath()}
+          className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg bg-[var(--color-accent)] text-white hover:opacity-90 transition-opacity"
+        >
+          <i className="fa-solid fa-house text-sm" aria-hidden="true" />
+          Go to homepage
+        </Link>
+      </div>
+
+      {/* Helpful suggestions */}
+      <div className="mt-12 text-center">
+        <p className="text-sm text-[var(--color-text-muted)] mb-4">
+          Here are some things you can try:
+        </p>
+        <ul className="text-sm text-[var(--color-text-secondary)] space-y-2">
+          <li className="flex items-center justify-center gap-2">
+            <i className="fa-solid fa-check text-[var(--color-accent)] text-xs" aria-hidden="true" />
+            Check the URL for typos
+          </li>
+          <li className="flex items-center justify-center gap-2">
+            <i className="fa-solid fa-check text-[var(--color-accent)] text-xs" aria-hidden="true" />
+            Use the search to find what you need
+          </li>
+          <li className="flex items-center justify-center gap-2">
+            <i className="fa-solid fa-check text-[var(--color-accent)] text-xs" aria-hidden="true" />
+            Browse the sidebar navigation
+          </li>
+        </ul>
+      </div>
+
+      {/* Search Modal */}
+      <SearchModal isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
+    </div>
+  );
+}

package/vendored/components/layout/LayoutWrapper.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { Header } from '@/components/navigation/Header';
+import { Sidebar } from '@/components/navigation/Sidebar';
+import { TabsNav } from '@/components/navigation/TabsNav';
+import { useHashNavigation } from '@/hooks/useHashNavigation';
+import type { DocsConfig } from '@/lib/docs-types';
+import { getTheme, type ThemeName } from '@/themes';
+
+interface LayoutWrapperProps {
+  config: DocsConfig;
+  children: React.ReactNode;
+}
+
+export function LayoutWrapper({ config, children }: LayoutWrapperProps) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  // Handle hash navigation for three-column independent scroll layout
+  useHashNavigation();
+
+  // Toggle 'scrolled' class on body when user scrolls past 500px
+  // Used by Jam theme to hide gradient and make header solid
+  // The gradient extends 500px from top, so we hide it after scrolling past that point
+  useEffect(() => {
+    const contentScroll = document.getElementById('content-scroll-container');
+    const scrollTarget = contentScroll || window;
+
+    const handleScroll = () => {
+      const scrollY = contentScroll ? contentScroll.scrollTop : window.scrollY;
+      if (scrollY > 500) {
+        document.body.classList.add('scrolled');
+      } else {
+        document.body.classList.remove('scrolled');
+      }
+    };
+
+    scrollTarget.addEventListener('scroll', handleScroll);
+    handleScroll(); // Check initial position
+
+    return () => scrollTarget.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Get theme config to determine layout
+  const themeConfig = useMemo(() => {
+    return getTheme(config.theme as ThemeName | undefined);
+  }, [config.theme]);
+
+  const layout = themeConfig.layout;
+
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const closeSidebar = () => setIsSidebarOpen(false);
+
+  // Sidebar-logo layout: Sidebar is full height, header only above content
+  // Tabs are rendered inline in the header for this layout
+  // Uses fixed viewport height on desktop with independent scroll for each column
+  if (layout === 'sidebar-logo') {
+    return (
+      <div className="flex min-h-screen lg:h-screen lg:overflow-hidden">
+        {/* Full-height sidebar - already has its own scroll */}
+        <Sidebar
+          config={config}
+          layout={layout}
+          isOpen={isSidebarOpen}
+          onClose={closeSidebar}
+        />
+
+        {/* Content area with header (tabs are inline in header) */}
+        <div className="flex-1 lg:ml-[295px] flex flex-col lg:h-screen bg-[var(--color-bg-content,var(--color-bg-primary))]">
+          <Header
+            config={config}
+            layout={layout}
+            isSidebarOpen={isSidebarOpen}
+            onToggleSidebar={toggleSidebar}
+          />
+          {/* Main content area - contains content scroll container and TOC */}
+          <main
+            id="main-content"
+            className="flex-1 flex flex-col lg:min-h-0 transition-colors overflow-x-hidden"
+          >
+            {children}
+          </main>
+        </div>
+      </div>
+    );
+  }
+
+  // Header-logo layout (Jam, Nebula): Uses sticky positioning for max-width support
+  // Outer wrapper constrains entire layout to --layout-max-width
+  // Uses fixed viewport height on desktop with independent scroll for each column
+  return (
+    <div
+      className="min-h-screen lg:h-screen flex flex-col lg:overflow-hidden mx-auto px-4 lg:px-6"
+      style={{ maxWidth: 'var(--layout-max-width, none)' }}
+    >
+      {/* Header - stays at top, does not scroll */}
+      <Header
+        config={config}
+        layout={layout}
+        isSidebarOpen={isSidebarOpen}
+        onToggleSidebar={toggleSidebar}
+      />
+
+      {/* Tabs bar - below header, same height */}
+      <TabsNav config={config} />
+
+      {/* Main layout area with sidebar and content - fills remaining height */}
+      <div className="flex flex-1 lg:min-h-0">
+        {/* Sidebar - has its own scroll via sidebar-scroll class */}
+        <Sidebar
+          config={config}
+          layout={layout}
+          isOpen={isSidebarOpen}
+          onClose={closeSidebar}
+        />
+
+        {/* Main content area - contains content scroll container and TOC */}
+        <main
+          id="main-content"
+          className="flex-1 flex flex-col lg:min-h-0 bg-[var(--color-bg-primary)] transition-colors overflow-x-hidden"
+        >
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
+

package/vendored/components/mdx/Accordion.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { ReactNode, useState, memo } from 'react';
+import { getIconClass } from '@/lib/icon-utils';
+
+interface AccordionProps {
+  /** Title in the Accordion preview (required) */
+  title: string;
+  /** Detail below the title in the Accordion preview */
+  description?: string;
+  /** Whether the Accordion is open by default */
+  defaultOpen?: boolean;
+  /** The icon to display */
+  icon?: string;
+  /** The Font Awesome icon style */
+  iconType?: 'regular' | 'solid' | 'light' | 'thin' | 'sharp-solid' | 'duotone' | 'brands';
+  /** Accordion content */
+  children?: ReactNode;
+}
+
+interface AccordionGroupProps {
+  /** Grouped accordions */
+  children?: ReactNode;
+}
+
+export const Accordion = memo(function Accordion({
+  title,
+  description,
+  defaultOpen = false,
+  icon,
+  iconType,
+  children
+}: AccordionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border border-[var(--color-border)] rounded-lg mb-2 last:mb-0 not-prose overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center gap-3 p-4 text-left hover:bg-[var(--color-bg-secondary)] transition-colors"
+        aria-expanded={isOpen}
+      >
+        {/* Icon */}
+        {icon && (
+          <i className={`${getIconClass(icon)} h-5 w-5 text-[var(--color-accent)] flex-shrink-0`} aria-hidden="true" />
+        )}
+
+        {/* Title and description */}
+        <div className="flex-1 min-w-0">
+          <div className="font-medium text-[var(--color-text-primary)]">
+            {title}
+          </div>
+          {description && (
+            <div className="text-sm text-[var(--color-text-secondary)] mt-0.5">
+              {description}
+            </div>
+          )}
+        </div>
+
+        {/* Chevron */}
+        <i
+          className={`fa-solid fa-chevron-down h-5 w-5 text-[var(--color-text-muted)] flex-shrink-0 transition-transform duration-200 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+          aria-hidden="true"
+        />
+      </button>
+      
+      {/* Content */}
+      <div
+        className={`overflow-hidden transition-all duration-200 ${
+          isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'
+        }`}
+      >
+        <div className="px-4 pb-4 pt-0 text-sm text-[var(--color-text-secondary)] leading-relaxed [&>p]:mb-3 [&>p:last-child]:mb-0 [&>pre]:my-3 [&_code]:bg-[var(--color-code-bg)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[12px] [&_code]:font-mono [&>a]:text-[var(--color-accent)] [&>a]:no-underline [&>a:hover]:underline">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const AccordionGroup = memo(function AccordionGroup({ children }: AccordionGroupProps) {
+  return (
+    <div className="my-4 not-prose">
+      {children}
+    </div>
+  );
+});
+