@grove-dev/astro 0.5.0-next.2 → 0.5.1

package/src/components/Hero.astro

@@ -83,25 +83,32 @@ const {
 // items label so "apps" → "app" without an extra prop.
 const singular = (itemLabel ?? itemsLabel.replace(/s$/, "")).toLowerCase();
 
-const githubUrl = stats.originalRepo;
-
-const trustStats: { value: string; label: string }[] = [
-  ...(stats.totalApps !== undefined
-    ? [{ value: compact(stats.totalApps) ?? "0", label: `${itemsLabel} indexed` }]
+// One compact stats line: "6 projects indexed · 5 categories · 3 stacks".
+// Every entry is guarded so a fresh directory never renders a zero-value.
+const statParts: string[] = [
+  ...(stats.totalApps !== undefined && stats.totalApps > 0
+    ? [`${compact(stats.totalApps)} ${itemsLabel} indexed`]
     : []),
-  ...(stats.totalCategories !== undefined
-    ? [{ value: String(stats.totalCategories), label: "categories" }]
+  ...(stats.totalCategories !== undefined && stats.totalCategories > 0
+    ? [`${stats.totalCategories} categories`]
     : []),
-  ...(stats.totalStacks !== undefined
-    ? [{ value: String(stats.totalStacks), label: "stacks" }]
+  ...(stats.totalStacks !== undefined && stats.totalStacks > 0
+    ? [`${stats.totalStacks} stacks`]
     : []),
   ...(stats.totalOwners !== undefined && stats.totalOwners > 0
-    ? [{ value: compact(stats.totalOwners) ?? "0", label: "project owners" }]
+    ? [`${compact(stats.totalOwners)} owners`]
     : []),
   ...(stats.totalStars !== undefined && stats.totalStars > 0
-    ? [{ value: compact(stats.totalStars) ?? "0", label: "stars across projects" }]
+    ? [`${compact(stats.totalStars)} stars`]
     : []),
 ];
+
+// One primary CTA only — Submit already lives in the navbar
+// (BaseLayout → Header submitHref), so the hero never duplicates it.
+const primaryCta: CTA | undefined =
+  ctas.find((c) => c.variant === "primary") ??
+  ctas[0] ??
+  { label: `Browse ${itemsLabel}`, href: searchHref, variant: "primary" };
 ---
 
 <section
@@ -110,180 +117,119 @@ const trustStats: { value: string; label: string }[] = [
     className,
   ]}
 >
+  {/* Dark mode only: a barely-there radial lift behind the headline. */}
   <div
     aria-hidden="true"
-    class="pointer-events-none absolute inset-0 opacity-60 dark:opacity-40"
-    style="
-      background-image:
-        radial-gradient(60% 50% at 15% 20%, color-mix(in oklab, var(--color-ink-300) 34%, transparent), transparent 60%),
-        radial-gradient(50% 40% at 85% 10%, color-mix(in oklab, var(--color-ink-200) 28%, transparent), transparent 60%),
-        radial-gradient(40% 40% at 50% 90%, color-mix(in oklab, var(--color-ink-400) 18%, transparent), transparent 60%);
-    "
+    class="pointer-events-none absolute inset-0 hidden dark:block"
+    style="background: radial-gradient(60% 55% at 50% 0%, color-mix(in oklab, var(--grove-foreground) 5%, transparent) 0%, transparent 70%);"
   ></div>
 
   <Container>
-    <div class="relative py-12 sm:py-16">
-      <div class="max-w-3xl">
-        <span
-          class="inline-flex animate-fade-in items-center gap-2 text-2xs font-medium text-ink-500 dark:text-ink-400"
-        >
-          <span
-            aria-hidden="true"
-            class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"
-          ></span>
-          {eyebrow}
-          {eyebrowBadge && (
-            <span
-              class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-700 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
-              aria-label={eyebrowBadge}
-            >
-              {eyebrowBadge}
-            </span>
-          )}
-        </span>
-
-        <h1
-          class="mt-3 animate-fade-in-up text-[2.25rem] sm:text-[2.75rem] md:text-[3rem] font-semibold tracking-[-0.02em] leading-[1.05] text-ink-900 dark:text-ink-100 m-0"
-          style="animation-delay: 0.05s;"
-        >
-          {name}<br class="hidden sm:block" />
+    <div class="relative mx-auto flex max-w-[900px] flex-col items-center py-[88px] text-center lg:py-[104px]">
+      {/* Eyebrow */}
+      <span class="inline-flex animate-fade-in items-center gap-2 text-[13px] font-medium text-ink-500 dark:text-ink-400">
+        <span aria-hidden="true" class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"></span>
+        {eyebrow}
+        {eyebrowBadge && (
           <span
-            class="bg-gradient-to-r from-ink-900 via-ink-700 to-ink-900 bg-clip-text text-transparent dark:from-ink-100 dark:via-ink-300 dark:to-ink-100"
-            style="background-size: 200% 200%; animation: fade-in-up 0.7s ease-out 0.1s both, gradient-shift 8s ease-in-out 1s infinite;"
+            class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
+            aria-label={eyebrowBadge}
           >
-            {tagline}
+            {eyebrowBadge}
           </span>
-        </h1>
-
-        {description && (
-          <p
-            class="mt-4 animate-fade-in-up text-[0.9375rem] sm:text-[1rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
-            style="animation-delay: 0.15s;"
-          >
-            {description}
-          </p>
         )}
-      </div>
+      </span>
 
-      {/* Trust stats row */}
-      {trustStats.length > 0 && (
-        <dl
-          class:list={[
-            "mt-7 grid max-w-3xl grid-cols-2 gap-x-6 gap-y-3",
-            trustStats.length === 2 && "sm:grid-cols-2",
-            trustStats.length === 3 && "grid-cols-3",
-            trustStats.length === 4 && "sm:grid-cols-4",
-            trustStats.length >= 5 && "sm:grid-cols-5",
-          ]}
-          aria-label="Directory at a glance"
+      {/* Headline */}
+      <h1
+        class="m-0 mt-5 max-w-[820px] animate-fade-in-up text-balance text-[clamp(44px,5vw,64px)] font-[650] leading-[1.08] tracking-[-0.035em] text-ink-900 dark:text-ink-100"
+        style="animation-delay: 0.05s;"
+      >
+        <span class="block">{name}</span>
+        <span class="block">{tagline}</span>
+      </h1>
+
+      {description && (
+        <p
+          class="m-0 mt-5 max-w-[640px] animate-fade-in-up text-[16px] leading-[1.6] text-ink-500 dark:text-ink-400"
+          style="animation-delay: 0.1s;"
         >
-          {trustStats.map((s) => (
-            <div class="flex flex-col gap-0.5">
-              <dt class="sr-only">{s.label}</dt>
-              <dd class="m-0 font-mono text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                {s.value}
-              </dd>
-              <dd class="m-0 text-2xs uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                {s.label}
-              </dd>
-            </div>
-          ))}
-        </dl>
+          {description}
+        </p>
       )}
 
-      {/* Search */}
+      {/* Search — primary interaction. The FORM is the visual control:
+          it owns the border, radius, and the single focus treatment
+          (focus-within border + soft ring). The inner input opts out
+          of the global input styling (`grove-input-unstyled`) so it
+          stays a transparent, chrome-free text slot — no second box
+          or ring appearing inside the pill on focus. */}
       <form
-        class="mt-7 flex max-w-4xl flex-col gap-2 sm:flex-row sm:items-stretch"
+        class="mt-8 flex h-[58px] w-full max-w-[840px] animate-fade-in-up items-center gap-3 rounded-xl border border-ink-200 bg-background p-1.5 pl-4 transition-[border-color,box-shadow] focus-within:border-ink-400 focus-within:ring-3 focus-within:ring-ring/15 dark:border-ink-800 dark:focus-within:border-ink-600"
+        style="animation-delay: 0.15s;"
         role="search"
         action={searchHref}
         method="get"
       >
-        <label class="relative flex-1">
-          <span class="sr-only">Search {itemsLabel}, stacks, categories, licenses</span>
-          <svg
-            viewBox="0 0 16 16"
-            width="16"
-            height="16"
-            aria-hidden="true"
-            class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-400"
-            fill="currentColor"
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            ></path>
+        <label class="flex min-w-0 flex-1 items-center gap-3">
+          <span class="sr-only">Search {itemsLabel}, stacks, and categories</span>
+          <svg viewBox="0 0 16 16" width="20" height="20" aria-hidden="true" class="shrink-0 text-ink-400 dark:text-ink-500" fill="currentColor">
+            <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
           </svg>
           <input
             type="search"
             name="q"
             placeholder={searchPlaceholder}
-            class="h-10 w-full rounded-md border border-ink-200 bg-white pl-10 pr-3 text-[0.9375rem] text-ink-900 placeholder:text-ink-400 focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100 dark:placeholder:text-ink-500 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
+            class="grove-input-unstyled h-full w-full min-w-0 rounded-none border-0 bg-transparent px-0 text-[16px] text-ink-900 outline-none placeholder:text-ink-400 dark:text-ink-100 dark:placeholder:text-ink-500"
           />
         </label>
         <button
           type="submit"
-          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 sm:px-5"
+          class="inline-flex h-[46px] shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-primary px-5 text-[15px] font-medium leading-none text-primary-foreground outline-none transition-colors hover:bg-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35"
         >
           Search
         </button>
       </form>
 
       {quickFilters.length > 0 && (
-        <p
-          class="mt-2 text-2xs text-ink-500 dark:text-ink-400 m-0"
-        >
+        <p class="m-0 mt-4 text-[13px] text-ink-500 dark:text-ink-400">
           Try{" "}
           {quickFilters.map((f, i) => (
             <>
-              <a
-                href={f.href}
-                class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300"
-              >
-                {f.label}
-              </a>
-              {i < quickFilters.length - 1 && <span class="mx-1">·</span>}
+              <a href={f.href} class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">{f.label}</a>
+              {i < quickFilters.length - 1 && <span aria-hidden="true" class="mx-1">·</span>}
             </>
           ))}
         </p>
       )}
 
-      {ctas.length > 0 && (
-        <div class="mt-5 flex flex-wrap items-center gap-2">
-          {ctas.map((cta) => (
-            <a
-              href={cta.href}
-              class:list={[
-                "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35",
-                cta.variant === "primary"
-                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
-                  : cta.variant === "ghost"
-                    ? "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
-                    : "border-border bg-secondary text-foreground hover:bg-accent",
-              ]}
-              {...(cta.external
-                ? { target: "_blank", rel: "noopener noreferrer" }
-                : {})}
-              data-event="hero_cta_click"
-              data-event-source="hero"
-            >
-              {cta.label}
-            </a>
+      {/* Inline stats — single compact line, middle-dot separators */}
+      {statParts.length > 0 && (
+        <p class="m-0 mt-5 text-[13px] text-ink-500 dark:text-ink-400">
+          {statParts.map((part, i) => (
+            <>
+              {i > 0 && <span aria-hidden="true" class="mx-2 opacity-60">·</span>}
+              <span>{part}</span>
+            </>
           ))}
-        </div>
+        </p>
       )}
 
-      {/* Help debug the type system when callers forget to pass ctas. */}
-      {ctas.length === 0 && githubUrl && (
-        <div class="mt-5 flex flex-wrap items-center gap-2">
-          <a href={searchHref} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90">
-            Browse {itemsLabel}
-          </a>
+      {/* Primary CTA only */}
+      {primaryCta && (
+        <div class="mt-8">
           <a
-            href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent"
+            href={primaryCta.href}
+            class="inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-[var(--radius)] border border-transparent bg-primary px-5 text-[15px] font-medium leading-none text-primary-foreground outline-none transition-colors hover:bg-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35"
+            {...(primaryCta.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+            data-event="hero_cta_click"
+            data-event-source="hero"
           >
-            Submit via GitHub
+            {primaryCta.label}
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M5 12h14"></path>
+              <path d="m12 5 7 7-7 7"></path>
+            </svg>
           </a>
         </div>
       )}

package/src/components/IndexRow.astro

@@ -1,7 +1,16 @@
 ---
+/**
+ * IndexRow — browse-page adapter around the canonical `ProjectCard`.
+ *
+ * Keeps the historical public props (`record`, `detailHref`,
+ * `showChips`, `eager`) so consumer pages copied from earlier versions
+ * keep working, while the visual language is now identical to every
+ * other card surface. The directory extras — curated badge, license,
+ * category · status line, labelled stack/platform chips, and the
+ * GitHub footer link — are enabled via `ProjectCard`'s opt-in props.
+ */
 import type { IndexRecord } from "@grove-dev/core";
-import StackPlatformChips from "./StackPlatformChips.astro";
-import { formatRelative, formatStars, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds, statusDisplay, licenseDisplay } from "@grove-dev/astro";
+import ProjectCard from "./ProjectCard.astro";
 
 interface Props {
   record: IndexRecord;
@@ -16,73 +25,31 @@ interface Props {
 }
 
 const { record, detailHref, showChips = true, eager = false, class: className = "" } = Astro.props;
-const item = record;
-const project = item.kind === "project" ? item : null;
-const name = item.kind === "resource" ? item.title : item.name;
-const repoHref = project?.repoUrl ?? item.links.github;
-const { owner, repo } = getOwnerAndRepoFromRepoUrl(repoHref ?? "");
-const avatar = project ? project.logoUrl ?? getOwnerAvatarUrl(owner, 80) : undefined;
-const initials = name.split(/\s+/).map((word) => word[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
-const stacks = projectStackIds(project);
-const platforms = project?.platforms ?? [];
-const stars = project?.github?.stars;
-const updatedAt = project?.github?.pushedAt ?? (item.kind === "resource" ? item.publishedAt : null);
-const license = project?.github?.license;
-const status = project?.health?.status;
-const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.length || project.whyListed.length || project.caveats.length)));
----
-
-<article class={`rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group relative flex flex-col gap-3 p-4  ${className}`}>
-  <header class="flex items-start gap-3">
-    <a href={detailHref} class="relative z-10 flex shrink-0" aria-label={`Open ${name} details`}>
-      {avatar ? (
-        <img
-          src={avatar}
-          alt={`${name} avatar`}
-          width="44"
-          height="44"
-          loading={eager ? "eager" : "lazy"}
-          fetchpriority={eager ? "high" : undefined}
-          decoding="async"
-          class="h-11 w-11 rounded-md border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900"
-        />
-      ) : (
-        <span class="flex h-11 w-11 items-center justify-center rounded-md border border-ink-200 bg-ink-50 text-sm font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300">{initials}</span>
-      )}
-    </a>
-    <div class="min-w-0 flex-1">
-      <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-        <h3 class="m-0 text-[1.0625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          <a href={detailHref} class="relative z-10 hover:underline">{name}</a>
-        </h3>
-        {curated && <span class="text-[10px] font-medium uppercase tracking-wider text-emerald-700 dark:text-emerald-400">✓ curated</span>}
-      </div>
-      <div class="flex flex-wrap items-center gap-x-1.5 text-2xs text-ink-500 dark:text-ink-400">
-        {repoHref && owner && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="relative z-10 font-mono hover:text-ink-900 dark:hover:text-ink-100">@{owner}{repo ? `/${repo}` : ""}</a>}
-        {owner && <span class="text-ink-300 dark:text-ink-700">·</span>}
-        <span>{item.category}</span>
-        {status && <><span class="text-ink-300 dark:text-ink-700">·</span><span>{statusDisplay(status)}</span></>}
-      </div>
-    </div>
-  </header>
 
-  <p class="m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-600 dark:text-ink-300">{item.description}</p>
+const repoHref =
+  record.kind === "project" ? (record.repoUrl ?? record.links.github) : record.links.github;
 
-  <dl class="grid grid-cols-3 gap-x-3 text-2xs">
-    <div class="flex items-baseline gap-1.5"><dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Stars</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{formatStars(stars) ?? "—"}</dd></div>
-    <div class="flex items-baseline gap-1.5"><dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Updated</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{formatRelative(updatedAt)}</dd></div>
-    <div class="flex items-baseline gap-1.5"><dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">License</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{license ? licenseDisplay(license) : "—"}</dd></div>
-  </dl>
-
-  {showChips && (platforms.length > 0 || stacks.length > 0) && (
-    <StackPlatformChips
-      stack={stacks[0]}
-      platform={platforms}
-    />
-  )}
+const secondaryLinks = repoHref
+  ? [
+      {
+        label: "GitHub",
+        href: repoHref,
+        external: true,
+        event: "external_repo_click",
+        eventSource: "index_row_github",
+      },
+    ]
+  : [];
+---
 
-  <footer class="relative z-10 mt-1 flex items-center gap-2 border-t border-ink-100 pt-2 text-2xs dark:border-ink-900">
-    <a href={detailHref} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent px-2 text-2xs">View details →</a>
-    {repoHref && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent px-2 text-2xs">GitHub</a>}
-  </footer>
-</article>
+<ProjectCard
+  record={record}
+  href={detailHref}
+  showCurated
+  showLicense
+  showCategoryStatus
+  labelledChips={showChips}
+  secondaryLinks={secondaryLinks}
+  eager={eager}
+  class={className}
+/>

package/src/components/LanguageBreakdown.astro

@@ -38,7 +38,11 @@ const segments = languages.slice(0, maxSegments).map(([name, bytes]) => {
     <h3 class="m-0 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
       Code composition
     </h3>
-    <div class="grove-langbreak-bar mt-2 flex h-2 w-full overflow-hidden rounded-full bg-ink-100 dark:bg-ink-800">
+    <div
+      class="grove-langbreak-bar mt-2 flex h-2 w-full overflow-hidden rounded-full bg-ink-100 dark:bg-ink-800"
+      role="img"
+      aria-label={`Code composition: ${segments.map((s) => `${s.name} ${s.pct}%`).join(', ')}`}
+    >
       {segments.map((s) => (
         <span
           class="grove-langbreak-seg h-full"

package/src/components/OriginalCollection.astro

@@ -10,6 +10,7 @@
  * Generic: takes plain `stats` and a `repoUrl`. No blueprint or
  * site-specific copy.
  */
+import { buttonClass } from "../ui/button.js";
 
 interface OriginStats {
   stars?: number;
@@ -54,7 +55,7 @@ const hasStats =
 <section class:list={["py-12 sm:py-16", className]}>
   <div class="mx-auto w-full max-w-container px-5 sm:px-7">
     <div
-      class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
+      class="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-card shadow-none transition-colors flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
     >
       <div class="flex flex-col gap-2">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
@@ -104,7 +105,7 @@ const hasStats =
           href={repoUrl}
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90"
+          class={buttonClass("primary", "sm")}
           data-event="original_collection_click"
           data-event-source="original_collection"
         >

package/src/components/Pagination.astro

@@ -6,24 +6,14 @@ interface Props {
   class?: string;
 }
 
-const { current, total, hrefFor, class: className = "" } = Astro.props;
+import { paginationPageList } from "@grove-dev/astro";
+import { buttonClass, PAGINATION_EXTRA } from "../ui/button.js";
 
-function pageList(active: number, count: number): Array<number | "ellipsis"> {
-  if (count <= 7) return Array.from({ length: count }, (_, index) => index + 1);
-  const pages = new Set([1, count, active - 1, active, active + 1]);
-  const sorted = [...pages].filter((page) => page >= 1 && page <= count).sort((a, b) => a - b);
-  const result: Array<number | "ellipsis"> = [];
-  for (const page of sorted) {
-    const previous = result.at(-1);
-    if (typeof previous === "number" && page - previous > 1) result.push("ellipsis");
-    result.push(page);
-  }
-  return result;
-}
+const { current, total, hrefFor, class: className = "" } = Astro.props;
 
-const pages = pageList(current, total);
-const linkClass =
-  "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent min-w-9 px-2 py-1.5 text-2xs";
+const pages = paginationPageList(current, total);
+const linkClass = buttonClass("secondary", "sm", PAGINATION_EXTRA);
+const currentClass = buttonClass("selected", "sm", PAGINATION_EXTRA);
 ---
 
 {total > 1 && (
@@ -43,10 +33,7 @@ const linkClass =
       ) : (
         <a
           href={hrefFor(page)}
-          class:list={[
-            linkClass,
-            page === current && "bg-primary text-primary-foreground hover:bg-primary/90",
-          ]}
+          class={page === current ? currentClass : linkClass}
           aria-current={page === current ? "page" : undefined}
         >
           {page}