@grove-dev/astro 0.2.10 → 0.2.14

package/src/components/ItemCard.astro

@@ -1,62 +1,54 @@
 ---
 /**
- * ItemCard — generic project/resource/entity card.
+ * ItemCard — compact card for one record on the home page (or any
+ * 3-column grid).
  *
- * The most-decorated card in the showcase. Used on home (curated
- * sections), the list page (cards-only views), and the search
- * results. Renders:
+ * V1 (published) API: takes `record` (a Resource / IndexProjectRecord)
+ * and `href` (the full detail-page URL). The page that calls this
+ * component owns the path layout — blueprint-aware consumers
+ * (project-directory → /projects/<slug>, resource-hub →
+ * /resources/<slug>, ecosystem-map → /entities/<slug>) pass the
+ * correct href via `RecordSection`'s `hrefFor` callback.
  *
- *   - Logo/avatar with initials fallback (logoUrl -> GitHub owner
- *     avatar -> 2-letter initials).
- *   - Owner / repo link (when `repoUrl` is github.com).
- *   - Stack + platform chips (first 3, then "+N" overflow).
- *   - Optional curated mark (label badge) — e.g. "Featured", "New".
- *   - Health badge (Active / Mature / Stale / Archived / ...).
- *   - License + star count + last-updated date.
- *   - Two CTAs: "View repo" (links.github if present, else repoUrl)
- *     and "Details" (the page link).
- *
- * Generic: takes any `Resource` (`kind: "project" | "resource" |
- * "entity"`). For "project" we read the project-style fields
- * (`repoUrl`, `logoUrl`, `stacks`, `platforms`, `github`,
- * `curation`, `health`); for other kinds we degrade gracefully to
- * the minimal view.
- *
- * Index-payload-friendly: when the consumer passes an
- * `IndexProjectRecord` (the slim list-page shape), the component
- * reads the projected fields directly — `github.stars` /
- * `github.pushedAt` / `github.license` — rather than the raw
- * `github.repository` block.
+ * V1 (legacy) API: also accepts `item` + `pathPrefix` as a
+ * convenience for callers that haven't migrated. When both are
+ * provided, `href` wins; when only `pathPrefix` is provided, the
+ * detail href is `${pathPrefix}/${item.slug}`.
  */
