discord-html-transcripts-fix 1.1.0 → 1.2.0

package/dist/static/client.js

@@ -1,224 +1,232 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ggSansFont = exports.revealSpoiler = exports.scrollToMessage = exports.mentionPopup = exports.mentionPopupStyles = exports.backToTop = exports.transcriptUtils = void 0;
+exports.ggSansFont = exports.revealSpoiler = exports.scrollToMessage = exports.mentionPopup = exports.mentionPopupStyles = exports.backToTop = exports.transcriptUtils = exports.searchBar = exports.searchBarStyles = exports.lightbox = exports.lightboxStyles = exports.toc = exports.tocStyles = exports.i18nSwitcher = exports.i18nStyles = exports.dateSeparatorStyles = void 0;
 
-/*
-// === scrollToMessage source ===
-// Whenever the user clicks on element with data-goto attribute, scroll to that message
-document.addEventListener('click', (e) => {
-  const target = e.target;
-  if(!target) return;
-  const goto = target?.getAttribute('data-goto');
-  if (goto) {
-    const message = document.getElementById(`m-${goto}`);
-    if (message) {
-      message.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      message.style.backgroundColor = 'rgba(148, 156, 247, 0.1)';
-      message.style.transition = 'background-color 0.5s ease';
-      setTimeout(() => { message.style.backgroundColor = 'transparent'; }, 1000);
-    } else {
-      console.warn(`Message ${goto} not found.`);
-    }
-  }
-});
-*/
-exports.scrollToMessage = 'document.addEventListener("click",t=>{let e=t.target;if(!e)return;let o=e?.getAttribute("data-goto");if(o){let r=document.getElementById(`m-${o}`);r?(r.scrollIntoView({behavior:"smooth",block:"center"}),r.style.backgroundColor="rgba(148, 156, 247, 0.1)",r.style.transition="background-color 0.5s ease",setTimeout(()=>{r.style.backgroundColor="transparent"},1e3)):console.warn("Message ${goto} not found.")}});';
+// ===========================================================================
+// scrollToMessage — fixed stale ${goto} template
+// ===========================================================================
+exports.scrollToMessage = `document.addEventListener('click',function(e){var t=e.target;if(!t)return;var g=t.getAttribute&&t.getAttribute('data-goto');if(!g)return;var r=document.getElementById('m-'+g);if(r){r.scrollIntoView({behavior:'smooth',block:'center'});r.style.backgroundColor='rgba(148,156,247,0.15)';r.style.transition='background-color 0.5s ease';setTimeout(function(){r.style.backgroundColor='transparent'},1200);}else{console.warn('Message '+g+' not found.');}});`;
 
-exports.revealSpoiler = 'const s=document.querySelectorAll(".discord-spoiler");s.forEach(s=>s.addEventListener("click",()=>{if(s.classList.contains("discord-spoiler")){s.classList.remove("discord-spoiler");s.classList.add("discord-spoiler--revealed");}}));';
+exports.revealSpoiler = `var s=document.querySelectorAll('.discord-spoiler');s.forEach(function(s){s.addEventListener('click',function(){if(s.classList.contains('discord-spoiler')){s.classList.remove('discord-spoiler');s.classList.add('discord-spoiler--revealed');}});});`;
 
