@grove-dev/astro 0.2.19 → 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Turtuvshin Byambaa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/template-routes.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=template-routes.test.d.ts.map

package/dist/template-routes.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-routes.test.d.ts","sourceRoot":"","sources":["../src/template-routes.test.ts"],"names":[],"mappings":""}

package/dist/template-routes.test.js

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { readFile, stat } from "node:fs/promises";
+import { resolve } from "node:path";
+const pagesDir = resolve(import.meta.dirname, "../templates/default/src/pages");
+describe("default Astro route configuration", () => {
+    it("ships TypeScript settings that resolve package exports and Node built-ins", async () => {
+        const templateRoot = resolve(pagesDir, "../..");
+        const tsconfig = JSON.parse(await readFile(resolve(templateRoot, "tsconfig.json"), "utf8"));
+        const manifest = JSON.parse(await readFile(resolve(templateRoot, "package.json"), "utf8"));
+        expect(tsconfig.extends).toBe("astro/tsconfigs/base");
+        expect(tsconfig.compilerOptions?.moduleResolution).toBe("Bundler");
+        expect(tsconfig.compilerOptions?.types).toContain("node");
+        expect(manifest.devDependencies?.["@types/node"]).toMatch(/^\^/);
+    });
+    it("treats generated JSON as an untyped boundary before applying payload types", async () => {
+        const recordsModule = await readFile(resolve(pagesDir, "../data/records.ts"), "utf8");
+        expect(recordsModule).toContain("fullPayload as unknown as FullPayload");
+    });
+    it("derives the directory route from generated site config", async () => {
+        const listPage = await readFile(resolve(pagesDir, "[slug]/index.astro"), "utf8");
+        expect(listPage).toContain("siteConfig.blueprintConfig?.routeSlug");
+    });
+    it("does not generate the legacy apps alias when apps is canonical", async () => {
+        const aliasPage = await readFile(resolve(pagesDir, "apps/[recordSlug].astro"), "utf8");
+        expect(aliasPage).toContain('if (indexSlug() === "apps")');
+        expect(aliasPage).toContain("return []");
+    });
+    it("renders consumer-authored about Markdown through the default page", async () => {
+        const aboutPage = await readFile(resolve(pagesDir, "about.astro"), "utf8");
+        expect(aboutPage).toContain('getPageContentHtml("about")');
+    });
+    it("generates submission drafts accepted by the Grove record schema", async () => {
+        const submitPage = await readFile(resolve(pagesDir, "submit.astro"), "utf8");
+        expect(submitPage).toContain('"  type: manual"');
+        expect(submitPage).not.toContain('"  type: github"');
+    });
+    it("keeps generic maintenance behavior in Grove instead of consumer scripts", async () => {
+        const templateRoot = resolve(pagesDir, "../..");
+        const manifest = JSON.parse(await readFile(resolve(templateRoot, "package.json"), "utf8"));
+        const scriptsDirExists = await stat(resolve(templateRoot, "scripts"))
+            .then(() => true)
+            .catch(() => false);
+        expect(manifest.scripts?.["build:llms"]).toBe("grove llms");
+        expect(manifest.scripts?.["sync:contributors"]).toBe("grove sync contributors");
+        expect(scriptsDirExists).toBe(false);
+    });
+    it("hydrates static list pages with URL-driven search and pagination", async () => {
+        const listPage = await readFile(resolve(pagesDir, "[slug]/index.astro"), "utf8");
+        expect(listPage).toContain('id="grove-index-data"');
+        expect(listPage).toContain("function applyClientFilters()");
+        expect(listPage).toContain("const PAGE_SIZE = 20");
+    });
+    it("uses generated taxonomy names as display labels", async () => {
+        const recordsModule = await readFile(resolve(pagesDir, "../data/records.ts"), "utf8");
+        const homePage = await readFile(resolve(pagesDir, "index.astro"), "utf8");
+        const listPage = await readFile(resolve(pagesDir, "[slug]/index.astro"), "utf8");
+        expect(recordsModule).toContain("export function taxonomyLabel");
+        expect(recordsModule).toContain("?? prettySlug(id)");
+        expect(homePage).toContain('taxonomyLabel("categories"');
+        expect(listPage).toContain("labelFacetsWithTaxonomy");
+    });
+});
+//# sourceMappingURL=template-routes.test.js.map

