{"_id":"codelift","_rev":"351-1203dc238b44ea643bdf7a8328e1ff3d","name":"codelift","dist-tags":{"latest":"1.0.14","canary":"1.0.15-canary.394.652cc97.0"},"versions":{"0.1.1":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.1","scripts":{"dev":"next dev","build":"next build","start":"next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"9.1.4","open":"^7.0.0","react":"16.12.0","react-dom":"16.12.0","typescript":"^3.7.2","urql":"^1.6.3"},"_id":"codelift@0.1.1","dist":{"shasum":"f36865a229ec04956da010bd8698b3379d98c3c5","integrity":"sha512-8cQLuoCk2m1s0cOv/U51ZaXHiVauyvUHCDnsCC1HUCAS1mrqymEdu6nreKEHSekmovZriVnyR6S+P/FwRUvUXQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.1.tgz","fileCount":5,"unpackedSize":2113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4K46CRA9TVsSAnZWagAA4osP/j+rpKeLPajSLYJ6KH88\napgKo26p2GtBa15/BUAimvEnoCMl0bd44SMRneBVL3wbM4DltDaV3Me3anoZ\ns6C//wNa9XQ5l5l0LDDJdKNg0qW1le5sobZLmNL/7iklGm0pZlwjfSMJa3B7\nvs+rLUKLVuYMcmLNaYQABy/7fZjTkmFBnv4HvJ/ywgCH3IuOyKk5CVAtPaev\nIQGak8DhbKILiFvU1ulAp18osvy/djN1m1nmffGpmwhioHDYdngU6EvrI8Ps\nkBVOSt6LjxjkXdjDRaZGyPJ91SagHl2yWcMWPQi7nVc1566YmK+6FGPVF2aA\neGHjuS6ftg/zEmSpG+gwxf6gxpMyt51omL1l0E9G/XbtYjPUJnvqB1T8p/2G\nvM7K6qJdgdT+OjimTlag5LIoXgrOCcVkXQtdbHelTYUFnqJJx9/8wjlVU0vg\nwcS+vw7kEjRCCyur5XTKU5EXC24T359b/HiVR+XsWZu029M8Ow91llDvRJ/n\nCaSnQxxP+LHM76hM3z9WnDpUIwLmyEM1EQvhUKIF5UQG2GaGN/JSxHpqQFkZ\nrWaKMoX2HGt1MYrtCLCuoCCL1SuY7cDVbEG8Z+qnYckYK8uBWkjUjTYYa9H2\nnZ7DsaCM0Shtx4gpQtxJpL43m3WpA7Y1A8B92fZeHqjBsZ1rB6kKCLWg+BbU\nPvFh\r\n=qFm6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ6QdihlXP8RkQ6Kn3K1Y8lWnRk/7m8e0SASdnzTErUgIhANlQnCcJzDV42nARS+2LsdH/U7pFZk+Xh/Ed2twQwl5m"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.1_1575005754194_0.14930010409019956"},"_hasShrinkwrap":false},"0.1.2":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.2","scripts":{"dev":"next dev","build":"next build","start":"next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"9.1.4","open":"^7.0.0","react":"16.12.0","react-dom":"16.12.0","typescript":"^3.7.2","urql":"^1.6.3"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.2","dist":{"shasum":"9f600b42e06ab9665d69e1623f1d128036746baa","integrity":"sha512-gleJqi22zwhI7ryqYx8rYX3B9JwQKEdz/uwo2SxSKHrpKiImUphhVHq7PNwJ3QOvn0NbIIBYaWgEBre9InCyTQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.2.tgz","fileCount":6,"unpackedSize":2113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4K7dCRA9TVsSAnZWagAAUnwP/jolTRT2kI/IBtD083KO\n8pttB3ltaOqV3MHM4DGLm1b9T3E5+tG5TBhHLN9YN878sv0yBj/ExVhd5ofp\n6YAZglEZj4lnECcucGKp3eckSX9nIYU0ZnAWAU7IUX27OhEl1IV+0tXGt1ni\nUvi7EITYbnP5uBdpsZzp/XlU0FEVr1Qxw3HJjBfNWm6HiTwiEISHmG7c2Gfg\niEn7zHr3OG2aDIrdrPd1lB2rArkq+zkVlQhPul8Nb4zCWgUmdCa7gFrsoMnH\n+VJHjT/fUcbM7T7tLpDuLkLOPD0chbr2ifwtTZGKpiJQPgMqzHd4rXBQXGoh\nMZ6DHSUaZXRcC4rVMeoBh/6frXPtTIlXOGC6KhrDPx9iMtgO8iNynEI/zP9m\nfHeGTFvgXpOuSuBGBkbnDoVRg57LBVSrwgwApSV5UJ29AyTzD02EGVXsrBpA\nLdZkco4TW8SFl7tZdA2OjKOcVE/scYKGMWKgcPTY2e8oktao6ntypuQGFNMi\ns+d6/sCm9dJUEznnfBzmo5kwWSbG+SDzYzT6HGnBixMV4GuzfXa1r22Y+4pu\ndl1NmQfZv3CIAqK4kO6Zz9PxM80E3AvWhnfK0MGrkFCMGtPBcjaDaHP06F0z\nY6/In/NTfn0N1uRfGi+j5l9syaP7O0yP3lX1girsKRds9SAtCjekPJzIQIB4\nXDHY\r\n=jdCv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF917SsZk3IWsUhRHQZUnS9nzLwT6ipBJz2K2tczlL6OAiBSETqlawYpgVKhqwnv73evbXzbQHyxkfddInWJTFUZow=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.2_1575005917263_0.5012783267456371"},"_hasShrinkwrap":false},"0.1.3":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.3","scripts":{"dev":"next dev","build":"next build","start":"next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.3","dist":{"shasum":"8c1b7e5440393bd5bcfa46196a51d2c0583b9b58","integrity":"sha512-8yMIg5nwKrz04lCQ5QmbvlwNT/b5fkC/diEo+AwlSC55iDFLEZknlW0iJ60YDtpa9cSxSDPmEm/XJcidVqcl2Q==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.3.tgz","fileCount":8,"unpackedSize":2435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4LIaCRA9TVsSAnZWagAAR20P/2PvEo1UyMVDRm8Ct4ni\nLWSdbKuEV9ZCM3crt4Wqs418FrZ1KkwjAx5yw4QT2JTJhujWRNtK8/RVOJre\nqC64VHmTHd6l74YD0QVLlrdjlKtnjcW2B9uLW+/gHp7qDYQW2yPbZqfdffnl\nQRF2gB/fXmNm2pRjor5aeLejx3014/7esSyRZuaLsoWOneZtGxDJgRlGptbA\ngMmDU3d4rjE+P4Dci9ugl3rSbgxQjV4ICcEs3jRe4JXk49olj4CZTRtrzC/D\n2Pm39kAcRJTdisWHC0GxYYctUpgBwMx54vT3jETWOfTAXUTnlsUVe0LTXZDR\n8E/oBeW/Y1lDcoEeGzVhvqTJcGw/26u5/fm/HPfqlsv2dEqw5HtYKiiF+Fu8\nxiqhoFoQaXSLlpVkkfE+E10uDrs0wzA9sx+Ckfi+s2TGzGQlyg8t0JX43+aA\nMuMOuVeW/rad7AyyNBDEwWEIPdE8T7W5htBFctscn9srXeKI0QUS9XEuW+E5\nsXCwZgXaikIHFyieUXe4Mb0LSauheNnqiq5VbZrqYezMRZJwDGHOo7i8SbHz\npVeVLHBnfAgG8MHpfdTn5ykP05v8i/S/MUnqdp6N6FovMPu14sSzPwf2kbXa\njxreWpDZq9JocfZqOcWU7R5YNEmIo+kBVJqkdDWYrzvfnUmhdhjxYMl4n12j\noSNy\r\n=9w1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEplehBf7F1wy6BAWmolbNQqwP2e2n3F+fmVAX6V8+zjAiEAkI5oKt4/arjZhP7mX0SPkAmx0b2triQa0iXq1J8sCwk="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.3_1575006746541_0.8408352220764208"},"_hasShrinkwrap":false},"0.1.4":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.4","scripts":{"dev":"next dev","build":"next build","start":"next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.4","dist":{"shasum":"d0d328d042eeb38c9f7141e70071284ad1bde230","integrity":"sha512-y9g6wiEMtkgSOi/auK8KB7/3rSftligQbIibc2yfRPlOqlVgFtmwAY1eD5oWzvLJQwGDq0xCqjGRhPsXOT4ftw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.4.tgz","fileCount":279,"unpackedSize":19679912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4LKjCRA9TVsSAnZWagAAYdsP/iFzayWF1325l72bL02/\nP0MgSw6lIyOiXX/jul3U4X/xwMZ4olAE1Jsy10czEys12G7JykdsZ9H1lasx\ngJvaCrAfuG0w2EgcacI92SyUa0H/wmUxxANtHgUi3ddeBa+UxmYsiU5NuyNt\nSlmq3ITQdnQ5unDaVk1st821GjzK5ERQKbkAuHlspySOiFDB2sV8HJzxTKm9\nGoyVFXv8niTLHq1qHCeKx3/B0/MV7dBd66ucBmvNg8aGLjObGaFQ80MpuIWS\nHkr42ClQKK5+wgS7doNhUPaz/puf6i8bp8ohfC4kPIeOwr1modwolR8JnsJY\nf+iXqoYY6bIpd2DHfn8hiBqgrQGNF/JyTLlwM3dCZ4SC+bJGJocysZmzZNMi\nvOoIl46DMBjBXstRbaAyADuq6efpJjSpIYTeBGHmkKPTxETMlEDibPuNg+jJ\n33d56kbBWONuL7Zvi6LoXEbrnOVtcHYrFamKrz5xGpZEJxyM7N11mEBIQQDx\nTo2uJ/ydVS5p4rDZg5vHI4nGlTs2T04OFeh9o8NU4wxUsI18lQifsolDwl4j\nC6iYPq0vUaG7dhHSVA7e6GC7yyB12Ex4GVtlm7XadqD9czIUmbE6Yddwxb/P\nuhiXQVysxGU7QpDkK7wzzupecTwSFA9LG5w4ter/Gk2l+yPVxMBdsEFCcXmg\nQ3MY\r\n=V1kO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYuehxrY+lDwc3wWPXVUx0RinJIfzoeBXbmw2gqYf5aAiEAlNMt88xOI4mYtCERhvDs6ZPcEQmnhQJZ2yK5pLoD43k="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.4_1575006883211_0.15654265869115846"},"_hasShrinkwrap":false},"0.1.5":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.5","scripts":{"dev":"next dev","build":"next build","start":"next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.5","dist":{"shasum":"90dd0262e9ecdcfd5e73b72a2b14b8d63e77f8a6","integrity":"sha512-CrYrTXAUL3c6KuBw4kTqVCFwRPA7QKuNexN0sO8UEsbWvXRoFUMIHjUN/IyMXVG1vlHQZUnVSHZPCu0iW/LPmw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.5.tgz","fileCount":291,"unpackedSize":19840248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4LQ8CRA9TVsSAnZWagAAsnYP/AxNu6qmwdRhaSMehAbO\nFcSfZ5cP3+GjPn0phzGIFNzdkYDRIR8NgVESQ8ejymVO2G8LUZjBKNIHgVQ/\ns37bS0C1ElOD7WzFslA6LFD3n8eG8QSvuvSBgohlMApf+h2C4rbwWS+1B0K7\nd+OhHNA9tu85vNNA8fZSm7BrpVbdmRHVh8hg1ti/RiiwMRIyfT4LRgn8SCf6\necI10Xugs7tXYKt+9cwNIN0SSKVbjcEGBT02xn5EA7hIMMp0YRofIM4unb8W\nyBeZYrz72977w8QxKf3MTYsLXJ/sCKvDj7k3F3ayGgM1H99AfT+LuvHn/fcL\nqU7EOEXSyD1azrRGBf+kjanyXgUv1OxShjGoNOm64oldGwd5X109wS9sgy1H\nf0iGMcumuyJIMjASHPloLgmKBY0Ki/DuGy4i9RyyzbptpiiDdGmXodkmwdqk\nDq0HeKJeyxLend0Zp/cgv6umkppxk+UMNLugkX+TESkH13l7ulidAW7I5XIo\nAZFyXebkhufwPr/+FNP4fsOyAQPS2ni/aHoFrnS2wkJf95P5C9utIWI4uEDU\nQVUAuBBkr1V5GklA6OBI7yF1utcuJz2rwmPbtS/eVS71TgEncnZuM4NTSkr5\nsSHufiIeK3sLJBZc3HLSkQjAPzbryLztzwNG6VsXQIm5icpIarI9aPy9SDWp\nBUiM\r\n=HzV/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlNqMg47HbqVKlyTuFixxbu+ynqxLRQzBF5dunVAZ2LAIhAJOiWQqwZA4fahxrUAq2yYmuDL3Y2MWxULK1GgVWi5y0"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.5_1575007292136_0.14080552680326952"},"_hasShrinkwrap":false},"0.1.6":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.6","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.6","dist":{"shasum":"f09896115f40a2dfb0e285a8f34ad39578b8e4c7","integrity":"sha512-RLwyYMjfBI/Kbgav9F4NnoWN/liow2/DEmX4WmadqcOyYh6O8lgFKA5x6h0hSDB6lAULximOM2u2NLYeg/+/pQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.6.tgz","fileCount":255,"unpackedSize":19309898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4LbFCRA9TVsSAnZWagAAmVIP/R+RCU6QPFFOusJDGhgA\nEH7AdmW52+DY3IfGpQyIKoLWGLru7QIMxDPtvhAFV5rzPvbfLrbPjxnLXaX4\nMnlKwapukCQv3xwrLR1xlzP4I8Z/rCBs00Kwx36w0p+xuebdtzQgQfUxkl9m\nrBDLqM/2M5u1dn40vIaLLgl42Jf1gD+6nCwI9jSmobLmhZCroOouulXNZdNa\ntzLRzLhc2JlQzx3RLfS2DmwODt6ghAFLxUNe+IEsmnFrpQK2cAgAAm0UmGkH\n/AxhyjXJdGPn4YmLw/ba3AMjtvPVNZuv1qqv6QdC8bdl55imrHPgbD2Jd2av\niiUSb15ngB01KNgUm2SgHtIK6zL28g/uRIbM+1mAjCgBICcHK4xI7bxVYxS3\nCyJ2BnUq2K0VjyyCSegOp/72Yd6PbKQjjMb2icb337n+7HBoIhvOFxkii+11\nFafDtl2DUnkgdvYFeBGdKCM1Ze88szw+kHOFPyuHkh5iwpgDipcKjL1SHwTg\nrUzd8CIkIi1uOWR0tz6H9/EhyxCLe7cpEp7W7G3qCn5nTPZxSoVAhKQTJNyN\nyBJ8NnJDO5RjEnanUN4ackEzCPSeA4S3oe1hSfEsbG+OXrDsz3SHMCUkCYHQ\ne0YohmyFkPT14QJciRkUtJBAGv+aXgyWF6MhjjIYJtLcV9S0Ds7d3TFp8ivH\nmlac\r\n=CXAs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0blIYUT8P5zHVTf1v2PBibjRCZ9u4DQxWLimNasP9FQIhALsy6lEm7CIdNSg56r0vB1Qurfer25CLJvlOMDmco8wM"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.6_1575007940380_0.2571819778472535"},"_hasShrinkwrap":false},"0.1.7":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.7","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.7","dist":{"shasum":"21d5768fce149aee61f3bb7444193aa3a2811d51","integrity":"sha512-xibTkruCgKZ6BNk15mWDZQEbAs+yQ016Iuvu4OdE5X/meFOWW6J1YBsQe/Z1+pKzZq8wUqn4IOe5Q7sfy5oX6g==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.7.tgz","fileCount":252,"unpackedSize":19275121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5FtGCRA9TVsSAnZWagAANGcP/2F5YPfUEoms1kgo/Jnc\nDC+c1f2r1aQmhWvxZ5soLrs4IKnoR5HpfA+s/9Sr1mV37AyjCG3fK2N1KFfc\nUKiHrVFXBFyIQfyv1lzl5+NQoskk+KF36WkRo7XlXhdyW3ODrvwzUxVYmlJ8\nWjuydjNqwMQPCyyInDzq58NHzrS2KIHM37d4yO9x1M5JElGxDSyaXyue9guS\nxyHKxQWKL1FyPZt5RMjVa1AEX4iepQEKoIUMXm76p4tK2ZMMr9BG4QeP7Wdk\nESPW9xJ1Gd8lqM0g+pifDpIZV+4nLzfSo7JeH4V2NyabFJ1WPEg4rMaK7Nbl\nd/5emtRB4iWf2La++2I6x4IDsxPRpewO4Z5hJIQaTvUbMsjBf/UipJSWd89V\nvdnMXXsYnPyS4IifxRXqkO19h/B+hCsQEPkZXyV/euCSA/V940DEwsjsq1SQ\npQQulo1nKPtrJ73OH93inT8IjlYETH8UvVP5XjnE1ff684ZAcWguK0PJrG8H\n7OD6qwEpg3x6EDQCiY9SciuTwtuHlifJZtQ8z312j6aFB2uNR2+RFqrNySDw\nb3MhpJruOqgfLrn3Z4LKnRXrUbSRtzdIBOmV7ZJ+9Zu/9vp0qdHnz3qMHLxx\nnnIMeAYo633Ucprmx6uGBMMghdIsp/lm/ThR3v/ZXwfukS6rdgmtcUCwZyYc\nMJih\r\n=peuq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvCuqPJgCI/hIiVILLUeOC2/SuQHmc9pxnkMJuE9QowAiEAvlfkOS5OjzJzvxUwLIm5yl58crTspTkzyK1Be+pGBdU="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.7_1575246661739_0.6084670904086622"},"_hasShrinkwrap":false},"0.1.8":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.8","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.8","dist":{"shasum":"d3122fa24bd1aa995aaecebe84df0bf9530bcdb6","integrity":"sha512-EIlxpI3ct4FxL3BFAeZXZFTaf+Un5JYdwmBFXd24Q4Ku8FGjtZRc86QRysT3R8NqEetqizLSKgsGhqK3UsBW2g==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.8.tgz","fileCount":357,"unpackedSize":14382043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5HHSCRA9TVsSAnZWagAAtQoQAIuqYcYxWNQxTi3hE1Rl\nVAVLjISyayGp/VBem9qa0JBlAUmPl+XjZZypzd9ABEwiG48FSWPjm8lUgfyC\n/2uwWfAcOwSnm38QMlsuqMdxm8OvHOK7uikOdt1ecHCiEH7lg9AIBtvw+hcS\nEUs0m4O9M7tUtDZ67NFNSSiavwIJ71zXJcIib4HlPIK8MtQNgFngurPw/lEW\nLQS5A5OuLT0Kis5ow7KIg4lnejCYpHiub72z6b3S003wQmOldK2ibr87yXen\nl2Cyoj9MCfg2yHaAUC8GxU+XWPhA5HpWN/UrOzg+LOv9BCKjINAQIlDBiSkT\nP1kkvU0L5jgtN7fVm8s3bfZs+gdvEp0YZDwOQ8ij11WMv0Rl24tdv423vCRu\nepOgHjidRxvMT0Tqr4aDRRiVK3LPihAxEpPjXsrclshW9gD/MUdJH5iD+RkW\nNcB7livHYcZ2zKsUqkd4KlY04tvhqU6ja1d30aRV5H3iHmQ5dRosaDfr5fCE\nqNH0UfcdpnHiv7mVLKJ8p077Kn1Q39UcDR5XEKroKEyiYii1cAZc1V01xfCP\nJ1+ipKHrxz5EVc8vzpbHhmo7rIOgBmyYvzNGw6JEwKmVU6GCqRDl4R9VWyoy\n7tzhZTbBgxSPFK5rhqmRrAHlOVE40bqgujCtKwZ6HtEolxYhfGJOWZY81jna\nUFmW\r\n=Xzol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICL9za5KENV7CXjU16KEQ2+0YUy+IT36zaLmxWWpgcm6AiEAg0sbgO3gvbBpeuMw4L2YcQwVmePqFGXYyUMCb/i7YCc="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.8_1575252433434_0.569082153277132"},"_hasShrinkwrap":false},"0.1.9":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.9","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.9","dist":{"shasum":"77a19edf2abddd0648efdaf7e4ba5b65f573fefb","integrity":"sha512-kgIybSFtsKw8pdxjBQHpgb3mFb0wVk1SeaBO99QYd8GYhJNE7a+jfjukoQ1G8L0QEtdbT0h2Z2jsMslEtPTdow==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.9.tgz","fileCount":389,"unpackedSize":22903819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5HYHCRA9TVsSAnZWagAAAGYP+gIvp+uXPkh6GZrY0D7o\nS5Gpbyo4pagihu6yPTlOTsrMhjXQQMsZTvnvy11f+PbiPjebAgVTUFXVLMmO\n12RVCbxh85OcMf4d1U5feY2ykxU0kJHQigbaoZvqY8I0Ikhjl/C9TKfL376M\ngSZXsVdU8FT16qB8BibftjJPb+mScSwv5j9px253t8g7GMTqq/raxGjDzpOY\nFk+QfKmLHSx31VhnvIYysPWOwwBNinI8Qri3JT5+pFRG8E9vrUnBJbreoDkV\ndwjf4/oNyW9aVdE5P3XaGC16nV2T3J3NhjFVp1pXvF3m8PDZQD2iIPJa2D0+\nzEk5YN9iThLaTh0Ehms5UcjQyWLYZbh/pYEQMP5jU0WdwFCMM7gWkZXYJE7+\nt6BGPXjkwU3jFH+yvOvRY3bzWCb2xfgdIXZIepMONjyDDy3z8qy9RXY6prdQ\niE61SpKHeVGmiBxFMIbxIqXyiD6onsJ/iwHvdR2n4vSaSR8hFwi48uI6gGBw\n2GS4si42XYx5Xgq/u+ttECmVFlpayKZxKeeP8HitENwUAIkloL+cnjTOwa9g\n05EJY9asXMpMdAbzTUznaLyStqVMB0qctBw0BTFv93wgIh41VSItuVOw+eZP\n6qyRF+qcugfhGay61SXYZwJ9VQnTBvdnxrVNRubKHuvi3zgfq7XHRWE5frrJ\n50Dr\r\n=SZ0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrilVvl0osT3hZefYchXJyu+FIQpBjJ2v9lNlDfaFaugIgfKJftH/XeQA7eQJwe6qswuVwCzis2m+6YXTRtnb3awM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.9_1575253510955_0.40234419111274033"},"_hasShrinkwrap":false},"0.1.10":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.10","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.10","dist":{"shasum":"824589bcc675ad5cc374b606d4642fe9d5385ef8","integrity":"sha512-dniilp5aFPJ58J/vgfjy2cY9+3OPWwktOU2yZneDeNFB9Wx/NBss694aXLtZF8K2PhY1xyoH6FTkQveeMi68UA==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.10.tgz","fileCount":401,"unpackedSize":23062888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5HlCCRA9TVsSAnZWagAAAZ4P/A/QuAfKRisSegGSSkpw\n5Hv13+lGNxVDJzQG+8Z5yr1/V73oYAazH4opmZ96cUHbOQVU2imCB+RgKKYg\nFgPxFZsFwKg/GyhNanFX4ua2vSjIr3P9XJmxArkVJxfzZFYyDNeBDJaKMpvH\nDIaGiuEVBukR2wcGk4I380LSwW+4sHd0eFKAgDbkHgt8/OTJZOaeC8wevEEh\nnGpiF1KJmtn4ZNh7i2J8D5lblLIP8cIaeeNhzyV60lopJLchAtdEDGsmo7AL\nfQlhpItCWzd01ryga8geNqk4qyEOYoQWlQd2ntdBpuRo8b/FbUwSOAyTrE+F\nM8JxIz7L2ah7LcjI2ENBlXgUaLYNcxDWz+cFRM4Kv10rw6QcSnV8H38BfwkC\n2D1JgMaQeJDZPFbPHOIQaADAjx74h9Kb9wickqedg+B03DYZB+dT1teynHY3\n1+QtIQ8ZCFRJgT+0NGQqoyfnfDewbwJhDDqT8PA5Si1H6riNVr12pm5Imwsr\nM3mCrhMUFfzRow/e/duMU98EUC3JsGjDLRDPEW38VQr8r5j8yejp23bZv69L\neFM/cDKNdMt6JosJgKS9i2avicfqKxiej8oGjM+vCSaJ3IKbKOBZ/hN4oAPb\nodgVXd/O4cQqvgJCuuWwJ4JSyZrWEQu7h5z2r2z6cLPY6oDLLZNJCHaNanJo\nqEuw\r\n=yRJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm3m65kVNweMIBm3mNWFRNDjk3AUYP/ppvzjISntAkkAIhALymI+fhMZmLe0Z7Xl51Gq2P2pDboRtD2jDtEycUvjMc"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.10_1575254337724_0.3471266518893761"},"_hasShrinkwrap":false},"0.1.11":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.11","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.11","dist":{"shasum":"a59ef3bbe25255a38f7f75319bc5cb30195d55ac","integrity":"sha512-2gkJLbHn9zThJVNX+45vkq8ZRUjbcGBQoo+i31dsZe65Q0DcL7tCHT1iVUN4fgTi2OkgjHwZjFgBBJbi1+6fjA==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.11.tgz","fileCount":252,"unpackedSize":19380848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5HwqCRA9TVsSAnZWagAADVAQAJN2L7Jl5Uq4sWtYxcZ2\nItWd1iVjVbTfrfIl7dWV+1qSrwcytK1xjHarNh5RQOrrxkQAd5B9b1K2tzj1\nCQZ1W2zgh1GlI72Px/HSzlZIolxeCX8I8f60bN+ChcOpTM0mIjXIa3QT2ljz\ng7Rn//5alDr9SQP5dQWCYHjggowRK9L6ZGJONRFxWJBaeMBx2AE1Yb6zowAV\nn1MoqhhQ/fIIgWkRPVGt/x/qn30gIWTR1vF90ujRnP0El0NLwKOAN2nRpuEg\n2z/2kROXOfIAyUUZkUJmfjuP4bkz2jg08gf6YLFgYQX2lStWe7JuPqW8tN9N\nxdXkPc5Qr1jszfl4NPhH2fnPzJQ8Uo/lGKii6FOSb1WVyvqoxZty3lpfWED4\nLQZPkw5D8yFvdlxTVGM+OH749a8cGGlozoqjIjNdAoVWs/yV762ZtseUiUpB\nlcDavRIpbI99YuKjDrIsEWlNWo+MKlTL3uvIlvMjhYYCUdpM6TFxZ5tDlkgL\nalDp1k8doFp/XvB/vlQSmE8Rv8WY0yp3cQ/RHIfXJqqIbCcFUraIXpGc5xwe\nU59TnFWyVM5Dg3HngzL6zk0b9M1wX0jn+RkOQCCvHl4UnZd5I2BHF+wRR/Fa\n0oPvrdiwCJ2Dc0uLexzHYVcsUbnrlez9dEJTV+tYauYRrc+nWnssM4xCLFBt\nswBw\r\n=MKUS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH+NBRIqLOVv/aedbeFrA6kUHyhsHQCc76bIMGEBvKnQIgJHUoZqz/MunQSdE/hKSv0819umFaZKqc1yNECxA1KIE="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.11_1575255082408_0.8995389245745309"},"_hasShrinkwrap":false},"0.1.12":{"name":"codelift","bin":{"codelift":"./dist/index.js"},"version":"0.1.12","scripts":{"dev":"next dev","prebuild":"rimraf .next dist","build":"run-p --print-label build:*","build:bin":"ncc build ./bin/codelift.js -o dist","build:next":"next build","postbuild":"mv .next dist","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@zeit/ncc":"^0.20.5","npm-run-all":"^4.1.5","rimraf":"^3.0.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.12","dist":{"shasum":"3ef89ea4fbb216981f5580d8180c811ea74f21e3","integrity":"sha512-i9xYVYdzGj51C3osGPNMw8J7Odivrr923NfLhSN/nZnss+gLtMInRli3RTaQbj8r8EUxYsAuQYPTzJ4Lr8sByw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.12.tgz","fileCount":8,"unpackedSize":3682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd50UrCRA9TVsSAnZWagAAEO4P/0XjlyKfzLlPtf3is9mx\n7/PgYcTbEW/RWrfDkryKum8mqACgXBv0jNLeXVjmoBAsiIQHhrRO0CspR8Bx\nLnjtq6L/Dx2n5WtR1DtkiPl4XZAH100LnPZ3qLAtN8OjAkZ2R2ZIZHthm2cK\nox5FPzgufq8pMwx7L5OxzGWWEKH6I6bMLS7kLIRLgSAV6mQUC0Yb0O4fhFwo\nbSuT35OQjstFjY57apoUzxE8qB+EzY7rgrXKLYTtmdn3MpMFQTkiI6Z5BDlM\n0uQI7GWpSNnFHyAnbBYqyYaKsx236sTSNEUwyxmVNBWHVM7WRyAxaCFB/ICb\nTuZSZpkIIDJgzCkPRXCifS75i7cOD4B8w9bljWbCaagaB/3XwIKZx6t7pT4u\nEklgSw4o0z9Ig+Uis+yDYus7zKPmYKsxJSU10h74ipHBXcZyGYo3t+34ziNe\nEVKYyTmORKJLDf15dVusv2QNDus89kOgaYEL4WPMDBfZOHda2+wDASntQ+ql\nCUI/Ccpo+TAJLJVSRP0TDhiU4WePr2OEX08gOREt05Lon2b3VkJA45RO7P3q\n1URU3tHIGXtd1y8M2pECwbeOdCo6EVqFn3NlBDXt/HFNCUQrBElntoOuyzxy\nyRwQOa4TPH5syIRx4C1BLY85IOKPueIwt+Zcp4KRp/uX3I1P9sq90zQvn9ZE\nZzF6\r\n=N2Nz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0wad9oXYoq4wX2BNZU09BbKYBT0pbtGTD5tDnI41NwQIhAIALMANXvbcnZ7tlVNTfMNGgO4ubEny3cmTmjQx4Rli2"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.12_1575437611356_0.34680147853904053"},"_hasShrinkwrap":false},"0.1.13":{"name":"codelift","bin":{"codelift":"./dist/index.js"},"version":"0.1.13","scripts":{"dev":"next dev","prebuild":"rimraf .next dist","build":"run-p --print-label build:*","build:bin":"ncc build ./bin/codelift.js -o dist","build:next":"next build","postbuild":"mv .next dist","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@zeit/ncc":"^0.20.5","npm-run-all":"^4.1.5","rimraf":"^3.0.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.13","dist":{"shasum":"5561182d3068549466d50c48bcf52a6159c59afc","integrity":"sha512-L3+afoJBD7M/We1jyD/FAf+yT01yOiU4RzDQXcWR5QZexBK1+b8zZzZr3RvAl1hYj/yij8TADzuoqAfEJb/3Sg==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.13.tgz","fileCount":184,"unpackedSize":21043398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd50XUCRA9TVsSAnZWagAA9+gP+wS3rwp4AcXoPAx3YKmt\nQWoab6C3B8Kl7R/7EHid4uVVjUtJhuyjrK4WL7ECW/0MafGoadS4sZl1tG4C\nWafwQkFkxnpAU2D2vK+uAb3Fnv8soUJGi7LrwTbHOPY6qZKwpGZqNsRR85QS\nNR1TGXhluHG7co3wbAv8fDNJFwO4Don7gCIWQhrWQmRxj2bkYiOvRvglHnrW\nYeJFGuhHAkmng4cqZ/oRFvNiTWB4BHMIDKdR16VrPGiuEtsRaVnOox+3Way2\nFWTNFMv0Sq1O6ipiV+QBrexbftYtcCAynJIYY3VK8hbEwo/lVHrMQmvW7HQo\nNJr2hnZdxIELnYQgBcW3B3/lPc87RRl6EPZP4TofBoIQR0Kn5zhjNJj00lwa\n+PkmTBBeuuZ0uD8BrqDPZIT7zfoimxNx/oZzPc+R0BO/1oZJJdDZFRGFoGvr\nInE5LLADCcFORDUnd79d009WqB2Ay/EjL8NYw4X/679GLGe5IM625W94WCwO\nCkV6gKMC8sszJQ3Zod6Qt9XYrDxEwKp396s8J1PGKD/gBdefm0TvUWKplhZY\nMuGp3c6C06sGmIBLz/16V0CojenNs4xCu6M8R950cyb8jxceKLmb3YluJTtU\ne4dBffk58Gtg3EZqVUXsKpbbOxnhKjOiLqpaG8ZldfgSiPMLqm3+NBfRRUBZ\neuaC\r\n=fMCi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkOS+fVITO6eLXN91r537SfXg5v2cBxtkbpSp2BFtYBAiEA0eAq2beEH4g2elH0Wd/EOPqy6WE/Bt4LjUVUoCA6ZWQ="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.13_1575437780276_0.2682491994678431"},"_hasShrinkwrap":false},"0.1.14":{"name":"codelift","bin":{"codelift":"./dist/index.js"},"version":"0.1.14","scripts":{"dev":"next dev","prebuild":"rimraf .next dist","build":"run-p --print-label build:*","build:bin":"ncc build ./bin/codelift.js -o dist","build:next":"next build","postbuild":"mv .next dist","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^3.4.7","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@zeit/ncc":"^0.20.5","npm-run-all":"^4.1.5","rimraf":"^3.0.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.14","dist":{"shasum":"da24a088292ff09783eea3b0ce63940e948874b1","integrity":"sha512-SfpQnwycRMpyNauk3bzqR3EwJSjOkVQgqIGDk2a1j6g14uHgK4SJi6jlIQ07sPatju9nhScGnNskMbX7nXfILw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.14.tgz","fileCount":184,"unpackedSize":21043446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd50dtCRA9TVsSAnZWagAAirAP/1ua7Wg+OVxQtBxcWNhQ\nyiuAu1MIib3DUHfkQXL35JC+cW01AmIwVUhBTCwCDjjBGDwBzX3ZMKJtpl/q\nZaiSlGdall693FXITTlJ0Nf8MKSe9Fp/oH87IrCfrTncLz/wvl270SVN41Rc\nuzXR41Z5zBb5QP9RT9e0mLmZYTu+RQQtcV2tqpE7w114oS2hY/SzCJcDFAWy\nAWHC9OBz3RUuo15LXI6QAEjWR59AhxnxztXarW3dQJjY+HewI9FM9kxpcStR\n6XdpNXaF6EsTdtQyPx+gZbRGx3Lk7dN4vsy7mjmxGXRZrAjZsl65VZHYMLd2\n3SJmDNycl0ae4B6kaesWfL8CA5dtog6Wnfm83OLlTI4ggAcJbhUgf10Xn0yb\n9MR0cgL6m0W6zz0QmsIO6E9BhPOv2hIzoaCVzdZUeiSsNavy2dSQhMOYzdWD\nNIi8gTkv4aygs+UG3YHOzHNpn4AdU6UxH7tmKdkNYtZHkDD1HCyiN16ifuT8\nBq8817U8kUd2ADjmqOI90HxbXuiDT1HC8Yg8fl5Bmytfx63qCEaEmxq5Z2Y4\nvJRp4PYQzXMuKBe39JYvqiO6eM1kOGqEvmEu6ZzNR1Vr4dEWA6n3BXaLp4Nt\nPirs+OlFQuqkFcTgHWDbDS5SA3HxXoDJniF2ost/0ZR1VqW31Zl0nGoJFLPX\nRFdi\r\n=b0M1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYd7WGiZ6Szhi1XlTemrEMaWNhKlHEIRh8Dy7z90d7TAiEA9dRnHlUwXJM2vlZ9Y0c7oD5b9gM5ojkO1KIVUMBC6/A="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.14_1575438188534_0.1800155190134154"},"_hasShrinkwrap":false},"0.1.15":{"name":"codelift","bin":{"codelift":"./dist/index.js"},"version":"0.1.15","scripts":{"dev":"next dev","prebuild":"rimraf .next dist","build":"run-p --print-label build:*","build:bin":"ncc build ./bin/codelift.js -o dist","build:next":"next build","postbuild":"mv .next dist","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@zeit/ncc":"^0.20.5","npm-run-all":"^4.1.5","rimraf":"^3.0.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.15","dist":{"shasum":"45c665a2e98b0059ff24d3e43fd0bf6d5f438187","integrity":"sha512-tlYzb6xSzqZ/9oIE1sslOyyKzhGIv8aQ8PIMR0x2km4r07PHia+XhhoC9PDguFXHF/f4ocQmCbKNJxfxQGd0CQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.15.tgz","fileCount":184,"unpackedSize":21043448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd50i5CRA9TVsSAnZWagAAcK8P/1fomoJ5EJSfwbj23RpA\n1OM4BUm3tDm8OJNE2cfHxU7TF2LvxjseHuyp9wiqjWdiw9AaVmsnrFRaMhGN\nwU9wA2VIZDtiVBPv1FHS36kCoRMMWEXCKDqaddECGZ5UtC7IMR3FOlDf0YKt\nVituMbuXA+eGQaaYCuztTUh4/J1F4BriyQIZjauu5p+2O7X4hGNCce5HXQLP\n+qoCRop5qhWmI6DNfAn2mBS3CI8gzdYOuHTew8ZsYRpZzMzQIdqR704ZV+nb\nXd5ukxzPSJkskWVyDn6tUyGBnco6l8bZJI0T3TNAV8591k3/AUATv1h0m8Mc\njEs71LVvTv7QIikHfE2PRKIQHk5aDH5ekCj/Gh85Z3bWPbotYCaGS1u8JDjy\nP5ieP1dXYVGzXzKMmWh4cXaEySist6/MLKg9Acmc1Q6MpjBT4PDfG+0+1tw7\nP9YBMM6Crjuw9rbfnM/l6TnNJ+YAR00pnxc147JnitUiH/93ievYJUw3Kzfe\n+o9WrziHiA054PIlshhftxACW04NIiNfwXZiPC3REEih90FWHt5Nxrur1Wio\nUorHIT+7nwzqmlE5WNWj5nthRjT/zerRLvH8x3xz9Cr7U86mJbjygUVD30rZ\nhbB5ROOuksTt680kFqM4HN8DtKInS77imRnuDmls/J5b4X7zt/ZmPJMHSf9h\nAQLT\r\n=OhPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbniAyuKf4TTjxRgWPKZFIonLI4zFk5fqP7a7R8GZ+mAIgPS214RGrRKLWXvyS50yGXZxJhNQHCFahujmd9K9RgGo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.15_1575438521321_0.8425994612268795"},"_hasShrinkwrap":false},"0.1.16":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.16","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.16","dist":{"shasum":"b313e4e584a8e598b3dc8eb458e743d2690df12a","integrity":"sha512-5h9Eydz+jmntOdve87wI3k6i5mjtqcKLUztngS7Bp/AfUrKE+vOvPXI27rKp27lDxy9a0NUX4GDlaYp0vsfcAQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.16.tgz","fileCount":123,"unpackedSize":1723549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd50nkCRA9TVsSAnZWagAAlJQP/jIcdaIVBXLgnz8v6Nq1\nbR2eLmS1ibPbHd+Q7q4lfVHc8PuSqTAA134RAb4RqK/egBMmrGJZThUZjV37\nE4VBpVWwwK2DRS61n0QKD8oEY7mEml4r2f8Ac+IrH9WXrLv8jEVzjBnTmvKw\nv4TAyr7CWOt1xMMFSxYRRWTItCK9SR1MgjgQ1Ay+QQWLoXFkoYaiNjrNqqI2\nHnR+g/c6ZS7oIBK/k7puPYYH28Rhdih0L25nZz/EO8nrTChULmMKdEGXay3D\ni5O6j0m7J5pN/K/tk6Gkv8m/vBQhhwPWjjx8cV0JceVp65Dc2Up2vwrFXQfZ\nkM0cZ0jiSOj/R1YqJQnhSfwlx2JfKbalIO3IIn5vJPW8rkSLTsvHx6LHz4PQ\n0dAMQ+8frFhJXEkK+yNV2qlLHJA5tNwCg2zQBIJ1neONbajbdDflkLzjprn/\n0IRuH64TrHoSknGwQC15cmGh3W8YVv423NMPSG39KOdGMdB8MJXf2aHzTLrB\nnnYSprcyEURNNG2wDGLYM0tzGzkBmUZkSK2NHMlrd8r86bvp5/aqXu0MqxVi\naE4m4xPiJ1tMxl1+BKcYj4cXSGXltURnPe+pHJWQ9e5LDr+KQH7fV5catwRh\nHPk7R1evCJqdT9xWivaVHSPeau6DOjknqXh3q96zFq77+Gb5SN3yAEPSgEBs\nF1vs\r\n=Qiw7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL0+9XTtXUEelTQpwnd3iAVUItKx5avA8Fv1PhBsjP1gIhAL391oQ/HcFJkkk/PxVq+DXUMEe2zeF9bdkG3/JKN4Dr"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.16_1575438820284_0.9681446479809523"},"_hasShrinkwrap":false},"0.1.17":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.17","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.17","dist":{"shasum":"4aadeb3f8e864f8a2239dd48c779696b19ee57bb","integrity":"sha512-8w2IJ+kjwLngUIz/3i4rFHjhoSkh1dy2IRlSjY1sdhTYsvGMfwTRc2Ssnl4FyPOwesJV2b0Qhf3ah0UJdrz2Jw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.17.tgz","fileCount":255,"unpackedSize":19410294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd50zhCRA9TVsSAnZWagAAuLgP/jwV/soGl9ZwP2QBitQ8\n9MNMmj/JgLil4cFvrytHC6LrhKvayS0ndHZFiwszV5c6ReWqfiXX670uzrWK\n0WOmC/0e/x63nX+PB8r9myi9P2txJRBynN5fObZtzDmARRxVIQsGOCSVpbBM\n1EmLuVfQGH3DW1c7dURr1XbRzEjFfDptkE3RHIcexNyhvHNpfSYuTxG2svZW\n9i43NhUP5/+aEBl5GbtREPrinfXqIC3mBKJaDVxN/nnUFY6cjvq/N41Gt150\nXyoFU6SX6CALRr4mjw+yNszxYCFGd4+XDQryegwY8YhEGeaMYj5StOLa8FPP\nO4ExAh8UEiRnvcAWesR58gtbcCXWEg/PNxv2fWI9voIK0iswTyhzoGhbMCym\nvQqG6ZM+slDr/ss4cP1/FXFdvHo4erAPkLLx7i8vbWsWteATs0Xg8qBDVl8K\n3IB8SAJ8hxlaN9BIYb5xlxpTJbi4QX5F61k3vICZLs3qGX5ZY6FIsgIGq6AU\nN0PVqqy7YW4SdCF0PFc9Mpx2SsssHhKzQfO+o4/sK8Z7ubVP4Xkpzhw79uao\nxEPyFFHMvcJOg9Ywc4TBJrtF3V9xVFGuOVXZxPUYD7BU0+8aXg89pOaof5n1\nKtQXNzbknVNCOj+rrLzuxfYzw7qfVpZlXBkKXZIweHNb31gBJWkTHBKzLRrl\nblyU\r\n=DR+5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDppvcGbJ2T2jop/DSneJYj4lG4/8XW5iAxYi3Hp7gyyQIgPF11sd8Z0o/skIt0hY/07hz/MnHXY+orLRSKEpGb8Io="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.17_1575439584886_0.613075174129601"},"_hasShrinkwrap":false},"0.1.18":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.18","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.18","dist":{"shasum":"2a132bc708cc298c4abd681bba4cea3bc86bdbda","integrity":"sha512-8+W7VkrlNZGI8caWVuWfOe6HE2MA1QT+d0VhQr7PRlYwSJ0BvjGzLRJlqA+SwFjPkt883PJ0+gX7StPAAwpLRQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.18.tgz","fileCount":374,"unpackedSize":21024501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd51qpCRA9TVsSAnZWagAAXo0P/0JqmcCbWVzGqg2R+OZV\njq/reUa4GrCVxgGxh9uYgphiUETa5kBfZV7vzHHNprbYSan4EPzWdL+q3B9a\nQZgJr+ws0U7RIwtbrsUgxzfIjbinSegYTiFm2bNPvJ5Yi/0a61vyAsMef3ZN\n+DhdjTWSSddkknktC2I5jGMvuSlsstdRCfY9HNfapP4NWgJT953e3MEtKvyZ\nK8wWih3Kekxb+jNwHEBI78QZrnFRMqh0pcAHkABwRjnK99iVgW6GCmJ8gV6H\nSDHZXyNYvIcByj+qVMviLTUDn7kuyJSo9FvZ2HaY509Ml07lSwIUYUSCC59z\nje72id0Nkaau7v1pVAjp6HpLtLBUc2BWf/LpMOLQw1DkCaQrHpIYiL3kvrH2\nKIveF26tQB5JnjSdwYPZyfx0ZxrTwaNPKFERwdi9NDafHS2xudgRYhRLBjfO\nMD3bWUsRZ6cTYuVq3yrLTGACbFR28MwwG3wWfXQpLpyukEpXOsFvzGZu8cvf\n2lIfW1iMc0ekP1wAwiaqOiSWGnaEmL4yrhLQxWM7rK7q40tdz0fjbgyMn2ZL\n3Vkis4bVDixecXKYbd0MvPwj6uMuhBf+4B7bA2ZhsFAqGQInn1fftSdTJmdI\novmoUqeFe/ybUp4uHaZCtzjmIN0rNImXX6f5xnAWgPgYTxOnvfeshvT66g3G\nd49j\r\n=wjmb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqM8Pa191fLSxVGAerCTN2TrSl5Muod7vncQYjrH9B+AiEA8+lV4JZ64P2i9//UCFFqKxwWsO2U8wj2GoFmifrsJLk="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.18_1575443113134_0.801615239853583"},"_hasShrinkwrap":false},"0.1.19":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.19","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.19","dist":{"shasum":"c8368187852732a86b7180ab4286b4bd15bfe0dc","integrity":"sha512-76DaQ0FRTtY2vTv6bvyMQij9E4riDbjJE40glzUESFgqhvghJd3M7vJZe0RCkfj63807BVpZtIEk8tD2Il2ezg==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.19.tgz","fileCount":289,"unpackedSize":19832229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd52KKCRA9TVsSAnZWagAAV7oP/jUwGHYHfok27s5msu8q\nz5a9msMwMtY8bRZvn30vM9xiVblLEL8u/4Xbv6kqr+uwXAj1VnbCj1l7VZ82\n8KW9733M7unjMP/3QRPMKUw5Bytiv9KUinmlO7WqFEtWx61K5oGpBFraax3O\nOUR86KKdxkOLz8ZuYscHpvm7tQpeaxj2G13bb/Y6/JpeKieNoA6yzEFjc++K\nrLYr8F7ft5lgaPI5j9MA/GSoS2wUdhgjRIiYb+u55DlQnr3agKwL8WWukxpL\ngfcY7QQ2nRC77rH3rVDrlmvXWQo8cT2DHklQHEqGpm66rajO7jS7twrQYlDN\nB+rqnp4gCBOlwsMACd2x7nzbB+BGPCL2+w3wlIuI1x1mpetJe7ecTYhBTZuy\nMEXk69HNAMd7TEp9kgDh6bFA0dBAnJtCw8vJANE9YADM4Ymk7pz9Mb/Z8uAG\nL/aVNVRXr5gdnVydZjvvkJTka1VAbCnsQZ9p3vXj2ntChmbTzWrvuKOHH2Dv\nBTZSMkzIIh640wGTJYH5I2fLXqioSGWDZ1hZMxqzJKca8VtMmpn37luQZyUH\nhF7IKFwe8l3awLMCNOYFOP92KFXbz5of6gbks6RKFsNS8GP6ytNyBZcEDix9\n8zlqU1fTs0A0hwyeHfi2AL1R8CRWAnTC8ZEv3TPNsm/5+zFeuOjfwwZ8GAah\nc3fc\r\n=XXZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAfXzdYg7hL21rMMM/lP8BzvJEhge3t2rYOLCBxxjiQgIgSXT9LYIwO+hJYWmNiKpqVpiXBPohYY/ldRd0+zpu1Rg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.19_1575445130324_0.7242372069108189"},"_hasShrinkwrap":false},"0.1.20":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.1.20","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.1.20","dist":{"shasum":"d57fa52db89753ed6eea7c8a5e6c700642e66538","integrity":"sha512-5e0f4hbOVy6SBahpjGOGUIxCCWQ19wsWz7CEovUi7se+Ih/OiMEnRz72szSqCjSTtltFQ+q9lrKazPUaNJgqlA==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.1.20.tgz","fileCount":254,"unpackedSize":19418352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6dVyCRA9TVsSAnZWagAAz2kP/RaTjw4v+IDTQwKaHQW+\nuwQIDF+jZ5B043idSM1SKWei+eXk2JfBXsYFP+Xm7WgFv8FZ0Clg0glXk0Cs\nJSZXdS+P1VI39QEKoiuxbRhqc5yVKTYjGIpjtog5cLxGErWVwFUij7XDyg/J\nn0czfJxPk5u1J10gJ0zp5jzK70aQXh4mfwzjzmPPR96kFsI/GDAykuMUL5mP\nfnHX7mMk7amUEOP3VGcu6sX2yeBlVui+45LPfMUnzc0+GFTfIIMcvwWh2N5G\ntOp7zXX5wSq/t9SvL90MKRvDjYf1nOEocGuQTWEG7Xnk5XgRlQmmUBv5wx59\nubgdUhVtWqwu8Vh4say9YWBkEfXsZOSN6sfAo3Ig9xBwlqsgXdwNiConF5A4\nl4SkwiRQ6OMBpNeySeWBY8NllZAqo+Tr/UQE30Y9lD2Dae2LR57oxSifV73H\nojYi4FqfZfocQQCmZtTzAbzHCcL5vjBxGikLIXC7bYZsjJoidE5JBvymJLoC\nqihKJlLwuVtf2cufz+NDKWTMr4yOh6TIMKRG90En4itnR1kZYsMEIkk0qwma\n7VOp77MfsJoRRzYwQWDMJOvT2jLE9doruvq2+RwyvgQwp0wpXMsgho2snCia\nTfNhLOku8+xcXkWD5/PS+NTq4j0SVwmD61v2pug7RtktKUNM0TECsaZPSkpj\ngeZH\r\n=0VAk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkQN+LQ3FlRtahm+6jEAsFwZlwZpkLW1tKsqrFTrU0NAiBmbjgyqG17M0GGfs+Lpk/uvfVyyvQ6aogP/IAJAgEsoA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.1.20_1575605617505_0.6675841535751117"},"_hasShrinkwrap":false},"0.2.0":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.2.0","dist":{"shasum":"91ed205f54aad6bb54bf82c69a24e455f6ba96fb","integrity":"sha512-UivvvMILglK9ulhxVUp9hO0jd+e1oBjUQNu+MXkebjWDORxxwc1VcSlV0k1PJGL+PmBUZjtDjWBxuKTZGLcGig==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.2.0.tgz","fileCount":482,"unpackedSize":20831477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6euUCRA9TVsSAnZWagAAqpsP/im+qKsr5xVPGfmF+i0O\nwz9qUCdDq/dM8XMh8j0KolvdP69mbzGaEtB/4UOKDiH6v6ThUoMPXShMradZ\nO2EKNvOvKN63ZZByg8cJ/AjSOMhHFSvH4V9qJUdRq8QmKTmkhh5bpUiVRHu8\nUyXCymYCyx67oKiMtlMImR2knlR/Z+bcOcAab6SvVANl86Hg4AufdCxYXuZl\n8D5fg+eNhK3MK1N87m2YSO7FLKemqMaKdSNUVr6r7rgB2EVqGLV/RYUSXl6Z\nJCUSyMa+wTwf6nP/ssijicji/Q5F1mwU5RXgXrKUvHTZRY2tyEMMLRFppqIS\nneKouuUtL3y6LMWDGu3QQ2kDBbezCr0cJtFk62hwRVl5/wPeMZmRL6mJheDX\nm3WRskBP0KZGL/8RzynjmPKfLMuiy7WlNJgdhZYb1Qn0iacK4hxPRr7SkULO\n5XFYOcsR3dCq5eseHn2OE4Pybc92DIjxB8HdaL0dMD1nICMVQLcJ5B8L0esr\niR2EnIEStJlD2esbRD8ERqt8uR6li6A++uChR3D4msQJmkd2XxeUPZNthJ+Y\nX/rACLwa0Ne9A/um1qs8ezaXwE6oZ4cCnNoICIOneHpBZWpGlxEZA7CHoZ0r\nU1BSn7O0CAapyc6PKKFBCctoxuq3XyY/+uNfmMApjMAO0aRRUakalb0lhebJ\n8nzH\r\n=p6Qn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9U0PSTOgNaHPfvAjZUG1uCn+sANHYkGQuCnhHauSHvAIhAJC2JaNXSPWr2rl5ERf9G9ETWU5iAinkBDb5k/X4aull"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.2.0_1575611283557_0.09266075497298987"},"_hasShrinkwrap":false},"0.2.1":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.2.1","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.2.1","dist":{"shasum":"2e69712c024a34b9723cfcca563b55711a08bbe0","integrity":"sha512-ODgbUvXbJxYtlBKpvaYz3NA5AF2d59XeZSRGvojxgMX11l3EC3s5yT5JGya4L/qtqC87t9gzPjGSsu/FHUGYBQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.2.1.tgz","fileCount":321,"unpackedSize":19821450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6fGDCRA9TVsSAnZWagAAWHAQAJiLkP9RPOdGkluPK4Ev\nPY7degEtBSUfOkb0/i2trW2i/87D38U02NrruNztAFxCvS0B8pyPwBYS9im2\nYAirwbW6tEwHTRe3+CAL3yKk3ciV9lecBfjNQCWmXeOyKFjsVp7PQGlpf1YC\nAgEUau0QHSInZQ3bNSHMq6HGRm30ZBUrODSAIIJ/8+scu2MZHYuK6PCgJAbI\n3IIM2WhMQWSiroXwA2QcpKv8KCUUAupZ3T7NiNqrKVqIuztlRWjcVF140qUi\nhsTrtO57Vrmbzo/K8Meupi3nSqvFSUO+JbMPzDgBUpxUBzfKTHg1wQORZkDN\nVQiqR9Wh/plpepg+1lY/FqAff2Bj9b5l3kWkSqDibz09LVZZoJT6ZHgOyNFr\ng3glFVJNm7359Mdr1U7WwvgTYsTruec3/+bKPs7TJIARkDLsAA6UUONPe5QJ\nxKG3EP+E4mecHU2ijNIJAlLrsBKUglfsTga5DFY+LeWBNRc1I56Lz0+O0qfq\nUlirzAYs3Im5vyW9pHsCIkH+MMf90DtOXqsj1urxuRVGRgOR3dBaVrm+0k7f\nnUNM743ChMySeiQtXNRHUTHc7yBIH2f155vFdXs2jFqNu5NbihrbMil/NNKa\n53HlRCCZgLFA6A6UwPkRtSHklZpReO8z5RUzPLKKapnzzQF+HqtLHQODX1wh\nI0wY\r\n=UhtL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCew0z6phbNLYF8VB2WqeRMxd9PWUWYxrolsBhpNHs12gIgFQVdUCx2szz9WqTzapeISRYh/YqZ5gkGcvE4l22tecw="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.2.1_1575612802656_0.3731577277786162"},"_hasShrinkwrap":false},"0.2.2":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.2.2","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.2.2","dist":{"shasum":"49caef496f0bf3ccbe70bbd2ed96bc8cb33d85e4","integrity":"sha512-h9ZO4ninfgmqtLIgs+DrFpLgWMVClUi6/ZywaBHe1GX+8LOSE7sxG5mlYZpKAfHggR/BiYfPR/rJ9s/ALHNkUg==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.2.2.tgz","fileCount":298,"unpackedSize":19611306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6fRyCRA9TVsSAnZWagAAg08P+gP7BBMY69dmApHw7fug\nIkUV4IqjV1GE+RqUEVQZggqaMC4UzOS0PwuKaTqQKKImWqyfYbI/NFQhDwCl\nXLBzGCS5meDFyh3RscvD3AHhoKSP8tT9CH3rpoMrCU9+vMY17/CWjMn6qPv2\n2kRiiKSvVEVIlERYmoYjIY6NlP0pzun45OSkX+XCAvKYSOuqdP1QW8EaEUUp\nU5Bx5JjegbNuxHCe0FAzASu0agGMfmTYUDiVFEWiHWKw4G+B6mehdYfcEshp\nglk3tNXL+dzvQOSYrhQh34zayXvdCEv/4saZVH4Icf8AFPF4KD/dQfI/F0s4\nTwGCXZR9aa9xerYgmyZkBl8HBAUxlh01aEYg2YENfF1TcVsk+iQeKC0uto8J\nb/X7MGH6BqA4R56iidsV3qxKUS7bkkMJ/ijUJAMfbvJLbXteHeSS+wU3sENz\nQj4wD2AK8W7RqONznDdUg9AwqsdS+eS3OKHaTfTaWPrwu5GINezYvbyw7i+U\nIww/RSn9Bq49Ogf10iDB0m9WzYNvSF2ZURBPu+wJbZFX3HxY1gwpKhvbnoc+\nHeauEjmtAw8qC2smjtGDnw+NPsOkPpqMbAfZC7hQCdXs91t8rzmfXbMyV2wG\n8RGade4ASs57Qcvft7U9vpd2NfWegkmE/nlg2rpAskVWq+3+HxmZpXk2kdL8\nBTJL\r\n=ksTB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2MBgFrvRAVIvUHXNgbWzWjZzbbsj4haAwHWzfwaq2EAiBH+oPqDW3kZILzjpCFqAxzAmKFk4I/lLBQZN8IzYFuPQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.2.2_1575613553405_0.27234739079170023"},"_hasShrinkwrap":false},"0.2.3":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.2.3","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.2.3","dist":{"shasum":"a5dd944a060b75d7ad9a7662350d94190544427a","integrity":"sha512-m4X0uY2ff0VhuHdZeY173PI5MJqMQ1b56Mg+Mh6BekqZqrZIgRppSnHasc3tlQeczdAuNlo/8jVHBA0iCZ+h6A==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.2.3.tgz","fileCount":327,"unpackedSize":19730307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6ziVCRA9TVsSAnZWagAA/zwP/0AMrY8X4JUSF1OMkQJd\nIkmxmDOqWUfPTTsrDTGoGLCUQzdjRPRpKPcvnx2Ydte3OCF1UX7QNBOu4TyN\n4tndBQGd82DW8NpiKyMIqFrH85s2QV/mDVl+hVBZ/rfYjzeXPsun4r7ehmSF\npAKcpShOwiC8D2ok46T2T8Z6g8WIlSJdRQeuoGNSeRiyjkO/+jXSzwsiw96N\nCFrUT/fjOECUhvQn/juf0NhWsYquWbveAfLpwektTNm8esF99kL/+PHggINZ\n+3oucghih5kAwbLWCm4YeyTkX4CpUoYGMWNRyvZ99g/GLvQasIJLfyIl2rv2\np1m1caKJnC1rZ0oDTil3zwMtIsr6yP8xrVOL/VWYbG/0D7GflYx9r4t7ofs7\nMR6IBUguhbUZX7Z0xMY1ylKqwHRPBjSIIJ3t0kNmbgCBRB/Y5vH0ViYH4NrM\nou+ArVbUFBoN4eaKFufD+Jw+wrQt+pBmiAgF4WzH44+xpMAMbiR1trruD7tO\npIE4k+YmURpikmQ3tV58YKZCREbbafMgkq+IMKQTEabsQyBHa+62p9EIJZbz\n4yrVgANFs2QceQrlVAxqqyWFBgPh/09URJKqmW+x1YhFipfMzkGEMGk8kydc\n6wUsb8FNvxRG51eNjbk6YOK4Kqzh3uumt7IJ+SObcYtHBYH0UF+e7O16UlUs\nLsdA\r\n=ktGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMJNGB7a51kHLbhYaiidPrwSxyGDgy6PASIqtjJSd9IAIhALcmJal1AtOcpWSazISCADzHlLky1+ixW+43uN3j8y1j"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.2.3_1575696532632_0.1705368744839273"},"_hasShrinkwrap":false},"0.2.4":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.2.4","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.2.4","dist":{"shasum":"fc500b681d6d58600058220b993f4029736ab0a6","integrity":"sha512-KsTrGexY1ut81mdz8kZmIKqfBIOGxxT/J6wbqCZ2NhyUMyjBDvrbIvSVjeAkiysm2VwJY6Y20OXV5eHhrM4vNw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.2.4.tgz","fileCount":598,"unpackedSize":23336583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd60aOCRA9TVsSAnZWagAA5KoQAJK+fjbCnO1tEpppehhS\nCcwSTo8pPUIuMpj1QZxOw0aIDO9mLLtunnBS+p+Ydh9Gz3eE3LXoQgxs+sVc\n88uq1SaToOXW/RdkOBjZgRBeJyHBT/bD9pNpswMG+LdC5cut2lw2pPZxFqEb\ntnnLsPQBuA2xHn5Gkd2A0GD62TxcE+ItOEzme3rCvPREShNwtfZv05LaAByQ\nVAPF0hff2nW+s9pGs5mxvpYZf/W6nT4MPi/wDDrRlyV9OjupjcOS8XpQ7+X1\nS0VIUIiQwQfDSK2/r4HP8DP8c4YBNxonLyzLEn/bAkBb4faYxxWge9UpcyPl\n/CBe7hw7YxufloU9683UpvDsJ4cQpWOQAF+mIsbwpoioCAgrWTXLLPj1+2Kj\nJ14ExHTjn1uOOZo2C8rOszLv8uK/wX+EB7gNomG9MwTxlCzZTITTwi4/nv7Q\n20DqsENHGBoIvAGwQCzO3r8lMh8bReUwrQdHz6Ij4zncc+C2tctqUJfPquk2\n7C9d/AaJhEI8UQwoMg5/JeL6qa4WPhL+CumAw+AzW3p2RlEoMkG+95f8IKHe\nrQkkQ33Qvr5eiEakwJA/PI4BCj3QaOsUalOpvGsIj3DQ8FO2br/OoYaMBWHT\n8gC+Fsca3OSO+RAa4jw3pQLpnSjGuINUw+27yL2IWONjLy3LU1qesUO95QLl\nOO8U\r\n=K3ZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNSR/uuY1qf0SW2yQcDaZdlBe6BhMNJ3G1dj7vLgSNbgIgbCeZjPRSc0R7Bky7i5pIHrUNIS5jQXADXbQlLsuVfMI="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.2.4_1575700109823_0.6302175286321714"},"_hasShrinkwrap":false},"0.3.0":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.3.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/cra.png)","_id":"codelift@0.3.0","dist":{"shasum":"38d027ad93c8587a5e98931d0cf63fbe3273661d","integrity":"sha512-mfpFedAToIUpWxjcl3mI792VaUoIgZ/ALH1wfAa0uTsIo1MZCtpSXKbBsUMETNuoHfIxHQFHM/tOVD26RCosCw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.3.0.tgz","fileCount":275,"unpackedSize":19725032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8bxRCRA9TVsSAnZWagAA0QoQAJVwGVXlLW2vVsswTUgd\n5NPPKWxcvX202/OcROmivDKZZQwzdeax5qml5ARKyiGLM111XW/42il5Cugs\ns0l/1TdosZ+copf5TWVlcczp1Wc6NcYeCEhRmPCPiap9kUWf2qOocC4Pxj+a\n4se7S+MaCRnGWGVaIrmqABTuO5K/jJq9a6pRT0AbnncQa66g5nHzLofaD0+5\n3F6sYldq0bX6FJ1kNdj19hM3Xrd71Jg8HGxYGnBD7V6x3HoKt4yqJ8NHnBNN\n2LVTJb2yCmZD8Rdc5cvUPkFBO/oEhI+O1sN3uMrJ6viPFhZBQTZ8fSGsISP4\nLcdui0Oq6DAvF7OtK2mbMtdJDbT2jgp6kYrjv41cfuSM3DoNKgfNk8ciAOkg\nn00jdR8Tu56YCE4iLUy5r49PsNbsGZ5yVbpr+TZUFvJLiwT5yeuQmHYwm0+7\nx1lH1k2aU/NPnHSlWr1a+E8FDHEp7d8CAUGvP+gCZMuarYnldCp7ltgQ3gAi\nIfN/sbqk4O3M1Mg5gkFVODmbqRNlr2UxRoKu0NcVEKq10Y44bnrunjK1qmNw\nVJ6F/s1aLkGJ5uJjgtNRVhrDK9YnPpnHAsCSsQg6EM4tJTsjW+DJY8G5FZwl\nSAvFxJG4LyzCbs9sh2zWDvqgRrdrZ7MZ04r+mPaRg4rOw/aWtwvhfcoe/YXE\ngirc\r\n=U5Ss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDngJbZr5/FZETqNgxp7fY5S5bec5UNlx/CHSH4bIZQAwIgdB0e3sw0nmoc2JzjcoThPNHpW7OLTYqMx7yju6T3LS0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.3.0_1576123473167_0.8600070906986415"},"_hasShrinkwrap":false},"0.3.1":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.3.1","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.3.1","dist":{"shasum":"a6b47e40a67ff7d55116f48fe778ff096bb25150","integrity":"sha512-4D/by3/68dTkIPiH6J8eGQYAibwuEXG463pZ2935r8DW5fVJwo86GRbrHPtZbQSX0Aa2Ywn/uyBkoAroRVlISw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.3.1.tgz","fileCount":290,"unpackedSize":19965383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9STkCRA9TVsSAnZWagAAzdUP/iiEOfVHuJ2ETKF27BAv\niE5wynuvYMg7dvGvv4sIYwR/2vUyMVzffPw5w8rqqPX2+AMpKtkwnv34FTLs\nrMk9BRvFfRrya06UoqYn4MPDbTdtnEmArrfsCTk6E5qgBGCeecSWL1fJE6um\nCu5BDmn63aeljlKtrOtpl0FibNWVJLJrsFjcQl9rgxXfgQhGMcHwKLGSbhJR\nQAsuJHHDz1kBzAcU0kQNFchy5Pw8ozO25TiZkDJQY9Y11RsQyr4jQcocAfN8\nYRTYwgr3p9IYW0y1HTmeaEU2uVsv7qfRhoEzus2rRlpIINz6hBBzt5jLkwQF\nsMbOz86cm4MPV2FKFFSZFWW2e7yFA+ZkDZV6ogkAJ2fXz43sI9Hfb72q+o6V\nVGXgofGHjTFA/85P0KTb7ZyglwHFppfXxdJDFqAZuRYsz2MI3gp4nwPkyJyZ\n4PSlV18QUjdWqV7NTnyd23SWCVeIP4OwZHjCjBx2s+TnQpkJ0AoYx8BbcQGS\nsS8J0scvIfa50WeFje/52/YGGw2x2MNp1y/Pm/EtCO6UzuPBlcBWqUg5M4Ra\nrAK5s81wD3vvNqluhmCK3knUIJxYYedkzuURvlCRoUOZYNNF6XDx8bb0aIab\nVExn6Z8b7ZZ2x9Mae26+q5AE+jDJGaR46k8HxdqjAFw8vRaziDoexf3pLZUj\ndArO\r\n=ON7X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvdGnVA8csg5y3KBNLLkCaJFvxIFfLFSBIVLa2syTFHAiEAgqIJTQXObY2GpTJfyibF7mtYCqsghxJbnTMNPHXXNBg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.3.1_1576346852117_0.9692957310214698"},"_hasShrinkwrap":false},"0.3.2":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.3.2","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.4","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","typescript":"^3.7.2"},"description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.3.2","dist":{"shasum":"40eefab2e18276dd398706662cff05483141b662","integrity":"sha512-exFD97kV2s2HDkyzl2XoXPlDHrvZg94Ij4Ie9mZ0/DnanzRE4Xr2/ij/a/rZPMRE+uBLAiDi0o1AZ8yc5ESaBw==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.3.2.tgz","fileCount":260,"unpackedSize":19512353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9Sc7CRA9TVsSAnZWagAAG5cQAIubOTVsYhormocpPNoB\nJJpjsk20lUM/4PRExiyFfHQSt6QFVx38+VEftlQaCgAZWhCnYvSv69zuKwIg\nx6LTr4KSd3WU/jFzae4xM7G/eG6wMMhzqyqI9mh+g3bAtXSAmeePIjPNbLmd\n0HklEjxR7DLe8r5hMdl3uCkf/eOawoBE0tO6y1RAaEKIPBZCRNL6U3HgyBbD\nAwVPX71o0loElVNopPGFs4rnYZdJkxWVV+VPr5s06HrmBqrtej2jxU+zhx26\ndXkuIGLpdGobZdBBrxznDZkeC7hc4W816mBOxATfKUdURbRC1Hb30djxNelG\nFiA6QaWl3J9r0YmPaKGEtIwvMMOWm0XpbMtikv1j4rnAEnmrG7u7yxvJh51N\nvpv87b+MH/F6Ct7/X68zp5Zwe1ZWbv9Fo/311FvYlaKBWFaaDxr+RdstnRza\nKxqICJR3LXHAd+7e3uqUxi00Pu4+AE1XoLgbVHaFX6+/whLnaf387/+5Qc3p\n4+Y6K6ipVeSIZwwYZPM8HM+POD1kuzu9dzIBxKc8nQyUI9rLVIvf3ummEsSq\nGIDU4faw6bfS0QTpr/xqWNrh8VzcSMOoKGowXTdfjmR7dxTQmJQE37KFA83L\njYExSNvoDrs3jgVJ1+HFPukPXeenxnRZimfBEAtuSYLhb0NgAt95HSoPNuB5\n3TJf\r\n=ZNPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBYk94fgfNO1EpPlUuC7RTN3HIZ8T06P/fkJARN/aleAiAZqmLi234HCH1Go15tRgQFcgzm06/OCR0QuoPgspvoQw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.3.2_1576347450914_0.43364367604810994"},"_hasShrinkwrap":false},"0.4.0":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.4.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.4.0","dist":{"shasum":"aefd87a619fd9b15026f753d2c122d428b7fbba6","integrity":"sha512-HFIuAb74DaZ0FAd5tk7iupBMXCA5rhYvPxVeLHnIgVIpBxXrOY7qfflkQnf+iuOIThW34yd6bImzpUvT0k+XcA==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.4.0.tgz","fileCount":4107,"unpackedSize":90378404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKPxfCRA9TVsSAnZWagAAr2AP/jnffgDavqGypeh64AGB\n0yiZZzGuKcBP5ooG/7+wYrfnvQyc5Q35LNqELqZImxaq87t073pFIBRLpIhz\n4KPAO1Gcfd7+BYRmTlLOFX4ONx/gUPGvt36U1WhBCGcrdZecc/GR2Is97OIO\nNuNA4lgzuuB4i7x8aKp9nKJBU4IQCI7GPb2kxUtMeobHYnf0ToW6AC1R5iTX\nbOJU/GkXNPrzOcZBF9QfxdZ3/no/5Y2qyyDcW53cVMM2nVHDN0wMLjaRRjtE\nhDxCJ2LF2j/H2Uf4zttco5dGTV8jLtjfSgon9Dvm+Inz+tUtUoDT2MFnr0dN\np3N9k2kuvbael2HCCgSJFGvp0oJPkBIw9hVseIMUSKNX+ek4Y5ccxhcs3Lwz\nc0sYnr5CBK84YlyzbG9hD+BSzAkrlGBo/vZ8XGJXmkByMpAeEovZjfG1rRpL\nifayXoM1AjC1h6IY/0RO6WFLCfBPcr/5jHjv8b1UR+RPFRKeOnMG463YvK2O\nQH/oU1cHFdft52idabinFOQv/T4uFw3Qer2tLOpXGfIWNe7xhpTkazmt/xV8\nqI1nQTk+eeR1v3UsnRJVELrn5pReKvtiGnAy3V98nd3JDmApuMH7hZm6FbRD\ngIP5ToOjLDt1PRl392+PS/wZW05mdAqvAH5rysh2l9qvgaT34FvtN81YN6gO\n0Flc\r\n=/3mT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpXDZ5AEf3OtYnMo7GVJQSMz4tK5XLp57lebFBexY5OwIhAKEajHEUpIvW0nOmTA3L1ojLEwoQd6yjh060BKZHUUrS"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.4.0_1579744350649_0.7480481465455415"},"_hasShrinkwrap":false},"0.4.1":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.4.1","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.4.1","dist":{"shasum":"3fb532c7aa489040914ac6280a97f3415d06f004","integrity":"sha512-wMNcYxZjrL3ngarg/DI2wbQe+MTQpvW9SdNKUapRYbB+526uO8pVvhnHeSJmCbK6n/YBBanO1PfQi2CBW8TJpg==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.4.1.tgz","fileCount":4338,"unpackedSize":93381239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKTpjCRA9TVsSAnZWagAA6wkQAICxocrgvaPnWwe7/eVi\nj8v2XHGps4JteiiGfxCeW4MEjSOYf9yRWwzKruwfmHVoHgNlteTovQh+P+Ix\n3AZntVvPIczFHIej5nUxOxoFMMSbcjpEoZlmqX8NqCQgu4yOqOh90ThFbkYC\nfkhnybuXd27ZAt8EsYS0C3eno3C4WtuxR5a3fQKYpM7s+eWdK1P4b6bfCIL0\nQhzmAsRoguxAr/EtQaHXXHeipH483J8vkeKN/aliuMcvRn5kohgHvj2IlNyH\nATUab+AeTXsL8VTCRiQUomBGMJ1TwJVnbi4rDHhr+pz/3lznMY6oxDxdMcDa\ndtquEPCisRQeB7E2JkWLlWHw0ekVEQDCtz/fmOEjt/kq3b5rLvkvUJtLKofP\nGWAdGahpVXrOacvTwTp0NgDMqEzCR7Bu+oBUcmaDRdqM07ofWCfSTJ8aHjff\nKPNsB+WV+KLMO44FFuvdWNiOI6+TfrY0bpfLczPOyNoEiPMGQnO1pQZ7lrdW\n46dPejD7szuK0/TBdrACEbb5rKbxpk7c4SKDpxjlChbM7qMb3KV56JEhqmVT\nsJrZpFZss8snptzaH1/TfbA6ibbPMLIFW36yZvKR0HdCb9ELN5qlFeSgBVLU\nXZ2TP6r40OmLfRUi5pheJjNWfc0xEyZow54DoZHF2jN04y4Tk9koGDf2YDXT\noZTf\r\n=jEgu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdnwvg9ej6yN96z/Z5K9wJ9SyGQCwFxQGwLDTmwUhieAiEA+Gvgmo6kOXq9O0ezALagILxrZSJSmVEz8338oGqAPA4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.4.1_1579760225825_0.914107732301183"},"_hasShrinkwrap":false},"0.5.0":{"name":"codelift","bin":{"codelift":"./bin/codelift.js"},"version":"0.5.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.5.0","dist":{"shasum":"324ad87a77429a048400b0e44069e7a5c2b004ba","integrity":"sha512-WjZaowGR5jLaaAPbgfBgXJu2j/9JCZTgIj8b7pDowBljyOzC0E82dsrf6Onde2ncWf7fu9RW+qwu16DQ7KIwNQ==","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.5.0.tgz","fileCount":4494,"unpackedSize":97219555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKpyTCRA9TVsSAnZWagAAhe0P/iX7wplzHzBX1bnGJ6au\niHp0zDkd0sw81JdT9B1jVNFCHs1733kAs6MkxhhvTrG8UYbYGw8iLXD6janW\nZWG6n35xgDIVwa/nmoKICF0HKZcT+trdIY9rmgrrlHgk6JHbVioH+vpcRcYH\nzJHYpDvlK/b2ySK/kvZDHqR9qodSLEWnp9kPE6ugsTmxuzbbMSd4ud1z/s8Q\nCULW7WANjrY/nUWREG5Hyds5XbuEaU5QapG0qD+2tDmyGWb+V5OPz3+BrGJI\nouSA0bstd6+2RS4Fp+V0IIoVJlnTZnW/Zj87ZEJ2hrRdSHchWEHWep9gvFDU\nwYYllG7+9KK6uDANGN4Xt4tSajdEzkKecN1EwhdRrYNralXwLQTDk0U5ke46\n8kMv1O3/hf4xrBc7DkU2m9NTxEVTb5HUwTnocqasDTQz1FNci7/FXdfEbkYY\nIUfKA1cMR6htb4c4UFB3dR+aOgvcgn/WCJPti+yLg3ojxKFH5GkvoGx0i3zw\n2BN5MsbDz9LbfwhNke+UyGSxYVEQymGXRpH9UehPbwJ2/EGDBX17xi3foq/e\nrDJWXJFrgqh9EHfe9s4Pw3HT0H1cMWLAKaUrND7o8jVvNcVLy72fBKl/Ly4x\nOlp5Y6jbV61w8mW7cOgG+4z7yAkS7epm/RaPZ6fS/J3fIyJmfQxh07qdhoZf\nbTHA\r\n=/Vod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFc1jqMJAv9Feo7GSdIjVHFv/fcQZgA2bN6a82tZmauAiAdYskJyrugukY6H3A/2nFMwGWEWDclezpRGUZwfzJi2A=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.5.0_1579850898142_0.26079831225896233"},"_hasShrinkwrap":false},"0.5.1-canary.58.fea0a94.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.5.1-canary.58.fea0a94.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"gitHead":"fea0a94d42768a62f4171b812c8d51c62f7c75c2","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.5.1-canary.58.fea0a94.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-LDKnrDLbUF59Fn1HvWgltYLTbf1adf0HgoNwudvYBUzG3Osgjpvi7oOn/mYhQUpoIoWJ0i58FC4UfteLffBciQ==","shasum":"c0dcb285f50239a54e09015ab4dee40bee559c4b","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.5.1-canary.58.fea0a94.0.tgz","fileCount":154,"unpackedSize":2389393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK7NOCRA9TVsSAnZWagAAkIQQAJsotqk+fjrG/529pUcS\nEiJonGi7e0j80tmmlm3cK1eVoExUK+fd0zkXlC2rODJC0IEIBnJWJNKnpPkY\nZj+NPAfQu37wy1gj2Jcn8YPZrGUhDOKp6HX1wxeaMGRssB3gGcyzt5yZuBGG\n7anm06KDs0Cpywlir2/SAjCzjcwuwlj5E/yKjSh2SR0P8dNe4U1I4V3Nz2K3\nX+vFjZMG5kFL7bh6rWhqQHNIq25Uhu68Th7elmgVQh/+O138iguCONJZgaat\nrBqIhaAH3s67nI4tVCKprclihP9gO31FOgYXRubvXhLesNMUXF42sSvLpp66\nT9yrWCluX2Fyd1GzfEvn4tLGF3d0V3qWII828zAfy6wEXDXnJxfHg0FgioS3\n3bjSxSRxwmmcGtoMhE7hD4WvmKkiBDQ+B2Y8JIXGuH8D2hUhYmlSS9cCZ56/\njL1lD4EcD/L/eeQjg1bmGm5k9XKwwK0Cf3LiRkYCRlpE+gLSgou1lSTGdRvg\nmIkOrmFyPDp47Ku2VAyxLDevO11gt6SdFjwIyua2xas63x25CzTaOAmVZMF8\ndon5UeKDFnMdaCaEH1EL4GjgTO7VJbSC1CWnvHFoK7/61LxnST8ZdtjxJwjn\nNiekQPWVnTsqCVMdas2sSyNLcKcP2n1G95NePjihy3HcvG6qMMMQ1tVM6YHo\nt3PG\r\n=tw3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkye72jLzjxYu7Q8vIf8eN4pJ86vbGtSmL8vleyc03DAiEAqLKLvBf8DYitpTlYtZFKmHg4pCpPzPSCyYYrLOY/73s="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.5.1-canary.58.fea0a94.0_1579922253595_0.9342245248247252"},"_hasShrinkwrap":false},"0.5.1":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.5.1","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"gitHead":"21e5be429cc220f1f449dbba127a9e75caab9e4a","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.5.1","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-PJ3GGRe8FXRF9qQ+rMMUS+wfJw4sRbEoZOB7LTRV+xgMhznboKbawKeWBPrRwq0dZg1hsQ4l03A3yKSeY/Otbw==","shasum":"94085732f313a12386be1d37b62e986b3b96907a","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.5.1.tgz","fileCount":154,"unpackedSize":2389373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK8yzCRA9TVsSAnZWagAA5rIP/39Hr+D2CbQWnFl6X0UC\n0Ou3W43upTY6QewdcjK14cyhMjAfpFu98Q6K6UY3Hc+nZj8q4oEUpmLYJ8Km\n0cFxN9gZeh6560TpVVRCi8jR4+PZAzoYDJfrDuQKqIwmWFAmJ1+wyZo88NU9\nmqYSVqPz/Uh139/SLdK6KyFndRYfTNpnoFPcO04KpzQ4jngPCRnaMDfPDjSz\nISXXjw8HMjfy6JEYnIP3F4KWTZmY0KCBN/oscMYM76HOQ+GzpDIZA1ZJweqq\n5fcuy29Y1R/bgIuJA/7NprCRlu3qK8TdfuTIrhl7/Mua4E2ijN5gT+1DAlJ0\nEu9jfEDTkVnMcdKlmNYDLuHR12Y6BoPkGSdE6b/5oZRZh0OdypG/wZwzMGgo\nKyDCRSHPHb0NLVorJiJDr22rOPiUD8R5IBJM16vJ4ckQdRlJZzVoS5Ou5Ep5\nQwmZANgqqBYTG7Zuv9P1dlBCKbXMPMkA0vXQaDFLPwc6kxdUk0NDo3YaozKc\nxPwp4f9xwTz8qrfAUHaSR5QJGkTxDXFMyDPevFwxLnRSOj/vrbA0i081g0M0\njFq47L09bWuIJHmTYEJDLDBEQk/7FEDCbloKAmv2BsiWRknOXDAuiedg7En2\nTLDt7OwEt4lAB4LsROjD10Bdj1PwNvpmfoM5SYR7iiBINgQhpSe3+DdVrJs7\nx2L9\r\n=vO2h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBDFojQM8IZg9TCMMnbEo3Hpb7h6bb5c0vQZrCXjAJvwIhAKqXHUXaaJBcD1MXGwN4Tw8dsGQAe/DkhgYCs/ZrnJTL"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.5.1_1579928754898_0.8019313716127157"},"_hasShrinkwrap":false},"0.5.2-canary.undefined.54da35c.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.5.2-canary.undefined.54da35c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"gitHead":"54da35cba5a1823457276e2133b259b30cb62de1","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.5.2-canary.undefined.54da35c.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-BtVfCsmi89OqJK84kVqWzruCZhn2S6jmQQJmkzxmB79qGrg8vBfKUXZp0t1ndshFpbfkwvgdBxG0RiW3uE1gqw==","shasum":"b778a4a1757106f90a99471f68ded066cf3fec18","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.5.2-canary.undefined.54da35c.0.tgz","fileCount":154,"unpackedSize":2389400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK9JVCRA9TVsSAnZWagAAd7UP/3baJ/R2w+X6R6oefu9R\nMv1aGwMgJGRjNAgZPqHGHMYLXpHTfO+zkbhfXwnUK4+Wib0ZfaMCrdokjhfn\nbS2tqkFwIJO1CqAnpJ8eD4/G0BuzDy5tbK0QL2HHuEpLY93WDFy48zVizoPW\nofUF855XQSuCMJetF1bI5Y6q+e2co5VJwNTt4bssmGuU3V+U7R28lbse2tCG\n2Ke1STX1K34VB5pFFzKE+U+Dp+4hZxhQtqEwn0Nbwz2Zn4Qb/fZxQcVnJ23c\nwjRLV15dsHR3PFT17gFSYrXlmJAfZjw4OHr4bnDgknbV9otT5nFF6eHdxTen\nG7WRcDg5y/vmwX3FIUMnx95xa/IBGtoO+fhGlZ02ywqhcK1osE3SIuqwyc/s\ntfHHxwjLfkJCqO3cO9OVBrdMYjruAQ1psyFQrhVqGS6KwJ5vHgOthEWPitqa\niekwXbDZTAb3B5lObbE2JLL9uG8P32oJYqfWyEPJmxoNqN/qb6DN6hL0x199\njycYco8dGZWttGUDPEEllYlpNlmAiFGQMGRQoy8loXptVcTYNKyXOSBFPWBV\ns8r1bMKXUEWDz0WKSxlnKzo/TxeeyGBbtuJzzsOfW4ZrJfK5vZF11H45RQ3W\nRpc/ZuDp05IdbDaH/ehMMrAyZpk9OslgR0+5TLxwVrhGlbcPvH/oAyw9JV4T\nL6Sh\r\n=3ifH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtdF91r806mFeqfN2xNGBD+gCvbM+G6uuNAG1yy4xMAAiEAlKIJLzgGq0Lpwkr1NrPat0RINYco88YxJv7uyXs+EVg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.5.2-canary.undefined.54da35c.0_1579930196742_0.9128933019507954"},"_hasShrinkwrap":false},"0.5.2-canary.78.54da35c.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.5.2-canary.78.54da35c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"gitHead":"54da35cba5a1823457276e2133b259b30cb62de1","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.5.2-canary.78.54da35c.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-p0iNElq1lmkmgyQIOfXTUi09MKkU/2ezp/wPv0sdsU+b/+CaNLggpDethNTEBwGRfClL74OetSGT/dUindysJw==","shasum":"913e5a2c5967ed82822b1198512989e919ecdff2","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.5.2-canary.78.54da35c.0.tgz","fileCount":154,"unpackedSize":2389393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK9TTCRA9TVsSAnZWagAAOZAP/0xRqisYRKslrCYFaaSU\n956gwJpHMuSYuMNmyBcb1fuUkFbb8kdc71DMArISOlPoLin6S/dKh547cT3D\n9P9UVSW3M6RblqKI3nLou0S6I6eHdjl8fRj2HaQ2Rpv6LhstgNA6JOHHItvl\nwd0qOkwsiBYEMKOznSc1YDG9LKQL59jchj895cDSxVoqLKWJ1aWGJ807tD54\nYidsniDT0h3c9cPk/Pf+Nt/jBwYtVRYJt4wWLEqJT/QhPJNSdtKcXT/8I9va\nunikS1YjTL1jk4Bt/4GHsbAck9Elb/npQy+mB8Ihg+jSUi07P9IFh5SWSbmy\nG1S8Kpy51Cw7L0o1/xNq+uPfmoKQWsPmQPxjr3LU8MGp0yqHuTN2aFVqRJwB\n0JoqClRDeKDASzkZ3AL94jNJ/+Ig4cUQtxCT6yx6fnJxfoaXxCCsL2a2EmqZ\noIhDWEyS5EODoje3usOJA40A4X4VG7EopIxgwC7RnA8O1zrn+iCGsm3tBPzf\nqpfqP8CyFvCDOEzNxnkvicNgCr2t/CP48AjSPwxARpKMPnDpdDliY9H3Sx/V\nN9FtXpE67CMkVEz9Yr3uZcz8F4e47Zmxy0+hLjtrHkAELCQykWEiDvNBkibE\n6wWCJ6ZmfR3Usbdgf5qqtWEtdwDxwaeKlrG8rvlfjoyYfEGrcXWpMR73bjQ5\nHzyy\r\n=GFqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOdVURrVUuoY4qGvbnV9V30IgM3gccVj1LAEnNTfcEvAIhAOeK+8aibxlSja3byIYremWNXsFAAY7qG32Tjut0mX90"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.5.2-canary.78.54da35c.0_1579930834739_0.2867124373225005"},"_hasShrinkwrap":false},"0.5.2-canary.79.4b24a54.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.5.2-canary.79.4b24a54.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.4.1","@emotion/core":"^10.0.22","@emotion/styled":"^10.0.23","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.12","classnames":"^2.2.6","core-js":"^2.6.10","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.19","graphql":"^14.5.8","jscodeshift":"^0.6.4","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.0","mobx-react-lite":"^1.5.1","mobx-state-tree":"^3.15.0","next":"^9.1.6","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.6.3","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.3.0","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^2.3.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.6.5","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.2"},"gitHead":"4b24a549ce0cc0fb1944d110e9296b916405e00c","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.5.2-canary.79.4b24a54.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-pTz6jcAUsfPMjkzOYD+2vOTrhaaUqU/pPQSzdL0Rkh0ThgzDdB6Cuvx7NwRtypl1ifEP6vCY+W9Ra6VJyOiygA==","shasum":"ea2fc893448253db4a89cbf9cc405edb1fc9ccff","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.5.2-canary.79.4b24a54.0.tgz","fileCount":154,"unpackedSize":2389393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK9k3CRA9TVsSAnZWagAAcRYP/1eoiFAtBf/6VYLyXWUF\nfHjuDXonz+IpVIxZjVxELnYd5wCu70gVzy35jOjIQlV1Ruj68e8zTae6UlFd\nrJ6VgBwq7PobS+gZ/i8y0vidTkna8fRSbyRU2R0zy36rl0nQqTiK2bjsvCw/\nsfYHrBqRyiS0XA1XnGULQktH+ceVam3JDsTV5ITOZ68F3y96nhHl0nnoCdS7\nL+Td+haMOidVpYH8y1jNKOnzAqe3IbgNOFd/rRv7wlrie5ujRAfYc7JVeN1C\n9Ia0mVWbImwOvOR9DFOiGEvZX82N4cdTdq4lJ6bV81uDjJDZxsGYqtnCS51S\nwkvQyloUSj4L7ZwJokHGG+stvtC0rDOfd1Px5TBjtL0Y2PCv5rePW1rVqMoo\n+SvRKbnpf8UiGYf3GH2RA4G/+SE5ik6d3ILzq6l7grT60rhPXS8HWAllXjGa\nKL/0qZ7JsVqsprSUlYacNvDPVPpcBCuQEdLDNWODwZS0ANcIg77X+hmK0mIS\nzOl0R8YAeEDaIiUTVhJE/1T2yGl69YZUfbbyhemOWgg6QeeGvDxsb5pfI5Ih\nz2qWibU0IhGcus04CHfWN9Vy3BjKIohHbCBbiED4XBZU3KBga3AFgKsbllOQ\nzewwp61H77OmIFEFqLgMUdhs4RguC/lFUTQsQaIzGvejcyjkJZtW5bM4ByDk\n7i2p\r\n=u8zO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnuSmHc1fhpynDEox05eYBVt5p6kOg8uK52gJpezgB8AiAjKOYU+rAjIM7hBZt15r+1jBG6MFR1pSQ5+2MCwu5D1Q=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.5.2-canary.79.4b24a54.0_1579931959433_0.4713167750754945"},"_hasShrinkwrap":false},"0.6.0-canary.80.800510c.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.0-canary.80.800510c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"800510c6c179a971b76d7b0229cfcc1728507a12","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.0-canary.80.800510c.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-qNXYUoTtuZvk+lm3B3KuuuE2Q1aJR8WgI+VPb1dWM+0UOs+6lJk5+7moVmwaPVmBSG+9zNdWrTBHISoXy+AgsA==","shasum":"8f0f0d20ce1db19a31dccf60a8e38e2f518e4cfe","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.0-canary.80.800510c.0.tgz","fileCount":153,"unpackedSize":2313779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLOe8CRA9TVsSAnZWagAAr/YP/iyTj4twelsyYFLxi8af\ntZUk8HpioDLo2jiwTKImKOPPpLaDrMTX6uG1XubY0laW2xlCneFvR14c19Pa\n+u5F4sYBW0Mb1TWBskj4aCBc5KD91uqoodoKXgo4iUwwPVX2SZjuafIsgPLQ\nMbyeryv4drif5ism09K2kLmzTNhI40D+HFXB9m4EVcG3dyWTgcGBbEkmllZa\nLyHsHdBog4TvlqUCoF0SaeTyu9YZFcR95UnuMWjc6UmaemS+Kb/1eo/L4naR\nMGLUWRs6qLkKa06h01C5Sy6FxlON+doz74Xd/W/43P/BG3zNFc9P1MtCRAnX\nHqsHPKqBNwe1KzaqzMlC3HlxoV9TDdBH3cJ9BkOZVtItT06FYHWZWqTxqUiW\nKBVM7aTMO/p9sbrM3w4wHm6T1r4cA4pw8F2KXpZ6+Fmt6yOgQ6LN6DmqRJ1L\nysHIoypsjkQtgfigz/Sfn1CDMmJPDa6TAPg9GxWMfclpUfuAc3XIS92ou4Fe\nI2FytGiBAIXkcnPAZZWuzIoaPcbq89VpoSR/js1AI3fo3JNE4pJm3pz6H6b/\nt+VmzuPXquwXnzwaqVI0A1E01MYIRtMpBaqZmePpvUwSwzrqTEm4Z4GgfvU0\nbbPemhN7g2IXXTv/sowFEi0lbPVVpySpHNv+T8ICvoOdpQ0GzZge5jkHhqBZ\nlrYO\r\n=BCFv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH74nhpKXXTVVJmuntc3u0FQ9ekR/KGkyG5y8xh/n+ieAiEA91ZINF+rGP6zgFlInZ4RXa0fuLVBiQfy+W3/qjSKIf8="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.0-canary.80.800510c.0_1580001212132_0.33215857097392254"},"_hasShrinkwrap":false},"0.6.0-canary.80.b1c6d94.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.0-canary.80.b1c6d94.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"b1c6d9482ded4750bada5ca2cf03973db4e1fde7","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.0-canary.80.b1c6d94.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-J7o+kfMP0UZJqcwBgrv8hZYOt3zbzxpqd95XUNlMv2dDV7kZ5Xlsi1q0YsX41S2PV6dLJ8voZJA3D1c69POICw==","shasum":"911e36f479a1bd4ba7bc7d3a926de45dbe42eb94","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.0-canary.80.b1c6d94.0.tgz","fileCount":153,"unpackedSize":2319494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLm8MCRA9TVsSAnZWagAA8mMP/03lAjq5XVhtLDXkxxlG\ncavp7t0RkIxBLMYZ889ZE5RrQucgk+qvrT1E/G1t8AmdJcOTBbNQ8TrljH/y\nYM0qJNOvXhi5LqGpn+UWRNyeIbf1W2KidFUgnWdQzZa7fZZ+U2HcKBq5tYui\nlSkeqKYqCCt3QS2NSRMhDUNv2M3rWy/TrZL6Q1AGhxCvKZ0sV8D4PZ6WqKYU\neck3CvJJplhAYCfc/SG2i7wgLtZM7hpBsfm2ESfasalJOHPkdj8OyaNJ2jRP\n8vDKWtZqRkGT/Dz1NiAcWusrK8FLwHBA0URt02pdY/Y+0XeVGp2G8P9kqPtr\ndF5EewsVi763xPABmfjH4UARdoK3lpqKVIlckzrpX3fJaYywOu2QAxBjjP/H\nSkG5MXDCSujrtXnlEz2+4bnPejaz99JgrjkFfCG/vi9oezHCwLinutbD5wJn\nprj5q5OLWAU0A7/W6efa2c+EgXxjN2PdPMchgP1GD4PAautaxMn9UPodNT3P\nWnXPLtT1+jt5O0D3E3Eq2hjkWe+y3gU4f7XmBMcdvX/sDI0HljUcLnMg0A54\ny27IkYVOLpGJ46cUo2bt+O4AfUDCQ+hMkk3ZY7o1skeW6U9g+0hiQY1I9E41\nCr3bDxHcI8J5RZAiMDV+BrZ1PE6rhdbhOxq1rm8zLd0y8REdAkZ/0T2SN3sb\noz7p\r\n=O8Cm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYS2MZ7KMARCzVXyl/WTBhuCaSolYpiDtPiSCDt6z4aAiAdK2f7p7E4tBZSpQTCrCNqWdedvJRxh7QE3h5Akd/+6g=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.0-canary.80.b1c6d94.0_1580101387899_0.9096016186422562"},"_hasShrinkwrap":false},"0.6.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"29d474916066429f62fead68735b387cca4cf085","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-WPuwNJQ0GJdngo1hg64O42vvkQ/j6kGbs2k7udhAnUKMLmz0Qk4VZL5g79IVNcrfPBiwJkxP3FtPQkxdmq3E3A==","shasum":"f88669c7e4d7096d17933481b53857f5ca677c93","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.0.tgz","fileCount":154,"unpackedSize":2320618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLnVvCRA9TVsSAnZWagAAjSAP/R8LxkGKpqTw585zqR0H\ns63Bi5tnObz/3d2mT4Oz26vFYDDkkqU2pqGbtK5liJvPnJdj96jH/8KOVJNU\nHLdcdJxUnO5MMNVnGJD0pJYqSYYAboU03QHC4z9K4tIumKZU0xCMOteNsQId\nivhpnkuGNdN2sRM9mkS2h2Od3pO2ZrFM5DjNFcRsdjH00P3og7e0pe5W17rC\ngUYdGrb3Cotq3mh2rux/NNV3qa6mHV9Z46DLULwHqtnuuR9uNZsjRzeMrlpf\nLqpxvg2OTfI2rCH5AG0uiAgGnYteD5fxDzqCVzyO0vhnZrrFxBpb7Q6by+xQ\nLdjWkWWelZ1oY91rEiop/5GQjEnNV9gOPGLkj165YOUfWqYUZBb99J0JrkZ8\nuQnyGFZ/Tbjlx5QxRGp3PtCovJ+atHrZEvvCZqmSY3Di1lMGvtFtej4rnBs5\nc0odmA1uOddU1w5+UnCT+Ek7/rQqG0pxwsvxLPaJZHpxhdZpdb0+M0uK2Lz+\nF4RPjOAQJO0crFeGYiqRZ4XyC6ZJwVVGVNlzx0ajKGTlSxmwgX1HUfUqiT6u\nRU2KVxHz648huyI9mYmT8uH6w2N1lPNOkRRiQcQP9ai9gul33cRKX8Xc3qwX\nFKoBj54SgReDSUc/g0nbtRdlxW150PvyNjLIqymlaLSdpY4TgF6rz7FefJLC\nYq+w\r\n=z9T5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVF2Q9hXIRpwfT9DmB+Hx6o6glMjr8qqkDwW65PCWJXgIhAM4FcMkRgTulDizV8YVxo5gQwhVvuPEVw7LwJYsOzt6U"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.0_1580103022643_0.7756236442675399"},"_hasShrinkwrap":false},"0.6.1-canary.81.6893f0d.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.1-canary.81.6893f0d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"6893f0d64a856f378babea152c7559522f54245a","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.1-canary.81.6893f0d.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-h6PYhYmg4QuSO7IN+Scwck3KIzbLsF+UGx6ERR0pv/yvB/IN1CKXgKkOjegQUJ79bHSfyNpj66pKibqiW9tB6A==","shasum":"5a39027eddaa3d3a5deffba0bd9eccc2e76d2f04","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.1-canary.81.6893f0d.0.tgz","fileCount":153,"unpackedSize":2319494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLnxCCRA9TVsSAnZWagAAtJIP+weyviZOZwosewHvv+vK\nZSRwwg0U6HyCZuD06pqvCgaLbj783MFZqCRIg8xmAqGLdVxWLs6tlC5q98Po\nTnJYUPiJY1Ur4ncnwvTXtyvvdeTm5Jc9zeRSkMSSI7zKteacdBHCTEReuz58\nWlTU0/re0iGaxRNliG+b5anTYro2ic/A+P937KACQiy2FiO5G8RIfnlZggOU\niC1siMx0eiRwY2PH1vGxCHzgmyWjy3yL7ueAmLz423NLwESex4MHg1CeVj7I\nnq5zXnQDs3aFm2WnYzaIR6QnKUPs+Qzos1Sb/kgKGVLOOLcvUhI+hp45FAg+\nbT20YsVSgdFyMmSb1kYX0P+vc8A4hNVmU2e+yKEUnxGjjHiN+S75Mppv5A8p\nd3iCEu1E3QnvlgUBWJulbiOobl2eRL4PE5KQgJNyYTrX5k819hey+c+Dhq1u\nvyi6YBi16EsIab6O+A3H2dpUwI+pTiXNvMBLEsjstIqfjsvesVooPLBS26uK\nSe3zABFN0yml0wB7ZShCx+pbaSl9kIeTasWG50+JwNTEQ7EUEgrpIAt6K0Jm\nyB/uoEAkDuZgEClOzKzXOFYT7muMZzQ/EmMOuh47ENVfsE+IUYsfSFJdPaxj\nIaV9snHWLIM4yXMrFcHcOic1um029ZGmKQxBld2nsM68GaqxiQDCYnsIS3ZR\njSjb\r\n=YHvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+lH2Au+k1ezDY2d21YcHAyTLgOBw1AZLSB1VwP382nAiAPfBCW07yoIMk4ilDQi/Grb66px6chH+M/RTx9tYFnSA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.1-canary.81.6893f0d.0_1580104769611_0.4004090188395424"},"_hasShrinkwrap":false},"0.6.1":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.1","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"87dc061d73b364ee794c9c7471b739148d2969b8","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.1","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-8qdYsCuURQllf34199BQ6fNyHpGL2jv+fJzgKKtwqnVvm5/vlb7Y+d5+u/1K+956ahzTX5vTgKB+FjgIke4JLQ==","shasum":"db6b0df1ea771a86244501cb6b0cf8e9e08b5b30","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.1.tgz","fileCount":154,"unpackedSize":2320618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMRSkCRA9TVsSAnZWagAAt54QAJtMZ09eU5Ot8pOtC8XE\nGRPkO9xnNQCoe0wDE2yK6gnEFY8tfQQEyOJLBTVJ6QqcQtg5b7L/z80rOBO1\nVS3ofeAof2wOnMWbF477HgnQ25GXGZcfk65dJjuJ5kv8x4dVLgtu8lAzZPyX\n+or7OzBwi/aSJUgC88Qj9VjpjocdOj+/atjI0epTnLePX+8TIJmxMd3OEMnH\nxWY3FfaZD8Lo+4FLlfNjRtFuznhNFOstwySlJyxKDfLxLsOIllWp+gLLbuL+\nLfKipLu6Oz5I/3LzpOikCHXxre0LXQL1s0bckJ3W8sbA6SsL+p6CmJTteRg/\naJs0uB2jMJv7tOLO8ZNbEcF11Gwth8WDrfQmHtSoB+SeiggmyvJzNNF35gK1\niNeIoAzDahMJloL26huK1mfDqzNA5wWmuzjoyLqr5t5+Q5BIGuCWglNgw0rE\nMcP6t38y+/p56g+WVpBDD0LRlB1gtpIEv2tBLRUuPbd/ok6NVPPyUEjlAeGC\nX4LIF6eQQZC05QPZR6qXDDIufGFl4v+SAyXhKJEoRlcvk/GWiIUxGcV8h4t3\n04NICUTGQTnAP0yjArCq7M1rM2TtPfhKlmnKBpPdKvbkCCKnjZzS7+VWHIjI\nqXbdh1LixgVRmbiLJZLoTQbeB7iqiiH2n+MuguTtx/TdZ4/vZZ+8m3SBd58W\nLIl4\r\n=N2OD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj+yYC2EhrEkayUC6CvqTZaW/V8eIbRk+ipXKqdxIQkgIgDt30jYefePbaVTy7KJsIF3JWREdRznaSkbRF4gjUYZ4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.1_1580274852461_0.7243508380938282"},"_hasShrinkwrap":false},"0.6.2-canary.undefined.4f516e5.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.2-canary.undefined.4f516e5.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"4f516e53f68c0cc3dfee9d52dac36fdcd05d6356","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.2-canary.undefined.4f516e5.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-qYJrgqyqCwF/rUg5yKjevu7cp+zDtr+TL1Ve0xmJ9ch3BHjgCbcnvn9VF7fhbbX5JwK/dX4MT7vdZggBnra5Kg==","shasum":"01bd35d1f4c5e0b3729e7b5bdb536994b5c71877","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.2-canary.undefined.4f516e5.0.tgz","fileCount":152,"unpackedSize":2313238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMR19CRA9TVsSAnZWagAAP7MP/0/N1r1E/4t1rIk1B8NM\nMB2hES3Oop+y9TdYbpzxGxywuyDQi1/03sAFsdmlNo9ESw9dxXCWMD+r3Ng8\nWFDJHECDfZnUEju61a35zC+RbTHIF86ZYwv9nf0OnLojID+E2HOTsnhQEKZl\nmst3bSawUt4KHTLdJFThuvRBIQF83AV0CfDNwhDllKDB1kp5W9Xt0dpO0DSb\nPIE4MpPofm8LAw6DTUKVXaoce2lTACLyV6LVqo6e0TgUHQNW+a3OAnOcz+hr\nSjHUMorcU02IwL+cT7+d3jLxfK4vgEeSHiRgZGroutAaUBJUsGtI1LtB1tp3\nWxYHCnjrR2wQzefFUUM1gT4/xGZB+bGu5lhHh2hFNLJyax6XnaM7HEwB8Y1V\n11NDVQND1SEJBjODXLKp3iHOnlUll+8gesgQlDv0uEI2Kb4D2jdn8z/z23Ff\n0V5vkbx+J9PFY46lCuoBvoRgF0VmVzckTRznXIDHInO3U6biMsmxsW1d3tdT\nIjCZnkhWGDRQsEXxCesGIFrHFlf4s9P3l1iNA9r6Hik0CqyJohqIpE+ozzBf\nmnuOXMNW8zvFaIfEiF1qiAYgSaVYW5KN4fJxNAxxQfqH8GTtN4mk8nRvx6wL\ngwnZOSc8rcJ0Di+yUYp+dJXLXq0VvYp5nHn8cm/7aBpfFgmUPXhPUaHL2QFm\nhXbe\r\n=zkr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL+5k+8OWa0x3E+jmOTLHC1LRgjRMnIFnKD2nFHhDSzgIhAOBsnbvOxbLWBk0XXvzzJ2RE4tl+iuDqOWW/lPGpyRLc"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.2-canary.undefined.4f516e5.0_1580277116528_0.11821966015668761"},"_hasShrinkwrap":false},"0.6.2-canary.82.4f516e5.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.2-canary.82.4f516e5.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"4f516e53f68c0cc3dfee9d52dac36fdcd05d6356","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.2-canary.82.4f516e5.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-XL6mD1Tlowr9MzbBMIPLW+S75Php9H29yKNAd8T/aQacJc7SvkfX1xBYmY9Atw2aA7Ihc2BQTpVe4DX+F6tQqw==","shasum":"8fc5c821e3aa6146048890f6c42bb58e1e0fe54c","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.2-canary.82.4f516e5.0.tgz","fileCount":152,"unpackedSize":2313231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMR56CRA9TVsSAnZWagAAjMYP/24PdlMhrvRdLQ7Dpc5M\nRxZ7GQunPmqkXnBZ5E0VeVufNlaASd/ibPVR/S5TTCN1/hAsqnkWm48OPOoi\npGNxhIJTOeK1bb5x4U0r9ZXTl6f1Qq/X2Il5EmFDgafQSV1Y5W6mIWE1R3dG\ntLhjfkNIZInfO9ZduD3trwt8TGpLk/+hIW/SrmTLawDrmUSXv0iNbAwBTX7a\nRgVjRIiA6TVBRc3EKrayU6Xt1KngJuGT+Rrp5UPh8sadJNq99zPuLjyegu8G\nNtdi1OzcAhZ0Q0el4mnWMDY1UTEf7lJTzJZdKyJCYDbcysnRgmTzTZP4Jg+B\nLvMxGEPwJaraPXoiKPs2wMZXxUZndKPNlALTKNMaiZ4vtgyhyq5teasWbrIY\n9Ciz5DCk8oJtbKIZqEj0Z0oUas226kA6DHh4TaWkuXDP+LN68/ZUP141jndB\nvFNyMyvB6L1yFnEx/HyEE2SDmcH4Lx3NERRHMIHUKLg59SMLACu/ozbhktYF\nh3hhhOpCRaEh4T7cTTxl8yQtzbttTmP+6mHVrvpCv2e0kXqSQ/Tg42JMXmk7\ngaCZuuzr+e5U5cJMda6pvdKZ0ecw2BfaMIfDbRRA6Kf+P9/grILS+cQ1++oO\nt/dvV0C/FafHomN07v/dMD7t4OczuVNp57g/1O5QYIz4pyPZOWn5IpT4BpMN\nIseo\r\n=PFgi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEhofLHPej5xNKG3VRMsv7X5xYWEkfF0PcSpx6n6Ax/wIgG0D4KM0EHZW00VNWFoioY8Uy1+TE0J4y1mCCZfxhb8U="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.2-canary.82.4f516e5.0_1580277370235_0.43767016946781356"},"_hasShrinkwrap":false},"0.6.2":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.2","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"6a3a8af54ea2bc043b006bcfbec619eaa66ad30f","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.2","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-KGnxHhP1BBIDj92eKXGkzznNVXRID8muP9W/wguYNY+Hvk6+XIJ15ul1vhAxlovXuh4z5SwAmZR3xtqUEoEJJA==","shasum":"0645d579fdf0db1ec344a0bc2025c95458eb937e","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.2.tgz","fileCount":152,"unpackedSize":2313433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMR8cCRA9TVsSAnZWagAAJ7cP/jpJZLqdZs4LhRJ8PAH1\nEpOJL9euYmm/uzIFyG122GX46fy3/jZumL3KkBFjMvhAMch7Lk9W0r+z/q+i\n/Wv0RpQTktBOEc31SucbcoBZrEetR8dgKZ2hAaJQPnmHjnuDJwx8pbCPDKft\nCeIim3CLILXQcjPLl0ft+l8mfKe3RniHX6fjPqR6Y8X3BTWut86LVBJGTCHk\nLGEHfdtL8mvLHI5BqumTkJPEfg6NaGnZ4d9OYYbUd4D5000znT6la1uqGk8J\noIsqCLYIG/uft/BBiOhk9EGc6g7BZAIwHB0hBoSMfEIIWttlxw5k5TKLDNlK\nfc3XKlI3PxuP/wJdVqev5fBxTVLVF6d3EkrpDUYykl0PCvhUN/x8EG0hKvyv\npApd5aEhuPjW2xpl0v/fnqDeIrEzLknSGBkt5YehW0XJCMdoqd5cU4LqkB9V\nSR51hXVEmyWBTq2L5NGFgzW+KtVgkWUEuNxXr6bVbpwCcV0++9smuUeBqEue\nnWVC7IhXLlLHDk/RU5ELlWnfVqDkX1RKV8iHkm6tKc3oOHhov35uIakPoQ7y\nMD8/V5XQ43AKyEiraDPs8/XrF14bTpFEKHhudpfyPRTPga7EPaGCmNmnMZV+\nO6jj0Qou0soTb4eQFno8zwQPQ6I/6Aa1vV8LLplhvmxSdla6qyS+s5W5q96m\ndYxG\r\n=zxgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAX83X137ChQcYdU2HiwlMfsDiMJeiwKX2TotLYNBaACAiBecVi7+o0L8wnOTFL5HCGlMGfPFvl3NHgqm6NnjBk4mQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.2_1580277532216_0.45574621301117024"},"_hasShrinkwrap":false},"0.6.3-canary.70.fb8b4de.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"0.6.3-canary.70.fb8b4de.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"fb8b4de3195130516c969241bab8ee766ebbb3ab","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.3-canary.70.fb8b4de.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-40zr+XRj6jvwMzpJiSeuEj8UnZCx9bIOhEcJwoePrX3xl9FswlRzwh6D4WSx1TOT0RJT8MvrRP2xSEG9QbfWpA==","shasum":"3db2ffcdcdfc7eabcbb1c7e35d1a38173eb4c23d","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.3-canary.70.fb8b4de.0.tgz","fileCount":155,"unpackedSize":2317097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMl3+CRA9TVsSAnZWagAAnFUP/2MsainKKepOaV8hTZup\n3S9VZWGjpSf3b/bUtw0KU4CGcNkmV+cw0t51Egpzyf9guOzCwtLjgzWr8EMP\n/Gfbn0PLwRoywH2MWsQ6qrFXU6OZnsiMwiiod8ydda6DMcWhBiw8ys2GUn7z\nHfxxHPnXWHO10UDlCgcrK07Uiy2kVEvqqtKuHkqHHYNWwugBwh09X32HKmKa\nGzKacC+KXe6SBc9hHALovOQPXgYe7koOJ9CWxk46DZvshqo5H1uQebGFzaZk\nxPOLwPIvgZRRufhZRBXK3VNk8OIDncoljU5nOKiHZobZmDeNEypVixiFmKwT\nj5Sv4cSXSzKt+xY8dMO3a2+TE9Q+PsN9I9KuZsxUMKQ73/41AZZ1OSlOvU5D\nEXYoUhGj4VJfIULsbjRh5v+TTQpyb+dZNKb0j3tAnl5zSpQCAJ184xGQL4oX\nYyJuwi/ZW6XZR8GHX6dJ4qAe1VuyvWPJS6WLC+EgPLeETu56vkHJUQ963RbP\nFMmYrF8/jv1FsdFuG/lpMCOuXA0QbwIqcpfUBY7VT4aMi/zd1umkUi3iLtPd\nxy6eqjQ+WFfqNrbQSoA0Bf28pc6Y1F2rUuqopgAp4Qt+4wZQRUlAJrnma27p\nnydNxzZdn9KO1NLlfolW4+6MtdYeNylB1oiPPLslLpvGRAiudF9JgBsGc23x\ncomR\r\n=6VD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFo3bsuwIJkJd8lR+k0GsCuNDoXowO1rZkcqlRiL2ujGAiBM562eLeeVKGSPRg7npGGqZwjSJMFHA3kRpCRodBkGCg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.3-canary.70.fb8b4de.0_1580359166284_0.5587581499917214"},"_hasShrinkwrap":false},"0.6.3-canary.70.195015c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"0.6.3-canary.70.195015c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"195015c82c0a4f75770a2ec14ef649e71fa68a12","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.3-canary.70.195015c.0","_nodeVersion":"12.14.1","_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","dist":{"integrity":"sha512-qUcWknKKL0R6ViYVZp7LVynZsPAg/FBnH1M6aiLLphlP3G17EKTmvnK2jKw+UBA8gU4Lh4CEbG2Y/X79xSkUCQ==","shasum":"ead9fb7541133cf2d72fa49c3d627ae34f791c15","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.3-canary.70.195015c.0.tgz","fileCount":155,"unpackedSize":2318638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM8bDCRA9TVsSAnZWagAAI4AP/3KieB4ajfAAs7zu1T/P\nYUJCA6bVWGDabPFu/XXyvExxKX/96l8wmkQkdudVwksm3tg3qmi0r15SBYWA\nRdKU4a3kv8rSiACzTsAlKP4bNZmh6tlj4hy7WLD1agUs9NlRbozUMkKBgFbA\nZ36KcnAGAYQpQiQuctFQBfyFkozH8TGPsRB9t9vWFE2GBoVNBz1KiI9+rb4p\n35C6VkxzxDLgNhNNISJhcW0OG2bluoCB1hp1me8u9qZwSl7/DHj3oo0mFp7u\ntwWX97rO4CfRYcUSAaVlAPS3f8CrfDotkUiKfokp/+ppq7bOkxb1xqmE+0wX\nswxEgRqLCGhs2OfA16bMQXM6+Ma7rq0jtRRp8Ha22+kjU4Fd+ra7XKrRHsgV\nIybg4dNPnMaYAX3hi8+bImi/JP6F8kBI5TVaMceSs5jVW1/K+hFTdgBGr14i\nIGTxfT0sA/WyRVHSqmmS5omSYGa8MxldPTgobIR4guqPx2VL5ePQcdWPJXli\nMb9qp1jkdHiEOlcVM1NfWtFztUB5TItbpUVyjnQZoM7fjs6JtQTPa4Ku5yRV\nY6Vb8AgJa9GvLtxH9TbSUweCE0X9m5WPoEYRnFPizZdBiINRpzMphFguJhmH\naXMTHyf9iLiQdsyhlZXTS8yEOQc3Sfzw91w1/po0iko/X8AhFNYMSg+zTPD1\nuVtG\r\n=Nv04\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyc71/TUoEVv/QrRVBH8Vm5m0hP1qxdVvs+pg0JP030AIgQjNLymcum395zIOZfckQpZtTZy/upl1cqxCM2HMuCy4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.3-canary.70.195015c.0_1580451522406_0.6704184651842497"},"_hasShrinkwrap":false},"1.0.0-canary.70.428351e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.428351e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"428351ebb088e7ba923f1856f1752afb60ef311c","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.428351e.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-SBCUU5AlLVd8kMLxee8XifLr/QjdDn3qtKVwsIY73SVMX27+FPvwAJsMa572njap1sBp5dtllD618DxxrKRQIA==","shasum":"9faa940eeccfa34cb63b95dc4eea47e50073ba34","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.428351e.0.tgz","fileCount":156,"unpackedSize":2337802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUZCICRA9TVsSAnZWagAAXJMP/060Cj355GMVjAFZHKv+\n634QvjEtW8zGWUWJZnHr0oTxtURbKieTLdeTiZMwssfk3SLkgJ3e5r8v45T5\nNDRV9oIcMsbiMrmHhnTk6FyM8sSoPitysCyw25JLRgCtKB9MR4RMSK7I29pR\n0mOUK1PspE0deULFa+0zMuRenJjc6OzZTf4bumDA8b8WZZ1lXxJAxmwkYSP0\nGTW0VwPevUab43uP76JwDrzRa89++UMUfES+K+VSNDzbRyIqlmDBcPXHYZru\nwkyYstC+R0B9ctXr+rwgobNfwfDn/HSXQnfHx5/BGUGl7KwEbDs4Ne2+MtR/\nK8etGbACHFLZ7/SxZN0yor1Luu9zRdxS/vMRADkGeLsWoXo01C2xE5eUSRNT\nKxNd4tjb+1Am9mEAsaJcANJwm2WivZKuOVCG+8ZR0lvymisDv+7DRQnngnPR\ncYIXZ88GO830FnOqM7o9A8RfiK0FEXAh+uZK3Efy0DPt2fGJQqDGyWMbAekN\nIYXDJ2PWPbNAymwg/rxgaGU/sh5Ui2y+GAeN/jjk4Hk8GB7yYJhG4HzqPCWi\n2qAIS74wnGDCjt1ZZWUPssAYeSv9UGIZWGISot1mdpq26hfEO4hHEE/vj+X2\nrR99D/GpVm4eXKT65oN0gsD9MRpFvmnMvmaWBpbTuev7GpZSdNW/vtLuLzYG\nK4OU\r\n=mZ/F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZomI64WyyfeZo04lPiP12JFj1bQmCeLyyvY08UDUPsgIhAOT9BdfD4x+FMJ2qAkFUKAXUPIk0vKGQ9yoJGmiGIz2j"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.428351e.0_1582403720064_0.479651132197614"},"_hasShrinkwrap":false},"1.0.0-canary.70.27ec99c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.27ec99c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"27ec99c2643fee48e600fdfd95076d595aaa2c4e","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.27ec99c.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-ezDi3L9+RxAYYwGcWrU0zOYalEPBrV9IxGFzPNsda4aDoJz2ZzzpIM9KtORsFfWeyq1xvAeMfwKztTDKjboPZg==","shasum":"5d21d532fb79dcb92ce330e00b9d4612a9bba0ee","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.27ec99c.0.tgz","fileCount":156,"unpackedSize":2339599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWcY+CRA9TVsSAnZWagAA1O0P/3BjLssptEE8CF804tD3\nQGwuxE7NBRPOZXsKAi6pMyYB/trvl0fzsMVsKVOkgOsNIlXECxWPygtPWfFJ\nrFMwaaN/sJL7PR68lJWHjWxnUxwC5mLTOM41DB+hnn9dipUauqc2nx5q9Ndx\nvgqCdatThUfbBXSV1VIYRTx8jjWUm5pIX+mXy1Xu4c6v4+4TcAR5y3Q60Luo\n+7OwcW5KDLMvCrAwowHJuvxgVNATnMtMawyB4g6bMPZN378in8QURosd58vY\nMFa1lPcJlp2DhlssmjLX6KhU+n+rA+31j6tMHgKZRNNjgyaq740Iq/Z3iN1f\nK0fe+QgY9s4MUPAm/QQnrsKNslRmIJZM82YsTkg20QM+xipbUvfLFXrzR2op\nkpcrX4YyN9b2KqOujvo8I7bCihvkDUuUygSAz/XbBqYpM7QyIbSkTwXRa9jH\nTMByqgIPgO3H0Z5fupyD7M5++6qSDA3mnMsahI+d8IELBexhzmZf2LrEh+7V\n6vBzdEBKt7FT1VEQw1rQavmjzsGV9OtCo6uf12ncnLleMCmkVHpMz1FoZDOA\nyMhFnv8LY0QgZfeNcWvYu4TKutP1ouwI45y4A4TnphkefLf05RRAOoyTadpp\n9gxQv8AM3cRBuV/4hQOH1zkJFdXsLg4d3ShWYwT2SEWWNqClD4MbpdBtlz6b\ncvo+\r\n=JTnc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyEcbW4YSEwAnl5QPtPckh9mu/+Bnqz31e7wl0jCxldgIhAMApzKsue9B/DXamvHAMSeswqEX3M/65NdM5XotU9iNh"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.27ec99c.0_1582941757444_0.7118423829771936"},"_hasShrinkwrap":false},"0.6.3-canary.undefined.503bbf5.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.3-canary.undefined.503bbf5.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"503bbf563cfdd093aa4853738ac5fd102c30db30","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.3-canary.undefined.503bbf5.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-y+ni0tkF6ZbG1DS83OEohOaJSx3CfXMErwX5PGnLP57T35TfiKteOQDJGH3myB5CaNyRQcK/pcNlVp65htEVVw==","shasum":"80a438b89ad17cf03a2bdd96282d62aba9acc25c","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.3-canary.undefined.503bbf5.0.tgz","fileCount":152,"unpackedSize":2313388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdmKCRA9TVsSAnZWagAA4wIP/2THisFWKGWHh2y0UXkR\nGTIVTLdltqNwWg2DxsKi41p78K9i8B+1gn4B/+02E1jb3XTkp2iEwJzcp+R9\njlOYZfzvltfYQphMbn5Lgh3GsGDrKTRgKc+Xr/bExkvaRenQqTaWvGI/w+D0\nDn21v+iR4xsi2kH19j50AslPRR/02jYOvUBqcACn52iaWdavcVFukoCzW6R/\n0sQyYKIwsfsOBgu0d75acnshxCNnq1ERcPLAR7FwWOEEpAhG5YnSL8OxJZ/k\nF8lN3Q/PTaiXKtJJADFgj1WthNOgma+EQ7Qtydho4YCMSJkrl96aHueObpu3\nyzPbGOVe/7+89iXOhnM5omuqEhBJiF5EoJufEeIJTxGmXUMDjg4xtOOiBrPm\nQk5E1vtiVyDKSYQ7Ck9Xh/reEcUFnfFKH2bytFgsY6YR/W4vGDiVwk9IOUOy\n3llrnJyXy7PLzxO3ckQi0bYpB9HY8mpED7428vQN1jf1pWUcr24JikXSUSOK\nXTq1nt1ro+3kRxc+4xL13nkjFrd5kNxzQVBQF/+MeJuMo9FZRMlg0DafKR44\n6ARSxBwdzTJhh6js94rpG7DNTWGkaIhO/8/azidQYR70VSu5sKMF+xAjNTsg\nbsFrQtGIL3ii3gS6XcgaOeTGgdvBeV0/ySgYUd+4R9qTbZn2Bh4bZDkXU5Ts\nvzPg\r\n=XkCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQeXR/lNQ+kKN3pqjlQjF7LMnqs9E2NIL3hK1I11Am2AiEAtqXMG0i4W8qlcEXoTv3xnMnKR9RuCMju6u9bxdy44r4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.3-canary.undefined.503bbf5.0_1582946697519_0.03512997860032452"},"_hasShrinkwrap":false},"0.6.3-canary.85.acbf24c.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.3-canary.85.acbf24c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"acbf24c5abdb45c8cdd38f3cbc90637c2efa85c6","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.3-canary.85.acbf24c.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-qChyb2/+EBtWu5Aynx41Pvagakh/nkz9UfAM0WmKnAEkYZr1cK1CMJujq/oj+GBeCWOb/CJgS+0kWzmEvoqAyg==","shasum":"41636c4d0459ff9688c7765284e1b4125b2d777b","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.3-canary.85.acbf24c.0.tgz","fileCount":152,"unpackedSize":2313381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdziCRA9TVsSAnZWagAAjrcP/07quajz1C45XtM2S8RW\nb94C4I4RtdBM0E67vtK++KuAZpAisR4EvRymCFrng1M3S6Um3ND74CpwUp8O\ngmKuL9I+mBpiTSolcOg+JvjLegoyI8ZTypr7usK7aVQ429INy2RjxUExXMig\nsGujnpKSd6QQ/nhPIW8LLPgU7BqmlTg3VzwpVE6Ug2ZkLLHhGjq9tMcx10dV\nUu5K8r2uVHK5Oc6Ce/MalYNunZMH23so70Xfg+EBztefaeGeeVyD1c3j3ILw\nfQR3JbEmqmyj5twx2gQOhWOFLkb+TTAoP0XBMxyBw2Y4fdfLC0yQStjd7iRr\nmskIc7uptFKtyLp/uD5b65UOTNN00igfbgGPDZqxFRA8jjrymRh32TtFPINf\nE4s9jM58r0/+Mij/dfGqdXhMeUjjVOd2fCsg6kz7GOALYfeFNkdFDm93vfcU\nQhLBYmYvXBFalpUoRqXd9ly0dTeL6vx3oPgiXPlKKk5EwaPeFsIzQYcQrgpi\nd2j6RH5JUCQZlZBmeZ5N3ctThBVqhV5zZxA4dvUn6mritxjo9dYgSbgXK/wT\noB9uymoGlxLNh5DFQRx8VxpbWTeBzQZKCBgH8TrkapmAEwTRHr7DrPn/0HVU\nTdcrOdLKVO7YfRdqviV1sGNuB3qI0BZ19MLSwrOQ3t12LHkc4WfVbtedtaVE\nKFQL\r\n=EwA+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvAv3SlkqubmfZTvWd2foIjhR9MAqwAjxlK8pnHPWV4AiEAv/TfuXgtQNjoJsI/Px5SVwIN7HZ1HOl/YU8+X1pp7Zo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.3-canary.85.acbf24c.0_1582947553911_0.37380498105445215"},"_hasShrinkwrap":false},"0.6.3-canary.85.fdb5d08.0":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.3-canary.85.fdb5d08.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"fdb5d082aa0ce832feab066550e7e5de3a6011ed","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.3-canary.85.fdb5d08.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-eUAYenq2OlQiaDqEufKVL6krR8XwqCB26alXMznYlaUM0tLFeib/WgQuwXZCvJaZejV92c8idB7UnFkTwBsVCw==","shasum":"951a1bb6fdd493e2c9c1a0c0dc403ba778101fd4","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.3-canary.85.fdb5d08.0.tgz","fileCount":152,"unpackedSize":2313381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWd5hCRA9TVsSAnZWagAA1RIP/iVuF02B8Mg0wcQuVCRN\nwHEv+J9HtJ4bR/YntsawM2bu+R1ZCn8oyFis1C2qWbxu0Tvj+iM60YT+0zQ/\nwX8nPCWc2m2G+FGrvleTQcFK3vHma5nEqCCcugkEVx4Rq/dugR6JFewehO5R\nbPyl13D82Pgs1Q03sNC4eOyobTRwyaYXDcjiTdIxWu2ZE9BNz1KQvBzlVMs3\n8QmBiPmSoE+s9uw+oDMDA31PTshFE6alrLoyOU6XDwh3eIp+CGO2+Kjd487a\n4wB4cE+bAiqnvdGVGfyC0K+yWzJo3k792FeaDFMX4ASAe71oZPiY7XHpbR5w\nMnRs2EK/JanjwIzE1mz9USAV9DGgqYaL93mFMFTZ8KhpL/aQHYILV9AvPaSz\nTqfIdNp9yhZJcW971yhv4J2QU19qahJ4w3CTH0llPFeVt8pNHWpQe+zAMiR1\nh1Mt/KkpyfD5CeS0vqL5i5Y+WXS/GmRgQAZsNTGlEAlPJXw9awBYX9hQmWLt\n+R1JxLm7YiGKaWjP3SgW06GGlUMo+kZnWC4p9MbrEOzc4Z8yDOPQkc/pw1xD\nnANYT8zxW1FEViYabbg+bFgaLazPDs1wTWh9BktSJaQ8GqN/5Y/uEa5Q7gqV\nKKQg6d2p94Z/BbdvAwLvYoY0RI2hlNfliSNThxRuNo5PRF95AHELg+isyYva\niBaf\r\n=ZUHW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY9qRCG95sM9QFAh5VhVrWKYytwbeWvBkr23Ev2noT/AIgHAZ0l/KUvgvedvmZA7QDQ0BV3qERiG9/gmmafUwwrQM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.3-canary.85.fdb5d08.0_1582947937378_0.12137085783060497"},"_hasShrinkwrap":false},"0.6.3":{"name":"codelift","bin":{"codelift":"bin/codelift.js"},"version":"0.6.3","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"b8e986e7d84d522c6870bade7ab9080cf3926570","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@0.6.3","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-DeNnu/U7bTqk1diRxC/DvW7TTS4exRNLy3u+Y9H26dEyloAc0/BQyC8UEIHb758IH7arB3MCauyQiw8ZEXI2tg==","shasum":"3da5e57e1489c317a1fbfe7544e7780197fedb73","tarball":"https://registry.npmjs.org/codelift/-/codelift-0.6.3.tgz","fileCount":152,"unpackedSize":2313670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWeOyCRA9TVsSAnZWagAA/lUP/iJ2cs1Qrb+T93NHBo/1\nSBiZWNjB7ePPNE3F0j7ABwf3ifcWIV+16G/wpQj/WQZS/ldbA1bePRKpCA5s\n2TrDkBn/vElPbelNGaZ3Bga7kTOk+7zmHMWBsQNQhcYNPHcOeYlQw/dsBciK\nSvrvm+TWRkZhc3JX/7ERps76lms5Cm12pDhG37IeWJkYdk5XQ03+gszXV6Uu\n+qqF5pDm2y5N8ZgyTcOlirh91mJlFEX38Bb929OFQ86la7kP4uy2/FQ2s4Rj\ngDQY++whDgWtLMGIo62WnNkpjpIfy90p1Swe6ly9pUIGhxM91BnZCirIt5w0\nbfdhY1hPMzM//WBxPZZvTt9NrBnAZ8O1hO4RhoBmTF+RyXK/jmR9jRpnBGv5\nPIAaFKxh83SjSyj+4MgpVfwjdE9awORCzzsO9FysQy4ufvguBhajg77k/azT\n58F7bkFkPNMsPPqINF7eCYOB40ANRPGrG3WQMptFlkeKbZ8ywKSaKO7IdPri\nGIyGI5Ii9YWh2NMPOJWNbWbWV7NJ5alnti5NPsSY4gVthjY0fJ7YtyLTlrfO\nJigAU19q3ULZXXxPUsCOMF1WnTc64N2CUhw69H41fW4eUiGswhdNMfCpUgTB\nMwVBsCPXM6VzfGERVUlM1KC5B/Cxswqsbw8qXYHnP4RwZBJcKampNwUvRWyb\nkqu4\r\n=Ughz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjKIuN5gjrUVBE+v2XkAwqO0nhQiGIGIiTZYZW6t50VQIgDxS9zCjm1tPalvZoJ5nrO+o53bOirfWj9obaiuDh+oE="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_0.6.3_1582949298009_0.550750321167395"},"_hasShrinkwrap":false},"1.0.0-canary.70.ae980a6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.ae980a6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"^0.5.2","@emotion/core":"^10.0.27","@emotion/styled":"^10.0.27","@zeit/next-css":"^1.0.1","apollo-server-micro":"^2.9.16","classnames":"^2.2.6","core-js":"^3.6.4","cross-spawn":"^7.0.1","downshift":"^4.0.1","emotion-theming":"^10.0.27","graphql":"^14.5.8","jscodeshift":"^0.7.0","lodash":"^4.17.15","match-sorter":"^4.0.2","mobx":"^5.15.3","mobx-react-lite":"^1.5.2","mobx-state-tree":"^3.15.0","next":"^9.2.1","open":"^7.0.0","react":"^16.12.0","react-dev-utils":"^10.0.0","react-dom":"^16.12.0","react-feather":"^2.0.3","urql":"^1.8.2","wait-for-localhost":"^3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"^2.0.5","@types/classnames":"^2.2.9","@types/jscodeshift":"^0.6.3","@types/lodash":"^4.14.149","@types/match-sorter":"^4.0.0","@types/react-dev-utils":"^9.0.2","autoprefixer":"^9.7.4","cssnano":"^4.1.0","postcss-easy-import":"^3.0.0","tailwindcss":"^1.1.4","typescript":"^3.7.5"},"gitHead":"ae980a6ed78eff9733749ef09f507e74474dcd31","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.ae980a6.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-tYEVaV4gwOVnVDl0Q1bCcaNgy8Cz+BV0S2GfYI18FSqp9oSKAKAbdVigW+8fniOmvJTNAl2XPqWX/bsPW++yfA==","shasum":"4eb55a0b567ce79f5be5fff2350b487e33760f6e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.ae980a6.0.tgz","fileCount":156,"unpackedSize":2340686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWfKXCRA9TVsSAnZWagAAowEQAKFDhOmDJoBgOxhgNV/X\nDQ8KzcMYI4YUDmAIVe4gBTcRO1s9fOqymICx11dyinKrdphKPjw8t1TL8Eoi\nJrSMAlHSEOD/0wh/ttn1gBSQQF8boGvEEXEhDEz8LEpoq16eRG9vVITZWJaO\nl8pBikRiNiMvrBUjPObCaXgn2GiYEVAAQjUywaaNNmR0IG3W+CtPXsAF2zYF\nalc7dXsBhpcIbWHcyAWG6swxzcWinhjRK9HzZo07bueww1NMBINRtnqwCL8E\nmAqeHoG+mUYUjv79CoBhQs1fbH1id9IZ8+VQLXO1kISt+Dc/7S2HV29nj2f9\nAV9Mpm/M3dUkAbN715GaXCXO8vgh8spUec91IAZseuYpgZJhyrmAL9ZtSYaQ\nW/wXU0DMAa7Hio7UntCmQfLLaycNXoGkKh86UIggc9TXcHjlqcD5FpSJ7gMn\nwBi5U7oOrZEKGaN0PUwcKn+Q8xR9cF/HCfF7T4MsaHaPy0G5SlNKtYBO8NJg\nVk0eldiS+3uyetHgkj4mDCfT0VuSXYbDOLHtH5Y16X82hki4aTxpZ2Pmdi8i\nRee8+eziKnaaRLCTsGLrcl9FYra0kK5QVDV5UhiHXa/rpG9FkgvNd8LWR3VX\nFswC2ijA6N8SXwqqOLvzw8dQ6V96nHGLbT92mwQ2RIKFPRbn3HawdH9e+czv\n+kL5\r\n=TAZp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOPdwlxeP7OWS2yDCE40Ie2cWeRd/rqIqvcfsxctSjhQIhALvHrXMemFfmbMhntPGW6IsnWFbjaaehz4zuk5zKIdhk"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.ae980a6.0_1582953111522_0.23569584399123977"},"_hasShrinkwrap":false},"1.0.0-canary.70.1592b67.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.1592b67.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"1592b67fcae55d76f07980aaaaadad80cc35ba5f","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.1592b67.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-XLdBa1/paANpUIxRHunALUE5V6Ervy+/bPjgwDtqIaqW74OY+78eYWp/cT8qVUYn5S34ZDJFsGZNHudYbwR2xA==","shasum":"b4151d06907df09ede32f85dab1a6182c72b7a8c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.1592b67.0.tgz","fileCount":158,"unpackedSize":2355077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXJbtCRA9TVsSAnZWagAAAyYP/jhC/lmUUHx3wRqK+r+1\nXMo29LOTHem9NpBC3yHM0eDUxq+Yz9aMDbdG6qUGabwophQ4a2rF23LMMrIG\nK2hAQxxGr3HglK+ksfedwxhlpFxe0P7JZJ4kcMG/bKqrX5dwIALD1C02/nlB\nLFLfGOQ6NrDnimcpJ004Bun3CQUXEQbSmqKgpMCjTj5abzXi9cZObUvQRUII\nGn51Ua2XWRbWZK21gp4A8EJNSRbvSFVGtAsGoyP9Yl8Z94KSKvWb5QL6uYWs\nHGw92rHi4QcSM3zOxCsghrGDaKmF+t+suDMjrP2+yGbRfKDeLtU+HJ1V6sTk\n6prCxorQGsYix8FRjyqStSazJf44YV/kwoanVRKlNxfefgMWpCSlPafLWTdK\nSEPiWv5N6tus1AypQICNlbLRgGd34FlQXhE8Qg7AQNSeUg15RRSP3yxLQ+j2\nf0NUkzp1O0aIoohm7H6zwXs3HEXrcG91Jj1C/eRf2ruzEoXrgkX9pPuO08mI\nAql/WewFDwGg+fjLJZq/RMZIOEQ+izyvT3e1SelSHQOr//nxOKtGxT+JZxrI\n0rV6oTY2mYWF7hHEe62vsMzNZK0YzG8NmHpQroWeyTuEj4pI6T61F0gCSop6\nZvk1XWYnw9OZl5XccEgBrauVPFBQEBlVMHKpAdjlHG8xZiwkRrj0k6ORlgM1\niZc6\r\n=DAsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj4DNHLQYvvh69oEuk08OsVDDIMOLV/vUvl0Sx+84SggIgHXldi56KTX20rOL1h2m5s5QLqhvFbno0ORUk9Zkgc0Q="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.1592b67.0_1583126253131_0.6974823519587785"},"_hasShrinkwrap":false},"1.0.0-canary.70.40f62cd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.40f62cd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"40f62cdd927821e401a1207e2a9f8adb22b7ab6a","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.40f62cd.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-OtqulILEvQvUUBAgb3ULlnAhIPGUoOuoynnzxSozDWKBuHDNNv7wDbUkqwf59neVZCnNEMPwaNkzCme43sFEQA==","shasum":"982f00c8ab77a9c171961cb574cf036a5206a4ad","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.40f62cd.0.tgz","fileCount":158,"unpackedSize":2357776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXf3jCRA9TVsSAnZWagAAVqMQAJxNf5y3rX1QAlxHOc+f\n/5NGKJ7GoZs6sGq/ZKwotYs01JXvenLee+Rx/y+yT+VT20N+5hSaCeZTNWdK\nxg3nr7pTXwPhg+xSIa3oCKiB4va9Nm6FHTNksydNQzM3WjHFqELwKULIB7sT\nd1884wpun3ciFYTmVn6ZnX8kp8NRdCKhcBqE2z1crG77HXuU2TTFU5f7SOoN\nW6nd1JxFleU9g0dBWFA7waW/QdBKn7dt7khByGwGmtbvnmYRfCwg7J/nFdLw\naLv3ToQpv18JJXpgEwcJ3ApEyLj23ZKAITvYJRWNC7ZN1PCjHx7h6M7mVboH\nLCfuaWiN0vZ5UFgznQTvfpfB4MjoRJqIy0rK9hwqS0zKZnvl91daxdldyi7o\nYb3PqUMHfcKeYpalCGRgg3sl/sbOKy2wUfwCx0z2xJb2w7vrs8erYkjb3PXT\nWrwdsfID77bFdbt0U74B8Uk18YSogzJY3uxCI+3qDXZyf0E8fZZ+IrPxcgqP\nujm1CZlm8BxHcehytFIkLb/lrAsurlzEqublVWhwM0rqW9N+/W7hu9jpOGxR\nIQCw3N/ttpNMgzk8KBeh2VKnSC3TT7GqhjUWvAXXMdIIKHOt7YLqrnYz+Ey0\nR19ieQyjMTt+0oelINq+VKGVwpvxeBGX8bKHVCQiVwKK+I+KlVjprbzLF4ch\ngWKA\r\n=m6wL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtWakDWiTRGaGxBcMZh8GgGGWhnz1dDgPTvshf96A0oQIgN+WdmJHAQRfV+XN4HbbDcsr4+QdZPrXcu5QmW8+KRFA="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.40f62cd.0_1583218146980_0.14279053221523585"},"_hasShrinkwrap":false},"1.0.0-canary.70.2bfa47b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.2bfa47b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"2bfa47bfb273f9bb733cf4a393697e1fdb038f73","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.2bfa47b.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-GMq2oBvlvWv/UpYPqB24USDM2T6HdQ7tsaSg6r+YstLWnXE2M5c0Fj8xAdOdVGELAzcCObHqgDpiO3N4F5+CGw==","shasum":"669b451cbc85274816f99ccea84b3c6a09b3d6a6","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.2bfa47b.0.tgz","fileCount":158,"unpackedSize":2358233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYyebCRA9TVsSAnZWagAAup4P/2tELkL1h+uaNobAbRu8\nY5u+feiRNpMtYxvVozMrjjwJOdmGT1dD4lcUwz1YkaUrzNQzDVl9oY4pqanc\nVtE4S3r9SaQ49pn5r1nrYda+147NoetR/4K18SWcOA5Gr5IzINhLGDMFJ5V2\nBHBXGTvo6eGz1KaQB9+gyFZDh4SQxDVuuUjchlcUhy+b011dUruxC8sDreXT\nzbeGQNoBQTuEYZPMJAANbACFuDE9gPTZw/6ely9HpWeJUZ0kXdTKfZiqJixm\nSXUBK3/nGbyc4HLgrjNnt6PP3U7o2+5Hj8vspGOY6xL08woQ3hpkGmcYW4mh\nHyomjHwZlBzi96UZNZy46yCG72MmHIMP+wmQZp5PerFaA2U14Aw/1b95n+Q+\nC8A37h4r5vyC4phb3JmoKmSDP8TKEyQefEdMuK+em8mGA/0duW4in9ZEpopB\nMdfTTeMhEYcVvJAS9xGx1pZqggkcFYBOvgx3P7iQA6hWkTMwfoY6nPOgR37R\n5bkhvH2toJe1ck8rxpy6nuY7ABU9SbsqtkfKaVuaLItkAqziMFu5jUUD2nk5\nP/rW1bNevjcNIi0Phm7yOsiT60JkpYd/jGosuJKftWVhplLjDq8k6WEC/z70\ngCwX4GKquo+zkGoWqROEk8cn+e3gRPqQBq05O5PXQEASGzFhps9MBJFyQ4Ua\neB6T\r\n=XV6f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZ0dDrnoF7KFGW2Nfys27xu2WVLbGogzNdNIq//+atNAiAeJnzeGGp1mGOByAZf3tzA4rF3VuQUclD/Q3z0MHikRQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.2bfa47b.0_1583556506695_0.24172199696777552"},"_hasShrinkwrap":false},"1.0.0-canary.70.5754db8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0-canary.70.5754db8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"5754db87d5f888b72c18b91be644e82362f94d15","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0-canary.70.5754db8.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-JNjjLRwWCDK+odKvP+JudIukWyKgcX51enF9QavVby8+xfpkVQ6SFwy0Tvq5MeL6t2Nk3FrSwVdu1Zn/URZhow==","shasum":"1f24f60873bba4d97827cde7477f5a112f4434d5","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0-canary.70.5754db8.0.tgz","fileCount":158,"unpackedSize":2358233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzAoCRA9TVsSAnZWagAADVYP/2QFanHBlyRglDbhvpeZ\ncWiYvcXx9KNR36iU1zBheSzjA7LvFvwCuBgYZ7tjCdqdXIdRcswMomue+IxB\n6BLKAIbJMLFNELzFzZTibOYPEIZef5sNZ12kC9++lnTpe8xf+4t3JEPCZjca\nl37NGS+gX/JROxRW9va3iP/y3gXQWtvb5OeLD+0lwWMSPcmyS/zkG1b9+2qo\nP/ejO0G5mFqlwAccdPDe/VI3Am/TYWG5XbXpaZJ9aDoK0t/HVTDSX46SR75g\nEpUV2G7GQTYwicqDhrcbYdtBk+OV/m1mUv4IDr29VjaRTbgBzoYzThLYvVDl\nL0X0t0R47Cftto7OFuUA29tYpNFtLbanHSgQ2MRy1QQRBJy811imvXyPrZ3K\nW1fPKNJ86xclJ+mDVcwvsKQq9B381f0Qysb66uvnTswtMu9megS+DamlwYQt\nh7jZR2EH8G2PndPyo5q2WPRdmSmXm3lTjF9jsqVlwgkH+9/rnJQO/mO/XMQv\nJd+/tUiJMJOgShkbN7/RKdR+gU/rSu0AthlsszSAXYdKMoGbTEqdhB8Y20TO\nsgkyoFyWAseRuMaLduYijtwvHM1my2msSIPMw9AbRHgAct2LhAxLS3Ci7ex3\nlsSdL2XMKdp5CSM+sb5lmn80JKfcC4M53sy39rB2a7qtPfxw2CG2muMJ+pye\npcqq\r\n=BkQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQP24xvgw9sIfriovEEQHjGORBMjQ2MYhS3IR5q3zvNAIhANB3GcSy5Ug8NSiOMlR75mtuN5TR2B+ataclBRg6eEF4"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0-canary.70.5754db8.0_1583558696123_0.04903145336907455"},"_hasShrinkwrap":false},"1.0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"335b42e3285119e5dc6b9439b632437a45c3e17e","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-OrzpCloVOwEh5JHgkeQyWq55cyUBcOu9JzOeFEtt2KtOzcmL3auPU7QGgmSpmZ9HjZKvvvpl6zEeICGuE/X/WQ==","shasum":"58c000a137192591ee8097b5d0bcc84f48177ccf","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.0.tgz","fileCount":158,"unpackedSize":2360517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzBaCRA9TVsSAnZWagAALngP/A2OfmD2wgRPbfSjGy1S\nGfG+gAK7Pa07AwE6bnwthYPfG5pP8DyK3z5eZEJ5e64I1WBqHLgviAgxQMjH\nXN5/f729OwRTWqiQqmelVVzteKmV+i79JA+Iu/g/B6BAUJp7fpcgM66RVGKZ\noxtaMZjVRtHXX3200+gE+hlh+w6UkGAuXSQ9CaRRNfLEgg35cFpeCGSubDrd\nWAgWWSIJTE5iDqHI4QBYZ7Pe8O6Bvvj651supttHy9EDVqWvLSU0haow0CRt\nWGO3i4Twfpl6G3y5x34Vo1wjj0QhfmeijkoU69NnGKC1eh9aFO0laToUY8FQ\nOv8dStFWZ13ApoUWhB1+4WQlPd3v0NCukBWP4JIBY7D2JszbM8wnwzHEBDFF\nmH0RnfvZKML+Lp3NOb/bEsatpcnX4Sodw9av+DwpAQLlH2SM7CxbVpif41z6\nhglhtrmFARtYRZ4TnXqiKXaZCjXlAewnO9DWAt6QqrB+kd1NixDvhfwDMiss\nuxEc814SxcdizvWBpaWeEIfuq/4L6HjdykyFyeUH7Zgpb1ym40pdQgI7GPs2\nOvgXpRwHZntbvJKSlWbMvCZAqgmOhjql/uFeqnSXjaizmv253GvBlK9jJfcC\nLynqjOO1kWZFPM2dA/hVkePt6aizBEWs7BZAvO7O9/4zbm3OewZuetrS2lNy\njEfy\r\n=hlpD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJbxowNuB3yTdOI94MkuNLXepSXXhXhgRih4Im3fuAeAIgK6POIaMgs19NeBPP/050qBu87Uk78zmeJJxr3cxVg3g="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.0_1583558745561_0.4514718404957725"},"_hasShrinkwrap":false},"1.0.1-canary.86.130ab8a.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.86.130ab8a.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"130ab8a86a66ec6b6396b0668af018bb09993c70","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.86.130ab8a.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-WW3e6jC2H/XVnC+/rF3AizcnLW6bbpH8x+gWndbzNNA9cJ5HF4qKLtKv91kqta1FjDou936RphIneVCW6hMjwA==","shasum":"aae54807aa96f6fccaadd1414c24e6bb22acfd15","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.86.130ab8a.0.tgz","fileCount":158,"unpackedSize":2358233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzUxCRA9TVsSAnZWagAAH9gQAIft5x8T3USMAvq9vzTg\nsfnRF+cRxqjhcavmgkfd7op6fT2QARxXoWYa5ELa+orXl/tTEgoTo9smktA8\n8eeEzKE/rcaX8WEbA6kCnGXpuiV4j7guBWd2Ox2e8zoh597xPKuS5zGMW8rU\nd2SnvY/NzUCFMxUHEaGN2s90Cq+5cBcvSnqGUj241QnYF3t+KkwguYMWmMUM\nW95i80Cyg7SoE76NsrWYypU8qIkzwiLWpvFv52E6iH1bcv5xz4XPSP5y5N82\nTbPQr1H4aCToNPUv8whIX/aaKfCrPgNSsnzK5VnmTNz5bc77DmznNhxipfRv\nbzOpecqHONBH6QtHHRI3fPtIncZLB+fSRC6We8A2T/QBkmskAJ6n8RC47YfL\nwZztRuANrNdR/+LkrnVYBo7BLDwXAl53GwbDkSj9z60NFnHd1dC+XtoI0qNI\njgd+oN2LXSN7QWrtEF8wNXzh7qmJQ/mK0cKVHoMCbVsLQhWA94AkLS+wdc8b\n8BobqyIyZEHv3oxHO6HRoscyb4wT1rhF7pjenvHoZGRHHLaN+LpzKWOJPZOJ\nCoe6dgrRYlpNhQXCTqqz4gszpWRLhgdphpjsrZr7INrI1FB+eAZSC8PTOJ/8\ngBxd7JJt+GhxI0PI8s5qSiO1f+eo5O7kODbC/jeLDCiKYPvzskeYZr4czL4k\noPEQ\r\n=dVLb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZL+5QUscX3fR/R9ZFrVqcPeCBszbcoEsQHehzxy4bhAiEAr5T1QLNksMyCfekpgaNHotTlkjXqHb2UZgajMl0cyGk="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.86.130ab8a.0_1583559984774_0.4805492119779631"},"_hasShrinkwrap":false},"1.0.1-canary.87.565bd40.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.87.565bd40.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"565bd404468f1e73e04123d6474c51c3824a041b","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.87.565bd40.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-GAYHSEmPxBJtyulB2WirPNaMW3mjtFoCX1pf+TVGj6LaB7ZRThS1ZoXHOPtHR92yXQlPdLhMgYUm2IOaxwRUCA==","shasum":"87dffc4c717b6ac73a4e97e54ddde7fc3fa03e7d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.87.565bd40.0.tgz","fileCount":158,"unpackedSize":2360537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzZQCRA9TVsSAnZWagAA/VsQAI1q8NbYRr/PdT4tnFiN\nGSVpdvpQWMXDWDnoP8JuTeGzkJs8XZZP25tMfnvYqv6IlLUMa6LVswme4R13\nsqOitmTqb/o5IRSuqUQp/UGSNp3RGLqszk7bdwG9dhBHtJMQWjClIF+Likwe\nmGjpmG6g/SJhbC6H0rZ4oF+ONkSPO/jSOCwNrmYiduCoBGV694HIPnnAfYod\nItI4JpqcYNfkVQOMz9VjxkuuIxMFm2kTJJP6REScBqL0Z9Ze6Ui4ddeJNhRp\nDj0goaQQOnPRP+HjqYq1O3XspTMHYNFLlh3qPOGU8kw9kdcAYBxxotLH4hHX\ntm7TV6pz+7jdRneXPzL1cCRbVJh/0WYejiqpo1MSAq2VTRzUbdl32wbbeXYz\nP2b0t8uPZxytcHiIrDAtZutCjPq0iLJQArySx9DBwES7rJaNc/gr9sWqzmE3\nqQHzlisSYt5Nxiqlo7pis3yGKm1VAoa26COdU22lOFi/0M+NBEwldxpLUMVC\nVUaa/toIfeyyzrGPX3gGYV0OLpSUcfT00LSNROBzdBQbISWNXIIj5LdN1Qew\n2ProYo7iqwbQCWGZ+dnzddEm4XzvIjr9vqtGYVMVKY7t5LU2bEkQXCCSK7m1\nxhbOxOocNVJ9Uueu6D9NSZ9ebn3UvKAub8vYwNxdG0P8trvhtua+D3MhRGwK\nEqmL\r\n=RFdP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK1TnFUOpZ/9MqJEJ60cmRAwifUWl3YjD18RAtrdZ0IgIgPBaKIF4wYdYQ5FI8gVsuRluL9xMn2kvIcRD+LtQ000s="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.87.565bd40.0_1583560272439_0.2884328874323199"},"_hasShrinkwrap":false},"1.0.1-canary.88.c015986.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.88.c015986.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"c0159864a9e0c3d0c5dfa23330c64c9c59aa4ea2","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.88.c015986.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-BYhQcVafzzw6biaLRtsTq9Tm+VxbdCnzYZOGnC5ZB/zjhLpOJ2oLKdMw9TbDvfQOqA0OyvVNwCO7FGAAPMaXsg==","shasum":"3b16c041a023e0201891c149cbea21b37007fa16","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.88.c015986.0.tgz","fileCount":158,"unpackedSize":2360391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzbDCRA9TVsSAnZWagAAAVcP/0AcItrMJpRYUYpF04sA\nBtdiloX5DpAS0PJEw19EYB3ZxMT1ZcKF8wv+GmtvgW6ueveslAXBgqMbYmKd\n6U508iVfV0swgBWQtx97tt+wE31Gr6hGzAP4yxk7OtaGeYZ9cXOYFFxPDEeA\nBDBvJQR3o8iOdj+hAcV5a+JReF1+R+q+5GEezF/vNj+5Y2XihZz4xic7Edfk\nxmiYuFmddl2DrcUAXPq1BZYtZTgL62xQzx9gKMMuxXw/pP4Eqyy3Dia8HF0O\n7sf+HcSy3+WvV/VaJhheseG8b+AIHJFfT0vqncOfJFl1Dw1rUj8GZbVBH2Rd\na9HZ/MUlvDZq7W+TU3563r+BjPipBIr+XNrffOvAJ1N+MI+favDllJk5krqn\nxRrr0jiNbmFhiF9GogECSDansRcyahWjZ9RoXsgh8NrEDQTcgqIVU25j8sS6\nph3245XNc/v06wyVpz1SKzAftMbjn0nTI9kv1zBKvGv6lZV+N64YBvupUuJr\npZlTs8OFpMHaYpkoWS5OfC0p7ZC45bagJ5+F1EUwiKkNxzV5WGkvd1usZKq9\nHWAkWBHr5SdgtYArz4VfhbKtXOWlyVnWywN23aDRNnwJ0flJsQyNvdJm/jpu\nAtLTlaMBRbdTm8wq4p6PhDF2CAikUON7fG4kruLvK3O/G/kE8GMMzZNFrdWV\nBiLr\r\n=rBmq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClU9o/ug6AEnizbmaavRg6skNWBYU3w+mjZmC0F0/kFAIgA7pP8zOMFSyE3LW3Yvf+tHmpmp5qY6herV6eoEopzo0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.88.c015986.0_1583560387030_0.40349846527702504"},"_hasShrinkwrap":false},"1.0.1-canary.89.7f703c7.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.89.7f703c7.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"7f703c76d4dbf494cac7e5cfc76aa8a4449e4f34","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.89.7f703c7.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-/03rWykQnaaGvskCHKOh32wLWXSuWyQz+XPEAex2iu4iQO9a1pB7fV/Vw9DKSPX0G9BGvL8sbs3RLf9EcbJ7oQ==","shasum":"c5a7ff676e06ea6cc8b10f6b07d23d9e5d1f7485","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.89.7f703c7.0.tgz","fileCount":158,"unpackedSize":2360537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzb4CRA9TVsSAnZWagAAMiAP/Rdwluob9xkTQX54RW1S\n+PYr+EAXtkJ6WMesTz6o/Wyexyby1wyUJa5i+I3hI3tViQClgTyeOFDnrQU9\nvRuMelFbTIGCWdZwqKvZ2ZKMf36SimGAHGcfZBMLElo7S/yBwG1Klr5LFX2e\n11kmWBwBK6mffP5JoSruIi1ta+hT2AJHK1iNKVK5oNfUev/dKSQMYHbOymVQ\n6Uv3MPPG6EXiDXbhJYo2G027Phs3lmn/WV+A8s+gf5RWOiwktl35dDImFDfi\nYmI9tC9H4x2tUDvsVjduC8BzdPRnjOZVudWDO6KgMI807h09C1ADIwNUPPAU\nlrIOMdkDX4MEflHCfW83qED2mVU9FftZTOlLDDmRwGKs5bO9beMD3ugCHV19\nFvmySwimORDuYUmyH8llKUEOJLzr3gq8czNzq5neN4K5svhI0zfZl5kAkcLr\nHCmOJWO/Fr7mbZE+RVEgECYVghgI+1FOTxORb4c/6UarBclZQIQDyTK6fsV1\nNd7oy2RB37YLuE48PiTjY8VtGmhUZ3jOp9YgS9AFdmUcwgYBNAOi8LlAQDRu\nM56hWrFw1V3UfD8hjOPt9X1VB/j7LSOZpOVjrfTJMvyILs7mrNZ/plxgp4Fj\nA4zcqM98DpaNkW7yamvxLqDFv2zgmM83HMZJxrc+6nqQjUifsOyU4BW8kgIf\naKid\r\n=4lQr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7xFNYGKQJ6qM7lJWdY5OAYOhR5NYQzeJ8hFcA2WEUHAiAhdw/0XTKVnyWhR+Nq4obXG5gkBr5pcI+gFIZqaxFyWQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.89.7f703c7.0_1583560440548_0.689579763665223"},"_hasShrinkwrap":false},"1.0.1-canary.90.77a22ce.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.90.77a22ce.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"77a22ce18190247136fdb4b4bc0317e2cb98a865","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.90.77a22ce.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-wHMMMz1Gylx2A9f9G2cOkG5QDPotR0pyTtNJPYrGotZ+eNkygl6LkokH9Ob2JWDw1U48FMHaPS4gEI19SSOq3w==","shasum":"9666b4d26e1c28a62e45adb4b17c8524d81b0ed4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.90.77a22ce.0.tgz","fileCount":158,"unpackedSize":2360539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzddCRA9TVsSAnZWagAAziAP/0hZSHfg3vGb1PIGSe1F\nlVYSEoRVkwnuo14px763CDR3e1AxRmdFyG/Esoa7tK4M4AQpL5sfLTVG+gVu\nFOHa/BxAYtPZ1IbnU85BpZW8rpkQxrJO6TZ9z1oZltaCWLv4Ss/4eoZwQdWB\n4G0p+UMlURPryUTvcosSn7ndhpn7l3ON3CfUr732bGOPGQ0fbpZQ/mDJFtIb\nVLa21Y7mlBxfR3Sz0DvFyruDCjUXFaqFyXcalGC5x+cW/dHfwN83kKu42kaq\n8rwksfYPV4p/o/1B+K/l3b5dP2GIqRs7iHVQG+Na6PGwUiJXBvdg7B98yHVc\nBJg2k9FYil/sOEUQ9ZnsAu9ZrNvDVTwGHW7i+DPXeyXECHtOJl5GDRlPd70P\nhN8ymtnwIOCCGy2tW/U57X+mO8AgjyniyDPZpv9WaAMBVnkj/dLTbT0A/JFP\n+tsUZu2hc4LWFwVKMqGNaf+TbWUHcLkZsMPf4rF/UyFlxnTfueD+1ureawtf\na5ki1CArslOHtVDANJ97ZGhXvNbxayccd0sOtm7zNVjQ3fZXv4eVQ7J7/xlG\nA91PfZGU1IGkR0xuZt3WmDXX1RzOkF3kAlZUb9hKWeJn0SddyfARaX3Z8etV\nk2rNIWANh7ry9YWkGcfEHiQLzKIZ95DLhB4YaB+2tVWNys16CjK/6f4zSzi9\nsvZU\r\n=Zbcf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnYI/5ZD6Ozgt0FZi4jHs1oSgLGf14q+75fGnyMOjL6AIhAKOyAfgwl6PnJefBocXJkdsXa7TCkIioUac3ppoZtm2V"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.90.77a22ce.0_1583560540916_0.22655783245018957"},"_hasShrinkwrap":false},"1.0.1-canary.91.29e6f62.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.91.29e6f62.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"29e6f62c3bb528e903151e1a86947ec04fac342f","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.91.29e6f62.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-2Pv8FDnutE+XTetZKpauw4WeFBH+c2lCMl4XXTrGynZbguXRaXWYRY6bVYOPAejUyvUVcnGmRCtHySNhRNb61g==","shasum":"d72cf824282d118225911c9d558afac9881adae6","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.91.29e6f62.0.tgz","fileCount":158,"unpackedSize":2360391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzeCCRA9TVsSAnZWagAAjtIP/j+xA/vMi+oNlSGLZ/NF\nwEu9vn237b7mAvuPifEkxcHOc9FD8x7MqilcYpsCaVbmMDMz+Aj2RDbfH/X6\n4E9dJ1HCbZD6E4gtlhSBGd/Cji70bA6jycEDwfGvI1E120cpbsjDt+x9wvND\nfQpUG87aOGqoE3TcEFWxyZ1Tlp1oizbkw8hFg7fChfZj2iBd23PhZJ8QCghb\nHBR91J6C0oq2ZpkCt2hto7ZQTTYT62QT7hjUiFamYjYW3wvyJNQgh+q28QvK\n1IjIj1vSWELrI/KUVewyoY6TSG8wbFi0NNY4s1ZFo+tUlBjhmVGmNxgyAXj4\nzG1JisJSxIRryanD+HxrQca/5TEpi7CkSDLeAQkxpKYD4+X+kAm5dau4PCHm\nDfvjmgDQEHWRCxnIoqcKIlL75nnI6fWl2y4biV9nLikivZytfXhPVNY003jD\nkqS2MD+nukjtc7EoQiu/s9SKK8xBcOz+wMDTBHtEkpUvGkAuO4vgyn09g0v0\nz2IRQgNUMqVHCB04b5iYyfLWtDrc6N2DMQJNeeIyQveIH6Qvw31MBFKPjslI\nu9BvWjeJ0F0QWckJfohXIvORkiBxwXma/nKGs4QxY0tpHgpb/AjpkeSXCBU+\nJbqOdghon2EUo5CBO71fFTTxsVxVKGJd7w9FHpu5TqxNi1hMjcEaB0rFK6g9\nLtxZ\r\n=XQDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICazX9d/U48EXl/gQAc09TedKg5gaBeh0c9z34Vv7IelAiBB5WlBsEoUGOWYwg6103lMyUb50UKOxdVZ7PpiAlGvsQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.91.29e6f62.0_1583560578251_0.9833457835265447"},"_hasShrinkwrap":false},"1.0.1-canary.86.67351e3.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.86.67351e3.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"67351e3426535e5cd711cac2f2c45fe55f43fd1d","readme":"# code<sup>_lift_</sup>\n\n![Create React App Example](/codelift.next.gif)\n\n> A \"No Code\" GUI for your existing React app.\n\n## Getting Started\n\nWithin your [create-react-app][cra] project:\n\n1. `yarn add codelift --dev`\n1. `yarn codelift start`\n1. Add `import \"codelift/register\"` to the top of your `src/App.tsx`.\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n### CSS Inspector\n\n1. Hover & Select an element.\n1. **Find-as-you-type** CSS classes.\n1. **Hover to preview** before applying.\n1. **Click to toggle** in your source code.\n\n### Feature Requests\n\n- [ ] Install missing dependencies\n- [ ] Click tag to open in editor\n- [ ] Add/Wrap elements\n- [ ] Convert element to Component\n- [ ] `:hover`, etc. classes\n- [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[tailwind]: https://tailwindcss.com/\n","readmeFilename":"README.md","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1-canary.86.67351e3.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-SqgsNMxNPRapZjD1jjeJipYQDg1jd54HWOFerG0tOObpkAAB0Gt4by5rEwnKnhGaPqX7M4r5r4QJ1PxJZCboUw==","shasum":"0535321a20d11c079b9fe9f2fa77fd9aa1b6a9fe","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.86.67351e3.0.tgz","fileCount":160,"unpackedSize":2388120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYzjwCRA9TVsSAnZWagAAupcQAJnW0wSgqiEBKwl3BnxC\nZzl1fDHvjzclLAU7AJ1ybgbc0UWm7SZxLF2Oz7PtgH4N7mtIrQnW0aME9k/+\nCbAegQXBQZ8LtUpEIGUFx0IK6Js3bMLhEbtkoiq/e/TvULOaL4auawON5Wkg\nYyUbCbTXiy5hyHmi7p8j0wy4CKEicp1P/CRiRJi5nNe+k76tHYzDsie0otwu\n36666ENym9ohOJ6NTCgAPO98TfwGG4w6/+mBu/DSQAPbqp+Tus2gXQJ6g5JB\nNbuDoyzL16ZwPD0XriC0cB7Bc/cL9Z6ch2QG4f4aLnKQSCNnHypYmseThenv\nzCF8hNkBgaplbyeSapMDr58tk36ElHBAQ8JtyMaWVpdNqucqLpE5TyvgM9x4\n4LjmBBqXfw2S4jt3MXaSFyGX94tuTTeNXmItE8v4kzP7mYDr/62DRU+4hJng\n0KmIa7AtV3WKG4gR6crA1Ty5nK1Nfe50UUVUT8oW7HLmCdBIaoghrOo9vMni\nUdeK1TBdrPeR/80JBQA5/C9Fvde81YVhQw0cti7FDYb7hH44fVV4o3bvka8M\n5/nydnMLg8+2MNoyguGeSQ8H7S+Z21Nrl4i00/1cGYS2S1+c0ADXkrfJOlo9\nw656INy+7galhObmYs7bFtn89H8OdkUZYyQqW1+n6YY2zD5+ZbJkcXAei19H\np1XX\r\n=fImW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERJuukefvmMNSDXOe4kfP8hxw1tCG4WvrOvnUoa3yTYAiEAuOGAf7urlXXlxvoAfVRKYi7f4Kf4dQQyxJnIbJaHsDY="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.86.67351e3.0_1583560944087_0.9868100273233948"},"_hasShrinkwrap":false},"1.0.1":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"2253dcbd8f2a60d6db4d83c065ca38267db2f04a","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.1","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-PbbqkaMa95kqgkIm1b9HH8bDBpA1x2F3zHoj6fVYkaBoAglSIWX0Yv6/DxsmP9U7ZqazwFIPS8OeTBMCmO5vHw==","shasum":"197ba353ba205bbd59e0a0aaa68c3c39561059bb","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1.tgz","fileCount":160,"unpackedSize":2390671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZDDNCRA9TVsSAnZWagAAWG0P/0qtQaOxOkjrSYq+oI6h\nfh1nHwqK2I/WbbnNRW0AlZwe52jCSoX9gv5jhzTpPjek8EUzZu00FkpX6KKD\nGpOXBeeP1sPAB+OWViO5GgfwrhEb4y9QTAYbdQG3faGv89qfDqr7axtHM+2H\nDCdofrkXChgNMtbO8ghsR+saXW1Cf+cfnr8hFMHgBtodqoLc1Pbyk4W3Sqfm\n7GpFPtZnQpItW0HJwUUGgh2s0XY6+byvG7TsIE9tEi1bA9dO0GrxyjZzQbdL\nVa2BeAsjWGrkGyTchiddQXHtLwyOQbRllFtoz6J9UNrJPrvaIga+xqz3A/cV\nTvysWE818/zpb8097jxuoJCWzBI+np2y04g8+hcvHaVPsLaetIKCaHcr6BPw\nX3RaJRtecYmla9EkBsIDCwHm3WBX0Chv3W80POmSNDYQJuDJx74L4nYv6H+f\naKcRPjVqfhNYHJ1PXdsjpNZ5wcxbqfTmy8pBji++pCfFMzrLXpx2QFwNg32K\nmUkLMTk+HpnWFifQYUcAGTPh8rzbTQ8X9waQerqoX8do/D/H64xyQBFw68Fo\n8ofX1KKn+4lM2dNekHgzvhgdEOAPaisjGIf11CiTY0hEu4YAdMkyR7PIufC6\nZf/zGZrs2IHzV34POR4XaCoJYyCk24YHiAaOr2htfStrNh8qke+8irNilLN9\n2pzl\r\n=bJ6M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuDopc6CZvT2VbletwqEfPcRtTk+8KbnCz/3Z8D5PtaAiAQsP6InYbFC8u39sl71yiLTZgfs6qpNRGiIVumzHzauA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1_1583624397118_0.7282437251572034"},"_hasShrinkwrap":false},"1.0.1-canary.94.8ec9dff.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.94.8ec9dff.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"8ec9dfffa34c6be775bc84f9ca14279ce7463136","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.1-canary.94.8ec9dff.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-eYLwZhOX9q+bbIP3tjW8mGC9MDiAe4Yo6zQlq2fX+EAuBTWCwzF4k7YYnsLJHgeG+8RB2kYWAkyUNuBgKPNUQw==","shasum":"16eca0a4e6cbf4f3dab106a1b2567fa5af16726a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.94.8ec9dff.0.tgz","fileCount":160,"unpackedSize":2392986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZDFKCRA9TVsSAnZWagAA0aMP/2x/rvA4f4x01V+6E3yE\nK+7f4u6iYn6vKqt03zZeMVKS9ygk2tVT+5sisCCdU8r37tMT9SlaXO8AOi28\n1Wf3/qAWZI/0jw5vAuMqiyBB3Lnb2eXi2GDsGjm0gM0WB17fWjzBy3I5B7Gj\nx/egXtOydZXhBVciw/1Or6Qo3toEi8N4htrLLXyMp2Idmwhsn6fYn5H03Ud1\nH/Ljhg7XuGjc2iGXrxF4RuRsmV/WO48flo1wznXZsLR5KgH8iscjppMcDZ7F\npScM4i2T5NOwdAy7aSRlHNW7SUpz0DIysq+F0WZusskZmar45wa7Rr8hwFfc\nA5yVq0xqmGAALHx9jkRvCoYf9Bld1L7tA8PeYCPIA8fE/wSD9JiNqVQN507w\nDDyNVLzqYO9N/RFV7PBtPS4iOxqavTpnK9LisKxOs0J8WXM411Yrl+JEui81\n4tQuPhjOhWQz8y+g8LVc8oUwVrU16o7aqg4azNv3QGPGVEP8bS4TWBx81X21\nBfU0XQFG1lzeJWtShuwthk7qUv9ERXSbHtaXhZEtrhrZ0YnLdAJCCgFL162+\n0bN6T67fKNoaVz0TbLljEnBUpjkkKDNtSSq//WSJFKT2/xT3Ir2sArhTOGRx\nBV4o8IL9xfB0TM3Hk2ddD445bhu7MaNL/Z8xHHEA+tRuDzaXVpgidxYz1J6H\nYAGO\r\n=5Ecv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjVfe7p0C+2ECAhctsxKnBIG/LlbeKCV9sXdKq3yrUJwIhAN6aTWczUD/QuylN601bBadoILtpmFWDuNH9iJg6hBiy"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.94.8ec9dff.0_1583624522110_0.6217612066076719"},"_hasShrinkwrap":false},"1.0.2":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.2","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"023fc8ad92e3126e8f2413b5b95c68531ea2f613","description":"![Create React App Example](/codelift.next.gif)","_id":"codelift@1.0.2","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-LwPafQYCWI1GdzUz8UM1v/d5x4I63x6OrxfbEpQ6Mf3Ymqr1ARCGrAo1Tbm/9AmjK7ND01T8AWRitQpo51jw0A==","shasum":"366ce26595c95af56075bf69f5851b7cbd8b786d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.2.tgz","fileCount":160,"unpackedSize":2390671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZDNHCRA9TVsSAnZWagAAUTIP/2WpCevoDllUzl1oQFNZ\nNcWfBfjLg3dH+VP6+JVXVnuzxqih9odZkQzijwbX5qG/3czGr/qg7pu7Y560\n/EpvH7qbf5g3rdqj+dQmPrZBflW6iBdbpEbeZrBFuAsoqaFJkAUwAbFRJy75\nCImSDzOib2YA24t2DY+GukmKL5W7Yup1Ycf45arR1r/WWEJD5+T380IkkUt8\n+OjHiANKRArmjyRphTx9s1WgPpPm1ekPXNaJZieDx4gKaI4vr4bGs640j209\nWM3SY1xTbjQtYapiKBtJav63+rwW48d4tSGKmK9onrN96E8h941/Q/ZWesdC\n3/JYnyd9NdQ4cq136vjTyPKlYFWVsR0pjRQK9Caf1ZUAXqcpYHIq95PWayvM\nNf2HoKHY/ybsfrNZt1Ht9cs7wla+5gh8Nn8J2soF6ttgf1g5CxpILx8RpnzL\nveDP/izIizKboGOjLQtmxdYG0Xqz19BjW0FtfsSZRaRgRTd530HVEgYf0OLT\nOJb5NPsQBNERmRqNYJUwwZD22Si+Oiqdr0WYpM2SvzNqiqqfpO9g3rQw6yBn\nUpWMBf16TZDTuSWbgUuHtckD+bDU9F7b0O3BYrfmWKdYLHl8LmfNcgRfmTKW\nZzfJBfYLbquDu+eU8Y43yRkjcmTxLCcXpbcoJBvuOaBKbI1N2RWgGAYhr8O7\niVvL\r\n=V0ER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZuszf3vGWvS20dhKgYT/R4MPGAhkIvtlmRx/UoyMySgIhAI+du9Jf4dPKAokmh9z7PsW7SMXKJhyulM8kaKo1epVi"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.2_1583625031056_0.7303872036057324"},"_hasShrinkwrap":false},"1.0.3":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.3","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"122579ad5edbeeaff376d172aba33dca53d6d423","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.3","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-1PHTCEZPhj5Q8L0KUhr6iNyIaEVWGSMLjrUSihLXz0vyq0YbtMDHP9bL+UEsgVz5q34zNFWO4/cI5VqJyKZ9bg==","shasum":"bfdee08fea2a03f867fcbbb58fb29b9fa047b7dd","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.3.tgz","fileCount":160,"unpackedSize":2393381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZDQ/CRA9TVsSAnZWagAASbgP/1IleS6MMcX8b6BLYdPO\nrznjDOjJHQFANsj0e5zZb91+a5XIslvXlVj8H2tAYVcGKFvqfHYiH2e/CwWn\nMTZ6/BHO3FFQA7FpkAOSyDkaKpxB5QtuSOW6XZlr7pnsLl+vIP1Th8bkEIQY\nrk7oxvJK2bflblkjyQgQ0di+F1dPXHiU27DNRHdxFzAoSwSoblnbFpG7lfcB\n2ljoE40v4l3EPmtjmIETSg67ao73SfDtj3heva7z+5CUB2N0kQdPzoF+VRO5\nAnZFTSHgckZFyJBXR1z8wNBhHHhJhrV/cXok8Eab1jjvcypiIqH3clr8vX3Z\nttMcNAuNs4L3MybxzEYnO2k35HvcyTiAUFwQOMUP8N3eCsBIwNt9ieT/p5G/\nRIM5uX81wZJqIemAksdXKC9XH4a9XmvIyhpcJhAoL8UhV5oMoF9YV8cg76qs\nj2Q5XgX/9LBzDwE2oOzMjnio/HEJdjWrsXlqYZ9d0rXqh2CARfPG0xawhcMb\nH2lDGuorFa7OXYwWcIaMwt0Hv+4t9pCQAru1jt8z74crllnF0a9bnJgbHHIK\ndCrdSAMM8annva0yuzF0ckefYxZvNa0BP54tHFFwShVyIeSmswJcI5OyZ32X\n6/siUMt66z6uzMdtemz/UpI7dVUOA0VB6DJCUGZpl18Zxd09JwVnYQ/ncbdB\nJvTw\r\n=05G5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClWTYngC2ZRa6pYiZGAtl2b74FrSGax5bOKmKvxFmG+gIhAO8bRAmgOYuhsSxkywc8jcwF6hPJPQfgUs2fdUHQAymT"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.3_1583625279142_0.17460076231399113"},"_hasShrinkwrap":false},"1.0.4":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.4","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3f7b27137e124d2d1ad2769fbdf153ce27171449","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.4","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-7OQoKXfgbP8dVrY71TaJ6nhdbex4dGTpTW3qIlhfgWIoXnsQ0jKuDXjR0eaPamnDDTFgO/C0b1QHYDfN2GrbxQ==","shasum":"aa6906b17929982d29c2522f20a355a530903ca3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.4.tgz","fileCount":160,"unpackedSize":2393381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZDdwCRA9TVsSAnZWagAACYcP/3Z4m08HQ3HvJyN8Hrzh\nfu421uixKLT/dY/B1BGRYQv4E9/FZuIiRZThBTzVamewiWS2qufMtPVgLnD9\n0v/45lWNZrCsCxqjPqYEQNl7nDTp2U23D+43vk0ogsLoTzsoaU63qrKL9Kx2\nzxRCV7j3ycmZK9g4BJos08NgXVxnZJooLa7sRiIHNa/lOwO+YFPHbFPxU9Fq\nlft6cN8T509T7SI/g25Ei6iKVii7ZjETSqcWCfRISZlJnuKMDpL9M/1DDP80\nczC0Cy0Lq+5F9k4Vll4K7q2JiB7oPN+EIC5bumK68BWJ0llZEXvnRriCbX0K\nwDsixRlrsXAOpay/pt6frH4/6FtGOt0KdXxDeTiCWHmNRnP+0Uu22nx2YkmG\nS/6Q+S+dQSbridrL3d562fvtLf3w8VgSEupU8RT7rXo8HPWu1ZE20BAOqlSt\n+vVv2lDFRpLY0qTQXQ5YG5hqtqsrB5wBUMcBbs0PI+RJS0UxuQdohhhl2A62\nNGOKUMVATX6arGgAsjJYRKzuzB4Ix1KfuCbYRt7Qhvamc0yeohxDkiSADVoT\nrqjyIUBpB8x5XZZMzF+puml4JoFaMB07W3kag1ULJqGGcoEFHcieEOa+hQuT\nSURvbBmDxodDn47IzETN8iEpgKN28kuaBUUXHzZMRfA5w5o16uYMpKL6lebz\n6ugr\r\n=qsN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+uZRyyC88sqcxwjIe7kk+W897IWTSsMzBOrm5iE/QzwIgZEzvt/LHYqobEJzZcHV3hrK/TBn9wt4rpFBVDnJod44="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.4_1583626095841_0.5581479773373625"},"_hasShrinkwrap":false},"1.0.5":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.5","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.3","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7cc8f59b334efcfc8fb027cc8d1076ae732c7d5c","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.5","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-d3EL1C7B+Nb6Qq2qqIKRI170eCZgAlNJJAiOGaoxN0STYoWQDN6gmtmdA30K1rO1y2NCDkUwFoJWPb89YbOp0w==","shasum":"d5f0615dc495183de5cc6a0f8678a6da10cd76a4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.5.tgz","fileCount":160,"unpackedSize":2393381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZDoACRA9TVsSAnZWagAA2OUP/Ry1svfZFKJmJrG982Oz\nGZPOzpIey4ZaF1M+GuXh0vWn3pNayWJZdrQToOE9qR5uhCScBPhulQZXAFUm\nkQjuQQYBkacdqZgCdJjQJawfgGDiusuMSD7FJpgevUrYiW7TgHojSqeYX9lx\n6/haBrGysPL3oNqH7eEGkSwVaqv4EOTyJ0DLtRpP0J9fcWf0KBFDnpsQeRRg\nsFXj/5Pehuu+Jse/9rhi66xXWR8csVRAtTt/Q8ATjuU8eVnTCHgrAUBlbcsm\nBojsjuSY2I89GFNY27tZIVg3EdmwYbQAImdXuV8zEIbtsgTh9VEz5Tu2bLpO\nyteVR2yMCZsKFvMZqbtyGEU1CNSDivylK5in8N+z+Idj8DnroEINnnsOvmT4\nMKE+uz6uFpZMvUlTm5ZuLHd443YDlKYe8FsthMfm62bRv0f4E2MnUgFChCQh\nUQDkVDxRRjEVP1tqm6l9ncc3Qh3ciJWiexZ6/n4vGcO8bmMApZMOCW15HYWZ\n2gFZdjAzqKTTZqeYY019r2zQ43kaw9EvT7DegZXsv3QGx1cYkw88hfWC4HJJ\nOzeDiVHOgz3v9qrehr4wgFuLz7yIMG3NI/bH71Hl2HzNTUz/vaqIHKM/oQhf\n8tgwRYqnb/BeQ1ZYLFns3kbvvpoRELzhNflhWeN3fJlNr75AjWQAVklJVhI/\nTu+V\r\n=KaRU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6tcG+5e+fwfglugN7g4H9AM/V9KqxHU+m4JL2NCqIiAIhALD5MQZUsvXwoJsNC1ClPO16kBKm7VaQCbulhbCGxBSx"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.5_1583626751958_0.9590149161803125"},"_hasShrinkwrap":false},"1.0.1-canary.98.3270e17.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.98.3270e17.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.5.2","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.9.16","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.5.8","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.3","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.1","open":"7.0.0","react":"16.12.0","react-dev-utils":"10.0.0","react-dom":"16.12.0","react-feather":"2.0.3","urql":"1.8.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.0.5","@types/classnames":"2.2.9","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.2","autoprefixer":"9.7.4","cssnano":"4.1.0","postcss-easy-import":"3.0.0","tailwindcss":"1.1.4","typescript":"3.7.5"},"gitHead":"3270e179bee073e89e55401ba85660955911cb64","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.1-canary.98.3270e17.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-IY0b2YVtkrUgO3sQ6ZBqEPdbdbTJbzbBt/tymZU5BBgKJH/hQ8Rsd2zojrCJiWoBpr6zOpVJVkwx6szomqY46A==","shasum":"92e33581fdabf130091134699ea078bbfe01bfc5","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.98.3270e17.0.tgz","fileCount":158,"unpackedSize":2363099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZUCdCRA9TVsSAnZWagAAsgQP/i8sdLa0GiCaFNbnzbGC\nGpAvNMqVlXKO4x7ADc+kC2V0NXUn6n3ZEIl7JA/HS/tBanel7u9e8nGvcUHa\nvoPNUq6oYL/dpvGp0KszAF5sdldUdUOoYewBsN1VfkJUgLuwHle01M9VH90t\n4SuAiI2o1K9Irv6U1zGierE38/yGgOK9pNd92NwaRKORK/XDae8ias6M/G0y\n1GCGBwSJFXJD46lpqjoQhGe3E7r25CyiR7TZAxx+9M2WxBLCL5DxF2557vWc\nJ+TTnS4bUVYkWVT1eeirFF9F+t/2NhNZ3Wk3mx+neqzVJdV863Fgn4dNDZw9\n4M8Ll29wRMjMtO2ICm4PpUw0srwumxc1NOFq6BWlvByQUlEIxLPGFuCzMTDx\nuK9OZjJ0TO6pR58AU7NJd7n7sDQ/Xj5xygcSQG3zpNLQ80FA9lQMpes+EO0B\nZzwYmhqy6bpZnJHsRKVbqVxjXd59ckPhfJb/3Fz0cr8nTg/WqVJMAg/DfMkk\nY7FeiGMcJlnCEl4CppJypfUnRt8STMn1gbHKbIVZGKoecnX9UcF76V+YCTXk\nAtzLhN7me0V14pcqO6VKl56f61ZHbQuP+z2CZpaRbF6VmdL0yeWCcTS5RktZ\n0f5QJXrDlIuSarXJkTcwdRuOIuS8zy8HQTY2KIOEm+EN00ajXYla71fNmQNm\nWV+n\r\n=cg/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaIgQ25YzoUvmI5BnPRJda6511LIRosH1xU6LPSejSXQIhAMM3i1Z0c4VUmN+i69cUPsli0QOzBVmkCGbSU7ZVUZKj"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.98.3270e17.0_1583693981216_0.837735032280865"},"_hasShrinkwrap":false},"1.0.1-canary.98.946dae6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.1-canary.98.946dae6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"946dae64acdd445813e93526024194a4c57d8478","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.1-canary.98.946dae6.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-ODd/Dd0NCGn5N5M2Qko429aE6XUjmWWMpVT1Afqyig2VpRlaCfjTTDp31ffWf/+XG3w3OHoRc34YG04uTBO6bQ==","shasum":"faf806893884a62d97eb82c51a0a7b3b602bbb7b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.1-canary.98.946dae6.0.tgz","fileCount":160,"unpackedSize":2393126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZU6SCRA9TVsSAnZWagAAWAwQAJWnCpXuzZj6rn7ne5hz\nKMZngsl6m7S4miJlZVmQyb6ECX1OYNcZvUm6CVMCr4WyX7DYdNTwW1Y6w8sT\nRgG+BCESou2CMWUX8cJA9pJEkxTg8wV4vrp+IQOueA4mwZXhNLAMj1xtekrb\nSt0H7mEz2XEzvH5LZnh1Jup23dKlpqcgWfSiN7Yk8QA3mKLbftN8Y9JHHdV7\nrMnmKa/9gpT8Cm8pxqfwknSefAibHQIBdZxIfaLFQgEiaMZQHND2eTLZsdCY\nnVp8rdpYNcRuVr34AwdGtlEwFobxVwKWUAyFrU3/MQ4lxbyqcidEuXGYqjLn\n5vWMiGnxbuFXsK2C7o2JkxWwZtHUGAlseeyfK3znw0HjFkO6k5ULxZiW8N/K\noF0/hj/hw10QirJR9O3MJm2yYfkjq76YcBrVCKHQkgNa0nfHED6NA6FYXqwS\n/qlIOKrwl1nDmJkDT0cNIbXxSj9nnY1ajPc1yLCMoFVOUooTDiLYNPy3OOHM\nXd/tILrtfWfcpKQVXCCEuQ2xPPtEfYdsJ0FzM+uS71su0EFuyH9hCCxfUwX2\nQWCKxnwuL1PbJZnTtV3ulAknjM9rK9BtXDOtDVol9tl4wlw4oFayDbH5n/2k\n4lTF/Vx3HHXnL4wNpzSIZq2RZbRZ6YhKB1x3XRNR72twsz+6j6B3rQPywPRI\njs+x\r\n=mjfe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/vJ6m8v/0YqHvfQG/e96ZmfnMz5P0WF2EpbfK0pO7MAiEA2j3YsTI3OV0K6DP6YNDyLejHzBk40ToresBCchnTbcg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.1-canary.98.946dae6.0_1583697553580_0.307202552061165"},"_hasShrinkwrap":false},"1.0.6":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.6","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d6dc9bd5edef0d1eb8c2ebaa9a6a971a3c780ece","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.6","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-B1XQcvCG5tSk+AC8b9Wrb1mgVq/iPw9GLuER93iu1jlDwO7NDQ0XtuCFvjtEMxD87yXiM3/vHA/tkKeXniyWAg==","shasum":"01a82b1e10001b8e21ea9892ef493ba2f448544b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.6.tgz","fileCount":160,"unpackedSize":2393687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZU9ZCRA9TVsSAnZWagAAfvAP/iObmzi8+eNWhoe0Giaa\nDfCD0wsjqRovYgcl3AgdDI+SfEZx5C/oST4i/jBWJgTs5WzySRzm4DzxsR5j\nsxu2NzZiOixc3OjR5Bl0PccZWkgiBOobNcUI74VAbrPSl+Zn7nXR3RlVbHO7\nZrtbe57nqH+b6bR3bat3ThOZJNXYQUBaPB6XJm9MT88Y+FepSbeIa38CYxkv\nLLnVfmq0uDzq6ThPaS4uo9EP5M0vJl/8gCOtdBcq8nYzKBGGPKJNSkq+mWf1\nhXD6dAFym6/Jsw3lsikOo8GnSKLNhgMcKntxe4zlKEeQKJmu+ectbcrDQJhJ\nLYyFflQrFFUtTPEe9vyGGxgA0F6yS1myGU/IxaMKu94Kf2er3LV1rW7tg3Jx\naKGvxYVbLD+l11KeSxsSLxTgmm7fQsVZmByOKPO7F/6Ok8WSV6+cQQriHGnZ\nUOF0F7EGccKYyHF9sNC907s+1bm3sAY1Ni+z87txY7zQ/reCRXsfUg4OVyu7\n9oiirFuMk0HRpm64aSJAo2LlfX3AICypXDQf3uz+882b07dJmXnhf/51Qnil\nw/Nu4RdVTWN4YPROHBACamGp0END04BIHX6UOSDL/FZcHw9RO4rP2/lZx0Ar\ny75xSY92kZAHuUYCOFgytPGunU2MzTzqtKZl/r0kDN2fYRnNA/EbLnUpsfuM\nVLw4\r\n=KuDz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNM/a8pTZjdLkE1JnuzOf8FErl/pei0yCm+DL9qxWFIAiB/VAjm3HL8dEAvXdhfDKavldKrw/rt96cY5xCgESwItw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.6_1583697753295_0.1358886492685598"},"_hasShrinkwrap":false},"1.0.7":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.7","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"c4ef7940aa31a8d3d0124cceb80ad260087fecc4","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.7","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-PQQaFF9NZjT4IaJqtZnl8czrIVqe6qKDEMSI5Jz8C+hNhLEodlfB28jaSwLPLifEhfDp7GjhLuiTA2Qd3Ge2Rg==","shasum":"0852c5e4c1fc267b6591792673daf2746dbbe93e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.7.tgz","fileCount":160,"unpackedSize":2393687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZWvlCRA9TVsSAnZWagAA+04QAJPS0NApcIy1Z8rcXPZn\nzPTDDfletzFyNRoQZdr7jstMCcIbj1wuyUGXjTBLAN3S4CPmhmTADUgMtmHI\ndwBLw5XHztWJTIRNc1yJEDT5lhgrvHT/S+JuzIiY105Kdth2m8fFsg31+W+T\nfj1oGhnTcbzNa41XGwpkdMHXB0XShQhSDNLcblu3rMr9/YgLgWGwrfUIesIn\nUDzEhr5lckza3ul206zNcPEv88H2R7vcDhzD/KKZfDxFJ1uNDTgsihPuyru8\n22pad7QKi9OCASyIn28WbjDEsruirITYumu+sj3VsPKSUeA8Jftc0uSe4Lbd\n0qurA5M1yjQU1Mu9m9FM21RD0+rQjQKdYVt25HZbNrvw2cZhWh66wincGt1T\nWolTaPWN3yYNVnR9/i4pnxGYRiiPoKdoCa/IN01hE4ZEkur0663fdbUTAxOm\nt140+KscapJNiPgt1/3T0IovitWFHfh775ycCvTtD+BoCujjohvLPbCYyH0l\nEvKMOW5qNtBTmgZ6nc5nKHXPl+YkuWplTFhRNdDgweITILTRSCDHzaQKs6I+\noXRfwrHpIU/Yd2P9/V0MrT14zegJrvo+zV2oHTuGuDmFMAthOkKxAW21mUzC\nTSQluYlGMmaEOmr3HaJB/6p20pTQUb6P39Sf0qGLcKSyoLuKK0rvPMZrjwaL\nw0IL\r\n=2FoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwCheDKZTTEWWflT7FzQ06RrO6t7ICmS1gNG0ctvCa/gIhAJnADBY24z3vxw4FdlzOOdM01U3lzrecT/sseBrRf3rw"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.7_1583705061210_0.1776464523644985"},"_hasShrinkwrap":false},"1.0.8":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.8","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b4c1d985a0d9914750690adddb9a7a44c8e0019f","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.8","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-IAimlauYvgCjZ3xEaMb0w+VVyojiCmFmoKFbhI/Hj+8BAjNMDvMiLUF2DdjkmuVuA9870TzTpJeGMSo5EqyQsw==","shasum":"df27d6da5775df3e58ca0204bc45a2252ffabd12","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.8.tgz","fileCount":161,"unpackedSize":2393986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZXx5CRA9TVsSAnZWagAAswIP/3yiOkl6/ow67hgSOkl8\n142JtMAS20M5QvC30b1KzVFmXdTLWD7eXKJXazaqj9vGwYzoZNoM92KiU9ig\nLOwS52MFBqISTlIEXKKCqdrB3BsNRjBM9BKcq2G4IGFH8DWQ0k9rE672V4Yg\nuoK3BgPwpJfjQzY9vUPoOO5Y4rk3ajz7N80QnThEcR4VCT5gR6mPWq04jA1p\nMNxBSqiIaHl0hTcMILTgxGslQa8OhlssJkFgoEeiy2BCF5BHmgFURcd2mIlT\npLPDeOCRMcslhL+nqQ3ACXquXeheY58ddBbbGdAnHQp5V3qt9Rlcaa68H07t\nf0GGJCipkBtgSO2QwRsRdA58D+z5TF/3InEKdnCuOqSBSNzgKzL9/mL/hOKd\npdbP4ZTSmyM8Y8l1BIjnq7D6dJciDsiy/ayqNIwUBUN6++LgdV238mngqY52\n58Od/qJQZLubWs9QNoR9I8AIgU+2EsIatPPZfqzcCKJp3JZt3J7D9PRWdRVy\nQKDojOFB7zR/GrLu3kKbzjo03VcZuuPPdxgqjky9HKTEObzNCehH3sWnopn7\n52brSb0Uo4ZhmAebYT1oWujzB4YhfFgrYDXzNXqED6NPYm+jkGqtHuBp3DX6\nJxg/eWflVrntNs4ph2O/CjYzbbBzNrbrj2k216J9I4Li/kiO3jsn5XA+zVvh\novvO\r\n=0KRc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHVwnOU15UX4Kc2rlu0Z9N7qyA8B0l2olXaBPW6XVBpAIhANqoEhhGLph2MlZgIC27nTiw6f3GVBh1ce5KSrJgb/Oe"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.8_1583709304605_0.11649258030223075"},"_hasShrinkwrap":false},"1.0.9-canary.99.3971011.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.9-canary.99.3971011.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3971011ce20ae80925ea3f042483b39780e338b1","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.9-canary.99.3971011.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-oKl5qzd8o/uRWvmcV5Eit3oyFXD1+IYxHHaereb+lvzRGhiXPYsvkdZVAbZH9bF0LniY0VIPHfXTGqC7ObJW4w==","shasum":"d78557adaff80640756dc65709bb7a28de97e57e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.9-canary.99.3971011.0.tgz","fileCount":160,"unpackedSize":2393707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZX3nCRA9TVsSAnZWagAAJMsP/1dqs98Mgx3/DWFvKY3g\n9IJxn3H+LaN7brBX1iZYYfyv5an40MC05wbrv/yWIxHy2u22IVyNetgGBf+U\nuw9ECq5dX9owey9FD+o9KHIE2ZRBlyL7IsuR/fzBRYuBGIan63YR+uNwuJD1\nDYiJTTcv2JVMtST4MHOeJhUmAahpzEd4khi5mu1LUWA68Tf2hXcDl+Wx3qaS\nBIwy/Q6ycqU1bALnSBEKJmYBhWuRlWZBkpJlkOYxx0YugTgm8sFqrUDCbrW8\n5mqiOuQ32EgqtIhzjaORPSTMDGfnYv3Jsii0ILy4qepTLklDsItWXrCberlv\nWtGEIbUQFuG5IX0iNSOSEtAfqfSKGWdlQcMPNPb/qG4cA9X0dS6E8W4OctsB\nL6NHlSMLxRY6PxYf6IAQPFxdle8DSdqsTKQ12Gsuc4ia5uVBERToFRhnJDsI\nuuIuNKuXZ14og0cZYSWoQZAHeCNUlmlcXs6idshZqVjq/jFhQRBmkyJAdy5G\n+rUEQ2IC1iS07Xtt8tzfCpjyLQ3X/sWY+Cj3crDb4oNxfa5SjjYevfs7qMI3\n1sYIbFULCwicCsPa6sNdIBx2veVaXBq/w1QI41EsABD4mseVWFspjnE3JEnY\nQdV0O2cUvhxuoTjgv5yTAxr6DSHLxkDtiEXfGErcY2IXAURMqDWgQoy8jM4u\ntBDr\r\n=+46n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVwtpPh0JT619sga4xW8kdYi76lirKvInvUYedxYjBsAiArJR9Daz89TvVKJ+kFPCYpR/xQhvLHgsCHYlh41iZfGQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.9-canary.99.3971011.0_1583709670505_0.9868629272294742"},"_hasShrinkwrap":false},"1.0.9":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.9","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a4cd94d63d4f83303b3ea46a3cd6ad1deaa43d86","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.9","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-nnq90Bsj8G21YPnVSuWPZlVq1HlYbQbH51ljaZ/5132dCsq7GlFs+PZIJznT4hz2uPknglIokfq9tpvXmXqBlw==","shasum":"2faa499f267413bc1957ff2305d954bab1a88874","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.9.tgz","fileCount":161,"unpackedSize":2393986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZX6kCRA9TVsSAnZWagAAAlAP/j95z4ygtIrVcgSRFKkK\nCFTCqZEAaLVMT7UfxmmiSWCf2LzdAJ2ZFEQTqxdlqblpkxXCykE9or632CEI\nHjhO5GSz4CChiTN/mytZfBICca/rSrJAfoa7rKVIK0l1lQt3ncGQO6aLKKc8\n2lGPm77AcNXZaEXJXJntUT86SfLTRvFqdLX+buLwLUnuu5qKVexSfUYW1/TR\n3yg1RYr1sydLviaF1XclAvk61Oq8JkZ2uLJ527XoQyI9MNWaMfd7U+kzL5qj\n2Be6RwmUJF/Hp2ppixNbWZpcD0U7YOGeHrTdJ4vhMidtEEP0kGM+VNLb+mfX\nNBfgylIOXpnQRF5XuhQ5pctT8PxfKX9jio0UGQAFuFOu3VKo46XBMrqlThZk\njwkjor+CunDVmqtCE/4R2vjVKXqKrfqxeogzqx03bra8J2oc/j9PNWiF055J\nNE9uxqPz7kuvsnxMcjfP2hJbpcFUHyQFVgiMHtov+GL3SKHsyD6cjtalHwcU\nEqxa7DW01M/YdQcAZtCcKRkxfpLa83x5m2+LMqw2VcEwWrQgKlgaVnL6X/ud\nIIQ4hpQ13KkSvDnDNQQw8VvJrYH9++1pSTfPdMElBOjk/DcRYA2Uja88I9Fh\nn10lUl/pW/d6LylETK/Zy05mbLadybgXFT+XEwYILgUSfv0Wae9RvGsbmXg0\nAoa5\r\n=5XZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBj1+h2pG5DJ2MWAlawBgb5Wd16y/OOeHpt1yHWX2KCAiEAvFKT5/Zkyt5VMfLR4Pl9bjXDIW0Q6xacDG6IQnsGwIw="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.9_1583709860060_0.985558845695413"},"_hasShrinkwrap":false},"1.0.10-canary.100.e1df846.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.10-canary.100.e1df846.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"e1df846d65f55fd30d67ed8d4d48f086a6eb7dd8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.10-canary.100.e1df846.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-bj7UbRwbb0/lKZQFl6frEDUwD6OkzLRLy8CpaMswmZJOwg0Te5AhY/vppr3/jU/iwSletDMofdcoV67vXukg1w==","shasum":"c1bedaad348da8c2decbd51c70897ccec1f42f62","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.10-canary.100.e1df846.0.tgz","fileCount":161,"unpackedSize":2391148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZY+7CRA9TVsSAnZWagAAA/kP/0QJNvRrIBTG85r6/3Hy\nzeoKQa/y1/hU8D2yosnWN1Tgvdaxj4TuPrEIiMxQEfa3gAl8JV09PAVaN7zf\nNVQBzAFn2GOvH21Xo1oMDLM1NBn+D8zHrCxKSOLZDE3Fb6YZbKcZOS4SIoKO\nLcDNvONeWmYzRimr2yHVn1QpDNDgmxafGJ1x/Lw9bvG31i6/mViQQmlS6A7C\nTw7npnYBOzDR22L2xYnnLJ/5mgabvkWq4HV9QCPIFiQw9/cJW6ff4u4o1hR0\n6EtQ5V4qz/X0FpQJ/3n3+ymMAJ2zGE5IZdw/BJG3BSp4TpJX/ooXmiTwZpOt\n9G23ytZGSj4wsWdcUHkHuu+Hn3dRqjEa0dXCoo8ztJeXDSunlsk3isgonbJW\n30/wPhcGvu4TToCInnY+jKeC6B46edbM0eyoW29kGeQfKOjWt9AZAxcsopZ+\nW08N8lB6C2NyTDmo1lPScEllSkXjeoIkvGDlfFBrUnESQ5urJGUCmHWKOAkQ\nEn/wv1wX1JtK+OFT3OM7ZaG++QHsYX0pRDs8B58QErEJXlP3UDA3YyWCqFz7\n8/8ckkQtEX6GA4nZVkHQPooygJgDOe+nhIwS9iUkpZLpHLepThGQ2PsSyuvH\nxShibro9ND4QkHJTdid2HfjNVWfDjok1Uyul4uFUbGknt74xjJGv8lJjofan\nFLoA\r\n=uVXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQP8IoKr0qLz1TDbmto1qEcq8Mpi+8xOWnwcK9SsamrQIgedi0lsI//qeaOwc1AU+hnKSgDlePS01/59XNO27rZKo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.10-canary.100.e1df846.0_1583714234948_0.35901328023704515"},"_hasShrinkwrap":false},"1.0.10":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.10","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"bbfcd68bd65ad715cdc4b2d4dec960deaf2920df","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.10","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-dRRnw+9ktqZt7elJnO4vNXMb5v2NI6LeABSeGHgs2EoFZQP6SHR4OWtDpe5oN4Ns9IfLHrVe8rSGqCVedQL6kQ==","shasum":"9a80bb0a06d321d8a1e6a33d60745c7c435b7ad0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.10.tgz","fileCount":161,"unpackedSize":2391396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZZBrCRA9TVsSAnZWagAAqjwP/0UIIycyDPm0MYB4mYK+\nan5hyAY+V1TM6ufY71YFdevJXMcAwLNPSb9IR/5UxtlEXvkGwb9vfiYQ6/DG\nUepG1udJhstQYbvmrePmMKbkdVNGw+etg4NC5AanVXkkkFMx1iR7u4NIyLBX\nZXOeehqqJzIrGbsBCBIQVHPhPyNoFNd4n4mhMhcIznfmoy9zKWBaYV0A2U07\nF2n+tj3KtQZuVjJV1PBVt6vLTaRkUfQ7wQBTIIQtC6wpWa3tmxbdIt9LN85M\n72JxaiTaB1AK1YZydgEk0AyTMYinm9IocgZI9X2P6pxj/ZVEAb2407T/eU/y\np5cSyTtMktxA3xTHw7LDZDCeloPJhpR5XY+DWA4Vr0os1ziTB/N44DPr6CEG\nEqVMYsGOSsSXxye/qgZv0WlaZCL1NJnr7EIQmTsE+SjhAwo1+O8LgFT3iv/o\nTETUhUThspHteuK/dkemzyAqJTv4M2Nsh94H0NwH8sqcWG8GLg59LEV8g+U9\nIzNzFt5Iz6W0262X8rr17MRD8DFOxLo1WLqaVamV0PnZ3+4AoFWU6QYfOnXf\nXw7rrAgwrA9Ab3vsYV9j8Xp4a9WVqTQ2dfnKd54dMKU6RhvQft3tZz3CdQxD\nStdOvY1CSzyzldKzJHsX9hGxUBgmuUUj0Biu3lfuIDAkXg7s/jug8DuWdFDp\n91mf\r\n=jskQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNVdMDG6MU4EbkzZaxPPaHpGYoH9gV53O3ORyP73TL2AiEAqLPlgqj7MGdg/2M4bzwe5UY7pCRCMLDfhrde4T1rtgA="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.10_1583714411259_0.9181679518302566"},"_hasShrinkwrap":false},"1.0.11-canary.104.84f3101.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.104.84f3101.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"84f310135bc335a6d309cf304bbe0873ac37472a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.104.84f3101.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-xYtVuTUVqymQ04LluMsLA4aOpUjwKOGw4VASnn2pFojKqWA9iUzDPIs8Xhtj9nsfArWNzaQo3/SItokor870Pg==","shasum":"6940199a6e95bb1899fa73cec9473a51df480439","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.104.84f3101.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZmqBCRA9TVsSAnZWagAALE8P/0iTDQsEyRMT/x9V3Txj\nszWJ9+NR68OwocQv7RNL17JEiFGkUt+ZJm3l46QZSpFT1S7i5OU8ZyEnGafP\n+EvOO0kTCp84BpKDFXZh1lmE1t9lTaChwaWzmRSfQAOKbvu89Z6rDfK7JPuV\nwIGTdO9uVaDTEPtZLfJatGuad9C+IZwR7vdMKTskx3EC8bT32eKg/O0mrJ+N\nWIhIxelCHwpks8g5YXVI3EPKK4fcR6KcLhiB93GET7TpTawcaPobEqGs2POT\navmTQmfrdzlboK4Wqp2WZU9NNJL7T0gZ1aHg5Ccb0jvSAwrx6ppRjEpxpfle\nHKldrgLpqFo23Q+7hHuCDXsSlrSPDbH9LdxsExguyusTKC0NuRodW1j4rcYS\nvWBzjZ+2p7vFBm+O+5HIzOiVROThzHw1acZAezFcBUh+UBmmjIir8Ju3y3cJ\n2Mza+noDQu3IEnVJAh+lYutdCZ7e7vn7SiSRs1sOEJ1bxIQ/0xoSqKABChOx\nhUA8KyMm0xpLFn/h2EdbcfK6I7vbBRLVeSBoEdivw6mRG181/erF5KX82pJD\nC8/W7FnzOqjMhMVXcqiVnlG2LA8heryyVWsQMdqwRTxDh5gUj+vDpER4b5WJ\nItLKQdmwiiYm4rQcT9pm9rH++sphd6LVsmzjNtobrgH3V8WpiShodS57VZB9\nmwRf\r\n=1Usy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOzc45qHMv4VSG7YmNJ8rVkWxpHcV3qELvYsf7ketlSgIgX52XhexjpIhoVXwOKhs33XHciosHIYrX0CtAlVn62D0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.104.84f3101.0_1583770240768_0.6954206329810217"},"_hasShrinkwrap":false},"1.0.11-canary.105.022ce8f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.105.022ce8f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.4","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"022ce8f3c457c2a566b215182da8504d72ff4370","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.105.022ce8f.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-xQUFvjqb5HyZIXqywiYkyOg7bF3Ubf2p57Rs63Qfv+Cj7cff4xzAI1VTpO5hbNqvBBScqExjMUVPmFucqh2jhg==","shasum":"2438826a57c9002804b9c4e63c6c4231aa3e401d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.105.022ce8f.0.tgz","fileCount":161,"unpackedSize":2394153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZmrRCRA9TVsSAnZWagAAjdMP/2kWbK6Gu+M7upjWRnVv\nBV98aVVvK3GwTZARr6Wb2BML+Th9qBqTEXdm+bGgzVlln9jvmdh7sXLObFcG\nVv4aoxcAAVT6KCHu4kE5ZZyDzUrkyHhVS578KPhcqFf3AlgqSzIBzAAy+XzZ\n/CBc3tkym8wVRPacdmOFUzJoHYTGTPtMnDuxNqFpMY7xPLS7OQ95Vy3bnckr\nD4IpvD0+dMtMFF37ukbPMkFi34aDYs4Mv4WAqZy3lEdfpa7gOTqoROUDpK6w\nG9lgfzyMndHu3jpGHQErImoFduvi7O5+AzLCLTPEgzXfZmTNhm8yNKP2U3Pr\n4TaU9RhTo7qRQ9ilX6bouQTvlPuqCx7I7VtoUzcgrfoap0vzVaUdao17JZL1\nzWszwj3ZTcJVcr3bolzQVKqcpQIGobjuS2NWhK5FtMeTIkGLEruita4QA1aN\nFwJt6awuCSoVT6eCII6WPD2HsldGULohlZum1ltcDnx5MxIERPXEFZiqPKYz\nQQxmVJujryvbIVw+4GHYEjEPzZ2cVBgwtpYgTBlnlX+QH05WY/p5rKk3YWGm\n8rPtferSPGBrW73ZshFMt+ogoQGG+iDBxj8J7Jy2qc4d+/9MKrXOstL9oi5A\nrGGoiPtkDCAXOT+rg7wJyNbv/66gJSaSYhzH+wqJAoNcRV5+ULcDkfjLx3aD\n1k44\r\n=/xn8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLj5ppUTF1XxO/9iYUxtwEXCAZOOi8ACZ9viTSyNStcAiEAuP0As9gHlsBM/M/tW4nsZQGpA57QSB3JUMkrXCvPTX0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.105.022ce8f.0_1583770320584_0.016114909044075754"},"_hasShrinkwrap":false},"1.0.11-canary.106.5172613.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.106.5172613.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"517261344f618fc3e14bfbbb2323e4408c9e1479","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.106.5172613.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-fVWb3rH25VF9/JBKjMf7273BSEhYfjgxSySkiC06vr0CIvuUlcZC59yJjCJ/EC1gpqtGZFR0kkaintd6zvjd2w==","shasum":"9348b0e9072fcef65d68075cdf98f1facf918f1e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.106.5172613.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZmrtCRA9TVsSAnZWagAADuQP/2QhPeoVgwwe0TkhJcdv\nuvdZefBx3UWmqKRYbnOrtWHpK8Zf6OathfFm9xjc1LbIf6Ck25K/sCfzd8HY\noT21kCcB1oNG1gTK/Z11cdtv1DWLte3nb8rWTu/Cgu2MfsZMLIT1zq3vBRyc\nQ7+HZPSJ8bytghKhOBnswXVGdSf+9NviQhJMMAM5nD52Qag6mk94ck3hDhPA\n368Tbfxt6eYznI0BjYUDrvnsDEE+76pA5qIidJuwK7vqJ+hP2455M+vtILrI\nH3zBJLzXFNPUS0+HVmPTKC5x4NPFnIRPtcUnhSY+SJ6DC0Y0lQekJ3pjUUmV\n5gABC9/WwRWWqiRWl7eHQ8H9Flc/OUTC7UG0lGVkAAdXrKkIYlDwNOjEZVh1\nSS5s517UiPGbj4KW/sqUjWHpSqqV851t+r4Cs7L4o4zANBmL9gJDbRrc9SaK\nlGyA70ch5U2XyiGYccpI90/wNGaKwGzx4twc+bHsqOBFXkBL4A/kD+KV4lP4\nSOjWA2pSKrjWgCIRuruAa+vNRKx4W0Az0w/1H0Lad8FQ0dU5eDWls4sXiTRs\nE4QFHLkzCJ6Jo2yyyv0Lp509uxVqetspKjTDo52DNgNmI+oWj0UJ2Brn0/Co\nAIacSXoLLKj6U+KbgW60ina3viVyjkDuSbZy/hhOxAp4nLm1mSmjuPHjzr0A\nTT/5\r\n=vrWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH6rUOCRrdQGg3IUTkhS+f0gcyOv6GAcnISWzFL9aZigIhAMamF/hAumZi/EIHDi8GMdEwLEEgYQUKGfDFfxmLagnU"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.106.5172613.0_1583770349206_0.08715579493854508"},"_hasShrinkwrap":false},"1.0.11-canary.110.37c8df8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.110.37c8df8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"37c8df8daeb143eb98c4cd5518c32740fd585b59","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.110.37c8df8.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-H2yK1h6+j06nMkN88WiCZu5Hyu2CvIbH70yDDGFTdMfRoDPbqfECZOFFl/UEbNOB0py/uUf6ixibI46EcpXoqQ==","shasum":"11c070f061220c971f75b12c0d00deae22334650","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.110.37c8df8.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebBMWCRA9TVsSAnZWagAAeR4P/RSpFsZZq89q7xHPvyh+\n7Ty4yBDW3BXQaCKvJCg3UzSxgOjuTftTDDqsn9wvImhChytWyOaY8k2SIDkl\n6jCc42rW8MkbH2DZvVt8an0Ho9gLWtPJ/kLsIJPWM+2lVBCWr464ogtjYDD9\nK8IWdxs99kgpzeA/qWrHNKWmVQLSQ8lI52JQFVehhv7wWNrI33cA/2CNGdaZ\n8Ju2Z2oFgojBqumfaJqzUIOQX89Oo4sn5JZH6TeGyAgBhkzHvigSh3PRRoBi\nyeBvd5RHZbI4PwMGkT/YCaU1RovbJ0E/i8N8QCL1nj3VVYgcG0VbFv7NjRvN\nvwV9Z3Ip45bQk3JcC7s1L5h7dwnDlHLlNiFHFuwjHbnzLmWONdIXVZYpjedz\nRXbxYEWMFAPa5NZGqLjOmGXhqElSm+Y4E6JBSXoDTuCHoKV8cwqazCkdCEwV\nNFcKOD32OuAT2qy0rmCcj9QEBX87DUEYugKPhENCK5FspPkryu8j5knVwvNo\n19CwE+ZlmZlXA6iTH3TWcJ6hbvBIwgtkULgBMVn2sYxYwx4WLTyLw9go1JPr\nH374ZWMKqkSVzzjlF/GgcV/NIz0uLImW89EbG9+LNRdP/xVXILLE6jVx4Uwu\nyLx1UHicrIFkLsllH/ipeF2rwuefosCemgTVE8Yrk+0c3qhUoLYpwF/qGi8R\nHAhv\r\n=uxVe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHdej6LULuZhaZtjCSUxxP5S4OFF6wOZKF86JCWRSTCgIhAIGrRyITXm2hTOe+aT8//JMiM5CtqrCd0spR84QCCv2f"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.110.37c8df8.0_1584141078364_0.8519017644115032"},"_hasShrinkwrap":false},"1.0.11-canary.111.cd32db3.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.111.cd32db3.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"cd32db387352928054a1d48b8b171a5bf6ab135c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.111.cd32db3.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-S4uc4yQ8Uv5Gyh5rzqriybHfjyrDqfvZH+tOq3eDQzOxWpau3gRmJCGI/vKPWEHuUfE9hYJzUP0LmHLm4iKlrQ==","shasum":"179b0ce701b9f320892609228c419159395d02f1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.111.cd32db3.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb72kCRA9TVsSAnZWagAAadoP/A2/1+kzZIImcxRpSa6F\nmkwGIaW19GuSrv9J9VThA5CzRZPX6nb61suuQQd7GovI26EwFCrefqYnyi/p\n0Ub8Hpk8HH+toZxWiwsXavynl7glXOxrRoIvFQO35c5/k8NSyaVIOzzQ27nU\n3JWD/Ddciq0SpQ8NMTErokEs5ZO9R/fkFwMKdM8BKnN3l0ztcYU39XaML4h6\nVapBgdPJVNYAh8d35530/6wudj+ltA+YLaFy4ekgeIvgUa1TsbCxM6qVUBqx\nY2za4QTdJsnvVhQ1F2vp4kwr7mT9eWOWJsso5dyFVSC/eyFoc6/QelttTnac\ntm/PyU67dfsMTe1VpLgxdhkllY0SqjeKLUOAKdOy5TS6qlylrVwzy21omTwE\nCBDnzxJjmYTY9aFV7orzLbFxgBKV40tAZf43rLVIsalcVZauHIerQFlTrcGr\n4rzJID5a/J9ovCfQGWTjSeViVvwptuPJSz//XfFeKaiHl1YytSlJgPA3xUMv\nP30cIk2LNybV2TxaFXK1MpjTRQm35QZq4OWkfJzsAPA51fQ+TNeQP62PQSKj\nXsMiofdgGddIg/4SjcKgTkOPuAP5ax6SlJ+TMEjcoE0H7eTcfydEMrAhm+OH\nUvWvTNWKVhafcaxnPabw88mDTkXwzIJPapQimjmkAFdnTIwHwlmmcbLpQh60\npy4H\r\n=Ba46\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHzHdrgTYPAY9FeBqXR/QMZcKXWepmUNtXhR2rPWniqAIgV0s2ZDIvLTWXVb50hHrgOQmfv+V6O9n+e8sk9QsfDzU="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.111.cd32db3.0_1584381347707_0.7608708390343435"},"_hasShrinkwrap":false},"1.0.11-canary.112.ef59ec3.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.112.ef59ec3.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"ef59ec3b14013216398c76b8aa6bfebecd807dde","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.112.ef59ec3.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-brlNz9jwW5UVIpFPVz3A/aMADpo1fl5zd8887cZTDWQLJ0GPRzJGzhS5+cnSCCZp1XGkGJwMFaK53iuPJt7xrg==","shasum":"26cd83ab33a61a08e594cd8778a00c6de37c14e7","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.112.ef59ec3.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb73ACRA9TVsSAnZWagAA9O0QAJeyytuXAxHghkPen73N\n0nLYyboJzPkuyggWBnhb3ft80iMFvTgFoCVw431yNf2GEzrsbWFMLrjr9Xp+\noWFiVdweJ/PuKESrfselUG7j8EqRjnnizkBkT0+nSvP/X2gLBVqP4Dc/sdyi\nD8zcATJPaAb3yu0rAq6Zgn7jEjdHlyOIAsQAx1tYEH8mi/rE34vZd0Zbweec\n2HlJGyRP8BeubO3DzM59Ddz6af8B8/k3TfRAq1gJL/s1gedvtFnf66Q4Ejbb\nODnqf41AnW/G18TRL2a6kgpqm2Ul8Ne+fX+CMY0TiWOQlYsQFT+xBuTxfMI4\ncbIrs+cj6p7BJZtrwDfKYHNg3L4YlZeJR11VAPk86cjDhg8/B4Sbxo7xNSXu\nYBzD9BrZFPUFz6vSxbBXHzUsIOFCpitsQ6eVO661XkugDy3dysSsxPvYZU9k\ndbTfpxbruoy625CqPxn0JhEdSSWQrdrsRHT7+25eppdPBSMb8mpwnij5IFGR\n/I+df/7i50okPivdgVtIbV7xhadneJLI9nbZG1nbxhwhiba0pw8HzyBoLrtj\nJ6Hw0A6OV5jWwV6jNX3wo1NyZ+5g+EzTtZv0Vf0kMfyU3Pu4ab2WkXaENYzr\nYajEecFOIAjDQ5sOEvfwRiiJfQsVDc5c4+nrk15bB+ptzLTFaVnHWAzdRpxu\nlLlv\r\n=osaR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD69bNgpnDZMRw7ahoIQM4mA9HaO6fNHf3JpxCRBWN3CQIhAOVXKel8cdImWKH5T/jsW3C4COaZFQU8lCzBnaixyV6r"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.112.ef59ec3.0_1584381375849_0.7831944919700784"},"_hasShrinkwrap":false},"1.0.11-canary.113.db337a8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.113.db337a8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"db337a8acf3a5949c73c47f4a3b5109bdecc613f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.113.db337a8.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-mViDqDKL9gd7v+9jT9nne2MvfUia+zTWKM7MJ54czTRaykBOlIfWhfX8PtwQk127aTl/8z9YfPqZHdUBRDhI8w==","shasum":"81922df29ea4a78f6ffaaf5ae4e7adf7d33feafa","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.113.db337a8.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb73qCRA9TVsSAnZWagAA8bsP/1yAZbwg7TgttZdfLCMH\n7GU8v4i1QXmet+gn3k8d27EtMNoLjQB+eYptkZGKsIFfLAyPQ6Eh9fxnfSaM\ndMMgyoHOMSw8EW9HaR+gQDLE1W0T3sOKVYeF6LoyYv+KymodkweJMMDzWu0V\n+zQCD1Qvrhap0vGNQpq0AXmRb/5cP1ug8we6sk47yhCGsofc/ws2sRSbCIG2\na+SVZ00tyQt83s4M19QLVe8/uI3GZfQMy08YlhfttfTfLnuqyYKKAVExYy/V\n+Zm7zza4kTIz/EV5zfNmTHbj1Xu7xgvlBS84OLlMYh8mVtUVbyoljWtPi9gq\nfW4ZZ9SBMANfz2t60g5e+ohQzaBXGYH/EnRbAAXp1mMsl/9yZ+LULuCB4pnm\ndusB1vC2NY7ZRgfZDV98gYwJDaFp7lnRX4YxOmPftfTY2a9mz838HnCDLGlB\nYOYlR8dGfZTvJWvBQW3O5wc1lcaghzXpk9Hpli5ajjHG11PE7zRCocazVsAD\nofeWD7tXy0NxNeelkVPfmiAkoN1TXPfSeaIzSil5YjVbuNalF09vXSKnmiWX\nQ6dlg4lbbeHPH/X46pc2XWqzgNe2NTXg+PM6GYHanvJqLrl80d1GMdtu3DWy\ngXTtOH59a5/9S9kNxc96FXVKqQZitm2P6cVy9Exj2togAvBsRgFzqACjn86X\nj3Ze\r\n=IKvT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6gl3/6BsMWBIECCnmrBDjZPCUfUCIax2f1jGSjPp6fAiEAgQoegqDH2xknKo2bqOyVOqrTraQxOQs94A6vqplCx5g="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.113.db337a8.0_1584381418148_0.6788616918587784"},"_hasShrinkwrap":false},"1.0.11-canary.114.d957718.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.114.d957718.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d9577189d0d4186d63b449f8bd6f38d36638c208","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.114.d957718.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-eSebQopOqv0vQkIhBnS4d7hk1x1QWDeeTH4Pt3IMsRiiJYO4CuXqRn2nsCTZVVosOevFlXVM5mD2Onz7JTUqbQ==","shasum":"aa1fffc9f24538b90b805ab090a27a92f70e8ccf","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.114.d957718.0.tgz","fileCount":161,"unpackedSize":2394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb75ACRA9TVsSAnZWagAAX+wP/02tTeJWVBq+Uy4Dmviu\nKFjaT1NJ7brujuCy8QooEkyUE1iIEnXPgExuOItKjuoU6hL/b//s4B8P41dI\n0gCmCCRVe6Hib34EzyekF0t3zPHV8dKFPyQPBAZLXmAXL3Al5E4nnqOaceT8\nWTlppVQc2HJZte9cEPh45Tlr492lzrmgGd0kUbWowDs3SUDa2jK9FN/UM4sN\nzL7njFQZG1E4dtp12wfh9HtHjXLU5+s7ef2p8WF78bLd3raszjVPO7HQjGlO\n/VdQJq1Pt/TuZjDONRg0oXwjsP0RyWX/7lSCAjNMlpo8xFc0WpS3xpXLjv5P\nQ6KKDMTnULFWqmRjcKyYJkmqqYTZa4ZNGeo4ZIzUmuAp4EUaiC0DOEQDDdwE\n9HAxnE1Qcfv0gcCMtV4iQUP2H0hv/G1+r1Y9bIFm9Arn1RA51conRNUDfECP\nqmFqMnyYl7uhwydIIYuU6sbeuczNWK7sKXx8oNq/OKuL2KaoMXnv/QVpayw/\ngoWSE6kemnr6x6/ETbfz2q5gDjzLRbiLwC8t9gS9+mWjO3zL8AxZVxIBq/as\nCoLO/OpC45oDrPzUGsQo7v+J5RohFOzIkJU4BstoSERhQsOaFqTpArmMJ9kx\nsO7dzH/rlPUNKHYh7kd3t0Elaw4Q4ZUcWB9R1W39BxGglHL7CIocC3ksoPnC\ndhJZ\r\n=ddLK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDxH6c9wSdwCESfnbWm3eY9BmHMg/sBJpCS9rcezIa1AiAVrbsiGMwIvbpr8ewDxWh41A2VbP1TV/Yolony1Tm3iQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.114.d957718.0_1584381503924_0.5255043217466111"},"_hasShrinkwrap":false},"1.0.11-canary.115.99e15bd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.115.99e15bd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"99e15bd9bb8663cf9c83ea30ae6bbe86ee6af2b5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.115.99e15bd.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-7VDC0iJxJpMvxWxKcfj+zUF7kCh/TytdOOQYna/z2DfF91frHEcA0zQktNGSFVLnnr6g5xxV0cuFfqNR+zYHPg==","shasum":"66a2f832c12ed70046c9e3d6d9f3824cdac4f010","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.115.99e15bd.0.tgz","fileCount":161,"unpackedSize":2391291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb76kCRA9TVsSAnZWagAA654P/2x05kFq1ECK/oc0Hupw\nTWx1wgr5cpG45jOZ4bHaTNEqKhC+Wshr7M/djozhCJEgTMpYbZQvDktth1A6\nXNdKf3twu4yoboWJFel3aWRtpKo1WhWjWTbsT9Vt6xZd5rLcCM2Xk3XStDMr\nISa108DfXGecOfM8OVJKM9FkU0pkeCuUhTPESTH3/wLOJaSBEh3y8pYcecar\n2BuoxmgY6rF/Go9GnXMoIvSo4ZI1wTor2uPf+jJnjQK3OXJwLpizWxbSVWfT\ni6xnxuYBiU4hWVyJNLLOauuKNpZXypuvDy56GEYXSBOg76pnuKZ7RoPIWvx+\nRsb0jkinlTcoR8/PcCUbuCgC3Zcf1HTyvmMCBdNzNun9sk9G8rmLZETta6fX\ncVNu7RvUnnp3nyHkQ6MM3zPYo/zQGSikmEpFBPeBulqJaYYtrXxtv/RTy61v\nRBqlLRcV+pD6Gys8RujBCuunCbhCzB1KGgq405a082aI8v3QjvoB4lk0UHw9\nf1YzCb5Fmi+WNTOrnyYLErMe16owraArCm5OY4VZm2p9T6dAgdsFcdT/3XJ/\njlRm0QRTPeg+xk2bd2yv/yePE2PQuf8Cy+yhZWxKyeaqn1Nrqqn/otrWZpE6\nguaoPB3BKYanT/cFp0ui0AWP7kItf/GeJ8ukDn7/vZRmejYAlLuceCMLfw1I\nhDGQ\r\n=6bLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDItRfI67Ydkl0Z05lPcRFoBq2ETqzbnBQ5J3BEpbdxzAIgPnE62/uppFwRc4UyewoMHBavHXAlonPoFum210dz2Ug="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.115.99e15bd.0_1584381603795_0.13790858230533298"},"_hasShrinkwrap":false},"1.0.11-canary.116.f6b3979.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.116.f6b3979.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f6b39794d1af331f656be71c3877b41497396344","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.116.f6b3979.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-gSGQ997Gn6gVJ6Ptr8sx4EQbmmLYcXxtOMD9c87fa41mt08pKwyZz2LoaCoVZVOnD3pqOsHw6WOSbJsQ3x6MjA==","shasum":"61f9c18945ed014f9a4799cb5a0af5db453173b4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.116.f6b3979.0.tgz","fileCount":161,"unpackedSize":2389897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeQC/CRA9TVsSAnZWagAAiB8P/AiyqlMiA/5W3JmfLbjs\nLVd3bh5vVqBg8xZ3waooXBplEFCYUVT1XcnTz++h1RX1B2W4MRDcpi10xHNV\nNn9QnKuVQPz4pcXr/TrAQAQE/C8ZTCC16O6O57cFO6ZefCIyWt/H3tFvVXxo\nL4Wx0BJ3T02JdB1hbBiJC70AHn8KE0phaL+nDlVUNOGn49y3FUuPz1zwKl2K\nkifoms2PoMcCt1pVmptjjVVzriFZ5Dgi/6kZxFYJL/QjAOcrvrqwmuS4aV/B\n0afPuZuSPfXvN3Thbhjqb1hXmDTajhkj40gl0Ro6HLIIfXdeRkCV5opjXYoB\nyLhPzhHon4EIc5EisdItrKm8IlGsd2vUPuXwEhJKUb+HvfEJQMFgpjpXrshB\ncNPE1t2LsddHkX07YqJ0BaNgAEFzZyxdJOED8Wyi1NiDBzTjqoP1Nl/n4/2c\ncnpqcTyRICV+6du2WXrLSq8+KaPwm9CwNph6O5hOKoKSEdzd9qe+ZcCIlbuk\nfQu8C57aHW4bF+fGrqoN2lPHxNfGPob8Et2isCZZC2SNrCFwD8c5J/ftFI34\nRBDdqqZYa6m3bvM1RIF9sqNRNSN3UEde2zIsY5DU8/GYmx34FbJwIFtXJ9iL\nOgD0C3OwWxuVIfXh7+66cfeFgVq0/gvVIyv6O90HRDf5R9LuvOmdAmJEAver\nHT09\r\n=PRdI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHetulmDI7apo2apAk148dGI57Vuy/cFMqoPl4NwXbFwIgfcDAMpRybXsVxfmEtg4hwyWThM1p06H9hCIsMlQvf+Y="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.116.f6b3979.0_1584988350406_0.969531792972063"},"_hasShrinkwrap":false},"1.0.11-canary.117.48bfb10.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.117.48bfb10.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"48bfb10cd168291345ed2a8896c80df4c8479176","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.117.48bfb10.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-mJ2sbpbVDSEOrq4LVi5pjJc6/HljcfZIaGokaCG59A4T1sL0sPJ75f91YNKeJ2bm5r8C93OFALFRKPH6yWyUqg==","shasum":"a32cda5d10da75648d30adebdcd5f96c71668f6d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.117.48bfb10.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeQD0CRA9TVsSAnZWagAAYY0P/2bsNcblipaVmnNkoqw6\ny//yfX8d4ELhS4GQX/9GquHxYA0xfiBWE5P8fSubc6nwTtQBfR5Iot8iskV1\nppOLOocciRvOgtb/TSBZy7VtDcbS51WGz29wOze9ORbLQhrhEFsu7z6zZOM0\nlrKMLIhmApKL9RXIiL4CsNErS4VGCl3akD8jVcfY5UEz3xWgrpo6R/OyBMX1\nnBg9uDCdONSfuEAJyyO16/rEbvPjK4cFLDYz2th629xv7MIYgbLsMxo0dCH1\nQ5HnHxAmunH1BUPqaPZehvmwCLr95Di+WF1iTKR+AEkC+U9dHGwhFB/fFjSQ\nJC0BiuBjgDiC6yX/wrjydHJG1ucIc9Oj0c/7qXQFX0qjJbBHRDe0xnEQKUsg\ny9y6xb4HIJzRHTlMV96VPfYKyc8fiWGcyic8BEtK4kStrqbUKzANL79CTaj3\nASL6NTby/yumUCcWkR6XIJCWnjLiPHW0VIj5BAJxV0EvYAzmlr3U5NP6giyA\nfDIGmSTGcE9p3BHlgQ/HpvCSQDNnOUAZlCZak2ye4Qm5UaPLLZzMY5oqGohR\nu9kayMSAJgFrAZHa21AuOPMLjSuOfh9fc99JQvbqGLNrYt94PLjuKGXGCJ+L\n/0QSKJNHUX8r3eE5Sypd3DRi5vBW9Uw4IkCZskCgbtaVyXMVSq1raygD00rq\new7a\r\n=mR2p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMXw45/lVBAnaY1cJMuKoBk5DcfCFsury2jt6FRmYXFwIhAIWOLBwMlFJcY8FSI2Dp22maJb0Ow7Oh6WwQfYp42syo"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.117.48bfb10.0_1584988403620_0.3472894007839924"},"_hasShrinkwrap":false},"1.0.11-canary.118.b2c6958.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.118.b2c6958.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b2c69586ae42a493fad6f2bb43977b253801d6ac","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.118.b2c6958.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-XNdVRoDETz18crirRRrGT/yHZwLc2uHNV8lEnF135UepDI03wo8jq8arZZxiGXXa/ZTbLKladHMrAKGluoa7ug==","shasum":"3e64db923e2c04271d0e6e58f691e9e603cc6ee3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.118.b2c6958.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeQFyCRA9TVsSAnZWagAAQbQP/j3zlU8L6NkjfVQlytr0\npccPSyhucbeugFQ23y0Iu6KmwnWIV3iV8YvnVC5T8y852CHxVHbVYVaA055D\nH47hQY2LGNXrJuiL5MNMgmBHBxNMpwlZC/xa60kiZ+xXCOYtTeiJCULBoQTi\nilI5+v5PTyKTrD/zDeKNvDyV/6jP5DhN80e6nD8etChZ6UmX4Me2QcxxhU4v\nv9iBbXpvSvd3RZkVxWodlmBaOWoKQY+H57efeIhKn6P7bxoWM2YULwB6gm0E\nW+TwciP+2QPs/X2AeI3PUCwTojaIEtb52awWY3qcbC4rOC8lDL3xFrCd1dcJ\ndoshGwqpsr1/WrGcd03B8YqKCeMZz7/qAtfKwEB9Fg8P+/8sajD9RBteXpUV\nq6t/rCh4s2ElLR6yvMB0dyFu1BYmfmNPjCgJvpO5/E+0Wv5Y1sAGVVuj2kTu\nMY0SIJfoZkfhnPazZkCJkcsumYPNfkNkhYFgB4QKjEBJ4SpKytvpdSMONxqC\n0Qg5bhdzK3OHnbfsOzOdh7yGJI28MZJZxoo9jQhJReMb3tiypq2c8QnPAeWP\ndI03XBWIz7nNy7uPg/StHLEMDhmT53YImrfXfyNpJ10WddYBHfVKeSLHZqDH\nm25pmlfiYbnmNAUgjITtf4PBqTmwXq/n7AdbkqJsB7JoijrYfuoZqcrEfLce\no00/\r\n=/6XP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9nXUEVkDkYy8TT9XYrN2MP8UkciVlPVUBKBKi6ZwmgAiEAv0WxVOluo+krA0wRjes6caJuPU54XeXv4vDq0OpM1ac="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.118.b2c6958.0_1584988530143_0.18434219444018374"},"_hasShrinkwrap":false},"1.0.11-canary.120.7c1d887.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.120.7c1d887.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7c1d887ab50b3b95303718e21d63b834afc99f0e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.120.7c1d887.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-1zywLA2CNpdCmgAwegjHeil8sUjUow2u4egm/EEFlwds1tKDKGbuRAo1YZ8pIubJUW38Qqb0REsl3swnukpV4A==","shasum":"ec1e73527fde0e6e60c12c71c114f6b5811b74fb","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.120.7c1d887.0.tgz","fileCount":161,"unpackedSize":2391291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegi2uCRA9TVsSAnZWagAASjEP+gMnZYPHObmsp3QZMvOx\nx7TO9IWH+rdsL+M93JfvX1MXC/CJoF8zab8u8KoqFY0KxOSF8RWjdO0NwT+5\nJBCrjVEVlcJJkR2ty+55SrmzSxg7qk8uBYAk3T+HnTRVEzGLiQpaqkoojClW\neKSdPGQwPYii+zii7Fc9Ko6xkTKZLZf+6V8iumRVJKMTK5FcHmRlDTd5M2Ez\nMeQHTF65yc4DmPEIfQCH+JqH5mx5b1aakK+qvRSAxwedj84NRoLuPbk6TKoS\n1mok0qGBq9LowOmUJE1bZqk0XF6L854FuSMR8CS2+4Un1ZuK69xw0bEsyaaz\npiw2Ud0ZcIMDwPrXWt4EAkosxn9ciuXbqNO8C/MMiyuvDw1p5zfC15qb5Ne7\nPfv6NPmFIOr7KjFr+fAEGIUZs3ylA877F9AHPU0bdhP40nlVIh00yAnD7e0W\nlTb+zkW1kzfrUjRcEZanoOE9qYnawduKgbFzSPF+WmSFZ9zM0BMOy4ccFJcN\n2I4UTrl2ggzbMX7U9zNWvXc05FCwpaiqDoQeqqqlFw4lU1jdG6bgDMltg+C0\nFFJcZeeAQEB8KbcB/XqLz5vqtjwXtIy05OTWLYuJ93Fjog7kLzykVYGV9kGq\nWf40WFUQtvzfjv8CiqVYIomgjLz5sdUJuigk716oYK0PLIyoBad3DsE8PxJf\n17JO\r\n=jx+D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnpulTzfxtPWmEUNF/e6oVqF/wb3Yu19M0s4nsGockHAiEAkoXGiuuUxkk+/pfHeKjFM5bkuC5d6MUIjg7uIercMJQ="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.120.7c1d887.0_1585589677642_0.4124996737205109"},"_hasShrinkwrap":false},"1.0.11-canary.121.5c2962d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.121.5c2962d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5c2962d385a4de9d74cc7dc4e06d56518f7e2845","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.121.5c2962d.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-cZU628ZIcAhPj2W4LqwLwNbDEq9gpV5rKU6Gc9gZUMtBW+E6u9xeVzDuA6f36koYSoosuDonG8a/j1dJ8+bEcQ==","shasum":"c123fefa678e2026a0aefb8b04702f04123a9dbd","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.121.5c2962d.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegi3qCRA9TVsSAnZWagAAw0cP/AzEq2SzprstxuDVd0Dm\nZjUCGKKigUS9X06zTuBxUC5m1pOFgGgxK/nVvc8zY+ofJTW+GZ3d70NOiQzr\n9VGeiyT13bbt/Ch4LMGDBn3D1KJae842eXfYFMKwVNKJ2h8ss1dvVXFAwGUU\nZW428he2VIHmu0w0dzWFQ6jiCyhMpPzYByeQghIU8I+3n5UZdOg/0VswEZyo\nigNLXWH6HdPweurInjrw01/DTNbTXRyRynwrTuUB/376bg5Ey2siW+piOoBm\n5hoJ8B45aRWwwoRuq7VYuzLBkOhuiHel7vHTQ3F/gS00NwPLNtud3B/tfi5u\nJFe7BK7y6I0kt4iw44pOhTNUO84ubjQ54yHMuGUqErCLUaB7yqeX8Gw3/hkI\n7QUroDvN+vYgnGgp+KSqIRt3xJVtJ0REJeI8qg042FUng4Y74l7RDOq41rwB\n5iL+lo3RRKyw7Gbbgu5gRo98zhMdcinWDpe4bjflHNQXxbr3/VHBk0iUCnTX\nUEDdJ7McU6E2cmbDtk3WC5xStwxuhdxgQG4ldsM8U4lRKFtHPC+1qo7xNCsj\nRazNF3IlzXs7knOEtnVUoYcksCck3X3MTWFIUJ2NaSO8dLcmt4eQMT0/nO3X\nynTcyXeMcv93tmZsPC3k2vhLiNJ21zulQiMcYX1jMFB5lkoC7/bwmEQA/zF4\nmtTH\r\n=FKCh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZM2+KDdcvvlbvSEH8Vi5saGHesDeVMMBdqTlInk0WWgIhAIRiR5QyBbgjcYdeiDZ0AzFRpqBtrlsaBoorEcZ3b/KO"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.121.5c2962d.0_1585589738280_0.0709377320237865"},"_hasShrinkwrap":false},"1.0.11-canary.123.727c417.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.123.727c417.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"727c4175a7a01124efc8a52eb6f506d898745d25","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.123.727c417.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-kZ2IqWoqxFf4mZz0rijbCiz6NrFrg1n6gGU9LGG16kJnqPfKAi9Y8mBTPo1wL0fndvsss97frpJwPnw+zsKHmQ==","shasum":"59828dddc782bffc13c252751d804470f757a594","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.123.727c417.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegjEDCRA9TVsSAnZWagAAcQoQAJmHX0HLMYPaTvjtnBDj\n737Lh/m5rTp0gxlCmqppuq43pW9QhxJ3/nY6SC+FlpV0v56fYKwSF50y+vTr\nnms9SWzlflEbyD2ytu+y5eiJx3Jz3POpvQYhf15WL3vnJElB3vRH1gQc0w9p\nxgah/nufwtaq+aKWeD78d7td2dzoExuJPtjEfuo2SVsIfAeSe9WlunUlWfz2\nbm8LchdDHowGcVscPYEs41Id3gEZJ+pH/77eu3lNy/h9dlmHD24tnwdJmRbh\nZ2evzc+JDbKYwwdEecZg1G2BpqTErejD14IHqu36ZGuM3E5xwFxKc5kYUwa2\nuAzgJlFrohEB24Ldgm4CgX9D9N5TEx32SjiB8R3eNY+blfwH/u6Vk/jcqd9/\nkutkR0GMd7yU1v+LKQtK7oYqDZJu56YXIb+7gBZB3vvXoWzsprP9gBadnoIM\nVBSADfoCBoDFTV3uASqCfsGo+GxIYMWjf20/9ARDfmK/bJd+k1peWjS8kw9R\nx0bIHGKcwN2pMC46hqn9OP8dkU+PI9dsY9OzLfhlBnyB8pgem6JZJ0YwKyca\nS+ig25Ydha6L5KCR6BN1NyZ0BsYuqv1X3YOMWIuJS2sTtEP+LsralupUhIYQ\nHqIUHbTcPpagHxV+6VqJ4SJZnMVKJgA3w9kNZeVXUEsHYO4KTuyW72ifGYt9\nbbp5\r\n=grKc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCafzxd6H1PKSeqT2dxkex3vOK+8cqAFAoTg3iYrvRRRQIhALEHWDX9ALVzLZoFaiIkS6niTbHhk2PDeMWqOp0610JF"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.123.727c417.0_1585590530609_0.6904833842696843"},"_hasShrinkwrap":false},"1.0.11-canary.124.a774333.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.124.a774333.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.2.2","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a7743339dfd490bc18acec0bb43b3e6155629cf8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.124.a774333.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-que7PeH7WHImuQVD/f+hEnZlPNhImk44eFU0+bqzXwpILybI2wFHrcYHZuX4u4+6Sk2dlBg7r/g8PcPT5pCy2g==","shasum":"871e5496cc4f276898ceea61368d616ca83da7c0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.124.a774333.0.tgz","fileCount":161,"unpackedSize":2391437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegjHfCRA9TVsSAnZWagAA++oP/2RuB9oUi792VnNjOdyJ\n8hs6JlYHTIguz5E/mewtYSs4lA0jZGDp2+H4Vbn7v83TSazxTzPy/Zn+OkTk\nvXMN4uXBxQygd+X+1PKbNaldUXhtV158CItELFh4xOVUKBdhYX1a7M3ULpwp\nBR9HqwpZgsYV+/8/+h8Am24CfsaWDCUVwzpmj1dRFA/VeSo0jVMpJDO9K9wX\ntw6/sRA+1UG37KegQiC1MMxa26LYHO/dTxMrWB9v8zNWOELE3AHk/idvqIan\nEwFpClZeTGRLN4Vl0as+62Jqc1T1b3InTgdrbXMJYQ8FwTGnituZBcPR3aHk\nrdSp2u/kZnxuFVXF0p2pgQRG6D3w07aarLaKYigZPKsnRqtDRKc5GPYYSH1s\nbX12vV5SHMCZC1pQxRNYtlYv/idIiJOFFl8U6vET6jZAwDuFxr91tAIO2Ixk\nTzA5V3uqTYhYZDptLwpo2oOkjeCAEDCCaXDfu3AYudCht62P8MxcAkVzaCwx\npEPe4slm6eTQkwzraQ37a6b8hrZhSMt3YC8q5AEgN/+syEyiJwQLPQZURkR4\nDjuwpf8DgAYC3ECxehjxcZi0i9/561U4Vb5fg9itbBvxVQP4yj7dJG9OGe/u\nTFtHzsIYuI2j4LVr9HOFQ5RTkYFOJv63pKrmmpLeFlgts2wg5hNN2rpmcD5D\nEtpY\r\n=r77h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCECQXxGAatFAXFEyx5qbFr7j2Oq9J0nxjhkgroKPYWAiAQFVVfmHA/PBtZsrFS8CtVOVQkjh5aVUGi2LmwGefbiQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.124.a774333.0_1585590750773_0.004721782882278314"},"_hasShrinkwrap":false},"1.0.11-canary.125.37fadcf.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.125.37fadcf.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.6.1","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@zeit/next-css":"1.0.1","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.1","downshift":"4.0.1","emotion-theming":"10.0.27","graphql":"14.6.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.0.2","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.3","open":"7.0.2","react":"16.13.0","react-dev-utils":"10.2.0","react-dom":"16.13.0","react-feather":"2.0.3","urql":"1.9.0","wait-for-localhost":"3.2.0"},"devDependencies":{"@fullhuman/postcss-purgecss":"2.1.0","@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.6.3","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","autoprefixer":"9.7.4","cssnano":"4.1.10","postcss-easy-import":"3.0.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"37fadcf15e45aa68a23a76fd47e94ba1a5e35a31","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.125.37fadcf.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-kJUnJyBzFcl6usUofo5AVWyBWtlk8RdgTI1dSaNPW4TLbeQJQ0mr2hqv4Gt2bV2lMqQQ7RfDMG+4dCLNHsGxww==","shasum":"c9a2650c612c6525421d0e68a8d5175abea855e1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.125.37fadcf.0.tgz","fileCount":163,"unpackedSize":2402718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg63ECRA9TVsSAnZWagAAlnQP/AxhF4EBwvjzdju6YIjP\nvKZqyhMUoTnOW8NJOEoUBpUC7JURdsh3x03JJvDbaLhM/A2TirBsoZVj8A7C\nnqJ+g991/sA9fG8/Ysu9h1bhNbFza7uch0Qa9SIZhw23EjrAxIMLBDdB19YI\nyyLxWRSwM/y/aFwtNpbhqpcgf75XxwZ47Ht0Z+6sb+WJH65TANn1I/pJBpMF\n/LY1y80+c5fvWgVcIjOnIrVfbhOfrGOPnrvxDJgNt7p2kibXKdGBnSVM5RKJ\nHz3XioM+wewdqmTrzava/zk9czOM0/ALL2hwwxDe2evl8eLxexcSHqLfpZia\n6xM/qUR6X0rEeG0YOvn4QSo8M0EfU6HchCgJMExaPyPM8d2WIaw0opzNvzyr\nlPF9OLIiULVHL9nU+2qzAx5sdA/6nlQSH1lhTvlQEk1To8iZl1zDBI3tW2M/\nd2JpulQpZMZwfLy1Ut0kBnslTXsz34VjyzyjLobZQdQm2pP4ZwZXaiRLAHb6\nJedJociXrDoaE3aDb9Y1Fyq76pluF5PZ7je1NmLYOIXKe13PmoFUR8YfVnCQ\nRofUmEDqripegiQq1drVLKzQGs1emyniL0ByNqTtyHnKAFms496/I5G+hsyw\nFNqh/Xoeo1gjhweFghl74SEI0uCkUu+8fhZlHWqaoRWDRTQvxIihih/sCBrt\nY8Zc\r\n=wX69\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu0oCHXjyXNB/GXIfKZUCv/3PHgAdeB+fIh89AIveYJgIhANl1ghSviLWyQ5AFjxUzYly0BxvidE7c7yWcmRRkb6bt"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.125.37fadcf.0_1585688003867_0.2549826305772016"},"_hasShrinkwrap":false},"1.0.11-canary.126.b7f4948.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11-canary.126.b7f4948.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b7f494816705930bffbfd1151445f587135c499a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11-canary.126.b7f4948.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-bR+4bNpuL/d4B9XYCFsAPFkqcO68UznYvY/YfI/8Wfoxm4uGkpfNQRb84J+G5Hlsg4rsYFEV07xkNNYlmzRdTg==","shasum":"179c6b835cf0247158fc3bc4ef829c6c6a4c5063","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11-canary.126.b7f4948.0.tgz","fileCount":161,"unpackedSize":3108647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeioxKCRA9TVsSAnZWagAAnJgQAJgwMmkEj9zjzF6WGxII\nfVa8iEhhCTpucdFC0QuLRs4Qs9cWrotdG6KsbtsOReDeD4kR+HvXuucjxonY\n8sE8X4JGeoTF9WdS0X0cu3kYJvUiRZeB6RPhcYWPntX4zMcOuEpRYMVqJmzk\nBCj3mzB2Wojls0L2jh07MXqxW0qcO17CN1gRtG3SnMmbI7KVtYh4zHwMEbkb\ngPkOkLqH/V+kPIWA7reIJ3jJ71HHf+6XYYbDCrp7SoY8yg63C6qlGKY7Dqnm\nrHF0dN6ay5YP82cWS+ptMT43nbc3sUsHVQY4PO1sCqxCze3qD6WbJw+8sLt5\nW+/aRMmhdOM5L84jyVBp9BB5bJ9IxJp73vdJo4C/bOSFHzKeS2E7XahZSmKo\nO/TdQDwH8cqlTv5Wp7y3dM0Ig2/ngwwQhexDBJk03+opdCaCopTHd86kPbu7\ncUY01QyVU5h0l9i4gHcyj4uWGXcTYzuT8guFAD9Whvb19ih9dB6hoTiUlKyc\nXTKp0chpxR4f0i8sh1T44pfcoicy9e9ibilEH+07scTI+c1Ew2LbeEgZT5xA\ngLMiGWZRw/fR4EZtK0VZsE1ntZtDRtATaawhsXt2sf6R+JF/45CdIAEE7ciD\nVOoV+NcKz0Y+F+S1gto1FbiW5pGZxwyrwtP73ARW1tekSjzx7NLWyWo27eAz\nP4Al\r\n=trYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7hfZiR1r/M0M+bJN1IRutX1J6vouV8x/BnO5qCfFxLwIhALg3BUQbeg4q1fyleCm0sNyl/mjYKFqe0YGWL+B1R+O0"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11-canary.126.b7f4948.0_1586138186290_0.44272387882807007"},"_hasShrinkwrap":false},"1.0.11":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.11","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"e6049e06387c534537319c61deb2738f522ad99c","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.11","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-uiD94EjkJ+EpsBjtMSI7gd5WvvfRBC7EyL6dvxzPYGOVesMSGTABVqBVvejACmk7dC+NEAwc+kKrEOod01JbXg==","shasum":"26ef4513380844019acd2e5058d49a2fcaf9b70a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.11.tgz","fileCount":161,"unpackedSize":3108894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeio6cCRA9TVsSAnZWagAAmTcP/3SNasZ+TdaWcUZ/BbKR\nTjePTMcA77wb6HhjY7Ovaik6zvvfhGwZ9J9oD+jMYYkO36vP/hjFxbCkFGuI\n67FR4C+X2jQl/N6P5nEbLCW/w7oH4rSIfpCKfxx4QDvY/VVxI0UmtSO3vner\nUmR9NfWWNLVjgrpXNkpG17YYy8e65eRaKryxMo4ykZDGpkXo3VAhhhJl+Msj\nCQ7ls/nRUHVRfmi0QpQ9uLa3AI2ONXWnjBRbIaoL+LekFM6poifvN8YnEopB\nqz/19vo1k1OwHuvIKKDwmcfpB4dzvm8AM7iRyGy3Sz2TBiawhFhxdoE1wfrh\n2vOeyQUCqHCphPIEIVjHLdPu/kX0M+kAgBoFdKrcUekIXwhmmNO4593siA6X\nxrxpQqNiQ2dt/iTfC+rnJ/u+xCwoFa6aXjBGOUps+3Upwbwxutc9WdN2wtNQ\nW4tAM78QwwRG6ifyQM6M2y6TNEHJF/8ikOA8yCRDz9dyqwgciL52Zo+uSpz2\nFNXrJcSf0HehvSherqWRp16m5IYPcz0A2k3BpExHb9mpKxrnw4FBQHbgiwsy\nzSfnnxCsMNAoA/xG6HDd76DfqSzEd2wBBi4Tv7obbeXzLVyJypRePfVwieyA\nEYebDLGlPWCjvmC78ONJ4ZWc6mfnT2jZfrwffb+eZbHq1t5NY8glIeuLbG67\nzMnH\r\n=F40Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqsd7p0vBrztodDz84l36w3SdOQ8dqRRbU2koXCDJ2GAiA3fah3vXp7/tqOCGvCr65PPJe4s/gMiJwr648FNM06kA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.11_1586138779779_0.764088373571479"},"_hasShrinkwrap":false},"1.0.12-canary.127.1e3e727.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.127.1e3e727.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.6","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"1e3e727b1657c2aa27b2f1f764050d0847548e61","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.127.1e3e727.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-4fMrFWjzfkZMOIt+Dc8HvV+EzIflEzgnaU2uH++ppiBBTKxgF/CjInmZ1bhuWlQ/vay46SFmTa2yqF6GnDjBQw==","shasum":"2834d724c33096a70f54fffb838a4298add0cc24","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.127.1e3e727.0.tgz","fileCount":161,"unpackedSize":3108771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei24ICRA9TVsSAnZWagAAZcEP/izzeNODjMLj+Jg9DF9M\npaaeHX3BLVYOs30Et7W4CIjJ7iqqnl9+0B3ix1GPoTvlNgV+2X8YcfDHhgtk\naVZh1Es9x3XgkdwL2FRNTsbP+/o8u/i+SctjClE65iR56QXT6CmdsQCOSfBA\ncml9hN10UBn0JpKzztduumzad9n1JXJarSiFHVlkbHbEXy4+/PFFacFAlODl\n89w/vkq0BAM1aOE3DSOxlIkccEC2oEgnwK8KpfZLXoi5cf0puOofJxlw2dVD\ntzskV8Dmn+M0Ig/64EAiaqFq+b5kYsxo/b9Pva/RbaIouyBx5f1HrT1zviJM\nXCOsBBEWYF4RPf5mYO0O2Bg4ewJ1ircbt8oaPGbP+jq5Q3aZ9WIsVU0i2UyV\nMVbjjBAp/6gd8JotyxPmcpdkeyP/oY4Or8NHyZmMa0PLDFBrpbALSd2J0wir\nE9mSMNcgj8wXr3HAEnD1V2Tsu9Yl17bTF5i+NrX0l0A2p84p9VZNptOiECJm\nP1Xj6BGS9HAwkgM+JkE63PCNMyNpay05R0ikrcz0gev2C0Oy5EiGHmYBkiKj\n0/It85HVi/mQa6XkEGUfNj9H41GMRqJhnp/ujGYYqoLbYxIktCuIHqtSZMqx\nt0WD85P1ijaxawAJjhOeXf0lYlQsd0dKbnFEHGcmIGFUnEw3CRYBJrxfic26\nQMZd\r\n=YUVX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6jXIwhL+IGcgeI6x42YTXTshcXBlSbGWdafy+7cPP2AIgZO3604rs+jyMQnd/rx7RDBnlTfqu/r5FT7sJ7lSvhGM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.127.1e3e727.0_1586195976059_0.24707925167269673"},"_hasShrinkwrap":false},"1.0.12-canary.128.d496e6e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.128.d496e6e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d496e6edbf7f93f63d0336af8885996f741c3f1b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.128.d496e6e.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-zfcWtEnh4D5iqQ6s2Ar9et22PeqUMA5z0Y7k62tPI/8YVxYOcc3n/w45ofheFTiVU0221YbX/o6IwxmGm2JLRA==","shasum":"d5fbd7df24940d6bd31b883c334855e31ca71823","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.128.d496e6e.0.tgz","fileCount":161,"unpackedSize":3108915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei244CRA9TVsSAnZWagAAfFQP/RmkKkKTkazgMs1bAvX2\nqKvR5Y5hPRHW+xZcZJZxw02XDvGdaKTtm70PFJlnGfUomJXTUZP1QFpT5XRi\nlyDoBaosC6gtGEUFGi7Tczy0M00sHqCidfIeDLPjcVSFFgrVQ2aLDQaaREJy\nA7UM7n3zjnCY1uKKLrYPp5ZOGB9gfxNQT7m2KYjrE/7Jj1TZW0EAmKhwkJB8\n/F6IXn9VNHsB3g1fVyIQWVbRV7JbXkY5pLYvRrrZ+JxZasf0g2f1Gm5XhFMh\nwblP/INEJ3po1haSZdV1w8PppbPJgkMoednbRxmlzkUleKIlVXRh2RWt4Adh\nyRCD0XOq24AlavE2tJRvmG2kevuUok7LL51I3NGNnGBA/FzwIuUyK0ayfTG+\nYZYkn3V5kqP6nqExWoEZ/b26XcvBC+PO8h3pZ+9OSp9M7vLr+F2H18co1Nm2\n6iGq+0Jf6quX16ewwUVZQNyArvnOtfBUEyuM9Ze4rd8f183SSqSztSJzImLA\nXl2oV24bCYebyEVedNs0HkpocggVMYvjxLuYRnT1sfI4yexBBKIvX5Tlggox\nAaZkXbKz/WfVhrscHZJAy5A065Pv4tlHU/nIjisx/wFVnWaRRaySX7ZuysMZ\nN5bNhaRJKMIDaHaYK9+yD282ei2RS7bSVJUccDD5xBB7IJax4RRhd+vGRS02\nfPu3\r\n=oBV8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsqT7hJgTgHsqF+S0EeG+QmBtj77Ybke53m9rAi7UnpQIhAJm8LmVac5YzBIXbd5FApFd+cg2YTyXkPFBDD5M4PbE0"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.128.d496e6e.0_1586196024280_0.6792819305249516"},"_hasShrinkwrap":false},"1.0.12-canary.131.5d5637c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.131.5d5637c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"2.0.1","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5d5637c11a68c57e05a19821481cc81c2fbf768e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.131.5d5637c.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-WrG42R/kWlP6uGTNHKEC/eyAWsFI8n9RLJ6brx/brO713ZJfsH0/Wq9+OsAqUC3bGFELe7Y5SiFqzO5/wE5/LA==","shasum":"1246486527daf54ff97c21179e633c9e4b225111","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.131.5d5637c.0.tgz","fileCount":161,"unpackedSize":3109395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei270CRA9TVsSAnZWagAA9ocP/31poMcYLi94u/kpqLSc\nrYVNMbBW42VYIXsfxh8BlMZb45PVeyIWzOCPl2zPg6kAW9HOi42SD2a8YmfM\n3tqCQyE6k9DlVeThWuG5WZKtuI3HqoeBwhJhrE1IJ1H0Sic4P8l8nBDEQN8o\nu9umuuhoO7YwaEWylVxObmySiodWuf7+8yxb9v6rhVLLw++GZO/rjszzI/NP\nCkXbegMJE3f8CqzkfCVILxpHpQEWnVvD/M4jAMIuJxamysdPeRBqG0ub3LLw\nI/5Q5vTKfnNx5yRYNXbkWYS7MD2xNF3Wp3yjPRj1K0Re/griGyOLPpxnpEXt\nWpMOSwtQNfiLKjR/5EdSP/a9FcfKpFCGiaxym+6ecuUFueK35NqfLG+WIPve\nFzLHNaZ6PBXvkWugiK+aCWPDSPm1Xcz5F+s8lwjnBPF/urn1/j2FWEALaqja\nwSTafavxLt4kqgjAk5fkCWsGzVrmH0GccioUfgrxbJ9tSsqenbsXqYjzy6CQ\nmtiNdLWS0tKsE9paES/tjwfYvGTR9NTvaF7ojie7FQysyLVs21s5ldU7aXhI\n/U4Hu7X7QFyTMnApmk0OaYjxvbqR6bRUFCGBIE7fnlCqnfFTU2kUKdPkTBbc\nDuLo33UwsyZmNrIBjwnd69Z8N1huc31ESbPA9z/t9fDJGLQhcwCZg66oX0M8\nMlnj\r\n=cRDR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEhkdn4LuNrkS7MkKnmVEHz5RplzSThZ9W6UA5Jv+u5AiEA/KyTt50p4BHwd0pXaw8S9nabpZ2gYBO/W1+mzKpaTcw="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.131.5d5637c.0_1586196211676_0.9265053890391648"},"_hasShrinkwrap":false},"1.0.12-canary.129.55b57b8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.129.55b57b8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"55b57b8bb69007f90d2a34a7cfc1cebdcfc57702","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.129.55b57b8.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-gQmhcgmF+/Ipih5UL9R/pb47WI8QI3KSX2kTc1G28u5IXic61SKO3a+mm643Ll+dC3pukI+8Wv+uuHy16cWT/g==","shasum":"65324c0d9f033f79d187158b203983925ed506f9","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.129.55b57b8.0.tgz","fileCount":161,"unpackedSize":3108915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei29GCRA9TVsSAnZWagAAqB8QAIBUcyhNCb4iYFZ90u59\nAkvyMtGxTQx2Iswbq2rdlscWVF5XQET9ltn4HA6rl1vBNixhBfO2bYeFW8Zx\nJHUCfl6mUkgsx2n2fJzD4T+nieOmXFin9xMliJZLvUyx3ML8fqwdrn6Ys5ey\nDqRR/LVSqiUEpEQEnxqJwZCfNOWGe6uJ5z8E+4vzNnZ3DnMte+AFKh8/4dVm\naf+ZifR4Hln0wnDJZRnUyAnUcqj1o7qksoHz/qnvC2Tf8wohnWgJpzq0dkNB\nyiok4pj78j3ENJM38XkAZaOnMfe0Q57cQABmjzwaMIanGsb0+HIFkZ1IRr+D\nnfROEq2DWrRVKE0SY3p0AuCaWQzekKufU/NIfj1FtTOFYULQZrHIfJtcZP8/\ngMelDxXlzhgxz+LBLbkc559N2xc7ueRu4KTp6beTIO7qDIfE8CN/d0G6GWpZ\neUvkPgkPjnNXZJW+YwAXZaIsvsdFC13UWNYCa7gV7b52jUTAQOxoZt98Kdtl\nWo1Rb5az1XiMFehnjflvQ2y8XS2w3VYCda2e1l5dxTXZmZyCoV2hEPiuXGcE\nwF+dgWUahJnDRm+zSdDlrohGjtEg2cnwF86SeYNFaLdhRU1h5Ece4YoO4MzG\n16WVToOUd+mE5E0hgK9xgH/VyM2mfWNlTp1cZBVkQE8gkULabO6NaM6e9Bu4\n+IPo\r\n=P2T/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZK8KccsQq5o6zwI3DC6cKulpskteGzwZN+M/O9zkMSAiAhQ/qrGZ8KspBsvcjVjQtFkCrqrQlveCYaVCuj7rGzOg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.129.55b57b8.0_1586196294267_0.8478343695033141"},"_hasShrinkwrap":false},"1.0.12-canary.119.70cfc8f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.119.70cfc8f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"70cfc8f138ba7e10884dc76511228a7480bb410d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.119.70cfc8f.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-eFoTEGfrgkCovWdcsVFGwtP5t96Gh2LdCdUwEVTwADrblw4Yqa/2iKR2g43vx2iseG4J4Fl013jgYstw+Y4GNw==","shasum":"875b3c45b98a921a2597b53c23c9882e952aca10","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.119.70cfc8f.0.tgz","fileCount":163,"unpackedSize":3108776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejB2jCRA9TVsSAnZWagAAOdsP/0pfpiyTRT96C7yT+L+q\nERl9wBgiHuV3uKHaLJrhyashk2LGEA5G49wDH+Lvxe0cEU1YJ7ZVcdrMHDjM\nR9K5iqiSbQVgGtwZDzQWrly+aS4Lpi6hP7WerPXLwGGIxcfRNwYzwZZTp6oP\nH+ldw9zWAMsoLWPvla945j0FUrYfY78S6Y+xAuXO53gVKMFb9eEkIebfZfPw\n3Sh+mnl+M+WO5VUCfQ1jKjnm0L3OpJLTFdJlPrOpm0VqvnNLyfbJC/knKe9s\niJRiRGYbi4xHbbBVlpJv5JGCOGNcsD1oTUEeWAQXAn3/hcl38i6TpOA5/OvA\nPJzDsuUj5XGe/f0NdVugCoPRy4TXMdWZMdnHi0s3DgWH8IMI2CeNYMoUgHLu\n4oUR8SYQkhG1a9BIrWHSi5yNcd78fO3zAeNb7I+RtNMKdCDQucYh6v6od4kX\nLfZu58JHxD9wl9nNQvFVbgYJ9Q2JfankjlNGe6IEY0MSD8Ty6WEVEWuif0Fn\nQ0vejepc7dQZzqqcFYDNaBBMkJBh7m4YyIEZV1mmsViESx0TC605Om3/EHxU\nmmcWHozRrVjPwG/7cMNlxbRc0YkKmT/8J4y3e7wjkyNfuyf9BuH+7nZun0OX\n2K3uK4l4hux2eZu6+Yzers7tUzkMoAZhYSw376HtEFEh1mxKNhDtAOeDgOHv\noww7\r\n=wm47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBjwHxOgFWRQVXETRtiWqM97io/d81BAosPffhdVZgwgIgD5wQiHOuTginDLPWrXslDyLF7zzqAYpG3CM/ZXf50Gc="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.119.70cfc8f.0_1586240931242_0.20273025845939663"},"_hasShrinkwrap":false},"1.0.12-canary.119.72312e0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.119.72312e0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"72312e05610a1b07e14018ff80a2f730b751a06f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.119.72312e0.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","dist":{"integrity":"sha512-IqNcvPBymtm0oXzQxs11B7OtWW6eJg6dd51ka9gx4421a2TxJYVdfcFbmZg9RUpc7tOzF14NeJJRiW/kFHy9mw==","shasum":"ad3dff4066945b31c1ef2aa02c401af94494656f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.119.72312e0.0.tgz","fileCount":163,"unpackedSize":3109044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejCMTCRA9TVsSAnZWagAAJewP/2RCWh4msO1or1rSqUmD\n2Kz97/O4r+c6MZhGq+TIdctwzvO6QJEd9fxRNqY0wPE5c9Ph02JGXL5qixqK\nRfgi2R4xrz1Uzr0lmJ1sjCnmCkRhhHxL5UaYP8ROMmfDKVhZUVgkXJ9RgFEM\nT4G05H1+EkXL2Ee5uWozqwMfxpBqFxB5lt2u3GUdPguM34RlkMKmObmyGRxT\np7DHLDzVKKUQbzk7GRnsbg4jZC3k/dPz8NkdE2mgpoJE5Na1OPs2DM7pvpF7\nHU0owC+cQoGwrXW5YLJQepzP4dkXowIcZfAi5ehewosbQhOcE28KD4x6/h3z\n+jH5ZK7ef2pDWmng59oaKc0OKq9u87xLAf6go7js7NgY1P+4gJ/Z35qcxBBF\nRX7wOpo/CTaXl6bARYscnqAJe12SVk67LNklvB3BoLvp3C3+LsBiw+ups2Df\nLgsb8xFTiaswXQovBSNR7Ns2Y2qKVLdfYU126HcN+9QJo9GOWs3f9y+Z4M68\nKwvjLQV2kHaMcXDE7H6hV/PlnTsXT4nStQaZnjJC/n+7uqI1i/PGckgI5Uir\n7ZAQ1b0Jh59o+ubUYjKFFzJ1N4Uy1/9dMhUQaIuidnj2XI8bJpSWq+8ouS2D\nHdwnwz3+cA1uRiOi1FY/P7SE8/ofJ/HW+py4dcUtgb9zGYLfO5SICfn/IVQ/\nR/Tz\r\n=tp0e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1urZn2lFF6JYE7vCgNjb55IPNoT+lwtLeEkFsckWK5AiEA/GH44SnthaFjfiqo3NyRnqE799lZDrvbQuWTf/wygvo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.119.72312e0.0_1586242323181_0.03589538846664886"},"_hasShrinkwrap":false},"1.0.12-canary.119.36a1607.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.119.36a1607.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"36a160766b16a5d07dc3df53f84a4e8a36b19cb3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.119.36a1607.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-mnvehrl8C/QDBdtzTFo3k5q3PHeQCqjv0Mo6/XumZ0ohowUbvdEaWVa8d7XsnRBzL3SmgrsllFBYspX9wc1chQ==","shasum":"519f50fad4e8899f0adc5422995119b92fe793c1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.119.36a1607.0.tgz","fileCount":164,"unpackedSize":3109403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekoV8CRA9TVsSAnZWagAAz5oP/0xcsqze2t3WEoosh/C9\nGoTr3Otsu1jBiTrr3Tgkh6l2PioPYp2J3BvlbFF4tNPe09tfXsVjDTH6DXZl\nQfMiESUbOoFUoAS+ekf4yZXHob+moyv+ioPM3YNhNez1W9B2lPTqZAp8LGQi\nOj8kJpPeCE/n+lWlv+PHQkzHGt/857wrR/phNKbpe5Dhf3JCOSnMylhrQ/A0\ncbJrRdpMJZHytpZpq8eTop0ZAkBCOLIxRUr7/Xq5yYC6gxWlAp1ZQ8JoPFFc\n9VQTS1NXhgT551ny+XeNAW970cTCbwVggyoKRJZYCO/yMFCAyE862VRwOgs0\nzQJ/BWymqsbGO3dYvttfBnBGO0XQSefQm97m8DNhIoT0S6woqV0mBQ7a0B7Z\nTH0xCJtNx+H7EA9bSS8FdKYuN58cEeXkZ0xaYtXQBwSfEukkVzr/k+SSJbvE\nrF4N5imBru/2MAihSlmutNqU2tPEcodOlLGXJf7lDNKaF+/y5ZNBoYzDzPi5\npo4ngpgcN+rjiWTlsJ9sj+0v/U2CVt37IqIhNagOVFxndbk4vz/O4GCC3jXb\n4DZzccQTQl62uW6pyBQUSjrItDxBRhJhubAlVSAo/i3xuHRQWU9oV+Nz54ds\nbJJI0lHKlQBoU5W884E0y+XzcIT+H8lP+LoVYmYo5T7UAXXfXiFnelALGXMf\nI0RV\r\n=h/yp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAfTYQ0UP5Sxn/OiIWaMXUTsik3/IMKAK6jsCCPmXPBAiEAiNVZdiReLV++/lxx32z60N9gEgh2F0xPx55LXBp4cU8="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.119.36a1607.0_1586660731239_0.7915415931134562"},"_hasShrinkwrap":false},"1.0.12-canary.133.5fc779e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.133.5fc779e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5fc779e2ffed9cc91e27849b7a5e8dbf1b322910","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.133.5fc779e.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-+wl5eaj4xwr8LxBYOqqiWzTwyKhYAzK+inVSouHHAxXGNibsDo7agm8OO3qQYeILk3ufUF2aclH/MKIlC+AjOQ==","shasum":"496c1030a5306a91bff3636269e5f6447947ffe3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.133.5fc779e.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelInlCRA9TVsSAnZWagAAqhQP/RehZ11gwT1jHqY9qF3Q\n4iSLVbRhgoJYV4q1nN8bAaTQmuIbNLp0StVU+RBGLbfJpLwPCth4eGBD3NZn\nbsBptXnNuCQq6YSk4Y2pA61ZQzxWDThEy/S6boJF5hJuNBEkm9iA7LqxA4qP\nbzt7aqQAeMqlroiDrB/AE3VLNWcu5fLMZUSveoXyLRv1g9YKnRUTn/ZURfzs\nk83uArPF6nojk1DjCpWln6tZVq5ugGCWaAbQ2X1iQlnQTrEvpmyHAcc9swbJ\nFD4PY2/UsxqA6x70icz2hGwrOtVeyWspEIdVy8YcwIx3x1hw+TRZjOPl5LYz\nsoPhacNJ2XegYkNOhzDiUYGiO3qZ10tnW74I4HU8U8Bnve38zF+JF/pLtDlE\nxYmtkkibDuHLhWzekcNnSOVajNCdl0/9cITqwWyjDTk7ylyzODJI5ajYUn+e\n0i5Y+tMnAqlJOCHXdy3rdf1Ue9T5NLOZPGOwuikhkkL5pHdwD9t7PWFiLmE2\npp7RyK07rN95+pJaxYgkU0axnT3eR6bOtVHvtljkFQXYVQYJ8JmFI8BnEI+L\nMm1ZIdcCw9xk6m6EvzBCvHxdgC+bo1hLjGDRVx5ShX+EJB3FwYY1WsQmNV/m\n365Pj5lcPy620RLvNmb5lFJTADKEmnh1IYHVcASvPpWpLOEyO4uQeJ8wJgje\nsAoZ\r\n=LlUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZxxnb4sRKVQw8XdBrysmikmATb+FVHUISZxpKEBvjwwIhAKzpYm9B+kd8ThSHywVfXBoSkiKpF+gbuXD+L6VttF/r"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.133.5fc779e.0_1586792933070_0.934691848694392"},"_hasShrinkwrap":false},"1.0.12-canary.134.08514e6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.134.08514e6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"08514e6c98a0d858bcada5bc6863b7b553c3ba4f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.134.08514e6.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-WuuJnwJM/MzNgynExLRPfEquTy87ycyJtzoio0HiICBWNgrSfTkotVL0mf5Gs3b0L+fq6JV9L/xfOb+M7EgGAg==","shasum":"68cf8e8e42ccf69770e1376c79e7c6a395b14532","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.134.08514e6.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelIorCRA9TVsSAnZWagAAxDcP/j7B3DC0doOUiFIl+tAZ\n88UZO7/J08zBzwCBmqA3lsKfhkvRD0T3fMOjtyMWL/RTyorVGnLms/Cx8rxA\naHDYj2C8YCQ1U96PRNUdVL+Cd+I9jcpYr1pzxCu9m5jXFNlXTF3+JazLunEN\ndAhNMKO9tkTn3Y80UApiClcHB8V2pEYBMe+7lewaQm9DttJMH0/Lauu8EvVR\nMOacYoJk0WRNytnWY3ecSGV9r0aMveVG7YcPeoNVfhIRRibAa/8N5JbrOAVp\nDg9vKDS8g77vC7E7kOwfTuAELtTZ6oLKRstskpHLfXAV48RP399TYPIEgdqh\njHsWXmI+h92cqcoLyeqbN41tUvZArvdSn6zEycYuDG6OaDEIm1NuJ9FnvYhy\nCP1sBVsCVI1C7y/fDMEsXN+5hPIx3WHUbX3hAmQiZL/3YuyPqAXKUzfUMTWE\nR6ow8Tu94yCrKwKTFa4jnylUe1OLP1FsFgQd51p0ERKJytRiMCAXVEYzvd9o\nDXBp+c3gXVEeZbyH6r/4GyNpVR3jLi0gO0ZoGk8xk5FBgKyc6tNJtQCIXbao\nDMuRxFSHRZ3TZSv6z7iAuryNWkms5Dt4vlSeir8BOdoCpk5p9tVfmjS0UZ+I\niSgQLiu/Pm3OKrdZC7A+CWHQ2e3nHbxbyyVwT9TDbiMc8MJKTZ+OrUbrzKSP\ngJVG\r\n=gtRR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpkmjXgV0nVskn5ZUqfCVyZp/wXjaqon8W+fOSfgMzLAiEArky4+iyS7icDYdf1C1u/DNzuFCxUwP9sSph7D39iH58="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.134.08514e6.0_1586793003182_0.6186593868031842"},"_hasShrinkwrap":false},"1.0.12-canary.135.512dfef.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.135.512dfef.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.5","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"512dfef62b6ba2a6c42176b4f2c35f6c10bd32f2","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.135.512dfef.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-lsxMhV2bJpNFzUjs3BemNdSimi0gHztB7usltHmhuwFyoefjuaz/3tj/iQ0lHdJlr3chk/EmIjK39PQIV4AuMQ==","shasum":"edb6977a90fc621b6ff6408a1691fb53040cdb48","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.135.512dfef.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelIpJCRA9TVsSAnZWagAA2PsP/iOxzggkEOTohtHnJOX5\nbExOJ6V3rN240DajYDrY1AqXtc97d8u+7tJ0/k9Vv9yjCHTOlu1BPakjWjtN\nGp0uFe19YEDcW1gO/LCfbfnoC1f4Dml0LKKpYZ8AaLYJBvPRbMvfRUIcEaeC\n/bEgUpcmRqiSrLOoGAgDl89eq7x6r9Gt+S01dljXDYzjIJ80AO4YiIgVvrak\nAfNystrciJhl+4lCQu0rXoLf4SQfAMUjklmJZqmiI48jfsLWXS2o0+PXUaZw\nyN91alsSJocfgZc0zZ3uuedoXGZX5oBrYQtulBE1rbWsGNztu5yrFXpQnEF7\nebLaXEXqljeq1E3nagkIwoSoLPxj6Yl2FtvaPjvkp7y6RlGHitbTJj9H3hFQ\nUg85re8sxF7IEMJK300kTwbYsKWFI4d6D3m294PwqnEd7lC2uswXJQgiK6Ks\nVc3E1AhM7VETfGyN85hU/9BLhPbQL1J4FiSDeMfxF72vI2DCeBugaDDjvriM\nuo7/Z7FNReyNiJ/uZINRgqC52nfKIWGsQs4L6N/OpW/1ODCcwk0X6jg4RjUh\nH3Gn9RY7FUkcgDtYlw7A1tjB3h+cOTDF/6I/JNbkM4MssMLoz6Q/5wqFyVl6\nYwdw6wzT/1TOat4Z8TIGcDkqPybrjvY0EJM1zaH8AdtfJJKPvgEufH7T+9NS\naLpM\r\n=u50X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEYpQltv1WO2xmV9Xh7M9KaHUYa/kb7q3RH9V2TjQbPAiEAq4HDY0evAoqomlwSvHneKXTAHHmAnYOSGirrO9nWOOw="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.135.512dfef.0_1586793032621_0.9006781073152277"},"_hasShrinkwrap":false},"1.0.12-canary.136.af2eadd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.136.af2eadd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"af2eaddb830fc4370659c2a6bc380e4dc2ac5e5c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.136.af2eadd.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-yzWA+vZ011GD5cmQE/Cc4ho8ij5dDXCVPr8MI+9BW4lqeaz9vptonBDygCv5AQ7sHGaMSqr52ruQw2S85k3AFA==","shasum":"65d01fda3e75fccbeaba902e1340ffd95665d3cf","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.136.af2eadd.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelIqdCRA9TVsSAnZWagAA/owP/R1NfbOU6iadpuy4TWrv\nIzBC0spPi5U8JUL/eMb0HfWl9BA7OS+JVb7d2glp5sjrvyIf6s0hF6ONBhCP\nitb+ODPszE/uw9mzlYY3URkqQDNBQyMOvA/1rrkS7TtpIC65mTTgYVZtAKw8\nosIAfmoAlJ/6aLnkCBjiyp51NeY7n1HXsGNRpmUqjWumCGNlpsYt3S0Hnc2c\nPt3ksLCAfaDrfrgvimWKWHuR0NMqIR2R/S1VsJmlvVT+mciKCvcyiGuu3HUt\nGoIdtCzGgtm9lQZRactkaVQl3bw9GMMD+TxWIsAD6av49GP6nTMH+QjEl+t0\nXznzlPgd5g4tayl4K6jIa4MVOJXJHqwwtBuEQYNQ6/JyZyAQUvbhC5qt3TZL\nad2UYwci7hfovW07eEgeJIBD2cfaQN/0JpKK6cOcVRji9Sv9USFBWBZaa0Th\nWc4IW8MGf60wmDz5S8JIKfqFV14tVq7xUcl5s+dYVGLONPWB+QY1B/3zbHKU\n3oh741SIgO+9/TN1jHtTUPVLyKqJybO0pDwOA9N69ZkfAT3VQVlfWs9+Jk0Y\nXivCp846D3DvmYHjXTIUiXYGelXxdvqdFtHJthYgFzZI5VHjenLp2tH25l41\n1FOQXUDHqKKH4a/xM6egQjA3R02HYZyK+No038NwjT5k3w2yuMbG6WvXaabf\nbOea\r\n=zOgP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC3QrC2bgOgZtUWyTEnIHhX+ndjebHN+/rWT9TAcmSDgIhAM4+kiQbXmerbbQFeJD+XvAx7Nnsx8k3gU1wGOlMzmTF"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.136.af2eadd.0_1586793116471_0.048108369087059843"},"_hasShrinkwrap":false},"1.0.12-canary.137.dec17d5.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.137.dec17d5.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.12.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"dec17d5a1811c2dc1026de0d63a56fd665ab0c69","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.137.dec17d5.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-aSGjEp1dlK7hfA2aPnXVy1rgKVe+P0JNm/DQIOxQLmd81q3bZB7kMzIMLkssUwg0WMjaGLfGwVuexYP5QqgMmA==","shasum":"e029ccdf04c5fdc2f1c6b352bf04dce0dcc64414","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.137.dec17d5.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelIriCRA9TVsSAnZWagAAVLAP/i4KlHe65fK0TYqnvXmD\nmlH+dFE4EN+j4Brwkoj2Pnfa8WQ66LYmT8yQpkqzZpdOuXdYd14ANe9m14Jh\n2Mf7CuO7X/8vXPNWtTK7V/o7gogpjuC6UNuUiBZ4msOba6XTy9jkFwV6qszT\n5chfrymrsWTLuzGP6oxfiOk2WpBZCIH9APSe5hmhBfLZsJg99g9djboOP6Ef\ntLd6HeL4LFS8qaC5Jji0STRFqSH2w/gITkM35sTRjd3EsGGGgOppdmZZ+H3v\nxe2/eoKcgQD8M8sdN+Hd2ugQtQAtU6ykIjrOhdA3HJL9hc8C3TbzYC//MBAc\nPYQYP6jN4za7u6qZy6nfR9W4uRJz95isr7dk7XDPYY3reMb/LN/4ckDv9BBM\n8sBLqKncWGjGGYUI1yDnwLzm0GKEIo2ALcgJiOyoanI+dMMAO69BkVdoVK+u\n38D4Mjn9fJYKdm1zCyjOGcofOLeDS2BJBzsm+2H5x3h6nw17Cm5kM/TWVrmJ\nkXRdvDBWorHnkoUGxHDoIExNiy8T8lE2lCRj5SL9VJAQwhxRe2Djaoy74RLa\nxbLTrreZjdKBJuJnaG6wfvy4jN48DYE776HdXpliyRPk/y7DXnRIOYwE/IJJ\nFrBkwoqVi3jYSxNWE/T2/WXdHvleUBdy9wEqZgldg+CXjJZwJoAPj7sc7pG6\n/fie\r\n=6WqO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC8gCt4b83Yhek7jcjRtfBJHuvMsRwXtXJdxrFBgzhRQIgEyWOpp9lyGjNQg3+7WTjQ4YCGAagq6iqBDE/mXG6gxU="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.137.dec17d5.0_1586793183077_0.9011734542712413"},"_hasShrinkwrap":false},"1.0.12-canary.138.2ee9952.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.138.2ee9952.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.1.0","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"2ee995258373491fe932eaf46989f05ef970786c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.138.2ee9952.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-VNYK7dqJQuwq1bvMazsUvIE9ShZtw5zR+TeUCuh5zOBIC6Lbl1jcRVGCcfUNihnewrlhqbXaV2IQMJI4A9t/VQ==","shasum":"ce57c2884810226aecbed5c7d0bd649b3d3b0e50","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.138.2ee9952.0.tgz","fileCount":162,"unpackedSize":3109584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelItDCRA9TVsSAnZWagAAAUEP/0OQWC8kT0ZWY7xnZZ7e\nf+wVgS2zPvvIRXUdqr96MEmcw4HLqXvX5Z/LxLCmooW/wt/fx5flcuJIWROJ\nrjzY8lrZVdud5aG45pwFDf7i6CuegTQMg5PNN9YTdf0dUwVe3wKrI+RpUvmt\n02BaG7g6ew0/VoOc86nRTqj1ae1RYD1eNF6UKEEeppGW56ZVSs28040pylKI\nfEnavLThuJD3hmyvgNXtXhQac7hYTffJ6qI12St1tQ9AtbMqb8/pBXJPLMhC\nTeccytsLmXRO3IMwSd7XQNivShq6emwwFHWyjGQg/qMrI0wISPbOBbiJxrKo\nNhSlkBrFACSjxRxxqZiNtaZqTKAwAmqkqyeQ2r0CRu57fFUMojQBqsz/yKEi\nxHJssNbYxbYrGAU4mWxq6kVh2D/RkPqID19Wa+9RDFEvuAmHaDkfk+JsVyQR\n33STRVPxwpQ+MsohCoUnkI/zUQCIIwzpYTRCCnoUQ07dNI9R74GArl281VXj\nVGdiKQ7v98jWYiaoZ57akQ5y+iRhmPT6sVkhnR5+lJ7R4CtA1s2jyT4LZ+YD\nG8w76jZwONFM+3d4DZP6O6J5hM2BOtnRhN78g5Xi/HVGfvyn05xvSAgHevOc\nkjSxbgNlzpKjlDHkFeU/FM+IeJho2opPzYwYmC8a6sPzemKP/KqpBichwHCv\nUvfY\r\n=vUn0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+KwBUgFVtSxNgTwznuGv6Gh29XmK5aatZzi23Qtp9nAiEAy79DUYm+wxdJ16M8Ry+BXws14/TIkgfxbXp2VhrNnzo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.138.2ee9952.0_1586793282882_0.3277997083184305"},"_hasShrinkwrap":false},"1.0.12-canary.139.0cdd04e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.139.0cdd04e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"0cdd04e40435f6013ab96a04f74253efc9d40a71","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.139.0cdd04e.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-64TrVDZbY/S9gsSJWYMjNvLD7R1IF/ime9X7hMikMJI8W4y3UOan65NDDmXHXJ4Axzuq/BzPFZZ3gxdbiu1DPg==","shasum":"2cd7969cac8978232596ac8ad78a880e408e89d3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.139.0cdd04e.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelIxICRA9TVsSAnZWagAAnRIP/AioN/P98ZAdGiP/I5dl\nzhLUEwBs0qIVoYchSX0318RXY82wPE0R3MyWKNmJIGCMLZK5aaeV/T+bDgeJ\n1IeR0w3b/jY9qTnLYETXRipH+kcSOjnzFpbgefgyqzf0CiOwOEqgmarr7cM9\nDbAwUVVEEZifrh/zarsnEv2DjkeT9DJJ955fvhdSiDTSGttdj5wjS6HpoAeA\n8KjTC8WxmxE9V10sUKDK2PBUnyS3mvtSZAKxT53vzKetSzaAOojNU6FIAjPy\nUasAqbpUqNA0MfeRu4yNA4Fqh6EdZvupUQ0Iiwg+O789ryEINvQvLKjArRYG\nNm2F/MqIOxSLh4Z/tAhlq/sbBJbDpTywhSsCOe63D4BA6dk5UdsLmpCoz3J1\niKzP4yd5wLqYKDtDhze4diNH9Nf+x64CQr4j5epmzGW7wOQiCPiI2QcLTlLd\nd47NKIWu51yvU2i5oCMMtrx0CZ0DnRVN3TVcLXhhG+GUPlQVL9vgs1vBOQD5\nTbvzoB/E7tfWloa+bIXVip60YEGIuLI8p9Fw2vmQLGerrWI4nUcQweje4NVf\nG7KO9LaRI1lijt1ByoL4yXvIAordhisDX6wuyBMz6qUpdbVR50eNgm0HwdD4\naD2PfAfum75e92BueihL/REWrRVveXNQZyoj0aowreAXRmosZAvjvsmJh9PT\n9sIJ\r\n=1FRq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCb6Tg18WDzgMEkUnLZ7USp9T4z8ZFDdaP4MlionunydgIgNfuwxKP7vCblv5COEK5xdjU0SC8YkTycWerxDUubk1E="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.139.0cdd04e.0_1586793543470_0.7094903951628833"},"_hasShrinkwrap":false},"1.0.12-canary.140.5208f34.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.140.5208f34.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"2.0.6","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5208f34155ee1b58153905a789260626f75e5c83","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.140.5208f34.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-nU5yB2aL/puNplDNHWsMOJDosYe43xefHbztKo39Bu/iMq0Pd9WPoQAJ3ke31NU5nZO3PaHzXYVEOtTA8geVBw==","shasum":"ee04a4c937703609eaffe7b3304ad7298fd63af4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.140.5208f34.0.tgz","fileCount":162,"unpackedSize":3110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelIz/CRA9TVsSAnZWagAAdyAQAIrqZDkSg3g2sPKq3zeJ\n3TEx9IH0Bda3EA06ijqF3bvnErj7a8sf7Zr/3REn7EDizqp5xv9DHfOE3GYL\nIp71BR/LFCFXWw0kPttlogYxEvGnLodfaJiRrtIJJH5Wftw8AaSy16mqC9k2\nI40iSdAsl4wVjglkWzw1qUoLrkoRar3w4jc569L6FdJ7Bd2qTYLwjqJDzwUT\nKF0MbRs3grImBwwBoA3hZ6+rUTzxUyereuhhB4PCmoFkpfcy/2PS4HHSGjZx\nzVycfHziPtzdW4NPHd7qqiiWrsx4anowhU8Fg+xnEi7wC0sXfK6rt77lT+g+\n4u4La2cqar9DTJ0uQy85p1hD/E6qrzz7Qfsgb8Npg3/G11GZdMoVSs3mZ2uN\n9UbnaNLhSm6VlylkOIY/KR0mmj+NOP19gpl5nbE8iA8Fuz/8uLDZyWyCy+4E\nInb5DXo3tDMiqqLm8nC9QUp2ED2YohmbMzy+VwOYqW4uiWJa0z9Dw5Go7O4k\nfWxUImSGwRZciXLrckPS7dm+mUMPVB6FBtHZ+ghS/GaacfCgX+tG0fiEIBF4\nwQ8a2f7y3n0bXcgs9t2QiPWyPY84RAQZYFzn8088NypPwPW5Xgi8CMC1JKwn\nmJLeP9GMasVKVeGz7WktPpGSlSp4TvuwosQkwH1KfgzbJbOvVGEvuxy+Am0p\nYjvi\r\n=scIn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKWNyu64DWudk7wWeAT8428iYqe90PVbIxosyd1ciNPAiA9AvTuYEa0r2hNMX336AtGsM4AP2iCbWZoSbqwe1BfCw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.140.5208f34.0_1586793726530_0.9273857280644091"},"_hasShrinkwrap":false},"1.0.12-canary.141.6d1d61f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.141.6d1d61f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6d1d61f61a1765f3e35235789b1209181a2c8124","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.141.6d1d61f.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-PgdNSSjaL/gVUwC3mBAV28Q8D0vxKTjo7VG+Dt/gV8yKgpdNI5yhZyOKOGBy4SEZmVEyuM4bOGwU/zxOksW8Dw==","shasum":"9282e3359c5487d7a86bededb0690d2536d0eb32","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.141.6d1d61f.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelI0bCRA9TVsSAnZWagAAHwMP/i7pmV9z4jlZI3xGGxOX\nVh4VS8GVhzp1pZlamcmsm1mbm5o2VgBpri6QePeKrM3V3C6jlbVWM9wgpFbi\nl3nt+K/e0bmJRFOLXcqcvdHMVKl6ra+pU6Kcc9C7ITROGbE4FMxzZCIeV0nF\nln3IgMo9xvh+swvTBW4nagFD0BNWGnHZjie8ZKQb4l/nqgIg/HsZAKWxr4zY\nTu5gLWGmbxjpWR8DJFLHRLTv8TnunYorDzMLfpEanxdXN5NfWt0ufJCYJdrr\nYPlM/BIIJbLx5jFy+i+QH3xs4zthQUyIY2QMkAXLOg8Jg4N3Zetj8TrGlc92\nKq7SfYRGBeFyzx20sHAyijDX0PMzbpmJZMrEd7Bo0BcKaJgyLU/o23Lv6Qzm\ntOzSHLF5pijcpCRqPdw7HHKEPUA+x+lMmtpmvVtwKiQDV9fGz4h+3+ZMoMRr\nHKksZndgk80P8pJ4VEyebEuVivYJMsEC3+0DkXJ3sMso1usip0BIhmjK5YIj\ntahjNOY22wY2b1/AJ5JB8rNrJaZDwEaLUcZWpc+VT91cwnHrf6vJtl0S6s8A\nX+Lv9lkqlNxrkAqf9myIAfAEPKJho2UbS+G99CTapnUB2kLqEzbOsVu/eiqd\nmTYUopbAMXFz05QQGj5yWXdZfwEZJfmpzYvybLXpVL3c4dImSTyMHawevg+G\nrHHB\r\n=JKra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClouKrsrKxuDGoelkhr0/EuJESnZmr7sKbQ5KkOKOJYQIhAJcKMSpQA7F2n9xC4cuTwI/8pQ/il+tpRlNLtWFwpBpz"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.141.6d1d61f.0_1586793754912_0.8909795717310858"},"_hasShrinkwrap":false},"1.0.12-canarycanary.142.48bff27.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canarycanary.142.48bff27.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"48bff2767e03b92ef52914fcc0ebcfdba5851fe8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canarycanary.142.48bff27.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-KPumd9Ri2+mpk9BTOGpWogjaawQCitPQI5mx/fKJzWP256+8pe/QQ9HPtzhxHZL5jGRIXNThTJT7on0fB9yPHA==","shasum":"e2b9fad82bd28d41d76e31fb377be6821320e20e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canarycanary.142.48bff27.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenej7CRA9TVsSAnZWagAAJeAP/3BV1PYWFmc0DuYah6c5\nEbd3opkGtK0yYt1tjnncWhMWhdzqwVUkkzcPK0BOvcED3Nj0FvlI8PsLMBqe\ndheZUgiXjd4ZKO/OkCwsssXc5TRr1Xp+QQIbBqgS9NSS2pT0hMhlXTbw0QPB\nrodqroJABuseH6ZgudE/QGwkMFjwDCQQ5q7Se/qUhwz4+1E0nLqDbGgnYeeL\n7dqQjUX8QBsTgB3mcWIPLQiGC/1qllaSJ3t6Zjg/hvgnXsE2V97zrYCXanGp\nll953xTWMlzPCBW7JQPpd1tp49Chouu+VLo6FCvX49lL+qFNP4HHRD3DiQSR\ntVp8dt6eEXd2h+0cMDbAK/YzA4HlIaSZeXMXye8LDWNz32MAk2FhCVK0I+r8\n0y8BquERzD/YdMzVkptMqC3GWHtqFz3kWE05D56owpaM8YR2Q/lym0qS+/CZ\nHD3Tw0cNJRdIvU3vvqDzlwKOcTISPdf6KmDA53mwjcERVaNXy6FolRl7Vw9I\nLEfxxizDZ7p1iNn6Gs2Yhdi0UlcpqherSJqy+56L0A5JrZTGkYMZj23HriEj\nEFLcQ3IqvzI6/au5ZFylm/MuEMiOTYbqbSXq2kONC18ghCAaENw1OgK/sSuT\nugu/bStu1mX0+ptyKte+QHR5cVnxe7qYOOyI7HVaOF3tX2+xxmxPgQfobZje\nl4ZD\r\n=VAKJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMO8CAQW7uKh636E0dmeC4RDZriSTKwXZtlnRsVFCZ8AiBWLFTcZtaQDpS3zkIowTrPoxkBILnyBCpw2+RCFjk2Og=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canarycanary.142.48bff27.0_1587407099064_0.017536948274640363"},"_hasShrinkwrap":false},"1.0.12-canary.143.dc803ef.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.143.dc803ef.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"dc803ef0b9dd2691f657bc548ab7200b3eccf8f4","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.143.dc803ef.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-zM12CpXt/vr2QbBMvBwmQEsrqhDABRrOoYSOk1S9FDg67XHn2nHsbbntiQIZU+XLzmcAThVwSdG6OMuCpgPv6A==","shasum":"6f4b12a9b90de376d0f026a7e49210704c142ca4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.143.dc803ef.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenekFCRA9TVsSAnZWagAAAyIQAJKtcfik9quz1s1MxoiV\ndIk6qAMhpFgnYRU6SEMbMawNbeO8vbnNAXyqBc1MehnT0puInca8f2XHQYyN\nshT2sntysVPqBU54nWE1edTbsfhMiOaC0tyzo4UQtqe7zYKANnaNl1oUl/oA\nyRRLZPtzuwoJ2T9HQw95SA8F0++hKx2RzZ8n/ntT7dyYSx6o1ONYRxd2b0ZK\n79YqwFOHUTE0pAKzbhe4k6IxolmxF/8xTG6iVHNDd8r+bdcbi1nLsna6wqM4\nB5YfTlcu9iKg1Rb+9NZPUoOt8uuB456G/f6jU0dbsbBK+Gc9X68NwCOazQJu\nTGeahncGj5Mv+9Igj7hPgDbUWv66zvaHkd+8YFTwLY8oyqbT4eJzVeh4UAuk\nsGmaoQ+dyz/67WxPPKqG5fM83ecAASP8MTmvGIdwutwu8LqcfU5MQ3d+l5M6\n3MJA0jlWYX/dRjDm7fbPobSAIUi2ScdGShnZ5cKRNs713EMaHMEU82OhcrtU\nSfsE3oOSw7uLvGuWMU4U6cXRrP9d6ZABIWcYhNQCOn7q7S3zpN8cEI22e+R9\nAXTGFm31Bid24s+CZv1Y2IINcPvHbCCbTIDIpPhycHh+Q9x2O+ObmGfwb0px\nMErsFhSUzj2V8j/SmMMi6c0BEvPjpAsp1dUDEOF9j7oOziEkDkiW7aRE/uHy\nwkV3\r\n=acgm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCDsbMBloH9Y46rnt3/zRupJ3qJ8B5PqAiREyDv2uKGwIhALADEsqTx0bm8So2aMoa8Vf8LzkYevIuFFJBg7sqJkYr"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.143.dc803ef.0_1587407109256_0.3059277786704224"},"_hasShrinkwrap":false},"1.0.12-canary.144.eb7de23.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.144.eb7de23.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.2.0","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"eb7de23d1a3eaf54e750152ed44ce9c896469d73","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.144.eb7de23.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-tiOA66UX7Uppg8DApkAMiBaWsQw/Lmk5n3qgkQHmyECCLV8LWYqGHU+DAqIOT4mTqOQlnKN2WUxJMBmaaHmBFw==","shasum":"9828130c2a1e7979b02812939f968e172eeddcc7","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.144.eb7de23.0.tgz","fileCount":162,"unpackedSize":3110262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenenQCRA9TVsSAnZWagAAgKQP/AhQiqzziXFO839wY/wM\npdc8hmFWaCJGpyDzZANhF4cXhOQmWEO938PJYUFnhDX2QMSBPfACGBbzf8oG\nEMoJU2RAwPL7HWUd6SA3/U3YGZmIhQQzu1wj+KPHF9aeM2MHUclQmpoKvXFA\n5va/PWDw5FN8L2FRvrDcs+u/bOYiuJbUd0ALlV/JAqBM1zWwm50xtMl30TGJ\nC2et7Ax0NN2SCPP5DRjoz73EqMk0slDP5xNlbzrT53sl8u0zbVcKusr0LXqu\nEQBin0mLnP3b5AcaLYPUoAanI+Gc3Dlwq1EWxy9teOYhKp/kPCPtB2bBQXTQ\nZ6Kal1YIt3R8kHk5DUqOYV+7Jm6hYtMhODjQrc5K4/c/nl+CAmpkwyaazF0g\nweDOe/fmJ/Z4vm994xoEWOZ+aYLt3ZkZvZ0TnzvMlaL/IaxDibFdr2S5RQVB\nml0Tf6wd5zS7E0ihS7OZAKB271Z6XWhMQoaZopPWlqEjNN5nU9qhDwKsj5q+\nvSOdLV0TO7NMIzZj6Fv2ncWUJAKmxJE/60TvGsr7Uz2HwIi5H3jcYAcKJwz0\nQ2cTMYQpbtyDeZM48ztk7EC7ZwpYyMttaUFakhNzce2OmTsdhOnY7T1UOaYU\nwNo4HqTmz/zSG/U1nhzLWEaw7qX03/3SzFruqjcp9JdsukCnA+Z1tK++78eU\nzPlp\r\n=e7Tr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQDGSiKEX3U6iVRhIkgEUMRQcYEbiQsAVHJyCLi2ozRQIhAKzvH2vjqYwTNkNvz2gPfI/2trkKigiYkB9dgbvWdb3n"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.144.eb7de23.0_1587407311607_0.20685236587803613"},"_hasShrinkwrap":false},"1.0.12-canarycanary.145.391d401.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canarycanary.145.391d401.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"391d401b98826b3dcdab319a43a6dc3970adc39a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canarycanary.145.391d401.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-EjmTIJPfowJF3gwkFfHhs9p4m3BEn83v85mlz/lmT8SCvCYk702AbwqIK/xadrZjB6d93xIfza9Gsf8aWDAtEg==","shasum":"b3c2084cc5d08b09a7919f01723154a419450f32","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canarycanary.145.391d401.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenen7CRA9TVsSAnZWagAANvAP/1gEMogwSmt2NR8jkeW7\n4M4L/QdUisaXpHMF/cGn09Z0drT0/L+r7fbaNyG615+cyi/ZrHWIyIU1b6un\nWmSGOM1T+7K2b5vniuCXnRhU/nmXNngltkpj7rYPm2oaogCHDIqrPXDjBFLb\nyVuo1YhwgBv0k4WSmnnRPrb+Gd0nrjEbeGEZvN1urCZmBIulLfGCsXZHlOCV\nLDRuXlAVmPG9A9EstzqEG5/f6A6wGo/jw1HWTTapCkuRpffmwPXM3CkbKx1l\ncQGSEmPS8q8PHbwCKTH1AIbpq9PGZoGXvGE0Q1cKHytjJzEJsSBdiB161Js6\nVBMdRJblTRFPJhd0bt0MgSCd8PQ0NQsOCc+k/PmbfHRYIGOWZAoqkVitN4KA\n214a21vVTPdxEA/i+vQTN+5ibkgrcBFUzesptWXoEPp5d7wcvbYV5EcYdbdK\nhT3E2azXz9A5bNfOXUPIgPQX7Gcoc7t8kbH+4hCtooyjCP5TaVe4x168yOH0\nXLjMCBWAcgRk6Y2uZ8k7cnFC4VY/WeVfT+4/lWK0jxzXese42Wc7QYs8UYve\nd28rq7Wfnt961R5I1qJGbtno6zWqLvLb9VZoin6YtRxx04Po2AWmO2875+tX\ns7Q9q209108WsxeZhmYkRUr5zjEhp1OgIJlLUxHgpsiMsjpukkslQsGo4JsN\nl1pB\r\n=h9jp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpmYLUFpnd0976iucg5jGfeWwQHxdhOvULCf3AqesMEwIhAMCBHKpxwhdDXSi4aJ2ZXnn3U3fdC5W0kilTSWPbtkmw"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canarycanary.145.391d401.0_1587407355038_0.9212181207016952"},"_hasShrinkwrap":false},"1.0.12-canary.146.c238e54.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12-canary.146.c238e54.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"c238e54594f03ed085c938bf9d804e0809557159","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12-canary.146.c238e54.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-xUctgaxtWpnXNwe7r/zTiqPb0awJnlzn+uIpFmw88ctLcpLd7biI/954xir+fr5eeJeB1kVWpNReMQrD4h8ApQ==","shasum":"1501bc589402bdaf59f0bbfd77505aaa5ed4206e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12-canary.146.c238e54.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenesmCRA9TVsSAnZWagAA8SYP+QHAVTjvDwosyBVjj4IE\nieugBkJxYTOYwZXHPZ8l3biMixMFam4kyihO53vW0EBeCgwFEwtTdZeL9fMc\nIa1W2aW5OcN8valmI0l2wdHLkjTV0EVxysHepWz8iarqLEAqt19oIDUTsNr9\ng7rpQfokJPsw32MWTyCRbSVqrjqPzvX3qdwFOmhrAThvKdQS2CHEqPktpvx6\nC9YyyV9tYScZ9i4lpvCspPBgDxq2Qdz2528OyF0woeFdGn4HK51m/iUAS3bj\n89uwCNYjtXgDbdOy8bJXJ/LPZwaRxWc7Shu3xnCWrtWwEdboCiyR6xcoILvw\n/Dg6efpCbS3TDXtUMg8jfa783v6SVpnnBiMfWd2zPMwoXfI9wxYnTKr5wVRr\n0ElGJbhcLyJpVzebpCLgrUcWijGLan2bxdoChaEIfN2kOrDZKcwyldHv565H\nDJgBgmJZyN5DxX8OcTJqx1QpzDOxBlrEnxHQIwzxQ1PJdYQ4mKdaW65LetfR\nInajfvV7Vritb91ELAhFZd16LSVpHrRBDs8y8hKCqH/ohhJiPlTXpCpAKb0N\nMLzB4WhJCTRG2pe5nc693V2NM+KJ75jR3SbWqWw3xXJrIYMZAx70N69nmg1i\njOvz4nthNYFfTsdTJA+Ca/h+cKyQ5cWw6gwoBhO61AvQj9n6Mb9UacY/d3Vu\niGLN\r\n=SeFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD84214KhDIJnISTEj5FqIeJjwOuzyq9dZ4OQnLu6LWbwIhAOql2Y3xYBWu4b+zE3XANpRk0RhJk3PFvgCfhDxfcUBC"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12-canary.146.c238e54.0_1587407653974_0.48868638932024866"},"_hasShrinkwrap":false},"1.0.12":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.12","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7c357902727e411b3fadd8934fbefcd356715d2c","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.12","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-CW/ij7uDndhGOpnHRjbhlsy2oKUNlwfCgZuD48OW+DW1NxDdSiGKBE2GYJIea7U1XNjzw4AFPdDGb5k722IsuA==","shasum":"9d74a55952927d7ee7dcabaad2d12dc88df93b92","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.12.tgz","fileCount":162,"unpackedSize":3109079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoeq3CRA9TVsSAnZWagAAduYP/iCP5duuB5Sb2+Fj5yX6\nXmWE4II6lQyJmSBxVxwTg2o2E6KrtuBCY2mT0VXALFn7DCOO3FDFXxCpWYXy\nbj6HdxbfqEH039B96fJyMHhpxN1DqBOZxcUaNn24fC8CjdvZu5gPZLtxa7/V\n2G9Z9nBV7UDEDTfDRVxwiDmHdA0lrohCOyaNcDbK3/4XJv2zMpmw0bqKDU9F\nshKBVtKDGTbhKDilGh4OUMAmY/YkN4noGLtltfILmzhCyzpKh616wSytvtX3\n3WFjOoN7K49KSSFt9LgYiBmXeSH7iOCxvQUZGSGdJBjyJFS4C5gttxInHqPC\npwWi3LjCS/6sNsmNNcF1Vqs2/ertET1zJ4zmg8dYJwOFCLMsYq1TFLxBGdsu\n8c3ns4amnM0bm2rb8DZcq+e1gZ4VUi4Fg44lHrUmjfCPvSp4sSlvTjJnnK4X\nmeWqhpEK1kOg80juRre76m7hB/Qw7G9WzI4xnoLN23no9H6VLhZovI+RiDZK\nVYUgVt2N02hJAoYXLiKZ1P33qYHaz2DfnJyyUj55GDV84G0qxR71Od8pNJtH\nsNUT7fKoQMMOA+rp46NUK2z/5J7BM/wvZck3tNJUX96au2mi9SYmTKFa9M5r\ny1OdGsrJKIW3X1Tt3Yjl5HBJiinfIQStMZsQYe9xZOklBjVsWrtc12U+MY2/\n7s5p\r\n=NrLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7e1Us5ZRXwCLThpoiLe8I8DJPGZwXGa6ebfwwLAIfBwIhAPuoBAVWsGVctGHkT9Jt4SPz5/CBe53ZIWLj7SMZ0xKG"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.12_1587669687058_0.26793583793487175"},"_hasShrinkwrap":false},"1.0.13-canary.148.a1d4fd1.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.148.a1d4fd1.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a1d4fd1dde0b4abfa9d1ab543a07626f7199c5aa","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.148.a1d4fd1.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-6xlOuyuYvnYUgdMMWXWKZm6vSop3HlrJa0PfD7UMX1J3PjO/wnEgbfcvFlUY7/8eLtyKCn4d0kt0UriaCJEYSw==","shasum":"8356078b39480a6ee7cc324ca7cf1d585ae03bb6","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.148.a1d4fd1.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepyOdCRA9TVsSAnZWagAAYNMP/R4Z2o955st/2C9WMcam\ncOKRB+geP/pPhsG8ELOAFw+m1wgTz0O3Nrxv8Ey4/zgRYrPkLj8e2/43kFv2\nYGQCP4ykjey3nV7V5yvwQVepKT9A+eOoT+ysOrqD5Ab0PDcinL/Al8w7ncIv\nk9dGrHteFbaTtwsK4y36wE/igbxBPsMl5zLfDisEja6gCyLb10nwem/2acce\nfF2atRO5qrlZKpBS8VFs8BSIap42oULNUAvDD0RN8IbPG1OIPD4DO95wkaB1\nqW6CekGQNrHHdJkxE+1dNvS4f+SZtRYohI1PVwHSxvVR2/FOiXwZCvyOwJ5D\nzp78rJOMqIrWARrBaWzZEAk9fOW7MmtKpKx4eaTg20MWOW64zkdHjTxjgYuE\nmg+WKdrycjdD/unIBYzzWbuRPxUS17JdBmThVDiJOrh7hrU4ruI8bkc9QnEi\nDMUj5UNZhse0f6IewVjc8zOx0cVqwABLxMgz655bupvveyjMMjdHxuGciZQb\nQzkKEHNIT+dyr0KzSLh6nmaipcsL8uoe4IEPNlcs18u+aUVaIHk/fK3Qv6uA\n0+PbNoZJS58n1/GPGqFjgtKXR7C/tlS8LSr5/Irdrr26gri7CimUfPZZCVeT\n+BPXxE7uuBc8xG6rbwfCm68cwSQjIerWoQAoDkjOARhPLLpJvExUBH+SmXRd\nMou2\r\n=dA/m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeh0tWnsLdzezxGqf8FvUrtS/O7+QJ2dgVN/Rrue3eNAiB91EcNMw38FZnXiG6mHUHIUjdba4TujL5X2d5o5Alobw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.148.a1d4fd1.0_1588011933005_0.38285448693064295"},"_hasShrinkwrap":false},"1.0.13-canary.149.4e745e1.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.149.4e745e1.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"4e745e1a005a932367473151cef00e82321f3178","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.149.4e745e1.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-NhodtBK4oMOyUgVv+c9nw+iq2NtHkn3kjNXr58Z53zB1z8g9UaYYwc7taoS5OUVkKf6Ihk9cRNAyC1cOfbDSwQ==","shasum":"f7be92cb50d1d4ada792816521413e429a782b6e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.149.4e745e1.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepyPFCRA9TVsSAnZWagAAcxUP/ilT31tNnQFu1wutW3/1\n4iuTx+KBOepSeeWKekDHffUafEsxOD5w8cSMgG0l3dGpLIihOWNbXh99xbB+\nxGfSfObc6sB60DAaRC1gdcgHvO1iN0LUen3ZI9K4iIB8h2p6CL3YjxV4zZUz\n5Oyh2rSUH9a4vpGjO+GPEisS1IR6YK3F+ayBkTMz+uJQsqdayIjqQ6xHKZE3\nL0J3w2Bw1YIOpDNdzr27GLGObrH9Tbatssb57AgaKcdOG1jODNR0a6VGXvBA\n3hvyi/hj5Vz/jgXCJ4xJmN5bH4eix+o2aQbq6DlQsPmH43PzSwFzRZvxJEE6\nZVScVNv63UmuRV4OMIiyjIwYz6gcmNBPEv1iw1ypN3LWLMkt3q6lnZFf1Cvm\n+pW1f6et5EEhJzIcrun4mk7R6M0vMh5yXX2bdLvpRQBmx5zw/HCYC9Ngl20Z\n06cbG0R4BE3m7+sFGlUTIL/JODEEv8mvFpFM/SwzxYxxW69OS7KSadE7Y9rw\nsmg5YHW8socSOlfA5OKSeLkon5U8RhxNhKWO8Plg8X5TkyCb5SVu9xaCVAjM\nAXp0nwqJ3YNsbLmr/9o/nPPjC7hMKp07n0hbLhcYAdgiEQ1cIdwym+Chc5Xn\nbC1sF22b3dkVBfRkqXtc9faDIt9q5Rz1Zq27fhQVqrbKVGBS/968a4bxpIJg\n75wz\r\n=REkZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsHWNU3jdQpZ4d8JM6GJFBvXWsI+Al2FGpBeBOcmY6QAiEA7ViJfZax0xt60kEiE/MJK52P8a6G1h9aGMM400TdIZ8="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.149.4e745e1.0_1588011973020_0.36080097370113196"},"_hasShrinkwrap":false},"1.0.13-canarycanary.150.a50e73d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.150.a50e73d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a50e73d4b9088bfbde87f10147ddfc678e7dd34b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.150.a50e73d.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-TdlbX4uWzUVF4GsQ97CjahOWnDIF+rSBVW8klla8a0dAT2IJHQsZlNxfFnxeoMvGYddsUV/Xr/ySqLW4YAlahQ==","shasum":"f1f73379ef5c69dae39755fbb89533f545959b75","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.150.a50e73d.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepyQBCRA9TVsSAnZWagAALI8P/jKBlpBQ58AdjOHJopnb\nZkAcKA0cpG35v07IKRVBmqRlqj+7Kv3k8GCYyXIZlqKO5WrF27OZCI1b/o5u\nYdea5R/lJyu5Y/CbMclwiSjwOx98l9JIQwVmEFmS9/m48b3fXPcLUqwc4roi\nzbQLHJsfSWQHwP2dG6HSRN3bjYZxNN3k8SmT2ESbFQQ4i06XX9kQ/40btesE\ntb/2p2/ESJc+IiBQ9V+D5M71K56dAfN62D2F96aldREYj5WU+jTDo1+cJ//p\n31a/wOm5QkTiB7ZtnffnIpzvNqY0ieMGFP5EDUCptHFombaViDXkqs7VBAQi\nXWEry8ryz1bXgmD7Qg8oUV/Ja30tRfnbIqjpOaatv/E2KVYbn4uBlh0M9aQE\nNaCj8idpoKyC2RACUeppt5NFOrEO0afKO6uNNACxHJGqo30kPZAG6R2rbnZC\nZvC6OFXOfeATtwF9ZlFEJC5hAfdc2aIjOFdHHroENvYFGwMHJkdOoS2qUreP\nqG3eUyIhTnzbbSRrHoqb9kEiR16tJcm6D1iwDafN5paVXZboo8uGApHB5/a7\n+5XIrDypc06ahqoVUxGgJ3XdY7mO2MBxvv6F5l/EulU6CqbhjqKtnkSmmz9p\nOAHMfMdEhNw4udioEqxsEfBooNReSF7HNb53WDRtPxAp+m9IGRqtpilsvQ9n\nTcSz\r\n=bQay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlFeYOvb5WPU8e5W5c9l2/lPT1QcdgzBYWU0arbDYWsAiAoCTrJIaf82+S+JChxI3OYakhZmrOjHbspPA1WbI2q2A=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.150.a50e73d.0_1588012033307_0.6633805349779813"},"_hasShrinkwrap":false},"1.0.13-canary.151.ed421a9.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.151.ed421a9.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.2.2","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"ed421a90c0a44ee042f0d0707631f41cc5738483","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.151.ed421a9.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-VttqRJGFB7sfp5eVBX9xfO1Cv+EL47Gau/y/yqOtMDTiPZ/1eYZOITFLzRr1WcBzHLEQRyVjX+elEYGyzFQJqw==","shasum":"50606694d527d8c7f28733716a556eb0ae359511","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.151.ed421a9.0.tgz","fileCount":162,"unpackedSize":3110672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepySyCRA9TVsSAnZWagAAvskP/RJ+2dVdQH/xBX9xihac\n/Vekh9ESoZNoYrh6U79sAUULpdSEN/zR5MrHM8Oq1VanYY+44v7JN8JF2GoK\n+c8II4fCau7jovyfAWGfQn0vHRNAg9b9hVlJkzhNrDm+cA+T4VaUjKLk2Lbd\nxSUtoaUw47TLcVeY4CSHE3oYUw8GuvhvN2oPcYUXH6ByjBx2T5u2HxFPU7+o\nYCBKUBnbpN3IYjl8R1KYe/dNHiJ2zPCyQ8eZK3wGPTPnsEwxhPETer+JF1t+\nS11jJaNTbIFb0KSsGgadMRpiYiRfSbo9gj0HV6Pcoc6AozcNtrY9CkQSMNdj\nVMVuIPfxmezWDx1/bvSI8sL4UXU6IN5eOskuQ+nPxb41nrjUF1HlwhomLWfL\nx0EJpKP1GeAxErKlfunKNe7YOnSYh8Wq6fWcZ9huTXIJLtIWGv2TdkKVLGm6\nHEOHJ5dB4+56YbZXKu33/i+KFvX/tM18di95Izv4ghHc267vDk3Mz0q7LgRm\nmmPNQ5RjxPwq/GbBMgxxDNqmwqfbjiClmfPE+QiA0ZjgKtgXAnYkfoFkjO+9\npb0Nn0qrQ6th/6JTNs/mn2EVd3UFyZeuXPFPo40eLVWh+5W3ykwzSl+HMmMg\n/d6pqIDxwN79+GDPJNpwT40XL7wwbxpE1h/OoZtWZLB7oeH6BZRnpYVOytbJ\ngDCI\r\n=DLLb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpjRORMzLWM62ML/PG1T8yKGgLHv+CVNvNMfgYtgDroQIhANQ07qTQ/Z2tJwdeMv7KfVIx9QjrB+MDznNQ7IUSJKdz"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.151.ed421a9.0_1588012210278_0.3595745104137067"},"_hasShrinkwrap":false},"1.0.13-canarycanary.152.db3963d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.152.db3963d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"db3963d583931b0d97891fc48570c10bfbce77f8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.152.db3963d.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-N2RadQo/p3okX0XeUVSEHNeOnjXHFQ7xquzNFbJv+gp0uNFkcurCR6NLlhtTrtJZTJFgcd9JpYcxv8XGc9K8Nw==","shasum":"c5c9d330d445a2eb94940367f255d3f6ae339425","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.152.db3963d.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepyV0CRA9TVsSAnZWagAAm+MP+QAtwrK/gzoc7V778f2/\niJI/aK7pFTG635TkbLjzMMTWFxv39M4Atnj7rDuIerNStCxLS/kK0iQhw+Ni\nXVLeRbhZfnqfjY15VLJbYerevnUDOE0t/xHI+cOjYOJrjBGr5GXJ5+kkIgZG\nszaeYY1yHf58QnWZypUuPWoYDk94jPXutXD5cgMYJrsXpED+0bhtRkAkhSYe\n2MU7UxYw9+8dR6H2/wTYRyj2t6efaiIHE6mZHo7NsfiSLDvn63a8BIBwARKW\n7jGCLaIknFsNGau6k9VcMe2FxCXLg9YZAW4IJEEOFPHi+y1Gbf0rp6U3hmTN\nuFptyq9kApsj8qPlHyoK1CUazn3Qa+p2Ya+Yen9FRtHHPad1sp15yrv1N9lo\niVr8MByyS6/mPpofi60+AhyHlsA028EdsLm2pjX01BB06H/vN5a+M83sZ8yR\nh5gvMVvaS/sSmpY6j/rrTXDgKbRuGAKkuCuvSlb4hx8Fpx/ZeGqMxYe2I6/u\ncxJ4I9sJaYghEHplXg3mpZZ4WI/WQ8gVkRh41Eg7wyk760aq0/WSL4QMQsb+\n+etR9hYgLPytcISBkWP21TSL6dmqpojc7HoHuYTpgOh71KR7csoteJxJaG/e\n/Qos15gn5Kkz2IyZmIc7vC4fOE5VH/m/iDoujLd21FJlSz2EMPvj2Qo1lMkD\nsAuH\r\n=gtZX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnvyMIFaiYX527tC+2fzOHM8lMoRqaF63Jok3wKQ1NgAiEAszq1T+2Ydetn//9fsNy8OMwbQseVqlzuImjLyy5reqY="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.152.db3963d.0_1588012403569_0.18399012524541236"},"_hasShrinkwrap":false},"1.0.13-canary.153.6c38c73.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.153.6c38c73.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.13.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6c38c73765165b51a5f517d1a9aa0a7e1b40469c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.153.6c38c73.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-x3vAMRuSwARjlMOXrpmmac1htlkLff1F1ZV4e12zctE5E+FKUxMx+ciW7REmmXtYSrYafLnM2CxOWvxms383Jg==","shasum":"1ab528f3baa663af41376bc5d1fc3e7586a1d12f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.153.6c38c73.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesHXJCRA9TVsSAnZWagAABRIQAIOJ9VfovNtku/NZmTu7\nZ8dlYB/FtrDuxLwbBuh+GsdcORvsOvrP6yMtbteTJKjJylJrxz+qQRA2lAvy\n47pOB7aJjCi9fndgS/tfDHQ2DSYmixJrouMmpa7Gtrwn8lkp6Wf7kWgD4BCM\n4NpPijRnfNm6DZpNZdrHzKrf03IzIG12yj1+Oaj0Vlzkb11jk4kweiJOc/cm\nSI+POn61B4m1gxTFhrMisy1tWSp6K81EwVQFBpvJT1PFhtt7vTjbP9TbckA6\nNbqE0qb6AZlBZoa7Xq4kSulFYKDsfsVYWe7P4AsyXlQ5M48vLR7G/WpWmPZU\nhgxiRAliNEJ1zVXYQWnZ/iRKGMQxvRgbkK0EowFURNveDmDpc8PiKTriu4DQ\nH15H6rfzTxoq5TOEuJMY15vxQ1ieH+zbgs9NEy+p65eX4U7B33Y60XWEQg0s\nXsx4sGYRXQovo7WyXSAFTnXBzqlvzRzHjSwtupd0zhmaxptfJvucdiX4YJdK\nzJ/69neeBuGQ7zhk+swIDMvKdpssPxgTOzW9C4r+cqyoogfKlnDbra/I0pVN\nfpNDBo8szYPShEBOKsAy0QRLCMmgpOKddtSgSeq8ExPtNb04OWvDNtv8vjFX\nOpFXmf83z5llQey/gzG5gi1HUfVloU9bzPaIdXXUWmBpli1vYhHItPUadJ+U\nYVKG\r\n=mc98\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDzzh0YSr5EKOBwJoPfCYhvmZiIynzQjixD0eWZOYIRgIgOY3GSDcR6LyP2zOGEpabvnqUEzXv1lLT+p9vc3dAVGA="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.153.6c38c73.0_1588622793018_0.45106613529274386"},"_hasShrinkwrap":false},"1.0.13-canary.154.a166311.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.154.a166311.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a16631199f35e34d12580d1c58997a5373588cd5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.154.a166311.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-fGDK/qeCPeU5mZJhH1fEoaDqEDOYojsILoZwiu/ofD9a3+Ka7WAYc6ZOu3tnF1y8YWPEHODlDRYgHuGru1M/Xw==","shasum":"61580591ed26c2e2a069dcb7ea3c046b7f682791","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.154.a166311.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesHXmCRA9TVsSAnZWagAA3MMQAJEv39coS6Hv1utGH5Me\n6+q2UoerofZz5cwd1kNEWeuS0ICMp5bzqp8FjRjqLFOaMuRDw4VLv56l9xgV\nF9bdxaj0fIGTiwic3/OrkSyUS5RUnwe4eyEHuOVfAYUtaJ6LvqKKx0D8TtDX\n8CkftATfdvtAKOgpn06UPxtlF0wsDxAJZ5EbIspLiYjIUew9jdN8u78y2d9z\nx4rViXH95VWdRZSjjLAl6G8RJa99eiFBdA5Is6G6Lzitly4zP8g/3D49sYTp\ng0NFLnJk7ScSTNMYuvuBp1PUWXYfJcT/TLprUMfweJG91gVMvIuiOVN7KnJB\nHmBHXof8y2ooMApPy3+FfAOjHJQCNtGXH66hWJAViCg2/a7prf8TWkJHx41I\nlF5PWdi0GBVo0TfrgUovhkCUTLI4cQVOcWN4JPqy97AawBM1I29XK2p4Qw9U\n2sBOd7U/yxXrGI2fXVKJIu0QT/LSQsOTi8ELBDBInemJOmbJRCK2dx2FNDND\nV3dydTiKiEL8NfQxTPLjKcl5pfj77NnqKC+O4m1tv6x/mI+tt6wAM6dZgl81\nw0J6eWmZ6Jvlop92KxdAe38+KeJafmBFH0bZygC9aDO7GZDPQOIHJqIVSD4h\nf/Gv11O64uK/JjKoKG00t8bzn9mUIV/W71RwcSLeimUMYq4lEbxsYjKYig8a\nOWFM\r\n=3XzS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2Hnr4IT9Rih4u38RGphrLBqbTq9pZL37WvxL9Th6Z7AiAr8TvnjlQweNZFgqPdxrad87fygpVHvWjQgwuXdR19YQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.154.a166311.0_1588622821867_0.8785361653999597"},"_hasShrinkwrap":false},"1.0.13-canarycanary.155.0543d43.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.155.0543d43.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"0543d436b2c463800eef44f8f99c58474c24036c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.155.0543d43.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-+7VMIc1eCp8Ih8PTboWYBG+sSJPLHDk1hMzNiphso4OLkCfDZjSHvTSF9n70HnJB5Pp9m4mErJ6wAQoH0tmR8g==","shasum":"f52756a739cc3d08cf7b13e060cbac9c8c51a8eb","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.155.0543d43.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesHYFCRA9TVsSAnZWagAAlDwQAIKvEpIsezj8evNtcjgG\nNoWfPsw021rtN35fyvkP4iq3G9aix+8fFsJ1INB5xEoJTTDyk5rQmid3mf4X\nPCWuLXOsGNCuA/Q4omObdE3NyWF5TPr0z/oX5pVcal+8DSC2JJG9SOFxWUjG\nogkUGYV4V37NQJb5FE6NJ8xoGuWMixpsiZBRyhpDhvgFQd8I0ddmf7o8P9sX\nDRTno9idrUXdhhxlOy8b3KfOCexjrxPwD/RGzyW4oAxgdBxUnhZaLxapsk7E\ng1upf6OLCGqkOpmTaG83zGWVEN93J2H+7nF8MYRWANTZDJibaJ63WxinDGF5\nFvKbKFFoIxKFmdKg6Ge2U6ugYmbPp6ARauRdOlDJ6F7NQtupTJ11jh725qL8\naqofR/fMaCXkTCsWcFoyEbDbulwsDiRBmg78q2UNtCO6HthFiCoaZmI5naeo\nuYL4oYIChb6Z9gApCpr1ihCUmWS0MmtG8L3Jccs1G0H26bA0FglXcmz0q7L1\nazecdPPRCq971EFzlpyV6XXDM57r04BGGrVvK6Z4/NbaqR8mBoKTMa6tg1Av\nRycrYH3kRMzY+wTyO/EBnskNWY7ktgB3+OMWZ26e8U6n/LTDqtluSCzTfNwB\nh4LFiD/NuXlSIJGh/iGZWgPqe7j/BHYQy+p6+ZhfH+5lgurZMAC+MufMutOM\n4qzu\r\n=KnYp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdwFIP+Mvto+zQVdDsWfLwSAbBtvOyPkzbbPJLPm+SagIgdWN2puSo6EvtQOfe2wfgapVuFo3UDyojFfd+osOdm2o="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.155.0543d43.0_1588622852519_0.5493617494542213"},"_hasShrinkwrap":false},"1.0.13-canarycanary.156.47a0ebe.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.156.47a0ebe.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"47a0ebee0eed545242142d0874b6ff80a9abba43","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.156.47a0ebe.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-O4pQfvEU9HyZ6ADnl1EWi+9z+nt/T5bJ508/v/5wfu64bfmD0Rj5QHfPePABnDrAA/CICK1DU/Y+HfV1q9e7Ig==","shasum":"6d5ed810faf6e9a59da330c0ba785ef132010c2c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.156.47a0ebe.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesHdNCRA9TVsSAnZWagAA3swP/06LBJmHL21FTGsO4EKi\n5nQ65YnxMYPUbGXPm4HP8xaPTTqUGXlbO6KkPvwjJaWr6dCdSgGorvBVeG7R\njUsTNjYqxqCxDtfl8M3/qIVYbTbpkBh0r4hhIlsferAbsOJPm2Q/TAxjUrkL\nZod5EzZAbDddjv2OHOqJQh2XOwn1o8jCUiehd4jwi0klowIM7fVIWzh6gsgb\n/gyxuV5NWB0ToShqnrNkppGH5bPBoqg1mhVY+RABOXCFUAbuFLfcF8ZfMwIQ\nHfMvFpbeCalsBFm+Sted8k5BiIlS8KzsoanqlpQaqhzd82m6OVIaBGr29n6L\neuxrURFIT9W/Y2zkyAWiGWkLpUSTXdNbvrWsWYaebFsuTQuGMRoYFHgr3az8\n+u4gsHUfyp6md1uu0Fj08pj/QSO06Jj9FTWkPZPSYy4oHvOyOIfZcCEpcNPa\nxPaj2WbYxy+ZF6fMbslZadJSAgzgmkJBuxQAsFbfDU7pV1RMdxLkIhpn3SJ2\nWY5Sp6QKdi2kcbSdKr9QAc1AXC6vwMJHeyLyb26+v+Cie600/z42VB6WJUiS\nUu/yTO/3cWzOhH6VvSwrQp9XfaHTglq3J/1fAFEj1bn70akx8g7bgrOELB0a\nfCA4A5Tra+iSv8uTiqC2ion9UavV7OrUMpXfsF0KIN1uBn8N/rymfkTDaFo4\n4EeA\r\n=Cl5m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk9TFnmpSbAI4NbnO65P9TC3sE+yBXESXzgE/AR4u1PgIhANHQaE5nVIY6jFfP0RJuJ9nyyBQrrunfFQsTiR2mdHDy"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.156.47a0ebe.0_1588623181411_0.11152200260531164"},"_hasShrinkwrap":false},"1.0.13-canary.157.f89dcbc.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.157.f89dcbc.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.2.4","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f89dcbc13735ed0cbfa24f632ca241cebe7ffed6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.157.f89dcbc.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-A7YH4VT5+PZAQSmgPcaib8600nuJZRvwu/hlVB2FEMucD2ORU0RLY6V4eXQgGOX2E0BH5ukl/lGdPNeUblgiqg==","shasum":"2f14477b78c10f8e69370fc440ecf88f7e6fcc90","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.157.f89dcbc.0.tgz","fileCount":162,"unpackedSize":3111206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesHfICRA9TVsSAnZWagAAweUQAIfja1z0JwjnJPASdmAM\nQ7F0qQ2rj6m5hetEuWsrPpuNJq/lkx9+G2BNnU856sdn/fIoExKcl/J/O0YE\npzRsVFgYWiI5LNZ6JkqWVx9E660knsD5RtreVGQ+/J0Rc7+eDW4AX0+l+NXy\nulee+YA5YV80fPw9/rUetAmxyS8jHtdxaO1iJnoM0Rd1cfUqyKh8rBx+5S/W\nJ8FbPa+DcX4FV7N4bSnyOdZ3gBu/27wPqEyYFXvaIPZa1gn1IjS2Izr5tQDi\nX5sZrxwT0Vk/L9UcZpwbWuN9hXd4ene4fwn6W3E7dqhrkx3WDnSHiBRMm8+v\nLeuu4KPHLy1hpzhjdeNv9N5+CC0eojKgVz/EDRo9sASYpj+jXnuUouvhvDmV\nq/sqKDx4LpCQz/oeQKZRJrKcUFqRzpDDXLUmFwyH2811jrDkSS5WA3AVIdud\nF8ycCCBBf4bGVmIfW/nBvIWwc5sHR0kIrMjKURbZX7vAxVCsqPivLzB3hZ05\nEofPbRFImZcEND8lehNkt8Hqf6qq5gtdbxgeymUgqPa+QY8tYpB3GYxbIeH3\nOkjV1CPJdgRuXFBU8BeC2GQ9wqi5MfmiG/nFJsZfVe2FYft5XQdmH1rBFRiF\nH3jV4poFAO0wsPkqeDG+13gjRkAJmPUfhn393LmamXVvLmAmO9vQCr2S2ZNm\nmgFK\r\n=0n1/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeA6G/seS3IDZRKXcKDwLqq2w9BUtJicEqv01GcwrrDwIhALSqXtiioLlcCVvF4wnoMpjEQGNypDfpeKza9gCvAGCi"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.157.f89dcbc.0_1588623304163_0.29763984789892284"},"_hasShrinkwrap":false},"1.0.13-canary.158.b9e5c14.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.158.b9e5c14.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b9e5c14ad0ce69e2a52ec46f6968e20cc6c86a99","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.158.b9e5c14.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-XV7VVxVGHeEopYF0KnLqyDyV4EI7j9IbWRH5C3cbWjyMJCEEiplpMQ4V/jOkbqLGIyyZ+VHqTPhmFWDx9PHQCg==","shasum":"a00372aa42830f306907d3a6c09d6f50ec036672","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.158.b9e5c14.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaaGCRA9TVsSAnZWagAAF30P/RJrN/HoOAl+5RMbX3ph\n/TJYc+ODQ+AXrOP1pVEO2xGC/hd37k+LsVWu/smuRYkvbM4kzwOluG0A6YcP\nS7UfVxHVh6usZWWh7Gu0g8dGkCx2q3Vcbys3QXAn6tnaUYxIiH+YGRthjKTl\nqZjShdS/lKfgsRfdnBUEfHJNUhVfohVoYEaFdM+cpRdaW9I0WdKalJzVNJFh\nzPPHu8MwRWVFyGZEzp7jU6CAs2uVh5seaaHtT4U8o5RnwLcO05UK7qBZgOcV\nBe7mqc3gH8rkNo5z6IfjFCOHi9+gC0JpCD6Aeao1rD6R7uhQaMRtCvBoUw5T\n17ldeGgl5RMbesVLEN7Uy+y4I13iZHzZ5aCz8IbGKeDMYb7D6GHBUu9zxbFB\nb63yGRgVzkAGf4e5ukI5fZHL9QCHJIxREjaOuxo/SFu/eW2+8Kg5nZShCtqd\n/Or4Ev98dpB8vXQMHud8L0P5Esm49Ogkcsk5g+wYVnq6BU23p8r6PXkfcFLe\njq2PITv6c2K5OCOl/dJlEDmhrD9lbdqnf/PLHxkWv2O9GS4jkg0Dm8nizcVI\ncIToOFvTxpJO4nOEA8uE25NSEgGY2p8hMB5ZC2dCAwFjzcFGAZaNm3lMljKh\nFB0Sirgbgz41vxLgPIkEOjxBOqY0dG+cTv11rXUY7iPkX73bcReMHPa47ZpQ\nFMjT\r\n=qqMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA3z+U+cEoHJ4sEu+jyv9hg2YWCreskwcTlHPcqc0rOwIgMtpAykRbLAsez+Gnnf7jr6IZagWQoUoGLkTlLOq9NkM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.158.b9e5c14.0_1589225093458_0.7584065026010982"},"_hasShrinkwrap":false},"1.0.13-canary.159.9951817.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.159.9951817.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"9951817589d1bbba923805e7da517f2b203cebd6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.159.9951817.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-R/Otddhwyo6db5pfAP5gkM51fMIczdYl/AHg95cK3ucvrOLh38ICeHn589g4S0/wJiRGB8K26CWtp1maHn6/5Q==","shasum":"8a9baed9f51cbe65d48e5ae92494259cc4cbc460","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.159.9951817.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaeUCRA9TVsSAnZWagAAelwP/AhspVVlOKcjJyvVmYBg\n32+A7sKtecqc6lEzuakjyuQ4GztM5cF7MxWfC36C3rGnjqSXXQg+Xp2WNCvo\n2Ub1EIx/vHkLOVoNUfKylYplyBC8pYZPkxzvxEAaYNfHFw+SOsxBR4rfKXPB\nFEaThE+v2nFr8/N9NJHlsBVNyfvsJ0wGRpggSOJyZ0POnqFwbkoGGXeO8PH6\n2a8ZniT5gLrgqeMdXX3lGIBBDRRWrWiq8S9LzLqs2MZaXuVf0c6J3RWPPGQA\niFEfLc1hNAwa17ZnrKOw3gHBJiYDAkQyTUUFlAmCaiFVWjkHUli9KqJrXO4L\n22ZyeGESu0UoBKuW9p8SspPdIz9HArtx8X1zJHj7OyF1NMywmcZhMTjF3+QB\niqIzReFvUcII93qyKgViflpl5IY308DuUiU6wUaFJQp6MpNwsKcZkVd4wNvt\npE3AhNRWCqSIwJXzceWUBQ9UuRxQufTpHRsP0TaP1IeZPagCa1MfCBKp7QMs\nxpYtHoLUW9IklcVylIfHxkWD6gXXQ3dsYT8FB+FXbpkaRZKZIARwJkNPpPI6\nahiERNd0oNSOgIWuTcAF2v3WybnkQ27dyiiYSzdoZWahLhDp2hmCYmNeJ74k\ndmBm3u0/hQFsru4F/uL2Wu0B7xybrhPwW32goVKyCqa3DkVfuudFw4CyZ+WF\n3H4d\r\n=AFUH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVNLS+d8rLp/aG4k+g0NRXHfrPgPWShhYqkuyS/p2MnAiBqjt1Ps2kuhP+JKKPDQuw84ItwmHHvtAol1W4RgrnuSg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.159.9951817.0_1589225363329_0.10302457388773889"},"_hasShrinkwrap":false},"1.0.13-canarycanary.160.e2ab0a0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.160.e2ab0a0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"e2ab0a0085d9ce5c795d49e0f00b107689852d3c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.160.e2ab0a0.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-jQti2+EgPUH+EAxnKBTVUiDto0keI72bvoI6tbC3/BabjmWIFc6cNPXkQCz0pasq40eChFv/DBfcedHPyDaKcQ==","shasum":"2a128a3e6d744ff63fd4e79d9c25cd955dc2336a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.160.e2ab0a0.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuajdCRA9TVsSAnZWagAAECQP/26UFAvvz/Ih8QOtfZJR\n9ZN8GbnIMp41iVWr0C3MytoZj0BCLO+qWnrsXP9ZCkzy+ewxsKx1uFXe2Ki3\n2EDdxvZ1NTbNJL84p00ZWAnc8O2uRnF3p4OCEV0ZknhCFDXQHyn5Vm9PU9q7\ntTDVDq+NvFcUr1e4DjZo1sGMqEViPCuMXqYuxg4oXBvKRCCwFnaq0PA4xXCq\n+kUO0tLGGZSgABPMZ7fO0vBcTn0r0tJU2Vzn4XJ5unWdEaxdxUe03flb1ncJ\nF1qgbrbg91W3crnABw9By1I1BCaIuDt7u2IOd8S5BEY1MSsJiXIuK1W8YFEm\nWO2weJ/Ozvn9RrN9/cP3txurGWGZyMbMywSuVGG5O2cw0hFlFEKM0rBdwDa5\nguzbowuc1JNErKaiHtwGuGqDJ05rupZ06rObwzlY0kAY0LQnTQhDvGUS1izw\n8NBFW/DR+XmXuqLppqXfW6WFBeUBohXtuzMGyU4Bq6OH/kRGyut+eNJR8DWx\nftk45AidckAgqMfTHrbkzuhF70C3ZpagFZCd0T7H0+EKkH+uMkzRjiIir2m/\ns2uorAp1dksKJxQM5xr69BiDFpATMQSPSKGpOvXsXUktiZWsE6y47DlsXd2X\nLvjiGDxJZDHHXVJTJ7kWZiX6oCYqLARgGFcMm3hTtBtQFAJY8Fo/WEvC1d6T\n+5CV\r\n=Q+WZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOwByQ2It0OXUou7ksYU+Bg9Dd5WncoFo2wA7fcu6dUAiBhfPaYAYB1zd9TWk9RpP0seJgvcR7TSklJCShajA2leg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.160.e2ab0a0.0_1589225693402_0.17726982385137569"},"_hasShrinkwrap":false},"1.0.13-canary.161.2c12e2b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.161.2c12e2b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.2.7","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"2c12e2b7e0636b15d3cc9bf872f3286aa35d35fa","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.161.2c12e2b.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-Gd/kx39aute0C3dmXFeAODDW7eHKQWKCybrFRkB2tCnHbH7/TAH+FDcO5C0shFoTuOrQIJVuH0+WqAaU1HcumA==","shasum":"cce7626f12ee24f82921fc77a669a5afc0f6f54a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.161.2c12e2b.0.tgz","fileCount":162,"unpackedSize":3111368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuakxCRA9TVsSAnZWagAAX+oP/2qfXrWO4+o2Z91u03k3\nwRZuau59aNhYGNYSmuvBgGLqnP89YBa4XuBypThC1io9szIdYoEiVwzP9PF6\nE2KpGm0hNrh8EpEjnyT8PveL8FoCOurZ/3dMKobMJEmOsSDAAJLJ4+WUbovg\n7ZjgHno6ipPkM1tF6TFZetHHRwIIdOsVfT60Aa13etO/2gPvOV90mh23IjtW\nEZP5YGqiSMLbc9hWu8CKcZW+VZg92iE63UnFOg3f854dvcugQe+p++osbM4j\nMAd8OLlToxJpa/s9/6ECzojZediJesqvh2nz96dFBobdA/ig1njnnOsosM/L\ns41Yzw6dRfdtXc52FojirGYjfyfR3wKW7ItTQUcFfUWjePdwqYMPUAVLIHEv\nDrR5qzvw+ovx3Dr2FrK4A6sQrH3pHk6dr/08ezVPoUig6sgcdY1zbbXOq4e7\nCtRRGpj9p+klht7NTmFriNWZ33VCtteNvpk+mLoxgaI5af9dCf4Z+nOlPCnR\nJ5BS/IWLL3I3hNNUwt8L87xnOVYYSPwhvJHwx6o8uL+VSKL9CNthooy93YO4\n3UiJJB145JXjlk6Ml1SUcK8zSfZIg39yjC6DTC2ir6J3G5ICMnTPhWlhkIn6\nFXIsQmW6z41I/wu3cwVDsHa708H8ttz6UXmDJd5ZbgEfvbkr4Jt1CKMqUZna\nENS4\r\n=Wj4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh5tpTeLjydWsGXkQDFPlSp/JQm8PnRifAUx7TOhHS1gIhALPucy01ZDbSSMbQywTEwmLNo7fbkNM+63TPvYHMOfnE"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.161.2c12e2b.0_1589225776819_0.07006131663760318"},"_hasShrinkwrap":false},"1.0.13-canary.162.b3b0576.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.162.b3b0576.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.13.1","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b3b0576929087e1e3ed7538691d0d513ec162622","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.162.b3b0576.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-L3rzaPsxRWU8hRFRekDNSkTaepMqnX/dVsbelihNLmu/mUjZWJUEXL4tVQJqsZfK23yU/M4sGrOIlFje8KEcSA==","shasum":"6283d9f7e2277d99e906c214b99d07ba5dc97e58","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.162.b3b0576.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeualyCRA9TVsSAnZWagAAhM4QAImrrUau66tU+mc4527o\n2oTq108DWEjuNsUf7T7rCCnTXHbqD+CnkWsd3Ia1cdeMmHmmNRqG1n3/XIy6\nxxjqW5DpjA1H8dT7WNDzMFSe9h17m+w/ZzJWJudvaaxTMQeU+rzI1C4tcJ1q\nRHRBycTpNyPBfWe42xaD7WLF9KcSzfLAYYn9rw2nrFSzcCp7sW5QW5yiWFcl\nv4pZF74XLnXQa/jwXwsIrZVrYuNEMALg0Czbdo0CjculDih1uhDFvj+3Do0B\n8XcTdrUMvbg6n9QwV4+7ayXmc6xVnCV8O0PZuqWp6844g12bMsmNEFyHQLRc\n8V6gIUq+ln4sXKRNBG6tAA3cw6HmTMblpZFtPFGN4ydztWRaKsRYyOtKHj+Y\nhTSfahHCv0SKPKtCVFVt58Vab9nd2eIAk18UUjeFusmHYgplyj1o+ai0Z622\nRJwLE4YP+Q0j0GItJlQYe6DX38ifgGmTSMys7HucJERXuFr6z2gAfQfCb6oN\nBg6IYDA9Rnu3U6hpNKF+cTPQyYCcT89SPyVBQA0toc2tShcUH6oOsNz7xyqn\nrLb+u4iRjmNWqvfhoSMWcQ2XbH58Oc3QlX9lAiwm0ZaCiSyYHGkX5uv7QvVq\ngsZxtTiHO2QbeWjycHK9Ugt9ph63ZnF1wkjQIYoSzKJYwLHfTGixYfjf8tLS\nvViZ\r\n=JObU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBmVnZm3pCjphLcLBnwTOtt8fcmDptQCTKip4ZLZlEwQIgOtL4fU4De6+gfNUMLcPf9N+IjJUw+sYDYnFR//41skQ="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.162.b3b0576.0_1589225841614_0.24268174664418973"},"_hasShrinkwrap":false},"1.0.13-canarycanary.163.351f542.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.163.351f542.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"351f542001feea46f78354c2356781670ce2c1ea","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.163.351f542.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-nYVkZSfpdPj9u3iELaeCAd4Z+4+uGcXRagZR+GxB9+vbCbEWipFZL3dYt3bsYnx9ZFsSN2quIPEpKFve44/26Q==","shasum":"5fffa89658c9ed63dce438b9acc86dc8b9d95dc4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.163.351f542.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuannCRA9TVsSAnZWagAAFGIP/i/CZ2zyc8pVLsMVWcMj\nHgteK0RGF3/ZxHJT+yubMeVZ3GhmZOzEoJAJi8Hd91jJsBcep0y7X2ZqL1XF\n4ARsFWb745DpxyzJbUrTEgTZrb9DQN3emkOM5RJZc3lYN0W03pq15FraUHc7\nT6zv8HAvlSLjmLnC5oEnf1n4gM2nr+fivKQFCj6cTmWf2MHsGLUiixZOSJVU\nDu9dDgsc3Kw4tFO6Q1MfPZrfBVEoul6z++RmNZZu7uDEiAPtOYTYTRq69KNc\nLNwXYanWkCrSvQfB6kipODaJDcgtZfcPw1++XbdfwfJauVi8zNwvGQeEelcr\nlSnVJFiVAgTf/iW/O3ZTfv/z0te/GRLT1wyaHPIoEppUecXCcOFvdon+bbX4\nX+BplwUMmoNseKkqb6jKQO+POmwOqGSzJjjTTo1Qeek7Bw4ju9zVJHFLTUOg\ne6mg1eq+v1CthrTulGruQUth+NEZpsGdMH8pqjbM91DBm8VxKuq7AHD6nZm8\nZMzrF7vVOR1vycoW/JEfQ7xa7UYrQag9BehAPZ7yTD9GUHzDa3c2yiuqHj9a\njUC1r0cc8lvr8rbi3wNxr8JICxZhcjf9cysMYzY1eis/JPySncoSshKMbz6H\nKfPfYMQHWe17WkkdQSLyQt2fOzCWZbslJMdNjNPfrM7Iul0Nv767O+lNbqpr\n6UHG\r\n=ro7z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA++cOWW1e5KomvBTKAVb2hGS80SwUzvQbepz0kC88lJAiBeZXZqIRkaPKUn0kVHZdnx+j/PMqPA8WelouNMZOcMBg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.163.351f542.0_1589225958816_0.22978023858507868"},"_hasShrinkwrap":false},"1.0.13-canary.164.a2666cc.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.164.a2666cc.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a2666cc7a221eb3b68627b2fa096313770fe08d0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.164.a2666cc.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-WB3TUAWuzuF7Df3j3FYoA65RZpmjtDQIRAnakLszN9C0tgaboF3sUanZKwy7skaXS1vIm8cdD6ZIi89nv7DMiA==","shasum":"fcf0c444e31126c1061ff9f2d70a1ecdc9a8dab0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.164.a2666cc.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuar6CRA9TVsSAnZWagAAdCMQAIslUE3xQsjNeU4nIob1\n+HjFe3zkBOri9a22+RYQmv8EC5J7eW3g9Kd4C9/O3n1YF+pdRolpTA0nGv9N\nC6fS4WJmZlHBdqglScLP/rae8pCdu1NwLqKa/U+I5kgQ1eHVH+qBmC5hziU5\n4Y3/CbLzTCJf8EsupSus9b2yaALsTuvR3GjcJL7u5bEYoqaWtDqaCGz1xWQd\nfA2+3+nMW/SMXXfXwLPFLUUHf/ojfFXp/oLzLT29cdpRZVbzHqPNQriiY4d0\n8ajoz8N8Pb2iu3+c/Fp9XTxCYskNEbWuVIes6Un7bh1svKhr5mUd8qIraS+l\nuNQRGJNKZJmEkkUjS1qp2JDR1YrH6gznHxd/dbKNMOkp5Yb0zzkfNmq8UYUV\nJ+E+JkygsqJzYu+iTpQcREaVuIGzkla2m0V4nzSsmxZZS1ADg8K20Fun7t+/\n2GlKdnLdQkooF6/UeRTh6z9A6lrjH2b0RfINKwvoXi9XeMikUacBUhNbQJec\nWR6x25313zqfwxBc2HDp/m93m3e5RBHlvalrpgqlWIQ/QDLeYih/1jio7LZg\ncMKYvKVIW3VO4dJPRd6pDcyFSDxtqrIxjFJ1sIx5Zehdy/2SgbgfsywMsUgs\nD2I1UZ8BewcYX4XINmf3ozGhQQmWzIDx4L0fa0bJLMyeNhoDmY9944k/by4T\ngWne\r\n=FrUY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbpzsfIAy4GvEB1lhTa3w7sX0Ir5aSY0VZbyi+UMWjBAIgdeViug3GFLa5WUX2m/wJiCSXTfTn2h0AVQdW0ciZ+ks="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.164.a2666cc.0_1589226234407_0.08124145443582864"},"_hasShrinkwrap":false},"1.0.13-canarycanary.165.d00a46e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.165.d00a46e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d00a46e750295bbc7fb1ba683d9729983ffdfe94","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.165.d00a46e.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-XMm5KWRH4hvbkx1OhfZuJ2ssvQrV12USZib5KArVZxMX1y3IqcqSJQmQnqTCp8JApVzf2s36pitX7AgPy8HaDg==","shasum":"4a5ec992bd9dfd6ff24dbb56fdf49b0c3adac50c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.165.d00a46e.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewt1uCRA9TVsSAnZWagAAyasP/3EN48E47C23BTe2Sg9N\nfpGfZeOLTPL36ILx0iRsMMTRxttYy+cm9DXznPBFJDQqBqpK9i+ZwBVwsWEX\n2jD8GJTRtQRAeBXM07lAqTjz2MRBC/hn+LgYZfSk3oVD0bE1ZZ5yX/Z8dGy4\n+tVhySIWD8sJrf7a2wyXng+iJlw40D0aq+OBYqGPfSGJfVIOJGqnCVl49YlJ\nxlqC7qSRQ33LDXUk4YEZ86dE4ADBpWPdGMDkgwU35SPCpcZ2Syl3aV65pbYg\nmTtO3uk2dBuydbFmaxLRu9CxNvFr2lBnua6y96geVjPV7fmcvrDKAygrX93L\njqRRWIgBzHOyJFK9Avp0Ph6zpZmvOnY1wCq3+2628VVOBhEE4sJLM79vtDcz\npG3jyc8tVu69cG/xQlNUIR6zvrfrgKmrd6beoedAYICnnR1yoTkYfMuT0edt\nTDIz+sQoqNnqU1SFPwyDLZdVtQdyMgfl8PGswBggFfw6Hw4JDJXHnizsHSn+\nYcH6LKbeHfpHnuEdPkYOfhtGbn43mIoA8h4kOx8HOiL8SRavLHwT/ZJubQ5F\nP2pAf3VVUAHOUMSSadiCAsiAZ6PjTp/80ujChqY+p5XWVnmS3hvRzsLJlWbl\nlLeCeTh+Kg3oMbZasTjzAZJWrDuHQw2LlDODbrUxr3enXm/SF6duWVPWX6/0\nFg3q\r\n=ejVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQyJbT85bMYPig01hKn4Xkwc/sRMPxHx2JnYArCO2TDAiEAsGZ/H9G0uC9oYlOPVYtYVZvaNdz16G+bGpUBWw+gWDE="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.165.d00a46e.0_1589828973171_0.16049082947432902"},"_hasShrinkwrap":false},"1.0.13-canary.166.602872e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.166.602872e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.4.0","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"602872edac190328faac4dd34d107948f5349414","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.166.602872e.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-b0cwcnKy5aUppzq57ZCGGnBM3DUIBpXm1SvoisKNdPBSiU4Tdt5iOKm9EgpPJG/SgC5yabF2v8rob0KLq1zQKg==","shasum":"25c468e50b7d44fcaa28e43b0466f0fdcfda7245","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.166.602872e.0.tgz","fileCount":162,"unpackedSize":3113128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewt4MCRA9TVsSAnZWagAA37UP/iEQt8nJb2Ye+Fe2hi+j\nwV+yL6i3pAsnzvyqgHpG+TCvYS7LZl/0rKaSsxtSkTFC3pHUKeOxahb5y4Dg\nQ827osT8ZB7i/VTF8jvM9IQ/v0IJbK98lo+/Jm2ImZylHxkzYjuouGv2TmVA\nWU7RnJCmmAeZw7k5VO5Ee1rR+w29VIsWKGIGfNsR/YW9j0V13XhJAtQKTEln\nEPCStUCPiHOp98HIFOo3ZxlMzTvLbCOIY7RlGGbpy8Dt5x6tnM/VcG3C0WCm\nMDlB67oiR1kxBJq6phFWHflpV2vrNLOaFCFHvxxK5tqhUUkvtQkh0rIQVHFl\n6Zg7aOsrKeQAxBogetJUc161Dp6MPIOSebu0tT0mJ/aGId3NIqSaZc/FXZS8\nZGW84j/QVV7iv79pP9Ic2i3ZGE/5pLUpAIMiJ+IkwwGCVP6oQLj98btldr7C\n3giHk3EWsosY7lP0SktpZQCJECnUWyICw7Q7pXjAg6hLhXypoG8NBuOaDSk2\nuM3Jb0s8jgzv2ZhsnDkoy/zUEcvSxMC/3TIZjZLs6hLp1pHilt90DG3nD8H2\nZ9kUyCy4dC/7FsByb4RItf5KHPsxWev9DGH9gNTuiUvTxKp0qdjd4GioZpwV\npJfxGohFGVJnQoN3o2+iBMbNiJkMdKdcP4WmRdcO8CxiQ8BGNsw/FjVg1UoO\nWsmu\r\n=ubCK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdoCCfCfxdlx134Ty//updo2c7XDnQ0msK5/aH8MmM2AiEAmDKs5or5k7J0dA5zTW1fZ7Ip5BzKEhqrAB4EnqtzTmI="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.166.602872e.0_1589829131451_0.6370144132479152"},"_hasShrinkwrap":false},"1.0.13-canary.168.af214bf.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.168.af214bf.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"2.0.7","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"af214bffe5ec545b31f54be49d4b03877ebdffd8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.168.af214bf.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-UwkqLrhhVau73C7OeH1OLf0LDI37v+Tn++D8Tc9ArnadMkNpcY4BSeWN70Jo/0DzjzL/Q3Gghn9wI8ItoRC13A==","shasum":"8f94c267ba77e2f5a4f4e7abce92f8c2c7083078","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.168.af214bf.0.tgz","fileCount":162,"unpackedSize":3110110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuAxCRA9TVsSAnZWagAAxuIP+wQ2N9oMJEjVsYxQ45Cv\nnUigDPIzm/gPkbHtBblXHXdkWVEVhtS9XV0yzBU0urChPK4wCFYnhYsYsIEz\nVdGLSbRti9ymU2TLglQszyZt5dCLRgakTN5FPyRxrZyFfK4Q6Y44Z4gptdVL\n1TWE5N2oE8PYWPBxj/a48yE/dMj8DZM0aNdGNk5lresJ90qRpzPeZELhaE0P\nZOgnT3RgZ5WgtLP2w1pABBxGZ79P1gTZTXzdV93GwrdSQ3Zy7wArqUSPnikC\nZn80MFFh42J6G1A5+8uJ5u4LX+FEoTrQB8JvOMA1T8/ifWuXk7J8KgzglE1l\nMikcZG5qtBtKNHTvmX7v664yOnrGvklDfcZJTnQtjyKj4GecrvL/axzDqXlX\nrR2RAB0JxrAms9Odn2AO2VIgxBvpq0jrR6n1BWbO2LmRK4P+r++/2Uv4z+KG\nd830NhL+KHMN93JwascrmP5eQXaETpGBIGgJkvIKY/DHHZhPrRe+7+Y/Ur1v\nBi4Dt9cFY/Fy/WQrEK+JE6/SGqacCuGnlzsQEVdsrviq4Fb98+iCKoMItrRL\nyY2nip/+zjq506ZFn9PZIACBXTD5U+rJepemJYzJeFM7GRTXGB/PdK2oFUK4\nGb0oEv91/enYh+cmpEYFaAHj5bJY+n0JcLuhGuBzYsFJSaRZF2MTrW67mPJm\n/Nsq\r\n=o8ov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoDaEvQ+7Fh83ZvCNz0NfyOUP2GgH9gHwqYgaxdl8u/gIhAJSVyHgTFaxx4w0r0bSiy0OqfKs0afknn7WpdVM/imwo"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.168.af214bf.0_1589829681220_0.7519270764189581"},"_hasShrinkwrap":false},"1.0.13-canary.169.cea6ee1.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.169.cea6ee1.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"cea6ee1e51cd38accf150bf659dbdba9a45eae42","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.169.cea6ee1.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-3LmdxzlBUh2WgWDx6CHcceXuDJfWqt45r+m6zHsIOSJji6i33KUybWvdymwniujHq26B+zEDSuTVbKeaKIaEsA==","shasum":"f4d93c422913335cce0f5f956728517d7ebd597d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.169.cea6ee1.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuETCRA9TVsSAnZWagAAdzQQAIjSaJEtTAtXHxE5plr8\nTP0U6UI1RqYoo80TgkOjqp7tKk6swUH7iwU4eLSNUApBlDgZb6iFYnoGrMKD\nOZg2ZghLZflDuQUnU+HGPbs2gKSnzvTzwvuT1VGYOq6Gf2r4IlAtUg+M1Zfs\n8rpGI/Dx4cEp3A5V7je/MwDwkfFNfwSIGXyKOa20Nj0K7obaskYSEyey2+s7\nBJ0S1KCTr7+6BBiFCXtMn7R+GbrdhFLG9OZx0TCYvOUY4tLxX/kkSFiBAZSf\ntFDLVu4tfBKbO76/N1Cu3esjCChEwwKW5exjphU/mD0TqiNTtbdpbiR8rosi\nUIQcdOSACJJLWT2sOjslJ0D9+ghCCz0UmJJL6efeMX1UPu6/Y9y3mwThHxBB\nxMq4SQroeTlmw+J+LdTz4YTYWmPQ2juVUbjxAmexXMIQUC9qvO/41PBLzvqG\nHJ8iIYfolkAU7HYEcbxcDpNQytdacz4kgFxMwb+t8vPKCOfr61JL/JKlHM03\ndhzSF9kAgqIVoK7jOux11Og8IEqPviJWWvN4G7iVHTorJhWycRIPiFiDYZYo\nSv+/jfH6vO0VRjFgXrs7X5zfuGk4xE7cVpHfqrHxB8YccpMAPPJ8I4xMnz5/\nPmB0nH1ITOb+ZO3B6QGRc2G3+xcG99Xm8TUejAw6S3D4pNadp3eGDw8G/8Pj\nBmk3\r\n=6/xY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGP37UA+auqiY30XHtfXYkHcWCHJCNdiBjzXhV3Fr7OwIgcnI2iyi8M8I9Q2/LopWHpRtmKX9p9UmS1BqIGGWFfEY="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.169.cea6ee1.0_1589829906452_0.32998856545169897"},"_hasShrinkwrap":false},"1.0.13-canarycanary.170.9f02d46.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.170.9f02d46.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"9f02d4675be323f94a38d8fd41193460110b2f7a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.170.9f02d46.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-12b/oe3FYVaRi3kRm5s7gMFT4kmlPnaIyA0pgb0fgw1lsLYSLcqvPZnWlwZs+7jjsSHdDFOk0vJY7yTOTKaD+g==","shasum":"4394aba2b153d86fd4c7bfdc58e1d65c2a38aa0e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.170.9f02d46.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuEbCRA9TVsSAnZWagAAUGMP/1bokSa+8L45Xw8v+Vl+\nSO6Mh9JX3jWrGH6Yxz2l708asQ0WnzWgwbYjUyz3cT9Zyw3RBgTd/8xM2yk7\nWaA3PelIO00ma1MsFNNykMoHW9/nLkxXG4a3BtIF8Q+8OQmghV5/v9SF3k/L\n/jLS/Oc8XBVwDfobm3dPkxAH6avRGKmo+H/G6jPFUtSwta5EWbx5wcefhcj5\n2vAwe0BbX2iYssqlQhu+lTe2/uuzdD0oZQ6I2Ww39r8GbhTt/AJofskExsqT\nUqGn+ikntWPSXRN03+lnlYuEPKOS9k4BINZRpeOqxDfSqaGiuTpZLxVjPyo3\nMTtQ3AvRCmAp4+zCdjy8ZpIxcfmFSYx4g+vpoJl63+QhVj70HlAtaggxrdHx\nzSRfUDtJjDs3ufp8cT3Irph+D8Z4QT2hz7ERXI4SUD8YgKG24r7mm8Dnx+jy\nghLwHPMkT4HS68J0da10LwX7A9YynpziGhuBWlQm6VJgcpI4Ou42OiLEKurI\nA+7nPYqV4TOaLmsACVyAETUib1lgxKq3nJZbzhjiO+9yKX2p1eyNnDOc81+N\nj+tHf/I4hBrszYRTye1CKv35ULKycDUlf39o4f/FyYuMxvYWoW8GoLqMOT3C\n8UB8bHyQlWAVxn1QSGlvWCOJRVD6Opzp6CP23BW6N6pkmMxaNxEW/83P1vlM\nfa0C\r\n=VL7R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQkHlKgejiUyXMhkdUU4ndyim5M24+BEIOxR//mW+W0gIgOgkTi8U9a6w5rZyhShtxIKu9ZMB9iJ1rUAlVIHYGZT8="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.170.9f02d46.0_1589829915237_0.4412862038517249"},"_hasShrinkwrap":false},"1.0.13-canarycanary.171.6218b63.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.171.6218b63.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6218b6362d54ec4c7629e4177aa31cac768d4382","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.171.6218b63.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-5C69EMt9bN1Ms9UaRsHhVZ4iLTlxVL71puNUgoN/OS/HnRYAE7JQZrVzGlTOGL8ZmvLE93YwF6BUhXobnB79sQ==","shasum":"5d562bd992b89f3d1816e617bfc6d4659a6168bd","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.171.6218b63.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezCD7CRA9TVsSAnZWagAAOdUP/j8EKxRNc4TD81G8sejU\nt3AVY7njw/RUeUntbrodu2qrlLwmcy0iG46y0g5wmCOMHtQWXvhsTj2vZRrY\nh+JPVMJeE2uoQOAxKcCHfxcd+ySScmqyV9UVz7atPjexPcyhvwpI8g4MTdY8\nD5ahMDzaw+FKRsa3NijZfPGb9Fm7DBhvmm9lwq5FltDN8TSJs1bYihauItmk\nwJShMoxjATkR3xdxz23isfFvHCw6JH8JDDZ1C8yFlOQ8Xcs7LLORsd+VEtrb\nW2JiNhy9uRQvw2GNkaoFHdxTmffmMlt1hfyl/Ih8piBWpJMfXj63OEzfOSxj\nw12HEaIPQNKO5zBj1mhiALltDKepBU7TlT0ak6pRjvNOJBaFzM5mO2JM9gYU\nYT/G1slscrga/pLgI9YpzmqjQodGU5Y4pkdSLP6xLOtCVCLXwGI2jnXSVg0G\n22qiFlWoApnBVjtwu6d41grFSSjAFi68kCz4wuxzj88Gwnc5KLX4Omzl2xpV\nRrOVVaay3UKnN5Kl3OpbIRimuLsOieYNE2rdvN5qcBdQhjvXcn2Q+sX3WSSr\nkQ3BmqLyuUuTW545gfQd427CTvmdoZpqk9LAameu4Mewx4+AjmYVmNqWJYUO\nDHi+WXR2QEmEmFsPN+8ZBrPy0aOleOe1I0RPkWvS46qly85GYvJXMx/t9y+4\nHELK\r\n=4IaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7fJ34QZDpKVx/klvqmoonfF3RGVmGrnhA7+w32xOvtAiEA74rUT/Ffxf/1OhFbVvOUMnCtdAVoVvQAz3nWMgnnYBQ="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.171.6218b63.0_1590436089336_0.8580368934437037"},"_hasShrinkwrap":false},"1.0.13-canary.172.1f25eeb.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.172.1f25eeb.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.4.2","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"1f25eebecb8fd8f271e054ee8b8886da95d85ec0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.172.1f25eeb.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-dA6ywsYZuihfHekfS8D5ZBRkg4MxJuwJa7PZYWcBpdvut/IZagqmMW0MdrqNjqNnP74RZ5YDiPqi92VaOuiBKQ==","shasum":"6e68a0e971b27fa9e0a3b5a81a80e63135abde7f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.172.1f25eeb.0.tgz","fileCount":162,"unpackedSize":3114494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezCGBCRA9TVsSAnZWagAAgPkP/Ah5ec+5T3e5iBt0yP/1\nelkz7jLYjk7BPTdJDEeBwCm7P/i26Ih+22RmvZLWun4LNrcrHQoBxQ3m67VE\nWm1dQS0NaPe3slcfpbHhvGWD4GUmuP9b030zBT6AmU0/Z/Y3wClD9wukX5j/\nRk53JALVH3yW6ArNEwQ/1FVmVNs2VcKcnNxDi1/F5VfL3IW7Lu4r0A/einzr\nJTh8Hs5vb5ymSeIYocudSFdmq+j0Q4mCPV0t6/Up8Pu6PCnJsx6rufV7aeTA\ndr8Yvtuhs2L9DzLYumVElOklvJ9//ySBlUm5qL8At/pKjyfmkEhCU0B08skW\nx0KDn6w0oegtVNhph0sWPgXfNbTdQFPdmFAKSTKODN3/q6eGyQSinrrV7/Wf\nP7NQPVel61H/boDRHreoILlZcGgfDOguS5rWN9IEfdcNJ8PzS9wqnYH9d7VZ\ndbPEnEEydBPDuNaOJyNfQOBMIcoD8SIukGMlPvnzHUu150CwDFg4aI3Cg1G4\nigElhb+EAXdo8uuwaVsgLT8u/nIOgrEzGIb2Mht+EUZxx4jMqNd2cUSKAqwC\noh+PukJP3rGtTdNqRW9BFE3E1oN+PcYq7XbbFKIWJssWeeSqy8wcyTNTNQAU\nhZhyIVBjHaATn1P8yDlwVhGvR8P4M4RzWuDRs45T5jjgew5bTQG74ZsQbgAf\nYOMT\r\n=qT/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj41txXy8ojXZ3xXLD826I25F3esRo5wmQ9HHos4qlvwIhALASDjje8waJda/Z6Jx+HPGdqI/P0ev1fpMeL1SIvWDk"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.172.1f25eeb.0_1590436224371_0.9652123693568424"},"_hasShrinkwrap":false},"1.0.13-canary.173.3d0deb8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.173.3d0deb8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3d0deb897e78d4378926fbe8f5f4e9145d17dfcc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.173.3d0deb8.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-ikFzTQ/D0f8wZrHZzqfhjLKwIs3WWB40LzvlDUmOgAWogj5RPvKj8bnQW6up/HzQ4aEoL4rhw80Gqx2yYpMWpQ==","shasum":"937959e93b29c548ba65bc6b688bf0edd842c6b8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.173.3d0deb8.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezCLjCRA9TVsSAnZWagAAEFgP/jv1GkXaOjYkHudxjOxD\n+DHxEdsuXf2nEWUu6lLPNzkhTzFHDmJVUxB8G+DPnEWWMA4YeY7vYzKkIJ5O\nOS0XvCv14D8UJ/sCBTPDs+023cSWRcOELTiyw25+5HQpUiBlubRgzPLBfXNL\nLtDTfFj8JM70ctUyn1DxBNGh11dsB32T+WXKezUZgKuXLU0CerjZ9SD73qnU\nq7Sbb4RWJKlyN+NvdQcVrugyXd+gm6NMSBrecEwaF1aWqdB7/KsE1be0evtF\nmbbUsdStVKtlsim+lC36wXgYnvTdgB4EobmfZ3w+s1LCL9lywZlm5jWnDq+l\nnO6HyjKsmxOyCD8/dkXUFy1lRh0VtltUha+Qy0Bt+B9A3FDmLa6lVWxs2K3O\nLuXfnHXoLJ2IT/FfHFkj9bCX2FJxSFjI3/UM0lKCGSV3alCXV6lgyWeOVQrp\n53zn5WmJlfsQdP4BzI5PzcBUjhbXSyuBeDU4EEiXNutdKGNbwmA42MAaljyc\n1d+QO1yZ6iS5VhwDv5hJBg+rCvD5TiHD3VwDaWH+gAtEUfTs/B4BxUjU0Q4O\nwts2Ogrq1B3h7X7SYLgJ2m9lWBTJHrHdeqS7E7ZHvsYM3trHq2oJ5EcHA/N1\n5P2XVG7XWR2qmyi6Ckv65P52xJ7nh/MEqmrZExp/YH7eil3PMf4i8p54PMu5\nOeOn\r\n=5n3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAcQLY3Hyrxc4/YGVaZ9/YiYm683dsl0lC012mE2bOCwIhAKBVDZf5kzWQyeBltqhqz4ixVZhqHnSXJOX7Jf/IB/zZ"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.173.3d0deb8.0_1590436578817_0.1763156350615298"},"_hasShrinkwrap":false},"1.0.13-canary.174.faf9e9f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.174.faf9e9f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"faf9e9f72ee923ce88a5b589dcb6954a3a8fbe52","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.174.faf9e9f.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-sZHzkE+sL/NmcivB/JoYdNqE4VzMm4GBF9LEbJrn6C1dzALWchXo3vtSFUog+j8TCs7NSXFvDB2kzqHgMcW1sQ==","shasum":"90bc1791c5bb2871764ab85533b9ce32e0357dd8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.174.faf9e9f.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezCMoCRA9TVsSAnZWagAACL8QAJ1n7Dz4vvOiMmY9Ohyb\nWPjI3YUgnOz7U4xl4L46NS5D6v6Ai8RfcZj5c8qfNK8+QTnd5KjtH7jq8Gcg\nGP7YhYCyK4icyOSo2NOftB8HCmjVeubP5zZxdrFsHWiDYoWMYfUPlIs7wzlx\ngzL30hiZ8tsbv9+ajfFGeUMVaIr+n7K06hsqPiHlAmHA4K7f7+U24KVZ+NeS\niwnh1nQmqwpTcCCGnsahMaIizEqJFaP/BBFQCLBFRkmzGAeMGQa54+b2SrNQ\nTv2DrYdkFLTg/v+9FWu8bNFf/hxEXCJyK3p7PB/ZnqQSYzW/SOrGvz1HwJaN\nfSF57FucpHPRPSpm2d4wi98cKCs9qtAaGv+SnKKisYTohZeOvJ1MBfVzps1z\nCIvDo1Fzrtv7jhM0AOxTU6NzIlKNRNcSVsTi3eyuff74Fkrdul6XuTSmKFlh\nCymBcvLg/8xrDHgbzdyXBUjWtb0Ic1KQUwlDP++IRpfDqvui7rWDD0Mqq91o\n6qw9LxD4kCN5RUtFsAph2R+qrzluEdt2EVSQOcniGRSaHQqP9QChlpEp86AU\nEYsua6+L0dA/obhHMS/GeQWuZtJ7/QwAaArZbesO4wjmuxoXj3lhLCOV3xeJ\nx3+IncaxssbaSgPXgoTf3q6z3ils4xQ9UV+wG4DY0b40IxunlCv56bDBqHhH\nGAl+\r\n=r+gw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFA4uewdoeFOSctCHYwVZMFynpA2m14omdP95woB5F2tAiEA9WCEfbTU02xO8nU6raAAbkG8xAMKvaDQ2F43sIQ1qfE="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.174.faf9e9f.0_1590436647951_0.6227567144754256"},"_hasShrinkwrap":false},"1.0.13-canarycanary.175.7fd2bd7.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.175.7fd2bd7.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7fd2bd7835914b0cf8f04bae5c0d69185261bedf","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.175.7fd2bd7.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-1aoapt1xm8NtYe2VJK2A1gCjzy/WghWx6Y9zxSaODXhuauLglHcu+IkPL58trmSzOGPPQSbnaTlM4ClayVlfFw==","shasum":"a2f7b6249b48076fda8cbddaeee729bce2b4e429","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.175.7fd2bd7.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezCPPCRA9TVsSAnZWagAAFXMP/Akfp2/zkHOhsIZ2xaZv\n8zOo2m/2z6fMk7sH8DqF5x1hPwdjLXdr/spm5g2gPgN6nOrb3HhL8GX6CH0/\nsPb7h5thH7AQkAKVFpMvvTm2dmj+jUMHKCsJf5iLEhH+TEtALYZebaRp0g8x\nl03WrpBEuRCtPFKe4PALy8LVO7CWIP//EP2tkSJFNvfYhcENhVYfHOtD3uSt\nTLcQanTKTO23xBHGdMe4okrSbeJaKMhz8BnEP2NT0dQZoJ8z37GZAOSatxxc\n6FhDNgAodSktYoN8x56HPvyvrcUQppn5734rVAaX/bs0onu2iBIRUyPYx064\n106k2lwOfI7B12xs5l4X2bCVk5TOt+ID2HdGnmjTq1q5YN0ZKTDqw1ZEb6g7\n5HMNdOdZZrCSFuB2lCVtX0ViXO72bY2Zh5PgHd8yE+ec3RM7JfU/2b3t2879\nkgAzp/xCy0UlFjC8tQgAfH54o7rfhYJU3HIV+jLzp2MtM+QsWkfhj3BRej9e\nnv60pOJ2lZ72pOmB92IPZnreSv+k9vfYkmmnMu7WA3AEKlNmns+lne8RZB10\nSdCVYg3D3+HnS5kF50pMA8HG70pOZSdpMnQDQhSXqZuXTo8RozgTyiI5HHJn\nsdgEArNRxH30Xymh8A1QYwXMZqy8ugxXxCD+sRx9xYQkoYQeKs7OW4vE0vet\nKrVs\r\n=i8x9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6l035cX9ey+sVU7UnhoYjf9VPpyrwF8Kk4wxtrkDUYAiAtFC4Cf5Q75thok49dQY2RvGbsLJcHPEiEQD8Uroivcg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.175.7fd2bd7.0_1590436814767_0.6088239534874518"},"_hasShrinkwrap":false},"1.0.13-canarycanary.176.f00ca93.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.176.f00ca93.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f00ca9309611e38d7d6dfe6615c7b1495bdfccea","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.176.f00ca93.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-TsOylhrgRfsiH2TXwLUM0gNmZmA0LNia+AtqB9VHA9DpllpYw0/9cqiRo8wpu8Vor0xrotOYVui/asdtduI4eQ==","shasum":"a2228bf6cd05c24ee8ec16a9640ca9f131e1f80c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.176.f00ca93.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1XgjCRA9TVsSAnZWagAAAMEQAIkXjIQSEar5aqJUzeo8\nM8RzO3Mml0VAi83BO3HBBBwPWcPRqTmTdYqacX+uZFrSUVS0bkGQUR+G++uz\n+XZIMuKN9TPUeXE+GeU4HEJ/P0G9++MrETh+WxaMM8uuGlbdKWkrTwP3JB5v\nZBR71HzBB6U44kq5OFWR5Rgf3s3vFRrDPNQ8KmZWenCeokDEJom2r4Drq0AA\nqaxyKqpQUicEi6Mt9A4Xb/lPw5zdh22vvVqjHOnBej/DqT38IB6PK9mZSEyO\n7Ll3Mp3I2xn8QIi6X5nzesDBzgO/GVteyoNX4OGyXMWndDvwDaeHzFTYkCUE\nu2p+Y3qdVSbmeyM2JKz5GIYuVqIeEmCUUtJcRyEzkkNimpsH41RdOcP+TkFK\nHvlX61Y0O1BIB4UERT+tUR9hnn/f13Hke6SwMzQGQGLaKMLZgZJEEFFVUAbm\nZXXTj8YooF0PIjNctP2MQ2jLfMRAnqNPv8YTULCeSLj/EnNZt2ONZGq8Ouov\nW93kEYzHa4NPxHSEr9fLaCVnkexLlp1o0zdtOB8JTS2Os5U0i8qM+TP2wZgk\nNMXoXLXTbKNXG8a9GNhjfWSGtfyIlW9SzUMoLA70545/xVUqnLSAAn0wxVYR\nqA7+WxCzjIKtuneg7Ia/EFO0yYB/rtcbKHPzN5u+Vgms1iEFYIzqm3sbmvyO\n/RBb\r\n=C9AH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5zK5pHILruXuEKkqz7FXj4d+cmULE8boSfrP+7P2/MwIgATDihDX56xmOfil8PPLAHgc56I6qq0V8mXgQANMC2RI="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.176.f00ca93.0_1591048226505_0.45679312688274987"},"_hasShrinkwrap":false},"1.0.13-canary.177.d75a3a2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.177.d75a3a2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d75a3a211a1133c42974fcea2ef21ec4443f63fc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.177.d75a3a2.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-G4MY4yTGvf6JhD7wvQamY1eHp6fE4+s2VRDYt/BV2oUlG1AGXMjKrX0Hr/tDx2gwqju3NL7ZTU8zpI8BA06Ncg==","shasum":"c385ac5dc15671ae8ba3b92e35a7bf01d1cdcda2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.177.d75a3a2.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1XgrCRA9TVsSAnZWagAAiDsQAJGeWHd196RO9L6Iebit\nGkylbGyCt0qLgyYj3zvfoOE4651SQm/OkjnP1MkkTTpaPuafv2kYracceeno\n3oQIDmtnWa0JdCNeY+82JtlB5So4HWIXx9xCMtnhOyPwok0Whq1oUD+zTUOc\n/Ou0MceinTp4d7bfD2lNUNB7Z01KaJd8x7mg09kpPQFzLWowkSStoecmLSJa\nRTVambeeSj/qOtPG+gAidz4MASUggMK7G2015T2Oec1LBZOADDBdxab6K3k8\nUvj/F+MJ+oTjcNKdr5RZOqkU8LCLIhs34NFUhO6pxppyibp+NYmsr2OSofyT\nwXg0hNjxKeaUt6/1ttmWe8FSmx88LMbURn4J5MFcRf0SjscNahjQH9CQ1S83\nJkR4qi+M/qGzFr+ifmVbSIpt08RAZJZqjeVI2t+wcNAV1OEuGg/XS4MxI3wU\nl5Qlmy07qYfv8bR1OLBfcTTIiW3bPiOzi1JIO5sUdV1ewi3VCsq6G4MhYRnK\njbuYJrpwXNHbg2fRE6QsdnwMfm7oZuq7U0Xwv65SQKJ5+AFpYkEM7w57WP6g\nuOgKdZ6k0C5hEuF0gMb47WOOiBXMreUNPQCTC/6d8RPGZxw7cQAeQO/yeK5f\ncCys03g8yAfqsYP0/i6dW3VUyf6vwahU/cewN2vs3S6a0sxuPYNrroQP6Lqq\nXFMC\r\n=V/tU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3DbEuxUBM9A8LkjKF/Q3imOdozlL2RQErtHfm84hlWAIgLOH7KK/1Q3YAajnxBwJ+hBxk1P+9QPqYbhhtJbW6LRM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.177.d75a3a2.0_1591048234975_0.490209933434018"},"_hasShrinkwrap":false},"1.0.13-canarycanary.178.0070dd8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.178.0070dd8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"0070dd82d26d5adb51eb5088067cf010372d465b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.178.0070dd8.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-cjiqNq27i48oZ0Jey/A31f77DxyT09Z2YbajFIo5CTfY7nGZjrLpydae1zQorvmZ++0fEYPdtt1v8TTFgttBpg==","shasum":"93e34fd167b193428877c3af4a56a81e6159d350","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.178.0070dd8.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1XhfCRA9TVsSAnZWagAA9RYP/Audsjzu65EzfEnLxMHv\nKnPOz20nAzQRLGRJEut9v6cUIkyzC/HAJQWTSVtvEP0db/XZRoLUXPU8YLt9\ntE3qL0BA01lDPO91hGruC9KYqQSbHhqcL8hAGBYGxhrRi10kK4uitLQdmZ72\nRkjm1MGvOcbo5rSUQ7mkTeFIoDf+uCEJGoKGeSxXIVbCuch9ulSzjFjO1Amb\nGRRsbIRgDgseeq//rnd3LHbEk9kNHn42QngU9xE+NoVPRnzIyomf1VdD8Tv3\nVo8uIgQ/9/BwJwx7fZJQHnlrYWUrY/NDoNzpAbTmi86evtMnxUi05BLEnLxp\nJx5A7L7B9KwFCtjNzNnHz1qxjgctTUd7tsyILCd3czpIAzLl2ITBjwXpTJAL\nVzFXfNx6WDGjuPhkv81zWlFUpS2kjidMW8H8+Vax4j64FfDK5Ot59RNRfisT\n9SNbwhXWYA47ssh2XadxRm2q26CrntNl1WbtWPEI7IcJmh+1KJNWXxzJPv7q\n0Y+dttdSNl7+cQesBUGEIfhKnt5wEtz2m7rknjL4ePpzgAQebtQeMKzCLs58\nOwernIg581rtG5Mk+TNXpAXuT4aieVlz47PIw5sN0nMnqlRvv09MsaWFbTg4\n8KXTzjISYZGWD2rnFCuFbh5Her99vMHLMpSq95JBekSPcPeln7WAePcTDTLn\n8VZS\r\n=uZEn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3garNavWEmRcimU2aWe5ttyu/XT6xBhJS9Y3KtUaEOQIgYfPym8wALn93O38lcHOVwu75KUZZ7suY/s64ou4FFYo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.178.0070dd8.0_1591048286782_0.47447711629598865"},"_hasShrinkwrap":false},"1.0.13-canary.179.d3d6621.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.179.d3d6621.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d3d6621c7c2e6898d1a07c4928c6ec1e307abd42","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.179.d3d6621.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-YBI7j+ud2W/WW1HqXn5zx70lLXd13kOVZisMttTOR5MFpZ6PpAxCrUyh2DuXiCZ/hUtEiUayqnNtNnedUw/e3w==","shasum":"08fb23bfbdbea2d11f8217f78c0446f208aa6738","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.179.d3d6621.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1XkLCRA9TVsSAnZWagAARswP/34KAQ/IXPioHXGsg7Jm\nN1h4ziQ1OCcdp13Yj0kW1B68sAPMsmx9859ET7WEj1qyRP+FtAsql4GCjtnc\n6SAd0Xv9xSZ2uOOW5oKi7JooSjzDGsenHbOcqyBekYM87NRqvVDZ7ppH4KMy\nrQfKbbHbJOBxLXgMQY1fQJu02D0GywNn6aW61wNdEVhi/jfLALR9TAmhsjFa\nYSF7IfB7tnw1g7AfN0AO2y1H1Xq0S5DY7py86BaRqnUOQOwpVs405DMOTP5X\nt9oaZ9KnzDkCnNg1T/GP6vFPeYcGtCCHOvepN2UEWcN7lAHJiHuKKNhwt1cZ\nY28i0odnIrbBsiYdB4KlRNdFOUfSxebhqSA3gGaQZcO89JUqYVqGveeX3/UG\nsPjdZsW94D/vL+Lcxtr0xSHDjUnnutKWBOwpieCBvmR9HmGNvsHEQ2tuw8Tk\n/wTInsh51dSYEpzVa3VRzwjvIFlc/LpTW6MLoljgAEUmlSaIAk13aWA0RP50\n4ClU4q98farq+8rOUtGmhMRCLrORgOx3kgvQyyrdX2aBaYcZQhkikuIIFEil\n3D9zglIw4C2xnncl8wL2KMnIA18PAXirPFgOFK+eOXTVisonUrpFf7IhP8iY\nG12VDeuefSyv6pDjNTTKY3mq2Ha4I4ontrCPMiRFiW3w30sl47EIxNRcOSwN\nXuqE\r\n=jYkw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwOcVunbM8lNA2j45KTGj8QxUFjZvKOAwlA1twJFDI8gIhANKoohJDPLKrWGdqR/z6qGGFmIQAXipZpdjJlaEAxY78"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.179.d3d6621.0_1591048459284_0.482493613884742"},"_hasShrinkwrap":false},"1.0.13-canary.180.62ddd01.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.180.62ddd01.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.14.1","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"62ddd0191628cd2450158b2c3f03a42b58fd6ea1","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.180.62ddd01.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-8HQUyF0uRlERyAs/CufcwR/L0VSPZp1aUimw3QQhhCXAe7vtYEMvqP1EhyLrkOMaFVk47bn4h49cssCNT4R13Q==","shasum":"c864d03c383d1c73d0fd4334183fefa0b6c59b27","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.180.62ddd01.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Xq/CRA9TVsSAnZWagAArj4QAJLw1yoe/Rl0IQBIW7sM\nn/00TJRKiwVE6Q9vhRMpJYV3sV0oYtAGPSo298Q0mDncHaqcutv0iklk6UHJ\nJYueurFclkXUK86BaycQZW8Le1xrq3LUGWZCLTuRrhU9pXMWFzANrFEDXw2O\n+JOSWGT3JDhIYbTABX0vWaizI9PUH3ij1CBRJG3yjDg1k+IyAjwyyf5S+TZ0\nFdQfc4ynHvCRhJyhwlwcxyz3wufWSt+KVYz5o7MhOUskctck2JRcB2pvyvNx\nkSXAl0LWIHyTIESwQEIty8IyGZ7HDHJVX73MY5AfZVMswUHQmyiyrQPCHgVF\n67h9XAQEDvFK886RoymO9U0ZFMc0eG+Xj7UC1GxPAmIZHU+Wc08tnPPNhaGi\nZ7aLCK8fv6WmpkXvcyvxW+Yb5SBgZ82rxyzDxgl1FGayH+B86TOgicW/9jKR\n+G5r+g87vmGCv0h5p2TW2mfX+L+/bCe/r1FVLY1/gcMK4uPREzuCs6dj0d+J\nuylQ78cA6rzGk5n50LtixE/b/TJ4CNytLilXgIw14ylcC2fSZujVmjOepEwS\n0bqqxUh0zzYNWtmw6DtLSpZbiIn+rrGY4kMiWdVguU0cC1UB5lr/z2z0Ufgm\nb5PtFWQYSW22DOauxC61B3fWKm1bJO2pu63rdYYZrzkB12NNqufCiz4CsYlm\nwyR/\r\n=B3NK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGybfuED9M5RlB9ijYqFwBmJoCpmRHA3yanr0w0Gu+DVAiEAz3pzJIJU6bDyxFBCoiz/hTHOxYR4pWMwKABEtOX2WBc="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.180.62ddd01.0_1591048895195_0.19617808317301555"},"_hasShrinkwrap":false},"1.0.13-canary.181.2252d24.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.181.2252d24.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"2252d2424611a93f345b86e966ee66b49a2fd784","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.181.2252d24.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-SUpuZp9vKJ7XABc0nGhwOs2dpUKhFbD6jfCoVIdkXn6KVZSfA5wdOCRQjoC255hEl3/qxVVWLdCMeALgO/vJ0w==","shasum":"3f932f3f16acf1c4fac5152d87eb0a927adc4d2a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.181.2252d24.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qc7CRA9TVsSAnZWagAAqkEP/Aj6oLmQh6BzlJ1Rc0Mv\nhDq2uZPoKcHizjoDujfRo7KXY69sA/YejReNrPRQstoJj57UuY2CbXV9y2FF\nM/AZCihxhS3WsZRbI+PQARVzgKGt+Iuv+plo+WyXe3mRTV+hx25H0idRbXg5\naOcORMFnZbgAo4xVg8QXxtt9uZ0SjexlZBO5sf80F3BVfYQgMwDN9WjsPcfS\n1+LiJljjAtg8wUT2Wq5Sl3PVayITX1qx7wGnHv2NGvQ7edeRGPv8epkCWtTq\nqY6LpoIs1/y/ZqrAyCJhRk3dGMOS+CprZeTp0xJ46LSQN1KfocRJU7zQZZMb\npbhjs9WURu8y3VMXvFEh1sa+JQ6Q84oJooijt2nWgLeEWiqS7KXo0gDTjOsL\n5TqMeYwXrI2qIZfTkq/xAwaLMnNCcnHFTlZGDJy2twtqF75g9Y5YxVCTmy/G\nXE+qL/AAEvTpDQ/4M+sUOHO/EDoVJ6JU+ZiuF6LwNlBJP186aslKPAGTHNMS\nQsWRQ+uMsPLgfm0DdjhjIl6XSH6L/wDRq2Pwi82e8OQS76W8YsTeUldzN5Yn\npuLWKYvBsGLdcTsswtGOtvheAr3e5YpxA7KIw55+J51RceAYK9lMnJTbF1MD\nfdkEotAHY/eSCvDVC6iVBUajqbxxDQzqHch6kX+aQxc7cBAnUwYGY7LncyHX\nAc2E\r\n=0uF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDv9rxHpWS+5CWXhx8gEdmnn5dMwRuQY4IvjyRdFFWK8AiAvykPDgr7d3+mkPtFqrlC6NfPQVh97ZT9joOeQcc5V6w=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.181.2252d24.0_1591387962306_0.810342240129809"},"_hasShrinkwrap":false},"1.0.13-canary.182.33374b0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.182.33374b0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.14.2","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"33374b0933fb2e9dc4b8fdfcb2743bc21963beb5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.182.33374b0.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-eUNllML5QXJ8aNG4bvBDTTAOTkNjAibl+ZWNqb4EvuI9ofDhdMTw8ozopodvOr1C5DMfDbHWIbjU4rdY40dhPw==","shasum":"1b9b170096b1e990335f515b167a1eaa76623b2c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.182.33374b0.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2rG0CRA9TVsSAnZWagAAGWcQAIxW5PTUtaQjtzoZm4g7\nHOqJ0xYfsJHyYJBtea5P2N1MlCzkl9ayVFmk0kIcgpe/NHSZAeRbP8NMrMrY\n9Pa2JjCjCShov7+Gw8T8rMhHPBe86Le0gMUsh1yD3xpx0YH/T9TYOkDrz10B\n46Ff5xaIOS4RPGVEZTnxz6GBWvl26Ncs8W4Xuh2bM5UJeEvAUDrtWor79+9u\nr5UOj1Ce6YmWZx3cldVqP1e39bwigvo2++evPOsgfVO4W1ubHf+47Y7CkABO\n4IGFcBFYDw6iMbqA+35TydDxyN54tD/5ZlzmVazIxQ/zovN7PVYW7flquOII\nRak1o3+niId3Gk61nLqODa1Uvcw2ngP542ajz4CXNXdG+BZ6sQEzH1r1q6ry\nqK03N8uiqXHZTuj2TtDTdJzF3olruz2cfcncUrNrUZZMeq238m8SzDUU2yEm\nzHa9wESlg2hFAXuAkDFztSW/5Btwlq1oiRn5OUmAMYtzogrcZLS3wyNfBdC5\nwIgOzSNpAUjUpV5pjycgiFfJLpY/lZOVrCffCEveemUfcdPFJrIxPj1frUBI\nPa8KpXYRNSKplL4QNmYUZeZETQCkRYSbq74/Xi2XL/CDauBcG4gS1rBFVOSJ\nxTCk1ftUpp9askN+eNV/wSj5A+m+DTFxEF2M7wzfMJvuk5F1sG+OrVJg9CUx\nmaeC\r\n=jOPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcGwcwUgcpJYs/921elw0pP5ARRbo9zOcgEO1GpS5cOAiEA7YZudMJ/Fv56AznygeGjEy4QurD90ZD/9R40BeRdwD4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.182.33374b0.0_1591390643577_0.14735397112630366"},"_hasShrinkwrap":false},"1.0.13-canary.183.cf34dd2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.183.cf34dd2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"cf34dd2d90289fd97a1cbe1b60cbb1d9bccc2137","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.183.cf34dd2.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-RBaaWcrXPSZ17whlaNCaNujMiN2Yqh5rV5U90U6j0BxzRWQVpZe7wrkq//M9SDnPNCZ9kM3iV0vGEgofgPmmrw==","shasum":"80c4630c1ff21037245aa9032c398f1b77aff62d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.183.cf34dd2.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2rUjCRA9TVsSAnZWagAAcBcP/jRdizrvjhtGNMJoxg1o\n0o0Cu4vmLfvGImNE2BYYWX+cmWHKwsS9cxneXEsDuTw/gmkIvJOEJEwgygqf\nHXVTL0sgXrkMBNaX5W4GnDYBb3DvRehUwndKLbJsMb53ej/3jGwnUNQk4Ith\nENqgI3bECnEFOM/X7Iqu7gtlBtOt4VwqSHugRK/FMSSxaQdfTiyrn8zd0TW3\n25H1Dk8jHlV0J7PrtjYWkj6OOwldCTFr+PPqSNWaY/2/KXckXrhr2HB8hjG5\n7DsnzOh5g1kj7p4ta0SH7McJmQZmV/+uBqn6ZMSEVEqqV588004IV/nMKs3g\nOT3NlJLF9PNnZ2m98mw5mdssthWjbRIHB441tedOLFZiwngrabLsGkJqe156\n/knUEhFLNofBB3S1RB2yJMhxI4jtbHyxWYgXEg8jwVn8b2PQitpoQz6mHC53\nlsOv269I7SjAPMdKoobigqi48VJye8AYWDYS1sdiFFX9puPahhVFzdOD1+vd\n24CzkpCzrSGnBqCxCDOcwKqXEo7g3boQwwA3i4Ys1h8ACToVs/NW4tnEeXHI\nr/MfElvSm+cUt5DXbqEuc4eGRA3AK7cUvZEfKCmTJy49HvzKsImJOWgiLAS6\n4NFZ7AkU0NWt7mlrh15GYe85ULG8uSibTK+ZEJkyDs2lC8+tKddH5hNdECdw\n+H/G\r\n=Wt7a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQbmRpuqhKKUX0hcWdC54D4UQ2keIijxvoWs6sS08EZAIgNfMOLR0CmPlYW4zAR22RrQz/tnUD0Shhh6y0W9OZjVg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.183.cf34dd2.0_1591391522845_0.36522266390470426"},"_hasShrinkwrap":false},"1.0.13-canary.184.eb851f4.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.184.eb851f4.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.14.2","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"eb851f46019743c6bfe921a3afb2c55058c12e44","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.184.eb851f4.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-ofctUGoeV7PVxvB8fLfG56XB7nBSof6c2LMO52ZouHGK/ZGaFAd+fskRnI2QsRDyY6cHrHWiPfWEhIm08r//Yg==","shasum":"80b7cbfa54fc218fef0023b229066454fcee0d4a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.184.eb851f4.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2+GfCRA9TVsSAnZWagAA1ucP/1sxD4Vs5ViENz7AqMf1\n3Th5V5edM2vJsDjzXrbRRcxoEDtbf6Q3YKbxLdOYeB86d+fGsK8ynhVoM9vo\njJahIEHPu+C7gZbNiCiKWbX7FXbCsbZ+fogqaROzkvUt75wEKA67DH+5fFw+\nY/4MZdfH+9uduFOadWVkKUvz6dJwZjYuam/wBqJWantLqFncVnkyvb/hiAyQ\npxKWI+4qLMzmm2qLWaZe8Jv9IoJ+ELxv0bLFa0aFOOn/YG7xN5seanr+VeUe\nfL7odQy+xeWZH/K0fHuDSRR1FD1A3D2a9tt3RmX+ObPSoMOqmRmP2erVWsf/\nE2H350ZqJZmohkUB8+abq7GkVn8wLxKZyb7tM+Tuq/WxoD3nlyjaxm7LsdOx\n3+8uYNGr8abHr8+JyQqhiQJnYdGkXdEKRNhPfh7ZOjEZ/6P1w/1zEatF7NBq\nGms9xTdhBKlFqWTD8aawvlXVvoIrjJ2BLAmj0i7rbVZZ/ft6+qie+41S8sQZ\np5iHuL9oAJyDzS8CsLT7qYIvpY5zoU2BBGEdhYyVRdVHNOckiXmMt9elO0Ti\nz+/+m4gj0RUpviJxfRpZ9oJYqEyFzqZMrB+PU8iKWwTW/JfLSk8TkUVeCD2G\nV1Kn94J3mCDeRmDPJhE5hBIV8nYrZ0IHy/LfH7oJzNd747XnZGJmcun1GlN/\nK48s\r\n=Wz/g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnVSUmL8zQLV1R0TOkmvj6Q0qi2pBjdITDJNpnTyl8mwIhAKYRxmewOTafJ7QulkraWzje3GXgtF2VHIDOp5lQzE70"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.184.eb851f4.0_1591468447065_0.26605859618959604"},"_hasShrinkwrap":false},"1.0.13-canarycanary.185.da73078.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.185.da73078.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"da73078cf6b6323d5ee4fdb4deb1399f32aad22c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.185.da73078.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-olkR8WNFPuyhyTJF7jwWUYsV3vUe1CNg9asFtPrXsk6Wvr8mZBpR/u6Fh217OsXEMwlcmiPezaFtlFigPSMMUA==","shasum":"ab33b64f289b9cb41ada540c05767ae154640980","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.185.da73078.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qJaCRA9TVsSAnZWagAATpIP/0EGgR9y8nvi7PSZpw0N\nfQOmLOXi4p87uFRC749zSP4mml0ZEUUD8ffLSdaKReTYOJPEVkVkcV9+UcJj\nMVbElCAwtFUuoag95B+tY3ZdXqiEgAS03xoN0DdElQoCm9C01hR/Byou92Fb\nLiUR7DzPTztkwYM3NgmbKyOvdYCskVC39pFDWJ+J2vcU2JpPc7/UU9zzDyPC\nGQl+0Z0wphRbAYDOjFE/Lz44a+2y2lWQ1G0pilM0PLxfBIKj1QSSRRNEb0yd\nX992DGFlitTUlA0glWe38OiwQTLtdwxenCx3LzS+OCHGkxUUL7ieWkL7cBnp\n/4/z/xKPRzr6b1QljpCAoagMwMtvRZbUx9h7XjvwlIsYwkY9jX60BEohrW2u\n0MQ7EP0YfGXJcqkcJk6P828l1tNl+fC53DhzkqBe3PP10QieR1ik6eO8JXtE\nYg7PcXkkvGkDRPJ8ol8S4SUkfPjCJTUx6rDXBQYqwaA698fdMqlqEG+Wh9pJ\nYdTk7ntplCZcXMwSX2uQ2fAg5FiR3AMX6CjfzOLBLht6O9gOoQlN0OpXPVws\nJdl1W2lJfQqztrN1n6IEngS1XKYKsHKG2nIXnKVuj93lUCA2n89CkIBACI5B\nSTSdem8ZrddgE9AjyooD5nxIQ0C5NyM8bnVHIF0MSAyfVH4LdksSgQlTyfP1\nspp5\r\n=RV04\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQACWvo9o9I/T/oQ4hH2pEsVHoKS8Ji/uObgTmai2BfAiEA16WIFZ+Ra0lNHzBv6/fFcPCg+h3FgaX4dnswIasgWmw="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.185.da73078.0_1591648857665_0.7406667880737596"},"_hasShrinkwrap":false},"1.0.13-canary.186.52c804d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.186.52c804d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"52c804d0ae79ca341483484eb733f9197df480c1","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.186.52c804d.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-ob5sGPfP5H2OKgHPClqTu8JoWQVC+stUhO3bqS5nmbGOe1r6WuRPludro21MEuHbhckGJFZotz7rV4uJRPDjEA==","shasum":"bb765be0e6f147d5a9e0019c81ce521f2de499fa","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.186.52c804d.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qSuCRA9TVsSAnZWagAAhU4P/19LVzAogpM6ZechanP8\nPf9RnazIk74op9O9kXA4GK3dLgA4FuLSxScTWGzZWR6oR/Kb8v6pxyZEMpuI\nJDtBrEjSlQY2hbmGosxCQWvCl70aGWZ04nAkTsx62R4BqB4R4eFCqLZyAz8d\nmf6eWtYpMycTUTT5iTjICbscG8SCFHVClH024/NqUX8T1H5PT3NhO/Qg6e96\nta3sQIWjuev8JQ8zumoQQ23Bj6VnCFg2wQdyeinZI3Eh88wXLlKvJyX6OKEn\nK8XMJzmHxqUfxzRJdaatXOG1yC/mvGGmKeGkfumaO8MxZQ3n+uslBskVbuim\ngiNlOle/6G9eEErjXNzgNnxjOMZTmv7OqoE7oOvly9kO0tL7X+qBx8OnRFTV\nEaU/GqB1QlftvLgFj0qSN3F8SD+UYK6v0pTA/mGV5FKtKGN7QRKWYYXy4Dtq\nazXfWEBMkq+PGJ7eJc1uXTe/rBjZjDc+OAzMqNPZFRB9tLowdYiBIsuMwK5T\nQ6kmZhcLbXH4gvBRxBOuZ83XJ34AdDy16WBWhdc4GZOJWi7PyUQM+dascp+Z\nYzBQ2FYJgrMDQZ9nnULGmemx1Jpg7NxMQ6rB3PkDQ80XjvzVkUSGHMctTa+4\n+vAdVEmhxghAC5gzkS8rXCbb4l2q/vL/+i0kNWjGN/slkUZ5NPXBnQuiCfEZ\nTzb8\r\n=bSk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZBjjrq7Mf5ojMxFgYlacldLyOxPA9VDYJzByR/l92+AiB4DHUoVCXeDNP1Bju84iRb8QxI/hvQA7q6WN9+Rg+GSQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.186.52c804d.0_1591649453558_0.974223339861424"},"_hasShrinkwrap":false},"1.0.13-canary.187.695f477.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.187.695f477.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"695f47799306aab29d19bd9076ada00cc6256b85","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.187.695f477.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-ubnimzbAqCiXOh9HsVq3Rft5o6ZmaQCiyohezLq2E2K3MirKX8qL1pXumrtgxG4VbohOTEK/RQnop3iTyO6lzg==","shasum":"8765d6f361074a528c13d86c6b5f92e201122177","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.187.695f477.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qTSCRA9TVsSAnZWagAA9soP/3DbUvj4mqhQJNj3q+EF\nU/7pK+ctRRQmRkjSyeVWMZMOafqIkmbxup9bHMr2WAc3CQFJ7jy9SDLqBdtC\nhd0C2Mwh6BXNF2IAfr0Mqe3XbrhUhVcbUhAzGiIxXcV60Ha3KjTq6wSIQoFG\nf1EPt3j7OpI8Wtee40zPxWeeyqq29Zm+TwcQ4hmGYNjfzu03bV1TDfz4tdbb\n3BOQLUayw3oskvCQ9tY8fHbnudFJvkxW9lSDsZfoy/y/reaKcKm3Ex9pJP9I\nKTjQk0pG9+jj+hr5NqV1JY/h52Z069Z9mLDXbLntRn2TMh4dPa6qtKtRNwFG\nb4aBErFOjvuV3qh3jBqJ21l9TrYZMaRVK65blurxzIpyAmKSubFpjIhoxX6j\nYCzQwvahuRXjVfUKpmbDjWTjHfAQbVjwddz76gMd+N+RZFRkOAXuGvNIrUjX\n2JCrp4p6g84OnEyvyo4L2jdcB2mNoi11LgYjoKE45Ws3WUImejy0CFdfphFq\nrcHpEaWjzGixu1WjxCiN9Y8RSmCW9jQ5dgevnoMRY8rDVkRufqmzEgnXEKle\nNVGbpG5/K/dSSNQEmPPvCJEVlIKq2iCBVPrmCEW9j4OoW0jwZpAjEgYmrCOI\nivYjroYgbp7E/Lsh0ydPijo0/8c/b21AKT6mzaugxzkEnp9y+8Vzp4nE4AaU\nEpoS\r\n=Ihxg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRRdHW6nw0yAkcwE6wVEPDj5cLYFZUTnzJQBdHToY0HAiAqU2gaPS/Rp3ZO/ZBm/visB6zVUQT39P+EAWhXBNOfmQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.187.695f477.0_1591649490067_0.4910566038765509"},"_hasShrinkwrap":false},"1.0.13-canarycanary.188.be37ca4.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.188.be37ca4.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"be37ca4a1343172aff7f8fb713930c5bb98ba1f6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.188.be37ca4.0","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.20.2/node@v12.16.3+x64 (linux)","dist":{"integrity":"sha512-aazkw2wVQjHXMvQwgzBA8DtZ2C3InG4S8AXwjp3BP8M7vhHpif2joj3N8/JMhwPGHRo/yXAcBeydkCoRseimQw==","shasum":"c045344803faaaf065a16ee8c55551120e842dfc","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.188.be37ca4.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qdtCRA9TVsSAnZWagAAVgUQAJMsJBzSQRuZljOd7CYs\n34qU3REKmdlBYpoiOzF5tjU9nE3/f8HILo0/Ss50/DGnCz0/hMcufNFYJziB\nmQk4zEIuFeUC8kFFyXObioRQcTgOoRlrztL3gIdMTqXwgOxjjMXoC1nkBddi\nM88svUdLW8XnaAtZQSOhvuIlDZuDc7lgABk/LN9XlWOIE6TchuHEZeISxsnW\nysWMPcsO+72AK4kwEPIaZxqNMOkjtdpFUjGOPcPkGlTyZplCf6A9ykpHs6g2\nyvQFzxlKB6rtQFQtTrwaOEUsXW1NtvXnggcVHwiHLyVdF37srX4CxoYBF7I9\n+fHq3KsGbu7NjPTVgF1XZbUMbbAQ28aP1dYY51CeLWeFjwqTYbjNpdhPotLl\noX4MAdboMuijBKGGS7RoY2MOshyhjwwCSID3KI6I0MOwqzw9CW2EJWBsyeIa\nh4Qo8fLJWq911NqmsOX7gWKa/884UT1u8Y1fyhZIgDxRWCZJ8mtfRUG9KTDo\niDgoE3lx6A+/JhEO3Dp5NCeiLhZDo3HSuwgj70kXpsTTWA0/+Aj/FnRf+zwF\nXDrPotYMg/Psh7+8Xy72mh2sJI3KZ90neR6/aoLGBBDh0sK6Ze1LYdeeYAUD\nGAvuWkpSvYEvCHWh0KF2rCBFntxNw7PLt/OIyPa/DKIBUxLUJgTglb51hWTM\ncuAj\r\n=qOs+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQzVW1thaV3EnIF75Rx8Xo7kiEJBarixGXG5AAJ7pOIAiAaWa5PRULVy3b+xrbDsQhkYOoFm8e7mpll7V+HgfVqNA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.188.be37ca4.0_1591650156261_0.17607150990722742"},"_hasShrinkwrap":false},"1.0.13-canary.189.a0420bf.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.189.a0420bf.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a0420bf99fa1522c3f3168b0fc09b87c0f033545","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.189.a0420bf.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-2ye/JkGZqpUTcJmLgxn+nB6j0TbR62O/E08YUat9zoszNxCH31sR8zDMrckpM6SXFYrS9rqOpjLs1lHxfSyrkg==","shasum":"3b990568963e1fe97db79ef70ea3be9eedf2f686","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.189.a0420bf.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6CUhCRA9TVsSAnZWagAARrEP/30gBCOeMVEpTLKlimmd\n8Iy45jJZX8eQsLU1bheqb39iwKppUnxxiVwigaFghFUXxKQ0Wvu9jlnRYzLx\nyxQJzoU/juDWYYALjAYO3ppz+rkL1288upd8W+VduYPeIhh+U/zFErv1lCOK\n92n10RESSgCpq8Ya7SriaeWyfoPvZQcnke3B/ib+QnQS3ZaBLxBIa4Z8TC1D\n2OXKoKSIlPqvIfurV8W2eZ/74HsqoeVtbYKtWvvnYPLWYKpOjiqY1MBQj3mF\nX6/WRYcz6o+N1+4WyKDMNYVjN6J0IXkPgfmtjMKg/zE2VwSX6hRuvJkxgdYr\n1VFteCPVEvJGYUJMUjrbyX4N6wUVp1uMVRqXhzoLPUy8t35tryWFFUbpd051\nuHFZdWRML5TuxYXTUoa3v5kK4Waj4Ndhl7+6gNvp6sUV8PLJPyzWLFzCrUqu\nSHiXB/LfMyS30LVZzVk+bswjEdsvSwJqTM6VE7883qw4JzvJ8ACR1iExPt1x\nt3ez2UkPqp845R/GissGRGVKx1F+qhGx3L6QgstRxYiQCwg/T1eZw0jQeGr7\nWYsVPpZdn9MbZ8CJ+sbe8qa1MjD4BilFg+Es9897m2DQWDAS2qYqODID2Ejw\nQuIPPXbxKSY0yYKFwWhrc/tRl3HmIpmMhaEZMBi6iJeyl9fUDY7HhlhslDbE\nRCst\r\n=TFo6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjN/LvxPKZ5dwDpEfV3D5EV0+Xausu0x5fnowCJwTtSAiEA0ARyj7lzDUu4/H+290P8JMHQOMIbJrtazaDRoXM9Qk0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.189.a0420bf.0_1592272160811_0.9164510242753849"},"_hasShrinkwrap":false},"1.0.13-canary.190.188072b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.190.188072b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.4.3","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"188072b4bcf25dd4bacf991a8a65d1c9a5fbc3bf","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.190.188072b.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-ps+pwQO0vqPihc+N/8d50bzv0zHbO2I0FMRNi/zdESVJy8r4j66jCN0yETcoDLQ5SC+/M3k4wFOLTUw5BScdOQ==","shasum":"d1236a632bf0d4cd676cb47f7c1f07390696265b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.190.188072b.0.tgz","fileCount":162,"unpackedSize":3114654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6CnmCRA9TVsSAnZWagAA8coP/iOa+b6RpmydS9nJEB15\nnDEb9yU+shBeUZf4ON43lgxWWljhB3iTm8IiawPe9ZCBMvfJsqB6XAWtalyW\nkzDMpHSet5dIJry50kKlruCzvWs+GyzmNJy5bDFpBDojL3oyoy50NetAx8sX\nBW+k2ewCr15qR5WXu57yjOOogllRI0yoYP8bYthBjYwDiowC0y/p1Jpug6Og\nlN2pJ4yQ1U+93czPiXcdQnSsLA8yfGzEsYF4yKhMxqz4kEYNMs9A3qJO99mc\nc0sLW8OV/NkTGh0CSDfzm96WeFdlUw2KvimKqigYb3ASeQNFEBvC1yEpzebz\ngk3t3Q7sM7ZP0QUtBBHKwhoa+F5mak4Bqw+SJOd3B3YOej66b4dqytN32W7a\nmolzfztoPjM0AciOZ06K+gtTXtolD+btRs1yBJFfxO6pTsga1bmfbaaWjfRe\nbHIs12TAp1L9hd+WqO+tJnBiqrt7YlLxyJvhqF+DA2u02xdXoFB/GUmKjryk\nSHM8DqAYi25E+e0zd39PvHb2iQR+SchwkwZA5ZRaxhqEIOZMu8mat92yLqYF\nZPvdbkrP4bQ7NKq02ZWCgI9EoiVN8Gpy9kEWowY9yYpQtKzPnLq3cwSusW8y\ngDAq6u2Zmo4nFXFd1uxN2qp06aYva7rFVqwXm+knGXe2V1u+0koa911OH+zJ\nSIcv\r\n=Uf7l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDX/2r36qnwFgCEgAm8lCgPQVrJxZ+NGxk7CSkcM9vlqAiBcimrcPOgiS+vTNSCZAYt3+QY1bpgNtoGW9qO1lycmow=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.190.188072b.0_1592273382375_0.22675727442933402"},"_hasShrinkwrap":false},"1.0.13-canary.191.3380495.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.191.3380495.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"33804953fbeeba94d5bcc4a1e81887b454ddf334","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.191.3380495.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-z4A3jbXnUwNWlvUpjelHY+vlEhMZXd3Qgjug4U5tZAhtzmHXnzupDpNivY6e3OHWKa6xsI4thbAaaSh0EYQ4Ww==","shasum":"077056d845b2ca3c52507b4f0a92a8b3f9419596","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.191.3380495.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Ct8CRA9TVsSAnZWagAA9wcP/22Grk05pHKxhCyRzrjy\nPBmAEx2prqei+18jkL/DXq095VjY17pV96UGkE/D0o63eqr+vIcdNYrangJk\nd6zX3F9+EHR6aNWvLciHfyEkgnUGcgnZtLdNFIm3R5TO4cJsMHayMkplFCvN\nDGAVWc6v8Z++YhnwMbxMp8l+Ui5Z41O4MHbGTsA4SPhpF7JCrbFrQ87qtrIs\nzlXQsVuV+Fk/+81E2nA5Gk79xIrNp+D9s5FupricZ0dZWbujhiUEfX+aU8W1\ny4fbnlhRzDsamYEjxc2FU2A8MT6w09cid1IJt+/YyWQtax+aYqNlYM6d3dQ4\nG39LYaa8AwfH/nhyT2hxwxBfA5Xw1wMG5z6j0mWPNTc9SwjeekKSEqyc+TuC\n7RPDDeaCVrS/BgmWG+MtldtiSYcCDQcVdzRBzK7M7IKb3wbHh4i9NWx1WyAx\nQekoC8PXhe/nm5qSslKKVoq1Ff+Ir8Mdx2x4mobdq04fiiYGgd9NrBzb4Ryc\nA0oA8NdeEs6b60tdeMXOiNErqPsJ5WXRnQPQ4Vq/jP/crFUdWqagyYh6loj3\nlxI4caOZTvKO6d9yPrfftOFhJMZVHjcf5CpAqo/A3eg63HiCmJ0ee7mDcNiR\nxVNPKn+eitWzSndCOWr1XoPV6dys/XUIa9qAb21nr4ZrdyxyQawtqCd7/4YE\nRk6n\r\n=XCaP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdk4S3BgbvpmXGNQ34MdhxHTluydth7EAzXWD8B4BVXQIhAIICnKtTdiPWZF8kH9FONXl6g5hEbIShgKDP/zMWmO2a"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.191.3380495.0_1592273787671_0.48706631315595383"},"_hasShrinkwrap":false},"1.0.13-canary.192.b850785.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.192.b850785.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b8507854ac58c78e9e26ed446755cb2e235fcc33","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.192.b850785.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-nzK6P4Vr/s+4pqrBr2BnJ0sQzWMrucWmg46t1W133e4FGtO4Z94DwIRiry60cdg2RLvVKFvDHALuYUoPbYFwxw==","shasum":"b4a76f52a366b142d0284f9ee202c426e8e8f57d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.192.b850785.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8XHbCRA9TVsSAnZWagAA3OQP/jE+3raA0vCVgQg/ofEd\nvgltdvw73CMHCe5wtrp6b3g0yZIJJug0+SKlHtnlN/4KxOdan7W6YKM8bO0/\nqy8FK+fyfH0zSnc3Q4weVuvID/K7CedRhhdZRup9rByHSXZ5CVnpn/LiyME7\n24PC2eOV50W4ot9/K6xxnSFfHb0cKKDvXRIELOvmMc8l9H4aeHMui+yeNptn\navzxrXoEScWgqGN6vdKxqL5w4KS3I7f9E49LeVBG1xuwXDda90cvKo+brynm\nErzv+EzozM+XAnLRPfO4Cff1stxWOx22J+pMGF5wvv9I/tikxly7buBIGTd3\nEH3HDazthW1JTWmuUdgI4O0wlQxseK7dkYLAhCUahHTm0ujgM0D9uyuhAqKT\navJs7MdI7uIN04Xjurm7LXHLaQWVcYbuhsrTxPWOYEJtc2ADqUo7ZjX3GvBr\ntlznuNeKPZOi9BHWnHuOdIDxlp5pgRuBt1LOKCYYjDFzN4abUX2rUVkvMJ0d\nB8SZqqGw9fOafsqZJaXN0T0pJ4i6vxWiKwpFK4h2bnx/t5oPEIHzKUO1kxq8\nirPcfUpIHkWVzmgry9SFSBIl0VBnCJfgaa4W8jO0ersLtDZNvuKlt+r1RyRK\ny4UyYd20CzbWKqTQN5kmvQ0tfjN9C6/vdQyOaVoQfG0tSV4NGXfS4Oxsz9fM\n4GTH\r\n=8E5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2IZEd/4GMdmfJEnZaxEGexiqauE6jlXozwitHKAMD5AiA2oullcre6JY5PpyNNxTMFKvJUJSzOGyZTDIcfuX/R7A=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.192.b850785.0_1592881626316_0.8548682163358736"},"_hasShrinkwrap":false},"1.0.13-canary.193.b01877b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.193.b01877b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b01877b0e267e2bd2cb0b5073bb843ecd971e144","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.193.b01877b.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-RvPQpfWUbObdDZTF6+bfpK2fkFRSNhRybL/bPr0NRRmzjlreXmkcryCFk3yavS4o5E+a1qG2qSdj95lKQtj5+A==","shasum":"7908085e1f0e53b22685d3d2dccdfd3e1730906c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.193.b01877b.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8XWJCRA9TVsSAnZWagAA8ZMP/AqOdOipwsq14WE/4XCe\nVcrMc0LBRFcbKdQY08VfDvZ+82QXruwQp18ARdhKTPrN7DOVfVi397f2Fdpe\nlJdOXVqP1/mPEVq0ZIQkCXXUArVlhB/Lca++0nix4j5Dvrnuy/UHf9pYnybP\ncpB4uqsp2+rp+xnlPtyA3tg9QgbJI5UtTMcEX5i5hsU5yCAfPL4FaXNNFkDc\niVReuXd8+0Is/6r+pGMAHmDIX1yEeWLnpUQla1eblXRghOTbPOQ3fB9N2Vhb\n21YYT5gY1Qxe9xl7WB7jvbDrde1G5K11fKOX+uIdlD1QMXPP+diqskgFAXQE\nCoWU7/mVXYpaiLzBbjg6gAYqaSXej6RByFCG+oHRbjnx+/dOxCexReLQN7Eg\nW3R+UkJFCQwW7cKpg1YX94opKSWAefhxkLZZAS4Dzp/Ps3EkBkdYCTaurhVH\njqqgiJqjAKSNhMuVYBQxF8TFKFvngYvLoS/1ceU2vjkjJLS1AwGrFzgiQR0w\nzr61gxqQnU2qoY7nnXbD04LG5hBT0+R32tmO7v2/AklhDElaTA0UzsMLMMlZ\nsH9YBq21FKh3nNQsNVIM9DhLwu3qeWG5y4H8ZFkCbiI2zdYqNvlJJKK/FDzv\nZV0uOiIThwyOgIbp3nb+HCVTOjcrdb8idBOoJUV9+cUd6cU1C05sPOiCGT6I\na7Te\r\n=soZl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICH01ukBlA1AbDcQRPDN13KkWuqk46YJceZZWeWtIhzkAiEAvKXOv67KPpaIpbYI6de/PPjJhMW4zXth1rA0Dy95570="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.193.b01877b.0_1592882569229_0.9815431975360134"},"_hasShrinkwrap":false},"1.0.13-canary.194.994d423.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.194.994d423.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"994d423caf6d9d199be95230a0fe6e4e1b6e807a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.194.994d423.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-eg+bS5P/uL0rEXH7Lqrg+iEmd7SIPSJQoF1wDH3TMEDPkVvhAobnJL/80VNQKzWr1GJdKaFPKoHrXP28L9a1Yw==","shasum":"5850997e36be984707f0f818224b85b6d8bcd0a2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.194.994d423.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8XbDCRA9TVsSAnZWagAA7KMP/jYxX/hI4l2Zj/rz8TNv\n1gLBTVrBmfsgAA4Pez72tF83Zt58z0Ow12cJn7QL9zL9UM66/GY862kR8WmO\nAbh4lTIBU+n6RdQ6EHTFQdAPC5Atk97IdIcyWRqS1OlipE9JZMgYymapCpQo\nExcpYCMx9eGqdI3FBoeq5HtRhZ4JqWY3U0i4i+nccJ/mxKaLzftDzU16KYEP\nc7tDS2bRxfDDkgyvN2uy1+ZeQTATrpPybLGVxLN3KOy5SYWN/Av4RK0hlkVc\nBny3d15nh/pQZ0mT3FYrfaSa384okHs3GIeizMwpFyI2nr5PqNrnZsvybi7j\n9EPdnqo0AlEzDV0ihF9EWEBt44vRy7JTNc5bgYQMI+2NNPKcd4A2+Pw+nRKy\nIBq/J49CgD66gqVEFttjiEog8Uq2Kgj/y5G9bqdAjLEMa8tSmVlr0+lK5aAO\n0Q6OxpYNjVmD8cGbVZyHy4/5rIgIFBRYLPXU+G9CHfPZA4VXqlX8XIxxAa/I\niwnUh2czG92G3RR7zn4a1ib+lfvwD9E1UxsmI4GyynUA1vHYSYm47wPR2uIH\nTc3XNrZOQj11C6BYQX03hboAODyLTUquqHpw3HbzMluZWoH1GHXO+z9eg8zP\no/Ts9D38AUeAJVEnSl0XgtMy044maiYReuw4bbLyYJOysYfeImvTgqaV0hhW\nO4ni\r\n=kt1k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQ9To2CxNi06qs5yW5ylbPWbycrnuP20Iahi4I2E60yAiBJmzB8PLFSohJKc9R5BHYHgLEESmDYW7kGlvuFFWrOWQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.194.994d423.0_1592882883380_0.10257467747364779"},"_hasShrinkwrap":false},"1.0.13-canary.195.a99ef4b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.195.a99ef4b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.4.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"a99ef4b538f598f5da018104028b4d80ec7c18db","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.195.a99ef4b.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.20.2/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-tSqZfKj+uqOWQocgTfFQXy2sm0gZeHLl2CUgU8nSDK6oofnD5Q+euF7Y8T/jw9GWNhujC87njEgxLE5zFiXepQ==","shasum":"7d61fe38d0298c376c0335aaa2699306474ce258","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.195.a99ef4b.0.tgz","fileCount":162,"unpackedSize":3114728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Xd6CRA9TVsSAnZWagAAzwwP/0jIy20NlSJoftEMg4F7\nnzPFY43URTGhLtMvPZ1Tr9et8OzdlJnNQ7vTFrar+RlKM6sJ7Z8pmO/h9kNS\nxbK/B6DEX1c7ypeVqQs+QyVB+KQfYjLHI3Pj5CRkHGWqILNKIyodP0/7Chwo\nZJAlQru0vGknL5edRZ/Dh3wqPhBWWq3iVIYz5qATny5mei9TbMcPPGnLUPKj\n0ze9vSQqd+P8EasK10y2CxPmFHYxG1/L45Omq1P9e97Glp+KMGVaQCcU9UHC\n3zm8Bf55HJi6en3Tpz8pSZaynpYPIKImrt1aHf1VphJl8Y/ZEwJS++ApZbxa\n3VYDigOMS0gTbHMenUgmOeUqLYCZ9d05iQGbLH2h2FWAiFivdGzeLraHpGlZ\nlNTmMt/fQiBeFiaoLyzb/NfGuaJs5HRtMxmvvSwTsGdZLLWOj8lHDVcsWUfG\nAKJXHy85JyYsSJ3fhmK8cHz9lKL9X93VXKemxu1zLlJUYrAooXcfxvl7YOeW\nKFcSdLLHr7Q9dpzYJ3r0GCGs+91NT4Tfo/8bIOhgF66sAce0Mh3I5Nu8L8k7\n2J+6R3FzH//gNblwj7iwrXtiNGmOpvF6la4ADxUKrPi8VzKjQKiA5tSHtx9q\nXSiew7KVMzXwXYgYLfMhN1mfMsck8XcVOg3ZMrS26PrxDlLUhUrD5Lm+SVMi\nXaBC\r\n=UzSm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7Tj0FOo9g9s5WO3q14jyulXJEAC92eI8Fen1JI7CDrAIhAKhMiwvFVl7x9GAn8+tFEz67qo0KecD/Bvz8ilymsCCU"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.195.a99ef4b.0_1592883065481_0.813500186330179"},"_hasShrinkwrap":false},"1.0.13-canarycanary.196.8490701.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.196.8490701.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"84907012eb365578a8eaf8b1cc11ae0baf06a13b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.196.8490701.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-2CFybEfFWUy7Rep5rxboGl44D24r/TDl9OlWn768gjEjRXrZNWRhDNOy1PPOeEp2oKhKFjEwjatzByE+Us3+ug==","shasum":"6f4a4663b574a181b9a9e841edd7b85724d7bfb0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.196.8490701.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+f7rCRA9TVsSAnZWagAA38gP/RxZNN9B8+Rjwvti0EcV\ny3wB71nli47gg8SdHxvYxUt0zSpZ8Ov5GhGz8qE77IcIvQexoz82cEi4xmhi\nJAXxpa2DxVCgZhYSdfaKep/V/34yTbU1Cb1GhSj8MYk9NWUk+d4GbvhdQ177\ngaoy/44w1bpSyhYYsm2mZMkDz0LaKsQ+Eaa4vbC6ZGQM1q+UFP+xzU2SnBf7\n35LRH8iqDRWUDKs+4ntMkj9ogWb0t/ImRBombDeQNVgV49CPuo/9C3gH67Bl\nr08jkgWXEOmOa4wkuqBqIxk+miM7BId1cCVPmvccLNYrH5/qLYT+poLsj+85\nOZYLCHVPt+PJ/9dmk4j6LpOhl1AuQgFg/9FToGm1oF7Zy5rhbBSKTBY3UYWY\nqBxJY9j48f+FuO8abAWyTqGmFr2nMDxpsYyWTTwvqSQMsZMt6KMHFOty5cS3\nJQ33l3GEbAA1KCYeIaZ6u9mOuH20gHhlK5ui93Xhkp0NHc3OUPef2MF6vGE2\nFruTvqGRpVUp0keq2hYsOHEDvb6CiGO8SEbTNw/SqWGEkftrsseP8IO7c60b\nI6hHnKWGhVKYBfJQihbUCfVG+tZeI+KWop4X3aTT8dLGzqguujkluhlNd3U2\naXnWwCGpFPWuSBUtpExtvzX1fJN6rYaIVEcWMwz1jrnq53xRTsRPFw0dFUm6\niAEc\r\n=dP8y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiKAqtp488tMKF2nDl9ibnGhg+5viwlMZdREu56BmU5wIhAM63ANc6WO7R+iQfkTWTA1vrGGHtkoos04dmT2Gv1NW5"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.196.8490701.0_1593442026429_0.2061318899998572"},"_hasShrinkwrap":false},"1.0.13-canary.197.b2d2d61.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.197.b2d2d61.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b2d2d6135a230a924c7e6ccba7bb60ca8ea008ef","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.197.b2d2d61.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-fTDIotGRwU69OTbOZEy4qUFq6brINB7RdtH3tS70Ld98TBd7ln4RLIZ9DxkRmNiLXmyQD1BuBRgIun5M7i0n5A==","shasum":"3e9bc0a78543531b4e77413125fbd7c795730e9d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.197.b2d2d61.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+gB7CRA9TVsSAnZWagAAYpcP/1iaQejPSLSwE3HVdnJw\nraTxmG/yQjvUmoyqD9hlQKVUiF6SfcvUHbNS3uKq83EeYarRhBxu+3RmRQL1\nWdQ68KmvFSXruF0q44kxYX2+iGhw0+VEFh+8kgATtmCzkhqMStAbAyS4rufo\nUE9w8aOO85xdTJjRXRIySsp1BknaE94G52wFnOy+vtom+WxrrHPn28EJlkJ1\nSAgKZLDmQdVBS8YIEepYa+3LvRXL9KCmsAiiF7QftxBZ67H9AcsGMHHDjf0B\nwXClBFJRg+rJRhtW4XGLZJCYMX8Gf3QEvSzZJ94mm+9GgriRFV58fNnVnVIG\nM0EPF6fueTGcyvr1/NxtxlNVb1hCmQzQsn+UaZDuOFqWTPshxFYVaG6zAA0b\nFvvXY8R8pxvLPFGh8ZkUfmE5cs2KmEiH5DqfTxL9FymbASGaMBlMKkgkL0I4\nlpZMmUj/hQ7M78ckpr/2AhgjnxbhOqEwaIj1by3fPG0LnLuuwGnAkhiVVBBs\nX29Z5DNntp+W3FRE7oyP5gF2nwgOVwBElz+d6LwetT5bJFKCYIx6eHyIv/vc\ngKQav8rB6GA2ET5f0RiZ9z1i5X/G7DpsABcpx1w5vfBCscH7wWLkjGdOT6MU\n+SrwO4GkK2+liwisBkztQyyXJWwwD5gg2Rip1wc6Mg06JfWhrBj9a6MavRTj\nISTI\r\n=pEmv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrE/TgoZRVyp+PrsM1ROUCWdNlUe6StKcQ+lBPIvlNfAiEAkVZxp8Pi9KiOqaz55hcoHGxz4+0KRZ0oEfYpHEQ9cHY="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.197.b2d2d61.0_1593442426878_0.8320688355665269"},"_hasShrinkwrap":false},"1.0.13-canary.198.b8a504c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.198.b8a504c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b8a504c8f16889032418044525976419143e6910","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.198.b8a504c.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-RTu+I9YkU6Y9AENIhoJJOGQUgQ4EBfKDmxube9U0nq1wwOaWsgVmTIxpILDbSau3XE6Uh3otVGLUP6uX0k7gew==","shasum":"503ceb6d561000bcf79b4945b9a7b5a604b8be54","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.198.b8a504c.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+gOQCRA9TVsSAnZWagAAEqgQAKUfjlz+gukxQvkhcY4F\n+c3PYHk52WVvAlJjoo7YWix2UQntzdKKADKVUaibUQrZZ/rPZ132xSFAJ/yW\n8uip3CundCv9U/MI9ddB+gFU9GHdFt7A30PADLSoWsZUGdn6xieTZ2k0WVHe\n5rhPQK/GP+KSqyqeRyB3OJxtKAQL4CFXA2CLwclhf1PAuovx+wR9cl7WKF5a\n2m4QN2cCj7BIslacFbLgIZPNvZBrtfmsqdUmvKBWzN65l7X0ocJFC2GDxyXO\nNDSI8KbYwHz7a0NR2cw0SZDHuiuJ4qCp0njdXzJOMeA9QSl9IR90/lYSLwS+\nq3pZuRmeMmnPKuLSljEkQ/y2WlpJrWZ/x4tffJ8JZVBDbdDBFhKBRPsB8mQN\n2KHVSyEZpiJfWc7Z5gQrRrTxwk2PIy9fDymqI4v1JCp5wsWYK8LxcgSCb6a3\nO68CcN5qXbU+eDuIiQ2/jY5efcsJi62BqxI+hiZnwFppU4O1yX1M75YbUh9Q\nPna77P5oaJen5xslMqaVyJPdW8w/fNozPFTrLonJO2RN4GtF6Pv50G8ElRx7\n5QfHgQPXjZPKmH9tdOjB/v4hUmeyWR6KTFLNgMq7hS0JS6hOkrnTztviLAX0\n5KyHTQdmwnSIZ1KJl3E99SmFJMV2tQ17Hmgc3/0flbKPYds3bKsER5V4eiCg\n6Yt1\r\n=vpDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbSaAinkY0NbE/6zmJnu3XMKgf+i3iYOzb8r6kuAZMfAiEArQe3DqUxif0wWhey4rQthvOpGJrD/u+3cq2k3Cud9zE="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.198.b8a504c.0_1593443215903_0.9210166291757822"},"_hasShrinkwrap":false},"1.0.13-canarycanary.199.fb353c6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.199.fb353c6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"fb353c6e9ec7f814ee5be9fbc431943242a522ec","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.199.fb353c6.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-XwsTliG0wUvXbY+yJUIntib2QXczpC7MiS+ux+27AinQKomtNoi2gXhG1jmIyiSVz7lLjVW4Co+9ZUJuwUMY1Q==","shasum":"0d0a8a3548cf4bf75a1f633a046dd48c5b95f32b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.199.fb353c6.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+gTZCRA9TVsSAnZWagAAD08QAJeTBsXtulFEMjM1U5Xf\n4zdDO7R31ZyzteQ9n24LnrSLGXpeDt63OWVazFWsvQVDYxL2YMxyCvjWew8K\nPqoMBKD8LpKUepENAj8kr2wWa8qv/Nbs11zFJ20+eqk2xYjSDrxY6Ua1bw/+\ngUrVhNcTTBUuDJEdZekqaxjHH6Ue4ewC0uzHGIEWTUm/8no1r0i6X0uu5zkQ\n+90/brso/weZyh0+A5CFoEhYzcw7hYAW0ASCAZg62MX1GzcVNKzLUAjlG5CN\njegJRpUxpK8W5vS09+ytMt2ZOvCbdszhZQDXKLT54y2j+ogLjhdIjWQ5xZc+\nxTSQmpQ/RtAlHzkHpvMcJhivFJBFBYPox3ltc4s2xu/0UEygXr/eBNOJPRte\njuICG2oOAM0Rv7z5oEBsP1+4g2ADI1ppu/q6bGCbD2GFI4vda/Adyz2NfU4j\n7HyqjdZn8iiNgHJDhJhyM8rLXfh/GtnQC9f/FyJUAwIU8HjWTZ648Mlu4cTY\nQpQsxxkU+o4MPlnKesiHEmFgvA/2vE0SZXmM8TZ6z0jFA1gCQRMjynCNgFTY\nYBp67xwTA6xh7FX10ldYAAs5R69TU6YxCC5I/O30vkfl7QF/tz41AmmVyev7\nDY17INZnRorFbnpliOg8SfP2Zf+rFq95gKkfryaeTxQ6B4JOBmP6v3s3LENy\nil4C\r\n=mLgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdfqIpiJW/3HBPEHQ7p5f/WA9MNuAc6d9//fztA2OaxAIgJlfU7724zDlWvzF7eSDlNJAL3jBm4iptEh+fDNsyLkg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.199.fb353c6.0_1593443545017_0.4055056977494955"},"_hasShrinkwrap":false},"1.0.13-canary.200.f893fed.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.200.f893fed.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f893fed653239494774f3ba87430914a926c1ab9","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.200.f893fed.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-/kf4gsDRm5ylcxN7Lsc2RtxlEs8xMyzY/vxi2zX3msJRFKJjFkli6TfloiKFCeiYuElrCsLjYr7JGg8bMGlWmA==","shasum":"df2901836e4b8482934db4ea489975a148c55b4a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.200.f893fed.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5rXCRA9TVsSAnZWagAAJV0P/2H7ZTAbj95fuF5zjsEY\nm/sMlw6nenmwfG8NpHVhVaezLiX3e1pNSgAobdX2jKa3xc/NVKiRy0StccRT\nYmg4McDuAKsMam8WX+MgPUxagoFZzdWh2nrhdoNTlluAWVied4vrcAuUv2X5\nLwcE8yzn0jkH4ZTuQPPtG2VxIqR2iL1PXalXbnpHSMSUUlSZVg+RhEijDaCv\nnvSaDuKcKhpSeC7tSQL1EibeVCVoHyVqAc9DTjdzgEoddfQhzdIfXf/qVnZa\nYfpcMKWkBbzglJk1GKFkfe5JUVoj/rSsPGZ6gu9RuSH82tSqkV8QGtojJWvP\ny8Ez8ZVnLNEvGE7sYMOTSZsGBdX4S8AcY/a5ttLTeVQhcEU6lGvY5ZkvX/+l\nKyt3auEMv5ocgeeub/L8D9yhcLz3BKbj7yNmXsCW0jKTdUqaRuY/VsUii9FZ\nVfjraG1mk5i/ZHJdf4+hrBqPmBdeKyivmC2xQ+Xp+YaigvOZB9th7rlFqVbL\nZ8+2nU2SE0gVxv9UILcCtRN8GieI+sw9JuAGIvWkVvMseCAd0Xwz5ODjewTF\nT2XJgZK4kUVFIUjO/QQD4+i6ctTozUrtU9Ory4kUcS7V0Hxr5spLsTXdC76r\na/kjugYdXn/cwetWE0Q+QTI1C+pvE7mAFJvjrs8AYa6vXtLJ6ZyjIVyGHz1B\nsj7S\r\n=XD8I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPcwJI4EFiEb3NTdQJACj+hT39ny8v/SCmypjFYxdlzAiEAuqK/EdPqt9ZB9z3ZIaojBycyiLyAbhH5ZryVOmuU3o0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.200.f893fed.0_1594071766360_0.15650561469951785"},"_hasShrinkwrap":false},"1.0.13-canary.201.807c45f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.201.807c45f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"807c45f7d8b78295cef7cac299d5f3ce85a855e3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.201.807c45f.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-vynBo5tMu9GSSr1Fe29omQS8ZqJiuTqvwhXwTeMGsH4Iws0p/qEv3s0YMahhciZ1p2tKcBjK3s1TlSwRLFG2UA==","shasum":"a1753eabae7a4d667da1977c523fe7eb039a7d5b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.201.807c45f.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5w+CRA9TVsSAnZWagAAOMQP/1vm03ZtjyjyC3wnnKFx\nYD5yArtcocxsDQT3MVeXYPAgOrxOh5DIb9GdT4kZLlu6mdOzgqUAuWmqFBlU\nN2pVsmUJMZIuUfJg23zFdgBrDEpb5m0VHHW6q3yN0NfrxUvtaAUmIG3iZU5D\nUGaezjfd6xC95bfq9cCWZW/xfwa6LNFsP6DHDpRwPiB2cmVxDRU5rHrheWYw\nLgp5KzNXPuzhlEfqubaVOAGqSq63as/b4MK5GcyulqhSF9jfDtF+cjYvo8eR\noLIogwsh3vr2BBKGpah+1Hof9mDqGteXqxlC97MCJmo1nrNUXHBubC8kzaNj\njN8Ts1E4EIACsvVLXQlUAGGuT/bNZmfhFt2C9MAeXIwaSjisi30Qc1t4xVNx\nTnUESXvUkEtAgJbLvgtdQzLI7eVH/rEN4s77q9jXrsN/+t37Wfuxln2ju3iN\nh/Rbq7AMvtEuWU+Dbp5fEePdlZ8IOJ+ntycAAhI3mC2LKR3lehuHxv8Q7Z0g\nAu4yQ7SZtPjkbvSm+wBv3eqPlSjPml8lvGn9ss1eMDMKl19IwszkRNjmFwcN\nuNXIATVDn0yEU0ZfxRZG3LRIRoI8wezvCaw7PsvSjWUstsUga7gS2/tl0hds\nxQ2qwjQBWvsuIlC7Uz9bQ3HoZVfU2Y16DEYGfaZ8elnpctXi8fgySo9Hmc9j\ntjtp\r\n=gFrW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtAO3rwsnWSiyQV7WVoTPcl5bM5DmIa7DmTUN3uOMSLwIgWRPk4uwRLJfConQQJygSCUS8ci5DLXmLoJhweLWUWBI="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.201.807c45f.0_1594072126161_0.6236429630827913"},"_hasShrinkwrap":false},"1.0.13-canarycanary.202.e6922b4.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.202.e6922b4.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"e6922b4280d8aea3b9825aaad2d10b47ab7c38a0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.202.e6922b4.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Tejx9UUaT3PFN8xrDg4RfBtYRELUK1KYeXuUZpaepAWpoKW1fe0xgdeno2XSpTk+fx1IrtE/Gl6Uj7u4GW17qg==","shasum":"75fe0b984d5a0f7fa4e2abfdc69eb834b2a296b9","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.202.e6922b4.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5xOCRA9TVsSAnZWagAAwUwP/0NaU8TyMyVS9Ot8a3pA\n1q+L8BqwxPMrRrCyHA8P2D4+A9uNfWUc7u7lMpcGsxSkvblD3JzMLNcy5e2s\nAShJYai1Kh3gpeL7PmpoT0H8Nb4soZLQKIsJFDlXqjwNILlnyxtR9XcJFc8g\n4kNP2o9LIprPaw0Iq8zZVacsYT3B5T7hcCC2mv9XTUumgcxCi3RiEGsEs+tr\niBl3CAVPgJD1UrfizppCy+OaUk5JmtWp64ymJuYDzgXVxCdUsLDOsOEi+Pqv\no0AEk0Kq0gcE9LXDkglph0GARxW2l2hjjkdW13L+RL3vinSx5i9RXF7rl0DN\noTE1h+gmw+ODxWSa2H9yGt/996WUD1wuZmQItpGgOozC9Qmapm22+lrQBTak\navBmLaVaSkoh1QmjwWCMqxgubrM2Jn4L/5F5+gaGk0+nJM4LY0PC/pwZXILW\nPDh/J2exlNhUmatqywEANvNEJSKnJ8USYW94xk3q/039SHPm6jhGgk8XSWNO\nQADK5q4ziM4vDSbq5TyVchvO9tbGQLukEXdbQaHPYSgpBxkJIwv8zYB94E1y\nX9WxJss3KHGmx3Y7/Ev29SHbQIQOukTys8218A/rdcd2Ejl7lWZnAx3gZjKs\nbghru/a/fMOAgrdkqgdpKJmbRzL18wZ78l7ULPVL8arzUKTZbK4r81UGV1aw\n43Mx\r\n=p1BW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyjFN5k2ko29ojGoPhpImVZwm+xpGUr3coSIoGKMDVrAiBZTcp1ftritgfRCFw990AhD7tFkd4E7TsMZ6iw/bt//g=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.202.e6922b4.0_1594072141444_0.29074119406097965"},"_hasShrinkwrap":false},"1.0.13-canary.203.6ac0f31.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.203.6ac0f31.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6ac0f31f1a8f08a2497d4ba7e25a7e0f013888a8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.203.6ac0f31.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-6Od8DwuOAGCokQUG2WvlTkwgkokK61uO2AU7Nd9OQCPtl0Kioi/yOD+T4eVx+PMjZ2w5/KIF8hxBOMAXH3UlnA==","shasum":"7efd67756b421364d3b18598ef713b02acd5a0f2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.203.6ac0f31.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5y/CRA9TVsSAnZWagAA86sP/31Cj29wp2Eg9eXQTTNm\nvcjZrULW1pnQiB8gQtjqySDgdsz9sXSTpX3OU0wjKwx56RSW2I2GLOzrFW3t\nI+QHTKq79VgOFPyBNpZoEL9gulOI5s4jub712+PVA4E4Mq2dQnBbwf88pq33\n40nj/J5v7pcwIbFc9aixk/5eSvwTNCX/vAARuxleS3+cDg/AT6gjA9AUZ3no\n8JlpAZzAfbTIIVSIbH6UNU82no6pn/4HbDX1lCte4SUaShYr8DDY1HLcU9K7\nwVIfF/ejmDlUlMVhQSz5wqixqrsaYOfKXgAsJOYO1dn4xZnDHmvyDkkhyF5o\n8dh76ZztUwvGL0AV36EaJPx55Euumw4G8LbMPlBOeRDwMX7OVZdloxc2Avdz\nuc9MH1wEkVJ2AirCws89VgdEWACEwx5sCSZNH4wHvHzr8O+TD0X3Lc6+GqWU\nXrV2NX43RMS7E4FhE+dS0wi2DcpXGgEfLZyJrPxkfgFHMuyXeOXaIfKg425g\nU2aCq1OY4sVFuL7wib3MPihslCw2kf/HwBzc5d8MDrpprQX1IUBcGCBAqSXX\n1dVOPFO6ZPOpLZMwsUYFhcTgJeeXkXe/r4G5eyzI3ObU3y4TCzEnNZjYcp+y\nfXIDJz0aXq6+TT8zsVi5MbNSGoMRmVj/JeuiljTlnDYVwS6mfXzwb6oDhdCi\n9CYO\r\n=p8nF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCweElZwJVFOvzRGzWAb5ITZ3reGX7nV7ezxHD79l/WiwIgfZawVlADQoC3BfCrQ7LVM3AKTMYAPYQkEjRiFgwJ7tE="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.203.6ac0f31.0_1594072255008_0.026694976335358778"},"_hasShrinkwrap":false},"1.0.13-canarycanary.204.401022c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.204.401022c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"401022c08d52bd1d97f80c0b7742ae7fa7a59d23","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.204.401022c.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-i0yPlbKeaQH99uOPcUUwvfgQKUCI4/fSl1L22oVEo/Gm1yxIZgOtXUeDrVCDBliQC8F5PjpmJzMORhDCW9VvEA==","shasum":"840c6b6761d6db67e8b513abd24a5d66d8575ba0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.204.401022c.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5+9CRA9TVsSAnZWagAAR/0P/3cRgNtDVGZyDWpyUfTN\npb8Yv7D1KJt+4KsxPqCIlKBiiDgkK6EruN9FxM3bxO+wOt09BLJ8xWoHu0F5\nUdXW/PYfJE5xTRHHq7y7L6B8bQhg7JMyYWua0hYyjvBuLIYagLNLoPdK1rPU\nlA4AM1mUstdZ8cnsjOn/tp/CPi3nXUvOikg4Hxdp9/wIVwkhksW1FN7OiAbC\n07e1YWmKnSkGCrWjbZa7Og1vfp4iMsUs+FBBO9x2OebVv+IDW59zuR6eqFId\nmQ8tyFiJ/pBqsJeZC3sNohJ2O+Qo02yauYkCI9VKYyCTyYjYGNcZEtd0uldH\nOmN7xKXCkxXQ6UanfmAdqYUoZvGe+vzaEZ40QAFBqH7B4x0OnNXqYQ9rYH6v\nczbzWKUj2E7Vlxh/oeF7uNuP4LEx2TFVM4Xr4AapnlxIDQ3b/iWsYavyEFCF\nUOTCIEujJ8Ms9ZxK4ZXMotyQH582vbawUaQ8sWrnQSAoIotBfg8iIMraB1wd\nnC1eA8fq5+2tfUD8djcaJuYM8bhQoEqL8jlFbBR0ON497VvaOkAVA2aaeY/C\nY/NSRJ4YB8jbZN0qeu+vEHIDhAmMZmRz4CLn0c6aGuqrvgNMB5/nfUL+Umjv\n0MYKAS0kfSYOiTAgVliuutpmIMg9pQkL4B9jjI4bFghjMLPJqu5f8EcCNy9s\nm/Ue\r\n=g4jd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrynzHaQ0m/9KKV2LuC/ltFw9xF1ZvTvSNISugCGmQywIgZB0US0pGxt+zOdvJT47gAYBgMWkTYuqSLOGWD8AHOVc="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.204.401022c.0_1594073021345_0.5434754491611342"},"_hasShrinkwrap":false},"1.0.13-canary.205.3e582ba.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.205.3e582ba.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.4.6","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3e582ba785d85e76310d18f2a1f7f99cb5abee6d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.205.3e582ba.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-t4u9UBP8EQ5DlsdlPKE9O6lLLqbNJM2Y6p6q2EBgv2VFVG5QcmPlqtivE+YCxb+q1J6kISECWGfgYBuz9W8OnA==","shasum":"b749602aeb1992c7fb9be11c079c71c599d8a4e1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.205.3e582ba.0.tgz","fileCount":162,"unpackedSize":3114748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDNEhCRA9TVsSAnZWagAAMGoP+wdUugYbS4mFt8AgQ3Ig\nIq0EBu9jerKQyGRS7+EzNYuj4Y8ZiZfLd1oC+2SENpxNfN4pe1Jl4zfXk92Z\nbOc7fiSqq5FoJ6IqehBrIj3ZD4Mw/0AJAFsLeBjoIpM4VGy5MVAcJSEAvMPx\nkNl1Tqi1V2fe5hZjggPHaKcuCnB3yRK344+iLcPHPwADiJdj+4jBv4m6useW\n9pnJcm0hoVcxdvn1EDyeTQfLY+wwQTiCuE26drxGMLV4Hrkry+tslFXz070l\n5oA+o74452kZyNRYe4P/62FcOa39Hd05FKdXk3lg5aWwlsDcdqRPzkuFqlqV\nyLjQh8oguRlq8FAkuDjhE4CzspCWlsShZnG0LM3x71xGEBBS6Otz0o5Oo4UT\n+NVZ7yCIneDygmBm2tOpEZqBR+SKYT8RiThxw++VmpsYIcRZ1f0jj71Im4sl\nkgBCTdRKL0RFjuAlDu5fVdptb+ZPtCQMYdXh7ZZEAi0DL/gbO09nlVN9oFsA\ndoK7qKWzuXnUV31H7i5/bLq9JCHFe1KO2sUnQ9Mel3PoOxhDVU6y3ujYM5LO\ntcl68nzd8z8iqBUNmYjcHgFAIHRKpstRXrr+aoP9dRJMgZgXtKkm8x3w5Hy7\njlTwYLz1DKPPOPPuWRqIFL9xnsPoAMH1lrOPG0+PP0GQ0BW1azUrwmBxIDX4\nnX1M\r\n=i4Xt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD35RXB9Saxn2JKAtqoK8hdXhU8BX1O8PDrXn6Oo+xvvgIhANm2F/hLHxot8F/Eof+MOglW6HMiL/brOZ4d/JpPXxUV"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.205.3e582ba.0_1594675488534_0.32581984847500367"},"_hasShrinkwrap":false},"1.0.13-canary.206.7376aff.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.206.7376aff.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7376affcfea32ad3b344df3256446d6fc578540c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.206.7376aff.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-8KI3NrLWKyGYlijz5LAcP1O3HhFo4TUiFZIgL/ohfMn+FpoSPkkXZ3THZGpkPIPqeXTOLUFNTqSHixPUmSmcOg==","shasum":"c8e8f9ff6b2fdbeeebf8b3990219f41c466286b2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.206.7376aff.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDNJFCRA9TVsSAnZWagAAqW0P/3wVrHU5WZNzu9q8FG5z\n0tYlXmTWOXT7dn4FMZPtIF14ArfTsMzQTR4ZFTJIGSthOnSkDMiftxCAgSxg\n4kqr7Mq/1axNr0Eqp4CXFbOFq1blhBgQClTbqm802Yh4tMY3dsbJdOT20IyG\nGSP55ulYxlVBAXk0PjONO15QD5CKyJrm5Y3XP7jVsd4UH4ujmtwDzd7zOzg/\ndEzLjG5SYujXkPH3Vh4xyHwj38ApbfyNZj9aCukFKu7u2mGb+rcjoZDvbr4a\n6i4WGDjIEipGStDCcwoXqV7ap2rpgkKWcrqocAtulfqfAD/t9c9SuFYrcHzD\nCERU87ARFbxPULId/PRVo0gZoab1AFy+SHvQMrxAo/Q3oxTVMhKsoRiCfFvE\nbQ2SKQEhUHCGV+As3T1kgapw/g+V5yIWIr1LOg6RIS3oK3yZnspkA1+ozQx5\n7BE+XgfCovkHOMAiVjtwV+dkMOFasI0c0v5aIcnLGBP5I5lo5ClB3XwgLxNO\nbPNMEQDvBX7CPRaXguoWTa7q6nlYhLuuomZCN7lMEhwlLUN0xMVflnxSMz9J\nPAQQ6Dkq/tmCg3QY1knuFqEi2DNDUM0B60jm07vuW4rbuEE6EmsSLsWORzeC\nBWh1kOuKVzZj4TN7tjmMZN1MAmowUy1QknPMEcp8z3zJT4Ixgxo5oWArwMlJ\nvMVK\r\n=nCiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8yYpyuS205eSCYuFp0APTEx4PXZ8G9GcCMxNiXoIAPAiEAj2woJ5Vf2OAuUheF3lYs+4tEuDj4Rqcp2qqRObVH8EM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.206.7376aff.0_1594675781458_0.7214011002778313"},"_hasShrinkwrap":false},"1.0.13-canary.207.7fcdb8e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.207.7fcdb8e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7fcdb8e459385f4b66c64ddf6517cea2024f2f32","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.207.7fcdb8e.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Vx01GvNihBLQE71tQhPuuEOYbtPxlUeQLBaiVeCiIaliIsr647cKcugOI5iXkQUcIhKcJdGoyt9uIUDNTUD6DA==","shasum":"1e341e95b49ab829d1a61188e85c42a061a6d25d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.207.7fcdb8e.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDNKuCRA9TVsSAnZWagAAJ+kP/18ZMJWHmewtuCvWD21i\nfAL6DFtT5NCH5+GOYOLRDJqHf13CmJ2AKha6ZwMdin/0N948WbaHkhgBzKkk\nGOhIpD+VZG0QMpoUVSFb/qrMOZbMkNHbTXVxy6ZeoYTCpemM1w+A/TW34lYv\n4ogTDwQoXqZ7krBXbv8IG71SFD1TCn6PABwzey2DpLAgci1ypaxK4e+3gRPR\nlp5gper871AdnxwCkTVyhKhYVnbJPTcwwvK9k4f9qd1NeddVDy84EE3EFNUg\n6SudV8BeSPqnDqJjmXJ5s4Gju/zuYjXQ5M0mfWDOXgtxIGypRZAEWlL0xMZe\nhAFfDTGDjjCXOmUTLRr72SQlFTg5UNmcFHQQ0Ezv6mBww6fIMwxjl4IwqYCc\nVrBhIUVy8cdsuRhjifo6lMfRV75Jc3r374bLs3ZDGlU0b+3PnqvJ7h+7ksEY\nKbZf40UkIfVaGjL9xGkGdQEI+UQzLUnxwWPccxzcKd0ifjIo36ukC+AaFafl\nS+aNTCWRVAcnZnGCrPcPPxEZHV0A6h3Bxv5gwGfY7aMbGZ3U8Sd6u3ukx+Vv\noWHDXcopQA+WpCZO+1NLtz9Y9xno4zohTzdfNx6gkkK+0CPR8ZMJfz8hw5UX\n4xfNvkyHL7GGoMbw2QNkCTiC6nJFWAs/meoEvJjVo0CMR7VkyYeTkbgY1kAi\n3VK5\r\n=6Idf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaaUJI+WcbM36REHJam5ov6znEiNOyhgmB9sB5rLH4GAIhALcFm6cVJN2lkVqQBwARdREznCzWiYioKgBWm5bXOOyQ"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.207.7fcdb8e.0_1594675885813_0.2495320550345772"},"_hasShrinkwrap":false},"1.0.13-canary.208.3ce41ed.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.208.3ce41ed.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3ce41ed43f09688afa41ddc1be4e46149cb8c166","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.208.3ce41ed.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-nQ6o3z87INdcrJ5crPS2aLozakicMaMIUvMckY+BGJXQABRieMnH4mfz5EXFENeoQDZ0R7K6zjNZnOTfG1Xx+g==","shasum":"7870769f227e0cf7266fa70deb68622a0bc8c061","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.208.3ce41ed.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDNLYCRA9TVsSAnZWagAA/WcP/28chZygGtIOVMLWY6MM\nqLuGEol2gNPK4qazgaiDrs3V9BxPgsRsc2OSxSUzufRpRzuU8n7P3mGCszq0\n+AlSJ51wL+j7z90QlmwAI8zyClEqjjyXqK/MOsuy2Te7WlPCpyPlrYcBhJr8\ninz5Ca0MCbKgm2k/r+tspcEy0M4uvNRlb0cz46PG5eT7oaF9Safw/nm1bJUb\n1TFu16piiNz/dg3Mcq9jbC7Nt+wgqXpB+I3HKb/PvyjU0CLmxb+EyUu1FK38\ncUlW3ltOoTSm15b8MdsHUlg2Z586dFVmBQKej0KOOIKmfZO+Y+mf9636+hJl\nZ7JcSh3OoJ2hxENbm5PoqsuBoLmceJ6uo60iHdxyMkapq4ihEanYFOqVQMlb\nCkTzvonN2+sqVE7g18UkUZLvygD4PrRu3GocTPvei8d7zxLlIhn1tnF69/KQ\nv+XGCv15WVrJ725hYc7A2elFj1XjlGRC6irPcluPZfCafpX1dNMiP4fx2R8f\ngtBF6XHGEzPejB2SMet4iFdUwU0jw2HtAFRLZAVCKSEDN3x41GhWNqV4utOB\n+yCrmp+yA4s3IoL7VSOQQrC1MrA8vd5PorQRC1BUi5Wv4E239LSJ0JlXIykm\nsP9JtjUOvHu92XdIqwqKr1WBFNMrlv+JY9mOZABMytPKceYOGBYANkCV+qgm\n1A+e\r\n=jB0B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqKoHEPwDD0ZwnQ8OqUFC3B62s9YGL0EqNsUS+RtCu5AiBfKbyRL87fKJKUr2X4/ws4foL9sLQSUqliS4husDUidg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.208.3ce41ed.0_1594675927769_0.6087831690288916"},"_hasShrinkwrap":false},"1.0.13-canarycanary.209.247092c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.209.247092c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"247092c1d21e51ae5cd17ff27d550a53c868cf67","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.209.247092c.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.20.2/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-wYGWaF4RQOujIN2drUs0fDw1IJ2xDE++ewviBHeIdBZdJA6W/HQX8a8QkVV/US5milH5010sLvhseAxcwxw99g==","shasum":"564ad5950ae84c24a651cee9fa104faba9ef3fc8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.209.247092c.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDNP1CRA9TVsSAnZWagAAjj0QAJnmrxHKh0riA5m9TqL/\nfbpXM1JhNQGyZIMl2ilCimrAgT3nsKklWWCNB0lwk68p2lsXd4JWrH/moQAP\n6i7y4zlPzS0xlECYD4z5QZqtCF2S9LIfKWYs7Rk+iiJ0yefGDmFGwB/SRupR\nKysdx3pdzw2XuRn3tCNEBx7I8nuSvEx3gizOzOxA7uIKp+bB/zwtA5AsNnjl\nABkNZeV58mBqxzbOjOoIWqkZVnh7yL8oybh6dTIAc8S/iqANBUUhBuv8a+MW\n9UvILNULbPQO5jEAaOgynl07fRGg9F+krSAl1llEHEeUc7pjFPdBT2CPCryA\nnhlzl+bx93x9/UyKJy0lPDJhkC7LHG1Fo6EbWHOYqlbYdFSyddqK6WA4G+/4\nkeRS2mU3NoNT7uetZujeB0pxZC7w9eLmkgnWlLv9DbsZiP4q0XfARvHlnylJ\ncXDuoIg05vciQkFwbdW64ntgB/rd4edCMU9PSiGytx0ZYhrw+QVgdvhhMQil\nGKQtjRU+C2m+HH49Ovq/WR1tzKhuo5c9BunwTfqaHBJrQA7G80jKI30u9ls4\nInAFtUTkMvwYE8didbVfLAn93L1hYq9L8pp8C8A5rjzyM5ZOTwWjJY9eP4+l\ny762bM2STLpslYwiAFQUIDRF+yDY/YrYCFWbWUrCHpTDXxFSz5dkq4S98Ile\nMYYa\r\n=29CI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQiJP6cf8HsdKFPy4vMr9yQtxHgQENDbLw10M8B+oW7AiBj5FUqdSvAnxX8qj5p5a/N3PjoAFqgPY/s282BCi3yQw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.209.247092c.0_1594676212989_0.591790709107523"},"_hasShrinkwrap":false},"1.0.13-canary.210.41345ce.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.210.41345ce.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.19","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"41345ce7a4ebf6bcd6df9461bba7bdd5f8e3ba02","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.210.41345ce.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-htS/G4FEG3d09dl3DTEHRtX7pDs0OfJVxqNyeiqmb7mVGlitB9Lmh3wLUGc3CmTBfIL0BNMMQz442k7paH9kTw==","shasum":"16ca26a9cd43f29a375b8e4d8630c2c65b760a26","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.210.41345ce.0.tgz","fileCount":162,"unpackedSize":3109477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEiPiCRA9TVsSAnZWagAAPFoP/jF6McnvGJNH15OG4VA3\nEdn1rmxgChQXLf8vQtHQbqUGRLsXAnlZFWFsvyJBEMfCU1LWJiwdavMJZ25i\njfehNLmz36A0PT3WQyC/Mj6kGMbMiw8ko7bda8GSjHxsvv5xaf/HLKyiorcO\nu+NA/RO8PWi1k0qhKPDIPCiutA5BHlCn3rSuvPzI9HsmR4Yw2B5NEeFBJfyC\n+84En0AetVrjIY60dfPNwc401pnR8VzLMVQcp2VaQXFHywQOJBscHfR4WNWh\nc+1Nk05qKf8QJ/hbU7pypmfy68LF20kBIJ6jC1iSi9F5Yo20lbzH3OuHQztQ\nQ07gQBeaRB2zRNMWrSHEr0AlhOzOqkuCXb5soLIp0uPw/xop0IYuQpto1zhG\nYUWvWeTOhgM6PydZEou4zys0/UK79gGoTsld7ww2EX8ihssAwWWQmX3haVTg\nj+2mRV1N7L1CdTvYH+SvxrSMbhgH2QmglSqJXR630wMBNpistJHsZKBbz0GL\nVgxxhySdcWWxy3zktEon8svbSi01AeyRmXffu7sIoEcCpbID6mScsDd1ncQr\n5KvaLGGaBgujeXStt2K18x7kO6+Kc9KcyzsV6T2pNLHXet/CJBFADr3oXbIo\nF8FUv1Jeog3N5x8+QQFWlzoQIWqA12PZUSo7Mdc6vtTTC9Df0vwV6T8VhAt+\nAdsq\r\n=EI6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERgbkKU1U59s6pu0/1TrudWx0HcGvKupSjlWY8c/oD9AiEAifj7WCfu0dblxWqptWAhulGp0IWYZrktIkZzQa/x+e8="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.210.41345ce.0_1595024354068_0.43432745919696103"},"_hasShrinkwrap":false},"1.0.13-canary.211.9a1ed94.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.211.9a1ed94.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.19","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"9a1ed94c2e91a528b4e116bde6325c5338a5c28c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.211.9a1ed94.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-OrWXhWdax1LkLfNgx5ZVPK604cpnlOUeUMo8IBiAYwgpdba8dvbrEtZpu1K1+vOBJ44X+Etz45+WOoiydhtUmg==","shasum":"7909e804cd7b73c6d6145d37ec56702213e035dc","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.211.9a1ed94.0.tgz","fileCount":162,"unpackedSize":3109473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfE0GQCRA9TVsSAnZWagAAkNsP/A1rx3ajOFQWJ7iX4lIX\nRd0ZrotCcNqXdeZX4XaobwUT9ua3Iex3KWV0Arwm3jdICDZ76qjdaaH3Cm1T\noBngxzmLIqQvWSrgASNgF28itwKfqPt19mVed8C956207GA3jxGq9Gey02aK\nnFereYN98xo9tjzRELzU47dDUwoEaZNE2F95QwPOL85zO2Q1RB2YOAsNDwNl\n1AredeNBpVRfGxHaftvIX+Vbi2F6gAJ+QgB0+MO3AaYbmd8tlE5qQFvHQdhz\njDbddnL7Oio80bhaMN+U3NvAdQO5Ym6r2HFoGjNgGQ6cYx8PwuBITmU5c3Vx\n/Rj0PYpV8r/EQfY+Nys6uVR65E/6Gf4Z4Z8cRfk80aXEfSE+HsfOrsepL4jY\nbltnTztBwFYpt0Ek61u2Gj77NPwsN5CAjXHeQg0WhP8GvQ/JBxqcv6li5fE/\naEYw8t8xoBe71yl9uoqMBwefIAWWlBN9dXjnF65Eyb2zqXlmzb2wSeBXNgh+\nViotaImxDLVUFJeZYMffJEMxdLnMuo7l1wfM5YSpu5Vkz91aM9/eUv2JERPX\nw+Eusjxm9eQa+JOju/Y96S9VDhnkL0fYHv6ZBLzGJaEqTbQ9a7fG8Fq/PYUh\nAMe1/HMwRR8Gj8lkdTXQAeHCuMsXCMkpwjZSVBr4v/3FBdcZLYDkxnEso23D\nVahJ\r\n=ZUQx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBKvqaXiG2iRtvIqzDN9bqfghIOtpNhGKy/nndibdyLwIhAIWD14CG2Bc8ljpeTYYsvsCnHMSha/nT8nhCKDwsQfQC"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.211.9a1ed94.0_1595097487546_0.15549274112526468"},"_hasShrinkwrap":false},"1.0.13-canary.212.1be6c38.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.212.1be6c38.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"1be6c38dcba4676c5d4726baaec8bcfccbb96fdc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.212.1be6c38.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-oawFfV/NKg15L7GRNYI9Keb3tfu3uP6cyATZRI7wySFFq2N0daJCj2wxCIl4g6a/XRDp/eJcx1LUmx6uiFJ2SA==","shasum":"4d1e761980505ac028c5379526e12af5ae6fc499","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.212.1be6c38.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFgk4CRA9TVsSAnZWagAACkUP/jk5bsXgEd1zLdN9pK3V\nu5BsPofEl377wCYqPt07Tozx5uNwE3NK+Q3xyhN7XNdHnX2uX4cJ7EorLilm\npS8HIIvNpP6pWTT1JSn5ea+Qh7xs7NMBb3pMeMq9ZJg/2TkT4ZhnQm8yg1zh\nhs96+47fqVIxKyX0npPxp7QciXtCfYU9D2ILj/aXpXbJ5Jn5q6uycE/mdvqW\nBX0lwhsuqhrxbUWsKTgU2koc8cUC1t0srn+I7NC7/zyiBUkfrC2seaaHW3IM\nNBHv1tM6v6+icWlBdA8HKhlBAI9G1k23lFysczbZh3MyIMSwdufw+OjkHyP7\nr6rq/nbz4LP6adgog17Xi0wdoY55anSGzuVFWM3R2L5fJplvXowMTtKL/RnL\n9IhMzdRFbExBHCZEdGggFuz7oZ52f/AFXW1ONlxBkXqk0sxn3bgch5b9E2g/\nd2BfIXSta4cX8ODaOdKBrbLgJrK14+8fpGlIRbiYE4KEFTxx4EAUmj8irp/0\nWK98yOhSoIdA2ikROc9vqUPkBYSLgXKE3ab9zjy0V8H3SbcxQK9lOMoYda9E\nzpiAwbmOqwDg/Mlzqxv/bkJJARhIu+PxceSga+UtH62oAtAfH4rRwSvphKiw\nwrh0TvPe97/y6WpEzpxmJCVyIC/aOhR49TuCHWuGD555FkMqza76u2YGBxbR\nF3u8\r\n=W1MQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCh+3qLplkd2vuDg8og25Bkohn3AGbB5vx12q5OQp+vwIgThPOHXd1LbBkcuVvfndufZe7rhV2RMqp8tGXqaMeXUM="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.212.1be6c38.0_1595279671904_0.4841222474520386"},"_hasShrinkwrap":false},"1.0.13-canary.213.17beb7c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.213.17beb7c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.4.7","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"17beb7cf467fcc139fb9e9db73c25692ea1555d3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.213.17beb7c.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-JG45klqdtZ0FKgez935KYZsya+sx4M8SkXXRwIgph2n7hQ8/vdT37/ZxBDgdW2q/PSDRm5ycBaOT5M+iq715DQ==","shasum":"ce290fa1c77df9a78a0c90fe48f29908386ad139","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.213.17beb7c.0.tgz","fileCount":162,"unpackedSize":3114754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFgnsCRA9TVsSAnZWagAAg6gQAJN+D7lM3Lwrl9OU0O4F\nkcWivVda5wJV7NcsZApIIj/cog/lLFerw7fWUkzyyeQN4cu7q0I/SCOjhtSc\njwWrnzsxeOzCDJM244Hi1EhEXCqiPyNXEL4bTc2PIfWt6cWChtBdWdCDdZvv\n7b7hix+L5uIWKpa/F2EB7bSifD/bnpBZGf799rj9P28u7ILyqSKEfhAOa+FX\nmhbaMy8V9Spg8TvQgV2sGCwJ0DWl9zj5IJJfaIEPlgbF9MJVprvCygdSyxLn\nhHPIu1fk+RsTfQdjTS9uighd+YJLqfijfipNcCNVdiVxt9YZ2kLDm7aMfM8w\npw26J6+i/B4G1QP66gxXoYyLLElH/bVQ3G2DQRtrhS3Irc3mF6IeRR0TeN7D\nG7hVh/LDN3fdRs59IlZNTViaugNHeDcwmKa9cDZ521ka2/P8WjaeFVn/kfEG\nUQ5IdLwcEl23K2DqkCfjgZNLkMF4+oBsHyE6k45mP8GE2u+1KCnkhXWRSPR/\nvoGPHPB/jd+bLebToJtUr5dySOdr5g8e8scBXfRgBLaWqD0oFqw//BYRoRVO\n04s82eJqVtYkvANNdvjou1WY9L7QKGpGlzBc2+8r1Mt0heq9cwKZCByysCnA\nsVBBIPodW1o84kN6EHV/ubNVjkBq5brg5APNuDMwZtAHvfRoN2dV8PtzqW4G\n0VRZ\r\n=TiC9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE6K+Bs1ydk8gykwcJhVTKjnmeMnzlPj3ne9IRu3yL1gIgZtlQNKcA2myaPlYkScMyELRKp7fnWsQPakkI57zxzc8="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.213.17beb7c.0_1595279852233_0.8143361422316266"},"_hasShrinkwrap":false},"1.0.13-canarycanary.214.f37e094.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.214.f37e094.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f37e0947a85185366526c4d99b9079506e266570","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.214.f37e094.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-3lMmXvbAHDcMnG6g+i9aE0vQkjU77/JWqfIsHlg0xb3eO1IvwnXZqran0IDis2on7pihyPk4Ztrq+v1Z9dXRXg==","shasum":"99089fc7612506f328cdd7b8569482c9cbd9a71b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.214.f37e094.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFgyICRA9TVsSAnZWagAA/u8QAKUOuFAcSlYUDRCGIAhw\nUx8wC1EH17wuCVeaFrW14KDRG2PgHYh08f6mNRPq2OicdS7VHepPx3Sl3UnP\nb2IcwysCdirnpXhTqX45RPWap3Wt3bIFC0TlJw+lm/ut8wUmGEuJ9kplvLV7\ngzubm5XfaTfNxrxrL1oguG0S8G1JUQi9U9iMqem6ShlznXOnC/C3b5n0DE1Y\nQbZgmU2Y1DBdyBXncN6TbIgX6o+qAdpLi3SZVbDQAkSUOC/OfLxTBoXy+NjW\no2F6vTBiXSVcIqANe2a2YOUEBgZHM9lsBJHu3K0SOahlUYR/b+1awYS1gYV8\nVx6KJjHvEnLH6cV5YX6E3n+vCyeo78+pSIhQu7TSgqCqF/YQwJ5QkmNjp55u\nR2B+2DtxyoSj4AogQLrmYmY4FtUMAh5OOuWWucQhsTWMuRmH+hbZa10w74mj\nYAlqlJhF7jFT5C+uBLvb6mId6GVUtyORqf5D/jjeXO24R6W+qWDbqIaXypI3\npC/9+OwHrHqvU0ovgyeqSKWt6YZp+LJ96WPkOaJdSbSI7EB9ZkHcKGUklLWj\nbAjHebsuePX68d1iD4dXyNBZkcxlF3lbA7TChDQECSktvM20ZMMcgxoGLC6N\n0jZuNUQ9l98mLA3uBY9SlCgitZUiZ+fyrPwGClgFC9bCFSTRhkxeJRiiTlfU\nUmEm\r\n=GLNb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6Z2PO8LAdvIfrCx0KsgtBSnNWkuHaj3/fswF1YJoAuAiEA8Js1ygImcm8YAWcWFfosdTPlILmwngHUrMC9mvlpp0k="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.214.f37e094.0_1595280519736_0.9937540035057928"},"_hasShrinkwrap":false},"1.0.13-canary.215.eeed883.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.215.eeed883.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"eeed8834272767145e7fd8365eb34c57d2f56574","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.215.eeed883.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-v68Vk3o2eh0zucgb94wObcnvadBkIHHy6rRzpW1QqrMfdxKC/i/ULIwKMB2C5CKi9A9JDOU7TDLKvjBmbEw+8g==","shasum":"9f59ef6ea7aab1739f9ddfb7450a96e81b535c29","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.215.eeed883.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFg8LCRA9TVsSAnZWagAA5+UP/0AqFTJoRRY/A9pE0sU8\nAU3z+S/62gF+oro9Wc1lZ24Xe48f9HZpWQx29CP/SuHXQzZJqucFS45HxhfL\n4ix/t6E2ytv28zuyMkbkIl5P2tdRoAgp9i6jbPudIV2dUdqOF2sMGKSTsPdC\nam5itPed7Kt8fkXum9nLJV96N8zcLL3/nfGIS/Ho9gKEfYzPgmtKafhkhg1D\nx35z9mPRo7NUejDn4kuAh8i/Te+BEHcj9ERQe5bwSELngdqEEcCCmMaHyaLt\n1z1XQS9mbII4xmtn9Xeoefa7IVEp7mNppUk+H07OuyER7he8jUhs/azARe4v\n1m7PwFMrsjM+h+tTIC9U46H25NhkBbZy1i0Q8EjDdJMsMdF3/XXt/8nX93Ca\nTULBXrJdF+Cchyle0p4VvNSByHKFNeYlmz/VPAUOg6PJB6yY/1zEcQQy/WZW\niaq5FgYrS1qNkcXXa6C81AuaQz44PaZLPgPnAVK9peTPkp/jBsLiVlk/+AMD\nbRKicE7x+Fd8n9GPGaad7EHByDXrSh/SkdA+vOP8iHooBfBhxF7r4XtZVNlL\nGFpKDP95TPy7UOy4fjqt5mMRiAsA1quUJFuXG6NgHx9nc5NGyQqM4dlTP5c3\ntITTEwZBiVQeTsLS2XWxn2ckvdB5C2fLs7V/Z80BuOufbug5G3OSBsXcOLIa\nL8ow\r\n=JR2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBe/UyuNm0lFbAavFwk+Kr3QvUosCCAWrwROdKqTvF3RAiEAgtEnwUONXSy+F16FNl2NSSDNtQxma34ox+FOPqiGWmA="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.215.eeed883.0_1595281162777_0.6927696045330978"},"_hasShrinkwrap":false},"1.0.13-canary.216.6f21800.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.216.6f21800.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6f21800c47c4e9024f4a16a969b6b7a9c6c7bbc2","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.216.6f21800.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-h8aYjaidGe1mmenczLy/q+3sX16nfYDBg1DEjXLWn/DnVMu13z13/FGXTeCJY58P/yTxw2oQNjGreNmkThiZXA==","shasum":"dbade5d221bd93e397aca213240f863597b01535","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.216.6f21800.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/BCRA9TVsSAnZWagAAycoP/3bB7SJ3nCfOVcdJIcmv\nVQyFikmTBDlWPo4nKtg8JV0k7zHKFUWmmM/wnXD9qfCZiZHiIQ+JWwo85x0O\nsYaHvqLZt2yc/uwmpOqXR1zcPEhM5/BsXvW5DZ6LR/p2+4RVP1BvmiTVY4hQ\n21VJyq794x5CaIA8Huk3VSzww8O/3RwltRwqHbmPUBvuLHeBFynD6PLIasGA\nTB3p65eXFyhsO6Rqmg2HqM5qRIdUw8PPw+pgsbt+Gv19pXBopdd1O7jGDMiT\nO9ifLIhAqOQivD4EiAPds+TxenfpCIEP7BWEDmIHG39B7EGWVWidMjguB2xU\nR0q9roD9aNEZq27zFw4r+9uU62qu/5CyQXTAajim/rdpYuoaQMN9OGRKtDRY\nTG8VnF7D+uF4NZwQjBWoW44Tvnvdu1yJGXy5ZXTm2XkmjO85x9u1Wfoco9/2\nma6VUusm9Mh6joFZrthTLI6J71JwBjLfWKg/LLBWfYh5g0rlxuZDc9j5fu8u\naZ7ZNfYn/VN8ehXY7xDD37lKNMjpbgRrAo+cVBupd16DMzUiJKwnZDAqwirL\nShf7+d4ND08BkXHYdppdht6W5104IrHsKNxpj3xlx9qQnCsJmkuCpgZKClOn\n0DLi5OKcOACa6xt4r9WB3699flmRYFEu3TpnrjKN+AX6B5j81bk3miIdjGFI\n7+bF\r\n=ph9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNbiGsmx5cpq/QLM4k6Y74aduN/4e3wlDYM/RR9zw0ogIgIRHPGkwqFoEaXoL+kLVQ00NH2kATMApfMsuP+uq0Lpc="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.216.6f21800.0_1595883456550_0.1227221701742034"},"_hasShrinkwrap":false},"1.0.13-canary.217.9d67e7c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.217.9d67e7c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"9d67e7c9f12a3db6d74c33b27734dbdf27fab6b9","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.217.9d67e7c.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-pdMyxv3UGZaFHRxG/AHKAtVJTfZm7ff8oBe1y4mgOmo32KOCJxLEUBnUO7jLYRjNVHGeAjG5SW60sXCaZpjWNg==","shasum":"dea770f4af11cd30dad38fcbae816ef039b7b01a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.217.9d67e7c.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/gCRA9TVsSAnZWagAAKKQP/1R5FQnRq4vl3JXZvF6V\nIzB5IhxGFus1KigPEnKSK9kD+hCMhwnHffiMh/vBt83gyuvkKkApUtuk3sdA\n+QN4M85RwHLbi/6Ma3OlYdIJFtQA+Lq4/UrUkGNrXO3J5oXCHX0+oNy/hCJo\nz/SDwDOpE+OaWrS9MK75FRanuJzKd8V0nw575CxUQXAwGVbpYeuMAm48BP3F\n+PM9B/tAywWTr+dqunNuQGU/7Bhl0pALO7SfH4JtVTxwiG1lrP2HfFSi/eWl\nGgCWejg/DdLcesO1xxezMsRYBRvvGcrjYZy8eyCcy6CJHbfvGJ5MA3vc6Ryx\nHZSddrXxttbqobMqnvUdVBo8Vwn3IpPnH8WyrIxYwh51oGbO6+wNO3WPNXks\nAg2v1nujQ9CieUWOQD4EJnxxCBOUhPkWtvlulDLCS3zdtJ4lD2BqfjdVdmZI\n/EbEuiUYMQh+BXC4TUSrNdb9Zy81umIYMe5JOJ67DreGNchCmQg1YGGZSL1o\nS9sHCFctVCltwmwF+WbLmkoKSlbI6tPf9Os5tmgF3BesdqscBcjThIPYiCyk\n0kCwokKUa5Qe76Ei1gvQYzJsJGTuHx1dgIyIDe3ewCrfDokZe91WeyTQ7UDF\nbE+LB04hKIQ/7WkPT8C/XR12J3QRCj4aPyLnboPTNcwWncwaKHTy/eWxkOti\nQ5B9\r\n=KI6j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1PXfm9SPuNWtQwJjA7xWjS8bARPo9pkjNmvmWMVepLgIgbMMWOwoJb3xNKHqhypdnVIGVsvcnUqGBwU4lVo1YW2E="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.217.9d67e7c.0_1595883488056_0.9855897113525636"},"_hasShrinkwrap":false},"1.0.13-canarycanary.218.62c2f1f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.218.62c2f1f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"62c2f1f96388df61b03b881e1754684e15639018","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.218.62c2f1f.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-T3YDdVYH6brBmj+2DZgBi43NWcBFeUvc4se6qvvcLk6l2jHvM6ZiT0Fz4TxqUPrlbCtVg2da8pUrfOriSO6uZg==","shasum":"a288eeeda90af5795120c41eecdcd8b50b506c5e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.218.62c2f1f.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0DvCRA9TVsSAnZWagAAwLYP/iwjg27QDGVDLN0pCpSq\nxcV1d1/T/7419B0RURCCsX86FFZQB9aqNzJPjJZuDhAUuJbztGhAB1/4GOQz\nLNX7Z+VrKhQiWebqLokxRdgtW5JiTFe5lcGgzYj+aZ1es6f+43koakbDUVAh\nYIm6+xXuJJPKn8EM4T+K+u6qIKAk7g3QMDRw23hZNUAlXoJrZ4l9WTtJxG3b\ni3rj4FqAejM+XHp3uECMHH75M9x8plu3k/6NrlJctx+5Khw9u28X9hBxHXkh\nAFWlweo0Y16+z/Cp74a05qa/IOq88j8ifmwRVz0bzcEezsokJMb1YelLT1ot\nHTBl3GXPCT3bCbBJtRXSdpgDskneE/4ag/qi4rbpMgMEviY2LGRrHbAmcxQD\ne+5RyyiybR90gVl4J/F61bk/gLloHTz0Xp/hhoEnDeff3bb1eOex+cwcv1eF\ntbAiV4vKvHbrSK3HZhtIPRsFyGTETQClq5aRNN+GU0S6vWPQvFqeFYtHU8vT\nIEPbdLLtjcX3dQ5N6tT20Y0vN5l1w2o/j0FJk1i6D+bXXdn+k4DvfMKJq/nD\nFkfbBA3FAP7JRYg2qktqoLyt7gJ6LyehcEy8t6O5/aWsZzNErKy2g+FP7qYS\ndpUFmoiRqrJ8YCc0EqBlg419FBkVETnsT42sYz+W3lGSAJx98IK+NkKkECD7\n1w1G\r\n=JxE+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbmOkQm+HFnEE+9n/AKfpo1O0ZiEkYHbk2+Te7LeTJKAiEA6qYjI6hq0qKE5fixAq8cxOkOPAwHAjQaqaC8xEomx1g="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.218.62c2f1f.0_1595883758535_0.4660689677760259"},"_hasShrinkwrap":false},"1.0.13-canary.221.7f1eece.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.221.7f1eece.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"7f1eece2a7d6d67ec278b7ff2af1ea300843ee8a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.221.7f1eece.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.20.2/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-0MVWt6zczk0lkrZavx2EtPiUuuEHPWFXlRNI0UF0luRhiuE5jv470PJJFSartWOh0PpmzBb/rYjusCEoFLTAwA==","shasum":"a88514b72d87efffe0601272e5b017d08c2c20cf","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.221.7f1eece.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIfC8CRA9TVsSAnZWagAAB50P/A0b6J7EoxY1tUmJJUL3\n3ollT82dLtYQRLgP6c+nYLcX4TOJB/Hn433gplMRUgCHO2v0lDOjM6ccr8FO\nBJ2tIL2yUi8PcGjeXNaEn07mlw6ahm780HQZg82wD2y5upxd0oHjmvdAlkkV\nltx58gWxiayMUyoj5+60f6BYeSNDLiHyofCY2wZQwrzTEE2t0Zhtc5h1nGzE\n9ywwGlmanJF3PMtab6i7H3TMtiQbTt8ewiaZsCeleQAbIo185u8m6a3WzpAS\ny0HC1ZXBuaZVYFa0+b38/hBcf/o9wD+186B0ylvqsxHC00G22NDi1CnexpgB\nck33Z9/d//jnGROZeYBMW8X39p5D4f4PM6y3Fr40rbe0eoBy8ROlHc+sjPdg\nvnJJIMDwwgrlqLBPwF7aQS2tyJso3edKM9HiDcr31U1dIspsp6mp1QSTZKoC\nuIryh5oHmM7jZV5p8pRIWGRf519Ic9DImZCtdSFndsSpqtof48YaZmJaKIJ4\nJ8Em80f2TbzwkZSjPnGGSxiBFm7QOnsYZf5KbA6CiSy2aefJhKjgWWXS7N+D\nAtjT4/t3pOQ5yiPUw0InVBBKUITDNe1bf+htTf4+gMO4mwXRYLA4tB7hvEYW\nCFig8Sbf8TLeaGzKi3nqgdOTpnC3tRw6pXziCK/I3DM7AHvx07rmozBfDKxt\nlLw5\r\n=aRGd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwzhZB4425+DKlOzerPwCBV5giKnHLvhBeKmMLS0XNSgIgOSHsOU54+zzQHbG9aIhbAYFzlVcIgfV+uskItuWSWYw="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.221.7f1eece.0_1596059836396_0.5045881892693349"},"_hasShrinkwrap":false},"1.0.13-canary.222.b96ec68.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.222.b96ec68.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b96ec686b58386fe952819092a6c571afaa8b1ba","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.222.b96ec68.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-mlO0aJYkLBREyohOhuq5aEB9Y3o2CHSMOCGBsYDQ2fW3S9GbQWOFzC2E/Xu/sz1a0NCq2kFduG5SjNCQl1CM6g==","shasum":"49ff533b06f0e1a92e929663e168c9b726bcf054","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.222.b96ec68.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKK+TCRA9TVsSAnZWagAAvwoQAKJjec2NXyR8QXJ2ZIlg\nKpyTo7TzHG71gITghxa3+hD2B5JedTjOpiVlKHxnTHEQtJbThyigOia/9sLI\nDT7NK3scZ4+XKWMV/kWOrHzgJCtx/zUfHNk54YFqHhgb3dQaNvcs3xWWzK3m\nydMTiel3ISFqeHIRQ0AaJGpX9qCkmraNid2j3uiKHW7Lz0zf3yuWaGGmZrF+\nXvweMziBC5xttVtLOLTkJDWH6dm1mKm/3Qu9dcHWDuvvh82PkhZV/k400qee\njfQOoWSAfSpu77LvyDgyT/e2BZeXlpJwCdPE/twRDVJVsIEDuWaeTqQ6N+dr\nuYeUlwZLDC2cPa5I9o5P7dNTwV7R11jK1VdiRts0U6CulpZiE51KQHivCOz/\nYumSX25j9fVG3/uVCFzS3DrDaa/i3VCoSNDAnHOxTLDaMiPfvu/WTr3p6tLV\n3/WPc4jACl1WJp6xxeBRbo756MxWZWp6uWRqfIfy/9z/EWBpn60uoH9iFL8M\nNUZfRQXP2a/PpFuvEGMnOOUwoUVRcNnsnnv5wI75wcVsDwDWUdkn9DxF5w7O\nD9haVpPtSJ9AXRAnYe/0yX4oOt3cDRezEeFLIt86HXkpkuhXcBxbcSSgN8ZQ\nNINFJCCGYE902DiDAQHayZ8zmyd5mJrEuWCiWogFNytuAo0wTJY8RPP6uKI3\nqCxR\r\n=8hTN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvuWt4mdOGQ9VVCc8WtGA2I7PlL5oIynZ43819mraaEAiEAs5jeRYJ2iN3irsG+Gu0hea2NSMeNI2scU5Yw/PuYBfU="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.222.b96ec68.0_1596501906764_0.2887253666589855"},"_hasShrinkwrap":false},"1.0.13-canarycanary.223.077b3c6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.223.077b3c6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"077b3c662226ab2f9e0bd6c7b66aac49016359c7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.223.077b3c6.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-IK8ybyozZ4W6szWZgSIG4IRfyQbMu7Z9oW0geShBaJ2RpGspQFV9u6etXO/N86W4kJLQ+mLQc2NjXmb3+COnvA==","shasum":"d9af242a6808279763386c7519662253262fa84d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.223.077b3c6.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLMfCRA9TVsSAnZWagAAKssP/i2mi8D3BBuTF5qCVAWL\n6a82F9/c4S83ssVJmqvRgv95mEIB08wt5COQ14R8JwSTXoFMpO9zMMoZhGrH\nPs5WCwq98O2gXXO/ZwWRes1TPzwims9mXeiqChABRcmdI5UwbgaCPf9d3fnr\nEqRJM0UtiX+H6Su9vKXSni9P8LCQgPbJ9/s7ogAnwadPLJxAhJ+OVDeOB7bT\nZ/TeWAvZsxZUPUaq8E2hd9WWDkHE+82Yo3G3swpwRRxVUiHSadd+f504v5wy\nUwc5+0SellNFsZ9SzUpfqHALLy7/sSXhNpIhnKbFXLCJzIhVjgG5D210NcGU\n5+W8rGAz485silMe7ETc57//MdN/72dz8+Ap1zVGw21KkOoBOqcMDfQXMQd7\nvXb3qLMCkv+F+dRUpo9mL6mm25BUwNKTPMoG552kulD2nyoDWRXro5TssKND\nu7Tzovuzy9LYfQc79+2ylj9qsGoHoGt6z8I+DyhF+sHC51n3afaxHDvVd58D\nVi64os07/eyr2I9eMtCxTdPdYUSiXscc5mJNCRfBApmPZAwT3SrWcMtc//pX\nxwparCmYWhSUPigxQZePToi4ruiESmwFSyBDWa0fmDGdbFS01XzwXK265JRt\nZn/tJXn1KmMXGJbuEJ5DznUyV0QP5Hdi9ItxWQwMVdGrWORSPyWWG2P5U0ZY\nrtE1\r\n=HEFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJDQI1Nxr3LKazVEt2uwSUcNOfsEljGJAvsG8hyLsGcQIgDGCJzaDmvx2jq6DWS4HTXJE4nh9MmtTnJc2ZMXtgatU="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.223.077b3c6.0_1596502815035_0.06956602554482472"},"_hasShrinkwrap":false},"1.0.13-canarycanary.225.3625c96.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.225.3625c96.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3625c964470d9a2ce2755711d6397d46f793f6cf","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.225.3625c96.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-wrT0vnsK8eBkD7o/btPOSoCiXMMqxDanzpD3MvAQ7wWlKWy6GSCnhOgAXTUv4P9qhN5xLfKNzG8LtBgaMQvSNA==","shasum":"0187b8a476b310bcf2f06c40ae0285661e7358bb","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.225.3625c96.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMdUlCRA9TVsSAnZWagAARzAQAKKvKV0m9oVCfcZqViNp\nv9akpoYU0IS2WplGzG0sbd6IqQEunFleUHxIPq4HXH2oZK8BRdBxczvo/JkT\nunjLTjTFmTrStIAo6SW84mko3NF1BRW2f3Ux+wbzMeTwMnwUrvL66U0PUBZr\nGC6nqWeIgdQC1gSam3Fg8qQx6kkLI6RYb7zRCXxDHm1nVT2AbH/n48OlNOSw\nBkOmQFLxoSm+Z+L1nd21k+f12qPDSRZARINA/dAC8yYaSKvak/+LuDufRl04\nIUi14NXmqMkVbWLo6Z3V9LOG4JKYjxnH41cMu4B9zpjSMkxo2+rOFNKkyNy9\n+dZ4Sg4QLJW5YGMTTlLUIj7KsmoljyhWT380+jyiSE37l90ZaRNR9zpLuDIL\nxKWWe3IcKCi4KH8odbIidhEBVy23AnznBfpt4kQJ4AmkDMroac12UTjYzwG/\nA8x78rYAMNr6r3gDbPmj36cFLpX4cuGts5a6duUnC3FoJDCq8HXkaulGj0hm\nkV8+GuYb+GZViAjOPUgWWS4G5Ciaz4h4OOu1GYj/qeOrDy1d+IkV6jtobwbP\nLBJz7cB1w3DLYBFOzthfo6p7jfkff5+zFM9R2o6PJ2yBlOhbJQoy4ACnnCwC\no0YKCoyux9OgeYpkwoTr88I/HN3JezJ3nllikQhdkSvVuF0QkGcSgCIFPe9q\nktme\r\n=X8Rn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4kxta55FwOdquHqpr+R4XhJpUoZpgIm6MXs4hO9jkGAIhAIaRZstDbuTaDq+PhEyr1Ro/kZ6prywkC+SFsyYVXPg5"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.225.3625c96.0_1597101349170_0.04120239130561498"},"_hasShrinkwrap":false},"1.0.13-canary.226.f8d2e83.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.226.f8d2e83.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f8d2e83fbac033c58a86b11e99db331adfcc8e76","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.226.f8d2e83.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-CrNBiuLvwvbJUlAP/PsvvdXjWVFGHn3nwE8T0wUXk1yh3/rEQ0YqwL5okFSyKEoOxaFlL0vIjibmu4wOKNQmFQ==","shasum":"abc1e87f08a6685ce7460e34b068f0d624c056fd","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.226.f8d2e83.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMdVjCRA9TVsSAnZWagAA3aYP/Rk2ELlCyRQm/NQcHZ28\nxk+nHjCIhshOPGUjFQEo9to+lKmJcVEAj/TWUo+3us07hD2cNkE2rkbRkQ84\nvCNAomPZfdbGVJKhE/2bCbQQPPdn1JwuWTBBjbyXT0Pf0ixO0n4919DZiSuw\n2uY/kvRQ4iqmIH9D8juxh/+2r0j6IU038c+5hosgeStgHLTNezy5AL0iArJB\n8ZEaGO6MfeMcbE3lenO67zxu60/p6x9z0oX/Fiufvf/JDTVnDne4tYR54wO/\n1S41iMn77JGE7J341AnVsTlJERS+DsJFCw4BAXLKXxRgWcG+bnH2HNkGV5Nb\nJR3Q3uobbe4sVy0+vwiCB9krrqOK6sRXGJRSX4nRjZbWuXSoG0ya0EU4DUsL\nLXn3qBflISCbH4LEJpPiw1hoAXU9GGThgbIFzlN/JRecnjhHpCIGkEooB4KN\ngk9P6vrAziuqImA3GrHBlmYrwpU5YYsZl1tRYROsvZ7XmYFIWgq7+jdkY+ur\nI1MkzrS+oxL3Ra+E8iuWeDEb4XvssGSJUusdk5+giUU05FePJlvSNW8gOnHc\nHNZveZe+WExripP8dGfzL6B06gS6N9VjHJba7WQFez4XxlHecSQIObEv9dmV\ndmIopA7QStIlr4IX2I30lfb0WKhln5qt1UQM5x3BumYA9yWUSWk2r3aQ8Q3l\n/WWt\r\n=LsIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMhgKr6mZpWFEt/a2GDEEZB3TIqoyrZmwe9z9Njh7NZAiAf0N+52OWw/NBmwkc7ogKZtBeHJVI/Ey1CgpwDppKxpA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.226.f8d2e83.0_1597101410395_0.512400555899593"},"_hasShrinkwrap":false},"1.0.13-canary.227.ef1bb9c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.227.ef1bb9c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"ef1bb9c6c90590d8d8239376ad3b09c8fa488530","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.227.ef1bb9c.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-GQIg1Pde1L7B/cYt4xP2NYL+56dYAyZYYSVmetQMSY/fmNjyX3hiYWwGBNC9sbT8gGDHmG40q7h82D3g7HKXnA==","shasum":"0e00244241f1553a439c7592a267398153230350","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.227.ef1bb9c.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMdWQCRA9TVsSAnZWagAAoJgP/jz2o141galHN9ggtJpc\nxMxaWu3s2KwwXcCjdeZguxU0wpZy1LIiwuapgzoyWo4bEswMM6b+cXomHEI2\n79R7fZ7G+EumT9ylRD6yaYYNbMm+eSz6lJYqojXPqIcxQKAxID35Kvbm5mZm\nROUUnatfG3im2b2N06gwD3yzK4wXe39r3jtTOCu8KKefIKBFCEsQJrMaJgG9\nhZQ0FYoi2ydKvv1gq7Y/hbHqNvhjac164/9MkWOZHBFndQsI1bKnmYxCq936\nWroT9Q6ZvbXjW0B57PDNNcLvJlPOadl71EL1wbpRGOyZI/P48zkIL+EYWUF2\n91gx7AzNqq1O53imYLeWq9Lqy3fjYan9BZpD/KS2Pn9/oE0GmpDwMZpYEsOf\namnwiWZxYdNKuh4RHZH4CIPchgFq3deViviUFIDGGjtfm5ksRJsakIbHgKQg\nFwSOfBMwPrw5KbqFw8xRzbQAx5KWyyQU33S2IUttI5/bfoWt1jJyZbzXdo9U\noGOTxfQZlfC3I4IHUHqLbWE4w73Cie3D0cYTY6MI3uifDp9oo/q8uOFYhO9M\nJLxmExTVqMTNmHZdTEJWZhibSnRsL9u+C8HIhWs0sEPwCtNc1IEg3W5g6svO\n/TVo/cDB5WLE3ZvIVLwGx+jpKlMSYWK4UkEfyKBppIUKZTT0yzffj4ejlBPN\n6+Qi\r\n=SsEa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF4ItzTsxbYslxRyfFN9Elqm0X95g/Qgfc7UbDniiJXQIhANtnFhdBn342bORta+PZut9ItJckPhuuY9CenFDcLy+D"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.227.ef1bb9c.0_1597101456087_0.871185443026991"},"_hasShrinkwrap":false},"1.0.13-canary.228.2cee335.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.228.2cee335.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.20","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"2cee3351dad16fd9e70f66d9c19bd09846386c20","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.228.2cee335.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-gVLp92Xnr+jbLV+BBvEa52Koq2zlw4W8wb7IfY5SN2dBEGVGHwQ2SjchrKaqGTRxHvswOqTRTSnFzrlG+jvInQ==","shasum":"8bc9f7135a06e6b01192521ae1b3256aff34f34c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.228.2cee335.0.tgz","fileCount":162,"unpackedSize":3109477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyPoCRA9TVsSAnZWagAA2xsP/1ey4P7MIjIJBzH9/J9z\nZiI5O6UATHraElFztsSlcZXP69jL64Gug5qYnXhlyVnz5F5AsWSQCHukMq2a\noAzW+S6+SPbvqdhOiUatnH9RsRAc9VA0AaDGMTJo9p89T4tSg6OGt3lAP6G1\nFItKxQd6mpo7Bp9p4pJjOK/tzEUH4ceW+/9SdoE1pbjwh70/c478cbU4hsf8\nPyoenTm5xmoBy2RGI1X1LvtZ39kFiysBVc7k171rHpHsz3zLvc6/O6Z746PO\ngLG2Qi1OhTqdmxGKdgRi2qnZDn0n37MNmHePthS0BhAOJQpooiHN91Ey9k5Z\nGiCW7MZRt3xDzsdS+wPtAjmWTCkCmFT1t4yxsyJLPXVMZ6yziOGoEK+agkX5\nzviFhKzsTFs3e9AAQRFiVYOs7fF630dRvMae0Ej1b4Z/FxYFZU/XCAkqXKti\n4tl/GBR2FWBu3MhvdyTq2HmU9camlTXc6BJfsb2eCy2mEWHo8myyMjJtKOv3\nToOsf/Fv7FSUSlBS4V/anvG0S0gIeHHS+hVtIOYUAjwHAkvjeZ5WVIJ9yiO3\nzvLso/K1qCtz5pvhlW1jOqQkCCloQOtTrb1Ir6m0M4PkZol0X30cWVO6izFe\nreMbRLYJFujP1pKgi4iwaqZ/hqPmUncy74TEUkVzzub6tPIBmWgRqCHEk1fB\nWKRr\r\n=vJWt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAd1V7BWbFoV4B1eLOAhjT97x/5jX3tPENtWbQvuB/n+AiB7rEr3SrSbSaHIfaOi2mEBbCaR+iVL+nWCTNCqHvX2yw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.228.2cee335.0_1597711335934_0.5584770433316546"},"_hasShrinkwrap":false},"1.0.13-canary.229.c56bb4a.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.229.c56bb4a.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"c56bb4a6170f32a5353e6eedb9d8e71efa559d44","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.229.c56bb4a.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-bwzeTSH8NkyhwjJeMeC/GIiC4lYCL8qrvoL6nnlBNXrx5B+rtR9gDzEHIdphUpOq6pzENBWz7mj8ObMuhLMYiA==","shasum":"dabdda3625e94de70d1c10f6ce4a52b3bd10174b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.229.c56bb4a.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOybYCRA9TVsSAnZWagAAn3oP/3dmIk150eAgWWpcDsxo\nkAZ82sT7qDx4IkH+njWAxAkswHA++9J/3dDqdaa0k2bMpnSAWQ/DN233CMbb\nkWJT5DxLkFyIFegU0u6CEWpZhbL+AebBSeQRKV0GXsgK5oFw5FdwyBYM+ef1\nwwr6Rz6ArjEwF5Fl32RYuTMq4bUSIKPo0UawHsouVfaE+9SoMWMd/Bp8K1AW\nlMXNeHNS3EKkNBqC+FUcV7WhNiGquf6YMYhZsSRLmLi236q8UYF5bhMppwke\n3VjUcABV2QrgaJndxlqxITEi3CAOA3r+D2Pe7JHi+QMnllzuHpHNDlpPdem3\ne1HxhHabSS1L01F+GGgEjt5dVDqxztmU4czqc6PBjW2YVbaJOBhg3wpURk34\nSwmuXd6JyxJHLO+qvIbkZlPVY7iAj4QezL7nIDJgS9BxXT5s8X4v6WlxVDQM\n+0AyipgfpW/ZImU7NrY1SkT9nFdKSRb+OCMZQdCvQ5SOv3H7v/wzqTxDEuxO\nehoyWVgTmaHzghCLY1NB+3YwF94ulcrK8JggoghY7h5qjubkGl1kpuLnn5R1\ng8Wz+KlUeawrqK8hYELQeZctQb2ReIfLoQdbsIyJQeQiOhXCZZTgOHwqiXF1\nCSZYbXmqSvCsJ/qd7PLdL200r2YrUk4AePp9/DFyG3h5tyI8dAFxPziAqB80\n2Pvp\r\n=dNQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxIZiVKMNZ6MhDhus7C2IsbM93CQnWVM6zCJDNm6ys9AiEAxt9Vna2ILCjzaOJUzb0Nyk6KA0kAnZXk//h5n197L18="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.229.c56bb4a.0_1597712087822_0.8716374713459931"},"_hasShrinkwrap":false},"1.0.13-canarycanary.231.07e41a8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.231.07e41a8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"07e41a8a026146d432898eadf4ba50d12ebc6d33","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.231.07e41a8.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-9d4gw+T8tFaHEgEqD/Jfy5facjw3oOmz1eAWOfcK13IJQXkAMRUJSLdmxHTD0nLpwEqQXAJFJbTR7Yn11i/VQw==","shasum":"f6bde9bfe3d7ee3d397772352bed3d141792f148","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.231.07e41a8.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyg9CRA9TVsSAnZWagAArNAP/0CEGGSOpboY2a866kPW\n0tjHAKWyy/PtGXcU3sANsbV2knxElmwJ7xor0cBiIabR8YtIvDTSK7cRDGM/\nIu4RSPnZSWqMhaBlUQAUqxuTZRftv/MMWJwU7sdnuqX9sxWlweWf15MeS1uN\nw9cJ2hwcrxeQLJKkC83FWnqwOy0ZMC8VmwltNKPuPJdMLnq+4Js2yUXs6Y+e\nBQogIQeS5sIzaFlQqPzMiVMSkHFQrRTWY434A2UvYRwn9HmY3/6p9L6LocsB\n0Ae6MEWfDfq9Rve9IliJwG8lpyrtp3/RhALdIE75sm6FL3U3XzTFBl5Yy3kv\n/X1ggApSUsJaFgH90Y2vojgmYKxmIJKOSbAmQ/95s7i9wsUFkDbGWeZktJ5L\nBY80WXIXDSLRogivA4SjgQjChhcc/Y+D0xwFpiacCmR7SxlXNu3GF/OjJI+p\niO/C5+JUYwHfWuII7kQ8HtoC7R+viNp/Yi+0ezYzuBbhGdcaNzrIgmw+KuRq\nIp3lyykrQbAOhy7ZZoOqpKrNxvE1fdI46HXPqVi6sD4UNjH9auy6UteaHr0+\n0jqiSrnHmttNtxUSwda2Gryo0/Y0rZgEeF5qjNb0pVwkaSC6pb83wzrCCQCX\ncUT+6MHs6O5/ipvHJZ9EeOTnHE6zG3a+LKUK7i1QqLY9UimVATAuWF/8SBu9\nY2MG\r\n=3Rh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8V9EWO/A+AnJYumwZzLsTnuPzJJcILJPuJqCrOVY9+gIgd3vPBt5ZZdjjYB0Ru7OLpeu+RWxU16XEsTXgwTtqVWg="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.231.07e41a8.0_1597712444738_0.6169983154512155"},"_hasShrinkwrap":false},"1.0.13-canary.232.5ce3c8b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canary.232.5ce3c8b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5ce3c8bcd52b1b9e0ed55fea603cdf597ed4a01a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canary.232.5ce3c8b.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-14kLK+SiOVEi4HWE6KcaWEr2cw5U/I7jvr72WMkJgiuL8deLHtSBVP7QRLisT+WSO2ZPVY2qQduCz+M/oXJscA==","shasum":"02a30ebe2aa83ca8b8c0698c139005d9b558d5e2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canary.232.5ce3c8b.0.tgz","fileCount":162,"unpackedSize":3109100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRMi5CRA9TVsSAnZWagAAJT0P/R6RReU9lgvoOAx+2t1C\n/imxJeugVlUCQB6zLaxKlgbz2P3LmZ30uL7GPZ5SSgzJ3cbCkQ78ZQHY4ipN\n7+MzEA8TobzLPqQdz78pEfI/QjTrkn6aAbaSefzcyv8cb1wAZYCGHRMqHf7C\nZpgueiVrtJiRRXzYMfff0KPt/Luo0JDtycR8bhFkqpWsvrRePypWn/HVPV12\nTfjU3fznod6EAl0a4CV5sF4q9H6w9QCz4URI87nmFtE/s+QjTXogWCfXxr9Z\nBxYyeyIm0Y0uG9nlrLep++Lt/Hp5zaPlvME7JEfYk0/kvpOeuq9zMHNMZrIn\nZQNsUAC/VzCRja9b6W8GABGPmKknnEEa+Bu8jECmz/EJy8UbXu03rfXQJwma\nilNcfRWKlHwIpC5ehceWVXxhvCVCQ/2J6Z/dEQW5Emvf97fe9fMtOXZRd2+T\no9unfMr/FWBoCTbYJ7LHmu3QxxdiQvkV0v8WfG3DTZMh451zEwXaCuostlgg\ne3VXFITAkQs7t28xGkv9C/tKLomN8jJ7VY2cM4piEpMb6q/G/HmUZEPVl+gT\nU3YgneAEchj2w3Ofu6Zdji1XsLKGxjlYoMRRLsHoJyPoF3EhOsZBFVKDQ0TE\n36wHZpEU7vIBBdb6dS22QdTKJocxec0tnOwiNJ/Xdi/huUaAvBNDKwjppXLQ\n2vSt\r\n=oj52\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjdaK/KJtNm3Ks9H+FKs/cH2IEHSCNizUE4+f+gqY+XAIhAICfEiABekvH3giYaWBrLQNh9q6IhDbEATi4NjTqvHJ8"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canary.232.5ce3c8b.0_1598343353242_0.1388400362679536"},"_hasShrinkwrap":false},"1.0.13-canarycanary.233.ce30ec0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.233.ce30ec0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"ce30ec05164449ef8f2f05d23acfbe271603e80d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.233.ce30ec0.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-xAd/j9guNYxgHXZA0kFegUaO9ecVLire+oZRtrTfXvMJ3YPo2jJjWEHvE25XHYH1l0UirRKtLvQppSlkqpgviA==","shasum":"cf416ab6f9d030cdadc7f092e40e7486e50da70a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.233.ce30ec0.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRMpNCRA9TVsSAnZWagAAK8sP/As9DHJWoa6mbMW0paX9\nDtKfurGUqzArUDTmjFHMEdXx3yQUlglpQdll35oixGWJjlFiVHMclxtSR0ho\nbIn0Q0edYXwYW+YHAKa62/Kq04bbz27mvLUm77SpYeb/uzGfLKrx0VsaL5MK\n54w4YMj7VGzlj/Sv8ODFrSU/+r/p3z5Z3/WuDBch49N2ors2wHYCbpkyWyhZ\nM/HMA2NY2v68kVJ/cIZ2jP/lPbCd5c3helt2BO4TNPB4oc63xDyha5NL+/t4\nNHZEKqt7U5hAdg0JU9UX9s8Zfr8WCqJMl8TCggLJZAC0TO/nVv1k/tyLHzHZ\nTgcypmTJTF3+ueZS/l0IPIuFcHfGBezP/sxaxfYi5AT21SPghbQ1yTwLPLY2\nPngqGL/KYCOOQWcKZkJUZSV5S1ko7tVKTk1v6hPs7TXWZDQ9xuGK3mbDdJYW\ndiPvxY4Os+F8U2TIF1JjGTTUFyYF5KO3yaOy6DiZpt/nDzm+a80eZnCH2dE5\nrTPqSRG2usU4R+8A5HhbU2OPwc47ucujb9LA0ZCd/QuaUarnEmeH9D1GYrgN\nykym7MhPltsnv7e0VM55H4a8zbdRVWLPqkQAwu4xUorciV9O0sfrG69j4GoI\n5O/KTB+rJU8r9NBSXgi7nHcjY5CMMen5rk0OsUf2NdJv3rlWbvnzt/UT48pY\nb2R8\r\n=xrtb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdlUsMWeDDayBBTAiKUxn17A5pCag0XVWuj4dKiwrliAiBhwkFP+fu3xdkP+qqrg6HZoxBuzp5bomRDx7phwyn9SQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.233.ce30ec0.0_1598343756997_0.8058271269978659"},"_hasShrinkwrap":false},"1.0.13-canarycanary.234.cc88a00.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13-canarycanary.234.cc88a00.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.3.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"cc88a003e9e72a4027a10fabf6d07a96bff46571","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13-canarycanary.234.cc88a00.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-8rJsfE/vzZnm1n5q1Hwy9s36ncXhgpuW3lE6IJPdkKSSGXqo5M9NC19imJAzVvgBfbrhql3WAeLbhkk+jc5XSA==","shasum":"8797adb12f706b13c4a14106e7eaa9c7be2c6fd1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13-canarycanary.234.cc88a00.0.tgz","fileCount":162,"unpackedSize":3109106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRMw5CRA9TVsSAnZWagAAvSYP/iOPjfZE/9gm4Z22ks/+\ny+RMOQ4M35PaxvJlhzirt2CJvwjPNXNi9/oUALMDVRIZOB3/0dOl4iqH4TUw\nmfGnrVS0twew+0chSou34QzMNNNzaNi5N7U08r86/HJeXqRKtItW0+/Heuu8\nr8ktn/CgClRDbJ29N/YXtjrfGtbsv6iTxaVD1NYJpCaa6UFopGderxxLA6rX\norlSlMSPyAQdRoRaEykURRi4Tt3b7ghRHd3iVlm0lSYUWsMguavQG6Wdf7T7\nsVkyox51YtjofQKh53pMczQj6Bce/z0FSAYmG3DlSaQSYmQPq3qxcPBnJrM4\nIkjZv0Ft46nNrEwjoxMYL+PAK9P2doQg25UJhcqz4t+WsWY4qGAcak1P75Pp\n0gzlLj+ZxOSpnSK+N3qc8woqZX/R0ECGFMWZKv5Yx+KGg9LiA0+Oxwn5Bx0J\n+5DRdLqDiEKBn6yli5tTARk91Higkx6MTOIQ/OgTPvUGww2/J1a0C0Yyvpl8\nxN0JmBu92k6HyayjK6m4o4U9Unn1jZaDZagKanaSX8+drSE1rVuLDKN/EAbN\nMVMjyGI6GZSdcuL4zY9HXeCwtMbDzscmLeQSNcvdccxWXH4qYmIpA6gNujXs\nbmm+2IKDpxxem9mQSVM/C+hzkvU9fcgPrfKOevswSgzRjP1UyPLfYWXtgaVz\nCA/R\r\n=l8I4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChlnQ1N3WdmY7oEC78FISIHk0EhM2ew6b/AOIZmZsUhgIhAPCAMniYdTbBBFawaofqItWUEEmoBSGnfEyUKlWp0leJ"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13-canarycanary.234.cc88a00.0_1598344249208_0.7571668458823348"},"_hasShrinkwrap":false},"1.0.13":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.13","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"c75dd9eff53e2531e8037d8833346b030ae3aa0c","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.13","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-iOoP9dl5y+bKbntfiTsf2BkjiMXaEXmH3+T+u4yofD6iXkciGAI/rH5pJJEhw2dafhKOGcuMgfNk01B3Cnb6fQ==","shasum":"5d721949b7b875413aecbc8a056076a1d9ffb254","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.13.tgz","fileCount":174,"unpackedSize":3162697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSoxgCRA9TVsSAnZWagAA9/wP/0vVTlWRpPHH7e74pI5v\nlVkcf3ZqvkttHrNw/LkSjGE0rlt6ENiK3/uNeNV4nLXs3nKH87a6YtpjOvTk\nbRW1emxzjLAMOgFv0JW1GRHP1WFsEdnfxd3FBYFOehPg5uCXXWMJIa+qJUep\nsrZe63mKsu1gGu35FJiEVZDjWRDJIrj3HmrqesyRgluAR7KL1gCAhi61cWS4\ndRvgHuPxe5kKbZh3ancUUJ4W90Foc0EEdw/1RA1T2kc2gGloho9FIlhmD7rc\njd39l2MtQXjs5HvmS3jx24pfnwYa0eo78Ok34BFXqDiFJO3FBrypCjunOdcA\ngXwz+/32Br5y3Um0hcdVtvkRcUOSYjywL9EeTPVCUUbiCvaaRdgw+cCdjign\n3cHCHFT9HOJa3FpMUeIWEE/rXVUy9O3rAelYBF6MIkJ1c9xZiouG3BJBJb4j\nLjz2lH+/K0Ydjo+ah1wPNDltGtIgyG6jY7adudLeamYYQ+yk6YwvZwTW2DiB\nEokXHxnuXyOZ8x8iAbMWT8DAuByUoVd2Y5wwmTj+kIGZFwej7OT6IaDoQ1AD\nz12l88ntE7bUvoqFtLEZb4x5OjqoKAUCdL/ue6gZHGFucDFSIbZXQGrxGdsS\nPUgWQxM+H0K1L9RqMxxvpALgV+7hRZfIrHGfDRxQDCSIlVdN99hy/SOUcgDx\nzAev\r\n=cacY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkVqEQGDwjgBW2+RC5tnZz4XmF+NTeNuiYLLGMvc4lUwIgBhbUoYryyqS/bzqPTldmqrYO8RHLw03DcCXJbl5ZYq0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.13_1598721120147_0.017240240930770367"},"_hasShrinkwrap":false},"1.0.14-canary.110.cb61140.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.110.cb61140.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"cb61140be7f285278f943204163dd9775d3f4f59","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.110.cb61140.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-vZN23ZKT2E85eie7rWZ4iYNzg3M/hhdVobBQ8p4O6cCr5NZaNVZOx2TwgieARfzUGBv/j5UAcJkU5/mGsbSMNw==","shasum":"e30cb6e38dcc35fb9a95592c7058973a5cd0ae70","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.110.cb61140.0.tgz","fileCount":174,"unpackedSize":3162490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSoy0CRA9TVsSAnZWagAAq0oP/RZ6BoXAW98xw02qeeuF\n33u6ZAoXWmVT8pSbvIfWCFwbC6yT9rHjxWQvhZ9gug1MgZRjGIpIRlqxWcLB\neuCuR7Lw5W8HJIpuEuqhcUvam02lVVryZByK6wEEfo1iqAKCvBxIWCpA4RRk\nncqQ/HsrT8T8AoMmqUWxl/0Ar7/51aZpT7/5WUcE7wboqLcw+xINb7ZLU8FM\n64dbPfrlOWGX+jKQV5do/N2me6En1Yo4R8gMmbkpXhey+Cok1D2eNCXFhb+G\nB62e7kCIEKkalcm6PLbr9Js/+ot4phpIIxDc8G2XLKxt/+Te613+xiCmy+3M\nzy2fN0vDD6DDfXP7pHI/qByfYMT5KvL9B4ZoV3ZxR/h2UkPzLbo5Xt2w8Eqy\ndJF8tsc4H9N3oMkvWgGVlWfkrpo0Te64DqUHkVIdsg0XgLCsQKJQPiiuMrE5\n88bfgu5U7pIPwl09xV+alpk9+KXCfcFaZAx9t1khuFchJVgbcrfJMW389mOU\n0yi2D6kswG/aX3kvTCFk/QIWvOKudz8SdzEiNCm/7VGelVxxlCwn25/BajyY\nmzl44CkWztptyoWIDG/fWKz1gjgvZ5qd3gNlp6srWPB3LgsH9uZ7O8ezlN0V\noTuw2yH8AVWUPavw/QgCYpH4pdCk35uO1betFxx3exFHkSNmVcpZPnffmL1J\nqthc\r\n=xk+V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJlFwAWnFZ/xOW2Se0euPnmlnBlIiOgTehANxeRjp9+gIgNGWjAZzuazdSx4tfWXjcw3U0zbp+zXPFYFkEGSH/zj4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.110.cb61140.0_1598721204434_0.7009800008358831"},"_hasShrinkwrap":false},"1.0.14-canary.235.b2174b9.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.235.b2174b9.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b2174b90503888331d86c95c603f0e906d5c111f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.235.b2174b9.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-u0xZyrwrEWuI9S7v4D1Em/EIDpV2tdJDBCr8rSR8UU4ggliVOmQT3RDHNbkEppDy5eK2O0PBXUuiwe+PbKkfiw==","shasum":"cb10df2e3fbbd265558a8ee770fc3319ba900aa2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.235.b2174b9.0.tgz","fileCount":174,"unpackedSize":3162490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSoy4CRA9TVsSAnZWagAARSUP+wTfV2goSwHdzCrnVQDY\nF2QhsEAzx6CmiWhVNrDsr8VZj/VPK+nDvPp2Hs9RT5Gec6XTIM/vVY3G/c/C\nop6GWBhARelo24dw9OqkYfFVmPXTkFN1fbKH3KP2+Q+Wy7ZrS0daqWfj5OPJ\nMyiBglii6sj5pVb046biweGn4BKzA8naIwU2/oyuRq5mxraCWooGyDa1fNmS\n7oFJIMlLwvfjKUdKLfHwP/elj9fuvmmXVVtI9e8gc2btyUYu3M2Ln7knfCgK\nxDAUBOo8DkF4Cvbuqg788HnHT80nTqWXNqTgQNBT+uVZByrOXhGWjSD+Jn+e\nTZDR5BwUnABTF8OW0WoUQ67OkKR++Yv5rn6dKgp13i8Qf0ryk44Ezuhbjy5E\nEKgnFja1mWR4hodfx4RVZi1Rh42EovqeT0Fu+2Z5y9pOzkGZWd2EGjV7PTxu\nt1f4jI91ItVyyvmpu66DY+2wEdkL+IuP8RMVzLdamaT+zcRt5NnKNLqv5vCM\nLcjAFdHui7l7Ft80zyo83SbgbCGrPJoCXoF4sG6KiL133fEMs3kcjutthkvP\nTOXAj601mszi77ahiAX9KNSZCLBDzQwt42LpqFaxlBWfNiwzy8VLdBAI0Jan\nzGNSg/brDx5vsGV/BLsxa1uFRQFCamQNYgQ5eCVE0dLg+hpzIqoV0fEqGZYS\n1yda\r\n=lIrW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn8U6hRzWf+Hl2KvEo8Ywx+b65/S3YDIqUz6r+V7mZ1gIgGhGb3WCWfstMja9RPHai9Uy7YiB2hNsXIZgBUz5/8wo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.235.b2174b9.0_1598721207971_0.054011055459943114"},"_hasShrinkwrap":false},"1.0.14-canarycanary.233.d6e6dda.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.233.d6e6dda.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d6e6ddabbf46d05ae97ce8a19bd8f6bcd9a887b8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.233.d6e6dda.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-Gl1EfncGPjr4RM2fAvNpE1LkhToSy1faLhJQFrD29lm6j57t/s8gIYoaOZ485ad1I3mJIY6SAVU7zoNKzZH/DA==","shasum":"7a43943a6a3651c7f912beab3221466cb33c3cb0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.233.d6e6dda.0.tgz","fileCount":174,"unpackedSize":3162496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSo0DCRA9TVsSAnZWagAAF58P/10MdLI9cno4GjA2LnDE\nl12RLoXuY94wzRqr+ykZMfdI1x60Hh3EbretvFkBrh7XBq9JayXCU4ek5z0g\nCJD0kRCy2zJpdTMnZATHxYALAWM9QRjKAx1wku9Xk+FjQDIQX0DwVLtKM5uO\n1y0+SaDi3lhpZCrA3lcCsB3UejcuKnBBNKlQLBJmWokJeFIeFnDEB/vYtpSH\ngUKb/wlNgVzQVTEFa6Np6KQhv4GE9KVaLCVJlJtr9viDT0WhF1NfiFttBCEi\nHHxGnZNII9U4wDJgwkEnajlIptuP5bsTIyZAewub4MH9CfOhL4cCJLqo4qtM\nLOx1xGOZMW5YIwDFFR9LBjatzkSv5RowrlJjfDoWTczPK3LgXOt+gP3xSpz6\n4f/eitIO4S8g9g3xyTqSlYYJUBxMHQSmQ0eqm5+h5IsSVrj5OcvIca1yUF02\nOw4/wV8UBhBpNEK3dHu3edtZMN/fgFe32K8kgUhrtlo4plW1twjpF0D7vnRb\nWdfHX09d11TCtfWz1yw3nZHcMir6o5egIJ13xDsc35Bo8D2aqm/VkHO7zc+4\nlCiGS/mM6k5p7gKzlApUQCmZCG/CJtglhSh71WbVOBaS8Sa3NQZIqDBgA6t5\nqQdqcyausjtoNK04fgujB7ParSzJ92JcJIQZbNWAmsw8hRPe8Vy64A9cIeSn\nTVIo\r\n=KLrP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQNpaS0TGzyFs8S6XDAS8xI2RT2rogBgJI6MKIdefi0AiAYpukO6BQPoyG2chlaTunHAZjgV0LhxweG8HDCwHeukQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.233.d6e6dda.0_1598721282958_0.31576322887068553"},"_hasShrinkwrap":false},"1.0.14-canary.232.5c67397.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.232.5c67397.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5c673976472fb23d6fc7c5cf94785f97e80c1f46","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.232.5c67397.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-zVBtK7aRS19Hxt47BPvVwxhn6TUDCoNisaGCAkBL6xpnx0yUzIbMflJA3MxuDgLLJj7TaVD54kbqwOLTVWlBHg==","shasum":"502d03cc86ecf950bed3f1fcff8df14d2eb6e368","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.232.5c67397.0.tgz","fileCount":174,"unpackedSize":3162490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSo0PCRA9TVsSAnZWagAA+KMP/jr1H26LVZnWcR1bFjaX\nBXxcOncJJWtpWVWu4hYIJ3E862YG78d4Paf7sk1CB/NLJvF68u83w5GXsk5X\neefAoUKfuaOrVY3wEqVnFlqnVsrWvetm3MeIj86bxA5Usc3Xz82GCA2armwp\n3rs41pfAqhPdEqj6/aVG1EXeQC9gnyzS393c9DNYlsChgBm++ufQBuP8RXIK\nMk9XictRD/uxJYJm5umpl9U65Jq4RzW9x4iZnKGV5YeVSE+EPBMkMF3aC4sr\nb4hBFZDNa18jq7kQ1Jg7307pRS7R1yuMgocBTiYiLGLyov9kveoHWd4faE5S\n5nl/YOaUNHMlU8HgjgluE7ojLQXfHSslubvprXYlkNlvjZDBelzKzXu3jOvf\nDZRQI4F4RPyBDeFZ/iTxZV3C77V7/KPiunAwdMqaEK+0Co/cRZv+A9pYGOKK\nLH3l5Lc0hsiaMfVgxEjb5ox8I8JLTXtdlW5lpOtcU3DUVWZrRAVwJi6h6Aae\n67HpzzEuPXF2GvEZhUBBAu8vP73KtHrWwpwTCrPJBpyP2ubz6d3TGaz4lk98\n77TDVqPN/++JDauI+4SNQDG62ovL16iQRqqQAn1jiFycSOi2NVvgwRmp+KFy\n6c8wN8DpVUXaHYo+WryxTavxXMbChm0n3ZyrLaHmRK7xuPkYOaWtokoU+Axr\nfQid\r\n=Obpt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHL0n0ZX+opEZGAnVrtYEC5WhRb3kvr1deJjqQCAH6duAiBWcMZhu3sZddtlZVNcwKS5/sRhuZ4uR06mHXSYR1ciUw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.232.5c67397.0_1598721295039_0.9647439666350781"},"_hasShrinkwrap":false},"1.0.14-canarycanary.234.139d949.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.234.139d949.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"139d9499904c8712ecb2db381248a713c8c13588","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.234.139d949.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-t5OgGhPOH0A5Nav2qrmz9zqIfkGVJJGzGMkcvwMhkEE5YPwsNevUEdlQG3AbLN7RqyS2b3r1yLxXFTMPN16+fg==","shasum":"0ec9cd1c88b74b8f001324a0595cbe5259acf47f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.234.139d949.0.tgz","fileCount":174,"unpackedSize":3162496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSo0hCRA9TVsSAnZWagAAOtcP/jqUDCdAqolegIbDGVj0\nsRgUewfgPgksjG4H4GDI/YhjqWiLHbvnCYuvYIM9jJ5eOj8B7gTmy4pGBggp\n768sZpXwH0NeLe7KlOczRb3bUzZi7P9+30Vk67LN55HxeKuHqqI9ZaXQQznY\n7ZIFrKFo5iT4MlytJJ5T24VdjgyOYRcGfHYT5mGhUQcvC6hBLb+Qmi3D4XP7\nWCbCUEeRrKu4bIpI/cy1hoEF3D5MrpgrdS/FK4BsMsRCB4SEzqJOAzf79SDL\njKSoHo8TWI3MVigl74/0UUP7r9kS+/eqjtLECv1abOW/OgzZ9xn/YTQ2Rhhq\nHVbMIJzsV5abV3vSmjyaRklNphnHTrW6M/HULMnP4deVbtoLliHKknsEhQPU\nux4C3hCQiWwRjXMCU+a7/aXWcPEjejxMwjhUX96rQX4wWak6S+YOUDb5yauT\n1Cyf19dmo//1G+G46yJlblK0MPfwIJwPywMvU3KiDq8P75IFvDmt+l8oX5wh\nfEPSzWCTINYQecYhwxkcDQtDaA/jJuVjz5cwibu+JDupEbBWP4IKpMAfQ4Rz\n/vwQYtsprlMoma/+ioBH8XrXhwfF9/hKRzjH4Rhb/95ZpBzjDXcXm4PVoj83\n9/DyL2rT/whORfF9IiusCSmN/NTyXBiHVZmMEkxBKyuC7vy4bprXsN0ozi91\nzqT3\r\n=JSFz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpg+zWB0h/S6E/dJ7yW5jHyakhe6wtGtu+xHUUOSMb9AiEAsUpiI0MfNLc5gevtu3Axb57V90CN3Ccget5y8SQdkb4="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.234.139d949.0_1598721312753_0.4204240914885591"},"_hasShrinkwrap":false},"1.0.14-canary.236.b372ce0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.236.b372ce0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"2.2.0","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b372ce021de6a98bcfaf02b5fa7c1ff9ea00a3e0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.236.b372ce0.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-7wSu7ZqfuRoVJoWh0W4f/gm9H1UdWOXKMSF/E+mNTHwAGTUESf43Bybz+tnLiH9C7OBeYTKDqgZHl4KJBXMJ5g==","shasum":"1b04c9f0afcad850899e1df6e42574eeb82dea80","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.236.b372ce0.0.tgz","fileCount":174,"unpackedSize":3160094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSo1ICRA9TVsSAnZWagAAqqwP/AvwsNj0sijLzt8QwSO+\nlB5xyzOo04pzMjSx+bQ0TpBwL+y6Hr4XE220qj+uRGhW3WoqLfmYzx3hCV3I\ns7zFWRMJKXWiTG2PDe1jh/6pisY+g20slbfS8YsGxySDup0x3VlUVFlbfgoL\nyX5TReptTcN7EiwtaSFtbkDGDfaPjwwlA4EbFSW/C4cClv55mpXTc95eJGk+\nV5pcd1w6K8CpBu80YD5CbOFSHDOz7G26xEAbY/h6N/FAaRxxKEE65KAkXjgF\nItgROJoKcpKIgQSJ+6d3RW0cqO2Bc+tYeCo3jzhSR26pxRciRttZ8GlDCf2b\nXjC32QesfpPbtCmL6BnQOs5l8MrfwHyv1A4cO2NdK0c9jMThdpTKHoN8YXP7\n9zW85+rpTN48FHjCaWP0v4dSr1Ehzp8duT0iU+Wp+jYuImuo50BZ9fTMCHQD\nblBZjzCSABu55wVpyJVonbuZ+6PbBWwtqIgy+N01hv0sPzoMsYDbJPSPlzvT\nOWT7QZ1gUXHK7xtM4pRdAA99F8MLnLOwZVDE7R5Yu1pAa1xm1FR2Vm7p3ndE\nG2oTQaXfxCYlKZDjFKPalEhR04pq2NtxeF0KjRk/3CpAGIilYNmg8JpSRhXd\nhQeu08SAln6MXQBM1cUdVA8bEUeqEbNAvuLHGHDICdLfpsJQJhyP3DeoNLWK\nsMQ5\r\n=/0oA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXPT6LBzaH7m0zI/OQZYnj3jnB7j2ILOdQFZ4FI/BKJAiEAmQcmDvft5/5OD/SnAm7iTDzcSOqhne2hmazDrdnMqDo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.236.b372ce0.0_1598721352250_0.3162876903910652"},"_hasShrinkwrap":false},"1.0.14-canarycanary.233.ffa3259.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.233.ffa3259.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"ffa3259a4e614cca7ac70892a447b0fd7cfdb5dd","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.233.ffa3259.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-cUID/sY77i0mjQLh8YcpdSsdRNYou8nlThPhafit1BvAlKt1b/8Vv5H+0UeKbDBy4XcaXlb9h1NgNnYYUKhY/Q==","shasum":"8ed52aab1db275966dd8abbdc3844b70ad339839","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.233.ffa3259.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSo2vCRA9TVsSAnZWagAAB2wP/0eJxObpm9pYcP1Dbtyv\nPq6A95ykSUjSriIwOQLBIw1e+47njMzLntLvDHXaYOMRsJPSgkJUjptt3XEN\nn+WjrRpRrsUkDhTt35T/gFRyoKl04vxhB5uYkPzsl6Ph6D1V7b9NEqiUYDyh\n8iDQGc4uEUyNWLOdC7jIPMqwmSf38OKm+GHSnFgaizXnH+F0nfV4vmhIBiks\nl9hq2r+X1u1zMBhPzA6scvzaPsaA4Nvb+W4fLX2Ap51QDfrhqTgQvn+E3SND\nBH7GsL27UhapVOqcFdVc5ZDVTvJfFUnvcVjw59fybJIKOnJfZs1YikNNguEq\nUsexD5bEYfG0PPTeazzBJNIpy+4dCaFlxwGVhQFjgBtzPiHhDlY0+XsC/m7q\n+80RoRRpB07XaIrgWZuRWtKnd9Z/zrAfXH8WEGmKyAkV5IfonLmR5DCLPrik\nr7+/7l77znm0+3adAtznQaDGCrBocHgqFhjvOnYrSekgQ5YF2RuTmHlls8xV\newBOJDhVYd28k8MAKT0rUog4kfpz848pzrbCU+VunvTcTgTaybeuU0tY23wn\n+5xx4WmE+/QZTVRdOX+TiBDLQy6q/qOC95yZnoDYMYazj9HU44SAp+CSlMW6\nsfBF0fXDgn667+HG5aa39ga2H3JxFIGYxG6XzUKA7/h1J6wrbSx3e1hJx+Ze\nWfzm\r\n=Jt98\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAg8BagQbVfWFYfdOjazynJludlSPhrEBNnU/sbk6+s6AiB/36zF4F3QwAANMvOMPDlT0kRBJIMWbN/HyJqQ2e9pqA=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.233.ffa3259.0_1598721454546_0.035057262024952296"},"_hasShrinkwrap":false},"1.0.14-canary.237.9b98cc8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.237.9b98cc8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"9b98cc8f7665a3c2c548adc8755b7345ccbbb385","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.237.9b98cc8.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-YMAtR6dhAuH+4G17Y0TQ78FBpe95iJpweq9jnCXZ28/xfF8DUiFNhlkKKEgUln3c6oF3TmFScxYAexp3f95Iiw==","shasum":"49f13abc90b2c5cdaa45d2d8a91ec8b695108af3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.237.9b98cc8.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTgp3CRA9TVsSAnZWagAASL4P/1KX9f9qPTapvP89J9PD\nK0lvyPIIgplif0ix+VBw2izsAwgk/J9LapsE/soyptkLvv7YeUcrDwM8rZgW\nIgeVma8geHQHESQwrVcYDLVjutq2m+oEfRMW/iVnmLO0ZRIdQlUfVjpWD8AF\nOsrst+J7+FVJ6kVFotDGvoielW7aG18BoDzA3kPnkh+T3/XC2xtEqsDIjw9s\nP4xbsXNSQG3LZU+KNWDIg2HfyJ/LYpWSNwHsdyNQRsyjI8vrnIk0tJMs3lp0\nMIDkvz+wHJuDASQyOlx/KQy6gVKncEqE3bHq27cxg2RJnFPccx4wgU1G4fkd\n6/6vf62/N+kU5lOlKKpC397F0jqqxhtu2Jtx7Gv3hFjj95nsM9UKuZ52KS8i\nWgpCV9qkNie1pjqNF4HeNMh/ZaIxsZmSNIqkrgfzUvi1HmMx4RgJy8HQgJF9\nBEcyu4U3LgOKAY71f7oAxEoDwwiqDvaQgXqz6TE73WZws6p72sg+GyW0Ur6t\nnJd3vbIn2aBu8SQz3yDVQGAdWgbfo/OZULQzhh1/up+E2WyCGYvrnmtf02jP\nYGAuNlKdPQMSsTr7hMDGdrNd0pBa0u5AumaijnLKrmZf7M3TPT30JtNgeD5G\nV/w/x2zGcjCLC5+NQeBislb93jlpWRKkV22dekMsNzmgqdjX7vBBqOwrZoGX\nWKek\r\n=nak6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7tBOzk3y+TD3e5VDoka0WNp6HUvZUyHMEznQWsNIt0gIhANJc2SgNbxeggC/mPBr0+8iafaOaT6sxfGKC0Oqiybpg"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.237.9b98cc8.0_1598950006732_0.897395211865047"},"_hasShrinkwrap":false},"1.0.14-canary.239.bdb7d2e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.239.bdb7d2e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"2.2.1","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"bdb7d2efa1531d2c83acc21370e1ea0de4c44dd7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.239.bdb7d2e.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-Xsp8tDBl8zbiBnkKURoXUZmKAbNSP/zdIuqzGyrleTbbNKwWr60w75nWhzKNcI4TTscz2GlP7WkhgYwBnlJHww==","shasum":"059bcc5a603e28bc3e95dc8551b9dc4c7f6b952d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.239.bdb7d2e.0.tgz","fileCount":174,"unpackedSize":3160322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVy1eCRA9TVsSAnZWagAAagUP/jxdOA8+37vjuzi8jdfS\n3+GQZIS/mNRSjYqyXoFmLilnMuYPeWnGC0cBJetVzmTZr2frqEInB9Ccz/3O\njYwHrvjO7FYHboh8UvqKrPTMxXnAZIBfkIYMWQ7FFtUqw4bPq9NBKojFfdTP\n/rSTPFXj3/bCHqJpY17ty8zt8dAnY/RbeKAsY56RVoja0t7xdtfY4C8WfwsN\n5df/O8POdCopeiEWk16p0n21wK0S0qKQ9sZkGvb5XWR8OwI/19ktuWz7dtfx\nnJPiZ7NpIZ5maQzKFaS17EwldRkr9LakMvj/Km0B+ANHYnuIafty2oxA5LFy\n23cPy6W4puhsRBUULDbPN4Sru+dV/F/50Qfn/BBWsYRJjdm/vdEqvRsni2oJ\nRmFpYI/ouAQ0Bzgy3rfVdetNglQ35Mgi5AgROUp+AOUK3TGFaYzL0/+TwxVk\ncensUY3XP6nBEKC29ctMycLrIi6kH/M2ShSlVnsd4fmCFdLcb71XI0NSPlIv\nyRnf5A5HXuuqU4AcNx+0b2rm4n/513H6FhfGHbJgSV0IpzB/wBqgM0snKZ41\nmu5N7u+pxPM1xPvvNt+tXo8MG16osct30HnHzmyD6+qYg9kuBOZs2UPclne5\nKX+V3fbgvQfZKH8InvuQabjpfZXM3iAnraudOXiKIUJMTzCWzC5NFr4ydDdY\nxisE\r\n=qFR5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuPYsHo8Re5frUlhLGyz2PSrnitf3og2Tb9OgfuiVhXAiA6u3nZPJ+T7q9HyxY09ZKteGqPv0CmlHqh7lMEnlLvrQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.239.bdb7d2e.0_1599548766042_0.329869148506293"},"_hasShrinkwrap":false},"1.0.14-canary.240.3b3e863.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.240.3b3e863.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3b3e86392e0b5896889e07e911e9a26c6a5dd73f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.240.3b3e863.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-h8lvWmQbvgSvKhgixlZ99ev6j0+Ra6o3n657JvhDzun2LkpmgpjyIRMpkBgWxvlkx3VsbQhw/+WCEd5f1VEjzQ==","shasum":"6619a654deaee31cb195acb08b0015f73d5fed5d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.240.3b3e863.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVy+HCRA9TVsSAnZWagAARKAQAIWiKmjqfiqtsF2jMNrh\nDhY20qRQATnZfifNMaxjRPIHQr71cp9UH5ILekk5yp6AyfIXz/3PZmOAp6Vt\nyB569ilxN2HLMClIQrOp6/LXoRJF5VleBa0c7cSoAHaBmgkvFzlXkkqStnNA\nmVGZCmzBnjqShFsPOXbdXuva937NwQJIS5dJNaqDGAB8f67K6k4OubR4XxtO\nYorqPMe0fyMOdmT5PUDPXsI2fYTrMU5mAwZTKMtmHNek2Mmt0o3FvsJs+fBy\noUAHoHFO6maADTWbV5kayCHuvc8NMQZ2F7mIZ2L37F/+Q+jPclci36BtDId/\nVG8vbnDrvsl7EC0MAgutqbEMTDnWl47Y0TCsp685a/RkZMVjvHmHv1/xfVRz\nrgFrYeiurZDHLjBhygyl1wKCuLHeP0uJKn5dSoXvXnke6vo6qW/maeYw4gVh\nX/hvWE6tF1RG4qZ1WTc0zaQhri5dVuKrn6ohdzqOirKPsNolnJm/5ut7p7EV\nYRgVOtB3CNNyEe6gd4oiqjKYp0D+5G9OPUdlfymeU6LYImThQFhbHhz9Zpx+\nZ1UifppEfuu9HFjHzjusgrcpqmMGwZ/fhMjtU88/q8ypNmNVy0iXXrf1OPXT\n7jqpBVkJUWNgdQ0uPBO4O9k6DGSzftSRFDiiL0Tjqfid27rlk/3Z8N+aDlrE\n0Xup\r\n=pVLX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3dc34A2KPyrX2C6Q/Ak56l+V5EinwruGozG/slINX3gIgEEg8hSqjQEmC5yJ4eekbxn6i5UBADhy5BmSAcyaRGM0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.240.3b3e863.0_1599549318480_0.3900277556876901"},"_hasShrinkwrap":false},"1.0.14-canary.241.80a16fe.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.241.80a16fe.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"80a16fe07e581243278fe9fd1e99b56830da3f6f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.241.80a16fe.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-ZTpzk/H4u9+7jrWVS8GjV0iqRKA+Z7uY+/obsW/8mEXB46rfYHgllfWFJpL7eTms88NYIO0zeC4x0j8jvz+UOw==","shasum":"63cbdc87fb5f581bccf97b714355000679be7efa","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.241.80a16fe.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWeyrCRA9TVsSAnZWagAATUwP/imrXqhmBDuMlwawLsXU\nf/yiYMi2OVKM9RVZAafS8XGv5e9ht6W+MuyVJdCGeN2oUh425l3ek+411pll\nd5kPgEbuLg5OECPcPjJ7LgLZX95ho5vES6A+VoEh+Z2IsigC1liSv6NVmVCz\nRthS01c98wmLf7F1MbAnegqoNhCw+Opt+zy5/CfX1FzjqIbAFsUtNWkcQhSW\nOCJ6LmUPFpF3JGiuJIVfRUV61+P3P7ZRDw4KpTVTJP1snsRottwjNTm18QaE\naanZAP6KxBRcol8Fk7TQrDpO/3ExUzsbCXZs+84M3RTvDGSBLHwcK+DlYpwR\nIW+ipzDumLM/eHI+uMt3wNPwF1XTTJ16UF1P5mIK+p3Tk0veD+Jro0FQZxRU\nB+stEo/S/61qIgja/6i24fLvIR+139Z8MsUkCSU9GQ8qmEsk/rD/5pkjgBTC\nAU2b3/xz97cdd7EVinIAcKeYAtfGyacZrzAqf77T0kxaTr+kDpqZtrWQQ4Fu\n4vVD5FS+y1YHA9c5q/iD8ZIo8DU1iKd8dS84/yLNQr5SX5vJF4ylI0nr7ZcG\nJtEACqcbYCZIRKGggG3YYsphwcQxK39mo6bOs02m8d2ex2SpTsHXddfycdJI\nyJpjeReEIWttOtFRuyqo9E/ujNnMt27qALFjlBV5sIwkoSEDso4vjGYlqG0G\nWezC\r\n=Cyhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7YHAm2es96LALN1tUjXJZ4uFG5jrHhokX9qaNtPktbAiEApkyOGaYIX0oILep6JZEE9jEIuZYTeOoam2BvV5U5Epc="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.241.80a16fe.0_1599728811027_0.9022082481998959"},"_hasShrinkwrap":false},"1.0.14-canary.242.d1459e8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.242.d1459e8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"d1459e8f22183421a1e9e019b12c39d99adb7754","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.242.d1459e8.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-ejSiuGgO2QIBqyPgS7b9Li0csHkmgMGaAcapqWvYrx1kukrewQC/WHwlh0SVrBEiEnV200tiDBpvpAO51oYRkw==","shasum":"35506adbf75ee1c19dd7e377a84bcea0913f062d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.242.d1459e8.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYFrnCRA9TVsSAnZWagAAkPwP/jF/xhO8w9E6NrMMrhLv\nh/7iA3Dk0R5cOe3WD5/ne7g2SFzqnSC3w7UvBBOnXAX36JH6ifPaUNH2BPt0\nYY+quEwPaDYDKgyhc4Rt1f4voRYF9qcLvyWT1sjH0jXt38eko+OKeFbKhuN9\n/Iqs/cJ+shxO8bFdtv1+QC/58/O7hyXuZMY9bwBrUKxX7/kbNiAWq4XkN67X\nU2wK2THWfeu5eb547+P56TXwLv4nQecKShRPhgmHQcDa/II68ZJ7G8M9ljuh\nnmalRmBD5tWO3UDf6lRks9M8egmpAU7Us2yEVKdd05S56G+7VYjCE6e1qOpY\nhuA92J4gPw5byJJes911vQcnrEcwIZDBLqbrsDA61Y6bITT0JmyvLOffA2od\nkTGFvo8+aVKRXdWf6LXYzonGyw4aVOI755VNAqWJoooDdxlmjI98NY6A24qA\n8aEUlW6HUkHErz5bPnwrNhKxnpVQI+pMAGgibCmMyBsXyVCiB4B8cbzNRrDI\nTdL+dBf6+X4yKjPBGIryWJj+2zvgWZxEaOMEJWCWdjO4b5GEBQ/zEgJgXwWa\n0mHBzE4XkwiQ7dVCvlEk22kIZh+PC2Ipk9hNSAt8vEp9BAaY2I3hvrmRg3YG\nV6TyuZ/I4VTke3BcN6eC170hctC+nQ+tJmvs4LbN+OSWMOkTrdLJRaVWLyNy\nNuRe\r\n=9+qa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7GLIKPIEEwhstFiVsdDRrjjQ7WaVR2j1WiEe426b+KAiAV+3gDqvvQeQbaDIq1fx3s1RsyFDc85Llss+YZJW3M6Q=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.242.d1459e8.0_1600150246740_0.3394496369540101"},"_hasShrinkwrap":false},"1.0.14-canarycanary.243.3600556.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.243.3600556.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3600556456a80e1631ad6d27c1b05ab2927bfc67","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.243.3600556.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-unqkwj1EcLVpVKjxB0Ik4rqxmGny9beOjP4/cC5o9Rl07ow2QthWbWl8fJbEkRyxQHzRmTD316sIj8gtPGIE9g==","shasum":"efef76a4e0235ee974c591e9f6749787f2a36f5d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.243.3600556.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYFuwCRA9TVsSAnZWagAAJ8kP/iwAXWUPLzahWiPWS1Mj\nLkVORuatv1UgmX/jIqD4RjYt4uyqec1mkGuTRbcZi5JP93EKQo8iUUioc7fi\nWs7cLWxsvwdH64aDZH2IuCxzFcPIKKPKoovbB5IUpt/g2WuBAGTuskir9q+3\nv2uP+xR556D93UgOUGm1kYyeovdbtOEz7qEbxQbNCgVR9kKszQlNRzlIFYCn\nju971D699m/f1do0ze/uACBtBLwokzpojUvLpE4f42/bmz55caedltYqMomW\n3FmiqM+fXJUWHoxdZeVhy6Fl9dd3WsNsSSJXF/XgBjnhVnZg7Z6ZhR9U+csP\nTFF3Y/T1hokRFtrFiLlBunqRWoX0X89HSZ8lmtLfdVHPdqMlFESgbttQYEdH\njt8OSrR+2JF1XBOVdPes3Heh6ALZf3KSxuhrqqt6YFDO9GbAnLfDsjf4gHus\nCn4R0lR0H2N9faQbHrVg4uMkFsne52tkrZfn7jcRHWZpUSAQjLbj5LK80DM3\nazS0+E+qLziAMtQQFJs4BnDtDgQ9UbvYjhB7SiWULeN2l8I0g4htTAusuwv+\nO7rU6eF540wY1bw+WUSx7I2dNDjBYy7M0vEsv3zUkMZdfbj4UKSQI/zi3wTx\nPY/8/jX547FZW1RJr865FGUKvD3f+zf0FayQ0t7TuNiMCYJLdDWlKHIdUuXf\n7env\r\n=ZT/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpV8QESrQqSjnlX9/HKLaFTgAUeEpEWykskvJdPcrtiAiArtRbvpejgGGMDm/4/yIVoqT80WBwEBUkkzKI9Wz31Cg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.243.3600556.0_1600150447430_0.4092824725125461"},"_hasShrinkwrap":false},"1.0.14-canarycanary.244.3173670.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.244.3173670.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3173670d8016d935bd69144e9c8a374752e84bcf","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.244.3173670.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-4SLBa+f3pg4NSbPrfXUCydlDo2bB40HWWlXi0/B3irN0RuvDEwjjavksWj0NccjjTwKukEgaomtbRrKGHxfZ1Q==","shasum":"793eddda8ec2213987c2df7d1408654d811c7074","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.244.3173670.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYF5OCRA9TVsSAnZWagAAj1IP+wSi+gR09LhO19llBuEG\nFEchou67x9qKgFDc3BWMMVpaE4FHRpGhAa3/+1DyO8pcTQbUU2e6ZOQMz3fP\nVkjpBBPoBC/daN0DINfY6Vp50/DzEbrIW7T8ntVGzwTUtre6D1rxXtCL7KeE\nL2zr4DAqyuqps5ir7XFM2kVJNN9BxlulECS8ouSJGIcSQt0C8+TNC97Je4ph\nYsM9Y0JbDL0ORWK4yaZBfvhgGV/PS+TauqJBsJ9WGn9MzDNa+PLDze2P2uEh\nxYN6tDiN5HVVRoTHb/KB7Ku0JvB+p1iy4GmI93hopmJwGuuyUxXhrCPXFmil\nVd+lA0HUeRsEz97mCu+WV/wf+NgSTVtqYe+Q6fpK+k/MSYNWtsni1J9i7NEO\nPocvOypeEq00gGXZWv7Kw7Rv71p2VUY+fZ0liI5luwan46+fTVjLplKUWToA\noviFCPdTbofN6MKhX73+H9jg2OyNZCA7QZGXIyC7cMA7CmXK8SpCV+ku24dW\nb30i5OA4lCdINvfemOXco720CKOzk98YsHjlVmHLrQ33M+SQGnX+Scap+EfJ\n4yR4xRTMC5dsMNquDI+KI8u749WtzuGOqYRYiGCJpYZKFyvs73iLgMoMZRi7\nbZ7zQSMgHjnLfzyZlgb1lKVHK09+ybYyUIb+syraPtietkJGQjEYNYL4aaKN\nIi1M\r\n=ENNB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFz5qen+Vkec+TXbJFUkp8Ddlq42mp+GbsNlKUyPZzWgIhAKpIvsTkYPzd9jfwZi8niDTM3EQA0T62PRyZ2YNkZnhL"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.244.3173670.0_1600151118186_0.4741215481515757"},"_hasShrinkwrap":false},"1.0.14-canary.245.3697a95.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.245.3697a95.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"2.2.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3697a95f81544cd7763f165a880cddbd636947a4","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.245.3697a95.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-9WgBuT/5glKhu23Ur+i/CefxrMVFM5xnhM95Gy6wwWwfDphUijvBUf5Qdn2GAVlz9NH8+C+NuKle12V54v4SIA==","shasum":"c3c79dab3610b4f5d16e18e7388c867d7431e0a3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.245.3697a95.0.tgz","fileCount":174,"unpackedSize":3165602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaY+ACRA9TVsSAnZWagAAWCkP/0BKJvknNVnRF/aByOfr\nPxEc6ek1ueAte2EkrL4oBIS4j1qAZSClAEszDGBV/9+JVlpo+/kj0RspgkhD\nwEhy/QIo/jYbOfWe3iGlWM+9mb7cqzTmD9REIfROwuV2BtBFzu8iKPjqIFws\nNOYiDZ948UVgLnum12TPF93xIueUY1ECjr5B+9CbvSTwZLau7vzBYydJ6Q4h\nr+veAzZr7DlnIsKHQzNlVqkjc1fwfWWg5D/GbLRqgKxTsL9tbqOkeBBZBg9L\nscPmUR/waId0cpAUgaNQe60/4cic7sc2R1j89n4xAKPO+C1yKWes2pNS42Wl\nCxu4uoo5ZSE3P2jTQemU6fGIz1jeaLOjxpViIPaQcehZIuJ2pTyxRW4ET8H7\nifS8lX3RtGeP/5S3VbdVlHjzk9JaA/0IA2KfyiqbqjcdsmtDYd9qNVhZSfPG\nmUeMfR96cJRx/VpispH5TX0AePDaTzvyhT8hbrz3pThlRjBEOfWAwIi5UndQ\nb9Y3Wai//51eEIcol0EKFD05om347OLV/wZ3TGrxu1HNbKgTACqu6E/DSSlV\n9mMt154l/jPcNq18c4oM66I/QICt1uZdoJ2Idb6NvlTzRLzloaxbCNuoJjao\nR3L0ucYUqp/n7Eftw00vumIa5NNzdNaq72pWE5M7j2xH2gh2R0kPUeVHbiRH\nXURl\r\n=NUIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsI+aAQbuyiIrHdaxCaXR7VPPumpFTxCkTpI0RGuMk6AiAZx38lCTi+Q3uW49hWNF/ezijtLKL7r7nsH9RwoWcg3w=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.245.3697a95.0_1600753536121_0.741420310542666"},"_hasShrinkwrap":false},"1.0.14-canary.246.05f54b0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.246.05f54b0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"05f54b01ba00c90e04f17f0f3c25d81738cfb049","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.246.05f54b0.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-pwPjxjXpZKcPqodnqo5D1JjHE6QCbIH9IbR2jGfdNNCBUamtgAJ3ug6UdR323KeWzSPAwE/Tvaen3NCHen3tCQ==","shasum":"6466712301d38d6316a2de6f7bfba26c426302db","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.246.05f54b0.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcs9UCRA9TVsSAnZWagAAoJwQAJZKjDvcjE0MoWK8YPcw\nEngvNCnFEWdBxowOCoH0WiIB4U2Vh2PisAPyhsupllKYRw5SIjGGar8Nyrz/\n3ZU38lDrINXZe5s6X/kA9DEtYDzbvqs1g3s+HDU6DjGLrzkwcnxDH8opisYq\nouNz2NNXf1vKuOMtDAt7bNFDgjx0u1aJPzzi3kjYZf6HDsKC2rlOTTmcRhU+\ntpwq78ILH26GIZejooC4+4tsIKtdDlSxq8A7zZrNTGyXOcXCE2RNWG3inwKt\n6Jl8nPblawFYEYFTfFynCCDOZs+162wr4+rUo4AXtVuRiDxWK06asFCOgwMK\n98GkokNYE+jlFvosF3ZeQ0fRpN/o704+74Lse5ICCe8eaqi+B1V/+zJrWOxg\nxYpp3is5LaKffQ3tBDu7ZmrEFNx5YBfGnmI1PcpvvGfG3TRKzBLPh15oCfkv\nBlIobCtOxN2JJNZqMV8Z5yGIqBEv1zYpsOkcl+RZKHD53+RqFT4GR4gSs5fY\ncc3tHclgdO6rbMHg+tKhuzty/KZ3Pyfl3yMEa5JEW4XN7j1GfvsSGshbLGf8\nuTXBLt+WZPHQ93ypJpEx87BsCyKrJtVGW+Q6R9ZwJabEtHQvpOvQxsRNhoOL\n4aUIc4CI01QdRNFrcJrOwvdFPt8vvSg4zIEC+V0HAMIVwGMb6yEFFJx5Fayw\nLc77\r\n=S9uH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwrn4lzLAQGKJFs/SasKK2LWVHD5rQ7WoAE2BV2aYwsAiBV2tOQr+/nk0iZMxqURn7zJShGX4APwo3LojlLyxVGOw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.246.05f54b0.0_1601359699526_0.12403885925795488"},"_hasShrinkwrap":false},"1.0.14-canary.247.5ae8eec.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.247.5ae8eec.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5ae8eecd5f1f43dfd9f3581bd25049d0a7fdd02c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.247.5ae8eec.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-0l58V7tGerXe9jC6XEbhEekM4POBZxPSMtIoh1jTey6Vk5Oq5N4ZcPrl4ivcXzrmR3UW1s1FUQTbh0ZO0tNeew==","shasum":"6435412564d221f7412aa3f84b61014401282d90","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.247.5ae8eec.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffB3lCRA9TVsSAnZWagAApXoQAIHHDrZsa/w9HhjhfZHb\ngwcbZKwDKbC5AI8nMdKcs/KbA0s+TnhKLMj3axTIVSuOjb+ZpUH1UUgpMKSM\nM35mvukCoWmTINdXih5mHM5VlqTAWsZAmwETBkP+yNMhLhPPPOX2/xN0lonU\nAUVfqtRepS80WawfTY4id0wH2h9xkMFP1cydW/tVIZUd8tq/av66znC88+eQ\nQPb5/Qlkm0CJSadDKe+EXMp4xRcPr3Fd3e6mVo8m5E9qDnWi834kVf3hp55G\n0gdt94So6RvJc19nHdjZCY2fG9fj/4LxETzZsVVbdBUnN45J55TixD0Ww3zj\nFUXbGJ4u7nTe6/l8o40JPrI7bu1mHkfNw/Lbtt5Oy2FM8TtpdhbIzFgNrzQS\nagf1SFKS+ZWKSia5IyEPklFXimsCYJE6qg/DQ9Loovy5u9lUgrAx5sZuYRyD\nx9F02xF4Hihc2EUrXCjmIuJ5I4e+2d09d9QCM4uXeOgkHGMzPwrEeBW+taPL\nyND+QAxC1rBFn4IqezAt2l6yE3LCkQPv5FO/y6kWW3Y3++HAT1tW/Q/5DAbC\ngcXxGl46qiaM/iSbT1Ceeq0EUTEPbqim4j0wIf6IZ+TzGr83nBLn/eHQI1nW\nc01QNtK+foA7lFeiI4TkVmlOEQ8ZPEjyM/7bpNfJ5D/eDMUSmEiMaa3bRKGq\nhhWa\r\n=vG0/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBmpNnFJun/M4TZSxCNdwuoZoKmSwRB6LU5fPfsedOEAiArfW7OD5wwjVNQbYgpDaWTx/gs3ObjL6tbPz/8nQZTcQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.247.5ae8eec.0_1601969636436_0.8835309982631587"},"_hasShrinkwrap":false},"1.0.14-canary.249.077975b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.249.077975b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"077975b478997d55e873850a4953b782bdbf64c8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.249.077975b.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-UNn0cshmVHeI82X0PTdI9RyXydcW3WAsg4h1mR6DqTKzmTAsllhThP9O8McIkadN7XlM05c1j8Sj6WwtwXhVPw==","shasum":"72fba7bf08c5100a92d3f94ad7304a04a1e9babe","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.249.077975b.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffCDmCRA9TVsSAnZWagAASvsP/jZByscJBM9PyjhEPDIc\nhjhRoDvd1gyZO/nber38bPZVDMnTej8kQqACXz7Y9bX2L9/ykOZpzY8icuyl\nD47n6SlMO0L+k8TG1f04t/Xg8Tq1McvvlyOBGrGcFAPjX0b0L0JspUHoooKy\ntM3Zz7Q22iwiWruhzum2jtFb/XWuPP2XapgOY8b66kP0O6LivPpiicS9/l8H\n6XbfFUlHbxskUjyZ6RYbEo5N5jgbOV+h9vkogAue2nQfzwRUtj8z7wUy4Q2v\nbNzJRP2ForHf4yHyTpn2+nBx9OJ++z/BX3BVpNE5/Ij6j9dgwugKH5zLDkmm\nYYH9HBcg4Ko66tbyDJsYIeTm9SOC2doki0xokNkPZw1/JWZkzTUKG1lIqFs4\neOQH8VLTcqLaT5ECxBH6CSncgb/EIOLduDaZTSNopZUUcx8f9foiTZkDvadD\n6KCDzqrtVhcDQ5T/4soHTpCgHpHUH4kQcqT3waMgY0PetU067lPCyfAaLOlw\nPIbfAa6Liz3a80qdY4hq0kLX7LWtdd2IuarafaBCWKTuRUtyTD+/SaawDosR\nWEPk0lROMB80wT4DFpp6pJhfBDMCzg4uPeMIKuRdLn7/phTOiGUepDrA28gc\no8UsT1W62K48fuLlFMbvrc6kZl6SSgamAlUDWXVEnr41qwa2BSouo6BjYCfq\nEhbi\r\n=YBD4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAXNXOJ7B+NrFggzOV5m3xyQWGCXWu5hwBEMy7XZh2dQIhAJ8xzDcl+Ujqbi7ihtWNMWFgDi3wETF+OQQp4GFfeo3V"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.249.077975b.0_1601970406187_0.009439860088615415"},"_hasShrinkwrap":false},"1.0.14-canarycanary.250.12ffb36.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.250.12ffb36.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"12ffb36b5c9c3433f6c282412abcb375e675fcdb","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.250.12ffb36.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-MwmbR6JJ8fL1coy6CHQbtPMrznKS6P4coYFM06Hg01rSuHU0ae5BaqE2PI7kQzwB/7ocjBFl/fE/MvOrm7koxg==","shasum":"3e1dded1235058264f07234072cfc4860b1b9a0f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.250.12ffb36.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffCGCCRA9TVsSAnZWagAANMgQAJUta+DKPFmSj3LgZaa7\nvIldkGNl45ziDQ7z/pnMcmgDhflJWdkIoA++oMk7vco5cV4jtfa08ha45qFu\noeDUEb5Bn1wMLgWtXVGEI4ZpJvGBuSJfrICjfoeMxDmcD8iG+0T8ENT1vrFn\nAoRM8olxVVSrV/CtBhPGcn2O4f76HILhSzHANFuZ8rqoGMyvr/ZX0fvAn0Jm\nyd/cfNtfz2TRLOWx+4DUptyYzQfeBLuhOby1eDMMA2qp92CjTHx8Tiz9tX4m\ntFZmD2Zu/C8ZtglekrYhw2SIS0TtG6/DvyRbo8j8a/G/z2k+JBYppyOsj1LD\n/KqvbVR0vFYS1H0tTiuLDdOR2y7dGsDU/Vq8n9OmaAGp64USXog7d0XAxQOh\nwTPBaEk/ujNOzs3uIPkgWjxhoYfwttLRVgpXX10hyOZYwPDOKb1HQ29TkWs6\nNkdpPnHgFO6PM4pOwoE6cvlwCN+5J/ei0+JXNc5XjjwNSkPiDI7r1T9uIP1X\naUU2YrZHuhRcMIq+Nk/LrPVfRg28NF1t/IKpTbfnhSWwj3aLOAG/2QS/mQgK\nprykrwP29K/7+uLqACP6g8J0helASSF5/OBcKQ7VzRgjdrvJHRhqvIetAYcp\nnijm7HBx3NM98Ff8q42cWo19W8HDND9AFk3FemQFP1gyahWGFEZx7BWz5ge7\nHn2A\r\n=VXy0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA99f4SVbqj/xJvrAa0hS9i2n3QoXFo2MAeM6Q1mfwZ7AiEAvl/sLfOEs49epkGCtfGmpiOvFq8RFEMwXRDtAgS4e/I="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.250.12ffb36.0_1601970561773_0.0322520062852687"},"_hasShrinkwrap":false},"1.0.14-canary.251.6f33e86.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.251.6f33e86.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6f33e8603e28c402e0c1ca12872ef599ad69f7c7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.251.6f33e86.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-6dYDkupgL0/WVo5izxr5pfjVB8KQ10tXcsPB3YbisMmvA1+rVCpoQua0NChn0HX5l6k8T0zQdg6G7z0ulXcA9w==","shasum":"426d2dc7be39c5393eaf3343bcf9a75dddcd2e0c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.251.6f33e86.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffCO4CRA9TVsSAnZWagAArLQP/24vuajlJJ4RY+X9Dtp9\nHk1XhEDiNGwM3nmdZJFX/yPXf31boz1Q5/0UGPSZvEO+xqXiYtYraKlSW5+2\nYBQ2VDp26ro7A9nENMthx3HgSKqX6w/w3aDUwWgOrUa6IZeHD8xlaA7PaX6T\nNKIUrsmUO4odM+/pzr/oaTuzmz1uMfD0tWjjRKL16IdC+78ZknU62vpJjCGf\nTSm+3Nm0Dq1Cari95LZI8hXTCiQ7wmxv2RGnScYblylJlOIFSAu4EQzTRoNe\ntbUoYHO2vsUeW9LyiAh37J7ojzEFrEcgGZYwnn31ACyO6AIVqi7gTgoRWyAO\nLhSEDQwX7g7AzVgAdw+loOi6IxOSdk9GdcpNL0dyzrcwkfSSadyk777rqwrr\ndB0zvCBx3D7UrTdrR3p/QlnH3nb+xqg+9gx58orXhs0lVEaVeaaoS2NqrtkX\n55YBwoUVAq0p0jsvUDzY23vAc60Hdsm0bESRWQDrh7i4qmDyd1C53gjUFnb6\nHL7RZ51Gm2IjlctYyotHhpswDgBwDR1AuV1C2WBMUHsJ0d0KTVmErKfPqT6Y\njg4IPNMEsT8DDft2WphtRCgBvmWrOTtMii/OcINwP/ebyqCg4TjdfA4YQ9tN\nSiDjCKlEZbog+3djUd42+JNgJA5NX5z3mDZA0/lka7HNYrxT3QbTumWtS7ln\nfOpu\r\n=OMda\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvEf3+UFuNTctJwJzV0nYqHKpvejOF/hC+q23vrlu1mAIgHFu8iXS6x5hCTHww2ZBa3rF1X4bz/m5QH9JXrRozSz0="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.251.6f33e86.0_1601971127713_0.05953073301956158"},"_hasShrinkwrap":false},"1.0.14-canary.252.715514b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.252.715514b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.4","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"715514bd3b6c3231b9324325adeca2b34fd383c9","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.252.715514b.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-omO7rOhteu8XVlVLBZIFvH/3gWb+DSdK3iEmIv1S6xm4U38bK22WuAX6wExSExRQ2ThByQstM+Vo9d7OYJFjfw==","shasum":"8321323d179f9f0ae118551d1274eef9e2cf02c1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.252.715514b.0.tgz","fileCount":175,"unpackedSize":3190865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff294CRA9TVsSAnZWagAAEmIP/3wQ4FhIBwPM9i9vepII\nzsb+MKLLESH8ErV1kJ+H06MWj4ejMPvp3RIo1P4O5ktB1c4h9QjjnePmiqf1\n2H1zI/4UDxiyigvawJNoosBfujwrkO9ee5rw+Ev/8Vfh0SAQv5c3tZKOdeyI\nSuGmD/IrWPSm8gnpOcsOHPftq80eBIo5i2cJFN4VJsofGXMbJMbRbKERW1Ik\nGD1w2px2jbq68U9e4UTyXtOrL8Y905enLWbPEXqwNRkRRDhQn3vKqvH0QHIe\n5EIk9dEchiEoi8+MkQ7ikK8S/q8tt1K67bGi78TWn+ZTGKLq3PAgmokHsOjl\nuM46jO6TDRZowGkSaUl/KW9foOmqQMIYePAg0tHYVP3GpWt8hp+IgaWnzx+z\ngD0jU6zOEfAMnT9Pic0R2Q/K79fLLEctffZQO02UfEzkgJ748ieKpXsqhZ5b\nnEj80I95SdAOmOtdmx//evBrlHO66SieXujyg/pVhUA/nAixKrVPkZ5jfh4g\nuXUREe823p7porcRM8iRfIuFthQ6l3ZsnRtink05od/KbEX9YLTgrR2GnEsF\n3ZE2nAqN8s20hCt2EJGBhzb07e7CSNGUp1RqeqBSH6ch+VxC2A3zbsL2BRC2\nb3HKBIRShiVTS5Fad/1H0ZI5S9iZ/LRYyDaf1Q07Dp7T6r3SxsBtI4ILDrts\niSwR\r\n=Xeet\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLC1GnM54t0aAMd8sc1xmWpsfqChdU9FDoSCrgXXdKXAIgGh3KvF8mg3xV6200ub9RCHbXAAMp6WGMKBZQi9V+mXQ="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.252.715514b.0_1602187127491_0.5426836665337884"},"_hasShrinkwrap":false},"1.0.14-canarycanary.253.4fd2b7c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.253.4fd2b7c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"4fd2b7cf687eee71d6005bfb81927e372923ed7e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.253.4fd2b7c.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-ze3lCXSBgtg3qz0fmTL5aHmrLrVJQQrjzVFmjIuM7FvKUK3f6iliiEQK4tv6dtDhSI2QAR/J09UhLqA8ycEyMg==","shasum":"a1190a378678904428b8cd04ad50c5c20a8eb681","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.253.4fd2b7c.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhT1PCRA9TVsSAnZWagAAWtwQAInzLaVD8NhWiEMoUlgg\nOQteoeRb2YsotoBw0ovXXwj9+SsfWJry3Dptq8UNjeBDHyjz+Ov9BLjGoC6y\nO+pzPV8x7RPrLGdmo3zT6t07v7QiNlG2Om1CJLyhFi6nNplfHnPqfmXlbVtd\nW6+dweVSELPTfQJvukiDUcE1CpwoQXEzT+xIyGsNhb1CaV5BTJFjqWvSvNKs\nUNoR03PgHXQDStWmuAiJXP3mTPNshme/YchGUPQOZE9DTg5ShQbFwsoTF+X8\n7TEp9ga3iONMNqbosKBrUvAmhpLDtzX8/uG+elyCUln690IKURHb5+AdWpPy\nxiuhqucBk0Kr91JJVj9pcJ3VENA+HYrd5YaM5vqSfeBjlusYG5/GVVToYg7p\nSdoWCutKMbaIYd7JpFoKSSNbqshtftEERJ2ZCy++Y/olfFXxmjJ0O+Q3RMs0\ni3FXbjcdr5ABFtxALEh/3yAXN0rMdQGSCwQF9XnGBQf/eIvT2aQD8sYVMOyV\nwV/D6/P5uqy6ZZN1lj9LbwRyZR7of8SYJQ/RQEDXWhRwfD8H4l/rt8NMHSfC\nlsWnCLFfiMR9CXoO+Oq/t5kF5edepaLud66mNGx0DOEOce4ratdvEQFzuDE6\n/AGJg8DvxsyjxXf6gl7GOyIR9rBX+78vTj5QlDa5emrSElPc84V+VR3lRT7x\ne77V\r\n=KfPY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRmvthA1fJGl+Ua7fE9LeEYjUUE1ue1RaNjN6xnGPfyAIhAOXglgvehCftAnX6T/irCb4DRDqW8lCMTUfd/MXqOW4r"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.253.4fd2b7c.0_1602567502775_0.8748680005783014"},"_hasShrinkwrap":false},"1.0.14-canarycanary.254.e631d87.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.254.e631d87.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"e631d87e8980b2ae7f8c9d162105e11bf17a464d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.254.e631d87.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-FZ3DS4yYN38+Ev5BoQKYLmu91o4XFv3E8CBkD/UWfMu50VVYTl3ogF59Mvqo35pWa85PwTtwCQY74F6yRSXsYQ==","shasum":"e733325db0842239bca4bb3b6a97e618bb5e5722","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.254.e631d87.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhT+2CRA9TVsSAnZWagAA5esP/iJACw9FhkgdVWiaVLFp\nRB3syDLeRDtlAnptQz3wx6on98obO336Q+vEQOxGsSJC/sSItJMrauNxoews\nnyJMmxBHw5nVf6LhOX5QNDwntmCTNDRZZLYd/q043rIHI+1mLJI27TkrAIt1\nU4Np7px0xVQyefTwD44V8yzY+RanfFq8JjvBSllnVujT+3ehwoZug4UifjCN\nNdXZ3yluyODaLlLEbx1YKwuuqb8Opr+8pVsk04Mp9UsWNHMLRpK6iugcfXCR\nF3EfKIHjEzdWiUcWXiJdi1NDWJhX5E8d/2U/qQMz4Nkg6Qy1mZrl59cxebJI\nuddg5nThIZfo8ZcmivalXy3jaIkiuIScF8BXUt7WPLKjc/YqB7cYwHlpbfss\n44t2SKzckosZe2FVatoLTN0spwEhERVZphRsIE2bb34htXJzzO2WmeCfdTUh\nUqVR/+RyZpz8CEWiAvyGjs0HhikIT2gcu/pgk0Ov2xlCevExgmLxOwe+81Bk\nwFjbyu9JYz1xspCD3acn2zqXj1/jI6vRKW0G0jLif74zL8fmaPFQ2RQGEV73\nI9Kx3754sGmGvlBiTUBMy9I0+2xtUt8jimLBCj7VzTbua7BuuDt7Z1emjXkD\nNEPmfLwQtUviw7bA0hCCRwUngJyBw/zsEbQ6T7/z/ewmn7Q56dGDZrmWK3kw\nWohj\r\n=rGo9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICo6OvBMNg+tppSgVp5FPiuWZaGb8nWHUVJQ6TKk8aMaAiBuOy0/flTGQdVEgvHkKlx2FXrEV6BVWynO7HEUS5RKvg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.254.e631d87.0_1602568117945_0.35797798415883086"},"_hasShrinkwrap":false},"1.0.14-canary.255.9fb648d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.255.9fb648d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"9fb648d5d1248a6cb106e6ac5fc43e5002b250dc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.255.9fb648d.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.20.2/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-W1ShAqPQNIM+gXlLRP38Z/Iz0iuwkKLpC8XVNC/KKMvhjaYYITk4oISp7ZTpWWaVPPNbez9LAP2vqMGpbKBoBw==","shasum":"d0dc087ebe18dea57cd4df486cf7bef67a5e14f1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.255.9fb648d.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhUCGCRA9TVsSAnZWagAAP54P/i+EvH78ZT5hVBSnRF+a\n+qObOFXRu65u5AjWvcin1AiTiYCKQK1deRzDC7XL++SGiBQsMn1a/1+EIYbj\n2JOfOdw5x34RySoWfNkoTkRKx7WVdLpzb/PDt2ubKwna+9k4DyDlh26Mh2a+\nQjfeJNkrUali98TsVdQUCXea6OvIa+lZx9sWn7iNuJkTwDfBkwzbklbPgt3C\nbqy0tiuMN3JU/mArD1/C4hf8uxIgx9xdzBrBVoEVMm9JcjmWsUAG9aHoYOGt\n0iOm+jQDr5Fjc2IeqtbCLH1S1TXtfZtzUc44rCa3ORYmvUMM0DJIG/pOxBHM\nJeX+GkHwPN15huAAkl+VWXiIRS6Xyc/NanLvmCHPDouv4SON5k0rTtx4Jpug\np4ne2QIQi4GhGmx6rTPIFI1N+kOTJf076you9EmxwIBsNk9B0RckyaXhSp5D\n2ujRmiG1mvmymUvNXLWT1FbY+MtA2jc1DCRUOqjHjyD3QEQ4i7oFt+eZJGfk\nVrBg8bCj4gL/qpeTvNi2XGfLvXLZbg6eVSTnfxe1wZ8U7ftgyW2yiJdKfTbY\nqc3NloxqS6lAMb58xcMvyY4lBziKlK3OPdcfRB3FihM4AXE6a3/18ImrNFet\nAtsBvFgGP3nbyRUtkEQt6e8OuZm+p9M6D5HL6uOfA2b7HkyLuOtRoaWrf6ew\n9liq\r\n=+Xms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBbYmQXk1yidD7hMezOejOdLaAWn1cuJKItTkdcwelLAIhANhgM72MqzytVVBv4UhOKvjjmqCsafdxby7JLOgXVmVi"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.255.9fb648d.0_1602568325593_0.4813222618198618"},"_hasShrinkwrap":false},"1.0.14-canary.256.0d1d430.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.256.0d1d430.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"0d1d430726d5d34b0ea2784d71f3c8afc69eb38c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.256.0d1d430.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-t80Dy8OY4bhy3xdKINreW0r9Tra+frdt9fNVv2Lqh2A2WbfuXEZwFYCXlWbEasYopUdo0ls0tWIoVHY5iEKC9g==","shasum":"bba40cf6f6c923e435d31ff24019685ebad01974","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.256.0d1d430.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjrwiCRA9TVsSAnZWagAA70QP/Ryog6ftG56T/8hI+b36\n3DgJxDz7jxOI9nS3nIglTOrrQH/+RaG/WGU6XZXunVMqbrscgkR46VviJEcv\nLARYBFCwuqW7o2OXt+UNH22iXZjo4F+Cs+8cFXDXp8nYPVwJDq8m800QSZhH\nScf8Vwd+B1AdcH7msl/mrHQjiPunlVhrEPPc1bF1IQHk4Aj9NiBmRIbo//rb\nUlACqFalhk1ZgtdS3jral5Q0Q9s+AOWD+lM3VupybuWnIadakaARn7p6Dewn\n1CqClXgtDVWaosrXKCfp8Wf+orFcwjmSZ2otA4HO0IVZXSy5AasQcArQ721Y\nFsWL43FbOCvSjKbXmDSyFLMPNy0d3ymJTjVZPTQK06a3yHGJFfppivgPJKRr\nB4n/rXhJxCl8W81a4QEYpYnSI1tNp5IcNsXUazVTXKII7Xadhw7L3m456pt9\nqL2nK5OCHc5RgSlaIRqJkguTnAUXYIv4dycdDAZ24mo00EO8jrYLRhYbfSL0\n9Ut5bIswjvw1uVq/4CwhVfDqytoKDj75TqAH0qgCYbLYkx6IgvD5ejPpj1kP\nFHMuaONEaoIqaRj5CmP4QDiEmmnmh3t4yBmDuOPHOfiWiciyolwMqlEhfWtt\ndflYee6Aaq7s/rF8oUhDLRNW4jqSJ6YX/iCZLSsr27G97CoWIJYIgB7afzpZ\nKe9S\r\n=GaYZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUd2+oADNmvp+iqm74t08tPZGLhC2DFGljrHYnVLqauQIgEF2rVTrdjNEbNYyK4hHLy1Tst49PxctN2xIEvvJfYkU="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.256.0d1d430.0_1603189793707_0.036608023848579085"},"_hasShrinkwrap":false},"1.0.14-canary.258.1caeffd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.258.1caeffd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"1caeffd601be13c074c010824fe26c25726d5c88","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.258.1caeffd.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-KcLHC7Esy3CwL6Cl7BEvzq5Ruuu23/RDEtlrDNBTNvhcOO3Cq6hhcqQ8kNKArr49L5Lhg/jYG+tUNykC41YveQ==","shasum":"2d90df2bb84e52a622ecd616ee39082bef363ddb","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.258.1caeffd.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmCflCRA9TVsSAnZWagAAuwkP/RXQsaginIsNNmXgmOxh\n6CBz8Tp+UzyxfwacMou9A5Wu719GCtP/BhlA/chE8zATKUoO2BpPTiOedh/X\nwlmsjMfyX14gIKmu5eehayT5hlJhx9mNFtFG22jq2/k/FclJtiab110ZTMxS\nDNzGoDLmg9gHn/1ueelvrqtXDEY1b+HQz2hjv86bQ+EXrvpU1wHaRIaF29mL\ncAR97tqQjLuu62s2y24OK0xu7nLk9HcYYmntg7H6dlAFisEFUyaWAVIc8cRd\nPxblNDW7Q/COR9Ndzckb5HFUmKZ33fbm702eyAoIOrXauFs8xrwQYilFzx4Y\nTA+o/RaQ0/vstM5SKOnfjwylK48HTLXqRzaFa1yEdA1qleins5+443ZKAuvw\n41KI4Pgyv0bfnMV0Y1vqe69k6U0DvoR9pWEcDN8JGwQtTVpQ4n/qF/F7PQ4x\ncc3w5W+rlU0m2AGFUd2zO0ix3kuSM/rLABh5itBpcRjQpDA4xaMvgJkkWh1+\nmu9lmCq5WYinVTWqJgpqEnnm5t3YlH9xcbyIAXoYaZ9D04H2z/ud/0s4ZK2J\n3SOZy4fG1FaRPL9kJm0PQzodLFIg3aim28Jof5QWLGrrtzjLVQkwcdbXwAiB\nM4Kr3xRxdsjaDmU4QBYG+sZh5AJrAO45zIhq8kZGROUc1lQ30WCbrmmdGOyD\n9Lu2\r\n=co4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDASsEzwA0fMk3/pH3lK7pJvgskHNDNbBmmKoWB30yCMAiBNkyp+6UolOpoO1mSpzyFJYY3vp3uVAY6KBq25bst+nQ=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.258.1caeffd.0_1603807205337_0.016796439707517763"},"_hasShrinkwrap":false},"1.0.14-canary.259.6cfaaac.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.259.6cfaaac.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"6cfaaacf98b79d294fce458598b23f0ac12021f6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.259.6cfaaac.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-hfVApP0VT+h3XkUMi0nLRrOYAoawC1a9KvSUlWP8ChrQRWFKiuDzJFPciEIEotnJy0ELWC36a9oRGgzDY1mQpg==","shasum":"06422695db75b7992953aedd9ad846ac67ab2e02","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.259.6cfaaac.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmCgvCRA9TVsSAnZWagAAwgQP/2yo5l7dMDaEoumuWkfS\ntT1fGPO1UqOoGnY2GixdrbA+9CyoErHYmPgSZIrjIodXfrOI6zCf7y1TdaA2\nMqRfz/r25T0xD7TVSlFtsWqiTKjrh5FBp0sQ39HfpKkS+IpzxIqBqfg9Vn+2\nX5DMU8ZLLVFnneyMvRbFMkspXloECmlVjDvioTt0wLmcUUwEGR2Rvm2RcZ4S\nLlqzu5EfjiMpuH8e5il4BwHnC3O/C2UxyP/7AqKBXnxLSyMT5dpJ7fhENwW+\nI3sOaCO5dRtdRE2MrwTwixP2s8D/EK0US9YfnR++bpRIcJ7SOWaNIuHuBhUg\n/ZZvXpFOIVc+BNzq0xumEhjwhP6kilLfZv4q7jTBL460SLxXIQjQJ3HO+sbL\ndbwe75ePU08KfseYgGTK6ex7YtCNaCjCpiBrpVfg3+ss8o9ZnubGk3OZ7meH\nHankLI9EulbsdgVBcLNtAt+IfGw8YCztuHo1cQfFjkfJeJAGT1lZyefCZFwL\nzDJwqL+G7Ft5d9XTFdneycFhHtlJH+gJHTQAswSZTUmMl/J7XewURX48PkgC\nG0V0eH/FwMY86Ffbbn4LadJRCs6VNElUReyzkYQ5jqTBNsZfGY6b6wW5WpZW\neZlQ7IJ6WMvziSREG6HDB24uzL14eYBV9SsomFYqTL3sr1IHR8q1XwqsBJAR\nc2yO\r\n=3e46\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGALD8W3lqUEXp/a99pGVgzlkaHyb26FcjR+PfjHQKMPAiBuMSeGnKVywX9js/4N6Ly2BiDFnFCMeV08uN7+XO/Pwg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.259.6cfaaac.0_1603807279376_0.06383776637784111"},"_hasShrinkwrap":false},"1.0.14-canarycanary.260.b264e07.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canarycanary.260.b264e07.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"b264e0795c5cc4a29975c5fd86d9d264fa1f0ca0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canarycanary.260.b264e07.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-bGcBidyDJxCo9O/eZEVjJbwveap0gUyzNyX+KmIQzMi9G6EVtn0DhA7BdjwZQrbPCxCa+pZzXUxJsGxZf7mTuw==","shasum":"8abb38d7a325326481e13ee147c84f332058170c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canarycanary.260.b264e07.0.tgz","fileCount":174,"unpackedSize":3162724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmCjYCRA9TVsSAnZWagAA6k4QAJmsMEzmgsycxsI9MoM/\n0JqzcOesmvwDt//D8ku7Hm17mvA4IN0USzokleZiNeK6IlbnfntlJ9CJeEb1\nfD0pBAxYVl//XuqDau+Aup+CWmBSKcjEk6VX6KBE7LRUyY4glg3ElX9joAYB\n6Rx1QGZrr0aoGzQQwJz0IRJ0C4BRF2NOXKHU5POz+6K9T/GvG5pao5YWhPaW\nkXh1u3wGuQl7dvrUAGSDPa5IkB8i4AgXb3OVKg3f7dZzVyJzi5rv8WSP/lDs\n5wi0+T3mGFxZIZUw7LKDYBYKcghEQ4lhce2g20bwAmsuiYoHLwPP1GfiuRsc\ng9IPRPK5H+Ay9z630mbgSlH1e3fbbTSWGSpeTiSGcAoi99nnBUGyZ/ZzWH2S\nzuAAjvcLfGSlBQNOVPnoldxra0pi4RY/p2xaRqo/PtnhL+NaetUu0cKqQGl3\n9qSkcHjp+Z648lRTDW2CZTAl8rTvaYDxN7tTZwKisbWv360i28zXt6Qr7ZI0\nq5wUMi+opAAtGePgN31aX70r2U3EE0maA7Mz+7z6hwXnFIUmufjbgeLf7iIG\nTxnUZSH+re4wLS6fkMqZTrVVtBb3T5fYoEogtYZCZrZ2K0MTZnpYqzE86MBC\nTCggFpK7epCz0Y4p0Q5u/p6o/1GcPy8jhdufllG3obLdDZ/VtYDBq0vWwWK+\nD4V1\r\n=WUYf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2l6GvWaWngjTCi3Tj2Y1UICPmypWwKGWTqkz+nntNLAiAKj5W8d9Y26JmULpcPIIye2uE59NB7IZoxg80RZsLrCg=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canarycanary.260.b264e07.0_1603807447682_0.6384945026599582"},"_hasShrinkwrap":false},"1.0.14-canary.261.854da57.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.261.854da57.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"854da578d693ee9354e393af803902a38756ab5e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.261.854da57.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-rJHDTWbvPLRM5u+neyXdeLpo1RA8H7xOTEC6yRIW30dAtFotpwgcUusSmxYeLReZeTpnzrNGtDU+0up7+eEzVA==","shasum":"fec6116d48340e285ac14ce5a26f2b1e8b7a3399","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.261.854da57.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoArVCRA9TVsSAnZWagAArhYP/jMk27GR7/E6s/Ob/yt0\n5ND2o0g1THRijhWMz7BrF52y+fwIdpCx0OIdPAd3VuMCKn5pfA0a1cBgdomq\nzP2dn7LY9P42xLZ1L7SwuX7UTUW9mfyZX/JouNxozFkRNX7TNaKSurfK5y7b\n84KR2u8lPL5RKP4uEgfRicarBPT+9RI+8Xbico8csm+DkCJwCdqSsiFrKg7D\nVGQEsekfCOkdwpsA9UVkCDo1XXX9h0YH8aZcgDQC04qEJHIwGH7n+0Jb12jv\ncIyRkkpViqlPnncoxPA255VJ2jEvowQwfsWO6JsdDNiYzSVUNozeNqz3z/cO\njI7FXNSDy59ihmEKWkAZQv7j/Hw9JwDXhdPpLJnv6jK6bNLJ2EjLRtm0rGqy\nuOYFVdsJPLzgYTGgPqGksIFap+YxFLdCBxqfm85rchc8UvS1A5CDQrBdDIi4\nE7Y9Unl5/N7dBwK/8Rtp6lu/g2UrvMKz2tcqXjkeEyQHAPynFBTaW20i96WS\npeSwqRjiTt21X8gE07zUpWF5xcEWl+zlh3wFKNMw+9hkgFc4EDg4J208qPbf\nJGZIx1LKtz94IpQ7W5wMd+9g2+gHat0jQgl6NIR3sFSRQcC5xgEIyqlAIDpN\n+E1CjPgcmWIvT2lLlkRN3hE+HVooTGZnNwk4nMfgQr0eb7+iGgvmGaOVWuyR\noaH6\r\n=LSX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfZP0blKunYGkfZxNZxtqNSM3Q7ISfp8CgGnDLDxDuMAiEA1t77lL6kT4kOfeTARIRU+RELUGP0KOx/4MnTQ0Rvfgo="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.261.854da57.0_1604324053269_0.0741285335716555"},"_hasShrinkwrap":false},"1.0.14-canary.262.f9699fa.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.262.f9699fa.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"f9699fa968804bd6eb3aacf3c8b439bef4a74188","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.262.f9699fa.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-uoOjHvYgcvq1btPuQNwW+o4n3kO5+/Wf/+39xR9x5c5tOyXlI+M6lI+oyI38k06kYdUFa1kB4vJajc2TQa6jFw==","shasum":"13ed3a28403b0d3340a08f2045e2001b7b214178","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.262.f9699fa.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoAv3CRA9TVsSAnZWagAAlxkP/2+8r66d16BFmPCcOq8r\nifocvMwINrRcNTcdZl0RsStOC3uFFaziSMedQFVy0yXUzeRYdcq4Nbi3qBhX\n4S5wcPQFj4gT5PrnPpt5XMD7N3cjz//c97kR1N6z0o8HX5CRjslyDhvRoiU8\nDWPfD26RpGyOhVn5yy2nedcdLUahdspm9WIiX08PHW2bdVR2ueLmFFNE38cX\ni3Wh5HVapjx3VC9p58OxeBtCDK1yz5tqB8L8Yt7xWGm/haxPQYtrIk9HbbNJ\nidM+oOldpdnoOWC2LznBjIf8QgZgNOMGUG4lLZ47ToLcAVEhbrRJnhb7gKam\nivK9Wyin8AXhfLfFyHZysijy+r2q108ruI+w1RvxhJPn2p4wBqzHp0ZkRqK4\ng4uJzLofW5XPQpXc6XQZWLmERILzorVPy9r3Kd16tFuL+wdjdqUb+LIU7wiP\n4CkO2GMcTqR4dU10xiL0xRSQNzalxcQkb1ptNctI51uxhhF5idcy17QVa7H0\nuKHZpW1k2fr4wrc0c5a5Oa+dsVxPcbGr3QVpJSJs8N02/E0kvEoyHvtvXJDd\nvvh9NTsib++nYBsLFpPRDJVW8pT8IP0tvslUsnftyaPe5xkwFwmjo815yxUv\nmRpmWvF4XrmBr971XOgWxpOao92EkoNzH+KRlqivieSLc3mBQuo69XIVDYhG\nXNVw\r\n=+cD0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3nNWcNke/DxQdqj8Ib+gD0u4SZG9NShAyg7xajgKqPAiBaQ73wLjvOFGk9AUaLaDIZ6mavQlhP4CqJUaQ9mHlfaw=="}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.262.f9699fa.0_1604324343048_0.15491621051868387"},"_hasShrinkwrap":false},"1.0.14-canary.264.5787b3f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.264.5787b3f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"5787b3faecf59d2db9922648ec5d2016bf0868d9","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.264.5787b3f.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-YFDYZTd7Aqm6I5KPZYY8El6pDfEcwPrY0r79/V5uTXhN4NMHc0UT1/KT2DDWjjZdlrau/sxN3GwvO/7GN4LFRg==","shasum":"eb588de6be3f27b722117e4af3de4636fcd90d60","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.264.5787b3f.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoA7ECRA9TVsSAnZWagAA8vYP/1dU/L8EwFiR9dq5hTEr\nDeOhEMrKjOdWFAxIHGw9sHkWXhE1mOtVg3MhFHlUjWZpbofg54HQ/bQYoc4h\nZD2CjGmRbarRpHCsRU29rRkqvPmMnfhzHqevDy/o4CfRbKHVPNFl58sYgHBt\n2EHLrtJOy54/B75K+LvirDcRJr2SsD3xytyh1Xqte/ZDKb/p2K7BRaravws9\nyWwiCeu9tyKK87ZkYr9dQ6Hnnda/nWBx03CkCiwsmf2q7156QWPAnmhvHWXc\nifVI2U1lpT821/S1aDFeP29kbcpPSTzjt6ZrLxeCxn89aaIealGQLSRcRYPs\naeU8/A6Q6bx6V/hjFrkBMz7vvf56JeDe/Vo7h8IBtlVvrlPV8qboqf+kdrNY\nYdr1omS1vkpckefHo3t42B1mqyW+H5HQwREMu5T+MMQhc+OJr/gu5rOIyfOr\nDOutCEuMfNAgtlfUOACiewRfiZIceyRDF51pTKJIfGKrzRUia4KUVbfsE6iO\n/WIr6h52Sh5VbqtM1KcPu5VsUe5GbiShRPWGRTzRiZgI0JuU+2S94R0xPz9K\nQDwXHpHbMp7pvsI1YmIucgWwV34sVgBe3xS5kKTIzkAsZTS86v4to2hCV5H5\n6oqYFQm9AN08ZSjJHskRRNrfa56dUYKyksvY0na4iwhEzi7OSbIwsaFjWbNB\nEHEC\r\n=/cbo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMytx5l+CwBLkLyVEd18LUaNu+X1CLSmQrIq8xGtC+OAIhANqI2WWscbxMW/IfqL58GRGoG3kfMmP6LxsaRS/mld8K"}]},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.264.5787b3f.0_1604325060362_0.05248423702377014"},"_hasShrinkwrap":false},"1.0.14-canary.265.3d2edbe.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.265.3d2edbe.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"3d2edbe4bded255a2c82fabdf7262efea404a516","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.265.3d2edbe.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-zuPPOy+ahD69tBbG1mHQ0TWdOCUVURAPmeKyN4Oq/9KISINLvmZZeF3bshXeVKXMV12nLbqBV02kQ/IWk6BNfw==","shasum":"555c6699c6f50a6bf64671d4eb3601fa58c63332","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.265.3d2edbe.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqUcCCRA9TVsSAnZWagAAkC4QAIwlIp1lm8oVWRLbopxx\niDZ5dOYU5rB8Ur0wwiAdZ4ddhG+4w5Wx3f4Q9uxJSev7PUuY0NZfYSUnRDet\nLpGi0QeJxFcT87aNTVOgQ0dE5pjqm82hDD3bAMChtEAw/Lb/5o4arMxI7UJf\nHAU2OV4+z5gw187gAD7ZSHewCWooLil2pUtknQRBI2B41D9j6Exm5KjHZ8zy\niyeoqbTx50WQEyqkX5HMKCrIKutieE99ib6Cyf1xr1cOT6ZrJpARLtLmP1hr\n4QH0E7Cx4lKZxtba39/q/g+Pql3nvbIF5OM8bS48KrZSSBbnCCSGdDF9sxYC\nnqI4FPJfk/c0baQ5l1p9j/QwErylgnWnMeD91gInMATk6BJw4/OY9IM8duXO\nCDUSeH8xkswLsAMgiz9g/SpJ20i9VJeFrwPld4Gf7aqpAzzIfK7piki2V3Qx\nyUBGX6oX5vRShU4TuW8Hg2192wsSMQWCaRi1IEltuiOQYOz13Dyfij5C4d7r\nX7uY1Nghj4C2EDan3lMfk3NBlt6DyTSpAxgPONQnT+0/Vpl+rEd6gqrtTYql\neFqXdThsPnIw8UmRtO1qB3DNVxxlmu7snhPgTfadtPQoVGHrhF6hs3Ja/cu6\naqxpMKyQvBJdEemsgeWBEK+LGd4i/T++e7t+2uQz7YnC6oFqQjB8uYGArFaH\nXHnR\r\n=mQpP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAH6O+lmvBzSKsbPnYzvsJmw/1E4+MJfYZ6Y+E+8U+eTAiEAxSioJyWooMFEeRBYAznxfp9XsZe1yh0ayLd5RBtUhuo="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.265.3d2edbe.0_1604929282177_0.13018421583036965"},"_hasShrinkwrap":false},"1.0.14-canary.267.ff5addd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.267.ff5addd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"9.5.2","open":"7.0.3","react":"16.13.1","react-dev-utils":"10.2.1","react-dom":"16.13.1","react-feather":"2.0.3","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"1.2.0","typescript":"3.8.3"},"gitHead":"ff5adddc355b936c016d8fc3e006150eb6e6ed73","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.267.ff5addd.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-embGIoA8S2HpNRu2xHoXlsIkKISTTXxVCftf4VgM1FIpL/ht8dEzWNLPaZ61uqQQZaVdNJvBvoXZxstK495V3g==","shasum":"547522761376c24a971f5558793140b07964b745","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.267.ff5addd.0.tgz","fileCount":174,"unpackedSize":3162718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqUeFCRA9TVsSAnZWagAA0poP+gNj76b4WzFI87kGBGRQ\n7ubhKzD/UUQvnLsahYiHytXw2+V8zjCjvGJ2SPsmR+2NhBqsuZsy0naBCGBj\nhMV1ekimXQDCh9neSG5qA5Gr9UtsF7kw8YnXn0YntyTF4yxPF7PnpQAAoqK+\nt/7O5Qnz0UnLqEPzXOjJpUvWHbuK9ehOkLmyQnlQLMZZl3zNCodP5Z9YjJSz\nKjJgZID16q/jcRKg5GDUDdtCtuCSVZAZx3ZNgS9gt6UEj3xXuKOKRx6Y+/Y4\nmGeqmEw6G9BJowXNpDcXH4huY7ig7o9dLbcnr2WdXV2IJXmnztqoeS0ZcB+1\nIQ+x+Q+7uXfi+6UFnCtuXfwFeAg86QN4fDkQVOfQDGGDp4zJPzI4o7EmUhXN\nbWaH0KizJVj7V+kJ38aIRdJvbr8pJZ34m1qSfWFYT2dWhnDqyhNddEoCqmsP\nJYXfGU7iuHq+wy5wxCfakWXKwMouyGGJmDWgRVuPzdbjAM2SNLCwi1aNgv+u\nPjH1VpY9mT35Zq9lZ2grkNptWanAUkx5eSKSwzmkAEmd+aPaYgi8ErZNO3NL\nFXBrKXVmRpMPHF7bDrQYN9UgdJ4umj0bAV7gVxg2v15tybLkCGpzQqt7fY+Z\nlBnUCztz9ySdyvKUlwpHRh6oBDl21a74e5eE63WklXYSM7jY5yUuZ5fZ+xbM\nMjtL\r\n=UVz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDip7R4W8TFEa/qC95i5BYvRHjcH4sa4MAPii9hkPY2BAIhAKxUZ508XNtQYU0V/gychybI5dKgPBSZuO16C5mwV3c6"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.267.ff5addd.0_1604929412566_0.7718846468278495"},"_hasShrinkwrap":false},"1.0.14-canary.268.7c25b5d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.268.7c25b5d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react":"latest","react-dev-utils":"10.2.1","react-dom":"latest","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"next","typescript":"latest"},"gitHead":"7c25b5dab65462d999e3a832b1fbec645b9b3180","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.268.7c25b5d.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-C+UWhhP6bGam+oX3deRU8EYAnW22dEzkcX7UZTjskdIHOIah221CC/M2+U1iIUbWusD7kByOsBJjyXPat8iWHQ==","shasum":"8846e16a1c83b7c8e40c262bbe8bfa35064da769","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.268.7c25b5d.0.tgz","fileCount":171,"unpackedSize":2494268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsidqCRA9TVsSAnZWagAARg0P/je9dqlQVnBrXcI6Rs6g\nETsBFosZw+02V6dAorYnGRn28f8L/dY5arkRZ71RcXd3knI2tUuMbqG1nBYz\nZiEBv7fVd9dP4gZSuXbL1UbiLsZiC0+bZXstP/vQ0fuvYGR6pfFX0ANdnzyY\nGIz0lFRrEqNn9ScZVRHSdKJ8eXP3WFjfKDeNn2Jw4pwFEdv56qxsXQW8OTgO\nhsZbuxKM8aSq4zYS8cvTycOcGYVcPcLGdtvEPV5cs3ZmpiJLHkh4xxCsVeBN\n5biXOdnE0glrMXba9OXldfYlOATujy7DsDzY3n6eKQrJWZ0zHOMCsShNZtfa\n9FRqyXH61fl1zdvzq8AWxlUMtlTxBA8ycV9HeeXSC5uC00r0qmzrZDdXztob\nUa0SxS5PXf0Tx6IM64RWnUVqGOEoZg5ttcZ0Cv8EORkc1ip3MsrpXvOZShGR\nL/QYL1D+X9bsBPWpkWkRW7CJAJuvNkMOpeC4Gc1IjFsKXrcRSCiyXkzElTqs\n+rPbPBqFKqcRf80pFTpkFRxEsH41YVNfulI7wTRf4MDeFVRyBCWC4knWPGS7\nXMZj4KpTPaRrbyscAmnFAA2prwNrS7UADkpCqzEG/PEzVuZh2ASZR+mOWGir\nB7Pg7cLVbX4Jvwz9I+pjD1woxWhz9D1QUpYs25IGzt7hCLkaSoXQ7JoXudNd\nGW4K\r\n=jtv5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBu4KpD50IwCCJ35Y3eJQ3S47tJvAoExzisptCA9p5OaAiEAq8UXtdAZlz5dAvdrEXrbxtEVTPtLn4dENBPa+djPb4k="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.268.7c25b5d.0_1605511018277_0.024403456545816216"},"_hasShrinkwrap":false},"1.0.14-canary.268.aec8c69.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.268.aec8c69.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react":"latest","react-dev-utils":"10.2.1","react-dom":"latest","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","tailwindcss":"next","typescript":"latest"},"gitHead":"aec8c69280b8b61395044e558e2ac6fae8ba5aa6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.268.aec8c69.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-6VrqikPUgGbKdTpjvPBWsbg1Bd6Yqh6U8U2j62bTrPQhMQqxWBDF1Mjc77bhpOi5CS9XXZy+Pztd67nG0W5XdQ==","shasum":"271a5026182cd2f3bcba3d2da94d827bbfd31615","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.268.aec8c69.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsilMCRA9TVsSAnZWagAAO/wP/AtQGkW2+0+iIRTB8YjJ\n+v88Upwcd6WX49LfDxWGTfnDrVFCmAjK1cxglcHRT26htCflnSyG2ouj7ssu\nTAIqsgfOPV3hAZCa7JS3Dwt70JeIjYmUlKpyCO0XwX17Jch5b8ShhaH1ciII\nxGHyE76VAfNEDN0D18UOUqxkh5cW1E9mOlOtwtdZY0/ic0aesbJcCdXQkbCK\nStWJhCH0H7e2kNDVhjn7iqrSa0p+ohvN+i6zlT1iVKz3+zG3CuchJGIESy7c\nNFhh9TXWjKC0EwPM+zLr+AhuJYzYbQCuGM1MNM3KKbdh/qcpOrR0Smci0qpg\nmTDZvCKIo8c0s9FHUgrRjcFteXs9pA+p2iZkhveJ3v7tBfnYzApIq5pDBF2j\nZKJGXD7GOWmEcBQhBRAcADz3OqnYnv7v4K+//GP6/vZc2Q7mqxAZ8UFwo70v\nSR/W/1oymCyyoC34VoYh+jJQFnwENIUj0qyZihr18UT+WauOwNTEpLzW5wIo\nUgsJVH171Q/IhUyH7kVaC3bphdeVrAuVlfsKdUenGrnNUpBD/UBGFSfSDLlN\nnzmlsanL/iHJHCarG2ZFugND4Hm0vdy8Kc0aRtbhdjFFn07847voBUJEeMQz\ndvhZ3rY9tbnyr5z6cR9/dNYntkcls1CrCXm5s1E00wGySk+k1dmqudhyE2C7\naxj2\r\n=uDSV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDE7P3iXl+WE33xiXiO+6x2FAn+KgNxrusapl13D2qp+AiBql2LItH6nTYXMDsdQnks/6hGI7nisUq+++a5akhkDBg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.268.aec8c69.0_1605511499645_0.6308889420279697"},"_hasShrinkwrap":false},"1.0.14-canary.268.8a19862.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.268.8a19862.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"8a19862382f460032cd3d754d1d2214e0147a0a3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.268.8a19862.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-EzCrDRqNkiOoVR3v6/tcs1XLOEIEnT1cDa4gniNM25rtDYeMEh6vXoa9ZgYL/KoOswhG9B9ugUggV8k1P8arWg==","shasum":"55c6a4f406b4053c6c19de62118ba8cb30a2cd72","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.268.8a19862.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsi1fCRA9TVsSAnZWagAAR3EP/iHbQr/SzrtmVavO6dfh\noYjEYZOjMa8I92YUdV4X70slw8MXOAtOs5URW/J1poGoL2wfEuWUHIi2/Wh4\nm0tZya9XBN88gIJVDXQno6fsgbaLnBJD4p3BKQHHWRzz//CFKor2qfLmNq+O\n3thwjRV0uZ0rd22aZWQ8c976UsN08NEqdHOw7ReHII2DeGsQaUP8ee7EFb0I\nQcYgnwKe4gGqQWkPmxpGO6cWIHaGCdbejNpqgzuqEJDKWWuvsZOOLfvvAjot\nRe4y0o7TF8itQMYFOXl1EmDBzHHbYCz/lsBPqINQv1Q15oob2FMT9PyKHwqY\nBG7nPfqcVO7LrJ1IgeM2dv5KOs313spcyeERzlq04DU26A8sk8HITLHr3e0V\nGlbLiqsy3gKJ9S7ozfO+RQ2+Fc732nQJ8n+YFuc+Vd7Km6bvHbLQiq6YVBPA\n1TkQXh7MRdj3eVlRaad3nJqPeuPLadtrgjKYrOIQFvdA7kIIonpC96qEQuaV\nZ2aZZgTkqYqee1PW3JwIu3bt+W9+X7Fy5EivBZou2AOCnnRsApLpTVamMEv+\nZytv74z7JJTuGqFNdc9GmwoNt4rD4KqXu76MyJGT9UP5u8gVNsRXt/6rBLHX\n3gym0dlZ72Z8Mj3h3fsX3VqNwQ/mGr6M2N0c0OyR4s074H1rKYr54PYT/K3h\n+FnC\r\n=fnkT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwy1fY6I3a/FpaPyxzfcKD0hNivoD+gKMyS85AOtx+qwIgTdL3K0G36LAQMtbWJGKvDiSZEsum+WlU4vuM5+4qn/Q="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.268.8a19862.0_1605512542760_0.7776359752445419"},"_hasShrinkwrap":false},"1.0.14-canary.241.4b9a799.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.241.4b9a799.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"4b9a799d30a8b7a5f9380225686f8defed084520","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.241.4b9a799.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-89lSSzSHZiG6hy5NFltm80YYFwOcCMrurl0YqlT0mzDTpsW+Ig3Y5byz5uM/p3vRdt82eZt1Ox00aZz8B+GZQw==","shasum":"b02fca788e18e688be55571e0d4c94716f8ec3c0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.241.4b9a799.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjGuCRA9TVsSAnZWagAAV2AP/jHS/h8QROJw7gC3ntKz\nQXirlp5QpMePA275g/bSqgyaopJ6r3I7Lq54DxGM6QBuKfiXdXqT8S7yez0Q\ngATTtlKYaZlQRP5gpwcPeuuPodlp+vsxE9zqjX3/c2ECVcWXFnpN7gKvggrQ\nSIpk2SDbN4K9+x67uqq15yRprAn2LaxhwOhOyN8KER+hV6hcONNA54OkBUXF\nEqn8O2a3rXB05dAoAdh4XxpMabNIdbSxPht4Zul0EEtl9ahLOuqcR8pYvKo6\nxtfig7mvnms1KhyeOjXZrwGyqB3l8DVii0hMJmzTIvLW0yNZLfmZX4q8PQD6\nxB/z65aeleiqZVF5Hj7oVhPO4EEW/ImUhkFPNZ36Brc5ypgqR6xMRbxxEl4r\ndD/RApae3c6rhs/eJ6iQINCRqZsg1HQIeiFvCml79MHYyngXK9athrtYj6nq\nLj+x/Ai+Dh8b6jycu/IeMP/P3ifUhc/2FMnoKWrXaKyQrQSRTAgOM98CrcpB\n409K7faA+7u7OC3HXGtmIO9GUALgy0IRmJTuJdIHVyVCS3+1Q6UmoBp3qJur\nOfx1zuiSJXW20BW4k3KfyPvW4pJ83fhyG9ZdTb6lP08+usVU+9c045CVf2wy\nIUf9XXBakJwHxndGfEnaCzLgEQJyGGPMG1CgH0IEOJ1G3w68U3ZBqPLoYH+c\nft7H\r\n=sjmG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE00A6DnPmfOXgj9qj6G+eY/nRTBQSo82NP4vbmYPOw8AiEA4h9Ie8m604Rv8NgMA2mpTXzaNqsoAjOfc/zVFZnmTz4="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.241.4b9a799.0_1605513646272_0.13137389948657052"},"_hasShrinkwrap":false},"1.0.14-canary.235.f545efa.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.235.f545efa.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"f545efaf5e458cf9b1b28c76072f0c1b2556ead3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.235.f545efa.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-eqrCsUQHaNqHcyHfSnYGvLGqhrbLIMHwXEGloBzODajBd3p7QX7qeUJPZeetEuFsuTuLbL07QKHYv+3qiz3ojw==","shasum":"b7d00f036c2b44ec8f0a6ef9c1d3c61f4441c8a3","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.235.f545efa.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjHGCRA9TVsSAnZWagAAq+IP/iUzyGHBEU3UihhshHOi\nigSfbVHxPt5m+BhkLD0+qPI/McqCn3kMN6IriV9OApTuoOdpw8t16J8lhKxT\nN+VaLYPpgLTJI9yGFdbhbKl9Md/TYfC22H46dz794xyKeUhou2LOPDUw+zUy\n3LwngHNqsQbIwqHglZ5/JEGCB9VKMdMC+1qq7jmUzMR0AJxhVATQcdqnGXpz\nBRoACh1bAjMQkESPTJtJc8h0eflG2hPMSOLD9caC0kN633dgjNsvd35FwE7a\nLUhqSjCjLI8GWaE3r+qoqqe7OSLxCGWNeX+r75ihEurTGrMmtfC0G1p9/9rW\nUFcG8i0k/7DWnG+/hk1wD04we41MjkTOzRgytFtLfpkEvc51T2nZKWomTElz\nPJk6O/xv8Y0qBC0NJ2r2XIADlSj9Pnmz3tI4TH1l2yYbXUb6AM4yNwvbLK3m\nSDMHpfFMcbxraV7Y6irUwugCizjJC5JZGhdYytL7+LBgJO22LmEQnUlqq1Cm\navdBXC3F7QJCqeIuHKZ/PbTfauwjG85+2TP/HMzothSm0uPFww3R3pitUWRK\nkiTYUxY9ewlu7Uh7o5M1x8KYBSHCvnUmRPGI9L915cBefW16iE5sdktf5nUb\nap3l3MV+w+6COxdUxl3kOroFq2FLHLSvY3JzbCDvIAO0A27YcvIaetSDFpdK\n7CSu\r\n=sbEg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGSZCzZwv7tL+zdiFNXaErBOgM7ac0OYRKSEJZmE6ZjgIhAJTQCE4ar2fmiz1Bz+COzt5hNLAI5nSu9y1aJ6u4ShfO"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.235.f545efa.0_1605513669966_0.26504913428895116"},"_hasShrinkwrap":false},"1.0.14-canary.110.aea801b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.110.aea801b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"aea801b0cefdd0f2461ff86375524c798bab0ba0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.110.aea801b.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-8ddRZ2F0qdxRraJtD0j/We0uV6GFwPfDg087fBHVGgLDvhPRumRaJKTM8/gHE1JLdEWkIomRz8gZjSnHPSITlg==","shasum":"a3126b3a64795e5858ebee79e10a0917e2b04e0b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.110.aea801b.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjHXCRA9TVsSAnZWagAAxmIP/R7Q6oL+uyHTasOcLxrV\nmypQACGpwUCpNTkNwT4laQclb7oemibD7/ihsaTq4qx7vYkYbtAScISaWjPw\nC8xaswuIqQwY98NfNqSDVbaV3ywkNmYp63LYtzi7+OnwqAsjf3EVKRGfWxI2\ne5LWT9/WKsTjHhQKwTh4pGHahL/hgjAx9+ZrOvY9zuLo0Opc3ROQLGW7UHf9\nrOfAfAN9Z62VGaQhS2zNhKF7Jy6gwVUtRay61jf7St0l78i9UaKUeeyMwZr1\ncWNKS/hzcsEOkzkSSk/Wck2mjHudPcLMrLddHw/W5KU/tjQWXXkF8W7pFrrj\nrymDnhNy1UC5d0oX+4jZdv5au64gUiNUS/1I5G4q0o0CD43K+wfp0DJCaUFz\ndxYo7ZpwlAR6T2bfzuwPnwkPfxiO/ASfCCSH68n76DDgiklbKqqp6MyDYN8P\n7rgLQJNoxZYSuo2G6ZjpIRLV/JqDqAzYZpxhaDELTG2bhNhZ2Rlo6zGOH2EP\n3ELrRDJINk6w3PRZuLoja3nXabyDOI65hKhn8tqmccqMNVJKwdGdYcaHship\nC3G6Bmo+ohL7dePnrcBmW6wHxDXxINltd0IMo+ASkyDOlGy8PVhHpUSlgwQt\n+ToiWw9UF3X98V1W7l2Umqgjf3MiDn1ujCDl//XwFJXkpoaJGlo8XSmOMHlV\nnKeT\r\n=Iesg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcfAlZlCMeK2o1LJrVj/yBcP5o2JAiulBTOiXWbk4x+QIhAPiPBrPAMIUnNqUmCWIoCEMMFLgzrIYdDZQjHdIKE07L"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.110.aea801b.0_1605513687333_0.0911043079863787"},"_hasShrinkwrap":false},"1.0.14-canary.265.70b60fb.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.265.70b60fb.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"70b60fbb9f4b6ee7579ebf86dce03884b201529f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.265.70b60fb.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-RGAJlxmlIu9XtKLHVSE7l5/eGy07y7VkVBHwgc5EO7tiOFZaJorT+j57FKbBoX33V3sFUQuguEQktjMQL51+hw==","shasum":"f8a60f8f32f520896a4c79f6a23379b3ede37ffa","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.265.70b60fb.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjIXCRA9TVsSAnZWagAAE4AQAJKiYsomXTvT6mDmo5CX\nbAAa+qX15/aStBwJtvxEm5Dkiof/WvQnjSF0H6zAlY6+cvxPVhPc2p61oa19\nLZjulWVZs1z68jyehrNSjyWLZa77ZZ7vLXo/TBpZdFhxnu3rOeoV+CVhzSOS\n7ntpnXgDJn9MPnQsGmmx28QyJPlWE+D60m6ypy5P/AAMjhr8GMKpo5aNyKxi\nUnw0RlREz/fwxAKTrENd/AHJmE4BIKACjwDSxWOZwgVnwCEFJMR7c7kTmKbe\n+tir0dsFRoD6dEIBQn2GUw+vr1cq1Ny5eEXrDoPogHvtI7sz7C8CvduOFtf3\n8mtEB1rKNJEvMuoO2Jkw28J++BCpBBAdZRxzjbTaB948mIRiz8dR871UE1BU\nRubI3GBbcKBY6FzzlfBpT1N4iF8FgMF3oToKzrYV6BRVtSNA3ru9WP54jRNU\ndl4vCi7fAu9HhCbNr+LYetwL9lxnqxYJYmBbLrNn1NBBhpHTnn7orZ+AiCw6\n1vLv8H9vk12uNFXZnnLY/sQ95XEqSGPahu+TkMtqV8mLQAuJ0Y+hhXExUe4j\nY+fk+Kjy1Cr7O8BEMASHRZXZb3rF9jnlNaNcPJ8umeS6dcN1dEdxVvj9IVrJ\nV3GeurU+BV+6BGqvYWoDkBSn+26szOf3Wtn6mOj0cs7bkZw+C4XpKUYenG21\nc+KC\r\n=d8Ds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWosqBv4dlNjcKQ2PWK2qOi18YBoRGRJdAieNfUlpOZAiEAjXF77n2aS7Goa/g8geXtR6bBtIK0E327N8dNNI/njlI="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.265.70b60fb.0_1605513750852_0.9250276838871556"},"_hasShrinkwrap":false},"1.0.14-canary.267.2c81d99.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14-canary.267.2c81d99.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"2c81d990acfe1ace0c3485e9c345de91a98c5271","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14-canary.267.2c81d99.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-uxf7zEVbqQdWsIe0btmU+PZRhfM+VyvH2kMLB1vsxQPvYGrGq7chMx9OiIB+FcqTkFPVwfSxyP+bHrDXaBoGwQ==","shasum":"693040c73c6f2f1f5218af1a737196adbd493c83","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14-canary.267.2c81d99.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjJUCRA9TVsSAnZWagAADC4P/0WbVhZZ+RW3a32qdGB/\nF1XDHopx/Emt9itXsH5svpbpmX2GIdoeZbbyfIsy/SVGg4suNRh0HmXuItjL\n4jyGXtaqgfsqUBa7xvnrqbRPivux1qPlUIAha9K7YivD3ZlQFIGwoNHqv4c+\ndtP4J8vjMoty2B9F5T7VkWzBoYshZxWHfNmvT7Q2IZDuE5ifZU/O5YAgp1Zb\nQy/KI7M+qu+5+wLXwcuC2fiQjn2c5HOIcvEsEEw1xLXpUj8PfXQ0SMHWowxd\n4iOK5pKT+SPncDR98AjvGLtqDxxlQyySt/NXvjlhtQHayAkOIkHvpHxWUOYh\nGagRU9ndhsBm4eG0X7hgNGUH28fh8MjsUnVpxVv/fER4nSpRSyWQ9m29rHHZ\nIVYAeC7C8Ys4wlBZRZoslz5m6mmjcqVadu28HXBFyUdlNW/36gAWQQM+AUFo\nnmFDbMEnyPRyuI+SQAF8Go671GA2iugpZRUlVVMLsJM0WqsijZQlqcb69Gfx\nV9t8B4dL/GKE8duUvARJvKQ7zZKsXJ8gWI5feR+5+yExF5nd7Z9MBf7fgXXP\nH/Am5ruGAQwPmI3kfQ7KsOEpBVMf03rmWlnlKcYCrI9JOQCB5b6kMZ73mWw9\nCidp9ATbHkd+ONq/lPabxs3HBPY1b9DZXlKxz2e4iJpU6pE1p6G6f+UDqIyx\nTNB1\r\n=GHsX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf7Yimud7OImDD6IIM2QuDWRlkJR3GB46bfL2wz3dfFwIgT58GhSP9BgLgDz84lmVgMcFvTHcv/8ex4afXrT2hdN4="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14-canary.267.2c81d99.0_1605513811941_0.1816731830771776"},"_hasShrinkwrap":false},"1.0.14":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.14","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"3e6bdb22fb443157ee8d1584655071a4e229bc9d","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.14","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-uTBRfGZnGhduelR9+/yB+Yncs/sjO+9lF+PneSvx1IWmu4LNxmxJVr2XrqjJQFxbbBVjEnQLkoyjaMQjg8yVmA==","shasum":"2f8cd929287b721e43c08ff32a423fbe7f5b26fa","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.14.tgz","fileCount":171,"unpackedSize":2494550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjfJCRA9TVsSAnZWagAASEYP/jTP0+jAUOAO9Sou+Kc1\nCYmgyHChomAGDMoV208/27J0qVSDJ2y/fJWIK7/OEiHtrybyvfs196E3tvrF\nyIZXI0qcjt8qO+E7Wn8iEwnulJsJRFid4YC3/JuXKjBizpNVZpRXJRhcF/uS\nbslR0wzQ6Q0x0C1+1BCaqLvOrnN0hUm8vO1yXrZhrJbf5jjc78eFo3pWR+lC\nP6WpK9VzmP9WQObYP0beDuNcjGMGC4UxbZjD1nXUERbqHgHeh6l0rvHS16jB\nGbFrwccrspWbHSwGIrixXzNy0YlnKW8Zp8cLowd6RVsCM134QvUpBcSDLTKo\nqXy0R2Bzn/QXza2k5SxJCzvuOUONpaRrYRPy+rluUd5bsIGi5YShWC9F5ZL+\nrj5sDd1Uy+mKpWHlxD2a7Xk/yRfI5eY6Q6NwIUTU8xkUwdukQE7tLJDMTauV\nMt3B6bZtHET4LarkmIGKqmzjVWa8bxjYcTsENIR24HZv6oT+Oiwi1rH8PZmb\nIPMuYGbCam/WYSZXYfUX7q6v2J3SyYe22qP/A2qpoTC8Q7Jzje6ebkJsuMw/\nDYz4Dph4C6qlzmdxPFizf4JX/yTn19UkkfNq5LyJctYzNHciyjm9FyTsbogW\nHB05yfP49zD/HPqJQXCh9ec+zFdj+/Bsh+K7+VZa3nWYaO2Y9yuT4Cgx/ioB\nnM6w\r\n=gfMO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdqR//3eR+/c56ptHVkOlB8NnzZUSG7Oc1n4dE6pkChgIgZ3w74/ufUIJ8kXBPB+4L0cJrdI9uPV9FTXW6KFGlH9k="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.14_1605515208666_0.06999258202547476"},"_hasShrinkwrap":false},"1.0.15-canary.270.22d7cfb.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.270.22d7cfb.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"22d7cfb60e30d83fbb0b2f2fbe74ee291446ace7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.270.22d7cfb.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-Hd6RK0UV3PsDTLMpcfVWXGytiXXt5H+a3W+1g7BqIOEPEEN7oWJ7uTJAS9sIRHNeSiXPX0CqvRSNU5SaS52h/A==","shasum":"759f5a888f38598dc4c8ca0fa9b71734162ea0ed","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.270.22d7cfb.0.tgz","fileCount":171,"unpackedSize":2494286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsjhMCRA9TVsSAnZWagAASmoP/2S3qjF02gXjH1qReUdE\nScKmCn6MRZP1PryvHJ1I5VvoXF66/18Rj398jPGoHBixNF1cMX8Av69SCSXx\nQ2vQzzoH7xG6RVawwA4eP5gjGKzLLcnQxgGAxeuMj3P+YszaddgwvXtJziNZ\n+srJe829a7OGzo+bJlKX+bE6J2BHXVqs8cdNq9edgVuv/2vj+tR/YrPfBXO2\nDTLroIH7txlLaSLqEixRyO1jsdVuUovvgGj/yl0xR83kfBsZnjbZc/8F5sbR\ns5nbQusJMiy1jTEi1rRLXCK/QkIo+QFXgfxklWeRo7t+cZD4XnZS/pfHpQjA\n9QWa3Jeszt9rIe3WOx6YQaedZfECaxwYmZYMlZKjVPuVTRwUjTxZqspTCm13\nFWDISkmc+ztti8Ngk/YTNIi8SKuLzEsnvh6jPCaTRjvsM7lnPsw+jrwEdoYb\nEhzIK7JL1m3leW5kf7NACKNC3VHN1vOKbF02AoNa+qjq64zdDmDJosc4TnTg\nge7JW/PaEqSENviPfR6dQaSXVUytFMProZrI6Chh/kD6BgV7ZUxwvNN34CZg\nfTDjHehfxOXuj3aTc74LIg74JseV8WHXdnE9C9KX9qHE/lFlvJq439v3S/q1\ndvfv7lwbpTUNmaZFVqqa+2avinhMKZhFZD3gBtte/5skrWw1IqSR7TBqI1up\nvww5\r\n=dRpJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChbh6CdBa2+JUjjEuXLeeTLom//6SwUIveTdVdQ6QB1AIhAP2Mir2o7liVLdfgTHj3EENxVgox51zlib/SnPVIBlfA"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.270.22d7cfb.0_1605515339790_0.7443076533129567"},"_hasShrinkwrap":false},"1.0.15-canary.274.a63ca43.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.274.a63ca43.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.7.0","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"a63ca430ac2ec1a8ef9bd6a80d23dd06730660db","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.274.a63ca43.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-wDl/w7POpZywye2DUnZO7QFsxz/rNUvUNF5VCPF9ZUK8w6qTH6bgdyD+LrGBT79oPLIFywrM/rura+N9eEA58g==","shasum":"b3d3577218be0fcf40379630c497e96c8dfbc546","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.274.a63ca43.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu75zCRA9TVsSAnZWagAAG9IP/31FF/9doMn/19WlC4b7\nDrLZTad+wYbSqCciFHhWRPoIjkhWWjVd4RMN3zKJ85xrnYrzoJbVJtO9SaN/\n/HxpC2IBuqj9PvhFS2igUOi7d9uv0P8ILsuBYD7IuVIueviHgEa8fATkBOEz\nrUoSyTZG4YALECcPdk4WloxOJ0WOLcZYavkJEIQObgarCO473M9L2mkStDRb\nyi1ooh8+1s/gvhhWtcfjsJrj9Y4sMdfP2PdKBollQMkK0VPNzuvSguJIM3Mb\nkD1UGH0/Jmaphk+cDUyVwFGMo6itAkytezFoPsUSyxE5iO4MJwQYBWcNYlNv\njotcxn+LzvUqRfpirSCSfutKv6mYp6D7St8pxlJhN3yAvIZIy8KglRzZGqC8\ntrCSns2rkYlyGDLz7OdM2VpHwZ6Yi41dFEIdBfDyxE6qcTGdGj2Oq7kK7W2O\nr+BjI8RB7r2bgdUKW7wUUpPY4WRvwdQJe+nJARnDmtrhOtYHmXkQ0u9EwKR+\n/ZkAvW0n2n64t5pMwODS2dWrdq1Y0FdoHYw+gouA/xhS65TWGYjDr5s3by35\ng23eZ9kLmzn6Fstw8Ek8kuGxy6apYGAiExzIihJca4IndK9+IHx32I0ySqu9\nKpcUyO1DrdnOFYQmSzlB+/8IgiPWYTfPqN/K/aTO672VjAM2Jgv2CfM053b8\nzpKk\r\n=zBZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGUSWEHNKmBzFp2YeJ2jG9wNrZ6RTAzMOPhp/fKBbqEHAiEA7/YPyjNZBBGGUMg19Q+TW82oeN2WLtUrCNVOGW4a5g4="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.274.a63ca43.0_1606139506401_0.38347970220595284"},"_hasShrinkwrap":false},"1.0.15-canary.275.679b125.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.275.679b125.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"679b1250f1b089baa773c4bf4c64b75a25785cf8","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.275.679b125.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-9ccTYOF0AdgFC631VTtYvBMlMXC1AJSai2xEWjc9uMs4RTz8ZRsWPa14oUP2g5Xo0vmJ+EK7T5N6WXk+198LKw==","shasum":"3e79a303ae2c0377b1071a897490251705eea94c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.275.679b125.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu768CRA9TVsSAnZWagAAMWUP/j/f37NbhhhM9xZLk7A2\navu9kNzuhIFh8REUiSgSe8jcNipiAr5npQTEOO6q59jlhbuz1rb99XfNBIky\nQrLqrU9c8IZJyZopEubhT64GqtrdARtPzRMPYVzWLla8YjsBwen0gPlkNo/g\nQ91TkklHo9Ax11PcChmieJGtcYZGyOgDq4CdPY5SK4ovbl6erG6c1y7F0b20\n8w97JkWdwAqdTf+NYll2AxxmADJofkEkCNWm9ncqDAdXnH4oxPbQTIA+zhXB\nmND9WlBxYOahXwfrN+vT05k/mddUdJx5i2/xc1xkTczE1d1MtWxBUqt4Kzq1\nGc1mc0cEi2adAe4CKIkFasMzyDs+twn1U/teVDF+EHRgcymUhXocrRimKYGY\nWD+RG8BCv2cDORn9sBLXQrp3rCneCm8p9ZnrZnH5DUooQZM0GhnNNV8WPTY5\nddO2fAiandaSAECbce2Wb0w2402EqSpPFRRoR1oEQJc2l5uwOQ3OAH8QJGV1\nVx2pImBz106D3NzrAxcLdiilSKj4ac82O8e843ChBoXHxBEKTBRVCkQEvbWi\n6Uz51ozciIKEdn+Ww2HE4M8gz4ADpKsnkHY5cKmA8OMZ1qygJUnivivTgLG5\nW2MN3iC9lCDeW2eUPhu7bvUB0gvWVkhkBk58N/RXd5xnbd2fZNROuxyHwobV\nSqu7\r\n=kdz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAx55FMnbqVTxXoT551fQ2O7V02Hoh5jF5vH2ppjRMrQAiEAkuQnt6lDu1uUZdsJQSTgNEFEmOQdVpQz5xgxAXlz7NI="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.275.679b125.0_1606139579453_0.375274818040759"},"_hasShrinkwrap":false},"1.0.15-canary.276.f2a41ee.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.276.f2a41ee.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"f2a41ee1ccb3d83c214064c0b277f8329c18632b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.276.f2a41ee.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-YdCq9mAJs9aA7prJqtTP6T6a8epnodoUozo3qxgfGM/9vibJQC97+NxJkzkx3SwX9/06osEAFnzTJneetZMWPQ==","shasum":"3c7987afb2c493bc183c5d3a575f5c892f56c311","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.276.f2a41ee.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu7++CRA9TVsSAnZWagAAIgUP/RzIAHEKCLJudeqChLot\nRVKuPpteLXgD2VNqoi/FHrETuvGyhQUOP+XTt2E79uF5WFDVY19m/LymROlk\nRbSdENQuMjM6MRcEhBSVbCybzGbiF6/8JPBjEXxqO09mrvvmFwqi7ZvYlVBU\nMv+QKP/YpHuPJmj8KHsC5SXhTMaSEtYol6/vOvWVCpQHMgpH3boliXi9cpE4\n1kjToLo6gKSyMCqeJLqEMA+Qz8401z5WcySEh9klVMjTvEAASpNDkKUoJnZK\nZX66ZhCV9vigGNJXqui8Aw1Td1CAfhNJZ9+IjzalyrQZYoedM5tfUWk0TKOI\n5HPgi2KLB1jnApXwJR215Wh6DeVVKJ79Rmrc8Eg1MQESkifYWyQo1SvpV4Bo\nTPtoNH0j4dLjDc57kdqPY8xngqm762NEfD7cXcfT4TtH0vYkPO8wlx4Dv/wf\nh03Y8/1L1paPqxNlH+yVGAAes2yDkKKG1TgkRry2KV5rtyC+6zH/srD0QXbb\nimOBOAVTZoDPndP3HaF30/BkqnLHzww4PPp7CVdEbvna8WiJwzxpWkq6LWj6\nCTuEAWeb9z++4w8dNm7ZnYdkE7dlwY1AmV7704bIe7Vg69GOtgyocNvSnTNP\n7WOVxykYd77jd7Dgb2CcgM2gjV7jXfgejnwwtvMWQ0yVU7OMgLt4EV2qwc/U\nWTUw\r\n=Drmk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBN35RKMa2wgcC8NzDZNp1TSjUC5cIEvzdXv8r7Zvvf/AiEAiu9Q1xTSxxzgTj4pYwODgwy2KFEvQiNYP1ogFNAsTvc="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.276.f2a41ee.0_1606139837828_0.09318357245351505"},"_hasShrinkwrap":false},"1.0.15-canary.277.2f82b57.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.277.2f82b57.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"2f82b5713d64648eac2bd7d4abe3cbb75c3b40ed","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.277.2f82b57.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-u9LCEviiSpIQ0F/yYGxHLRVxnSeEHh9cmez1JOM7aYWQayjXsNcyK480ThhgpFe6d2zcNNUjHWvaaaRgynKfhg==","shasum":"b14da9d73a04bbcc553aaa00dc5f0c81c8c80ea4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.277.2f82b57.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxPQNCRA9TVsSAnZWagAAZ0cP/27dy0MbFG0v4W2teL1O\nnC7nYg5B5vWRoNESZ5h2SEto5vBi3GeQpQ79OiAacnyrWjM97KgI84ij9I38\nSBT1swvpqp1cyjn7Iye305ORR9SpgkY4jzw70etjKfRYJ8d5jrN0WagcVx1O\n9xAqlE8Sb+Ayq0mhFrEo2OTFrnwR42DoAfGX21FztoQNU6B0WUjP07od3eeu\nm7HtyAmODlXdwaE7kajmesl22QX1Q/dFD2xmd0tGVGHGNyPGfwy68xloJ9jw\nbWxiHsbTUX7sa5bt7yLGL0qMJWztrSv2GAravxbLy716hz1WR8bvedK3p2MC\n2aRQoi5z1Ng5DO4fkDyfMeeTKAsyutbP+PqJakeUOYZF0AQ/AaHBzOoDAJx9\nsceed5R0FVqA55SxBVsmSCwnxNpYyflk47QDWXTQbk3PO36T293ZpxmiBw6u\n+KSUFy/plrJFulo+oWShecejTvlayOaKzZILYaWWBN7XaV26WMQK1l9tI41J\nOi9o63KfRSJ/eurcnBTkCgGkMiT2eBi8UkM0yXrklgV5tdIXgsu2ImLfawCD\nmm63kF3lTWfnpr7RgXhIxlZlO7auN2HJBjUMrmho71JPPlgbgNUxT09anuhM\nmMzjgJg9nKO53I90666Ne44TYyWQJKyekal2zp54UV45JYcGHi+A4GgfT3ZD\nF97v\r\n=f+9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDq7alQnWI6dnuL2Sn2dFmgnLmde5HJgC0ql0uuACIhVAiAoDWiMqQ64+t9Ph0OE/qDpa1iKv9S8KjX+GeeC3JCEFA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.277.2f82b57.0_1606743053035_0.8014027133671762"},"_hasShrinkwrap":false},"1.0.15-canary.280.5f5db1b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.280.5f5db1b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"5f5db1b8129c25c4e629f2f4f4c1ceb00cbef0ba","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.280.5f5db1b.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.20.2/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-2ZSYdO/ndnVo3FPEPW7IN2+4i4ZfGaNgQONgodborKcaW6WKiF6Vjk2GwxeA638CcZdjjRXAzwqbgZuhz+BFbQ==","shasum":"cdfc052831bc2e289a476134942b4f193dd56681","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.280.5f5db1b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxPZlCRA9TVsSAnZWagAABAQQAKDW71CcF9WMw0ftIVH5\nCqww1PyTX8rxkAHmxuFEKg91W0vRISdlB57l4GwFi4ANa2gWmJfErui12EuL\n/Ya6GCw6CKW9oq8fc+o1/wBfcGCP0pEPZ6vmuDCZAfUOo0k+L1dxTqwzwurM\ngfDUhsnsdSFqvqmIEHy6CZn65Jqq5BDSiY+07tLcq9KausuoUlMEbhoIyvfm\n05cpuKqg4GQWUD6lAE8oCWuit6qWA+DWezzTDUdNASJUgTht7vnA6arXHbju\nWYy8u+PijLCzAImFGgstW7gYLQozLrKpV+5+6TOlKALuTDgkCPV9du7W0ekr\nG4xzRl8JiUcRliXiTgAwAznSw47Z9fYFtRVOOY3RneCvi0/hnkxAvJV2HtnK\nxOqoXc/ZggVjPc2I8xprCWkFOA6mvi1+EWCTAk+DMsqv6+ivHCqODAh67grS\nvVIdYm3X7V92xVlSgZqQgxoQqAb5Bl3qTON8yfDs8iYzBthEUP+cwidn14TA\nimb3FtTzf0KRm+zI9zowOwNCmzLBzKFxvN5GbLcc6VhJNRLe980qRiO/AYM9\nOLNz54Q977mHlhC+ftml0J23anD41SF1SNUS3oNkeuVo3WpUFGUEEdmrWvD7\nbwoTfYoIuLGvR9tk5rhWE5CNIg8TBNmxDJ7IPg6yBK9WOlMUFJp3VUnowcQI\n6GTz\r\n=LKJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9iNp86Glh8UEzPBfmfgyiyzi8qgRlk3HFUYlTo6SjwAiEA0wi5EcLI1AHc5Urby3h1n+bjgJHJvGpvjJjg7VsBzS0="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.280.5f5db1b.0_1606743652291_0.3283614525650631"},"_hasShrinkwrap":false},"1.0.15-canary.281.8d9220a.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.281.8d9220a.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.8.1","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"8d9220a1842c4b75b006d81bb687a66e84a4850b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.281.8d9220a.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-D4m9veTQVyZIM96YJvuKgg9hnsmpaBEW3BfIo3GO/ZWnFHNBekYIaSpJZWNArwW8DKI8sv3xyGWyQwcP93jUXg==","shasum":"7f09b6e5bf283ea7974358c779d8c22e415dbb63","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.281.8d9220a.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzjPwCRA9TVsSAnZWagAAgMYP/2L1jRu7zizLXqL160z9\nG3b1S0ddsSFfmumHpwggfbgTMfGaoM4wSP78Ao1NApfQKZSbug1RFAHDvblZ\ngrVD9itMwJ5eWmrt2ETcLt5N/WGexcyHRibhxns6rTHqjhE0h6OwGoSo8JUB\nNmtlDTeiUo/saWl8eNYR/9cDUovbt9ow23uw2cabtQGzntTY+vKqHmM3l/Dk\n/MeCS8hw29pwyflU1QWxOl/Z57sRFrMnbL/UKy+KpEYylQJTYr7V/GEbbOih\nqhbry87OtoMx01W1wpcg5A/KC9mWZToVQDoArbFserNM/AthuziYy3qu2tev\ng29tZ1rz8WySkmDM+Ue39sfTdBUSKnN7oSxoYx/iNuCyQ6yh/334e6rjNT9Y\n/FPdy99sR459cqxl91hJpnnuWFspYB6aa3Tn4jrYj1SGqCvnkwWC2nyhkzpX\npaeQrQGH2+dRPSKnhMapeJELSuW0H2ZkiGDg3jyjzlttRmWmc/ZTaEph5pN8\nuY6a0I5//cwuFM7HVulbokY8GlNINFkRdM6OrF/5BJd6Hhi6q1zWdQwqyACP\nAz9fxOrKtvmNlJzz6HEjawp3OPLWu2xyifBgYqOdzdStzRUk6Mg4Gf1cCv4p\nK2l8NqGAEAY3jt4otygxpBGNzjrP455KYcL5DZNKlqKEVMPD32Lc3FckL4Vo\naPS4\r\n=6fm3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiEM3CZcJYfPY+BSOITDo33UzVHW3hb0W8sGd6U/WGrAiAB+2izEd/9qAmf+QugZOc5WLLtwI8yfcj+RpGfpuWKqQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.281.8d9220a.0_1607349231457_0.25798082149957824"},"_hasShrinkwrap":false},"1.0.15-canary.282.976da4c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.282.976da4c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"976da4c9c42feac442a59fff6a0e9ff40b521df2","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.282.976da4c.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-fEuY2pPvSpzAeITyiRr179OcljNogFwlpdos4az9l/shmAA07bFPtluVa/DD+xHAEOcpc4gr/vR12pVMUqnmKA==","shasum":"d024df87e464abacc3c3b9e2bb0d4fc233d53e5b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.282.976da4c.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0mfSCRA9TVsSAnZWagAA1JkP/0B5H3g45r4wHOnxtuNy\n2vLMcnC+y4K9tw/ErKLZGTOfSX2LDTqSz8eDLM1Gl7tpkwRa2rU9scaZHqed\nkcSJHa4FbqPQg3kcYx8rrDk86jfliNczX4HNC4hg9Ci3d2Sz8+wUIMd3HHdS\ng+UFIaGbFG8/TVlw6lCA1UjY+t7cDbXk+eQqLFnGarLbstOouQjH1PXS4hWS\nOIUFz0Z+ptdn5pN+VJyHu2qb6T+EC7ir79Z7RNolXuNpazgpMOrfBrvCRF5K\najZ5Av8LBc9pb82T6Bnh9G/ZIMKesJn/fW77jgjnhp/gWGeuo/Wco9PZyDKl\ns1/abxxxBRg5CPADqYXP5VP3cegn4NmoeiuyaO2k+PTxE7unQ2c9AlRuDIGC\n3fW1BDEZTvCJLNWu+kgOmMFl8JL87qk2hDQekcWWRW68ccK6mu8rdNEZ1yJl\nGuM6w5vFX3E3T0VxXTMPXAestyjDdoSokHRixQgRERqfPyuw1ms3XkUmk0Xz\ndAGNtAT/VP8e2u8xhQNqSYFa77KecCGAZIhEY6+ndPT9ZUHkvYsMkVGzgURq\nhJpaKrlD19jWYChGFWzhFEYthwmdQZ7uE73faqInmh4MBqFoq5XKCZxC1brD\nggD28xH7+kZtZBH8kqEEy3XtP8Q0kLfFI2HXQdQ018tYMX7EJymzJP86N3Tx\nZevF\r\n=YKC5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA70xWTLGtHXHjQRPf5q99vt7/4OdsgO6EhLLTdAqyInAiBZjfywHyO86uVMi50CJ700b4OwFX/7Q2oITgQiV2DeQQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.282.976da4c.0_1607624658327_0.7660281613854061"},"_hasShrinkwrap":false},"1.0.15-canary.283.487e58b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.283.487e58b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"487e58b023990ca1558aa582d80d08fd02316fbb","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.283.487e58b.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-r4pv19/eLh0mmUC3jRigrVwaiZHfLshbIfCFVFppZFIwOSQcSpsZlVSMcPZ+EUtehN/pv+XUzrNcXtN+QqkaQg==","shasum":"29f4513ded60d0f07776a4d269bbea2bd7bab76c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.283.487e58b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf13tCCRA9TVsSAnZWagAAWQsP/1a14N08YB7SjI6aX/Zx\nFvRuZ+9s0VVw+VZZxV1umwZE6E+CYF7yk1IfMFOGrbo9vUEekddBvMMdPr01\nnWqhQ94qZUx16RjmTO3XFu/glscjRf3gTdOCUBDOd7Grmaz5ICHizvUEFOgl\nXTnUmy1P6xdiNxf7zPSBpRSxq4j2fXMUVHnM4KCg1P3vv9vrzBZQn1FPnTEa\nmzsWu50WCcZyTQZ1njDya6Jyp9icohExchnTJWZNtd1sSFFXuBvyQ6/k+7WQ\npvR9t65IY42v3BfJfCWyENafv4q07S7WxqOn3BJfTKB6tDKoHjNAo2aQOccp\n0IKqCVRPi4UB0/9fRbnGJUmqqygqzPimInhc0yYESmM3DGbXMPgGtqjCuSw+\nSrLP+S098pGT0zKu9EilvyXp4wyTAJ5yXw88R8P3P94FecGXAMI9oLCUbiAq\nAxt9VzAl9/oFQ9dHJLpqYe3jO8aToMIeLoauqyGObYAfiiAJukL+iOPxDMjO\nAo/4/u4nOzESfKfConOdQnRl5uNGiKLZZ0Z4M7kSYc4xWMOf+qGm/+/sQsCQ\nT3YmQsNOl4SoVXi/0ZQl1Z05CBLPJUAzWuF4oMU8hqziG9ZVnw+o/ctvzbKZ\nTzWyHheI7O3ngjpNnbs5q0vPlNdFGovpZUq/Truj5jTcC+s7Ow411oeRiBJ2\nyNXN\r\n=Y9nD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBP3XNCCKgBvRb0NT7Uar/NizSW3rPGymCuwM2PimhTHAiBztyS4bDtIOW/JiL40wnfg8pp2WtPNKqGZMh0fV28jBQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.283.487e58b.0_1607957313977_0.9532023921305288"},"_hasShrinkwrap":false},"1.0.15-canary.285.2f8efdf.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.285.2f8efdf.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"2f8efdfbe61c79e329b18a8bb5eebdc4878decfc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.285.2f8efdf.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-vcSFz00IXG7jROSjlVGoMoHEuduMTeE56hEvdf3S0wkLpCf9BiVzpgjkiieWXd+cTzo+1fvlg/gb2usEdQdXrA==","shasum":"d96489b1c7a32c71d4ef4167703d3ccc2aa27130","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.285.2f8efdf.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1379CRA9TVsSAnZWagAAnOcP/A4m5BBYJt5Dpwvv+v5f\nEb3QRQ8X8PsfZh+t1C9PVeIWdC+xdZC67v8bWqEjKgURNgTaVXfXhSGWnWnc\n9/kBkq/z9TfwUyUia0Q/JHVBNxBeVqbSTWAZtNsygB0Nuv0H4EbCLxnRLDnx\nnCguXovvD7k82SsNoD0n0aoVUyiira+9f/trulCnJv8tJdTOx+uhV8Sh0jM2\n+sYyfPg3K2ge2zR6GCtuEhJzLBN2hM3DrXocy9r3opgW0HOhk63kgxbdxUdW\neCFnAxzp5wjeojltCbSqgbYvKBYDTgoa1hujZGyb13mgT2HlNJbixYlgObi1\n0nACw+JCyd3GVm+Uh7kLqxuztg4j8d4ZYimreXG6L2VA5aB1wcA5AKfHR8GN\nvlRqUGg9RIz9PGxLobwLM6uzhplDARCNYOVK3vQo1zBqndyphnCnAEE+cjww\nxwoFemHehOuv2T4h32Y99xrNUmdU+Nce3YtZXq963IJ5RPU4ar+wGPJqiG0Q\nDgDi4N78fs+Xv67j4QjwTo5yhnuHZLAyt9LVocOUXOWS2Nt8W0ZhfCFPxqQb\nlj5rKel8dSmWoBQIrUukQnQd5t00ARU44HSVTBIaUnBn2wlp4OZsw76rum7m\nYaSiHig6KrtryjH5O5K3Hfvm/TM5rIsXUYcQ/oAylcZrIy+GrcBF2meMa/Xi\nzGkm\r\n=pyHY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCCQeyxtG3F72OKq+6DRdu/aWzgGB0Lw9SmoX30pVLMAIhANxNtAozpYLa+P/+fkhgIS7P64My+LC/Ybhq+qvSxYJS"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.285.2f8efdf.0_1607958268540_0.9928590707796958"},"_hasShrinkwrap":false},"1.0.15-canary.286.d56c019.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.286.d56c019.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"d56c019ec90fd80c3a26f727a02e48775f4013c7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.286.d56c019.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-AEBIe4FYJpfrhaKPXuffi/WpEwe11bCkeZAI+fZxboj4yw/P6DVWSQ/5W2le57HnpZDqYvivuzZGNnD0eBNtXA==","shasum":"7af848ea8d5f530ed81ebc57b7a4ade0d0c0a41c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.286.d56c019.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4KjNCRA9TVsSAnZWagAAzBgP/0B3iSg49L9a47PSwHK6\nGra7k9BFDdBOmFHVDgKi52/aXOK+iKxCW2F2WXTZyuFLo6awDvmoCiiGW1Hy\nEwWxoghpQ+jo8XJSi6D4znIY48LHmglwq38wH3OArmcx3dYl6fEB+a5WIDJe\nBiTaMZ7urQe1x+8t1dwpRxb/PsiwvkVcWjvdbccQZhuW7lm9doExvQDh8fYO\nsFresIp13HKZt9kjamsjIQuZ6haBsk8AdbQtTnjfVDegjqqJqP4VOAojS6h5\n3tgg94glr2WD5PPp4Ho8aeQuKz/lOgvR7KaFCV5haQyT+/KfSDwZiA4HL0T/\nShGVLFIKR+gEeQd8O/IfCnTp//vJkmMP0vHOiGDPM+i+gL8Xs41Wrjqn4iAB\nIWGpn1oV7C3GfhoIMp79npF8biXLH5DWEC+oNOAAL4cDzeEt9qRIRw3JrDXb\nUYqwCL9qItGBMqo7oSyLrDy3M5yKZvykwk8h+/FIk7QMhjsxTSegh0yYcZOv\n1DtocM3afpCq8RjVwFYSP2cV8PiLdGomjkmp8WXPh//Oq3iXIPfkqLGJ8K7S\nnPhi5VmDiAFx4fMSniPNj8yBbOSnissKYJX6gu336FncTqCB7NAfvlPjVB2W\nVTtH/+JD7d3JS4cFMWCreLQRswGxF5iaRipD1x5lpcCZpPS/ne/fOTKZQYbv\nLdro\r\n=3JQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOuUcPlPgyGcqQuhF8btz1TiatFNJZuZms2AnJygZuhgIhAPQQd+q0G7a5Fh1JCwnBAnNR+3pj+ADrIGmANOOIaCTW"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.286.d56c019.0_1608558796425_0.24689365880106018"},"_hasShrinkwrap":false},"1.0.15-canary.287.c34b16b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.287.c34b16b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"c34b16bbfc4bfb93fbbfb818544aba719382883c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.287.c34b16b.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-/ToKv+r1eurGIYBqViKALkyNHPo491E9bvyQ7iK10/aNTlxvMnwjnTOu6cBYmqMaHeouvot/RIvaEBlw8AXEgA==","shasum":"ed165fac5fb80f328971964e96c984755d0b922a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.287.c34b16b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6dz1CRA9TVsSAnZWagAAHxMP/2heCQwLbZxJr8rSWlts\nkrChdNJqsULHedJkes53vVrsHU+JW9tkGNSbKVY/oPPLMTvXGAAoi7WlF1RC\nKk1msWLpqEKQQQqUJad4ACSWpOijw5Tt9NM9g33Urzw4nFEOxA1P2U79htb+\nZ0N8jJiEGV8sXW9U1x3G0uAxMWe8XIFh+p80Neuu/waDzFP7bWg4vK+fN3Ah\n5GY/36wPi9SQTnf7Hvy6Gf4YUg0Wyq/zgN9B4FEKxOWDBTwCNJKFSkLum5FG\n6xrEns2mQgCmY+pGv3yD5stxzXH+fk++VgX4vpl1t2NAsY1LeYPGg5x4lqxP\neJ80mb06gx33eWDIzjyeZLOa8Y5RdvUEe4uX7Ucg/hd3wh+YmwkBk0QIMo8b\nrXO1iTxw+vwo5+gLNsAYQEIqh6miaudjn1EY+pPiHAbmsOyYm3fPaK5MLBuG\nUfPZGU6QSqBR/1c3Y9nhehpZ7sF3wvlXocnhOLdPZm5AU/S2V5WqtapV3W6x\njZU2o2zs7XuJ7cwgruSNBeA0NbsVM5Hr9Y+JDwMbS/41DKIg5EUbJByEK85m\nuAY+6ekqSLRC0Oaaf7ngJHrB7f6rPtwbTkwiUH8fVCS7EJ2YKZ0BtZf4pc0Q\nE6buHn2/iYtdXx7RQyJK2Aq17T6+L6/ehIkPkXX9qxKXyRxUBZ8AJJly8UR0\nePwi\r\n=WxO3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFREKeW1g8tFJUoWCJ0GvukOyBSYUcICQlIBlifA5rshAiBHmmnHFBeoBcwQ3vuY6QQt4TsU+jo0CNwdUeaoSEHuTg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.287.c34b16b.0_1609161972580_0.15177058382546127"},"_hasShrinkwrap":false},"1.0.15-canary.289.d61d0e2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.289.d61d0e2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"d61d0e234427714cc7d876d3d6e5bf6d6bc55bf3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.289.d61d0e2.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-oYVerq/wNDElyruXgX05SbslWqdAiNNVAEyNY6rj2YdHzqJNxLOrKUVAmsLTzvPenRWzj0zzVcPwcBLS5cifVQ==","shasum":"3e77da2eb7be2c61815a44da564494d2b22d0eaf","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.289.d61d0e2.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6d8UCRA9TVsSAnZWagAAWVcP/j4o+PkaXBJAyaA1Gdwo\nK6S9clD599pQ2bAc9u8Sd4Dup/XEEr+xPzPhK63rqiADelAvNJbWsEPlqDKx\nQJqk13ipkPb5EFiCktNvR2tpxdR+IigfgHqPqa8kXG9ZYQsZZlTPmazZ+1iV\nNBJUE5/riIyDp2vTZPNRVw7/2319bG0pRwcJ18f/SbdvWVKLOxNMwYISrT5Y\noMy6J7EOvlbT9yqLDNJUXj836OU6IsvrGgIVW4UeynGuSBjEP/EWMDui+/6Z\nepveMF3v+8BYUYLdK2026reUt7Luvj/L9jsQsqV1sHR8ioBOxdCD0eFdyVhL\n0y44syNk0tXwf+Q1Gns820FK0yTXmyVUJBb1lKk5pqPjgT1d7DZjvTPRKUyJ\ns0fhsS7Rea9nFrMV9eLDDgi58rSQehoIySVsWSujpZu6MLRJr/lfSyX8LlxK\nMuS16sDDv/hu735tH1fww8flnoKmdTvgYkR5E3XMajsu0LyczTm+xuRK24wB\n1Kjl1DjhNYHSxtcnx8JSCBx0SwNLaEi5ZNVma0Hd5ErK44IIQpHE3QVOPL2C\niOaebixk6sVwe9ln0G4jWcVYWS4hgzOxg5rp+jsEQrT0lbnsdskKS99+eFjs\nfKXANgdscOWrmUcMIYxqVyCyZ21n6nnH8PxsQbPt/DkUvVggEqR6QRzks5iM\nV24Y\r\n=LkEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfzUck43bkWVjZi0GxU6v/drNslIzOQpua3FEQt4ITFAiBrIZ0f3YJicvCMCrkv5eF55LP30zysbvUX21W3cyKzuA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.289.d61d0e2.0_1609162516171_0.8301595197951948"},"_hasShrinkwrap":false},"1.0.15-canary.290.fd1832d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.290.fd1832d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"fd1832de2a9cb882891fade4229dbb2cb4a699cc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.290.fd1832d.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-gbDEJAtsT4FuAqyp+dE3kWQb7gMS8MJ6igVhQAzHNBgwdikjXlfbdRCZcdPFRUVn/JgB+x/w/sLltp4fqGO51w==","shasum":"229f5ac212b583c49a5a5b4cef8d55e48e594aa5","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.290.fd1832d.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6d8lCRA9TVsSAnZWagAA4U4P/0bh/6mlJaqdQGbNL+7u\ni2QbEmG7JvEL3Wy5AIDRHqLCE2dZe8wVlZPFJPmFYV7Kx7yfJOU0XsPRmm5T\ngKmSeYfYZggBNSp6xeZZbpex/8XQjGgiSvN8pEsLrq6h6HpWBlGHj0+4IPQm\n7iZs+hXqe8t/Eaf05jeeqr1BjRqOR6q+JaLld3Amhtj+cFVwKF+rNa6oCZhZ\niFu5LD0/xrJi5QBTNFAhzg7cV4M/swB3H9DoPvsc2oGOLpxVNFRbI/yRZt0d\nZ21bT46UFQ7VDIFJJc4PAnKjWkGpwzA/g5F2UjLk8ZTeapaj6JErNXu7yJIW\nks3Mg2JzxWEKtj1S7d5eEgm559fzuRwuMwsrjPrhBQU59f96hRAE7nwM7EwF\niX2lb5fQNBbZf52/FUUJuAkiCayzXNC+l05kw58r3RhAIMqpBWHYQ/VLf+cr\ntqdVOlhN4z4KcdY+FCBqs5RfqfuWea+uvQI7kOL86aVZLOuF3jpcInDJMVVs\nTu7wE9O9z554oLYr0b3yFKl0HdTzVhn3UZ7+vZBFLAu454ET1yk271MJ+4Hq\nmXHbEvvkxlB1Cahx9ruevVOeV6myCy/OyrqeB4LicSwj+4GMQAozr+9Y/YGJ\nPTYD1qdObY22IzynfQFunDZ2DgsDyFkHwfKKaVuIquWADZnfYKCerAfbhw0A\nRn7e\r\n=Wvkb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0CkimYiPkW99jyOgFUYUR5i6Q72/O9M90liPn8vf1aAiBk7KtjJrdpu7ZI+5OUUlVeeclwDY/SSr1exbJy3/cCLw=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.290.fd1832d.0_1609162533100_0.20415605918875301"},"_hasShrinkwrap":false},"1.0.15-canary.293.50762a1.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.293.50762a1.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"50762a1e83746fd30257da2f7e07edc76c06c950","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.293.50762a1.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-mxbCpxrsQp+tO09ryo0hVlmQ4LRR4N/K4I9qu2YHe+gh1Y1QlKaV2FBnj1DCJ6piPZrsY/lrOt6C6c3Wx59smQ==","shasum":"05506ab822cbbdbda7a64f96eeeb526e7701db56","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.293.50762a1.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8xodCRA9TVsSAnZWagAAcjsP/13lXzdTskuLuU6Jv5bi\nhCQ8f39NVaSFfm1JTRg6cFtGtXhfpanOzh0awb7r4RmcngRJwR5yp+fMMSVl\njp9GzSCcfOjt7maLrp1t0LcCvfbMvkSiQlqOeDcN5vIaUexqIAZEl9+2vV1v\nIx5QHFKrhNTHH4CA/WzJ6185x3q9h2pVuZo0jmsUbtZ264rDRvEZxBa6Z2zj\n7RPv/vi9Wx8x4LcBWFwWrRT+8Y7vHRGyEjvkgLXuSkOq8nqxUkDqJ5Lc8gpM\nJD5da39GmS9IBjyeYH4z1SS5qtVhOGe0cDXXimGhMW9gFIetb+xw3TOva2pN\nweeBcmez8ZAmCgnWMtayn2fx7BCuaNVZ/CLD96pPmdj/rylZMz1FH9JiNiub\nlhxHBKF5bkJnXKIviSZwOINFeg5gmNTA0G5+B1KticzJ9dDBC9F99WhlB0fN\nn8Ift91Q+QdXbtoEadIAl+8k4Icy+s+osNWWh4JFfqFnPifuBAhwP8vipVUh\nQgYUSiO3IvH6jEFN3EBsExoNBIgZXYnsneGPGseVxc//cSHElU/9KPpN6WU7\ne9+B5OIY23OpvUpYhAezLhyKQp46C/n8Uylhcdz/mmxRfgRGRNJbIL6RcXP4\nCRElujyRZd0nAWafrY8cUwfbf7r+UkoeCPA3stDk1VYWmq1vSdX77aBn3PFZ\nLL1b\r\n=Tw/e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCywbChzgRdg3sqVi/KwgK7IC/Xaad1kR/Vl04/LHfWmwIgfoEgbuufnOB3F6CMaV1aMD75VShJk15jfgFAtpvZau4="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.293.50762a1.0_1609767453196_0.6206420568343523"},"_hasShrinkwrap":false},"1.0.15-canary.294.79d5365.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.294.79d5365.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.8.2","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"79d5365e852221cd127dbc0c2c08ca7e946d2695","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.294.79d5365.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.20.2/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-CWNDberDvOj78WWa+/GFviYBX4LUTAqobcj9A+w89LxeUAFxSOBA2hBu4k3r7PQdW3RnG8kfcJAhmOV3PGa7fg==","shasum":"ad6b38e50a76d5975cab51a680ee0d6f1c4a69e0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.294.79d5365.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8xqTCRA9TVsSAnZWagAAX88P/RSXjpk0UsRuoknQ30kf\nkynrIOpboZaZXCP+UhfEOfIcK8C32qqz6P9c0o6vsXc7zn5fPQZ4JdXH8L05\nmR/76/Eh+2jEYqbluVSpy+9f6TR7/PkcjpiDZeAQNg012k8TpkNGYGGYgSSD\nTghOCiFuPDaW88u77dONAb23/NDfTe8yT/qBo9sNFmLCPxCGQSEuhFpKkojx\n5I69S3MaZ8NbTO6OrxRuSpnyrwiO41VUi+o/LDiiQFysZX/egH4PDQRJI0G3\nlTddbOB01vpL+0w21NZ5Kd+bh/4QpVCquJ6FmLIk05SvgCPjZDHmNASrG+ia\nHeu+VFRRnwLvQElROMAMjuU7QcR2k1HhqQKQdbeeU89/EjvCkyxZdc9t9Ltp\n0B6Sxih7ls4wLtlVxpllk8lyxzk1flQhnoIq+MtO6Sis3HMZAxMJq2wckDZP\nUZblQ0rm3QBoWy0/0Prmv7gs2r66yLXUi1D3VepN6fLgiwTfmDYJiFaKrApo\nh+VV/NJbccPIZ401s1gdCvrlNYD4aiqCK8ulb0FcEWntYRjVIFsmZVbEXUa8\nnYx/L4dhU6L5V9DRSHbzhQVuTFbBPJEmpQQ7OnrmXpRQxYPdxufn3CJIjWET\nPc2SJ+wDbQnva03SD5MZ8HxZuNOLgwyCnL57tLHqZPKcoFEvO2B18TvfyFOz\ntWFY\r\n=dJ8H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi+eLjPwJitPa37DFyjavSmcqsmKkpC9Splxm3G0Zy3gIhAKDS7qRBPxvQyZjA+6ngY6EfWPIKIriFwDdf93zB1Szt"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.294.79d5365.0_1609767571468_0.2827463262926502"},"_hasShrinkwrap":false},"1.0.15-canary.301.539c9cd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.301.539c9cd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"539c9cd75376feb970f47d57e0e3cf60ef510866","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.301.539c9cd.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-6O1c1gNgYka+C+5CHqiyAM099GdF4LqrkxprWumERPPH3wGl3aLNNSb2F9qZTBehoEzZ6jjDFJc5/5CPSQIx5A==","shasum":"387dbb3d3791ffa784c99abb59f3f49b06f126f0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.301.539c9cd.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGA4CCRA9TVsSAnZWagAAlaEP/2c4KcIrc0XC7RxVRYJz\nbZwiYCzGESjrrOw+OEezXzOdS93ZLVArudwtnUgXzJmnLlHbiUHACaT5CM2x\nJWkXyOCRL+a5uTv9ph3tyKNu35q/ZlcbFf20qmr1v7f2b4k9iVOwDpDfEA0O\nRMGASbO3xtWy5SwVkjdLNl+SbsNg98tCbMaQkcdCBPBVsHlTtjVVXBpBbcZf\n2vlKkLZYZj/8kbeeEvzyiYW7C5GtXS+Z53k6GxDl3TMIEtUVZ4v5To9g9o/Y\nPzGSDDvAtaNLmF8skA62xbC8xH8QKRihoAE5X1RzEvJ1wka1Gqp89oEmb/oj\nmdF9rnGSOFArhCQesDgVip4zJ6I+CYolXRvLgPbHAiuYCCld+CcvMym3EQaa\nc5NQrqBbrrLIyxdnxFnO2IpxCzGr6Q4OzSLcZq8QItxhsdy/HCPxQHSctKuv\nB/4anNB8QHuxe96dHdN8tPAYBbZA0hm9BLv1CnHqJf4UJqm5d9LGWWcwyvPa\nVhv721zpDSue42BNO7WBjTtPaGq4y8U/cdtfOklOt+gD0oCd3P8Y0OMXzxy/\n4XrSZaEutwHtVlxmALX1BaDTc3RKPB785aRk7oImwVvSky9T68doAFvr4yts\nD2FAdbDQFaiE9AIdLxihFieWSL52yBXj9HjIBDKZ/swHRdGrRbF5Ud0SvEuW\ns2qt\r\n=C0uI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhqjq4zjAZlH+qfcQMAsEq/87NJag/l8lkiyGcs6fjDAiABdkR2IYCxeerfnvNUt4mCkshTgwHxXzdwa4YHvGakrw=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.301.539c9cd.0_1612189185475_0.7176642155852355"},"_hasShrinkwrap":false},"1.0.15-canary.302.fdfd4e7.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.302.fdfd4e7.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"fdfd4e79a69c3f5804dac13538d05e784cdc4b1c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.302.fdfd4e7.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-EK+MdVtur7gHrT/3KiwPMXOjUicK8hq4SCWI4OqJxl8pauGKJ2UBVoACx3WWIfFpOS387hD8mI3k7U95/mkY+Q==","shasum":"9328e13891c622cb5d5e887aa48ca4cf7c268adb","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.302.fdfd4e7.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGA7pCRA9TVsSAnZWagAASFUP+wR4xuHhnTr43syDnqWs\nD5eWjlRRmbeiDNShIvFTZDK+gByd81levfiSAhfrfy4Wm2esb1ydGzwP8xEa\n0UCtnAYSErZIZ6d19n6GjcDFfejNRGq06QND2Uetx3zdpKFDvGgWE+MA0IJm\nDQM+axql/RZWqMDBdiiX+yGIE5uyFt+qxojGykdOt6q3fZK1EZh7bPLpUlkv\nk49pbBmlfSSxw9B9n7k2zfqjuYx1fb+cVGoJSWM7yZHd+yQE2gft1eFNlz73\nOdw5Qy3XgvyPnvEYfVGQL5BZy7tF4dwCflCJcryMNAWnjsojs9spEKfPUrUS\nSS/+qunIdbtdfynMiiFRlTw7ET3DoL8N61in0AvB6D50wQYn8KFZdbB8V006\nz3LuDOKOGJTVAKlYo1oSom0/EY6gRDdQTJWG3ZlONR0FhI+z5NScgh66Nl2+\nI4o9OeoxbNB6rQhZPfpaoE13DSI0YPudVVgrW5/wYC0lO2CaZUZj5XeFmMDm\no/DHeftt+4DX9d4lq2gWGPjqxye7TyCXlDxCsoUCB8HcKQmzK+dSZDMSwTfa\nSVyzHTT5cU6UCR4mpOGtoiucoUULhX9U7dp56FRaFMso0rV8lqeR9hofGM/G\noLmiE+C6yb3brW+Z2zm9bCgY4wySWvITMZT0sBWyHYTZq3kO4rtk7nZmJ/It\nuHiI\r\n=TQsq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjBZHdXQb/sDE7+ATMLtgYk/9im5U74sIlHrs8YEsYgwIgIaL0UjcZqq3EFpSODfs0JgH42Zg2XryS0h4TL5DUjwA="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.302.fdfd4e7.0_1612189417196_0.7556361050891824"},"_hasShrinkwrap":false},"1.0.15-canary.304.12a7cc2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.304.12a7cc2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"12a7cc2caf606bad5e50cbed5c356829848650bc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.304.12a7cc2.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-zpNSEDjFkV38Tpjx4/tunq8N6o3GuxpKfO9jxzl0I/E7HgPTY2RMS7O8u9Cs8QpDVmmgyW6Vo5sHMyRKZJ8/+w==","shasum":"8b3f73947a4a50b6198e6cc13f1206d6cf3c23d2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.304.12a7cc2.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBAqCRA9TVsSAnZWagAAt+UP/2waEUsZjuJw0PmfX9xo\nVip2bK7Ytdq2t8Aeo3eyoxPmZLFXavxcGpDAAAPAWSyyqFG6VAJMwl/sRAgh\nOzUv6fZgUfvBSRKeGY3kfZzp+FJjdG6R52zY5JUAztbByvxiOhDgTM3dAKRr\nRRi+RyIejUJNjMPuctCCgWrnfIU6sTATMZkek8adLis6OKIdMZKzWqAUxQcg\nGd/rX4OnV6Jb0Z3ixMufeeWdJ/EeJJQ84NB+OGlvIpAo4D9vKv+UFOZIjNdM\nkvekakI1b93x5WjVfOQ3xJyeDtwgNiMem6Dem9KNYbkajzVpt4zc+8iRGYEa\nAh29EKsq37s1O0YG8gLu0RTiSSuEa9YxINJJCs9DosiwiYV7sZK9kj8OHDSJ\nNUKDbFiRQkTk2gtqs7cTKJ9T3rw12E7VXTxN7nZ3Iufo572qPFbXrXeE/3kh\nR9phubYFxn9plOpoSLVjkqdpWCg7MmmjNzgVCiW7R0HyW6WQ9TYjHqKVbjL9\nuiqfMqc0UIl8PYLURtgM9mDLRPEQ+0c6IOZeTs9fzTC1e63Ksgc3jxJFFY/m\nkdV6bc3vx18TB5/tbjKAA1W9bCf6ObBzjgqZHgcv7yXQt73qGWKCoVWtg1Pu\nDnz6nizsy/CqbyrpBqnTLTE9EZ4ezzTOAUzBQ00R7X4YXU87GreJjZ+wXG45\n7Ds8\r\n=Gog5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBIKy3l1KHkRcXVRZ3/jdRUs7O0dSKrt7fBKAMUbtB3rAiEA6Gvo4YzHf62NXAJD0zZDN8PQnFzjKuaKOnsyVbS9oBA="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.304.12a7cc2.0_1612189737308_0.2651093957034154"},"_hasShrinkwrap":false},"1.0.15-canary.305.9b4faf8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.305.9b4faf8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.3.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"9b4faf8ef9abe391bd3b50d5db7981b416f89fd6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.305.9b4faf8.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-H1qyZaGJgjT37V3ZO2tTbc218vpnrdwEeU2W5RwXcy7fTDhFfqUR1Wk7n0B2nv8rUBidZLYxvqVrlKUHJNyXkg==","shasum":"a73f68e04012577a00584ce46a56ffdbea70f862","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.305.9b4faf8.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBB2CRA9TVsSAnZWagAAqSwP/iFPTQwz7YTDKoqUhlzs\nkoKcVdqWm3yF/t6HkOHMMfFmI0kDR4YvpfwfsGGD/uIfB0cfW3kJbWNnunb/\nvlBhBZ04UDekO3K2Hmx0TnglJ5nzYNnSRDyBsnssjiLIrN7oMlNMPeNWFWjA\nJ3OIFFXZ+dZPfFGgBnOXRXXoJYYNj2z8eVUORDYDbEeTCo4wcyTybO6e1p+t\nRMXMImR29eacaV57eBgbo7nU9vN1CfQflpar5JAH/FRwXIHt8RLtoBbTxX7Q\n276J8mR8cCul3leuJxO/XjGH2ExPlVAnwICGzc0oJOVkrY9TVjbnqL0imIdK\n727/1lYMQRUhsDml4SAIWI9SpT0eBt9X8gpvOvtarMAnnUYRVXlml27MRjve\nDacNJv3eyju50wvapx+lwbFh9ODE7WThmjrLIP+Ao+no1ZXJnMSPtHi8Dgia\nxd8jDTyiEV4RXBLqMPdi46RQR0vmX2fX04XknsXJe6AyLVrljjmGaGT0luOX\nFM9O2ObBevTY0E7iaCVVRnO3WaNjtkJHhnDQPCAEXjva8z0afx+c8zT2p72U\nn2dYHYstvYN3B6kBaOlweD9qJn4XFB8JsOD5uSPM612rZq5qJsHm67QIwYbW\n3qciZRoMcbxNKs3bv8nJFW73lfYlBLo46PlF6Vla5J408HeN7onITkzj9zBc\nTqZt\r\n=S9y/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdAKJ4okWUpDXQK81izJUkOvBb7VsHmJ/Sx0VKT4p2EgIhANgGLUmtJHgTGzwQo2La6+3R1BmiR19orrvck6vedTr4"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.305.9b4faf8.0_1612189813551_0.1443099546472879"},"_hasShrinkwrap":false},"1.0.15-canary.306.ad9e804.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.306.ad9e804.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.11.6","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ad9e8049e85ebc91da138d5da3367ee8c13ce56e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.306.ad9e804.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-A32asLQirpEabdcXbeyIP5YGuAdGUvFbh6s/Sr+XNhD00Irz3dSvRoKRcuE0tZavcuxY6V9wEfqT5KGa+a+SVQ==","shasum":"8bd4dea2e82f9dfce326ea0b017546fd8334f2d8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.306.ad9e804.0.tgz","fileCount":171,"unpackedSize":2492742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBE2CRA9TVsSAnZWagAAOY0P/RJr8qWJqbvGD01rnTdb\nDiq/Kt/D6C4doiqMVNAdEidqekfThp7TTIy3XaoLrMvGxB1S8dNnGI+V8t1s\nKR61tw+4f4FfPSKDe9KbJbpKjfa7O75P8lTFG3FODg5DIl+DiecYak7HNqUu\nFexr53G4H9ykOTnwf53tJulDpBbl1y35i2GpLGJHw6tMu5KwFbN8sBB5l9NO\nJAciWv09pFINgZpGqY7qIwquVHZpJ6wlZyspLhPVI4AU3+mhP1DGj/I1ew1V\nV+OozNGpneh2TuYuEe6shIUvlL9qsFZrxquXm4y/Yor3Kvr6+7MafS2QrMWC\nfPD9j8wD0KPUHnNyoK47q6JYkPnolBrIab7SSmO6g+rxdfrY2IzFcmWRC3fy\nB16Cg4yT++ZOBNkIEI/4Vj1Y+g4TIL5cLjUi65M2IkAC7Er9KJ1RoLr4J3zJ\nPdDIwuj940tC8zp2ca68uaz7FBQ5lZhCoFZWIuYWSm70K3C93G6HeFZoXiIi\nFPanMSyMNZzMaqUp2DbFLZr7BkYnAj7BdSuteY3X4DPIiERzbKhJQr/EZXfE\n/4NQcbuY3TK/z0bvd1L5qIBr+5OX60mu1ZFloaoi4s2LgWloi61RtU8oqSCn\nBIx2qJnzffdrLqujm1A50hW3+CzBDsrto4jX54IpZk5nlMYGJgtLhHhROetu\naj1R\r\n=VhHH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHv2WlqIz8uPh8jJmpt9SjTrXMTgn0/iFlpG83WGy+nAiEA+sOXdHdtfNSpS7pYC+xdhCCfLGcZOoBoX1cgfCc6SKc="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.306.ad9e804.0_1612190006095_0.8160777626223636"},"_hasShrinkwrap":false},"1.0.15-canary.307.aab5af8.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.307.aab5af8.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"aab5af891a9db815af498ee64fdc050e46c2cbbc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.307.aab5af8.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-MROO66LhXGNIAe12J6sThDSWT/LlZUlNkYQ0+UtWhpD7hpn2bdX81lpRC82ATVVhMum6l18FT6iBKh87c4CZdw==","shasum":"923530b8782c60ab1df49c6afd82b9eb1de709c7","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.307.aab5af8.0.tgz","fileCount":171,"unpackedSize":2494880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBHdCRA9TVsSAnZWagAAqZ4P/2MOl6S5U3XYPyssiQMD\nSBs4ad70Vhx6qa2CCEBwApllhGD/Sy51nxVfp+Nz2D9qrLYDIJ07KuYaETU8\nBz6a4MIm9nCGj7pPw+FZACOCUSgpxHkbEZj6ahy6dRG7ukR4+XGIlFSEPxhf\nq1ZMit6RBBp+HAOytXduVxOpANgAoOW1DBClxCekLlPh3aaWvHLMOumhfs2g\n7Ga+hoZfjlwYhFEgMYkNziAu6SGX1uf6bS3KUILGmS7qzj7A1XRYoHlMLtfU\nsAzQ09HDv4vgWYIhlygU3K9pa1N8UAzEnDtMp61RCPx/s6UJyWt7iDhoO1dk\n7U+FvaBp8kkxGfxAsyv6t/Xlts71OtkEl0v9Z3OVj3mndP504tz9AnrS95Nz\nsc7qAthUYA/BCKXxexDPRdYo1goBmxwZYzYXL8fAI4X3kSzIHwBXN58RcAd8\n74uB24iTotElJndiDNTE+AGGv/vk1UF9wZ4ifnjEgJ3ABMx74m8Ex+wkjnKs\nw7NvH9fNN+Kwp44Pf/qlKx06ZgpmLHjH5DJnoZrKYwCw9jxf40uqaUzkDcuJ\n25TtPubwhFsAE93Q5bMGieLGb67lb9Ad1ozVt/RudNaNA66obDNTFYfWYGcK\nMlU9XSq4+xn+Z2FBMFNK5LTnKhQXcO5y5F+egucNztoN2gH59+W8c67nhbkK\ncQt/\r\n=0WVJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMJw0FC2PukvYpfKXTBxezaosfX/5OQElZSFphTi+7OAiBOwvqG3Dw8xrHnaTnE6zFvyVEiVkOFtJfZg3MaWBm6Rw=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.307.aab5af8.0_1612190172447_0.3783354231214686"},"_hasShrinkwrap":false},"1.0.15-canary.308.e5569f2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.308.e5569f2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"e5569f2ef462c62e2cfd9c138b9cfda9918bb69a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.308.e5569f2.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-P6Fm5DgcWyJExxiN+Lo2RpUbVrJhdrSZF8FCKPtfVw5Vk5arLewHeBy/IYjlza2V/mbhm3kxfRwGm9sNEFnHHw==","shasum":"e1494257a162ae4132a853184552b13c06941dc4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.308.e5569f2.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBHpCRA9TVsSAnZWagAAZPUP/2J/mE7RanLCcWP2f+If\nAhHjXZxvaoEZrdwdigE45zQHd7Vb38nu4VPCum+sjOV+J7txnI5X4MttZ9l1\nTAUsJQ2jOlk1Ww2STqhTzDcZXvl78OBx7GFnLPCB31DxboyOyU1tj94RZSgJ\nWtV7mCtmue/L6ZtzywjX7+aTrE1j1hEe4SSf1b3yQdW/38/wFhYU0CqOfVC3\nXya7Q5VTSN+EOc/TiryXXvi48zE1a0jMHn1r7YuoTgg+lmk16brnCbmbWiyT\nZivxzsSWe3c5wK0Qw3pjiu7BoG9p87AWtAtnkbAWDZuw1vtrRNT7+38YfYtE\nigwTzSUJf0U2M0EptUaUQv7LtJG5Zkm8ki9pbAWWcbMTFRV4ZKXQArtpUylH\nMfctK2N56rskDM8NQB7lyVyk8QZRTzjEZN+Ctepn8vBwFQgT6At0bqvAHVpP\nXOd1j8lFZsFqn/JqXT37tF646EJvncZARN53bWUakmidUsK2bmp+zrEkxx3s\nOS8UpzN32IgKTjj1xagIbiVQ27zuaW6Onm07UTh9AYi9QvRfZxRDj5wmg8/k\nzuk7URuu55VbDb8mGn6kjtm79C7h1YxPcqlbX2N1vJXsPqR2KNNM6rXCPl5u\nAS51Hme1E+2JJsCtblVmXaeMnBjyx66PD2ekN26kBChAKU4pCu932cSTYgiM\n8zVk\r\n=BDjJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtw7SgbDQGCBDxPazYhmdAawvjVzuGO8m2XbVla8/E5QIgOIbCf7tvKX9fLkfuayg7zXaCchrcC4YmGU57FtRngs4="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.308.e5569f2.0_1612190184823_0.8341676080581073"},"_hasShrinkwrap":false},"1.0.15-canary.309.3b9a6a2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.309.3b9a6a2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.4.0","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"3b9a6a21ac6cd494468035dbda4142e1a6c5c0c6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.309.3b9a6a2.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-zSniqRV3zeTzLibDe8MIpekz9/QE2UIE80kHxukhBZtTF6mpzfyoV7l/HOOWLyGl+wI8alghAYJ9Mp6YWKYOiQ==","shasum":"7203ac730295617d27a166af22b09a03c3f14b4a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.309.3b9a6a2.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBI6CRA9TVsSAnZWagAAmNEP/1SG8dMCrHtX3ztUz0RG\nS2lAiActfsde2jBt5kjvJSgk5qn+l3gEmTUjW1jstXXvKpVwCacbvh8jCH4e\nAwT+vecEFLCuudHiXITbF9K/ykcnhI+oIzMHQTTVNCQyLldaoS4juUBn3jgx\nWLFOPIvHOQ50UKBxg0bj90kXB54BZEyy7bY15Ggw7C4sK7cySX6FnOAijgiR\nkru5w589K1sUEC5vFTmhPL5YfUYBAd4FmEaidAVH4sV/2gIhiCJp3MW+ahWA\n0AGbiQUC8ZDUZ5fFK5LV/hgunuMe0Rdspxor3D6cWaUmPGQwwGjlRjz4/t38\nATh2WpZyACN3NrcS8hf0JiDz/172gLrsnpXjMwKUWKssFgzprpbD7ppkf5fE\nSiTUs06Sv8lJeVq8t/jMp8oaMxxSyZ1sjhvJhN6s72y9k4WUEyHm+MVKxn3x\nj1Re6KO4waIejer0HChYcSMgYq2iUOoLzFENBYBZxh7cYF4L4HFRLrrqsacm\nwzvytf/xT2rSJpvpJZiGSLKhYXcGRga3tV3TGFVR3tyFQTlmpKBDHHIMczNQ\niWVnkidsZoPTcQfAjyHgRE+a/gKdMrhX2tAfvI+7IQ93GGA0+mnqwQGIQPKH\nkTq40TI1a+mUcKr998Zo7VPnQW/4lRmmkVhhk2LkeGXunX4lfVS+86CnY3OR\n6YKL\r\n=KOOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASt7ZOg1Guy6JoFKVFtgSuOXocNzRzV9IREqYZUbdl4AiAsJka1DRNd3IemR7u5Tlt0XPrx8tQwm4LYcXGUDP7VsA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.309.3b9a6a2.0_1612190266113_0.19214522478250262"},"_hasShrinkwrap":false},"1.0.15-canary.310.ebb1942.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.310.ebb1942.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ebb1942014ef441085cada982faf32b29dc636da","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.310.ebb1942.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-uZ1nbAo9q2pwIwCisVcIv0V70ij1ZKPWCOhjLAmjsoFjpQiQnsHGgcOZxagba0Av+ZQOKJVPmV6/x9T0Or/3HA==","shasum":"02193e4502a34ef71918982e9024fa7230256f5c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.310.ebb1942.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGBMSCRA9TVsSAnZWagAAZ9sP/0h9T5xGwaY8mjZWYTDD\nzLXeiAZssqnkOWzhKV8D/cBDfnwVixRBsGf9QpcLcs8DT+qloExSeWth9xa2\ncWgLp7w7tqOMVJ0ogyAcSKLkhpdHC5hQvlHF16fo1ewbH09Y3uq7262OC/93\nt+Ygwav0HY8wEG+/wNA4B057pH7XrPe+0bume6/pr2VKr6j2Qw0/KJxUt7X3\nK1m5nz5puyW13BwTTwvk22Gn3Tb+rtYzUqTcn2soyaffkTBMSw2xE9GtfY0j\nqK3d8F/up6/V7t8pseLtcz3w67de30154XJawNA4NrNAQ1DixdSbuxkRdj+B\nd7AdkYno3urf5kBmn475xWpFtdfW3AtXKj2TEMaKTG17bl0MFhJkWkg1h6v0\nRk6YhR9KQEwkc9UlYnOmkoi/X4r5mpSbIj6iNhbgJYBTMVdIzSAnCgKMxVdo\n7dd7S7ANvc7h/OUFbYd+0czReZCt+pKd1gInUmLxlslOo0mhZCXGJReotqWt\nmrNhdH/0wn1dqyA1QE6IehAXZMkoxk4oabo84fokVbVmUOVBTPiOG+V+HI2J\nr+s43TtVXQvRKUZ50W8jXS/ZjHuED38/WjALZuUqlP0RohUubskUOoC+A8mT\ne6DGXXA5R2Y9qGruFFtbP0el3vNUmMJwDN2AFHBYBuKcVb7+bqqDvEiJDMYZ\nYFCu\r\n=QRAt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH93IJ4l2ItgAhNtG82IKGFmoZ0vASV/aVKwi0WWGPYYAiEA4Mg6Wp/tMefqbnGH9i8qvVon/gQHlDFhCzyb2+G/+Bk="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.310.ebb1942.0_1612190482053_0.5024865285919522"},"_hasShrinkwrap":false},"1.0.15-canary.311.ddfa660.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.311.ddfa660.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ddfa6604a042b91bc6d5dca9df6a585854e12bf6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.311.ddfa660.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-oECebkxY4ksJUmMLlJZjcjkDu7KK0Uvy2t/hdbDA6zDAU7dItZ18ohuuwCGMqVPCcC90m7uFI4tWRNS26qUFGg==","shasum":"266706c74737c3080a3bb3b6354516f6c41a9199","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.311.ddfa660.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIULBCRA9TVsSAnZWagAAtIoP/3L7nBtsgGeC5/ESUfIx\nixvUY4FXJT93LI6w0XAh1+FB0jndq6XrlhmUwlqO47ShM/PnJ7BRz48P2dqo\nzqK+btVDlIVw2C29p5Im9/JA5fESZu24q6ZG3TFkJApQyCBjzOnjIAonjkU4\ndE2XR/18THkvopjs5XX2B3BU5pDbkXEFcgWV3UxAPb0Zu+/qCXTyuBSkBkUg\nzfEL3fD8A4j+TCD7KTWyAvmfoFyH5g8ytkY/Rnn4RSieQC+kPPBCxXjhSRGb\nkrwzM06dlZmSQZVJvmBV8fPd/fMJDrOGYfGKfv5Q3TQHYK0yzRYqld0QTMTF\nq49iziaihSStvmWi8S1yLHdgcN/7dT3AYqWU81A6lRNu3Mk9sgABXubv2xx2\nOZHIJAS/PbrVpwlHkx4F2JqmQBCPKvN8qkJA7S1TbTHHhawGheDJbvuOsvNg\nrRuE43yK0cXRf/RBfj+90B+o1bHjGZlwChKIXF8Lpx9fssiu2mAciCLT2cAH\ncye3M/9+gH6wyiyH9e1wGA4gn2bzGdguY7b3cZ90o6GpbZFK8lX/Dx+X4LY3\n6wFjux0GbN3z9s36FtDNWtd0TVrwMhxPMqV1vFcK9VpG9ojcAw+W1pT1j/ph\n360Jg5AAhfZHXTYr/Jnsccqxyr0LKwyehdi6IruWHCFKKkoMbmmMIKRGeL6t\nQrYf\r\n=oWX4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgYWcaCMy2XvNH5SOXARfQVZWnR44F8yiDKVV6UTwd4AIhAKqEeXKJsfZU5P46H7WJx80r5RzRtVSe3Q7+lgjnDwT7"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.311.ddfa660.0_1612792513105_0.7389696102501351"},"_hasShrinkwrap":false},"1.0.15-canary.312.b38a941.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.312.b38a941.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"b38a941a971ecb26d500068724e098f8f38150e1","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.312.b38a941.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-i98FIAjd39xvnN+Hkhppb9wiL3dnte8bF08FJ28bHj8TdSowdegyauQ/K4ZNKfNv3bqA4FMojSpKcmnqv4KoRg==","shasum":"25b4e176f39cd3e1fb5884f560f7f592aeb640c6","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.312.b38a941.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKnjSCRA9TVsSAnZWagAAckkP/2h99bRn6KUFkkwcw18K\nH7HuY144DtRkj6mkcOaYxaKISKrQyviya30RKB71RXEzNI0I66of4/lFD/7z\nQpZ5d8TM6OLQ3WcjB5A1blCIMpNdHHQZRdH3v/2GJZRD7k6dWzcsO7J2nCSu\n+nO1Kd/kh/JHPNE0epcMFxR0TYLckTNwyU6UfkSuSQiwjf0L3VIUHaM8TnkU\nDqD2bxO9ksfMel0HfOKFA0Kxzw+B+nNaDinN6062MZLCCkUBfhcUQyjMWbE6\nGdxgetlaI14L/6sUHz8KGZHdZ+jiCsAsqfqgr+cr8+3egUASRH462stnisEu\nwCY5EQjK4R6TDnQ6Md0NtcceNul2BaIJQ6lxrp2svXIW/quNgLrxqOPh+V7r\n9f2pMveKp1Q/QIOCphgfy8NJ/RFK6yxhuiTs1fgwKlY52gGP6uQTyqqpMiOl\nyHyYZqLmysOvSLvhSB1cO+wbqC7PRF99J4eA1xa7eB0gEMT1BDS1EAzMzdhC\nlxKcNlnvJD75emO4wdmyXzpc9R7iDhYZm2bZNb7LQhiLZeq8LBdaelKr28aA\nvbPg8ARbWcI8FcXexjH8Wt17PMpMoKcEAptFfmHpSjsecq+uBm1bytsu1+9W\nsffWIompYpbszHRwu8nTc3iyjqo4/l+n3EHReujSXzrnrBej9jWTU06QXggu\njEH6\r\n=Fkns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVzv41r7ZkubdjHV7fArU4m1hsQTIebpMqNUkuIgsQhAIgQZhGkQex0iYBj6NiGFSmVl4P1YvFCa3TXAkKH1/gUu4="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.312.b38a941.0_1613396177522_0.3642419010973339"},"_hasShrinkwrap":false},"1.0.15-canary.313.f4af4f6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.313.f4af4f6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"2.0.1","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"f4af4f672a60d8c4b64a419253b9a17b137d5a0e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.313.f4af4f6.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-d5DB5y6xTzXCYAjHHg55x3Cc5gS7tBHm9Hcw3k4e58MSccSE6bQAt+9XR5TarOwbdtW4jCjYWdgqHOwRI2s2Mg==","shasum":"11a8660f972ae9cf4c81c20ca6ea2c2d1a3da248","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.313.f4af4f6.0.tgz","fileCount":171,"unpackedSize":2492898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKnltCRA9TVsSAnZWagAAdM8QAIyj0s27bQj7bs6JjADs\n8x10mbfj6D0h0saXOuaTRChoInwpXaH4rWehG6oXugfSRIhKgT7Qu9wz+Dbk\nD19P+RVpiKh1gTX5Oce5tMQxMxkoYJN50o0bv/J3kPLdg6zSd6NAh9RU05sG\nOTB3jwV1f+BiYbAldm+dJYLYpjviWBYvYpcj5YsPECIcryVQaG4CtlYWxGNt\nmqETRpp7L+nJFkfprLOkDYeqT4EyAyiBh6kNPrOTcUfLXt9x30edbuMw7KHZ\nk7Xag2dF4s0vVAyMruzU5CrrPPi1YAbdnJxwyRL28DXzAfGN9dFExTFThIeh\n+k91cbEH821BEQ3qkjsC7PV1TCw/YFE/3v1yW5cF7wrNzbsH1IHxPcgOfAsH\nOe/GlUS+ymlSRTbbrRNZjExFiCnbMviz+k9OunR3qppBLmouyObOwUSnFvej\nZhshern3r5xlrOtAXkUrLf88/V18Ry/zQF1p/l1MJQffjNlUE+vgBH8xLp7Z\nO9OtEDWu/T2fSetPnvW7n9/djiPNbDTaQfkg2r7FqeAnbg9IurmAqxhQQ7PB\nbX8TsS6xUGaGkmfLBRiCNEPNmDkaGQ0ailzEY4e/SbEPvAjA5MbCT6nBJMyg\n9ehn6M3wh2Gg/af+kk76UeyD74eiv2q1q6qgFnneC+xLjU1T6sih+bfTE1TP\nGMJl\r\n=cdjg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwgrpBGD8CkGBe8kHa+6b1SiZ9GWGUgAzra80nKgnGCAiAj4wqNPZvyHscC6ISAeTpwbM0TpPGEIHCRNS1O73bZgg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.313.f4af4f6.0_1613396332776_0.284061227006289"},"_hasShrinkwrap":false},"1.0.15-canary.314.78f334e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.314.78f334e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"78f334eca5502d0487c52483564ba3fdf2eaef5d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.314.78f334e.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-T350tNJDQIMJSpGiIMCDBGrXHII1Trjcq/AtpL0EKX1uQWRwkhw8pUD5wz66IzqpRiCKY8Fs+QI89GBC5PmOLw==","shasum":"8a565ae1c1c33bed43dcc03eb446ead03d942f38","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.314.78f334e.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKnnCCRA9TVsSAnZWagAAm8sQAJQN4Vv0VSSd5jlpJWp4\n1dj8gW6bnPTP0ZnKoGN7LsFubbn7X/QojRyunynRXdwUTM7yo8FyImaKQ/mv\nKrK9HzIemaw0nWgxY77Fu0r6z6mhlDUJjtrEZWAhqDLcyXHXDVx8Y4TvoH2S\nnI/ZYyED1YImVAJxecOmMbQNwlmbP6K6Yd8YTvg5uQ5nOlocO6J8+RJADPmz\nVWbfWolXcXS5+Ckqss9G65Mt0NWdL2EX2kUc7+Yo1rwRPMxnNeqlgBs3oHba\nTiQYbNt7YgOMwVGFHGl54otWM9p0XV9emLff2ShgwF5WabCzRq7kHlOzp1Rw\nULSFkEoMAUYsUcpLNzaWI9XuVvj7GwbUkCC6EguDcmBD1fP8SHa8J0cIf/Pz\nQVudNCwfu7I9FJDKQlvV+GiVb1B+JKvCt5D9CdxWycyG5cwJhKqzfO99aHPJ\np3/8Ru9uwb3ZP/QplxopuC6dlnP0xJcBfCQ+/q2wXN5hwFCfWbLWAQ+geI8T\nEa1tpl7nC4Z4anLAU5Vnl4LhWIc9TWbkEZsDNGdMcHBc5IwjZEJII/mDrVIc\nTKFDe9bPsMejxFAH6KafDJLfwYJa+yDOf1TV9CGJ+maWp026Q9re0SlbeGhy\ngHiO6gZISRkLVcuJ23KQkYwIFuXF/jIAVvZppNzcQmPYjDdfYtgE4yeFxmEN\nMCe4\r\n=XLXb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFP5til9e7NP93UiiZcdo76fpI0Bebx3whEbCUgSB30mAiEAxAAPPSlt1h3+zitkcZMULeMcCwSOiSUKFsOHJw17GLo="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.314.78f334e.0_1613396418242_0.9460615090795221"},"_hasShrinkwrap":false},"1.0.15-canary.315.793eee9.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.315.793eee9.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.4.1","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"793eee90a0b67798cbe3668e3b0ba05e6096ac77","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.315.793eee9.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-y/FRQU2NeltBY6KxeSxBqdXvbx6BDlMgWSl8muszivOpYKEgS2TykxssgtKQsTtj+9ssQDAH7H6w7hJsSV1wFQ==","shasum":"c1d4294c14573032dd65ecae28ace781882a9e94","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.315.793eee9.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKnrVCRA9TVsSAnZWagAAM4IQAJC1UTdyYnpSZcMMQ4rP\nU0Aot3z6fnU3YiHtrnMFB0w4HikAjPaUXvkJChm17Bw02+tbkzMh8aqUgAPT\nrrWfiBow2hb4isr2NSExNDATOoZwV8ha/LdFCm/apMH3VZIa0nehBSSZvkI+\nqJ6uwEdWaJQh8daZtUBL5AtFs+oNygllThasUoBkQ1lD2l5MP+WBwyG5ytn3\nZgE413DAhwIBr484lev2CH2poYpxQrbf95/u5/F5DmfhGtv3Peb52hUx1JK1\nHCP7srPfZZF4iyJTyknswVyNGZW9jLoMAqS+7HtMvla9mEZ39AzYqoXSdf6u\n9nLxmppHSLB0meXLR0UxVyB6z9jslFzTCSeXzmTNQgdgXd2icGeBKcslqmfP\nTXTQjHPiyJOdD6Yr9XNLOGk1XLRBus50lRs+ocYJloDsYlhu/NJ9obAxrOXH\nb/OAyzNHa4P9b8ehFTtDZSP2elCBYbzZReP56IzvXHct1iAO5U7rLJtljjyq\naoPOwzSRmhjFe07y5NKjjb4lLGaalrPHBTGsrlfM6Z9JLLXXRbghc1u1n3YQ\nmO1lVHHJyiok1AQkIWfuuiII0nRxIZATArjjAanfUuOS22hWCqAVp2FA0FBj\nwlc495L/1xgyTI1IOQEqummwFdNEVXYGyGBqm63dKTS2v6uhQ2CRt9MCUnoY\nZU3v\r\n=KXkG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIbht50jeQLjBQGt+UwSk1+/jcOunUM/8GjsDQ/XCg3gIhAJA4WQXjpe+VCCoWTXJlyvUpXgMl09yaEVVfk42lzMEr"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.315.793eee9.0_1613396692719_0.7326843670581202"},"_hasShrinkwrap":false},"1.0.15-canary.316.cd64cca.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.316.cd64cca.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.21","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"cd64cca54d3d611c0ca7215186fe296a461458f5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.316.cd64cca.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-9BFz8uk3EK16ONf3H+BaSFkhxQ84DuyE7jgK4WYRA+2Cr+N3vbP9lz9uYUFvHTYfmdXseUjuuzabx6j6NQ5ESA==","shasum":"1d9db0508f45901f7f3f6905b80528e6ecf06b28","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.316.cd64cca.0.tgz","fileCount":171,"unpackedSize":2495344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM7IqCRA9TVsSAnZWagAAhnoP/jTj+YiOn4lRU3agOAIx\nquIxvmrtXwl6Tv0/JLkRrajyrsuOTTZDiYodb3VL5NghJ4YiSP37XWJlW1aG\ngqaOJ0DRQ2oT/PDndJHJDIWBtnPQR+687eeT7ucFzAVPLnHsG1SC8UPamCck\n7Q5STbqQ7jxZBKfIwuDp0l33hWuDIb07F5pAfs2uc2OHugeU9hZXicnJ3erR\nQTSTIjAB0o+Gs3grhNQoz2oHvlnjLc4HcHJr+YsDSQaC7+oXzBh7/FL0GoiB\nMTC4TmQyfkuV3CBaRrY1jYn6ofbY5C5Td2aS77HuMSZJUB2AClrUUd1pvqUX\ntpIpo6Q8hjrpFJWFZtJU2GMb5KHd2l5KDjAX7eJIsH4lOG8UfQJtB2mFYgEM\ni0HKq1fmjBskpQvLK1JgGl7avFr2R6Yv4cl34pPbi16H67tiNDX3vCKel/bh\nmlYFJoJxYV2IH+U2E83squz05DsunvurXNtbQvWLBNl6AXNLtAy0VZJd1c46\nzidVUhPths2pkjGs/302vqsxjN74Y6eVFmF6XDRUAnsdaIdL0XbVpHoRo/Bd\nlplHzU3Kd94IrfDit/3eyc0RtkckvErxRAfwNSZZs1nDaL+W+6RWsjf6J9He\nBnqvEXepodPq1HkM9s9hqlZ3cciPRT6/6mEHcrGBCX5tP3mOGSbfhXoZzs2Q\np7zM\r\n=zkkd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmGXX3yvyEQaX/4LeMQXDffUrAHGO2d4V0fzFW4+OnqAiEAtXRk1ZBc0vamc9JA/G/ijYUhiuoRkqodVk9Oyv9TOWU="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.316.cd64cca.0_1614000682144_0.5019282335845587"},"_hasShrinkwrap":false},"1.0.15-canary.317.bcbad8f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.317.bcbad8f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"bcbad8fa9331919b5487d57545d32ecbe8af3092","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.317.bcbad8f.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-KSwoSDGe7SRbm4yN48+sVzeISe8T43rGwABsI0QxuEWuYiEdCPHQN25suGRGAmXNJXs5PgHkaLzgswDok+Ac6g==","shasum":"50b1f1bdb9db3f19144b2155a808399ade212a2b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.317.bcbad8f.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM7KtCRA9TVsSAnZWagAAhnoQAIKpL41G1gM4DrPmgs+c\nJuNe3MIjLl6AX95vRL1+ZfICkbXNv4HlRUS9HXTt0YUovGveD+RGYLpe68m8\n0WAFgYFRTu/R+HzPNu7M8BrHOtwFspRRYMgbej4Nr+11V/lzDe0LqY8LAnna\nszASQrBtoiyItxF5Fk65LuDYM352Xjnp4cXVvBJ6651BkK1fthxOr0Fk3QnO\n4cjkwGVG9B5h0rpk0nu9YmpPR+V7H/OL6cOqhxNrdP9LYPWxvpkVjCejLLBL\nzPGjhw1GBX0NZ26QEmUJqWAcHwUTz0n912/AM/hNxjEY46o116RvX6rJES2z\nzqqAO5BZw54lNASFvHJXALvUL0o6eh/xnW01SySF1lX5SbmVWhAQyAFy9HTh\nQb3dqAhuc+UCPmzBqE6jSnl8/LPB3JYB0INRB8dLZXcycHYewkXNXu9pTfhY\nwbOmDJVoEYwHiKilXHlp4SpSp+qiNXU0+2nVtRZ00ziq5IrV+/auxtiJktb7\nEqX4XmkzIjiEAE+SddGeY1NLoTZItj3v404mphLjybYIoAGM1rNmRfLGksxu\ni973/OE7mSS1o42Mu1b44Sj1ua1UCSzZ4vfj1JnDGlMjkxKK8Y7MZSsOqiMV\nVybEKu1ePZlnXIEOhZHjXZTZjT20Ml4e8OlHGTOWggYtmbrhv0R8O04xyI2D\ncyvr\r\n=lUOV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzC7hEgocq2oTFP+fJiEOEvXwfEk2QrnJIRauy4rUqOgIgZllFgieaCcVvMoGyZ59cIx8VDjZh2hyS0uRVCwG8REM="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.317.bcbad8f.0_1614000813097_0.6477094333767497"},"_hasShrinkwrap":false},"1.0.15-canary.318.6eadb79.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.318.6eadb79.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"6eadb79558029354e9f6ee86ae8b05cac6ddbf78","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.318.6eadb79.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.20.2/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-gsvmPk1heDLyU3+98/Ajp864J97g/hKrGpp+Jo1xas24PJHtuCaXDCs/QICojhTAm2ZQXBWkO9K2iKU/WL7/Pw==","shasum":"db0740ba42329d1bff3ebb1d853e213d5f07b2dd","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.318.6eadb79.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM7RKCRA9TVsSAnZWagAApvsP/0L5rD13xZijggMxeNRf\nrj6lMHg5h3nXm62TQEoDeClQ2MrYzQWBAYD5zgMx6OkAMb1jC1G0bMqjQaqI\ngl61ZbHtrY3U1H5CFxsHQL3TRQD/YweyeK29nHKz7mxlBY8Lbi/DY7uNNpgI\nqKhBIOZuBscguRUEq+EaaPlVnLYXluajDimOpKohtaLFAUeKGs7niBo9C71X\nu//f8tznuEv2pVvKHj1g+pnmYywVbHemYG8MdeD/8XcygDLOzC6FcypWFunm\nkQ17MA2qFtk28chGJ8+8dfEXI+YZ6Dry2QuXO3gjv78KObr6jKOElCB1xkqv\n7TobdRya/urNLr3lfelk0rIXziPuH1mFfn6WbQdAcwZ7xoc44oRQalqRet2x\nA2g835bnKrLEKooe1ouez+Sx0lhIejj0VaORx4E6TLrmg0E20Jz3nI2PK+NF\n6xiHFfdBSu3bdc9t+AXQGC+RqZ2KOfp4k8Lr/fN7ohoVuWREAnhp7oeSJAm1\nXACAZIazJuXWMKGvInwYyKHoR5xdzzIE5MvqKBU7muG56YPenhlRfWHYiExy\nNSpkw2uf/S2wONWNB5BBgiV9ZyWEyEmLd/IrSIf0/XlHLMxSkUK6DWjZQWy8\nKPkxByVB9+jOd9IHsRt9CL50MfneOKxSIaNRtURXOb2ghWutnSuZvJULrScT\nial3\r\n=CIwS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwAA1f5Joe6rrLLw38gjMKj47h9yjAtu0o12Xh+g9F2AIhAJ2p7qwp9eJ7R/onNj46QCGjU+PxUW+NHVf4IEZnVCHf"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.318.6eadb79.0_1614001226282_0.6531582626988421"},"_hasShrinkwrap":false},"1.0.15-canary.319.9b72000.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.319.9b72000.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"9b72000671562af13bd8658c72c57d9f9724aebf","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.319.9b72000.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.20.2/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-YWs11XZ1TYS3IC02akGQ+OleGPGBk9z3TywU3dRM909opYr8ef5HKGyvUWDptzLYVswZJbCPHR6sVU6XBMzqTQ==","shasum":"848bb572082186ab0b020f2d37d3f52c9c8890b2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.319.9b72000.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPTXTCRA9TVsSAnZWagAAQ78P/28jItRboUcWrNBn4HTY\nhPktmf0ulYWlBe3kyntB0+rgRKSNypEj6g5yVKV+HaVqxXjRKvg3PZmGH0+p\nplcqRzzqPhKLblMBqz2wCFvO/D2OBvdj4LpFN7aSElw+ahuAGluPQSlCAYTB\ncFhzGP73cAZduC89laDULZRrO8bOiRDiBMWWUFLU/DyR1EfSTVoMKmCeKSRN\nwkleQivw6EiggxfDGsWQsP3ThHAL1k+sDzWjhp4dcFERO+tzRq/AYt3lDvX7\nyfFSRTB83kew4d7+vk2rdcEUT1LQ4xCawNQ7X9GVC0DSBiKbE1mVO74gfrPo\nT/Q9MYbjjkMKYRGW66+5+cMesluzET7NtBGbdM41RAQw3eSk6+kmUDGTpcYc\nIYBB16oQPRUYI7J8G9eUnjhLMXfl9lG5uH1tCIrVKBHeLeYv2SOpeBajBAdf\nqOh7zeA4KScsn5PaGoi+hU6hYyTrNaG3sSg4c2HlmIAJMlJyCZeoATNaykjH\nkrRBvHYIWWkrPBneucZl3ZY7bpjrznApP2e8u8QaMzvw/OypceVqxa+12lki\nMS7NqYaK4teDqnqaJW8SvK13oAl8kAZRx8vaAjgGf1EZqHyAJhhh9mSXW4jR\nOnr4VeDy2o0s4GfvyIoMTSKjIyDkyiVFtLT2kB4U+dv02oAIQBYvJGduF9BL\nYQf0\r\n=X697\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBazbDxWgoFhUskwc1aar1IeYaFQBoTm/SMZt65iovi/AiACxAT61IOywEqjqVrzItBazV1BC6740KwF7HZnn4qiyA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.319.9b72000.0_1614624210726_0.5543293667898688"},"_hasShrinkwrap":false},"1.0.15-canary.320.72f2d50.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.320.72f2d50.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.4.2","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"72f2d50effa606ecaf635c67a8b8c76bc5093e6e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.320.72f2d50.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.20.2/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-aGI66x5RhMq4tnv9Y+Txkj8Dh94gckqg/BynZzu0SANvYx3zKC0SZNd8Qw6fsfpfbmmvi3z8iF9ifoya8o3uXg==","shasum":"edfd90d9947c312d40e6a8d3285e6b47971c2f32","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.320.72f2d50.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPTyNCRA9TVsSAnZWagAAheoP/jjU+zUrD4euAveokojT\n0F+YMKQOSKB9tDRszDUdCSuLQ6uKigs03no3jTaKF1wsA58eV3TiLAWyZDwl\nZPsK2ZrGVaxnEal4Lymw/uLc3WAyQX2w0c+UoKHH45xOliNBgrkupUS347Lj\nfaN6SsN+Sq3FI91cEI4eDJ9K9MIZUOpGz0nAeG+3HHnpO9FR+4UOn5jRwJlg\nBW4MJ62mKj85iGBdxrW97XQBlDnu31sSdhRz+ZG3HnIV+xviuu05Qt7PasHL\nAXWv/ga6dJkpkoum/7F/UjAFmh0hvw1v3QxkgWXTP/7D/fXKJLL6RduRf5BA\nRxdCOo6EWec+aEBZuz2EFXH8bKnfGFYwm2IqiOv9moyediFf8FXtSD8g4rc7\nZW/gMtnNvT4MOzVFFNj89KlgXQFr1CAViKdH+asaED6c2uKwBtq5yArDceJA\nVD1oryE8JF4NBImRUYkFja2QATenH2DWoGHzgqI0DvbqOttwAkwUxQ1vYjS5\najuW3Wnas0zgsdXvv+xPPMsAr2iV8OtGlX0/2TyGP2qM4Ouqo/GMh82fKB+O\n8xzhQ2miIC1+YxGHlhIF7mTAUnQcXhH4sqMY9FLgdBIWBWdcQtghJ1PixrKD\npAqG+IvRVW8u51uxcGlbFEgOz17TBDqRavG4pIbq4gbeyhWCd2cnmiWsATKj\njGXY\r\n=ZQwY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCoUtg/ziIhyyUWk6vNzbVNJxWQoZq4U0G+DHq9trQXAiEAtlQws841JZ1dYz5wzl0mdvRDItq0qi477hzsOPEaXqw="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.320.72f2d50.0_1614625930236_0.880119815483384"},"_hasShrinkwrap":false},"1.0.15-canary.321.69f818b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.321.69f818b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"69f818b27b02009a565116dc8dac0cbc3b6e8bb2","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.321.69f818b.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.20.2/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-stJzDgJ/8d69lfBQ1sS2hCtHnEk2Y5ARoY9MejDiYOQezM4qyHt/BtB2hhUOOnUkUjseow0ivGphuH3F0UK2+w==","shasum":"a5cfc69906c26f646108a49ab8315600fadf5cc8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.321.69f818b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPT0LCRA9TVsSAnZWagAA7TUP/i/BEJSz2J3PqzCE0PjY\nE794PDWr6osWpWwLWb4+H0tk5GNfbRHUoi+rMiptNcVvINT24kJk+/3myI/x\nw8605DrK8egyEPbglb2EHcQxaWtGXaC/q2pb+JcEdKeTFQ3LvZM75jomoC+A\ntAoGTFs0EW58VjNFLKpjqhPihqUVzEhpcztEHCF8a0Qno5znJrhx/2J6Fpez\n19YbYKnm3l/I4VfqKEe7KZ5BzHHkw+KX7KrNFJ7CDGIP2TMCReIM76/jpFLz\nAO3NdeU5VfTT9KVTg8fVP50KjdVxboHgeWUvgo58t3ImIWYAS59U1Zl+gXni\ncGEI8teX9LgYg/Npe5ddHScr3yeJQdM0UxacSbq4EpQxprxcSNa0USYV1z2R\nvqznHTkj/eiKJNnc0RulFxTy8zq0TAxZxeqJkCFp9hB+rt7rVcJ6Qpm2DD5g\napl9NRZRYJF3xrF62L8b3s2mlacmhSBxeuQibtKeoYoGIxl9V7p9+GN5BnP0\nAxPsCuTY83RtjFesNqbnLcQ7ze+d3xGtnjfmiURr+HcxDqt8A2m6+5xc3U+v\n3GiJCtvc4IOTsmCHpmKbESk5AGlZWyJA42jH91fs1xEod0uqddchZMKh6eY9\nMLOZwQOmyBH1ZrZ1YkW9PphGfsd6f/DRST6AlyNwGNGzaqYof0MmM8rnm20m\nry8I\r\n=vkfr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo1A2s/azr6Uk41gVBj8yD2VD/zcBVveuXULVrJ4ftFgIgODOjGnF9WwNpgNOh6vBolIm0Qf45Hb+7RbxxswBBkAg="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.321.69f818b.0_1614626058850_0.5767720815689004"},"_hasShrinkwrap":false},"1.0.15-canary.322.aa29bbf.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.322.aa29bbf.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"aa29bbfe4fb5a357b89e493543b692ec47e53223","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.322.aa29bbf.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.20.2/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-CSoNRxuRhxVfidvy93rofuCDS3/gyOuHNT/ojBX+tlojQDDd4QNoBJHoWPz5Sa8uQyvroGU0RtkpoXSRJXYwfw==","shasum":"c702564fe29e65cb504874f52056b27b411a1337","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.322.aa29bbf.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPT19CRA9TVsSAnZWagAAEfMP/Aquhvlj2njVrGQ9EMHw\nxfPoME2yQ1Nz0kc/fTkzMfE09TANwLBx0W4PbapPE8cJceNeVkqjBxvNi7j1\nFG8DCYQQ2iDBtSX0KTYv2WAqXni7DdjniYLCRa7XW7+fpVgoXxBYqezEq3U6\nsY/KZReJFUKWROQF11Bkid2EZOYb6g+nOIq2yyVzYrrq7WpkK5TVhipE6EcN\nD+iF5S0GUtkv+HL423Q3QPIzrmc3G6DMTZTCIUihqnpue8kX4MnqFpg2HCjE\nEtRmaIjBzX8YmGspFpiXIPbNtjOJ0soOWwdaFodN8inuPgJz3xxQruL8NMpb\nkCz6CPc0lEPtafPsiZUNSZ0aWsQ+sZMaP15VyfB4DwsPbXSLLy2xS3/LRlfx\ns/N3jbYxk8+XioV8e2wy+uY7rxBrsJzkLFmBLJYfuXg6gTi1IQexuJTRXBCw\nooMDu5ovOroINkS5c5VfCxZKfzaOj/Dm6okfs7M6FE5vdrgnUyVGOJ5/IsN/\nZAvpiDRWQ6RYogGPeqn6ebYrsje+l+EypnKveWkTang+95rQkj64zoyLMMWJ\nJ9XwCPlVElp7CLeK95qpUW69escDxVndyameVcRdEhKtwlLvkQ57AE04GqNy\n1sLwcAcga8jxUlXLgnoeC32ww4pQZuyHVMqlmOxFKjdh8AjldfAT32RB5c+O\nvBDZ\r\n=W85W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQVdzOdCqVEos62eRMWF5RVdho6rH6PIJVJwwG49cWJQIgEddgnJfaeH8JG7wE6ran7tGalz/WdppymKkhx3zEjAg="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.322.aa29bbf.0_1614626172944_0.31862700094075547"},"_hasShrinkwrap":false},"1.0.15-canary.324.226b832.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.324.226b832.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"226b832219b731671f016b5113d96da6ecaa0352","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.324.226b832.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.20.2/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-9Vw6bdc8AnwiBEVqulwp1BwWFMkMxMyZTJ03n741h6+sHo/VpJFBpKRCZ1lhRN4+HKYn9Ys1EPk+S4IiVZdBog==","shasum":"adb6f98e460f699e1ec6b784f11e2bd51b63628a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.324.226b832.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPT6zCRA9TVsSAnZWagAAkkwP/2TlxEEN7SEd1Lfjbhkk\nGpty49Ucrjx/ZDjEpRGh+LYLFpgiPElZDGpD5rnkGkohhdVPLHQEp/3yQhQO\nHGQB3H7GWmuXkRy4Z0IszryIs+JYYgTt4KwCvxxFCY8OZdb9RC7/Isd9zV8+\nx83llRkHYXU16VJ74lBP+Tt8qrk3lBrZhA8YLXIHP0jQoKCj8BAKaDk3QqkB\niWHmhovvYqXs8PUH2pRhykzqec0TflOnXPKExK66tsl6oGkaK4eVyocAFqQU\n14mOSUEvw0Cu501BVRxX4HKyX0Ty7eyi9BU+1RNwl99XQkFPrx87qxynC/vb\nOd238qqtyHZ/XJhYTKEnO7fcko7SMbBPgqkHJZtj4qqlLbZtaoaHMQJATPiq\nzRa32LQMkehQs5mg/dYuMJxWpZZPVEWY5KOQNB0GbbsU61VX5L2Ht3MBWQws\nEGEpbh5C5fCsZXcNzc5hacfJKLM0s4LWWcnP20Om2LbFd72aAHv9Gfk1DG/S\nuY9wyGHLoQUs4YEkSL70SDKgXv32MBmhvDoNKzwtuck285sch9MzBQnKPdAL\nxMDbw8YtuG37iLg4rkhYfGPJgA9yH99KHB6A4pdBgB6rENzOOXw1pLAzs3yL\nHtdQRI1Klpdz1P4el7PvYUO/Ft8ACwTFo1PfP/6BNIQXkTfBc7fw839D2O1U\n+dWa\r\n=4oRu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvkwRP20k83Jf54vCX5u+t+HLUHYTMy3cPjwaUoJr4cAiBJ7UGeiBrTXMDf8b5LL1YIHtl6bngUh3u0dF9tfDOckA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.324.226b832.0_1614626482913_0.333173341402611"},"_hasShrinkwrap":false},"1.0.15-canary.325.063151f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.325.063151f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.2","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"063151f28838059488600228b103dd7709cc13fd","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.325.063151f.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-E8kE7jx5EFxQQnf7d67tY5aA4fWT9DBSrgGp7DyyOkVkx1J8w4GzSXccJC40n27BDY5/kRsYsL4ius0yzb9s8A==","shasum":"6f2d78b9a31aa1786efe80622b462a421aee9900","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.325.063151f.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRigiCRA9TVsSAnZWagAA9PoP/jEvxoqaYopVVJda/jLY\nCAo5z2GwL66ASNAMv2QBRjcjvs+pvDAItHsSxCGfh6bLWDpJUe/rwq7J5UjQ\n78TwqxZN/sh9qjCMQ7Iun9wcepJDgcxbeSvSAsEw1DW/6C1cWaY3OSlLMJ6Z\noZNzXoTXaw9f9R3oGycbJ3dZZYn03AlCzoBK7ofP+PfQ8UdYEz7WwV/FpHQj\npr0NH0UZePFxhlvXhorMZ57U67NF+QVNUv17A+WlKyIDN/M4N6EMaKJ2HIhm\nLYUWFb7aegpH4qVqh75aLk6HOazQa+MJIaRG/tDXnIEy8XqZOLX97d7yPkjJ\nRlT2lRA+M0hRBIcQ9QF9oEoxGtQeHl5vW+fJrhPPIEC0YUK2M1o9R0fReOIf\nJ+BlZ+pQH9c0uUwUa8l/5JX629/NEvhabjJ367cE3L6DMfyfPWDnCTno/RXL\nflkGXCbxW96qEURWtgrRS5iWGJmrDuE/AhQ1QERmAr+KE9FFPaGG7SXjC7HU\nC0egBh0vLTv5VBKSnqmOfnTg+aTUYFrl0dRiblB2CNRW0NehLVXhWNKaNdeV\n5dPPDfXzIszn+nOVWhe7T5PT22TYFtraycwlgn0Enj48KAD463wa57Tyutrn\nzHN92Sa+ny1uwo/mJakxywfXrsU/HjvxBdmu6uZ+nlPq6+SRgkRyQJv5c11P\nUVMM\r\n=EVkS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQnEIyKBnAvIMYnm7stLXrzX6I0LEl7TNMc+BY+05BHQIhANai4lJH8gBe4i2VoLkS3w4xJnX44PvV8zlPfWfs1tUV"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.325.063151f.0_1615210529577_0.5823524221215104"},"_hasShrinkwrap":false},"1.0.15-canary.326.0754e78.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.326.0754e78.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"0754e787500b6aa22001050e6986564db2013503","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.326.0754e78.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-YXXl/UHILd5OLV588fS3AhPG0cV/rW0Flc06x7Nr7n2WaqsHEfYZmO5wjtfijkjUdj2j65IQ00ltTi8Kqv4biw==","shasum":"6a4d8f776db8b3fe8f4c36ae739487cdca966249","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.326.0754e78.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRi0hCRA9TVsSAnZWagAAZdMP/12RhwQYimed163BDpFn\nxH2NpkGjb53DRLxGowGbSXgooBBv2WMaB6TpSmiy02mlLHVBhuI8FjWYUfSo\njFPuhZBZhn31FlzX4u9B6Rl1APSVEry11L7UJ+1GlcxV5GBPIEG2/tJfl41w\n1rHVoHe1956F+fKlTNGRkoVOzjkbGYXY/z0UfYiv29scMU1fUYkmDWo4eW8G\n5RQL0yNq3aNIh6UWSy9KqF71tnbPrjCyguGuAYm4iuFSC+m2X8ESFuN+8ukl\nlncWR7NQRahMRlFvGfXSljzUL05jsZqdxb5t2d2FPLZxI9pcO72XVkrkMEAB\nj883Wp3a+BkMO11eZ9LSEeZm7CacFuIcYpLKmB6Xv0158a2JlR2HUcilg69p\noE/b4Qv+uaYnURlUzw3gVmehikFnlxu9cIsiyGaA5mfFQR2ZFNLHsb8mBAOb\nHQtTBmpHs9ZLBU3yNgEl+5A+JjFJUwksKedZ13ukayUv30A02tCmgwPWKSoY\nV2RAZ76fUDU8D2TDmn6I1Ip3hYixwlEVLaX2EMg3EikLrdfhlTFEEzSi66iP\nmo8BeJO00vUEayt4Pd7oGakMhrX92cWwAExKfYp2KFB+opuYp/Cuu39Rn8Vv\n/u0N8kaVMEe0bgafhgTXo5NsUii/auw4I3OsyH54lkIyJmhyquOXQAQYC41p\n7dSy\r\n=Gduc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuXMaJxTIuFDBLQ6g4KhUuxXWN898Rni1jpWBxjXLKewIgdntHl77k0pQxphqsIrfTgaFcc/iDEdJF/QcTYwBp1Bs="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.326.0754e78.0_1615211808492_0.7991571381329561"},"_hasShrinkwrap":false},"1.0.15-canary.327.0122f3a.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.327.0122f3a.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"0122f3a3e7da6f5e0f176a3777a725793bdda832","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.327.0122f3a.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-2891cqgwNpMxFGVZxCV6s2R3YyUblJBf+iLL//fE97G4bORMdqZCiiU88QfZEYjer9iuU44nu46QSHyohcgomQ==","shasum":"b0b85fcaf1744401a7e96fdacb1dbca276e6e0f6","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.327.0122f3a.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRi19CRA9TVsSAnZWagAABzwP+waEgbRIa/iJo22UDRa+\n2WnjPDqyAy1sPrPvrvYPZ0z+w67SpaUv4iNIi19siAZnUvUHip0H/wW0kwjE\n32pHlfjUdtSTw30XzXch92pCh1CAQlN203nXBMGWEehXWilHd8qDY1tl79Vw\nR+TGRwT2ytz0JQYZTGKyrFfGDnpc82CaAZhQIxr/vr9Zr1B0d2w7rvh6qtCt\nD06xwpKN5PDUXPmLycKo1H918gUsIqAb/1fqM8xvSaWY0Qd7S2I/YH3McON0\nJfqmIy9FIohGqlDy/h36gK3dG46tiXtnBsYThuoQdRR7aQdTKntmyPHMTyxL\n4awar71mtWTh8Q9GD1uV8+e723f/5vrcA8borfWcTFGt75ExiXIdeZ+ZiLns\ncsABrEjSUbY3txUitK9otTq1wqzMmyv0fQn0J9Hav99v1KqlQUbebaSXSndj\nYRvvv38E4hooXHic2r1/PcKsKJCGeXpxjPLYc28J+VoXiJI9vVaP7YbxpmZa\nl+YoWSf46wDYd+TtagAhp9Kba8pbzI5gI8fUpJn4FvYPMTNBGl3libcxw0Zu\n9NPMGTIZXz1RSbYccs/HgIwBqkmf8lPxnqNnh00ShzrWZwctkLmwkxGem8N5\n3tRGhfb0Px9zlvQM+0KA/9VOAHrNlUv6JCm7v1GNvbhaH3+wE+HpEy4zUYnp\nyYNt\r\n=Ve5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/b9K+U2XWSqNwkwbU2xc4yU6WrWNHqNiP09kqOY54aQIgI8RcQ81egn+ly/aErRDbupcpwhORgA8nxic2sHpYY9E="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.327.0122f3a.0_1615211900924_0.5270713626056731"},"_hasShrinkwrap":false},"1.0.15-canary.328.5ba647b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.328.5ba647b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"5ba647bb50ef4010a2af358da399f670531a8e9f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.328.5ba647b.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-i/AZZTTscA96dmF8gPN/CD3sM8QYVUPLEMwC1sNbkOu4zr3lRVCfXKTBzhckNtUo7cQ3nTBu44yN2EMEptPafQ==","shasum":"b19b6dff93b57a483b4756b716e4dfc467964f9d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.328.5ba647b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRlaPCRA9TVsSAnZWagAAhtwP/0YurPvngvvaIzPSgcCA\nDwdGZDJwxHGd8RUd0re97Ya7KFBPiAOKMRcZYF1QruMsre3Yy9e4MW0RXcY2\nAfD+0EcFTVzWlwBBRMil7WxOlm1PaQVUlj2nLV7QzEUVCC5LAK8Rf3vylg4b\nItixNPgCobY6O6FrAxuJGZKzsXxqNe1qsKEAZ1Pb1MR+m0OYXk1PkDDzIvup\nWoUvtzP6uWapLY7sHF13o/U32tNOpRUYJnBudyotHn4d345AD/+jsJPxR0zh\n2ATlgVWV1/ChefS3jkk6dG4OZ4G7V8qY6xaEljkhZh8PVe/+b+SnQXS8MrWA\nlYra6xaiXqgMdMgXiNb9PcJF/OzcmPq7KhImAlzCU8gnB/XkJGiCFv0v4vOm\nfswkg7sv54R2j/1YGqOHQCqUO87/bh6Q+br9zW1PitFdsS7BGoihPsYm/ooT\n2W4jQ72/hr6JIE01upjfOVDXkRkT4YgJ6jwb7+Vx5Ru6qLLtRP2yS3mvjXRH\nRb2fP2cdk+zmoqglV0C+TFM9O6ATDQex6576L6xXNQQsRUMtc8PwlqksKT18\n5ME9NNB7anXaSbDB5F6zgw2iPAeHzOQPa7jaLjgNgyHSA6kxv9Qgtp6WbV+L\ncrejpobUIH17MdpMia584JC7bd2Bma/DjAbSHd16gCigALqIdSeB06yFgb6e\nJjxp\r\n=GOKl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErW34nKlyafvQ/o9bqRLTvtu/oXxihS1zjrlcCzc4rPAiBYaRm/vpjsbHrfXHe9Rg59x9+R/ip8EkJkjqOxCJo2JQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.328.5ba647b.0_1615222415023_0.8107197098907108"},"_hasShrinkwrap":false},"1.0.15-canary.329.b31dc48.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.329.b31dc48.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"11.0.4","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"b31dc48ff5b4b504793c916b043fa112a5acb59b","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.329.b31dc48.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-aoEc9Yssu2rrEAPJiiw4LuYKziupBWQ8gF91feQxEJDsqIqCwprMQbuO611eAXE13dmFEJaxJXbbN/WvKUWMdw==","shasum":"96ee0ec82399098b4fca398b91d236d24be9e695","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.329.b31dc48.0.tgz","fileCount":171,"unpackedSize":2493822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpzOCRA9TVsSAnZWagAAWX0P/1sjwVy34uxRC+8J1anK\nLGxVNzm3AT7g1NxqBzVYERGxL2jEb35lbGDpkCCZ05bJL+z1IL72C3+/pewY\n6PEkAFRZ8Oz/q0uXMFJbJBXpMzqH6QWS5PqWSO3wUH8TKaVU+dUaASaeYuGR\n8qabbsKIeEoASsnwJLhceBUYMwn3ytx3Wrm0TGbtL5QFBjfJgI5TQs8LoGCQ\nUbeREs/er0KMHRl3Rr6WIfnH/654u6yeQcYmhTf8M0Z8AI0KLi8lZR2bRCYr\nO/3cvzlZUIsADoLCssWkz/A2QDWC3zJw2jLmOxU2FfFYVUHcKTeMQnRhX5IU\n1NMiORsSKDh2RNiDAQJNqitkHzVPH6gh8oX7aReF7WE4B8GoTt8rkIn937Z1\n/+0VHHH7jsEDpipntlBmhXZTacatLJ5t/wtV8gOF6Bqe16QE6ot9nS/b0t+N\nDmbPWo59DgyhEH/gDEALmWluSMlGIrI+Kwv1H6PJ5xeJ5ueyyAJvSD4zjP9l\nfTHO3Xpjk8oAhSfNbMVggM+U3O1u6hOeMrSSiEWzyR5W5+QFvCWuRF0jKkoX\nwNpvysWdxglu8BF0oaNl2jDYpCoyYYm8DA6pri7XGmsnzJgVh3XLjaSTeUrc\nX/O4zJAF3U9y0fbfl9SO4brCS5xFSl6qgBRKviz7JBSEdlqF/fY7f/PuU0E/\nG7jI\r\n=Zhq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAjvjXbnd0r275Qx7omj4SlgRgkTy8lKD2AFsf6yFJpAiEAxEdE5pYayQFX84G/is8dgLozG7ODkHdTdm8MvGdRVts="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.329.b31dc48.0_1615502542095_0.23506639787078742"},"_hasShrinkwrap":false},"1.0.15-canary.330.4961b3e.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.330.4961b3e.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"4961b3e9d7533720bb7fdc9c8fda822128bcbf3c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.330.4961b3e.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-3QAsYwbaME7WPx1jAil4pvFsPSTvqycjV+Nd3pPE2Gh1Mo/mWT/zQm0z7Z4YtNdk9EPcdWSM00Pfc7UiSGc7dA==","shasum":"e00719823f853e87785cfc68e362f5738921a538","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.330.4961b3e.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT2qwCRA9TVsSAnZWagAAHOYP/RWrhtb8B0xdXkwNNYxa\nhF+sXs6nTkg1wvHzjXVKTZDOcRwaqb7tZm/xiB2wHK+RGid94wSW6lygJUXc\nW0QSeDDgb31Hp1zj34MUXl2rV5vIgwvsb3fkiJjuqPRGWy69zz/wqgNyheMr\nSd8vsO9U6vu3iqjXAtpJahPykZhzb73ChraZPYYptcZtoEsKHka2PzSc4G32\nkGAm/usVhlTsHsGaxplEn3V6B6/h3TVIhaiiL8GzpfEXSv6n5+7jPb9hIZag\niBvMqRA5yGAvfPUN4/tmPdxpP6twxYid5N8wUifaRxl8H/VKBbpTVa7s9225\nvjPjs69Ikv/CUw6/DR7zz0p0p1ERMvdX+C1xE3bWwtTisGIbaaArl5YAf6YL\nO26Ydjd3eQqxTeHgR0HJxocuBlyzpeJDSPidhELAslb9+QVWAbCzD0xgbT56\nQG54yZ1Q5G0yLmRnXCUHdBMBhk72QsCkKLmmO+VE+IpEPiIqfN17FwzknUi7\nUB2XVv9CNr4O2jq2mWONk1J/bzNkFXt0McjdpIqT4HvCYAQJ9qeZaGSrJqUq\n6L2u7CURx5NBkm2K/B81S5wtfizca3Eb7TSiRMMCAsjSpGIwyrJm1xBYJDZC\njEBiG0qYPtDx5ClM3Fnbv2V7KWUIA2f2AexkwdiY/3SPlk9NGQHn/itOUMkB\nbczO\r\n=zkjh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWOwleccuWJWFMiZCV4N/r/vNIYOgcIQt4zjExfVHwtwIgbsO1UAeOhonnbpJhbmN3ooUYai90Jt1gkxVCPWRcM7I="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.330.4961b3e.0_1615817392123_0.5346082096807028"},"_hasShrinkwrap":false},"1.0.15-canary.331.ad0a6e0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.331.ad0a6e0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ad0a6e072a799944695f590758e1515b5d0f9be7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.331.ad0a6e0.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-7MFHXbwks1mZHlxIKJpDQSD2uMmk6FowVZUEPkEGVqHj82hJiV7iYKZh8hrXcI9hzNw2vfsY4HoBEOWSEP++8Q==","shasum":"5a5acd31db87b4b22544e40ebee7a24c5f47fbf5","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.331.ad0a6e0.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT2rgCRA9TVsSAnZWagAADdAP/jiEAmhXbEr1GM7G8Uii\nOXB5WqO3uhxWkdJbQX4bh5pMWrTmq5OPKLCKyAl1+dEpp/OyyZyx5vqSit2j\nZMB+XbG9wX2IlZivo2TbK/DQ7UJBjLS0m2+OGxXkXMvy11n/d/Bj10J5DZbd\n53lnzxS5xF1ffs12GCdn4jhT4lGdi9vhVKeF6mW5wCN7DRCqqeAoecBIxnXd\nN9cF6eRZFMxdmuIrOZZcaqHke/VkkW9hDUNa5eTyRES7HKcRYAlVxBwSp2x1\n3RG64trhsa5nWRpxE2KrXAofBH6Es0RcfxbHqpS1HLBre8HlIwsoVQH3w8aE\n4/1TVzl08gA3vN42zKAH7GaN8MdhwXQ+VfUNNFK8nAbotPRL/GUOchHph/D/\niriKAPXoIm73f18sp+iDuSXrYoxLG/mRqH2NKSLku2EZwHsNc2z0kiumfBF1\nMvSeuUqDpdwIwvIXdEExY2fyIXSFXQ+hQNAzpAg1lkXCe7jw53pj3O0MNXd4\nvSl5gKPXoAKN9lMTg40V7avkpaay6ahYBjABIpiUB5Kz/OEisMiIudPKwr+i\nmBiQt6+iirLGwMoEOiWsRjL9UzjerNiReZZQuXcmPPKJQIAxxCit3g2DOWtt\nS+FdQGw8glM+Poc4YQeRA4mz6rNlJxMde5C/VHpFZKhuFGDUT+c0ZzIdIhB0\n0oTO\r\n=LVtY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFiIp39Y1TX76f/vOOlmMZaFFjxDKGizyZqQphECWHP2AiBQURw2Lh+UyQMTsJRet8ZiyzTFQGsXw3bDR0CCBeyukw=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.331.ad0a6e0.0_1615817439957_0.2608267048475421"},"_hasShrinkwrap":false},"1.0.15-canary.332.86a35c6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.332.86a35c6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"86a35c6b289b25be4c7fab9e2f6f84d65f8374a3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.332.86a35c6.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-0U8a2gGX5tpnkutpDHNnbpBe3WF/TjTdHlDVduQArON9INh7KMO7eghUD9dRaM4uK+CJiLpzg4+BXaT16G/Buw==","shasum":"c4d43bd6a3992d8bb83049489106ebcc549638f1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.332.86a35c6.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWJ9OCRA9TVsSAnZWagAAKMoP/Rcz5ukv1psjRJGdHB5Z\ndarkE2KLP8oJJBuX1YRA0SVGLn2XK/x/wf8fxFIQY/L4m1m7pBPGimHSXi8s\nzoFi01vVNrtjAbc7NYsdST6YK5cXVkymws17NRAbj00cLctij9KYOqiXH9tE\nY+/O9SdyM1RiD4QQgDeL2RqcZOMbHEXI/gej/OULi+OL7fKtFWh7F0dde3FF\nVUncNgTdHrtlrGq2Sg7NYLU0QnIrp9FAxsIN8AZEdcLgnHx4S8Tl4oDUjka6\niaBA6xvD1mAp+xcx1Y/K5Rivw/sRKtJshjVw1NaxBMO8uxmeIDycrL8TXt5d\neVdh1mvIHc7+odHxsnWUImKLlk2SPQdE2kHzOXu/hm5krA+ln/XyR0DmqPg2\nIQ/s5TM/3/5utfN0hjjkcmGbe741+5COO+aq8gfCD5Ac33f/MPHTblng3LNJ\nMs+gyIhtAi1pNnGRPRA05dGStqo/SmHqgmBMDPeD7zUGVffJvsursuNrEov2\nyfHJkMtL81lM4U0xB5NHoNAIHTDBjMPTwSIdLD+uFnM1xW5VhtoS+nYPX//K\n0rYFncm5odW7hSSLXjHZXs7qrlkHdlb7+EVtJEuf+3nMWgcGmuX0Icaa+Lmm\nWPygE9+UY0uABMYiY46uzeuDfmk0B/AxsB9UIRJeINaGxQKwKnbZBoJD3EjL\nziZS\r\n=IdJf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEwvonIz2mvBllSqgMQiQdKdlOTYuHqyRwfezp/+T5AwIhALuen/C4W6Q/WsYreXUelItaVjLt/yqXfeiWFk8pbFS8"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.332.86a35c6.0_1616420686229_0.30802801058528484"},"_hasShrinkwrap":false},"1.0.15-canary.333.e6b1e29.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.333.e6b1e29.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"e6b1e299c63e66e29a73886d383e5eff37610fcb","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.333.e6b1e29.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-qStYiMFOGjRn9lteS2x2okQKNupV0tUWgmVWuTwZnvQ+CL3onTe03gw6t7D0eGKCsxN7JxrI1Zy889eVDpDhsQ==","shasum":"ea6510491c7642d243ba02e3cf1ea65f3a2c5db8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.333.e6b1e29.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWKCTCRA9TVsSAnZWagAAby4P/R1Jy7zgKruAuSgLaUSS\nram0OThTDHwrAUd/BM5MwEdtmLv8BkbU5WaHg+TwHIylzg0ZrzQWxs81A1zJ\noqxA++/QQT2iKzhGj5xMa1xB+fCLNDaPSbp2Jx8OGWI6oqe5oQNYHreMMR9d\nlEjoremHAX7kvfb+vQpjqMKdY/rbT93BFaImMbdZ4ODI3tqyciIjRMaES6Fw\nyDpODm2VmllNBBdziTTu7yf2SJ23kALYo94xV48QuKlrqIBzo/UldPvz5hl2\nRGxAxbTWML9aT165ToqLbf4wpKWoZXI0PC2/TwvoPK3Lm5h1BQy3VSibDMRV\nFpLmJb3iqkvowsAuyfiBPLhkr++8BVGWcU4mk48AsEty5BOPN7t4ySkz+ohB\n0Y5x/cWEk37qtlctlblX0G4/EZpUAd8UVBooiWmpS6xYqpmpX4+7I7SSFo1t\nyeEkLZGo0QGhEeBF8RFUE3PyiH7/OMtLN3ZitNEYU4uKyRP2k+JhbVSV1Hm+\nJSciy2n3ksEcA/bSKasbApCRmeqvI/1OYEFaPULAv3i6PCpwtqdmV3TeDsnO\nuayC/meG1oHBajOjtZS9+0v3qOjtmgMBEj2uQlvXeGrH82W+KrTLcLxvbXmL\naRC3hWTyEj8292/XvAiBi1euzThE4OUxdqvZJAiQ1Pb5WMVvCsfUYP0jhoU0\nGcVY\r\n=eEPr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfSN2BF0wEdHYPZMazPUZ65IcIqKxriP1BzGNURHoeNAiEA8DcDaqKqfJ6BM8M3XRcUu5untAiCKjiByu4I7kyl6jU="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.333.e6b1e29.0_1616421010943_0.9832632469784173"},"_hasShrinkwrap":false},"1.0.15-canary.334.d66b814.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.334.d66b814.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.4","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"d66b81482cca57b506ef66797e4e174698c50dda","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.334.d66b814.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-+I5/W9Dak/sUSR3IF1b9e0yg2RZdkn/jFgdZA+lOnXyR8S9P2fkr33qzQhq8ITjECZ8pATB+QmHqzfaA02AIBg==","shasum":"4f03d6ec161aa5404310a406f0d77c42a69ada21","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.334.d66b814.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWKC+CRA9TVsSAnZWagAA+1UQAJMDq5cEoYzulBtXfouw\njiCmepiWKGIBWwaBCm5J3vKtxhBlfx22YwIrTxNXBXIxPg+6Jm3r+favz9xG\npZbwV4JcGjvZdnGQ92Ax0GXtvlo0WvqwyFZL7wq4MSRT0dT36YlOE6ekIE4B\nwkJ2uEgzt01bMyBtMNWLAPB+/CsPmQRcWWzhW7NuV/mGVoqGoB8rMUKtGn/A\n9+BQ1YYjPnRNkOkFyR9HFAKpgnEn3FFqU50Rgd40CjRpytd15lJS6P8OtNOm\n1RVK5hq8mVkXk+c5prjmIWOmxDGIz3yhqQhFWFWOvlgGOr0jZP5qhKm727wm\n1VDNWYXWOztgmekB3QNRXD5FzMSz7waPUvXTi8SeoRbeemMqfYYxnl5FKoa1\n26z5+NLvL5Bg716OfpnNaV6Ql1CyJxdGeYnVBULAjR4SKX8gIP0IkMCEkXXB\nbA5KylzkxzWmy/IaujiAKLEicwko7bCntVTsHEGc1ASM3o0ThMbPgj9JFbqu\n5a5rWr9QrA03w4uh39f7E0Y6I0pEX0Bm5yWoQv9XGEAVUVDZGHPPoUdaAWaa\nb5yU4FnRTSMn6Q6bujqutdgZPJST+hSM1Xl0Rq+1ORKWZh7idRomVA+nOJBQ\nA/z6Tcz8lLpIELJUgOv86luKj5iRZRyyzbfE7bINUK/ghFdQsc7Yjk5rxlYl\nGpcE\r\n=tjb4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmOWKwcZ4S8jUG3ip6uMbbd4W01wKBLxjcSmSQmuxI8AiEA87+JQRk03DrN6m37lr4BPoQhgNimh5TIHf2ZBHLKJak="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.334.d66b814.0_1616421053638_0.8194472991396029"},"_hasShrinkwrap":false},"1.0.15-canary.335.26cd0c1.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.335.26cd0c1.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"26cd0c12d55fad4a361b5dc6c09200c4e4141033","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.335.26cd0c1.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-2iVXZtszsJ4aJwugtsY53ZpUeh87Eqf4P9PWf1tXPocdtgtgjzhN9J+0t3ZFOHZfZ+lAp8Ip5w0csbasrcJ78A==","shasum":"c760e3ecba60dfc2cac5947bba6e4cdf3d542785","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.335.26cd0c1.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYe4VCRA9TVsSAnZWagAAxiEP/09laFsGKy/bZwJdX+wQ\nCW7Lu0Em8EZHo26fIqF4bTvNKDH0A0NHqY1ZUjYRfX1SRSxe6TXmB+CpVLzc\nj9ZWYeHLBk1U+2epqQb9tyH9QSo8vpR3/16TeucuTi8Gy+KfKP+BoJ9A1Fmf\nwOiDukNVmhmeznH47SFKE8kWgeMD5g1Q/4A5KgfzZVMDLkc6D+Zgc51gm15K\nmZSFo0kZEXRXdEYEU0yaB8qlZFizExgf5OXnTuImfAl7VptVHYjkhnnaVwNH\nex/FGDb15zDnCay3+7HViOwDAOe+ZeVRMkOUv/JMq87blo8rcANUtTICFu6i\naMP0kvLqrux47gLbcGa7EoWwwBd2L4GSJJc4y7dAk7LmanOLDhoYMSCOG/Mr\nzzLveATry2C/8p0BPedsYQ/7mhhlSkQtMp6Rrx6WLkHaHB52Y7P6VPjZCQeR\nvyEjrDI4muZ8oXEbPPlwRv2CS7q3fRy4eEwz8cN87RpCvtCSjXUfgFNQXCyw\nXn1Y/mJLo/rXloI6CZPNEs4y/H7fvx+X3v6hOCWhn5mw+nV0tyGRVtHa1nRr\ny8AMCHN3a9boQRt+Dooxvow/svq4GA00B+jdwWzWKADvTvu9mMSIbSh7TLYK\nAWmIfIasLQr7ZwQh4S7BPdbZtg5bk2vOqBZCsQ32OI9ZG5BQyI8vwH+CGixQ\n5hZ3\r\n=Bp5R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrWaZkvf+Ndx61Ed1vYOkXKb5jggKADz5MNEpkK9owMAIgMY4bBoUbNS+roDRpLTTU+V5nJscQ5VN663lFZSon1uo="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.335.26cd0c1.0_1617030677354_0.9929654336393188"},"_hasShrinkwrap":false},"1.0.15-canary.336.8dd444c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.336.8dd444c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"8dd444c887c0071c696dfeff3213a8d7b25ae79a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.336.8dd444c.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-9cEQso+MBKoiQXqrK+DP8xDOdyyz/eNflwLK0syn+SVtY/NkECbMHdl8ZVswJWkCpop6rxhSeEV+dYNFir3Mbg==","shasum":"a1e1b13a21193baeef61b431e8fd26f45f679189","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.336.8dd444c.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYfAPCRA9TVsSAnZWagAAoysP/10AC09vUBAKBBujGnfV\n7dGQBk6XwSZ+76qIS29boMSssZkd1W7q3LlIe0wh3HzUqsRUPWsErCYzTP0X\n7zuKdI3M84GdeaENpGCXZ7jMCfvXmBP69PJBEeYts4huzVURjes8MjZD8Dpz\nRLCoo4Xw2kAHqMYz6Ig1jbOv/wuEhpHfiMkot+wu0Hbrj14OEg073I4VL8tJ\n2Z3HGeJTU4AELXeyZtb82FbFXSeLmHk6HZNuN8P2pHcm3bGINttDY1O9969p\nNDZZpNF3wGjYRdMw+d3x9VM59bK7B8YTtvW93Gjb6JMN/uKGGaPKCUIHPJF6\n3Zoty1+28x8srtwK3ZBkoeQLpGWq2ZuzWTMtuq8hrDFblcdHw80vrv8ufmbZ\nAY0NvE1k+xCtatN/d4k0wTXW4vcCcFeS2saf9gEbAT2LFQC2OQl5+Li/wDji\nsWEk8BLw3tw1OVolrDhmassKcQnEcsUq3fq9UUWzcDmC8TQE3QEhbijUgvfj\niZrkw26vJyqf6JN1Zb9F0OBzk4jl2ZD5USMeoaHLzcDE0T4mDSfiGo2RZoWY\n9kx0zXvpGXG7IZ1Y/KOdz6OXGcEyiZvTMYAMRmMXpy67IstbTaEG24edgMfG\nZ/eKjSYgQYWXJK1JkfRPtNHI4xyKpOmaHhrPSUlNyTNXtrlTfg6ejWRSmAl5\nU+fC\r\n=G0iz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvfpBDgxlqMCR/IkcnLkWHtI338kBbFM3g2nG1n48I8gIhALzLlyNaf7Aczq9BWa8Up7wNBmRC8zNw3tHIhx4cf33J"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.336.8dd444c.0_1617031182698_0.40810183901187225"},"_hasShrinkwrap":false},"1.0.15-canary.337.d3c8d9c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.337.d3c8d9c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"d3c8d9c4068a0385e1056b233ea91f57b175882a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.337.d3c8d9c.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-+xlXJc/1Yca5DQ0bTM/AOAzUn9GlvxQTlXNjx/EYUfvefNzGqmn/n/6MOljybk5c7CTJutZZAUKeoOxjcfpbug==","shasum":"3e2e19095059b23d3925e6fa2a517bb031e27aef","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.337.d3c8d9c.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaxEdCRA9TVsSAnZWagAA+w8QAJLoBN20DhlBojwy3yN/\nmKRoFFmGA92Yhq7gojyk3pTJSHFACo4we/VKhTJxev7Ef+Cyebx/3iqUDNVx\nn/KNP35pszw2725FtMo2UIEeXVQSVWuP5lA6aSARfkdWT6ES+HmWsuP3wlS1\nDzcsAQqh0R4iLLH641cxtT1INZABiFMJnkFxD9EemdsaGAUglNbKGbGfHQCR\nG0JgVsvZBKVZnWl4KIic8rymIAnmpkic3Or67MN4Fmjitxl5tA2X59ncVZdK\nQDsMRMa9D0xCNGwIRhVQvr3gYGuQ7PRe7O3IK5uOaFqjma7cegIuIir8SqdS\nK8Evbm4ozPaBwS0phliDbaxCrQdcMy609pCrhZdBrcEL15sIvOIvkNxLAuOr\nKK5vaCuCgE+uara1BQ+dt11MCdntHU1kW9GsNtw64MV3fZVZoqiyKBP13FLJ\nHwK808ORKuYwL3LleZSxhF2z4RC+4KnrIcX5ootGCb/dk7K2ei1dB0+vMOxD\ncjV6jQ7PSmMZWdOHDixqzniLhGqXh5IQHFdMRtdMAyWFRpvlXGqXj9tJHyta\nl3yjMkfwkEYmkgn63vuGPjR7Rk92EBYaEY1J86men8CW1kPVo5aJh4rUN6nt\nfYvQvBtVmo181Yr4NyxkqEJbB9rR2/z1A4qWjEbCIwm9HTWU9+geMI6TYzyi\nq6a0\r\n=IK96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQtxseiUE4TFZEtWb1gM29NAgQkvqFavw66ckchXOLRAiBllFZjqpbOJYHAvpWShbjBLS57j/8GjUqtiIWsCCZMUA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.337.d3c8d9c.0_1617629468571_0.6561470669440368"},"_hasShrinkwrap":false},"1.0.15-canary.338.a873f8d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.338.a873f8d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"a873f8d1f47bd514924a1715f01402a00fe8a33f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.338.a873f8d.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-16luOdZ9+34n5POQEhheOX/XkoSkLuIMHgLRtURH2OKwN2M0/EbOlPnXHlNgkjKR5QxOxTsOvu8WikZXVpKQFQ==","shasum":"abf8bdfd99be4ee9775359f66d877fc85019e38f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.338.a873f8d.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaxMDCRA9TVsSAnZWagAAxoUP/ifDKrSvU9ootu5ioK2Y\nqroYGGo4jyYpOyonKuKemvDXu5gEtUOoy6NO44/4EDwywiNUVD7JGNWQDj9z\n0YfhEasG56Sz63qGFkT/RKeDT0MptuTjC+hmYl2uiNGcQaCrDsjxVlYoO45o\nwSpJjsaLgHqawyegbBk5g/SBNIW8Vwh07mi0yvGm8/AHPwdBlNQ9iHw0dcLp\n0y22lAHOdK69AbrE/SET142i+nFQwhmt7aGDwRD9czatlEfIP38UYxF72f4z\nR37fiuGOJcU9ubRx+PhxxLt80cpNHHGzO0iagjsV7XKXAptzWIM6I0V1z5Xb\nWSyarPGL1FMk2edB1/DQ/tln6gCNSAMbtead8yPsrWZIQbzlHKvl0XAnTvqJ\ndnyDiOE2z0riSvFEloU+mbUeq3eqP30UjllZW733sSltqEnbznY0jDtKzvKv\nGvblcmD0qFfIG33M4wcpnY8kLy0Legysju6R9eTCeoxxoP66glGg37OTjtRL\nPr7kc5d1GOrUCzCnYWgZqdCCGe3cE6m2wyqKZIl9QmjV0xKIGN+kzcicvOh5\nznAcBnL0q0ZCj+nQY5NSK9CZe/Lexye/XlDkv56hz7D5O6atdPqd/Zd2/EP9\nnXGi0+aS/uO7762JJGGZgm9kXvxVWB+v/SbE+mylyfkfKlF8CYFA8t6sfDMV\nwNgh\r\n=Q+Fa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXulZvyN5LpcyNyh5s8xMwtz0EKp5mhDc46QY9kf/daAiEArDl2S2VWEJY3ZARyGU8UQ6v/wjiuCdjG9czdZfxMUgQ="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.338.a873f8d.0_1617629954523_0.12007710526940807"},"_hasShrinkwrap":false},"1.0.15-canary.339.7d948fb.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.339.7d948fb.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.5","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"7d948fbe3daaad1a66bfbbef12b101e21f4d30db","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.339.7d948fb.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-fXeWkvl4qv/QYJrJCEad1uCf8CkEcxwkJlcRhAG3niWNq6Ed/b4SYaEx0YKl9C1petEJ4Vb/164HQjpiu1cfgw==","shasum":"4d4cb175a1c6315ef1b446d3adfde91c65264cbe","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.339.7d948fb.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaxSkCRA9TVsSAnZWagAAWkIP/3GwwIRiVNV2EaH/ahHB\nkEWAL+FfZsFpGwg1yi0ay3PypizvNNbAzf3Q6FEp8ChKe2RycoCcAQatmDcv\nvMvA6AoR2iS4ck9uCsXL0VV2lH0bmLvx38LGpFqdmhkXgK+y/woROZujOWQA\n4TTbSoyD1CZHUs8qvTt6xCKGoQVwu/O1TrMt8jeZTbWpAD9SKHkm4qZNcCZ9\n4jMAoFjCMgAlCiCaPStv+8Sd4995J6c8fT+prl/Fxs2ZDo4L0DHbw6GkkGgC\nSmjduQd13n5mQSaPGXKBqzfteLpiyxyIrbDRGPgKx4DgH6BE1tyJSrEt9Qd2\nyGhIC1Tm9lGIXHm61MSSPyM0tbznna6jwMXq/h/njcjc2xfsBPMbKDDS10ao\n7D7LY7bCo9jAm03T2lXduYjirxeGC7MtP4hkdvzzOweCeMkJYjC7wTm1F1TC\n43l6oBCuaAuQlDgL81ue1VP1xXpX8q3qiPrDyS47nytbD8Voykt0411ZnsyU\nVj0f9cFMNso7hAaVojk2zq9csg7adnMEh4VaVF4SzFjKyzAndCBOlyhnQG9d\nEX+vINWpNPIR7Z+ZB8nECQirQ4nZJUdO/BynXh80S+EMX3E7qUJbKL2PrNWW\n5qNMWTTIGSNb0yQNSlCeCqU/iQOEK/79Zen5S696VzE5Z1zZx9kzjXh6qaWc\nXAp/\r\n=OSPp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvx57/Wh8iYl4Jq8gTd1hY5xXWct8Ytl+Mys1e60cg9gIgPwwmOrg6+zk3TzPdLii1e9YuaLGWpG5sAgiHIQwdqDs="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.339.7d948fb.0_1617630372124_0.8892127499172986"},"_hasShrinkwrap":false},"1.0.15-canary.340.3d55d26.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.340.3d55d26.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"3d55d26d662b29d4c69ee79287db648b48fc93ba","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.340.3d55d26.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.20.2/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-XSZM3GnHg1+Z0KAQqwJyXLx1Tf3jhcoTCx9lxnJdVJofmnPkIiRjsF7s8WyWRdNvr0GGY13RUrResX+kPyJBFw==","shasum":"76c25616daaa9299f94f6dcb443d41d31f001f0a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.340.3d55d26.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaxeVCRA9TVsSAnZWagAAa7IP/RwNjdcDmWvtEHjw+fzW\nwCIQS7hpcgZI84oS1m1Vg88JCtV+P8mVQvkSiD8W2e1BpdtIKEOxGibkEyu1\nTgCPnYSE06fBOe1ufhNiWjhtzwCKpL8GfL2eR1Gz9fYC2oYqt7sihhSODHBp\nI2gWFYWyfBXM1ZJ8SFY3yliVcUu01Mfl5rToXhjioT81DajtKgID6s8x3CXl\nM/IYBV4jvqincC4PbSgXcpKp9uueQ5MXvdlfIaIv5AUrMVN82p6rjO3PvTkK\nO5bsWuBohjPRaNcB2j9QA1LyF08mlZAG+g8A8h/7cm8ccUpkVJrAq46ZvKo+\noypSjgeP5CdY+m896I8ConHOBx1mQaEj8HQKBGA0/FSRwxGMmBa5/Y+wrQ4e\nhVzhF7E0zSnQP3iyd2qITKs0GQbu9gXcCdxYJdYpe3FB/ImG9AZnb1C0dYU2\nxUKBEpWSRwuBQCKxkZR05qGALLe1+Xj+hMoX1bueTgis80YLsUfh+75M/z43\nsgJ5+CYWu68h764SvoxGrnLsQ+B1wxDghatS7bbytx6ZKvtLJf1gfgbhyyDw\noQ2OqiFFSu3sgIjc1WNa2+La4JgEHZ7Y8k7GwjGmHvHiXZYVlqjBCJzlRUfG\nGJa4WevlU+wPGwlRzv1C+wfKKOhd5Ng8/SJbYtXKmN2zTmO4owgSAu677fC/\nC4Lf\r\n=8wJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBy3YsQhtoF485D2XhTfMV+OBfJ34XbQT8JJMPZ2kVwrAiEA7QxCt8oFhZgRzDqQIqgwu8XlrDuWt3IOZLwirOFVHNY="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.340.3d55d26.0_1617631124963_0.1639910871702983"},"_hasShrinkwrap":false},"1.0.15-canary.341.ab49e4b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.341.ab49e4b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ab49e4b564fe1abab5dce140d97fb11a53c664cb","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.341.ab49e4b.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.20.2/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-aq5ZXjWcyZvtQbJWOG6WIKOJrUgtTVEbrah04VTdXGmS0FMsuxNmB2ySpLMUhlVbsnb1oVd5SXUvlyNEydKzpQ==","shasum":"d3a8a835fa9069fc916fa0fdbe8890b59e9685bf","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.341.ab49e4b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdFC6CRA9TVsSAnZWagAAS1AP/2SK1fanGGjz48mjZ8Dd\nN71jpbcZ8wloKIxqX08DCz5/e/F7kCzoR3SSg2l1JzdQciYE/hNmserVURZ3\nqrDe2IoKbqr4o3xeREMo5FmLNmu2I+a2WKK5YlZrzgaU91UfXQSTu0kxrrtF\nHksfGU7nf5R06fzcU5CqQnUjVj5wZlCY4GDZchAPG7v4Sb2zQvJX8ojNBpeW\nbZy0tO605aa8PUZZ1wpZkNQ+avQ7JrLWEzTBg0lhIlliMTW6XWNyO9jL34nM\n7+wjWS5WIrC/WIcfUqr9Q6aNccINgeZJ3zGClntKc+8ds5KLkvNJwdI1MZbK\nMbcQUaJ88x9JmMZoFdv9ruN/lYhB4nD++RJmRoXsaLi9ZQcWZg9ON961FnsB\nq3hO0f4sgAvNrJ2cFu29J8VjPIPwhNhi/jNgOQvFis34i3tPfC1hhqGwc72G\nucrygCqMrmtZMSpMvpEpLYLjzjCQQeT/i92D9NHDm9F8EOxoZOSJS5auNdTH\nDKI7wIk12bm0Gc9ZTMxZ54GkGKOekYlPcqxOnPB4Pbt2OoqixyFi916YOUV3\nqPOC8wpGyOzXXo++yk2rDsHYXOWs5dXwESKLrubO1CUqcZhJrffr3D3V2aqZ\n293lcW/8hxWHQS7Z4sNWYLMiu7hldg8aTjgHb68EW8gWXosrIbzeFKamhuNG\nel8q\r\n=aq+o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMI5+G6ZQsBEtid47z4TEcQ4S57Zh7crl+R1foEzqNKwIhAPpl0xZqo35zca1D6ga4t3QdOwFkvGITw+vpAFA43Ag7"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.341.ab49e4b.0_1618235577578_0.6698363722515785"},"_hasShrinkwrap":false},"1.0.15-canary.342.972f7fe.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.342.972f7fe.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"2.0.2","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"972f7fec0fb9eaf84ba84abe45c6230da3795569","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.342.972f7fe.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.20.2/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-O8Rwzn/swydTPem8oX/FHXga3ecwIpBuJuLWJ3RtrtGt1By+VqTasB7Y2twUu4xzCY/33z1ypphCliYCfVVKyw==","shasum":"16e2a0c3aabcee7e67ec7801f89a1c4e9cae8d67","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.342.972f7fe.0.tgz","fileCount":171,"unpackedSize":2492958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdFIdCRA9TVsSAnZWagAAQzUP/393AgdoNxaIycMLTgX+\nHqHyaYMjElAuO9DLZAxhf0DP9vCnyyjpUqlmSqWyqnpqr+PNxOiSytUARUwc\n48k6YKw4BfBupoYPV4/nX+ZmWkrC8nHZBth3CvcECyqnAEKo/OsyMWuns7+m\n/OdIyB9dhBiRDmwf4KugwdFJTHFINFfHmWnsKdTpbj+MqxzX5X2bi7SIQOZk\n2S7tYOeI7dDZFRQPuGiHYpBva8YXIDhMRoC+8ZSGcrpxZ1h2JX9wLRyR7/Ng\ndkbuDVN0mXdZCAUR6/NfQSIpFF3BaKY9/rwbbr4hffgC6I94uJn5p5M7TPid\nTMCqJSKCvkJ1IFa+gza8d6wNKxu2BWtJpOsjAWahVZhrlKsF+xL1jYUcWuOc\nez2yAyhxudePkNRbU4A9pN0NG1oN+UavBqTP6c8Fgs5RLqDZWzddswyrswVL\ndPpqps5hWuNplH+0gyga3KqOnZjks9Qx3m9UBBnn2gxC40wXywB37jIA1uPL\nMMHdzBV+PgBba4MlnQAXF1PRAriRFHv7t7eHX3DBVfDdPSVSUq9cI/9G0OGs\nqbyF8VaCz7Gao9s6gUyjhicscmE9/bk3A3OglJZKweEc13tt2+Mc5Dn7IqBB\n72rrUCql3M9y6U+WNn6PV3elov2iTyMAc7YFjaOGf99IPwpNfEzoMrGCAiC1\nLMXx\r\n=RL1K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBF43pEfJKPL8lNAayUoPkIbWJAtK2xMaA5aoAthSZIwAiEAjOTrnP0QDo46RA2DEmClJrOOeFMqwuS9kRLlFSElMBw="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.342.972f7fe.0_1618235933297_0.5486064267377411"},"_hasShrinkwrap":false},"1.0.15-canary.343.0238c10.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.343.0238c10.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"0238c1019d529e89ed5c08d809b27b336934e913","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.343.0238c10.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ZBOabJCABVsLHxoRQfph87BgNQskFPyCGh8VlbdbI3x57qhk1ivY26sAbRB1Q87dWx4u9fBL19ql/VwYnap8lg==","shasum":"73a70f73b44d754bcf67a673777cadae40bc4b88","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.343.0238c10.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgehCHCRA9TVsSAnZWagAA1tsP/REarD8AJm0ZJdoVSH0P\nr83ofVzo9bhExdizrLNZbxN0/k7TR2TzHj3wvraiNJmUSO81ijzk6a2kPXgg\nzfyegW4WDHTLKb1qfbZeO2MR4zSMU4JbAdoEc14Dc4QWjPh4sMbewSV+14Mw\n+aD2kW0RPJVEH66v8hxWQFpIoM+rIxisJg2gBCOCXOxX2huj2O0iyRk3BmqU\n52POZ9lcjX6lYo/HUz2puxKKK+t3VEXkadIeo43XsXZsG/Zyo+a6IPgmLwUK\nGRG6FbqzMnnz8hF6nPa0VtfdJiV6MF+PBqZQNCN66xWfrDGuhmfRsRWvazEH\nTdHURk/9ambJpB4qsXFtSpyAARvQ3NA9/QEuVK0OEz0Sc8PFOZFunM5WngqF\ndd/9DK4+9RsM6WCFnmcDzBMQKYHbQaZxzrfhe/b5BM2lxQiCN7Ybem5LbRxC\n1yFY0maySz7KaNZCqDilDbmuwMZdCBrzl9pyST1vpMUKCRWfVI0veaPAV9Ju\n0Inkfub481gktd2UJURjkk46l7tZwkeP7O1jSFzuivkCl0wWWVcHVt3+c5yE\nbPXJAyEsJ3x2OOKzDrJowTZfrJICqwhzgK/3tLyYBf/UeMaRPz0rQ9aRHMXb\n3zj5s0JalsJsKhy8tBiLr/O4tp14gv1JFJcAYmlPdDKYSBsxQYu9cniaJaXB\nyJWn\r\n=bgdY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/EGc3PS8xjlQ28eQHd2WgUuj6CacbjqwS9vEYw5zpNQIhAM7p0bbw0gtqHlUeBEqIa4pOIHIppMZR99kFt/wrbtUY"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.343.0238c10.0_1618612358393_0.562968666795483"},"_hasShrinkwrap":false},"1.0.15-canary.344.a73051f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.344.a73051f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"a73051f4cbd1828281702113095b9c4e3ec14467","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.344.a73051f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-d3iqIW1Y73BFdXKNSY6XRxjxN1E83A+tSxbSJnyP1L/+vCsBdK11hIcpBJ21nj6qdO9hYiJvdbPk3xHQ45qQmg==","shasum":"efb2a5ae0bae4d76ecc42f02b1ca6ba265543a1c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.344.a73051f.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHtuCRA9TVsSAnZWagAA9osQAKLiCp20g+SuPR297x86\nllzqyF8C3n5NqeRaVSznqI0NhPXOc12WTtdAYq5qAV3T+VMGouMb/VPVQfRd\nevElnTdpK3wnhryNu4cNmQV4XhA3COTNf6P8bslkgGiKu21f6GMmtb8mNRn3\n9wlQyzO+/Ter5l+FeU4yKxUW5QI9B8BhCkZ69ULMzdG/FWoDXLXm5giUM0uA\nrOuAfHhXVvEcSHEUhoZdCuHTKutSzy6mFQ+nZhIIraORcBDk3dIdcMWUjD8D\nHc82PBLhfL6j1LS4ozebE7dRJZ6BHb8f54BBbDBbjI5nyw+L5uYyxepjmkbu\nKC2Wfa6M7wPb6pp0Sk1FrH22zwE3ID+2EZg43eZLXlDpc9rV5bTxogWeGQaL\nEAqUETtnYHMreyFVHzw9rGhPzfz8FjDNgLr6HQhz2KFxv0DCpVrSwetCfmLO\nL5XWJnxDG15Kc1Q2nBqhzXaH9Rks3knpUgmdjWgry6+t0nfgRrv+oLW7o9+w\nC2wYbGZ6W1iXPx1gbVIpswAPtwzFFAkGoELMul+8EzkCmH8fkHpODL/veL59\n1cB2snNcvzh1w+TbgQmlKM1COo4uMnyg7jMWojdjVupgXa3fAKANBJPe1Xr3\nPsJc1h28HhJ6PCrmYKFSBAfQKIQXL6pMqjPc39XcuP0g5TlarBitTWM0HDO8\nCv+U\r\n=8qb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1MDyoUZ1XV2ScE69oillI2aQqN+K4NC787lta0/ZCzAiEAquO+WE7Y24AQQXr5Mgone1WE32z9aiikwtkmlr0ohgI="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.344.a73051f.0_1619557229712_0.6097182444795244"},"_hasShrinkwrap":false},"1.0.15-canary.345.f884dd7.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.345.f884dd7.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"f884dd7177dc75798dd5a4eaed3f2c880a725937","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.345.f884dd7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-SjxQ7cefCzFg3+j1oXrsw+TTu0iGp4iNs/tSk6hHez685l4EMBrc03e8L4pu5CL7BdIPZYu2yukja7z8mPtsEw==","shasum":"48fad7e71312c647e51cd65a80e8fd1c6c7b487f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.345.f884dd7.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHt7CRA9TVsSAnZWagAABMoQAJ6ZMQNMDlV7XwjFw6xN\n1kiCdQxcybfyXI4jcm1Z7wU1fLp/KksrDkPBYmuqtqkbKzrACTbq5zHqpd/g\nHkq5EraSfgQwR5msxkb7h4P4ddcEacpzdMAqhR6hDGzKh68YA5STq9hJ//G1\npXwKQTAtfD8tGO/uge5QbpuqJijRmMgGzsnTAZmOoRIse0xdQdou2l4OdaX0\n1hg9dKe9UqDi+YBWzGoZMagAh3p1KgIPJ2MPdk+l1GmUfGQXaf0tj3TF8HIA\nKp7x87zc6IWSmI2mjx2/lW7S3a4/Yczy/jWSxBWfBLt9tS0vZaOti1dBlijH\nkAaKaVs9TaEq8o5MWlNTa3e6WSIFtlCfWDwrtidqH8w6MZMqqhgjUXEYKL2L\nk1AOfzD+FrMvYbIL/vb0t9VfatuxtNn+sgDdgutlF34U0ZTERtY1DWLzQRVa\nEzDIxPFE2W3r5lMU+ruIqU49phromGf92Z7QFd5WCzd4DOsPXrqmbfuBg2Tu\nD58as3MZZN6/xCR9ym7jg8b3SzYi4/BEt0vl2cTYaLQ5CYgRdHYKgNnLEbc0\nwKl8dc6pAAxFxbyLELZjsnWRl7Ovn1qtmxmeScjoZin/hRrifbUEDAy63sNn\nkVORu/oQIh0Yu1r5tGMkuXYSuU3Zv4pAYXSKob8RDXrFsiwfo1wyXwXUjKpW\nhDoB\r\n=BVPb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCeDhBlvu92WzVBxMwuBcXR4HbGqcvA3X2LJi2Im9VfwIgHWbOcxuxwjYTuO3JbslRZs1IFFrWfRrewSSiy/KlVCw="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.345.f884dd7.0_1619557243366_0.12077430475525652"},"_hasShrinkwrap":false},"1.0.15-canary.346.180d75b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.346.180d75b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.6","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"180d75bb372edd60de2c5b3aceffba19d03c5bbd","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.346.180d75b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Kzqow8DqyboA0o0SuEdVhVvQ8JhcVhsgI55i/rpNlmUDe7XlOg8ZxPAN99C1VkHlM1gb4ip7CMReKAhzj6xuTA==","shasum":"aa7329081d7b2f7b11f3fb611c0b397bd9499473","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.346.180d75b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHuNCRA9TVsSAnZWagAANc8P/1ONSc+OI0dsps564HR8\n3/raJJsTevNv3frZAyPT8SWTIarSHXpc9C+GnbPAXVuxBr9YGF12J4TT/b2k\nGonJFfnlKXnfs6E6Bd5gbYMgxe6dIaTavvzfUbugfdvdP0JB+Jw1bFUDOufp\n9lLHKKTtqGcHUsG8pvNrnUBcXsRZcao7USKdqTv2tNRJL165ugArhij0IKDv\n1IkyE8Ofk74+1wfBGNpdnTe4UGTj40Yj0K5jk9pe2ODlsKodm5m2ZfSE3M9I\n060f6WzHL+JJcqSbnQwnEYR8RehoI2Xr+FOwZP/5q1+YthK9/ZE+zdmN6Zud\ne19T5x3Xl00Ib8SPx+2HZ0dDvOQWq+ytB2t/2OK1Vl14IEQOwFENcDDoy6wE\n3Ar3koSxsisYSD4ThgZQ8QbOEQWvLtB5H45qMW9dD15dPgNDPH43ljvYJ+mT\n9Z/MfMym8bkJ6W0A4jL1CGlH2MG28/NtREIHg9jnOUFwvVSmBdAY1rBOl0uW\n7ZEMtueC7DVbdisMA162pcMx/G8gMAI1II78lNeoSXs4QYRMdUZPp/naaQjY\n7BfWluLhaxY7xgYfIIyZGSnNQKMa2NsiiUXtNH3cmpLWVRClmcgs8/i4K288\nHNfauhQX/+ST1Puak0J20ViflpP+2oXYo6OKwctNppqXSvjCGOjlWZwld95O\n4diL\r\n=gAzS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIdf9i9m855rBV5S8ksXc95CzpWI8A/rOkbt1B3MWIiQIhAP8h/TRhS8nzWjGRLbrQGxjJVauDo+dXNRWrj+WK3Oqq"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.346.180d75b.0_1619557260696_0.2643286331228547"},"_hasShrinkwrap":false},"1.0.15-canary.347.8ec6c88.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.347.8ec6c88.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"8ec6c88c0389061ef8f541d496f3b70bff9eee4a","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.347.8ec6c88.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-jWgcww6wTdbHHnVkwkWirf6cenT88Ewsm+EwoILCEzX5syCQCit5X2dKvaP8+8nzlDbPEoTiGzeQw8tnmM2sbA==","shasum":"20bea614f070c9ee8f686ad961c086803367031d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.347.8ec6c88.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHvgCRA9TVsSAnZWagAAVIUP/RFx0pHNPjKIK/XPnvcT\nwA3GfJuPdH9OwT/N57IpdFMTtGrsJs0MaYZ7E+u1Bo1FU66Qfkl+T4D1zi80\niy9COkDIw77SsOCEU4o3ITlXXzLg0+iTUUfzUVhSYMOPfNqAEKLljY3t5XTa\nUHHFffPA2fthomGPJpWISWa83VcLxI26XDdW76KupKDeN1CMauGuQb9wP6yF\ncnwnoHwgvvkJoFmSFIcp/N2DkXTT+JbJyJB0FhV/AZLdQQjEVJwEjdioce5j\n46rquAbtVEGvcrJleJnr3BalF1zn993Sc/UoXr1mH7wSRaaw+6iww4fOua7/\n12qcyby4ZtsSfOG7JQkoCJW5NBgW7tmAxxLoji0N5e/QWXgBATEfIvlqrZYW\nJu7wmJYTr6v1P7MUfF5f9QZqekVeC0NxFYvZTuJPHktLuFAy3/jHx1zGRqMc\nFYVz43Pb2Hkq+v2PlF5mxujwAzd5oAolTKPeSTgK8Kc6ms+lJiSCjrH1RYUn\n2k4YnvsJncgfU47VRqFSvUw8ff7CYkDIB/0Nn+FE6DtY+su+dS3vylihGsja\nL7ANBCFtapxninbXlf44HNXja6cow/+g6gUi6IqebgNUwVjYYxwX6MlY7KRA\nAyAktMUcz2JcOVZLFuvtYUl9QVhEM9aN9XrCu6TNE2vZk0ddgc93JVxKl1H7\nVZAj\r\n=iMs+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTYQ+jX/6bVlOsMGTar8zwMKBkrRq5BULPNOThs6fJyQIgT22H34tZCVz5AwSY+QI5kIeCU0nutbEGQq1oynyvorw="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.347.8ec6c88.0_1619557343653_0.06828866117936183"},"_hasShrinkwrap":false},"1.0.15-canary.348.daa48b2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.348.daa48b2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"daa48b21e9bc3b39f036c40b034a0b3d97666f2f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.348.daa48b2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-07MU1RxNNhMuIHLg1f0K9hAX/lVBry04pr/Ds2PmnmW2YSC/ibLswGJJcoLn9fI8CjbZz1pqcsBQiEDJdWVJUg==","shasum":"a48802a72f030045bc7058ef7ec0f46db016a782","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.348.daa48b2.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgid8OCRA9TVsSAnZWagAAWW8P/3yuzzlUTKxbqRpVjSDK\nAhsWv3T8T+rwLn7zA7teR1JHSfiuRK5e1j9PKS497JPhRF2YMRMXcSVnusRH\ntPEVgTgRaFO6IXvELuZdtDPsjIV1e9llhhw/PsWTXJeCw41DcXeUssMMQXOp\nP6sKjESCHOeFYUsBrVA1RBHbam1d3uViXi7dwQylThWpFK5npM02uJ0d7Zfe\nNOD8cbKua0XLcdIAqNtKDkiWEEKZzLIsWa1eR73HhrZV4IIMP3VubPii5dug\nXx8v1evKJHSluCTvD3QKLLQJCBbCO37vnhgGfJIw5rhqlv89nQeKjHLVeezi\nQxOZpCPJW+BUmsFqpf1QKYRRQBt0HT9+KemrbaeIN647h69DHcT+RDW6f8J9\ngeeEXorxyDrcMpAjzcZQNO3ny9MPzoeLptOZlNmpG3Y+3DhMN7mDPZKeeC8c\n7j7pVrgF53YG5/RkwkJfPWwkadgmo8yJi+OikZwS8kVCNn5yaWMEo7CyFPn5\n0vm2vjm8SQMIyU33ET1X3SYcbX5JsUQHBljiQZUQObSkBvHYacXd2K7n2vXT\nsN/xRGCRyhp8+efIBHLf+eLkdtt5yfFpuO8Mu/ib3QuPz9slPG8Obhu3HU4E\nAuLOWVAYcmX035aeHoWgBanZAzEMsVnGYbnhPWNMZK5La75/c1Ny+gpY3Sfe\nI+Mm\r\n=VStk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzqlLiR671/EpUlKYUXBr6TQmLttpWEr/9f4cfBys5fAiEAsBDthrEaJyDf+zmntGRQ4ASM89cI5Ut4hGSLO1Z0RJk="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.348.daa48b2.0_1619648270281_0.7722683869043785"},"_hasShrinkwrap":false},"1.0.15-canary.349.d3f9ed6.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.349.d3f9ed6.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"d3f9ed63952f9e4bb1ff7a0a00dcbfad74bce5e5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.349.d3f9ed6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-r2kwqq6iBhLfK0P0gTPhZUQAae9QqSGcmNKv76kD2UuWO10SywOwW2VmW6hcKDbNPmlMBgtChna4M90vUb2HaA==","shasum":"c340f3adc4e4a4612bc9513f034ca41988900a5c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.349.d3f9ed6.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgj/qwCRA9TVsSAnZWagAAE3EP+gNpiJNGGP+t1VOqBVpK\n5ilmY1OFZwvm3Aq5m89J4PT+JuYyfx41iG/xdkAkj5oWm1htIc4ok9YsQemI\nh+5TWsmZRCIk/Moit1IaRpKRhfWT/SgDAlx36QQsWnEaG/jzHWeRk5nUwhn5\nLrxWbE4NY4ReanWVNcvJ9JghNFBiWl237vjuCn83RkBkgJjQNE62dUFJPmVD\nJ4CHvuCebXbQBXhnLzCaXetLYfdiLuNDA9GDK5cy8u7aOpYUZzqtVMxXMQhw\nds2Ql1MzCuHnjiixW6l92DBhc5dGLlJAJzXtE7OCRx2buQX/5RqafFLB52yn\nb0oWqy6l6feD7ovNxjtemG0wLNFgF0gdXna1Oz874uETHxBLREXr0544O2Ol\nq9e0EAqA9Jnb/16zZbn+LfpIubKnCnXSXm+K4JXh7JCgCo7kK2GwqTvcVYeC\nP1Ef0F5oScXsnFqfoaBv2Yr0ff83kvQlGaB53Z+q0JpYgYphaHy19wSIL6HA\nRL5Co37owX1aeRQGh6ovYstVjqol9cpBaui4mmM38WULzuDkEyeJNMgcIDvh\nTqxqnK0Ohmc0Vl1wkbhoyxHAszpIzpPJAqY9ekBRIFabKu1QYl3SYpPCfY8w\n2MHfNPwwAigSAazEzkL6w/3ol2fJ8uGkeirXiN7HaDk8LqibdNDCt5pGpVXK\nWWaB\r\n=0q/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG32Y2vQJetEx/LXzxu4RYov2k7VCJgmYMtbOeCwW16yAiAo5YeXDXGG3mQYE5uz64XJTsk1g7hzkuIGOeZoHkDw0A=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.349.d3f9ed6.0_1620048559668_0.15137126610847962"},"_hasShrinkwrap":false},"1.0.15-canary.350.5d46234.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.350.5d46234.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"5d462341f878ee248df8a00b1fb7f890d4a71312","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.350.5d46234.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-LKO/1GEHNIIoM7UoLVlokXaxRT51H8hXgua4KvEyHM7EA03jF0IoEqby/mm0P9OHc1LXGHnbkhrtrBnP+39Rnw==","shasum":"0eaa16be1bee13923558d5034cfa70dbab2d1f5c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.350.5d46234.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgj/73CRA9TVsSAnZWagAAdOIP/1rtyHuouNV4D8WkxXyr\nLq2K+KTB9+wcWvJmajEv9TFZIZLmOmJkjR52hd4gcJSq9Nxlu6AyvorORVMY\nc0ujJNTocj3fGB2pPe0CTUjLSGJIxa6B4QMojp7MumZPGhj/oNFKLKa0eWbg\nccbRrz7Dnu6cGrqc9bC7UpTop8JK3C8vDGt33NEn9WJHbzlOTbzVrP+2gWwb\n88xL+hNL6zGemqw+UtiH8/Xphf5KFzZyBHmvnWwAT8BooDLeabZzr7FOdIt5\nT+K5+hlfYI+OLJBBhmHSHm500FirO+/JJjlmuEMgu364vgNmSjRp8MSRuyJ1\nrRUMA1mZcDl0lGvLafgiPZwlt+APVbUbgzMOncVyvpam1v3A8ZgZzuHyZ4qb\nMFCjYsllr9knKPcl70jTGDf6u1Jpz8pDmYSrmfbix6NH2K9cJVTOrZrNn9D8\nmG3Ysz6eucuJbCf6MNZN1ec/WHfta2MBNqyInhx5eT6vhFFyMFHOmrKtxoEw\nNzJ8cgfoxRz8U50Rqd+ggv6AXCfjvo2E+RdiXwy66J3eWFU0cfWiz/iwIddq\nmgJXltUnliiBvDRf3au1UElJ+u0YgOzAccciKqeXM9cxff48Utf9u5EIJtI7\nmiFEX8dMIp98GbRE0lcMkGENkc9oqwdSQH1YTk2eEtqomV/LB5jg9PXnzXwX\nnjbj\r\n=zcDz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7VQWuvIl20xR0sdFRdSp/olJNdqad9DvP4SoshaEz5AiBp9GJ1ynC8kSeW2SEM5L3bUmBhm+ggqrpCYh8fh7ziyg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.350.5d46234.0_1620049655017_0.9146708355386257"},"_hasShrinkwrap":false},"1.0.15-canary.351.0ead349.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.351.0ead349.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.7","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"0ead349a518b8385861606a1edaf7c0fea0870c5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.351.0ead349.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-BTf6Jkw5Phf9e9CfeJK2JrY3GKcA/ufziWBV5mD6Q44qpVOeydHgaTpcuYVc/6SAS2VWRsz7O8Wz63CtMOxqZQ==","shasum":"481d5b5471dc85b7df776cee5cb0b9da18b56a35","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.351.0ead349.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgj/+jCRA9TVsSAnZWagAAa+cP/2I4tw9Kpk1EAL+YHM+r\nXA8Cva7oqqfZg3FnU0FWAyDjVwXw97zylKBQwusIX/blzIMslNq1/g7vkzO/\noI8sSfbJmlnxUh5Qaw0IFDEZ9RaHcJqYLjPVWOdKN7BjkbapLrcgK8JsisDC\nQvJzgt3RsyZKl1IoIR62TBW/0oJA7rhQscSmq5Mc/irmHvs3xboPtknnhfGj\nWnjgQhzywJfE0H60ckvj3+2Xak1jmgFf31ANYWvf5bUB/iPhb+NC7YKlRgul\nJWmfLQT/RDTMET+QRZlU2S1Phv97hO3KaqKIkxZeF/BcG8zFTy4OlfSqZKM/\nvUzadzUbGBVjX5URO1j5NQHbwPvNzYG//50lcm6EnHK2fRIBLTH1TOtxg4fc\n+fdPlL4ohp6SOICjF1ysUgAxFH13fYDqTSYb1Cr2WDVynTeXefb5bU2waJgh\nCpvkx3QiUj8fqlPF+N24PILr1KYHGdJ+1j52lD5w5Pt7btszOLe6+VzBlTnz\ntgCL367eHuudttCr4bKOGL8FnH479oQqf78y6vRizESfIJ4i33kB4PPRZ3yk\n0GfgGNilo34mIb6iudltwrtTYIOT5ufXOu5173bngKinAorirzk3BvowfrF7\nyIEOxW/9didnL4mNmEIUHsFCUaFmDf/kkZSd0udso7VmJcr9Q3MmcZ69osP8\nSjf7\r\n=TXm0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/I4K2dX4bnIMGKL9+LmotmU4fsZNlcJB8iHLNY+BaMAiA0ZhZyyBV3ej/VTnO4L8tDtIcSMwUuAwzjTeSzAoaUvQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.351.0ead349.0_1620049826760_0.6982800968883851"},"_hasShrinkwrap":false},"1.0.15-canary.352.5ddfeb5.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.352.5ddfeb5.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"5ddfeb5f63d5c1f777db24d3dc20339a8acd64af","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.352.5ddfeb5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-TiNHRFPkJDv8dIZAoziWJwEmN3/GEclQRUqQGYU5RaSExLkpVX2DtZdyoVGBBnP/5CVirGxF8OA+2YoH/H0ClA==","shasum":"17b51e09ec93cf48a994fb70dac231b41d890d1a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.352.5ddfeb5.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkABzCRA9TVsSAnZWagAAPdUQAJxpCdvgZV1BzXG6vFa0\nZYh/S5KQFvtURU9JART3sNb+/E5ZvKToCm7SSNqHFnnDCBk9hZo2qLpeU7m/\ndd40q9SunvaLv+Bm4yZWXyvqOT2YKjl+g0mRnEBchFfuHCguiKiNvUBpKw45\nfUcrxLK02Fbp4fQ0Knr3guVWkgbxPcllyK2AJ+LiU1O9k9YPEos5y3aXA96t\nms7VWXzfiGtPkq1xgpXWfU7HxMUYwexiC+GX8fy7KbPCENy6186q7VeS6lx+\nLdLn/pVHFW4iOxiKLBEy43U/5Gu1ffuY1MwVNbgQe+5mIsusp8yBkmqi/VVN\ngDnmVHR2r40MH/Rrq7vG1gUfkxsfsyE4N1uKld9qORMb/hQtcJURcT1SUiBt\nauXjC7SF3/7tASYlPP+qbs/d/t47afapEvT7AiaInzseTeEse8IuwPjnC16y\nQA7YnN5ikP5iRNE0M9VqLnMZANHwvW4uoOD+Kw2UfdMCi2TVD5+1yhhPrLpV\nWTU99Qi8Aa9Ae+gR1vMYSAySEzyJUilmsQxw83v8NFhIOzwjRonG5ZwQCczh\nAKTAG/zS/eX2RGCSsoviIKg8955hmjIxIarjVcE/ITP45S3fNZox8qTA3Npe\nMfpcdqj/TbWKZgkjO74W4HBus0ZcL6IPdVBbSuJ9AOL911hgzBDUVjREgUeo\n8wXm\r\n=Hz3k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo6DsdQqFOPUv7H4jSCvkucuRZ/WmLSTcNF70i5UQP5wIgJNt7OHu9D4Cu5viKJp8CCXVu+E3WodnhMgU65ZwBg0c="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.352.5ddfeb5.0_1620050034524_0.5877976876200337"},"_hasShrinkwrap":false},"1.0.15-canary.353.456ccc1.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.353.456ccc1.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"456ccc1764593a8d149409ace002dcef7c643540","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.353.456ccc1.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-eN3i6rJejh6+9tdtoQsaQQaztI529uxl6q8pgHZ7xVSC70uV0wElnPLhiQXny06c0mW0ioYKNucjD5x8/8eqFg==","shasum":"1d160bb1490f0f9bb963fadfbdd92c1b702d9f0e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.353.456ccc1.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBn5CRA9TVsSAnZWagAAlEIP/0/9grKUH5LA+RLXYpwK\n3ktOIgAozu1EZoWDbolSHduFfrakVuzX/yGVjDQF9T+pPwnVnrnzZXk4OHjd\nF4hs2WHJxdMsbhOCHe52FDzJU470HC+Xw2KoKxiVXEe6GSDEYa6LRnOLpso2\n6b/rX+N7CCioEiNNZwOpATL4RdtHlbONsC/vPFDLmefEUPosWrfUxGtlAcZj\n5eh1LAGdUWaHAS1aRjX033dTCpihsB2N9rL6qP+a1YbuTVGciXpVq5GbDlaT\nK3zQGg1R5hbdp8HTaUN2oc1zy+uLZfncgznuQDuY8h7DrTz8nqMJAPe41udh\n+/UUfwUPHpw3tFOLMvmE3ZPRRr5kw7JkRD3mhSEhPpl3eMFfAAWrYVGmvEwm\nqYIlY/1qPFi8jM5gWraNWlZMGmhbxXZnyfuYKC8ZCSklp6FWjLNZQqgN22eN\nDp7u3oAC5eKc6ESDXPElGnqIVl6JYlJesgoN1giuMzSLxup0OOcyPj7eZLht\nEa31Vl5htaoSSG7HHMiH+18wz3eLoPFqV07CyhT1yYSyjtdsnKATsmxJoZek\nVYqOHwKunpYVqwzfHdxXsKuk/G4Ec2HQe2l5Jq1PwsgKQTaEUwytpRSGMhVT\n5o5b1xHEvGP2MbOHIIx8HfYwmdadJ2li3zel6hxuPRL7iONJ+q45Ti0vEMmy\nqo9D\r\n=tKcc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVBY8hDcTIU/vCaOGAcBlhd/r9DRsWGXH0NOhd/LYrvgIgSDWs8i5OAJe7E7U1lRD2BcIJPAulLRu5g7dJ0hiBvH8="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.353.456ccc1.0_1620318712433_0.8265865094865368"},"_hasShrinkwrap":false},"1.0.15-canary.354.7027a82.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.354.7027a82.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"7027a82d26e3daab3f72203843b0804e6e3f9ee6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.354.7027a82.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-o7mfZWVTE5VITwsf5pwE2CNsUjuPJR2SQu1pWOPE3Zxl5AHN7k8xbjYGK8TYj+wmDQkSaat8rQzBDa9ph55/iQ==","shasum":"62a43365202cc0457ac86422e0c03e7e4ee80542","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.354.7027a82.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglD/iCRA9TVsSAnZWagAAolIP/1PVSOtiON94CesnMTj0\nACTWJqpV4RinbhF65FdYBsPXwiJxIisNA5KUJiFK11spTRshhRyyfYBFJJ7W\nriMZcNUleWTkRxG/sPwwDiYh+sNZ6Jj6ZdFNniK1LQ33hdWQBO1ycLkgb75/\nvboyrSruRVaAftfsuAEgXnWuthUIJCyUHFuOhTKHR1Gd2nps21/R7+HqhEYi\n59dGfrYLK8rha5MCcz9mtl2OhLy2cLxRcKjE6SzhtT5vd5CvoJnyAnAg/xno\nr/KRqOBKOWVtsus9q0MwAie50IMDqV7h7ERtnhcBwQwG4gHNfJmyFJJXgxOc\nXCqx1ZY2OoWRlEYZ1aUOdukz/6i0OxgS8uaVVUSm2EMhgX4p93QzEm7BAEBL\nqsJ+YHniAbz46EL7OV7/q4IzQl3X9CCA5sAXtivSnxhYd1GnH2k6MBiZ3mYK\n6RILGBJq6yvjPL99S8o/dmc5fJWb439pE4yMSfEWM32SeGpF5/Qu2dA2kgWu\nx7CiGv+Cux9eL3dCZjcc9nlgOeRJl5wY3X4sxbOn1SzX7d5VGQzckeEvDexD\nZ75SlqjpDtakguWg3fe4iV6vF/FnutCZ/luk64iqjrXzQIUgr2DIYBmob1W2\nNVkzMTf4YvFjTK/l5Z/96uGk4EXk1A0wwHuWxrIvIY2Us+tbdI4j2+KntAc4\nbnvk\r\n=RfVw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSKtfS+728cBu/K+OOcfNiJ+RpV2p3uPY9bml4/4PMsAiAXPiNPNFVqSC9ibjwyhsluOZbNojM37200EjX2EJ+hJQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.354.7027a82.0_1620328417397_0.9696428021592713"},"_hasShrinkwrap":false},"1.0.15-canary.355.ea05c2c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.355.ea05c2c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ea05c2c2152248219fda3fad878b0e4da4086260","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.355.ea05c2c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-2Bf1O3aHHr3bESzrgeA+altAfJX8JPYT4N+9UzXuzH2PbhwZ6PhYN8XR7pUKWgO6Bn2A5syiaj3Hr3OIj3T1Yg==","shasum":"1cd774e1cb5cb3ec8555fe46e2b986062ac8a743","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.355.ea05c2c.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglY4ICRA9TVsSAnZWagAAQj4P/iXyVNrdV9NajtcIXIng\n9rowk4zraALxe5hnmac3IQsVrZ7++89aNqHBajk2Qntf2X3vOt5CQBCVtVV4\nRrOV9fAEFLjXdO+BKVs7G0lSGCkgaBtRSESmYkHU8uk8kvKUooyQU626syuy\n/4Xu6K70uCgMAOcDe3QlOXYtfHdDb9nZ3a6vCvmbPLIniNsPNPEnnbT/GjeU\nYBh8IhOOtQOgA8QovodaMcmVgFNeIjzhY4/47q+xMO3UcVsRiyBeUDyCXqQT\nL5fkkORQlM0l7Md/D9ocSrCeg6ATqdhfG1k7q3qdkp8IdYR8Ay01IVDPrFsi\nE18SV/xPmM4r0pGfNFIMM6sPqUmmiTSELX8wsvKIeMZlsXCEvb4QNj1BgqHK\nsibL5xzaDfbzT2R2oA40/wHowWAnQLGKuJSYAlDxG5/N8a67hjryqdw9HNDg\njR73a4QSQ8JECOxvqJ+f4mASY4DZxGwcLmcCSRPg75bSWpgRZkVU89OdVMpW\nOgSu1WTvH+AKQVhC7qtNYxc92qz2njnvUHVEgVBv/I8usYLmR9Wxee8MVITt\nuzCRN9gomLdRuOpKzl2xSeC1CcG00Pmtfz+KU47H6Pl2swJXfqygdPgSryfC\nqy+m6lG+sEdSqW4l25viK3adZtcixzHapufl5zUI2UNRT6eJxaTojka3BUHt\natX0\r\n=zJYT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDsrXfCCRAxjNR82gb56L/xJJPsuX/lHpRFZNyZaC4RQIgN3UNF2ZhuTo6PoE4Zr1aRm/ok76EaTu2XLWHqH8jeMQ="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.355.ea05c2c.0_1620413959503_0.22849732688129043"},"_hasShrinkwrap":false},"1.0.15-canary.356.55e72ef.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.356.55e72ef.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"55e72ef51600e43db017893dd09b9dd0ee6df9d3","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.356.55e72ef.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-nYHaMFstgvrzVm5dVjTSZJarxxH80FQS7yHOuF7WLbHjWL3nwgbRJhugOMxLENoyPZfQJAvYZr15pyuHgkre/w==","shasum":"eece493256966d2bd5782da548d9c77d7cf85b26","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.356.55e72ef.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmTfBCRA9TVsSAnZWagAAcKIP/08kCV/3WaW9xDEmwZQ3\nM4AbhNHczaIWtH89zXMj7ld91YEWTeJhSZVQp87xUyJftilrD5nTEHAKwCbP\ny/3u6droQ8vMO+mONgv09h8ph/not3O04czftCy8MZ+ZFmOxeiu7tohG3Z1h\noeOJsiNqCtUbX/1zbsteYiBq4Zw1fIErJ38aA6zOUKJV9l73H1KvYU6IDbKZ\n/DycicoLiEVIqFXEGvG4uo0iiG9mnyjcv9mLh8sAPGLKTZqOBfyzG/MZXyTE\nzslOkxc49ORsIgIin661ai4h08nQog1FVTp7z6FKRoBFbDBZuj3Oz/hCOu+m\nTyKot4/ipJbNfPf1ViWZy981quqse2hmzUlfX1PGu5mLoiZmV6eB6lytHyYB\nUZuhjJZhM8mQ4QBUIGpOXbEvZfvD6PB5SDgb6HX5oXHk0OzfL2+I1Wc2vpf3\nxJuOE0Q28g4chJBPdcRonL5TNkSxKXKALMNQ40vkoq8A6wlg+0mIMhmjE5dD\noMsdhwWsAPqUy2sr4IuX9WroRDNrb4skNwkTUvxBIlaKIVr7wUaNA5tn6aEz\nlERZW8Dzq7FSqj3yMwiYmaP0udgx8sEMB8y8tQ8XafnELlWr1vY7EGyts58+\n1aIWtm9R6RHbLXNQ5WEbEh+/t90E/NLf+Wbc2UBful3+U7aM2uTsVbEevPrE\nGdnl\r\n=y0mB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWl0fNDhevsxqYkoMsaE5qlgH0FoGOOLJWEYAIBObGeAiB6Aa8UolmZG6Dl00texETc7vIwzIeDOFBQ5YFyQJTpfA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.356.55e72ef.0_1620654017141_0.11475890379230691"},"_hasShrinkwrap":false},"1.0.15-canary.357.80ebae2.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.357.80ebae2.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"80ebae2fce9c165b96445efbf8465a5a8c008f79","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.357.80ebae2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-xzgOv5W6KUTCnesV0bmMewUUryGZJWkH5f8CjgbcbA88/w+3NJoHcbWyfB+ZSgYUJAYNebs/IQTEa+Sz0Hj2pQ==","shasum":"daf2c900ec23e766d57478025d161ffd9f2bfef1","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.357.80ebae2.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmTkzCRA9TVsSAnZWagAAQVcQAIrEr7SlvW/qSAEWrGmI\nH4lmN3mToiBWnenvHmcXaWhYmk8PWeTyB/QpJ43z8L0fdKagGaFECx12xEIr\nnbOGfQmL4cud6UIoaRu9+ZwGybhoxlHz0nXSl5XdvuqyJtPfPZ3VVYTCa4uj\njsymViNIhh9CyrRbF+XnSu8wkWxp5UkjKLb1IUD4iiVt5gCvUy8kLrqoOpIY\n/l3F04UsjhzCMneyogcVBFU/WgIm7ZMwM7Vebx54FIaZyXGKM7M3BrijJimw\nSAi485HPF44OLFlwdkpgKNMM5x+gDm3fzk+IurPs0z5PM5u76SSF2oO1zmtH\nNfGJhI3Wtly+qFnpOvKZPsoV0owXus5ARis+FJbEadxzqMFHhm7nAiDcf3II\nr5hNojfpov15Jd353I2w6k6w4aVl3UiKtmgW5x3uCVjtX/K7qt/bfIR3JA+1\nKEAdlf4u6Smd38UuBQMafz1+BJ+To0cYZsb6+8x0MGhonULGLiR+1QN+s2Zr\nF2KJalI1ifPkwNNHxbDrY0B7Y7TDalgA+qHDTssy2SifYby4OccdhQPB9rCz\nP9ZKBQ2Jzx1v7H0444agIfZCxHDhmMul41/nDyYduln63/vce3ug9Pc4FMwu\ndqvxIGCzELjcMoFMpgn3FKnf0vkdBFvIj8yKVuekmjyYyxHbaLmLt2QIl66f\nfJn3\r\n=cxrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXXYGYxbvwuF0eHBPr7y38ZkegLARFZ8CSRtshcRe6zAiEA5ZZuID6KRkTJP4lkF80wqmoI+8HMRkJ/mdQ7zixXPqg="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.357.80ebae2.0_1620654386455_0.5817963221717755"},"_hasShrinkwrap":false},"1.0.15-canary.358.43f6919.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.358.43f6919.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"2.0.3","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"43f6919690c9872958f23f0d5abf5715713ab86f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.358.43f6919.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-1pfivE0Bb1Sl2rjv3c5/RlwrLXu8Lj+MFMy/d9K84plDLCj3Gxkg+wk3H9ak1sVXNOQytkPG/76ayzlnXScTew==","shasum":"1da76958a966222ad229bfdae04334cefdf7a7a7","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.358.43f6919.0.tgz","fileCount":171,"unpackedSize":2493332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmTpxCRA9TVsSAnZWagAAwUwP/3fQ6gr5yAfQliM+bqW+\nXOGd0mxE3d25voHBiMqCjREziLs8A8bTvLluwN493HvleYanvLvOQeQubwkN\nuxubouQTq+1cOz1zKnuGoMuXsrRFUUkLCBZZGnOSc15kZ29u+g+M6s/U/XTY\nKlN2SF7Dwsv0fdIaIMYdHD9hPVsgmHl73JKcbkWVdSNiAlHDO1z/TD8chcqQ\nEXMCcWqjhUcMQ7QHwRdRB1972qc87SAMXhgFzaQCDKPEEdRTx7iUYbqpj12s\nilMu/rAmM0VUEu8Cwf1rkfqzMusgd1q8vscpS0i6/AesWG3+2TC+VvHQ7YCg\nON7kzmnUT7q5Rz9lTtUxkEBDxgdDsg3dqEXnmiXY/Bkpj92H5J+p42tKUPgA\nVJ2LJJJJkYPT2ejU77vzFRg35mApDsWkkTnCUswJh71/Tc9zNJ1bS1o1u5OI\nTU+QW/aeOEt8VwcBb+L2ixChj5qJRSoGpv//7dpwV7EklE8Q3VNf/MAi2ohp\nu36uOZ6xcjAW3DiN4RWrHtX4Sjwv3wDG9irQogUhn85lZJ2KF2zuGMQFOP8P\n1UnMvLM77CAIMwhxjw56HuRGa/pwJEa9SE+PZGdJCuPdpNaJFo8kJafTvlql\nlGQoOkQ/q+BNcPdsEDAF86nQGXZcRoQxcz7nCimTYNoCFNXZk3sAqVM8jTlF\n5ZSV\r\n=CPdP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhQLPronsHMRr7HIpel+VInKJl25CVzk1EA0deLhS5ewIgOjzRse2PRlYwvQgWXfd1qZGTNaYZ/vE0rtGFPc1HRBk="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.358.43f6919.0_1620654705239_0.220456265442196"},"_hasShrinkwrap":false},"1.0.15-canary.359.ff8cc72.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.359.ff8cc72.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"ff8cc72a65045b74a9c605643793243e86345e78","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.359.ff8cc72.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DGIL4ZmkqyU4IumbjhzsYQ9fG4KhDI92ddWetebwYRqyNCOVStvZvhihzHCWn86YtFMixXZ7ilEb7DEZZydm2g==","shasum":"14cd6814bd2a78cf22bbb17793746de63ff9ead0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.359.ff8cc72.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmTuXCRA9TVsSAnZWagAAD4wP/jORqI1co4B8eUbBheCM\ndgd/JqVUkfbFkfyPRMi00D+m2C1M+foFMmE+cMEB+hU1rjDY20KcvQbtBXaR\nwnlJWyWcjNt3NA9Hh/AhoO8r2kz+qzIf0XP9AHSQQldEKdDrDhYhzxZqC7TA\nSj3lkvH+N0Un1OqA0LW7gxaXJqzjT/Aekj7gXZz/HIjR/pLYTDSICbdI+FgW\nv10AOp1nN8kY+qJMEJWIcOy7FwpO0E8h7eXu5HbaVeMjGkQyvoEbeOT2bQDu\nf6/oGub6sK9+orfbx4koOcZKTxf4/QUzUvK1l952URrzimRD5nGoDZFEQlXF\nlbYKKLPsdBcFeHleVhCs3jB+xqzejsZzZXo1lh2Sl8vNcuxOqg/5irTHCG3V\n0faHqIabbEgddBSvhhyFF9fEhbkzGobfW1HDkVzsgcA8ALw2iBeeK5M6gIou\nrpT0JtsfJc17OIoO8NITVXPG69viA9S5X5vv8MneF3pKs5vzVgBChAzRQT/P\nxDTWFH4dXeKpVxSfSLdviD9YClxTeW0JEs2zIxmkKtNjO+q2DmNL39Ja47ZY\nEAUD0Rvh3DGVF3AATZ50x4M03uaJ9D0kZFOhs1S5BWOEEmWF7khjRBwOE0LH\nxZyh/2SLVjgIueyrxAmpEPiu4nkjP5wiE8gTJ11Kn5OI2/wjpcjwP9GfHchg\n4M7d\r\n=neyk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJk+Og4jOmOQ7EaqCoFRXfl2+clFXF2miFMq+PFPazGwIhAK+0CAFJJMWDJ++0du3OXg934BkQePfwtZLQQzgkKZJE"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.359.ff8cc72.0_1620654999228_0.28791746408368435"},"_hasShrinkwrap":false},"1.0.15-canary.360.f55a09c.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.360.f55a09c.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.8","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"f55a09ce465bb0eff8dc2452a829dd605ed02cfc","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.360.f55a09c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-zbqmazBcOpXVdyU/xP0R83OCMz0GwbZ+4JdW/F4/y9dKT0ExAfZ58ugY97ODEShI/ksiTuJldy7BYQVeTzfPmQ==","shasum":"73f9cb387c0e35fac67534032044bec89580f207","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.360.f55a09c.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmTvQCRA9TVsSAnZWagAAtdcQAJEJiQMLu+gR6G4wI3++\nXnWt1BsWjTzu0YyfKiVnWahfNducrVum4Zy5/kTkoExVOhElNggo+sOFbaKc\nbkgBoArlz0Ngwzi8S4kHIStus0cuwpUJyrhcxGmZpaeSq23pi77lFNYquFzJ\nebvIKwk7nT5TQjUDCKSYHDpDLM2idIFcpFFbjuZ/JzlMxBVvCOmPOOYzCCui\nExWodL5GUwiDIp700IVOh56dJD2tTOwAzYyTvmaTJhedteAQ6b2jFGheBoQE\n4Gt5MiecqNK+qAOL5v0Q1yDUV2neq5kfpMdHHsx4jWVI7zx3lY9corW6/b7p\nJUUDOG/zE2Hm3Ei4sxVW1AmGnJ8YoebM6/lFeqpBhmTwl6NfhonLOfvGWFVq\n9uqwhisXwY6yrf9rNoAThEOoes4VHtDevavLa5VjJsBfakJKnzWbrVzbrwTT\nSiPYP2xF1JB6sipBppqghpnGy9AvvY7bXf7AlXJ2vuMrlKUkkeLZTP/3AQkS\nUn9KnTZ9Wl2XpyFxSSUI2wQtmHik8FYyIF0a+36/xamd60ZN8Zdj5TCf2LSC\n+FDlcHI9G9y4OhCilW+pU90STI7gknJpWLHbY45mMSVQZWfhMAWtTxG5/pTF\nBKlcDF40gEr1IaGEsFT1t53z9CiwqBWYCon2FBmuejoTu9RYl0UwuHprRoGR\nEELB\r\n=74S8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFrdYYVdb++973tfMgHfEGn2iMRASiQOnnuzsAaqUWCQIgIEcpWqXTNuhMXam7Q25HjOaKp6C46zTCCP5TuFvRYkM="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.360.f55a09c.0_1620655056241_0.7865148390664747"},"_hasShrinkwrap":false},"1.0.15-canary.361.71ef726.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.361.71ef726.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.0.9","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"71ef726583ef97db090f1ba7de98f808efb813e5","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.361.71ef726.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-AM0pP4yK5m+hkDlYnRKWX1Zqk8obKcgDKk/4+nX5DiKhWgzLJh1xl6a/xzgK36o/+P9ypcWIsFAEsGyhlhc04g==","shasum":"39d6adcf913b133710e880a09acddbef615ec38e","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.361.71ef726.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgonD2CRA9TVsSAnZWagAACw8P/RmYZ8npc62OiKQ3wXuI\ntLbw/WX4/BI7KE0jbXytcM9eo7KWjL5JispP26FednyXuAvOADOeh/0/NuRA\nK36ownT8/hoffBnAlfFtwF01LBJltZ37aObgNOhEBV7wTNshaugHqIElJ3kN\ncAL0Jk1lNachcp8bvy1XlfrBlwxm3frRnPeS5J6x/MkJqrWWMCuWsyy6bXpx\n1iBthANNMxhEbQtQIzYenvHNWlTggcQ8/ZSTX9onm/dJphQTcbDqw52lvR4T\nBW7oXPTVO84PMXKb4hk4RMT/ta9HHdYWvptf1dUYWoVoV76N40R0W1kV7ZE2\nIMPThmldO11PXG6AZ0NlVdxkPA4tORL3x3V9PfWrtgiQx9BiUSBzQE4GDiJf\nQtYF3vNOga95I32kTXjnsP3DRJglm+DXeJlMTWv32cPi6v7OCSQjdmhUmDgg\n6yZzsF6C45gtXmKvezjFCa6Qw9v4ldg6b1FJo9bNREZe000ZzZzPw/SKX9ZG\nHSZrye7ArrMX3UQp9yYW4TyvRTVW9NTh9UbbqOPo8IAZaOKNrazR4z2Y/qIX\npXGdWL0Ihk3vCVUNYkBhInBMapKi7RfBVJcAjxeGk+Ek98nr2TKqHNzmP+Qx\nEzjw2oJCZUFK5BbasvnQvzSJ+WezA3f9hf2L5hKwMKqlD8a38cjss23wSW+R\n1J06\r\n=VP+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKsPvudgGGiCHvmmC0CopjVWc+y1PWWrGYog+sS/GGtAiEA9zidlOSClXzfp5Q7K+vlpfEt7B8tLdcO9uvQbt6ZPrY="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.361.71ef726.0_1621258486001_0.15214237042975487"},"_hasShrinkwrap":false},"1.0.15-canary.362.4c28b63.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.362.4c28b63.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"4c28b63b89d5365580622d5f7c88adacf34d27c4","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.362.4c28b63.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XDPZLYRUkEWAdxgd2kJauMThVV7gjqNNABRpYV38I8LLQlkp4EIRWAftybIkrq2i6c6nftVY981MGOCylo6Ejw==","shasum":"16ba4092c0aa22bf710ad8acba734a17d7576f65","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.362.4c28b63.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgonEeCRA9TVsSAnZWagAAnOsP/RFnp766wHLF7kGjYYGd\ncIAzWAwJIW9VY5k/TVYHxWnfs3Hac3jSqgmyXEogFnGuBiPqz+6DMSgHMxaa\n9gagK7whJCi8ou8EyNSpD9eoKeiI6EHiOJC9R+k+YlM7Fb0H1ieyJDOLUx/4\n521GQB3sjXkDXd0fiFBJjRtn6arNIT4GRI8POSYgVy/OKgbowT2zbyQ7QxD3\n9PS2+wHcENdlR8YaIsoYcbuSOQ/urZXItwy7yn8ACg7bretc6oO4Jtuydnjt\nHXtuWo1N7GKIm/i6l7o70g9Pxuatnx2CO5snRK1ebg1FARmaG5GtLzxdH4eU\nTQdkN9jjXDNZBbzM190N7hFOQWJ4eFm4Fb7oJUt/LRH07gG4BE+uifdZ0wOT\nt6zevGkuGPll8z1BSb5rquN39FE10Zx0ZeeunSm+otYMFhUsaaMQ25TMQrpP\nDsZIvT94tJ12EZUsVYql6eWPmQZ2eTvonAoO+Nh6sKdqP+R0g8x1Clw39jSt\n7MjESYMLV3XcHVFL9738KLA2UvUhlZre4nwTboMMa+kwqEk2seFo1ElyUGXW\noSy6z+3FEj2ncFdcNdF3DOgJ/6vKBAuU7s1pq5Mnu7wfJ9wBLpt6t/4/7fxW\nXjOtzIUeYvxbTm+4bhUwOBeiq/UDft4wAPWv6pvMartv8hiD9LGThiLJO4TD\nyPBz\r\n=Cumb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF++YOKmUKvKQlxd1vbtUF677BexrpW8WIajfpNvX/5vAiACt9SG+O9U/PjJrMAN/nOtunrxaXDW3Ih5C2Znu2gyKg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.362.4c28b63.0_1621258525986_0.426912395158199"},"_hasShrinkwrap":false},"1.0.15-canary.363.a646462.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.363.a646462.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"a646462003e3099684b3e81e89d830455fb6c38c","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.363.a646462.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-1+1PeZYuW4AXmz0pK3nIN/yAZggi7asoxJDNMw2z84fduq24F3kTSyZ7L1NzMUtLeyNQhY+JDf9GglN33/nWaw==","shasum":"c9e79696c6e6ba09043500132c2ff0762d533643","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.363.a646462.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgonIICRA9TVsSAnZWagAAHWkP/3ynIizTXePX4a7BmBQ4\nqEpmz8RyQ8RqOD21QQO9F54aPas4AZYuqoH8HtKF+BnBm6CR1eRv9ahWFTWs\nu/rHVrnHwj6uqOnnNDIyCA66vFapZ0Ub4ijRB18imsb3Gos/JKWI0GLYc8wt\noB3nKmnYKJz8Xi/6G+GrigRF6iUryBHGYaU4mba0zNbcdml+qQlfLgqgNDjB\n+8x9uCjgre/IIipsIB6KCrD8hCr0ITb5SI5wIB8rj0BrsJDzLRSN3U83orde\nnknjAYbA8aXFIcXiQxecmHcaAQ6fqJNZeOl+x7plahhO1cexF3pG1BDdcgEW\npnBtSlMBZ4tdLH/mKFcjM3PBtib4pUP7Z6ghitE0L4seUTcNtTt7xcLSALC5\nNZAjiZx1FrEwS6m3/CSIWpUNZ01bvVX39nwYWhfkjzaB+fhUEgftaxpFoU7M\nDEWVNPVg7e8lKp11WXn8tZTJXF0NTnPMddsAz+ZFWfIHgMOr5q1Xz1/cLIH3\npApB8IfEY6qvGbVCMrNdpE9XMjzMP3oRqtCmM3NssKplFOjVnbRkM9e0zWZp\n6hVAs6dWCOpn5ru4E5O5gZ0yY9++L86oItzC4l+hgsYGmYEyS7A3TlrxZEIJ\ntX01K7bUcMT81WCXaWz1orXvnLpfmCB8IT36JTGXxnLyxzulNxslGKy5AnW/\nCtXu\r\n=WdR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWkRM4G2WB15XddklTWg/o4oXBEPB61MGpCptQhtaQhwIhAJxjzjWgIt+IWUMfvplZXIodUe39xd/x24KW7+gkyO1N"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.363.a646462.0_1621258759461_0.1821077164656264"},"_hasShrinkwrap":false},"1.0.15-canary.364.751d873.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.364.751d873.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.1.0","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"751d8732104c79e3d408144b6cac8cbdff36fece","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.364.751d873.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-+j5e0+qQYkwBjUrfO+bZSU69GM+bt8rVAQJi7mi7AX7fEsvF1fiMsgsqgIyrLEnJdpolPZgFOzzinCXI7CnMGg==","shasum":"7b89bbcd18a219291ef9bdd5cc6b5aef1c97bd9d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.364.751d873.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq62mCRA9TVsSAnZWagAAHnkP/236BHRWXuMQzpaJgm4r\npdwxIYKir2tLKx+BTz8EK5Fu88t3Bx4vesAXsHb2ZPaGNtJhqNeTmabKuEEH\n2g5Ow4qk5JXt2fYD3Wp37jsINlgyBHx23DDOPCS/I01+LxZ8YWFiYt3zn5kH\nIb5GGwmTFo+8FG6WCX8MjHYDScV+LnVO+XZFP+RetUyMlA7pZAMdNK7MutcI\nQNSadhD7Sww0qU/MbtNu1GgPBnQnXf6jXzrVdVrhwevNA/t9RFxBppB5jlTD\nOOKd3o8iePzY5CYYv8n9lOKRWGe7G6KZbFEtT/2VKsjcTjQkvMrHnNtqLSD7\noCBHfGEu34aBmePNXEwEdENENgTaVFB++fo0fSxg8sMhS2h/K7J6qRf7/feQ\n6sy0BhOE74YezYUxO1yMcwjCyYyDudwKMz5oa0jPvGgQUtRW8WAUMrSBs5aM\n/sUt9J24eGNZXM8us3W5VXmBPUurqO7lVj86oyMSXYF7qhuv1a318H3ZWKaf\nn8Z/y2sJ0XhSnAJgnLEmGv8uVkV4leL6S4aY3+7MPloBIDvQnx90ySH4oAbb\nYF4+Piev+gOIU2beFZkpnfX/5BWJMjKPydGsaJoxIdUcUIarbjHK6hryXHXr\nzZpQMJs3tSLoF9qUDMRoH1ry/PhWsWqWKornO3sTjwxRQPW7JnRCRTsxif/3\nHbHR\r\n=ac6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8sbLaJWsLp1lwYXZYCSiVXsZSK4b+9PzUvoSoz8lI6gIhAMd6N6jOm6EstakQIVxxFR/mtQ/vMiRNHCkaE14lqk3B"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.364.751d873.0_1621863845732_0.9178652908876628"},"_hasShrinkwrap":false},"1.0.15-canary.365.19560ff.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.365.19560ff.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"19560ff0caec4577a5f48d078cc7d38b962b838d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.365.19560ff.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-hsq22anTGxXKJ4DbNPIRqmzggbPSUjuL7NqINSLGHFlVd6/nYu07KVBW1nDM8SsHqnpqGgJlCqsG+HmH/p/nGQ==","shasum":"e877a67ca8a391543898a590ad49922da93c641d","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.365.19560ff.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq65yCRA9TVsSAnZWagAA5xsP/23WdEN+v1DmXX8zhuhp\npQyh5ZBzWsJ5rch30Fh/FKr/G0PhBmtG90ylozPiwans5lXi59bmegGwVZjR\nhkqiZJNCPG26sHC8+OmmUEeHaJPeyYZR4ERN76l0MOJA1zci6LwY19sB4mBE\nAoHo/AFjkWMBGFA3d520GlyqE1fEChv9IgpuWZdSPIZW+3vKnYiXCE8hvsvO\n7VVl8BsiCS9nvshivf3bpgjRffKh1DyrNuLegIjWitIVzyPaXUf0+ukkE2HS\nIKaWgQtmB6H5KfvEP5Ixfsnl3UxNG8HrAGS9XofPVvnyhqfBh41781fNAcdU\nRCi1T3UPsk1yb6tcAYmfDI3uDg3CGhAD1fawTQOS/dr8DCakiLtaLVcak7K+\nZ6k3DxabqJkbq0HJFh9j6p/BP7s4ZGA1EKPsPfmFysw5lAb7iLj2A7lcy9bd\nWRqxbqRlEvpXBwutHXj4oxF/vVdvGmJhY25/EWw+a+kFffeJjsxjE7XGCBRh\nRUwzlWzYAGT3vdyY7/RR6CfNrKCKJqZHDEg5iBIEd9i4jFharPcL/8KodWsQ\nxx/74GVQsNqcTopCWU4A5QzJVkXyOD4ppE1Vc/nUb/GXTXdgHnrXNgAWI79A\nddZsIG62pWsFHVAeZbG2IdNazXN8N2OmwK/oNhvHN5FYpize9R205tdaG1MB\n78vo\r\n=fRY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxVol0MrsqVoXFpd4MvC8ljZ3J+YaL9A5UOSB1InvjPAiEAs5lAv2qABZrroVgKUOR3NcMLhRI44SCchN8cdjYiCJ8="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.365.19560ff.0_1621864050284_0.3441945474267558"},"_hasShrinkwrap":false},"1.0.15-canary.366.acd91b3.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.366.acd91b3.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"acd91b3dbb16bef1f93188a5bff96a7e41791a60","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.366.acd91b3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-udyUH7AE1avJVKdtpGj8En3ngcqaUnAFIMqkHRxvDE7RI5NqqaNb+UXc4XW8xfi0gXQnX8cx9J2l9f/4eALU0g==","shasum":"4e2f116deacaffd4f3de9a591f910a0eebd24ba2","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.366.acd91b3.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq6+aCRA9TVsSAnZWagAAMxEP/243Qh45JdDqpVSMxsYg\nQ+tzvhwORfweO4mc81QYuGRJl89yMyvcVCJ4o/VCG4edhjt52xVeGPGFX1ds\n4aaRiwo60Xfz4Z8Rwf+lZpgcewAhdOZoF+nGPGnMXidPH6fK0q6bHljFADKF\nODBtdXPSesgp7BG8VnOr31iyggd67SFQVsXEpHQkipFgE2RFi8/er/klkXDQ\n4nYhSnEkDXfFAeX9Qr9wbPKSngE70oCbVTQbbTAGr1MpsiG5VI3LGnQ/F4qA\nkxBLIMw6S4II4bPOM4JyeIMmWgzjfIi/NhtrPVoF6K8Kjwyidr48BdI/ZeuI\nPZTUveZ5TJlyuuW2N8mwK/iuiaKjnJvpqrLH+IPE6Hp2dWmnDFbG4GggUbY7\nkhHHoKZENG0I/jhS2+gUsFMhkrpgmZAvCOgn+Omo3bTGcTGwRT16eFp3DZnU\nRYd3waDoZ97ki5ci56NsA7hFPX1Qboe0EI2bVsW6MzYfFrEf6xLkfPyC0P5d\nWzfLMRt8f4UN4nJll0QYYUK++1PgYM9pCo1xNULAoYWw5sc4bCC7ar2t7gWG\n6q6aXbYZtht6XKy9kE/SNFUNipY0SguKHhDs2DNvfEAyF6h9SUVEif//ACox\nTF3EMCKPjE+m4rZkxVPi3m06fytFahZiGlo308RbEflXBW7p4yuYQDD2MDHd\nmsZo\r\n=PThi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzmnMZpfpUZM3dDQ+ZH7C7vhTUnk+sZGEd2zBbhYlwFAiATy7dCAuagjb4k0lJUnboG8/OWOF0ke2KsU5oL8uszRg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.366.acd91b3.0_1621864345740_0.5860025659275292"},"_hasShrinkwrap":false},"1.0.15-canary.367.53b7d9d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.367.53b7d9d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"53b7d9d732b50fd15f4fc7c9689bb2351df1955d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.367.53b7d9d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-cex9f9bqp9KHoHQiXYu4YXXrC/VqeAoYL/VlIxSYbm5sMK+bSDNf98crpnbC32aDYwRVQdCYCu95MD1Eold0gQ==","shasum":"225119b070875d27d1eb131a397a014a1918e793","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.367.53b7d9d.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq7BtCRA9TVsSAnZWagAA65EP/0XaCh/97BeufxwLlt+f\nxngXaeR+fBjU8xq4GptmX9Tx7+z72ovaYbFYW+iv3tktnm2YBW04AJECYXKP\nVhrkToUFL3L/vLthiAkfxoXaDLfveZROvLHAq8bXIc8QWuPkaaO0Thl4Adjx\nELlADVLi9dp0/qxVrtlA0gK47ZsIn+yaQlQM1d9BPBqV3puMB38gEUqaTgG2\n45KIOOnvF5KY1u/60Hrxcnu/G4jYZUfyOVMmUlLkYtd428YjxplxzlnEuEC/\nhUsg/6Zfu0+Ybusl0YZK3wLQBfTRVJ4p4wCFBPQuAvyoURsElhChH8+thStD\n0BXFBcGSduS5HfbfcmJLJ53zjxWTNmXjwkgSUO2LRo8snM2tVm+eOEPiLZFS\nhF87PGSUBsb2PDRNVubLdqP8CpQw+zBI5sW0fP1NJO/USpHDAcLOBHJZjt+n\nlt3tQcsAq5IBHt4pJW53NN5O92euGpYULE8zlA5CYplJ7tRJQuGfomu7rx2j\n/ov0sZv+BPSoVu/VSeZci2lLzNpU8gk09Xafl8SRU9bBrFT01kOAcOOTDqVD\nu1/gd1sWLaLFkD/KmKujq23yzJActBtK7i8FArG6Oxuz85Yvgp7KSNuFdX4T\noMcDbqSPUtyqWX6JYy4qBGqpKqmgVyaxnqjMRYxnXyOIfHZDS/njHm1Q9CMo\nwyYA\r\n=h7Sj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoEj/nEcKw/rBqsBKYlMigRfDtPt20W1P4x9Dq00mqaAIhALX4XRDjTq4SAJhxhMjFCQyYZ1SpewIQ7VZ6v6yFxbez"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.367.53b7d9d.0_1621864556773_0.2550471529950338"},"_hasShrinkwrap":false},"1.0.15-canary.368.c3e0d54.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.368.c3e0d54.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"c3e0d5405b3f7dd705853c03bfb187615038b0ab","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.368.c3e0d54.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-T0so3ErS/hUHcWEgLsOopoKMT/F6XfWHG9OyFUZ1rKvxml71nGTuqiyExhHljEcZKJuXXCiICMm2+gR24yuqRw==","shasum":"fc316d2e9648106da744434734008abe2215d272","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.368.c3e0d54.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOaiCRA9TVsSAnZWagAASCQQAJVq1F61eqPAo7YMZoLV\nsxzplO8IGn7FPRyulyVHiUVCUNIStQwFzjjVaOWr67rPblfBaAwTvRrAGvJM\nwlgi9qcpNwnG3TKQr0gp2Wv68CCtYuX8UE2DZ5/lEPx1k8k4bXzacE+6i8mI\nrE680B01ot8JtgowzKHwc0tdBCzVrDKCigMbuhDGFzrHxElTXGzuzVbElaks\ngwlXP5BPb3NV9wez4sJXJ8nKKNAqgY6X5Kh1DYVJok5UDEDDIsqHfozgAZm3\naoru5jA1sCDpkkl4msdxslzTdKV0X3KGqhqf9hjO1zIPfaw38usRilUvhSYF\nfiJZsPIAfUGzpzsnJCwTdvsADCZFGyN9FozeF9xfCgoupvdurfTMTKbU4bfG\nEk7RyZ1OiF/dbHux4NuyZrDpelUB8l+0lz0dCbw/MQ6Yzyfec7/cKktPT9no\naIF5c6J1BaWAY9UNRnWwS0Yrhs0oprRIvWSCl96wXFPm1zPhffURVuUgOqwy\nczdqd7RXm/M4crzYhPtLk1BsmpzQ2IBQQn9HJk/oDBQc3ECA1d/cPHas1iyu\n442XNYpOb3skkZd+RK2fsHL+TYNlXDBjFHYuI7oa8jBzRdY0a7OUtzg230FJ\n946oAnk77HYR4GYFi77tNhdbplfXPq7Ku5E0FgBDdXYC+ZT3sEp60sFyeE3g\nvt8O\r\n=xKiV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrYOk6d31wK/HyFkoQGBKheVsNq28JCPwxWQdkdYmvxQIhANIbwV+voFsoCXHei/CyxOs9OEzj6slKFefrY9mpdkqg"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.368.c3e0d54.0_1622468258219_0.5953027074669746"},"_hasShrinkwrap":false},"1.0.15-canary.369.15fa787.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.369.15fa787.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"15fa787c94e57634b9566332380b46562ac2ee0f","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.369.15fa787.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-7wajvGaCSmoPTHoH6YFsBqrHBnRkvP2t6Iw6mcf8KEB5zOIqXx1zMrhOEOzh5vohKQGJwkOj+1XJ3tgGmza1qQ==","shasum":"3840c09143a723d1c801f0dea8d4b9861de764b0","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.369.15fa787.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOb1CRA9TVsSAnZWagAAbT8P/08eq4NoPBQwoMPjDCzj\nrkDyM+uVb11oz0zR1R5lRjp9vZ8cdcpYPuz74SQeLWFeb3O9xWleDMrSlkf7\nP4mpUpXjTv0n6I2+eRJqOKMI7MVACzbHob8sap2iHC9OzkinEVaUuXZrgR7f\nGUlByNb9toQfLNIyVWM4EIYFS27DEh84a+epTaf/uyvT1erkQLLEjsqAwZJZ\n0pB6q9uXB6t7P2rrEufEE+rWAFVjRjWvoU33OlkuhZcZmIqQS/CspC+yVSON\nmAEUrazUom4uAMk+FhrTO4cVpqOY0CwS1WOBWAk7A5yAkwpS1ypqzX7uixMB\nxxQRfqWKDfjc/tgRA+Ykklyxbs59fdTZTzR96sZvA3c7qfz7N9pJ3spg/vv6\nvdtn0AHDOy47sgI76GESJ4o1+STYKVe7Sbb6MIQBGQGdTQuUalOpXe7QO2t1\neNFH3po23i9IyefRQNOEhqKqI9KSRo9IiQtRkeKQYOejm+jsgHAl33/Dqz1p\nCsGxhJ+ZiY7OpHkZkZQfqX5sGxVz8x4Qdk1kTGDZLHyt3TR4mUcgilLOS+DM\nqoAGvfkfhVJe4zGdm4AUZwE+9Bu7+asYzpp7axafLyT4H3Gn4eRlF0U3LAVM\npWaRWF+hAxe827RTBigzQc0fbg2vgi8klA8gMZXEkvOj2LhrKQZ/8lASoiQP\njExe\r\n=SHzs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbIJl53AF+o0GBceY4KlNSigOi6ehyNEIhpzynaH3jiwIhAMQOmnoqnEQJy2lPe105lSK+7j/2rF+u+kfXgbf/xP91"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.369.15fa787.0_1622468341039_0.38639920849421494"},"_hasShrinkwrap":false},"1.0.15-canary.370.d7e1759.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.370.d7e1759.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"d7e17590b724c96b7bd7d229e66ad582d245c79d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.370.d7e1759.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-YvMVKFn6hPd274p9sygnt8KslYs4kd27o3vArbAYq3vEBWd+TBZmMPyGHPFwcaGdrv6jMb3R7PYotqw1PUIMcw==","shasum":"1da7b7a8c780a87e85415b4fbc8db39732ee4714","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.370.d7e1759.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOeVCRA9TVsSAnZWagAAfusP/jFpgQ6Dt13PpvBXZu1A\nhL3URTC3NNQqTZatzGEySxzs2gh72gknKh/+7j1EAfpS0f8D2WJPIMcHEf3b\nPCpKQaQgjnMjOQwUcCIMvUITSDwx3d3WnuE3nF+5pGdPdWpsnpu0GL4f4OoQ\nMxJJBAKcKtJqM4jjOU0Fpe88mUA+G7ob+ciznOLiT9a5RaH3FjFvSijLGx3C\nhSwP+lp7Sru7HQ8ou9kt4d37KzuVe5CdNJOSFZ+EJPH2/jc3xj0T9Sr9Cfev\nZn98xx2tuIg6vbwR8O1jk6zZomSNsAdoHxKP/CjOqcxJFbh7DL4vHXhuo/Tf\nUzPormgY4tNhRO2WlxCRxja93WC9TPY8oRC3x1V8jJO6Z082l7CQxkyxqlwS\n8bHQgDRNtnQJNdJBi0ImqGhn4CWVRaGGnFi0TBc5bf7cnOpA0/4H/EuUl4pL\ncYaOrTFLNamZHHn+4ilrYz9svcrVTp9zCIpTy4j438aejEeqcmehe8cgOg1e\n0QlRTcKIyRKeGEIk/l3tsTVWrh/N4F4HkZ0ujOtaR4ueUz2iBUWlLg5/N1gd\nX42Brwng+XXCiGuQYP+71gfsjWa6kWP3A8EQ58r7n4ZBMG/OXC8Vr6ypqBJs\nKwypoZ1zOfG9ygXJPW7jmiVCsEDdWHSKu4qUgQIRtsTtZL4FSq1IT8rv+4kY\n/NrP\r\n=wacu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmE7n6jkC5TieLWGn22ocoqwGh6ny4eHLKlJbXETeKhQIhALTggW3nN+ROMSAmjIpZdFGPkEFX9DPQyBNIOmdtu8gY"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.370.d7e1759.0_1622468500970_0.5560910190826078"},"_hasShrinkwrap":false},"1.0.15-canary.371.35c0dbd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.371.35c0dbd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"35c0dbdf1959e770efa03895b36714dd56458124","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.371.35c0dbd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XeqmU6YVO5MpUnr2/ByvRzM7Au6StnezLo0UQ1NyHBI+4U8OZczvrSeEFAIpr2GJEPQ6WOdLs/yDG2wZpk513w==","shasum":"ebb32e3c552cc28985bf785063534ec5edb6e71c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.371.35c0dbd.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtO0NCRA9TVsSAnZWagAAN+4P+QB6ksn38/RNFX5PrTJD\nJvqT/JPJWm185oCMJrKYyXoVeoiDJcuoA+iO1sQdXveDjyqnepbjn/50ZSoz\nx+IW2H+BOcoBc28we8bZ9LW4Tb2iIrX+6dlP6r9kQYa96whNlk3t6p/R4xvu\nlZT5XF6ifgUkDZxJhWmsZgna1uB15j/YcFURgHqpRVgc2cDWdFRPl08k0lNY\ndWY4zCf6h+L9BP7qEhRjD6k97l6KYPXT32VT1YS7YXpM5IcmQD4X6wZoa86R\nXdnS5qkoFqNFlQF/hTG4mahpNwBMDstsnwXPUxBw5WJUgqnh0K3k/FYdmOrX\nXIru3K1Nq8VhzY4O2vnA8Xi0H7gDmYLKbxZg2a3J8QkakWsCLddVZfWNkG6K\nFsOrn4IvMDz9iHnD70E4ccBIpoRnurL+PZzSuYFWQmIoR0NyXSTOpCkruXuM\nOP+plLdiN9iNWH2NDWf5GCljgzapLzFQvy1enbyh2Y+93vjee/lwp7MDAQt5\nftItEvEGS6cXwsCx5UNqtjr+Wl3Qt0wmSFY/KOmVHygnIDD5SLHS1U+hUuxJ\n87/pkXLWLyc45cE2YepZrkFSotRcLJ/kzJD3AWbCaVBaohGB9B4aa5ThSZdQ\nkcpbhvIgDK8wxohSGmI2GN+52K8K8UdMz6Q2HhiITfbc3OhRFjUaf61VrJtV\nHXny\r\n=gvM0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCndcjLnyxbDWscCdOKuq7DGCJDRq6FCteTBgsf52t0vgIgJ/vkJkG3aeA86sLb0ILbeS+z9lr4KibYxAbkFt9GHP8="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.371.35c0dbd.0_1622469900524_0.6930191706709394"},"_hasShrinkwrap":false},"1.0.15-canary.372.a3711cb.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.372.a3711cb.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.2.0","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"a3711cb3f734cc66fdb0274a3008dceeb35b27c7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.372.a3711cb.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-baPzunRsFZPukiQ8IvpMtDVpFPYNcsc8bir9uNjPpAp2LkWnJRMAFUTGGpssKW5sOiGd94MNi72YAlhLeXoJCA==","shasum":"a1006d9fef6a06ad8277da117db16c7b47b1f961","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.372.a3711cb.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvh/zCRA9TVsSAnZWagAANLAP/1dH3W5p7ISgeJPXKsu0\noqcDVyFy3RXlK9i2RThh/VR9KcEjPKb6TfL1Egr9eadO8bCi6FC7PPfyEvw3\nukx1qmQ7b/EeeZ+0EQNkRAwtpLZBUn848xHy3rB5tV1S8l8SapnUDfFyQDwl\no4ZeErL/t1BtbUSRxr/nHx6Z74pgi3EklT/MjKvtBSoxdbwUr8oiysGKJhCw\nnfmOqM2Lm/4OkDC8/7nWmFCnv56fL9CNWrYHmSw/3ba8E0d5Mk1KyCwHotil\nffuVzoPOhn9PUcKMID1zjEhmE3/DbKySSXzpudUF/KXMRLdaD1hWI7cRx3Fo\nB1MpduzrdinOTcN51m8zgLM5/obYlWiEbZZFTgb7Pc6N9FApdB/GZIviM01w\n1nnNDZUQK+ljPtpWXCzHaFKyMUCm5vFzeHIKNu93Izf/dCcufFmpoRGNNM7T\nBv/dfOiqjXxzsPtg4NEE8PFp+PAL1Jkbvbb7RIFPc5zgyvu/tLN3ZA5q3Nr6\nXc74+tBJWMZqgDagYAbCjjVGyNEcZCZU7a6hxuaFnmxQaOLzYa2sA0973YxX\nPWiAs4lOR0oIV1OAWDArCS7wslN/1C3yUdb21uWxFNhOPwH91Qt+VD4sNDhj\nE/uCHKmWkiUWxJ9+lPuOmLBEnhh2eXoKDwVd6fApYF7foXvgpllcnb3DSsdz\nLAoK\r\n=kxCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDTOL7VW1DHoyAF6KdvBzSHKQ7wDPyo0OFkXOkfmF4IAiBWuOPQzSKYKqgeI0NLPfV2pam92nvYXd+9GYgD9ti9MQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.372.a3711cb.0_1623072755320_0.10086694089253201"},"_hasShrinkwrap":false},"1.0.15-canary.373.620d80b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.373.620d80b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"620d80b6a57754316c0d5ca5554c8177217ace52","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.373.620d80b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-K1MJqmThtRA78En5OWCW5KQDrOO/sxDOCq9Wb2GUKn8RdUbl8VoKRx8HjYqtUUA3nb0R/IH7dcaamCQZ6fnA2g==","shasum":"4348ae79b15f497af403ea4602bdcf2b3704851c","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.373.620d80b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgviLqCRA9TVsSAnZWagAA5TAQAJQZgdb8vzDRAaNHcwjf\nVfZD0nxXBs7l+faKiRS3RcjCBiImRqgnrkN/RTjPT59eg4fPk+rV3DrnII/Z\nMkrCvgq2i0IbT0HsrPeB4VY0RJnOBTYCS1OTf6l+KEeriPDIyhpYGXjaMv+z\nVwXbLlPmb7XGVH0GC5vqH42a/kze0iYD4ghX2XVshKF7HJlG7OpGmw8ZoONg\nkiji0/71J//BYrhSVIJUvbGgrWGEJysUzEAvR0w7ayb+HLfx8sA0Tq0Gr9Dm\nxADbsULvly1ovbO9rrJ8s1wZbIhkNbtwIi0SgDGZlZ+LDOa1jgw/GsQ3u/Xt\nWG2oYkrmXEFdcMlFJiMzLeXvYXDo7RgsuyUPIQrlMFiKQOpDc1FrcRo5nbWB\n7Q6jlKbWWJnPVeDQhhy5uoF1VSiIlZhfK9BHi/2dWoETYAjLfmXJUcCrlL48\nV1D5VYpQdecEUGs983FU/pyJxel1lXTBIIGpAWQtxxUjrSaGQ2w62yutuqbN\nzNoOMs/A1tZe2/+jhiY01WcKzL3TNKpXSATTugIsF1URfCkfMOVQsBnrykcz\nxOAIxx4edpun36jkQu3dRsSh2pdeCugrwz5pyEX2kkecpVpUe85F50X72UIL\nNtFxHcz4NA2wTkOikoddFt1m3DuDXF+ne8VIGEs6dFb26ZmJWgqrZzMNzFcV\nYF0B\r\n=12P/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQtpzVNX5GoCGBEeGVyTwRRTzSoBklms5PDiJIQ3lUmwIhAKFz0rF6/lReiLsoTO8picgzOcosFuw4mCT3B5tEnw6x"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.373.620d80b.0_1623073514482_0.6007755388368041"},"_hasShrinkwrap":false},"1.0.15-canary.374.937049f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.374.937049f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"937049f00150c0e3bd9aa9c24bf41788aa154bb0","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.374.937049f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ffQZ4P5PMXc9YeJ9fEq/4a97wekWPE55wg5BCjW5q6hOjizbZXJCo2znTkNdrTkCkjWb0pO68J+lLcIBeUwlyw==","shasum":"8750f6e2f48196e7f617138e3ab8253a83846eb6","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.374.937049f.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx2BoCRA9TVsSAnZWagAAUYAP/2J6ZAXPhpuwJBPNc0xQ\nPYw+xtlAH7+DBdfNBVPrWJ7bVPv6Vqg7jWOROZC+0bMICXPVTG5Vs7ttSm3p\nVRPJK1vKUOa7mhHQRwx9IDcHLSkgbCWi3XC0zdQBstB5YlacJ2O/NoLDbgni\naL9b8DGubii8gpK7QyRhFN2RxFe8kBmUv+uMDtdc384X4fQ4xHkXw1s0ejsl\nypbGmjeKaBHPBp2wS7m5EDMP3luwrzKIpV5cetkI34wy5fEiO/net7tNppwb\nuppFXMgmx8vPg4wKNc7PWKAme+iqAs1VzffF9ZU+G/EhhijJ+FJSvBLCaXCm\nQdVrPl4rpJcLBUPJGG52Op9UMBzSbzMFa99nBMa0vFeKU5/tVUp7jMXHmeV1\n3eLXiGOP9ecJeJqhUfv0Z5mzPMgirvR4rECBrO5yUbW8pWCXLiQx6038ajf6\nuG+teAoQEMh96W4P4agg1d1Uk4HMZ/TztrqYHkEmitQQptv8wyjXUzo6Ql78\nkmQilZAr4A24q0QI2BlciW4VjvYku2HfMsT7+0JRpnRwuQczKXDJ2jSSwElA\nrQ47GKlpX2aY4AluMLoQLp3+V3cIW+Dgid1I66BROGJeJQGWpluABfTvxVGf\nfafg5LicCv2NDdAdXXafM7LwdvESCfa2LcOMPrCVi2qRyyQVpmOipaD5dVOg\ngk8+\r\n=APh/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0YaxImYNwPepCUHNfaX+vfC/uup1L3szGP5LyOPPjBAiBPd1zBzh8Ls+4/2Qpn6ZpI7xL3FCs//k0lBVBNFPWJJw=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.374.937049f.0_1623679080683_0.6688589739324478"},"_hasShrinkwrap":false},"1.0.15-canary.375.836a1cd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.375.836a1cd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"836a1cdc22d6be0f0c1975eaac4edfea857d4af7","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.375.836a1cd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-q0Suel6dYRPKrviZ5o3Fmo7e1UvzYlxQc9KxiA2VXLIDlaxoESbogFVLNUV/JhOpfpFa5EGzykRnXDEcnBPY2w==","shasum":"97325a37649bf5b5d8b59f6acab22a4201f6704a","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.375.836a1cd.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx2IjCRA9TVsSAnZWagAABoQP/0HlkxGInfdr6L1cPPZg\nZOVWjrtyoVcyxdB2YrE/AqHSYSEMQb5dW8qJwc2sPeU9MJncj/mx9aGCCQk/\nuWCWkFdqcPxvfzr9uobBVfv4/5KWQOOfguKq1wX2TVK9dodohAU4ECVaNBXD\naEdrrf7j+W5Jq+ahqTA17xNIxZ4c3VEq0iRpsBeSBt+kvty32V+ZtgKwgDPf\ne+53ErfNaBVoh6LsaIR1v7q5e7qJVBky6XKJfivcpoW92869zPTU7H2hTxIg\nVUX0dDqu82mOeN5UEw/3+Ihn3UcKDdntMEpoilCnDToQyGh6YWo+NysFKPmz\nwcBu1zQICxaOm15k9tFiGmXAAkavfaQZ69mGeGkxwcsujEQ+rsqfeDvnyiWq\nhn7/4v6iCeU5j4NcdcMyLUFaKPiMNLujleTyI4r/9/nwTyYDGNmMNUPx1D2t\nOK8rz9jTKv9rUy89qaKuQ1Ltv9wMu+NDRSEAHOwL/B1I2YJfSvqVaqrSm70U\nFFB59kuuic8BagG97mfra75Lnin6hCnznxxlD/X0AfDU+XymmdGzJTOvw/Lx\nDyNxetydEKokVoFI8bGhLcQsN7rA9UpLCDP5iG6kiBszuAj1jiNOPidojMgM\n+HYu5yrhglXuyYiMePwAhH/PcZjJXizwAP/2XdJuRH7om+Te5yRzLMkgdMpd\n4FtF\r\n=VHLX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeN5wWGbn3Qk2gmogfgBBl4okNTpo4V8lxrugSFlP83wIhAKoFy5d4D/fGECXF9ddikF2L2kr9biOr3jMtcYH/ouxy"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.375.836a1cd.0_1623679522938_0.05222147847225789"},"_hasShrinkwrap":false},"1.0.15-canary.376.652c984.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.376.652c984.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"652c984fcf89bd1b3c9e0384697cc41c1443aeff","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.376.652c984.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-X8OqDycOwR9uGnQH8FYhd+89uUUEcR/y0dR4voiIQcu7GbUkLgtsRpw/gQsyOJqeFlgZ23a4xcKui/ILRu2gtA==","shasum":"3282c2a23d07b3418d42d6232931ee135ff15243","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.376.652c984.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0JiPCRA9TVsSAnZWagAANyQQAKNKqy8J08fp+wlXpfQJ\naMwrKB+qdvg/jlX3NMYNjpP1DX/x/x3omQgiqDov+TnK0dufdfKX1syZVnYS\nceh2R5/8ZhGA+jCwaXIlFiPKyWkFNsmHD7JKNHaB1MWu+LBIypo3eZMYagWN\nb0JgnrFH8FB7CEyVYNBspqsxsCdJFs3BvOdXos+hy4UOyIYHcsy18jwf1if1\nHRr49C5S38pPlYsp6CINqkTAx0yAvr/zpYaDqcKUkHr26gqZJZpCoy73iqxY\ngLDl2UtWokMQHKKgABRaQDAecJGOK5fk2xDgLDqWfRUTk1K4jq4c6K8Uk1qm\nKXTdzky4UHu0xZgQJmYG29byvGo3C0ggKDYbypazKFk6zIvKGntRAWKeOPFp\nFhDyBG6K97Ibvg/AypRWEGF5ciVdg3pQE/vNZjrmadjDY5lNwGBBrqHHzMzV\nwBjZQC0d4CwmEV+yHU05ig2zbSav6fYVct1ygl78ObZ+suc5twoSAfMbKgbr\nhjZO4wUvi50EvrPWcuYotFA3SDmjRJc7Ic8TUtNUmmR3MTm+4jj7ja2uAnLV\nWe4K4X/TDubQ41ilp85RmmVwxqS8JK3jrCR68bsWWolNbwVfMeX4g+CK9+08\nsM3xVcG7jd5EEMdnYHLhz01cip8b4Wgs7CX+o6LE9pvQKOun7cjWE3VYN6EX\nIvyl\r\n=PG1e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTGfg6/N3H8Y+XRV/ZqI3hp6xPKVOQlhAA1F7jb3I7dgIhAP0U5EywZMwTxlGAnkCcJ8pPLRMz+S4DgOt850ybHFGS"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.376.652c984.0_1624283279050_0.6970310284043713"},"_hasShrinkwrap":false},"1.0.15-canary.377.764b1c9.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.377.764b1c9.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"764b1c97e84a1fbf56061833ce888c2efd54f711","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.377.764b1c9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-U4aZqHOcNJ/OFaLlOiHj22d9ukMb8aHWpHx95jwJhXhXo55rj4+gznntPcRY581OyQEAivuFpc3Vp/i6hl51Hg==","shasum":"f77cc50db8bdf3171b1165e057580c6fe1bc8d2f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.377.764b1c9.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0JjtCRA9TVsSAnZWagAAnxIP/3AjyLy3QzVhVh1+I6XJ\n/OKadqz38enVQrg6C5gbwJ3vw+fcoMscCx+x9W2Tohrq7/qrFKwzIZKyY6N0\n7D7UmizZ4k6aBqXgFMHkRUkG57V+8qdThfvaMmSzxfNNdkgZ/nsAT80HN02b\nnNyr23IYfatERog4uIPBavIGYan0BQ6nbmO58f/6rdgVTTXKvpxHobOntYh9\nMj0jhxdl0ERPCvX0bUK+Yc6yE4AbzJWbxe/YXsesbkLh9Y4TpAwXZD8FF91K\nm6UovGcvkvp3eojoWYNA1M/vrk6XsOiaTQ6M+ORhi2CJ2r72PFUAG+7ZRZNK\njKHngjoJTNfrljM8JBA+IjTwz1lcVgodX6NFazTe+W+szPoboiB+ndcfJGYf\nOzwAGe3GIg+iOdS2IYVshwOdQC8YKOfSWv2xZ8X7SMW5jRd5FqZkvgOd5mxb\nBOsYr7gV4VtZY0RMVjGq6a9mARUPQBR7/vOOslocjheawMf3xH1rh1Z1/ek4\nIcG+lYLhZFBUdinlprDCVBlUHSe1OnhgXmXL9dwomnn0vrHs6kYi0Tmq7Wh8\n+RgvmDDbUEvL/8DMb9vIkPIbSazABBHeClJhGJDZPZKuRvCYRGM51NSgaRpq\nH4xldASVAzgtT3IXlAYuuNccyaDrFj0r8Jper49CMhKLQrwixw4f8srwolar\nrWlv\r\n=CYM8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICl1bL1CPgYQ6mqQAhKWkmFuzuzatLz4a8BPyL8/bzKtAiBCMHJfAzcKGyzBKTJqNI/lnn/tkUyoEPdowJFeT4z2Kg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.377.764b1c9.0_1624283372949_0.9282515435078866"},"_hasShrinkwrap":false},"1.0.15-canary.379.cc6a830.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.379.cc6a830.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"8.2.1","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"cc6a830d19018415f2cdf1195c7ec15b003b4274","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.379.cc6a830.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-owTA8tfuIzt1g3ZIrKXH9dZgfYgpRw+EhSmwPTkQLjX11WBgPBfzS/YiBadCoghDK3jBsIKS8PUWeGWtMU86dw==","shasum":"45300948505162c2965c9dd4a1b818f0bbd24744","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.379.cc6a830.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0J1rCRA9TVsSAnZWagAAI4kP/3Fxa+axuOPeBOIiNBTb\nJRB2K/t4JxFkoliWyVj8RaDS1c3XZeAe1FYf5FU82Vejkrb4FTUDgegX2T8m\nfdw+CYYN44D/hOB8oTBHBAPjfAUnr4j/M5fuhDJOGIVIOjXx0BWblpep5Iwq\nkwU7osm8iVanuebzWRwbqceqcN4Y9TgyF/9GmGLWBUHPYSpOYF2F+t/yNKtW\nI5AzKOTiNpprDuYJIR2yXEDThZarTm3rymT/tocU1VxUtRJVzej2sdOJwZDK\n5pS5vfpRAmmFaeC7UmqtU+L381UJoCYfC1xcN+35WcTca1kNItNtg/5CFnh/\nm4oKDKsFYg9y2nxZoYlk0yS5p485zJgCutNDbc6lx0gOPe3+VLPajkty3fb3\nrqiojhygZbnWsXqS31cnJ4GNl1YLkAhGLFdUsXqzSA9Z1RB1+Mlksrik8k29\nw70vGu0S6qArJkUZz4yRXotVFWs6cEhGOxY8dFGiZSXZ2QnP1AJwxaU54Xcm\nks9SKXq58BOtMMLK+n0pdrG/wXbNN/CxsJOnHrAhHdHw7FI3gADs4TXeDPy3\nmXUuLUMpo3mye4LdxAp8UbvM0ejWJB3nxbv5TiZGlhhrhLsN7g0xPT6DsrVd\nZQsIdd4vcuzH+DuMkxBsPiBWHdlgdwGIXKXhyydcMXXhKo/+jLzc4xWfv98o\ngCwT\r\n=4OOo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTXixOdffxZSRouVOintzwg3NEsH6w81B6XRvEea8JSAIhAPuD2rJIPd/TMdT2odedixSRI7GuWdaw8pcy2Ucfzgt+"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.379.cc6a830.0_1624284523237_0.8847999556625381"},"_hasShrinkwrap":false},"1.0.15-canary.380.16cc91f.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.380.16cc91f.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"16cc91fc4c4acb986fe4ed825669a2fa1f9a7464","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.380.16cc91f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-rmD017kqbsPczB7dZ78kWVib+riGKQNPHBXk6zTRTB2GKpJwKZ4a7tJ4QCV6G9WF07RSujX5619hDTCO5bdCyQ==","shasum":"fb60e822b9fad1e2daa1d6a88553eeb010d62d77","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.380.16cc91f.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2dFtCRA9TVsSAnZWagAACWsP/jJboLQOY20kaaOB+ujh\nq8MwmwUWCQ3xLuv3lY6mRwuUoIsgu/sjpS7e/MSjjvCTVv/Uvdno/CvND4xE\nzApo+QRReUv82tXP5v85LNDvqe/p/YmS1cvQX3ofTkxQ7cZuN+hhOYtft6QB\nFM09njHyhsOOziIdHClKsT9Q0E8/wujsgR/OEjzH5N+ZxAZRWLwENZrkTlFV\nLdFiLj8LxZBFslbVjRRqUR3P3gTTBnGRpZTeoIDCnaf86DgLj888k7SLXkBu\nMpodQlZi4Ouh7dcBq3Dv1shGR63Yvn0OrN5YdiGSWHdl0FJlvqzHj/daT/XS\nUKct7CYtXzJauIT39rHlwnTbrndeNFRObOw2yIvJmyyShaUOZ/R1X/S6mjG7\nDFdJtsGO2l5HBiz99d/NHWLSHtYNmX+kRkr8wlYGp9wmxuGCZg2DQ8ALMZ3u\n3JK4RdGkBbXK7Z+wRyra9P6lqd2X7WIIB5GGJGGq8FNEM1GK+tlU0b9TiK7Q\nz7iZjK+eeB2IdGl/Z+cpLNHEw4ag9a9iiTs5QjLSkXBKcUmKkOPOpQnFNHhK\noF5/8BeYiwVcbjNEZklQxUUt73rG466/jP+wtPnwcc64+EalEMnEiU4wRWqF\n8wVKCIlyVDLUftumWF5Z0vHcG8P1+IfycoefnPKsnMlE1z4I55Rvf2RMpzjO\nNeDZ\r\n=8K55\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqhgQD2XLCeYN+wkUa3qAru7l9BkzxltwsGOGhdFgKeAiAT7TIKA5R+KEXx9RZ5PImq5PacIPjgJqoacCpJkgVXWA=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.380.16cc91f.0_1624887661136_0.5619154113170004"},"_hasShrinkwrap":false},"1.0.15-canary.381.e9eb093.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.381.e9eb093.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"e9eb093a34b0308fcabd5eb745497b8efdf134c6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.381.e9eb093.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-pDPpNNWwjvK8feXUnqN/7TUosUiQTYn7Gu8Orc27kEEIhT3iEBFC7hRY5O2kQR8ijtS0y0Ys1u+L7GvBk9kZfg==","shasum":"7a267075112f63e9ce16398bf2b15e0054ee1626","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.381.e9eb093.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2dGwCRA9TVsSAnZWagAA6G0QAIT3AyfsURLT1Xd1zgPv\nSj/YDg4uyJl7ooFo6dQZFIRAOa54bKtNUCyaRwdz2DV/egTy0XxJGoDoFjRY\nsmdzi3zadGVYiRnazYI4p5Oe2f3fWKNioCEh4FkCMw9xK84K5Lyc91sYK7Au\nFWGAfuUcLZiutsyoFYXdlorHZ8qY2XdkI5QGK1VkfzZ8Oehg+IWwd+ELBdg9\nt57f+QDZD0ls+ixMfKkuHsXEQw6ycgcUvyEKIIJ3iCifdVdW/w6A8Wrc5Lqa\nDu1NEOTkpgl1oWxuYy6dLTE0zf6aw3knDFcjcyHZEGC7veZtdvLgegGlPZgm\nDUjLXhckRa1/adBkj9tAE1pz5tEDZFZYqC7ixEtp1ikAWlJyNABeRJb8oEBP\n/t++DX/MptvjFIfPZd+9nsR0jwaf+6czvvE7Y0/cp7RX6fjE/yRY6t/Iw4qS\n1t+i2uazE+mBI11ydzMw/tHqAd8aQVaVYGE4t3GdpTjxUpgshJFK1SptctnY\n7vFfxbnt/eKCwtYU1ZVj4VVfa80d2+SN3ySWgShIBJor+NCJmv0wf2zKiNm4\nVCHZnkVH5bpWZsaq0+XmEcR9/pqoPRjSO6b+PrZ9yx3BGEwsjA+4Ct4dvba6\nY7SmenqUaIL0mSsmDeHTa6tQ7ystVWNMJyw9GWbSvH00FJk4gp5ZlKhsrtax\n8f16\r\n=PKcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWMZB89WLmCF9N3xymH6egKKEAepyrrYLC3k9y//cmsgIgPedybs5MIdJQFp6yF+qgctmIi0Oz4dE0OrKxsAOlf9I="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.381.e9eb093.0_1624887728126_0.8765681662194662"},"_hasShrinkwrap":false},"1.0.15-canary.382.628b3cd.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.382.628b3cd.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"2.0.4","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"628b3cd68cb03d1e61cc232a3985d34cd8766456","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.382.628b3cd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-d5BX62oQ0sYLv8EINe8y58aPVFTSOyFsFLccpf7D1IkdjTYdGiRDM1CE4oIUiPy83p3xLs0j14SaDWxfaq4bfw==","shasum":"d3c3dd12f33d1f31314a761ce5b4b6579cb6f061","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.382.628b3cd.0.tgz","fileCount":171,"unpackedSize":2492660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2dWyCRA9TVsSAnZWagAAT58P/RWOazenLUG1NeyXsG8W\nZKcZP+nwSVuC4+Fwh1KHhm8P8Tktf6Od2i3W+GafpFPxAPSyZ250aG26sfan\n5Q4ulW9h25h2ZA09HAYOyjUJIqafGdjmPoL/11/BBHRTBejEAKY+Z0SMTEEG\nvEgJnHislHKVrKe6oWgCCAOBXCHIesfBqVoruoREGCKHOiuUGf7EPzmXWl2X\nZT6rjbPa1/V2iulNzmzaf2LxL/n0I6BDUl9TEYk5sjjtKQfdJlC6Ou/skEtW\no+Hlb6xD2zh48WbvNLFSTsvJuEOpg95ia/y//g9pzhDERIw0ZU3jYjjkflsP\nl2gdMJPikH3vVTFH8LeX/CZFuv0Ne7DTWN9CD2Yw30gb/aHvlWLmbTgqtOzi\nvmweEPkscXi3aF1QwJkRQKrI+p1hXkym8GipmrcgcAKjMpkv7EGP5JS8bAG3\nlEBEk0EOueQhM/OW+0vjAoMkxi7fFyeV77pKSTF0lrZyFi1Wo6K2ETlwxJ3Z\nh/OfUHGT90Z0/LeDY1JfdM7VzPnynFwolqgOk36OXrgPnDNbscXGXF0DEn1m\n4QeY2zhKwuKm2KGl1AnvBe2gYu3fB5bHE+BKZb1IcGRtn30Z1HHsrBe05Hja\nKlWnpIt7hMcY7rKVsLkP94Y8eXOR428oVVReyRARUdyY1asXsUf7lw7pV/1F\nF78v\r\n=3cmD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG07ibClPwzj7h1cFKuKiTeHUqRUwql8mMIWr2AqQRRPAiEAtAWf/3UdSTdq8bEtwlijjimxJwtpmXVEeLcwTLWZ4Fg="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.382.628b3cd.0_1624888754092_0.36623302263726787"},"_hasShrinkwrap":false},"1.0.15-canary.383.88c5e64.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.383.88c5e64.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"88c5e645cb28a15cf13263c70ba2f958e698cb8e","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.383.88c5e64.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Tcd/dLSA+l5i74gQ2yvqDllB/pEr7Nd6WShKJyRHbqPi4zhyGJfMG3zRHRvnf5NCSi2o48P5rVsbsi64scC15w==","shasum":"1b0d53229144f36a2afb10769cf98b454a691796","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.383.88c5e64.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2dcVCRA9TVsSAnZWagAAPqcP/1znrrhw/JogQijPy8rn\nrQ4kjIHCVLMjp3rw3ZhVgVs/YCmFworbFeyzs4lYtEgrDvKCHHnv3+MeyBBl\nyGHIGNPQPG7M5U+jLQxCdV0fJ9YE+zPv0wv+g2nZH6Tl7JnTgA1DSQy0qB73\nOvBEVeQC278bHASwZ3m0lNvf/8omW6DNCmHV49XcUHWiyLV8hgMxRBbB8AHg\n3EHz1GcD49g7acl8raWjOhydX5nDLnxeBv/jIY8vxMBrP3wKapbC0j+eUc18\nQFIXrC/O3E0GXtQV9kpmoy8bFT9vr8S3gSV6HzVTAkUj6zl1PpeeaaMQkua3\n9jlF0o688z83DIABR7WNxE0lstTLV6yjGcj5QKlRyuZVn56PJwg8YGuprex4\nhugziB8Y6rF405gg11QkUSKn/IotivDOWuixV7jEnTuHvdqXjE4cnIPe22Wz\n6KshAq0vKUV+FJOPukW9zt7amXmr3LGI+5UdlRe1dZ3x+ngC9abdeiUPrlE4\nIwDz6ZX8hJf5KLsjmaBuN2Y5Y6uNnzt3Z7PKiOUdzV3gGlebexSZoW90/SUM\nq9219S2rsyD2W3l694uYxGGj6r61hUdjh5rZ27xMAZDiccnrcsOW4Fa82Zvy\noSlAuhrAY7KStCRTub7N/syq5GRiwUy6N+j1iH75aBLc14lB5B1GLvRIAgkj\n91vL\r\n=HfoP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI3QAsL85oHR8ytEWMjbbkhZdWcInEPZOX4qyPZo1Z2AIgY40YM19leoufNJrdgeWYtNpgxeMAruCdMhmOoGsfUCQ="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.383.88c5e64.0_1624889108888_0.8067763849384031"},"_hasShrinkwrap":false},"1.0.15-canary.385.4d0774d.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.385.4d0774d.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.17.3","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"4d0774d191e74748d20513ed0eab1503467bfa39","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.385.4d0774d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-NsAqSLlTc5RUiTSMgd4iMsaWPV3S58NSK5zmN1n2hIJveWnb+SyG+Bx8rzD/ofm7CRSycOGRII9+wGwIOJKd/Q==","shasum":"ee6a31fb07d4ac0dd1385212b77eec479eabccf8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.385.4d0774d.0.tgz","fileCount":171,"unpackedSize":2495465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2dgHCRA9TVsSAnZWagAAEhQQAISphATn86ThM/AcSh62\novIIxw5E9Vns44Mt8HXxXYIXCNQXnWZvLZalya9ksVS9uuSO1MpW6OKUuQ3X\nRFpfMoTxW0dGNjR4DmuGvIp/ttgQkiVb0IcP9CJyoNKRynzHtFDO9f/4fc5V\nrERvwaGqNtq2U0LaSSUoT9r5KGUPS/ojYXtWtP9ZF4JYtv0rdHcuX/wOSJoo\nzXJGJrcqTmE9yB9o7JPzyADnApBxMrBEfJ+SFSFpgeiNnmPE2hvkg1Zij/lF\nI+EoyRv4M4+sd+Ty0H3kuNpMTrGKMztj8iYRWKj3O5WxJ8wq/pH3RapNlnBB\nYY8TpBHAR/WGlGfR7R3tuHQiswcMuB473PDKa+wkJrypGIweTFzyHvJ3XaqP\nSQkeXxKQNSu8DYdjw72E91NuOGkcJ0ishWtNy/liJhQh4aLJvk+iNLLT9wjZ\ncmIfyq6fehNcWUQxBulHLAec1XnZdD4NSDOG0rT0xl1BHQl09aY+DToq9LtS\nb1rCKj2RmNFqfi3YFzHLdjigRIDVNrekBmYzdrccg6F+V5iASPNYvwAEqEML\npezjGT3knwdrcMHFTpOnimxHyjLr8qMh4yHhFDtv0uLJoKieYCZTtaTd9Xxv\n/lrZyd2kQBl5uWkBy/2XG2S/BMsQ/mg6e6aWumdCpDDURQSPCRblG53CAtir\nGvqA\r\n=EieT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg698pQ0F6pWz5fiAFiYCfRVZ+nnhT40MRNcBNXGI3uwIgZrWZBx4qkDI9hdGT0sIaL7f8o2WXwEMx47CKsAQs2ec="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.385.4d0774d.0_1624889351451_0.5631951972569791"},"_hasShrinkwrap":false},"1.0.15-canary.386.4f5a7f0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.386.4f5a7f0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"4f5a7f01dbdcef4c53dbad768186aebebeaf7ff1","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.386.4f5a7f0.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qNcwK4sofq/zDIuqKotCbvNKRyc2vrrLtdWrRqGWPmybhqV+jpm7zRVr0tQ5MXg9CoNy9fQBviV8xtte/NcdJg==","shasum":"b61f36f59c84fb73542cf46b75ddd5e1fdfd63f4","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.386.4f5a7f0.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4xFMCRA9TVsSAnZWagAAaecP/0AJI4fFvvKUaW/a9n4b\nDOzai56yvvH8HVz4KsqyIpRkQI5dsoonoqvaM0UBvvVJJT0l7LHNMzIU++2d\nnvje5hTdl3Qu/vq50lX4ze6W5xBPyfrDWKI2teN5lX0MXHz3uXUbV78v5xa/\nnAFU5vvjtHrpZsdXdWqEB64Glpgl4AWv1pvcTAWfYGlR9wizBZKM2ojJtjSV\nM+xLYSkWiihsbGU6grRmyjmgsRcEBtYH8pU3GouvHke49lOMdilI780bONCG\nmpE94Ts4q+cx/I7E5ZEu+F93K2zVCxZw5NIsBb4/bJQVqlsKbeIEC3IhXr/D\nKc48f2nryEhX5ENVLI0hGkB2ffElFtqqjz5pw4E8bjovOc/DDmUGshVZoHdO\ntmQyN+u3zEujFUV57Jj31nzJuQqZ+IbAiKKTek05ubj8scRWsMQX81saxDRd\n3CaEtJqk2qF+aGOVp5lds/fKSOMVl+Oiqenxujxewz9BvsYVw8Q+EuxZHMAZ\nbwwe3t/JWXtLwINb3HRUCehwsmaRNeGldiaRBJq4YKbgUAVgbVWWutqVMPH+\nilS73USxyqlRDEOvheED3Zjnhv6Nz/QMVxRJ1GULDTaWM5BuOnxsQVrc04W7\nigxLuYkj2fn6b2l/yO3vj5PVdxJ0z+HThkwUPXaw/u7Uok3r9FRi/v68tVkK\nhmmh\r\n=JLKW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm0kv2P0Cej5KCKztZto3KE/SGcemxbbI5oQfNaf2F+AiEAyAJ5Vd3gShAhpJP9kl3yFoYgdVDl9uFbPNONmAjlcwQ="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.386.4f5a7f0.0_1625493835686_0.897050872677881"},"_hasShrinkwrap":false},"1.0.15-canary.387.1ca04c0.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.387.1ca04c0.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"1ca04c0d8b516abc2d1c1c9a5c755b70fdc0b798","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.387.1ca04c0.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.20.2/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-NDH6fgLhVjV6a1xLyZ8799IRQ4Nllq6SiDg9nrKZ53elqWkJgjbVSjTnHlE8tDxL8Sjf5D1f9mMYIFw0kHD5jQ==","shasum":"7d1c9329e1200f7f4c1dc221fc7f05ed86dec3a7","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.387.1ca04c0.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Ec9CRA9TVsSAnZWagAATWoP+QEEgTAlNW/1ijExbb6w\npU3+MrW6g9Sq+ooIo1zsHFNbBctk3NqhrEpT9Qp7moQq22ZxaEc2E0ZoCGmE\nkER01f7qxt7T8oQ2sPLQuXst166Wnwe041pQIOvQCNd7vCKoO1ufQQs/PuR6\n/5SE/29Xk1Qd796/Ds5z4rno4obfmcstZEJXIHJk4wUw5odtjYLNZFkEbm7j\nQttBjEWJMPMZv/gyzP2QrzPTDT1pH0YZ9pXmmkPaCVbhc2a+FNK3NDd3btBi\nDQx4npo7oX3IqSDvnpUNWx0F4diYACBN/xAl30Ll0h8DeX6KnqT2UM1JHlrL\nT9IS/ae0qfxifSzmMEJA5v91KkUpQICdviDutk8G8k/1hH/sRj7z/IRThLRS\nm6vwyGNdDZB2GEIxkyz6VvU3A8KyX1G8yQEcfhQ0Z8XoFygfCfO+VTegpyg/\nN74Ypyro5aMfOZP3xpQlfQoB4hZi1vXNqQjnRATgCGkzrnjXf+sCdNTSkPHh\ncIrPWb1G1FqHnqVfZCVTW0jHLNE4nD0QYwBvccSwdcNsV+r7Ah2swweB5D1Y\n3z5cl2lEYdZA6HItaHXbURXfbW0kC5Tj8tczczSXaWo5ejChrU/rPBaI2zHW\nnZoRSBPDRhm4qTaA75LPXSbkaUVMuuSqqPk54xsFtXO40HpxQF9bf2e40mIa\n2m0k\r\n=CJ1A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpeZpPtSNMjWLZ0JS6fHqlWi8Bz5blgoZS2uiyMBJsiAiEAmCm22U3FaSjhNuuGI/1KpviFRHMhvF9XlAhD3BZ6GQE="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.387.1ca04c0.0_1626097469085_0.6858184484671843"},"_hasShrinkwrap":false},"1.0.15-canary.388.6411871.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.388.6411871.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"641187165ea8cb04b4682fe920351cdcf5fe7e90","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.388.6411871.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.20.2/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-U5Hmohpge3ekd7b/YB/IoxkOnpjjvWdCUu6klN0M56sN6FNEASTDtWLx66o5zOduS2KH4aZ+e6l/M87nRrOz2A==","shasum":"e8799ddf21de0b43a6681ad54449995c4bbb1c9f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.388.6411871.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YpMCRA9TVsSAnZWagAA2GEQAITzCj45QUdaca0YfYBC\nq4o3AWKtUaaDA1bUImdXabl3wjYs8F2n7UJZyRMbR4mF4NAqioVtKt/HG464\nRnsmn6X3rn8HpVnCBONXCkT8dpQrKIfe1YOvRt/v5N1SusxN5iug0FTfLIEz\ndM/9iazZHs1dwvbeIsLHjon0xcUqxF06Vv2hFtKvI5p9lZZyNeYNSvOB+j17\nqRgYlDHEKkPejjrMFXvm7gtSSk7QXjzYCNA/EgIhwaaU2LmkyrHFCEXJl0Ys\n8+fw2mzpRhpU6kzDMbCgjUdC3SBJSHfTHn76l39XMxAf6yiqhJADDEV+dPd0\nKHYQfQHy8/U7gAj6b4xEWOqjwO7iplwlBXXxg18O+5Fk6l2ReUrRpuS65zmZ\n5ss6pLhTgulAKA3r6qx8QCxvsjuJ25jjexygujthjJbCOW1wTsoHaSYBCpga\nCwmq0Zgk1y/+hNBhWeBD2cuJLW89ynpWvAUZyn2/aodby+g/q929YEQLgCsw\nE49ts54GE+6yymv0KWvAcF/u2G0S95DH96YxJVHJJ/XBXVSWFxJEi57DbbIl\ns4Nh+nJGUIfsrf0AV7Ilt+ZjfkUxcqOXCLeMmfOJELwRrf/rZWCLRPbwN1YL\ntoxedBmo5tGFCcqOyqQBqIclRq9F31VorlH1KYymkwedAyZ3HNtu5y1SALmj\n8Ly6\r\n=MOdW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAm8UI4wbDj7WYgPIh2gZda0zFLDPw+a9Z54mqTQb9BeAiArfcuqO3rHRusEnB8kRgdVDMbLjuiZuvDnDD1x22Ikbg=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.388.6411871.0_1626704460316_0.8457910754653228"},"_hasShrinkwrap":false},"1.0.15-canary.389.373242b.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.389.373242b.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"373242b627b4096655f684d9eb26995faa8aa357","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.389.373242b.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.20.2/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-HwoJaPLeM/iclMZYFo5tzARrHF1xlXe9c7+Jgi3t2S5SEmA7qJ39Q1iGSAyUBhIrAlhfWqiYVSVGoyyIuYcZ3Q==","shasum":"e6c45ae08645d1f8121ba2b13ee97d598da88967","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.389.373242b.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ryNCRA9TVsSAnZWagAAw24P/jyQLfrieXS/K1CYDOzZ\nyKUwUTPEevd1i/F3OQcOuXyOeO3y5/H5jVSTZE+KMyqndBzuwpetPQRdbt5m\noALtD+PvRv1eDoikxQaMxi/ISlPYh5hqDrtL3IKbHtUzNpiCvlJ3CXPk905U\nHS0mNdFKYBIH91pG+6z56MpefSPH1NVL9u2ny3fUP3UueG8tvgolDDH91tfQ\naugaNDRC5WRWKZHbFKD4J/ekVpV7KxEqCxg3h7SERqzogi3TR7LM/HfKUXVB\nP/OK3AY4tOrq8v0VyKdKH4OOzoHIAN1Tp8Im3+yg+BeIcZcuGoM8hJh5WX/m\nKWt5i0TmfUPB+PpIHMeRt3ryiG866YWW6BHfzcFdmTxwd0L6nAAlinCqbVgk\nDdKRrzCuC4Qh/xo9dndBud5Hc4Kb5o9DtNJp31h7pBvIFROUHxXZ6SPP5VGW\ncFPOp0wDlFUoxO4oYMPcYVr3M67sExXbXq0G8I2Y5Qds4UKRRbPHwAm9rhc6\n0Iuml7eL/5ICI0K/E4Cq/Itqh4HTEoP7B8Eg3Rlh12O+AdhiVpWYSxeq5dEK\nGFEYAwBF6EVYbBw4YbCH4hIBebjgcn/51dV+A3SFGwRP5GNzxXnKlID49/AF\nLD3jaxfJnGa2dqn7zamhwVNKvBJ0cC/sBMhm30Bl7yahphL9TKdt3d2IBBzM\nQkIx\r\n=TWnU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwnKAH2VHsp9baujBNWY0AAbojkKCMyCG8ODzRQ5lPdAiAjzjZGDY7NPKBFKcnit9wF9a6/Oyc7LX0nfwsrtuCC8w=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.389.373242b.0_1627307149734_0.6281075925559674"},"_hasShrinkwrap":false},"1.0.15-canary.390.326f423.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.390.326f423.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"326f4238fa98aeb7b8596f8408e4ef641829c322","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.390.326f423.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.20.2/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-YDsrdo4mUm5EoiXclamiZBUv5xUtXZNYcCuhuA8LWgxS+S0o6FdBOWH6TX9/7aJsTeGVCixkaBtgeIQ8Af/U/w==","shasum":"c862d2a9306a70f7dcba380472ab632abad14b9b","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.390.326f423.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/sDuCRA9TVsSAnZWagAAKFoP/jnPvZnA4MTEuK7+opoH\n823fZY7peXx0uskWQTTsRnYnfv0MrZWhprchaPfLyqjMXqD6nPnZp4y7TEeo\nTNLiGvixn+0xlwEZobbl5yWWDqigV+IZisKin0RrvacVv6b7QvO/AL59r2A5\n7gaDn+CykWcZEHxZS03rVR4zuUCpp45nqBgj7nSIlu5k38TIsG0EJvSFwt0h\nhCD5+Du1QZ0hB0vc4Vh8KzalaxG9SjEgKIXFaYx/TSXlRNqm63nRVpp5yuFY\nUFfvVLurbUHFZKvedpK/PicnFxZ3pkPg8hRVY46jpGc0jaFy9PoExyLoytcH\nZv2pf4w50Y5Do/1cSlN9r4wERtEIkV+zotVz1soc6NSuyCv3wOqVmO3dSDMK\nRC7SFlLWzn3FXVZqoTcUuo212rv0Hg4kBDkT3LKMBWLJeOV2mm9TSRufyhBs\nhRcUiiHroGbnFeDYEK099MvX9ovh3hu+HUBSD4yxlvw/BBSCpjqr0zfAvHux\nRLNn17yXOx6g1s7ryckqOV3aCH29wjKX7QFEB2E3Ol2il2A8jWkVIq1jgU+n\nlUXqjKww/TuBCyo5pL0ncEpPQ40xQgMsclD8CgJjacO9z8RUPKrcAFsH/PQp\neMIiaMfUEou9AB7KPszQKoXEVNJRboL5O3vP/bzOFZ2jewI0DJ3jCg5lRgEg\nHKOt\r\n=PFbC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5ohMmUfgEJc9qOgodMOlqifpXmI7LYqyvbE87VLozfgIhAPZc02+r2U959Oj8xrL0ot0k38Wue/VwsWWNfk11NLuc"}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.390.326f423.0_1627308270160_0.6383482154292206"},"_hasShrinkwrap":false},"1.0.15-canary.392.3a37b99.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.392.3a37b99.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"3a37b99819a0c3bef238d5ed57e7e9916f41f90d","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.392.3a37b99.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.20.2/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-FkXiTCwG1CL/4Wb+YsKOyAxUiF5VGv/KoACBdYSHxlyp9EkWqnb1wFyfPzF0xCAcOcrcK2hean9UHUDZtYnoRg==","shasum":"f70dc6e491214c6485291d22ab47115cabf5cfa8","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.392.3a37b99.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB/cwCRA9TVsSAnZWagAAC5oP/3+QUcC3wSQuaZNANDqy\nP2EogV63hOIg1G6Y+PCXEjuHNHrqNi/zgcLn14suSzKy+MYBcG7EcGnlstYO\nA44Hgtnf7QWlfQIzuD71HdiDyQPl/PGeh7omCJ/wUbp4BV1JZUZEqWjwfVEM\nSyxWXfn+j093WIFXdFHq24ePBimOI8glu4Z51lpDbPfn0u29/nSciLWC4p/H\nO/sPvoJGSm4C4xqigMHW6nFewlR569KDZJLw1JaVJRrRdT28u5ltB6t2mrZ0\niRG8kNssMlVEdhwotHHv7b1GxYOLJUckLw2+TF6n9RbQiVK2FY0pgh/GYOvX\nHYwmnbB9wtCV27mKmRYctTfxjpRw5bmN9JZKIe1k0YEqHdNmzEho01Xmq1dD\ntWb8C+JoB0H44cBH8PRVNz7+oj8RDZwTAdp5VzvMoQbJU5XpoqtnZE24nKw8\nEbGsY/eE9WTGiQK65JtJgVzeEKS5oKn2MLUtt0hSlrBjr80aQvgX6DLo26ci\nknjoS3TeMGdyIqi+GXrinnzIV3jeuhTFED1LkKl+tsO5rsxZPSNJ6w4ZzrXI\nLb1JovbzoeQu3zFPCgq8zvRSOJ1gBRcdt4Aexk7cY3BcqlHObYsW2rbKMWAv\nqZEZCdDatK7k5Y5gA3HExcJ9VmQISMjn0SBzzZR3ax6P6ph7SrA33THfcTD0\n4Rr/\r\n=1VtH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEf0lTyAhiOBAflpZ2NGgPv4JORDDylcid/ftLuIY/xCAiBd+KRcXyk/Qe1hutkayeb9v2hwUt1XmsqdFCHX4grS8w=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.392.3a37b99.0_1627911984125_0.502437597076884"},"_hasShrinkwrap":false},"1.0.15-canary.393.cb17d49.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.393.cb17d49.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"cb17d49039980f29324410230550adeececd84c6","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.393.cb17d49.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.20.2/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-newFKgzHKFtgmhI7075+KbkawGYQOQUhyIRL7lZKW6f+vRNw2ViLKwAKpPqCcr2ebG/kn5KSnrF0RyqFY5p0rg==","shasum":"27cae747c9452a00d71caa9c3577b08f80456685","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.393.cb17d49.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB/sxCRA9TVsSAnZWagAAQmUP/AtfDKDHxM25ji8dAUkI\nfeFThzEBHP+/dMR5bO3Vr5z33NCxutpVavpEctDP86MTUBTgn74Zg1OwmjPx\n2nRPgEqQW6Byo4y+ui/uivgz/1WleamPRyaNAxUVqG2hhPw5L85Ktsvgempl\ngpz/K64dsJMoIrpA50wixkbTfQLMu00j8G6QXxuVo1pgskhMapTc7dXhpICL\n7LSL7WsCOHlrZhQF1cF/mp358sf5eS/3YVRPnQClbwSOcl7C2zLzxxSWe0eU\nGMlzb7JTbkR17mWZU57S9dEcxqQ1WGA6AMe4cFu4r9o9JPpG1bGCqz7/I4ZG\nIRH+/cPIYXxPqcUs29GnOSe2/G1CCR/OBUmJRCWJ8iIL+FOKcpVz8A9NYWgb\n8J5SIP/GRq0+uR5KrY9qRxAqxymIwOLcS3GvEPHgal1VsFxOZBu/q5DtRaU6\n+9QnsJo7WxzzzhAKABkaBtjvck60NPbxey4TRF6dNBdNOvO6qk2H+Ylk1hUK\n+u+nTfFxqcDweQXiOtOtNjGRRPW2g7DMn6IrcdtM01Wn406Tm2zhGvZm2nj2\n6Ec0HhDPlVLSYKccn5y5zGZLVRiz1+XcdDKyQ6TIjV/xhMwoFLyHL3y7kz+Z\nSH4MJucOJK1ck/C34JHG9zECj4+AolytDGgczuhfz3jps4Q9wyhBSXFPv9wi\nMO47\r\n=Etza\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpPpVKBQ8uEUaR7+1ojZcZBufVaAudWiRmRGQG14X4VAiBFK9s0XJRYw2cbQsUyuecB6kSRw0oB2RnlPfcQFUZ1sQ=="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.393.cb17d49.0_1627913009221_0.7361218626808919"},"_hasShrinkwrap":false},"1.0.15-canary.394.652cc97.0":{"name":"codelift","main":"index.js","bin":{"codelift":"bin/codelift.js"},"version":"1.0.15-canary.394.652cc97.0","scripts":{"dev":"next dev","build":"next build","start":"NODE_ENV=production next start"},"dependencies":{"@chakra-ui/core":"0.7.0","@emotion/core":"10.0.28","@emotion/styled":"10.0.27","apollo-server-micro":"2.11.0","classnames":"2.2.6","core-js":"3.6.4","cross-spawn":"7.0.2","downshift":"5.0.5","emotion-theming":"10.0.27","graphql":"15.0.0","graphql-type-json":"0.3.1","jscodeshift":"0.7.0","lodash":"4.17.15","match-sorter":"4.1.0","mobx":"5.15.4","mobx-react-lite":"1.5.2","mobx-state-tree":"3.15.0","next":"latest","open":"7.0.3","react-dev-utils":"10.2.1","react-feather":"2.0.3","react-split-pane":"^0.1.92","urql":"1.9.5","wait-for-localhost":"3.2.0"},"devDependencies":{"@types/classnames":"2.2.10","@types/graphql-type-json":"0.3.2","@types/jscodeshift":"0.7.0","@types/lodash":"4.14.149","@types/match-sorter":"4.0.0","@types/react-dev-utils":"9.0.4","postcss-preset-env":"^6.7.0","react":"latest","react-dom":"latest","tailwindcss":"next","typescript":"latest"},"gitHead":"652cc9771c0b4e44a783c52ffa929a50c9b90d55","readme":"# code<sup>_lift_</sup>\n\n> A \"No Code\" GUI for your existing React app.\n>\n> ![Next.js Example](/screenshot.png)\n> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)\n\n## Getting Started\n\nWithin your project:\n\n1. `yarn add codelift --dev`\n1. For [create-react-app][cra]:\n\n   `yarn codelift start`\n\n   For [Next.js][next]:\n\n   `yarn codelift dev`\n\n   _(`codelift` runs `yarn ____` with whatever you provide)_\n\n1. Add the following `import \"codelift/register\"` to the top of your `src/index.tsx` or `pages/_app.tsx`:\n\n   ```js\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n\n   import { register } from \"codelift\";\n   register({ React, ReactDOM });\n   ```\n\n   _`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._\n\n## Examples\n\n- [Create React App + Tailwind CSS](/examples/cra)\n- [Next.js + Tailwind CSS](examples/next)\n\n## Features\n\n- <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.\n\n- [Tailwind](https://tailwindcss.com/) Visual Inspector\n\n  1. Hover & Select an element.\n  1. **Find-as-you-type** CSS classes.\n  1. **Hover to preview** before applying.\n  1. **Click to toggle** in your source code.\n\n- <kbd>CMD+'</kbd> to toggle _codelift_ and browse normally.\n\n- Custom Inspectors:\n\n  Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:\n\n  ```js\n  export const Header = ({ title }) => {\n    ...\n  }\n  ```\n\n  Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:\n\n  ```js\n  Header.Inspector = ({ props, setProps }) => {\n    return (\n      <input\n        onChange={event => setProps({ title: event.target.value })}\n        defaultValue={props.title}\n      />\n    );\n  };\n  ```\n\n  Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:\n\n  > ![Header Inspector](/header.inspector.png)\n\n* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)\n\n## Contributing\n\n1. Clone this repo.\n1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.\n\n## Author\n\n- Eric Clemmons\n\n[cra]: https://github.com/facebook/create-react-app\n[next]: https://github.com/zeit/next.js/\n[tailwind]: https://tailwindcss.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://ericclemmons.com/\"><img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>Eric Clemmons</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Code\">💻</a> <a href=\"https://github.com/ericclemmons/codelift/commits?author=ericclemmons\" title=\"Documentation\">📖</a> <a href=\"#infra-ericclemmons\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n    <td align=\"center\"><a href=\"https://aulisi.us\"><img src=\"https://avatars2.githubusercontent.com/u/6629172?v=4\" width=\"50px;\" alt=\"\"/><br /><sub><b>​Faizaan</b></sub></a><br /><a href=\"https://github.com/ericclemmons/codelift/commits?author=aulisius\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)","_id":"codelift@1.0.15-canary.394.652cc97.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.20.2/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-9h5vlxCC5XqnrkheL5NCZEkYTb0JbW2ESIc9p2OhkYkFpmdVrMNef6A76o2/xBZw4nUo3VnDMCtKJfNeS1RGdw==","shasum":"66b52c80a6c135b1e929abcc06db6eb7af529b1f","tarball":"https://registry.npmjs.org/codelift/-/codelift-1.0.15-canary.394.652cc97.0.tgz","fileCount":171,"unpackedSize":2494571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCaTtCRA9TVsSAnZWagAAVWEP/1ll+jRSB/y8tLiejcFp\ndfWsOqjdFXX9P+7cGK0AVBtXcjsRj7Um4XdshdWL9fSPhQhtMf6YR6yqUtYq\neZL2GSagRR1HPSBtypWReCMMwCsKNICRH1Agw1/DIyNjGgDECbhv84Ur9Hz9\nfoBWJPBtfVnRAOd5+igDu0ERdCmuoUx76r42qYYkwx1FLs2D1IXZRilcKRVo\nZqHULTgJ9b7xEN2QZYnbpAEROQE1mYMx/IXj7uPZHRXvfTH4U5/oXenEKCCV\nJ7C9Q0U0cfePQXAu49AIyPaJSQ6ZWK/TBEdu83tZaGOwXnx0c3W5+G3doBBU\nEMBVjyW516jjKAcTzwg9rJExEqFEqveA/26cmGIfdxxccv8boEUzaBRpWDa9\nQr8Qr9rYIGfMl3DhgH68FxvjXfxGkWg6mBZSFPm2dYLkxZM0nzDqeT9v0Y9f\n8728q5jV0DYkaHvVaQ/DtlQPh9VK/T/B19FznqPaudTId+wfF225+YJRvD/v\nz46z5HuVbtkMfiBHEEyWvnWG000fwo4k1Vr18cSez4KTve4IpacSZSzqUSON\nF4TEW5yxOBgYNUqCtqx9HEmKfribgf+3Vpg/iFFoIes0lrWqxCp3rhtvjeZe\nj88skCUZpHoFHjot2An7Fo5jzOoPNSk6Ggl7BG+LTh5Vcr0CCBr1q+FYpUxW\npQov\r\n=BaZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3MD+BbqYlFxCfGslslvXrsX0gW5X/NXqbQI9PCzhTcAiEAwc+U94jXPVEsZOVQBu1+fpkR2yMIcIEbZUyQ2uSpwuw="}]},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"directories":{},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codelift_1.0.15-canary.394.652cc97.0_1628021997653_0.24324791726349226"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-29T05:35:54.193Z","0.1.1":"2019-11-29T05:35:54.352Z","modified":"2022-04-27T13:01:33.795Z","0.1.2":"2019-11-29T05:38:37.407Z","0.1.3":"2019-11-29T05:52:26.649Z","0.1.4":"2019-11-29T05:54:43.498Z","0.1.5":"2019-11-29T06:01:32.427Z","0.1.6":"2019-11-29T06:12:20.661Z","0.1.7":"2019-12-02T00:31:02.022Z","0.1.8":"2019-12-02T02:07:13.740Z","0.1.9":"2019-12-02T02:25:11.318Z","0.1.10":"2019-12-02T02:38:58.043Z","0.1.11":"2019-12-02T02:51:22.656Z","0.1.12":"2019-12-04T05:33:31.463Z","0.1.13":"2019-12-04T05:36:20.638Z","0.1.14":"2019-12-04T05:43:08.778Z","0.1.15":"2019-12-04T05:48:41.636Z","0.1.16":"2019-12-04T05:53:40.491Z","0.1.17":"2019-12-04T06:06:25.210Z","0.1.18":"2019-12-04T07:05:13.652Z","0.1.19":"2019-12-04T07:38:50.610Z","0.1.20":"2019-12-06T04:13:37.763Z","0.2.0":"2019-12-06T05:48:03.956Z","0.2.1":"2019-12-06T06:13:22.921Z","0.2.2":"2019-12-06T06:25:53.677Z","0.2.3":"2019-12-07T05:28:52.933Z","0.2.4":"2019-12-07T06:28:30.173Z","0.3.0":"2019-12-12T04:04:33.473Z","0.3.1":"2019-12-14T18:07:32.417Z","0.3.2":"2019-12-14T18:17:31.209Z","0.4.0":"2020-01-23T01:52:31.285Z","0.4.1":"2020-01-23T06:17:07.057Z","0.5.0":"2020-01-24T07:28:19.089Z","0.5.1-canary.58.fea0a94.0":"2020-01-25T03:17:33.807Z","0.5.1":"2020-01-25T05:05:55.155Z","0.5.2-canary.undefined.54da35c.0":"2020-01-25T05:29:57.026Z","0.5.2-canary.78.54da35c.0":"2020-01-25T05:40:34.959Z","0.5.2-canary.79.4b24a54.0":"2020-01-25T05:59:19.648Z","0.6.0-canary.80.800510c.0":"2020-01-26T01:13:32.327Z","0.6.0-canary.80.b1c6d94.0":"2020-01-27T05:03:08.145Z","0.6.0":"2020-01-27T05:30:22.816Z","0.6.1-canary.81.6893f0d.0":"2020-01-27T05:59:29.800Z","0.6.1":"2020-01-29T05:14:12.652Z","0.6.2-canary.undefined.4f516e5.0":"2020-01-29T05:51:56.792Z","0.6.2-canary.82.4f516e5.0":"2020-01-29T05:56:10.499Z","0.6.2":"2020-01-29T05:58:52.397Z","0.6.3-canary.70.fb8b4de.0":"2020-01-30T04:39:26.475Z","0.6.3-canary.70.195015c.0":"2020-01-31T06:18:43.619Z","1.0.0-canary.70.428351e.0":"2020-02-22T20:35:20.262Z","1.0.0-canary.70.27ec99c.0":"2020-02-29T02:02:37.737Z","0.6.3-canary.undefined.503bbf5.0":"2020-02-29T03:24:57.909Z","0.6.3-canary.85.acbf24c.0":"2020-02-29T03:39:14.140Z","0.6.3-canary.85.fdb5d08.0":"2020-02-29T03:45:37.625Z","0.6.3":"2020-02-29T04:08:18.234Z","1.0.0-canary.70.ae980a6.0":"2020-02-29T05:11:51.695Z","1.0.0-canary.70.1592b67.0":"2020-03-02T05:17:33.339Z","1.0.0-canary.70.40f62cd.0":"2020-03-03T06:49:07.139Z","1.0.0-canary.70.2bfa47b.0":"2020-03-07T04:48:26.957Z","1.0.0-canary.70.5754db8.0":"2020-03-07T05:24:56.327Z","1.0.0":"2020-03-07T05:25:45.764Z","1.0.1-canary.86.130ab8a.0":"2020-03-07T05:46:25.023Z","1.0.1-canary.87.565bd40.0":"2020-03-07T05:51:12.618Z","1.0.1-canary.88.c015986.0":"2020-03-07T05:53:07.269Z","1.0.1-canary.89.7f703c7.0":"2020-03-07T05:54:00.711Z","1.0.1-canary.90.77a22ce.0":"2020-03-07T05:55:41.191Z","1.0.1-canary.91.29e6f62.0":"2020-03-07T05:56:18.493Z","1.0.1-canary.86.67351e3.0":"2020-03-07T06:02:24.314Z","1.0.1":"2020-03-07T23:39:57.314Z","1.0.1-canary.94.8ec9dff.0":"2020-03-07T23:42:02.246Z","1.0.2":"2020-03-07T23:50:31.285Z","1.0.3":"2020-03-07T23:54:39.321Z","1.0.4":"2020-03-08T00:08:16.089Z","1.0.5":"2020-03-08T00:19:12.140Z","1.0.1-canary.98.3270e17.0":"2020-03-08T18:59:41.410Z","1.0.1-canary.98.946dae6.0":"2020-03-08T19:59:13.805Z","1.0.6":"2020-03-08T20:02:33.539Z","1.0.7":"2020-03-08T22:04:21.396Z","1.0.8":"2020-03-08T23:15:04.864Z","1.0.9-canary.99.3971011.0":"2020-03-08T23:21:10.760Z","1.0.9":"2020-03-08T23:24:20.303Z","1.0.10-canary.100.e1df846.0":"2020-03-09T00:37:15.250Z","1.0.10":"2020-03-09T00:40:11.450Z","1.0.11-canary.104.84f3101.0":"2020-03-09T16:10:41.005Z","1.0.11-canary.105.022ce8f.0":"2020-03-09T16:12:00.911Z","1.0.11-canary.106.5172613.0":"2020-03-09T16:12:29.429Z","1.0.11-canary.110.37c8df8.0":"2020-03-13T23:11:18.588Z","1.0.11-canary.111.cd32db3.0":"2020-03-16T17:55:47.897Z","1.0.11-canary.112.ef59ec3.0":"2020-03-16T17:56:16.086Z","1.0.11-canary.113.db337a8.0":"2020-03-16T17:56:58.323Z","1.0.11-canary.114.d957718.0":"2020-03-16T17:58:24.189Z","1.0.11-canary.115.99e15bd.0":"2020-03-16T18:00:03.978Z","1.0.11-canary.116.f6b3979.0":"2020-03-23T18:32:30.625Z","1.0.11-canary.117.48bfb10.0":"2020-03-23T18:33:23.837Z","1.0.11-canary.118.b2c6958.0":"2020-03-23T18:35:30.253Z","1.0.11-canary.120.7c1d887.0":"2020-03-30T17:34:37.845Z","1.0.11-canary.121.5c2962d.0":"2020-03-30T17:35:38.436Z","1.0.11-canary.123.727c417.0":"2020-03-30T17:48:51.006Z","1.0.11-canary.124.a774333.0":"2020-03-30T17:52:31.134Z","1.0.11-canary.125.37fadcf.0":"2020-03-31T20:53:24.093Z","1.0.11-canary.126.b7f4948.0":"2020-04-06T01:56:26.465Z","1.0.11":"2020-04-06T02:06:20.067Z","1.0.12-canary.127.1e3e727.0":"2020-04-06T17:59:36.343Z","1.0.12-canary.128.d496e6e.0":"2020-04-06T18:00:24.475Z","1.0.12-canary.131.5d5637c.0":"2020-04-06T18:03:31.925Z","1.0.12-canary.129.55b57b8.0":"2020-04-06T18:04:54.603Z","1.0.12-canary.119.70cfc8f.0":"2020-04-07T06:28:51.398Z","1.0.12-canary.119.72312e0.0":"2020-04-07T06:52:03.394Z","1.0.12-canary.119.36a1607.0":"2020-04-12T03:05:31.619Z","1.0.12-canary.133.5fc779e.0":"2020-04-13T15:48:53.334Z","1.0.12-canary.134.08514e6.0":"2020-04-13T15:50:03.460Z","1.0.12-canary.135.512dfef.0":"2020-04-13T15:50:32.863Z","1.0.12-canary.136.af2eadd.0":"2020-04-13T15:51:56.714Z","1.0.12-canary.137.dec17d5.0":"2020-04-13T15:53:03.276Z","1.0.12-canary.138.2ee9952.0":"2020-04-13T15:54:43.233Z","1.0.12-canary.139.0cdd04e.0":"2020-04-13T15:59:03.687Z","1.0.12-canary.140.5208f34.0":"2020-04-13T16:02:06.858Z","1.0.12-canary.141.6d1d61f.0":"2020-04-13T16:02:35.088Z","1.0.12-canarycanary.142.48bff27.0":"2020-04-20T18:24:59.217Z","1.0.12-canary.143.dc803ef.0":"2020-04-20T18:25:09.603Z","1.0.12-canary.144.eb7de23.0":"2020-04-20T18:28:31.817Z","1.0.12-canarycanary.145.391d401.0":"2020-04-20T18:29:15.415Z","1.0.12-canary.146.c238e54.0":"2020-04-20T18:34:14.182Z","1.0.12":"2020-04-23T19:21:27.429Z","1.0.13-canary.148.a1d4fd1.0":"2020-04-27T18:25:33.157Z","1.0.13-canary.149.4e745e1.0":"2020-04-27T18:26:13.176Z","1.0.13-canarycanary.150.a50e73d.0":"2020-04-27T18:27:13.521Z","1.0.13-canary.151.ed421a9.0":"2020-04-27T18:30:10.441Z","1.0.13-canarycanary.152.db3963d.0":"2020-04-27T18:33:23.862Z","1.0.13-canary.153.6c38c73.0":"2020-05-04T20:06:33.177Z","1.0.13-canary.154.a166311.0":"2020-05-04T20:07:02.085Z","1.0.13-canarycanary.155.0543d43.0":"2020-05-04T20:07:32.726Z","1.0.13-canarycanary.156.47a0ebe.0":"2020-05-04T20:13:01.641Z","1.0.13-canary.157.f89dcbc.0":"2020-05-04T20:15:04.467Z","1.0.13-canary.158.b9e5c14.0":"2020-05-11T19:24:53.805Z","1.0.13-canary.159.9951817.0":"2020-05-11T19:29:24.047Z","1.0.13-canarycanary.160.e2ab0a0.0":"2020-05-11T19:34:53.662Z","1.0.13-canary.161.2c12e2b.0":"2020-05-11T19:36:17.072Z","1.0.13-canary.162.b3b0576.0":"2020-05-11T19:37:21.928Z","1.0.13-canarycanary.163.351f542.0":"2020-05-11T19:39:19.046Z","1.0.13-canary.164.a2666cc.0":"2020-05-11T19:43:54.670Z","1.0.13-canarycanary.165.d00a46e.0":"2020-05-18T19:09:33.597Z","1.0.13-canary.166.602872e.0":"2020-05-18T19:12:11.894Z","1.0.13-canary.168.af214bf.0":"2020-05-18T19:21:21.455Z","1.0.13-canary.169.cea6ee1.0":"2020-05-18T19:25:06.711Z","1.0.13-canarycanary.170.9f02d46.0":"2020-05-18T19:25:15.401Z","1.0.13-canarycanary.171.6218b63.0":"2020-05-25T19:48:09.473Z","1.0.13-canary.172.1f25eeb.0":"2020-05-25T19:50:24.581Z","1.0.13-canary.173.3d0deb8.0":"2020-05-25T19:56:19.063Z","1.0.13-canary.174.faf9e9f.0":"2020-05-25T19:57:28.159Z","1.0.13-canarycanary.175.7fd2bd7.0":"2020-05-25T20:00:15.105Z","1.0.13-canarycanary.176.f00ca93.0":"2020-06-01T21:50:26.651Z","1.0.13-canary.177.d75a3a2.0":"2020-06-01T21:50:35.085Z","1.0.13-canarycanary.178.0070dd8.0":"2020-06-01T21:51:26.912Z","1.0.13-canary.179.d3d6621.0":"2020-06-01T21:54:19.497Z","1.0.13-canary.180.62ddd01.0":"2020-06-01T22:01:35.397Z","1.0.13-canary.181.2252d24.0":"2020-06-05T20:12:42.521Z","1.0.13-canary.182.33374b0.0":"2020-06-05T20:57:23.970Z","1.0.13-canary.183.cf34dd2.0":"2020-06-05T21:12:03.113Z","1.0.13-canary.184.eb851f4.0":"2020-06-06T18:34:07.290Z","1.0.13-canarycanary.185.da73078.0":"2020-06-08T20:40:57.876Z","1.0.13-canary.186.52c804d.0":"2020-06-08T20:50:53.737Z","1.0.13-canary.187.695f477.0":"2020-06-08T20:51:30.257Z","1.0.13-canarycanary.188.be37ca4.0":"2020-06-08T21:02:36.683Z","1.0.13-canary.189.a0420bf.0":"2020-06-16T01:49:20.987Z","1.0.13-canary.190.188072b.0":"2020-06-16T02:09:42.565Z","1.0.13-canary.191.3380495.0":"2020-06-16T02:16:27.858Z","1.0.13-canary.192.b850785.0":"2020-06-23T03:07:06.678Z","1.0.13-canary.193.b01877b.0":"2020-06-23T03:22:49.418Z","1.0.13-canary.194.994d423.0":"2020-06-23T03:28:03.595Z","1.0.13-canary.195.a99ef4b.0":"2020-06-23T03:31:05.775Z","1.0.13-canarycanary.196.8490701.0":"2020-06-29T14:47:06.589Z","1.0.13-canary.197.b2d2d61.0":"2020-06-29T14:53:47.080Z","1.0.13-canary.198.b8a504c.0":"2020-06-29T15:06:56.097Z","1.0.13-canarycanary.199.fb353c6.0":"2020-06-29T15:12:25.194Z","1.0.13-canary.200.f893fed.0":"2020-07-06T21:42:46.538Z","1.0.13-canary.201.807c45f.0":"2020-07-06T21:48:46.478Z","1.0.13-canarycanary.202.e6922b4.0":"2020-07-06T21:49:01.767Z","1.0.13-canary.203.6ac0f31.0":"2020-07-06T21:50:55.219Z","1.0.13-canarycanary.204.401022c.0":"2020-07-06T22:03:41.559Z","1.0.13-canary.205.3e582ba.0":"2020-07-13T21:24:48.753Z","1.0.13-canary.206.7376aff.0":"2020-07-13T21:29:41.704Z","1.0.13-canary.207.7fcdb8e.0":"2020-07-13T21:31:26.097Z","1.0.13-canary.208.3ce41ed.0":"2020-07-13T21:32:07.941Z","1.0.13-canarycanary.209.247092c.0":"2020-07-13T21:36:53.327Z","1.0.13-canary.210.41345ce.0":"2020-07-17T22:19:14.261Z","1.0.13-canary.211.9a1ed94.0":"2020-07-18T18:38:07.777Z","1.0.13-canary.212.1be6c38.0":"2020-07-20T21:14:32.282Z","1.0.13-canary.213.17beb7c.0":"2020-07-20T21:17:32.530Z","1.0.13-canarycanary.214.f37e094.0":"2020-07-20T21:28:39.973Z","1.0.13-canary.215.eeed883.0":"2020-07-20T21:39:23.180Z","1.0.13-canary.216.6f21800.0":"2020-07-27T20:57:36.771Z","1.0.13-canary.217.9d67e7c.0":"2020-07-27T20:58:08.231Z","1.0.13-canarycanary.218.62c2f1f.0":"2020-07-27T21:02:38.784Z","1.0.13-canary.221.7f1eece.0":"2020-07-29T21:57:16.583Z","1.0.13-canary.222.b96ec68.0":"2020-08-04T00:45:06.983Z","1.0.13-canarycanary.223.077b3c6.0":"2020-08-04T01:00:15.271Z","1.0.13-canarycanary.225.3625c96.0":"2020-08-10T23:15:49.286Z","1.0.13-canary.226.f8d2e83.0":"2020-08-10T23:16:50.724Z","1.0.13-canary.227.ef1bb9c.0":"2020-08-10T23:17:36.291Z","1.0.13-canary.228.2cee335.0":"2020-08-18T00:42:16.256Z","1.0.13-canary.229.c56bb4a.0":"2020-08-18T00:54:48.029Z","1.0.13-canarycanary.231.07e41a8.0":"2020-08-18T01:00:44.994Z","1.0.13-canary.232.5ce3c8b.0":"2020-08-25T08:15:53.503Z","1.0.13-canarycanary.233.ce30ec0.0":"2020-08-25T08:22:37.240Z","1.0.13-canarycanary.234.cc88a00.0":"2020-08-25T08:30:49.430Z","1.0.13":"2020-08-29T17:12:00.385Z","1.0.14-canary.110.cb61140.0":"2020-08-29T17:13:24.626Z","1.0.14-canary.235.b2174b9.0":"2020-08-29T17:13:28.174Z","1.0.14-canarycanary.233.d6e6dda.0":"2020-08-29T17:14:43.210Z","1.0.14-canary.232.5c67397.0":"2020-08-29T17:14:55.278Z","1.0.14-canarycanary.234.139d949.0":"2020-08-29T17:15:12.917Z","1.0.14-canary.236.b372ce0.0":"2020-08-29T17:15:52.486Z","1.0.14-canarycanary.233.ffa3259.0":"2020-08-29T17:17:34.753Z","1.0.14-canary.237.9b98cc8.0":"2020-09-01T08:46:46.956Z","1.0.14-canary.239.bdb7d2e.0":"2020-09-08T07:06:06.269Z","1.0.14-canary.240.3b3e863.0":"2020-09-08T07:15:18.746Z","1.0.14-canary.241.80a16fe.0":"2020-09-10T09:06:51.426Z","1.0.14-canary.242.d1459e8.0":"2020-09-15T06:10:47.125Z","1.0.14-canarycanary.243.3600556.0":"2020-09-15T06:14:07.691Z","1.0.14-canarycanary.244.3173670.0":"2020-09-15T06:25:18.504Z","1.0.14-canary.245.3697a95.0":"2020-09-22T05:45:36.356Z","1.0.14-canary.246.05f54b0.0":"2020-09-29T06:08:19.818Z","1.0.14-canary.247.5ae8eec.0":"2020-10-06T07:33:56.616Z","1.0.14-canary.249.077975b.0":"2020-10-06T07:46:46.410Z","1.0.14-canarycanary.250.12ffb36.0":"2020-10-06T07:49:22.054Z","1.0.14-canary.251.6f33e86.0":"2020-10-06T07:58:48.119Z","1.0.14-canary.252.715514b.0":"2020-10-08T19:58:47.761Z","1.0.14-canarycanary.253.4fd2b7c.0":"2020-10-13T05:38:23.115Z","1.0.14-canarycanary.254.e631d87.0":"2020-10-13T05:48:38.233Z","1.0.14-canary.255.9fb648d.0":"2020-10-13T05:52:05.823Z","1.0.14-canary.256.0d1d430.0":"2020-10-20T10:29:53.941Z","1.0.14-canary.258.1caeffd.0":"2020-10-27T14:00:05.578Z","1.0.14-canary.259.6cfaaac.0":"2020-10-27T14:01:19.669Z","1.0.14-canarycanary.260.b264e07.0":"2020-10-27T14:04:07.876Z","1.0.14-canary.261.854da57.0":"2020-11-02T13:34:13.518Z","1.0.14-canary.262.f9699fa.0":"2020-11-02T13:39:03.266Z","1.0.14-canary.264.5787b3f.0":"2020-11-02T13:51:00.575Z","1.0.14-canary.265.3d2edbe.0":"2020-11-09T13:41:22.382Z","1.0.14-canary.267.ff5addd.0":"2020-11-09T13:43:32.752Z","1.0.14-canary.268.7c25b5d.0":"2020-11-16T07:16:58.540Z","1.0.14-canary.268.aec8c69.0":"2020-11-16T07:24:59.900Z","1.0.14-canary.268.8a19862.0":"2020-11-16T07:42:23.114Z","1.0.14-canary.241.4b9a799.0":"2020-11-16T08:00:46.436Z","1.0.14-canary.235.f545efa.0":"2020-11-16T08:01:10.211Z","1.0.14-canary.110.aea801b.0":"2020-11-16T08:01:27.568Z","1.0.14-canary.265.70b60fb.0":"2020-11-16T08:02:31.133Z","1.0.14-canary.267.2c81d99.0":"2020-11-16T08:03:32.207Z","1.0.14":"2020-11-16T08:26:48.922Z","1.0.15-canary.270.22d7cfb.0":"2020-11-16T08:29:00.084Z","1.0.15-canary.274.a63ca43.0":"2020-11-23T13:51:46.680Z","1.0.15-canary.275.679b125.0":"2020-11-23T13:52:59.702Z","1.0.15-canary.276.f2a41ee.0":"2020-11-23T13:57:18.031Z","1.0.15-canary.277.2f82b57.0":"2020-11-30T13:30:53.353Z","1.0.15-canary.280.5f5db1b.0":"2020-11-30T13:40:52.957Z","1.0.15-canary.281.8d9220a.0":"2020-12-07T13:53:51.690Z","1.0.15-canary.282.976da4c.0":"2020-12-10T18:24:18.547Z","1.0.15-canary.283.487e58b.0":"2020-12-14T14:48:34.367Z","1.0.15-canary.285.2f8efdf.0":"2020-12-14T15:04:28.760Z","1.0.15-canary.286.d56c019.0":"2020-12-21T13:53:16.652Z","1.0.15-canary.287.c34b16b.0":"2020-12-28T13:26:12.898Z","1.0.15-canary.289.d61d0e2.0":"2020-12-28T13:35:16.470Z","1.0.15-canary.290.fd1832d.0":"2020-12-28T13:35:33.396Z","1.0.15-canary.293.50762a1.0":"2021-01-04T13:37:33.493Z","1.0.15-canary.294.79d5365.0":"2021-01-04T13:39:31.687Z","1.0.15-canary.301.539c9cd.0":"2021-02-01T14:19:45.732Z","1.0.15-canary.302.fdfd4e7.0":"2021-02-01T14:23:37.483Z","1.0.15-canary.304.12a7cc2.0":"2021-02-01T14:28:57.718Z","1.0.15-canary.305.9b4faf8.0":"2021-02-01T14:30:13.927Z","1.0.15-canary.306.ad9e804.0":"2021-02-01T14:33:26.361Z","1.0.15-canary.307.aab5af8.0":"2021-02-01T14:36:12.745Z","1.0.15-canary.308.e5569f2.0":"2021-02-01T14:36:25.117Z","1.0.15-canary.309.3b9a6a2.0":"2021-02-01T14:37:46.333Z","1.0.15-canary.310.ebb1942.0":"2021-02-01T14:41:22.249Z","1.0.15-canary.311.ddfa660.0":"2021-02-08T13:55:13.314Z","1.0.15-canary.312.b38a941.0":"2021-02-15T13:36:17.754Z","1.0.15-canary.313.f4af4f6.0":"2021-02-15T13:38:53.009Z","1.0.15-canary.314.78f334e.0":"2021-02-15T13:40:18.435Z","1.0.15-canary.315.793eee9.0":"2021-02-15T13:44:52.961Z","1.0.15-canary.316.cd64cca.0":"2021-02-22T13:31:22.485Z","1.0.15-canary.317.bcbad8f.0":"2021-02-22T13:33:33.354Z","1.0.15-canary.318.6eadb79.0":"2021-02-22T13:40:26.632Z","1.0.15-canary.319.9b72000.0":"2021-03-01T18:43:30.996Z","1.0.15-canary.320.72f2d50.0":"2021-03-01T19:12:12.592Z","1.0.15-canary.321.69f818b.0":"2021-03-01T19:14:19.325Z","1.0.15-canary.322.aa29bbf.0":"2021-03-01T19:16:13.247Z","1.0.15-canary.324.226b832.0":"2021-03-01T19:21:23.125Z","1.0.15-canary.325.063151f.0":"2021-03-08T13:35:29.739Z","1.0.15-canary.326.0754e78.0":"2021-03-08T13:56:48.718Z","1.0.15-canary.327.0122f3a.0":"2021-03-08T13:58:21.204Z","1.0.15-canary.328.5ba647b.0":"2021-03-08T16:53:35.359Z","1.0.15-canary.329.b31dc48.0":"2021-03-11T22:42:22.302Z","1.0.15-canary.330.4961b3e.0":"2021-03-15T14:09:52.487Z","1.0.15-canary.331.ad0a6e0.0":"2021-03-15T14:10:40.222Z","1.0.15-canary.332.86a35c6.0":"2021-03-22T13:44:46.537Z","1.0.15-canary.333.e6b1e29.0":"2021-03-22T13:50:11.324Z","1.0.15-canary.334.d66b814.0":"2021-03-22T13:50:53.840Z","1.0.15-canary.335.26cd0c1.0":"2021-03-29T15:11:17.620Z","1.0.15-canary.336.8dd444c.0":"2021-03-29T15:19:42.914Z","1.0.15-canary.337.d3c8d9c.0":"2021-04-05T13:31:08.777Z","1.0.15-canary.338.a873f8d.0":"2021-04-05T13:39:14.786Z","1.0.15-canary.339.7d948fb.0":"2021-04-05T13:46:12.394Z","1.0.15-canary.340.3d55d26.0":"2021-04-05T13:58:45.249Z","1.0.15-canary.341.ab49e4b.0":"2021-04-12T13:52:57.811Z","1.0.15-canary.342.972f7fe.0":"2021-04-12T13:58:53.528Z","1.0.15-canary.343.0238c10.0":"2021-04-16T22:32:38.634Z","1.0.15-canary.344.a73051f.0":"2021-04-27T21:00:29.920Z","1.0.15-canary.345.f884dd7.0":"2021-04-27T21:00:43.636Z","1.0.15-canary.346.180d75b.0":"2021-04-27T21:01:00.929Z","1.0.15-canary.347.8ec6c88.0":"2021-04-27T21:02:23.835Z","1.0.15-canary.348.daa48b2.0":"2021-04-28T22:17:50.482Z","1.0.15-canary.349.d3f9ed6.0":"2021-05-03T13:29:19.877Z","1.0.15-canary.350.5d46234.0":"2021-05-03T13:47:35.214Z","1.0.15-canary.351.0ead349.0":"2021-05-03T13:50:27.011Z","1.0.15-canary.352.5ddfeb5.0":"2021-05-03T13:53:54.760Z","1.0.15-canary.353.456ccc1.0":"2021-05-06T16:31:52.695Z","1.0.15-canary.354.7027a82.0":"2021-05-06T19:13:37.720Z","1.0.15-canary.355.ea05c2c.0":"2021-05-07T18:59:19.833Z","1.0.15-canary.356.55e72ef.0":"2021-05-10T13:40:17.355Z","1.0.15-canary.357.80ebae2.0":"2021-05-10T13:46:26.761Z","1.0.15-canary.358.43f6919.0":"2021-05-10T13:51:45.623Z","1.0.15-canary.359.ff8cc72.0":"2021-05-10T13:56:39.452Z","1.0.15-canary.360.f55a09c.0":"2021-05-10T13:57:36.541Z","1.0.15-canary.361.71ef726.0":"2021-05-17T13:34:46.174Z","1.0.15-canary.362.4c28b63.0":"2021-05-17T13:35:26.605Z","1.0.15-canary.363.a646462.0":"2021-05-17T13:39:19.819Z","1.0.15-canary.364.751d873.0":"2021-05-24T13:44:05.969Z","1.0.15-canary.365.19560ff.0":"2021-05-24T13:47:30.511Z","1.0.15-canary.366.acd91b3.0":"2021-05-24T13:52:25.972Z","1.0.15-canary.367.53b7d9d.0":"2021-05-24T13:55:56.985Z","1.0.15-canary.368.c3e0d54.0":"2021-05-31T13:37:38.415Z","1.0.15-canary.369.15fa787.0":"2021-05-31T13:39:01.205Z","1.0.15-canary.370.d7e1759.0":"2021-05-31T13:41:41.233Z","1.0.15-canary.371.35c0dbd.0":"2021-05-31T14:05:00.791Z","1.0.15-canary.372.a3711cb.0":"2021-06-07T13:32:35.552Z","1.0.15-canary.373.620d80b.0":"2021-06-07T13:45:14.695Z","1.0.15-canary.374.937049f.0":"2021-06-14T13:58:00.937Z","1.0.15-canary.375.836a1cd.0":"2021-06-14T14:05:23.184Z","1.0.15-canary.376.652c984.0":"2021-06-21T13:47:59.309Z","1.0.15-canary.377.764b1c9.0":"2021-06-21T13:49:33.134Z","1.0.15-canary.379.cc6a830.0":"2021-06-21T14:08:43.428Z","1.0.15-canary.380.16cc91f.0":"2021-06-28T13:41:01.293Z","1.0.15-canary.381.e9eb093.0":"2021-06-28T13:42:08.396Z","1.0.15-canary.382.628b3cd.0":"2021-06-28T13:59:14.313Z","1.0.15-canary.383.88c5e64.0":"2021-06-28T14:05:09.112Z","1.0.15-canary.385.4d0774d.0":"2021-06-28T14:09:11.580Z","1.0.15-canary.386.4f5a7f0.0":"2021-07-05T14:03:55.890Z","1.0.15-canary.387.1ca04c0.0":"2021-07-12T13:44:29.280Z","1.0.15-canary.388.6411871.0":"2021-07-19T14:21:00.576Z","1.0.15-canary.389.373242b.0":"2021-07-26T13:45:49.920Z","1.0.15-canary.390.326f423.0":"2021-07-26T14:04:30.438Z","1.0.15-canary.392.3a37b99.0":"2021-08-02T13:46:24.368Z","1.0.15-canary.393.cb17d49.0":"2021-08-02T14:03:29.429Z","1.0.15-canary.394.652cc97.0":"2021-08-03T20:19:57.850Z"},"maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"}],"readme":"","readmeFilename":"","description":"> A \"No Code\" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)"}