tacel-canva 1.0.0 → 1.1.0

package/canva.css

@@ -254,6 +254,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  overflow: visible;
   gap: var(--tc-spacing);
   padding: var(--tc-spacing) var(--tc-spacing-lg);
   border-bottom: 1px solid var(--tc-border-light);
@@ -288,6 +289,8 @@
   display: flex;
   align-items: center;
   gap: var(--tc-spacing);
+  position: relative;
+  overflow: visible;
 }
 
 .tc-user-info {
@@ -2004,6 +2007,122 @@
    THEME PICKER
    ═══════════════════════════════════════════════════════════════ */
 
+/* ── Theme Dropdown ── */
+.tc-theme-dropdown-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.tc-theme-dropdown-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--tc-border);
+  border-radius: var(--tc-border-radius);
+  background: var(--tc-bg);
+  color: var(--tc-text-muted);
+  cursor: pointer;
+  transition: var(--tc-transition);
+  font-size: 13px;
+}
+
+.tc-theme-dropdown-btn:hover {
+  border-color: var(--tc-primary);
+  color: var(--tc-primary);
+  background: var(--tc-bg-secondary);
+}
+
+.tc-theme-dropdown-btn svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.tc-theme-dropdown-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.tc-theme-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  min-width: 180px;
+  max-height: 320px;
+  overflow-y: auto;
+  background: var(--tc-bg);
+  border: 1px solid var(--tc-border);
+  border-radius: var(--tc-border-radius);
+  box-shadow: 0 8px 24px var(--tc-shadow-lg);
+  z-index: 9999;
+  padding: 4px;
+}
+
+.tc-theme-dropdown-menu.open {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.tc-theme-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: var(--tc-border-radius-sm);
+  cursor: pointer;
+  transition: var(--tc-transition);
+  color: var(--tc-text-muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.tc-theme-dropdown-item:hover {
+  background: var(--tc-bg-secondary);
+  color: var(--tc-text);
+}
+
+.tc-theme-dropdown-item.active {
+  background: var(--tc-primary-light);
+  color: var(--tc-text);
+}
+
+.tc-theme-swatch {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border-radius: 5px;
+  border: 2px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tc-theme-swatch-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.tc-theme-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tc-theme-check {
+  color: var(--tc-primary);
+  font-size: 13px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+/* Legacy theme picker classes - kept for compatibility */
 .tc-theme-picker {
   position: relative;
 }
@@ -2039,9 +2158,9 @@
 }
 
 .tc-theme-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
+  position: fixed;
+  top: auto;
+  right: auto;
   margin-top: 4px;
   background: var(--tc-bg);
   border: 1px solid var(--tc-border);
@@ -2050,8 +2169,26 @@
   min-width: 220px;
   max-height: 400px;
   overflow-y: auto;
-  z-index: 100;
+  z-index: 9999;
   padding: 6px;
+  display: none;
+}
+
+.tc-theme-dropdown.open {
+  display: block;
+}
+
+.tc-theme-preview {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+
+.tc-theme-name {
+  flex: 1;
+  font-size: 13px;
+  color: var(--tc-text);
 }
 
 .tc-theme-option {

package/canva.js

@@ -414,6 +414,98 @@ class TacelCanvaInstance {
     return header;
   }
 
+  _renderThemePicker() {
+    const wrap = DomUtils.el('div', { className: 'tc-theme-dropdown-wrap' });
+
+    const btn = DomUtils.el('button', {
+      className: 'tc-theme-dropdown-btn',
+      attrs: { title: 'Change theme' }
+    });
+    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
+    const label = DomUtils.el('span', { className: 'tc-theme-dropdown-label', text: 'Theme' });
+    btn.appendChild(label);
+    wrap.appendChild(btn);
+
+    // Dropdown menu
+    const menu = DomUtils.el('div', { className: 'tc-theme-dropdown-menu' });
+
+    // Get themes
+    const themeObj = (typeof CANVA_THEMES !== 'undefined') ? CANVA_THEMES : {};
+    const themeNames = Object.keys(themeObj);
+    const currentTheme = this._state.currentTheme || this._config.theme || 'default';
+
+    themeNames.forEach(name => {
+      const theme = themeObj[name] || {};
+      const item = DomUtils.el('div', {
+        className: 'tc-theme-dropdown-item' + (currentTheme === name ? ' active' : '')
+      });
+
+      // Color swatch
+      const accentColor = theme.variables?.['--tc-primary'] || '#3b82f6';
+      const bgColor = theme.variables?.['--tc-bg'] || '#ffffff';
+      const swatch = DomUtils.el('span', { className: 'tc-theme-swatch' });
+      swatch.style.borderColor = accentColor;
+      swatch.style.background = bgColor;
+      const dot = DomUtils.el('span', { className: 'tc-theme-swatch-dot' });
+      dot.style.background = accentColor;
+      swatch.appendChild(dot);
+      item.appendChild(swatch);
+
+      // Label
+      item.appendChild(DomUtils.el('span', {
+        className: 'tc-theme-item-label',
+        text: theme.name || name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ' ')
+      }));
+
+      // Checkmark for active
+      if (currentTheme === name) {
+        item.appendChild(DomUtils.el('span', { className: 'tc-theme-check', text: '✓' }));
+      }
+
+      item.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this._state.currentTheme = name;
+        this._applyTheme(name);
+        menu.querySelectorAll('.tc-theme-dropdown-item').forEach(el => el.classList.remove('active'));
+        item.classList.add('active');
+        menu.classList.remove('open');
+      });
+
+      menu.appendChild(item);
+    });
+
+    wrap.appendChild(menu);
+
+    // Toggle menu
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const wasOpen = menu.classList.contains('open');
+      this._container.querySelectorAll('.tc-theme-dropdown-menu.open').forEach(m => m.classList.remove('open'));
+      if (!wasOpen) {
+        menu.classList.add('open');
+      }
+    });
+
+    // Close on outside click
+    document.addEventListener('click', (e) => {
+      if (!wrap.contains(e.target)) {
+        menu.classList.remove('open');
+      }
+    });
+
+    return wrap;
+  }
+
+  _applyTheme(themeId) {
+    if (typeof CANVA_THEMES === 'undefined') return;
+    const theme = CANVA_THEMES[themeId];
+    if (!theme || !theme.variables) return;
+    
+    Object.entries(theme.variables).forEach(([prop, value]) => {
+      this._container.style.setProperty(prop, value);
+    });
+  }
+
   _renderToolbar() {
     const toolbar = DomUtils.el('div', { className: 'tc-toolbar' });
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tacel-canva",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Premium Canva integration module for Tacel Electron apps with OAuth 2.0, inline design editor, 10 productivity features, 34 themes, keyboard shortcuts, and glassmorphism UI.",
   "main": "index.js",
   "files": [