discord-html-transcripts-fix 1.1.0 → 1.3.0

package/dist/generator/index.js

@@ -1,76 +1,264 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
         for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = render;
+exports.renderToStream = renderToStream;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const static_1 = require("react-dom/static");
 const buildProfiles_1 = require("../utils/buildProfiles");
 const client_1 = require("../static/client");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
-//const ssr_1 = require("@lit-labs/ssr");
 const transcript_1 = __importDefault(require("./transcript"));
 const utils_1 = require("../utils/utils");
-//const render_result_1 = require("@lit-labs/ssr/lib/render-result");
 const styles_1 = require("./renderers/components/styles");
 const DiscordImage_1 = require("./renderers/components/DiscordImage");
 const DiscordHighlightedCode_1 = require("./renderers/components/DiscordHighlightedCode");
-// read the package.json file and get the @derockdev/discord-components-core version
-let discordComponentsVersion = '^4.0.2';
+
+// Lock to an exact resolved version — semver ranges in src= aren't cacheable by CDNs.
+let discordComponentsVersion = '4.0.2';
 try {
     const packagePath = path_1.default.join(__dirname, '..', '..', 'package.json');
     const packageJSON = JSON.parse((0, fs_1.readFileSync)(packagePath, 'utf8'));
-    discordComponentsVersion = (_a = packageJSON.dependencies['@skyra/discord-components-core']) !== null && _a !== void 0 ? _a : discordComponentsVersion;
-    // eslint-disable-next-line no-empty
+    const v = (_a = packageJSON.dependencies['@skyra/discord-components-core']) !== null && _a !== void 0 ? _a : discordComponentsVersion;
+    const cleaned = String(v).replace(/^[\^~]/, '');
+    if (/^\d+\.\d+\.\d+/.test(cleaned)) discordComponentsVersion = cleaned;
+} catch (_b) { /* ignore */ }
+
+function computeStats(messages) {
+    let images = 0;
+    let humans = new Set();
+    let firstTs = null, lastTs = null;
+    for (const m of messages) {
+        if (m.attachments && m.attachments.forEach) {
+            m.attachments.forEach((a) => {
+                if (typeof a.contentType === 'string' && a.contentType.startsWith('image/')) images++;
+            });
+        }
+        if (m.author && !m.author.bot) humans.add(m.author.id);
+        const ts = m.createdAt instanceof Date ? m.createdAt.getTime() : (snowflakeToDate(m.id)?.getTime() || null);
+        if (ts) {
+            if (firstTs === null || ts < firstTs) firstTs = ts;
+            if (lastTs === null || ts > lastTs) lastTs = ts;
+        }
+    }
+    return {
+        messageCount: messages.length,
+        participantCount: humans.size,
+        imageCount: images,
+        firstTs,
+        lastTs,
+        spanMs: firstTs && lastTs ? lastTs - firstTs : null,
+    };
+}
+
+function snowflakeToDate(id) {
+    try {
+        const DISCORD_EPOCH = 1420070400000n;
+        const ms = (BigInt(id) >> 22n) + DISCORD_EPOCH;
+        return new Date(Number(ms));
+    } catch (_e) { return null; }
+}
+
+function buildDateSeparators(messages, lang) {
+    const seps = new Array(messages.length).fill(null);
+    let lastYmd = null;
+    // FIX: use local date (matches what the formatter shows). UTC keys were mismatched with the
+    // local-time formatter output, causing the wrong day label near midnight UTC.
+    const fmt = new Intl.DateTimeFormat(lang === 'de' ? 'de-DE' : 'en-US', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });
+    for (let i = 0; i < messages.length; i++) {
+        const m = messages[i];
+        const d = m.createdAt instanceof Date ? m.createdAt : snowflakeToDate(m.id);
+        if (!d) continue;
+        const ymd = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+        if (ymd !== lastYmd) {
+            seps[i] = fmt.format(d);
+            lastYmd = ymd;
+        }
+    }
+    return seps;
 }
