@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/checkout-commerce-v1/block.mjs

@@ -1,527 +1,26 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { BlockDataProvider, useBlockData } from "./data-context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge } from "../../../ui/badge.mjs";
 import { Button } from "../../../ui/button.mjs";
-import { Card, CardContent, CardFooter, CardHeader } from "../../../ui/card.mjs";
-import { PRODUCT_IMAGE_FALLBACK } from "../../../lib/contracts.mjs";
-import { useEffect, useId, useRef, useState } from "react";
-function money(cents, data) {
-  const currencyFormatter = new Intl.NumberFormat(data.meta.locale, {
-    style: "currency",
-    currency: data.meta.currency,
-    minimumFractionDigits: 2
-  });
-  return currencyFormatter.format(cents / 100);
-}
-const VARIANT_SECONDARY = "secondary";
+import { CheckoutView } from "./view/checkout-view.mjs";
+import { fill } from "./view/format.mjs";
+import { useDemoCheckout } from "./demo/use-demo-checkout.mjs";
+import { useState } from "react";
 const VARIANT_OUTLINE = "outline";
-const VARIANT_GHOST = "ghost";
-const VARIANT_DESTRUCTIVE = "destructive";
-const EMPTY_OPTION = "";
-const AUTOCOMPLETE_NAME = "name";
-const AUTOCOMPLETE_EMAIL = "email";
-const AUTOCOMPLETE_TEL = "tel";
-function fill(template, values) {
-  return Object.keys(values).reduce(
-    (text, key) => text.split(`{${key}}`).join(String(values[key])),
-    template
-  );
-}
-function countLabel(count, one, many) {
-  return count === 1 ? one : fill(many, { count });
-}
-function addressHeadline(address) {
-  return `${address.label} \xB7 ${address.province}`;
-}
-function addressSummary(address) {
-  return [address.line1, address.line2, address.city].filter(Boolean).join(", ");
-}
-function pickupDetail(point) {
-  return [point.address, point.hours].filter(Boolean).join(" \xB7 ");
-}
-function unitPriceFor(line, quantity) {
-  let price = line.unitCents;
-  for (const tier of line.tiers ?? []) {
-    if (quantity >= tier.minQuantity) price = tier.unitCents;
-  }
-  return price;
-}
-function currentTierFor(line, quantity) {
-  let current = null;
-  for (const tier of line.tiers ?? []) {
-    if (quantity >= tier.minQuantity) current = tier;
-  }
-  return current;
-}
-function nextTierFor(line, quantity) {
-  return (line.tiers ?? []).find((tier) => tier.minQuantity > quantity) ?? null;
-}
-function lineNetTotal(line) {
-  return unitPriceFor(line, line.quantity) * line.quantity - (line.lineDiscountCents ?? 0);
-}
-function tierRangeLabel(tier, data) {
-  return tier.maxQuantity > 0 ? fill(data.labels.tierRange, { min: tier.minQuantity, max: tier.maxQuantity }) : fill(data.labels.tierRangeFrom, { min: tier.minQuantity });
-}
-function moveOptionFocus(event, index, options, onSelect) {
-  const key = event.key;
-  let nextIndex = -1;
-  if (key === "ArrowDown" || key === "ArrowRight") nextIndex = (index + 1) % options.length;
-  if (key === "ArrowUp" || key === "ArrowLeft") nextIndex = (index - 1 + options.length) % options.length;
-  if (nextIndex < 0) return;
-  event.preventDefault();
-  const next = options[nextIndex];
-  if (next.disabled) return;
-  onSelect(next.id);
-  const siblings = event.currentTarget.parentElement?.children;
-  const target = siblings ? siblings[nextIndex] : void 0;
-  if (target instanceof HTMLElement) target.focus();
-}
-function OptionGroup({
-  legend,
-  options,
-  selectedId,
-  onSelect,
-  className
-}) {
-  const uid = useId();
-  const labelId = `${uid}-label`;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { id: labelId, className: "text-xs font-medium text-muted-foreground", children: legend }),
-    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className, children: options.map((option, index) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        role: "radio",
-        "aria-checked": selectedId === option.id,
-        tabIndex: selectedId === option.id ? 0 : -1,
-        disabled: option.disabled,
-        variant: selectedId === option.id ? "secondary" : "outline",
-        className: "h-auto w-full min-w-0 justify-start whitespace-normal px-3 py-2 text-left hover:bg-muted hover:text-foreground",
-        onClick: () => onSelect(option.id),
-        onKeyDown: (event) => moveOptionFocus(event, index, options, onSelect),
-        children: /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 flex-col items-start gap-0.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.title }),
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-              option.previousMeta ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground line-through", children: option.previousMeta }) : null,
-              option.meta ? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: option.meta }) : null
-            ] })
-          ] }),
-          option.detail ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: option.detail }) : null,
-          option.disabled && option.reason ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-destructive", children: option.reason }) : null
-        ] })
-      },
-      option.id
-    )) })
-  ] });
-}
-function AddressChoices({
-  legend,
-  name,
-  addresses,
-  selectedId,
-  onSelect,
-  labels
-}) {
-  return /* @__PURE__ */ jsxs("fieldset", { children: [
-    /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium", children: legend }),
-    /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: addresses.map((address) => /* @__PURE__ */ jsxs(
-      "label",
-      {
-        className: "flex cursor-pointer items-start gap-3 rounded-md border border-border bg-background p-3",
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              name,
-              checked: selectedId === address.id,
-              onChange: () => onSelect(address.id),
-              className: "mt-1 size-4"
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-1", children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: address.label }),
-              address.isDefault ? /* @__PURE__ */ jsx(Badge, { variant: VARIANT_SECONDARY, children: labels.addressDefaultBadge }) : null
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: address.recipient }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: addressSummary(address) }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: address.phone })
-          ] })
-        ]
-      },
-      address.id
-    )) })
-  ] });
-}
-function AddressForm({
-  labels,
-  countries,
-  authenticated,
-  onSave,
-  onCancel
-}) {
-  const data = useBlockData();
-  const emptyDraft = {
-    firstName: "",
-    lastName: "",
-    phone: "",
-    countryCode: data.countries[0].code,
-    province: "",
-    city: "",
-    line1: "",
-    line2: "",
-    postalCode: "",
-    instructions: ""
+function toLegacyCreatedAddressPayload(payload) {
+  return {
+    id: payload.id,
+    label: payload.label,
+    recipient: payload.recipient,
+    line1: payload.line1,
+    line2: payload.line2 ?? "",
+    city: payload.city,
+    province: payload.province ?? "",
+    postalCode: payload.postalCode ?? "",
+    phone: payload.phone ?? "",
+    isDefault: payload.isDefault,
+    saveToAccount: payload.saveToAccount
   };
-  const uid = useId();
-  const [draft, setDraft] = useState(emptyDraft);
-  const [saveToAccount, setSaveToAccount] = useState(authenticated);
-  const [errors, setErrors] = useState({});
-  const country = countries.find((item) => item.code === draft.countryCode);
-  const province = country?.provinces.find((item) => item.name === draft.province);
-  const postalRule = country?.postalCode ?? "hidden";
-  function setField(key, value) {
-    setDraft((current) => ({ ...current, [key]: value }));
-  }
-  function handleCountry(code) {
-    setDraft((current) => ({ ...current, countryCode: code, province: "", city: "" }));
-  }
-  function handleProvince(name) {
-    setDraft((current) => ({ ...current, province: name, city: "" }));
-  }
-  function handleSubmit(event) {
-    event.preventDefault();
-    const next = {};
-    if (!draft.firstName.trim()) next.firstName = labels.addressRequired;
-    if (!draft.lastName.trim()) next.lastName = labels.addressRequired;
-    if (!draft.phone.trim()) next.phone = labels.addressRequired;
-    if (!draft.countryCode) next.countryCode = labels.addressRequired;
-    if (!draft.province) next.province = labels.addressRequired;
-    if (!draft.city) next.city = labels.addressRequired;
-    if (!draft.line1.trim()) next.line1 = labels.addressRequired;
-    if (postalRule === "required" && !draft.postalCode.trim()) {
-      next.postalCode = labels.addressRequired;
-    }
-    setErrors(next);
-    if (Object.keys(next).length > 0) return;
-    const recipient = `${draft.firstName.trim()} ${draft.lastName.trim()}`;
-    onSave(
-      {
-        id: `created-${Date.now()}`,
-        label: saveToAccount ? fill(labels.addressNewLabel, { city: draft.city }) : labels.addressTemporary,
-        recipient,
-        line1: draft.line1.trim(),
-        line2: draft.line2.trim(),
-        city: draft.city,
-        province: draft.province,
-        postalCode: draft.postalCode.trim(),
-        phone: draft.phone.trim(),
-        isDefault: false
-      },
-      saveToAccount
-    );
-  }
-  function field(key, label, type, autoComplete, requiredField, span) {
-    const fieldId = `${uid}-${key}`;
-    const error = errors[key];
-    return /* @__PURE__ */ jsxs("div", { className: span ? "sm:col-span-2" : void 0, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: "text-xs font-medium", children: label }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: fieldId,
-          type,
-          autoComplete,
-          value: draft[key],
-          required: requiredField,
-          onChange: (event) => setField(key, event.target.value),
-          "aria-invalid": error ? true : void 0,
-          "aria-describedby": error ? `${fieldId}-error` : void 0,
-          className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
-        }
-      ),
-      error ? /* @__PURE__ */ jsx("p", { id: `${fieldId}-error`, className: "mt-1 text-xs text-destructive", children: error }) : null
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [
-    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: labels.addressFormTitle }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-3 sm:grid-cols-2", children: [
-      field("firstName", labels.addressFirstName, "text", "given-name", true, false),
-      field("lastName", labels.addressLastName, "text", "family-name", true, false),
-      field("phone", labels.addressPhone, "tel", "tel", true, false),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-country`, className: "text-xs font-medium", children: labels.addressCountry }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            id: `${uid}-country`,
-            value: draft.countryCode,
-            onChange: (event) => handleCountry(event.target.value),
-            className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: labels.addressSelectPlaceholder }),
-              countries.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.name }, item.code))
-            ]
-          }
-        ),
-        errors.countryCode ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.countryCode }) : null
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-province`, className: "text-xs font-medium", children: labels.addressProvince }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            id: `${uid}-province`,
-            value: draft.province,
-            onChange: (event) => handleProvince(event.target.value),
-            className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: labels.addressSelectPlaceholder }),
-              (country?.provinces ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item.name, children: item.name }, item.name))
-            ]
-          }
-        ),
-        errors.province ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.province }) : null
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-city`, className: "text-xs font-medium", children: labels.addressCity }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            id: `${uid}-city`,
-            value: draft.city,
-            onChange: (event) => setField("city", event.target.value),
-            className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: labels.addressSelectPlaceholder }),
-              (province?.cities ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item, children: item }, item))
-            ]
-          }
-        ),
-        errors.city ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.city }) : null
-      ] }),
-      field("line1", labels.addressLine1, "text", "address-line1", true, true),
-      field("line2", labels.addressLine2, "text", "address-line2", false, true),
-      postalRule === "hidden" ? null : field(
-        "postalCode",
-        labels.addressPostal,
-        "text",
-        "postal-code",
-        postalRule === "required",
-        false
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-instructions`, className: "text-xs font-medium", children: labels.addressInstructions }),
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            id: `${uid}-instructions`,
-            rows: 2,
-            value: draft.instructions,
-            onChange: (event) => setField("instructions", event.target.value),
-            className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-          }
-        )
-      ] })
-    ] }),
-    authenticated ? /* @__PURE__ */ jsxs("label", { className: "mt-3 flex items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: saveToAccount,
-          onChange: (event) => setSaveToAccount(event.target.checked),
-          className: "size-4"
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { children: labels.addressSaveAccount })
-    ] }) : /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: labels.addressUseOnce }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.addressSave }),
-      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_GHOST, onClick: onCancel, children: labels.addressCancel })
-    ] })
-  ] });
-}
-function BuyerSection({
-  uid,
-  session,
-  name,
-  email,
-  phone,
-  guestConfirmed,
-  authPhoneComplete,
-  errors,
-  onFieldChange,
-  onGuestSave,
-  onGuestEdit,
-  onAuthPhoneSave,
-  onRetrySession,
-  onStartRegistration
-}) {
-  const data = useBlockData();
-  const labels = data.labels;
-  const isGuest = session === "guest";
-  const title = isGuest ? labels.buyerTitleGuest : labels.buyerTitleAuth;
-  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-buyer`, "aria-busy": session === "loading", children: [
-    /* @__PURE__ */ jsx(
-      "h3",
-      {
-        id: `${uid}-buyer`,
-        className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-        children: title
-      }
-    ),
-    session === "loading" ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.sessionLoading }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 h-4 w-40 rounded bg-muted" })
-    ] }) : session === "error" ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.sessionError }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "xs",
-          variant: VARIANT_OUTLINE,
-          className: "mt-1.5",
-          onClick: onRetrySession,
-          children: labels.retryAction
-        }
-      )
-    ] }) : !isGuest ? /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: name }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [email, authPhoneComplete ? phone : ""].filter(Boolean).join(" \xB7 ") }),
-      !authPhoneComplete ? /* @__PURE__ */ jsxs(
-        "form",
-        {
-          className: "mt-2",
-          onSubmit: (event) => {
-            event.preventDefault();
-            onAuthPhoneSave();
-          },
-          noValidate: true,
-          children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-start gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: `${uid}-buyer-phone`,
-                  type: "tel",
-                  autoComplete: AUTOCOMPLETE_TEL,
-                  value: phone,
-                  onChange: (event) => onFieldChange("phone", event.target.value),
-                  "aria-invalid": errors.contactPhone ? true : void 0,
-                  "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
-                  className: "h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm"
-                }
-              ),
-              /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.buyerSavePhone })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.buyerPhoneHint }),
-            errors.contactPhone ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
-          ]
-        }
-      ) : null
-    ] }) : guestConfirmed ? /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: name }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [email, phone].filter(Boolean).join(" \xB7 ") })
-        ] }),
-        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_OUTLINE, onClick: onGuestEdit, children: labels.contactEdit })
-      ] }),
-      onStartRegistration ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.accountOptional }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "xs",
-            variant: VARIANT_GHOST,
-            onClick: () => onStartRegistration({ name, email, phone }),
-            children: labels.createAccount
-          }
-        )
-      ] }) : null
-    ] }) : /* @__PURE__ */ jsxs(
-      "form",
-      {
-        className: "mt-2 grid gap-3 sm:grid-cols-2",
-        onSubmit: (event) => {
-          event.preventDefault();
-          onGuestSave();
-        },
-        noValidate: true,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-name`, className: "text-xs font-medium", children: labels.contactName }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id: `${uid}-buyer-name`,
-                type: "text",
-                autoComplete: AUTOCOMPLETE_NAME,
-                value: name,
-                onChange: (event) => onFieldChange("name", event.target.value),
-                "aria-invalid": errors.contactName ? true : void 0,
-                "aria-describedby": errors.contactName ? `${uid}-buyer-name-error` : void 0,
-                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
-              }
-            ),
-            errors.contactName ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-name-error`, className: "mt-1 text-xs text-destructive", children: errors.contactName }) : null
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-email`, className: "text-xs font-medium", children: labels.contactEmail }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id: `${uid}-buyer-email`,
-                type: "email",
-                autoComplete: AUTOCOMPLETE_EMAIL,
-                value: email,
-                onChange: (event) => onFieldChange("email", event.target.value),
-                "aria-invalid": errors.contactEmail ? true : void 0,
-                "aria-describedby": errors.contactEmail ? `${uid}-buyer-email-error` : void 0,
-                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
-              }
-            ),
-            errors.contactEmail ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-email-error`, className: "mt-1 text-xs text-destructive", children: errors.contactEmail }) : null
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id: `${uid}-buyer-phone`,
-                type: "tel",
-                autoComplete: AUTOCOMPLETE_TEL,
-                value: phone,
-                onChange: (event) => onFieldChange("phone", event.target.value),
-                "aria-invalid": errors.contactPhone ? true : void 0,
-                "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
-                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
-              }
-            ),
-            errors.contactPhone ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.buyerContinue }) })
-        ]
-      }
-    )
-  ] });
-}
-function SummaryRow({
-  label,
-  value,
-  emphasis
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
-    /* @__PURE__ */ jsx("dt", { className: emphasis ? "text-sm font-semibold" : "text-sm text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("dd", { className: emphasis ? "text-sm font-semibold tabular-nums" : "text-sm tabular-nums", children: value })
-  ] });
 }
 function CheckoutCommerceV1Content({
   data,
@@ -542,25 +41,34 @@ function CheckoutCommerceV1Content({
         /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: data.meta.demoTitle }),
         /* @__PURE__ */ jsx(Badge, { variant: VARIANT_OUTLINE, children: data.labels.demoBadge })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", role: "group", "aria-label": data.labels.scenarioGroup, children: data.scenarios.map((item) => /* @__PURE__ */ jsx(
-        Button,
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          type: "button",
-          size: "sm",
-          variant: item.id === scenario.id ? "default" : "outline",
-          "aria-pressed": item.id === scenario.id,
-          "aria-label": item.name,
-          onClick: () => setScenarioId(item.id),
-          children: item.id
-        },
-        item.id
-      )) }),
+          className: "mt-2 flex flex-wrap gap-1.5",
+          role: "group",
+          "aria-label": data.labels.scenarioGroup,
+          children: data.scenarios.map((item) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: item.id === scenario.id ? "default" : "outline",
+              "aria-pressed": item.id === scenario.id,
+              "aria-label": item.name,
+              onClick: () => setScenarioId(item.id),
+              children: item.id
+            },
+            item.id
+          ))
+        }
+      ),
       /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: fill(data.meta.demoCurrent, { name: scenario.name, blurb: scenario.blurb }) }),
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: data.meta.demoHint })
     ] }),
     /* @__PURE__ */ jsx(
-      CheckoutExperience,
+      DemoCheckout,
       {
+        data,
         scenario,
         onQuantityChange,
         onRemoveItem,
@@ -575,7 +83,8 @@ function CheckoutCommerceV1Content({
     )
   ] });
 }
-function CheckoutExperience({
+function DemoCheckout({
+  data,
   scenario,
   onQuantityChange,
   onRemoveItem,
@@ -586,1880 +95,23 @@ function CheckoutExperience({
   onConfirmOrder,
   onContinueShopping
 }) {
-  const data = useBlockData();
-  const uid = useId();
-  const labels = data.labels;
-  const [lines, setLines] = useState(
-    () => scenario.groups.flatMap(
-      (group) => group.items.flatMap((item) => {
-        const mains = [{ ...item, groupId: group.id }];
-        const children = (item.associates ?? []).filter((associate) => (associate.initialQuantity ?? 0) > 0).map((associate) => ({
-          lineId: associate.lineId,
-          groupId: associate.groupId,
-          title: associate.title,
-          variant: associate.variant,
-          image: associate.image,
-          unitCents: associate.unitCents,
-          quantity: associate.initialQuantity ?? 1,
-          stock: associate.stock,
-          isAssociate: true,
-          parentLineId: item.lineId,
-          associateId: associate.id,
-          maxQuantity: associate.maxQuantity,
-          minQuantity: associate.minQuantity ?? 1,
-          maxPerMain: associate.maxPerMain ?? 0,
-          overflowPolicy: associate.overflowPolicy ?? "clamp",
-          regularCents: associate.regularCents,
-          discountLabel: associate.discountLabel,
-          tiers: associate.tiers,
-          lineDiscountCents: associate.lineDiscountCents,
-          lineDiscountLabel: associate.lineDiscountLabel
-        }));
-        return [...mains, ...children];
-      })
-    )
-  );
-  const [groupStates, setGroupStates] = useState(
-    () => scenario.groups.map((group) => ({
-      id: group.id,
-      mode: group.initialMode,
-      shippingOptionId: group.initialShippingOptionId,
-      pickupPointId: group.initialPickupPointId,
-      rateState: group.rateState
-    }))
-  );
-  const [addressBook, setAddressBook] = useState(() => scenario.customer.addresses);
-  const [shippingAddressId, setShippingAddressId] = useState(scenario.customer.defaultAddressId);
-  const [addressOpen, setAddressOpen] = useState(false);
-  const [addressMode, setAddressMode] = useState("list");
-  const [openPanel, setOpenPanel] = useState("");
-  const [addingAssociate, setAddingAssociate] = useState("");
-  const [failedAdds, setFailedAdds] = useState([]);
-  const [removingLine, setRemovingLine] = useState("");
-  const [confirmRemoveMain, setConfirmRemoveMain] = useState("");
-  const [associateNotice, setAssociateNotice] = useState(null);
-  const [assocOpen, setAssocOpen] = useState("");
-  const [contactName, setContactName] = useState(scenario.customer.name);
-  const [contactEmail, setContactEmail] = useState(scenario.customer.email);
-  const [contactPhone, setContactPhone] = useState(scenario.customer.phone);
-  const [guestConfirmed, setGuestConfirmed] = useState(false);
-  const [authPhoneComplete, setAuthPhoneComplete] = useState(Boolean(scenario.customer.phone));
-  const [sessionRetrying, setSessionRetrying] = useState(false);
-  const [formErrors, setFormErrors] = useState({});
-  const [paymentId, setPaymentId] = useState(scenario.selectedPaymentId);
-  const [billingSame, setBillingSame] = useState(scenario.sameAsShipping);
-  const [billingId, setBillingId] = useState(scenario.billingAddressId);
-  const [promotions, setPromotions] = useState(() => scenario.promotions);
-  const [couponOpen, setCouponOpen] = useState(false);
-  const [couponCode, setCouponCode] = useState("");
-  const [couponNotice, setCouponNotice] = useState(null);
-  const [paymentOpen, setPaymentOpen] = useState(false);
-  const [openTiers, setOpenTiers] = useState([]);
-  const [priceUpdating, setPriceUpdating] = useState("");
-  const priceTimer = useRef(null);
-  const [stockMessage, setStockMessage] = useState("");
-  const [paymentError, setPaymentError] = useState(false);
-  const [paymentRetried, setPaymentRetried] = useState(false);
-  const [creatingOrder, setCreatingOrder] = useState(false);
-  const orderTimer = useRef(null);
-  const [confirmation, setConfirmation] = useState(null);
-  const activeGroups = scenario.groups.filter(
-    (group) => lines.some((line) => line.groupId === group.id)
-  );
-  const session = sessionRetrying ? "loading" : scenario.customer.sessionState;
-  function stateFor(groupId) {
-    return groupStates.find((state) => state.id === groupId) ?? {
-      id: groupId,
-      mode: "shipping",
-      shippingOptionId: "",
-      pickupPointId: "",
-      rateState: "pending"
-    };
-  }
-  const shippingAddress = addressBook.find((address) => address.id === shippingAddressId) ?? null;
-  function coverageFor(group, addressId) {
-    if (!addressId) return "none";
-    return (group.blockedAddresses ?? []).includes(addressId) ? "none" : "ok";
-  }
-  function optionFor(group, state) {
-    return group.shippingOptions.find((option) => option.id === state.shippingOptionId) ?? null;
-  }
-  function pointFor(group, state) {
-    return group.pickupPoints.find((point) => point.id === state.pickupPointId) ?? null;
-  }
-  function readiness(group, state) {
-    if (state.rateState !== "ready") return false;
-    if (state.mode === "pickup") {
-      const point = pointFor(group, state);
-      return point !== null && point.available !== false;
-    }
-    return Boolean(shippingAddress) && coverageFor(group, shippingAddressId) === "ok" && Boolean(optionFor(group, state));
-  }
-  function feeFor(group, state) {
-    if (state.mode === "pickup") {
-      const point = pointFor(group, state);
-      return point ? Math.max(0, point.feeCents - (point.discountCents ?? 0)) : 0;
-    }
-    const option = optionFor(group, state);
-    return option ? Math.max(0, option.feeCents - (option.discountCents ?? 0)) : 0;
-  }
-  function baseFeeFor(group, state) {
-    if (state.mode === "pickup") return pointFor(group, state)?.feeCents ?? 0;
-    return optionFor(group, state)?.feeCents ?? 0;
-  }
-  function resolveRate(group, addressId) {
-    window.setTimeout(() => {
-      setGroupStates(
-        (current) => current.map((state) => {
-          if (state.id !== group.id) return state;
-          const covered = state.mode === "pickup" || coverageFor(group, addressId) === "ok";
-          return {
-            ...state,
-            rateState: covered ? "ready" : "none",
-            shippingOptionId: state.mode === "shipping" ? group.shippingOptions.some((option) => option.id === state.shippingOptionId) ? state.shippingOptionId : group.shippingOptions[0]?.id || "" : "",
-            pickupPointId: state.mode === "pickup" ? group.pickupPoints.some(
-              (point) => point.id === state.pickupPointId && point.available !== false
-            ) ? state.pickupPointId : group.pickupPoints.find((point) => point.available !== false)?.id || "" : ""
-          };
-        })
-      );
-    }, 900);
-  }
-  function recalc(group) {
-    setGroupStates(
-      (current) => current.map((state) => state.id === group.id ? { ...state, rateState: "pending" } : state)
-    );
-    resolveRate(group, shippingAddressId);
-  }
-  useEffect(() => {
-    scenario.groups.filter((group) => group.rateState === "pending").forEach((group) => resolveRate(group, scenario.customer.defaultAddressId));
-  }, []);
-  useEffect(
-    () => () => {
-      if (orderTimer.current) window.clearTimeout(orderTimer.current);
-    },
-    []
-  );
-  function selectMode(group, mode) {
-    const covered = mode === "pickup" || coverageFor(group, shippingAddressId) === "ok";
-    setGroupStates(
-      (current) => current.map(
-        (state) => state.id === group.id ? {
-          ...state,
-          mode,
-          rateState: covered ? "pending" : "none"
-        } : state
-      )
-    );
-    if (covered) resolveRate(group, shippingAddressId);
-  }
-  function chooseShippingOption(group, optionId) {
-    setGroupStates(
-      (current) => current.map(
-        (state) => state.id === group.id ? { ...state, mode: "shipping", shippingOptionId: optionId, rateState: "ready" } : state
-      )
-    );
-    setOpenPanel("");
-  }
-  function choosePickupPoint(group, pointId) {
-    const point = group.pickupPoints.find((item) => item.id === pointId);
-    if (!point || point.available === false) return;
-    setGroupStates(
-      (current) => current.map(
-        (state) => state.id === group.id ? { ...state, mode: "pickup", pickupPointId: pointId, rateState: "ready" } : state
-      )
-    );
-    setOpenPanel("");
-  }
-  function revalidateShipping(addressId) {
-    activeGroups.forEach((group) => {
-      const state = stateFor(group.id);
-      if (state.mode !== "shipping") return;
-      setGroupStates(
-        (current) => current.map(
-          (entry) => entry.id === group.id ? { ...entry, rateState: "pending" } : entry
-        )
-      );
-      resolveRate(group, addressId);
-    });
-  }
-  function selectShippingAddress(addressId) {
-    setShippingAddressId(addressId);
-    setAddressOpen(false);
-    setAddressMode("list");
-    onSelectAddress?.(addressId);
-    revalidateShipping(addressId);
-  }
-  function openAddressEditor() {
-    setAddressOpen(true);
-    setAddressMode(addressBook.length === 0 ? "new" : "list");
-    window.setTimeout(() => {
-      document.getElementById(`${uid}-address-panel`)?.scrollIntoView({ block: "center" });
-    }, 60);
-  }
-  function saveNewAddress(address, saveToAccount) {
-    const nextAddress = {
-      ...address,
-      label: saveToAccount ? address.label : labels.addressTemporary,
-      isDefault: addressBook.length === 0
-    };
-    setAddressBook((current) => [...current, nextAddress]);
-    setShippingAddressId(nextAddress.id);
-    setAddressOpen(false);
-    setAddressMode("list");
-    onCreateAddress?.({ ...nextAddress, saveToAccount });
-    revalidateShipping(nextAddress.id);
-  }
-  function associatesFor(mainLineId) {
-    for (const group of scenario.groups) {
-      const item = group.items.find((entry) => entry.lineId === mainLineId);
-      if (item?.associates) return item.associates;
-    }
-    return [];
-  }
-  function mainQuantityFor(line) {
-    if (!line.parentLineId) return line.quantity;
-    return lines.find((entry) => entry.lineId === line.parentLineId)?.quantity ?? line.quantity;
-  }
-  function associateMaxFor(line, mainQuantity) {
-    const base = line.maxQuantity ?? line.stock;
-    const perMain = line.maxPerMain ?? 0;
-    return Math.min(line.stock, Math.max(0, base + Math.max(0, mainQuantity - 1) * perMain));
-  }
-  function associateDefMax(def, mainQuantity) {
-    const perMain = def.maxPerMain ?? 0;
-    return Math.min(
-      def.stock,
-      Math.max(0, def.maxQuantity + Math.max(0, mainQuantity - 1) * perMain)
-    );
-  }
-  function associateDiscountFor(unitCents, regularCents) {
-    const regular = regularCents ?? 0;
-    if (regular <= unitCents) return null;
-    const amountCents = regular - unitCents;
-    return { amountCents, percent: Math.round(amountCents / regular * 100) };
-  }
-  function orderGroupLines(groupLines) {
-    const ordered = [];
-    const placed = /* @__PURE__ */ new Set();
-    for (const main of groupLines) {
-      if (main.isAssociate) continue;
-      ordered.push(main);
-      placed.add(main.lineId);
-      for (const child of groupLines) {
-        if (child.parentLineId === main.lineId) {
-          ordered.push(child);
-          placed.add(child.lineId);
-        }
-      }
-    }
-    for (const line of groupLines) {
-      if (!placed.has(line.lineId)) ordered.push(line);
-    }
-    return ordered;
-  }
-  function refreshGroup(groupId) {
-    const group = scenario.groups.find((entry) => entry.id === groupId);
-    if (!group) return;
-    if (stateFor(groupId).mode !== "shipping") return;
-    setGroupStates(
-      (current) => current.map((state) => state.id === groupId ? { ...state, rateState: "pending" } : state)
-    );
-    resolveRate(group, shippingAddressId);
-  }
-  function applyAssociatePolicy(nextLines, main, nextQuantity) {
-    let result = nextLines;
-    let notice = null;
-    const children = nextLines.filter((entry) => entry.parentLineId === main.lineId);
-    const removed = [];
-    for (const child of children) {
-      const max = associateMaxFor(child, nextQuantity);
-      const min = child.minQuantity ?? 1;
-      if (child.quantity <= max) continue;
-      if ((child.overflowPolicy ?? "clamp") === "remove" || max < min) {
-        result = result.filter((entry) => entry.lineId !== child.lineId);
-        removed.push(child);
-        notice = {
-          mainLineId: main.lineId,
-          text: fill(labels.associateRemoved, { name: child.title }),
-          error: false
-        };
-      } else {
-        result = result.map(
-          (entry) => entry.lineId === child.lineId ? { ...entry, quantity: max } : entry
-        );
-        onQuantityChange?.(child.lineId, max);
-        notice = {
-          mainLineId: main.lineId,
-          text: fill(labels.associateAdjusted, { name: child.title, count: max }),
-          error: false
-        };
-      }
-    }
-    removed.forEach((child) => {
-      onRemoveItem?.(child.lineId);
-    });
-    return { lines: result, notice };
-  }
-  function changeQuantity(lineId, next) {
-    const line = lines.find((item) => item.lineId === lineId);
-    if (!line) return;
-    if (line.isAssociate) {
-      const max = associateMaxFor(line, mainQuantityFor(line));
-      const min = line.minQuantity ?? 1;
-      if (min === 0 && next === 0) {
-        requestRemoveLine(line);
-        return;
-      }
-      if (next < min) return;
-      if (next > max) {
-        setAssociateNotice({
-          mainLineId: line.parentLineId ?? "",
-          text: fill(labels.associateMax, { count: max }),
-          error: false
-        });
-        return;
-      }
-    } else {
-      if (next < 1 || line.stock < 1) return;
-      if (next > line.stock) {
-        setStockMessage(fill(labels.stockMax, { name: line.title }));
-        return;
-      }
-    }
-    setStockMessage("");
-    setAssociateNotice(null);
-    const nextLines = lines.map(
-      (item) => item.lineId === lineId ? { ...item, quantity: next } : item
-    );
-    const adjusted = line.isAssociate ? { lines: nextLines, notice: null } : applyAssociatePolicy(nextLines, line, next);
-    setLines(adjusted.lines);
-    if (adjusted.notice) setAssociateNotice(adjusted.notice);
-    setPriceUpdating(lineId);
-    if (priceTimer.current) window.clearTimeout(priceTimer.current);
-    priceTimer.current = window.setTimeout(() => setPriceUpdating(""), 500);
-    onQuantityChange?.(lineId, next);
-  }
-  function addAssociate(main, def) {
-    if (addingAssociate) return;
-    if (def.eligible === false || def.stock < 1) return;
-    const max = associateDefMax(def, main.quantity);
-    if (max < 1) return;
-    setAssociateNotice(null);
-    setAddingAssociate(def.id);
-    window.setTimeout(() => {
-      if (def.simulateFailure && !failedAdds.includes(def.id)) {
-        setFailedAdds((current) => [...current, def.id]);
-        setAddingAssociate("");
-        setAssociateNotice({
-          mainLineId: main.lineId,
-          text: fill(labels.associateAddError, { name: def.title }),
-          error: true
-        });
-        return;
-      }
-      const quantity = Math.max(1, def.minQuantity ?? 1);
-      const nextLine = {
-        lineId: def.lineId,
-        groupId: def.groupId,
-        title: def.title,
-        variant: def.variant,
-        image: def.image,
-        unitCents: def.unitCents,
-        quantity,
-        stock: def.stock,
-        isAssociate: true,
-        parentLineId: main.lineId,
-        associateId: def.id,
-        maxQuantity: def.maxQuantity,
-        minQuantity: def.minQuantity ?? 1,
-        maxPerMain: def.maxPerMain ?? 0,
-        overflowPolicy: def.overflowPolicy ?? "clamp",
-        regularCents: def.regularCents,
-        discountLabel: def.discountLabel,
-        tiers: def.tiers,
-        lineDiscountCents: def.lineDiscountCents,
-        lineDiscountLabel: def.lineDiscountLabel
-      };
-      setLines(
-        (current) => current.some((entry) => entry.lineId === def.lineId) ? current : [...current, nextLine]
-      );
-      setAddingAssociate("");
-      setAssocOpen("");
-      onAddAssociate?.({
-        associateId: def.id,
-        parentLineId: main.lineId,
-        lineId: def.lineId,
-        groupId: def.groupId,
-        quantity,
-        unitCents: def.unitCents
-      });
-      refreshGroup(def.groupId);
-    }, 500);
-  }
-  function removeWithPending(mainLineId, ids, mainName) {
-    setRemovingLine(mainLineId);
-    window.setTimeout(() => {
-      const removed = lines.filter((entry) => ids.includes(entry.lineId));
-      const groups = [...new Set(removed.map((entry) => entry.groupId))];
-      setLines((current) => current.filter((entry) => !ids.includes(entry.lineId)));
-      removed.forEach((entry) => onRemoveItem?.(entry.lineId));
-      if (ids.length > 1) {
-        setAssociateNotice({
-          mainLineId: "",
-          text: fill(labels.associateMainRemoved, {
-            name: mainName,
-            count: ids.length - 1
-          }),
-          error: false
-        });
-      }
-      groups.forEach((groupId) => {
-        if (lines.some((entry) => entry.groupId === groupId && !ids.includes(entry.lineId))) {
-          refreshGroup(groupId);
-        }
-      });
-      setRemovingLine("");
-      setConfirmRemoveMain("");
-    }, 250);
-  }
-  function requestRemoveLine(line) {
-    if (line.isAssociate) {
-      removeWithPending(line.lineId, [line.lineId], line.title);
-      return;
-    }
-    const children = lines.filter((entry) => entry.parentLineId === line.lineId);
-    if (children.length > 0) {
-      setConfirmRemoveMain(line.lineId);
-      return;
-    }
-    removeWithPending(line.lineId, [line.lineId], line.title);
-  }
-  function confirmRemoveMainLine(line) {
-    const ids = [
-      line.lineId,
-      ...lines.filter((entry) => entry.parentLineId === line.lineId).map((entry) => entry.lineId)
-    ];
-    removeWithPending(line.lineId, ids, line.title);
-  }
-  function changeBuyerField(field, value) {
-    const errorKey = field === "name" ? "contactName" : field === "email" ? "contactEmail" : "contactPhone";
-    if (field === "name") setContactName(value);
-    if (field === "email") setContactEmail(value);
-    if (field === "phone") setContactPhone(value);
-    setFormErrors((current) => {
-      const next = { ...current };
-      delete next[errorKey];
-      return next;
-    });
-  }
-  function validateGuestContact() {
-    const next = {};
-    if (!contactName.trim()) next.contactName = labels.contactNameMissing;
-    if (!contactEmail.trim() || !contactEmail.includes("@")) next.contactEmail = labels.contactMissing;
-    if (!contactPhone.trim()) next.contactPhone = labels.contactPhoneMissing;
-    setFormErrors(next);
-    return Object.keys(next).length === 0;
-  }
-  function saveGuestContact() {
-    if (!validateGuestContact()) {
-      setGuestConfirmed(false);
-      return;
-    }
-    setGuestConfirmed(true);
-  }
-  function saveAuthPhone() {
-    if (!contactPhone.trim()) {
-      setFormErrors({ contactPhone: labels.contactPhoneMissing });
-      return;
-    }
-    setFormErrors({});
-    setAuthPhoneComplete(true);
-  }
-  function retrySession() {
-    setSessionRetrying(true);
-    window.setTimeout(() => setSessionRetrying(false), 800);
-  }
-  function toggleTiers(lineId) {
-    setOpenTiers(
-      (current) => current.includes(lineId) ? current.filter((value) => value !== lineId) : [...current, lineId]
-    );
-  }
-  const subtotal = lines.reduce((sum, line) => sum + lineNetTotal(line), 0);
-  const promotionsTotal = promotions.reduce((sum, promotion) => sum + promotion.amountCents, 0);
-  const tax = Math.max(
-    0,
-    Math.round((subtotal - promotionsTotal) * scenario.taxRateBps / 1e4)
-  );
-  const pickupCount = activeGroups.filter((group) => stateFor(group.id).mode === "pickup").length;
-  const unitCount = lines.reduce((sum, line) => sum + line.quantity, 0);
-  const hasUnavailable = lines.some((line) => line.stock < 1);
-  let shippingFees = 0;
-  let pickupFees = 0;
-  activeGroups.forEach((group) => {
-    const state = stateFor(group.id);
-    if (!readiness(group, state)) return;
-    if (state.mode === "pickup") pickupFees += feeFor(group, state);
-    else shippingFees += feeFor(group, state);
-  });
-  const pendingGroups = activeGroups.filter((group) => !readiness(group, stateFor(group.id)));
-  const pending = pendingGroups.length > 0;
-  const total = subtotal - promotionsTotal + tax + shippingFees + pickupFees + scenario.extraCents;
-  const paymentMethods = scenario.paymentIds.map((id) => data.paymentMethods.find((method) => method.id === id)).filter((method) => Boolean(method));
-  const anyPickup = pickupCount > 0;
-  const usable = (method) => method.enabled && !(method.kind === "cash" && anyPickup);
-  const firstUsable = paymentMethods.find(usable);
-  const selectedMethod = paymentMethods.find((method) => method.id === paymentId);
-  const activePaymentId = selectedMethod && usable(selectedMethod) ? selectedMethod.id : firstUsable?.id ?? "";
-  const activeMethod = paymentMethods.find((method) => method.id === activePaymentId) ?? null;
-  const paymentNotice = selectedMethod && !usable(selectedMethod) ? selectedMethod.kind === "cash" ? labels.paymentCashPickup : selectedMethod.reason : "";
-  const paymentOptions = paymentMethods.map((method) => {
-    const enabled = usable(method);
-    return {
-      id: method.id,
-      title: method.label,
-      detail: method.detail,
-      meta: method.kind === "cash" && !enabled ? labels.paymentUnavailable : "",
-      disabled: !enabled,
-      reason: enabled ? "" : method.kind === "cash" ? labels.paymentCashPickup : method.reason
-    };
+  const handleCreateAddress = onCreateAddress ? (payload) => onCreateAddress(toLegacyCreatedAddressPayload(payload)) : void 0;
+  const { model, actions } = useDemoCheckout({
+    data,
+    scenario,
+    onQuantityChange,
+    onRemoveItem,
+    onSelectAddress,
+    onCreateAddress: handleCreateAddress,
+    onStartRegistration,
+    onAddAssociate,
+    onConfirmOrder,
+    onContinueShopping
   });
-  const appliedCoupon = promotions.find((promotion) => promotion.kind === "coupon") ?? null;
-  const requiresShipping = activeGroups.some((group) => stateFor(group.id).mode === "shipping");
-  const missingAddress = requiresShipping && !shippingAddress;
-  const sessionBlocked = session === "loading" || session === "error";
-  const canConfirm = lines.length > 0 && !pending && activePaymentId !== "" && !hasUnavailable && !sessionBlocked;
-  const blockedMessage = lines.length === 0 ? labels.confirmBlockedCart : sessionBlocked ? labels.confirmBlockedSession : hasUnavailable ? labels.confirmBlockedStock : missingAddress ? labels.confirmBlockedAddress : pending ? labels.confirmBlockedRate : activePaymentId === "" ? labels.confirmBlockedPayment : labels.confirmNote;
-  function buildConfirmationOrder(reference) {
-    const orderGroups = activeGroups.map((group) => {
-      const state = stateFor(group.id);
-      const option = optionFor(group, state);
-      const point = pointFor(group, state);
-      const groupLines = orderGroupLines(lines.filter((line) => line.groupId === group.id));
-      return {
-        id: group.id,
-        title: group.title,
-        modeLabel: state.mode === "pickup" ? labels.modePickup : labels.modeShipping,
-        methodLabel: state.mode === "pickup" ? point?.label ?? "" : option?.label ?? "",
-        detailLabel: state.mode === "pickup" ? point ? pickupDetail(point) : "" : option?.eta ?? "",
-        feeCents: readiness(group, state) ? feeFor(group, state) : 0,
-        lines: groupLines.map((line) => ({ ...line }))
-      };
-    });
-    const billingAddress = billingSame ? shippingAddress : addressBook.find((address) => address.id === billingId) ?? null;
-    return {
-      reference,
-      totalCents: total,
-      subtotalCents: subtotal,
-      unitCount,
-      promotions: promotions.map((promotion) => ({ ...promotion })),
-      taxCents: tax,
-      taxRateBps: scenario.taxRateBps,
-      shippingCents: shippingFees,
-      pickupCents: pickupFees,
-      extraCents: scenario.extraCents,
-      extraLabel: scenario.extraLabel,
-      groups: orderGroups,
-      address: requiresShipping && shippingAddress ? { ...shippingAddress } : null,
-      paymentLabel: activeMethod?.label ?? "",
-      paymentDetail: activeMethod?.detail ?? "",
-      billingLabel: billingAddress ? billingSame && shippingAddress ? labels.confirmationBillingSame : billingAddress.label : "",
-      billingDetail: billingAddress ? addressSummary(billingAddress) : "",
-      customerName: contactName,
-      customerEmail: contactEmail
-    };
-  }
-  function completeOrder() {
-    if (creatingOrder || orderTimer.current) return;
-    const reference = data.meta.confirmationCode;
-    const order = buildConfirmationOrder(reference);
-    setPaymentError(false);
-    setCreatingOrder(true);
-    if (orderTimer.current) window.clearTimeout(orderTimer.current);
-    orderTimer.current = window.setTimeout(() => {
-      orderTimer.current = null;
-      setCreatingOrder(false);
-      setConfirmation(order);
-      onConfirmOrder?.({
-        reference,
-        totalCents: order.totalCents,
-        paymentId: activePaymentId,
-        groupIds: order.groups.map((group) => group.id)
-      });
-    }, 700);
-  }
-  function handleConfirm() {
-    if (!canConfirm || creatingOrder) return;
-    if (session === "guest" && !validateGuestContact()) {
-      setGuestConfirmed(false);
-      return;
-    }
-    if (session === "authenticated" && !contactPhone.trim()) {
-      setFormErrors({ contactPhone: labels.contactPhoneMissing });
-      return;
-    }
-    if (sessionBlocked) return;
-    setFormErrors({});
-    if (session === "guest") setGuestConfirmed(true);
-    if (scenario.simulateFailure && !paymentRetried) {
-      setPaymentError(true);
-      return;
-    }
-    completeOrder();
-  }
-  function retryPayment() {
-    setPaymentRetried(true);
-    setPaymentError(false);
-    completeOrder();
-  }
-  function applyCoupon() {
-    const code = couponCode.trim().toUpperCase();
-    if (!code) return;
-    const coupon = data.coupons.find((item) => item.code === code);
-    if (!coupon) {
-      setCouponNotice({ status: "invalid", message: labels.promoInvalid });
-      return;
-    }
-    if (coupon.outcome !== "valid") {
-      setCouponNotice({ status: coupon.outcome, message: coupon.message });
-      return;
-    }
-    setPromotions((current) => [
-      ...current.filter((promotion) => promotion.kind !== "coupon"),
-      {
-        id: `coupon-${coupon.code.toLowerCase()}`,
-        label: coupon.label,
-        kind: "coupon",
-        amountCents: coupon.amountCents,
-        code: coupon.code
-      }
-    ]);
-    setCouponCode("");
-    setCouponNotice({ status: "applied", message: fill(labels.promoApplied, { code: coupon.code }) });
-  }
-  function removeCoupon() {
-    setPromotions((current) => current.filter((promotion) => promotion.kind !== "coupon"));
-    setCouponNotice(null);
-  }
-  if (scenario.loading) {
-    return /* @__PURE__ */ jsxs("div", { "aria-busy": "true", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: data.meta.loadingLabel }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.sessionLoading }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-muted" }),
-        /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-muted" }),
-        /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-muted" })
-      ] })
-    ] });
-  }
-  if (creatingOrder) {
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-busy": "true",
-        "aria-labelledby": `${uid}-creating`,
-        "aria-live": "polite",
-        role: "status",
-        className: "mx-auto flex w-full max-w-md flex-col items-center rounded-xl border border-border bg-card p-8 text-center",
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted",
-              children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" })
-            }
-          ),
-          /* @__PURE__ */ jsx("h2", { id: `${uid}-creating`, className: "mt-4 text-xl font-semibold tracking-tight", children: labels.confirmationCreating }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.confirmationCreatingNote }),
-          /* @__PURE__ */ jsx("dl", { className: "mt-4 w-full rounded-lg bg-muted/40 px-3 py-2", children: /* @__PURE__ */ jsx(SummaryRow, { label: labels.total, value: money(total, data), emphasis: true }) })
-        ]
-      }
-    );
-  }
-  if (confirmation) {
-    const itemsLabel = countLabel(
-      confirmation.unitCount,
-      labels.summaryItemOne,
-      fill(labels.summaryItems, { count: confirmation.unitCount })
-    );
-    const deliveriesLabel = countLabel(
-      confirmation.groups.length,
-      labels.deliveriesOne,
-      fill(labels.deliveriesMany, { count: confirmation.groups.length })
-    );
-    const orderSteps = [
-      {
-        title: labels.confirmationNextOneTitle,
-        body: labels.confirmationNextOneBody
-      },
-      {
-        title: labels.confirmationNextTwoTitle,
-        body: labels.confirmationNextTwoBody
-      },
-      {
-        title: labels.confirmationNextThreeTitle,
-        body: labels.confirmationNextThreeBody
-      }
-    ];
-    return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs(
-        "section",
-        {
-          "aria-labelledby": `${uid}-confirmed`,
-          className: "rounded-xl border border-success/40 bg-card p-5 sm:p-6",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/10 text-base font-semibold text-success",
-                  children: labels.checkSymbol
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx(Badge, { variant: VARIANT_SECONDARY, children: data.meta.confirmationBadge }),
-                /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    id: `${uid}-confirmed`,
-                    className: "mt-2 text-xl font-semibold tracking-tight",
-                    children: data.meta.confirmationTitle
-                  }
-                ),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: fill(data.meta.confirmationBody, { name: confirmation.customerName }) }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: fill(labels.confirmationEmailNote, { email: confirmation.customerEmail }) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("dl", { className: "mt-4 grid gap-2 rounded-lg bg-muted/40 px-3 py-2 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: data.meta.confirmationReference }),
-                /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium tabular-nums", children: confirmation.reference })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "sm:text-right", children: [
-                /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: data.meta.confirmationTotal }),
-                /* @__PURE__ */ jsx("dd", { className: "text-sm font-semibold tabular-nums", children: money(confirmation.totalCents, data) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.confirmationReferenceNote })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "section",
-        {
-          "aria-labelledby": `${uid}-next`,
-          className: "rounded-xl border border-border bg-card p-5",
-          children: [
-            /* @__PURE__ */ jsx("h3", { id: `${uid}-next`, className: "text-sm font-semibold", children: labels.confirmationNextTitle }),
-            /* @__PURE__ */ jsx("ol", { className: "mt-3 space-y-3", children: orderSteps.map((step, index) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: index === 0 ? "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-success/10 text-xs font-semibold text-success" : "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground",
-                  children: index + 1
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: step.title }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: step.body })
-              ] })
-            ] }, step.title)) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "section",
-        {
-          "aria-labelledby": `${uid}-order`,
-          className: "rounded-xl border border-border bg-card",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2 border-b border-border px-4 py-3", children: [
-              /* @__PURE__ */ jsx("h3", { id: `${uid}-order`, className: "text-sm font-semibold", children: labels.confirmationOrderTitle }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.purchaseBreakdown, {
-                items: itemsLabel,
-                deliveries: deliveriesLabel
-              }) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: confirmation.groups.map((group) => {
-              const methodLine = [group.modeLabel, group.methodLabel, group.detailLabel].filter(Boolean).join(" \xB7 ");
-              return /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: group.title }),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: methodLine })
-                  ] }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs tabular-nums text-muted-foreground", children: group.feeCents === 0 ? labels.groupFree : money(group.feeCents, data) })
-                ] }),
-                /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-2", children: group.lines.map((line) => {
-                  const unitPrice = unitPriceFor(line, line.quantity);
-                  return /* @__PURE__ */ jsx(
-                    "li",
-                    {
-                      className: line.isAssociate ? "border-l border-border pl-3" : "",
-                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
-                        /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            src: line.image ?? PRODUCT_IMAGE_FALLBACK,
-                            alt: line.title,
-                            width: 40,
-                            height: 40,
-                            className: "h-10 w-10 shrink-0 rounded-md border border-border object-cover"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
-                            line.title,
-                            line.isAssociate ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-muted-foreground", children: labels.confirmationAssociateTag }) : null
-                          ] }),
-                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: line.variant }),
-                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.confirmationQuantity, {
-                            count: line.quantity,
-                            price: money(unitPrice, data)
-                          }) }),
-                          (line.lineDiscountCents ?? 0) > 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.lineDiscount, {
-                            label: line.lineDiscountLabel ?? "",
-                            amount: money(line.lineDiscountCents ?? 0, data)
-                          }) }) : null
-                        ] }),
-                        /* @__PURE__ */ jsx("p", { className: "shrink-0 text-sm font-medium tabular-nums", children: money(lineNetTotal(line), data) })
-                      ] })
-                    },
-                    line.lineId
-                  );
-                }) })
-              ] }, group.id);
-            }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "section",
-        {
-          "aria-labelledby": `${uid}-details`,
-          className: "rounded-xl border border-border bg-card p-4",
-          children: [
-            /* @__PURE__ */ jsx("h3", { id: `${uid}-details`, className: "text-sm font-semibold", children: labels.confirmationDetailsTitle }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-3 divide-y divide-border", children: [
-              confirmation.address ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.addressDelivery }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.address.label }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: addressSummary(confirmation.address) }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: `${confirmation.address.recipient} \xB7 ${confirmation.address.phone}` })
-              ] }) : null,
-              /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.paymentTitle }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.paymentLabel }),
-                confirmation.paymentDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: confirmation.paymentDetail }) : null
-              ] }),
-              confirmation.billingLabel ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.billingTitle }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.billingLabel }),
-                confirmation.billingDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: confirmation.billingDetail }) : null
-              ] }) : null
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "section",
-        {
-          "aria-labelledby": `${uid}-totals`,
-          className: "rounded-xl border border-border bg-card p-4",
-          children: [
-            /* @__PURE__ */ jsx("h3", { id: `${uid}-totals`, className: "text-sm font-semibold", children: labels.summaryTitle }),
-            /* @__PURE__ */ jsxs("dl", { className: "mt-3 space-y-2", children: [
-              /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: labels.subtotal,
-                  value: money(confirmation.subtotalCents, data),
-                  emphasis: false
-                }
-              ),
-              confirmation.promotions.map((promotion) => /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: promotion.label,
-                  value: `- ${money(promotion.amountCents, data)}`,
-                  emphasis: false
-                },
-                promotion.id
-              )),
-              /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: fill(labels.tax, { rate: String(confirmation.taxRateBps / 100) }),
-                  value: money(confirmation.taxCents, data),
-                  emphasis: false
-                }
-              ),
-              confirmation.shippingCents > 0 ? /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: labels.shippingCost,
-                  value: money(confirmation.shippingCents, data),
-                  emphasis: false
-                }
-              ) : null,
-              confirmation.pickupCents > 0 ? /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: labels.pickupCost,
-                  value: money(confirmation.pickupCents, data),
-                  emphasis: false
-                }
-              ) : null,
-              confirmation.extraCents > 0 ? /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: confirmation.extraLabel || labels.extraCost,
-                  value: money(confirmation.extraCents, data),
-                  emphasis: false
-                }
-              ) : null
-            ] }),
-            /* @__PURE__ */ jsx("dl", { className: "mt-2 border-t border-border pt-2", children: /* @__PURE__ */ jsx(
-              SummaryRow,
-              {
-                label: labels.total,
-                value: money(confirmation.totalCents, data),
-                emphasis: true
-              }
-            ) }),
-            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.totalDemoNote })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "lg",
-          className: "w-full sm:w-auto",
-          onClick: onContinueShopping,
-          children: data.meta.confirmationCta
-        }
-      ) })
-    ] });
-  }
-  if (lines.length === 0) {
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-labelledby": `${uid}-empty`,
-        className: "rounded-xl border border-border bg-card p-8 text-center",
-        children: [
-          /* @__PURE__ */ jsx("h2", { id: `${uid}-empty`, className: "text-xl font-semibold tracking-tight", children: data.meta.emptyTitle }),
-          /* @__PURE__ */ jsx("p", { className: "mx-auto mt-2 max-w-sm text-sm text-muted-foreground", children: data.meta.emptyBody }),
-          /* @__PURE__ */ jsx("div", { className: "mt-5", children: /* @__PURE__ */ jsx(Button, { type: "button", onClick: onContinueShopping, children: data.meta.emptyCta }) })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight", children: data.meta.title }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: fill(labels.purchaseBreakdown, {
-        items: countLabel(
-          unitCount,
-          labels.summaryItemOne,
-          fill(labels.summaryItems, { count: unitCount })
-        ),
-        deliveries: countLabel(
-          activeGroups.length,
-          labels.deliveriesOne,
-          fill(labels.deliveriesMany, { count: activeGroups.length })
-        )
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between gap-3 rounded-xl border border-border bg-card/95 p-3 backdrop-blur md:hidden", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: pending ? labels.totalPending : labels.total }),
-        /* @__PURE__ */ jsx("p", { className: "text-base font-semibold tabular-nums", children: pending ? labels.overviewPending : money(total, data) })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { type: "button", disabled: !canConfirm || creatingOrder, onClick: handleConfirm, children: creatingOrder ? labels.confirmationCreating : labels.confirm })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "md:grid md:grid-cols-5 md:items-start md:gap-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 md:col-span-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card", children: [
-          /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
-            BuyerSection,
-            {
-              uid,
-              session,
-              name: contactName,
-              email: contactEmail,
-              phone: contactPhone,
-              guestConfirmed,
-              authPhoneComplete,
-              errors: formErrors,
-              onFieldChange: changeBuyerField,
-              onGuestSave: saveGuestContact,
-              onGuestEdit: () => {
-                setGuestConfirmed(false);
-                setFormErrors({});
-              },
-              onAuthPhoneSave: saveAuthPhone,
-              onRetrySession: retrySession,
-              onStartRegistration
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-shipping-address`, children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    id: `${uid}-shipping-address`,
-                    className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-                    children: labels.addressTitle
-                  }
-                ),
-                !requiresShipping ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.pickupOnlyAddress }) : shippingAddress ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: addressHeadline(shippingAddress) }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: addressSummary(shippingAddress) }),
-                  shippingAddress.recipient !== contactName || shippingAddress.phone !== contactPhone ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [shippingAddress.recipient, shippingAddress.phone].filter(Boolean).join(" \xB7 ") }) : null
-                ] }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-destructive", children: labels.groupNeedsAddress })
-              ] }),
-              requiresShipping ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: VARIANT_OUTLINE,
-                  "aria-expanded": addressOpen,
-                  "aria-controls": `${uid}-address-panel`,
-                  onClick: () => addressOpen ? setAddressOpen(false) : openAddressEditor(),
-                  children: shippingAddress ? labels.changeAction : labels.groupAddAddress
-                }
-              ) : null
-            ] }),
-            addressOpen && requiresShipping ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                id: `${uid}-address-panel`,
-                className: "mt-3 rounded-lg border border-border bg-muted/30 p-3",
-                children: addressMode === "new" ? /* @__PURE__ */ jsx(
-                  AddressForm,
-                  {
-                    labels,
-                    countries: data.countries,
-                    authenticated: scenario.customer.sessionState === "authenticated",
-                    onSave: saveNewAddress,
-                    onCancel: () => addressBook.length === 0 ? setAddressOpen(false) : setAddressMode("list")
-                  }
-                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    AddressChoices,
-                    {
-                      legend: labels.addressSelectTitle,
-                      name: `${uid}-shipping-address`,
-                      addresses: addressBook,
-                      selectedId: shippingAddressId,
-                      onSelect: selectShippingAddress,
-                      labels
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        size: "sm",
-                        variant: VARIANT_OUTLINE,
-                        onClick: () => setAddressMode("new"),
-                        children: labels.addressNew
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        size: "sm",
-                        variant: VARIANT_GHOST,
-                        onClick: () => setAddressOpen(false),
-                        children: labels.addressCancel
-                      }
-                    )
-                  ] })
-                ] })
-              }
-            ) : null
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-groups`, children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("h3", { id: `${uid}-groups`, className: "text-sm font-semibold", children: labels.groupsTitle }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: countLabel(
-              activeGroups.length,
-              labels.deliveriesOne,
-              fill(labels.deliveriesMany, { count: activeGroups.length })
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "mt-1 text-xs text-destructive", children: stockMessage }),
-          associateNotice && associateNotice.mainLineId === "" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              "aria-live": "polite",
-              className: associateNotice.error ? "mt-1 text-xs text-destructive" : "mt-1 text-xs text-muted-foreground",
-              children: associateNotice.text
-            }
-          ) : null,
-          /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-4", children: activeGroups.map((group, index) => {
-            const state = stateFor(group.id);
-            const groupLines = orderGroupLines(
-              lines.filter((line) => line.groupId === group.id)
-            );
-            const point = pointFor(group, state);
-            const ready = readiness(group, state);
-            const fee = ready ? feeFor(group, state) : null;
-            const baseFee = baseFeeFor(group, state);
-            const feeDiscount = fee !== null ? Math.max(0, baseFee - fee) : 0;
-            const option = optionFor(group, state);
-            const heading = fill(state.mode === "pickup" ? labels.groupPickup : labels.groupDelivery, {
-              n: index + 1
-            });
-            const panelId = `${uid}-panel-${group.id}`;
-            const editing = openPanel === group.id;
-            const methodLine = state.mode === "pickup" ? [labels.modePickup, ready ? point?.label : ""].filter(Boolean).join(" \xB7 ") : [labels.modeShipping, ready ? option?.label : "", ready ? option?.eta : ""].filter(Boolean).join(" \xB7 ");
-            const pickupDetailLine = state.mode === "pickup" && point ? [point.address, point.hours].filter(Boolean).join(" \xB7 ") : "";
-            const needsAddress = state.mode === "shipping" && !shippingAddress;
-            const ratePending = state.rateState === "pending";
-            const rateError = state.rateState === "error";
-            const noCoverage = state.rateState === "none";
-            const shippingAvailable = group.modes.includes("shipping") && group.shippingOptions.length > 0 && Boolean(shippingAddress) && coverageFor(group, shippingAddressId) === "ok";
-            const pickupAvailable = group.modes.includes("pickup") && group.pickupPoints.some((item) => item.available !== false);
-            const bothModes = shippingAvailable && pickupAvailable;
-            const currentModeAvailable = state.mode === "shipping" ? shippingAvailable : pickupAvailable;
-            const currentChoiceCount = state.mode === "shipping" ? group.shippingOptions.length : group.pickupPoints.length;
-            const canChange = bothModes || (currentModeAvailable ? currentChoiceCount > 1 : pickupAvailable || shippingAvailable);
-            const panelMode = currentModeAvailable ? state.mode : pickupAvailable ? "pickup" : "shipping";
-            const shippingChoices = group.shippingOptions.map((item) => {
-              const discount = item.discountCents ?? 0;
-              const payable = Math.max(0, item.feeCents - discount);
-              return {
-                id: item.id,
-                title: item.label,
-                detail: item.eta,
-                meta: payable === 0 ? labels.groupFree : money(payable, data),
-                previousMeta: discount > 0 ? money(item.feeCents, data) : "",
-                disabled: false,
-                reason: ""
-              };
-            });
-            const pickupChoices = group.pickupPoints.map((item) => {
-              const discount = item.discountCents ?? 0;
-              const payable = Math.max(0, item.feeCents - discount);
-              return {
-                id: item.id,
-                title: item.label,
-                detail: pickupDetail(item),
-                meta: payable === 0 ? labels.groupFree : money(payable, data),
-                previousMeta: discount > 0 ? money(item.feeCents, data) : "",
-                disabled: item.available === false,
-                reason: item.available === false ? item.unavailableReason || "" : ""
-              };
-            });
-            const modeChoices = [
-              {
-                id: "shipping",
-                title: labels.modeShipping,
-                detail: "",
-                meta: "",
-                disabled: false,
-                reason: ""
-              },
-              {
-                id: "pickup",
-                title: labels.modePickup,
-                detail: "",
-                meta: "",
-                disabled: false,
-                reason: ""
-              }
-            ];
-            return /* @__PURE__ */ jsxs(
-              "section",
-              {
-                "aria-labelledby": `${uid}-group-${group.id}`,
-                className: "overflow-hidden rounded-xl border border-border bg-card",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-4 py-3", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                        /* @__PURE__ */ jsx("h4", { id: `${uid}-group-${group.id}`, className: "text-sm font-semibold", children: heading }),
-                        group.special ? /* @__PURE__ */ jsx(Badge, { variant: VARIANT_SECONDARY, children: labels.groupSpecial }) : null
-                      ] }),
-                      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: methodLine }),
-                      pickupDetailLine ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: pickupDetailLine }) : null
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1.5", children: [
-                      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tabular-nums", children: fee === null ? labels.overviewPending : feeDiscount > 0 ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground line-through", children: money(baseFee, data) }),
-                        /* @__PURE__ */ jsx("span", { children: fee === 0 ? labels.groupFree : money(fee, data) })
-                      ] }) : fee === 0 ? labels.groupFree : money(fee, data) }),
-                      canChange ? /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          type: "button",
-                          size: "xs",
-                          variant: VARIANT_OUTLINE,
-                          "aria-expanded": editing,
-                          "aria-controls": panelId,
-                          onClick: () => setOpenPanel(editing ? "" : group.id),
-                          children: labels.changeAction
-                        }
-                      ) : null
-                    ] })
-                  ] }),
-                  editing && canChange ? /* @__PURE__ */ jsxs("div", { id: panelId, className: "border-t border-border bg-muted/30 px-4 py-3", children: [
-                    bothModes ? /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(
-                      OptionGroup,
-                      {
-                        legend: labels.modeTitle,
-                        options: modeChoices,
-                        selectedId: state.mode,
-                        onSelect: (mode) => selectMode(group, mode),
-                        className: "grid gap-1.5 sm:grid-cols-2"
-                      }
-                    ) }) : null,
-                    panelMode === "shipping" ? rateError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.rateError }) : ratePending ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.groupRatePending }) : noCoverage ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.groupNoCoverage }) : /* @__PURE__ */ jsx(
-                      OptionGroup,
-                      {
-                        legend: labels.groupShippingOptions,
-                        options: shippingChoices,
-                        selectedId: state.shippingOptionId,
-                        onSelect: (id) => chooseShippingOption(group, id),
-                        className: "grid gap-1.5"
-                      }
-                    ) : /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx(
-                        OptionGroup,
-                        {
-                          legend: labels.groupPickupPoints,
-                          options: pickupChoices,
-                          selectedId: state.pickupPointId,
-                          onSelect: (id) => choosePickupPoint(group, id),
-                          className: "grid gap-1.5"
-                        }
-                      ),
-                      point?.note ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: point.note }) : null
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        size: "xs",
-                        variant: VARIANT_GHOST,
-                        onClick: () => setOpenPanel(""),
-                        children: labels.done
-                      }
-                    ) })
-                  ] }) : null,
-                  needsAddress ? /* @__PURE__ */ jsx("p", { className: "px-4 pb-3 text-xs text-muted-foreground", children: labels.groupNoAddress }) : ratePending ? /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "px-4 pb-3 text-xs text-muted-foreground", children: labels.groupRatePending }) : rateError ? /* @__PURE__ */ jsxs("div", { className: "mx-4 mb-3 rounded-md border border-destructive/40 bg-destructive/10 p-2.5", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.rateError }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        size: "xs",
-                        variant: VARIANT_OUTLINE,
-                        className: "mt-1.5",
-                        onClick: () => recalc(group),
-                        children: labels.groupRetryRate
-                      }
-                    )
-                  ] }) : noCoverage ? /* @__PURE__ */ jsxs("div", { className: "mx-4 mb-3 rounded-md border border-warning/40 bg-warning/10 p-2.5", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium", children: labels.groupNoCoverage }),
-                    /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: labels.groupNoCoverageHint }),
-                    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: [
-                      group.modes.includes("pickup") ? /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          type: "button",
-                          size: "xs",
-                          variant: VARIANT_OUTLINE,
-                          onClick: () => selectMode(group, "pickup"),
-                          children: labels.groupPickupAvailable
-                        }
-                      ) : null,
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          type: "button",
-                          size: "xs",
-                          variant: VARIANT_GHOST,
-                          onClick: openAddressEditor,
-                          children: labels.groupChangeAddress
-                        }
-                      )
-                    ] })
-                  ] }) : null,
-                  group.note ? /* @__PURE__ */ jsx("p", { className: "mx-4 mb-3 rounded-md bg-muted/50 p-2 text-xs text-muted-foreground", children: group.note }) : null,
-                  /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border border-t border-border", children: groupLines.map((line) => {
-                    const unitPrice = unitPriceFor(line, line.quantity);
-                    const tiers = line.tiers ?? [];
-                    const currentTier = currentTierFor(line, line.quantity);
-                    const nextTier = nextTierFor(line, line.quantity);
-                    const tierOpen = openTiers.includes(line.lineId);
-                    const nextReachable = nextTier !== null && line.stock >= nextTier.minQuantity && nextTier.unitCents < unitPrice;
-                    const detailLine = [
-                      line.variant,
-                      fill(labels.each, { amount: money(unitPrice, data) })
-                    ].join(" \xB7 ");
-                    const unavailable = line.stock < 1;
-                    const isAssociate = line.isAssociate === true;
-                    const mainQty = isAssociate ? mainQuantityFor(line) : line.quantity;
-                    const maxQty = isAssociate ? associateMaxFor(line, mainQty) : line.stock;
-                    const minQty = isAssociate ? line.minQuantity ?? 1 : 1;
-                    const parentLine = line.parentLineId ? lines.find((entry) => entry.lineId === line.parentLineId) : void 0;
-                    const parentNote = parentLine && parentLine.groupId !== line.groupId ? fill(labels.associateOf, { name: parentLine.title }) : "";
-                    const relatedInGroup = Boolean(
-                      isAssociate && parentLine && parentLine.groupId === line.groupId
-                    );
-                    const associateDiscount = isAssociate ? associateDiscountFor(unitPrice, line.regularCents) : null;
-                    const regularTotal = (line.regularCents ?? 0) * line.quantity;
-                    const lineNet = lineNetTotal(line);
-                    const totalSavingCents = associateDiscount ? Math.max(0, regularTotal - lineNet) : 0;
-                    const totalSavingPercent = associateDiscount && regularTotal > 0 ? Math.round(totalSavingCents / regularTotal * 100) : 0;
-                    const associateDefs = isAssociate ? [] : associatesFor(line.lineId);
-                    const associateLines = isAssociate ? [] : lines.filter((entry) => entry.parentLineId === line.lineId);
-                    const availableAssociates = associateDefs.filter(
-                      (def) => !lines.some((entry) => entry.lineId === def.lineId)
-                    );
-                    const addableAssociates = availableAssociates.filter(
-                      (def) => def.eligible !== false && def.stock > 0 && associateDefMax(def, line.quantity) > 0
-                    );
-                    const rowNotice = associateNotice && associateNotice.mainLineId === line.lineId ? associateNotice : null;
-                    const confirmingMain = confirmRemoveMain === line.lineId;
-                    const rowRemoving = removingLine === line.lineId || isAssociate && removingLine === line.parentLineId;
-                    const atLimit = maxQty > 0 && line.quantity >= maxQty;
-                    const canDecrease = !unavailable && (isAssociate ? minQty === 0 || line.quantity > minQty : line.quantity > 1);
-                    const canIncrease = !unavailable && maxQty > 0 && line.quantity < maxQty;
-                    const addingAny = addingAssociate !== "";
-                    return /* @__PURE__ */ jsxs(
-                      "li",
-                      {
-                        "aria-busy": priceUpdating === line.lineId || rowRemoving,
-                        className: "px-4 py-3",
-                        children: [
-                          /* @__PURE__ */ jsxs(
-                            "div",
-                            {
-                              className: relatedInGroup ? "flex flex-col gap-2 border-l border-border pl-3 sm:flex-row sm:items-start sm:gap-3" : "flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3",
-                              children: [
-                                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 gap-3", children: [
-                                  /* @__PURE__ */ jsx(
-                                    "img",
-                                    {
-                                      src: line.image ?? PRODUCT_IMAGE_FALLBACK,
-                                      alt: line.title,
-                                      width: 48,
-                                      height: 48,
-                                      className: "h-12 w-12 shrink-0 rounded-md border border-border object-cover"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: line.title }),
-                                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: detailLine }),
-                                    isAssociate && associateDiscount ? /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs", children: [
-                                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-through tabular-nums", children: fill(labels.associatePreviousUnit, {
-                                        amount: money(line.regularCents ?? 0, data)
-                                      }) }),
-                                      /* @__PURE__ */ jsx("span", { className: "text-success", children: fill(labels.associateTotalSaving, {
-                                        amount: money(totalSavingCents, data),
-                                        percent: totalSavingPercent
-                                      }) })
-                                    ] }) : null,
-                                    parentNote ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: parentNote }) : null,
-                                    relatedInGroup && parentLine ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: fill(labels.associateOf, { name: parentLine.title }) }) : null,
-                                    (line.lineDiscountCents ?? 0) > 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.lineDiscount, {
-                                      label: line.lineDiscountLabel ?? "",
-                                      amount: money(line.lineDiscountCents ?? 0, data)
-                                    }) }) : null,
-                                    isAssociate ? /* @__PURE__ */ jsx(
-                                      "p",
-                                      {
-                                        className: atLimit ? "text-xs font-medium text-foreground" : "text-xs text-muted-foreground",
-                                        children: atLimit ? labels.associateLimitReached : fill(labels.associateMax, { count: maxQty })
-                                      }
-                                    ) : unavailable ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.outOfStock }) : line.stock <= 3 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.stockLeft, { count: line.stock }) }) : null
-                                  ] })
-                                ] }),
-                                /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3 sm:w-28 sm:flex-col sm:items-end sm:gap-1.5", children: [
-                                  /* @__PURE__ */ jsxs("div", { className: "sm:text-right", children: [
-                                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.subtotal }),
-                                    /* @__PURE__ */ jsxs(
-                                      "p",
-                                      {
-                                        className: priceUpdating === line.lineId ? "text-sm font-semibold tabular-nums text-muted-foreground" : "text-sm font-semibold tabular-nums",
-                                        children: [
-                                          money(lineNetTotal(line), data),
-                                          priceUpdating === line.lineId ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: labels.ellipsis }) : null
-                                        ]
-                                      }
-                                    )
-                                  ] }),
-                                  /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: priceUpdating === line.lineId ? labels.priceUpdating : "" }),
-                                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                                    /* @__PURE__ */ jsx(
-                                      Button,
-                                      {
-                                        type: "button",
-                                        size: "icon",
-                                        variant: VARIANT_OUTLINE,
-                                        "aria-label": fill(labels.decrease, { name: line.title }),
-                                        disabled: !canDecrease || rowRemoving,
-                                        onClick: () => changeQuantity(line.lineId, line.quantity - 1),
-                                        children: labels.decreaseSymbol
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsx("span", { className: "min-w-8 text-center text-sm tabular-nums", children: line.quantity }),
-                                    /* @__PURE__ */ jsx(
-                                      Button,
-                                      {
-                                        type: "button",
-                                        size: "icon",
-                                        variant: VARIANT_OUTLINE,
-                                        "aria-label": fill(labels.increase, { name: line.title }),
-                                        disabled: !canIncrease || rowRemoving,
-                                        onClick: () => changeQuantity(line.lineId, line.quantity + 1),
-                                        children: labels.increaseSymbol
-                                      }
-                                    )
-                                  ] })
-                                ] })
-                              ]
-                            }
-                          ),
-                          tiers.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-lg bg-muted/40 px-3 py-2", children: [
-                            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1", children: [
-                              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: labels.tierBadge }),
-                              /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  type: "button",
-                                  size: "xs",
-                                  variant: VARIANT_GHOST,
-                                  className: "px-0",
-                                  "aria-expanded": tierOpen,
-                                  "aria-controls": `${uid}-tiers-${line.lineId}`,
-                                  onClick: () => toggleTiers(line.lineId),
-                                  children: tierOpen ? labels.tierHide : labels.tierSee
-                                }
-                              )
-                            ] }),
-                            nextReachable && nextTier ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: fill(labels.tierNext, {
-                              count: nextTier.minQuantity - line.quantity,
-                              price: money(nextTier.unitCents, data)
-                            }) }) : null,
-                            tierOpen ? /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                id: `${uid}-tiers-${line.lineId}`,
-                                className: "mt-2 divide-y divide-border border-t border-border",
-                                children: tiers.map((tier) => {
-                                  const tierIsCurrent = currentTier?.minQuantity === tier.minQuantity;
-                                  return /* @__PURE__ */ jsxs(
-                                    "div",
-                                    {
-                                      "aria-current": tierIsCurrent ? "true" : void 0,
-                                      className: tierIsCurrent ? "flex items-center justify-between gap-2 py-1.5 text-xs font-medium" : "flex items-center justify-between gap-2 py-1.5 text-xs text-muted-foreground",
-                                      children: [
-                                        /* @__PURE__ */ jsx("span", { children: tierRangeLabel(tier, data) }),
-                                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-                                          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: money(tier.unitCents, data) }),
-                                          tierIsCurrent ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: labels.tierCurrent }) : null
-                                        ] })
-                                      ]
-                                    },
-                                    tier.minQuantity
-                                  );
-                                })
-                              }
-                            ) : null
-                          ] }) : null,
-                          associateDefs.length > 0 && (associateLines.length > 0 || addableAssociates.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-lg bg-muted/40 px-3 py-2", children: [
-                            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1", children: [
-                              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: associateLines.length > 0 ? fill(
-                                associateLines.length === 1 ? labels.associatesSummaryOne : labels.associatesSummary,
-                                { count: associateLines.length }
-                              ) : labels.associatesTitle }),
-                              addableAssociates.length > 0 || assocOpen === line.lineId ? /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  type: "button",
-                                  size: "xs",
-                                  variant: VARIANT_GHOST,
-                                  className: "px-0",
-                                  "aria-expanded": assocOpen === line.lineId,
-                                  "aria-controls": `${uid}-associates-${line.lineId}`,
-                                  onClick: () => setAssocOpen(assocOpen === line.lineId ? "" : line.lineId),
-                                  children: assocOpen === line.lineId ? labels.associatesHide : labels.associatesAddMore
-                                }
-                              ) : null
-                            ] }),
-                            rowNotice ? /* @__PURE__ */ jsx(
-                              "p",
-                              {
-                                "aria-live": "polite",
-                                className: rowNotice.error ? "mt-1.5 text-xs text-destructive" : "mt-1.5 text-xs text-muted-foreground",
-                                children: rowNotice.text
-                              }
-                            ) : null,
-                            assocOpen === line.lineId ? /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                id: `${uid}-associates-${line.lineId}`,
-                                className: "mt-2 divide-y divide-border border-t border-border",
-                                children: availableAssociates.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-2 text-xs text-muted-foreground", children: labels.associateOptionsNone }) : availableAssociates.map((def) => {
-                                  const defMax = associateDefMax(def, line.quantity);
-                                  const defDiscount = associateDiscountFor(
-                                    def.unitCents,
-                                    def.regularCents
-                                  );
-                                  const blocked = def.eligible === false || def.stock < 1 || defMax < 1;
-                                  const adding = addingAssociate === def.id;
-                                  const status = def.stock < 1 ? labels.associateNoStock : def.eligible === false ? `${labels.associateNotEligible} \xB7 ${def.reason ?? ""}` : defMax < 1 ? labels.associateLimitReached : "";
-                                  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 py-2", children: [
-                                    /* @__PURE__ */ jsx(
-                                      "img",
-                                      {
-                                        src: def.image ?? PRODUCT_IMAGE_FALLBACK,
-                                        alt: def.title,
-                                        width: 36,
-                                        height: 36,
-                                        className: "h-9 w-9 shrink-0 rounded-md border border-border object-cover"
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                                      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium", children: def.title }),
-                                      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: def.variant }),
-                                      /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs", children: [
-                                        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: money(def.unitCents, data) }),
-                                        defDiscount ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-through tabular-nums", children: money(def.regularCents ?? 0, data) }) : null,
-                                        defDiscount ? /* @__PURE__ */ jsx("span", { className: "text-success", children: fill(labels.associateSavings, {
-                                          amount: money(defDiscount.amountCents, data),
-                                          percent: defDiscount.percent
-                                        }) }) : null,
-                                        defMax > 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: fill(labels.associateMax, { count: defMax }) }) : null
-                                      ] }),
-                                      status ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: status }) : null
-                                    ] }),
-                                    /* @__PURE__ */ jsx(
-                                      Button,
-                                      {
-                                        type: "button",
-                                        size: "xs",
-                                        variant: VARIANT_OUTLINE,
-                                        disabled: blocked || addingAny || rowRemoving,
-                                        onClick: () => addAssociate(line, def),
-                                        children: adding ? labels.associateAdding : labels.associateAdd
-                                      }
-                                    )
-                                  ] }, def.id);
-                                })
-                              }
-                            ) : null
-                          ] }) : null,
-                          confirmingMain ? /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-md border border-border bg-muted/40 px-3 py-2", children: [
-                            /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: fill(labels.removeMainWarning, {
-                              name: line.title,
-                              count: associateLines.length
-                            }) }),
-                            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
-                              /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  type: "button",
-                                  size: "xs",
-                                  variant: VARIANT_DESTRUCTIVE,
-                                  disabled: rowRemoving,
-                                  onClick: () => confirmRemoveMainLine(line),
-                                  children: labels.removeMainConfirm
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  type: "button",
-                                  size: "xs",
-                                  variant: VARIANT_GHOST,
-                                  onClick: () => setConfirmRemoveMain(""),
-                                  children: labels.associateKeep
-                                }
-                              )
-                            ] })
-                          ] }) : null,
-                          /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx(
-                            Button,
-                            {
-                              type: "button",
-                              size: "xs",
-                              variant: VARIANT_GHOST,
-                              className: "px-0 text-muted-foreground hover:text-destructive",
-                              "aria-label": fill(labels.removeNamed, { name: line.title }),
-                              disabled: rowRemoving,
-                              onClick: () => requestRemoveLine(line),
-                              children: rowRemoving ? labels.associateRemoving : labels.remove
-                            }
-                          ) })
-                        ]
-                      },
-                      line.lineId
-                    );
-                  }) })
-                ]
-              },
-              group.id
-            );
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card", children: [
-          /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-payment`, className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsx(
-              "h3",
-              {
-                id: `${uid}-payment`,
-                className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-                children: labels.paymentTitle
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-between gap-2 rounded-lg bg-muted/40 px-3 py-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: activeMethod ? activeMethod.label : labels.paymentUnavailable }),
-                /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: activeMethod ? activeMethod.detail : labels.paymentChoose })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: VARIANT_OUTLINE,
-                  "aria-expanded": paymentOpen,
-                  "aria-controls": `${uid}-payment-panel`,
-                  onClick: () => setPaymentOpen(!paymentOpen),
-                  children: labels.changeAction
-                }
-              )
-            ] }),
-            paymentNotice ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: paymentNotice }) : null,
-            paymentOpen ? /* @__PURE__ */ jsx("div", { id: `${uid}-payment-panel`, className: "mt-2", children: /* @__PURE__ */ jsx(
-              OptionGroup,
-              {
-                legend: labels.paymentChoose,
-                options: paymentOptions,
-                selectedId: activePaymentId,
-                onSelect: (id) => {
-                  setPaymentId(id);
-                  setPaymentError(false);
-                  setPaymentOpen(false);
-                },
-                className: "grid gap-1.5"
-              }
-            ) }) : null,
-            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.paymentProviderNote }),
-            paymentError ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "mt-3 rounded-md border border-destructive/40 bg-destructive/10 p-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: labels.paymentErrorTitle }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.paymentErrorBody }),
-              /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_OUTLINE, onClick: retryPayment, children: labels.paymentRetry }) })
-            ] }) : null
-          ] }),
-          addressBook.length > 0 ? /* @__PURE__ */ jsxs(
-            "section",
-            {
-              "aria-labelledby": `${uid}-billing`,
-              className: "border-t border-border px-4 py-3",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    id: `${uid}-billing`,
-                    className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-                    children: labels.billingTitle
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    type: "button",
-                    role: "checkbox",
-                    "aria-checked": billingSame,
-                    variant: VARIANT_GHOST,
-                    size: "sm",
-                    onClick: () => setBillingSame(!billingSame),
-                    className: "w-full justify-start whitespace-normal px-0 text-left",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: "flex size-4 shrink-0 items-center justify-center rounded-sm border border-input text-xs",
-                          children: billingSame ? labels.checkSymbol : null
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "text-sm font-normal", children: labels.billingSame })
-                    ]
-                  }
-                ) }),
-                !billingSame ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
-                  OptionGroup,
-                  {
-                    legend: labels.billingChoose,
-                    options: addressBook.map((address) => ({
-                      id: address.id,
-                      title: address.label,
-                      detail: addressSummary(address),
-                      meta: address.isDefault ? labels.addressDefaultBadge : "",
-                      disabled: false,
-                      reason: ""
-                    })),
-                    selectedId: billingId,
-                    onSelect: setBillingId,
-                    className: "grid gap-2"
-                  }
-                ) }) : null
-              ]
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: data.meta.footerNote })
-      ] }),
-      /* @__PURE__ */ jsx("aside", { className: "md:col-span-2 md:sticky md:top-6", "aria-label": labels.summaryTitle, children: /* @__PURE__ */ jsxs(Card, { className: "gap-3 py-0 shadow-none", children: [
-        /* @__PURE__ */ jsx(CardHeader, { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: labels.summaryTitle }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: countLabel(unitCount, labels.summaryItemOne, fill(labels.summaryItems, { count: unitCount })) })
-        ] }) }),
-        /* @__PURE__ */ jsxs(CardContent, { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxs("dl", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(SummaryRow, { label: labels.subtotal, value: money(subtotal, data), emphasis: false }),
-            promotions.map((promotion) => /* @__PURE__ */ jsx(
-              SummaryRow,
-              {
-                label: promotion.label,
-                value: `- ${money(promotion.amountCents, data)}`,
-                emphasis: false
-              },
-              promotion.id
-            )),
-            /* @__PURE__ */ jsx(
-              SummaryRow,
-              {
-                label: fill(labels.tax, { rate: String(scenario.taxRateBps / 100) }),
-                value: money(tax, data),
-                emphasis: false
-              }
-            ),
-            pending ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-              shippingFees > 0 ? /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: labels.shippingCost,
-                  value: money(shippingFees, data),
-                  emphasis: false
-                }
-              ) : null,
-              pickupFees > 0 ? /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: labels.pickupCost,
-                  value: money(pickupFees, data),
-                  emphasis: false
-                }
-              ) : null,
-              scenario.extraCents > 0 ? /* @__PURE__ */ jsx(
-                SummaryRow,
-                {
-                  label: scenario.extraLabel || labels.extraCost,
-                  value: money(scenario.extraCents, data),
-                  emphasis: false
-                }
-              ) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-border pt-3", children: [
-            /* @__PURE__ */ jsx("dl", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
-              /* @__PURE__ */ jsx("dt", { className: "text-sm font-semibold", children: pending ? labels.totalPending : labels.total }),
-              /* @__PURE__ */ jsx("dd", { className: "text-base font-semibold tabular-nums", children: pending ? labels.overviewPending : money(total, data) })
-            ] }) }),
-            pending ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.totalPendingNote }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.totalDemoNote })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-3", children: appliedCoupon ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.promoApplied, { code: appliedCoupon.code }) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                size: "xs",
-                variant: VARIANT_GHOST,
-                onClick: removeCoupon,
-                children: labels.remove
-              }
-            )
-          ] }) : couponOpen ? /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-coupon`, className: "text-xs font-medium", children: labels.promoLabel }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: `${uid}-coupon`,
-                  value: couponCode,
-                  placeholder: labels.promoPlaceholder,
-                  onChange: (event) => {
-                    setCouponCode(event.target.value);
-                    setCouponNotice(null);
-                  },
-                  className: "h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: VARIANT_OUTLINE,
-                  onClick: applyCoupon,
-                  children: labels.promoApply
-                }
-              )
-            ] }),
-            couponNotice && couponNotice.status !== "applied" ? /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-destructive", children: couponNotice.message }) : null
-          ] }) : /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              size: "sm",
-              variant: VARIANT_GHOST,
-              onClick: () => setCouponOpen(true),
-              children: labels.promoOpen
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(CardFooter, { className: "px-4 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              className: "hidden w-full md:inline-flex",
-              size: "lg",
-              disabled: !canConfirm || creatingOrder,
-              "aria-describedby": `${uid}-confirm-note`,
-              onClick: handleConfirm,
-              children: creatingOrder ? labels.confirmationCreating : labels.confirm
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { id: `${uid}-confirm-note`, className: "mt-2 text-xs text-muted-foreground", children: creatingOrder ? labels.confirmationCreatingNote : canConfirm ? labels.confirmNote : blockedMessage })
-        ] }) })
-      ] }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(CheckoutView, { model, actions });
 }
 function CheckoutCommerceV1({ data, ...props }) {
-  return /* @__PURE__ */ jsx(BlockDataProvider, { data, children: /* @__PURE__ */ jsx(CheckoutCommerceV1Content, { data, ...props }) });
+  return /* @__PURE__ */ jsx(CheckoutCommerceV1Content, { data, ...props });
 }
 export {
   CheckoutCommerceV1 as default