package/dist/template-routes.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-routes.test.js","sourceRoot":"","sources":["../src/template-routes.test.ts"],"names":[],"mappings":"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"}

package/dist/theme.test.js

@@ -3,6 +3,12 @@ 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");
+const iconMarkup = readFileSync(resolve(import.meta.dirname, "components/Icon.astro"), "utf8");
 describe("Astro theme contract", () => {
     it("keeps Starlight's light and dark foundation values", () => {
         expect(astroTheme).toContain("--grove-background: oklch(100% 0 0)");
@@ -37,5 +43,18 @@ describe("Astro theme contract", () => {
         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");
+    });
+    it("falls back to initials when a consumer has no matching icon asset", () => {
+        expect(iconMarkup).toContain("data-grove-icon-fallback-initials");
+        expect(iconMarkup).toContain("onerror=");
+    });
 });
 //# sourceMappingURL=theme.test.js.map

package/dist/theme.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.test.js","sourceRoot":"","sources":["../src/theme.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC;AACpF,MAAM,aAAa,GAAG,YAAY,CAChC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,4CAA4C,CAAC,EAC1E,MAAM,CACP,CAAC;AAEF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC5D,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,qCAAqC,CAAC,CAAC;QACpE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACzE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACzE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,yCAAyC,CAAC,CAAC;QACxE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,kCAAkC,CAAC,CAAC;QACjE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,mCAAmC,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,KAAK,MAAM,KAAK,IAAI;YAClB,YAAY;YACZ,YAAY;YACZ,SAAS;YACT,WAAW;YACX,OAAO;YACP,QAAQ;YACR,QAAQ;YACR,MAAM;YACN,SAAS;SACV,EAAE,CAAC;YACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,KAAK,iBAAiB,KAAK,GAAG,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAC1B,qEAAqE,CACtE,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAC1B,qEAAqE,CACtE,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,+BAA+B,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,GAAG,EAAE;QAC5E,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACpD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACpD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"theme.test.js","sourceRoot":"","sources":["../src/theme.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.2.19",
+  "version": "0.3.1",
   "type": "module",
   "description": "Astro framework adapter for Grove. Components, layouts, design tokens, and a default template.",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "./layouts/*": "./src/layouts/*.astro"
   },
   "dependencies": {
-    "@grove-dev/core": "0.2.16",
-    "@grove-dev/ui": "1.0.6",
-    "astro": "^6.4.6"
+    "astro": "^6.4.6",
+    "@grove-dev/core": "0.3.1",
+    "@grove-dev/ui": "1.1.1"
   },
   "peerDependencies": {
     "astro": "^6.0.0"

package/src/components/CategoryGrid.astro

@@ -41,10 +41,10 @@ function buildHref(slug: string): string {
 
 <section
   id="categories"
-  class:list={["grove-section scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
+  class:list={["py-12 sm:py-16 scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
   aria-labelledby={bare ? undefined : "grove-categorygrid-heading"}
 >
-  <div class="grove-container mx-auto px-5 sm:px-7">
+  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
     {!bare && (
       <header class="mb-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
@@ -97,12 +97,3 @@ function buildHref(slug: string): string {
     </div>
   </div>
 </section>
-
-<style>
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/src/components/ContributorsGrid.astro

@@ -56,10 +56,10 @@ const visible = contributors
 ---
 
 <section
-  class:list={["grove-section", className]}
+  class:list={["py-12 sm:py-16", className]}
   aria-labelledby="grove-contributors-heading"
 >
-  <div class="grove-container mx-auto px-5 sm:px-7">
+  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
     <header class="mb-6 flex flex-wrap items-end justify-between gap-3">
       <div>
         <h2
@@ -138,12 +138,3 @@ const visible = contributors
     )}
   </div>
 </section>
-
-<style>
-  .line-clamp-1 {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/src/components/CurationGrid.astro

@@ -26,7 +26,7 @@ const columns = [
     aria-label="Curation notes"
   >
     {columns.map((column) => (
-      <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-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
           {column.title}
         </h3>

package/src/components/DecisionRow.astro

@@ -69,7 +69,7 @@ const cleanup = project?.health?.cleanupCandidate;
   </td>
   <td class="px-3 py-2 text-2xs">
     {cleanup ? (
-      <span class="grove-badge grove-badge-stale">cleanup</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">cleanup</span>
     ) : (
       <span class="text-ink-400">—</span>
     )}

package/src/components/ExploreByCategory.astro

@@ -34,8 +34,8 @@ function buildHref(slug: string): string {
 }
 ---
 
-<section class:list={["grove-section-tight", className]}>
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+<section class:list={["py-10 sm:py-12", className]}>
+  <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
     <header class="mb-3 flex flex-col gap-1">
       <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
         {title}
@@ -51,7 +51,7 @@ function buildHref(slug: string): string {
         <li>
           <a
             href={buildHref(c.slug)}
-            class="grove-badge inline-flex items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
+            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 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
             data-event="explore_category_click"
             data-event-source="explore_category"
           >

package/src/components/ExploreByStack.astro

@@ -40,8 +40,8 @@ function buildHref(slug: string): string {
 }
 ---
 
-<section class:list={["grove-section-tight", className]}>
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+<section class:list={["py-10 sm:py-12", className]}>
+  <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
     <header class="mb-3 flex flex-col gap-1">
       <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
         {title}
@@ -57,7 +57,7 @@ function buildHref(slug: string): string {
         <li>
           <a
             href={buildHref(s.slug)}
-            class="grove-badge inline-flex items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
+            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 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
             data-event="explore_stack_click"
             data-event-source="explore_stack"
           >

package/src/components/FilterGroupMenu.astro

@@ -25,10 +25,10 @@ const group = Astro.props;
   <button
     type="button"
     class:list={[
-      "grove-filter-trigger inline-flex h-9 items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] font-medium transition-colors",
+      "grove-filter-trigger inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-[0.8125rem] font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35",
       group.active
-        ? "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900"
-        : "border-ink-200 bg-white text-ink-700 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/60",
+        ? "bg-primary text-primary-foreground hover:bg-primary/90"
+        : "border-border bg-secondary text-foreground hover:bg-accent",
     ]}
     aria-haspopup="listbox"
     aria-expanded="false"
@@ -39,13 +39,13 @@ const group = Astro.props;
       <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>
   </button>
-  <div id={group.popoverId} class="grove-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] rounded-lg border border-ink-200 bg-white p-1.5 shadow-lg dark:border-ink-800 dark:bg-ink-950" role="listbox" hidden>
+  <div id={group.popoverId} class="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-popover text-popover-foreground shadow-xl grove-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] p-1.5" role="listbox" hidden>
     <FilterOptions filterKey={group.filterKey} options={group.options} initial={group.initial} single={group.single} />
     <div class="mt-1 flex items-center justify-between border-t border-ink-100 px-2 pt-1.5 dark:border-ink-900">
       {group.active && (
         <button type="button" class="grove-filter-clear text-2xs font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100">Clear {group.label.toLowerCase()}</button>
       )}
-      <button type="button" class="grove-filter-apply ml-auto rounded-md bg-ink-900 px-2.5 py-1 text-2xs font-medium text-white dark:bg-ink-100 dark:text-ink-900">Apply</button>
+      <button type="button" class="grove-filter-apply 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 ml-auto px-2.5 text-2xs">Apply</button>
     </div>
   </div>
 </div>

package/src/components/Hero.astro

@@ -214,7 +214,7 @@ const trustStats: { value: string; label: string }[] = [
         </label>
         <a
           href={searchHref}
-          class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          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 h-10"
           aria-label={`Browse all ${itemsLabel} with filters`}
         >
           <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
@@ -224,7 +224,7 @@ const trustStats: { value: string; label: string }[] = [
         </a>
         <button
           type="submit"
-          class="grove-btn grove-btn-primary h-10 px-4 sm:px-5"
+          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"
         >
           Search
         </button>
@@ -256,12 +256,12 @@ const trustStats: { value: string; label: string }[] = [
             <a
               href={cta.href}
               class:list={[
-                "grove-btn",
+                "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"
-                  ? "grove-btn-primary"
+                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
                   : cta.variant === "ghost"
-                    ? "grove-btn-ghost"
-                    : "grove-btn-outline",
+                    ? "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" }
@@ -278,14 +278,14 @@ const trustStats: { value: string; label: string }[] = [
       {/* 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="grove-btn grove-btn-primary">
+          <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>
           <a
             href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
             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"
           >
             Submit via GitHub
           </a>

package/src/components/Icon.astro

@@ -135,69 +135,72 @@ const a11y: Record<string, string> = title
 {
   showFallback ? (
     <span
-      class:list={["grove-icon grove-icon-fallback", className]}
+      class:list={[
+        "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
+        className,
+      ]}
       style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
       {...a11y}
     >
       {init || "·"}
     </span>
   ) : mode === "auto" ? (
-    <img
-      src={staticSrc}
-      data-grove-icon
-      data-grove-icon-light={`${baseUrl}-light.svg`}
-      data-grove-icon-dark={`${baseUrl}-dark.svg`}
-      data-grove-icon-fallback={staticSrc}
-      width={size}
-      height={size}
-      alt=""
-      class:list={["grove-icon grove-icon-themed", className]}
-      {...a11y}
-    />
+    <>
+      <img
+        src={staticSrc}
+        data-grove-icon
+        data-grove-icon-light={`${baseUrl}-light.svg`}
+        data-grove-icon-dark={`${baseUrl}-dark.svg`}
+        data-grove-icon-fallback={staticSrc}
+        width={size}
+        height={size}
+        alt=""
+        class:list={["inline-block shrink-0 align-middle", className]}
+        onerror="this.hidden=true;this.nextElementSibling.hidden=false"
+        {...a11y}
+      />
+      <span
+        hidden
+        data-grove-icon-fallback-initials
+        class:list={[
+          "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
+          className,
+        ]}
+        style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
+        {...a11y}
+      >
+        {init || "·"}
+      </span>
+    </>
   ) : (
-    <img
-      src={staticSrc}
-      width={size}
-      height={size}
-      alt=""
-      class:list={["grove-icon", className]}
-      loading="lazy"
-      decoding="async"
-      {...a11y}
-    />
+    <>
+      <img
+        src={staticSrc}
+        width={size}
+        height={size}
+        alt=""
+        class:list={["inline-block shrink-0 align-middle", className]}
+        loading="lazy"
+        decoding="async"
+        onerror="this.hidden=true;this.nextElementSibling.hidden=false"
+        {...a11y}
+      />
+      <span
+        hidden
+        data-grove-icon-fallback-initials
+        class:list={[
+          "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
+          className,
+        ]}
+        style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
+        {...a11y}
+      >
+        {init || "·"}
+      </span>
+    </>
   )
 }
 
-<style>
-  .grove-icon {
-    display: inline-block;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
-  .grove-icon-themed {
-    /* Theme-aware: dark/light variants selected by the inline script
-       below based on `data-resolved-theme` set by BaseLayout's
-       THEME_INIT. Default to the light variant so the markup looks
-       correct even before the script runs. */
-  }
-  .grove-icon-fallback {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    background: var(--color-ink-100, oklch(97% 0 0));
-    color: var(--color-ink-700, oklch(37.1% 0 0));
-    font-weight: 600;
-    line-height: 1;
-    text-transform: uppercase;
-    user-select: none;
-  }
-  :global(.dark) .grove-icon-fallback {
-    background: var(--color-ink-800, oklch(26.9% 0 0));
-    color: var(--color-ink-200, oklch(92.2% 0 0));
-  }
-</style>
-
 {mode === "auto" && (
   <script is:inline>
     // Theme-aware icon swap. Runs after THEME_INIT (BaseLayout) so

package/src/components/IndexRow.astro

@@ -32,7 +32,7 @@ const status = project?.health?.status;
 const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.length || project.whyListed.length || project.caveats.length)));
 ---
 
-<article class={`group relative flex flex-col gap-3 rounded-lg border border-ink-200 bg-white p-4 transition-colors hover:border-ink-300 hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-700 ${className}`}>
+<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 ? (
@@ -76,13 +76,13 @@ const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.
 
   {showChips && (platforms.length > 0 || stacks.length > 0) && (
     <div class="flex flex-col gap-1.5">
-      <div class="flex flex-wrap gap-1.5">{platforms.slice(0, 4).map((platform) => <span class="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 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"><Icon name={platform} category="platform" size={11} />{platform}</span>)}</div>
-      <div class="flex flex-wrap gap-1.5">{stacks.slice(0, 4).map((stack) => <span class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
+      <div class="flex flex-wrap gap-1.5">{platforms.slice(0, 4).map((platform) => <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"><Icon name={platform} category="platform" size={11} />{platform}</span>)}</div>
+      <div class="flex flex-wrap gap-1.5">{stacks.slice(0, 4).map((stack) => <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-muted !text-muted-foreground"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
     </div>
   )}
 
   <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 items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 font-medium text-ink-700 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">View details →</a>
-    {repoHref && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 font-medium text-ink-700 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">GitHub</a>}
+    <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>

package/src/components/ItemCard.astro

@@ -150,7 +150,7 @@ const category = (item as { category?: string }).category;
 ---
 
 <article
-  class={`card card-hover group relative flex h-full flex-col gap-3 p-4 ${className}`}
+  class={`rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group relative flex h-full flex-col gap-3 p-4 ${className}`}
 >
   {/* Top row: logo + name + (optional) status + curated mark. */}
   <header class="relative z-10 flex items-start gap-3">
@@ -297,26 +297,26 @@ const category = (item as { category?: string }).category;
       {visiblePlatforms.length > 0 && (
         <div class="flex flex-wrap items-center gap-1.5">
           {visiblePlatforms.map((p) => (
-            <span class="chip">
+            <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">
               <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>
+            <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 text-ink-400 dark:text-ink-500">+{platformOverflow}</span>
           )}
         </div>
       )}
       {visibleStacks.length > 0 && (
         <div class="flex flex-wrap items-center gap-1.5">
           {visibleStacks.map((s) => (
-            <span class="chip chip-stack">
+            <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-muted !text-muted-foreground">
               <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>
+            <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-muted !text-muted-foreground text-ink-400 dark:text-ink-500">+{stackOverflow}</span>
           )}
         </div>
       )}
@@ -350,14 +350,3 @@ const category = (item as { category?: string }).category;
     </a>
   </footer>
 </article>
-
-<style>
-  @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;
-  }
-  .chip-stack {
-    @apply bg-ink-50 dark:bg-ink-900/60;
-  }
-</style>

package/src/components/MinimalAbout.astro

@@ -45,8 +45,8 @@ const defaultPoints: AboutPoint[] = [
 const items = points && points.length > 0 ? points : defaultPoints;
 ---
 
-<section class:list={["grove-section", className]}>
-  <div class="grove-container-narrow mx-auto px-5 sm:px-7">
+<section class:list={["py-12 sm:py-16", className]}>
+  <div class="mx-auto w-full max-w-narrow px-5 sm:px-7">
     <header class="mb-6 flex flex-col gap-2">
       <h2 class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
         {title}

package/src/components/OriginalCollection.astro

@@ -51,10 +51,10 @@ const hasStats =
   stats.contributors !== undefined;
 ---
 
-<section class:list={["grove-section", className]}>
-  <div class="grove-container mx-auto px-5 sm:px-7">
+<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="grove-card flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
+      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"
     >
       <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 +104,7 @@ const hasStats =
           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"
           data-event="original_collection_click"
           data-event-source="original_collection"
         >