@asteby/storefront-react 0.14.0 → 0.16.0

package/dist/cart.d.cts

@@ -2,6 +2,19 @@ import * as react from 'react';
 import { ElementType, ReactNode } from 'react';
 import { Cart, CartLine, Money } from '@asteby/storefront';
 
+/** Textos del estado optimista. Por omisión es-MX; la tienda puede traducirlos o cambiarlos. */
+type CartDrawerOptimisticLabels = {
+    /** Estado discreto en la fila provisional. */
+    adding: string;
+    /** Anuncio `aria-live="polite"` al mostrar/confirmar la fila. */
+    added: string;
+    /** Junto al subtotal mientras OPS no confirma. */
+    calculating: string;
+    /** Aviso de error: «No pudimos agregar X: motivo». */
+    failed: (title: string, reason: string) => string;
+    dismiss: string;
+};
+declare const DEFAULT_OPTIMISTIC_LABELS: CartDrawerOptimisticLabels;
 type CartDrawerLabels = {
     /** Título; el cajón agrega " (N)" con la cantidad de unidades. */
     title: string;
@@ -56,7 +69,7 @@ type CartDrawerLinkProps = {
     children: ReactNode;
     onClick?: () => void;
 };
-type CartDrawerSlot = 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line' | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal' | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain' | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue';
+type CartDrawerSlot = 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line' | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal' | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain' | 'notices' | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue';
 type CartDrawerIcons = {
     close?: ReactNode;
     decrease?: ReactNode;
@@ -91,6 +104,8 @@ type CartDrawerProps = {
     icons?: CartDrawerIcons;
     /** Clases por pieza (además de los `data-sf-cart-*`), para tiendas con Tailwind. */
     classNames?: Partial<Record<CartDrawerSlot, string>>;
+    /** Textos de las filas provisionales y de los avisos (por omisión es-MX). */
+    optimisticLabels?: Partial<CartDrawerOptimisticLabels>;
     locale?: string;
     /** Se llama al abrir/cerrar por cualquier vía. */
     onOpenChange?: (open: boolean) => void;
@@ -105,6 +120,114 @@ type CartDrawerProps = {
  */
 declare function CartDrawer(props: CartDrawerProps): react.JSX.Element | null;
 
+/** Lo que la tienda sabe del producto al pulsar «Agregar». `price` es el precio unitario ya mostrado en la ficha. */
+type OptimisticLineInput = {
+    /** Variante agregada; dos acciones con la misma variante comparten una sola fila. */
+    variantId: string;
+    title: string;
+    variantTitle?: string | null | undefined;
+    productHandle?: string | undefined;
+    image?: {
+        url: string;
+        alt?: string | null | undefined;
+    } | null | undefined;
+    /** Precio unitario mostrado (solo se pinta, no se multiplica ni se suma). */
+    price?: Money | null | undefined;
+    /** Unidades de ESTA acción (por omisión 1). */
+    quantity?: number | undefined;
+    /** Clave de idempotencia: repetir `add` con una clave viva devuelve la misma acción sin sumar otra vez. */
+    key?: string | undefined;
+};
+type OptimisticAction = Required<Pick<OptimisticLineInput, 'variantId' | 'title'>> & Omit<OptimisticLineInput, 'quantity' | 'key'> & {
+    id: string;
+    quantity: number;
+    key?: string | undefined;
+};
+/** Fila provisional: todas las acciones en vuelo de una misma variante. */
+type OptimisticRow = {
+    variantId: string;
+    title: string;
+    variantTitle?: string | null | undefined;
+    productHandle?: string | undefined;
+    image?: {
+        url: string;
+        alt?: string | null | undefined;
+    } | null | undefined;
+    price?: Money | null | undefined;
+    /** Unidades agregadas que OPS aún no confirma. */
+    quantity: number;
+    actionIds: string[];
+};
+type OptimisticNotice = {
+    id: string;
+    title: string;
+    reason: string;
+};
+type OptimisticSnapshot = {
+    rows: readonly OptimisticRow[];
+    /** Unidades provisionales en total (para el contador). */
+    quantity: number;
+    notices: readonly OptimisticNotice[];
+    /** Último evento a anunciar en la región `aria-live="polite"`; `n` cambia en cada evento. */
+    announcement: {
+        kind: 'added' | null;
+        n: number;
+    };
+};
+type AddOutcome = {
+    ok: true;
+} | {
+    ok: false;
+    reason: string;
+};
+declare const 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: OptimisticLineInput, options?: {
+        open?: boolean;
+        timeoutMs?: number;
+    }): string;
+    /** OPS confirmó: la fila provisional sale y el carrito real (ya en `cart`) ocupa su lugar. */
+    confirm(id: string): void;
+    /** Falló: se quita la acción (y su cantidad) y se avisa «No pudimos agregar X: motivo». */
+    rollback(id: string, reason?: string): void;
+    /** Quita la acción sin avisar (el componente que la lanzó se desmontó). */
+    discard(id: string): void;
+    dismissNotice(id: string): void;
+    /** Limpia todo (pruebas, cierre de sesión). */
+    reset(): void;
+    getSnapshot: () => OptimisticSnapshot;
+};
+/** Estado optimista (filas, contador, avisos). En el servidor siempre vacío. */
+declare function useOptimisticCart(): OptimisticSnapshot;
+/** Contador para la cabecera: unidades del carrito de OPS más las que están en vuelo. */
+declare function useOptimisticCartCount(base: number): number;
+/** Motivo corto en es-MX a partir de un error de la acción (HTTP, código de OPS o red). */
+declare function describeAddFailure(error: {
+    status?: number | undefined;
+    code?: string | undefined;
+    message?: string | undefined;
+} | null | undefined): string;
+type FetcherLike = {
+    state: string;
+    data?: unknown;
+};
+/** Interpreta `fetcher.data` de la acción de ruta: `{ error }`, `{ success:false }`, `{ ok:false }` o `status >= 400` fallan. */
+declare function defaultAddOutcome(data: unknown): AddOutcome;
+/**
+ * Conecta un `useFetcher()` de React Router con el estado optimista. `add(input, submit)` inserta la fila, abre el
+ * cajón y llama a `submit()` (el `fetcher.submit(...)` de la tienda); al terminar el fetcher confirma o revierte.
+ * Un nuevo `add` con el mismo fetcher antes de terminar da por entregado el anterior (el router lo reemplaza y el
+ * carrito real que llega con la revalidación manda). Si el componente se desmonta, las filas se descartan sin aviso.
+ */
+declare function useOptimisticAdd(fetcher: FetcherLike, options?: {
+    settle?: (data: unknown) => AddOutcome;
+}): {
+    add(input: OptimisticLineInput, submit: () => void): string;
+};
+
 /** Abre el cajón del carrito desde cualquier parte. */
 declare function openCartDrawer(): void;
 /** Cierra el cajón del carrito. */
@@ -141,4 +264,4 @@ type ClickLike = {
  */
 declare function handleCartLinkClick(e: ClickLike): void;
 
-export { CartDrawer, type CartDrawerFormContract, type CartDrawerIcons, type CartDrawerLabels, type CartDrawerLineForm, type CartDrawerLinkProps, type CartDrawerPaths, type CartDrawerProps, type CartDrawerShipping, type CartDrawerSlot, closeCartDrawer, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone };
+export { type AddOutcome, CartDrawer, type CartDrawerFormContract, type CartDrawerIcons, type CartDrawerLabels, type CartDrawerLineForm, type CartDrawerLinkProps, type CartDrawerOptimisticLabels, type CartDrawerPaths, type CartDrawerProps, type CartDrawerShipping, type CartDrawerSlot, DEFAULT_OPTIMISTIC_LABELS, type OptimisticAction, type OptimisticLineInput, type OptimisticNotice, type OptimisticRow, type OptimisticSnapshot, cartOptimistic, closeCartDrawer, defaultAddOutcome, describeAddFailure, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone, useOptimisticAdd, useOptimisticCart, useOptimisticCartCount };

package/dist/cart.d.ts

@@ -2,6 +2,19 @@ import * as react from 'react';
 import { ElementType, ReactNode } from 'react';
 import { Cart, CartLine, Money } from '@asteby/storefront';
 
+/** Textos del estado optimista. Por omisión es-MX; la tienda puede traducirlos o cambiarlos. */
+type CartDrawerOptimisticLabels = {
+    /** Estado discreto en la fila provisional. */
+    adding: string;
+    /** Anuncio `aria-live="polite"` al mostrar/confirmar la fila. */
+    added: string;
+    /** Junto al subtotal mientras OPS no confirma. */
+    calculating: string;
+    /** Aviso de error: «No pudimos agregar X: motivo». */
+    failed: (title: string, reason: string) => string;
+    dismiss: string;
+};
+declare const DEFAULT_OPTIMISTIC_LABELS: CartDrawerOptimisticLabels;
 type CartDrawerLabels = {
     /** Título; el cajón agrega " (N)" con la cantidad de unidades. */
     title: string;
@@ -56,7 +69,7 @@ type CartDrawerLinkProps = {
     children: ReactNode;
     onClick?: () => void;
 };
-type CartDrawerSlot = 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line' | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal' | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain' | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue';
+type CartDrawerSlot = 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line' | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal' | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain' | 'notices' | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue';
 type CartDrawerIcons = {
     close?: ReactNode;
     decrease?: ReactNode;
@@ -91,6 +104,8 @@ type CartDrawerProps = {
     icons?: CartDrawerIcons;
     /** Clases por pieza (además de los `data-sf-cart-*`), para tiendas con Tailwind. */
     classNames?: Partial<Record<CartDrawerSlot, string>>;
+    /** Textos de las filas provisionales y de los avisos (por omisión es-MX). */
+    optimisticLabels?: Partial<CartDrawerOptimisticLabels>;
     locale?: string;
     /** Se llama al abrir/cerrar por cualquier vía. */
     onOpenChange?: (open: boolean) => void;
@@ -105,6 +120,114 @@ type CartDrawerProps = {
  */
 declare function CartDrawer(props: CartDrawerProps): react.JSX.Element | null;
 
+/** Lo que la tienda sabe del producto al pulsar «Agregar». `price` es el precio unitario ya mostrado en la ficha. */
+type OptimisticLineInput = {
+    /** Variante agregada; dos acciones con la misma variante comparten una sola fila. */
+    variantId: string;
+    title: string;
+    variantTitle?: string | null | undefined;
+    productHandle?: string | undefined;
+    image?: {
+        url: string;
+        alt?: string | null | undefined;
+    } | null | undefined;
+    /** Precio unitario mostrado (solo se pinta, no se multiplica ni se suma). */
+    price?: Money | null | undefined;
+    /** Unidades de ESTA acción (por omisión 1). */
+    quantity?: number | undefined;
+    /** Clave de idempotencia: repetir `add` con una clave viva devuelve la misma acción sin sumar otra vez. */
+    key?: string | undefined;
+};
+type OptimisticAction = Required<Pick<OptimisticLineInput, 'variantId' | 'title'>> & Omit<OptimisticLineInput, 'quantity' | 'key'> & {
+    id: string;
+    quantity: number;
+    key?: string | undefined;
+};
+/** Fila provisional: todas las acciones en vuelo de una misma variante. */
+type OptimisticRow = {
+    variantId: string;
+    title: string;
+    variantTitle?: string | null | undefined;
+    productHandle?: string | undefined;
+    image?: {
+        url: string;
+        alt?: string | null | undefined;
+    } | null | undefined;
+    price?: Money | null | undefined;
+    /** Unidades agregadas que OPS aún no confirma. */
+    quantity: number;
+    actionIds: string[];
+};
+type OptimisticNotice = {
+    id: string;
+    title: string;
+    reason: string;
+};
+type OptimisticSnapshot = {
+    rows: readonly OptimisticRow[];
+    /** Unidades provisionales en total (para el contador). */
+    quantity: number;
+    notices: readonly OptimisticNotice[];
+    /** Último evento a anunciar en la región `aria-live="polite"`; `n` cambia en cada evento. */
+    announcement: {
+        kind: 'added' | null;
+        n: number;
+    };
+};
+type AddOutcome = {
+    ok: true;
+} | {
+    ok: false;
+    reason: string;
+};
+declare const 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: OptimisticLineInput, options?: {
+        open?: boolean;
+        timeoutMs?: number;
+    }): string;
+    /** OPS confirmó: la fila provisional sale y el carrito real (ya en `cart`) ocupa su lugar. */
+    confirm(id: string): void;
+    /** Falló: se quita la acción (y su cantidad) y se avisa «No pudimos agregar X: motivo». */
+    rollback(id: string, reason?: string): void;
+    /** Quita la acción sin avisar (el componente que la lanzó se desmontó). */
+    discard(id: string): void;
+    dismissNotice(id: string): void;
+    /** Limpia todo (pruebas, cierre de sesión). */
+    reset(): void;
+    getSnapshot: () => OptimisticSnapshot;
+};
+/** Estado optimista (filas, contador, avisos). En el servidor siempre vacío. */
+declare function useOptimisticCart(): OptimisticSnapshot;
+/** Contador para la cabecera: unidades del carrito de OPS más las que están en vuelo. */
+declare function useOptimisticCartCount(base: number): number;
+/** Motivo corto en es-MX a partir de un error de la acción (HTTP, código de OPS o red). */
+declare function describeAddFailure(error: {
+    status?: number | undefined;
+    code?: string | undefined;
+    message?: string | undefined;
+} | null | undefined): string;
+type FetcherLike = {
+    state: string;
+    data?: unknown;
+};
+/** Interpreta `fetcher.data` de la acción de ruta: `{ error }`, `{ success:false }`, `{ ok:false }` o `status >= 400` fallan. */
+declare function defaultAddOutcome(data: unknown): AddOutcome;
+/**
+ * Conecta un `useFetcher()` de React Router con el estado optimista. `add(input, submit)` inserta la fila, abre el
+ * cajón y llama a `submit()` (el `fetcher.submit(...)` de la tienda); al terminar el fetcher confirma o revierte.
+ * Un nuevo `add` con el mismo fetcher antes de terminar da por entregado el anterior (el router lo reemplaza y el
+ * carrito real que llega con la revalidación manda). Si el componente se desmonta, las filas se descartan sin aviso.
+ */
+declare function useOptimisticAdd(fetcher: FetcherLike, options?: {
+    settle?: (data: unknown) => AddOutcome;
+}): {
+    add(input: OptimisticLineInput, submit: () => void): string;
+};
+
 /** Abre el cajón del carrito desde cualquier parte. */
 declare function openCartDrawer(): void;
 /** Cierra el cajón del carrito. */
@@ -141,4 +264,4 @@ type ClickLike = {
  */
 declare function handleCartLinkClick(e: ClickLike): void;
 
-export { CartDrawer, type CartDrawerFormContract, type CartDrawerIcons, type CartDrawerLabels, type CartDrawerLineForm, type CartDrawerLinkProps, type CartDrawerPaths, type CartDrawerProps, type CartDrawerShipping, type CartDrawerSlot, closeCartDrawer, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone };
+export { type AddOutcome, CartDrawer, type CartDrawerFormContract, type CartDrawerIcons, type CartDrawerLabels, type CartDrawerLineForm, type CartDrawerLinkProps, type CartDrawerOptimisticLabels, type CartDrawerPaths, type CartDrawerProps, type CartDrawerShipping, type CartDrawerSlot, DEFAULT_OPTIMISTIC_LABELS, type OptimisticAction, type OptimisticLineInput, type OptimisticNotice, type OptimisticRow, type OptimisticSnapshot, cartOptimistic, closeCartDrawer, defaultAddOutcome, describeAddFailure, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone, useOptimisticAdd, useOptimisticCart, useOptimisticCartCount };

package/dist/cart.js

@@ -7,9 +7,17 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 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) => {
@@ -49,6 +57,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 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 = useRef(null);
+  const was = useRef(false);
+  const settleRef = useRef(options.settle);
+  settleRef.current = options.settle;
+  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]);
+  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",
@@ -73,6 +266,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 = useId();
   const upsellId = useId();
   const { ref, onBackdropClick } = useModalDialog({ open, onClose: () => closeCartDrawer() });
@@ -80,12 +276,20 @@ function CartDrawer(props) {
   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;
+  useEffect(() => {
+    if (rollbackEmpty) closeCartDrawer();
+  }, [rollbackEmpty]);
+  if (!open) return opt.notices.length ? /* @__PURE__ */ jsx(OptimisticNotices, { notices: opt.notices, labels: ol, classNames: cx }) : null;
   const money = props.renderMoney ?? ((m) => formatMoney(m, locale));
   const link = props.renderLink ?? (({ href, className, children, onClick }) => /* @__PURE__ */ 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__ */ jsx(
     "dialog",
@@ -104,8 +308,10 @@ function CartDrawer(props) {
             labels.title,
             count > 0 ? ` (${count})` : ""
           ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: close, "aria-label": labels.close, className: cx.close, "data-sf-cart-close": "", "data-sf-autofocus": "", children: icons?.close ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
+          /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
         ] }),
+        /* @__PURE__ */ jsx(OptimisticNotices, { notices: opt.notices, labels: ol, classNames: cx }),
+        /* @__PURE__ */ jsx(OptimisticStatus, { kind: opt.announcement.kind, n: opt.announcement.n, text: ol.added }),
         empty ? /* @__PURE__ */ jsxs("div", { className: cx.empty, "data-sf-cart-empty": "", children: [
           /* @__PURE__ */ jsx("p", { className: cx.emptyTitle, "data-sf-cart-empty-title": "", children: labels.empty }),
           labels.emptyHint ? /* @__PURE__ */ jsx("p", { className: cx.emptyHint, "data-sf-cart-empty-hint": "", children: labels.emptyHint }) : null,
@@ -134,16 +340,25 @@ function CartDrawer(props) {
               icons?.shippingReached,
               notice
             ] }) : null,
-            /* @__PURE__ */ jsx("ul", { className: cx.lines, "data-sf-cart-lines": "", children: lines.map((line) => /* @__PURE__ */ jsx(DrawerLine, { line, props, money, link, close }, line.id)) }),
+            /* @__PURE__ */ jsxs("ul", { className: cx.lines, "data-sf-cart-lines": "", children: [
+              lines.map((line) => /* @__PURE__ */ jsx(DrawerLine, { line, props, money, link, close, pending: pendingByVariant.get(line.merchandise.id), pendingLabel: ol.adding }, line.id)),
+              extraRows.map((row) => /* @__PURE__ */ jsx(PendingLine, { row, props, money, label: ol.adding }, `pending-${row.variantId}`))
+            ] }),
             upsell ? /* @__PURE__ */ jsxs("section", { className: cx.upsell, "data-sf-cart-upsell": "", "aria-labelledby": upsellTitle ? upsellId : void 0, children: [
               upsellTitle ? /* @__PURE__ */ jsx("h3", { id: upsellId, className: cx.upsellTitle, children: upsellTitle }) : null,
               upsell
             ] }) : null
           ] }),
           /* @__PURE__ */ jsxs("div", { className: cx.footer, "data-sf-cart-footer": "", children: [
-            /* @__PURE__ */ jsxs("div", { className: cx.subtotal, "data-sf-cart-subtotal": "", children: [
+            /* @__PURE__ */ jsxs("div", { className: cx.subtotal, "data-sf-cart-subtotal": "", "aria-busy": pending || void 0, children: [
               /* @__PURE__ */ jsx("span", { className: cx.subtotalLabel, children: labels.subtotal }),
-              /* @__PURE__ */ jsx("span", { className: cx.subtotalValue, "data-sf-cart-subtotal-value": "", children: cart ? money(cart.cost.subtotal) : null })
+              /* @__PURE__ */ jsxs("span", { className: cx.subtotalValue, "data-sf-cart-subtotal-value": "", children: [
+                cart ? money(cart.cost.subtotal) : null,
+                pending ? /* @__PURE__ */ jsxs("span", { "data-sf-cart-calculating": "", children: [
+                  cart ? " " : "",
+                  ol.calculating
+                ] }) : null
+              ] })
             ] }),
             labels.note ? /* @__PURE__ */ jsx("p", { className: cx.note, "data-sf-cart-note": "", children: labels.note }) : null,
             /* @__PURE__ */ jsxs("div", { className: cx.actions, "data-sf-cart-actions": "", children: [
@@ -161,12 +376,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;
@@ -201,11 +418,43 @@ function DrawerLine({
         ] }),
         price
       ] }),
-      controls
+      controls,
+      pending ? /* @__PURE__ */ 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__ */ jsxs("li", { className: cx.line, "data-sf-cart-line": "", "data-sf-cart-line-pending": "", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx("span", { className: cx.image, "data-sf-cart-image": "", children: row.image ? /* @__PURE__ */ jsx("img", { src: row.image.url, alt: row.image.alt ?? "", width: 80, height: 80, decoding: "async" }) : null }),
+    /* @__PURE__ */ jsxs("div", { className: cx.lineMain, "data-sf-cart-line-main": "", children: [
+      /* @__PURE__ */ jsxs("div", { className: cx.lineHead, "data-sf-cart-line-head": "", children: [
+        /* @__PURE__ */ jsxs("div", { className: cx.lineText, "data-sf-cart-line-text": "", children: [
+          /* @__PURE__ */ jsx("span", { className: cx.lineTitle, "data-sf-cart-line-title": "", children: row.title }),
+          row.variantTitle && !isDefault(row.variantTitle) ? /* @__PURE__ */ jsx("p", { className: cx.variant, "data-sf-cart-variant": "", children: row.variantTitle }) : null
+        ] }),
+        row.price ? /* @__PURE__ */ jsx("span", { className: cx.price, "data-sf-cart-price": "", children: money(row.price) }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: cx.variant, "data-sf-cart-pending-label": "", children: [
+        label,
+        " \xB7 \xD7",
+        row.quantity
+      ] })
     ] })
   ] });
 }
+function OptimisticStatus({ kind, n, text }) {
+  return /* @__PURE__ */ 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__ */ jsx("div", { role: "alert", "aria-live": "assertive", "data-sf-cart-notices": "", className: cx.notices, children: notices2.map((n) => /* @__PURE__ */ jsxs("p", { "data-sf-cart-notice": "", children: [
+    /* @__PURE__ */ jsx("span", { children: labels.failed(n.title, n.reason) }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => cartOptimistic.dismissNotice(n.id), "aria-label": labels.dismiss, "data-sf-cart-notice-dismiss": "", children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
+  ] }, n.id)) });
+}
 
-export { CartDrawer, closeCartDrawer, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone };
+export { CartDrawer, DEFAULT_OPTIMISTIC_LABELS, cartOptimistic, closeCartDrawer, defaultAddOutcome, describeAddFailure, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone, useOptimisticAdd, useOptimisticCart, useOptimisticCartCount };
 //# sourceMappingURL=cart.js.map
 //# sourceMappingURL=cart.js.map