npm create vite@latest client
   ✔ Select a framework: › React
   ✔ Select a variant: › TypeScript

   npm i jotai jotai-devtools @emotion/react

SyntaxError: Named export 'IconAlertCircle' not found. The requested module '@tabler/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@tabler/icons';
const {useEffect: rt,useRef: qo}from"react";import{Tabs: nt}from"@mantine/core";import{useAtomValue: ko}from"jotai/react";import{atom: xt}from"jotai/vanilla";var de="<unlabeled-atom>",h={minHeight:200,maxHeight:"90%",defaultHeight:370};var g=xt({height:h.defaultHeight,isDragging:!1});import{useAtomValue: ht,useSetAtom: Lt}from"jotai/react";import{atom: Ht}from"jotai/vanilla";var fe=Ht(void 0),ce=()=>ht(fe,s()),Te=()=>Lt(fe,s());import*as U from"react";import{Flex: Qe}from"@mantine/core";import{Panel: we,PanelGroup: zo}from"react-resizable-panels";import F from"react";import{Box: be}from"@mantine/core";import{PanelResizeHandle: vt}from"react-resizable-panels";var Xt={display:"flex",alignItems:"center","._jotai-devtools-internal-panel-resize-handle":{transition:"max-height, min-height, height, 0.2s ease-out"},"[data-resize-handle-active] &, &:hover":{"._jotai-devtools-internal-panel-resize-handle":{height:"90%",minHeight:"90%",maxHeight:"90%"}}},gt={borderRadius:"2rem",verticalAlign:"middle"},ye=()=>F.createElement(vt,null,F.createElement(be,{p:"5",h:"100%",sx:Xt},F.createElement(be,{className:"_jotai-devtools-internal-panel-resize-handle",mah:100,mih:50,h:"20%",w:5,m:5,bg:c("gray.3","gray.7"),sx:gt})));import*as R from"react";import{Box: no,LoadingOverlay: so,Text: mo}from"@mantine/core";import{useAtomValue: lo}from"jotai/react";import{atom: Q}from"jotai/vanilla";import{atomWithDefault: Bt}from"jotai/vanilla/utils";import{useAtom: Pt,useAtomValue: mn}from"jotai/react";import{atom: At}from"jotai/vanilla";var I=At([]),Je=()=>Pt(I,s());var z=e=>e||de;var Ue=(e,t)=>{let o=e.trim().toLocaleLowerCase();return o?t.filter(([r])=>z(r?.debugLabel).toLocaleLowerCase().includes(o)):t};var Se=e=>e.filter(([t])=>!t?.debugPrivate);var N=Q(void 0),Y=Q(""),Re=Bt(e=>{let t=Ue(e(Y),e(I)),{shouldShowPrivateAtoms:o}=e(X);return o?t:Se(t)}),Ve=Q(e=>e(Y),(e,t,o)=>{t(Y,o)});import E from"react";import{Stack: ro}from"@mantine/core";var Dt=e=>typeof e?.read=="function"||typeof e?.write=="function"||!!e?.init||!!e?.debugLabel,L=e=>e instanceof Promise?"promise":Array.isArray(e)?"array":e===null?"null":Dt(e)?"atom":typeof e;import{useEffect: Et,useReducer: Zt}from"react";import{useSetAtom: jt}from"jotai/react";import{useStore: Wt}from"jotai/react";var P=()=>{let e=ce();return Wt(e?{store:e}:void 0)};import Kt from"react";var Me=e=>e instanceof Promise,ze=Kt.use||(e=>{if(e.status==="pending")throw e;if(e.status==="fulfilled")return e.value;throw e.status==="rejected"?e.reason:(e.status="pending",e.then(t=>{e.status="fulfilled",e.value=t},t=>{e.status="rejected",e.reason=t}),e)});var Ft=e=>e?.isJotaiDevTools,Ne=void 0;function xe(e){let t=P(),o=j(),r=jt(N,s()),[[p,f,d],n]=Zt(u=>{let M=t.get(e);return Object.is(u[0],M)&&u[1]===t&&u[2]===e?u:[M,t,e]},void 0,()=>[t.get(e),t,e]),i=p;return(f!==t||d!==e)&&(n(),i=t.get(e)),Et(()=>{if(!t.dev_subscribe_state)return;let u=t.dev_subscribe_state;typeof t.dev_subscribe_store=="function"&&(u=t.dev_subscribe_store);let M=()=>{if(typeof Ne=="number"){setTimeout(n,Ne);return}n()};M.isJotaiDevTools=!0;let Tt=u?.(yt=>{if(yt!=="unsub")return;let re=o.get(N);if(re){let{l:Jt=[],t:ne}=t.dev_get_mounted?.(re.atom)||{};if(Array.from(Jt).every(Ft)&&ne&&ne?.size<=1)return r(void 0)}}),bt=t.sub(e,M);return n(),()=>{Tt?.(),bt()}},[t,r,o,e]),Me(i)?ze(i):i}import*as S from"react";import{Box: Qt,Code: wt,List: Le,Text: He}from"@mantine/core";import{useEffect: It,useMemo: Yt}from"react";var w=()=>{let t={store:P()};return se(t)},he=()=>{let e=w(),[t,o]=Je(),r=Yt(()=>Array.from(e.values),[e.values]);return It(()=>{o(r)},[o,r]),t};var ve=({atom:e})=>{let{dependents:t}=w(),o=ue(),r=S.useMemo(()=>{let d=Array.from(t.get(e)||[]).filter(n=>n.toString()!==e.toString());return o.shouldShowPrivateAtoms?d:d.filter(i=>!i?.debugPrivate)},[t,o.shouldShowPrivateAtoms,e]),p=S.useMemo(()=>r.map((f,d)=>{let n=z(f?.debugLabel);return S.createElement(Le.Item,{key:`${d}-${f.toString()}-dependents-list`},S.createElement(wt,{"data-testid":`dependents-list-item-${n}-${d}`},n))}),[r]);return S.createElement(Qt,null,S.createElement(He,{fw:"bold",mb:10,mt:20},"Dependents"),p.length?S.createElement(Le,{type:"ordered",mb:10},p):S.createElement(He,{size:"sm",mb:10},"No dependents"))};import*as T from"react";import{Box: Xe,Code: Ot,Text: ge,Title: Gt}from"@mantine/core";var O=({label:e,value:t,color:o})=>T.createElement(Xe,{mb:10},T.createElement(ge,{tt:"uppercase",fz:10,fw:"bold",color:"gray","data-testid":`display-detail-item-label-${e}`},e),T.createElement(Ot,{"data-testid":`display-detail-item-value-${t}`,color:o},t)),G=T.memo(({debugLabel:e,atomValueType:t,isAtomPrivate:o})=>T.createElement(Xe,null,T.createElement(Gt,{size:"h3",mb:10},"Atom Details"),T.createElement(ge,{fw:"bold",mb:10},"Meta"),T.createElement(O,{label:"Debug Label",value:z(e)}),T.createElement(O,{label:"Value type",value:t}),o&&T.createElement(O,{label:"Private",value:"Yes",color:"red"})));G.displayName="AtomMetaDetails";import K from"react";import{Box: to,Text: oo}from"@mantine/core";import{serialize: qt}from"superjson";var kt=["bigint","symbol","undefined","function"],q=Symbol("parsing-error"),Pe=e=>{let t=L(e);if(kt.includes(t))return String(e);let{json:o}=qt(e);try{let r=JSON.stringify(o,null,2);return typeof r>"u"?String(e):r}catch{return q}};import{createEmotionCache: Ct}from"@mantine/core";var A,Ae=e=>()=>{if(A)return A;let t={key:"jotai-devtools"};return e&&(t.nonce=e),A=Ct(t),A};import*as B from"react";import{Text: Be}from"@mantine/core";import{IconAlertCircle: $t}from"@tabler/icons";var De={display:"flex",alignItems:"center"},We=({message:e})=>{let t=c("red.8","red.5");return B.createElement(Be,{size:"sm",fw:"500",color:t,sx:De},B.createElement(Be,{mr:5,sx:De},B.createElement($t,{size:16})),e)};import*as W from"react";import*as Ke from"react";import{Prism: _t}from"@mantine/prism";var D=({children:e,...t})=>Ke.createElement(_t,{...t},e);var eo=["object","array","null","undefined","function","symbol"],Ee=e=>{let t=L(e);return eo.includes(t)?"javascript":"markdown"},Ze=W.memo(({prismLanguageType:e,value:t})=>W.createElement(D,{language:e,mb:10,copyLabel:"Copy value","data-testid":"atom-parsed-value"},t));var je=({atomValue:e})=>{let t=Ee(e),o=Pe(e);return K.createElement(to,null,K.createElement(oo,{fw:"bold",mb:"sm"},"Raw value"),o===q?K.createElement(We,{message:"Failed to parse the value of the atom"}):K.createElement(Ze,{value:o,prismLanguageType:t}))};var Fe=({atom:e})=>{let t=xe(e),o=L(t);return E.createElement(ro,{h:"auto"},E.createElement(G,{debugLabel:e?.debugLabel,atomValueType:o,isAtomPrivate:e?.debugPrivate}),E.createElement(je,{atomValue:t}),E.createElement(ve,{atom:e}))};var ao={position:"relative",top:"50%",transform:"translateY(-50%)"},k=R.memo(()=>{let e=lo(N,s()),t={color:c("dark","white")};return e?R.createElement(R.Suspense,{fallback:R.createElement(so,{visible:!0,overlayBlur:2,loaderProps:t})},R.createElement(Fe,{atom:e.atom})):R.createElement(no,{sx:ao},R.createElement(mo,{w:"100%",ta:"center"},"Select an atom from the left panel to view the details"," "))});k.displayName="AtomDetail";import*as a from"react";import{Box: To,Group: bo,Text: yo,TextInput: Jo}from"@mantine/core";import{IconAlertCircle: Uo}from"@tabler/icons";import{useAtom: Ie,useAtomValue: So}from"jotai/react";import*as J from"react";import{NavLink: io,Text: uo}from"@mantine/core";import{IconChevronRight: po}from"@tabler/icons";var fo=e=>({fontFamily:e.fontFamilyMonospace||"JetBrains Mono"}),co=()=>({borderRadius:5}),C=J.memo(({label:e,onClick:t,pos:o,isActive:r})=>J.createElement(io,{label:J.useMemo(()=>J.createElement(uo,{sx:fo},z(e)),[e]),variant:"filled",sx:co,active:r,color:c("dark","gray"),onClick:J.useCallback(()=>t(o),[t,o]),rightSection:J.useMemo(()=>J.createElement(po,{size:12,stroke:1.5}),[])}));C.displayName="AtomListItem";var Ro={position:"sticky",top:0},Vo=a.memo(()=>{let[e,t]=Ie(Ve,s());return a.createElement(Jo,{label:"Search",placeholder:"atom debug label",pt:10,pb:10,sx:Ro,value:e,onChange:r=>{let{target:{value:p}}=r;t(p)}})}),Mo={overflow:"auto"},Ye=()=>{he();let e=So(Re,s()),[t,o]=Ie(N,s()),r=a.useRef(e);a.useEffect(()=>{r.current=e},[e]);let p=a.useCallback(n=>{if(!r.current[n])throw new Error(`Unable to find atom at ${n} index`);o(i=>{let u=r.current[n]?.[0];if(!(!u||i?.atomKey===u?.toString()))return{atomKey:u?.toString(),atom:u}})},[o]),f=a.useMemo(()=>e.map(([n],i)=>a.createElement(C,{key:`atom-list-item-${n.toString()+i}`,label:n.debugLabel,onClick:p,pos:i,isActive:t?.atomKey===n.toString(),atomKey:n.toString()})),[e,t,p]),d=!e.length;return a.createElement(a.Fragment,null,a.createElement(Vo,null),a.createElement(To,{sx:Mo},f),d&&a.createElement(bo,{mt:20,position:"center"},a.createElement(Uo,{size:16}),a.createElement(yo,{fz:"sm",ml:0,"data-testid":"atom-list-no-atoms-found-message"},"No Atoms found!")))};var Oe={overflow:"auto"},No=e=>({background:e.colorScheme==="dark"?e.colors.dark[8]:e.colors.gray[2]}),Ge=U.memo(()=>U.createElement(zo,{direction:"horizontal"},U.createElement(we,{defaultSize:50,minSize:30,style:Oe},U.createElement(Qe,{p:10,pt:0,h:"100%",direction:"column",sx:No},U.createElement(Ye,null))),U.createElement(ye,null),U.createElement(we,{defaultSize:50,minSize:30,style:Oe},U.createElement(Qe,{p:10,h:"100%",direction:"column",pos:"relative"},U.createElement(k,null)))));import*as V from"react";import{Anchor: xo,Box: ho,Flex: Lo,Text: $}from"@mantine/core";import{IconAlertCircle: Ho}from"@tabler/icons";import{ErrorBoundary: vo}from"react-error-boundary";var qe={display:"flex",alignItems:"center"},Xo=({error:e})=>{Error?.stackTraceLimit&&(Error.stackTraceLimit=5),Error?.captureStackTrace?.(e);let t=c("red.8","red.5");return V.createElement(Lo,{role:"alert",justify:"center",align:"center",h:"90%",sx:{overflow:"scroll"},"data-testid":"jotai-devtools-error-boundary"},V.createElement(ho,{w:"100%",maw:"80%",mah:"80%"},V.createElement($,{size:"md",fw:"500",color:t,sx:qe,mb:5},V.createElement($,{mr:5,sx:qe},V.createElement(Ho,{size:16})),"Uh-oh, something went wrong."),V.createElement($,{size:"sm",color:t,mb:"sm"},"If you believe this to be a bug, please file an issue on"," ",V.createElement(xo,{href:"https://github.com/jotaijs/jotai-devtools/issues",color:t,td:"underline",target:"_blank",rel:"noreferrer noopener"},"Jotai DevTool's GitHub repo")," ","with a minimal reproduction and the following error"),V.createElement(D,{language:"javascript"},e.stack?.toString()||e.message)))},ke=({children:e})=>V.createElement(vo,{FallbackComponent:Xo},e);import*as b from"react";import{ActionIcon: Do,Badge: Wo,Box: Ko,Flex: $e,Group: Eo,Title: Zo}from"@mantine/core";import{IconMinus: jo}from"@tabler/icons";import{useSetAtom: Fo}from"jotai/react";import _ from"react";import{ActionIcon: go,useMantineColorScheme: Po}from"@mantine/core";import{IconMoonStars: Ao,IconSun: Bo}from"@tabler/icons";var Ce=()=>{let{colorScheme:e,toggleColorScheme:t}=Po(),o=e==="dark";return _.createElement(go,{variant:"filled",color:o?"gray":"dark",onClick:()=>t(),title:"Toggle color scheme"},o?_.createElement(Bo,{size:16}):_.createElement(Ao,{size:16}))};var Io={position:"sticky",top:0,zIndex:1,width:"100%"},Yo={userSelect:"none"},ee=b.memo(()=>{let e=Fo(v,s());return b.createElement(Ko,{sx:Io},b.createElement($e,{justify:"space-between",align:"center",p:10},b.createElement(Eo,{mr:10},b.createElement(Zo,{size:"h4",sx:Yo},"\u{1F47B}\xA0J\u014Dtai DevTools"),b.createElement(Wo,{color:"orange",size:"xs"},"Alpha")),b.createElement($e,{align:"center"},b.createElement(Ce,null),b.createElement(Do,{ml:10,title:"Minimize panel",radius:"md",onClick:()=>e(!1)},b.createElement(jo,{size:16})))))});ee.displayName="Header";import*as _e from"react";import{Box: Qo}from"@mantine/core";import{useSetAtom: wo}from"jotai/react";var Oo={width:"100%",height:5,cursor:"row-resize",zIndex:2,position:"absolute",top:-2},et=({shellRef:e})=>{let t=wo(g,s());return _e.createElement(Qo,{sx:Oo,onMouseDown:r=>{let p=r.clientY,{height:f=500}=e?.current?.getBoundingClientRect()||{},d=i=>{i.preventDefault();let u=f+p-i.clientY;t(M=>({...M,isDragging:!0,height:Math.max(u,h.minHeight)}))},n=()=>{t(i=>({...i,isDragging:!1})),document.removeEventListener("mousemove",d,!1),document.removeEventListener("mouseUp",n,!1)};document.addEventListener("mousemove",d,!1),document.addEventListener("mouseup",n,!1)},"data-testid":"shell-resize-bar"})};import*as H from"react";import{Tabs: tt}from"@mantine/core";import{IconLayoutList: Go}from"@tabler/icons";var te=H.memo(()=>H.createElement(tt.List,null,H.createElement(tt.Tab,{value:"atom-viewer",icon:H.createElement(Go,{size:14})},"Atom Viewer")));te.displayName="TabsHeader";var ot=e=>({position:"fixed",left:0,bottom:0,width:"calc(100% - 20px)",borderColor:e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3],borderWidth:1,borderStyle:"solid",borderRadius:"8px",background:e.colorScheme==="dark"?e.colors.dark[7]:e.white,display:"flex",flexDirection:"column",zIndex:99999});var st=({store:e})=>{let t=Te();rt(()=>{t(e)},[t,e]);let o=qo(null),{height:r}=ko(g,s());return rt(()=>(document.body.style.paddingBottom=r+"px",()=>{document.body.style.paddingBottom="0px"}),[r]),x.createElement(nt,{keepMounted:!1,variant:"default",defaultValue:"atom-viewer",m:10,sx:ot,h:r,mah:h.maxHeight,ref:o,className:"jotai-devtools-shell","data-testid":"jotai-devtools-shell"},x.createElement(et,{shellRef:o}),x.createElement(ee,null),x.createElement(ke,null,x.createElement(te,null),x.createElement(nt.Panel,{value:"atom-viewer",h:"100%",sx:{overflow:"hidden",borderBottomLeftRadius:"7px",borderBottomRightRadius:"7px"}},x.createElement(Ge,null))))};var er=()=>({position:"fixed",left:10,bottom:10,borderRadius:"50%",width:"4rem",height:"4rem",zIndex:99999,img:{height:"2rem"}}),tr=y.forwardRef((e,t)=>{let o=_o(v,s());return y.createElement(Co,{variant:"filled",color:c("dark","gray.3"),onClick:()=>o(!0),sx:er,ref:t,title:"Open Jotai Devtools",className:"jotai-devtools-trigger-button"},y.createElement("img",{src:pe,alt:"Jotai Mascot"}))}),mt=({isInitialOpen:e=!1,store:t})=>{let[o,r]=$o(v,s());return y.useEffect(()=>{typeof o!="boolean"&&r(e)},[]),y.createElement(y.Fragment,null,o?y.createElement(st,{store:t}):y.createElement(tr,null))};import{css: ir} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  type: 'SyntaxError'
}
info  - Collecting page data .%