@grove-dev/astro 0.3.1 → 0.3.4

package/src/components/SubmissionClient.astro

@@ -0,0 +1,133 @@
+---
+interface Props {
+  existingSlugs: string[];
+  existingFullNames: string[];
+  repoUrl: string;
+  fields: { category: boolean; stack: boolean; platforms: boolean; tags: boolean };
+}
+const { existingSlugs, existingFullNames, repoUrl, fields } = Astro.props;
+---
+
+<script is:inline define:vars={{ existingSlugs, existingFullNames, repoUrl, fields }}>
+    // @ts-nocheck
+    const $ = (selector) => document.querySelector(selector);
+    const inputs = {
+      repo: $("#repo-url"), name: $("#item-name"), slug: $("#item-slug"),
+      description: $("#item-description"), category: $("#item-category"),
+      stack: $("#primary-stack"), tags: $("#item-tags"),
+      website: $("#item-website"), bestFor: $("#best-for"),
+    };
+    const fetchButton = $("#fetch-repo");
+    const preview = $("#yaml-preview");
+    const status = $("#submit-status");
+    const copyButton = $("#copy-yaml");
+    const openPrLink = $("#open-pr-link");
+    const slugSet = new Set(existingSlugs);
+    const repoSet = new Set(existingFullNames);
+    let repository = null;
+
+    const slugify = (value) => String(value || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    const parseRepo = (value) => {
+      const match = String(value).match(/github\.com\/([^/]+)\/([^/?#]+)/);
+      return match ? { owner: match[1], repo: match[2].replace(/\.git$/, "") } : null;
+    };
+    const quote = (value) => `"${String(value ?? "").replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+    const lines = (values, indent = 2) => values.map((value) => `${" ".repeat(indent)}- ${value}`).join("\n");
+    const selectedPlatforms = () => [...document.querySelectorAll("input[name=platform]:checked")].map((input) => input.value);
+    const setStatus = (text, tone = "muted") => {
+      status.textContent = text;
+      status.className = `mt-3 min-h-5 text-2xs ${tone === "error" ? "text-red-600 dark:text-red-400" : tone === "warn" ? "text-amber-700 dark:text-amber-400" : tone === "success" ? "text-emerald-700 dark:text-emerald-400" : "text-ink-500 dark:text-ink-400"}`;
+    };
+    const inferStack = (repo) => {
+      const language = String(repo.language || "").toLowerCase();
+      const topics = (repo.topics || []).map((topic) => String(topic).toLowerCase());
+      if (topics.includes("flutter") || language === "dart") return "flutter";
+      if (topics.includes("react-native")) return "react-native";
+      if (language === "swift" || language === "objective-c") return "ios";
+      if (language === "kotlin" || language === "java") return "android";
+      return language;
+    };
+    const generateYaml = () => {
+      if (!repository) return "";
+      const parsed = parseRepo(inputs.repo.value);
+      if (!parsed) return "";
+      const tags = String(inputs.tags?.value || "").split(",").map((tag) => tag.trim()).filter(Boolean);
+      const platforms = selectedPlatforms();
+      const bestFor = inputs.bestFor.value.split("\n").map((item) => item.trim()).filter(Boolean);
+      return [
+        "kind: project",
+        `slug: ${slugify(inputs.slug.value || repository.name)}`,
+        `name: ${quote(inputs.name.value)}`,
+        `description: ${quote(inputs.description.value)}`,
+        ...(fields.category ? [`category: ${inputs.category?.value || "uncategorized"}`] : []),
+        "projectType: real-app",
+        ...(fields.stack && inputs.stack?.value ? [`stack: ${quote(inputs.stack.value)}`] : []),
+        ...(fields.platforms ? ["platforms:", platforms.length ? lines(platforms) : "  []"] : []),
+        ...(fields.tags ? ["tags:", tags.length ? lines(tags) : "  []"] : []),
+        `repoUrl: ${repository.html_url}`,
+        "links:",
+        `  github: ${repository.html_url}`,
+        ...(inputs.website.value ? [`  website: ${inputs.website.value}`] : []),
+        "bestFor:", bestFor.length ? lines(bestFor) : "  []",
+        "source:",
+        "  type: manual",
+        `  owner: ${parsed.owner}`,
+        `  repo: ${parsed.repo}`,
+        "curation:",
+        "  reviewed: false",
+        "  labels: []",
+        "  lenses: []",
+        "",
+      ].join("\n");
+    };
+    const refresh = () => {
+      const yaml = generateYaml();
+      preview.textContent = yaml || "Paste a GitHub URL to generate a draft.";
+      if (!yaml) return;
+      const params = new URLSearchParams({ filename: `data/records/${slugify(inputs.slug.value)}.yml`, value: yaml });
+      openPrLink.href = `${repoUrl}/new/main?${params}`;
+      openPrLink.classList.remove("pointer-events-none", "opacity-50");
+      copyButton.disabled = false;
+      copyButton.classList.remove("pointer-events-none", "opacity-50");
+    };
+
+    fetchButton.addEventListener("click", async () => {
+      const parsed = parseRepo(inputs.repo.value);
+      if (!parsed) return setStatus("Enter a valid GitHub repository URL.", "error");
+      const fullName = `${parsed.owner}/${parsed.repo}`.toLowerCase();
+      if (repoSet.has(fullName)) setStatus("This repository is already listed. The draft can update its record.", "warn");
+      fetchButton.disabled = true;
+      setStatus("Fetching GitHub metadata...");
+      try {
+        const response = await fetch(`https://api.github.com/repos/${parsed.owner}/${parsed.repo}`, { headers: { Accept: "application/vnd.github+json" } });
+        if (response.status === 404) throw new Error("Repository not found or not public.");
+        if (response.status === 403) throw new Error("GitHub rate limit reached. Try again shortly.");
+        if (!response.ok) throw new Error(`GitHub returned ${response.status}.`);
+        repository = await response.json();
+        if (repository.private) throw new Error("Private repositories cannot be submitted.");
+        inputs.name.value = repository.name || parsed.repo;
+        inputs.slug.value = slugify(repository.name || parsed.repo);
+        inputs.description.value = repository.description || "";
+        if (inputs.stack) inputs.stack.value = inferStack(repository);
+        if (inputs.tags) inputs.tags.value = (repository.topics || []).slice(0, 8).join(", ");
+        inputs.website.value = repository.homepage || "";
+        const duplicate = slugSet.has(inputs.slug.value);
+        setStatus(duplicate ? "That slug already exists. Choose another or update the existing record." : "Draft generated. Edit any field and the YAML will refresh.", duplicate ? "warn" : "success");
+        refresh();
+      } catch (error) {
+        repository = null;
+        setStatus(error.message || "Unable to fetch repository metadata.", "error");
+      } finally {
+        fetchButton.disabled = false;
+      }
+    });
+    $("#submit-form").addEventListener("input", refresh);
+    copyButton.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(preview.textContent || "");
+        setStatus("Copied YAML to clipboard.", "success");
+      } catch {
+        setStatus("Couldn't copy automatically. Select the YAML and copy it.", "error");
+      }
+    });
+  </script>

