export htmlattributes as props where possible

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -218,7 +218,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   bind:this={container}
-  class="svelte-flow__pane"
+  class="svelte-flow__pane svelte-flow__container"
   class:draggable={panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0))}
   class:dragging={store.dragging}
   class:selection={isSelecting}
@@ -230,13 +230,3 @@
 >
   {@render children()}
 </div>
-
-<style>
-  .svelte-flow__pane {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-</style>

packages/svelte/src/lib/container/Pane/index.ts

@@ -1 +1,2 @@
 export { default as Pane } from './Pane.svelte';
+export * from './types';

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

@@ -2,13 +2,7 @@
   import type { PanelProps } from './types';
   import { useStore } from '$lib/store';
 
-  let {
-    position = 'top-right',
-    style,
-    class: className,
-    children,
-    ...restProps
-  }: PanelProps = $props();
+  let { position = 'top-right', style, class: className, children, ...rest }: PanelProps = $props();
 
   const store = useStore();
 
@@ -19,7 +13,7 @@
   class={['svelte-flow__panel', className, ...positionClasses]}
   {style}
   style:pointer-events={store.selectionRectMode ? 'none' : ''}
-  {...restProps}
+  {...rest}
 >
   {@render children?.()}
 </div>

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

@@ -1,2 +1,2 @@
 export { default as Panel } from './Panel.svelte';
-export type { PanelProps } from './types';
+export * from './types';

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -6,19 +6,9 @@
 </script>
 
 <div
-  class="svelte-flow__viewport xyflow__viewport"
+  class="svelte-flow__viewport xyflow__viewport svelte-flow__container"
   style="transform: translate({store.viewport.x}px, {store.viewport.y}px) scale({store.viewport
     .zoom})"
 >
   {@render children()}
 </div>
-
-<style>
-  .svelte-flow__viewport {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-</style>

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -37,7 +37,7 @@
 </script>
 
 <div
-  class="svelte-flow__zoom"
+  class="svelte-flow__zoom svelte-flow__container"
   use:zoom={{
     viewport: store.viewport,
     minZoom: store.minZoom,
@@ -74,14 +74,3 @@
 >
   {@render children()}
 </div>
-
-<style>
-  .svelte-flow__zoom {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 4;
-  }
-</style>