fix: serve design studio through the component app production route

app/middleware/design-studio.ts

@@ -0,0 +1,29 @@
+import type { Middleware } from "@wrnexus/core";
+import type { createStudioHandler } from "@wrnexus/design-studio/server";
+
+let studio: ReturnType<typeof createStudioHandler> | undefined;
+
+const designStudio: Middleware = async (ctx, next) => {
+  const url = new URL(ctx.req.url);
+  if (url.pathname === "/design-studio")
+    return new Response(null, {
+      status: 308,
+      headers: { location: "/design-studio/" },
+    });
+  if (!url.pathname.startsWith("/design-studio/")) return next();
+  // Load the installed package at runtime so its assets keep their package-relative URLs.
+  const studioModule = import.meta.resolve("@wrnexus/design-studio/server");
+  studio ??= import(studioModule)
+    .then(({ createStudioHandler }) =>
+      createStudioHandler({
+        hosted: { basePath: "/design-studio" },
+      }),
+    )
+    .catch((error) => {
+      studio = undefined;
+      throw error;
+    });
+  return (await studio)(ctx.req);
+};
+
+export default designStudio;

app/types/wrnexus.generated.d.ts

@@ -24,7 +24,9 @@ declare namespace WRNexusGenerated {
   interface ApiContracts {
     "/api/teams": { GET: ApiContract<typeof import("../api/teams.ts")["GET"]> };
   }
-  type MiddlewareContexts = Record<string, never>;
+  interface MiddlewareContexts {
+    "design-studio": MiddlewareContext<(typeof import("../middleware/design-studio.ts"))["default"]>;
+  }
   type DatabaseQueries = Record<string, never>;
   type RealtimeMessages = Record<string, never>;
   type QueuePayloads = Record<string, never>;