@michaelmishin/speclens 0.1.2 → 0.3.0

package/dist/speclens.js

@@ -17995,8 +17995,8 @@ const objectToNumericMapAsync = async (object) => {
 };
 const wait = (ms) => new Promise((resolve2) => setTimeout(resolve2, ms));
 const SPACE_OR_PUNCTUATION = /[\n\r\p{Z}\p{P}]+/u;
-function buildSearchIndex(operations) {
-  const miniSearch = new MiniSearch({
+function buildSearchIndex(operations, guides) {
+  const opSearch = new MiniSearch({
     fields: ["operationId", "summary", "description", "path", "method", "tags"],
     storeFields: ["operationId", "summary", "path", "method", "tags"],
     searchOptions: {
@@ -18019,11 +18019,36 @@ function buildSearchIndex(operations) {
     method: op.method,
     tags: op.tags.join(" ")
   }));
-  miniSearch.addAll(documents);
+  opSearch.addAll(documents);
+  let guideSearch = null;
+  if (guides == null ? void 0 : guides.length) {
+    guideSearch = new MiniSearch({
+      fields: ["title", "category", "content"],
+      storeFields: ["slug", "title", "category"],
+      searchOptions: {
+        prefix: true,
+        fuzzy: 0.2,
+        boost: {
+          title: 3,
+          category: 1.5,
+          content: 1
+        }
+      }
+    });
+    const guideDocs = guides.map((g2) => ({
+      id: `guide-${g2.slug}`,
+      slug: g2.slug,
+      title: g2.title,
+      category: g2.category || "General",
+      content: g2.content || ""
+    }));
+    guideSearch.addAll(guideDocs);
+  }
   return {
     search(query) {
       if (!query.trim()) return [];
-      return miniSearch.search(query).map((result) => ({
+      const opResults = opSearch.search(query).map((result) => ({
+        type: "operation",
         operationId: result.operationId,
         path: result.path,
         method: result.method,
@@ -18031,10 +18056,20 @@ function buildSearchIndex(operations) {
         tags: result.tags.split(" ").filter(Boolean),
         score: result.score
       }));
+      const guideResults = guideSearch ? guideSearch.search(query).map((result) => ({
+        type: "guide",
+        slug: result.slug,
+        title: result.title,
+        category: result.category,
+        score: result.score
+      })) : [];
+      return [...opResults, ...guideResults].sort((a2, b2) => b2.score - a2.score);
     },
     autoSuggest(query) {
       if (!query.trim()) return [];
-      return miniSearch.autoSuggest(query).map((s2) => s2.suggestion);
+      const opSuggestions = opSearch.autoSuggest(query).map((s2) => s2.suggestion);
+      const guideSuggestions = guideSearch ? guideSearch.autoSuggest(query).map((s2) => s2.suggestion) : [];
+      return [.../* @__PURE__ */ new Set([...opSuggestions, ...guideSuggestions])];
     }
   };
 }
@@ -18052,9 +18087,14 @@ class Router {
   handleCurrentRoute() {
     const hash = window.location.hash;
     if (!hash) return;
-    const match = hash.match(/^#\/operation\/(.+)$/);
-    if (match) {
-      this._callback(decodeURIComponent(match[1]));
+    const opMatch = hash.match(/^#\/operation\/(.+)$/);
+    if (opMatch) {
+      this._callback({ type: "operation", id: decodeURIComponent(opMatch[1]) });
+      return;
+    }
+    const guideMatch = hash.match(/^#\/guide\/(.+)$/);
+    if (guideMatch) {
+      this._callback({ type: "guide", slug: decodeURIComponent(guideMatch[1]) });
     }
   }
   navigateTo(operationId) {
@@ -18062,66 +18102,22 @@ class Router {
     if (window.location.hash !== hash) {
       window.location.hash = hash;
     } else {
-      this._callback(operationId);
+      this._callback({ type: "operation", id: operationId });
     }
   }
-  static buildHash(operationId) {
-    return `#/operation/${encodeURIComponent(operationId)}`;
-  }
-}
-const STORAGE_KEY = "speclens-theme";
-class ThemeManager {
-  constructor(host) {
-    this._preference = "auto";
-    this._mediaQuery = null;
-    this._mediaListener = () => this._apply();
-    this.resolved = "light";
-    this._host = host;
-  }
-  init(preference) {
-    const stored = this._readStorage();
-    this._preference = stored ?? preference;
-    this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    this._mediaQuery.addEventListener("change", this._mediaListener);
-    this._apply();
-  }
-  destroy() {
-    var _a2;
-    (_a2 = this._mediaQuery) == null ? void 0 : _a2.removeEventListener("change", this._mediaListener);
-  }
-  setTheme(preference) {
-    this._preference = preference;
-    this._writeStorage(preference);
-    this._apply();
-  }
-  toggle() {
-    const next2 = this.resolved === "light" ? "dark" : "light";
-    this.setTheme(next2);
-    return next2;
-  }
-  _apply() {
-    var _a2;
-    if (this._preference === "auto") {
-      this.resolved = ((_a2 = this._mediaQuery) == null ? void 0 : _a2.matches) ? "dark" : "light";
+  navigateToGuide(slug) {
+    const hash = `#/guide/${encodeURIComponent(slug)}`;
+    if (window.location.hash !== hash) {
+      window.location.hash = hash;
     } else {
-      this.resolved = this._preference;
+      this._callback({ type: "guide", slug });
     }
-    this._host.setAttribute("data-theme", this.resolved);
-    this._host.requestUpdate();
   }
-  _readStorage() {
-    try {
-      const val = localStorage.getItem(STORAGE_KEY);
-      if (val === "light" || val === "dark" || val === "auto") return val;
-    } catch {
-    }
-    return null;
+  static buildHash(operationId) {
+    return `#/operation/${encodeURIComponent(operationId)}`;
   }
-  _writeStorage(value) {
-    try {
-      localStorage.setItem(STORAGE_KEY, value);
-    } catch {
-    }
+  static buildGuideHash(slug) {
+    return `#/guide/${encodeURIComponent(slug)}`;
   }
 }
 function _getDefaults() {
@@ -20265,14 +20261,224 @@ marked.walkTokens;
 marked.parseInline;
 _Parser.parse;
 _Lexer.lex;
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+async function loadGuides(inlineGuides, guidesUrl) {
+  let allGuides = [];
+  if (guidesUrl) {
+    const res = await fetch(guidesUrl);
+    if (!res.ok) throw new Error(`Failed to load guides manifest: ${res.status}`);
+    const manifest = await res.json();
+    allGuides = manifest;
+  }
+  if (inlineGuides == null ? void 0 : inlineGuides.length) {
+    const slugSet = /* @__PURE__ */ new Map();
+    for (const g2 of allGuides) slugSet.set(g2.slug, g2);
+    for (const g2 of inlineGuides) slugSet.set(g2.slug, g2);
+    allGuides = Array.from(slugSet.values());
+  }
+  if (!allGuides.length) {
+    return { categories: [], loaded: /* @__PURE__ */ new Map() };
+  }
+  const loaded = /* @__PURE__ */ new Map();
+  await Promise.all(
+    allGuides.map(async (guide) => {
+      let rawMarkdown = guide.content ?? "";
+      if (!rawMarkdown && guide.url) {
+        const res = await fetch(guide.url);
+        if (res.ok) {
+          rawMarkdown = await res.text();
+        }
+      }
+      const htmlContent = rawMarkdown ? sanitizeHtml(await marked.parse(rawMarkdown)) : "";
+      loaded.set(guide.slug, { ...guide, htmlContent });
+    })
+  );
+  const categoryMap = /* @__PURE__ */ new Map();
+  for (const guide of allGuides) {
+    const cat = guide.category || "General";
+    if (!categoryMap.has(cat)) categoryMap.set(cat, []);
+    categoryMap.get(cat).push(guide);
+  }
+  const categories = [];
+  for (const [name, guides] of categoryMap) {
+    guides.sort((a2, b2) => (a2.order ?? Infinity) - (b2.order ?? Infinity));
+    categories.push({ name, guides });
+  }
+  return { categories, loaded };
+}
+function sanitizeHtml(html2) {
+  return html2.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").replace(/<iframe\b[^>]*>.*?<\/iframe>/gi, "").replace(/<object\b[^>]*>.*?<\/object>/gi, "").replace(/<embed\b[^>]*>/gi, "").replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"').replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
+}
+const STORAGE_KEY = "speclens-theme";
+class ThemeManager {
+  constructor(host) {
+    this._preference = "auto";
+    this._mediaQuery = null;
+    this._mediaListener = () => this._apply();
+    this.resolved = "light";
+    this._host = host;
+  }
+  init(preference) {
+    const stored = this._readStorage();
+    this._preference = stored ?? preference;
+    this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this._mediaQuery.addEventListener("change", this._mediaListener);
+    this._apply();
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this._mediaQuery) == null ? void 0 : _a2.removeEventListener("change", this._mediaListener);
+  }
+  setTheme(preference) {
+    this._preference = preference;
+    this._writeStorage(preference);
+    this._apply();
+  }
+  toggle() {
+    const next2 = this.resolved === "light" ? "dark" : "light";
+    this.setTheme(next2);
+    return next2;
+  }
+  _apply() {
+    var _a2;
+    if (this._preference === "auto") {
+      this.resolved = ((_a2 = this._mediaQuery) == null ? void 0 : _a2.matches) ? "dark" : "light";
+    } else {
+      this.resolved = this._preference;
+    }
+    this._host.setAttribute("data-theme", this.resolved);
+    this._host.requestUpdate();
+  }
+  _readStorage() {
+    try {
+      const val = localStorage.getItem(STORAGE_KEY);
+      if (val === "light" || val === "dark" || val === "auto") return val;
+    } catch {
+    }
+    return null;
+  }
+  _writeStorage(value) {
+    try {
+      localStorage.setItem(STORAGE_KEY, value);
+    } catch {
+    }
+  }
+}
+const MAX_PROMPT_LENGTH = 6e3;
+function generateAiPrompt(op) {
+  const lines = [];
+  lines.push(`I'm working with the following REST API endpoint and need help understanding how to use it correctly.
+`);
+  lines.push(`## Endpoint`);
+  lines.push(`**${op.method.toUpperCase()} ${op.path}**`);
+  if (op.summary) lines.push(`
+${op.summary}`);
+  if (op.description) lines.push(`
+${op.description}`);
+  if (op.parameters.length > 0) {
+    lines.push(`
+## Parameters`);
+    for (const p2 of op.parameters) {
+      const flags = [];
+      if (p2.required) flags.push("required");
+      if (p2.deprecated) flags.push("deprecated");
+      const type2 = p2.schema ? p2.schema.type ?? "any" : "any";
+      const enumVals = p2.schema ? p2.schema.enum : void 0;
+      let line = `- **${p2.name}** (${p2.in}, ${type2}${flags.length ? ", " + flags.join(", ") : ""})`;
+      if (p2.description) line += `: ${p2.description}`;
+      if (enumVals == null ? void 0 : enumVals.length) line += ` — Allowed values: ${enumVals.join(", ")}`;
+      if (p2.example !== void 0) line += ` — Example: \`${JSON.stringify(p2.example)}\``;
+      lines.push(line);
+    }
+  }
+  if (op.requestBody) {
+    lines.push(`
+## Request Body${op.requestBody.required ? " (required)" : ""}`);
+    if (op.requestBody.description) lines.push(op.requestBody.description);
+    for (const content of op.requestBody.content) {
+      lines.push(`
+Content-Type: \`${content.mediaType}\``);
+      if (content.schema) {
+        const schemaStr = JSON.stringify(content.schema, null, 2);
+        if (schemaStr.length < 2e3) {
+          lines.push("```json");
+          lines.push(schemaStr);
+          lines.push("```");
+        } else {
+          lines.push("Schema: (large schema, key properties shown)");
+          const props = content.schema.properties;
+          if (props) {
+            for (const [key, val] of Object.entries(props)) {
+              const t2 = (val == null ? void 0 : val.type) ?? "object";
+              lines.push(`- ${key}: ${t2}`);
+            }
+          }
+        }
+      }
+      if (content.example !== void 0) {
+        lines.push(`
+Example:
+\`\`\`json
+${JSON.stringify(content.example, null, 2)}
+\`\`\``);
+      }
+    }
+  }
+  if (op.responses.length > 0) {
+    lines.push(`
+## Responses`);
+    for (const r2 of op.responses) {
+      lines.push(`
+### ${r2.statusCode}${r2.description ? " — " + r2.description : ""}`);
+      for (const content of r2.content) {
+        if (content.schema) {
+          const schemaStr = JSON.stringify(content.schema, null, 2);
+          if (schemaStr.length < 1500) {
+            lines.push(`\`${content.mediaType}\`
+\`\`\`json
+${schemaStr}
+\`\`\``);
+          } else {
+            lines.push(`\`${content.mediaType}\` — (large schema)`);
+          }
+        }
+      }
+    }
+  }
+  if (op.security.length > 0) {
+    lines.push(`
+## Authentication`);
+    for (const req of op.security) {
+      const schemes2 = Object.entries(req).map(
+        ([name, scopes]) => scopes.length > 0 ? `${name} (scopes: ${scopes.join(", ")})` : name
+      );
+      lines.push(`- ${schemes2.join(" + ")}`);
+    }
+  }
+  lines.push(`
+Please help me understand this endpoint, write an example request, and explain the expected response.`);
+  let prompt = lines.join("\n");
+  if (prompt.length > MAX_PROMPT_LENGTH) {
+    prompt = prompt.slice(0, MAX_PROMPT_LENGTH - 3) + "...";
+  }
+  return prompt;
+}
+function buildAiUrl(prompt, target) {
+  const encoded = encodeURIComponent(prompt);
+  switch (target) {
+    case "chatgpt":
+      return `https://chatgpt.com/?q=${encoded}`;
+    case "claude":
+      return `https://claude.ai/new?q=${encoded}`;
+  }
+}
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let SlHeader = class extends i$1 {
@@ -20280,6 +20486,8 @@ let SlHeader = class extends i$1 {
     super(...arguments);
     this.spec = null;
     this.authOpen = false;
+    this.activeTab = "api";
+    this.showTabs = false;
   }
   render() {
     if (!this.spec) return b``;
@@ -20292,12 +20500,50 @@ let SlHeader = class extends i$1 {
         </button>
 
         <div class="title-area">
-          <span class="title">${this.spec.title}</span>
-          <span class="version">${this.spec.version}</span>
+          <slot name="logo">
+            <span class="title">${this.spec.title}</span>
+            <span class="version">${this.spec.version}</span>
+          </slot>
         </div>
 
+        ${this.showTabs ? b`
+          <nav class="nav-tabs">
+            <button
+              class="nav-tab ${this.activeTab === "api" ? "active" : ""}"
+              @click=${() => this._switchTab("api")}
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M2 4h12M2 8h8M2 12h10"/>
+              </svg>
+              API Reference
+            </button>
+            <button
+              class="nav-tab ${this.activeTab === "guides" ? "active" : ""}"
+              @click=${() => this._switchTab("guides")}
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M2 3h10a2 2 0 012 2v8a1 1 0 01-1 1H5a2 2 0 01-2-2V3z"/>
+                <path d="M2 3a2 2 0 012-2h6l4 4"/>
+                <path d="M5 9h6M5 12h4"/>
+              </svg>
+              Guides
+            </button>
+          </nav>
+        ` : null}
+
         <div class="spacer"></div>
 
+        <div class="search-wrapper">
+          <button class="search-trigger" @click=${() => this.dispatchEvent(new CustomEvent("open-search"))}>
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="7" cy="7" r="4.5"/>
+              <path d="M10.5 10.5L14 14" stroke-linecap="round"/>
+            </svg>
+            <span class="search-placeholder">Search…</span>
+            <span class="search-shortcut">⌘K</span>
+          </button>
+        </div>
+
         <div class="actions">
           ${this.spec.securitySchemes.length > 0 ? b`
             <button
@@ -20312,6 +20558,8 @@ let SlHeader = class extends i$1 {
             </button>
           ` : null}
 
+          <slot name="header-actions"></slot>
+
           <button class="action-btn" @click=${() => this.dispatchEvent(new CustomEvent("toggle-theme"))} title="Toggle theme">
             <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
               <circle cx="9" cy="9" r="4"/>
@@ -20322,6 +20570,10 @@ let SlHeader = class extends i$1 {
       </div>
     `;
   }
+  _switchTab(tab) {
+    if (tab === this.activeTab) return;
+    this.dispatchEvent(new CustomEvent("tab-change", { detail: tab }));
+  }
 };
 SlHeader.styles = [
   resetStyles,
@@ -20385,8 +20637,115 @@ SlHeader.styles = [
         white-space: nowrap;
       }
 
+      /* ── Nav Tabs ─────────────────────── */
+      .nav-tabs {
+        display: flex;
+        align-items: stretch;
+        align-self: stretch;
+        gap: 2px;
+        margin-left: var(--sl-spacing-lg);
+      }
+
+      .nav-tab {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        padding: 0 var(--sl-spacing-md);
+        font-size: var(--sl-font-size-sm);
+        font-weight: 600;
+        color: var(--sl-color-text-muted);
+        cursor: pointer;
+        border: none;
+        background: none;
+        transition: color var(--sl-transition-fast);
+        white-space: nowrap;
+      }
+
+      .nav-tab:hover {
+        color: var(--sl-color-text);
+      }
+
+      .nav-tab.active {
+        color: var(--sl-color-primary);
+      }
+
+      .nav-tab.active::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: var(--sl-spacing-sm);
+        right: var(--sl-spacing-sm);
+        height: 2px;
+        background: var(--sl-color-primary);
+        border-radius: 2px 2px 0 0;
+      }
+
+      @media (max-width: 768px) {
+        .nav-tabs {
+          margin-left: var(--sl-spacing-sm);
+          gap: 0;
+        }
+        .nav-tab { padding: 0 var(--sl-spacing-sm); font-size: var(--sl-font-size-xs); }
+        .nav-tab svg { display: none; }
+      }
+
       .spacer { flex: 1; }
 
+      /* ── Search ────────────────────────── */
+      .search-wrapper {
+        position: relative;
+      }
+
+      .search-trigger {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 34px;
+        padding: 0 12px;
+        border-radius: var(--sl-radius-md);
+        border: 1px solid var(--sl-color-border);
+        background: var(--sl-color-bg);
+        color: var(--sl-color-text-muted);
+        font-size: var(--sl-font-size-sm);
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        min-width: 200px;
+      }
+
+      .search-trigger:hover {
+        border-color: var(--sl-color-primary);
+        color: var(--sl-color-text-secondary);
+      }
+
+      .search-trigger .search-placeholder {
+        flex: 1;
+        text-align: left;
+      }
+
+      .search-shortcut {
+        font-size: 0.625rem;
+        padding: 1px 5px;
+        border-radius: 3px;
+        background: var(--sl-color-surface-raised);
+        border: 1px solid var(--sl-color-border);
+        color: var(--sl-color-text-muted);
+        font-family: var(--sl-font-mono);
+      }
+
+      @media (max-width: 768px) {
+        .search-trigger {
+          min-width: 36px;
+          width: 36px;
+          padding: 0;
+          justify-content: center;
+        }
+        .search-trigger .search-placeholder,
+        .search-trigger .search-shortcut {
+          display: none;
+        }
+      }
+
       .actions {
         display: flex;
         align-items: center;
@@ -20445,23 +20804,29 @@ SlHeader.styles = [
       }
     `
 ];
-__decorateClass$a([
+__decorateClass$d([
   n2({ type: Object })
 ], SlHeader.prototype, "spec", 2);
-__decorateClass$a([
+__decorateClass$d([
   n2({ type: Boolean })
 ], SlHeader.prototype, "authOpen", 2);
-SlHeader = __decorateClass$a([
+__decorateClass$d([
+  n2()
+], SlHeader.prototype, "activeTab", 2);
+__decorateClass$d([
+  n2({ type: Boolean })
+], SlHeader.prototype, "showTabs", 2);
+SlHeader = __decorateClass$d([
   t$1("sl-header")
 ], SlHeader);
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let SlSidebar = class extends i$1 {
@@ -20471,6 +20836,8 @@ let SlSidebar = class extends i$1 {
     this.activeOperationId = "";
     this.open = false;
     this.searchEngine = null;
+    this.layout = "page";
+    this.securitySchemes = [];
     this._searchQuery = "";
     this._searchResults = [];
   }
@@ -20481,7 +20848,7 @@ let SlSidebar = class extends i$1 {
   _handleSearchInput(e2) {
     this._searchQuery = e2.target.value;
     if (this.searchEngine && this._searchQuery.trim()) {
-      this._searchResults = this.searchEngine.search(this._searchQuery).slice(0, 30);
+      this._searchResults = this.searchEngine.search(this._searchQuery).filter((r2) => r2.type === "operation").slice(0, 30);
     } else {
       this._searchResults = [];
     }
@@ -20559,9 +20926,22 @@ let SlSidebar = class extends i$1 {
             `)}
           `}
         </div>
-      </nav>
-    `;
-  }
+
+        ${this.layout === "embed" && this.securitySchemes.length > 0 ? b`
+          <button
+            class="sidebar-auth-btn"
+            @click=${() => this.dispatchEvent(new CustomEvent("toggle-auth", { bubbles: true, composed: true }))}
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="7" width="10" height="7" rx="1.5"/>
+              <path d="M5.5 7V5a2.5 2.5 0 015 0v2"/>
+            </svg>
+            Authorize
+          </button>
+        ` : null}
+      </nav>
+    `;
+  }
 };
 SlSidebar.styles = [
   resetStyles,
@@ -20804,40 +21184,381 @@ SlSidebar.styles = [
         color: var(--sl-color-text-muted);
         text-align: center;
       }
+
+      /* ── Embed-mode auth button ───────────── */
+      .sidebar-auth-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: var(--sl-spacing-sm) var(--sl-spacing-md) var(--sl-spacing-md);
+        padding: 8px 14px;
+        border-radius: var(--sl-radius-md);
+        border: 1.5px solid var(--sl-color-border);
+        color: var(--sl-color-text-secondary);
+        background: transparent;
+        font-size: var(--sl-font-size-sm);
+        font-weight: 600;
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        flex-shrink: 0;
+        width: calc(100% - var(--sl-spacing-xl));
+      }
+
+      .sidebar-auth-btn:hover {
+        border-color: var(--sl-color-primary);
+        color: var(--sl-color-primary);
+        background: var(--sl-color-sidebar-active);
+      }
     `
 ];
-__decorateClass$9([
+__decorateClass$c([
   n2({ type: Array })
 ], SlSidebar.prototype, "tagGroups", 2);
-__decorateClass$9([
+__decorateClass$c([
   n2({ type: String })
 ], SlSidebar.prototype, "activeOperationId", 2);
-__decorateClass$9([
+__decorateClass$c([
   n2({ type: Boolean, reflect: true })
 ], SlSidebar.prototype, "open", 2);
-__decorateClass$9([
+__decorateClass$c([
   n2({ type: Object })
 ], SlSidebar.prototype, "searchEngine", 2);
-__decorateClass$9([
+__decorateClass$c([
+  n2()
+], SlSidebar.prototype, "layout", 2);
+__decorateClass$c([
+  n2({ type: Array })
+], SlSidebar.prototype, "securitySchemes", 2);
+__decorateClass$c([
   r$1()
 ], SlSidebar.prototype, "_searchQuery", 2);
-__decorateClass$9([
+__decorateClass$c([
   r$1()
 ], SlSidebar.prototype, "_searchResults", 2);
-__decorateClass$9([
+__decorateClass$c([
   e$2(".search-input")
 ], SlSidebar.prototype, "_searchInput", 2);
-SlSidebar = __decorateClass$9([
+SlSidebar = __decorateClass$c([
   t$1("sl-sidebar")
 ], SlSidebar);
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
+  return result;
+};
+let SlSearch = class extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.searchEngine = null;
+    this._query = "";
+    this._results = [];
+    this._highlightIndex = 0;
+  }
+  firstUpdated() {
+    var _a2;
+    (_a2 = this._input) == null ? void 0 : _a2.focus();
+  }
+  _handleInput(e2) {
+    this._query = e2.target.value;
+    this._highlightIndex = 0;
+    if (this.searchEngine && this._query.trim()) {
+      this._results = this.searchEngine.search(this._query).slice(0, 20);
+    } else {
+      this._results = [];
+    }
+  }
+  _handleKeyDown(e2) {
+    switch (e2.key) {
+      case "Escape":
+        this.dispatchEvent(new CustomEvent("close"));
+        break;
+      case "ArrowDown":
+        e2.preventDefault();
+        this._highlightIndex = Math.min(this._highlightIndex + 1, this._results.length - 1);
+        break;
+      case "ArrowUp":
+        e2.preventDefault();
+        this._highlightIndex = Math.max(this._highlightIndex - 1, 0);
+        break;
+      case "Enter":
+        if (this._results[this._highlightIndex]) {
+          this._selectResult(this._results[this._highlightIndex]);
+        }
+        break;
+    }
+  }
+  _selectResult(result) {
+    if (result.type === "operation") {
+      this.dispatchEvent(new CustomEvent("select-operation", { detail: result.operationId }));
+    } else {
+      this.dispatchEvent(new CustomEvent("select-guide", { detail: result.slug }));
+    }
+  }
+  _renderResult(result, i3) {
+    if (result.type === "operation") {
+      return b`
+        <div
+          class="result-item ${i3 === this._highlightIndex ? "highlighted" : ""}"
+          @click=${() => this._selectResult(result)}
+          @mouseenter=${() => this._highlightIndex = i3}
+        >
+          <span class="method-badge method-${result.method}">${result.method}</span>
+          <div class="result-info">
+            <div class="result-path">${result.path}</div>
+            ${result.summary ? b`<div class="result-summary">${result.summary}</div>` : null}
+          </div>
+        </div>
+      `;
+    } else {
+      return b`
+        <div
+          class="result-item ${i3 === this._highlightIndex ? "highlighted" : ""}"
+          @click=${() => this._selectResult(result)}
+          @mouseenter=${() => this._highlightIndex = i3}
+        >
+          <span class="guide-badge">Guide</span>
+          <div class="result-info">
+            <div class="result-path">${result.title}</div>
+            <div class="result-summary">${result.category}</div>
+          </div>
+        </div>
+      `;
+    }
+  }
+  render() {
+    return b`
+      <div class="overlay" @click=${() => this.dispatchEvent(new CustomEvent("close"))}></div>
+      <div class="modal" @keydown=${this._handleKeyDown}>
+        <div class="input-wrapper">
+          <svg class="search-icon" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="7" cy="7" r="4.5"/>
+            <path d="M10.5 10.5L14 14" stroke-linecap="round"/>
+          </svg>
+          <input
+            type="text"
+            placeholder="Search endpoints, guides…"
+            .value=${this._query}
+            @input=${this._handleInput}
+          />
+          <span class="esc-hint">Esc</span>
+        </div>
+
+        <div class="results">
+          ${this._query.trim() === "" ? b`
+            <div class="empty-state">Start typing to search…</div>
+          ` : this._results.length === 0 ? b`
+            <div class="no-results">No results for "${this._query}"</div>
+          ` : this._results.map((result, i3) => this._renderResult(result, i3))}
+        </div>
+      </div>
+    `;
+  }
+};
+SlSearch.styles = [
+  resetStyles,
+  i$4`
+      :host {
+        display: block;
+        position: fixed;
+        inset: 0;
+        z-index: 300;
+      }
+
+      .overlay {
+        position: absolute;
+        inset: 0;
+        background: var(--sl-color-overlay);
+        animation: sl-fade-in 150ms ease;
+      }
+
+      @keyframes sl-fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      .modal {
+        position: absolute;
+        top: 15%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: min(560px, calc(100vw - 2rem));
+        background: var(--sl-color-surface);
+        border-radius: var(--sl-radius-xl);
+        box-shadow: var(--sl-shadow-xl);
+        border: 1px solid var(--sl-color-border);
+        overflow: hidden;
+        animation: sl-slide-up 150ms ease;
+      }
+
+      @keyframes sl-slide-up {
+        from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+        to { opacity: 1; transform: translateX(-50%) translateY(0); }
+      }
+
+      .input-wrapper {
+        display: flex;
+        align-items: center;
+        gap: var(--sl-spacing-sm);
+        padding: var(--sl-spacing-md) var(--sl-spacing-lg);
+        border-bottom: 1px solid var(--sl-color-border);
+      }
+
+      .search-icon {
+        color: var(--sl-color-text-muted);
+        flex-shrink: 0;
+      }
+
+      input {
+        flex: 1;
+        border: none;
+        background: none;
+        color: var(--sl-color-text);
+        font-size: var(--sl-font-size-md);
+        outline: none;
+      }
+
+      input::placeholder {
+        color: var(--sl-color-text-muted);
+      }
+
+      .esc-hint {
+        font-size: var(--sl-font-size-xs);
+        padding: 2px 6px;
+        border-radius: 3px;
+        background: var(--sl-color-surface-raised);
+        border: 1px solid var(--sl-color-border);
+        color: var(--sl-color-text-muted);
+        font-family: var(--sl-font-mono);
+      }
+
+      .results {
+        max-height: 400px;
+        overflow-y: auto;
+        padding: var(--sl-spacing-sm) 0;
+      }
+
+      .result-item {
+        display: flex;
+        align-items: center;
+        gap: var(--sl-spacing-sm);
+        padding: var(--sl-spacing-sm) var(--sl-spacing-lg);
+        cursor: pointer;
+        transition: background var(--sl-transition-fast);
+      }
+
+      .result-item:hover,
+      .result-item.highlighted {
+        background: var(--sl-color-surface-raised);
+      }
+
+      .method-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        min-width: 48px;
+        padding: 2px 0;
+        border-radius: var(--sl-radius-sm);
+        font-size: 0.625rem;
+        font-weight: 700;
+        font-family: var(--sl-font-mono);
+        text-transform: uppercase;
+      }
+
+      .method-get { background: var(--sl-color-get-bg); color: var(--sl-color-get); }
+      .method-post { background: var(--sl-color-post-bg); color: var(--sl-color-post); }
+      .method-put { background: var(--sl-color-put-bg); color: var(--sl-color-put); }
+      .method-delete { background: var(--sl-color-delete-bg); color: var(--sl-color-delete); }
+      .method-patch { background: var(--sl-color-patch-bg); color: var(--sl-color-patch); }
+      .method-options,
+      .method-head,
+      .method-trace { background: var(--sl-color-options-bg); color: var(--sl-color-options); }
+
+      .result-info {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .result-path {
+        font-family: var(--sl-font-mono);
+        font-size: var(--sl-font-size-sm);
+        color: var(--sl-color-text);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .result-summary {
+        font-size: var(--sl-font-size-xs);
+        color: var(--sl-color-text-muted);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .no-results {
+        text-align: center;
+        padding: var(--sl-spacing-xl);
+        color: var(--sl-color-text-muted);
+        font-size: var(--sl-font-size-sm);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: var(--sl-spacing-xl);
+        color: var(--sl-color-text-muted);
+        font-size: var(--sl-font-size-sm);
+      }
+
+      /* ── Guide result ───────────────────── */
+      .guide-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        min-width: 48px;
+        padding: 2px 0;
+        border-radius: var(--sl-radius-sm);
+        font-size: 0.625rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        background: var(--sl-color-bg-subtle);
+        color: var(--sl-color-text-muted);
+        border: 1px solid var(--sl-color-border);
+      }
+    `
+];
+__decorateClass$b([
+  n2({ type: Object })
+], SlSearch.prototype, "searchEngine", 2);
+__decorateClass$b([
+  r$1()
+], SlSearch.prototype, "_query", 2);
+__decorateClass$b([
+  r$1()
+], SlSearch.prototype, "_results", 2);
+__decorateClass$b([
+  r$1()
+], SlSearch.prototype, "_highlightIndex", 2);
+__decorateClass$b([
+  e$2("input")
+], SlSearch.prototype, "_input", 2);
+SlSearch = __decorateClass$b([
+  t$1("sl-search")
+], SlSearch);
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let SlParameters = class extends i$1 {
@@ -20877,7 +21598,7 @@ let SlParameters = class extends i$1 {
               </div>
               <div class="param-type">${this._getType(param.schema)}</div>
               <div>
-                <div class="param-desc">${param.description}</div>
+                <div class="param-desc" .innerHTML=${marked.parse(param.description || "")}></div>
                 ${param.example !== void 0 ? b`
                   <div class="param-example">Example: <code>${JSON.stringify(param.example)}</code></div>
                 ` : null}
@@ -20966,17 +21687,122 @@ SlParameters.styles = [
         line-height: 1.5;
       }
 
-      .param-example {
-        font-size: var(--sl-font-size-xs);
-        color: var(--sl-color-text-muted);
-        margin-top: 2px;
+      .param-desc p {
+        margin: 0 0 var(--sl-spacing-xs) 0;
       }
 
-      .param-example code {
+      .param-desc p:last-child {
+        margin-bottom: 0;
+      }
+
+      .param-desc code {
         background: var(--sl-color-code-bg);
-        padding: 1px 4px;
+        padding: 1px 5px;
         border-radius: var(--sl-radius-sm);
-        font-size: var(--sl-font-size-xs);
+        font-size: 0.85em;
+        border: 1px solid var(--sl-color-border);
+      }
+
+      .param-desc pre {
+        background: #0d1117;
+        border: 1px solid #30363d;
+        border-radius: var(--sl-radius-md);
+        padding: var(--sl-spacing-sm) var(--sl-spacing-md);
+        overflow-x: auto;
+        margin: var(--sl-spacing-xs) 0;
+      }
+
+      .param-desc pre code {
+        background: none;
+        border: none;
+        padding: 0;
+        color: #e6edf3;
+        font-size: var(--sl-font-size-xs);
+      }
+
+      .param-desc table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid var(--sl-color-border);
+        border-radius: var(--sl-radius-md);
+        overflow: hidden;
+        font-size: var(--sl-font-size-xs);
+        margin: var(--sl-spacing-xs) 0;
+      }
+
+      .param-desc th,
+      .param-desc td {
+        padding: var(--sl-spacing-xs) var(--sl-spacing-sm);
+        text-align: left;
+        border-bottom: 1px solid var(--sl-color-border);
+      }
+
+      .param-desc th {
+        background: var(--sl-color-bg-subtle);
+        font-weight: 600;
+        border-bottom-width: 2px;
+      }
+
+      .param-desc tr:last-child td {
+        border-bottom: none;
+      }
+
+      .param-desc blockquote {
+        border-left: 3px solid var(--sl-color-primary);
+        background: rgba(99,102,241,0.05);
+        padding: var(--sl-spacing-xs) var(--sl-spacing-sm);
+        margin: var(--sl-spacing-xs) 0;
+        border-radius: 0 var(--sl-radius-sm) var(--sl-radius-sm) 0;
+      }
+
+      .param-desc ul,
+      .param-desc ol {
+        padding-left: var(--sl-spacing-lg);
+        margin: var(--sl-spacing-xs) 0;
+      }
+
+      .param-desc li {
+        margin-bottom: 2px;
+      }
+
+      .param-desc a {
+        color: var(--sl-color-primary);
+        text-decoration: none;
+      }
+
+      .param-desc a:hover {
+        text-decoration: underline;
+      }
+
+      .param-desc h1,
+      .param-desc h2,
+      .param-desc h3,
+      .param-desc h4,
+      .param-desc h5,
+      .param-desc h6 {
+        margin: var(--sl-spacing-xs) 0 2px 0;
+        font-weight: 600;
+        line-height: 1.3;
+        color: var(--sl-color-text);
+      }
+
+      .param-desc h3 { font-size: 0.95em; }
+      .param-desc h4 { font-size: 0.9em; }
+      .param-desc h5,
+      .param-desc h6 { font-size: 0.85em; }
+
+      .param-example {
+        font-size: var(--sl-font-size-xs);
+        color: var(--sl-color-text-muted);
+        margin-top: 2px;
+      }
+
+      .param-example code {
+        background: var(--sl-color-code-bg);
+        padding: 1px 4px;
+        border-radius: var(--sl-radius-sm);
+        font-size: var(--sl-font-size-xs);
       }
 
       .param-enum {
@@ -21003,10 +21829,10 @@ SlParameters.styles = [
       }
     `
 ];
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: Array })
 ], SlParameters.prototype, "parameters", 2);
-SlParameters = __decorateClass$8([
+SlParameters = __decorateClass$a([
   t$1("sl-parameters")
 ], SlParameters);
 const SKIP_SYMBOL = Symbol("skip");
@@ -23199,14 +24025,14 @@ _registerSampler("integer", sampleNumber);
 _registerSampler("number", sampleNumber);
 _registerSampler("object", sampleObject);
 _registerSampler("string", sampleString);
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let SlRequestBody = class extends i$1 {
@@ -23361,13 +24187,13 @@ SlRequestBody.styles = [
       }
     `
 ];
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Object })
 ], SlRequestBody.prototype, "requestBody", 2);
-__decorateClass$7([
+__decorateClass$9([
   r$1()
 ], SlRequestBody.prototype, "_activeMediaType", 2);
-SlRequestBody = __decorateClass$7([
+SlRequestBody = __decorateClass$9([
   t$1("sl-request-body")
 ], SlRequestBody);
 /**
@@ -23413,14 +24239,14 @@ class e extends i2 {
 }
 e.directiveName = "unsafeHTML", e.resultType = 1;
 const o = e$1(e);
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let SlResponses = class extends i$1 {
@@ -23676,13 +24502,13 @@ SlResponses.styles = [
       .hl-kw   { color: #569cd6; }
     `
 ];
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Array })
 ], SlResponses.prototype, "responses", 2);
-__decorateClass$6([
+__decorateClass$8([
   r$1()
 ], SlResponses.prototype, "_activeTab", 2);
-SlResponses = __decorateClass$6([
+SlResponses = __decorateClass$8([
   t$1("sl-responses")
 ], SlResponses);
 const globalObject = (function() {
@@ -27259,14 +28085,14 @@ class HTTPSnippet {
     return results.length === 1 ? results[0] : results;
   }
 }
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 const LANGUAGES = [
@@ -28068,44 +28894,44 @@ SlCodeSamples.styles = [
       .hl-key  { color: #9cdcfe; }
     `
 ];
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Object })
 ], SlCodeSamples.prototype, "operation", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Array })
 ], SlCodeSamples.prototype, "servers", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Object })
 ], SlCodeSamples.prototype, "authState", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Array })
 ], SlCodeSamples.prototype, "securitySchemes", 2);
-__decorateClass$5([
+__decorateClass$7([
   r$1()
 ], SlCodeSamples.prototype, "_activeTab", 2);
-__decorateClass$5([
+__decorateClass$7([
   r$1()
 ], SlCodeSamples.prototype, "_snippets", 2);
-__decorateClass$5([
+__decorateClass$7([
   r$1()
 ], SlCodeSamples.prototype, "_copied", 2);
-__decorateClass$5([
+__decorateClass$7([
   r$1()
 ], SlCodeSamples.prototype, "_overflowStart", 2);
-__decorateClass$5([
+__decorateClass$7([
   r$1()
 ], SlCodeSamples.prototype, "_moreOpen", 2);
-SlCodeSamples = __decorateClass$5([
+SlCodeSamples = __decorateClass$7([
   t$1("sl-code-samples")
 ], SlCodeSamples);
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let SlSchema = class extends i$1 {
@@ -28415,26 +29241,26 @@ SlSchema.styles = [
       }
     `
 ];
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Object })
 ], SlSchema.prototype, "schema", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], SlSchema.prototype, "depth", 2);
-__decorateClass$4([
+__decorateClass$6([
   r$1()
 ], SlSchema.prototype, "_expanded", 2);
-SlSchema = __decorateClass$4([
+SlSchema = __decorateClass$6([
   t$1("sl-schema")
 ], SlSchema);
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let SlOperation = class extends i$1 {
@@ -28446,8 +29272,12 @@ let SlOperation = class extends i$1 {
     this.proxyUrl = "";
     this.hideTryIt = false;
     this.hideCodeSamples = false;
+    this.hideAskAi = false;
     this.activeOperationId = "";
     this._expanded = false;
+    this._routeCopied = false;
+    this._aiMenuOpen = false;
+    this._aiMenuRect = null;
   }
   willUpdate(changed) {
     var _a2;
@@ -28473,6 +29303,40 @@ let SlOperation = class extends i$1 {
       composed: true
     }));
   }
+  _copyRoute(e2) {
+    e2.stopPropagation();
+    navigator.clipboard.writeText(this.operation.path);
+    this._routeCopied = true;
+    setTimeout(() => {
+      this._routeCopied = false;
+    }, 1500);
+  }
+  _toggleAiMenu(e2) {
+    e2.stopPropagation();
+    if (!this._aiMenuOpen) {
+      this._aiMenuRect = e2.currentTarget.getBoundingClientRect();
+    }
+    this._aiMenuOpen = !this._aiMenuOpen;
+    if (this._aiMenuOpen) {
+      const close = (ev) => {
+        const path2 = ev.composedPath();
+        const wrapper = this.renderRoot.querySelector(".ask-ai-wrapper");
+        const menu = this.renderRoot.querySelector(".ai-menu");
+        if (!path2.includes(wrapper) && !path2.includes(menu)) {
+          this._aiMenuOpen = false;
+          document.removeEventListener("click", close, true);
+        }
+      };
+      requestAnimationFrame(() => document.addEventListener("click", close, true));
+    }
+  }
+  _openAi(target, e2) {
+    e2.stopPropagation();
+    this._aiMenuOpen = false;
+    const prompt = generateAiPrompt(this.operation);
+    const url2 = buildAiUrl(prompt, target);
+    window.open(url2, "_blank", "noopener,noreferrer");
+  }
   render() {
     const op = this.operation;
     if (!op) return b``;
@@ -28481,8 +29345,30 @@ let SlOperation = class extends i$1 {
         <div class="op-header" @click=${this._toggle}>
           <span class="method-badge method-${op.method}">${op.method}</span>
           <span class="op-path">${op.path}</span>
+          <button class="copy-route-btn" style=${this._routeCopied ? "opacity:1" : ""} @click=${this._copyRoute} title="Copy route path">
+            ${this._routeCopied ? b`
+              <svg class="copied-check" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 8.5l3.5 3.5 6.5-7" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            ` : b`
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <rect x="5" y="5" width="8" height="8" rx="1"/>
+                <path d="M3 11V3h8"/>
+              </svg>
+            `}
+          </button>
           <span class="op-summary">${op.summary}</span>
           ${op.deprecated ? b`<span class="badge-deprecated">Deprecated</span>` : null}
+          ${!this.hideAskAi ? b`
+            <div class="ask-ai-wrapper" style=${this._aiMenuOpen ? "opacity:1" : ""}>
+              <button class="ask-ai-btn" @click=${this._toggleAiMenu}>
+                <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M8 1l1.5 3.5L13 6l-3.5 1.5L8 11 6.5 7.5 3 6l3.5-1.5L8 1zM3 11l.75 1.75L5.5 13.5l-1.75.75L3 16l-.75-1.75L.5 13.5l1.75-.75L3 11zM12.5 10l.75 1.75 1.75.75-1.75.75-.75 1.75-.75-1.75L10 12.5l1.75-.75.75-1.75z"/>
+                </svg>
+                Ask AI
+              </button>
+            </div>
+          ` : null}
           ${!this.hideTryIt ? b`
             <button class="try-it-btn" @click=${this._openTryIt}>
               <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
@@ -28561,6 +29447,22 @@ let SlOperation = class extends i$1 {
           </div>
         ` : null}
       </div>
+      ${this._aiMenuOpen && this._aiMenuRect ? b`
+        <div class="ai-menu" style="top:${this._aiMenuRect.bottom + 4}px;right:${window.innerWidth - this._aiMenuRect.right}px">
+          <button class="ai-menu-item" @click=${(e2) => this._openAi("chatgpt", e2)}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.612-1.5z"/>
+            </svg>
+            ChatGPT
+          </button>
+          <button class="ai-menu-item" @click=${(e2) => this._openAi("claude", e2)}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M13.827 3.52h-3.654L5 20.48h3.213l1.436-4.115h4.847l1.367 4.115H19L13.827 3.52zm-3.192 10.6 1.85-5.3 1.744 5.3h-3.594z"/>
+            </svg>
+            Claude
+          </button>
+        </div>
+      ` : null}
     `;
   }
 };
@@ -28797,6 +29699,103 @@ SlOperation.styles = [
         color: var(--sl-color-text);
       }
 
+      /* ── Copy Route Button ───────────────── */
+      .copy-route-btn {
+        padding: 4px 6px;
+        border-radius: var(--sl-radius-sm);
+        color: var(--sl-color-text-muted);
+        opacity: 0;
+        transition: opacity var(--sl-transition-fast);
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .op-header:hover .copy-route-btn {
+        opacity: 1;
+      }
+
+      .copy-route-btn:hover {
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text);
+      }
+
+      .copy-route-btn .copied-check {
+        color: var(--sl-color-success, #22c55e);
+      }
+
+      /* ── Ask AI Button ───────────────────── */
+      .ask-ai-wrapper {
+        flex-shrink: 0;
+        opacity: 0;
+        transition: opacity var(--sl-transition-fast);
+      }
+
+      .op-header:hover .ask-ai-wrapper {
+        opacity: 1;
+      }
+
+      .ask-ai-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 12px;
+        border-radius: var(--sl-radius-md);
+        font-size: var(--sl-font-size-xs);
+        font-weight: 600;
+        color: var(--sl-color-text-muted);
+        border: 1px solid var(--sl-color-border);
+        background: transparent;
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        white-space: nowrap;
+      }
+
+      .ask-ai-btn:hover {
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text);
+        border-color: var(--sl-color-text-muted);
+      }
+
+      .ai-menu {
+        position: fixed;
+        z-index: 9999;
+        min-width: 150px;
+        background: var(--sl-color-surface);
+        border: 1px solid var(--sl-color-border);
+        border-radius: var(--sl-radius-md);
+        box-shadow: var(--sl-shadow-md);
+        padding: 4px 0;
+        animation: sl-menu-in 120ms ease;
+      }
+
+      @keyframes sl-menu-in {
+        from { opacity: 0; transform: translateY(-4px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+
+      .ai-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 8px 14px;
+        font-size: var(--sl-font-size-sm);
+        color: var(--sl-color-text);
+        cursor: pointer;
+        transition: background var(--sl-transition-fast);
+        white-space: nowrap;
+        text-align: left;
+      }
+
+      .ai-menu-item:hover {
+        background: var(--sl-color-bg-subtle);
+      }
+
+      .ai-menu-item svg {
+        flex-shrink: 0;
+      }
+
       @media (max-width: 900px) {
         .op-body {
           grid-template-columns: 1fr;
@@ -28811,44 +29810,56 @@ SlOperation.styles = [
       }
     `
 ];
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Object })
 ], SlOperation.prototype, "operation", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Array })
 ], SlOperation.prototype, "servers", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Array })
 ], SlOperation.prototype, "securitySchemes", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Object })
 ], SlOperation.prototype, "authState", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: String })
 ], SlOperation.prototype, "proxyUrl", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Boolean, attribute: "hide-try-it" })
 ], SlOperation.prototype, "hideTryIt", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Boolean, attribute: "hide-code-samples" })
 ], SlOperation.prototype, "hideCodeSamples", 2);
-__decorateClass$3([
+__decorateClass$5([
+  n2({ type: Boolean, attribute: "hide-ask-ai" })
+], SlOperation.prototype, "hideAskAi", 2);
+__decorateClass$5([
   n2({ type: String })
 ], SlOperation.prototype, "activeOperationId", 2);
-__decorateClass$3([
+__decorateClass$5([
   r$1()
 ], SlOperation.prototype, "_expanded", 2);
-SlOperation = __decorateClass$3([
+__decorateClass$5([
+  r$1()
+], SlOperation.prototype, "_routeCopied", 2);
+__decorateClass$5([
+  r$1()
+], SlOperation.prototype, "_aiMenuOpen", 2);
+__decorateClass$5([
+  r$1()
+], SlOperation.prototype, "_aiMenuRect", 2);
+SlOperation = __decorateClass$5([
   t$1("sl-operation")
 ], SlOperation);
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let SlTryIt = class extends i$1 {
@@ -29481,59 +30492,59 @@ SlTryIt.styles = [
       }
     `
 ];
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Object })
 ], SlTryIt.prototype, "operation", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Array })
 ], SlTryIt.prototype, "servers", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Array })
 ], SlTryIt.prototype, "securitySchemes", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Object })
 ], SlTryIt.prototype, "authState", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: String })
 ], SlTryIt.prototype, "proxyUrl", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_paramValues", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_bodyValue", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_formFields", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_selectedServer", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_response", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_loading", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_error", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_showResponseHeaders", 2);
-__decorateClass$2([
+__decorateClass$4([
   r$1()
 ], SlTryIt.prototype, "_initialized", 2);
-SlTryIt = __decorateClass$2([
+SlTryIt = __decorateClass$4([
   t$1("sl-try-it")
 ], SlTryIt);
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 let SlAuth = class extends i$1 {
@@ -29984,115 +30995,608 @@ SlAuth.styles = [
         color: var(--sl-color-text);
       }
 
-      .unsupported-card {
-        padding: var(--sl-spacing-md) var(--sl-spacing-lg);
-        border: 1px dashed var(--sl-color-border);
-        border-radius: var(--sl-radius-lg);
-        background: transparent;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--sl-spacing-md);
+      .unsupported-card {
+        padding: var(--sl-spacing-md) var(--sl-spacing-lg);
+        border: 1px dashed var(--sl-color-border);
+        border-radius: var(--sl-radius-lg);
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--sl-spacing-md);
+      }
+
+      .unsupported-name {
+        font-size: var(--sl-font-size-sm);
+        font-weight: 600;
+        color: var(--sl-color-text);
+      }
+
+      .unsupported-type {
+        font-size: var(--sl-font-size-xs);
+        color: var(--sl-color-text-muted);
+        margin-top: 2px;
+      }
+
+      .unsupported-badge {
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        padding: 2px 8px;
+        border-radius: var(--sl-radius-full);
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text-muted);
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--sl-spacing-sm);
+        padding: var(--sl-spacing-md) var(--sl-spacing-xl);
+        border-top: 1px solid var(--sl-color-border);
+        background: var(--sl-color-bg-subtle);
+        flex-shrink: 0;
+      }
+
+      .footer-info {
+        font-size: var(--sl-font-size-xs);
+        color: var(--sl-color-text-muted);
+      }
+
+      .footer-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--sl-spacing-sm);
+      }
+
+      .btn-secondary {
+        padding: 7px 16px;
+        border-radius: var(--sl-radius-md);
+        font-size: var(--sl-font-size-sm);
+        font-weight: 500;
+        color: var(--sl-color-text-secondary);
+        border: 1px solid var(--sl-color-border);
+        transition: all var(--sl-transition-fast);
+      }
+
+      .btn-secondary:hover {
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text);
+        border-color: var(--sl-color-border-hover);
+      }
+
+      .btn-primary {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 7px 18px;
+        border-radius: var(--sl-radius-md);
+        font-size: var(--sl-font-size-sm);
+        font-weight: 600;
+        color: var(--sl-color-primary-text);
+        background: var(--sl-color-primary);
+        transition: all var(--sl-transition-fast);
+        box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
+      }
+
+      .btn-primary:hover {
+        background: var(--sl-color-primary-hover);
+        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+      }
+    `
+];
+__decorateClass$3([
+  n2({ type: Array })
+], SlAuth.prototype, "securitySchemes", 2);
+__decorateClass$3([
+  n2({ type: Object })
+], SlAuth.prototype, "authState", 2);
+__decorateClass$3([
+  r$1()
+], SlAuth.prototype, "_localState", 2);
+__decorateClass$3([
+  r$1()
+], SlAuth.prototype, "_showTokens", 2);
+SlAuth = __decorateClass$3([
+  t$1("sl-auth")
+], SlAuth);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+let SlGuideSidebar = class extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.categories = [];
+    this.activeGuideSlug = "";
+    this.open = false;
+    this._collapsedCategories = /* @__PURE__ */ new Set();
+  }
+  _toggleCategory(name) {
+    if (this._collapsedCategories.has(name)) {
+      this._collapsedCategories.delete(name);
+    } else {
+      this._collapsedCategories.add(name);
+    }
+    this.requestUpdate();
+  }
+  _navigateGuide(slug) {
+    this.dispatchEvent(new CustomEvent("navigate-guide", { detail: slug }));
+    this.dispatchEvent(new CustomEvent("close-sidebar"));
+  }
+  render() {
+    return b`
+      <div class="overlay" @click=${() => this.dispatchEvent(new CustomEvent("close-sidebar"))}></div>
+      <nav class="sidebar">
+        <div class="nav-list">
+          ${this.categories.map((cat) => {
+      const collapsed = this._collapsedCategories.has(cat.name);
+      return b`
+              <div class="category">
+                <div
+                  class="category-header ${collapsed ? "collapsed" : ""}"
+                  @click=${() => this._toggleCategory(cat.name)}
+                >
+                  <span>${cat.name}</span>
+                  <svg class="chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 4.5l3 3 3-3"/>
+                  </svg>
+                </div>
+                <div class="category-guides ${collapsed ? "collapsed" : ""}">
+                  ${cat.guides.map((g2) => b`
+                    <a
+                      class="guide-link ${g2.slug === this.activeGuideSlug ? "active" : ""}"
+                      @click=${() => this._navigateGuide(g2.slug)}
+                    >
+                      <svg class="guide-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M4 2h8a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1z"/>
+                        <path d="M6 5h4M6 8h4M6 11h2"/>
+                      </svg>
+                      <span class="guide-title">${g2.title}</span>
+                    </a>
+                  `)}
+                </div>
+              </div>
+            `;
+    })}
+        </div>
+      </nav>
+    `;
+  }
+};
+SlGuideSidebar.styles = [
+  resetStyles,
+  i$4`
+      :host {
+        display: block;
+      }
+
+      .sidebar {
+        position: sticky;
+        top: var(--sl-header-height);
+        width: var(--sl-sidebar-width);
+        height: calc(100vh - var(--sl-header-height));
+        overflow-y: auto;
+        overflow-x: hidden;
+        background: var(--sl-color-sidebar-bg);
+        border-right: 1px solid var(--sl-color-border);
+        padding: 0;
+        flex-shrink: 0;
+        scrollbar-width: thin;
+        scrollbar-color: var(--sl-color-border) transparent;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sidebar::-webkit-scrollbar {
+        width: 4px;
+      }
+      .sidebar::-webkit-scrollbar-thumb {
+        background: var(--sl-color-border);
+        border-radius: 2px;
+      }
+
+      .overlay {
+        display: none;
+      }
+
+      @media (max-width: 768px) {
+        .sidebar {
+          position: fixed;
+          top: 0;
+          left: 0;
+          height: 100vh;
+          z-index: 200;
+          transform: translateX(-100%);
+          transition: transform var(--sl-transition-base);
+          box-shadow: var(--sl-shadow-xl);
+        }
+
+        :host([open]) .sidebar {
+          transform: translateX(0);
+        }
+
+        .overlay {
+          display: block;
+          position: fixed;
+          inset: 0;
+          background: var(--sl-color-overlay);
+          z-index: 199;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity var(--sl-transition-base);
+        }
+
+        :host([open]) .overlay {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
+      /* ── Nav ───────────────────────────── */
+      .nav-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--sl-spacing-sm) 0 var(--sl-spacing-md);
+        scrollbar-width: thin;
+        scrollbar-color: var(--sl-color-border) transparent;
+      }
+
+      .nav-list::-webkit-scrollbar {
+        width: 4px;
+      }
+      .nav-list::-webkit-scrollbar-thumb {
+        background: var(--sl-color-border);
+        border-radius: 2px;
+      }
+
+      .category {
+        margin-bottom: var(--sl-spacing-xs);
+      }
+
+      .category-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--sl-spacing-sm) var(--sl-spacing-lg);
+        font-size: var(--sl-font-size-xs);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--sl-color-text-muted);
+        cursor: pointer;
+        user-select: none;
+        transition: color var(--sl-transition-fast);
+      }
+
+      .category-header:hover {
+        color: var(--sl-color-text);
+      }
+
+      .category-header .chevron {
+        transition: transform var(--sl-transition-fast);
+      }
+
+      .category-header.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      .category-guides {
+        overflow: hidden;
+      }
+
+      .category-guides.collapsed {
+        display: none;
+      }
+
+      .guide-link {
+        display: flex;
+        align-items: center;
+        gap: var(--sl-spacing-sm);
+        padding: 7px var(--sl-spacing-lg) 7px calc(var(--sl-spacing-lg) + 4px);
+        font-size: var(--sl-font-size-sm);
+        color: var(--sl-color-text-secondary);
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        text-decoration: none;
+        border-left: 2px solid transparent;
+      }
+
+      .guide-link:hover {
+        background: var(--sl-color-sidebar-hover);
+        color: var(--sl-color-text);
+        text-decoration: none;
+      }
+
+      .guide-link.active {
+        background: var(--sl-color-sidebar-active);
+        color: var(--sl-color-primary);
+        border-left-color: var(--sl-color-primary);
+      }
+
+      .guide-icon {
+        flex-shrink: 0;
+        color: var(--sl-color-text-muted);
+      }
+
+      .guide-link.active .guide-icon {
+        color: var(--sl-color-primary);
+      }
+
+      .guide-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `
+];
+__decorateClass$2([
+  n2({ type: Array })
+], SlGuideSidebar.prototype, "categories", 2);
+__decorateClass$2([
+  n2({ type: String })
+], SlGuideSidebar.prototype, "activeGuideSlug", 2);
+__decorateClass$2([
+  n2({ type: Boolean, reflect: true })
+], SlGuideSidebar.prototype, "open", 2);
+__decorateClass$2([
+  r$1()
+], SlGuideSidebar.prototype, "_collapsedCategories", 2);
+SlGuideSidebar = __decorateClass$2([
+  t$1("sl-guide-sidebar")
+], SlGuideSidebar);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+let SlGuideView = class extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.guide = null;
+  }
+  render() {
+    if (!this.guide) {
+      return b`
+        <div class="empty">
+          <div class="empty-icon">📖</div>
+          <div class="empty-text">Select a guide from the sidebar to get started.</div>
+        </div>
+      `;
+    }
+    return b`
+      <div class="guide-header">
+        <h1 class="guide-title">${this.guide.title}</h1>
+        ${this.guide.category ? b`<div class="guide-category">${this.guide.category}</div>` : null}
+      </div>
+      <div class="guide-content" .innerHTML=${this.guide.htmlContent}></div>
+    `;
+  }
+};
+SlGuideView.styles = [
+  resetStyles,
+  i$4`
+      :host {
+        display: block;
+        flex: 1;
+        min-width: 0;
+        padding: var(--sl-spacing-xl) var(--sl-spacing-2xl);
+        max-width: 900px;
+        margin: 0 auto;
+      }
+
+      .guide-header {
+        margin-bottom: var(--sl-spacing-2xl);
+        padding-bottom: var(--sl-spacing-xl);
+        border-bottom: 1px solid var(--sl-color-border);
+      }
+
+      .guide-title {
+        font-size: var(--sl-font-size-2xl);
+        font-weight: 800;
+        color: var(--sl-color-text);
+        margin: 0;
+        line-height: 1.3;
+      }
+
+      .guide-category {
+        font-size: var(--sl-font-size-sm);
+        color: var(--sl-color-text-muted);
+        margin-top: var(--sl-spacing-xs);
+      }
+
+      /* ── Prose styles (mirroring sl-intro-desc) ── */
+
+      .guide-content {
+        font-size: var(--sl-font-size-base);
+        color: var(--sl-color-text-secondary);
+        line-height: 1.7;
+      }
+
+      .guide-content p {
+        margin: 0 0 var(--sl-spacing-md) 0;
+      }
+      .guide-content p:last-child {
+        margin-bottom: 0;
+      }
+
+      .guide-content h1,
+      .guide-content h2,
+      .guide-content h3,
+      .guide-content h4,
+      .guide-content h5,
+      .guide-content h6 {
+        color: var(--sl-color-text);
+        font-weight: 700;
+        margin: var(--sl-spacing-xl) 0 var(--sl-spacing-sm) 0;
+        line-height: 1.3;
+      }
+      .guide-content h1 { font-size: 1.6rem; border-bottom: 2px solid var(--sl-color-border); padding-bottom: var(--sl-spacing-sm); }
+      .guide-content h2 { font-size: 1.3rem; border-bottom: 1px solid var(--sl-color-border); padding-bottom: var(--sl-spacing-xs); }
+      .guide-content h3 { font-size: 1.1rem; }
+      .guide-content h4 { font-size: 1rem; }
+      .guide-content h1:first-child,
+      .guide-content h2:first-child,
+      .guide-content h3:first-child {
+        margin-top: 0;
+      }
+
+      .guide-content code {
+        background: var(--sl-color-code-bg);
+        padding: 2px 7px;
+        border-radius: var(--sl-radius-sm);
+        font-size: 0.85em;
+        font-family: var(--sl-font-mono);
+        border: 1px solid var(--sl-color-border);
+      }
+
+      .guide-content pre {
+        background: #0d1117;
+        border: 1px solid #30363d;
+        border-radius: var(--sl-radius-md);
+        padding: var(--sl-spacing-md);
+        overflow-x: auto;
+        margin: var(--sl-spacing-md) 0;
+        line-height: 1.6;
+      }
+      .guide-content pre code {
+        background: none;
+        border: none;
+        padding: 0;
+        border-radius: 0;
+        color: #e6edf3;
+        font-size: var(--sl-font-size-sm);
+        font-family: var(--sl-font-mono);
+      }
+
+      .guide-content a {
+        color: var(--sl-color-primary);
+        text-decoration: none;
+        font-weight: 500;
+        transition: all var(--sl-transition-fast);
+      }
+      .guide-content a:hover {
+        text-decoration: underline;
       }
 
-      .unsupported-name {
+      .guide-content table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid var(--sl-color-border);
+        border-radius: var(--sl-radius-md);
+        overflow: hidden;
+        margin: var(--sl-spacing-md) 0;
         font-size: var(--sl-font-size-sm);
+      }
+      .guide-content thead {
+        background: var(--sl-color-bg-subtle);
+      }
+      .guide-content th {
+        text-align: left;
+        padding: var(--sl-spacing-sm) var(--sl-spacing-md);
         font-weight: 600;
         color: var(--sl-color-text);
+        border-bottom: 2px solid var(--sl-color-border);
       }
-
-      .unsupported-type {
-        font-size: var(--sl-font-size-xs);
-        color: var(--sl-color-text-muted);
-        margin-top: 2px;
+      .guide-content td {
+        padding: var(--sl-spacing-sm) var(--sl-spacing-md);
+        border-bottom: 1px solid var(--sl-color-border);
+        color: var(--sl-color-text-secondary);
       }
-
-      .unsupported-badge {
-        font-size: 10px;
-        font-weight: 600;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-        padding: 2px 8px;
-        border-radius: var(--sl-radius-full);
-        background: var(--sl-color-surface-raised);
-        color: var(--sl-color-text-muted);
-        white-space: nowrap;
-        flex-shrink: 0;
+      .guide-content tr:last-child td {
+        border-bottom: none;
       }
-
-      .modal-footer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--sl-spacing-sm);
-        padding: var(--sl-spacing-md) var(--sl-spacing-xl);
-        border-top: 1px solid var(--sl-color-border);
+      .guide-content tbody tr:hover {
         background: var(--sl-color-bg-subtle);
-        flex-shrink: 0;
       }
 
-      .footer-info {
-        font-size: var(--sl-font-size-xs);
-        color: var(--sl-color-text-muted);
+      .guide-content blockquote {
+        border-left: 3px solid var(--sl-color-primary);
+        background: rgba(99, 102, 241, 0.05);
+        margin: var(--sl-spacing-md) 0;
+        padding: var(--sl-spacing-sm) var(--sl-spacing-lg);
+        border-radius: 0 var(--sl-radius-md) var(--sl-radius-md) 0;
+        color: var(--sl-color-text-secondary);
+      }
+      .guide-content blockquote p {
+        margin-bottom: var(--sl-spacing-xs);
       }
 
-      .footer-actions {
-        display: flex;
-        align-items: center;
-        gap: var(--sl-spacing-sm);
+      .guide-content ul,
+      .guide-content ol {
+        margin: var(--sl-spacing-sm) 0;
+        padding-left: var(--sl-spacing-xl);
+      }
+      .guide-content li {
+        margin-bottom: var(--sl-spacing-xs);
+      }
+      .guide-content li strong {
+        color: var(--sl-color-text);
       }
 
-      .btn-secondary {
-        padding: 7px 16px;
-        border-radius: var(--sl-radius-md);
-        font-size: var(--sl-font-size-sm);
-        font-weight: 500;
-        color: var(--sl-color-text-secondary);
-        border: 1px solid var(--sl-color-border);
-        transition: all var(--sl-transition-fast);
+      .guide-content hr {
+        border: none;
+        height: 1px;
+        background: var(--sl-color-border);
+        margin: var(--sl-spacing-xl) 0;
       }
 
-      .btn-secondary:hover {
-        background: var(--sl-color-surface-raised);
-        color: var(--sl-color-text);
-        border-color: var(--sl-color-border-hover);
+      .guide-content img {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--sl-radius-md);
+        margin: var(--sl-spacing-sm) 0;
       }
 
-      .btn-primary {
+      /* ── Empty state ───────────────────── */
+      .empty {
         display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 6px;
-        padding: 7px 18px;
-        border-radius: var(--sl-radius-md);
-        font-size: var(--sl-font-size-sm);
-        font-weight: 600;
-        color: var(--sl-color-primary-text);
-        background: var(--sl-color-primary);
-        transition: all var(--sl-transition-fast);
-        box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
+        justify-content: center;
+        min-height: 40vh;
+        gap: var(--sl-spacing-md);
+        color: var(--sl-color-text-muted);
+        text-align: center;
       }
 
-      .btn-primary:hover {
-        background: var(--sl-color-primary-hover);
-        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+      .empty-icon {
+        font-size: 2rem;
+      }
+
+      .empty-text {
+        font-size: var(--sl-font-size-base);
+      }
+
+      @media (max-width: 768px) {
+        :host {
+          padding: var(--sl-spacing-md);
+        }
       }
     `
 ];
-__decorateClass$1([
-  n2({ type: Array })
-], SlAuth.prototype, "securitySchemes", 2);
 __decorateClass$1([
   n2({ type: Object })
-], SlAuth.prototype, "authState", 2);
-__decorateClass$1([
-  r$1()
-], SlAuth.prototype, "_localState", 2);
-__decorateClass$1([
-  r$1()
-], SlAuth.prototype, "_showTokens", 2);
-SlAuth = __decorateClass$1([
-  t$1("sl-auth")
-], SlAuth);
+], SlGuideView.prototype, "guide", 2);
+SlGuideView = __decorateClass$1([
+  t$1("sl-guide-view")
+], SlGuideView);
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -30111,6 +31615,9 @@ let SpecLensElement = class extends i$1 {
     this.theme = "auto";
     this.hideTryIt = false;
     this.hideCodeSamples = false;
+    this.hideAskAi = false;
+    this.layout = "page";
+    this.guidesUrl = "";
     this.config = {};
     this._spec = null;
     this._loading = false;
@@ -30121,6 +31628,13 @@ let SpecLensElement = class extends i$1 {
     this._navigateToId = "";
     this._authState = { apiKeys: {}, bearerTokens: {} };
     this._tryItOperation = null;
+    this._activeTab = "api";
+    this._guideCategories = [];
+    this._loadedGuides = /* @__PURE__ */ new Map();
+    this._activeGuideSlug = "";
+    this._searchOpen = false;
+    this._tryItAiMenuOpen = false;
+    this._tryItAiMenuRect = null;
     this._search = null;
     this._router = null;
     this._themeManager = null;
@@ -30128,19 +31642,27 @@ let SpecLensElement = class extends i$1 {
     this._handleKeyDown = (e2) => {
       if ((e2.metaKey || e2.ctrlKey) && e2.key === "k") {
         e2.preventDefault();
-        const sidebar = this.renderRoot.querySelector("sl-sidebar");
-        sidebar == null ? void 0 : sidebar.focusSearch();
+        this._searchOpen = true;
       }
     };
   }
+  get _hasGuides() {
+    return this._guideCategories.length > 0;
+  }
   connectedCallback() {
     super.connectedCallback();
     this._themeManager = new ThemeManager(this);
     this._themeManager.init(this.theme);
-    this._router = new Router((opId) => {
-      this._activeOperationId = opId;
-      this._navigateToId = opId;
-      this._scrollToOperation(opId);
+    this._router = new Router((route) => {
+      if (route.type === "operation") {
+        this._activeTab = "api";
+        this._activeOperationId = route.id;
+        this._navigateToId = route.id;
+        this._scrollToOperation(route.id);
+      } else if (route.type === "guide") {
+        this._activeTab = "guides";
+        this._activeGuideSlug = route.slug;
+      }
     });
     this._router.init();
     document.addEventListener("keydown", this._handleKeyDown);
@@ -30158,6 +31680,9 @@ let SpecLensElement = class extends i$1 {
     if (changed.has("specUrl") || changed.has("config")) {
       this._loadSpec();
     }
+    if (changed.has("guidesUrl") || changed.has("config")) {
+      this._loadGuides();
+    }
     if (changed.has("theme")) {
       (_a2 = this._themeManager) == null ? void 0 : _a2.setTheme(this.theme);
     }
@@ -30230,31 +31755,126 @@ let SpecLensElement = class extends i$1 {
   _handleTryIt(e2) {
     this._tryItOperation = e2.detail;
   }
+  _toggleTryItAiMenu(e2) {
+    if (!this._tryItAiMenuOpen) {
+      this._tryItAiMenuRect = e2.currentTarget.getBoundingClientRect();
+    }
+    this._tryItAiMenuOpen = !this._tryItAiMenuOpen;
+    if (this._tryItAiMenuOpen) {
+      const close = (ev) => {
+        const path2 = ev.composedPath();
+        const wrapper = this.renderRoot.querySelector(".try-it-ask-ai-wrapper");
+        const menu = this.renderRoot.querySelector(".try-it-ai-menu");
+        if (!path2.includes(wrapper) && !path2.includes(menu)) {
+          this._tryItAiMenuOpen = false;
+          document.removeEventListener("click", close, true);
+        }
+      };
+      requestAnimationFrame(() => document.addEventListener("click", close, true));
+    }
+  }
+  _openTryItAi(target) {
+    this._tryItAiMenuOpen = false;
+    if (!this._tryItOperation) return;
+    const prompt = generateAiPrompt(this._tryItOperation);
+    const url2 = buildAiUrl(prompt, target);
+    window.open(url2, "_blank", "noopener,noreferrer");
+  }
+  /** Set the color theme programmatically. Useful in embed mode where the header is hidden. */
+  setTheme(preference) {
+    this.theme = preference;
+  }
+  async _loadGuides() {
+    var _a2, _b2;
+    const inlineGuides = (_a2 = this.config) == null ? void 0 : _a2.guides;
+    const url2 = this.guidesUrl || ((_b2 = this.config) == null ? void 0 : _b2.guidesUrl);
+    if (!(inlineGuides == null ? void 0 : inlineGuides.length) && !url2) {
+      this._guideCategories = [];
+      this._loadedGuides = /* @__PURE__ */ new Map();
+      return;
+    }
+    try {
+      const { categories, loaded } = await loadGuides(inlineGuides, url2);
+      this._guideCategories = categories;
+      this._loadedGuides = loaded;
+      if (this._spec) {
+        const allGuides = categories.flatMap((c2) => c2.guides);
+        this._search = buildSearchIndex(this._spec.allOperations, allGuides);
+      }
+    } catch (err) {
+      console.warn("[SpecLens] Failed to load guides:", err);
+    }
+  }
+  _handleTabChange(e2) {
+    var _a2;
+    this._activeTab = e2.detail;
+    if (e2.detail === "api") {
+      if (this._activeOperationId) {
+        window.location.hash = `#/operation/${encodeURIComponent(this._activeOperationId)}`;
+      } else {
+        history.replaceState(null, "", window.location.pathname);
+      }
+    } else if (e2.detail === "guides") {
+      if (!this._activeGuideSlug && this._guideCategories.length) {
+        const firstGuide = this._guideCategories[0].guides[0];
+        if (firstGuide) (_a2 = this._router) == null ? void 0 : _a2.navigateToGuide(firstGuide.slug);
+      }
+    }
+  }
+  _handleGuideNavigate(e2) {
+    var _a2;
+    (_a2 = this._router) == null ? void 0 : _a2.navigateToGuide(e2.detail);
+  }
+  _handleSearchSelectOperation(e2) {
+    var _a2;
+    this._searchOpen = false;
+    this._activeTab = "api";
+    (_a2 = this._router) == null ? void 0 : _a2.navigateTo(e2.detail);
+  }
+  _handleSearchSelectGuide(e2) {
+    var _a2;
+    this._searchOpen = false;
+    this._activeTab = "guides";
+    (_a2 = this._router) == null ? void 0 : _a2.navigateToGuide(e2.detail);
+  }
   render() {
     var _a2, _b2;
     return b`
       <div class="sl-root" data-theme=${((_a2 = this._themeManager) == null ? void 0 : _a2.resolved) ?? "light"}>
         ${this._spec ? b`
-          <sl-header
-            .spec=${this._spec}
-            .authOpen=${this._authOpen}
-            @toggle-theme=${this._handleThemeToggle}
-            @toggle-sidebar=${() => this._sidebarOpen = !this._sidebarOpen}
-            @toggle-auth=${() => this._authOpen = !this._authOpen}
-          ></sl-header>
+          ${this.layout === "page" ? b`
+            <sl-header
+              .spec=${this._spec}
+              .authOpen=${this._authOpen}
+              .activeTab=${this._activeTab}
+              .showTabs=${this._hasGuides}
+              @toggle-theme=${this._handleThemeToggle}
+              @toggle-sidebar=${() => this._sidebarOpen = !this._sidebarOpen}
+              @toggle-auth=${() => this._authOpen = !this._authOpen}
+              @tab-change=${this._handleTabChange}
+              @open-search=${() => this._searchOpen = true}
+            >
+              <slot name="logo" slot="logo"></slot>
+              <slot name="header-actions" slot="header-actions"></slot>
+            </sl-header>
+          ` : null}
 
+          ${this._activeTab === "api" ? b`
           <div class="sl-body">
             <sl-sidebar
               .tagGroups=${this._spec.tagGroups}
               .activeOperationId=${this._activeOperationId}
               .open=${this._sidebarOpen}
               .searchEngine=${this._search}
+              .layout=${this.layout}
+              .securitySchemes=${this._spec.securitySchemes}
               @navigate=${(e2) => {
       var _a3;
       return (_a3 = this._router) == null ? void 0 : _a3.navigateTo(e2.detail);
     }}
               @navigate-intro=${() => this._scrollToIntro()}
               @close-sidebar=${() => this._sidebarOpen = false}
+              @toggle-auth=${() => this._authOpen = !this._authOpen}
             ></sl-sidebar>
 
             <main class="sl-main">
@@ -30311,6 +31931,7 @@ let SpecLensElement = class extends i$1 {
                       .activeOperationId=${this._navigateToId}
                       ?hide-try-it=${this.hideTryIt || ((_b3 = this.config) == null ? void 0 : _b3.hideTryIt)}
                       ?hide-code-samples=${this.hideCodeSamples || ((_c = this.config) == null ? void 0 : _c.hideCodeSamples)}
+                      ?hide-ask-ai=${this.hideAskAi}
                       @try-it=${this._handleTryIt}
                     ></sl-operation>
                   `;
@@ -30319,6 +31940,22 @@ let SpecLensElement = class extends i$1 {
               `)}
             </main>
           </div>
+          ` : null}
+
+          ${this._activeTab === "guides" && this._hasGuides ? b`
+          <div class="sl-body">
+            <sl-guide-sidebar
+              .categories=${this._guideCategories}
+              .activeGuideSlug=${this._activeGuideSlug}
+              .open=${this._sidebarOpen}
+              @navigate-guide=${this._handleGuideNavigate}
+              @close-sidebar=${() => this._sidebarOpen = false}
+            ></sl-guide-sidebar>
+            <sl-guide-view
+              .guide=${this._loadedGuides.get(this._activeGuideSlug) ?? null}
+            ></sl-guide-view>
+          </div>
+          ` : null}
 
           ${this._authOpen && this._spec.securitySchemes.length > 0 ? b`
             <sl-auth
@@ -30336,6 +31973,16 @@ let SpecLensElement = class extends i$1 {
                 <div class="try-it-header">
                   <span class="method-badge method-${this._tryItOperation.method}">${this._tryItOperation.method}</span>
                   <span class="try-it-path">${this._tryItOperation.path}</span>
+                  ${!this.hideAskAi ? b`
+                    <div class="try-it-ask-ai-wrapper">
+                      <button class="try-it-ask-ai-btn" @click=${this._toggleTryItAiMenu}>
+                        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+                          <path d="M8 1l1.5 3.5L13 6l-3.5 1.5L8 11 6.5 7.5 3 6l3.5-1.5L8 1zM3 11l.75 1.75L5.5 13.5l-1.75.75L3 16l-.75-1.75L.5 13.5l1.75-.75L3 11zM12.5 10l.75 1.75 1.75.75-1.75.75-.75 1.75-.75-1.75L10 12.5l1.75-.75.75-1.75z"/>
+                        </svg>
+                        Ask AI
+                      </button>
+                    </div>
+                  ` : null}
                   <button class="try-it-close" @click=${() => this._tryItOperation = null}>
                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
                       <path d="M4 4l8 8M12 4l-8 8" stroke-linecap="round"/>
@@ -30353,6 +32000,22 @@ let SpecLensElement = class extends i$1 {
                 </div>
               </div>
             </div>
+            ${this._tryItAiMenuOpen && this._tryItAiMenuRect ? b`
+              <div class="try-it-ai-menu" style="top:${this._tryItAiMenuRect.bottom + 4}px;right:${window.innerWidth - this._tryItAiMenuRect.right}px">
+                <button class="try-it-ai-menu-item" @click=${() => this._openTryItAi("chatgpt")}>
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.612-1.5z"/>
+                  </svg>
+                  ChatGPT
+                </button>
+                <button class="try-it-ai-menu-item" @click=${() => this._openTryItAi("claude")}>
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M13.827 3.52h-3.654L5 20.48h3.213l1.436-4.115h4.847l1.367 4.115H19L13.827 3.52zm-3.192 10.6 1.85-5.3 1.744 5.3h-3.594z"/>
+                  </svg>
+                  Claude
+                </button>
+              </div>
+            ` : null}
           ` : null}
         ` : null}
 
@@ -30370,6 +32033,15 @@ let SpecLensElement = class extends i$1 {
             <div class="sl-error-detail">${this._error}</div>
           </div>
         ` : null}
+
+        ${this._searchOpen ? b`
+          <sl-search
+            .searchEngine=${this._search}
+            @close=${() => this._searchOpen = false}
+            @select-operation=${this._handleSearchSelectOperation}
+            @select-guide=${this._handleSearchSelectGuide}
+          ></sl-search>
+        ` : null}
       </div>
     `;
   }
@@ -30887,11 +32559,86 @@ SpecLensElement.styles = [
         padding: 0;
       }
 
+      /* ── Ask AI in Try-It modal ──────────── */
+      .try-it-ask-ai-wrapper {
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .try-it-ask-ai-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 12px;
+        border-radius: var(--sl-radius-md);
+        font-size: var(--sl-font-size-xs);
+        font-weight: 600;
+        color: var(--sl-color-text-muted);
+        border: 1px solid var(--sl-color-border);
+        background: transparent;
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        white-space: nowrap;
+      }
+
+      .try-it-ask-ai-btn:hover {
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text);
+        border-color: var(--sl-color-text-muted);
+      }
+
+      .try-it-ai-menu {
+        position: fixed;
+        z-index: 9999;
+        min-width: 150px;
+        background: var(--sl-color-surface);
+        border: 1px solid var(--sl-color-border);
+        border-radius: var(--sl-radius-md);
+        box-shadow: var(--sl-shadow-md);
+        padding: 4px 0;
+        animation: sl-menu-in 120ms ease;
+      }
+
+      @keyframes sl-menu-in {
+        from { opacity: 0; transform: translateY(-4px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+
+      .try-it-ai-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 8px 14px;
+        font-size: var(--sl-font-size-sm);
+        color: var(--sl-color-text);
+        cursor: pointer;
+        transition: background var(--sl-transition-fast);
+        white-space: nowrap;
+        text-align: left;
+        background: none;
+        border: none;
+      }
+
+      .try-it-ai-menu-item:hover {
+        background: var(--sl-color-bg-subtle);
+      }
+
+      .try-it-ai-menu-item svg {
+        flex-shrink: 0;
+      }
+
       @media (max-width: 768px) {
         .sl-main {
           padding: var(--sl-spacing-md);
         }
       }
+
+      /* ── Embed mode ──────────────────────── */
+      :host([layout="embed"]) {
+        --sl-header-height: 0px;
+        min-height: unset;
+      }
     `
 ];
 __decorateClass([
@@ -30909,6 +32656,15 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean, attribute: "hide-code-samples" })
 ], SpecLensElement.prototype, "hideCodeSamples", 2);
+__decorateClass([
+  n2({ type: Boolean, attribute: "hide-ask-ai" })
+], SpecLensElement.prototype, "hideAskAi", 2);
+__decorateClass([
+  n2({ reflect: true, attribute: "layout" })
+], SpecLensElement.prototype, "layout", 2);
+__decorateClass([
+  n2({ attribute: "guides-url" })
+], SpecLensElement.prototype, "guidesUrl", 2);
 __decorateClass([
   r$1()
 ], SpecLensElement.prototype, "_spec", 2);
@@ -30936,6 +32692,27 @@ __decorateClass([
 __decorateClass([
   r$1()
 ], SpecLensElement.prototype, "_tryItOperation", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_activeTab", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_guideCategories", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_loadedGuides", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_activeGuideSlug", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_searchOpen", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_tryItAiMenuOpen", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_tryItAiMenuRect", 2);
 SpecLensElement = __decorateClass([
   t$1("spec-lens")
 ], SpecLensElement);
@@ -30979,6 +32756,9 @@ const SpecLens = {
     if (config.hideCodeSamples) {
       el.setAttribute("hide-code-samples", "");
     }
+    if (config.guidesUrl) {
+      el.setAttribute("guides-url", config.guidesUrl);
+    }
     el.config = config;
     container.appendChild(el);
     return el;