@grove-dev/astro 0.5.0-next.2 → 0.5.0

package/src/components/DirectoryIndexClient.astro

@@ -8,7 +8,10 @@ interface Props {
 }
 
 const { clientItemsJson, slug, singular, plural, taxonomy } = Astro.props;
-const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).replace(/</g, "\\u003c");
+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>
@@ -19,17 +22,26 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
     PAGE_SIZE,
     activeFilterChips,
     applySort,
+    buildFacets,
     effectivePage,
     effectiveSort,
     filterRecords,
     filtersFromSearchParams,
     hrefForLens,
     isLensActive,
+    paginationPageList,
     removeFilter,
     searchParamsFromFilters,
     sortDisplay,
     totalPages,
   } from "@grove-dev/core/directory";
+  import {
+    PAGINATION_EXTRA,
+    buttonClass,
+    chipClass,
+    filterTriggerClass,
+    lensTabClass,
+  } from "../ui/button.js";
 
   (() => {
       const source = document.querySelector("#grove-index-data");
@@ -39,8 +51,12 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
 
       const items = JSON.parse(source.textContent || "[]");
       const { slug, singular, plural, taxonomy } = JSON.parse(configSource.textContent || "{}");
+      // `:scope >` keeps the lookup on the page's own `<li>` wrappers —
+      // the card component inside each item also carries
+      // `data-record-slug`, and appending/hiding the inner card instead
+      // of its wrapper would tear the list apart.
       const nodes = new Map(
-        [...list.querySelectorAll("[data-record-slug]")].map((node) => [
+        [...list.querySelectorAll(":scope > [data-record-slug]")].map((node) => [
           (node as HTMLElement).dataset.recordSlug,
           node,
         ]),
@@ -64,9 +80,22 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
             .map((record) => record.slug),
         );
 
-        for (const record of filtered) {
-          const node = nodes.get(record.slug) as HTMLElement | undefined;
-          if (node) list.append(node);
+        // Re-append only when the visible order has changed. On every
+        // keystroke / filter change this would otherwise thrash the
+        // DOM order even when the sort + filter result is identical
+        // to the previous run.
+        const currentOrder = [...list.querySelectorAll(":scope > [data-record-slug]")].map(
+          (node) => (node as HTMLElement).dataset.recordSlug,
+        );
+        const nextOrder = filtered.map((record) => record.slug);
+        const orderChanged =
+          currentOrder.length !== nextOrder.length ||
+          currentOrder.some((slug, index) => slug !== nextOrder[index]);
+        if (orderChanged) {
+          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);
@@ -81,20 +110,56 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
         if (pageLabel) pageLabel.textContent = pageCount > 1 ? ` · page ${page} of ${pageCount}` : "";
         if (empty) empty.classList.toggle("hidden", filtered.length > 0);
 
+        // Rebuild the pagination controls, mirroring the server-rendered
+        // `Pagination.astro` (Previous/Next + windowed page list via the
+        // shared `paginationPageList`) so client filtering never degrades
+        // the affordances of the initial render.
         const pagination = document.querySelector("#results-pagination");
         if (pagination) {
           pagination.innerHTML = "";
           if (pageCount > 1) {
-            for (let target = 1; target <= pageCount; target += 1) {
+            const linkClass = buttonClass("secondary", "sm", PAGINATION_EXTRA);
+            const hrefFor = (target: number) => {
               const next = searchParamsFromFilters({ ...filters, page: target });
+              return `/${slug}${next.size ? `?${next}` : ""}`;
+            };
+            const nav = document.createElement("nav");
+            nav.className = "flex flex-wrap items-center justify-center gap-1.5";
+            nav.setAttribute("aria-label", "Pagination");
+            const control = (label: string, target: number | null, rel?: string) => {
+              if (target === null) {
+                const span = document.createElement("span");
+                span.className = `${linkClass} pointer-events-none opacity-40`;
+                span.textContent = label;
+                return span;
+              }
               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);
+              link.href = hrefFor(target);
+              link.textContent = label;
+              link.className = linkClass;
+              if (rel) link.rel = rel;
+              return link;
+            };
+            nav.append(control("Previous", page > 1 ? page - 1 : null, "prev"));
+            for (const entry of paginationPageList(page, pageCount)) {
+              if (entry === "ellipsis") {
+                const dots = document.createElement("span");
+                dots.className = "px-1 text-2xs text-ink-400";
+                dots.setAttribute("aria-hidden", "true");
+                dots.textContent = "...";
+                nav.append(dots);
+                continue;
+              }
+              const link = control(String(entry), entry);
+              link.setAttribute("aria-label", `Page ${entry}`);
+              if (entry === page) {
+                link.setAttribute("aria-current", "page");
+                link.className = buttonClass("selected", "sm", PAGINATION_EXTRA);
+              }
+              nav.append(link);
             }
+            nav.append(control("Next", page < pageCount ? page + 1 : null, "next"));
+            pagination.append(nav);
           }
         }
       }
@@ -133,6 +198,8 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
         stacks: "stacks",
         platforms: "platforms",
         categories: "categories",
+        tags: "topics",
+        licenses: "licenses",
       };
       const taxonomyName = (groupKey, value) =>
         (taxonomy[taxonomyKinds[groupKey]] || []).find((entry) => entry.id === value)?.name ??
@@ -152,14 +219,22 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
               ? `Platform: ${taxonomyName("platforms", chip.value)}`
               : chip.key === "categories"
                 ? `Category: ${taxonomyName("categories", chip.value)}`
-                : chip.label,
+                : chip.key === "tags"
+                  ? `Tag: ${taxonomyName("tags", chip.value)}`
+                  : chip.key === "licenses"
+                    ? `License: ${taxonomyName("licenses", 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";
+          // The whole anchor is the remove control; the visible label
+          // announces the filter value, and the aria-label spells out
+          // the action for assistive tech.
+          link.setAttribute("aria-label", `Remove filter: ${chip.label}`);
+          link.className = chipClass();
           link.append(document.createTextNode(`${chip.label} `));
           const close = document.createElement("span");
           close.setAttribute("aria-hidden", "true");
@@ -172,10 +247,18 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
           const clearParams = searchParamsFromFilters({ sort });
           clear.href = `/${slug}${clearParams.size ? `?${clearParams}` : ""}`;
           clear.className = "text-2xs font-medium text-ink-500 hover:text-ink-900";
+          clear.setAttribute("aria-label", "Clear all active filters");
           clear.textContent = "Clear all";
           activeFilters.append(clear);
         }
         activeFilters.classList.toggle("hidden", chips.length === 0);
+
+        // Mobile filter-drawer badge mirrors the live chip count.
+        const drawerCount = document.querySelector("[data-drawer-count]");
+        if (drawerCount) {
+          drawerCount.textContent = String(chips.length);
+          drawerCount.classList.toggle("hidden", chips.length === 0);
+        }
       }
 
       document.querySelectorAll(".grove-filter").forEach((group) => {
@@ -199,18 +282,39 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
             : `${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);
+          // Same builder the server render used — the class string is
+          // reassigned wholesale so the two can never drift.
+          triggerButton.className = filterTriggerClass(selected.length > 0);
         }
         group.querySelector(".grove-filter-clear")?.classList.toggle("hidden", selected.length === 0);
       });
 
