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

package/src/components/RecordSidebar.astro

@@ -19,15 +19,29 @@
  * scrolls the body. Cards are individually rendered so the
  * sticky container's height is bounded by the actual content.
  */
-import { formatStars, compact, licenseDisplay } from "@grove-dev/core";
+import { licenseDisplay } from "@grove-dev/core";
 import type { RecordDetailModel } from "../server/models.js";
+import { taxonomyLabel } from "../server/directory.js";
+import Icon from "./Icon.astro";
 import LanguageBreakdown from "./LanguageBreakdown.astro";
 
 interface Props {
   detail: RecordDetailModel;
+  /**
+   * Pass false when a parent wrapper owns the sticky behavior (e.g.
+   * the detail page stacks the TOC above this sidebar inside one
+   * sticky column).
+   */
+  sticky?: boolean;
+  /**
+   * "column" (default) stacks the cards vertically for a rail;
+   * "grid" lays them out in responsive columns for full-width
+   * placement below the article.
+   */
+  layout?: "column" | "grid";
 }
 
-const { detail } = Astro.props;
+const { detail, sticky = true, layout = "column" } = Astro.props;
 const {
   sidebar,
   github,
@@ -35,10 +49,8 @@ const {
   forks,
   language,
   licenseSpdx,
-  pushedAt,
   pushedLabel,
   repoUrl,
-  homepageUrl,
   ownerRepo,
   healthLabel,
   activityBadge,
@@ -71,16 +83,32 @@ function row(label: string, value: unknown) {
 }
 ---
 
-<aside class="grove-sidebar flex flex-col gap-6 lg:sticky lg:top-20 lg:max-h-[calc(100vh-5rem)] lg:overflow-y-auto" aria-label="Project data">
+<aside
+  class:list={[
+    layout === "grid"
+      ? "grove-sidebar grid grid-cols-1 items-start gap-4 sm:grid-cols-2 xl:grid-cols-4"
+      : "grove-sidebar flex flex-col gap-4",
+    layout === "column" &&
+      sticky &&
+      "lg:sticky lg:top-20 lg:max-h-[calc(100vh-5rem)] lg:self-start lg:overflow-y-auto",
+  ]}
+  aria-label="Record metadata"
+>
 
   {/* ── Activity card ──────────────────────────────────────── */}
   {sidebar.showActivity && (
-    <section class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Activity">
-      <h2 class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+    <section
+      class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-card p-4 dark:border-ink-800"
+      aria-labelledby="sidebar-activity-title"
+    >
+      <h2
+        id="sidebar-activity-title"
+        class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
+      >
         Activity
       </h2>
       <dl class="grove-kv m-0 flex flex-col gap-2.5 text-sm">
-        {row("Stars", starsNumber !== null ? formatStars(starsNumber) ?? compact(starsNumber) : null) && (
+        {row("Stars", starsNumber !== null ? starsNumber : null) && (
           <div class="flex items-baseline justify-between gap-3">
             <dt class="text-ink-500 dark:text-ink-400">Stars</dt>
             <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{starsNumber!.toLocaleString()}</dd>
@@ -159,8 +187,14 @@ function row(label: string, value: unknown) {
 
   {/* ── Freshness card ─────────────────────────────────────── */}
   {sidebar.showFreshness && (
-    <section class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Freshness">
-      <h2 class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+    <section
+      class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-card p-4 dark:border-ink-800"
+      aria-labelledby="sidebar-freshness-title"
+    >
+      <h2
+        id="sidebar-freshness-title"
+        class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
+      >
         Freshness
       </h2>
       <dl class="grove-kv m-0 flex flex-col gap-2.5 text-sm">
@@ -226,8 +260,14 @@ function row(label: string, value: unknown) {
 
   {/* ── Ecosystem card ─────────────────────────────────────── */}
   {sidebar.showEcosystem && (
-    <section class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Ecosystem">
-      <h2 class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+    <section
+      class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-card p-4 dark:border-ink-800"
+      aria-labelledby="sidebar-ecosystem-title"
+    >
+      <h2
+        id="sidebar-ecosystem-title"
+        class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
+      >
         Ecosystem
       </h2>
 
@@ -237,8 +277,9 @@ function row(label: string, value: unknown) {
           <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
             {stacks.map((s) => (
               <li>
-                <a href={`/${detail.slug}?stack=${encodeURIComponent(s)}`} class="rounded-full bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground no-underline">
-                  {s}
+                <a href={`/${detail.slug}?stack=${encodeURIComponent(s)}`} class="inline-flex items-center gap-1.5 rounded-full bg-secondary py-0.5 pl-1.5 pr-2 text-2xs font-medium text-secondary-foreground no-underline">
+                  <Icon name={s} category="stack" size={12} />
+                  {taxonomyLabel("stacks", s)}
                 </a>
               </li>
             ))}
@@ -251,8 +292,9 @@ function row(label: string, value: unknown) {
           <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Platforms</h3>
           <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
             {platforms.map((p) => (
-              <li class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:text-ink-300">
-                {p}
+              <li class="inline-flex items-center gap-1.5 rounded-full border border-ink-200 py-0.5 pl-1.5 pr-2 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:text-ink-300">
+                <Icon name={p} category="platform" size={12} />
+                {taxonomyLabel("platforms", p)}
               </li>
             ))}
           </ul>
@@ -263,7 +305,7 @@ function row(label: string, value: unknown) {
         <div class="mb-3">
           <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Category</h3>
           <a href={`/${detail.slug}?category=${encodeURIComponent(category)}`} class="rounded-full bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground no-underline">
-            {category}
+            {taxonomyLabel("categories", category)}
           </a>
         </div>
       )}
@@ -275,7 +317,7 @@ function row(label: string, value: unknown) {
             {tags.map((t) => (
               <li>
                 <a href={`/${detail.slug}?tag=${encodeURIComponent(t)}`} class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium text-ink-700 no-underline dark:border-ink-800 dark:text-ink-300">
-                  {t}
+                  {taxonomyLabel("topics", t)}
                 </a>
               </li>
             ))}
@@ -309,8 +351,14 @@ function row(label: string, value: unknown) {
 
   {/* ── Source card (small) ────────────────────────────────── */}
   {sidebar.showSource && (
-    <section class="grove-card grove-card--muted rounded-[var(--radius-lg)] border border-dashed border-ink-200 bg-background/50 p-4 text-2xs text-ink-500 dark:border-ink-800 dark:text-ink-400" aria-label="Sources">
-      <h2 class="grove-card-title m-0 mb-1.5 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+    <section
+      class="grove-card grove-card--muted rounded-[var(--radius-lg)] border border-dashed border-ink-200 bg-card/50 p-4 text-2xs text-ink-500 dark:border-ink-800 dark:text-ink-400"
+      aria-labelledby="sidebar-source-title"
+    >
+      <h2
+        id="sidebar-source-title"
+        class="grove-card-title m-0 mb-1.5 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
+      >
         Source
       </h2>
       <p class="m-0 leading-relaxed">

package/src/components/RefinePanel.astro

@@ -2,17 +2,15 @@
 /**
  * RefinePanel — multi-select facet dropdowns.
  *
- * Renders a row of facet dropdowns (Stack, Platform, Category,
- * License) plus a Sort dropdown, all using native <select> for
- * server-render-only behavior. Selection auto-submits the form
- * to the same list page with the chosen values merged into the URL.
+ * Renders the ordered `groups` view-model produced by
+ * `getDirectoryIndexModel().facetGroups` — visibility, ORDER, display
+ * label, and selection mode all come from `browse.facets` + the core
+ * facet registry, never from this component. Option labels arrive
+ * pre-resolved from the taxonomy YAML, so the server render and the
+ * client script share one label source.
  *
  * The form is a GET to the list page base, with each facet as a
  * repeated key. Empty values are dropped, so the URL stays clean.
- *
- * Generic: takes a `facets` map of `{ value, label, count }[]` per
- * dimension and an `initial` `IndexFilters` for preselecting the
- * current URL state.
  */
 
 import type { IndexFilters } from "../lib/search";
@@ -25,78 +23,50 @@ interface FacetValue {
   count?: number;
 }
 
-interface Facets {
-  stacks?: FacetValue[];
-  platforms?: FacetValue[];
-  categories?: FacetValue[];
-  tags?: FacetValue[];
-  labels?: FacetValue[];
-  licenses?: FacetValue[];
+interface FacetGroupModel {
+  id: string;
+  filterKey: "stacks" | "platforms" | "categories" | "tags" | "licenses";
+  label: string;
+  single?: boolean;
+  options: FacetValue[];
+  initial: string[];
 }
 
 interface Props {
-  facets: Facets;
+  /** Ordered filter groups (see `getDirectoryIndexModel`). */
+  groups: FacetGroupModel[];
+  /** Current URL filter state — used to preselect the sort. */
   initial: IndexFilters;
   pathPrefix?: string;
   class?: string;
-  /** Hide specific facets. Default: all shown. */
-  hide?: Array<"stack" | "platform" | "category" | "tag" | "license" | "sort">;
+  /** Hide the sort select (e.g. when the page renders its own). */
+  hide?: Array<"sort">;
 }
 
 const {
-  facets,
+  groups: groupModels,
   initial,
   pathPrefix = "/",
   class: className = "",
   hide = [],
 } = Astro.props;
 
-interface FilterGroup {
-  label: string;
-  filterKey: "stacks" | "platforms" | "categories" | "tags" | "licenses";
-  options: FacetValue[];
-  initial: string[];
-  single?: boolean;
-}
-
-interface RenderedFilterGroup extends FilterGroup {
-  active: boolean;
-  popoverId: string;
-  trigger: string;
-}
-
-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 },
-];
-
-function pretty(value: string): string {
-  return value
-    .split(/[-_]/)
-    .map((part) => part ? part[0].toUpperCase() + part.slice(1) : part)
-    .join(" ");
-}
-
-function triggerLabel(group: FilterGroup): string {
+function triggerLabel(group: FacetGroupModel): string {
   if (group.initial.length === 0) return `${group.label}: Any`;
-  if (group.initial.length === 1) return `${group.label}: ${pretty(group.initial[0])}`;
+  if (group.initial.length === 1) {
+    const selected = group.initial[0];
+    const option = group.options.find((candidate) => candidate.value === selected);
+    return `${group.label}: ${option?.label ?? selected}`;
+  }
   return `${group.label}: ${group.initial.length} selected`;
 }
 
-const groups: RenderedFilterGroup[] = baseGroups
-  .filter((group) => {
-    const singular = group.filterKey.slice(0, -1) as "stack" | "platform" | "category" | "tag" | "license";
-    return !hide.includes(singular) && group.options.length > 0;
-  })
-  .map((group) => ({
-    ...group,
-    active: group.initial.length > 0,
-    popoverId: `filter-popover-${group.filterKey}`,
-    trigger: triggerLabel(group),
-  }));
+const groups = groupModels.map((group) => ({
+  ...group,
+  active: group.initial.length > 0,
+  popoverId: `filter-popover-${group.filterKey}`,
+  trigger: triggerLabel(group),
+}));
 ---
 
 <div class:list={["flex flex-wrap items-center gap-2", className]} role="toolbar" aria-label="Filter items">
@@ -160,7 +130,16 @@ const groups: RenderedFilterGroup[] = baseGroups
       popover?.addEventListener("click", (event) => event.stopPropagation());
     });
     document.addEventListener("click", () => closeAll());
-    document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeAll(); });
+    document.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      // Restore focus to the trigger whose popover was open so
+      // keyboard users don't lose their place.
+      const openGroup = [...groups].find((group) =>
+        group.querySelector('.grove-filter-trigger[aria-expanded="true"]'),
+      );
+      closeAll();
+      openGroup?.querySelector(".grove-filter-trigger")?.focus();
+    });
     document.querySelector('select[name="sort"]')?.addEventListener("change", (event) => {
       const params = new URLSearchParams(location.search);
       params.set("sort", event.target.value);

package/src/components/SmartLensTabs.astro

@@ -17,13 +17,14 @@
 
 import { LENSES, hrefForLens, isLensActive } from "../lib/lenses";
 import { lensDisplay } from "../lib/display";
+import { lensTabClass } from "../ui/button.js";
 
 interface Props {
   currentParams: URLSearchParams;
   pathPrefix?: string;
   class?: string;
   /** Override the visible lens list (defaults to LENSES). */
-  lensIds?: string[];
+  lensIds?: readonly string[];
   /** Consumer noun for the unfiltered lens, e.g. "All apps". */
   allLabel?: string;
 }
@@ -57,12 +58,7 @@ const lenses =
     return (
       <a
         href={hrefForLens(lens.id, currentParams, pathPrefix)}
-        class:list={[
-          "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 hover:text-primary-foreground"
-            : "border-border bg-secondary text-foreground hover:bg-accent",
-        ]}
+        class={lensTabClass(active)}
         aria-current={active ? "page" : undefined}
         data-lens-id={lens.id}
         data-event="lens_tab_click"

package/src/components/StackGrid.astro

@@ -1,4 +1,5 @@
 ---
+import { formatCount } from "@grove-dev/core";
 import Icon from "./Icon.astro";
 /**
  * StackGrid — browse-by-stack grid for the home page.
@@ -32,6 +33,16 @@ interface Props {
   /** Hide the section eyebrow / header entirely. */
   bare?: boolean;
   itemLabelPlural?: string;
+  /** Noun pair for count chips — singular fixes "1 projects". */
+  itemNoun?: { singular: string; plural: string };
+  /** Pass 1 when this grid IS the page (`/stacks` index). */
+  headingLevel?: 1 | 2;
+  /**
+   * Card link builder. Defaults to the browse page filtered by stack
+   * (`{pathPrefix}?stack=…`); pass e.g. `(slug) => \`/stacks/${slug}\``
+   * to link to taxonomy detail routes instead.
+   */
+  hrefFor?: (slug: string) => string;
 }
 
 const {
@@ -41,9 +52,15 @@ const {
   class: className = "",
   bare = false,
   itemLabelPlural = "items",
+  itemNoun = { singular: "item", plural: "items" },
+  headingLevel = 2,
+  hrefFor,
 } = Astro.props;
 
+const Heading = `h${headingLevel}` as "h1" | "h2";
+
 function buildHref(slug: string): string {
+  if (hrefFor) return hrefFor(slug);
   const base = pathPrefix.replace(/\/$/, "");
   return `${base}?stack=${encodeURIComponent(slug)}`;
 }
@@ -73,12 +90,12 @@ function statusLabel(s: StackEntry["status"]): string | null {
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Stacks
         </span>
-        <h2
+        <Heading
           id="grove-stackgrid-heading"
           class="m-0 mt-1 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
         >
           Browse by stack
-        </h2>
+        </Heading>
         <p class="m-0 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
           Pick a stack to see real {itemLabelPlural} built with it.
         </p>
@@ -89,7 +106,7 @@ function statusLabel(s: StackEntry["status"]): string | null {
       {stacks.map((s) => (
         <a
           href={buildHref(s.slug)}
-          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"
+          class="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-card shadow-none transition-colors hover:border-ink-300 dark:hover:border-ink-700 group flex h-full items-center gap-3 p-3.5 no-underline"
           data-event="stack_grid_click"
           data-event-source="stack_grid"
         >
@@ -99,12 +116,15 @@ function statusLabel(s: StackEntry["status"]): string | null {
 
           <div class="flex min-w-0 flex-1 flex-col gap-0.5">
             <div class="flex items-center gap-2">
-              <h3 class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+              {/* Not a heading: these tiles are links in a grid, and
+                  heading-per-card breaks the outline when the grid
+                  sits directly under the page h1 (/stacks). */}
+              <span class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
                 {s.name}
-              </h3>
+              </span>
               {typeof s.count === "number" && (
                 <span class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400">
-                  {s.count} {itemLabelPlural}
+                  {formatCount(s.count, itemNoun)}
                 </span>
               )}
             </div>