@asteby/storefront-react 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -502,6 +502,7 @@ function useProductOptions(product, config = {}) {
           exists: exact ? true : loose.length > 0 && Object.keys(selectedOptions).length < product.options.length,
           available: exact ? exact.available_for_sale : Object.keys(selectedOptions).length < product.options.length && loose.some((v) => v.available_for_sale),
           variant: exact,
+          availability: exact ? storefront.resolveAvailability(exact) : loose.length ? storefront.productAvailability({ variants: loose, available_for_sale: loose.some((v) => v.available_for_sale) }) : null,
           search: `?${search.toString()}`
         };
       })
@@ -520,21 +521,32 @@ function toMerchandise(product, variant) {
 function AddToCartButton({
   variantId,
   quantity = 1,
+  availability,
+  availabilitySource,
+  lowStockThreshold,
+  locale,
   merchandise,
   onAdded,
   onClick,
   disabled,
-  children = "Agregar al carrito",
+  children,
   type = "button",
   ...rest
 }) {
   const cart = useCart();
+  const sf = useOptionalStorefront();
+  const resolved = availability ?? (availabilitySource ? storefront.resolveAvailability(availabilitySource, { lowStockThreshold: lowStockThreshold ?? null }) : null);
+  const view = resolved ? storefront.availabilityView(resolved, locale ?? sf?.locale ?? "es-MX") : null;
+  const blocked = view ? !view.ctaEnabled : false;
+  const qty = view?.maxPerOrder != null ? Math.min(quantity, view.maxPerOrder) : quantity;
+  const label = children ?? view?.ctaLabel ?? "Agregar al carrito";
   const [adding, setAdding] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type,
-      disabled: disabled || !variantId || adding,
+      disabled: disabled || !variantId || adding || blocked,
+      "data-availability": view?.status,
       "aria-busy": adding || void 0,
       "data-adding": adding || void 0,
       onClick: async (event) => {
@@ -542,17 +554,247 @@ function AddToCartButton({
         if (event.defaultPrevented || !variantId) return;
         setAdding(true);
         try {
-          const result = await cart.addLines([{ variant_id: variantId, quantity, ...merchandise ? { merchandise } : {} }]);
+          const result = await cart.addLines([{ variant_id: variantId, quantity: qty, ...merchandise ? { merchandise } : {} }]);
           if (result) onAdded?.();
         } finally {
           setAdding(false);
         }
       },
       ...rest,
-      children
+      children: label
+    }
+  );
+}
+var SR_ONLY = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function SrOnly({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: SR_ONLY, children });
+}
+function useLocale(locale) {
+  const sf = useOptionalStorefront();
+  return locale ?? sf?.locale ?? "es-MX";
+}
+function pickAvailability({ availability, source, lowStockThreshold }) {
+  const opts = { lowStockThreshold: lowStockThreshold ?? null };
+  if (availability) return availability;
+  return source ? storefront.resolveAvailability(source, opts) : null;
+}
+function useAvailability(input) {
+  const locale = useLocale(input.locale);
+  const a = pickAvailability(input);
+  return react.useMemo(
+    () => a ? storefront.availabilityView(a, locale, { messages: input.messages ?? null }) : null,
+    // `a` is rebuilt from props each render; key by its content
+    [JSON.stringify(a), locale, input.messages]
+  );
+}
+function AvailabilityBadge({
+  availability,
+  source,
+  lowStockThreshold,
+  locale,
+  messages,
+  placement = "detail",
+  live,
+  ...rest
+}) {
+  const view = useAvailability({ availability, source, lowStockThreshold, locale, messages });
+  const loc = useLocale(locale);
+  if (!view) return null;
+  if (placement === "card" && !view.showOnCard) return null;
+  const m = storefront.availabilityMessages(loc, messages);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-availability": view.status,
+      "data-tone": view.tone,
+      "data-placement": placement,
+      ...live ? { role: "status" } : {},
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": view.srText !== view.label ? true : void 0, children: view.label }),
+        view.srText !== view.label && /* @__PURE__ */ jsxRuntime.jsx(SrOnly, { children: view.srText }),
+        placement === "detail" && view.sublabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-availability-note": "eta", children: view.sublabel })
+        ] }),
+        placement === "detail" && view.maxPerOrder !== null && view.status !== "out_of_stock" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-availability-note": "max", children: storefront.formatAvailabilityMessage(m.max_per_order, { n: view.maxPerOrder }) })
+        ] })
+      ]
     }
   );
 }
