@bliptarjs/sdk 0.1.0

package/README.md

@@ -0,0 +1,131 @@
+# @bliptarjs/sdk
+
+Lightweight SDK for collecting in-app user feedback. Designed to be small (~5KB gzipped) and non-intrusive.
+
+## Installation
+
+```bash
+npm install @bliptarjs/sdk
+```
+
+## Quick Start
+
+```javascript
+import { createBliptar } from '@bliptarjs/sdk';
+
+const blip = createBliptar({
+  apiKey: 'your-api-key',
+});
+
+blip.init();
+```
+
+## Usage
+
+### Initialize
+
+```javascript
+import { createBliptar } from '@bliptarjs/sdk';
+
+const blip = createBliptar({
+  apiKey: 'your-api-key',
+  apiUrl: 'https://api.bliptar.com', // optional, defaults to production
+  debug: false, // optional, enables console logging
+});
+
+blip.init();
+```
+
+### Identify Users
+
+Associate feedback with specific users:
+
+```javascript
+blip.identify('user-123', {
+  plan: 'pro',
+  company: 'Acme Inc',
+});
+```
+
+### Track Events
+
+Track events that may trigger feedback forms:
+
+```javascript
+blip.track('checkout_complete', {
+  orderId: 'order-456',
+  total: 99.99,
+});
+```
+
+### Show Forms Manually
+
+Display a specific form programmatically:
+
+```javascript
+await blip.showForm('form-id');
+```
+
+### Lifecycle Callbacks
+
+```javascript
+const blip = createBliptar({
+  apiKey: 'your-api-key',
+  onShow: (form) => {
+    console.log('Form displayed:', form.formId);
+  },
+  onSubmit: (answers) => {
+    console.log('Response submitted:', answers);
+  },
+  onDismiss: () => {
+    console.log('Form dismissed');
+  },
+  onError: (error) => {
+    console.error('Error:', error);
+  },
+});
+```
+
+### Cleanup
+
+Remove event listeners and clean up when done:
+
+```javascript
+blip.destroy();
+```
+
+## Configuration
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `apiKey` | `string` | required | Your Bliptar API key |
+| `apiUrl` | `string` | `https://api.bliptar.com` | API endpoint |
+| `debug` | `boolean` | `false` | Enable debug logging |
+| `userId` | `string` | - | Pre-set user ID |
+| `userAttributes` | `object` | - | Pre-set user attributes |
+
+## Form Types
+
+The SDK supports multiple feedback form types:
+
+- **Binary** - Thumbs up/down, Yes/No
+- **Star Rating** - 1-5 star ratings
+- **Emoji Scale** - 3 or 5 point emoji scales
+- **NPS** - Net Promoter Score (0-10)
+- **Single Choice** - Multiple choice questions
+- **Text Input** - Free-form text responses
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Bundle Size
+
+~7KB gzipped
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,391 @@
+"use strict";var _=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var A=(i,r)=>{for(var t in r)_(i,t,{get:r[t],enumerable:!0})},j=(i,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of L(r))!P.call(i,a)&&a!==t&&_(i,a,{get:()=>r[a],enumerable:!(e=I(r,a))||e.enumerable});return i};var B=i=>j(_({},"__esModule",{value:!0}),i);var Y={};A(Y,{Bliptar:()=>b,createBliptar:()=>y});module.exports=B(Y);var u={mode:"light",backgroundColor:"#ffffff",surfaceColor:"#f5f5f5",textPrimary:"#1a1a1a",textSecondary:"#666666",primaryColor:"#3b82f6",primaryHover:"#2563eb",borderColor:"#e0e0e0",shadowColor:"rgba(0, 0, 0, 0.15)",starColor:"#fbbf24"},h={mode:"dark",backgroundColor:"#1a1a1a",surfaceColor:"#2a2a2a",textPrimary:"#ffffff",textSecondary:"#a0a0a0",primaryColor:"#3b82f6",primaryHover:"#60a5fa",borderColor:"#333333",shadowColor:"rgba(0, 0, 0, 0.4)",starColor:"#fbbf24"};function D(i,r){try{let e=window.getComputedStyle(i).getPropertyValue(r);return e&&e!=="rgba(0, 0, 0, 0)"?e:null}catch{return null}}function H(i){try{return getComputedStyle(document.documentElement).getPropertyValue(i).trim()||null}catch{return null}}function k(i){let r=i.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);if(r)return{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)};let t=i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);return t?{r:parseInt(t[1],10),g:parseInt(t[2],10),b:parseInt(t[3],10)}:null}function z(i,r,t){let[e,a,s]=[i,r,t].map(o=>(o=o/255,o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4)));return .2126*e+.7152*a+.0722*s}function v(i){let r=k(i);return r?z(r.r,r.g,r.b)<.5:!1}function f(i,r){let t=k(i);if(!t)return i;let e=a=>Math.min(255,Math.max(0,Math.round(a+r/100*255)));return`rgb(${e(t.r)}, ${e(t.g)}, ${e(t.b)})`}function M(i){return v(i)?"#ffffff":"#1a1a1a"}function R(i,r){let t={},e=null;i&&(e=document.querySelector(i)),e||(e=document.body);let a=D(e,"background-color");if(a){let s=v(a);t.mode=s?"dark":"light",t.backgroundColor=a,t.surfaceColor=f(a,s?10:-5),t.textPrimary=M(a),t.textSecondary=f(t.textPrimary,s?-30:30),t.borderColor=f(a,s?20:-15),t.shadowColor=s?"rgba(0, 0, 0, 0.4)":"rgba(0, 0, 0, 0.15)"}if(r){let s={"--primary":"primaryColor","--primary-color":"primaryColor","--accent":"primaryColor","--accent-color":"primaryColor","--brand":"primaryColor","--brand-color":"primaryColor","--color-primary":"primaryColor","--background":"backgroundColor","--bg":"backgroundColor","--bg-color":"backgroundColor","--text":"textPrimary","--text-color":"textPrimary","--foreground":"textPrimary","--border":"borderColor","--border-color":"borderColor"};for(let[o,p]of Object.entries(s)){let c=H(o);c&&(t[p]=c)}}return t.primaryColor&&(t.primaryHover=f(t.primaryColor,t.mode==="dark"?15:-10)),Object.keys(t).length>0?t:null}function C(i){let{theme:r,customTheme:t,adaptiveOptions:e}=i;if(r==="custom"&&t)return{mode:v(t.backgroundColor)?"dark":"light",backgroundColor:t.backgroundColor,surfaceColor:t.surfaceColor,textPrimary:t.textPrimary,textSecondary:t.textSecondary,primaryColor:t.primaryColor,primaryHover:t.primaryHover,borderColor:t.borderColor,shadowColor:t.shadowColor,starColor:"#fbbf24"};if(r==="adaptive"){let a=e||{fallback:"light",autoContrast:!0},s=R(a.sourceElement,a.inheritCssVars);return s?{...s.mode==="dark"?h:u,...s}:a.fallback==="dark"?h:u}return r==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches?h:u:r==="dark"?h:u}function w(i){return`
+    --bliptar-bg: ${i.backgroundColor};
+    --bliptar-surface: ${i.surfaceColor};
+    --bliptar-text: ${i.textPrimary};
+    --bliptar-text-secondary: ${i.textSecondary};
+    --bliptar-primary: ${i.primaryColor};
+    --bliptar-primary-hover: ${i.primaryHover};
+    --bliptar-border: ${i.borderColor};
+    --bliptar-shadow: ${i.shadowColor};
+    --bliptar-star: ${i.starColor};
+  `}var g=class{constructor(r,t){this.container=null;this.currentIndex=0;this.answers={};this.form=r,this.options=t,this.theme=C(r.appearance)}render(){this.createContainer(),this.injectStyles(),this.renderQuestion()}destroy(){if(this.container){let r=this.container.querySelector(".bliptar__card");r?(r.classList.add("bliptar__card--exit"),setTimeout(()=>{this.container?.remove(),this.container=null},200)):(this.container.remove(),this.container=null)}}createContainer(){this.container=document.createElement("div"),this.container.id="bliptar-form",this.container.className=`bliptar bliptar--${this.form.appearance.position}`,document.body.appendChild(this.container)}injectStyles(){let r=document.getElementById("bliptar-styles");r&&r.remove();let t=document.createElement("style");t.id="bliptar-styles",t.textContent=this.getStyles(),document.head.appendChild(t)}getStyles(){let{appearance:r}=this.form,t=this.theme,e=r.animation||"slide-up";return`
+      :root { ${w(t)} }
+
+      .bliptar {
+        position: fixed;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .bliptar--bottom-right { bottom: 20px; right: 20px; }
+      .bliptar--bottom-left { bottom: 20px; left: 20px; }
+      .bliptar--bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); }
+      .bliptar--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
+
+      .bliptar__backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        animation: bliptar-fade-in 0.2s ease-out;
+        ${r.backdropBlur?"backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);":""}
+      }
+
+      .bliptar__card {
+        background: ${t.backgroundColor};
+        color: ${t.textPrimary};
+        border-radius: ${r.borderRadius}px;
+        box-shadow: 0 8px 32px ${t.shadowColor}, 0 2px 8px ${t.shadowColor};
+        max-width: ${r.maxWidth}px;
+        width: calc(100vw - 40px);
+        padding: 24px;
+        position: relative;
+        ${this.getAnimationStyles(e)}
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+      }
+
+      .bliptar__card:hover {
+        box-shadow: 0 12px 40px ${t.shadowColor}, 0 4px 12px ${t.shadowColor};
+      }
+
+      .bliptar__card--exit {
+        animation: bliptar-${e}-out 0.2s ease-in forwards;
+      }
+
+      @keyframes bliptar-fade-in { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes bliptar-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+      @keyframes bliptar-slide-up-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(24px); } }
+      @keyframes bliptar-fade { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes bliptar-fade-out { from { opacity: 1; } to { opacity: 0; } }
+      @keyframes bliptar-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+      @keyframes bliptar-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
+      @keyframes bliptar-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
+      @keyframes bliptar-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+      @keyframes bliptar-spin { to { transform: rotate(360deg); } }
+
+      .bliptar__close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 8px;
+        color: ${t.textSecondary};
+        font-size: 20px;
+        line-height: 1;
+        border-radius: 8px;
+        transition: all 0.15s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+      }
+
+      .bliptar__close:hover {
+        background: ${t.surfaceColor};
+        color: ${t.textPrimary};
+      }
+
+      .bliptar__progress {
+        display: flex;
+        gap: 6px;
+        margin-bottom: 20px;
+      }
+
+      .bliptar__progress-bar {
+        height: 4px;
+        flex: 1;
+        border-radius: 2px;
+        background: ${t.borderColor};
+        overflow: hidden;
+        position: relative;
+      }
+
+      .bliptar__progress-bar--active {
+        background: ${t.primaryColor};
+      }
+
+      .bliptar__progress-bar--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+        animation: bliptar-shimmer 1.5s infinite;
+      }
+
+      .bliptar__question {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 24px;
+        line-height: 1.4;
+        animation: bliptar-fade 0.3s ease-out;
+      }
+
+      .bliptar__options {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__btn {
+        padding: 12px 20px;
+        border: 2px solid ${t.borderColor};
+        border-radius: 10px;
+        background: transparent;
+        color: ${t.textPrimary};
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+        flex: 1;
+        min-width: 100px;
+      }
+
+      .bliptar__btn:hover {
+        border-color: ${t.primaryColor};
+        background: ${t.surfaceColor};
+        transform: translateY(-1px);
+      }
+
+      .bliptar__btn:active { transform: translateY(0); }
+
+      .bliptar__btn--selected {
+        background: ${t.primaryColor};
+        border-color: ${t.primaryColor};
+        color: white;
+        animation: bliptar-bounce 0.3s ease;
+      }
+
+      .bliptar__stars {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__star {
+        font-size: 36px;
+        cursor: pointer;
+        color: ${t.borderColor};
+        transition: all 0.2s ease;
+        transform-origin: center;
+      }
+
+      .bliptar__star:hover {
+        transform: scale(1.15);
+        color: ${t.starColor};
+      }
+
+      .bliptar__star--active {
+        color: ${t.starColor};
+        animation: bliptar-bounce 0.3s ease;
+      }
+
+      .bliptar__emojis {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__emoji {
+        font-size: 40px;
+        cursor: pointer;
+        padding: 10px;
+        border-radius: 16px;
+        transition: all 0.2s ease;
+        border: 2px solid transparent;
+      }
+
+      .bliptar__emoji:hover {
+        background: ${t.surfaceColor};
+        transform: scale(1.1);
+      }
+
+      .bliptar__emoji--active {
+        background: ${t.surfaceColor};
+        border-color: ${t.primaryColor};
+        transform: scale(1.15);
+        animation: bliptar-bounce 0.3s ease;
+      }
+
+      .bliptar__nps {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+        justify-content: center;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__nps-btn {
+        width: 36px;
+        height: 36px;
+        border: 2px solid ${t.borderColor};
+        border-radius: 8px;
+        background: transparent;
+        color: ${t.textPrimary};
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+        transition: all 0.15s ease;
+      }
+
+      .bliptar__nps-btn:hover {
+        border-color: ${t.primaryColor};
+        background: ${t.surfaceColor};
+        transform: translateY(-2px);
+      }
+
+      .bliptar__nps-btn--selected {
+        background: ${t.primaryColor};
+        border-color: ${t.primaryColor};
+        color: white;
+        transform: translateY(-2px);
+      }
+
+      .bliptar__nps-labels {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        font-size: 12px;
+        color: ${t.textSecondary};
+      }
+
+      .bliptar__textarea {
+        width: 100%;
+        padding: 14px;
+        border: 2px solid ${t.borderColor};
+        border-radius: 10px;
+        background: transparent;
+        color: ${t.textPrimary};
+        font-size: 14px;
+        font-family: inherit;
+        resize: vertical;
+        min-height: 100px;
+        transition: all 0.2s ease;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+        box-sizing: border-box;
+      }
+
+      .bliptar__textarea::placeholder { color: ${t.textSecondary}; }
+
+      .bliptar__textarea:focus {
+        outline: none;
+        border-color: ${t.primaryColor};
+        box-shadow: 0 0 0 3px ${t.primaryColor}20;
+      }
+
+      .bliptar__nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 24px;
+        gap: 12px;
+      }
+
+      .bliptar__nav-btn {
+        padding: 12px 24px;
+        border: none;
+        border-radius: 10px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+      }
+
+      .bliptar__nav-btn--back {
+        background: transparent;
+        color: ${t.textSecondary};
+        padding: 12px 16px;
+      }
+
+      .bliptar__nav-btn--back:hover {
+        color: ${t.textPrimary};
+        background: ${t.surfaceColor};
+      }
+
+      .bliptar__nav-btn--next {
+        background: ${t.primaryColor};
+        color: white;
+        flex: 1;
+        max-width: 200px;
+      }
+
+      .bliptar__nav-btn--next:hover {
+        background: ${t.primaryHover};
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px ${t.primaryColor}40;
+      }
+
+      .bliptar__nav-btn--next:active { transform: translateY(0); }
+
+      .bliptar__thankyou {
+        text-align: center;
+        padding: 24px 0;
+        animation: bliptar-scale 0.4s ease-out;
+      }
+
+      .bliptar__thankyou-emoji {
+        font-size: 56px;
+        margin-bottom: 16px;
+        animation: bliptar-bounce 0.5s ease 0.2s;
+      }
+
+      .bliptar__thankyou-text {
+        font-size: 18px;
+        font-weight: 500;
+        color: ${t.textPrimary};
+      }
+
+      .bliptar__loading {
+        display: flex;
+        justify-content: center;
+        padding: 20px;
+      }
+
+      .bliptar__spinner {
+        width: 24px;
+        height: 24px;
+        border: 3px solid ${t.borderColor};
+        border-top-color: ${t.primaryColor};
+        border-radius: 50%;
+        animation: bliptar-spin 0.8s linear infinite;
+      }
+
+      @media (max-width: 480px) {
+        .bliptar--bottom-right, .bliptar--bottom-left { left: 10px; right: 10px; bottom: 10px; }
+        .bliptar__card { width: 100%; padding: 20px; }
+        .bliptar__question { font-size: 16px; }
+        .bliptar__star { font-size: 28px; }
+        .bliptar__emoji { font-size: 32px; padding: 8px; }
+        .bliptar__nps-btn { width: 28px; height: 28px; font-size: 11px; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .bliptar__card, .bliptar__btn, .bliptar__star, .bliptar__emoji, .bliptar__nps-btn, .bliptar__nav-btn {
+          animation: none !important;
+          transition: none !important;
+        }
+      }
+
+      @media print { .bliptar { display: none !important; } }
+    `}getAnimationStyles(r){switch(r){case"slide-up":return"animation: bliptar-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);";case"fade":return"animation: bliptar-fade 0.3s ease-out;";case"scale":return"animation: bliptar-scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);";case"none":return"";default:return"animation: bliptar-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);"}}renderQuestion(){if(!this.container)return;let{questions:r,appearance:t,behavior:e}=this.form,a=r[this.currentIndex],s=this.currentIndex===r.length-1,o="";if(t.backdrop&&(o+='<div class="bliptar__backdrop"></div>'),o+='<div class="bliptar__card">',e.allowDismiss&&(o+=`<button class="bliptar__close" aria-label="Close">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M1 1l12 12M1 13L13 1"/>
+        </svg>
+      </button>`),e.showProgress&&r.length>1){o+='<div class="bliptar__progress">';for(let p=0;p<r.length;p++)o+=`<div class="bliptar__progress-bar${p<=this.currentIndex?" bliptar__progress-bar--active":""}"></div>`;o+="</div>"}o+=`<div class="bliptar__question">${this.escapeHtml(a.question)}</div>`,o+=this.renderAnswerOptions(a),(!e.autoAdvance||a.type==="text-input")&&(o+='<div class="bliptar__nav">',o+=this.currentIndex>0?'<button class="bliptar__nav-btn bliptar__nav-btn--back">Back</button>':"<div></div>",o+=`<button class="bliptar__nav-btn bliptar__nav-btn--next">${s?"Submit":"Continue"}</button>`,o+="</div>"),o+="</div>",this.container.innerHTML=o,this.attachEventListeners()}escapeHtml(r){let t=document.createElement("div");return t.textContent=r,t.innerHTML}renderAnswerOptions(r){let t=`q${this.currentIndex}`,e=this.answers[t];switch(r.type){case"binary":return`<div class="bliptar__options">
+          <button class="bliptar__btn${e===!0?" bliptar__btn--selected":""}" data-value="true">
+            ${r.style==="thumbs"?"\u{1F44D} ":""}${this.escapeHtml(r.positiveLabel)}
+          </button>
+          <button class="bliptar__btn${e===!1?" bliptar__btn--selected":""}" data-value="false">
+            ${r.style==="thumbs"?"\u{1F44E} ":""}${this.escapeHtml(r.negativeLabel)}
+          </button>
+        </div>`;case"star-rating":let a='<div class="bliptar__stars">';for(let n=1;n<=r.maxStars;n++)a+=`<span class="bliptar__star${e>=n?" bliptar__star--active":""}" data-value="${n}">\u2605</span>`;return a+"</div>";case"emoji-scale":let s=["\u{1F61E}","\u{1F615}","\u{1F610}","\u{1F642}","\u{1F60A}"],o=["\u{1F61E}","\u{1F610}","\u{1F60A}"],p=r.scale===3?o:s,c='<div class="bliptar__emojis">';return p.forEach((n,l)=>{c+=`<span class="bliptar__emoji${e===l+1?" bliptar__emoji--active":""}" data-value="${l+1}" title="${r.labels?.[l]||""}">${n}</span>`}),c+"</div>";case"nps":let d='<div class="bliptar__nps">';for(let n=0;n<=10;n++)d+=`<button class="bliptar__nps-btn${e===n?" bliptar__nps-btn--selected":""}" data-value="${n}">${n}</button>`;return d+=`</div><div class="bliptar__nps-labels"><span>${this.escapeHtml(r.lowLabel)}</span><span>${this.escapeHtml(r.highLabel)}</span></div>`,d;case"single-choice":let m='<div class="bliptar__options">';return r.options.forEach(n=>{m+=`<button class="bliptar__btn${e===n?" bliptar__btn--selected":""}" data-value="${this.escapeHtml(n)}">${this.escapeHtml(n)}</button>`}),m+"</div>";case"text-input":return`<textarea class="bliptar__textarea" placeholder="${this.escapeHtml(r.placeholder)}" maxlength="${r.maxLength}">${e||""}</textarea>`;default:return""}}attachEventListeners(){if(!this.container)return;let r=this.form.questions[this.currentIndex],{behavior:t}=this.form,e=this.container.querySelector(".bliptar__close");e&&e.addEventListener("click",()=>this.options.onDismiss());let a=this.container.querySelector(".bliptar__backdrop");a&&t.allowDismiss&&a.addEventListener("click",()=>this.options.onDismiss());let s=n=>{this.answers[`q${this.currentIndex}`]=n,t.autoAdvance&&r.type!=="text-input"?setTimeout(()=>this.goNext(),t.autoAdvanceDelay||300):this.renderQuestion()};this.container.querySelectorAll(".bliptar__btn, .bliptar__nps-btn").forEach(n=>{n.addEventListener("click",()=>{let l=n.dataset.value;r.type==="binary"?s(l==="true"):r.type==="nps"?s(parseInt(l,10)):s(l)})});let o=this.container.querySelectorAll(".bliptar__star");o.forEach((n,l)=>{n.addEventListener("mouseenter",()=>{o.forEach((x,E)=>x.classList.toggle("bliptar__star--active",E<=l))}),n.addEventListener("click",()=>s(parseInt(n.dataset.value,10)))});let p=this.container.querySelector(".bliptar__stars");p&&p.addEventListener("mouseleave",()=>{let n=this.answers[`q${this.currentIndex}`];o.forEach((l,x)=>l.classList.toggle("bliptar__star--active",n?x<n:!1))}),this.container.querySelectorAll(".bliptar__emoji").forEach(n=>{n.addEventListener("click",()=>s(parseInt(n.dataset.value,10)))});let c=this.container.querySelector(".bliptar__textarea");c&&(c.addEventListener("input",()=>{this.answers[`q${this.currentIndex}`]=c.value}),setTimeout(()=>c.focus(),100));let d=this.container.querySelector(".bliptar__nav-btn--back");d&&d.addEventListener("click",()=>this.goBack());let m=this.container.querySelector(".bliptar__nav-btn--next");m&&m.addEventListener("click",()=>this.goNext())}goBack(){this.currentIndex>0&&(this.currentIndex--,this.renderQuestion())}async goNext(){this.currentIndex===this.form.questions.length-1?await this.submit():(this.currentIndex++,this.renderQuestion())}async submit(){if(this.container){let r=this.container.querySelector(".bliptar__card");r&&(r.innerHTML='<div class="bliptar__loading"><div class="bliptar__spinner"></div></div>')}try{await this.options.onSubmit(this.answers),this.form.behavior.showThankYou?(this.renderThankYou(),setTimeout(()=>this.options.onDismiss(),this.form.behavior.thankYouDuration||2e3)):this.options.onDismiss()}catch{this.options.onDismiss()}}renderThankYou(){if(!this.container)return;let{appearance:r,behavior:t}=this.form,e="";r.backdrop&&(e+='<div class="bliptar__backdrop"></div>'),e+=`<div class="bliptar__card">
+      <div class="bliptar__thankyou">
+        <div class="bliptar__thankyou-emoji">\u{1F389}</div>
+        <div class="bliptar__thankyou-text">${this.escapeHtml(t.thankYouMessage||"Thank you for your feedback!")}</div>
+      </div>
+    </div>`,this.container.innerHTML=e}};function $(){let i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r="";for(let t=0;t<16;t++)r+=i.charAt(Math.floor(Math.random()*i.length));return`sess_${r}`}function T(){let i=navigator.userAgent;return/tablet|ipad|playbook|silk/i.test(i)?"tablet":/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(i)?"mobile":"desktop"}function S(i,r){let t;return(...e)=>{clearTimeout(t),t=setTimeout(()=>i(...e),r)}}var O="https://api.bliptar.com",b=class{constructor(r){this.renderer=null;this.scrollDepth=0;this.isInitialized=!1;this.eventListeners=[];this.config={apiUrl:O,debug:!1,onShow:()=>{},onSubmit:()=>{},onDismiss:()=>{},onError:()=>{},...r},this.sessionId=this.loadOrCreateSessionId(),this.pageLoadTime=Date.now()}init(){if(this.isInitialized)return;this.isInitialized=!0,this.log("Initializing Bliptar SDK");let r=S(()=>{let t=document.documentElement,e=window.scrollY||t.scrollTop,a=t.scrollHeight-t.clientHeight;this.scrollDepth=a>0?e/a:0},100);this.addEventListener(window,"scroll",r),this.track("page_view")}identify(r,t){this.config.userId=r,this.config.userAttributes={...this.config.userAttributes,...t},this.log("User identified:",r)}async track(r,t){this.log("Tracking event:",r,t);let e=this.getContext();try{let a=await fetch(`${this.config.apiUrl}/api/sdk/trigger`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.config.apiKey}`},body:JSON.stringify({session_id:this.sessionId,user_id:this.config.userId,event:r,event_data:t||{},context:e})});if(!a.ok)throw new Error(`API error: ${a.status}`);let s=await a.json();s.show_form&&s.form&&await this.displayForm(s.form,s.campaign_id)}catch(a){this.handleError(a)}}async showForm(r){this.log("Manually showing form:",r);try{let t=await fetch(`${this.config.apiUrl}/api/sdk/form/${r}`,{headers:{Authorization:`Bearer ${this.config.apiKey}`}});if(!t.ok)throw new Error(`Failed to fetch form: ${t.status}`);let e=await t.json();await this.displayForm(e)}catch(t){this.handleError(t)}}destroy(){this.log("Destroying Bliptar SDK"),this.eventListeners.forEach(({target:r,type:t,handler:e})=>{r.removeEventListener(t,e)}),this.eventListeners=[],this.renderer&&(this.renderer.destroy(),this.renderer=null),this.isInitialized=!1}async displayForm(r,t){this.log("Displaying form:",r.formId),this.config.onShow?.(r),this.renderer=new g(r,{onSubmit:async e=>{await this.submitResponse(r.formId,e,t),this.config.onSubmit?.(e)},onDismiss:()=>{this.config.onDismiss?.(),this.renderer?.destroy(),this.renderer=null}}),this.renderer.render()}async submitResponse(r,t,e){this.log("Submitting response:",r,t);let a=this.getContext(),s=new Date().toISOString();try{await fetch(`${this.config.apiUrl}/api/sdk/submit`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.config.apiKey}`},body:JSON.stringify({session_id:this.sessionId,user_id:this.config.userId,form_id:r,campaign_id:e,answers:t,context:a,completed_at:s})})}catch(o){this.handleError(o)}}getContext(){return{pageUrl:window.location.href,referrer:document.referrer,timeOnPage:Math.floor((Date.now()-this.pageLoadTime)/1e3),scrollDepth:Math.round(this.scrollDepth*100)/100,deviceType:T()}}loadOrCreateSessionId(){let r="bliptar_session",t=sessionStorage.getItem(r);return t||(t=$(),sessionStorage.setItem(r,t)),t}addEventListener(r,t,e){r.addEventListener(t,e),this.eventListeners.push({target:r,type:t,handler:e})}log(...r){this.config.debug&&console.log("[Bliptar]",...r)}handleError(r){this.log("Error:",r),this.config.onError?.(r)}};function y(i){return new b(i)}if(typeof window<"u"){let i=document.currentScript;if(i?.dataset.apiKey){let r=y({apiKey:i.dataset.apiKey,debug:i.dataset.debug==="true"});window.bliptar=r,r.init()}}0&&(module.exports={Bliptar,createBliptar});

