@product7/feedback-sdk 1.0.1

package/dist/feedback-sdk.js

@@ -0,0 +1,2483 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+	typeof define === 'function' && define.amd ? define(['exports'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FeedbackSDK = {}));
+})(this, (function (exports) { 'use strict';
+
+	class SDKError extends Error {
+		constructor(message, cause) {
+			super(message);
+			this.name = 'SDKError';
+			this.cause = cause;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, SDKError);
+			}
+		}
+	}
+
+	class APIError extends Error {
+		constructor(status, message, response) {
+			super(message);
+			this.name = 'APIError';
+			this.status = status;
+			this.response = response;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, APIError);
+			}
+		}
+
+		isNetworkError() {
+			return this.status === 0;
+		}
+
+		isClientError() {
+			return this.status >= 400 && this.status < 500;
+		}
+
+		isServerError() {
+			return this.status >= 500 && this.status < 600;
+		}
+	}
+
+	class WidgetError extends Error {
+		constructor(message, widgetType, widgetId) {
+			super(message);
+			this.name = 'WidgetError';
+			this.widgetType = widgetType;
+			this.widgetId = widgetId;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, WidgetError);
+			}
+		}
+	}
+
+	class ConfigError extends Error {
+		constructor(message, configKey) {
+			super(message);
+			this.name = 'ConfigError';
+			this.configKey = configKey;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, ConfigError);
+			}
+		}
+	}
+
+	class ValidationError extends Error {
+		constructor(message, field, value) {
+			super(message);
+			this.name = 'ValidationError';
+			this.field = field;
+			this.value = value;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, ValidationError);
+			}
+		}
+	}
+
+	class APIService {
+		constructor(config = {}) {
+			this.workspace = config.workspace;
+			this.sessionToken = null;
+			this.sessionExpiry = null;
+			this.userContext = config.userContext || null;
+
+			// Construct workspace-specific API URL
+			if (config.apiUrl) {
+				// If explicitly provided, use it
+				this.baseURL = config.apiUrl;
+			} else if (this.workspace) {
+				// Construct from workspace: workspace.api.staging.product7.io/api/v1
+				this.baseURL = `https://${this.workspace}.api.staging.product7.io/api/v1`;
+			} else {
+				// Fallback to default
+				this.baseURL = 'https://api.staging.product7.io/api/v1';
+			}
+
+			console.log('[APIService] Using API URL:', this.baseURL);
+
+			// Try to load existing session from localStorage
+			this._loadStoredSession();
+		}
+
+		async init(userContext = null) {
+			console.log('[APIService] Starting initialization...');
+
+			if (userContext) {
+				this.userContext = userContext;
+			}
+
+			// Check if we have a valid session token
+			if (this.isSessionValid()) {
+				console.log('[APIService] Found valid existing session');
+				return { sessionToken: this.sessionToken };
+			}
+
+			// Try to get user context from various sources if not provided
+			if (!this.userContext) {
+				console.log(
+					'[APIService] No user context provided, attempting auto-detection...'
+				);
+				this.userContext = this._getUserContextFromStorage();
+			}
+
+			if (!this.userContext || !this.workspace) {
+				const error = `Missing ${!this.workspace ? 'workspace' : 'user context'} for initialization`;
+				console.error('[APIService]', error);
+				throw new APIError(400, error);
+			}
+
+			console.log('[APIService] User context detected:', this.userContext);
+
+			const payload = {
+				workspace: this.workspace,
+				user: this.userContext,
+			};
+
+			console.log(
+				'[APIService] Making init request to:',
+				`${this.baseURL}/widget/init`
+			);
+			console.log('[APIService] Payload:', payload);
+
+			try {
+				const response = await this._makeRequest('/widget/init', {
+					method: 'POST',
+					body: JSON.stringify(payload),
+					headers: {
+						'Content-Type': 'application/json',
+					},
+				});
+
+				console.log('[APIService] Init response:', response);
+
+				// Store session token and expiry
+				this.sessionToken = response.session_token;
+				this.sessionExpiry = new Date(Date.now() + response.expires_in * 1000);
+
+				// Store session in localStorage for persistence
+				this._storeSession();
+
+				return {
+					sessionToken: this.sessionToken,
+					config: response.config || {},
+					expiresIn: response.expires_in,
+				};
+			} catch (error) {
+				console.error('[APIService] Init failed:', error);
+				throw new APIError(
+					error.status || 500,
+					`Failed to initialize widget: ${error.message}`,
+					error.response
+				);
+			}
+		}
+
+		async submitFeedback(feedbackData) {
+			// Ensure we have a valid session
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (!this.sessionToken) {
+				throw new APIError(401, 'No valid session token available');
+			}
+
+			const payload = {
+				board:
+					feedbackData.board_id || feedbackData.board || feedbackData.boardId,
+				title: feedbackData.title,
+				content: feedbackData.content,
+				attachments: feedbackData.attachments || [],
+			};
+
+			try {
+				const response = await this._makeRequest('/widget/feedback', {
+					method: 'POST',
+					body: JSON.stringify(payload),
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${this.sessionToken}`,
+					},
+				});
+
+				return response;
+			} catch (error) {
+				// If session expired, try to reinitialize once
+				if (error.status === 401) {
+					this.sessionToken = null;
+					this.sessionExpiry = null;
+					await this.init();
+
+					// Retry the request with new session
+					return this.submitFeedback(feedbackData);
+				}
+
+				throw new APIError(
+					error.status || 500,
+					`Failed to submit feedback: ${error.message}`,
+					error.response
+				);
+			}
+		}
+
+		isSessionValid() {
+			return (
+				this.sessionToken && this.sessionExpiry && new Date() < this.sessionExpiry
+			);
+		}
+
+		setUserContext(userContext) {
+			this.userContext = userContext;
+			// Store in localStorage for persistence
+			if (typeof localStorage !== 'undefined') {
+				localStorage.setItem(
+					'feedbackSDK_userContext',
+					JSON.stringify(userContext)
+				);
+			}
+		}
+
+		getUserContext() {
+			return this.userContext;
+		}
+
+		clearSession() {
+			this.sessionToken = null;
+			this.sessionExpiry = null;
+			if (typeof localStorage !== 'undefined') {
+				localStorage.removeItem('feedbackSDK_session');
+			}
+		}
+
+		_getUserContextFromStorage() {
+			if (typeof localStorage === 'undefined') return null;
+
+			console.log('[APIService] Attempting to detect user from storage...');
+
+			try {
+				// Try to get from feedbackSDK specific storage first
+				const stored = localStorage.getItem('feedbackSDK_userContext');
+				if (stored) {
+					console.log('[APIService] Found user context in feedbackSDK storage');
+					return JSON.parse(stored);
+				}
+
+				// Try to get from window object (if set by parent application)
+				if (typeof window !== 'undefined' && window.FeedbackSDKUserContext) {
+					console.log(
+						'[APIService] Found user context in window.FeedbackSDKUserContext'
+					);
+					return window.FeedbackSDKUserContext;
+				}
+
+				// Check window.currentUser
+				if (typeof window !== 'undefined' && window.currentUser) {
+					console.log('[APIService] Found user context in window.currentUser');
+					return this._mapUserData(window.currentUser);
+				}
+
+				// Try to extract from existing session storage
+				const authSources = ['auth', 'currentUser', 'userSession', 'user'];
+
+				for (const key of authSources) {
+					const sessionData = localStorage.getItem(key);
+					if (sessionData) {
+						console.log(`[APIService] Found data in localStorage.${key}`);
+						const parsed = JSON.parse(sessionData);
+
+						// Handle nested user data (like {user: {...}, token: ...})
+						const userData = parsed.user || parsed;
+
+						if (userData && (userData.id || userData.user_id || userData.email)) {
+							console.log('[APIService] Successfully mapped user data');
+							return this._mapUserData(userData);
+						}
+					}
+				}
+
+				console.log('[APIService] No user context found in any storage location');
+				return null;
+			} catch (error) {
+				console.warn(
+					'[FeedbackSDK] Failed to load user context from storage:',
+					error
+				);
+				return null;
+			}
+		}
+
+		_mapUserData(userData) {
+			console.log('[APIService] Mapping user data:', userData);
+
+			const mapped = {
+				user_id: userData.id || userData.user_id || userData.userId,
+				email: userData.email,
+				name: userData.name || userData.displayName || userData.full_name,
+				custom_fields: {},
+				company: {},
+			};
+
+			// Map company data if available
+			if (userData.company || userData.organization) {
+				const company = userData.company || userData.organization;
+				mapped.company = {
+					id: company.id || company.company_id,
+					name: company.name || company.company_name,
+					monthly_spend: company.monthly_spend || company.spend,
+				};
+			}
+
+			// Map any additional custom fields
+			const customFieldKeys = ['plan', 'role', 'tier', 'subscription'];
+			customFieldKeys.forEach((key) => {
+				if (userData[key]) {
+					mapped.custom_fields[key] = userData[key];
+				}
+			});
+
+			console.log('[APIService] Mapped result:', mapped);
+			return mapped;
+		}
+
+		_storeSession() {
+			if (typeof localStorage === 'undefined') return;
+
+			try {
+				const sessionData = {
+					token: this.sessionToken,
+					expiry: this.sessionExpiry.toISOString(),
+					workspace: this.workspace,
+				};
+				localStorage.setItem('feedbackSDK_session', JSON.stringify(sessionData));
+			} catch (error) {
+				console.warn('[FeedbackSDK] Failed to store session:', error);
+			}
+		}
+
+		_loadStoredSession() {
+			if (typeof localStorage === 'undefined') return false;
+
+			try {
+				const stored = localStorage.getItem('feedbackSDK_session');
+				if (!stored) return false;
+
+				const sessionData = JSON.parse(stored);
+				this.sessionToken = sessionData.token;
+				this.sessionExpiry = new Date(sessionData.expiry);
+
+				return this.isSessionValid();
+			} catch (error) {
+				console.warn('[FeedbackSDK] Failed to load stored session:', error);
+				return false;
+			}
+		}
+
+		async _makeRequest(endpoint, options = {}) {
+			const url = `${this.baseURL}${endpoint}`;
+			console.log('[APIService] Making request to:', url);
+
+			try {
+				const response = await fetch(url, options);
+
+				if (!response.ok) {
+					let errorMessage = `HTTP ${response.status}`;
+					let responseData = null;
+
+					try {
+						responseData = await response.json();
+						errorMessage =
+							responseData.message || responseData.error || errorMessage;
+					} catch (e) {
+						errorMessage = (await response.text()) || errorMessage;
+					}
+
+					throw new APIError(response.status, errorMessage, responseData);
+				}
+
+				const contentType = response.headers.get('content-type');
+				if (contentType && contentType.includes('application/json')) {
+					return await response.json();
+				}
+
+				return await response.text();
+			} catch (error) {
+				if (error instanceof APIError) {
+					throw error;
+				}
+
+				// Network or other errors
+				throw new APIError(0, error.message, null);
+			}
+		}
+	}
+
+	class EventBus {
+		constructor() {
+			this.events = new Map();
+		}
+
+		on(event, callback) {
+			if (!this.events.has(event)) {
+				this.events.set(event, []);
+			}
+			this.events.get(event).push(callback);
+
+			return () => this.off(event, callback);
+		}
+
+		off(event, callback) {
+			const callbacks = this.events.get(event);
+			if (callbacks) {
+				const index = callbacks.indexOf(callback);
+				if (index > -1) {
+					callbacks.splice(index, 1);
+				}
+			}
+		}
+
+		emit(event, data) {
+			const callbacks = this.events.get(event);
+			if (callbacks) {
+				callbacks.forEach((callback) => {
+					try {
+						callback(data);
+					} catch (error) {
+						console.error('[FeedbackSDK] Event callback error:', error);
+					}
+				});
+			}
+		}
+
+		once(event, callback) {
+			const unsubscribe = this.on(event, (data) => {
+				callback(data);
+				unsubscribe();
+			});
+			return unsubscribe;
+		}
+
+		clear() {
+			this.events.clear();
+		}
+
+		getListenerCount(event) {
+			const callbacks = this.events.get(event);
+			return callbacks ? callbacks.length : 0;
+		}
+	}
+
+	function generateId(prefix = 'feedback') {
+		const timestamp = Date.now();
+		const random = Math.random().toString(36).substring(2, 9);
+		return `${prefix}_${timestamp}_${random}`;
+	}
+
+	function deepMerge(target, source) {
+		const result = { ...target };
+
+		for (const key in source) {
+			if (source.hasOwnProperty(key)) {
+				if (
+					source[key] &&
+					typeof source[key] === 'object' &&
+					!Array.isArray(source[key])
+				) {
+					result[key] = deepMerge(target[key] || {}, source[key]);
+				} else {
+					result[key] = source[key];
+				}
+			}
+		}
+
+		return result;
+	}
+
+	function debounce(func, wait) {
+		let timeout;
+		return function executedFunction(...args) {
+			const later = () => {
+				clearTimeout(timeout);
+				func(...args);
+			};
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+		};
+	}
+
+	function throttle(func, limit) {
+		let lastFunc;
+		let lastRan;
+		return function (...args) {
+			if (!lastRan) {
+				func(...args);
+				lastRan = Date.now();
+			} else {
+				clearTimeout(lastFunc);
+				lastFunc = setTimeout(
+					() => {
+						if (Date.now() - lastRan >= limit) {
+							func(...args);
+							lastRan = Date.now();
+						}
+					},
+					limit - (Date.now() - lastRan)
+				);
+			}
+		};
+	}
+
+	function isValidEmail(email) {
+		if (!email || typeof email !== 'string') return false;
+
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		return emailRegex.test(email.trim());
+	}
+
+	function sanitizeHTML(str) {
+		if (!str || typeof str !== 'string') return '';
+
+		const div = document.createElement('div');
+		div.textContent = str;
+		return div.innerHTML;
+	}
+
+	function getCSSProperty(element, property, fallback = '') {
+		if (!element || !property) return fallback;
+
+		try {
+			const style = window.getComputedStyle(element);
+			return style.getPropertyValue(property) || fallback;
+		} catch (error) {
+			return fallback;
+		}
+	}
+
+	function isInViewport(element) {
+		if (!element) return false;
+
+		const rect = element.getBoundingClientRect();
+		return (
+			rect.top >= 0 &&
+			rect.left >= 0 &&
+			rect.bottom <=
+				(window.innerHeight || document.documentElement.clientHeight) &&
+			rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+		);
+	}
+
+	function scrollToElement(element, options = {}) {
+		if (!element) return;
+
+		const defaultOptions = {
+			behavior: 'smooth',
+			block: 'center',
+			inline: 'nearest',
+		};
+
+		element.scrollIntoView({ ...defaultOptions, ...options });
+	}
+
+	function getBrowserInfo() {
+		const userAgent = navigator.userAgent;
+		const platform = navigator.platform;
+
+		return {
+			userAgent,
+			platform,
+			language: navigator.language || navigator.userLanguage,
+			cookieEnabled: navigator.cookieEnabled,
+			screenResolution: `${screen.width}x${screen.height}`,
+			windowSize: `${window.innerWidth}x${window.innerHeight}`,
+			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		};
+	}
+
+	function 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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+	}
+
+	function delay(ms) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	function safeJsonParse(str, fallback = null) {
+		try {
+			return JSON.parse(str);
+		} catch (error) {
+			return fallback;
+		}
+	}
+
+	function escapeRegex(string) {
+		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+	}
+
+	function getNestedProperty(obj, path, defaultValue = undefined) {
+		if (!obj || !path) return defaultValue;
+
+		const keys = path.split('.');
+		let current = obj;
+
+		for (const key of keys) {
+			if (current === null || current === undefined || !(key in current)) {
+				return defaultValue;
+			}
+			current = current[key];
+		}
+
+		return current;
+	}
+
+	function setNestedProperty(obj, path, value) {
+		if (!obj || !path) return obj;
+
+		const keys = path.split('.');
+		const lastKey = keys.pop();
+		let current = obj;
+
+		for (const key of keys) {
+			if (!(key in current) || typeof current[key] !== 'object') {
+				current[key] = {};
+			}
+			current = current[key];
+		}
+
+		current[lastKey] = value;
+		return obj;
+	}
+
+	function isBrowser() {
+		return typeof window !== 'undefined' && typeof document !== 'undefined';
+	}
+
+	function isMobile() {
+		if (!isBrowser()) return false;
+
+		return (
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+				navigator.userAgent
+			) || window.innerWidth <= 768
+		);
+	}
+
+	function getCurrentTimestamp() {
+		return new Date().toISOString();
+	}
+
+	function validateConfig(config, required = []) {
+		const missing = [];
+
+		for (const key of required) {
+			if (!config[key]) {
+				missing.push(key);
+			}
+		}
+
+		if (missing.length > 0) {
+			throw new Error(`Missing required configuration: ${missing.join(', ')}`);
+		}
+
+		return true;
+	}
+
+	var helpers = /*#__PURE__*/Object.freeze({
+		__proto__: null,
+		debounce: debounce,
+		deepMerge: deepMerge,
+		delay: delay,
+		escapeRegex: escapeRegex,
+		formatFileSize: formatFileSize,
+		generateId: generateId,
+		getBrowserInfo: getBrowserInfo,
+		getCSSProperty: getCSSProperty,
+		getCurrentTimestamp: getCurrentTimestamp,
+		getNestedProperty: getNestedProperty,
+		isBrowser: isBrowser,
+		isInViewport: isInViewport,
+		isMobile: isMobile,
+		isValidEmail: isValidEmail,
+		safeJsonParse: safeJsonParse,
+		sanitizeHTML: sanitizeHTML,
+		scrollToElement: scrollToElement,
+		setNestedProperty: setNestedProperty,
+		throttle: throttle,
+		validateConfig: validateConfig
+	});
+
+	class BaseWidget {
+		constructor(options = {}) {
+			this.id = options.id;
+			this.sdk = options.sdk;
+			this.apiService = options.apiService;
+			this.type = options.type || 'base';
+
+			this.options = {
+				container: null,
+				position: this.sdk.config.position,
+				theme: this.sdk.config.theme,
+				boardId: this.sdk.config.boardId,
+				autoShow: false,
+				customStyles: {},
+				...options,
+			};
+
+			this.element = null;
+			this.modalElement = null;
+			this.mounted = false;
+			this.destroyed = false;
+
+			this.state = {
+				isOpen: false,
+				isSubmitting: false,
+				title: '',
+				content: '',
+				email: '',
+				attachments: [],
+				errors: {},
+			};
+
+			this._bindMethods();
+		}
+
+		mount(container) {
+			if (this.mounted || this.destroyed) return this;
+
+			if (typeof container === 'string') {
+				container = document.querySelector(container);
+			}
+
+			if (!container) {
+				container = document.body;
+			}
+
+			this.container = container;
+			this.element = this._render();
+			this.container.appendChild(this.element);
+
+			this.mounted = true;
+			this._attachEvents();
+			this.onMount();
+
+			if (this.options.autoShow) {
+				this.show();
+			}
+
+			this.sdk.eventBus.emit('widget:mounted', { widget: this });
+			return this;
+		}
+
+		show() {
+			if (this.element) {
+				this.element.style.display = 'block';
+			}
+			return this;
+		}
+
+		hide() {
+			if (this.element) {
+				this.element.style.display = 'none';
+			}
+			return this;
+		}
+
+		openModal() {
+			this.state.isOpen = true;
+			this._renderModal();
+		}
+
+		closeModal() {
+			this.state.isOpen = false;
+			if (this.modalElement) {
+				this.modalElement.remove();
+				this.modalElement = null;
+			}
+			this._resetForm();
+		}
+
+		async submitFeedback() {
+			if (this.state.isSubmitting) return;
+
+			try {
+				this.state.isSubmitting = true;
+				this._updateSubmitButton();
+
+				const payload = {
+					title: this.state.title || 'Feedback',
+					content: this.state.content,
+					email: this.state.email,
+					board_id: this.options.boardId,
+					attachments: this.state.attachments,
+				};
+
+				if (!this.state.content.trim()) {
+					this._showError('Please enter your feedback message.');
+					return;
+				}
+
+				const response = await this.apiService.submitFeedback(payload);
+
+				this._showSuccessMessage();
+				this.closeModal();
+
+				this.sdk.eventBus.emit('feedback:submitted', {
+					widget: this,
+					feedback: response,
+				});
+			} catch (error) {
+				this._showError('Failed to submit feedback. Please try again.');
+				this.sdk.eventBus.emit('feedback:error', { widget: this, error });
+			} finally {
+				this.state.isSubmitting = false;
+				this._updateSubmitButton();
+			}
+		}
+
+		handleConfigUpdate(newConfig) {
+			this.options.theme = newConfig.theme;
+			if (this.element) {
+				this._updateTheme();
+			}
+		}
+
+		destroy() {
+			if (this.destroyed) return;
+
+			this.onDestroy();
+			this.closeModal();
+
+			if (this.element && this.element.parentNode) {
+				this.element.parentNode.removeChild(this.element);
+			}
+
+			this.destroyed = true;
+			this.mounted = false;
+			this.sdk.eventBus.emit('widget:destroyed', { widget: this });
+		}
+
+		onMount() {}
+		onDestroy() {}
+
+		_render() {
+			throw new Error('_render() must be implemented by concrete widget');
+		}
+
+		_attachEvents() {
+			// Override in concrete widgets
+		}
+
+		_bindMethods() {
+			this.openModal = this.openModal.bind(this);
+			this.closeModal = this.closeModal.bind(this);
+			this.submitFeedback = this.submitFeedback.bind(this);
+		}
+
+		_renderModal() {
+			if (this.modalElement) return;
+
+			this.modalElement = document.createElement('div');
+			this.modalElement.className = `feedback-modal theme-${this.options.theme}`;
+			this.modalElement.innerHTML = this._getModalHTML();
+
+			document.body.appendChild(this.modalElement);
+			this._attachModalEvents();
+
+			const firstInput = this.modalElement.querySelector('input, textarea');
+			if (firstInput) {
+				setTimeout(() => firstInput.focus(), 100);
+			}
+		}
+
+		_getModalHTML() {
+			return `
+      <div class="feedback-modal-overlay">
+        <div class="feedback-modal-content">
+          <div class="feedback-modal-header">
+            <h3>Send Feedback</h3>
+            <button class="feedback-modal-close" type="button">&times;</button>
+          </div>
+          <form class="feedback-form">
+            <div class="feedback-form-group">
+              <label for="feedback-title-${this.id}">Title</label>
+              <input 
+                type="text" 
+                id="feedback-title-${this.id}" 
+                name="title" 
+                placeholder="Brief description of your feedback"
+                value="${this.state.title}"
+              />
+            </div>
+            <div class="feedback-form-group">
+              <label for="feedback-content-${this.id}">Message *</label>
+              <textarea 
+                id="feedback-content-${this.id}" 
+                name="content" 
+                placeholder="Tell us more about your feedback..."
+                required
+              >${this.state.content}</textarea>
+            </div>
+            <div class="feedback-form-actions">
+              <button type="button" class="feedback-btn feedback-btn-cancel">Cancel</button>
+              <button type="submit" class="feedback-btn feedback-btn-submit">
+                ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
+              </button>
+            </div>
+            <div class="feedback-error" style="display: none;"></div>
+          </form>
+        </div>
+      </div>
+    `;
+		}
+
+		_attachModalEvents() {
+			const modal = this.modalElement;
+
+			modal
+				.querySelector('.feedback-modal-close')
+				.addEventListener('click', this.closeModal);
+			modal
+				.querySelector('.feedback-btn-cancel')
+				.addEventListener('click', this.closeModal);
+			modal
+				.querySelector('.feedback-modal-overlay')
+				.addEventListener('click', (e) => {
+					if (e.target === e.currentTarget) {
+						this.closeModal();
+					}
+				});
+
+			const form = modal.querySelector('.feedback-form');
+			form.addEventListener('submit', (e) => {
+				e.preventDefault();
+				this.submitFeedback();
+			});
+
+			modal
+				.querySelector('input[name="title"]')
+				.addEventListener('input', (e) => {
+					this.state.title = e.target.value;
+				});
+
+			modal
+				.querySelector('textarea[name="content"]')
+				.addEventListener('input', (e) => {
+					this.state.content = e.target.value;
+				});
+		}
+
+		_updateSubmitButton() {
+			if (this.modalElement) {
+				const submitBtn = this.modalElement.querySelector('.feedback-btn-submit');
+				if (submitBtn) {
+					submitBtn.textContent = this.state.isSubmitting
+						? 'Sending...'
+						: 'Send Feedback';
+					submitBtn.disabled = this.state.isSubmitting;
+				}
+			}
+		}
+
+		_showError(message) {
+			if (this.modalElement) {
+				const errorElement = this.modalElement.querySelector('.feedback-error');
+				errorElement.textContent = message;
+				errorElement.style.display = 'block';
+				setTimeout(() => {
+					if (errorElement) {
+						errorElement.style.display = 'none';
+					}
+				}, 5000);
+			}
+		}
+
+		_showSuccessMessage() {
+			const notification = document.createElement('div');
+			notification.className = 'feedback-success-notification';
+			notification.innerHTML = `
+      <div class="feedback-success-content">
+        <span>✓ Feedback submitted successfully!</span>
+        <button class="feedback-success-close">&times;</button>
+      </div>
+    `;
+
+			document.body.appendChild(notification);
+
+			setTimeout(() => {
+				if (notification.parentNode) {
+					notification.parentNode.removeChild(notification);
+				}
+			}, 3000);
+
+			notification
+				.querySelector('.feedback-success-close')
+				.addEventListener('click', () => {
+					if (notification.parentNode) {
+						notification.parentNode.removeChild(notification);
+					}
+				});
+		}
+
+		_resetForm() {
+			this.state.title = '';
+			this.state.content = '';
+			this.state.email = '';
+			this.state.errors = {};
+		}
+
+		_updateTheme() {
+			if (this.element) {
+				this.element.className = this.element.className.replace(
+					/theme-\w+/,
+					`theme-${this.options.theme}`
+				);
+			}
+			if (this.modalElement) {
+				this.modalElement.className = this.modalElement.className.replace(
+					/theme-\w+/,
+					`theme-${this.options.theme}`
+				);
+			}
+		}
+	}
+
+	class ButtonWidget extends BaseWidget {
+		constructor(options) {
+			super({ ...options, type: 'button' });
+		}
+
+		_render() {
+			const button = document.createElement('div');
+			button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
+			button.innerHTML = `
+      <button class="feedback-trigger-btn" type="button">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+        </svg>
+        Feedback
+      </button>
+    `;
+
+			if (this.options.customStyles) {
+				Object.assign(button.style, this.options.customStyles);
+			}
+
+			return button;
+		}
+
+		_attachEvents() {
+			const button = this.element.querySelector('.feedback-trigger-btn');
+			button.addEventListener('click', this.openModal);
+
+			button.addEventListener('mouseenter', () => {
+				if (!this.state.isSubmitting) {
+					button.style.transform = 'translateY(-2px)';
+				}
+			});
+
+			button.addEventListener('mouseleave', () => {
+				button.style.transform = 'translateY(0)';
+			});
+		}
+
+		updateText(text) {
+			const button = this.element?.querySelector('.feedback-trigger-btn');
+			if (button) {
+				const textNode = button.childNodes[button.childNodes.length - 1];
+				if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+					textNode.textContent = text;
+				}
+			}
+		}
+
+		updatePosition(position) {
+			this.options.position = position;
+			if (this.element) {
+				this.element.className = this.element.className.replace(
+					/position-\w+-\w+/,
+					`position-${position}`
+				);
+			}
+		}
+	}
+
+	class InlineWidget extends BaseWidget {
+		constructor(options) {
+			super({ ...options, type: 'inline' });
+		}
+
+		_render() {
+			const widget = document.createElement('div');
+			widget.className = `feedback-widget feedback-widget-inline theme-${this.options.theme}`;
+			widget.innerHTML = `
+      <div class="feedback-inline-content">
+        <h3>Send us your feedback</h3>
+        <form class="feedback-inline-form">
+          <div class="feedback-form-group">
+            <input 
+              type="text" 
+              name="title" 
+              placeholder="Title (optional)"
+              value="${this.state.title}"
+            />
+          </div>
+          <div class="feedback-form-group">
+            <textarea 
+              name="content" 
+              placeholder="Your feedback..."
+              required
+            >${this.state.content}</textarea>
+          </div>
+          <div class="feedback-form-group">
+            <input 
+              type="email" 
+              name="email" 
+              placeholder="Email (optional)"
+              value="${this.state.email}"
+            />
+          </div>
+          <button type="submit" class="feedback-btn feedback-btn-submit">
+            Send Feedback
+          </button>
+          <div class="feedback-error" style="display: none;"></div>
+        </form>
+      </div>
+    `;
+
+			if (this.options.customStyles) {
+				Object.assign(widget.style, this.options.customStyles);
+			}
+
+			return widget;
+		}
+
+		_attachEvents() {
+			const form = this.element.querySelector('.feedback-inline-form');
+
+			form.addEventListener('submit', (e) => {
+				e.preventDefault();
+				this.submitFeedback();
+			});
+
+			form.querySelector('input[name="title"]').addEventListener('input', (e) => {
+				this.state.title = e.target.value;
+			});
+
+			form
+				.querySelector('textarea[name="content"]')
+				.addEventListener('input', (e) => {
+					this.state.content = e.target.value;
+				});
+
+			form.querySelector('input[name="email"]').addEventListener('input', (e) => {
+				this.state.email = e.target.value;
+			});
+		}
+
+		openModal() {
+			const textarea = this.element.querySelector('textarea[name="content"]');
+			if (textarea) {
+				textarea.focus();
+			}
+		}
+
+		closeModal() {
+			// Inline widget doesn't use modal
+		}
+
+		_showSuccessMessage() {
+			const widget = this.element.querySelector('.feedback-inline-content');
+			const originalContent = widget.innerHTML;
+
+			widget.innerHTML = `
+      <div class="feedback-success">
+        <div class="feedback-success-icon">✓</div>
+        <h3>Thank you!</h3>
+        <p>Your feedback has been submitted successfully.</p>
+        <button class="feedback-btn feedback-btn-reset">Send Another</button>
+      </div>
+    `;
+
+			const resetBtn = widget.querySelector('.feedback-btn-reset');
+			resetBtn.addEventListener('click', () => {
+				widget.innerHTML = originalContent;
+				this._attachEvents();
+				this._resetForm();
+			});
+		}
+
+		_showError(message) {
+			const errorElement = this.element.querySelector('.feedback-error');
+			if (errorElement) {
+				errorElement.textContent = message;
+				errorElement.style.display = 'block';
+
+				setTimeout(() => {
+					if (errorElement) {
+						errorElement.style.display = 'none';
+					}
+				}, 5000);
+			}
+		}
+
+		_updateSubmitButton() {
+			const submitBtn = this.element.querySelector('.feedback-btn-submit');
+			if (submitBtn) {
+				submitBtn.textContent = this.state.isSubmitting
+					? 'Sending...'
+					: 'Send Feedback';
+				submitBtn.disabled = this.state.isSubmitting;
+			}
+		}
+
+		updateTitle(title) {
+			const titleElement = this.element?.querySelector('h3');
+			if (titleElement) {
+				titleElement.textContent = title;
+			}
+		}
+
+		setPlaceholder(field, placeholder) {
+			const input = this.element?.querySelector(`[name="${field}"]`);
+			if (input) {
+				input.placeholder = placeholder;
+			}
+		}
+	}
+
+	class TabWidget extends BaseWidget {
+		constructor(options) {
+			super({ ...options, type: 'tab' });
+		}
+
+		_render() {
+			const tab = document.createElement('div');
+			tab.className = `feedback-widget feedback-widget-tab theme-${this.options.theme} position-${this.options.position}`;
+			tab.innerHTML = `
+      <div class="feedback-tab-trigger">
+        <span class="feedback-tab-text">Feedback</span>
+      </div>
+    `;
+
+			if (this.options.customStyles) {
+				Object.assign(tab.style, this.options.customStyles);
+			}
+
+			return tab;
+		}
+
+		_attachEvents() {
+			const tab = this.element.querySelector('.feedback-tab-trigger');
+			tab.addEventListener('click', this.openModal);
+
+			tab.addEventListener('mouseenter', () => {
+				if (!this.state.isSubmitting) {
+					tab.style.transform = this._getHoverTransform();
+				}
+			});
+
+			tab.addEventListener('mouseleave', () => {
+				tab.style.transform = 'none';
+			});
+		}
+
+		_getHoverTransform() {
+			const position = this.options.position;
+			if (position.includes('right')) {
+				return 'translateX(-5px)';
+			} else if (position.includes('left')) {
+				return 'translateX(5px)';
+			}
+			return 'none';
+		}
+
+		updateText(text) {
+			const textElement = this.element?.querySelector('.feedback-tab-text');
+			if (textElement) {
+				textElement.textContent = text;
+			}
+		}
+
+		updatePosition(position) {
+			this.options.position = position;
+			if (this.element) {
+				this.element.className = this.element.className.replace(
+					/position-\w+-\w+/,
+					`position-${position}`
+				);
+			}
+		}
+	}
+
+	class WidgetFactory {
+		static widgets = new Map([
+			['button', ButtonWidget],
+			['tab', TabWidget],
+			['inline', InlineWidget],
+		]);
+
+		static register(type, WidgetClass) {
+			if (typeof type !== 'string' || !type.trim()) {
+				throw new SDKError('Widget type must be a non-empty string');
+			}
+
+			if (typeof WidgetClass !== 'function') {
+				throw new SDKError('Widget class must be a constructor function');
+			}
+
+			this.widgets.set(type, WidgetClass);
+		}
+
+		static create(type, options = {}) {
+			const WidgetClass = this.widgets.get(type);
+
+			if (!WidgetClass) {
+				const availableTypes = Array.from(this.widgets.keys()).join(', ');
+				throw new SDKError(
+					`Unknown widget type: ${type}. Available types: ${availableTypes}`
+				);
+			}
+
+			try {
+				return new WidgetClass(options);
+			} catch (error) {
+				throw new SDKError(
+					`Failed to create widget of type '${type}': ${error.message}`,
+					error
+				);
+			}
+		}
+
+		static getAvailableTypes() {
+			return Array.from(this.widgets.keys());
+		}
+
+		static isTypeRegistered(type) {
+			return this.widgets.has(type);
+		}
+
+		static unregister(type) {
+			return this.widgets.delete(type);
+		}
+
+		static clear() {
+			this.widgets.clear();
+		}
+
+		static getWidgetClass(type) {
+			return this.widgets.get(type);
+		}
+	}
+
+	class FeedbackSDK {
+		constructor(config = {}) {
+			this.config = this._validateAndMergeConfig(config);
+			this.initialized = false;
+			this.widgets = new Map();
+			this.eventBus = new EventBus();
+
+			// Initialize API service
+			this.apiService = new APIService({
+				apiUrl: this.config.apiUrl,
+				workspace: this.config.workspace,
+				userContext: this.config.userContext,
+			});
+
+			this._bindMethods();
+		}
+
+		async init() {
+			if (this.initialized) {
+				return { alreadyInitialized: true };
+			}
+
+			try {
+				// Initialize the API service (this will handle the /widget/init call)
+				const initData = await this.apiService.init(this.config.userContext);
+
+				// Merge any server-provided config with local config
+				if (initData.config) {
+					this.config = deepMerge(this.config, initData.config);
+				}
+
+				this.initialized = true;
+				this.eventBus.emit('sdk:initialized', {
+					config: this.config,
+					sessionToken: initData.sessionToken,
+				});
+
+				return {
+					initialized: true,
+					config: initData.config || {},
+					sessionToken: initData.sessionToken,
+					expiresIn: initData.expiresIn,
+				};
+			} catch (error) {
+				this.eventBus.emit('sdk:error', { error });
+				throw new SDKError(`Failed to initialize SDK: ${error.message}`, error);
+			}
+		}
+
+		createWidget(type = 'button', options = {}) {
+			if (!this.initialized) {
+				throw new SDKError(
+					'SDK must be initialized before creating widgets. Call init() first.'
+				);
+			}
+
+			const widgetId = generateId('widget');
+			const widgetOptions = {
+				id: widgetId,
+				sdk: this,
+				apiService: this.apiService,
+				...this.config,
+				...options,
+			};
+
+			try {
+				const widget = WidgetFactory.create(type, widgetOptions);
+				this.widgets.set(widgetId, widget);
+
+				this.eventBus.emit('widget:created', { widget, type });
+				return widget;
+			} catch (error) {
+				throw new SDKError(`Failed to create widget: ${error.message}`, error);
+			}
+		}
+
+		getWidget(id) {
+			return this.widgets.get(id);
+		}
+
+		getAllWidgets() {
+			return Array.from(this.widgets.values());
+		}
+
+		destroyWidget(id) {
+			const widget = this.widgets.get(id);
+			if (widget) {
+				widget.destroy();
+				this.widgets.delete(id);
+				this.eventBus.emit('widget:removed', { widgetId: id });
+				return true;
+			}
+			return false;
+		}
+
+		destroyAllWidgets() {
+			for (const widget of this.widgets.values()) {
+				widget.destroy();
+			}
+			this.widgets.clear();
+			this.eventBus.emit('widgets:cleared');
+		}
+
+		updateConfig(newConfig) {
+			const oldConfig = { ...this.config };
+			this.config = this._validateAndMergeConfig(newConfig, this.config);
+
+			// Update all existing widgets with new config
+			for (const widget of this.widgets.values()) {
+				widget.handleConfigUpdate(this.config);
+			}
+
+			this.eventBus.emit('config:updated', {
+				oldConfig,
+				newConfig: this.config,
+			});
+		}
+
+		setUserContext(userContext) {
+			this.config.userContext = userContext;
+			if (this.apiService) {
+				this.apiService.setUserContext(userContext);
+			}
+			this.eventBus.emit('user:updated', { userContext });
+		}
+
+		getUserContext() {
+			return (
+				this.config.userContext ||
+				(this.apiService ? this.apiService.getUserContext() : null)
+			);
+		}
+
+		async reinitialize(newUserContext = null) {
+			// Clear current session
+			this.apiService.clearSession();
+			this.initialized = false;
+
+			// Update user context if provided
+			if (newUserContext) {
+				this.setUserContext(newUserContext);
+			}
+
+			// Reinitialize
+			return this.init();
+		}
+
+		on(event, callback) {
+			this.eventBus.on(event, callback);
+			return this;
+		}
+
+		off(event, callback) {
+			this.eventBus.off(event, callback);
+			return this;
+		}
+
+		once(event, callback) {
+			this.eventBus.once(event, callback);
+			return this;
+		}
+
+		emit(event, data) {
+			this.eventBus.emit(event, data);
+			return this;
+		}
+
+		destroy() {
+			this.destroyAllWidgets();
+			this.eventBus.removeAllListeners();
+			this.apiService.clearSession();
+			this.initialized = false;
+			this.eventBus.emit('sdk:destroyed');
+		}
+
+		_validateAndMergeConfig(newConfig, existingConfig = {}) {
+			const defaultConfig = {
+				apiUrl: null,
+				workspace: null,
+				userContext: null,
+				position: 'bottom-right',
+				theme: 'light',
+				boardId: 'general',
+				autoShow: true,
+				debug: false,
+			};
+
+			const mergedConfig = deepMerge(
+				deepMerge(defaultConfig, existingConfig),
+				newConfig
+			);
+
+			// Validate required config
+			const requiredFields = ['workspace'];
+			const missingFields = requiredFields.filter(
+				(field) => !mergedConfig[field]
+			);
+
+			if (missingFields.length > 0) {
+				throw new ConfigError(
+					`Missing required configuration: ${missingFields.join(', ')}`
+				);
+			}
+
+			// Validate userContext structure if provided
+			if (mergedConfig.userContext) {
+				this._validateUserContext(mergedConfig.userContext);
+			}
+
+			return mergedConfig;
+		}
+
+		_validateUserContext(userContext) {
+			if (!userContext.user_id && !userContext.email) {
+				throw new ConfigError(
+					'User context must include at least user_id or email'
+				);
+			}
+
+			// Validate structure matches expected API format
+			const validStructure = {
+				user_id: 'string',
+				email: 'string',
+				name: 'string',
+				custom_fields: 'object',
+				company: 'object',
+			};
+
+			for (const [key, expectedType] of Object.entries(validStructure)) {
+				if (userContext[key] && typeof userContext[key] !== expectedType) {
+					throw new ConfigError(
+						`User context field '${key}' must be of type '${expectedType}'`
+					);
+				}
+			}
+		}
+
+		_bindMethods() {
+			this.createWidget = this.createWidget.bind(this);
+			this.destroyWidget = this.destroyWidget.bind(this);
+			this.updateConfig = this.updateConfig.bind(this);
+		}
+
+		// Static helper methods
+		static create(config) {
+			return new FeedbackSDK(config);
+		}
+
+		static async createAndInit(config) {
+			const sdk = new FeedbackSDK(config);
+			await sdk.init();
+			return sdk;
+		}
+
+		// Utility methods for external integrations
+		static extractUserContextFromAuth(authData) {
+			// Helper method to extract user context from common auth structures
+			if (!authData) return null;
+
+			return {
+				user_id: authData.sub || authData.id || authData.user_id,
+				email: authData.email,
+				name: authData.name || authData.display_name || authData.full_name,
+				custom_fields: {
+					role: authData.role,
+					plan: authData.plan || authData.subscription?.plan,
+					...(authData.custom_fields || {}),
+				},
+				company:
+					authData.company || authData.organization
+						? {
+								id: authData.company?.id || authData.organization?.id,
+								name: authData.company?.name || authData.organization?.name,
+								monthly_spend: authData.company?.monthly_spend,
+							}
+						: undefined,
+			};
+		}
+	}
+
+	const CSS_STYLES = `
+.feedback-widget {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+  z-index: 999999;
+  box-sizing: border-box;
+}
+
+.feedback-widget *,
+.feedback-widget *::before,
+.feedback-widget *::after {
+  box-sizing: border-box;
+}
+
+.feedback-widget-button {
+  position: fixed;
+  z-index: 999999;
+}
+
+.feedback-widget-button.position-bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+.feedback-widget-button.position-bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+.feedback-widget-button.position-top-right {
+  top: 20px;
+  right: 20px;
+}
+
+.feedback-widget-button.position-top-left {
+  top: 20px;
+  left: 20px;
+}
+
+.feedback-trigger-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 44px;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: none;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.3s duration;
+  color: white;
+  background: #155EEF;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+}
+
+.feedback-trigger-btn:hover:not(:disabled) {
+  background: #004EEB;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.1);
+}
+
+.feedback-trigger-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.feedback-trigger-btn:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
+
+.feedback-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+}
+
+.feedback-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feedback-modal-content {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  min-width: 460px;
+  max-width: 500px;
+  width: 100%;
+  padding: 16px;
+  max-height: 85vh;
+  overflow-y: hidden;
+  position: relative;
+}
+
+.feedback-modal.theme-dark .feedback-modal-content {
+  background: #1F2937;
+  color: white;
+}
+
+.feedback-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid #D1D5DB;
+  flex-shrink: 0;
+}
+
+.feedback-modal.theme-dark .feedback-modal-header {
+  border-bottom-color: #374151;
+}
+
+.feedback-modal-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.feedback-modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #6B7280;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.feedback-modal-close:hover {
+  color: #374151;
+}
+
+.feedback-modal-close:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
+
+.feedback-modal.theme-dark .feedback-modal-close {
+  color: #9CA3AF;
+}
+
+.feedback-modal.theme-dark .feedback-modal-close:hover {
+  color: #D1D5DB;
+}
+
+.feedback-form {
+  padding: 16px;
+}
+
+.feedback-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.feedback-form-group:last-child {
+  margin-bottom: 0;
+}
+
+.feedback-form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #374151;
+}
+
+.feedback-modal.theme-dark .feedback-form-group label {
+  color: #D1D5DB;
+}
+
+.feedback-form-group input {
+  height: 40px;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #D1D5DB;
+  padding: 2px 12px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #1F2937;
+  font-family: inherit;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.feedback-form-group input::placeholder {
+  font-size: 14px;
+  color: #6B7280;
+}
+
+.feedback-form-group input:focus {
+  border-color: #84ADFF;
+  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(41, 112, 255, 0.2);
+}
+
+.feedback-form-group input:focus-visible {
+  outline: none;
+}
+
+.feedback-form-group textarea {
+  min-height: 100px;
+  width: 100%;
+  resize: both;
+  border-radius: 6px;
+  border: 1px solid #D1D5DB;
+  padding: 2px 12px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #1F2937;
+  font-family: inherit;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.feedback-form-group textarea::placeholder {
+  font-size: 14px;
+  color: #6B7280;
+}
+
+.feedback-form-group textarea:focus {
+  border-color: #84ADFF;
+  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(41, 112, 255, 0.2);
+}
+
+.feedback-form-group textarea:focus-visible {
+  outline: none;
+}
+
+.feedback-modal.theme-dark .feedback-form-group input,
+.feedback-modal.theme-dark .feedback-form-group textarea {
+  background: #374151;
+  border-color: #4B5563;
+  color: white;
+}
+
+.feedback-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 6px;
+  border: none;
+  height: 40px;
+  padding: 2px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.feedback-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.feedback-btn:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
+
+.feedback-btn-submit {
+  background: #155EEF;
+  color: white;
+}
+
+.feedback-btn-submit:hover:not(:disabled) {
+  background: #004EEB;
+}
+
+.feedback-btn-cancel {
+  background: transparent;
+  color: #6B7280;
+  border: 1px solid #D1D5DB;
+}
+
+.feedback-btn-cancel:hover:not(:disabled) {
+  background: #F9FAFB;
+  border-color: #9CA3AF;
+  color: #374151;
+}
+
+.feedback-modal.theme-dark .feedback-btn-cancel {
+  color: #D1D5DB;
+  border-color: #4B5563;
+}
+
+.feedback-modal.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
+  background: #374151;
+}
+
+.feedback-form-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 16px;
+  padding-top: 4px;
+}
+
+.feedback-loading {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  mask: radial-gradient(transparent 62%, white 65%);
+  -webkit-mask: radial-gradient(transparent 62%, white 65%);
+  animation: feedbackRotate 0.7s linear infinite;
+}
+
+.feedback-loading-white {
+  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.5), white);
+}
+
+.feedback-loading-blue {
+  background: conic-gradient(from 0deg, #004EEB, #eff4ff);
+}
+
+@keyframes feedbackRotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.feedback-error {
+  color: #F04438;
+  font-size: 14px;
+  font-weight: 400;
+  margin-top: 4px;
+  text-transform: capitalize;
+}
+
+.feedback-form-error {
+  color: #F04438;
+  font-size: 14px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: #FEE2E2;
+  border: 1px solid #FECACA;
+  border-radius: 6px;
+}
+
+.feedback-modal.theme-dark .feedback-form-error {
+  background: #7F1D1D;
+  border-color: #991B1B;
+  color: #FCA5A5;
+}
+
+.feedback-form-group.error input,
+.feedback-form-group.error textarea {
+  border-color: #FDA29B;
+}
+
+.feedback-form-group.error input:focus,
+.feedback-form-group.error textarea:focus {
+  border-color: #FDA29B;
+  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(253, 162, 155, 0.3);
+}
+
+.feedback-success-notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000001;
+  background: white;
+  border: 1px solid #D1FAE5;
+  border-radius: 8px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  animation: slideInRight 0.3s ease-out;
+}
+
+.feedback-success-content {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 12px;
+}
+
+.feedback-success-content span {
+  color: #059669;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.feedback-success-close {
+  background: none;
+  border: none;
+  color: #6B7280;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.feedback-success-close:hover {
+  color: #374151;
+}
+
+.feedback-success-close:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.feedback-modal {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.feedback-modal-content {
+  animation: slideInUp 0.3s ease-out;
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 640px) {
+  .feedback-modal {
+    padding: 8px;
+  }
+  
+  .feedback-modal-content {
+    min-width: 280px;
+    max-width: 100%;
+    max-height: 95vh;
+  }
+  
+  .feedback-form {
+    padding: 16px;
+  }
+  
+  .feedback-modal-header {
+    padding: 16px;
+  }
+  
+  .feedback-modal-header h3 {
+    font-size: 15px;
+  }
+  
+  .feedback-form-actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .feedback-btn {
+    width: 100%;
+    height: 40px;
+  }
+  
+  .feedback-widget-button {
+    bottom: 16px;
+    right: 16px;
+  }
+  
+  .feedback-widget-button.position-bottom-left {
+    left: 16px;
+  }
+  
+  .feedback-trigger-btn {
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+  
+  .feedback-success-notification {
+    top: 8px;
+    right: 8px;
+    left: 8px;
+    max-width: none;
+  }
+
+  .feedback-form-group input {
+    height: 40px;
+    padding: 2px 12px;
+  }
+  
+  .feedback-form-group textarea {
+    min-height: 80px;
+    padding: 2px 12px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .feedback-trigger-btn,
+  .feedback-btn,
+  .feedback-modal,
+  .feedback-modal-content,
+  .feedback-success-notification,
+  .feedback-loading {
+    transition: none;
+    animation: none;
+  }
+  
+  .feedback-trigger-btn:hover {
+    transform: none;
+  }
+}
+
+@media print {
+  .feedback-widget,
+  .feedback-modal,
+  .feedback-success-notification {
+    display: none !important;
+  }
+}
+`;
+
+	function injectStyles() {
+		console.log('injectStyles called');
+		console.log('document exists:', typeof document !== 'undefined');
+		console.log('CSS_STYLES exists:', true);
+
+		if (
+			typeof document !== 'undefined' &&
+			!document.querySelector('#feedback-sdk-styles')
+		) {
+			console.log('Injecting CSS...');
+			const style = document.createElement('style');
+			style.id = 'feedback-sdk-styles';
+			style.textContent = CSS_STYLES;
+			document.head.appendChild(style);
+			console.log(
+				'CSS injected, style element created:',
+				!!document.querySelector('#feedback-sdk-styles')
+			);
+		} else {
+			console.log('CSS already exists or document not ready');
+		}
+	}
+
+	function autoInit() {
+		if (typeof window !== 'undefined' && window.FeedbackSDKConfig) {
+			injectStyles();
+
+			const config = { ...window.FeedbackSDKConfig };
+
+			if (!config.userContext) {
+				config.userContext = getUserContextFromEnvironment();
+			}
+
+			const sdk = new FeedbackSDK(config);
+
+			sdk
+				.init()
+				.then((initData) => {
+					window.FeedbackSDK.instance = sdk;
+
+					if (window.FeedbackSDKConfig.autoCreate) {
+						const widgets = Array.isArray(window.FeedbackSDKConfig.autoCreate)
+							? window.FeedbackSDKConfig.autoCreate
+							: [window.FeedbackSDKConfig.autoCreate];
+
+						widgets.forEach((widgetConfig) => {
+							try {
+								const widget = sdk.createWidget(
+									widgetConfig.type || 'button',
+									widgetConfig
+								);
+								widget.mount(widgetConfig.container);
+							} catch (error) {
+								console.error('[FeedbackSDK] Failed to create widget:', error);
+							}
+						});
+					}
+
+					if (typeof CustomEvent !== 'undefined') {
+						const event = new CustomEvent('FeedbackSDKReady', {
+							detail: {
+								sdk,
+								config: config,
+								initData: initData,
+							},
+						});
+						window.dispatchEvent(event);
+					}
+
+					console.log(
+						'[FeedbackSDK] Successfully initialized with session:',
+						initData.sessionToken ? 'Yes' : 'No'
+					);
+				})
+				.catch((error) => {
+					console.error('[FeedbackSDK] Auto-initialization failed:', error);
+
+					if (typeof CustomEvent !== 'undefined') {
+						const event = new CustomEvent('FeedbackSDKError', {
+							detail: {
+								error,
+								config: config,
+								phase: 'initialization',
+							},
+						});
+						window.dispatchEvent(event);
+					}
+				});
+		}
+	}
+
+	function getUserContextFromEnvironment() {
+		if (typeof window === 'undefined') return null;
+
+		if (window.FeedbackSDKUserContext) {
+			return window.FeedbackSDKUserContext;
+		}
+
+		const authSources = [
+			() => window.auth0?.user,
+			() => window.firebase?.auth()?.currentUser,
+			() => window.amplify?.Auth?.currentAuthenticatedUser(),
+
+			() => window.currentUser,
+			() => window.user,
+			() => window.userData,
+
+			() => window.app?.user,
+			() => window.store?.getState?.()?.user,
+			() => window.App?.currentUser,
+		];
+
+		for (const getAuth of authSources) {
+			try {
+				const authData = getAuth();
+				if (authData) {
+					const userContext = FeedbackSDK.extractUserContextFromAuth(authData);
+					if (userContext && (userContext.user_id || userContext.email)) {
+						console.log(
+							'[FeedbackSDK] Auto-detected user context from',
+							getAuth.name || 'unknown source'
+						);
+						return userContext;
+					}
+				}
+			} catch (error) {
+				continue;
+			}
+		}
+
+		try {
+			const storedAuth =
+				localStorage.getItem('auth') ||
+				localStorage.getItem('user') ||
+				localStorage.getItem('session');
+			if (storedAuth) {
+				const authData = JSON.parse(storedAuth);
+				const userContext = FeedbackSDK.extractUserContextFromAuth(authData);
+				if (userContext && (userContext.user_id || userContext.email)) {
+					console.log(
+						'[FeedbackSDK] Auto-detected user context from localStorage'
+					);
+					return userContext;
+				}
+			}
+		} catch (error) {
+			// Continue
+		}
+
+		console.warn(
+			'[FeedbackSDK] No user context found. Widget initialization may require manual user context setting.'
+		);
+		return null;
+	}
+
+	function handleDOMReady() {
+		if (typeof document !== 'undefined') {
+			if (document.readyState === 'loading') {
+				document.addEventListener('DOMContentLoaded', autoInit);
+			} else {
+				setTimeout(autoInit, 0);
+			}
+		}
+	}
+
+	const FeedbackSDKExport = {
+		FeedbackSDK,
+		BaseWidget,
+		ButtonWidget,
+		TabWidget,
+		InlineWidget,
+		WidgetFactory,
+		EventBus,
+		APIService,
+		SDKError,
+		APIError,
+		WidgetError,
+		ConfigError,
+		ValidationError,
+		helpers,
+		create: (config) => {
+			injectStyles();
+			return new FeedbackSDK(config);
+		},
+		version: '1.0.0',
+		instance: null,
+
+		isReady: () => Boolean(FeedbackSDKExport.instance),
+		getInstance: () => FeedbackSDKExport.instance,
+
+		setUserContext: (userContext) => {
+			if (FeedbackSDKExport.instance) {
+				FeedbackSDKExport.instance.setUserContext(userContext);
+			} else {
+				if (typeof window !== 'undefined') {
+					window.FeedbackSDKUserContext = userContext;
+				}
+			}
+		},
+
+		initWithUser: async (config, userContext) => {
+			injectStyles();
+			const fullConfig = { ...config, userContext };
+			const sdk = new FeedbackSDK(fullConfig);
+			await sdk.init();
+
+			if (typeof window !== 'undefined') {
+				window.FeedbackSDK.instance = sdk;
+			}
+
+			return sdk;
+		},
+
+		onReady: (callback) => {
+			if (typeof window !== 'undefined') {
+				if (FeedbackSDKExport.isReady()) {
+					callback(FeedbackSDKExport.instance);
+				} else {
+					window.addEventListener(
+						'FeedbackSDKReady',
+						(event) => {
+							callback(event.detail.sdk, event.detail);
+						},
+						{ once: true }
+					);
+				}
+			}
+		},
+
+		onError: (callback) => {
+			if (typeof window !== 'undefined') {
+				window.addEventListener('FeedbackSDKError', (event) => {
+					callback(event.detail.error, event.detail);
+				});
+			}
+		},
+
+		extractUserContext: FeedbackSDK.extractUserContextFromAuth,
+	};
+
+	if (typeof window !== 'undefined') {
+		window.FeedbackSDK = FeedbackSDKExport;
+		handleDOMReady();
+	}
+
+	exports.APIError = APIError;
+	exports.APIService = APIService;
+	exports.BaseWidget = BaseWidget;
+	exports.ButtonWidget = ButtonWidget;
+	exports.ConfigError = ConfigError;
+	exports.EventBus = EventBus;
+	exports.FeedbackSDK = FeedbackSDK;
+	exports.InlineWidget = InlineWidget;
+	exports.SDKError = SDKError;
+	exports.TabWidget = TabWidget;
+	exports.ValidationError = ValidationError;
+	exports.WidgetError = WidgetError;
+	exports.WidgetFactory = WidgetFactory;
+	exports.default = FeedbackSDKExport;
+	exports.helpers = helpers;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+}));