tacel-canva 1.0.0

package/utils/dom.js

@@ -0,0 +1,98 @@
+/**
+ * DOM utility functions for Canva module
+ */
+
+const DomUtils = {
+  /**
+   * Create an element with attributes and children
+   * @param {string} tag - Element tag name
+   * @param {Object} options - { className, text, attrs, children }
+   * @returns {HTMLElement}
+   */
+  el(tag, options = {}) {
+    const el = document.createElement(tag);
+    
+    if (options.className) {
+      el.className = options.className;
+    }
+    
+    if (options.text) {
+      el.textContent = options.text;
+    }
+    
+    if (options.html) {
+      el.innerHTML = options.html;
+    }
+    
+    if (options.attrs) {
+      for (const [key, value] of Object.entries(options.attrs)) {
+        el.setAttribute(key, value);
+      }
+    }
+    
+    if (options.children) {
+      options.children.forEach(child => {
+        if (child) el.appendChild(child);
+      });
+    }
+    
+    return el;
+  },
+
+  /**
+   * Clear all children from an element
+   * @param {HTMLElement} el
+   */
+  clear(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+  },
+
+  /**
+   * Show element
+   * @param {HTMLElement} el
+   */
+  show(el) {
+    el.style.display = '';
+  },
+
+  /**
+   * Hide element
+   * @param {HTMLElement} el
+   */
+  hide(el) {
+    el.style.display = 'none';
+  },
+
+  /**
+   * Format date to readable string
+   * @param {number} timestamp - Unix timestamp in seconds
+   * @returns {string}
+   */
+  formatDate(timestamp) {
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  },
+
+  /**
+   * Format file size to human readable
+   * @param {number} bytes
+   * @returns {string}
+   */
+  formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  }
+};
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = DomUtils;
+}

package/utils/pkce.js

@@ -0,0 +1,57 @@
+/**
+ * PKCE (Proof Key for Code Exchange) utilities for OAuth 2.0
+ * Required by Canva Connect API
+ */
+
+/**
+ * Generate a cryptographically random code verifier
+ * @returns {string} Base64-URL encoded random string (43-128 chars)
+ */
+function generateCodeVerifier() {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return base64UrlEncode(array);
+}
+
+/**
+ * Generate code challenge from verifier using SHA-256
+ * @param {string} verifier - The code verifier
+ * @returns {Promise<string>} Base64-URL encoded SHA-256 hash
+ */
+async function generateCodeChallenge(verifier) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(verifier);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return base64UrlEncode(new Uint8Array(hash));
+}
+
+/**
+ * Base64-URL encode (without padding)
+ * @param {Uint8Array} buffer
+ * @returns {string}
+ */
+function base64UrlEncode(buffer) {
+  const base64 = btoa(String.fromCharCode(...buffer));
+  return base64
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}
+
+/**
+ * Generate PKCE pair (verifier + challenge)
+ * @returns {Promise<{verifier: string, challenge: string}>}
+ */
+async function generatePKCE() {
+  const verifier = generateCodeVerifier();
+  const challenge = await generateCodeChallenge(verifier);
+  return { verifier, challenge };
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    generateCodeVerifier,
+    generateCodeChallenge,
+    generatePKCE,
+  };
+}