package/dist/index.d.cts

@@ -0,0 +1,151 @@
+interface BliptarConfig {
+    apiKey: string;
+    apiUrl?: string;
+    debug?: boolean;
+    userId?: string;
+    userAttributes?: Record<string, unknown>;
+    onShow?: (form: Form) => void;
+    onSubmit?: (answers: Record<string, Answer>) => void;
+    onDismiss?: () => void;
+    onError?: (error: Error) => void;
+}
+interface BliptarInstance {
+    init: () => void;
+    identify: (userId: string, attributes?: Record<string, unknown>) => void;
+    track: (event: string, data?: Record<string, unknown>) => void;
+    showForm: (formId: string) => Promise<void>;
+    destroy: () => void;
+}
+interface Form {
+    formId: string;
+    name: string;
+    questions: Question[];
+    appearance: FormAppearance;
+    behavior: FormBehavior;
+}
+type ThemeMode = 'light' | 'dark' | 'auto' | 'adaptive' | 'custom';
+interface CustomTheme {
+    backgroundColor: string;
+    surfaceColor: string;
+    textPrimary: string;
+    textSecondary: string;
+    primaryColor: string;
+    primaryHover: string;
+    borderColor: string;
+    shadowColor: string;
+}
+interface AdaptiveThemeOptions {
+    sourceElement?: string;
+    inheritCssVars?: boolean;
+    fallback: 'light' | 'dark';
+    autoContrast: boolean;
+}
+interface FormAppearance {
+    theme: ThemeMode;
+    customTheme?: CustomTheme;
+    adaptiveOptions?: AdaptiveThemeOptions;
+    position: 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center';
+    animation: 'slide-up' | 'fade' | 'scale' | 'none';
+    backdrop: boolean;
+    backdropBlur: boolean;
+    borderRadius: number;
+    maxWidth: number;
+}
+interface FormBehavior {
+    showProgress: boolean;
+    allowSkip: boolean;
+    allowDismiss: boolean;
+    autoAdvance: boolean;
+    autoAdvanceDelay: number;
+    submitOnComplete: boolean;
+    showThankYou: boolean;
+    thankYouMessage: string;
+    thankYouDuration: number;
+}
+type Question = BinaryQuestion | StarRatingQuestion | EmojiScaleQuestion | NPSQuestion | SingleChoiceQuestion | TextInputQuestion;
+interface BaseQuestion {
+    type: string;
+    question: string;
+    required: boolean;
+}
+interface BinaryQuestion extends BaseQuestion {
+    type: 'binary';
+    style: 'thumbs' | 'yesno' | 'custom';
+    positiveLabel: string;
+    negativeLabel: string;
+}
+interface StarRatingQuestion extends BaseQuestion {
+    type: 'star-rating';
+    maxStars: number;
+    allowHalf: boolean;
+}
+interface EmojiScaleQuestion extends BaseQuestion {
+    type: 'emoji-scale';
+    scale: 3 | 5;
+    labels?: string[];
+}
+interface NPSQuestion extends BaseQuestion {
+    type: 'nps';
+    lowLabel: string;
+    highLabel: string;
+}
+interface SingleChoiceQuestion extends BaseQuestion {
+    type: 'single-choice';
+    options: string[];
+    style: 'buttons' | 'radio' | 'dropdown';
+}
+interface TextInputQuestion extends BaseQuestion {
+    type: 'text-input';
+    placeholder: string;
+    maxLength: number;
+    multiline: boolean;
+}
+type Answer = boolean | number | string;
+
+declare class Bliptar implements BliptarInstance {
+    private config;
+    private sessionId;
+    private renderer;
+    private pageLoadTime;
+    private scrollDepth;
+    private isInitialized;
+    private eventListeners;
+    constructor(config: BliptarConfig);
+    init(): void;
+    identify(userId: string, attributes?: Record<string, unknown>): void;
+    track(event: string, data?: Record<string, unknown>): Promise<void>;
+    showForm(formId: string): Promise<void>;
+    destroy(): void;
+    private displayForm;
+    private submitResponse;
+    private getContext;
+    private loadOrCreateSessionId;
+    private addEventListener;
+    private log;
+    private handleError;
+}
+
+/**
+ * Create a new Bliptar instance
+ *
+ * @example
+ * ```typescript
+ * import { createBliptar } from '@bliptar/sdk';
+ *
+ * const bliptar = createBliptar({
+ *   apiKey: 'pk_xxx',
+ *   debug: true,
+ * });
+ *
+ * bliptar.init();
+ *
+ * // Identify user (optional)
+ * bliptar.identify('user_123', { plan: 'pro' });
+ *
+ * // Track custom events
+ * bliptar.track('checkout_complete', { amount: 99.99 });
+ * ```
+ */
+declare function createBliptar(config: BliptarConfig): BliptarInstance;
+
+export { type Answer, Bliptar, type BliptarConfig, type BliptarInstance, type Form, type Question, createBliptar };

