@fixback/sdk 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -0
- package/dist/annotation.d.ts +106 -0
- package/dist/auto-report-backoff.d.ts +47 -0
- package/dist/breadcrumbs.d.ts +165 -0
- package/dist/draw-surface.d.ts +51 -0
- package/dist/error-capture.d.ts +135 -0
- package/dist/fixback.umd.js +524 -28
- package/dist/fixback.umd.js.map +1 -1
- package/dist/index.d.ts +13 -3
- package/dist/index.mjs +2402 -467
- package/dist/index.mjs.map +1 -1
- package/dist/init.d.ts +66 -7
- package/dist/invite.d.ts +104 -0
- package/dist/launcher.d.ts +29 -9
- package/dist/onboarding-styles.d.ts +8 -0
- package/dist/onboarding.d.ts +44 -0
- package/dist/overlay-styles.d.ts +1 -1
- package/dist/overlay.d.ts +36 -6
- package/dist/region-capture.d.ts +40 -0
- package/dist/report.d.ts +33 -7
- package/dist/screenshot.d.ts +2 -0
- package/dist/scrub.d.ts +60 -0
- package/dist/styles.d.ts +11 -1
- package/dist/submit.d.ts +22 -4
- package/package.json +1 -1
package/dist/fixback.umd.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
(function(w,S){typeof exports=="object"&&typeof module!="undefined"?S(exports):typeof define=="function"&&define.amd?define(["exports"],S):(w=typeof globalThis!="undefined"?globalThis:w||self,S(w.Fixback={}))})(this,function(w){Object.defineProperty(w,Symbol.toStringTag,{value:"Module"});function S(e){return`${e.replace(/\/+$/,"")}/api/ingest/boot`}function le(e){if(typeof e!="object"||e===null)return!1;const t=e;return typeof t.originAllowed=="boolean"&&typeof t.canSubmit=="boolean"&&typeof t.gate=="string"&&(t.tier===null||typeof t.tier=="string")}async function ce(e,t,o=fetch){let n;try{n=await o(S(e),{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(t)})}catch{return null}if(!n.ok)return null;let i;try{i=await n.json()}catch{return null}return le(i)?i:null}var D="fixback.anonymousId";function K(){const e=globalThis.crypto;return e&&typeof e.randomUUID=="function"?e.randomUUID():`fb-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,10)}`}function de(){try{const e=globalThis.localStorage,t=e.getItem(D);if(t)return t;const o=K();return e.setItem(D,o),o}catch{return K()}}var fe=`
|
|
1
|
+
(function(j,J){typeof exports=="object"&&typeof module!="undefined"?J(exports):typeof define=="function"&&define.amd?define(["exports"],J):(j=typeof globalThis!="undefined"?globalThis:j||self,J(j.Fixback={}))})(this,function(j){Object.defineProperty(j,Symbol.toStringTag,{value:"Module"});function J(e){return`${e.replace(/\/+$/,"")}/api/ingest/boot`}function Et(e){if(typeof e!="object"||e===null)return!1;const t=e;return typeof t.originAllowed=="boolean"&&typeof t.canSubmit=="boolean"&&typeof t.gate=="string"&&(t.tier===null||typeof t.tier=="string")}async function _t(e,t,n=fetch){let o;try{o=await n(J(e),{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(t)})}catch{return null}if(!o.ok)return null;let i;try{i=await o.json()}catch{return null}return Et(i)?i:null}var Me=["data-fixback-root","data-fixback-overlay"],St=Me.map(e=>`[${e}]`).join(",");function he(e){let t=e instanceof Node?e:null;for(;t;){if(t instanceof Element){for(const o of Me)if(t.hasAttribute(o))return!0}const n=t.getRootNode();if(n instanceof ShadowRoot&&n!==t){t=n.host;continue}t=t.parentNode}return!1}function Tt(e){for(const t of Array.from(e.querySelectorAll(St)))t.remove()}function Ae(e){const t=globalThis.CSS;return t!=null&&t.escape?t.escape(e):e.replace(/[^\w-]/g,n=>`\\${n}`)}function Ct(e){let t=1,n=e.previousElementSibling;for(;n;)n.tagName===e.tagName&&(t+=1),n=n.previousElementSibling;return t}function Ie(e){if(e.id)return`#${Ae(e.id)}`;const t=[];let n=e;for(;n&&n.tagName.toLowerCase()!=="html";){if(n.id){t.unshift(`#${Ae(n.id)}`);break}const o=n.tagName.toLowerCase(),i=n.parentElement;if(i){const r=Array.from(i.children).filter(s=>s.tagName===n.tagName);t.unshift(r.length>1?`${o}:nth-of-type(${Ct(n)})`:o)}else t.unshift(o);n=i}return t.join(" > ")}function Lt(e){const t=e.tagName.toLowerCase();if(e.id)return`${t}#${e.id}`;const n=e.classList[0];return n?`${t}.${n}`:t}function Mt(e){const t=[];let n=e;for(;n;)t.unshift(Lt(n)),n=n.parentElement;return t.join(" > ")}function At(e){const t=e.getBoundingClientRect();return{x:Math.round(t.x),y:Math.round(t.y),width:Math.round(t.width),height:Math.round(t.height)}}function It(e){return{selector:Ie(e),domPath:Mt(e),tag:e.tagName.toLowerCase(),rect:At(e)}}function Rt(e){var t,n;const o=(t=e.doc)!==null&&t!==void 0?t:document,i=(n=e.ignore)!==null&&n!==void 0?n:he;let r=null,s=!1;function f(b){var u;const m=(u=(typeof b.composedPath=="function"?b.composedPath():[])[0])!==null&&u!==void 0?u:b.target;return m instanceof Element?i(m)?null:m:null}function l(b){var u;s||(r=f(b),(u=e.onHover)===null||u===void 0||u.call(e,r))}function d(b){var u;if(s)return;const m=(u=f(b))!==null&&u!==void 0?u:r;m&&(b.preventDefault(),b.stopPropagation(),a(),e.onPick(m))}function h(b){if(!s&&b.key==="Escape"){var u;b.preventDefault(),a(),(u=e.onCancel)===null||u===void 0||u.call(e)}}function a(){s||(s=!0,o.removeEventListener("mouseover",l,!0),o.removeEventListener("click",d,!0),o.removeEventListener("keydown",h,!0),r=null)}return o.addEventListener("mouseover",l,!0),o.addEventListener("click",d,!0),o.addEventListener("keydown",h,!0),{stop:a}}var $t=7,Nt=/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi,Pt=new RegExp(`\\d{${$t},}`,"g"),Ut=/\b(bearer|token)\s+[\w.\-~+/]+=*/gi,Bt=/\bhttps?:\/\/[^\s"'<>]+/gi;function Ot(e){return typeof e!="string"||e.length===0?e:e.replace(Nt,"[redacted-email]").replace(Ut,(t,n)=>`${n} [redacted]`).replace(Pt,"[redacted-number]")}function H(e){if(typeof e!="string"||e.length===0)return e;let t=e;return t=t.replace(/(^[a-z][a-z0-9+.-]*:\/\/)[^/@?#]*@/i,"$1"),t=t.replace(/\?[^#]*/,""),t=t.replace(/#.*$/,n=>n.includes("=")?"":n),t}function zt(e){const t={...e};return typeof t.url=="string"&&(t.url=H(t.url)),typeof t.from=="string"&&(t.from=H(t.from)),typeof t.to=="string"&&(t.to=H(t.to)),t}function Dt(e){return Ot(e.replace(Bt,t=>H(t)))}function jt(e){const t={...e};return typeof t.message=="string"&&(t.message=Dt(t.message)),t.data&&(t.data=zt(t.data)),t}function Ft(e){const t={...e};return typeof t.url=="string"&&(t.url=H(t.url)),t.trace&&t.trace.length>0&&(t.trace=t.trace.map(jt)),t}function Re(e,t={}){const n=t.scrub===!1?e:Ft(e),o=t.hook;if(!o)return n;try{const i=o(n);return i!=null?i:null}catch{return n}}var Ko=30,Ht=["warn","error","assert"];function Vt(e){return typeof e!="number"||!Number.isFinite(e)||e<1?30:Math.floor(e)}function Xt(e={}){var t;const n=Vt(e.maxBreadcrumbs),o=e.maxAgeMs,i=e.beforeBreadcrumb,r=(t=e.now)!==null&&t!==void 0?t:Date.now;let s=[];function f(){if(typeof o=="number"&&o>0&&s.length>0){const l=r()-o;s=s.filter(d=>d.timestamp>=l)}}return{add(l){let d=l;if(i)try{d=i(l)}catch{d=l}d&&(s.push(d),f(),s.length>n&&(s=s.slice(-n)))},snapshot(){return f(),s.slice()},clear(){s=[]}}}var $e=300;function Ne(e){if(typeof e=="string")return e;if(e instanceof Error)return`${e.name}: ${e.message}`;if(e==null||typeof e=="number"||typeof e=="boolean")return String(e);try{var t;return(t=JSON.stringify(e))!==null&&t!==void 0?t:String(e)}catch{return"[object]"}}function Gt(e){const t=e.map(Ne).join(" ");return t.length>$e?`${t.slice(0,$e)}…`:t}function Pe(e,t,n){return{category:"console",level:e,message:Gt(t),timestamp:n}}function Yt(e,t,n){const o=H(e),i=H(t);return{category:"navigation",message:`${o} → ${i}`,timestamp:n,data:{from:o,to:i}}}function Ue(e,t,n,o,i){const r=H(n),s=o?{method:t,url:r,status:o}:{method:t,url:r};return{category:e,message:`${t} ${r}${o?` [${o}]`:""}`,timestamp:i,data:s}}function Be(e,t,n,o){return Ue("fetch",e,t,n,o)}function Kt(e,t,n,o){return Ue("xhr",e,t,n,o)}function Oe(e){try{return Ie(e)}catch{return e.tagName?e.tagName.toLowerCase():"unknown"}}function qt(e,t){const n=Oe(e);return{category:"ui.click",message:`click ${n}`,timestamp:t,data:{target:n}}}function Wt(e,t){const n=Oe(e);return{category:"ui.input",message:`input ${n}`,timestamp:t,data:{target:n}}}function Zt(e){return e instanceof Error?{name:e.name||"Error",message:e.message}:typeof e=="string"?{name:"Error",message:e}:{name:"Error",message:Ne(e)}}function Jt(e,t){const{name:n,message:o}=Zt(e);return{category:"error",level:"error",message:o?`${n}: ${o}`:n,timestamp:t,data:{errorType:n}}}function ve(){}function Qt(e,t,n,o){const i=[];for(const r of n){const s=t[r];if(typeof s!="function")continue;const f=(...l)=>{try{r==="assert"?l[0]||e.add(Pe("assert",l.slice(1),o())):e.add(Pe(r,l,o()))}catch{}return s.apply(t,l)};t[r]=f,i.push(()=>{t[r]=s})}return()=>{for(const r of i)r()}}function en(e){return typeof e=="string"?e:e instanceof URL?e.toString():e.url}function tn(e,t){var n,o;return((n=(o=t==null?void 0:t.method)!==null&&o!==void 0?o:typeof e=="object"&&"method"in e?e.method:void 0)!==null&&n!==void 0?n:"GET").toUpperCase()}function nn(e,t,n,o){const i=t.fetch;if(typeof i!="function")return ve;const r=(s,f)=>{const l=en(s),d=tn(s,f),h=i.call(t,s,f);return n(l)?h:h.then(a=>{try{e.add(Be(d,l,a.status,o()))}catch{}return a},a=>{try{e.add(Be(d,l,void 0,o()))}catch{}throw a})};return t.fetch=r,()=>{t.fetch=i}}function on(e,t,n,o){const i=t.XMLHttpRequest;if(typeof i!="function")return ve;const r=i.prototype,s=r.open,f=r.send;return r.open=function(l,d,...h){return this.__fixbackMeta={method:String(l).toUpperCase(),url:String(d)},s.call(this,l,d,...h)},r.send=function(l){const d=this.__fixbackMeta;if(d&&!n(d.url)){const h=()=>{try{e.add(Kt(d.method,d.url,this.status||void 0,o()))}catch{}this.removeEventListener("loadend",h)};this.addEventListener("loadend",h)}return f.call(this,l)},()=>{r.open=s,r.send=f}}function rn(e,t,n){const o=t.history,i=t.location;if(!o||!i)return ve;let r=i.href;const s=a=>{try{e.add(Yt(r,a,n()))}catch{}r=a},f=o.pushState,l=o.replaceState;o.pushState=function(a,b,u){const m=f.call(this,a,b,u);return s(i.href),m},o.replaceState=function(a,b,u){const m=l.call(this,a,b,u);return s(i.href),m};const d=()=>s(i.href),h=()=>s(i.href);return t.addEventListener("popstate",d),t.addEventListener("hashchange",h),()=>{o.pushState=f,o.replaceState=l,t.removeEventListener("popstate",d),t.removeEventListener("hashchange",h)}}function ze(e){var t;const n=(t=(typeof e.composedPath=="function"?e.composedPath():[])[0])!==null&&t!==void 0?t:e.target;return n instanceof Element?n:null}function an(e,t,n){const o=r=>{const s=ze(r);if(!(!s||he(s)))try{e.add(qt(s,n()))}catch{}},i=r=>{const s=ze(r);if(!(!s||he(s)))try{e.add(Wt(s,n()))}catch{}};return t.addEventListener("click",o,!0),t.addEventListener("input",i,!0),()=>{t.removeEventListener("click",o,!0),t.removeEventListener("input",i,!0)}}function sn(e,t={}){var n,o,i,r,s,f;const l=(n=t.win)!==null&&n!==void 0?n:globalThis,d=(o=t.doc)!==null&&o!==void 0?o:typeof document!="undefined"?document:void 0,h=(i=t.consoleObj)!==null&&i!==void 0?i:typeof console!="undefined"?console:void 0,a=(r=t.consoleLevels)!==null&&r!==void 0?r:Ht,b=(s=t.ignoreUrl)!==null&&s!==void 0?s:(()=>!1),u=(f=t.now)!==null&&f!==void 0?f:Date.now,m=[];return h&&m.push(Qt(e,h,a,u)),l&&(m.push(nn(e,l,b,u)),m.push(on(e,l,b,u)),m.push(rn(e,l,u))),d&&m.push(an(e,d,u)),()=>{for(const p of m)try{p()}catch{}}}var ln="#e5484d";function De(e,t,n,o){return{x:Math.round(Math.min(e,n)),y:Math.round(Math.min(t,o)),width:Math.round(Math.abs(n-e)),height:Math.round(Math.abs(o-t))}}function cn(e,t,n,o,i=14){const r=Math.atan2(o-t,n-e);return[{x:n,y:o},{x:n-i*Math.cos(r-Math.PI/6),y:o-i*Math.sin(r-Math.PI/6)},{x:n-i*Math.cos(r+Math.PI/6),y:o-i*Math.sin(r+Math.PI/6)}]}function dn(e){const t={};return e.element&&(t.element=e.element),e.region&&(t.region=e.region),e.marks&&e.marks.length>0&&(t.marks=e.marks.slice()),Object.keys(t).length>0?t:void 0}function je(e,t){var n;const o={},i=e.innerWidth;typeof i=="number"&&i>0&&(o.viewportWidth=Math.round(i));const r=e.innerHeight;typeof r=="number"&&r>0&&(o.viewportHeight=Math.round(r));const s=(n=e.navigator)===null||n===void 0?void 0:n.userAgent;return typeof s=="string"&&s.length>0&&(o.browser=s),t.length>0&&(o.sdkVersion=t),o}function Fe(e){var t;const n={};e.kind&&(n.kind=e.kind);const o=(t=e.comment)===null||t===void 0?void 0:t.trim();o&&(n.comment=o),e.url&&(n.url=e.url),e.environment&&Object.keys(e.environment).length>0&&(n.environment=e.environment);const i=dn({element:e.element,region:e.region,marks:e.marks});return i&&(n.annotation=i),e.trace&&e.trace.length>0&&(n.trace=e.trace),n}var qo="•",un=32,fn=new Set(["button","submit","reset","checkbox","radio","range","color","file","image","hidden"]);function me(e){const t=Math.min(Math.max(e,1),un);return"•".repeat(t)}function bn(e){for(const o of Array.from(e.querySelectorAll("input"))){var t;const i=((t=o.getAttribute("type"))!==null&&t!==void 0?t:"text").toLowerCase();if(fn.has(i))continue;const r=o.value;if(!r)continue;const s=me(r.length);o.value=s,o.setAttribute("value",s)}for(const o of Array.from(e.querySelectorAll("textarea"))){const i=o.value||o.textContent||"";if(!i)continue;const r=me(i.length);o.value=r,o.textContent=r}for(const o of Array.from(e.querySelectorAll("[contenteditable]"))){var n;if(o.getAttribute("contenteditable")==="false")continue;const i=(n=o.textContent)!==null&&n!==void 0?n:"";i.trim()&&(o.textContent=me(i.length))}}var pn={"image/png":"png","image/jpeg":"jpg","image/webp":"webp","image/gif":"gif"};function He(e){var t;return(t=pn[e])!==null&&t!==void 0?t:"png"}function Ve(e,t,n){const o=e==null?void 0:e[`inner${n}`],i=t.documentElement[`client${n}`];return Math.max(1,Math.round((typeof o=="number"&&o>0?o:i)||0)||1)}function hn(e,t,n){return`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${n}"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">${new XMLSerializer().serializeToString(e)}</div></foreignObject></svg>`}var vn=4e3,mn=(e,{width:t,height:n,type:o})=>new Promise(i=>{let r=!1;const s=f=>{r||(r=!0,i(f))};try{const f=new Image,l=setTimeout(()=>s(null),vn);f.onload=()=>{try{const d=document.createElement("canvas");d.width=t,d.height=n;const h=d.getContext("2d");if(!h){clearTimeout(l),s(null);return}h.drawImage(f,0,0),d.toBlob(a=>{clearTimeout(l),s(a)},o)}catch{clearTimeout(l),s(null)}},f.onerror=()=>{clearTimeout(l),s(null)},f.src=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}catch{s(null)}});async function Xe(e={}){try{var t,n,o,i,r,s;const f=(t=e.doc)!==null&&t!==void 0?t:document,l=(n=(o=e.win)!==null&&o!==void 0?o:f.defaultView)!==null&&n!==void 0?n:void 0,d=(i=e.target)!==null&&i!==void 0?i:f.documentElement,h=(r=e.type)!==null&&r!==void 0?r:"image/png",a=Ve(l,f,"Width"),b=Ve(l,f,"Height"),u=d.cloneNode(!0);Tt(u),bn(u);const m=hn(u,a,b),p=await((s=e.rasterize)!==null&&s!==void 0?s:mn)(m,{width:a,height:b,type:h});return p?{blob:p,width:a,height:b,type:h}:null}catch{return null}}function Q(e){"@babel/helpers - typeof";return Q=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Q(e)}function gn(e,t){if(Q(e)!="object"||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var o=n.call(e,t||"default");if(Q(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function xn(e){var t=gn(e,"string");return Q(t)=="symbol"?t:t+""}function Y(e,t,n){return(t=xn(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Wo=60;function yn(e,t){if(e==null)return 60;const n=e.trim();if(n==="")return 60;if(/^\d+$/.test(n))return Number(n);const o=Date.parse(n);return Number.isNaN(o)?60:Math.max(0,Math.ceil((o-t)/1e3))}var wn=class{constructor(e=Date.now){Y(this,"now",void 0),Y(this,"pausedUntil",0),this.now=e}isPaused(){return this.now()<this.pausedUntil}retryAfterSeconds(){return Math.max(0,Math.ceil((this.pausedUntil-this.now())/1e3))}hold(e){const t=this.now(),n=yn(e,t),o=t+n*1e3;return o>this.pausedUntil&&(this.pausedUntil=o),n}},kn="screenshot",En=new wn;function _n(e){return`${e.replace(/\/+$/,"")}/api/ingest/feedback`}function Sn(e){if(!e)return{};const t={};return e.signedIdentity&&(t.signedIdentity=e.signedIdentity),e.reporterId&&(t.reporterId=e.reporterId),e.anonymousId&&(t.anonymousId=e.anonymousId),t}async function Ge(e,t,n=fetch,o=En){var i,r;const s=(i=t.content.source)!==null&&i!==void 0?i:"reporter",f=s==="auto";if(f&&o.isPaused())return{ok:!1,reason:"backpressure",retryAfterSeconds:o.retryAfterSeconds()};const l={key:t.key,...Sn(t.identity),...t.content,source:s},d=new FormData;if(d.append("payload",JSON.stringify(l)),!((r=t.screenshot)===null||r===void 0)&&r.blob){var h;d.append(kn,t.screenshot.blob,(h=t.screenshot.filename)!==null&&h!==void 0?h:"screenshot.png")}let a;try{a=await n(_n(e),{method:"POST",body:d})}catch{return{ok:!1,reason:"unreachable"}}if(!a.ok)return f&&a.status===429?{ok:!1,reason:"backpressure",retryAfterSeconds:o.hold(a.headers.get("Retry-After"))}:{ok:!1,reason:"refused",status:a.status};try{return{ok:!0,feedback:await a.json()}}catch{return{ok:!0,feedback:null}}}var ae="0.1.0",Zo=5,Tn=2e3,Jo=20,Cn=5,Ln=/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi,Mn=/\bhttps?:\/\/[^\s"')]+/gi,An=/\b0x[0-9a-f]+\b/gi,In=/\b[0-9a-f]{8,}\b/gi,Rn=/\d{4,}/g;function $n(e){return typeof e!="string"||e.length===0?"":e.replace(Ln,"<uuid>").replace(Mn,"<url>").replace(An,"<hex>").replace(In,"<hex>").replace(Rn,"<n>").trim()}function Nn(e){let t=2166136261;for(let n=0;n<e.length;n++)t^=e.charCodeAt(n),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function ge(e){const t=e.replace(/\?[^:]*/,""),n=t.lastIndexOf("/");return n>=0?t.slice(n+1):t}function Pn(e){var t,n,o;const i=e.match(/^at\s+(.+?)\s+\((.+)\)$/);if(i)return`${(t=i[1])!==null&&t!==void 0?t:""}@${ge((n=i[2])!==null&&n!==void 0?n:"")}`;const r=e.match(/^at\s+(.+)$/);if(r)return`@${ge((o=r[1])!==null&&o!==void 0?o:"")}`;const s=e.indexOf("@");return s>=0?`${e.slice(0,s)}@${ge(e.slice(s+1))}`:null}function Un(e,t=Cn){if(typeof e!="string"||e.length===0)return"";const n=[];for(const o of e.split(`
|
|
2
|
+
`)){const i=Pn(o.trim());if(i&&(n.push(i),n.length>=t))break}return n.join(" < ")}function Bn(e,t,n){return Nn(`${e}|${$n(t)}|${Un(n)}`)}var On=class{constructor(e){var t;Y(this,"options",void 0),Y(this,"tokens",void 0),Y(this,"last",void 0),Y(this,"now",void 0),this.options=e,this.now=(t=e.now)!==null&&t!==void 0?t:Date.now,this.tokens=Math.max(0,e.capacity),this.last=this.now()}take(){const e=this.now(),{capacity:t,refillIntervalMs:n}=this.options;if(n>0&&e>this.last){const o=Math.floor((e-this.last)/n);o>0&&(this.tokens=Math.min(t,this.tokens+o),this.last+=o*n)}return this.tokens>=1?(this.tokens-=1,!0):!1}};function V(e){if(typeof e=="string")return e;if(e==null)return"";try{return String(e)}catch{return""}}function zn(e){const t=e,n=t.error;if(n&&typeof n=="object"){const i=n;return{type:V(i.name)||"Error",value:V(i.message)||V(t.message),stack:typeof i.stack=="string"?i.stack:void 0,original:n}}const o=V(t.message);return o?{type:"Error",value:o,original:o}:null}function Dn(e){const t=e.reason;if(t&&typeof t=="object"){const o=t;return{type:V(o.name)||"UnhandledRejection",value:V(o.message)||V(t),stack:typeof o.stack=="string"?o.stack:void 0,original:t}}const n=V(t);return{type:"UnhandledRejection",value:n,original:t!=null?t:n}}var jn={destroy:()=>{},droppedCount:()=>0};function Fn(e){var t,n,o,i,r,s,f,l,d,h,a,b;const u=(t=e.win)!==null&&t!==void 0?t:typeof window!="undefined"?window:void 0;if(!u)return jn;const m=u,p=(n=(o=e.doc)!==null&&o!==void 0?o:m.document)!==null&&n!==void 0?n:typeof document!="undefined"?document:void 0,c=(i=e.now)!==null&&i!==void 0?i:Date.now,T=(r=e.sdkVersion)!==null&&r!==void 0?r:ae,C=(s=e.maxDistinct)!==null&&s!==void 0?s:20,w=(f=(l=e.deps)===null||l===void 0?void 0:l.captureView)!==null&&f!==void 0?f:Xe,_=(d=(h=e.deps)===null||h===void 0?void 0:h.submitReport)!==null&&d!==void 0?d:Ge,N=new On({capacity:(a=e.burstCapacity)!==null&&a!==void 0?a:5,refillIntervalMs:(b=e.burstRefillMs)!==null&&b!==void 0?b:Tn,now:c}),M=new Map;let A=0;function y(I,L,B){var R,z;return{...Fe({kind:"bug",url:(R=m.location)===null||R===void 0?void 0:R.href,environment:je(m,T),trace:B.trace?(z=e.buffer)===null||z===void 0?void 0:z.snapshot():void 0}),source:"auto",errorSignature:I,occurrences:L}}async function D(I,L,B){const R=M.get(I);if(!R)return;const z=R.sentCount;R.sentCount=L;try{const we=y(I,L,B),te=Re(we,{hook:e.beforeSend,scrub:e.scrub});if(!te)return;let ne=null;if(B.screenshot){const q=await w({doc:p,win:m});ne=q?{blob:q.blob,filename:`screenshot.${He(q.type)}`}:null}!(await _(e.apiUrl,{key:e.key,identity:e.identity,content:te,screenshot:ne})).ok&&R.sentCount===L&&(R.sentCount=z)}catch{R.sentCount===L&&(R.sentCount=z)}}function v(I){const L=Bn(I.type,I.value,I.stack),B=M.get(L);if(B){B.count+=1,B.lastAt=c();return}if(!N.take()){A+=1;return}if(M.size>=C){A+=1;return}const R=c();M.set(L,{count:1,firstAt:R,lastAt:R,sentCount:0});try{var z;(z=e.buffer)===null||z===void 0||z.add(Jt(I.original,R))}catch{}D(L,1,{screenshot:!0,trace:!0})}const S=I=>{try{const L=zn(I);L&&v(L)}catch{}},O=I=>{try{const L=Dn(I);L&&v(L)}catch{}},$=()=>{try{for(const[I,L]of M)L.count>L.sentCount&&D(I,L.count,{screenshot:!1,trace:!1})}catch{}},ee=()=>{(p==null?void 0:p.visibilityState)==="hidden"&&$()};return m.addEventListener("error",S,!0),m.addEventListener("unhandledrejection",O,!0),m.addEventListener("pagehide",$),p==null||p.addEventListener("visibilitychange",ee),{destroy:()=>{m.removeEventListener("error",S,!0),m.removeEventListener("unhandledrejection",O,!0),m.removeEventListener("pagehide",$),p==null||p.removeEventListener("visibilitychange",ee)},droppedCount:()=>A}}var Ye="fixback.anonymousId";function Ke(){const e=globalThis.crypto;return e&&typeof e.randomUUID=="function"?e.randomUUID():`fb-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,10)}`}function Hn(){try{const e=globalThis.localStorage,t=e.getItem(Ye);if(t)return t;const n=Ke();return e.setItem(Ye,n),n}catch{return Ke()}}var qe="fixback_invite",Vn="fixback:reporter:";function Xn(e){try{const t=new URL(e).searchParams.get(qe);return t&&t.length>0?t:null}catch{return null}}function Gn(e){try{const t=new URL(e.location.href);if(!t.searchParams.has("fixback_invite"))return;t.searchParams.delete(qe);const n=t.searchParams.toString(),o=`${t.pathname}${n?`?${n}`:""}${t.hash}`;e.history.replaceState(e.history.state,"",o)}catch{}}function We(e){return`${Vn}${e}`}function Ze(){try{var e;return(e=globalThis.localStorage)!==null&&e!==void 0?e:null}catch{return null}}function se(e){if(typeof e!="string")return;const t=e.trim();return t.length>0?t:void 0}function Yn(e,t,n=Ze()){if(!n)return;const o=se(t.name),i=se(t.email),r={reporterId:t.reporterId,...o?{name:o}:{},...i?{email:i}:{}};try{n.setItem(We(e),JSON.stringify(r))}catch{}}function Je(e,t=Ze()){if(!t)return null;try{const n=t.getItem(We(e));if(!n)return null;const o=JSON.parse(n);if(typeof(o==null?void 0:o.reporterId)!="string"||o.reporterId.length===0)return null;const i=se(o.name),r=se(o.email);return{reporterId:o.reporterId,...i?{name:i}:{},...r?{email:r}:{}}}catch{return null}}function Qe(e,t){return`${e.replace(/\/+$/,"")}/api/invites/${encodeURIComponent(t)}`}function Kn(e,t){return`${Qe(e,t)}/redeem`}var et=new Set(["revoked","expired","exhausted","not_found"]);function tt(e){return e==="public"||e==="invited"||e==="internal"}function qn(e){if(typeof e!="object"||e===null)return!1;const t=e;return t.status==="pending"?typeof t.projectId=="string"&&(t.kind==="targeted"||t.kind==="shared")&&tt(t.tier):typeof t.status=="string"&&et.has(t.status)}function Wn(e){if(typeof e!="object"||e===null)return!1;const t=e;return t.status==="redeemed"?typeof t.reporterId=="string"&&typeof t.projectId=="string"&&tt(t.tier):typeof t.status=="string"&&et.has(t.status)}async function nt(e){try{return await e.json()}catch{return null}}async function Zn(e,t,n=fetch){let o;try{o=await n(Qe(e,t),{method:"GET",headers:{accept:"application/json"}})}catch{return null}const i=await nt(o);return qn(i)?i:null}async function Jn(e,t,n=fetch){let o;try{o=await n(Kn(e,t),{method:"POST",headers:{accept:"application/json"}})}catch{return null}const i=await nt(o);return Wn(i)?i:null}var Qn=`
|
|
2
3
|
:host {
|
|
3
4
|
/* Vendored Signal tokens (packages/ui/src/tokens.css). */
|
|
4
5
|
--fb-color-accent: #2f6fed;
|
|
5
6
|
--fb-color-accent-hover: #245fd0;
|
|
6
7
|
--fb-color-on-emphasis: #ffffff;
|
|
7
8
|
--fb-color-text: #0f1720;
|
|
9
|
+
/* Inverse (dark) surface for the toasts — Signal --fb-ink-900. */
|
|
10
|
+
--fb-color-surface-inverse: #0f1720;
|
|
8
11
|
--fb-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
9
12
|
Helvetica, Arial, sans-serif;
|
|
10
13
|
|
|
@@ -16,42 +19,55 @@
|
|
|
16
19
|
-webkit-font-smoothing: antialiased;
|
|
17
20
|
}
|
|
18
21
|
|
|
22
|
+
/* The pill: Feedback button + divider + tuck control, anchored bottom-right. */
|
|
19
23
|
.fb-launcher {
|
|
24
|
+
position: fixed;
|
|
25
|
+
right: 20px;
|
|
26
|
+
bottom: 20px;
|
|
27
|
+
z-index: 2;
|
|
20
28
|
display: inline-flex;
|
|
21
|
-
align-items:
|
|
22
|
-
gap: 8px;
|
|
29
|
+
align-items: stretch;
|
|
23
30
|
box-sizing: border-box;
|
|
24
31
|
height: 40px;
|
|
25
32
|
margin: 0;
|
|
26
|
-
padding: 0 16px;
|
|
27
|
-
border: 0;
|
|
28
33
|
border-radius: 999px;
|
|
29
34
|
background: var(--fb-color-accent);
|
|
30
|
-
color: var(--fb-color-on-emphasis);
|
|
31
|
-
font-family: inherit;
|
|
32
|
-
font-size: 13px;
|
|
33
|
-
font-weight: 600;
|
|
34
|
-
letter-spacing: 0.01em;
|
|
35
|
-
cursor: pointer;
|
|
36
35
|
box-shadow:
|
|
37
36
|
0 6px 18px rgba(15, 23, 32, 0.16),
|
|
38
37
|
0 1px 2px rgba(15, 23, 32, 0.12);
|
|
38
|
+
transform: translateX(0);
|
|
39
39
|
transition:
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
transform 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
|
|
41
|
+
background-color 120ms ease;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.fb-launcher:hover {
|
|
45
45
|
background: var(--fb-color-accent-hover);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.fb-
|
|
49
|
-
|
|
48
|
+
.fb-launcher__button {
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
gap: 8px;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
height: 100%;
|
|
54
|
+
margin: 0;
|
|
55
|
+
padding: 0 6px 0 16px;
|
|
56
|
+
border: 0;
|
|
57
|
+
background: transparent;
|
|
58
|
+
color: var(--fb-color-on-emphasis);
|
|
59
|
+
font-family: inherit;
|
|
60
|
+
font-size: 13px;
|
|
61
|
+
font-weight: 600;
|
|
62
|
+
letter-spacing: 0.01em;
|
|
63
|
+
cursor: pointer;
|
|
50
64
|
}
|
|
51
65
|
|
|
52
|
-
.fb-
|
|
53
|
-
|
|
54
|
-
outline
|
|
66
|
+
.fb-launcher__button:focus-visible,
|
|
67
|
+
.fb-launcher__tuck:focus-visible {
|
|
68
|
+
outline: 2px solid var(--fb-color-on-emphasis);
|
|
69
|
+
outline-offset: -3px;
|
|
70
|
+
border-radius: 999px;
|
|
55
71
|
}
|
|
56
72
|
|
|
57
73
|
.fb-launcher__icon {
|
|
@@ -65,12 +81,365 @@
|
|
|
65
81
|
white-space: nowrap;
|
|
66
82
|
}
|
|
67
83
|
|
|
84
|
+
.fb-launcher__divider {
|
|
85
|
+
width: 1px;
|
|
86
|
+
margin: 9px 0;
|
|
87
|
+
flex: none;
|
|
88
|
+
background: rgba(255, 255, 255, 0.28);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.fb-launcher__tuck {
|
|
92
|
+
display: inline-flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
box-sizing: border-box;
|
|
96
|
+
width: 32px;
|
|
97
|
+
height: 100%;
|
|
98
|
+
padding: 0;
|
|
99
|
+
border: 0;
|
|
100
|
+
background: transparent;
|
|
101
|
+
color: rgba(255, 255, 255, 0.82);
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.fb-launcher__tuck:hover {
|
|
106
|
+
color: var(--fb-color-on-emphasis);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.fb-launcher__tuck-icon {
|
|
110
|
+
display: block;
|
|
111
|
+
width: 14px;
|
|
112
|
+
height: 14px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* The corner hover-zone that peeks a tucked launcher back — inert until tucked,
|
|
116
|
+
* so it never swallows the host page's own bottom-right clicks. */
|
|
117
|
+
.fb-launcher__peekzone {
|
|
118
|
+
position: fixed;
|
|
119
|
+
right: 0;
|
|
120
|
+
bottom: 0;
|
|
121
|
+
z-index: 1;
|
|
122
|
+
width: 160px;
|
|
123
|
+
height: 160px;
|
|
124
|
+
pointer-events: none;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* The edge nub: the visible re-reveal affordance, hidden until tucked. */
|
|
128
|
+
.fb-launcher__nub {
|
|
129
|
+
position: fixed;
|
|
130
|
+
right: 0;
|
|
131
|
+
bottom: 22px;
|
|
132
|
+
z-index: 2;
|
|
133
|
+
width: 13px;
|
|
134
|
+
height: 42px;
|
|
135
|
+
border-radius: 9px 0 0 9px;
|
|
136
|
+
background: var(--fb-color-accent);
|
|
137
|
+
box-shadow: -6px 5px 18px rgba(47, 111, 237, 0.4);
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
opacity: 0;
|
|
140
|
+
transform: translateX(10px);
|
|
141
|
+
pointer-events: none;
|
|
142
|
+
transition:
|
|
143
|
+
opacity 220ms ease,
|
|
144
|
+
transform 220ms ease;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Tucked and not peeking: slide the pill off, reveal the nub, arm the zone. */
|
|
148
|
+
:host([data-fb-hidden]:not([data-fb-peeking])) .fb-launcher {
|
|
149
|
+
transform: translateX(calc(100% + 30px));
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:host([data-fb-hidden]:not([data-fb-peeking])) .fb-launcher__nub {
|
|
153
|
+
opacity: 1;
|
|
154
|
+
transform: none;
|
|
155
|
+
pointer-events: auto;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([data-fb-hidden]) .fb-launcher__peekzone {
|
|
159
|
+
pointer-events: auto;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Toasts: the first-visit welcome (above the pill) and the tuck-away hint. */
|
|
163
|
+
.fb-launcher__welcome,
|
|
164
|
+
.fb-launcher__hint {
|
|
165
|
+
position: fixed;
|
|
166
|
+
right: 20px;
|
|
167
|
+
z-index: 5;
|
|
168
|
+
box-sizing: border-box;
|
|
169
|
+
color: #fff;
|
|
170
|
+
font-size: 12px;
|
|
171
|
+
line-height: 1.45;
|
|
172
|
+
background: var(--fb-color-surface-inverse);
|
|
173
|
+
border-radius: 10px;
|
|
174
|
+
box-shadow: 0 12px 30px rgba(15, 40, 70, 0.32);
|
|
175
|
+
animation: fbToast 300ms ease both;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.fb-launcher__welcome {
|
|
179
|
+
bottom: 70px;
|
|
180
|
+
max-width: 210px;
|
|
181
|
+
padding: 9px 13px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.fb-launcher__welcome strong {
|
|
185
|
+
color: #8fc0ff;
|
|
186
|
+
font-weight: 600;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.fb-launcher__hint {
|
|
190
|
+
bottom: 20px;
|
|
191
|
+
max-width: 232px;
|
|
192
|
+
padding: 10px 13px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* The pulse that draws the eye while the welcome shows. */
|
|
196
|
+
.fb-launcher--pulse {
|
|
197
|
+
animation: fbPulse 1.8s ease-in-out 2;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
@keyframes fbPulse {
|
|
201
|
+
0%,
|
|
202
|
+
100% {
|
|
203
|
+
box-shadow:
|
|
204
|
+
0 6px 18px rgba(15, 23, 32, 0.16),
|
|
205
|
+
0 0 0 0 rgba(47, 111, 237, 0.45);
|
|
206
|
+
}
|
|
207
|
+
50% {
|
|
208
|
+
box-shadow:
|
|
209
|
+
0 6px 18px rgba(15, 23, 32, 0.16),
|
|
210
|
+
0 0 0 12px rgba(47, 111, 237, 0);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
@keyframes fbToast {
|
|
215
|
+
from {
|
|
216
|
+
opacity: 0;
|
|
217
|
+
transform: translateY(14px);
|
|
218
|
+
}
|
|
219
|
+
to {
|
|
220
|
+
opacity: 1;
|
|
221
|
+
transform: none;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* Reduce motion — the explicit opt-in and the OS setting both still it all. */
|
|
226
|
+
:host([data-fb-reduce-motion]) .fb-launcher,
|
|
227
|
+
:host([data-fb-reduce-motion]) .fb-launcher__nub {
|
|
228
|
+
transition: none;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
:host([data-fb-reduce-motion]) .fb-launcher--pulse,
|
|
232
|
+
:host([data-fb-reduce-motion]) .fb-launcher__welcome,
|
|
233
|
+
:host([data-fb-reduce-motion]) .fb-launcher__hint {
|
|
234
|
+
animation: none;
|
|
235
|
+
}
|
|
236
|
+
|
|
68
237
|
@media (prefers-reduced-motion: reduce) {
|
|
69
|
-
.fb-launcher
|
|
238
|
+
.fb-launcher,
|
|
239
|
+
.fb-launcher__nub {
|
|
70
240
|
transition: none;
|
|
71
241
|
}
|
|
242
|
+
.fb-launcher--pulse,
|
|
243
|
+
.fb-launcher__welcome,
|
|
244
|
+
.fb-launcher__hint {
|
|
245
|
+
animation: none;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
`,ot="data-fixback-root",le="fixback:launch",eo="fixback:welcomed:",to=5e3,no=4400,oo=280,ro='<svg class="fb-launcher__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M3.25 2h9.5A1.25 1.25 0 0 1 14 3.25v6.5A1.25 1.25 0 0 1 12.75 11H7.6l-3.19 2.55A.6.6 0 0 1 3.4 13.1V11h-.15A1.25 1.25 0 0 1 2 9.75v-6.5A1.25 1.25 0 0 1 3.25 2Z"/></svg>',io='<svg class="fb-launcher__tuck-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6l4 4 4-4"/></svg>';function ao(e,t){const n=eo+(t!=null?t:"default");try{const o=e==null?void 0:e.localStorage;return o?o.getItem(n)==="1"?!1:(o.setItem(n,"1"),!0):!0}catch{return!0}}function so(e,t={}){const n=e.ownerDocument,o=n.defaultView,i=n.querySelector(`[${ot}]`);i&&i.remove();const r=n.createElement("div");r.setAttribute(ot,""),r.style.cssText="position:fixed;right:20px;bottom:20px;z-index:2147483000;margin:0;padding:0;border:0;",t.reduceMotion&&r.setAttribute("data-fb-reduce-motion","true");const s=r.attachShadow({mode:"open"}),f=n.createElement("style");f.textContent=Qn,s.appendChild(f);const l=n.createElement("div");l.className="fb-launcher";const d=n.createElement("button");d.type="button",d.className="fb-launcher__button",d.setAttribute("aria-haspopup","dialog"),d.setAttribute("aria-label","Give feedback"),d.innerHTML=`${ro}<span class="fb-launcher__label">Feedback</span>`,d.addEventListener("click",()=>{r.dispatchEvent(new CustomEvent(le,{bubbles:!0,composed:!0}))});const h=n.createElement("span");h.className="fb-launcher__divider",h.setAttribute("aria-hidden","true");const a=n.createElement("button");a.type="button",a.className="fb-launcher__tuck",a.setAttribute("data-fb-tuck",""),a.setAttribute("aria-label","Hide feedback button"),a.title="Tuck away — hover the corner to bring it back",a.innerHTML=io,l.append(d,h,a);const b=n.createElement("div");b.className="fb-launcher__peekzone",b.setAttribute("aria-hidden","true");const u=n.createElement("div");u.className="fb-launcher__nub",u.setAttribute("role","button"),u.setAttribute("tabindex","0"),u.setAttribute("aria-label","Show feedback button"),s.append(l,b,u);let m=!1,p=!1,c,T,C,w,_;const N=()=>{m?r.setAttribute("data-fb-hidden","true"):r.removeAttribute("data-fb-hidden"),m&&p?r.setAttribute("data-fb-peeking","true"):r.removeAttribute("data-fb-peeking")},M=()=>{T!==void 0&&(clearTimeout(T),T=void 0),l.classList.remove("fb-launcher--pulse"),w==null||w.remove(),w=void 0},A=()=>{C!==void 0&&(clearTimeout(C),C=void 0),_==null||_.remove(),_=void 0},y=()=>{c!==void 0&&(clearTimeout(c),c=void 0),p||(p=!0,N())},D=()=>{c!==void 0&&clearTimeout(c),c=setTimeout(()=>{c=void 0,p=!1,N()},oo)};for(const $ of[l,b,u])$.addEventListener("mouseenter",y),$.addEventListener("mouseleave",D);const v=()=>{c!==void 0&&(clearTimeout(c),c=void 0),m=!1,p=!1,N(),A()},S=()=>{M(),m=!0,p=!1,N(),A(),_=n.createElement("div"),_.className="fb-launcher__hint",_.setAttribute("role","status"),_.textContent="Tucked away down here. Hover the bottom-right corner and I'll bring it back.",s.appendChild(_),C=setTimeout(A,no)};return a.addEventListener("click",S),u.addEventListener("click",v),u.addEventListener("keydown",$=>{($.key==="Enter"||$.key===" "||$.key==="Spacebar")&&($.preventDefault(),v())}),ao(o,t.key)&&(w=n.createElement("div"),w.className="fb-launcher__welcome",w.setAttribute("role","status"),w.innerHTML="You're all set — tap <strong>Feedback</strong> any time to report something.",s.appendChild(w),t.reduceMotion||l.classList.add("fb-launcher--pulse"),T=setTimeout(M,to)),e.appendChild(r),{host:r,dispose:()=>{c!==void 0&&clearTimeout(c),T!==void 0&&clearTimeout(T),C!==void 0&&clearTimeout(C)}}}function lo(e){e.dispose(),e.host.remove()}var co=`
|
|
249
|
+
:host {
|
|
250
|
+
--fb-color-accent: #2f6fed;
|
|
251
|
+
--fb-color-accent-hover: #245fd0;
|
|
252
|
+
--fb-color-on-emphasis: #ffffff;
|
|
253
|
+
--fb-color-ink: #0f1720;
|
|
254
|
+
--fb-color-text: #1a2530;
|
|
255
|
+
--fb-color-muted: #5a6875;
|
|
256
|
+
--fb-color-faint: #9aa7b2;
|
|
257
|
+
--fb-color-hint: #b7c1cb;
|
|
258
|
+
--fb-color-border: #dce3ea;
|
|
259
|
+
--fb-color-border-soft: #e6ebf0;
|
|
260
|
+
--fb-color-surface: #ffffff;
|
|
261
|
+
--fb-color-card: #f6f8fa;
|
|
262
|
+
--fb-color-accent-bg: #eaf1fe;
|
|
263
|
+
--fb-color-success: #2f9e5b;
|
|
264
|
+
--fb-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
265
|
+
Helvetica, Arial, sans-serif;
|
|
266
|
+
--fb-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
|
|
267
|
+
monospace;
|
|
268
|
+
all: initial;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
272
|
+
|
|
273
|
+
.fb-ob-backdrop {
|
|
274
|
+
position: fixed;
|
|
275
|
+
inset: 0;
|
|
276
|
+
z-index: 2147483010;
|
|
277
|
+
display: flex;
|
|
278
|
+
align-items: center;
|
|
279
|
+
justify-content: center;
|
|
280
|
+
padding: 24px;
|
|
281
|
+
background: rgba(15, 23, 32, 0.55);
|
|
282
|
+
backdrop-filter: blur(3px);
|
|
283
|
+
font-family: var(--fb-font-sans);
|
|
284
|
+
color: var(--fb-color-text);
|
|
285
|
+
animation: fb-ob-fade 0.25s ease both;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.fb-ob-panel {
|
|
289
|
+
width: 400px;
|
|
290
|
+
max-width: 100%;
|
|
291
|
+
background: var(--fb-color-surface);
|
|
292
|
+
border-radius: 16px;
|
|
293
|
+
box-shadow: 0 30px 70px rgba(15, 40, 70, 0.4);
|
|
294
|
+
overflow: hidden;
|
|
295
|
+
animation: fb-ob-pop 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.fb-ob-head {
|
|
299
|
+
padding: 22px 24px 0;
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
gap: 10px;
|
|
303
|
+
}
|
|
304
|
+
.fb-ob-mark {
|
|
305
|
+
width: 22px;
|
|
306
|
+
height: 22px;
|
|
307
|
+
border-radius: 6px;
|
|
308
|
+
background: var(--fb-color-accent);
|
|
309
|
+
flex: none;
|
|
310
|
+
display: flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
justify-content: center;
|
|
313
|
+
}
|
|
314
|
+
.fb-ob-mark::after {
|
|
315
|
+
content: "";
|
|
316
|
+
width: 7px;
|
|
317
|
+
height: 7px;
|
|
318
|
+
border-radius: 2px;
|
|
319
|
+
background: #fff;
|
|
320
|
+
}
|
|
321
|
+
.fb-ob-brand { font-size: 15px; font-weight: 600; color: var(--fb-color-ink); }
|
|
322
|
+
.fb-ob-chip {
|
|
323
|
+
margin-left: auto;
|
|
324
|
+
font-family: var(--fb-font-mono);
|
|
325
|
+
font-size: 10px;
|
|
326
|
+
color: #8a97a3;
|
|
327
|
+
border: 1px solid var(--fb-color-border-soft);
|
|
328
|
+
border-radius: 6px;
|
|
329
|
+
padding: 2px 7px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.fb-ob-body { padding: 16px 24px 8px; }
|
|
333
|
+
.fb-ob-title {
|
|
334
|
+
font-size: 19px;
|
|
335
|
+
font-weight: 700;
|
|
336
|
+
color: var(--fb-color-ink);
|
|
337
|
+
letter-spacing: -0.01em;
|
|
338
|
+
}
|
|
339
|
+
.fb-ob-lede {
|
|
340
|
+
font-size: 13.5px;
|
|
341
|
+
color: var(--fb-color-muted);
|
|
342
|
+
line-height: 1.5;
|
|
343
|
+
margin: 7px 0 0;
|
|
344
|
+
}
|
|
345
|
+
.fb-ob-lede strong { color: var(--fb-color-text); }
|
|
346
|
+
|
|
347
|
+
.fb-ob-card {
|
|
348
|
+
margin: 16px 0;
|
|
349
|
+
padding: 13px 14px;
|
|
350
|
+
background: var(--fb-color-card);
|
|
351
|
+
border: 1px solid var(--fb-color-border-soft);
|
|
352
|
+
border-radius: 10px;
|
|
353
|
+
display: flex;
|
|
354
|
+
flex-direction: column;
|
|
355
|
+
gap: 10px;
|
|
356
|
+
}
|
|
357
|
+
.fb-ob-row { display: flex; align-items: center; gap: 10px; }
|
|
358
|
+
.fb-ob-row + .fb-ob-row {
|
|
359
|
+
border-top: 1px solid #eef2f6;
|
|
360
|
+
padding-top: 10px;
|
|
361
|
+
}
|
|
362
|
+
.fb-ob-rowlabel {
|
|
363
|
+
font-family: var(--fb-font-mono);
|
|
364
|
+
font-size: 10px;
|
|
365
|
+
color: var(--fb-color-faint);
|
|
366
|
+
width: 70px;
|
|
367
|
+
flex: none;
|
|
368
|
+
}
|
|
369
|
+
.fb-ob-site { font-size: 13px; color: var(--fb-color-text); font-weight: 500; }
|
|
370
|
+
.fb-ob-tier {
|
|
371
|
+
font-size: 11px;
|
|
372
|
+
font-weight: 600;
|
|
373
|
+
color: var(--fb-color-accent);
|
|
374
|
+
background: var(--fb-color-accent-bg);
|
|
375
|
+
padding: 3px 9px;
|
|
376
|
+
border-radius: 6px;
|
|
72
377
|
}
|
|
73
|
-
|
|
378
|
+
.fb-ob-tiernote { font-size: 11.5px; color: #8a97a3; }
|
|
379
|
+
|
|
380
|
+
.fb-ob-fieldlabel {
|
|
381
|
+
display: block;
|
|
382
|
+
font-family: var(--fb-font-mono);
|
|
383
|
+
font-size: 10px;
|
|
384
|
+
letter-spacing: 0.05em;
|
|
385
|
+
text-transform: uppercase;
|
|
386
|
+
color: var(--fb-color-faint);
|
|
387
|
+
margin-bottom: 6px;
|
|
388
|
+
}
|
|
389
|
+
.fb-ob-fields { display: flex; gap: 8px; }
|
|
390
|
+
.fb-ob-input {
|
|
391
|
+
height: 38px;
|
|
392
|
+
padding: 0 12px;
|
|
393
|
+
border: 1px solid var(--fb-color-border);
|
|
394
|
+
border-radius: 9px;
|
|
395
|
+
font-family: inherit;
|
|
396
|
+
font-size: 13px;
|
|
397
|
+
color: var(--fb-color-text);
|
|
398
|
+
outline: none;
|
|
399
|
+
min-width: 0;
|
|
400
|
+
}
|
|
401
|
+
.fb-ob-input:focus { border-color: var(--fb-color-accent); }
|
|
402
|
+
.fb-ob-name { flex: 1; }
|
|
403
|
+
.fb-ob-email { flex: 1.3; font-family: var(--fb-font-mono); font-size: 12.5px; color: var(--fb-color-muted); }
|
|
404
|
+
|
|
405
|
+
.fb-ob-privacy {
|
|
406
|
+
display: flex;
|
|
407
|
+
align-items: flex-start;
|
|
408
|
+
gap: 8px;
|
|
409
|
+
margin-top: 14px;
|
|
410
|
+
font-size: 11.5px;
|
|
411
|
+
color: #8a97a3;
|
|
412
|
+
line-height: 1.5;
|
|
413
|
+
}
|
|
414
|
+
.fb-ob-privacy svg { flex: none; margin-top: 1px; }
|
|
415
|
+
.fb-ob-privacy strong { color: var(--fb-color-muted); }
|
|
416
|
+
|
|
417
|
+
.fb-ob-foot { padding: 16px 24px 22px; }
|
|
418
|
+
.fb-ob-confirm {
|
|
419
|
+
width: 100%;
|
|
420
|
+
height: 44px;
|
|
421
|
+
border: 0;
|
|
422
|
+
border-radius: 11px;
|
|
423
|
+
background: var(--fb-color-accent);
|
|
424
|
+
color: var(--fb-color-on-emphasis);
|
|
425
|
+
font-family: inherit;
|
|
426
|
+
font-size: 14px;
|
|
427
|
+
font-weight: 600;
|
|
428
|
+
cursor: pointer;
|
|
429
|
+
}
|
|
430
|
+
.fb-ob-confirm:hover { background: var(--fb-color-accent-hover); }
|
|
431
|
+
.fb-ob-confirm:disabled { opacity: 0.6; cursor: default; }
|
|
432
|
+
|
|
433
|
+
@keyframes fb-ob-fade { from { opacity: 0; } to { opacity: 1; } }
|
|
434
|
+
@keyframes fb-ob-pop {
|
|
435
|
+
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
|
436
|
+
to { opacity: 1; transform: none; }
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
@media (prefers-reduced-motion: reduce) {
|
|
440
|
+
.fb-ob-backdrop, .fb-ob-panel { animation: none; }
|
|
441
|
+
}
|
|
442
|
+
`,uo="data-fixback-onboard",fo={invited:"Invited tester",internal:"Internal",public:"Public"},bo={invited:"reviewed before it ships",internal:"ships straight through",public:"tracked, not auto-shipped"},po='<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#2f9e5b" stroke-width="1.5" aria-hidden="true"><path d="M8 1.8 13.5 4v3.5c0 3.6-2.4 5.6-5.5 6.7C4.9 13.1 2.5 11.1 2.5 7.5V4z"/><path d="M5.8 8 7.3 9.5 10.3 6.2"/></svg>';function k(e,t,n={},o=[]){const i=e.createElement(t);for(const[r,s]of Object.entries(n))s!==void 0&&i.setAttribute(r,s);for(const r of o)i.appendChild(typeof r=="string"?e.createTextNode(r):r);return i}function ce(e){const t=e.trim();return t.length>0?t:void 0}function ho(e){var t,n,o,i,r,s;const f=(t=e.target)!==null&&t!==void 0?t:document.body,l=(n=e.doc)!==null&&n!==void 0?n:f.ownerDocument;(o=l.querySelector("[data-fixback-onboard]"))===null||o===void 0||o.remove();const d=k(l,"div",{[uo]:""}),h=d.attachShadow({mode:"open"}),a=l.createElement("style");a.textContent=co,h.appendChild(a);const b=k(l,"div",{class:"fb-ob-head"},[k(l,"span",{class:"fb-ob-mark"}),k(l,"span",{class:"fb-ob-brand"},["Fixback"]),k(l,"span",{class:"fb-ob-chip"},["invite link"])]),u=k(l,"p",{class:"fb-ob-lede"},["You've been invited to give feedback on ",k(l,"strong",{},[e.origin]),". Point, mark up, send."]),m=k(l,"div",{class:"fb-ob-card"},[k(l,"div",{class:"fb-ob-row"},[k(l,"span",{class:"fb-ob-rowlabel"},["SITE"]),k(l,"span",{class:"fb-ob-site"},[e.origin])]),k(l,"div",{class:"fb-ob-row"},[k(l,"span",{class:"fb-ob-rowlabel"},["ACCESS"]),k(l,"span",{class:"fb-ob-tier"},[fo[e.tier]]),k(l,"span",{class:"fb-ob-tiernote"},[bo[e.tier]])])]),p=k(l,"input",{class:"fb-ob-input fb-ob-name",type:"text","aria-label":"Name",placeholder:"Name"}),c=k(l,"input",{class:"fb-ob-input fb-ob-email",type:"email","aria-label":"Email",placeholder:"email@example.com"});!((i=e.defaults)===null||i===void 0)&&i.name&&(p.value=e.defaults.name),!((r=e.defaults)===null||r===void 0)&&r.email&&(c.value=e.defaults.email);const T=k(l,"div",{class:"fb-ob-privacy"}),C=k(l,"span");C.innerHTML=po,T.appendChild((s=C.firstChild)!==null&&s!==void 0?s:l.createTextNode("")),T.appendChild(k(l,"span",{},[k(l,"strong",{},["Private by default."])," Anything you type is masked before it leaves your browser."]));const w=k(l,"div",{class:"fb-ob-body"},[k(l,"div",{class:"fb-ob-title"},["You're invited to give feedback"]),u,m,k(l,"label",{class:"fb-ob-fieldlabel",for:"fb-ob-name-input"},["Continue as"]),k(l,"div",{class:"fb-ob-fields"},[p,c]),T]);p.id="fb-ob-name-input";const _=k(l,"button",{type:"button",class:"fb-ob-confirm"},["Start giving feedback"]),N=k(l,"div",{class:"fb-ob-backdrop"},[k(l,"div",{class:"fb-ob-panel",role:"dialog","aria-modal":"true","aria-label":"Fixback invite"},[b,w,k(l,"div",{class:"fb-ob-foot"},[_])])]);h.appendChild(N);let M=!1;return _.addEventListener("click",()=>{if(M)return;M=!0,_.disabled=!0;const A={...ce(p.value)?{name:ce(p.value)}:{},...ce(c.value)?{email:ce(c.value)}:{}};e.onConfirm(A)}),f.appendChild(d),{host:d,destroy:()=>d.remove()}}var vo="http://www.w3.org/2000/svg",xe="3",rt=4,mo='600 16px "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';function go(e){var t,n;const o=(t=e.doc)!==null&&t!==void 0?t:document,{svg:i,textInput:r}=e,s=(n=e.color)!==null&&n!==void 0?n:ln;let f="arrow",l=e.initialMarks?e.initialMarks.slice():[],d=null,h=!1,a=null,b=!1;function u(){var v;(v=e.onChange)===null||v===void 0||v.call(e,l.slice())}function m(v){return{x:Math.round(v.clientX),y:Math.round(v.clientY)}}function p(v){const S=typeof v.composedPath=="function"?v.composedPath():[v.target];for(const O of S){if(O===o)break;if(O instanceof Element){const $=O.tagName;if($==="BUTTON"||$==="INPUT"||$==="TEXTAREA")return!0}}return!1}function c(v){return v.type==="pen"?v.points.length>1:v.type==="text"?v.text.trim().length>0:Math.abs(v.x1-v.x0)>rt||Math.abs(v.y1-v.y0)>rt}function T(v){if(b||h||p(v))return;const S=m(v);if(f==="text"){_(S);return}v.cancelable&&v.preventDefault(),h=!0,d=f==="pen"?{type:"pen",points:[S],color:s}:{type:f,x0:S.x,y0:S.y,x1:S.x,y1:S.y,color:s},y()}function C(v){if(b||!h||!d)return;const S=m(v);d.type==="pen"?d={type:"pen",points:[...d.points,S],color:d.color}:d={...d,x1:S.x,y1:S.y},y()}function w(){if(b||!h)return;h=!1;const v=d;d=null,v&&c(v)&&(l=[...l,v],u()),y()}function _(v){a=v,r.value="",r.style.display="block",r.style.left=`${v.x}px`,r.style.top=`${v.y}px`,r.onkeydown=N,r.onblur=M,setTimeout(()=>{try{r.focus()}catch{}},0)}function N(v){v.key==="Enter"?(v.preventDefault(),v.stopPropagation(),M()):v.key==="Escape"&&(v.preventDefault(),v.stopPropagation(),A())}function M(){if(!a)return;const v=r.value.trim(),S=a;A(),v.length>0&&(l=[...l,{type:"text",x:S.x,y:S.y,text:v,color:s}],u(),y())}function A(){a=null,r.onkeydown=null,r.onblur=null,r.value="",r.style.display="none"}function y(){for(;i.firstChild;)i.removeChild(i.firstChild);for(const v of l)i.appendChild(it(o,v));d&&i.appendChild(it(o,d))}function D(){b||(b=!0,o.removeEventListener("mousedown",T,!0),o.removeEventListener("mousemove",C,!0),o.removeEventListener("mouseup",w,!0),A())}return o.addEventListener("mousedown",T,!0),o.addEventListener("mousemove",C,!0),o.addEventListener("mouseup",w,!0),y(),{setTool:v=>{f=v},getTool:()=>f,undo:()=>{l.length!==0&&(l=l.slice(0,-1),u(),y())},marks:()=>l.slice(),stop:D}}function it(e,t){switch(t.type){case"box":return K(e,"rect",{x:String(Math.min(t.x0,t.x1)),y:String(Math.min(t.y0,t.y1)),width:String(Math.abs(t.x1-t.x0)),height:String(Math.abs(t.y1-t.y0)),rx:"2",fill:"none",stroke:t.color,"stroke-width":xe});case"pen":return K(e,"polyline",{points:t.points.map(n=>`${n.x},${n.y}`).join(" "),fill:"none",stroke:t.color,"stroke-width":xe,"stroke-linecap":"round","stroke-linejoin":"round"});case"text":{const n=K(e,"text",{x:String(t.x),y:String(t.y),fill:t.color,style:`font:${mo}`});return n.textContent=t.text,n}case"arrow":{const n=K(e,"g",{});n.appendChild(K(e,"line",{x1:String(t.x0),y1:String(t.y0),x2:String(t.x1),y2:String(t.y1),stroke:t.color,"stroke-width":xe,"stroke-linecap":"round"}));const o=cn(t.x0,t.y0,t.x1,t.y1);return n.appendChild(K(e,"polygon",{points:o.map(i=>`${i.x},${i.y}`).join(" "),fill:t.color})),n}}}function K(e,t,n){const o=e.createElementNS(vo,t);for(const[i,r]of Object.entries(n))o.setAttribute(i,r);return o}var xo=12;function yo(e){var t,n;const o=(t=e.doc)!==null&&t!==void 0?t:document,i=(n=e.minSize)!==null&&n!==void 0?n:xo;let r=null,s=!1;function f(b){s||r||(r={x:b.clientX,y:b.clientY},b.cancelable&&b.preventDefault())}function l(b){var u;s||!r||(u=e.onProgress)===null||u===void 0||u.call(e,De(r.x,r.y,b.clientX,b.clientY))}function d(b){if(s||!r)return;const u=De(r.x,r.y,b.clientX,b.clientY);if(r=null,a(),u.width<i||u.height<i){var m;(m=e.onCancel)===null||m===void 0||m.call(e);return}e.onComplete(u)}function h(b){if(!s&&b.key==="Escape"){var u;b.preventDefault(),a(),(u=e.onCancel)===null||u===void 0||u.call(e)}}function a(){s||(s=!0,o.removeEventListener("mousedown",f,!0),o.removeEventListener("mousemove",l,!0),o.removeEventListener("mouseup",d,!0),o.removeEventListener("keydown",h,!0),r=null)}return o.addEventListener("mousedown",f,!0),o.addEventListener("mousemove",l,!0),o.addEventListener("mouseup",d,!0),o.addEventListener("keydown",h,!0),{stop:a}}var wo=`
|
|
74
443
|
:host {
|
|
75
444
|
--fb-color-accent: #2f6fed;
|
|
76
445
|
--fb-color-accent-hover: #245fd0;
|
|
@@ -129,6 +498,15 @@
|
|
|
129
498
|
flex: none;
|
|
130
499
|
}
|
|
131
500
|
.fb-ov-brand { font-size: 14px; font-weight: 600; color: var(--fb-color-ink); }
|
|
501
|
+
.fb-ov-tier {
|
|
502
|
+
flex: none;
|
|
503
|
+
font-family: var(--fb-font-mono);
|
|
504
|
+
font-size: 9.5px;
|
|
505
|
+
color: var(--fb-color-faint);
|
|
506
|
+
border: 1px solid var(--fb-color-border-soft);
|
|
507
|
+
border-radius: 5px;
|
|
508
|
+
padding: 1px 6px;
|
|
509
|
+
}
|
|
132
510
|
.fb-ov-close {
|
|
133
511
|
margin-left: auto;
|
|
134
512
|
border: 0;
|
|
@@ -215,8 +593,9 @@
|
|
|
215
593
|
.fb-ov-status { padding: 0 14px; font-size: 11px; min-height: 0; }
|
|
216
594
|
.fb-ov-status.is-error { color: var(--fb-color-bug); }
|
|
217
595
|
|
|
218
|
-
.fb-ov-tools { display: flex; align-items: center; gap:
|
|
219
|
-
.fb-ov-pickbtn
|
|
596
|
+
.fb-ov-tools { display: flex; align-items: center; gap: 7px; padding: 8px 14px 14px; }
|
|
597
|
+
.fb-ov-pickbtn,
|
|
598
|
+
.fb-ov-capturebtn {
|
|
220
599
|
display: inline-flex;
|
|
221
600
|
align-items: center;
|
|
222
601
|
gap: 6px;
|
|
@@ -229,13 +608,18 @@
|
|
|
229
608
|
padding: 8px 11px;
|
|
230
609
|
cursor: pointer;
|
|
231
610
|
}
|
|
232
|
-
.fb-ov-
|
|
233
|
-
.fb-ov-pickbtn
|
|
611
|
+
.fb-ov-capturebtn { padding: 8px 9px; }
|
|
612
|
+
.fb-ov-pickbtn:hover,
|
|
613
|
+
.fb-ov-capturebtn:hover { border-color: #cfd8e2; }
|
|
614
|
+
.fb-ov-pickbtn.is-active,
|
|
615
|
+
.fb-ov-capturebtn.is-active,
|
|
616
|
+
.fb-ov-capturebtn.is-attached {
|
|
234
617
|
color: var(--fb-color-accent);
|
|
235
618
|
border-color: var(--fb-color-accent);
|
|
236
619
|
background: var(--fb-color-impr-bg);
|
|
237
620
|
}
|
|
238
621
|
.fb-ov-pickbtn__glyph { font-size: 14px; line-height: 1; }
|
|
622
|
+
.fb-ov-icon { display: block; }
|
|
239
623
|
|
|
240
624
|
.fb-ov-send {
|
|
241
625
|
margin-left: auto;
|
|
@@ -265,9 +649,18 @@
|
|
|
265
649
|
.fb-ov-done__title { font-size: 15px; font-weight: 600; color: var(--fb-color-ink); }
|
|
266
650
|
.fb-ov-done__sub { font-size: 12px; color: var(--fb-color-muted); margin-top: 4px; }
|
|
267
651
|
|
|
268
|
-
|
|
269
|
-
.fb-ov-panel.is-
|
|
270
|
-
|
|
652
|
+
/* The panel is hidden while any full-screen marking layer is active. */
|
|
653
|
+
.fb-ov-panel.is-marking { visibility: hidden; }
|
|
654
|
+
|
|
655
|
+
.fb-ov-pick,
|
|
656
|
+
.fb-ov-capture,
|
|
657
|
+
.fb-ov-draw { position: fixed; inset: 0; z-index: 2147483002; display: none; }
|
|
658
|
+
.fb-ov-pick.is-visible,
|
|
659
|
+
.fb-ov-capture.is-visible,
|
|
660
|
+
.fb-ov-draw.is-visible { display: block; }
|
|
661
|
+
|
|
662
|
+
/* Element-pick highlight layer — visual only, never intercepts host events. */
|
|
663
|
+
.fb-ov-pick { pointer-events: none; }
|
|
271
664
|
.fb-ov-highlight {
|
|
272
665
|
position: absolute;
|
|
273
666
|
border: 2px dashed var(--fb-color-accent);
|
|
@@ -289,9 +682,112 @@
|
|
|
289
682
|
box-shadow: 0 8px 20px rgba(20, 40, 70, 0.25);
|
|
290
683
|
}
|
|
291
684
|
|
|
685
|
+
/* Region-capture layer — a dim wash with a live selection box. */
|
|
686
|
+
.fb-ov-capture { cursor: crosshair; }
|
|
687
|
+
.fb-ov-capture-dim { position: absolute; inset: 0; background: rgba(15, 23, 32, 0.28); }
|
|
688
|
+
.fb-ov-capture-sel {
|
|
689
|
+
position: absolute;
|
|
690
|
+
border: 2px solid var(--fb-color-accent);
|
|
691
|
+
border-radius: 4px;
|
|
692
|
+
box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.32);
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
/* Draw layer — the mark SVG, the region frame, the label input, and the toolbar. */
|
|
696
|
+
.fb-ov-draw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
|
|
697
|
+
.fb-ov-draw-frame {
|
|
698
|
+
position: absolute;
|
|
699
|
+
border: 1px solid rgba(47, 111, 237, 0.5);
|
|
700
|
+
border-radius: 4px;
|
|
701
|
+
box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.18);
|
|
702
|
+
pointer-events: none;
|
|
703
|
+
}
|
|
704
|
+
.fb-ov-draw-text {
|
|
705
|
+
position: absolute;
|
|
706
|
+
display: none;
|
|
707
|
+
font-family: var(--fb-font-sans);
|
|
708
|
+
font-size: 15px;
|
|
709
|
+
font-weight: 600;
|
|
710
|
+
color: var(--fb-color-bug);
|
|
711
|
+
background: rgba(255, 255, 255, 0.92);
|
|
712
|
+
border: 1px dashed var(--fb-color-bug);
|
|
713
|
+
border-radius: 4px;
|
|
714
|
+
padding: 2px 6px;
|
|
715
|
+
outline: none;
|
|
716
|
+
z-index: 3;
|
|
717
|
+
}
|
|
718
|
+
.fb-ov-draw-toolbar {
|
|
719
|
+
position: fixed;
|
|
720
|
+
left: 50%;
|
|
721
|
+
bottom: 26px;
|
|
722
|
+
transform: translateX(-50%);
|
|
723
|
+
display: flex;
|
|
724
|
+
align-items: center;
|
|
725
|
+
gap: 5px;
|
|
726
|
+
background: var(--fb-color-ink);
|
|
727
|
+
border-radius: 12px;
|
|
728
|
+
padding: 7px;
|
|
729
|
+
box-shadow: 0 16px 40px rgba(15, 40, 70, 0.4);
|
|
730
|
+
}
|
|
731
|
+
.fb-ov-drawtool {
|
|
732
|
+
width: 34px;
|
|
733
|
+
height: 34px;
|
|
734
|
+
display: flex;
|
|
735
|
+
align-items: center;
|
|
736
|
+
justify-content: center;
|
|
737
|
+
border: 0;
|
|
738
|
+
border-radius: 8px;
|
|
739
|
+
background: transparent;
|
|
740
|
+
color: #c4ccd4;
|
|
741
|
+
cursor: pointer;
|
|
742
|
+
font-family: inherit;
|
|
743
|
+
}
|
|
744
|
+
.fb-ov-drawtool:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
|
|
745
|
+
.fb-ov-drawtool.is-active { background: var(--fb-color-accent); color: var(--fb-color-on-emphasis); }
|
|
746
|
+
.fb-ov-drawtool__t { font-weight: 700; font-size: 14px; line-height: 1; }
|
|
747
|
+
.fb-ov-draw-divider { width: 1px; height: 22px; background: #2a343e; margin: 0 3px; }
|
|
748
|
+
.fb-ov-draw-undo {
|
|
749
|
+
width: 34px;
|
|
750
|
+
height: 34px;
|
|
751
|
+
display: flex;
|
|
752
|
+
align-items: center;
|
|
753
|
+
justify-content: center;
|
|
754
|
+
border: 0;
|
|
755
|
+
border-radius: 8px;
|
|
756
|
+
background: transparent;
|
|
757
|
+
color: #c4ccd4;
|
|
758
|
+
cursor: pointer;
|
|
759
|
+
}
|
|
760
|
+
.fb-ov-draw-undo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }
|
|
761
|
+
.fb-ov-draw-undo:disabled { opacity: 0.4; cursor: default; }
|
|
762
|
+
.fb-ov-draw-cancel {
|
|
763
|
+
height: 34px;
|
|
764
|
+
padding: 0 12px;
|
|
765
|
+
border: 0;
|
|
766
|
+
border-radius: 8px;
|
|
767
|
+
background: transparent;
|
|
768
|
+
color: var(--fb-color-faint);
|
|
769
|
+
font-family: inherit;
|
|
770
|
+
font-size: 12.5px;
|
|
771
|
+
cursor: pointer;
|
|
772
|
+
}
|
|
773
|
+
.fb-ov-draw-cancel:hover { color: #fff; }
|
|
774
|
+
.fb-ov-draw-attach {
|
|
775
|
+
height: 34px;
|
|
776
|
+
padding: 0 15px;
|
|
777
|
+
border: 0;
|
|
778
|
+
border-radius: 8px;
|
|
779
|
+
background: var(--fb-color-accent);
|
|
780
|
+
color: var(--fb-color-on-emphasis);
|
|
781
|
+
font-family: inherit;
|
|
782
|
+
font-size: 12.5px;
|
|
783
|
+
font-weight: 600;
|
|
784
|
+
cursor: pointer;
|
|
785
|
+
}
|
|
786
|
+
.fb-ov-draw-attach:hover { background: var(--fb-color-accent-hover); }
|
|
787
|
+
|
|
292
788
|
@media (prefers-reduced-motion: reduce) {
|
|
293
789
|
.fb-ov-highlight { transition: none; }
|
|
294
790
|
}
|
|
295
|
-
`,rt="•",Ae=32,Ie=new Set(["button","submit","reset","checkbox","radio","range","color","file","image","hidden"]);function R(e){const t=Math.min(Math.max(e,1),Ae);return"•".repeat(t)}function _e(e){for(const n of Array.from(e.querySelectorAll("input"))){var t;const i=((t=n.getAttribute("type"))!==null&&t!==void 0?t:"text").toLowerCase();if(Ie.has(i))continue;const l=n.value;if(!l)continue;const a=R(l.length);n.value=a,n.setAttribute("value",a)}for(const n of Array.from(e.querySelectorAll("textarea"))){const i=n.value||n.textContent||"";if(!i)continue;const l=R(i.length);n.value=l,n.textContent=l}for(const n of Array.from(e.querySelectorAll("[contenteditable]"))){var o;if(n.getAttribute("contenteditable")==="false")continue;const i=(o=n.textContent)!==null&&o!==void 0?o:"";i.trim()&&(n.textContent=R(i.length))}}function G(e,t,o){const n=e==null?void 0:e[`inner${o}`],i=t.documentElement[`client${o}`];return Math.max(1,Math.round((typeof n=="number"&&n>0?n:i)||0)||1)}function Ne(e,t,o){return`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${o}"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">${new XMLSerializer().serializeToString(e)}</div></foreignObject></svg>`}var Oe=4e3,Re=(e,{width:t,height:o,type:n})=>new Promise(i=>{let l=!1;const a=c=>{l||(l=!0,i(c))};try{const c=new Image,b=setTimeout(()=>a(null),Oe);c.onload=()=>{try{const p=document.createElement("canvas");p.width=t,p.height=o;const g=p.getContext("2d");if(!g){clearTimeout(b),a(null);return}g.drawImage(c,0,0),p.toBlob(s=>{clearTimeout(b),a(s)},n)}catch{clearTimeout(b),a(null)}},c.onerror=()=>{clearTimeout(b),a(null)},c.src=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}catch{a(null)}});async function Me(e={}){try{var t,o,n,i,l,a;const c=(t=e.doc)!==null&&t!==void 0?t:document,b=(o=(n=e.win)!==null&&n!==void 0?n:c.defaultView)!==null&&o!==void 0?o:void 0,p=(i=e.target)!==null&&i!==void 0?i:c.documentElement,g=(l=e.type)!==null&&l!==void 0?l:"image/png",s=G(b,c,"Width"),u=G(b,c,"Height"),f=p.cloneNode(!0);me(f),_e(f);const y=Ne(f,s,u),h=await((a=e.rasterize)!==null&&a!==void 0?a:Re)(y,{width:s,height:u,type:g});return h?{blob:h,width:s,height:u,type:g}:null}catch{return null}}var Be="screenshot";function Pe(e){return`${e.replace(/\/+$/,"")}/api/ingest/feedback`}function ze(e){if(!e)return{};const t={};return e.signedIdentity&&(t.signedIdentity=e.signedIdentity),e.reporterId&&(t.reporterId=e.reporterId),e.anonymousId&&(t.anonymousId=e.anonymousId),t}async function Ue(e,t,o=fetch){var n;const i={key:t.key,...ze(t.identity),...t.content},l=new FormData;if(l.append("payload",JSON.stringify(i)),!((n=t.screenshot)===null||n===void 0)&&n.blob){var a;l.append(Be,t.screenshot.blob,(a=t.screenshot.filename)!==null&&a!==void 0?a:"screenshot.png")}let c;try{c=await o(Pe(e),{method:"POST",body:l})}catch{return{ok:!1,reason:"unreachable"}}if(!c.ok)return{ok:!1,reason:"refused",status:c.status};try{return{ok:!0,feedback:await c.json()}}catch{return{ok:!0,feedback:null}}}var W="0.1.0",$e="data-fixback-overlay",He=[{value:"bug",label:"Bug"},{value:"improvement",label:"Improve"},{value:"idea",label:"Idea"}],Ve=1800;function d(e,t,o={},n=[]){const i=e.createElement(t);for(const[l,a]of Object.entries(o))a!==void 0&&i.setAttribute(l,a);for(const l of n)i.appendChild(typeof l=="string"?e.createTextNode(l):l);return i}var je={"image/png":"png","image/jpeg":"jpg","image/webp":"webp","image/gif":"gif"};function Fe(e){var t;return(t=je[e])!==null&&t!==void 0?t:"png"}function De(e){var t,o,n,i,l,a,c,b,p,g;const s=(t=e.doc)!==null&&t!==void 0?t:document,u=(o=(n=e.win)!==null&&n!==void 0?n:s.defaultView)!==null&&o!==void 0?o:window,f=(i=e.sdkVersion)!==null&&i!==void 0?i:W,y={captureView:(l=(a=e.deps)===null||a===void 0?void 0:a.captureView)!==null&&l!==void 0?l:Me,submitReport:(c=(b=e.deps)===null||b===void 0?void 0:b.submitReport)!==null&&c!==void 0?c:Ue,startElementPicker:(p=(g=e.deps)===null||g===void 0?void 0:g.startElementPicker)!==null&&p!==void 0?p:Se};let h=null,r=null,T=null,_=null,N=!1;const x={kind:"bug",selectedElement:null,phase:"compose"};function O(v,m){r&&(r.status.textContent=v,r.status.classList.toggle("is-error",m))}function Q(v){if(x.kind=v,!!r)for(const[m,E]of r.tabs){const k=m===v;E.classList.toggle("is-active",k),E.setAttribute("aria-pressed",String(k))}}function ee(){r&&(x.selectedElement?(r.mark.classList.add("has-element"),r.selector.textContent=x.selectedElement.selector,r.caption.textContent="Element selected · masked screenshot on Send",r.pickBtn.textContent="",r.pickBtn.append(J(s),s.createTextNode("Change element"))):(r.mark.classList.remove("has-element"),r.selector.textContent="",r.caption.textContent="Masked screenshot attached on Send",r.pickBtn.textContent="",r.pickBtn.append(J(s),s.createTextNode("Pick element"))))}function qe(v){if(!r)return;if(!v){r.highlight.style.display="none";return}const m=v.getBoundingClientRect();r.highlight.style.display="block",r.highlight.style.left=`${m.left}px`,r.highlight.style.top=`${m.top}px`,r.highlight.style.width=`${m.width}px`,r.highlight.style.height=`${m.height}px`}function M(){T==null||T.stop(),T=null}function C(){r&&(r.panel.classList.remove("is-picking"),r.pickBtn.classList.remove("is-active"),r.highlight.style.display="none"),M()}function Xe(){r&&(M(),r.panel.classList.add("is-picking"),r.pickBtn.classList.add("is-active"),T=y.startElementPicker({doc:s,onHover:qe,onPick:v=>{x.selectedElement=Ee(v),C(),ee()},onCancel:C}))}function B(){_!==null&&(clearTimeout(_),_=null)}async function Ye(){if(!(!r||x.phase==="sending")){x.phase="sending",r.sendBtn.disabled=!0,r.sendBtn.textContent="Sending…",O("",!1);try{var v,m;const E=Ce({kind:x.kind,comment:r.comment.value,element:(v=x.selectedElement)!==null&&v!==void 0?v:void 0,url:(m=u.location)===null||m===void 0?void 0:m.href,environment:Te(u,f)}),k=await y.captureView({doc:s,win:u}),U=k?{blob:k.blob,filename:`screenshot.${Fe(k.type)}`}:null,L=await y.submitReport(e.apiUrl,{key:e.key,identity:e.identity,content:E,screenshot:U});L.ok?(x.phase="sent",r.panel.classList.add("is-sent"),_=setTimeout(z,Ve)):(P(),O(L.reason==="unreachable"?"Couldn't reach Fixback — try again.":"Fixback couldn't accept this report.",!0))}catch{P(),O("Something went wrong — try again.",!0)}}}function P(){x.phase="compose",r&&(r.sendBtn.disabled=!1,r.sendBtn.textContent="Send")}function Ge(){var v;h=d(s,"div",{[$e]:""}),h.style.cssText="position:fixed;right:20px;bottom:84px;z-index:2147483001;margin:0;padding:0;border:0;display:none;";const m=h.attachShadow({mode:"open"}),E=s.createElement("style");E.textContent=Le,m.appendChild(E);const k=d(s,"button",{type:"button",class:"fb-ov-close","aria-label":"Close"},["✕"]),U=d(s,"div",{class:"fb-ov-head"},[d(s,"span",{class:"fb-ov-mark-sq"}),d(s,"span",{class:"fb-ov-brand"},["Fixback"]),k]),L=new Map,te=d(s,"div",{class:"fb-ov-tabs"});for(const{value:j,label:nt}of He){const F=d(s,"button",{type:"button",class:"fb-ov-tab","data-kind":j},[nt]);F.addEventListener("click",()=>Q(j)),L.set(j,F),te.appendChild(F)}const oe=d(s,"span",{class:"fb-ov-selector"}),ne=d(s,"span",{class:"fb-ov-mark-caption"}),re=d(s,"div",{class:"fb-ov-mark"},[oe,ne]),ie=d(s,"textarea",{class:"fb-ov-comment",placeholder:"Describe what you saw or want…","aria-label":"Comment"}),ae=d(s,"div",{class:"fb-ov-status",role:"status","aria-live":"polite"}),$=d(s,"button",{type:"button",class:"fb-ov-pickbtn"});$.addEventListener("click",()=>{x.phase!=="sending"&&(r!=null&&r.panel.classList.contains("is-picking")?C():Xe())});const H=d(s,"button",{type:"button",class:"fb-ov-send"},["Send"]);H.addEventListener("click",()=>{Ye()});const Qe=d(s,"div",{class:"fb-ov-tools"},[$,H]),et=d(s,"div",{class:"fb-ov-form"},[te,re,ie,ae,Qe]),tt=d(s,"div",{class:"fb-ov-done"},[d(s,"div",{class:"fb-ov-done__check"},["✓"]),d(s,"div",{class:"fb-ov-done__title"},["Report sent"]),d(s,"div",{class:"fb-ov-done__sub"},["Thanks — the team can see it now."])]),se=d(s,"div",{class:"fb-ov-panel",role:"dialog","aria-label":"Fixback feedback"},[U,et,tt]),V=d(s,"div",{class:"fb-ov-highlight"});V.style.display="none";const ot=d(s,"div",{class:"fb-ov-pick"},[d(s,"div",{class:"fb-ov-hint"},["Click the element you mean · Esc to cancel"]),V]);m.appendChild(se),m.appendChild(ot),k.addEventListener("click",z),((v=e.target)!==null&&v!==void 0?v:s.body).appendChild(h),r={panel:se,tabs:L,mark:re,selector:oe,caption:ne,comment:ie,status:ae,pickBtn:$,sendBtn:H,highlight:V}}function We(){(!h||!r)&&Ge()}function Je(){if(We(),!(!h||!r)){B(),C(),x.phase="compose",x.selectedElement=null,r.panel.classList.remove("is-sent"),r.comment.value="",P(),O("",!1),Q("bug"),ee(),h.style.display="block",N=!0;try{r.comment.focus()}catch{}}}function z(){B(),C(),h&&(h.style.display="none"),N=!1}function Ze(){B(),M(),h==null||h.remove(),h=null,r=null,N=!1}return{open:Je,close:z,destroy:Ze,get isOpen(){return N}}}function J(e){return d(e,"span",{class:"fb-ov-pickbtn__glyph","aria-hidden":"true"},["⌖"])}var Z="https://api.fixback.dev",I={destroy(){}};async function Ke(e){try{var t,o,n;if(typeof document=="undefined")return I;const i=e==null?void 0:e.key;if(typeof i!="string"||i.length===0)return I;const l=(t=e.apiUrl)!==null&&t!==void 0?t:Z,a=(o=e.anonymousId)!==null&&o!==void 0?o:de(),c=await ce(l,{key:i,signedIdentity:e.signedIdentity,reporterId:e.reporterId,anonymousId:a});if(!(c!=null&&c.canSubmit))return I;const b=(n=e.target)!==null&&n!==void 0?n:document.body,p=be(b),g=De({apiUrl:l,key:i,identity:{signedIdentity:e.signedIdentity,reporterId:e.reporterId,anonymousId:a},sdkVersion:W,target:b}),s=()=>g.open();return p.host.addEventListener(A,s),{destroy:()=>{p.host.removeEventListener(A,s),g.destroy(),pe(p)}}}catch{return I}}w.DEFAULT_API_URL=Z,w.LAUNCH_EVENT=A,w.init=Ke});
|
|
791
|
+
`,ko="data-fixback-overlay",Eo="http://www.w3.org/2000/svg",_o=[{value:"bug",label:"Bug"},{value:"improvement",label:"Improve"},{value:"idea",label:"Idea"}],So=[{tool:"arrow",label:"Arrow"},{tool:"box",label:"Box"},{tool:"pen",label:"Pen"},{tool:"text",label:"Text label"}],at=1800;function x(e,t,n={},o=[]){const i=e.createElement(t);for(const[r,s]of Object.entries(n))s!==void 0&&i.setAttribute(r,s);for(const r of o)i.appendChild(typeof r=="string"?e.createTextNode(r):r);return i}function F(e,t,n={},o=[]){const i=e.createElementNS(Eo,t);for(const[r,s]of Object.entries(n))i.setAttribute(r,s);for(const r of o)i.appendChild(r);return i}function To(e){var t,n,o,i,r,s,f,l,d,h;const a=(t=e.doc)!==null&&t!==void 0?t:document,b=(n=(o=e.win)!==null&&o!==void 0?o:a.defaultView)!==null&&n!==void 0?n:window,u=(i=e.sdkVersion)!==null&&i!==void 0?i:ae,m={captureView:(r=(s=e.deps)===null||s===void 0?void 0:s.captureView)!==null&&r!==void 0?r:Xe,submitReport:(f=(l=e.deps)===null||l===void 0?void 0:l.submitReport)!==null&&f!==void 0?f:Ge,startElementPicker:(d=(h=e.deps)===null||h===void 0?void 0:h.startElementPicker)!==null&&d!==void 0?d:Rt};let p=null,c=null,T=null,C=null,w=null,_=null,N=null,M=!1,A="compose";const y={kind:"bug",selectedElement:null,region:null,marks:[],phase:"compose"};function D(g,E){c&&(c.status.textContent=g,c.status.classList.toggle("is-error",E))}function v(g){if(y.kind=g,!!c)for(const[E,P]of c.tabs){const U=E===g;P.classList.toggle("is-active",U),P.setAttribute("aria-pressed",String(U))}}function S(g){if(A=g,!c)return;const E=g!=="compose";c.panel.classList.toggle("is-marking",E),c.pickLayer.classList.toggle("is-visible",g==="picking"),c.captureLayer.classList.toggle("is-visible",g==="capturing"),c.drawLayer.classList.toggle("is-visible",g==="drawing"),c.pickBtn.classList.toggle("is-active",g==="picking"),c.captureBtn.classList.toggle("is-active",g==="capturing"||g==="drawing")}function O(){if(!c)return;const g=!!y.selectedElement,E=!!y.region,P=y.marks.length;c.mark.classList.toggle("has-element",g),c.selector.textContent=g?y.selectedElement.selector:"",c.pickBtn.textContent="",c.pickBtn.append(Co(a),a.createTextNode(g?"Change element":"Pick element")),c.captureBtn.classList.toggle("is-attached",E||P>0);const U=[];g&&U.push("Element"),E&&U.push("Region"),P>0&&U.push(`${P} mark${P===1?"":"s"}`),c.caption.textContent=U.length?`${U.join(" · ")} · masked screenshot on Send`:"Masked screenshot attached on Send"}function $(g){if(!c)return;if(!g){c.highlight.style.display="none";return}const E=g.getBoundingClientRect();c.highlight.style.display="block",c.highlight.style.left=`${E.left}px`,c.highlight.style.top=`${E.top}px`,c.highlight.style.width=`${E.width}px`,c.highlight.style.height=`${E.height}px`}function ee(){T==null||T.stop(),T=null}function I(){c&&(c.highlight.style.display="none"),ee(),A==="picking"&&S("compose")}function L(){c&&(W(),S("picking"),T=m.startElementPicker({doc:a,onHover:$,onPick:g=>{y.selectedElement=It(g),I(),O()},onCancel:I}))}function B(g){if(!c)return;const E=c.selBox;if(!g){E.style.display="none";return}E.style.display="block",E.style.left=`${g.x}px`,E.style.top=`${g.y}px`,E.style.width=`${g.width}px`,E.style.height=`${g.height}px`}function R(){C==null||C.stop(),C=null}function z(){c&&(W(),B(null),S("capturing"),C=yo({doc:a,onProgress:B,onComplete:g=>{R(),B(null),Uo(g)},onCancel:()=>{R(),B(null),S("compose")}}))}function we(g){c&&(c.drawFrame.style.left=`${g.x}px`,c.drawFrame.style.top=`${g.y}px`,c.drawFrame.style.width=`${g.width}px`,c.drawFrame.style.height=`${g.height}px`)}function te(g){if(w==null||w.setTool(g),!!c)for(const[E,P]of c.drawTools)P.classList.toggle("is-active",E===g)}function ne(g){c&&(c.undoBtn.disabled=g.length===0)}function q(){w==null||w.stop(),w=null}function Uo(g){c&&(_=g,we(g),S("drawing"),w=go({doc:a,svg:c.drawSvg,textInput:c.drawText,initialMarks:y.marks,onChange:ne}),te("arrow"),ne(y.marks))}function Bo(){w&&(y.marks=w.marks().slice(),_&&(y.region=_)),ct(),O()}function Oo(){ct(),O()}function ct(){q(),_=null,A==="drawing"&&S("compose")}function W(){ee(),R(),q(),_=null,B(null),c&&(c.highlight.style.display="none"),A!=="compose"&&S("compose")}function ke(){N!==null&&(clearTimeout(N),N=null)}async function zo(){if(!(!c||y.phase==="sending")){W(),y.phase="sending",c.sendBtn.disabled=!0,c.sendBtn.textContent="Sending…",D("",!1);try{var g,E,P,U;const oe=Fe({kind:y.kind,comment:c.comment.value,element:(g=y.selectedElement)!==null&&g!==void 0?g:void 0,region:(E=y.region)!==null&&E!==void 0?E:void 0,marks:y.marks.length>0?y.marks:void 0,url:(P=b.location)===null||P===void 0?void 0:P.href,environment:je(b,u),trace:(U=e.buffer)===null||U===void 0?void 0:U.snapshot()}),re=Re(oe,{hook:e.beforeSend,scrub:e.scrub});if(!re){y.phase="sent",c.panel.classList.add("is-sent"),N=setTimeout(de,at);return}const Z=await m.captureView({doc:a,win:b}),ue=Z?{blob:Z.blob,filename:`screenshot.${He(Z.type)}`}:null,ie=await m.submitReport(e.apiUrl,{key:e.key,identity:e.identity,content:re,screenshot:ue});ie.ok?(y.phase="sent",c.panel.classList.add("is-sent"),N=setTimeout(de,at)):(Ee(),D(ie.reason==="unreachable"?"Couldn't reach Fixback — try again.":"Fixback couldn't accept this report.",!0))}catch{Ee(),D("Something went wrong — try again.",!0)}}}function Ee(){y.phase="compose",c&&(c.sendBtn.disabled=!1,c.sendBtn.textContent="Send")}function Do(){var g;p=x(a,"div",{[ko]:""}),p.style.cssText="position:fixed;right:20px;bottom:84px;z-index:2147483001;margin:0;padding:0;border:0;display:none;";const E=p.attachShadow({mode:"open"}),P=a.createElement("style");P.textContent=wo,E.appendChild(P);const U=x(a,"button",{type:"button",class:"fb-ov-close","aria-label":"Close"},["✕"]),oe=x(a,"div",{class:"fb-ov-head"},[x(a,"span",{class:"fb-ov-mark-sq"}),x(a,"span",{class:"fb-ov-brand"},["Fixback"])]);e.tier!=null&&oe.appendChild(x(a,"span",{class:"fb-ov-tier","aria-label":`Trust tier: ${e.tier}`},[e.tier])),oe.appendChild(U);const re=new Map,Z=x(a,"div",{class:"fb-ov-tabs"});for(const{value:X,label:pe}of _o){const G=x(a,"button",{type:"button",class:"fb-ov-tab","data-kind":X},[pe]);G.addEventListener("click",()=>v(X)),re.set(X,G),Z.appendChild(G)}const ue=x(a,"span",{class:"fb-ov-selector"}),ie=x(a,"span",{class:"fb-ov-mark-caption"}),dt=x(a,"div",{class:"fb-ov-mark"},[ue,ie]),ut=x(a,"textarea",{class:"fb-ov-comment",placeholder:"Describe what you saw or want…","aria-label":"Comment"}),ft=x(a,"div",{class:"fb-ov-status",role:"status","aria-live":"polite"}),_e=x(a,"button",{type:"button",class:"fb-ov-pickbtn",title:"Point at an element"});_e.addEventListener("click",()=>{y.phase!=="sending"&&(A==="picking"?I():L())});const fe=x(a,"button",{type:"button",class:"fb-ov-capturebtn",title:"Capture a region and draw","aria-label":"Capture a region and draw"});fe.appendChild(Lo(a)),fe.addEventListener("click",()=>{y.phase!=="sending"&&z()});const Se=x(a,"button",{type:"button",class:"fb-ov-send"},["Send"]);Se.addEventListener("click",()=>{zo()});const Vo=x(a,"div",{class:"fb-ov-tools"},[_e,fe,Se]),Xo=x(a,"div",{class:"fb-ov-form"},[Z,dt,ut,ft,Vo]),Go=x(a,"div",{class:"fb-ov-done"},[x(a,"div",{class:"fb-ov-done__check"},["✓"]),x(a,"div",{class:"fb-ov-done__title"},["Report sent"]),x(a,"div",{class:"fb-ov-done__sub"},["Thanks — the team can see it now."])]),bt=x(a,"div",{class:"fb-ov-panel",role:"dialog","aria-label":"Fixback feedback"},[oe,Xo,Go]),Te=x(a,"div",{class:"fb-ov-highlight"});Te.style.display="none";const pt=x(a,"div",{class:"fb-ov-pick"},[x(a,"div",{class:"fb-ov-hint"},["Click the element you mean · Esc to cancel"]),Te]),Ce=x(a,"div",{class:"fb-ov-capture-sel"});Ce.style.display="none";const ht=x(a,"div",{class:"fb-ov-capture"},[x(a,"div",{class:"fb-ov-capture-dim"}),x(a,"div",{class:"fb-ov-hint"},["Drag to capture an area · Esc to cancel"]),Ce]),vt=F(a,"svg",{class:"fb-ov-draw-svg",width:"100%",height:"100%"}),Le=x(a,"input",{class:"fb-ov-draw-text",placeholder:"label…","aria-label":"Mark label"});Le.style.display="none";const mt=x(a,"div",{class:"fb-ov-draw-frame"}),gt=new Map,xt=[];for(const{tool:X,label:pe}of So){const G=x(a,"button",{type:"button",class:"fb-ov-drawtool","data-tool":X,title:pe,"aria-label":pe});G.appendChild(Ao(a,X)),G.addEventListener("click",()=>te(X)),gt.set(X,G),xt.push(G)}const be=x(a,"button",{type:"button",class:"fb-ov-draw-undo",title:"Undo","aria-label":"Undo"});be.appendChild(Mo(a)),be.addEventListener("click",()=>w==null?void 0:w.undo());const yt=x(a,"button",{type:"button",class:"fb-ov-draw-cancel"},["Cancel"]);yt.addEventListener("click",()=>Oo());const wt=x(a,"button",{type:"button",class:"fb-ov-draw-attach"},["Attach"]);wt.addEventListener("click",()=>Bo());const Yo=x(a,"div",{class:"fb-ov-draw-toolbar"},[...xt,x(a,"span",{class:"fb-ov-draw-divider"}),be,yt,wt]),kt=x(a,"div",{class:"fb-ov-draw"},[mt,vt,Le,Yo]);E.append(bt,pt,ht,kt),U.addEventListener("click",de),((g=e.target)!==null&&g!==void 0?g:a.body).appendChild(p),c={panel:bt,tabs:re,mark:dt,selector:ue,caption:ie,comment:ut,status:ft,pickBtn:_e,captureBtn:fe,sendBtn:Se,highlight:Te,pickLayer:pt,captureLayer:ht,selBox:Ce,drawLayer:kt,drawSvg:vt,drawText:Le,drawFrame:mt,drawTools:gt,undoBtn:be}}function jo(){(!p||!c)&&Do()}function Fo(){if(jo(),!(!p||!c)){ke(),W(),y.phase="compose",y.selectedElement=null,y.region=null,y.marks=[],c.panel.classList.remove("is-sent"),c.comment.value="",Ee(),D("",!1),v("bug"),O(),p.style.display="block",M=!0;try{c.comment.focus()}catch{}}}function de(){ke(),W(),p&&(p.style.display="none"),M=!1}function Ho(){ke(),W(),p==null||p.remove(),p=null,c=null,M=!1}return{open:Fo,close:de,destroy:Ho,get isOpen(){return M}}}function Co(e){return x(e,"span",{class:"fb-ov-pickbtn__glyph","aria-hidden":"true"},["⌖"])}function Lo(e){return F(e,"svg",{class:"fb-ov-icon",width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"1.5","aria-hidden":"true"},[F(e,"path",{d:"M2 5V2h3M14 5V2h-3M2 11v3h3M14 11v3h-3"})])}function Mo(e){return F(e,"svg",{class:"fb-ov-icon",width:"15",height:"15",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"1.6","aria-hidden":"true"},[F(e,"path",{d:"M6 4 3 7l3 3M3 7h6a4 4 0 0 1 0 8H7"})])}function Ao(e,t){return t==="text"?x(e,"span",{class:"fb-ov-drawtool__t","aria-hidden":"true"},["T"]):F(e,"svg",{class:"fb-ov-icon",width:"15",height:"15",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"1.6","aria-hidden":"true"},[{arrow:F(e,"path",{d:"M3 13 13 3M7 3h6v6"}),box:F(e,"rect",{x:"2.5",y:"3.5",width:"11",height:"9",rx:"1"}),pen:F(e,"path",{d:"M3 13l1-3 6-6 2 2-6 6-3 1Z"})}[t]])}var st="https://api.fixback.dev",ye={destroy(){}};function Io(){try{const e=window.location;return e.host||e.hostname||"this site"}catch{return"this site"}}function Ro(){try{return window.location.href}catch{return""}}function $o(e){const{options:t,apiUrl:n,key:o,identity:i,target:r,answer:s}=e,f=so(r,{key:o,reduceMotion:t.reduceMotion}),l=n.replace(/\/+$/,"");let d=null,h=()=>{};if(t.trace!==!1){var a;const p=(a=t.trace)!==null&&a!==void 0?a:{};d=Xt({maxBreadcrumbs:p.maxBreadcrumbs,maxAgeMs:p.maxAgeMs,beforeBreadcrumb:p.beforeBreadcrumb}),h=sn(d,{consoleLevels:p.consoleLevels,ignoreUrl:c=>c.startsWith(l)})}const b=To({apiUrl:n,key:o,identity:i,gate:s.gate,tier:s.tier,sdkVersion:ae,target:r,buffer:d,beforeSend:t.beforeSend,scrub:t.scrub}),u=()=>b.open();f.host.addEventListener(le,u);let m=()=>{};return t.autoCapture!==!1&&(m=Fn({apiUrl:n,key:o,identity:i,sdkVersion:ae,buffer:d,beforeSend:t.beforeSend,scrub:t.scrub}).destroy),()=>{f.host.removeEventListener(le,u),b.destroy(),lo(f),h(),m()}}async function lt(e,t){try{var n,o,i;if(typeof document=="undefined")return ye;const r=e==null?void 0:e.key;if(typeof r!="string"||r.length===0)return ye;const s=(n=e.apiUrl)!==null&&n!==void 0?n:st,f=(o=e.anonymousId)!==null&&o!==void 0?o:Hn(),l=(i=e.target)!==null&&i!==void 0?i:document.body;let d=!1,h=()=>{},a=()=>{};const b={destroy:()=>{d=!0,a(),a=()=>{},h(),h=()=>{}}},u=()=>{var p;const c=Je(r);return{signedIdentity:e.signedIdentity,reporterId:(p=e.reporterId)!==null&&p!==void 0?p:c==null?void 0:c.reporterId,anonymousId:f}},m=async p=>{const c=await _t(s,{key:r,...p});d||!(c!=null&&c.canSubmit)||(h=$o({options:e,apiUrl:s,key:r,identity:p,target:l,answer:c}))};if(t){const p=await Zn(s,t);if(d)return b;if(p&&p.status==="pending"){const c=Je(r),T=async w=>{const _=await Jn(s,t);d||(a(),a=()=>{},_&&_.status==="redeemed"?(Yn(r,{reporterId:_.reporterId,name:w.name,email:w.email}),Gn(window),await m({signedIdentity:e.signedIdentity,reporterId:_.reporterId,anonymousId:f})):await m(u()))},C=ho({origin:Io(),tier:p.tier,defaults:c?{name:c.name,email:c.email}:void 0,target:l,onConfirm:w=>{T(w)}});return a=()=>C.destroy(),b}}return await m(u()),b}catch{return ye}}function No(e){return lt(e,typeof window!="undefined"?Xn(Ro()):null)}function Po(e){return lt(e,typeof(e==null?void 0:e.token)=="string"&&e.token.length>0?e.token:null)}j.DEFAULT_API_URL=st,j.LAUNCH_EVENT=le,j.init=No,j.redeem=Po});
|
|
296
792
|
|
|
297
793
|
//# sourceMappingURL=fixback.umd.js.map
|