discord-message-transcript 1.3.0 → 1.3.1-dev.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-message-transcript",
-  "version": "1.3.0",
+  "version": "1.3.1-dev.1.37",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,11 +44,8 @@
     "url": "https://github.com/HenriqueMairesse/discord-message-transcript/issues"
   },
   "homepage": "https://github.com/HenriqueMairesse/discord-message-transcript#readme",
-  "devDependencies": {
-    "typescript": "^5.9.3"
-  },
   "dependencies": {
-    "discord-message-transcript-base": "1.3.0"
+    "discord-message-transcript-base": "1.3.1-dev.1.37"
   },
   "peerDependencies": {
     "discord.js": ">=14.19.0 <15"
@@ -57,7 +54,7 @@
     "access": "public"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc"
+    "clean": "pnpm exec rimraf dist",
+    "build": "pnpm run clean && tsc"
   }
 }

package/dist/core/clientManager.d.ts

@@ -1,3 +0,0 @@
-import { Client } from "discord.js";
-export declare function getClient(): Client | null;
-export declare function setClient(c: Client): void;

package/dist/core/clientManager.js

@@ -1,9 +0,0 @@
-let client = null;
-export function getClient() {
-    return client;
-}
-export function setClient(c) {
-    if (!client) {
-        client = c;
-    }
-}

package/dist/core/componentHelpers.d.ts

@@ -1,3 +0,0 @@
-import { TopLevelComponent } from "discord.js";
-import { TranscriptOptions, JsonTopLevelComponent } from "../types/types";
-export declare function componentsToJson(components: TopLevelComponent[], options: TranscriptOptions): JsonTopLevelComponent[];

package/dist/core/componentHelpers.js

