feat: introduce unified fullscreen Tool Playground shell across tools

app/(tools)/background-snippets/page.tsx

@@ -2,6 +2,7 @@ import BackgroundSnippetsGenerator from "@/components/view/background-snippets";
 import { siteConfig } from "@/lib/utils";
 import type { Metadata } from "next";
 import React from "react";
+import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
 export const metadata: Metadata = {
   title: "Background Snippets Generator",
   description:
@@ -56,11 +57,18 @@ export const metadata: Metadata = {
   },
 };
 function page() {
-  return (
-    <>
-      <BackgroundSnippetsGenerator />
-    </>
-  );
+	return (
+		<ToolPlaygroundShell
+			title="Background Snippets Generator"
+			description="Generate modern CSS snippets for patterned backgrounds."
+			examples={["Noise", "Grid", "Dots", "Stripes"]}
+			docs="Use Playground for live editing, Examples to load quick presets, and Export to copy production-ready output."
+			exportLabel="CSS"
+			exportCode={`/* export output from active tool */`}
+		>
+			<BackgroundSnippetsGenerator />
+		</ToolPlaygroundShell>
+	);
 }
 
-export default page;
+export default page;

app/(tools)/clip-paths/page.tsx

@@ -2,6 +2,7 @@ import ClipPathGenerator from "@/components/view/clip-path";
 import { siteConfig } from "@/lib/utils";
 import type { Metadata } from "next";
 import React from "react";