package/dist/index.d.ts

@@ -0,0 +1,151 @@
+interface BliptarConfig {
+    apiKey: string;
+    apiUrl?: string;
+    debug?: boolean;
+    userId?: string;
+    userAttributes?: Record<string, unknown>;
+    onShow?: (form: Form) => void;
+    onSubmit?: (answers: Record<string, Answer>) => void;
+    onDismiss?: () => void;
+    onError?: (error: Error) => void;
+}
+interface BliptarInstance {
+    init: () => void;
+    identify: (userId: string, attributes?: Record<string, unknown>) => void;
+    track: (event: string, data?: Record<string, unknown>) => void;
+    showForm: (formId: string) => Promise<void>;
+    destroy: () => void;
+}
+interface Form {
+    formId: string;
+    name: string;
+    questions: Question[];
+    appearance: FormAppearance;
+    behavior: FormBehavior;
+}
+type ThemeMode = 'light' | 'dark' | 'auto' | 'adaptive' | 'custom';
+interface CustomTheme {
+    backgroundColor: string;
+    surfaceColor: string;
+    textPrimary: string;
+    textSecondary: string;
+    primaryColor: string;
+    primaryHover: string;
+    borderColor: string;
+    shadowColor: string;
+}
+interface AdaptiveThemeOptions {
+    sourceElement?: string;
+    inheritCssVars?: boolean;
+    fallback: 'light' | 'dark';
+    autoContrast: boolean;
+}
+interface FormAppearance {
+    theme: ThemeMode;
+    customTheme?: CustomTheme;
+    adaptiveOptions?: AdaptiveThemeOptions;
+    position: 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center';
+    animation: 'slide-up' | 'fade' | 'scale' | 'none';
+    backdrop: boolean;
+    backdropBlur: boolean;
+    borderRadius: number;
+    maxWidth: number;
+}
+interface FormBehavior {
+    showProgress: boolean;
+    allowSkip: boolean;
+    allowDismiss: boolean;
+    autoAdvance: boolean;
+    autoAdvanceDelay: number;
+    submitOnComplete: boolean;
+    showThankYou: boolean;
+    thankYouMessage: string;
+    thankYouDuration: number;
+}
+type Question = BinaryQuestion | StarRatingQuestion | EmojiScaleQuestion | NPSQuestion | SingleChoiceQuestion | TextInputQuestion;
+interface BaseQuestion {
+    type: string;
+    question: string;
+    required: boolean;
+}
+interface BinaryQuestion extends BaseQuestion {
+    type: 'binary';
+    style: 'thumbs' | 'yesno' | 'custom';
+    positiveLabel: string;
+    negativeLabel: string;
+}
+interface StarRatingQuestion extends BaseQuestion {
+    type: 'star-rating';
+    maxStars: number;
+    allowHalf: boolean;
+}
+interface EmojiScaleQuestion extends BaseQuestion {
+    type: 'emoji-scale';
+    scale: 3 | 5;
+    labels?: string[];
+}
+interface NPSQuestion extends BaseQuestion {
+    type: 'nps';
+    lowLabel: string;
+    highLabel: string;
+}
+interface SingleChoiceQuestion extends BaseQuestion {
+    type: 'single-choice';
+    options: string[];
+    style: 'buttons' | 'radio' | 'dropdown';
+}
+interface TextInputQuestion extends BaseQuestion {
+    type: 'text-input';
+    placeholder: string;
+    maxLength: number;
+    multiline: boolean;
+}
+type Answer = boolean | number | string;
+
+declare class Bliptar implements BliptarInstance {
+    private config;
+    private sessionId;
+    private renderer;
+    private pageLoadTime;
+    private scrollDepth;
+    private isInitialized;
+    private eventListeners;
+    constructor(config: BliptarConfig);
+    init(): void;
+    identify(userId: string, attributes?: Record<string, unknown>): void;
+    track(event: string, data?: Record<string, unknown>): Promise<void>;
+    showForm(formId: string): Promise<void>;
+    destroy(): void;
+    private displayForm;
+    private submitResponse;
+    private getContext;
+    private loadOrCreateSessionId;
+    private addEventListener;
+    private log;
+    private handleError;
+}
+
+/**
+ * Create a new Bliptar instance
+ *
+ * @example
+ * ```typescript
+ * import { createBliptar } from '@bliptar/sdk';
+ *
+ * const bliptar = createBliptar({
+ *   apiKey: 'pk_xxx',
+ *   debug: true,
+ * });
+ *
+ * bliptar.init();
+ *
+ * // Identify user (optional)
+ * bliptar.identify('user_123', { plan: 'pro' });
+ *
+ * // Track custom events
+ * bliptar.track('checkout_complete', { amount: 99.99 });
+ * ```
+ */
+declare function createBliptar(config: BliptarConfig): BliptarInstance;
+
+export { type Answer, Bliptar, type BliptarConfig, type BliptarInstance, type Form, type Question, createBliptar };

