Edit In Place

1/** @jsxImportSource hono/jsx */
2import type { Child, PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4import { buttonClasses } from "@/registry/ui/button"
5import { inputClasses } from "@/registry/ui/input"
6import { labelClasses } from "@/registry/ui/label"
7 
8// Edit In Place — shadcn-htmx, htmx v4 + Tailwind v4.
9//
10// The canonical htmx editable record: a read-only view with an "Edit"
11// affordance that swaps in a pre-filled form. Save = PUT; Cancel re-GETs
12// the view. No modal, no custom JS — the whole thing rides on outerHTML
13// swaps over REST.
14//
15// Built on:
16//   repos/htmx/www/src/content/patterns/03-records/04-edit-in-place.md
17//     (GET /users/1 → view, GET /users/1/edit → form, PUT /users/1 → view)
18//   repos/htmx/www/src/content/reference/01-attributes/08-hx-target.md:12-17
19//     hx-target="this" targets the element making the request.
20//   repos/htmx/www/src/content/reference/01-attributes/07-hx-swap.md:35-41
21//     hx-swap="outerHTML" replaces the whole element with the response.
22//   repos/htmx/www/src/content/reference/01-attributes/03-hx-put.md
23//     hx-put issues the REST PUT on Save.
24//
25// Native semantics:
26//   - The view is a <dl> description list — the right element for
27//     name/value record pairs.
28//     repos/mdn/files/en-us/web/html/reference/elements/dl/index.md
29//   - The edit affordance is a real <button> and the editor is a real
30//     <form> with native <input>s, so constraint validation, Enter-to-
31//     submit, and focus all come from the platform.
32//     repos/mdn/files/en-us/web/html/reference/elements/form/index.md
33//
34// Class strings mirror Card (rounded bordered container) + Input + Button,
35// so the view and the editor occupy the same visual footprint and the swap
36// looks like an in-place toggle rather than a layout jump.
37//
38// Style analogues: registry/ui/card.tsx, registry/ui/input.tsx,
39// registry/ui/button.tsx, registry/ui/label.tsx.
40 
41// Shared container so the read-only view and the editor render at the same
42// size — the outerHTML swap then reads as a true in-place toggle.
43const container =
44  "flex w-full max-w-sm flex-col gap-4 rounded-xl border bg-card p-5 text-card-foreground shadow-sm"
45 
46// One field's label, styled as the small uppercase eyebrow shadcn uses for
47// record metadata.
48const fieldTermClass =
49  "text-xs font-medium tracking-wide text-muted-foreground uppercase"
50 
51const fieldValueClass = "mt-0.5 text-sm font-medium text-foreground"
52 
53// … truncated