@grove-dev/astro 0.2.18 → 0.2.20

package/src/theme.test.ts

@@ -0,0 +1,67 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const astroTheme = readFileSync(resolve(import.meta.dirname, "styles.css"), "utf8");
+const scaffoldTheme = readFileSync(
+  resolve(import.meta.dirname, "../templates/default/src/styles/global.css"),
+  "utf8",
+);
+const tailwindMarkup = [
+  "components/ItemCard.astro",
+  "layouts/Header.astro",
+  "../templates/default/src/pages/submit.astro",
+].map((file) => readFileSync(resolve(import.meta.dirname, file), "utf8")).join("\n");
+
+describe("Astro theme contract", () => {
+  it("keeps Starlight's light and dark foundation values", () => {
+    expect(astroTheme).toContain("--grove-background: oklch(100% 0 0)");
+    expect(astroTheme).toContain("--grove-foreground: var(--color-ink-950)");
+    expect(astroTheme).toContain("--grove-background: var(--color-ink-950)");
+    expect(astroTheme).toContain("--grove-foreground: var(--color-ink-50)");
+    expect(astroTheme).toContain("--color-ink-50: oklch(98.5% 0 0)");
+    expect(astroTheme).toContain("--color-ink-950: oklch(14.5% 0 0)");
+  });
+
+  it("exposes runtime semantic colors to Tailwind", () => {
+    for (const token of [
+      "background",
+      "foreground",
+      "primary",
+      "secondary",
+      "muted",
+      "accent",
+      "border",
+      "card",
+      "popover",
+    ]) {
+      expect(astroTheme).toContain(`--color-${token}: var(--grove-${token})`);
+    }
+  });
+
+  it("uses the same system and mono font stacks as the docs", () => {
+    expect(astroTheme).toContain(
+      '--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,',
+    );
+    expect(astroTheme).toContain(
+      "--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,",
+    );
+    expect(astroTheme).toContain("font-family: var(--font-sans)");
+  });
+
+  it("does not duplicate package-owned foundation tokens in the scaffold", () => {
+    expect(scaffoldTheme).not.toContain("--color-ink-");
+    expect(scaffoldTheme).not.toContain("font-family:");
+    expect(scaffoldTheme).not.toContain("color-scheme:");
+  });
+
+  it("styles components in HTML with Starlight-aligned Tailwind utilities", () => {
+    expect(tailwindMarkup).toContain("rounded-[calc(var(--radius)+0.25rem)]");
+    expect(tailwindMarkup).toContain("rounded-full");
+    expect(tailwindMarkup).toContain("min-h-5");
+    expect(tailwindMarkup).toContain("h-8");
+    expect(tailwindMarkup).toContain("focus-visible:ring-3");
+    expect(astroTheme).not.toContain(".grove-card");
+    expect(astroTheme).not.toContain(".grove-btn");
+  });
+});

package/templates/default/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.9",
-    "@grove-dev/astro": "0.2.16",
+    "@grove-dev/astro": "0.2.18",
     "@grove-dev/cli": "0.2.16",
     "@grove-dev/core": "0.2.16",
     "@tailwindcss/vite": "^4.3.0",

package/templates/default/public/icons/stacks/rag.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <rect width="100" height="100" rx="18" fill="#0F172A"/>
+  <path d="M29 28h42v13H29zM29 59h42v13H29z" stroke="#38BDF8" stroke-width="4" stroke-linejoin="round"/>
+  <path d="M50 41v18M42 50h16" stroke="#A78BFA" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="36" cy="34.5" r="2.5" fill="#38BDF8"/>
+  <circle cx="36" cy="65.5" r="2.5" fill="#38BDF8"/>
+</svg>

package/templates/default/public/llms-full.txt

@@ -1,6 +1,6 @@
 # example.com — full directory
 
-Generated: 2026-06-17T13:40:59.793Z
+Generated: 2026-06-22T16:19:40.464Z
 Records: 8
 
 ---

package/templates/default/public/sitemap.xml

@@ -2,61 +2,61 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://example.com/</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>daily</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://example.com/projects</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.9</priority>
   </url>
   <url>
     <loc>https://example.com/projects/coolify</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/gitea</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/hoppscotch</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/inventree</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/label-studio</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/logseq</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/private-gpt</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/wakapi</loc>
-    <lastmod>2026-06-17T13:40:59.064Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>

