@newsoftglobal/feedbackkit-js 1.0.0

package/README.md

@@ -0,0 +1,78 @@
+# @newsoftglobal/feedbackkit-js
+
+Vanilla JavaScript SDK for [FeedbackKit](https://feedbackkit.dev) — zero dependencies.
+
+## Installation
+
+### Via CDN (recommended)
+
+```html
+<script src="https://unpkg.com/@newsoftglobal/feedbackkit-js/dist/feedbackkit.min.js"></script>
+```
+
+### Via npm
+
+```bash
+npm install @newsoftglobal/feedbackkit-js
+```
+
+## Usage
+
+### CDN / Script Tag
+
+```html
+<script src="https://unpkg.com/@newsoftglobal/feedbackkit-js/dist/feedbackkit.min.js"></script>
+<script>
+  FeedbackKit.init({
+    apiKey: 'your-api-key'
+  });
+</script>
+```
+
+### With User Identity
+
+```html
+<script>
+  FeedbackKit.init({ apiKey: 'your-api-key' });
+
+  // After user logs in
+  FeedbackKit.setUser({
+    id: 'user-123',
+    email: 'user@example.com',
+    name: 'John Doe'
+  });
+
+  // On logout
+  FeedbackKit.clearUser();
+</script>
+```
+
+### Screenshot Support
+
+For real screenshot capture, include [html2canvas](https://html2canvas.hertzen.com):
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script src="https://unpkg.com/@newsoftglobal/feedbackkit-js/dist/feedbackkit.min.js"></script>
+```
+
+## API
+
+| Method | Description |
+|--------|-------------|
+| `FeedbackKit.init({ apiKey })` | Initialize the widget |
+| `FeedbackKit.setUser({ id, email, name })` | Set user identity |
+| `FeedbackKit.clearUser()` | Clear user identity |
+| `FeedbackKit.destroy()` | Remove widget from page |
+
+## Features
+
+- 🎯 Floating feedback button
+- 📸 Area screenshot capture
+- 📝 Feedback form (bug, feature, improvement, other)
+- 📋 User feedback history
+- 💬 Comment thread with admin replies
+- 👤 User identification
+- 🎨 Dark theme UI
+- 📦 Zero dependencies
+- ⚡ Single `<script>` tag setup

package/dist/feedbackkit.js

@@ -0,0 +1,669 @@
+/**
+ * FeedbackKit JS SDK v1.0.0
+ * Vanilla JavaScript — no dependencies
+ * Usage: FeedbackKit.init({ apiKey: 'your-key' })
+ */
+(function (root) {
+    'use strict';
+
+    const SERVER_URL = 'https://backend.feedbackkit.dev';
+
+    // ==================== CSS ====================
+    const CSS = `
+.fk-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:16px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;cursor:pointer;box-shadow:0 4px 20px rgba(99,102,241,.4);display:flex;align-items:center;justify-content:center;z-index:99999;transition:all .2s}
+.fk-fab:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(99,102,241,.55)}
+.fk-panel{position:fixed;bottom:88px;right:24px;width:360px;max-height:480px;background:#1a1d2e;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:99998;display:flex;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f0f0f5}
+.fk-panel *{box-sizing:border-box;margin:0;padding:0}
+.fk-panel-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06)}
+.fk-tab{flex:1;padding:12px;background:none;border:none;color:#a0a0b8;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
+.fk-tab:hover{color:#f0f0f5;background:rgba(255,255,255,.03)}
+.fk-tab.active{color:#818cf8;border-bottom:2px solid #818cf8}
+.fk-panel-body{padding:20px;display:flex;flex-direction:column;gap:12px}
+.fk-panel-hint{font-size:13px;color:#a0a0b8;text-align:center}
+.fk-btn{padding:10px 16px;border-radius:10px;border:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
+.fk-btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 12px rgba(99,102,241,.3)}
+.fk-btn-primary:hover{box-shadow:0 4px 20px rgba(99,102,241,.5);transform:translateY(-1px)}
+.fk-btn-full{width:100%}
+.fk-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
+.fk-form{padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:420px}
+.fk-form label{font-size:12px;font-weight:600;color:#a0a0b8;display:block;margin-bottom:4px}
+.fk-form input,.fk-form textarea,.fk-form select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#f0f0f5;font-family:inherit;font-size:13px;outline:none;transition:border .2s}
+.fk-form input:focus,.fk-form textarea:focus,.fk-form select:focus{border-color:#6366f1}
+.fk-form textarea{resize:vertical;min-height:60px}
+.fk-form select option{background:#1a1d2e;color:#f0f0f5}
+.fk-screenshot-preview{position:relative;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
+.fk-screenshot-preview img{width:100%;display:block}
+.fk-screenshot-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.fk-success{text-align:center;padding:30px 20px}
+.fk-success-icon{font-size:40px;margin-bottom:12px}
+.fk-success h4{font-size:16px;font-weight:700;margin-bottom:4px}
+.fk-success p{font-size:13px;color:#a0a0b8}
+.fk-list{padding:12px;overflow-y:auto;max-height:380px;display:flex;flex-direction:column;gap:6px}
+.fk-list-item{padding:12px;border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;transition:background .2s}
+.fk-list-item:hover{background:rgba(255,255,255,.06)}
+.fk-list-item-title{font-size:13px;font-weight:600;margin-bottom:4px}
+.fk-list-item-meta{display:flex;gap:8px;align-items:center}
+.fk-list-item-meta span{font-size:11px;color:#a0a0b8}
+.fk-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600}
+.fk-badge-bug{background:rgba(239,68,68,.12);color:#fca5a5}
+.fk-badge-feature{background:rgba(99,102,241,.12);color:#818cf8}
+.fk-badge-improvement{background:rgba(234,179,8,.12);color:#fde047}
+.fk-badge-other{background:rgba(59,130,246,.12);color:#93c5fd}
+.fk-badge-new{background:rgba(234,179,8,.12);color:#fde047}
+.fk-badge-in-progress{background:rgba(59,130,246,.12);color:#93c5fd}
+.fk-badge-resolved{background:rgba(34,197,94,.12);color:#86efac}
+.fk-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:100000;display:flex;align-items:center;justify-content:center}
+.fk-detail-modal{background:#1a1d2e;border-radius:16px;width:90%;max-width:440px;max-height:80vh;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,sans-serif;color:#f0f0f5}
+.fk-detail-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center}
+.fk-detail-header h4{font-size:15px;font-weight:700}
+.fk-detail-close{background:none;border:none;color:#a0a0b8;font-size:20px;cursor:pointer;padding:4px}
+.fk-detail-body{flex:1;overflow-y:auto;padding:16px 20px}
+.fk-detail-desc{font-size:13px;color:#a0a0b8;margin-bottom:16px;line-height:1.5}
+.fk-comments{display:flex;flex-direction:column;gap:10px;margin-top:12px}
+.fk-comment{padding:10px 14px;border-radius:10px;max-width:85%}
+.fk-comment.user{background:rgba(99,102,241,.12);align-self:flex-end}
+.fk-comment.admin{background:rgba(255,255,255,.06);align-self:flex-start}
+.fk-comment-author{font-size:10px;font-weight:600;color:#a0a0b8;margin-bottom:4px}
+.fk-comment-text{font-size:13px;line-height:1.4}
+.fk-comment-time{font-size:10px;color:#555568;margin-top:4px}
+.fk-detail-input{display:flex;gap:8px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06)}
+.fk-detail-input input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#f0f0f5;font-family:inherit;font-size:13px;outline:none}
+.fk-detail-input button{padding:8px 16px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-weight:600;font-size:13px;cursor:pointer}
+.fk-empty{text-align:center;padding:30px 12px;color:#555568;font-size:13px}
+.fk-capture-overlay{position:fixed;inset:0;z-index:100001;cursor:crosshair;background:rgba(0,0,0,.3)}
+.fk-capture-selection{position:fixed;border:2px solid #6366f1;background:rgba(99,102,241,.08);z-index:100002}
+.fk-capture-hint{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1a1d2e;color:#f0f0f5;padding:10px 20px;border-radius:10px;font-size:13px;font-family:'Inter',sans-serif;z-index:100003;box-shadow:0 4px 16px rgba(0,0,0,.4)}
+`;
+
+    // ==================== API ====================
+    class FeedbackKitAPI {
+        constructor(apiKey) {
+            this.apiKey = apiKey;
+            this.serverUrl = SERVER_URL;
+            this.user = { id: null, email: null, name: null };
+        }
+
+        setUser(info) {
+            if (!info?.id) return;
+            this.user.id = info.id;
+            this.user.email = info.email || null;
+            this.user.name = info.name || null;
+        }
+
+        clearUser() {
+            this.user = { id: null, email: null, name: null };
+        }
+
+        get hasUser() { return !!this.user.id; }
+
+        async submitFeedback({ title, description, type, screenshot, metadata, userEmail }) {
+            const fd = new FormData();
+            fd.append('title', title);
+            if (description) fd.append('description', description);
+            if (type) fd.append('type', type);
+            if (metadata) fd.append('metadata', JSON.stringify(metadata));
+            if (this.user.id) fd.append('userId', this.user.id);
+            if (this.user.name) fd.append('userName', this.user.name);
+            fd.append('userEmail', userEmail || this.user.email || '');
+
+            if (screenshot) {
+                let blob = screenshot;
+                if (typeof screenshot === 'string' && screenshot.startsWith('data:')) {
+                    blob = await (await fetch(screenshot)).blob();
+                }
+                fd.append('screenshot', blob, 'screenshot.png');
+            }
+
+            const res = await fetch(`${this.serverUrl}/api/feedbacks`, {
+                method: 'POST',
+                headers: { 'x-api-key': this.apiKey },
+                body: fd
+            });
+            if (!res.ok) { const e = await res.json().catch(() => ({})); throw new Error(e.error || `HTTP ${res.status}`); }
+            return res.json();
+        }
+
+        async getUserFeedbacks(page = 1) {
+            if (!this.user.id) return { feedbacks: [], pagination: {} };
+            const p = new URLSearchParams({ userId: this.user.id, page, limit: 20 });
+            const res = await fetch(`${this.serverUrl}/api/feedbacks/user?${p}`, { headers: { 'x-api-key': this.apiKey } });
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return res.json();
+        }
+
+        async getFeedbackDetail(id) {
+            if (!this.user.id) return null;
+            const p = new URLSearchParams({ userId: this.user.id });
+            const res = await fetch(`${this.serverUrl}/api/feedbacks/user/${id}?${p}`, { headers: { 'x-api-key': this.apiKey } });
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return (await res.json()).feedback;
+        }
+
+        async addComment(id, text) {
+            if (!this.user.id) throw new Error('User not set');
+            const res = await fetch(`${this.serverUrl}/api/feedbacks/user/${id}/comments`, {
+                method: 'POST',
+                headers: { 'x-api-key': this.apiKey, 'Content-Type': 'application/json' },
+                body: JSON.stringify({ userId: this.user.id, userName: this.user.name || 'User', text })
+            });
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return res.json();
+        }
+    }
+
+    // ==================== Widget ====================
+    class FeedbackKitWidget {
+        constructor(api) {
+            this.api = api;
+            this.state = 'idle'; // idle, panel, capturing, form, success, detail
+            this.screenshot = null;
+            this.activeTab = 'new';
+            this.feedbacks = [];
+            this.detailFeedback = null;
+            this.captureData = {};
+            this._injectCSS();
+            this._createFAB();
+        }
+
+        _injectCSS() {
+            if (document.getElementById('fk-styles')) return;
+            const s = document.createElement('style');
+            s.id = 'fk-styles';
+            s.textContent = CSS;
+            document.head.appendChild(s);
+        }
+
+        _createFAB() {
+            this.fab = document.createElement('button');
+            this.fab.className = 'fk-fab';
+            this.fab.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="12" y1="6" x2="12" y2="12"/></svg>';
+            this.fab.onclick = () => this._togglePanel();
+            document.body.appendChild(this.fab);
+        }
+
+        _togglePanel() {
+            if (this.state === 'panel') {
+                this._closePanel();
+            } else {
+                this._showPanel();
+            }
+        }
+
+        _showPanel() {
+            this.state = 'panel';
+            this._updateFABIcon('close');
+            this._removeEl('.fk-panel');
+            const panel = this._el('div', 'fk-panel');
+
+            // Tabs
+            const tabs = this._el('div', 'fk-panel-tabs');
+            const tabNew = this._el('button', `fk-tab ${this.activeTab === 'new' ? 'active' : ''}`);
+            tabNew.textContent = '✏️ New Feedback';
+            tabNew.onclick = () => { this.activeTab = 'new'; this._showPanel(); };
+
+            const tabList = this._el('button', `fk-tab ${this.activeTab === 'list' ? 'active' : ''}`);
+            tabList.textContent = '📋 My Feedbacks';
+            tabList.onclick = () => { this.activeTab = 'list'; this._loadFeedbacks(); this._showPanel(); };
+
+            tabs.append(tabNew, tabList);
+            panel.appendChild(tabs);
+
+            if (this.activeTab === 'new') {
+                const body = this._el('div', 'fk-panel-body');
+                const hint = this._el('p', 'fk-panel-hint');
+                hint.textContent = 'Capture a screenshot and send your feedback';
+                const btn = this._el('button', 'fk-btn fk-btn-primary fk-btn-full');
+                btn.textContent = '📸 Select Area & Capture';
+                btn.onclick = () => this._startCapture();
+                body.append(hint, btn);
+                panel.appendChild(body);
+            } else {
+                this._renderList(panel);
+            }
+
+            document.body.appendChild(panel);
+        }
+
+        _closePanel() {
+            this.state = 'idle';
+            this._updateFABIcon('open');
+            this._removeEl('.fk-panel');
+        }
+
+        _updateFABIcon(type) {
+            if (type === 'close') {
+                this.fab.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+            } else {
+                this.fab.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="12" y1="6" x2="12" y2="12"/></svg>';
+            }
+        }
+
+        // ==================== Screen Capture ====================
+        _startCapture() {
+            this._closePanel();
+            this.state = 'capturing';
+            this.fab.style.display = 'none';
+
+            const hint = this._el('div', 'fk-capture-hint');
+            hint.textContent = 'Click and drag to select area • Esc to cancel';
+            document.body.appendChild(hint);
+
+            const overlay = this._el('div', 'fk-capture-overlay');
+            let startX, startY, selection;
+
+            overlay.onmousedown = (e) => {
+                startX = e.clientX;
+                startY = e.clientY;
+                selection = this._el('div', 'fk-capture-selection');
+                selection.style.left = startX + 'px';
+                selection.style.top = startY + 'px';
+                document.body.appendChild(selection);
+            };
+
+            overlay.onmousemove = (e) => {
+                if (!selection) return;
+                const x = Math.min(e.clientX, startX);
+                const y = Math.min(e.clientY, startY);
+                const w = Math.abs(e.clientX - startX);
+                const h = Math.abs(e.clientY - startY);
+                Object.assign(selection.style, { left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px' });
+            };
+
+            overlay.onmouseup = (e) => {
+                const rect = {
+                    x: Math.min(e.clientX, startX),
+                    y: Math.min(e.clientY, startY),
+                    w: Math.abs(e.clientX - startX),
+                    h: Math.abs(e.clientY - startY)
+                };
+                this._removeEl('.fk-capture-overlay');
+                this._removeEl('.fk-capture-selection');
+                this._removeEl('.fk-capture-hint');
+                this.fab.style.display = '';
+
+                if (rect.w < 10 || rect.h < 10) {
+                    this._showPanel();
+                    return;
+                }
+
+                this._captureArea(rect);
+            };
+
+            const onEsc = (e) => {
+                if (e.key === 'Escape') {
+                    this._removeEl('.fk-capture-overlay');
+                    this._removeEl('.fk-capture-selection');
+                    this._removeEl('.fk-capture-hint');
+                    this.fab.style.display = '';
+                    this._showPanel();
+                    document.removeEventListener('keydown', onEsc);
+                }
+            };
+            document.addEventListener('keydown', onEsc);
+            document.body.appendChild(overlay);
+        }
+
+        async _captureArea(rect) {
+            try {
+                // Use html2canvas if available, otherwise capture via canvas
+                if (typeof html2canvas !== 'undefined') {
+                    const canvas = await html2canvas(document.body, {
+                        x: rect.x + window.scrollX,
+                        y: rect.y + window.scrollY,
+                        width: rect.w,
+                        height: rect.h,
+                        windowWidth: document.documentElement.scrollWidth,
+                        windowHeight: document.documentElement.scrollHeight
+                    });
+                    this.screenshot = canvas.toDataURL('image/png');
+                } else {
+                    // Fallback: full page screenshot via canvas (limited)
+                    const canvas = document.createElement('canvas');
+                    const dpr = window.devicePixelRatio || 1;
+                    canvas.width = rect.w * dpr;
+                    canvas.height = rect.h * dpr;
+                    const ctx = canvas.getContext('2d');
+                    ctx.scale(dpr, dpr);
+                    ctx.fillStyle = '#f0f0f5';
+                    ctx.fillRect(0, 0, rect.w, rect.h);
+                    ctx.font = '14px Inter, sans-serif';
+                    ctx.fillStyle = '#555';
+                    ctx.fillText(`Screenshot area: ${rect.w}×${rect.h}`, 10, 24);
+                    ctx.fillText('Add html2canvas for real capture', 10, 44);
+                    this.screenshot = canvas.toDataURL('image/png');
+                }
+                this._showForm();
+            } catch (err) {
+                console.error('[FeedbackKit] Capture error:', err);
+                this._showPanel();
+            }
+        }
+
+        // ==================== Feedback Form ====================
+        _showForm() {
+            this.state = 'form';
+            this._removeEl('.fk-panel');
+            this._updateFABIcon('close');
+
+            const panel = this._el('div', 'fk-panel');
+            const form = this._el('div', 'fk-form');
+
+            // Screenshot preview
+            if (this.screenshot) {
+                const preview = this._el('div', 'fk-screenshot-preview');
+                const img = document.createElement('img');
+                img.src = this.screenshot;
+                const removeBtn = this._el('button', 'fk-screenshot-remove');
+                removeBtn.textContent = '×';
+                removeBtn.onclick = () => { this.screenshot = null; preview.remove(); };
+                preview.append(img, removeBtn);
+                form.appendChild(preview);
+            }
+
+            // Title
+            const titleGroup = this._el('div');
+            const titleLabel = this._el('label');
+            titleLabel.textContent = 'Title *';
+            const titleInput = document.createElement('input');
+            titleInput.type = 'text';
+            titleInput.placeholder = 'Brief summary...';
+            titleInput.required = true;
+            titleGroup.append(titleLabel, titleInput);
+
+            // Type
+            const typeGroup = this._el('div');
+            const typeLabel = this._el('label');
+            typeLabel.textContent = 'Type';
+            const typeSelect = document.createElement('select');
+            ['bug', 'feature', 'improvement', 'other'].forEach(t => {
+                const opt = document.createElement('option');
+                opt.value = t;
+                opt.textContent = t === 'bug' ? '🐛 Bug' : t === 'feature' ? '💡 Feature' : t === 'improvement' ? '⚡ Improvement' : '📝 Other';
+                typeSelect.appendChild(opt);
+            });
+            typeGroup.append(typeLabel, typeSelect);
+
+            // Description
+            const descGroup = this._el('div');
+            const descLabel = this._el('label');
+            descLabel.textContent = 'Description';
+            const descInput = document.createElement('textarea');
+            descInput.placeholder = 'More details...';
+            descInput.rows = 3;
+            descGroup.append(descLabel, descInput);
+
+            // Email
+            const emailGroup = this._el('div');
+            const emailLabel = this._el('label');
+            emailLabel.textContent = 'Email (optional)';
+            const emailInput = document.createElement('input');
+            emailInput.type = 'email';
+            emailInput.placeholder = 'your@email.com';
+            if (this.api.user.email) emailInput.value = this.api.user.email;
+            emailGroup.append(emailLabel, emailInput);
+
+            // Buttons
+            const actions = this._el('div');
+            actions.style.cssText = 'display:flex;gap:8px;margin-top:4px';
+
+            const cancelBtn = this._el('button', 'fk-btn');
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.style.cssText = 'flex:1;background:rgba(255,255,255,.06);color:#a0a0b8';
+            cancelBtn.onclick = () => { this.screenshot = null; this._showPanel(); };
+
+            const submitBtn = this._el('button', 'fk-btn fk-btn-primary');
+            submitBtn.textContent = 'Submit';
+            submitBtn.style.flex = '1';
+            submitBtn.onclick = async () => {
+                if (!titleInput.value.trim()) { titleInput.style.borderColor = '#ef4444'; return; }
+                submitBtn.disabled = true;
+                submitBtn.textContent = 'Sending...';
+                try {
+                    await this.api.submitFeedback({
+                        title: titleInput.value.trim(),
+                        description: descInput.value.trim(),
+                        type: typeSelect.value,
+                        screenshot: this.screenshot,
+                        userEmail: emailInput.value.trim(),
+                        metadata: { url: window.location.href, userAgent: navigator.userAgent }
+                    });
+                    this.screenshot = null;
+                    this._showSuccess();
+                } catch (err) {
+                    submitBtn.disabled = false;
+                    submitBtn.textContent = 'Submit';
+                    alert('Failed: ' + err.message);
+                }
+            };
+
+            actions.append(cancelBtn, submitBtn);
+            form.append(titleGroup, typeGroup, descGroup, emailGroup, actions);
+            panel.appendChild(form);
+            document.body.appendChild(panel);
+        }
+
+        _showSuccess() {
+            this._removeEl('.fk-panel');
+            const panel = this._el('div', 'fk-panel');
+            const body = this._el('div', 'fk-success');
+            body.innerHTML = '<div class="fk-success-icon">✅</div><h4>Thank you!</h4><p>Your feedback has been submitted successfully.</p>';
+            panel.appendChild(body);
+            document.body.appendChild(panel);
+            this.state = 'panel';
+            setTimeout(() => { this.activeTab = 'list'; this._loadFeedbacks(); this._showPanel(); }, 2000);
+        }
+
+        // ==================== Feedback List ====================
+        async _loadFeedbacks() {
+            try {
+                const data = await this.api.getUserFeedbacks();
+                this.feedbacks = data.feedbacks || [];
+            } catch (e) {
+                this.feedbacks = [];
+            }
+        }
+
+        _renderList(panel) {
+            const list = this._el('div', 'fk-list');
+
+            if (!this.api.hasUser) {
+                list.innerHTML = '<div class="fk-empty">Login to view your feedbacks</div>';
+                panel.appendChild(list);
+                return;
+            }
+
+            if (!this.feedbacks.length) {
+                list.innerHTML = '<div class="fk-empty">No feedbacks yet</div>';
+                panel.appendChild(list);
+                return;
+            }
+
+            this.feedbacks.forEach(fb => {
+                const item = this._el('div', 'fk-list-item');
+                const title = this._el('div', 'fk-list-item-title');
+                title.textContent = fb.title;
+                const meta = this._el('div', 'fk-list-item-meta');
+                const typeBadge = this._el('span', `fk-badge fk-badge-${fb.type || 'other'}`);
+                typeBadge.textContent = fb.type || 'other';
+                const statusBadge = this._el('span', `fk-badge fk-badge-${(fb.status || 'new').replace(' ', '-')}`);
+                statusBadge.textContent = fb.status || 'new';
+                const date = this._el('span');
+                date.textContent = new Date(fb.createdAt).toLocaleDateString();
+                meta.append(typeBadge, statusBadge, date);
+                item.append(title, meta);
+                item.onclick = () => this._showDetail(fb._id);
+                list.appendChild(item);
+            });
+
+            panel.appendChild(list);
+        }
+
+        // ==================== Feedback Detail ====================
+        async _showDetail(id) {
+            try {
+                const fb = await this.api.getFeedbackDetail(id);
+                if (!fb) return;
+                this.detailFeedback = fb;
+                this._renderDetail();
+            } catch (e) {
+                console.error('[FeedbackKit] Detail error:', e);
+            }
+        }
+
+        _renderDetail() {
+            this._removeEl('.fk-detail-overlay');
+            const fb = this.detailFeedback;
+
+            const overlay = this._el('div', 'fk-detail-overlay');
+            const modal = this._el('div', 'fk-detail-modal');
+
+            // Header
+            const header = this._el('div', 'fk-detail-header');
+            const h4 = this._el('h4');
+            h4.textContent = fb.title;
+            const closeBtn = this._el('button', 'fk-detail-close');
+            closeBtn.textContent = '×';
+            closeBtn.onclick = () => this._removeEl('.fk-detail-overlay');
+            header.append(h4, closeBtn);
+
+            // Body
+            const body = this._el('div', 'fk-detail-body');
+            if (fb.description) {
+                const desc = this._el('p', 'fk-detail-desc');
+                desc.textContent = fb.description;
+                body.appendChild(desc);
+            }
+
+            // Meta badges
+            const metaDiv = this._el('div');
+            metaDiv.style.cssText = 'display:flex;gap:8px;margin-bottom:16px';
+            const typeBadge = this._el('span', `fk-badge fk-badge-${fb.type || 'other'}`);
+            typeBadge.textContent = fb.type || 'other';
+            const statusBadge = this._el('span', `fk-badge fk-badge-${(fb.status || 'new').replace(' ', '-')}`);
+            statusBadge.textContent = fb.status || 'new';
+            metaDiv.append(typeBadge, statusBadge);
+            body.appendChild(metaDiv);
+
+            // Comments
+            if (fb.comments && fb.comments.length) {
+                const cTitle = this._el('label');
+                cTitle.textContent = 'Conversation';
+                cTitle.style.cssText = 'font-size:12px;font-weight:600;color:#a0a0b8;margin-bottom:8px;display:block';
+                body.appendChild(cTitle);
+
+                const comments = this._el('div', 'fk-comments');
+                fb.comments.forEach(c => {
+                    const cDiv = this._el('div', `fk-comment ${c.role}`);
+                    const author = this._el('div', 'fk-comment-author');
+                    author.textContent = c.authorName || c.role;
+                    const text = this._el('div', 'fk-comment-text');
+                    text.textContent = c.text;
+                    const time = this._el('div', 'fk-comment-time');
+                    time.textContent = new Date(c.createdAt).toLocaleString();
+                    cDiv.append(author, text, time);
+                    comments.appendChild(cDiv);
+                });
+                body.appendChild(comments);
+            }
+
+            // Input for new comment
+            const inputDiv = this._el('div', 'fk-detail-input');
+            const input = document.createElement('input');
+            input.placeholder = 'Write a reply...';
+            const sendBtn = this._el('button');
+            sendBtn.textContent = 'Send';
+            sendBtn.onclick = async () => {
+                if (!input.value.trim()) return;
+                sendBtn.disabled = true;
+                try {
+                    await this.api.addComment(fb._id, input.value.trim());
+                    input.value = '';
+                    // Reload detail
+                    this.detailFeedback = await this.api.getFeedbackDetail(fb._id);
+                    this._renderDetail();
+                } catch (e) {
+                    alert('Failed to send comment');
+                } finally {
+                    sendBtn.disabled = false;
+                }
+            };
+            input.onkeydown = (e) => { if (e.key === 'Enter') sendBtn.click(); };
+            inputDiv.append(input, sendBtn);
+
+            modal.append(header, body, inputDiv);
+            overlay.appendChild(modal);
+            overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+            document.body.appendChild(overlay);
+        }
+
+        // ==================== Helpers ====================
+        _el(tag, cls) {
+            const el = document.createElement(tag);
+            if (cls) el.className = cls;
+            return el;
+        }
+
+        _removeEl(selector) {
+            const el = document.querySelector(selector);
+            if (el) el.remove();
+        }
+
+        destroy() {
+            this._removeEl('.fk-fab');
+            this._removeEl('.fk-panel');
+            this._removeEl('.fk-detail-overlay');
+            this._removeEl('.fk-capture-overlay');
+            this._removeEl('.fk-capture-selection');
+            this._removeEl('.fk-capture-hint');
+            this._removeEl('#fk-styles');
+        }
+    }
+
+    // ==================== Public API ====================
+    const FeedbackKit = {
+        _api: null,
+        _widget: null,
+
+        /**
+         * Initialize FeedbackKit
+         * @param {{ apiKey: string }} options
+         */
+        init(options = {}) {
+            if (!options.apiKey) {
+                console.warn('[FeedbackKit] Missing apiKey');
+                return;
+            }
+            this._api = new FeedbackKitAPI(options.apiKey);
+            this._widget = new FeedbackKitWidget(this._api);
+            return this;
+        },
+
+        /**
+         * Set user identity
+         * @param {{ id: string, email?: string, name?: string }} userInfo
+         */
+        setUser(userInfo) {
+            if (this._api) this._api.setUser(userInfo);
+        },
+
+        /** Clear user identity */
+        clearUser() {
+            if (this._api) this._api.clearUser();
+        },
+
+        /** Destroy widget and clean up */
+        destroy() {
+            if (this._widget) this._widget.destroy();
+            this._widget = null;
+            this._api = null;
+        }
+    };
+
+    // Export
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = FeedbackKit;
+    } else {
+        root.FeedbackKit = FeedbackKit;
+    }
+
+})(typeof window !== 'undefined' ? window : this);

package/dist/feedbackkit.min.js

@@ -0,0 +1,557 @@
+(function (root) {
+'use strict';
+const SERVER_URL = 'https:
+const CSS = `
+.fk-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:16px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;cursor:pointer;box-shadow:0 4px 20px rgba(99,102,241,.4);display:flex;align-items:center;justify-content:center;z-index:99999;transition:all .2s}
+.fk-fab:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(99,102,241,.55)}
+.fk-panel{position:fixed;bottom:88px;right:24px;width:360px;max-height:480px;background:#1a1d2e;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:99998;display:flex;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f0f0f5}
+.fk-panel *{box-sizing:border-box;margin:0;padding:0}
+.fk-panel-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06)}
+.fk-tab{flex:1;padding:12px;background:none;border:none;color:#a0a0b8;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
+.fk-tab:hover{color:#f0f0f5;background:rgba(255,255,255,.03)}
+.fk-tab.active{color:#818cf8;border-bottom:2px solid #818cf8}
+.fk-panel-body{padding:20px;display:flex;flex-direction:column;gap:12px}
+.fk-panel-hint{font-size:13px;color:#a0a0b8;text-align:center}
+.fk-btn{padding:10px 16px;border-radius:10px;border:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
+.fk-btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 12px rgba(99,102,241,.3)}
+.fk-btn-primary:hover{box-shadow:0 4px 20px rgba(99,102,241,.5);transform:translateY(-1px)}
+.fk-btn-full{width:100%}
+.fk-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
+.fk-form{padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:420px}
+.fk-form label{font-size:12px;font-weight:600;color:#a0a0b8;display:block;margin-bottom:4px}
+.fk-form input,.fk-form textarea,.fk-form select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#f0f0f5;font-family:inherit;font-size:13px;outline:none;transition:border .2s}
+.fk-form input:focus,.fk-form textarea:focus,.fk-form select:focus{border-color:#6366f1}
+.fk-form textarea{resize:vertical;min-height:60px}
+.fk-form select option{background:#1a1d2e;color:#f0f0f5}
+.fk-screenshot-preview{position:relative;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
+.fk-screenshot-preview img{width:100%;display:block}
+.fk-screenshot-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.fk-success{text-align:center;padding:30px 20px}
+.fk-success-icon{font-size:40px;margin-bottom:12px}
+.fk-success h4{font-size:16px;font-weight:700;margin-bottom:4px}
+.fk-success p{font-size:13px;color:#a0a0b8}
+.fk-list{padding:12px;overflow-y:auto;max-height:380px;display:flex;flex-direction:column;gap:6px}
+.fk-list-item{padding:12px;border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;transition:background .2s}
+.fk-list-item:hover{background:rgba(255,255,255,.06)}
+.fk-list-item-title{font-size:13px;font-weight:600;margin-bottom:4px}
+.fk-list-item-meta{display:flex;gap:8px;align-items:center}
+.fk-list-item-meta span{font-size:11px;color:#a0a0b8}
+.fk-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600}
+.fk-badge-bug{background:rgba(239,68,68,.12);color:#fca5a5}
+.fk-badge-feature{background:rgba(99,102,241,.12);color:#818cf8}
+.fk-badge-improvement{background:rgba(234,179,8,.12);color:#fde047}
+.fk-badge-other{background:rgba(59,130,246,.12);color:#93c5fd}
+.fk-badge-new{background:rgba(234,179,8,.12);color:#fde047}
+.fk-badge-in-progress{background:rgba(59,130,246,.12);color:#93c5fd}
+.fk-badge-resolved{background:rgba(34,197,94,.12);color:#86efac}
+.fk-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:100000;display:flex;align-items:center;justify-content:center}
+.fk-detail-modal{background:#1a1d2e;border-radius:16px;width:90%;max-width:440px;max-height:80vh;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,sans-serif;color:#f0f0f5}
+.fk-detail-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center}
+.fk-detail-header h4{font-size:15px;font-weight:700}
+.fk-detail-close{background:none;border:none;color:#a0a0b8;font-size:20px;cursor:pointer;padding:4px}
+.fk-detail-body{flex:1;overflow-y:auto;padding:16px 20px}
+.fk-detail-desc{font-size:13px;color:#a0a0b8;margin-bottom:16px;line-height:1.5}
+.fk-comments{display:flex;flex-direction:column;gap:10px;margin-top:12px}
+.fk-comment{padding:10px 14px;border-radius:10px;max-width:85%}
+.fk-comment.user{background:rgba(99,102,241,.12);align-self:flex-end}
+.fk-comment.admin{background:rgba(255,255,255,.06);align-self:flex-start}
+.fk-comment-author{font-size:10px;font-weight:600;color:#a0a0b8;margin-bottom:4px}
+.fk-comment-text{font-size:13px;line-height:1.4}
+.fk-comment-time{font-size:10px;color:#555568;margin-top:4px}
+.fk-detail-input{display:flex;gap:8px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06)}
+.fk-detail-input input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#f0f0f5;font-family:inherit;font-size:13px;outline:none}
+.fk-detail-input button{padding:8px 16px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-weight:600;font-size:13px;cursor:pointer}
+.fk-empty{text-align:center;padding:30px 12px;color:#555568;font-size:13px}
+.fk-capture-overlay{position:fixed;inset:0;z-index:100001;cursor:crosshair;background:rgba(0,0,0,.3)}
+.fk-capture-selection{position:fixed;border:2px solid #6366f1;background:rgba(99,102,241,.08);z-index:100002}
+.fk-capture-hint{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1a1d2e;color:#f0f0f5;padding:10px 20px;border-radius:10px;font-size:13px;font-family:'Inter',sans-serif;z-index:100003;box-shadow:0 4px 16px rgba(0,0,0,.4)}
+`;
+class FeedbackKitAPI {
+constructor(apiKey) {
+this.apiKey = apiKey;
+this.serverUrl = SERVER_URL;
+this.user = { id: null, email: null, name: null };
+}
+setUser(info) {
+if (!info?.id) return;
+this.user.id = info.id;
+this.user.email = info.email || null;
+this.user.name = info.name || null;
+}
+clearUser() {
+this.user = { id: null, email: null, name: null };
+}
+get hasUser() { return !!this.user.id; }
+async submitFeedback({ title, description, type, screenshot, metadata, userEmail }) {
+const fd = new FormData();
+fd.append('title', title);
+if (description) fd.append('description', description);
+if (type) fd.append('type', type);
+if (metadata) fd.append('metadata', JSON.stringify(metadata));
+if (this.user.id) fd.append('userId', this.user.id);
+if (this.user.name) fd.append('userName', this.user.name);
+fd.append('userEmail', userEmail || this.user.email || '');
+if (screenshot) {
+let blob = screenshot;
+if (typeof screenshot === 'string' && screenshot.startsWith('data:')) {
+blob = await (await fetch(screenshot)).blob();
+}
+fd.append('screenshot', blob, 'screenshot.png');
+}
+const res = await fetch(`${this.serverUrl}/api/feedbacks`, {
+method: 'POST',
+headers: { 'x-api-key': this.apiKey },
+body: fd
+});
+if (!res.ok) { const e = await res.json().catch(() => ({})); throw new Error(e.error || `HTTP ${res.status}`); }
+return res.json();
+}
+async getUserFeedbacks(page = 1) {
+if (!this.user.id) return { feedbacks: [], pagination: {} };
+const p = new URLSearchParams({ userId: this.user.id, page, limit: 20 });
+const res = await fetch(`${this.serverUrl}/api/feedbacks/user?${p}`, { headers: { 'x-api-key': this.apiKey } });
+if (!res.ok) throw new Error(`HTTP ${res.status}`);
+return res.json();
+}
+async getFeedbackDetail(id) {
+if (!this.user.id) return null;
+const p = new URLSearchParams({ userId: this.user.id });
+const res = await fetch(`${this.serverUrl}/api/feedbacks/user/${id}?${p}`, { headers: { 'x-api-key': this.apiKey } });
+if (!res.ok) throw new Error(`HTTP ${res.status}`);
+return (await res.json()).feedback;
+}
+async addComment(id, text) {
+if (!this.user.id) throw new Error('User not set');
+const res = await fetch(`${this.serverUrl}/api/feedbacks/user/${id}/comments`, {
+method: 'POST',
+headers: { 'x-api-key': this.apiKey, 'Content-Type': 'application/json' },
+body: JSON.stringify({ userId: this.user.id, userName: this.user.name || 'User', text })
+});
+if (!res.ok) throw new Error(`HTTP ${res.status}`);
+return res.json();
+}
+}
+class FeedbackKitWidget {
+constructor(api) {
+this.api = api;
+this.state = 'idle'; 
+this.screenshot = null;
+this.activeTab = 'new';
+this.feedbacks = [];
+this.detailFeedback = null;
+this.captureData = {};
+this._injectCSS();
+this._createFAB();
+}
+_injectCSS() {
+if (document.getElementById('fk-styles')) return;
+const s = document.createElement('style');
+s.id = 'fk-styles';
+s.textContent = CSS;
+document.head.appendChild(s);
+}
+_createFAB() {
+this.fab = document.createElement('button');
+this.fab.className = 'fk-fab';
+this.fab.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="12" y1="6" x2="12" y2="12"/></svg>';
+this.fab.onclick = () => this._togglePanel();
+document.body.appendChild(this.fab);
+}
+_togglePanel() {
+if (this.state === 'panel') {
+this._closePanel();
+} else {
+this._showPanel();
+}
+}
+_showPanel() {
+this.state = 'panel';
+this._updateFABIcon('close');
+this._removeEl('.fk-panel');
+const panel = this._el('div', 'fk-panel');
+const tabs = this._el('div', 'fk-panel-tabs');
+const tabNew = this._el('button', `fk-tab ${this.activeTab === 'new' ? 'active' : ''}`);
+tabNew.textContent = '✏️ New Feedback';
+tabNew.onclick = () => { this.activeTab = 'new'; this._showPanel(); };
+const tabList = this._el('button', `fk-tab ${this.activeTab === 'list' ? 'active' : ''}`);
+tabList.textContent = '📋 My Feedbacks';
+tabList.onclick = () => { this.activeTab = 'list'; this._loadFeedbacks(); this._showPanel(); };
+tabs.append(tabNew, tabList);
+panel.appendChild(tabs);
+if (this.activeTab === 'new') {
+const body = this._el('div', 'fk-panel-body');
+const hint = this._el('p', 'fk-panel-hint');
+hint.textContent = 'Capture a screenshot and send your feedback';
+const btn = this._el('button', 'fk-btn fk-btn-primary fk-btn-full');
+btn.textContent = '📸 Select Area & Capture';
+btn.onclick = () => this._startCapture();
+body.append(hint, btn);
+panel.appendChild(body);
+} else {
+this._renderList(panel);
+}
+document.body.appendChild(panel);
+}
+_closePanel() {
+this.state = 'idle';
+this._updateFABIcon('open');
+this._removeEl('.fk-panel');
+}
+_updateFABIcon(type) {
+if (type === 'close') {
+this.fab.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+} else {
+this.fab.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="12" y1="6" x2="12" y2="12"/></svg>';
+}
+}
+_startCapture() {
+this._closePanel();
+this.state = 'capturing';
+this.fab.style.display = 'none';
+const hint = this._el('div', 'fk-capture-hint');
+hint.textContent = 'Click and drag to select area • Esc to cancel';
+document.body.appendChild(hint);
+const overlay = this._el('div', 'fk-capture-overlay');
+let startX, startY, selection;
+overlay.onmousedown = (e) => {
+startX = e.clientX;
+startY = e.clientY;
+selection = this._el('div', 'fk-capture-selection');
+selection.style.left = startX + 'px';
+selection.style.top = startY + 'px';
+document.body.appendChild(selection);
+};
+overlay.onmousemove = (e) => {
+if (!selection) return;
+const x = Math.min(e.clientX, startX);
+const y = Math.min(e.clientY, startY);
+const w = Math.abs(e.clientX - startX);
+const h = Math.abs(e.clientY - startY);
+Object.assign(selection.style, { left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px' });
+};
+overlay.onmouseup = (e) => {
+const rect = {
+x: Math.min(e.clientX, startX),
+y: Math.min(e.clientY, startY),
+w: Math.abs(e.clientX - startX),
+h: Math.abs(e.clientY - startY)
+};
+this._removeEl('.fk-capture-overlay');
+this._removeEl('.fk-capture-selection');
+this._removeEl('.fk-capture-hint');
+this.fab.style.display = '';
+if (rect.w < 10 || rect.h < 10) {
+this._showPanel();
+return;
+}
+this._captureArea(rect);
+};
+const onEsc = (e) => {
+if (e.key === 'Escape') {
+this._removeEl('.fk-capture-overlay');
+this._removeEl('.fk-capture-selection');
+this._removeEl('.fk-capture-hint');
+this.fab.style.display = '';
+this._showPanel();
+document.removeEventListener('keydown', onEsc);
+}
+};
+document.addEventListener('keydown', onEsc);
+document.body.appendChild(overlay);
+}
+async _captureArea(rect) {
+try {
+if (typeof html2canvas !== 'undefined') {
+const canvas = await html2canvas(document.body, {
+x: rect.x + window.scrollX,
+y: rect.y + window.scrollY,
+width: rect.w,
+height: rect.h,
+windowWidth: document.documentElement.scrollWidth,
+windowHeight: document.documentElement.scrollHeight
+});
+this.screenshot = canvas.toDataURL('image/png');
+} else {
+const canvas = document.createElement('canvas');
+const dpr = window.devicePixelRatio || 1;
+canvas.width = rect.w * dpr;
+canvas.height = rect.h * dpr;
+const ctx = canvas.getContext('2d');
+ctx.scale(dpr, dpr);
+ctx.fillStyle = '#f0f0f5';
+ctx.fillRect(0, 0, rect.w, rect.h);
+ctx.font = '14px Inter, sans-serif';
+ctx.fillStyle = '#555';
+ctx.fillText(`Screenshot area: ${rect.w}×${rect.h}`, 10, 24);
+ctx.fillText('Add html2canvas for real capture', 10, 44);
+this.screenshot = canvas.toDataURL('image/png');
+}
+this._showForm();
+} catch (err) {
+console.error('[FeedbackKit] Capture error:', err);
+this._showPanel();
+}
+}
+_showForm() {
+this.state = 'form';
+this._removeEl('.fk-panel');
+this._updateFABIcon('close');
+const panel = this._el('div', 'fk-panel');
+const form = this._el('div', 'fk-form');
+if (this.screenshot) {
+const preview = this._el('div', 'fk-screenshot-preview');
+const img = document.createElement('img');
+img.src = this.screenshot;
+const removeBtn = this._el('button', 'fk-screenshot-remove');
+removeBtn.textContent = '×';
+removeBtn.onclick = () => { this.screenshot = null; preview.remove(); };
+preview.append(img, removeBtn);
+form.appendChild(preview);
+}
+const titleGroup = this._el('div');
+const titleLabel = this._el('label');
+titleLabel.textContent = 'Title *';
+const titleInput = document.createElement('input');
+titleInput.type = 'text';
+titleInput.placeholder = 'Brief summary...';
+titleInput.required = true;
+titleGroup.append(titleLabel, titleInput);
+const typeGroup = this._el('div');
+const typeLabel = this._el('label');
+typeLabel.textContent = 'Type';
+const typeSelect = document.createElement('select');
+['bug', 'feature', 'improvement', 'other'].forEach(t => {
+const opt = document.createElement('option');
+opt.value = t;
+opt.textContent = t === 'bug' ? '🐛 Bug' : t === 'feature' ? '💡 Feature' : t === 'improvement' ? '⚡ Improvement' : '📝 Other';
+typeSelect.appendChild(opt);
+});
+typeGroup.append(typeLabel, typeSelect);
+const descGroup = this._el('div');
+const descLabel = this._el('label');
+descLabel.textContent = 'Description';
+const descInput = document.createElement('textarea');
+descInput.placeholder = 'More details...';
+descInput.rows = 3;
+descGroup.append(descLabel, descInput);
+const emailGroup = this._el('div');
+const emailLabel = this._el('label');
+emailLabel.textContent = 'Email (optional)';
+const emailInput = document.createElement('input');
+emailInput.type = 'email';
+emailInput.placeholder = 'your@email.com';
+if (this.api.user.email) emailInput.value = this.api.user.email;
+emailGroup.append(emailLabel, emailInput);
+const actions = this._el('div');
+actions.style.cssText = 'display:flex;gap:8px;margin-top:4px';
+const cancelBtn = this._el('button', 'fk-btn');
+cancelBtn.textContent = 'Cancel';
+cancelBtn.style.cssText = 'flex:1;background:rgba(255,255,255,.06);color:#a0a0b8';
+cancelBtn.onclick = () => { this.screenshot = null; this._showPanel(); };
+const submitBtn = this._el('button', 'fk-btn fk-btn-primary');
+submitBtn.textContent = 'Submit';
+submitBtn.style.flex = '1';
+submitBtn.onclick = async () => {
+if (!titleInput.value.trim()) { titleInput.style.borderColor = '#ef4444'; return; }
+submitBtn.disabled = true;
+submitBtn.textContent = 'Sending...';
+try {
+await this.api.submitFeedback({
+title: titleInput.value.trim(),
+description: descInput.value.trim(),
+type: typeSelect.value,
+screenshot: this.screenshot,
+userEmail: emailInput.value.trim(),
+metadata: { url: window.location.href, userAgent: navigator.userAgent }
+});
+this.screenshot = null;
+this._showSuccess();
+} catch (err) {
+submitBtn.disabled = false;
+submitBtn.textContent = 'Submit';
+alert('Failed: ' + err.message);
+}
+};
+actions.append(cancelBtn, submitBtn);
+form.append(titleGroup, typeGroup, descGroup, emailGroup, actions);
+panel.appendChild(form);
+document.body.appendChild(panel);
+}
+_showSuccess() {
+this._removeEl('.fk-panel');
+const panel = this._el('div', 'fk-panel');
+const body = this._el('div', 'fk-success');
+body.innerHTML = '<div class="fk-success-icon">✅</div><h4>Thank you!</h4><p>Your feedback has been submitted successfully.</p>';
+panel.appendChild(body);
+document.body.appendChild(panel);
+this.state = 'panel';
+setTimeout(() => { this.activeTab = 'list'; this._loadFeedbacks(); this._showPanel(); }, 2000);
+}
+async _loadFeedbacks() {
+try {
+const data = await this.api.getUserFeedbacks();
+this.feedbacks = data.feedbacks || [];
+} catch (e) {
+this.feedbacks = [];
+}
+}
+_renderList(panel) {
+const list = this._el('div', 'fk-list');
+if (!this.api.hasUser) {
+list.innerHTML = '<div class="fk-empty">Login to view your feedbacks</div>';
+panel.appendChild(list);
+return;
+}
+if (!this.feedbacks.length) {
+list.innerHTML = '<div class="fk-empty">No feedbacks yet</div>';
+panel.appendChild(list);
+return;
+}
+this.feedbacks.forEach(fb => {
+const item = this._el('div', 'fk-list-item');
+const title = this._el('div', 'fk-list-item-title');
+title.textContent = fb.title;
+const meta = this._el('div', 'fk-list-item-meta');
+const typeBadge = this._el('span', `fk-badge fk-badge-${fb.type || 'other'}`);
+typeBadge.textContent = fb.type || 'other';
+const statusBadge = this._el('span', `fk-badge fk-badge-${(fb.status || 'new').replace(' ', '-')}`);
+statusBadge.textContent = fb.status || 'new';
+const date = this._el('span');
+date.textContent = new Date(fb.createdAt).toLocaleDateString();
+meta.append(typeBadge, statusBadge, date);
+item.append(title, meta);
+item.onclick = () => this._showDetail(fb._id);
+list.appendChild(item);
+});
+panel.appendChild(list);
+}
+async _showDetail(id) {
+try {
+const fb = await this.api.getFeedbackDetail(id);
+if (!fb) return;
+this.detailFeedback = fb;
+this._renderDetail();
+} catch (e) {
+console.error('[FeedbackKit] Detail error:', e);
+}
+}
+_renderDetail() {
+this._removeEl('.fk-detail-overlay');
+const fb = this.detailFeedback;
+const overlay = this._el('div', 'fk-detail-overlay');
+const modal = this._el('div', 'fk-detail-modal');
+const header = this._el('div', 'fk-detail-header');
+const h4 = this._el('h4');
+h4.textContent = fb.title;
+const closeBtn = this._el('button', 'fk-detail-close');
+closeBtn.textContent = '×';
+closeBtn.onclick = () => this._removeEl('.fk-detail-overlay');
+header.append(h4, closeBtn);
+const body = this._el('div', 'fk-detail-body');
+if (fb.description) {
+const desc = this._el('p', 'fk-detail-desc');
+desc.textContent = fb.description;
+body.appendChild(desc);
+}
+const metaDiv = this._el('div');
+metaDiv.style.cssText = 'display:flex;gap:8px;margin-bottom:16px';
+const typeBadge = this._el('span', `fk-badge fk-badge-${fb.type || 'other'}`);
+typeBadge.textContent = fb.type || 'other';
+const statusBadge = this._el('span', `fk-badge fk-badge-${(fb.status || 'new').replace(' ', '-')}`);
+statusBadge.textContent = fb.status || 'new';
+metaDiv.append(typeBadge, statusBadge);
+body.appendChild(metaDiv);
+if (fb.comments && fb.comments.length) {
+const cTitle = this._el('label');
+cTitle.textContent = 'Conversation';
+cTitle.style.cssText = 'font-size:12px;font-weight:600;color:#a0a0b8;margin-bottom:8px;display:block';
+body.appendChild(cTitle);
+const comments = this._el('div', 'fk-comments');
+fb.comments.forEach(c => {
+const cDiv = this._el('div', `fk-comment ${c.role}`);
+const author = this._el('div', 'fk-comment-author');
+author.textContent = c.authorName || c.role;
+const text = this._el('div', 'fk-comment-text');
+text.textContent = c.text;
+const time = this._el('div', 'fk-comment-time');
+time.textContent = new Date(c.createdAt).toLocaleString();
+cDiv.append(author, text, time);
+comments.appendChild(cDiv);
+});
+body.appendChild(comments);
+}
+const inputDiv = this._el('div', 'fk-detail-input');
+const input = document.createElement('input');
+input.placeholder = 'Write a reply...';
+const sendBtn = this._el('button');
+sendBtn.textContent = 'Send';
+sendBtn.onclick = async () => {
+if (!input.value.trim()) return;
+sendBtn.disabled = true;
+try {
+await this.api.addComment(fb._id, input.value.trim());
+input.value = '';
+this.detailFeedback = await this.api.getFeedbackDetail(fb._id);
+this._renderDetail();
+} catch (e) {
+alert('Failed to send comment');
+} finally {
+sendBtn.disabled = false;
+}
+};
+input.onkeydown = (e) => { if (e.key === 'Enter') sendBtn.click(); };
+inputDiv.append(input, sendBtn);
+modal.append(header, body, inputDiv);
+overlay.appendChild(modal);
+overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+document.body.appendChild(overlay);
+}
+_el(tag, cls) {
+const el = document.createElement(tag);
+if (cls) el.className = cls;
+return el;
+}
+_removeEl(selector) {
+const el = document.querySelector(selector);
+if (el) el.remove();
+}
+destroy() {
+this._removeEl('.fk-fab');
+this._removeEl('.fk-panel');
+this._removeEl('.fk-detail-overlay');
+this._removeEl('.fk-capture-overlay');
+this._removeEl('.fk-capture-selection');
+this._removeEl('.fk-capture-hint');
+this._removeEl('#fk-styles');
+}
+}
+const FeedbackKit = {
+_api: null,
+_widget: null,
+init(options = {}) {
+if (!options.apiKey) {
+console.warn('[FeedbackKit] Missing apiKey');
+return;
+}
+this._api = new FeedbackKitAPI(options.apiKey);
+this._widget = new FeedbackKitWidget(this._api);
+return this;
+},
+setUser(userInfo) {
+if (this._api) this._api.setUser(userInfo);
+},
+clearUser() {
+if (this._api) this._api.clearUser();
+},
+destroy() {
+if (this._widget) this._widget.destroy();
+this._widget = null;
+this._api = null;
+}
+};
+if (typeof module !== 'undefined' && module.exports) {
+module.exports = FeedbackKit;
+} else {
+root.FeedbackKit = FeedbackKit;
+}
+})(typeof window !== 'undefined' ? window : this);

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@newsoftglobal/feedbackkit-js",
+    "version": "1.0.0",
+    "description": "FeedbackKit Vanilla JS SDK — Collect user feedback with screenshots, comments, and tracking",
+    "author": "NewSoft Global",
+    "license": "MIT",
+    "main": "dist/feedbackkit.min.js",
+    "files": [
+        "dist/",
+        "README.md"
+    ],
+    "keywords": [
+        "feedback",
+        "widget",
+        "screenshot",
+        "bug-report",
+        "user-feedback",
+        "javascript",
+        "vanilla-js"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://bitbucket.org/newsoftglobal/feedbackkit"
+    },
+    "scripts": {
+        "build": "node build.js",
+        "prepublishOnly": "npm run build"
+    },
+    "devDependencies": {}
+}