@mooncompany/uplink-chat 0.5.0

package/public/js/theme-generator.js

@@ -0,0 +1,661 @@
+// ============================================
+// THEME GENERATOR MODULE
+// Custom theme creator — Premium feature
+// Multi-channel color control + named themes
+// ============================================
+
+// ── Color utilities ──
+
+function hexToHSL(hex) {
+  hex = hex.replace('#', '');
+  var r = parseInt(hex.substring(0, 2), 16) / 255;
+  var g = parseInt(hex.substring(2, 4), 16) / 255;
+  var b = parseInt(hex.substring(4, 6), 16) / 255;
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, l = (max + min) / 2;
+  if (max === min) { h = s = 0; }
+  else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+
+function hslToHex(h, s, l) {
+  s /= 100; l /= 100;
+  var a = s * Math.min(l, 1 - l);
+  var f = function(n) {
+    var k = (n + h / 30) % 12;
+    var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0');
+  };
+  return '#' + f(0) + f(8) + f(4);
+}
+
+function hexToRGB(hex) {
+  hex = hex.replace('#', '');
+  return {
+    r: parseInt(hex.substring(0, 2), 16),
+    g: parseInt(hex.substring(2, 4), 16),
+    b: parseInt(hex.substring(4, 6), 16)
+  };
+}
+
+function luminance(hex) {
+  var rgb = hexToRGB(hex);
+  var vals = [rgb.r, rgb.g, rgb.b].map(function(v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * vals[0] + 0.7152 * vals[1] + 0.0722 * vals[2];
+}
+
+function bgIsDark(hex) { return luminance(hex) < 0.2; }
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function escapeAttr(str) { return escapeHtml(str); }
+
+// ── Theme generation from 6 color channels ──
+
+function generateTheme(colors) {
+  var accent = colors.accent;
+  var bg = colors.background;
+  var userColor = colors.userBubble;
+  var aiColor = colors.aiBubble;
+  var textColor = colors.text;
+  var starColor = colors.stars;
+
+  var aHSL = hexToHSL(accent);
+  var aRGB = hexToRGB(accent);
+  var bHSL = hexToHSL(bg);
+  var bRGB = hexToRGB(bg);
+  var uRGB = hexToRGB(userColor);
+  var aiRGB = hexToRGB(aiColor);
+  var tHSL = hexToHSL(textColor);
+  var dark = bgIsDark(bg);
+
+  var accentHover = hslToHex(aHSL.h, Math.min(aHSL.s, 80), Math.min(aHSL.l + 10, 80));
+  var accentSecondary = hslToHex((aHSL.h + 40) % 360, Math.min(aHSL.s, 70), 50);
+
+  var bgSecL = dark ? Math.min(bHSL.l + 8, 25) : Math.max(bHSL.l - 3, 90);
+  var bgSecHex = hslToHex(bHSL.h, Math.min(bHSL.s, 20), bgSecL);
+  var bgSecRGB = hexToRGB(bgSecHex);
+
+  var bgInputL = dark ? Math.min(bHSL.l + 5, 20) : Math.max(bHSL.l - 2, 94);
+  var bgInputHex = hslToHex(bHSL.h, Math.min(bHSL.s, 15), bgInputL);
+  var bgInputRGB = hexToRGB(bgInputHex);
+
+  var textMuted = hslToHex(tHSL.h, Math.min(tHSL.s, 30), dark ? 55 : 50);
+  var textDim = hslToHex(tHSL.h, Math.min(tHSL.s, 25), dark ? 42 : 60);
+  var textInverse = (luminance(accent) < 0.3) ? '#ffffff' : '#000000';
+
+  var uHSL = hexToHSL(userColor);
+  var userAccent = hslToHex(uHSL.h, Math.min(uHSL.s, 60), dark ? 25 : 70);
+  var userAccentHover = hslToHex(uHSL.h, Math.min(uHSL.s, 55), dark ? 20 : 65);
+
+  var h = aHSL.h;
+  var vars = {
+    '--bg': bg,
+    '--bg-secondary': 'rgba(' + bgSecRGB.r + ',' + bgSecRGB.g + ',' + bgSecRGB.b + ',0.95)',
+    '--bg-input': 'rgba(' + bgInputRGB.r + ',' + bgInputRGB.g + ',' + bgInputRGB.b + ',0.8)',
+    '--accent': accent,
+    '--accent-hover': accentHover,
+    '--accent-secondary': accentSecondary,
+    '--text': textColor,
+    '--text-muted': textMuted,
+    '--text-dim': textDim,
+    '--text-inverse': textInverse,
+    '--border': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',' + (dark ? '0.15' : '0.1') + ')',
+    '--accent-05': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.05)',
+    '--accent-10': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.1)',
+    '--accent-15': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.15)',
+    '--accent-20': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.2)',
+    '--accent-30': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.3)',
+    '--accent-40': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.4)',
+    '--accent-50': 'rgba(' + aRGB.r + ',' + aRGB.g + ',' + aRGB.b + ',0.5)',
+    '--user-bubble': 'rgba(' + uRGB.r + ',' + uRGB.g + ',' + uRGB.b + ',' + (dark ? '0.35' : '0.15') + ')',
+    '--user-accent': userAccent,
+    '--user-accent-hover': userAccentHover,
+    '--assistant-bubble': 'rgba(' + aiRGB.r + ',' + aiRGB.g + ',' + aiRGB.b + ',' + (dark ? '0.9' : '0.12') + ')',
+    '--star-color': starColor,
+    '--success': dark ? '#4ade80' : '#16a34a',
+    '--warning': dark ? '#fbbf24' : '#d97706',
+    '--info': '#60a5fa',
+    '--recording': dark ? '#ff3366' : '#dc2626',
+    '--error': dark ? '#ef4444' : '#dc2626',
+    '--neutral': '#6b7280',
+    '--syntax-keyword': dark ? hslToHex((h+280)%360,60,75) : hslToHex((h+280)%360,55,40),
+    '--syntax-string': dark ? hslToHex((h+120)%360,50,72) : hslToHex((h+120)%360,50,35),
+    '--syntax-comment': dark ? hslToHex(h,20,38) : hslToHex(h,8,64),
+    '--syntax-number': dark ? hslToHex((h+30)%360,60,65) : hslToHex(h,60,40),
+  };
+  if (!dark) {
+    vars['--error-10'] = 'rgba(220,38,38,0.08)';
+    vars['--error-20'] = 'rgba(220,38,38,0.12)';
+    vars['--error-30'] = 'rgba(220,38,38,0.2)';
+    vars['--success-20'] = 'rgba(22,163,74,0.1)';
+    vars['--black-20'] = 'rgba(0,0,0,0.06)';
+    vars['--black-40'] = 'rgba(0,0,0,0.1)';
+  } else {
+    vars['--error-10'] = 'rgba(255,68,102,0.1)';
+    vars['--error-20'] = 'rgba(255,68,102,0.2)';
+    vars['--error-30'] = 'rgba(255,68,102,0.3)';
+    vars['--success-20'] = 'rgba(0,255,136,0.2)';
+  }
+  return vars;
+}
+
+// ── Apply / Clear ──
+
+function applyCustomVars(vars) {
+  var root = document.documentElement;
+  for (var key in vars) root.style.setProperty(key, vars[key]);
+}
+
+var ALL_VARS = [
+  '--bg','--bg-secondary','--bg-input',
+  '--accent','--accent-hover','--accent-secondary',
+  '--text','--text-muted','--text-dim','--text-inverse','--border',
+  '--accent-05','--accent-10','--accent-15','--accent-20',
+  '--accent-30','--accent-40','--accent-50',
+  '--error-10','--error-20','--error-30','--success-20',
+  '--user-bubble','--user-accent','--user-accent-hover',
+  '--assistant-bubble','--success','--warning','--info',
+  '--recording','--error','--neutral','--star-color',
+  '--syntax-keyword','--syntax-string','--syntax-comment','--syntax-number',
+  '--black-20','--black-40',
+];
+
+function clearCustomVars() {
+  var root = document.documentElement;
+  ALL_VARS.forEach(function(v) { root.style.removeProperty(v); });
+}
+
+// ── Persistence ──
+
+var STORAGE_KEY = 'uplink-custom-themes';
+var ACTIVE_KEY = 'uplink-custom-active';
+
+function loadAllThemes() {
+  try { var r = localStorage.getItem(STORAGE_KEY); return r ? JSON.parse(r) : []; }
+  catch(e) { return []; }
+}
+function saveAllThemes(themes) {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(themes)); }
+  catch(e) { console.warn('ThemeGen: save failed', e); }
+}
+function loadActiveId() { return localStorage.getItem(ACTIVE_KEY) || null; }
+function saveActiveId(id) {
+  if (id) localStorage.setItem(ACTIVE_KEY, id);
+  else localStorage.removeItem(ACTIVE_KEY);
+}
+function generateId() {
+  return 'ct-' + Date.now().toString(36) + Math.random().toString(36).slice(2,6);
+}
+
+// Migrate v1 format
+function migrateOldFormat() {
+  try {
+    var old = localStorage.getItem('uplink-custom-theme');
+    if (!old) return;
+    var data = JSON.parse(old);
+    if (data && data.accent) {
+      var m = {
+        id: generateId(), name: 'My Theme',
+        colors: {
+          accent: data.accent, background: '#000000',
+          userBubble: data.accent, aiBubble: '#002840',
+          text: '#f1f5f9', stars: data.accent,
+        },
+        createdAt: Date.now(),
+      };
+      var themes = loadAllThemes();
+      themes.push(m);
+      saveAllThemes(themes);
+      if (data.active) saveActiveId(m.id);
+      localStorage.removeItem('uplink-custom-theme');
+    }
+  } catch(e) {}
+}
+
+// ── Defaults & presets ──
+
+var defaultColors = {
+  accent: '#8b5cf6', background: '#000000', userBubble: '#4c1d95',
+  aiBubble: '#002840', text: '#f1f5f9', stars: '#ffffff',
+};
+
+var presets = [
+  { name: 'Violet',  accent:'#8b5cf6', bg:'#000000', user:'#4c1d95', ai:'#1a1030', text:'#f1f5f9', stars:'#c4b5fd' },
+  { name: 'Cyan',    accent:'#00f0ff', bg:'#000000', user:'#0e4d65', ai:'#002840', text:'#f1f5f9', stars:'#00f0ff' },
+  { name: 'Rose',    accent:'#f43f5e', bg:'#0a0000', user:'#6b1020', ai:'#2a0a10', text:'#fce4ec', stars:'#ff6b8a' },
+  { name: 'Amber',   accent:'#f59e0b', bg:'#050200', user:'#6b3a00', ai:'#1a1000', text:'#fef3c7', stars:'#fbbf24' },
+  { name: 'Emerald', accent:'#10b981', bg:'#000a05', user:'#064e3b', ai:'#0a1f18', text:'#d1fae5', stars:'#6ee7b7' },
+  { name: 'Ocean',   accent:'#3b82f6', bg:'#000008', user:'#1e3a6e', ai:'#0a1628', text:'#dbeafe', stars:'#60a5fa' },
+  { name: 'Sakura',  accent:'#ec4899', bg:'#080004', user:'#6b1048', ai:'#1f0a18', text:'#fce7f3', stars:'#f9a8d4' },
+  { name: 'Snow',    accent:'#6366f1', bg:'#f8f9fa', user:'#c7d2fe', ai:'#e9ecef', text:'#1a1a2e', stars:'#ffffff' },
+];
+
+var channels = [
+  { key:'accent',     label:'Accent',      desc:'Buttons, links, highlights' },
+  { key:'background', label:'Background',   desc:'Main background' },
+  { key:'userBubble', label:'Your Bubbles', desc:'Your message color' },
+  { key:'aiBubble',   label:'AI Bubbles',   desc:'Assistant message color' },
+  { key:'text',       label:'Text',         desc:'Primary text color' },
+  { key:'stars',      label:'Stars',        desc:'Background particles' },
+];
+
+// ── State ──
+
+var generatorEl = null;
+var currentColors = assign({}, defaultColors);
+var currentName = '';
+var editingId = null;
+var isActive = false;
+var activeThemeId = null;
+
+function assign(target, src) {
+  for (var k in src) target[k] = src[k];
+  return target;
+}
+
+// ── Apply a saved theme by ID ──
+
+function applyThemeById(id) {
+  var themes = loadAllThemes();
+  var theme = themes.find(function(t) { return t.id === id; });
+  if (!theme) return;
+
+  var vars = generateTheme(theme.colors);
+  applyCustomVars(vars);
+  document.documentElement.setAttribute('data-theme', 'custom');
+  isActive = true;
+  activeThemeId = id;
+  saveActiveId(id);
+  ensureCustomOption(theme.name);
+
+  var themeSelect = document.getElementById('themeSelect');
+  if (themeSelect) themeSelect.value = 'custom';
+  var storage = window.UplinkStorage;
+  if (storage) storage.saveSettings({ theme: 'custom' });
+}
+
+// ── Theme select integration ──
+
+function ensureCustomOption(name) {
+  var select = document.getElementById('themeSelect');
+  if (!select) return;
+  var opt = select.querySelector('option[value="custom"]');
+  if (!opt) {
+    opt = document.createElement('option');
+    opt.value = 'custom';
+    select.appendChild(opt);
+  }
+  opt.textContent = '✦ ' + (name || 'Custom');
+}
+
+function removeCustomOption() {
+  var select = document.getElementById('themeSelect');
+  if (!select) return;
+  var opt = select.querySelector('option[value="custom"]');
+  if (opt) opt.remove();
+}
+
+// ── Sync all pickers to currentColors ──
+
+function syncPickersToColors() {
+  if (!generatorEl) return;
+  channels.forEach(function(ch) {
+    var val = currentColors[ch.key];
+    var picker = generatorEl.querySelector('.tg-color-picker[data-channel="' + ch.key + '"]');
+    var hex = generatorEl.querySelector('.tg-hex-input[data-channel="' + ch.key + '"]');
+    var display = picker ? picker.parentElement.querySelector('.tg-picker-display') : null;
+    if (picker) picker.value = val;
+    if (hex) hex.value = val;
+    if (display) display.style.background = val;
+  });
+}
+
+// ── Live update (when theme is already applied) ──
+
+function liveUpdate() {
+  if (isActive && activeThemeId === editingId) {
+    var vars = generateTheme(currentColors);
+    applyCustomVars(vars);
+  }
+}
+
+// ── Preview ──
+
+function updatePreview() {
+  var vars = generateTheme(currentColors);
+  var bar = document.getElementById('tgPreviewBar');
+  var dot = document.getElementById('tgPreviewAccent');
+  var label = document.getElementById('tgPreviewText');
+  var chat = document.getElementById('tgPreviewChat');
+  var userMsg = document.getElementById('tgPreviewUser');
+  var aiMsg = document.getElementById('tgPreviewAssistant');
+
+  if (bar) bar.style.background = vars['--bg-secondary'];
+  if (dot) dot.style.background = vars['--accent'];
+  if (label) label.style.color = vars['--text-muted'];
+  if (chat) chat.style.background = vars['--bg'];
+  if (userMsg) { userMsg.style.background = vars['--user-bubble']; userMsg.style.color = vars['--text']; }
+  if (aiMsg) { aiMsg.style.background = vars['--assistant-bubble']; aiMsg.style.color = vars['--text']; }
+}
+
+// ── Build UI ──
+
+function buildUI() {
+  var container = document.getElementById('themeGeneratorContainer');
+  if (!container) return;
+
+  if (window.UplinkPremium && !window.UplinkPremium.isActive()) {
+    container.innerHTML = '';
+    return;
+  }
+
+  migrateOldFormat();
+  var savedThemes = loadAllThemes();
+  activeThemeId = loadActiveId();
+  isActive = !!activeThemeId;
+
+  if (editingId) {
+    var ed = savedThemes.find(function(t) { return t.id === editingId; });
+    if (ed) { currentColors = assign({}, ed.colors); currentName = ed.name; }
+  }
+
+  // Saved themes list
+  var savedHTML = '';
+  if (savedThemes.length > 0) {
+    var items = savedThemes.map(function(t) {
+      var act = activeThemeId === t.id;
+      var edt = editingId === t.id;
+      return '<div class="tg-saved-item' + (act ? ' active' : '') + (edt ? ' editing' : '') + '" data-theme-id="' + t.id + '">' +
+        '<div class="tg-saved-swatch" style="background:' + t.colors.accent + '"></div>' +
+        '<span class="tg-saved-name">' + escapeHtml(t.name || 'Untitled') + '</span>' +
+        (act ? '<span class="tg-saved-badge">Active</span>' : '') +
+        '<div class="tg-saved-actions">' +
+          '<button class="tg-saved-btn" title="Apply" data-action="apply">✓</button>' +
+          '<button class="tg-saved-btn" title="Edit" data-action="edit">✎</button>' +
+          '<button class="tg-saved-btn" title="Delete" data-action="delete">✕</button>' +
+        '</div>' +
+      '</div>';
+    }).join('');
+    savedHTML = '<div class="tg-saved"><div class="tg-label">Saved Themes</div><div class="tg-saved-list">' + items + '</div></div>';
+  }
+
+  // Channel pickers
+  var channelHTML = channels.map(function(ch) {
+    var val = currentColors[ch.key] || defaultColors[ch.key];
+    return '<div class="tg-channel">' +
+      '<div class="tg-channel-info">' +
+        '<span class="tg-channel-label">' + ch.label + '</span>' +
+        '<span class="tg-channel-desc">' + ch.desc + '</span>' +
+      '</div>' +
+      '<div class="tg-channel-controls">' +
+        '<div class="tg-picker-wrap">' +
+          '<input type="color" class="tg-color-picker" data-channel="' + ch.key + '" value="' + val + '">' +
+          '<div class="tg-picker-display" style="background:' + val + '"></div>' +
+        '</div>' +
+        '<input type="text" class="tg-hex-input" data-channel="' + ch.key + '" value="' + val + '" maxlength="7" spellcheck="false" autocomplete="off">' +
+      '</div>' +
+    '</div>';
+  }).join('');
+
+  // Presets
+  var presetsHTML = presets.map(function(p) {
+    return '<button class="tg-preset" data-preset="' + p.name + '" title="' + p.name + '">' +
+      '<span class="tg-preset-swatch" style="background:linear-gradient(135deg,' + p.bg + ' 40%,' + p.accent + ' 100%)"></span>' +
+      '<span class="tg-preset-name">' + p.name + '</span>' +
+    '</button>';
+  }).join('');
+
+  container.innerHTML =
+    '<div class="tg-section">' +
+      '<div class="tg-header">' +
+        '<span class="tg-title">Theme Studio</span>' +
+        '<span class="tg-badge">Premium</span>' +
+      '</div>' +
+      savedHTML +
+      '<div class="tg-editor">' +
+        '<div class="tg-name-row">' +
+          '<input type="text" class="tg-name-input" id="tgNameInput" placeholder="Theme name..." value="' + escapeAttr(currentName) + '" maxlength="24" spellcheck="false">' +
+        '</div>' +
+        '<div class="tg-presets-row">' +
+          '<div class="tg-label">Presets</div>' +
+          '<div class="tg-presets">' + presetsHTML + '</div>' +
+        '</div>' +
+        '<div class="tg-channels">' + channelHTML + '</div>' +
+        '<div class="tg-preview">' +
+          '<div class="tg-preview-bar" id="tgPreviewBar">' +
+            '<div class="tg-preview-dot" id="tgPreviewAccent"></div>' +
+            '<span class="tg-preview-label" id="tgPreviewText">Preview</span>' +
+          '</div>' +
+          '<div class="tg-preview-chat" id="tgPreviewChat">' +
+            '<div class="tg-preview-msg tg-preview-assistant" id="tgPreviewAssistant">Hey, how can I help?</div>' +
+            '<div class="tg-preview-msg tg-preview-user" id="tgPreviewUser">Looks great!</div>' +
+          '</div>' +
+        '</div>' +
+        '<div class="tg-actions">' +
+          '<button class="tg-btn tg-btn-primary" id="tgSaveBtn">' + (editingId ? 'Save Changes' : 'Save & Apply') + '</button>' +
+          '<button class="tg-btn tg-btn-secondary" id="tgCancelBtn">' + (editingId ? 'Cancel' : 'Reset') + '</button>' +
+        '</div>' +
+      '</div>' +
+    '</div>';
+
+  generatorEl = container;
+  setupEvents();
+  updatePreview();
+}
+
+// ── Events ──
+
+function setupEvents() {
+  if (!generatorEl) return;
+
+  // Color pickers
+  generatorEl.querySelectorAll('.tg-color-picker').forEach(function(picker) {
+    picker.addEventListener('input', function() {
+      var ch = picker.dataset.channel;
+      currentColors[ch] = picker.value;
+      var hex = generatorEl.querySelector('.tg-hex-input[data-channel="' + ch + '"]');
+      if (hex) hex.value = picker.value;
+      var disp = picker.parentElement.querySelector('.tg-picker-display');
+      if (disp) disp.style.background = picker.value;
+      updatePreview();
+      liveUpdate();
+    });
+  });
+
+  // Hex inputs
+  generatorEl.querySelectorAll('.tg-hex-input').forEach(function(input) {
+    input.addEventListener('input', function() {
+      var val = input.value.trim();
+      if (/^#[0-9a-fA-F]{6}$/.test(val)) {
+        var ch = input.dataset.channel;
+        currentColors[ch] = val;
+        var picker = generatorEl.querySelector('.tg-color-picker[data-channel="' + ch + '"]');
+        if (picker) picker.value = val;
+        var disp = input.closest('.tg-channel-controls').querySelector('.tg-picker-display');
+        if (disp) disp.style.background = val;
+        updatePreview();
+        liveUpdate();
+      }
+    });
+  });
+
+  // Presets
+  generatorEl.querySelectorAll('.tg-preset').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      var p = presets.find(function(x) { return x.name === btn.dataset.preset; });
+      if (!p) return;
+      currentColors = { accent:p.accent, background:p.bg, userBubble:p.user, aiBubble:p.ai, text:p.text, stars:p.stars };
+      var nameInput = document.getElementById('tgNameInput');
+      if (nameInput && !nameInput.value.trim()) nameInput.value = p.name;
+      syncPickersToColors();
+      updatePreview();
+      liveUpdate();
+    });
+  });
+
+  // Name
+  var nameInput = document.getElementById('tgNameInput');
+  if (nameInput) nameInput.addEventListener('input', function() { currentName = nameInput.value; });
+
+  // Save & Apply
+  var saveBtn = document.getElementById('tgSaveBtn');
+  if (saveBtn) {
+    saveBtn.addEventListener('click', function() {
+      var themes = loadAllThemes();
+      var name = (currentName || '').trim() || 'Custom ' + (themes.length + 1);
+
+      if (editingId) {
+        var idx = -1;
+        for (var i = 0; i < themes.length; i++) { if (themes[i].id === editingId) { idx = i; break; } }
+        if (idx >= 0) { themes[idx].name = name; themes[idx].colors = assign({}, currentColors); }
+        saveAllThemes(themes);
+        applyThemeById(editingId);
+      } else {
+        var newT = { id: generateId(), name: name, colors: assign({}, currentColors), createdAt: Date.now() };
+        themes.push(newT);
+        saveAllThemes(themes);
+        applyThemeById(newT.id);
+      }
+      editingId = null;
+      currentName = '';
+      currentColors = assign({}, defaultColors);
+      buildUI();
+    });
+  }
+
+  // Cancel / Reset
+  var cancelBtn = document.getElementById('tgCancelBtn');
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', function() {
+      if (editingId) {
+        editingId = null;
+        currentName = '';
+        currentColors = assign({}, defaultColors);
+        buildUI();
+      } else {
+        clearCustomVars();
+        isActive = false;
+        activeThemeId = null;
+        saveActiveId(null);
+        document.documentElement.setAttribute('data-theme', 'midnight');
+        var sel = document.getElementById('themeSelect');
+        if (sel) { removeCustomOption(); sel.value = 'midnight'; }
+        var storage = window.UplinkStorage;
+        if (storage) storage.saveSettings({ theme: 'midnight' });
+        currentColors = assign({}, defaultColors);
+        currentName = '';
+        editingId = null;
+        buildUI();
+      }
+    });
+  }
+
+  // Saved theme actions (delegation)
+  var savedList = generatorEl.querySelector('.tg-saved-list');
+  if (savedList) {
+    savedList.addEventListener('click', function(e) {
+      var btn = e.target.closest('[data-action]');
+      if (!btn) return;
+      var item = btn.closest('.tg-saved-item');
+      if (!item) return;
+      var id = item.dataset.themeId;
+      var action = btn.dataset.action;
+
+      if (action === 'apply') {
+        applyThemeById(id);
+        buildUI();
+      } else if (action === 'edit') {
+        editingId = id;
+        buildUI();
+      } else if (action === 'delete') {
+        var themes = loadAllThemes();
+        themes = themes.filter(function(t) { return t.id !== id; });
+        saveAllThemes(themes);
+        if (activeThemeId === id) {
+          clearCustomVars();
+          isActive = false;
+          activeThemeId = null;
+          saveActiveId(null);
+          document.documentElement.setAttribute('data-theme', 'midnight');
+          var sel = document.getElementById('themeSelect');
+          if (sel) { removeCustomOption(); sel.value = 'midnight'; }
+          var storage = window.UplinkStorage;
+          if (storage) storage.saveSettings({ theme: 'midnight' });
+        }
+        if (editingId === id) {
+          editingId = null;
+          currentColors = assign({}, defaultColors);
+          currentName = '';
+        }
+        buildUI();
+      }
+    });
+  }
+}
+
+// ── Init ──
+
+function init() {
+  if (window.UplinkPremium && !window.UplinkPremium.isActive()) {
+    window.addEventListener('uplink:premiumChange', function(e) {
+      if (e.detail && e.detail.active) buildUI();
+    });
+    return;
+  }
+  buildUI();
+
+  // Restore active custom theme on load
+  var id = loadActiveId();
+  if (id) {
+    var themes = loadAllThemes();
+    var theme = themes.find(function(t) { return t.id === id; });
+    if (theme) {
+      var vars = generateTheme(theme.colors);
+      applyCustomVars(vars);
+      document.documentElement.setAttribute('data-theme', 'custom');
+      isActive = true;
+      activeThemeId = id;
+      ensureCustomOption(theme.name);
+      var sel = document.getElementById('themeSelect');
+      if (sel) sel.value = 'custom';
+    }
+  }
+}
+
+// Listen for built-in theme changes — deactivate custom
+window.addEventListener('uplink:themeChange', function(e) {
+  if (e.detail && e.detail.theme !== 'custom' && isActive) {
+    clearCustomVars();
+    isActive = false;
+    activeThemeId = null;
+    saveActiveId(null);
+    var applyBtn = document.getElementById('tgSaveBtn');
+    if (applyBtn) { applyBtn.textContent = 'Save & Apply'; }
+  }
+});
+
+// Expose API
+export const UplinkThemeGenerator = {
+  build: buildUI,
+  isActive: function() { return isActive; },
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkThemeGenerator = UplinkThemeGenerator;
+
+UplinkCore.registerModule('themeGenerator', init);