lets give this a shot

Author: huntabyte

v4/src/routes/(view)/view/[name]/+page.server.ts

@@ -1,15 +1,10 @@
 <script lang="ts">
 	import { cn } from "$lib/utils.js";
-	import { Blocks } from "$lib/../__registry__/blocks.js";
 	import type { PageProps } from "./$types.js";
 
 	let { data }: PageProps = $props();
-
-	const block = $derived(Blocks[data.block.name]);
 </script>
 
-<div class={cn("bg-background", data.block?.container?.className)}>
-	{#await block.component() then BlockComponent}
-		<BlockComponent />
-	{/await}
+<div class={cn("bg-background")}>
+	<data.component />
 </div>

v4/src/routes/(view)/view/[name]/+page.svelte

@@ -0,0 +1,35 @@
+import { error } from "@sveltejs/kit";
+import type { EntryGenerator } from "./$types.js";
+import { getAllBlockIds } from "$lib/blocks.js";
+
+export const prerender = true;
+
+export const entries: EntryGenerator = async () => {
+	console.info("Prerendering /view/[name]");
+	const blockIds = getAllBlockIds();
+
+	return blockIds.map((name) => ({ name }));
+};
+
+export async function load({ params }) {
+	const modules = import.meta.glob("/src/lib/registry/blocks/**/+page.svelte");
+	const blockName = params.name;
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let match: { path?: string; resolver?: () => Promise<any> } = {};
+
+	for (const [path, resolver] of Object.entries(modules)) {
+		if (path.includes(blockName)) {
+			match = { path, resolver };
+			break;
+		}
+	}
+
+	const comp = await match?.resolver?.();
+
+	if (!comp) error(404, "Block not found");
+
+	return {
+		component: comp.default,
+	};
+}