refactor: split feature UI into .server/.client component pairs

Server components (.server.tsx) resolve controllers from DI, prefetch
data, and wrap client components in HydrationBoundary. Client components
(.client.tsx) use hooks for hydration + background refetch. Barrel
exports server components under clean names — consumers never see the
server/client split.

packages/blog/src/ui/components/article-detail.server.tsx

@@ -0,0 +1,24 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { blogContainer } from "../../di/container";
+import { BLOG_SYMBOLS } from "../../di/symbols";
+import type { IGetArticleBySlugController } from "../../interface-adapters/controllers/get-article-by-slug.controller";
+import { ArticleDetail as ArticleDetailClient } from "./article-detail.client";
+
+export async function ArticleDetail({ slug }: { slug: string }) {
+  const controller = blogContainer.get<IGetArticleBySlugController>(
+    BLOG_SYMBOLS.IGetArticleBySlugController,
+  );
+  const article = await controller({ slug });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["blog", "articleBySlug", { input: { slug } }],
+    article,
+  );
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ArticleDetailClient slug={slug} />
+    </HydrationBoundary>
+  );
+}