@inputbuffer/feedback 0.1.0

package/dist/bar.d.ts

@@ -0,0 +1,2 @@
+import type { FeedbackBarConfig, FeedbackBarInstance } from './types.js';
+export declare function createFeedbackBar(config: FeedbackBarConfig): FeedbackBarInstance;

package/dist/bar.esm.js

@@ -0,0 +1,324 @@
+var S="0.1.0",G="https://inputbuffer.io/api/v0/inputs";async function M(t,n,o,s,r,h){var p;let a={description:n};if(s&&(a.title=s),o&&(a.contactEmail=o),r!=null&&r.sentiment&&(a.sentiment=r.sentiment),r!=null&&r.source&&(a.source=r.source),r!=null&&r.target){let i=r.target;a.targets=[{target_type:i.type,...i.targetId&&{target_id:i.targetId},...i.displayName&&{display_name:i.displayName},...i.dedupKey&&{dedup_key:i.dedupKey},metadata:i.metadata}]}let c=new AbortController,m=setTimeout(()=>c.abort(),1e4),l;try{l=await fetch(h!=null?h:G,{method:"POST",headers:{Authorization:`Bearer ${t}`,"Content-Type":"application/json","X-IB-Client":`inputbuffer-widget/${S} (javascript)`},body:JSON.stringify(a),credentials:"omit",signal:c.signal})}finally{clearTimeout(m)}if(!l.ok){let i=await l.json().catch(()=>({}));throw new Error(((p=i==null?void 0:i.error)==null?void 0:p.message)||"Submission failed. Please try again.")}return l.json()}function H(t){let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("width","18"),n.setAttribute("height","18"),n.setAttribute("fill","currentColor"),n.setAttribute("aria-hidden","true"),n.style.display="block";let o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("d",t),n.appendChild(o),n}var U="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h2v12H1z",q="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L10.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm0 12l-4.34 4.34L12 14H3v-2l3-7h9v10zm4-12h2v12h-2z";function L(t){var j,O;let n,o={vote:[],open:[],submit:[],close:[],error:[]};function s(e,g){var y;(y=o[e])==null||y.forEach(E=>E(g))}let r=document.createElement("div"),h=t.colorScheme==="dark"?" ib-theme-dark":t.colorScheme==="light"?" ib-theme-light":"";r.className="ib-bar-wrapper"+(t.placement==="fixed"?" ib-bar-wrapper--fixed":"")+h;let{theme:a={}}=t;a.primary&&r.style.setProperty("--ib-primary",a.primary),a.background&&r.style.setProperty("--ib-background",a.background),a.surface&&r.style.setProperty("--ib-surface",a.surface),a.text&&r.style.setProperty("--ib-text",a.text),a.selected&&r.style.setProperty("--ib-selected",a.selected),a.selectedColor&&r.style.setProperty("--ib-selected-color",a.selectedColor);let c=document.createElement("div");c.className="ib-bar";let m=document.createElement("div");m.className="ib-bar-label-area";let l=document.createElement("span");l.className="ib-bar-label",l.textContent=(j=t.label)!=null?j:"Was this helpful?",m.appendChild(l);let p=document.createElement("div");p.className="ib-bar-actions"+(t.showLabel===!1?" ib-bar-actions--no-label":"");let i=document.createElement("button");i.type="button",i.className="ib-bar-btn ib-bar-btn--up",i.setAttribute("aria-label","Yes"),i.appendChild(H(U));let d=document.createElement("button");d.type="button",d.className="ib-bar-btn ib-bar-btn--down",d.setAttribute("aria-label","No"),d.appendChild(H(q)),p.appendChild(i),p.appendChild(d),t.showLabel!==!1&&c.appendChild(m),c.appendChild(p);let b=document.createElement("div");b.className="ib-bar-popover",b.setAttribute("role","dialog"),b.setAttribute("aria-modal","false");let N=document.createElement("div");if(N.className="ib-bar-header",t.modalTitle){b.setAttribute("aria-labelledby","ib-bar-title");let e=document.createElement("p");e.id="ib-bar-title",e.className="ib-bar-title",e.textContent=t.modalTitle,N.appendChild(e)}else b.setAttribute("aria-label","Feedback");let f=document.createElement("div");f.className="ib-bar-body";let v=document.createElement("textarea");v.className="ib-bar-textarea",v.placeholder=(O=t.modalPlaceholder)!=null?O:"What's on your mind?",v.setAttribute("aria-label","Feedback");let x=document.createElement("p");x.className="ib-bar-error";let C=document.createElement("p");C.className="ib-bar-success";let u=document.createElement("button");if(u.type="button",u.className="ib-bar-submit",u.textContent="Send feedback",t.showTitleField===!0){let e=document.createElement("input");e.type="text",e.className="ib-bar-title-input",e.placeholder="Title (optional)",e.setAttribute("aria-label","Feedback title"),f.appendChild(e)}if(f.appendChild(v),t.showEmailField===!0){let e=document.createElement("input");e.type="email",e.className="ib-bar-email",e.placeholder="Your email (optional)",e.setAttribute("aria-label","Email address"),f.appendChild(e)}f.appendChild(x),f.appendChild(C);let B=document.createElement("div");B.className="ib-bar-footer",B.appendChild(u);let I=document.createElement("div");I.className="ib-branding";let w=document.createElement("a");w.href="https://inputbuffer.io",w.target="_blank",w.rel="noopener noreferrer",w.textContent="Powered by inputbuffer.io",I.appendChild(w),B.appendChild(I),f.appendChild(B),b.appendChild(N),b.appendChild(f),r.appendChild(b),r.appendChild(c);function F(e){n=e,b.classList.add("ib-bar-popover--visible"),x.textContent="",C.textContent="",v.focus(),setTimeout(()=>document.addEventListener("click",T),0),document.addEventListener("keydown",z),s("open",{sentiment:e})}function A(){b.classList.contains("ib-bar-popover--visible")&&(b.classList.remove("ib-bar-popover--visible"),document.removeEventListener("click",T),document.removeEventListener("keydown",z),v.value="",s("close"))}function V(){i.classList.remove("ib-bar-btn--active"),d.classList.remove("ib-bar-btn--active"),n=void 0}function T(e){r.contains(e.target)||A()}function z(e){e.key==="Escape"&&A()}async function W(){let e=v.value.trim();if(e.length<10){x.textContent="Please enter at least 10 characters.";return}x.textContent="",u.disabled=!0,u.textContent="Sending\u2026";let g=b.querySelector(".ib-bar-title-input"),y=(g==null?void 0:g.value.trim())||null,E=b.querySelector(".ib-bar-email"),K=(E==null?void 0:E.value.trim())||null;try{let k=await M(t.apiKey,e,K,y,{sentiment:n,target:t.target,source:t.source},t.apiUrl);s("submit",k),C.textContent="Thanks for your feedback!",u.textContent="Send feedback",setTimeout(()=>{A(),V()},2e3)}catch(k){s("error",k instanceof Error?k:new Error("Something went wrong.")),x.textContent=k instanceof Error?k.message:"Something went wrong.",u.disabled=!1,u.textContent="Send feedback"}}function P(e){i.classList.remove("ib-bar-btn--active"),d.classList.remove("ib-bar-btn--active"),e.classList.add("ib-bar-btn--active")}return i.addEventListener("click",()=>{s("vote",{sentiment:"positive"}),P(i),F("positive")}),d.addEventListener("click",()=>{s("vote",{sentiment:"negative"}),P(d),F("negative")}),u.addEventListener("click",W),{element:r,on(e,g){var y;(y=o[e])==null||y.push(g)},destroy(){A(),r.remove()}}}var R=`/* InputBuffer Feedback Bar Styles
+ * .ib-bar-* and .ib-bar-popover* classes are stable public API \u2014 do not rename them.
+ * Developers may target these classes from their own stylesheets to customize the widget.
+ */
+
+.ib-bar-wrapper {
+    --ib-primary: #6366f1;
+    --ib-primary-hover: #4338ca;
+    --ib-background: #f6f6f8;
+    --ib-surface: #ffffff;
+    --ib-text: #111827;
+    --ib-muted: #8d99ae;
+    --ib-border: var(--ib-primary);
+    --ib-focus-color: var(--ib-primary);
+    --ib-input-hover-border: var(--ib-border);
+    --ib-selected: var(--ib-primary);
+    --ib-selected-color: var(--ib-surface);
+    --ib-radius: 2px;
+    --ib-radius-input: 2px;
+
+    position: relative;
+    display: inline-block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.ib-bar-wrapper--fixed {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    z-index: 9998;
+}
+
+.ib-bar {
+    display: inline-flex;
+    align-items: stretch;
+    height: 40px;
+    width: 100%;
+    overflow: hidden;
+
+    background-color: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+}
+
+.ib-bar-popover {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+    width: 320px;
+
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    box-sizing: border-box;
+    z-index: 9999;
+    overflow: hidden;
+}
+
+.ib-bar-popover--visible {
+    display: block;
+}
+
+.ib-bar-header {
+    background: var(--ib-surface);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ib-border);
+}
+
+.ib-bar-body {
+    background: var(--ib-background);
+    padding: 16px;
+}
+
+.ib-bar-title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ib-text);
+    margin: 0;
+}
+
+.ib-bar-textarea {
+    width: 100%;
+    background: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius-input);
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: inherit;
+    color: var(--ib-text);
+    resize: vertical;
+    min-height: 80px;
+    box-sizing: border-box;
+    outline: none;
+    display: block;
+}
+
+.ib-bar-textarea:hover {
+    border-color: var(--ib-input-hover-border);
+}
+
+.ib-bar-textarea:focus {
+    border-color: var(--ib-focus-color);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ib-focus-color) 15%, transparent);
+}
+
+.ib-bar-wrapper .ib-bar-body .ib-bar-title-input,
+.ib-bar-wrapper .ib-bar-body .ib-bar-email {
+    width: 100%;
+    background: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius-input);
+    padding: 8px 12px;
+    font-size: 14px;
+    font-family: inherit;
+    color: var(--ib-text);
+    box-sizing: border-box;
+    outline: none;
+    display: block;
+}
+
+.ib-bar-title-input {
+    margin-bottom: 8px;
+}
+
+.ib-bar-email {
+    margin-top: 8px;
+}
+
+.ib-bar-wrapper .ib-bar-body .ib-bar-title-input:hover,
+.ib-bar-wrapper .ib-bar-body .ib-bar-email:hover {
+    border-color: var(--ib-input-hover-border);
+}
+
+.ib-bar-wrapper .ib-bar-body .ib-bar-title-input:focus,
+.ib-bar-wrapper .ib-bar-body .ib-bar-email:focus {
+    border-color: var(--ib-focus-color);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ib-focus-color) 15%, transparent);
+}
+
+.ib-bar-submit {
+    background: var(--ib-primary);
+    color: #ffffff;
+    border: none;
+    border-radius: var(--ib-radius-input);
+    padding: 8px 16px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-family: inherit;
+    cursor: pointer;
+    display: inline-block;
+    transition: background 0.15s;
+}
+
+.ib-bar-submit:hover {
+    background: var(--ib-primary-hover);
+}
+
+.ib-bar-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.ib-bar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+
+.ib-branding a {
+    font-size: 10px;
+    color: var(--ib-muted);
+    text-decoration: none;
+    letter-spacing: 0.03em;
+}
+
+.ib-branding a:hover {
+    color: var(--ib-primary);
+    text-decoration: underline;
+}
+
+.ib-bar-error,
+.ib-bar-success {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 8px 0 0;
+}
+
+.ib-bar-error:empty,
+.ib-bar-success:empty {
+    display: none;
+}
+
+.ib-bar-error {
+    color: #dc2626;
+}
+
+.ib-bar-success {
+    color: #16a34a;
+}
+
+.ib-bar-label-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+}
+
+.ib-bar-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--ib-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.ib-bar-actions {
+    display: flex;
+    align-items: stretch;
+    background: var(--ib-background);
+    border-left: 1px solid var(--ib-border);
+}
+
+.ib-bar-actions--no-label {
+    border-left: none;
+}
+
+.ib-bar-btn {
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ib-background);
+    border: none;
+    border-right: 1px solid var(--ib-border);
+    border-radius: 0;
+    color: var(--ib-primary);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, transform 0.1s;
+    padding: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.ib-bar-btn--down {
+    border-right: none;
+}
+
+.ib-bar-btn:hover {
+    background: var(--ib-primary);
+    color: var(--ib-surface);
+    transform: scale(1.15);
+}
+
+.ib-bar-btn:active {
+    transform: scale(0.95);
+}
+
+.ib-bar-btn:focus {
+    outline: 1px solid var(--ib-primary);
+    outline-offset: -1px;
+}
+
+.ib-bar-btn--active {
+    background: var(--ib-selected);
+    color: var(--ib-selected-color);
+}
+
+.ib-bar-btn--active:hover {
+    background: var(--ib-primary-hover, var(--ib-primary));
+    color: var(--ib-surface);
+    transform: scale(1.1);
+}
+
+/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+@media (prefers-color-scheme: dark) {
+    .ib-bar-wrapper:not(.ib-theme-light),
+    .ib-bar-wrapper.ib-theme-dark {
+        --ib-primary: #3A5244;
+        --ib-primary-hover: #4E6857;
+        --ib-background: #25272B;
+        --ib-surface: #2C3630;
+        --ib-text: #E5E7EB;
+        --ib-muted: #9CA3AF;
+        --ib-border: #363840;
+        --ib-focus-color: #7B9B82;
+        --ib-input-hover-border: rgba(255, 255, 255, 0.2);
+        --ib-selected: #7B9B82;
+        --ib-selected-color: #1a2420;
+        --ib-radius: 8px;
+        --ib-radius-input: 4px;
+    }
+}
+
+.ib-bar-wrapper.ib-theme-dark {
+    --ib-primary: #3A5244;
+    --ib-primary-hover: #4E6857;
+    --ib-background: #25272B;
+    --ib-surface: #2C3630;
+    --ib-text: #E5E7EB;
+    --ib-muted: #9CA3AF;
+    --ib-border: #363840;
+    --ib-focus-color: #7B9B82;
+    --ib-input-hover-border: rgba(255, 255, 255, 0.2);
+    --ib-selected: #7B9B82;
+    --ib-selected-color: #1a2420;
+    --ib-radius: 8px;
+    --ib-radius-input: 4px;
+}
+`;function D(){if(typeof document=="undefined"||document.getElementById("ib-bar-styles"))return;let t=document.createElement("style");t.id="ib-bar-styles",t.textContent=R,document.head.appendChild(t)}function $(t){return t.injectStyles!==!1&&D(),L(t)}var _=class extends HTMLElement{constructor(){super(...arguments);this._bar=null}connectedCallback(){var a,c,m,l,p,i,d;let o=this.getAttribute("api-key");if(!o)return;let s=this.getAttribute("inject-styles");(s===null?!0:s!=="false")&&D();let h=this.getAttribute("placement");this._bar=L({apiKey:o,apiUrl:(a=this.getAttribute("api-url"))!=null?a:void 0,label:(c=this.getAttribute("label"))!=null?c:void 0,placement:h==="fixed"?"fixed":"inline",theme:{primary:(m=this.getAttribute("theme-primary"))!=null?m:void 0,background:(l=this.getAttribute("theme-background"))!=null?l:void 0,text:(p=this.getAttribute("theme-text"))!=null?p:void 0,selected:(i=this.getAttribute("theme-selected"))!=null?i:void 0,selectedColor:(d=this.getAttribute("theme-selected-color"))!=null?d:void 0}}),this.appendChild(this._bar.element)}disconnectedCallback(){var o;(o=this._bar)==null||o.destroy(),this._bar=null}};typeof customElements!="undefined"&&!customElements.get("inputbuffer-feedback")&&customElements.define("inputbuffer-feedback",_);var J={createBar:$,version:S};typeof window!="undefined"&&(window.InputBufferIO=J);export{J as InputBufferIO,$ as createBar};

