3d:T7f3f,
// A release checklist, put in order by carrying its steps, each a card of its kind's
// hue with who does it. Every step goes anywhere. A step pressed without moving opens whole.
type Step = {
  id: string
  title: string
  kind: "build" | "check" | "ship"
  who: string
  face?: string
  note: string
}
const STEPS: Step[] = [
  {
    id: "notes",
    title: "write the release notes",
    kind: "check",
    who: "Adrian Galilea",
    face: "/adriangalilea.jpg",
    note: "What changed for the person using it, in their words.",
  },
  {
    id: "bump",
    title: "bump the version",
    kind: "build",
    who: "Ada Lovelace",
    note: "The version comes from the commits since the last release.",
  },
  {
    id: "build",
    title: "build every platform",
    kind: "build",
    who: "Ada Lovelace",
    note: "The Mac, the phone, the TV: each from the same commit.",
  },
  {
    id: "smoke",
    title: "smoke test on a phone",
    kind: "check",
    who: "Walter Cronkite",
    face: "/people/cronkite.jpg",
    note: "Install it, open it, play a minute of something.",
  },
  {
    id: "ship",
    title: "ship it",
    kind: "ship",
    who: "Adrian Galilea",
    face: "/adriangalilea.jpg",
    note: "Once every check is done.",
  },
]
const HUE: Record<Step["kind"], string> = {
  build: "oklch(68% 0.13 250)",
  check: "oklch(72% 0.14 155)",
  ship: "oklch(70% 0.16 40)",
}

/** The consumer's own move: the list hands it over, the consumer writes it. */
function moved<T>(items: readonly T[], { from, to }: DragListMove<T>): T[] {
  const rest = items.filter((_, i) => i !== from)
  return [...rest.slice(0, to), items[from] as T, ...rest.slice(to)]
}

function Checklist({ material }: { material: Material }) {
  const [steps, setSteps] = React.useState(STEPS)
  return (
    <DragList
      label="release checklist"
      material={material}
      className="w-full max-w-sm"
      items={steps}
      itemId={(s) => s.id}
      name={(s) => s.title}
      tint={(s) => HUE[s.kind]}
      onMove={(move) => setSteps((all) => moved(all, move))}
      onDelete={(s) => setSteps((all) => all.filter((x) => x.id !== s.id))}
      renderItem={(s) => (
        <>
          <CardKind>{s.kind}</CardKind>
          <p className="font-semibold text-sm">{s.title}</p>
          <CardFooter>
            <CardAuthor name={s.who} src={s.face} />
          </CardFooter>
        </>
      )}
      detail={(s) => (
        <>
          <CardKind>{s.kind}</CardKind>
          <p className="text-pretty text-sm text-current/70">{s.note}</p>
          <CardFooter>
            <CardAuthor name={s.who} src={s.face} />
          </CardFooter>
        </>
      )}
    />
  )
}

/** Plain on the page, or glass over one of two pictures, each with light and dark
 *  in it: a valley of dark trees under a pale cliff, a snowfield under a blue sky. */
const LOOKS = {
  plain: null,
  valley: "/lightbox/card.jpg",
  snow: "/lightbox/tall.jpg",
} as const
type Look = keyof typeof LOOKS

function Looks() {
  const [look, setLook] = React.useState<Look>("plain")
  const picture = LOOKS[look]
  return (
    <div className="w-full space-y-4">
      <ToggleGroup
        size="sm"
        aria-label="material"
        value={look}
        onValueChange={(v) => setLook(v as Look)}
      >
        <ToggleGroupItem value="plain">plain</ToggleGroupItem>
        <ToggleGroupItem value="valley">glass, valley</ToggleGroupItem>
        <ToggleGroupItem value="snow">glass, snow</ToggleGroupItem>
      </ToggleGroup>
      {picture === null ? (
        <Checklist material="plain" />
      ) : (
        <MaterialProvider material="glass">
          <Backdrop src={picture} className="w-full rounded-3xl p-6">
            <Checklist material="glass" />
          </Backdrop>
        </MaterialProvider>
      )}
    </div>
  )
}

// A rule, said where it bites: ship stays last. Carry a step below it, or ship above
// any step: the card wears the bad tone and says why; let go there, it flies home and
// leans toward where it was asked to go.
const LAST = ["tag the release", "upload the build", "ship it"]

function ShipLast() {
  const [steps, setSteps] = React.useState(LAST)
  const ship = (all: readonly string[]) => all.length - 1
  return (
    <DragList
      label="release steps, ship last"
      className="w-full max-w-xs"
      items={steps}
      itemId={(s) => s}
      name={(s) => s}
      allows={({ item, to }) =>
        item === "ship it" || to === ship(steps)
          ? "ship stays the last step"
          : true
      }
      onMove={(move) => setSteps((all) => moved(all, move))}
      renderItem={(s) => <p className="text-sm">{s}</p>}
    />
  )
}

<ShipLast />
3c:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$3d"}}]