@michaelmishin/speclens 0.3.0 → 0.4.0

package/dist/speclens.js

@@ -17995,6 +17995,144 @@ const objectToNumericMapAsync = async (object) => {
 };
 const wait = (ms) => new Promise((resolve2) => setTimeout(resolve2, ms));
 const SPACE_OR_PUNCTUATION = /[\n\r\p{Z}\p{P}]+/u;
+const STOP_WORDS = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "is",
+  "are",
+  "was",
+  "were",
+  "be",
+  "been",
+  "being",
+  "have",
+  "has",
+  "had",
+  "do",
+  "does",
+  "did",
+  "will",
+  "would",
+  "shall",
+  "should",
+  "may",
+  "might",
+  "must",
+  "can",
+  "could",
+  "of",
+  "in",
+  "to",
+  "for",
+  "with",
+  "on",
+  "at",
+  "from",
+  "by",
+  "about",
+  "as",
+  "into",
+  "through",
+  "during",
+  "before",
+  "after",
+  "above",
+  "below",
+  "between",
+  "and",
+  "but",
+  "or",
+  "nor",
+  "not",
+  "so",
+  "yet",
+  "both",
+  "either",
+  "neither",
+  "each",
+  "every",
+  "all",
+  "any",
+  "few",
+  "more",
+  "most",
+  "other",
+  "some",
+  "such",
+  "no",
+  "only",
+  "own",
+  "same",
+  "than",
+  "too",
+  "very",
+  "just",
+  "that",
+  "this",
+  "these",
+  "those",
+  "it",
+  "its",
+  "if",
+  "then",
+  "else",
+  "when",
+  "up",
+  "out",
+  "off",
+  "over",
+  "under",
+  "again",
+  "further",
+  "once",
+  "here",
+  "there",
+  "where",
+  "why",
+  "how",
+  "which",
+  "who",
+  "whom",
+  "what",
+  "while",
+  "also",
+  "use",
+  "used",
+  "using",
+  "return",
+  "returns",
+  "returned",
+  "get",
+  "set",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "string",
+  "number",
+  "boolean",
+  "object",
+  "array",
+  "type",
+  "value",
+  "values",
+  "field",
+  "fields",
+  "example",
+  "default"
+]);
+function extractKeywords(texts, max) {
+  const freq = /* @__PURE__ */ new Map();
+  for (const text2 of texts) {
+    const words = text2.toLowerCase().replace(/[^a-z0-9\s-]/g, " ").split(/\s+/);
+    for (const w2 of words) {
+      if (w2.length < 3 || STOP_WORDS.has(w2)) continue;
+      freq.set(w2, (freq.get(w2) || 0) + 1);
+    }
+  }
+  return [...freq.entries()].filter(([, count]) => count >= 2).sort((a2, b2) => b2[1] - a2[1]).slice(0, max).map(([word]) => word);
+}
 function buildSearchIndex(operations, guides) {
   const opSearch = new MiniSearch({
     fields: ["operationId", "summary", "description", "path", "method", "tags"],
@@ -18044,10 +18182,13 @@ function buildSearchIndex(operations, guides) {
     }));
     guideSearch.addAll(guideDocs);
   }
