@soba-so/react 0.0.10 → 0.0.11

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/dist/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
- var be=class extends Error{status;constructor(t,n){super(t),this.name="ConnectError",this.status=n}},le=class{session;baseUrl;doFetch;constructor(t){this.session=t.session,this.baseUrl=(t.baseUrl??"").replace(/\/+$/,""),this.doFetch=t.fetchImpl??fetch.bind(globalThis)}context(){return this.request("GET","/v1/connect")}async machines(){return(await this.request("GET","/v1/machines")).machines}lookup(t){return this.request("GET",`/v1/device/lookup?code=${encodeURIComponent(t)}`)}approve(t){return this.request("POST","/v1/device/approve",{user_code:t})}deny(t){return this.request("POST","/v1/device/deny",{user_code:t})}plans(){return this.request("GET","/v1/plans")}selectPlan(t){return this.request("POST","/v1/plans/select",{plan:t})}checkoutPlan(t,n){return this.request("POST","/v1/plans/checkout",{plan:t,...n?.successUrl?{success_url:n.successUrl}:{},...n?.cancelUrl?{cancel_url:n.cancelUrl}:{}})}leavePlan(){return this.request("DELETE","/v1/plans/select")}approveRuntime(t,n){return this.request("POST","/v1/runtimes/approve",{machine_id:t,runtime_id:n})}async request(t,n,i){let s=await this.doFetch(`${this.baseUrl}${n}`,{method:t,headers:{authorization:`Bearer ${this.session}`,...i?{"content-type":"application/json"}:{}},...i?{body:JSON.stringify(i)}:{}}),o={};try{o=await s.json()}catch{}if(!s.ok){let d=typeof o.error=="string"?o.error:`Request failed (${s.status})`;throw new be(d,s.status)}return o}};function Pe(e){return e.authenticated===!0?{tone:"ok",text:"signed in"}:e.authenticated===!1?{tone:"warn",text:e.auth_hint??"signed out on that machine"}:{tone:"unknown",text:"could not tell"}}function Ee(e){return e.state==="busy"?{tone:"busy",text:`serving ${e.active} of ${e.capacity}`}:e.state==="online"?{tone:"ok",text:"connected"}:{tone:"off",text:"asleep or offline"}}import{jsx as L,jsxs as X}from"react/jsx-runtime";function H({machines:e,onApproveRuntime:t}){return e.length?L("div",{children:e.map(n=>{let i=Ee(n);return X("div",{className:"sc-machine",children:[X("div",{className:"sc-row-between",children:[X("div",{className:"sc-row",children:[L("span",{className:`sc-dot sc-dot-${i.tone}`,"aria-hidden":"true"}),L("strong",{children:n.label??"This machine"})]}),L("span",{className:"sc-note",children:i.text})]}),L("p",{className:"sc-note",children:[n.platform,n.arch,n.version&&`worker ${n.version}`,n.always_on&&"always on"].filter(Boolean).join(" \xB7 ")}),X("ul",{className:"sc-runtimes",children:[n.runtimes.map(s=>{let o=Pe(s);return s.quarantined?X("li",{className:"sc-row-between",children:[L("span",{children:s.display_name}),t?L("button",{type:"button",className:"sc-btn",onClick:()=>t(n.id,s.id),children:"New here. Let it serve"}):L("span",{className:"sc-tone-warn",children:"new, not serving yet"})]},s.id):X("li",{className:"sc-row-between",children:[L("span",{children:s.display_name}),L("span",{className:`sc-tone-${o.tone}`,children:o.text})]},s.id)}),!n.runtimes.length&&L("li",{className:"sc-note",children:"No runtime advertised. Install Claude Code, Codex or Ollama on that machine."})]})]},n.id)})}):L("p",{className:"sc-note",children:"Nothing connected yet."})}import{useCallback as de,useEffect as pe,useId as mt,useMemo as ye,useRef as ht,useState as U}from"react";var Ge="soba";function ze(e){return`${Ge}://connect?url=${encodeURIComponent(e)}`}var dt=1600;async function Me(e,t={}){if(typeof window>"u"||typeof document>"u")return"unknown";let n=t.graceMs??dt,i=document.visibilityState==="visible"&&document.hasFocus(),s=!1,o=()=>{s=!0},d=()=>{document.visibilityState==="hidden"&&(s=!0)};window.addEventListener("blur",o),window.addEventListener("pagehide",o),document.addEventListener("visibilitychange",d);try{window.location.href=ze(e)}catch{return"absent"}return await new Promise(p=>setTimeout(p,n)),window.removeEventListener("blur",o),window.removeEventListener("pagehide",o),document.removeEventListener("visibilitychange",d),i?s?"opened":"absent":"unknown"}import{jsx as We,jsxs as pt}from"react/jsx-runtime";function ue({className:e}){return pt("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:[We("path",{d:"M18.125 7.039A8.6 8.6 0 1 0 18.125 16.961A6 6 0 0 1 18.125 7.039Z",fill:"currentColor"}),We("path",{d:"M19.925 7.039A8.6 8.6 0 0 1 19.925 16.961A6 6 0 0 0 19.925 7.039Z",fill:"currentColor"})]})}import{Fragment as Ct,jsx as a,jsxs as v}from"react/jsx-runtime";var ft=2e3,gt=1e4,bt=9e4,yt="/c/";function vt(e){let t=Math.max(0,Math.round(e/1e3));return`${Math.floor(t/60)}:${String(t%60).padStart(2,"0")}`}function _e({client:e,initialCode:t,onConnected:n,showStatus:i=!0,initialContext:s=null,initialMachines:o,onClose:d,headingId:p,theme:u}){let y=!!s&&o!==void 0,[m,r]=U(y?t?"code":i&&(o?.length??0)>0?"manage":"choose":"loading"),[g,R]=U(s),[C,$]=U(o??[]),[S,T]=U(t??""),[f,W]=U(null),[k,N]=U(null),[B,I]=U(!1),[te,J]=U(0),[q,Se]=U(()=>Date.now()),[Z,K]=U(null),[Y,he]=U(null),ne=mt(),V=p??ne,F=ht(null);pe(()=>{if(!e||y)return;let c=!0;return Promise.all([e.context(),e.machines()]).then(([x,E])=>{c&&(R(x),$(E),t?r("code"):i&&E.length>0?r("manage"):r("choose"))}).catch(x=>{c&&(N(x.message),r("choose"))}),()=>{c=!1}},[e,t,i,y]),pe(()=>{o&&$(o)},[o]),pe(()=>{if(!e||m!=="manage")return;let c=!0,x=setInterval(async()=>{try{let E=await e.machines();c&&$(E)}catch{}},gt);return()=>{c=!1,clearInterval(x)}},[m,e]),pe(()=>{if(!e||m!=="waiting")return;let c=!0,x=setInterval(async()=>{try{let E=await e.machines();if(!c)return;$(E);let re=F.current;if(!re)return;let ae=E.filter(ce=>!re.has(ce.id)),ie=ae.find(ce=>ce.state!=="offline")??ae[0];ie&&(he(ie.id),r("connected"),n?.(E))}catch{}},ft);return()=>{c=!1,clearInterval(x)}},[m,e,n]);let Ne=de(async()=>{if(e){N(null),I(!0);try{let c=await e.lookup(S);W(c),r("confirm")}catch(c){N(c.message)}finally{I(!1)}}},[e,S]),fe=de(async()=>{if(e){N(null),I(!0);try{try{F.current=new Set((await e.machines()).map(c=>c.id))}catch{F.current=new Set(C.map(c=>c.id))}await e.approve(S),r("waiting"),J(Date.now())}catch(c){N(c.message)}finally{I(!1)}}},[e,S,C]),oe=de(async()=>{if(e){I(!0);try{await e.deny(S),r("denied")}catch(c){N(c.message)}finally{I(!1)}}},[e,S]),A=ye(()=>g?.connect_url??null,[g]),ge=ye(()=>{if(!A)return null;try{let c=new URL(A);return c.origin+yt+c.pathname.split("/").filter(Boolean).pop()}catch{return null}},[A]),se=de(async()=>{if(A){N(null),K(null),r("launch"),I(!0);try{K(await Me(A))}finally{I(!1)}}},[A]),D=ye(()=>C.find(c=>c.id===Y),[C,Y]),w=ye(()=>{if(!f)return null;if(f.approved||f.denied)return"answered";let c=f.expires_at?Date.parse(f.expires_at):Number.NaN;return Number.isFinite(c)&&c<=q?"expired":"live"},[f,q]);pe(()=>{if(!(m==="confirm"&&w==="live"||m==="waiting"))return;let x=setInterval(()=>Se(Date.now()),1e3);return()=>clearInterval(x)},[m,w]);let h=de(async(c,x)=>{if(e)try{await e.approveRuntime(c,x),$(await e.machines())}catch(E){N(E.message)}},[e]);return m==="loading"?a("div",{className:"soba-connect",...u?{"data-theme":u}:{},children:a("div",{className:"sc-card",children:a("p",{className:"sc-note",children:"Loading\u2026"})})}):v("div",{className:"soba-connect",...u?{"data-theme":u}:{},children:[d&&a("button",{type:"button",className:"sc-modal-close",onClick:d,"aria-label":"Close",children:"\xD7"}),m==="manage"&&v("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Your compute"}),v("p",{className:"sc-sub",children:[g?.app.name??"This app"," runs on these machines, while they are awake."]}),a(H,{machines:C,onApproveRuntime:h}),k&&a("p",{className:"sc-error",children:k}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("choose"),children:"Connect another machine"})]}),m==="choose"&&v("div",{className:"sc-card",children:[a("span",{className:"sc-mark","aria-hidden":"true",children:a(ue,{})}),a("h2",{className:"sc-h",id:V,children:"Connect your AI"}),a("p",{className:"sc-p",children:"Use access you already have. Nothing here is charged to you."}),A?v("div",{className:"sc-stack",style:{marginTop:20},children:[v("button",{type:"button",className:"sc-opt sc-opt-primary",onClick:()=>void se(),children:[a(ue,{className:"sc-opt-mark"}),a("span",{className:"sc-opt-label",children:"Continue with Soba Connect"})]}),v("p",{className:"sc-note",children:["It runs on the machine you want to use and holds the credential there. Nothing you are signed into is sent to ",g?.app.name??"this app","."]}),a("button",{type:"button",className:"sc-btn",onClick:()=>r("code"),children:"I have a code"})]}):a("p",{className:"sc-error",children:"This app has no publishable key yet, so there is nothing to pair against."})]}),m==="launch"&&v("div",{className:"sc-card",children:[a("span",{className:"sc-mark","aria-hidden":"true",children:a(ue,{})}),a("h2",{className:"sc-h",id:V,children:Z==="absent"?"Soba Connect did not open":"Continue in Soba Connect\u2026"}),Z==="absent"?a("p",{className:"sc-p",children:"Nothing opened on this machine, so it is probably not installed here. Install it, or pair a different machine using the link below."}):a("p",{className:"sc-p",children:"It should be opening on this machine. Start the pairing there, and it will show you a short code to enter here."}),v("div",{className:"sc-stack",style:{marginTop:18},children:[Z==="absent"&&a("a",{className:"sc-btn sc-btn-primary",href:ge??"https://www.soba.so",target:"_blank",rel:"noreferrer noopener",children:"Get Soba Connect"}),a("button",{type:"button",className:"sc-btn",onClick:()=>r("code"),children:"I have a code"}),a("button",{type:"button",className:"sc-btn",disabled:B,onClick:()=>void se(),children:B?"Opening\u2026":"Try again"}),A&&v("details",{className:"sc-details",children:[a("summary",{children:"Pairing a different machine?"}),a("p",{className:"sc-label",children:"Paste this link into Soba Connect on that machine"}),a("code",{className:"sc-code",children:A}),a("p",{className:"sc-note",children:"It will show you a short code. Nothing is pasted back: the credential is written straight to that machine."})]})]})]}),m==="code"&&v("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Enter the code from that machine"}),a("p",{className:"sc-sub",children:"Eight characters, shown by Soba Connect once you paste the link."}),v("form",{className:"sc-stack",onSubmit:c=>{c.preventDefault(),Ne()},children:[a("input",{className:"sc-input",value:S,onChange:c=>T(c.target.value),placeholder:"ACDE-F234",autoComplete:"off",autoFocus:!0,"aria-label":"Pairing code"}),k&&a("p",{className:"sc-error",children:k}),a("button",{type:"submit",className:"sc-btn sc-btn-primary",disabled:B||S.length<8,children:B?"Checking\u2026":"Continue"})]})]}),m==="confirm"&&f&&v("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Attach this machine to your account?"}),v("p",{className:"sc-sub",children:["Once you approve, ",g?.app.name??"this app"," may send your runs to it. It can never see the account or the keys on it."]}),v("ul",{className:"sc-facts",children:[a(me,{k:"Code",v:f.user_code}),a(me,{k:"Machine",v:f.hostname??"not stated"}),a(me,{k:"System",v:[f.platform,f.arch].filter(Boolean).join(" / ")||"not stated"}),a(me,{k:"Asked by",v:f.client??"not stated"}),f.labels.length>0&&a(me,{k:"Labels",v:f.labels.join(", ")})]}),a("p",{className:"sc-note",style:{marginTop:12},children:"Every line above is what that machine said about itself. If none of it looks like a computer of yours, say no."}),w==="expired"&&a("p",{className:"sc-error",children:"That code has expired. Ask the machine for a new one \u2014 it prints a fresh code each time it starts."}),w==="answered"&&a("p",{className:"sc-error",children:"That code has already been answered. If it was not you, deny the next one."}),k&&a("p",{className:"sc-error",children:k}),v("div",{className:"sc-row",style:{marginTop:16},children:[a("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:()=>void fe(),disabled:B||w!=="live",children:"Approve"}),a("button",{type:"button",className:"sc-btn",onClick:()=>void oe(),disabled:B||w==="answered",children:"No, deny it"}),a("button",{type:"button",className:"sc-btn sc-btn-quiet",onClick:()=>r("code"),disabled:B,children:"Back"})]}),w==="live"&&f.expires_at&&v("p",{className:"sc-note",style:{marginTop:10},children:["This code expires in ",vt(Date.parse(f.expires_at)-q),"."]})]}),m==="waiting"&&v("div",{className:"sc-card",children:[a("h2",{className:"sc-title",id:V,children:"Approved. Waiting for it to connect\u2026"}),a("p",{className:"sc-sub",children:"The worker is starting on that machine. This page will change on its own the moment it arrives."}),a("p",{className:"sc-note",children:"If nothing happens, look at Soba Connect on that machine: it says what it is doing."}),te>0&&q-te>bt&&v("div",{className:"sc-stack",style:{marginTop:14},children:[a("p",{className:"sc-note sc-tone-warn",children:"Still nothing. Soba Connect may not be running on that machine, or it may not have finished starting. This keeps watching either way."}),a("button",{type:"button",className:"sc-btn",onClick:()=>r("choose"),children:"Start over"})]})]}),m==="connected"&&v("div",{className:"sc-card",children:[a("h2",{className:"sc-title",id:V,children:D?.label?`${D.label} is connected`:"Connected"}),v("p",{className:"sc-sub",children:[g?.app.name??"This app"," will use ",D?.label?"it":"this machine"," from now on, while it is awake."]}),i&&v(Ct,{children:[a(H,{machines:C,onApproveRuntime:h}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("manage"),children:"Done"})]})]}),m==="denied"&&v("div",{className:"sc-card",children:[a("h2",{className:"sc-title",id:V,children:"Declined"}),a("p",{className:"sc-sub",children:"That machine was not attached to your account, and the terminal has been told so."}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("choose"),children:"Back to the start"})]})]})}function me({k:e,v:t}){return v("li",{className:"sc-fact",children:[a("span",{className:"sc-fact-key",children:e}),a("span",{children:t})]})}import{useEffect as wt,useRef as Te}from"react";var ve=0,Re=null;function Je(){if(typeof document>"u")return()=>{};ve===0&&(Re=document.body.style.overflow,document.body.style.overflow="hidden"),ve+=1;let e=!1;return()=>{e||(e=!0,ve-=1,ve===0&&(document.body.style.overflow=Re??"",Re=null))}}import{jsx as Ze}from"react/jsx-runtime";function Ie({open:e,onClose:t,labelledBy:n,theme:i,children:s}){let o=Te(null),d=Te(null),p=Te(null);return wt(()=>{let u=o.current;if(u){if(!e){u.open&&u.close();return}return u.open||u.showModal(),document.activeElement===u&&d.current?.focus(),Je()}},[e]),Ze("dialog",{ref:o,className:"soba-connect sc-modal","aria-labelledby":n,...i?{"data-theme":i}:{},onCancel:u=>{u.preventDefault(),t()},onPointerDown:u=>{p.current=u.target},onClick:u=>{u.target===u.currentTarget&&p.current===u.currentTarget&&t()},children:Ze("div",{className:"sc-modal-sheet",ref:d,tabIndex:-1,children:s})})}var pn=180*24*60*60*1e3;import{createContext as St,useContext as Nt}from"react";var Ae=St(null);function M(){let e=Nt(Ae);if(!e)throw new Error("useSoba() must be used inside a <SobaProvider>.");return e}import{jsx as Q}from"react/jsx-runtime";function kt({className:e}){let{compute:t}=M(),n=e?`soba-connect ${e}`:"soba-connect";return t.loading&&!t.machines.length?Q("div",{className:n,children:Q("p",{className:"sc-note",children:"Loading\u2026"})}):t.error&&!t.machines.length?Q("div",{className:n,children:Q("p",{className:"sc-error",children:t.error.message})}):Q("div",{className:n,children:Q(H,{machines:t.machines})})}import{useEffect as Et,useRef as et,useState as Mt}from"react";import{useId as Pt}from"react";import{createContext as Ke,useContext as Ye}from"react";var Le=Ke(null);function Xe(){return Ye(Le)}var Oe=Ke({context:null,machines:void 0,theme:"light"});function Qe(){return Ye(Oe)}import{jsx as ee,jsxs as $e}from"react/jsx-runtime";function Ue({open:e,onOpenChange:t,initialCode:n,onConnected:i,showStatus:s}){let{error:o}=M(),d=Xe(),p=Qe(),u=()=>t(!1),y=Pt();return $e(Ie,{open:e,onClose:u,labelledBy:y,theme:p.theme,children:[o?$e("div",{className:"sc-card",children:[ee("h2",{className:"sc-title",id:y,children:"Could not start"}),ee("p",{className:"sc-error",children:o.message})]}):!d&&!p.context?$e("div",{className:"sc-card",children:[ee("h2",{className:"sc-title",id:y,children:"One moment"}),ee("p",{className:"sc-note",children:"Getting your compute\u2026"})]}):ee(_e,{client:d,onClose:u,headingId:y,theme:p.theme,initialContext:p.context,...p.machines!==void 0?{initialMachines:p.machines}:{},...n?{initialCode:n}:{},...i?{onConnected:i}:{},...s===void 0?{}:{showStatus:s}}),ee("p",{className:"sc-modal-foot",children:"Secured by Soba"})]})}import{Fragment as tt,jsx as Be,jsxs as nt}from"react/jsx-runtime";function qe({children:e,variant:t,className:n,initialCode:i,onConnected:s,defaultOpen:o,open:d,onOpenChange:p,showConnected:u=!0}){let{compute:y}=M(),[m,r]=Mt(o??!!i),g=et(null),R=d!==void 0,C=R?d:m,$=N=>{R||r(N),p?.(N)},S=et(C);Et(()=>{S.current&&!C&&g.current?.focus(),S.current=C},[C]);let T=y.machines.find(N=>N.state!=="offline")??y.machines[0],f=T?.runtimes?.find(N=>!N.quarantined)??T?.runtimes?.[0],W=u&&T!==void 0,k=T?.state==="online"?"ok":T?.state==="busy"?"busy":"off";return nt(tt,{children:[Be("button",{ref:g,type:"button",className:["sc-btn",W?"sc-btn-connected":t==="outline"?"":"sc-btn-primary",n].filter(Boolean).join(" "),onClick:()=>$(!0),children:e??(W?nt(tt,{children:[Be("i",{className:`sc-dot sc-dot-${k}`,"aria-hidden":"true"}),f?.display_name??"Connected",T?.label?` \xB7 ${T.label}`:""]}):"Connect compute")}),Be(Ue,{open:C,onOpenChange:$,...i?{initialCode:i}:{},...s?{onConnected:s}:{}})]})}import{jsx as De,jsxs as Rt}from"react/jsx-runtime";function _t({initialCode:e,onConnected:t,className:n,showStatus:i=!0}){let{compute:s}=M(),o=s.machines.length>0;return Rt("div",{className:n?`soba-connect ${n}`:"soba-connect",children:[i&&De(H,{machines:s.machines}),De("div",{style:{marginTop:i&&o?14:0},children:De(qe,{variant:i&&o?"outline":"primary",...e?{initialCode:e}:{},...t?{onConnected:t}:{}})})]})}var Tt=new Set(["delta","thinking","status","done","error"]);function Ce(e){let t;try{t=JSON.parse(e)}catch{return null}if(!t||typeof t!="object")return null;let n=t,i=n.type==="event"?n.event:n;if(!i||typeof i!="object")return null;let s=i;if(typeof s.type!="string"||!Tt.has(s.type))return null;let o={type:s.type};return typeof s.text=="string"&&(o.text=s.text),typeof s.message=="string"&&(o.message=s.message),typeof s.tool=="string"&&(o.tool=s.tool),typeof s.tier=="string"&&(o.tier=s.tier),s.usage&&typeof s.usage=="object"&&(o.usage=s.usage),o}async function*Fe(e){let t=e.body;if(!t)throw new Error("That run response had no body to stream.");let n=(e.headers.get("content-type")??"").includes("ndjson"),i=t.getReader(),s=new TextDecoder,o="",d=[];try{for(;;){let u=await i.read();if(u.done)break;for(o+=s.decode(u.value,{stream:!0});;){let y=o.indexOf(`
3
- `);if(y===-1)break;let m=st(o.slice(0,y));if(o=o.slice(y+1),n){let r=m.trim()?Ce(m):null;r&&(yield r);continue}if(m===""){let r=d.join(`
4
- `);if(d=[],r==="[DONE]")return;let g=r?Ce(r):null;g&&(yield g);continue}ot(m,d)}}!n&&o&&ot(st(o),d);let p=n?o.trim():d.join(`
5
- `);if(p&&p!=="[DONE]"){let u=Ce(p);u&&(yield u)}}finally{i.cancel().catch(()=>{})}}function ot(e,t){if(!e||e.startsWith(":"))return;let n=e.indexOf(":");if(n===-1||e.slice(0,n)!=="data")return;let i=e.slice(n+1);t.push(i.startsWith(" ")?i.slice(1):i)}function st(e){return e.endsWith("\r")?e.slice(0,-1):e}async function It(e){let t="";for await(let n of e)if(n.type==="delta"&&n.text&&(t+=n.text),n.type==="error")throw new Error(n.message??"The run ended with an error.");return t}import{useState as rt}from"react";import{jsx as at,jsxs as Lt}from"react/jsx-runtime";function At({plan:e,successUrl:t,cancelUrl:n,label:i,className:s}){let{plan:o}=M(),[d,p]=rt(!1),[u,y]=rt(null);async function m(){p(!0),y(null);try{let r=await o.checkout(e.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(r)}catch(r){y(r.message),p(!1)}}return Lt("div",{className:s?`soba-connect ${s}`:"soba-connect",children:[at("button",{type:"button",className:"sc-btn sc-btn-primary",disabled:d,onClick:()=>void m(),children:d?"Opening\u2026":i??`Subscribe \u2014 $${e.price.toLocaleString()}/${e.interval}`}),u&&at("p",{className:"sc-error",children:u})]})}import{useState as it}from"react";import{Fragment as Bt,jsx as b,jsxs as _}from"react/jsx-runtime";var Ot={"user-hardware":"your own machine","user-subscription":"your own AI subscription","open-weights":"open models we host",frontier:"frontier models"},$t=new Set(["user-hardware","user-subscription"]);function we(e){return e?`soba-connect ${e}`:"soba-connect"}function Ut({onSelect:e,successUrl:t,cancelUrl:n,showCompute:i=!0,className:s}){let{plan:o}=M(),[d,p]=it(null),[u,y]=it(null);if(o.error)return b("div",{className:we(s),children:b("div",{className:"sc-card",children:b("p",{className:"sc-error",children:o.error.message})})});if(o.loading)return b("div",{className:we(s),children:b("div",{className:"sc-card",children:b("p",{className:"sc-note",children:"Loading plans\u2026"})})});if(o.plans.length===0)return b("div",{className:we(s),children:b("div",{className:"sc-card",children:b("p",{className:"sc-note",children:"This app has no plans yet."})})});async function m(r){p(r.id),y(null);try{if(r.selectable)await o.select(r.id);else if(e)e(r);else{let g=await o.checkout(r.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(g);return}}catch(g){y(g.message)}finally{p(null)}}return _("div",{className:we(s),children:[b("div",{className:"sc-plans",children:o.plans.map(r=>{let g=o.current?.plan_id===r.id;return _("div",{className:g?"sc-plan sc-plan-current":"sc-plan",children:[_("div",{className:"sc-row-between",children:[b("span",{className:"sc-title",children:r.name}),g&&b("span",{className:"sc-plan-badge",children:"Current"})]}),r.description&&b("p",{className:"sc-sub",children:r.description}),b("p",{className:"sc-plan-price",children:r.price===0?b("span",{className:"sc-plan-amount",children:"Free"}):_(Bt,{children:[_("span",{className:"sc-plan-amount",children:["$",r.price.toLocaleString()]}),_("span",{className:"sc-plan-interval",children:["/",r.interval]})]})}),_("div",{className:"sc-facts",children:[_("div",{className:"sc-fact",children:[b("span",{className:"sc-fact-key",children:"Included"}),b("span",{children:r.included_units===null?"Unlimited":`${r.included_units.toLocaleString()} ${r.unit}${r.included_units===1?"":"s"}`})]}),r.overage_per_unit>0&&_("div",{className:"sc-fact",children:[b("span",{className:"sc-fact-key",children:"Then"}),_("span",{children:["$",r.overage_per_unit," / ",r.unit]})]}),r.trial_days>0&&_("div",{className:"sc-fact",children:[b("span",{className:"sc-fact-key",children:"Trial"}),_("span",{children:[r.trial_days," days"]})]}),i&&_("div",{className:"sc-plan-compute",children:[b("span",{className:"sc-fact-key",children:"Runs on"}),r.route_allow===null||r.route_allow.length===0?b("span",{children:r.route_allow===null?"any compute":"no compute"}):b("ul",{className:"sc-compute",children:r.route_allow.map(R=>b("li",{className:$t.has(R)?"sc-compute-own":void 0,children:Ot[R]??R},R))})]})]}),b("button",{type:"button",className:g?"sc-btn":"sc-btn sc-btn-primary",disabled:g||d!==null,onClick:()=>void m(r),children:g?"Your plan":d===r.id?r.selectable?"Switching\u2026":"Opening\u2026":r.selectable?"Choose":`Subscribe \u2014 $${r.price.toLocaleString()}/${r.interval}`})]},r.id)})}),u&&b("p",{className:"sc-error",children:u})]})}import{useCallback as G,useEffect as z,useMemo as He,useRef as Dt,useState as O}from"react";var xe=class{#t;#o=null;#n=null;#e;#s=new Set;constructor(t){this.#e=t,this.#t=t.token??null}get token(){return this.#t}get expiresAt(){return this.#o}get canRefresh(){return!!this.#e.endpoint}get refreshAt(){return!this.canRefresh||this.#o===null?null:Math.max(Date.now()+1e4,this.#o-6e4)}subscribe(t){return this.#s.add(t),()=>this.#s.delete(t)}async ensure(){return this.#t?this.#t:this.refresh()}async refresh(){if(this.#n)return this.#n;let t=this.#e.endpoint;if(!t)throw new Error("This Soba session cannot be refreshed. Pass `sessionEndpoint` so the provider can mint a new one.");let n=this.#e.fetchImpl??fetch.bind(globalThis);this.#n=(async()=>{let i=await n(t,{method:"POST",headers:{"content-type":"application/json"},credentials:"same-origin",body:JSON.stringify(this.#e.user?{user:this.#e.user}:{})});if(!i.ok)throw new Error(`Could not start a Soba session (${i.status} from ${t}).`);let s=await i.json(),o=s.session??s.token;if(!o)throw new Error(`${t} answered without a \`session\`. See @soba-so/react's README.`);let d=s.expires_in??s.expiresIn;this.#t=o,this.#o=typeof d=="number"?Date.now()+d*1e3:null;for(let p of this.#s)p();return o})();try{return await this.#n}finally{this.#n=null}}};function ct(e,t=fetch.bind(globalThis)){return async(n,i)=>{let s=await t(n,i);if(s.status!==401||!e.canRefresh)return s;let o;try{o=await e.refresh()}catch{return s}return t(n,qt(i,o))}}function qt(e,t){let n=new Headers(e?.headers);return n.set("authorization",`Bearer ${t}`),{...e,headers:n}}var lt="data-soba-react",ut=!1;function je(){if(ut||typeof document>"u"||(ut=!0,document.querySelector(`style[${lt}]`)))return;let e=document.createElement("style");e.setAttribute(lt,""),e.textContent=`.soba-connect {
2
+ var kn=class extends Error{status;constructor(n,t){super(n),this.name="ConnectError",this.status=t}},Xe=class{session;baseUrl;doFetch;constructor(n){this.session=n.session,this.baseUrl=(n.baseUrl??"").replace(/\/+$/,""),this.doFetch=n.fetchImpl??fetch.bind(globalThis)}context(){return this.request("GET","/v1/connect")}async machines(){return(await this.request("GET","/v1/machines")).machines}lookup(n){return this.request("GET",`/v1/device/lookup?code=${encodeURIComponent(n)}`)}approve(n){return this.request("POST","/v1/device/approve",{user_code:n})}claim(n){return this.request("POST","/v1/device/claim",{pairing_nonce:n})}deny(n){return this.request("POST","/v1/device/deny",{user_code:n})}plans(){return this.request("GET","/v1/plans")}selectPlan(n){return this.request("POST","/v1/plans/select",{plan:n})}checkoutPlan(n,t){return this.request("POST","/v1/plans/checkout",{plan:n,...t?.successUrl?{success_url:t.successUrl}:{},...t?.cancelUrl?{cancel_url:t.cancelUrl}:{}})}leavePlan(){return this.request("DELETE","/v1/plans/select")}hosted(){return this.request("GET","/v1/hosted")}startHosted(){return this.request("POST","/v1/hosted/start")}disconnectHosted(n){return this.request("DELETE",n?`/v1/hosted?provider=${encodeURIComponent(n)}`:"/v1/hosted")}approveRuntime(n,t){return this.request("POST","/v1/runtimes/approve",{machine_id:n,runtime_id:t})}async request(n,t,s){let o=await this.doFetch(`${this.baseUrl}${t}`,{method:n,headers:{authorization:`Bearer ${this.session}`,...s?{"content-type":"application/json"}:{}},...s?{body:JSON.stringify(s)}:{}}),i={};try{i=await o.json()}catch{}if(!o.ok){let a=typeof i.error=="string"?i.error:`Request failed (${o.status})`;throw new kn(a,o.status)}return i}};function Qe(e){let n=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!n?.[1])return"#ffffff";let t=n[1].length===3?[...n[1]].map(i=>i+i).join(""):n[1],s=i=>{let a=Number.parseInt(t.slice(i*2,i*2+2),16)/255;return a<=.04045?a/12.92:((a+.055)/1.055)**2.4};return .2126*s(0)+.7152*s(1)+.0722*s(2)>.45?"#101012":"#ffffff"}function qn(e){let n=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!n?.[1])return null;let t=n[1].length===3?[...n[1]].map(s=>s+s).join(""):n[1];return[0,1,2].map(s=>Number.parseInt(t.slice(s*2,s*2+2),16))}function Ve(e,n,t){let s=qn(e),o=qn(n);return!s||!o?e:`#${s.map((a,m)=>Math.round(a+(o[m]-a)*t)).map(a=>a.toString(16).padStart(2,"0")).join("")}`}function en(e,n){if(!qn(e))return{};let t=Qe(e),s=n?.trim();return{"--sc-ground":e,"--sc-shell":e,"--sc-sheet":Ve(e,t,.07),"--sc-raised":Ve(e,t,.13),"--sc-line":Ve(e,t,.18),"--sc-line-2":Ve(e,t,.28),"--sc-text":t,"--sc-text-2":Ve(t,e,.15),"--sc-muted":Ve(t,e,.38),...s?{"--sc-accent":s,"--sc-accent-fg":Qe(s)}:{"--sc-accent":t,"--sc-accent-fg":e}}}function Bn(e){return e.authenticated===!0?{tone:"ok",text:"signed in"}:e.authenticated===!1?{tone:"warn",text:e.auth_hint??"signed out on that machine"}:{tone:"unknown",text:"could not tell"}}function Hn(e){let{platform:n,arch:t}=e;if(!n)return null;let s=n==="darwin"||n==="macos",o=s?"Mac":n==="win32"||n==="windows"?"Windows PC":"Linux machine";return s?`${t==="aarch64"||t==="arm64"?"Apple silicon ":""}${o}`:o}function nn(e){return e.find(n=>n.state==="offline")??null}function tn(e){return e.state==="busy"?{tone:"busy",text:`serving ${e.active} of ${e.capacity}`}:e.state==="online"?{tone:"ok",text:"connected"}:{tone:"off",text:"asleep or offline"}}import{jsx as de,jsxs as us}from"react/jsx-runtime";function W({className:e}){return us("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:[de("path",{d:"M18.125 7.039A8.6 8.6 0 1 0 18.125 16.961A6 6 0 0 1 18.125 7.039Z",fill:"currentColor"}),de("path",{d:"M19.925 7.039A8.6 8.6 0 0 1 19.925 16.961A6 6 0 0 0 19.925 7.039Z",fill:"currentColor"})]})}function Rt({className:e}){return de("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:de("path",{fill:"currentColor",d:"M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"})})}function Oe({className:e}){return de("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:de("path",{fill:"currentColor",d:"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"})})}function We({className:e}){return de("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:de("path",{d:"M4 5h16v11H4zM9 20h6M12 16v4",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function Te({className:e}){return de("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:de("path",{d:"M5 6h14v10H5zM2.5 19.5h19",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}var pe={claude:Rt,chatgpt:Oe,local:We};var ne=[{id:"claude",costClass:"user-subscription",short:"Claude Code",label:"Continue with Claude",title:"The Claude plan you already pay for",cost:"Nothing beyond the plan",prerequisite:"Claude Code installed and signed in",hint:"Install it from claude.ai/code, then run `claude` once and sign in.",install:"https://claude.com/product/claude-code",expects:["claude-code"]},{id:"chatgpt",costClass:"user-subscription",short:"Codex",label:"Continue with ChatGPT",title:"The ChatGPT plan you already pay for",cost:"Nothing beyond the plan",prerequisite:"Codex installed and signed in",hint:"Install Codex, then run `codex` once and sign in.",install:"https://learn.chatgpt.com/codex/cli",expects:["codex"]},{id:"local",costClass:"user-hardware",short:"Local models",label:"Use a model on this machine",title:"A model on your own machine",cost:"Free. You bought the hardware",prerequisite:"Ollama running, with a model pulled",hint:"Install Ollama, then `ollama pull` a model before pairing.",install:"https://ollama.com",expects:["ollama","openai-api"]}],Et=["claude","chatgpt"];function Fn(){return ne.filter(e=>Et.includes(e.id))}function Vn(e){return ne.filter(n=>n.costClass===e)}function sn(e){return ne.find(n=>n.expects.includes(e))??null}import{jsx as H,jsxs as Ie}from"react/jsx-runtime";function Ge({machines:e,onApproveRuntime:n}){return e.length?H("div",{children:e.map(t=>{let s=tn(t),o=Hn(t);return Ie("div",{className:"sc-machine",children:[Ie("div",{className:"sc-idrow",children:[H("span",{className:"sc-opt-tile","aria-hidden":"true",children:H(Te,{className:"sc-opt-mark"})}),Ie("span",{className:"sc-opt-text",children:[H("span",{className:"sc-opt-label",children:t.label??"This machine"}),(o||t.always_on)&&Ie("span",{className:"sc-machine-meta",children:[o&&H("span",{children:o}),t.always_on&&H("span",{className:"sc-machine-tag",children:"always on"})]})]}),Ie("span",{className:"sc-machine-state",children:[H("span",{className:`sc-dot sc-dot-${s.tone}`,"aria-hidden":"true"}),s.text]})]}),Ie("ul",{className:"sc-runtimes",children:[t.runtimes.map(i=>H(ds,{runtime:i,...n?{onApprove:()=>n(t.id,i.id)}:{}},i.id)),!t.runtimes.length&&H("li",{className:"sc-note",children:"No runtime advertised. Install Claude Code, Codex or Ollama on that machine."})]})]},t.id)})}):H("p",{className:"sc-note",children:"Nothing connected yet."})}function ds({runtime:e,onApprove:n}){let t=sn(e.id),s=t?pe[t.id]:null,o=Bn(e);return Ie("li",{className:"sc-runtime",children:[H("span",{className:"sc-runtime-tile","aria-hidden":"true",children:s&&H(s,{className:"sc-runtime-mark"})}),H("span",{className:"sc-runtime-name",children:e.display_name}),e.quarantined?n?H("button",{type:"button",className:"sc-conn-action",onClick:n,children:"Let it serve"}):H("span",{className:"sc-runtime-verdict sc-tone-warn",children:"new, not serving yet"}):H("span",{className:`sc-runtime-verdict sc-tone-${o.tone}`,children:o.text})]})}import{useCallback as me,useEffect as re,useId as fs,useMemo as xe,useRef as je,useState as R}from"react";var on=[{slug:"mac-arm",label:"macOS, Apple silicon"},{slug:"mac-intel",label:"macOS, Intel"},{slug:"windows",label:"Windows"},{slug:"linux",label:"Linux"}];function rn(e){if(!e)return"";try{return new URL(e).origin}catch{return""}}var Wn="soba";function Lt(){return`${Wn}://show`}function Sn(e,n,t){let s=`${Wn}://connect?url=${encodeURIComponent(e)}`;return n&&(s+=`&nonce=${encodeURIComponent(n)}`),t&&(s+=`&want=${encodeURIComponent(t)}`),s}function an(){let e=globalThis.crypto;if(!e?.getRandomValues)return null;let n=e.getRandomValues(new Uint8Array(32)),t="";for(let s of n)t+=String.fromCharCode(s);return btoa(t).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"")}var ps=1600;function Gn(e={}){return zn(e)}async function jn(e,n={}){if(typeof window>"u"||typeof document>"u")return"unknown";let t=zn(n);try{window.location.href=Sn(e,n.nonce,n.want)}catch{return"absent"}return t}async function Yn(e={}){if(typeof window>"u"||typeof document>"u")return"unknown";let n=zn(e);try{window.location.href=Lt()}catch{return"absent"}return n}async function zn(e){if(typeof window>"u"||typeof document>"u")return"unknown";let n=e.graceMs??ps,t=document.visibilityState==="visible"&&document.hasFocus(),s=!1,o=()=>{s=!0},i=()=>{document.visibilityState==="hidden"&&(s=!0)};return window.addEventListener("blur",o),window.addEventListener("pagehide",o),document.addEventListener("visibilitychange",i),await new Promise(a=>setTimeout(a,n)),window.removeEventListener("blur",o),window.removeEventListener("pagehide",o),document.removeEventListener("visibilitychange",i),t?s?"opened":"absent":"unknown"}var Ot="soba.connect.choice",ms=180*24*60*60*1e3;function hs(e){let n=2166136261;for(let t=0;t<e.length;t++)n^=e.charCodeAt(t),n=Math.imul(n,16777619);return(n>>>0).toString(36)}function Kn(e,n){return e?n?`${Ot}.${e}.${hs(n)}`:`${Ot}.${e}`:null}function Jn(e){if(!e||typeof localStorage>"u")return null;try{let n=localStorage.getItem(e);if(!n)return null;let t=JSON.parse(n);if(Date.now()-Date.parse(t.at)>ms)return null;let s=ne.find(o=>o.id===t.choice);return s?s.id:null}catch{return null}}function Zn(e,n){if(!(!e||typeof localStorage>"u"))try{localStorage.setItem(e,JSON.stringify({choice:n,at:new Date().toISOString()}))}catch{}}import{Fragment as un,jsx as r,jsxs as w}from"react/jsx-runtime";var Xn=2e3,gs=1e4,bs=9e4,ys=6e4;function Qn(e,n,t,s=[],o){return e?"code":n&&(t.length>0||s.length>0)?"manage":o?"launch":"choose"}function ws(e){let n=Math.max(0,Math.round(e/1e3));return`${Math.floor(n/60)}:${String(n%60).padStart(2,"0")}`}function nt({client:e,initialCode:n,initialChoice:t,onConnected:s,showStatus:o=!0,initialContext:i=null,initialMachines:a,onClose:m,headingId:c,theme:p,reason:g}){let b=!!i&&a!==void 0,[h,f]=R(b?Qn(n,o,a??[],[],t):"loading"),[d,N]=R(i),[k,x]=R(a??[]),[U,D]=R(n??""),[C,$]=R(null),[q,A]=R(null),[J,z]=R(!1),[F,ce]=R(0),[Pe,yn]=R(()=>Date.now()),[K,Ce]=R(null),[wn,Ne]=R(!1),[he,Z]=R(!1),[In,Ke]=R("browser"),[Ue,vn]=R(null),[le,te]=R([]),[qe,$n]=R(0),[_e,Be]=R(null),se=je(null),[M,S]=R(t??null),[Me,X]=R(null),Je=xe(()=>{let l=d?.accent?.trim(),v=d?.background?.trim();if(!(!l&&!v))return v?{...en(v,l),background:v,borderRadius:"inherit"}:{"--sc-accent":l,"--sc-accent-fg":Qe(l)}},[d?.accent,d?.background]),Cn=fs(),oe=c??Cn,ke=je(null);re(()=>{if(!e||b)return;let l=!0;return Promise.all([e.context(),e.machines()]).then(([v,_])=>{l&&(N(v),x(_),f(Qn(n,o,_)))}).catch(v=>{l&&(A(v.message),f("choose"))}),()=>{l=!1}},[e,n,o,b]),re(()=>{h!=="loading"||!b||f(Qn(n,o,a??[]))},[h,b,n,o,a]),re(()=>{a&&x(a)},[a]);let He=je(!1),Fe=je(h);Fe.current=h;let Q=je(le);Q.current=le;let V=!!d?.hosted_available,Nn=d?.hosted!==!1;re(()=>{if(!e||h!=="manage")return;let l=!0,v=setInterval(async()=>{try{let _=await e.machines();if(!l)return;x(_);let L=!V||He.current;_.length===0&&Q.current.length===0&&L&&Fe.current==="manage"&&f("choose")}catch{}},gs);return()=>{l=!1,clearInterval(v)}},[h,e,V]);let y=Kn(d?.publishable_key??null);re(()=>{X(Jn(y))},[y]),re(()=>{if(!e||!V)return;let l=!0;return e.hosted().then(v=>{l&&(te(v.credentials),!He.current&&(He.current=!0,v.credentials.length>0&&o&&Fe.current==="choose"&&f("manage")))}).catch(()=>{}),()=>{l=!1}},[e,V,o]),re(()=>{if(!e||h!=="hosted")return;let l=!0,v=async()=>{try{let Se=await e.hosted();if(!l)return!1;if(te(Se.credentials),Se.credentials.length>0)return f("hosted_connected"),Be(null),!0}catch{}return!1},_=async()=>{se.current?.closed&&(se.current=null,!await v()&&l&&f("choose"))},L=setInterval(()=>{v(),_()},Xn),Le=setInterval(_,400),ge=Se=>{let Mt=Se.data;Mt?.source==="soba"&&Mt.type==="hosted_result"&&v()};return window.addEventListener("message",ge),()=>{l=!1,clearInterval(L),clearInterval(Le),window.removeEventListener("message",ge),se.current=null}},[e,h]);let B=me(()=>{if(!e)return;let l=window.open("","soba-connect-plan","width=520,height=760,noopener=no");se.current=l,f("hosted"),$n(Date.now()),Be(null),A(null),e.startHosted().then(({url:v})=>{if(l&&!l.closed){l.location.href=v;return}Be(v)}).catch(v=>{l?.close(),se.current=null,A(v.message),f("choose")})},[e]),ue=me(async l=>{if(e){z(!0);try{await e.disconnectHosted(l),te((await e.hosted()).credentials)}catch(v){A(v.message)}finally{z(!1)}}},[e]);re(()=>{if(!e||h!=="waiting")return;let l=!0,v=setInterval(async()=>{try{let _=await e.machines();if(!l)return;x(_);let L=ke.current;if(!L)return;let Le=_.filter(Se=>!L.has(Se.id)),ge=Le.find(Se=>Se.state!=="offline")??Le[0];ge&&(vn(ge.id),M&&Zn(y,M),f("connected"),s?.(_))}catch{}},Xn);return()=>{l=!1,clearInterval(v)}},[h,e,s,M,y]);let St=me(async()=>{if(e){A(null),z(!0);try{let l=await e.lookup(U);$(l),f("confirm")}catch(l){A(l.message)}finally{z(!1)}}},[e,U]),Re=me(async()=>{if(e){A(null),z(!0);try{try{ke.current=new Set((await e.machines()).map(l=>l.id))}catch{ke.current=new Set(k.map(l=>l.id))}await e.approve(U),f("waiting"),ce(Date.now())}catch(l){A(l.message)}finally{z(!1)}}},[e,U,k]),An=me(async()=>{if(e){z(!0);try{await e.deny(U),Ke("browser"),f("denied")}catch(l){A(l.message)}finally{z(!1)}}},[e,U]),T=xe(()=>d?.connect_url??null,[d]),[ee,xt]=R(()=>an()),rs=xe(()=>T?Sn(T,ee??void 0,M??void 0):null,[T,ee,M]),as=xe(()=>rn(T),[T]),is=me(l=>{if(k.length===0)return null;let v=ne.find(L=>L.id===l);if(!v)return null;let _=k.flatMap(L=>L.runtimes??[]).filter(L=>v.expects.includes(L.id));return _.length===0?{tone:"dim",text:"not installed"}:_.some(L=>L.authenticated===!0)?{tone:"ok",text:"ready"}:_.every(L=>L.authenticated===!1)?{tone:"warn",text:"needs signing in"}:{tone:"dim",text:"installed"}},[k]),cs=me((l=null)=>{S(l),A(null),Ce(null),Ne(!1),Z(!1),Dn.current=!1,xt(an()),f("launch")},[]),Dn=je(!!t);re(()=>{h!=="launch"||!T||Dn.current||(Dn.current=!0,Ne(!0),jn(T,{...ee?{nonce:ee}:{},...M?{want:M}:{}}).then(Ce))},[h,T,ee,M]);let Pt=me(()=>{Ne(!0),Gn().then(Ce)},[]),ls=me(()=>{he&&(Z(!1),xt(an())),Pt()},[he,Pt]),Ze=xe(()=>{let l=d?.runtimes;return l?ne.filter(v=>l.includes(v.id)):Fn()},[d?.runtimes]),fe=xe(()=>{let l=ne.find(v=>v.id===M);return l?{choice:l,Mark:pe[l.id]??null}:null},[M]),Un=xe(()=>k.find(l=>l.id===Ue),[k,Ue]);re(()=>{let l=ee;if(!e||h!=="launch"||!l)return;let v=!1,_=Date.now()+15e4,L=setInterval(async()=>{if(Date.now()>_){clearInterval(L),Z(!0);return}try{let Le=await e.claim(l);if(v)return;if(Le.declined){clearInterval(L),Ce(null),Ke("machine"),f("denied");return}if(!Le.claimed)return;clearInterval(L);try{ke.current=new Set((await e.machines()).map(ge=>ge.id))}catch{ke.current=new Set(k.map(ge=>ge.id))}f("waiting"),ce(Date.now())}catch{}},Xn);return()=>{v=!0,clearInterval(L)}},[e,h,k,ee]);let Ee=xe(()=>{if(!C)return null;if(C.approved||C.denied)return"answered";let l=C.expires_at?Date.parse(C.expires_at):Number.NaN;return Number.isFinite(l)&&l<=Pe?"expired":"live"},[C,Pe]);re(()=>{if(!(h==="confirm"&&Ee==="live"||h==="waiting"||h==="hosted"))return;let v=setInterval(()=>yn(Date.now()),1e3);return()=>clearInterval(v)},[h,Ee]);let _t=me(async(l,v)=>{if(e)try{await e.approveRuntime(l,v),x(await e.machines())}catch(_){A(_.message)}},[e]);return h==="loading"?r("div",{className:"soba-connect",...p?{"data-theme":p}:{},style:Je,children:r("div",{className:"sc-card",children:r("p",{className:"sc-note",children:"Loading\u2026"})})}):w("div",{className:"soba-connect",...p?{"data-theme":p}:{},style:Je,children:[m&&r("button",{type:"button",className:"sc-modal-close",onClick:m,"aria-label":"Close",children:"\xD7"}),h==="manage"&&w("div",{className:"sc-card",children:[r("h2",{className:"sc-title",children:"Your compute"}),w("p",{className:"sc-sub",children:[r(cn,{context:d})," ",k.length>0&&le.length>0?"runs on your connected plan, and on these machines while they are awake.":le.length>0?"runs on the plan you connected. Nothing here is charged to you.":"runs on these machines, while they are awake."]}),w("div",{className:"sc-conns",children:[le.map(l=>w("div",{className:"sc-conn",children:[r("span",{className:"sc-opt-tile","aria-hidden":"true",children:r(Oe,{className:"sc-opt-mark"})}),w("div",{className:"sc-opt-text",children:[r("span",{className:"sc-opt-label",children:l.provider==="openai-chatgpt"?"ChatGPT plan":l.provider}),r("span",{className:"sc-opt-sub",children:l.account_label??"signed in"})]}),r("button",{type:"button",className:"sc-conn-action",onClick:()=>void ue(l.provider),disabled:J,children:"Disconnect"}),w("p",{className:"sc-conn-note",children:[r(cn,{context:d})," stops using it. To withdraw the grant entirely, remove it in your OpenAI settings."]})]},l.provider)),r(Ge,{machines:k,onApproveRuntime:_t})]}),q&&r("p",{className:"sc-error",children:q}),r("button",{type:"button",className:"sc-btn sc-btn-wide",style:{marginTop:16},onClick:()=>f("choose"),children:k.length>0?"Connect another machine":"Connect compute"})]}),h==="choose"&&w("div",{className:"sc-card",children:[r(vs,{context:d}),r("h2",{className:"sc-h",id:oe,children:g==="payment_required"?"Carry on with your own AI":g==="no_compute"?"This run needs a machine":"Connect your AI"}),r("p",{className:"sc-p",children:"Use compute you already have."}),T&&Ze.length>0&&w(un,{children:[r("p",{className:"sc-opt-group",children:"On your machine"}),r("div",{className:"sc-opts",children:Ze.map(l=>{let v=pe[l.id];return w("button",{type:"button",className:"sc-opt",onClick:()=>cs(l.id),children:[r("span",{className:"sc-opt-tile","aria-hidden":"true",children:v&&r(v,{className:"sc-opt-mark"})}),r("span",{className:"sc-opt-text",children:r("span",{className:"sc-opt-label",children:l.label})}),(()=>{let _=is(l.id);return _?r("span",{className:`sc-opt-has sc-opt-has-${_.tone}`,children:_.text}):Me===l.id?r("span",{className:"sc-opt-last",children:"last used"}):r(xn,{className:"sc-opt-go"})})()]},l.id)})}),w("p",{className:"sc-opt-note",children:["Your accounts stay there. ",Tt(d)," never sees them."]})]}),Nn&&w(un,{children:[T&&Ze.length>0&&r("div",{className:"sc-or","aria-hidden":"true",children:r("span",{children:"or"})}),T&&Ze.length>0&&r("p",{className:"sc-opt-group",children:"In your browser"}),r("div",{className:"sc-opts",children:w("button",{type:"button",className:"sc-opt",onClick:V?B:void 0,disabled:!V||!e,children:[r("span",{className:"sc-opt-tile","aria-hidden":"true",children:r(Oe,{className:"sc-opt-mark"})}),r("span",{className:"sc-opt-text",children:r("span",{className:"sc-opt-label",children:"Sign in with ChatGPT"})}),V?r(xn,{className:"sc-opt-go"}):r("span",{className:"sc-opt-last",children:"soon"})]})}),r("p",{className:"sc-opt-note",children:V?"Nothing to install.":"Nothing to install. Not switched on here yet."})]}),(!T||Ze.length===0)&&(!V||!Nn)&&r("p",{className:"sc-error",style:{marginTop:16},children:"This app has no publishable key yet, so there is nothing to pair against."}),q&&r("p",{className:"sc-error",children:q}),T&&d?.show_code===!0&&r("div",{className:"sc-opt-alt",children:r("button",{type:"button",className:"sc-alt-link",onClick:()=>f("code"),children:"I have a code"})})]}),h==="launch"&&w("div",{className:"sc-card",children:[w("div",{className:"sc-head",children:[r(Ye,{onClick:()=>f("choose")}),r("p",{className:"sc-head-title",children:"Soba Connect"})]}),r(Pn,{mark:fe?.Mark??W,still:he||!wn&&K===null}),r("h2",{className:"sc-h",id:oe,children:he?"No answer from this machine":K==="absent"?"Nothing opened":K===null?"Opening Soba Connect\u2026":"Approve it on this machine"}),he?r("p",{className:"sc-p",children:"Soba Connect did not answer. It may not be open, or nobody was there. Try again when you are ready."}):K==="absent"?r("p",{className:"sc-p",children:"Nothing opened on this machine. Open it yourself below, or install it if it is not here yet."}):r("p",{className:"sc-p",children:K===null?"Approve it there and this page does the rest.":"This page finishes on its own."}),fe&&w("p",{className:"sc-prereq",children:[fe.Mark&&r(fe.Mark,{className:"sc-rt-mark"}),"Needs ",fe.choice.prerequisite]}),w("div",{className:"sc-stack",style:{marginTop:18},children:[r("a",{className:K==="absent"||he?"sc-btn sc-btn-primary":"sc-btn",href:rs??"#",onClick:ls,children:he?"Try again":K==="absent"?"Open Soba Connect":"Open it again"}),r("p",{className:"sc-note",children:K===null?"Your browser will ask permission first.":"Your browser asks permission the first time."}),fe&&K==="absent"&&r("p",{className:"sc-note",children:r(Cs,{text:fe.choice.hint})}),w("div",{className:"sc-foot-strip",children:[r("span",{children:"Not installed on this machine?"}),w("button",{type:"button",className:"sc-foot-go",onClick:()=>f("get"),children:["Get it",r(xn,{})]})]})]})]}),h==="get"&&w("div",{className:"sc-card",children:[w("div",{className:"sc-head",children:[r(Ye,{onClick:()=>f("launch")}),r("p",{className:"sc-head-title",children:"Get Soba Connect"})]}),r("div",{className:"sc-opts",children:on.map(l=>w("a",{className:"sc-opt",href:`${as}/download/${l.slug}`,target:"_blank",rel:"noreferrer noopener",children:[r("span",{className:"sc-opt-tile","aria-hidden":"true",children:r(Te,{className:"sc-opt-mark"})}),r("span",{className:"sc-opt-text",children:r("span",{className:"sc-opt-label",children:l.label})}),r(xn,{className:"sc-opt-go"})]},l.slug))}),r("p",{className:"sc-opt-note",children:"Install it, then come back here and press the row you started with."})]}),h==="code"&&w("div",{className:"sc-card",children:[w("div",{className:"sc-head",children:[r(Ye,{onClick:()=>f("choose")}),r("p",{className:"sc-head-title",children:"Soba Connect"})]}),r("h2",{className:"sc-h",id:oe,children:"Enter the code from that machine"}),r("p",{className:"sc-p",children:"Eight characters, shown by Soba Connect once you paste the link."}),w("form",{className:"sc-stack",style:{marginTop:16},onSubmit:l=>{l.preventDefault(),St()},children:[r("input",{className:"sc-input",value:U,onChange:l=>D(l.target.value),placeholder:"ACDE-F234",autoComplete:"off",autoFocus:!0,"aria-label":"Pairing code"}),q&&r("p",{className:"sc-error",children:q}),r("button",{type:"submit",className:"sc-btn sc-btn-primary",disabled:J||U.length<8,children:J?"Checking\u2026":"Continue"})]})]}),h==="confirm"&&C&&w("div",{className:"sc-card",children:[w("div",{className:"sc-head",children:[r(Ye,{onClick:()=>f("code")}),r("p",{className:"sc-head-title",children:"Soba Connect"})]}),r("h2",{className:"sc-title",children:"Attach this machine to your account?"}),w("p",{className:"sc-sub",children:[r(cn,{context:d})," may send your runs to it once you approve. It can never see the account or the keys on it."]}),w("ul",{className:"sc-facts",children:[r(ln,{k:"Code",v:C.user_code}),r(ln,{k:"Machine",v:C.hostname??"not stated"}),r(ln,{k:"System",v:[C.platform,C.arch].filter(Boolean).join(" / ")||"not stated"}),r(ln,{k:"Asked by",v:C.client??"not stated"}),C.labels.length>0&&r(ln,{k:"Labels",v:C.labels.join(", ")})]}),r("p",{className:"sc-note",style:{marginTop:12},children:"Every line above is what that machine said about itself. If none of it looks like a computer of yours, say no."}),Ee==="expired"&&r("p",{className:"sc-error",children:"That code has expired. Ask the machine for a new one. It prints a fresh code each time it starts."}),Ee==="answered"&&r("p",{className:"sc-error",children:"That code has already been answered. If it was not you, deny the next one."}),q&&r("p",{className:"sc-error",children:q}),w("div",{className:"sc-row",style:{marginTop:16},children:[r("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:()=>void Re(),disabled:J||Ee!=="live",children:"Approve"}),r("button",{type:"button",className:"sc-btn",onClick:()=>void An(),disabled:J||Ee==="answered",children:"No, deny it"})]}),Ee==="live"&&C.expires_at&&w("p",{className:"sc-note",style:{marginTop:10},children:["This code expires in ",ws(Date.parse(C.expires_at)-Pe),"."]})]}),h==="waiting"&&w("div",{className:"sc-card",children:[w("div",{className:"sc-head",children:[r(Ye,{onClick:()=>f("choose")}),r("p",{className:"sc-head-title",children:fe?.choice.short??"Soba Connect"})]}),r(Pn,{mark:fe?.Mark??W}),r("h2",{className:"sc-h",id:oe,children:"Approved. Waiting for it to connect"}),r("p",{className:"sc-p",children:"Nothing more to do here. This page changes when it arrives."}),F>0&&Pe-F>bs&&r("p",{className:"sc-note sc-tone-warn",style:{marginTop:14,textAlign:"center"},children:"Still nothing. Look at Soba Connect on that machine: it says what it is doing. This keeps watching either way."})]}),h==="connected"&&w("div",{className:"sc-card",children:[r(et,{tone:"ok"}),r("h2",{className:"sc-h",id:oe,children:Un?.label?`${Un.label} is connected`:"Connected"}),w("p",{className:"sc-p",children:[r(cn,{context:d})," will use ",Un?.label?"it":"this machine"," from now on, while it is awake."]}),o&&w(un,{children:[r("div",{style:{marginTop:16},children:r(Ge,{machines:k,onApproveRuntime:_t})}),r("button",{type:"button",className:"sc-btn sc-btn-wide",style:{marginTop:14},onClick:()=>f("manage"),children:"Done"})]})]}),h==="hosted"&&w("div",{className:"sc-card",children:[w("div",{className:"sc-head",children:[r(Ye,{onClick:()=>f("choose")}),r("p",{className:"sc-head-title",children:"ChatGPT"})]}),_e?r(Pn,{mark:Oe,still:!0}):r(Pn,{mark:Oe}),r("h2",{className:"sc-h",id:oe,children:_e?"Your browser blocked the window":"Finish signing in to ChatGPT"}),r("p",{className:"sc-p",children:_e?"Nothing opened. Open the sign-in yourself below. A link you click is allowed where a window we open is not.":"Approve it in the window that opened."}),w("div",{className:"sc-stack",style:{marginTop:18},children:[_e&&r("a",{className:"sc-btn sc-btn-primary",href:_e,target:"soba-connect-plan",rel:"noreferrer",children:"Open the ChatGPT sign-in"}),q&&r("p",{className:"sc-error",children:q}),qe>0&&Pe-qe>ys&&r("p",{className:"sc-note sc-tone-warn",children:"Still nothing. The window may have been closed before it finished, or the sign-in may have been declined. This keeps watching either way."})]})]}),h==="hosted_connected"&&w("div",{className:"sc-card",children:[r(et,{tone:"ok"}),r("h2",{className:"sc-h",id:oe,children:"ChatGPT is connected"}),w("p",{className:"sc-p",children:[r(cn,{context:d})," will run on your ChatGPT plan",le[0]?.account_label?` (${le[0].account_label})`:"",". Nothing more to pay, nothing to install."]}),r("p",{className:"sc-opt-note",style:{textAlign:"center"},children:"It runs on our side, so it has no access to your files or your terminal."}),o&&w(un,{children:[r("button",{type:"button",className:"sc-btn sc-btn-wide",style:{marginTop:16},onClick:()=>f("manage"),children:"Done"}),r("div",{className:"sc-opt-alt",children:r("button",{type:"button",className:"sc-alt-link",onClick:()=>f("choose"),children:"Connect a machine too"})})]})]}),h==="denied"&&w("div",{className:"sc-card",children:[r(et,{tone:"off"}),r("h2",{className:"sc-h",id:oe,children:"Declined"}),r("p",{className:"sc-p",children:In==="machine"?"Nothing was connected. You can ask again whenever you like.":"That machine was not attached to your account, and the terminal has been told so."}),r("button",{type:"button",className:"sc-btn sc-btn-wide",style:{marginTop:16},onClick:()=>f("choose"),children:"Back to the start"})]})]})}function Tt(e){return e?.app.name??"this app"}function It(e){let n=e?.app.icon_urls;if(n?.length)return n;let t=e?.app.icon_url;return t?[t]:[]}function vs({context:e}){let n=It(e),[t,s]=R(0),o=n[t];return e?.app.mark==="soba"?r(W,{className:"sc-app-mark"}):o?r("img",{className:"sc-app-mark",src:o,alt:"","aria-hidden":"true",onError:()=>s(i=>i+1)}):null}function cn({context:e}){let n=It(e),[t,s]=R(0),o=n[t],i=e?.app.mark==="soba";return w("span",{className:"sc-app",children:[i&&r(W,{className:"sc-app-icon"}),!i&&o&&r("img",{className:"sc-app-icon",src:o,alt:"",onError:()=>s(a=>a+1)}),Tt(e)]})}function Ye({onClick:e}){return r("button",{type:"button",className:"sc-head-back",onClick:e,"aria-label":"Back",children:r("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",children:r("path",{d:"M15 5 8 12l7 7",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}function xn({className:e}){return r("svg",{className:e,viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",children:r("path",{d:"M9 5l7 7-7 7",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function Pn({mark:e,still:n}){return w("span",{className:"sc-waiting","aria-hidden":"true",children:[!n&&r("svg",{className:"sc-waiting-orbit",viewBox:"0 0 100 100","aria-hidden":"true",focusable:"false",children:r("circle",{className:"sc-waiting-arc",cx:"50",cy:"50",r:"46"})}),r(e,{className:"sc-waiting-mark"})]})}function et({tone:e}){return w("span",{className:`sc-result sc-result-${e}`,"aria-hidden":"true",children:[r("svg",{className:"sc-result-ring",viewBox:"0 0 100 100","aria-hidden":"true",focusable:"false",children:r("circle",{className:"sc-result-circle",cx:"50",cy:"50",r:"46"})}),r("svg",{className:"sc-result-glyph",viewBox:"0 0 100 100","aria-hidden":"true",focusable:"false",children:r("path",{className:"sc-result-path",d:e==="ok"?"M33 51.5 44.5 63 68 39":"M34 50h32"})}),e==="ok"&&r("span",{className:"sc-result-halo"})]})}function Cs({text:e}){return r(un,{children:e.split("`").map((n,t)=>t%2===1?r("code",{className:"sc-inline-code",children:n},t):n)})}function ln({k:e,v:n}){return w("li",{className:"sc-fact",children:[r("span",{className:"sc-fact-key",children:e}),r("span",{children:n})]})}import{useEffect as Ns,useRef as st}from"react";var _n=0,tt=null;function $t(){if(typeof document>"u")return()=>{};_n===0&&(tt=document.body.style.overflow,document.body.style.overflow="hidden"),_n+=1;let e=!1;return()=>{e||(e=!0,_n-=1,_n===0&&(document.body.style.overflow=tt??"",tt=null))}}import{jsx as At}from"react/jsx-runtime";function dn({open:e,onClose:n,labelledBy:t,theme:s,style:o,children:i}){let a=st(null),m=st(null),c=st(null);return Ns(()=>{let p=a.current;if(p){if(!e){p.open&&p.close();return}return p.open||p.showModal(),document.activeElement===p&&m.current?.focus(),$t()}},[e]),At("dialog",{ref:a,className:"soba-connect sc-modal","aria-labelledby":t,...s?{"data-theme":s}:{},style:o,onCancel:p=>{p.preventDefault(),n()},onPointerDown:p=>{c.current=p.target},onClick:p=>{p.target===p.currentTarget&&c.current===p.currentTarget&&n()},children:At("div",{className:"sc-modal-sheet",ref:m,tabIndex:-1,children:i})})}function be(e){let n=`${e.unit}s`;return e.reward==="unlimited"?`Unlimited ${n} on your own AI`:e.reward==="included"&&e.includedUnits!==null?`${xs(e.includedUnits)} ${n} a month once you connect`:e.reward==="credit"&&e.creditMicros>0?`${Ss(e.creditMicros)} back each month you stay connected`:null}function ye(e){return e==="unlimited"||e==="included"}var ks=new Set(["user-hardware","user-subscription"]);function ae(e){return e===null||e.length===0?!1:e.every(n=>ks.has(n))}var Ss=e=>(e/1e6).toLocaleString("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2}),xs=e=>e.toLocaleString("en-US");import{createContext as Ps,useContext as _s}from"react";var ot=Ps(null);function I(){let e=_s(ot);if(!e)throw new Error("useSoba() must be used inside a <SobaProvider>.");return e}import{createContext as Dt,useContext as Ut}from"react";var rt=Dt(null);function qt(){return Ut(rt)}var at=Dt({context:null,machines:void 0,theme:"light"});function O(){return Ut(at)}import{jsx as pn}from"react/jsx-runtime";function Ms({className:e}){let{theme:n}=O(),t=e?`soba-connect ${e}`:"soba-connect";return pn("div",{className:t,"data-theme":n,children:pn(it,{})})}function it(){let{compute:e}=I();return e.loading&&!e.machines.length?pn("p",{className:"sc-note",children:"Loading\u2026"}):e.error&&!e.machines.length?pn("p",{className:"sc-error",children:e.error.message}):pn(Ge,{machines:e.machines})}import{useEffect as Es,useRef as Bt,useState as Ls}from"react";import{useId as Rs}from"react";import{jsx as ze,jsxs as Mn}from"react/jsx-runtime";function mn({open:e,onOpenChange:n,initialCode:t,onConnected:s,showStatus:o,reason:i}){let{error:a}=I(),m=qt(),c=O(),p=()=>n(!1),g=Rs(),b=c.context?.background?.trim(),h=b?en(b,c.context?.accent):void 0;return Mn(dn,{open:e,onClose:p,labelledBy:g,theme:c.theme,style:h,children:[a?Mn("div",{className:"sc-card",children:[ze("h2",{className:"sc-title",id:g,children:"Could not start"}),ze("p",{className:"sc-error",children:a.message})]}):!m&&!c.context?Mn("div",{className:"sc-card",children:[ze("h2",{className:"sc-title",id:g,children:"One moment"}),ze("p",{className:"sc-note",children:"Getting your compute\u2026"})]}):ze(nt,{client:m,onClose:p,headingId:g,theme:c.theme,initialContext:c.context,...c.machines!==void 0?{initialMachines:c.machines}:{},...t?{initialCode:t}:{},...s?{onConnected:s}:{},...o===void 0?{}:{showStatus:o},...i?{reason:i}:{}}),Mn("p",{className:"sc-modal-foot",children:[ze(W,{className:"sc-foot-mark"}),"Secured by Soba"]})]})}import{Fragment as ct,jsx as $e,jsxs as hn}from"react/jsx-runtime";function Ae({children:e,variant:n,className:t,initialCode:s,onConnected:o,defaultOpen:i,open:a,onOpenChange:m,showConnected:c=!0}){let{compute:p,connect:g}=I(),{theme:b}=O(),[h,f]=Ls(i??!!s),d=Bt(null),N=a!==void 0,k=!N&&!i&&!s&&g.hasModal,x=N?a:k?g.isOpen:h,U=F=>{k?F?g.open("manual"):g.close():N||f(F),m?.(F)},D=Bt(x);Es(()=>{D.current&&!x&&d.current?.focus(),D.current=x},[x]);let C=p.machines.find(F=>F.state!=="offline")??p.machines[0],$=C?.runtimes?.find(F=>!F.quarantined)??C?.runtimes?.[0],q=c&&C!==void 0,A=C?tn(C):null,J=$?sn($.id):void 0,z=(J?pe[J.id]:void 0)??($?We:Te);return hn(ct,{children:[$e("button",{ref:d,type:"button","data-theme":b,className:["sc-btn",q?"sc-btn-connected":"sc-btn-icon",!q&&n==="primary"?"sc-btn-primary":"",t].filter(Boolean).join(" "),onClick:()=>U(!0),children:e??(q?hn(ct,{children:[$e("span",{className:"sc-runtime-tile","aria-hidden":"true",children:$e(z,{className:"sc-runtime-mark"})}),hn("span",{className:"sc-btn-connected-text",children:[$?.display_name??"Connected",C?.label&&hn("span",{className:"sc-btn-connected-where",children:[" on ",C.label]})]}),$e("i",{className:`sc-dot sc-dot-${A?.tone??"off"}`,"aria-hidden":"true"}),A&&$e("span",{className:"sc-sr",children:A.text})]}):hn(ct,{children:[$e(W,{className:"sc-btn-mark"}),"Connect compute"]}))}),!k&&$e(mn,{open:x,onOpenChange:U,...s?{initialCode:s}:{},...o?{onConnected:o}:{}})]})}import{jsx as lt,jsxs as Ts}from"react/jsx-runtime";function Os({initialCode:e,onConnected:n,className:t,showStatus:s=!0}){let{theme:o}=O();return Ts("div",{className:t?`soba-connect ${t}`:"soba-connect","data-theme":o,children:[s&&lt(it,{}),lt("div",{className:"sc-compute-act",children:lt(Ae,{...e?{initialCode:e}:{},...n?{onConnected:n}:{}})})]})}import{useId as Bs,useState as Hs}from"react";import{useCallback as Is,useState as $s}from"react";function Rn(){let[e,n]=$s(null);return{open:Is(()=>{n(null),Yn().then(n)},[]),launch:e,note:e==="absent"?"Nothing opened here. That machine may be a different computer, or asleep.":null}}import{useCallback as Ht,useMemo as Ft}from"react";function fn(e){if(!e)return null;if(typeof e=="string")return e;if(typeof Response<"u"&&e instanceof Response)return Vt(e.status);let n=e,t=n.error;return typeof t?.code=="string"?t.code:typeof t?.type=="string"?t.type:typeof n.code=="string"?n.code:typeof n.status=="number"?Vt(n.status):n.cause&&n.cause!==e?fn(n.cause):null}function Vt(e){return e===402?"payment_required":e===409?"no_compute":null}function ut(...e){let[n,t]=e,{plan:s,compute:o,connect:i}=I(),a=t?.predict??e.length===0,m=Ds(As(n),o)??(a?Us(s,o):null),c=s.plan,p=s.plans,g=Ft(()=>{if(m!=="payment_required")return null;let d=c?.price??0,N=c?.included_units??0;return p.find(k=>k.id!==c?.id&&k.price>d&&(k.included_units===null||k.included_units>N))??null},[m,p,c]),b=Ht(async()=>{if(!g)return;if(g.selectable){await s.select(g.id);return}let d=await s.checkout(g.id);window.location.assign(d)},[g,s]),h=i.open,f=Ht(()=>{m&&h(m)},[h,m]);return Ft(()=>{if(!m)return null;let d=c?be({unit:c.unit,reward:c.connected_reward,includedUnits:c.connected_included_units,creditMicros:c.connected_credit*1e6}):null,N=c&&ye(c.connected_reward)?d:null;return{reason:m,...qs(m,{connectOffer:N,connected:o.connected,online:o.online,machine:nn(o.machines)?.label??null,unit:c?.unit??"message",interval:c?.interval??"month",upgrade:g!==null,resets:s.current?.period_end??null}),connectOffer:N,upgradeTo:g,connect:f,upgrade:b}},[m,c,o,g,f,b,s.current?.period_end])}function As(e){let n=fn(e);return n==="payment_required"||n==="no_compute"?n:null}function Ds(e,n){return e==="no_compute"&&n.connected&&n.online?null:e}function Us(e,n){let t=e.plan;return!t||n.loading?null:ae(t.route_allow)&&!n.online?"no_compute":e.remaining===0&&t.overage==="stop"?"payment_required":null}function qs(e,n){if(e==="payment_required"){let t=`No ${n.unit}s left this ${n.interval}`;return n.connectOffer&&!n.connected?{title:t,body:`${n.connectOffer}. Connecting takes a minute and costs nothing.`}:n.connectOffer&&!n.online?{title:t,body:`${n.connectOffer}. Waking ${n.machine??"your machine"} is enough.`}:n.upgrade?{title:t,body:n.resets?`A larger plan carries on now. This one comes back on ${Wt(n.resets)}.`:"A larger plan carries on now, or wait for this one to renew."}:{title:t,body:n.resets?`Your allowance comes back on ${Wt(n.resets)}.`:"Your allowance comes back at the start of the next period."}}return n.connected&&!n.online?{title:`${n.machine??"Your machine"} can't be reached`,body:"This run needs it awake and connected. Open Soba Connect on that machine, or connect another one."}:{title:"Nothing connected yet",body:"This app runs on AI you already pay for, on a machine of your own. Connect one and this run has somewhere to go."}}function Wt(e){let n=new Date(e);return Number.isNaN(n.getTime())?e:n.toLocaleDateString(void 0,{day:"numeric",month:"long"})}import{Fragment as dt,jsx as E,jsxs as we}from"react/jsx-runtime";function Fs(e){let{at:n=.25,className:t,error:s,fallback:o=null}=e,i=e.predict??!("error"in e),{plan:a,compute:m,connect:c}=I(),{theme:p}=O(),[g,b]=Hs(null),h=Bs(),f=E(dt,{children:o}),d=a.plan;if(!d||a.loading||m.loading)return f;let N=e.allow!==void 0?e.allow:d.route_allow;if(m.connected)return m.online?f:E(Gt,{className:t,theme:p,stalled:!0,children:E(Vs,{machine:nn(m.machines)?.label??null,ownCompute:ae(N),onConnectAnother:()=>c.open("no_compute")})});let k=(()=>{let C=fn(s);return C==="payment_required"||C==="no_compute"})();if(!i&&!k)return f;let x=ae(N)?Gs(d.unit,ae(d.route_allow)):ye(d.connected_reward)?js(a,d,n):null;if(!x)return f;let U=!i||x.meter!==null&&x.meter.left===0,D=g??U;return we(Gt,{className:t,theme:p,children:[E("div",{className:"sc-nudge-top",children:we("div",{className:"sc-nudge-say",children:[E("p",{className:"sc-nudge-title",children:x.title}),E("p",{className:"sc-nudge-detail",children:x.detail}),we("button",{type:"button",className:"sc-btn sc-btn-quiet sc-nudge-more","aria-expanded":D,"aria-controls":h,onClick:()=>b(!D),children:[D?"Hide the details":"How it works",E(Ys,{})]})]})}),D?E("ol",{className:"sc-nudge-steps",id:h,children:Ws(c.app?.name,rn(c.connectUrl)).map(C=>we("li",{children:[C.opens?E("button",{type:"button",className:"sc-step-lead",onClick:()=>c.open("manual"),children:C.lead}):E("strong",{children:C.lead}),C.detail?E("span",{children:C.detail}):null,C.links.length>0?we("span",{className:"sc-step-links",children:[C.linksLead,C.links.map($=>E("a",{href:$.href,target:"_blank",rel:"noreferrer noopener",children:$.label},$.href))]}):null]},C.lead))}):null,E(Ae,{variant:"primary"})]})}function Gt({className:e,theme:n,stalled:t,children:s}){return E("div",{className:e?`soba-connect sc-fill ${e}`:"soba-connect sc-fill","data-theme":n,children:E("div",{className:t?"sc-nudge sc-nudge-stalled":"sc-nudge",children:s})})}function Vs({machine:e,ownCompute:n,onConnectAnother:t}){let s=Rn();return we(dt,{children:[E("div",{className:"sc-nudge-top",children:we("div",{className:"sc-nudge-say",children:[we("p",{className:"sc-nudge-title",children:[e??"Your machine"," can\u2019t be reached"]}),E("p",{className:"sc-nudge-detail",children:n?"Soba Connect there has stopped reporting in, so runs have nowhere to go until it is back.":"Soba Connect there has stopped reporting in, so nothing will run on your own AI until it is back."}),s.note&&E("p",{className:"sc-nudge-note",children:s.note}),s.launch==="absent"&&E("button",{type:"button",className:"sc-btn sc-btn-quiet sc-nudge-more",onClick:t,children:"Connect another machine"})]})}),E("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:s.open,children:"Open Soba Connect"})]})}function Ws(e,n){return[{lead:"Download Soba Connect",detail:"",linksLead:n?"Get it for":void 0,links:n?on.map(t=>({label:t.label,href:`${n}/download/${t.slug}`})):[]},{lead:"Connect compute",detail:"Press this, then approve the pairing when the app asks.",opens:!0,links:[]},{lead:"Let your AIs serve",detail:`It finds what is installed on that machine. Allow one, and ${e??"this app"} sends every run there.`,linksLead:"Nothing on it yet?",links:ne.map(t=>({label:t.short,href:t.install}))}]}function Gs(e,n){return{title:n?"This plan runs on your own AI.":`These ${e}s run on your own AI.`,detail:`Connect a machine and your ${e}s run there, free, on access you already have.`,meter:null}}function js(e,n,t){let{remaining:s,included:o}=e;if(s===null||o===null||o===0||s>Math.ceil(o*t))return null;let i=be({unit:n.unit,reward:n.connected_reward,includedUnits:n.connected_included_units,creditMicros:n.connected_credit*1e6});return i?{title:s===0?`No ${n.unit}s left this month.`:`${s} ${n.unit}${s===1?"":"s"} left this month.`,detail:we(dt,{children:[i,"."]}),meter:{left:s,of:o}}:null}function Ys(){return E("svg",{viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",className:"sc-nudge-chev",children:E("path",{d:"M4.5 6.5 8 10l3.5-3.5",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})})}var zs=new Set(["delta","thinking","status","done","error"]);function En(e){let n;try{n=JSON.parse(e)}catch{return null}if(!n||typeof n!="object")return null;let t=n,s=t.type==="event"?t.event:t;if(!s||typeof s!="object")return null;let o=s;if(typeof o.type!="string"||!zs.has(o.type))return null;let i={type:o.type};return typeof o.text=="string"&&(i.text=o.text),typeof o.message=="string"&&(i.message=o.message),typeof o.tool=="string"&&(i.tool=o.tool),typeof o.tier=="string"&&(i.tier=o.tier),o.usage&&typeof o.usage=="object"&&(i.usage=o.usage),i}async function*pt(e){let n=e.body;if(!n)throw new Error("That run response had no body to stream.");let t=(e.headers.get("content-type")??"").includes("ndjson"),s=n.getReader(),o=new TextDecoder,i="",a=[];try{for(;;){let c=await s.read();if(c.done)break;for(i+=o.decode(c.value,{stream:!0});;){let p=i.indexOf(`
3
+ `);if(p===-1)break;let g=Yt(i.slice(0,p));if(i=i.slice(p+1),t){let b=g.trim()?En(g):null;b&&(yield b);continue}if(g===""){let b=a.join(`
4
+ `);if(a=[],b==="[DONE]")return;let h=b?En(b):null;h&&(yield h);continue}jt(g,a)}}!t&&i&&jt(Yt(i),a);let m=t?i.trim():a.join(`
5
+ `);if(m&&m!=="[DONE]"){let c=En(m);c&&(yield c)}}finally{s.cancel().catch(()=>{})}}function jt(e,n){if(!e||e.startsWith(":"))return;let t=e.indexOf(":");if(t===-1||e.slice(0,t)!=="data")return;let s=e.slice(t+1);n.push(s.startsWith(" ")?s.slice(1):s)}function Yt(e){return e.endsWith("\r")?e.slice(0,-1):e}async function Ks(e){let n="";for await(let t of e)if(t.type==="delta"&&t.text&&(n+=t.text),t.type==="error")throw new Error(t.message??"The run ended with an error.");return n}import{useId as Js,useState as zt}from"react";import{jsx as G,jsxs as Ln}from"react/jsx-runtime";function Zs({reason:e}){return G("span",{className:"sc-limit-mark","aria-hidden":"true",children:e==="no_compute"?G(We,{}):G(W,{})})}function Xs(e){let{error:n,variant:t="card",onDismiss:s,className:o}=e,i=ut(n,{predict:e.predict??!("error"in e)}),a=Js(),m=O();if(!i)return null;let c=G(Qs,{offer:i,headingId:a,onDismiss:s});return t==="dialog"?G(dn,{open:!0,onClose:()=>s?.(),labelledBy:a,theme:m.theme,children:c}):G("div",{className:o?`soba-connect ${o}`:"soba-connect","data-theme":m.theme,children:c})}function Qs({offer:e,headingId:n,onDismiss:t}){let{compute:s}=I(),[o,i]=zt(!1),[a,m]=zt(null),c=e.reason==="no_compute"&&s.connected&&!s.online,p=c||e.connectOffer!==null||!s.connected,g=Rn();async function b(){i(!0),m(null);try{await e.upgrade()}catch(h){m(h.message)}finally{i(!1)}}return Ln("div",{className:"sc-card sc-limit",children:[Ln("div",{className:"sc-limit-head",children:[G(Zs,{reason:e.reason}),Ln("div",{children:[G("h2",{className:"sc-limit-title",id:n,children:e.title}),G("p",{className:"sc-limit-body",children:e.body})]})]}),a&&G("p",{className:"sc-error",children:a}),c&&g.note&&G("p",{className:"sc-limit-note",children:g.note}),Ln("div",{className:"sc-limit-actions",children:[t&&G("button",{type:"button",className:"sc-btn sc-btn-quiet",onClick:t,disabled:o,children:"Not now"}),e.upgradeTo&&G("button",{type:"button",className:p?"sc-btn":"sc-btn sc-btn-primary",onClick:()=>void b(),disabled:o,children:o?"Opening\u2026":e.upgradeTo.selectable?`Switch to ${e.upgradeTo.name}`:`${e.upgradeTo.name} for $${e.upgradeTo.price.toLocaleString()}/${e.upgradeTo.interval}`}),p&&G("button",{type:"button",className:c?"sc-btn":"sc-btn sc-btn-primary",onClick:e.connect,disabled:o,children:c?"Connect another machine":"Connect compute"}),c&&G("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:g.open,disabled:o,children:"Open Soba Connect"})]})]})}import{useMemo as eo}from"react";function gn(){let{plan:e,compute:n,connect:t}=I();return eo(()=>{let s=e.plan,o=e.current,i={plan:s,assignment:o,loading:e.loading,error:e.error,periodEnd:o?.period_end?new Date(o.period_end):null};if(!s)return{...i,state:"none",trialDaysLeft:null,ceiling:null,raised:!1,uncounted:!1,used:0,remaining:null,percent:null,unlimited:!1,reward:null,summary:"Nothing is assigned to this account, so runs are bounded by whatever the app allows."};let a=so(o?.trial_ends_at??null),m=s.connected_reward==="included"&&n.connected&&s.connected_included_units!==null,c=m?s.connected_included_units:s.included_units,p=s.connected_reward==="unlimited"&&n.connected,g=c===null,b=e.used??0,h=c===null?null:Math.max(0,c-b),f=c&&c>0?Math.min(100,Math.round(b/c*100)):null,d=c!==null&&b>=c,N=a!==null?"trial":g?"unlimited":d?s.overage==="meter"?"metered":"spent":"within";return{...i,state:N,trialDaysLeft:a,ceiling:c,raised:m,uncounted:p,used:b,remaining:h,percent:f,unlimited:g,reward:no(s,m||p,n.connected,()=>t.open("manual")),summary:to({plan:s,assignment:o,used:b,ceiling:c,trialDaysLeft:a,raised:m,uncounted:p,state:N})}},[e,n.connected,t])}function no(e,n,t,s){let o=be({unit:e.unit,reward:e.connected_reward,includedUnits:e.connected_included_units,creditMicros:e.connected_credit*1e6});return o?{line:o,inForce:n,required:!1,connected:t,actionable:ye(e.connected_reward)&&!t,open:s}:ae(e.route_allow)&&!t?{line:"Nothing connected yet, so nothing can run.",inForce:!1,required:!0,connected:t,actionable:!0,open:s}:null}function to(e){let{plan:n,assignment:t,used:s,ceiling:o,trialDaysLeft:i,raised:a,uncounted:m,state:c}=e,p=`${n.unit}${s===1?"":"s"}`,g=m?" Runs your own AI serves do not count toward it.":"";if(c==="trial"&&i!==null){let f=n.price===0?"it continues free":`it is $${n.price.toLocaleString()} a ${n.interval}`;return`${i} ${i===1?"day":"days"} left of your trial, then ${f}.`}if(c==="unlimited")return`${s.toLocaleString()} ${p} this period. No ceiling on this plan.`;if(c==="metered"){let f=s-(o??0);return n.overage_per_unit>0?`${f.toLocaleString()} past the allowance, billed at $${n.overage_per_unit} a ${n.unit}.${g}`:`${f.toLocaleString()} past the allowance.${g}`}if(c==="spent")return t?.period_end?`Allowance spent. It comes back on ${Kt(t.period_end)}.${g}`:`Allowance spent. It comes back at the start of the next period.${g}`;let b=Math.max(0,(o??0)-s),h=a?` Raised from ${(n.included_units??0).toLocaleString()} while your own AI is connected.`:t?.period_end?` Resets ${Kt(t.period_end)}.`:"";return`${b.toLocaleString()} of ${(o??0).toLocaleString()} ${n.unit}s left.${h}${g}`}function so(e){if(!e)return null;let n=new Date(e).getTime()-Date.now();return Number.isNaN(n)||n<=0?null:Math.max(1,Math.ceil(n/864e5))}function Kt(e){let n=new Date(e);return Number.isNaN(n.getTime())?e:n.toLocaleDateString(void 0,{day:"numeric",month:"long"})}import{Fragment as ro,jsx as j,jsxs as ie}from"react/jsx-runtime";function mt({heading:e="Current plan",showUsage:n=!0,showName:t=!0,className:s}){let o=gn(),{theme:i}=O(),a=h=>j("section",{className:s?`soba-connect sc-fill ${s}`:"soba-connect sc-fill","data-theme":i,children:ie("div",{className:"sc-card sc-current",children:[e&&j("h2",{className:"sc-section-title",children:e}),h]})});if(o.error)return a(j("p",{className:"sc-error",children:o.error.message}));if(o.loading)return a(j("p",{className:"sc-note",children:"Loading\u2026"}));if(!o.plan)return a(ie("div",{className:"sc-current-main",children:[j("p",{className:"sc-current-name",children:"No plan"}),j("p",{className:"sc-sub",children:o.summary})]}));let{plan:m,trialDaysLeft:c,percent:p,unlimited:g,reward:b}=o;return a(ie(ro,{children:[ie("div",{className:"sc-current-grid",children:[(t||c!==null)&&ie("div",{className:"sc-current-main",children:[t?ie("p",{className:"sc-current-name",children:[m.name,c!==null&&ie("span",{className:"sc-trial-badge",children:[c," ",c===1?"day":"days"," left"]})]}):c!==null&&j("p",{className:"sc-current-trial",children:ie("span",{className:"sc-trial-badge",children:[c," ",c===1?"day":"days"," left"]})}),t&&m.description&&j("p",{className:"sc-sub",children:m.description})]}),n&&ie("div",{className:"sc-usage",children:[ie("div",{className:"sc-row-between",children:[j("span",{className:"sc-fact-key",children:"Usage"}),j("span",{className:p!==null&&p>=100?"sc-usage-figure sc-usage-over":"sc-usage-figure",children:g?"Unlimited":p===null?"Metered":`${p}% used`})]}),p!==null&&j("div",{className:"sc-meter",role:"presentation",children:p>0&&j("span",{className:p>=100?"sc-meter-fill sc-meter-full":"sc-meter-fill",style:{width:`${p}%`}})}),j("p",{className:"sc-usage-line",children:o.summary})]})]}),b&&ie("div",{className:"sc-current-foot",children:[j("p",{className:b.required?"sc-plan-reward-line sc-plan-reward-need":b.inForce?"sc-plan-reward-line":"sc-plan-reward-line sc-plan-reward-open",children:b.required?b.line:b.inForce?`In force: ${oo(b.line)}.`:b.line}),(b.actionable||b.connected)&&j(Ae,{})]})]}))}var oo=e=>e.charAt(0).toLowerCase()+e.slice(1);import{useCallback as ao,useMemo as io,useState as Jt}from"react";var co={"user-hardware":"your own machine","user-subscription":"your own AI subscription","open-weights":"open models we host",frontier:"frontier models"},lo=new Set(["user-hardware","user-subscription"]);function ht(e={}){let{plan:n,compute:t,connect:s}=I(),[o,i]=Jt(null),[a,m]=Jt(null),{featured:c,onSelect:p,successUrl:g,cancelUrl:b}=e,h=ao(async d=>{i(d.id),m(null);try{if(d.selectable)await n.select(d.id);else if(p)p(d);else{let N=await n.checkout(d.id,{...g?{successUrl:g}:{},...b?{cancelUrl:b}:{}});window.location.assign(N);return}}catch(N){throw m(N.message),N}finally{(d.selectable||p)&&i(null)}},[n,p,g,b]),f=io(()=>n.plans.map(d=>{let N=n.current?.plan_id===d.id;return{plan:d,current:N,featured:c===d.id&&!N,price:uo(d),allowance:d.included_units===null?`Unlimited ${d.unit}s`:`${d.included_units.toLocaleString()} ${d.unit}${d.included_units===1?"":"s"}`,allowanceNote:po(d),computeLabel:d.route_allow===null?"any compute":d.route_allow.length===0?"no compute":null,compute:(d.route_allow??[]).map(k=>({costClass:k,label:co[k]??k,owned:lo.has(k),runtimes:Vn(k).map(x=>x.id)})),connect:mo(d,N,t.connected,()=>s.open("manual")),cta:{label:ho(d,N,o===d.id),disabled:N||o!==null,busy:o===d.id,take:()=>h(d)}}}),[n.plans,n.current,c,t.connected,s,o,h]);return{offers:f,current:f.find(d=>d.current)??null,loading:n.loading,error:n.error,failed:a}}function uo(e){return e.price===0?{amount:"Free",interval:null,free:!0}:{amount:`$${e.price.toLocaleString()}`,interval:e.interval,free:!1}}function po(e){let n=[];return e.included_units===null?n.push("No ceiling on this plan"):(n.push(`Included each ${e.interval}`),e.overage==="meter"&&e.overage_per_unit>0?n.push(`then $${e.overage_per_unit} a ${e.unit}`):e.included_units>0&&n.push(`then ${e.unit}s stop`)),e.trial_days>0&&n.push(`${e.trial_days}-day trial`),n.join(" \xB7 ")}function mo(e,n,t,s){let o=be({unit:e.unit,reward:e.connected_reward,includedUnits:e.connected_included_units,creditMicros:e.connected_credit*1e6}),i=ae(e.route_allow)&&!t;if(!o&&!i)return null;let a=ye(e.connected_reward);return{key:o?"Connect your own":"To use this",line:o??(n?"Nothing connected yet, so nothing can run.":"Runs only on compute you connect."),reward:o!==null,actionable:n&&(a||i)&&!t,open:s}}function ho(e,n,t){return n?"Your plan":t?e.selectable?"Switching\u2026":"Opening\u2026":e.selectable?"Choose":`Subscribe for $${e.price.toLocaleString()}/${e.interval}`}import{jsx as u,jsxs as P}from"react/jsx-runtime";function On(e){return e?`soba-connect sc-fill ${e}`:"soba-connect sc-fill"}function ft({onSelect:e,successUrl:n,cancelUrl:t,showCompute:s=!0,showConnect:o=!1,variant:i="cards",featured:a,className:m}){let{offers:c,loading:p,error:g,failed:b}=ht({...a?{featured:a}:{},...e?{onSelect:e}:{},...n?{successUrl:n}:{},...t?{cancelUrl:t}:{}}),{theme:h}=O();if(g)return u("div",{className:On(m),"data-theme":h,children:u("div",{className:"sc-card",children:u("p",{className:"sc-error",children:g.message})})});if(p)return u("div",{className:On(m),"data-theme":h,children:u("div",{className:"sc-card",children:u("p",{className:"sc-note",children:"Loading plans\u2026"})})});if(c.length===0)return u("div",{className:On(m),"data-theme":h,children:u("div",{className:"sc-card",children:u("p",{className:"sc-note",children:"This app has no plans yet."})})});let f={showCompute:s,showConnect:o};return P("div",{className:On(m),"data-theme":h,"data-variant":i,children:[i==="rows"?u(go,{offers:c,shelf:f}):i==="table"?u(bo,{offers:c,shelf:f}):u(fo,{offers:c,shelf:f}),b&&u("p",{className:"sc-error",children:b})]})}function fo({offers:e,shelf:n}){return u("div",{className:"sc-plans",children:e.map(t=>P("div",{className:Zt("sc-plan",t),children:[P("div",{className:"sc-row-between",children:[u("span",{className:"sc-title",children:t.plan.name}),u(gt,{offer:t})]}),u("p",{className:"sc-sub",children:t.plan.description}),u(bt,{price:t.price,free:"forever"}),u(vt,{offer:t,shelf:n}),u(Xt,{offer:t}),u("div",{className:"sc-plan-band",children:n.showCompute&&u(wt,{offer:t})}),u("div",{className:"sc-plan-band",children:u(yt,{offer:t})})]},t.plan.id))})}function go({offers:e,shelf:n}){return u("ul",{className:"sc-plan-rows",children:e.map(t=>P("li",{className:Zt("sc-plan-row",t),children:[P("div",{className:"sc-row-main",children:[P("span",{className:"sc-row-name",children:[u("span",{className:"sc-title",children:t.plan.name}),u(gt,{offer:t})]}),t.plan.description&&u("p",{className:"sc-sub",children:t.plan.description}),u(Xt,{offer:t}),n.showCompute&&u(wt,{offer:t,inline:!0}),u(yt,{offer:t,inline:!0})]}),P("div",{className:"sc-row-side",children:[u(bt,{price:t.price,free:"forever",small:!0}),u(vt,{offer:t,shelf:n})]})]},t.plan.id))})}function bo({offers:e,shelf:n}){let t=e.some(a=>a.plan.overage_per_unit>0),s=e.some(a=>a.plan.trial_days>0),o=e.some(a=>a.connect!==null),i=a=>[a.current?"sc-col-current":"",a.featured?"sc-col-featured":""].filter(Boolean).join(" ")||void 0;return u("div",{className:"sc-table-scroll",children:P("table",{className:"sc-plan-table",children:[u("thead",{children:P("tr",{children:[u("td",{}),e.map(a=>P("th",{scope:"col",className:i(a),children:[P("span",{className:"sc-row-name",children:[u("span",{className:"sc-title",children:a.plan.name}),u(gt,{offer:a})]}),u(bt,{price:a.price,small:!0})]},a.plan.id))]})}),P("tbody",{children:[P("tr",{children:[u("th",{scope:"row",children:"Included"}),e.map(a=>u("td",{className:i(a),children:a.allowance},a.plan.id))]}),t&&P("tr",{children:[u("th",{scope:"row",children:"Then"}),e.map(a=>u("td",{className:i(a),children:a.plan.overage_per_unit>0?`$${a.plan.overage_per_unit} / ${a.plan.unit}`:u("span",{className:"sc-muted-cell",children:"Stops"})},a.plan.id))]}),s&&P("tr",{children:[u("th",{scope:"row",children:"Trial"}),e.map(a=>u("td",{className:i(a),children:a.plan.trial_days>0?`${a.plan.trial_days} days`:u("span",{className:"sc-muted-cell",children:"None"})},a.plan.id))]}),n.showCompute&&P("tr",{children:[u("th",{scope:"row",children:"Runs on"}),e.map(a=>u("td",{className:i(a),children:u(wt,{offer:a,bare:!0})},a.plan.id))]}),o&&P("tr",{children:[u("th",{scope:"row",children:"Connect your own"}),e.map(a=>u("td",{className:i(a),children:u(yt,{offer:a,bare:!0})},a.plan.id))]}),P("tr",{className:"sc-table-buy",children:[u("td",{}),e.map(a=>u("td",{className:i(a),children:u(vt,{offer:a,shelf:n})},a.plan.id))]})]})]})})}function Zt(e,n){return[e,n.current?"sc-plan-current":"",n.featured?"sc-plan-featured":""].filter(Boolean).join(" ")}function gt({offer:e}){return e.current?u("span",{className:"sc-plan-badge",children:"Current"}):e.featured?u("span",{className:"sc-plan-badge-soft",children:"Recommended"}):null}function bt({price:e,small:n,free:t}){return P("p",{className:n?"sc-plan-price sc-plan-price-sm":"sc-plan-price",children:[u("span",{className:"sc-plan-amount",children:e.amount}),e.interval?P("span",{className:"sc-plan-interval",children:["/",e.interval]}):t&&u("span",{className:"sc-plan-interval sc-plan-after",children:t})]})}function Xt({offer:e}){return P("p",{className:"sc-plan-allowance",children:[u("span",{className:"sc-plan-figure",children:e.allowance}),u("span",{className:"sc-plan-qualifier",children:e.allowanceNote})]})}function yt({offer:e,inline:n,bare:t}){let s=e.connect;if(!s)return t?u("span",{className:"sc-muted-cell",children:"None"}):null;let o=s.reward?"sc-plan-reward-line":"sc-plan-reward-line sc-plan-reward-need",i=s.actionable?P("button",{type:"button",className:`${o} sc-plan-reward-act`,"aria-label":"Connect compute",onClick:s.open,children:[u("span",{className:"sc-reward-said",children:s.line}),P("span",{className:"sc-reward-do","aria-hidden":!0,children:[u(W,{className:"sc-reward-mark"}),"Connect compute"]})]}):u("p",{className:o,children:s.line});return t?i:u("div",{className:n?"sc-plan-reward sc-plan-reward-inline":"sc-plan-reward",children:i})}function wt({offer:e,inline:n,bare:t}){let s=e.computeLabel?u("ul",{className:n?"sc-compute sc-compute-inline":"sc-compute",children:u("li",{children:e.computeLabel})}):u("ul",{className:n?"sc-compute sc-compute-inline":"sc-compute",children:e.compute.map(o=>P("li",{className:o.owned?"sc-compute-own":void 0,children:[o.label,u(yo,{runtimes:o.runtimes})]},o.costClass))});return t?s:P("div",{className:n?"sc-plan-compute sc-plan-compute-inline":"sc-plan-compute",children:[u("span",{className:"sc-fact-key",children:"Runs on"}),s]})}function vt({offer:e,shelf:n}){let t=e.connect;return n.showConnect&&t?.actionable?P("button",{type:"button",className:"sc-btn sc-btn-primary sc-btn-icon",onClick:t.open,children:[u(W,{className:"sc-btn-mark"}),"Connect compute"]}):u("button",{type:"button",className:e.current?"sc-btn":"sc-btn sc-btn-primary",disabled:e.cta.disabled,onClick:()=>void e.cta.take().catch(()=>{}),children:e.cta.label})}function yo({runtimes:e}){return e.length===0?null:u("span",{className:"sc-compute-marks",children:e.map(n=>{let t=pe[n];return t?u(t,{className:"sc-rt-mark"},n):null})})}import{jsx as Ct,jsxs as Qt}from"react/jsx-runtime";function wo({heading:e,plansHeading:n,showUsage:t=!0,showName:s=!0,className:o,...i}){let{plan:a,loading:m}=gn(),{theme:c}=O(),p=n??(m?"Plans":a?"Change plan":"Choose a plan");return Qt("div",{className:o?`soba-connect sc-fill sc-billing ${o}`:"soba-connect sc-fill sc-billing","data-theme":c,children:[Ct(mt,{...e===void 0?{}:{heading:e},showUsage:t,showName:s}),Qt("section",{className:"sc-billing-plans",children:[p&&Ct("h2",{className:"sc-section-title",children:p}),Ct(ft,{...i})]})]})}import{useState as es}from"react";import{jsx as ns,jsxs as Co}from"react/jsx-runtime";function vo({plan:e,successUrl:n,cancelUrl:t,label:s,className:o}){let{plan:i}=I(),{theme:a}=O(),[m,c]=es(!1),[p,g]=es(null);async function b(){c(!0),g(null);try{let h=await i.checkout(e.id,{...n?{successUrl:n}:{},...t?{cancelUrl:t}:{}});window.location.assign(h)}catch(h){g(h.message),c(!1)}}return Co("div",{className:o?`soba-connect ${o}`:"soba-connect","data-theme":a,children:[ns("button",{type:"button",className:"sc-btn sc-btn-primary",disabled:m,onClick:()=>void b(),children:m?"Opening\u2026":s??`Subscribe for $${e.price.toLocaleString()}/${e.interval}`}),p&&ns("p",{className:"sc-error",children:p})]})}import{useCallback as ve,useEffect as De,useMemo as bn,useRef as ko,useState as Y}from"react";var Tn=class{#n;#s=null;#t=null;#e;#o=new Set;constructor(n){this.#e=n,this.#n=n.token??null}get token(){return this.#n}get expiresAt(){return this.#s}get canRefresh(){return!!this.#e.endpoint}get refreshAt(){return!this.canRefresh||this.#s===null?null:Math.max(Date.now()+1e4,this.#s-6e4)}subscribe(n){return this.#o.add(n),()=>this.#o.delete(n)}async ensure(){return this.#n?this.#n:this.refresh()}async refresh(){if(this.#t)return this.#t;let n=this.#e.endpoint;if(!n)throw new Error("This Soba session cannot be refreshed. Pass `sessionEndpoint` so the provider can mint a new one.");let t=this.#e.fetchImpl??fetch.bind(globalThis);this.#t=(async()=>{let s=await t(n,{method:"POST",headers:{"content-type":"application/json"},credentials:"same-origin",body:JSON.stringify(this.#e.user?{user:this.#e.user}:{})});if(!s.ok)throw new Error(`Could not start a Soba session (${s.status} from ${n}).`);let o=await s.json(),i=o.session??o.token;if(!i)throw new Error(`${n} answered without a \`session\`. See @soba-so/react's README.`);let a=o.expires_in??o.expiresIn;this.#n=i,this.#s=typeof a=="number"?Date.now()+a*1e3:null;for(let m of this.#o)m();return i})();try{return await this.#t}finally{this.#t=null}}};function ts(e,n=fetch.bind(globalThis)){return async(t,s)=>{let o=await n(t,s);if(o.status!==401||!e.canRefresh)return o;let i;try{i=await e.refresh()}catch{return o}return n(t,No(s,i))}}function No(e,n){let t=new Headers(e?.headers);return t.set("authorization",`Bearer ${n}`),{...e,headers:t}}var ss="data-soba-react",os=!1;function Nt(){if(os||typeof document>"u"||(os=!0,document.querySelector(`style[${ss}]`)))return;let e=document.createElement("style");e.setAttribute(ss,""),e.textContent=`.soba-connect {
6
6
  --sc-ground: #ffffff;
7
7
  --sc-sheet: #ffffff;
8
8
  --sc-raised: #f6f6f7;
@@ -15,16 +15,50 @@ var be=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
15
15
  --sc-accent-fg: #ffffff;
16
16
  --sc-ok: #22a06b;
17
17
  --sc-warn: #b06f14;
18
+
19
+ --sc-font-size: 15px;
20
+ --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
21
+
22
+ --sc-fs-small: max(12px, calc(var(--sc-font-size) * 0.87));
23
+ --sc-fs-body: var(--sc-font-size);
24
+ --sc-fs-title: calc(var(--sc-font-size) * 1.13);
25
+ --sc-fs-display: calc(var(--sc-font-size) * 2.45);
26
+
27
+
28
+ --sc-r-sm: 6px;
18
29
  --sc-r: 10px;
30
+ --sc-r-lg: 14px;
31
+ --sc-r-pill: 999px;
32
+
33
+
34
+ --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 5%);
35
+ --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px -12px rgb(0 0 0 / 18%);
36
+
37
+
38
+ --sc-tile: 32px;
19
39
 
20
40
  --sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
41
+
42
+ --sc-font:
43
+ ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
21
44
 
22
45
  box-sizing: border-box;
46
+
47
+ width: 100%;
23
48
  max-width: 560px;
24
49
  margin: 0 auto;
25
50
  color: var(--sc-text, #1a1a1c);
26
- font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
27
- font-size: 15px;
51
+ font-family: var(
52
+ --sc-font,
53
+ ui-sans-serif,
54
+ system-ui,
55
+ -apple-system,
56
+ "Segoe UI",
57
+ "Helvetica Neue",
58
+ Arial,
59
+ sans-serif
60
+ );
61
+ font-size: var(--sc-font-size, 15px);
28
62
  line-height: 1.5;
29
63
  letter-spacing: -0.005em;
30
64
  }
@@ -37,18 +71,19 @@ var be=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
37
71
  .sc-card {
38
72
  background: var(--sc-sheet, #ffffff);
39
73
  border: 1px solid var(--sc-line, #e9e9eb);
40
- border-radius: var(--sc-r, 10px);
41
- padding: 20px;
74
+
75
+ border-radius: var(--sc-r-lg, 14px);
76
+ padding: 18px;
42
77
  }
43
78
  .sc-card + .sc-card {
44
79
  margin-top: 12px;
45
80
  }
46
81
 
47
82
  .sc-title {
48
- font-size: 20px;
83
+ font-size: var(--sc-fs-title, 17px);
49
84
  font-weight: 650;
50
85
  letter-spacing: -0.02em;
51
- margin: 0 0 4px;
86
+ margin: 0;
52
87
  }
53
88
  .sc-sub {
54
89
  color: var(--sc-muted, #6b6b73);
@@ -61,42 +96,11 @@ var be=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
61
96
  letter-spacing: -0.005em;
62
97
  }
63
98
 
64
- .sc-choices {
65
- display: grid;
66
- gap: 8px;
67
- }
68
- .sc-choice {
69
- display: block;
70
- width: 100%;
71
- text-align: left;
72
- background: var(--sc-sheet, #ffffff);
73
- border: 1px solid var(--sc-line-2, #dcdce0);
74
- border-radius: var(--sc-r, 10px);
75
- padding: 12px 14px;
76
- cursor: pointer;
77
- font: inherit;
78
- color: inherit;
79
- }
80
- .sc-choice:hover {
81
- background: var(--sc-raised, #f6f6f7);
82
- }
83
- .sc-choice[aria-pressed="true"] {
84
- border-color: var(--sc-accent, #18181b);
85
- box-shadow: inset 0 0 0 1px var(--sc-accent, #18181b);
86
- }
87
- .sc-choice-title {
88
- font-weight: 550;
89
- }
90
- .sc-choice-meta {
91
- color: var(--sc-muted, #6b6b73);
92
- font-size: 13px;
93
- }
94
-
95
99
  .sc-code {
96
100
  display: block;
97
101
  background: var(--sc-raised, #f6f6f7);
98
102
  border: 1px solid var(--sc-line, #e9e9eb);
99
- border-radius: 8px;
103
+ border-radius: var(--sc-r-sm, 6px);
100
104
  padding: 12px 14px;
101
105
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
102
106
  font-size: 13px;
@@ -122,8 +126,8 @@ var be=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
122
126
 
123
127
  .sc-btn {
124
128
  font: inherit;
125
- font-weight: 550;
126
- border-radius: 8px;
129
+ font-weight: 500;
130
+ border-radius: var(--sc-r-sm, 6px);
127
131
  padding: 9px 14px;
128
132
  border: 1px solid var(--sc-line-2, #dcdce0);
129
133
  background: var(--sc-sheet, #ffffff);
@@ -155,12 +159,12 @@ a.sc-btn {
155
159
 
156
160
  .sc-input {
157
161
  font: inherit;
158
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
162
+ font-family: var(--sc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
159
163
  letter-spacing: 0.08em;
160
164
  text-transform: uppercase;
161
165
  padding: 10px 12px;
162
166
  border: 1px solid var(--sc-line-2, #dcdce0);
163
- border-radius: 8px;
167
+ border-radius: var(--sc-r-sm, 6px);
164
168
  background: var(--sc-sheet, #ffffff);
165
169
  color: inherit;
166
170
  width: 100%;
@@ -195,11 +199,31 @@ a.sc-btn {
195
199
 
196
200
  .sc-error {
197
201
  color: var(--sc-warn, #b06f14);
198
- font-size: 14px;
202
+ font-size: var(--sc-fs-body);
203
+ }
204
+
205
+ .sc-note-strong {
206
+ font-weight: 600;
207
+ color: var(--sc-text, #1a1a1c);
208
+ }
209
+ .sc-note-act {
210
+ appearance: none;
211
+ border: 0;
212
+ background: none;
213
+ padding: 0;
214
+ font: inherit;
215
+ color: var(--sc-text-2, #3f3f46);
216
+ text-decoration: underline;
217
+ text-underline-offset: 2px;
218
+ cursor: pointer;
219
+ }
220
+ .sc-note-act:disabled {
221
+ opacity: 0.5;
222
+ cursor: default;
199
223
  }
200
224
  .sc-note {
201
225
  color: var(--sc-muted, #6b6b73);
202
- font-size: 13px;
226
+ font-size: var(--sc-fs-small);
203
227
  }
204
228
 
205
229
  .sc-facts {
@@ -229,22 +253,141 @@ a.sc-btn {
229
253
  padding-top: 0;
230
254
  margin-top: 0;
231
255
  }
256
+
257
+ .sc-machine-meta {
258
+ display: flex;
259
+ flex-wrap: wrap;
260
+ align-items: center;
261
+ gap: 3px 10px;
262
+
263
+ margin-top: 1px;
264
+ font-size: var(--sc-fs-small);
265
+ line-height: 1.35;
266
+ color: var(--sc-muted, #6b6b73);
267
+ }
268
+
269
+ .sc-machine-tag {
270
+ font-size: var(--sc-fs-label);
271
+ font-weight: 600;
272
+ padding: 1px 6px;
273
+ border-radius: var(--sc-r-sm, 6px);
274
+ background: var(--sc-raised, #f6f6f7);
275
+ }
276
+
277
+ .sc-machine-state {
278
+ display: inline-flex;
279
+ align-items: center;
280
+ gap: 6px;
281
+ font-size: var(--sc-fs-small);
282
+ color: var(--sc-muted, #6b6b73);
283
+ white-space: nowrap;
284
+ }
285
+
232
286
  .sc-runtimes {
233
287
  display: grid;
234
- gap: 4px;
235
- margin: 8px 0 0;
236
- padding: 0;
288
+ gap: 2px;
289
+ margin: 12px 0 0;
290
+
291
+ --sc-branch: calc(var(--sc-tile, 32px) + 11px);
292
+ padding: 0 0 0 var(--sc-branch);
237
293
  list-style: none;
238
- font-size: 14px;
294
+ font-size: var(--sc-fs-small);
295
+ }
296
+
297
+ .sc-compute-act {
298
+ margin-top: 16px;
299
+ }
300
+
301
+ .sc-compute-act:first-child {
302
+ margin-top: 0;
303
+ }
304
+
305
+ .sc-note + .sc-compute-act,
306
+ .sc-error + .sc-compute-act {
307
+ margin-top: 9px;
308
+ }
309
+
310
+ .sc-runtime {
311
+ position: relative;
312
+ display: grid;
313
+ grid-template-columns: auto 1fr auto;
314
+ align-items: center;
315
+ gap: 9px;
316
+ min-height: 26px;
317
+ }
318
+
319
+ .sc-runtime::before {
320
+ content: "";
321
+ position: absolute;
322
+ left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
323
+ top: -2px;
324
+ bottom: -2px;
325
+ width: 1px;
326
+ background: var(--sc-line-2, #dcdce0);
327
+ }
328
+
329
+ .sc-runtime:first-child::before {
330
+ top: -13px;
331
+ }
332
+
333
+ .sc-runtime:last-child::before {
334
+ bottom: auto;
335
+ height: calc(50% + 2px);
336
+ }
337
+
338
+ .sc-runtime:first-child:last-child::before {
339
+ height: calc(50% + 13px);
340
+ }
341
+
342
+ .sc-runtime::after {
343
+ content: "";
344
+ position: absolute;
345
+ left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
346
+ top: 50%;
347
+ width: 22px;
348
+ height: 1px;
349
+ background: var(--sc-line-2, #dcdce0);
350
+ }
351
+
352
+ .sc-runtime-tile {
353
+ width: 22px;
354
+ height: 22px;
355
+ flex: none;
356
+ display: grid;
357
+ place-items: center;
358
+ border-radius: var(--sc-r-sm, 6px);
359
+ border: 1px solid var(--sc-line, #e9e9eb);
360
+ background: var(--sc-raised, #f6f6f7);
361
+ }
362
+
363
+ .sc-runtime-mark {
364
+ width: 13px;
365
+ height: 13px;
366
+ color: var(--sc-text-2, #3f3f46);
367
+ }
368
+
369
+ .sc-runtime-verdict {
370
+ font-size: var(--sc-fs-label);
371
+ white-space: nowrap;
372
+ }
373
+
374
+ .sc-runtime-name {
375
+ min-width: 0;
376
+ overflow: hidden;
377
+ text-overflow: ellipsis;
378
+ white-space: nowrap;
239
379
  }
240
380
 
241
381
  .soba-connect[data-theme="dark"],
242
- .soba-connect[data-theme="system"] {
382
+ .soba-connect[data-theme="system"],
383
+ .sc-btn[data-theme="dark"],
384
+ .sc-btn[data-theme="system"] {
243
385
  color-scheme: dark;
244
386
  }
245
387
 
246
388
  @media (prefers-color-scheme: dark) {
247
- .soba-connect[data-theme="system"] {
389
+ .soba-connect[data-theme="system"],
390
+ .sc-btn[data-theme="system"] {
248
391
  --sc-ground: #0f0f11;
249
392
  --sc-sheet: #161618;
250
393
  --sc-raised: #1d1d20;
@@ -255,10 +398,17 @@ a.sc-btn {
255
398
  --sc-muted: #8d8d95;
256
399
  --sc-accent: #f2f2f3;
257
400
  --sc-accent-fg: #131316;
401
+
402
+ --sc-ok: #4cb782;
403
+ --sc-warn: #f2994a;
404
+
405
+ --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
406
+ --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
258
407
  }
259
408
  }
260
409
 
261
- .soba-connect[data-theme="dark"] {
410
+ .soba-connect[data-theme="dark"],
411
+ .sc-btn[data-theme="dark"] {
262
412
  --sc-ground: #0f0f11;
263
413
  --sc-sheet: #161618;
264
414
  --sc-raised: #1d1d20;
@@ -269,6 +419,18 @@ a.sc-btn {
269
419
  --sc-muted: #8d8d95;
270
420
  --sc-accent: #f2f2f3;
271
421
  --sc-accent-fg: #131316;
422
+
423
+ --sc-ok: #4cb782;
424
+ --sc-warn: #f2994a;
425
+
426
+ --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
427
+ --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
428
+ }
429
+
430
+ .soba-connect.sc-fill {
431
+ max-width: none;
432
+
433
+ margin-inline: 0;
272
434
  }
273
435
 
274
436
  .sc-plans {
@@ -282,23 +444,93 @@ a.sc-btn {
282
444
  .sc-plan {
283
445
  display: flex;
284
446
  flex-direction: column;
285
- gap: 10px;
286
- padding: 16px;
447
+ gap: 0;
448
+ padding: 18px;
287
449
  border: 1px solid var(--sc-line, #e5e5e7);
288
- border-radius: var(--sc-r, 10px);
450
+ border-radius: var(--sc-r-lg, 14px);
289
451
  background: var(--sc-sheet, #fff);
290
452
  }
291
453
 
454
+ @supports (grid-template-rows: subgrid) {
455
+ .sc-plan {
456
+ display: grid;
457
+ grid-row: span 7;
458
+ grid-template-rows: subgrid;
459
+
460
+ row-gap: 0;
461
+ }
462
+
463
+
464
+ .sc-plan > .sc-btn {
465
+ align-self: stretch;
466
+ }
467
+ }
468
+
469
+ .sc-plan > * + * {
470
+ margin-top: 7px;
471
+ }
472
+
473
+ .sc-plan > .sc-plan-price {
474
+ margin-top: 12px;
475
+ }
476
+
477
+ .sc-plan > .sc-btn {
478
+ margin-top: 12px;
479
+ }
480
+
481
+ .sc-plan > .sc-btn + .sc-plan-allowance {
482
+ margin-top: 15px;
483
+ }
484
+
485
+ .sc-plan > .sc-plan-band:empty {
486
+ margin-top: 0;
487
+ }
488
+
489
+ .sc-plan-band {
490
+ display: flex;
491
+ flex-direction: column;
492
+ align-items: stretch;
493
+ }
494
+ .sc-plan-band:empty {
495
+ min-height: 0;
496
+ }
497
+
498
+ .sc-plan > .sc-sub {
499
+ margin: 0;
500
+ }
501
+
292
502
  .sc-plan-current {
293
- border-color: var(--sc-text, #18181b);
503
+ background: var(--sc-raised, #f6f6f7);
504
+ border-color: var(--sc-line, #e9e9eb);
505
+ }
506
+
507
+ .sc-plan-allowance {
508
+ margin: 0;
509
+ display: flex;
510
+ flex-direction: column;
511
+ gap: 2px;
512
+ }
513
+ .sc-plan-figure {
514
+ font-size: var(--sc-fs-body, 15px);
515
+ font-weight: 600;
516
+ letter-spacing: -0.01em;
517
+ font-variant-numeric: tabular-nums;
518
+ }
519
+ .sc-plan-qualifier {
520
+ font-size: var(--sc-fs-label, 11.5px);
521
+ line-height: 1.45;
522
+ color: var(--sc-muted, #6b6b73);
294
523
  }
295
524
 
296
525
  .sc-plan-badge {
297
- font-size: 11px;
526
+ font-size: var(--sc-fs-label, 11px);
298
527
  padding: 2px 6px;
299
- border-radius: 999px;
528
+ border-radius: var(--sc-r-pill, 999px);
300
529
  background: var(--sc-text, #18181b);
301
530
  color: var(--sc-sheet, #fff);
531
+
532
+ border: 1px solid transparent;
533
+ white-space: nowrap;
302
534
  }
303
535
 
304
536
  .sc-plan-price {
@@ -309,7 +541,7 @@ a.sc-btn {
309
541
  }
310
542
 
311
543
  .sc-plan-amount {
312
- font-size: 28px;
544
+ font-size: var(--sc-fs-display, 24px);
313
545
  font-weight: 600;
314
546
  letter-spacing: -0.02em;
315
547
 
@@ -317,13 +549,16 @@ a.sc-btn {
317
549
  }
318
550
 
319
551
  .sc-plan-interval {
320
- font-size: 13px;
552
+ font-size: var(--sc-fs-small, 13px);
321
553
  color: var(--sc-muted, #6b6b73);
322
554
  }
323
555
 
324
- .sc-plan .sc-btn {
325
- margin-top: auto;
556
+ .sc-plan > .sc-btn {
326
557
  width: 100%;
558
+ justify-content: center;
559
+ border-radius: var(--sc-r-pill, 999px);
560
+ padding-block: 0.72em;
561
+ font-weight: 550;
327
562
  }
328
563
 
329
564
  .sc-plan .sc-facts {
@@ -348,8 +583,14 @@ a.sc-btn {
348
583
 
349
584
  .sc-plan-compute {
350
585
  display: grid;
351
- gap: 4px;
352
- font-size: 14px;
586
+
587
+ align-content: start;
588
+ gap: 3px;
589
+ font-size: 13.5px;
590
+ }
591
+
592
+ .sc-plan-compute > .sc-fact-key {
593
+ font-size: var(--sc-fs-label, 11.5px);
353
594
  }
354
595
 
355
596
  .sc-compute {
@@ -357,7 +598,8 @@ a.sc-btn {
357
598
  margin: 0;
358
599
  padding: 0;
359
600
  display: grid;
360
- gap: 3px;
601
+
602
+ gap: 6px;
361
603
  }
362
604
 
363
605
  .sc-compute li {
@@ -377,6 +619,14 @@ a.sc-btn {
377
619
  color: var(--sc-text-2, #3f3f46);
378
620
  }
379
621
 
622
+ .sc-compute-marks {
623
+ display: inline-flex;
624
+ align-items: center;
625
+ gap: 5px;
626
+ margin-left: 7px;
627
+ vertical-align: -2px;
628
+ }
629
+
380
630
  .sc-compute li.sc-compute-own::before {
381
631
  content: "\u2713";
382
632
  color: var(--sc-ok, #22a06b);
@@ -384,8 +634,13 @@ a.sc-btn {
384
634
  top: 1px;
385
635
  }
386
636
 
637
+ @supports not (grid-template-rows: subgrid) {
638
+ .sc-plan .sc-sub {
639
+ min-height: 2.8em;
640
+ }
641
+ }
642
+
387
643
  .sc-plan .sc-sub {
388
- min-height: 2.8em;
389
644
  margin: 0;
390
645
  }
391
646
 
@@ -418,22 +673,64 @@ a.sc-btn {
418
673
  }
419
674
 
420
675
  .sc-modal::backdrop {
421
- background: rgb(15 15 17 / 55%);
676
+ background: rgb(15 15 17 / 42%);
677
+ backdrop-filter: blur(4px);
422
678
  }
423
679
 
424
680
  .sc-modal-sheet {
425
681
  position: relative;
426
682
  width: 100%;
427
683
 
428
- max-width: 420px;
429
- background: var(--sc-sheet, #ffffff);
430
- border: 1.5px solid var(--sc-line, #e9e9eb);
431
- border-radius: 14px;
432
- box-shadow: 0 24px 60px -12px rgb(15 15 17 / 22%);
684
+ max-width: 380px;
685
+
686
+ background: var(--sc-shell, var(--sc-sheet, #ffffff));
687
+ border: 1px solid var(--sc-line, #e9e9eb);
688
+ border-radius: var(--sc-r-lg, 14px);
689
+
690
+ box-shadow:
691
+ 0 1px 2px rgb(15 15 17 / 6%),
692
+ 0 12px 28px -8px rgb(15 15 17 / 16%),
693
+ 0 36px 64px -28px rgb(15 15 17 / 24%);
433
694
 
434
695
  outline: none;
435
696
  }
436
697
 
698
+ @keyframes sc-sheet-in {
699
+ from {
700
+ opacity: 0;
701
+ transform: translateY(8px) scale(0.985);
702
+ }
703
+ }
704
+
705
+ @keyframes sc-scrim-in {
706
+ from {
707
+ opacity: 0;
708
+ }
709
+ }
710
+
711
+ .sc-modal[open] .sc-modal-sheet {
712
+ animation: sc-sheet-in 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
713
+ }
714
+
715
+ .sc-modal[open]::backdrop {
716
+ animation: sc-scrim-in 190ms ease;
717
+ }
718
+
719
+ @media (prefers-reduced-motion: reduce) {
720
+ .sc-modal[open] .sc-modal-sheet,
721
+ .sc-modal[open]::backdrop {
722
+ animation: none;
723
+ }
724
+ .sc-opt,
725
+ .sc-opt-tile,
726
+ .sc-alt-link {
727
+ transition: none;
728
+ }
729
+ .sc-opt:active {
730
+ transform: none;
731
+ }
732
+ }
733
+
437
734
  .sc-modal-close {
438
735
  position: absolute;
439
736
  top: 10px;
@@ -446,7 +743,7 @@ a.sc-btn {
446
743
  font-size: 20px;
447
744
  line-height: 1;
448
745
  padding: 4px 8px;
449
- border-radius: 6px;
746
+ border-radius: var(--sc-r-sm, 6px);
450
747
  cursor: pointer;
451
748
  }
452
749
 
@@ -456,168 +753,1648 @@ a.sc-btn {
456
753
  }
457
754
 
458
755
  .sc-modal-sheet .sc-card {
459
- padding: 26px 24px 22px;
756
+ padding: 24px 22px 18px;
460
757
  border: 0;
461
758
  border-radius: 0;
462
759
  background: transparent;
463
760
  box-shadow: none;
464
761
  }
465
762
 
763
+ .sc-modal-sheet .sc-machine {
764
+ border: 1px solid var(--sc-line, #e9e9eb);
765
+ border-radius: var(--sc-r, 10px);
766
+ padding: 11px 12px;
767
+ margin-top: 14px;
768
+ }
769
+
770
+ .sc-conns {
771
+ display: grid;
772
+ gap: 14px;
773
+ }
774
+
775
+ .sc-modal-sheet .sc-machine:first-child {
776
+ margin-top: 0;
777
+ }
778
+
779
+ .sc-modal-sheet .sc-title {
780
+ font-size: 17px;
781
+ font-weight: 600;
782
+ margin-bottom: 5px;
783
+ }
784
+
785
+ .sc-modal-sheet .sc-sub {
786
+ font-size: 13.5px;
787
+ line-height: 1.45;
788
+ margin-bottom: 15px;
789
+ }
790
+
466
791
  .sc-modal-foot {
792
+ display: flex;
793
+ align-items: center;
794
+ justify-content: center;
795
+ gap: 6px;
467
796
  padding: 11px 14px;
468
- border-top: 1.5px solid var(--sc-line, #e9e9eb);
797
+ border-top: 1px solid var(--sc-line, #e9e9eb);
469
798
  text-align: center;
470
799
  font-size: 12.5px;
471
800
  color: var(--sc-muted, #6b6b73);
472
801
  }
473
802
 
474
- .sc-mark {
475
- width: 44px;
476
- height: 44px;
477
- margin: 0 auto 14px;
478
- border-radius: 11px;
479
-
480
- background: var(--sc-accent, #18181b);
481
- display: grid;
482
- place-items: center;
803
+ .sc-foot-mark {
804
+ width: 13px;
805
+ height: 13px;
806
+ flex: none;
807
+ opacity: 0.75;
483
808
  }
484
809
 
485
- .sc-mark svg {
486
- width: 24px;
487
- height: 24px;
488
- color: var(--sc-accent-fg, #ffffff);
810
+ .sc-app-mark {
811
+ display: block;
812
+ width: 38px;
813
+ height: 38px;
814
+ margin: 0 auto 12px;
815
+ border-radius: var(--sc-r, 10px);
816
+ object-fit: contain;
489
817
  }
490
818
 
491
819
  .sc-h {
492
- font-size: 19px;
493
- font-weight: 700;
820
+ font-size: 17px;
821
+ font-weight: 600;
494
822
  letter-spacing: -0.02em;
495
823
  margin: 0;
496
824
  text-align: center;
497
825
  }
498
826
 
499
827
  .sc-p {
500
- font-size: 14px;
828
+ font-size: 13.5px;
829
+ line-height: 1.45;
501
830
  color: var(--sc-muted, #6b6b73);
502
- margin: 7px auto 0;
503
- max-width: 40ch;
831
+ margin: 5px auto 0;
832
+
833
+ max-width: 34ch;
504
834
  text-align: center;
505
835
  }
506
836
 
507
837
  .sc-opts {
508
838
  display: grid;
509
- gap: 10px;
510
- margin-top: 20px;
839
+ gap: 8px;
840
+ margin-top: 16px;
511
841
  text-align: left;
512
842
  }
513
843
 
514
844
  .sc-opt {
515
- display: flex;
516
- align-items: center;
517
-
518
- justify-content: center;
519
- gap: 10px;
845
+ display: grid;
520
846
 
521
- position: relative;
847
+ grid-template-columns: auto 1fr auto;
848
+ align-items: center;
849
+ gap: 11px;
522
850
  width: 100%;
523
- padding: 12px 14px;
524
- border: 1.5px solid var(--sc-line-2, #dcdce0);
525
- border-radius: 9px;
526
- background: var(--sc-sheet, #ffffff);
851
+ padding: 9px 11px;
852
+ border: 1px solid var(--sc-line-2, #dcdce0);
853
+ border-radius: var(--sc-r, 10px);
854
+ background: var(--sc-sheet, #ffffff);
527
855
  color: var(--sc-text, #1a1a1c);
528
856
  font: inherit;
529
- font-size: 14.5px;
530
- font-weight: 600;
531
857
  text-align: left;
532
858
  cursor: pointer;
859
+
860
+ transition:
861
+ background-color 120ms ease,
862
+ border-color 120ms ease;
533
863
  }
534
864
 
535
865
  .sc-opt:hover {
536
866
  background: var(--sc-raised, #f6f6f7);
867
+ border-color: var(--sc-muted, #6b6b73);
537
868
  }
538
869
 
539
- .sc-opt[aria-pressed="true"] {
540
- border-color: var(--sc-accent, #18181b);
870
+ .sc-opt:hover .sc-opt-tile {
871
+ background: var(--sc-sheet, #ffffff);
872
+ }
873
+
874
+ .sc-opt:active {
875
+ transform: translateY(0.5px);
876
+ }
877
+
878
+ .sc-opt:disabled {
879
+ opacity: 0.55;
880
+ cursor: default;
881
+ }
882
+
883
+ .sc-opt:disabled:hover {
884
+ background: var(--sc-sheet, #ffffff);
885
+ border-color: var(--sc-line-2, #dcdce0);
886
+ }
887
+
888
+ .sc-opt-tile {
889
+ position: relative;
890
+ width: 32px;
891
+ height: 32px;
892
+ flex: none;
893
+ display: grid;
894
+ place-items: center;
895
+ border-radius: var(--sc-r, 10px);
896
+ border: 1px solid var(--sc-line, #e9e9eb);
897
+ background: var(--sc-raised, #f6f6f7);
898
+ transition: background-color 120ms ease;
541
899
  }
542
900
 
543
901
  .sc-opt-mark {
544
- width: 17px;
545
- height: 17px;
902
+ width: 18px;
903
+ height: 18px;
546
904
  flex: none;
547
-
548
905
  color: currentColor;
549
906
  }
550
907
 
551
- .sc-opt-label {
908
+ .sc-opt-text {
552
909
  min-width: 0;
553
910
  }
554
911
 
555
- .sc-opt-primary {
912
+ .sc-opt-label {
913
+ display: block;
914
+ font-size: var(--sc-fs-body);
556
915
 
557
- background: var(--sc-accent, #18181b);
558
- color: var(--sc-accent-fg, #ffffff);
559
- border-color: var(--sc-accent, #18181b);
916
+ font-weight: 500;
917
+ letter-spacing: -0.01em;
560
918
  }
561
919
 
562
- .sc-opt-primary:hover {
563
- opacity: 0.9;
564
- background: var(--sc-accent, #18181b);
920
+ .sc-opt-sub {
921
+ display: block;
922
+ margin-top: 1px;
923
+ font-size: 12.5px;
924
+ line-height: 1.35;
925
+ color: var(--sc-muted, #6b6b73);
565
926
  }
566
927
 
567
- .sc-details {
568
- text-align: left;
569
- font-size: 13px;
928
+ .sc-opt-last {
929
+ flex: none;
930
+ font-size: 11px;
931
+ font-weight: 600;
932
+ color: var(--sc-muted, #6b6b73);
933
+ background: var(--sc-raised, #f6f6f7);
934
+ border-radius: var(--sc-r-sm, 6px);
935
+ padding: 3px 7px;
936
+ white-space: nowrap;
937
+ }
938
+
939
+ .sc-opt-group {
940
+ margin: 16px 0 7px;
941
+ font-size: 12.5px;
942
+ font-weight: 600;
943
+ color: var(--sc-text-2, #3f3f46);
944
+ }
945
+
946
+ .sc-opt-note {
947
+ margin: 8px 0 0;
948
+ font-size: 12.5px;
949
+ line-height: 1.45;
950
+ color: var(--sc-muted, #6b6b73);
951
+ }
952
+
953
+ .sc-or {
954
+ display: flex;
955
+ align-items: center;
956
+ gap: 12px;
957
+ margin: 16px 0;
958
+ color: var(--sc-muted, #6b6b73);
959
+ font-size: 12.5px;
570
960
  }
571
961
 
572
- .sc-details > summary {
962
+ .sc-or::before,
963
+ .sc-or::after {
964
+ content: "";
965
+ flex: 1;
966
+ height: 1px;
967
+ background: var(--sc-line, #e9e9eb);
968
+ }
969
+
970
+ .sc-opt-runtimes {
971
+ display: flex;
972
+ flex-wrap: wrap;
973
+ gap: 3px 11px;
974
+ margin-top: 7px;
975
+ }
976
+
977
+ .sc-rt {
978
+ display: inline-flex;
979
+ align-items: center;
980
+ gap: 5px;
981
+ font-size: 11.5px;
982
+ line-height: 1.3;
983
+ color: var(--sc-muted, #6b6b73);
984
+ white-space: nowrap;
985
+ }
986
+
987
+ .sc-rt-mark {
988
+ width: 12px;
989
+ height: 12px;
990
+ flex: none;
991
+ opacity: 0.85;
992
+ }
993
+
994
+ .sc-opt-alt {
995
+ margin-top: 12px;
996
+ padding-top: 11px;
997
+ border-top: 1px solid var(--sc-line, #e9e9eb);
998
+ text-align: center;
999
+ }
1000
+
1001
+ .sc-alt-link {
1002
+ font: inherit;
1003
+ font-size: 13px;
1004
+ font-weight: 500;
1005
+ padding: 5px 8px;
1006
+ border: 0;
1007
+ border-radius: var(--sc-r-sm, 6px);
1008
+ background: transparent;
1009
+ color: var(--sc-muted, #6b6b73);
573
1010
  cursor: pointer;
1011
+ transition: color 120ms ease;
1012
+ }
1013
+
1014
+ .sc-alt-link:hover {
1015
+ color: var(--sc-text, #1a1a1c);
1016
+ }
1017
+
1018
+ .sc-conn,
1019
+ .sc-idrow {
1020
+ display: grid;
1021
+ grid-template-columns: auto 1fr auto;
1022
+ align-items: center;
1023
+ gap: 12px;
1024
+ }
1025
+
1026
+ .sc-conn {
1027
+ padding: 10px 12px;
1028
+ border: 1px solid var(--sc-line, #e9e9eb);
1029
+ border-radius: var(--sc-r, 10px);
1030
+ background: var(--sc-sheet, #ffffff);
1031
+ }
1032
+
1033
+ .sc-conn-note {
1034
+ grid-column: 1 / -1;
1035
+ margin: 2px 0 0;
1036
+ font-size: 12px;
1037
+ line-height: 1.4;
574
1038
  color: var(--sc-muted, #6b6b73);
575
- padding: 6px 0;
576
1039
  }
577
1040
 
578
- .sc-details > summary:hover {
1041
+ .sc-conn-action {
1042
+ font: inherit;
1043
+ font-size: var(--sc-fs-small);
1044
+ font-weight: 500;
1045
+ padding: 5px 9px;
1046
+ border: 1px solid transparent;
1047
+ border-radius: var(--sc-r-sm, 6px);
1048
+ background: transparent;
1049
+ color: var(--sc-muted, #6b6b73);
1050
+ cursor: pointer;
1051
+ }
1052
+
1053
+ .sc-conn-action:hover:not(:disabled) {
1054
+ border-color: var(--sc-line-2, #dcdce0);
579
1055
  color: var(--sc-text, #1a1a1c);
580
1056
  }
581
1057
 
582
- .sc-opt:has(.sc-opt-last) {
583
- padding-right: 76px;
584
- padding-left: 76px;
1058
+ .sc-conn-action:disabled {
1059
+ opacity: 0.5;
1060
+ cursor: default;
1061
+ }
1062
+
1063
+ .sc-btn-wide {
1064
+ width: 100%;
585
1065
  }
586
1066
 
587
- .sc-opt-last {
588
- position: absolute;
589
- right: 10px;
590
- top: 50%;
591
- transform: translateY(-50%);
592
- flex: none;
593
- font-size: 11px;
1067
+ .sc-head {
1068
+ display: grid;
1069
+ grid-template-columns: 30px 1fr 30px;
1070
+ align-items: center;
1071
+
1072
+ margin: -8px 0 14px;
1073
+ }
1074
+
1075
+ .sc-head-title {
1076
+ margin: 0;
1077
+ text-align: center;
1078
+ font-size: 14px;
594
1079
  font-weight: 600;
595
- color: var(--sc-muted, #6b6b73);
596
- background: var(--sc-raised, #f6f6f7);
597
- border-radius: 5px;
598
- padding: 3px 7px;
1080
+ letter-spacing: -0.01em;
599
1081
  }
600
1082
 
601
- .sc-btn-quiet {
602
- border-color: transparent;
1083
+ .sc-head-back {
1084
+ display: grid;
1085
+ place-items: center;
1086
+ width: 30px;
1087
+ height: 30px;
1088
+ padding: 0;
1089
+ border: 0;
1090
+ border-radius: var(--sc-r-sm, 6px);
603
1091
  background: transparent;
604
1092
  color: var(--sc-muted, #6b6b73);
1093
+ cursor: pointer;
605
1094
  }
606
1095
 
607
- .sc-btn-quiet:hover {
1096
+ .sc-head-back:hover {
608
1097
  background: var(--sc-raised, #f6f6f7);
609
1098
  color: var(--sc-text, #1a1a1c);
610
1099
  }
611
1100
 
612
- .sc-btn-connected {
613
- display: inline-flex;
1101
+ .sc-head-back svg {
1102
+ width: 17px;
1103
+ height: 17px;
1104
+ }
1105
+
1106
+ .sc-foot-strip {
1107
+ display: flex;
614
1108
  align-items: center;
615
- gap: 9px;
616
- font-family: var(--sc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
1109
+ justify-content: space-between;
1110
+ gap: 12px;
1111
+ margin-top: 16px;
1112
+ padding: 10px 10px 10px 13px;
1113
+ border-radius: var(--sc-r, 10px);
1114
+ background: var(--sc-raised, #f6f6f7);
617
1115
  font-size: 13px;
1116
+ color: var(--sc-muted, #6b6b73);
1117
+ text-align: left;
618
1118
  }
619
1119
 
620
- .sc-btn-connected .sc-dot {
1120
+ .sc-foot-go {
1121
+ display: inline-flex;
1122
+ align-items: center;
1123
+ gap: 3px;
1124
+ flex: none;
1125
+ padding: 5px 9px;
1126
+ border-radius: var(--sc-r-sm, 6px);
1127
+ background: var(--sc-sheet, #ffffff);
1128
+ border: 1px solid var(--sc-line-2, #dcdce0);
1129
+ color: var(--sc-text, #1a1a1c);
1130
+ font-size: 12.5px;
1131
+ font-weight: 600;
1132
+ text-decoration: none;
1133
+ white-space: nowrap;
1134
+ }
1135
+
1136
+ .sc-foot-go:hover {
1137
+ border-color: var(--sc-muted, #6b6b73);
1138
+ }
1139
+
1140
+ .sc-foot-go svg {
1141
+ width: 13px;
1142
+ height: 13px;
1143
+ }
1144
+
1145
+ .sc-opt-go {
1146
+ width: 15px;
1147
+ height: 15px;
621
1148
  flex: none;
1149
+ color: var(--sc-line-2, #dcdce0);
1150
+ }
1151
+
1152
+ .sc-opt:hover .sc-opt-go {
1153
+ color: var(--sc-muted, #6b6b73);
1154
+ }
1155
+
1156
+ .sc-waiting {
1157
+ position: relative;
1158
+ display: grid;
1159
+ place-items: center;
1160
+ width: 84px;
1161
+ height: 84px;
1162
+
1163
+ margin: 0 auto 10px;
1164
+ }
1165
+
1166
+ .sc-waiting-orbit {
1167
+ position: absolute;
1168
+ inset: 0;
1169
+ width: 100%;
1170
+ height: 100%;
1171
+ color: var(--sc-accent, #18181b);
1172
+ animation: sc-turn 1100ms linear infinite;
1173
+ }
1174
+
1175
+ .sc-waiting-arc {
1176
+ fill: none;
1177
+ stroke: currentColor;
1178
+ stroke-width: 3;
1179
+ stroke-linecap: round;
1180
+ stroke-dasharray: 72 217;
1181
+ }
1182
+
1183
+ .sc-waiting-mark {
1184
+ width: 44px;
1185
+ height: 44px;
1186
+ color: var(--sc-text, #1a1a1c);
1187
+ }
1188
+
1189
+ @keyframes sc-turn {
1190
+ to {
1191
+ transform: rotate(1turn);
1192
+ }
1193
+ }
1194
+
1195
+ .sc-result {
1196
+ position: relative;
1197
+ display: grid;
1198
+ place-items: center;
1199
+ width: 84px;
1200
+ height: 84px;
1201
+ margin: 2px auto 18px;
1202
+
1203
+ animation: sc-land 520ms cubic-bezier(0.34, 1.4, 0.64, 1);
1204
+ }
1205
+
1206
+ .sc-result-ok {
1207
+ color: var(--sc-ok, #22a06b);
1208
+ }
1209
+
1210
+ .sc-result-off {
1211
+ color: var(--sc-muted, #6b6b73);
1212
+ --sc-ring: var(--sc-line-2, #dcdce0);
1213
+ }
1214
+
1215
+ .sc-result-ring,
1216
+ .sc-result-glyph {
1217
+ position: absolute;
1218
+ inset: 0;
1219
+ width: 100%;
1220
+ height: 100%;
1221
+ }
1222
+
1223
+ .sc-result-ring {
1224
+ transform: rotate(-90deg);
1225
+ }
1226
+
1227
+ .sc-result-circle {
1228
+ fill: none;
1229
+
1230
+ stroke: var(--sc-ring, currentColor);
1231
+ stroke-width: 3;
1232
+
1233
+ stroke-dasharray: 289;
1234
+ stroke-dashoffset: 289;
1235
+ animation: sc-sweep 560ms cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
1236
+ }
1237
+
1238
+ .sc-result-path {
1239
+ fill: none;
1240
+ stroke: currentColor;
1241
+ stroke-width: 4.5;
1242
+ stroke-linecap: round;
1243
+ stroke-linejoin: round;
1244
+ stroke-dasharray: 60;
1245
+ stroke-dashoffset: 60;
1246
+ animation: sc-draw 300ms 380ms cubic-bezier(0.3, 0.8, 0.4, 1) forwards;
1247
+ }
1248
+
1249
+ .sc-result-halo {
1250
+ position: absolute;
1251
+ inset: 0;
1252
+ border-radius: 50%;
1253
+ border: 2px solid currentColor;
1254
+ opacity: 0;
1255
+ animation: sc-pulse 640ms 420ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
1256
+ }
1257
+
1258
+ @keyframes sc-land {
1259
+ from {
1260
+ opacity: 0;
1261
+ transform: scale(0.9);
1262
+ }
1263
+ }
1264
+
1265
+ @keyframes sc-sweep {
1266
+ to {
1267
+ stroke-dashoffset: 0;
1268
+ }
1269
+ }
1270
+
1271
+ @keyframes sc-draw {
1272
+ to {
1273
+ stroke-dashoffset: 0;
1274
+ }
1275
+ }
1276
+
1277
+ @keyframes sc-pulse {
1278
+ from {
1279
+ opacity: 0.4;
1280
+ transform: scale(1);
1281
+ }
1282
+ to {
1283
+ opacity: 0;
1284
+ transform: scale(1.32);
1285
+ }
1286
+ }
1287
+
1288
+ @media (prefers-reduced-motion: reduce) {
1289
+
1290
+ .sc-waiting-orbit {
1291
+ animation: none;
1292
+ color: var(--sc-line-2, #dcdce0);
1293
+ }
1294
+
1295
+ .sc-waiting-arc {
1296
+ stroke-dasharray: none;
1297
+ }
1298
+
1299
+
1300
+ .sc-result {
1301
+ animation: none;
1302
+ }
1303
+
1304
+ .sc-result-circle,
1305
+ .sc-result-path {
1306
+ animation: none;
1307
+ stroke-dashoffset: 0;
1308
+ }
1309
+
1310
+
1311
+ .sc-result-halo {
1312
+ display: none;
1313
+ }
1314
+ }
1315
+
1316
+ .sc-prereq {
1317
+ display: flex;
1318
+ align-items: center;
1319
+ justify-content: center;
1320
+ gap: 6px;
1321
+ margin: 10px 0 0;
1322
+ font-size: 12.5px;
1323
+ color: var(--sc-muted, #6b6b73);
1324
+ }
1325
+
1326
+ .sc-opt:focus-visible,
1327
+ .sc-btn:focus-visible,
1328
+ .sc-step-lead:focus-visible,
1329
+ .sc-step-links a:focus-visible,
1330
+ .sc-alt-link:focus-visible,
1331
+ .sc-conn-action:focus-visible,
1332
+ .sc-input:focus-visible,
1333
+ .sc-modal-close:focus-visible {
1334
+ outline: 2px solid var(--sc-accent, #18181b);
1335
+ outline-offset: 2px;
1336
+ }
1337
+
1338
+ .sc-app {
1339
+ display: inline-flex;
1340
+ align-items: center;
1341
+ gap: 4px;
1342
+ }
1343
+
1344
+ .sc-app:has(.sc-app-icon) {
1345
+ vertical-align: -3px;
1346
+ }
1347
+
1348
+ .sc-app-icon {
1349
+ width: 13px;
1350
+ height: 13px;
1351
+ flex: none;
1352
+ border-radius: 3px;
1353
+
1354
+ object-fit: contain;
1355
+ }
1356
+
1357
+ .sc-link {
1358
+ color: inherit;
1359
+ text-decoration: underline;
1360
+ text-underline-offset: 2px;
1361
+ }
1362
+
1363
+ .sc-btn-quiet {
1364
+ border-color: transparent;
1365
+ background: transparent;
1366
+ color: var(--sc-muted, #6b6b73);
1367
+ }
1368
+
1369
+ .sc-btn-quiet:hover {
1370
+ background: var(--sc-raised, #f6f6f7);
1371
+ color: var(--sc-text, #1a1a1c);
1372
+ }
1373
+
1374
+ .sc-btn-connected {
1375
+ display: inline-flex;
1376
+ align-items: center;
1377
+ gap: 8px;
1378
+
1379
+ max-width: 100%;
1380
+ min-width: 0;
1381
+
1382
+ padding: 4px 13px 4px 4px;
1383
+ border-radius: var(--sc-r-pill, 999px);
1384
+ border-color: var(--sc-line, #e9e9eb);
1385
+
1386
+ box-shadow: var(--sc-shadow-1);
1387
+ font-size: var(--sc-fs-small);
1388
+ font-weight: 500;
1389
+
1390
+ letter-spacing: -0.005em;
1391
+ transition:
1392
+ background-color 120ms ease,
1393
+ border-color 120ms ease,
1394
+ box-shadow 120ms ease;
1395
+ }
1396
+
1397
+ .sc-btn-connected:hover {
1398
+ background: var(--sc-raised, #f6f6f7);
1399
+ border-color: var(--sc-line-2, #dcdce0);
1400
+ }
1401
+
1402
+ .sc-btn-connected:active {
1403
+ transform: translateY(0.5px);
1404
+ }
1405
+
1406
+ .sc-btn-connected .sc-runtime-tile {
1407
+ border-radius: 50%;
1408
+ }
1409
+
1410
+ .sc-btn-connected:hover .sc-runtime-tile {
1411
+ background: var(--sc-sheet, #ffffff);
1412
+ }
1413
+
1414
+ .sc-btn-connected .sc-dot {
1415
+ flex: none;
1416
+ margin-left: 1px;
1417
+ }
1418
+
1419
+ .sc-btn-connected .sc-dot-ok {
1420
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ok, #22a06b) 16%, transparent);
1421
+ }
1422
+
1423
+ .sc-btn-connected .sc-dot-busy {
1424
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-warn, #b06f14) 16%, transparent);
1425
+ }
1426
+
1427
+ @media (prefers-reduced-motion: no-preference) {
1428
+ .sc-btn-connected .sc-dot-ok {
1429
+ animation: sc-pulse-ok 3s ease-out infinite;
1430
+ }
1431
+ .sc-btn-connected .sc-dot-busy {
1432
+ animation: sc-pulse-busy 1.8s ease-out infinite;
1433
+ }
1434
+ }
1435
+
1436
+ @keyframes sc-pulse-ok {
1437
+ 0%,
1438
+ 70%,
1439
+ 100% {
1440
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ok, #22a06b) 16%, transparent);
1441
+ }
1442
+ 35% {
1443
+ box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc-ok, #22a06b) 7%, transparent);
1444
+ }
1445
+ }
1446
+
1447
+ @keyframes sc-pulse-busy {
1448
+ 0%,
1449
+ 70%,
1450
+ 100% {
1451
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-warn, #b06f14) 16%, transparent);
1452
+ }
1453
+ 35% {
1454
+ box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc-warn, #b06f14) 7%, transparent);
1455
+ }
1456
+ }
1457
+
1458
+ @media (prefers-reduced-motion: reduce) {
1459
+ .sc-btn-connected {
1460
+ transition: none;
1461
+ }
1462
+ .sc-btn-connected:active {
1463
+ transform: none;
1464
+ }
1465
+ }
1466
+
1467
+ .sc-btn-connected-text {
1468
+ min-width: 0;
1469
+ overflow: hidden;
1470
+ text-overflow: ellipsis;
1471
+ white-space: nowrap;
1472
+ }
1473
+
1474
+ .sc-btn-connected-where {
1475
+ color: var(--sc-muted, #6b6b73);
1476
+ font-weight: 400;
1477
+ }
1478
+
1479
+ .sc-sr {
1480
+ position: absolute;
1481
+ width: 1px;
1482
+ height: 1px;
1483
+ padding: 0;
1484
+ margin: -1px;
1485
+ overflow: hidden;
1486
+ clip-path: inset(50%);
1487
+ white-space: nowrap;
1488
+ border: 0;
1489
+ }
1490
+
1491
+ .soba-connect:has(> .sc-limit) {
1492
+ max-width: none;
1493
+ }
1494
+
1495
+ .soba-connect .sc-limit {
1496
+ max-width: none;
1497
+
1498
+ container-type: inline-size;
1499
+ container-name: sc-limit;
1500
+ }
1501
+ .sc-limit-actions {
1502
+ display: flex;
1503
+ flex-wrap: wrap-reverse;
1504
+ justify-content: flex-end;
1505
+ gap: 8px;
1506
+ margin-top: 16px;
1507
+ }
1508
+ .sc-limit-actions .sc-btn {
1509
+
1510
+ flex: 0 1 auto;
1511
+ min-width: max-content;
1512
+ }
1513
+
1514
+ @container sc-limit (max-width: 480px) {
1515
+ .sc-limit-actions {
1516
+ flex-direction: column-reverse;
1517
+ align-items: stretch;
1518
+ }
1519
+ .sc-limit-actions .sc-btn {
1520
+ width: 100%;
1521
+ }
1522
+ }
1523
+
1524
+ .sc-nudge {
1525
+
1526
+ display: grid;
1527
+ grid-template-columns: minmax(0, 1fr) auto;
1528
+ column-gap: 18px;
1529
+ padding: 16px 18px 15px;
1530
+ border: 1px solid var(--sc-line, #e9e9eb);
1531
+
1532
+ border-radius: var(--sc-r, 10px);
1533
+ background: var(--sc-sheet, #ffffff);
1534
+ box-shadow: var(--sc-shadow-1);
1535
+ }
1536
+
1537
+ .sc-nudge-top {
1538
+ grid-column: 1;
1539
+ min-width: 0;
1540
+ }
1541
+ .sc-nudge-say {
1542
+ min-width: 0;
1543
+ }
1544
+
1545
+ .sc-nudge > .sc-btn {
1546
+ grid-column: 2;
1547
+ align-self: end;
1548
+ justify-self: end;
1549
+ }
1550
+
1551
+ .sc-nudge:not(:has(.sc-nudge-steps)) > .sc-btn {
1552
+ grid-row: 1;
1553
+ align-self: center;
1554
+ }
1555
+
1556
+ .soba-connect:has(> .sc-nudge) {
1557
+ container-type: inline-size;
1558
+ container-name: sc-nudge;
1559
+ }
1560
+
1561
+ @container sc-nudge (max-width: 460px) {
1562
+ .sc-nudge {
1563
+ grid-template-columns: minmax(0, 1fr);
1564
+ }
1565
+
1566
+ .sc-nudge > .sc-btn,
1567
+ .sc-nudge:not(:has(.sc-nudge-steps)) > .sc-btn {
1568
+ grid-column: 1;
1569
+ grid-row: auto;
1570
+ align-self: start;
1571
+ margin-top: 14px;
1572
+ }
1573
+ }
1574
+ .sc-nudge-title {
1575
+ margin: 0;
1576
+ font-size: var(--sc-fs-title);
1577
+ font-weight: 600;
1578
+ line-height: 1.3;
1579
+ letter-spacing: -0.01em;
1580
+ color: var(--sc-text, #1a1a1c);
1581
+ }
1582
+ .sc-nudge-detail {
1583
+ margin: 3px 0 0;
1584
+ font-size: var(--sc-fs-body);
1585
+ line-height: 1.5;
1586
+ color: var(--sc-muted, #6b6b73);
1587
+ }
1588
+
1589
+ .sc-nudge-stalled .sc-nudge-title {
1590
+ color: var(--sc-warn, #b06f14);
1591
+ }
1592
+
1593
+ .sc-nudge-note {
1594
+ margin: 6px 0 0;
1595
+ font-size: var(--sc-fs-small, 12px);
1596
+ line-height: 1.45;
1597
+ color: var(--sc-muted, #6b6b73);
1598
+ }
1599
+
1600
+ .sc-nudge-more {
1601
+ display: inline-flex;
1602
+ align-self: start;
1603
+ align-items: center;
1604
+ gap: 5px;
1605
+ margin: 9px 0 0 -8px;
1606
+ padding: 3px 8px;
1607
+ font-size: var(--sc-fs-body);
1608
+ }
1609
+ .sc-nudge-chev {
1610
+ flex: none;
1611
+ width: 13px;
1612
+ height: 13px;
1613
+ transition: transform 150ms ease;
1614
+ }
1615
+ .sc-nudge-more[aria-expanded="true"] > .sc-nudge-chev {
1616
+ transform: rotate(180deg);
1617
+ }
1618
+ @media (prefers-reduced-motion: reduce) {
1619
+ .sc-nudge-chev {
1620
+ transition: none;
1621
+ }
1622
+ }
1623
+
1624
+ .sc-nudge-steps {
1625
+ grid-column: 1;
1626
+ counter-reset: sc-step;
1627
+ margin: 11px 0 2px;
1628
+ padding: 0;
1629
+ list-style: none;
1630
+ }
1631
+ .sc-nudge-steps li {
1632
+ position: relative;
1633
+ display: grid;
1634
+ grid-template-columns: 20px minmax(0, 1fr);
1635
+
1636
+ gap: 0 12px;
1637
+ padding-bottom: 14px;
1638
+ font-size: var(--sc-fs-body);
1639
+ line-height: 1.5;
1640
+ }
1641
+ .sc-nudge-steps li:last-child {
1642
+ padding-bottom: 0;
1643
+ }
1644
+
1645
+ .sc-nudge-steps li::before {
1646
+ counter-increment: sc-step;
1647
+ content: counter(sc-step);
1648
+ grid-column: 1;
1649
+ grid-row: 1;
1650
+ display: grid;
1651
+ place-items: center;
1652
+ width: 20px;
1653
+ height: 20px;
1654
+ border: 1px solid var(--sc-line-2, #dcdce0);
1655
+ border-radius: 50%;
1656
+ background: var(--sc-sheet, #ffffff);
1657
+ font-size: var(--sc-fs-small);
1658
+ font-weight: 600;
1659
+ font-variant-numeric: tabular-nums;
1660
+ line-height: 1;
1661
+ color: var(--sc-muted, #6b6b73);
1662
+ }
1663
+
1664
+ .sc-nudge-steps li:not(:last-child)::after {
1665
+ content: "";
1666
+ position: absolute;
1667
+
1668
+ left: 9.5px;
1669
+ top: 23px;
1670
+ bottom: 2px;
1671
+ width: 1px;
1672
+ background: var(--sc-line, #e9e9eb);
1673
+ }
1674
+
1675
+ .sc-nudge-steps strong {
1676
+ grid-column: 2;
1677
+ font-weight: 600;
1678
+ color: var(--sc-text, #1a1a1c);
1679
+ }
1680
+ .sc-nudge-steps span {
1681
+ grid-column: 2;
1682
+ color: var(--sc-muted, #6b6b73);
1683
+ }
1684
+
1685
+ .sc-step-lead {
1686
+ grid-column: 2;
1687
+ justify-self: start;
1688
+ padding: 0;
1689
+ border: 0;
1690
+ background: none;
1691
+ font: inherit;
1692
+ font-weight: 600;
1693
+ color: var(--sc-text, #1a1a1c);
1694
+ text-align: left;
1695
+ cursor: pointer;
1696
+ text-decoration: underline;
1697
+ text-decoration-color: color-mix(in srgb, currentcolor 30%, transparent);
1698
+ text-underline-offset: 3px;
1699
+ }
1700
+ .sc-step-lead:hover {
1701
+ text-decoration-color: currentcolor;
1702
+ }
1703
+
1704
+ .sc-step-links {
1705
+ grid-column: 2;
1706
+ margin-top: 3px;
1707
+
1708
+ font-size: var(--sc-fs-small);
1709
+ color: var(--sc-muted, #6b6b73);
1710
+ }
1711
+ .sc-step-links a {
1712
+ color: var(--sc-text-2, #3f3f46);
1713
+
1714
+ text-decoration: underline;
1715
+ text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
1716
+ text-underline-offset: 2px;
1717
+ }
1718
+ .sc-step-links a:hover {
1719
+ color: var(--sc-text, #1a1a1c);
1720
+ text-decoration-color: currentcolor;
1721
+ }
1722
+ .sc-step-links a:not(:last-child)::after {
1723
+ content: "\xB7";
1724
+
1725
+ margin: 0 5px;
1726
+ color: var(--sc-muted, #6b6b73);
1727
+ text-decoration: none;
1728
+ display: inline-block;
1729
+ }
1730
+
1731
+ .sc-step-links a:first-of-type {
1732
+ margin-left: 6px;
1733
+ }
1734
+
1735
+ .sc-nudge .sc-btn-primary {
1736
+ flex: none;
1737
+ margin-left: auto;
1738
+ padding: 8px 15px;
1739
+ font-size: var(--sc-fs-small);
1740
+ }
1741
+
1742
+ .sc-plan-reward {
1743
+ display: flex;
1744
+ flex-direction: column;
1745
+ align-items: flex-start;
1746
+ gap: 6px;
1747
+ }
1748
+
1749
+ .sc-plan-reward-line {
1750
+ position: relative;
1751
+ margin: 0;
1752
+ padding-left: 16px;
1753
+ font-size: 13px;
1754
+ line-height: 1.45;
1755
+ color: var(--sc-text-2, #3f3f46);
1756
+ }
1757
+ .sc-plan-reward-line::before {
1758
+ content: "\u2713";
1759
+ position: absolute;
1760
+ left: 2px;
1761
+ top: 1px;
1762
+ font-size: 11px;
1763
+ color: var(--sc-ok, #22a06b);
1764
+ }
1765
+
1766
+ .sc-btn-icon {
1767
+ display: inline-flex;
1768
+ align-items: center;
1769
+ gap: 7px;
1770
+ }
1771
+ .sc-btn-mark {
1772
+ width: 13px;
1773
+ height: 13px;
1774
+ flex: none;
1775
+ }
1776
+
1777
+ .soba-connect.sc-compact {
1778
+ width: auto;
1779
+ max-width: none;
1780
+ margin: 0;
1781
+ font-size: 13px;
1782
+ }
1783
+ .sc-compact .sc-compute-act {
1784
+ margin-top: 0;
1785
+ }
1786
+ .sc-compact .sc-btn {
1787
+ padding: 4px 9px;
1788
+ font-size: 12px;
1789
+ line-height: 18px;
1790
+ }
1791
+ .sc-compact .sc-btn-icon {
1792
+ gap: 6px;
1793
+ }
1794
+ .sc-compact .sc-btn-mark {
1795
+ width: 12px;
1796
+ height: 12px;
1797
+ }
1798
+
1799
+ .sc-plan-reward-open {
1800
+ padding-left: 0;
1801
+ }
1802
+ .sc-plan-reward-open::before {
1803
+ content: none;
1804
+ }
1805
+
1806
+ .sc-plan-reward-need {
1807
+ color: var(--sc-muted, #6b6b73);
1808
+ }
1809
+ .sc-plan-reward-need::before {
1810
+ content: "\u2013";
1811
+ font-weight: 400;
1812
+ color: var(--sc-line-2, #dcdce0);
1813
+ }
1814
+
1815
+ .sc-plan .sc-plan-reward-line {
1816
+ padding: 9px 11px 9px 27px;
1817
+ border: 1px solid var(--sc-line, #e9e9eb);
1818
+ border-radius: var(--sc-r-sm, 6px);
1819
+ background: var(--sc-sheet, #ffffff);
1820
+ }
1821
+
1822
+ .sc-plan .sc-plan-reward-line::before {
1823
+ left: 11px;
1824
+ top: 9px;
1825
+ }
1826
+
1827
+ .sc-plan .sc-plan-reward-open {
1828
+ padding-left: 11px;
1829
+ }
1830
+
1831
+ .sc-plan-reward-act {
1832
+ display: grid;
1833
+ width: 100%;
1834
+ border: 0;
1835
+ background: transparent;
1836
+ font-family: inherit;
1837
+ font-weight: 400;
1838
+ text-align: left;
1839
+ cursor: pointer;
1840
+ transition:
1841
+ border-color 120ms ease,
1842
+ background-color 120ms ease;
1843
+ }
1844
+
1845
+ .sc-plan-reward-act::before {
1846
+ transition: opacity 120ms ease;
1847
+ }
1848
+
1849
+ .sc-plan-reward-act > span {
1850
+ grid-area: 1 / 1;
1851
+ transition:
1852
+ opacity 120ms ease,
1853
+ visibility 120ms;
1854
+ }
1855
+
1856
+ .sc-plan-reward-act .sc-reward-do {
1857
+ display: inline-flex;
1858
+ align-items: center;
1859
+ gap: 7px;
1860
+
1861
+ margin-left: -16px;
1862
+ color: var(--sc-text, #1a1a1c);
1863
+ font-weight: 500;
1864
+ opacity: 0;
1865
+ visibility: hidden;
1866
+ }
1867
+
1868
+ .sc-reward-mark {
1869
+ width: 13px;
1870
+ height: 13px;
1871
+ flex: none;
1872
+ }
1873
+
1874
+ .sc-plan-reward-act:hover,
1875
+ .sc-plan-reward-act:focus-visible {
1876
+ border-color: var(--sc-line-2, #dcdce0);
1877
+ background: var(--sc-raised, #f6f6f7);
1878
+ }
1879
+
1880
+ .sc-plan-reward-act:hover .sc-reward-said,
1881
+ .sc-plan-reward-act:focus-visible .sc-reward-said {
1882
+ opacity: 0;
1883
+ visibility: hidden;
1884
+ }
1885
+
1886
+ .sc-plan-reward-act:hover .sc-reward-do,
1887
+ .sc-plan-reward-act:focus-visible .sc-reward-do {
1888
+ opacity: 1;
1889
+ visibility: visible;
1890
+ }
1891
+
1892
+ .sc-plan-reward-act:hover::before,
1893
+ .sc-plan-reward-act:focus-visible::before {
1894
+ opacity: 0;
1895
+ }
1896
+
1897
+ @media (prefers-reduced-motion: reduce) {
1898
+ .sc-plan-reward-act,
1899
+ .sc-plan-reward-act > span {
1900
+ transition: none;
1901
+ }
1902
+ }
1903
+
1904
+ .sc-current-foot .sc-plan-reward-line {
1905
+ padding: 9px 11px 9px 27px;
1906
+ border: 1px solid var(--sc-line, #e9e9eb);
1907
+ border-radius: var(--sc-r-sm, 6px);
1908
+ background: var(--sc-raised, #f6f6f7);
1909
+ }
1910
+
1911
+ .sc-current-foot .sc-plan-reward-line::before {
1912
+ left: 11px;
1913
+ top: 9px;
1914
+ }
1915
+
1916
+ .sc-current-foot .sc-plan-reward-need::before {
1917
+ content: "!";
1918
+ font-weight: 600;
1919
+ color: var(--sc-muted, #6b6b73);
1920
+ }
1921
+
1922
+ .sc-current-foot .sc-btn {
1923
+ border-radius: var(--sc-r-pill, 999px);
1924
+ padding-block: 0.6em;
1925
+ }
1926
+
1927
+ .sc-billing {
1928
+ display: flex;
1929
+ flex-direction: column;
1930
+ gap: 28px;
1931
+ }
1932
+
1933
+ .sc-billing-plans {
1934
+ display: flex;
1935
+ flex-direction: column;
1936
+ gap: 10px;
1937
+ }
1938
+
1939
+ .sc-current {
1940
+ display: flex;
1941
+ flex-direction: column;
1942
+ gap: 14px;
1943
+ }
1944
+
1945
+ .sc-section-title {
1946
+ margin: 0;
1947
+ font-size: var(--sc-fs-label, 11.5px);
1948
+ font-weight: 600;
1949
+ color: var(--sc-muted, #6b6b73);
1950
+ }
1951
+
1952
+ .sc-current-grid {
1953
+ display: flex;
1954
+ flex-wrap: wrap;
1955
+ gap: 12px 32px;
1956
+ align-items: flex-start;
1957
+ }
1958
+
1959
+ .sc-current-main {
1960
+ flex: 3 1 260px;
1961
+ min-width: 0;
1962
+ display: flex;
1963
+ flex-direction: column;
1964
+ gap: 5px;
1965
+ }
1966
+
1967
+ .sc-current-trial {
1968
+ margin: 0;
1969
+ display: flex;
1970
+ align-items: center;
1971
+ }
1972
+
1973
+ .sc-current-name {
1974
+ margin: 0;
1975
+ display: flex;
1976
+ align-items: center;
1977
+ gap: 10px;
1978
+ font-size: var(--sc-fs-title, 17px);
1979
+ font-weight: 600;
1980
+ letter-spacing: -0.025em;
1981
+ line-height: 1.1;
1982
+ }
1983
+
1984
+ .sc-trial-badge {
1985
+ font-size: 11.5px;
1986
+ font-weight: 500;
1987
+ padding: 3px 8px;
1988
+ border-radius: var(--sc-r-pill, 999px);
1989
+ background: var(--sc-raised, #f6f6f7);
1990
+ color: var(--sc-text-2, #3f3f46);
1991
+ white-space: nowrap;
1992
+ }
1993
+
1994
+ .sc-current-foot {
1995
+ display: flex;
1996
+ flex-wrap: wrap;
1997
+ align-items: center;
1998
+ justify-content: space-between;
1999
+ gap: 10px 16px;
2000
+ padding-top: 12px;
2001
+ border-top: 1px solid var(--sc-line, #e9e9eb);
2002
+ }
2003
+ .sc-current-foot .sc-plan-reward-line {
2004
+ flex: 1 1 240px;
2005
+ }
2006
+
2007
+ .sc-usage {
2008
+ flex: 2 1 240px;
2009
+ min-width: 0;
2010
+ display: flex;
2011
+ flex-direction: column;
2012
+ gap: 7px;
2013
+
2014
+ padding-top: 7px;
2015
+ }
2016
+
2017
+ .sc-usage .sc-fact-key {
2018
+ font-size: var(--sc-fs-label, 11.5px);
2019
+ font-weight: 600;
2020
+ }
2021
+
2022
+ .sc-usage-figure {
2023
+ font-size: var(--sc-fs-title, 17px);
2024
+ font-weight: 600;
2025
+ letter-spacing: -0.01em;
2026
+ font-variant-numeric: tabular-nums;
2027
+ }
2028
+
2029
+ .sc-usage-line {
2030
+ margin: 0;
2031
+ font-size: 12.5px;
2032
+ line-height: 1.45;
2033
+ color: var(--sc-muted, #6b6b73);
2034
+ }
2035
+
2036
+ .sc-meter {
2037
+ height: 7px;
2038
+ border-radius: var(--sc-r-pill, 999px);
2039
+
2040
+ background: var(--sc-line-2, #dcdce0);
2041
+ overflow: hidden;
2042
+ }
2043
+ .sc-meter-fill {
2044
+ display: block;
2045
+ height: 100%;
2046
+ border-radius: var(--sc-r-pill, 999px);
2047
+ background: var(--sc-text, #18181b);
2048
+ transition: width 240ms ease;
2049
+
2050
+ min-width: 6px;
2051
+ }
2052
+
2053
+ .sc-meter-full {
2054
+ background: var(--sc-warn, #b06f14);
2055
+ }
2056
+
2057
+ .sc-plan-rows {
2058
+ list-style: none;
2059
+ margin: 0;
2060
+ padding: 0;
2061
+ border: 1px solid var(--sc-line, #e9e9eb);
2062
+ border-radius: var(--sc-r, 10px);
2063
+
2064
+ overflow: hidden;
2065
+ background: var(--sc-sheet, #fff);
2066
+ }
2067
+
2068
+ .sc-plan-row {
2069
+ display: flex;
2070
+ flex-wrap: wrap;
2071
+ align-items: flex-start;
2072
+ gap: 12px 24px;
2073
+ padding: 18px 20px;
2074
+ }
2075
+ .sc-plan-row + .sc-plan-row {
2076
+ border-top: 1px solid var(--sc-line, #e9e9eb);
2077
+ }
2078
+
2079
+ .sc-row-main {
2080
+ flex: 1 1 300px;
2081
+ min-width: 0;
2082
+ display: flex;
2083
+ flex-direction: column;
2084
+ gap: 6px;
2085
+ }
2086
+
2087
+ .sc-row-side {
2088
+ flex: 0 0 auto;
2089
+ margin-left: auto;
2090
+ display: flex;
2091
+ flex-direction: column;
2092
+ align-items: flex-end;
2093
+ gap: 12px;
2094
+ text-align: right;
2095
+ }
2096
+ .sc-row-side .sc-btn {
2097
+ white-space: nowrap;
2098
+ }
2099
+
2100
+ .sc-row-name {
2101
+ display: flex;
2102
+ align-items: center;
2103
+ gap: 8px;
2104
+ }
2105
+ .sc-plan-row .sc-sub {
2106
+ margin: 0;
2107
+ max-width: 62ch;
2108
+ }
2109
+
2110
+ .sc-row-allowance {
2111
+ margin: 4px 0 0;
2112
+ display: flex;
2113
+ flex-direction: column;
2114
+ gap: 1px;
2115
+ }
2116
+ .sc-row-figure {
2117
+ font-size: 14px;
2118
+ font-weight: 550;
2119
+ font-variant-numeric: tabular-nums;
2120
+ }
2121
+ .sc-row-qualifier {
2122
+ font-size: 12.5px;
2123
+ color: var(--sc-muted, #6b6b73);
2124
+ }
2125
+
2126
+ .sc-plan-compute-inline .sc-fact-key {
2127
+ min-width: 0;
2128
+
2129
+ white-space: nowrap;
2130
+ }
2131
+ .sc-plan-compute-inline {
2132
+ display: flex;
2133
+ align-items: baseline;
2134
+ gap: 8px;
2135
+ font-size: 13.5px;
2136
+ }
2137
+ .sc-compute-inline {
2138
+ display: flex;
2139
+ flex-wrap: wrap;
2140
+ gap: 2px 14px;
2141
+ }
2142
+
2143
+ .sc-plan-reward-inline {
2144
+ flex-direction: row;
2145
+ align-items: baseline;
2146
+ flex-wrap: wrap;
2147
+ gap: 2px 12px;
2148
+ }
2149
+
2150
+ .sc-table-scroll {
2151
+ overflow-x: auto;
2152
+ }
2153
+
2154
+ .sc-plan-table {
2155
+ width: 100%;
2156
+ border-collapse: collapse;
2157
+ text-align: left;
2158
+ }
2159
+
2160
+ .sc-plan-table th[scope="col"] {
2161
+ min-width: 148px;
2162
+ }
2163
+
2164
+ .sc-plan-table th,
2165
+ .sc-plan-table td {
2166
+ padding: 12px;
2167
+ vertical-align: top;
2168
+ border-bottom: 1px solid var(--sc-line, #e9e9eb);
2169
+ }
2170
+
2171
+ .sc-plan-table thead th {
2172
+ border-bottom-color: var(--sc-line-2, #dcdce0);
2173
+ }
2174
+
2175
+ .sc-plan-table tbody th[scope="row"] {
2176
+ font-weight: 400;
2177
+ color: var(--sc-muted, #6b6b73);
2178
+ white-space: nowrap;
2179
+ }
2180
+
2181
+ .sc-plan-table .sc-title {
2182
+ display: block;
2183
+ }
2184
+ .sc-plan-table .sc-plan-price {
2185
+ margin-top: 4px;
2186
+ }
2187
+
2188
+ .sc-table-buy td {
2189
+ border-bottom: none;
2190
+ padding-top: 14px;
2191
+ }
2192
+ .sc-table-buy .sc-btn {
2193
+ width: 100%;
2194
+ }
2195
+
2196
+ .sc-muted-cell {
2197
+ color: var(--sc-muted, #6b6b73);
2198
+ }
2199
+
2200
+ .sc-plan-table .sc-plan-reward-line {
2201
+ margin-bottom: 6px;
2202
+ }
2203
+ .sc-plan-table .sc-btn {
2204
+ padding: 6px 12px;
2205
+ font-size: 13px;
2206
+ }
2207
+
2208
+ .sc-plan-featured {
2209
+ background: var(--sc-raised, #f6f6f7);
2210
+ border-color: var(--sc-line-2, #dcdce0);
2211
+ box-shadow: var(--sc-shadow-2);
2212
+ }
2213
+
2214
+ li.sc-plan-row.sc-plan-featured {
2215
+ box-shadow: none;
2216
+ background: var(--sc-raised, #f6f6f7);
2217
+ }
2218
+ li.sc-plan-row.sc-plan-current {
2219
+ background: var(--sc-raised, #f6f6f7);
2220
+ box-shadow: inset 2px 0 0 var(--sc-text, #18181b);
2221
+ }
2222
+ .sc-plan-table .sc-col-featured {
2223
+ background: var(--sc-raised, #f6f6f7);
2224
+ }
2225
+ .sc-plan-table .sc-col-current {
2226
+ box-shadow: inset 2px 0 0 var(--sc-text, #18181b);
2227
+ }
2228
+
2229
+ .sc-plan-badge-soft {
2230
+ font-size: var(--sc-fs-label, 11px);
2231
+ padding: 2px 6px;
2232
+ border-radius: var(--sc-r-pill, 999px);
2233
+ border: 1px solid var(--sc-line-2, #dcdce0);
2234
+ color: var(--sc-text-2, #3f3f46);
2235
+ white-space: nowrap;
2236
+ }
2237
+
2238
+ .sc-plan-after {
2239
+ margin-left: 5px;
2240
+ }
2241
+
2242
+ .sc-plan-price-sm .sc-plan-amount {
2243
+ font-size: 20px;
2244
+ }
2245
+
2246
+ .sc-limit-head {
2247
+ display: flex;
2248
+ align-items: flex-start;
2249
+ gap: 11px;
2250
+ }
2251
+ .sc-limit-mark {
2252
+ flex: none;
2253
+ display: grid;
2254
+ place-items: center;
2255
+ width: 30px;
2256
+ height: 30px;
2257
+ border-radius: var(--sc-r-sm, 6px);
2258
+ background: var(--sc-raised, #f6f6f7);
2259
+ color: var(--sc-text-2, #3f3f46);
2260
+ }
2261
+ .sc-limit-mark svg {
2262
+ width: 16px;
2263
+ height: 16px;
2264
+ }
2265
+ .sc-limit-title {
2266
+ margin: 0;
2267
+ font-size: var(--sc-fs-body);
2268
+ font-weight: 600;
2269
+
2270
+ line-height: 1.35;
2271
+ }
2272
+ .sc-limit-body {
2273
+ margin: 3px 0 0;
2274
+ font-size: var(--sc-fs-small);
2275
+ color: var(--sc-muted, #6b6b73);
2276
+ }
2277
+
2278
+ .sc-limit-note {
2279
+ margin: 10px 0 0;
2280
+ font-size: var(--sc-fs-small);
2281
+ color: var(--sc-muted, #6b6b73);
2282
+ }
2283
+
2284
+ .sc-modal-sheet .sc-limit-head {
2285
+ flex-direction: column;
2286
+ align-items: center;
2287
+ text-align: center;
2288
+ gap: 0;
2289
+ }
2290
+
2291
+ .sc-modal-sheet .sc-limit-mark {
2292
+ width: 38px;
2293
+ height: 38px;
2294
+ margin-bottom: 12px;
2295
+ border: 1px solid var(--sc-line, #e9e9eb);
2296
+ border-radius: var(--sc-r, 10px);
2297
+ }
2298
+
2299
+ .sc-modal-sheet .sc-limit-mark svg {
2300
+ width: 18px;
2301
+ height: 18px;
2302
+ }
2303
+
2304
+ .sc-modal-sheet .sc-limit-title {
2305
+ font-size: var(--sc-fs-title);
2306
+ letter-spacing: -0.02em;
2307
+ }
2308
+
2309
+ .sc-modal-sheet .sc-limit-body {
2310
+ font-size: var(--sc-fs-small);
2311
+ line-height: 1.45;
2312
+
2313
+ max-width: 34ch;
2314
+ margin: 5px auto 0;
2315
+ }
2316
+
2317
+ .sc-modal-sheet .sc-limit-actions {
2318
+ margin-top: 18px;
2319
+ }
2320
+
2321
+ .sc-modal-sheet .sc-limit-actions .sc-btn {
2322
+ padding: 11px 14px;
2323
+ border-radius: var(--sc-r, 10px);
2324
+ font-weight: 500;
2325
+ }
2326
+
2327
+ .sc-modal-sheet .sc-limit-actions .sc-btn-quiet {
2328
+ position: relative;
2329
+ margin-top: 6px;
2330
+ font-size: var(--sc-fs-small);
2331
+ }
2332
+
2333
+ .sc-modal-sheet .sc-limit-actions .sc-btn-quiet::before {
2334
+ content: "";
2335
+ position: absolute;
2336
+ top: -7px;
2337
+ left: 0;
2338
+ right: 0;
2339
+ border-top: 1px solid var(--sc-line, #e9e9eb);
2340
+ }
2341
+
2342
+ .sc-limit-actions .sc-btn-quiet {
2343
+ flex: 0 0 auto;
2344
+ }
2345
+
2346
+ @keyframes sc-card-in {
2347
+ from {
2348
+ opacity: 0;
2349
+ transform: translateY(3px);
2350
+ }
2351
+ }
2352
+
2353
+ .sc-modal-sheet .sc-card {
2354
+ animation: sc-card-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
2355
+ }
2356
+
2357
+ .sc-modal-sheet {
2358
+ interpolate-size: allow-keywords;
2359
+ transition: height 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
2360
+ }
2361
+
2362
+ @keyframes sc-arrive {
2363
+ from {
2364
+ opacity: 0;
2365
+ transform: translateY(4px);
2366
+ }
2367
+ }
2368
+
2369
+ .sc-modal-sheet .sc-machine {
2370
+ animation: sc-arrive 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
2371
+ }
2372
+
2373
+ @media (prefers-reduced-motion: reduce) {
2374
+ .sc-modal-sheet .sc-card,
2375
+ .sc-modal-sheet .sc-machine {
2376
+ animation: none;
2377
+ }
2378
+ .sc-modal-sheet {
2379
+ transition: none;
2380
+ }
2381
+ }
2382
+
2383
+ .sc-opt-has {
2384
+ flex: none;
2385
+ font-size: 11px;
2386
+ font-weight: 600;
2387
+ border-radius: var(--sc-r-sm, 6px);
2388
+ padding: 3px 7px;
2389
+ background: var(--sc-raised, #f6f6f7);
2390
+ color: var(--sc-muted, #6b6b73);
2391
+ }
2392
+
2393
+ .sc-opt-has-ok {
2394
+ color: var(--sc-ok, #22a06b);
2395
+ }
2396
+
2397
+ .sc-opt-has-warn {
2398
+ color: var(--sc-warn, #b06f14);
622
2399
  }
623
- `,document.head.appendChild(e)}import{jsx as Ve}from"react/jsx-runtime";var Ft="https://www.soba.so",jt=15e3;function Ht(e){let{children:t,session:n,sessionEndpoint:i,user:s,runEndpoint:o,theme:d,initialMachines:p,initialConnect:u=null,initialPlans:y,initialCurrentPlan:m=null,baseUrl:r=Ft,pollMs:g=jt,injectStyles:R=!0,fetchImpl:C,onError:$}=e,[S,T]=O(n??null),[f,W]=O(null),[k,N]=O(u),[B,I]=O(null),[te,J]=O(u===null),[q,Se]=O(p??[]),[Z,K]=O(null),[Y,he]=O(p===void 0),[ne,V]=O(y??[]),[F,Ne]=O(m),[fe,oe]=O(null),[A,ge]=O(y===void 0),se=Dt($);se.current=$;let D=G(l=>{W(l),se.current?.(l)},[]);z(()=>{R&&je()},[R]);let w=He(()=>new xe({...n?{token:n}:{},...i?{endpoint:i}:{},...s?{user:s}:{},...C?{fetchImpl:C}:{}}),[n,i,s,C]);z(()=>{let l=!0,P=w.subscribe(()=>{l&&T(w.token)});return!w.token&&!w.canRefresh?D(new Error("<SobaProvider> needs a `session` or a `sessionEndpoint`. A browser cannot mint one: that takes your secret key.")):w.ensure().then(()=>l&&T(w.token),j=>l&&D(j)),()=>{l=!1,P()}},[w,D]),z(()=>{f&&(J(!1),he(!1),ge(!1),I(l=>l??f),K(l=>l??f),oe(l=>l??f))},[f]),z(()=>{let l=w.refreshAt;if(l===null)return;let P=setTimeout(()=>{w.refresh().catch(j=>D(j))},Math.max(0,l-Date.now()));return()=>clearTimeout(P)},[w,D,S]);let h=He(()=>S?new le({session:S,baseUrl:r,fetchImpl:ct(w,C??fetch.bind(globalThis))}):null,[S,r,w,C]);z(()=>{if(!h)return;let l=!0;return J(!0),h.context().then(P=>{l&&(N(P),I(null),J(!1))},P=>{l&&(I(P),J(!1))}),()=>{l=!1}},[h]);let c=G(async()=>{if(h)try{let l=await h.machines();Se(l),K(null)}catch(l){K(l)}finally{he(!1)}},[h]),x=G(async()=>{if(h)try{let l=await h.plans();V(l.plans),Ne(l.current),oe(null)}catch(l){oe(l)}finally{ge(!1)}},[h]);z(()=>{h&&x()},[h,x]);let E=G(async l=>{if(!h)throw new Error("No session yet.");await h.selectPlan(l),await x()},[h,x]),re=G(async(l,P)=>{if(!h)throw new Error("No session yet.");let j=await h.checkoutPlan(l,P);if(!j.url)throw new Error("Checkout could not be started.");return j.url},[h]),ae=G(async()=>{if(!h)throw new Error("No session yet.");await h.leavePlan(),await x()},[h,x]);z(()=>{if(!h)return;let l=!0;c();let P=setInterval(()=>{typeof document<"u"&&document.hidden||l&&c()},g);return()=>{l=!1,clearInterval(P)}},[h,c,g]);let ie=G(async l=>{if(!o)throw new Error("Pass `runEndpoint` to <SobaProvider> to start runs from the browser. It is your own route: it holds your secret key, calls soba.run(), and forwards the stream.");let{signal:P,...j}=l,ke=await(C??fetch.bind(globalThis))(o,{method:"POST",headers:{"content-type":"application/json",accept:"text/event-stream"},credentials:"same-origin",body:JSON.stringify(j),...P?{signal:P}:{}});if(!ke.ok)throw new Error(`${o} answered ${ke.status}.`);return Fe(ke)},[o,C]),ce=He(()=>({session:S,client:h,error:f,plan:{plans:ne,current:F,plan:F?ne.find(l=>l.id===F.plan_id)??null:null,loading:A,error:fe,select:E,checkout:re,leave:ae,refresh:x},compute:{machines:q,connected:q.length>0,online:q.some(l=>l.state!=="offline"),loading:Y,error:Z,refresh:c},connect:{app:k?.app??null,command:k?.command??null,publishableKey:k?.publishable_key??null,loading:te,error:B},run:ie}),[S,h,f,q,Y,Z,c,ne,F,A,fe,E,re,ae,x,k,te,B,ie]);return Ve(Le.Provider,{value:h,children:Ve(Oe.Provider,{value:{context:k,machines:Y?void 0:q,theme:d??k?.theme??"light"},children:Ve(Ae.Provider,{value:ce,children:t})})})}export{kt as ComputeStatus,qe as ConnectButton,_t as ConnectCompute,Ue as ConnectModal,At as SobaCheckout,Ut as SobaPlans,Ht as SobaProvider,It as collectText,je as injectStyles,Ce as parseEvent,Fe as readEvents,M as useSoba};
2400
+ `,document.head.appendChild(e)}import{jsx as kt,jsxs as _o}from"react/jsx-runtime";var So="https://www.soba.so",xo=15e3;function Po(e){let{children:n,session:t,sessionEndpoint:s,user:o,runEndpoint:i,theme:a,initialMachines:m,initialConnect:c=null,initialPlans:p,initialCurrentPlan:g=null,baseUrl:b=So,pollMs:h=xo,injectStyles:f=!0,modal:d=!0,fetchImpl:N,onError:k}=e,[x,U]=Y(t??null),[D,C]=Y(null),[$,q]=Y(c),[A,J]=Y(null),[z,F]=Y(c===null),[ce,Pe]=Y(m??[]),[yn,K]=Y(null),[Ce,wn]=Y(m===void 0),[Ne,he]=Y(p??[]),[Z,In]=Y(g),[Ke,Ue]=Y(null),[vn,le]=Y(p===void 0),[te,qe]=Y(null),[$n,_e]=Y(!1),Be=ko(k);Be.current=k;let se=ve(y=>{C(y),Be.current?.(y)},[]);De(()=>{f&&Nt()},[f]);let M=bn(()=>new Tn({...t?{token:t}:{},...s?{endpoint:s}:{},...o?{user:o}:{},...N?{fetchImpl:N}:{}}),[t,s,o,N]);De(()=>{let y=!0,B=M.subscribe(()=>{y&&U(M.token)});return!M.token&&!M.canRefresh?se(new Error("<SobaProvider> needs a `session` or a `sessionEndpoint`. A browser cannot mint one: that takes your secret key.")):M.ensure().then(()=>y&&U(M.token),ue=>y&&se(ue)),()=>{y=!1,B()}},[M,se]),De(()=>{D&&(F(!1),wn(!1),le(!1),J(y=>y??D),K(y=>y??D),Ue(y=>y??D))},[D]),De(()=>{let y=M.refreshAt;if(y===null)return;let B=setTimeout(()=>{M.refresh().catch(ue=>se(ue))},Math.max(0,y-Date.now()));return()=>clearTimeout(B)},[M,se,x]);let S=bn(()=>x?new Xe({session:x,baseUrl:b,fetchImpl:ts(M,N??fetch.bind(globalThis))}):null,[x,b,M,N]);De(()=>{if(!S)return;let y=!0;return F(!0),S.context().then(B=>{y&&(q(B),J(null),F(!1))},B=>{y&&(J(B),F(!1))}),()=>{y=!1}},[S]);let Me=ve(async()=>{if(S)try{let y=await S.machines();Pe(Array.isArray(y)?y:[]),K(null)}catch(y){K(y)}finally{wn(!1)}},[S]),X=ve(async()=>{if(S)try{let y=await S.plans();he(y.plans),In(y.current),Ue(null)}catch(y){Ue(y)}finally{le(!1)}},[S]);De(()=>{S&&X()},[S,X]);let Je=ve(async y=>{if(!S)throw new Error("No session yet.");await S.selectPlan(y),await X()},[S,X]),Cn=ve(async(y,B)=>{if(!S)throw new Error("No session yet.");let ue=await S.checkoutPlan(y,B);if(!ue.url)throw new Error("Checkout could not be started.");return ue.url},[S]),oe=ve(async()=>{if(!S)throw new Error("No session yet.");await S.leavePlan(),await X()},[S,X]);De(()=>{if(!S)return;let y=!0;Me();let B=setInterval(()=>{typeof document<"u"&&document.hidden||y&&Me()},h);return()=>{y=!1,clearInterval(B)}},[S,Me,h]);let ke=ve(async y=>{if(!i)throw new Error("Pass `runEndpoint` to <SobaProvider> to start runs from the browser. It is your own route: it holds your secret key, calls soba.run(), and forwards the stream.");let{signal:B,...ue}=y,Re=await(N??fetch.bind(globalThis))(i,{method:"POST",headers:{"content-type":"application/json",accept:"text/event-stream"},credentials:"same-origin",body:JSON.stringify(ue),...B?{signal:B}:{}});if(!Re.ok){let T=await Re.json().catch(()=>null),ee=new Error(T?.error?.message??`${i} answered ${Re.status}.`);throw ee.status=Re.status,T?.error?.code&&(ee.code=T.error.code),T?.error&&(ee.error=T.error),ee}let An=pt(Re);return async function*(){try{yield*An}finally{X()}}()},[i,N,X]),He=ve((y="manual")=>{d&&(_e(!0),qe(y))},[d]),Fe=ve(()=>qe(null),[]),Q=bn(()=>Z?Ne.find(y=>y.id===Z.plan_id)??null:null,[Ne,Z]),V=bn(()=>Q?Q.connected_reward==="included"&&ce.length>0&&Q.connected_included_units!==null?Q.connected_included_units:Q.included_units:null,[Q,ce]),Nn=bn(()=>({session:x,client:S,error:D,plan:{plans:Ne,current:Z,plan:Q,used:Z?.units_used??null,included:V,remaining:V!==null&&Z?Math.max(0,V-Z.units_used):null,unlimited:Q!==null&&V===null,loading:vn,error:Ke,select:Je,checkout:Cn,leave:oe,refresh:X},compute:{machines:ce,connected:ce.length>0,online:ce.some(y=>y.state!=="offline"),loading:Ce,error:yn,refresh:Me},connect:{app:$?.app??null,command:$?.command??null,connectUrl:$?.connect_url??null,publishableKey:$?.publishable_key??null,loading:z,error:A,open:He,close:Fe,isOpen:te!==null,hasModal:d},run:ke}),[x,S,D,Q,V,te,He,Fe,d,ce,Ce,yn,Me,Ne,Z,vn,Ke,Je,Cn,oe,X,$,z,A,ke]);return kt(rt.Provider,{value:S,children:kt(at.Provider,{value:{context:$,machines:Ce?void 0:ce,theme:a??$?.theme??"light"},children:_o(ot.Provider,{value:Nn,children:[n,d&&$n&&kt(mn,{open:te!==null,onOpenChange:y=>qe(y?te??"manual":null),...te&&te!=="manual"?{reason:te}:{}})]})})})}export{Ms as ComputeStatus,Ae as ConnectButton,Os as ConnectCompute,mn as ConnectModal,Fs as ConnectNudge,Xs as RunLimit,wo as SobaBilling,vo as SobaCheckout,mt as SobaCurrentPlan,ft as SobaPlans,Po as SobaProvider,Ks as collectText,Nt as injectStyles,En as parseEvent,pt as readEvents,fn as sobaErrorCode,gn as useCurrentPlan,ht as usePlans,ut as useRunLimit,I as useSoba};