package/dist/index.js

@@ -0,0 +1,391 @@
+var u={mode:"light",backgroundColor:"#ffffff",surfaceColor:"#f5f5f5",textPrimary:"#1a1a1a",textSecondary:"#666666",primaryColor:"#3b82f6",primaryHover:"#2563eb",borderColor:"#e0e0e0",shadowColor:"rgba(0, 0, 0, 0.15)",starColor:"#fbbf24"},h={mode:"dark",backgroundColor:"#1a1a1a",surfaceColor:"#2a2a2a",textPrimary:"#ffffff",textSecondary:"#a0a0a0",primaryColor:"#3b82f6",primaryHover:"#60a5fa",borderColor:"#333333",shadowColor:"rgba(0, 0, 0, 0.4)",starColor:"#fbbf24"};function E(i,r){try{let e=window.getComputedStyle(i).getPropertyValue(r);return e&&e!=="rgba(0, 0, 0, 0)"?e:null}catch{return null}}function I(i){try{return getComputedStyle(document.documentElement).getPropertyValue(i).trim()||null}catch{return null}}function v(i){let r=i.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);if(r)return{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)};let t=i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);return t?{r:parseInt(t[1],10),g:parseInt(t[2],10),b:parseInt(t[3],10)}:null}function L(i,r,t){let[e,a,s]=[i,r,t].map(o=>(o=o/255,o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4)));return .2126*e+.7152*a+.0722*s}function _(i){let r=v(i);return r?L(r.r,r.g,r.b)<.5:!1}function f(i,r){let t=v(i);if(!t)return i;let e=a=>Math.min(255,Math.max(0,Math.round(a+r/100*255)));return`rgb(${e(t.r)}, ${e(t.g)}, ${e(t.b)})`}function P(i){return _(i)?"#ffffff":"#1a1a1a"}function A(i,r){let t={},e=null;i&&(e=document.querySelector(i)),e||(e=document.body);let a=E(e,"background-color");if(a){let s=_(a);t.mode=s?"dark":"light",t.backgroundColor=a,t.surfaceColor=f(a,s?10:-5),t.textPrimary=P(a),t.textSecondary=f(t.textPrimary,s?-30:30),t.borderColor=f(a,s?20:-15),t.shadowColor=s?"rgba(0, 0, 0, 0.4)":"rgba(0, 0, 0, 0.15)"}if(r){let s={"--primary":"primaryColor","--primary-color":"primaryColor","--accent":"primaryColor","--accent-color":"primaryColor","--brand":"primaryColor","--brand-color":"primaryColor","--color-primary":"primaryColor","--background":"backgroundColor","--bg":"backgroundColor","--bg-color":"backgroundColor","--text":"textPrimary","--text-color":"textPrimary","--foreground":"textPrimary","--border":"borderColor","--border-color":"borderColor"};for(let[o,p]of Object.entries(s)){let c=I(o);c&&(t[p]=c)}}return t.primaryColor&&(t.primaryHover=f(t.primaryColor,t.mode==="dark"?15:-10)),Object.keys(t).length>0?t:null}function y(i){let{theme:r,customTheme:t,adaptiveOptions:e}=i;if(r==="custom"&&t)return{mode:_(t.backgroundColor)?"dark":"light",backgroundColor:t.backgroundColor,surfaceColor:t.surfaceColor,textPrimary:t.textPrimary,textSecondary:t.textSecondary,primaryColor:t.primaryColor,primaryHover:t.primaryHover,borderColor:t.borderColor,shadowColor:t.shadowColor,starColor:"#fbbf24"};if(r==="adaptive"){let a=e||{fallback:"light",autoContrast:!0},s=A(a.sourceElement,a.inheritCssVars);return s?{...s.mode==="dark"?h:u,...s}:a.fallback==="dark"?h:u}return r==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches?h:u:r==="dark"?h:u}function k(i){return`
+    --bliptar-bg: ${i.backgroundColor};
+    --bliptar-surface: ${i.surfaceColor};
+    --bliptar-text: ${i.textPrimary};
+    --bliptar-text-secondary: ${i.textSecondary};
+    --bliptar-primary: ${i.primaryColor};
+    --bliptar-primary-hover: ${i.primaryHover};
+    --bliptar-border: ${i.borderColor};
+    --bliptar-shadow: ${i.shadowColor};
+    --bliptar-star: ${i.starColor};
+  `}var g=class{constructor(r,t){this.container=null;this.currentIndex=0;this.answers={};this.form=r,this.options=t,this.theme=y(r.appearance)}render(){this.createContainer(),this.injectStyles(),this.renderQuestion()}destroy(){if(this.container){let r=this.container.querySelector(".bliptar__card");r?(r.classList.add("bliptar__card--exit"),setTimeout(()=>{this.container?.remove(),this.container=null},200)):(this.container.remove(),this.container=null)}}createContainer(){this.container=document.createElement("div"),this.container.id="bliptar-form",this.container.className=`bliptar bliptar--${this.form.appearance.position}`,document.body.appendChild(this.container)}injectStyles(){let r=document.getElementById("bliptar-styles");r&&r.remove();let t=document.createElement("style");t.id="bliptar-styles",t.textContent=this.getStyles(),document.head.appendChild(t)}getStyles(){let{appearance:r}=this.form,t=this.theme,e=r.animation||"slide-up";return`
+      :root { ${k(t)} }
+
+      .bliptar {
+        position: fixed;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .bliptar--bottom-right { bottom: 20px; right: 20px; }
+      .bliptar--bottom-left { bottom: 20px; left: 20px; }
+      .bliptar--bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); }
+      .bliptar--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
+
+      .bliptar__backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        animation: bliptar-fade-in 0.2s ease-out;
+        ${r.backdropBlur?"backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);":""}
+      }
+
+      .bliptar__card {
+        background: ${t.backgroundColor};
+        color: ${t.textPrimary};
+        border-radius: ${r.borderRadius}px;
+        box-shadow: 0 8px 32px ${t.shadowColor}, 0 2px 8px ${t.shadowColor};
+        max-width: ${r.maxWidth}px;
+        width: calc(100vw - 40px);
+        padding: 24px;
+        position: relative;
+        ${this.getAnimationStyles(e)}
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+      }
+
+      .bliptar__card:hover {
+        box-shadow: 0 12px 40px ${t.shadowColor}, 0 4px 12px ${t.shadowColor};
+      }
+
+      .bliptar__card--exit {
+        animation: bliptar-${e}-out 0.2s ease-in forwards;
+      }
+
+      @keyframes bliptar-fade-in { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes bliptar-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+      @keyframes bliptar-slide-up-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(24px); } }
+      @keyframes bliptar-fade { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes bliptar-fade-out { from { opacity: 1; } to { opacity: 0; } }
+      @keyframes bliptar-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+      @keyframes bliptar-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
+      @keyframes bliptar-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
+      @keyframes bliptar-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+      @keyframes bliptar-spin { to { transform: rotate(360deg); } }
+
+      .bliptar__close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 8px;
+        color: ${t.textSecondary};
+        font-size: 20px;
+        line-height: 1;
+        border-radius: 8px;
+        transition: all 0.15s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+      }
+
+      .bliptar__close:hover {
+        background: ${t.surfaceColor};
+        color: ${t.textPrimary};
+      }
+
+      .bliptar__progress {
+        display: flex;
+        gap: 6px;
+        margin-bottom: 20px;
+      }
+
+      .bliptar__progress-bar {
+        height: 4px;
+        flex: 1;
+        border-radius: 2px;
+        background: ${t.borderColor};
+        overflow: hidden;
+        position: relative;
+      }
+
+      .bliptar__progress-bar--active {
+        background: ${t.primaryColor};
+      }
+
+      .bliptar__progress-bar--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+        animation: bliptar-shimmer 1.5s infinite;
+      }
+
+      .bliptar__question {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 24px;
+        line-height: 1.4;
+        animation: bliptar-fade 0.3s ease-out;
+      }
+
+      .bliptar__options {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__btn {
+        padding: 12px 20px;
+        border: 2px solid ${t.borderColor};
+        border-radius: 10px;
+        background: transparent;
+        color: ${t.textPrimary};
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+        flex: 1;
+        min-width: 100px;
+      }
+
+      .bliptar__btn:hover {
+        border-color: ${t.primaryColor};
+        background: ${t.surfaceColor};
+        transform: translateY(-1px);
+      }
+
+      .bliptar__btn:active { transform: translateY(0); }
+
+      .bliptar__btn--selected {
+        background: ${t.primaryColor};
+        border-color: ${t.primaryColor};
+        color: white;
+        animation: bliptar-bounce 0.3s ease;
+      }
+
+      .bliptar__stars {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__star {
+        font-size: 36px;
+        cursor: pointer;
+        color: ${t.borderColor};
+        transition: all 0.2s ease;
+        transform-origin: center;
+      }
+
+      .bliptar__star:hover {
+        transform: scale(1.15);
+        color: ${t.starColor};
+      }
+
+      .bliptar__star--active {
+        color: ${t.starColor};
+        animation: bliptar-bounce 0.3s ease;
+      }
+
+      .bliptar__emojis {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__emoji {
+        font-size: 40px;
+        cursor: pointer;
+        padding: 10px;
+        border-radius: 16px;
+        transition: all 0.2s ease;
+        border: 2px solid transparent;
+      }
+
+      .bliptar__emoji:hover {
+        background: ${t.surfaceColor};
+        transform: scale(1.1);
+      }
+
+      .bliptar__emoji--active {
+        background: ${t.surfaceColor};
+        border-color: ${t.primaryColor};
+        transform: scale(1.15);
+        animation: bliptar-bounce 0.3s ease;
+      }
+
+      .bliptar__nps {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+        justify-content: center;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+      }
+
+      .bliptar__nps-btn {
+        width: 36px;
+        height: 36px;
+        border: 2px solid ${t.borderColor};
+        border-radius: 8px;
+        background: transparent;
+        color: ${t.textPrimary};
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+        transition: all 0.15s ease;
+      }
+
+      .bliptar__nps-btn:hover {
+        border-color: ${t.primaryColor};
+        background: ${t.surfaceColor};
+        transform: translateY(-2px);
+      }
+
+      .bliptar__nps-btn--selected {
+        background: ${t.primaryColor};
+        border-color: ${t.primaryColor};
+        color: white;
+        transform: translateY(-2px);
+      }
+
+      .bliptar__nps-labels {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        font-size: 12px;
+        color: ${t.textSecondary};
+      }
+
+      .bliptar__textarea {
+        width: 100%;
+        padding: 14px;
+        border: 2px solid ${t.borderColor};
+        border-radius: 10px;
+        background: transparent;
+        color: ${t.textPrimary};
+        font-size: 14px;
+        font-family: inherit;
+        resize: vertical;
+        min-height: 100px;
+        transition: all 0.2s ease;
+        animation: bliptar-fade 0.3s ease-out 0.1s both;
+        box-sizing: border-box;
+      }
+
+      .bliptar__textarea::placeholder { color: ${t.textSecondary}; }
+
+      .bliptar__textarea:focus {
+        outline: none;
+        border-color: ${t.primaryColor};
+        box-shadow: 0 0 0 3px ${t.primaryColor}20;
+      }
+
+      .bliptar__nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 24px;
+        gap: 12px;
+      }
+
+      .bliptar__nav-btn {
+        padding: 12px 24px;
+        border: none;
+        border-radius: 10px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+      }
+
+      .bliptar__nav-btn--back {
+        background: transparent;
+        color: ${t.textSecondary};
+        padding: 12px 16px;
+      }
+
+      .bliptar__nav-btn--back:hover {
+        color: ${t.textPrimary};
+        background: ${t.surfaceColor};
+      }
+
+      .bliptar__nav-btn--next {
+        background: ${t.primaryColor};
+        color: white;
+        flex: 1;
+        max-width: 200px;
+      }
+
+      .bliptar__nav-btn--next:hover {
+        background: ${t.primaryHover};
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px ${t.primaryColor}40;
+      }
+
+      .bliptar__nav-btn--next:active { transform: translateY(0); }
+
+      .bliptar__thankyou {
+        text-align: center;
+        padding: 24px 0;
+        animation: bliptar-scale 0.4s ease-out;
+      }
+
+      .bliptar__thankyou-emoji {
+        font-size: 56px;
+        margin-bottom: 16px;
+        animation: bliptar-bounce 0.5s ease 0.2s;
+      }
+
+      .bliptar__thankyou-text {
+        font-size: 18px;
+        font-weight: 500;
+        color: ${t.textPrimary};
+      }
+
+      .bliptar__loading {
+        display: flex;
+        justify-content: center;
+        padding: 20px;
+      }
+
+      .bliptar__spinner {
+        width: 24px;
+        height: 24px;
+        border: 3px solid ${t.borderColor};
+        border-top-color: ${t.primaryColor};
+        border-radius: 50%;
+        animation: bliptar-spin 0.8s linear infinite;
+      }
+
+      @media (max-width: 480px) {
+        .bliptar--bottom-right, .bliptar--bottom-left { left: 10px; right: 10px; bottom: 10px; }
+        .bliptar__card { width: 100%; padding: 20px; }
+        .bliptar__question { font-size: 16px; }
+        .bliptar__star { font-size: 28px; }
+        .bliptar__emoji { font-size: 32px; padding: 8px; }
+        .bliptar__nps-btn { width: 28px; height: 28px; font-size: 11px; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .bliptar__card, .bliptar__btn, .bliptar__star, .bliptar__emoji, .bliptar__nps-btn, .bliptar__nav-btn {
+          animation: none !important;
+          transition: none !important;
+        }
+      }
+
+      @media print { .bliptar { display: none !important; } }
+    `}getAnimationStyles(r){switch(r){case"slide-up":return"animation: bliptar-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);";case"fade":return"animation: bliptar-fade 0.3s ease-out;";case"scale":return"animation: bliptar-scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);";case"none":return"";default:return"animation: bliptar-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);"}}renderQuestion(){if(!this.container)return;let{questions:r,appearance:t,behavior:e}=this.form,a=r[this.currentIndex],s=this.currentIndex===r.length-1,o="";if(t.backdrop&&(o+='<div class="bliptar__backdrop"></div>'),o+='<div class="bliptar__card">',e.allowDismiss&&(o+=`<button class="bliptar__close" aria-label="Close">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M1 1l12 12M1 13L13 1"/>
+        </svg>
+      </button>`),e.showProgress&&r.length>1){o+='<div class="bliptar__progress">';for(let p=0;p<r.length;p++)o+=`<div class="bliptar__progress-bar${p<=this.currentIndex?" bliptar__progress-bar--active":""}"></div>`;o+="</div>"}o+=`<div class="bliptar__question">${this.escapeHtml(a.question)}</div>`,o+=this.renderAnswerOptions(a),(!e.autoAdvance||a.type==="text-input")&&(o+='<div class="bliptar__nav">',o+=this.currentIndex>0?'<button class="bliptar__nav-btn bliptar__nav-btn--back">Back</button>':"<div></div>",o+=`<button class="bliptar__nav-btn bliptar__nav-btn--next">${s?"Submit":"Continue"}</button>`,o+="</div>"),o+="</div>",this.container.innerHTML=o,this.attachEventListeners()}escapeHtml(r){let t=document.createElement("div");return t.textContent=r,t.innerHTML}renderAnswerOptions(r){let t=`q${this.currentIndex}`,e=this.answers[t];switch(r.type){case"binary":return`<div class="bliptar__options">
+          <button class="bliptar__btn${e===!0?" bliptar__btn--selected":""}" data-value="true">
+            ${r.style==="thumbs"?"\u{1F44D} ":""}${this.escapeHtml(r.positiveLabel)}
+          </button>
+          <button class="bliptar__btn${e===!1?" bliptar__btn--selected":""}" data-value="false">
+            ${r.style==="thumbs"?"\u{1F44E} ":""}${this.escapeHtml(r.negativeLabel)}
+          </button>
+        </div>`;case"star-rating":let a='<div class="bliptar__stars">';for(let n=1;n<=r.maxStars;n++)a+=`<span class="bliptar__star${e>=n?" bliptar__star--active":""}" data-value="${n}">\u2605</span>`;return a+"</div>";case"emoji-scale":let s=["\u{1F61E}","\u{1F615}","\u{1F610}","\u{1F642}","\u{1F60A}"],o=["\u{1F61E}","\u{1F610}","\u{1F60A}"],p=r.scale===3?o:s,c='<div class="bliptar__emojis">';return p.forEach((n,l)=>{c+=`<span class="bliptar__emoji${e===l+1?" bliptar__emoji--active":""}" data-value="${l+1}" title="${r.labels?.[l]||""}">${n}</span>`}),c+"</div>";case"nps":let d='<div class="bliptar__nps">';for(let n=0;n<=10;n++)d+=`<button class="bliptar__nps-btn${e===n?" bliptar__nps-btn--selected":""}" data-value="${n}">${n}</button>`;return d+=`</div><div class="bliptar__nps-labels"><span>${this.escapeHtml(r.lowLabel)}</span><span>${this.escapeHtml(r.highLabel)}</span></div>`,d;case"single-choice":let b='<div class="bliptar__options">';return r.options.forEach(n=>{b+=`<button class="bliptar__btn${e===n?" bliptar__btn--selected":""}" data-value="${this.escapeHtml(n)}">${this.escapeHtml(n)}</button>`}),b+"</div>";case"text-input":return`<textarea class="bliptar__textarea" placeholder="${this.escapeHtml(r.placeholder)}" maxlength="${r.maxLength}">${e||""}</textarea>`;default:return""}}attachEventListeners(){if(!this.container)return;let r=this.form.questions[this.currentIndex],{behavior:t}=this.form,e=this.container.querySelector(".bliptar__close");e&&e.addEventListener("click",()=>this.options.onDismiss());let a=this.container.querySelector(".bliptar__backdrop");a&&t.allowDismiss&&a.addEventListener("click",()=>this.options.onDismiss());let s=n=>{this.answers[`q${this.currentIndex}`]=n,t.autoAdvance&&r.type!=="text-input"?setTimeout(()=>this.goNext(),t.autoAdvanceDelay||300):this.renderQuestion()};this.container.querySelectorAll(".bliptar__btn, .bliptar__nps-btn").forEach(n=>{n.addEventListener("click",()=>{let l=n.dataset.value;r.type==="binary"?s(l==="true"):r.type==="nps"?s(parseInt(l,10)):s(l)})});let o=this.container.querySelectorAll(".bliptar__star");o.forEach((n,l)=>{n.addEventListener("mouseenter",()=>{o.forEach((x,S)=>x.classList.toggle("bliptar__star--active",S<=l))}),n.addEventListener("click",()=>s(parseInt(n.dataset.value,10)))});let p=this.container.querySelector(".bliptar__stars");p&&p.addEventListener("mouseleave",()=>{let n=this.answers[`q${this.currentIndex}`];o.forEach((l,x)=>l.classList.toggle("bliptar__star--active",n?x<n:!1))}),this.container.querySelectorAll(".bliptar__emoji").forEach(n=>{n.addEventListener("click",()=>s(parseInt(n.dataset.value,10)))});let c=this.container.querySelector(".bliptar__textarea");c&&(c.addEventListener("input",()=>{this.answers[`q${this.currentIndex}`]=c.value}),setTimeout(()=>c.focus(),100));let d=this.container.querySelector(".bliptar__nav-btn--back");d&&d.addEventListener("click",()=>this.goBack());let b=this.container.querySelector(".bliptar__nav-btn--next");b&&b.addEventListener("click",()=>this.goNext())}goBack(){this.currentIndex>0&&(this.currentIndex--,this.renderQuestion())}async goNext(){this.currentIndex===this.form.questions.length-1?await this.submit():(this.currentIndex++,this.renderQuestion())}async submit(){if(this.container){let r=this.container.querySelector(".bliptar__card");r&&(r.innerHTML='<div class="bliptar__loading"><div class="bliptar__spinner"></div></div>')}try{await this.options.onSubmit(this.answers),this.form.behavior.showThankYou?(this.renderThankYou(),setTimeout(()=>this.options.onDismiss(),this.form.behavior.thankYouDuration||2e3)):this.options.onDismiss()}catch{this.options.onDismiss()}}renderThankYou(){if(!this.container)return;let{appearance:r,behavior:t}=this.form,e="";r.backdrop&&(e+='<div class="bliptar__backdrop"></div>'),e+=`<div class="bliptar__card">
+      <div class="bliptar__thankyou">
+        <div class="bliptar__thankyou-emoji">\u{1F389}</div>
+        <div class="bliptar__thankyou-text">${this.escapeHtml(t.thankYouMessage||"Thank you for your feedback!")}</div>
+      </div>
+    </div>`,this.container.innerHTML=e}};function C(){let i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r="";for(let t=0;t<16;t++)r+=i.charAt(Math.floor(Math.random()*i.length));return`sess_${r}`}function w(){let i=navigator.userAgent;return/tablet|ipad|playbook|silk/i.test(i)?"tablet":/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(i)?"mobile":"desktop"}function $(i,r){let t;return(...e)=>{clearTimeout(t),t=setTimeout(()=>i(...e),r)}}var j="https://api.bliptar.com",m=class{constructor(r){this.renderer=null;this.scrollDepth=0;this.isInitialized=!1;this.eventListeners=[];this.config={apiUrl:j,debug:!1,onShow:()=>{},onSubmit:()=>{},onDismiss:()=>{},onError:()=>{},...r},this.sessionId=this.loadOrCreateSessionId(),this.pageLoadTime=Date.now()}init(){if(this.isInitialized)return;this.isInitialized=!0,this.log("Initializing Bliptar SDK");let r=$(()=>{let t=document.documentElement,e=window.scrollY||t.scrollTop,a=t.scrollHeight-t.clientHeight;this.scrollDepth=a>0?e/a:0},100);this.addEventListener(window,"scroll",r),this.track("page_view")}identify(r,t){this.config.userId=r,this.config.userAttributes={...this.config.userAttributes,...t},this.log("User identified:",r)}async track(r,t){this.log("Tracking event:",r,t);let e=this.getContext();try{let a=await fetch(`${this.config.apiUrl}/api/sdk/trigger`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.config.apiKey}`},body:JSON.stringify({session_id:this.sessionId,user_id:this.config.userId,event:r,event_data:t||{},context:e})});if(!a.ok)throw new Error(`API error: ${a.status}`);let s=await a.json();s.show_form&&s.form&&await this.displayForm(s.form,s.campaign_id)}catch(a){this.handleError(a)}}async showForm(r){this.log("Manually showing form:",r);try{let t=await fetch(`${this.config.apiUrl}/api/sdk/form/${r}`,{headers:{Authorization:`Bearer ${this.config.apiKey}`}});if(!t.ok)throw new Error(`Failed to fetch form: ${t.status}`);let e=await t.json();await this.displayForm(e)}catch(t){this.handleError(t)}}destroy(){this.log("Destroying Bliptar SDK"),this.eventListeners.forEach(({target:r,type:t,handler:e})=>{r.removeEventListener(t,e)}),this.eventListeners=[],this.renderer&&(this.renderer.destroy(),this.renderer=null),this.isInitialized=!1}async displayForm(r,t){this.log("Displaying form:",r.formId),this.config.onShow?.(r),this.renderer=new g(r,{onSubmit:async e=>{await this.submitResponse(r.formId,e,t),this.config.onSubmit?.(e)},onDismiss:()=>{this.config.onDismiss?.(),this.renderer?.destroy(),this.renderer=null}}),this.renderer.render()}async submitResponse(r,t,e){this.log("Submitting response:",r,t);let a=this.getContext(),s=new Date().toISOString();try{await fetch(`${this.config.apiUrl}/api/sdk/submit`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.config.apiKey}`},body:JSON.stringify({session_id:this.sessionId,user_id:this.config.userId,form_id:r,campaign_id:e,answers:t,context:a,completed_at:s})})}catch(o){this.handleError(o)}}getContext(){return{pageUrl:window.location.href,referrer:document.referrer,timeOnPage:Math.floor((Date.now()-this.pageLoadTime)/1e3),scrollDepth:Math.round(this.scrollDepth*100)/100,deviceType:w()}}loadOrCreateSessionId(){let r="bliptar_session",t=sessionStorage.getItem(r);return t||(t=C(),sessionStorage.setItem(r,t)),t}addEventListener(r,t,e){r.addEventListener(t,e),this.eventListeners.push({target:r,type:t,handler:e})}log(...r){this.config.debug&&console.log("[Bliptar]",...r)}handleError(r){this.log("Error:",r),this.config.onError?.(r)}};function T(i){return new m(i)}if(typeof window<"u"){let i=document.currentScript;if(i?.dataset.apiKey){let r=T({apiKey:i.dataset.apiKey,debug:i.dataset.debug==="true"});window.bliptar=r,r.init()}}export{m as Bliptar,T as createBliptar};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@bliptarjs/sdk",
+  "version": "0.1.0",
+  "description": "Bliptar SDK - Lightweight micro-feedback for web apps",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --minify",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "size": "size-limit",
+    "release": "./scripts/publish-to-npm.sh"
+  },
+  "keywords": [
+    "feedback",
+    "survey",
+    "micro-feedback",
+    "nps",
+    "user-feedback",
+    "analytics"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "happy-dom": "^15.0.0",
+    "size-limit": "^11.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^2.1.0"
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "8 KB"
+    }
+  ]
+}