@@ -1,175 +0,0 @@
-import { ComponentType, ButtonStyle, SeparatorSpacingSize } from "discord.js";
-import { JsonComponentType, JsonButtonStyle, JsonSeparatorSpacingSize } from "../types/types";
-import { CustomError } from "./error";
-export function componentsToJson(components, options) {
-    return components.filter(component => {
-        return !(!options.includeV2Components && component.type != ComponentType.ActionRow);
-    }).map(component => {
-        switch (component.type) {
-            case ComponentType.ActionRow: {
-                const actionRowComponents = component.components.filter(c => {
-                    if (c.type == ComponentType.Button && !options.includeButtons) {
-                        return false;
-                    }
-                    if (c.type != ComponentType.Button && !options.includeComponents) {
-                        return false;
-                    }
-                    return true;
-                }).map(c => {
-                    if (c.type === ComponentType.Button) {
-                        return {
-                            type: JsonComponentType.Button,
-                            style: mapButtonStyle(c.style),
-                            label: c.label,
-                            emoji: c.emoji ? {
-                                id: c.emoji.id ?? null,
-                                name: c.emoji.name ?? null,
-                                animated: c.emoji.animated ?? false,
-                            } : null,
-                            url: c.url,
-                            disabled: c.disabled,
-                        };
-                    }
-                    else if (c.type === ComponentType.StringSelect) {
-                        return {
-                            type: JsonComponentType.StringSelect,
-                            placeholder: c.placeholder,
-                            disabled: c.disabled,
-                            options: c.options.map(option => ({
-                                label: option.label,
-                                description: option.description ?? null,
-                                emoji: option.emoji ? {
-                                    id: option.emoji.id ?? null,
-                                    name: option.emoji.name ?? null,
-                                    animated: option.emoji.animated ?? false,
-                                } : null,
-                            }))
-                        };
-                    }
-                    else {
-                        return {
-                            type: JsonComponentType.RoleSelect,
-                            placeholder: c.placeholder,
-                            disabled: c.disabled,
-                        };
-                    }
-                });
-                if (actionRowComponents.length > 0) {
-                    return {
-                        type: JsonComponentType.ActionRow,
-                        components: actionRowComponents,
-                    };
-                }
-                else {
-                    return null;
-                }
-            }
-            case ComponentType.Container: {
-                const newOptions = { ...options, includeComponents: true, includeButtons: true };
-                return {
-                    type: JsonComponentType.Container,
-                    components: componentsToJson(component.components, newOptions).filter(isJsonComponentInContainer), // Impossible to send an component that can be used inside and return an component that can't be used inside
-                    hexAccentColor: component.hexAccentColor,
-                    spoiler: component.spoiler,
-                };
-            }
-            case ComponentType.File: {
-                return {
-                    type: JsonComponentType.File,
-                    fileName: component.data.name ?? null,
-                    size: component.data.size ?? 0,
-                    url: component.file.url,
-                    spoiler: component.spoiler,
-                };
-            }
-            case ComponentType.MediaGallery: {
-                return {
-                    type: JsonComponentType.MediaGallery,
-                    items: component.items.map(item => ({
-                        media: { url: item.media.url },
-                        spoiler: item.spoiler,
-                    })),
-                };
-            }
-            case ComponentType.Section: {
-                return {
-                    type: JsonComponentType.Section,
-                    accessory: (component.accessory.type === ComponentType.Button ? {
-                        type: JsonComponentType.Button,
-                        style: mapButtonStyle(component.accessory.style),
-                        label: component.accessory.label,
-                        emoji: component.accessory.emoji ? {
-                            id: component.accessory.emoji.id ?? null,
-                            name: component.accessory.emoji.name ?? null,
-                            animated: component.accessory.emoji.animated ?? false,
-                        } : null,
-                        url: component.accessory.url,
-                        disabled: component.accessory.disabled,
-                    } : {
-                        type: JsonComponentType.Thumbnail,
-                        media: {
-                            url: component.accessory.media.url,
-                        },
-                        spoiler: component.accessory.spoiler,
-                    }),
-                    components: component.components.map(c => ({
-                        type: JsonComponentType.TextDisplay,
-                        content: c.content,
-                    })),
-                };
-            }
-            case ComponentType.Separator: {
-                return {
-                    type: JsonComponentType.Separator,
-                    spacing: mapSeparatorSpacing(component.spacing),
-                    divider: component.divider,
-                };
-            }
-            case ComponentType.TextDisplay: {
-                return {
-                    type: JsonComponentType.TextDisplay,
-                    content: component.content,
-                };
-            }
-            default:
-                return null;
-        }
-    })
-        .filter(c => c != null);
-}
-function mapButtonStyle(style) {
-    switch (style) {
-        case ButtonStyle.Primary:
-            return JsonButtonStyle.Primary;
-        case ButtonStyle.Secondary:
-            return JsonButtonStyle.Secondary;
-        case ButtonStyle.Success:
-            return JsonButtonStyle.Success;
-        case ButtonStyle.Danger:
-            return JsonButtonStyle.Danger;
-        case ButtonStyle.Link:
-            return JsonButtonStyle.Link;
-        case ButtonStyle.Premium:
-            return JsonButtonStyle.Premium;
-        default:
-            throw new CustomError(`Unknow ButtonStyle: ${style}`);
-    }
-}
-function mapSeparatorSpacing(spacing) {
-    switch (spacing) {
-        case SeparatorSpacingSize.Small:
-            return JsonSeparatorSpacingSize.Small;
-        case SeparatorSpacingSize.Large:
-            return JsonSeparatorSpacingSize.Large;
-        default:
-            throw new CustomError(`Unknow SeparatorSpacingSize: ${spacing}`);
-    }
-}
-function isJsonComponentInContainer(component) {
-    return (component.type == JsonComponentType.ActionRow ||
-        component.type == JsonComponentType.File ||
-        component.type == JsonComponentType.MediaGallery ||
-        component.type == JsonComponentType.Section ||
-        component.type == JsonComponentType.Separator ||
-        component.type == JsonComponentType.TextDisplay);
-}

package/dist/core/error.d.ts

@@ -1,3 +0,0 @@
-export declare class CustomError extends Error {
-    constructor(message: string);
-}

package/dist/core/error.js

@@ -1,7 +0,0 @@
-export class CustomError extends Error {
-    constructor(message) {
-        super(`[discord-message-transcript] ${message}`);
-        this.name = 'DiscordMessageTranscriptError';
-        Object.setPrototypeOf(this, CustomError.prototype);
-    }
-}

package/dist/core/markdown.d.ts

@@ -1,2 +0,0 @@
-import { JsonMessageMentions } from "../types/types";
-export declare function markdownToHTML(text: string, mentions: JsonMessageMentions, dateFormat: Intl.DateTimeFormat): string;

