diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index beb24d6c..a6710280 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,12 +1,20 @@ # Contributing to React Flow -Hello there! So glad you want to help out with React Flow 🤗 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 React Flow and Svelte Flow 🤗 You’re the best. Here’s a guide for how you can contribute to the project. + +# The new xyflow organization + +Just recently we renamed our organization and repository of React Flow to "xyflow". Now you can not only find the source code of React Flow but also of Svelte Flow in this repository. We are in a state of transition. This is the current structure: + +* React Flow `reactflow` version v11 is on branch v11 +* Svelte Flow `@xyflow/svelte` can be found under [packages/svelte](./packages/svelte) +* React Flow v12 (not published yet) can be found under [packages/react](./packages/react) # Our Contributing Philosophy -The direction of React Flow and 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 React Flow and Svelte Flow and 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://xyflow.com/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, React Flow is only interesting because of the people who make things with it, share their work, and discuss it. 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. +That being said, our libraries are only interesting because of the people who make things with it, share their work, and discuss it. 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? @@ -16,7 +24,7 @@ The things we need the most help for the library and its community are: **💬 Answering questions** in our [Discord Server](https://discord.gg/Bqt6xrs) and [Github discussions](https://github.com/wbkd/react-flow/discussions). -🎬 **Create tutorials** for React Flow. Send them to us and we’ll happily share them! +🎬 **Create tutorials**. Send them to us and we’ll happily share them! **✏️ Edit our [Docs](https://reactflow.dev/docs/introduction/)**: Make changes in the [react-flow-docs repo](https://github.com/wbkd/react-flow-docs), or click the "edit this page” button that lives on every doc site. @@ -24,7 +32,7 @@ All interactions should be done with care following our [Code of Conduct](https: ## Enhancements -If you have an idea or suggestion for an enhancement to the React Flow library, please use the [New Features](https://github.com/wbkd/react-flow/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/wbkd/react-flow/discussions/categories/new-features), and in the end they are decided by the core team. +If you have an idea or suggestion for an enhancement to the React Flow or Svelte Flow library, please use the [New Features](https://github.com/wbkd/react-flow/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/ Svelte Flow and which new features are added are discussed in our Discord Server and in [this Github discussions section](https://github.com/wbkd/react-flow/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. diff --git a/README.md b/README.md index bd25d0f9..722fa001 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,50 @@ -![readme-header-dark](https://user-images.githubusercontent.com/3797215/156384064-08a889d6-73c0-4cbf-8ff3-28dc601d1f5f.svg#gh-dark-mode-only) -![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only) +![xyflow-header](https://user-images.githubusercontent.com/2857535/279643999-ffda9f91-6b6d-447d-82be-fcbd6103edb6.svg#gh-light-mode-only) +![xyflow-header-dark](https://user-images.githubusercontent.com/2857535/279644026-a01c231c-6c6e-4b41-96e0-a85c75c9acee.svg#gh-dark-mode-only)
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072) -![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads) -![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072) -![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072) +![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=React%20Flow%20downloads) +![npm downloads](https://img.shields.io/npm/dt/@xyflow/svelte?color=%23FF3E00&label=Svelte%20Flow%20downloads) -A highly customizable React component for building interactive graphs and node-based editors. - -[🚀 Getting Started](https://reactflow.dev/docs/quickstart/) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev) +Powerful open source libraries for building node-based UIs with React or Svelte. Ready out-of-the-box and infinitely customizable. +[React Flow](https://reactflow.dev/) · [Svelte Flow](https://svelteflow.dev/) · [React Flow Pro](https://reactflow.dev/pro) · [Discord](https://discord.gg/Bqt6xrs)
--- -## Key Features +## The xyflow mono repo -- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box -- **Customizable:** Different [node](https://reactflow.dev/docs/api/nodes/node-types) and [edge types](https://reactflow.dev/docs/api/edges/edge-types) and support for custom nodes with multiple handles and custom edges -- **Fast rendering:** Only nodes that have changed are re-rendered and only those in the viewport are displayed -- **Hooks and Utils:** [Hooks](https://reactflow.dev/docs/api/hooks/use-react-flow) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/docs/api/graph-util-functions) -- **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) -- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) +The xyflow repository is the home of four packages: +* React Flow v11 `reactflow` [v11 branch](https://github.com/xyflow/xyflow/tree/v11) +* React Flow v12 (not published yet) [packages/react](./packages/react) +* Svelte Flow `@xyflow/svelte` [packages/svelte](./packages/svelte) +* Shared helper library `@xyflow/system` [packages/system](./packages/system) + +**We just moved repositories** from the @wbkd org to this one. React Flow v11 will remain on the [v11 branch](https://github.com/xyflow/xyflow/tree/v11). When we have a stable v12, the package name of React Flow will change from `reactflow` to `@xyflow/react`. ## Commercial Usage -**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 +**Are you using React Flow or Svelte Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 -**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd). +**Are you using React Flow or Svelte Flow at your organization and making money from it?** Awesome! We rely on your support to keep our libraries developed and maintained under an MIT License, just how we like it. For React Flow you can do that on the [React Flow Pro website](https://reactflow.dev/pro) and for both of our libraries you can do it through [Github Sponsors](https://github.com/sponsors/xyflow). -You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). +## Getting Started -## Installation +The best way to get started is to check out the [React Flow](https://reactflow.dev/learn) or [Svelte Flow](https://svelteflow.dev/learn) learn section. However if you want to get a sneak peek of how to install the and use the libraries you can see it here: -The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm: +
+ React Flow basic usage -```bash + ### Installation + + ```sh npm install reactflow -``` + ``` -## Quickstart - -This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and the full [API reference](https://reactflow.dev/docs/api/react-flow-props). - -```jsx + ### Basic usage + ```jsx import { useCallback } from 'react'; import ReactFlow, { MiniMap, @@ -54,7 +53,7 @@ import ReactFlow, { useNodesState, useEdgesState, addEdge, -} from '@xyflow/react'; +} from 'reactflow'; import 'reactflow/dist/style.css'; @@ -88,44 +87,81 @@ function Flow() { export default Flow; ``` +
-## Development +
+ Svelte Flow basic usage -Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`. + ### Installation + + ```sh +npm install @xyflow/svelte + ``` -Run `pnpm build` once and then you can use `pnpm dev` for local development. + ### Basic usage + ```svelte + -```sh -pnpm test + console.log('on node click', event)} +> + + + + ``` +
-## Maintainers +## The xyflow team -React Flow is the full-time project of Moritz and Christopher of [webkid](https://webkid.io/), based in Berlin. If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://pro.reactflow.dev/contact) or by joining the [React Flow Discord Server](https://discord.gg/Bqt6xrs). +React Flow and Svelte Flow are maintained by the team behind [xyflow](https://xyflow.com). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs). -- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) -- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) +- Christopher • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) +- Hayleigh • [Twitter](https://twitter.com/hayleighdotdev) • [Github](https://github.com/hayleigh-dot-dev) +- John • [Website](https://johnrobbdesign.com/) • [Mastodon](https://mastodon.social/@johnrobbjr) +- Moritz • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) +- Peter • [Github](https://github.com/peterkogo) -Any support you provide goes directly towards the development and maintenance of React Flow, allowing us to continue to operate as an independent company, working on what we think is best for React Flow as an open-source library. - -## Community Packages - -- [useUndoable](https://github.com/xplato/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example -- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes -- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow - -## Credits - -React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in the browser. Under the hood, React Flow depends on these great libraries: - -- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas -- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable -- [zustand](https://github.com/pmndrs/zustand) - internal state management ## License -React Flow is [MIT licensed](https://github.com/wbkd/react-flow/blob/main/LICENSE). +React Flow and Svelte Flow are [MIT licensed](./LICENSE). diff --git a/examples/astro-xyflow/.gitignore b/examples/astro-xyflow/.gitignore new file mode 100644 index 00000000..6240da8b --- /dev/null +++ b/examples/astro-xyflow/.gitignore @@ -0,0 +1,21 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/astro-xyflow/README.md b/examples/astro-xyflow/README.md new file mode 100644 index 00000000..5cab0871 --- /dev/null +++ b/examples/astro-xyflow/README.md @@ -0,0 +1,10 @@ +# Astro examples + +Tiny app for testing React Flow and Svelte Flow with Astro. + +## Start local dev server + +```sh +pnpm dev +``` + diff --git a/examples/astro-xyflow/astro.config.mjs b/examples/astro-xyflow/astro.config.mjs new file mode 100644 index 00000000..ffcf8fb7 --- /dev/null +++ b/examples/astro-xyflow/astro.config.mjs @@ -0,0 +1,8 @@ +import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; +import svelte from '@astrojs/svelte'; + +// https://astro.build/config +export default defineConfig({ + integrations: [react(), svelte()], +}); diff --git a/examples/astro-xyflow/package.json b/examples/astro-xyflow/package.json new file mode 100644 index 00000000..c5e498db --- /dev/null +++ b/examples/astro-xyflow/package.json @@ -0,0 +1,25 @@ +{ + "name": "astro", + "type": "module", + "private": true, + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/react": "^3.0.2", + "@astrojs/svelte": "^4.0.2", + "@types/react": "^18.2.24", + "@types/react-dom": "^18.2.8", + "@xyflow/react": "workspace:^", + "@xyflow/svelte": "workspace:^", + "astro": "^3.2.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "svelte": "^4.2.1" + } +} diff --git a/examples/astro-xyflow/public/.gitkeep b/examples/astro-xyflow/public/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx new file mode 100644 index 00000000..dc371239 --- /dev/null +++ b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx @@ -0,0 +1,32 @@ +import { memo, type FC, type CSSProperties } from 'react'; +import { Handle, Position, type NodeProps } from '@xyflow/react'; + +const sourceHandleStyleA: CSSProperties = { left: 50 }; +const sourceHandleStyleB: CSSProperties = { + right: 50, + left: 'auto', +}; + +const CustomNode: FC = ({ data, xPos, yPos }) => { + return ( + <> + +
+
+ Label: {data.label} +
+
+ Position:{' '} + + {xPos.toFixed(2)},{yPos.toFixed(2)} + +
+
+ + + + + ); +}; + +export default memo(CustomNode); diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx new file mode 100644 index 00000000..ae5a5c87 --- /dev/null +++ b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx @@ -0,0 +1,130 @@ +import { useCallback } from 'react'; +import { + ReactFlow, + addEdge, + useEdgesState, + useNodesState, + Background, + Controls, + type Connection, + type Edge, + type Node, + Position, +} from '@xyflow/react'; + +import CustomNode from './CustomNode'; + +import '@xyflow/react/dist/style.css'; + +const nodeSize = { + width: 100, + height: 40, +}; + +const initialNodes: Node[] = [ + { + id: '1', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + size: nodeSize, + handles: [ + { + type: 'source', + position: Position.Bottom, + x: nodeSize.width * 0.5, + y: nodeSize.height, + }, + ], + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + size: nodeSize, + handles: [ + { + type: 'source', + position: Position.Bottom, + x: nodeSize.width * 0.5, + y: nodeSize.height, + width: 1, + height: 1, + }, + { + type: 'target', + position: Position.Top, + x: nodeSize.width * 0.5, + y: 0, + width: 1, + height: 1, + }, + ], + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + size: nodeSize, + handles: [ + { + type: 'source', + position: Position.Bottom, + x: nodeSize.width * 0.5, + y: nodeSize.height, + width: 1, + height: 1, + }, + { + type: 'target', + position: Position.Top, + x: nodeSize.width * 0.5, + y: 0, + width: 1, + height: 1, + }, + ], + }, + { + id: '4', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + type: 'custom', + }, +]; + +const initialEdges: Edge[] = [ + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3', animated: true }, +]; + +const nodeTypes = { + custom: CustomNode, +}; + +function Flow() { + const [nodes, , onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]); + + return ( +
+ + + + +
+ ); +} + +export default Flow; diff --git a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte new file mode 100644 index 00000000..cfa8a449 --- /dev/null +++ b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte @@ -0,0 +1,86 @@ + + +
+ + + + +
diff --git a/examples/astro-xyflow/src/env.d.ts b/examples/astro-xyflow/src/env.d.ts new file mode 100644 index 00000000..f964fe0c --- /dev/null +++ b/examples/astro-xyflow/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/astro-xyflow/src/pages/index.astro b/examples/astro-xyflow/src/pages/index.astro new file mode 100644 index 00000000..be9d1885 --- /dev/null +++ b/examples/astro-xyflow/src/pages/index.astro @@ -0,0 +1,27 @@ +--- +import ReactFlowApp from '../components/ReactFlowExample' +import SvelteFlowApp from '../components/SvelteFlowExample/index.svelte' +--- + + + + + + + Astro example for React Flow and Svelte Flow + + + + +

