Initial commit

components/toolkit/ToolShell.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+type ToolShellProps = {
+  title: string;
+  /** Preferred prop */
+  description?: string;
+  /** Back-compat alias used by some pages */
+  subtitle?: string;
+  className?: string;
+  children: React.ReactNode;
+  backHref?: string;
+  backLabel?: string;
+};
+
+export default function ToolShell({
+  title,
+  description,
+  subtitle,
+  className,
+  children,
+  backHref = "/laser-toolkit",
+  backLabel = "Back to Toolkit",
+}: ToolShellProps) {
+  const desc = description ?? subtitle;
+
+  return (
+    <div className={cn("mx-auto w-full max-w-5xl px-4 py-6", className)}>
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {desc ? (
+            <p className="mt-1 text-sm text-muted-foreground">{desc}</p>
+          ) : null}
+        </div>
+
+        <Link
+          href={backHref}
+          className="inline-flex h-9 items-center rounded-md border border-input bg-background px-3 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+        >
+          {backLabel}
+        </Link>
+      </div>
+
+      {children}
+    </div>
+  );
+}
+