@grove-dev/astro 0.2.20 → 0.3.2

package/src/components/DirectoryIndexClient.astro

@@ -0,0 +1,240 @@
+---
+interface Props {
+  clientItemsJson: string;
+  slug: string;
+  singular: string;
+  plural: string;
+  taxonomy: Record<string, unknown>;
+}
+
+const { clientItemsJson, slug, singular, plural, taxonomy } = Astro.props;
+const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).replace(/</g, "\\u003c");
+---
+
+<script is:inline id="grove-index-data" type="application/json" set:html={clientItemsJson}></script>
+<script is:inline id="grove-index-config" type="application/json" set:html={clientConfigJson}></script>
+<script>
+  import {
+    LENSES,
+    PAGE_SIZE,
+    activeFilterChips,
+    applySort,
+    effectivePage,
+    effectiveSort,
+    filterRecords,
+    filtersFromSearchParams,
+    hrefForLens,
+    isLensActive,
+    removeFilter,
+    searchParamsFromFilters,
+    sortDisplay,
+    totalPages,
+  } from "@grove-dev/core/directory";
+
+  (() => {
+      const source = document.querySelector("#grove-index-data");
+      const configSource = document.querySelector("#grove-index-config");
+      const list = document.querySelector("#results-list");
+      if (!source || !configSource || !list) return;
+
+      const items = JSON.parse(source.textContent || "[]");
+      const { slug, singular, plural, taxonomy } = JSON.parse(configSource.textContent || "{}");
+      const nodes = new Map(
+        [...list.querySelectorAll("[data-record-slug]")].map((node) => [
+          (node as HTMLElement).dataset.recordSlug,
+          node,
+        ]),
+      );
+      const params = new URLSearchParams(location.search);
+      const values = (key) => params.getAll(key).filter(Boolean);
+      const stacks = values("stack");
+      const platforms = values("platform");
+      const categories = values("category");
+      const filters = filtersFromSearchParams(params);
+      const sort = effectiveSort(filters);
+      const requestedPage = effectivePage(filters);
+
+      function applyClientFilters() {
+        const filtered = applySort(filterRecords(items, filters), sort);
+        const pageCount = totalPages(filtered.length);
+        const page = Math.min(requestedPage, pageCount);
+        const visible = new Set(
+          filtered
+            .slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+            .map((record) => record.slug),
+        );
+
+        for (const record of filtered) {
+          const node = nodes.get(record.slug) as HTMLElement | undefined;
+          if (node) list.append(node);
+        }
+        for (const [recordSlug, node] of nodes) {
+          (node as HTMLElement).hidden = !visible.has(recordSlug);
+        }
+
+        const count = document.querySelector("#results-count");
+        const pageLabel = document.querySelector("#results-page");
+        const empty = document.querySelector("#empty-state");
+        if (count) count.textContent = `${filtered.length} ${filtered.length === 1 ? singular : plural}`;
+        const sortLabel = document.querySelector("#results-sort");
+        if (sortLabel) sortLabel.textContent = ` · sorted by ${sortDisplay(sort)}`;
+        if (pageLabel) pageLabel.textContent = pageCount > 1 ? ` · page ${page} of ${pageCount}` : "";
+        if (empty) empty.classList.toggle("hidden", filtered.length > 0);
+
+        const pagination = document.querySelector("#results-pagination");
+        if (pagination) {
+          pagination.innerHTML = "";
+          if (pageCount > 1) {
+            for (let target = 1; target <= pageCount; target += 1) {
+              const next = searchParamsFromFilters({ ...filters, page: target });
+              const link = document.createElement("a");
+              link.href = `/${slug}${next.size ? `?${next}` : ""}`;
+              link.textContent = String(target);
+              link.setAttribute("aria-label", `Page ${target}`);
+              if (target === page) link.setAttribute("aria-current", "page");
+              link.className = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border px-2 text-sm";
+              pagination.append(link);
+            }
+          }
+        }
+      }
+
+      const searchInput = document.querySelector("#search-input");
+      if (searchInput instanceof HTMLInputElement) searchInput.value = filters.q || "";
+      document.querySelectorAll('select[name="sort"]').forEach((select) => {
+        if (select instanceof HTMLSelectElement) select.value = sort;
+      });
+
+      document.querySelector("#search-form")?.addEventListener("submit", (event) => {
+        event.preventDefault();
+        const next = new URLSearchParams(params);
+        const query = searchInput instanceof HTMLInputElement ? searchInput.value.trim() : "";
+        if (query) next.set("q", query);
+        else next.delete("q");
+        next.set("sort", sort);
+        next.delete("page");
+        location.assign(`/${slug}${next.size ? `?${next}` : ""}`);
+      });
+      const filterKeys = {
+        stacks: "stack",
+        platforms: "platform",
+        categories: "category",
+        tags: "tag",
+        licenses: "license",
+      };
+      const filterLabels = {
+        stacks: "Stack",
+        platforms: "Platform",
+        categories: "Category",
+        tags: "Tag",
+        licenses: "License",
+      };
+      const taxonomyKinds = {
+        stacks: "stacks",
+        platforms: "platforms",
+        categories: "categories",
+      };
+      const taxonomyName = (groupKey, value) =>
+        (taxonomy[taxonomyKinds[groupKey]] || []).find((entry) => entry.id === value)?.name ??
+        value;
+
+      // This route is prerendered, so Astro cannot see the browser's query
+      // string. Rebuild active-filter controls from the live URL instead of
+      // leaving the server-rendered (empty) state in place.
+      const activeFilters = document.querySelector("#active-filters");
+      if (activeFilters) {
+        activeFilters.innerHTML = "";
+        const chips = activeFilterChips(filters).map((chip) => ({
+          ...chip,
+          label: chip.key === "stacks"
+            ? `Stack: ${taxonomyName("stacks", chip.value)}`
+            : chip.key === "platforms"
+              ? `Platform: ${taxonomyName("platforms", chip.value)}`
+              : chip.key === "categories"
+                ? `Category: ${taxonomyName("categories", chip.value)}`
+                : chip.label,
+        }));
+
+        for (const chip of chips) {
+          const next = searchParamsFromFilters(removeFilter(filters, chip.key, chip.value));
+          const link = document.createElement("a");
+          link.href = `/${slug}${next.size ? `?${next}` : ""}`;
+          link.className = "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";
+          link.append(document.createTextNode(`${chip.label} `));
+          const close = document.createElement("span");
+          close.setAttribute("aria-hidden", "true");
+          close.textContent = "x";
+          link.append(close);
+          activeFilters.append(link);
+        }
+        if (chips.length) {
+          const clear = document.createElement("a");
+          const clearParams = searchParamsFromFilters({ sort });
+          clear.href = `/${slug}${clearParams.size ? `?${clearParams}` : ""}`;
+          clear.className = "text-2xs font-medium text-ink-500 hover:text-ink-900";
+          clear.textContent = "Clear all";
+          activeFilters.append(clear);
+        }
+        activeFilters.classList.toggle("hidden", chips.length === 0);
+      }
+
+      document.querySelectorAll(".grove-filter").forEach((group) => {
+        if (!(group instanceof HTMLElement)) return;
+        const selected = values(filterKeys[group.dataset.filterGroupKey]);
+        group.querySelectorAll(".grove-filter-input").forEach((input) => {
+          if (input instanceof HTMLInputElement) {
+            input.checked = selected.includes(input.dataset.filterValue || "");
+          }
+        });
+        const triggerButton = group.querySelector(".grove-filter-trigger");
+        const trigger = triggerButton?.querySelector("span");
+        const label = filterLabels[group.dataset.filterGroupKey];
+        if (trigger) {
+          trigger.textContent = selected.length
+            ? `${label}: ${
+            selected.length === 1
+              ? taxonomyName(group.dataset.filterGroupKey, selected[0])
+              : `${selected.length} selected`
+              }`
+            : `${label}: Any`;
+        }
+        if (triggerButton) {
+          triggerButton.classList.toggle("bg-primary", selected.length > 0);
+          triggerButton.classList.toggle("text-primary-foreground", selected.length > 0);
+          triggerButton.classList.toggle("hover:bg-primary/90", selected.length > 0);
+          triggerButton.classList.toggle("hover:text-primary-foreground", selected.length > 0);
+          triggerButton.classList.toggle("border-border", selected.length === 0);
+          triggerButton.classList.toggle("bg-secondary", selected.length === 0);
+          triggerButton.classList.toggle("text-foreground", selected.length === 0);
+          triggerButton.classList.toggle("hover:bg-accent", selected.length === 0);
+        }
+        group.querySelector(".grove-filter-clear")?.classList.toggle("hidden", selected.length === 0);
+      });
+
+      let activeLens = LENSES[0];
+      document.querySelectorAll("[data-lens-id]").forEach((node) => {
+        if (!(node instanceof HTMLAnchorElement)) return;
+        const lens = LENSES.find((candidate) => candidate.id === node.dataset.lensId);
+        if (!lens) return;
+        const active = isLensActive(lens.id, params);
+        node.href = hrefForLens(lens.id, params, `/${slug}`);
+        if (active) node.setAttribute("aria-current", "page");
+        else node.removeAttribute("aria-current");
+        node.classList.toggle("bg-primary", active);
+        node.classList.toggle("text-primary-foreground", active);
+        node.classList.toggle("hover:bg-primary/90", active);
+        node.classList.toggle("hover:text-primary-foreground", active);
+        node.classList.toggle("border-border", !active);
+        node.classList.toggle("bg-secondary", !active);
+        node.classList.toggle("text-foreground", !active);
+        node.classList.toggle("hover:bg-accent", !active);
+        if (active) activeLens = lens;
+      });
+      const heading = document.querySelector("#results-heading");
+      const description = document.querySelector("#results-description");
+      if (heading) heading.textContent = activeLens.id === "all" ? `All ${plural}` : activeLens.label;
+      if (description) description.textContent = activeLens.description || `Every ${singular} in the directory.`;
+
+      applyClientFilters();
+    })();
+</script>

