aeo.js 0.0.3 → 0.0.4

package/dist/widget.mjs

@@ -11,7 +11,7 @@ function getStyles(theme) {
 
     .aeo-toggle {
       position: fixed;
-      z-index: 10001;
+      z-index: 2147483647;
       font-family: 'JetBrains Mono', monospace;
       font-size: 14px;
       animation: aeo-fade-in 0.3s ease;
@@ -85,12 +85,15 @@ function getStyles(theme) {
       left: 0;
       right: 0;
       bottom: 0;
+      width: 100vw;
+      height: 100vh;
       background: ${t.background};
-      z-index: 10000;
+      z-index: 2147483646;
       display: flex;
       flex-direction: column;
       animation: aeo-fade-in 0.2s ease;
       font-family: 'JetBrains Mono', monospace;
+      isolation: isolate;
     }
 
     /* Top bar */
@@ -213,6 +216,177 @@ function getStyles(theme) {
       stroke: currentColor;
     }
 
+    /* View tabs */
+    .aeo-view-tabs {
+      display: flex;
+      gap: 2px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 8px;
+      padding: 2px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .aeo-view-tab {
+      padding: 5px 12px;
+      background: transparent;
+      color: ${t.text};
+      border: none;
+      border-radius: 6px;
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .aeo-view-tab:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .aeo-view-tab.aeo-view-active {
+      background: rgba(255, 255, 255, 0.1);
+      color: ${t.accent};
+    }
+
+    /* Metadata bar */
+    .aeo-meta-bar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 16px;
+      padding: 12px 16px;
+      margin-bottom: 24px;
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 8px;
+      font-size: 12px;
+      color: ${t.text};
+    }
+
+    .aeo-meta-label {
+      color: rgba(160, 160, 168, 0.5);
+      margin-right: 4px;
+    }
+
+    .aeo-meta-sep {
+      width: 1px;
+      height: 14px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    /* Rendered markdown view */
+    .aeo-rendered {
+      color: ${t.text};
+      line-height: 1.75;
+      font-size: 14px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .aeo-rendered .aeo-r-h1 {
+      font-size: 28px;
+      font-weight: 700;
+      color: ${t.accent};
+      margin: 0 0 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      line-height: 1.3;
+    }
+
+    .aeo-rendered .aeo-r-h2 {
+      font-size: 22px;
+      font-weight: 600;
+      color: ${t.accent};
+      margin: 32px 0 12px;
+      line-height: 1.3;
+    }
+
+    .aeo-rendered .aeo-r-h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: ${t.accent};
+      margin: 24px 0 8px;
+      line-height: 1.4;
+    }
+
+    .aeo-rendered .aeo-r-h4,
+    .aeo-rendered .aeo-r-h5,
+    .aeo-rendered .aeo-r-h6 {
+      font-size: 15px;
+      font-weight: 600;
+      color: ${t.accent};
+      margin: 20px 0 8px;
+    }
+
+    .aeo-rendered .aeo-r-p {
+      margin: 0 0 12px;
+    }
+
+    .aeo-rendered .aeo-r-list {
+      margin: 0 0 16px;
+      padding-left: 24px;
+    }
+
+    .aeo-rendered .aeo-r-list li {
+      margin: 4px 0;
+    }
+
+    .aeo-rendered .aeo-r-quote {
+      margin: 16px 0;
+      padding: 12px 20px;
+      border-left: 3px solid ${t.badge};
+      background: rgba(255, 255, 255, 0.02);
+      color: ${t.text};
+      font-style: italic;
+    }
+
+    .aeo-rendered .aeo-r-hr {
+      border: none;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+      margin: 24px 0;
+    }
+
+    .aeo-rendered .aeo-r-code {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+      padding: 16px;
+      margin: 16px 0;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      overflow-x: auto;
+      color: ${t.badge};
+    }
+
+    .aeo-rendered .aeo-r-inline-code {
+      background: rgba(255, 255, 255, 0.06);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.9em;
+      color: ${t.badge};
+    }
+
+    .aeo-rendered .aeo-r-link {
+      color: ${t.badge};
+      text-decoration: none;
+      border-bottom: 1px solid rgba(74, 222, 128, 0.3);
+      transition: border-color 0.15s ease;
+    }
+
+    .aeo-rendered .aeo-r-link:hover {
+      border-color: ${t.badge};
+    }
+
+    .aeo-rendered strong {
+      color: ${t.accent};
+      font-weight: 600;
+    }
+
+    .aeo-rendered em {
+      font-style: italic;
+      opacity: 0.9;
+    }
+
     /* Content area */
     .aeo-content-area {
       flex: 1;
@@ -355,7 +529,7 @@ function getStyles(theme) {
       font-size: 13px;
       opacity: 0;
       transition: all 0.3s ease;
-      z-index: 10002;
+      z-index: 2147483647;
     }
 
     .aeo-toast.aeo-toast-show {
@@ -404,6 +578,17 @@ function getStyles(theme) {
         display: none;
       }
 
+      .aeo-view-tabs {
+        order: 10;
+        width: 100%;
+        justify-content: center;
+      }
+
+      .aeo-meta-bar {
+        font-size: 11px;
+        gap: 8px;
+      }
+
       .aeo-content-area {
         padding: 24px 16px;
       }
@@ -813,6 +998,10 @@ var AeoWidget = class {
       <div class="aeo-topbar">
         ${((_a = this.config.widget) == null ? void 0 : _a.showBadge) !== false ? '<span class="aeo-badge"><span class="aeo-badge-dot"></span>LLM-READY</span>' : ""}
         <span class="aeo-route-tab">${mdPath}</span>
+        <div class="aeo-view-tabs">
+          <button class="aeo-view-tab aeo-view-active" data-view="rendered">Rendered</button>
+          <button class="aeo-view-tab" data-view="source">Source</button>
+        </div>
         <div class="aeo-topbar-spacer"></div>
         <div class="aeo-topbar-actions">
           <button class="aeo-topbar-btn aeo-copy-btn" disabled>
@@ -841,8 +1030,135 @@ var AeoWidget = class {
     this.container.appendChild(this.overlayElement);
     const closeBtn = this.overlayElement.querySelector(".aeo-close-btn");
     closeBtn == null ? void 0 : closeBtn.addEventListener("click", () => this.closeOverlay());
+    const viewTabs = this.overlayElement.querySelectorAll(".aeo-view-tab");
+    viewTabs.forEach((tab) => {
+      tab.addEventListener("click", () => {
+        var _a2, _b;
+        viewTabs.forEach((t) => t.classList.remove("aeo-view-active"));
+        tab.classList.add("aeo-view-active");
+        const view = tab.dataset.view;
+        const rendered = (_a2 = this.overlayElement) == null ? void 0 : _a2.querySelector(".aeo-rendered");
+        const source = (_b = this.overlayElement) == null ? void 0 : _b.querySelector(".aeo-markdown-source");
+        if (rendered && source) {
+          rendered.style.display = view === "rendered" ? "block" : "none";
+          source.style.display = view === "source" ? "block" : "none";
+        }
+      });
+    });
     await this.loadContent();
   }
+  /**
+   * Strip YAML frontmatter from markdown content.
+   */
+  stripFrontmatter(md) {
+    const frontmatter = {};
+    let body = md;
+    if (md.startsWith("---")) {
+      const endIndex = md.indexOf("---", 3);
+      if (endIndex !== -1) {
+        const fmBlock = md.slice(3, endIndex).trim();
+        body = md.slice(endIndex + 3).trim();
+        for (const line of fmBlock.split("\n")) {
+          const colonIdx = line.indexOf(":");
+          if (colonIdx > 0) {
+            const key = line.slice(0, colonIdx).trim();
+            const val = line.slice(colonIdx + 1).trim().replace(/^["']|["']$/g, "");
+            frontmatter[key] = val;
+          }
+        }
+      }
+    }
+    return { frontmatter, body };
+  }
+  /**
+   * Convert markdown to simple rendered HTML for the "Rendered" view.
+   */
+  renderMarkdown(md) {
+    const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const lines = md.split("\n");
+    const html = [];
+    let inList = false;
+    let inCode = false;
+    let codeContent = [];
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed.startsWith("```")) {
+        if (inCode) {
+          html.push(`<pre class="aeo-r-code"><code>${esc(codeContent.join("\n"))}</code></pre>`);
+          codeContent = [];
+          inCode = false;
+        } else {
+          if (inList) {
+            html.push("</ul>");
+            inList = false;
+          }
+          inCode = true;
+        }
+        continue;
+      }
+      if (inCode) {
+        codeContent.push(line);
+        continue;
+      }
+      if (!trimmed) {
+        if (inList) {
+          html.push("</ul>");
+          inList = false;
+        }
+        continue;
+      }
+      const headingMatch = trimmed.match(/^(#{1,6})\s+(.*)/);
+      if (headingMatch) {
+        if (inList) {
+          html.push("</ul>");
+          inList = false;
+        }
+        const level = headingMatch[1].length;
+        html.push(`<h${level} class="aeo-r-h${level}">${this.renderInlineMarkdown(esc(headingMatch[2]))}</h${level}>`);
+        continue;
+      }
+      if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+        if (inList) {
+          html.push("</ul>");
+          inList = false;
+        }
+        html.push('<hr class="aeo-r-hr">');
+        continue;
+      }
+      if (trimmed.startsWith(">")) {
+        if (inList) {
+          html.push("</ul>");
+          inList = false;
+        }
+        html.push(`<blockquote class="aeo-r-quote">${this.renderInlineMarkdown(esc(trimmed.slice(1).trim()))}</blockquote>`);
+        continue;
+      }
+      const listMatch = trimmed.match(/^[-*+]\s+(.*)/);
+      if (listMatch) {
+        if (!inList) {
+          html.push('<ul class="aeo-r-list">');
+          inList = true;
+        }
+        html.push(`<li>${this.renderInlineMarkdown(esc(listMatch[1]))}</li>`);
+        continue;
+      }
+      if (inList) {
+        html.push("</ul>");
+        inList = false;
+      }
+      html.push(`<p class="aeo-r-p">${this.renderInlineMarkdown(esc(trimmed))}</p>`);
+    }
+    if (inList) html.push("</ul>");
+    if (inCode) html.push(`<pre class="aeo-r-code"><code>${esc(codeContent.join("\n"))}</code></pre>`);
+    return html.join("\n");
+  }
+  renderInlineMarkdown(text) {
+    let out = text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    out = out.replace(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, "<em>$1</em>");
+    out = out.replace(/`([^`]+)`/g, '<code class="aeo-r-inline-code">$1</code>');
+    out = out.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="aeo-r-link" href="$2" target="_blank" rel="noopener">$1</a>');
+    return out;
+  }
   async loadContent() {
     if (!this.overlayElement) return;
     const wrapper = this.overlayElement.querySelector(".aeo-content-wrapper");
@@ -856,8 +1172,15 @@ var AeoWidget = class {
       } else {
         content = extractDOMToMarkdown();
       }
+      const { frontmatter, body } = this.stripFrontmatter(content);
+      const metaItems = [];
+      if (frontmatter.title) metaItems.push(`<span class="aeo-meta-label">Title:</span> ${this.escHtml(frontmatter.title)}`);
+      if (frontmatter.url) metaItems.push(`<span class="aeo-meta-label">URL:</span> <a class="aeo-r-link" href="${this.escHtml(frontmatter.url)}" target="_blank">${this.escHtml(frontmatter.url)}</a>`);
+      const metaBar = metaItems.length > 0 ? `<div class="aeo-meta-bar">${metaItems.join('<span class="aeo-meta-sep"></span>')}</div>` : "";
       wrapper.innerHTML = `
-        <pre class="aeo-markdown-source"><code>${this.highlightMarkdown(content)}</code></pre>
+        ${metaBar}
+        <div class="aeo-rendered">${this.renderMarkdown(body)}</div>
+        <pre class="aeo-markdown-source" style="display:none"><code>${this.highlightMarkdown(content)}</code></pre>
       `;
       const copyBtn = this.overlayElement.querySelector(".aeo-copy-btn");
       const downloadBtn = this.overlayElement.querySelector(".aeo-download-btn");
@@ -882,6 +1205,9 @@ var AeoWidget = class {
       `;
     }
   }
+  escHtml(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
   highlightMarkdown(md) {
     var _a;
     const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");