@grove-dev/astro 0.2.18 → 0.2.20

package/src/components/RefinePanel.astro

@@ -104,7 +104,7 @@ const groups: RenderedFilterGroup[] = baseGroups
     {!hide.includes("sort") && (
       <label class="relative">
         <span class="sr-only">Sort items</span>
-        <select name="sort" class="h-9 cursor-pointer appearance-none rounded-md border border-ink-200 bg-white py-1.5 pl-3 pr-8 text-[0.8125rem] font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">
+        <select name="sort" class="h-9 cursor-pointer appearance-none border py-1.5 pl-3 pr-8 text-[0.8125rem] font-medium">
           {SORT_OPTIONS.map((option) => <option value={option.value} selected={(initial.sort ?? "recently-updated") === option.value}>{option.label}</option>)}
         </select>
         <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-400" fill="currentColor">

package/src/components/SmartLensTabs.astro

@@ -55,10 +55,10 @@ const lenses =
       <a
         href={hrefForLens(lens.id, currentParams, pathPrefix)}
         class:list={[
-          "grove-btn rounded-md px-3 py-1.5 text-2xs font-medium transition-colors",
+          "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-2xs font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35",
           active
-            ? "grove-btn-primary"
-            : "grove-btn-ghost border border-ink-200 dark:border-ink-800",
+            ? "bg-primary text-primary-foreground hover:bg-primary/90"
+            : "border-border bg-secondary text-foreground hover:bg-accent",
         ]}
         aria-current={active ? "page" : undefined}
         data-event="lens_tab_click"

package/src/components/StackGrid.astro

@@ -64,10 +64,10 @@ function statusLabel(s: StackEntry["status"]): string | null {
 
 <section
   id="stacks"
-  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-stackgrid-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">
@@ -89,7 +89,7 @@ function statusLabel(s: StackEntry["status"]): string | null {
       {stacks.map((s) => (
         <a
           href={buildHref(s.slug)}
-          class="card card-hover group flex h-full items-center gap-3 p-3.5 no-underline"
+          class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group flex h-full items-center gap-3 p-3.5 no-underline"
           data-event="stack_grid_click"
           data-event-source="stack_grid"
         >
@@ -115,10 +115,10 @@ function statusLabel(s: StackEntry["status"]): string | null {
               class:list={[
                 "shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider",
                 s.status === "live"
-                  ? "grove-badge-new"
+                  ? "!bg-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300"
                   : s.status === "expanding"
-                    ? "grove-badge-mature"
-                    : "grove-badge-stale",
+                    ? "!bg-blue-50 !text-blue-700 dark:!bg-blue-950/80 dark:!text-blue-300"
+                    : "!bg-amber-50 !text-amber-800 dark:!bg-amber-950/80 dark:!text-amber-300",
               ]}
             >
               {statusLabel(s.status)}
@@ -129,12 +129,3 @@ function statusLabel(s: StackEntry["status"]): string | null {
     </div>
   </div>
 </section>
-
-<style>
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/src/components/WhyThisExists.astro

@@ -56,10 +56,10 @@ const items = points && points.length > 0 ? points : defaultPoints;
 
 <section
   id="about"
-  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="grove-why-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="flex flex-col gap-2">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         {eyebrow}
@@ -82,7 +82,7 @@ const items = points && points.length > 0 ? points : defaultPoints;
       aria-label="Why this directory"
     >
       {items.map((p) => (
-        <li class="grove-card p-4">
+        <li class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-4">
           <div
             aria-hidden="true"
             class="mb-3 flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"

package/src/index.ts

@@ -16,7 +16,15 @@
  *  - Re-exports the generic `lib/` helpers (search, lenses, scores,
  *    repo, format, display, taxonomy-counts) under a single import
  *    path so consumers can `import { ... } from "@grove-dev/astro"`.
+ *
+ * Also auto-loads the consumer's `src/styles/global.css` when it
+ * exists. Without this hook the scaffold's global.css (which the
+ * CLI generates for theme overrides) sits on disk unused, and any
+ * custom theme tokens silently degrade to the package defaults —
+ * which is the classic "I changed the brand color in global.css
+ * and nothing happened" surprise.
  */
+import { existsSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 import type { AstroIntegration } from "astro";
@@ -38,16 +46,27 @@ const srcRoot = resolve(here, "..", "src");
 const componentsDir = resolve(srcRoot, "components");
 const layoutsDir = resolve(srcRoot, "layouts");
 
+// Virtual module id used to inject the consumer's `src/styles/global.css`.
+// Resolved by the inline Vite plugin below to the absolute file path
+// when the file exists, or to an empty module when it doesn't.
+const CONSUMER_GLOBAL_CSS_VIRTUAL_ID = "virtual:grove-consumer-global-css";
+const CONSUMER_GLOBAL_CSS_EMPTY_ID =
+  "\0virtual:grove-consumer-global-css:empty";
+
 export default function groveAstro(): AstroIntegration {
   return {
     name: "@grove-dev/astro",
     hooks: {
-      "astro:config:setup": ({ updateConfig }) => {
+      "astro:config:setup": ({ config, updateConfig, injectScript }) => {
         // Alias the components/layouts source directories so
         // consumer builds can import from
         //   @grove-dev/astro/components/ItemCard.astro
         // without us shipping a glob-shaped `exports` map that
         // Vite/Rollup does not expand reliably.
+        const consumerRoot = fileURLToPath(config.root);
+        const globalCssPath = resolve(consumerRoot, "src/styles/global.css");
+        const globalCssExists = existsSync(globalCssPath);
+
         updateConfig({
           vite: {
             resolve: {
@@ -56,9 +75,41 @@ export default function groveAstro(): AstroIntegration {
                 "@grove-dev/astro/layouts": layoutsDir,
               },
             },
+            plugins: [
+              {
+                name: "grove:consumer-global-css-resolver",
+                resolveId(id) {
+                  if (id === CONSUMER_GLOBAL_CSS_VIRTUAL_ID) {
+                    return globalCssExists
+                      ? globalCssPath
+                      : CONSUMER_GLOBAL_CSS_EMPTY_ID;
+                  }
+                  return null;
+                },
+                load(id) {
+                  if (id === CONSUMER_GLOBAL_CSS_EMPTY_ID) {
+                    return "";
+                  }
+                  return null;
+                },
+              },
+            ],
           },
         });
+
+        // Always inject the virtual module so the build is symmetric
+        // regardless of whether the consumer has a global.css yet.
+        // Vite's CSS pipeline (with @tailwindcss/vite) handles the
+        // resulting import as a stylesheet — no JS bundle weight.
+        injectScript(
+          "page-ssr",
+          `import "${CONSUMER_GLOBAL_CSS_VIRTUAL_ID}";`,
+        );
       },
     },
   };
 }
+
+// Re-export the virtual module id so consumers (and tests) can
+// reason about it without copy-pasting the literal string.
+export const CONSUMER_GLOBAL_CSS_ID = CONSUMER_GLOBAL_CSS_VIRTUAL_ID;

package/src/layouts/BaseLayout.astro

@@ -186,7 +186,7 @@ const favicon =
       })();
     </script>
   </head>
-  <body class="min-h-screen bg-white text-ink-900 dark:bg-ink-950 dark:text-ink-100">
+  <body class="min-h-screen bg-background text-foreground">
     <slot name="header">
       <Header
         site={site}

package/src/layouts/Container.astro

@@ -7,12 +7,12 @@ interface Props {
 const { size = "default", class: className = "" } = Astro.props;
 const sizeClass =
   size === "wide"
-    ? "grove-container-wide max-w-wide"
+    ? "mx-auto w-full max-w-wide"
     : size === "narrow"
-      ? "grove-container-narrow max-w-narrow"
-      : "grove-container max-w-container";
+      ? "mx-auto w-full max-w-narrow"
+      : "mx-auto w-full max-w-container";
 ---
 
-<div class={`${sizeClass} mx-auto px-5 sm:px-7 ${className}`}>
+<div class={`${sizeClass} px-5 sm:px-7 ${className}`}>
   <slot />
 </div>

package/src/layouts/Footer.astro

@@ -104,12 +104,12 @@ const projectItems = project.items.length ? project.items : defaultProject;
 
 <footer
   class:list={[
-    "mt-16 border-t border-ink-200 bg-white text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-400",
+    "border-border bg-background mt-16 border-t text-ink-500 dark:text-ink-400",
     className,
   ]}
 >
   <div
-    class="grove-container-wide mx-auto grid max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
+    class="mx-auto grid w-full max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
   >
     <div class="col-span-2 md:col-span-1">
       <div
@@ -225,7 +225,7 @@ const projectItems = project.items.length ? project.items : defaultProject;
 
   <div class="border-t border-ink-200 dark:border-ink-800">
     <div
-      class="grove-container-wide mx-auto flex max-w-wide flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
+      class="mx-auto flex w-full max-w-wide flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
     >
       <span>© {year} {holder}{licenseLine ? `. ${licenseLine}` : "."}</span>
       {gh && (

package/src/layouts/Header.astro

@@ -73,12 +73,12 @@ const starsLabel =
 
 <header
   class:list={[
-    "sticky top-0 z-50 border-b border-ink-200 bg-white/85 backdrop-blur dark:border-ink-800 dark:bg-ink-950/85",
+    "border-border bg-background/85 sticky top-0 z-50 border-b backdrop-blur",
     className,
   ]}
 >
   <div
-    class="grove-container-wide mx-auto flex max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
+    class="mx-auto flex w-full max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
   >
     <a
       href="/"
@@ -110,7 +110,7 @@ const starsLabel =
       {submitHref && (
         <a
           href={submitHref}
-          class="hidden h-9 items-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 sm:inline-flex 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 hidden sm:inline-flex"
         >
           <svg
             viewBox="0 0 16 16"
@@ -132,7 +132,7 @@ const starsLabel =
           rel="noopener noreferrer"
           aria-label={`${repoLabel} on GitHub — ${stars} stars`}
           title={`${repoLabel} on GitHub`}
-          class="inline-flex h-9 items-center divide-x divide-ink-200 overflow-hidden rounded-md border border-ink-200 text-[0.875rem] font-medium transition-colors hover:border-ink-300 hover:bg-ink-50 dark:divide-ink-800 dark:border-ink-800 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 overflow-hidden rounded-[var(--radius)] border border-border bg-secondary p-0 text-sm font-medium leading-none text-foreground no-underline outline-none transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35"
         >
           <span class="flex items-center gap-1.5 px-2.5 py-1.5 text-ink-900 dark:text-ink-100">
             <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
@@ -140,7 +140,7 @@ const starsLabel =
             </svg>
             <span>{repoLabel}</span>
           </span>
-          <span class="flex items-center gap-1 bg-ink-50 px-2 py-1.5 text-ink-700 dark:bg-ink-900/60 dark:text-ink-300">
+          <span class="flex items-center gap-1 border-s border-border bg-secondary px-2 py-1.5 text-secondary-foreground">
             <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"></path>
             </svg>

package/src/layouts/ThemeToggle.astro

@@ -24,7 +24,7 @@ const { class: className = "" } = Astro.props;
   data-theme-toggle
   aria-label="Toggle theme"
   title="Toggle theme"
-  class={`relative inline-flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200 dark:hover:border-ink-700 dark:hover:bg-ink-900/40 ${className}`}
+  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 relative h-8 w-8 p-0 ${className}`}
 >
   {/* Sun — shown in dark mode (click to go light) */}
   <svg