tacel-canva 1.0.0

package/canva.js

@@ -0,0 +1,2910 @@
+/**
+ * Tacel Canva Module
+ * Universal Canva integration for Electron apps
+ * 
+ * Features:
+ * - OAuth 2.0 authentication with PKCE
+ * - Design gallery with thumbnails
+ * - Export/download designs
+ * - Folder navigation
+ * - Search functionality
+ */
+
+let DomUtils, PKCEUtils;
+if (typeof require === 'function') {
+  DomUtils = require('./utils/dom');
+  PKCEUtils = require('./utils/pkce');
+}
+
+const DEFAULT_CONFIG = {
+  features: {
+    export: true,
+    createNew: true,
+    folders: true,
+    search: true,
+    preview: true,
+    sorting: true,
+    viewToggle: true,
+    contextMenu: true,
+    dragDrop: true,
+    favorites: true,
+    recentlyViewed: true,
+    bulkActions: true,
+    collections: true,
+    themePicker: true,
+    // New features
+    brandKit: true,           // 1. Quick Brand Kit Access
+    templates: true,          // 2. Design Templates Browser
+    scheduledExports: true,   // 3. Scheduled Publishing Queue
+    annotations: true,        // 4. Design Annotations & Notes
+    quickInsert: true,        // 5. Quick Insert to Documents
+    compareView: true,        // 6. Design Comparison View
+    assetLibrary: true,       // 7. Asset Library Sync
+    analytics: true,          // 8. Design Analytics Dashboard
+    batchExport: true,        // 9. Batch Export with Presets
+    designRequests: true,     // 10. Design Request System
+  },
+  defaultView: 'grid',
+  sortBy: 'updated_at',
+  sortOrder: 'desc',
+  theme: 'default',
+  channelPrefix: 'canva',
+  pageSize: 50,
+};
+
+class TacelCanvaInstance {
+  constructor(container, config) {
+    this._container = container;
+    this._config = { ...DEFAULT_CONFIG, ...config };
+    this._config.features = { ...DEFAULT_CONFIG.features, ...(config.features || {}) };
+
+    this._state = {
+      isAuthenticated: false,
+      user: null,
+      designs: [],
+      folders: [],
+      collections: [],
+      currentFolder: null,
+      currentCollection: null,
+      searchQuery: '',
+      isLoading: false,
+      authState: null,
+      viewMode: this._config.defaultView || 'grid',
+      sortBy: this._config.sortBy || 'updated_at',
+      sortOrder: this._config.sortOrder || 'desc',
+      selectedDesigns: new Set(),
+      favorites: new Set(),
+      recentlyViewed: [],
+      previewDesign: null,
+      contextMenuTarget: null,
+      filterType: 'all',
+      continuation: null,
+      hasMore: false,
+      currentTheme: this._config.theme || 'default',
+      showCreateCollection: false,
+      // New feature states
+      currentView: 'gallery', // gallery, brandKit, templates, scheduled, analytics, requests, compare, assets
+      brandKit: null,
+      templates: [],
+      templateCategories: [],
+      scheduledExports: [],
+      annotations: {}, // designId -> { notes, tags, linkedTaskId }
+      assetLibrary: [], // designIds marked as assets
+      analytics: { views: {}, exports: {}, lastUsed: {} },
+      exportPresets: [],
+      designRequests: [],
+      compareDesigns: [], // designs selected for comparison
+    };
+
+    this._validateConfig();
+    this._init();
+  }
+
+  _validateConfig() {
+    if (!this._config.currentUserId) {
+      throw new Error('TacelCanva: currentUserId is required');
+    }
+    if (!this._config.onGetToken || typeof this._config.onGetToken !== 'function') {
+      throw new Error('TacelCanva: onGetToken callback is required');
+    }
+    if (!this._config.onSaveToken || typeof this._config.onSaveToken !== 'function') {
+      throw new Error('TacelCanva: onSaveToken callback is required');
+    }
+  }
+
+  async _init() {
+    this._container.classList.add('tacel-canva');
+    this._initKeyboardShortcuts();
+    this._render();
+    await this._checkAuthStatus();
+  }
+
+  async _checkAuthStatus() {
+    try {
+      const tokens = await this._config.onGetToken(this._config.currentUserId);
+      if (tokens && tokens.access_token) {
+        this._state.isAuthenticated = true;
+        await this._loadDesigns();
+      }
+    } catch (err) {
+      console.error('[TacelCanva] Auth check failed:', err);
+    }
+    this._render();
+  }
+
+  _render() {
+    DomUtils.clear(this._container);
+
+    if (!this._state.isAuthenticated) {
+      this._renderAuthScreen();
+    } else {
+      this._renderMainScreen();
+    }
+  }
+
+  _renderAuthScreen() {
+    const authScreen = DomUtils.el('div', { className: 'tc-auth-screen' });
+    
+    const logo = DomUtils.el('div', { className: 'tc-auth-logo' });
+    logo.innerHTML = `
+      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+        <rect width="48" height="48" rx="8" fill="#00C4CC"/>
+        <path d="M24 12L12 24L24 36L36 24L24 12Z" fill="white"/>
+      </svg>
+    `;
+    
+    const title = DomUtils.el('h2', { 
+      className: 'tc-auth-title',
+      text: 'Connect to Canva'
+    });
+    
+    const desc = DomUtils.el('p', { 
+      className: 'tc-auth-desc',
+      text: 'Access your Canva designs, export files, and manage your creative work.'
+    });
+    
+    const connectBtn = DomUtils.el('button', {
+      className: 'tc-btn tc-btn-primary',
+      text: 'Connect Canva Account'
+    });
+    connectBtn.addEventListener('click', () => this._startOAuthFlow());
+    
+    authScreen.appendChild(logo);
+    authScreen.appendChild(title);
+    authScreen.appendChild(desc);
+    authScreen.appendChild(connectBtn);
+    
+    this._container.appendChild(authScreen);
+  }
+
+  _renderMainScreen() {
+    const wrapper = DomUtils.el('div', { className: 'tc-main-wrapper' });
+    
+    // Sidebar with folders
+    if (this._config.features.folders) {
+      const sidebar = this._renderSidebar();
+      wrapper.appendChild(sidebar);
+    }
+    
+    const mainArea = DomUtils.el('div', { className: 'tc-main-area' });
+    
+    const header = this._renderHeader();
+    const toolbar = this._renderToolbar();
+    const content = this._renderContent();
+    
+    mainArea.appendChild(header);
+    mainArea.appendChild(toolbar);
+    mainArea.appendChild(content);
+    
+    wrapper.appendChild(mainArea);
+    this._container.appendChild(wrapper);
+    
+    // Preview modal
+    if (this._state.previewDesign) {
+      this._renderPreviewModal();
+    }
+    
+    // Context menu
+    if (this._state.contextMenuTarget) {
+      this._renderContextMenu();
+    }
+  }
+
+  _renderSidebar() {
+    const sidebar = DomUtils.el('div', { className: 'tc-sidebar' });
+    
+    const sidebarHeader = DomUtils.el('div', { className: 'tc-sidebar-header' });
+    sidebarHeader.innerHTML = `<span class="tc-sidebar-title">Canva Hub</span>`;
+    sidebar.appendChild(sidebarHeader);
+    
+    const nav = DomUtils.el('nav', { className: 'tc-sidebar-nav' });
+    
+    // Main navigation sections
+    const mainNav = [
+      { id: 'gallery', view: 'gallery', icon: '🎨', label: 'My Designs' },
+      { id: 'brandKit', view: 'brandKit', icon: '🏷️', label: 'Brand Kit', feature: 'brandKit' },
+      { id: 'templates', view: 'templates', icon: '📋', label: 'Templates', feature: 'templates' },
+      { id: 'assets', view: 'assets', icon: '📦', label: 'Asset Library', feature: 'assetLibrary' },
+    ];
+    
+    mainNav.forEach(item => {
+      if (item.feature && !this._config.features[item.feature]) return;
+      const navItem = DomUtils.el('div', {
+        className: `tc-sidebar-item ${this._state.currentView === item.view ? 'active' : ''}`,
+      });
+      navItem.innerHTML = `
+        <span class="tc-sidebar-icon">${item.icon}</span>
+        <span class="tc-sidebar-label">${item.label}</span>
+      `;
+      navItem.addEventListener('click', () => {
+        this._state.currentView = item.view;
+        this._state.filterType = 'all';
+        this._render();
+      });
+      nav.appendChild(navItem);
+    });
+    
+    // Divider
+    nav.appendChild(DomUtils.el('div', { className: 'tc-sidebar-divider' }));
+    
+    // Quick filters (only show in gallery view)
+    const filtersHeader = DomUtils.el('div', { className: 'tc-sidebar-section-header', text: 'Quick Filters' });
+    nav.appendChild(filtersHeader);
+    
+    const filters = [
+      { id: 'all', icon: '📁', label: 'All Designs', count: this._state.designs.length },
+      { id: 'recent', icon: '🕐', label: 'Recently Viewed', count: this._state.recentlyViewed.length },
+      { id: 'favorites', icon: '⭐', label: 'Favorites', count: this._state.favorites.size },
+    ];
+    
+    filters.forEach(filter => {
+      const item = DomUtils.el('div', {
+        className: `tc-sidebar-item ${this._state.filterType === filter.id ? 'active' : ''}`,
+      });
+      item.innerHTML = `
+        <span class="tc-sidebar-icon">${filter.icon}</span>
+        <span class="tc-sidebar-label">${filter.label}</span>
+        <span class="tc-sidebar-count">${filter.count}</span>
+      `;
+      item.addEventListener('click', () => {
+        this._state.filterType = filter.id;
+        this._state.currentFolder = null;
+        this._state.currentCollection = null;
+        this._render();
+      });
+      nav.appendChild(item);
+    });
+    
+    // Custom Collections section
+    if (this._config.features.collections) {
+      const collectionsHeader = DomUtils.el('div', { className: 'tc-sidebar-section-header' });
+      collectionsHeader.innerHTML = `
+        <span>Collections</span>
+        <button class="tc-sidebar-add-btn" title="Create Collection">+</button>
+      `;
+      collectionsHeader.querySelector('.tc-sidebar-add-btn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        this._showCreateCollectionModal();
+      });
+      nav.appendChild(collectionsHeader);
+      
+      // Render collections
+      this._state.collections.forEach(collection => {
+        const count = collection.designIds ? collection.designIds.length : 0;
+        const item = DomUtils.el('div', {
+          className: `tc-sidebar-item ${this._state.currentCollection === collection.id ? 'active' : ''}`,
+        });
+        item.innerHTML = `
+          <span class="tc-sidebar-icon" style="color: ${collection.color || '#6b7280'}">●</span>
+          <span class="tc-sidebar-label">${collection.name}</span>
+          <span class="tc-sidebar-count">${count}</span>
+        `;
+        item.addEventListener('click', () => {
+          this._state.currentCollection = collection.id;
+          this._state.filterType = 'collection';
+          this._state.currentFolder = null;
+          this._render();
+        });
+        item.addEventListener('contextmenu', (e) => {
+          e.preventDefault();
+          this._showCollectionContextMenu(e, collection);
+        });
+        nav.appendChild(item);
+      });
+      
+      if (this._state.collections.length === 0) {
+        const emptyHint = DomUtils.el('div', { className: 'tc-sidebar-hint', text: 'No collections yet' });
+        nav.appendChild(emptyHint);
+      }
+    }
+    
+    // Canva Folders section
+    if (this._state.folders.length > 0) {
+      const foldersHeader = DomUtils.el('div', { className: 'tc-sidebar-section-header', text: 'Canva Folders' });
+      nav.appendChild(foldersHeader);
+      
+      this._state.folders.forEach(folder => {
+        const item = DomUtils.el('div', {
+          className: `tc-sidebar-item ${this._state.currentFolder === folder.id ? 'active' : ''}`,
+        });
+        item.innerHTML = `
+          <span class="tc-sidebar-icon">📂</span>
+          <span class="tc-sidebar-label">${folder.name}</span>
+        `;
+        item.addEventListener('click', () => {
+          this._state.currentFolder = folder.id;
+          this._state.filterType = 'folder';
+          this._state.currentCollection = null;
+          this._loadDesigns();
+        });
+        nav.appendChild(item);
+      });
+    }
+    
+    // Tools section
+    nav.appendChild(DomUtils.el('div', { className: 'tc-sidebar-divider' }));
+    const toolsHeader = DomUtils.el('div', { className: 'tc-sidebar-section-header', text: 'Tools' });
+    nav.appendChild(toolsHeader);
+    
+    const tools = [
+      { id: 'compare', view: 'compare', icon: '⚖️', label: 'Compare Designs', feature: 'compareView', badge: this._state.compareDesigns.length },
+      { id: 'scheduled', view: 'scheduled', icon: '📅', label: 'Scheduled Exports', feature: 'scheduledExports', badge: this._state.scheduledExports.length },
+      { id: 'analytics', view: 'analytics', icon: '📊', label: 'Analytics', feature: 'analytics' },
+      { id: 'requests', view: 'requests', icon: '📝', label: 'Design Requests', feature: 'designRequests', badge: this._state.designRequests.filter(r => r.status === 'pending').length },
+    ];
+    
+    tools.forEach(tool => {
+      if (tool.feature && !this._config.features[tool.feature]) return;
+      const toolItem = DomUtils.el('div', {
+        className: `tc-sidebar-item ${this._state.currentView === tool.view ? 'active' : ''}`,
+      });
+      toolItem.innerHTML = `
+        <span class="tc-sidebar-icon">${tool.icon}</span>
+        <span class="tc-sidebar-label">${tool.label}</span>
+        ${tool.badge ? `<span class="tc-sidebar-badge">${tool.badge}</span>` : ''}
+      `;
+      toolItem.addEventListener('click', () => {
+        this._state.currentView = tool.view;
+        this._render();
+      });
+      nav.appendChild(toolItem);
+    });
+    
+    sidebar.appendChild(nav);
+    return sidebar;
+  }
+
+  _renderHeader() {
+    const header = DomUtils.el('div', { className: 'tc-header' });
+    
+    const title = DomUtils.el('h2', { 
+      className: 'tc-header-title',
+      text: 'Canva Designs'
+    });
+    
+    const rightSection = DomUtils.el('div', { className: 'tc-header-right' });
+    
+    // Theme picker
+    if (this._config.features.themePicker) {
+      const themePicker = this._renderThemePicker();
+      rightSection.appendChild(themePicker);
+    }
+    
+    const userInfo = DomUtils.el('div', { className: 'tc-user-info' });
+    if (this._state.user) {
+      const avatar = DomUtils.el('div', { className: 'tc-user-avatar' });
+      avatar.textContent = (this._state.user.email || 'U').charAt(0).toUpperCase();
+      userInfo.appendChild(avatar);
+      
+      const email = DomUtils.el('span', { text: this._state.user.email || 'Connected' });
+      userInfo.appendChild(email);
+    }
+    rightSection.appendChild(userInfo);
+    
+    const disconnectBtn = DomUtils.el('button', {
+      className: 'tc-btn tc-btn-secondary tc-btn-small',
+      text: 'Disconnect'
+    });
+    disconnectBtn.addEventListener('click', () => this._disconnect());
+    rightSection.appendChild(disconnectBtn);
+    
+    header.appendChild(title);
+    header.appendChild(rightSection);
+    
+    return header;
+  }
+
+  _renderToolbar() {
+    const toolbar = DomUtils.el('div', { className: 'tc-toolbar' });
+    
+    const leftSection = DomUtils.el('div', { className: 'tc-toolbar-left' });
+    const rightSection = DomUtils.el('div', { className: 'tc-toolbar-right' });
+    
+    // Search
+    if (this._config.features.search) {
+      const searchWrapper = DomUtils.el('div', { className: 'tc-search-wrapper' });
+      searchWrapper.innerHTML = `<span class="tc-search-icon">🔍</span>`;
+      const searchInput = DomUtils.el('input', {
+        className: 'tc-search-input',
+        attrs: { type: 'text', placeholder: 'Search designs...' }
+      });
+      searchInput.value = this._state.searchQuery;
+      searchInput.addEventListener('input', (e) => {
+        this._state.searchQuery = e.target.value;
+        this._filterDesigns();
+      });
+      searchWrapper.appendChild(searchInput);
+      leftSection.appendChild(searchWrapper);
+    }
+    
+    // Bulk actions (when items selected)
+    if (this._config.features.bulkActions && this._state.selectedDesigns.size > 0) {
+      const bulkActions = DomUtils.el('div', { className: 'tc-bulk-actions' });
+      bulkActions.innerHTML = `
+        <span class="tc-bulk-count">${this._state.selectedDesigns.size} selected</span>
+        <button class="tc-btn tc-btn-small" data-action="export">Export All</button>
+        <button class="tc-btn tc-btn-small" data-action="favorite">Add to Favorites</button>
+        <button class="tc-btn tc-btn-small tc-btn-ghost" data-action="clear">Clear</button>
+      `;
+      bulkActions.addEventListener('click', (e) => {
+        const action = e.target.dataset.action;
+        if (action === 'export') this._bulkExport();
+        else if (action === 'favorite') this._bulkFavorite();
+        else if (action === 'clear') { this._state.selectedDesigns.clear(); this._render(); }
+      });
+      leftSection.appendChild(bulkActions);
+    }
+    
+    // Sorting
+    if (this._config.features.sorting) {
+      const sortWrapper = DomUtils.el('div', { className: 'tc-sort-wrapper' });
+      const sortSelect = DomUtils.el('select', { className: 'tc-sort-select' });
+      const sortOptions = [
+        { value: 'updated_at', label: 'Last Modified' },
+        { value: 'created_at', label: 'Date Created' },
+        { value: 'title', label: 'Name' },
+      ];
+      sortOptions.forEach(opt => {
+        const option = DomUtils.el('option', { text: opt.label, attrs: { value: opt.value } });
+        if (this._state.sortBy === opt.value) option.selected = true;
+        sortSelect.appendChild(option);
+      });
+      sortSelect.addEventListener('change', (e) => {
+        this._state.sortBy = e.target.value;
+        this._render();
+      });
+      
+      const sortOrderBtn = DomUtils.el('button', {
+        className: 'tc-btn tc-btn-icon',
+        text: this._state.sortOrder === 'desc' ? '↓' : '↑'
+      });
+      sortOrderBtn.addEventListener('click', () => {
+        this._state.sortOrder = this._state.sortOrder === 'desc' ? 'asc' : 'desc';
+        this._render();
+      });
+      
+      sortWrapper.appendChild(sortSelect);
+      sortWrapper.appendChild(sortOrderBtn);
+      rightSection.appendChild(sortWrapper);
+    }
+    
+    // View toggle
+    if (this._config.features.viewToggle) {
+      const viewToggle = DomUtils.el('div', { className: 'tc-view-toggle' });
+      const gridBtn = DomUtils.el('button', {
+        className: `tc-btn tc-btn-icon ${this._state.viewMode === 'grid' ? 'active' : ''}`,
+        attrs: { title: 'Grid view' }
+      });
+      gridBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>`;
+      gridBtn.addEventListener('click', () => { this._state.viewMode = 'grid'; this._render(); });
+      
+      const listBtn = DomUtils.el('button', {
+        className: `tc-btn tc-btn-icon ${this._state.viewMode === 'list' ? 'active' : ''}`,
+        attrs: { title: 'List view' }
+      });
+      listBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="14" height="3" rx="1"/><rect x="1" y="7" width="14" height="3" rx="1"/><rect x="1" y="12" width="14" height="3" rx="1"/></svg>`;
+      listBtn.addEventListener('click', () => { this._state.viewMode = 'list'; this._render(); });
+      
+      viewToggle.appendChild(gridBtn);
+      viewToggle.appendChild(listBtn);
+      rightSection.appendChild(viewToggle);
+    }
+    
+    // Create new
+    if (this._config.features.createNew) {
+      const createBtn = DomUtils.el('button', { className: 'tc-btn tc-btn-primary' });
+      createBtn.innerHTML = `<span class="tc-btn-icon-left">+</span> Create New`;
+      createBtn.addEventListener('click', () => this._createNewDesign());
+      rightSection.appendChild(createBtn);
+    }
+    
+    // Refresh
+    const refreshBtn = DomUtils.el('button', { className: 'tc-btn tc-btn-icon', attrs: { title: 'Refresh' } });
+    refreshBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z"/></svg>`;
+    refreshBtn.addEventListener('click', () => this._loadDesigns());
+    rightSection.appendChild(refreshBtn);
+    
+    toolbar.appendChild(leftSection);
+    toolbar.appendChild(rightSection);
+    
+    return toolbar;
+  }
+
+  _renderContent() {
+    const content = DomUtils.el('div', { className: 'tc-content' });
+    
+    if (this._state.isLoading) {
+      const loader = DomUtils.el('div', { className: 'tc-loader' });
+      loader.innerHTML = `
+        <div class="tc-loader-spinner"></div>
+        <p>Loading your designs...</p>
+      `;
+      content.appendChild(loader);
+      return content;
+    }
+    
+    // Route to different views based on currentView
+    switch (this._state.currentView) {
+      case 'brandKit':
+        content.appendChild(this._renderBrandKitView());
+        return content;
+      case 'templates':
+        content.appendChild(this._renderTemplatesView());
+        return content;
+      case 'assets':
+        content.appendChild(this._renderAssetLibraryView());
+        return content;
+      case 'compare':
+        content.appendChild(this._renderCompareView());
+        return content;
+      case 'scheduled':
+        content.appendChild(this._renderScheduledView());
+        return content;
+      case 'analytics':
+        content.appendChild(this._renderAnalyticsView());
+        return content;
+      case 'requests':
+        content.appendChild(this._renderRequestsView());
+        return content;
+      case 'gallery':
+      default:
+        break;
+    }
+    
+    // Gallery view (default)
+    const designs = this._getSortedFilteredDesigns();
+    
+    if (designs.length === 0) {
+      content.appendChild(this._renderEmptyState());
+      return content;
+    }
+    
+    // Stats bar
+    const statsBar = DomUtils.el('div', { className: 'tc-stats-bar' });
+    statsBar.innerHTML = `
+      <span>${designs.length} design${designs.length !== 1 ? 's' : ''}</span>
+      ${this._state.selectedDesigns.size > 0 ? `<span class="tc-selected-count">${this._state.selectedDesigns.size} selected</span>` : ''}
+    `;
+    content.appendChild(statsBar);
+    
+    // Design grid or list
+    if (this._state.viewMode === 'grid') {
+      content.appendChild(this._renderDesignGrid(designs));
+    } else {
+      content.appendChild(this._renderDesignList(designs));
+    }
+    
+    // Load more button
+    if (this._state.hasMore) {
+      const loadMore = DomUtils.el('button', { 
+        className: 'tc-btn tc-btn-secondary tc-load-more',
+        text: 'Load More Designs'
+      });
+      loadMore.addEventListener('click', () => this._loadMoreDesigns());
+      content.appendChild(loadMore);
+    }
+    
+    return content;
+  }
+
+  _getSortedFilteredDesigns() {
+    let designs = [...this._state.designs];
+    
+    // Apply filter
+    if (this._state.filterType === 'favorites') {
+      designs = designs.filter(d => this._state.favorites.has(d.id));
+    } else if (this._state.filterType === 'recent') {
+      const recentIds = new Set(this._state.recentlyViewed);
+      designs = designs.filter(d => recentIds.has(d.id));
+    } else if (this._state.filterType === 'collection' && this._state.currentCollection) {
+      const collection = this._state.collections.find(c => c.id === this._state.currentCollection);
+      if (collection) {
+        const collectionIds = new Set(collection.designIds);
+        designs = designs.filter(d => collectionIds.has(d.id));
+      }
+    }
+    
+    // Apply search
+    if (this._state.searchQuery) {
+      const query = this._state.searchQuery.toLowerCase();
+      designs = designs.filter(d => (d.title || '').toLowerCase().includes(query));
+    }
+    
+    // Apply sort
+    designs.sort((a, b) => {
+      let aVal, bVal;
+      if (this._state.sortBy === 'title') {
+        aVal = (a.title || '').toLowerCase();
+        bVal = (b.title || '').toLowerCase();
+        return this._state.sortOrder === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      } else {
+        aVal = a[this._state.sortBy] || 0;
+        bVal = b[this._state.sortBy] || 0;
+        return this._state.sortOrder === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+    });
+    
+    return designs;
+  }
+
+  _renderDesignGrid(designs) {
+    const grid = DomUtils.el('div', { className: 'tc-design-grid' });
+    designs.forEach(design => {
+      grid.appendChild(this._renderDesignCard(design));
+    });
+    return grid;
+  }
+
+  _renderDesignList(designs) {
+    const list = DomUtils.el('div', { className: 'tc-design-list' });
+    designs.forEach(design => {
+      list.appendChild(this._renderDesignListItem(design));
+    });
+    return list;
+  }
+
+  _renderDesignListItem(design) {
+    const row = DomUtils.el('div', { 
+      className: `tc-design-row ${this._state.selectedDesigns.has(design.id) ? 'selected' : ''}` 
+    });
+    
+    // Checkbox for selection
+    if (this._config.features.bulkActions) {
+      const checkbox = DomUtils.el('input', { 
+        className: 'tc-design-checkbox',
+        attrs: { type: 'checkbox' }
+      });
+      checkbox.checked = this._state.selectedDesigns.has(design.id);
+      checkbox.addEventListener('change', (e) => {
+        e.stopPropagation();
+        this._toggleSelection(design.id);
+      });
+      row.appendChild(checkbox);
+    }
+    
+    // Thumbnail
+    const thumb = DomUtils.el('div', { className: 'tc-row-thumbnail' });
+    if (design.thumbnail?.url) {
+      thumb.innerHTML = `<img src="${design.thumbnail.url}" alt="${design.title || ''}">`;
+    }
+    row.appendChild(thumb);
+    
+    // Info
+    const info = DomUtils.el('div', { className: 'tc-row-info' });
+    info.innerHTML = `
+      <div class="tc-row-title">${design.title || 'Untitled'}</div>
+      <div class="tc-row-meta">${design.page_count || 1} page${(design.page_count || 1) > 1 ? 's' : ''} • ${DomUtils.formatDate(design.updated_at)}</div>
+    `;
+    row.appendChild(info);
+    
+    // Favorite button
+    if (this._config.features.favorites) {
+      const favBtn = DomUtils.el('button', { 
+        className: `tc-btn tc-btn-icon tc-fav-btn ${this._state.favorites.has(design.id) ? 'active' : ''}` 
+      });
+      favBtn.innerHTML = this._state.favorites.has(design.id) ? '★' : '☆';
+      favBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleFavorite(design.id); });
+      row.appendChild(favBtn);
+    }
+    
+    // Actions
+    const actions = DomUtils.el('div', { className: 'tc-row-actions' });
+    actions.innerHTML = `
+      <button class="tc-btn tc-btn-small" data-action="open">Open</button>
+      <button class="tc-btn tc-btn-small" data-action="export">Export</button>
+      <button class="tc-btn tc-btn-icon" data-action="menu">⋮</button>
+    `;
+    actions.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const action = e.target.dataset.action;
+      if (action === 'open') this._openDesign(design);
+      else if (action === 'export') this._showExportModal(design);
+      else if (action === 'menu') this._showContextMenu(e, design);
+    });
+    row.appendChild(actions);
+    
+    // Click to preview
+    row.addEventListener('click', () => this._showPreview(design));
+    row.addEventListener('contextmenu', (e) => { e.preventDefault(); this._showContextMenu(e, design); });
+    
+    return row;
+  }
+
+  _renderDesignCard(design) {
+    const card = DomUtils.el('div', { 
+      className: `tc-design-card ${this._state.selectedDesigns.has(design.id) ? 'selected' : ''}` 
+    });
+    
+    // Thumbnail with overlay
+    const thumbnail = DomUtils.el('div', { className: 'tc-design-thumbnail' });
+    if (design.thumbnail?.url) {
+      thumbnail.innerHTML = `<img src="${design.thumbnail.url}" alt="${design.title || ''}" loading="lazy">`;
+    }
+    
+    // Overlay with quick actions
+    const overlay = DomUtils.el('div', { className: 'tc-card-overlay' });
+    overlay.innerHTML = `
+      <div class="tc-overlay-actions">
+        <button class="tc-overlay-btn" data-action="preview" title="Preview">👁</button>
+        <button class="tc-overlay-btn" data-action="edit" title="Edit Design">✏️</button>
+        <button class="tc-overlay-btn" data-action="export" title="Export">⬇️</button>
+        <button class="tc-overlay-btn" data-action="menu" title="More">⋮</button>
+      </div>
+    `;
+    overlay.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const action = e.target.closest('[data-action]')?.dataset.action;
+      if (action === 'preview') this._showPreview(design);
+      else if (action === 'edit') this._showEditorModal(design);
+      else if (action === 'export') this._showExportModal(design);
+      else if (action === 'menu') this._showContextMenu(e, design);
+    });
+    thumbnail.appendChild(overlay);
+    
+    // Selection checkbox
+    if (this._config.features.bulkActions) {
+      const checkbox = DomUtils.el('div', { className: 'tc-card-checkbox' });
+      checkbox.innerHTML = `<input type="checkbox" ${this._state.selectedDesigns.has(design.id) ? 'checked' : ''}>`;
+      checkbox.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this._toggleSelection(design.id);
+      });
+      thumbnail.appendChild(checkbox);
+    }
+    
+    // Favorite button - always visible
+    if (this._config.features.favorites) {
+      const favBtn = DomUtils.el('button', { 
+        className: `tc-card-fav-btn ${this._state.favorites.has(design.id) ? 'active' : ''}` 
+      });
+      favBtn.innerHTML = this._state.favorites.has(design.id) ? '★' : '☆';
+      favBtn.title = this._state.favorites.has(design.id) ? 'Remove from favorites' : 'Add to favorites';
+      favBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this._toggleFavorite(design.id);
+      });
+      thumbnail.appendChild(favBtn);
+    }
+    
+    // Info section
+    const info = DomUtils.el('div', { className: 'tc-design-info' });
+    
+    const titleRow = DomUtils.el('div', { className: 'tc-design-title-row' });
+    const title = DomUtils.el('div', { className: 'tc-design-title', text: design.title || 'Untitled' });
+    titleRow.appendChild(title);
+    
+    const meta = DomUtils.el('div', { className: 'tc-design-meta' });
+    meta.innerHTML = `
+      <span>${design.page_count || 1} page${(design.page_count || 1) > 1 ? 's' : ''}</span>
+      <span class="tc-meta-dot">•</span>
+      <span>${DomUtils.formatDate(design.updated_at)}</span>
+    `;
+    
+    info.appendChild(titleRow);
+    info.appendChild(meta);
+    
+    card.appendChild(thumbnail);
+    card.appendChild(info);
+    
+    // Events
+    card.addEventListener('click', () => this._showPreview(design));
+    card.addEventListener('contextmenu', (e) => { e.preventDefault(); this._showContextMenu(e, design); });
+    
+    return card;
+  }
+
+  _renderPreviewModal() {
+    const design = this._state.previewDesign;
+    if (!design) return;
+    
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-preview-modal">
+        <div class="tc-preview-header">
+          <h3>${design.title || 'Untitled'}</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-preview-body">
+          <div class="tc-preview-image">
+            ${design.thumbnail?.url ? `<img src="${design.thumbnail.url}" alt="${design.title || ''}">` : '<div class="tc-preview-placeholder">No preview available</div>'}
+          </div>
+          <div class="tc-preview-details">
+            <div class="tc-detail-row"><span class="tc-detail-label">Pages</span><span>${design.page_count || 1}</span></div>
+            <div class="tc-detail-row"><span class="tc-detail-label">Created</span><span>${DomUtils.formatDate(design.created_at)}</span></div>
+            <div class="tc-detail-row"><span class="tc-detail-label">Modified</span><span>${DomUtils.formatDate(design.updated_at)}</span></div>
+          </div>
+        </div>
+        <div class="tc-preview-footer">
+          <button class="tc-btn tc-btn-secondary" data-action="favorite">${this._state.favorites.has(design.id) ? '★ Remove from Favorites' : '☆ Add to Favorites'}</button>
+          <div class="tc-preview-actions">
+            <button class="tc-btn tc-btn-secondary" data-action="export">Export</button>
+            <button class="tc-btn tc-btn-primary" data-action="open">Open in Canva</button>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    // Event handlers
+    modal.querySelector('.tc-modal-close').addEventListener('click', () => this._closePreview());
+    modal.addEventListener('click', (e) => { if (e.target === modal) this._closePreview(); });
+    modal.querySelector('[data-action="open"]').addEventListener('click', () => this._openDesign(design));
+    modal.querySelector('[data-action="export"]').addEventListener('click', () => this._showExportModal(design));
+    modal.querySelector('[data-action="favorite"]').addEventListener('click', () => {
+      this._toggleFavorite(design.id);
+      this._render();
+    });
+    
+    this._container.appendChild(modal);
+    
+    // Track as recently viewed
+    this._addToRecentlyViewed(design.id);
+  }
+
+  _renderContextMenu() {
+    const { event, design } = this._state.contextMenuTarget;
+    
+    const menu = DomUtils.el('div', { className: 'tc-context-menu' });
+    menu.style.left = `${event.clientX}px`;
+    menu.style.top = `${event.clientY}px`;
+    
+    const items = [
+      { icon: '👁', label: 'Preview', action: 'preview' },
+      { icon: '✏️', label: 'Edit Design', action: 'edit' },
+      { icon: '🔗', label: 'Open in Browser', action: 'open' },
+      { icon: '⬇️', label: 'Export', action: 'export' },
+      { divider: true },
+      { icon: this._state.favorites.has(design.id) ? '★' : '☆', label: this._state.favorites.has(design.id) ? 'Remove from Favorites' : 'Add to Favorites', action: 'favorite' },
+      { icon: '📁', label: 'Add to Collection', action: 'add-to-collection', hasSubmenu: true },
+      { icon: '📝', label: 'Notes & Tags', action: 'annotations' },
+      { icon: '📦', label: 'Add to Asset Library', action: 'add-asset' },
+      { icon: '⚖️', label: 'Add to Compare', action: 'add-compare' },
+      { icon: '📋', label: 'Quick Insert', action: 'quick-insert' },
+      { divider: true },
+      { icon: '🗑️', label: 'Delete', action: 'delete', danger: true },
+    ];
+    
+    // If viewing a collection, add "Remove from this collection" option
+    if (this._state.filterType === 'collection' && this._state.currentCollection) {
+      items.splice(6, 0, { icon: '➖', label: 'Remove from Collection', action: 'remove-from-collection' });
+    }
+    
+    items.forEach(item => {
+      if (item.divider) {
+        menu.appendChild(DomUtils.el('div', { className: 'tc-context-divider' }));
+      } else {
+        const menuItem = DomUtils.el('div', { 
+          className: `tc-context-item ${item.danger ? 'danger' : ''} ${item.hasSubmenu ? 'has-submenu' : ''}` 
+        });
+        menuItem.innerHTML = `<span class="tc-context-icon">${item.icon}</span><span>${item.label}</span>${item.hasSubmenu ? '<span class="tc-submenu-arrow">▶</span>' : ''}`;
+        
+        if (item.action === 'add-to-collection') {
+          // Show submenu with collections
+          menuItem.addEventListener('mouseenter', () => this._showCollectionSubmenu(menuItem, design));
+          menuItem.addEventListener('mouseleave', (e) => {
+            const submenu = menuItem.querySelector('.tc-submenu');
+            if (submenu && !submenu.contains(e.relatedTarget)) {
+              submenu.remove();
+            }
+          });
+        } else {
+          menuItem.addEventListener('click', (e) => {
+            this._closeContextMenu();
+            if (item.action === 'preview') this._showPreview(design);
+            else if (item.action === 'edit') this._showEditorModal(design);
+            else if (item.action === 'open') this._openDesign(design);
+            else if (item.action === 'export') this._showExportModal(design);
+            else if (item.action === 'favorite') this._toggleFavorite(design.id);
+            else if (item.action === 'copy-link') this._copyDesignLink(design);
+            else if (item.action === 'delete') this._confirmDelete(design);
+            else if (item.action === 'remove-from-collection') this._removeFromCollection(design.id, this._state.currentCollection);
+            else if (item.action === 'annotations') this._showAnnotationsModal(design);
+            else if (item.action === 'add-asset') this._addToAssetLibrary(design.id);
+            else if (item.action === 'add-compare') this._addToCompare(design.id);
+            else if (item.action === 'quick-insert') this._showQuickInsertMenu(design, e);
+          });
+        }
+        menu.appendChild(menuItem);
+      }
+    });
+    
+    // Close on click outside
+    const closeHandler = (e) => {
+      if (!menu.contains(e.target)) {
+        this._closeContextMenu();
+        document.removeEventListener('click', closeHandler);
+      }
+    };
+    setTimeout(() => document.addEventListener('click', closeHandler), 0);
+    
+    this._container.appendChild(menu);
+  }
+
+  _showCollectionSubmenu(parentItem, design) {
+    // Remove any existing submenu
+    const existing = parentItem.querySelector('.tc-submenu');
+    if (existing) return;
+    
+    const submenu = DomUtils.el('div', { className: 'tc-submenu' });
+    
+    if (this._state.collections.length === 0) {
+      const emptyItem = DomUtils.el('div', { className: 'tc-context-item disabled', text: 'No collections' });
+      submenu.appendChild(emptyItem);
+    } else {
+      this._state.collections.forEach(collection => {
+        const isInCollection = collection.designIds.includes(design.id);
+        const item = DomUtils.el('div', { 
+          className: `tc-context-item ${isInCollection ? 'checked' : ''}` 
+        });
+        item.innerHTML = `
+          <span class="tc-sidebar-icon" style="color: ${collection.color}">●</span>
+          <span>${collection.name}</span>
+          ${isInCollection ? '<span class="tc-check">✓</span>' : ''}
+        `;
+        item.addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (isInCollection) {
+            this._removeFromCollection(design.id, collection.id);
+          } else {
+            this._addToCollection(design.id, collection.id);
+          }
+          this._closeContextMenu();
+        });
+        submenu.appendChild(item);
+      });
+    }
+    
+    // Add "Create new collection" option
+    submenu.appendChild(DomUtils.el('div', { className: 'tc-context-divider' }));
+    const createItem = DomUtils.el('div', { className: 'tc-context-item' });
+    createItem.innerHTML = `<span class="tc-context-icon">+</span><span>Create Collection</span>`;
+    createItem.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this._closeContextMenu();
+      this._showCreateCollectionModal();
+    });
+    submenu.appendChild(createItem);
+    
+    parentItem.appendChild(submenu);
+  }
+
+  _showExportModal(design) {
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-export-modal">
+        <div class="tc-modal-header">
+          <h3>Export "${design.title || 'Untitled'}"</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-export-options">
+            <label class="tc-export-option">
+              <input type="radio" name="format" value="png" checked>
+              <div class="tc-export-option-content">
+                <span class="tc-export-icon">🖼️</span>
+                <div>
+                  <div class="tc-export-format">PNG</div>
+                  <div class="tc-export-desc">High quality image</div>
+                </div>
+              </div>
+            </label>
+            <label class="tc-export-option">
+              <input type="radio" name="format" value="pdf">
+              <div class="tc-export-option-content">
+                <span class="tc-export-icon">📄</span>
+                <div>
+                  <div class="tc-export-format">PDF</div>
+                  <div class="tc-export-desc">Document format</div>
+                </div>
+              </div>
+            </label>
+            <label class="tc-export-option">
+              <input type="radio" name="format" value="jpg">
+              <div class="tc-export-option-content">
+                <span class="tc-export-icon">📷</span>
+                <div>
+                  <div class="tc-export-format">JPG</div>
+                  <div class="tc-export-desc">Compressed image</div>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div class="tc-modal-footer">
+          <button class="tc-btn tc-btn-secondary tc-modal-cancel">Cancel</button>
+          <button class="tc-btn tc-btn-primary tc-export-confirm">Export</button>
+        </div>
+      </div>
+    `;
+    
+    modal.querySelector('.tc-modal-close').addEventListener('click', () => modal.remove());
+    modal.querySelector('.tc-modal-cancel').addEventListener('click', () => modal.remove());
+    modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
+    modal.querySelector('.tc-export-confirm').addEventListener('click', async () => {
+      const format = modal.querySelector('input[name="format"]:checked').value;
+      modal.remove();
+      await this._exportDesign(design, format);
+    });
+    
+    this._container.appendChild(modal);
+  }
+
+  _getFilteredDesigns() {
+    if (!this._state.searchQuery) {
+      return this._state.designs;
+    }
+    
+    const query = this._state.searchQuery.toLowerCase();
+    return this._state.designs.filter(d => 
+      (d.title || '').toLowerCase().includes(query)
+    );
+  }
+
+  _filterDesigns() {
+    const content = this._container.querySelector('.tc-content');
+    if (content) {
+      const newContent = this._renderContent();
+      content.replaceWith(newContent);
+    }
+  }
+
+  // Helper methods for new features
+  _toggleSelection(designId) {
+    if (this._state.selectedDesigns.has(designId)) {
+      this._state.selectedDesigns.delete(designId);
+    } else {
+      this._state.selectedDesigns.add(designId);
+    }
+    this._render();
+  }
+
+  _toggleFavorite(designId) {
+    if (this._state.favorites.has(designId)) {
+      this._state.favorites.delete(designId);
+    } else {
+      this._state.favorites.add(designId);
+    }
+    this._persistFavorites(); // Save to disk
+    this._render();
+  }
+
+  _addToRecentlyViewed(designId) {
+    const recent = this._state.recentlyViewed.filter(id => id !== designId);
+    recent.unshift(designId);
+    this._state.recentlyViewed = recent.slice(0, 20); // Keep last 20
+  }
+
+  _showPreview(design) {
+    this._state.previewDesign = design;
+    this._render();
+  }
+
+  _closePreview() {
+    this._state.previewDesign = null;
+    this._render();
+  }
+
+  _showContextMenu(event, design) {
+    this._state.contextMenuTarget = { event, design };
+    this._render();
+  }
+
+  _closeContextMenu() {
+    this._state.contextMenuTarget = null;
+    const menu = this._container.querySelector('.tc-context-menu');
+    if (menu) menu.remove();
+  }
+
+  _copyDesignLink(design) {
+    const link = design.urls?.view_url || design.urls?.edit_url || '';
+    if (link && navigator.clipboard) {
+      navigator.clipboard.writeText(link).then(() => {
+        this._showToast('Link copied to clipboard');
+      });
+    }
+  }
+
+  _confirmDelete(design) {
+    if (confirm(`Are you sure you want to delete "${design.title || 'Untitled'}"? This cannot be undone.`)) {
+      // Note: Canva API doesn't support delete, so we just show a message
+      this._showToast('Delete is not supported via API. Please delete in Canva.');
+    }
+  }
+
+  _showToast(message) {
+    const existing = this._container.querySelector('.tc-toast');
+    if (existing) existing.remove();
+    
+    const toast = DomUtils.el('div', { className: 'tc-toast', text: message });
+    this._container.appendChild(toast);
+    
+    setTimeout(() => toast.classList.add('show'), 10);
+    setTimeout(() => {
+      toast.classList.remove('show');
+      setTimeout(() => toast.remove(), 300);
+    }, 3000);
+  }
+
+  async _bulkExport() {
+    const designs = this._state.designs.filter(d => this._state.selectedDesigns.has(d.id));
+    this._showToast(`Exporting ${designs.length} designs...`);
+    
+    for (const design of designs) {
+      await this._exportDesign(design, 'png');
+    }
+    
+    this._state.selectedDesigns.clear();
+    this._render();
+  }
+
+  _bulkFavorite() {
+    for (const id of this._state.selectedDesigns) {
+      this._state.favorites.add(id);
+    }
+    this._state.selectedDesigns.clear();
+    this._persistFavorites(); // Save to disk
+    this._showToast('Added to favorites');
+    this._render();
+  }
+
+  async _loadMoreDesigns() {
+    if (!this._state.continuation) return;
+    
+    try {
+      const tokens = await this._config.onGetToken(this._config.currentUserId);
+      const channel = `${this._config.channelPrefix}:list-designs`;
+      const result = await window.electron.invoke(channel, {
+        userId: this._config.currentUserId,
+        accessToken: tokens.access_token,
+        continuation: this._state.continuation
+      });
+      
+      this._state.designs = [...this._state.designs, ...(result.items || [])];
+      this._state.continuation = result.continuation || null;
+      this._state.hasMore = !!result.continuation;
+      this._render();
+      
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load more:', err);
+    }
+  }
+
+  async _loadFolders() {
+    try {
+      const tokens = await this._config.onGetToken(this._config.currentUserId);
+      const channel = `${this._config.channelPrefix}:list-folders`;
+      const result = await window.electron.invoke(channel, {
+        userId: this._config.currentUserId,
+        accessToken: tokens.access_token
+      });
+      
+      this._state.folders = result.items || [];
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load folders:', err);
+    }
+  }
+
+  async _startOAuthFlow() {
+    try {
+      const { verifier, challenge } = await PKCEUtils.generatePKCE();
+      
+      // Store verifier for later token exchange
+      this._state.authState = verifier;
+      
+      // Request OAuth URL from backend
+      const channel = `${this._config.channelPrefix}:get-auth-url`;
+      const authUrl = await window.electron.invoke(channel, {
+        codeChallenge: challenge,
+        userId: this._config.currentUserId
+      });
+      
+      // Open auth URL in browser
+      window.electron.invoke('open-external', authUrl);
+      
+      // Show waiting state
+      this._showAuthWaiting();
+      
+    } catch (err) {
+      console.error('[TacelCanva] OAuth flow failed:', err);
+      alert('Failed to start authentication. Please try again.');
+    }
+  }
+
+  _showAuthWaiting() {
+    DomUtils.clear(this._container);
+    
+    const waiting = DomUtils.el('div', { className: 'tc-auth-waiting' });
+    waiting.innerHTML = `
+      <div class="tc-auth-spinner"></div>
+      <h3>Waiting for authorization...</h3>
+      <p>Complete the authorization in your browser, then return here.</p>
+      <button class="tc-btn tc-btn-secondary">Cancel</button>
+    `;
+    
+    const cancelBtn = waiting.querySelector('button');
+    cancelBtn.addEventListener('click', () => {
+      this._state.authState = null;
+      this._render();
+    });
+    
+    this._container.appendChild(waiting);
+  }
+
+  async completeOAuth(code) {
+    if (!this._state.authState) {
+      console.error('[TacelCanva] No auth state found');
+      return;
+    }
+    
+    try {
+      const channel = `${this._config.channelPrefix}:exchange-token`;
+      const tokens = await window.electron.invoke(channel, {
+        code,
+        codeVerifier: this._state.authState,
+        userId: this._config.currentUserId
+      });
+      
+      // Save tokens via callback
+      await this._config.onSaveToken(this._config.currentUserId, tokens);
+      
+      this._state.isAuthenticated = true;
+      this._state.authState = null;
+      
+      await this._loadDesigns();
+      this._render();
+      
+    } catch (err) {
+      console.error('[TacelCanva] Token exchange failed:', err);
+      alert('Authentication failed. Please try again.');
+      this._state.authState = null;
+      this._render();
+    }
+  }
+
+  async _loadDesigns() {
+    this._state.isLoading = true;
+    this._render();
+    
+    try {
+      const tokens = await this._config.onGetToken(this._config.currentUserId);
+      if (!tokens) {
+        throw new Error('No tokens found');
+      }
+      
+      // Try to load from cache first for instant display
+      const cached = await this._loadDesignsFromCache();
+      if (cached && cached.designs && cached.designs.length > 0) {
+        this._state.designs = cached.designs;
+        this._state.isLoading = false;
+        this._render();
+        console.log(`[TacelCanva] Loaded ${cached.designs.length} designs from cache (last sync: ${cached.lastSync})`);
+        
+        // Load other data while showing cached designs
+        await this._loadPersistedFavorites();
+        await this._loadCollections();
+        this._render();
+        
+        // Background sync - fetch fresh data and update if changed
+        this._backgroundSyncDesigns(tokens);
+        return;
+      }
+      
+      // No cache - do full load
+      await this._fullLoadDesigns(tokens);
+      
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load designs:', err);
+      if (err.message.includes('401') || err.message.includes('token')) {
+        this._state.isAuthenticated = false;
+      }
+    } finally {
+      this._state.isLoading = false;
+      this._render();
+    }
+  }
+
+  async _loadDesignsFromCache() {
+    try {
+      return await window.electron.invoke('get-canva-designs-cache', this._config.currentUserId);
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load cache:', err);
+      return null;
+    }
+  }
+
+  async _saveDesignsToCache(designs) {
+    try {
+      await window.electron.invoke('save-canva-designs-cache', {
+        userId: this._config.currentUserId,
+        designs,
+        lastSync: new Date().toISOString()
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save cache:', err);
+    }
+  }
+
+  async _fullLoadDesigns(tokens) {
+    // Load ALL designs by following pagination
+    let allDesigns = [];
+    let continuation = null;
+    let pageCount = 0;
+    const maxPages = 20; // Safety limit
+    
+    do {
+      const channel = `${this._config.channelPrefix}:list-designs`;
+      const result = await window.electron.invoke(channel, {
+        userId: this._config.currentUserId,
+        accessToken: tokens.access_token,
+        continuation: continuation
+      });
+      
+      const items = result.items || [];
+      allDesigns = [...allDesigns, ...items];
+      continuation = result.continuation || null;
+      pageCount++;
+      
+      console.log(`[TacelCanva] Loaded page ${pageCount}: ${items.length} designs (total: ${allDesigns.length})`);
+      
+    } while (continuation && pageCount < maxPages);
+    
+    this._state.designs = allDesigns;
+    this._state.continuation = continuation;
+    this._state.hasMore = !!continuation;
+    
+    console.log(`[TacelCanva] Total designs loaded: ${allDesigns.length}`);
+    
+    // Save to cache
+    await this._saveDesignsToCache(allDesigns);
+    
+    // Load other data
+    await this._loadPersistedFavorites();
+    await this._loadCollections();
+  }
+
+  async _backgroundSyncDesigns(tokens) {
+    console.log('[TacelCanva] Starting background sync...');
+    
+    try {
+      // Fetch first page to check for changes
+      const channel = `${this._config.channelPrefix}:list-designs`;
+      const result = await window.electron.invoke(channel, {
+        userId: this._config.currentUserId,
+        accessToken: tokens.access_token
+      });
+      
+      const freshItems = result.items || [];
+      const cachedIds = new Set(this._state.designs.map(d => d.id));
+      const freshIds = new Set(freshItems.map(d => d.id));
+      
+      // Check if there are new designs or updates
+      let hasChanges = false;
+      for (const item of freshItems) {
+        if (!cachedIds.has(item.id)) {
+          hasChanges = true;
+          break;
+        }
+        // Check if updated_at changed
+        const cached = this._state.designs.find(d => d.id === item.id);
+        if (cached && cached.updated_at !== item.updated_at) {
+          hasChanges = true;
+          break;
+        }
+      }
+      
+      if (hasChanges || result.continuation) {
+        console.log('[TacelCanva] Changes detected, doing full refresh...');
+        await this._fullLoadDesigns(tokens);
+        this._render();
+        this._showToast('Designs updated');
+      } else {
+        console.log('[TacelCanva] No changes detected, cache is up to date');
+      }
+      
+    } catch (err) {
+      console.error('[TacelCanva] Background sync failed:', err);
+    }
+  }
+
+  async _loadPersistedFavorites() {
+    try {
+      const favorites = await window.electron.invoke('get-canva-favorites', this._config.currentUserId);
+      if (favorites && Array.isArray(favorites)) {
+        this._state.favorites = new Set(favorites);
+      }
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load favorites:', err);
+    }
+  }
+
+  async _persistFavorites() {
+    try {
+      const favorites = Array.from(this._state.favorites);
+      await window.electron.invoke('save-canva-favorites', {
+        userId: this._config.currentUserId,
+        favorites
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save favorites:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // COLLECTIONS MANAGEMENT
+  // ═══════════════════════════════════════════════════════════════
+
+  async _loadCollections() {
+    try {
+      const collections = await window.electron.invoke('get-canva-collections', this._config.currentUserId);
+      if (collections && Array.isArray(collections)) {
+        this._state.collections = collections;
+      }
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load collections:', err);
+    }
+  }
+
+  async _persistCollections() {
+    try {
+      await window.electron.invoke('save-canva-collections', {
+        userId: this._config.currentUserId,
+        collections: this._state.collections
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save collections:', err);
+    }
+  }
+
+  _showCreateCollectionModal() {
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-collection-modal">
+        <div class="tc-modal-header">
+          <h3>Create Collection</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-form-group">
+            <label>Collection Name</label>
+            <input type="text" class="tc-input" placeholder="My Collection" autofocus>
+          </div>
+          <div class="tc-form-group">
+            <label>Color</label>
+            <div class="tc-color-picker">
+              ${['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899', '#6b7280'].map(c => 
+                `<button class="tc-color-option" data-color="${c}" style="background: ${c}"></button>`
+              ).join('')}
+            </div>
+          </div>
+        </div>
+        <div class="tc-modal-footer">
+          <button class="tc-btn tc-btn-secondary tc-modal-cancel">Cancel</button>
+          <button class="tc-btn tc-btn-primary tc-create-collection-btn">Create</button>
+        </div>
+      </div>
+    `;
+    
+    let selectedColor = '#3b82f6';
+    const colorOptions = modal.querySelectorAll('.tc-color-option');
+    colorOptions.forEach(opt => {
+      if (opt.dataset.color === selectedColor) opt.classList.add('selected');
+      opt.addEventListener('click', () => {
+        colorOptions.forEach(o => o.classList.remove('selected'));
+        opt.classList.add('selected');
+        selectedColor = opt.dataset.color;
+      });
+    });
+    
+    const input = modal.querySelector('input');
+    const createBtn = modal.querySelector('.tc-create-collection-btn');
+    
+    const close = () => modal.remove();
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.querySelector('.tc-modal-cancel').addEventListener('click', close);
+    modal.addEventListener('click', (e) => { if (e.target === modal) close(); });
+    
+    createBtn.addEventListener('click', () => {
+      const name = input.value.trim();
+      if (!name) {
+        input.focus();
+        return;
+      }
+      this._createCollection(name, selectedColor);
+      close();
+    });
+    
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') createBtn.click();
+    });
+    
+    this._container.appendChild(modal);
+    input.focus();
+  }
+
+  _createCollection(name, color) {
+    const collection = {
+      id: `col_${Date.now()}`,
+      name,
+      color,
+      designIds: [],
+      createdAt: new Date().toISOString(),
+    };
+    this._state.collections.push(collection);
+    this._persistCollections();
+    this._showToast(`Collection "${name}" created`);
+    this._render();
+  }
+
+  _showCollectionContextMenu(event, collection) {
+    const menu = DomUtils.el('div', { className: 'tc-context-menu' });
+    menu.style.left = `${event.clientX}px`;
+    menu.style.top = `${event.clientY}px`;
+    
+    const items = [
+      { icon: '✏️', label: 'Rename', action: 'rename' },
+      { icon: '🎨', label: 'Change Color', action: 'color' },
+      { divider: true },
+      { icon: '🗑️', label: 'Delete Collection', action: 'delete', danger: true },
+    ];
+    
+    items.forEach(item => {
+      if (item.divider) {
+        menu.appendChild(DomUtils.el('div', { className: 'tc-context-divider' }));
+      } else {
+        const menuItem = DomUtils.el('div', { 
+          className: `tc-context-item ${item.danger ? 'danger' : ''}` 
+        });
+        menuItem.innerHTML = `<span class="tc-context-icon">${item.icon}</span><span>${item.label}</span>`;
+        menuItem.addEventListener('click', () => {
+          menu.remove();
+          if (item.action === 'rename') this._renameCollection(collection);
+          else if (item.action === 'color') this._changeCollectionColor(collection);
+          else if (item.action === 'delete') this._deleteCollection(collection);
+        });
+        menu.appendChild(menuItem);
+      }
+    });
+    
+    const closeHandler = (e) => {
+      if (!menu.contains(e.target)) {
+        menu.remove();
+        document.removeEventListener('click', closeHandler);
+      }
+    };
+    setTimeout(() => document.addEventListener('click', closeHandler), 0);
+    
+    this._container.appendChild(menu);
+  }
+
+  _renameCollection(collection) {
+    const newName = prompt('Enter new name:', collection.name);
+    if (newName && newName.trim()) {
+      collection.name = newName.trim();
+      this._persistCollections();
+      this._render();
+    }
+  }
+
+  _changeCollectionColor(collection) {
+    // Simple color picker using prompt (could be enhanced with modal)
+    const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
+    const colorIndex = colors.indexOf(collection.color);
+    const nextColor = colors[(colorIndex + 1) % colors.length];
+    collection.color = nextColor;
+    this._persistCollections();
+    this._showToast('Color updated');
+    this._render();
+  }
+
+  _deleteCollection(collection) {
+    if (!confirm(`Delete collection "${collection.name}"? Designs will not be deleted.`)) return;
+    this._state.collections = this._state.collections.filter(c => c.id !== collection.id);
+    if (this._state.currentCollection === collection.id) {
+      this._state.currentCollection = null;
+      this._state.filterType = 'all';
+    }
+    this._persistCollections();
+    this._showToast('Collection deleted');
+    this._render();
+  }
+
+  _addToCollection(designId, collectionId) {
+    const collection = this._state.collections.find(c => c.id === collectionId);
+    if (collection && !collection.designIds.includes(designId)) {
+      collection.designIds.push(designId);
+      this._persistCollections();
+      this._showToast(`Added to "${collection.name}"`);
+    }
+  }
+
+  _removeFromCollection(designId, collectionId) {
+    const collection = this._state.collections.find(c => c.id === collectionId);
+    if (collection) {
+      collection.designIds = collection.designIds.filter(id => id !== designId);
+      this._persistCollections();
+      this._showToast(`Removed from "${collection.name}"`);
+      this._render();
+    }
+  }
+
+  _openDesign(design) {
+    if (design.urls && design.urls.edit_url) {
+      window.electron.invoke('open-external', design.urls.edit_url);
+    }
+  }
+
+  async _exportDesign(design) {
+    try {
+      const tokens = await this._config.onGetToken(this._config.currentUserId);
+      const channel = `${this._config.channelPrefix}:export-design`;
+      
+      await window.electron.invoke(channel, {
+        userId: this._config.currentUserId,
+        accessToken: tokens.access_token,
+        designId: design.id
+      });
+      
+      alert('Export started. You will be notified when ready.');
+      
+    } catch (err) {
+      console.error('[TacelCanva] Export failed:', err);
+      alert('Failed to export design. Please try again.');
+    }
+  }
+
+  _createNewDesign() {
+    // Open Canva homepage to create new design
+    window.electron.invoke('open-external', 'https://www.canva.com/create');
+  }
+
+  async _disconnect() {
+    if (!confirm('Are you sure you want to disconnect your Canva account?')) {
+      return;
+    }
+    
+    try {
+      await this._config.onRevokeToken(this._config.currentUserId);
+      this._state.isAuthenticated = false;
+      this._state.designs = [];
+      this._state.user = null;
+      this._render();
+    } catch (err) {
+      console.error('[TacelCanva] Disconnect failed:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 1: BRAND KIT VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderBrandKitView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-brand-kit-view' });
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Brand Kit</h2>
+        <p>Access your brand colors, logos, and fonts</p>
+      </div>
+      <div class="tc-brand-kit-content">
+        <div class="tc-brand-section">
+          <h3>Brand Colors</h3>
+          <div class="tc-color-swatches" id="brand-colors">
+            <div class="tc-color-swatch-placeholder">Loading brand colors...</div>
+          </div>
+        </div>
+        <div class="tc-brand-section">
+          <h3>Logos</h3>
+          <div class="tc-brand-logos" id="brand-logos">
+            <div class="tc-logo-placeholder">Loading logos...</div>
+          </div>
+        </div>
+        <div class="tc-brand-section">
+          <h3>Fonts</h3>
+          <div class="tc-brand-fonts" id="brand-fonts">
+            <div class="tc-font-placeholder">Loading fonts...</div>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    // Load brand kit data
+    this._loadBrandKit();
+    
+    return view;
+  }
+
+  async _loadBrandKit() {
+    try {
+      const tokens = await this._config.onGetToken(this._config.currentUserId);
+      if (!tokens) return;
+      
+      // Note: Canva Brand Kit API requires specific permissions
+      // For now, show placeholder with manual color entry
+      const colorsEl = this._container.querySelector('#brand-colors');
+      if (colorsEl) {
+        colorsEl.innerHTML = `
+          <div class="tc-brand-colors-grid">
+            <div class="tc-add-color-btn" title="Add brand color">
+              <span>+</span>
+              <span>Add Color</span>
+            </div>
+          </div>
+          <p class="tc-hint">Click to add your brand colors for quick access</p>
+        `;
+        
+        colorsEl.querySelector('.tc-add-color-btn').addEventListener('click', () => {
+          this._addBrandColor();
+        });
+        
+        // Load saved brand colors
+        this._loadSavedBrandColors(colorsEl.querySelector('.tc-brand-colors-grid'));
+      }
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load brand kit:', err);
+    }
+  }
+
+  async _loadSavedBrandColors(container) {
+    try {
+      const brandData = await window.electron.invoke('get-canva-brand-kit', this._config.currentUserId);
+      if (brandData && brandData.colors) {
+        brandData.colors.forEach(color => {
+          const swatch = DomUtils.el('div', { className: 'tc-color-swatch' });
+          swatch.style.background = color.hex;
+          swatch.innerHTML = `
+            <span class="tc-color-hex">${color.hex}</span>
+            <button class="tc-copy-btn" title="Copy hex code">📋</button>
+          `;
+          swatch.querySelector('.tc-copy-btn').addEventListener('click', (e) => {
+            e.stopPropagation();
+            navigator.clipboard.writeText(color.hex);
+            this._showToast('Color copied!');
+          });
+          container.insertBefore(swatch, container.querySelector('.tc-add-color-btn'));
+        });
+      }
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load brand colors:', err);
+    }
+  }
+
+  async _addBrandColor() {
+    const hex = prompt('Enter hex color code:', '#');
+    if (!hex || !hex.match(/^#[0-9A-Fa-f]{6}$/)) {
+      if (hex) alert('Invalid hex color. Use format: #RRGGBB');
+      return;
+    }
+    
+    try {
+      let brandData = await window.electron.invoke('get-canva-brand-kit', this._config.currentUserId) || { colors: [] };
+      brandData.colors.push({ hex, name: hex });
+      await window.electron.invoke('save-canva-brand-kit', { userId: this._config.currentUserId, brandKit: brandData });
+      this._render();
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save brand color:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 2: TEMPLATES VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderTemplatesView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-templates-view' });
+    
+    const categories = [
+      { id: 'presentation', name: 'Presentations', icon: '📊' },
+      { id: 'social-media', name: 'Social Media', icon: '📱' },
+      { id: 'poster', name: 'Posters', icon: '🖼️' },
+      { id: 'flyer', name: 'Flyers', icon: '📄' },
+      { id: 'logo', name: 'Logos', icon: '🏷️' },
+      { id: 'business-card', name: 'Business Cards', icon: '💼' },
+      { id: 'invitation', name: 'Invitations', icon: '💌' },
+      { id: 'resume', name: 'Resumes', icon: '📝' },
+    ];
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Design Templates</h2>
+        <p>Start with a professionally designed template</p>
+      </div>
+      <div class="tc-template-categories">
+        ${categories.map(cat => `
+          <div class="tc-template-category" data-category="${cat.id}">
+            <span class="tc-category-icon">${cat.icon}</span>
+            <span class="tc-category-name">${cat.name}</span>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    
+    view.querySelectorAll('.tc-template-category').forEach(el => {
+      el.addEventListener('click', () => {
+        const category = el.dataset.category;
+        window.electron.invoke('open-external', `https://www.canva.com/templates/?query=${category}`);
+      });
+    });
+    
+    return view;
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 3: SCHEDULED EXPORTS VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderScheduledView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-scheduled-view' });
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Scheduled Exports</h2>
+        <p>Schedule designs to be exported at specific times</p>
+        <button class="tc-btn tc-btn-primary tc-schedule-new-btn">+ Schedule Export</button>
+      </div>
+      <div class="tc-scheduled-list">
+        ${this._state.scheduledExports.length === 0 ? `
+          <div class="tc-empty-state">
+            <div class="tc-empty-icon">📅</div>
+            <h3>No scheduled exports</h3>
+            <p>Schedule a design to be exported at a specific date and time</p>
+          </div>
+        ` : this._state.scheduledExports.map(exp => `
+          <div class="tc-scheduled-item" data-id="${exp.id}">
+            <div class="tc-scheduled-design">
+              <img src="${exp.thumbnail}" alt="${exp.designTitle}">
+              <div class="tc-scheduled-info">
+                <strong>${exp.designTitle}</strong>
+                <span>${exp.format.toUpperCase()} • ${new Date(exp.scheduledFor).toLocaleString()}</span>
+              </div>
+            </div>
+            <div class="tc-scheduled-actions">
+              <button class="tc-btn tc-btn-icon tc-cancel-schedule" title="Cancel">✕</button>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    
+    view.querySelector('.tc-schedule-new-btn')?.addEventListener('click', () => {
+      this._showScheduleExportModal();
+    });
+    
+    view.querySelectorAll('.tc-cancel-schedule').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const id = e.target.closest('.tc-scheduled-item').dataset.id;
+        this._cancelScheduledExport(id);
+      });
+    });
+    
+    return view;
+  }
+
+  _showScheduleExportModal() {
+    if (this._state.designs.length === 0) {
+      alert('No designs available. Please load your designs first.');
+      return;
+    }
+    
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-schedule-modal">
+        <div class="tc-modal-header">
+          <h3>Schedule Export</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-form-group">
+            <label>Select Design</label>
+            <select class="tc-input tc-design-select">
+              ${this._state.designs.map(d => `<option value="${d.id}">${d.title || 'Untitled'}</option>`).join('')}
+            </select>
+          </div>
+          <div class="tc-form-group">
+            <label>Export Format</label>
+            <select class="tc-input tc-format-select">
+              <option value="png">PNG</option>
+              <option value="jpg">JPG</option>
+              <option value="pdf">PDF</option>
+            </select>
+          </div>
+          <div class="tc-form-group">
+            <label>Schedule For</label>
+            <input type="datetime-local" class="tc-input tc-schedule-datetime">
+          </div>
+        </div>
+        <div class="tc-modal-footer">
+          <button class="tc-btn tc-btn-secondary tc-modal-cancel">Cancel</button>
+          <button class="tc-btn tc-btn-primary tc-schedule-confirm">Schedule</button>
+        </div>
+      </div>
+    `;
+    
+    const close = () => modal.remove();
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.querySelector('.tc-modal-cancel').addEventListener('click', close);
+    
+    modal.querySelector('.tc-schedule-confirm').addEventListener('click', async () => {
+      const designId = modal.querySelector('.tc-design-select').value;
+      const format = modal.querySelector('.tc-format-select').value;
+      const datetime = modal.querySelector('.tc-schedule-datetime').value;
+      
+      if (!datetime) {
+        alert('Please select a date and time');
+        return;
+      }
+      
+      const design = this._state.designs.find(d => d.id === designId);
+      const scheduled = {
+        id: `sched_${Date.now()}`,
+        designId,
+        designTitle: design?.title || 'Untitled',
+        thumbnail: design?.thumbnail?.url || '',
+        format,
+        scheduledFor: new Date(datetime).toISOString(),
+        createdAt: new Date().toISOString(),
+      };
+      
+      this._state.scheduledExports.push(scheduled);
+      await this._persistScheduledExports();
+      this._showToast('Export scheduled');
+      close();
+      this._render();
+    });
+    
+    this._container.appendChild(modal);
+  }
+
+  async _persistScheduledExports() {
+    try {
+      await window.electron.invoke('save-canva-scheduled-exports', {
+        userId: this._config.currentUserId,
+        exports: this._state.scheduledExports
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save scheduled exports:', err);
+    }
+  }
+
+  async _cancelScheduledExport(id) {
+    this._state.scheduledExports = this._state.scheduledExports.filter(e => e.id !== id);
+    await this._persistScheduledExports();
+    this._showToast('Export cancelled');
+    this._render();
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 4: ANNOTATIONS (added to context menu and design cards)
+  // ═══════════════════════════════════════════════════════════════
+
+  _showAnnotationsModal(design) {
+    const existing = this._state.annotations[design.id] || { notes: '', tags: [], linkedTaskId: '' };
+    
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-annotations-modal">
+        <div class="tc-modal-header">
+          <h3>Notes & Tags</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-design-preview-small">
+            <img src="${design.thumbnail?.url || ''}" alt="${design.title}">
+            <span>${design.title || 'Untitled'}</span>
+          </div>
+          <div class="tc-form-group">
+            <label>Notes</label>
+            <textarea class="tc-input tc-notes-input" rows="4" placeholder="Add notes about this design...">${existing.notes}</textarea>
+          </div>
+          <div class="tc-form-group">
+            <label>Tags (comma separated)</label>
+            <input type="text" class="tc-input tc-tags-input" placeholder="e.g., marketing, Q1, approved" value="${existing.tags.join(', ')}">
+          </div>
+          <div class="tc-form-group">
+            <label>Link to Task ID (optional)</label>
+            <input type="text" class="tc-input tc-task-input" placeholder="e.g., TASK-123" value="${existing.linkedTaskId}">
+          </div>
+        </div>
+        <div class="tc-modal-footer">
+          <button class="tc-btn tc-btn-secondary tc-modal-cancel">Cancel</button>
+          <button class="tc-btn tc-btn-primary tc-save-annotations">Save</button>
+        </div>
+      </div>
+    `;
+    
+    const close = () => modal.remove();
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.querySelector('.tc-modal-cancel').addEventListener('click', close);
+    
+    modal.querySelector('.tc-save-annotations').addEventListener('click', async () => {
+      const notes = modal.querySelector('.tc-notes-input').value;
+      const tagsStr = modal.querySelector('.tc-tags-input').value;
+      const linkedTaskId = modal.querySelector('.tc-task-input').value;
+      
+      this._state.annotations[design.id] = {
+        notes,
+        tags: tagsStr.split(',').map(t => t.trim()).filter(Boolean),
+        linkedTaskId,
+        updatedAt: new Date().toISOString(),
+      };
+      
+      await this._persistAnnotations();
+      this._showToast('Annotations saved');
+      close();
+    });
+    
+    this._container.appendChild(modal);
+  }
+
+  async _persistAnnotations() {
+    try {
+      await window.electron.invoke('save-canva-annotations', {
+        userId: this._config.currentUserId,
+        annotations: this._state.annotations
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save annotations:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 5: QUICK INSERT (added to context menu)
+  // ═══════════════════════════════════════════════════════════════
+
+  _showQuickInsertMenu(design, event) {
+    const menu = DomUtils.el('div', { className: 'tc-quick-insert-menu' });
+    menu.style.left = `${event.clientX}px`;
+    menu.style.top = `${event.clientY}px`;
+    
+    const options = [
+      { icon: '📧', label: 'Copy for Email', action: 'email' },
+      { icon: '📋', label: 'Copy Image URL', action: 'url' },
+      { icon: '💾', label: 'Download & Copy Path', action: 'download' },
+    ];
+    
+    menu.innerHTML = `
+      <div class="tc-insert-header">Insert "${design.title || 'Design'}"</div>
+      ${options.map(opt => `
+        <div class="tc-insert-option" data-action="${opt.action}">
+          <span>${opt.icon}</span>
+          <span>${opt.label}</span>
+        </div>
+      `).join('')}
+    `;
+    
+    menu.querySelectorAll('.tc-insert-option').forEach(opt => {
+      opt.addEventListener('click', async () => {
+        const action = opt.dataset.action;
+        menu.remove();
+        
+        if (action === 'url') {
+          navigator.clipboard.writeText(design.thumbnail?.url || '');
+          this._showToast('Image URL copied');
+        } else if (action === 'email') {
+          // Copy as HTML img tag
+          const html = `<img src="${design.thumbnail?.url}" alt="${design.title}" style="max-width: 100%;">`;
+          navigator.clipboard.writeText(html);
+          this._showToast('HTML copied for email');
+        } else if (action === 'download') {
+          this._showToast('Download started...');
+          // Trigger download via IPC
+          await window.electron.invoke('download-canva-design', {
+            url: design.thumbnail?.url,
+            filename: `${design.title || 'design'}.png`
+          });
+        }
+      });
+    });
+    
+    const closeHandler = (e) => {
+      if (!menu.contains(e.target)) {
+        menu.remove();
+        document.removeEventListener('click', closeHandler);
+      }
+    };
+    setTimeout(() => document.addEventListener('click', closeHandler), 0);
+    
+    this._container.appendChild(menu);
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 6: COMPARE VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderCompareView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-compare-view' });
+    
+    const compareDesigns = this._state.compareDesigns
+      .map(id => this._state.designs.find(d => d.id === id))
+      .filter(Boolean);
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Compare Designs</h2>
+        <p>View designs side by side</p>
+        ${compareDesigns.length > 0 ? `<button class="tc-btn tc-btn-secondary tc-clear-compare">Clear All</button>` : ''}
+      </div>
+      <div class="tc-compare-container">
+        ${compareDesigns.length === 0 ? `
+          <div class="tc-empty-state">
+            <div class="tc-empty-icon">⚖️</div>
+            <h3>No designs to compare</h3>
+            <p>Right-click on designs and select "Add to Compare" to compare them side by side</p>
+          </div>
+        ` : `
+          <div class="tc-compare-grid" style="grid-template-columns: repeat(${Math.min(compareDesigns.length, 4)}, 1fr);">
+            ${compareDesigns.map(d => `
+              <div class="tc-compare-item" data-id="${d.id}">
+                <button class="tc-remove-compare" title="Remove">✕</button>
+                <img src="${d.thumbnail?.url || ''}" alt="${d.title}">
+                <div class="tc-compare-info">
+                  <strong>${d.title || 'Untitled'}</strong>
+                  <span>Updated: ${new Date(d.updated_at).toLocaleDateString()}</span>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        `}
+      </div>
+    `;
+    
+    view.querySelector('.tc-clear-compare')?.addEventListener('click', () => {
+      this._state.compareDesigns = [];
+      this._render();
+    });
+    
+    view.querySelectorAll('.tc-remove-compare').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const id = e.target.closest('.tc-compare-item').dataset.id;
+        this._state.compareDesigns = this._state.compareDesigns.filter(i => i !== id);
+        this._render();
+      });
+    });
+    
+    return view;
+  }
+
+  _addToCompare(designId) {
+    if (!this._state.compareDesigns.includes(designId)) {
+      if (this._state.compareDesigns.length >= 4) {
+        this._showToast('Maximum 4 designs for comparison');
+        return;
+      }
+      this._state.compareDesigns.push(designId);
+      this._showToast('Added to compare');
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 7: ASSET LIBRARY VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderAssetLibraryView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-assets-view' });
+    
+    const assets = this._state.assetLibrary
+      .map(id => this._state.designs.find(d => d.id === id))
+      .filter(Boolean);
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Asset Library</h2>
+        <p>Quick access to your reusable design assets</p>
+      </div>
+      <div class="tc-assets-grid">
+        ${assets.length === 0 ? `
+          <div class="tc-empty-state">
+            <div class="tc-empty-icon">📦</div>
+            <h3>No assets yet</h3>
+            <p>Right-click on designs and select "Add to Asset Library" to save them here for quick access</p>
+          </div>
+        ` : assets.map(d => `
+          <div class="tc-asset-card" data-id="${d.id}">
+            <img src="${d.thumbnail?.url || ''}" alt="${d.title}">
+            <div class="tc-asset-overlay">
+              <button class="tc-asset-action tc-copy-asset" title="Copy URL">📋</button>
+              <button class="tc-asset-action tc-download-asset" title="Download">⬇️</button>
+              <button class="tc-asset-action tc-remove-asset" title="Remove">✕</button>
+            </div>
+            <div class="tc-asset-name">${d.title || 'Untitled'}</div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    
+    view.querySelectorAll('.tc-copy-asset').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const id = e.target.closest('.tc-asset-card').dataset.id;
+        const design = this._state.designs.find(d => d.id === id);
+        if (design?.thumbnail?.url) {
+          navigator.clipboard.writeText(design.thumbnail.url);
+          this._showToast('URL copied');
+        }
+      });
+    });
+    
+    view.querySelectorAll('.tc-remove-asset').forEach(btn => {
+      btn.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        const id = e.target.closest('.tc-asset-card').dataset.id;
+        this._state.assetLibrary = this._state.assetLibrary.filter(i => i !== id);
+        await this._persistAssetLibrary();
+        this._render();
+      });
+    });
+    
+    return view;
+  }
+
+  async _addToAssetLibrary(designId) {
+    if (!this._state.assetLibrary.includes(designId)) {
+      this._state.assetLibrary.push(designId);
+      await this._persistAssetLibrary();
+      this._showToast('Added to Asset Library');
+    }
+  }
+
+  async _persistAssetLibrary() {
+    try {
+      await window.electron.invoke('save-canva-asset-library', {
+        userId: this._config.currentUserId,
+        assets: this._state.assetLibrary
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save asset library:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 8: ANALYTICS VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderAnalyticsView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-analytics-view' });
+    
+    // Calculate stats
+    const totalDesigns = this._state.designs.length;
+    const totalFavorites = this._state.favorites.size;
+    const totalAssets = this._state.assetLibrary.length;
+    const recentCount = this._state.recentlyViewed.length;
+    
+    // Most viewed designs
+    const viewCounts = this._state.analytics.views || {};
+    const topViewed = Object.entries(viewCounts)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(([id, count]) => ({ design: this._state.designs.find(d => d.id === id), count }))
+      .filter(item => item.design);
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Analytics</h2>
+        <p>Track your design usage and activity</p>
+      </div>
+      <div class="tc-analytics-stats">
+        <div class="tc-stat-card">
+          <div class="tc-stat-value">${totalDesigns}</div>
+          <div class="tc-stat-label">Total Designs</div>
+        </div>
+        <div class="tc-stat-card">
+          <div class="tc-stat-value">${totalFavorites}</div>
+          <div class="tc-stat-label">Favorites</div>
+        </div>
+        <div class="tc-stat-card">
+          <div class="tc-stat-value">${totalAssets}</div>
+          <div class="tc-stat-label">Assets</div>
+        </div>
+        <div class="tc-stat-card">
+          <div class="tc-stat-value">${recentCount}</div>
+          <div class="tc-stat-label">Recently Viewed</div>
+        </div>
+      </div>
+      <div class="tc-analytics-section">
+        <h3>Most Viewed Designs</h3>
+        ${topViewed.length === 0 ? '<p class="tc-hint">No view data yet</p>' : `
+          <div class="tc-top-list">
+            ${topViewed.map((item, i) => `
+              <div class="tc-top-item">
+                <span class="tc-top-rank">${i + 1}</span>
+                <img src="${item.design.thumbnail?.url || ''}" alt="">
+                <span class="tc-top-name">${item.design.title || 'Untitled'}</span>
+                <span class="tc-top-count">${item.count} views</span>
+              </div>
+            `).join('')}
+          </div>
+        `}
+      </div>
+    `;
+    
+    return view;
+  }
+
+  _trackView(designId) {
+    if (!this._state.analytics.views) this._state.analytics.views = {};
+    this._state.analytics.views[designId] = (this._state.analytics.views[designId] || 0) + 1;
+    this._state.analytics.lastUsed[designId] = new Date().toISOString();
+    this._persistAnalytics();
+  }
+
+  async _persistAnalytics() {
+    try {
+      await window.electron.invoke('save-canva-analytics', {
+        userId: this._config.currentUserId,
+        analytics: this._state.analytics
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save analytics:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 9: BATCH EXPORT (added to bulk actions)
+  // ═══════════════════════════════════════════════════════════════
+
+  _showBatchExportModal() {
+    const selected = Array.from(this._state.selectedDesigns);
+    if (selected.length === 0) {
+      alert('Please select designs to export');
+      return;
+    }
+    
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-batch-export-modal">
+        <div class="tc-modal-header">
+          <h3>Batch Export (${selected.length} designs)</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-form-group">
+            <label>Export Preset</label>
+            <select class="tc-input tc-preset-select">
+              <option value="png-standard">PNG Standard (1080px)</option>
+              <option value="jpg-web">JPG Web Quality</option>
+              <option value="pdf-print">PDF Print Quality</option>
+              <option value="social-pack">Social Media Pack (multiple sizes)</option>
+            </select>
+          </div>
+          <div class="tc-form-group">
+            <label>File Naming</label>
+            <select class="tc-input tc-naming-select">
+              <option value="original">Original Name</option>
+              <option value="date-prefix">Date Prefix (YYYY-MM-DD_name)</option>
+              <option value="numbered">Numbered (001_name, 002_name)</option>
+            </select>
+          </div>
+          <div class="tc-selected-preview">
+            ${selected.slice(0, 4).map(id => {
+              const d = this._state.designs.find(design => design.id === id);
+              return d ? `<img src="${d.thumbnail?.url || ''}" alt="">` : '';
+            }).join('')}
+            ${selected.length > 4 ? `<span>+${selected.length - 4} more</span>` : ''}
+          </div>
+        </div>
+        <div class="tc-modal-footer">
+          <button class="tc-btn tc-btn-secondary tc-modal-cancel">Cancel</button>
+          <button class="tc-btn tc-btn-primary tc-start-batch">Export All</button>
+        </div>
+      </div>
+    `;
+    
+    const close = () => modal.remove();
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.querySelector('.tc-modal-cancel').addEventListener('click', close);
+    
+    modal.querySelector('.tc-start-batch').addEventListener('click', () => {
+      const preset = modal.querySelector('.tc-preset-select').value;
+      const naming = modal.querySelector('.tc-naming-select').value;
+      this._executeBatchExport(selected, preset, naming);
+      close();
+    });
+    
+    this._container.appendChild(modal);
+  }
+
+  async _executeBatchExport(designIds, preset, naming) {
+    this._showToast(`Exporting ${designIds.length} designs...`);
+    
+    // In a real implementation, this would call the Canva export API for each design
+    // For now, we'll simulate the process
+    for (let i = 0; i < designIds.length; i++) {
+      const design = this._state.designs.find(d => d.id === designIds[i]);
+      if (design) {
+        console.log(`[TacelCanva] Exporting ${i + 1}/${designIds.length}: ${design.title}`);
+        // await this._exportDesign(design);
+      }
+    }
+    
+    this._showToast('Batch export complete!');
+    this._state.selectedDesigns.clear();
+    this._render();
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // FEATURE 10: DESIGN REQUESTS VIEW
+  // ═══════════════════════════════════════════════════════════════
+
+  _renderRequestsView() {
+    const view = DomUtils.el('div', { className: 'tc-feature-view tc-requests-view' });
+    
+    const pending = this._state.designRequests.filter(r => r.status === 'pending');
+    const completed = this._state.designRequests.filter(r => r.status === 'completed');
+    
+    view.innerHTML = `
+      <div class="tc-view-header">
+        <h2>Design Requests</h2>
+        <p>Submit and track design requests</p>
+        <button class="tc-btn tc-btn-primary tc-new-request-btn">+ New Request</button>
+      </div>
+      <div class="tc-requests-tabs">
+        <button class="tc-tab active" data-tab="pending">Pending (${pending.length})</button>
+        <button class="tc-tab" data-tab="completed">Completed (${completed.length})</button>
+      </div>
+      <div class="tc-requests-list" id="requests-list">
+        ${this._renderRequestsList(pending)}
+      </div>
+    `;
+    
+    view.querySelector('.tc-new-request-btn').addEventListener('click', () => {
+      this._showNewRequestModal();
+    });
+    
+    view.querySelectorAll('.tc-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        view.querySelectorAll('.tc-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        const list = tab.dataset.tab === 'pending' ? pending : completed;
+        view.querySelector('#requests-list').innerHTML = this._renderRequestsList(list);
+      });
+    });
+    
+    return view;
+  }
+
+  _renderRequestsList(requests) {
+    if (requests.length === 0) {
+      return `
+        <div class="tc-empty-state">
+          <div class="tc-empty-icon">📝</div>
+          <h3>No requests</h3>
+        </div>
+      `;
+    }
+    
+    return requests.map(req => `
+      <div class="tc-request-card" data-id="${req.id}">
+        <div class="tc-request-header">
+          <span class="tc-request-title">${req.title}</span>
+          <span class="tc-request-status tc-status-${req.status}">${req.status}</span>
+        </div>
+        <p class="tc-request-desc">${req.description}</p>
+        <div class="tc-request-meta">
+          <span>📐 ${req.dimensions || 'Any size'}</span>
+          <span>📅 Due: ${req.deadline ? new Date(req.deadline).toLocaleDateString() : 'No deadline'}</span>
+          <span>👤 ${req.requestedBy}</span>
+        </div>
+        ${req.status === 'pending' ? `
+          <div class="tc-request-actions">
+            <button class="tc-btn tc-btn-sm tc-complete-request">Mark Complete</button>
+            <button class="tc-btn tc-btn-sm tc-btn-secondary tc-cancel-request">Cancel</button>
+          </div>
+        ` : ''}
+      </div>
+    `).join('');
+  }
+
+  _showNewRequestModal() {
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-request-modal">
+        <div class="tc-modal-header">
+          <h3>New Design Request</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-form-group">
+            <label>Title *</label>
+            <input type="text" class="tc-input tc-request-title" placeholder="e.g., Social media banner for Q2 campaign">
+          </div>
+          <div class="tc-form-group">
+            <label>Description</label>
+            <textarea class="tc-input tc-request-desc" rows="3" placeholder="Describe what you need..."></textarea>
+          </div>
+          <div class="tc-form-row">
+            <div class="tc-form-group">
+              <label>Dimensions</label>
+              <select class="tc-input tc-request-dims">
+                <option value="">Any size</option>
+                <option value="1080x1080">Instagram Post (1080x1080)</option>
+                <option value="1200x628">Facebook/LinkedIn (1200x628)</option>
+                <option value="1920x1080">Presentation (1920x1080)</option>
+                <option value="custom">Custom...</option>
+              </select>
+            </div>
+            <div class="tc-form-group">
+              <label>Deadline</label>
+              <input type="date" class="tc-input tc-request-deadline">
+            </div>
+          </div>
+        </div>
+        <div class="tc-modal-footer">
+          <button class="tc-btn tc-btn-secondary tc-modal-cancel">Cancel</button>
+          <button class="tc-btn tc-btn-primary tc-submit-request">Submit Request</button>
+        </div>
+      </div>
+    `;
+    
+    const close = () => modal.remove();
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.querySelector('.tc-modal-cancel').addEventListener('click', close);
+    
+    modal.querySelector('.tc-submit-request').addEventListener('click', async () => {
+      const title = modal.querySelector('.tc-request-title').value.trim();
+      if (!title) {
+        alert('Please enter a title');
+        return;
+      }
+      
+      const request = {
+        id: `req_${Date.now()}`,
+        title,
+        description: modal.querySelector('.tc-request-desc').value,
+        dimensions: modal.querySelector('.tc-request-dims').value,
+        deadline: modal.querySelector('.tc-request-deadline').value || null,
+        requestedBy: this._config.currentUserName || 'Unknown',
+        status: 'pending',
+        createdAt: new Date().toISOString(),
+      };
+      
+      this._state.designRequests.push(request);
+      await this._persistDesignRequests();
+      this._showToast('Request submitted');
+      close();
+      this._render();
+    });
+    
+    this._container.appendChild(modal);
+  }
+
+  async _persistDesignRequests() {
+    try {
+      await window.electron.invoke('save-canva-design-requests', {
+        userId: this._config.currentUserId,
+        requests: this._state.designRequests
+      });
+    } catch (err) {
+      console.error('[TacelCanva] Failed to save design requests:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // LOAD ALL FEATURE DATA
+  // ═══════════════════════════════════════════════════════════════
+
+  async _loadAllFeatureData() {
+    try {
+      // Load annotations
+      const annotations = await window.electron.invoke('get-canva-annotations', this._config.currentUserId);
+      if (annotations) this._state.annotations = annotations;
+      
+      // Load asset library
+      const assets = await window.electron.invoke('get-canva-asset-library', this._config.currentUserId);
+      if (assets) this._state.assetLibrary = assets;
+      
+      // Load analytics
+      const analytics = await window.electron.invoke('get-canva-analytics', this._config.currentUserId);
+      if (analytics) this._state.analytics = analytics;
+      
+      // Load scheduled exports
+      const scheduled = await window.electron.invoke('get-canva-scheduled-exports', this._config.currentUserId);
+      if (scheduled) this._state.scheduledExports = scheduled;
+      
+      // Load design requests
+      const requests = await window.electron.invoke('get-canva-design-requests', this._config.currentUserId);
+      if (requests) this._state.designRequests = requests;
+      
+    } catch (err) {
+      console.error('[TacelCanva] Failed to load feature data:', err);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // INLINE EDITOR - Open design in embedded view or new window
+  // ═══════════════════════════════════════════════════════════════
+
+  _showEditorModal(design) {
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    const editUrl = `https://www.canva.com/design/${design.id}/edit`;
+    
+    modal.innerHTML = `
+      <div class="tc-editor-modal">
+        <div class="tc-modal-header">
+          <h3>
+            <span>✏️</span>
+            <span>${design.title || 'Untitled Design'}</span>
+          </h3>
+          <div class="tc-editor-actions">
+            <button class="tc-btn tc-btn-secondary tc-btn-small tc-open-external" title="Open in browser">
+              <span>🔗</span> Open in Browser
+            </button>
+            <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+          </div>
+        </div>
+        <div class="tc-editor-body">
+          <div class="tc-editor-loading">
+            <div class="tc-loader-spinner"></div>
+            <p>Loading Canva editor...</p>
+            <p class="tc-hint">If the editor doesn't load, click "Open in Browser"</p>
+          </div>
+          <iframe 
+            src="${editUrl}" 
+            class="tc-editor-iframe"
+            allow="clipboard-read; clipboard-write"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
+          ></iframe>
+        </div>
+      </div>
+    `;
+    
+    const close = () => {
+      modal.classList.add('closing');
+      setTimeout(() => modal.remove(), 200);
+    };
+    
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.querySelector('.tc-open-external').addEventListener('click', () => {
+      this._openDesign(design);
+      close();
+    });
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) close();
+    });
+    
+    // Handle iframe load
+    const iframe = modal.querySelector('.tc-editor-iframe');
+    const loading = modal.querySelector('.tc-editor-loading');
+    iframe.addEventListener('load', () => {
+      loading.style.display = 'none';
+      iframe.style.display = 'block';
+    });
+    iframe.addEventListener('error', () => {
+      loading.innerHTML = `
+        <div class="tc-empty-icon">⚠️</div>
+        <h3>Unable to load editor</h3>
+        <p>Canva's editor cannot be embedded. Click below to open in your browser.</p>
+        <button class="tc-btn tc-btn-primary tc-open-browser">Open in Browser</button>
+      `;
+      loading.querySelector('.tc-open-browser').addEventListener('click', () => {
+        this._openDesign(design);
+        close();
+      });
+    });
+    
+    this._container.appendChild(modal);
+    this._trackView(design.id);
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // PREMIUM TOAST NOTIFICATION SYSTEM
+  // ═══════════════════════════════════════════════════════════════
+
+  _initToastContainer() {
+    if (!this._toastContainer) {
+      this._toastContainer = DomUtils.el('div', { className: 'tc-toast-container' });
+      this._container.appendChild(this._toastContainer);
+    }
+  }
+
+  _showToast(message, options = {}) {
+    this._initToastContainer();
+    
+    const { type = 'info', title, duration = 4000, action } = options;
+    const icons = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ'
+    };
+    
+    const toast = DomUtils.el('div', { className: `tc-toast ${type}` });
+    toast.innerHTML = `
+      <span class="tc-toast-icon">${icons[type] || icons.info}</span>
+      <div class="tc-toast-content">
+        ${title ? `<div class="tc-toast-title">${title}</div>` : ''}
+        <div class="tc-toast-message">${message}</div>
+      </div>
+      ${action ? `<button class="tc-btn tc-btn-small tc-btn-secondary tc-toast-action">${action.label}</button>` : ''}
+      <button class="tc-toast-close">✕</button>
+    `;
+    
+    const dismiss = () => {
+      toast.classList.remove('show');
+      setTimeout(() => toast.remove(), 400);
+    };
+    
+    toast.querySelector('.tc-toast-close').addEventListener('click', dismiss);
+    if (action) {
+      toast.querySelector('.tc-toast-action').addEventListener('click', () => {
+        action.onClick();
+        dismiss();
+      });
+    }
+    
+    this._toastContainer.appendChild(toast);
+    
+    // Trigger animation
+    requestAnimationFrame(() => {
+      toast.classList.add('show');
+    });
+    
+    // Auto dismiss
+    if (duration > 0) {
+      setTimeout(dismiss, duration);
+    }
+    
+    return { dismiss };
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // KEYBOARD SHORTCUTS
+  // ═══════════════════════════════════════════════════════════════
+
+  _initKeyboardShortcuts() {
+    this._keyboardHandler = (e) => {
+      // Don't trigger if typing in input
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      
+      const key = e.key.toLowerCase();
+      const ctrl = e.ctrlKey || e.metaKey;
+      const shift = e.shiftKey;
+      
+      // Search: Ctrl+F or /
+      if ((ctrl && key === 'f') || key === '/') {
+        e.preventDefault();
+        const searchInput = this._container.querySelector('.tc-search-input');
+        if (searchInput) searchInput.focus();
+        return;
+      }
+      
+      // Toggle view: V
+      if (key === 'v' && !ctrl) {
+        this._state.viewMode = this._state.viewMode === 'grid' ? 'list' : 'grid';
+        this._render();
+        return;
+      }
+      
+      // Select all: Ctrl+A
+      if (ctrl && key === 'a' && this._state.currentView === 'gallery') {
+        e.preventDefault();
+        this._state.designs.forEach(d => this._state.selectedDesigns.add(d.id));
+        this._render();
+        return;
+      }
+      
+      // Deselect all: Escape
+      if (key === 'escape') {
+        if (this._state.selectedDesigns.size > 0) {
+          this._state.selectedDesigns.clear();
+          this._render();
+        }
+        this._closeContextMenu();
+        return;
+      }
+      
+      // Help: ?
+      if (key === '?' || (shift && key === '/')) {
+        this._showKeyboardHelp();
+        return;
+      }
+      
+      // Navigate views: 1-9
+      const viewKeys = {
+        '1': 'gallery',
+        '2': 'favorites',
+        '3': 'brandKit',
+        '4': 'templates',
+        '5': 'assets',
+        '6': 'compare',
+        '7': 'scheduled',
+        '8': 'analytics',
+        '9': 'requests'
+      };
+      if (viewKeys[key] && !ctrl) {
+        this._state.currentView = viewKeys[key];
+        if (key === '2') {
+          this._state.filterType = 'favorites';
+          this._state.currentView = 'gallery';
+        }
+        this._render();
+        return;
+      }
+    };
+    
+    document.addEventListener('keydown', this._keyboardHandler);
+  }
+
+  _showKeyboardHelp() {
+    const modal = DomUtils.el('div', { className: 'tc-modal-overlay' });
+    modal.innerHTML = `
+      <div class="tc-help-modal">
+        <div class="tc-modal-header">
+          <h3>⌨️ Keyboard Shortcuts</h3>
+          <button class="tc-btn tc-btn-icon tc-modal-close">✕</button>
+        </div>
+        <div class="tc-modal-body">
+          <div class="tc-shortcuts-grid">
+            <div class="tc-shortcut-section">
+              <h4>Navigation</h4>
+              <div class="tc-shortcut"><kbd>1</kbd> <span>My Designs</span></div>
+              <div class="tc-shortcut"><kbd>2</kbd> <span>Favorites</span></div>
+              <div class="tc-shortcut"><kbd>3</kbd> <span>Brand Kit</span></div>
+              <div class="tc-shortcut"><kbd>4</kbd> <span>Templates</span></div>
+              <div class="tc-shortcut"><kbd>5</kbd> <span>Asset Library</span></div>
+              <div class="tc-shortcut"><kbd>6</kbd> <span>Compare</span></div>
+              <div class="tc-shortcut"><kbd>7</kbd> <span>Scheduled</span></div>
+              <div class="tc-shortcut"><kbd>8</kbd> <span>Analytics</span></div>
+              <div class="tc-shortcut"><kbd>9</kbd> <span>Requests</span></div>
+            </div>
+            <div class="tc-shortcut-section">
+              <h4>Actions</h4>
+              <div class="tc-shortcut"><kbd>/</kbd> or <kbd>Ctrl+F</kbd> <span>Search</span></div>
+              <div class="tc-shortcut"><kbd>V</kbd> <span>Toggle Grid/List</span></div>
+              <div class="tc-shortcut"><kbd>Ctrl+A</kbd> <span>Select All</span></div>
+              <div class="tc-shortcut"><kbd>Esc</kbd> <span>Deselect / Close</span></div>
+              <div class="tc-shortcut"><kbd>?</kbd> <span>Show Help</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    const close = () => modal.remove();
+    modal.querySelector('.tc-modal-close').addEventListener('click', close);
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) close();
+    });
+    
+    this._container.appendChild(modal);
+  }
+
+  _removeKeyboardShortcuts() {
+    if (this._keyboardHandler) {
+      document.removeEventListener('keydown', this._keyboardHandler);
+    }
+  }
+
+  destroy() {
+    this._removeKeyboardShortcuts();
+    DomUtils.clear(this._container);
+    this._container.classList.remove('tacel-canva');
+  }
+}
+
+const TacelCanva = {
+  initialize(container, config) {
+    return new TacelCanvaInstance(container, config);
+  }
+};
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { TacelCanva, TacelCanvaInstance };
+}