Svelte Flow

+ + +

React Flow

+ + + diff --git a/examples/astro-xyflow/tsconfig.json b/examples/astro-xyflow/tsconfig.json new file mode 100644 index 00000000..b7243b92 --- /dev/null +++ b/examples/astro-xyflow/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "react" + } +} diff --git a/examples/react/src/examples/DragNDrop/index.tsx b/examples/react/src/examples/DragNDrop/index.tsx index a3e09d8d..83e39d88 100644 --- a/examples/react/src/examples/DragNDrop/index.tsx +++ b/examples/react/src/examples/DragNDrop/index.tsx @@ -66,7 +66,7 @@ const DnDFlow = () => { return (
- +
{ onInit={onInit} onDrop={onDrop} onDragOver={onDragOver} - nodeOrigin={nodeOrigin} > diff --git a/examples/react/src/examples/Stress/utils.ts b/examples/react/src/examples/Stress/utils.ts index 766b4bb7..6278e006 100644 --- a/examples/react/src/examples/Stress/utils.ts +++ b/examples/react/src/examples/Stress/utils.ts @@ -17,9 +17,11 @@ export function getNodesAndEdges(xElements = 10, yElements = 10): ElementsCollec const data = { label: `Node ${nodeId}` }; const node = { id: nodeId.toString(), - style: { width: 50, fontSize: 11 }, + style: { width: 50, height: 30, fontSize: 11 }, data, position, + width: 50, + height: 30, }; initialNodes.push(node); diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx index 617b68ea..e2e9af89 100644 --- a/examples/react/src/examples/Subflow/index.tsx +++ b/examples/react/src/examples/Subflow/index.tsx @@ -204,9 +204,6 @@ const Subflow = () => { onNodeDrag={onNodeDrag} onNodeDragStop={onNodeDragStop} className="react-flow-basic-example" - defaultViewport={defaultViewport} - minZoom={0.2} - maxZoom={4} onlyRenderVisibleElements={false} nodeTypes={nodeTypes} fitView diff --git a/examples/svelte/src/routes/examples/customnode/+page.svelte b/examples/svelte/src/routes/examples/customnode/+page.svelte index e2654938..14130a47 100644 --- a/examples/svelte/src/routes/examples/customnode/+page.svelte +++ b/examples/svelte/src/routes/examples/customnode/+page.svelte @@ -23,28 +23,6 @@ const bgColor = writable('#1A192B'); - const onChange: ChangeEventHandler = (event) => { - nodes.update((nds) => - nds.map((node) => { - if (node.type !== 'colorNode') { - return node; - } - - const color = (event.target as HTMLInputElement)?.value; - - bgColor.set(color); - - return { - ...node, - data: { - ...node.data, - color - } - }; - }) - ); - }; - const nodes = writable([ { id: '1', @@ -56,17 +34,9 @@ { id: '2', type: 'colorNode', - data: { onChange: onChange, color: $bgColor }, - style: 'border: 1px solid #777; padding: 10px', + data: { colorStore: bgColor }, position: { x: 250, y: 50 } }, - { - id: '2a', - type: 'colorNode', - data: { onChange: onChange, color: $bgColor }, - style: 'border: 1px solid #777; padding: 10px', - position: { x: 250, y: 520 } - }, { id: '3', type: 'output', @@ -115,7 +85,7 @@ {nodes} {edges} {nodeTypes} - style="--bgcolor: {$bgColor}" + style="--background-color: {$bgColor}" fitView on:connect={onConnect} > @@ -123,9 +93,3 @@ - - diff --git a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte index 7a40a742..25d37d32 100644 --- a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte +++ b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte @@ -1,21 +1,40 @@ - -
- Custom Color Picker Node: {data.color} +
+ +
+ Custom Color Picker Node: {$colorStore} +
+ colorStore.set(evt.currentTarget.value)} + value={$colorStore} + /> + +
- - - + + diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte index 5b81fa4f..a195cf1c 100644 --- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte +++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte @@ -1,5 +1,5 @@