package/dist/core/markdown.js

@@ -1,175 +0,0 @@
-export function markdownToHTML(text, mentions, dateFormat) {
-    const codeBlock = [];
-    const codeLine = [];
-    // Code Block (```)
-    text = text.replace(/```(?:(\S+)\n)?([\s\S]+?)```/g, (_m, lang, code) => {
-        const rawLang = lang?.toLowerCase();
-        const normalizedLang = rawLang ? (LANGUAGE_ALIAS[rawLang] ?? rawLang) : null;
-        const language = normalizedLang && SUPPORTED_LANGUAGES.has(rawLang) ? normalizedLang : 'plaintext';
-        codeBlock.push(`<pre><code class="language-${language}">${code.trimEnd()}</code></pre>`);
-        return `%$%CODE!BLOCK!${codeBlock.length - 1}%$%`;
-    });
-    // Code line (`)
-    text = text.replace(/`([^`]+)`/g, (_m, code) => {
-        codeLine.push(`<code>${code}</code>`);
-        return `%$%CODE!LINE!${codeLine.length - 1}%$%`;
-    });
-    // Citation (> | >>>)
-    text = text.replace(/(^> ?.*(?:(?:\n^> ?.*)+)?)/gm, (match) => {
-        const cleanContent = match.split('\n').map(line => {
-            return line.replace(/^>+ ?/, '');
-        }).join('\n');
-        return `<blockquote class="quote-multi">${cleanContent}</blockquote>`;
-    });
-    // Headers (#)
-    text = text.replace(/^### (.*)(?=\n|$)/gm, `<h3>$1</h3>`);
-    text = text.replace(/^## (.*)(?=\n|$)/gm, `<h2>$1</h2>`);
-    text = text.replace(/^# (.*)(?=\n|$)/gm, `<h1>$1</h1>`);
-    // Subtext(-#)
-    text = text.replace(/^-# (.*)(?=\n|$)/gm, `<p class="subtext">$1</p>`);
-    // List (- | *)
-    text = text.replace(/^(\s*)[-*] (.*)(?=\n|$)/gm, (_m, indentation, text) => {
-        const isSubItem = indentation.length > 0;
-        const bullet = isSubItem ? '◦' : '•';
-        return `<p class="pList">${indentation}${bullet} ${text}</p>`;
-    });
-    // Spoiler (||)
-    text = text.replace(/\|\|(.*?)\|\|/gs, `<span class="spoilerMsg">$1</span>`);
-    // Bold & Italic (***)
-    text = text.replace(/\*\*\*(.*?)\*\*\*/gs, `<strong><em>$1</em></strong>`);
-    // Bold (**)
-    text = text.replace(/\*\*(.*?)\*\*/gs, `<strong>$1</strong>`);
-    // Underline(__)
-    text = text.replace(/__(.*?)__/gs, `<u>$1</u>`);
-    // Italic (*)
-    text = text.replace(/\*(.*?)\*/gs, `<em>$1</em>`);
-    text = text.replace(/\_(.*?)\_/gs, `<em>$1</em>`);
-    // Strikethrough (~~)
-    text = text.replace(/~~(.*?)~~/gs, `<s>$1</s>`);
-    // Links ([]() && https)
-    text = text.replace(/\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g, (_m, text, link) => `<a href="${link}" target="_blank">${text}</a>`);
-    text = text.replace(/(?<!href=")(https?:\/\/[^\s]+)/g, (_m, link) => `<a href="${link}" target="_blank">${link}</a>`);
-    // Mentions (@)
-    if (mentions.users.length != 0) {
-        const users = new Map(mentions.users.map(user => [user.id, user]));
-        text = text.replace(/<@!?(\d+)>/g, (_m, id) => {
-            let user = users.get(id);
-            return user ? `<span class="mention" style="color: ${user.color ?? "#dbdee1"}">@${user.name}</span> ` : `<span class="mention"><@${id}></span> `;
-        });
-    }
-    if (mentions.roles.length != 0) {
-        const roles = new Map(mentions.roles.map(role => [role.id, role]));
-        text = text.replace(/<@&(\d+)>/g, (_m, id) => {
-            const role = roles.get(id);
-            return role ? `<span class="mention" style="color: ${role.color}">@${role.name}</span> ` : `<span class="mention"><@&${id}></span> `;
-        });
-    }
-    if (mentions.channels.length != 0) {
-        const channels = new Map(mentions.channels.map(channel => [channel.id, channel]));
-        text = text.replace(/<#(\d+)>/g, (_m, id) => {
-            const channel = channels.get(id);
-            return channel && channel.name ? `<span class="mention">#${channel.name}</span> ` : `<span class="mention"><#${id}></span> `;
-        });
-    }
-    if (mentions.everyone) {
-        text = text.replace("@everyone", `<span class="mention">@everyone</span> `);
-        text = text.replace("@here", `<span class="mention">@here</span> `);
-    }
-    // Timestamp  
-    const { locale, timeZone } = dateFormat.resolvedOptions();
-    text = text.replace(/<t:(\d+)(?::([tTdDfFR]))?>/g, (_m, timestamp, format) => {
-        const date = new Date(parseInt(timestamp, 10) * 1000);
-        const style = format || 'f';
-        const isoString = date.toISOString();
-        const titleFormatter = new Intl.DateTimeFormat(locale, {
-            dateStyle: 'full',
-            timeStyle: 'full',
-            timeZone: timeZone,
-        });
-        const fullDateForTitle = titleFormatter.format(date);
-        if (style === 'R') {
-            const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
-            const seconds = Math.floor((date.getTime() - Date.now()) / 1000);
-            const minutes = Math.floor(seconds / 60);
-            const hours = Math.floor(minutes / 60);
-            const days = Math.floor(hours / 24);
-            let relativeString;
-            if (Math.abs(days) > 30)
-                relativeString = rtf.format(Math.floor(days / 30.44), 'month');
-            else if (Math.abs(days) > 0)
-                relativeString = rtf.format(days, 'day');
-            else if (Math.abs(hours) > 0)
-                relativeString = rtf.format(hours, 'hour');
-            else if (Math.abs(minutes) > 0)
-                relativeString = rtf.format(minutes, 'minute');
-            else
-                relativeString = rtf.format(seconds, 'second');
-            return `<time datetime="${isoString}" title="${fullDateForTitle}">${relativeString}</time>`;
-        }
-        else if (isStyleKey(style)) {
-            const formatter = new Intl.DateTimeFormat(locale, {
-                ...styleOptions[style],
-                timeZone: timeZone,
-            });
-            const formattedDate = formatter.format(date);
-            return `<time datetime="${isoString}" title="${fullDateForTitle}">${formattedDate}</time>`;
-        }
-        return _m;
-    });
-    // Break Line
-    text = text.replace(/\n/g, '<br>');
-    // Clear Unecessary Break Line
-    text = text.replace(/(<\/(?:p|h[1-3]|blockquote)>)\s*<br>/g, '$1');
-    // Remove Placeholders
-    text = text.replace(/%\$%CODE!BLOCK!(\d+)%\$%/g, (_m, number) => {
-        return codeBlock[number];
-    });
-    text = text.replace(/%\$%CODE!LINE!(\d+)%\$%/g, (_m, number) => {
-        return codeLine[number];
-    });
-    return text;
-}
-// Check if styleKey is valid
-const styleOptions = {
-    't': { timeStyle: 'short' },
-    'T': { timeStyle: 'medium' },
-    'd': { dateStyle: 'short' },
-    'D': { dateStyle: 'long' },
-    'f': { dateStyle: 'long', timeStyle: 'short' },
-    'F': { dateStyle: 'full', timeStyle: 'short' },
-};
-function isStyleKey(key) {
-    return key in styleOptions;
-}
-// At least I hope
-const SUPPORTED_LANGUAGES = new Set([
-    'bash', 'sh', 'shell',
-    'c',
-    'cpp',
-    'css',
-    'javascript', 'js',
-    'typescript', 'ts',
-    'json',
-    'xml',
-    'yaml', 'yml',
-    'java',
-    'kotlin',
-    'php',
-    'python', 'py',
-    'ruby', 'rb',
-    'sql',
-    'lua',
-    'markdown', 'md',
-    'plaintext', 'txt'
-]);
-const LANGUAGE_ALIAS = {
-    sh: 'bash',
-    shell: 'bash',
-    js: 'javascript',
-    ts: 'typescript',
-    py: 'python',
-    rb: 'ruby',
-    md: 'markdown',
-    yml: 'yaml',
-    txt: 'plaintext'
-};