package/templates/default/src/pages/404.astro

@@ -21,8 +21,8 @@ const description = `That page doesn't exist on ${siteConfig.name}.`;
   site={siteConfig}
   noindex
 >
-  <section class="grove-section">
-    <div class="grove-container mx-auto px-5 py-20 sm:px-7 sm:py-28">
+  <section class="py-12 sm:py-16">
+    <div class="mx-auto w-full max-w-container px-5 py-20 sm:px-7 sm:py-28">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         404
       </span>
@@ -50,14 +50,14 @@ const description = `That page doesn't exist on ${siteConfig.name}.`;
             class="w-full rounded-md border border-ink-200 bg-white py-2.5 px-3 text-sm 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"
           />
         </label>
-        <button type="submit" class="grove-btn grove-btn-primary">
+        <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">
           Search
         </button>
       </form>
 
       <div class="mt-6 flex flex-wrap gap-3">
-        <a href="/" class="grove-btn grove-btn-primary">Back to home</a>
-        <a href={`/${slug}`} class="grove-btn grove-btn-outline">Browse {slug}</a>
+        <a href="/" 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">Back to home</a>
+        <a href={`/${slug}`} 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">Browse {slug}</a>
       </div>
     </div>
   </section>

package/templates/default/src/pages/[slug]/[recordSlug].astro

@@ -101,18 +101,14 @@ const tags = record.tags ?? [];
 const healthStatus = proj?.health?.status;
 const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
 
-// ── Badge class lookup ────────────────────────────────────────────
-// The previous code interpolated `LabelId` straight into the class
-// string (`grove-badge-{l}`), which Astro renders as a literal class
-// name — every badge became `grove-badge-{l}` regardless of value.
-// Map each known id to its stable CSS class in the package
-// stylesheet. Unknown ids (e.g. legacy "featured") fall back to the
-// neutral `.grove-badge` look instead of producing broken classes.
+// Map each known label to a static Tailwind class string so every
+// utility is visible to Tailwind's source scanner. Unknown/legacy
+// labels use the neutral secondary badge treatment.
 const labelClassMap: Record<LabelId, string> = {
-  new: "grove-badge-new",
-  hot: "grove-badge-hot",
-  mature: "grove-badge-mature",
-  featured: "grove-badge",
+  new: "!bg-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300",
+  hot: "!bg-orange-50 !text-orange-800 dark:!bg-orange-950/80 dark:!text-orange-300",
+  mature: "!bg-blue-50 !text-blue-700 dark:!bg-blue-950/80 dark:!text-blue-300",
+  featured: "inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground",
 };
 
 // ── Optional content markdown (record.content is a path under