-// ============================================================================
-// Mention popup: click on a user/role/channel mention to see detailed info
-// Reads from globalThis.$discordMessage.{users,roles,channels,profiles}.
-// ============================================================================
-exports.mentionPopup = `(function(){
-  var DATA = function(){ return (typeof globalThis !== 'undefined' && globalThis.$discordMessage) || {}; };
-  function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g, function(c){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]; }); }
-  function fmt(iso){ if(!iso) return ''; try { var d = new Date(iso); return isNaN(d.getTime()) ? '' : d.toLocaleString('de-DE',{dateStyle:'medium', timeStyle:'short'}); } catch(_){ return ''; } }
+// ===========================================================================
+// i18n — default dictionaries, used by both server-side renderers and client-side scripts
+// ===========================================================================
+const defaultDicts = {
+    en: {
+        edited: 'edited',
+        editedAt: 'Edited at {time}',
+        joined: 'joined the server',
+        pinned: 'pinned a message to this channel.',
+        boosted: 'boosted the server!',
+        threadStarted: 'started a thread:',
+        changedChannelName: 'changed the channel name:',
+        changedChannelIcon: 'changed the channel icon.',
+        usedCommand: 'used',
+        startedCall: 'started a call.',
+        addedFollow: 'added {target} to follow this channel.',
+        left: 'left.',
+        autoModBlocked: 'AutoMod blocked a message.',
+        serverAlert: 'Server safety alert.',
+        pollEnded: 'A poll ended.',
+        roleSubPurchased: 'subscribed to {role}!',
+        forwardedFrom: 'Forwarded from',
+        searchPlaceholder: 'Search transcript…',
+        ofMatches: 'of',
+        noMatches: 'no matches',
+        backToTop: 'Back to top',
+        tocTitle: 'Participants',
+        statsMessages: '{n} messages',
+        statsParticipants: '{n} participants',
+        statsImages: '{n} images',
+        crossServerReply: 'Message from another server',
+        appBadge: 'APP',
+        botBadge: 'BOT',
+        editHistoryTitle: 'Edit history',
+        editHistoryAt: 'at',
+        voiceMessage: 'Voice message',
+        forwardedMessage: 'Forwarded',
+        languageLabel: 'Language',
+        threadArchived: 'Archived',
+        threadLocked: 'Locked',
+        suppressedEmbeds: '(embeds hidden)',
+    },
+    de: {
+        edited: 'bearbeitet',
+        editedAt: 'Bearbeitet am {time}',
+        joined: 'ist dem Server beigetreten',
+        pinned: 'hat eine Nachricht angepinnt.',
+        boosted: 'hat den Server geboostet!',
+        threadStarted: 'hat einen Thread gestartet:',
+        changedChannelName: 'hat den Channel-Namen geändert:',
+        changedChannelIcon: 'hat das Channel-Icon geändert.',
+        usedCommand: 'hat',
+        startedCall: 'hat einen Anruf gestartet.',
+        addedFollow: 'hat {target} hinzugefügt, um diesem Channel zu folgen.',
+        left: 'hat den Channel verlassen.',
+        autoModBlocked: 'AutoMod hat eine Nachricht blockiert.',
+        serverAlert: 'Sicherheitswarnung.',
+        pollEnded: 'Eine Umfrage wurde beendet.',
+        roleSubPurchased: 'hat {role} abonniert!',
+        forwardedFrom: 'Weitergeleitet von',
+        searchPlaceholder: 'Im Transcript suchen…',
+        ofMatches: 'von',
+        noMatches: 'keine Treffer',
+        backToTop: 'Nach oben',
+        tocTitle: 'Teilnehmer',
+        statsMessages: '{n} Nachrichten',
+        statsParticipants: '{n} Teilnehmer',
+        statsImages: '{n} Bilder',
+        crossServerReply: 'Nachricht von einem anderen Server',
+        appBadge: 'APP',
+        botBadge: 'BOT',
+        editHistoryTitle: 'Bearbeitungs-Verlauf',
+        editHistoryAt: 'am',
+        voiceMessage: 'Sprachnachricht',
+        forwardedMessage: 'Weitergeleitet',
+        languageLabel: 'Sprache',
+        threadArchived: 'Archiviert',
+        threadLocked: 'Gesperrt',
+        suppressedEmbeds: '(Embeds versteckt)',
+    },
+};
+
+function getDict(lang) {
+    if (lang && defaultDicts[lang]) return defaultDicts[lang];
+    return defaultDicts.en;
+}
+exports.getDict = getDict;
+exports.defaultDicts = defaultDicts;
 
-  var popup = null;
-  function ensure(){
-    if (popup) return popup;
-    popup = document.createElement('div');
-    popup.className = 'dht-popup';
-    popup.innerHTML = '<div class="dht-popup-body"></div><button type="button" class="dht-popup-close" aria-label="Schliessen">&times;</button>';
-    document.body.appendChild(popup);
-    popup.querySelector('.dht-popup-close').addEventListener('click', hide);
-    document.addEventListener('click', function(e){
-      if (!popup || popup.style.display !== 'block') return;
-      if (popup.contains(e.target)) return;
-      if (e.target.closest && e.target.closest('[data-mention-id]')) return;
-      hide();
-    });
-    document.addEventListener('keydown', function(e){ if (e.key === 'Escape') hide(); });
-    window.addEventListener('resize', hide);
-    return popup;
-  }
-  function hide(){ if (popup) popup.style.display = 'none'; }
-  function showAt(el, html){
-    var p = ensure();
-    p.querySelector('.dht-popup-body').innerHTML = html;
-    p.style.display = 'block';
-    var r = el.getBoundingClientRect();
-    var pr = p.getBoundingClientRect();
-    var pad = 8;
-    var top = r.bottom + 6;
-    var left = r.left;
-    if (top + pr.height > window.innerHeight - pad) top = Math.max(pad, r.top - pr.height - 6);
-    if (left + pr.width > window.innerWidth - pad) left = Math.max(pad, window.innerWidth - pr.width - pad);
-    if (left < pad) left = pad;
-    p.style.top = top + 'px';
-    p.style.left = left + 'px';
-  }
-  function rolePill(role){
-    var c = role && role.color ? role.color : '#5865F2';
-    return '<span class="dht-role-pill" style="--dht-role:' + esc(c) + ';">' + esc(role && role.name ? role.name : '@role') + '</span>';
-  }
-  function userHtml(id){
-    var d = DATA();
-    var u = (d.users && d.users[id]) || null;
-    var p = (d.profiles && d.profiles[id]) || null;
-    if (!u && !p) return '<i>Unbekannter User</i><div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
-    var name = (u && (u.displayName || u.username)) || (p && p.author) || 'Unknown';
-    var username = u && u.username ? '@' + u.username : '';
-    var avatar = (u && u.avatar) || (p && p.avatar) || '';
-    var color = (u && u.bannerColor) || (p && p.roleColor) || '#dbdee1';
-    var bot = (u && u.bot) || (p && p.bot);
-    var roles = u && Array.isArray(u.roles) && u.roles.length ? u.roles.map(rolePill).join('') : '';
-    var joinedAt = u && u.joinedAt ? fmt(u.joinedAt) : '';
-    var createdAt = u && u.createdAt ? fmt(u.createdAt) : '';
-    return ''
-      + '<div class="dht-popup-head">'
-      +   (avatar ? '<img class="dht-popup-avatar" src="' + esc(avatar) + '" alt="">' : '<div class="dht-popup-avatar dht-popup-avatar--ph"></div>')
-      +   '<div class="dht-popup-headtext">'
-      +     '<div class="dht-popup-name" style="color:' + esc(color) + ';">' + esc(name) + (bot ? '<span class="dht-popup-badge">BOT</span>' : '') + '</div>'
-      +     (username ? '<div class="dht-popup-sub">' + esc(username) + '</div>' : '')
-      +   '</div>'
-      + '</div>'
-      + (roles ? '<div class="dht-popup-section"><div class="dht-popup-label">Rollen</div><div class="dht-popup-roles">' + roles + '</div></div>' : '')
-      + (joinedAt ? '<div class="dht-popup-row"><span class="dht-popup-label">Server seit</span><span>' + esc(joinedAt) + '</span></div>' : '')
-      + (createdAt ? '<div class="dht-popup-row"><span class="dht-popup-label">Account seit</span><span>' + esc(createdAt) + '</span></div>' : '')
-      + '<div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
-  }
-  function roleHtml(id){
-    var r = (DATA().roles || {})[id];
-    if (!r) return '<i>Unbekannte Rolle</i><div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
-    var color = r.color || '#dbdee1';
-    return ''
-      + '<div class="dht-popup-head">'
-      +   '<div class="dht-popup-rolemark" style="background:' + esc(color) + ';"></div>'
-      +   '<div class="dht-popup-headtext">'
-      +     '<div class="dht-popup-name" style="color:' + esc(color) + ';">@' + esc(r.name) + '</div>'
-      +     (r.color ? '<div class="dht-popup-sub"><code>' + esc(r.color) + '</code></div>' : '')
-      +   '</div>'
-      + '</div>'
-      + (r.memberCount != null ? '<div class="dht-popup-row"><span class="dht-popup-label">Mitglieder</span><span>' + esc(r.memberCount) + '</span></div>' : '')
-      + (r.position != null ? '<div class="dht-popup-row"><span class="dht-popup-label">Position</span><span>' + esc(r.position) + '</span></div>' : '')
-      + (r.hoist ? '<div class="dht-popup-row"><span class="dht-popup-label">Hoisted</span><span>Ja</span></div>' : '')
-      + (r.mentionable ? '<div class="dht-popup-row"><span class="dht-popup-label">Erwähnbar</span><span>Ja</span></div>' : '')
-      + (r.managed ? '<div class="dht-popup-row"><span class="dht-popup-label">Verwaltet</span><span>Bot/Integration</span></div>' : '')
-      + '<div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
-  }
-  function channelHtml(id){
-    var c = (DATA().channels || {})[id];
-    if (!c) return '<i>Channel</i><div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
-    return ''
-      + '<div class="dht-popup-head">'
-      +   '<div class="dht-popup-rolemark" style="background:#5865F2;">#</div>'
-      +   '<div class="dht-popup-headtext">'
-      +     '<div class="dht-popup-name">#' + esc(c.name) + '</div>'
-      +     (c.parent ? '<div class="dht-popup-sub">in ' + esc(c.parent) + '</div>' : '')
-      +   '</div>'
-      + '</div>'
-      + (c.topic ? '<div class="dht-popup-section"><div class="dht-popup-label">Topic</div><div>' + esc(c.topic) + '</div></div>' : '')
-      + (c.nsfw ? '<div class="dht-popup-row"><span class="dht-popup-label">NSFW</span><span>Ja</span></div>' : '')
-      + '<div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
-  }
-  document.addEventListener('click', function(e){
-    var el = e.target && e.target.closest ? e.target.closest('[data-mention-id]') : null;
-    if (!el) return;
-    var t = el.getAttribute('data-mention-type');
-    var id = el.getAttribute('data-mention-id');
-    if (!t || !id) return;
-    e.preventDefault();
-    e.stopPropagation();
-    var html = '';
-    if (t === 'user') html = userHtml(id);
-    else if (t === 'role') html = roleHtml(id);
-    else if (t === 'channel') html = channelHtml(id);
-    else return;
-    showAt(el, html);
-  });
+// ===========================================================================
+// mentionPopup — clickable user/role/channel pills
+// Reads from window.$discordMessage.{users,roles,channels,profiles}.
+// Uses safe color validation to block CSS injection.
+// ===========================================================================
+exports.mentionPopup = `(function(){
+  function DATA(){return (typeof globalThis!=='undefined' && globalThis.$discordMessage)||{};}
+  function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];});}
+  function safeColor(c,fb){fb=fb||'#5865F2';return typeof c==='string' && /^#[0-9a-fA-F]{3,8}$/.test(c) ? c : fb;}
+  function t(key){var d=DATA();var lang=d.lang||'en';var dict=(d.i18n&&d.i18n[lang])||(d.i18n&&d.i18n.en)||{};return dict[key]||key;}
+  function fmt(iso){if(!iso)return '';try{var d=new Date(iso);return isNaN(d.getTime())?'':d.toLocaleString(DATA().lang==='de'?'de-DE':'en-US',{dateStyle:'medium',timeStyle:'short'});}catch(_){return '';}}
+  var popup=null;
+  function ensure(){if(popup)return popup;popup=document.createElement('div');popup.className='dht-popup';popup.innerHTML='<div class="dht-popup-body"></div><button type="button" class="dht-popup-close" aria-label="Close">&times;</button>';document.body.appendChild(popup);popup.querySelector('.dht-popup-close').addEventListener('click',hide);document.addEventListener('click',function(e){if(!popup||popup.style.display!=='block')return;if(popup.contains(e.target))return;if(e.target.closest&&e.target.closest('[data-mention-id]'))return;hide();});document.addEventListener('keydown',function(e){if(e.key==='Escape')hide();});window.addEventListener('resize',hide);return popup;}
+  function hide(){if(popup)popup.style.display='none';}
+  function showAt(el,html){var p=ensure();p.querySelector('.dht-popup-body').innerHTML=html;p.style.display='block';var r=el.getBoundingClientRect();var pr=p.getBoundingClientRect();var pad=8;var top=r.bottom+6;var left=r.left;if(top+pr.height>window.innerHeight-pad)top=Math.max(pad,r.top-pr.height-6);if(left+pr.width>window.innerWidth-pad)left=Math.max(pad,window.innerWidth-pr.width-pad);if(left<pad)left=pad;p.style.top=top+'px';p.style.left=left+'px';}
+  function rolePill(role){var c=safeColor(role&&role.color);return '<span class="dht-role-pill" style="--dht-role:'+c+';">'+esc(role&&role.name?role.name:'@role')+'</span>';}
+  function userHtml(id){var d=DATA();var u=(d.users&&d.users[id])||null;var p=(d.profiles&&d.profiles[id])||null;if(!u&&!p)return '<i>?</i><div class="dht-popup-id">ID: <code>'+esc(id)+'</code></div>';var name=(u&&(u.displayName||u.username))||(p&&p.author)||'Unknown';var username=u&&u.username?'@'+u.username:'';var avatar=(u&&u.avatar)||(p&&p.avatar)||'';var color=safeColor((u&&u.bannerColor)||(p&&p.roleColor),'#dbdee1');var bot=(u&&u.bot)||(p&&p.bot);var roles=u&&Array.isArray(u.roles)&&u.roles.length?u.roles.map(rolePill).join(''):'';var joinedAt=u&&u.joinedAt?fmt(u.joinedAt):'';var createdAt=u&&u.createdAt?fmt(u.createdAt):'';var labels=DATA().i18n&&(DATA().i18n[DATA().lang]||DATA().i18n.en)||{};return ''+'<div class="dht-popup-head">'+(avatar?'<img class="dht-popup-avatar" src="'+esc(avatar)+'" alt="">':'<div class="dht-popup-avatar dht-popup-avatar--ph"></div>')+'<div class="dht-popup-headtext"><div class="dht-popup-name" style="color:'+color+';">'+esc(name)+(bot?'<span class="dht-popup-badge">'+esc(t('botBadge'))+'</span>':'')+'</div>'+(username?'<div class="dht-popup-sub">'+esc(username)+'</div>':'')+'</div></div>'+(roles?'<div class="dht-popup-section"><div class="dht-popup-label">Roles</div><div class="dht-popup-roles">'+roles+'</div></div>':'')+(joinedAt?'<div class="dht-popup-row"><span class="dht-popup-label">Server</span><span>'+esc(joinedAt)+'</span></div>':'')+(createdAt?'<div class="dht-popup-row"><span class="dht-popup-label">Account</span><span>'+esc(createdAt)+'</span></div>':'')+'<div class="dht-popup-id">ID: <code>'+esc(id)+'</code></div>';}
+  function roleHtml(id){var r=(DATA().roles||{})[id];if(!r)return '<i>?</i><div class="dht-popup-id">ID: <code>'+esc(id)+'</code></div>';var color=safeColor(r.color,'#dbdee1');return '<div class="dht-popup-head"><div class="dht-popup-rolemark" style="background:'+color+';"></div><div class="dht-popup-headtext"><div class="dht-popup-name" style="color:'+color+';">@'+esc(r.name)+'</div>'+(r.color?'<div class="dht-popup-sub"><code>'+esc(r.color)+'</code></div>':'')+'</div></div>'+(r.memberCount!=null?'<div class="dht-popup-row"><span class="dht-popup-label">Members</span><span>'+esc(r.memberCount)+'</span></div>':'')+(r.position!=null?'<div class="dht-popup-row"><span class="dht-popup-label">Position</span><span>'+esc(r.position)+'</span></div>':'')+(r.hoist?'<div class="dht-popup-row"><span class="dht-popup-label">Hoisted</span><span>Yes</span></div>':'')+(r.mentionable?'<div class="dht-popup-row"><span class="dht-popup-label">Mentionable</span><span>Yes</span></div>':'')+(r.managed?'<div class="dht-popup-row"><span class="dht-popup-label">Managed</span><span>Bot/Integration</span></div>':'')+'<div class="dht-popup-id">ID: <code>'+esc(id)+'</code></div>';}
+  function channelHtml(id){var c=(DATA().channels||{})[id];if(!c)return '<i>Channel</i><div class="dht-popup-id">ID: <code>'+esc(id)+'</code></div>';return '<div class="dht-popup-head"><div class="dht-popup-rolemark" style="background:#5865F2;">#</div><div class="dht-popup-headtext"><div class="dht-popup-name">#'+esc(c.name)+'</div>'+(c.parent?'<div class="dht-popup-sub">in '+esc(c.parent)+'</div>':'')+'</div></div>'+(c.topic?'<div class="dht-popup-section"><div class="dht-popup-label">Topic</div><div>'+esc(c.topic)+'</div></div>':'')+(c.nsfw?'<div class="dht-popup-row"><span class="dht-popup-label">NSFW</span><span>Yes</span></div>':'')+'<div class="dht-popup-id">ID: <code>'+esc(id)+'</code></div>';}
+  document.addEventListener('click',function(e){var el=e.target&&e.target.closest?e.target.closest('[data-mention-id]'):null;if(!el)return;var tp=el.getAttribute('data-mention-type');var id=el.getAttribute('data-mention-id');if(!tp||!id)return;e.preventDefault();e.stopPropagation();var html='';if(tp==='user')html=userHtml(id);else if(tp==='role')html=roleHtml(id);else if(tp==='channel')html=channelHtml(id);else return;showAt(el,html);});
 })();`;
 
-// ============================================================================
-// Mention popup styles
-// ============================================================================
 exports.mentionPopupStyles = `
