feat(svelte): add attribution

packages/svelte/src/example-components/Header/Header.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <header>
-  <div class="logo">SvelteFlow</div>
+  <div class="logo">Svelte Flow</div>
   <select on:change={onChange}>
     {#each routes as route}
       <option value={route}>{route}</option>

packages/svelte/src/lib/components/Attribution/Attribution.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Panel } from '$lib/container/Panel';
+  import type { AttributionProps } from './types';
+
+  type $$Props = AttributionProps;
+
+  export let proOptions: AttributionProps['proOptions'] = undefined;
+  export let position: AttributionProps['position'] = 'bottom-right';
+</script>
+
+
+{#if !proOptions?.hideAttribution}
+  <Panel
+    position={position}
+    class="svelte-flow__attribution"
+    data-message="Please only hide this attribution when you are subscribed to Svelte Flow Pro: https://pro.reactflow.dev"
+  >
+    <a href="https://reactflow.dev/svelte" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">
+      Svelte Flow
+    </a>
+  </Panel>
+{/if}
+
+<style>
+  :global(.svelte-flow__panel.svelte-flow__attribution) {
+    font-size: 10px;
+    background: rgba(255, 255, 255, 0.5);
+    padding: 2px 3px;
+    margin: 0;
+  }
+
+  :global(.svelte-flow__attribution) a {
+    text-decoration: none;
+    color: #999;
+  }
+</style>

packages/svelte/src/lib/components/Attribution/index.ts

@@ -0,0 +1 @@
+export { default as Attribution } from './Attribution.svelte';

packages/svelte/src/lib/components/Attribution/types.ts

@@ -0,0 +1,6 @@
+import type { PanelPosition, ProOptions } from '@reactflow/system';
+
+export type AttributionProps = {
+  proOptions?: ProOptions;
+  position?: PanelPosition;
+};

packages/svelte/src/lib/container/Panel/types.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   'data-testid'?: string;
+  'data-message'?: string;
   position?: PanelPosition;
   style?: string;
   class?: string;

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -11,6 +11,7 @@
   import { NodeSelection } from '$lib/components/NodeSelection';
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
+  import { Attribution } from '$lib/components/Attribution';
   import { useStore } from '$lib/store';
   import type { SvelteFlowProps } from './types';
 
@@ -122,6 +123,7 @@
       <UserSelection />
     </Pane>
   </Zoom>
+  <Attribution />
   <slot />
 </div>
 

packages/svelte/src/routes/validation/+page.svelte

@@ -11,7 +11,7 @@
   import { Position } from '@reactflow/system';
 
   const nodes = createNodes([
-    { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connecatbale with B' } },
+    { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connectable with B' } },
     { id: 'A', type: 'default', position: { x: 250, y: 0 }, data: { label: 'A' } },
     { id: 'B', type: 'default', position: { x: 250, y: 150 }, data: { label: 'B' } },
     { id: 'C', type: 'default', position: { x: 250, y: 300 }, data: { label: 'C' } }