package/dist/renderers/html/clientRenderer.js

@@ -1,73 +0,0 @@
-"use strict";
-document.addEventListener('DOMContentLoaded', () => {
-    const transcriptDataElement = document.getElementById('transcript-data');
-    if (!transcriptDataElement) {
-        console.error('Missing transcript data element.');
-        return;
-    }
-    const data = JSON.parse(transcriptDataElement.textContent);
-    const authorMap = new Map(data.authors.map(author => [author.id, author]));
-    document.querySelectorAll('.messageDiv[data-author-id]').forEach(messageDiv => {
-        const authorId = messageDiv.dataset.authorId;
-        const author = authorMap.get(authorId);
-        if (!author) {
-            console.warn(`Author not found for message with ID: ${messageDiv.id} and author ID: ${authorId}`);
-            return;
-        }
-        const avatarImg = messageDiv.querySelector('.messageImg');
-        if (avatarImg)
-            avatarImg.src = author.avatarURL;
-        const usernameH3 = messageDiv.querySelector('.messageUsername');
-        if (usernameH3) {
-            usernameH3.textContent = author.member?.displayName ?? author.displayName;
-            usernameH3.style.color = author.member?.displayHexColor ?? '#dbdee1';
-        }
-        const badgesDiv = messageDiv.querySelector('.badges');
-        if (badgesDiv) {
-            badgesDiv.innerHTML = ''; // Clear existing placeholders
-            if (author.bot) {
-                const badge = document.createElement('p');
-                badge.className = 'badge';
-                badge.textContent = 'APP';
-                badgesDiv.appendChild(badge);
-            }
-            if (author.system) {
-                const badge = document.createElement('p');
-                badge.className = 'badge';
-                badge.textContent = 'SYSTEM';
-                badgesDiv.appendChild(badge);
-            }
-            if (author.guildTag) {
-                const badge = document.createElement('p');
-                badge.className = 'badgeTag';
-                badge.textContent = author.guildTag;
-                badgesDiv.appendChild(badge);
-            }
-        }
-    });
-    // Handle existing client-side event listeners
-    document.addEventListener('click', function (event) {
-        const spoiler = event.target.closest('.spoilerMsg, .spoilerAttachment');
-        if (spoiler && !spoiler.classList.contains('revealed')) {
-            event.preventDefault();
-            event.stopPropagation();
-            spoiler.classList.add('revealed');
-        }
-        const selectorInput = event.target.closest('.selectorInput');
-        document.querySelectorAll('.selector').forEach(selector => {
-            if (!selector.contains(event.target)) {
-                selector.classList.remove('active');
-            }
-        });
-        if (selectorInput) {
-            const selector = selectorInput.closest('.selector');
-            if (selector) {
-                selector.classList.toggle('active');
-            }
-        }
-    });
-    // Initial highlighting
-    if (window.hljs) {
-        hljs.highlightAll();
-    }
-});

