update: realtime callback for project name.

package.json

@@ -53,7 +53,7 @@
     "devDependencies": {
         "@eslint/compat": "^1.4.0",
         "@eslint/js": "^9.37.0",
-        "@imagine.dev/web-components": "^0.0.32",
+        "@imagine.dev/web-components": "^0.0.34",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.6",
         "@playwright/test": "^1.56.0",

src/lib/stores/sdk.ts

@@ -106,7 +106,6 @@ if (!building) {
     scopedConsoleClient.setProject('console');
     clientConsole.setEndpoint(endpoint).setProject('console');
 
-    clientRealtime.setEndpoint(endpoint).setProject('console');
     clientProject.setEndpoint(endpoint).setMode('admin');
     clientRealtime.setEndpoint(endpoint).setProject('console');
 }

src/lib/studio/studio.svelte

@@ -7,16 +7,27 @@
     import { onMount } from 'svelte';
     import { ensureStudioComponent, initImagine, getWebComponents } from './studio-widget';
     import { app } from '$lib/stores/app';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const { region, projectId }: { region: string; projectId: string } = $props();
 
-    onMount(() => {
+    onMount(async () => {
         ensureStudioComponent();
-        initImagine(region, projectId);
+
+        await initImagine(region, projectId);
+
+        const { changeTheme, initImagineCallbacks } = await getWebComponents();
+        if (initImagineCallbacks) {
+            initImagineCallbacks({
+                onProjectNameChange: (name) => {
+                    invalidate(Dependencies.PROJECT);
+                }
+            });
+        }
 
         return app.subscribe(async ($app) => {
             try {
-                const { changeTheme } = await getWebComponents();
                 if (changeTheme) {
                     changeTheme($app.themeInUse);
                 }

src/routes/(console)/project-[region]-[project]/settings/updateName.svelte

@@ -26,13 +26,18 @@
                 projectId: $project.$id,
                 name
             });
-            await invalidate(Dependencies.PROJECT);
-            await invalidate(Dependencies.ORGANIZATION);
+
             addNotification({
                 type: 'success',
                 message: 'Project name has been updated'
             });
+
             trackEvent(Submit.ProjectUpdateName);
+
+            await Promise.all([
+                await invalidate(Dependencies.PROJECT),
+                await invalidate(Dependencies.ORGANIZATION)
+            ]);
         } catch (error) {
             addNotification({
                 type: 'error',