@crikket-io/capture 0.1.0 → 0.1.1

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.
Files changed (5) hide show
  1. package/dist/capture.css +103 -38
  2. package/dist/capture.global.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/launcher.css +44 -16
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{A,B,C as J,D as X,E as K,F as ae,t as h,u as s}from"./index-shtqtrh3.js";import{G as He}from"./index-0avnsp70.js";import{J as H,K as w,L as k,M as p,N as L,Q as v,U as ne}from"./index-ehy0ec5e.js";import{V as T}from"./index-97c5xshv.js";import{W as C,X as b}from"./index-331vjad4.js";function z(e,t){let r=document.createElement("div"),o=r.attachShadow({mode:"open"}),a=document.createElement("style");a.textContent=":host {\n all: initial;\n}\n\n.capture-launcher {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: var(--capture-z-index);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 36px;\n padding: 0 16px;\n border: 0;\n border-radius: 9999px;\n background: #111827;\n color: #ffffff;\n font:\n 500 14px / 1.2 Inter Variable,\n Inter,\n ui-sans-serif,\n system-ui,\n sans-serif;\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n cursor: pointer;\n transition: opacity 150ms ease;\n}\n\n.capture-launcher:hover {\n opacity: 0.92;\n}\n\n.capture-launcher:focus-visible {\n outline: 2px solid rgb(17 24 39 / 0.45);\n outline-offset: 2px;\n}\n\n.capture-launcher:disabled {\n opacity: 0.7;\n cursor: progress;\n}\n";let n=document.createElement("button");return n.className="capture-launcher",n.style.setProperty("--capture-z-index",String(t.zIndex)),n.type="button",n.textContent="Report Issue",n.setAttribute("aria-label","Report an issue"),n.addEventListener("click",t.onOpen),n.addEventListener("pointerenter",t.onPrefetch,{once:!0,passive:!0}),n.addEventListener("focus",t.onPrefetch,{once:!0,passive:!0}),o.append(a,n),e.append(r),{setLoading:(l)=>{n.disabled=l,n.textContent=l?"Loading...":"Report Issue"},unmount:()=>{n.removeEventListener("click",t.onOpen),r.remove()}}}class P{collector=null;collectorPromise=null;async startScreenshotSession(){(await this.ensureCollector()).startSession("screenshot",H)}async startRecordingSession(){(await this.ensureCollector()).startSession("video")}markRecordingStarted(e){this.collector?.markRecordingStarted(e)}finalizeSession(){return this.collector?.finalizeSession()??ce()}clearSession(){this.collector?.clearSession()}dispose(){this.collectorPromise=null,this.collector?.dispose(),this.collector=null}ensureCollector(){if(this.collector)return Promise.resolve(this.collector);if(this.collectorPromise)return this.collectorPromise;let e=import("./debugger-collector-f0etqtvj.js").then(({DebuggerCollector:t})=>{let r=new t;return r.install(),this.collector=r,r}).finally(()=>{if(this.collectorPromise===e)this.collectorPromise=null});return this.collectorPromise=e,e}}function ce(){return{warnings:["Debugger session was not available. This report will not include debugger data."],debuggerSummary:{actions:0,logs:0,networkRequests:0}}}async function O(){return(await import("./capture-screenshot-b3snwyge.js")).captureScreenshot()}async function D(){return(await import("./start-display-recording-cve3f1me.js")).startDisplayRecording()}import{createRoot as Te}from"react-dom/client";import{useSyncExternalStore as Ee}from"react";import{lazy as me,Suspense as de}from"react";import{jsx as N,jsxs as I}from"react/jsx-runtime";function x(e){return I("section",{className:"grid gap-4 p-5",children:[N("p",{className:"m-0 text-muted-foreground text-sm",children:"Choose how to capture the issue."}),I("div",{className:"grid grid-cols-2 gap-2",children:[N(s,{className:"w-full",disabled:e.busy,onClick:e.onStartVideo,type:"button",children:"Record Video"}),N(s,{className:"w-full",disabled:e.busy,onClick:e.onTakeScreenshot,type:"button",variant:"outline",children:"Take Screenshot"})]})]})}import{jsx as c,jsxs as g}from"react/jsx-runtime";function V(e){let t=e.state.copyLabel==="Copied";return g("section",{className:"grid gap-5 p-5",children:[g("div",{className:"grid gap-1 text-center",children:[c("strong",{className:"text-green-700 text-xl",children:"Bug report submitted"}),c("p",{className:"m-0 text-muted-foreground text-sm",children:"Your bug report has been created successfully."})]}),g("div",{className:"grid gap-2",children:[c(K,{children:"Share URL"}),g("div",{className:"flex flex-col gap-2 sm:flex-row",children:[c(X,{className:"flex-1",readOnly:!0,type:"text",value:e.state.shareUrl}),c(s,{"aria-label":t?"Copied":"Copy link",className:"shrink-0",disabled:e.state.busy,onClick:e.handlers.onCopyLink,size:"icon",type:"button",variant:"outline",children:t?c(B,{className:"h-4 w-4"}):c(A,{className:"h-4 w-4"})})]})]}),g("div",{className:"grid gap-2 sm:grid-cols-2",children:[g(s,{className:"w-full gap-2",disabled:e.state.busy,onClick:e.handlers.onOpenLink,type:"button",variant:"outline",children:[c(J,{className:"h-4 w-4"}),"Open Link"]}),c(s,{className:"w-full gap-2",disabled:e.state.busy,onClick:e.handlers.onRetry,type:"button",children:"Capture Another"})]})]})}import{jsx as d,jsxs as fe}from"react/jsx-runtime";var he=me(async()=>{return{default:(await import("./review-form-section-frr1x0zk.js")).ReviewFormSection}});function _(e){if(e.state.view==="chooser")return d(x,{busy:e.isBusy,onStartVideo:e.handlers.onStartVideo,onTakeScreenshot:e.handlers.onTakeScreenshot});if(e.state.view==="review")return d(de,{fallback:d(ge,{}),children:d(he,{formKey:e.state.reviewFormKey,isSubmitting:e.isSubmitPending,onCancel:e.handlers.onCancel,onSubmit:e.handlers.onSubmit,state:e.state})});if(e.state.view==="success")return d(V,{handlers:e.handlers,state:e.state});return null}function ge(){return fe("section",{className:"grid gap-2 px-5 py-8 text-muted-foreground text-sm",children:[d("p",{children:"Preparing review form..."}),d("p",{className:"text-xs",children:"Your capture is ready. Loading report details."})]})}import{jsx as Ce}from"react/jsx-runtime";function q(e){return Ce("button",{"aria-label":"Report an issue",className:"capture-launcher",disabled:e.disabled,onClick:e.onClick,style:{["--capture-z-index"]:String(e.zIndex)},type:"button",children:"Report Issue"})}import{jsx as S}from"react/jsx-runtime";function F(e){return S("div",{...e,className:h("rounded-xl border border-border/80 bg-card text-card-foreground shadow-2xl",e.className),children:e.children})}function Q(e){return S("div",{...e,className:h("border-b px-5 py-4",e.className),children:e.children})}function W(e){return S("div",{...e,className:e.className,children:e.children})}function Z(e){return S("h2",{className:h("font-semibold text-lg",e.className),children:e.children})}function $(e){return S("p",{className:h("m-0 text-muted-foreground text-sm",e.className),children:e.children})}import{jsx as be}from"react/jsx-runtime";function G(e){return be("span",{className:h("inline-flex items-center rounded-full bg-muted px-2 py-0.5 font-medium text-[11px] text-foreground",e.className),children:e.children})}import{jsx as R,jsxs as Se}from"react/jsx-runtime";function Y(e){return Se("div",{className:"fixed right-6 bottom-[76px] z-[var(--capture-z-index)] flex items-center gap-2 rounded-full border bg-card px-3 py-2 text-card-foreground shadow-2xl",style:{["--capture-z-index"]:String(e.zIndex+2)},children:[R("span",{"aria-hidden":"true",className:"size-2 rounded-full bg-foreground"}),R(G,{variant:"secondary",children:"Recording"}),R("span",{className:"min-w-11 text-right font-mono text-muted-foreground text-xs",children:e.recordingTime}),R(s,{disabled:e.busy,onClick:e.onStopRecording,size:"sm",type:"button",children:"Stop"})]})}function j(e){if(e==="chooser")return"Choose how to capture";if(e==="review")return"Review and submit";if(e==="success")return"Submission complete";return"Capture issue details"}import{jsx as m,jsxs as y}from"react/jsx-runtime";function ee(e){let t=e.state.busy||e.isSubmitPending,r=e.state.view==="review";return y("div",{className:"crikket-capture-root",children:[m(q,{disabled:t,onClick:e.handlers.onLauncherClick,zIndex:e.zIndex}),e.state.overlayOpen?m("div",{className:"fixed inset-0 z-[var(--capture-overlay-z-index)] grid overflow-y-auto bg-black/60 p-4",style:{["--capture-overlay-z-index"]:String(e.zIndex+1)},children:y(F,{className:r?"m-auto flex h-[min(820px,calc(100dvh-2rem))] w-full max-w-[1120px] flex-col overflow-hidden border-border/80 bg-card text-card-foreground shadow-2xl":"m-auto flex max-h-[calc(100dvh-2rem)] w-full max-w-[560px] flex-col overflow-hidden border-border/80 bg-card text-card-foreground shadow-2xl",role:"dialog",children:[y(Q,{className:"flex flex-row items-start justify-between gap-3 border-b",children:[y("div",{className:"grid gap-1",children:[m(Z,{children:"Crikket Capture"}),m($,{children:j(e.state.view)})]}),m(s,{disabled:t,onClick:e.handlers.onClose,type:"button",variant:"outline",children:"Close"})]}),e.state.errorMessage?m("p",{className:"mx-5 mt-5 rounded-md border bg-muted px-3 py-2 text-sm",role:"alert",children:e.state.errorMessage}):null,m(W,{className:r?"min-h-0 flex-1 overflow-hidden px-0 pb-0":"min-h-0 overflow-y-auto px-0 pb-0",children:m(_,{handlers:e.handlers,isBusy:t,isSubmitPending:e.isSubmitPending,state:e.state})})]})}):null,e.state.recordingDockOpen?m(Y,{busy:t,onStopRecording:e.handlers.onStopRecording,recordingTime:e.recordingTime,zIndex:e.zIndex}):null]})}import{useEffect as Re,useRef as ye,useState as ve}from"react";var we=1500;function te(e){let t=ye(null),[r,o]=ve(!1);Re(()=>{return()=>{if(t.current!==null)window.clearTimeout(t.current)}},[]);let a=async(i)=>{e.store.patchState({busy:!0,errorMessage:null});try{await i()}finally{e.store.patchState({busy:!1})}},n=(i)=>{a(i).catch(()=>{return})},l=(i)=>{e.store.openChooser(),e.store.showError(v(i))};return{isSubmitPending:r,handlers:{onLauncherClick:()=>{e.callbacks.onReset(),e.store.openChooser()},onClose:()=>{e.callbacks.onClose()},onStartVideo:()=>{n(async()=>{try{let i=await e.callbacks.onStartVideo();e.store.showRecording(i.startedAt)}catch(i){l(i)}})},onTakeScreenshot:()=>{n(async()=>{try{await e.callbacks.onTakeScreenshot()}catch(i){l(i)}})},onStopRecording:()=>{n(async()=>{try{await e.callbacks.onStopRecording()}catch(i){l(i)}})},onSubmit:(i,f)=>{return o(!0),e.store.patchState({errorMessage:null,reviewDraft:i}),e.callbacks.onSubmit(i,f).catch((E)=>{e.store.showError(v(E))}).finally(()=>{o(!1)})},onCancel:()=>{e.callbacks.onReset(),e.store.openChooser()},onRetry:()=>{e.callbacks.onReset(),e.store.openChooser()},onCopyLink:()=>{if(!e.shareUrl.trim())return;navigator.clipboard.writeText(e.shareUrl).then(()=>{if(e.store.patchState({copyLabel:"Copied"}),t.current!==null)window.clearTimeout(t.current);t.current=window.setTimeout(()=>{e.store.patchState({copyLabel:"Copy Link"})},we)}).catch((i)=>{e.store.showError(v(i))})},onOpenLink:()=>{if(!e.shareUrl.trim())return;window.open(e.shareUrl,"_blank","noopener")}}}}import{useEffect as ke,useState as pe}from"react";var Le=250;function re(e){let[t,r]=pe(()=>Date.now());if(ke(()=>{if(!(e.recordingDockOpen&&e.recordingStartedAt))return;r(Date.now());let o=window.setInterval(()=>{r(Date.now())},Le);return()=>{window.clearInterval(o)}},[e.recordingDockOpen,e.recordingStartedAt]),e.recordingStartedAt===null)return"00:00";return ne(t-e.recordingStartedAt)}import{jsx as Pe}from"react/jsx-runtime";function oe(e){let t=Ee(e.store.subscribe,e.store.getSnapshot,e.store.getSnapshot),{handlers:r,isSubmitPending:o}=te({callbacks:e.callbacks,shareUrl:t.shareUrl,store:e.store}),a=re({recordingDockOpen:t.recordingDockOpen,recordingStartedAt:t.recordingStartedAt});return Pe(ee,{handlers:r,isSubmitPending:o,recordingTime:a,state:t,zIndex:e.zIndex})}var ue=ae.none,Ne={actions:0,logs:0,networkRequests:0};function se(){let e=ie(),t=new Set,r=()=>{for(let n of t)n()},o=(n)=>{e={...e,...n},r()};return{getSnapshot:()=>e,subscribe:(n)=>{return t.add(n),()=>{t.delete(n)}},patchState:o,openChooser:()=>{o({overlayOpen:!0,recordingDockOpen:!1,recordingStartedAt:null,view:"chooser",errorMessage:null,busy:!1})},close:()=>{o({overlayOpen:!1,recordingDockOpen:!1,recordingStartedAt:null,busy:!1,errorMessage:null})},showRecording:(n)=>{o({overlayOpen:!1,recordingDockOpen:!0,recordingStartedAt:n,view:"recording",errorMessage:null,busy:!1})},showReview:(n)=>{o({overlayOpen:!0,recordingDockOpen:!1,recordingStartedAt:null,view:"review",errorMessage:null,busy:!1,media:n.media,warnings:[...n.warnings],summary:n.summary,shareUrl:"",copyLabel:"Copy Link",reviewDraft:{title:"",description:"",priority:ue,visibility:T.private},reviewFormKey:n.media.objectUrl})},showSuccess:(n)=>{o({overlayOpen:!0,recordingDockOpen:!1,recordingStartedAt:null,view:"success",errorMessage:null,busy:!1,shareUrl:n??"",copyLabel:"Copy Link"})},showError:(n)=>{o({errorMessage:n})},setTitleIfEmpty:(n)=>{if(e.reviewDraft.title.trim().length>0)return;o({reviewDraft:{...e.reviewDraft,title:n.slice(0,200)}})},destroy:()=>{e=ie(),t.clear()}}}function ie(){return{view:"chooser",overlayOpen:!1,recordingDockOpen:!1,busy:!1,errorMessage:null,recordingStartedAt:null,warnings:[],summary:{...Ne},media:null,shareUrl:"",copyLabel:"Copy Link",reviewDraft:{title:"",description:"",priority:ue,visibility:T.private},reviewFormKey:""}}import{jsx as Me}from"react/jsx-runtime";var Ue="/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: \"Inter Variable\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-green-700: oklch(52.7% 0.154 150.069);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --aspect-video: 16 / 9;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: \"Inter Variable\", sans-serif;\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .fixed {\n position: fixed;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .bottom-\\[76px\\] {\n bottom: 76px;\n }\n .z-\\[var\\(--capture-overlay-z-index\\)\\] {\n z-index: var(--capture-overlay-z-index);\n }\n .z-\\[var\\(--capture-z-index\\)\\] {\n z-index: var(--capture-z-index);\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(var(--spacing) * 0);\n }\n .m-auto {\n margin: auto;\n }\n .mx-5 {\n margin-inline: calc(var(--spacing) * 5);\n }\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n .ml-auto {\n margin-left: auto;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline-flex {\n display: inline-flex;\n }\n .aspect-video {\n aspect-ratio: var(--aspect-video);\n }\n .size-2 {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-\\[min\\(820px\\,calc\\(100dvh-2rem\\)\\)\\] {\n height: min(820px, calc(100dvh - 2rem));\n }\n .h-full {\n height: 100%;\n }\n .max-h-\\[calc\\(100dvh-2rem\\)\\] {\n max-height: calc(100dvh - 2rem);\n }\n .max-h-full {\n max-height: 100%;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-24 {\n min-height: calc(var(--spacing) * 24);\n }\n .min-h-32 {\n min-height: calc(var(--spacing) * 32);\n }\n .min-h-\\[320px\\] {\n min-height: 320px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[560px\\] {\n max-width: 560px;\n }\n .max-w-\\[960px\\] {\n max-width: 960px;\n }\n .max-w-\\[1120px\\] {\n max-width: 1120px;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-11 {\n min-width: calc(var(--spacing) * 11);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .scale-110 {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .cursor-crosshair {\n cursor: crosshair;\n }\n .cursor-default {\n cursor: default;\n }\n .resize-y {\n resize: vertical;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-rows-\\[auto_1fr\\] {\n grid-template-rows: auto 1fr;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius);\n }\n .rounded-md {\n border-radius: calc(var(--radius) - 2px);\n }\n .rounded-xl {\n border-radius: calc(var(--radius) + 4px);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-border {\n border-color: var(--border);\n }\n .border-border\\/70 {\n border-color: var(--border);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--border) 70%, transparent);\n }\n }\n .border-border\\/80 {\n border-color: var(--border);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--border) 80%, transparent);\n }\n }\n .border-foreground {\n border-color: var(--foreground);\n }\n .border-input {\n border-color: var(--input);\n }\n .border-transparent {\n border-color: transparent;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/60 {\n background-color: color-mix(in srgb, #000 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n }\n }\n .bg-card {\n background-color: var(--card);\n }\n .bg-foreground {\n background-color: var(--foreground);\n }\n .bg-muted {\n background-color: var(--muted);\n }\n .bg-muted\\/20 {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 20%, transparent);\n }\n }\n .bg-muted\\/40 {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 40%, transparent);\n }\n }\n .bg-muted\\/60 {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 60%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .object-contain {\n object-fit: contain;\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .px-0 {\n padding-inline: calc(var(--spacing) * 0);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .py-0 {\n padding-block: calc(var(--spacing) * 0);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .pb-0 {\n padding-bottom: calc(var(--spacing) * 0);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n .text-center {\n text-align: center;\n }\n .text-right {\n text-align: right;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-background {\n color: var(--background);\n }\n .text-card-foreground {\n color: var(--card-foreground);\n }\n .text-destructive {\n color: var(--destructive);\n }\n .text-foreground {\n color: var(--foreground);\n }\n .text-green-700 {\n color: var(--color-green-700);\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition-\\[border-color\\,box-shadow\\] {\n transition-property: border-color,box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .hover\\:bg-muted\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 80%, transparent);\n }\n }\n }\n }\n .hover\\:opacity-90 {\n &:hover {\n @media (hover: hover) {\n opacity: 90%;\n }\n }\n }\n .focus-visible\\:border-ring {\n &:focus-visible {\n border-color: var(--ring);\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-ring\\/60 {\n &:focus-visible {\n --tw-ring-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 60%, transparent);\n }\n }\n }\n .focus-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .sm\\:flex-row {\n @media (width >= 40rem) {\n flex-direction: row;\n }\n }\n .lg\\:grid-cols-\\[minmax\\(0\\,1\\.5fr\\)_360px\\] {\n @media (width >= 64rem) {\n grid-template-columns: minmax(0,1.5fr) 360px;\n }\n }\n .lg\\:border-r {\n @media (width >= 64rem) {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n }\n .lg\\:border-b-0 {\n @media (width >= 64rem) {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n}\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.58 0.22 27);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n}\n@layer base {\n :host {\n font-family: var(--font-sans);\n }\n *,\n ::before,\n ::after {\n box-sizing: border-box;\n border-color: var(--border);\n }\n .crikket-capture-root {\n color: var(--foreground);\n font-family: var(--font-sans);\n }\n .capture-launcher {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: var(--capture-z-index);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 36px;\n padding: 0 16px;\n border: 0;\n border-radius: 9999px;\n background: #111827;\n color: #ffffff;\n font: 500 14px / 1.2 Inter Variable,\n Inter,\n ui-sans-serif,\n system-ui,\n sans-serif;\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .capture-launcher:hover {\n opacity: 0.92;\n }\n .capture-launcher:focus-visible {\n outline: 2px solid rgb(17 24 39 / 0.45);\n outline-offset: 2px;\n }\n .capture-launcher:disabled {\n opacity: 0.7;\n cursor: progress;\n }\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n }\n }\n}\n";function le(e,t,r){let o=document.createElement("div"),a=o.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=Ue;let l=document.createElement("div");a.append(n),a.append(l),e.append(o);let i=Te(l),f=se();return i.render(Me(oe,{callbacks:r,store:f,zIndex:t})),{setHidden:(E)=>{o.style.display=E?"none":""},store:f,unmount:()=>{i.unmount(),o.remove(),f.destroy()}}}class U{runtimeConfig=null;submitTransport;mountedTarget=null;mountedUi=null;debuggerCollector=new P;activeRecording=null;currentMedia=null;currentReview=null;init(e){let t={key:w(e.key),host:k(e.host),submitPath:p(e.submitPath),zIndex:L(e.zIndex)};if(this.runtimeConfig=t,this.submitTransport=e.submitTransport,e.autoMount??!0)this.mount(e.mountTarget);return this}isInitialized(){return this.runtimeConfig!==null}getConfig(){return this.runtimeConfig}mount(e){let t=this.getRuntimeConfig();if(this.ensureBrowserContext(),this.mountedTarget)return;let r=e??document.body;this.mountedUi=le(r,t.zIndex,{onClose:()=>{this.close()},onStartVideo:()=>{return this.startRecording()},onTakeScreenshot:async()=>{if(!await this.takeScreenshot())throw Error("Screenshot capture failed.")},onStopRecording:async()=>{if(!await this.stopRecording())throw Error("Recording capture failed.")},onSubmit:(o,a)=>{return this.submit(o,a).then(()=>{return})},onReset:()=>{this.reset()}}),this.mountedTarget=r}unmount(){this.abortActiveRecording(),this.setUiHidden(!1),this.mountedUi?.unmount(),this.mountedUi=null,this.debuggerCollector.dispose(),this.mountedTarget=null}open(){if(this.getRuntimeConfig(),!this.mountedTarget)this.mount();this.mountedUi?.store.openChooser()}close(){this.setUiHidden(!1),this.mountedUi?.store.close()}destroy(){this.reset(),this.unmount(),this.runtimeConfig=null,this.submitTransport=void 0}async startRecording(){this.getRuntimeConfig(),this.ensureBrowserContext(),this.abortActiveRecording(),await this.debuggerCollector.startRecordingSession();try{await this.hideUiForCapture();let e=await D();return this.debuggerCollector.markRecordingStarted(e.startedAt),this.activeRecording=e,e.finished.then(async(t)=>{if(this.activeRecording!==e)return;this.activeRecording=null,await this.finalizeCapturedMedia({blob:t.blob,captureType:"video",durationMs:t.durationMs})}).catch(()=>{return}),{startedAt:e.startedAt}}catch(e){throw this.setUiHidden(!1),this.debuggerCollector.clearSession(),e}}async stopRecording(){if(!this.activeRecording)return null;let e=this.activeRecording;this.activeRecording=null;let t=await e.stop();return await this.finalizeCapturedMedia({blob:t.blob,captureType:"video",durationMs:t.durationMs}),t.blob}async takeScreenshot(){this.getRuntimeConfig(),this.ensureBrowserContext(),await this.debuggerCollector.startScreenshotSession();let e;try{await this.hideUiForCapture(),e=await O()}catch(t){throw this.setUiHidden(!1),this.debuggerCollector.clearSession(),t}return await this.finalizeCapturedMedia({blob:e,captureType:"screenshot",durationMs:null}),e}async submit(e,t){let r=this.getRuntimeConfig();if(!(this.currentMedia&&this.currentReview))throw Error("No capture is ready to submit. Start a recording or take a screenshot first.");let{submitCapturedReport:o}=await import("./submit-captured-report-behdzdha.js"),a=this.currentMedia.captureType==="screenshot"&&t?.screenshotBlobOverride?{...this.currentMedia,blob:t.screenshotBlobOverride}:this.currentMedia,n=await o({config:r,draft:e,media:a,review:this.currentReview,submitTransport:this.submitTransport});if(this.mountedUi)this.mountedUi.store.showSuccess(n.shareUrl);return n}reset(){this.abortActiveRecording(),this.setUiHidden(!1),this.clearMedia(),this.currentReview=null,this.debuggerCollector.clearSession()}setMedia(e){return this.clearMedia(),this.currentMedia={blob:e.blob,captureType:e.captureType,durationMs:e.durationMs,objectUrl:URL.createObjectURL(e.blob)},this.currentMedia}clearMedia(){if(!this.currentMedia)return;URL.revokeObjectURL(this.currentMedia.objectUrl),this.currentMedia=null}finalizeCapturedMedia(e){this.setUiHidden(!1);let t=this.debuggerCollector.finalizeSession(),r=this.setMedia(e);if(this.currentReview=t,!this.mountedUi)return;this.mountedUi.store.showReview({media:r,warnings:t.warnings,summary:t.debuggerSummary}),this.prefillTitle()}abortActiveRecording(){if(!this.activeRecording)return;this.activeRecording.abort(),this.activeRecording=null}async hideUiForCapture(){this.setUiHidden(!0),await ze()}setUiHidden(e){this.mountedUi?.setHidden(e)}prefillTitle(){let e=document.title.trim();if(e.length===0)return;this.mountedUi?.store.setTitleIfEmpty(e)}getRuntimeConfig(){if(!this.runtimeConfig)throw Error("Capture SDK is not initialized. Call capture.init({ key }) first.");return this.runtimeConfig}ensureBrowserContext(){if(typeof window>"u"||typeof document>"u")throw Error("Capture SDK can only run in a browser environment.")}}function ze(){return new Promise((e)=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{e()})})})}class M{runtimeConfig=null;initOptions=null;submitTransport;mountedTarget=null;mountedLauncher=null;eagerRuntime=null;eagerRuntimePromise=null;lifecycleVersion=0;init(e){let t={key:w(e.key),host:k(e.host),submitPath:p(e.submitPath),zIndex:L(e.zIndex)};if(this.runtimeConfig=t,this.submitTransport=e.submitTransport,this.initOptions={...e,host:t.host,key:t.key,submitPath:t.submitPath,zIndex:t.zIndex,submitTransport:this.submitTransport},e.autoMount??!0)this.mount(e.mountTarget);return this}isInitialized(){return this.runtimeConfig!==null}getConfig(){return this.runtimeConfig}mount(e){if(this.ensureBrowserContext(),this.eagerRuntime){this.eagerRuntime.mount(e);return}let t=e??document.body;if(this.mountedTarget=t,this.mountedLauncher)return;let r=this.getRuntimeConfig();this.mountedLauncher=z(t,{onOpen:()=>{this.open()},onPrefetch:()=>{this.prefetchRuntime().catch(()=>{return})},zIndex:r.zIndex})}unmount(){this.mountedLauncher?.unmount(),this.mountedLauncher=null,this.mountedTarget=null,this.eagerRuntime?.unmount()}open(){this.loadEagerRuntime(!0).catch(()=>{return})}close(){this.eagerRuntime?.close()}destroy(){this.lifecycleVersion+=1,this.mountedLauncher?.unmount(),this.mountedLauncher=null,this.mountedTarget=null,this.eagerRuntimePromise=null,this.eagerRuntime?.destroy(),this.eagerRuntime=null,this.runtimeConfig=null,this.initOptions=null,this.submitTransport=void 0}async startRecording(){return(await this.loadEagerRuntime(!1)).startRecording()}async stopRecording(){if(this.eagerRuntime)return this.eagerRuntime.stopRecording();return(await this.loadEagerRuntime(!1)).stopRecording()}async takeScreenshot(){return(await this.loadEagerRuntime(!1)).takeScreenshot()}async submit(e){return(await this.loadEagerRuntime(!1)).submit(e)}reset(){this.eagerRuntime?.reset()}async prefetchRuntime(){await this.loadEagerRuntimeModule().catch(()=>{return})}async loadEagerRuntime(e){let t=await this.getOrCreateEagerRuntime();if(e)t.open();return t}getOrCreateEagerRuntime(){if(this.eagerRuntime)return Promise.resolve(this.eagerRuntime);if(this.eagerRuntimePromise)return this.eagerRuntimePromise;let e=this.getInitOptions(),t=this.lifecycleVersion;this.mountedLauncher?.setLoading(!0);let r=this.loadEagerRuntimeModule().then(({CaptureSdkRuntime:o})=>{if(t!==this.lifecycleVersion)throw Error("Capture SDK runtime load was cancelled.");let a=new o;return a.init({...e,autoMount:!0,mountTarget:this.mountedTarget??e.mountTarget}),this.eagerRuntime=a,this.mountedLauncher?.unmount(),this.mountedLauncher=null,a}).finally(()=>{if(this.eagerRuntimePromise===r)this.eagerRuntimePromise=null;this.mountedLauncher?.setLoading(!1)});return this.eagerRuntimePromise=r,r}loadEagerRuntimeModule(){return Promise.resolve({CaptureSdkRuntime:U})}getInitOptions(){if(!this.initOptions)throw Error("Capture SDK is not initialized. Call capture.init({ key }) first.");return this.initOptions}getRuntimeConfig(){if(!this.runtimeConfig)throw Error("Capture SDK is not initialized. Call capture.init({ key }) first.");return this.runtimeConfig}ensureBrowserContext(){if(typeof window>"u"||typeof document>"u")throw Error("Capture SDK can only run in a browser environment.")}}var u=new M;function Zt(e){return u.init(e)}function $t(e){u.mount(e)}function Gt(){u.unmount()}function Yt(){u.open()}function jt(){u.close()}function en(){u.destroy()}function tn(){return u.startRecording()}function nn(){return u.stopRecording()}function rn(){return u.takeScreenshot()}function on(e){return u.submit(e)}function an(){u.reset()}function un(){return u.isInitialized()}function sn(){return u.getConfig()}export{Gt as unmount,rn as takeScreenshot,on as submit,nn as stopRecording,tn as startRecording,an as reset,Yt as open,$t as mount,un as isInitialized,Zt as init,sn as getConfig,en as destroy,He as defaultSubmitTransport,jt as close};
1
+ import{A,B,C as J,D as X,E as K,F as ae,t as h,u as s}from"./index-shtqtrh3.js";import{G as He}from"./index-0avnsp70.js";import{J as H,K as w,L as k,M as p,N as L,Q as v,U as ne}from"./index-ehy0ec5e.js";import{V as T}from"./index-97c5xshv.js";import{W as C,X as b}from"./index-331vjad4.js";function z(e,t){let r=document.createElement("div"),o=r.attachShadow({mode:"open"}),a=document.createElement("style");a.textContent=":host {\n all: initial;\n color-scheme: light dark;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n --font-sans: \"Inter Variable\", sans-serif;\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --primary: oklch(0.87 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n }\n}\n\n.capture-launcher {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: var(--capture-z-index);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 36px;\n padding: 0 14px;\n border: 1px solid transparent;\n border-radius: 8px;\n background: var(--primary);\n color: var(--primary-foreground);\n font-family: var(--font-sans);\n font-size: 14px;\n font-weight: 500;\n line-height: 1.2;\n white-space: nowrap;\n box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n box-shadow 150ms ease,\n transform 150ms ease;\n user-select: none;\n}\n\n.capture-launcher:hover {\n transform: translateY(-1px);\n box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);\n}\n\n.capture-launcher:focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 2px;\n}\n\n.capture-launcher:disabled {\n opacity: 0.5;\n cursor: progress;\n transform: none;\n}\n\n.capture-launcher:active:not(:disabled) {\n transform: translateY(0);\n}\n";let n=document.createElement("button");return n.className="capture-launcher",n.style.setProperty("--capture-z-index",String(t.zIndex)),n.type="button",n.textContent="Report Issue",n.setAttribute("aria-label","Report an issue"),n.addEventListener("click",t.onOpen),n.addEventListener("pointerenter",t.onPrefetch,{once:!0,passive:!0}),n.addEventListener("focus",t.onPrefetch,{once:!0,passive:!0}),o.append(a,n),e.append(r),{setLoading:(l)=>{n.disabled=l,n.textContent=l?"Loading...":"Report Issue"},unmount:()=>{n.removeEventListener("click",t.onOpen),r.remove()}}}class P{collector=null;collectorPromise=null;async startScreenshotSession(){(await this.ensureCollector()).startSession("screenshot",H)}async startRecordingSession(){(await this.ensureCollector()).startSession("video")}markRecordingStarted(e){this.collector?.markRecordingStarted(e)}finalizeSession(){return this.collector?.finalizeSession()??ce()}clearSession(){this.collector?.clearSession()}dispose(){this.collectorPromise=null,this.collector?.dispose(),this.collector=null}ensureCollector(){if(this.collector)return Promise.resolve(this.collector);if(this.collectorPromise)return this.collectorPromise;let e=import("./debugger-collector-f0etqtvj.js").then(({DebuggerCollector:t})=>{let r=new t;return r.install(),this.collector=r,r}).finally(()=>{if(this.collectorPromise===e)this.collectorPromise=null});return this.collectorPromise=e,e}}function ce(){return{warnings:["Debugger session was not available. This report will not include debugger data."],debuggerSummary:{actions:0,logs:0,networkRequests:0}}}async function O(){return(await import("./capture-screenshot-b3snwyge.js")).captureScreenshot()}async function D(){return(await import("./start-display-recording-cve3f1me.js")).startDisplayRecording()}import{createRoot as Te}from"react-dom/client";import{useSyncExternalStore as Ee}from"react";import{lazy as me,Suspense as de}from"react";import{jsx as N,jsxs as I}from"react/jsx-runtime";function x(e){return I("section",{className:"grid gap-4 p-5",children:[N("p",{className:"m-0 text-muted-foreground text-sm",children:"Choose how to capture the issue."}),I("div",{className:"grid grid-cols-2 gap-2",children:[N(s,{className:"w-full",disabled:e.busy,onClick:e.onStartVideo,type:"button",children:"Record Video"}),N(s,{className:"w-full",disabled:e.busy,onClick:e.onTakeScreenshot,type:"button",variant:"outline",children:"Take Screenshot"})]})]})}import{jsx as c,jsxs as g}from"react/jsx-runtime";function V(e){let t=e.state.copyLabel==="Copied";return g("section",{className:"grid gap-5 p-5",children:[g("div",{className:"grid gap-1 text-center",children:[c("strong",{className:"text-green-700 text-xl",children:"Bug report submitted"}),c("p",{className:"m-0 text-muted-foreground text-sm",children:"Your bug report has been created successfully."})]}),g("div",{className:"grid gap-2",children:[c(K,{children:"Share URL"}),g("div",{className:"flex flex-col gap-2 sm:flex-row",children:[c(X,{className:"flex-1",readOnly:!0,type:"text",value:e.state.shareUrl}),c(s,{"aria-label":t?"Copied":"Copy link",className:"shrink-0",disabled:e.state.busy,onClick:e.handlers.onCopyLink,size:"icon",type:"button",variant:"outline",children:t?c(B,{className:"h-4 w-4"}):c(A,{className:"h-4 w-4"})})]})]}),g("div",{className:"grid gap-2 sm:grid-cols-2",children:[g(s,{className:"w-full gap-2",disabled:e.state.busy,onClick:e.handlers.onOpenLink,type:"button",variant:"outline",children:[c(J,{className:"h-4 w-4"}),"Open Link"]}),c(s,{className:"w-full gap-2",disabled:e.state.busy,onClick:e.handlers.onRetry,type:"button",children:"Capture Another"})]})]})}import{jsx as d,jsxs as fe}from"react/jsx-runtime";var he=me(async()=>{return{default:(await import("./review-form-section-frr1x0zk.js")).ReviewFormSection}});function _(e){if(e.state.view==="chooser")return d(x,{busy:e.isBusy,onStartVideo:e.handlers.onStartVideo,onTakeScreenshot:e.handlers.onTakeScreenshot});if(e.state.view==="review")return d(de,{fallback:d(ge,{}),children:d(he,{formKey:e.state.reviewFormKey,isSubmitting:e.isSubmitPending,onCancel:e.handlers.onCancel,onSubmit:e.handlers.onSubmit,state:e.state})});if(e.state.view==="success")return d(V,{handlers:e.handlers,state:e.state});return null}function ge(){return fe("section",{className:"grid gap-2 px-5 py-8 text-muted-foreground text-sm",children:[d("p",{children:"Preparing review form..."}),d("p",{className:"text-xs",children:"Your capture is ready. Loading report details."})]})}import{jsx as Ce}from"react/jsx-runtime";function q(e){return Ce("button",{"aria-label":"Report an issue",className:"capture-launcher",disabled:e.disabled,onClick:e.onClick,style:{["--capture-z-index"]:String(e.zIndex)},type:"button",children:"Report Issue"})}import{jsx as S}from"react/jsx-runtime";function F(e){return S("div",{...e,className:h("rounded-xl border border-border/80 bg-card text-card-foreground shadow-2xl",e.className),children:e.children})}function Q(e){return S("div",{...e,className:h("border-b px-5 py-4",e.className),children:e.children})}function W(e){return S("div",{...e,className:e.className,children:e.children})}function Z(e){return S("h2",{className:h("font-semibold text-lg",e.className),children:e.children})}function $(e){return S("p",{className:h("m-0 text-muted-foreground text-sm",e.className),children:e.children})}import{jsx as be}from"react/jsx-runtime";function G(e){return be("span",{className:h("inline-flex items-center rounded-full bg-muted px-2 py-0.5 font-medium text-[11px] text-foreground",e.className),children:e.children})}import{jsx as R,jsxs as Se}from"react/jsx-runtime";function Y(e){return Se("div",{className:"fixed right-6 bottom-[76px] z-[var(--capture-z-index)] flex items-center gap-2 rounded-full border bg-card px-3 py-2 text-card-foreground shadow-2xl",style:{["--capture-z-index"]:String(e.zIndex+2)},children:[R("span",{"aria-hidden":"true",className:"size-2 rounded-full bg-foreground"}),R(G,{variant:"secondary",children:"Recording"}),R("span",{className:"min-w-11 text-right font-mono text-muted-foreground text-xs",children:e.recordingTime}),R(s,{disabled:e.busy,onClick:e.onStopRecording,size:"sm",type:"button",children:"Stop"})]})}function j(e){if(e==="chooser")return"Choose how to capture";if(e==="review")return"Review and submit";if(e==="success")return"Submission complete";return"Capture issue details"}import{jsx as m,jsxs as y}from"react/jsx-runtime";function ee(e){let t=e.state.busy||e.isSubmitPending,r=e.state.view==="review";return y("div",{className:"crikket-capture-root",children:[m(q,{disabled:t,onClick:e.handlers.onLauncherClick,zIndex:e.zIndex}),e.state.overlayOpen?m("div",{className:"fixed inset-0 z-[var(--capture-overlay-z-index)] grid overflow-y-auto bg-black/60 p-4",style:{["--capture-overlay-z-index"]:String(e.zIndex+1)},children:y(F,{className:r?"m-auto flex h-[min(820px,calc(100dvh-2rem))] w-full max-w-[1120px] flex-col overflow-hidden border-border/80 bg-card text-card-foreground shadow-2xl":"m-auto flex max-h-[calc(100dvh-2rem)] w-full max-w-[560px] flex-col overflow-hidden border-border/80 bg-card text-card-foreground shadow-2xl",role:"dialog",children:[y(Q,{className:"flex flex-row items-start justify-between gap-3 border-b",children:[y("div",{className:"grid gap-1",children:[m(Z,{children:"Crikket Capture"}),m($,{children:j(e.state.view)})]}),m(s,{disabled:t,onClick:e.handlers.onClose,type:"button",variant:"outline",children:"Close"})]}),e.state.errorMessage?m("p",{className:"mx-5 mt-5 rounded-md border bg-muted px-3 py-2 text-sm",role:"alert",children:e.state.errorMessage}):null,m(W,{className:r?"min-h-0 flex-1 overflow-hidden px-0 pb-0":"min-h-0 overflow-y-auto px-0 pb-0",children:m(_,{handlers:e.handlers,isBusy:t,isSubmitPending:e.isSubmitPending,state:e.state})})]})}):null,e.state.recordingDockOpen?m(Y,{busy:t,onStopRecording:e.handlers.onStopRecording,recordingTime:e.recordingTime,zIndex:e.zIndex}):null]})}import{useEffect as Re,useRef as ye,useState as ve}from"react";var we=1500;function te(e){let t=ye(null),[r,o]=ve(!1);Re(()=>{return()=>{if(t.current!==null)window.clearTimeout(t.current)}},[]);let a=async(i)=>{e.store.patchState({busy:!0,errorMessage:null});try{await i()}finally{e.store.patchState({busy:!1})}},n=(i)=>{a(i).catch(()=>{return})},l=(i)=>{e.store.openChooser(),e.store.showError(v(i))};return{isSubmitPending:r,handlers:{onLauncherClick:()=>{e.callbacks.onReset(),e.store.openChooser()},onClose:()=>{e.callbacks.onClose()},onStartVideo:()=>{n(async()=>{try{let i=await e.callbacks.onStartVideo();e.store.showRecording(i.startedAt)}catch(i){l(i)}})},onTakeScreenshot:()=>{n(async()=>{try{await e.callbacks.onTakeScreenshot()}catch(i){l(i)}})},onStopRecording:()=>{n(async()=>{try{await e.callbacks.onStopRecording()}catch(i){l(i)}})},onSubmit:(i,f)=>{return o(!0),e.store.patchState({errorMessage:null,reviewDraft:i}),e.callbacks.onSubmit(i,f).catch((E)=>{e.store.showError(v(E))}).finally(()=>{o(!1)})},onCancel:()=>{e.callbacks.onReset(),e.store.openChooser()},onRetry:()=>{e.callbacks.onReset(),e.store.openChooser()},onCopyLink:()=>{if(!e.shareUrl.trim())return;navigator.clipboard.writeText(e.shareUrl).then(()=>{if(e.store.patchState({copyLabel:"Copied"}),t.current!==null)window.clearTimeout(t.current);t.current=window.setTimeout(()=>{e.store.patchState({copyLabel:"Copy Link"})},we)}).catch((i)=>{e.store.showError(v(i))})},onOpenLink:()=>{if(!e.shareUrl.trim())return;window.open(e.shareUrl,"_blank","noopener")}}}}import{useEffect as ke,useState as pe}from"react";var Le=250;function re(e){let[t,r]=pe(()=>Date.now());if(ke(()=>{if(!(e.recordingDockOpen&&e.recordingStartedAt))return;r(Date.now());let o=window.setInterval(()=>{r(Date.now())},Le);return()=>{window.clearInterval(o)}},[e.recordingDockOpen,e.recordingStartedAt]),e.recordingStartedAt===null)return"00:00";return ne(t-e.recordingStartedAt)}import{jsx as Pe}from"react/jsx-runtime";function oe(e){let t=Ee(e.store.subscribe,e.store.getSnapshot,e.store.getSnapshot),{handlers:r,isSubmitPending:o}=te({callbacks:e.callbacks,shareUrl:t.shareUrl,store:e.store}),a=re({recordingDockOpen:t.recordingDockOpen,recordingStartedAt:t.recordingStartedAt});return Pe(ee,{handlers:r,isSubmitPending:o,recordingTime:a,state:t,zIndex:e.zIndex})}var ue=ae.none,Ne={actions:0,logs:0,networkRequests:0};function se(){let e=ie(),t=new Set,r=()=>{for(let n of t)n()},o=(n)=>{e={...e,...n},r()};return{getSnapshot:()=>e,subscribe:(n)=>{return t.add(n),()=>{t.delete(n)}},patchState:o,openChooser:()=>{o({overlayOpen:!0,recordingDockOpen:!1,recordingStartedAt:null,view:"chooser",errorMessage:null,busy:!1})},close:()=>{o({overlayOpen:!1,recordingDockOpen:!1,recordingStartedAt:null,busy:!1,errorMessage:null})},showRecording:(n)=>{o({overlayOpen:!1,recordingDockOpen:!0,recordingStartedAt:n,view:"recording",errorMessage:null,busy:!1})},showReview:(n)=>{o({overlayOpen:!0,recordingDockOpen:!1,recordingStartedAt:null,view:"review",errorMessage:null,busy:!1,media:n.media,warnings:[...n.warnings],summary:n.summary,shareUrl:"",copyLabel:"Copy Link",reviewDraft:{title:"",description:"",priority:ue,visibility:T.private},reviewFormKey:n.media.objectUrl})},showSuccess:(n)=>{o({overlayOpen:!0,recordingDockOpen:!1,recordingStartedAt:null,view:"success",errorMessage:null,busy:!1,shareUrl:n??"",copyLabel:"Copy Link"})},showError:(n)=>{o({errorMessage:n})},setTitleIfEmpty:(n)=>{if(e.reviewDraft.title.trim().length>0)return;o({reviewDraft:{...e.reviewDraft,title:n.slice(0,200)}})},destroy:()=>{e=ie(),t.clear()}}}function ie(){return{view:"chooser",overlayOpen:!1,recordingDockOpen:!1,busy:!1,errorMessage:null,recordingStartedAt:null,warnings:[],summary:{...Ne},media:null,shareUrl:"",copyLabel:"Copy Link",reviewDraft:{title:"",description:"",priority:ue,visibility:T.private},reviewFormKey:""}}import{jsx as Me}from"react/jsx-runtime";var Ue="/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: \"Inter Variable\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-green-700: oklch(52.7% 0.154 150.069);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --aspect-video: 16 / 9;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: \"Inter Variable\", sans-serif;\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .fixed {\n position: fixed;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .bottom-\\[76px\\] {\n bottom: 76px;\n }\n .isolate {\n isolation: isolate;\n }\n .z-\\[var\\(--capture-overlay-z-index\\)\\] {\n z-index: var(--capture-overlay-z-index);\n }\n .z-\\[var\\(--capture-z-index\\)\\] {\n z-index: var(--capture-z-index);\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(var(--spacing) * 0);\n }\n .m-auto {\n margin: auto;\n }\n .mx-5 {\n margin-inline: calc(var(--spacing) * 5);\n }\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n .ml-auto {\n margin-left: auto;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline-flex {\n display: inline-flex;\n }\n .aspect-video {\n aspect-ratio: var(--aspect-video);\n }\n .size-2 {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-\\[min\\(820px\\,calc\\(100dvh-2rem\\)\\)\\] {\n height: min(820px, calc(100dvh - 2rem));\n }\n .h-full {\n height: 100%;\n }\n .max-h-\\[calc\\(100dvh-2rem\\)\\] {\n max-height: calc(100dvh - 2rem);\n }\n .max-h-full {\n max-height: 100%;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-24 {\n min-height: calc(var(--spacing) * 24);\n }\n .min-h-32 {\n min-height: calc(var(--spacing) * 32);\n }\n .min-h-\\[320px\\] {\n min-height: 320px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[560px\\] {\n max-width: 560px;\n }\n .max-w-\\[960px\\] {\n max-width: 960px;\n }\n .max-w-\\[1120px\\] {\n max-width: 1120px;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-11 {\n min-width: calc(var(--spacing) * 11);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .scale-110 {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .cursor-crosshair {\n cursor: crosshair;\n }\n .cursor-default {\n cursor: default;\n }\n .resize-y {\n resize: vertical;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-rows-\\[auto_1fr\\] {\n grid-template-rows: auto 1fr;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius);\n }\n .rounded-md {\n border-radius: calc(var(--radius) - 2px);\n }\n .rounded-xl {\n border-radius: calc(var(--radius) + 4px);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-border {\n border-color: var(--border);\n }\n .border-border\\/70 {\n border-color: var(--border);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--border) 70%, transparent);\n }\n }\n .border-border\\/80 {\n border-color: var(--border);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--border) 80%, transparent);\n }\n }\n .border-foreground {\n border-color: var(--foreground);\n }\n .border-input {\n border-color: var(--input);\n }\n .border-transparent {\n border-color: transparent;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/60 {\n background-color: color-mix(in srgb, #000 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n }\n }\n .bg-card {\n background-color: var(--card);\n }\n .bg-foreground {\n background-color: var(--foreground);\n }\n .bg-muted {\n background-color: var(--muted);\n }\n .bg-muted\\/20 {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 20%, transparent);\n }\n }\n .bg-muted\\/40 {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 40%, transparent);\n }\n }\n .bg-muted\\/60 {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 60%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .object-contain {\n object-fit: contain;\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .px-0 {\n padding-inline: calc(var(--spacing) * 0);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .py-0 {\n padding-block: calc(var(--spacing) * 0);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .pb-0 {\n padding-bottom: calc(var(--spacing) * 0);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n .text-center {\n text-align: center;\n }\n .text-right {\n text-align: right;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-background {\n color: var(--background);\n }\n .text-card-foreground {\n color: var(--card-foreground);\n }\n .text-destructive {\n color: var(--destructive);\n }\n .text-foreground {\n color: var(--foreground);\n }\n .text-green-700 {\n color: var(--color-green-700);\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition-\\[border-color\\,box-shadow\\] {\n transition-property: border-color,box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .hover\\:bg-muted\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--muted);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted) 80%, transparent);\n }\n }\n }\n }\n .hover\\:opacity-90 {\n &:hover {\n @media (hover: hover) {\n opacity: 90%;\n }\n }\n }\n .focus-visible\\:border-ring {\n &:focus-visible {\n border-color: var(--ring);\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-ring\\/60 {\n &:focus-visible {\n --tw-ring-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 60%, transparent);\n }\n }\n }\n .focus-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .sm\\:flex-row {\n @media (width >= 40rem) {\n flex-direction: row;\n }\n }\n .lg\\:grid-cols-\\[minmax\\(0\\,1\\.5fr\\)_360px\\] {\n @media (width >= 64rem) {\n grid-template-columns: minmax(0,1.5fr) 360px;\n }\n }\n .lg\\:border-r {\n @media (width >= 64rem) {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n }\n .lg\\:border-b-0 {\n @media (width >= 64rem) {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n}\n:host {\n all: initial;\n color-scheme: light dark;\n}\n@layer base {\n *,\n ::before,\n ::after {\n box-sizing: border-box;\n border-color: var(--border);\n }\n .crikket-capture-root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.58 0.22 27);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n color: var(--foreground);\n font-family: var(--font-sans);\n }\n @media (prefers-color-scheme: dark) {\n .crikket-capture-root {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.87 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.556 0 0);\n }\n }\n .capture-launcher {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: var(--capture-z-index);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 36px;\n padding: 0 14px;\n border: 1px solid transparent;\n border-radius: 8px;\n background: var(--primary);\n color: var(--primary-foreground);\n font-family: var(--font-sans);\n font-size: 14px;\n font-weight: 500;\n line-height: 1.2;\n white-space: nowrap;\n box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n cursor: pointer;\n transition: background-color 150ms ease,\n box-shadow 150ms ease,\n transform 150ms ease;\n user-select: none;\n }\n .capture-launcher:hover {\n transform: translateY(-1px);\n box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);\n }\n .capture-launcher:focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 2px;\n }\n .capture-launcher:disabled {\n opacity: 0.5;\n cursor: progress;\n transform: none;\n }\n .capture-launcher:active:not(:disabled) {\n transform: translateY(0);\n }\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n }\n }\n}\n";function le(e,t,r){let o=document.createElement("div"),a=o.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=Ue;let l=document.createElement("div");a.append(n),a.append(l),e.append(o);let i=Te(l),f=se();return i.render(Me(oe,{callbacks:r,store:f,zIndex:t})),{setHidden:(E)=>{o.style.display=E?"none":""},store:f,unmount:()=>{i.unmount(),o.remove(),f.destroy()}}}class U{runtimeConfig=null;submitTransport;mountedTarget=null;mountedUi=null;debuggerCollector=new P;activeRecording=null;currentMedia=null;currentReview=null;init(e){let t={key:w(e.key),host:k(e.host),submitPath:p(e.submitPath),zIndex:L(e.zIndex)};if(this.runtimeConfig=t,this.submitTransport=e.submitTransport,e.autoMount??!0)this.mount(e.mountTarget);return this}isInitialized(){return this.runtimeConfig!==null}getConfig(){return this.runtimeConfig}mount(e){let t=this.getRuntimeConfig();if(this.ensureBrowserContext(),this.mountedTarget)return;let r=e??document.body;this.mountedUi=le(r,t.zIndex,{onClose:()=>{this.close()},onStartVideo:()=>{return this.startRecording()},onTakeScreenshot:async()=>{if(!await this.takeScreenshot())throw Error("Screenshot capture failed.")},onStopRecording:async()=>{if(!await this.stopRecording())throw Error("Recording capture failed.")},onSubmit:(o,a)=>{return this.submit(o,a).then(()=>{return})},onReset:()=>{this.reset()}}),this.mountedTarget=r}unmount(){this.abortActiveRecording(),this.setUiHidden(!1),this.mountedUi?.unmount(),this.mountedUi=null,this.debuggerCollector.dispose(),this.mountedTarget=null}open(){if(this.getRuntimeConfig(),!this.mountedTarget)this.mount();this.mountedUi?.store.openChooser()}close(){this.setUiHidden(!1),this.mountedUi?.store.close()}destroy(){this.reset(),this.unmount(),this.runtimeConfig=null,this.submitTransport=void 0}async startRecording(){this.getRuntimeConfig(),this.ensureBrowserContext(),this.abortActiveRecording(),await this.debuggerCollector.startRecordingSession();try{await this.hideUiForCapture();let e=await D();return this.debuggerCollector.markRecordingStarted(e.startedAt),this.activeRecording=e,e.finished.then(async(t)=>{if(this.activeRecording!==e)return;this.activeRecording=null,await this.finalizeCapturedMedia({blob:t.blob,captureType:"video",durationMs:t.durationMs})}).catch(()=>{return}),{startedAt:e.startedAt}}catch(e){throw this.setUiHidden(!1),this.debuggerCollector.clearSession(),e}}async stopRecording(){if(!this.activeRecording)return null;let e=this.activeRecording;this.activeRecording=null;let t=await e.stop();return await this.finalizeCapturedMedia({blob:t.blob,captureType:"video",durationMs:t.durationMs}),t.blob}async takeScreenshot(){this.getRuntimeConfig(),this.ensureBrowserContext(),await this.debuggerCollector.startScreenshotSession();let e;try{await this.hideUiForCapture(),e=await O()}catch(t){throw this.setUiHidden(!1),this.debuggerCollector.clearSession(),t}return await this.finalizeCapturedMedia({blob:e,captureType:"screenshot",durationMs:null}),e}async submit(e,t){let r=this.getRuntimeConfig();if(!(this.currentMedia&&this.currentReview))throw Error("No capture is ready to submit. Start a recording or take a screenshot first.");let{submitCapturedReport:o}=await import("./submit-captured-report-behdzdha.js"),a=this.currentMedia.captureType==="screenshot"&&t?.screenshotBlobOverride?{...this.currentMedia,blob:t.screenshotBlobOverride}:this.currentMedia,n=await o({config:r,draft:e,media:a,review:this.currentReview,submitTransport:this.submitTransport});if(this.mountedUi)this.mountedUi.store.showSuccess(n.shareUrl);return n}reset(){this.abortActiveRecording(),this.setUiHidden(!1),this.clearMedia(),this.currentReview=null,this.debuggerCollector.clearSession()}setMedia(e){return this.clearMedia(),this.currentMedia={blob:e.blob,captureType:e.captureType,durationMs:e.durationMs,objectUrl:URL.createObjectURL(e.blob)},this.currentMedia}clearMedia(){if(!this.currentMedia)return;URL.revokeObjectURL(this.currentMedia.objectUrl),this.currentMedia=null}finalizeCapturedMedia(e){this.setUiHidden(!1);let t=this.debuggerCollector.finalizeSession(),r=this.setMedia(e);if(this.currentReview=t,!this.mountedUi)return;this.mountedUi.store.showReview({media:r,warnings:t.warnings,summary:t.debuggerSummary}),this.prefillTitle()}abortActiveRecording(){if(!this.activeRecording)return;this.activeRecording.abort(),this.activeRecording=null}async hideUiForCapture(){this.setUiHidden(!0),await ze()}setUiHidden(e){this.mountedUi?.setHidden(e)}prefillTitle(){let e=document.title.trim();if(e.length===0)return;this.mountedUi?.store.setTitleIfEmpty(e)}getRuntimeConfig(){if(!this.runtimeConfig)throw Error("Capture SDK is not initialized. Call capture.init({ key }) first.");return this.runtimeConfig}ensureBrowserContext(){if(typeof window>"u"||typeof document>"u")throw Error("Capture SDK can only run in a browser environment.")}}function ze(){return new Promise((e)=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{e()})})})}class M{runtimeConfig=null;initOptions=null;submitTransport;mountedTarget=null;mountedLauncher=null;eagerRuntime=null;eagerRuntimePromise=null;lifecycleVersion=0;init(e){let t={key:w(e.key),host:k(e.host),submitPath:p(e.submitPath),zIndex:L(e.zIndex)};if(this.runtimeConfig=t,this.submitTransport=e.submitTransport,this.initOptions={...e,host:t.host,key:t.key,submitPath:t.submitPath,zIndex:t.zIndex,submitTransport:this.submitTransport},e.autoMount??!0)this.mount(e.mountTarget);return this}isInitialized(){return this.runtimeConfig!==null}getConfig(){return this.runtimeConfig}mount(e){if(this.ensureBrowserContext(),this.eagerRuntime){this.eagerRuntime.mount(e);return}let t=e??document.body;if(this.mountedTarget=t,this.mountedLauncher)return;let r=this.getRuntimeConfig();this.mountedLauncher=z(t,{onOpen:()=>{this.open()},onPrefetch:()=>{this.prefetchRuntime().catch(()=>{return})},zIndex:r.zIndex})}unmount(){this.mountedLauncher?.unmount(),this.mountedLauncher=null,this.mountedTarget=null,this.eagerRuntime?.unmount()}open(){this.loadEagerRuntime(!0).catch(()=>{return})}close(){this.eagerRuntime?.close()}destroy(){this.lifecycleVersion+=1,this.mountedLauncher?.unmount(),this.mountedLauncher=null,this.mountedTarget=null,this.eagerRuntimePromise=null,this.eagerRuntime?.destroy(),this.eagerRuntime=null,this.runtimeConfig=null,this.initOptions=null,this.submitTransport=void 0}async startRecording(){return(await this.loadEagerRuntime(!1)).startRecording()}async stopRecording(){if(this.eagerRuntime)return this.eagerRuntime.stopRecording();return(await this.loadEagerRuntime(!1)).stopRecording()}async takeScreenshot(){return(await this.loadEagerRuntime(!1)).takeScreenshot()}async submit(e){return(await this.loadEagerRuntime(!1)).submit(e)}reset(){this.eagerRuntime?.reset()}async prefetchRuntime(){await this.loadEagerRuntimeModule().catch(()=>{return})}async loadEagerRuntime(e){let t=await this.getOrCreateEagerRuntime();if(e)t.open();return t}getOrCreateEagerRuntime(){if(this.eagerRuntime)return Promise.resolve(this.eagerRuntime);if(this.eagerRuntimePromise)return this.eagerRuntimePromise;let e=this.getInitOptions(),t=this.lifecycleVersion;this.mountedLauncher?.setLoading(!0);let r=this.loadEagerRuntimeModule().then(({CaptureSdkRuntime:o})=>{if(t!==this.lifecycleVersion)throw Error("Capture SDK runtime load was cancelled.");let a=new o;return a.init({...e,autoMount:!0,mountTarget:this.mountedTarget??e.mountTarget}),this.eagerRuntime=a,this.mountedLauncher?.unmount(),this.mountedLauncher=null,a}).finally(()=>{if(this.eagerRuntimePromise===r)this.eagerRuntimePromise=null;this.mountedLauncher?.setLoading(!1)});return this.eagerRuntimePromise=r,r}loadEagerRuntimeModule(){return Promise.resolve({CaptureSdkRuntime:U})}getInitOptions(){if(!this.initOptions)throw Error("Capture SDK is not initialized. Call capture.init({ key }) first.");return this.initOptions}getRuntimeConfig(){if(!this.runtimeConfig)throw Error("Capture SDK is not initialized. Call capture.init({ key }) first.");return this.runtimeConfig}ensureBrowserContext(){if(typeof window>"u"||typeof document>"u")throw Error("Capture SDK can only run in a browser environment.")}}var u=new M;function Zt(e){return u.init(e)}function $t(e){u.mount(e)}function Gt(){u.unmount()}function Yt(){u.open()}function jt(){u.close()}function en(){u.destroy()}function tn(){return u.startRecording()}function nn(){return u.stopRecording()}function rn(){return u.takeScreenshot()}function on(e){return u.submit(e)}function an(){u.reset()}function un(){return u.isInitialized()}function sn(){return u.getConfig()}export{Gt as unmount,rn as takeScreenshot,on as submit,nn as stopRecording,tn as startRecording,an as reset,Yt as open,$t as mount,un as isInitialized,Zt as init,sn as getConfig,en as destroy,He as defaultSubmitTransport,jt as close};
2
2
  export{Zt as a,$t as b,Gt as c,Yt as d,jt as e,en as f,tn as g,nn as h,rn as i,on as j,an as k,un as l,sn as m};
