Refactor environment variable declarations, update client entry points, and optimize asset handling in SvelteKit project for improved performance and maintainability.

src/routes/+page.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
+  import { browser } from "$app/environment";
   import { Button } from "$lib/components/ui/button";
 </script>
 
-<main class="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
-  <h1 class="text-2xl font-semibold">Stackq</h1>
-  <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
-  <div class="flex gap-2">
-    <a href="/items">
-      <Button>Items table</Button>
-    </a>
-    <a href="/logout">
-      <Button variant="outline">Log out</Button>
-    </a>
-  </div>
-</main>
+{#if browser}
+  {#await import("./HomeWithDialog.svelte")}
+    <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+      <p class="text-muted-foreground">Loading…</p>
+    </main>
+  {:then { default: HomeWithDialog }}
+    <HomeWithDialog data={data} />
+  {/await}
+{:else}
+  <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+    <h1 class="text-2xl font-semibold">Stackq</h1>
+    <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
+    <div class="flex w-full max-w-xs flex-col gap-2">
+      <a href="/items" class="block">
+        <Button class="w-full">Items table</Button>
+      </a>
+      <a href="/items" class="block">
+        <Button class="w-full" variant="outline">New item</Button>
+      </a>
+      <a href="/logout" class="block">
+        <Button class="w-full" variant="outline">Log out</Button>
+      </a>
+    </div>
+  </main>
+{/if}