Load More

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Load More — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A self-replacing pagination trigger. It appends the next page and swaps a
8// fresh trigger in its place; when the server omits the trigger, the chain
9// ends. Two modes:
10//   - "click"    → a real <button>. Works with no JS (it's a plain button);
11//                  htmx upgrades the click into a request.
12//   - "intersect"/"revealed" → a scroll sentinel that fires when it enters
13//                  the viewport (IntersectionObserver under the hood).
14//
15// shadcn/ui has no "load more" widget (it's a hypermedia loading pattern, not
16// a Radix primitive), so there is no React source of truth to mirror. We build
17// it straight from the htmx v4 loading patterns and the platform docs:
18//   repos/htmx/www/src/content/patterns/01-loading/01-click-to-load.md
19//     (button + hx-swap="outerHTML" + hx-target="this" → self-replace)
20//   repos/htmx/www/src/content/patterns/01-loading/02-infinite-scroll.md
21//     (sentinel + hx-trigger="revealed" / "intersect once")
22//   repos/htmx/www/src/content/reference/01-attributes/06-hx-trigger.md
23//     (verified v4: synthetic `revealed` and `intersect` events; `intersect`
24//      supports root:<sel> and threshold:<float>; use `intersect once` inside
25//      an overflow-y:scroll container, `revealed` for the page viewport)
26//   repos/htmx/www/src/content/reference/01-attributes/07-hx-swap.md
27//     (verified v4: `outerHTML` replaces the target element wholesale)
28//   repos/htmx/www/src/content/reference/01-attributes/19-hx-indicator.md
29//     (the htmx-request class rides on this element while in flight; the
30//      .htmx-indicator child is revealed → our skeleton/spinner fallback)
31//   repos/mdn/files/en-us/web/api/intersection_observer_api/index.md
32//     (the platform API htmx's intersect/revealed triggers are built on —
33//      "implementing infinite-scrolling websites … as you scroll")
34//
35// Why a real <button> for the click mode: progressive enhancement. Without JS
36// the button still submits (wrap it in a <form action> if you need a true
37// no-JS navigation); with htmx it self-replaces in place. No emulation of any
38// platform feature — the trigger IS the platform's button / IntersectionObserver.
39//
40// Zero JS of our own: htmx owns the request lifecycle and the IntersectionObserver.
41// … truncated