tacel-chat 1.2.0

package/themes.js

@@ -0,0 +1,495 @@
+/**
+ * Built-in preset themes for the Tacel Chat Module.
+ * 30 themes — light, dark, colorful, professional, and app-specific palettes.
+ *
+ * Usage:
+ *   // Use a preset by name
+ *   chat.initialize(container, { theme: 'dark' });
+ *
+ *   // Extend a preset with overrides
+ *   const { themes } = require('tacel-chat');
+ *   chat.initialize(container, {
+ *     theme: { ...themes.dark, '--chat-accent': '#ff6600' }
+ *   });
+ *
+ *   // Fully custom (object of CSS variables)
+ *   chat.initialize(container, { theme: { '--chat-bg': '#111', ... } });
+ */
+
+function _t(o) {
+  const a = o.accent;
+  const ar = _hex2rgb(a);
+  return {
+    '--chat-bg':                    o.bg,
+    '--chat-sidebar-bg':            o.sidebarBg || o.bg,
+    '--chat-border':                o.border,
+    '--chat-shadow':                o.shadow || '0 2px 8px rgba(0,0,0,0.08)',
+    '--chat-text':                  o.text,
+    '--chat-text-secondary':        o.textSec,
+    '--chat-text-muted':            o.textMuted,
+    '--chat-accent':                a,
+    '--chat-accent-transparent':    o.accentT || `rgba(${ar}, 0.1)`,
+    '--chat-accent-gradient':       o.accentGrad || `linear-gradient(135deg, ${a}, ${o.accentDark || a})`,
+    '--chat-own-bubble-bg':         o.ownBg || `rgba(${ar}, 0.1)`,
+    '--chat-own-bubble-border':     o.ownBorder || `rgba(${ar}, 0.2)`,
+    '--chat-own-bubble-text':       o.ownText || o.text,
+    '--chat-other-bubble-bg':       o.otherBg || 'rgba(0,0,0,0.03)',
+    '--chat-other-bubble-border':   o.otherBorder || 'rgba(0,0,0,0.08)',
+    '--chat-other-bubble-text':     o.otherText || o.text,
+    '--chat-date-divider-bg':       o.dividerBg || 'rgba(0,0,0,0.03)',
+    '--chat-date-divider-text':     o.dividerText || a,
+    '--chat-date-divider-border':   o.dividerBorder || o.border,
+    '--chat-avatar-bg':             o.avatarBg || `rgba(${ar}, 0.1)`,
+    '--chat-avatar-text':           o.avatarText || a,
+    '--chat-avatar-team-bg':        o.avatarTeamBg || `rgba(${ar}, 0.15)`,
+    '--chat-online-color':          o.online || '#4caf50',
+    '--chat-online-glow':           o.onlineGlow || 'rgba(76,175,80,0.3)',
+    '--chat-offline-color':         o.offline || 'rgba(0,0,0,0.3)',
+    '--chat-unread-bg':             o.unreadBg || a,
+    '--chat-unread-text':           o.unreadText || '#ffffff',
+    '--chat-input-bg':              o.inputBg || 'rgba(0,0,0,0.02)',
+    '--chat-input-border':          o.inputBorder || o.border,
+    '--chat-input-focus-border':    o.inputFocus || a,
+    '--chat-send-bg':               o.sendBg || o.accentGrad || `linear-gradient(135deg, ${a}, ${o.accentDark || a})`,
+    '--chat-send-text':             o.sendText || '#ffffff',
+    '--chat-seen-color':            o.seenColor || a,
+    '--chat-mention-bg':            o.mentionBg || `rgba(${ar}, 0.15)`,
+    '--chat-mention-text':          o.mentionText || a,
+    '--chat-mention-self-bg':       o.mentionSelfBg || 'rgba(255,193,7,0.25)',
+    '--chat-mention-self-text':     o.mentionSelfText || '#f57f17',
+    '--chat-attachment-bg':         o.attachBg || 'rgba(0,0,0,0.04)',
+    '--chat-attachment-btn-bg':     o.attachBtnBg || '#f0f0f0',
+    '--chat-attachment-btn-hover':  o.attachBtnHover || '#e0e0e0',
+    '--chat-attachment-active-bg':  o.attachActiveBg || '#4caf50',
+    '--chat-attachment-active-text': o.attachActiveText || '#ffffff',
+    '--chat-link-color':            o.linkColor || a,
+    '--chat-tab-bg':                o.tabBg || '#f5f5f5',
+    '--chat-tab-active-bg':         o.tabActiveBg || o.bg,
+    '--chat-tab-active-color':      o.tabActiveColor || a,
+    '--chat-tab-active-border':     o.tabActiveBorder || a,
+    '--chat-tab-badge-bg':          o.tabBadgeBg || '#ff5252',
+    '--chat-tab-badge-text':        o.tabBadgeText || '#ffffff',
+    '--chat-modal-backdrop':        o.modalBackdrop || 'rgba(0,0,0,0.5)',
+    '--chat-modal-bg':              o.modalBg || o.bg,
+    '--chat-modal-shadow':          o.modalShadow || '0 8px 32px rgba(0,0,0,0.2)',
+    '--chat-spinner-color':         o.spinnerColor || a,
+    '--chat-spinner-track':         o.spinnerTrack || 'rgba(0,0,0,0.08)',
+    '--chat-error-color':           o.errorColor || '#e74c3c',
+    '--chat-current-user-bg':       o.currentUserBg || `rgba(${ar}, 0.08)`,
+    '--chat-current-user-border':   o.currentUserBorder || `rgba(${ar}, 0.15)`,
+    '--chat-current-user-avatar':   o.currentUserAvatar || '#27ae60',
+  };
+}
+
+function _hex2rgb(hex) {
+  hex = hex.replace('#', '');
+  if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+  const n = parseInt(hex, 16);
+  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
+}
+
+const THEMES = {
+
+  // ════════════════════════════════════════════
+  //  1. DEFAULT — CSS defaults, no overrides
+  // ════════════════════════════════════════════
+  default: {},
+
+  // ════════════════════════════════════════════
+  //  2. LIGHT — Clean white
+  // ════════════════════════════════════════════
+  light: _t({
+    bg: '#ffffff', border: 'rgba(0,0,0,0.1)', text: '#333333', textSec: '#666666', textMuted: '#999999',
+    accent: '#1976d2', accentDark: '#1565c0',
+  }),
+
+  // ════════════════════════════════════════════
+  //  3. DARK — Deep charcoal
+  // ════════════════════════════════════════════
+  dark: _t({
+    bg: '#1e1e2e', sidebarBg: '#181825', border: 'rgba(255,255,255,0.08)',
+    shadow: '0 2px 8px rgba(0,0,0,0.3)',
+    text: '#e0e0e0', textSec: '#a0a0a0', textMuted: '#666666',
+    accent: '#89b4fa', accentDark: '#74a8f7',
+    ownBg: 'rgba(137,180,250,0.12)', ownBorder: 'rgba(137,180,250,0.2)', ownText: '#e0e0e0',
+    otherBg: 'rgba(255,255,255,0.04)', otherBorder: 'rgba(255,255,255,0.08)', otherText: '#e0e0e0',
+    dividerBg: 'rgba(255,255,255,0.04)', dividerBorder: 'rgba(255,255,255,0.08)',
+    avatarBg: 'rgba(137,180,250,0.15)',
+    offline: 'rgba(255,255,255,0.2)',
+    inputBg: 'rgba(255,255,255,0.05)', inputBorder: 'rgba(255,255,255,0.1)',
+    attachBg: 'rgba(255,255,255,0.06)', attachBtnBg: 'rgba(255,255,255,0.08)', attachBtnHover: 'rgba(255,255,255,0.12)',
+    tabBg: '#181825', tabActiveBg: '#1e1e2e',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#1e1e2e', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(255,255,255,0.08)',
+    currentUserBg: 'rgba(137,180,250,0.08)', currentUserBorder: 'rgba(137,180,250,0.15)', currentUserAvatar: '#a6e3a1',
+  }),
+
+  // ════════════════════════════════════════════
+  //  4. MIDNIGHT — Deep blue-black
+  // ════════════════════════════════════════════
+  midnight: _t({
+    bg: '#0f0f1a', sidebarBg: '#0a0a14', border: 'rgba(100,120,200,0.15)',
+    shadow: '0 2px 8px rgba(0,0,0,0.4)',
+    text: '#c8cdf0', textSec: '#8890b5', textMuted: '#555a7a',
+    accent: '#6c7bd4', accentDark: '#5a69c0',
+    ownBg: 'rgba(108,123,212,0.15)', ownBorder: 'rgba(108,123,212,0.25)', ownText: '#c8cdf0',
+    otherBg: 'rgba(255,255,255,0.03)', otherBorder: 'rgba(100,120,200,0.1)', otherText: '#c8cdf0',
+    dividerBg: 'rgba(100,120,200,0.06)', dividerBorder: 'rgba(100,120,200,0.1)',
+    offline: 'rgba(200,205,240,0.2)',
+    inputBg: 'rgba(100,120,200,0.06)', inputBorder: 'rgba(100,120,200,0.15)',
+    attachBtnBg: 'rgba(100,120,200,0.1)', attachBtnHover: 'rgba(100,120,200,0.18)',
+    tabBg: '#0a0a14', tabActiveBg: '#0f0f1a',
+    modalBackdrop: 'rgba(0,0,0,0.75)', modalBg: '#0f0f1a', modalShadow: '0 8px 32px rgba(0,0,0,0.6)',
+    spinnerTrack: 'rgba(100,120,200,0.1)',
+  }),
+
+  // ════════════════════════════════════════════
+  //  5. OCEAN — Teal/cyan
+  // ════════════════════════════════════════════
+  ocean: _t({
+    bg: '#f0fafa', sidebarBg: '#e8f6f6', border: 'rgba(0,150,136,0.15)',
+    text: '#1a3a3a', textSec: '#3a6a6a', textMuted: '#7a9a9a',
+    accent: '#00897b', accentDark: '#00796b',
+  }),
+
+  // ════════════════════════════════════════════
+  //  6. FOREST — Deep green
+  // ════════════════════════════════════════════
+  forest: _t({
+    bg: '#f2f7f2', sidebarBg: '#e8f0e8', border: 'rgba(46,125,50,0.15)',
+    text: '#1b3a1b', textSec: '#3a6a3a', textMuted: '#7a9a7a',
+    accent: '#2e7d32', accentDark: '#1b5e20',
+  }),
+
+  // ════════════════════════════════════════════
+  //  7. SUNSET — Warm orange/red
+  // ════════════════════════════════════════════
+  sunset: _t({
+    bg: '#fff8f0', sidebarBg: '#fff3e8', border: 'rgba(230,81,0,0.12)',
+    text: '#3a2010', textSec: '#6a4a30', textMuted: '#9a7a60',
+    accent: '#e65100', accentDark: '#bf360c',
+    online: '#66bb6a',
+  }),
+
+  // ════════════════════════════════════════════
+  //  8. ROSE — Pink/magenta
+  // ════════════════════════════════════════════
+  rose: _t({
+    bg: '#fff5f8', sidebarBg: '#ffeef3', border: 'rgba(194,24,91,0.12)',
+    text: '#3a1020', textSec: '#6a3050', textMuted: '#9a6080',
+    accent: '#c2185b', accentDark: '#ad1457',
+  }),
+
+  // ════════════════════════════════════════════
+  //  9. LAVENDER — Soft purple
+  // ════════════════════════════════════════════
+  lavender: _t({
+    bg: '#f8f5ff', sidebarBg: '#f0eaff', border: 'rgba(103,58,183,0.12)',
+    text: '#2a1a40', textSec: '#5a3a80', textMuted: '#8a6ab0',
+    accent: '#673ab7', accentDark: '#5e35b1',
+  }),
+
+  // ════════════════════════════════════════════
+  //  10. SLATE — Neutral gray
+  // ════════════════════════════════════════════
+  slate: _t({
+    bg: '#f8f9fa', sidebarBg: '#f1f3f5', border: 'rgba(0,0,0,0.1)',
+    text: '#212529', textSec: '#495057', textMuted: '#868e96',
+    accent: '#495057', accentDark: '#343a40',
+  }),
+
+  // ════════════════════════════════════════════
+  //  11. NORD — Nord color palette
+  // ════════════════════════════════════════════
+  nord: _t({
+    bg: '#2e3440', sidebarBg: '#282e3a', border: 'rgba(216,222,233,0.1)',
+    shadow: '0 2px 8px rgba(0,0,0,0.3)',
+    text: '#d8dee9', textSec: '#a0aec0', textMuted: '#616e88',
+    accent: '#88c0d0', accentDark: '#81a1c1',
+    ownBg: 'rgba(136,192,208,0.12)', ownBorder: 'rgba(136,192,208,0.2)', ownText: '#d8dee9',
+    otherBg: 'rgba(216,222,233,0.04)', otherBorder: 'rgba(216,222,233,0.08)', otherText: '#d8dee9',
+    dividerBg: 'rgba(216,222,233,0.04)', dividerBorder: 'rgba(216,222,233,0.08)',
+    offline: 'rgba(216,222,233,0.2)',
+    inputBg: 'rgba(216,222,233,0.05)', inputBorder: 'rgba(216,222,233,0.1)',
+    attachBtnBg: 'rgba(216,222,233,0.08)', attachBtnHover: 'rgba(216,222,233,0.12)',
+    tabBg: '#282e3a', tabActiveBg: '#2e3440',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#2e3440', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(216,222,233,0.08)',
+    currentUserAvatar: '#a3be8c',
+  }),
+
+  // ════════════════════════════════════════════
+  //  12. DRACULA — Dracula color palette
+  // ════════════════════════════════════════════
+  dracula: _t({
+    bg: '#282a36', sidebarBg: '#21222c', border: 'rgba(248,248,242,0.08)',
+    shadow: '0 2px 8px rgba(0,0,0,0.3)',
+    text: '#f8f8f2', textSec: '#bfbfb8', textMuted: '#6272a4',
+    accent: '#bd93f9', accentDark: '#a87de8',
+    ownBg: 'rgba(189,147,249,0.12)', ownBorder: 'rgba(189,147,249,0.2)', ownText: '#f8f8f2',
+    otherBg: 'rgba(248,248,242,0.04)', otherBorder: 'rgba(248,248,242,0.08)', otherText: '#f8f8f2',
+    dividerBg: 'rgba(248,248,242,0.04)', dividerBorder: 'rgba(248,248,242,0.08)',
+    offline: 'rgba(248,248,242,0.2)',
+    inputBg: 'rgba(248,248,242,0.05)', inputBorder: 'rgba(248,248,242,0.1)',
+    attachBtnBg: 'rgba(248,248,242,0.08)', attachBtnHover: 'rgba(248,248,242,0.12)',
+    tabBg: '#21222c', tabActiveBg: '#282a36',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#282a36', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(248,248,242,0.08)',
+    online: '#50fa7b', currentUserAvatar: '#50fa7b',
+    mentionSelfBg: 'rgba(255,184,108,0.25)', mentionSelfText: '#ffb86c',
+  }),
+
+  // ════════════════════════════════════════════
+  //  13. MONOKAI — Monokai-inspired
+  // ════════════════════════════════════════════
+  monokai: _t({
+    bg: '#272822', sidebarBg: '#1e1f1a', border: 'rgba(248,248,240,0.08)',
+    shadow: '0 2px 8px rgba(0,0,0,0.3)',
+    text: '#f8f8f0', textSec: '#b8b8a8', textMuted: '#75715e',
+    accent: '#a6e22e', accentDark: '#8cc220',
+    ownBg: 'rgba(166,226,46,0.1)', ownBorder: 'rgba(166,226,46,0.2)', ownText: '#f8f8f0',
+    otherBg: 'rgba(248,248,240,0.04)', otherBorder: 'rgba(248,248,240,0.08)', otherText: '#f8f8f0',
+    dividerBg: 'rgba(248,248,240,0.04)', dividerBorder: 'rgba(248,248,240,0.08)',
+    offline: 'rgba(248,248,240,0.2)',
+    inputBg: 'rgba(248,248,240,0.05)', inputBorder: 'rgba(248,248,240,0.1)',
+    attachBtnBg: 'rgba(248,248,240,0.08)', attachBtnHover: 'rgba(248,248,240,0.12)',
+    tabBg: '#1e1f1a', tabActiveBg: '#272822',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#272822', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(248,248,240,0.08)',
+    online: '#a6e22e', currentUserAvatar: '#a6e22e',
+    linkColor: '#66d9ef',
+  }),
+
+  // ════════════════════════════════════════════
+  //  14. SOLARIZED LIGHT
+  // ════════════════════════════════════════════
+  'solarized-light': _t({
+    bg: '#fdf6e3', sidebarBg: '#eee8d5', border: 'rgba(88,110,117,0.15)',
+    text: '#586e75', textSec: '#657b83', textMuted: '#93a1a1',
+    accent: '#268bd2', accentDark: '#2176b8',
+  }),
+
+  // ════════════════════════════════════════════
+  //  15. SOLARIZED DARK
+  // ════════════════════════════════════════════
+  'solarized-dark': _t({
+    bg: '#002b36', sidebarBg: '#073642', border: 'rgba(147,161,161,0.12)',
+    shadow: '0 2px 8px rgba(0,0,0,0.4)',
+    text: '#839496', textSec: '#93a1a1', textMuted: '#586e75',
+    accent: '#268bd2', accentDark: '#2176b8',
+    ownBg: 'rgba(38,139,210,0.12)', ownBorder: 'rgba(38,139,210,0.2)', ownText: '#93a1a1',
+    otherBg: 'rgba(147,161,161,0.04)', otherBorder: 'rgba(147,161,161,0.08)', otherText: '#93a1a1',
+    dividerBg: 'rgba(147,161,161,0.04)', dividerBorder: 'rgba(147,161,161,0.08)',
+    offline: 'rgba(147,161,161,0.2)',
+    inputBg: 'rgba(147,161,161,0.05)', inputBorder: 'rgba(147,161,161,0.1)',
+    attachBtnBg: 'rgba(147,161,161,0.08)', attachBtnHover: 'rgba(147,161,161,0.12)',
+    tabBg: '#073642', tabActiveBg: '#002b36',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#002b36', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(147,161,161,0.08)',
+    online: '#859900', currentUserAvatar: '#859900',
+  }),
+
+  // ════════════════════════════════════════════
+  //  16. CATPPUCCIN MOCHA
+  // ════════════════════════════════════════════
+  'catppuccin-mocha': _t({
+    bg: '#1e1e2e', sidebarBg: '#181825', border: 'rgba(205,214,244,0.08)',
+    shadow: '0 2px 8px rgba(0,0,0,0.3)',
+    text: '#cdd6f4', textSec: '#a6adc8', textMuted: '#585b70',
+    accent: '#cba6f7', accentDark: '#b490e0',
+    ownBg: 'rgba(203,166,247,0.1)', ownBorder: 'rgba(203,166,247,0.2)', ownText: '#cdd6f4',
+    otherBg: 'rgba(205,214,244,0.04)', otherBorder: 'rgba(205,214,244,0.08)', otherText: '#cdd6f4',
+    dividerBg: 'rgba(205,214,244,0.04)', dividerBorder: 'rgba(205,214,244,0.08)',
+    offline: 'rgba(205,214,244,0.2)',
+    inputBg: 'rgba(205,214,244,0.05)', inputBorder: 'rgba(205,214,244,0.1)',
+    attachBtnBg: 'rgba(205,214,244,0.08)', attachBtnHover: 'rgba(205,214,244,0.12)',
+    tabBg: '#181825', tabActiveBg: '#1e1e2e',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#1e1e2e', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(205,214,244,0.08)',
+    online: '#a6e3a1', currentUserAvatar: '#a6e3a1',
+  }),
+
+  // ════════════════════════════════════════════
+  //  17. CATPPUCCIN LATTE
+  // ════════════════════════════════════════════
+  'catppuccin-latte': _t({
+    bg: '#eff1f5', sidebarBg: '#e6e9ef', border: 'rgba(76,79,105,0.12)',
+    text: '#4c4f69', textSec: '#6c6f85', textMuted: '#9ca0b0',
+    accent: '#8839ef', accentDark: '#7629d9',
+  }),
+
+  // ════════════════════════════════════════════
+  //  18. GITHUB LIGHT
+  // ════════════════════════════════════════════
+  'github-light': _t({
+    bg: '#ffffff', sidebarBg: '#f6f8fa', border: 'rgba(31,35,40,0.1)',
+    text: '#1f2328', textSec: '#59636e', textMuted: '#8b949e',
+    accent: '#0969da', accentDark: '#0550ae',
+  }),
+
+  // ════════════════════════════════════════════
+  //  19. GITHUB DARK
+  // ════════════════════════════════════════════
+  'github-dark': _t({
+    bg: '#0d1117', sidebarBg: '#010409', border: 'rgba(139,148,158,0.12)',
+    shadow: '0 2px 8px rgba(0,0,0,0.4)',
+    text: '#e6edf3', textSec: '#8b949e', textMuted: '#484f58',
+    accent: '#58a6ff', accentDark: '#4090e0',
+    ownBg: 'rgba(88,166,255,0.1)', ownBorder: 'rgba(88,166,255,0.2)', ownText: '#e6edf3',
+    otherBg: 'rgba(139,148,158,0.04)', otherBorder: 'rgba(139,148,158,0.08)', otherText: '#e6edf3',
+    dividerBg: 'rgba(139,148,158,0.04)', dividerBorder: 'rgba(139,148,158,0.08)',
+    offline: 'rgba(139,148,158,0.2)',
+    inputBg: 'rgba(139,148,158,0.05)', inputBorder: 'rgba(139,148,158,0.1)',
+    attachBtnBg: 'rgba(139,148,158,0.08)', attachBtnHover: 'rgba(139,148,158,0.12)',
+    tabBg: '#010409', tabActiveBg: '#0d1117',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#0d1117', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(139,148,158,0.08)',
+    online: '#3fb950', currentUserAvatar: '#3fb950',
+  }),
+
+  // ════════════════════════════════════════════
+  //  20. OFFICE-HQ GOLD — Tacel Office-HQ theme
+  // ════════════════════════════════════════════
+  'office-hq': _t({
+    bg: '#ffffff', sidebarBg: '#faf8f0', border: 'rgba(201,162,39,0.15)',
+    text: '#3d3520', textSec: '#6a5a30', textMuted: '#8a7d5a',
+    accent: '#c9a227', accentDark: '#b8922a',
+  }),
+
+  // ════════════════════════════════════════════
+  //  21. SHIPWORKS BLUE — Tacel ShipWorks theme
+  // ════════════════════════════════════════════
+  shipworks: _t({
+    bg: '#ffffff', sidebarBg: '#f0f5ff', border: 'rgba(25,118,210,0.12)',
+    text: '#1a2a40', textSec: '#3a5a80', textMuted: '#6a8ab0',
+    accent: '#1976d2', accentDark: '#1565c0',
+  }),
+
+  // ════════════════════════════════════════════
+  //  22. TECH-PORTAL — Tacel Tech-Portal dark theme
+  // ════════════════════════════════════════════
+  'tech-portal': _t({
+    bg: '#1a1a2e', sidebarBg: '#16213e', border: 'rgba(83,193,222,0.12)',
+    shadow: '0 2px 8px rgba(0,0,0,0.3)',
+    text: '#e0e0e0', textSec: '#a0a0a0', textMuted: '#606060',
+    accent: '#53c1de', accentDark: '#40a8c4',
+    ownBg: 'rgba(83,193,222,0.1)', ownBorder: 'rgba(83,193,222,0.2)', ownText: '#e0e0e0',
+    otherBg: 'rgba(255,255,255,0.04)', otherBorder: 'rgba(255,255,255,0.08)', otherText: '#e0e0e0',
+    dividerBg: 'rgba(255,255,255,0.04)', dividerBorder: 'rgba(255,255,255,0.08)',
+    offline: 'rgba(255,255,255,0.2)',
+    inputBg: 'rgba(255,255,255,0.05)', inputBorder: 'rgba(83,193,222,0.15)',
+    attachBtnBg: 'rgba(255,255,255,0.08)', attachBtnHover: 'rgba(255,255,255,0.12)',
+    tabBg: '#16213e', tabActiveBg: '#1a1a2e',
+    modalBackdrop: 'rgba(0,0,0,0.7)', modalBg: '#1a1a2e', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(255,255,255,0.08)',
+    online: '#4caf50', currentUserAvatar: '#4caf50',
+  }),
+
+  // ════════════════════════════════════════════
+  //  23. CORAL — Warm coral/salmon
+  // ════════════════════════════════════════════
+  coral: _t({
+    bg: '#fff5f3', sidebarBg: '#ffefeb', border: 'rgba(255,87,51,0.12)',
+    text: '#3a1a10', textSec: '#6a3a28', textMuted: '#9a6a58',
+    accent: '#ff5733', accentDark: '#e04828',
+  }),
+
+  // ════════════════════════════════════════════
+  //  24. MINT — Fresh mint green
+  // ════════════════════════════════════════════
+  mint: _t({
+    bg: '#f0fff4', sidebarBg: '#e0f8e8', border: 'rgba(0,200,83,0.12)',
+    text: '#1a3a20', textSec: '#3a6a40', textMuted: '#6a9a70',
+    accent: '#00c853', accentDark: '#00a844',
+  }),
+
+  // ════════════════════════════════════════════
+  //  25. AMBER — Warm amber/honey
+  // ════════════════════════════════════════════
+  amber: _t({
+    bg: '#fffbf0', sidebarBg: '#fff8e1', border: 'rgba(255,160,0,0.12)',
+    text: '#3a2800', textSec: '#6a4a10', textMuted: '#9a7a40',
+    accent: '#ffa000', accentDark: '#ff8f00',
+    unreadText: '#3a2800',
+  }),
+
+  // ════════════════════════════════════════════
+  //  26. INDIGO — Deep indigo
+  // ════════════════════════════════════════════
+  indigo: _t({
+    bg: '#f5f5ff', sidebarBg: '#ececff', border: 'rgba(48,63,159,0.12)',
+    text: '#1a1a40', textSec: '#3a3a70', textMuted: '#6a6aa0',
+    accent: '#303f9f', accentDark: '#283593',
+  }),
+
+  // ════════════════════════════════════════════
+  //  27. ABYSS — Very dark blue
+  // ════════════════════════════════════════════
+  abyss: _t({
+    bg: '#060818', sidebarBg: '#040610', border: 'rgba(80,100,180,0.12)',
+    shadow: '0 2px 8px rgba(0,0,0,0.5)',
+    text: '#b0b8d8', textSec: '#7880a0', textMuted: '#484e6a',
+    accent: '#4fc3f7', accentDark: '#39aee0',
+    ownBg: 'rgba(79,195,247,0.1)', ownBorder: 'rgba(79,195,247,0.2)', ownText: '#b0b8d8',
+    otherBg: 'rgba(80,100,180,0.05)', otherBorder: 'rgba(80,100,180,0.1)', otherText: '#b0b8d8',
+    dividerBg: 'rgba(80,100,180,0.05)', dividerBorder: 'rgba(80,100,180,0.1)',
+    offline: 'rgba(176,184,216,0.2)',
+    inputBg: 'rgba(80,100,180,0.06)', inputBorder: 'rgba(80,100,180,0.12)',
+    attachBtnBg: 'rgba(80,100,180,0.08)', attachBtnHover: 'rgba(80,100,180,0.14)',
+    tabBg: '#040610', tabActiveBg: '#060818',
+    modalBackdrop: 'rgba(0,0,0,0.8)', modalBg: '#060818', modalShadow: '0 8px 32px rgba(0,0,0,0.6)',
+    spinnerTrack: 'rgba(80,100,180,0.1)',
+  }),
+
+  // ════════════════════════════════════════════
+  //  28. CREAM — Warm off-white
+  // ════════════════════════════════════════════
+  cream: _t({
+    bg: '#fefcf3', sidebarBg: '#f8f4e8', border: 'rgba(139,119,80,0.15)',
+    text: '#3a3020', textSec: '#6a5a40', textMuted: '#9a8a6a',
+    accent: '#8b7750', accentDark: '#7a6840',
+  }),
+
+  // ════════════════════════════════════════════
+  //  29. NEON — Bright neon on dark
+  // ════════════════════════════════════════════
+  neon: _t({
+    bg: '#0a0a0a', sidebarBg: '#050505', border: 'rgba(0,255,136,0.12)',
+    shadow: '0 2px 8px rgba(0,255,136,0.08)',
+    text: '#e0ffe0', textSec: '#a0d0a0', textMuted: '#507050',
+    accent: '#00ff88', accentDark: '#00dd77',
+    ownBg: 'rgba(0,255,136,0.08)', ownBorder: 'rgba(0,255,136,0.2)', ownText: '#e0ffe0',
+    otherBg: 'rgba(0,255,136,0.03)', otherBorder: 'rgba(0,255,136,0.08)', otherText: '#e0ffe0',
+    dividerBg: 'rgba(0,255,136,0.04)', dividerBorder: 'rgba(0,255,136,0.08)',
+    offline: 'rgba(0,255,136,0.15)',
+    inputBg: 'rgba(0,255,136,0.04)', inputBorder: 'rgba(0,255,136,0.12)',
+    attachBtnBg: 'rgba(0,255,136,0.06)', attachBtnHover: 'rgba(0,255,136,0.12)',
+    tabBg: '#050505', tabActiveBg: '#0a0a0a',
+    modalBackdrop: 'rgba(0,0,0,0.8)', modalBg: '#0a0a0a', modalShadow: '0 4px 24px rgba(0,255,136,0.15)',
+    spinnerTrack: 'rgba(0,255,136,0.08)',
+    online: '#00ff88', currentUserAvatar: '#00ff88',
+    sendText: '#0a0a0a',
+  }),
+
+  // ════════════════════════════════════════════
+  //  30. CHERRY — Dark red/crimson
+  // ════════════════════════════════════════════
+  cherry: _t({
+    bg: '#1a0a0e', sidebarBg: '#140810', border: 'rgba(220,60,80,0.12)',
+    shadow: '0 2px 8px rgba(0,0,0,0.4)',
+    text: '#f0d0d5', textSec: '#b08088', textMuted: '#705058',
+    accent: '#dc3c50', accentDark: '#c03040',
+    ownBg: 'rgba(220,60,80,0.12)', ownBorder: 'rgba(220,60,80,0.2)', ownText: '#f0d0d5',
+    otherBg: 'rgba(220,60,80,0.04)', otherBorder: 'rgba(220,60,80,0.08)', otherText: '#f0d0d5',
+    dividerBg: 'rgba(220,60,80,0.04)', dividerBorder: 'rgba(220,60,80,0.08)',
+    offline: 'rgba(240,208,213,0.2)',
+    inputBg: 'rgba(220,60,80,0.05)', inputBorder: 'rgba(220,60,80,0.12)',
+    attachBtnBg: 'rgba(220,60,80,0.08)', attachBtnHover: 'rgba(220,60,80,0.14)',
+    tabBg: '#140810', tabActiveBg: '#1a0a0e',
+    modalBackdrop: 'rgba(0,0,0,0.75)', modalBg: '#1a0a0e', modalShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    spinnerTrack: 'rgba(220,60,80,0.1)',
+    online: '#ff6b7a', currentUserAvatar: '#ff6b7a',
+  }),
+};
+
+module.exports = { THEMES };

