@asteby/storefront-react 0.15.0 → 0.16.0

package/README.md

@@ -624,6 +624,42 @@ useOpenCartDrawerWhenDone(fetchers.some(isAdd), { skip: silent })
 - Estilos: `cart.css` (CSS plano con los tokens de la tienda) y/o `classNames` por pieza (Tailwind). Cada pieza lleva `data-sf-cart-*`.
 - `renderLine`, `renderImage`, `icons`, `notice` y `isDefaultVariantTitle` cubren las variaciones de cada tienda.
 
+### Agregado optimista (`cartOptimistic`, `useOptimisticAdd`)
+
+Al pulsar «Agregar» la fila aparece YA en el cajón, el contador sube y el cajón se abre (sin mover el foco al botón de cierre); cuando OPS responde, el carrito real la sustituye. Si la acción falla (409 sin existencias, `store_not_ready`, red, 5xx, tiempo agotado) la fila se quita, el contador regresa y aparece «No pudimos agregar X: motivo» (`role="alert"`, descartable); si el cajón queda vacío por el fallo, se cierra. **Solo es la fila**: precios, totales, envío e impuestos los dicta siempre OPS; el subtotal conserva el último valor de OPS con «calculando…» hasta confirmar. Sin JavaScript el formulario de la ruta sigue funcionando igual.
+
+```tsx
+import { useFetcher } from 'react-router'
+import { useOptimisticAdd, useOptimisticCartCount } from '@asteby/storefront-react/cart'
+
+function AddToCart({ product, variant }) {
+  const fetcher = useFetcher()
+  const { add } = useOptimisticAdd(fetcher) // confirma o revierte cuando el fetcher termina
+  return (
+    <fetcher.Form method="post" action="/carrito"
+      onSubmit={(e) => {
+        e.preventDefault()
+        const form = e.currentTarget
+        add(
+          { variantId: variant.id, title: product.title, variantTitle: variant.title, image: product.featured_image, price: variant.price, quantity: 1 },
+          () => fetcher.submit(form),
+        )
+      }}>
+      <input type="hidden" name="intent" value="add" />
+      <input type="hidden" name="variant_id" value={variant.id} />
+      <button type="submit">Agregar</button>
+    </fetcher.Form>
+  )
+}
+
+const badge = useOptimisticCartCount(cart?.total_quantity ?? 0) // contador de la cabecera
+```
+
+- La acción de ruta debe devolver el error en `fetcher.data` (`{ error: { code, status } }`, `{ ok: false }`, `{ success: false }` o `{ status >= 400 }`); para otro formato pasa `useOptimisticAdd(fetcher, { settle: (data) => ({ ok: true }) | ({ ok: false, reason }) })`. `describeAddFailure({ status, code })` da el motivo en es-MX.
+- API sin React: `cartOptimistic.add(input, { open?, timeoutMs? })` devuelve el id de la acción; `confirm(id)`, `rollback(id, reason)`, `discard(id)` (sin aviso), `dismissNotice(id)`, `reset()`. Con `input.key` repetir la llamada no suma otra vez (doble clic); la misma variante comparte una fila y cada acción se confirma o revierte por separado, en cualquier orden.
+- Un segundo `add` con el mismo fetcher antes de terminar da por entregado el anterior (el router lo reemplaza y manda el carrito real de la revalidación). Si el componente se desmonta, las filas en vuelo se descartan sin aviso.
+- `optimisticLabels` en `CartDrawer` cambia los textos (`adding`, `added` «Agregado al carrito» en región `aria-live="polite"`, `calculating`, `failed(title, reason)`, `dismiss`). `cart.css` ya estiliza `data-sf-cart-line-pending`, `data-sf-cart-notice` y respeta `prefers-reduced-motion`.
+
 ## Compatibilidad de vehículos (`@asteby/storefront-react/fitment`)
 
 Módulo opcional y sin interfaz para tiendas de refacciones: catálogo marca → modelo → año → motor, clave de vehículo, opciones en cascada del selector y estado de compatibilidad de cada pieza. No trae textos ni marcas: los prefijos de etiqueta, el atributo de la tabla de compatibilidad y las grafías del backend se inyectan con `fitmentConfig` / `parseCatalog`.
