diff --git a/.env.development b/.env.development index a692f21c7..e69de29bb 100644 --- a/.env.development +++ b/.env.development @@ -1 +0,0 @@ -SANDPACK_BARE_COMPONENTS=true \ No newline at end of file diff --git a/.env.production b/.env.production index 445c9c4d0..e403f96b6 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1 @@ -NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4' -SANDPACK_BARE_COMPONENTS=true \ No newline at end of file +NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/0-bug.yml b/.github/ISSUE_TEMPLATE/0-bug.yml new file mode 100644 index 000000000..56d2e8540 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/0-bug.yml @@ -0,0 +1,34 @@ +name: "🐛 Report a bug" +description: "Report a problem on the website." +title: "[Bug]: " +labels: ["bug: unconfirmed"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what the bug is. + placeholder: | + Example bug report: + When I click the "Submit" button on "Feedback", nothing happens. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page(s) did you encounter this bug on? + placeholder: | + https://react.dev/ + validations: + required: true + - type: textarea + attributes: + label: Details + description: | + Please provide any additional details about the bug. + placeholder: | + Example details: + The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists. + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/1-typo.yml b/.github/ISSUE_TEMPLATE/1-typo.yml new file mode 100644 index 000000000..c86557a11 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/1-typo.yml @@ -0,0 +1,34 @@ +name: "🤦 Typo or mistake" +description: "Report a typo or mistake in the docs." +title: "[Typo]: " +labels: ["type: typos"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what the mistake is. + placeholder: | + Example: + The code example on the "useReducer" page includes an unused variable `nextId`. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page is the typo on? + placeholder: | + https://react.dev/ + validations: + required: true + - type: textarea + attributes: + label: Details + description: | + Please provide a explanation for why this is a mistake. + placeholder: | + Example mistake: + In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed. + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml new file mode 100644 index 000000000..ac0b480fe --- /dev/null +++ b/.github/ISSUE_TEMPLATE/2-suggestion.yml @@ -0,0 +1,34 @@ +name: "💡 Suggestions" +description: "Suggest a new page, section, or edit for an existing page." +title: "[Suggestion]: " +labels: ["type: documentation"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what we should add. + placeholder: | + Example: + Add a new page for how to use React with TypeScript. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page is this about? + placeholder: | + https://react.dev/ + validations: + required: false + - type: textarea + attributes: + label: Details + description: | + Please provide a explanation for what you're suggesting. + placeholder: | + Example: + I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation. + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml new file mode 100644 index 000000000..a47295e1e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -0,0 +1,116 @@ +name: "📄 Suggest new framework" +description: "I am a framework author applying to be included as a recommended framework." +title: "[Framework]: " +labels: ["type: framework"] +body: + - type: markdown + attributes: + value: | + ## Apply to be included as a recommended React framework + + _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._ + + Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production. + + While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). + + To be included, frameworks must meet the following criteria: + + - **Free & open-source**: must be open source and free to use. + - **Well maintained**. must be actively maintained, providing bug fixes and improvements. + - **Active community**: must have a sufficiently large and active community to support users. + - **Clear onboarding**: must have clear install steps to install the React version of the framework. + - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem. + - **Self-hosting option**: must support an option to self-host applications without losing access to features. + - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh. + - **User experience**. must provide built-in support for common problems like routing and data-fetching. + - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time. + + Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below. + - type: input + attributes: + label: Name + description: | + What is the name of your framework? + validations: + required: true + - type: input + attributes: + label: Homepage + description: | + What is the URL of your homepage? + validations: + required: true + - type: input + attributes: + label: Install instructions + description: | + What is the URL of your getting started guide? + validations: + required: true + - type: dropdown + attributes: + label: Is your framework open source? + description: | + We only recommend free and open source frameworks. + options: + - 'No' + - 'Yes' + validations: + required: true + - type: textarea + attributes: + label: Well maintained + description: | + Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples. + validations: + required: true + - type: textarea + attributes: + label: Active community + description: | + Please describe your community. Include the size of your community, and links to community resources. + validations: + required: true + - type: textarea + attributes: + label: Clear onboarding + description: | + Please describe how a user can install your framework with React. Include links to any relevant documentation. + validations: + required: true + - type: textarea + attributes: + label: Ecosystem compatibility + description: | + Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework. + validations: + required: true + - type: textarea + attributes: + label: Self-hosting option + description: | + Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework. + validations: + required: true + - type: textarea + attributes: + label: Developer Experience + description: | + Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh. + validations: + required: true + - type: textarea + attributes: + label: User Experience + description: | + Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR. + validations: + required: true + - type: textarea + attributes: + label: Compatible with our future vision for React + description: | + Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components. + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 000000000..63e310e0b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,7 @@ +contact_links: + - name: 📃 Bugs in React + url: https://github.com/facebook/react/issues/new/choose + about: This issue tracker is not for bugs in React. Please file React issues here. + - name: 🤔 Questions and Help + url: https://reactjs.org/community/support.html + about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums. diff --git a/.gitignore b/.gitignore index d8bec488b..7bf71dbc5 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,6 @@ yarn-error.log* # external fonts public/fonts/**/Optimistic_*.woff2 + +# rss +public/rss.xml diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0e861af35..4c7e5ec74 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak - Use semicolons. - No space between function names and parens (`method() {}` not `method () {}`). - When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/). +- Always capitalize React concepts such as Hooks, Effects, and Transitions. ### Highlighting diff --git a/colors.js b/colors.js index acf8214ee..872f33cac 100644 --- a/colors.js +++ b/colors.js @@ -11,7 +11,7 @@ module.exports = { tertiary: '#5E687E', // gray-50 'tertiary-dark': '#99A1B3', // gray-30 link: '#087EA4', // blue-50 - 'link-dark': '#149ECA', // blue-40 + 'link-dark': '#58C4DC', // blue-40 syntax: '#EBECF0', // gray-10 wash: '#FFFFFF', 'wash-dark': '#23272F', // gray-90 @@ -23,6 +23,8 @@ module.exports = { 'border-dark': '#343A46', // gray-80 'secondary-button': '#EBECF0', // gray-10 'secondary-button-dark': '#404756', // gray-70 + brand: '#087EA4', // blue-40 + 'brand-dark': '#58C4DC', // blue-40 // Gray 'gray-95': '#16181D', diff --git a/next.config.js b/next.config.js index 414728580..61ff1944a 100644 --- a/next.config.js +++ b/next.config.js @@ -14,9 +14,7 @@ const nextConfig = { scrollRestoration: true, legacyBrowsers: false, }, - env: { - SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS, - }, + env: {}, webpack: (config, {dev, isServer, ...options}) => { if (process.env.ANALYZE) { const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); @@ -35,10 +33,6 @@ const nextConfig = { const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack'); config.plugins.push( - new NormalModuleReplacementPlugin( - /^@stitches\/core$/, - require.resolve('./src/utils/emptyShim.js') - ), new NormalModuleReplacementPlugin( /^raf$/, require.resolve('./src/utils/rafShim.js') diff --git a/package.json b/package.json index a10ca6a75..c5bade47d 100644 --- a/package.json +++ b/package.json @@ -15,29 +15,34 @@ "prettier:diff": "yarn nit:source", "lint-heading-ids": "node scripts/headingIdLinter.js", "fix-headings": "node scripts/headingIdLinter.js --fix", - "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids", + "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss", "tsc": "tsc --noEmit", "start": "next start", "postinstall": "patch-package && (is-ci || husky install .husky)", +<<<<<<< HEAD "check-all": "npm-run-all prettier lint:fix tsc", "prepare": "husky install" +======= + "check-all": "npm-run-all prettier lint:fix tsc rss", + "rss": "node scripts/generateRss.js" +>>>>>>> 2bfa7a628b0534bb0d437ff7520a72010ab970c3 }, "dependencies": { - "@codesandbox/sandpack-react": "1.15.5", + "@codesandbox/sandpack-react": "2.13.5", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", + "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", "date-fns": "^2.16.1", "debounce": "^1.2.1", - "ga-lite": "^2.1.4", "github-slugger": "^1.3.0", "next": "^13.4.1", "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", "react": "^0.0.0-experimental-16d053d59-20230506", - "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1", + "react-collapsed": "4.0.4", "react-dom": "^0.0.0-experimental-16d053d59-20230506", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" @@ -93,13 +98,13 @@ "retext": "^7.0.1", "retext-smartypants": "^4.0.0", "rss": "^1.2.2", - "tailwindcss": "^3.3.2", + "tailwindcss": "^3.4.1", "typescript": "^4.0.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, "engines": { - "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0" + "node": ">=16.8.0" }, "nextBundleAnalysis": { "budget": null, diff --git a/patches/@codesandbox+sandpack-react+1.15.5.patch b/patches/@codesandbox+sandpack-react+1.15.5.patch deleted file mode 100644 index b68a5303d..000000000 --- a/patches/@codesandbox+sandpack-react+1.15.5.patch +++ /dev/null @@ -1,62 +0,0 @@ -diff --git a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js -index 6b8518e..ada84f5 100644 ---- a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js -+++ b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js -@@ -92,7 +92,7 @@ h1 { - -
- --`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ft={files:{"tsconfig.json":{code:`{ -+`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ft={files:{"tsconfig.json":{code:`{ - "include": [ - "./**/*" - ], -@@ -140,7 +140,7 @@ h1 { - -
- --`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var At={files:{"/App.tsx":{code:`import { Component } from "solid-js"; -+`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var At={files:{"/App.tsx":{code:`import { Component } from "solid-js"; - - const App: Component = () => { - return

Hello World

; -@@ -395,7 +395,7 @@ createApp(App).mount('#app') - - - --`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var We={react:wt,"react-ts":Ft,vue:Ht,vanilla:Ot,"vanilla-ts":Dt,vue3:Bt,angular:Lt,svelte:Pt,solid:At,"test-ts":It};var pt=e=>{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.tagName,class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:P.tags.definition(P.tags.function(P.tags.variableName)),class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.standard(P.tags.tagName),class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:[P.tags.definition(P.tags.function(P.tags.variableName)),P.tags.tagName],class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r{let w=L.useRef(null),X=Ut(w,$),A=L.useRef(),{theme:ae,themeId:W}=Oe(),[Q,G]=L.useState(e),[q,C]=L.useState(y==="immediate"),O=(0,ir.useClasser)(b),{listen:be}=T(),x=L.useRef([]),R=L.useRef([]),{isIntersecting:z}=(0,mr.default)(w,{rootMargin:"600px 0px",threshold:.2});L.useImperativeHandle($,()=>({getCodemirror:()=>A.current})),L.useEffect(()=>{(y==="lazy"||y==="user-visible")&&z&&C(!0)},[y,z]);let D=Qs(t,o,k),V=er(D,k),le=Ks(ae),et=ar({langSupport:V,highlightTheme:le,code:e}),je=L.useMemo(()=>h&&h.sort((_,Z)=>_.line-Z.line),[h]);L.useEffect(()=>{if(!w.current||!q)return;let _=setTimeout(function(){let ee=[{key:"Tab",run:ie=>{var Ce;(0,Ne.indentMore)(ie);let pe=g.find(({key:Ae})=>Ae==="Tab");return(Ce=pe==null?void 0:pe.run(ie))!=null?Ce:!0}},{key:"Shift-Tab",run:({state:ie,dispatch:pe})=>{var Ae;(0,Ne.indentLess)({state:ie,dispatch:pe});let Ce=g.find(({key:Nt})=>Nt==="Shift-Tab");return(Ae=Ce==null?void 0:Ce.run(ye))!=null?Ae:!0}},{key:"Escape",run:()=>(p||w.current&&w.current.focus(),!0)},{key:"mod-Backspace",run:Ne.deleteGroupBackward}],j=[(0,fe.highlightSpecialChars)(),(0,Wt.history)(),(0,Xt.closeBrackets)(),...v,fe.keymap.of([...Xt.closeBracketsKeymap,...Ne.defaultKeymap,...Wt.historyKeymap,...cr.commentKeymap,...ee,...g]),V,pr.defaultHighlightStyle.fallback,Js(),le];p?(j.push($e.EditorState.readOnly.of(!0)),j.push(fe.EditorView.editable.of(!1))):(j.push((0,dr.bracketMatching)()),j.push((0,fe.highlightActiveLine)())),je&&j.push(tr(je)),a&&j.push(fe.EditorView.lineWrapping),r&&j.push((0,lr.lineNumbers)()),n&&j.push(or());let Ue=$e.EditorState.create({doc:e,extensions:j}),ze=w.current,ot=ze.querySelector(".sp-pre-placeholder");ot&&ze.removeChild(ot);let ye=new fe.EditorView({state:Ue,parent:ze,dispatch:ie=>{if(ye.update([ie]),ie.docChanged){let pe=ie.newDoc.sliceString(0,ie.newDoc.length);G(pe),s==null||s(pe)}}});ye.contentDOM.setAttribute("data-gramm","false"),ye.contentDOM.setAttribute("aria-label",t?`Code Editor for ${Xe(t)}`:"Code Editor"),p?ye.contentDOM.classList.add("cm-readonly"):ye.contentDOM.setAttribute("tabIndex","-1"),A.current=ye},0);return()=>{var Z;(Z=A.current)==null||Z.destroy(),clearTimeout(_)}},[q,r,a,W,je,p]),L.useEffect(function(){let Z=A.current,ee=!wo(v,x.current)||!wo(g,R.current);Z&&ee&&(Z.dispatch({effects:$e.StateEffect.appendConfig.of(v)}),Z.dispatch({effects:$e.StateEffect.appendConfig.of(fe.keymap.of([...g]))}),x.current=v,R.current=g)},[v,g]),L.useEffect(()=>{A.current&&c==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&A.current.contentDOM.focus()},[]),L.useEffect(()=>{if(A.current&&e!==Q){let _=A.current,Z=_.state.selection.ranges.some(({to:j,from:Ue})=>j>e.length||Ue>e.length)?$e.EditorSelection.cursor(e.length):_.state.selection,ee={from:0,to:_.state.doc.length,insert:e};_.dispatch({changes:ee,selection:Z})}},[e]),L.useEffect(function(){if(!n)return;let Z=be(ee=>{let j=A.current;ee.type==="success"?j==null||j.dispatch({annotations:[new Io.Annotation("remove-errors",!0)]}):ee.type==="action"&&ee.action==="show-error"&&ee.line&&(j==null||j.dispatch({annotations:[new Io.Annotation("show-error",ee.line)]}))});return()=>Z()},[be,n]);let Tt=_=>{_.key==="Enter"&&A.current&&(_.preventDefault(),A.current.contentDOM.focus())},tt=()=>{let _=4;return r&&(_+=6),p||(_+=1),`var(--${b}-space-${_})`};return p?L.createElement(L.Fragment,null,L.createElement("pre",{ref:X,className:l(O("cm",c,D),Po,Ao),translate:"no"},L.createElement("code",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et)),p&&d&&L.createElement("span",u({className:l(O("read-only"),sr)},{}),"Read-only")):L.createElement("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${Xe(t)}`:"Code Editor","aria-multiline":"true",className:l(O("cm",c,D),Po,Ao),onKeyDown:Tt,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},L.createElement("pre",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et))});var Oo=Me.forwardRef(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:a=!1,initMode:c,extensions:p,extensionsKeymap:d,id:h,readOnly:y,showReadOnly:S,additionalLanguages:v},g)=>{let{sandpack:k}=T(),{code:$,updateCode:w,readOnly:X}=ut(),{activeFile:A,status:ae,editorState:W}=k,Q=t!=null?t:k.visibleFiles.length>1,G=(0,ur.useClasser)(b),q=C=>{w(C)};return Me.createElement(ne,{className:G("editor"),style:e},Q&&Me.createElement(ht,{closableTabs:a}),Me.createElement("div",{className:l(G("code-editor"),Vt)},Me.createElement(Be,{key:A,ref:g,additionalLanguages:v,code:$,editorState:W,extensions:p,extensionsKeymap:d,filePath:A,id:h,initMode:c||k.initMode,onCodeUpdate:q,readOnly:y||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:S,wrapContent:n}),r&&ae==="idle"?Me.createElement(gt,null):null))});var fr=f(require("@code-hike/classer")),Le=f(require("react"));var Do=Le.forwardRef((p,c)=>{var d=p,{showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n}=d,a=N(d,["showTabs","showLineNumbers","decorators","code","initMode","wrapContent"]);let{sandpack:h}=T(),{code:y}=ut(),S=(0,fr.useClasser)(b),v=e!=null?e:h.visibleFiles.length>1;return Le.createElement(ne,u({},a),v?Le.createElement(ht,null):null,Le.createElement("div",{className:l(S("code-editor"),Vt)},Le.createElement(Be,{ref:c,code:s!=null?s:y,decorators:o,filePath:h.activeFile,initMode:r||h.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),h.status==="idle"?Le.createElement(gt,null):null)});var Ho=f(require("react"));var Yt=f(require("react"));var qe=f(require("react"));var hr=f(require("@code-hike/classer")),Je=f(require("react"));var Tn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),Gt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let a=(0,hr.useClasser)(b),c=h=>{e&&e(t),s==null||s(h)},p=t.split("/").filter(Boolean).pop(),d=()=>e?Je.createElement(xo,null):n?Je.createElement(ko,null):Je.createElement(Co,null);return Je.createElement("button",{className:l(a("button","explorer"),F,Tn),"data-active":o,onClick:c,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),Je.createElement("span",null,p))};var gr=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:a})=>{let[c,p]=qe.useState(!0);return qe.createElement("div",{key:e},qe.createElement(Gt,{depth:r,isDirOpen:c,onClick:()=>p(h=>!h),path:e+"/"}),c&&qe.createElement(Zt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:a}))};var br=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,a=e&&!!r,c=Object.keys(o).filter(h=>{var S;let y=h.startsWith(s);return a?y&&t.includes(h):n?y&&!((S=o[h])==null?void 0:S.hidden):y}).map(h=>h.substring(s.length)),p=new Set(c.filter(h=>h.includes("/")).map(h=>`${s}${h.split("/")[0]}/`)),d=c.filter(h=>!h.includes("/")).map(h=>`${s}${h}`);return{directories:Array.from(p),modules:d}};var Zt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:a})=>{let{directories:c,modules:p}=br({visibleFiles:a,autoHiddenFiles:n,prefixedPath:s,files:r});return Yt.createElement("div",null,c.map(d=>Yt.createElement(gr,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:a})),p.map(d=>Yt.createElement(Gt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Nn=m({padding:"$space$3",overflow:"auto",height:"100%"}),$n=s=>{var r=s,{className:e,autoHiddenFiles:t=!1}=r,o=N(r,["className","autoHiddenFiles"]);let{sandpack:n}=T();return Ho.createElement("div",u({className:l(Te,Nn,`${b}-file-explorer`,e)},o),Ho.createElement(Zt,{activeFile:n.activeFile,autoHiddenFiles:t,files:n.files,prefixedPath:"/",selectFile:n.openFile,visibleFiles:n.visibleFilesFromProps}))};var Sr=f(require("@code-hike/classer")),Y=f(require("react"));var yr=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Mn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Ln=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Bo=r=>{var n=r,{clientId:e,onURLChange:t,className:o}=n,s=N(n,["clientId","onURLChange","className"]);var q;let[a,c]=Y.useState(""),{sandpack:p,dispatch:d,listen:h}=T(),[y,S]=Y.useState((q=p.startRoute)!=null?q:"/"),[v,g]=Y.useState(!1),[k,$]=Y.useState(!1),w=(0,Sr.useClasser)(b);Y.useEffect(()=>{let C=h(O=>{if(O.type==="urlchange"){let{url:be,back:x,forward:R}=O,[z,D]=yr(be);c(z),S(D),g(x),$(R)}},e);return()=>C()},[]);let X=C=>{let O=C.target.value.startsWith("/")?C.target.value:`/${C.target.value}`;S(O)},A=C=>{C.code==="Enter"&&(C.preventDefault(),C.stopPropagation(),typeof t=="function"&&t(a+C.currentTarget.value))},ae=()=>{d({type:"refresh"})},W=()=>{d({type:"urlback"})},Q=()=>{d({type:"urlforward"})},G=l(w("button","icon"),F,Hs,m({minWidth:"$space$6",justifyContent:"center"}));return Y.createElement("div",u({className:l(w("navigator"),Mn,o)},s),Y.createElement("button",{"aria-label":"Go back one page",className:G,disabled:!v,onClick:W,type:"button"},Y.createElement(bo,null)),Y.createElement("button",{"aria-label":"Go forward one page",className:G,disabled:!k,onClick:Q,type:"button"},Y.createElement(yo,null)),Y.createElement("button",{"aria-label":"Refresh page",className:G,onClick:ae,type:"button"},Y.createElement(nt,null)),Y.createElement("input",{"aria-label":"Current Sandpack URL",className:l(w("input"),Ln),name:"Current Sandpack URL",onChange:X,onKeyDown:A,type:"text",value:y}))};var $r=f(require("@code-hike/classer")),U=f(require("react"));var vr=f(require("react"));var _o=()=>{var o;let{sandpack:e}=T(),{error:t}=e;return vr.useEffect(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};var yt=f(require("react"));var Jt=200,jo=(e,t)=>{let{sandpack:o,listen:s}=T(),[r,n]=yt.useState("LOADING");return yt.useEffect(()=>{o.loadingScreenRegisteredRef.current=!0;let a=s(c=>{c.type==="start"&&c.firstLoad===!0&&n("LOADING"),c.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{a()}},[e,o.status==="idle"]),yt.useEffect(()=>{let a;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(a=setTimeout(()=>n("HIDDEN"),Jt)),()=>{clearTimeout(a)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Uo=e=>{let{dispatch:t}=T();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var zo=()=>{let{sandpack:e}=T();return e.status!=="running"?null:wn(e)};var St=f(require("react"));var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=T(),s=St.useRef(null),r=St.useRef(it());return St.useEffect(()=>{let a=s.current,c=r.current;return a!==null&&e.registerBundler(a,c),()=>e.unregisterBundler(c)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:a=>t(a,r.current),dispatch:a=>o(a,r.current)}};var kr=f(require("@code-hike/classer")),Vo=f(require("react"));var kt=s=>{var r=s,{children:e,className:t}=r,o=N(r,["children","className"]);let n=_o(),a=(0,kr.useClasser)(b);return!n&&!e?null:Vo.createElement("div",u({className:l(a("overlay","error"),ft,jt,t),translate:"no"},o),Vo.createElement("div",{className:l(a("error-message"),Ze)},n||e))};var Tr=f(require("@code-hike/classer")),_e=f(require("react"));var Er=f(require("@code-hike/classer")),he=f(require("react"));var Rr=f(require("@code-hike/classer")),Xo=f(require("react"));var Cr=f(require("lz-string")),ce=f(require("react"));var Fn=e=>Cr.default.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),xr="https://codesandbox.io/api/v1/sandboxes/define",An=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),a={content:e[r].code,isBinary:!1};return M(u({},s),{[n]:a})},{});return Fn(u({files:o},t?{template:t}:null))},qt=o=>{var s=o,{children:e}=s,t=N(s,["children"]);var p,d,h;let{sandpack:r}=T(),n=ce.useRef(null),[a,c]=ce.useState();return ce.useEffect(function(){let S=setTimeout(()=>{let v=An(r.files,r.environment),g=new URLSearchParams({parameters:v,query:new URLSearchParams({file:r.activeFile,utm_medium:"sandpack"}).toString()});c(g)},600);return()=>{clearTimeout(S)}},[r.activeFile,r.environment,r.files]),ce.useEffect(function(){r.openInCSBRegisteredRef.current=!0},[]),((h=(d=(p=a==null?void 0:a.get)==null?void 0:p.call(a,"parameters"))==null?void 0:d.length)!=null?h:0)>1500?ce.createElement("button",u({onClick:()=>{var y;return(y=n.current)==null?void 0:y.submit()},title:"Open in CodeSandbox"},t),ce.createElement("form",{ref:n,action:xr,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(a,([y,S])=>ce.createElement("input",{key:y,name:y,type:"hidden",value:S}))),e):ce.createElement("a",u({href:`${xr}?${a==null?void 0:a.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox"},t),e)};var Ke=()=>{let e=(0,Rr.useClasser)(b);return Xo.createElement(qt,{className:l(e("button","icon-standalone"),F,me,te)},Xo.createElement(vo,null))};var Wo=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),Pn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${Wo}`]:{display:"flex"},[`.${F}`]:{display:"none"},[`&:hover .${F}`]:{display:"flex"},[`&:hover .${Wo}`]:{display:"none"}}),In=Mt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),On=m({animation:`${In} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),Kt=s=>{var r=s,{className:e,showOpenInCodeSandbox:t}=r,o=N(r,["className","showOpenInCodeSandbox"]);let n=(0,Er.useClasser)(b);return he.createElement("div",u({className:l(n("cube-wrapper"),Pn,e),title:"Open in CodeSandbox"},o),t&&he.createElement(Ke,null),he.createElement("div",{className:l(n("cube"),Wo)},he.createElement("div",{className:l(n("sides"),On)},he.createElement("div",{className:"top"}),he.createElement("div",{className:"right"}),he.createElement("div",{className:"bottom"}),he.createElement("div",{className:"left"}),he.createElement("div",{className:"front"}),he.createElement("div",{className:"back"}))))};var Dn=m({backgroundColor:"$colors$surface1"}),Ct=a=>{var c=a,{clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r}=c,n=N(c,["clientId","loading","className","style","showOpenInCodeSandbox"]);let p=jo(e,t),d=(0,Tr.useClasser)(b);if(p==="HIDDEN")return null;if(p==="TIMEOUT")return _e.createElement("div",u({className:l(d("overlay","error"),ft,jt,o)},n),_e.createElement("div",{className:l(d("error-message"),Ze)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let h=p==="LOADING"||p==="PRE_FADING";return _e.createElement("div",u({className:l(d("overlay","loading"),ft,Dn,o),style:M(u({},s),{opacity:h?1:0,transition:`opacity ${Jt}ms ease-out`})},n),_e.createElement(Kt,{showOpenInCodeSandbox:r}))};var Nr=f(require("@code-hike/classer")),Go=f(require("react"));var Zo=({clientId:e})=>{let{refresh:t}=Uo(e),o=(0,Nr.useClasser)(b);return Go.createElement("button",{className:l(o("button","icon-standalone"),F,me,te),onClick:t,title:"Refresh Sandpack",type:"button"},Go.createElement(nt,null))};var Hn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Bn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),_n=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Yo=U.forwardRef((d,p)=>{var h=d,{showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=U.createElement(U.Fragment,null),children:n,className:a}=h,c=N(h,["showNavigator","showRefreshButton","showOpenInCodeSandbox","showSandpackErrorOverlay","actionsChildren","children","className"]);let{sandpack:y,listen:S,iframe:v,getClient:g,clientId:k}=vt(),[$,w]=U.useState(null),{status:X,errorScreenRegisteredRef:A,openInCSBRegisteredRef:ae,loadingScreenRegisteredRef:W}=y,Q=(0,$r.useClasser)(b);ae.current=!0,A.current=!0,W.current=!0,U.useEffect(()=>S(C=>{C.type==="resize"&&w(C.height)}),[]),U.useImperativeHandle(p,()=>({clientId:k,getClient:g}),[g,k]);let G=q=>{!v.current||(v.current.src=q)};return U.createElement(ne,u({className:l(`${b}-preview`,a)},c),e&&U.createElement(Bo,{clientId:k,onURLChange:G}),U.createElement("div",{className:l(Q("preview-container"),Hn)},U.createElement("iframe",{ref:v,className:l(Q("preview-iframe"),Bn),style:{height:$||void 0},title:"Sandpack Preview"}),s&&U.createElement(kt,null),U.createElement("div",{className:l(Q("preview-actions"),_n)},r,!e&&t&&X==="running"&&U.createElement(Zo,{clientId:k}),o&&U.createElement(Ke,null)),U.createElement(Ct,{clientId:k,showOpenInCodeSandbox:o}),n))});var Mr=f(require("@code-hike/classer")),Se=f(require("react"));var jn=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),Un=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let{sandpack:r}=T(),n=zo(),a=(0,Mr.useClasser)(b),c=Se.useRef(null);return Se.useEffect(()=>{let p=c.current;return p&&r.registerBundler(p,"hidden"),()=>{r.unregisterBundler("hidden")}},[]),Se.createElement("div",u({className:l(a("transpiled-code"),Te,jn,e)},t),Se.createElement(Do,u({code:n!=null?n:"",initMode:r.initMode},t)),Se.createElement("iframe",{ref:c,style:{display:"none"},title:"transpiled sandpack code"}),Se.createElement(kt,null),Se.createElement(Ct,{clientId:"hidden",showOpenInCodeSandbox:!1}))};var Lr=f(require("@code-hike/classer")),ge=f(require("react"));var zn=m({height:"$layout$height",width:"100%"}),Vn=r=>{var n=r,{clientId:e,theme:t,className:o}=n,s=N(n,["clientId","theme","className"]);let{listen:a,sandpack:c}=T(),{themeMode:p}=Oe(),d=(0,Lr.useClasser)(b),h=ge.useRef(),[y,S]=ge.useState(null);return ge.useEffect(()=>{import("react-devtools-inline/frontend").then(v=>{h.current=v})},[]),ge.useEffect(()=>a(g=>{var k;if(g.type==="activate-react-devtools"){let $=e?c.clients[e]:Object.values(c.clients)[0],w=(k=$==null?void 0:$.iframe)==null?void 0:k.contentWindow;h.current&&w&&S(h.current.initialize(w))}}),[h,e,a,c.clients]),ge.useEffect(()=>{c.registerReactDevTools("legacy")},[]),y?ge.createElement("div",u({className:l(d("devtools"),zn,o)},s),ge.createElement(y,{browserTheme:t!=null?t:p})):null};var H=f(require("react"));var wr=f(require("@code-hike/classer")),Qt=f(require("react"));var Fr=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${Te}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${b}-file-explorer`]:{flex:.2,minWidth:200}}),Jo=Qt.forwardRef((r,s)=>{var n=r,{children:e,className:t}=n,o=N(n,["children","className"]);let{sandpack:a}=T(),c=(0,wr.useClasser)(b),p=Ut(a.lazyAnchorRef,s);return Qt.createElement("div",u({ref:p,className:l(c("layout"),Fr,t)},o),e)});var Re=f(require("react"));var Xn=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),qo=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Ar=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:a,showSuitesOnly:c})=>{let p=l(F,te,m({padding:"$space$1 $space$3"}));return Re.createElement("div",{className:l(Xn,qo)},Re.createElement("div",{className:l(qo)},Re.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},Re.createElement(Pe,null),"Tests")),Re.createElement("div",{className:l(qo)},c&&Re.createElement("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),Re.createElement("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),Re.createElement("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:a},"Watch")))};var Pr=f(require("@code-hike/classer")),Ko=f(require("react"));var Ir=({onClick:e})=>{let t=(0,Pr.useClasser)(b);return Ko.createElement("button",{className:l(t("button","icon-standalone"),F,me,te),onClick:e,title:"Run tests",type:"button"},Ko.createElement(rt,null))};var I=f(require("react"));var Fe=f(require("react"));var we=f(require("react"));var Or=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),eo=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ve=eo({status:"pass"}),J=eo({status:"fail"}),to=eo({status:"skip"}),Dr=eo({status:"title"}),Qo=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),Hr=Qo({status:"run"}),Br=Qo({status:"pass"}),es=Qo({status:"fail"});var Wn=m({marginLeft:"$space$4"}),Gn=m({marginBottom:"$space$2",color:"$colors$clickable"}),Zn=m({marginBottom:"$space$2",color:"$colors$hover"}),Yn=m({marginLeft:"$space$2"}),ts=m({marginRight:"$space$2"}),oo=({tests:e,style:t})=>we.default.createElement("div",{className:l(Wn)},e.map(o=>we.default.createElement("div",{key:o.name,className:l(Gn)},o.status==="pass"&&we.default.createElement("span",{className:l(ve,ts)},"\u2713"),o.status==="fail"&&we.default.createElement("span",{className:l(J,ts)},"\u2715"),o.status==="idle"&&we.default.createElement("span",{className:l(to,ts)},"\u25CB"),we.default.createElement("span",{className:l(Zn)},o.name),o.duration!==void 0&&we.default.createElement("span",{className:l(Yn)},"(",o.duration," ms)"))));var _r=f(require("clean-set")),jr=e=>so(e).filter(t=>t.status==="fail"),so=e=>Object.values(e.tests).concat(...Object.values(e.describes).map(so)),Ur=e=>e.map(ro).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),ro=e=>so(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),zr=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(ro).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Vr=e=>Qe(e,so).reduce((t,o)=>t+(o.duration||0),0),no=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,xt=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Qe=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ke=(e,t)=>o=>(0,_r.default)(o,e,t);var Jn=m({color:"$colors$hover",marginBottom:"$space$2"}),qn=m({marginLeft:"$space$4"}),os=({describes:e})=>Fe.createElement(Fe.Fragment,null,e.map(t=>{if(no(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Fe.createElement("div",{key:t.name,className:l(qn)},Fe.createElement("div",{className:l(Jn)},t.name),Fe.createElement(oo,{tests:o}),Fe.createElement(os,{describes:s}))}));var Xr=f(require("react"));var Kn=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),ss=({error:e,path:t})=>Xr.createElement("div",{className:l(Kn),dangerouslySetInnerHTML:{__html:Qn(e,t)}}),ao=e=>e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'"),Qn=(e,t)=>{let o="";if(e.matcherResult?o=`${ao(e.message).replace(/(expected)/m,`$1`).replace(/(received)/m,`$1`).replace(/(Difference:)/m,"$1").replace(/(Expected:)(.*)/m,`$1$2`).replace(/(Received:)(.*)/m,`$1$2`).replace(/^(-.*)/gm,`$1`).replace(/^(\+.*)/gm,`$1`)}`:o=ao(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(c=>(c.lineNumber+"").length))+2,a=Array.from({length:n}).map(()=>" ");o+="
",o+="
",o+="
",r.filter(c=>c.content.trim()).forEach(c=>{let p=(c.lineNumber+"").length,d=[...a];d.length-=p,c.highlight&&(d.length-=2);let h=c.content.indexOf(".to"),y=Array.from({length:a.length+h-(n-1)},()=>" "),S=ao(c.content).replace(/(describe|test|it)(\()('|"|`)(.*)('|"|`)/m,`$1$2$3$4$5`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`$1$2$3$4$5$6$7`);o+=`
`+(c.highlight?`> `:"")+d.join("")+ao(""+c.lineNumber)+" | "+S+"
"+(c.highlight?"
"+a.join("")+" | "+y.join("")+`^
`:"")}),o+="
"}return o.replace(/(?:\r\n|\r|\n)/g,"
")};var ea=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),rs=m({marginBottom:"$space$2"}),ta=m({fontWeight:"bold"}),io=m({borderRadius:"calc($border$radius / 2)"}),oa=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),sa=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),ra=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),na=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Wr=({specs:e,openSpec:t,status:o,verbose:s})=>I.createElement(I.Fragment,null,e.map(r=>{if(r.error)return I.createElement("div",{key:r.name,className:l(rs)},I.createElement(co,{className:l(io,es)},"Error"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name}),I.createElement(ss,{error:r.error,path:r.name}));if(no(r))return null;let n=Object.values(r.tests),a=Object.values(r.describes),c=ro(r);return I.createElement("div",{key:r.name,className:l(rs)},I.createElement("div",{className:l(ea)},o==="complete"?c.fail>0?I.createElement(co,{className:l(io,es)},"Fail"):I.createElement(co,{className:l(io,Br)},"Pass"):I.createElement(co,{className:l(io,Hr)},"Run"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name})),s&&I.createElement(oo,{tests:n}),s&&I.createElement(os,{describes:a}),jr(r).map(p=>I.createElement("div",{key:`failing-${p.name}`,className:l(rs)},I.createElement("div",{className:l(ta,J)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>I.createElement(ss,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),co=({children:e,className:t})=>I.createElement("span",{className:l(oa,t)},e),Gr=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return I.createElement("button",{className:l(F,sa),onClick:e},I.createElement("span",{className:l(ra)},s),I.createElement("span",{className:l(na)},r))};var oe=f(require("react"));var Zr=m({marginBottom:"$space$2"}),ns=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),aa=m({fontWeight:"bold",color:"$colors$clickable"}),Yr=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let a=s.length-n.length,c=Array.from({length:a},()=>" ").join("");return n+c};return oe.createElement("div",{className:l(aa)},oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},s),e.fail>0&&oe.createElement("span",{className:l(J)},e.fail," failed,"," "),e.pass>0&&oe.createElement("span",{className:l(ve)},e.pass," passed,"," "),oe.createElement("span",null,e.total," total")),oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},r("Tests:")),t.fail>0&&oe.createElement("span",{className:l(J)},t.fail," failed,"," "),t.skip>0&&oe.createElement("span",{className:l(to)},t.skip," skipped,"," "),t.pass>0&&oe.createElement("span",{className:l(ve)},t.pass," passed,"," "),oe.createElement("span",null,t.total," total")),oe.createElement("div",{className:l(ns)},r("Time:"),o/1e3,"s"))};var ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),ca={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},lo=c=>{var p=c,{verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n}=p,a=N(p,["verbose","watchMode","style","className","onComplete","actionsChildren"]);let d=Oe(),{getClient:h,iframe:y,listen:S,sandpack:v}=vt(),[g,k]=H.useState(M(u({},ca),{verbose:e,watchMode:t}));H.useEffect(()=>{let C=[],O="";return S(x=>{if(!(g.suiteOnly&&("path"in x&&x.path!==v.activeFile||"test"in x&&"path"in x.test&&x.test.path!==v.activeFile))){if(x.type==="action"&&x.action==="clear-errors"&&x.source==="jest"){O=x.path;return}if(x.type==="test"){if(x.event==="initialize_tests")return C=[],O="",g.watchMode?$():k(R=>M(u({},R),{status:"idle",specs:{}}));if(x.event==="test_count")return k(R=>M(u({},R),{specsCount:x.count}));if(x.event==="total_test_start")return C=[],k(R=>M(u({},R),{status:"running"}));if(x.event==="total_test_end")return k(R=>(r!==void 0&&r(R.specs),M(u({},R),{status:"complete"})));if(x.event==="add_file")return k(ke(["specs",x.path],{describes:{},tests:{},name:x.path}));if(x.event==="remove_file")return k(R=>{let z=Object.entries(R.specs).reduce((D,[V,le])=>V===x.path?D:M(u({},D),{[V]:le}),{});return M(u({},R),{specs:z})});if(x.event==="file_error")return k(ke(["specs",x.path,"error"],x.error));if(x.event==="describe_start"){C.push(x.blockName);let[R,z]=xt(C),D=O;return z===void 0?void 0:k(ke(["specs",D,"describes",...Qe(R,V=>[V,"describes"]),z],{name:x.blockName,tests:{},describes:{}}))}if(x.event==="describe_end"){C.pop();return}if(x.event==="add_test"){let[R,z]=xt(C),D={status:"idle",errors:[],name:x.testName,blocks:[...C],path:x.path};return k(z===void 0?ke(["specs",x.path,"tests",x.testName],D):ke(["specs",x.path,"describes",...Qe(R,V=>[V,"describes"]),z,"tests",x.testName],D))}if(x.event==="test_start"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:"running",name:R.name,blocks:R.blocks,path:R.path,errors:[]};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}if(x.event==="test_end"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:R.status,errors:R.errors,duration:R.duration,name:R.name,blocks:R.blocks,path:R.path};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}}}})},[g.suiteOnly,g.watchMode,v.activeFile]);let $=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-all-tests"})},w=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-tests",path:v.activeFile})},X=/.*\.(test|spec)\.[tj]sx?$/,A=v.activeFile.match(X)!==null;H.useEffect(function(){return S(({type:be})=>{be==="done"&&g.watchMode&&(A?w():$())})},[w,$,g.watchMode,A]);let ae=C=>{v.setActiveFile(C)},W=Object.values(g.specs),Q=Vr(W),G=Ur(W),q=zr(W);return H.createElement(ne,u({className:l(`${b}-tests`,s),style:u(u({},Or(d.themeMode==="dark")),o)},a),H.createElement("iframe",{ref:y,style:{display:"none"},title:"Sandpack Tests"}),H.createElement(Ar,{setSuiteOnly:()=>k(C=>M(u({},C),{suiteOnly:!C.suiteOnly})),setVerbose:()=>k(C=>M(u({},C),{verbose:!C.verbose})),setWatchMode:()=>{k(C=>M(u({},C),{watchMode:!C.watchMode}))},showSuitesOnly:g.specsCount>1,status:g.status,suiteOnly:g.suiteOnly,verbose:g.verbose,watchMode:g.watchMode}),g.status==="running"||g.status==="initialising"?H.createElement(Kt,{showOpenInCodeSandbox:!1}):H.createElement("div",{className:ia.toString()},n,H.createElement(Ir,{onClick:g.suiteOnly?w:$})),H.createElement("div",{className:l(la)},W.length===0&&g.status==="complete"?H.createElement("div",{className:l(pa)},H.createElement("p",null,"No test files found."),H.createElement("p",null,"Test match:"," ",H.createElement("span",{className:l(J)},X.toString()))):H.createElement(H.Fragment,null,H.createElement(Wr,{openSpec:ae,specs:W,status:g.status,verbose:g.verbose}),g.status==="complete"&&G.total>0&&H.createElement(Yr,{duration:Q,suites:q,tests:G}))))},la=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),pa=m({fontWeight:"bold",color:"$colors$base"});var se=f(require("react"));var Jr=f(require("@code-hike/classer")),as=f(require("react"));var qr=({onClick:e})=>{let t=(0,Jr.useClasser)("sp");return as.default.createElement("button",{className:l(t("button","icon-standalone"),F,me,te,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},as.default.createElement(So,null))};var po=f(require("react"));var Kr=()=>po.default.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},po.default.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},po.default.createElement(Pe,null),"Console"));var uo=f(require("react"));var Qr=["SyntaxError: ","Error in sandbox:"],en={id:"random",method:"clear",data:["Console was cleared"]},is="@t",cs="@r",ls=1e4,ps=2,mo=400,ds=mo*2;var fo=e=>{var a,c;let[t,o]=uo.useState([]),{listen:s}=T(),r=(a=e==null?void 0:e.showSyntaxError)!=null?a:!1,n=(c=e==null?void 0:e.maxMessageCount)!=null?c:ds;return uo.useEffect(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:y})=>y==="clear"))return o([en]);let h=r?d.log:d.log.filter(y=>y.data.filter(v=>typeof v!="string"?!0:Qr.filter(k=>v.startsWith(k)).length===0).length>0);if(!h)return;o(y=>{let S=[...y,...h].filter((v,g,k)=>g===k.findIndex($=>$.id===v.id));for(;S.length>ds;)S.shift();return S})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var ms=function(){return(0,eval)("this")}(),da=typeof ArrayBuffer=="function",ma=typeof Map=="function",ua=typeof Set=="function",Rt;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Rt||(Rt={}));var tn={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch(r){}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=ms[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(da){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof ms[e.ctorName]=="function"?new ms[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(ma){let o=new Map;for(let s=0;s{if(ua){let t=new Set;for(let o=0;o{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(on);if(typeof e=="object"&&is in e){let t=e[is];return tn[t](e.data)}return e},fa=(e,t,o)=>`[${e.reduce((r,n,a)=>`${r}${a?", ":""}${Et(n,t,o)}`,"")}]`,ha=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>ps)return s;let r=Object.entries(e),n=Object.entries(e).reduce((a,[c,p],d)=>{let h=d===0?"":", ",y=r.length>10?` - `:"",S=Et(p,t,o);return d===mo?a+y+"...":d>mo?a:a+`${h}${y}${c}: `+S},"");return`${s}{ ${n}${r.length>10?` -diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -index 985904c..3513462 100644 ---- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -@@ -92,7 +92,7 @@ h1 { - -
- --`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ht={files:{"tsconfig.json":{code:`{ -+`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ht={files:{"tsconfig.json":{code:`{ - "include": [ - "./**/*" - ], -@@ -140,7 +140,7 @@ h1 { - -
- --`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var Bt={files:{"/App.tsx":{code:`import { Component } from "solid-js"; -+`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var Bt={files:{"/App.tsx":{code:`import { Component } from "solid-js"; - - const App: Component = () => { - return

Hello World

; -@@ -395,7 +395,7 @@ createApp(App).mount('#app') - - - --`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var Ie={react:Dt,"react-ts":Ht,vue:Vt,vanilla:Ut,"vanilla-ts":zt,vue3:Xt,angular:Ot,svelte:_t,solid:Bt,"test-ts":jt};var De=e=>{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.tagName,class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:A.definition(A.function(A.variableName)),class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.standard(A.tagName),class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:[A.definition(A.function(A.variableName)),A.tagName],class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r{let F=gt(null),X=dt(F,N),E=gt(),{theme:_,themeId:B}=Ce(),[j,v]=hs(e),[$,q]=hs(f==="immediate"),S=Yr(h),{listen:k}=x(),I=gt([]),M=gt([]),{isIntersecting:O}=mn(F,{rootMargin:"600px 0px",threshold:.2});fn(N,()=>({getCodemirror:()=>E.current})),Re(()=>{(f==="lazy"||f==="user-visible")&&O&&q(!0)},[f,O]);let G=ns(t,o,R),$e=as(G,R),Me=rs(_),Le=ps({langSupport:$e,highlightTheme:Me,code:e}),he=hn(()=>u&&u.sort((L,D)=>L.line-D.line),[u]);Re(()=>{if(!F.current||!$)return;let L=setTimeout(function(){let U=[{key:"Tab",run:Z=>{var ie;en(Z);let K=y.find(({key:de})=>de==="Tab");return(ie=K==null?void 0:K.run(Z))!=null?ie:!0}},{key:"Shift-Tab",run:({state:Z,dispatch:K})=>{var de;Qr({state:Z,dispatch:K});let ie=y.find(({key:qe})=>qe==="Shift-Tab");return(de=ie==null?void 0:ie.run(oe))!=null?de:!0}},{key:"Escape",run:()=>(p||F.current&&F.current.focus(),!0)},{key:"mod-Backspace",run:tn}],w=[pn(),nn(),Jr(),...g,fs.of([...qr,...Kr,...an,...on,...U,...y]),$e,rn.fallback,os(),Me];p?(w.push(ds.readOnly.of(!0)),w.push(Jt.editable.of(!1))):(w.push(cn()),w.push(dn())),he&&w.push(is(he)),c&&w.push(Jt.lineWrapping),r&&w.push(sn()),n&&w.push(cs());let ge=ds.create({doc:e,extensions:w}),be=F.current,Fe=be.querySelector(".sp-pre-placeholder");Fe&&be.removeChild(Fe);let oe=new Jt({state:ge,parent:be,dispatch:Z=>{if(oe.update([Z]),Z.docChanged){let K=Z.newDoc.sliceString(0,Z.newDoc.length);v(K),s==null||s(K)}}});oe.contentDOM.setAttribute("data-gramm","false"),oe.contentDOM.setAttribute("aria-label",t?`Code Editor for ${ve(t)}`:"Code Editor"),p?oe.contentDOM.classList.add("cm-readonly"):oe.contentDOM.setAttribute("tabIndex","-1"),E.current=oe},0);return()=>{var D;(D=E.current)==null||D.destroy(),clearTimeout(L)}},[$,r,c,B,he,p]),Re(function(){let D=E.current,U=!Gt(g,I.current)||!Gt(y,M.current);D&&U&&(D.dispatch({effects:ms.appendConfig.of(g)}),D.dispatch({effects:ms.appendConfig.of(fs.of([...y]))}),I.current=g,M.current=y)},[g,y]),Re(()=>{E.current&&a==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&E.current.contentDOM.focus()},[]),Re(()=>{if(E.current&&e!==j){let L=E.current,D=L.state.selection.ranges.some(({to:w,from:ge})=>w>e.length||ge>e.length)?ln.cursor(e.length):L.state.selection,U={from:0,to:L.state.doc.length,insert:e};L.dispatch({changes:U,selection:D})}},[e]),Re(function(){if(!n)return;let D=k(U=>{let w=E.current;U.type==="success"?w==null||w.dispatch({annotations:[new us("remove-errors",!0)]}):U.type==="action"&&U.action==="show-error"&&U.line&&(w==null||w.dispatch({annotations:[new us("show-error",U.line)]}))});return()=>D()},[k,n]);let Je=L=>{L.key==="Enter"&&E.current&&(L.preventDefault(),E.current.contentDOM.focus())},we=()=>{let L=4;return r&&(L+=6),p||(L+=1),`var(--${h}-space-${L})`};return p?Ee(gn,null,Ee("pre",{ref:X,className:l(S("cm",a,G),Yt,Zt),translate:"no"},Ee("code",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le)),p&&d&&Ee("span",{className:l(S("read-only"),ls),...{}},"Read-only")):Ee("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${ve(t)}`:"Code Editor","aria-multiline":"true",className:l(S("cm",a,G),Yt,Zt),onKeyDown:Je,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},Ee("pre",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le))});var gs=yn(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:c=!1,initMode:a,extensions:p,extensionsKeymap:d,id:u,readOnly:f,showReadOnly:b,additionalLanguages:g},y)=>{let{sandpack:R}=x(),{code:N,updateCode:F,readOnly:X}=it(),{activeFile:E,status:_,editorState:B}=R,j=t!=null?t:R.visibleFiles.length>1,v=bn(h),$=q=>{F(q)};return je(Y,{className:v("editor"),style:e},j&&je(lt,{closableTabs:c}),je("div",{className:l(v("code-editor"),ht)},je(xe,{key:E,ref:y,additionalLanguages:g,code:N,editorState:B,extensions:p,extensionsKeymap:d,filePath:E,id:u,initMode:a||R.initMode,onCodeUpdate:$,readOnly:f||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:b,wrapContent:n}),r&&_==="idle"?je(pt,null):null))});import{useClasser as Sn}from"@code-hike/classer";import{createElement as Ue,forwardRef as vn}from"react";var bs=vn(({showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n,...c},a)=>{let{sandpack:p}=x(),{code:d}=it(),u=Sn(h),f=e!=null?e:p.visibleFiles.length>1;return Ue(Y,{...c},f?Ue(lt,null):null,Ue("div",{className:l(u("code-editor"),ht)},Ue(xe,{ref:a,code:s!=null?s:d,decorators:o,filePath:p.activeFile,initMode:r||p.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),p.status==="idle"?Ue(pt,null):null)});import{createElement as vs}from"react";import{createElement as Kt}from"react";import{createElement as qt,useState as xn}from"react";import{useClasser as kn}from"@code-hike/classer";import{createElement as ze}from"react";var Cn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),bt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let c=kn(h),a=u=>{e&&e(t),s==null||s(u)},p=t.split("/").filter(Boolean).pop(),d=()=>e?ze(Oo,null):n?ze(Po,null):ze(Io,null);return ze("button",{className:l(c("button","explorer"),T,Cn),"data-active":o,onClick:a,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),ze("span",null,p))};var ys=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:c})=>{let[a,p]=xn(!0);return qt("div",{key:e},qt(bt,{depth:r,isDirOpen:a,onClick:()=>p(u=>!u),path:e+"/"}),a&&qt(yt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:c}))};var Ss=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,c=e&&!!r,a=Object.keys(o).filter(u=>{var b;let f=u.startsWith(s);return c?f&&t.includes(u):n?f&&!((b=o[u])==null?void 0:b.hidden):f}).map(u=>u.substring(s.length)),p=new Set(a.filter(u=>u.includes("/")).map(u=>`${s}${u.split("/")[0]}/`)),d=a.filter(u=>!u.includes("/")).map(u=>`${s}${u}`);return{directories:Array.from(p),modules:d}};var yt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:c})=>{let{directories:a,modules:p}=Ss({visibleFiles:c,autoHiddenFiles:n,prefixedPath:s,files:r});return Kt("div",null,a.map(d=>Kt(ys,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:c})),p.map(d=>Kt(bt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Rn=m({padding:"$space$3",overflow:"auto",height:"100%"}),wp=({className:e,autoHiddenFiles:t=!1,...o})=>{let{sandpack:s}=x();return vs("div",{className:l(me,Rn,`${h}-file-explorer`,e),...o},vs(yt,{activeFile:s.activeFile,autoHiddenFiles:t,files:s.files,prefixedPath:"/",selectFile:s.openFile,visibleFiles:s.visibleFilesFromProps}))};import{useClasser as En}from"@code-hike/classer";import{createElement as le,useEffect as $n,useState as St}from"react";var ks=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Tn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Nn=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Cs=({clientId:e,onURLChange:t,className:o,...s})=>{var j;let[r,n]=St(""),{sandpack:c,dispatch:a,listen:p}=x(),[d,u]=St((j=c.startRoute)!=null?j:"/"),[f,b]=St(!1),[g,y]=St(!1),R=En(h);$n(()=>{let v=p($=>{if($.type==="urlchange"){let{url:q,back:S,forward:k}=$,[I,M]=ks(q);n(I),u(M),b(S),y(k)}},e);return()=>v()},[]);let N=v=>{let $=v.target.value.startsWith("/")?v.target.value:`/${v.target.value}`;u($)},F=v=>{v.code==="Enter"&&(v.preventDefault(),v.stopPropagation(),typeof t=="function"&&t(r+v.currentTarget.value))},X=()=>{a({type:"refresh"})},E=()=>{a({type:"urlback"})},_=()=>{a({type:"urlforward"})},B=l(R("button","icon"),T,Ko,m({minWidth:"$space$6",justifyContent:"center"}));return le("div",{className:l(R("navigator"),Tn,o),...s},le("button",{"aria-label":"Go back one page",className:B,disabled:!f,onClick:E,type:"button"},le(Lo,null)),le("button",{"aria-label":"Go forward one page",className:B,disabled:!g,onClick:_,type:"button"},le(wo,null)),le("button",{"aria-label":"Refresh page",className:B,onClick:X,type:"button"},le(Qe,null)),le("input",{"aria-label":"Current Sandpack URL",className:l(R("input"),Nn),name:"Current Sandpack URL",onChange:N,onKeyDown:F,type:"text",value:d}))};import{useClasser as Gn}from"@code-hike/classer";import{Fragment as Kn,createElement as re,forwardRef as qn,useEffect as ea,useImperativeHandle as ta,useState as Qn}from"react";import{useEffect as Mn}from"react";var xs=()=>{var o;let{sandpack:e}=x(),{error:t}=e;return Mn(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};import{useEffect as Es,useState as Ln}from"react";var Qt=200,Rs=(e,t)=>{let{sandpack:o,listen:s}=x(),[r,n]=Ln("LOADING");return Es(()=>{o.loadingScreenRegisteredRef.current=!0;let c=s(a=>{a.type==="start"&&a.firstLoad===!0&&n("LOADING"),a.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{c()}},[e,o.status==="idle"]),Es(()=>{let c;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(c=setTimeout(()=>n("HIDDEN"),Qt)),()=>{clearTimeout(c)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Ts=e=>{let{dispatch:t}=x();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var Ns=()=>{let{sandpack:e}=x();return e.status!=="running"?null:wn(e)};import{useEffect as Fn,useRef as $s}from"react";var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=x(),s=$s(null),r=$s(Ae());return Fn(()=>{let c=s.current,a=r.current;return c!==null&&e.registerBundler(c,a),()=>e.unregisterBundler(a)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:c=>t(c,r.current),dispatch:c=>o(c,r.current)}};import{useClasser as An}from"@code-hike/classer";import{createElement as Ms}from"react";var kt=({children:e,className:t,...o})=>{let s=xs(),r=An(h);return!s&&!e?null:Ms("div",{className:l(r("overlay","error"),He,ct,t),translate:"no",...o},Ms("div",{className:l(r("error-message"),ke)},s||e))};import{useClasser as Vn}from"@code-hike/classer";import{createElement as Te}from"react";import{useClasser as _n}from"@code-hike/classer";import{createElement as se}from"react";import{useClasser as Bn}from"@code-hike/classer";import{createElement as Fs}from"react";import Pn from"lz-string";import{createElement as Ct,useEffect as ws,useRef as Dn,useState as Hn}from"react";var In=e=>Pn.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),Ls="https://codesandbox.io/api/v1/sandboxes/define",On=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),c={content:e[r].code,isBinary:!1};return{...s,[n]:c}},{});return In({files:o,...t?{template:t}:null})},eo=({children:e,...t})=>{var c,a,p;let{sandpack:o}=x(),s=Dn(null),[r,n]=Hn();return ws(function(){let u=setTimeout(()=>{let f=On(o.files,o.environment),b=new URLSearchParams({parameters:f,query:new URLSearchParams({file:o.activeFile,utm_medium:"sandpack"}).toString()});n(b)},600);return()=>{clearTimeout(u)}},[o.activeFile,o.environment,o.files]),ws(function(){o.openInCSBRegisteredRef.current=!0},[]),((p=(a=(c=r==null?void 0:r.get)==null?void 0:c.call(r,"parameters"))==null?void 0:a.length)!=null?p:0)>1500?Ct("button",{onClick:()=>{var d;return(d=s.current)==null?void 0:d.submit()},title:"Open in CodeSandbox",...t},Ct("form",{ref:s,action:Ls,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(r,([d,u])=>Ct("input",{key:d,name:d,type:"hidden",value:u}))),e):Ct("a",{href:`${Ls}?${r==null?void 0:r.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox",...t},e)};var Ve=()=>{let e=Bn(h);return Fs(eo,{className:l(e("button","icon-standalone"),T,ee,z)},Fs(Ao,null))};var to=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),jn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${to}`]:{display:"flex"},[`.${T}`]:{display:"none"},[`&:hover .${T}`]:{display:"flex"},[`&:hover .${to}`]:{display:"none"}}),Un=tt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),zn=m({animation:`${Un} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),xt=({className:e,showOpenInCodeSandbox:t,...o})=>{let s=_n(h);return se("div",{className:l(s("cube-wrapper"),jn,e),title:"Open in CodeSandbox",...o},t&&se(Ve,null),se("div",{className:l(s("cube"),to)},se("div",{className:l(s("sides"),zn)},se("div",{className:"top"}),se("div",{className:"right"}),se("div",{className:"bottom"}),se("div",{className:"left"}),se("div",{className:"front"}),se("div",{className:"back"}))))};var Xn=m({backgroundColor:"$colors$surface1"}),Rt=({clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r,...n})=>{let c=Rs(e,t),a=Vn(h);if(c==="HIDDEN")return null;if(c==="TIMEOUT")return Te("div",{className:l(a("overlay","error"),He,ct,o),...n},Te("div",{className:l(a("error-message"),ke)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",Te("a",{className:l(a("error-message"),ke),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",Te("a",{className:l(a("error-message"),ke),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let p=c==="LOADING"||c==="PRE_FADING";return Te("div",{className:l(a("overlay","loading"),He,Xn,o),style:{...s,opacity:p?1:0,transition:`opacity ${Qt}ms ease-out`},...n},Te(xt,{showOpenInCodeSandbox:r}))};import{useClasser as Wn}from"@code-hike/classer";import{createElement as Ps}from"react";var As=({clientId:e})=>{let{refresh:t}=Ts(e),o=Wn(h);return Ps("button",{className:l(o("button","icon-standalone"),T,ee,z),onClick:t,title:"Refresh Sandpack",type:"button"},Ps(Qe,null))};var Zn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Yn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),Jn=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Is=qn(({showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=re(Kn,null),children:n,className:c,...a},p)=>{let{sandpack:d,listen:u,iframe:f,getClient:b,clientId:g}=vt(),[y,R]=Qn(null),{status:N,errorScreenRegisteredRef:F,openInCSBRegisteredRef:X,loadingScreenRegisteredRef:E}=d,_=Gn(h);X.current=!0,F.current=!0,E.current=!0,ea(()=>u(v=>{v.type==="resize"&&R(v.height)}),[]),ta(p,()=>({clientId:g,getClient:b}),[b,g]);let B=j=>{!f.current||(f.current.src=j)};return re(Y,{className:l(`${h}-preview`,c),...a},e&&re(Cs,{clientId:g,onURLChange:B}),re("div",{className:l(_("preview-container"),Zn)},re("iframe",{ref:f,className:l(_("preview-iframe"),Yn),style:{height:y||void 0},title:"Sandpack Preview"}),s&&re(kt,null),re("div",{className:l(_("preview-actions"),Jn)},r,!e&&t&&N==="running"&&re(As,{clientId:g}),o&&re(Ve,null)),re(Rt,{clientId:g,showOpenInCodeSandbox:o}),n))});import{useClasser as oa}from"@code-hike/classer";import{createElement as Xe,useEffect as na,useRef as ra}from"react";var sa=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),bm=({className:e,...t})=>{let{sandpack:o}=x(),s=Ns(),r=oa(h),n=ra(null);return na(()=>{let c=n.current;return c&&o.registerBundler(c,"hidden"),()=>{o.unregisterBundler("hidden")}},[]),Xe("div",{className:l(r("transpiled-code"),me,sa,e),...t},Xe(bs,{code:s!=null?s:"",initMode:o.initMode,...t}),Xe("iframe",{ref:n,style:{display:"none"},title:"transpiled sandpack code"}),Xe(kt,null),Xe(Rt,{clientId:"hidden",showOpenInCodeSandbox:!1}))};import{useClasser as aa}from"@code-hike/classer";import{createElement as Os,useEffect as oo,useRef as ca,useState as la}from"react";var ia=m({height:"$layout$height",width:"100%"}),Em=({clientId:e,theme:t,className:o,...s})=>{let{listen:r,sandpack:n}=x(),{themeMode:c}=Ce(),a=aa(h),p=ca(),[d,u]=la(null);return oo(()=>{import("react-devtools-inline/frontend").then(f=>{p.current=f})},[]),oo(()=>r(b=>{var g;if(b.type==="activate-react-devtools"){let y=e?n.clients[e]:Object.values(n.clients)[0],R=(g=y==null?void 0:y.iframe)==null?void 0:g.contentWindow;p.current&&R&&u(p.current.initialize(R))}}),[p,e,r,n.clients]),oo(()=>{n.registerReactDevTools("legacy")},[]),d?Os("div",{className:l(a("devtools"),ia,o),...s},Os(d,{browserTheme:t!=null?t:c})):null};import{Fragment as _a,createElement as V,useEffect as Qs,useState as Ba}from"react";import{useClasser as pa}from"@code-hike/classer";import{createElement as ua,forwardRef as ma}from"react";var da=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${me}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${h}-file-explorer`]:{flex:.2,minWidth:200}}),Ds=ma(({children:e,className:t,...o},s)=>{let{sandpack:r}=x(),n=pa(h),c=dt(r.lazyAnchorRef,s);return ua("div",{ref:c,className:l(n("layout"),da,t),...o},e)});import{createElement as pe}from"react";var fa=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),so=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Hs=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:c,showSuitesOnly:a})=>{let p=l(T,z,m({padding:"$space$1 $space$3"}));return pe("div",{className:l(fa,so)},pe("div",{className:l(so)},pe("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},pe(Se,null),"Tests")),pe("div",{className:l(so)},a&&pe("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),pe("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),pe("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:c},"Watch")))};import{useClasser as ha}from"@code-hike/classer";import{createElement as _s}from"react";var Bs=({onClick:e})=>{let t=ha(h);return _s("button",{className:l(t("button","icon-standalone"),T,ee,z),onClick:e,title:"Run tests",type:"button"},_s(Ke,null))};import{Fragment as Aa,createElement as P}from"react";import{Fragment as xa,createElement as Ge}from"react";import ue from"react";var js=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),Et=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ne=Et({status:"pass"}),H=Et({status:"fail"}),Tt=Et({status:"skip"}),Us=Et({status:"title"}),ro=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),zs=ro({status:"run"}),Vs=ro({status:"pass"}),no=ro({status:"fail"});var ga=m({marginLeft:"$space$4"}),ba=m({marginBottom:"$space$2",color:"$colors$clickable"}),ya=m({marginBottom:"$space$2",color:"$colors$hover"}),Sa=m({marginLeft:"$space$2"}),ao=m({marginRight:"$space$2"}),Nt=({tests:e,style:t})=>ue.createElement("div",{className:l(ga)},e.map(o=>ue.createElement("div",{key:o.name,className:l(ba)},o.status==="pass"&&ue.createElement("span",{className:l(ne,ao)},"\u2713"),o.status==="fail"&&ue.createElement("span",{className:l(H,ao)},"\u2715"),o.status==="idle"&&ue.createElement("span",{className:l(Tt,ao)},"\u25CB"),ue.createElement("span",{className:l(ya)},o.name),o.duration!==void 0&&ue.createElement("span",{className:l(Sa)},"(",o.duration," ms)"))));import va from"clean-set";var Xs=e=>$t(e).filter(t=>t.status==="fail"),$t=e=>Object.values(e.tests).concat(...Object.values(e.describes).map($t)),Ws=e=>e.map(Mt).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),Mt=e=>$t(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),Gs=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(Mt).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Zs=e=>Ne(e,$t).reduce((t,o)=>t+(o.duration||0),0),Lt=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,We=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Ne=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ae=(e,t)=>o=>va(o,e,t);var ka=m({color:"$colors$hover",marginBottom:"$space$2"}),Ca=m({marginLeft:"$space$4"}),io=({describes:e})=>Ge(xa,null,e.map(t=>{if(Lt(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Ge("div",{key:t.name,className:l(Ca)},Ge("div",{className:l(ka)},t.name),Ge(Nt,{tests:o}),Ge(io,{describes:s}))}));import{createElement as Ta}from"react";var Ra=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),co=({error:e,path:t})=>Ta("div",{className:l(Ra),dangerouslySetInnerHTML:{__html:Ea(e,t)}}),wt=e=>e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'"),Ea=(e,t)=>{let o="";if(e.matcherResult?o=`${wt(e.message).replace(/(expected)/m,`$1`).replace(/(received)/m,`$1`).replace(/(Difference:)/m,"$1").replace(/(Expected:)(.*)/m,`$1$2`).replace(/(Received:)(.*)/m,`$1$2`).replace(/^(-.*)/gm,`$1`).replace(/^(\+.*)/gm,`$1`)}`:o=wt(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(a=>(a.lineNumber+"").length))+2,c=Array.from({length:n}).map(()=>" ");o+="
",o+="
",o+="
",r.filter(a=>a.content.trim()).forEach(a=>{let p=(a.lineNumber+"").length,d=[...c];d.length-=p,a.highlight&&(d.length-=2);let u=a.content.indexOf(".to"),f=Array.from({length:c.length+u-(n-1)},()=>" "),b=wt(a.content).replace(/(describe|test|it)(\()('|"|`)(.*)('|"|`)/m,`$1$2$3$4$5`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`$1$2$3$4$5$6$7`);o+=`
`+(a.highlight?`> `:"")+d.join("")+wt(""+a.lineNumber)+" | "+b+"
"+(a.highlight?"
"+c.join("")+" | "+f.join("")+`^
`:"")}),o+="
"}return o.replace(/(?:\r\n|\r|\n)/g,"
")};var Na=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),lo=m({marginBottom:"$space$2"}),$a=m({fontWeight:"bold"}),Ft=m({borderRadius:"calc($border$radius / 2)"}),Ma=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),La=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),wa=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Fa=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Ys=({specs:e,openSpec:t,status:o,verbose:s})=>P(Aa,null,e.map(r=>{if(r.error)return P("div",{key:r.name,className:l(lo)},P(At,{className:l(Ft,no)},"Error"),P(Js,{onClick:()=>t(r.name),path:r.name}),P(co,{error:r.error,path:r.name}));if(Lt(r))return null;let n=Object.values(r.tests),c=Object.values(r.describes),a=Mt(r);return P("div",{key:r.name,className:l(lo)},P("div",{className:l(Na)},o==="complete"?a.fail>0?P(At,{className:l(Ft,no)},"Fail"):P(At,{className:l(Ft,Vs)},"Pass"):P(At,{className:l(Ft,zs)},"Run"),P(Js,{onClick:()=>t(r.name),path:r.name})),s&&P(Nt,{tests:n}),s&&P(io,{describes:c}),Xs(r).map(p=>P("div",{key:`failing-${p.name}`,className:l(lo)},P("div",{className:l($a,H)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>P(co,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),At=({children:e,className:t})=>P("span",{className:l(Ma,t)},e),Js=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return P("button",{className:l(T,La),onClick:e},P("span",{className:l(wa)},s),P("span",{className:l(Fa)},r))};import{createElement as W}from"react";var qs=m({marginBottom:"$space$2"}),po=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),Pa=m({fontWeight:"bold",color:"$colors$clickable"}),Ks=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let c=s.length-n.length,a=Array.from({length:c},()=>" ").join("");return n+a};return W("div",{className:l(Pa)},W("div",{className:l(qs)},W("span",{className:l(po)},s),e.fail>0&&W("span",{className:l(H)},e.fail," failed,"," "),e.pass>0&&W("span",{className:l(ne)},e.pass," passed,"," "),W("span",null,e.total," total")),W("div",{className:l(qs)},W("span",{className:l(po)},r("Tests:")),t.fail>0&&W("span",{className:l(H)},t.fail," failed,"," "),t.skip>0&&W("span",{className:l(Tt)},t.skip," skipped,"," "),t.pass>0&&W("span",{className:l(ne)},t.pass," passed,"," "),W("span",null,t.total," total")),W("div",{className:l(po)},r("Time:"),o/1e3,"s"))};var Ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Oa={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},mo=({verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n,...c})=>{let a=Ce(),{getClient:p,iframe:d,listen:u,sandpack:f}=vt(),[b,g]=Ba({...Oa,verbose:e,watchMode:t});Qs(()=>{let v=[],$="";return u(S=>{if(!(b.suiteOnly&&("path"in S&&S.path!==f.activeFile||"test"in S&&"path"in S.test&&S.test.path!==f.activeFile))){if(S.type==="action"&&S.action==="clear-errors"&&S.source==="jest"){$=S.path;return}if(S.type==="test"){if(S.event==="initialize_tests")return v=[],$="",b.watchMode?y():g(k=>({...k,status:"idle",specs:{}}));if(S.event==="test_count")return g(k=>({...k,specsCount:S.count}));if(S.event==="total_test_start")return v=[],g(k=>({...k,status:"running"}));if(S.event==="total_test_end")return g(k=>(r!==void 0&&r(k.specs),{...k,status:"complete"}));if(S.event==="add_file")return g(ae(["specs",S.path],{describes:{},tests:{},name:S.path}));if(S.event==="remove_file")return g(k=>{let I=Object.entries(k.specs).reduce((M,[O,G])=>O===S.path?M:{...M,[O]:G},{});return{...k,specs:I}});if(S.event==="file_error")return g(ae(["specs",S.path,"error"],S.error));if(S.event==="describe_start"){v.push(S.blockName);let[k,I]=We(v),M=$;return I===void 0?void 0:g(ae(["specs",M,"describes",...Ne(k,O=>[O,"describes"]),I],{name:S.blockName,tests:{},describes:{}}))}if(S.event==="describe_end"){v.pop();return}if(S.event==="add_test"){let[k,I]=We(v),M={status:"idle",errors:[],name:S.testName,blocks:[...v],path:S.path};return g(I===void 0?ae(["specs",S.path,"tests",S.testName],M):ae(["specs",S.path,"describes",...Ne(k,O=>[O,"describes"]),I,"tests",S.testName],M))}if(S.event==="test_start"){let{test:k}=S,[I,M]=We(k.blocks),O={status:"running",name:k.name,blocks:k.blocks,path:k.path,errors:[]};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}if(S.event==="test_end"){let{test:k}=S,[I,M]=We(k.blocks),O={status:k.status,errors:k.errors,duration:k.duration,name:k.name,blocks:k.blocks,path:k.path};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}}}})},[b.suiteOnly,b.watchMode,f.activeFile]);let y=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-all-tests"})},R=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-tests",path:f.activeFile})},N=/.*\.(test|spec)\.[tj]sx?$/,F=f.activeFile.match(N)!==null;Qs(function(){return u(({type:q})=>{q==="done"&&b.watchMode&&(F?R():y())})},[R,y,b.watchMode,F]);let X=v=>{f.setActiveFile(v)},E=Object.values(b.specs),_=Zs(E),B=Ws(E),j=Gs(E);return V(Y,{className:l(`${h}-tests`,s),style:{...js(a.themeMode==="dark"),...o},...c},V("iframe",{ref:d,style:{display:"none"},title:"Sandpack Tests"}),V(Hs,{setSuiteOnly:()=>g(v=>({...v,suiteOnly:!v.suiteOnly})),setVerbose:()=>g(v=>({...v,verbose:!v.verbose})),setWatchMode:()=>{g(v=>({...v,watchMode:!v.watchMode}))},showSuitesOnly:b.specsCount>1,status:b.status,suiteOnly:b.suiteOnly,verbose:b.verbose,watchMode:b.watchMode}),b.status==="running"||b.status==="initialising"?V(xt,{showOpenInCodeSandbox:!1}):V("div",{className:Ia.toString()},n,V(Bs,{onClick:b.suiteOnly?R:y})),V("div",{className:l(Da)},E.length===0&&b.status==="complete"?V("div",{className:l(Ha)},V("p",null,"No test files found."),V("p",null,"Test match:"," ",V("span",{className:l(H)},N.toString()))):V(_a,null,V(Ys,{openSpec:X,specs:E,status:b.status,verbose:b.verbose}),b.status==="complete"&&B.total>0&&V(Ks,{duration:_,suites:j,tests:B}))))},Da=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),Ha=m({fontWeight:"bold",color:"$colors$base"});import{Fragment as Ka,createElement as fe,useEffect as qa,useRef as Ja}from"react";import{useClasser as ja}from"@code-hike/classer";import er from"react";var tr=({onClick:e})=>{let t=ja("sp");return er.createElement("button",{className:l(t("button","icon-standalone"),T,ee,z,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},er.createElement(Fo,null))};import uo from"react";var or=()=>uo.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},uo.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},uo.createElement(Se,null),"Console"));import{useEffect as za,useState as Ua}from"react";var sr=["SyntaxError: ","Error in sandbox:"],rr={id:"random",method:"clear",data:["Console was cleared"]},fo="@t",ho="@r",go=1e4,bo=2,Pt=400,yo=Pt*2;var So=e=>{var c,a;let[t,o]=Ua([]),{listen:s}=x(),r=(c=e==null?void 0:e.showSyntaxError)!=null?c:!1,n=(a=e==null?void 0:e.maxMessageCount)!=null?a:yo;return za(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:f})=>f==="clear"))return o([rr]);let u=r?d.log:d.log.filter(f=>f.data.filter(g=>typeof g!="string"?!0:sr.filter(R=>g.startsWith(R)).length===0).length>0);if(!u)return;o(f=>{let b=[...f,...u].filter((g,y,R)=>y===R.findIndex(N=>N.id===g.id));for(;b.length>yo;)b.shift();return b})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var vo=function(){return(0,eval)("this")}(),Va=typeof ArrayBuffer=="function",Xa=typeof Map=="function",Wa=typeof Set=="function",Ze;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Ze||(Ze={}));var nr={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch{}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=vo[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(Va){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof vo[e.ctorName]=="function"?new vo[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(Xa){let o=new Map;for(let s=0;s{if(Wa){let t=new Set;for(let o=0;o{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(ar);if(typeof e=="object"&&fo in e){let t=e[fo];return nr[t](e.data)}return e},Ga=(e,t,o)=>`[${e.reduce((r,n,c)=>`${r}${c?", ":""}${Ye(n,t,o)}`,"")}]`,Za=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>bo)return s;let r=Object.entries(e),n=Object.entries(e).reduce((c,[a,p],d)=>{let u=d===0?"":", ",f=r.length>10?` - `:"",b=Ye(p,t,o);return d===Pt?c+f+"...":d>Pt?c:c+`${u}${f}${a}: `+b},"");return`${s}{ ${n}${r.length>10?` diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js index 7dd1b0c4a..4694ff674 100644 --- a/plugins/remark-smartypants.js +++ b/plugins/remark-smartypants.js @@ -1,3 +1,8 @@ +/*! + * Based on 'silvenon/remark-smartypants' + * https://github.com/silvenon/remark-smartypants/pull/80 + */ + const visit = require('unist-util-visit'); const retext = require('retext'); const smartypants = require('retext-smartypants'); @@ -9,12 +14,48 @@ function check(parent) { } module.exports = function (options) { - const processor = retext().use(smartypants, options); + const processor = retext().use(smartypants, { + ...options, + // Do not replace ellipses, dashes, backticks because they change string + // length, and we couldn't guarantee right splice of text in second visit of + // tree + ellipses: false, + dashes: false, + backticks: false, + }); + + const processor2 = retext().use(smartypants, { + ...options, + // Do not replace quotes because they are already replaced in the first + // processor + quotes: false, + }); function transformer(tree) { - visit(tree, 'text', (node, index, parent) => { - if (check(parent)) node.value = String(processor.processSync(node.value)); + let allText = ''; + let startIndex = 0; + const textOrInlineCodeNodes = []; + + visit(tree, ['text', 'inlineCode'], (node, _, parent) => { + if (check(parent)) { + if (node.type === 'text') allText += node.value; + // for the case when inlineCode contains just one part of quote: `foo'bar` + else allText += 'A'.repeat(node.value.length); + textOrInlineCodeNodes.push(node); + } }); + + // Concat all text into one string, to properly replace quotes around non-"text" nodes + allText = String(processor.processSync(allText)); + + for (const node of textOrInlineCodeNodes) { + const endIndex = startIndex + node.value.length; + if (node.type === 'text') { + const processedText = allText.slice(startIndex, endIndex); + node.value = String(processor2.processSync(processedText)); + } + startIndex = endIndex; + } } return transformer; diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 000000000..5de701e13 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-384x384.png b/public/android-chrome-384x384.png new file mode 100644 index 000000000..f42a6776e Binary files /dev/null and b/public/android-chrome-384x384.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 000000000..2fdbf6902 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 000000000..baf1332a3 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml new file mode 100644 index 000000000..f9c2e67fe --- /dev/null +++ b/public/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #2b5797 + + + diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 000000000..d24cb4f76 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 000000000..953ae4cc3 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 38fd8641c..519b939a0 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon_old.ico b/public/favicon_old.ico new file mode 100644 index 000000000..20b59d440 Binary files /dev/null and b/public/favicon_old.ico differ diff --git a/public/images/brand/logo_dark.svg b/public/images/brand/logo_dark.svg new file mode 100644 index 000000000..265777fa3 --- /dev/null +++ b/public/images/brand/logo_dark.svg @@ -0,0 +1,12 @@ + + + React-Logo-Filled (1) + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/logo_light.svg b/public/images/brand/logo_light.svg new file mode 100644 index 000000000..bbe5a8994 --- /dev/null +++ b/public/images/brand/logo_light.svg @@ -0,0 +1,10 @@ + + + React-Logo-Filled (1) + + + + + + + \ No newline at end of file diff --git a/public/images/brand/wordmark_dark.svg b/public/images/brand/wordmark_dark.svg new file mode 100644 index 000000000..ec028ae21 --- /dev/null +++ b/public/images/brand/wordmark_dark.svg @@ -0,0 +1,15 @@ + + + Group + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/wordmark_light.svg b/public/images/brand/wordmark_light.svg new file mode 100644 index 000000000..2de8f3cc7 --- /dev/null +++ b/public/images/brand/wordmark_light.svg @@ -0,0 +1,11 @@ + + + Group + + + + + + + + \ No newline at end of file diff --git a/public/images/docs/diagrams/conditional_render_tree.dark.png b/public/images/docs/diagrams/conditional_render_tree.dark.png new file mode 100644 index 000000000..5189a44c8 Binary files /dev/null and b/public/images/docs/diagrams/conditional_render_tree.dark.png differ diff --git a/public/images/docs/diagrams/conditional_render_tree.png b/public/images/docs/diagrams/conditional_render_tree.png new file mode 100644 index 000000000..c76e8cb63 Binary files /dev/null and b/public/images/docs/diagrams/conditional_render_tree.png differ diff --git a/public/images/docs/diagrams/generic_dependency_tree.dark.png b/public/images/docs/diagrams/generic_dependency_tree.dark.png new file mode 100644 index 000000000..64694f585 Binary files /dev/null and b/public/images/docs/diagrams/generic_dependency_tree.dark.png differ diff --git a/public/images/docs/diagrams/generic_dependency_tree.png b/public/images/docs/diagrams/generic_dependency_tree.png new file mode 100644 index 000000000..8ab6f1a34 Binary files /dev/null and b/public/images/docs/diagrams/generic_dependency_tree.png differ diff --git a/public/images/docs/diagrams/generic_render_tree.dark.png b/public/images/docs/diagrams/generic_render_tree.dark.png new file mode 100644 index 000000000..859fdaa96 Binary files /dev/null and b/public/images/docs/diagrams/generic_render_tree.dark.png differ diff --git a/public/images/docs/diagrams/generic_render_tree.png b/public/images/docs/diagrams/generic_render_tree.png new file mode 100644 index 000000000..952cf5faa Binary files /dev/null and b/public/images/docs/diagrams/generic_render_tree.png differ diff --git a/public/images/docs/diagrams/module_dependency_tree.dark.png b/public/images/docs/diagrams/module_dependency_tree.dark.png new file mode 100644 index 000000000..e8a85f7c0 Binary files /dev/null and b/public/images/docs/diagrams/module_dependency_tree.dark.png differ diff --git a/public/images/docs/diagrams/module_dependency_tree.png b/public/images/docs/diagrams/module_dependency_tree.png new file mode 100644 index 000000000..0dcaaa7aa Binary files /dev/null and b/public/images/docs/diagrams/module_dependency_tree.png differ diff --git a/public/images/docs/diagrams/render_tree.dark.png b/public/images/docs/diagrams/render_tree.dark.png new file mode 100644 index 000000000..117d7ff3e Binary files /dev/null and b/public/images/docs/diagrams/render_tree.dark.png differ diff --git a/public/images/docs/diagrams/render_tree.png b/public/images/docs/diagrams/render_tree.png new file mode 100644 index 000000000..1ea750bb0 Binary files /dev/null and b/public/images/docs/diagrams/render_tree.png differ diff --git a/public/images/docs/diagrams/use_client_module_dependency.dark.png b/public/images/docs/diagrams/use_client_module_dependency.dark.png new file mode 100644 index 000000000..c50e7308b Binary files /dev/null and b/public/images/docs/diagrams/use_client_module_dependency.dark.png differ diff --git a/public/images/docs/diagrams/use_client_module_dependency.png b/public/images/docs/diagrams/use_client_module_dependency.png new file mode 100644 index 000000000..d535246f7 Binary files /dev/null and b/public/images/docs/diagrams/use_client_module_dependency.png differ diff --git a/public/images/docs/diagrams/use_client_render_tree.dark.png b/public/images/docs/diagrams/use_client_render_tree.dark.png new file mode 100644 index 000000000..8d3e6a484 Binary files /dev/null and b/public/images/docs/diagrams/use_client_render_tree.dark.png differ diff --git a/public/images/docs/diagrams/use_client_render_tree.png b/public/images/docs/diagrams/use_client_render_tree.png new file mode 100644 index 000000000..ad3840681 Binary files /dev/null and b/public/images/docs/diagrams/use_client_render_tree.png differ diff --git a/public/images/team/dave-mccabe.jpg b/public/images/team/dave-mccabe.jpg deleted file mode 100644 index 505f75617..000000000 Binary files a/public/images/team/dave-mccabe.jpg and /dev/null differ diff --git a/public/images/team/jack-pope.jpg b/public/images/team/jack-pope.jpg new file mode 100644 index 000000000..601e5840e Binary files /dev/null and b/public/images/team/jack-pope.jpg differ diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index 1485cf8ff..cb08b9725 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ diff --git a/public/images/team/lesiutin.jpg b/public/images/team/lesiutin.jpg new file mode 100644 index 000000000..edfc942e0 Binary files /dev/null and b/public/images/team/lesiutin.jpg differ diff --git a/public/images/team/lunaruan.jpg b/public/images/team/lunaruan.jpg deleted file mode 100644 index f6de76d4e..000000000 Binary files a/public/images/team/lunaruan.jpg and /dev/null differ diff --git a/public/images/team/mengdi-chen.jpg b/public/images/team/mengdi-chen.jpg deleted file mode 100644 index 7a47ea4f7..000000000 Binary files a/public/images/team/mengdi-chen.jpg and /dev/null differ diff --git a/public/images/team/noahlemen.jpg b/public/images/team/noahlemen.jpg new file mode 100644 index 000000000..e3f788d89 Binary files /dev/null and b/public/images/team/noahlemen.jpg differ diff --git a/public/images/team/sean-keegan.jpg b/public/images/team/sean-keegan.jpg deleted file mode 100644 index 38873c9d0..000000000 Binary files a/public/images/team/sean-keegan.jpg and /dev/null differ diff --git a/public/images/uwu.png b/public/images/uwu.png new file mode 100644 index 000000000..a09d245ea Binary files /dev/null and b/public/images/uwu.png differ diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png new file mode 100644 index 000000000..d36e7ee9e Binary files /dev/null and b/public/mstile-150x150.png differ diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 000000000..7e4874b2f --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,60 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 000000000..337446d52 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "React", + "short_name": "React", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-384x384.png", + "sizes": "384x384", + "type": "image/png" + } + ], + "theme_color": "#23272f", + "background_color": "#23272f", + "display": "standalone" +} diff --git a/scripts/generateRss.js b/scripts/generateRss.js new file mode 100644 index 000000000..e0f3d5561 --- /dev/null +++ b/scripts/generateRss.js @@ -0,0 +1,6 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ +const {generateRssFeed} = require('../src/utils/rss'); + +generateRssFeed(); diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index 15ab83f2b..23c971756 100644 --- a/src/components/ButtonLink.tsx +++ b/src/components/ButtonLink.tsx @@ -26,7 +26,8 @@ function ButtonLink({ className, 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug', { - 'bg-link text-white hover:bg-opacity-80': type === 'primary', + 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80': + type === 'primary', 'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10': type === 'secondary', 'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg', diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 2fdbb0460..5f2330e7e 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -27,7 +27,7 @@ export const DocsPageFooter = memo( <> {prevRoute?.path || nextRoute?.path ? ( <> -
+
{prevRoute?.path ? ( - - +
+ {type} - {title} - + + {title} + +
); } diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx new file mode 100644 index 000000000..080969efe --- /dev/null +++ b/src/components/ErrorDecoderContext.tsx @@ -0,0 +1,23 @@ +// Error Decoder requires reading pregenerated error message from getStaticProps, +// but MDX component doesn't support props. So we use React Context to populate +// the value without prop-drilling. +// TODO: Replace with React.cache + React.use when migrating to Next.js App Router + +import {createContext, useContext} from 'react'; + +const notInErrorDecoderContext = Symbol('not in error decoder context'); + +export const ErrorDecoderContext = createContext< + | {errorMessage: string | null; errorCode: string | null} + | typeof notInErrorDecoderContext +>(notInErrorDecoderContext); + +export const useErrorDecoderParams = () => { + const params = useContext(ErrorDecoderContext); + + if (params === notInErrorDecoderContext) { + throw new Error('useErrorDecoder must be used in error decoder pages only'); + } + + return params; +}; diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx index a7782b141..7f584fed7 100644 --- a/src/components/Icon/IconCanary.tsx +++ b/src/components/Icon/IconCanary.tsx @@ -4,29 +4,35 @@ import {memo} from 'react'; -export const IconCanary = memo( - function IconCanary({className, title}) { - return ( - - {title && {title}} - - - - - - - ); +export const IconCanary = memo< + JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} +>(function IconCanary( + {className, title, size} = { + className: undefined, + title: undefined, + size: 'md', } -); +) { + return ( + + {title && {title}} + + + + + + + ); +}); diff --git a/src/components/Icon/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx index de2a982bd..49d7fb460 100644 --- a/src/components/Icon/IconGitHub.tsx +++ b/src/components/Icon/IconGitHub.tsx @@ -9,8 +9,8 @@ export const IconGitHub = memo( return ( diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx new file mode 100644 index 000000000..5a007657f --- /dev/null +++ b/src/components/Icon/IconThreads.tsx @@ -0,0 +1,24 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconThreads = memo( + function IconThreads(props) { + return ( + + + + ); + } +); diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx index 951171524..e7b0cf09e 100644 --- a/src/components/Icon/IconTwitter.tsx +++ b/src/components/Icon/IconTwitter.tsx @@ -9,13 +9,13 @@ export const IconTwitter = memo( return ( - + ); } diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 7b656d72e..11bcf6c2d 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -4,7 +4,7 @@ import {useState} from 'react'; import {useRouter} from 'next/router'; -import {ga} from '../../utils/analytics'; +import cn from 'classnames'; export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { const {asPath} = useRouter(); @@ -46,31 +46,41 @@ const thumbsDownIcon = ( ); function sendGAEvent(isPositive: boolean) { + const category = isPositive ? 'like_button' : 'dislike_button'; + const value = isPositive ? 1 : 0; // Fragile. Don't change unless you've tested the network payload // and verified that the right events actually show up in GA. - ga( - 'send', - 'event', - 'button', - 'feedback', - window.location.pathname, - isPositive ? '1' : '0' - ); + // @ts-ignore + gtag('event', 'feedback', { + event_category: category, + event_label: window.location.pathname, + event_value: value, + }); } function SendFeedback({onSubmit}: {onSubmit: () => void}) { const [isSubmitted, setIsSubmitted] = useState(false); return ( +<<<<<<< HEAD

{isSubmitted ? 'Санал өгсөнд баярлалаа!' : 'Энэ хуудас хэрэг болж байна уу?'} +======= +

+

+ {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'} +>>>>>>> 2bfa7a628b0534bb0d437ff7520a72010ab970c3

{!isSubmitted && (
+
{ + // @ts-ignore + window.__setUwu(false); + }}> + no uwu plz +
+
{ + // @ts-ignore + window.__setUwu(true); + }}> + uwu? +
+
+ Logo by + + @sawaratsuki1004 + +
@@ -331,7 +355,7 @@ export function Footer() { Ашиглах нөхцөл -
+
+
+ logo by @sawaratsuki1004 +
-

+

React

@@ -487,7 +499,15 @@ export function HomeContent() {

- +
+ logo by @sawaratsuki1004 +
+
React-ын нэгдэлд
тавтай морилно уу @@ -1497,7 +1517,7 @@ function ConferenceLayout({conf, children}) { navigate(e.target.value); }); }} - className="appearance-none pe-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5" + className="appearance-none pe-8 ps-2 bg-transparent text-primary-dark text-2xl font-bold mb-0.5" style={{ backgroundSize: '4px 4px, 4px 4px', backgroundRepeat: 'no-repeat', @@ -1506,8 +1526,16 @@ function ConferenceLayout({conf, children}) { backgroundImage: 'linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)', }}> - - + +
@@ -1610,7 +1638,7 @@ function Thumbnail({video}) {
- + React Conf
@@ -1652,8 +1680,8 @@ function LikeButton({video}) {
{!isBlogIndex && ( - + {(isHomePage || isBlogIndex) && ( + + + + )} + {/**/} {showSidebar && ( -
-
+
+
{content}
@@ -147,34 +173,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) { isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]' )}> {!isHomePage && ( -
- { -
- } - {showSurvey && ( - <> -
-

- How do you like these docs? -

-
- - Take our survey! - - -
-
-
- - )} +
+
)}
-
+
{showToc && toc.length > 0 && }
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 180ded867..8a71d9e6e 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -77,7 +77,7 @@ export function SidebarLink({ {title}{' '} {canary && ( )} diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 9a0dd23f5..3f058073c 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -7,9 +7,10 @@ import {useRef, useLayoutEffect, Fragment} from 'react'; import cn from 'classnames'; import {useRouter} from 'next/router'; import {SidebarLink} from './SidebarLink'; -import useCollapse from 'react-collapsed'; +import {useCollapse} from 'react-collapsed'; import usePendingRoute from 'hooks/usePendingRoute'; import type {RouteItem} from 'components/Layout/getRouteMeta'; +import {siteConfig} from 'siteConfig'; interface SidebarRouteTreeProps { isForceExpanded: boolean; @@ -150,8 +151,12 @@ export function SidebarRouteTree({ ); } if (hasSectionHeader) { + let sectionHeaderText = + sectionHeader != null + ? sectionHeader.replace('{{version}}', siteConfig.version) + : ''; return ( - + {index !== 0 && (
  • - {sectionHeader} + {sectionHeaderText} ); diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx index 702ff5b5a..171270960 100644 --- a/src/components/Layout/SidebarNav/SidebarNav.tsx +++ b/src/components/Layout/SidebarNav/SidebarNav.tsx @@ -40,12 +40,12 @@ export default function SidebarNav({ }}>