package/src/components/FilterGroupMenu.astro

@@ -27,7 +27,7 @@ const group = Astro.props;
     class:list={[
       "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
-        ? "bg-primary text-primary-foreground hover:bg-primary/90"
+        ? "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
         : "border-border bg-secondary text-foreground hover:bg-accent",
     ]}
     aria-haspopup="listbox"
@@ -42,9 +42,13 @@ const group = Astro.props;
   <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:list={[
+          "grove-filter-clear text-2xs font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100",
+          !group.active && "hidden",
+        ]}
+      >Clear {group.label.toLowerCase()}</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>

package/src/components/FinalCta.astro

@@ -0,0 +1,41 @@
+---
+interface Props {
+  itemLabel?: string;
+  itemsLabel?: string;
+  browseHref?: string;
+  submitHref?: string;
+  class?: string;
+}
+
+const {
+  itemLabel = "item",
+  itemsLabel = "items",
+  browseHref = "/items",
+  submitHref = "/submit",
+  class: className = "",
+} = Astro.props;
+---
+
+<section class:list={["border-t border-ink-200 py-10 sm:py-12 dark:border-ink-800", className]} aria-labelledby="grove-final-cta-heading">
+  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
+    <div class="rounded-[calc(var(--radius)+0.25rem)] border border-ink-200 bg-muted px-6 py-7 sm:flex sm:items-center sm:justify-between sm:gap-10 sm:px-8 sm:py-8 dark:border-ink-800">
+      <div class="max-w-2xl">
+        <p class="m-0 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">Keep the directory useful</p>
+        <h2 id="grove-final-cta-heading" class="m-0 mt-1.5 text-[1.5rem] font-semibold tracking-tight text-ink-900 sm:text-[1.75rem] dark:text-ink-100">
+          Know {itemLabel === "app" ? "an" : "a"} {itemLabel} that belongs here?
+        </h2>
+        <p class="m-0 mt-2 max-w-xl text-sm leading-relaxed text-ink-500 dark:text-ink-400">
+          Add a real, inspectable project or improve the metadata behind an existing listing.
+        </p>
+      </div>
+      <div class="mt-5 flex shrink-0 flex-wrap items-center gap-2 sm:mt-0 sm:justify-end">
+        <a href={submitHref} class="inline-flex min-h-9 items-center justify-center rounded-[var(--radius)] bg-primary px-4 text-sm font-semibold text-primary-foreground no-underline hover:bg-primary/90">
+          Submit {itemLabel}
+        </a>
+        <a href={browseHref} class="inline-flex min-h-9 items-center justify-center rounded-[var(--radius)] border border-border bg-background px-4 text-sm font-semibold text-foreground no-underline hover:bg-accent">
+          Explore {itemsLabel}
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

