Staging

.gitignore

@@ -13,6 +13,7 @@ coverage
 out/
 build
 sitemap.xml
+next-env.d.ts
 
 # misc
 .DS_Store

.prettierrc

@@ -3,5 +3,6 @@
   "useTabs": false,
   "singleQuote": true,
   "printWidth": 90,
-  "proseWrap": "always"
+  "proseWrap": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

CODE_OF_CONDUCT.md

@@ -1,11 +1,11 @@
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and
-expression, level of experience, education, socio-economic status, nationality,
-personal appearance, race, religion, or sexual orientation.
+In the interest of fostering an open and welcoming environment, we as contributors and
+maintainers pledge to making participation in our project and our community a
+harassment-free experience for everyone, regardless of age, body size, disability,
+ethnicity, sex characteristics, gender identity and expression, level of experience,
+education, socio-economic status, nationality, personal appearance, race, religion, or
+sexual orientation.
 
 ## Our Standards
 
@@ -19,41 +19,41 @@ Examples of behavior that contributes to creating a positive environment include
 
 Examples of unacceptable behavior by participants include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
 - Trolling, insulting/derogatory comments, and personal or political attacks
 - Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
+- Publishing others' private information, such as a physical or electronic address,
+  without explicit permission
 
 ## Our Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective and/or
-restorative action in response to any instances of unacceptable behavior.
+Project maintainers are responsible for clarifying the standards of acceptable behavior
+and are expected to take appropriate and fair corrective and/or restorative action in
+response to any instances of unacceptable behavior.
 
-Project maintainers have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, or to ban temporarily or permanently any
-contributor for other behaviors that they deem inappropriate, threatening,
-offensive, or harmful.
+Project maintainers have the right and responsibility to remove, edit, or reject comments,
+commits, code, wiki edits, issues, and other contributions that are not aligned to this
+Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors
+that they deem inappropriate, threatening, offensive, or harmful.
 
-Where it is appropriate and parties consent, project maintainers will endeavour
-to facilitate restorative justice over punitive action.
+Where it is appropriate and parties consent, project maintainers will endeavour to
+facilitate restorative justice over punitive action.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies both within project spaces and in public spaces when an
+individual is representing the project or its community. Examples of representing a
+project or community include using an official project e-mail address, posting via an
+official social media account, or acting as an appointed representative at an online or
+offline event. Representation of a project may be further defined and clarified by project
+maintainers.
 
-Additionally, we ask that all community members uphold the standards laid out in
-this Code of Conduct to create a safe and welcome space for all.
+Additionally, we ask that all community members uphold the standards laid out in this Code
+of Conduct to create a safe and welcome space for all.
 
 ## Attribution
 