@@ -703,3 +739,45 @@ export default function Login() {
 - `createAuthAction({ storefront, customerCookie, safeNext?, defaultNext?, clientIp?, capabilities? })` -> `({ request }) => Promise<Response | AuthActionData>`. Un solo `POST` con campo `intent`: `login`, `register`, `verify`, `otp-request`, `otp-login`, `forgot`, `reset`. Éxito: `303` a `next` con `Set-Cookie` de la sesión. Si no, `AuthActionData` (`{ ok, step?, email?, error?: { code, field? } }`, sin textos ni contraseñas). `forgot` siempre avanza a `reset` (no revela qué correos tienen cuenta).
 - `<AccountAuth>`: `classNames` por pieza, atributos `data-sf-account-*`, `locale` (`es` por omisión, `en`), `messages` para cambiar cualquier texto, `form` para el `Form` del router. Con el mock (`createMockStorefront`) funciona entera: código `000000`.
 - Sin JavaScript funciona el inicio de sesión con contraseña y los pasos que devuelve la action; el cambio entre pantallas (enlaces) necesita JavaScript.
+
+## Facturación y constancia fiscal (`/fiscal`)
+
+Subruta `@asteby/storefront-react/fiscal` (+ `/fiscal/server`, + `fiscal.css` opcional). Todo sale de `Region.fiscal_id` (etiquetas, formato, regímenes, usos, documentos); el núcleo no sabe de ningún país. Textos es-MX por omisión, `locale="en"` o `messages` para otros.
+
+- `FiscalIdentityFields`: ID fiscal (mayúsculas, sin espacios, validado con el patrón de la región), razón social, CP fiscal, régimen (filtrado por tipo de persona si pasas `personTypeOf`, p. ej. `personTypeByLength({ individual: 13, company: 12 })`) y uso (filtrado por `allowed_regimes`). Controles `invoice.<campo>`.
+- `IdentityDocumentReader`: «Sube tu constancia». Lee el PDF en el dispositivo (pdf.js se carga bajo demanda con `import()`, nunca en el bundle principal) y requiere `workerSrc`, un `pdf.worker.mjs` que sirve TU sitio (sin CDN). Muestra los campos prellenados con la marca «De tu constancia», avisos (QR, vigencia, régimen) y errores (no PDF, tamaño, escaneado, contraseña) con salida a captura manual. Nunca muestra ni conserva lo que la región lista en `discard_fields` (CURP, calle...). Entrega valores + evidencia (`buildDocumentEvidence`).
+- `InvoiceToggle`: «Necesito factura» colapsado; perfil guardado (RFC enmascarado, Cambiar / Usar otros datos), lector o captura manual. `onChange` da `{ requested, invoice, ready, source, payLabel }` (`Pagar` / `Pagar y facturar`).
+- `InvoiceStatusCard`: los estados de una `InvoiceSummary` (sin pedir, esperando pago, en proceso con `onRefresh` cada 10 s máx. 1 min, emitida, faltan datos, revisión, fuera de plazo, no disponible, cancelada).
+- `/fiscal/server`: `loadFiscalContext(sf)` (región + `capabilities.invoicing`, caché corta, degrada a «sin facturación» sin lanzar) y `createInvoiceAction({ storefront, customerCookie })` con intents `set-invoice`, `save-profile`, `request-invoice`, `clear-profile` y `extract-document` (subida sin JS: se lee en memoria con el mismo motor, 5 MiB / 6 páginas / 3 s, sin disco ni logs; el archivo se descarta).
+
+```tsx
+// app/routes/checkout.tsx (React Router)
+import { InvoiceToggle } from '@asteby/storefront-react/fiscal'
+import { createInvoiceAction, loadFiscalContext } from '@asteby/storefront-react/fiscal/server'
+import '@asteby/storefront-react/fiscal.css'
+
+export const loader = async () => ({ fiscal: await loadFiscalContext(storefront) })
+export const action = createInvoiceAction({ storefront, customerCookie })
+
+export default function Checkout() {
+  const { fiscal } = useLoaderData<typeof loader>()
+  const data = useActionData<typeof action>()
+  const [pay, setPay] = useState('Pagar')
+  return (
+    <Form method="post" encType="multipart/form-data">
+      {fiscal.region && (
+        <InvoiceToggle region={fiscal.region} capabilities={fiscal.invoicing} profile={customer?.fiscal} data={data}
+          canSave={!!customer} workerSrc="/assets/pdf.worker.mjs" serverUpload noJsHref="?factura=1"
+          personTypeOf={personTypeByLength({ individual: 13, company: 12 })}
+          onChange={(s) => setPay(s.payLabel)} />
+      )}
+      <button type="submit" name="intent" value="set-invoice">{pay}</button>
+    </Form>
+  )
+}
+
+// Cuenta: <IdentityDocumentReader region={region} workerSrc=... onConfirm={...} /> con intent save-profile (+ campo consent).
+// Pedido:  <InvoiceStatusCard invoice={order.invoice} available={fiscal.available} onRefresh={revalidate} />
+```
+
+CSP: el lector necesita `worker-src 'self'` (o el origen que sirva el worker). Sin `workerSrc` el navegador no puede leer el PDF y el comprador pasa a captura manual.

package/dist/cart.cjs

@@ -72,9 +72,17 @@ function useResolvedLocale(locale) {
 }
 var isOpen = false;
 var listeners = /* @__PURE__ */ new Set();
+var quietOpen = false;
+function setQuietOpen(next) {
+  quietOpen = next;
+}
+function isQuietOpen() {
+  return quietOpen;
+}
 function set(next) {
   if (isOpen === next) return;
   isOpen = next;
+  if (!next) quietOpen = false;
   for (const l of [...listeners]) l();
 }
 var subscribe = (l) => {
@@ -114,6 +122,191 @@ function handleCartLinkClick(e) {
   e.preventDefault();
   openCartDrawer();
 }
+var DEFAULT_TIMEOUT_MS = 3e4;
+var actions = [];
+var notices = [];
+var announcement = { kind: null, n: 0 };
+var seq = 0;
+var timers = /* @__PURE__ */ new Map();
+var listeners2 = /* @__PURE__ */ new Set();
+var snapshot = compute();
+function compute() {
+  const byVariant = /* @__PURE__ */ new Map();
+  for (const a of actions) {
+    const row = byVariant.get(a.variantId);
+    if (row) {
+      row.quantity += a.quantity;
+      row.actionIds.push(a.id);
+    } else {
+      byVariant.set(a.variantId, {
+        variantId: a.variantId,
+        title: a.title,
+        variantTitle: a.variantTitle,
+        productHandle: a.productHandle,
+        image: a.image,
+        price: a.price,
+        quantity: a.quantity,
+        actionIds: [a.id]
+      });
+    }
+  }
+  const rows = [...byVariant.values()];
+  return { rows, quantity: rows.reduce((n, r) => n + r.quantity, 0), notices, announcement };
+}
+function emit() {
+  snapshot = compute();
+  for (const l of [...listeners2]) l();
+}
+var subscribe2 = (l) => {
+  listeners2.add(l);
+  return () => {
+    listeners2.delete(l);
+  };
+};
+var EMPTY = { rows: [], quantity: 0, notices: [], announcement: { kind: null, n: 0 } };
+function drop(id) {
+  const a = actions.find((x) => x.id === id);
+  if (!a) return void 0;
+  actions = actions.filter((x) => x.id !== id);
+  const t = timers.get(id);
+  if (t) clearTimeout(t);
+  timers.delete(id);
+  return a;
+}
+function announce() {
+  announcement = { kind: "added", n: announcement.n + 1 };
+}
+var cartOptimistic = {
+  /**
+   * Inserta YA la fila provisional, sube el contador y abre el cajón sin robar el foco. Devuelve el id de la acción
+   * para `confirm` / `rollback`. Una acción por clic: la misma variante suma cantidad en una sola fila.
+   */
+  add(input, options = {}) {
+    if (input.key) {
+      const live = actions.find((a) => a.key === input.key);
+      if (live) return live.id;
+    }
+    const id = `opt-${++seq}`;
+    const quantity = Math.max(1, Math.floor(input.quantity ?? 1));
+    actions = [...actions, { ...input, id, quantity }];
+    const ms = options.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+    if (ms > 0 && typeof setTimeout === "function") {
+      timers.set(id, setTimeout(() => cartOptimistic.rollback(id, describeAddFailure({ code: "timeout" })), ms));
+    }
+    announce();
+    if (options.open !== false) {
+      setQuietOpen(true);
+      openCartDrawer();
+    }
+    emit();
+    return id;
+  },
+  /** OPS confirmó: la fila provisional sale y el carrito real (ya en `cart`) ocupa su lugar. */
+  confirm(id) {
+    if (!drop(id)) return;
+    announce();
+    emit();
+  },
+  /** Falló: se quita la acción (y su cantidad) y se avisa «No pudimos agregar X: motivo». */
+  rollback(id, reason = "unknown") {
+    const a = drop(id);
+    if (!a) return;
+    notices = [...notices, { id: `n-${++seq}`, title: a.title, reason }];
+    emit();
+  },
+  /** Quita la acción sin avisar (el componente que la lanzó se desmontó). */
+  discard(id) {
+    if (drop(id)) emit();
+  },
+  dismissNotice(id) {
+    notices = notices.filter((n) => n.id !== id);
+    emit();
+  },
+  /** Limpia todo (pruebas, cierre de sesión). */
+  reset() {
+    for (const t of timers.values()) clearTimeout(t);
+    timers.clear();
+    actions = [];
+    notices = [];
+    announcement = { kind: null, n: 0 };
+    setQuietOpen(false);
+    emit();
+  },
+  getSnapshot: () => snapshot
+};
+function useOptimisticCart() {
+  return react.useSyncExternalStore(subscribe2, () => snapshot, () => EMPTY);
+}
+function useOptimisticCartCount(base) {
+  return base + useOptimisticCart().quantity;
+}
+function describeAddFailure(error) {
+  const code = error?.code;
+  const status = error?.status;
+  if (code === "store_not_ready") return "la tienda est\xE1 cerrada por ahora";
+  if (code === "timeout") return "tard\xF3 demasiado, intenta de nuevo";
+  if (status === 409 || code === "out_of_stock" || code === "insufficient_stock") return "sin existencias suficientes";
+  if (status === 0 || code === "network" || !status && !code) return "revisa tu conexi\xF3n";
+  if (status && status >= 500) return "hubo un problema, intenta de nuevo";
+  if (status === 404) return "el producto ya no est\xE1 disponible";
+  return error?.message?.trim() || "intenta de nuevo";
+}
+function defaultAddOutcome(data) {
+  if (!data || typeof data !== "object") return { ok: true };
+  const d = data;
+  const status = typeof d.status === "number" ? d.status : void 0;
+  const err = d.error && typeof d.error === "object" ? d.error : d;
+  const code = typeof err.code === "string" ? err.code : void 0;
+  const failed = d.error != null || d.ok === false || d.success === false || status !== void 0 && status >= 400;
+  if (!failed) return { ok: true };
+  return { ok: false, reason: describeAddFailure({ status: status ?? (typeof err.status === "number" ? err.status : void 0), code, message: typeof err.message === "string" ? err.message : void 0 }) };
+}
+function useOptimisticAdd(fetcher, options = {}) {
+  const current = react.useRef(null);
+  const was = react.useRef(false);
+  const settleRef = react.useRef(options.settle);
+  settleRef.current = options.settle;
+  react.useEffect(() => {
+    const busy = fetcher.state !== "idle";
+    const id = current.current;
+    if (was.current && !busy && id) {
+      current.current = null;
+      const out = (settleRef.current ?? defaultAddOutcome)(fetcher.data);
+      if (out.ok) cartOptimistic.confirm(id);
+      else cartOptimistic.rollback(id, out.reason);
+    }
+    was.current = busy;
+  }, [fetcher.state, fetcher.data]);
+  react.useEffect(
+    () => () => {
+      if (current.current) cartOptimistic.discard(current.current);
+      current.current = null;
+    },
+    []
+  );
+  return {
+    add(input, submit) {
+      const prev = current.current;
+      const id = cartOptimistic.add(input);
+      if (prev && prev !== id) cartOptimistic.confirm(prev);
+      current.current = id;
+      try {
+        submit();
+      } catch (e) {
+        current.current = null;
+        cartOptimistic.rollback(id, describeAddFailure({ message: e instanceof Error ? e.message : void 0 }));
+      }
+      return id;
+    }
+  };
+}
+var DEFAULT_OPTIMISTIC_LABELS = {
+  adding: "Agregando\u2026",
+  added: "Agregado al carrito",
+  calculating: "calculando\u2026",
+  failed: (title, reason) => `No pudimos agregar ${title}: ${reason}`,
+  dismiss: "Descartar aviso"
+};
 var DEFAULT_FORM = {
   intentField: "intent",
   lineField: "line_id",
@@ -138,6 +331,9 @@ function CartDrawer(props) {
   const { cart, labels, paths, shipping, notice, upsell, upsellTitle, icons, classNames: cx = {}, onOpenChange } = props;
   const locale = useResolvedLocale(props.locale);
   const { open } = useCartDrawer();
+  const opt = useOptimisticCart();
+  const ol = { ...DEFAULT_OPTIMISTIC_LABELS, ...props.optimisticLabels };
+  const quiet = open && isQuietOpen();
   const titleId = react.useId();
   const upsellId = react.useId();
   const { ref, onBackdropClick } = useModalDialog({ open, onClose: () => closeCartDrawer() });
@@ -145,12 +341,20 @@ function CartDrawer(props) {
   react.useEffect(() => {
     onOpenChange?.(open);
   }, [open]);
-  if (!open) return null;
+  const realLines = cart?.lines.length ?? 0;
+  const rollbackEmpty = open && quiet && realLines === 0 && opt.rows.length === 0 && opt.notices.length > 0;
+  react.useEffect(() => {
+    if (rollbackEmpty) closeCartDrawer();
+  }, [rollbackEmpty]);
+  if (!open) return opt.notices.length ? /* @__PURE__ */ jsxRuntime.jsx(OptimisticNotices, { notices: opt.notices, labels: ol, classNames: cx }) : null;
   const money = props.renderMoney ?? ((m) => storefront.formatMoney(m, locale));
   const link = props.renderLink ?? (({ href, className, children, onClick }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, onClick, children }));
-  const count = cart?.total_quantity ?? 0;
+  const pendingByVariant = new Map(opt.rows.map((r) => [r.variantId, r]));
+  const count = (cart?.total_quantity ?? 0) + opt.quantity;
   const lines = cart?.lines ?? [];
-  const empty = !cart || lines.length === 0;
+  const extraRows = opt.rows.filter((r) => !lines.some((l) => l.merchandise.id === r.variantId));
+  const pending = opt.rows.length > 0;
+  const empty = lines.length === 0 && extraRows.length === 0;
   const close = () => closeCartDrawer();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "dialog",
@@ -169,8 +373,10 @@ function CartDrawer(props) {
             labels.title,
             count > 0 ? ` (${count})` : ""
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: close, "aria-label": labels.close, className: cx.close, "data-sf-cart-close": "", "data-sf-autofocus": "", children: icons?.close ?? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: close, "aria-label": labels.close, className: cx.close, "data-sf-cart-close": "", "data-sf-autofocus": quiet ? void 0 : "", children: icons?.close ?? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(OptimisticNotices, { notices: opt.notices, labels: ol, classNames: cx }),
+        /* @__PURE__ */ jsxRuntime.jsx(OptimisticStatus, { kind: opt.announcement.kind, n: opt.announcement.n, text: ol.added }),
         empty ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.empty, "data-sf-cart-empty": "", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.emptyTitle, "data-sf-cart-empty-title": "", children: labels.empty }),
           labels.emptyHint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.emptyHint, "data-sf-cart-empty-hint": "", children: labels.emptyHint }) : null,
@@ -199,16 +405,25 @@ function CartDrawer(props) {
               icons?.shippingReached,
               notice
             ] }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx.lines, "data-sf-cart-lines": "", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(DrawerLine, { line, props, money, link, close }, line.id)) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx.lines, "data-sf-cart-lines": "", children: [
+              lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(DrawerLine, { line, props, money, link, close, pending: pendingByVariant.get(line.merchandise.id), pendingLabel: ol.adding }, line.id)),
+              extraRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(PendingLine, { row, props, money, label: ol.adding }, `pending-${row.variantId}`))
+            ] }),
             upsell ? /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx.upsell, "data-sf-cart-upsell": "", "aria-labelledby": upsellTitle ? upsellId : void 0, children: [
               upsellTitle ? /* @__PURE__ */ jsxRuntime.jsx("h3", { id: upsellId, className: cx.upsellTitle, children: upsellTitle }) : null,
               upsell
             ] }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.footer, "data-sf-cart-footer": "", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.subtotal, "data-sf-cart-subtotal": "", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.subtotal, "data-sf-cart-subtotal": "", "aria-busy": pending || void 0, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.subtotalLabel, children: labels.subtotal }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.subtotalValue, "data-sf-cart-subtotal-value": "", children: cart ? money(cart.cost.subtotal) : null })
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.subtotalValue, "data-sf-cart-subtotal-value": "", children: [
+                cart ? money(cart.cost.subtotal) : null,
+                pending ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-sf-cart-calculating": "", children: [
+                  cart ? " " : "",
+                  ol.calculating
+                ] }) : null
+              ] })
             ] }),
             labels.note ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, "data-sf-cart-note": "", children: labels.note }) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.actions, "data-sf-cart-actions": "", children: [
@@ -226,12 +441,14 @@ function DrawerLine({
   props,
   money,
   link,
-  close
+  close,
+  pending,
+  pendingLabel
 }) {
   const { labels, paths, icons, classNames: cx = {} } = props;
   const f = { ...DEFAULT_FORM, ...props.form };
   const { Form, formData } = (props.useLineForm ?? useNativeForm)();
-  const quantity = formData ? Number(formData.get(f.quantityField) ?? 0) : line.quantity;
+  const quantity = formData ? Number(formData.get(f.quantityField) ?? 0) : line.quantity + (pending?.quantity ?? 0);
   if (formData && (formData.get(f.intentField) === f.removeIntent || quantity === 0)) return null;
   const merch = line.merchandise;
   const isDefault = props.isDefaultVariantTitle ?? defaultIsDefaultVariant;
@@ -266,18 +483,57 @@ function DrawerLine({
         ] }),
         price
       ] }),
