From 884d8903ca25772bec177afb4b559fae2e650b39 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 3 Oct 2026 19:04:47 +0000
Subject: [PATCH] feat(media): web view skeleton for Media Studio

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NLSCTnhge4umMnemGXWr1w
---
 apps/web/src/pages/media/BrandKitView.tsx   |  6 ++++
 apps/web/src/pages/media/CollectionView.tsx |  6 ++++
 apps/web/src/pages/media/EditorView.tsx     |  6 ++++
 apps/web/src/pages/media/LibraryView.tsx    |  6 ++++
 apps/web/src/pages/media/MediaStudio.tsx    | 34 +++++++++++++++++++++
 apps/web/src/pages/media/PeopleView.tsx     |  6 ++++
 apps/web/src/pages/media/ProjectView.tsx    |  6 ++++
 apps/web/src/pages/media/ResultsView.tsx    |  6 ++++
 apps/web/src/pages/media/ReviewView.tsx     |  6 ++++
 apps/web/src/pages/media/nav.ts             | 14 +++++++++
 10 files changed, 96 insertions(+)
 create mode 100644 apps/web/src/pages/media/BrandKitView.tsx
 create mode 100644 apps/web/src/pages/media/CollectionView.tsx
 create mode 100644 apps/web/src/pages/media/EditorView.tsx
 create mode 100644 apps/web/src/pages/media/LibraryView.tsx
 create mode 100644 apps/web/src/pages/media/MediaStudio.tsx
 create mode 100644 apps/web/src/pages/media/PeopleView.tsx
 create mode 100644 apps/web/src/pages/media/ProjectView.tsx
 create mode 100644 apps/web/src/pages/media/ResultsView.tsx
 create mode 100644 apps/web/src/pages/media/ReviewView.tsx
 create mode 100644 apps/web/src/pages/media/nav.ts

diff --git a/apps/web/src/pages/media/BrandKitView.tsx b/apps/web/src/pages/media/BrandKitView.tsx
new file mode 100644
index 0000000..af0f51b
--- /dev/null
+++ b/apps/web/src/pages/media/BrandKitView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-editor slice replaces this view. */
+export function BrandKitView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/CollectionView.tsx b/apps/web/src/pages/media/CollectionView.tsx
new file mode 100644
index 0000000..b155058
--- /dev/null
+++ b/apps/web/src/pages/media/CollectionView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-library slice replaces this view. */
+export function CollectionView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/EditorView.tsx b/apps/web/src/pages/media/EditorView.tsx
new file mode 100644
index 0000000..4c9f15d
--- /dev/null
+++ b/apps/web/src/pages/media/EditorView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-editor slice replaces this view. */
+export function EditorView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/LibraryView.tsx b/apps/web/src/pages/media/LibraryView.tsx
new file mode 100644
index 0000000..e0044a2
--- /dev/null
+++ b/apps/web/src/pages/media/LibraryView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-library slice replaces this view. */
+export function LibraryView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/MediaStudio.tsx b/apps/web/src/pages/media/MediaStudio.tsx
new file mode 100644
index 0000000..ed5c5df
--- /dev/null
+++ b/apps/web/src/pages/media/MediaStudio.tsx
@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { BrandKitView } from "./BrandKitView";
+import { CollectionView } from "./CollectionView";
+import { EditorView } from "./EditorView";
+import { LibraryView } from "./LibraryView";
+import type { MediaView } from "./nav";
+import { PeopleView } from "./PeopleView";
+import { ProjectView } from "./ProjectView";
+import { ResultsView } from "./ResultsView";
+import { ReviewView } from "./ReviewView";
+
+/** Media Studio surface. Chrome (header, close, tabs) belongs to the W3-web-library slice. */
+export function MediaStudio({ onClose }: { onClose: () => void }) {
+  const [view, setView] = useState<MediaView>({ name: "library" });
+  const props = { navigate: setView, onClose };
+  switch (view.name) {
+    case "library":
+      return <LibraryView {...props} />;
+    case "collection":
+      return <CollectionView {...props} collectionId={view.collectionId} />;
+    case "people":
+      return <PeopleView {...props} />;
+    case "results":
+      return <ResultsView {...props} />;
+    case "project":
+      return <ProjectView {...props} projectId={view.projectId} />;
+    case "editor":
+      return <EditorView {...props} projectId={view.projectId} planId={view.planId} />;
+    case "review":
+      return <ReviewView {...props} projectId={view.projectId} renderId={view.renderId} />;
+    case "brandKit":
+      return <BrandKitView {...props} brandKitId={view.brandKitId} />;
+  }
+}
diff --git a/apps/web/src/pages/media/PeopleView.tsx b/apps/web/src/pages/media/PeopleView.tsx
new file mode 100644
index 0000000..60d71a2
--- /dev/null
+++ b/apps/web/src/pages/media/PeopleView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-library slice replaces this view. */
+export function PeopleView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/ProjectView.tsx b/apps/web/src/pages/media/ProjectView.tsx
new file mode 100644
index 0000000..c4acea0
--- /dev/null
+++ b/apps/web/src/pages/media/ProjectView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-editor slice replaces this view. */
+export function ProjectView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/ResultsView.tsx b/apps/web/src/pages/media/ResultsView.tsx
new file mode 100644
index 0000000..f36273d
--- /dev/null
+++ b/apps/web/src/pages/media/ResultsView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-library slice replaces this view. */
+export function ResultsView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/ReviewView.tsx b/apps/web/src/pages/media/ReviewView.tsx
new file mode 100644
index 0000000..2110c7e
--- /dev/null
+++ b/apps/web/src/pages/media/ReviewView.tsx
@@ -0,0 +1,6 @@
+import type { MediaViewProps } from "./nav";
+
+/** Placeholder; the W3-web-editor slice replaces this view. */
+export function ReviewView(_props: MediaViewProps & Record<string, unknown>) {
+  return null;
+}
diff --git a/apps/web/src/pages/media/nav.ts b/apps/web/src/pages/media/nav.ts
new file mode 100644
index 0000000..a2e67a8
--- /dev/null
+++ b/apps/web/src/pages/media/nav.ts
@@ -0,0 +1,14 @@
+/** Screens inside Media Studio. Every view receives `navigate` to move between them. */
+export type MediaView =
+  | { name: "library" }
+  | { name: "collection"; collectionId: string }
+  | { name: "people" }
+  | { name: "results" }
+  | { name: "project"; projectId: string }
+  | { name: "editor"; projectId: string; planId: string }
+  | { name: "review"; projectId: string; renderId: string }
+  | { name: "brandKit"; brandKitId?: string };
+
+export interface MediaViewProps {
+  navigate: (view: MediaView) => void;
+}