buncord-transcript 1.0.3 → 1.0.5

package/README.md

@@ -1,9 +1,6 @@
-# Buncord-Transcript
+# **Buncord-Transcript**
 
-[![Sponsor](https://img.shields.io/github/sponsors/LuigiColantuono?style=social)](https://github.com/sponsors/LuigiColantuono)
-[![PayPal](https://img.shields.io/badge/💖-Support-ff69b4)](https://paypal.me/l0g4n7)
-[![npm](https://img.shields.io/npm/v/buncord-transcript?style=flat-square)](https://www.npmjs.com/package/buncord-transcript)
-![Github Stars](https://img.shields.io/github/stars/LuigiColantuono/Buncord-Transcript?style=flat-square)
+<p align="center"><a href="https://github.com/sponsors/LuigiColantuono"><img src="https://img.shields.io/github/sponsors/LuigiColantuono?style=social"></a> <a href="https://paypal.me/l0g4n7"><img src="https://img.shields.io/badge/💖-Support-ff69b4"></a> <img src="https://img.shields.io/npm/v/buncord-transcript"> <img src="https://img.shields.io/npm/dm/buncord-transcript?label=downloads"> <img src="https://img.shields.io/npm/l/buncord-transcript"> <img src="https://img.shields.io/github/repo-size/LuigiColantuono/Buncord-Transcript"> <a href="https://github.com/LuigiColantuono/Buncord-Transcript"><img src="https://img.shields.io/badge/Bun-Networking-black?logo=bun"></a></p>
 
 <div align="center">
   <img src="https://github.com/user-attachments/assets/70e8758e-f363-478a-a013-fd46ca3cf3ec" alt="Buncord Logo" width="180"/>
@@ -15,26 +12,35 @@
 
 Stop simulating browsers to generate simple text logs. **Buncord-Transcript** purges the bloat of JSDOM and React, replacing them with a high-performance, string-based rendering engine powered by Bun and a specialized fork of Mustache.
 
-## ⚡ Blazingly Fast
+## **Blazingly Fast**
 
 *   **Zero Node Dependencies**: No `ws`, no `http` legacy, no `JSDOM`. Pure Bun-native execution.
 *   **Mustache Powered**: Generates complex transcripts in milliseconds using optimized string templates instead of heavy, recursive DOM manipulation.
 *   **Zero Memory Overhead**: While other libraries require hundreds of MBs to "render" a virtual DOM, Buncord processes messages through a stream-like logic that keeps your RAM footprint invisible.
 
-## 🎨 Absolute Cinema UI
+## **Absolute Cinema UI**
 
 *   **Discord v2 Native**: First-class support for modern components: **Buttons**, **Select Menus**, and the new **Containers**.
 *   **1:1 Visual Fidelity**: Unlike libraries with hardcoded styles, Buncord uses a dynamic CSS variable system mirrored directly from the official Discord client.
 *   **Media-First**: Native support for **Multi-image Media Galleries**, high-res avatars, and custom emoji rendering.
 *   **Smart Mentions**: Intelligently resolves user mentions and relative timestamps within the transcript context.
 
-## 📦 Installation
+### **📦 Bundle Size Comparison: Transcripts**
+
+| Package | Size (Unpacked) | Total Files | Dependencies | Install Weight (est.) |
+| :--- | :--- | :--- | :--- | :--- |
+| **discord-html-transcripts** | 170 kB | 87 | React, JSDOM, etc. | **~25.000 kB (25MB)** |
+| **buncord-transcript** | 33.8 kB | 8 | **NONE** (Native) | **~34 kB** |
+
+> **Result: 99.8% savings on total installation weight!**
+
+## **Installation**
 
 ```bash
 bun add buncord-transcript
 ```
 
-## 🚀 Quick Start
+## **Quick Start**
 
 ```typescript
 import { createTranscript } from 'buncord-transcript';
@@ -50,7 +56,7 @@ const html = await createTranscript(messages, channel);
 <img width="400" height="500" alt="Buncord-Transcript" src="https://github.com/user-attachments/assets/a63256bd-c22e-465a-a667-74d747526dfb" />
 </div>
 
-## 🛠️ The Philosophy
+## **The Philosophy**
 
 Built out of frustration with outdated, bloated libraries that fail to render modern Discord components. Buncord-Transcript is a **"Performance Tier 1"** tool for developers who prioritize speed, code purity, and production stability.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buncord-transcript",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "High-performance, Bun-native Discord HTML transcripts with 1:1 visual fidelity.",
   "module": "src/index.ts",
   "main": "src/index.ts",
@@ -29,11 +29,16 @@
     "zero-dependency",
     "discord-v2"
   ],
-  "devDependencies": {
-    "@types/bun": "latest"
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
   },
-  "peerDependencies": {
-    "typescript": "5.9.3"
+  "devDependencies": {
+    "@types/bun": "latest",
+    "eslint": "^9.39.2",
+    "globals": "^15.14.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0"
   },
   "dependencies": {
     "mustache": "github:LuigiColantuono/mustache"

package/src/generator.ts

@@ -1,6 +1,6 @@
 import mustache from 'mustache/mustache.js';
-import { htmlTemplate, css } from './template';
-import type { Message, TranscriptOptions, ChannelInfo, Embed, Button, SelectMenu, AnyComponent, ContainerComponent, TextDisplayComponent, SeparatorComponent, ActionRow } from './types';
+import { htmlTemplate, css } from './template.ts';
+import type { Message, TranscriptOptions, ChannelInfo, Button, SelectMenu, AnyComponent, ContainerComponent, TextDisplayComponent, SeparatorComponent, ActionRow } from './types.ts';
 // Helper to format Date
 function formatDate(dateString: string): string {
     const date = new Date(dateString);
@@ -62,7 +62,7 @@ function formatContent(content: string, userMap?: Map<string, string>): string {
     // Mentions (Role) <@&123456>
     html = html.replace(/&lt;@&(\d+)&gt;/g, '<span class="mention">@role</span>');
     // Timestamps <t:123456:R>
-    html = html.replace(/&lt;t:(\d+):?([A-Z])?&gt;/g, (match, timestamp, style) => {
+    html = html.replace(/&lt;t:(\d+):?([A-Z])?&gt;/g, (match, timestamp, _style) => {
         const date = new Date(parseInt(timestamp) * 1000);
         return `<span class="timestamp">${date.toLocaleString()}</span>`;
     });

package/src/index.ts

@@ -1,6 +1,6 @@
 
-import { generateTranscript } from './generator';
-export * from './types';
+import { generateTranscript } from './generator.ts';
+export * from './types.ts';
 
 // Facade for the user
 export const createTranscript = generateTranscript;

package/src/template.ts

@@ -1,5 +1,5 @@
+
 export const css = `
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
 
 :root {
@@ -54,9 +54,10 @@ export const css = `
 body {
   background-color: var(--background-primary);
   color: var(--text-normal);
-  font-family: 'Inter', 'gg sans', 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'gg sans', 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.375rem;
+  letter-spacing: -0.02em;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
@@ -143,13 +144,13 @@ a:hover { text-decoration: underline; }
 .bot-tag {
     background-color: var(--brand-experiment);
     color: #ffffff;
-    font-size: 0.625rem;
+    font-size: 0.725rem;
     text-transform: uppercase;
     height: 0.9375rem;
-    padding: 0 0.275rem;
-    border-radius: 0.1875rem;
-    line-height: normal;
-    font-weight: 500;
+    padding: 0 4.8px;
+    border-radius: 3px;
+    line-height: 0.9375rem;
+    font-weight: 600;
     margin-left: 0.25rem;
     display: inline-flex;
     align-items: center;
@@ -161,8 +162,10 @@ a:hover { text-decoration: underline; }
 
 .bot-tag svg {
     margin-right: 2px;
-    width: 14px;
-    height: 14px;
+    width: 1rem;
+    height: 1rem;
+    margin-inline-start: -0.2rem;
+    margin-top: -0.02rem;
 }
 
 .bot-tag-text {
@@ -248,7 +251,7 @@ a:hover { text-decoration: underline; }
     display: flex;
     max-width: 520px;
     background-color: var(--background-secondary);
-    border-radius: 4px;
+    border-radius: 8px;
     border-left: 4px solid var(--background-tertiary);
     margin-top: 8px;
     padding: 8px 16px 16px 12px;
@@ -343,7 +346,7 @@ a:hover { text-decoration: underline; }
     height: 32px;
     min-width: 60px;
     padding: 2px 16px;
-    border-radius: 3px;
+    border-radius: 4px;
     font-size: 14px;
     font-weight: 500;
     color: #ffffff;