refactor(svelte): cleanup components

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import type { PanelPosition } from '@reactflow/system';
-
-  import Panel from '$lib/container/Panel/index.svelte';
+  import Panel from '$lib/container/Panel/Panel.svelte';
   import { useStore } from '$lib/store';
   import ControlButton from './ControlButton.svelte';
   import PlusIcon from './Icons/Plus.svelte';
@@ -10,10 +8,14 @@
   import LockIcon from './Icons/Lock.svelte';
   import UnlockIcon from './Icons/Unlock.svelte';
 
-  export let position: PanelPosition = 'bottom-left';
-  export let showZoom = true;
-  export let showFitView = true;
-  export let showInteractive = true;
+  import type { ControlsProps } from './types';
+
+  type $$Props = ControlsProps;
+
+  export let position: $$Props['position'] = 'bottom-left';
+  export let showZoom: $$Props['showZoom'] = true;
+  export let showFitView: $$Props['showFitView'] = true;
+  export let showInteractive: $$Props['showInteractive'] = true;
 
   const { zoomIn, zoomOut, fitView } = useStore();
 

packages/svelte/src/lib/plugins/Controls/index.ts

@@ -1,2 +1,3 @@
 export { default as Controls } from './Controls.svelte';
 export { default as ControlButton } from './ControlButton.svelte';
+export { type ControlsProps } from './types';

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -0,0 +1,8 @@
+import type { PanelPosition } from '@reactflow/system';
+
+export type ControlsProps = {
+  position: PanelPosition;
+  showZoom: boolean;
+  showFitView: boolean;
+  showInteractive: boolean;
+};