@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/membership/TierCards.astro

@@ -0,0 +1,164 @@
+---
+/**
+ * <TierCards> — the membership / pricing tier comparison card row (the
+ * Guest / Member / Autopilot pattern). Presentational + EDUCATION ONLY: it shows
+ * tiers, their headline figures, and feature bullets, but ships NO pricing,
+ * checkout, or subscription mechanics — each tier's CTA is a plain handoff link
+ * into the tenant's own (product-owned) subscribe/learn flow.
+ *
+ * Illustrative-figures affordance (decision compliance-widgets-platform-owned):
+ * a tier's figure is treated as an EXAMPLE by default (isIllustrative). When any
+ * shown tier is illustrative the group header carries a first-class
+ * <IllustrativeLabel> badge, each such figure is prefixed with an "e.g."
+ * affordance + data-illustrative hook, and a footnote spells it out — so an
+ * example number is never presented as a live offer. A tenant opts a tier out
+ * only by asserting `real: true` on confirmed live values.
+ *
+ * Token-styled only — re-skins entirely from the theme's contract tokens
+ * (--color-…, --radius-…, --shadow-…); no hardcoded brand color.
+ * data-widget="tier-cards" is the audit/test hook.
+ */
+import type { Tier } from "@/lib/membership/model";
+import { isIllustrative } from "@/lib/membership/model";
+import IllustrativeLabel from "@/components/membership/IllustrativeLabel.astro";
+
+interface Props {
+  tiers: Tier[];
+  /** Optional small eyebrow above the heading. */
+  eyebrow?: string;
+  /** Optional section heading. */
+  heading?: string;
+  /** Optional supporting sentence under the heading. */
+  subhead?: string;
+}
+
+const { tiers, eyebrow, heading, subhead } = Astro.props;
+
+// Any illustrative figure in the group drives the group-level affordances.
+const anyIllustrative = tiers.some((t) => t.figure && isIllustrative(t));
+---
+
+{
+  tiers.length > 0 && (
+    <section class="container-prose" data-widget="tier-cards">
+      {(eyebrow || heading || subhead || anyIllustrative) && (
+        <header class="mb-8 text-center">
+          {eyebrow && (
+            <p class="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--color-accent-ink)]">
+              {eyebrow}
+            </p>
+          )}
+          {heading && (
+            <h2 class="font-display text-2xl font-bold text-[var(--color-text)] sm:text-3xl">
+              {heading}
+            </h2>
+          )}
+          {subhead && (
+            <p class="mx-auto mt-3 max-w-[60ch] text-[var(--color-muted)]">{subhead}</p>
+          )}
+          {anyIllustrative && (
+            <div class="mt-4">
+              <IllustrativeLabel as="badge" />
+            </div>
+          )}
+        </header>
+      )}
+
+      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {tiers.map((tier) => {
+          const illustrative = Boolean(tier.figure) && isIllustrative(tier);
+          return (
+            <article
+              class={`relative flex flex-col rounded-[var(--radius-lg)] border bg-[var(--color-surface)] p-6 ${
+                tier.featured
+                  ? "border-2 border-[var(--color-primary)] shadow-[var(--shadow-md)]"
+                  : "border-[var(--color-border)]"
+              }`}
+              data-tier={tier.name}
+            >
+              {tier.featured && tier.badge && (
+                <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-[var(--radius-full)] bg-[var(--color-primary)] px-3 py-1 text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--color-primary-contrast)]">
+                  {tier.badge}
+                </span>
+              )}
+
+              <h3 class="font-display text-lg font-semibold text-[var(--color-text)]">
+                {tier.name}
+              </h3>
+              {tier.tagline && (
+                <p class="mt-1 text-sm text-[var(--color-muted)]">{tier.tagline}</p>
+              )}
+
+              {tier.figure && (
+                <p
+                  class="mt-4 flex items-baseline gap-1.5 text-[var(--color-text)]"
+                  data-illustrative={illustrative ? "figure" : undefined}
+                >
+                  {illustrative && (
+                    <span
+                      class="text-xs font-medium text-[var(--color-muted)]"
+                      title="Illustrative example"
+                    >
+                      e.g.
+                    </span>
+                  )}
+                  <span class="font-display text-3xl font-bold leading-none">
+                    {tier.figure.value}
+                  </span>
+                  {tier.figure.caption && (
+                    <span class="text-sm text-[var(--color-muted)]">{tier.figure.caption}</span>
+                  )}
+                </p>
+              )}
+
+              {tier.features && tier.features.length > 0 && (
+                <ul class="mt-5 flex-1 space-y-2.5">
+                  {tier.features.map((f) => (
+                    <li
+                      class={`flex items-start gap-2.5 text-sm ${
+                        f.included === false
+                          ? "text-[var(--color-muted)]"
+                          : "text-[var(--color-text)]"
+                      }`}
+                    >
+                      <span
+                        aria-hidden="true"
+                        class={`mt-0.5 ${
+                          f.included === false
+                            ? "text-[var(--color-muted)]"
+                            : "text-[var(--color-success)]"
+                        }`}
+                      >
+                        {f.included === false ? "–" : f.included === true ? "✓" : "•"}
+                      </span>
+                      <span class={f.included === false ? "line-through" : ""}>{f.label}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {tier.cta && (
+                <a
+                  href={tier.cta.href}
+                  class={`mt-6 inline-flex min-h-[44px] items-center justify-center rounded-[var(--radius-full)] px-5 py-2.5 text-sm font-semibold ${
+                    tier.featured
+                      ? "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]"
+                      : "border-2 border-[var(--color-primary)] text-[var(--color-primary)]"
+                  }`}
+                >
+                  {tier.cta.label}
+                </a>
+              )}
+            </article>
+          );
+        })}
+      </div>
+
+      {anyIllustrative && (
+        <footer class="mt-6 text-center">
+          <IllustrativeLabel as="note" />
+        </footer>
+      )}
+    </section>
+  )
+}

package/apps/storefront/src/components/membership/TierComparisonTable.astro

@@ -0,0 +1,148 @@
+---
+/**
+ * <TierComparisonTable> — the membership/pricing feature matrix companion to
+ * <TierCards>: tiers across the top, features down the side, one cell per
+ * (feature × tier). Presentational + EDUCATION ONLY — no pricing/checkout/
+ * subscription mechanics; a tier's optional figure and CTA are display/handoff
+ * only.
+ *
+ * Illustrative-figures affordance (decision compliance-widgets-platform-owned):
+ * when any tier shows an illustrative figure the header carries a first-class
+ * <IllustrativeLabel> badge, each such figure gets an "e.g." affordance +
+ * data-illustrative hook, and a footnote spells it out — an example number is
+ * never presented as a live offer.
+ *
+ * Cells align to `tiers` by index (see ComparisonRow): boolean → check/dash,
+ * string → text, null/omitted → em dash. Token-styled only; horizontally
+ * scrollable so it never overflows the page on narrow viewports.
+ * data-widget="tier-comparison-table" is the audit/test hook.
+ */
+import type { Tier, ComparisonRow } from "@/lib/membership/model";
+import { isIllustrative } from "@/lib/membership/model";
+import IllustrativeLabel from "@/components/membership/IllustrativeLabel.astro";
+
+interface Props {
+  tiers: Tier[];
+  rows: ComparisonRow[];
+  /** Optional small eyebrow above the heading. */
+  eyebrow?: string;
+  /** Optional section heading. */
+  heading?: string;
+}
+
+const { tiers, rows, eyebrow, heading } = Astro.props;
+const anyIllustrative = tiers.some((t) => t.figure && isIllustrative(t));
+---
+
+{
+  tiers.length > 0 && (
+    <section class="container-prose" data-widget="tier-comparison-table">
+      {(eyebrow || heading || anyIllustrative) && (
+        <header class="mb-6 text-center">
+          {eyebrow && (
+            <p class="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--color-accent-ink)]">
+              {eyebrow}
+            </p>
+          )}
+          {heading && (
+            <h2 class="font-display text-2xl font-bold text-[var(--color-text)] sm:text-3xl">
+              {heading}
+            </h2>
+          )}
+          {anyIllustrative && (
+            <div class="mt-4">
+              <IllustrativeLabel as="badge" />
+            </div>
+          )}
+        </header>
+      )}
+
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[32rem] border-collapse text-sm">
+          <caption class="sr-only">
+            {heading ?? "Membership tier comparison"}
+          </caption>
+          <thead>
+            <tr>
+              <th scope="col" class="w-1/3 p-3 text-left align-bottom" />
+              {tiers.map((tier) => {
+                const illustrative = Boolean(tier.figure) && isIllustrative(tier);
+                return (
+                  <th
+                    scope="col"
+                    class={`p-3 text-center align-bottom ${
+                      tier.featured
+                        ? "rounded-t-[var(--radius-md)] bg-[var(--color-surface-2)]"
+                        : ""
+                    }`}
+                    data-tier={tier.name}
+                  >
+                    <span class="block font-display text-base font-semibold text-[var(--color-text)]">
+                      {tier.name}
+                    </span>
+                    {tier.figure && (
+                      <span
+                        class="mt-1 block text-xs text-[var(--color-muted)]"
+                        data-illustrative={illustrative ? "figure" : undefined}
+                      >
+                        {illustrative && <span title="Illustrative example">e.g. </span>}
+                        {tier.figure.value}
+                        {tier.figure.caption ? ` ${tier.figure.caption}` : ""}
+                      </span>
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr class="border-t border-[var(--color-border)]">
+                <th
+                  scope="row"
+                  class="p-3 text-left font-medium text-[var(--color-text)]"
+                >
+                  {row.label}
+                </th>
+                {tiers.map((tier, i) => {
+                  const cell = row.cells[i];
+                  return (
+                    <td
+                      class={`p-3 text-center ${
+                        tier.featured ? "bg-[var(--color-surface-2)]" : ""
+                      }`}
+                    >
+                      {typeof cell === "boolean" ? (
+                        cell ? (
+                          <span class="text-[var(--color-success)]" aria-label="Included">
+                            ✓
+                          </span>
+                        ) : (
+                          <span class="text-[var(--color-muted)]" aria-label="Not included">
+                            –
+                          </span>
+                        )
+                      ) : cell != null && cell !== "" ? (
+                        <span class="text-[var(--color-text)]">{cell}</span>
+                      ) : (
+                        <span class="text-[var(--color-muted)]" aria-label="Not applicable">
+                          —
+                        </span>
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {anyIllustrative && (
+        <footer class="mt-4 text-center">
+          <IllustrativeLabel as="note" />
+        </footer>
+      )}
+    </section>
+  )
+}

package/apps/storefront/src/components/plp/ActiveFilters.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * Active-filter chips (Shopify-style). Shows what's applied as removable pills
+ * above the grid — each chip is a link that drops exactly one filter, so it's
+ * URL-addressable and back-button safe like the rest of faceting (src/lib/url.ts).
+ */
+import type { ListProductsQuery } from "@tot/public-runtime";
+import { toggleFacet, buildQueryString } from "@/lib/url";
+
+interface Props {
+  query: ListProductsQuery;
+  basePath: string;
+}
+const { query, basePath } = Astro.props;
+
+type Chip = { label: string; href: string };
+const chips: Chip[] = [];
+
+// Option + tag facet values (toggling an active value removes it).
+for (const [name, values] of Object.entries(query.filters ?? {})) {
+  for (const v of values) {
+    chips.push({
+      label: name === "tags" ? `#${v}` : `${name}: ${v}`,
+      href: basePath + toggleFacet(query, name, v),
+    });
+  }
+}
+
+// Price range.
+if (query.priceMin != null || query.priceMax != null) {
+  const lo = query.priceMin != null ? `$${query.priceMin}` : "$0";
+  const hi = query.priceMax != null ? `$${query.priceMax}` : "any";
+  const { priceMin, priceMax, ...rest } = query;
+  chips.push({ label: `${lo}–${hi}`, href: basePath + buildQueryString(rest) });
+}
+
+// Availability (the meaningful filter is "in-stock"; "all" is the default).
+if (query.availability === "in-stock") {
+  const { availability, ...rest } = query;
+  chips.push({ label: "In stock", href: basePath + buildQueryString(rest) });
+}
+
+const clearHref =
+  basePath +
+  buildQueryString({ sort: query.sort, pageSize: query.pageSize });
+---
+
+{
+  chips.length > 0 && (
+    <div class="mb-5 flex flex-wrap items-center gap-2" data-active-filters>
+      <span class="sr-only">Active filters:</span>
+      {chips.map((chip) => (
+        <a
+          href={chip.href}
+          rel="nofollow"
+          class="group inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-1 pl-3 pr-2 text-xs transition-colors hover:border-[var(--color-accent-ink)] hover:text-[var(--color-accent-ink)]"
+        >
+          <span>{chip.label}</span>
+          <span
+            aria-hidden="true"
+            class="grid h-4 w-4 place-items-center rounded-full text-[var(--color-muted)] transition-colors group-hover:bg-[var(--color-accent-ink)] group-hover:text-[var(--color-primary-contrast)]"
+          >
+            ×
+          </span>
+          <span class="sr-only">Remove filter</span>
+        </a>
+      ))}
+      {chips.length > 1 && (
+        <a
+          href={clearHref}
+          rel="nofollow"
+          class="ml-1 text-xs text-[var(--color-muted)] underline underline-offset-2 hover:text-[var(--color-accent-ink)]"
+        >
+          Clear all
+        </a>
+      )}
+    </div>
+  )
+}

package/apps/storefront/src/components/plp/FacetSidebar.astro

@@ -0,0 +1,199 @@
+---
+/**
+ * Faceted filtering UI (brief §5). URL-ADDRESSABLE and back-button safe: every
+ * facet is a real link that toggles a querystring param (no JS required for
+ * filtering). The optional mobile drawer toggle is the only island.
+ *
+ * Encoding handled by src/lib/url.ts (opt.<Name>=<value>, tag=, price, avail).
+ */
+import type { Facet, ListProductsQuery } from "@tot/public-runtime";
+import { toggleFacet, buildQueryString, isPriceBucketActive, togglePriceBucket } from "@/lib/url";
+import { PRICE_BUCKETS, bucketByKey } from "@/lib/priceBuckets";
+
+interface Props {
+  facets: Facet[];
+  query: ListProductsQuery;
+  basePath: string; // e.g. /collections/bestsellers
+}
+const { facets, query, basePath } = Astro.props;
+
+const selected = (name: string, value: string) =>
+  (query.filters?.[name] ?? []).includes(value);
+
+// "price" is rendered separately as a bucketed quick-select (below), not a
+// generic query.filters facet — pull it out before ordering the rest.
+const priceFacet = facets.find((f) => f.name === "price");
+
+// Order facets: option facets first, then tags, availability last.
+const ordered = [...facets]
+  .filter((f) => f.name !== "price")
+  .sort((a, b) => {
+    const rank = (n: string) => (n === "availability" ? 2 : n === "tags" ? 1 : 0);
+    return rank(a.name) - rank(b.name);
+  });
+
+const hasActiveFilters =
+  !!query.filters && Object.keys(query.filters).length > 0;
+
+const clearHref =
+  basePath +
+  buildQueryString({ sort: query.sort, q: query.q, pageSize: query.pageSize });
+---
+
+<aside aria-label="Filters" class="text-sm">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="eyebrow !text-[var(--color-text)]">Filter</h2>
+    {hasActiveFilters && (
+      <a href={clearHref} class="text-xs text-[var(--color-muted)] underline underline-offset-2 hover:text-[var(--color-accent-ink)]">
+        Clear all
+      </a>
+    )}
+  </div>
+
+  <div class="space-y-7">
+    {
+      ordered.map((facet) => (
+        <fieldset>
+          <legend class="mb-2.5 font-display text-[0.95rem] font-medium">
+            {facet.name === "tags"
+              ? "Tags"
+              : facet.name === "availability"
+              ? "Availability"
+              : facet.name}
+          </legend>
+          <ul class="space-y-1.5">
+            {facet.values.map((fv) => {
+              const isSel = selected(facet.name, fv.value);
+              const href =
+                basePath + toggleFacet(query, facet.name, fv.value);
+              return (
+                <li>
+                  <a
+                    href={href}
+                    rel="nofollow"
+                    aria-pressed={isSel}
+                    class:list={[
+                      "flex items-center justify-between gap-3 rounded-[var(--radius-sm)] px-2 py-1 transition-colors",
+                      isSel
+                        ? "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]"
+                        : "hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]",
+                    ]}
+                  >
+                    <span class="flex items-center gap-2">
+                      <span
+                        aria-hidden="true"
+                        class:list={[
+                          "grid h-3.5 w-3.5 place-items-center rounded-[2px] border",
+                          isSel
+                            ? "border-[var(--color-primary-contrast)] bg-[var(--color-primary-contrast)] text-[var(--color-primary)]"
+                            : "border-[var(--color-border)]",
+                        ]}
+                      >
+                        {isSel ? "✓" : ""}
+                      </span>
+                      {fv.value === "all" ? "All items" : fv.value}
+                    </span>
+                    <span class:list={["text-xs", isSel ? "opacity-80" : "text-[var(--color-muted)]"]}>
+                      {fv.count}
+                    </span>
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </fieldset>
+      ))
+    }
+
+    {/* Price range — bucketed quick-select (live counts) + a free-text form
+        for an arbitrary range. Both write the same priceMin/priceMax params,
+        so a bucket and the form stay in sync (selecting a bucket fills the
+        form; a custom range that matches a bucket shows it as active). */}
+    <fieldset class="border-t border-[var(--color-border)] pt-5">
+      <legend class="mb-2.5 font-display text-[0.95rem] font-medium">Price</legend>
+      {priceFacet && (
+        <ul class="mb-4 space-y-1.5">
+          {priceFacet.values.map((fv) => {
+            const bucket = bucketByKey(fv.value);
+            if (!bucket) return null;
+            const isSel = isPriceBucketActive(query, bucket);
+            const href = basePath + togglePriceBucket(query, bucket);
+            return (
+              <li>
+                <a
+                  href={href}
+                  rel="nofollow"
+                  aria-pressed={isSel}
+                  class:list={[
+                    "flex items-center justify-between gap-3 rounded-[var(--radius-sm)] px-2 py-1 transition-colors",
+                    isSel
+                      ? "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]"
+                      : "hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]",
+                  ]}
+                >
+                  <span class="flex items-center gap-2">
+                    <span
+                      aria-hidden="true"
+                      class:list={[
+                        "grid h-3.5 w-3.5 place-items-center rounded-[2px] border",
+                        isSel
+                          ? "border-[var(--color-primary-contrast)] bg-[var(--color-primary-contrast)] text-[var(--color-primary)]"
+                          : "border-[var(--color-border)]",
+                      ]}
+                    >
+                      {isSel ? "✓" : ""}
+                    </span>
+                    {bucket.label}
+                  </span>
+                  <span class:list={["text-xs", isSel ? "opacity-80" : "text-[var(--color-muted)]"]}>
+                    {fv.count}
+                  </span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <form method="get" action={basePath}>
+        {query.sort && <input type="hidden" name="sort" value={query.sort} />}
+        {query.availability && query.availability !== "all" && (
+          <input type="hidden" name="availability" value={query.availability} />
+        )}
+        {Object.entries(query.filters ?? {}).flatMap(([name, values]) =>
+          values.map((v) => (
+            <input type="hidden" name={name === "tags" ? "tag" : `opt.${name}`} value={v} />
+          )),
+        )}
+        <div class="flex items-center gap-2">
+          <label class="sr-only" for="priceMin">Minimum price</label>
+          <input
+            id="priceMin"
+            type="number"
+            name="priceMin"
+            min="0"
+            placeholder="Min"
+            value={query.priceMin ?? ""}
+            class="w-20 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1"
+          />
+          <span aria-hidden="true" class="text-[var(--color-muted)]">–</span>
+          <label class="sr-only" for="priceMax">Maximum price</label>
+          <input
+            id="priceMax"
+            type="number"
+            name="priceMax"
+            min="0"
+            placeholder="Max"
+            value={query.priceMax ?? ""}
+            class="w-20 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1"
+          />
+          <button
+            type="submit"
+            class="rounded-[var(--radius-sm)] bg-[var(--color-primary)] px-3 py-1 text-xs font-medium text-[var(--color-primary-contrast)]"
+          >
+            Go
+          </button>
+        </div>
+      </form>
+    </fieldset>
+  </div>
+</aside>

package/apps/storefront/src/components/plp/Pagination.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * Numbered pagination (SEO-friendly, brief §5 default) + a "Load more" link.
+ * Both are plain anchors carrying the full query, so they're crawlable and
+ * back-button safe. "Load more" simply links to the next page; with JS it could
+ * be progressively enhanced to append, but the no-JS path stays correct.
+ */
+import type { ListProductsQuery } from "@tot/public-runtime";
+import { buildQueryString } from "@/lib/url";
+
+interface Props {
+  query: ListProductsQuery;
+  basePath: string;
+  page: number;
+  pageSize: number;
+  total: number;
+}
+const { query, basePath, page, pageSize, total } = Astro.props;
+const pageCount = Math.max(1, Math.ceil(total / pageSize));
+if (pageCount <= 1) {
+  // nothing to render
+}
+
+const href = (p: number) => basePath + buildQueryString(query, { page: p });
+
+// Compact page-number window.
+const windowSize = 5;
+let start = Math.max(1, page - Math.floor(windowSize / 2));
+let end = Math.min(pageCount, start + windowSize - 1);
+start = Math.max(1, end - windowSize + 1);
+const pages = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+const hasNext = page < pageCount;
+---
+
+{pageCount > 1 && (
+  <nav aria-label="Pagination" class="mt-12 flex flex-col items-center gap-6">
+    {hasNext && (
+      <a
+        href={href(page + 1)}
+        rel="next"
+        class="rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-8 py-3 font-display text-sm font-medium transition-colors hover:border-[var(--color-accent)] hover:text-[var(--color-accent-ink)]"
+      >
+        Load more
+      </a>
+    )}
+
+    <ul class="flex items-center gap-1">
+      <li>
+        <a
+          href={href(Math.max(1, page - 1))}
+          rel="prev"
+          aria-label="Previous page"
+          aria-disabled={page === 1}
+          class:list={[
+            "grid h-9 w-9 place-items-center rounded-[var(--radius-sm)]",
+            page === 1 ? "pointer-events-none text-[var(--color-muted)] opacity-40" : "hover:bg-[var(--color-surface)]",
+          ]}
+        >‹</a>
+      </li>
+      {start > 1 && (
+        <>
+          <li><a href={href(1)} class="grid h-9 w-9 place-items-center rounded-[var(--radius-sm)] hover:bg-[var(--color-surface)]">1</a></li>
+          {start > 2 && <li aria-hidden="true" class="px-1 text-[var(--color-muted)]">…</li>}
+        </>
+      )}
+      {pages.map((p) => (
+        <li>
+          <a
+            href={href(p)}
+            aria-current={p === page ? "page" : undefined}
+            class:list={[
+              "grid h-9 w-9 place-items-center rounded-[var(--radius-sm)] font-display text-sm",
+              p === page
+                ? "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]"
+                : "hover:bg-[var(--color-surface)]",
+            ]}
+          >{p}</a>
+        </li>
+      ))}
+      {end < pageCount && (
+        <>
+          {end < pageCount - 1 && <li aria-hidden="true" class="px-1 text-[var(--color-muted)]">…</li>}
+          <li><a href={href(pageCount)} class="grid h-9 w-9 place-items-center rounded-[var(--radius-sm)] hover:bg-[var(--color-surface)]">{pageCount}</a></li>
+        </>
+      )}
+      <li>
+        <a
+          href={href(Math.min(pageCount, page + 1))}
+          aria-label="Next page"
+          aria-disabled={!hasNext}
+          class:list={[
+            "grid h-9 w-9 place-items-center rounded-[var(--radius-sm)]",
+            !hasNext ? "pointer-events-none text-[var(--color-muted)] opacity-40" : "hover:bg-[var(--color-surface)]",
+          ]}
+        >›</a>
+      </li>
+    </ul>
+  </nav>
+)}