package/dist/renderers/html/css.d.ts

@@ -1,11 +0,0 @@
-export declare const DEFAULT_CSS = "\nbody {\n    background-color: #313338;\n    color: #dbdee1;\n    font-family: \"Whitney\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n}\nheader {\n    height: fit-content;\n    border-bottom: 2px solid black;\n    margin-top: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 1rem;\n    display: flex;\n    flex-direction: column;\n    display: flex;\n    flex-direction: row;\n}\na {\n    text-decoration: none;\n    color: #1E90FF;\n}\np {\n    margin: 0;\n}\nh4 {\n    margin: 0;\n}\ncode {\n    border: 1px solid #202225;\n    border-radius: 0.25rem;\n}\nblockquote {\n    margin: 0.5rem 0;\n    border-left: 0.25rem solid #4f545c;\n    padding: 0.4rem 0.6rem;\n    border-radius: 0.25rem;\n    color: #9f9fa6;\n}\n.line {\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem\n}\n.badge {\n    background-color: #5865f2;\n    color: white;\n    font-weight: 600;\n    font-size: 80%;\n    padding: 0.1rem 0.35rem;\n    border-radius: 0.25rem;\n    letter-spacing: 0.03rem;\n    height: fit-content;\n    width: fit-content;\n    align-self: flex-start;\n}\n.badgeTag {\n    background-color: #747F8D50;\n    color: white;\n    font-weight: 600;\n    font-size: 70%;\n    padding: 0.1rem 0.35rem;\n    border-radius: 0.25rem;\n    letter-spacing: 0.03rem;\n    height: fit-content;\n    width: fit-content;\n    align-self: center;\n}\n.mention {\n    background-color: #5664fa41;\n    padding: 0.2rem;\n    border-radius: 0.25rem;\n    transition: background-color 0.2s ease;\n}\n.mention:hover {\n    background-color: #5664fa7e;\n}\n";
-export declare const MESSAGE_CSS = "\n.messageDiv {\n    display: flex;\n    flex-direction: column;\n    gap: 0.2rem;\n    padding: 0.5rem;\n    border-radius: 1rem;\n}\n.messageDiv.highlight, .messageDiv:hover {\n    background-color: #40434b;\n    transition: background-color 0.3s ease-in-out;\n}\n.messageBotton {\n    display: flex;\n    flex-direction: row;\n    gap: 1rem;\n    padding: 0.5rem;\n    border-radius: 0.25rem;\n}\n.messageImg {\n    width: 3.5rem; \n    height: 3.5rem; \n    border-radius: 50%;\n}\n.messageDivRight {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem\n}\n.messageUser {\n    display: flex;\n    flex-direction: row;\n    gap: 0.75rem;\n}\n.messageUsername {\n    margin: 0;\n}\n.messageTimeStamp {\n    color: #999999;\n    font-size: 77.5%;\n    align-self: center;\n}\n.messageContent {\n    line-height: 1.5;\n}\n.pList {\n    white-space: pre-wrap;\n}\n.subtext {\n    font-size: 85%;\n    color: #808080;\n}\n.spoilerMsg {\n    display: inline-block;\n    background-color: #202225;\n    color: #202225;\n    padding: 0 0.2rem;\n    border-radius: 0.2rem;\n    cursor: pointer;\n    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;\n}\n.spoilerMsg.revealed {\n    background-color: transparent;\n    color: inherit;\n}\n.messageReply {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #b5bac1;\n    cursor: pointer;\n    margin-left: 2rem;\n}\n.messageReplySvg {\n    flex-shrink: 0;\n    width: 2.25rem;\n    height: 2.25rem;\n    color: #b5bac1;\n}\n.messageReplyImg {\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n.messageReplyAuthor {\n    font-weight: 600;\n    color: #dbdee1;\n    margin-right: 0.3rem;\n}\n.badgeReply {\n    background-color: #5865f2;\n    color: white;\n    font-weight: 600;\n    font-size: 70%;\n    padding: 0.1rem 0.3rem;\n    border-radius: 0.25rem;\n    letter-spacing: 0.03rem;\n    height: fit-content;\n    align-self: center;\n    flex-shrink: 0;\n}\n.messageReplyText {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: #b5bac1;\n    font-size: 0.75rem;\n}\n";
-export declare const EMBED_CSS = "\n.embed {\n    background-color: #2b2d31;\n    border: 0.15rem solid #2b2d31;\n    border-left: 0.25rem solid;\n    border-radius: 0.25rem;\n    padding: 0.5rem 0.75rem;\n    margin-top: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    max-width: 520px;\n}\n.embed a {\n    color: #00aff4;\n    text-decoration: none;\n}\n.embed a:hover {\n    text-decoration: underline;\n}\n.embedHeader {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 0.5rem;\n}\n.embedHeaderRight {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n}\n.embedHeaderRightAuthor {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #ffffff;\n}\n.embedHeaderRightAuthorImg {\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 50%;\n}\n.embedHeaderRightAuthorName {\n    color: #ffffff;\n    font-weight: 500;\n}\n.embedHeaderRightTitle {\n    font-size: 1rem;\n    font-weight: bold;\n    color: #ffffff;\n}\n.embedHeaderThumbnail {\n    max-width: 80px;\n    max-height: 80px;\n    object-fit: contain;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n}\n.embedDescription {\n    font-size: 0.875rem;\n    color: #dcddde;\n}\n.embedFields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n.embedFieldsField {\n    flex: 1;\n    min-width: 150px;\n}\n.embedFieldsFieldTitle {\n    font-size: 0.75rem;\n    font-weight: bold;\n    color: #ffffff;\n    margin-bottom: 0.25rem;\n}\n.embedFieldsFieldValue {\n    font-size: 0.875rem;\n    color: #dcddde;\n}\n.embedImage {\n    margin-top: 0.5rem;\n    max-width: 100%;\n    height: auto;\n}\n.embedImage img {\n    max-width: 100%;\n    max-height: 300px;\n    object-fit: contain;\n    border-radius: 0.25rem;\n}\n.embedFooter {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.75rem;\n    color: #999999;\n    margin-top: 0.5rem;\n}\n.embedFooterImg {\n    width: 1.25rem;\n    height: 1.25rem;\n    border-radius: 50%;\n}\n.embedFooterText {\n    color: #999999;\n}\n";
-export declare const ATTACHMENT_CSS = "\n.attachmentImage, .attachmentVideo {\n    max-width: 400px;\n    height: auto;\n    border-radius: 0.25rem;\n    margin-top: 0.5rem;\n}\n.attachmentAudio {\n    width: 300px;\n    margin-top: 0.5rem;\n}\n.attachmentFile {\n    background-color: #2b2d31;\n    border: 1px solid #202225;\n    border-radius: 0.75rem;\n    padding: 0.75rem;\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    max-width: 400px;\n    margin-top: 0.5rem;\n    width: fit-content;\n}\n.attachmentFileIcon {\n    width: 2.5rem;\n    height: 2.5rem;\n    fill: #b9bbbe;\n    flex-shrink: 0;\n}\n.attachmentFileInfo {\n    display: flex;\n    flex-direction: column;\n    gap: 0.1rem;\n    overflow: hidden;\n    flex-grow: 1;\n}\n.attachmentFileName {\n    color: #ffffff;\n    text-decoration: none;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.attachmentFileSize {\n    font-size: 0.75rem;\n    color: #72767d;\n}\n.attachmentDownload {\n    display: block;\n    flex-shrink: 0;\n}\n.attachmentDownloadIcon {\n    width: 1.5rem;\n    height: 1.5rem;\n    fill: #b9bbbe;\n    transition: fill 0.2s ease;\n}\n.attachmentDownload:hover .attachmentDownloadIcon {\n    fill: #ffffff;\n}\n.spoilerAttachment {\n    position: relative;\n    display: inline-block;\n    border-radius: 0.5rem;\n    overflow: hidden;\n    cursor: pointer;\n}\n.spoilerAttachment .spoilerAttachmentContent {\n    filter: blur(64px);\n    pointer-events: none;\n    transition: filter 0.2s ease;\n}\n.spoilerAttachment .spoilerAttachmentOverlay {\n    position: absolute;\n    inset: 0;\n    background: rgba(32, 34, 37, 0.85);\n    color: #fff;\n    font-weight: 600;\n    letter-spacing: 0.05em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    user-select: none;\n}\n.spoilerAttachment.revealed .spoilerAttachmentContent {\n    filter: none;\n    pointer-events: auto;\n}\n.spoilerAttachment.revealed .spoilerAttachmentOverlay {\n    display: none;\n}\n";
-export declare const ACTIONROW_CSS = "\n.actionRow {\n    display: flex;\n    gap: 0.5rem;\n    margin-top: 0.5rem;\n}\n";
-export declare const BUTTON_CSS = "\n.button {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0rem 0.8rem;\n    height: 2.5rem;\n    border-radius: 0.6rem;\n    color: white;\n    font-weight: 600;\n    cursor: pointer;\n    transition: filter 0.2s ease;\n}\n.button:hover {\n    filter: brightness(1.1);\n}\n.buttonEmoji {\n    font-size: 1.25rem;\n}\n.buttonLabel {\n    font-size: 0.875rem;\n}\n.buttonLink {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    color: white;\n    font-weight: 600;\n}\n.buttonLinkIcon {\n    width: 1.25rem;\n    height: 1.25rem;\n}\n";
-export declare const COMPONENTS_CSS = "\n.selector {\n    width: 100%;\n    position: relative;\n}\n.selectorInput {\n    background-color: #2b2d31;\n    border: 1px solid #202225;\n    border-radius: 0.75rem;\n    padding: 0.75rem;\n    min-width: 17.5rem;\n    cursor: pointer;\n    user-select: none;\n}\n.selectorInputText {\n    color: #808080;\n}\n.selectorOptionMenu {\n    display: none; \n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    background-color: #2b2d31;\n    border: 1px solid #202225;\n    border-radius: 1rem;\n    margin-top: 0.25rem;\n    padding: 0.5rem;\n    z-index: 10;\n    box-sizing: border-box;\n}\n.selector.active .selectorOptionMenu {\n    display: block;\n}\n.selectorOption {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.75rem;\n    border-radius: 0.75rem;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n}\n.selectorOption:hover {\n    background-color: #4f545c;\n}\n.selectorOptionEmoji {\n    font-size: 1.25rem;\n}\n.selectorOptionRight {\n    display: flex;\n    flex-direction: column;\n}\n.selectorOptionTitle {\n    font-weight: 500;\n}\n.selectorOptionDesc {\n    font-size: 0.75rem;\n    color: #808080;\n}\n";
-export declare const COMPONENTSV2_CSS = "\n.mediaGallery {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n    width: 20rem;\n    height: 20rem;\n    border: 1px solid #202225\n    padding: 0.35rem;\n    overflow: hidden;\n}\n.mediaGalleryItem {\n    flex-grow: 1;\n    flex-basis: 6rem;\n    min-width: 0;\n    display: flex;\n}\n.mediaGalleryImg {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n";
-export declare const POLL_CSS = "\n.pollDiv {\n    background-color: #2b2d31;\n    border-radius: 0.5rem;\n    padding: 1rem;\n    margin-top: 0.5rem;\n    max-width: 420px;\n}\n.pollQuestion {\n    font-size: 1.1rem;\n    font-weight: bold;\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n.pollAnswers {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n.pollAnswer {\n    background-color: #3a3c42;\n    border-radius: 0.3rem;\n    padding: 0.75rem;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: border-color 0.2s ease;\n    position: relative;\n    overflow: hidden;\n}\n.pollAnswer:hover {\n    border-color: #4d515a;\n}\n.pollAnswerBar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: #5664fa7a;\n    border-radius: 0.2rem;\n    z-index: 1;\n}\n.pollAnswerContent {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n.pollAnswerDetails {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n.pollAnswerEmoji {\n    font-size: 1.25rem;\n}\n.pollAnswerText {\n    font-weight: 500;\n}\n.pollAnswerVotes {\n    font-size: 0.8rem;\n    color: #b5bac1;\n    font-weight: bold;\n}\n.pollFooter {\n    margin-top: 1rem;\n    font-size: 0.75rem;\n    color: #949ba4;\n}\n";
-export declare const POLL_RESULT_EMBED_CSS = "\n.pollResultEmbed {\n    background-color: #2b2d31;\n    border-radius: 0.5rem;\n    padding: 1rem;\n    margin-top: 0.5rem;\n    border: 1px solid #3a3c42;\n    min-width: 25rem;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n.pollResultEmbedWinner {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    margin-bottom: 0.4rem;\n}\n.pollResultEmbedCheckmark {\n    color: #57f287;\n    font-size: 1.1em;\n}\n.pollResultEmbedSubtitle {\n    font-size: 0.9rem;\n    color: #b5bac1;\n}\n.pollResultEmbedButtonDiv {\n    margin-right: 0.5rem;\n    margin-left: 1rem;\n    align-self: center;\n}\n.pollResultEmbedButton {\n    background-color: black;\n    color: white;\n    padding: 0.5rem 1rem;\n    border-radius: 0.3rem;\n    text-decoration: none;\n    font-weight: 500;\n    transition: background-color 0.2s ease;\n    cursor: pointer;\n}\n.pollResultEmbedButton:hover {\n    filter: brightness(1.1);\n}\n";
-export declare const REACTIONS_CSS = "\n.reactionsDiv {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.5rem;\n}\n.reaction {\n    align-items: center;\n    background-color: #2b2d31;\n    border: 1px solid #3a3c42;\n    border-radius: 1rem;\n    padding: 0.25rem 0.6rem;\n    font-size: 1rem;\n    color: #dcddde;\n    font-weight: bold;\n    cursor: pointer;\n}\n.reaction:hover {\n    filter: brightness(1.1);\n}\n";