package/dist/bar.js

@@ -0,0 +1,324 @@
+"use strict";(()=>{var S="0.1.0",G="https://inputbuffer.io/api/v0/inputs";async function M(t,n,o,s,r,h){var p;let a={description:n};if(s&&(a.title=s),o&&(a.contactEmail=o),r!=null&&r.sentiment&&(a.sentiment=r.sentiment),r!=null&&r.source&&(a.source=r.source),r!=null&&r.target){let i=r.target;a.targets=[{target_type:i.type,...i.targetId&&{target_id:i.targetId},...i.displayName&&{display_name:i.displayName},...i.dedupKey&&{dedup_key:i.dedupKey},metadata:i.metadata}]}let c=new AbortController,m=setTimeout(()=>c.abort(),1e4),l;try{l=await fetch(h!=null?h:G,{method:"POST",headers:{Authorization:`Bearer ${t}`,"Content-Type":"application/json","X-IB-Client":`inputbuffer-widget/${S} (javascript)`},body:JSON.stringify(a),credentials:"omit",signal:c.signal})}finally{clearTimeout(m)}if(!l.ok){let i=await l.json().catch(()=>({}));throw new Error(((p=i==null?void 0:i.error)==null?void 0:p.message)||"Submission failed. Please try again.")}return l.json()}function H(t){let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("width","18"),n.setAttribute("height","18"),n.setAttribute("fill","currentColor"),n.setAttribute("aria-hidden","true"),n.style.display="block";let o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("d",t),n.appendChild(o),n}var U="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h2v12H1z",q="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L10.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm0 12l-4.34 4.34L12 14H3v-2l3-7h9v10zm4-12h2v12h-2z";function L(t){var j,O;let n,o={vote:[],open:[],submit:[],close:[],error:[]};function s(e,g){var y;(y=o[e])==null||y.forEach(E=>E(g))}let r=document.createElement("div"),h=t.colorScheme==="dark"?" ib-theme-dark":t.colorScheme==="light"?" ib-theme-light":"";r.className="ib-bar-wrapper"+(t.placement==="fixed"?" ib-bar-wrapper--fixed":"")+h;let{theme:a={}}=t;a.primary&&r.style.setProperty("--ib-primary",a.primary),a.background&&r.style.setProperty("--ib-background",a.background),a.surface&&r.style.setProperty("--ib-surface",a.surface),a.text&&r.style.setProperty("--ib-text",a.text),a.selected&&r.style.setProperty("--ib-selected",a.selected),a.selectedColor&&r.style.setProperty("--ib-selected-color",a.selectedColor);let c=document.createElement("div");c.className="ib-bar";let m=document.createElement("div");m.className="ib-bar-label-area";let l=document.createElement("span");l.className="ib-bar-label",l.textContent=(j=t.label)!=null?j:"Was this helpful?",m.appendChild(l);let p=document.createElement("div");p.className="ib-bar-actions"+(t.showLabel===!1?" ib-bar-actions--no-label":"");let i=document.createElement("button");i.type="button",i.className="ib-bar-btn ib-bar-btn--up",i.setAttribute("aria-label","Yes"),i.appendChild(H(U));let d=document.createElement("button");d.type="button",d.className="ib-bar-btn ib-bar-btn--down",d.setAttribute("aria-label","No"),d.appendChild(H(q)),p.appendChild(i),p.appendChild(d),t.showLabel!==!1&&c.appendChild(m),c.appendChild(p);let b=document.createElement("div");b.className="ib-bar-popover",b.setAttribute("role","dialog"),b.setAttribute("aria-modal","false");let N=document.createElement("div");if(N.className="ib-bar-header",t.modalTitle){b.setAttribute("aria-labelledby","ib-bar-title");let e=document.createElement("p");e.id="ib-bar-title",e.className="ib-bar-title",e.textContent=t.modalTitle,N.appendChild(e)}else b.setAttribute("aria-label","Feedback");let f=document.createElement("div");f.className="ib-bar-body";let v=document.createElement("textarea");v.className="ib-bar-textarea",v.placeholder=(O=t.modalPlaceholder)!=null?O:"What's on your mind?",v.setAttribute("aria-label","Feedback");let x=document.createElement("p");x.className="ib-bar-error";let C=document.createElement("p");C.className="ib-bar-success";let u=document.createElement("button");if(u.type="button",u.className="ib-bar-submit",u.textContent="Send feedback",t.showTitleField===!0){let e=document.createElement("input");e.type="text",e.className="ib-bar-title-input",e.placeholder="Title (optional)",e.setAttribute("aria-label","Feedback title"),f.appendChild(e)}if(f.appendChild(v),t.showEmailField===!0){let e=document.createElement("input");e.type="email",e.className="ib-bar-email",e.placeholder="Your email (optional)",e.setAttribute("aria-label","Email address"),f.appendChild(e)}f.appendChild(x),f.appendChild(C);let B=document.createElement("div");B.className="ib-bar-footer",B.appendChild(u);let I=document.createElement("div");I.className="ib-branding";let w=document.createElement("a");w.href="https://inputbuffer.io",w.target="_blank",w.rel="noopener noreferrer",w.textContent="Powered by inputbuffer.io",I.appendChild(w),B.appendChild(I),f.appendChild(B),b.appendChild(N),b.appendChild(f),r.appendChild(b),r.appendChild(c);function F(e){n=e,b.classList.add("ib-bar-popover--visible"),x.textContent="",C.textContent="",v.focus(),setTimeout(()=>document.addEventListener("click",T),0),document.addEventListener("keydown",z),s("open",{sentiment:e})}function A(){b.classList.contains("ib-bar-popover--visible")&&(b.classList.remove("ib-bar-popover--visible"),document.removeEventListener("click",T),document.removeEventListener("keydown",z),v.value="",s("close"))}function V(){i.classList.remove("ib-bar-btn--active"),d.classList.remove("ib-bar-btn--active"),n=void 0}function T(e){r.contains(e.target)||A()}function z(e){e.key==="Escape"&&A()}async function W(){let e=v.value.trim();if(e.length<10){x.textContent="Please enter at least 10 characters.";return}x.textContent="",u.disabled=!0,u.textContent="Sending\u2026";let g=b.querySelector(".ib-bar-title-input"),y=(g==null?void 0:g.value.trim())||null,E=b.querySelector(".ib-bar-email"),K=(E==null?void 0:E.value.trim())||null;try{let k=await M(t.apiKey,e,K,y,{sentiment:n,target:t.target,source:t.source},t.apiUrl);s("submit",k),C.textContent="Thanks for your feedback!",u.textContent="Send feedback",setTimeout(()=>{A(),V()},2e3)}catch(k){s("error",k instanceof Error?k:new Error("Something went wrong.")),x.textContent=k instanceof Error?k.message:"Something went wrong.",u.disabled=!1,u.textContent="Send feedback"}}function P(e){i.classList.remove("ib-bar-btn--active"),d.classList.remove("ib-bar-btn--active"),e.classList.add("ib-bar-btn--active")}return i.addEventListener("click",()=>{s("vote",{sentiment:"positive"}),P(i),F("positive")}),d.addEventListener("click",()=>{s("vote",{sentiment:"negative"}),P(d),F("negative")}),u.addEventListener("click",W),{element:r,on(e,g){var y;(y=o[e])==null||y.push(g)},destroy(){A(),r.remove()}}}var R=`/* InputBuffer Feedback Bar Styles
+ * .ib-bar-* and .ib-bar-popover* classes are stable public API \u2014 do not rename them.
+ * Developers may target these classes from their own stylesheets to customize the widget.
+ */
+
+.ib-bar-wrapper {
+    --ib-primary: #6366f1;
+    --ib-primary-hover: #4338ca;
+    --ib-background: #f6f6f8;
+    --ib-surface: #ffffff;
+    --ib-text: #111827;
+    --ib-muted: #8d99ae;
+    --ib-border: var(--ib-primary);
+    --ib-focus-color: var(--ib-primary);
+    --ib-input-hover-border: var(--ib-border);
+    --ib-selected: var(--ib-primary);
+    --ib-selected-color: var(--ib-surface);
+    --ib-radius: 2px;
+    --ib-radius-input: 2px;
+
+    position: relative;
+    display: inline-block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.ib-bar-wrapper--fixed {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    z-index: 9998;
+}
+
+.ib-bar {
+    display: inline-flex;
+    align-items: stretch;
+    height: 40px;
+    width: 100%;
+    overflow: hidden;
+
+    background-color: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+}
+
+.ib-bar-popover {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+    width: 320px;
+
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    box-sizing: border-box;
+    z-index: 9999;
+    overflow: hidden;
+}
+
+.ib-bar-popover--visible {
+    display: block;
+}
+
+.ib-bar-header {
+    background: var(--ib-surface);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ib-border);
+}
+
+.ib-bar-body {
+    background: var(--ib-background);
+    padding: 16px;
+}
+
+.ib-bar-title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ib-text);
+    margin: 0;
+}
+
+.ib-bar-textarea {
+    width: 100%;
+    background: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius-input);
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: inherit;
+    color: var(--ib-text);
+    resize: vertical;
+    min-height: 80px;
+    box-sizing: border-box;
+    outline: none;
+    display: block;
+}
+
+.ib-bar-textarea:hover {
+    border-color: var(--ib-input-hover-border);
+}
+
+.ib-bar-textarea:focus {
+    border-color: var(--ib-focus-color);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ib-focus-color) 15%, transparent);
+}
+
+.ib-bar-wrapper .ib-bar-body .ib-bar-title-input,
+.ib-bar-wrapper .ib-bar-body .ib-bar-email {
+    width: 100%;
+    background: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius-input);
+    padding: 8px 12px;
+    font-size: 14px;
+    font-family: inherit;
+    color: var(--ib-text);
+    box-sizing: border-box;
+    outline: none;
+    display: block;
+}
+
+.ib-bar-title-input {
+    margin-bottom: 8px;
+}
+
+.ib-bar-email {
+    margin-top: 8px;
+}
+
+.ib-bar-wrapper .ib-bar-body .ib-bar-title-input:hover,
+.ib-bar-wrapper .ib-bar-body .ib-bar-email:hover {
+    border-color: var(--ib-input-hover-border);
+}
+
+.ib-bar-wrapper .ib-bar-body .ib-bar-title-input:focus,
+.ib-bar-wrapper .ib-bar-body .ib-bar-email:focus {
+    border-color: var(--ib-focus-color);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ib-focus-color) 15%, transparent);
+}
+
+.ib-bar-submit {
+    background: var(--ib-primary);
+    color: #ffffff;
+    border: none;
+    border-radius: var(--ib-radius-input);
+    padding: 8px 16px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-family: inherit;
+    cursor: pointer;
+    display: inline-block;
+    transition: background 0.15s;
+}
+
+.ib-bar-submit:hover {
+    background: var(--ib-primary-hover);
+}
+
+.ib-bar-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.ib-bar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+
+.ib-branding a {
+    font-size: 10px;
+    color: var(--ib-muted);
+    text-decoration: none;
+    letter-spacing: 0.03em;
+}
+
+.ib-branding a:hover {
+    color: var(--ib-primary);
+    text-decoration: underline;
+}
+
+.ib-bar-error,
+.ib-bar-success {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 8px 0 0;
+}
+
+.ib-bar-error:empty,
+.ib-bar-success:empty {
+    display: none;
+}
+
+.ib-bar-error {
+    color: #dc2626;
+}
+
+.ib-bar-success {
+    color: #16a34a;
+}
+
+.ib-bar-label-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+}
+
+.ib-bar-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--ib-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.ib-bar-actions {
+    display: flex;
+    align-items: stretch;
+    background: var(--ib-background);
+    border-left: 1px solid var(--ib-border);
+}
+
+.ib-bar-actions--no-label {
+    border-left: none;
+}
+
+.ib-bar-btn {
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ib-background);
+    border: none;
+    border-right: 1px solid var(--ib-border);
+    border-radius: 0;
+    color: var(--ib-primary);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, transform 0.1s;
+    padding: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.ib-bar-btn--down {
+    border-right: none;
+}
+
+.ib-bar-btn:hover {
+    background: var(--ib-primary);
+    color: var(--ib-surface);
+    transform: scale(1.15);
+}
+
+.ib-bar-btn:active {
+    transform: scale(0.95);
+}
+
+.ib-bar-btn:focus {
+    outline: 1px solid var(--ib-primary);
+    outline-offset: -1px;
+}
+
+.ib-bar-btn--active {
+    background: var(--ib-selected);
+    color: var(--ib-selected-color);
+}
+
+.ib-bar-btn--active:hover {
+    background: var(--ib-primary-hover, var(--ib-primary));
+    color: var(--ib-surface);
+    transform: scale(1.1);
+}
+
+/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+@media (prefers-color-scheme: dark) {
+    .ib-bar-wrapper:not(.ib-theme-light),
+    .ib-bar-wrapper.ib-theme-dark {
+        --ib-primary: #3A5244;
+        --ib-primary-hover: #4E6857;
+        --ib-background: #25272B;
+        --ib-surface: #2C3630;
+        --ib-text: #E5E7EB;
+        --ib-muted: #9CA3AF;
+        --ib-border: #363840;
+        --ib-focus-color: #7B9B82;
+        --ib-input-hover-border: rgba(255, 255, 255, 0.2);
+        --ib-selected: #7B9B82;
+        --ib-selected-color: #1a2420;
+        --ib-radius: 8px;
+        --ib-radius-input: 4px;
+    }
+}
+
+.ib-bar-wrapper.ib-theme-dark {
+    --ib-primary: #3A5244;
+    --ib-primary-hover: #4E6857;
+    --ib-background: #25272B;
+    --ib-surface: #2C3630;
+    --ib-text: #E5E7EB;
+    --ib-muted: #9CA3AF;
+    --ib-border: #363840;
+    --ib-focus-color: #7B9B82;
+    --ib-input-hover-border: rgba(255, 255, 255, 0.2);
+    --ib-selected: #7B9B82;
+    --ib-selected-color: #1a2420;
+    --ib-radius: 8px;
+    --ib-radius-input: 4px;
+}
+`;function D(){if(typeof document=="undefined"||document.getElementById("ib-bar-styles"))return;let t=document.createElement("style");t.id="ib-bar-styles",t.textContent=R,document.head.appendChild(t)}function $(t){return t.injectStyles!==!1&&D(),L(t)}var _=class extends HTMLElement{constructor(){super(...arguments);this._bar=null}connectedCallback(){var a,c,m,l,p,i,d;let o=this.getAttribute("api-key");if(!o)return;let s=this.getAttribute("inject-styles");(s===null?!0:s!=="false")&&D();let h=this.getAttribute("placement");this._bar=L({apiKey:o,apiUrl:(a=this.getAttribute("api-url"))!=null?a:void 0,label:(c=this.getAttribute("label"))!=null?c:void 0,placement:h==="fixed"?"fixed":"inline",theme:{primary:(m=this.getAttribute("theme-primary"))!=null?m:void 0,background:(l=this.getAttribute("theme-background"))!=null?l:void 0,text:(p=this.getAttribute("theme-text"))!=null?p:void 0,selected:(i=this.getAttribute("theme-selected"))!=null?i:void 0,selectedColor:(d=this.getAttribute("theme-selected-color"))!=null?d:void 0}}),this.appendChild(this._bar.element)}disconnectedCallback(){var o;(o=this._bar)==null||o.destroy(),this._bar=null}};typeof customElements!="undefined"&&!customElements.get("inputbuffer-feedback")&&customElements.define("inputbuffer-feedback",_);var J={createBar:$,version:S};typeof window!="undefined"&&(window.InputBufferIO=J);})();

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import type { WidgetConfig, OpenOptions, WidgetInstance, FeedbackBarConfig, FeedbackBarInstance } from './types.js';
+declare function createModal(config: WidgetConfig): WidgetInstance;
+declare function createBar(config: FeedbackBarConfig): FeedbackBarInstance;
+declare const InputBufferIO: {
+    createModal: typeof createModal;
+    createBar: typeof createBar;
+    version: string;
+};
+declare global {
+    interface Window {
+        InputBufferIO: typeof InputBufferIO;
+    }
+    interface HTMLElementTagNameMap {
+        'inputbuffer-feedback': HTMLElement;
+    }
+}
+export type { WidgetConfig, OpenOptions, WidgetInstance, FeedbackBarConfig, FeedbackBarInstance };
+export { InputBufferIO };