package/utils/dom.js

@@ -0,0 +1,75 @@
+/**
+ * DOM utility helpers for tacel-chat
+ */
+
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+function escapeHtml(text) {
+  if (!text) return '';
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Create a DOM element with optional classes, attributes, and children
+ */
+function createElement(tag, options = {}) {
+  const el = document.createElement(tag);
+  if (options.className) el.className = options.className;
+  if (options.id) el.id = options.id;
+  if (options.innerHTML) el.innerHTML = options.innerHTML;
+  if (options.textContent) el.textContent = options.textContent;
+  if (options.style) Object.assign(el.style, options.style);
+  if (options.attrs) {
+    for (const [key, val] of Object.entries(options.attrs)) {
+      el.setAttribute(key, val);
+    }
+  }
+  if (options.events) {
+    for (const [evt, handler] of Object.entries(options.events)) {
+      el.addEventListener(evt, handler);
+    }
+  }
+  if (options.children) {
+    for (const child of options.children) {
+      if (typeof child === 'string') {
+        el.appendChild(document.createTextNode(child));
+      } else if (child) {
+        el.appendChild(child);
+      }
+    }
+  }
+  return el;
+}
+
+/**
+ * Check if an element is scrolled near the bottom
+ */
+function isNearBottom(el, threshold = 50) {
+  if (!el) return true;
+  return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+}
+
+/**
+ * Scroll an element to the bottom
+ */
+function scrollToBottom(el) {
+  if (!el) return;
+  el.scrollTop = el.scrollHeight;
+}
+
+/**
+ * Generate initials from a username (first 1-2 chars)
+ */
+function getInitials(name) {
+  if (!name) return '?';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}
+
+module.exports = { escapeHtml, createElement, isNearBottom, scrollToBottom, getInitials };