@emeryld/rrroutes-contract 2.2.2 → 2.2.4

package/dist/index.cjs

@@ -489,7 +489,7 @@ var CSS_STYLES = `:root {
 
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-  /* Tag Pastel Palette (Generated via class logic) */
+  /* Tag Pastel Palette */
   --tag-0-bg: rgba(254, 202, 202, 0.2); --tag-0-fg: #fca5a5; /* Red */
   --tag-1-bg: rgba(253, 230, 138, 0.2); --tag-1-fg: #fcd34d; /* Amber */
   --tag-2-bg: rgba(187, 247, 208, 0.2); --tag-2-fg: #86efac; /* Green */
@@ -562,6 +562,21 @@ body {
   box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
 }
 
+.schema-indent {
+  display: inline-block;
+}
+
+.schema-branch {
+  opacity: 0.6;
+  font-family: var(--font-mono);
+  margin-right: 2px;
+}
+
+.schema-meta code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
 /* Top Row: Filters */
 .filters-row {
   display: flex;
@@ -573,28 +588,27 @@ body {
 /* New Wrapper for Search and Methods */
 .left-column {
   display: flex;
-  flex-direction: column; /* Stack Search and Methods vertically */
-  gap: 16px; /* Gap between search and methods */
-  flex-basis: 300px; /* Fixed width for the left column */
+  flex-direction: column;
+  gap: 16px;
+  flex-basis: 300px;
   min-width: 250px;
 }
 
 .search-box {
-  /* No change to internal search box styling, but remove flex properties */
-  width: 100%; /* Make search fill the left-column width */
+  width: 100%;
   position: relative;
 }
 
 /* Tag Filter Group */
 .filter-group.tag-filters-container {
-  flex: 1; /* Tags take up all remaining space on the right */
+  flex: 1;
   min-width: 200px;
 }
 
 /* Method Filter Group */
 .filter-group.method-filters-container {
-  /* Stays inside the left-column, no need for 100% basis */
 }
+
 .search-input {
   width: 100%;
   background: rgba(2, 6, 23, 0.6);
@@ -675,14 +689,21 @@ body {
   border-color: var(--accent-primary);
 }
 
-/* Specialized Colored Tag Pills for Filters */
-.pill-checkbox.colored-tag input:checked + span {
-  background: var(--tag-bg);
-  color: var(--tag-fg);
-  border-color: var(--tag-fg);
+/* Tag filter pills */
+.tag-filter-pill {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(30, 41, 59, 0.5);
+  color: var(--text-muted);
+  border: 1px solid transparent;
+  transition: all 0.15s;
 }
-.pill-checkbox.colored-tag span {
-  /* Subtle hint of color even when unchecked? Optional. kept neutral for now */
+.pill-checkbox.colored-tag input:checked + .tag-filter-pill {
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 1px var(--accent-glow);
 }
 
 /* Group Jump Links */
@@ -762,8 +783,8 @@ body {
   padding: 12px 16px;
   display: flex;
   align-items: center;
-  gap: 12px; /* Space between method, path, tags */
-  flex-wrap: wrap; /* Allow wrapping on very small screens if needed, but row pref */
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 /* Item 1: Method */
@@ -784,7 +805,7 @@ body {
 .m-PATCH { background: var(--method-patch-bg); color: var(--method-patch); border: 1px solid rgba(45, 212, 191, 0.3); }
 .m-DELETE { background: var(--method-delete-bg); color: var(--method-delete); border: 1px solid rgba(248, 113, 113, 0.3); }
 
-/* Item 2: Path (Clickable) */
+/* Item 2: Path */
 .path-container {
   font-family: var(--font-mono);
   font-size: 13px;
@@ -811,7 +832,7 @@ body {
 }
 .path-container:hover .copy-icon { opacity: 1; }
 
-/* Item 3: Tags (Aligned right of path) */
+/* Item 3: Tags */
 .tags-container {
   display: flex;
   align-items: center;
@@ -881,6 +902,11 @@ body {
 }
 .summary-text { font-size: 14px; color: var(--text-main); line-height: 1.5; }
 
+.description-text {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
 /* Tables */
 .schema-table { width: 100%; border-collapse: collapse; font-size: 12px; }
 .schema-table th {
@@ -896,6 +922,13 @@ body {
 .req-true { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
 .req-false { color: #94a3b8; background: rgba(148, 163, 184, 0.1); }
 
+.schema-subtitle {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #64748b;
+}
+
 .empty-message { text-align: center; padding: 40px; color: var(--text-muted); }
 `;
 var DOCS_JS = `
@@ -906,7 +939,7 @@ var DOCS_JS = `
   } catch(e) { console.error('Failed to parse docs', e); }
 
   // State
