le-app/app/components/toolkit/ToolShell.tsx

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,
}: ToolShellProps) {
  const desc = description ?? subtitle;

  return (
    <div className={cn("w-full p-4 sm:p-5", className)}>
      <div className="mb-4 flex items-start justify-between gap-4 border-b border-border/50 pb-4">
        <div>
          <div className="mb-1 text-[10px] uppercase tracking-[0.18em] text-accent">laser.calc</div>
          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
          {desc ? (
            <p className="mt-1 text-sm text-muted-foreground">{desc}</p>
          ) : null}
        </div>

      </div>

      {children}
    </div>
  );
}