@sentry/warden 0.0.0

package/docs/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="white"/>
+<path d="M14.2666 4.9061C15.1564 4.09409 16.5921 4.60917 16.7627 5.80162L18.1123 15.2519C18.9476 14.5758 19.6675 14.156 20.2706 13.9423C20.9583 13.6988 21.61 13.6893 22.0606 14.0459C22.5331 14.4202 22.576 15.0232 22.4131 15.5224C22.2471 16.0308 21.8525 16.5326 21.2774 16.916C20.2382 17.6088 19.1848 18.1368 17.7432 18.4863C16.3131 18.833 14.518 19 12 19C9.48202 19 7.68685 18.833 6.25679 18.4863C4.81521 18.1368 3.76183 17.6088 2.72259 16.916C2.14753 16.5326 1.75289 16.0308 1.58684 15.5224C1.42401 15.0233 1.46701 14.4202 1.93938 14.0459C2.38997 13.6893 3.04168 13.6988 3.72943 13.9423C4.33238 14.1559 5.05163 14.5761 5.88667 15.2519L7.23727 5.80162C7.40784 4.60919 8.84362 4.09419 9.73338 4.9061L11.6631 6.66686C11.854 6.84121 12.146 6.84121 12.3369 6.66686L14.2666 4.9061Z" fill="#181225"/>
+<path d="M12 8L13.1226 11.1094H16.7553L13.8164 13.0312L14.9389 16.1406L12 14.2188L9.06107 16.1406L10.1836 13.0312L7.24472 11.1094H10.8774L12 8Z" fill="white"/>
+</svg>

package/docs/src/components/Code.astro