-  let filters = {
+  const filters = {
     search: '',
     methods: new Set(),
     tags: new Set()
@@ -925,14 +958,13 @@ var DOCS_JS = `
   // Initialization
   function init() {
     populateFilters();
-    render();
     setupGlobalListeners();
+    render();
   }
 
   // Tag Coloring Logic
   function getTagColorClass(tagName) {
     if (tagName === 'not-implemented') return 'not-implemented';
-    // Simple string hash to select color index
     let hash = 0;
     for (let i = 0; i < tagName.length; i++) {
       hash = tagName.charCodeAt(i) + ((hash << 5) - hash);
@@ -951,55 +983,87 @@ var DOCS_JS = `
   }
 
   function populateFilters() {
+    if (!elMethodFilters || !elTagFilters) return;
+
     // Extract unique values
     const allMethods = new Set(leaves.map(l => (l.method || 'GET').toUpperCase()));
     const allTags = new Set(leaves.flatMap(l => (l.cfg && l.cfg.tags) ? l.cfg.tags : []));
 
     // Setup Method Checkboxes
     const sortedMethods = Array.from(allMethods).sort();
-    elMethodFilters.innerHTML = sortedMethods.map(m => \`
-      <label class="pill-checkbox">
-        <input type="checkbox" value="\${m}" checked onchange="updateFilters()">
-        <span>\${m}</span>
-      </label>
-    \`).join('');
+    elMethodFilters.innerHTML = sortedMethods.map(m => (
+      '<label class="pill-checkbox">' +
+        '<input type="checkbox" value="' + escapeAttr(m) + '" checked>' +
+        '<span>' + escapeHtml(m) + '</span>' +
+      '</label>'
+    )).join('');
     sortedMethods.forEach(m => filters.methods.add(m));
 
-    // Setup Tag Checkboxes (Left Aligned, Colored)
+    // Attach listeners to method checkboxes
+    elMethodFilters.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
+      cb.addEventListener('change', updateFilters);
+    });
+
+    // Setup Tag Checkboxes
     if (allTags.size > 0) {
       elTagFilters.innerHTML = Array.from(allTags).sort().map(t => {
         const colorClass = getTagColorClass(t);
-        const styleVars = 'style="--tag-bg:var(--' + colorClass + '-bg); --tag-fg:var(--' + colorClass + '-fg);"';
-        return \`
-          <label class="pill-checkbox colored-tag" \${styleVars}>
-            <input type="checkbox" value="\${t}" onchange="updateFilters()">
-            <span>\${t}</span>
-          </label>
-        \`;
+        return (
+          '<label class="pill-checkbox colored-tag">' +
+            '<input type="checkbox" value="' + escapeAttr(t) + '">' +
+            '<span class="tag-filter-pill ' + colorClass + '">' + escapeHtml(t) + '</span>' +
+          '</label>'
+        );
       }).join('');
+
+      // Attach listeners to tag checkboxes
+      elTagFilters.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
+        cb.addEventListener('change', updateFilters);
+      });
     }
   }
 
-  window.updateFilters = function() {
-    filters.search = elSearch.value.toLowerCase();
+  function updateFilters() {
+    if (elSearch) {
+      filters.search = elSearch.value.toLowerCase();
+    }
+
     filters.methods.clear();
-    elMethodFilters.querySelectorAll('input:checked').forEach(cb => filters.methods.add(cb.value));
+    if (elMethodFilters) {
+      elMethodFilters.querySelectorAll('input[type="checkbox"]:checked').forEach(function(cb) {
+        filters.methods.add(cb.value);
+      });
+    }
+
     filters.tags.clear();
-    elTagFilters.querySelectorAll('input:checked').forEach(cb => filters.tags.add(cb.value));
+    if (elTagFilters) {
+      elTagFilters.querySelectorAll('input[type="checkbox"]:checked').forEach(function(cb) {
+        filters.tags.add(cb.value);
+      });
+    }
+
     render();
   }
 
+  function setupGlobalListeners() {
+    if (elSearch) {
+      elSearch.addEventListener('input', updateFilters);
+    }
+  }
+
   // Core Render Logic
   function render() {
+    if (!elRouteList || !elOverview) return;
+
     // 1. Filter Data
-    const filtered = leaves.filter(leaf => {
+    const filtered = leaves.filter(function(leaf) {
       const m = (leaf.method || 'GET').toUpperCase();
       const t = (leaf.cfg && leaf.cfg.tags) ? leaf.cfg.tags : [];
       const path = (leaf.path || '').toLowerCase();
       const summary = (leaf.cfg && leaf.cfg.summary || '').toLowerCase();
 
       if (!filters.methods.has(m)) return false;
-      if (filters.tags.size > 0 && !t.some(tag => filters.tags.has(tag))) return false;
+      if (filters.tags.size > 0 && !t.some(function(tag) { return filters.tags.has(tag); })) return false;
       if (filters.search && !path.includes(filters.search) && !summary.includes(filters.search)) return false;
 
       return true;
@@ -1013,7 +1077,7 @@ var DOCS_JS = `
 
     // 2. Group Data
     const groups = {};
-    filtered.forEach(leaf => {
+    filtered.forEach(function(leaf) {
       const gName = (leaf.cfg && leaf.cfg.docsGroup) ? leaf.cfg.docsGroup : 'UNGROUPED';
       if (!groups[gName]) groups[gName] = [];
       groups[gName].push(leaf);
@@ -1021,19 +1085,23 @@ var DOCS_JS = `
 
     const sortedGroupNames = Object.keys(groups).sort(sortGroups);
 
-    // 3. Render Overview Chips (Inside Sticky Header)
-    // Note: We include a small label "GROUPS:" or similar if needed, or just chips.
-    elOverview.innerHTML = '<span class="overview-label">JUMP TO:</span>' + sortedGroupNames.map(gName => \`
-      <a href="#group-\${gName}" class="group-chip" onclick="scrollToGroup(event, '\${gName}')">
-        \${gName}
-      </a>
-    \`).join('');
+    // 3. Render Overview Chips
+    elOverview.innerHTML = (
+      '<span class="overview-label">JUMP TO:</span>' +
+      sortedGroupNames.map(function(gName) {
+        return (
+          '<a href="#group-' + escapeAttr(gName) + '" ' +
+          'class="group-chip" data-group="' + escapeAttr(gName) + '">' +
+          escapeHtml(gName) +
+          '</a>'
+        );
+      }).join('')
+    );
 
     // 4. Render Groups & Cards
-    const html = sortedGroupNames.map(gName => {
+    const html = sortedGroupNames.map(function(gName) {
       const routes = groups[gName];
-      // Sort Routes: Path ASC, then Method
-      routes.sort((a, b) => {
+      routes.sort(function(a, b) {
         const pA = a.path || '';
         const pB = b.path || '';
         if (pA < pB) return -1;
@@ -1041,23 +1109,27 @@ var DOCS_JS = `
         return (a.method || '').localeCompare(b.method || '');
       });
 
-      return \`
-        <div class="api-group" id="group-\${gName}">
-          <div class="group-header">
-            <h2 class="group-title">\${gName}</h2>
-            <div class="group-actions">
-              <button onclick="toggleGroup('\${gName}', true)">Expand All</button>
-              <button onclick="toggleGroup('\${gName}', false)">Collapse All</button>
-            </div>
-          </div>
-          <div class="cards-list">
-            \${routes.map(renderCard).join('')}
-          </div>
-        </div>
-      \`;
+      return (
+        '<div class="api-group" id="group-' + escapeAttr(gName) + '">' +
+          '<div class="group-header">' +
+            '<h2 class="group-title">' + escapeHtml(gName) + '</h2>' +
+            '<div class="group-actions">' +
+              '<button type="button" data-group="' + escapeAttr(gName) + '" data-action="expand">Expand All</button>' +
+              '<button type="button" data-group="' + escapeAttr(gName) + '" data-action="collapse">Collapse All</button>' +
+            '</div>' +
+          '</div>' +
+          '<div class="cards-list">' +
+            routes.map(renderCard).join('') +
+          '</div>' +
+        '</div>'
+      );
     }).join('');
 
     elRouteList.innerHTML = html;
+
+    // Wire up interactions that depend on rendered DOM
+    wireOverviewInteractions();
+    wireCardInteractions();
   }
 
   // Card Renderer
@@ -1069,35 +1141,33 @@ var DOCS_JS = `
     const description = cfg.description || '';
     const tags = cfg.tags || [];
 
-    // Header Construction: Method | Path | Tags | Spacer | Chevron
-    const tagBadges = tags.map(t => {
+    const tagBadges = tags.map(function(t) {
       const cClass = getTagColorClass(t);
-      return \`<span class="status-badge \${cClass}">\${t}</span>\`;
+      return '<span class="status-badge ' + cClass + '">' + escapeHtml(t) + '</span>';
     }).join('');
 
-    const headerHtml = \`
-      <div class="card-header">
-        <span class="method-badge m-\${method}">\${method}</span>
-
-        <div class="path-container" onclick="copyText(event, '\${path}')" title="Click to copy path">
-          <span class="path-text">\${path}</span>
-          <span class="copy-icon">\u{1F4CB}</span>
-        </div>
-
-        <div class="tags-container">
-          \${tagBadges}
-        </div>
-
-        <div class="header-spacer"></div>
-        <div class="expand-icon">\u25BC</div>
-      </div>
-    \`;
-
-    // Body Construction (Preserved structure)
-    let contentHtml = \`<div class="section-block"><div class="summary-text">
-      <strong>\${escape(summary)}</strong>
-      \${description ? '<br><span style="font-size:12px; opacity:0.7">' + escape(description) + '</span>' : ''}
-    </div></div>\`;
+    const headerHtml =
+      '<div class="card-header">' +
+        '<span class="method-badge m-' + escapeAttr(method) + '">' + escapeHtml(method) + '</span>' +
+        '<div class="path-container" data-path="' + escapeAttr(path) + '" title="Click to copy path">' +
+          '<span class="path-text">' + escapeHtml(path) + '</span>' +
+          '<span class="copy-icon">\u{1F4CB}</span>' +
+        '</div>' +
+        '<div class="tags-container">' +
+          tagBadges +
+        '</div>' +
+        '<div class="header-spacer"></div>' +
+        '<div class="expand-icon">\u25BC</div>' +
+      '</div>';
+
+    let contentHtml =
+      '<div class="section-block"><div class="summary-text">' +
+        '<strong>' + escapeHtml(summary) + '</strong>' +
+        (description
+          ? '<br><span class="description-text">' + escapeHtml(description) + '</span>'
+          : ''
+        ) +
+      '</div></div>';
 
     if (cfg.paramsSchema || cfg.querySchema) {
       contentHtml += '<div class="section-block"><div class="section-title">Parameters</div>';
@@ -1107,96 +1177,331 @@ var DOCS_JS = `
     }
 
     if (cfg.bodySchema) {
-      contentHtml += \`
-        <div class="section-block">
-          <div class="section-title">Request Body \${cfg.hasBody ? '' : '(Optional)'}</div>
-          \${renderSchemaTable(cfg.bodySchema)}
-        </div>
-      \`;
+      contentHtml +=
+        '<div class="section-block">' +
+          '<div class="section-title">Request Body ' + (cfg.hasBody ? '' : '(Optional)') + '</div>' +
+          renderSchemaTable(cfg.bodySchema) +
+        '</div>';
     }
 
     if (cfg.outputSchema) {
-      contentHtml += \`
-        <div class="section-block">
-          <div class="section-title">Response Schema</div>
-          \${renderSchemaTable(cfg.outputSchema)}
-        </div>
-      \`;
+      contentHtml +=
+        '<div class="section-block">' +
+          '<div class="section-title">Response Schema</div>' +
+          renderSchemaTable(cfg.outputSchema) +
+        '</div>';
     }
 
-    return \`
-      <article class="endpoint-card" data-expanded="false" onclick="toggleCard(this, event)">
-        \${headerHtml}
-        <div class="card-body" onclick="event.stopPropagation()">
-          \${contentHtml}
-        </div>
-      </article>
-    \`;
+    return (
+      '<article class="endpoint-card" data-expanded="false">' +
+        headerHtml +
+        '<div class="card-body">' +
+          contentHtml +
+        '</div>' +
+      '</article>'
+    );
   }
 
-  function renderSchemaTable(node, title) {
-    let rows = '';
-    if (node.kind === 'object' && node.properties) {
-      Object.keys(node.properties).forEach(key => {
-        const prop = node.properties[key];
-        const reqClass = prop.optional ? 'req-false' : 'req-true';
-        const reqText = prop.optional ? 'OPT' : 'REQ';
-        rows += \`
-          <tr>
-            <td class="col-name">\${key}</td>
-            <td class="col-type">\${getTypeLabel(prop)}</td>
-            <td><span class="req-badge \${reqClass}">\${reqText}</span></td>
-            <td>\${escape(prop.description || '')}</td>
-          </tr>
-        \`;
-      });
-    } else {
-      rows = \`<tr><td colspan="4">Type: \${getTypeLabel(node)}</td></tr>\`;
+
+function renderSchemaTable(node, title) {
+  let rows = '';
+
+  if (node.kind === 'object' && node.properties) {
+    rows = renderObjectChildren(node, 0);
+  } else {
+    rows = renderNodeRow('(root)', node, 0);
+  }
+
+  return (
+    (title
+      ? '<div class="schema-subtitle">' + escapeHtml(title) + '</div>'
+      : '') +
+    '<table class="schema-table">' +
+      rows +
+    '</table>'
+  );
+}
+
+/**
+ * Render all children of an object node (at a given depth).
+ */
+function renderObjectChildren(node, depth) {
+  if (!node.properties) return '';
+
+  let rows = '';
+  Object.keys(node.properties).forEach(function (key) {
+    rows += renderNodeRow(key, node.properties[key], depth);
+  });
+  return rows;
+}
+
+/**
+ * Render a single row for a property / node, then recursively render nested structure.
+ */
+function renderNodeRow(name, node, depth) {
+  const reqClass = node.optional ? 'req-false' : 'req-true';
+  const reqText = node.optional ? 'OPT' : 'REQ';
+
+  const indentPx = depth * 16;
+  const nameCell =
+    '<span class="schema-indent" style="padding-left:' +
+    indentPx +
+    'px;"></span>' +
+    (depth > 0 ? '<span class="schema-branch">\u2514\u2500 </span>' : '') +
+    escapeHtml(name);
+
+  const typeLabel = getTypeLabel(node);
+  const descriptionHtml = renderNodeDescription(node);
+
+  let rows =
+    '<tr>' +
+      '<td class="col-name">' + nameCell + '</td>' +
+      '<td class="col-type">' + escapeHtml(typeLabel) + '</td>' +
+      '<td><span class="req-badge ' + reqClass + '">' + reqText + '</span></td>' +
+      '<td>' + descriptionHtml + '</td>' +
+    '</tr>';
+
+  // 1) Object properties
+  if (node.kind === 'object' && node.properties) {
+    rows += renderObjectChildren(node, depth + 1);
+  }
+
+  // 2) Array element type
+  if (node.kind === 'array' && node.element) {
+    const element = node.element;
+    if (isComplexNode(element)) {
+      rows += renderNodeRow('[items]', element, depth + 1);
     }
-    return \`
-      \${title ? '<div style="font-size:11px; font-weight:600; margin-bottom:4px; color:#64748b">' + title + '</div>' : ''}
-      <table class="schema-table">\${rows}</table>
-    \`;
   }
 
+  // 3) Union variants
+  if (node.kind === 'union' && Array.isArray(node.union)) {
+    node.union.forEach(function (variant, index) {
+      rows += renderNodeRow('option ' + (index + 1), variant, depth + 1);
+    });
+  }
+
+  return rows;
+}
+
+/**
+ * Decide if a node is \u201Ccomplex\u201D enough to warrant a nested expansion row.
+ */
+function isComplexNode(node) {
+  return (
+    node.kind === 'object' ||
+    node.kind === 'array' ||
+    node.kind === 'union' ||
+    node.kind === 'record' ||
+    node.kind === 'tuple'
+  );
+}
+
+/**
+ * Helper: simple vs complex node, for compact type labels.
+ */
+function isSimpleNode(node) {
+  return !isComplexNode(node);
+}
+
+/**
+ * Type label shown in the "Type" column.
+ */
+function getTypeLabel(node) {
+  let base;
+
+  switch (node.kind) {
+    case 'object':
+      base = 'object';
+      break;
+
+    case 'array':
+      if (!node.element) {
+        base = 'array';
+      } else if (isSimpleNode(node.element)) {
+        base = 'array<' + getTypeLabel(node.element) + '>';
+      } else {
+        base = 'array<object>';
+      }
+      break;
+
+    case 'union':
+      if (node.union && node.union.length) {
+        const parts = node.union.map(function (u) {
+          return isSimpleNode(u) ? getTypeLabel(u) : 'object';
+        });
+        base = parts.join(' | ');
+      } else {
+        base = 'union';
+      }
+      break;
+
+    case 'literal':
+      base = 'literal';
+      break;
+
+    case 'enum':
+      base = 'enum';
+      break;
+
+    case 'record':
+      base = 'record';
+      break;
+
+    case 'tuple':
+      base = 'tuple';
+      break;
+
+    default:
+      base = node.kind || 'unknown';
+      break;
+  }
+
+  if (node.nullable) {
+    base = base + ' | null';
+  }
+  return base;
+}
+
+/**
+ * Description cell content:
+ * - main description text
+ * - for enum: allowed values
+ * - for literal: literal value
+ */
+function renderNodeDescription(node) {
+  const parts = [];
+
+  if (node.description) {
+    parts.push(escapeHtml(node.description));
+  }
+
+  if (node.kind === 'enum' && node.enumValues && node.enumValues.length) {
+    const values = node.enumValues
+      .map(function (v) {
+        return '<code>' + escapeHtml(String(v)) + '</code>';
+      })
+      .join(' | ');
+    parts.push('<div class="schema-meta">Allowed: ' + values + '</div>');
+  }
+
+  if (node.kind === 'literal' && typeof node.literal !== 'undefined') {
+    const valueStr = escapeHtml(JSON.stringify(node.literal));
+    parts.push(
+      '<div class="schema-meta">Literal: <code>' + valueStr + '</code></div>'
+    );
+  }
+
+  return parts.join('<br>');
+}
+
+/**
+ * Escape HTML helper.
+ */
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
   function getTypeLabel(node) {
     if (!node) return 'any';
-    if (node.kind === 'array') return \`\${getTypeLabel(node.element)}[]\`;
-    if (node.enumValues) return \`enum(\${node.enumValues.join('|')})\`;
+    if (node.kind === 'array') return getTypeLabel(node.element) + '[]';
+    if (node.enumValues) return 'enum(' + node.enumValues.join('|') + ')';
     return node.kind || 'any';
   }
 
-  function escape(str) {
-    if (!str) return '';
-    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  // Interactions
+
+  function wireOverviewInteractions() {
+    if (!elOverview || !elRouteList) return;
+
+    // group chips
+    elOverview.querySelectorAll('.group-chip').forEach(function(chip) {
+      chip.addEventListener('click', function(e) {
+        e.preventDefault();
+        const gName = chip.getAttribute('data-group');
+        if (gName) scrollToGroup(gName);
+      });
+    });
+
+    // expand/collapse buttons
+    elRouteList.querySelectorAll('.group-actions button').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        const gName = btn.getAttribute('data-group');
+        const action = btn.getAttribute('data-action');
+        if (!gName || !action) return;
+        toggleGroup(gName, action === 'expand');
+      });
+    });
   }
 
-  window.toggleCard = function(card, e) {
-    if (e.target.closest('.path-container')) return; // Don't toggle on path click
+  function wireCardInteractions() {
+    if (!elRouteList) return;
+
+    // card expand/collapse
+    elRouteList.querySelectorAll('.endpoint-card').forEach(function(card) {
+      card.addEventListener('click', function(e) {
+        var target = e.target;
+        if (target && target.closest && target.closest('.path-container')) {
+          // handled separately for copy
+          return;
+        }
+        toggleCard(card);
+      });
+    });
+
+    // copy path
+    elRouteList.querySelectorAll('.path-container').forEach(function(pc) {
+      pc.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const text = pc.getAttribute('data-path') || '';
+        copyText(text);
+      });
+    });
+  }
+
+  function toggleCard(card) {
     const isExpanded = card.getAttribute('data-expanded') === 'true';
-    card.setAttribute('data-expanded', !isExpanded);
-  };
+    card.setAttribute('data-expanded', String(!isExpanded));
+  }
 
-  window.toggleGroup = function(gName, expand) {
+  function toggleGroup(gName, expand) {
     const group = document.getElementById('group-' + gName);
     if (!group) return;
-    group.querySelectorAll('.endpoint-card').forEach(c => c.setAttribute('data-expanded', expand));
-  };
+    group.querySelectorAll('.endpoint-card').forEach(function(c) {
+      c.setAttribute('data-expanded', String(!!expand));
+    });
+  }
 
-  window.copyText = function(e, text) {
-    e.stopPropagation();
-    navigator.clipboard.writeText(text);
-    // Could add visual feedback here
-  };
+  function copyText(text) {
+    if (!navigator.clipboard || !text) return;
+    navigator.clipboard.writeText(text).catch(function() {
+      // ignore
+    });
+  }
 
-  window.scrollToGroup = function(e, gName) {
-    e.preventDefault();
+  function scrollToGroup(gName) {
     const el = document.getElementById('group-' + gName);
-    if(el) window.scrollTo({ top: el.offsetTop - 220, behavior: 'smooth' });
+    if (el) window.scrollTo({ top: el.offsetTop - 220, behavior: 'smooth' });
   }
 
-  function setupGlobalListeners() {
-    elSearch.addEventListener('input', updateFilters);
+  // Escaping helpers
+  function escapeHtml(str) {
+    if (!str && str !== 0) return '';
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function escapeAttr(str) {
+    return escapeHtml(str);
   }
 
   init();
@@ -1226,12 +1531,9 @@ function renderLeafDocsHTML(leaves, options = {}) {
 
     <div class="controls-container">
       <div class="filters-row">
-
         <div class="left-column">
-
           <div class="filter-group method-filters-container">
             <div class="filter-label">Search</div>
-
             <div class="search-box">
               <span class="search-icon">\u{1F50D}</span>
               <input type="text" id="searchInput" class="search-input" placeholder="Filter endpoints...">