@inputbuffer/feedback 0.1.0

package/dist/modal-entry.d.ts

@@ -0,0 +1,8 @@
+import type { WidgetConfig, OpenOptions, WidgetInstance } from './types.js';
+declare function createModal(config: WidgetConfig): WidgetInstance;
+declare const InputBufferIO: {
+    createModal: typeof createModal;
+    version: string;
+};
+export type { WidgetConfig, OpenOptions, WidgetInstance };
+export { InputBufferIO, createModal };

package/dist/modal.css

@@ -0,0 +1 @@
+#ib-overlay{position:fixed;inset:0;background:#00000080;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 #0000001f;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:.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:#fff;border:none;border-radius:var(--ib-radius-input);padding:8px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:inherit;cursor:pointer;display:inline-block;transition:background .15s}#ib-submit:hover,.ib-modal-submit:hover{background:var(--ib-primary-hover)}#ib-submit:disabled,.ib-modal-submit:disabled{opacity:.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:.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:.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:.08em;margin:8px 0 0;display:none}.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 .15s,color .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)}@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, .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, .2);--ib-radius: 8px;--ib-radius-input: 4px}

package/dist/modal.d.ts

@@ -0,0 +1,13 @@
+import type { WidgetConfig, OpenOptions } from './types.js';
+type SubmitHandler = (result: {
+    id: string;
+}) => void;
+type CloseHandler = () => void;
+type ErrorHandler = (err: Error) => void;
+export declare function createModal(config: WidgetConfig): {
+    open: (options?: OpenOptions) => void;
+    close: () => void;
+    on: (event: "submit" | "close" | "error", handler: SubmitHandler | CloseHandler | ErrorHandler) => void;
+    destroy: () => void;
+};
+export {};

package/dist/modal.esm.js

