@snowcone-app/sdk 0.1.12 → 0.1.14

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   DEFAULT_ARTWORK_URL: () => DEFAULT_ARTWORK_URL,
   DEFAULT_ASPECT_RATIO: () => DEFAULT_ASPECT_RATIO,
   DEFAULT_COLOR: () => DEFAULT_COLOR,
+  DEFAULT_MOCKUP_BASE: () => DEFAULT_MOCKUP_BASE,
   DEFAULT_PLACEMENT_DIMENSIONS: () => DEFAULT_PLACEMENT_DIMENSIONS,
   Elements: () => Elements,
   ErrorManager: () => ErrorManager,
@@ -62,9 +63,9 @@ __export(index_exports, {
   VueAdapter: () => VueAdapter,
   adapterRegistry: () => adapterRegistry,
   autoRegister: () => autoRegister,
+  buildMockupUrl: () => buildMockupUrl2,
   componentRegistry: () => componentRegistry,
   computeDisabledChoices: () => computeDisabledChoices,
-  config: () => config,
   createAddToCartEvent: () => createAddToCartEvent,
   createAddToCartHandler: () => createAddToCartHandler,
   createCartDetail: () => createCartDetail,
@@ -104,6 +105,7 @@ __export(index_exports, {
   getEffectiveAlignment: () => getEffectiveAlignment,
   getIncompleteSelectionMessage: () => getIncompleteSelectionMessage,
   getMissingSelections: () => getMissingSelections,
+  getMockupUrl: () => getMockupUrl,
   getOptionRenderType: () => getOptionRenderType,
   getPricePreview: () => getPricePreview,
   getProduct: () => getProduct,
@@ -121,7 +123,6 @@ __export(index_exports, {
   prepareOptionRenderData: () => prepareOptionRenderData,
   registerStandardComponents: () => registerStandardComponents,
   resolveBestCombination: () => resolveBestCombination,
-  resolveMockupConfig: () => resolveMockupConfig,
   resolveMockupId: () => resolveMockupId,
   resolveVariantId: () => resolveVariantId,
   retryOperation: () => retryOperation,
@@ -185,10 +186,19 @@ var CatalogProductSchema = import_zod.z.object({
   ).optional(),
   placements: import_zod.z.array(
     import_zod.z.object({
+      // The one additive multi-placement field (rev 5 P1): a URL-safe slug
+      // used as the public param key (`asset.front`). Optional — older catalog
+      // docs predate it.
+      key: import_zod.z.string().optional(),
       label: import_zod.z.string(),
-      type: import_zod.z.enum(["image", "color"]),
-      width: import_zod.z.number().int(),
-      height: import_zod.z.number().int(),
+      // Live data has placements with `type: null` (and ingestion may omit it
+      // entirely), not just "image"/"color". The previous strict enum threw on
+      // real catalog docs. Accept image | color | null | absent.
+      type: import_zod.z.enum(["image", "color"]).nullable().optional(),
+      // Live data carries width/height of 0 (and `.int()` rejected nothing of
+      // import here). Drop `.int()` and allow nullable so 0 / null / float pass.
+      width: import_zod.z.number().nullable().optional(),
+      height: import_zod.z.number().nullable().optional(),
       defaultScaleMode: import_zod.z.enum(["fill", "fit"]).optional(),
       fitMarginTop: import_zod.z.number().int().optional(),
       fitMarginRight: import_zod.z.number().int().optional(),
@@ -209,7 +219,7 @@ var SignatureCache = class {
   memoryCache = /* @__PURE__ */ new Map();
   maxMemoryEntries;
   maxLocalStorageEntries;
-  localStorageKey = "merchify_signature_cache";
+  localStorageKey = "snowcone_signature_cache";
   localStorageAvailable;
   constructor(maxMemoryEntries = 500, maxLocalStorageEntries = 100) {
     this.maxMemoryEntries = maxMemoryEntries;
@@ -306,8 +316,8 @@ var SignatureCache = class {
 };
 
 // src/mockup/service.ts
-var DEFAULT_IMAGE_URL = typeof process !== "undefined" && process.env?.MERCHIFY_IMAGE_URL || "https://i.snowcone.app";
-var DEFAULT_SIGNER_URL = typeof process !== "undefined" && process.env?.MERCHIFY_SIGNER_URL || "https://s.snowcone.app/sign";
+var DEFAULT_IMAGE_URL = typeof process !== "undefined" && process.env?.SNOWCONE_IMAGE_URL || "https://cdn.snowcone.app";
+var DEFAULT_SIGNER_URL = typeof process !== "undefined" && process.env?.SNOWCONE_SIGNER_URL || "https://s.snowcone.app/sign";
 var RATE_LIMIT_PER_MINUTE = 450;
 var RATE_LIMIT_PER_SECOND = 20;
 var MockupServiceImpl = class {
@@ -315,11 +325,11 @@ var MockupServiceImpl = class {
   cache;
   rateLimitState;
   fetch;
-  constructor(config2, customFetch) {
+  constructor(config, customFetch) {
     this.config = {
-      imageUrl: config2.imageUrl || DEFAULT_IMAGE_URL,
-      signerUrl: config2.signerUrl || DEFAULT_SIGNER_URL,
-      accountId: config2.accountId || typeof process !== "undefined" && process.env?.MERCHIFY_ACCOUNT_ID || ""
+      imageUrl: config.imageUrl || DEFAULT_IMAGE_URL,
+      signerUrl: config.signerUrl || DEFAULT_SIGNER_URL,
+      shop: config.shop || typeof process !== "undefined" && process.env?.SNOWCONE_SHOP_ID || ""
     };
     this.cache = new SignatureCache();
     this.fetch = customFetch || fetch.bind(globalThis);
@@ -332,12 +342,21 @@ var MockupServiceImpl = class {
     if (!options.design || !options.product) {
       throw new Error("Missing required options: design and product are required");
     }
-    if (!this.config.accountId) {
-      throw new Error("Account ID is required for mockup generation");
+    if (!this.config.shop) {
+      throw new Error("Shop ID is required for mockup generation");
+    }
+    for (const element of options.design) {
+      if (element.type === "image" && element.imageUrl) {
+        if (element.imageUrl.startsWith("blob:")) {
+          throw new Error(
+            `[snowcone-sdk] Cannot generate mockup: design element for placement "${element.placement}" uses a blob URL ("${element.imageUrl.slice(0, 60)}..."). Blob URLs are local to this browser tab and cannot be downloaded by the mockup rendering server. Upload the image to a publicly accessible URL or convert it to a data URL before requesting a mockup.`
+          );
+        }
+      }
     }
     this.checkRateLimits();
     const relativeUrl = this.buildMockupUrlWithParams(options);
-    const cacheKey = `${relativeUrl}:${this.config.accountId}`;
+    const cacheKey = `${relativeUrl}:${this.config.shop}`;
     const cachedUrl = this.cache.get(cacheKey);
     if (cachedUrl) {
       return cachedUrl;
@@ -422,17 +441,12 @@ var MockupServiceImpl = class {
     }
   }
   async getSignedUrl(relativeUrl) {
-    const urlWithAccountId = relativeUrl + (relativeUrl.includes("?") ? "&" : "?") + `accountId=${encodeURIComponent(this.config.accountId)}`;
+    const urlWithAccountId = relativeUrl + (relativeUrl.includes("?") ? "&" : "?") + `shop=${encodeURIComponent(this.config.shop)}`;
     const cacheKey = urlWithAccountId;
     const cachedUrl = this.cache.get(cacheKey);
     if (cachedUrl) {
       return cachedUrl;
     }
-    if (this.config.signerUrl?.includes("localhost") || this.config.signerUrl === "mock") {
-      const signedUrl = this.config.imageUrl + urlWithAccountId + "&sig=bypass-sig-for-k6-load-test";
-      this.cache.set(cacheKey, signedUrl);
-      return signedUrl;
-    }
     const signerUrl = new URL(this.config.signerUrl);
     signerUrl.searchParams.set("url", urlWithAccountId);
     try {
@@ -488,6 +502,456 @@ function createDevFetcher(baseUrl) {
   };
 }
 
+// ../mockup-url/src/index.ts
+var PARAMS = {
+  shop: "shop",
+  asset: "asset",
+  assets: "assets",
+  placement: "placement",
+  variant: "variant",
+  mockup: "mockup",
+  width: "width",
+  grain: "grain",
+  aspect: "aspect",
+  /** Live preview/calibration mask overrides (not cached). */
+  maskOverrides: "maskOverrides",
+  /**
+   * Render-only option picks (the `affectsCombinations:false` attributes), as a
+   * base64 JSON map `{ attributeName: choiceLabel }`. rendercenter already parses
+   * this and resolves per-choice underlays from it; the builder emits it so the
+   * edge resolver can forward render-only picks (e.g. a cap's Crown/Strap color)
+   * without changing rendercenter's grammar.
+   */
+  optionSelections: "optionSelections",
+  signature: "signature",
+  seal: "seal"
+};
+function asSimpleAsset(design) {
+  if (design.length !== 1) return null;
+  const el = design[0];
+  if (el.type === "color" || el.hex) return null;
+  if (!el.imageUrl) return null;
+  if (el.position || el.size || el.tiles != null) return null;
+  if (el.alignment && el.alignment !== "center") return null;
+  return { imageUrl: el.imageUrl, placement: el.placement };
+}
+var ALLOWED_WIDTHS = [
+  400,
+  600,
+  800,
+  1e3,
+  1200,
+  1400,
+  1600,
+  1800,
+  2e3,
+  2500,
+  3e3,
+  4e3
+];
+function normalizeWidth(width) {
+  for (let i = ALLOWED_WIDTHS.length - 1; i >= 0; i--) {
+    if (ALLOWED_WIDTHS[i] <= width) return ALLOWED_WIDTHS[i];
+  }
+  return ALLOWED_WIDTHS[0];
+}
+function normalizeDesignElements(design) {
+  return design.map((element) => {
+    const normalized = {};
+    const keys = Object.keys(element).sort();
+    for (const key of keys) {
+      if (key === "width" || key === "height" || key === "type") continue;
+      if (key === "alignment" && element[key] === "center") {
+        continue;
+      }
+      const value = element[key];
+      if (value !== void 0 && value !== null) normalized[key] = value;
+    }
+    return normalized;
+  });
+}
+function buildMockupUrl(options, cfg) {
+  for (const element of options.design) {
+    if (element.type === "image" && element.imageUrl?.startsWith("blob:")) {
+      throw new Error(
+        `[snowcone] Cannot generate mockup: design element for placement "${element.placement}" uses a blob URL ("${element.imageUrl.slice(0, 60)}..."). Blob URLs are local to this browser tab and cannot be downloaded by the mockup rendering server. Upload the image to a publicly accessible URL or convert it to a data URL before requesting a mockup.`
+      );
+    }
+  }
+  const width = normalizeWidth(options.width);
+  const base = cfg.mockupBaseUrl.replace(/\/+$/, "");
+  const path = `/${encodeURIComponent(options.productId)}`;
+  let queryString = `${PARAMS.shop}=${encodeURIComponent(cfg.shop)}`;
+  const simple = asSimpleAsset(options.design);
+  if (simple) {
+    queryString += `&${PARAMS.asset}=${encodeURIComponent(simple.imageUrl)}`;
+    if (simple.placement) {
+      queryString += `&${PARAMS.placement}=${encodeURIComponent(simple.placement)}`;
+    }
+  } else {
+    const encodedAssets = encodeURIComponent(
+      btoa(JSON.stringify(normalizeDesignElements(options.design)))
+    );
+    queryString += `&${PARAMS.assets}=${encodedAssets}`;
+  }
+  queryString += `&${PARAMS.variant}=${encodeURIComponent(options.variantId)}`;
+  queryString += `&${PARAMS.mockup}=${encodeURIComponent(options.mockupId)}`;
+  queryString += `&${PARAMS.width}=${width}`;
+  if (options.optionSelections && Object.keys(options.optionSelections).length > 0) {
+    const sorted = {};
+    for (const k of Object.keys(options.optionSelections).sort()) {
+      sorted[k] = options.optionSelections[k];
+    }
+    const optionSelectionsBase64 = btoa(JSON.stringify(sorted));
+    queryString += `&${PARAMS.optionSelections}=${encodeURIComponent(
+      optionSelectionsBase64
+    )}`;
+  }
+  if (options.effects?.grain) {
+    queryString += `&${PARAMS.grain}=${options.effects.grain}`;
+  }
+  if (options.aspect && options.aspect !== "16:9") {
+    queryString += `&${PARAMS.aspect}=${encodeURIComponent(options.aspect)}`;
+  }
+  if (options.maskOverrides && options.maskOverrides.length > 0) {
+    const maskOverridesBase64 = btoa(JSON.stringify(options.maskOverrides));
+    queryString += `&${PARAMS.maskOverrides}=${encodeURIComponent(maskOverridesBase64)}`;
+  }
+  return `${base}${path}?${queryString}`;
+}
+var PARAM_PREFIX = {
+  asset: "asset.",
+  color: "color.",
+  tile: "tile.",
+  align: "align.",
+  opt: "opt."
+};
+var DEFAULT_PUBLIC_BASE_URL = "https://img.snowcone.app";
+function buildPublicMockupUrl(options, cfg = {}) {
+  const base = (cfg.baseUrl ?? DEFAULT_PUBLIC_BASE_URL).replace(/\/+$/, "");
+  const path = `/${encodeURIComponent(options.productCode)}`;
+  const enc = encodeURIComponent;
+  const parts = [];
+  parts.push(`${PARAMS.shop}=${enc(options.shop)}`);
+  if (options.design) {
+    for (const key of Object.keys(options.design).sort()) {
+      const fill = options.design[key];
+      const k = enc(key);
+      if (typeof fill === "string") {
+        parts.push(`${PARAM_PREFIX.asset}${k}=${enc(fill)}`);
+      } else if ("color" in fill) {
+        parts.push(`${PARAM_PREFIX.color}${k}=${enc(fill.color)}`);
+      } else {
+        parts.push(`${PARAM_PREFIX.asset}${k}=${enc(fill.src)}`);
+        if (fill.tile !== void 0) {
+          parts.push(`${PARAM_PREFIX.tile}${k}=${fill.tile}`);
+        }
+        if (fill.align !== void 0) {
+          parts.push(`${PARAM_PREFIX.align}${k}=${enc(fill.align)}`);
+        }
+      }
+    }
+  } else if (options.assetUrl !== void 0) {
+    parts.push(`${PARAMS.asset}=${enc(options.assetUrl)}`);
+  }
+  if (options.placement !== void 0) {
+    parts.push(`${PARAMS.placement}=${enc(options.placement)}`);
+  }
+  if (options.options) {
+    for (const attr of Object.keys(options.options).sort()) {
+      parts.push(`${PARAM_PREFIX.opt}${enc(attr)}=${enc(options.options[attr])}`);
+    }
+  }
+  if (options.variant !== void 0) {
+    parts.push(`${PARAMS.variant}=${enc(options.variant)}`);
+  }
+  if (options.mockup !== void 0) {
+    parts.push(`${PARAMS.mockup}=${enc(options.mockup)}`);
+  }
+  if (options.width !== void 0) parts.push(`${PARAMS.width}=${options.width}`);
+  if (options.aspect !== void 0 && options.aspect !== "16:9") {
+    parts.push(`${PARAMS.aspect}=${enc(options.aspect)}`);
+  }
+  return `${base}${path}?${parts.join("&")}`;
+}
+function canonicalForSig(url) {
+  const hashIdx = url.indexOf("#");
+  const noHash = hashIdx === -1 ? url : url.slice(0, hashIdx);
+  const qIdx = noHash.indexOf("?");
+  const beforeQuery = qIdx === -1 ? noHash : noHash.slice(0, qIdx);
+  const rawQuery = qIdx === -1 ? "" : noHash.slice(qIdx + 1);
+  let pathname;
+  const schemeMatch = beforeQuery.match(/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//);
+  if (schemeMatch) {
+    const afterScheme = beforeQuery.slice(schemeMatch[0].length);
+    const slashIdx = afterScheme.indexOf("/");
+    pathname = slashIdx === -1 ? "/" : afterScheme.slice(slashIdx);
+  } else {
+    pathname = beforeQuery;
+  }
+  const pairs = [];
+  if (rawQuery.length > 0) {
+    for (const segment of rawQuery.split("&")) {
+      if (segment.length === 0) continue;
+      const eq = segment.indexOf("=");
+      const rawKey = eq === -1 ? segment : segment.slice(0, eq);
+      const rawValue = eq === -1 ? "" : segment.slice(eq + 1);
+      const key = decodeURIComponent(rawKey);
+      if (key === "signature") continue;
+      pairs.push({ key, raw: rawValue });
+    }
+  }
+  pairs.sort((a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0);
+  const canonicalQuery = pairs.map((p) => `${p.key}=${p.raw}`).join("&");
+  return `${pathname}?${canonicalQuery}`;
+}
+
+// src/mockup/hmac.ts
+var K = new Uint32Array([
+  1116352408,
+  1899447441,
+  3049323471,
+  3921009573,
+  961987163,
+  1508970993,
+  2453635748,
+  2870763221,
+  3624381080,
+  310598401,
+  607225278,
+  1426881987,
+  1925078388,
+  2162078206,
+  2614888103,
+  3248222580,
+  3835390401,
+  4022224774,
+  264347078,
+  604807628,
+  770255983,
+  1249150122,
+  1555081692,
+  1996064986,
+  2554220882,
+  2821834349,
+  2952996808,
+  3210313671,
+  3336571891,
+  3584528711,
+  113926993,
+  338241895,
+  666307205,
+  773529912,
+  1294757372,
+  1396182291,
+  1695183700,
+  1986661051,
+  2177026350,
+  2456956037,
+  2730485921,
+  2820302411,
+  3259730800,
+  3345764771,
+  3516065817,
+  3600352804,
+  4094571909,
+  275423344,
+  430227734,
+  506948616,
+  659060556,
+  883997877,
+  958139571,
+  1322822218,
+  1537002063,
+  1747873779,
+  1955562222,
+  2024104815,
+  2227730452,
+  2361852424,
+  2428436474,
+  2756734187,
+  3204031479,
+  3329325298
+]);
+function rotr(x, n) {
+  return x >>> n | x << 32 - n;
+}
+function sha256(bytes) {
+  const h = new Uint32Array([
+    1779033703,
+    3144134277,
+    1013904242,
+    2773480762,
+    1359893119,
+    2600822924,
+    528734635,
+    1541459225
+  ]);
+  const bitLen = bytes.length * 8;
+  const withOne = bytes.length + 1;
+  const total = withOne + (56 - withOne % 64 + 64) % 64 + 8;
+  const msg = new Uint8Array(total);
+  msg.set(bytes);
+  msg[bytes.length] = 128;
+  const hi = Math.floor(bitLen / 4294967296);
+  const lo = bitLen >>> 0;
+  msg[total - 8] = hi >>> 24 & 255;
+  msg[total - 7] = hi >>> 16 & 255;
+  msg[total - 6] = hi >>> 8 & 255;
+  msg[total - 5] = hi & 255;
+  msg[total - 4] = lo >>> 24 & 255;
+  msg[total - 3] = lo >>> 16 & 255;
+  msg[total - 2] = lo >>> 8 & 255;
+  msg[total - 1] = lo & 255;
+  const w = new Uint32Array(64);
+  for (let off = 0; off < total; off += 64) {
+    for (let i = 0; i < 16; i++) {
+      const j = off + i * 4;
+      w[i] = (msg[j] << 24 | msg[j + 1] << 16 | msg[j + 2] << 8 | msg[j + 3]) >>> 0;
+    }
+    for (let i = 16; i < 64; i++) {
+      const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ w[i - 15] >>> 3;
+      const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ w[i - 2] >>> 10;
+      w[i] = w[i - 16] + s0 + w[i - 7] + s1 >>> 0;
+    }
+    let a = h[0];
+    let b = h[1];
+    let c = h[2];
+    let d = h[3];
+    let e = h[4];
+    let f = h[5];
+    let g = h[6];
+    let hh = h[7];
+    for (let i = 0; i < 64; i++) {
+      const S1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
+      const ch = e & f ^ ~e & g;
+      const t1 = hh + S1 + ch + K[i] + w[i] >>> 0;
+      const S0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
+      const maj = a & b ^ a & c ^ b & c;
+      const t2 = S0 + maj >>> 0;
+      hh = g;
+      g = f;
+      f = e;
+      e = d + t1 >>> 0;
+      d = c;
+      c = b;
+      b = a;
+      a = t1 + t2 >>> 0;
+    }
+    h[0] = h[0] + a >>> 0;
+    h[1] = h[1] + b >>> 0;
+    h[2] = h[2] + c >>> 0;
+    h[3] = h[3] + d >>> 0;
+    h[4] = h[4] + e >>> 0;
+    h[5] = h[5] + f >>> 0;
+    h[6] = h[6] + g >>> 0;
+    h[7] = h[7] + hh >>> 0;
+  }
+  const out = new Uint8Array(32);
+  for (let i = 0; i < 8; i++) {
+    out[i * 4] = h[i] >>> 24 & 255;
+    out[i * 4 + 1] = h[i] >>> 16 & 255;
+    out[i * 4 + 2] = h[i] >>> 8 & 255;
+    out[i * 4 + 3] = h[i] & 255;
+  }
+  return out;
+}
+function utf8(str) {
+  if (typeof TextEncoder !== "undefined") return new TextEncoder().encode(str);
+  const bytes = [];
+  for (let i = 0; i < str.length; i++) {
+    let c = str.charCodeAt(i);
+    if (c < 128) bytes.push(c);
+    else if (c < 2048) {
+      bytes.push(192 | c >> 6, 128 | c & 63);
+    } else if (c >= 55296 && c <= 56319) {
+      const c2 = str.charCodeAt(++i);
+      c = 65536 + ((c & 1023) << 10) + (c2 & 1023);
+      bytes.push(
+        240 | c >> 18,
+        128 | c >> 12 & 63,
+        128 | c >> 6 & 63,
+        128 | c & 63
+      );
+    } else {
+      bytes.push(
+        224 | c >> 12,
+        128 | c >> 6 & 63,
+        128 | c & 63
+      );
+    }
+  }
+  return new Uint8Array(bytes);
+}
+function toHex(bytes) {
+  let hex = "";
+  for (let i = 0; i < bytes.length; i++) {
+    hex += bytes[i].toString(16).padStart(2, "0");
+  }
+  return hex;
+}
+function hmacSha256Hex(secret, message) {
+  const blockSize = 64;
+  let key = utf8(secret);
+  if (key.length > blockSize) key = sha256(key);
+  if (key.length < blockSize) {
+    const padded = new Uint8Array(blockSize);
+    padded.set(key);
+    key = padded;
+  }
+  const oKeyPad = new Uint8Array(blockSize);
+  const iKeyPad = new Uint8Array(blockSize);
+  for (let i = 0; i < blockSize; i++) {
+    oKeyPad[i] = key[i] ^ 92;
+    iKeyPad[i] = key[i] ^ 54;
+  }
+  const msg = utf8(message);
+  const inner = new Uint8Array(blockSize + msg.length);
+  inner.set(iKeyPad);
+  inner.set(msg, blockSize);
+  const innerHash = sha256(inner);
+  const outer = new Uint8Array(blockSize + innerHash.length);
+  outer.set(oKeyPad);
+  outer.set(innerHash, blockSize);
+  return toHex(sha256(outer));
+}
+
+// src/mockup/getMockupUrl.ts
+var DEFAULT_MOCKUP_BASE = "https://img.snowcone.app";
+function getMockupUrl(a, b, c) {
+  let productCode;
+  let opts;
+  let legacyAsset;
+  if (typeof b === "string") {
+    legacyAsset = a;
+    productCode = b;
+    opts = c ?? {};
+  } else {
+    productCode = a;
+    opts = b;
+  }
+  const base = (opts.base ?? DEFAULT_MOCKUP_BASE).replace(/\/+$/, "");
+  const assetUrl = opts.asset ?? legacyAsset;
+  const url = buildPublicMockupUrl(
+    {
+      productCode,
+      shop: opts.shop,
+      ...opts.design ? { design: opts.design } : {},
+      ...assetUrl !== void 0 ? { assetUrl } : {},
+      ...opts.options ? { options: opts.options } : {},
+      ...opts.width !== void 0 ? { width: opts.width } : {},
+      ...opts.aspect !== void 0 ? { aspect: opts.aspect } : {},
+      ...opts.mockup ?? opts.view ? { mockup: opts.mockup ?? opts.view } : {},
+      ...opts.variant !== void 0 ? { variant: opts.variant } : {},
+      ...opts.placement !== void 0 ? { placement: opts.placement } : {}
+    },
+    { baseUrl: base }
+  );
+  if (!opts.secret) return url;
+  const signature = hmacSha256Hex(opts.secret, canonicalForSig(url)).slice(0, 16);
+  return `${url}&signature=${signature}`;
+}
+
 // src/state/optionSelection.ts
 function resolveBestCombination(selection, attributes, combinations) {
   const relevant = Object.fromEntries(
@@ -1158,7 +1622,7 @@ function resolveUrlFromDOM(relativeUrl) {
   const filename = pathParts[pathParts.length - 1];
   if (!filename) return null;
   const filenameWithoutExt = filename.replace(/\.[^.]+$/, "");
-  const images = document.querySelectorAll("img");
+  const images = Array.from(document.querySelectorAll("img"));
   for (const img of images) {
     const src = img.getAttribute("src");
     if (!src) continue;
@@ -1170,6 +1634,9 @@ function resolveUrlFromDOM(relativeUrl) {
 }
 function normalizeImageUrl(url) {
   if (!url) return null;
+  if (url.startsWith("blob:")) {
+    return null;
+  }
   if (url.startsWith("http://") || url.startsWith("https://")) {
     return url;
   }
@@ -1188,18 +1655,18 @@ function normalizeImageUrl(url) {
       const absoluteUrl = new URL(url, window.location.origin).href;
       if (absoluteUrl.includes("localhost") || absoluteUrl.includes("127.0.0.1")) {
         console.warn(
-          `[merchify-sdk] Artwork URL "${absoluteUrl}" uses localhost. This will work in your browser but won't work for mockup generation. Deploy your app or use publicly accessible URLs for production mockups.`
+          `[snowcone-sdk] Artwork URL "${absoluteUrl}" uses localhost. This will work in your browser but won't work for mockup generation. Deploy your app or use publicly accessible URLs for production mockups.`
         );
       }
       return absoluteUrl;
     } catch (e) {
-      console.warn(`[merchify-sdk] Failed to normalize URL "${url}":`, e);
+      console.warn(`[snowcone-sdk] Failed to normalize URL "${url}":`, e);
       return url;
     }
   }
   if (url.startsWith("/") || url.startsWith(".")) {
     console.warn(
-      `[merchify-sdk] Relative URL "${url}" detected during SSR. URL will be resolved on the client. Consider using absolute URLs for SSR compatibility.`
+      `[snowcone-sdk] Relative URL "${url}" detected during SSR. URL will be resolved on the client. Consider using absolute URLs for SSR compatibility.`
     );
   }
   return url;
@@ -1302,95 +1769,39 @@ function filterImagePlacements(placements) {
 }
 
 // src/mockup/urlGenerator.ts
-var cachedMockupConfig = null;
-function resolveDefaultConfig() {
-  const DEFAULT_MOCKUP_URL = "https://MOCKUP_URL_NOT_CONFIGURED.invalid";
-  const DEFAULT_ACCOUNT_ID = "ACCOUNT_ID_NOT_CONFIGURED";
-  const winConfig = typeof window !== "undefined" && window.merchify || {};
-  const env = typeof process !== "undefined" ? process.env : void 0;
-  const envEndpoint = env?.CATALOG_API_BASE_URL;
-  const envImageUrl = env?.MERCHIFY_IMAGE_URL || env?.NEXT_PUBLIC_MERCH_MOCKUP_URL;
-  const envSignerUrl = env?.MERCHIFY_SIGNER_URL || env?.NEXT_PUBLIC_MERCH_SIGNER_URL;
-  const envAccountId = env?.MERCHIFY_ACCOUNT_ID || env?.NEXT_PUBLIC_MERCH_ACCOUNT_ID;
-  return {
-    endpoint: winConfig.endpoint || envEndpoint || void 0,
-    mockupUrl: winConfig.mockupUrl || envImageUrl || DEFAULT_MOCKUP_URL,
-    signerUrl: winConfig.signerUrl || envSignerUrl || void 0,
-    accountId: winConfig.accountId || envAccountId || DEFAULT_ACCOUNT_ID,
-    mode: winConfig.mode || "mock"
-  };
+var maxWidthCache = /* @__PURE__ */ new Map();
+function buildMockupUrl2(options, cfg) {
+  const { ar, ...rest } = options;
+  return buildMockupUrl(
+    { ...rest, aspect: ar },
+    { mockupBaseUrl: cfg.mockupBaseUrl, shop: cfg.shop }
+  );
 }
-var localhostWarningShown = false;
-function config(overrides) {
-  if (overrides) {
-    const base = resolveDefaultConfig();
-    cachedMockupConfig = { ...base, ...overrides };
-  } else if (!cachedMockupConfig) {
-    cachedMockupConfig = resolveDefaultConfig();
-  }
-  const hostname = typeof window !== "undefined" ? window.location.hostname : "";
-  const isLocalDev = hostname === "localhost" || hostname === "127.0.0.1" || hostname.includes("192.168.") || hostname.endsWith(".local") || hostname.endsWith(".lvh.me") || hostname === "lvh.me";
-  if (!localhostWarningShown && typeof window !== "undefined" && !isLocalDev && cachedMockupConfig?.mockupUrl?.includes("localhost")) {
-    console.error(
-      `[@snowcone-app/sdk] WARNING: Using localhost mockup URL in production environment.
-  mockupUrl: ${cachedMockupConfig.mockupUrl}
-  This was likely caused by building with .env.local present.
-  Redeploy with "pnpm run deploy" to fix.`
-    );
-    localhostWarningShown = true;
-  }
-  return cachedMockupConfig;
+function resolveMockupBaseUrl() {
+  const env = typeof process !== "undefined" ? process.env : void 0;
+  const winConfig = typeof window !== "undefined" && window.snowcone || {};
+  return winConfig.mockupUrl || env?.SNOWCONE_IMAGE_URL || env?.NEXT_PUBLIC_MERCH_MOCKUP_URL || "https://cdn.snowcone.app";
 }
-var resolveMockupConfig = config;
-function normalizeDesignElements(design) {
-  return design.map((element) => {
-    const normalized = {};
-    const keys = Object.keys(element).sort();
-    for (const key of keys) {
-      if (key === "width" || key === "height" || key === "type") {
-        continue;
-      }
-      if (key === "alignment" && element[key] === "center") {
-        continue;
-      }
-      const value = element[key];
-      if (value !== void 0 && value !== null) {
-        normalized[key] = value;
-      }
-    }
-    return normalized;
-  });
+function resolveShop() {
+  const env = typeof process !== "undefined" ? process.env : void 0;
+  const winConfig = typeof window !== "undefined" && window.snowcone || {};
+  return winConfig.shop || env?.SNOWCONE_SHOP_ID || env?.NEXT_PUBLIC_SNOWCONE_SHOP_ID || "SHOP_NOT_CONFIGURED";
 }
 function mockupUrl(options) {
-  const mockupConfig = config();
-  const mockupBaseUrl = mockupConfig.mockupUrl || "https://MOCKUP_URL_NOT_CONFIGURED.invalid";
-  const accountId = mockupConfig.accountId || "ACCOUNT_ID_NOT_CONFIGURED";
-  const normalizedDesign = normalizeDesignElements(options.design);
-  const designBase64 = btoa(JSON.stringify(normalizedDesign));
-  const encodedDesign = encodeURIComponent(designBase64);
-  let queryString = `productId=${encodeURIComponent(options.productId)}`;
-  queryString += `&mockupId=${encodeURIComponent(options.mockupId)}`;
-  queryString += `&variantId=${encodeURIComponent(options.variantId)}`;
-  queryString += `&design=${encodedDesign}`;
-  queryString += `&width=${options.width}`;
-  queryString += `&accountId=${encodeURIComponent(accountId)}`;
-  if (options.effects?.grain) {
-    queryString += `&grain=${options.effects.grain}`;
-  }
-  if (options.ar && options.ar !== "16:9") {
-    queryString += `&ar=${encodeURIComponent(options.ar)}`;
-  }
-  if (options.maskOverrides && options.maskOverrides.length > 0) {
-    const maskOverridesBase64 = btoa(JSON.stringify(options.maskOverrides));
-    queryString += `&maskOverrides=${encodeURIComponent(maskOverridesBase64)}`;
-  }
-  if (mockupConfig.mode === "mock") {
-    const mockSignature = "bypass-sig-for-k6-load-test";
-    queryString += `&sig=${encodeURIComponent(mockSignature)}`;
+  const mockupBaseUrl = resolveMockupBaseUrl();
+  const shop = resolveShop();
+  const encodedDesign = encodeURIComponent(
+    btoa(JSON.stringify(normalizeDesignElements(options.design)))
+  );
+  let width = normalizeWidth(options.width);
+  const cacheKey = `${options.productId}:${options.mockupId}:${options.variantId}:${encodedDesign}`;
+  const cachedWidth = maxWidthCache.get(cacheKey);
+  if (cachedWidth !== void 0 && cachedWidth >= width) {
+    width = cachedWidth;
   } else {
-    console.warn("Live mode signature generation not implemented in mockupUrl");
+    maxWidthCache.set(cacheKey, width);
   }
-  return `${mockupBaseUrl}/mockup?${queryString}`;
+  return buildMockupUrl2({ ...options, width }, { mockupBaseUrl, shop });
 }
 function getVariant(selection, product) {
   const combination = findBestCombination(
@@ -1556,6 +1967,12 @@ function validateImageUrl(url) {
       message: "Image URL is required",
       value: url
     });
+  } else if (url.startsWith("blob:")) {
+    errors.push({
+      field: "imageUrl",
+      message: "Blob URLs (blob:...) cannot be used for mockup generation \u2014 they are local to the browser and not accessible by the rendering server. Upload the image to a public URL first, or export the canvas to a data URL.",
+      value: url
+    });
   } else if (
     // Allow absolute URLs
     !url.startsWith("http://") && !url.startsWith("https://") && // Allow data URLs
@@ -2554,11 +2971,11 @@ var UniversalContextProvider = class extends EventEmitter {
   config;
   consumers = /* @__PURE__ */ new Set();
   initialized = false;
-  constructor(config2 = {}) {
+  constructor(config = {}) {
     super();
-    this.config = config2;
+    this.config = config;
     this.contextManager = new ProductContextManager();
-    this.loader = new ProductLoader(this.contextManager, config2.fetcher);
+    this.loader = new ProductLoader(this.contextManager, config.fetcher);
     this.setupSubscriptions();
   }
   /**
@@ -2676,7 +3093,7 @@ var ContextInjector = class {
   static forVue(provider) {
     return {
       install(app) {
-        app.provide("merchifyContext", provider);
+        app.provide("snowconeContext", provider);
       },
       inject() {
         return provider;
@@ -2704,7 +3121,7 @@ var ContextInjector = class {
       // Attach to element
       attach(element) {
         element.__contextProvider = provider;
-        element.addEventListener("merchify:request-context", (event) => {
+        element.addEventListener("snowcone:request-context", (event) => {
           event.detail.context = provider.getContext();
         });
       },
@@ -2722,8 +3139,8 @@ var ContextInjector = class {
     };
   }
 };
-function createUniversalProvider(config2) {
-  return new UniversalContextProvider(config2);
+function createUniversalProvider(config) {
+  return new UniversalContextProvider(config);
 }
 function withContext(Base) {
   return class extends Base {
@@ -3728,8 +4145,8 @@ var StandardComponents = {
   Product: {
     metadata: {
       name: "Product",
-      tagName: "merchify-product",
-      displayName: "MerchifyProduct",
+      tagName: "snowcone-product",
+      displayName: "SnowconeProduct",
       description: "Product context provider component",
       props: {
         productId: { type: "string" },
@@ -3755,8 +4172,8 @@ var StandardComponents = {
   ProductOptions: {
     metadata: {
       name: "ProductOptions",
-      tagName: "merchify-product-options",
-      displayName: "MerchifyProductOptions",
+      tagName: "snowcone-product-options",
+      displayName: "SnowconeProductOptions",
       description: "Product options selection component",
       props: {
         attributes: { type: "object" },
@@ -3776,8 +4193,8 @@ var StandardComponents = {
   ProductPrice: {
     metadata: {
       name: "ProductPrice",
-      tagName: "merchify-product-price",
-      displayName: "MerchifyProductPrice",
+      tagName: "snowcone-product-price",
+      displayName: "SnowconeProductPrice",
       description: "Product price display component",
       props: {
         price: { type: "number" },
@@ -3793,8 +4210,8 @@ var StandardComponents = {
   ProductImage: {
     metadata: {
       name: "ProductImage",
-      tagName: "merchify-product-image",
-      displayName: "MerchifyProductImage",
+      tagName: "snowcone-product-image",
+      displayName: "SnowconeProductImage",
       description: "Product mockup image component",
       props: {
         productId: { type: "string" },
@@ -3813,8 +4230,8 @@ var StandardComponents = {
   AddToCart: {
     metadata: {
       name: "AddToCart",
-      tagName: "merchify-add-to-cart",
-      displayName: "MerchifyAddToCart",
+      tagName: "snowcone-add-to-cart",
+      displayName: "SnowconeAddToCart",
       description: "Add to cart button component",
       props: {
         text: { type: "string", default: "Add to Cart" },
@@ -4395,7 +4812,9 @@ var RealtimeMockupService = class {
   logs = [];
   lastError = null;
   callbacks = {};
+  lastBlobSentAt = 0;
   canvasBlobs = /* @__PURE__ */ new Map();
+  canvasStates = /* @__PURE__ */ new Map();
   colors = /* @__PURE__ */ new Map();
   lastSendTime = {};
   throttleTimeouts = {};
@@ -4405,11 +4824,24 @@ var RealtimeMockupService = class {
   lastSentVersion = 0;
   // Track latest sent version per placement to detect stale responses
   latestSentVersionByPlacement = {};
+  // Track latest accepted (displayed) version per placement — only drop results
+  // older than what we've already shown, not older than what we've sent.
+  // This prevents the "version racing" problem during drag where sent versions
+  // advance faster than the server can render.
+  latestAcceptedVersionByPlacement = {};
   // Feature flag: server now supports version in blob message
   sendVersionInBlob = true;
+  // Session-grant auth: when set, connect() fetches a short-lived token, opens
+  // the WS with `?token=`, and renews ~15s before expiry via a `renew` message.
+  tokenProvider;
+  renewTimer = null;
   setCallbacks(callbacks) {
     this.callbacks = callbacks;
   }
+  /** Provide a grant fetcher to authorize the session (per-shop, renewable). */
+  setTokenProvider(fn) {
+    this.tokenProvider = fn;
+  }
   getState() {
     return {
       isConnected: this.ws?.readyState === WebSocket.OPEN,
@@ -4432,9 +4864,24 @@ var RealtimeMockupService = class {
     if (this.ws?.readyState === WebSocket.OPEN) {
       return;
     }
+    if (this.tokenProvider) {
+      this.tokenProvider().then((grant) => {
+        this.openSocket(grant.token);
+        this.scheduleRenew(grant.expiresAt);
+      }).catch((err) => {
+        this.addLog(`Failed to obtain realtime grant: ${err}`);
+        this.status = "Disconnected";
+      });
+      return;
+    }
+    this.openSocket();
+  }
+  openSocket(token) {
+    const url = token ? `${this.wsUrl}${this.wsUrl.includes("?") ? "&" : "?"}token=${encodeURIComponent(token)}` : this.wsUrl;
     this.addLog(`Connecting to ${this.wsUrl}...`);
-    this.ws = new WebSocket(this.wsUrl);
+    this.ws = new WebSocket(url);
     this.ws.onopen = () => {
+      console.log(`[WS] connection OPENED to ${this.wsUrl}`);
       this.addLog("WebSocket connection opened");
       this.status = "Connected";
     };
@@ -4448,11 +4895,13 @@ var RealtimeMockupService = class {
       }
     };
     this.ws.onclose = (event) => {
+      console.log(`[WS] connection CLOSED (code: ${event.code}, reason: "${event.reason}", wasClean: ${event.wasClean})`);
       this.addLog(`WebSocket connection closed (code: ${event.code})`);
       this.status = "Disconnected";
       this.sessionId = null;
       this.isConfigured = false;
       this.configSent = false;
+      this.clearRenew();
       this.callbacks.onDisconnected?.();
     };
     this.ws.onerror = (error) => {
@@ -4460,6 +4909,29 @@ var RealtimeMockupService = class {
       this.status = "Disconnected";
     };
   }
+  scheduleRenew(expiresAt) {
+    this.clearRenew();
+    if (!this.tokenProvider) return;
+    const ms = Math.max(1e3, expiresAt * 1e3 - Date.now() - 15e3);
+    this.renewTimer = setTimeout(() => void this.renew(), ms);
+  }
+  clearRenew() {
+    if (this.renewTimer) {
+      clearTimeout(this.renewTimer);
+      this.renewTimer = null;
+    }
+  }
+  async renew() {
+    if (!this.tokenProvider || this.ws?.readyState !== WebSocket.OPEN) return;
+    try {
+      const grant = await this.tokenProvider();
+      this.ws.send(JSON.stringify({ type: "renew", token: grant.token }));
+      this.addLog("\u{1F504} Renewed realtime session token", "sent");
+      this.scheduleRenew(grant.expiresAt);
+    } catch (err) {
+      this.addLog(`Failed to renew realtime grant: ${err}`);
+    }
+  }
   handleMessage(data) {
     switch (data.type) {
       case "connected":
@@ -4511,15 +4983,18 @@ var RealtimeMockupService = class {
         this.addLog("\u{1F3A8} Mockup rendering has started...");
         break;
       case "mockup_rendered":
+        console.log(`[WS] mockup_rendered received: mockupId=${data.mockupId} hasImageUrl=${!!data.imageUrl} v=${data.requestVersion} placement="${data.placement}" renderMs=${data.renderMs}`);
         if (data.imageUrl && data.mockupId) {
           const responseVersion = data.requestVersion;
           const responsePlacement = data.placement;
           if (responseVersion !== void 0 && responsePlacement) {
-            const latestVersion = this.latestSentVersionByPlacement[responsePlacement];
-            if (latestVersion !== void 0 && responseVersion < latestVersion) {
-              this.addLog(`\u23ED\uFE0F Ignoring stale mockup v${responseVersion} for "${responsePlacement}" (latest sent: v${latestVersion})`);
+            const lastAccepted = this.latestAcceptedVersionByPlacement[responsePlacement];
+            if (lastAccepted !== void 0 && responseVersion < lastAccepted) {
+              console.log(`[WS] STALE mockup dropped: v${responseVersion} for "${responsePlacement}" (already displayed: v${lastAccepted}, latest sent: v${this.latestSentVersionByPlacement[responsePlacement]})`);
+              this.addLog(`\u23ED\uFE0F Ignoring stale mockup v${responseVersion} for "${responsePlacement}" (displayed: v${lastAccepted})`);
               break;
             }
+            this.latestAcceptedVersionByPlacement[responsePlacement] = responseVersion;
           }
           const mockupResult = {
             mockupId: data.mockupId,
@@ -4527,7 +5002,10 @@ var RealtimeMockupService = class {
             renderUrl: data.renderUrl || data.imageUrl,
             imageSize: data.imageSize || 0,
             requestVersion: responseVersion,
-            placement: responsePlacement
+            placement: responsePlacement,
+            renderMs: data.renderMs,
+            blobToRenderMs: data.blobToRenderMs,
+            canvasRenderTiming: data.canvasRenderTiming
           };
           const existingIndex = this.mockupResults.findIndex((m) => m.mockupId === data.mockupId);
           if (existingIndex >= 0) {
@@ -4546,14 +5024,16 @@ var RealtimeMockupService = class {
         }
         break;
       case "all_mockups_rendered":
+        console.log(`[WS] all_mockups_rendered received: ${data.mockups?.length ?? 0} mockups`);
         if (data.mockups) {
           const freshMockups = data.mockups.filter((mockup) => {
             if (mockup.requestVersion !== void 0 && mockup.placement) {
-              const latestVersion = this.latestSentVersionByPlacement[mockup.placement];
-              if (latestVersion !== void 0 && mockup.requestVersion < latestVersion) {
-                this.addLog(`\u23ED\uFE0F Filtering stale mockup v${mockup.requestVersion} for "${mockup.placement}" (latest: v${latestVersion})`);
+              const lastAccepted = this.latestAcceptedVersionByPlacement[mockup.placement];
+              if (lastAccepted !== void 0 && mockup.requestVersion < lastAccepted) {
+                this.addLog(`\u23ED\uFE0F Filtering stale mockup v${mockup.requestVersion} for "${mockup.placement}" (displayed: v${lastAccepted})`);
                 return false;
               }
+              this.latestAcceptedVersionByPlacement[mockup.placement] = mockup.requestVersion;
             }
             return true;
           });
@@ -4576,31 +5056,32 @@ var RealtimeMockupService = class {
     }
   }
   disconnect() {
+    this.clearRenew();
     if (this.ws) {
       this.ws.close();
       this.ws = null;
     }
   }
-  sendConfig(config2) {
+  sendConfig(config) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
       this.addLog("WebSocket not connected, caching config");
-      this.config = config2;
+      this.config = config;
       this.configSent = false;
       return false;
     }
     if (!this.sessionId) {
       this.addLog("WebSocket connected but no session yet, caching config");
-      this.config = config2;
+      this.config = config;
       this.configSent = false;
       return false;
     }
-    const hasConfigChanged = !this.config || JSON.stringify(this.config) !== JSON.stringify(config2);
+    const hasConfigChanged = !this.config || JSON.stringify(this.config) !== JSON.stringify(config);
     if (this.configSent && !hasConfigChanged) {
       this.addLog("Config already sent and unchanged, skipping duplicate");
       return false;
     }
     if (this.configSent && hasConfigChanged) {
-      const isOnlyMockupIdsChange = this.config && this.config.productId === config2.productId && this.config.variantId === config2.variantId;
+      const isOnlyMockupIdsChange = this.config && this.config.productId === config.productId && this.config.variantId === config.variantId;
       if (isOnlyMockupIdsChange) {
         this.addLog("\u{1F504} MockupIds changed, keeping cached blobs (server will reuse)");
         this.isConfigured = false;
@@ -4610,6 +5091,7 @@ var RealtimeMockupService = class {
         this.isConfigured = false;
         this.mockupResults = [];
         this.canvasBlobs.clear();
+        this.canvasStates.clear();
         this.colors.clear();
         this.lastSendTime = {};
         Object.values(this.throttleTimeouts).forEach((timeout) => clearTimeout(timeout));
@@ -4617,14 +5099,15 @@ var RealtimeMockupService = class {
         this.requestVersion = 0;
         this.lastSentVersion = 0;
         this.latestSentVersionByPlacement = {};
+        this.latestAcceptedVersionByPlacement = {};
         this.addLog("\u{1F9F9} Cleared all cached canvas/color data for new product");
       }
     }
-    this.config = config2;
+    this.config = config;
     this.configSent = true;
     const message = {
       type: "config",
-      config: config2
+      config
     };
     const messageStr = JSON.stringify(message);
     this.addLog(`\u{1F4E4} Sending config: ${JSON.stringify(message, null, 2)}`, "sent");
@@ -4652,6 +5135,30 @@ var RealtimeMockupService = class {
     this.addLog(`\u{1F3AF} Updating mockupIds to: [${mockupIds.join(", ")}]`);
     return this.sendConfig(updatedConfig);
   }
+  /**
+   * Update render width without changing other config.
+   * Used for low-res preview during rapid edits (e.g., 600 while dragging, 1200 on release).
+   * Preserves blobs since product/variant don't change.
+   */
+  updateWidth(width) {
+    if (!this.config) {
+      this.addLog("Cannot update width: no config set");
+      return false;
+    }
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.addLog("Cannot update width: WebSocket not connected");
+      return false;
+    }
+    if (this.config.width === width) {
+      return false;
+    }
+    const updatedConfig = {
+      ...this.config,
+      width
+    };
+    this.addLog(`\u{1F4D0} Updating render width: ${this.config.width} \u2192 ${width}`);
+    return this.sendConfig(updatedConfig);
+  }
   /**
    * Update placementSettings without changing other config.
    * Used to override scaleMode when canvas editor is active.
@@ -4674,6 +5181,8 @@ var RealtimeMockupService = class {
   sendCanvasBlob(placement, blob, mockupCount = 1, baseThrottleMs = 1e3, notifyCallback = true) {
     this.canvasBlobs.set(placement, blob);
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      const reason = !this.ws ? "no WebSocket" : this.ws.readyState !== WebSocket.OPEN ? `ws.readyState=${this.ws.readyState}` : "not configured";
+      console.log(`[WS] sendCanvasBlob BLOCKED for "${placement}" (${blob.size}B): ${reason} (cached for later)`);
       return false;
     }
     if (baseThrottleMs <= 0) {
@@ -4681,16 +5190,25 @@ var RealtimeMockupService = class {
       this.lastSendTime[placement] = Date.now();
       return true;
     }
-    const throttleMs = baseThrottleMs * mockupCount;
-    const now = Date.now();
-    const lastSendTime = this.lastSendTime[placement] || 0;
-    const timeSinceLastSend = now - lastSendTime;
-    const hasNeverSent = lastSendTime === 0;
-    if (hasNeverSent || timeSinceLastSend >= throttleMs) {
-      this.sendBlobImmediately(placement, blob, notifyCallback);
-      this.lastSendTime[placement] = now;
-    } else if (!this.throttleTimeouts[placement]) {
-      const delayTime = throttleMs - timeSinceLastSend;
+    const debounceMs = baseThrottleMs * mockupCount;
+    const lastSendTime = this.lastSendTime[placement];
+    const timeSinceLastSend = lastSendTime ? Date.now() - lastSendTime : 0;
+    const isActiveInteraction = lastSendTime && timeSinceLastSend < debounceMs * 3;
+    if (isActiveInteraction && timeSinceLastSend >= debounceMs) {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+        delete this.throttleTimeouts[placement];
+      }
+      const latestBlob = this.canvasBlobs.get(placement);
+      if (latestBlob && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
+        this.sendBlobImmediately(placement, latestBlob, notifyCallback);
+        this.lastSendTime[placement] = Date.now();
+      }
+    } else {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+      }
+      const delayTime = isActiveInteraction ? debounceMs - timeSinceLastSend : debounceMs;
       this.throttleTimeouts[placement] = setTimeout(() => {
         const latestBlob = this.canvasBlobs.get(placement);
         if (latestBlob && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
@@ -4702,6 +5220,72 @@ var RealtimeMockupService = class {
     }
     return true;
   }
+  /**
+   * Send canvas state JSON for server-side rendering.
+   * Alternative to sendCanvasBlob — the server renders the PNG instead of the client.
+   */
+  sendCanvasState(placement, state, mockupCount = 1, baseThrottleMs = 1e3) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      const reason = !this.ws ? "no WebSocket" : this.ws.readyState !== WebSocket.OPEN ? `ws.readyState=${this.ws.readyState}` : "not configured";
+      console.log(`[WS] sendCanvasState BLOCKED for "${placement}": ${reason}`);
+      return false;
+    }
+    this.canvasStates.set(placement, state);
+    if (baseThrottleMs <= 0) {
+      this.sendCanvasStateImmediately(placement, state);
+      this.lastSendTime[placement] = Date.now();
+      return true;
+    }
+    const debounceMs = baseThrottleMs * mockupCount;
+    const lastSendTime = this.lastSendTime[placement];
+    const timeSinceLastSend = lastSendTime ? Date.now() - lastSendTime : 0;
+    const isActiveInteraction = lastSendTime && timeSinceLastSend < debounceMs * 3;
+    if (isActiveInteraction && timeSinceLastSend >= debounceMs) {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+        delete this.throttleTimeouts[placement];
+      }
+      const latestState = this.canvasStates.get(placement);
+      if (latestState && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
+        console.log(`[WS] sendCanvasState "${placement}": max-wait flush (${timeSinceLastSend}ms since last)`);
+        this.sendCanvasStateImmediately(placement, latestState);
+        this.lastSendTime[placement] = Date.now();
+      }
+    } else {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+      }
+      const delayTime = isActiveInteraction ? debounceMs - timeSinceLastSend : debounceMs;
+      this.throttleTimeouts[placement] = setTimeout(() => {
+        const latestState = this.canvasStates.get(placement);
+        if (latestState && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
+          console.log(`[WS] sendCanvasState "${placement}": debounce firing (${debounceMs}ms)`);
+          this.sendCanvasStateImmediately(placement, latestState);
+          this.lastSendTime[placement] = Date.now();
+        }
+        delete this.throttleTimeouts[placement];
+      }, delayTime);
+    }
+    return true;
+  }
+  sendCanvasStateImmediately(placement, state) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.log(`[WS] sendCanvasStateImmediately ABORTED: ws not open`);
+      return;
+    }
+    this.lastSentVersion = ++this.requestVersion;
+    this.latestSentVersionByPlacement[placement] = this.lastSentVersion;
+    const message = JSON.stringify({
+      type: "canvas_state",
+      placement,
+      version: this.lastSentVersion,
+      state
+    });
+    this.ws.send(message);
+    this.lastBlobSentAt = Date.now();
+    this.addLog(`Sent canvas state for "${placement}" (${(message.length / 1024).toFixed(1)}KB, v${this.lastSentVersion})`, "sent");
+    this.callbacks.onBlobSent?.(placement);
+  }
   sendBlobImmediately(placement, blob, notifyCallback = true) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
     this.lastSentVersion = ++this.requestVersion;
@@ -4727,6 +5311,7 @@ ${versionToSend}
           combined.set(imageBytes, headerBytes.length);
         }
         this.ws.send(combined.buffer);
+        this.lastBlobSentAt = Date.now();
         this.addLog(`Sent canvas blob for placement "${placement}" (${imageBytes.length} bytes, v${versionToSend})`, "sent");
         if (notifyCallback) {
           this.callbacks.onBlobSent?.(placement);
@@ -4863,8 +5448,8 @@ ${versionToSend}
 };
 
 // src/index.ts
-function getFetcher(config2) {
-  return config2?.fetcher || globalThis.fetch.bind(globalThis);
+function getFetcher(config) {
+  return config?.fetcher || globalThis.fetch.bind(globalThis);
 }
 function validateProductLoose(product) {
   try {
@@ -4873,11 +5458,11 @@ function validateProductLoose(product) {
     return product;
   }
 }
-async function listProducts(config2) {
-  const f = getFetcher(config2);
-  const meilisearchHost = config2?.meilisearch?.host || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_HOST || "https://ms-e5d999b2eaca-15654.sfo.meilisearch.io";
-  const meilisearchApiKey = config2?.meilisearch?.apiKey || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_API_KEY || "eee819b849798ad9091228c486ec05d0931e5292";
-  const meilisearchIndex = config2?.meilisearch?.index || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_INDEX || "merchify";
+async function listProducts(config) {
+  const f = getFetcher(config);
+  const meilisearchHost = config?.meilisearch?.host || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_HOST || "https://search.snowcone.app";
+  const meilisearchApiKey = config?.meilisearch?.apiKey || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_API_KEY || "eee819b849798ad9091228c486ec05d0931e5292";
+  const meilisearchIndex = config?.meilisearch?.index || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_INDEX || "snowcone";
   const headers = {
     "Content-Type": "application/json"
   };
@@ -4890,7 +5475,7 @@ async function listProducts(config2) {
     headers,
     body: JSON.stringify({
       q: "",
-      limit: config2?.limit || 1e3,
+      limit: config?.limit || 1e3,
       filter: "mockups IS NOT EMPTY"
     })
   });
@@ -4899,11 +5484,11 @@ async function listProducts(config2) {
   const items = (data.hits || []).map((p) => validateProductLoose(p));
   return { items, total: data.estimatedTotalHits || items.length };
 }
-async function getProduct(idOrSlug, config2) {
-  const f = getFetcher(config2);
-  const meilisearchHost = config2?.meilisearch?.host || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_HOST || "https://ms-e5d999b2eaca-15654.sfo.meilisearch.io";
-  const meilisearchApiKey = config2?.meilisearch?.apiKey || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_API_KEY || "eee819b849798ad9091228c486ec05d0931e5292";
-  const meilisearchIndex = config2?.meilisearch?.index || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_INDEX || "merchify";
+async function getProduct(idOrSlug, config) {
+  const f = getFetcher(config);
+  const meilisearchHost = config?.meilisearch?.host || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_HOST || "https://search.snowcone.app";
+  const meilisearchApiKey = config?.meilisearch?.apiKey || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_API_KEY || "eee819b849798ad9091228c486ec05d0931e5292";
+  const meilisearchIndex = config?.meilisearch?.index || typeof process !== "undefined" && process.env?.NEXT_PUBLIC_MEILISEARCH_INDEX || "snowcone";
   const headers = {
     "Content-Type": "application/json"
   };
@@ -4918,13 +5503,13 @@ async function getProduct(idOrSlug, config2) {
   const raw = await res.json();
   return validateProductLoose(raw);
 }
-function createClient(config2) {
-  const fetcher = getFetcher(config2);
-  const mockupService = new MockupServiceImpl(config2.mockup || {}, fetcher);
+function createClient(config) {
+  const fetcher = getFetcher(config);
+  const mockupService = new MockupServiceImpl(config.mockup || {}, fetcher);
   return {
     catalog: {
-      listProducts: (overrides) => listProducts({ ...config2, ...overrides }),
-      getProduct: (idOrSlug, overrides) => getProduct(idOrSlug, { ...config2, ...overrides })
+      listProducts: (overrides) => listProducts({ ...config, ...overrides }),
+      getProduct: (idOrSlug, overrides) => getProduct(idOrSlug, { ...config, ...overrides })
     },
     mockup: mockupService
   };
@@ -4949,6 +5534,7 @@ function createClient(config2) {
   DEFAULT_ARTWORK_URL,
   DEFAULT_ASPECT_RATIO,
   DEFAULT_COLOR,
+  DEFAULT_MOCKUP_BASE,
   DEFAULT_PLACEMENT_DIMENSIONS,
   Elements,
   ErrorManager,
@@ -4973,9 +5559,9 @@ function createClient(config2) {
   VueAdapter,
   adapterRegistry,
   autoRegister,
+  buildMockupUrl,
   componentRegistry,
   computeDisabledChoices,
-  config,
   createAddToCartEvent,
   createAddToCartHandler,
   createCartDetail,
@@ -5015,6 +5601,7 @@ function createClient(config2) {
   getEffectiveAlignment,
   getIncompleteSelectionMessage,
   getMissingSelections,
+  getMockupUrl,
   getOptionRenderType,
   getPricePreview,
   getProduct,
@@ -5032,7 +5619,6 @@ function createClient(config2) {
   prepareOptionRenderData,
   registerStandardComponents,
   resolveBestCombination,
-  resolveMockupConfig,
   resolveMockupId,
   resolveVariantId,
   retryOperation,