-import type {
-  Resource,
-  ProjectRecord,
-  HealthStatus,
-  IndexProjectRecord,
-} from "@grove-dev/core";
-import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "../lib/repo";
-import { formatRelative, formatStars } from "../lib/format";
-import { statusDisplay, prettySlug, labelDisplay } from "../lib/display";
+import type { IndexRecord, Resource, ProjectRecord, IndexProjectRecord } from "@grove-dev/core";
+import Icon from "./Icon.astro";
+import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "@grove-dev/astro";
+import { formatStars, formatRelative } from "@grove-dev/astro";
+import { statusDisplay } from "@grove-dev/astro";
+
+type CardRecord = IndexRecord | Resource | ProjectRecord | IndexProjectRecord;
 
 interface Props {
-  record: Resource | IndexProjectRecord;
-  /** Detail page href. */
-  href: string;
+  /** V1 API — full Resource/IndexProjectRecord. */
+  record?: CardRecord;
+  /** V1 API — full detail-page URL. */
+  href?: string;
+  /** Legacy API — singular item, equivalent to `record`. */
+  item?: CardRecord;
+  /** Legacy API — URL prefix, equivalent to deriving from
+   *  blueprint routeSlug + slug. */
+  pathPrefix?: string;
   /** When true, show owner/repo below the title. Default true. */
   showOwner?: boolean;
-  /** When true, render the stack/platform chip row. Default true. */
+  /** When false, hide the platform + stack chip row. Default true. */
   showChips?: boolean;
-  /** When true, render the curated label badge row. Default true. */
+  /** When false, hide the curated label. Default true. */
   showLabel?: boolean;
-  /** When true, render the metadata strip (license/stars/updated). */
+  /** When false, hide the stars/updated/license metadata row. */
   showMeta?: boolean;
-  /** Extra class on the outer <article>. */
   class?: string;
 }
 
 const {
-  record,
-  href,
+  record: recordProp,
+  href: hrefProp,
+  item: itemProp,
+  pathPrefix = "/items",
   showOwner = true,
   showChips = true,
   showLabel = true,
@@ -64,254 +56,280 @@ const {
   class: className = "",
 } = Astro.props;
 
-// Project-specific extraction. The `isIndex` branch reads the slim
-// fields from `toIndexRecord`; the full branch reads the raw
-// `github.repository` block for sites that want max fidelity.
-const isIndex = "github" in record && record.github !== undefined
-  && (record as IndexProjectRecord).github !== undefined
-  && (record.github as { fullName?: string })?.fullName !== undefined;
-const project = record.kind === "project" ? (record as ProjectRecord | IndexProjectRecord) : null;
+// Resolve `item` (legacy) → `record` (V1) and `hrefProp` → final.
+const item: CardRecord = (recordProp ?? itemProp) as CardRecord;
+const slug = (item as { slug: string }).slug;
+let detailHref: string;
+if (typeof hrefProp === "string" && hrefProp.length > 0) {
+  detailHref = hrefProp;
+} else {
+  const base = pathPrefix.replace(/\/$/, "");
+  detailHref = `${base}/${slug}`;
+}
+
+const isProject = item.kind === "project";
+const name = item.kind === "resource" ? (item as { title: string }).title : (item as { name: string }).name;
+const repoHref = isProject
+  ? (item as { repoUrl?: string }).repoUrl
+  : (item as { links: { github?: string } }).links?.github;
+const homepageHref = isProject
+  ? undefined
+  : (item.links as { website?: string; source?: string }).website ??
+    (item.links as { source?: string }).source;
 
-const name =
-  record.kind === "resource"
-    ? (record as { title: string }).title
-    : (record as { name: string }).name;
-const description = record.description ?? "";
-const tags = (record.tags ?? []).slice(0, 4);
-const repoUrl = (project as ProjectRecord | IndexProjectRecord | null)?.repoUrl;
-const logoUrl = (project as ProjectRecord | IndexProjectRecord | null)?.logoUrl;
-const stacks = (project?.stacks ?? (project?.stack ? [project.stack] : [])) as string[];
-const platforms = (project?.platforms ?? []) as string[];
-const healthStatus: HealthStatus | undefined = project?.health?.status;
-const labels = record.curation?.labels ?? [];
-// Slim (IndexProjectRecord.github) → full (ProjectRecord.github.repository).
-const indexGh = isIndex ? (project as IndexProjectRecord).github : null;
-const fullGh = !isIndex ? (project as ProjectRecord | null)?.github?.repository : null;
-const stars = indexGh?.stars ?? fullGh?.stargazers_count;
-const licenseSpdx = indexGh?.license ?? fullGh?.license?.spdx_id ?? null;
-const pushedAt = indexGh?.pushedAt ?? fullGh?.pushed_at;
-const githubUrl =
-  repoUrl ?? (record.links as { github?: string } | undefined)?.github;
+// Curated = at least one of the hand-written fields is filled in.
+const isCurated = Boolean(
+  (item as { curation?: { reviewed?: boolean } }).curation?.reviewed ||
+    (isProject && (
+      ((item as { bestFor?: string[] }).bestFor?.length ?? 0) > 0 ||
+      ((item as { whyListed?: string[] }).whyListed?.length ?? 0) > 0 ||
+      ((item as { caveats?: string[] }).caveats?.length ?? 0) > 0
+    )),
+);
 
-// Logo fallback chain
-const ownerRepo = repoUrl ? getOwnerAndRepoFromRepoUrl(repoUrl) : null;
-const avatarSrc =
-  logoUrl ?? (ownerRepo ? getOwnerAvatarUrl(ownerRepo.owner, 80) : null);
-const initials = (name || "")
-  .replace(/[^a-z0-9]/gi, "")
+// Initials for placeholder logo.
+const initials = (name ?? "")
+  .split(/\s+/)
+  .map((w) => w[0])
+  .filter(Boolean)
   .slice(0, 2)
+  .join("")
   .toUpperCase();
 
-// Chips: 3 stacks/platforms, then overflow count
-function withOverflow(
-  items: string[],
-): { shown: string[]; overflow: number } {
-  const shown = items.filter(Boolean).slice(0, 3);
-  const overflow = Math.max(0, items.filter(Boolean).length - shown.length);
-  return { shown, overflow };
-}
-const stackChips = withOverflow(stacks);
-const platformChips = withOverflow(platforms);
+// Logo URL: explicit `logoUrl` (project only) → GitHub owner avatar
+// → initials placeholder.
+const { owner, repo } = getOwnerAndRepoFromRepoUrl(repoHref ?? "");
+const logoUrl = isProject
+  ? (item as { logoUrl?: string }).logoUrl ?? getOwnerAvatarUrl(owner, 80)
+  : undefined;
 
-// Curated mark
-const curatedLabel = labels[0] ?? null;
+// Up to 4 platforms + stack chips (project only).
+const platforms = isProject ? (item as { platforms?: string[] }).platforms ?? [] : [];
+const visiblePlatforms = platforms.slice(0, 4);
+const platformOverflow = platforms.length - visiblePlatforms.length;
 
-// Health class hook (for badge variant). `project` is the union of
-// ProjectRecord | IndexProjectRecord, and both share a `health` field
-// with the same shape, so a single optional-chain read covers both
-// shapes — no isIndex branch is needed for the status itself.
-function healthBadgeClass(s: HealthStatus | undefined): string {
-  switch (s) {
-    case "mature":
-    case "active":
-      return "grove-badge-new";
-    case "stale":
-    case "inactive":
-      return "grove-badge-stale";
-    case "archived":
-    case "unavailable":
-      return "grove-badge-hot";
-    default:
-      return "";
-  }
-}
-const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
+const allStacks = isProject
+  ? [
+      (item as { stack?: string }).stack,
+      ...((item as { stacks?: string[] }).stacks ?? []),
+    ].filter((s): s is string => Boolean(s))
+  : [];
+const visibleStacks = allStacks.slice(0, 3);
+const stackOverflow = allStacks.length - visibleStacks.length;
 
+const stars = isProject ? (item as { github?: { stars?: number } }).github?.stars : undefined;
+const updatedAt = isProject
+  ? (item as { github?: { pushedAt?: string | null } }).github?.pushedAt
+  : (item as { publishedAt?: string | null }).publishedAt;
 const starsLabel = formatStars(stars);
-const updatedLabel = formatRelative(pushedAt);
+const updatedLabel = formatRelative(updatedAt);
+const license = isProject ? (item as { github?: { license?: string } }).github?.license : null;
+const status = isProject ? (item as { health?: { status?: string } }).health?.status : undefined;
+
+const externalHref = repoHref ?? homepageHref;
+const statusText = status ? statusDisplay(status as Parameters<typeof statusDisplay>[0]) : "";
+const category = (item as { category?: string }).category;
 ---
 
 <article
-  class:list={["grove-card grove-card-hover grove-item-card p-4", className]}
-  data-record-slug={record.slug}
-  data-record-kind={record.kind}
-  data-record-category={record.category}
-  data-record-stacks={stacks.join(",")}
-  data-record-platforms={platforms.join(",")}
+  class={`card card-hover group relative flex h-full flex-col gap-3 p-4 ${className}`}
 >
-  <div class="flex items-start gap-3">
-    <div class="grove-item-card__logo flex-shrink-0">
-      {avatarSrc ? (
-        <img
-          src={avatarSrc}
-          alt=""
-          width="40"
-          height="40"
-          loading="lazy"
-          decoding="async"
-          class="h-10 w-10 rounded-md border border-ink-200 object-contain bg-white dark:border-ink-800 dark:bg-ink-950"
-        />
-      ) : (
-        <span
-          class="inline-flex h-10 w-10 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 dark:text-ink-200"
-          aria-hidden="true"
+  {/* Top row: logo + name + (optional) status + curated mark. */}
+  <header class="relative z-10 flex items-start gap-3">
+    <a
+      href={detailHref}
+      aria-label={`Open ${name} details`}
+      class="absolute inset-0 z-0 rounded-lg"
+    ></a>
+
+    {logoUrl ? (
+      <img
+        src={logoUrl}
+        alt={`${name} avatar`}
+        width="40"
+        height="40"
+        loading="lazy"
+        decoding="async"
+        class="h-10 w-10 shrink-0 rounded-md border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900"
+      />
+    ) : (
+      <span
+        aria-hidden="true"
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-ink-50 text-2xs font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300"
+      >
+        {initials}
+      </span>
+    )}
+
+    <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+      <h3
+        class="m-0 truncate text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100"
+      >
+        {/* Name → detail page (not GitHub repo). Stacks above the
+            stretched link via z-index. */}
+        <a
+          href={detailHref}
+          class="relative z-10 text-inherit no-underline"
         >
-          {initials || "·"}
+          {name}
+        </a>
+      </h3>
+      {showLabel && (
+        <span class="truncate text-2xs text-ink-500 dark:text-ink-400">
+          {showOwner && owner ? (
+            <>
+              <a
+                href={repoHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                data-event="external_repo_click"
+                data-event-source="card_owner"
+                data-event-item={slug}
+                class="relative z-10 font-mono text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+              >
+                <span class="text-ink-400 dark:text-ink-500">@</span>{owner}{repo ? <span class="text-ink-400 dark:text-ink-500">/{repo}</span> : ""}
+              </a>
+              <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
+              {category}
+              {status && (
+                <>
+                  <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
+                  <span class="text-ink-500 dark:text-ink-400">{statusText}</span>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              {category}
+              {status && (
+                <>
+                  <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
+                  <span class="text-ink-500 dark:text-ink-400">{statusText}</span>
+                </>
+              )}
+            </>
+          )}
         </span>
       )}
     </div>
 
-    <div class="min-w-0 flex-1">
-      <div class="flex flex-wrap items-baseline gap-2">
-        <h2 class="m-0 text-[1rem] font-semibold leading-tight tracking-tight text-ink-900 dark:text-ink-100">
-          <a href={href} class="text-inherit no-underline hover:underline">
-            {name}
-          </a>
-        </h2>
-        {showLabel && curatedLabel && (
-          <span
-            class:list={["grove-badge", `grove-badge-${curatedLabel}`]}
-            title={`Curated: ${labelDisplay(curatedLabel) ?? curatedLabel}`}
-          >
-            {labelDisplay(curatedLabel) ?? prettySlug(curatedLabel)}
-          </span>
-        )}
-        {healthLabel && (
-          <span class:list={["grove-badge", healthBadgeClass(healthStatus)]}>
-            {healthLabel}
-          </span>
-        )}
-      </div>
+    {isCurated && showLabel && (
+      <span
+        class="inline-flex shrink-0 items-center gap-1 text-[10px] font-medium uppercase tracking-wider text-emerald-700 dark:text-emerald-400"
+        title="Hand-curated entry: bestFor, whyListed, caveats, or scores are filled in"
+      >
+        <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" fill="currentColor">
+          <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.41 5.09a.75.75 0 0 0-1.06 0L6.75 8.69 5.65 7.59a.75.75 0 1 0-1.06 1.06l1.65 1.65a.75.75 0 0 0 1.06 0l4.11-4.11a.75.75 0 0 0 0-1.06Z"/>
+        </svg>
+        curated
+      </span>
+    )}
+  </header>
 
-      {showOwner && ownerRepo && (
-        <p class="m-0 mt-0.5 text-2xs text-ink-500 dark:text-ink-400">
-          <a
-            href={`https://github.com/${ownerRepo.owner}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
-          >
-            @{ownerRepo.owner}
-          </a>
-          <span class="mx-1 text-ink-300 dark:text-ink-700">/</span>
-          <a
-            href={repoUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
-          >
-            {ownerRepo.repo}
-          </a>
-        </p>
-      )}
+  {/* Description */}
+  {item.description && (
+    <p
+      class="relative z-10 m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-500 dark:text-ink-400"
+    >
+      {item.description}
+    </p>
+  )}
 
-      {description && (
-        <p class="m-0 mt-1.5 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
+  {/* Metadata row: stars · updated · license — the three signals
+      that answer "is this alive and usable?" at a glance. */}
+  {showMeta && (
+    <div class="relative z-10 flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-ink-500 dark:text-ink-400">
+      {starsLabel !== null && (
+        <span class="inline-flex items-center gap-1" title={`${stars ?? 0} stars on GitHub`}>
+          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-amber-500">
+            <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/>
+          </svg>
+          <span class="font-mono">{starsLabel}</span>
+        </span>
       )}
-    </div>
-  </div>
-
-  {showChips && (stackChips.shown.length > 0 || platformChips.shown.length > 0) && (
-    <div class="mt-3 flex flex-wrap items-center gap-1.5">
-      {stackChips.shown.map((s) => (
-        <span class="grove-badge" title={`Stack: ${s}`}>{s}</span>
-      ))}
-      {stackChips.overflow > 0 && (
-        <span class="grove-badge" title={`${stackChips.overflow} more stacks`}>
-          +{stackChips.overflow}
+      {updatedAt && (
+        <span class="inline-flex items-center gap-1" title={`Last updated ${updatedAt}`}>
+          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-ink-400">
+            <path d="M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 1.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm-.5 1.5a.5.5 0 0 0-1 0v3.25c0 .15.07.29.18.39l1.95 1.65a.5.5 0 0 0 .66-.76L7.5 7.55V5Z"/>
+          </svg>
+          <span class="font-mono">Updated {updatedLabel}</span>
         </span>
       )}
-      {platformChips.shown.map((p) => (
-        <span class="grove-badge" title={`Platform: ${p}`}>{p}</span>
-      ))}
-      {platformChips.overflow > 0 && (
-        <span
-          class="grove-badge"
-          title={`${platformChips.overflow} more platforms`}
-        >
-          +{platformChips.overflow}
+      {license && (
+        <span class="inline-flex items-center gap-1" title={`License: ${license}`}>
+          <span class="font-mono uppercase tracking-wide text-[10px]">{license}</span>
         </span>
       )}
-      {tags.length > 0 && tags.map((t) => <span class="grove-badge">{t}</span>)}
     </div>
   )}
 
-  {showMeta && (starsLabel || licenseSpdx || updatedLabel !== "—") && (
-    <dl
-      class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-ink-500 dark:text-ink-400"
-      aria-label="Project signals"
-    >
-      {starsLabel && (
-        <div class="flex items-center gap-1">
-          <dt class="sr-only">Stars</dt>
-          <dd class="m-0 font-mono">{starsLabel}</dd>
-          <span aria-hidden="true">★</span>
-        </div>
-      )}
-      {licenseSpdx && (
-        <div class="flex items-center gap-1">
-          <dt class="sr-only">License</dt>
-          <dd class="m-0">{licenseSpdx}</dd>
+  {/* Platform + stack chips, pushed to the bottom. */}
+  {showChips && (
+    <div class="relative z-10 mt-auto flex flex-col gap-1.5">
+      {visiblePlatforms.length > 0 && (
+        <div class="flex flex-wrap items-center gap-1.5">
+          {visiblePlatforms.map((p) => (
+            <span class="chip">
+              <Icon name={p} category="platform" size={11} />
+              <span>{p}</span>
+            </span>
+          ))}
+          {platformOverflow > 0 && (
+            <span class="chip text-ink-400 dark:text-ink-500">+{platformOverflow}</span>
+          )}
         </div>
       )}
-      {updatedLabel && updatedLabel !== "—" && (
-        <div class="flex items-center gap-1">
-          <dt class="sr-only">Last updated</dt>
-          <dd class="m-0">Updated {updatedLabel}</dd>
+      {visibleStacks.length > 0 && (
+        <div class="flex flex-wrap items-center gap-1.5">
+          {visibleStacks.map((s) => (
+            <span class="chip chip-stack">
+              <Icon name={s} category="stack" size={11} />
+              <span>{s}</span>
+            </span>
+          ))}
+          {stackOverflow > 0 && (
+            <span class="chip chip-stack text-ink-400 dark:text-ink-500">+{stackOverflow}</span>
+          )}
         </div>
       )}
-    </dl>
+    </div>
   )}
 
-  <div class="mt-4 flex flex-wrap items-center gap-2">
-    <a
-      href={href}
-      class="grove-btn grove-btn-outline"
-      data-event="card_details_click"
-      data-event-source="item_card"
-      data-event-app={record.slug}
-    >
-      Details
-    </a>
-    {githubUrl && (
+  {/* Footer row: View repo + Details links. */}
+  <footer class="relative z-10 mt-1 flex items-center justify-between gap-2 border-t border-ink-100 pt-2 text-2xs dark:border-ink-900">
+    {externalHref && (
       <a
-        href={githubUrl}
+        href={externalHref}
         target="_blank"
         rel="noopener noreferrer"
-        class="grove-btn grove-btn-ghost"
-        data-event="card_repo_click"
-        data-event-source="item_card"
-        data-event-app={record.slug}
+        data-event="external_repo_click"
+        data-event-source="card_view_repo"
+        data-event-item={slug}
+        class="relative z-10 inline-flex items-center gap-1 font-medium text-ink-700 transition-colors hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
       >
-        View repo
+        {repoHref ? "View repo" : "Visit source"}
+        <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" fill="currentColor">
+          <path d="M3.75 2A1.75 1.75 0 0 0 2 3.75v8.5C2 13.216 2.784 14 3.75 14h8.5A1.75 1.75 0 0 0 14 12.25v-3.5a.75.75 0 0 0-1.5 0v3.5a.25.25 0 0 1-.25.25h-8.5a.25.25 0 0 1-.25-.25v-8.5a.25.25 0 0 1 .25-.25h3.5a.75.75 0 0 0 0-1.5h-3.5Z"/>
+          <path d="M10 0a.75.75 0 0 0-.75.75v.75h-3a.75.75 0 0 0 0 1.5h3v.75A.75.75 0 0 0 10.75 4.5h2.5A.75.75 0 0 0 14 3.75v-2.5A.75.75 0 0 0 13.25.5H10Z"/>
+        </svg>
       </a>
     )}
-  </div>
+    <a
+      href={detailHref}
+      class="relative z-10 inline-flex items-center gap-1 font-medium text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+    >
+      Details →
+    </a>
+  </footer>
 </article>
 
 <style>
-  .grove-item-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    height: 100%;
+  @reference "../styles.css";
+
+  .chip {
+    @apply inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-1.5 py-0.5 text-2xs font-medium text-ink-700 transition-colors dark:border-ink-200 dark:bg-ink-950 dark:text-ink-300;
   }
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  .chip-stack {
+    @apply bg-ink-50 dark:bg-ink-900/60;
   }
 </style>

package/src/components/Pagination.astro

@@ -0,0 +1,63 @@
+---
+interface Props {
+  current: number;
+  total: number;
+  hrefFor: (page: number) => string;
+  class?: string;
+}
+
+const { current, total, hrefFor, class: className = "" } = Astro.props;
+
+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 pages = pageList(current, total);
+const linkClass =
+  "grove-btn grove-btn-outline min-w-9 px-2 py-1.5 text-2xs";
+---
+
+{total > 1 && (
+  <nav
+    class:list={["flex flex-wrap items-center justify-center gap-1.5", className]}
+    aria-label="Pagination"
+  >
+    {current > 1 ? (
+      <a href={hrefFor(current - 1)} class={linkClass} rel="prev">Previous</a>
+    ) : (
+      <span class={`${linkClass} pointer-events-none opacity-40`}>Previous</span>
+    )}
+
+    {pages.map((page) =>
+      page === "ellipsis" ? (
+        <span class="px-1 text-2xs text-ink-400" aria-hidden="true">...</span>
+      ) : (
+        <a
+          href={hrefFor(page)}
+          class:list={[
+            linkClass,
+            page === current && "grove-btn-primary",
+          ]}
+          aria-current={page === current ? "page" : undefined}
+        >
+          {page}
+        </a>
+      ),
+    )}
+
+    {current < total ? (
+      <a href={hrefFor(current + 1)} class={linkClass} rel="next">Next</a>
+    ) : (
+      <span class={`${linkClass} pointer-events-none opacity-40`}>Next</span>
+    )}
+  </nav>
+)}