@@ -0,0 +1,309 @@
+function B(a){let i=document.getElementById("ib-modal");if(!i)return;let{theme:e={}}=a;e.primary&&i.style.setProperty("--ib-primary",e.primary),e.background&&i.style.setProperty("--ib-background",e.background),e.surface&&i.style.setProperty("--ib-surface",e.surface),e.text&&i.style.setProperty("--ib-text",e.text),e.selected&&i.style.setProperty("--ib-selected",e.selected),e.selectedColor&&i.style.setProperty("--ib-selected-color",e.selectedColor)}var L="0.1.0",V="https://inputbuffer.io/api/v0/inputs";async function N(a,i,e,b,n,s){var y;let m={description:i};if(b&&(m.title=b),e&&(m.contactEmail=e),n!=null&&n.sentiment&&(m.sentiment=n.sentiment),n!=null&&n.source&&(m.source=n.source),n!=null&&n.target){let l=n.target;m.targets=[{target_type:l.type,...l.targetId&&{target_id:l.targetId},...l.displayName&&{display_name:l.displayName},...l.dedupKey&&{dedup_key:l.dedupKey},metadata:l.metadata}]}let u=new AbortController,h=setTimeout(()=>u.abort(),1e4),c;try{c=await fetch(s!=null?s:V,{method:"POST",headers:{Authorization:`Bearer ${a}`,"Content-Type":"application/json","X-IB-Client":`inputbuffer-widget/${L} (javascript)`},body:JSON.stringify(m),credentials:"omit",signal:u.signal})}finally{clearTimeout(h)}if(!c.ok){let l=await c.json().catch(()=>({}));throw new Error(((y=l==null?void 0:l.error)==null?void 0:y.message)||"Submission failed. Please try again.")}return c.json()}function z(a){let i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 24 24"),i.setAttribute("width","18"),i.setAttribute("height","18"),i.setAttribute("fill","currentColor"),i.setAttribute("aria-hidden","true"),i.style.display="block";let e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("d",a),i.appendChild(e),i}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",_="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 S(a){let i=null,e,b,n=null,s=null,m=null,u=null,h=null,c=null,y=null,l=null,w=null,H=[],A=[],I=[];function M(t){if(t.key==="Escape"){k();return}if(t.key==="Tab"&&i){let o=Array.from(i.querySelectorAll('button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));if(o.length===0)return;let f=o[0],d=o[o.length-1];t.shiftKey?document.activeElement===f&&(t.preventDefault(),d.focus()):document.activeElement===d&&(t.preventDefault(),f.focus())}}async function W(){var o,f;if(!s||!h)return;let t=s.value.trim();if(t.length<10){c&&(c.textContent="Please enter at least 10 characters.",c.style.display="block");return}c&&(c.style.display="none"),h.disabled=!0,h.textContent="Sending\u2026";try{let d=(u==null?void 0:u.value.trim())||((o=e==null?void 0:e.prefill)==null?void 0:o.email)||null,p=(m==null?void 0:m.value.trim())||null,x=b!=null?b:e==null?void 0:e.sentiment,C=await N(a.apiKey,t,d||null,p,{...e,sentiment:x,source:(f=e==null?void 0:e.source)!=null?f:a.source},a.apiUrl);y&&(y.textContent="Thanks for your feedback!",y.style.display="block"),H.forEach(E=>E(C)),n=setTimeout(()=>k(),2e3)}catch(d){let p=d instanceof Error?d:new Error("Unknown error");c&&(c.textContent="Something went wrong. Please try again.",c.style.display="block"),I.forEach(x=>x(p)),h.disabled=!1,h.textContent="Send feedback"}}function D(){let t=document.createElement("div");t.id="ib-overlay";let o=document.createElement("div");o.id="ib-modal",a.colorScheme==="dark"?o.classList.add("ib-theme-dark"):a.colorScheme==="light"&&o.classList.add("ib-theme-light"),o.setAttribute("role","dialog"),o.setAttribute("aria-modal","true");let f=document.createElement("div");if(f.id="ib-modal-header",w=f,a.title?(o.setAttribute("aria-labelledby","ib-title"),l=document.createElement("h2"),l.id="ib-title",l.className="ib-modal-title",l.textContent=a.title,f.appendChild(l)):o.setAttribute("aria-label","Feedback"),a.showSentiment){let v,g,T=document.createElement("div");T.className="ib-modal-sentiment",v=document.createElement("button"),v.type="button",v.className="ib-modal-thumb ib-modal-thumb--up",v.setAttribute("aria-label","Helpful"),v.appendChild(z(U)),g=document.createElement("button"),g.type="button",g.className="ib-modal-thumb ib-modal-thumb--down",g.setAttribute("aria-label","Not helpful"),g.appendChild(z(_)),v.addEventListener("click",()=>{v.classList.add("ib-modal-thumb--active"),g.classList.remove("ib-modal-thumb--active"),b="positive"}),g.addEventListener("click",()=>{g.classList.add("ib-modal-thumb--active"),v.classList.remove("ib-modal-thumb--active"),b="negative"}),T.appendChild(v),T.appendChild(g),f.appendChild(T)}let d=document.createElement("button");d.id="ib-close",d.className="ib-modal-close",d.textContent="\xD7",d.setAttribute("aria-label","Close feedback form"),d.addEventListener("click",k),f.appendChild(d);let p=document.createElement("div");p.id="ib-modal-body",s=document.createElement("textarea"),s.id="ib-textarea",s.className="ib-modal-textarea",s.placeholder=a.placeholder||"What's on your mind?",s.setAttribute("aria-label","Feedback"),h=document.createElement("button"),h.id="ib-submit",h.className="ib-modal-submit",h.textContent="Send feedback",h.addEventListener("click",W),y=document.createElement("p"),y.id="ib-success",y.className="ib-modal-success",c=document.createElement("p"),c.id="ib-error",c.className="ib-modal-error",a.showTitleField===!0&&(m=document.createElement("input"),m.id="ib-title-input",m.className="ib-modal-title-input",m.type="text",m.placeholder="Title (optional)",m.setAttribute("aria-label","Feedback title"),p.appendChild(m)),p.appendChild(s),a.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"),p.appendChild(u)),p.appendChild(c),p.appendChild(y);let x=document.createElement("div");x.className="ib-modal-footer",x.appendChild(h);let C=document.createElement("div");C.className="ib-branding";let E=document.createElement("a");return E.href="https://inputbuffer.io",E.target="_blank",E.rel="noopener noreferrer",E.textContent="Powered by inputbuffer.io",C.appendChild(E),x.appendChild(C),p.appendChild(x),o.appendChild(f),o.appendChild(p),t.appendChild(o),t.addEventListener("click",v=>{v.target===t&&k()}),document.addEventListener("keydown",M),t}function F(t){var o,f;if(!i){if(e=t,i=D(),document.body.appendChild(i),B(a),t!=null&&t.title){if(l)l.textContent=t.title;else if(w){let d=i.querySelector("#ib-modal");d.removeAttribute("aria-label"),d.setAttribute("aria-labelledby","ib-title"),l=document.createElement("h2"),l.id="ib-title",l.className="ib-modal-title",l.textContent=t.title,w.prepend(l)}}if(t!=null&&t.sentiment){b=t.sentiment;let d=i.querySelector(".ib-modal-thumb--up"),p=i.querySelector(".ib-modal-thumb--down");t.sentiment==="positive"?d==null||d.classList.add("ib-modal-thumb--active"):t.sentiment==="negative"&&(p==null||p.classList.add("ib-modal-thumb--active"))}s&&((o=t==null?void 0:t.prefill)!=null&&o.description)&&(s.value=t.prefill.description),u&&((f=t==null?void 0:t.prefill)!=null&&f.email)&&(u.value=t.prefill.email),s==null||s.focus()}}function k(){i&&(n!==null&&(clearTimeout(n),n=null),document.removeEventListener("keydown",M),i.remove(),i=null,s=null,m=null,u=null,h=null,c=null,y=null,l=null,w=null,e=void 0,b=void 0,A.forEach(t=>t()))}function R(t,o){t==="submit"?H.push(o):t==="close"?A.push(o):t==="error"&&I.push(o)}function K(){k()}return{open:F,close:k,on:R,destroy:K}}var O=`/* 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 r=document.currentScript;function G(){if(document.getElementById("ib-modal-styles"))return;let a=document.createElement("style");a.id="ib-modal-styles",a.textContent=O,document.head.appendChild(a)}function P(a){a.injectStyles!==!1&&G();let i=S(a),e=null,b=null;return a.attachTo&&(e=document.querySelector(a.attachTo),e&&(b=()=>i.open(),e.addEventListener("click",b))),{open:n=>i.open(n),close:()=>i.close(),on:(n,s)=>i.on(n,s),destroy:()=>{e&&b&&(e.removeEventListener("click",b),e=null,b=null),i.destroy()}}}var j={createModal:P,version:L};window.InputBufferIO=j;(function(){let i=r==null?void 0:r.dataset.apiKey;if(!i)return;let e=r==null?void 0:r.dataset.injectStyles,b=P({apiKey:i,apiUrl:r==null?void 0:r.dataset.apiUrl,attachTo:r==null?void 0:r.dataset.attachTo,injectStyles:e===void 0?!0:e!=="false",theme:{primary:r==null?void 0:r.dataset.themePrimary,background:r==null?void 0:r.dataset.themeBackground,text:r==null?void 0:r.dataset.themeText,selected:r==null?void 0:r.dataset.themeSelected,selectedColor:r==null?void 0:r.dataset.themeSelectedColor}});j._defaultInstance=b})();export{j as InputBufferIO,P as createModal};

package/dist/modal.js

@@ -0,0 +1,309 @@
+"use strict";(()=>{function B(a){let i=document.getElementById("ib-modal");if(!i)return;let{theme:e={}}=a;e.primary&&i.style.setProperty("--ib-primary",e.primary),e.background&&i.style.setProperty("--ib-background",e.background),e.surface&&i.style.setProperty("--ib-surface",e.surface),e.text&&i.style.setProperty("--ib-text",e.text),e.selected&&i.style.setProperty("--ib-selected",e.selected),e.selectedColor&&i.style.setProperty("--ib-selected-color",e.selectedColor)}var L="0.1.0",V="https://inputbuffer.io/api/v0/inputs";async function N(a,i,e,b,n,s){var y;let m={description:i};if(b&&(m.title=b),e&&(m.contactEmail=e),n!=null&&n.sentiment&&(m.sentiment=n.sentiment),n!=null&&n.source&&(m.source=n.source),n!=null&&n.target){let l=n.target;m.targets=[{target_type:l.type,...l.targetId&&{target_id:l.targetId},...l.displayName&&{display_name:l.displayName},...l.dedupKey&&{dedup_key:l.dedupKey},metadata:l.metadata}]}let u=new AbortController,h=setTimeout(()=>u.abort(),1e4),c;try{c=await fetch(s!=null?s:V,{method:"POST",headers:{Authorization:`Bearer ${a}`,"Content-Type":"application/json","X-IB-Client":`inputbuffer-widget/${L} (javascript)`},body:JSON.stringify(m),credentials:"omit",signal:u.signal})}finally{clearTimeout(h)}if(!c.ok){let l=await c.json().catch(()=>({}));throw new Error(((y=l==null?void 0:l.error)==null?void 0:y.message)||"Submission failed. Please try again.")}return c.json()}function z(a){let i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 24 24"),i.setAttribute("width","18"),i.setAttribute("height","18"),i.setAttribute("fill","currentColor"),i.setAttribute("aria-hidden","true"),i.style.display="block";let e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("d",a),i.appendChild(e),i}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",_="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 S(a){let i=null,e,b,n=null,s=null,m=null,u=null,h=null,c=null,y=null,l=null,w=null,H=[],A=[],I=[];function M(t){if(t.key==="Escape"){k();return}if(t.key==="Tab"&&i){let o=Array.from(i.querySelectorAll('button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));if(o.length===0)return;let f=o[0],d=o[o.length-1];t.shiftKey?document.activeElement===f&&(t.preventDefault(),d.focus()):document.activeElement===d&&(t.preventDefault(),f.focus())}}async function W(){var o,f;if(!s||!h)return;let t=s.value.trim();if(t.length<10){c&&(c.textContent="Please enter at least 10 characters.",c.style.display="block");return}c&&(c.style.display="none"),h.disabled=!0,h.textContent="Sending\u2026";try{let d=(u==null?void 0:u.value.trim())||((o=e==null?void 0:e.prefill)==null?void 0:o.email)||null,p=(m==null?void 0:m.value.trim())||null,x=b!=null?b:e==null?void 0:e.sentiment,C=await N(a.apiKey,t,d||null,p,{...e,sentiment:x,source:(f=e==null?void 0:e.source)!=null?f:a.source},a.apiUrl);y&&(y.textContent="Thanks for your feedback!",y.style.display="block"),H.forEach(E=>E(C)),n=setTimeout(()=>k(),2e3)}catch(d){let p=d instanceof Error?d:new Error("Unknown error");c&&(c.textContent="Something went wrong. Please try again.",c.style.display="block"),I.forEach(x=>x(p)),h.disabled=!1,h.textContent="Send feedback"}}function D(){let t=document.createElement("div");t.id="ib-overlay";let o=document.createElement("div");o.id="ib-modal",a.colorScheme==="dark"?o.classList.add("ib-theme-dark"):a.colorScheme==="light"&&o.classList.add("ib-theme-light"),o.setAttribute("role","dialog"),o.setAttribute("aria-modal","true");let f=document.createElement("div");if(f.id="ib-modal-header",w=f,a.title?(o.setAttribute("aria-labelledby","ib-title"),l=document.createElement("h2"),l.id="ib-title",l.className="ib-modal-title",l.textContent=a.title,f.appendChild(l)):o.setAttribute("aria-label","Feedback"),a.showSentiment){let v,g,T=document.createElement("div");T.className="ib-modal-sentiment",v=document.createElement("button"),v.type="button",v.className="ib-modal-thumb ib-modal-thumb--up",v.setAttribute("aria-label","Helpful"),v.appendChild(z(U)),g=document.createElement("button"),g.type="button",g.className="ib-modal-thumb ib-modal-thumb--down",g.setAttribute("aria-label","Not helpful"),g.appendChild(z(_)),v.addEventListener("click",()=>{v.classList.add("ib-modal-thumb--active"),g.classList.remove("ib-modal-thumb--active"),b="positive"}),g.addEventListener("click",()=>{g.classList.add("ib-modal-thumb--active"),v.classList.remove("ib-modal-thumb--active"),b="negative"}),T.appendChild(v),T.appendChild(g),f.appendChild(T)}let d=document.createElement("button");d.id="ib-close",d.className="ib-modal-close",d.textContent="\xD7",d.setAttribute("aria-label","Close feedback form"),d.addEventListener("click",k),f.appendChild(d);let p=document.createElement("div");p.id="ib-modal-body",s=document.createElement("textarea"),s.id="ib-textarea",s.className="ib-modal-textarea",s.placeholder=a.placeholder||"What's on your mind?",s.setAttribute("aria-label","Feedback"),h=document.createElement("button"),h.id="ib-submit",h.className="ib-modal-submit",h.textContent="Send feedback",h.addEventListener("click",W),y=document.createElement("p"),y.id="ib-success",y.className="ib-modal-success",c=document.createElement("p"),c.id="ib-error",c.className="ib-modal-error",a.showTitleField===!0&&(m=document.createElement("input"),m.id="ib-title-input",m.className="ib-modal-title-input",m.type="text",m.placeholder="Title (optional)",m.setAttribute("aria-label","Feedback title"),p.appendChild(m)),p.appendChild(s),a.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"),p.appendChild(u)),p.appendChild(c),p.appendChild(y);let x=document.createElement("div");x.className="ib-modal-footer",x.appendChild(h);let C=document.createElement("div");C.className="ib-branding";let E=document.createElement("a");return E.href="https://inputbuffer.io",E.target="_blank",E.rel="noopener noreferrer",E.textContent="Powered by inputbuffer.io",C.appendChild(E),x.appendChild(C),p.appendChild(x),o.appendChild(f),o.appendChild(p),t.appendChild(o),t.addEventListener("click",v=>{v.target===t&&k()}),document.addEventListener("keydown",M),t}function F(t){var o,f;if(!i){if(e=t,i=D(),document.body.appendChild(i),B(a),t!=null&&t.title){if(l)l.textContent=t.title;else if(w){let d=i.querySelector("#ib-modal");d.removeAttribute("aria-label"),d.setAttribute("aria-labelledby","ib-title"),l=document.createElement("h2"),l.id="ib-title",l.className="ib-modal-title",l.textContent=t.title,w.prepend(l)}}if(t!=null&&t.sentiment){b=t.sentiment;let d=i.querySelector(".ib-modal-thumb--up"),p=i.querySelector(".ib-modal-thumb--down");t.sentiment==="positive"?d==null||d.classList.add("ib-modal-thumb--active"):t.sentiment==="negative"&&(p==null||p.classList.add("ib-modal-thumb--active"))}s&&((o=t==null?void 0:t.prefill)!=null&&o.description)&&(s.value=t.prefill.description),u&&((f=t==null?void 0:t.prefill)!=null&&f.email)&&(u.value=t.prefill.email),s==null||s.focus()}}function k(){i&&(n!==null&&(clearTimeout(n),n=null),document.removeEventListener("keydown",M),i.remove(),i=null,s=null,m=null,u=null,h=null,c=null,y=null,l=null,w=null,e=void 0,b=void 0,A.forEach(t=>t()))}function R(t,o){t==="submit"?H.push(o):t==="close"?A.push(o):t==="error"&&I.push(o)}function K(){k()}return{open:F,close:k,on:R,destroy:K}}var O=`/* 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 r=document.currentScript;function G(){if(document.getElementById("ib-modal-styles"))return;let a=document.createElement("style");a.id="ib-modal-styles",a.textContent=O,document.head.appendChild(a)}function P(a){a.injectStyles!==!1&&G();let i=S(a),e=null,b=null;return a.attachTo&&(e=document.querySelector(a.attachTo),e&&(b=()=>i.open(),e.addEventListener("click",b))),{open:n=>i.open(n),close:()=>i.close(),on:(n,s)=>i.on(n,s),destroy:()=>{e&&b&&(e.removeEventListener("click",b),e=null,b=null),i.destroy()}}}var j={createModal:P,version:L};window.InputBufferIO=j;(function(){let i=r==null?void 0:r.dataset.apiKey;if(!i)return;let e=r==null?void 0:r.dataset.injectStyles,b=P({apiKey:i,apiUrl:r==null?void 0:r.dataset.apiUrl,attachTo:r==null?void 0:r.dataset.attachTo,injectStyles:e===void 0?!0:e!=="false",theme:{primary:r==null?void 0:r.dataset.themePrimary,background:r==null?void 0:r.dataset.themeBackground,text:r==null?void 0:r.dataset.themeText,selected:r==null?void 0:r.dataset.themeSelected,selectedColor:r==null?void 0:r.dataset.themeSelectedColor}});j._defaultInstance=b})();})();

package/dist/theme.d.ts

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