ui: unify aero chrome surfaces and shared hero across kanban/graph

src/components/shared/workspace-hero.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+interface WorkspaceHeroProps {
+  eyebrow: string;
+  title: string;
+  description: string;
+  action?: ReactNode;
+  scope?: ReactNode;
+  controls?: ReactNode;
+  className?: string;
+}
+
+export function WorkspaceHero({
+  eyebrow,
+  title,
+  description,
+  action,
+  scope,
+  controls,
+  className = '',
+}: WorkspaceHeroProps) {
+  return (
+    <header
+      className={`mb-6 rounded-3xl border border-white/5 bg-[radial-gradient(circle_at_2%_2%,rgba(56,189,248,0.12),transparent_40%),linear-gradient(170deg,rgba(15,23,42,0.92),rgba(11,12,16,0.95))] px-5 py-5 sm:px-8 sm:py-8 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.6)] backdrop-blur-2xl ${className}`}
+    >
+      <p className="system-data text-[10px] uppercase tracking-[0.2em] text-sky-400/70 font-bold">{eyebrow}</p>
+      <div className="mt-2 flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <h1 className="ui-text text-2xl font-bold tracking-tight text-text-strong sm:text-4xl">{title}</h1>
+          {action}
+        </div>
+        <p className="ui-text hidden max-w-md text-sm leading-relaxed text-text-muted/90 sm:block">{description}</p>
+      </div>
+      {scope ? <div className="mt-3">{scope}</div> : null}
+      {controls ? <div className="mt-3">{controls}</div> : null}
+    </header>
+  );
+}
+