fix astro example, fix svelte SSR, fix portals

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { portal } from '$lib/actions/portal';
+  import { hideDuringSSR, portal } from '$lib/actions/portal';
 
   import { useStore } from '$lib/store';
   import type { EdgeLabelProps } from './types';
@@ -29,6 +29,7 @@
 
 <div
   use:portal={'edge-labels'}
+  style:display={hideDuringSSR().display}
   class={['svelte-flow__edge-label', { transparent }, className]}
   style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
   style:transform="translate(-50%, -50%) translate({x}px,{y}px)"

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -89,7 +89,7 @@
     }
   }
 
-  onkeydown = (event: KeyboardEvent) => {
+  function onkeydown(event: KeyboardEvent) {
     // TODO: Possible Svelte Bug? onkeydown is always firing for the last edge
     if (!store.disableKeyboardA11y && elementSelectionKeys.includes(event.key) && selectable) {
       const { unselectNodesAndEdges, addSelectedEdges } = store;
@@ -102,7 +102,7 @@
         addSelectedEdges([id]);
       }
     }
-  };
+  }
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -66,7 +66,9 @@
   let draggable = $derived(_draggable ?? store.nodesDraggable);
   let selectable = $derived(_selectable ?? store.elementsSelectable);
   let connectable = $derived(_connectable ?? store.nodesConnectable);
-  let initialized = $derived(nodeHasDimensions(node) && !!node.internals.handleBounds);
+  let hasDimensions = $derived(nodeHasDimensions(node));
+  let hasHandleBounds = $derived(!!node.internals.handleBounds);
+  let isInitialized = $derived(hasDimensions && hasHandleBounds);
   let focusable = $derived(_focusable ?? store.nodesFocusable);
 
   function isInParentLookup(id: string) {
@@ -150,7 +152,7 @@
 
   $effect(() => {
     /* eslint-disable @typescript-eslint/no-unused-expressions */
-    if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {
+    if (resizeObserver && (!isInitialized || nodeRef !== prevNodeRef)) {
       prevNodeRef && resizeObserver.unobserve(prevNodeRef);
       nodeRef && resizeObserver.observe(nodeRef);
       prevNodeRef = nodeRef;
@@ -265,7 +267,7 @@
     class:parent={isParent}
     style:z-index={zIndex}
     style:transform="translate({positionX}px, {positionY}px)"
-    style:visibility={initialized ? 'visible' : 'hidden'}
+    style:visibility={hasDimensions ? 'visible' : 'hidden'}
     style={nodeStyle}
     onclick={onSelectNodeHandler}
     onpointerenter={onnodepointerenter

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { portal } from '$lib/actions/portal';
+  import { hideDuringSSR, portal } from '$lib/actions/portal';
   import type { ViewportPortalProps } from './types';
 
   let { target = 'front', children, ...rest }: ViewportPortalProps = $props();
 </script>
 
-<div use:portal={`viewport-${target}`} {...rest}>
+<div use:portal={`viewport-${target}`} style:display={hideDuringSSR().display} {...rest}>
   {@render children?.()}
 </div>