@@ -248,8 +244,8 @@ if (isProject && proj) {
   submitHref="/submit"
   submitLabel={`Submit ${name}`}
 >
-  <article class="grove-section">
-    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <article class="py-12 sm:py-16">
+    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
       <nav class="mb-6 text-2xs text-ink-500 dark:text-ink-400" aria-label="Breadcrumb">
         <a href={`/${slug}`} class="hover:text-ink-900 dark:hover:text-ink-100 capitalize">
           {slug}
@@ -259,7 +255,7 @@ if (isProject && proj) {
       </nav>
 
       {/* ── AppCard-style header ──────────────────────────────── */}
-      <header class="grove-card flex flex-col gap-5 p-6 sm:flex-row sm:items-start">
+      <header class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col gap-5 p-6 sm:flex-row sm:items-start">
         <div class="flex-shrink-0">
           {avatarSrc ? (
             <img
@@ -292,7 +288,7 @@ if (isProject && proj) {
               </span>
             )}
             {curationLabels.map((l) => (
-              <span class={`grove-badge ${labelClassMap[l as LabelId] ?? ""}`} title={`Curated: ${labelDisplay(l) ?? l}`}>
+              <span class={`inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground ${labelClassMap[l as LabelId] ?? ""}`} title={`Curated: ${labelDisplay(l) ?? l}`}>
                 {labelDisplay(l) ?? prettySlug(l)}
               </span>
             ))}
@@ -308,7 +304,7 @@ if (isProject && proj) {
               </span>
             )}
             {healthLabel && (
-              <span class="grove-badge grove-badge-stale">{healthLabel}</span>
+              <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-amber-50 !text-amber-800 dark:!bg-amber-950/80 dark:!text-amber-300">{healthLabel}</span>
             )}
           </div>
 
@@ -350,7 +346,7 @@ if (isProject && proj) {
                 href={repoUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="grove-btn grove-btn-primary"
+                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"
               >
                 View on GitHub →
               </a>
@@ -360,7 +356,7 @@ if (isProject && proj) {
                 href={homepageUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="grove-btn grove-btn-outline"
+                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"
               >
                 Homepage
               </a>
@@ -371,7 +367,7 @@ if (isProject && proj) {
 
       {/* ── Score bars ───────────────────────────────────────── */}
       {proj && (
-        <section class="mt-8 grove-card p-6" aria-labelledby="scores-heading">
+        <section class="mt-8 rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-6" aria-labelledby="scores-heading">
           <h2 id="scores-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             Scores
           </h2>
@@ -396,7 +392,7 @@ if (isProject && proj) {
 
       {/* ── GitHub signals dl ────────────────────────────────── */}
       {isProject && github && (
-        <section class="mt-8 grove-card p-6" aria-labelledby="signals-heading">
+        <section class="mt-8 rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-6" aria-labelledby="signals-heading">
           <h2 id="signals-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             GitHub signals
           </h2>
@@ -461,8 +457,8 @@ if (isProject && proj) {
       {/* ── Decision signals (3-col) ──────────────────────────── */}
       {isProject && github && (
         <section class="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-3" aria-label="Decision signals">
-          {/* Repository health 3-col card */}
-          <div class="grove-card p-5">
+          {/* Repository health card */}
+          <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
             <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
               Repository health
             </h3>
@@ -501,7 +497,7 @@ if (isProject && proj) {
           </div>
 
           {/* Activity bar chart */}
-          <div class="grove-card p-5">
+          <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
             <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
               Activity
             </h3>
@@ -537,7 +533,7 @@ if (isProject && proj) {
           </div>
 
           {/* Contribution readiness chips */}
-          <div class="grove-card p-5">
+          <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
             <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
               Contribution readiness
             </h3>
@@ -563,7 +559,7 @@ if (isProject && proj) {
 
       {/* ── Language mix ─────────────────────────────────────── */}
       {isProject && languages.length > 0 && (
-        <section class="mt-4 grove-card p-5">
+        <section class="mt-4 rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
           <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             Language mix
           </h3>
@@ -597,7 +593,7 @@ if (isProject && proj) {
                   Stack
                 </span>
                 {stacks.map((s) => (
-                  <span class="grove-badge inline-flex items-center gap-1.5">
+                  <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5">
                     <Icon name={s} category="stack" size={14} />
                     {s}
                   </span>
@@ -610,7 +606,7 @@ if (isProject && proj) {
                   Platform
                 </span>
                 {platforms.map((p) => (
-                  <span class="grove-badge inline-flex items-center gap-1.5">
+                  <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5">
                     <Icon name={p} category="platform" size={14} />
                     {p}
                   </span>
@@ -632,7 +628,7 @@ if (isProject && proj) {
               <li>
                 <a
                   href={`/${slug}?q=${encodeURIComponent(t)}`}
-                  class="grove-badge inline-flex items-center gap-1.5"
+                  class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5"
                 >
                   {t}
                 </a>
@@ -650,12 +646,12 @@ if (isProject && proj) {
           </h2>
           <ul class="mt-4 m-0 flex list-none flex-col gap-2 p-0">
             {distribution.map((c) => (
-              <li class="grove-card flex flex-wrap items-baseline justify-between gap-2 p-3">
+              <li class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-wrap items-baseline justify-between gap-2 p-3">
                 <div class="flex flex-col">
                   <span class="text-sm font-semibold text-ink-900 dark:text-ink-100">
                     {c.label ?? c.type}
                     {c.verified && (
-                      <span class="ml-2 grove-badge grove-badge-new">Verified</span>
+                      <span class="ml-2 inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300">Verified</span>
                     )}
                   </span>
                   {c.notes && (
@@ -666,7 +662,7 @@ if (isProject && proj) {
                   href={c.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="grove-btn grove-btn-outline"
+                  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"
                 >
                   {c.platform ?? c.type} →
                 </a>

package/templates/default/src/pages/[slug]/index.astro

@@ -7,7 +7,6 @@
  *   - RefinePanel  (Stack / Platform / Category / License / Sort)
  *   - RecordSection rows (full record cards; the `ItemSection` V0
  *     name was renamed to `RecordSection` in V1)
- *   - ExploreByCategory / ExploreByStack (compact pill lists)
  *
  * Generic: the URL slug (e.g. `/projects/`, `/resources/`,
  * `/entities/`) is derived from the blueprint via `getStaticPaths`,
@@ -28,14 +27,10 @@ import SmartLensTabs from "@grove-dev/astro/components/SmartLensTabs.astro";
 import RefinePanel from "@grove-dev/astro/components/RefinePanel.astro";
 import IndexRow from "@grove-dev/astro/components/IndexRow.astro";
 import Pagination from "@grove-dev/astro/components/Pagination.astro";
-import ExploreByCategory from "@grove-dev/astro/components/ExploreByCategory.astro";
-import ExploreByStack from "@grove-dev/astro/components/ExploreByStack.astro";
 import {
   activeFilterChips,
   applySort,
   buildFacets,
-  countByCategory,
-  countByStack,
   effectivePage,
   effectiveSort,
   filterRecords,
@@ -70,16 +65,6 @@ const chips = activeFilterChips(filters);
 const title = `Browse ${slug} — ${siteConfig.name}`;
 const description = `A searchable directory of ${itemLabelPlural()} for ${siteConfig.name}.`;
 
-// Compute the top categories and stacks for the explore pills
-const categoryEntries = [...countByCategory(items as Parameters<typeof countByCategory>[0]).entries()]
-  .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
-  .slice(0, 12)
-  .map(([name, count]) => ({ name, slug: name, count }));
-const stackEntries = [...countByStack(items as Parameters<typeof countByStack>[0]).entries()]
-  .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
-  .slice(0, 18)
-  .map(([name, count]) => ({ name, slug: name, count }));
-
 function hrefForPage(target: number): string {
   const next: IndexFilters = { ...filters, page: target };
   const query = searchParamsFromFilters(next).toString();
@@ -125,7 +110,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
   submitLabel={`Submit ${itemLabel()}`}
 >
   <section class="border-b border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950">
-    <div class="grove-container-wide mx-auto px-5 pt-10 sm:px-7 sm:pt-12">
+    <div class="mx-auto w-full max-w-wide px-5 pt-10 sm:px-7 sm:pt-12">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         {slug}
       </span>
@@ -186,7 +171,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
             <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" />
           </svg>
         </label>
-        <button type="submit" class="grove-btn grove-btn-primary">Search</button>
+        <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">Search</button>
       </form>
 
       <div class="mt-4">
@@ -207,22 +192,8 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
     </div>
   </section>
 
-  {categoryEntries.length > 0 && (
-    <ExploreByCategory
-      categories={categoryEntries}
-      pathPrefix={`/${slug}`}
-    />
-  )}
-
-  {stackEntries.length > 0 && (
-    <ExploreByStack
-      stacks={stackEntries}
-      pathPrefix={`/${slug}`}
-    />
-  )}
-
-  <section class="grove-section-tight">
-    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <section class="py-10 sm:py-12">
+    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
       <header class="mb-6">
         <h2 class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
           {`All ${itemLabelPlural()}`}
@@ -249,7 +220,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
             {chips.map((chip) => (
               <a
                 href={hrefForRemove(chip.key, chip.value)}
-                class="grove-badge transition-colors hover:border-ink-400"
+                class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground transition-colors hover:border-ink-400"
               >
                 {chip.label} <span aria-hidden="true">x</span>
               </a>
@@ -277,7 +248,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
         <p class="m-0 text-sm font-medium text-ink-700 dark:text-ink-200">
           {`No ${itemLabel()}s match these filters.`}
         </p>
-        <a href={`/${slug}`} class="grove-btn grove-btn-outline mt-4">Clear filters</a>
+        <a href={`/${slug}`} 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 mt-4">Clear filters</a>
       </div>
       <nav class="mt-8 flex flex-wrap items-center justify-center gap-1.5" aria-label="Pagination">
         <Pagination current={page} total={pages} hrefFor={hrefForPage} />
@@ -286,7 +257,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
   </section>
 
   <section class="border-t border-ink-200 dark:border-ink-800">
-    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
       <div class="flex flex-col items-center gap-3 py-12 text-center">
         <h2 class="m-0 text-xl font-semibold tracking-tight text-ink-900 dark:text-ink-100">
           {`Know a real ${itemLabel()} that belongs here?`}
@@ -296,7 +267,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
         </p>
         <a
           href={siteConfig.submitUrl ?? "/submit"}
-          class="grove-btn grove-btn-primary mt-2"
+          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 mt-2"
         >
           {`Submit ${itemLabel()}`}
         </a>

package/templates/default/src/pages/about.astro

@@ -13,7 +13,7 @@
  *   - New: "A growing community knowledge site. A curated, health-
  *          aware developer directory…"
  *
- * The card utility classes (`grove-card`, `grove-btn-*`) match the
+ * The Tailwind card and button utilities match the
  * rest of the framework, and the data fields it references
  * (`siteConfig.tagline`, `siteConfig.repoUrl`) all flow from the
  * site config — no hardcoded brand or copy.
@@ -57,7 +57,7 @@ const item = itemLabel();
         </p>
       </header>
 
-      <section class="grove-card mt-8 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-8 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Why
         </span>
@@ -78,7 +78,7 @@ const item = itemLabel();
         </p>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Why real {item}s
         </span>
@@ -95,7 +95,7 @@ const item = itemLabel();
         </p>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           What you get
         </span>
@@ -130,7 +130,7 @@ const item = itemLabel();
         </ul>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Generic by design
         </span>
@@ -145,7 +145,7 @@ const item = itemLabel();
         </p>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Free to fork, free to extend
         </span>
@@ -164,18 +164,18 @@ const item = itemLabel();
       </section>
 
       <section class="mt-8 flex flex-wrap items-center gap-3">
-        <a href={`/${slug}`} class="grove-btn grove-btn-primary">Browse the directory</a>
+        <a href={`/${slug}`} 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 the directory</a>
         {githubUrl && (
           <a
             href={githubUrl}
             target="_blank"
             rel="noopener noreferrer"
-            class="grove-btn grove-btn-outline"
+            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"
           >
             View on GitHub
           </a>
         )}
-        <a href="/submit" class="grove-btn grove-btn-ghost">Submit a {item} →</a>
+        <a href="/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-transparent text-foreground hover:bg-accent hover:text-accent-foreground">Submit a {item} →</a>
       </section>
     </article>
   </Container>

package/templates/default/src/pages/contributors.astro

@@ -82,8 +82,8 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
 ---
 
 <BaseLayout title={title} description={description} site={siteConfig}>
-  <section class="grove-section">
-    <div class="grove-container-wide mx-auto px-5 py-12 sm:px-7 sm:py-16">
+  <section class="py-12 sm:py-16">
+    <div class="mx-auto w-full max-w-wide px-5 py-12 sm:px-7 sm:py-16">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         Contributors
       </span>
@@ -112,9 +112,9 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
   </section>
 
   {sorted.length === 0 ? (
-    <section class="grove-section">
-      <div class="grove-container mx-auto px-5 pb-16 sm:px-7">
-        <div class="grove-card flex flex-col items-center gap-3 p-8 text-center">
+    <section class="py-12 sm:py-16">
+      <div class="mx-auto w-full max-w-container px-5 pb-16 sm:px-7">
+        <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col items-center gap-3 p-8 text-center">
           <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
             No contributors synced yet. Once the first sync runs, every
             contributor avatar lands here.
@@ -123,8 +123,8 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
       </div>
     </section>
   ) : (
-    <section class="grove-section" aria-label="Contributors list">
-      <div class="grove-container-wide mx-auto px-5 pb-16 sm:px-7">
+    <section class="py-12 sm:py-16" aria-label="Contributors list">
+      <div class="mx-auto w-full max-w-wide px-5 pb-16 sm:px-7">
         <ul
           class="m-0 grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
           aria-label="Contributors"
@@ -140,7 +140,7 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
                   href={href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="group grove-card flex flex-col items-center gap-2 p-3 text-center no-underline transition-colors hover:border-ink-300 dark:hover:border-ink-700"
+                  class="group rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col items-center gap-2 p-3 text-center no-underline  hover:border-ink-300 dark:hover:border-ink-700"
                   data-event="contributor_click"
                   data-event-source="contributors_page"
                 >
@@ -173,12 +173,3 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
     </section>
   )}
 </BaseLayout>
-
-<style>
-  .line-clamp-1 {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>