@snowcone-app/sdk 0.1.10

package/dist/index.cjs

@@ -0,0 +1,5055 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AbstractTemplateRenderer: () => AbstractTemplateRenderer,
+  AdapterRegistry: () => AdapterRegistry,
+  Animations: () => Animations,
+  Attributes: () => Attributes,
+  ClassNames: () => ClassNames,
+  ColorPickerUtils: () => ColorPickerUtils,
+  CommonProps: () => CommonProps,
+  ComponentEventManager: () => ComponentEventManager,
+  ComponentFactory: () => ComponentFactory,
+  ComponentLifecycle: () => ComponentLifecycle,
+  ComponentRegistry: () => ComponentRegistry,
+  ComponentTemplates: () => ComponentTemplates,
+  ContextBridge: () => ContextBridge,
+  ContextInjector: () => ContextInjector,
+  ContextSynchronizer: () => ContextSynchronizer,
+  DEFAULT_ARTWORK_URL: () => DEFAULT_ARTWORK_URL,
+  DEFAULT_ASPECT_RATIO: () => DEFAULT_ASPECT_RATIO,
+  DEFAULT_COLOR: () => DEFAULT_COLOR,
+  DEFAULT_PLACEMENT_DIMENSIONS: () => DEFAULT_PLACEMENT_DIMENSIONS,
+  Elements: () => Elements,
+  ErrorManager: () => ErrorManager,
+  EventDelegator: () => EventDelegator,
+  EventEmitter: () => EventEmitter,
+  Focus: () => Focus,
+  LifecycleManager: () => LifecycleManager,
+  LitAdapter: () => LitAdapter,
+  ProductContextManager: () => ProductContextManager,
+  ProductLoader: () => ProductLoader,
+  ProductProps: () => ProductProps,
+  PropertyManager: () => PropertyManager,
+  RealtimeMockupService: () => RealtimeMockupService,
+  StandardComponents: () => StandardComponents,
+  StandardEvents: () => StandardEvents,
+  StateManager: () => StateManager,
+  Styles: () => Styles,
+  SvelteAdapter: () => SvelteAdapter,
+  SwatchUtils: () => SwatchUtils,
+  TemplateBuilder: () => TemplateBuilder,
+  UniversalContextProvider: () => UniversalContextProvider,
+  VueAdapter: () => VueAdapter,
+  adapterRegistry: () => adapterRegistry,
+  autoRegister: () => autoRegister,
+  componentRegistry: () => componentRegistry,
+  computeDisabledChoices: () => computeDisabledChoices,
+  config: () => config,
+  createAddToCartEvent: () => createAddToCartEvent,
+  createAddToCartHandler: () => createAddToCartHandler,
+  createCartDetail: () => createCartDetail,
+  createClient: () => createClient,
+  createComponent: () => createComponent,
+  createContextProvider: () => createContextProvider,
+  createDesignForPlacements: () => createDesignForPlacements,
+  createDevFetcher: () => createDevFetcher,
+  createErrorHandler: () => createErrorHandler,
+  createEventManager: () => createEventManager,
+  createLifecycle: () => createLifecycle,
+  createLitComponent: () => createLitComponent,
+  createProductContext: () => createProductContext,
+  createProductLoader: () => createProductLoader,
+  createPropertyManager: () => createPropertyManager,
+  createStateHook: () => createStateHook,
+  createStateStore: () => createStateStore,
+  createSvelteComponent: () => createSvelteComponent,
+  createUniversalProvider: () => createUniversalProvider,
+  createVueComponent: () => createVueComponent,
+  defineComponent: () => defineComponent,
+  deriveDefaultSelection: () => deriveDefaultSelection,
+  describeArtSelector: () => describeArtSelector,
+  describeProductArtAlignment: () => describeProductArtAlignment,
+  describeProductImage: () => describeProductImage,
+  describeProductOptions: () => describeProductOptions,
+  describeProductPrice: () => describeProductPrice,
+  describeProductTitle: () => describeProductTitle,
+  extractProductId: () => extractProductId,
+  filterImagePlacements: () => filterImagePlacements,
+  findBestCombination: () => findBestCombination,
+  findClosestSnapPoint: () => findClosestSnapPoint,
+  findVariantForSelection: () => findVariantForSelection,
+  formatPrice: () => formatPrice,
+  formatValidationErrors: () => formatValidationErrors,
+  getDefaultVariantId: () => getDefaultVariantId,
+  getEffectiveAlignment: () => getEffectiveAlignment,
+  getIncompleteSelectionMessage: () => getIncompleteSelectionMessage,
+  getMissingSelections: () => getMissingSelections,
+  getOptionRenderType: () => getOptionRenderType,
+  getPricePreview: () => getPricePreview,
+  getProduct: () => getProduct,
+  getSelectionDisplayText: () => getSelectionDisplayText,
+  getSnapPoints: () => getSnapPoints,
+  getVariant: () => getVariant,
+  handleOptionChange: () => handleOptionChange,
+  isOptionAvailable: () => isOptionAvailable,
+  isSelectionComplete: () => isSelectionComplete,
+  isValidAlignment: () => isValidAlignment,
+  isValidTileCount: () => isValidTileCount,
+  listProducts: () => listProducts,
+  mockupUrl: () => mockupUrl,
+  normalizeChoice: () => normalizeChoice,
+  prepareOptionRenderData: () => prepareOptionRenderData,
+  registerStandardComponents: () => registerStandardComponents,
+  resolveBestCombination: () => resolveBestCombination,
+  resolveMockupConfig: () => resolveMockupConfig,
+  resolveMockupId: () => resolveMockupId,
+  resolveVariantId: () => resolveVariantId,
+  retryOperation: () => retryOperation,
+  simulateCartOperation: () => simulateCartOperation,
+  toCombinations: () => toCombinations,
+  toOptionAttributes: () => toOptionAttributes,
+  useVueAdapter: () => useFrameworkAdapter,
+  validateAlignment: () => validateAlignment,
+  validateDesignElement: () => validateDesignElement,
+  validateEffects: () => validateEffects,
+  validateImageUrl: () => validateImageUrl,
+  validateMockupOptions: () => validateMockupOptions,
+  validateProductSelection: () => validateProductSelection,
+  validateProductSpec: () => validateProductSpec,
+  validateRequiredOptions: () => validateRequiredOptions,
+  validateTileCount: () => validateTileCount,
+  withContext: () => withContext,
+  withErrorHandling: () => withErrorHandling,
+  withSyncErrorHandling: () => withSyncErrorHandling
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/validation.ts
+var import_zod = require("zod");
+var CatalogProductSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  name: import_zod.z.string(),
+  slug: import_zod.z.string(),
+  tags: import_zod.z.array(import_zod.z.string()).optional(),
+  price: import_zod.z.number().int(),
+  lowestPrice: import_zod.z.number().int().optional(),
+  highestPrice: import_zod.z.number().int().optional(),
+  mockups: import_zod.z.array(
+    import_zod.z.object({ id: import_zod.z.string(), ar: import_zod.z.number(), gvids: import_zod.z.array(import_zod.z.string()) })
+  ).optional(),
+  options: import_zod.z.object({
+    selected: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number(), import_zod.z.null()])).optional(),
+    // Accept any attribute object shape; upstream varies between choices-only and typed objects
+    attributes: import_zod.z.record(import_zod.z.string(), import_zod.z.any()).optional(),
+    combinations: import_zod.z.array(import_zod.z.any()).optional(),
+    attributesList: import_zod.z.array(import_zod.z.string()).optional()
+  }).optional(),
+  care_guide: import_zod.z.array(import_zod.z.string()).optional(),
+  description: import_zod.z.array(import_zod.z.string()).optional(),
+  key_features: import_zod.z.array(import_zod.z.string()).optional(),
+  days_to_deliver: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).optional(),
+  size_chart_data: import_zod.z.any().optional(),
+  ships_from_country: import_zod.z.string().optional(),
+  variants: import_zod.z.array(
+    import_zod.z.object({
+      gvid: import_zod.z.string(),
+      gvidForMockup: import_zod.z.string().nullable().optional(),
+      placements: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          width: import_zod.z.number().nullable(),
+          height: import_zod.z.number().nullable()
+        })
+      )
+    })
+  ).optional(),
+  placements: import_zod.z.array(
+    import_zod.z.object({
+      label: import_zod.z.string(),
+      type: import_zod.z.enum(["image", "color"]),
+      width: import_zod.z.number().int(),
+      height: import_zod.z.number().int(),
+      defaultScaleMode: import_zod.z.enum(["fill", "fit"]).optional(),
+      fitMarginTop: import_zod.z.number().int().optional(),
+      fitMarginRight: import_zod.z.number().int().optional(),
+      fitMarginBottom: import_zod.z.number().int().optional(),
+      fitMarginLeft: import_zod.z.number().int().optional(),
+      fitAlign: import_zod.z.string().optional(),
+      align: import_zod.z.string().optional(),
+      scale: import_zod.z.number().optional(),
+      offsetX: import_zod.z.number().optional(),
+      offsetY: import_zod.z.number().optional()
+    })
+  ).optional(),
+  defaultGvid: import_zod.z.string().optional()
+});
+
+// src/mockup/cache.ts
+var SignatureCache = class {
+  memoryCache = /* @__PURE__ */ new Map();
+  maxMemoryEntries;
+  maxLocalStorageEntries;
+  localStorageKey = "merchify_signature_cache";
+  localStorageAvailable;
+  constructor(maxMemoryEntries = 500, maxLocalStorageEntries = 100) {
+    this.maxMemoryEntries = maxMemoryEntries;
+    this.maxLocalStorageEntries = maxLocalStorageEntries;
+    this.localStorageAvailable = this.checkLocalStorageAvailability();
+    if (this.localStorageAvailable) {
+      this.loadFromLocalStorage();
+    }
+  }
+  checkLocalStorageAvailability() {
+    try {
+      const test = "__storage_test__";
+      localStorage.setItem(test, test);
+      localStorage.removeItem(test);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  loadFromLocalStorage() {
+    try {
+      const stored = localStorage.getItem(this.localStorageKey);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        if (Array.isArray(parsed)) {
+          parsed.forEach(([key, value]) => {
+            if (this.memoryCache.size < this.maxMemoryEntries) {
+              this.memoryCache.set(key, value);
+            }
+          });
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to load signature cache from localStorage:", error);
+    }
+  }
+  saveToLocalStorage() {
+    if (!this.localStorageAvailable) return;
+    try {
+      const entries = Array.from(this.memoryCache.entries()).sort((a, b) => b[1].timestamp - a[1].timestamp).slice(0, this.maxLocalStorageEntries);
+      localStorage.setItem(this.localStorageKey, JSON.stringify(entries));
+    } catch (error) {
+      console.warn("Failed to save signature cache to localStorage:", error);
+      this.localStorageAvailable = false;
+    }
+  }
+  get(key) {
+    const entry = this.memoryCache.get(key);
+    if (entry) {
+      entry.timestamp = Date.now();
+      this.memoryCache.delete(key);
+      this.memoryCache.set(key, entry);
+      return entry.url;
+    }
+    return null;
+  }
+  set(key, url) {
+    if (this.memoryCache.size >= this.maxMemoryEntries) {
+      const oldestKey = this.findOldestKey();
+      if (oldestKey) {
+        this.memoryCache.delete(oldestKey);
+      }
+    }
+    this.memoryCache.set(key, {
+      url,
+      timestamp: Date.now()
+    });
+    this.saveToLocalStorage();
+  }
+  findOldestKey() {
+    let oldestKey = null;
+    let oldestTime = Infinity;
+    for (const [key, entry] of this.memoryCache.entries()) {
+      if (entry.timestamp < oldestTime) {
+        oldestTime = entry.timestamp;
+        oldestKey = key;
+      }
+    }
+    return oldestKey;
+  }
+  clear() {
+    this.memoryCache.clear();
+    if (this.localStorageAvailable) {
+      try {
+        localStorage.removeItem(this.localStorageKey);
+      } catch (error) {
+        console.warn("Failed to clear localStorage cache:", error);
+      }
+    }
+  }
+  size() {
+    return this.memoryCache.size;
+  }
+};
+
+// 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 RATE_LIMIT_PER_MINUTE = 450;
+var RATE_LIMIT_PER_SECOND = 20;
+var MockupServiceImpl = class {
+  config;
+  cache;
+  rateLimitState;
+  fetch;
+  constructor(config2, 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 || ""
+    };
+    this.cache = new SignatureCache();
+    this.fetch = customFetch || fetch.bind(globalThis);
+    this.rateLimitState = {
+      perMinute: { count: 0, resetTime: Date.now() + 6e4 },
+      perSecond: { count: 0, resetTime: Date.now() + 1e3 }
+    };
+  }
+  async getMockupUrl(options) {
+    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");
+    }
+    this.checkRateLimits();
+    const relativeUrl = this.buildMockupUrlWithParams(options);
+    const cacheKey = `${relativeUrl}:${this.config.accountId}`;
+    const cachedUrl = this.cache.get(cacheKey);
+    if (cachedUrl) {
+      return cachedUrl;
+    }
+    const signedUrl = await this.getSignedUrl(relativeUrl);
+    this.cache.set(cacheKey, signedUrl);
+    this.incrementRateLimitCounters();
+    return signedUrl;
+  }
+  buildMockupUrlWithParams(options) {
+    const { design, product, effects, ar } = options;
+    const designBase64 = typeof window !== "undefined" && window.btoa ? window.btoa(JSON.stringify(design)) : Buffer.from(JSON.stringify(design)).toString("base64");
+    const encodedDesign = encodeURIComponent(designBase64);
+    let url = `/mockup?productId=${encodeURIComponent(product.productId)}`;
+    url += `&mockupId=${encodeURIComponent(product.mockupId)}`;
+    url += `&variantId=${encodeURIComponent(product.variantId)}`;
+    url += `&design=${encodedDesign}`;
+    url += `&width=${product.width}`;
+    if (effects?.grain) {
+      url += `&grain=${effects.grain}`;
+    }
+    if (ar && ar !== "16:9") {
+      url += `&ar=${encodeURIComponent(ar)}`;
+    }
+    if (product.optionSelections && Object.keys(product.optionSelections).length > 0) {
+      const optionSelectionsBase64 = typeof window !== "undefined" && window.btoa ? window.btoa(JSON.stringify(product.optionSelections)) : Buffer.from(JSON.stringify(product.optionSelections)).toString("base64");
+      url += `&optionSelections=${encodeURIComponent(optionSelectionsBase64)}`;
+    }
+    return url;
+  }
+  buildMockupUrl(options) {
+    const { design, product, effects } = options;
+    const pathSegments = ["m"];
+    pathSegments.push(product.productId);
+    pathSegments.push(product.mockupId);
+    pathSegments.push(product.variantId);
+    pathSegments.push(String(product.width));
+    const designParts = [];
+    for (const element of design) {
+      const part = this.encodeDesignElement(element);
+      designParts.push(part);
+    }
+    if (designParts.length > 0) {
+      pathSegments.push(designParts.join("_"));
+    } else {
+      pathSegments.push("");
+    }
+    if (effects?.grain) {
+      pathSegments.push(`g${effects.grain}`);
+    }
+    return "/" + pathSegments.join("/");
+  }
+  encodeDesignElement(element) {
+    const parts = [];
+    if (element.type === "image") {
+      const encodedUrl = this.encodeImageUrl(element.imageUrl);
+      parts.push(encodedUrl);
+      parts.push(element.placement);
+      parts.push(String(element.width));
+      parts.push(String(element.height));
+      parts.push(element.alignment);
+      if (element.tiles && element.tiles > 1) {
+        parts.push(`t${element.tiles}`);
+      }
+    } else if (element.type === "color") {
+      const colorCode = element.hex.replace("#", "");
+      parts.push(colorCode);
+      parts.push(element.placement);
+      parts.push(String(element.width));
+      parts.push(String(element.height));
+      parts.push(element.alignment);
+    }
+    return parts.join(",");
+  }
+  encodeImageUrl(url) {
+    if (typeof window !== "undefined" && window.btoa) {
+      const base64 = window.btoa(url);
+      return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+    } else {
+      const base64 = Buffer.from(url).toString("base64");
+      return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+    }
+  }
+  async getSignedUrl(relativeUrl) {
+    const urlWithAccountId = relativeUrl + (relativeUrl.includes("?") ? "&" : "?") + `accountId=${encodeURIComponent(this.config.accountId)}`;
+    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 {
+      const response = await this.fetch(signerUrl.toString(), {
+        method: "GET",
+        headers: {
+          "Accept": "application/json"
+        }
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to sign URL: ${response.statusText}`);
+      }
+      const data = await response.json();
+      const signedUrl = this.config.imageUrl + (data.urlWithSignature || data.url);
+      this.cache.set(cacheKey, signedUrl);
+      return signedUrl;
+    } catch (error) {
+      throw new Error(`Failed to get signed URL: ${error}`);
+    }
+  }
+  checkRateLimits() {
+    const now = Date.now();
+    if (now >= this.rateLimitState.perMinute.resetTime) {
+      this.rateLimitState.perMinute.count = 0;
+      this.rateLimitState.perMinute.resetTime = now + 6e4;
+    }
+    if (now >= this.rateLimitState.perSecond.resetTime) {
+      this.rateLimitState.perSecond.count = 0;
+      this.rateLimitState.perSecond.resetTime = now + 1e3;
+    }
+    if (this.rateLimitState.perMinute.count >= RATE_LIMIT_PER_MINUTE) {
+      throw new Error("Rate limit exceeded: Too many requests per minute");
+    }
+    if (this.rateLimitState.perSecond.count >= RATE_LIMIT_PER_SECOND) {
+      throw new Error("Rate limit exceeded: Too many requests per second");
+    }
+  }
+  incrementRateLimitCounters() {
+    this.rateLimitState.perMinute.count++;
+    this.rateLimitState.perSecond.count++;
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+};
+
+// src/dev-fetcher.ts
+function createDevFetcher(baseUrl) {
+  return async function devFetch(input, init) {
+    const url = input.startsWith("http") ? input : `${baseUrl}${input}`;
+    const res = await fetch(url, init);
+    return res;
+  };
+}
+
+// src/state/optionSelection.ts
+function resolveBestCombination(selection, attributes, combinations) {
+  const relevant = Object.fromEntries(
+    Object.entries(selection).filter(
+      ([k]) => attributes[k]?.affectsCombinations !== false
+    )
+  );
+  let best;
+  for (const combo of combinations) {
+    let score = 0;
+    for (const [k, v] of Object.entries(relevant)) {
+      if (combo[k] === v) score += 100;
+      else score -= 1;
+    }
+    if (!best || score > best.score) best = { combo, score };
+  }
+  return best?.combo;
+}
+function computeDisabledChoices(selection, attributes, combinations) {
+  const disabledByKey = {};
+  const attributeKeys = Object.keys(attributes || {});
+  for (const key of attributeKeys) {
+    const attr = attributes[key];
+    if (!attr) continue;
+    if (attr.affectsCombinations === false) {
+      disabledByKey[key] = [];
+      continue;
+    }
+    const disabledChoices = [];
+    for (const choice of attr.choices || []) {
+      const candidateSelection = {
+        ...selection,
+        [key]: choice
+      };
+      const relevantEntries = Object.entries(candidateSelection).filter(
+        ([k]) => attributes[k]?.affectsCombinations !== false
+      );
+      const hasViable = combinations.some(
+        (combo) => relevantEntries.every(([k, v]) => combo[k] === v)
+      );
+      if (!hasViable) disabledChoices.push(choice);
+    }
+    disabledByKey[key] = disabledChoices;
+  }
+  return disabledByKey;
+}
+function deriveDefaultSelection(attributes, combinations) {
+  const best = resolveBestCombination({}, attributes, combinations);
+  const selection = {};
+  if (best) {
+    for (const [key, attr] of Object.entries(attributes)) {
+      if (attr.affectsCombinations !== false) {
+        const value = best[key];
+        if (typeof value === "string") {
+          selection[key] = value;
+        }
+      }
+    }
+  }
+  for (const [key, attr] of Object.entries(attributes)) {
+    if (!selection[key]) {
+      if (attr.type === "color-picker") {
+        selection[key] = "#000000";
+      } else if (attr.choices && attr.choices.length > 0) {
+        const firstChoice = attr.choices[0];
+        selection[key] = typeof firstChoice === "string" ? firstChoice : firstChoice.label || "";
+      }
+    }
+  }
+  return selection;
+}
+function getPricePreview(selection, attributes, combinations) {
+  const best = resolveBestCombination(selection, attributes, combinations);
+  const price = best?.price;
+  return typeof price === "number" ? price : void 0;
+}
+function findBestCombination(selection, combinations, attributes) {
+  const relevantSelection = {};
+  if (attributes) {
+    Object.entries(selection).forEach(([key, value]) => {
+      const attr = attributes[key];
+      if (attr && attr.affectsCombinations !== false) {
+        relevantSelection[key] = value;
+      }
+    });
+  } else {
+    Object.assign(relevantSelection, selection);
+  }
+  return combinations.find((combo) => {
+    return Object.entries(relevantSelection).every(([key, value]) => {
+      return !combo[key] || combo[key] === value;
+    });
+  });
+}
+function isOptionAvailable(optionName, attributeName, selection, attributes, combinations) {
+  if (!combinations || combinations.length === 0 || !attributes[attributeName]?.affectsCombinations) {
+    return true;
+  }
+  return combinations.some((combination) => {
+    if (combination[attributeName] !== optionName) {
+      return false;
+    }
+    return Object.entries(selection).every(
+      ([key, value]) => key === attributeName || // Skip the group we're checking
+      value === void 0 || value === "" || // Skip unselected options
+      !attributes[key]?.affectsCombinations || // Skip attributes that don't affect combinations
+      combination[key] === value
+      // Check if the selection matches
+    );
+  });
+}
+
+// src/state/manager.ts
+var StateManager = class {
+  constructor(options) {
+    this.options = options;
+    this.state = this.loadPersistedState() || options.initialState;
+    this.middleware = options.middleware || [];
+    if (options.debug) {
+      this.middleware.push({
+        name: "debug",
+        afterUpdate: (state, prevState) => {
+        }
+      });
+    }
+  }
+  state;
+  prevState;
+  subscribers = /* @__PURE__ */ new Set();
+  selectorSubscribers = /* @__PURE__ */ new Map();
+  updateQueue = [];
+  isUpdating = false;
+  middleware;
+  /**
+   * Get current state
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Update state with partial updates or updater function
+   */
+  setState(updater) {
+    const update = typeof updater === "function" ? updater(this.state) : updater;
+    this.updateQueue.push(update);
+    if (!this.isUpdating) {
+      this.processUpdateQueue();
+    }
+  }
+  /**
+   * Subscribe to all state changes
+   */
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    callback(this.state);
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+  /**
+   * Subscribe to specific state selections (computed values)
+   */
+  subscribeToSelector(selector, callback) {
+    if (!this.selectorSubscribers.has(selector)) {
+      this.selectorSubscribers.set(selector, /* @__PURE__ */ new Set());
+    }
+    const subscribers = this.selectorSubscribers.get(selector);
+    subscribers.add(callback);
+    callback(selector(this.state));
+    return () => {
+      subscribers.delete(callback);
+      if (subscribers.size === 0) {
+        this.selectorSubscribers.delete(selector);
+      }
+    };
+  }
+  /**
+   * Reset state to initial value
+   */
+  reset() {
+    this.setState(this.options.initialState);
+  }
+  /**
+   * Get a derived value from state
+   */
+  select(selector) {
+    return selector(this.state);
+  }
+  processUpdateQueue() {
+    if (this.updateQueue.length === 0) return;
+    this.isUpdating = true;
+    this.prevState = { ...this.state };
+    let newState = { ...this.state };
+    while (this.updateQueue.length > 0) {
+      const update = this.updateQueue.shift();
+      let processedUpdate = update;
+      for (const mw of this.middleware) {
+        if (mw.beforeUpdate) {
+          processedUpdate = mw.beforeUpdate(newState, processedUpdate);
+        }
+      }
+      newState = { ...newState, ...processedUpdate };
+    }
+    if (this.hasStateChanged(this.state, newState)) {
+      this.state = newState;
+      this.persistState();
+      this.notifySubscribers();
+      for (const mw of this.middleware) {
+        if (mw.afterUpdate) {
+          mw.afterUpdate(this.state, this.prevState);
+        }
+      }
+    }
+    this.isUpdating = false;
+    if (this.updateQueue.length > 0) {
+      this.processUpdateQueue();
+    }
+  }
+  notifySubscribers() {
+    this.subscribers.forEach((subscriber) => {
+      try {
+        subscriber(this.state, this.prevState);
+      } catch (error) {
+        console.error("[StateManager] Subscriber error:", error);
+      }
+    });
+    this.selectorSubscribers.forEach((subscribers, selector) => {
+      const currentValue = selector(this.state);
+      const prevValue = this.prevState ? selector(this.prevState) : void 0;
+      if (currentValue !== prevValue) {
+        subscribers.forEach((callback) => {
+          try {
+            callback(currentValue, prevValue);
+          } catch (error) {
+            console.error("[StateManager] Selector subscriber error:", error);
+          }
+        });
+      }
+    });
+  }
+  hasStateChanged(prev, next) {
+    return JSON.stringify(prev) !== JSON.stringify(next);
+  }
+  getStateDiff(prev, next) {
+    const diff = {};
+    for (const key in next) {
+      if (prev[key] !== next[key]) {
+        diff[key] = next[key];
+      }
+    }
+    return diff;
+  }
+  persistState() {
+    if (this.options.persist) {
+      const storage = this.options.persist.storage || localStorage;
+      try {
+        storage.setItem(
+          this.options.persist.key,
+          JSON.stringify(this.state)
+        );
+      } catch (error) {
+        console.error("[StateManager] Failed to persist state:", error);
+      }
+    }
+  }
+  loadPersistedState() {
+    if (!this.options.persist) return null;
+    const storage = this.options.persist.storage || localStorage;
+    try {
+      const stored = storage.getItem(this.options.persist.key);
+      return stored ? JSON.parse(stored) : null;
+    } catch (error) {
+      console.error("[StateManager] Failed to load persisted state:", error);
+      return null;
+    }
+  }
+};
+function createStateStore(initialState, options) {
+  return new StateManager({
+    ...options,
+    initialState
+  });
+}
+function createStateHook(store) {
+  return {
+    getState: () => store.getState(),
+    setState: (updater) => store.setState(updater),
+    subscribe: (callback) => store.subscribe(callback),
+    select: (selector) => store.select(selector),
+    reset: () => store.reset()
+  };
+}
+
+// src/rendering/productTitle.ts
+function describeProductTitle(options) {
+  return {
+    type: "product-title",
+    product: options.product,
+    showPrice: options.showPrice ?? true,
+    showDescription: options.showDescription ?? true,
+    size: options.size ?? "md",
+    className: options.className
+  };
+}
+
+// src/rendering/productPrice.ts
+function formatPrice(cents, locale, currency, showCurrency) {
+  const amount = cents / 100;
+  if (showCurrency) {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency
+    }).format(amount);
+  }
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(amount);
+}
+function describeProductPrice(options, contextPrice) {
+  const displayPrice = options.price ?? contextPrice;
+  if (!displayPrice) {
+    return null;
+  }
+  return {
+    type: "price",
+    price: displayPrice,
+    currency: options.currency || "USD",
+    locale: options.locale || "en-US",
+    showCurrency: options.showCurrency !== false,
+    className: options.className
+  };
+}
+
+// src/rendering/productImage.ts
+function describeProductImage(options, contextImage) {
+  const src = options.src || contextImage?.src;
+  if (!src) {
+    return null;
+  }
+  return {
+    type: "image",
+    src,
+    alt: options.alt || contextImage?.alt || "Product image",
+    width: options.width,
+    height: options.height,
+    aspectRatio: options.aspectRatio || "1",
+    className: options.className
+  };
+}
+
+// src/rendering/productOptions.ts
+function describeProductOptions(options) {
+  return {
+    type: "product-options",
+    options: options.options,
+    selectedOptions: options.selectedOptions || {},
+    className: options.className
+  };
+}
+
+// src/rendering/productArtAlignment.ts
+function getSnapPoints(containerSize, maskDimensions, effectiveAlignment) {
+  const maxDistance = effectiveAlignment === "horizontal" ? (containerSize.width - maskDimensions.width) / 2 : (containerSize.height - maskDimensions.height) / 2;
+  const containerDimension = effectiveAlignment === "horizontal" ? containerSize.width : containerSize.height;
+  const movementRatio = maxDistance / containerDimension;
+  const useCenterOnly = movementRatio < 0.05;
+  const useThreePoints = movementRatio < 0.15;
+  if (effectiveAlignment === "horizontal") {
+    if (useCenterOnly) {
+      return {
+        center: 0
+      };
+    }
+    if (useThreePoints) {
+      return {
+        "far-left": -maxDistance,
+        center: 0,
+        "far-right": maxDistance
+      };
+    }
+    return {
+      "far-left": -maxDistance,
+      left: -maxDistance / 2,
+      center: 0,
+      right: maxDistance / 2,
+      "far-right": maxDistance
+    };
+  }
+  if (useCenterOnly) {
+    return {
+      center: 0
+    };
+  }
+  if (useThreePoints) {
+    return {
+      "far-top": -maxDistance,
+      center: 0,
+      "far-bottom": maxDistance
+    };
+  }
+  return {
+    "far-top": -maxDistance,
+    top: -maxDistance / 2,
+    center: 0,
+    bottom: maxDistance / 2,
+    "far-bottom": maxDistance
+  };
+}
+function getEffectiveAlignment(artworkAspectRatio, maskAspectRatio) {
+  if (artworkAspectRatio < maskAspectRatio) {
+    return "vertical";
+  }
+  return "horizontal";
+}
+function describeProductArtAlignment(options, context) {
+  const src = options.src || context?.product?.mockupUrl;
+  if (!src) {
+    return null;
+  }
+  let maskAspectRatio = options.maskAspectRatio;
+  if (!maskAspectRatio && context?.product?.placements) {
+    const placements = context.product.placements;
+    let placement;
+    if (options.placement) {
+      placement = placements.find((p) => p.label === options.placement);
+    } else {
+      placement = placements.find((p) => p.type === "image") || placements[0];
+    }
+    if (placement && placement.width && placement.height) {
+      maskAspectRatio = placement.width / placement.height;
+    }
+  }
+  if (!maskAspectRatio) {
+    maskAspectRatio = 1;
+  }
+  const artworkAspectRatio = options.artworkAspectRatio || context?.product?.aspectRatio || 1;
+  const alignment = options.alignment || context?.selection?.alignment || "center";
+  const effectiveAlignment = getEffectiveAlignment(artworkAspectRatio, maskAspectRatio);
+  return {
+    type: "art-alignment",
+    src,
+    artworkAspectRatio,
+    maskAspectRatio,
+    effectiveAlignment,
+    alignment,
+    className: options.className
+  };
+}
+function findClosestSnapPoint(position, containerSize, maskDimensions, effectiveAlignment) {
+  const snapPoints = getSnapPoints(containerSize, maskDimensions, effectiveAlignment);
+  let closestKey = "center";
+  let closestDistance = Infinity;
+  for (const [key, value] of Object.entries(snapPoints)) {
+    const distance = Math.abs(position - value);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestKey = key;
+    }
+  }
+  return closestKey;
+}
+
+// src/rendering/artSelector.ts
+function describeArtSelector(options, context) {
+  const artworks = [];
+  const defaultArtworks = [
+    "https://images.unsplash.com/photo-1533738363-b7f9aef128ce?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1754999961467-0d6e4c2551e3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+  ];
+  const sources = options.artworks || defaultArtworks;
+  sources.forEach((src) => {
+    artworks.push({
+      type: "regular",
+      src
+    });
+  });
+  return {
+    type: "art-selector",
+    artworks,
+    selectedArtwork: context?.selectedArtwork || null,
+    className: options.className
+  };
+}
+
+// src/rendering/optionSelection.ts
+function getOptionRenderType(attr) {
+  if (attr.type === "color-picker") {
+    return "color-picker";
+  }
+  const hasVisualChoices = attr.choices?.some(
+    (choice) => typeof choice === "object" && (choice.hex || choice.imageUrl)
+  );
+  if (hasVisualChoices) {
+    return "swatch";
+  }
+  return "select";
+}
+function normalizeChoice(choice) {
+  if (typeof choice === "string") {
+    return { label: choice, value: choice };
+  }
+  return {
+    ...choice,
+    value: choice.value || choice.label
+  };
+}
+function prepareOptionRenderData(attributes, selection, combinations) {
+  return Object.entries(attributes).map(([key, attr]) => {
+    const currentValue = selection[key] || "";
+    const renderType = getOptionRenderType(attr);
+    const choices = (attr.choices || []).map((choice) => {
+      const normalized = normalizeChoice(choice);
+      const value = normalized.value || normalized.label;
+      const isAvailable = isOptionAvailable(
+        value,
+        key,
+        selection,
+        attributes,
+        combinations
+      );
+      return {
+        value,
+        label: normalized.label,
+        disabled: !isAvailable,
+        selected: currentValue === value,
+        hex: normalized.hex,
+        imageUrl: normalized.imageUrl
+      };
+    });
+    return {
+      key,
+      label: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
+      type: renderType,
+      value: currentValue,
+      choices,
+      required: attr.affectsCombinations !== false
+    };
+  });
+}
+function handleOptionChange(optionKey, newValue, currentSelection, attributes) {
+  const newSelection = {
+    ...currentSelection,
+    [optionKey]: newValue
+  };
+  const clearedSelection = clearDependentSelections(
+    optionKey,
+    newSelection,
+    attributes
+  );
+  return clearedSelection;
+}
+function clearDependentSelections(changedKey, selection, attributes) {
+  return selection;
+}
+function validateRequiredOptions(selection, attributes) {
+  const missing = [];
+  for (const [key, attr] of Object.entries(attributes)) {
+    if (attr.affectsCombinations === false) continue;
+    const value = selection[key];
+    if (!value || value === "") {
+      missing.push(key);
+    }
+  }
+  return {
+    valid: missing.length === 0,
+    missing
+  };
+}
+function getSelectionDisplayText(selection, attributes) {
+  const parts = [];
+  for (const [key, value] of Object.entries(selection)) {
+    if (!value || value === "") continue;
+    const attr = attributes[key];
+    if (!attr) continue;
+    const choice = attr.choices?.find((c) => {
+      const normalized = normalizeChoice(c);
+      return (normalized.value || normalized.label) === value;
+    });
+    const label = choice ? normalizeChoice(choice).label : value;
+    parts.push(label);
+  }
+  return parts.join(" / ");
+}
+var ColorPickerUtils = {
+  /**
+   * Validates a hex color
+   */
+  isValidHex(hex) {
+    return /^#[0-9A-F]{6}$/i.test(hex);
+  },
+  /**
+   * Converts hex to RGB
+   */
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null;
+  },
+  /**
+   * Gets contrast color for text on background
+   */
+  getContrastColor(hex) {
+    const rgb = this.hexToRgb(hex);
+    if (!rgb) return "black";
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance > 0.5 ? "black" : "white";
+  }
+};
+var SwatchUtils = {
+  /**
+   * Gets swatch style object
+   */
+  getSwatchStyle(choice) {
+    const style = {};
+    if (choice.imageUrl) {
+      style.backgroundImage = `url(${choice.imageUrl})`;
+      style.backgroundSize = "cover";
+      style.backgroundPosition = "center";
+      style.border = "1px solid #e2e8f0";
+    } else if (choice.hex) {
+      style.backgroundColor = choice.hex;
+      style.border = "1px solid #e2e8f0";
+    } else {
+      style.border = "1px solid #e2e8f0";
+      style.display = "flex";
+      style.alignItems = "center";
+      style.justifyContent = "center";
+    }
+    if (choice.disabled) {
+      style.opacity = "0.5";
+      style.cursor = "not-allowed";
+    }
+    if (choice.selected) {
+      style.boxShadow = "0 0 0 2px #3b82f6";
+    }
+    return style;
+  },
+  /**
+   * Gets swatch class names
+   */
+  getSwatchClasses(choice) {
+    const classes = ["option-swatch"];
+    if (choice.disabled) classes.push("option-swatch--disabled");
+    if (choice.selected) classes.push("option-swatch--selected");
+    if (choice.hex) classes.push("option-swatch--color");
+    if (choice.imageUrl) classes.push("option-swatch--image");
+    return classes;
+  }
+};
+
+// src/constants/mockup.ts
+var DEFAULT_ARTWORK_URL = "https://images.unsplash.com/photo-1533738363-b7f9aef128ce?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+var DEFAULT_COLOR = "#000000";
+var DEFAULT_PLACEMENT_DIMENSIONS = {
+  width: 1200,
+  height: 1600
+};
+var DEFAULT_ASPECT_RATIO = 1;
+
+// src/utils/url.ts
+function resolveUrlFromDOM(relativeUrl) {
+  if (typeof document === "undefined") return null;
+  const pathParts = relativeUrl.split("/");
+  const filename = pathParts[pathParts.length - 1];
+  if (!filename) return null;
+  const filenameWithoutExt = filename.replace(/\.[^.]+$/, "");
+  const images = document.querySelectorAll("img");
+  for (const img of images) {
+    const src = img.getAttribute("src");
+    if (!src) continue;
+    if (src.includes(filenameWithoutExt)) {
+      return src;
+    }
+  }
+  return null;
+}
+function normalizeImageUrl(url) {
+  if (!url) return null;
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    return url;
+  }
+  if (url.startsWith("data:")) {
+    return url;
+  }
+  if (url.startsWith("//")) {
+    return url;
+  }
+  if (typeof window !== "undefined") {
+    const domUrl = resolveUrlFromDOM(url);
+    if (domUrl) {
+      return domUrl;
+    }
+    try {
+      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.`
+        );
+      }
+      return absoluteUrl;
+    } catch (e) {
+      console.warn(`[merchify-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.`
+    );
+  }
+  return url;
+}
+
+// src/mockup/designGeneration.ts
+function createDesignForPlacements(placements, providedImages, context) {
+  const design = [];
+  const defaultImageUrl = context?.artworkSrc || context?.defaultImageUrl || null;
+  const imagesByPlacement = /* @__PURE__ */ new Map();
+  if (providedImages) {
+    providedImages.forEach((img) => {
+      if (img.placement) {
+        imagesByPlacement.set(img.placement, img);
+      }
+    });
+  }
+  const selection = context?.selection || {};
+  for (const placement of placements) {
+    const providedImage = imagesByPlacement.get(placement.label);
+    if (placement.type === "color") {
+      let selectedColor = DEFAULT_COLOR;
+      if (selection[placement.label]) {
+        const selectedValue = selection[placement.label];
+        if (typeof selectedValue === "string" && selectedValue.startsWith("#")) {
+          selectedColor = selectedValue;
+        } else {
+          const optionAttr = context?.attributes?.[placement.label];
+          if (optionAttr?.choices) {
+            const choice = optionAttr.choices.find(
+              (c) => typeof c === "object" && c.label === selectedValue
+            );
+            if (choice && typeof choice === "object" && "hex" in choice) {
+              selectedColor = choice.hex;
+            }
+          }
+        }
+      }
+      design.push({
+        type: "color",
+        hex: providedImage?.text || selectedColor,
+        imageUrl: "",
+        // Empty string for color type
+        placement: placement.label,
+        width: placement.width || 0,
+        height: placement.height || 0,
+        alignment: "center"
+      });
+    } else {
+      const placementDesign = context?.placementDesigns?.[placement.label];
+      const rawImageUrl = placementDesign?.imageUrl || providedImage?.imageUrl || defaultImageUrl;
+      const alignment = placementDesign?.alignment || providedImage?.alignment || "center";
+      const tiles = placementDesign?.tiles || providedImage?.tiles || context?.tiles;
+      const imageUrl = normalizeImageUrl(rawImageUrl);
+      if (imageUrl) {
+        const designElement = {
+          type: "image",
+          imageUrl,
+          placement: placement.label,
+          width: placement.width || DEFAULT_PLACEMENT_DIMENSIONS.width,
+          height: placement.height || DEFAULT_PLACEMENT_DIMENSIONS.height,
+          alignment
+        };
+        if (tiles && [0.25, 0.5, 1, 2, 4].includes(tiles)) {
+          designElement.tiles = tiles;
+        }
+        design.push(designElement);
+      }
+    }
+  }
+  if (placements.length === 0 && providedImages && providedImages.length > 0) {
+    return providedImages.map((img) => ({
+      type: img.imageUrl ? "image" : "color",
+      imageUrl: normalizeImageUrl(img.imageUrl) || "",
+      hex: img.text || DEFAULT_COLOR,
+      placement: img.placement || "Front",
+      width: img.size?.width || DEFAULT_PLACEMENT_DIMENSIONS.width,
+      height: img.size?.height || DEFAULT_PLACEMENT_DIMENSIONS.height,
+      alignment: img.alignment || "center"
+    }));
+  }
+  if (placements.length === 0 && (!providedImages || providedImages.length === 0)) {
+    const normalizedDefaultUrl = normalizeImageUrl(defaultImageUrl);
+    if (normalizedDefaultUrl) {
+      return [{
+        type: "image",
+        imageUrl: normalizedDefaultUrl,
+        placement: "Front",
+        width: DEFAULT_PLACEMENT_DIMENSIONS.width,
+        height: DEFAULT_PLACEMENT_DIMENSIONS.height,
+        alignment: "center"
+      }];
+    }
+    return [];
+  }
+  return design;
+}
+function filterImagePlacements(placements) {
+  return placements.filter((p) => p.type === "image" || p.type === null);
+}
+
+// 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 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;
+}
+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 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)}`;
+  } else {
+    console.warn("Live mode signature generation not implemented in mockupUrl");
+  }
+  return `${mockupBaseUrl}/mockup?${queryString}`;
+}
+function getVariant(selection, product) {
+  const combination = findBestCombination(
+    selection,
+    product.combinations,
+    product.attributes
+  );
+  const variantId = combination?.variantId;
+  let mockupId;
+  if (variantId && product.mockups && product.mockups.length > 0) {
+    const mockupForVariant = product.mockups.find(
+      (m) => m.gvids && m.gvids.includes(variantId)
+    );
+    mockupId = mockupForVariant?.id || product.mockups[0].id;
+  }
+  return {
+    variantId,
+    mockupId,
+    price: combination?.price,
+    combination
+  };
+}
+function resolveVariantId(context, providedGvid, providedVariantId) {
+  if (providedGvid) return providedGvid;
+  if (providedVariantId) return providedVariantId;
+  if (context?.combinations && context.combinations.length > 0 && context?.selection) {
+    const best = findBestCombination(
+      context.selection,
+      context.combinations,
+      context.optionAttributes || context.attributes
+    );
+    if (best?.variantId) {
+      return best.variantId;
+    } else if (context.combinations[0]?.variantId) {
+      return context.combinations[0].variantId;
+    }
+  } else if (context?.combinations && context.combinations.length > 0) {
+    return context.combinations[0].variantId || "default";
+  } else if (context?.product?.variants && context.product.variants.length > 0) {
+    return context.product.variants[0].gvid || "default";
+  }
+  if (context?.product) {
+    const defaultGvid = context.product.defaultGvid;
+    const firstVariant = context.product.variants?.[0];
+    return defaultGvid || firstVariant?.gvid || "default";
+  }
+  return "default";
+}
+function resolveMockupId(context, variantId, providedMockupId) {
+  if (providedMockupId) return providedMockupId;
+  if (context?.product?.mockups?.length) {
+    if (variantId) {
+      const mockupForVariant = context.product.mockups.find(
+        (m) => m.gvids && m.gvids.includes(variantId)
+      );
+      if (mockupForVariant) {
+        return mockupForVariant.id;
+      }
+    }
+    return context.product.mockups[0].id;
+  }
+  return null;
+}
+
+// src/product/dataTransformation.ts
+function toOptionAttributes(product) {
+  const attrs = {};
+  const src = product?.options?.attributes;
+  if (src && typeof src === "object") {
+    for (const key of Object.keys(src)) {
+      const a = src[key] || {};
+      const choices = Array.isArray(a.choices) ? a.choices.map((c) => {
+        if (typeof c === "string") {
+          return { label: c };
+        }
+        return c;
+      }) : Array.isArray(a) ? a.map((x) => typeof x === "string" ? { label: x } : x) : [];
+      attrs[key] = {
+        key,
+        affectsCombinations: a.affectsCombinations !== false,
+        choices,
+        type: a.type
+        // Preserve the type (e.g., 'color-picker')
+      };
+    }
+  }
+  return attrs;
+}
+function toCombinations(product) {
+  const combos = product?.options?.combinations || [];
+  if (Array.isArray(combos)) return combos;
+  return [];
+}
+function extractProductId(product) {
+  if (!product) return void 0;
+  return product.id || product.productId || void 0;
+}
+function getDefaultVariantId(product) {
+  if (!product) return "default";
+  const defaultGvid = product.defaultGvid;
+  const firstVariant = product.variants?.[0];
+  return defaultGvid || firstVariant?.gvid || "default";
+}
+
+// src/product/validation.ts
+function validateProductSelection(attributes, selection, combinations) {
+  if (!attributes || Object.keys(attributes).length === 0) {
+    return true;
+  }
+  const allRequiredSelected = Object.keys(attributes).every((key) => {
+    const attr = attributes[key];
+    if (attr.optional) return true;
+    const hasSelection = selection[key] && selection[key] !== "";
+    return hasSelection;
+  });
+  if (!allRequiredSelected) {
+    return false;
+  }
+  if (!combinations || combinations.length === 0) {
+    return true;
+  }
+  return combinations.some((combination) => {
+    return Object.entries(selection).every(([key, value]) => {
+      if (attributes[key] && attributes[key].affectsCombinations === false) {
+        return true;
+      }
+      return !value || value === "" || combination[key] === value;
+    });
+  });
+}
+function getMissingSelections(attributes, selection) {
+  const missing = [];
+  Object.keys(attributes).forEach((key) => {
+    const attr = attributes[key];
+    if (attr.optional) return;
+    if (!selection[key] || selection[key] === "") {
+      missing.push(key);
+    }
+  });
+  return missing;
+}
+function isSelectionComplete(attributes, selection) {
+  return getMissingSelections(attributes, selection).length === 0;
+}
+function getIncompleteSelectionMessage(attributes, selection) {
+  const missing = getMissingSelections(attributes, selection);
+  if (missing.length === 0) {
+    return "";
+  }
+  if (missing.length === 1) {
+    return `Please select ${missing[0]}`;
+  }
+  const lastItem = missing.pop();
+  return `Please select ${missing.join(", ")} and ${lastItem}`;
+}
+
+// src/validation/mockup.ts
+function validateImageUrl(url) {
+  const errors = [];
+  if (!url) {
+    errors.push({
+      field: "imageUrl",
+      message: "Image URL is required",
+      value: url
+    });
+  } else if (
+    // Allow absolute URLs
+    !url.startsWith("http://") && !url.startsWith("https://") && // Allow data URLs
+    !url.startsWith("data:") && // Allow protocol-relative URLs
+    !url.startsWith("//") && // Allow relative URLs (will be normalized later)
+    !url.startsWith("/") && !url.startsWith("./") && !url.startsWith("../")
+  ) {
+    errors.push({
+      field: "imageUrl",
+      message: "Image URL must be absolute (http://, https://), relative (/, ./, ../), protocol-relative (//), or a data URL",
+      value: url
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateAlignment(alignment) {
+  const errors = [];
+  const validAlignments = [
+    "center",
+    "top",
+    "far-top",
+    "bottom",
+    "far-bottom",
+    "left",
+    "far-left",
+    "right",
+    "far-right"
+  ];
+  if (alignment && !validAlignments.includes(alignment)) {
+    errors.push({
+      field: "alignment",
+      message: `Alignment must be one of: ${validAlignments.join(", ")}`,
+      value: alignment
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateTileCount(tiles) {
+  const errors = [];
+  const validTiles = [0.25, 0.5, 1, 2, 4];
+  if (tiles && !validTiles.includes(tiles)) {
+    errors.push({
+      field: "tiles",
+      message: `Tile count must be one of: ${validTiles.join(", ")}`,
+      value: tiles
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateDesignElement(element) {
+  const errors = [];
+  if (!element.placement) {
+    errors.push({
+      field: "placement",
+      message: "Placement is required for design element",
+      value: element
+    });
+  }
+  if (element.type === "image") {
+    if (!element.imageUrl) {
+      errors.push({
+        field: "imageUrl",
+        message: "Image URL is required for image type",
+        value: element
+      });
+    } else {
+      const urlValidation = validateImageUrl(element.imageUrl);
+      errors.push(...urlValidation.errors);
+    }
+    if (element.tiles) {
+      const tilesValidation = validateTileCount(element.tiles);
+      errors.push(...tilesValidation.errors);
+    }
+  } else if (element.type === "color") {
+    if (!element.hex) {
+      errors.push({
+        field: "hex",
+        message: "Hex color is required for color type",
+        value: element
+      });
+    } else if (!/^#[0-9A-Fa-f]{6}$/.test(element.hex)) {
+      errors.push({
+        field: "hex",
+        message: "Hex color must be in format #RRGGBB",
+        value: element.hex
+      });
+    }
+  }
+  if (element.alignment) {
+    const alignmentValidation = validateAlignment(element.alignment);
+    errors.push(...alignmentValidation.errors);
+  }
+  if (element.width && element.width <= 0) {
+    errors.push({
+      field: "width",
+      message: "Width must be greater than 0",
+      value: element.width
+    });
+  }
+  if (element.height && element.height <= 0) {
+    errors.push({
+      field: "height",
+      message: "Height must be greater than 0",
+      value: element.height
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateProductSpec(spec) {
+  const errors = [];
+  if (!spec.productId) {
+    errors.push({
+      field: "productId",
+      message: "Product ID is required",
+      value: spec
+    });
+  }
+  if (!spec.mockupId) {
+    errors.push({
+      field: "mockupId",
+      message: "Mockup ID is required",
+      value: spec
+    });
+  }
+  if (!spec.variantId) {
+    errors.push({
+      field: "variantId",
+      message: "Variant ID is required",
+      value: spec
+    });
+  }
+  if (!spec.width || spec.width <= 0) {
+    errors.push({
+      field: "width",
+      message: "Width must be greater than 0",
+      value: spec.width
+    });
+  } else if (spec.width > 4e3) {
+    errors.push({
+      field: "width",
+      message: "Width cannot exceed 4000 pixels",
+      value: spec.width
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateEffects(effects) {
+  const errors = [];
+  if (effects.grain !== void 0) {
+    if (effects.grain !== 1 && effects.grain !== 2) {
+      errors.push({
+        field: "grain",
+        message: "Grain effect must be 1 (light) or 2 (heavy)",
+        value: effects.grain
+      });
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateMockupOptions(options) {
+  const errors = [];
+  const productValidation = validateProductSpec(options.product);
+  errors.push(...productValidation.errors);
+  if (!options.design || options.design.length === 0) {
+    errors.push({
+      field: "design",
+      message: "At least one design element is required",
+      value: options.design
+    });
+  } else {
+    options.design.forEach((element, index) => {
+      const elementValidation = validateDesignElement(element);
+      elementValidation.errors.forEach((error) => {
+        errors.push({
+          ...error,
+          field: `design[${index}].${error.field}`
+        });
+      });
+    });
+  }
+  if (options.effects) {
+    const effectsValidation = validateEffects(options.effects);
+    errors.push(...effectsValidation.errors);
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function formatValidationErrors(errors) {
+  return errors.map((e) => `${e.field}: ${e.message}`).join("\n");
+}
+function isValidAlignment(value) {
+  const validAlignments = [
+    "center",
+    "top",
+    "far-top",
+    "bottom",
+    "far-bottom",
+    "left",
+    "far-left",
+    "right",
+    "far-right"
+  ];
+  return validAlignments.includes(value);
+}
+function isValidTileCount(value) {
+  const validTiles = [0.25, 0.5, 1, 2, 4];
+  return validTiles.includes(value);
+}
+
+// src/cart/operations.ts
+function createCartDetail(options) {
+  const { productId, quantity = 1, selection, combinations, attributes } = options;
+  if (!validateProductSelection(attributes, selection, combinations)) {
+    return null;
+  }
+  const bestCombination = findBestCombination(selection, combinations, attributes);
+  return {
+    productId,
+    variantId: bestCombination?.variantId,
+    quantity,
+    selection,
+    price: bestCombination?.price,
+    attributes: Object.fromEntries(
+      Object.entries(selection).map(([key, value]) => {
+        const attr = attributes[key];
+        return [key, {
+          value,
+          affectsCombinations: attr?.affectsCombinations !== false,
+          type: attr?.type
+        }];
+      })
+    )
+  };
+}
+function findVariantForSelection(selection, combinations, attributes) {
+  const bestCombination = findBestCombination(selection, combinations, attributes);
+  return bestCombination?.variantId;
+}
+function createAddToCartEvent(cartDetail) {
+  return {
+    detail: {
+      productId: cartDetail.productId,
+      variantId: cartDetail.variantId,
+      quantity: cartDetail.quantity,
+      selection: cartDetail.selection,
+      price: cartDetail.price,
+      timestamp: Date.now()
+    },
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  };
+}
+async function simulateCartOperation(duration = 1e3) {
+  return new Promise((resolve) => setTimeout(resolve, duration));
+}
+function createAddToCartHandler(options) {
+  return async function handleAddToCart(productId, selection, combinations, attributes, quantity = 1) {
+    try {
+      if (options.onValidate && !options.onValidate()) {
+        return null;
+      }
+      const cartDetail = createCartDetail({
+        productId,
+        quantity,
+        selection,
+        combinations,
+        attributes
+      });
+      if (!cartDetail) {
+        throw new Error("Invalid selection");
+      }
+      options.onStart?.();
+      if (options.simulateDelay) {
+        await simulateCartOperation(options.simulateDelay);
+      }
+      options.onSuccess?.(cartDetail);
+      return cartDetail;
+    } catch (error) {
+      options.onError?.(error);
+      return null;
+    }
+  };
+}
+
+// src/error/handling.ts
+var ErrorManager = class {
+  constructor(context, onError, onClear) {
+    this.context = context;
+    this.onError = onError;
+    this.onClear = onClear;
+  }
+  lastError = null;
+  errorCount = 0;
+  maxRetries = 3;
+  handle(error) {
+    this.lastError = error;
+    this.errorCount++;
+    if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+      console.error(`[${this.context.component}] ${this.context.operation}:`, error);
+      if (this.context.metadata) {
+        console.error("Error metadata:", this.context.metadata);
+      }
+    }
+    this.onError?.(error, this.context);
+  }
+  async handleAsync(error) {
+    this.handle(error);
+  }
+  clear() {
+    this.lastError = null;
+    this.errorCount = 0;
+    this.onClear?.();
+  }
+  getLastError() {
+    return this.lastError;
+  }
+  canRetry() {
+    return this.context.retryable !== false && this.errorCount < this.maxRetries;
+  }
+  getUserMessage() {
+    if (this.context.userMessage) {
+      return this.context.userMessage;
+    }
+    const operationMessages = {
+      "fetch-product": "Unable to load product information",
+      "generate-mockup": "Unable to generate product preview",
+      "add-to-cart": "Unable to add item to cart",
+      "update-selection": "Unable to update selection",
+      "load-image": "Unable to load image"
+    };
+    return operationMessages[this.context.operation] || "An error occurred";
+  }
+};
+function createErrorHandler(context, callbacks) {
+  const manager = new ErrorManager(context, callbacks?.onError, callbacks?.onClear);
+  return {
+    handle: (error) => manager.handle(error),
+    handleAsync: (error) => manager.handleAsync(error),
+    clear: () => manager.clear(),
+    getLastError: () => manager.getLastError(),
+    canRetry: () => manager.canRetry()
+  };
+}
+async function withErrorHandling(operation, errorHandler, options) {
+  try {
+    errorHandler.clear();
+    return await operation();
+  } catch (error) {
+    errorHandler.handle(error);
+    if (options?.retry && errorHandler.canRetry()) {
+      if (options.retryDelay) {
+        await new Promise((resolve) => setTimeout(resolve, options.retryDelay));
+      }
+      return withErrorHandling(operation, errorHandler, {
+        ...options,
+        retry: false
+        // Prevent infinite recursion
+      });
+    }
+    if (options?.fallback !== void 0) {
+      return options.fallback;
+    }
+    return null;
+  }
+}
+function withSyncErrorHandling(operation, errorHandler, fallback) {
+  try {
+    errorHandler.clear();
+    return operation();
+  } catch (error) {
+    errorHandler.handle(error);
+    return fallback !== void 0 ? fallback : null;
+  }
+}
+async function retryOperation(operation, options = {}) {
+  const maxAttempts = options.maxAttempts || 3;
+  const baseDelay = options.delay || 1e3;
+  let lastError;
+  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+    try {
+      return await operation();
+    } catch (error) {
+      lastError = error;
+      if (attempt < maxAttempts) {
+        options.onRetry?.(attempt, lastError);
+        const delay = options.backoff ? baseDelay * Math.pow(2, attempt - 1) : baseDelay;
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+  }
+  throw lastError;
+}
+
+// src/context/synchronization.ts
+var ContextSynchronizer = class {
+  constructor(options = {}) {
+    this.options = options;
+    this.batchDelay = options.batchDelay || 0;
+  }
+  subscribers = /* @__PURE__ */ new Set();
+  currentContext;
+  previousContext;
+  updateTimer;
+  pendingUpdate;
+  batchDelay;
+  /**
+   * Subscribe to context changes
+   */
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    if (this.currentContext !== void 0) {
+      callback(this.currentContext, this.previousContext);
+    }
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+  /**
+   * Update context with optional batching
+   */
+  updateContext(context) {
+    if (this.hasContextChanged(this.currentContext, context)) {
+      if (this.batchDelay > 0) {
+        this.scheduleBatchedUpdate(context);
+      } else {
+        this.applyContextUpdate(context);
+      }
+    }
+  }
+  /**
+   * Force immediate context update (bypasses batching)
+   */
+  forceUpdate(context) {
+    this.clearPendingUpdate();
+    this.applyContextUpdate(context);
+  }
+  /**
+   * Get current context
+   */
+  getContext() {
+    return this.currentContext;
+  }
+  /**
+   * Clear all subscribers
+   */
+  clear() {
+    this.clearPendingUpdate();
+    this.subscribers.clear();
+    this.previousContext = this.currentContext;
+    this.currentContext = void 0;
+  }
+  hasContextChanged(prev, next) {
+    if (prev === void 0) return true;
+    if (prev === next) return false;
+    if (this.options.comparator) {
+      return !this.options.comparator(prev, next);
+    }
+    if (typeof prev === "object" && typeof next === "object") {
+      return !this.deepEqual(prev, next);
+    }
+    return prev !== next;
+  }
+  scheduleBatchedUpdate(context) {
+    this.pendingUpdate = context;
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer);
+    }
+    this.updateTimer = setTimeout(() => {
+      if (this.pendingUpdate !== void 0) {
+        this.applyContextUpdate(this.pendingUpdate);
+        this.pendingUpdate = void 0;
+      }
+      this.updateTimer = void 0;
+    }, this.batchDelay);
+  }
+  clearPendingUpdate() {
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer);
+      this.updateTimer = void 0;
+    }
+    this.pendingUpdate = void 0;
+  }
+  applyContextUpdate(context) {
+    this.previousContext = this.currentContext;
+    this.currentContext = context;
+    if (this.options.debug) {
+    }
+    this.options.onUpdate?.(context);
+    this.subscribers.forEach((subscriber) => {
+      try {
+        subscriber(context, this.previousContext);
+      } catch (error) {
+        console.error("[ContextSynchronizer] Subscriber error:", error);
+      }
+    });
+  }
+  deepEqual(obj1, obj2) {
+    if (obj1 === obj2) return true;
+    if (obj1 == null || obj2 == null) return false;
+    if (typeof obj1 !== "object" || typeof obj2 !== "object") return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    for (const key of keys1) {
+      if (!keys2.includes(key)) return false;
+      if (!this.deepEqual(obj1[key], obj2[key])) return false;
+    }
+    return true;
+  }
+};
+var ContextBridge = class {
+  synchronizers = /* @__PURE__ */ new Map();
+  /**
+   * Register a synchronizer with a key
+   */
+  register(key, synchronizer) {
+    this.synchronizers.set(key, synchronizer);
+  }
+  /**
+   * Bridge context updates between synchronizers
+   */
+  bridge(fromKey, toKey) {
+    const from = this.synchronizers.get(fromKey);
+    const to = this.synchronizers.get(toKey);
+    if (!from || !to) {
+      throw new Error(`Cannot bridge: synchronizer not found`);
+    }
+    return from.subscribe((context) => {
+      to.updateContext(context);
+    });
+  }
+  /**
+   * Broadcast context to all registered synchronizers
+   */
+  broadcast(context, excludeKey) {
+    this.synchronizers.forEach((sync, key) => {
+      if (key !== excludeKey) {
+        sync.updateContext(context);
+      }
+    });
+  }
+};
+function createContextProvider(initialContext, options) {
+  const synchronizer = new ContextSynchronizer(options);
+  if (initialContext) {
+    synchronizer.updateContext(initialContext);
+  }
+  return {
+    subscribe: (callback) => synchronizer.subscribe(callback),
+    update: (context) => synchronizer.updateContext(context),
+    get: () => synchronizer.getContext(),
+    clear: () => synchronizer.clear()
+  };
+}
+
+// src/framework/events.ts
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  onceListeners = /* @__PURE__ */ new Map();
+  /**
+   * Add event listener
+   */
+  on(event, listener) {
+    const listeners = this.listeners.get(event) || /* @__PURE__ */ new Set();
+    listeners.add(listener);
+    this.listeners.set(event, listeners);
+    return () => this.off(event, listener);
+  }
+  /**
+   * Add one-time event listener
+   */
+  once(event, listener) {
+    const listeners = this.onceListeners.get(event) || /* @__PURE__ */ new Set();
+    listeners.add(listener);
+    this.onceListeners.set(event, listeners);
+    return () => this.off(event, listener);
+  }
+  /**
+   * Remove event listener
+   */
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+    this.onceListeners.get(event)?.delete(listener);
+  }
+  /**
+   * Emit event
+   */
+  emit(event, payload) {
+    const eventPayload = {
+      ...payload,
+      timestamp: Date.now()
+    };
+    const listeners = this.listeners.get(event);
+    if (listeners) {
+      listeners.forEach((listener) => listener(eventPayload));
+    }
+    const onceListeners = this.onceListeners.get(event);
+    if (onceListeners) {
+      onceListeners.forEach((listener) => listener(eventPayload));
+      this.onceListeners.delete(event);
+    }
+    return !!(listeners?.size || onceListeners?.size);
+  }
+  /**
+   * Remove all listeners for an event
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this.listeners.delete(event);
+      this.onceListeners.delete(event);
+    } else {
+      this.listeners.clear();
+      this.onceListeners.clear();
+    }
+  }
+  /**
+   * Get listener count
+   */
+  listenerCount(event) {
+    const regular = this.listeners.get(event)?.size || 0;
+    const once = this.onceListeners.get(event)?.size || 0;
+    return regular + once;
+  }
+};
+var ComponentEventManager = class {
+  emitter = new EventEmitter();
+  definitions = /* @__PURE__ */ new Map();
+  element;
+  constructor(element) {
+    this.element = element;
+  }
+  /**
+   * Define an event
+   */
+  define(definition) {
+    this.definitions.set(definition.name, definition);
+  }
+  /**
+   * Emit an event (works for both DOM and synthetic events)
+   */
+  emit(name, detail) {
+    const definition = this.definitions.get(name) || { name };
+    const handled = this.emitter.emit(name, { detail });
+    if (this.element) {
+      const event = new CustomEvent(name, {
+        detail,
+        bubbles: definition.bubbles !== false,
+        cancelable: definition.cancelable !== false,
+        composed: definition.composed !== false
+      });
+      this.element.dispatchEvent(event);
+    }
+    return handled;
+  }
+  /**
+   * Listen to an event
+   */
+  on(event, listener) {
+    return this.emitter.on(event, listener);
+  }
+  /**
+   * Listen to an event once
+   */
+  once(event, listener) {
+    return this.emitter.once(event, listener);
+  }
+  /**
+   * Remove listener
+   */
+  off(event, listener) {
+    this.emitter.off(event, listener);
+  }
+  /**
+   * Set DOM element for event dispatching
+   */
+  setElement(element) {
+    this.element = element;
+  }
+  /**
+   * Get all defined events
+   */
+  getDefinitions() {
+    return Array.from(this.definitions.values());
+  }
+};
+var StandardEvents = {
+  // Lifecycle events
+  mounted: { name: "mounted", bubbles: false },
+  unmounted: { name: "unmounted", bubbles: false },
+  updated: { name: "updated", bubbles: false },
+  // User interaction events
+  change: { name: "change", bubbles: true },
+  input: { name: "input", bubbles: true },
+  click: { name: "click", bubbles: true },
+  focus: { name: "focus", bubbles: false },
+  blur: { name: "blur", bubbles: false },
+  // Product-specific events
+  selectionChange: { name: "selection-change", bubbles: true },
+  priceUpdate: { name: "price-update", bubbles: true },
+  addToCart: { name: "add-to-cart", bubbles: true },
+  variantChange: { name: "variant-change", bubbles: true },
+  // Context events
+  contextRequest: { name: "context-request", bubbles: true },
+  contextProvide: { name: "context-provide", bubbles: false },
+  contextUpdate: { name: "context-update", bubbles: true }
+};
+var EventDelegator = class {
+  element;
+  handlers = /* @__PURE__ */ new Map();
+  constructor(element) {
+    this.element = element;
+  }
+  /**
+   * Add delegated event listener
+   */
+  delegate(eventType, selector, handler) {
+    const typeHandlers = this.handlers.get(eventType) || /* @__PURE__ */ new Map();
+    const delegatedHandler = (event) => {
+      const target = event.target;
+      const matches = target.matches(selector) || target.closest(selector);
+      if (matches) {
+        handler({
+          detail: event.detail,
+          target,
+          currentTarget: this.element,
+          timestamp: Date.now()
+        });
+      }
+    };
+    typeHandlers.set(selector, delegatedHandler);
+    this.handlers.set(eventType, typeHandlers);
+    this.element.addEventListener(eventType, delegatedHandler);
+    return () => {
+      this.element.removeEventListener(eventType, delegatedHandler);
+      typeHandlers.delete(selector);
+    };
+  }
+  /**
+   * Remove all delegated listeners
+   */
+  destroy() {
+    for (const [eventType, typeHandlers] of this.handlers) {
+      for (const handler of typeHandlers.values()) {
+        this.element.removeEventListener(eventType, handler);
+      }
+    }
+    this.handlers.clear();
+  }
+};
+function createEventManager(element) {
+  return new ComponentEventManager(element);
+}
+
+// src/context/product.ts
+var ProductContextManager = class extends EventEmitter {
+  context = {
+    optionAttributes: {},
+    combinations: [],
+    selection: {},
+    loading: false,
+    error: null
+  };
+  updateQueue = [];
+  updateTimer = null;
+  /**
+   * Get current context
+   */
+  getContext() {
+    return { ...this.context };
+  }
+  /**
+   * Set product data
+   */
+  setProduct(product) {
+    if (!product) {
+      this.updateContext({
+        product: void 0,
+        optionAttributes: {},
+        combinations: [],
+        selection: {}
+      });
+      return;
+    }
+    const optionAttributes = toOptionAttributes(product);
+    const combinations = toCombinations(product);
+    const selection = this.deriveSelection(optionAttributes, combinations);
+    this.updateContext({
+      product,
+      optionAttributes,
+      combinations,
+      selection,
+      loading: false,
+      error: null
+    });
+    this.emit("product-load", { detail: product });
+  }
+  /**
+   * Update selection
+   */
+  updateSelection(selection) {
+    const completeSelection = this.deriveSelection(
+      this.context.optionAttributes,
+      this.context.combinations,
+      selection
+    );
+    this.updateContext({ selection: completeSelection });
+    this.emit("selection-change", { detail: completeSelection });
+  }
+  /**
+   * Set loading state
+   */
+  setLoading(loading) {
+    this.updateContext({ loading });
+    this.emit("loading-change", { detail: loading });
+  }
+  /**
+   * Set error state
+   */
+  setError(error) {
+    this.updateContext({ error, loading: false });
+    this.emit("product-error", { detail: error });
+  }
+  /**
+   * Update context with batching
+   */
+  updateContext(updates) {
+    this.updateQueue.push(updates);
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer);
+    }
+    this.updateTimer = setTimeout(() => {
+      this.processBatchUpdate();
+    }, 0);
+  }
+  /**
+   * Process batched updates
+   */
+  processBatchUpdate() {
+    const merged = {};
+    for (const update of this.updateQueue) {
+      Object.assign(merged, update);
+    }
+    this.context = { ...this.context, ...merged };
+    this.updateQueue = [];
+    this.updateTimer = null;
+    this.emit("context-update", { detail: this.context });
+  }
+  /**
+   * Derive complete selection
+   */
+  deriveSelection(attributes, combinations, partial) {
+    if (!attributes || Object.keys(attributes).length === 0) {
+      return {};
+    }
+    const defaultSelection = deriveDefaultSelection(attributes, combinations);
+    if (partial) {
+      return { ...defaultSelection, ...partial };
+    }
+    return defaultSelection;
+  }
+  /**
+   * Subscribe to context updates
+   */
+  subscribe(callback) {
+    return this.on("context-update", (event) => callback(event.detail));
+  }
+  /**
+   * Reset context
+   */
+  reset() {
+    this.context = {
+      optionAttributes: {},
+      combinations: [],
+      selection: {},
+      loading: false,
+      error: null
+    };
+    this.updateQueue = [];
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer);
+      this.updateTimer = null;
+    }
+    this.removeAllListeners();
+  }
+};
+function createProductContext() {
+  return new ProductContextManager();
+}
+var ProductLoader = class {
+  context;
+  fetcher;
+  cache = /* @__PURE__ */ new Map();
+  currentRequest;
+  constructor(context, fetcher) {
+    this.context = context;
+    this.fetcher = fetcher;
+  }
+  /**
+   * Load product by ID
+   */
+  async loadProduct(productId, options) {
+    const cached = this.cache.get(productId);
+    if (cached) {
+      this.context.setProduct(cached);
+      return;
+    }
+    this.context.setLoading(true);
+    this.currentRequest = void 0;
+    const fetchRequest = this.fetchProduct(productId, options);
+    this.currentRequest = fetchRequest;
+    try {
+      await fetchRequest;
+    } catch (error) {
+      if (this.currentRequest === fetchRequest) {
+        this.context.setError(error);
+      }
+    }
+  }
+  /**
+   * Fetch product
+   */
+  async fetchProduct(productId, options) {
+    if (!this.fetcher) {
+      throw new Error("No fetcher configured");
+    }
+    const product = await this.fetcher.getProduct(productId, options);
+    this.cache.set(productId, product);
+    this.context.setProduct(product);
+  }
+  /**
+   * Load first available product
+   */
+  async loadFirstProduct(options) {
+    this.context.setLoading(true);
+    try {
+      if (!this.fetcher) {
+        throw new Error("No fetcher configured");
+      }
+      const { items } = await this.fetcher.listProducts(options);
+      const product = items?.[0];
+      if (product) {
+        const productId = product.id || product.productId;
+        if (productId) {
+          this.cache.set(productId, product);
+        }
+        this.context.setProduct(product);
+      } else {
+        throw new Error("No products available");
+      }
+    } catch (error) {
+      this.context.setError(error);
+    }
+  }
+  /**
+   * Clear cache
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+  /**
+   * Set fetcher
+   */
+  setFetcher(fetcher) {
+    this.fetcher = fetcher;
+  }
+};
+function createProductLoader(context, fetcher) {
+  return new ProductLoader(context, fetcher);
+}
+
+// src/context/provider.ts
+var UniversalContextProvider = class extends EventEmitter {
+  contextManager;
+  loader;
+  config;
+  consumers = /* @__PURE__ */ new Set();
+  initialized = false;
+  constructor(config2 = {}) {
+    super();
+    this.config = config2;
+    this.contextManager = new ProductContextManager();
+    this.loader = new ProductLoader(this.contextManager, config2.fetcher);
+    this.setupSubscriptions();
+  }
+  /**
+   * Initialize the provider
+   */
+  async initialize() {
+    if (this.initialized) return;
+    this.initialized = true;
+    if (this.config.autoLoad !== false) {
+      await this.loadProduct();
+    }
+  }
+  /**
+   * Load product data
+   */
+  async loadProduct(productId) {
+    const id = productId || this.config.productId;
+    if (id) {
+      await this.loader.loadProduct(id, {
+        baseUrl: this.config.endpoint,
+        mode: this.config.mode
+      });
+    } else {
+      await this.loader.loadFirstProduct({
+        baseUrl: this.config.endpoint,
+        mode: this.config.mode
+      });
+    }
+  }
+  /**
+   * Get current context
+   */
+  getContext() {
+    return this.contextManager.getContext();
+  }
+  /**
+   * Update selection
+   */
+  updateSelection(selection) {
+    this.contextManager.updateSelection(selection);
+  }
+  /**
+   * Register a consumer
+   */
+  registerConsumer(consumer) {
+    this.consumers.add(consumer);
+    const context = this.getContext();
+    consumer.onContextUpdate(context);
+    if (context.loading && consumer.onContextLoading) {
+      consumer.onContextLoading(true);
+    }
+    if (context.error && consumer.onContextError) {
+      consumer.onContextError(context.error);
+    }
+    return () => {
+      this.consumers.delete(consumer);
+    };
+  }
+  /**
+   * Setup internal subscriptions
+   */
+  setupSubscriptions() {
+    this.contextManager.on("context-update", (event) => {
+      const context = event.detail;
+      this.consumers.forEach((consumer) => {
+        consumer.onContextUpdate(context);
+      });
+      this.emit("context-update", { detail: context });
+    });
+    this.contextManager.on("loading-change", (event) => {
+      const loading = event.detail;
+      this.consumers.forEach((consumer) => {
+        if (consumer.onContextLoading) {
+          consumer.onContextLoading(loading);
+        }
+      });
+      this.emit("loading-change", { detail: loading });
+    });
+    this.contextManager.on("product-error", (event) => {
+      const error = event.detail;
+      this.consumers.forEach((consumer) => {
+        if (consumer.onContextError) {
+          consumer.onContextError(error);
+        }
+      });
+      this.emit("error", { detail: error });
+    });
+  }
+  /**
+   * Destroy the provider
+   */
+  destroy() {
+    this.consumers.clear();
+    this.contextManager.reset();
+    this.removeAllListeners();
+  }
+};
+var ContextInjector = class {
+  /**
+   * React context injection
+   */
+  static forReact(provider) {
+    return {
+      Provider: ({ children, value }) => {
+        return { provider, children, value };
+      },
+      Consumer: ({ children }) => {
+        return { provider, children };
+      }
+    };
+  }
+  /**
+   * Vue context injection
+   */
+  static forVue(provider) {
+    return {
+      install(app) {
+        app.provide("merchifyContext", provider);
+      },
+      inject() {
+        return provider;
+      }
+    };
+  }
+  /**
+   * Svelte context injection
+   */
+  static forSvelte(provider) {
+    return {
+      setContext(key) {
+        return { key, provider };
+      },
+      getContext(key) {
+        return provider;
+      }
+    };
+  }
+  /**
+   * Web Components context injection
+   */
+  static forWebComponents(provider) {
+    return {
+      // Attach to element
+      attach(element) {
+        element.__contextProvider = provider;
+        element.addEventListener("merchify:request-context", (event) => {
+          event.detail.context = provider.getContext();
+        });
+      },
+      // Get from parent
+      getFromParent(element) {
+        let parent = element.parentElement;
+        while (parent) {
+          if (parent.__contextProvider) {
+            return parent.__contextProvider.getContext();
+          }
+          parent = parent.parentElement;
+        }
+        return void 0;
+      }
+    };
+  }
+};
+function createUniversalProvider(config2) {
+  return new UniversalContextProvider(config2);
+}
+function withContext(Base) {
+  return class extends Base {
+    context;
+    contextUnsubscribe;
+    connectedCallback() {
+      super.connectedCallback?.();
+      const provider = this.findProvider();
+      if (provider) {
+        this.contextUnsubscribe = provider.registerConsumer(this);
+      }
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+      if (this.contextUnsubscribe) {
+        this.contextUnsubscribe();
+      }
+    }
+    onContextUpdate(context) {
+      this.context = context;
+      this.requestUpdate?.();
+    }
+    onContextError(error) {
+      console.error("Context error:", error);
+    }
+    onContextLoading(loading) {
+    }
+    findProvider() {
+      return void 0;
+    }
+  };
+}
+
+// src/dom/utils.ts
+var ClassNames = {
+  /**
+   * Combine class names conditionally
+   */
+  combine(...args) {
+    const classes = [];
+    for (const arg of args) {
+      if (!arg) continue;
+      if (typeof arg === "string") {
+        classes.push(arg);
+      } else if (typeof arg === "object") {
+        for (const [className, condition] of Object.entries(arg)) {
+          if (condition) {
+            classes.push(className);
+          }
+        }
+      }
+    }
+    return classes.join(" ");
+  },
+  /**
+   * Toggle a class on an element
+   */
+  toggle(element, className, force) {
+    if (force !== void 0) {
+      if (force) {
+        element.classList.add(className);
+      } else {
+        element.classList.remove(className);
+      }
+    } else {
+      element.classList.toggle(className);
+    }
+  },
+  /**
+   * Add classes with prefix
+   */
+  withPrefix(prefix, ...suffixes) {
+    return suffixes.map((suffix) => `${prefix}${suffix}`).join(" ");
+  }
+};
+var Styles = {
+  /**
+   * Merge style objects
+   */
+  merge(...styles) {
+    return Object.assign({}, ...styles.filter(Boolean));
+  },
+  /**
+   * Convert style object to CSS string
+   */
+  toCss(style) {
+    return Object.entries(style).map(([key, value]) => {
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return `${cssKey}: ${value}`;
+    }).join("; ");
+  },
+  /**
+   * Parse CSS string to style object
+   */
+  fromCss(css) {
+    const style = {};
+    css.split(";").forEach((rule) => {
+      const [key, value] = rule.split(":").map((s) => s.trim());
+      if (key && value) {
+        const jsKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        style[jsKey] = value;
+      }
+    });
+    return style;
+  }
+};
+var Attributes = {
+  /**
+   * Set attributes on an element
+   */
+  set(element, attributes) {
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value === false || value === null || value === void 0) {
+        element.removeAttribute(key);
+      } else if (value === true) {
+        element.setAttribute(key, "");
+      } else {
+        element.setAttribute(key, String(value));
+      }
+    }
+  },
+  /**
+   * Get all attributes as an object
+   */
+  getAll(element) {
+    const attrs = {};
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      attrs[attr.name] = attr.value;
+    }
+    return attrs;
+  },
+  /**
+   * Parse JSON attribute safely
+   */
+  parseJson(element, attributeName, defaultValue) {
+    const value = element.getAttribute(attributeName);
+    if (!value) return defaultValue;
+    try {
+      return JSON.parse(value);
+    } catch {
+      console.warn(`Failed to parse JSON attribute: ${attributeName}`);
+      return defaultValue;
+    }
+  }
+};
+var Elements = {
+  /**
+   * Create element with properties
+   */
+  create(tag, props) {
+    const element = document.createElement(tag);
+    if (props?.className) {
+      element.className = props.className;
+    }
+    if (props?.style) {
+      Object.assign(element.style, props.style);
+    }
+    if (props?.attributes) {
+      Attributes.set(element, props.attributes);
+    }
+    if (props?.text) {
+      element.textContent = props.text;
+    }
+    if (props?.html) {
+      element.innerHTML = props.html;
+    }
+    if (props?.children) {
+      props.children.forEach((child) => {
+        if (typeof child === "string") {
+          element.appendChild(document.createTextNode(child));
+        } else {
+          element.appendChild(child);
+        }
+      });
+    }
+    return element;
+  },
+  /**
+   * Create fragment with children
+   */
+  fragment(...children) {
+    const fragment = document.createDocumentFragment();
+    children.forEach((child) => {
+      if (typeof child === "string") {
+        fragment.appendChild(document.createTextNode(child));
+      } else {
+        fragment.appendChild(child);
+      }
+    });
+    return fragment;
+  },
+  /**
+   * Replace element's children
+   */
+  replaceChildren(element, ...children) {
+    element.innerHTML = "";
+    children.forEach((child) => {
+      if (typeof child === "string") {
+        element.appendChild(document.createTextNode(child));
+      } else {
+        element.appendChild(child);
+      }
+    });
+  }
+};
+var Focus = {
+  /**
+   * Trap focus within an element
+   */
+  trap(container) {
+    const focusableSelectors = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ];
+    const getFocusableElements = () => {
+      return Array.from(
+        container.querySelectorAll(focusableSelectors.join(","))
+      );
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const focusable = getFocusableElements();
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+    };
+  },
+  /**
+   * Restore focus to previous element
+   */
+  restore(previousElement) {
+    if (previousElement && previousElement.focus) {
+      previousElement.focus();
+    }
+  }
+};
+var Animations = {
+  /**
+   * Fade in element
+   */
+  fadeIn(element, duration = 300) {
+    return new Promise((resolve) => {
+      element.style.opacity = "0";
+      element.style.transition = `opacity ${duration}ms`;
+      element.offsetHeight;
+      element.style.opacity = "1";
+      setTimeout(resolve, duration);
+    });
+  },
+  /**
+   * Fade out element
+   */
+  fadeOut(element, duration = 300) {
+    return new Promise((resolve) => {
+      element.style.transition = `opacity ${duration}ms`;
+      element.style.opacity = "0";
+      setTimeout(resolve, duration);
+    });
+  },
+  /**
+   * Slide toggle
+   */
+  slideToggle(element, duration = 300) {
+    return new Promise((resolve) => {
+      const isHidden = element.style.maxHeight === "0px" || !element.style.maxHeight;
+      element.style.transition = `max-height ${duration}ms`;
+      element.style.overflow = "hidden";
+      if (isHidden) {
+        element.style.maxHeight = element.scrollHeight + "px";
+      } else {
+        element.style.maxHeight = "0px";
+      }
+      setTimeout(resolve, duration);
+    });
+  }
+};
+
+// src/framework/adapter.ts
+function createComponent(descriptor, adapter) {
+  return adapter.render(descriptor, {});
+}
+function defineComponent(definition) {
+  return {
+    name: definition.name,
+    props: definition.props || {},
+    state: definition.state,
+    methods: definition.methods,
+    lifecycle: definition.lifecycle,
+    render: (adapter) => definition.render({}, adapter)
+  };
+}
+var AdapterRegistry = class {
+  adapters = /* @__PURE__ */ new Map();
+  register(adapter) {
+    this.adapters.set(adapter.name, adapter);
+  }
+  get(name) {
+    return this.adapters.get(name);
+  }
+  getAll() {
+    return Array.from(this.adapters.values());
+  }
+};
+var adapterRegistry = new AdapterRegistry();
+
+// src/framework/lifecycle.ts
+var LifecycleManager = class {
+  currentPhase = "created";
+  hooks = /* @__PURE__ */ new Map();
+  transitions = [];
+  listeners = /* @__PURE__ */ new Set();
+  /**
+   * Register a lifecycle hook
+   */
+  addHook(hook) {
+    const phaseHooks = this.hooks.get(hook.phase) || /* @__PURE__ */ new Set();
+    phaseHooks.add(hook);
+    this.hooks.set(hook.phase, phaseHooks);
+    return () => {
+      phaseHooks.delete(hook);
+    };
+  }
+  /**
+   * Transition to a new lifecycle phase
+   */
+  async transitionTo(phase, context) {
+    const startTime = performance.now();
+    const transition = {
+      from: this.currentPhase,
+      to: phase,
+      timestamp: Date.now()
+    };
+    const phaseHooks = Array.from(this.hooks.get(phase) || []).sort((a, b) => (a.priority || 0) - (b.priority || 0));
+    for (const hook of phaseHooks) {
+      try {
+        await hook.handler(context);
+      } catch (error) {
+        console.error(`Lifecycle hook error in ${phase}:`, error);
+        if (phase !== "error") {
+          await this.transitionTo("error", { error, originalPhase: phase });
+        }
+      }
+    }
+    transition.duration = performance.now() - startTime;
+    this.transitions.push(transition);
+    this.currentPhase = phase;
+    this.listeners.forEach((listener) => listener(phase));
+  }
+  /**
+   * Get current lifecycle phase
+   */
+  getPhase() {
+    return this.currentPhase;
+  }
+  /**
+   * Subscribe to lifecycle changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /**
+   * Get lifecycle history
+   */
+  getHistory() {
+    return [...this.transitions];
+  }
+  /**
+   * Reset lifecycle state
+   */
+  reset() {
+    this.currentPhase = "created";
+    this.transitions = [];
+    this.hooks.clear();
+    this.listeners.clear();
+  }
+};
+var ComponentLifecycle = class {
+  manager = new LifecycleManager();
+  mounted = false;
+  /**
+   * Component creation
+   */
+  async create(context) {
+    await this.manager.transitionTo("created", context);
+  }
+  /**
+   * Component mounting
+   */
+  async mount(context) {
+    if (this.mounted) return;
+    await this.manager.transitionTo("mounting", context);
+    this.mounted = true;
+    await this.manager.transitionTo("mounted", context);
+  }
+  /**
+   * Component updating
+   */
+  async update(context) {
+    if (!this.mounted) return;
+    await this.manager.transitionTo("updating", context);
+    await this.manager.transitionTo("updated", context);
+  }
+  /**
+   * Component unmounting
+   */
+  async unmount(context) {
+    if (!this.mounted) return;
+    await this.manager.transitionTo("unmounting", context);
+    this.mounted = false;
+    await this.manager.transitionTo("unmounted", context);
+  }
+  /**
+   * Handle error
+   */
+  async error(error, context) {
+    await this.manager.transitionTo("error", { error, ...context });
+  }
+  /**
+   * Add lifecycle hook
+   */
+  onPhase(phase, handler, priority = 0) {
+    return this.manager.addHook({ phase, handler, priority });
+  }
+  /**
+   * Subscribe to lifecycle changes
+   */
+  subscribe(listener) {
+    return this.manager.subscribe(listener);
+  }
+  /**
+   * Get current phase
+   */
+  getPhase() {
+    return this.manager.getPhase();
+  }
+  /**
+   * Check if mounted
+   */
+  isMounted() {
+    return this.mounted;
+  }
+};
+function createLifecycle() {
+  return new ComponentLifecycle();
+}
+
+// src/framework/properties.ts
+function validateType(value, type) {
+  switch (type) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+      return typeof value === "number" && !isNaN(value);
+    case "boolean":
+      return typeof value === "boolean";
+    case "object":
+      return value !== null && typeof value === "object" && !Array.isArray(value);
+    case "array":
+      return Array.isArray(value);
+    case "function":
+      return typeof value === "function";
+    case "any":
+      return true;
+    default:
+      return false;
+  }
+}
+var PropertyManager = class {
+  schema;
+  values = {};
+  listeners = /* @__PURE__ */ new Map();
+  transforms = /* @__PURE__ */ new Map();
+  constructor(schema) {
+    this.schema = schema;
+    this.initializeDefaults();
+  }
+  /**
+   * Initialize default values
+   */
+  initializeDefaults() {
+    for (const [key, definition] of Object.entries(this.schema)) {
+      if (definition.default !== void 0) {
+        this.values[key] = typeof definition.default === "function" ? definition.default() : definition.default;
+      }
+      if (definition.transform) {
+        this.transforms.set(key, definition.transform);
+      }
+    }
+  }
+  /**
+   * Set a property value
+   */
+  set(key, value) {
+    const definition = this.schema[key];
+    if (!definition) {
+      console.warn(`Property "${String(key)}" is not defined in schema`);
+      return false;
+    }
+    if (!this.validate(key, value)) {
+      return false;
+    }
+    const transformedValue = this.transform(key, value);
+    const oldValue = this.values[key];
+    if (oldValue === transformedValue) {
+      return true;
+    }
+    this.values[key] = transformedValue;
+    this.notify(key, transformedValue);
+    return true;
+  }
+  /**
+   * Get a property value
+   */
+  get(key) {
+    return this.values[key];
+  }
+  /**
+   * Get all property values
+   */
+  getAll() {
+    return { ...this.values };
+  }
+  /**
+   * Validate a property value
+   */
+  validate(key, value) {
+    const definition = this.schema[key];
+    if (!definition) return false;
+    if (definition.required && value == null) {
+      console.error(`Property "${String(key)}" is required`);
+      return false;
+    }
+    if (value == null && !definition.required) {
+      return true;
+    }
+    const types = Array.isArray(definition.type) ? definition.type : [definition.type];
+    const isValidType = types.some((type) => validateType(value, type));
+    if (!isValidType) {
+      console.error(`Property "${String(key)}" has invalid type`);
+      return false;
+    }
+    if (definition.validator && !definition.validator(value)) {
+      console.error(`Property "${String(key)}" failed custom validation`);
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Transform a property value
+   */
+  transform(key, value) {
+    const transform = this.transforms.get(key);
+    return transform ? transform(value) : value;
+  }
+  /**
+   * Subscribe to property changes
+   */
+  subscribe(key, listener) {
+    const listeners = this.listeners.get(key) || /* @__PURE__ */ new Set();
+    listeners.add(listener);
+    this.listeners.set(key, listeners);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  /**
+   * Subscribe to all property changes
+   */
+  subscribeAll(listener) {
+    const wrappedListeners = /* @__PURE__ */ new Map();
+    for (const key of Object.keys(this.schema)) {
+      const wrapped = (value) => listener(key, value);
+      wrappedListeners.set(key, wrapped);
+      this.subscribe(key, wrapped);
+    }
+    return () => {
+      for (const [key, wrapped] of wrappedListeners) {
+        const listeners = this.listeners.get(key);
+        listeners?.delete(wrapped);
+      }
+    };
+  }
+  /**
+   * Notify listeners of property change
+   */
+  notify(key, value) {
+    const listeners = this.listeners.get(key);
+    if (listeners) {
+      listeners.forEach((listener) => listener(value));
+    }
+  }
+  /**
+   * Batch update multiple properties
+   */
+  update(props) {
+    for (const [key, value] of Object.entries(props)) {
+      this.set(key, value);
+    }
+  }
+  /**
+   * Reset to default values
+   */
+  reset() {
+    this.values = {};
+    this.initializeDefaults();
+    for (const [key, value] of Object.entries(this.values)) {
+      this.notify(key, value);
+    }
+  }
+  /**
+   * Get schema
+   */
+  getSchema() {
+    return this.schema;
+  }
+};
+function createPropertyManager(schema) {
+  return new PropertyManager(schema);
+}
+var CommonProps = {
+  className: {
+    type: "string",
+    attribute: "class"
+  },
+  style: {
+    type: "object"
+  },
+  id: {
+    type: "string",
+    reflect: true
+  },
+  disabled: {
+    type: "boolean",
+    default: false,
+    reflect: true
+  },
+  hidden: {
+    type: "boolean",
+    default: false,
+    reflect: true
+  }
+};
+var ProductProps = {
+  productId: {
+    type: "string",
+    attribute: "product-id",
+    reflect: true
+  },
+  mode: {
+    type: "string",
+    default: "mock",
+    validator: (value) => ["mock", "live"].includes(value)
+  },
+  endpoint: {
+    type: "string"
+  },
+  ...CommonProps
+};
+
+// src/framework/templates.ts
+var TemplateBuilder = class {
+  /**
+   * Create an element node
+   */
+  static element(tag, props, children) {
+    return {
+      type: "element",
+      tag,
+      props,
+      children
+    };
+  }
+  /**
+   * Create a text node
+   */
+  static text(text) {
+    return {
+      type: "text",
+      text
+    };
+  }
+  /**
+   * Create a component node
+   */
+  static component(component, props, children) {
+    return {
+      type: "component",
+      component,
+      props,
+      children
+    };
+  }
+  /**
+   * Create a fragment node
+   */
+  static fragment(children) {
+    return {
+      type: "fragment",
+      children
+    };
+  }
+  /**
+   * Create a conditional node
+   */
+  static if(condition, thenNode, elseNode) {
+    const thenNodes = Array.isArray(thenNode) ? thenNode : [thenNode];
+    const elseNodes = elseNode ? Array.isArray(elseNode) ? elseNode : [elseNode] : void 0;
+    return {
+      type: "conditional",
+      condition,
+      children: thenNodes,
+      fallback: elseNodes
+    };
+  }
+  /**
+   * Create a loop node
+   */
+  static forEach(items, renderItem) {
+    return {
+      type: "loop",
+      items,
+      renderItem
+    };
+  }
+  /**
+   * Create a slot node
+   */
+  static slot(name, fallback) {
+    return {
+      type: "slot",
+      name,
+      fallback
+    };
+  }
+};
+var ComponentTemplates = class {
+  /**
+   * Product options template
+   */
+  static productOptions() {
+    return {
+      name: "ProductOptions",
+      props: {
+        attributes: { type: "object", required: true },
+        selection: { type: "object", required: true },
+        disabled: { type: "object" },
+        onChange: { type: "function" }
+      },
+      events: [
+        { name: "change", bubbles: true }
+      ],
+      render: (props) => {
+        const { attributes = {}, selection = {}, disabled = {} } = props;
+        return TemplateBuilder.element("div", { class: "product-options" }, [
+          TemplateBuilder.forEach(
+            () => Object.entries(attributes),
+            ([key, attr]) => {
+              return TemplateBuilder.element("div", { class: "option-group", key }, [
+                TemplateBuilder.element("label", {}, [
+                  TemplateBuilder.text(attr.label || key)
+                ]),
+                TemplateBuilder.element("select", {
+                  value: selection[key],
+                  onChange: props.onChange,
+                  "data-attribute": key
+                }, [
+                  TemplateBuilder.forEach(
+                    () => attr.choices || [],
+                    (choice) => {
+                      const value = typeof choice === "string" ? choice : choice.label;
+                      const isDisabled = disabled[key]?.includes(value);
+                      return TemplateBuilder.element("option", {
+                        value,
+                        disabled: isDisabled
+                      }, [
+                        TemplateBuilder.text(value)
+                      ]);
+                    }
+                  )
+                ])
+              ]);
+            }
+          )
+        ]);
+      }
+    };
+  }
+  /**
+   * Product price template
+   */
+  static productPrice() {
+    return {
+      name: "ProductPrice",
+      props: {
+        price: { type: "number" },
+        currency: { type: "string", default: "USD" },
+        locale: { type: "string", default: "en-US" },
+        showCurrency: { type: "boolean", default: true }
+      },
+      render: (props) => {
+        const { price, currency, locale, showCurrency } = props;
+        return TemplateBuilder.if(
+          () => price != null,
+          TemplateBuilder.element("span", { class: "product-price" }, [
+            TemplateBuilder.text(formatPrice2(price, locale, currency, showCurrency))
+          ]),
+          TemplateBuilder.element("span", { class: "product-price-empty" }, [
+            TemplateBuilder.text("\u2014")
+          ])
+        );
+      }
+    };
+  }
+  /**
+   * Product image template
+   */
+  static productImage() {
+    return {
+      name: "ProductImage",
+      props: {
+        src: { type: "string" },
+        alt: { type: "string", default: "Product image" },
+        width: { type: "number" },
+        height: { type: "number" },
+        loading: { type: "string", default: "lazy" }
+      },
+      slots: ["loading", "error"],
+      render: (props) => {
+        const { src, alt, width, height, loading } = props;
+        return TemplateBuilder.if(
+          () => !!src,
+          TemplateBuilder.element("img", {
+            src,
+            alt,
+            width,
+            height,
+            loading,
+            class: "product-image"
+          }),
+          TemplateBuilder.slot("loading", [
+            TemplateBuilder.element("div", { class: "product-image-placeholder" }, [
+              TemplateBuilder.text("Loading...")
+            ])
+          ])
+        );
+      }
+    };
+  }
+  /**
+   * Add to cart button template
+   */
+  static addToCartButton() {
+    return {
+      name: "AddToCartButton",
+      props: {
+        disabled: { type: "boolean", default: false },
+        loading: { type: "boolean", default: false },
+        text: { type: "string", default: "Add to Cart" },
+        onClick: { type: "function" }
+      },
+      events: [
+        { name: "click", bubbles: true }
+      ],
+      render: (props) => {
+        const { disabled, loading, text, onClick } = props;
+        return TemplateBuilder.element("button", {
+          class: "add-to-cart-button",
+          disabled: disabled || loading,
+          onClick
+        }, [
+          TemplateBuilder.if(
+            () => loading,
+            TemplateBuilder.text("Adding..."),
+            TemplateBuilder.text(text)
+          )
+        ]);
+      }
+    };
+  }
+};
+var AbstractTemplateRenderer = class {
+  adapter;
+  constructor(adapter) {
+    this.adapter = adapter;
+  }
+  /**
+   * Render a template node
+   */
+  render(node, context) {
+    switch (node.type) {
+      case "element":
+        return this.renderElement(node, context);
+      case "text":
+        return this.renderText(node, context);
+      case "component":
+        return this.renderComponent(node, context);
+      case "fragment":
+        return this.renderFragment(node, context);
+      case "conditional":
+        return this.renderConditional(node, context);
+      case "loop":
+        return this.renderLoop(node, context);
+      case "slot":
+        return this.renderSlot(node, context);
+      default:
+        throw new Error(`Unknown node type: ${node.type}`);
+    }
+  }
+  /**
+   * Render child nodes
+   */
+  renderChildren(children, context) {
+    if (!children) return [];
+    return children.map((child) => this.render(child, context));
+  }
+};
+function formatPrice2(cents, locale, currency, showCurrency) {
+  const amount = cents / 100;
+  if (showCurrency) {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency
+    }).format(amount);
+  }
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(amount);
+}
+
+// src/framework/registry.ts
+var ComponentRegistry = class {
+  components = /* @__PURE__ */ new Map();
+  frameworks = /* @__PURE__ */ new Map();
+  /**
+   * Register a component
+   */
+  register(definition) {
+    const { name, framework } = definition.metadata;
+    this.components.set(name, definition);
+    if (framework) {
+      const frameworkComponents = this.frameworks.get(framework) || /* @__PURE__ */ new Set();
+      frameworkComponents.add(name);
+      this.frameworks.set(framework, frameworkComponents);
+    }
+  }
+  /**
+   * Get a component definition
+   */
+  get(name) {
+    return this.components.get(name);
+  }
+  /**
+   * Get all components for a framework
+   */
+  getByFramework(framework) {
+    const names = this.frameworks.get(framework) || /* @__PURE__ */ new Set();
+    return Array.from(names).map((name) => this.components.get(name)).filter(Boolean);
+  }
+  /**
+   * Get all registered components
+   */
+  getAll() {
+    return Array.from(this.components.values());
+  }
+  /**
+   * Check if a component is registered
+   */
+  has(name) {
+    return this.components.has(name);
+  }
+  /**
+   * Clear registry
+   */
+  clear() {
+    this.components.clear();
+    this.frameworks.clear();
+  }
+};
+var componentRegistry = new ComponentRegistry();
+var StandardComponents = {
+  /**
+   * Product component
+   */
+  Product: {
+    metadata: {
+      name: "Product",
+      tagName: "merchify-product",
+      displayName: "MerchifyProduct",
+      description: "Product context provider component",
+      props: {
+        productId: { type: "string" },
+        mode: {
+          type: "string",
+          default: "mock",
+          validator: (v) => ["mock", "live"].includes(v)
+        },
+        endpoint: { type: "string" },
+        autoLoad: { type: "boolean", default: true }
+      },
+      events: [
+        { name: "ready", bubbles: true },
+        { name: "error", bubbles: true },
+        { name: "context-update", bubbles: true }
+      ],
+      slots: ["default", "loading", "error"]
+    }
+  },
+  /**
+   * Product Options component
+   */
+  ProductOptions: {
+    metadata: {
+      name: "ProductOptions",
+      tagName: "merchify-product-options",
+      displayName: "MerchifyProductOptions",
+      description: "Product options selection component",
+      props: {
+        attributes: { type: "object" },
+        selection: { type: "object" },
+        combinations: { type: "array" },
+        disabled: { type: "boolean", default: false }
+      },
+      events: [
+        { name: "change", bubbles: true },
+        { name: "selection-change", bubbles: true }
+      ]
+    }
+  },
+  /**
+   * Product Price component
+   */
+  ProductPrice: {
+    metadata: {
+      name: "ProductPrice",
+      tagName: "merchify-product-price",
+      displayName: "MerchifyProductPrice",
+      description: "Product price display component",
+      props: {
+        price: { type: "number" },
+        currency: { type: "string", default: "USD" },
+        locale: { type: "string", default: "en-US" },
+        showCurrency: { type: "boolean", default: true }
+      }
+    }
+  },
+  /**
+   * Product Image component
+   */
+  ProductImage: {
+    metadata: {
+      name: "ProductImage",
+      tagName: "merchify-product-image",
+      displayName: "MerchifyProductImage",
+      description: "Product mockup image component",
+      props: {
+        productId: { type: "string" },
+        mockupId: { type: "string" },
+        variantId: { type: "string" },
+        width: { type: "number", default: 400 },
+        aspectRatio: { type: "string" },
+        design: { type: "object" }
+      },
+      slots: ["loading", "error"]
+    }
+  },
+  /**
+   * Add to Cart component
+   */
+  AddToCart: {
+    metadata: {
+      name: "AddToCart",
+      tagName: "merchify-add-to-cart",
+      displayName: "MerchifyAddToCart",
+      description: "Add to cart button component",
+      props: {
+        text: { type: "string", default: "Add to Cart" },
+        loadingText: { type: "string", default: "Adding..." },
+        successText: { type: "string", default: "Added!" },
+        disabled: { type: "boolean", default: false },
+        quantity: { type: "number", default: 1 }
+      },
+      events: [
+        { name: "click", bubbles: true },
+        { name: "add-to-cart", bubbles: true },
+        { name: "success", bubbles: true },
+        { name: "error", bubbles: true }
+      ]
+    }
+  }
+};
+function registerStandardComponents() {
+  Object.values(StandardComponents).forEach((component) => {
+    componentRegistry.register({
+      metadata: component.metadata,
+      descriptor: {
+        name: component.metadata.name,
+        props: component.metadata.props,
+        render: () => null
+        // Placeholder - implementations will override
+      }
+    });
+  });
+}
+var ComponentFactory = class {
+  /**
+   * Create a React component
+   */
+  static forReact(definition, React) {
+    const { metadata, descriptor } = definition;
+    const Component = (props) => {
+      return React.createElement("div", props);
+    };
+    Component.displayName = metadata.displayName || metadata.name;
+    return Component;
+  }
+  /**
+   * Create a Vue component
+   */
+  static forVue(definition) {
+    const { metadata, descriptor } = definition;
+    return {
+      name: metadata.name,
+      props: metadata.props,
+      emits: metadata.events?.map((e) => e.name),
+      setup(props, context) {
+        return () => null;
+      }
+    };
+  }
+  /**
+   * Create a Svelte component
+   */
+  static forSvelte(definition) {
+    return {
+      metadata: definition.metadata,
+      descriptor: definition.descriptor
+    };
+  }
+  /**
+   * Create a Web Component
+   */
+  static forWebComponent(definition, LitElement) {
+    const { metadata, descriptor } = definition;
+    class Component extends LitElement {
+      static properties = metadata.props;
+      render() {
+        return null;
+      }
+    }
+    if (metadata.tagName && !customElements.get(metadata.tagName)) {
+      customElements.define(metadata.tagName, Component);
+    }
+    return Component;
+  }
+};
+function autoRegister(framework, registrar) {
+  const components = componentRegistry.getByFramework(framework);
+  components.forEach((definition) => {
+    registrar(definition);
+  });
+}
+
+// src/framework/adapters/lit.ts
+var LitAdapter = class {
+  name = "lit";
+  element;
+  // LitElement instance
+  properties = /* @__PURE__ */ new Map();
+  subscriptions = /* @__PURE__ */ new Map();
+  constructor(element) {
+    this.element = element;
+  }
+  /**
+   * Create a stateful value using reactive properties
+   */
+  createState(initialValue) {
+    const key = `state_${Date.now()}_${Math.random()}`;
+    this.properties.set(key, initialValue);
+    return {
+      get: () => {
+        return this.properties.get(key);
+      },
+      set: (newValue) => {
+        const current = this.properties.get(key);
+        const nextValue = typeof newValue === "function" ? newValue(current) : newValue;
+        this.properties.set(key, nextValue);
+        if (this.element) {
+          this.element.requestUpdate();
+        }
+        const subs = this.subscriptions.get(key);
+        if (subs) {
+          subs.forEach((callback) => callback(nextValue));
+        }
+      },
+      subscribe: (callback) => {
+        const subs = this.subscriptions.get(key) || /* @__PURE__ */ new Set();
+        subs.add(callback);
+        this.subscriptions.set(key, subs);
+        return () => {
+          subs.delete(callback);
+        };
+      }
+    };
+  }
+  /**
+   * Create a context provider/consumer
+   */
+  createContext(name) {
+    return {
+      provide: (value) => {
+        if (this.element) {
+          this.element[`__context_${name}`] = value;
+          this.element.dispatchEvent(new CustomEvent("context-provide", {
+            detail: { name, value },
+            bubbles: true,
+            composed: true
+          }));
+        }
+      },
+      consume: () => {
+        if (!this.element) return void 0;
+        const stored = this.element[`__context_${name}`];
+        if (stored !== void 0) return stored;
+        const detail = { context: void 0 };
+        this.element.dispatchEvent(new CustomEvent("context-request", {
+          detail: { name, ...detail },
+          bubbles: true,
+          composed: true
+        }));
+        return detail.context;
+      },
+      subscribe: (callback) => {
+        if (!this.element) return () => {
+        };
+        const handler = (event) => {
+          if (event.detail?.name === name) {
+            callback(event.detail.value);
+          }
+        };
+        this.element.addEventListener("context-update", handler);
+        return () => {
+          this.element.removeEventListener("context-update", handler);
+        };
+      }
+    };
+  }
+  /**
+   * Register lifecycle hooks
+   */
+  useLifecycle(lifecycle) {
+    if (!this.element) return;
+    const originalConnected = this.element.connectedCallback;
+    const originalDisconnected = this.element.disconnectedCallback;
+    const originalUpdated = this.element.updated;
+    this.element.connectedCallback = function() {
+      originalConnected?.call(this);
+      lifecycle.onMount?.();
+    };
+    this.element.disconnectedCallback = function() {
+      originalDisconnected?.call(this);
+      lifecycle.onUnmount?.();
+    };
+    this.element.updated = function(changedProperties) {
+      originalUpdated?.call(this, changedProperties);
+      lifecycle.onUpdate?.({});
+    };
+  }
+  /**
+   * Register event handlers
+   */
+  useEvents(handlers) {
+    if (!this.element) return;
+    handlers.forEach(({ name, handler }) => {
+      this.element.addEventListener(name, handler);
+    });
+  }
+  /**
+   * Create a ref to a DOM element
+   */
+  createRef() {
+    const ref = { current: null };
+    if (this.element) {
+      this.element.updateComplete.then(() => {
+        ref.current = this.element.renderRoot.querySelector("[ref]");
+      });
+    }
+    return ref;
+  }
+  /**
+   * Render a component
+   */
+  render(component, props) {
+    return component.render(this);
+  }
+  /**
+   * Get Lit-specific utilities
+   */
+  getUtilities() {
+    return {
+      batchUpdates: (callback) => {
+        callback();
+        if (this.element) {
+          this.element.requestUpdate();
+        }
+      },
+      nextTick: (callback) => {
+        if (this.element) {
+          this.element.updateComplete.then(callback);
+        } else {
+          Promise.resolve().then(callback);
+        }
+      },
+      computed: (deps, compute) => {
+        return compute();
+      },
+      memo: (value, deps) => {
+        return value;
+      }
+    };
+  }
+  /**
+   * Set the element instance
+   */
+  setElement(element) {
+    this.element = element;
+  }
+};
+function createLitComponent(descriptor, LitElement, html) {
+  return class extends LitElement {
+    adapter = new LitAdapter(this);
+    connectedCallback() {
+      super.connectedCallback();
+      if (descriptor.lifecycle) {
+        this.adapter.useLifecycle(descriptor.lifecycle);
+      }
+    }
+    render() {
+      return this.adapter.render(descriptor, this);
+    }
+  };
+}
+
+// src/framework/adapters/vue.ts
+var VueAdapter = class {
+  name = "vue";
+  vue;
+  // Vue instance
+  instance;
+  // Component instance
+  constructor(vue, instance) {
+    this.vue = vue;
+    this.instance = instance;
+  }
+  /**
+   * Create a stateful value using ref/reactive
+   */
+  createState(initialValue) {
+    const { ref, watch } = this.vue;
+    const state = ref(initialValue);
+    const subscribers = /* @__PURE__ */ new Set();
+    watch(state, (newValue) => {
+      subscribers.forEach((callback) => callback(newValue));
+    });
+    return {
+      get: () => state.value,
+      set: (newValue) => {
+        if (typeof newValue === "function") {
+          state.value = newValue(state.value);
+        } else {
+          state.value = newValue;
+        }
+      },
+      subscribe: (callback) => {
+        subscribers.add(callback);
+        return () => {
+          subscribers.delete(callback);
+        };
+      }
+    };
+  }
+  /**
+   * Create a context provider/consumer
+   */
+  createContext(name) {
+    const { provide, inject } = this.vue;
+    const key = Symbol(name);
+    return {
+      provide: (value) => {
+        provide(key, value);
+      },
+      consume: () => {
+        return inject(key);
+      },
+      subscribe: (callback) => {
+        const value = inject(key);
+        if (value !== void 0) {
+          const { watchEffect } = this.vue;
+          const unwatch = watchEffect(() => {
+            callback(value);
+          });
+          return unwatch;
+        }
+        return () => {
+        };
+      }
+    };
+  }
+  /**
+   * Register lifecycle hooks
+   */
+  useLifecycle(lifecycle) {
+    const { onMounted, onUnmounted, onUpdated, onErrorCaptured } = this.vue;
+    if (lifecycle.onMount) {
+      onMounted(lifecycle.onMount);
+    }
+    if (lifecycle.onUnmount) {
+      onUnmounted(lifecycle.onUnmount);
+    }
+    if (lifecycle.onUpdate) {
+      onUpdated(() => lifecycle.onUpdate({}));
+    }
+    if (lifecycle.onError) {
+      onErrorCaptured((error) => {
+        lifecycle.onError(error);
+        return false;
+      });
+    }
+  }
+  /**
+   * Register event handlers
+   */
+  useEvents(handlers) {
+    if (!this.instance) return;
+    handlers.forEach(({ name, handler }) => {
+      this.instance.$on?.(name, handler);
+    });
+  }
+  /**
+   * Create a ref to a DOM element
+   */
+  createRef() {
+    const { ref } = this.vue;
+    const elementRef = ref(null);
+    return {
+      get current() {
+        return elementRef.value;
+      },
+      set current(value) {
+        elementRef.value = value;
+      }
+    };
+  }
+  /**
+   * Render a component
+   */
+  render(component, props) {
+    const { h } = this.vue;
+    return h("div", props, component.render(this));
+  }
+  /**
+   * Get Vue-specific utilities
+   */
+  getUtilities() {
+    const { nextTick, computed, watchEffect } = this.vue;
+    return {
+      batchUpdates: (callback) => {
+        callback();
+      },
+      nextTick: (callback) => {
+        nextTick(callback);
+      },
+      computed: (deps, compute) => {
+        return computed(compute).value;
+      },
+      memo: (value, deps) => {
+        return value;
+      }
+    };
+  }
+};
+function createVueComponent(descriptor, vue) {
+  const { defineComponent: defineComponent2, h } = vue;
+  return defineComponent2({
+    name: descriptor.name,
+    props: descriptor.props || {},
+    setup(props, context) {
+      const adapter = new VueAdapter(vue, context);
+      if (descriptor.lifecycle) {
+        adapter.useLifecycle(descriptor.lifecycle);
+      }
+      return () => adapter.render(descriptor, props);
+    }
+  });
+}
+function useFrameworkAdapter(vue) {
+  return new VueAdapter(vue);
+}
+
+// src/framework/adapters/svelte.ts
+var SvelteAdapter = class {
+  name = "svelte";
+  svelte;
+  // Svelte imports
+  component;
+  // Component instance
+  constructor(svelte, component) {
+    this.svelte = svelte;
+    this.component = component;
+  }
+  /**
+   * Create a stateful value using Svelte stores
+   */
+  createState(initialValue) {
+    const { writable, get } = this.svelte;
+    const store = writable(initialValue);
+    return {
+      get: () => get(store),
+      set: (newValue) => {
+        if (typeof newValue === "function") {
+          store.update((prev) => newValue(prev));
+        } else {
+          store.set(newValue);
+        }
+      },
+      subscribe: (callback) => {
+        const unsubscribe = store.subscribe(callback);
+        return unsubscribe;
+      }
+    };
+  }
+  /**
+   * Create a context provider/consumer
+   */
+  createContext(name) {
+    const { setContext, getContext, hasContext } = this.svelte;
+    const key = Symbol(name);
+    return {
+      provide: (value) => {
+        setContext(key, value);
+      },
+      consume: () => {
+        if (hasContext(key)) {
+          return getContext(key);
+        }
+        return void 0;
+      },
+      subscribe: (callback) => {
+        const value = getContext(key);
+        if (value && typeof value === "object" && "subscribe" in value) {
+          const unsubscribe = value.subscribe(callback);
+          return unsubscribe;
+        }
+        if (value !== void 0) {
+          callback(value);
+        }
+        return () => {
+        };
+      }
+    };
+  }
+  /**
+   * Register lifecycle hooks
+   */
+  useLifecycle(lifecycle) {
+    const { onMount, onDestroy, afterUpdate } = this.svelte;
+    if (lifecycle.onMount) {
+      onMount(lifecycle.onMount);
+    }
+    if (lifecycle.onUnmount) {
+      onDestroy(lifecycle.onUnmount);
+    }
+    if (lifecycle.onUpdate) {
+      afterUpdate(() => lifecycle.onUpdate({}));
+    }
+  }
+  /**
+   * Register event handlers
+   */
+  useEvents(handlers) {
+    const { createEventDispatcher } = this.svelte;
+    const dispatch = createEventDispatcher();
+    handlers.forEach(({ name, handler }) => {
+      this[`handle${name}`] = (event) => {
+        handler(event);
+        dispatch(name, event);
+      };
+    });
+  }
+  /**
+   * Create a ref to a DOM element
+   */
+  createRef() {
+    const ref = { current: null };
+    return ref;
+  }
+  /**
+   * Render a component
+   */
+  render(component, props) {
+    return component.render(this);
+  }
+  /**
+   * Get Svelte-specific utilities
+   */
+  getUtilities() {
+    const { tick, derived } = this.svelte;
+    return {
+      batchUpdates: (callback) => {
+        callback();
+      },
+      nextTick: (callback) => {
+        tick().then(callback);
+      },
+      computed: (deps, compute) => {
+        const { get } = this.svelte;
+        const derivedStore = derived(deps, compute);
+        return get(derivedStore);
+      },
+      memo: (value, deps) => {
+        return value;
+      }
+    };
+  }
+};
+function createSvelteComponent(descriptor, svelte) {
+  return {
+    name: descriptor.name,
+    props: descriptor.props,
+    setup: (props) => {
+      const adapter = new SvelteAdapter(svelte);
+      if (descriptor.lifecycle) {
+        adapter.useLifecycle(descriptor.lifecycle);
+      }
+      return adapter.render(descriptor, props);
+    }
+  };
+}
+
+// src/realtime/websocket.ts
+var RealtimeMockupService = class {
+  constructor(wsUrl = "wss://WS_URL_NOT_CONFIGURED.invalid/realtime") {
+    this.wsUrl = wsUrl;
+  }
+  ws = null;
+  config = null;
+  configSent = false;
+  sessionId = null;
+  isConfigured = false;
+  mockupResults = [];
+  status = "Disconnected";
+  logs = [];
+  lastError = null;
+  callbacks = {};
+  canvasBlobs = /* @__PURE__ */ new Map();
+  colors = /* @__PURE__ */ new Map();
+  lastSendTime = {};
+  throttleTimeouts = {};
+  // Request versioning to detect stale responses
+  // Increments each time we send a blob, so we can ignore old server responses
+  requestVersion = 0;
+  lastSentVersion = 0;
+  // Track latest sent version per placement to detect stale responses
+  latestSentVersionByPlacement = {};
+  // Feature flag: server now supports version in blob message
+  sendVersionInBlob = true;
+  setCallbacks(callbacks) {
+    this.callbacks = callbacks;
+  }
+  getState() {
+    return {
+      isConnected: this.ws?.readyState === WebSocket.OPEN,
+      sessionId: this.sessionId,
+      isConfigured: this.isConfigured,
+      mockupResults: [...this.mockupResults],
+      status: this.status,
+      logs: [...this.logs],
+      lastError: this.lastError
+    };
+  }
+  addLog(message, type = "info") {
+    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    const prefix = type === "sent" ? "\u2192 SENT: " : type === "received" ? "\u2190 RECEIVED: " : "\u2022 ";
+    const logMessage = `[${timestamp}] ${prefix}${message}`;
+    this.logs.push(logMessage);
+    this.callbacks.onLog?.(message, type);
+  }
+  connect() {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      return;
+    }
+    this.addLog(`Connecting to ${this.wsUrl}...`);
+    this.ws = new WebSocket(this.wsUrl);
+    this.ws.onopen = () => {
+      this.addLog("WebSocket connection opened");
+      this.status = "Connected";
+    };
+    this.ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        this.addLog(JSON.stringify(data, null, 2), "received");
+        this.handleMessage(data);
+      } catch (error) {
+        this.addLog(`Received non-JSON message: ${event.data}`, "received");
+      }
+    };
+    this.ws.onclose = (event) => {
+      this.addLog(`WebSocket connection closed (code: ${event.code})`);
+      this.status = "Disconnected";
+      this.sessionId = null;
+      this.isConfigured = false;
+      this.configSent = false;
+      this.callbacks.onDisconnected?.();
+    };
+    this.ws.onerror = (error) => {
+      this.addLog(`WebSocket error: ${error}`);
+      this.status = "Disconnected";
+    };
+  }
+  handleMessage(data) {
+    switch (data.type) {
+      case "connected":
+        this.sessionId = data.sessionId || null;
+        this.status = `Connected (Session: ${data.sessionId || "N/A"})`;
+        this.addLog(`\u2705 Session established: ${data.sessionId}`);
+        if (data.sessionId) {
+          this.callbacks.onConnected?.(data.sessionId);
+        }
+        if (this.config && !this.configSent) {
+          this.addLog("\u{1F4E4} Auto-sending cached config after connection...");
+          setTimeout(() => {
+            if (this.config && !this.configSent) {
+              this.sendConfig(this.config);
+            }
+          }, 100);
+        }
+        break;
+      case "config_received":
+      case "configured":
+        this.isConfigured = true;
+        this.status = "Configured";
+        this.addLog("\u2705 Configuration accepted! You can now send blobs.");
+        this.callbacks.onConfigReceived?.();
+        const cachedCanvasCount = this.canvasBlobs.size;
+        const cachedColorCount = this.colors.size;
+        if (cachedCanvasCount > 0 || cachedColorCount > 0) {
+          this.addLog(`\u{1F4E6} Auto-sending cached data: ${cachedCanvasCount} canvas blobs, ${cachedColorCount} colors`);
+          setTimeout(() => {
+            this.canvasBlobs.forEach((blob, placement) => {
+              this.sendCanvasBlob(placement, blob, 1, 0, false);
+            });
+            this.colors.forEach((color, placement) => {
+              this.sendColorBlob(placement, color);
+            });
+          }, 100);
+        }
+        break;
+      case "blob_received":
+        const placementName = data.placement || "unknown";
+        const missingCount = data.missingPlacements?.length || 0;
+        this.addLog(`\u2705 Blob received for "${placementName}" - ${missingCount} placements still needed`);
+        this.callbacks.onBlobReceived?.(placementName);
+        break;
+      case "have_all_blobs":
+        this.addLog("\u{1F389} All blobs received! Starting render...");
+        break;
+      case "rendering_started":
+        this.addLog("\u{1F3A8} Mockup rendering has started...");
+        break;
+      case "mockup_rendered":
+        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})`);
+              break;
+            }
+          }
+          const mockupResult = {
+            mockupId: data.mockupId,
+            imageUrl: data.imageUrl,
+            renderUrl: data.renderUrl || data.imageUrl,
+            imageSize: data.imageSize || 0,
+            requestVersion: responseVersion,
+            placement: responsePlacement
+          };
+          const existingIndex = this.mockupResults.findIndex((m) => m.mockupId === data.mockupId);
+          if (existingIndex >= 0) {
+            this.mockupResults[existingIndex] = mockupResult;
+          } else {
+            this.mockupResults.push(mockupResult);
+          }
+          this.addLog(`\u2705 Mockup rendered v${responseVersion ?? "?"} for "${responsePlacement ?? "?"}" (${data.imageSize} bytes)`);
+          this.callbacks.onMockupRendered?.(mockupResult);
+        } else {
+          const missing = [
+            !data.imageUrl && "imageUrl",
+            !data.mockupId && "mockupId"
+          ].filter(Boolean);
+          this.addLog(`\u26A0\uFE0F mockup_rendered message dropped: missing required fields [${missing.join(", ")}]. Full data keys: [${Object.keys(data).join(", ")}]`);
+        }
+        break;
+      case "all_mockups_rendered":
+        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})`);
+                return false;
+              }
+            }
+            return true;
+          });
+          this.mockupResults = freshMockups;
+          this.addLog(`\u{1F389} All mockups rendered: ${freshMockups.length} fresh (${data.mockups.length - freshMockups.length} stale filtered)`);
+          this.callbacks.onAllMockupsRendered?.(freshMockups);
+        } else {
+          this.addLog(`\u26A0\uFE0F all_mockups_rendered message dropped: missing 'mockups' array. Full data keys: [${Object.keys(data).join(", ")}]`);
+        }
+        break;
+      case "error":
+        const errorMessage = data.message || "Unknown error occurred";
+        this.lastError = errorMessage;
+        this.addLog(`\u274C Server Error: ${errorMessage}`);
+        this.callbacks.onError?.(errorMessage);
+        break;
+      default:
+        this.addLog(`\u{1F914} Unknown message type: ${data.type}`, "received");
+        break;
+    }
+  }
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+  sendConfig(config2) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.addLog("WebSocket not connected, caching config");
+      this.config = config2;
+      this.configSent = false;
+      return false;
+    }
+    if (!this.sessionId) {
+      this.addLog("WebSocket connected but no session yet, caching config");
+      this.config = config2;
+      this.configSent = false;
+      return false;
+    }
+    const hasConfigChanged = !this.config || JSON.stringify(this.config) !== JSON.stringify(config2);
+    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;
+      if (isOnlyMockupIdsChange) {
+        this.addLog("\u{1F504} MockupIds changed, keeping cached blobs (server will reuse)");
+        this.isConfigured = false;
+        this.mockupResults = [];
+      } else {
+        this.addLog("\u{1F504} Product/variant changed, full reset");
+        this.isConfigured = false;
+        this.mockupResults = [];
+        this.canvasBlobs.clear();
+        this.colors.clear();
+        this.lastSendTime = {};
+        Object.values(this.throttleTimeouts).forEach((timeout) => clearTimeout(timeout));
+        this.throttleTimeouts = {};
+        this.requestVersion = 0;
+        this.lastSentVersion = 0;
+        this.latestSentVersionByPlacement = {};
+        this.addLog("\u{1F9F9} Cleared all cached canvas/color data for new product");
+      }
+    }
+    this.config = config2;
+    this.configSent = true;
+    const message = {
+      type: "config",
+      config: config2
+    };
+    const messageStr = JSON.stringify(message);
+    this.addLog(`\u{1F4E4} Sending config: ${JSON.stringify(message, null, 2)}`, "sent");
+    this.ws.send(messageStr);
+    return true;
+  }
+  /**
+   * Update only the mockupIds without changing other config.
+   * Server will use already-cached blobs to render the requested mockups.
+   * This is the preferred method for priority-based rendering.
+   */
+  updateMockupIds(mockupIds) {
+    if (!this.config) {
+      this.addLog("Cannot update mockupIds: no config set");
+      return false;
+    }
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.addLog("Cannot update mockupIds: WebSocket not connected");
+      return false;
+    }
+    const updatedConfig = {
+      ...this.config,
+      mockupIds
+    };
+    this.addLog(`\u{1F3AF} Updating mockupIds to: [${mockupIds.join(", ")}]`);
+    return this.sendConfig(updatedConfig);
+  }
+  /**
+   * Update placementSettings without changing other config.
+   * Used to override scaleMode when canvas editor is active.
+   */
+  updatePlacementSettings(placementSettings) {
+    if (!this.config) {
+      this.addLog("Cannot update placementSettings: no config set");
+      return false;
+    }
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.addLog("Cannot update placementSettings: WebSocket not connected");
+      return false;
+    }
+    const updatedConfig = {
+      ...this.config,
+      placementSettings
+    };
+    return this.sendConfig(updatedConfig);
+  }
+  sendCanvasBlob(placement, blob, mockupCount = 1, baseThrottleMs = 1e3, notifyCallback = true) {
+    this.canvasBlobs.set(placement, blob);
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      return false;
+    }
+    if (baseThrottleMs <= 0) {
+      this.sendBlobImmediately(placement, blob, notifyCallback);
+      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;
+      this.throttleTimeouts[placement] = setTimeout(() => {
+        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();
+        }
+        delete this.throttleTimeouts[placement];
+      }, delayTime);
+    }
+    return true;
+  }
+  sendBlobImmediately(placement, blob, notifyCallback = true) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+    this.lastSentVersion = ++this.requestVersion;
+    this.latestSentVersionByPlacement[placement] = this.lastSentVersion;
+    const versionToSend = this.lastSentVersion;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target?.result && this.ws) {
+        const imageBytes = new Uint8Array(e.target.result);
+        let combined;
+        if (this.sendVersionInBlob) {
+          const headerBytes = new TextEncoder().encode(`${placement}
+${versionToSend}
+`);
+          combined = new Uint8Array(headerBytes.length + imageBytes.length);
+          combined.set(headerBytes, 0);
+          combined.set(imageBytes, headerBytes.length);
+        } else {
+          const headerBytes = new TextEncoder().encode(`${placement}
+`);
+          combined = new Uint8Array(headerBytes.length + imageBytes.length);
+          combined.set(headerBytes, 0);
+          combined.set(imageBytes, headerBytes.length);
+        }
+        this.ws.send(combined.buffer);
+        this.addLog(`Sent canvas blob for placement "${placement}" (${imageBytes.length} bytes, v${versionToSend})`, "sent");
+        if (notifyCallback) {
+          this.callbacks.onBlobSent?.(placement);
+        }
+      }
+    };
+    reader.readAsArrayBuffer(blob);
+  }
+  /**
+   * Enable sending version number in blob messages.
+   * Call this once the server supports the new format: <placement>\n<version>\n<blob>
+   */
+  enableVersionInBlob(enabled = true) {
+    this.sendVersionInBlob = enabled;
+    this.addLog(`Version in blob ${enabled ? "enabled" : "disabled"}`);
+  }
+  /**
+   * Flush all pending throttled blobs immediately.
+   * Call this when the user finishes an action (e.g., mouse up after drag/flip)
+   * to ensure the final state is sent without waiting for throttle.
+   */
+  flushPendingBlobs() {
+    Object.keys(this.throttleTimeouts).forEach((placement) => {
+      clearTimeout(this.throttleTimeouts[placement]);
+      delete this.throttleTimeouts[placement];
+    });
+    if (this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
+      this.canvasBlobs.forEach((blob, placement) => {
+        this.sendBlobImmediately(placement, blob);
+        this.lastSendTime[placement] = Date.now();
+      });
+      this.addLog(`\u{1F680} Flushed ${this.canvasBlobs.size} pending blob(s)`);
+    }
+  }
+  /**
+   * Check if there are pending blobs waiting to be sent (in throttle queue)
+   */
+  hasPendingBlobs() {
+    return Object.keys(this.throttleTimeouts).length > 0;
+  }
+  sendColorBlob(placement, hexColor) {
+    this.colors.set(placement, hexColor);
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      return false;
+    }
+    const message = placement + "\ncolor:" + hexColor;
+    const messageBytes = new TextEncoder().encode(message);
+    this.ws.send(messageBytes.buffer);
+    this.addLog(`Sent color "${hexColor}" for placement "${placement}"`, "sent");
+    return true;
+  }
+  createEmptyCanvasBlob(width = 400, height = 400) {
+    return new Promise((resolve, reject) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Could not get canvas context"));
+        return;
+      }
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error("Could not create blob from canvas"));
+          }
+        },
+        "image/png",
+        0.8
+      );
+    });
+  }
+  async sendInitialEmptyCanvases(placements) {
+    this.addLog(`\u{1F3A8} Creating initial empty canvases for ${placements.length} placements...`);
+    let emptyCanvasCount = 0;
+    let preservedCanvasCount = 0;
+    for (const placement of placements) {
+      try {
+        const existingBlob = this.canvasBlobs.get(placement.label);
+        if (existingBlob) {
+          this.addLog(`\u{1F3AF} Preserving existing canvas for "${placement.label}" (${existingBlob.size} bytes)`);
+          preservedCanvasCount++;
+          if (this.isConfigured) {
+            this.sendCanvasBlob(placement.label, existingBlob);
+          }
+        } else {
+          const emptyBlob = await this.createEmptyCanvasBlob(
+            placement.width || 400,
+            placement.height || 400
+          );
+          const blobCachedDuringAwait = this.canvasBlobs.get(placement.label);
+          if (blobCachedDuringAwait) {
+            this.addLog(`\u{1F3AF} Skipping empty canvas for "${placement.label}" \u2014 real blob was cached during creation`);
+            preservedCanvasCount++;
+            if (this.isConfigured) {
+              this.sendCanvasBlob(placement.label, blobCachedDuringAwait);
+            }
+          } else {
+            this.canvasBlobs.set(placement.label, emptyBlob);
+            this.addLog(`\u2705 Created empty canvas for "${placement.label}" (${emptyBlob.size} bytes)`);
+            emptyCanvasCount++;
+            if (this.isConfigured) {
+              this.sendCanvasBlob(placement.label, emptyBlob);
+            }
+          }
+        }
+      } catch (error) {
+        this.addLog(`\u274C Failed to process canvas for "${placement.label}": ${error}`);
+      }
+    }
+    this.addLog(`\u{1F389} Canvas processing complete: ${preservedCanvasCount} preserved, ${emptyCanvasCount} created empty`);
+  }
+  setInitialData(canvasBlobs, colors) {
+    const existingCanvasCount = this.canvasBlobs.size;
+    if (existingCanvasCount === 0) {
+      this.canvasBlobs = new Map(canvasBlobs);
+      this.addLog(`Set initial canvas blobs: ${canvasBlobs.size} new blobs`);
+    } else {
+      this.addLog(`Preserving existing canvas blobs: ${existingCanvasCount} blobs (ignoring ${canvasBlobs.size} new empty blobs)`);
+    }
+    this.colors = new Map(colors);
+    this.addLog(`Set initial colors: ${colors.size} colors`);
+  }
+  clearLogs() {
+    this.logs = [];
+  }
+  clearMockups() {
+    this.mockupResults = [];
+  }
+};
+
+// src/index.ts
+function getFetcher(config2) {
+  return config2?.fetcher || globalThis.fetch.bind(globalThis);
+}
+function validateProductLoose(product) {
+  try {
+    return CatalogProductSchema.parse(product);
+  } catch (_err) {
+    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";
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (meilisearchApiKey) {
+    headers["Authorization"] = `Bearer ${meilisearchApiKey}`;
+  }
+  const url = `${meilisearchHost}/indexes/${meilisearchIndex}/search`;
+  const res = await f(url, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      q: "",
+      limit: config2?.limit || 1e3,
+      filter: "mockups IS NOT EMPTY"
+    })
+  });
+  if (!res.ok) throw new Error(`listProducts failed: ${res.status}`);
+  const data = await res.json();
+  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";
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (meilisearchApiKey) {
+    headers["Authorization"] = `Bearer ${meilisearchApiKey}`;
+  }
+  const url = `${meilisearchHost}/indexes/${meilisearchIndex}/documents/${idOrSlug}`;
+  const res = await f(url, { method: "GET", headers });
+  if (res.status === 404)
+    throw Object.assign(new Error("Not found"), { code: "NOT_FOUND" });
+  if (!res.ok) throw new Error(`getProduct failed: ${res.status}`);
+  const raw = await res.json();
+  return validateProductLoose(raw);
+}
+function createClient(config2) {
+  const fetcher = getFetcher(config2);
+  const mockupService = new MockupServiceImpl(config2.mockup || {}, fetcher);
+  return {
+    catalog: {
+      listProducts: (overrides) => listProducts({ ...config2, ...overrides }),
+      getProduct: (idOrSlug, overrides) => getProduct(idOrSlug, { ...config2, ...overrides })
+    },
+    mockup: mockupService
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AbstractTemplateRenderer,
+  AdapterRegistry,
+  Animations,
+  Attributes,
+  ClassNames,
+  ColorPickerUtils,
+  CommonProps,
+  ComponentEventManager,
+  ComponentFactory,
+  ComponentLifecycle,
+  ComponentRegistry,
+  ComponentTemplates,
+  ContextBridge,
+  ContextInjector,
+  ContextSynchronizer,
+  DEFAULT_ARTWORK_URL,
+  DEFAULT_ASPECT_RATIO,
+  DEFAULT_COLOR,
+  DEFAULT_PLACEMENT_DIMENSIONS,
+  Elements,
+  ErrorManager,
+  EventDelegator,
+  EventEmitter,
+  Focus,
+  LifecycleManager,
+  LitAdapter,
+  ProductContextManager,
+  ProductLoader,
+  ProductProps,
+  PropertyManager,
+  RealtimeMockupService,
+  StandardComponents,
+  StandardEvents,
+  StateManager,
+  Styles,
+  SvelteAdapter,
+  SwatchUtils,
+  TemplateBuilder,
+  UniversalContextProvider,
+  VueAdapter,
+  adapterRegistry,
+  autoRegister,
+  componentRegistry,
+  computeDisabledChoices,
+  config,
+  createAddToCartEvent,
+  createAddToCartHandler,
+  createCartDetail,
+  createClient,
+  createComponent,
+  createContextProvider,
+  createDesignForPlacements,
+  createDevFetcher,
+  createErrorHandler,
+  createEventManager,
+  createLifecycle,
+  createLitComponent,
+  createProductContext,
+  createProductLoader,
+  createPropertyManager,
+  createStateHook,
+  createStateStore,
+  createSvelteComponent,
+  createUniversalProvider,
+  createVueComponent,
+  defineComponent,
+  deriveDefaultSelection,
+  describeArtSelector,
+  describeProductArtAlignment,
+  describeProductImage,
+  describeProductOptions,
+  describeProductPrice,
+  describeProductTitle,
+  extractProductId,
+  filterImagePlacements,
+  findBestCombination,
+  findClosestSnapPoint,
+  findVariantForSelection,
+  formatPrice,
+  formatValidationErrors,
+  getDefaultVariantId,
+  getEffectiveAlignment,
+  getIncompleteSelectionMessage,
+  getMissingSelections,
+  getOptionRenderType,
+  getPricePreview,
+  getProduct,
+  getSelectionDisplayText,
+  getSnapPoints,
+  getVariant,
+  handleOptionChange,
+  isOptionAvailable,
+  isSelectionComplete,
+  isValidAlignment,
+  isValidTileCount,
+  listProducts,
+  mockupUrl,
+  normalizeChoice,
+  prepareOptionRenderData,
+  registerStandardComponents,
+  resolveBestCombination,
+  resolveMockupConfig,
+  resolveMockupId,
+  resolveVariantId,
+  retryOperation,
+  simulateCartOperation,
+  toCombinations,
+  toOptionAttributes,
+  useVueAdapter,
+  validateAlignment,
+  validateDesignElement,
+  validateEffects,
+  validateImageUrl,
+  validateMockupOptions,
+  validateProductSelection,
+  validateProductSpec,
+  validateRequiredOptions,
+  validateTileCount,
+  withContext,
+  withErrorHandling,
+  withSyncErrorHandling
+});