package/src/components/Hero.astro

@@ -37,6 +37,7 @@ interface Props {
     totalStacks?: number;
     totalOwners?: number;
     totalStars?: number;
+    repositoryContributors?: number;
     originalRepo?: string;
   };
   /** Search form target — the list page. */
@@ -94,11 +95,11 @@ const trustStats: { value: string; label: string }[] = [
   ...(stats.totalStacks !== undefined
     ? [{ value: String(stats.totalStacks), label: "stacks" }]
     : []),
-  ...(stats.totalOwners !== undefined
-    ? [{ value: compact(stats.totalOwners) ?? "0", label: "contributors" }]
+  ...(stats.totalOwners !== undefined && stats.totalOwners > 0
+    ? [{ value: compact(stats.totalOwners) ?? "0", label: "project owners" }]
     : []),
-  ...(stats.totalStars !== undefined
-    ? [{ value: compact(stats.totalStars) ?? "0", label: "GitHub stars" }]
+  ...(stats.totalStars !== undefined && stats.totalStars > 0
+    ? [{ value: compact(stats.totalStars) ?? "0", label: "stars across projects" }]
     : []),
 ];
 ---
@@ -121,7 +122,7 @@ const trustStats: { value: string; label: string }[] = [
   ></div>
 
   <Container>
-    <div class="relative py-14 sm:py-20">
+    <div class="relative py-12 sm:py-16">
       <div class="max-w-3xl">
         <span
           class="inline-flex animate-fade-in items-center gap-2 text-2xs font-medium text-ink-500 dark:text-ink-400"
@@ -167,7 +168,13 @@ const trustStats: { value: string; label: string }[] = [
       {/* Trust stats row */}
       {trustStats.length > 0 && (
         <dl
-          class="mt-7 grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4"
+          class:list={[
+            "mt-7 grid max-w-3xl grid-cols-2 gap-x-6 gap-y-3",
+            trustStats.length === 2 && "sm:grid-cols-2",
+            trustStats.length === 3 && "grid-cols-3",
+            trustStats.length === 4 && "sm:grid-cols-4",
+            trustStats.length >= 5 && "sm:grid-cols-5",
+          ]}
           aria-label="Directory at a glance"
         >
           {trustStats.map((s) => (
@@ -184,9 +191,9 @@ const trustStats: { value: string; label: string }[] = [
         </dl>
       )}
 
-      {/* Search + filters */}
+      {/* Search */}
       <form
-        class="mt-7 flex flex-col gap-2 sm:flex-row sm:items-stretch"
+        class="mt-7 flex max-w-4xl flex-col gap-2 sm:flex-row sm:items-stretch"
         role="search"
         action={searchHref}
         method="get"
@@ -212,16 +219,6 @@ const trustStats: { value: string; label: string }[] = [
             class="h-10 w-full rounded-md border border-ink-200 bg-white pl-10 pr-3 text-[0.9375rem] text-ink-900 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 dark:placeholder:text-ink-500 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
           />
         </label>
-        <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 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">
-            <path d="M.75 3h14.5a.75.75 0 0 1 .55 1.26l-5.55 6.1v4.39a.75.75 0 0 1-1.2.6l-2.5-1.87a.75.75 0 0 1-.3-.6v-2.52L.2 4.26A.75.75 0 0 1 .75 3Z"/>
-          </svg>
-          <span>Filters</span>
-        </a>
         <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 h-10 px-4 sm:px-5"

package/src/components/Icon.astro

@@ -62,6 +62,11 @@ interface Props {
    * {name}.svg` (case-insensitive).
    */
   aliases?: Record<string, string>;
+  /**
+   * Asset ids supplied by a consumer in addition to Grove's bundled registry.
+   * Unknown stack/platform ids render initials without issuing a failed request.
+   */
+  available?: string[];
   /**
    * Initials to render when the icon file is missing. Defaults to
    * the first 1–2 characters of `name`.
@@ -82,6 +87,7 @@ const {
   title,
   mode = "static",
   aliases,
+  available,
   fallbackInitials,
   base = "/icons",
 } = Astro.props;
@@ -94,9 +100,23 @@ function slugify(s: string): string {
 // Resolve `name` through the aliases map.
 function resolveName(raw: string): string {
   if (!raw) return "";
-  if (aliases) {
+  const defaultAliases: Partial<Record<IconCategory, Record<string, string>>> = {
+    stack: {
+      ios: "apple",
+      "native-ios": "apple",
+      ipados: "apple",
+      macos: "apple",
+      "objective-c": "apple",
+      spritekit: "apple",
+      swiftui: "apple",
+      kmp: "kotlin",
+      "kotlin-multiplatform": "kotlin",
+    },
+  };
+  for (const registry of [aliases, defaultAliases[category]]) {
+    if (!registry) continue;
     const lower = raw.toLowerCase();
-    for (const [k, v] of Object.entries(aliases)) {
+    for (const [k, v] of Object.entries(registry)) {
       if (k.toLowerCase() === lower) return slugify(v);
     }
   }
@@ -104,6 +124,26 @@ function resolveName(raw: string): string {
 }
 
 const resolved = resolveName(name);
+const bundledIcons: Record<"stack" | "platform", Set<string>> = {
+  stack: new Set([
+    "android", "apple", "bun", "capacitor", "clojure", "clojurescript",
+    "dart", "deno", "django", "docker", "firebase", "flutter", "go",
+    "graphql", "ionic", "java", "javascript", "kotlin", "llm", "mongodb",
+    "node.js", "nodejs", "python", "rag", "react", "react-native", "rust",
+    "solidity", "sveltekit", "swift", "tensorflow", "typescript", "vue",
+  ]),
+  platform: new Set([
+    "android", "apple", "chrome", "chromeos", "desktop", "embedded", "ios",
+    "linux", "macos", "ubuntu", "web", "windows",
+  ]),
+};
+const availableIcons = available?.map(slugify);
+const hasAsset =
+  category === "brand" ||
+  (availableIcons
+    ? availableIcons.includes(resolved)
+    : bundledIcons[category].has(resolved));
+const effectiveMode: IconMode = resolved === "apple" ? "auto" : mode;
 const platformStackIcons = new Set(["docker"]);
 const textOnlyPlatforms = new Set(["self-host", "self-hosted"]);
 const folder =
@@ -123,7 +163,9 @@ const init = (fallbackInitials ?? name ?? "")
   .slice(0, 2)
   .toUpperCase();
 const showFallback =
-  !resolved || (category === "platform" && textOnlyPlatforms.has(resolved));
+  !resolved ||
+  !hasAsset ||
+  (category === "platform" && textOnlyPlatforms.has(resolved));
 
 // Build aria-label.
 const ariaLabel = title ?? name;
@@ -144,34 +186,64 @@ const a11y: Record<string, string> = title
     >
       {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={["inline-block shrink-0 align-middle", className]}
-      {...a11y}
-    />
+  ) : effectiveMode === "auto" ? (
+    <>
+      <img
+        src={`${baseUrl}-light.svg`}
+        data-grove-icon
+        data-grove-icon-light={`${baseUrl}-light.svg`}
+        data-grove-icon-dark={`${baseUrl}-dark.svg`}
+        data-grove-icon-fallback={`${baseUrl}-light.svg`}
+        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={["inline-block shrink-0 align-middle", 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>
+    </>
   )
 }
 
-{mode === "auto" && (
+{effectiveMode === "auto" && (
   <script is:inline>
     // Theme-aware icon swap. Runs after THEME_INIT (BaseLayout) so
     // `data-resolved-theme` is already populated. Idempotent — the

package/src/components/RefinePanel.astro

@@ -29,6 +29,7 @@ interface Facets {
   stacks?: FacetValue[];
   platforms?: FacetValue[];
   categories?: FacetValue[];
+  tags?: FacetValue[];
   labels?: FacetValue[];
   licenses?: FacetValue[];
 }
@@ -39,7 +40,7 @@ interface Props {
   pathPrefix?: string;
   class?: string;
   /** Hide specific facets. Default: all shown. */
-  hide?: Array<"stack" | "platform" | "category" | "license" | "sort">;
+  hide?: Array<"stack" | "platform" | "category" | "tag" | "license" | "sort">;
 }
 
 const {
@@ -52,7 +53,7 @@ const {
 
 interface FilterGroup {
   label: string;
-  filterKey: "stacks" | "platforms" | "categories" | "licenses";
+  filterKey: "stacks" | "platforms" | "categories" | "tags" | "licenses";
   options: FacetValue[];
   initial: string[];
   single?: boolean;
@@ -68,6 +69,7 @@ const baseGroups: FilterGroup[] = [
   { label: "Stack", filterKey: "stacks", options: facets.stacks ?? [], initial: initial.stacks ?? [] },
   { label: "Platform", filterKey: "platforms", options: facets.platforms ?? [], initial: initial.platforms ?? [] },
   { label: "Category", filterKey: "categories", options: facets.categories ?? [], initial: initial.categories ?? [] },
+  { label: "Tag", filterKey: "tags", options: facets.tags ?? [], initial: initial.tags ?? [] },
   { label: "License", filterKey: "licenses", options: facets.licenses ?? [], initial: initial.licenses ?? [], single: true },
 ];
 
@@ -86,7 +88,7 @@ function triggerLabel(group: FilterGroup): string {
 
 const groups: RenderedFilterGroup[] = baseGroups
   .filter((group) => {
-    const singular = group.filterKey.slice(0, -1) as "stack" | "platform" | "category" | "license";
+    const singular = group.filterKey.slice(0, -1) as "stack" | "platform" | "category" | "tag" | "license";
     return !hide.includes(singular) && group.options.length > 0;
   })
   .map((group) => ({
@@ -97,8 +99,7 @@ const groups: RenderedFilterGroup[] = baseGroups
   }));
 ---
 
-<section class={className}>
-  <div class="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Filter items">
+<section class:list={["flex flex-wrap items-center gap-2", className]} role="toolbar" aria-label="Filter items">
     {groups.map((group) => <FilterGroupMenu {...group} />)}
 
     {!hide.includes("sort") && (
@@ -112,13 +113,12 @@ const groups: RenderedFilterGroup[] = baseGroups
         </svg>
       </label>
     )}
-  </div>
 </section>
 
 <script is:inline define:vars={{ pathPrefix }}>
   (() => {
     const groups = document.querySelectorAll(".grove-filter");
-    const keys = { stacks: "stack", platforms: "platform", categories: "category", licenses: "license" };
+    const keys = { stacks: "stack", platforms: "platform", categories: "category", tags: "tag", licenses: "license" };
     function closeAll(except) {
       groups.forEach((group) => {
         if (group === except) return;

package/src/components/SmartLensTabs.astro

@@ -2,8 +2,8 @@
 /**
  * SmartLensTabs — curated single-select lens tabs.
  *
- * Renders the primary lenses (All / Trending / Recently added /
- * Established / Featured / Needs review) as a horizontal tab bar.
+ * Renders configured curated lenses as a horizontal tab bar. Sort choices,
+ * including Recently added, belong in the separate sort control.
  * Clicking a tab navigates to the same list page with the `lens=`
  * query param updated. Other filter params (q, stack, platform,
  * category, sort) are preserved.
@@ -55,12 +55,13 @@ const lenses =
       <a
         href={hrefForLens(lens.id, currentParams, pathPrefix)}
         class:list={[
-          "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",
+          "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",
           active
-            ? "bg-primary text-primary-foreground hover:bg-primary/90"
+            ? "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
             : "border-border bg-secondary text-foreground hover:bg-accent",
         ]}
         aria-current={active ? "page" : undefined}
+        data-lens-id={lens.id}
         data-event="lens_tab_click"
         data-event-source="smart_lens_tabs"
       >

package/src/components/StackGrid.astro

@@ -94,7 +94,7 @@ function statusLabel(s: StackEntry["status"]): string | null {
           data-event-source="stack_grid"
         >
           <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950" aria-hidden="true">
-            <Icon name={iconAliases?.[s.slug] ?? s.name} category="stack" size={18} />
+            <Icon name={iconAliases?.[s.slug] ?? s.slug} category="stack" size={18} />
           </div>
 
           <div class="flex min-w-0 flex-1 flex-col gap-0.5">