heartbeads 0.4.0

package/app/not-found.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import { BeadsLogo } from "@/components/BeadsLogo";
+
+/**
+ * Custom 404 page for Heartbeads.
+ * Minimal, elegant — matches the clean graph-visualization design language.
+ * The flatline ECG + heartbeat logo gives it character without being noisy.
+ */
+export default function NotFound() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center bg-white text-zinc-800 px-6 select-none">
+      {/* Flatline ECG trace — the bead has no pulse here */}
+      <div className="relative w-full max-w-md mb-8">
+        <svg
+          viewBox="0 0 400 40"
+          fill="none"
+          className="w-full text-zinc-200"
+          aria-hidden="true"
+        >
+          <line
+            x1="0"
+            y1="20"
+            x2="400"
+            y2="20"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeDasharray="4 6"
+            opacity="0.6"
+          />
+        </svg>
+
+        {/* The heartbeat logo pulses in the center — life in the void */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="bg-white px-4">
+            <BeadsLogo className="w-10 h-10 text-emerald-500" />
+          </div>
+        </div>
+      </div>
+
+      {/* 404 number */}
+      <h1 className="text-7xl font-extralight tracking-tight text-zinc-300 mb-3 animate-fade-in">
+        404
+      </h1>
+
+      {/* Tagline */}
+      <p className="text-lg text-zinc-500 font-light mb-2 animate-fade-in" style={{ animationDelay: "0.05s" }}>
+        This bead has no pulse.
+      </p>
+
+      {/* Subtext */}
+      <p className="text-sm text-zinc-400 mb-8 text-center max-w-xs animate-fade-in" style={{ animationDelay: "0.1s" }}>
+        We searched the entire dependency graph, but this node doesn&apos;t exist.
+        Maybe it was closed, maybe it never was.
+      </p>
+
+      {/* Back to graph button */}
+      <Link
+        href="/"
+        className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-emerald-500 text-white text-sm font-medium shadow-sm hover:bg-emerald-600 hover:shadow-md transition-all duration-200 ease-out animate-fade-in"
+        style={{ animationDelay: "0.15s" }}
+      >
+        <svg
+          viewBox="0 0 16 16"
+          fill="none"
+          className="w-4 h-4"
+          aria-hidden="true"
+        >
+          <path
+            d="M10 12L6 8l4-4"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        Back to the heartbeat
+      </Link>
+
+      {/* Tiny footer quip */}
+      <p
+        className="mt-12 text-[11px] text-zinc-300 animate-fade-in"
+        style={{ animationDelay: "0.2s" }}
+      >
+        error code: BEAD_NOT_FOUND &middot; flatline detected
+      </p>
+    </div>
+  );
+}