+  const apiTexts = operations.flatMap((op) => [op.summary, op.description, ...op.tags]);
+  const guideTexts = (guides || []).flatMap((g2) => [g2.title, g2.category || "", g2.content || ""]);
+  const keywords = extractKeywords([...apiTexts, ...guideTexts], 12);
   return {
-    search(query) {
+    search(query, scope2 = "all") {
       if (!query.trim()) return [];
-      const opResults = opSearch.search(query).map((result) => ({
+      const opResults = scope2 !== "guides" ? opSearch.search(query).map((result) => ({
         type: "operation",
         operationId: result.operationId,
         path: result.path,
@@ -18055,8 +18196,8 @@ function buildSearchIndex(operations, guides) {
         summary: result.summary,
         tags: result.tags.split(" ").filter(Boolean),
         score: result.score
-      }));
-      const guideResults = guideSearch ? guideSearch.search(query).map((result) => ({
+      })) : [];
+      const guideResults = scope2 !== "api" && guideSearch ? guideSearch.search(query).map((result) => ({
         type: "guide",
         slug: result.slug,
         title: result.title,
@@ -18070,6 +18211,12 @@ function buildSearchIndex(operations, guides) {
       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])];
+    },
+    getKeywords() {
+      return keywords;
+    },
+    hasGuides() {
+      return guideSearch !== null;
     }
   };
 }
@@ -20363,7 +20510,7 @@ class ThemeManager {
     }
   }
 }
-const MAX_PROMPT_LENGTH = 6e3;
+const SAFE_ENCODED_LENGTH = 8e3;
 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.
@@ -20381,8 +20528,9 @@ ${op.description}`);
       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;
+      const schema2 = p2.schema;
+      const type2 = (schema2 == null ? void 0 : schema2.type) ?? "any";
+      const enumVals = schema2 == null ? void 0 : schema2.enum;
       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(", ")}`;
@@ -20399,20 +20547,9 @@ ${op.description}`);
 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}`);
-            }
-          }
-        }
+        lines.push("```json");
+        lines.push(schemaStr);
+        lines.push("```");
       }
       if (content.example !== void 0) {
         lines.push(`
@@ -20432,14 +20569,10 @@ ${JSON.stringify(content.example, null, 2)}
       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}\`
+          lines.push(`\`${content.mediaType}\`
 \`\`\`json
 ${schemaStr}
 \`\`\``);
-          } else {
-            lines.push(`\`${content.mediaType}\` — (large schema)`);
-          }
         }
       }
     }
@@ -20456,20 +20589,20 @@ ${schemaStr}
   }
   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;
+  return lines.join("\n");
 }
