Cart Item Transition

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import {
8  useOptimisticAction,
9  useReducedMotion,
10  useAnimatedNumber,
11  formatNumber,
12  statusVars,
13  type OptimisticPhase,
14  type StatusTone,
15} from "@/lib/motiq";
16 
17/**
18 * CartItemTransition — a single, app-controlled cart LINE ITEM that animates the
19 * realistic transitions a line goes through in a real cart: it arrives, its
20 * quantity and total change (optimistically, with rollback if the app's mutation
21 * fails), a variant is swapped, the price changes, stock turns limited or
22 * unavailable, it is removed, and it can be undone. It is NOT a cart, a
23 * checkout, or a store: it never fetches, prices, decides stock, mutates a
24 * backend, or touches payment. The host app owns every fact — unit price, line
25 * total, availability, inventory copy, discounts — and every side-effect runs
26 * through the app's async callbacks.
27 *
28 * What earns its keep over a static product card: an optimistic quantity/remove
29 * flow with automatic rollback + an honest failed/retry state, a price-change
30 * treatment that morphs the number *and* always states it as text (old → new,
31 * never colour alone), a variant-replace crossfade, an app-owned
32 * limited/unavailable state, and a remove → Undo affordance with correct focus
33 * management throughout.
34 *
35 * Deliberately NOT included: no exaggerated fly-to-cart arc, no manufactured
36 * urgency ("only 2 left!" countdowns), no invented discounts or stock. Inventory
37 * and price copy come from the app verbatim.
38 *
39 * Accessibility: quantity steppers are real <button>s with explicit labels and a
40 * text readout; price and price-change are rendered as text (never conveyed by
41 * animation or colour alone); limited/unavailable is stated in words with an
42 * icon; remove and undo are keyboard operable; focus is preserved on the pressed
43 * quantity control after a change, moves to Undo after a removal, and falls back
44 * to a stable control after undo; every transition renders in its final state
45 * under prefers-reduced-motion. Clean-room original.
46 */
47 
48/* -------------------------------------------------------------------------- */
49/* Types                                                                       */
50/* -------------------------------------------------------------------------- */
51 
52/** App-owned availability of the line. Inventory *copy* is separate + verbatim. */
53// … truncated