+import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
 export const metadata: Metadata = {
 	title: "SVG Clip-Path Generator",
 	description:
@@ -52,10 +53,17 @@ export const metadata: Metadata = {
 
 function page() {
 	return (
-		<>
+		<ToolPlaygroundShell
+			title="Clip-path Generator"
+			description="Create polygon, circle, ellipse, and inset clip-path shapes."
+			examples={["Hexagon", "Blob", "Ticket", "Diamond"]}
+			docs="Use Playground for live editing, Examples to load quick presets, and Export to copy production-ready output."
+			exportLabel="CSS"
+			exportCode={`/* export output from active tool */`}
+		>
 			<ClipPathGenerator />
-		</>
+		</ToolPlaygroundShell>
 	);
 }
 
-export default page;
+export default page;

app/(tools)/color-lab/page.tsx

@@ -3,6 +3,7 @@ import ColorConverter from "@/components/view/colors";
 import { siteConfig } from "@/lib/utils";
 import type { Metadata } from "next";
 import React, { Suspense } from "react";
+import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
 export const metadata: Metadata = {
 	title:
 		"Color Lab – Generate Color Palettes, Convert Codes & Build Shadcn Themes",
@@ -85,12 +86,17 @@ const PageLoading = () => {
 };
 function page() {
 	return (
-		<>
-			<Suspense fallback={<PageLoading />}>
-				<ColorConverter />
-			</Suspense>
-		</>
+		<ToolPlaygroundShell
+			title="Color Lab"
+			description="Convert HEX/RGB/HSL and generate scales, contrast, and tokens."
+			examples={["Brand blue", "Sunset orange", "Mint", "Slate"]}
+			docs="Use Playground for live editing, Examples to load quick presets, and Export to copy production-ready output."
+			exportLabel="CSS Variables"
+			exportCode={`/* export output from active tool */`}
+		>
+			<ColorConverter />
+		</ToolPlaygroundShell>
 	);
 }
 
-export default page;
+export default page;

app/(tools)/layout.tsx

@@ -3,12 +3,10 @@ import type React from "react";
 
 function Toolslayout({ children }: { children: React.ReactNode }) {
 	return (
-		<>
+		<div className="h-screen overflow-hidden bg-white text-black dark:bg-black dark:text-white">
 			<ToolsHeader />
-			<main className="bg-white pt-28 text-black dark:bg-black dark:text-white">
-				{children}
-			</main>
-		</>
+			<main className="h-full overflow-hidden px-3 pb-3 pt-20 xl:px-6">{children}</main>
+		</div>
 	);
 }
 

app/(tools)/mesh-gradients/page.tsx

@@ -2,6 +2,7 @@ import { ShaderGradientGenerator } from "@/components/view/mesh-gradient";
 import { siteConfig } from "@/lib/utils";
 import type { Metadata } from "next";
 import React from "react";
+import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
 export const metadata: Metadata = {
 	title: "Mesh-Gradient Generator",
 	description:
@@ -52,10 +53,17 @@ export const metadata: Metadata = {
 
 function page() {
 	return (
-		<>
+		<ToolPlaygroundShell
+			title="Mesh Gradient Generator"
+			description="Build fluid mesh gradients with draggable color points."
+			examples={["Aurora", "Sunset", "Neon", "Pastel"]}
+			docs="Use Playground for live editing, Examples to load quick presets, and Export to copy production-ready output."
+			exportLabel="CSS"
+			exportCode={`/* export output from active tool */`}
+		>
 			<ShaderGradientGenerator />
-		</>
+		</ToolPlaygroundShell>
 	);
 }
 
-export default page;
+export default page;

app/(tools)/shadows/page.tsx

@@ -1,4 +1,5 @@
 import ShadowGenerator from "@/components/view/shadow";
+import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
 import { siteConfig } from "@/lib/utils";
 import type { Metadata } from "next";
 import React from "react";
@@ -53,9 +54,16 @@ export const metadata: Metadata = {
 
 function page() {
 	return (
-		<>
+		<ToolPlaygroundShell
+			title="Shadows Lab"
+			description="Craft layered box-shadows with instant CSS output."
+			examples={["Soft card", "Neumorph", "Floating panel", "Inset depth"]}
+			docs="Use Playground for live editing, Examples to load quick presets, and Export to copy production-ready output."
+			exportLabel="CSS"
+			exportCode={`/* export output from active tool */`}
+		>
 			<ShadowGenerator />
-		</>
+		</ToolPlaygroundShell>
 	);
 }
 

app/(tools)/svg-line-draw/page.tsx

@@ -1,4 +1,5 @@
 import SVGLineDrawGenerator from "@/components/view/svg-line-draw";
+import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
 import { siteConfig } from "@/lib/utils";
 import type { Metadata } from "next";
 import React, { Suspense } from "react";
@@ -71,11 +72,18 @@ const PageLoading = () => {
 };
 function page() {
 	return (
-		<>
+		<ToolPlaygroundShell
+			title="SVG Line Draw"
+			description="Sketch doodle lines and export reusable SVG/React code."
+			examples={["Underline", "Arrow", "Border scribble", "Highlight stroke"]}
+			docs="Use Playground for live editing, Examples to load quick presets, and Export to copy production-ready output."
+			exportLabel="SVG"
+			exportCode={`{/* export output from active tool */}`}
+		>
 			<Suspense fallback={<PageLoading />}>
 				<SVGLineDrawGenerator />
 			</Suspense>
-		</>
+		</ToolPlaygroundShell>
 	);
 }
 

components/common/tool-playground-shell.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { Copy, Download, EllipsisVertical, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+interface ToolPlaygroundShellProps {
+	title: string;
+	description: string;
+	examples: string[];
+	docs: string;
+	exportLabel: string;
+	exportCode: string;
+	children: React.ReactNode;
+}
+
+export function ToolPlaygroundShell({
+	title,
+	description,
+	examples,
+	docs,
+	exportLabel,
+	exportCode,
+	children,
+}: ToolPlaygroundShellProps) {
+	const [topTab, setTopTab] = useState("playground");
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const [filter, setFilter] = useState("");
+
+	const copyCode = async () => {
+		await navigator.clipboard.writeText(exportCode);
+		toast.success("Copied");
+	};
+
+	return (
+		<div className="flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border bg-card-bg">
+			<header className="flex h-16 shrink-0 items-center justify-between gap-3 border-b px-4">
+				<div className="min-w-0">
+					<h1 className="truncate font-semibold text-lg">{title}</h1>
+					<p className="truncate text-muted-foreground text-xs">{description}</p>
+				</div>
+
+				<Tabs value={topTab} onValueChange={setTopTab} className="hidden md:block">
+					<TabsList>
+						<TabsTrigger value="playground">Playground</TabsTrigger>
+						<TabsTrigger value="examples">Examples</TabsTrigger>
+						<TabsTrigger value="docs">Docs</TabsTrigger>
+					</TabsList>
+				</Tabs>
+
+				<div className="hidden items-center gap-2 lg:flex">
+					<Button size="sm" onClick={() => setDrawerOpen(true)}>
+						Export code
+					</Button>
+					<Button variant="outline" size="sm" onClick={copyCode}>
+						<Copy className="mr-1 h-4 w-4" /> Copy
+					</Button>
+					<Button variant="outline" size="sm" onClick={() => location.reload()}>
+						<RotateCcw className="mr-1 h-4 w-4" /> Reset
+					</Button>
+				</div>
+
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild className="lg:hidden">
+						<Button variant="outline" size="icon">
+							<EllipsisVertical className="h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuItem onClick={() => setDrawerOpen(true)}>
+							Export code
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={copyCode}>Copy</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => location.reload()}>Reset</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</header>
+
+			<div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[380px_minmax(0,1fr)]">
+				<aside className="min-h-0 border-r">
+					<div className="sticky top-0 z-10 border-b bg-card-bg p-3">
+						<Input
+							placeholder="Search presets"
+							value={filter}
+							onChange={(e) => setFilter(e.target.value)}
+						/>
+					</div>
+					<div className="h-[calc(100%-60px)] overflow-y-auto p-3">
+						{topTab !== "docs" && (
+							<section className="mb-4 space-y-2">
+								<h2 className="font-medium text-sm">Presets / Examples</h2>
+								{examples
+									.filter((item) =>
+										item.toLowerCase().includes(filter.toLowerCase()),
+									)
+									.map((item) => (
+										<button
+											type="button"
+											key={item}
+											className="mb-2 block w-full rounded-md border px-3 py-2 text-left text-sm hover:bg-accent"
+										>
+											{item}
+										</button>
+									))}
+							</section>
+						)}
+						<section>
+							<h2 className="mb-2 font-medium text-sm">
+								{topTab === "docs" ? "Docs" : "Controls"}
+							</h2>
+							<div className="rounded-md border bg-background p-3 text-muted-foreground text-sm">
+								{topTab === "docs"
+									? docs
+									: "All existing controls are preserved below in the tool panel. Use this sidebar as the single scroll region."}
+							</div>
+						</section>
+					</div>
+				</aside>
+
+				<section className="relative min-h-0 overflow-hidden bg-background/30">
+					<div className="h-full overflow-hidden p-2">
+						<div className="h-full overflow-hidden rounded-xl border bg-background">{children}</div>
+					</div>
+				</section>
+			</div>
+
+			<div
+				className={cn(
+					"pointer-events-none fixed top-0 right-0 z-[90] h-screen w-full max-w-xl translate-x-full border-l bg-background/95 opacity-0 backdrop-blur transition-all",
+					drawerOpen && "pointer-events-auto translate-x-0 opacity-100",
+				)}
+			>
+				<div className="flex h-16 items-center justify-between border-b px-4">
+					<h3 className="font-semibold">Export</h3>
+					<Button variant="outline" size="sm" onClick={() => setDrawerOpen(false)}>
+						Close
+					</Button>
+				</div>
+				<div className="h-[calc(100vh-64px)] overflow-y-auto p-4">
+					<p className="mb-2 text-muted-foreground text-xs">{exportLabel}</p>
+					<pre className="overflow-x-auto rounded-md border bg-card p-3 text-xs">{exportCode}</pre>
+					<div className="mt-3 flex gap-2">
+						<Button size="sm" onClick={copyCode}>
+							<Copy className="mr-1 h-4 w-4" /> Copy
+						</Button>
+						<Button size="sm" variant="outline">
+							<Download className="mr-1 h-4 w-4" /> Download
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}