-function buildAiUrl(prompt, target) {
+function _baseUrl(target) {
+  return target === "chatgpt" ? "https://chatgpt.com/" : "https://claude.ai/new";
+}
+async function openAiWithPrompt(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}`;
+  if (encoded.length <= SAFE_ENCODED_LENGTH) {
+    window.open(`${_baseUrl(target)}?q=${encoded}`, "_blank", "noopener,noreferrer");
+    return "url";
   }
+  await navigator.clipboard.writeText(prompt);
+  window.open(_baseUrl(target), "_blank", "noopener,noreferrer");
+  return "clipboard";
 }
 var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
@@ -21258,6 +21391,7 @@ let SlSearch = class extends i$1 {
     this._query = "";
     this._results = [];
     this._highlightIndex = 0;
+    this._scope = "all";
   }
   firstUpdated() {
     var _a2;
@@ -21266,12 +21400,29 @@ let SlSearch = class extends i$1 {
   _handleInput(e2) {
     this._query = e2.target.value;
     this._highlightIndex = 0;
+    this._runSearch();
+  }
+  _runSearch() {
     if (this.searchEngine && this._query.trim()) {
-      this._results = this.searchEngine.search(this._query).slice(0, 20);
+      this._results = this.searchEngine.search(this._query, this._scope).slice(0, 20);
     } else {
       this._results = [];
     }
   }
+  _setScope(scope2) {
+    var _a2;
+    this._scope = scope2;
+    this._runSearch();
+    (_a2 = this._input) == null ? void 0 : _a2.focus();
+  }
+  _searchKeyword(keyword2) {
+    var _a2;
+    this._query = keyword2;
+    this._highlightIndex = 0;
+    this._runSearch();
+    if (this._input) this._input.value = keyword2;
+    (_a2 = this._input) == null ? void 0 : _a2.focus();
+  }
   _handleKeyDown(e2) {
     switch (e2.key) {
       case "Escape":
@@ -21331,6 +21482,9 @@ let SlSearch = class extends i$1 {
     }
   }
   render() {
+    var _a2, _b2;
+    const showScopeBar = (_a2 = this.searchEngine) == null ? void 0 : _a2.hasGuides();
+    const keywords = ((_b2 = this.searchEngine) == null ? void 0 : _b2.getKeywords()) || [];
     return b`
       <div class="overlay" @click=${() => this.dispatchEvent(new CustomEvent("close"))}></div>
       <div class="modal" @keydown=${this._handleKeyDown}>
@@ -21348,9 +21502,28 @@ let SlSearch = class extends i$1 {
           <span class="esc-hint">Esc</span>
         </div>
 
+        ${showScopeBar ? b`
+          <div class="scope-bar">
+            <button class="scope-chip ${this._scope === "all" ? "active" : ""}" @click=${() => this._setScope("all")}>All</button>
+            <button class="scope-chip ${this._scope === "api" ? "active" : ""}" @click=${() => this._setScope("api")}>API Reference</button>
+            <button class="scope-chip ${this._scope === "guides" ? "active" : ""}" @click=${() => this._setScope("guides")}>Guides</button>
+          </div>
+        ` : null}
+
         <div class="results">
           ${this._query.trim() === "" ? b`
-            <div class="empty-state">Start typing to search…</div>
+            ${keywords.length > 0 ? b`
+              <div class="keywords-section">
+                <div class="keywords-label">Suggested searches</div>
+                <div class="keywords-list">
+                  ${keywords.map((kw) => b`
+                    <button class="keyword-chip" @click=${() => this._searchKeyword(kw)}>${kw}</button>
+                  `)}
+                </div>
+              </div>
+            ` : 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))}
@@ -21531,6 +21704,70 @@ SlSearch.styles = [
         color: var(--sl-color-text-muted);
         border: 1px solid var(--sl-color-border);
       }
+
+      /* ── Scope filter ────────────────────── */
+      .scope-bar {
+        display: flex;
+        gap: 4px;
+        padding: 4px var(--sl-spacing-lg) var(--sl-spacing-sm);
+      }
+
+      .scope-chip {
+        padding: 3px 10px;
+        border-radius: 999px;
+        font-size: var(--sl-font-size-xs);
+        font-weight: 600;
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        border: 1px solid var(--sl-color-border);
+        background: transparent;
+        color: var(--sl-color-text-muted);
+      }
+
+      .scope-chip:hover {
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text);
+      }
+
+      .scope-chip.active {
+        background: var(--sl-color-primary);
+        color: #fff;
+        border-color: var(--sl-color-primary);
+      }
+
+      /* ── Keyword chips ───────────────────── */
+      .keywords-section {
+        padding: var(--sl-spacing-sm) var(--sl-spacing-lg) var(--sl-spacing-md);
+      }
+
+      .keywords-label {
+        font-size: var(--sl-font-size-xs);
+        color: var(--sl-color-text-muted);
+        margin-bottom: 6px;
+      }
+
+      .keywords-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+
+      .keyword-chip {
+        padding: 3px 10px;
+        border-radius: 999px;
+        font-size: var(--sl-font-size-xs);
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        border: 1px solid var(--sl-color-border);
+        background: var(--sl-color-surface-raised);
+        color: var(--sl-color-text-muted);
+      }
+
+      .keyword-chip:hover {
+        background: var(--sl-color-primary);
+        color: #fff;
+        border-color: var(--sl-color-primary);
+      }
     `
 ];
 __decorateClass$b([
@@ -21545,6 +21782,9 @@ __decorateClass$b([
 __decorateClass$b([
   r$1()
 ], SlSearch.prototype, "_highlightIndex", 2);
+__decorateClass$b([
+  r$1()
+], SlSearch.prototype, "_scope", 2);
 __decorateClass$b([
   e$2("input")
 ], SlSearch.prototype, "_input", 2);
@@ -29278,6 +29518,7 @@ let SlOperation = class extends i$1 {
     this._routeCopied = false;
     this._aiMenuOpen = false;
     this._aiMenuRect = null;
+    this._aiToast = false;
   }
   willUpdate(changed) {
     var _a2;
@@ -29330,12 +29571,27 @@ let SlOperation = class extends i$1 {
       requestAnimationFrame(() => document.addEventListener("click", close, true));
     }
   }
-  _openAi(target, e2) {
+  async _openAi(target, e2) {
     e2.stopPropagation();
     this._aiMenuOpen = false;
     const prompt = generateAiPrompt(this.operation);
-    const url2 = buildAiUrl(prompt, target);
-    window.open(url2, "_blank", "noopener,noreferrer");
+    const result = await openAiWithPrompt(prompt, target);
+    if (result === "clipboard") {
+      this._aiToast = true;
+      setTimeout(() => {
+        this._aiToast = false;
+      }, 4e3);
+    }
+  }
+  async _copyPrompt(e2) {
+    e2.stopPropagation();
+    this._aiMenuOpen = false;
+    const prompt = generateAiPrompt(this.operation);
+    await navigator.clipboard.writeText(prompt);
+    this._aiToast = true;
+    setTimeout(() => {
+      this._aiToast = false;
+    }, 4e3);
   }
   render() {
     const op = this.operation;
@@ -29461,6 +29717,23 @@ let SlOperation = class extends i$1 {
             </svg>
             Claude
           </button>
+          <div style="border-top:1px solid var(--sl-color-border);margin:4px 0"></div>
+          <button class="ai-menu-item" @click=${(e2) => this._copyPrompt(e2)}>
+            <svg width="16" height="16" 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>
+            Copy Prompt
+          </button>
+        </div>
+      ` : null}
+      ${this._aiToast ? b`
+        <div class="ai-toast">
+          <svg width="16" height="16" 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>
+          Prompt copied — paste it into the chat
         </div>
       ` : null}
     `;
@@ -29796,6 +30069,32 @@ SlOperation.styles = [
         flex-shrink: 0;
       }
 
+      /* ── AI clipboard toast ──────────────── */
+      .ai-toast {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 18px;
+        background: var(--sl-color-text);
+        color: var(--sl-color-bg);
+        border-radius: var(--sl-radius-lg);
+        font-size: var(--sl-font-size-sm);
+        font-weight: 500;
+        box-shadow: var(--sl-shadow-lg);
+        white-space: nowrap;
+        animation: sl-toast-in 200ms ease;
+      }
+
+      @keyframes sl-toast-in {
+        from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+      }
+
       @media (max-width: 900px) {
         .op-body {
           grid-template-columns: 1fr;
@@ -29849,6 +30148,9 @@ __decorateClass$5([
 __decorateClass$5([
   r$1()
 ], SlOperation.prototype, "_aiMenuRect", 2);
+__decorateClass$5([
+  r$1()
+], SlOperation.prototype, "_aiToast", 2);
 SlOperation = __decorateClass$5([
   t$1("sl-operation")
 ], SlOperation);
@@ -31635,6 +31937,7 @@ let SpecLensElement = class extends i$1 {
     this._searchOpen = false;
     this._tryItAiMenuOpen = false;
     this._tryItAiMenuRect = null;
+    this._aiToast = false;
     this._search = null;
     this._router = null;
     this._themeManager = null;
@@ -31773,12 +32076,17 @@ let SpecLensElement = class extends i$1 {
       requestAnimationFrame(() => document.addEventListener("click", close, true));
     }
   }
-  _openTryItAi(target) {
+  async _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");
+    const result = await openAiWithPrompt(prompt, target);
+    if (result === "clipboard") {
+      this._aiToast = true;
+      setTimeout(() => {
+        this._aiToast = false;
+      }, 4e3);
+    }
   }
   /** Set the color theme programmatically. Useful in embed mode where the header is hidden. */
   setTheme(preference) {
@@ -32042,6 +32350,16 @@ let SpecLensElement = class extends i$1 {
             @select-guide=${this._handleSearchSelectGuide}
           ></sl-search>
         ` : null}
+
+        ${this._aiToast ? b`
+          <div class="ai-toast">
+            <svg width="16" height="16" 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>
+            Prompt copied — paste it into the chat
+          </div>
+        ` : null}
       </div>
     `;
   }
@@ -32639,6 +32957,32 @@ SpecLensElement.styles = [
         --sl-header-height: 0px;
         min-height: unset;
       }
+
+      /* ── AI clipboard toast ──────────────── */
+      .ai-toast {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 18px;
+        background: var(--sl-color-text);
+        color: var(--sl-color-bg);
+        border-radius: var(--sl-radius-lg);
+        font-size: var(--sl-font-size-sm);
+        font-weight: 500;
+        box-shadow: var(--sl-shadow-lg);
+        white-space: nowrap;
+        animation: sl-toast-in 200ms ease;
+      }
+
+      @keyframes sl-toast-in {
+        from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+      }
     `
 ];
 __decorateClass([
@@ -32713,6 +33057,9 @@ __decorateClass([
 __decorateClass([
   r$1()
 ], SpecLensElement.prototype, "_tryItAiMenuRect", 2);
+__decorateClass([
+  r$1()
+], SpecLensElement.prototype, "_aiToast", 2);
 SpecLensElement = __decorateClass([
   t$1("spec-lens")
 ], SpecLensElement);