package/src/index.ts

@@ -28,6 +28,7 @@ import { existsSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 import type { AstroIntegration } from "astro";
+import { loadConfig, prepareDirectory } from "@grove-dev/core";
 
 export * from "@grove-dev/core";
 
@@ -57,13 +58,21 @@ export default function groveAstro(): AstroIntegration {
   return {
     name: "@grove-dev/astro",
     hooks: {
-      "astro:config:setup": ({ config, updateConfig, injectScript }) => {
+      "astro:config:setup": async ({ 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 groveConfigPath = resolve(consumerRoot, "grove.config.ts");
+        if (existsSync(groveConfigPath)) {
+          await prepareDirectory(consumerRoot);
+          // Preparation is the integration's only site-level side effect.
+          // Routes belong to the consumer's `src/pages`, where they remain
+          // visible, editable, and safe from future Grove syncs.
+          await loadConfig(consumerRoot);
+        }
         const globalCssPath = resolve(consumerRoot, "src/styles/global.css");
         const globalCssExists = existsSync(globalCssPath);
 
@@ -73,6 +82,7 @@ export default function groveAstro(): AstroIntegration {
               alias: {
                 "@grove-dev/astro/components": componentsDir,
                 "@grove-dev/astro/layouts": layoutsDir,
+                "@grove/generated": resolve(consumerRoot, "data/generated"),
               },
             },
             plugins: [

package/src/layouts/BaseLayout.astro

@@ -11,8 +11,8 @@
  * own config (typically `data/generated/site-config.json` for the
  * showcase).
  *
- * Optional `gaId` adds a GA4 measurement snippet. Omit for
- * privacy-first deployments.
+ * GA4 can be configured once through `site.analytics.googleAnalyticsId`
+ * or overridden per page with `gaId`. Omit both for privacy-first deployments.
  */
 import "../styles.css";
 import Header from "./Header.astro";
@@ -30,6 +30,9 @@ interface SiteStats {
   totalStacks?: number;
   totalOwners?: number;
   totalStars?: number;
+  repositoryStars?: number;
+  repositoryForks?: number;
+  repositoryContributors?: number;
   originalRepo?: string;
   originalStars?: number;
   originalForks?: number;
@@ -41,8 +44,26 @@ interface Site {
   tagline?: string;
   description?: string;
   nav: NavItem[];
+  footer?: {
+    columns?: Array<{
+      heading: string;
+      items: Array<{ label: string; href: string; external?: boolean }>;
+    }>;
+    copyright?: string;
+    license?: string;
+  };
+  submission?: {
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    good?: string[];
+    avoid?: string[];
+  };
   repoUrl?: string;
   url?: string;
+  analytics?: {
+    googleAnalyticsId?: string;
+  };
   /** Optional directory-level stats — populated from site-config.json
    * at generate time. Components use it to render hero counts,
    * origin card stats, and footer summary lines. */
@@ -85,6 +106,7 @@ const {
 } = Astro.props;
 const directoryPath =
   searchPath ?? `/${site.blueprintConfig?.routeSlug ?? "items"}`;
+const effectiveGaId = gaId ?? site.analytics?.googleAnalyticsId;
 
 const favicon =
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%2318181b'/%3E%3C/svg%3E";
@@ -112,14 +134,14 @@ const favicon =
       title="LLM usage guidance"
     />
 
-    {gaId && (
+    {effectiveGaId && (
       <>
         <script
           is:inline
           async
-          src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+          src={`https://www.googletagmanager.com/gtag/js?id=${effectiveGaId}`}
         />
-        <script is:inline define:vars={{ gaId }}>
+        <script is:inline define:vars={{ gaId: effectiveGaId }}>
           window.dataLayer = window.dataLayer || [];
           function gtag() {
             dataLayer.push(arguments);
@@ -215,7 +237,7 @@ const favicon =
             ...(site.stats?.totalApps
               ? [{ label: "Browse all", href: directoryPath }]
               : []),
-            { label: "Contributors", href: "/contributors" },
+            { label: "Community", href: "/contributors" },
             ...(site.stats?.originalRepo
               ? [{ label: "View on GitHub", href: site.stats.originalRepo, external: true }]
               : []),
@@ -272,8 +294,8 @@ const favicon =
 
     <slot name="body-end" />
 
-    {gaId && (
-      <script is:inline define:vars={{ gaId }}>
+    {effectiveGaId && (
+      <script is:inline define:vars={{ gaId: effectiveGaId }}>
         (function () {
           // GA4's `gtag('config', id)` call in the <head> already auto-pings
           // `page_view` on full navigations, so this block only needs to

package/src/layouts/Footer.astro

@@ -30,6 +30,11 @@ interface Site {
   tagline?: string;
   description?: string;
   repoUrl?: string;
+  footer?: {
+    columns?: FooterColumn[];
+    copyright?: string;
+    license?: string;
+  };
   stats?: {
     totalApps?: number;
     totalCategories?: number;
@@ -74,8 +79,9 @@ const {
 } = Astro.props;
 
 const year = new Date().getFullYear();
-const holder = copyrightHolder ?? site.name;
+const holder = copyrightHolder ?? site.footer?.copyright ?? site.name;
 const gh = site.repoUrl;
+const showOwners = (stats?.totalOwners ?? 0) > 0;
 
 const defaultDiscover: NavItem[] = gh
   ? [
@@ -100,6 +106,15 @@ const defaultProject: NavItem[] = gh
 const discoverItems = discover.items.length ? discover.items : defaultDiscover;
 const contributeItems = contribute.items.length ? contribute.items : defaultContribute;
 const projectItems = project.items.length ? project.items : defaultProject;
+const configuredColumns = site.footer?.columns ?? [];
+const columns = configuredColumns.length
+  ? configuredColumns
+  : [
+      { heading: discover.heading, items: discoverItems },
+      { heading: contribute.heading, items: contributeItems },
+      { heading: project.heading, items: projectItems },
+    ].filter((column) => column.items.length > 0);
+const resolvedLicenseLine = licenseLine ?? site.footer?.license;
 ---
 
 <footer
@@ -133,7 +148,7 @@ const projectItems = project.items.length ? project.items : defaultProject;
               <span class="font-mono">{stats.totalApps}</span> {itemsLabel}
             </>
           )}
-          {stats.totalApps !== undefined && (stats.totalCategories !== undefined || stats.totalOwners !== undefined) && (
+          {stats.totalApps !== undefined && (stats.totalCategories !== undefined || showOwners) && (
             <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
           )}
           {stats.totalCategories !== undefined && (
@@ -141,71 +156,25 @@ const projectItems = project.items.length ? project.items : defaultProject;
               <span class="font-mono">{stats.totalCategories}</span> categories
             </>
           )}
-          {stats.totalCategories !== undefined && stats.totalOwners !== undefined && (
+          {stats.totalCategories !== undefined && showOwners && (
             <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
           )}
-          {stats.totalOwners !== undefined && (
+          {showOwners && (
             <>
-              <span class="font-mono">{stats.totalOwners}</span> contributors
+              <span class="font-mono">{stats.totalOwners}</span> project owners
             </>
           )}
         </p>
       )}
     </div>
 
-    {discoverItems.length > 0 && (
-      <div>
-        <h4 class="mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-900 dark:text-ink-100">
-          {discover.heading}
-        </h4>
-        <ul class="m-0 flex list-none flex-col gap-2 p-0">
-          {discoverItems.map((item) => (
-            <li>
-              <a
-                href={item.href}
-                class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
-                {...(item.external
-                  ? { target: "_blank", rel: "noopener noreferrer" }
-                  : {})}
-              >
-                {item.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    )}
-
-    {contributeItems.length > 0 && (
-      <div>
-        <h4 class="mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-900 dark:text-ink-100">
-          {contribute.heading}
-        </h4>
-        <ul class="m-0 flex list-none flex-col gap-2 p-0">
-          {contributeItems.map((item) => (
-            <li>
-              <a
-                href={item.href}
-                class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
-                {...(item.external
-                  ? { target: "_blank", rel: "noopener noreferrer" }
-                  : {})}
-              >
-                {item.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    )}
-
-    {projectItems.length > 0 && (
+    {columns.map((column) => (
       <div>
         <h4 class="mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-900 dark:text-ink-100">
-          {project.heading}
+          {column.heading}
         </h4>
         <ul class="m-0 flex list-none flex-col gap-2 p-0">
-          {projectItems.map((item) => (
+          {column.items.map((item) => (
             <li>
               <a
                 href={item.href}
@@ -220,14 +189,14 @@ const projectItems = project.items.length ? project.items : defaultProject;
           ))}
         </ul>
       </div>
-    )}
+    ))}
   </div>
 
   <div class="border-t border-ink-200 dark:border-ink-800">
     <div
       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>
+      <span>© {year} {holder}{resolvedLicenseLine ? `. ${resolvedLicenseLine}` : "."}</span>
       {gh && (
         <>
           <span class="text-ink-300 dark:text-ink-700">·</span>

package/src/layouts/Header.astro

@@ -28,7 +28,8 @@ interface Site {
   repoUrl?: string;
   url?: string;
   stats?: {
-    totalStars?: number;
+    /** Stars on this site's own source repository. */
+    repositoryStars?: number;
   };
   blueprintConfig?: {
     routeSlug?: string;
@@ -55,20 +56,21 @@ const {
   class: className = "",
 } = Astro.props;
 const directoryPath = `/${site.blueprintConfig?.routeSlug ?? "items"}`;
-const navItems = site.blueprintConfig
+const defaultNavItems = site.blueprintConfig
   ? [
-      { label: "Recently added", href: `${directoryPath}?label=new` },
+      { label: "Recently added", href: `${directoryPath}?sort=recently-added` },
       { label: "Trending", href: `${directoryPath}?label=hot` },
       { label: "Categories", href: directoryPath },
       { label: "Stacks", href: directoryPath },
       { label: "About", href: "/about" },
     ]
-  : site.nav;
-const stars = site.stats?.totalStars ?? 0;
+  : [];
+const navItems = site.nav?.length ? site.nav : defaultNavItems;
+const stars = site.stats?.repositoryStars;
 const starsLabel =
-  stars >= 1000
+  typeof stars === "number" && stars >= 1000
     ? `${(stars / 1000).toFixed(stars >= 10000 ? 0 : 1)}k`
-    : String(stars);
+    : typeof stars === "number" ? String(stars) : null;
 ---
 
 <header
@@ -78,17 +80,17 @@ const starsLabel =
   ]}
 >
   <div
-    class="mx-auto flex w-full 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-3 px-5 py-3 sm:gap-6 sm:px-7"
   >
     <a
       href="/"
-      class="inline-flex items-center gap-2 text-[0.95rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+      class="inline-flex min-w-0 shrink items-center gap-2 text-[0.95rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
     >
       <span
         aria-hidden="true"
         class="inline-block h-[18px] w-[18px] rounded bg-ink-900 dark:bg-ink-100"
       ></span>
-      <span>{site.name}</span>
+      <span class="truncate">{site.name}</span>
     </a>
 
     <nav class="hidden flex-1 md:block" aria-label="Primary">
@@ -107,10 +109,26 @@ const starsLabel =
     </nav>
 
     <div class="ml-auto flex items-center gap-2">
+      <details class="group relative md:hidden">
+        <summary class="inline-flex h-9 cursor-pointer list-none items-center justify-center rounded-[var(--radius)] border border-border bg-secondary px-2.5 text-sm font-medium text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/35">
+          Menu
+        </summary>
+        <nav aria-label="Mobile primary" class="absolute right-0 top-[calc(100%+0.5rem)] z-50 w-56 rounded-[var(--radius)] border border-border bg-background p-2 shadow-lg">
+          <ul class="m-0 flex list-none flex-col gap-1 p-0">
+            {navItems.map((item) => (
+              <li><a href={item.href} class="block rounded-md px-3 py-2 text-sm font-medium text-foreground no-underline hover:bg-accent">{item.label}</a></li>
+            ))}
+            {submitHref && (
+              <li class="border-t border-border pt-1"><a href={submitHref} class="block rounded-md px-3 py-2 text-sm font-medium text-foreground no-underline hover:bg-accent">{submitLabel ?? "Submit"}</a></li>
+            )}
+          </ul>
+        </nav>
+      </details>
+
       {submitHref && (
         <a
           href={submitHref}
-          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"
+          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 max-sm:!hidden"
         >
           <svg
             viewBox="0 0 16 16"
@@ -130,7 +148,7 @@ const starsLabel =
           href={site.repoUrl}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label={`${repoLabel} on GitHub — ${stars} stars`}
+          aria-label={`${repoLabel} on GitHub${starsLabel ? ` — ${stars} stars` : ""}`}
           title={`${repoLabel} on GitHub`}
           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"
         >
@@ -138,14 +156,14 @@ const starsLabel =
             <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
               <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z"></path>
             </svg>
-            <span>{repoLabel}</span>
+            <span class="hidden lg:inline">{repoLabel}</span>
           </span>
-          <span class="flex items-center gap-1 border-s border-border bg-secondary px-2 py-1.5 text-secondary-foreground">
+          {starsLabel && <span class="hidden items-center gap-1 border-s border-border bg-secondary px-2 py-1.5 text-secondary-foreground sm:flex">
             <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>
             <span class="font-mono">{starsLabel}</span>
-          </span>
+          </span>}
         </a>
       )}
 

package/src/layouts/ThemeToggle.astro

@@ -24,11 +24,13 @@ const { class: className = "" } = Astro.props;
   data-theme-toggle
   aria-label="Toggle theme"
   title="Toggle theme"
-  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}`}
+  class={`inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius)] border border-border bg-secondary p-0 text-foreground outline-none transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 ${className}`}
 >
   {/* Sun — shown in dark mode (click to go light) */}
   <svg
-    class="h-4 w-4 hidden dark:block"
+    width="18"
+    height="18"
+    class="hidden shrink-0 dark:block"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -42,7 +44,9 @@ const { class: className = "" } = Astro.props;
   </svg>
   {/* Moon — shown in light mode (click to go dark) */}
   <svg
-    class="h-4 w-4 block dark:hidden"
+    width="18"
+    height="18"
+    class="block shrink-0 dark:hidden"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"

package/src/lib/display.ts

@@ -1,111 +1 @@
-/**
- * Display-name helpers for curation labels, statuses, lenses, and sort
- * options. Internal ids (e.g. "hot", "stale", "production-like") stay
- * stable for URL state and data files; this module owns the mapping
- * from id → user-facing string.
- *
- * Every export here is dependency-free so it can be imported by both
- * server-rendered Astro components and any client-side script.
- */
-
-// ── Label ids (the `labels` array on an item) ────────────────────────
-export type LabelId = "new" | "hot" | "mature" | "featured";
-
-export const LABEL_DISPLAY: Record<LabelId, string> = {
-  new: "Recently added",
-  hot: "Trending",
-  mature: "Established",
-  featured: "Featured",
-};
-
-/** Returns a human-readable name for a label id, or null if unknown. */
-export function labelDisplay(id: string | null | undefined): string | null {
-  if (!id) return null;
-  return LABEL_DISPLAY[id as LabelId] ?? null;
-}
-
-// ── Status ids (the `status` field on an item) ───────────────────────
-/**
- * Canonical status ids, including the curated "needs-maintainer"
- * composite that's emitted by the `needs-maintainer` lens (it expands
- * to "stale,quiet" in URL state but presents as one chip).
- */
-export const STATUS_DISPLAY: Record<string, string> = {
-  active: "Active",
-  mature: "Mature",
-  quiet: "Quiet",
-  stale: "Not recently active",
-  inactive: "Inactive",
-  "needs-maintainer": "Needs maintainer",
-  archived: "Archived",
-  historical: "Historical",
-  needs_review: "Needs review",
-  unavailable: "Unavailable",
-  unknown: "Unknown",
-};
-
-export function statusDisplay(s: string | null | undefined): string {
-  if (!s) return STATUS_DISPLAY.unknown ?? "";
-  return STATUS_DISPLAY[s] ?? STATUS_DISPLAY.unknown ?? "";
-}
-
-// ── Lens ids (the curated tabs on /items) ────────────────────────────
-export const LENS_DISPLAY: Record<string, string> = {
-  all: "All items",
-  new: "Recently added",
-  hot: "Trending",
-  mature: "Established",
-  "good-to-learn": "Good to learn",
-  "production-like": "Production-like",
-  "beginner-friendly": "Beginner friendly",
-  "contribution-ready": "Contribution ready",
-  launches: "Launches",
-  "actively-developed": "Active",
-  "needs-maintainer": "Needs maintainer",
-};
-
-export function lensDisplay(id: string | null | undefined): string {
-  if (!id) return LENS_DISPLAY.all ?? "All";
-  return LENS_DISPLAY[id] ?? id;
-}
-
-// ── Sort ids (the /items sort dropdown) ──────────────────────────────
-export const SORT_DISPLAY: Record<string, string> = {
-  "recently-updated": "Recently updated",
-  "most-starred": "Most starred",
-  "recently-added": "Recently added",
-  "best-overall": "Best overall",
-  alphabetical: "Alphabetical",
-};
-
-export function sortDisplay(id: string | null | undefined): string {
-  if (!id) return SORT_DISPLAY["recently-updated"] ?? "";
-  return SORT_DISPLAY[id] ?? id;
-}
-
-export function prettySlug(value: string | null | undefined): string {
-  if (!value) return "";
-  return value
-    .split(/[-_]+/)
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(" ");
-}
-
-// ── Status option list (used by filter dropdowns) ───────────────────
-// "needs-maintainer" is included even though it's a derived/composite
-// status — filter dropdowns and chip rendering need to offer it
-// alongside the raw AppStatus values.
-export const STATUS_OPTIONS: string[] = [
-  "active",
-  "mature",
-  "quiet",
-  "stale",
-  "inactive",
-  "needs-maintainer",
-  "archived",
-  "historical",
-  "needs_review",
-  "unavailable",
-  "unknown",
-];
+export * from "@grove-dev/core";