package/dist/launcher.css CHANGED
@@ -1,5 +1,23 @@
1
1
  :host {
2
2
  all: initial;
3
+ color-scheme: light dark;
4
+ --background: oklch(1 0 0);
5
+ --foreground: oklch(0.145 0 0);
6
+ --primary: oklch(0.205 0 0);
7
+ --primary-foreground: oklch(0.985 0 0);
8
+ --ring: oklch(0.708 0 0);
9
+ --radius: 0.625rem;
10
+ --font-sans: "Inter Variable", sans-serif;
11
+ }
12
+
13
+ @media (prefers-color-scheme: dark) {
14
+ :host {
15
+ --background: oklch(0.145 0 0);
16
+ --foreground: oklch(0.985 0 0);
17
+ --primary: oklch(0.87 0 0);
18
+ --primary-foreground: oklch(0.205 0 0);
19
+ --ring: oklch(0.556 0 0);
20
+ }
3
21
  }
4
22
 
5
23
  .capture-launcher {
@@ -10,33 +28,43 @@
10
28
  display: inline-flex;
11
29
  align-items: center;
12
30
  justify-content: center;
31
+ gap: 6px;
13
32
  height: 36px;
14
- padding: 0 16px;
15
- border: 0;
16
- border-radius: 9999px;
17
- background: #111827;
18
- color: #ffffff;
19
- font:
20
- 500 14px / 1.2 Inter Variable,
21
- Inter,
22
- ui-sans-serif,
23
- system-ui,
24
- sans-serif;
25
- box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
33
+ padding: 0 14px;
34
+ border: 1px solid transparent;
35
+ border-radius: 8px;
36
+ background: var(--primary);
37
+ color: var(--primary-foreground);
38
+ font-family: var(--font-sans);
39
+ font-size: 14px;
40
+ font-weight: 500;
41
+ line-height: 1.2;
42
+ white-space: nowrap;
43
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
26
44
  cursor: pointer;
27
- transition: opacity 150ms ease;
45
+ transition:
46
+ background-color 150ms ease,
47
+ box-shadow 150ms ease,
48
+ transform 150ms ease;
49
+ user-select: none;
28
50
  }
29
51
 
30
52
  .capture-launcher:hover {
31
- opacity: 0.92;
53
+ transform: translateY(-1px);
54
+ box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
32
55
  }
33
56
 
34
57
  .capture-launcher:focus-visible {
35
- outline: 2px solid rgb(17 24 39 / 0.45);
58
+ outline: 2px solid var(--ring);
36
59
  outline-offset: 2px;
37
60
  }
38
61
 
39
62
  .capture-launcher:disabled {
40
- opacity: 0.7;
63
+ opacity: 0.5;
41
64
  cursor: progress;
65
+ transform: none;
66
+ }
67
+
68
+ .capture-launcher:active:not(:disabled) {
69
+ transform: translateY(0);
42
70
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crikket-io/capture",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Embeddable browser capture SDK for collecting bug reports from websites.",
5
5
  "license": "AGPL-3.0-only",
6
6
  "homepage": "https://crikket.io/docs",