apidocly 1.0.3

package/template/js/main.js

@@ -0,0 +1,2933 @@
+(function() {
+  'use strict';
+
+  // Settings Management
+  const SETTINGS_KEY = 'apidocly-settings';
+  const defaultSettings = {
+    expandExamples: false,
+    expandEndpoints: false,
+    autoCollapse: true,
+    showTryit: true,
+    showCodeSamples: true,
+    compactMode: false
+  };
+
+  let settings = { ...defaultSettings };
+
+  function loadSettings() {
+    try {
+      const stored = localStorage.getItem(SETTINGS_KEY);
+      if (stored) {
+        settings = { ...defaultSettings, ...JSON.parse(stored) };
+      }
+    } catch (e) {
+      console.warn('Failed to load settings:', e);
+    }
+    applySettings();
+  }
+
+  function saveSettings() {
+    try {
+      localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+    } catch (e) {
+      console.warn('Failed to save settings:', e);
+    }
+    applySettings();
+  }
+
+  function applySettings() {
+    const app = document.getElementById('app');
+    if (!app) return;
+
+    // Compact mode
+    app.classList.toggle('compact-mode', settings.compactMode);
+
+    // Hide try it out
+    app.classList.toggle('hide-tryit', !settings.showTryit);
+
+    // Hide code samples
+    app.classList.toggle('hide-codesamples', !settings.showCodeSamples);
+
+    // Update toggle states in UI
+    const toggles = {
+      'setting-expand-examples': settings.expandExamples,
+      'setting-expand-endpoints': settings.expandEndpoints,
+      'setting-auto-collapse': settings.autoCollapse,
+      'setting-show-tryit': settings.showTryit,
+      'setting-show-codesamples': settings.showCodeSamples,
+      'setting-compact-mode': settings.compactMode
+    };
+
+    for (const [id, value] of Object.entries(toggles)) {
+      const el = document.getElementById(id);
+      if (el) el.checked = value;
+    }
+  }
+
+  // DOM Elements
+  const app = document.getElementById('app');
+  const groupsView = document.getElementById('groups-view');
+  const groupsList = document.getElementById('groups-list');
+  const endpointsView = document.getElementById('endpoints-view');
+  const endpointsList = document.getElementById('endpoints-list');
+  const searchView = document.getElementById('search-view');
+  const searchResults = document.getElementById('search-results');
+  const searchInput = document.getElementById('search-input');
+  const searchClear = document.getElementById('search-clear');
+  const searchQuery = document.getElementById('search-query');
+  const clearSearchBtn = document.getElementById('clear-search');
+  const backToGroups = document.getElementById('back-to-groups');
+  const currentGroupEl = document.getElementById('current-group');
+
+  // Stats elements
+  const statEndpoints = document.getElementById('stat-endpoints');
+  const statGroups = document.getElementById('stat-groups');
+  const statPrivate = document.getElementById('stat-private');
+  const statVersion = document.getElementById('stat-version');
+
+  // State
+  let currentGroup = null;
+  let groupColors = {};
+  let selectedEnvironment = null;
+  let selectedEndpointVersion = null; // null = show latest version of each endpoint
+
+  // Get all unique endpoint versions from apiData
+  function getEndpointVersions() {
+    const versions = new Set();
+    for (const group of apiData.groups) {
+      for (const ep of group.endpoints) {
+        if (ep.version) {
+          versions.add(ep.version);
+        }
+      }
+    }
+    // Sort versions descending (newest first)
+    return Array.from(versions).sort((a, b) => {
+      const aParts = a.split('.').map(Number);
+      const bParts = b.split('.').map(Number);
+      for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+        const aNum = aParts[i] || 0;
+        const bNum = bParts[i] || 0;
+        if (aNum !== bNum) return bNum - aNum;
+      }
+      return 0;
+    });
+  }
+
+  // Filter data to show only endpoints matching the selected version
+  function getActiveData() {
+    if (!selectedEndpointVersion) {
+      // Show latest version of each endpoint
+      return filterToLatestVersions(apiData);
+    }
+    // Filter to specific version
+    return filterToVersion(apiData, selectedEndpointVersion);
+  }
+
+  function filterToLatestVersions(data) {
+    const filtered = {
+      ...data,
+      groups: []
+    };
+
+    for (const group of data.groups) {
+      const endpointMap = new Map();
+
+      for (const ep of group.endpoints) {
+        // Create key without version
+        const normalizedPath = ep.path.replace(/^\/\d+\.\d+\.\d+/, '');
+        const key = ep.method + ':' + normalizedPath + ':' + (ep.name || '');
+
+        const existing = endpointMap.get(key);
+        if (!existing || compareVersions(ep.version || '0.0.0', existing.version || '0.0.0') > 0) {
+          endpointMap.set(key, ep);
+        }
+      }
+
+      if (endpointMap.size > 0) {
+        filtered.groups.push({
+          ...group,
+          endpoints: Array.from(endpointMap.values())
+        });
+      }
+    }
+
+    return filtered;
+  }
+
+  function filterToVersion(data, version) {
+    const filtered = {
+      ...data,
+      groups: []
+    };
+
+    for (const group of data.groups) {
+      const endpoints = group.endpoints.filter(ep => ep.version === version);
+      if (endpoints.length > 0) {
+        filtered.groups.push({
+          ...group,
+          endpoints: endpoints
+        });
+      }
+    }
+
+    return filtered;
+  }
+
+  function compareVersions(v1, v2) {
+    const parts1 = (v1 || '0.0.0').split('.').map(Number);
+    const parts2 = (v2 || '0.0.0').split('.').map(Number);
+    for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+      const num1 = parts1[i] || 0;
+      const num2 = parts2[i] || 0;
+      if (num1 > num2) return 1;
+      if (num1 < num2) return -1;
+    }
+    return 0;
+  }
+
+  function init() {
+    if (typeof apiData === 'undefined') {
+      console.error('API data not found');
+      return;
+    }
+
+    loadSettings();
+    generateGroupColors();
+    initEnvironmentSelector();
+    initVersionComparison();
+    updateStats();
+    renderGroups();
+    setupEventListeners();
+    handleInitialHash();
+  }
+
+  // Environment Selector
+  function initEnvironmentSelector() {
+    const environments = apiData.project.environments || [];
+    const wrapper = document.getElementById('env-selector-wrapper');
+    const selector = document.getElementById('env-selector');
+
+    if (!wrapper || !selector) return;
+
+    // If no environments defined, hide the selector
+    if (environments.length === 0) {
+      wrapper.classList.add('hidden');
+      return;
+    }
+
+    // Show the selector
+    wrapper.classList.remove('hidden');
+
+    // Build options
+    let optionsHtml = '';
+    environments.forEach((env, index) => {
+      optionsHtml += `<option value="${index}">${escapeHtml(env.name)}</option>`;
+    });
+    selector.innerHTML = optionsHtml;
+
+    // Load saved selection from localStorage
+    const savedEnvIndex = localStorage.getItem('apidocly-environment');
+    if (savedEnvIndex !== null && environments[parseInt(savedEnvIndex)]) {
+      selector.value = savedEnvIndex;
+      selectedEnvironment = environments[parseInt(savedEnvIndex)];
+    } else {
+      selectedEnvironment = environments[0];
+    }
+
+    // Handle change
+    selector.addEventListener('change', (e) => {
+      const index = parseInt(e.target.value);
+      selectedEnvironment = environments[index];
+      localStorage.setItem('apidocly-environment', index);
+      updateTryItOutUrls();
+    });
+  }
+
+  function getSelectedBaseUrl(endpoint) {
+    // Priority: endpoint.sampleRequest > selectedEnvironment > apiData.project.sampleUrl
+    if (endpoint.sampleRequest && endpoint.sampleRequest !== 'off') {
+      return endpoint.sampleRequest;
+    }
+    if (selectedEnvironment && selectedEnvironment.url) {
+      return selectedEnvironment.url;
+    }
+    return apiData.project.sampleUrl || '';
+  }
+
+  function updateTryItOutUrls() {
+    // Update all visible URL previews
+    document.querySelectorAll('.sample-request').forEach(container => {
+      const endpointId = container.dataset.endpointId;
+      const path = container.dataset.path;
+      const urlPreview = document.getElementById(`sample-url-preview-${endpointId}`);
+
+      if (urlPreview) {
+        // Find the endpoint to check for sampleRequest override
+        let endpoint = null;
+        for (const group of apiData.groups) {
+          endpoint = group.endpoints.find(ep => ep.id === endpointId);
+          if (endpoint) break;
+        }
+
+        const baseUrl = endpoint ? getSelectedBaseUrl(endpoint) : (selectedEnvironment?.url || apiData.project.sampleUrl || '');
+        urlPreview.textContent = baseUrl + path;
+        container.dataset.baseUrl = baseUrl;
+      }
+    });
+  }
+
+  // Generate consistent colors for groups based on name hash
+  function generateGroupColors() {
+    const data = getActiveData();
+    // Premium color palette: cyan, purple, pink, amber, green, blue, orange, magenta
+    const colors = [
+      'hsl(186, 94%, 43%)',  // Cyan (primary)
+      'hsl(271, 91%, 65%)',  // Purple
+      'hsl(333, 84%, 63%)',  // Pink
+      'hsl(43, 96%, 56%)',   // Amber
+      'hsl(142, 76%, 36%)',  // Green
+      'hsl(217, 91%, 60%)',  // Blue
+      'hsl(25, 95%, 53%)',   // Orange
+      'hsl(293, 69%, 49%)',  // Magenta
+      'hsl(172, 66%, 50%)',  // Teal
+      'hsl(348, 83%, 47%)'   // Rose
+    ];
+    data.groups.forEach((group, index) => {
+      groupColors[group.name] = colors[index % colors.length];
+    });
+  }
+
+  function getGroupColor(groupName) {
+    return groupColors[groupName] || 'hsl(186, 94%, 43%)';
+  }
+
+  function updateStats() {
+    const data = getActiveData();
+    let totalEndpoints = 0;
+    let privateCount = 0;
+
+    data.groups.forEach(group => {
+      totalEndpoints += group.endpoints.length;
+      group.endpoints.forEach(ep => {
+        if (ep.private) privateCount++;
+      });
+    });
+
+    statEndpoints.textContent = totalEndpoints;
+    statGroups.textContent = data.groups.length;
+    statVersion.textContent = data.project.version || '-';
+
+    // Only show private stat if there are private endpoints
+    const privateCard = statPrivate.closest('.stat-card');
+    if (privateCount > 0) {
+      statPrivate.textContent = privateCount;
+      privateCard.classList.remove('hidden');
+    } else {
+      privateCard.classList.add('hidden');
+    }
+  }
+
+  function renderGroups() {
+    const data = getActiveData();
+    let html = `
+      <table class="groups-table">
+        <thead>
+          <tr>
+            <th>Group</th>
+            <th>Endpoints</th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+    `;
+
+    data.groups.forEach(group => {
+      const color = getGroupColor(group.name);
+      const endpointCount = group.endpoints.length;
+
+      html += `
+        <tr class="group-row" data-group="${escapeHtml(group.name)}" style="--group-color: ${color}">
+          <td>
+            <div class="group-name-cell">
+              <span class="group-name">${escapeHtml(group.name)}</span>
+            </div>
+          </td>
+          <td class="group-count-cell">${endpointCount}</td>
+          <td class="group-export-cell">
+            <button class="export-group-btn" onclick="event.stopPropagation(); downloadOpenAPI('${escapeHtml(group.name)}')" title="Download ${escapeHtml(group.name)} as OpenAPI JSON">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="7 10 12 15 17 10"></polyline>
+                <line x1="12" y1="15" x2="12" y2="3"></line>
+              </svg>
+            </button>
+          </td>
+          <td class="group-arrow-cell">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="m9 18 6-6-6-6"></path>
+            </svg>
+          </td>
+        </tr>
+      `;
+    });
+
+    html += '</tbody></table>';
+    groupsList.innerHTML = html;
+  }
+
+  function showGroupEndpoints(groupName) {
+    const data = getActiveData();
+    const group = data.groups.find(g => g.name === groupName);
+    if (!group) return;
+
+    currentGroup = groupName;
+    const color = getGroupColor(groupName);
+
+    // Update header
+    currentGroupEl.querySelector('.group-color-bar').style.backgroundColor = color;
+    currentGroupEl.querySelector('.group-name').textContent = groupName;
+    currentGroupEl.querySelector('.group-count').textContent = `${group.endpoints.length} endpoint${group.endpoints.length !== 1 ? 's' : ''}`;
+
+    // Update export button
+    const exportBtn = document.getElementById('group-export-btn');
+    if (exportBtn) {
+      exportBtn.setAttribute('onclick', `event.stopPropagation(); downloadOpenAPI('${escapeHtml(groupName)}')`);
+      exportBtn.setAttribute('title', `Download ${groupName} as OpenAPI JSON`);
+    }
+
+    // Render endpoints with striped header
+    let html = '<div class="endpoints-stripe"></div>';
+    group.endpoints.forEach(endpoint => {
+      html += renderEndpointItem(endpoint);
+    });
+    endpointsList.innerHTML = html;
+
+    // Switch views
+    groupsView.classList.add('hidden');
+    searchView.classList.add('hidden');
+    endpointsView.classList.remove('hidden');
+
+    // Update URL
+    window.history.pushState({}, '', `#group-${encodeURIComponent(groupName)}`);
+  }
+
+  function showGroupsView() {
+    currentGroup = null;
+    endpointsView.classList.add('hidden');
+    searchView.classList.add('hidden');
+    groupsView.classList.remove('hidden');
+    window.history.pushState({}, '', window.location.pathname);
+  }
+
+  function renderEndpointItem(endpoint) {
+    const methodClass = endpoint.method.toLowerCase();
+    const deprecatedBadge = endpoint.deprecated ? '<span class="deprecated-badge">Deprecated</span>' : '';
+    const expandedClass = settings.expandEndpoints ? 'expanded' : '';
+    const detailsHidden = settings.expandEndpoints ? '' : 'hidden';
+
+    return `
+      <div class="endpoint-item ${expandedClass}" data-id="${escapeHtml(endpoint.id)}">
+        <div class="endpoint-header">
+          <span class="endpoint-method ${methodClass}">${endpoint.method}</span>
+          <span class="endpoint-path">${escapeHtml(endpoint.path)}</span>
+          <span class="endpoint-title">${escapeHtml(endpoint.title || '')}${deprecatedBadge}</span>
+          <svg class="endpoint-toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="m9 18 6-6-6-6"></path>
+          </svg>
+        </div>
+        <div class="endpoint-details ${detailsHidden}">
+          ${renderEndpointDetails(endpoint)}
+        </div>
+      </div>
+    `;
+  }
+
+  function renderEndpointDetails(endpoint) {
+    let html = '';
+
+    // Badges
+    if (endpoint.version || endpoint.permission || endpoint.deprecated) {
+      html += '<div class="endpoint-badges">';
+      if (endpoint.version) {
+        html += `<span class="badge badge-version">v${escapeHtml(endpoint.version)}</span>`;
+      }
+      if (endpoint.permission) {
+        html += `<span class="badge badge-permission">${escapeHtml(endpoint.permission)}</span>`;
+      }
+      if (endpoint.deprecated) {
+        html += `<span class="badge badge-deprecated">Deprecated</span>`;
+      }
+      html += '</div>';
+    }
+
+    // Description
+    if (endpoint.description) {
+      html += `<div class="endpoint-description">${marked.parse(endpoint.description)}</div>`;
+    }
+
+    // Deprecation notice
+    if (endpoint.deprecated && endpoint.deprecatedText) {
+      html += `<div class="endpoint-description" style="color: var(--warning);"><strong>Deprecation notice:</strong> ${escapeHtml(endpoint.deprecatedText)}</div>`;
+    }
+
+    // Parameters sections
+    html += renderParamsSection('Headers', endpoint.headers);
+    html += renderParamsSection('Query Parameters', endpoint.query);
+    html += renderParamsSection('Body Parameters', endpoint.body);
+    html += renderParamsSection('Parameters', endpoint.parameters);
+
+    // Examples
+    html += renderExamples('Request Examples', endpoint.examples);
+    html += renderExamples('Header Examples', endpoint.headerExamples);
+    html += renderExamples('Parameter Examples', endpoint.paramExamples);
+
+    // Success/Error responses
+    html += renderResponseSection('Success Response', endpoint.success, 'success');
+    html += renderExamples('Success Examples', endpoint.successExamples, 'success');
+    html += renderResponseSection('Error Response', endpoint.error, 'error');
+    html += renderExamples('Error Examples', endpoint.errorExamples, 'error');
+
+    // Code samples
+    html += renderCodeSamples(endpoint);
+
+    // Try it out
+    html += renderTryItOut(endpoint);
+
+    return html;
+  }
+
+  function renderCodeSamples(endpoint) {
+    const baseUrl = getSelectedBaseUrl(endpoint);
+    if (!baseUrl) return '';
+
+    const eid = escapeHtml(endpoint.id);
+    const codeLangs = [
+      { key: 'curl', label: 'cURL' },
+      { key: 'javascript', label: 'JavaScript' },
+      { key: 'axios', label: 'Axios' },
+      { key: 'python', label: 'Python' },
+      { key: 'php', label: 'PHP' }
+    ];
+
+    let tabsHtml = '';
+    let panelsHtml = '';
+
+    for (let i = 0; i < codeLangs.length; i++) {
+      const lang = codeLangs[i];
+      const isActive = i === 0;
+      const sample = generateCodeSample(endpoint, lang.key, baseUrl);
+      const highlighted = highlightCode(sample, lang.key);
+
+      tabsHtml += '<button class="code-sample-tab' + (isActive ? ' active' : '') + '" data-lang="' + lang.key + '" onclick="switchCodeSample(\'' + eid + '\', \'' + lang.key + '\')">' + lang.label + '</button>';
+
+      panelsHtml += '<div class="code-sample-panel' + (isActive ? '' : ' hidden') + '" data-lang="' + lang.key + '">' +
+        '<div class="code-sample-header"><span>' + lang.label + '</span><button class="copy-btn" onclick="copyCodeSample(this)">Copy</button></div>' +
+        '<pre class="code-sample-code"><code>' + highlighted + '</code></pre></div>';
+    }
+
+    return '<div class="code-samples-section">' +
+      '<div class="params-section-title">Code Samples</div>' +
+      '<div class="code-samples-container" data-endpoint-id="' + eid + '">' +
+      '<div class="code-samples-tabs">' + tabsHtml + '</div>' +
+      '<div class="code-samples-content">' + panelsHtml + '</div>' +
+      '</div></div>';
+  }
+
+  function highlightCode(code, lang) {
+    // First escape HTML entities
+    let escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+
+    // Tokenize and highlight
+    // We'll use placeholders to avoid regex conflicts
+    const tokens = [];
+    let tokenId = 0;
+
+    function addToken(className, match) {
+      const placeholder = `__TOKEN_${tokenId}__`;
+      tokens.push({ placeholder, html: '<span class="' + className + '">' + match + '</span>' });
+      tokenId++;
+      return placeholder;
+    }
+
+    let result = escaped;
+
+    // Strings (must be done first to avoid highlighting inside strings)
+    result = result.replace(/"(?:[^"\\]|\\.)*"/g, m => addToken('hl-string', m));
+    result = result.replace(/'(?:[^'\\]|\\.)*'/g, m => addToken('hl-string', m));
+
+    // Language-specific highlighting
+    if (lang === 'curl') {
+      result = result.replace(/\b(curl)\b/g, m => addToken('hl-keyword', m));
+      result = result.replace(/\s(-X|-H|-d|--data|--header)\b/g, (m, flag) => ' ' + addToken('hl-flag', flag));
+      result = result.replace(/\b(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\b/g, m => addToken('hl-method', m));
+    } else if (lang === 'javascript' || lang === 'axios') {
+      result = result.replace(/\b(const|let|var|function|return|if|else|for|while|import|from|export|default|async|await|new|this|true|false|null|undefined)\b/g, m => addToken('hl-keyword', m));
+      result = result.replace(/\b(fetch|console|JSON|Promise|then|catch|stringify|parse|log|error|axios)\b/g, m => addToken('hl-builtin', m));
+    } else if (lang === 'python') {
+      result = result.replace(/\b(import|from|def|return|if|else|elif|for|while|in|not|and|or|True|False|None|print|class|try|except|with|as)\b/g, m => addToken('hl-keyword', m));
+      result = result.replace(/\b(requests|json|response)\b/g, m => addToken('hl-builtin', m));
+    } else if (lang === 'php') {
+      result = result.replace(/&lt;\?php/g, m => addToken('hl-tag', m));
+      result = result.replace(/\?&gt;/g, m => addToken('hl-tag', m));
+      result = result.replace(/\$[a-zA-Z_]\w*/g, m => addToken('hl-variable', m));
+      result = result.replace(/\b(function|return|if|else|elseif|for|foreach|while|echo|print|true|false|null|array|new|class)\b/g, m => addToken('hl-keyword', m));
+      result = result.replace(/\b(curl_init|curl_setopt_array|curl_exec|curl_error|curl_close|json_encode|json_decode|print_r)\b/g, m => addToken('hl-builtin', m));
+      result = result.replace(/\b(CURLOPT_[A-Z_]+)\b/g, m => addToken('hl-constant', m));
+    }
+
+    // Numbers (but not inside tokens)
+    result = result.replace(/\b(\d+\.?\d*)\b/g, m => addToken('hl-number', m));
+
+    // Restore tokens
+    for (const token of tokens) {
+      result = result.replace(token.placeholder, token.html);
+    }
+
+    return result;
+  }
+
+  function generateCodeSample(endpoint, lang, baseUrl) {
+    const method = endpoint.method;
+    let path = endpoint.path;
+    const url = baseUrl + path;
+
+    // Get sample values for parameters
+    const pathParams = getAllParams(endpoint.parameters);
+    const queryParams = getAllParams(endpoint.query);
+    const headerParams = getAllParams(endpoint.headers);
+    const bodyParams = getAllParams(endpoint.body);
+
+    // Replace path params with sample values
+    pathParams.forEach(param => {
+      const sampleValue = getSampleValue(param);
+      path = path.replace(`:${param.field}`, sampleValue);
+      path = path.replace(`{${param.field}}`, sampleValue);
+    });
+
+    const finalUrl = baseUrl + path;
+
+    // Build query string
+    let queryString = '';
+    if (queryParams.length > 0) {
+      const params = queryParams.map(p => `${p.field}=${encodeURIComponent(getSampleValue(p))}`).join('&');
+      queryString = '?' + params;
+    }
+
+    // Build body object
+    const bodyObj = {};
+    bodyParams.forEach(param => {
+      setNestedValue(bodyObj, param.field, getSampleValue(param));
+    });
+    const hasBody = Object.keys(bodyObj).length > 0 && ['POST', 'PUT', 'PATCH'].includes(method);
+
+    switch (lang) {
+      case 'curl':
+        return generateCurlSample(method, finalUrl + queryString, headerParams, bodyObj, hasBody);
+      case 'javascript':
+        return generateFetchSample(method, finalUrl + queryString, headerParams, bodyObj, hasBody);
+      case 'axios':
+        return generateAxiosSample(method, finalUrl + queryString, headerParams, bodyObj, hasBody);
+      case 'python':
+        return generatePythonSample(method, finalUrl + queryString, headerParams, bodyObj, hasBody);
+      case 'php':
+        return generatePhpSample(method, finalUrl + queryString, headerParams, bodyObj, hasBody);
+      default:
+        return '';
+    }
+  }
+
+  function getSampleValue(param) {
+    if (param.defaultValue) return param.defaultValue;
+    if (param.type && param.type.allowedValues && param.type.allowedValues.length > 0) {
+      return param.type.allowedValues[0];
+    }
+
+    const typeName = param.type ? param.type.name.toLowerCase() : 'string';
+    const fieldLower = param.field.toLowerCase();
+
+    // Smart defaults based on field name
+    if (fieldLower.includes('email')) return 'user@example.com';
+    if (fieldLower.includes('password')) return 'secretpassword';
+    if (fieldLower.includes('name') && fieldLower.includes('user')) return 'John Doe';
+    if (fieldLower.includes('name')) return 'Example Name';
+    if (fieldLower.includes('id')) return '123';
+    if (fieldLower.includes('page')) return '1';
+    if (fieldLower.includes('limit') || fieldLower.includes('per_page')) return '10';
+    if (fieldLower.includes('token')) return 'your_token_here';
+    if (fieldLower.includes('url')) return 'https://example.com';
+
+    // Defaults based on type
+    switch (typeName) {
+      case 'number':
+      case 'integer':
+      case 'int':
+        return '1';
+      case 'boolean':
+      case 'bool':
+        return 'true';
+      case 'array':
+        return '[]';
+      case 'object':
+        return '{}';
+      default:
+        return 'value';
+    }
+  }
+
+  function generateCurlSample(method, url, headers, body, hasBody) {
+    let cmd = `curl -X ${method} "${url}"`;
+
+    // Add headers
+    headers.forEach(h => {
+      cmd += ` \\\n  -H "${h.field}: ${getSampleValue(h)}"`;
+    });
+
+    if (hasBody) {
+      cmd += ` \\\n  -H "Content-Type: application/json"`;
+      cmd += ` \\\n  -d '${JSON.stringify(body, null, 2).replace(/'/g, "\\'")}'`;
+    }
+
+    return cmd;
+  }
+
+  function generateFetchSample(method, url, headers, body, hasBody) {
+    let code = `fetch("${url}", {\n`;
+    code += `  method: "${method}",\n`;
+    code += `  headers: {\n`;
+
+    if (hasBody) {
+      code += `    "Content-Type": "application/json",\n`;
+    }
+
+    headers.forEach(h => {
+      code += `    "${h.field}": "${getSampleValue(h)}",\n`;
+    });
+
+    code += `  },\n`;
+
+    if (hasBody) {
+      code += `  body: JSON.stringify(${JSON.stringify(body, null, 4).split('\n').join('\n  ')}),\n`;
+    }
+
+    code += `})\n`;
+    code += `.then(response => response.json())\n`;
+    code += `.then(data => console.log(data))\n`;
+    code += `.catch(error => console.error("Error:", error));`;
+
+    return code;
+  }
+
+  function generateAxiosSample(method, url, headers, body, hasBody) {
+    const methodLower = method.toLowerCase();
+    let code = `import axios from 'axios';\n\n`;
+
+    if (hasBody) {
+      code += `axios.${methodLower}("${url}", ${JSON.stringify(body, null, 2)}, {\n`;
+    } else {
+      code += `axios.${methodLower}("${url}", {\n`;
+    }
+
+    code += `  headers: {\n`;
+    headers.forEach(h => {
+      code += `    "${h.field}": "${getSampleValue(h)}",\n`;
+    });
+    code += `  },\n`;
+    code += `})\n`;
+    code += `.then(response => console.log(response.data))\n`;
+    code += `.catch(error => console.error(error));`;
+
+    return code;
+  }
+
+  function generatePythonSample(method, url, headers, body, hasBody) {
+    let code = `import requests\n\n`;
+    code += `url = "${url}"\n\n`;
+
+    code += `headers = {\n`;
+    if (hasBody) {
+      code += `    "Content-Type": "application/json",\n`;
+    }
+    headers.forEach(h => {
+      code += `    "${h.field}": "${getSampleValue(h)}",\n`;
+    });
+    code += `}\n\n`;
+
+    if (hasBody) {
+      code += `data = ${JSON.stringify(body, null, 4)}\n\n`;
+      code += `response = requests.${method.toLowerCase()}(url, headers=headers, json=data)\n`;
+    } else {
+      code += `response = requests.${method.toLowerCase()}(url, headers=headers)\n`;
+    }
+
+    code += `print(response.json())`;
+
+    return code;
+  }
+
+  function generatePhpSample(method, url, headers, body, hasBody) {
+    let code = `<?php\n\n`;
+    code += `$curl = curl_init();\n\n`;
+    code += `curl_setopt_array($curl, [\n`;
+    code += `    CURLOPT_URL => "${url}",\n`;
+    code += `    CURLOPT_RETURNTRANSFER => true,\n`;
+    code += `    CURLOPT_CUSTOMREQUEST => "${method}",\n`;
+
+    // Build headers array
+    code += `    CURLOPT_HTTPHEADER => [\n`;
+    if (hasBody) {
+      code += `        "Content-Type: application/json",\n`;
+    }
+    headers.forEach(h => {
+      code += `        "${h.field}: ${getSampleValue(h)}",\n`;
+    });
+    code += `    ],\n`;
+
+    if (hasBody) {
+      code += `    CURLOPT_POSTFIELDS => json_encode(${phpArrayToString(body)}),\n`;
+    }
+
+    code += `]);\n\n`;
+    code += `$response = curl_exec($curl);\n`;
+    code += `$error = curl_error($curl);\n`;
+    code += `curl_close($curl);\n\n`;
+    code += `if ($error) {\n`;
+    code += `    echo "Error: " . $error;\n`;
+    code += `} else {\n`;
+    code += `    print_r(json_decode($response, true));\n`;
+    code += `}\n`;
+    code += `?>`;
+
+    return code;
+  }
+
+  function phpArrayToString(obj, indent = 8) {
+    const spaces = ' '.repeat(indent);
+    let result = '[\n';
+
+    for (const [key, value] of Object.entries(obj)) {
+      if (typeof value === 'object' && value !== null) {
+        result += `${spaces}    "${key}" => ${phpArrayToString(value, indent + 4)},\n`;
+      } else if (typeof value === 'string') {
+        result += `${spaces}    "${key}" => "${value}",\n`;
+      } else {
+        result += `${spaces}    "${key}" => ${value},\n`;
+      }
+    }
+
+    result += `${spaces}]`;
+    return result;
+  }
+
+  // Global functions for code samples
+  window.switchCodeSample = function(endpointId, lang) {
+    const container = document.querySelector(`.code-samples-container[data-endpoint-id="${endpointId}"]`);
+    if (!container) return;
+
+    // Update tabs
+    container.querySelectorAll('.code-sample-tab').forEach(tab => {
+      tab.classList.toggle('active', tab.dataset.lang === lang);
+    });
+
+    // Update panels
+    container.querySelectorAll('.code-sample-panel').forEach(panel => {
+      panel.classList.toggle('hidden', panel.dataset.lang !== lang);
+    });
+  };
+
+  window.copyCodeSample = function(btn) {
+    const panel = btn.closest('.code-sample-panel');
+    const code = panel.querySelector('.code-sample-code').textContent;
+
+    navigator.clipboard.writeText(code).then(() => {
+      const originalText = btn.textContent;
+      btn.textContent = 'Copied!';
+      setTimeout(() => {
+        btn.textContent = originalText;
+      }, 2000);
+    });
+  };
+
+  function renderParamsSection(title, params) {
+    if (!params || Object.keys(params).length === 0) return '';
+
+    let html = `<div class="params-section"><div class="params-section-title">${escapeHtml(title)}</div>`;
+
+    for (const [groupName, groupParams] of Object.entries(params)) {
+      if (!groupParams || groupParams.length === 0) continue;
+
+      // Skip showing group title if it's a default/redundant name
+      const skipGroupTitle = ['Parameter', 'default', 'Header', 'Query', 'Body'].includes(groupName);
+      if (!skipGroupTitle) {
+        html += `<div class="params-group-title">${escapeHtml(groupName)}</div>`;
+      }
+
+      html += `
+        <table class="params-table">
+          <thead>
+            <tr>
+              <th>Field</th>
+              <th>Type</th>
+              <th></th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+      `;
+
+      for (const param of groupParams) {
+        const typeStr = formatType(param.type);
+        const requiredBadge = param.optional
+          ? '<span class="param-optional">optional</span>'
+          : '<span class="param-required">required</span>';
+        const defaultStr = param.defaultValue ? `<span class="param-default">= ${escapeHtml(param.defaultValue)}</span>` : '';
+
+        html += `
+          <tr>
+            <td><span class="param-name">${escapeHtml(param.field)}</span></td>
+            <td><span class="param-type">${escapeHtml(typeStr)}</span>${defaultStr}</td>
+            <td>${requiredBadge}</td>
+            <td>${escapeHtml(param.description || '')}</td>
+          </tr>
+        `;
+      }
+
+      html += '</tbody></table>';
+    }
+
+    html += '</div>';
+    return html;
+  }
+
+  function renderResponseSection(title, responses, type) {
+    if (!responses || Object.keys(responses).length === 0) return '';
+
+    let html = `<div class="params-section"><div class="params-section-title ${type}">${escapeHtml(title)}</div>`;
+
+    for (const [groupName, groupResponses] of Object.entries(responses)) {
+      if (!groupResponses || groupResponses.length === 0) continue;
+
+      if (groupName !== 'Success 200' && groupName !== 'Error 4xx') {
+        html += `<div class="params-group-title">${escapeHtml(groupName)}</div>`;
+      }
+
+      html += `
+        <table class="params-table">
+          <thead>
+            <tr>
+              <th>Field</th>
+              <th>Type</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+      `;
+
+      for (const response of groupResponses) {
+        const typeStr = formatType(response.type);
+
+        html += `
+          <tr>
+            <td><span class="param-name">${escapeHtml(response.field)}</span></td>
+            <td><span class="param-type">${escapeHtml(typeStr)}</span></td>
+            <td>${escapeHtml(response.description || '')}</td>
+          </tr>
+        `;
+      }
+
+      html += '</tbody></table>';
+    }
+
+    html += '</div>';
+    return html;
+  }
+
+  function renderExamples(title, examples, type) {
+    if (!examples || examples.length === 0) return '';
+
+    const titleClass = type === 'success' ? 'success' : (type === 'error' ? 'error' : '');
+
+    let html = `<div class="example-section"><div class="example-title ${titleClass}">${escapeHtml(title)}</div>`;
+
+    for (const example of examples) {
+      const exampleTitle = example.title || example.type || 'Example';
+      const formattedContent = formatExampleContent(example.content, example.type);
+      const collapsedClass = settings.expandExamples ? '' : 'collapsed';
+
+      html += `
+        <div class="example-block ${collapsedClass}">
+          <div class="example-header" onclick="toggleExample(this)">
+            <span>${escapeHtml(exampleTitle)}</span>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <button class="copy-btn" onclick="event.stopPropagation(); copyCode(this)">Copy</button>
+              <svg class="example-toggle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+            </div>
+          </div>
+          <div class="example-content">
+            <pre>${formattedContent}</pre>
+          </div>
+        </div>
+      `;
+    }
+
+    html += '</div>';
+    return html;
+  }
+
+  function renderTryItOut(endpoint) {
+    if (!apiData.template || !apiData.template.withGenerator) return '';
+    if (endpoint.sampleRequest === 'off') return '';
+
+    const baseUrl = getSelectedBaseUrl(endpoint);
+    // If no URL available at all, don't show Try it out
+    if (!baseUrl && !apiData.project.sampleUrl && (!apiData.project.environments || apiData.project.environments.length === 0)) return '';
+    const eid = escapeHtml(endpoint.id);
+
+    let html = `
+      <div class="try-it-section">
+        <div class="params-section-title">Try it out</div>
+        <div class="sample-request" data-endpoint-id="${eid}" data-method="${endpoint.method}" data-base-url="${escapeHtml(baseUrl)}" data-path="${escapeHtml(endpoint.path)}">
+    `;
+
+    // Headers
+    const allHeaders = getAllParams(endpoint.headers);
+    if (allHeaders.length > 0) {
+      html += `<div class="sample-section"><div class="sample-section-title">Headers</div>`;
+      for (const header of allHeaders) {
+        html += renderSampleField(eid, 'header', header);
+      }
+      html += `</div>`;
+    }
+
+    // URL Parameters
+    const urlParams = extractUrlParams(endpoint.path);
+    const pathParams = getAllParams(endpoint.parameters);
+    if (urlParams.length > 0 || pathParams.length > 0) {
+      html += `<div class="sample-section"><div class="sample-section-title">URL Parameters</div>`;
+      for (const param of urlParams) {
+        const paramInfo = pathParams.find(p => p.field === param) || { field: param, type: { name: 'String' }, optional: false };
+        html += renderSampleField(eid, 'path', paramInfo);
+      }
+      html += `</div>`;
+    }
+
+    // Query Parameters
+    const queryParams = getAllParams(endpoint.query);
+    if (queryParams.length > 0) {
+      html += `<div class="sample-section"><div class="sample-section-title">Query Parameters</div>`;
+      for (const param of queryParams) {
+        html += renderSampleField(eid, 'query', param);
+      }
+      html += `</div>`;
+    }
+
+    // Body Parameters
+    const bodyParams = getAllParams(endpoint.body);
+    if (['POST', 'PUT', 'PATCH'].includes(endpoint.method) && bodyParams.length > 0) {
+      html += `<div class="sample-section"><div class="sample-section-title">Body Parameters</div>`;
+      for (const param of bodyParams) {
+        html += renderSampleField(eid, 'body', param);
+      }
+      html += `</div>`;
+    } else if (['POST', 'PUT', 'PATCH'].includes(endpoint.method)) {
+      html += `
+        <div class="sample-section">
+          <div class="sample-section-title">Request Body (JSON)</div>
+          <textarea class="sample-body-raw" id="sample-body-raw-${eid}" rows="5" placeholder='{"key": "value"}'></textarea>
+        </div>
+      `;
+    }
+
+    html += `
+          <div class="sample-actions">
+            <div class="sample-url-display">
+              <span class="sample-method ${endpoint.method.toLowerCase()}">${endpoint.method}</span>
+              <span class="sample-url-text" id="sample-url-preview-${eid}">${escapeHtml(baseUrl + endpoint.path)}</span>
+            </div>
+            <button class="sample-btn" onclick="sendRequest('${eid}')">Send Request</button>
+          </div>
+          <div class="sample-response-wrapper">
+            <div class="sample-response-header">
+              <span>Response</span>
+              <span class="sample-status" id="sample-status-${eid}"></span>
+            </div>
+            <pre class="sample-response" id="sample-response-${eid}">Click "Send Request" to see the response...</pre>
+          </div>
+        </div>
+      </div>
+    `;
+
+    return html;
+  }
+
+  function getAllParams(paramsObj) {
+    if (!paramsObj) return [];
+    const all = [];
+    for (const group of Object.values(paramsObj)) {
+      all.push(...group);
+    }
+    return all;
+  }
+
+  function extractUrlParams(path) {
+    const matches = path.match(/:(\w+)/g) || [];
+    return matches.map(m => m.slice(1));
+  }
+
+  function renderSampleField(endpointId, type, param) {
+    const fieldId = `sample-${type}-${endpointId}-${param.field}`;
+    const isRequired = !param.optional;
+    const typeStr = param.type ? param.type.name : 'String';
+    const defaultVal = param.defaultValue || '';
+    const typeLower = typeStr.toLowerCase();
+
+    let inputType = 'text';
+    if (typeLower === 'number') inputType = 'number';
+    if (typeLower === 'boolean') inputType = 'checkbox';
+    if (param.field.toLowerCase().includes('password')) inputType = 'password';
+
+    // Check if it's a file/image type
+    const isFileType = typeLower === 'file' || typeLower === 'image' ||
+                       param.field.toLowerCase().includes('image') ||
+                       param.field.toLowerCase().includes('file') ||
+                       param.field.toLowerCase().includes('avatar') ||
+                       param.field.toLowerCase().includes('photo');
+
+    let inputHtml;
+    if (param.type && param.type.allowedValues) {
+      inputHtml = `<select class="sample-input" id="${fieldId}" data-field="${escapeHtml(param.field)}" data-type="${type}">
+        <option value="">-- Select --</option>
+        ${param.type.allowedValues.map(v => `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`).join('')}
+      </select>`;
+    } else if (isFileType) {
+      inputHtml = `
+        <div class="sample-file-wrapper">
+          <input type="file" class="sample-file-input" id="${fieldId}" data-field="${escapeHtml(param.field)}" data-type="${type}" data-is-file="true" accept="image/*">
+          <label for="${fieldId}" class="sample-file-label">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="17 8 12 3 7 8"></polyline>
+              <line x1="12" y1="3" x2="12" y2="15"></line>
+            </svg>
+            <span class="sample-file-text">Choose file...</span>
+          </label>
+          <span class="sample-file-name" id="${fieldId}-name"></span>
+        </div>`;
+    } else if (inputType === 'checkbox') {
+      inputHtml = `<input type="checkbox" class="sample-checkbox" id="${fieldId}" data-field="${escapeHtml(param.field)}" data-type="${type}">`;
+    } else {
+      inputHtml = `<input type="${inputType}" class="sample-input" id="${fieldId}" data-field="${escapeHtml(param.field)}" data-type="${type}" value="${escapeHtml(defaultVal)}" placeholder="${escapeHtml(param.description || param.field)}">`;
+    }
+
+    return `
+      <div class="sample-field">
+        <label class="sample-label" for="${fieldId}">
+          ${escapeHtml(param.field)}
+          ${isRequired ? '<span class="required">*</span>' : ''}
+          <span class="sample-type">${escapeHtml(typeStr)}</span>
+        </label>
+        ${inputHtml}
+      </div>
+    `;
+  }
+
+  function formatType(type) {
+    if (!type) return 'String';
+
+    let str = type.name;
+    if (type.isArray) str += '[]';
+    if (type.size) str += `{${type.size}}`;
+    if (type.allowedValues) str += `=${type.allowedValues.join(',')}`;
+
+    return str;
+  }
+
+  function formatExampleContent(content, type) {
+    if (!content) return '';
+
+    let formatted = content.trim();
+
+    if (type === 'json' || looksLikeJson(formatted)) {
+      try {
+        const parsed = JSON.parse(formatted);
+        formatted = JSON.stringify(parsed, null, 2);
+        return syntaxHighlightJson(formatted);
+      } catch (e) {
+        // Not valid JSON
+      }
+    }
+
+    return escapeHtml(formatted);
+  }
+
+  function looksLikeJson(str) {
+    const trimmed = str.trim();
+    return (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+           (trimmed.startsWith('[') && trimmed.endsWith(']'));
+  }
+
+  function syntaxHighlightJson(json) {
+    const PH = {
+      KEY_OPEN: '___KEY_OPEN___',
+      KEY_CLOSE: '___KEY_CLOSE___',
+      STR_OPEN: '___STR_OPEN___',
+      STR_CLOSE: '___STR_CLOSE___',
+      NUM_OPEN: '___NUM_OPEN___',
+      NUM_CLOSE: '___NUM_CLOSE___',
+      KW_OPEN: '___KW_OPEN___',
+      KW_CLOSE: '___KW_CLOSE___'
+    };
+
+    let result = json
+      .replace(/"([^"\\]*(?:\\.[^"\\]*)*)"\s*:/g, PH.KEY_OPEN + '"$1"' + PH.KEY_CLOSE + ':')
+      .replace(/"([^"\\]*(?:\\.[^"\\]*)*)"/g, PH.STR_OPEN + '"$1"' + PH.STR_CLOSE)
+      .replace(/\b(\d+\.?\d*)\b/g, PH.NUM_OPEN + '$1' + PH.NUM_CLOSE)
+      .replace(/\b(true|false|null)\b/g, PH.KW_OPEN + '$1' + PH.KW_CLOSE);
+
+    result = result
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+
+    result = result
+      .replace(/___KEY_OPEN___/g, '<span class="json-key">')
+      .replace(/___KEY_CLOSE___/g, '</span>')
+      .replace(/___STR_OPEN___/g, '<span class="json-string">')
+      .replace(/___STR_CLOSE___/g, '</span>')
+      .replace(/___NUM_OPEN___/g, '<span class="json-number">')
+      .replace(/___NUM_CLOSE___/g, '</span>')
+      .replace(/___KW_OPEN___/g, '<span class="json-keyword">')
+      .replace(/___KW_CLOSE___/g, '</span>');
+
+    return result;
+  }
+
+  // Search functionality
+  function performSearch(query) {
+    if (!query) {
+      clearSearch();
+      return;
+    }
+
+    const lowerQuery = query.toLowerCase();
+    const results = {};
+    const data = getActiveData();
+
+    data.groups.forEach(group => {
+      const matchingEndpoints = group.endpoints.filter(ep => {
+        return ep.title.toLowerCase().includes(lowerQuery) ||
+               ep.path.toLowerCase().includes(lowerQuery) ||
+               ep.method.toLowerCase().includes(lowerQuery) ||
+               (ep.description && ep.description.toLowerCase().includes(lowerQuery));
+      });
+
+      if (matchingEndpoints.length > 0) {
+        results[group.name] = matchingEndpoints;
+      }
+    });
+
+    renderSearchResults(query, results);
+  }
+
+  function renderSearchResults(query, results) {
+    searchQuery.textContent = query;
+
+    if (Object.keys(results).length === 0) {
+      searchResults.innerHTML = '<div style="padding: 2rem; text-align: center; color: var(--muted-foreground);">No results found</div>';
+    } else {
+      let html = '';
+
+      for (const [groupName, endpoints] of Object.entries(results)) {
+        const color = getGroupColor(groupName);
+
+        html += `
+          <div class="search-group">
+            <div class="search-group-header">
+              <div class="group-color-bar" style="background-color: ${color}"></div>
+              <span class="group-name">${escapeHtml(groupName)}</span>
+            </div>
+            <div class="endpoints-list">
+        `;
+
+        endpoints.forEach(endpoint => {
+          html += renderEndpointItem(endpoint);
+        });
+
+        html += '</div></div>';
+      }
+
+      searchResults.innerHTML = html;
+    }
+
+    // Show search view
+    groupsView.classList.add('hidden');
+    endpointsView.classList.add('hidden');
+    searchView.classList.remove('hidden');
+    searchClear.classList.remove('hidden');
+  }
+
+  function clearSearch() {
+    searchInput.value = '';
+    searchClear.classList.add('hidden');
+
+    if (currentGroup) {
+      showGroupEndpoints(currentGroup);
+    } else {
+      showGroupsView();
+    }
+  }
+
+  // Event listeners
+  function setupEventListeners() {
+    // Logo click - go home
+    const logoLink = document.getElementById('logo-link');
+    if (logoLink) {
+      logoLink.addEventListener('click', (e) => {
+        e.preventDefault();
+        showGroupsView();
+      });
+    }
+
+    // Export dropdown
+    const exportDropdownToggle = document.getElementById('export-dropdown-toggle');
+    const exportDropdownMenu = document.getElementById('export-dropdown-menu');
+    const exportDropdownWrapper = exportDropdownToggle?.closest('.export-dropdown-wrapper');
+
+    if (exportDropdownToggle && exportDropdownMenu) {
+      exportDropdownToggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        exportDropdownMenu.classList.toggle('hidden');
+        exportDropdownWrapper?.classList.toggle('open');
+      });
+
+      // Close dropdown on outside click
+      document.addEventListener('click', (e) => {
+        if (!exportDropdownMenu.classList.contains('hidden') &&
+            !exportDropdownMenu.contains(e.target) &&
+            !exportDropdownToggle.contains(e.target)) {
+          exportDropdownMenu.classList.add('hidden');
+          exportDropdownWrapper?.classList.remove('open');
+        }
+      });
+
+      // Close dropdown after clicking an item
+      exportDropdownMenu.addEventListener('click', () => {
+        exportDropdownMenu.classList.add('hidden');
+        exportDropdownWrapper?.classList.remove('open');
+      });
+    }
+
+    // Settings panel
+    const settingsBtn = document.getElementById('settings-btn');
+    const settingsPanel = document.getElementById('settings-panel');
+    const settingsClose = document.getElementById('settings-close');
+
+    if (settingsBtn && settingsPanel) {
+      settingsBtn.addEventListener('click', () => {
+        settingsPanel.classList.toggle('hidden');
+      });
+
+      settingsClose.addEventListener('click', () => {
+        settingsPanel.classList.add('hidden');
+      });
+
+      // Close on outside click
+      document.addEventListener('click', (e) => {
+        if (!settingsPanel.classList.contains('hidden') &&
+            !settingsPanel.contains(e.target) &&
+            !settingsBtn.contains(e.target)) {
+          settingsPanel.classList.add('hidden');
+        }
+      });
+
+      // Settings toggles
+      const settingMappings = {
+        'setting-expand-examples': 'expandExamples',
+        'setting-expand-endpoints': 'expandEndpoints',
+        'setting-auto-collapse': 'autoCollapse',
+        'setting-show-tryit': 'showTryit',
+        'setting-show-codesamples': 'showCodeSamples',
+        'setting-compact-mode': 'compactMode'
+      };
+
+      for (const [id, key] of Object.entries(settingMappings)) {
+        const toggle = document.getElementById(id);
+        if (toggle) {
+          toggle.addEventListener('change', (e) => {
+            settings[key] = e.target.checked;
+
+            // Mutually exclusive: expandEndpoints and autoCollapse
+            if (key === 'expandEndpoints' && e.target.checked) {
+              settings.autoCollapse = false;
+              document.getElementById('setting-auto-collapse').checked = false;
+              applySettingsToCurrentView('autoCollapse', false);
+            } else if (key === 'autoCollapse' && e.target.checked) {
+              settings.expandEndpoints = false;
+              document.getElementById('setting-expand-endpoints').checked = false;
+              applySettingsToCurrentView('expandEndpoints', false);
+            }
+
+            saveSettings();
+            applySettingsToCurrentView(key, e.target.checked);
+          });
+        }
+      }
+    }
+
+    function applySettingsToCurrentView(key, value) {
+      // Apply expand/collapse to examples
+      if (key === 'expandExamples') {
+        document.querySelectorAll('.example-block').forEach(block => {
+          if (value) {
+            block.classList.remove('collapsed');
+          } else {
+            block.classList.add('collapsed');
+          }
+        });
+      }
+
+      // Apply expand/collapse to endpoints
+      if (key === 'expandEndpoints') {
+        document.querySelectorAll('.endpoint-item').forEach(item => {
+          const details = item.querySelector('.endpoint-details');
+          if (value) {
+            item.classList.add('expanded');
+            details.classList.remove('hidden');
+          } else {
+            item.classList.remove('expanded');
+            details.classList.add('hidden');
+          }
+        });
+      }
+    }
+
+    // Group click
+    groupsList.addEventListener('click', (e) => {
+      const groupRow = e.target.closest('.group-row');
+      if (groupRow) {
+        showGroupEndpoints(groupRow.dataset.group);
+      }
+    });
+
+    // Back button
+    backToGroups.addEventListener('click', showGroupsView);
+
+    // Endpoint expand/collapse (for endpoints view and search view)
+    document.addEventListener('click', (e) => {
+      const endpointHeader = e.target.closest('.endpoint-header');
+      if (endpointHeader) {
+        const endpointItem = endpointHeader.closest('.endpoint-item');
+        const details = endpointItem.querySelector('.endpoint-details');
+
+        // Collapse other expanded endpoints in same list (if autoCollapse enabled)
+        if (settings.autoCollapse) {
+          const parentList = endpointItem.closest('.endpoints-list, .search-results');
+          if (parentList) {
+            parentList.querySelectorAll('.endpoint-item.expanded').forEach(item => {
+              if (item !== endpointItem) {
+                item.classList.remove('expanded');
+                item.querySelector('.endpoint-details').classList.add('hidden');
+              }
+            });
+          }
+        }
+
+        // Toggle current
+        endpointItem.classList.toggle('expanded');
+        details.classList.toggle('hidden');
+
+        // Update URL hash
+        if (endpointItem.classList.contains('expanded')) {
+          window.history.pushState({}, '', `#${endpointItem.dataset.id}`);
+        }
+      }
+    });
+
+    // Search
+    searchInput.addEventListener('input', debounce((e) => {
+      performSearch(e.target.value.trim());
+    }, 300));
+
+    searchClear.addEventListener('click', clearSearch);
+    clearSearchBtn.addEventListener('click', clearSearch);
+
+    // File input change handler (delegated)
+    document.addEventListener('change', (e) => {
+      if (e.target.classList.contains('sample-file-input')) {
+        const fileInput = e.target;
+        const fileNameSpan = document.getElementById(fileInput.id + '-name');
+        const fileLabelText = fileInput.parentElement.querySelector('.sample-file-text');
+
+        if (fileInput.files && fileInput.files.length > 0) {
+          const fileName = fileInput.files[0].name;
+          if (fileNameSpan) fileNameSpan.textContent = fileName;
+          if (fileLabelText) fileLabelText.textContent = 'Change file...';
+        } else {
+          if (fileNameSpan) fileNameSpan.textContent = '';
+          if (fileLabelText) fileLabelText.textContent = 'Choose file...';
+        }
+      }
+    });
+
+    // Handle browser back/forward
+    window.addEventListener('popstate', handleInitialHash);
+  }
+
+  function handleInitialHash() {
+    const hash = window.location.hash.slice(1);
+
+    if (!hash) {
+      showGroupsView();
+      return;
+    }
+
+    // Check if it's a group hash
+    if (hash.startsWith('group-')) {
+      const groupName = decodeURIComponent(hash.slice(6));
+      showGroupEndpoints(groupName);
+      return;
+    }
+
+    // Otherwise it's an endpoint ID - find it
+    const data = getActiveData();
+    for (const group of data.groups) {
+      const endpoint = group.endpoints.find(ep => ep.id === hash);
+      if (endpoint) {
+        showGroupEndpoints(group.name);
+        // Expand the endpoint after view switch
+        setTimeout(() => {
+          const endpointItem = document.querySelector(`.endpoint-item[data-id="${hash}"]`);
+          if (endpointItem) {
+            endpointItem.classList.add('expanded');
+            endpointItem.querySelector('.endpoint-details').classList.remove('hidden');
+            endpointItem.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+        }, 100);
+        return;
+      }
+    }
+  }
+
+  function debounce(fn, delay) {
+    let timer = null;
+    return function(...args) {
+      clearTimeout(timer);
+      timer = setTimeout(() => fn.apply(this, args), delay);
+    };
+  }
+
+  function escapeHtml(str) {
+    if (str === null || str === undefined) return '';
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  // Markdown parser
+  const marked = {
+    parse: function(text) {
+      if (!text) return '';
+
+      let html = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+      const codeBlocks = [];
+      html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
+        const index = codeBlocks.length;
+        codeBlocks.push(`<pre><code class="language-${lang}">${this.escapeHtml(code)}</code></pre>`);
+        return `\n%%CODEBLOCK${index}%%\n`;
+      });
+
+      html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+      html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+      html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+      html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+      html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+      html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+      html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+      html = html.replace(/^\- (.+)$/gm, '<li>$1</li>');
+      html = html.replace(/(<li>[\s\S]*?<\/li>)/g, '<ul>$1</ul>');
+      html = html.replace(/<\/ul>\s*<ul>/g, '');
+      html = html.replace(/\n\n+/g, '</p><p>');
+      html = html.replace(/([^>\n])\n([^<\n])/g, '$1<br>$2');
+
+      codeBlocks.forEach((block, index) => {
+        html = html.replace(`%%CODEBLOCK${index}%%`, block);
+      });
+
+      html = '<p>' + html + '</p>';
+      html = html.replace(/<p>\s*(<h[1-4]|<ul|<pre)/g, '$1');
+      html = html.replace(/(<\/h[1-4]>|<\/ul>|<\/pre>)\s*<\/p>/g, '$1');
+      html = html.replace(/<p>\s*<\/p>/g, '');
+
+      return html;
+    },
+    escapeHtml: function(str) {
+      return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+  };
+
+  // ========================================
+  // OpenAPI/Swagger Export Functions
+  // ========================================
+
+  function convertToOpenAPI(groups, options = {}) {
+    const includeAllGroups = options.allGroups || false;
+    const groupsToExport = includeAllGroups ? apiData.groups : groups;
+
+    const openapi = {
+      openapi: '3.0.0',
+      info: {
+        title: apiData.project.name || apiData.project.title || 'API Documentation',
+        version: apiData.project.version || '1.0.0',
+        description: apiData.project.description || ''
+      },
+      servers: []
+    };
+
+    // Add server URL if available
+    if (apiData.project.url) {
+      openapi.servers.push({
+        url: apiData.project.url,
+        description: 'API Server'
+      });
+    }
+    if (apiData.project.sampleUrl && apiData.project.sampleUrl !== apiData.project.url) {
+      openapi.servers.push({
+        url: apiData.project.sampleUrl,
+        description: 'Sample/Test Server'
+      });
+    }
+
+    openapi.paths = {};
+    openapi.components = {
+      schemas: {},
+      securitySchemes: {}
+    };
+
+    const permissionsFound = new Set();
+
+    groupsToExport.forEach(group => {
+      group.endpoints.forEach(endpoint => {
+        const path = convertPathParams(endpoint.path);
+
+        if (!openapi.paths[path]) {
+          openapi.paths[path] = {};
+        }
+
+        const method = endpoint.method.toLowerCase();
+        const operation = {
+          summary: endpoint.title || endpoint.name || '',
+          description: endpoint.description || '',
+          operationId: endpoint.id || `${method}_${path.replace(/[^a-zA-Z0-9]/g, '_')}`,
+          tags: [group.name],
+          parameters: [],
+          responses: {}
+        };
+
+        // Deprecated flag
+        if (endpoint.deprecated) {
+          operation.deprecated = true;
+          if (endpoint.deprecatedText) {
+            operation.description += `\n\n**Deprecation Notice:** ${endpoint.deprecatedText}`;
+          }
+        }
+
+        // Version info
+        if (endpoint.version) {
+          operation.description += `\n\n**Version:** ${endpoint.version}`;
+        }
+
+        // Permission/Security
+        if (endpoint.permission) {
+          permissionsFound.add(endpoint.permission);
+          operation.security = [{ [endpoint.permission]: [] }];
+        }
+
+        // Path parameters (from URL like :id or {id})
+        const pathParams = extractPathParameters(endpoint.path);
+        const allParams = getAllParams(endpoint.parameters);
+
+        pathParams.forEach(paramName => {
+          const paramInfo = allParams.find(p => p.field === paramName);
+          operation.parameters.push({
+            name: paramName,
+            in: 'path',
+            required: true,
+            schema: convertTypeToSchema(paramInfo?.type),
+            description: paramInfo?.description || ''
+          });
+        });
+
+        // Query parameters
+        const queryParams = getAllParams(endpoint.query);
+        queryParams.forEach(param => {
+          operation.parameters.push({
+            name: param.field,
+            in: 'query',
+            required: !param.optional,
+            schema: convertTypeToSchema(param.type),
+            description: param.description || '',
+            ...(param.defaultValue && { default: param.defaultValue })
+          });
+        });
+
+        // Header parameters
+        const headerParams = getAllParams(endpoint.headers);
+        headerParams.forEach(param => {
+          operation.parameters.push({
+            name: param.field,
+            in: 'header',
+            required: !param.optional,
+            schema: convertTypeToSchema(param.type),
+            description: param.description || '',
+            ...(param.defaultValue && { default: param.defaultValue })
+          });
+        });
+
+        // Request body (for POST, PUT, PATCH)
+        const bodyParams = getAllParams(endpoint.body);
+        if (['post', 'put', 'patch'].includes(method) && bodyParams.length > 0) {
+          const requiredFields = bodyParams.filter(p => !p.optional).map(p => p.field);
+          const properties = {};
+
+          bodyParams.forEach(param => {
+            properties[param.field] = {
+              ...convertTypeToSchema(param.type),
+              description: param.description || '',
+              ...(param.defaultValue && { default: param.defaultValue })
+            };
+          });
+
+          operation.requestBody = {
+            required: requiredFields.length > 0,
+            content: {
+              'application/json': {
+                schema: {
+                  type: 'object',
+                  properties: properties,
+                  ...(requiredFields.length > 0 && { required: requiredFields })
+                }
+              }
+            }
+          };
+
+          // Add request examples
+          if (endpoint.examples && endpoint.examples.length > 0) {
+            operation.requestBody.content['application/json'].examples = {};
+            endpoint.examples.forEach((ex, idx) => {
+              const exampleName = ex.title || `example_${idx + 1}`;
+              try {
+                operation.requestBody.content['application/json'].examples[exampleName] = {
+                  summary: ex.title || '',
+                  value: JSON.parse(ex.content)
+                };
+              } catch (e) {
+                operation.requestBody.content['application/json'].examples[exampleName] = {
+                  summary: ex.title || '',
+                  value: ex.content
+                };
+              }
+            });
+          }
+        }
+
+        // Success responses
+        const successResponses = endpoint.success || {};
+        let hasSuccessResponse = false;
+
+        for (const [groupName, responses] of Object.entries(successResponses)) {
+          if (!responses || responses.length === 0) continue;
+          hasSuccessResponse = true;
+
+          // Extract status code from group name (e.g., "Success 200" -> "200")
+          const statusMatch = groupName.match(/(\d{3})/);
+          const statusCode = statusMatch ? statusMatch[1] : '200';
+
+          const properties = {};
+          responses.forEach(resp => {
+            properties[resp.field] = {
+              ...convertTypeToSchema(resp.type),
+              description: resp.description || ''
+            };
+          });
+
+          operation.responses[statusCode] = {
+            description: groupName,
+            content: {
+              'application/json': {
+                schema: {
+                  type: 'object',
+                  properties: properties
+                }
+              }
+            }
+          };
+        }
+
+        // Add success examples
+        if (endpoint.successExamples && endpoint.successExamples.length > 0) {
+          const successStatus = Object.keys(operation.responses).find(s => s.startsWith('2')) || '200';
+          if (!operation.responses[successStatus]) {
+            operation.responses[successStatus] = {
+              description: 'Successful response',
+              content: { 'application/json': { schema: { type: 'object' } } }
+            };
+          }
+          operation.responses[successStatus].content['application/json'].examples = {};
+          endpoint.successExamples.forEach((ex, idx) => {
+            const exampleName = ex.title || `success_${idx + 1}`;
+            try {
+              operation.responses[successStatus].content['application/json'].examples[exampleName] = {
+                summary: ex.title || '',
+                value: JSON.parse(ex.content)
+              };
+            } catch (e) {
+              operation.responses[successStatus].content['application/json'].examples[exampleName] = {
+                summary: ex.title || '',
+                value: ex.content
+              };
+            }
+          });
+        }
+
+        // Default success response if none defined
+        if (!hasSuccessResponse) {
+          operation.responses['200'] = {
+            description: 'Successful response'
+          };
+        }
+
+        // Error responses
+        const errorResponses = endpoint.error || {};
+        for (const [groupName, responses] of Object.entries(errorResponses)) {
+          if (!responses || responses.length === 0) continue;
+
+          const statusMatch = groupName.match(/(\d{3})/);
+          const statusCode = statusMatch ? statusMatch[1] : '400';
+
+          const properties = {};
+          responses.forEach(resp => {
+            properties[resp.field] = {
+              ...convertTypeToSchema(resp.type),
+              description: resp.description || ''
+            };
+          });
+
+          operation.responses[statusCode] = {
+            description: groupName,
+            content: {
+              'application/json': {
+                schema: {
+                  type: 'object',
+                  properties: properties
+                }
+              }
+            }
+          };
+        }
+
+        // Add error examples
+        if (endpoint.errorExamples && endpoint.errorExamples.length > 0) {
+          const errorStatus = Object.keys(operation.responses).find(s => s.startsWith('4') || s.startsWith('5')) || '400';
+          if (!operation.responses[errorStatus]) {
+            operation.responses[errorStatus] = {
+              description: 'Error response',
+              content: { 'application/json': { schema: { type: 'object' } } }
+            };
+          }
+          operation.responses[errorStatus].content['application/json'].examples = {};
+          endpoint.errorExamples.forEach((ex, idx) => {
+            const exampleName = ex.title || `error_${idx + 1}`;
+            try {
+              operation.responses[errorStatus].content['application/json'].examples[exampleName] = {
+                summary: ex.title || '',
+                value: JSON.parse(ex.content)
+              };
+            } catch (e) {
+              operation.responses[errorStatus].content['application/json'].examples[exampleName] = {
+                summary: ex.title || '',
+                value: ex.content
+              };
+            }
+          });
+        }
+
+        openapi.paths[path][method] = operation;
+      });
+    });
+
+    // Add security schemes for found permissions
+    permissionsFound.forEach(perm => {
+      openapi.components.securitySchemes[perm] = {
+        type: 'apiKey',
+        in: 'header',
+        name: 'Authorization',
+        description: `Permission: ${perm}`
+      };
+    });
+
+    // Clean up empty components
+    if (Object.keys(openapi.components.schemas).length === 0) {
+      delete openapi.components.schemas;
+    }
+    if (Object.keys(openapi.components.securitySchemes).length === 0) {
+      delete openapi.components.securitySchemes;
+    }
+    if (Object.keys(openapi.components).length === 0) {
+      delete openapi.components;
+    }
+
+    return openapi;
+  }
+
+  function convertPathParams(path) {
+    // Convert :paramName to {paramName} for OpenAPI format
+    return path.replace(/:(\w+)/g, '{$1}');
+  }
+
+  function extractPathParameters(path) {
+    const matches = path.match(/[:{](\w+)[}]?/g) || [];
+    return matches.map(m => m.replace(/[:{}\s]/g, ''));
+  }
+
+  function convertTypeToSchema(type) {
+    if (!type) return { type: 'string' };
+
+    const typeName = (type.name || 'string').toLowerCase();
+    let schema = {};
+
+    // Map common types to OpenAPI types
+    switch (typeName) {
+      case 'string':
+      case 'str':
+        schema.type = 'string';
+        break;
+      case 'number':
+      case 'int':
+      case 'integer':
+        schema.type = 'integer';
+        break;
+      case 'float':
+      case 'double':
+      case 'decimal':
+        schema.type = 'number';
+        break;
+      case 'boolean':
+      case 'bool':
+        schema.type = 'boolean';
+        break;
+      case 'object':
+      case 'json':
+        schema.type = 'object';
+        break;
+      case 'array':
+        schema.type = 'array';
+        schema.items = { type: 'string' };
+        break;
+      case 'date':
+        schema.type = 'string';
+        schema.format = 'date';
+        break;
+      case 'datetime':
+        schema.type = 'string';
+        schema.format = 'date-time';
+        break;
+      case 'email':
+        schema.type = 'string';
+        schema.format = 'email';
+        break;
+      case 'url':
+      case 'uri':
+        schema.type = 'string';
+        schema.format = 'uri';
+        break;
+      case 'file':
+        schema.type = 'string';
+        schema.format = 'binary';
+        break;
+      default:
+        schema.type = 'string';
+    }
+
+    // Handle arrays
+    if (type.isArray) {
+      schema = {
+        type: 'array',
+        items: schema
+      };
+    }
+
+    // Handle enums (allowed values)
+    if (type.allowedValues && type.allowedValues.length > 0) {
+      if (schema.type === 'array') {
+        schema.items.enum = type.allowedValues;
+      } else {
+        schema.enum = type.allowedValues;
+      }
+    }
+
+    // Handle size constraints
+    if (type.size) {
+      const sizeMatch = type.size.match(/(\d+)?\.\.(\d+)?/);
+      if (sizeMatch) {
+        const [, min, max] = sizeMatch;
+        if (schema.type === 'string') {
+          if (min) schema.minLength = parseInt(min);
+          if (max) schema.maxLength = parseInt(max);
+        } else if (schema.type === 'integer' || schema.type === 'number') {
+          if (min) schema.minimum = parseInt(min);
+          if (max) schema.maximum = parseInt(max);
+        } else if (schema.type === 'array') {
+          if (min) schema.minItems = parseInt(min);
+          if (max) schema.maxItems = parseInt(max);
+        }
+      }
+    }
+
+    return schema;
+  }
+
+  function downloadOpenAPI(groupName) {
+    let openapi;
+    let filename;
+
+    if (groupName === '__all__') {
+      openapi = convertToOpenAPI(apiData.groups, { allGroups: true });
+      filename = `${(apiData.project.name || 'api').toLowerCase().replace(/\s+/g, '-')}-openapi.json`;
+    } else {
+      const group = apiData.groups.find(g => g.name === groupName);
+      if (!group) return;
+      openapi = convertToOpenAPI([group]);
+      filename = `${groupName.toLowerCase().replace(/\s+/g, '-')}-openapi.json`;
+    }
+
+    const json = JSON.stringify(openapi, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  // Global functions
+  window.toggleExample = function(header) {
+    const block = header.closest('.example-block');
+    block.classList.toggle('collapsed');
+  };
+
+  window.copyCode = function(btn) {
+    const block = btn.closest('.example-block');
+    const code = block.querySelector('pre').textContent;
+
+    navigator.clipboard.writeText(code).then(() => {
+      const originalText = btn.textContent;
+      btn.textContent = 'Copied!';
+      setTimeout(() => {
+        btn.textContent = originalText;
+      }, 2000);
+    });
+  };
+
+  window.downloadOpenAPI = function(groupName) {
+    downloadOpenAPI(groupName);
+  };
+
+  window.sendRequest = async function(endpointId) {
+    const container = document.querySelector(`.sample-request[data-endpoint-id="${endpointId}"]`);
+    const responseDiv = document.getElementById(`sample-response-${endpointId}`);
+    const statusDiv = document.getElementById(`sample-status-${endpointId}`);
+    const urlPreview = document.getElementById(`sample-url-preview-${endpointId}`);
+
+    if (!container) return;
+
+    const method = container.dataset.method;
+    const baseUrl = container.dataset.baseUrl;
+    let path = container.dataset.path;
+
+    const headers = { 'Accept': 'application/json' };
+    container.querySelectorAll('[data-type="header"]').forEach(input => {
+      const value = input.type === 'checkbox' ? input.checked : input.value;
+      if (value) headers[input.dataset.field] = String(value);
+    });
+
+    container.querySelectorAll('[data-type="path"]').forEach(input => {
+      const value = input.value;
+      if (value) {
+        path = path.replace(`:${input.dataset.field}`, encodeURIComponent(value));
+        path = path.replace(`{${input.dataset.field}}`, encodeURIComponent(value));
+      }
+    });
+
+    const queryParams = new URLSearchParams();
+    container.querySelectorAll('[data-type="query"]').forEach(input => {
+      const value = input.type === 'checkbox' ? input.checked : input.value;
+      if (value) queryParams.append(input.dataset.field, String(value));
+    });
+
+    let url = baseUrl + path;
+    const queryString = queryParams.toString();
+    if (queryString) url += '?' + queryString;
+
+    urlPreview.textContent = url;
+
+    let body = null;
+    let hasFileInput = false;
+
+    if (['POST', 'PUT', 'PATCH'].includes(method)) {
+      const bodyInputs = container.querySelectorAll('[data-type="body"]');
+      const fileInputs = container.querySelectorAll('[data-type="body"][data-is-file="true"]');
+      const rawBody = document.getElementById(`sample-body-raw-${endpointId}`);
+
+      // Check if there are file inputs with files selected
+      fileInputs.forEach(input => {
+        if (input.files && input.files.length > 0) {
+          hasFileInput = true;
+        }
+      });
+
+      if (hasFileInput) {
+        // Use FormData for file uploads
+        body = new FormData();
+        bodyInputs.forEach(input => {
+          if (input.dataset.isFile === 'true') {
+            if (input.files && input.files.length > 0) {
+              body.append(input.dataset.field, input.files[0]);
+            }
+          } else {
+            let value = input.type === 'checkbox' ? input.checked : input.value;
+            if (value !== '' && value !== null && value !== false) {
+              body.append(input.dataset.field, value);
+            }
+          }
+        });
+        // Don't set Content-Type for FormData - browser will set it with boundary
+      } else if (bodyInputs.length > 0) {
+        const bodyObj = {};
+        bodyInputs.forEach(input => {
+          if (input.dataset.isFile !== 'true') {
+            let value = input.type === 'checkbox' ? input.checked : input.value;
+            if (input.type === 'number' && value) value = Number(value);
+            if (value !== '' && value !== null) {
+              setNestedValue(bodyObj, input.dataset.field, value);
+            }
+          }
+        });
+        if (Object.keys(bodyObj).length > 0) {
+          body = JSON.stringify(bodyObj);
+          headers['Content-Type'] = 'application/json';
+        }
+      } else if (rawBody && rawBody.value.trim()) {
+        body = rawBody.value.trim();
+        headers['Content-Type'] = 'application/json';
+      }
+    }
+
+    responseDiv.textContent = 'Loading...';
+    statusDiv.textContent = '';
+    statusDiv.className = 'sample-status';
+
+    try {
+      const fetchOptions = {
+        method: method,
+        body: body
+      };
+
+      // Only add headers if not using FormData (FormData needs browser to set Content-Type)
+      if (!hasFileInput) {
+        fetchOptions.headers = headers;
+      } else {
+        // For FormData, only include non-Content-Type headers
+        const formDataHeaders = { ...headers };
+        delete formDataHeaders['Content-Type'];
+        if (Object.keys(formDataHeaders).length > 0) {
+          fetchOptions.headers = formDataHeaders;
+        }
+      }
+
+      const response = await fetch(url, fetchOptions);
+
+      statusDiv.textContent = `${response.status} ${response.statusText}`;
+      statusDiv.classList.add(response.ok ? 'success' : 'error');
+
+      const contentType = response.headers.get('content-type');
+      let data;
+
+      if (contentType && contentType.includes('application/json')) {
+        data = await response.json();
+        responseDiv.textContent = JSON.stringify(data, null, 2);
+      } else {
+        data = await response.text();
+        responseDiv.textContent = data || '(empty response)';
+      }
+    } catch (error) {
+      statusDiv.textContent = 'Error';
+      statusDiv.classList.add('error');
+      responseDiv.textContent = `Error: ${error.message}`;
+    }
+  };
+
+  function setNestedValue(obj, path, value) {
+    const keys = path.split('.');
+    let current = obj;
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (!current[keys[i]]) current[keys[i]] = {};
+      current = current[keys[i]];
+    }
+    current[keys[keys.length - 1]] = value;
+  }
+
+  // ========================================
+  // Postman/Insomnia Export Functions
+  // ========================================
+
+  window.downloadPostmanCollection = function(groupName) {
+    const collection = generatePostmanCollection(groupName);
+    const blob = new Blob([JSON.stringify(collection, null, 2)], { type: 'application/json' });
+    const filename = groupName === '__all__'
+      ? `${apiData.project.name || 'api'}_postman_collection.json`
+      : `${groupName}_postman_collection.json`;
+    downloadFileBlob(blob, filename);
+  };
+
+  window.downloadInsomniaCollection = function(groupName) {
+    const collection = generateInsomniaCollection(groupName);
+    const blob = new Blob([JSON.stringify(collection, null, 2)], { type: 'application/json' });
+    const filename = groupName === '__all__'
+      ? `${apiData.project.name || 'api'}_insomnia.json`
+      : `${groupName}_insomnia.json`;
+    downloadFileBlob(blob, filename);
+  };
+
+  function downloadFileBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  function generatePostmanCollection(groupName) {
+    const baseUrl = apiData.project.url || 'https://api.example.com';
+
+    const collection = {
+      info: {
+        name: groupName === '__all__'
+          ? (apiData.project.name || 'API')
+          : groupName,
+        description: apiData.project.description || '',
+        schema: 'https://schema.getpostman.com/json/collection/v2.1.0/collection.json',
+        _exporter_id: 'apidocly'
+      },
+      variable: [
+        {
+          key: 'baseUrl',
+          value: baseUrl,
+          type: 'string'
+        }
+      ],
+      item: []
+    };
+
+    // Add environment variables if defined
+    if (apiData.project.environments && apiData.project.environments.length > 0) {
+      apiData.project.environments.forEach(env => {
+        collection.variable.push({
+          key: `baseUrl_${env.name.replace(/\s+/g, '_').toLowerCase()}`,
+          value: env.url,
+          type: 'string'
+        });
+      });
+    }
+
+    // Filter groups
+    const groups = groupName === '__all__'
+      ? apiData.groups
+      : apiData.groups.filter(g => g.name === groupName);
+
+    // Build items
+    groups.forEach(group => {
+      const groupItem = {
+        name: group.name,
+        item: []
+      };
+
+      group.endpoints.forEach(endpoint => {
+        const request = buildPostmanRequest(endpoint, baseUrl);
+        groupItem.item.push({
+          name: endpoint.title || `${endpoint.method} ${endpoint.path}`,
+          request: request,
+          response: buildPostmanExampleResponses(endpoint)
+        });
+      });
+
+      collection.item.push(groupItem);
+    });
+
+    return collection;
+  }
+
+  function buildPostmanRequest(endpoint, baseUrl) {
+    const pathParams = getAllParams(endpoint.parameters);
+    const queryParams = getAllParams(endpoint.query);
+    const headerParams = getAllParams(endpoint.headers);
+    const bodyParams = getAllParams(endpoint.body);
+
+    // Build URL with Postman variable syntax
+    let path = endpoint.path;
+    pathParams.forEach(param => {
+      path = path.replace(`:${param.field}`, `:${param.field}`);
+      path = path.replace(`{${param.field}}`, `:${param.field}`);
+    });
+
+    const request = {
+      method: endpoint.method,
+      header: [],
+      url: {
+        raw: `{{baseUrl}}${path}`,
+        host: ['{{baseUrl}}'],
+        path: path.split('/').filter(p => p),
+        variable: [],
+        query: []
+      }
+    };
+
+    // Add path variables
+    pathParams.forEach(param => {
+      request.url.variable.push({
+        key: param.field,
+        value: getSampleValue(param),
+        description: param.description || ''
+      });
+    });
+
+    // Add query parameters
+    queryParams.forEach(param => {
+      request.url.query.push({
+        key: param.field,
+        value: getSampleValue(param),
+        description: param.description || '',
+        disabled: !param.required
+      });
+    });
+
+    // Add headers
+    headerParams.forEach(param => {
+      request.header.push({
+        key: param.field,
+        value: getSampleValue(param),
+        description: param.description || ''
+      });
+    });
+
+    // Add body
+    if (bodyParams.length > 0 && ['POST', 'PUT', 'PATCH'].includes(endpoint.method)) {
+      const bodyObj = {};
+      bodyParams.forEach(param => {
+        setNestedValue(bodyObj, param.field, getSampleValue(param));
+      });
+
+      request.header.push({
+        key: 'Content-Type',
+        value: 'application/json'
+      });
+
+      request.body = {
+        mode: 'raw',
+        raw: JSON.stringify(bodyObj, null, 2),
+        options: {
+          raw: {
+            language: 'json'
+          }
+        }
+      };
+    }
+
+    return request;
+  }
+
+  function buildPostmanExampleResponses(endpoint) {
+    const responses = [];
+
+    if (endpoint.successExamples && endpoint.successExamples.length > 0) {
+      endpoint.successExamples.forEach(example => {
+        responses.push({
+          name: example.title || 'Success Response',
+          originalRequest: {},
+          status: 'OK',
+          code: 200,
+          body: example.content || ''
+        });
+      });
+    }
+
+    return responses;
+  }
+
+  function generateInsomniaCollection(groupName) {
+    const baseUrl = apiData.project.url || 'https://api.example.com';
+    const workspaceId = 'wrk_' + generateUniqueId();
+
+    const collection = {
+      _type: 'export',
+      __export_format: 4,
+      __export_date: new Date().toISOString(),
+      __export_source: 'apidocly',
+      resources: []
+    };
+
+    // Add workspace
+    collection.resources.push({
+      _id: workspaceId,
+      _type: 'workspace',
+      name: groupName === '__all__'
+        ? (apiData.project.name || 'API')
+        : groupName,
+      description: apiData.project.description || ''
+    });
+
+    // Add base environment
+    const envId = 'env_' + generateUniqueId();
+    collection.resources.push({
+      _id: envId,
+      _type: 'environment',
+      parentId: workspaceId,
+      name: 'Base Environment',
+      data: {
+        base_url: baseUrl
+      }
+    });
+
+    // Add additional environments
+    if (apiData.project.environments && apiData.project.environments.length > 0) {
+      apiData.project.environments.forEach(env => {
+        collection.resources.push({
+          _id: 'env_' + generateUniqueId(),
+          _type: 'environment',
+          parentId: envId,
+          name: env.name,
+          data: {
+            base_url: env.url
+          }
+        });
+      });
+    }
+
+    // Filter groups
+    const groups = groupName === '__all__'
+      ? apiData.groups
+      : apiData.groups.filter(g => g.name === groupName);
+
+    // Build request groups and requests
+    groups.forEach(group => {
+      const groupId = 'fld_' + generateUniqueId();
+
+      collection.resources.push({
+        _id: groupId,
+        _type: 'request_group',
+        parentId: workspaceId,
+        name: group.name
+      });
+
+      group.endpoints.forEach(endpoint => {
+        const request = buildInsomniaRequest(endpoint, groupId);
+        collection.resources.push(request);
+      });
+    });
+
+    return collection;
+  }
+
+  function buildInsomniaRequest(endpoint, parentId) {
+    const pathParams = getAllParams(endpoint.parameters);
+    const queryParams = getAllParams(endpoint.query);
+    const headerParams = getAllParams(endpoint.headers);
+    const bodyParams = getAllParams(endpoint.body);
+
+    // Build URL with Insomnia variable syntax
+    let path = endpoint.path;
+    pathParams.forEach(param => {
+      path = path.replace(`:${param.field}`, `{{ _.${param.field} }}`);
+      path = path.replace(`{${param.field}}`, `{{ _.${param.field} }}`);
+    });
+
+    const request = {
+      _id: 'req_' + generateUniqueId(),
+      _type: 'request',
+      parentId: parentId,
+      name: endpoint.title || `${endpoint.method} ${endpoint.path}`,
+      description: endpoint.description || '',
+      method: endpoint.method,
+      url: `{{ _.base_url }}${path}`,
+      headers: [],
+      parameters: [],
+      body: {}
+    };
+
+    // Add query parameters
+    queryParams.forEach(param => {
+      request.parameters.push({
+        name: param.field,
+        value: getSampleValue(param),
+        disabled: !param.required
+      });
+    });
+
+    // Add headers
+    headerParams.forEach(param => {
+      request.headers.push({
+        name: param.field,
+        value: getSampleValue(param)
+      });
+    });
+
+    // Add body
+    if (bodyParams.length > 0 && ['POST', 'PUT', 'PATCH'].includes(endpoint.method)) {
+      const bodyObj = {};
+      bodyParams.forEach(param => {
+        setNestedValue(bodyObj, param.field, getSampleValue(param));
+      });
+
+      request.headers.push({
+        name: 'Content-Type',
+        value: 'application/json'
+      });
+
+      request.body = {
+        mimeType: 'application/json',
+        text: JSON.stringify(bodyObj, null, 2)
+      };
+    }
+
+    return request;
+  }
+
+  function generateUniqueId() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+  }
+
+  // ========================================
+  // Version Selection Functions
+  // ========================================
+
+  let availableEndpointVersions = [];
+
+  function initVersionComparison() {
+    availableEndpointVersions = getEndpointVersions();
+    const versionConfig = typeof apiVersionsConfig !== 'undefined' ? apiVersionsConfig : { withCompare: false };
+    const wrapper = document.getElementById('version-selector-wrapper');
+    const selector = document.getElementById('version-selector');
+    const panel = document.getElementById('version-compare-panel');
+    const toggleBtn = document.getElementById('version-compare-toggle');
+    const closeBtn = document.getElementById('version-compare-close');
+    const compareBtn = document.getElementById('version-compare-btn');
+    const versionFrom = document.getElementById('version-from');
+    const versionTo = document.getElementById('version-to');
+
+    if (!wrapper || availableEndpointVersions.length < 2) {
+      // Need at least 2 endpoint versions to show selector
+      if (wrapper) wrapper.classList.add('hidden');
+      return;
+    }
+
+    // Show the version selector
+    wrapper.classList.remove('hidden');
+
+    // Only show compare button if withCompare is enabled
+    if (!versionConfig.withCompare && toggleBtn) {
+      toggleBtn.classList.add('hidden');
+    }
+
+    // Populate main version selector from endpoint versions
+    // First option is "Latest" (shows latest version of each endpoint)
+    let selectorHtml = '<option value="" selected>Latest</option>';
+    availableEndpointVersions.forEach(function(version) {
+      selectorHtml += '<option value="' + escapeHtml(version) + '">v' + escapeHtml(version) + '</option>';
+    });
+    selector.innerHTML = selectorHtml;
+
+    // Populate comparison selectors
+    let compareOptionsHtml = '';
+    availableEndpointVersions.forEach(function(version) {
+      compareOptionsHtml += '<option value="' + escapeHtml(version) + '">v' + escapeHtml(version) + '</option>';
+    });
+
+    if (versionFrom) versionFrom.innerHTML = compareOptionsHtml;
+    if (versionTo) versionTo.innerHTML = compareOptionsHtml;
+
+    // Default comparison: second newest to newest
+    if (availableEndpointVersions.length >= 2 && versionFrom && versionTo) {
+      versionFrom.value = availableEndpointVersions[1]; // Second newest (older)
+      versionTo.value = availableEndpointVersions[0];   // Newest
+    }
+
+    // Version selector change - filter endpoints by version
+    selector.addEventListener('change', function(e) {
+      const version = e.target.value;
+      selectedEndpointVersion = version || null; // null means "Latest"
+      reRenderWithData();
+    });
+
+    // Toggle comparison panel
+    if (toggleBtn) {
+      toggleBtn.addEventListener('click', function() {
+        panel.classList.toggle('hidden');
+      });
+    }
+
+    if (closeBtn) {
+      closeBtn.addEventListener('click', function() {
+        panel.classList.add('hidden');
+      });
+    }
+
+    // Compare button
+    if (compareBtn) {
+      compareBtn.addEventListener('click', function() {
+        const fromVersion = versionFrom.value;
+        const toVersion = versionTo.value;
+
+        if (fromVersion === toVersion) {
+          alert('Please select two different versions to compare.');
+          return;
+        }
+
+        compareBtn.disabled = true;
+        compareBtn.textContent = 'Comparing...';
+
+        try {
+          const fromData = filterToVersion(apiData, fromVersion);
+          const toData = filterToVersion(apiData, toVersion);
+
+          const diff = compareVersionData(fromData, toData);
+          renderDiffResults(diff, { version: fromVersion }, { version: toVersion });
+
+          document.getElementById('version-compare-results').classList.remove('hidden');
+        } catch (error) {
+          console.error('Failed to compare versions:', error);
+          alert('Failed to compare versions: ' + error.message);
+        } finally {
+          compareBtn.disabled = false;
+          compareBtn.textContent = 'Compare';
+        }
+      });
+    }
+  }
+
+  function reRenderWithData() {
+    // Re-generate group colors for the filtered data
+    generateGroupColors();
+
+    // Update stats for the filtered data
+    updateStats();
+
+    // Re-render groups (uses getActiveData() which applies version filter)
+    renderGroups();
+
+    // Reset to groups view
+    currentGroup = null;
+    if (groupsView) groupsView.classList.remove('hidden');
+    if (endpointsView) endpointsView.classList.add('hidden');
+    if (searchView) searchView.classList.add('hidden');
+  }
+
+  async function loadVersionData(filename) {
+    if (versionCache[filename]) {
+      return versionCache[filename];
+    }
+
+    // Check if this is the current version - use apiData directly
+    if (apiData && apiData.project) {
+      const currentVersionFilename = 'v' + apiData.project.version.replace(/\./g, '_') + '.json';
+      if (filename === currentVersionFilename) {
+        versionCache[filename] = apiData;
+        return apiData;
+      }
+    }
+
+    // Check if version data is embedded in versions.js (for file:// protocol support)
+    if (typeof apiVersionsData !== 'undefined' && apiVersionsData[filename]) {
+      versionCache[filename] = apiVersionsData[filename];
+      return apiVersionsData[filename];
+    }
+
+    // Fall back to fetch (for http:// protocol)
+    try {
+      const response = await fetch('versions/' + filename);
+      if (!response.ok) {
+        console.error('Version fetch failed:', response.status, response.statusText, 'for', filename);
+        throw new Error('Failed to load version: ' + filename + ' (HTTP ' + response.status + ')');
+      }
+
+      const data = await response.json();
+      versionCache[filename] = data;
+      return data;
+    } catch (error) {
+      console.error('Version load error:', error);
+      throw error;
+    }
+  }
+
+  function compareVersionData(oldData, newData) {
+    const diff = {
+      added: [],
+      removed: [],
+      modified: []
+    };
+
+    // Build endpoint maps
+    const oldEndpoints = new Map();
+    const newEndpoints = new Map();
+
+    for (const group of oldData.groups) {
+      for (const endpoint of group.endpoints) {
+        const key = `${endpoint.method}:${endpoint.path}`;
+        oldEndpoints.set(key, { ...endpoint, group: group.name });
+      }
+    }
+
+    for (const group of newData.groups) {
+      for (const endpoint of group.endpoints) {
+        const key = `${endpoint.method}:${endpoint.path}`;
+        newEndpoints.set(key, { ...endpoint, group: group.name });
+      }
+    }
+
+    // Find added endpoints
+    for (const [key, endpoint] of newEndpoints) {
+      if (!oldEndpoints.has(key)) {
+        diff.added.push(endpoint);
+      }
+    }
+
+    // Find removed endpoints
+    for (const [key, endpoint] of oldEndpoints) {
+      if (!newEndpoints.has(key)) {
+        diff.removed.push(endpoint);
+      }
+    }
+
+    // Find modified endpoints
+    for (const [key, newEndpoint] of newEndpoints) {
+      if (oldEndpoints.has(key)) {
+        const oldEndpoint = oldEndpoints.get(key);
+        const changes = findEndpointChanges(oldEndpoint, newEndpoint);
+        if (changes.length > 0) {
+          diff.modified.push({
+            endpoint: newEndpoint,
+            changes: changes
+          });
+        }
+      }
+    }
+
+    return diff;
+  }
+
+  function findEndpointChanges(oldEp, newEp) {
+    const changes = [];
+
+    // Check basic fields
+    if (oldEp.title !== newEp.title) {
+      changes.push({ field: 'title', old: oldEp.title, new: newEp.title });
+    }
+    if (oldEp.description !== newEp.description) {
+      changes.push({ field: 'description', old: 'changed', new: 'changed' });
+    }
+    if (oldEp.deprecated !== newEp.deprecated) {
+      changes.push({ field: 'deprecated', old: oldEp.deprecated, new: newEp.deprecated });
+    }
+    if (oldEp.permission !== newEp.permission) {
+      changes.push({ field: 'permission', old: oldEp.permission, new: newEp.permission });
+    }
+
+    // Check parameters
+    const paramChanges = compareParams(oldEp.parameters, newEp.parameters, 'parameters');
+    const queryChanges = compareParams(oldEp.query, newEp.query, 'query');
+    const bodyChanges = compareParams(oldEp.body, newEp.body, 'body');
+    const headerChanges = compareParams(oldEp.headers, newEp.headers, 'headers');
+
+    changes.push(...paramChanges, ...queryChanges, ...bodyChanges, ...headerChanges);
+
+    // Check responses
+    const successChanges = compareParams(oldEp.success, newEp.success, 'success');
+    const errorChanges = compareParams(oldEp.error, newEp.error, 'error');
+
+    changes.push(...successChanges, ...errorChanges);
+
+    return changes;
+  }
+
+  function compareParams(oldParams, newParams, fieldName) {
+    const changes = [];
+
+    const oldFields = new Set();
+    const newFields = new Set();
+
+    // Flatten grouped params
+    if (oldParams) {
+      for (const group of Object.values(oldParams)) {
+        for (const param of group) {
+          oldFields.add(param.field);
+        }
+      }
+    }
+
+    if (newParams) {
+      for (const group of Object.values(newParams)) {
+        for (const param of group) {
+          newFields.add(param.field);
+        }
+      }
+    }
+
+    // Find added fields
+    for (const field of newFields) {
+      if (!oldFields.has(field)) {
+        changes.push({ field: `${fieldName}.${field}`, type: 'added' });
+      }
+    }
+
+    // Find removed fields
+    for (const field of oldFields) {
+      if (!newFields.has(field)) {
+        changes.push({ field: `${fieldName}.${field}`, type: 'removed' });
+      }
+    }
+
+    return changes;
+  }
+
+  function renderDiffResults(diff, fromVersion, toVersion) {
+    const summaryEl = document.getElementById('version-diff-summary');
+    const detailsEl = document.getElementById('version-diff-details');
+
+    // Render summary
+    summaryEl.innerHTML = `
+      <div class="diff-stat added">
+        <span class="diff-stat-count">${diff.added.length}</span>
+        <span>Added</span>
+      </div>
+      <div class="diff-stat removed">
+        <span class="diff-stat-count">${diff.removed.length}</span>
+        <span>Removed</span>
+      </div>
+      <div class="diff-stat modified">
+        <span class="diff-stat-count">${diff.modified.length}</span>
+        <span>Modified</span>
+      </div>
+    `;
+
+    // Render details
+    let detailsHtml = '';
+
+    if (diff.added.length === 0 && diff.removed.length === 0 && diff.modified.length === 0) {
+      detailsHtml = '<div class="no-changes-message">No changes between these versions.</div>';
+    } else {
+      if (diff.added.length > 0) {
+        detailsHtml += `
+          <div class="diff-section">
+            <div class="diff-section-header added">
+              <span class="diff-section-icon">+</span>
+              <span>Added Endpoints (${diff.added.length})</span>
+            </div>
+            <div class="diff-section-content">
+              ${diff.added.map(ep => renderDiffEndpoint(ep, 'added')).join('')}
+            </div>
+          </div>
+        `;
+      }
+
+      if (diff.removed.length > 0) {
+        detailsHtml += `
+          <div class="diff-section">
+            <div class="diff-section-header removed">
+              <span class="diff-section-icon">−</span>
+              <span>Removed Endpoints (${diff.removed.length})</span>
+            </div>
+            <div class="diff-section-content">
+              ${diff.removed.map(ep => renderDiffEndpoint(ep, 'removed')).join('')}
+            </div>
+          </div>
+        `;
+      }
+
+      if (diff.modified.length > 0) {
+        detailsHtml += `
+          <div class="diff-section">
+            <div class="diff-section-header modified">
+              <span class="diff-section-icon">~</span>
+              <span>Modified Endpoints (${diff.modified.length})</span>
+            </div>
+            <div class="diff-section-content">
+              ${diff.modified.map(item => renderDiffEndpoint(item.endpoint, 'modified', item.changes)).join('')}
+            </div>
+          </div>
+        `;
+      }
+    }
+
+    detailsEl.innerHTML = detailsHtml;
+  }
+
+  function renderDiffEndpoint(endpoint, type, changes = null) {
+    let changesHtml = '';
+    if (changes && changes.length > 0) {
+      changesHtml = `
+        <div class="diff-changes-list">
+          ${changes.map(c => `<div class="diff-change-item">• <span class="field">${escapeHtml(c.field)}</span> ${c.type || 'changed'}</div>`).join('')}
+        </div>
+      `;
+    }
+
+    return `
+      <div class="diff-endpoint ${type}">
+        <span class="diff-endpoint-method ${endpoint.method.toLowerCase()}">${endpoint.method}</span>
+        <span class="diff-endpoint-path">${escapeHtml(endpoint.path)}</span>
+        <span class="diff-endpoint-title">${escapeHtml(endpoint.title || '')}</span>
+      </div>
+      ${changesHtml}
+    `;
+  }
+
+  // Initialize
+  function startup() {
+    if (typeof window.apiDoclyAuth !== 'undefined' && window.apiDoclyAuth.isReady) {
+      app.classList.remove('hidden');
+      init();
+    } else if (typeof window.apiDoclyAuth !== 'undefined') {
+      window.apiDoclyAuth.onAuthenticated(function() {
+        init();
+      });
+    } else {
+      app.classList.remove('hidden');
+      init();
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startup);
+  } else {
+    startup();
+  }
+})();