-This Code of Conduct is a direct descendant of the [Gleam Code of Conduct](https://github.com/gleam-lang/gleam/blob/f793b5d28a3102276a8b861c7e16a19c5231426e/CODE_OF_CONDUCT.md),
-which is itself a descendant of the [Contributor Covenant (v1.4)](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html).
+This Code of Conduct is a direct descendant of the
+[Gleam Code of Conduct](https://github.com/gleam-lang/gleam/blob/f793b5d28a3102276a8b861c7e16a19c5231426e/CODE_OF_CONDUCT.md),
+which is itself a descendant of the
+[Contributor Covenant (v1.4)](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html).

CONTRIBUTING.md

@@ -1,59 +1,57 @@
 # Contributing to React Flow
 
-Hello there! So glad you want to help out with our documentation 🤗 You’re the
-best. Here’s a guide for how you can contribute to the project.
+Hello there! So glad you want to help out with our documentation 🤗 You’re the best.
+Here’s a guide for how you can contribute to the project.
 
 # Our Contributing Philosophy
 
-The direction of each of our libraries, which new features are added, and which
-are left out, is decided by the core team (sometimes referred to as a “cathedral”
-style of development). The core team is paid to do this work
-([see how here](https://reactflow.dev/blog/asking-for-money-for-open-source/)).
-With this model we ensure that the people doing the most work on the library are
-paid for their time and effort, and that we prevent the library from bloating.
+The direction of each of our libraries, which new features are added, and which are left
+out, is decided by the core team (sometimes referred to as a “cathedral” style of
+development). The core team is paid to do this work
+([see how here](https://reactflow.dev/blog/asking-for-money-for-open-source/)). With this
+model we ensure that the people doing the most work on the library are paid for their time
+and effort, and that we prevent the library from bloating.
 
 That being said, our libraries are only interesting **because of the people who make
-things with them** Some of the most important and undervalued work in open source
-is from non-code contributions, and that is where we can use the most help from you.
+things with them** Some of the most important and undervalued work in open source is from
+non-code contributions, and that is where we can use the most help from you.
 
 # How can I help?
 
 The things we need the most help for the library and its community are:
 
 **🐛 Bug reports:** We simply can’t catch them all. Check
-[existing issues](https://github.com/xyflow/xyflow/issues/) and
-discussions first, then [create a new issue](https://github.com/xyflow/xyflow/issues/new/choose)
-to tell us what’s up.
+[existing issues](https://github.com/xyflow/xyflow/issues/) and discussions first, then
+[create a new issue](https://github.com/xyflow/xyflow/issues/new/choose) to tell us what’s
+up.
 
 **💬 Answering questions** in our [Discord Server](https://discord.gg/Bqt6xrs) and
-[Github discussions](https://github.com/xyflow/xyflow/discussions). This is
-surprisingly high-impact for us! Folks always have questions and we can't always
-get round to them all.
+[Github discussions](https://github.com/xyflow/xyflow/discussions). This is surprisingly
+high-impact for us! Folks always have questions and we can't always get round to them all.
 
 🎬 **Create tutorials** for React Flow. Send them to us and we’ll happily share them!
 
-**✏️ Edit our docs**: This repo contains the docs sites for both React Flow and
-Svelte Flow. If you notice a typo or think something can be clearer, you can let
-us know by opening an issue or PR here.
+**✏️ Edit our docs**: This repo contains the docs sites for both React Flow and Svelte
+Flow. If you notice a typo or think something can be clearer, you can let us know by
+opening an issue or PR here.
 
 All interactions should be done with care following our
 [Code of Conduct](https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md).
 
 ## Enhancements
 
-If you have an idea or suggestion for an enhancement to the React Flow library,
-please use the [New Features](https://github.com/xyflow/xyflow/discussions/categories/new-features)
-discussion section. If you want to build it yourself, **please reach out to us
-before you dive into a new pull request.** The direction of React Flow and which
-new features are added are discussed in our Discord Server and in
+If you have an idea or suggestion for an enhancement to the React Flow library, please use
+the [New Features](https://github.com/xyflow/xyflow/discussions/categories/new-features)
+discussion section. If you want to build it yourself, **please reach out to us before you
+dive into a new pull request.** The direction of React Flow and which new features are
+added are discussed in our Discord Server and in
 [this Github discussions section](https://github.com/xyflow/xyflow/discussions/categories/new-features),
 and in the end they are decided by the core team.
 
-Talking to us first about the enhancement you want to build will be the most likely
-way to get your pull request into the library (see Our Contributing Philosophy
-above). We would hate to see you write code you’re proud of, just to learn that
-we’ve already been working on the same thing, or that we feel doesn’t fit into
-the core library.
+Talking to us first about the enhancement you want to build will be the most likely way to
+get your pull request into the library (see Our Contributing Philosophy above). We would
+hate to see you write code you’re proud of, just to learn that we’ve already been working
+on the same thing, or that we feel doesn’t fit into the core library.
 
 ### Contact us
 
@@ -70,5 +68,6 @@ Please use a meaningful commit message and add a little description of your chan
 
 1. Install dependencies `pnpm install`
 2. Start dev server `pnpm dev`
-3. Test your changes with the existing examples or add a new one if it's needed for your changes
+3. Test your changes with the existing examples or add a new one if it's needed for your
+   changes
 4. Run tests `pnpm test` and add new new tests if you are introducing a new feature

README.md

@@ -5,60 +5,56 @@
 This monorepo contains our team website and the docs for our libraries.
 
 - [xyflow.com](https://xyflow.com) - our team website and blog
-- [reactflow.dev](https://reactflow.dev) - the website and documentation for the React Flow library
-- [svelteflow.dev](https://svelteflow.dev) - the website and documentation for the Svelte Flow library
+- [reactflow.dev](https://reactflow.dev) - the website and documentation for the React
+  Flow library
+- [svelteflow.dev](https://svelteflow.dev) - the website and documentation for the Svelte
+  Flow library
 
 ## What's inside?
 
-We're using [Turborepo](https://turbo.build/repo) to manage this monorepo because
-there's a lot going on.
+We're using [Turborepo](https://turbo.build/repo) to manage this monorepo because there's
+a lot going on.
 
 ### apps/
 
-The apps directory contains projects that run on the backend or applications we
-might want to run during development:
+The apps directory contains projects that run on the backend or applications we might want
+to run during development:
 
-- `apps/example-apps` contains all of our examples and tutorials for ReactFlow and SvelteFlow.
-- `apps/ui-components` houses all of the components for [React Flow Components](https://reactflow.dev/components).
+- `apps/example-apps` contains all of our examples and tutorials for ReactFlow and
+  SvelteFlow.
+- `apps/ui-components` houses all of the components for
+  [React Flow Components](https://reactflow.dev/components).
 
 ### packages/
 
-The packages in this monorepo are reusable self-contained bits that we want to
-share across our apps and websites. Much of it is configuration for the different
-tools we use:
+The packages in this monorepo are reusable self-contained bits that we want to share
+across our apps and websites. Much of it is configuration for the different tools we use:
 
 - `packages/eslint-config-xyflow`
-- `packages/xy-tailwind-config`
 - `packages/xy-tsconfig`
-- `packages/xy-ui` is a React component library that contains any components that
-  we want to share across our websites. The package encompasses everything from
-  page layouts, UI building blocks, and complex widgets. We often use
-  [Shadcn](https://ui.shadcn.com) when looking to add new components, and we style
-  everything with [Tailwind](https://tailwindcss.com).
 
 ### sites/
 
-Each directory in the sites folder is a separate website that we deploy. The name
-of the directory always corresponds to the domain name of the website:
+Each directory in the sites folder is a separate website that we deploy. The name of the
+directory always corresponds to the domain name of the website:
 
-- `sites/reactflow.dev` is the documentation site for React Flow. It, and the
-  rest of sites, are built with [Nextra](https://nextra.site/) and
-  [Next.js](https://nextjs.org/).
+- `sites/reactflow.dev` is the documentation site for React Flow. It, and the rest of
+  sites, are built with [Nextra](https://nextra.site/) and [Next.js](https://nextjs.org/).
 - `sites/svelteflow.dev` is the documentation for our newest library, Svelte Flow.
-- `sites/xyflow.com` is the new home page for our organization. It contains our
-  blog and some information on how we approach open source development.
+- `sites/xyflow.com` is the new home page for our organization. It contains our blog and
+  some information on how we approach open source development.
 
 ## Getting started
 
-To run any of the websites locally, you'll first need to install the dependencies
-and packages. We recommend using [pnpm](https://pnpm.io/) to manage your dependencies.
+To run any of the websites locally, you'll first need to install the dependencies and
+packages. We recommend using [pnpm](https://pnpm.io/) to manage your dependencies.
 
 ```sh
 pnpm install
 ```
 
-If you take a peek in `package.json` you'll see we have a few different scripts
-to run our apps. If you just want to run everything at once, you can just do:
+If you take a peek in `package.json` you'll see we have a few different scripts to run our
+apps. If you just want to run everything at once, you can just do:
 
 ```sh
 pnpm run dev
@@ -79,39 +75,41 @@ For everything else, there is an individual script to run each app independently
 
 ### Displaying Showcase Projects
 
-We have a database of projects that use our libraries stored in notion. Both the
-React Flow and Svelte Flow sites are fetching this data at build time using `getStaticProps`. You need to have a `.env.local` file with a `NOTION_API_SECRET` to make this work locally. Otherwise, placeholder showcases are shown.
+We have a database of projects that use our libraries stored in notion. Both the React
+Flow and Svelte Flow sites are fetching this data at build time using `getStaticProps`.
+You need to have a `.env.local` file with a `NOTION_API_SECRET` to make this work locally.
+Otherwise, placeholder showcases are shown.
 
 ### Update React Flow and Svelte Flow dependencies
 
-There is a Github action that checks the latest React Flow and Svelte Flow versions
-daily and creates a PR if there is a new version.
+There is a Github action that checks the latest React Flow and Svelte Flow versions daily
+and creates a PR if there is a new version.
 
 ---
 
 ## Support our work with React Flow Pro
 
-React Flow and Svelte Flow are open-source MIT-licensed libraries, and it will
-be forever. Our libraries enable thousands of solo developers and organizations
-like Stripe and Linkedin to build their node-based apps. With so many active
-users, it takes time and effort to maintain the library, docs, and community.
-We can’t do that without your support.
+React Flow and Svelte Flow are open-source MIT-licensed libraries, and it will be forever.
+Our libraries enable thousands of solo developers and organizations like Stripe and
+Linkedin to build their node-based apps. With so many active users, it takes time and
+effort to maintain the library, docs, and community. We can’t do that without your
+support.
 
 [<img src="./assets/readme-pro.png">](https://reactflow.dev/pro)
 
-Why Subscribe? With your subscription, you are ensuring the sustainable
-maintenance and development of both React Flow and Svelte Flow. This is how we
-make sure these libraries stay MIT-licensed. In return, you get high-quality,
-maintained, updated libraries, along with benefits like direct support,
-prioritized feature requests, and access to our Pro Examples.
+Why Subscribe? With your subscription, you are ensuring the sustainable maintenance and
+development of both React Flow and Svelte Flow. This is how we make sure these libraries
+stay MIT-licensed. In return, you get high-quality, maintained, updated libraries, along
+with benefits like direct support, prioritized feature requests, and access to our Pro
+Examples.
 
 ---
 
 ## Contact us
 
-We're happy to try and answer any questions you have about our libraries. We're
-also always excited when folks want to share their projects with us. There are
-a few ways you can get in touch:
+We're happy to try and answer any questions you have about our libraries. We're also
+always excited when folks want to share their projects with us. There are a few ways you
+can get in touch:
 
 - Use the contact form on our [website](https://xyflow.com/contact).
 - Drop us an email at [info@xyflow.com](mailto:info@xyflow.com)

apps/example-apps/.env

@@ -0,0 +1 @@
+ENABLE_EXPERIMENTAL_COREPACK=1

apps/example-apps/README.md

@@ -4,26 +4,25 @@
 
 ### `pnpm dev`
 
-Starts the vite dev server, with hot reloading. We have a custom plugin configured
-to re-generate the `source.json` file whenever an example is updated, but this
-will *not* hot-reload any external apps that are consuming it.
+Starts the vite dev server, with hot reloading. We have a custom plugin configured to
+re-generate the `source.json` file whenever an example is updated, but this will _not_
+hot-reload any external apps that are consuming it.
 
-Also note that changing an example without triggering a hot-reload (eg you have
-navigated to example `A` and then changed some files in example `B`) this wil
-*not* trigger a re-generate of the `source.json` file.
+Also note that changing an example without triggering a hot-reload (eg you have navigated
+to example `A` and then changed some files in example `B`) this wil _not_ trigger a
+re-generate of the `source.json` file.
 
 ### `pnpm scaffold`
 
-You can run this script to generate a new React or Svelte example under a given
-path. It will scaffold out all the files necessary for a new example, including
-the entry `index.html` and a minimal React or Svelte component.
+You can run this script to generate a new React or Svelte example under a given path. It
+will scaffold out all the files necessary for a new example, including the entry
+`index.html` and a minimal React or Svelte component.
 
 ### `pnpm build`
 
-Runs the `vite build` command. The same plugin that we use to generate the
-`source.json` files during dev will be used here at the beginning of the build.
+Runs the `vite build` command. The same plugin that we use to generate the `source.json`
+files during dev will be used here at the beginning of the build.
 
 ### `pnpm screenshots`
 
-This command updates all preview screenshots for everything under /react and 
-/svelte.
+This command updates all preview screenshots for everything under /react and /svelte.