+      // Facet counts were rendered at build time from the UNFILTERED
+      // record set (the route is prerendered, so the server never sees
+      // the live query string). Recompute intersection counts against
+      // the current filters and patch each count span in place —
+      // never re-render the option lists, which would destroy
+      // checkbox, focus, and scroll state.
+      const liveFacets: Record<string, { value: string; count: number }[]> = buildFacets(items, {
+        filters,
+        curatedTagIds: (taxonomy.topics || []).map((topic: { id: string }) => topic.id),
+      });
+      document.querySelectorAll("[data-facet-count]").forEach((span) => {
+        if (!(span instanceof HTMLElement)) return;
+        const options = liveFacets[span.dataset.facet ?? ""] ?? [];
+        const count = options.find((option) => option.value === span.dataset.value)?.count ?? 0;
+        span.textContent = String(count);
+        const row = span.closest("label");
+        const input = row?.querySelector(".grove-filter-input");
+        const checked = input instanceof HTMLInputElement && input.checked;
+        // A zero-count option can't narrow anything — dim and disable
+        // it unless it's the currently selected value (which must stay
+        // interactive so the user can un-select it).
+        const inert = count === 0 && !checked;
+        row?.classList.toggle("opacity-45", inert);
+        if (input instanceof HTMLInputElement) input.disabled = inert;
+      });
+
       let activeLens = LENSES[0];
       document.querySelectorAll("[data-lens-id]").forEach((node) => {
         if (!(node instanceof HTMLAnchorElement)) return;
@@ -220,14 +324,7 @@ const clientConfigJson = JSON.stringify({ slug, singular, plural, taxonomy }).re
         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);
+        node.className = lensTabClass(active);
         if (active) activeLens = lens;
       });
       const heading = document.querySelector("#results-heading");

package/src/components/EditorialSummary.astro