@@ -0,0 +1,141 @@
+---
+interface Props {
+  code: string;
+  lang?: string;
+  title?: string;
+}
+
+const { code, lang = 'bash', title } = Astro.props;
+---
+
+<div class="code-block">
+  <div class="code-header">
+    {title && <div class="code-title">{title}</div>}
+    <button class="copy-button" aria-label="Copy to clipboard">
+      <svg class="copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+      </svg>
+      <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    </button>
+  </div>
+  <pre><code class={`language-${lang}`} set:text={code} /></pre>
+</div>
+
+<script>
+  function setupCodeCopyButtons() {
+    document.querySelectorAll('.code-block').forEach((block) => {
+      const button = block.querySelector('.copy-button');
+      const code = block.querySelector('code');
+
+      if (!button || !code) return;
+
+      button.addEventListener('click', async () => {
+        const textToCopy = code.textContent || '';
+
+        try {
+          await navigator.clipboard.writeText(textToCopy.trim());
+
+          // Show success state
+          button.classList.add('copied');
+          setTimeout(() => {
+            button.classList.remove('copied');
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+      });
+    });
+  }
+
+  // Run on initial load
+  setupCodeCopyButtons();
+
+  // Re-run after page navigation
+  document.addEventListener('astro:page-load', setupCodeCopyButtons);
+</script>
+
+<style>
+  .code-block {
+    margin: 1rem 0;
+    position: relative;
+  }
+
+  .code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-bottom: none;
+  }
+
+  .code-title {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    padding: 0.5rem 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    flex: 1;
+  }
+
+  .code-header:has(.code-title) + pre {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .code-header:not(:has(.code-title)) {
+    background: transparent;
+    border: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: 0.5rem;
+  }
+
+  .copy-button {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    padding: 4px 8px;
+    margin-right: 0.5rem;
+    cursor: pointer;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s;
+  }
+
+  .copy-button:hover {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--text);
+  }
+
+  .copy-button .check-icon {
+    display: none;
+  }
+
+  .copy-button.copied {
+    border-color: #4ade80;
+    color: #4ade80;
+  }
+
+  .copy-button.copied .copy-icon {
+    display: none;
+  }
+
+  .copy-button.copied .check-icon {
+    display: block;
+  }
+
+  .code-block pre {
+    margin: 0;
+  }
+</style>

package/docs/src/components/PackageManagerTabs.astro

@@ -0,0 +1,183 @@
+---
+interface Props {
+  npm: string;
+  pnpm: string;
+  bun: string;
+}
+
+const { npm, pnpm, bun } = Astro.props;
+
+// Format multi-line commands with $ prompt on each line
+function formatCommand(cmd: string): string {
+  return cmd
+    .split('\n')
+    .map(line => `<span class="cli-dim">$</span> ${line}`)
+    .join('\n');
+}
+---
+
+<div class="pm-tabs">
+  <div class="terminal">
+    <div class="terminal-header">
+      <div class="terminal-dots">
+        <span class="dot red"></span>
+        <span class="dot yellow"></span>
+        <span class="dot green"></span>
+      </div>
+      <div class="tab-buttons">
+        <button class="tab-btn active" data-pm="npm">npm</button>
+        <button class="tab-btn" data-pm="pnpm">pnpm</button>
+        <button class="tab-btn" data-pm="bun">bun</button>
+      </div>
+      <button class="copy-button" aria-label="Copy to clipboard">
+        <svg class="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        <svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      </button>
+    </div>
+    <div class="terminal-body">
+      <pre class="tab-content cli-output" data-pm="npm" set:html={formatCommand(npm)} />
+      <pre class="tab-content cli-output hidden" data-pm="pnpm" set:html={formatCommand(pnpm)} />
+      <pre class="tab-content cli-output hidden" data-pm="bun" set:html={formatCommand(bun)} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .pm-tabs {
+    margin: 1.5rem 0;
+  }
+
+  .terminal {
+    background: #000;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.05),
+      0 20px 50px -10px rgba(0, 0, 0, 0.7);
+    position: relative;
+  }
+
+  .terminal-header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: #0a0a0a;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    gap: 8px;
+  }
+
+  .terminal-dots {
+    display: flex;
+    gap: 6px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .dot.red {
+    background: #ff5f57;
+  }
+
+  .dot.yellow {
+    background: #febc2e;
+  }
+
+  .dot.green {
+    background: #28c840;
+  }
+
+  .tab-buttons {
+    display: flex;
+    gap: 2px;
+    margin-left: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    padding: 2px;
+  }
+
+  .tab-btn {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: #888;
+    background: transparent;
+    border: none;
+    padding: 4px 10px;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: all 0.15s;
+  }
+
+  .tab-btn:hover {
+    color: #ccc;
+  }
+
+  .tab-btn.active {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+  }
+
+  .copy-button {
+    margin-left: auto;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    color: #888;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s;
+  }
+
+  .copy-button:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+  }
+
+  .copy-button .check-icon {
+    display: none;
+  }
+
+  .copy-button.copied {
+    border-color: #4ade80;
+    color: #4ade80;
+  }
+
+  .copy-button.copied .copy-icon {
+    display: none;
+  }
+
+  .copy-button.copied .check-icon {
+    display: block;
+  }
+
+  .terminal-body {
+    padding: 1rem 1.25rem;
+  }
+
+  /* Override global pre styles */
+  .terminal-body pre {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+  }
+
+  .tab-content.hidden {
+    display: none;
+  }
+</style>

package/docs/src/components/Terminal.astro

@@ -0,0 +1,212 @@
+---
+interface Props {
+  title?: string;
+  showCopy?: boolean;
+  copyText?: string;
+}
+
+const { title, showCopy = false, copyText } = Astro.props;
+---
+
+<div class="terminal" data-copy-text={copyText}>
+  <div class="terminal-header">
+    <div class="terminal-dots">
+      <span class="dot red"></span>
+      <span class="dot yellow"></span>
+      <span class="dot green"></span>
+    </div>
+    {title && <span class="terminal-title">{title}</span>}
+    {showCopy && (
+      <button class="copy-button" aria-label="Copy to clipboard">
+        <svg class="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        <svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      </button>
+    )}
+  </div>
+  <div class="terminal-body">
+    <slot />
+  </div>
+</div>
+
+<script>
+  function setupCopyButtons() {
+    document.querySelectorAll('.terminal').forEach((terminal) => {
+      const button = terminal.querySelector('.copy-button');
+      const body = terminal.querySelector('.terminal-body');
+
+      if (!button || !body) return;
+
+      button.addEventListener('click', async () => {
+        // Check for custom copy text
+        const customCopyText = terminal.getAttribute('data-copy-text');
+
+        let textToCopy: string;
+
+        if (customCopyText) {
+          textToCopy = customCopyText;
+        } else {
+          // Get only visible text content (respects display: none)
+          function getVisibleText(element: Element): string {
+            if (getComputedStyle(element).display === 'none') return '';
+            let text = '';
+            for (const node of element.childNodes) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                text += node.textContent;
+              } else if (node.nodeType === Node.ELEMENT_NODE) {
+                text += getVisibleText(node as Element);
+              }
+            }
+            return text;
+          }
+
+          const content = getVisibleText(body);
+
+          // Split into lines and process each line
+          const lines = content.split('\n');
+          const cleanedLines = lines.map(line => {
+            // Remove leading $ or > prompts (with optional spaces before/after)
+            return line.replace(/^\s*[$>]\s*/, '');
+          });
+
+          // Join back together and trim
+          textToCopy = cleanedLines.join('\n').trim();
+        }
+
+        // Copy to clipboard
+        try {
+          await navigator.clipboard.writeText(textToCopy);
+
+          // Show success state
+          button.classList.add('copied');
+          setTimeout(() => {
+            button.classList.remove('copied');
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+      });
+    });
+  }
+
+  // Run on initial load
+  setupCopyButtons();
+
+  // Re-run after page navigation (for SPA-like behavior)
+  document.addEventListener('astro:page-load', setupCopyButtons);
+</script>
+
+<style>
+  .terminal {
+    background: #000;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1.5rem 0;
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.05),
+      0 20px 50px -10px rgba(0, 0, 0, 0.7);
+    position: relative;
+  }
+
+  .terminal-header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: #0a0a0a;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    gap: 8px;
+  }
+
+  .terminal-dots {
+    display: flex;
+    gap: 6px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .dot.red {
+    background: #ff5f57;
+  }
+
+  .dot.yellow {
+    background: #febc2e;
+  }
+
+  .dot.green {
+    background: #28c840;
+  }
+
+  .terminal-title {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: #888;
+    margin-left: 4px;
+  }
+
+  .copy-button {
+    margin-left: auto;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    color: #888;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s;
+  }
+
+  .copy-button:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+  }
+
+  .copy-button .check-icon {
+    display: none;
+  }
+
+  .copy-button.copied {
+    border-color: #4ade80;
+    color: #4ade80;
+  }
+
+  .copy-button.copied .copy-icon {
+    display: none;
+  }
+
+  .copy-button.copied .check-icon {
+    display: block;
+  }
+
+  .terminal-body {
+    padding: 1rem 1.25rem;
+  }
+
+  .terminal-body :global(pre),
+  .terminal-body :global(pre.astro-code) {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .terminal-body :global(code) {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+</style>