+function VariantOptionState({ children, availability, source, lowStockThreshold, locale, messages, ...rest }) {
+  const a = pickAvailability({ availability, source, lowStockThreshold });
+  const loc = useLocale(locale);
+  if (!a) return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, children });
+  const m = storefront.availabilityMessages(loc, messages);
+  const status = storefront.availabilityView(a, loc, { messages: messages ?? null }).status;
+  if (status === "out_of_stock") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-availability": status, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("s", { children }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SrOnly, { children: [
+        " (",
+        m["option.sold_out"],
+        ")"
+      ] })
+    ] });
+  }
+  if (status === "backorder" || status === "preorder") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-availability": status, ...rest, children: [
+      children,
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-availability-tag": true, children: [
+        "(",
+        m[status === "backorder" ? "option.backorder" : "option.preorder"],
+        ")"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-availability": status, ...rest, children });
+}
+function RestockNotifyForm({
+  sku,
+  market,
+  allowPhone = false,
+  action,
+  client: clientProp,
+  enhance = true,
+  onSubscribed,
+  onError,
+  availability,
+  source,
+  lowStockThreshold,
+  locale,
+  messages,
+  ...rest
+}) {
+  const sf = useOptionalStorefront();
+  const view = useAvailability({ availability, source, lowStockThreshold, locale, messages });
+  const loc = useLocale(locale);
+  const id = react.useId();
+  const [state, setState] = react.useState("idle");
+  if (!view?.showNotify) return null;
+  const m = storefront.availabilityMessages(loc, messages);
+  const client = clientProp ?? sf?.client ?? null;
+  if (state === "done") {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "data-restock": "done", children: m["notify.done"] });
+  }
+  const submit = enhance && client ? (e) => {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const email = String(form.get("email") ?? "").trim();
+    const phone = String(form.get("phone") ?? "").trim();
+    if (!email && !phone) {
+      setState("error");
+      return;
+    }
+    setState("sending");
+    client.restock.subscribe({ sku, locale: loc, consent: true, ...email ? { email } : {}, ...phone ? { phone } : {}, ...market ? { market } : {} }).then(() => {
+      setState("done");
+      onSubscribed?.();
+    }).catch((err) => {
+      setState("error");
+      onError?.(err);
+    });
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("form", { method: "post", ...action !== void 0 ? { action } : {}, ...rest, onSubmit: submit, "data-restock": state, children: /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { children: m["notify.title"] }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "sku", value: sku }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "locale", value: loc }),
+    market && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "market", value: market }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-email`, children: m["notify.email"] }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-email`, name: "email", type: "email", autoComplete: "email", required: !allowPhone })
+    ] }),
+    allowPhone && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-phone`, children: m["notify.phone"] }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-phone`, name: "phone", type: "tel", autoComplete: "tel" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-consent`, name: "consent", type: "checkbox", value: "true", required: true }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-consent`, children: m["notify.consent"] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: state === "sending", "aria-busy": state === "sending" || void 0, children: m["notify.submit"] }),
+    state === "error" && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: m["notify.error"] })
+  ] }) });
+}
+function CartLineProblem({ line, locale, messages, onAdjust, onRemove, ...rest }) {
+  const cart = useOptionalCart();
+  const loc = useLocale(locale);
+  if (!line.problem) return null;
+  const view = storefront.cartLineProblemView(line.problem, loc, { messages: messages ?? null, lineQuantity: line.quantity });
+  const adjust = onAdjust ?? (cart ? (id, q) => cart.updateLines([{ id, quantity: q }]) : void 0);
+  const remove = onRemove ?? (cart ? (id) => cart.removeLines([id]) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cart-line-problem": view.code, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: view.message }),
+    view.adjustTo !== null && adjust && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void adjust(line.id, view.adjustTo), children: view.adjustLabel }),
+    remove && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void remove(line.id), children: view.removeLabel })
+  ] });
+}
+function StockConflictAlert({
+  error: errorProp,
+  cart: cartProp,
+  locale,
+  messages,
+  onAdjust,
+  onRemove,
+  onDismiss,
+  autoFocus = true,
+  ...rest
+}) {
+  const cartCtx = useOptionalCart();
+  const loc = useLocale(locale);
+  const ref = react.useRef(null);
+  const error = errorProp !== void 0 ? errorProp : cartCtx?.error ?? null;
+  const cart = cartProp !== void 0 ? cartProp : cartCtx?.cart ?? null;
+  const active = storefront.isStorefrontError(error) && error.code === "insufficient_stock";
+  react.useEffect(() => {
+    if (active && autoFocus) ref.current?.focus({ preventScroll: true });
+  }, [active, error, autoFocus]);
+  if (!active) return null;
+  const m = storefront.availabilityMessages(loc, messages);
+  const lines = error.stockLines;
+  const adjust = onAdjust ?? (cartCtx ? (id, q) => cartCtx.updateLines([{ id, quantity: q }]) : void 0);
+  const remove = onRemove ?? (cartCtx ? (id) => cartCtx.removeLines([id]) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, role: "alert", tabIndex: -1, "data-stock-conflict": true, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m["conflict.title"] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["conflict.body"] }),
+    lines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { children: lines.map((l) => {
+      const cartLine = cart?.lines.find((x) => l.line_id ? x.id === l.line_id : x.merchandise.sku === l.sku);
+      const lineId = l.line_id ?? cartLine?.id ?? null;
+      const view = storefront.cartLineProblemView(l, loc, { messages: messages ?? null, ...cartLine ? { lineQuantity: cartLine.quantity } : {} });
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-cart-line-problem": view.code, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: cartLine ? `${cartLine.merchandise.product.title}${cartLine.merchandise.title ? ` (${cartLine.merchandise.title})` : ""}` : l.sku }),
+        ": ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: view.message }),
+        lineId && view.adjustTo !== null && adjust && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void adjust(lineId, view.adjustTo), children: view.adjustLabel })
+        ] }),
+        lineId && remove && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void remove(lineId), children: view.removeLabel })
+        ] })
+      ] }, `${l.sku}:${l.line_id ?? ""}`);
+    }) }),
+    onDismiss && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onDismiss, children: m["conflict.dismiss"] })
+  ] });
+}
 var clean = (s, max) => {
   if (!s) return void 0;
   const text = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
@@ -586,7 +828,8 @@ function seoMeta(input) {
 function seoOf(seo, fallbackTitle, fallbackDescription) {
   return { title: seo.title ?? fallbackTitle, description: seo.description ?? fallbackDescription ?? null };
 }
-function productMeta(product, shop, url) {
+var OG_AVAILABILITY = { in_stock: "in stock", low_stock: "in stock", out_of_stock: "out of stock", backorder: "backorder", preorder: "preorder" };
+function productMeta(product, shop, url, options = {}) {
   const { title, description } = seoOf(product.seo, product.title, product.description);
   const meta = seoMeta({
     title,
@@ -601,7 +844,7 @@ function productMeta(product, shop, url) {
   meta.push(
     { property: "product:price:amount", content: product.price_range.min.amount },
     { property: "product:price:currency", content: product.price_range.min.currency_code },
-    { property: "product:availability", content: product.available_for_sale ? "in stock" : "out of stock" }
+    { property: "product:availability", content: OG_AVAILABILITY[storefront.productAvailability(product, options).status] ?? "out of stock" }
   );
   if (product.vendor) meta.push({ property: "product:brand", content: product.vendor });
   return meta;
@@ -638,22 +881,24 @@ function withVariant(url, variantId) {
     return `${url}${url.includes("?") ? "&" : "?"}variant=${encodeURIComponent(variantId)}`;
   }
 }
-function productJsonLd(product, shop, url) {
+function productJsonLd(product, shop, url, options = {}) {
   const images = product.images.length ? product.images.map((i) => i.url) : product.featured_image ? [product.featured_image.url] : [];
-  const offers = product.variants.map(
-    (v) => compact({
+  const offers = product.variants.map((v) => {
+    const availability = storefront.resolveAvailability(v, options);
+    return compact({
       "@type": "Offer",
       sku: v.sku,
       gtin: v.barcode ?? void 0,
       name: product.variants.length > 1 ? `${product.title} - ${v.title}` : void 0,
       price: v.price.amount,
       priceCurrency: v.price.currency_code,
-      availability: v.available_for_sale ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+      availability: storefront.schemaAvailability(availability.status),
+      availabilityStarts: availability.status === "preorder" ? availability.preorder_release_at ?? void 0 : void 0,
       itemCondition: "https://schema.org/NewCondition",
       url: product.variants.length > 1 ? withVariant(url, v.id) : url,
       seller: shop ? { "@type": "Organization", name: shop.name } : void 0
-    })
-  );
+    });
+  });
   const additionalProperty = Object.entries(product.attributes).map(([name, value]) => ({ "@type": "PropertyValue", name, value }));
   return compact({
     "@context": CONTEXT,
@@ -765,6 +1010,156 @@ function JsonLd({ data, nonce }) {
   if (!data || Array.isArray(data) && data.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("script", { type: "application/ld+json", nonce, dangerouslySetInnerHTML: { __html: serializeJsonLd(data) } });
 }
+var OPS_BUILTIN_SECTION_TYPES = ["hero", "product_grid", "collection_list", "rich_text", "faq", "image_with_text"];
+var OPS_PROP_KINDS = ["text", "textarea", "richtext", "image", "link", "number", "select", "boolean", "collection", "collection_list", "product", "product_list", "list"];
+var SectionTypesValidationError = class extends Error {
+  issues;
+  constructor(issues) {
+    super(`Invalid section types for OPS:
+${issues.map((i) => `  - ${i.path}: ${i.message}`).join("\n")}`);
+    this.name = "SectionTypesValidationError";
+    this.issues = issues;
+  }
+};
+var SNAKE = /^[a-z][a-z0-9]*(_[a-z0-9]+)*$/;
+var KIND_MAP = {
+  text: "text",
+  textarea: "textarea",
+  richtext: "richtext",
+  url: "text",
+  color: "text",
+  image: "image",
+  number: "number",
+  boolean: "boolean",
+  select: "select",
+  collection: "collection",
+  product: "product",
+  products: "product_list",
+  list: "list"
+};
+var LIST_KINDS = /* @__PURE__ */ new Set(["list"]);
+function convertProps(schema, path, issues) {
+  const out = [];
+  for (const [key, spec] of Object.entries(schema ?? {})) {
+    const p = `${path}.${key}`;
+    const kind = KIND_MAP[spec.kind];
+    if (!kind) {
+      issues.push({ path: `${p}.kind`, message: `unknown kind "${String(spec.kind)}"` });
+      continue;
+    }
+    const prop = { key, kind, label: spec.label };
+    if (spec.required) prop.required = true;
+    if ("default" in spec && spec.default !== void 0) prop.default = spec.default;
+    if (spec.options) prop.options = spec.options.map((o) => ({ value: o.value, label: o.label }));
+    if (spec.min !== void 0) prop.min = spec.min;
+    if (spec.max !== void 0) prop.max = spec.max;
+    if (LIST_KINDS.has(kind)) prop.fields = convertProps(spec.items, `${p}.fields`, issues);
+    out.push(prop);
+  }
+  return out;
+}
+function validateOpsSectionTypes(types) {
+  const issues = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (props, path) => {
+    if (!Array.isArray(props)) {
+      issues.push({ path, message: "must be a list" });
+      return;
+    }
+    const keys = /* @__PURE__ */ new Set();
+    props.forEach((prop, i) => {
+      const p = `${path}[${i}]`;
+      if (typeof prop.key !== "string" || !SNAKE.test(prop.key)) issues.push({ path: `${p}.key`, message: `"${String(prop.key)}" must be snake_case (a-z, 0-9, _)` });
+      else if (keys.has(prop.key)) issues.push({ path: `${p}.key`, message: `duplicate key "${prop.key}"` });
+      else keys.add(prop.key);
+      if (typeof prop.label !== "string" || !prop.label.trim()) issues.push({ path: `${p}.label`, message: "label is required" });
+      if (!OPS_PROP_KINDS.includes(prop.kind)) {
+        issues.push({ path: `${p}.kind`, message: `unknown kind "${String(prop.kind)}"` });
+        return;
+      }
+      if (prop.kind === "list") {
+        if (!prop.fields || prop.fields.length === 0) issues.push({ path: `${p}.fields`, message: 'list requires a non-empty "fields"' });
+        else walk(prop.fields, `${p}.fields`);
+      }
+      if (prop.kind === "select" && (!prop.options || prop.options.length === 0)) issues.push({ path: `${p}.options`, message: 'select requires non-empty "options"' });
+      if (prop.min !== void 0 && prop.max !== void 0 && prop.min > prop.max) issues.push({ path: `${p}.max`, message: "max must be >= min" });
+    });
+  };
+  types.forEach((t, i) => {
+    const p = t.type ? t.type : `[${i}]`;
+    if (!t.type || !t.type.trim()) issues.push({ path: `${p}.type`, message: "type is required" });
+    else if (seen.has(t.type)) issues.push({ path: `${p}.type`, message: `duplicate type "${t.type}"` });
+    else seen.add(t.type);
+    if (!t.label || !t.label.trim()) issues.push({ path: `${p}.label`, message: "label is required" });
+    if (t.max_per_page !== void 0 && (!Number.isInteger(t.max_per_page) || t.max_per_page < 1)) issues.push({ path: `${p}.max_per_page`, message: "must be a positive integer" });
+    walk(t.schema?.props, `${p}.schema.props`);
+  });
+  return issues;
+}
+function sectionTypesToOps(source, options = {}) {
+  const excludeBuiltin = options.excludeBuiltin ?? true;
+  const defs = Array.isArray(source) ? source : source.definitions();
+  const builtin = new Set(OPS_BUILTIN_SECTION_TYPES);
+  const issues = [];
+  const warnings = [];
+  const types = [];
+  for (const def of defs) {
+    if (excludeBuiltin && builtin.has(def.type)) {
+      const known = options.builtinProps?.[def.type];
+      if (known) {
+        for (const name of Object.keys(def.schema ?? {})) {
+          if (!known.includes(name)) warnings.push({ type: def.type, prop: name, message: `prop "${name}" of built-in type "${def.type}" does not exist in the OPS schema; built-in types cannot be redefined, so it will not be editable in OPS` });
+        }
+      } else {
+        warnings.push({ type: def.type, message: `"${def.type}" is a built-in OPS type: not synced, and its local props cannot be verified against the OPS schema` });
+      }
+      continue;
+    }
+    const entryIssues = [];
+    const props = convertProps(def.schema, `${def.type}.schema.props`, entryIssues);
+    issues.push(...entryIssues);
+    const out = { type: def.type, label: def.label ?? def.type, schema: { props } };
+    if (def.description) out.description = def.description;
+    if (def.category) out.category = def.category;
+    if (def.maxPerPage !== void 0) out.max_per_page = def.maxPerPage;
+    types.push(out);
+  }
+  issues.push(...validateOpsSectionTypes(types));
+  if (issues.length) throw new SectionTypesValidationError(issues);
+  return { types, warnings };
+}
+var SYNC_PATH = "/storefront/content/section-types";
+var count = (v) => Array.isArray(v) ? v.length : typeof v === "number" ? v : 0;
+async function syncSectionTypes(target, source, options = {}) {
+  const { types, warnings } = sectionTypesToOps(source, options);
+  let raw;
+  if ("request" in target && typeof target.request === "function") {
+    raw = await target.request({ method: "PUT", path: SYNC_PATH, body: { section_types: types } });
+  } else {
+    const t = target;
+    if (!t.token.startsWith("sk_")) throw new TypeError("syncSectionTypes: an sk_ token with content:write is required");
+    const f = t.fetch ?? globalThis.fetch.bind(globalThis);
+    const url = t.baseUrl.replace(/\/+$/, "") + SYNC_PATH;
+    const res = await f(url, {
+      method: "PUT",
+      headers: { Authorization: `Bearer ${t.token}`, "Content-Type": "application/json", Accept: "application/json" },
+      body: JSON.stringify({ section_types: types })
+    });
+    const text = await res.text();
+    let body;
+    try {
+      body = text ? JSON.parse(text) : void 0;
+    } catch {
+      body = void 0;
+    }
+    if (!res.ok) {
+      throw new storefront.StorefrontError({ status: res.status, code: body?.code ?? body?.error?.code ?? "unknown", message: body?.message ?? body?.error?.message ?? `Section types sync failed (${res.status})`, url });
+    }
+    raw = body;
+  }
+  const data = raw && typeof raw === "object" && "data" in raw ? raw.data : raw;
+  return { created: count(data?.created), updated: count(data?.updated), warnings };
+}
 function defineSection(definition) {
   return definition;
 }
@@ -788,6 +1183,9 @@ function resolveSectionProps(schema, raw, path = "") {
       else if (spec.required) errors.push({ prop: key, message: "is required" });
       continue;
     }
+    if (spec.kind === "image" && typeof value === "object" && value !== null && typeof value.url === "string") {
+      value = value.url;
+    }
     if (STRING_KINDS.has(spec.kind)) {
       if (typeof value !== "string") {
         fail2("must be a string");
@@ -911,6 +1309,14 @@ var SectionRegistry = class {
   toJSONSchema() {
     return Object.fromEntries(this.definitions().map((d) => [d.type, sectionJsonSchema(d)]));
   }
+  /**
+   * Section types in the OPS `storefront_content` format, ready for
+   * `PUT /storefront/content/section-types`. Throws `SectionTypesValidationError`
+   * on anything OPS would reject; `warnings` flags built-in types.
+   */
+  toOpsSectionTypes(options) {
+    return sectionTypesToOps(this, options);
+  }
 };
 function createSectionRegistry(definitions = []) {
   return new SectionRegistry(definitions);
@@ -1339,7 +1745,9 @@ function NearestLocationForm({
 }
 
 exports.AddToCartButton = AddToCartButton;
+exports.AvailabilityBadge = AvailabilityBadge;
 exports.CART_COOKIE_NAME = CART_COOKIE_NAME;
+exports.CartLineProblem = CartLineProblem;
 exports.CartProvider = CartProvider;
 exports.DEFAULT_IMAGE_WIDTHS = DEFAULT_IMAGE_WIDTHS;
 exports.DirectionsLink = DirectionsLink;
@@ -1349,15 +1757,22 @@ exports.LocationList = LocationList;
 exports.LocationPicker = LocationPicker;
 exports.Money = Money;
 exports.NearestLocationForm = NearestLocationForm;
+exports.OPS_BUILTIN_SECTION_TYPES = OPS_BUILTIN_SECTION_TYPES;
+exports.OPS_PROP_KINDS = OPS_PROP_KINDS;
 exports.OpenStatus = OpenStatus;
 exports.PickupOption = PickupOption;
 exports.ProductPrice = ProductPrice;
+exports.RestockNotifyForm = RestockNotifyForm;
 exports.SELECTED_LOCATION_PARAM = SELECTED_LOCATION_PARAM;
 exports.SELECTED_LOCATION_STORAGE_KEY = SELECTED_LOCATION_STORAGE_KEY;
 exports.SectionRegistry = SectionRegistry;
+exports.SectionTypesValidationError = SectionTypesValidationError;
 exports.Sections = Sections;
+exports.SrOnly = SrOnly;
+exports.StockConflictAlert = StockConflictAlert;
 exports.StorefrontProvider = StorefrontProvider;
 exports.ThemeStyle = ThemeStyle;
+exports.VariantOptionState = VariantOptionState;
 exports.VariantSelector = VariantSelector;
 exports.breadcrumbJsonLd = breadcrumbJsonLd;
 exports.collectionJsonLd = collectionJsonLd;
@@ -1378,14 +1793,17 @@ exports.readCartCookie = readCartCookie;
 exports.readSelectedLocationId = readSelectedLocationId;
 exports.resolveSectionProps = resolveSectionProps;
 exports.sectionJsonSchema = sectionJsonSchema;
+exports.sectionTypesToOps = sectionTypesToOps;
 exports.seoMeta = seoMeta;
 exports.serializeCartCookie = serializeCartCookie;
 exports.serializeJsonLd = serializeJsonLd;
+exports.syncSectionTypes = syncSectionTypes;
 exports.themeFontsHref = themeFontsHref;
 exports.themeToCss = themeToCss;
 exports.themeToCssVariables = themeToCssVariables;
 exports.toMerchandise = toMerchandise;
 exports.tokenName = tokenName;
+exports.useAvailability = useAvailability;
 exports.useCart = useCart;
 exports.useGeolocation = useGeolocation;
 exports.useNearestLocations = useNearestLocations;
@@ -1395,6 +1813,7 @@ exports.useProductOptions = useProductOptions;
 exports.useSelectedLocation = useSelectedLocation;
 exports.useStorefront = useStorefront;
 exports.useStorefrontClient = useStorefrontClient;
+exports.validateOpsSectionTypes = validateOpsSectionTypes;
 exports.writeCartCookie = writeCartCookie;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map