@@ -20,16 +20,17 @@ const hasAny = bestFor.length > 0 || caveats.length > 0;
 ---
 
 {hasAny && (
-  <section class="grove-editorial mb-10 rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Editorial summary">
+  <section class="grove-editorial mb-10 rounded-[var(--radius-lg)] border border-ink-200 bg-card p-5 dark:border-ink-800" aria-label="Editorial summary">
+    <h2 class="sr-only">Editorial summary</h2>
     <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
       {bestFor.length > 0 && (
         <div>
-          <h2 class="m-0 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-emerald-700 dark:text-emerald-400">
+          <h3 class="m-0 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-emerald-700 dark:text-emerald-400">
             <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
               <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />
             </svg>
             Best for
-          </h2>
+          </h3>
           <ul class="mt-2 m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-ink-700 dark:text-ink-200">
             {bestFor.map((b) => (
               <li class="leading-relaxed">{b}</li>
@@ -39,12 +40,12 @@ const hasAny = bestFor.length > 0 || caveats.length > 0;
       )}
       {caveats.length > 0 && (
         <div>
-          <h2 class="m-0 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-400">
+          <h3 class="m-0 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-400">
             <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
               <path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 .4 1.04l1.6.8a.75.75 0 1 0 .67-1.34l-1.17-.59V4.75z" />
             </svg>
             Consider before using
-          </h2>
+          </h3>
           <ul class="mt-2 m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-ink-700 dark:text-ink-200">
             {caveats.map((c) => (
               <li class="leading-relaxed">{c}</li>

package/src/components/FilterGroupMenu.astro

@@ -1,5 +1,6 @@
 ---
 import FilterOptions from "./FilterOptions.astro";
+import { buttonClass, filterTriggerClass } from "../ui/button.js";
 
 interface FacetValue {
   value: string;
@@ -24,13 +25,7 @@ const group = Astro.props;
 <div class="grove-filter relative" data-filter-group-key={group.filterKey} data-filter-single={group.single ? "true" : "false"}>
   <button
     type="button"
-    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 hover:text-primary-foreground"
-        : "border-border bg-secondary text-foreground hover:bg-accent",
-    ]}
-    aria-haspopup="listbox"
+    class={filterTriggerClass(group.active)}
     aria-expanded="false"
     aria-controls={group.popoverId}
   >
@@ -39,9 +34,26 @@ 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="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>
+  {/* A group of native checkboxes/radios — the old listbox role over
+      label/input children had no valid accessibility tree. */}
+  <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="group"
+    aria-label={`${group.label} filters`}
+    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">
+    {/* Single-select groups navigate on change, so Apply would be a
+        dead affordance — they keep only Clear, and the whole footer
+        hides itself while Clear is hidden (the client script toggles
+        Clear's `hidden` class from the live URL state). */}
+    <div
+      class:list={[
+        "mt-1 flex items-center justify-between border-t border-ink-100 px-2 pt-1.5 dark:border-ink-900",
+        group.single && "has-[.grove-filter-clear.hidden]:hidden",
+      ]}
+    >
       <button
         type="button"
         class:list={[
@@ -49,7 +61,9 @@ const group = Astro.props;
           !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>
+      {!group.single && (
+        <button type="button" class={buttonClass("primary", "sm", "grove-filter-apply ml-auto px-2.5 text-2xs")}>Apply</button>
+      )}
     </div>
   </div>
 </div>

package/src/components/FilterOptions.astro

@@ -37,7 +37,12 @@ function pretty(value: string): string {
           />
           <span class="truncate">{option.label ?? pretty(option.value)}</span>
         </span>
-        <span class="font-mono text-2xs tabular-nums text-ink-500 dark:text-ink-400">{option.count ?? 0}</span>
+        <span
+          class="font-mono text-2xs tabular-nums text-ink-500 dark:text-ink-400"
+          data-facet-count
+          data-facet={filterKey}
+          data-value={option.value}
+        >{option.count ?? 0}</span>
       </label>
     </li>
   ))}

package/src/components/FinalCta.astro

@@ -1,4 +1,6 @@
 ---
+import { buttonClass } from "../ui/button.js";
+
 interface Props {
   itemLabel?: string;
   itemsLabel?: string;
@@ -18,7 +20,7 @@ const {
 
 <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="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-card 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">
@@ -29,10 +31,10 @@ const {
         </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">
+        <a href={submitHref} class={buttonClass("primary", "md", "px-4")}>
           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">
+        <a href={browseHref} class={buttonClass("outline", "md", "px-4")}>
           Explore {itemsLabel}
         </a>
       </div>