Removed classcat and reworked class types from string to ClassValue

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
   import type { PanelProps } from './types';
   import { useStore } from '$lib/store';
 
@@ -17,7 +16,7 @@
 </script>
 
 <div
-  class={cc(['svelte-flow__panel', className, ...positionClasses])}
+  class={['svelte-flow__panel', className, ...positionClasses]}
   {style}
   style:pointer-events={store.selectionRectMode ? 'none' : ''}
   {...restProps}

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

@@ -1,5 +1,5 @@
 import type { PanelPosition } from '@xyflow/system';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   'data-testid'?: string;
@@ -9,5 +9,5 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
    */
   position?: PanelPosition;
   style?: string;
-  class?: string;
+  class?: ClassValue;
 };

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext, setContext, onDestroy } from 'svelte';
-  import cc from 'classcat';
   import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system';
 
   import { key, createStore } from '$lib/store';
@@ -69,21 +68,10 @@
     ...props
   }: SvelteFlowProps = $props();
 
-  let domNode = $state<HTMLDivElement>();
-  let clientWidth = $state<number | undefined>(width);
-  let clientHeight = $state<number | undefined>(height);
-
   const store = createStore({
     props,
-    get domNode() {
-      return domNode;
-    },
-    get width() {
-      return clientWidth;
-    },
-    get height() {
-      return clientHeight;
-    },
+    width,
+    height,
     get nodes() {
       return nodes;
     },
@@ -124,13 +112,13 @@
 </script>
 
 <div
-  bind:this={domNode}
-  bind:clientWidth
-  bind:clientHeight
+  bind:this={store.domNode}
+  bind:clientWidth={store.width}
+  bind:clientHeight={store.height}
   style:width
   style:height
   {style}
-  class={cc(['svelte-flow', className, store.colorMode])}
+  class={['svelte-flow', className, store.colorMode]}
   data-testid="svelte-flow__wrapper"
   role="application"
   {...props}

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

@@ -1,4 +1,4 @@
-import type { DOMAttributes } from 'svelte/elements';
+import type { ClassValue, DOMAttributes } from 'svelte/elements';
 import type {
   ConnectionLineType,
   NodeOrigin,
@@ -314,7 +314,7 @@ export type SvelteFlowProps = NodeEvents &
     /** Fallback color mode for SSR if colorMode is set to 'system' */
     colorModeSSR?: ColorModeClass;
     /** Class to be applied to the flow container */
-    class?: string;
+    class?: ClassValue;
     /** Styles to be applied to the flow container */
     style?: string;
     /** Choose from the built-in edge types to be used for connections