-      controls
+      controls,
+      pending ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.variant, "data-sf-cart-pending-label": "", children: pendingLabel }) : null
     ] })
   ] });
 }
+function PendingLine({ row, props, money, label }) {
+  const { classNames: cx = {} } = props;
+  const isDefault = props.isDefaultVariantTitle ?? defaultIsDefaultVariant;
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx.line, "data-sf-cart-line": "", "data-sf-cart-line-pending": "", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.image, "data-sf-cart-image": "", children: row.image ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: row.image.url, alt: row.image.alt ?? "", width: 80, height: 80, decoding: "async" }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.lineMain, "data-sf-cart-line-main": "", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.lineHead, "data-sf-cart-line-head": "", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.lineText, "data-sf-cart-line-text": "", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.lineTitle, "data-sf-cart-line-title": "", children: row.title }),
+          row.variantTitle && !isDefault(row.variantTitle) ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.variant, "data-sf-cart-variant": "", children: row.variantTitle }) : null
+        ] }),
+        row.price ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.price, "data-sf-cart-price": "", children: money(row.price) }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx.variant, "data-sf-cart-pending-label": "", children: [
+        label,
+        " \xB7 \xD7",
+        row.quantity
+      ] })
+    ] })
+  ] });
+}
+function OptimisticStatus({ kind, n, text }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "data-sf-cart-status": "", style: VISUALLY_HIDDEN, children: kind === "added" ? `${text}${n % 2 ? "" : "\u200B"}` : "" });
+}
+var VISUALLY_HIDDEN = { position: "absolute", width: 1, height: 1, margin: -1, padding: 0, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", border: 0 };
+function OptimisticNotices({ notices: notices2, labels, classNames: cx }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", "aria-live": "assertive", "data-sf-cart-notices": "", className: cx.notices, children: notices2.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-sf-cart-notice": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.failed(n.title, n.reason) }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => cartOptimistic.dismissNotice(n.id), "aria-label": labels.dismiss, "data-sf-cart-notice-dismiss": "", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
+  ] }, n.id)) });
+}
 
 exports.CartDrawer = CartDrawer;
+exports.DEFAULT_OPTIMISTIC_LABELS = DEFAULT_OPTIMISTIC_LABELS;
+exports.cartOptimistic = cartOptimistic;
 exports.closeCartDrawer = closeCartDrawer;
+exports.defaultAddOutcome = defaultAddOutcome;
+exports.describeAddFailure = describeAddFailure;
 exports.handleCartLinkClick = handleCartLinkClick;
 exports.isCartDrawerOpen = isCartDrawerOpen;
 exports.openCartDrawer = openCartDrawer;
 exports.toggleCartDrawer = toggleCartDrawer;
 exports.useCartDrawer = useCartDrawer;
 exports.useOpenCartDrawerWhenDone = useOpenCartDrawerWhenDone;
+exports.useOptimisticAdd = useOptimisticAdd;
+exports.useOptimisticCart = useOptimisticCart;
+exports.useOptimisticCartCount = useOptimisticCartCount;
 //# sourceMappingURL=cart.cjs.map
 //# sourceMappingURL=cart.cjs.map