@asteby/storefront-react 0.0.0-stage → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1032 @@
+'use strict';
+
+var react = require('react');
+var storefront = require('@asteby/storefront');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/context.tsx
+var StorefrontContext = react.createContext(null);
+function StorefrontProvider({ client, config, shop = null, locale, currency, children }) {
+  const configKey = config ? `${config.baseUrl}|${config.token}|${config.locale ?? ""}|${config.customerToken ?? ""}` : "";
+  const resolvedClient = react.useMemo(
+    () => client ?? (config ? storefront.createStorefrontClient(config) : null),
+    [client, configKey]
+  );
+  const value = react.useMemo(
+    () => ({
+      client: resolvedClient,
+      shop,
+      locale: locale ?? config?.locale ?? shop?.locale ?? "es-MX",
+      currency: currency ?? shop?.currency_code ?? "MXN"
+    }),
+    [resolvedClient, shop, locale, currency, config?.locale]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(StorefrontContext.Provider, { value, children });
+}
+function useStorefront() {
+  const ctx = react.useContext(StorefrontContext);
+  if (!ctx) throw new Error("useStorefront must be used inside <StorefrontProvider>");
+  return ctx;
+}
+function useOptionalStorefront() {
+  return react.useContext(StorefrontContext);
+}
+function useStorefrontClient() {
+  const { client } = useStorefront();
+  if (!client) throw new Error("<StorefrontProvider> needs a `client` or `config` for browser-side calls");
+  return client;
+}
+
+// src/cookie.ts
+var CART_COOKIE_NAME = "sf_cart";
+function getCartIdFromCookie(cookieHeader, name = CART_COOKIE_NAME) {
+  if (!cookieHeader) return null;
+  for (const part of cookieHeader.split(";")) {
+    const eq = part.indexOf("=");
+    if (eq < 0) continue;
+    if (part.slice(0, eq).trim() !== name) continue;
+    const raw = part.slice(eq + 1).trim().replace(/^"(.*)"$/, "$1");
+    if (!raw) return null;
+    try {
+      return decodeURIComponent(raw);
+    } catch {
+      return raw;
+    }
+  }
+  return null;
+}
+function serializeCartCookie(cartId, options = {}) {
+  const name = options.name ?? CART_COOKIE_NAME;
+  const parts = [`${name}=${cartId ? encodeURIComponent(cartId) : ""}`];
+  parts.push(`Path=${options.path ?? "/"}`);
+  const maxAge = cartId ? Math.round((options.maxAgeDays ?? 30) * 86400) : 0;
+  parts.push(`Max-Age=${maxAge}`);
+  if (options.domain) parts.push(`Domain=${options.domain}`);
+  const sameSite = options.sameSite ?? "Lax";
+  parts.push(`SameSite=${sameSite}`);
+  if (options.secure ?? sameSite === "None") parts.push("Secure");
+  return parts.join("; ");
+}
+function writeCartCookie(cartId, options = {}) {
+  if (typeof document === "undefined") return;
+  const secure = options.secure ?? (typeof location !== "undefined" && location.protocol === "https:");
+  document.cookie = serializeCartCookie(cartId, { ...options, secure });
+}
+function readCartCookie(name = CART_COOKIE_NAME) {
+  if (typeof document === "undefined") return null;
+  return getCartIdFromCookie(document.cookie, name);
+}
+var CartContext = react.createContext(null);
+var toCents = (m) => m ? Math.round(Number.parseFloat(m.amount) * 100) : 0;
+var money = (cents, currency) => ({ amount: (cents / 100).toFixed(2), currency_code: currency });
+function emptyCart(currency) {
+  const zero = money(0, currency);
+  return {
+    id: "",
+    lines: [],
+    total_quantity: 0,
+    discount_codes: [],
+    buyer: { email: null, phone: null, customer_id: null },
+    shipping_address: null,
+    delivery: { method: null, rate_id: null, branch_id: null },
+    cost: { subtotal: zero, discount: zero, shipping: null, tax: null, total: zero, tax_included: true },
+    updated_at: (/* @__PURE__ */ new Date(0)).toISOString()
+  };
+}
+function withLines(cart, lines, totalQuantity) {
+  const currency = cart.cost.subtotal.currency_code;
+  const subtotal = lines.reduce((sum, l) => sum + toCents(l.cost.total), 0);
+  const total = Math.max(0, subtotal - toCents(cart.cost.discount) + toCents(cart.cost.shipping));
+  return {
+    ...cart,
+    lines,
+    total_quantity: totalQuantity ?? lines.reduce((sum, l) => sum + l.quantity, 0),
+    cost: { ...cart.cost, subtotal: money(subtotal, currency), total: money(total, currency) }
+  };
+}
+function lineWithQuantity(line, quantity) {
+  const unit = toCents(line.cost.unit);
+  return { ...line, quantity, cost: { ...line.cost, total: money(unit * quantity, line.cost.unit.currency_code) } };
+}
+var optimisticCart = {
+  add(cart, input, currency) {
+    const base = cart ?? emptyCart(currency);
+    let lines = base.lines.slice();
+    let unknownQuantity = 0;
+    for (const l of input) {
+      const idx = lines.findIndex((x) => x.merchandise.id === l.variant_id);
+      if (idx >= 0) lines[idx] = lineWithQuantity(lines[idx], lines[idx].quantity + l.quantity);
+      else if (l.merchandise) {
+        const unit = l.merchandise.price;
+        lines.push({
+          id: `optimistic:${l.variant_id}`,
+          quantity: l.quantity,
+          merchandise: l.merchandise,
+          cost: { unit, compare_at_unit: l.merchandise.compare_at_price, total: money(toCents(unit) * l.quantity, unit.currency_code) }
+        });
+      } else unknownQuantity += l.quantity;
+    }
+    const known = lines.reduce((sum, l) => sum + l.quantity, 0);
+    return withLines(base, lines, known + unknownQuantity + (base.total_quantity - base.lines.reduce((s, l) => s + l.quantity, 0)));
+  },
+  update(cart, input) {
+    if (!cart) return cart;
+    const byId = new Map(input.map((l) => [l.id, l.quantity]));
+    const lines = cart.lines.map((l) => byId.has(l.id) ? lineWithQuantity(l, byId.get(l.id)) : l).filter((l) => l.quantity > 0);
+    return withLines(cart, lines);
+  },
+  remove(cart, lineIds) {
+    if (!cart) return cart;
+    return withLines(cart, cart.lines.filter((l) => !lineIds.includes(l.id)));
+  }
+};
+var isNotFound = (err) => storefront.isStorefrontError(err) && err.status === 404;
+function CartProvider({
+  initialCart = null,
+  cartId: initialCartId = null,
+  client: clientProp,
+  cookie,
+  currency: currencyProp,
+  onError,
+  onCartChange,
+  children
+}) {
+  const sf = useOptionalStorefront();
+  const client = clientProp ?? sf?.client ?? null;
+  const currency = currencyProp ?? initialCart?.cost.subtotal.currency_code ?? sf?.currency ?? "MXN";
+  const cookieOptions = cookie === false ? null : cookie ?? {};
+  const confirmedRef = react.useRef(initialCart);
+  const pendingRef = react.useRef([]);
+  const idRef = react.useRef(initialCart?.id ?? initialCartId ?? null);
+  const queueRef = react.useRef(Promise.resolve());
+  const seqRef = react.useRef(0);
+  const callbacks = react.useRef({ onError, onCartChange });
+  callbacks.current = { onError, onCartChange };
+  const [cart, setCart] = react.useState(initialCart);
+  const [cartId, setCartId] = react.useState(idRef.current);
+  const [pending, setPending] = react.useState(0);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const render = react.useCallback(() => {
+    const next = pendingRef.current.reduce((acc, op) => op.apply(acc), confirmedRef.current);
+    setCart(next);
+  }, []);
+  const persistId = react.useCallback(
+    (id) => {
+      if (idRef.current === id) return;
+      idRef.current = id;
+      setCartId(id);
+      if (cookieOptions) writeCartCookie(id, cookieOptions);
+    },
+    // cookieOptions is a plain options bag; its identity is irrelevant
+    [cookie === false, cookieOptions?.name]
+  );
+  const confirm = react.useCallback(
+    (next) => {
+      confirmedRef.current = next;
+      if (next) persistId(next.id);
+      callbacks.current.onCartChange?.(next);
+    },
+    [persistId]
+  );
+  const requireClient = react.useCallback(() => {
+    if (!client) throw new Error("CartProvider needs a client: pass `client` or wrap it in <StorefrontProvider config|client>");
+    return client;
+  }, [client]);
+  const mutate = react.useCallback(
+    (remote, toCart, optimistic) => {
+      const op = optimistic ? { id: ++seqRef.current, apply: optimistic } : null;
+      if (op) {
+        pendingRef.current = [...pendingRef.current, op];
+        render();
+      }
+      setPending((n) => n + 1);
+      const run = async () => {
+        try {
+          const result = await remote(requireClient());
+          const next = toCart(result);
+          if (next) confirm(next);
+          setError(null);
+          return result;
+        } catch (err) {
+          const e = err instanceof Error ? err : new Error(String(err));
+          setError(e);
+          callbacks.current.onError?.(e);
+          return null;
+        } finally {
+          if (op) pendingRef.current = pendingRef.current.filter((p2) => p2 !== op);
+          render();
+          setPending((n) => n - 1);
+        }
+      };
+      const p = queueRef.current.then(run, run);
+      queueRef.current = p;
+      return p;
+    },
+    [confirm, render, requireClient]
+  );
+  const asCart = (c) => c;
+  react.useEffect(() => {
+    if (confirmedRef.current) {
+      if (cookieOptions && idRef.current) writeCartCookie(idRef.current, cookieOptions);
+      return;
+    }
+    const id = idRef.current ?? (cookieOptions ? readCartCookie(cookieOptions.name ?? CART_COOKIE_NAME) : null);
+    if (!id || !client) return;
+    idRef.current = id;
+    setCartId(id);
+    let cancelled = false;
+    setLoading(true);
+    client.carts.get(id).then((loaded) => {
+      if (cancelled) return;
+      if (loaded) confirm(loaded);
+      else persistId(null);
+      render();
+    }).catch((err) => {
+      if (cancelled) return;
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      callbacks.current.onError?.(e);
+    }).finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const value = react.useMemo(() => {
+    const withId = (fn) => async (c) => {
+      if (!idRef.current) throw new Error("No cart yet: add a line first");
+      return fn(c, idRef.current);
+    };
+    return {
+      cart,
+      cartId,
+      status: loading ? "loading" : pending > 0 ? "updating" : "idle",
+      error,
+      totalQuantity: cart?.total_quantity ?? 0,
+      addLines: (lines) => {
+        const payload = lines.map(({ variant_id, quantity }) => ({ variant_id, quantity }));
+        return mutate(
+          async (c) => {
+            if (!idRef.current) return c.carts.create({ lines: payload });
+            try {
+              return await c.carts.addLines(idRef.current, payload);
+            } catch (err) {
+              if (isNotFound(err)) return c.carts.create({ lines: payload });
+              throw err;
+            }
+          },
+          asCart,
+          (current) => optimisticCart.add(current, lines, currency)
+        );
+      },
+      updateLines: (lines) => mutate(withId((c, id) => c.carts.updateLines(id, lines)), asCart, (current) => optimisticCart.update(current, lines)),
+      removeLines: (lineIds) => mutate(withId((c, id) => c.carts.removeLines(id, lineIds)), asCart, (current) => optimisticCart.remove(current, lineIds)),
+      setDiscountCodes: (codes) => mutate(withId((c, id) => c.carts.setDiscountCodes(id, codes)), asCart),
+      setBuyer: (buyer) => mutate(withId((c, id) => c.carts.setBuyer(id, buyer)), asCart),
+      setShippingAddress: (address) => mutate(withId((c, id) => c.carts.setShippingAddress(id, address)), asCart),
+      setDelivery: (delivery) => mutate(withId((c, id) => c.carts.setDelivery(id, delivery)), asCart),
+      deliveryOptions: () => mutate(withId((c, id) => c.carts.deliveryOptions(id)), () => null),
+      refresh: () => mutate(
+        async (c) => idRef.current ? c.carts.get(idRef.current) : null,
+        (r) => {
+          if (r === null) {
+            confirmedRef.current = null;
+            persistId(null);
+          }
+          return r;
+        }
+      ),
+      clear: () => {
+        confirmedRef.current = null;
+        pendingRef.current = [];
+        persistId(null);
+        render();
+        callbacks.current.onCartChange?.(null);
+      }
+    };
+  }, [cart, cartId, loading, pending, error, mutate, currency, persistId, render]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CartContext.Provider, { value, children });
+}
+function useCart() {
+  const ctx = react.useContext(CartContext);
+  if (!ctx) throw new Error("useCart must be used inside <CartProvider>");
+  return ctx;
+}
+function useOptionalCart() {
+  return react.useContext(CartContext);
+}
+function Money({
+  data,
+  as,
+  locale,
+  withoutTrailingZeros,
+  withoutCurrency,
+  currencyDisplay,
+  ...rest
+}) {
+  const sf = useOptionalStorefront();
+  const text = storefront.formatMoney(data, locale ?? sf?.locale, {
+    ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {},
+    ...withoutCurrency !== void 0 ? { withoutCurrency } : {},
+    ...currencyDisplay !== void 0 ? { currencyDisplay } : {}
+  });
+  return react.createElement(as ?? "span", rest, text);
+}
+var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
+var defaultImageLoader = (src, width, height) => {
+  try {
+    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
+    const url = new URL(src, "http://relative.invalid");
+    url.searchParams.set("width", String(width));
+    if (height) url.searchParams.set("height", String(height));
+    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
+  } catch {
+    return src;
+  }
+};
+function parseRatio(ratio) {
+  if (!ratio) return null;
+  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
+  return w && h ? w / h : null;
+}
+function Image({
+  data,
+  sizes = "100vw",
+  widths = DEFAULT_IMAGE_WIDTHS,
+  loader = defaultImageLoader,
+  priority = false,
+  aspectRatio,
+  alt,
+  loading,
+  decoding,
+  ...rest
+}) {
+  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
+  let candidates = [...widths].sort((a, b) => a - b);
+  if (data.width) {
+    const capped = candidates.filter((w) => w <= data.width);
+    candidates = capped.length ? capped : [data.width];
+  }
+  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
+  const width = data.width ?? candidates[candidates.length - 1];
+  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: data.url,
+      alt: alt ?? data.alt ?? "",
+      ...srcSet ? { srcSet, sizes } : {},
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      loading: loading ?? (priority ? "eager" : "lazy"),
+      decoding: decoding ?? (priority ? "auto" : "async"),
+      ...priority ? { fetchPriority: "high" } : {},
+      ...rest
+    }
+  );
+}
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function ProductPrice({
+  product,
+  variant,
+  fromLabel = "Desde",
+  compareAtLabel = "Precio anterior",
+  locale,
+  withoutTrailingZeros,
+  ...rest
+}) {
+  let price = null;
+  let compareAt = null;
+  let isRange = false;
+  if (variant) {
+    price = variant.price;
+    compareAt = variant.compare_at_price;
+  } else if (product) {
+    price = product.price_range.min;
+    compareAt = product.compare_at_price_range?.min ?? null;
+    isRange = product.price_range.min.amount !== product.price_range.max.amount;
+  }
+  if (!price) return null;
+  const onSale = compareAt !== null && storefront.parseMoney(compareAt) > storefront.parseMoney(price);
+  const opts = { ...locale ? { locale } : {}, ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {} };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-on-sale": onSale || void 0, ...rest, children: [
+    isRange ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-price-prefix": "", children: [
+      fromLabel,
+      " "
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(Money, { data: price, "data-price": "", ...opts }),
+    onSale && compareAt ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("s", { "data-compare-at-price": "", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: VISUALLY_HIDDEN, children: [
+          compareAtLabel,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Money, { data: compareAt, ...opts })
+      ] })
+    ] }) : null
+  ] });
+}
+function toParams(input) {
+  if (!input) return new URLSearchParams();
+  return input instanceof URLSearchParams ? new URLSearchParams(input) : new URLSearchParams(input);
+}
+function optionsOf(variant) {
+  return Object.fromEntries(variant.selected_options.map((o) => [o.name, o.value]));
+}
+function findVariant(product, selection) {
+  if (product.options.length === 0) return product.variants[0] ?? null;
+  return product.variants.find((v) => v.selected_options.length > 0 && v.selected_options.every((o) => selection[o.name] === o.value)) ?? null;
+}
+function initialSelection(product, params, defaultToFirstAvailable) {
+  const byId = params.get("variant");
+  const fromId = byId ? product.variants.find((v) => v.id === byId) : void 0;
+  if (fromId) return optionsOf(fromId);
+  const selection = {};
+  for (const opt of product.options) {
+    const v = params.get(opt.name);
+    if (v !== null && opt.values.includes(v)) selection[opt.name] = v;
+  }
+  if (Object.keys(selection).length === 0 && defaultToFirstAvailable) {
+    const first = product.variants.find((v) => v.available_for_sale) ?? product.variants[0];
+    return first ? optionsOf(first) : {};
+  }
+  return selection;
+}
+function useProductOptions(product, config = {}) {
+  const { defaultToFirstAvailable = true, onChange } = config;
+  const params = react.useMemo(() => toParams(config.searchParams), [String(config.searchParams ?? "")]);
+  const sourceKey = `${product.id ?? ""}|${params.toString()}`;
+  const fromSource = react.useMemo(
+    () => initialSelection(product, params, defaultToFirstAvailable),
+    // product identity is keyed by id + params
+    [sourceKey, defaultToFirstAvailable]
+  );
+  const [local, setLocal] = react.useState(null);
+  const selectedOptions = local && local.key === sourceKey ? local.selection : fromSource;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const setOption = react.useCallback(
+    (name, value) => {
+      const next = { ...selectedOptions, [name]: value };
+      setLocal({ key: sourceKey, selection: next });
+      onChangeRef.current?.(findVariant(product, next), next);
+    },
+    [selectedOptions, sourceKey, product]
+  );
+  const selectedVariant = react.useMemo(() => findVariant(product, selectedOptions), [product, selectedOptions]);
+  const options = react.useMemo(
+    () => product.options.map((opt) => ({
+      name: opt.name,
+      values: opt.values.map((value) => {
+        const candidate = { ...selectedOptions, [opt.name]: value };
+        const exact = findVariant(product, candidate);
+        const loose = product.variants.filter((v) => v.selected_options.some((o) => o.name === opt.name && o.value === value));
+        const search = new URLSearchParams(params);
+        search.delete("variant");
+        for (const [k, v] of Object.entries(candidate)) search.set(k, v);
+        return {
+          value,
+          selected: selectedOptions[opt.name] === value,
+          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,
+          search: `?${search.toString()}`
+        };
+      })
+    })),
+    [product, selectedOptions, params]
+  );
+  return { options, selectedOptions, selectedVariant, setOption };
+}
+function VariantSelector({ product, children, ...config }) {
+  const state = useProductOptions(product, config);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: state.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: children({ option, selectedVariant: state.selectedVariant, selectedOptions: state.selectedOptions, setOption: state.setOption }) }, option.name)) });
+}
+function toMerchandise(product, variant) {
+  return { ...variant, product: { handle: product.handle, title: product.title, featured_image: product.featured_image } };
+}
+function AddToCartButton({
+  variantId,
+  quantity = 1,
+  merchandise,
+  onAdded,
+  onClick,
+  disabled,
+  children = "Agregar al carrito",
+  type = "button",
+  ...rest
+}) {
+  const cart = useCart();
+  const [adding, setAdding] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type,
+      disabled: disabled || !variantId || adding,
+      "aria-busy": adding || void 0,
+      "data-adding": adding || void 0,
+      onClick: async (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || !variantId) return;
+        setAdding(true);
+        try {
+          const result = await cart.addLines([{ variant_id: variantId, quantity, ...merchandise ? { merchandise } : {} }]);
+          if (result) onAdded?.();
+        } finally {
+          setAdding(false);
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/seo.ts
+var clean = (s, max) => {
+  if (!s) return void 0;
+  const text = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  if (!text) return void 0;
+  return max && text.length > max ? text.slice(0, max - 1).trimEnd() + "\u2026" : text;
+};
+function seoMeta(input) {
+  const out = [];
+  let title = clean(input.title);
+  if (title && input.titleSuffix && !title.includes(input.titleSuffix)) title = `${title} | ${input.titleSuffix}`;
+  const description = clean(input.description, 160);
+  const image = typeof input.image === "string" ? { url: input.image, alt: null } : input.image ?? null;
+  if (title) out.push({ title }, { property: "og:title", content: title }, { name: "twitter:title", content: title });
+  if (description) {
+    out.push({ name: "description", content: description }, { property: "og:description", content: description }, { name: "twitter:description", content: description });
+  }
+  if (input.url) out.push({ tagName: "link", rel: "canonical", href: input.url }, { property: "og:url", content: input.url });
+  out.push({ property: "og:type", content: input.type ?? "website" });
+  if (input.siteName) out.push({ property: "og:site_name", content: input.siteName });
+  if (input.locale) out.push({ property: "og:locale", content: input.locale.replace("-", "_") });
+  if (image) {
+    out.push({ property: "og:image", content: image.url });
+    if (image.width) out.push({ property: "og:image:width", content: String(image.width) });
+    if (image.height) out.push({ property: "og:image:height", content: String(image.height) });
+    if (image.alt) out.push({ property: "og:image:alt", content: image.alt });
+  }
+  out.push({ name: "twitter:card", content: image ? "summary_large_image" : "summary" });
+  if (input.noindex) out.push({ name: "robots", content: "noindex, nofollow" });
+  return out;
+}
+function seoOf(seo, fallbackTitle, fallbackDescription) {
+  return { title: seo.title ?? fallbackTitle, description: seo.description ?? fallbackDescription ?? null };
+}
+function productMeta(product, shop, url) {
+  const { title, description } = seoOf(product.seo, product.title, product.description);
+  const meta = seoMeta({
+    title,
+    description,
+    url,
+    image: product.featured_image,
+    type: "product",
+    siteName: shop?.name ?? null,
+    locale: shop?.locale ?? null,
+    titleSuffix: shop?.name ?? null
+  });
+  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" }
+  );
+  if (product.vendor) meta.push({ property: "product:brand", content: product.vendor });
+  return meta;
+}
+function collectionMeta(collection, shop, url) {
+  const { title, description } = seoOf(collection.seo, collection.title, collection.description);
+  return seoMeta({ title, description, url, image: collection.image, siteName: shop?.name ?? null, locale: shop?.locale ?? null, titleSuffix: shop?.name ?? null });
+}
+var CONTEXT = "https://schema.org";
+function shopUrl(shop, fallback) {
+  if (shop.domain) return /^https?:\/\//.test(shop.domain) ? shop.domain : `https://${shop.domain}`;
+  if (fallback) {
+    try {
+      return new URL(fallback).origin;
+    } catch {
+      return void 0;
+    }
+  }
+  return void 0;
+}
+function compact(obj) {
+  for (const k of Object.keys(obj)) {
+    const v = obj[k];
+    if (v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0) delete obj[k];
+  }
+  return obj;
+}
+function withVariant(url, variantId) {
+  try {
+    const u = new URL(url);
+    u.searchParams.set("variant", variantId);
+    return u.toString();
+  } catch {
+    return `${url}${url.includes("?") ? "&" : "?"}variant=${encodeURIComponent(variantId)}`;
+  }
+}
+function productJsonLd(product, shop, url) {
+  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({
+      "@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",
+      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,
+    "@type": "Product",
+    "@id": `${url}#product`,
+    name: product.title,
+    description: clean(product.description) ?? void 0,
+    url,
+    image: images,
+    sku: product.variants.length === 1 ? product.variants[0].sku : void 0,
+    brand: product.vendor ? { "@type": "Brand", name: product.vendor } : void 0,
+    category: product.category?.title ?? product.product_type ?? void 0,
+    additionalProperty,
+    offers: offers.length === 1 ? offers[0] : offers
+  });
+}
+function organizationJsonLd(shop, url) {
+  const site = shopUrl(shop, url);
+  const contactPoint = shop.contact.email || shop.contact.phone ? [compact({ "@type": "ContactPoint", contactType: "customer service", email: shop.contact.email ?? void 0, telephone: shop.contact.phone ?? void 0 })] : [];
+  return compact({
+    "@context": CONTEXT,
+    "@type": "Organization",
+    "@id": site ? `${site}#organization` : void 0,
+    name: shop.name,
+    description: shop.description ?? void 0,
+    url: site,
+    logo: shop.logo?.url,
+    email: shop.contact.email ?? void 0,
+    telephone: shop.contact.phone ?? void 0,
+    contactPoint
+  });
+}
+function localBusinessJsonLd(shop, options = {}) {
+  const site = shopUrl(shop, options.url);
+  return shop.branches.map(
+    (b) => compact({
+      "@context": CONTEXT,
+      "@type": options.type ?? "Store",
+      "@id": site ? `${site}#branch-${b.id}` : void 0,
+      name: `${shop.name} - ${b.name}`,
+      url: site,
+      image: shop.logo?.url,
+      telephone: b.phone ?? shop.contact.phone ?? void 0,
+      priceRange: options.priceRange,
+      address: compact({ "@type": "PostalAddress", streetAddress: b.address, addressLocality: b.city, addressCountry: shop.country_code }),
+      geo: b.lat !== null && b.lng !== null ? { "@type": "GeoCoordinates", latitude: b.lat, longitude: b.lng } : void 0,
+      openingHours: b.hours ? b.hours.split(/\s*,\s*/).filter(Boolean) : void 0,
+      parentOrganization: site ? { "@id": `${site}#organization` } : { "@type": "Organization", name: shop.name }
+    })
+  );
+}
+function breadcrumbJsonLd(items) {
+  return {
+    "@context": CONTEXT,
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, i) => ({ "@type": "ListItem", position: i + 1, name: item.name, item: item.url }))
+  };
+}
+function faqJsonLd(items) {
+  return {
+    "@context": CONTEXT,
+    "@type": "FAQPage",
+    mainEntity: items.map((item) => ({
+      "@type": "Question",
+      name: item.question,
+      acceptedAnswer: { "@type": "Answer", text: item.answer }
+    }))
+  };
+}
+function collectionJsonLd(collection, products, url, options = {}) {
+  const origin = (() => {
+    try {
+      return new URL(url).origin;
+    } catch {
+      return "";
+    }
+  })();
+  const productUrl = options.productUrl ?? ((handle) => `${origin}/products/${handle}`);
+  return compact({
+    "@context": CONTEXT,
+    "@type": "CollectionPage",
+    name: collection.seo.title ?? collection.title,
+    description: clean(collection.seo.description ?? collection.description) ?? void 0,
+    url,
+    image: collection.image?.url,
+    mainEntity: {
+      "@type": "ItemList",
+      numberOfItems: products.length,
+      itemListElement: products.map(
+        (p, i) => compact({ "@type": "ListItem", position: i + 1, url: productUrl(p.handle), name: p.title, image: p.featured_image?.url })
+      )
+    }
+  });
+}
+function serializeJsonLd(data) {
+  return JSON.stringify(data).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+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) } });
+}
+function defineSection(definition) {
+  return definition;
+}
+var STRING_KINDS = /* @__PURE__ */ new Set(["text", "textarea", "richtext", "url", "image", "color", "collection", "product"]);
+function cloneDefault(value) {
+  return value !== null && typeof value === "object" ? structuredClone(value) : value;
+}
+function resolveSectionProps(schema, raw, path = "") {
+  const props = {};
+  const errors = [];
+  const input = raw ?? {};
+  for (const [name, spec] of Object.entries(schema)) {
+    const key = path ? `${path}.${name}` : name;
+    let value = input[name];
+    const fail = (message) => {
+      errors.push({ prop: key, message });
+      if ("default" in spec) props[name] = cloneDefault(spec.default);
+    };
+    if (value === void 0 || value === null || value === "") {
+      if ("default" in spec) props[name] = cloneDefault(spec.default);
+      else if (spec.required) errors.push({ prop: key, message: "is required" });
+      continue;
+    }
+    if (STRING_KINDS.has(spec.kind)) {
+      if (typeof value !== "string") {
+        fail("must be a string");
+        continue;
+      }
+    } else if (spec.kind === "number") {
+      if (typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value))) value = Number(value);
+      if (typeof value !== "number" || !Number.isFinite(value)) {
+        fail("must be a number");
+        continue;
+      }
+      if (spec.min !== void 0 && value < spec.min || spec.max !== void 0 && value > spec.max) {
+        fail(`must be between ${spec.min ?? "-\u221E"} and ${spec.max ?? "\u221E"}`);
+        continue;
+      }
+    } else if (spec.kind === "boolean") {
+      if (typeof value !== "boolean") {
+        fail("must be a boolean");
+        continue;
+      }
+    } else if (spec.kind === "select") {
+      if (typeof value !== "string" || spec.options && !spec.options.some((o) => o.value === value)) {
+        fail(`must be one of ${(spec.options ?? []).map((o) => o.value).join(", ")}`);
+        continue;
+      }
+    } else if (spec.kind === "products") {
+      if (!Array.isArray(value) || value.some((v) => typeof v !== "string")) {
+        fail("must be a list of product handles");
+        continue;
+      }
+    } else if (spec.kind === "list") {
+      if (!Array.isArray(value)) {
+        fail("must be a list");
+        continue;
+      }
+      const items = [];
+      value.forEach((item, i) => {
+        if (!spec.items) {
+          items.push(item);
+          return;
+        }
+        if (typeof item !== "object" || item === null || Array.isArray(item)) {
+          errors.push({ prop: `${key}[${i}]`, message: "must be an object" });
+          return;
+        }
+        const resolved = resolveSectionProps(spec.items, item, `${key}[${i}]`);
+        errors.push(...resolved.errors);
+        items.push(resolved.props);
+      });
+      value = items;
+    }
+    props[name] = value;
+  }
+  return { props, errors };
+}
+function sectionJsonSchema(definition) {
+  const toSchema = (schema) => {
+    const properties = {};
+    const required = [];
+    for (const [name, spec] of Object.entries(schema)) {
+      const base = { title: spec.label, "x-kind": spec.kind };
+      if (spec.description) base.description = spec.description;
+      if ("default" in spec) base.default = spec.default;
+      if (spec.required) required.push(name);
+      switch (spec.kind) {
+        case "number":
+          Object.assign(base, { type: "number" }, spec.min !== void 0 ? { minimum: spec.min } : {}, spec.max !== void 0 ? { maximum: spec.max } : {});
+          break;
+        case "boolean":
+          base.type = "boolean";
+          break;
+        case "select":
+          Object.assign(base, { type: "string", enum: (spec.options ?? []).map((o) => o.value), "x-options": spec.options ?? [] });
+          break;
+        case "products":
+          Object.assign(base, { type: "array", items: { type: "string" } });
+          break;
+        case "list":
+          Object.assign(base, { type: "array", items: spec.items ? toSchema(spec.items) : { type: "object" } });
+          break;
+        case "url":
+          Object.assign(base, { type: "string", format: "uri-reference" });
+          break;
+        default:
+          base.type = "string";
+      }
+      properties[name] = base;
+    }
+    return { type: "object", additionalProperties: false, properties, ...required.length ? { required } : {} };
+  };
+  return {
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    $id: `section:${definition.type}`,
+    title: definition.label ?? definition.type,
+    ...definition.description ? { description: definition.description } : {},
+    ...toSchema(definition.schema)
+  };
+}
+var SectionRegistry = class {
+  defs = /* @__PURE__ */ new Map();
+  constructor(definitions = []) {
+    for (const d of definitions) this.register(d);
+  }
+  register(definition) {
+    this.defs.set(definition.type, definition);
+    return this;
+  }
+  get(type) {
+    return this.defs.get(type);
+  }
+  has(type) {
+    return this.defs.has(type);
+  }
+  types() {
+    return [...this.defs.keys()];
+  }
+  definitions() {
+    return [...this.defs.values()];
+  }
+  /** JSON Schemas of every registered section, keyed by type. */
+  toJSONSchema() {
+    return Object.fromEntries(this.definitions().map((d) => [d.type, sectionJsonSchema(d)]));
+  }
+};
+function createSectionRegistry(definitions = []) {
+  return new SectionRegistry(definitions);
+}
+var isDev = () => {
+  const p = globalThis.process;
+  return p?.env?.NODE_ENV !== "production";
+};
+function Sections({ sections, registry, context, renderUnknown, onInvalid }) {
+  if (!sections?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sections.map((section, index) => {
+    const key = section.id || `${section.type}-${index}`;
+    const def = registry.get(section.type);
+    if (!def) {
+      if (isDev()) console.warn(`[storefront-react] Unknown section type "${section.type}" (id ${section.id}); skipping.`);
+      return renderUnknown ? /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderUnknown(section) }, key) : null;
+    }
+    const { props, errors } = resolveSectionProps(def.schema, section.props);
+    if (errors.length) {
+      if (onInvalid) onInvalid(section, errors);
+      else if (isDev()) console.warn(`[storefront-react] Section "${section.type}" (id ${section.id}) has invalid props:`, errors);
+    }
+    if (errors.some((e) => e.message === "is required" && !e.prop.includes("[") && !e.prop.includes("."))) return null;
+    const Component = def.component;
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, section: { id: section.id, type: section.type }, context }, key);
+  }) });
+}
+var DEFAULT_FONT_FALLBACK = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+var MONO_FALLBACK = "ui-monospace, SFMono-Regular, Menlo, monospace";
+function tokenName(key) {
+  return key.trim().replace(/^-+/, "").replace(/^color-/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_.]+/g, "-").toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function isSafeCssValue(value) {
+  if (!value || value.length > 200) return false;
+  if (/[;{}<>\\]/.test(value)) return false;
+  if (/url\s*\(|expression\s*\(|@import/i.test(value)) return false;
+  return true;
+}
+function fontStack(family, role, fallback) {
+  const name = family.replace(/["']/g, "").trim();
+  if (!name || !isSafeCssValue(name)) return null;
+  return `"${name}", ${role === "mono" ? MONO_FALLBACK : fallback}`;
+}
+function themeToCssVariables(theme, options = {}) {
+  const naming = options.naming ?? "both";
+  const vars = {};
+  for (const [key, raw] of Object.entries(theme?.tokens ?? {})) {
+    const name = tokenName(key);
+    const value = String(raw).trim();
+    if (!name || !isSafeCssValue(value)) continue;
+    if (naming !== "metacore") vars[`--color-${name}`] = value;
+    if (naming !== "color") vars[`--${name}`] = value;
+  }
+  const fallback = options.fontFallback ?? DEFAULT_FONT_FALLBACK;
+  for (const [role, family] of Object.entries(theme?.fonts ?? {})) {
+    const name = tokenName(role);
+    const stack = typeof family === "string" ? fontStack(family, name, fallback) : null;
+    if (name && stack) vars[`--font-${name}`] = stack;
+  }
+  if (theme?.radius && isSafeCssValue(theme.radius.trim())) vars["--radius"] = theme.radius.trim();
+  return vars;
+}
+function themeToCss(theme, options = {}) {
+  const vars = themeToCssVariables(theme, options);
+  const body = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
+  if (!body) return "";
+  const selector = (options.selector ?? ":root").replace(/[{}<>]/g, "");
+  return `${selector}{${body}}`;
+}
+function themeFontsHref(theme, weights = [400, 500, 600, 700]) {
+  const families = [...new Set(Object.values(theme?.fonts ?? {}).map((f) => String(f).replace(/["']/g, "").trim()).filter((f) => f && isSafeCssValue(f)))];
+  if (!families.length) return null;
+  const params = families.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@${weights.join(";")}`).join("&");
+  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
+}
+function ThemeStyle({ theme, nonce, id = "storefront-theme", ...options }) {
+  const css = themeToCss(theme, options);
+  if (!css) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("style", { id, nonce, "data-storefront-theme": "", dangerouslySetInnerHTML: { __html: css } });
+}
+
+exports.AddToCartButton = AddToCartButton;
+exports.CART_COOKIE_NAME = CART_COOKIE_NAME;
+exports.CartProvider = CartProvider;
+exports.DEFAULT_IMAGE_WIDTHS = DEFAULT_IMAGE_WIDTHS;
+exports.Image = Image;
+exports.JsonLd = JsonLd;
+exports.Money = Money;
+exports.ProductPrice = ProductPrice;
+exports.SectionRegistry = SectionRegistry;
+exports.Sections = Sections;
+exports.StorefrontProvider = StorefrontProvider;
+exports.ThemeStyle = ThemeStyle;
+exports.VariantSelector = VariantSelector;
+exports.breadcrumbJsonLd = breadcrumbJsonLd;
+exports.collectionJsonLd = collectionJsonLd;
+exports.collectionMeta = collectionMeta;
+exports.createSectionRegistry = createSectionRegistry;
+exports.defaultImageLoader = defaultImageLoader;
+exports.defineSection = defineSection;
+exports.faqJsonLd = faqJsonLd;
+exports.getCartIdFromCookie = getCartIdFromCookie;
+exports.isSafeCssValue = isSafeCssValue;
+exports.localBusinessJsonLd = localBusinessJsonLd;
+exports.optimisticCart = optimisticCart;
+exports.organizationJsonLd = organizationJsonLd;
+exports.productJsonLd = productJsonLd;
+exports.productMeta = productMeta;
+exports.readCartCookie = readCartCookie;
+exports.resolveSectionProps = resolveSectionProps;
+exports.sectionJsonSchema = sectionJsonSchema;
+exports.seoMeta = seoMeta;
+exports.serializeCartCookie = serializeCartCookie;
+exports.serializeJsonLd = serializeJsonLd;
+exports.themeFontsHref = themeFontsHref;
+exports.themeToCss = themeToCss;
+exports.themeToCssVariables = themeToCssVariables;
+exports.toMerchandise = toMerchandise;
+exports.tokenName = tokenName;
+exports.useCart = useCart;
+exports.useOptionalCart = useOptionalCart;
+exports.useOptionalStorefront = useOptionalStorefront;
+exports.useProductOptions = useProductOptions;
+exports.useStorefront = useStorefront;
+exports.useStorefrontClient = useStorefrontClient;
+exports.writeCartCookie = writeCartCookie;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map