@inputbuffer/feedback 0.1.0

package/dist/widget.js

@@ -0,0 +1,632 @@
+"use strict";(()=>{function R(e){let t=document.getElementById("ib-modal");if(!t)return;let{theme:r={}}=e;r.primary&&t.style.setProperty("--ib-primary",r.primary),r.background&&t.style.setProperty("--ib-background",r.background),r.surface&&t.style.setProperty("--ib-surface",r.surface),r.text&&t.style.setProperty("--ib-text",r.text),r.selected&&t.style.setProperty("--ib-selected",r.selected),r.selectedColor&&t.style.setProperty("--ib-selected-color",r.selectedColor)}var W="0.1.0",X="https://inputbuffer.io/api/v0/inputs";async function j(e,t,r,d,o,p){var h;let l={description:t};if(d&&(l.title=d),r&&(l.contactEmail=r),o!=null&&o.sentiment&&(l.sentiment=o.sentiment),o!=null&&o.source&&(l.source=o.source),o!=null&&o.target){let n=o.target;l.targets=[{target_type:n.type,...n.targetId&&{target_id:n.targetId},...n.displayName&&{display_name:n.displayName},...n.dedupKey&&{dedup_key:n.dedupKey},metadata:n.metadata}]}let u=new AbortController,f=setTimeout(()=>u.abort(),1e4),c;try{c=await fetch(p!=null?p:X,{method:"POST",headers:{Authorization:`Bearer ${e}`,"Content-Type":"application/json","X-IB-Client":`inputbuffer-widget/${W} (javascript)`},body:JSON.stringify(l),credentials:"omit",signal:u.signal})}finally{clearTimeout(f)}if(!c.ok){let n=await c.json().catch(()=>({}));throw new Error(((h=n==null?void 0:n.error)==null?void 0:h.message)||"Submission failed. Please try again.")}return c.json()}function K(e){let t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("viewBox","0 0 24 24"),t.setAttribute("width","18"),t.setAttribute("height","18"),t.setAttribute("fill","currentColor"),t.setAttribute("aria-hidden","true"),t.style.display="block";let r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("d",e),t.appendChild(r),t}var Q="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",Z="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 U(e){let t=null,r,d,o=null,p=null,l=null,u=null,f=null,c=null,h=null,n=null,g=null,v=[],z=[],C=[];function B(i){if(i.key==="Escape"){L();return}if(i.key==="Tab"&&t){let b=Array.from(t.querySelectorAll('button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));if(b.length===0)return;let x=b[0],m=b[b.length-1];i.shiftKey?document.activeElement===x&&(i.preventDefault(),m.focus()):document.activeElement===m&&(i.preventDefault(),x.focus())}}async function H(){var b,x;if(!p||!f)return;let i=p.value.trim();if(i.length<10){c&&(c.textContent="Please enter at least 10 characters.",c.style.display="block");return}c&&(c.style.display="none"),f.disabled=!0,f.textContent="Sending\u2026";try{let m=(u==null?void 0:u.value.trim())||((b=r==null?void 0:r.prefill)==null?void 0:b.email)||null,y=(l==null?void 0:l.value.trim())||null,A=d!=null?d:r==null?void 0:r.sentiment,I=await j(e.apiKey,i,m||null,y,{...r,sentiment:A,source:(x=r==null?void 0:r.source)!=null?x:e.source},e.apiUrl);h&&(h.textContent="Thanks for your feedback!",h.style.display="block"),v.forEach(T=>T(I)),o=setTimeout(()=>L(),2e3)}catch(m){let y=m instanceof Error?m:new Error("Unknown error");c&&(c.textContent="Something went wrong. Please try again.",c.style.display="block"),C.forEach(A=>A(y)),f.disabled=!1,f.textContent="Send feedback"}}function S(){let i=document.createElement("div");i.id="ib-overlay";let b=document.createElement("div");b.id="ib-modal",e.colorScheme==="dark"?b.classList.add("ib-theme-dark"):e.colorScheme==="light"&&b.classList.add("ib-theme-light"),b.setAttribute("role","dialog"),b.setAttribute("aria-modal","true");let x=document.createElement("div");if(x.id="ib-modal-header",g=x,e.title?(b.setAttribute("aria-labelledby","ib-title"),n=document.createElement("h2"),n.id="ib-title",n.className="ib-modal-title",n.textContent=e.title,x.appendChild(n)):b.setAttribute("aria-label","Feedback"),e.showSentiment){let k,a,w=document.createElement("div");w.className="ib-modal-sentiment",k=document.createElement("button"),k.type="button",k.className="ib-modal-thumb ib-modal-thumb--up",k.setAttribute("aria-label","Helpful"),k.appendChild(K(Q)),a=document.createElement("button"),a.type="button",a.className="ib-modal-thumb ib-modal-thumb--down",a.setAttribute("aria-label","Not helpful"),a.appendChild(K(Z)),k.addEventListener("click",()=>{k.classList.add("ib-modal-thumb--active"),a.classList.remove("ib-modal-thumb--active"),d="positive"}),a.addEventListener("click",()=>{a.classList.add("ib-modal-thumb--active"),k.classList.remove("ib-modal-thumb--active"),d="negative"}),w.appendChild(k),w.appendChild(a),x.appendChild(w)}let m=document.createElement("button");m.id="ib-close",m.className="ib-modal-close",m.textContent="\xD7",m.setAttribute("aria-label","Close feedback form"),m.addEventListener("click",L),x.appendChild(m);let y=document.createElement("div");y.id="ib-modal-body",p=document.createElement("textarea"),p.id="ib-textarea",p.className="ib-modal-textarea",p.placeholder=e.placeholder||"What's on your mind?",p.setAttribute("aria-label","Feedback"),f=document.createElement("button"),f.id="ib-submit",f.className="ib-modal-submit",f.textContent="Send feedback",f.addEventListener("click",H),h=document.createElement("p"),h.id="ib-success",h.className="ib-modal-success",c=document.createElement("p"),c.id="ib-error",c.className="ib-modal-error",e.showTitleField===!0&&(l=document.createElement("input"),l.id="ib-title-input",l.className="ib-modal-title-input",l.type="text",l.placeholder="Title (optional)",l.setAttribute("aria-label","Feedback title"),y.appendChild(l)),y.appendChild(p),e.showEmailField===!0&&(u=document.createElement("input"),u.id="ib-email",u.className="ib-modal-email",u.type="email",u.placeholder="Your email (optional)",u.setAttribute("aria-label","Email address"),y.appendChild(u)),y.appendChild(c),y.appendChild(h);let A=document.createElement("div");A.className="ib-modal-footer",A.appendChild(f);let I=document.createElement("div");I.className="ib-branding";let T=document.createElement("a");return T.href="https://inputbuffer.io",T.target="_blank",T.rel="noopener noreferrer",T.textContent="Powered by inputbuffer.io",I.appendChild(T),A.appendChild(I),y.appendChild(A),b.appendChild(x),b.appendChild(y),i.appendChild(b),i.addEventListener("click",k=>{k.target===i&&L()}),document.addEventListener("keydown",B),i}function E(i){var b,x;if(!t){if(r=i,t=S(),document.body.appendChild(t),R(e),i!=null&&i.title){if(n)n.textContent=i.title;else if(g){let m=t.querySelector("#ib-modal");m.removeAttribute("aria-label"),m.setAttribute("aria-labelledby","ib-title"),n=document.createElement("h2"),n.id="ib-title",n.className="ib-modal-title",n.textContent=i.title,g.prepend(n)}}if(i!=null&&i.sentiment){d=i.sentiment;let m=t.querySelector(".ib-modal-thumb--up"),y=t.querySelector(".ib-modal-thumb--down");i.sentiment==="positive"?m==null||m.classList.add("ib-modal-thumb--active"):i.sentiment==="negative"&&(y==null||y.classList.add("ib-modal-thumb--active"))}p&&((b=i==null?void 0:i.prefill)!=null&&b.description)&&(p.value=i.prefill.description),u&&((x=i==null?void 0:i.prefill)!=null&&x.email)&&(u.value=i.prefill.email),p==null||p.focus()}}function L(){t&&(o!==null&&(clearTimeout(o),o=null),document.removeEventListener("keydown",B),t.remove(),t=null,p=null,l=null,u=null,f=null,c=null,h=null,n=null,g=null,r=void 0,d=void 0,z.forEach(i=>i()))}function P(i,b){i==="submit"?v.push(b):i==="close"?z.push(b):i==="error"&&C.push(b)}function N(){L()}return{open:E,close:L,on:P,destroy:N}}function _(e){let t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("viewBox","0 0 24 24"),t.setAttribute("width","18"),t.setAttribute("height","18"),t.setAttribute("fill","currentColor"),t.setAttribute("aria-hidden","true"),t.style.display="block";let r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("d",e),t.appendChild(r),t}var ee="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",te="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 D(e){var T,k;let t,r={vote:[],open:[],submit:[],close:[],error:[]};function d(a,w){var M;(M=r[a])==null||M.forEach(O=>O(w))}let o=document.createElement("div"),p=e.colorScheme==="dark"?" ib-theme-dark":e.colorScheme==="light"?" ib-theme-light":"";o.className="ib-bar-wrapper"+(e.placement==="fixed"?" ib-bar-wrapper--fixed":"")+p;let{theme:l={}}=e;l.primary&&o.style.setProperty("--ib-primary",l.primary),l.background&&o.style.setProperty("--ib-background",l.background),l.surface&&o.style.setProperty("--ib-surface",l.surface),l.text&&o.style.setProperty("--ib-text",l.text),l.selected&&o.style.setProperty("--ib-selected",l.selected),l.selectedColor&&o.style.setProperty("--ib-selected-color",l.selectedColor);let u=document.createElement("div");u.className="ib-bar";let f=document.createElement("div");f.className="ib-bar-label-area";let c=document.createElement("span");c.className="ib-bar-label",c.textContent=(T=e.label)!=null?T:"Was this helpful?",f.appendChild(c);let h=document.createElement("div");h.className="ib-bar-actions"+(e.showLabel===!1?" ib-bar-actions--no-label":"");let n=document.createElement("button");n.type="button",n.className="ib-bar-btn ib-bar-btn--up",n.setAttribute("aria-label","Yes"),n.appendChild(_(ee));let g=document.createElement("button");g.type="button",g.className="ib-bar-btn ib-bar-btn--down",g.setAttribute("aria-label","No"),g.appendChild(_(te)),h.appendChild(n),h.appendChild(g),e.showLabel!==!1&&u.appendChild(f),u.appendChild(h);let v=document.createElement("div");v.className="ib-bar-popover",v.setAttribute("role","dialog"),v.setAttribute("aria-modal","false");let z=document.createElement("div");if(z.className="ib-bar-header",e.modalTitle){v.setAttribute("aria-labelledby","ib-bar-title");let a=document.createElement("p");a.id="ib-bar-title",a.className="ib-bar-title",a.textContent=e.modalTitle,z.appendChild(a)}else v.setAttribute("aria-label","Feedback");let C=document.createElement("div");C.className="ib-bar-body";let B=document.createElement("textarea");B.className="ib-bar-textarea",B.placeholder=(k=e.modalPlaceholder)!=null?k:"What's on your mind?",B.setAttribute("aria-label","Feedback");let H=document.createElement("p");H.className="ib-bar-error";let S=document.createElement("p");S.className="ib-bar-success";let E=document.createElement("button");if(E.type="button",E.className="ib-bar-submit",E.textContent="Send feedback",e.showTitleField===!0){let a=document.createElement("input");a.type="text",a.className="ib-bar-title-input",a.placeholder="Title (optional)",a.setAttribute("aria-label","Feedback title"),C.appendChild(a)}if(C.appendChild(B),e.showEmailField===!0){let a=document.createElement("input");a.type="email",a.className="ib-bar-email",a.placeholder="Your email (optional)",a.setAttribute("aria-label","Email address"),C.appendChild(a)}C.appendChild(H),C.appendChild(S);let L=document.createElement("div");L.className="ib-bar-footer",L.appendChild(E);let P=document.createElement("div");P.className="ib-branding";let N=document.createElement("a");N.href="https://inputbuffer.io",N.target="_blank",N.rel="noopener noreferrer",N.textContent="Powered by inputbuffer.io",P.appendChild(N),L.appendChild(P),C.appendChild(L),v.appendChild(z),v.appendChild(C),o.appendChild(v),o.appendChild(u);function i(a){t=a,v.classList.add("ib-bar-popover--visible"),H.textContent="",S.textContent="",B.focus(),setTimeout(()=>document.addEventListener("click",m),0),document.addEventListener("keydown",y),d("open",{sentiment:a})}function b(){v.classList.contains("ib-bar-popover--visible")&&(v.classList.remove("ib-bar-popover--visible"),document.removeEventListener("click",m),document.removeEventListener("keydown",y),B.value="",d("close"))}function x(){n.classList.remove("ib-bar-btn--active"),g.classList.remove("ib-bar-btn--active"),t=void 0}function m(a){o.contains(a.target)||b()}function y(a){a.key==="Escape"&&b()}async function A(){let a=B.value.trim();if(a.length<10){H.textContent="Please enter at least 10 characters.";return}H.textContent="",E.disabled=!0,E.textContent="Sending\u2026";let w=v.querySelector(".ib-bar-title-input"),M=(w==null?void 0:w.value.trim())||null,O=v.querySelector(".ib-bar-email"),J=(O==null?void 0:O.value.trim())||null;try{let F=await j(e.apiKey,a,J,M,{sentiment:t,target:e.target,source:e.source},e.apiUrl);d("submit",F),S.textContent="Thanks for your feedback!",E.textContent="Send feedback",setTimeout(()=>{b(),x()},2e3)}catch(F){d("error",F instanceof Error?F:new Error("Something went wrong.")),H.textContent=F instanceof Error?F.message:"Something went wrong.",E.disabled=!1,E.textContent="Send feedback"}}function I(a){n.classList.remove("ib-bar-btn--active"),g.classList.remove("ib-bar-btn--active"),a.classList.add("ib-bar-btn--active")}return n.addEventListener("click",()=>{d("vote",{sentiment:"positive"}),I(n),i("positive")}),g.addEventListener("click",()=>{d("vote",{sentiment:"negative"}),I(g),i("negative")}),E.addEventListener("click",A),{element:o,on(a,w){var M;(M=r[a])==null||M.push(w)},destroy(){b(),o.remove()}}}var V=`/* InputBuffer Modal Styles
+ * All #ib-* IDs are stable public API \u2014 do not rename them.
+ * Developers may target these IDs from their own stylesheets to customize the widget.
+ */
+
+#ib-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 2147483647;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#ib-modal {
+    --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;
+
+    color: var(--ib-text);
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius);
+    width: 100%;
+    max-width: 480px;
+    margin: 16px;
+    position: relative;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+#ib-modal-header {
+    background: var(--ib-surface);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ib-border);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+#ib-modal-body {
+    background-color: var(--ib-background);
+    padding: 16px;
+}
+
+#ib-title,
+.ib-modal-title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 0;
+    color: var(--ib-muted);
+    flex: 1;
+}
+
+#ib-textarea,
+.ib-modal-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: 100px;
+    box-sizing: border-box;
+    outline: none;
+    display: block;
+}
+
+#ib-textarea:hover,
+.ib-modal-textarea:hover {
+    border-color: var(--ib-input-hover-border);
+}
+
+#ib-textarea:focus,
+.ib-modal-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-modal-body #ib-title-input,
+#ib-modal-body .ib-modal-title-input,
+#ib-modal-body #ib-email,
+#ib-modal-body .ib-modal-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-title-input,
+.ib-modal-title-input {
+    margin-bottom: 10px;
+}
+
+#ib-email,
+.ib-modal-email {
+    margin-top: 10px;
+}
+
+#ib-modal-body #ib-title-input:hover,
+#ib-modal-body .ib-modal-title-input:hover,
+#ib-modal-body #ib-email:hover,
+#ib-modal-body .ib-modal-email:hover {
+    border-color: var(--ib-input-hover-border);
+}
+
+#ib-modal-body #ib-title-input:focus,
+#ib-modal-body .ib-modal-title-input:focus,
+#ib-modal-body #ib-email:focus,
+#ib-modal-body .ib-modal-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-submit,
+.ib-modal-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-submit:hover,
+.ib-modal-submit:hover {
+    background: var(--ib-primary-hover);
+}
+
+#ib-submit:disabled,
+.ib-modal-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+#ib-close,
+.ib-modal-close {
+    background: none;
+    border: none;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--ib-muted);
+    padding: 2px 6px;
+    margin: 0;
+    border-radius: var(--ib-radius-input);
+    flex-shrink: 0;
+}
+
+#ib-close:hover,
+.ib-modal-close:hover {
+    color: var(--ib-primary);
+}
+
+#ib-success,
+.ib-modal-success {
+    color: #16a34a;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 8px 0 0;
+    display: none;
+}
+
+.ib-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 12px;
+}
+
+.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-error,
+.ib-modal-error {
+    color: #dc2626;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 8px 0 0;
+    display: none;
+}
+
+/* Modal sentiment thumbs */
+
+.ib-modal-sentiment {
+    display: flex;
+    gap: 4px;
+}
+
+.ib-modal-thumb {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ib-background);
+    border: 1px solid var(--ib-border);
+    border-radius: var(--ib-radius-input);
+    color: var(--ib-primary);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    padding: 0;
+    margin: 0;
+    flex-shrink: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+}
+
+.ib-modal-thumb:hover {
+    background: var(--ib-primary);
+    color: var(--ib-surface);
+}
+
+.ib-modal-thumb:focus {
+    outline: 1px solid var(--ib-primary);
+    outline-offset: -1px;
+}
+
+.ib-modal-thumb--active {
+    background: var(--ib-selected);
+    color: var(--ib-selected-color);
+}
+
+.ib-modal-thumb--active:hover {
+    background: var(--ib-primary-hover);
+}
+
+/* \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-modal:not(.ib-theme-light),
+    #ib-modal.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-radius: 8px;
+        --ib-radius-input: 4px;
+    }
+}
+
+#ib-modal.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-radius: 8px;
+    --ib-radius-input: 4px;
+}
+`;var q=`/* 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;
+}
+`;var s=typeof document!="undefined"?document.currentScript:null;function ae(){if(typeof document=="undefined"||document.getElementById("ib-modal-styles"))return;let e=document.createElement("style");e.id="ib-modal-styles",e.textContent=V,document.head.appendChild(e)}function G(){if(typeof document=="undefined"||document.getElementById("ib-bar-styles"))return;let e=document.createElement("style");e.id="ib-bar-styles",e.textContent=q,document.head.appendChild(e)}function Y(e){e.injectStyles!==!1&&ae();let t=U(e),r=null,d=null;return e.attachTo&&(r=document.querySelector(e.attachTo),r&&(d=()=>t.open(),r.addEventListener("click",d))),{open:o=>t.open(o),close:()=>t.close(),on:(o,p)=>t.on(o,p),destroy:()=>{r&&d&&(r.removeEventListener("click",d),r=null,d=null),t.destroy()}}}function oe(e){return e.injectStyles!==!1&&G(),D(e)}if(typeof HTMLElement!="undefined"){class e extends HTMLElement{constructor(){super(...arguments);this._bar=null}connectedCallback(){var u,f,c,h,n,g,v;let d=this.getAttribute("api-key");if(!d)return;let o=this.getAttribute("inject-styles");(o===null?!0:o!=="false")&&G();let l=this.getAttribute("placement");this._bar=D({apiKey:d,apiUrl:(u=this.getAttribute("api-url"))!=null?u:void 0,label:(f=this.getAttribute("label"))!=null?f:void 0,placement:l==="fixed"?"fixed":"inline",theme:{primary:(c=this.getAttribute("theme-primary"))!=null?c:void 0,background:(h=this.getAttribute("theme-background"))!=null?h:void 0,text:(n=this.getAttribute("theme-text"))!=null?n:void 0,selected:(g=this.getAttribute("theme-selected"))!=null?g:void 0,selectedColor:(v=this.getAttribute("theme-selected-color"))!=null?v:void 0}}),this.appendChild(this._bar.element)}disconnectedCallback(){var d;(d=this._bar)==null||d.destroy(),this._bar=null}}typeof customElements!="undefined"&&!customElements.get("inputbuffer-feedback")&&customElements.define("inputbuffer-feedback",e)}var $={createModal:Y,createBar:oe,version:W};typeof window!="undefined"&&(window.InputBufferIO=$);(function(){if(typeof window=="undefined")return;let t=s==null?void 0:s.dataset.apiKey;if(!t)return;let r=s==null?void 0:s.dataset.injectStyles,d=s==null?void 0:s.dataset.colorScheme,o=Y({apiKey:t,apiUrl:s==null?void 0:s.dataset.apiUrl,attachTo:s==null?void 0:s.dataset.attachTo,injectStyles:r===void 0?!0:r!=="false",colorScheme:d,theme:{primary:s==null?void 0:s.dataset.themePrimary,background:s==null?void 0:s.dataset.themeBackground,text:s==null?void 0:s.dataset.themeText,selected:s==null?void 0:s.dataset.themeSelected,selectedColor:s==null?void 0:s.dataset.themeSelectedColor}});$._defaultInstance=o})();})();