-  .dht-mention { cursor: pointer; }
-  .dht-mention:hover { filter: brightness(1.15); }
-  .dht-popup {
-    position: fixed; display: none; max-width: 340px; min-width: 240px;
-    background: #1e1f22; color: #dbdee1; border: 1px solid #2b2d31;
-    border-radius: 10px; padding: 14px 16px 12px;
-    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
-    font-family: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 14px; line-height: 1.4; z-index: 99999;
-  }
-  .dht-popup-close {
-    position: absolute; top: 6px; right: 8px; background: none; border: none;
-    color: #949ba4; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px;
-    border-radius: 4px;
-  }
-  .dht-popup-close:hover { background: rgba(255,255,255,0.06); color: #dbdee1; }
-  .dht-popup-head { display: flex; align-items: center; gap: 10px; margin-right: 18px; }
-  .dht-popup-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
-  .dht-popup-avatar--ph { background: #313338; }
-  .dht-popup-rolemark { width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
-  .dht-popup-headtext { min-width: 0; }
-  .dht-popup-name { font-weight: 600; font-size: 16px; word-break: break-word; }
-  .dht-popup-sub { font-size: 12px; color: #949ba4; word-break: break-all; }
-  .dht-popup-badge { background: #5865F2; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
-  .dht-popup-section { margin-top: 10px; }
-  .dht-popup-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; }
-  .dht-popup-label { color: #949ba4; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
-  .dht-popup-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
-  .dht-role-pill {
-    display: inline-flex; align-items: center;
-    background: color-mix(in srgb, var(--dht-role) 18%, transparent);
-    color: var(--dht-role); border: 1px solid color-mix(in srgb, var(--dht-role) 40%, transparent);
-    padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 1.5;
-  }
-  .dht-popup-id { margin-top: 10px; padding-top: 8px; border-top: 1px solid #2b2d31; font-size: 11px; color: #6e727a; }
-  .dht-popup-id code { background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 3px; }
+  .dht-mention{cursor:pointer;transition:filter .15s ease}
+  .dht-mention:hover{filter:brightness(1.15)}
+  .dht-popup{position:fixed;display:none;max-width:340px;min-width:240px;background:#1e1f22;color:#dbdee1;border:1px solid #2b2d31;border-radius:10px;padding:14px 16px 12px;box-shadow:0 12px 32px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);font-family:"gg sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.4;z-index:99999}
+  .dht-popup-close{position:absolute;top:6px;right:8px;background:none;border:none;color:#949ba4;cursor:pointer;font-size:20px;line-height:1;padding:4px 8px;border-radius:4px}
+  .dht-popup-close:hover{background:rgba(255,255,255,.06);color:#dbdee1}
+  .dht-popup-head{display:flex;align-items:center;gap:10px;margin-right:18px}
+  .dht-popup-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
+  .dht-popup-avatar--ph{background:#313338}
+  .dht-popup-rolemark{width:32px;height:32px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
+  .dht-popup-headtext{min-width:0}
+  .dht-popup-name{font-weight:600;font-size:16px;word-break:break-word}
+  .dht-popup-sub{font-size:12px;color:#949ba4;word-break:break-all}
+  .dht-popup-badge{background:#5865F2;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}
+  .dht-popup-section{margin-top:10px}
+  .dht-popup-row{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:13px}
+  .dht-popup-label{color:#949ba4;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
+  .dht-popup-roles{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
+  .dht-role-pill{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--dht-role) 18%,transparent);color:var(--dht-role);border:1px solid color-mix(in srgb,var(--dht-role) 40%,transparent);padding:1px 8px;border-radius:999px;font-size:11px;line-height:1.5}
+  .dht-popup-id{margin-top:10px;padding-top:8px;border-top:1px solid #2b2d31;font-size:11px;color:#6e727a}
+  .dht-popup-id code{background:rgba(255,255,255,.05);padding:1px 4px;border-radius:3px}
 `;
 
-// ============================================================================
-// Back-to-top floating button
-// ============================================================================
-exports.backToTop = `(function(){
-  var btn = document.createElement('button');
-  btn.className = 'dht-back-top';
-  btn.type = 'button';
-  btn.title = 'Nach oben scrollen';
-  btn.setAttribute('aria-label','Nach oben scrollen');
-  btn.innerHTML = '&#x25B2;';
-  document.body.appendChild(btn);
-  btn.addEventListener('click', function(){ window.scrollTo({ top: 0, behavior: 'smooth' }); });
-  function toggle(){ btn.style.opacity = window.scrollY > 400 ? '1' : '0'; btn.style.pointerEvents = window.scrollY > 400 ? 'auto' : 'none'; }
-  window.addEventListener('scroll', toggle, { passive: true });
-  toggle();
+// ===========================================================================
+// Back-to-top
+// ===========================================================================
+exports.backToTop = `(function(){var btn=document.createElement('button');btn.className='dht-back-top';btn.type='button';var DATA=globalThis.$discordMessage||{};var dict=(DATA.i18n&&(DATA.i18n[DATA.lang]||DATA.i18n.en))||{};btn.title=dict.backToTop||'Back to top';btn.setAttribute('aria-label',dict.backToTop||'Back to top');btn.innerHTML='&#x25B2;';document.body.appendChild(btn);btn.addEventListener('click',function(){window.scrollTo({top:0,behavior:'smooth'});});function toggle(){btn.style.opacity=window.scrollY>400?'1':'0';btn.style.pointerEvents=window.scrollY>400?'auto':'none';}window.addEventListener('scroll',toggle,{passive:true});toggle();})();`;
+exports.transcriptUtils = `.dht-back-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;border:none;background:#5865F2;color:#fff;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:9999}.dht-back-top:hover{transform:translateY(-2px)}`;
+
+// ===========================================================================
+// Search bar — Ctrl+F replacement: live highlight, x of n matches, prev/next nav
+// ===========================================================================
+exports.searchBar = `(function(){
+  var DATA=globalThis.$discordMessage||{};
+  var dict=(DATA.i18n&&(DATA.i18n[DATA.lang]||DATA.i18n.en))||{};
+  var bar=document.createElement('div');
+  bar.className='dht-search';
+  bar.innerHTML='<input type="search" class="dht-search-input" placeholder="'+(dict.searchPlaceholder||'Search…')+'"><span class="dht-search-counter">0</span><button class="dht-search-btn" data-act="prev" title="Previous">&#x25B2;</button><button class="dht-search-btn" data-act="next" title="Next">&#x25BC;</button><button class="dht-search-btn" data-act="close" title="Close">&times;</button>';
+  document.body.appendChild(bar);
+  var input=bar.querySelector('.dht-search-input');
+  var counter=bar.querySelector('.dht-search-counter');
+  var matches=[],idx=-1;
+  function clear(){matches.forEach(function(m){var p=m.parentNode;if(!p)return;var tn=document.createTextNode(m.textContent);p.replaceChild(tn,m);p.normalize();});matches=[];idx=-1;counter.textContent='0';}
+  function walk(node,re,acc){if(node.nodeType===3){var text=node.nodeValue;if(!re.test(text))return;re.lastIndex=0;var frag=document.createDocumentFragment();var last=0;var m;while((m=re.exec(text))!==null){if(m.index>last)frag.appendChild(document.createTextNode(text.slice(last,m.index)));var span=document.createElement('mark');span.className='dht-hit';span.textContent=m[0];frag.appendChild(span);acc.push(span);last=re.lastIndex;}if(last<text.length)frag.appendChild(document.createTextNode(text.slice(last)));node.parentNode.replaceChild(frag,node);}else if(node.nodeType===1){if(node.classList&&(node.classList.contains('dht-search')||node.tagName==='SCRIPT'||node.tagName==='STYLE'))return;for(var i=node.childNodes.length-1;i>=0;i--)walk(node.childNodes[i],re,acc);}}
+  function search(q){clear();if(!q||q.length<2)return;var re=new RegExp(q.replace(/[.*+?^\${}()|[\\]\\\\]/g,'\\\\$&'),'gi');walk(document.body,re,matches);if(matches.length){idx=0;goTo();}counter.textContent=matches.length?(idx+1)+' '+(dict.ofMatches||'of')+' '+matches.length:(dict.noMatches||'none');}
+  function goTo(){matches.forEach(function(m,i){m.classList.toggle('dht-hit--active',i===idx);});if(idx>=0&&matches[idx]){matches[idx].scrollIntoView({behavior:'smooth',block:'center'});counter.textContent=(idx+1)+' '+(dict.ofMatches||'of')+' '+matches.length;}}
+  input.addEventListener('input',function(){search(input.value);});
+  bar.addEventListener('click',function(e){var t=e.target;var act=t.getAttribute&&t.getAttribute('data-act');if(act==='next'){if(matches.length){idx=(idx+1)%matches.length;goTo();}}else if(act==='prev'){if(matches.length){idx=(idx-1+matches.length)%matches.length;goTo();}}else if(act==='close'){bar.classList.remove('dht-search--open');input.value='';clear();}});
+  document.addEventListener('keydown',function(e){if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='f'){e.preventDefault();bar.classList.add('dht-search--open');input.focus();input.select();}else if(e.key==='Escape'&&bar.classList.contains('dht-search--open')){bar.classList.remove('dht-search--open');input.value='';clear();}else if(e.key==='Enter'&&document.activeElement===input){if(matches.length){idx=(idx+(e.shiftKey?-1:1)+matches.length)%matches.length;goTo();}}});
 })();`;
+exports.searchBarStyles = `.dht-search{position:fixed;top:16px;right:16px;background:#1e1f22;border:1px solid #2b2d31;border-radius:8px;padding:6px 8px;display:none;align-items:center;gap:6px;z-index:99998;box-shadow:0 6px 18px rgba(0,0,0,.5);font-family:"gg sans",sans-serif;color:#dbdee1}.dht-search--open{display:flex}.dht-search-input{background:#2b2d31;color:#dbdee1;border:1px solid #2b2d31;border-radius:4px;padding:4px 8px;font-size:13px;width:220px;outline:none}.dht-search-input:focus{border-color:#5865F2}.dht-search-counter{color:#949ba4;font-size:12px;min-width:60px}.dht-search-btn{background:none;border:none;color:#dbdee1;cursor:pointer;padding:4px 6px;border-radius:4px;font-size:12px}.dht-search-btn:hover{background:rgba(255,255,255,.06)}.dht-hit{background:rgba(255,228,0,.35);color:inherit;border-radius:2px}.dht-hit--active{background:rgba(255,140,0,.7);color:#000}`;
 
-exports.transcriptUtils = `
-  .dht-back-top {
-    position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px;
-    border-radius: 50%; border: none; background: #5865F2; color: #fff;
-    font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
-    opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
-    z-index: 9999;
-  }
-  .dht-back-top:hover { transform: translateY(-2px); }
-`;
+// ===========================================================================
+// Image lightbox — click images to fullscreen, arrow keys to navigate
+// ===========================================================================
+exports.lightbox = `(function(){
+  var overlay=null,images=[],idx=0;
+  function collect(){images=Array.from(document.querySelectorAll('img')).filter(function(i){return !i.closest('.dht-popup')&&!i.classList.contains('dht-popup-avatar')&&i.naturalWidth>40;});}
+  function build(){overlay=document.createElement('div');overlay.className='dht-lightbox';overlay.innerHTML='<button class="dht-lb-close" aria-label="Close">&times;</button><button class="dht-lb-prev" aria-label="Previous">&#x2039;</button><img class="dht-lb-img" alt=""><button class="dht-lb-next" aria-label="Next">&#x203A;</button><div class="dht-lb-caption"></div>';document.body.appendChild(overlay);overlay.addEventListener('click',function(e){if(e.target===overlay||e.target.classList.contains('dht-lb-close'))close();else if(e.target.classList.contains('dht-lb-prev'))nav(-1);else if(e.target.classList.contains('dht-lb-next'))nav(1);});}
+  function open(src,alt){if(!overlay)build();collect();idx=images.findIndex(function(i){return i.src===src;});if(idx<0)idx=0;render();overlay.style.display='flex';}
+  function nav(d){if(!images.length)return;idx=(idx+d+images.length)%images.length;render();}
+  function render(){var img=images[idx];if(!img)return;overlay.querySelector('.dht-lb-img').src=img.src;overlay.querySelector('.dht-lb-caption').textContent=img.alt||'';}
+  function close(){if(overlay)overlay.style.display='none';}
+  document.addEventListener('click',function(e){var img=e.target;if(img&&img.tagName==='IMG'&&img.naturalWidth>40&&!img.closest('.dht-popup')&&!img.classList.contains('dht-popup-avatar')&&!img.closest('.dht-toc')&&!img.closest('.dht-search')){e.preventDefault();open(img.src,img.alt);}});
+  document.addEventListener('keydown',function(e){if(!overlay||overlay.style.display!=='flex')return;if(e.key==='Escape')close();else if(e.key==='ArrowLeft')nav(-1);else if(e.key==='ArrowRight')nav(1);});
+})();`;
+exports.lightboxStyles = `.dht-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100000;flex-direction:column}.dht-lb-img{max-width:90vw;max-height:80vh;object-fit:contain;box-shadow:0 4px 20px rgba(0,0,0,.6);border-radius:6px}.dht-lb-close,.dht-lb-prev,.dht-lb-next{position:absolute;background:rgba(0,0,0,.4);color:#fff;border:none;cursor:pointer;font-size:28px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}.dht-lb-close:hover,.dht-lb-prev:hover,.dht-lb-next:hover{background:rgba(255,255,255,.15)}.dht-lb-close{top:20px;right:20px}.dht-lb-prev{left:20px;top:50%;transform:translateY(-50%)}.dht-lb-next{right:20px;top:50%;transform:translateY(-50%)}.dht-lb-caption{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#dbdee1;font-family:"gg sans",sans-serif;font-size:14px;padding:6px 14px;background:rgba(0,0,0,.5);border-radius:4px;max-width:80%}`;
+
+// ===========================================================================
+// TOC / Sidebar — list participants, click jumps to their first message
+// ===========================================================================
+exports.toc = `(function(){
+  var DATA=globalThis.$discordMessage||{};
+  var dict=(DATA.i18n&&(DATA.i18n[DATA.lang]||DATA.i18n.en))||{};
+  var users=DATA.users||DATA.profiles||{};
+  var ids=Object.keys(users);
+  if(ids.length===0)return;
+  function firstMessageOf(uid){var m=document.querySelector('discord-message[profile="'+uid+'"]');return m?m.id:null;}
+  var btn=document.createElement('button');btn.className='dht-toc-toggle';btn.type='button';btn.title=dict.tocTitle||'Participants';btn.setAttribute('aria-label',dict.tocTitle||'Participants');btn.innerHTML='&#x2630;';document.body.appendChild(btn);
+  var panel=document.createElement('aside');panel.className='dht-toc';
+  var html='<header><h3>'+(dict.tocTitle||'Participants')+'</h3><button class="dht-toc-close" aria-label="Close">&times;</button></header><ul>';
+  ids.sort(function(a,b){var ua=users[a],ub=users[b];var na=(ua.displayName||ua.author||ua.username||'').toLowerCase();var nb=(ub.displayName||ub.author||ub.username||'').toLowerCase();return na.localeCompare(nb);}).forEach(function(id){var u=users[id];var name=u.displayName||u.author||u.username||'Unknown';var avatar=u.avatar||'';var color=(typeof u.bannerColor==='string'&&/^#[0-9a-f]{3,8}$/i.test(u.bannerColor))?u.bannerColor:(typeof u.roleColor==='string'&&/^#[0-9a-f]{3,8}$/i.test(u.roleColor)?u.roleColor:'#dbdee1');html+='<li data-uid="'+id+'">'+(avatar?'<img src="'+avatar+'" alt="">':'<span class="dht-toc-ph"></span>')+'<span class="dht-toc-name" style="color:'+color+'">'+name.replace(/[&<>]/g,function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;'})[c];})+'</span></li>';});
+  html+='</ul>';panel.innerHTML=html;document.body.appendChild(panel);
+  btn.addEventListener('click',function(){panel.classList.toggle('dht-toc--open');});
+  panel.querySelector('.dht-toc-close').addEventListener('click',function(){panel.classList.remove('dht-toc--open');});
+  panel.querySelectorAll('li').forEach(function(li){li.addEventListener('click',function(){var uid=li.getAttribute('data-uid');var mid=firstMessageOf(uid);if(mid){var el=document.getElementById(mid);if(el){el.scrollIntoView({behavior:'smooth',block:'center'});el.style.backgroundColor='rgba(148,156,247,0.18)';setTimeout(function(){el.style.backgroundColor='transparent';},1500);}}});});
+})();`;
+exports.tocStyles = `.dht-toc-toggle{position:fixed;top:16px;left:16px;width:40px;height:40px;border-radius:50%;border:none;background:#2b2d31;color:#fff;font-size:16px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:9998}.dht-toc-toggle:hover{background:#5865F2}.dht-toc{position:fixed;top:0;left:-320px;width:300px;height:100vh;background:#1e1f22;border-right:1px solid #2b2d31;transition:left .25s ease;z-index:9997;overflow-y:auto;font-family:"gg sans",sans-serif;color:#dbdee1;padding:16px}.dht-toc--open{left:0}.dht-toc header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #2b2d31}.dht-toc h3{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:#949ba4}.dht-toc-close{background:none;border:none;color:#949ba4;cursor:pointer;font-size:22px;line-height:1}.dht-toc ul{list-style:none;padding:0;margin:0}.dht-toc li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:14px}.dht-toc li:hover{background:rgba(255,255,255,.04)}.dht-toc li img,.dht-toc-ph{width:28px;height:28px;border-radius:50%;flex:none}.dht-toc-ph{background:#313338}.dht-toc-name{flex:1;font-weight:500}`;
+
+// ===========================================================================
+// Language switcher
+// ===========================================================================
+exports.i18nSwitcher = `(function(){
+  var DATA=globalThis.$discordMessage||{};
+  if(!DATA.i18n)return;
+  var langs=Object.keys(DATA.i18n);
+  if(langs.length<2)return;
+  var current=DATA.lang||'en';
+  function apply(lang){DATA.lang=lang;var dict=DATA.i18n[lang]||DATA.i18n.en||{};document.querySelectorAll('[data-i18n]').forEach(function(el){var key=el.getAttribute('data-i18n');var raw=dict[key];if(typeof raw!=='string')return;var params=el.getAttribute('data-i18n-params');if(params){try{var obj=JSON.parse(params);Object.keys(obj).forEach(function(k){raw=raw.replace('{'+k+'}',obj[k]);});}catch(_){}}el.textContent=raw;});}
+  var wrap=document.createElement('div');wrap.className='dht-langs';langs.forEach(function(l){var b=document.createElement('button');b.type='button';b.textContent=l.toUpperCase();b.className='dht-lang'+(l===current?' dht-lang--active':'');b.addEventListener('click',function(){wrap.querySelectorAll('.dht-lang').forEach(function(x){x.classList.remove('dht-lang--active');});b.classList.add('dht-lang--active');apply(l);});wrap.appendChild(b);});document.body.appendChild(wrap);
+})();`;
+exports.i18nStyles = `.dht-langs{position:fixed;bottom:24px;left:24px;display:flex;gap:4px;background:#1e1f22;border:1px solid #2b2d31;border-radius:6px;padding:4px;z-index:9998;font-family:"gg sans",sans-serif}.dht-lang{background:none;border:none;color:#949ba4;cursor:pointer;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600}.dht-lang:hover{color:#dbdee1}.dht-lang--active{background:#5865F2;color:#fff}`;
+
+// ===========================================================================
+// Date separators (server renders <div class="dht-date-sep">…</div>)
+// ===========================================================================
+exports.dateSeparatorStyles = `.dht-date-sep{display:flex;align-items:center;gap:12px;margin:24px 16px 8px;color:#b5bac1;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.dht-date-sep::before,.dht-date-sep::after{content:"";flex:1;height:1px;background:#3f4248}`;
 
 exports.ggSansFont = '@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-400.woff2);font-family:"gg sans";font-weight:400;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-500.woff2);font-family:"gg sans";font-weight:500;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-600.woff2);font-family:"gg sans";font-weight:600;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-700.woff2);font-family:"gg sans";font-weight:700;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-800.woff2);font-family:"gg sans";font-weight:800;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-400.woff2);font-family:"gg sans";font-weight:400;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-500.woff2);font-family:"gg sans";font-weight:500;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-600.woff2);font-family:"gg sans";font-weight:600;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-700.woff2);font-family:"gg sans";font-weight:700;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-800.woff2);font-family:"gg sans";font-weight:800;font-style:italic}';
 //# sourceMappingURL=client.js.map

package/dist/types.js

@@ -13,5 +13,6 @@ var ExportReturnType;
     ExportReturnType["Buffer"] = "buffer";
     ExportReturnType["String"] = "string";
     ExportReturnType["Attachment"] = "attachment";
+    ExportReturnType["Stream"] = "stream";
 })(ExportReturnType || (exports.ExportReturnType = ExportReturnType = {}));
 //# sourceMappingURL=types.js.map