[feat]: Dreamverse creation studio UI uplift (Dreamina-inspired)

apps/dreamverse/web/e2e/frontend-shell.spec.ts

@@ -17,25 +17,17 @@ test.describe('frontend shell', () => {
     });
   });
 
-  test('composer hydrates with curated preset cards', async ({ page }) => {
+  test('composer hydrates with creation studio controls', async ({ page }) => {
     await page.goto('/');
 
-    // The Continuation prompt textarea + Generate button render once
-    // the FE has hydrated against the public-FastVideo-backed
-    // dreamverse-server. Their presence proves the integration handshake
-    // (CORS, /curated-presets, /prompt-system-config) completed.
     const continuation = page.getByLabel('Continuation prompt');
     await expect(continuation).toBeVisible({ timeout: 30_000 });
 
     const generate = page.getByRole('button', { name: /^generate$/i });
     await expect(generate).toBeVisible({ timeout: 30_000 });
 
-    // Curated presets render as buttons; verify at least one is
-    // available — that's the only way the user can populate the
-    // Continuation textarea in the default composer.
-    const presetCard = page.getByRole('button', {
-      name: /LEGO Stormtroopers|Clay Stop-Motion|Boy & Dog|School Prank|Gamer Gets Banned|Small Town Oil Strike|Grandpa's Wing Costume/i,
-    }).first();
-    await expect(presetCard).toBeVisible({ timeout: 30_000 });
+    await expect(page.getByText('Direct scenes in seconds')).toBeVisible({ timeout: 30_000 });
+    await expect(page.getByRole('button', { name: /FastLTX/i }).first()).toBeVisible({ timeout: 30_000 });
+    await expect(page.getByText('Describe your video or mention elements')).toBeVisible({ timeout: 30_000 });
   });
 });

apps/dreamverse/web/package.json

@@ -27,11 +27,15 @@
 		"@radix-ui/react-accordion": "^1.2.12",
 		"@radix-ui/react-checkbox": "^1.3.3",
 		"@radix-ui/react-collapsible": "^1.1.12",
+		"@radix-ui/react-dropdown-menu": "^2.1.24",
 		"@radix-ui/react-label": "^2.1.8",
+		"@radix-ui/react-popover": "^1.1.23",
 		"@radix-ui/react-scroll-area": "^1.2.10",
 		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-separator": "^1.1.8",
+		"@radix-ui/react-slider": "^1.4.7",
 		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-tabs": "^1.1.21",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"framer-motion": "^12.36.0",

apps/dreamverse/web/src/app/globals.css

@@ -2,6 +2,7 @@
 @import "tailwindcss";
 
 @custom-variant dark (&:is(.dark *));
+@custom-variant hover-capable (@media (hover: hover) and (pointer: fine));
 
 :root {
 	color-scheme: light;
@@ -201,7 +202,7 @@ summary::-webkit-details-marker {
 		@apply border-border;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background text-foreground antialiased;
 	}
 }
 
@@ -220,6 +221,14 @@ summary::-webkit-details-marker {
 	.stroke-dash-anim {
 		animation: stroke-dash-animation 2s linear infinite;
 	}
+
+	.text-pretty {
+		text-wrap: pretty;
+	}
+
+	.text-balance {
+		text-wrap: balance;
+	}
 }
 
 @keyframes stroke-dash-animation {
@@ -287,6 +296,22 @@ html.theme-transition *::after {
 /* —————————————— CUSTOM TAILWIND —————————————— */
 
 @layer components {
+	.studio-control {
+		@apply transition-[border-color,background-color,box-shadow,color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-blue/40;
+	}
+
+	.studio-control-press {
+		@apply active:scale-[0.96] motion-reduce:active:scale-100;
+	}
+
+	.studio-hover-surface {
+		@apply hover-capable:hover:border-border hover-capable:hover:bg-accent/50;
+	}
+
+	.studio-media-outline {
+		@apply outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10;
+	}
+
 	.debug {
 		@apply border border-rose-500;
 	}