fix(studio): route book creation to dedicated page

packages/studio/src/App.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { deriveActiveBookId } from "./App";
+import { deriveActiveBookId, isStandaloneBookCreateRoute } from "./App";
 
 describe("deriveActiveBookId", () => {
   it("returns the current book across book-centered routes", () => {
@@ -15,3 +15,10 @@ describe("deriveActiveBookId", () => {
     expect(deriveActiveBookId({ page: "style" })).toBeUndefined();
   });
 });
+
+describe("isStandaloneBookCreateRoute", () => {
+  it("keeps the new-book route on the dedicated creation page instead of book chat", () => {
+    expect(isStandaloneBookCreateRoute({ page: "book-create" })).toBe(true);
+    expect(isStandaloneBookCreateRoute({ page: "book", bookId: "alpha" })).toBe(false);
+  });
+});

packages/studio/src/App.tsx

@@ -4,6 +4,7 @@ import type { HashRoute } from "./hooks/use-hash-route";
 import { Sidebar } from "./components/Sidebar";
 import { Dashboard } from "./pages/Dashboard";
 import { ChatPage } from "./pages/ChatPage";
+import { BookCreate } from "./pages/BookCreate";
 import { ChapterReader } from "./pages/ChapterReader";
 import { Analytics } from "./pages/Analytics";
 import { ServiceListPage } from "./pages/ServiceListPage";
@@ -33,6 +34,10 @@ export function deriveActiveBookId(route: HashRoute): string | undefined {
   return undefined;
 }
 
+export function isStandaloneBookCreateRoute(route: HashRoute): boolean {
+  return route.page === "book-create";
+}
+
 export function App() {
   const { route, setRoute } = useHashRoute();
   const sse = useSSE();
@@ -165,21 +170,22 @@ export function App() {
               <Dashboard nav={nav} sse={sse} theme={theme} t={t} />
             </div>
           )}
-          {(route.page === "book" || route.page === "book-create") && (
+          {isStandaloneBookCreateRoute(route) && (
+            <div className="max-w-4xl mx-auto px-6 py-12 md:px-12 lg:py-16 fade-in">
+              <BookCreate nav={nav} theme={theme} t={t} />
+            </div>
+          )}
+          {route.page === "book" && (
             <div className="absolute inset-0 flex min-w-0">
               <ChatPage
-                activeBookId={route.page === "book" ? route.bookId : undefined}
+                activeBookId={route.bookId}
                 nav={nav}
                 theme={theme}
                 t={t}
                 sse={sse}
               />
-              {route.page === "book" && (
-                <>
-                  <BookSidebar bookId={route.bookId} theme={theme} t={t} sse={sse} />
-                  <BookSidebarToggle bookId={route.bookId} theme={theme} t={t} sse={sse} />
-                </>
-              )}
+              <BookSidebar bookId={route.bookId} theme={theme} t={t} sse={sse} />
+              <BookSidebarToggle bookId={route.bookId} theme={theme} t={t} sse={sse} />
             </div>
           )}
           {route.page === "chapter" && (