The first commit, the core and all files is adding to repo

components/CatalogBrowser.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { MapCard, type CardMap } from "./MapCard";
+export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
+  const [query, setQuery] = useState(""),
+    [source, setSource] = useState("all");
+  const shown = maps.filter(
+    (m) =>
+      (source === "all" || m.source === source) &&
+      (m.name + " " + m.description + " " + m.server?.name)
+        .toLowerCase()
+        .includes(query.toLowerCase()),
+  );
+  return (
+    <>
+      <div className="catalog-controls">
+        <label className="search-field">
+          <Search size={17} />
+          <input
+            aria-label="Search worlds"
+            placeholder="Search worlds or servers…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </label>
+        <div className="tabs" aria-label="Capture source">
+          {[
+            ["all", "All worlds"],
+            ["plugin", "Server exports"],
+            ["fabric", "Player captures"],
+          ].map(([id, label]) => (
+            <button
+              key={id}
+              className={source === id ? "active" : ""}
+              onClick={() => setSource(id)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <p className="muted">
+        {shown.length} {shown.length === 1 ? "world" : "worlds"} to explore
+      </p>
+      <div className="cards-grid">
+        {shown.map((m, i) => (
+          <MapCard map={m} index={i} key={m.id} />
+        ))}
+      </div>
+      {!shown.length && (
+        <p className="empty-state">No worlds match that search.</p>
+      )}
+    </>
+  );
+}