Feed

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Feed — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn/ui has no "feed" component (it's a structural ARIA pattern, not a
8// widget), so there's no React source of truth to mirror. We build it
9// straight from the WAI-ARIA APG Feed pattern:
10//   repos/aria-practices/content/patterns/feed/feed-pattern.html
11//   repos/aria-practices/content/patterns/feed/examples/feed-display.html
12//   repos/aria-practices/content/patterns/feed/examples/js/feed.js
13//     (the PageUp/PageDown + Ctrl+Home/End reference implementation our
14//      site.js keyboard contract is modelled on)
15//
16// Why this shape:
17//   - A feed is a STRUCTURE, not a widget. Screen readers stay in reading
18//     mode; the role="feed" container establishes an interoperability
19//     contract for reliably loading content as the user scrolls (APG
20//     "About This Pattern"). So the container is a plain <div role="feed">,
21//     NOT focusable.
22//   - Each unit of content is a real <article> (which already maps to
23//     role="article" per the HTML AAM — we set role="article" explicitly to
24//     stay faithful to the APG example markup and defensive against older AT).
25//     repos/mdn/files/en-us/web/html/reference/elements/article/index.md
26//   - Each article is focusable (tabindex="0") so AT reading cursors can land
27//     on it and the page can scroll it into view (APG: the article containing
28//     the reading cursor must contain DOM focus).
29//   - aria-posinset / aria-setsize position each article in the set; setsize
30//     can be -1 when the total is unknown (infinite feed). APG roles/states.
31//   - aria-labelledby names each article from its title; aria-describedby
32//     points at the primary content so AT users can skim.
33//   - aria-busy on the feed flips true while a batch is loading and false
34//     once the DOM is stable. APG: "extremely important that aria-busy is set
35//     to false when the operation is complete." With htmx the busy attribute
36//     rides on the freshly-swapped placeholder, so it's only present during
37//     the in-flight request.
38//
39// htmx infinite scroll (verified against v4):
40//   repos/htmx/www/src/content/patterns/01-loading/02-infinite-scroll.md
41//   repos/htmx/www/src/content/reference/01-attributes/06-hx-trigger.md#revealed
42//   The trailing sentinel uses hx-trigger="revealed" + hx-get + hx-swap=
43// … truncated