-catch (_b) { } // ignore errors
+
 async function render(_a) {
     var _b;
     var { messages, channel, callbacks } = _a, options = __rest(_a, ["messages", "channel", "callbacks"]);
-    const profiles = await (0, buildProfiles_1.buildProfiles)(messages);
-    const extended = await (0, buildProfiles_1.buildExtendedContext)(messages, channel).catch((e) => {
-        console.warn('[discord-html-transcripts-fix] buildExtendedContext failed:', e && e.message ? e.message : e);
-        return { users: {}, roles: {}, channels: {} };
+
+    const lang = options.language && client_1.defaultDicts[options.language] ? options.language : 'en';
+    const i18n = options.i18n
+        ? Object.fromEntries(Object.keys(client_1.defaultDicts).map((k) => [k, Object.assign({}, client_1.defaultDicts[k], options.i18n[k] || {})]))
+        : client_1.defaultDicts;
+
+    // Single-pass collector (profiles + extended in one walk)
+    const allCtx = await (0, buildProfiles_1.buildAllContext)(messages, channel).catch((e) => {
+        console.warn('[discord-html-transcripts-fix] buildAllContext failed:', e?.message || e);
+        return { profiles: {}, users: {}, roles: {}, channels: {} };
     });
+
+    const stats = computeStats(messages);
+    const dateSeps = buildDateSeparators(messages, lang);
+
     const globalData = {
-        profiles,
-        users: extended.users,
-        roles: extended.roles,
-        channels: extended.channels,
+        profiles: allCtx.profiles,
+        users: allCtx.users,
+        roles: allCtx.roles,
+        channels: allCtx.channels,
+        lang,
+        i18n,
+        stats,
     };
-    const { prelude } = await (0, static_1.prerenderToNodeStream)((0, jsx_runtime_1.jsxs)("html", { children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.jsdelivr.net/" }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.discordapp.com" }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.ggSansFont } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: styles_1.globalStyles } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.mentionPopupStyles } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.transcriptUtils } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordImage_1.DiscordAttachmentStyles } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordHighlightedCode_1.DiscordHighlightStyles } }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", href: options.favicon === 'guild'
-                            ? channel.isDMBased()
-                                ? undefined
-                                : ((_b = channel.guild.iconURL({ size: 16, extension: 'png' })) !== null && _b !== void 0 ? _b : undefined)
-                            : options.favicon }), (0, jsx_runtime_1.jsx)("title", { children: channel.isDMBased() ? 'Direct Messages' : channel.name }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: {
-                            __html: client_1.scrollToMessage,
-                        } }), !options.hydrate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: {
-                                    __html: `globalThis.$discordMessage=${JSON.stringify(globalData)}`,
-                                } }), (0, jsx_runtime_1.jsx)("script", { type: "module", src: `https://cdn.jsdelivr.net/npm/@skyra/discord-components-core@${discordComponentsVersion}/+esm` })] }))] }), (0, jsx_runtime_1.jsx)("body", { style: {
-                    margin: 0,
-                    minHeight: '100vh',
-                }, children: (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages: messages, channel: channel, callbacks: callbacks }, options)) }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.mentionPopup } }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.backToTop } }), options.hydrate && (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.revealSpoiler } })] }));
-    const markup = await (0, utils_1.streamToString)(prelude);
-          if (options.hydrate) {
-    const { render: renderLit } = await import('@lit-labs/ssr');
-    const result = renderLit(markup);
-    const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
-    return await collectResult(result);
-  }
-    return markup;
+
+    const renderContext = Object.assign({ lang, i18n, dateSeps, stats }, callbacks ? { callbacks } : {});
+
+    const docTree = (0, jsx_runtime_1.jsxs)("html", { lang, children: [
+        (0, jsx_runtime_1.jsxs)("head", { children: [
+            (0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }),
+            (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
+            (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.jsdelivr.net/" }),
+            (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.discordapp.com" }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.ggSansFont } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: styles_1.globalStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.mentionPopupStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.transcriptUtils } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.searchBarStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.lightboxStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.tocStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.i18nStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.dateSeparatorStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.markdownStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.filterPanelStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordImage_1.DiscordAttachmentStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordHighlightedCode_1.DiscordHighlightStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: extraStyles } }),
+            (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", href: options.favicon === 'guild'
+                    ? channel.isDMBased()
+                        ? undefined
+                        : ((_b = channel.guild.iconURL({ size: 16, extension: 'png' })) !== null && _b !== void 0 ? _b : undefined)
+                    : options.favicon }),
+            (0, jsx_runtime_1.jsx)("title", { children: channel.isDMBased() ? 'Direct Messages' : channel.name }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.scrollToMessage } }),
+            // Non-blocking inline JSON: type="application/json" so the parser doesn't pause
+            (0, jsx_runtime_1.jsx)("script", { id: "dht-data", type: "application/json", dangerouslySetInnerHTML: { __html: (0, utils_1.safeJsonForScript)(globalData) } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: 'try{globalThis.$discordMessage=JSON.parse(document.getElementById("dht-data").textContent);}catch(e){globalThis.$discordMessage={};}' } }),
+            !options.hydrate && (0, jsx_runtime_1.jsx)("script", { type: "module", src: `https://cdn.jsdelivr.net/npm/@skyra/discord-components-core@${discordComponentsVersion}/+esm`, crossOrigin: "anonymous" }),
+        ] }),
+        (0, jsx_runtime_1.jsxs)("body", { style: { margin: 0, minHeight: '100vh' }, children: [
+            (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages, channel, callbacks }, options, renderContext)),
+            (0, jsx_runtime_1.jsx)(StatsFooter, { stats, lang, i18n }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.mentionPopup } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.backToTop } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.searchBar } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.lightbox } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.toc } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.i18nSwitcher } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.filterPanel } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.codeCopyButton } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.permalinkButton } }),
+            options.hydrate && (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.revealSpoiler } }),
+        ] })
+    ] });
+
+    const { prelude } = await (0, static_1.prerenderToNodeStream)(docTree);
+
+    if (options.hydrate) {
+        const markup = await (0, utils_1.streamToString)(prelude);
+        const { render: renderLit } = await import('@lit-labs/ssr');
+        const result = renderLit(markup);
+        const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
+        return await collectResult(result);
+    }
+
+    if (options.returnType === 'stream' || options.stream) {
+        // Return the underlying Node stream — caller is responsible for piping.
+        return prelude;
+    }
+    return await (0, utils_1.streamToString)(prelude);
+}
+
+async function renderToStream(args) {
+    return render(Object.assign({}, args, { returnType: 'stream' }));
+}
+
+function formatSpan(ms, lang) {
+    if (!ms || ms < 0) return '';
+    const days = Math.floor(ms / 86400000);
+    const hours = Math.floor((ms % 86400000) / 3600000);
+    const mins = Math.floor((ms % 3600000) / 60000);
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${mins}m`;
+    if (mins > 0) return `${mins}m`;
+    return '<1m';
+}
+function StatsFooter({ stats, lang, i18n }) {
+    const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+    const locale = lang === 'de' ? 'de-DE' : 'en-US';
+    const fmtDate = (ms) => new Date(ms).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' });
+    return (0, jsx_runtime_1.jsxs)("footer", { className: "dht-stats", children: [
+        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsMessages || '{n} messages').replace('{n}', stats.messageCount) }),
+        ' · ',
+        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsParticipants || '{n} participants').replace('{n}', stats.participantCount) }),
+        ' · ',
+        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsImages || '{n} images').replace('{n}', stats.imageCount) }),
+        stats.firstTs && stats.lastTs && (0, jsx_runtime_1.jsxs)("span", { children: [' · ', fmtDate(stats.firstTs), ' → ', fmtDate(stats.lastTs)] }),
+        stats.spanMs && (0, jsx_runtime_1.jsxs)("span", { children: [' · ', formatSpan(stats.spanMs)] }),
+    ] });
 }
-//# sourceMappingURL=index.js.map
+
+const extraStyles = `
+/* Ensure the host establishes a positioning context for the absolute pin indicator,
+   and clamp it inside the message box on narrow viewports. */
+.dht-msg-pinned{position:relative}
+.dht-pinned-indicator{position:absolute;top:4px;left:4px;font-size:12px;opacity:.75;pointer-events:none}
+@media (max-width:640px){.dht-pinned-indicator{position:static;display:inline-block;margin-right:4px}}
+.dht-app-badge,.dht-popup-badge{background:#5865F2;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;font-weight:600}
+.dht-edit-marker{color:#949ba4;font-size:11px;margin-left:4px;cursor:help}
+.dht-suppressed{color:#6e727a;font-size:11px;font-style:italic}
+.dht-stickers{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
+.dht-sticker{width:160px;height:160px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.02)}
+.dht-poll{border:1px solid #2b2d31;background:#1e1f22;border-radius:8px;padding:12px 14px;margin-top:6px;max-width:480px}
+.dht-poll-q{font-weight:700;margin-bottom:8px;font-size:15px}
+.dht-poll-answers{display:flex;flex-direction:column;gap:6px}
+.dht-poll-a{background:#2b2d31;border-radius:6px;padding:6px 10px;position:relative;overflow:hidden}
+.dht-poll-bar{position:absolute;top:0;left:0;height:100%;background:rgba(88,101,242,.25);z-index:0}
+.dht-poll-line{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px}
+.dht-poll-pct{color:#b5bac1;font-size:12px;white-space:nowrap}
+.dht-poll-foot{margin-top:8px;font-size:11px;color:#949ba4}
+.dht-voice{display:inline-flex;align-items:center;gap:8px;background:#2b2d31;padding:6px 12px;border-radius:8px;color:#dbdee1;font-size:13px;margin:4px 0}
+.dht-voice-wave svg{display:block}
+.dht-voice-dur{color:#b5bac1;font-size:11px}
+.dht-forwarded-wrap{margin:4px 0}
+.dht-forwarded{border-left:3px solid #5865F2;background:rgba(88,101,242,.06);padding:6px 10px;border-radius:0 6px 6px 0;margin-bottom:4px}
+.dht-forwarded-head{font-size:12px;color:#949ba4;margin-bottom:2px}
+.dht-forwarded-icon{margin-right:4px}
+.dht-forwarded-body{color:#dbdee1}
+.dht-forwarded-attachments{margin-top:4px;font-size:11px;color:#949ba4}
+.dht-edit-history{font-size:12px;color:#b5bac1;margin-top:4px}
+.dht-edit-history summary{cursor:pointer;color:#949ba4}
+.dht-edit-history li{margin-top:4px}
+.dht-edit-history time{display:block;color:#6e727a;font-size:10px;margin-bottom:2px}
+.dht-thread-badge{display:inline-block;background:#3f4248;color:#dbdee1;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px}
+.dht-thread-badge--locked{background:#ED4245}
+.dht-thread-badge--archived{background:#6c757d}
+.dht-gifv{max-width:400px;max-height:300px;border-radius:6px}
+.dht-stats{margin:24px auto;padding:12px;text-align:center;color:#b5bac1;font-size:13px;font-family:"gg sans",sans-serif;border-top:1px solid #2b2d31;max-width:800px}
+.dht-mention--cmd{background:rgba(88,101,242,.22)!important}
+.dht-embed-provider{color:#949ba4;font-size:11px;margin-bottom:2px}
+.dht-embed-video{margin-top:6px;font-size:13px}
+.dht-embed-video a{color:#8ab4ff;text-decoration:none}
+.dht-embed-video a:hover{text-decoration:underline}
+.dht-automod-rule{font-size:11px;color:#949ba4}
+.dht-automod-content{margin:4px 0 0 12px;color:#dbdee1;border-left:3px solid #f23f42;padding-left:8px;font-size:13px}
+.dht-reaction--burst{box-shadow:inset 0 0 0 1px gold}
+`;
+//# sourceMappingURL=index.js.map

package/dist/generator/renderers/attachment.js

@@ -6,62 +6,53 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const DiscordImage_1 = require("./components/DiscordImage");
-/**
- * Renders all attachments for a message
- * @param message
- * @param context
- * @returns
- */
+
 async function Attachments(props) {
-    if (props.message.attachments.size === 0)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    if (props.message.attachments.size === 0) return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     return props.message.attachments.map((attachment, id) => ((0, jsx_runtime_1.jsx)(Attachment, { attachment: attachment, message: props.message, context: props.context }, id)));
 }
-/**
- * Renders one Discord Attachment
- * @param props - the attachment and rendering context
- */
-async function Attachment({ attachment, context, message, }) {
-    let url = attachment.url;
+
+async function Attachment({ attachment, context, message }) {
+    let url = (0, utils_1.safeHref)(attachment.url) === '#' ? '#' : attachment.url;
     const attachmentType = getAttachmentType(attachment);
     const [bytes, bytesUnit] = (0, utils_1.formatBytes)(attachment.size);
-    // if the attachment is an image, download it to a data url
+    const altText = attachment.description || attachment.name;
+
+    // GIFV detection: animated content served as video but spec-typed as GIF
+    const isGifv = attachment.contentType === 'video/mp4' && /\.(gifv?|webm)$/i.test(attachment.name || '');
+
     switch (attachmentType) {
         case types_1.AttachmentTypes.Image: {
             const downloaded = await context.callbacks.resolveImageSrc(attachment.toJSON(), message.toJSON());
             if (downloaded !== null) {
-                url = downloaded !== null && downloaded !== void 0 ? downloaded : url;
+                url = downloaded ?? url;
             }
-            return (0, jsx_runtime_1.jsx)(DiscordImage_1.DiscordImageAttachment, { url: url, alt: attachment.name }, attachment.id);
+            // GIF / animated content — Discord auto-plays. Render as <video> when needed.
+            if (attachment.contentType === 'image/gif' || isGifv) {
+                return (0, jsx_runtime_1.jsx)("video", { src: url, autoPlay: true, loop: true, muted: true, playsInline: true, className: "dht-gifv", "aria-label": altText }, attachment.id);
+            }
+            return (0, jsx_runtime_1.jsx)(DiscordImage_1.DiscordImageAttachment, { url: url, alt: altText, title: attachment.description || undefined }, attachment.id);
         }
         case types_1.AttachmentTypes.Video: {
             return (0, jsx_runtime_1.jsx)("discord-video-attachment", { slot: "attachments", href: url }, attachment.id);
         }
         case types_1.AttachmentTypes.Audio: {
-            return ((0, jsx_runtime_1.jsx)("discord-audio-attachment", { slot: "attachments", href: url, bytes: bytes, bytesUnit: bytesUnit, name: attachment.name }, attachment.id));
+            // Voice messages have waveform + duration_secs — message.js renders the indicator
+            return (0, jsx_runtime_1.jsx)("discord-audio-attachment", { slot: "attachments", href: url, bytes: bytes, bytesUnit: bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);
         }
         case types_1.AttachmentTypes.File: {
-            return ((0, jsx_runtime_1.jsx)("discord-file-attachment", { slot: "attachments", href: url, bytes: bytes, "bytes-unit": bytesUnit, name: attachment.name }, attachment.id));
+            return (0, jsx_runtime_1.jsx)("discord-file-attachment", { slot: "attachments", href: url, bytes: bytes, "bytes-unit": bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);
         }
     }
 }
-/**
- * Parses the attachment content type.
- * @param attachment Discord.js attachment object
- * @returns
- */
+
 function getAttachmentType(attachment) {
-    var _a, _b;
-    switch ((_b = (_a = attachment.contentType) === null || _a === void 0 ? void 0 : _a.split('/')) === null || _b === void 0 ? void 0 : _b[0]) {
-        case 'audio':
-            return types_1.AttachmentTypes.Audio;
-        case 'image':
-            return types_1.AttachmentTypes.Image;
-        case 'video':
-            return types_1.AttachmentTypes.Video;
-        case undefined:
-        default:
-            return types_1.AttachmentTypes.File;
+    const top = attachment.contentType?.split('/')?.[0];
+    switch (top) {
+        case 'audio': return types_1.AttachmentTypes.Audio;
+        case 'image': return types_1.AttachmentTypes.Image;
+        case 'video': return types_1.AttachmentTypes.Video;
+        default: return types_1.AttachmentTypes.File;
     }
 }
-//# sourceMappingURL=attachment.js.map
+//# sourceMappingURL=attachment.js.map

package/dist/generator/renderers/components/Container.js

@@ -1,19 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DiscordContainer({ children }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            width: '500px',
-            flexDirection: 'column',
-            backgroundColor: '#3f4248',
-            padding: '16px',
-            border: '1px solid #4f5359',
-            marginTop: '2px',
-            marginBottom: '2px',
-            borderRadius: '10px',
-            gap: '8px',
-        }, children: children }));
+const utils_1 = require("../../../utils/utils");
+
+function colorToHex(color) {
+    if (color == null) return null;
+    if (typeof color === 'string') {
+        return color.startsWith('#') ? color : '#' + color.replace(/^0x/i, '');
+    }
+    if (typeof color === 'number') {
+        return '#' + color.toString(16).padStart(6, '0');
+    }
+    return null;
+}
+
+function DiscordContainer({ children, accentColor, spoiler }) {
+    // SECURITY: route accentColor through safeColor so an attacker-controlled
+    // string can't smuggle CSS into the inline borderLeft.
+    const raw = colorToHex(accentColor);
+    const hex = raw ? (0, utils_1.safeColor)(raw, null) : null;
+    const style = {
+        display: 'flex',
+        width: '100%',
+        maxWidth: '500px',
+        minWidth: 0,
+        flexDirection: 'column',
+        backgroundColor: '#3f4248',
+        padding: '16px',
+        borderLeft: hex ? `4px solid ${hex}` : '1px solid #4f5359',
+        borderTop: '1px solid #4f5359',
+        borderRight: '1px solid #4f5359',
+        borderBottom: '1px solid #4f5359',
+        marginTop: '2px',
+        marginBottom: '2px',
+        borderRadius: '10px',
+        gap: '8px',
+        boxSizing: 'border-box',
+    };
+    const node = (0, jsx_runtime_1.jsx)("div", { style, children });
+    if (spoiler) {
+        return (0, jsx_runtime_1.jsx)("span", { className: "discord-spoiler", children: node });
+    }
+    return node;
 }
 exports.default = DiscordContainer;
-//# sourceMappingURL=Container.js.map
+//# sourceMappingURL=Container.js.map

package/dist/generator/renderers/components/Media Gallery.js

@@ -9,24 +9,30 @@ function DiscordMediaGallery({ component }) {
     const count = component.items.length;
     const imagesToShow = component.items.slice(0, 10);
     const hasMore = component.items.length > 10;
-    return ((0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.getGalleryLayout)(count), children: imagesToShow.map((media, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: (0, utils_1.getImageStyle)(idx, count), children: [(0, jsx_runtime_1.jsx)("img", { src: media.media.url, alt: media.description || 'Media content', style: {
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                    } }), hasMore && idx === imagesToShow.length - 1 && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-                        color: 'white',
-                        fontSize: '20px',
-                        fontWeight: 'bold',
-                    }, children: ["+", component.items.length - 10] }))] }, idx))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.getGalleryLayout)(count), children: imagesToShow.map((media, idx) => {
+        const url = media.media.url;
+        const isVideo = typeof url === 'string' && /\.(mp4|webm|mov)(\?|$)/i.test(url);
+        const img = isVideo
+            ? (0, jsx_runtime_1.jsx)("video", { src: url, autoPlay: true, loop: true, muted: true, playsInline: true, style: { width: '100%', height: '100%', objectFit: 'cover' } })
+            : (0, jsx_runtime_1.jsx)("img", { src: url, alt: media.description || 'Media content', loading: 'lazy', style: { width: '100%', height: '100%', objectFit: 'cover' } });
+        const wrapped = media.spoiler
+            ? (0, jsx_runtime_1.jsx)("span", { className: "discord-spoiler", style: { display: 'block', width: '100%', height: '100%' }, children: img })
+            : img;
+        return ((0, jsx_runtime_1.jsxs)("div", { style: (0, utils_1.getImageStyle)(idx, count), children: [wrapped, hasMore && idx === imagesToShow.length - 1 && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                    color: 'white',
+                    fontSize: '20px',
+                    fontWeight: 'bold',
+                }, children: ["+", component.items.length - 10] }))] }, idx));
+    }) }));
 }
 exports.default = DiscordMediaGallery;
 //# sourceMappingURL=Media%20Gallery.js.map

package/dist/generator/renderers/components/Spacing.js

@@ -2,13 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const discord_js_1 = require("discord.js");
+
+/**
+ * V2 Separator component. `spacing` is Small (1) or Large (2). `divider` toggles the visual line.
+ * In Discord's UI: Small ≈ 8px, Large ≈ 16px vertical padding. Divider draws a 1px line.
+ */
 function DiscordSeparator({ divider, spacing }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    const isLarge = spacing === discord_js_1.SeparatorSpacingSize?.Large || spacing === 2;
+    const pad = isLarge ? 16 : 8;
+    const showLine = divider !== false; // default true in Discord — only false when explicitly set
+    return (0, jsx_runtime_1.jsx)("div", {
+        className: "dht-v2-separator",
+        style: {
             width: '100%',
-            height: divider ? '1px' : '0px',
-            backgroundColor: '#4f5359',
-            margin: spacing === discord_js_1.SeparatorSpacingSize.Large ? '8px 0' : '0',
-        } }));
+            padding: `${pad}px 0`,
+            display: 'flex',
+            alignItems: 'center',
+        },
+        children: showLine ? (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '1px', backgroundColor: 'rgba(79,84,89,0.65)' } }) : null
+    });
 }
 exports.default = DiscordSeparator;
-//# sourceMappingURL=Spacing.js.map
+//# sourceMappingURL=Spacing.js.map

package/dist/generator/renderers/components/section/Section.js

@@ -8,12 +8,22 @@ const components_1 = require("../../components");
 const SectionContent_1 = __importDefault(require("./SectionContent"));
 const SectionAccessory_1 = __importDefault(require("./SectionAccessory"));
 function DiscordSection({ children, accessory, id }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", {
+        style: {
             display: 'flex',
             flexDirection: 'row',
             width: '100%',
             maxWidth: '500px',
-        }, children: [(0, jsx_runtime_1.jsx)(SectionContent_1.default, { children: children }), (0, jsx_runtime_1.jsx)(SectionAccessory_1.default, { children: accessory && (0, jsx_runtime_1.jsx)(components_1.Component, { component: accessory, id: id }) })] }));
+            minWidth: 0,
+            gap: '12px',
+            alignItems: 'flex-start',
+            boxSizing: 'border-box',
+        },
+        children: [
+            (0, jsx_runtime_1.jsx)(SectionContent_1.default, { children }),
+            accessory ? (0, jsx_runtime_1.jsx)(SectionAccessory_1.default, { children: (0, jsx_runtime_1.jsx)(components_1.Component, { component: accessory, id }) }) : null,
+        ]
+    }));
 }
 exports.default = DiscordSection;
-//# sourceMappingURL=Section.js.map
+//# sourceMappingURL=Section.js.map

package/dist/generator/renderers/components/section/SectionAccessory.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 function SectionAccessory({ children }) {
-    if (!children)
-        return null;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    if (!children) return null;
+    return ((0, jsx_runtime_1.jsx)("div", {
+        style: {
             display: 'flex',
-            width: '100%',
-            maxWidth: '500px',
+            flex: '0 0 auto',
             justifyContent: 'flex-end',
             alignItems: 'center',
-        }, children: children }));
+        },
+        children
+    }));
 }
 exports.default = SectionAccessory;
-//# sourceMappingURL=SectionAccessory.js.map
+//# sourceMappingURL=SectionAccessory.js.map

package/dist/generator/renderers/components/section/SectionContent.js

@@ -2,11 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 function SectionContent({ children }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", {
+        style: {
             display: 'flex',
             flexDirection: 'column',
-            width: '100%',
-        }, children: children }));
+            flex: 1,
+            minWidth: 0, // allow text to shrink/wrap inside flex parent
+            overflowWrap: 'anywhere',
+        },
+        children
+    }));
 }
 exports.default = SectionContent;
-//# sourceMappingURL=SectionContent.js.map
+//# sourceMappingURL=SectionContent.js.map