@cimplify/sdk 0.48.2 → 0.49.1

package/dist/server.js

@@ -41,12 +41,25 @@ var tags = {
   collection: (id) => `cimplify:collection:${id}`,
   collectionProducts: (id) => `cimplify:collection:${id}:products`,
   business: () => "cimplify:business",
+  brand: () => "cimplify:brand",
   locations: () => "cimplify:locations",
+  location: (id) => `cimplify:location:${id}`,
+  locale: () => "cimplify:locale",
+  pricing: () => "cimplify:pricing",
+  // Product-level tag (e.g. "vegan", "bestseller"), not "cache tag".
+  tag: (name) => `cimplify:tag:${name}`,
+  addons: () => "cimplify:addons",
+  addon: (id) => `cimplify:addon:${id}`,
+  subscriptions: () => "cimplify:subscriptions",
+  subscription: (id) => `cimplify:subscription:${id}`,
+  stock: () => "cimplify:stock",
+  stockFor: (productId) => `cimplify:stock:${productId}`,
   orders: (customerId) => `cimplify:orders:${customerId}`,
   order: (id) => `cimplify:order:${id}`
 };
 
 // src/server/revalidate.ts
+var DEFAULT_PROFILE = "max";
 var _revalidateTag = null;
 async function getRevalidateTag() {
   if (_revalidateTag) return _revalidateTag;
@@ -59,37 +72,241 @@ async function getRevalidateTag() {
   _revalidateTag = mod.revalidateTag;
   return _revalidateTag;
 }
-async function revalidate(...tagList) {
+async function revalidate(profile, ...tagList) {
   const fn = await getRevalidateTag();
-  for (const t of tagList) fn(t);
+  for (const t of tagList) fn(t, profile);
 }
-async function revalidateProducts() {
-  return revalidate(tags.products());
+async function revalidateProducts(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.products());
 }
-async function revalidateProduct(id) {
-  return revalidate(tags.product(id), tags.products());
+async function revalidateProduct(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.product(id), tags.products());
 }
-async function revalidateCategories() {
-  return revalidate(tags.categories());
+async function revalidateCategories(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.categories());
 }
-async function revalidateCategory(id) {
-  return revalidate(tags.category(id), tags.categoryProducts(id), tags.categories());
+async function revalidateCategory(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.category(id), tags.categoryProducts(id), tags.categories());
 }
-async function revalidateCollections() {
-  return revalidate(tags.collections());
+async function revalidateCollections(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.collections());
 }
-async function revalidateCollection(id) {
+async function revalidateCollection(id, profile = DEFAULT_PROFILE) {
   return revalidate(
+    profile,
     tags.collection(id),
     tags.collectionProducts(id),
     tags.collections()
   );
 }
-async function revalidateBusiness() {
-  return revalidate(tags.business());
+async function revalidateBusiness(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.business());
+}
+async function revalidateBrand(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.brand());
+}
+async function revalidateLocations(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.locations());
+}
+async function revalidateLocation(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.location(id), tags.locations());
+}
+async function revalidatePricing(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.pricing(), tags.products());
+}
+async function revalidateAddOns(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.addons());
+}
+async function revalidateAddOn(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.addon(id), tags.addons());
+}
+async function revalidateSubscriptions(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.subscriptions());
+}
+async function revalidateSubscription(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.subscription(id), tags.subscriptions());
+}
+async function revalidateStock(productId, profile = DEFAULT_PROFILE) {
+  return productId ? revalidate(profile, tags.stockFor(productId), tags.stock()) : revalidate(profile, tags.stock());
+}
+async function revalidateByTag(tag, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tag);
+}
+
+// src/server/update.ts
+var _updateTag = null;
+var _refresh = null;
+async function getUpdateTag() {
+  if (_updateTag) return _updateTag;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  if (!mod.updateTag) {
+    throw new Error("updateTag is not exported from next/cache \u2014 requires Next 16+");
+  }
+  _updateTag = mod.updateTag;
+  return _updateTag;
+}
+async function getRefresh() {
+  if (_refresh) return _refresh;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  if (!mod.refresh) {
+    throw new Error("refresh is not exported from next/cache \u2014 requires Next 16+");
+  }
+  _refresh = mod.refresh;
+  return _refresh;
+}
+async function update(...tagList) {
+  const fn = await getUpdateTag();
+  for (const t of tagList) fn(t);
+}
+async function updateProducts() {
+  return update(tags.products());
+}
+async function updateProduct(id) {
+  return update(tags.product(id), tags.products());
+}
+async function updateCategories() {
+  return update(tags.categories());
+}
+async function updateCategory(id) {
+  return update(tags.category(id), tags.categoryProducts(id), tags.categories());
+}
+async function updateCollections() {
+  return update(tags.collections());
+}
+async function updateCollection(id) {
+  return update(tags.collection(id), tags.collectionProducts(id), tags.collections());
+}
+async function updateBusiness() {
+  return update(tags.business());
+}
+async function updateBrand() {
+  return update(tags.brand());
+}
+async function updateLocations() {
+  return update(tags.locations());
+}
+async function updateLocation(id) {
+  return update(tags.location(id), tags.locations());
+}
+async function updatePricing() {
+  return update(tags.pricing(), tags.products());
+}
+async function updateAddOns() {
+  return update(tags.addons());
+}
+async function updateAddOn(id) {
+  return update(tags.addon(id), tags.addons());
+}
+async function updateSubscriptions() {
+  return update(tags.subscriptions());
+}
+async function updateSubscription(id) {
+  return update(tags.subscription(id), tags.subscriptions());
+}
+async function updateStock(productId) {
+  return productId ? update(tags.stockFor(productId), tags.stock()) : update(tags.stock());
+}
+async function updateByTag(tag) {
+  return update(tag);
+}
+async function refreshPage() {
+  const fn = await getRefresh();
+  fn();
+}
+
+// src/server/revalidate-route.ts
+var TIMESTAMP_HEADER = "x-cimplify-timestamp";
+var SIGNATURE_HEADER = "x-cimplify-signature";
+var SIGNATURE_PREFIX = "sha256=";
+var MAX_SKEW_MS = 5 * 60 * 1e3;
+var SECRET_ENV = "CIMPLIFY_REVALIDATE_SECRET";
+var DEFAULT_PROFILE2 = "max";
+async function revalidateRouteHandler(req, options = {}) {
+  const secret = options.secret ?? envSecret();
+  if (!secret) return text(`revalidate disabled: ${SECRET_ENV} not set`, 500);
+  const timestamp = req.headers.get(TIMESTAMP_HEADER);
+  const signature = req.headers.get(SIGNATURE_HEADER);
+  if (!timestamp || !signature) return text("missing auth headers", 401);
+  const ts = Number.parseInt(timestamp, 10);
+  const now = options.now ?? Date.now;
+  if (!Number.isFinite(ts) || Math.abs(now() - ts) > MAX_SKEW_MS) {
+    return text("stale or invalid timestamp", 401);
+  }
+  const body = await req.text();
+  if (!await verifyHmac(secret, `${timestamp}.${body}`, signature)) {
+    return text("invalid signature", 401);
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(body);
+  } catch {
+    return text("invalid json", 400);
+  }
+  const tags2 = Array.isArray(parsed.tags) ? parsed.tags.filter((t) => typeof t === "string" && t.length > 0) : [];
+  if (tags2.length === 0) return text("no tags", 400);
+  const profile = parseProfile(parsed.profile) ?? options.defaultProfile ?? DEFAULT_PROFILE2;
+  const revalidate2 = options.revalidateTag ?? await loadRevalidateTag();
+  for (const tag of tags2) revalidate2(tag, profile);
+  return Response.json({ ok: true, revalidated: tags2.length, profile });
+}
+function parseProfile(raw) {
+  if (typeof raw === "string" && raw.length > 0) return raw;
+  if (raw && typeof raw === "object" && "expire" in raw && typeof raw.expire === "number") {
+    return { expire: raw.expire };
+  }
+  return void 0;
+}
+var cachedRevalidateTag = null;
+async function loadRevalidateTag() {
+  if (cachedRevalidateTag) return cachedRevalidateTag;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  cachedRevalidateTag = mod.revalidateTag;
+  return cachedRevalidateTag;
+}
+async function verifyHmac(secret, payload, signatureHeader) {
+  if (!signatureHeader.startsWith(SIGNATURE_PREFIX)) return false;
+  const providedBytes = hexToBytes(signatureHeader.slice(SIGNATURE_PREFIX.length));
+  if (!providedBytes) return false;
+  const enc = new TextEncoder();
+  const key = await crypto.subtle.importKey(
+    "raw",
+    enc.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["verify"]
+  );
+  return crypto.subtle.verify("HMAC", key, providedBytes, enc.encode(payload));
+}
+function hexToBytes(hex) {
+  if (hex.length % 2 !== 0 || !/^[0-9a-f]+$/i.test(hex)) return null;
+  const buf = new ArrayBuffer(hex.length / 2);
+  const out = new Uint8Array(buf);
+  for (let i = 0; i < hex.length; i += 2) {
+    out[i / 2] = Number.parseInt(hex.slice(i, i + 2), 16);
+  }
+  return out;
+}
+function envSecret() {
+  const proc = globalThis.process;
+  return proc?.env?.[SECRET_ENV];
 }
-async function revalidateByTag(tag) {
-  return revalidate(tag);
+function text(message, status) {
+  return new Response(message, { status, headers: { "content-type": "text/plain" } });
 }
 
 Object.defineProperty(exports, "CimplifyError", {
@@ -97,12 +314,40 @@ Object.defineProperty(exports, "CimplifyError", {
   get: function () { return chunkTKOTACKZ_js.CimplifyError; }
 });
 exports.getServerClient = getServerClient;
+exports.refreshPage = refreshPage;
+exports.revalidateAddOn = revalidateAddOn;
+exports.revalidateAddOns = revalidateAddOns;
+exports.revalidateBrand = revalidateBrand;
 exports.revalidateBusiness = revalidateBusiness;
 exports.revalidateByTag = revalidateByTag;
 exports.revalidateCategories = revalidateCategories;
 exports.revalidateCategory = revalidateCategory;
 exports.revalidateCollection = revalidateCollection;
 exports.revalidateCollections = revalidateCollections;
+exports.revalidateLocation = revalidateLocation;
+exports.revalidateLocations = revalidateLocations;
+exports.revalidatePricing = revalidatePricing;
 exports.revalidateProduct = revalidateProduct;
 exports.revalidateProducts = revalidateProducts;
+exports.revalidateRouteHandler = revalidateRouteHandler;
+exports.revalidateStock = revalidateStock;
+exports.revalidateSubscription = revalidateSubscription;
+exports.revalidateSubscriptions = revalidateSubscriptions;
 exports.tags = tags;
+exports.updateAddOn = updateAddOn;
+exports.updateAddOns = updateAddOns;
+exports.updateBrand = updateBrand;
+exports.updateBusiness = updateBusiness;
+exports.updateByTag = updateByTag;
+exports.updateCategories = updateCategories;
+exports.updateCategory = updateCategory;
+exports.updateCollection = updateCollection;
+exports.updateCollections = updateCollections;
+exports.updateLocation = updateLocation;
+exports.updateLocations = updateLocations;
+exports.updatePricing = updatePricing;
+exports.updateProduct = updateProduct;
+exports.updateProducts = updateProducts;
+exports.updateStock = updateStock;
+exports.updateSubscription = updateSubscription;
+exports.updateSubscriptions = updateSubscriptions;

package/dist/server.mjs

@@ -39,12 +39,25 @@ var tags = {
   collection: (id) => `cimplify:collection:${id}`,
   collectionProducts: (id) => `cimplify:collection:${id}:products`,
   business: () => "cimplify:business",
+  brand: () => "cimplify:brand",
   locations: () => "cimplify:locations",
+  location: (id) => `cimplify:location:${id}`,
+  locale: () => "cimplify:locale",
+  pricing: () => "cimplify:pricing",
+  // Product-level tag (e.g. "vegan", "bestseller"), not "cache tag".
+  tag: (name) => `cimplify:tag:${name}`,
+  addons: () => "cimplify:addons",
+  addon: (id) => `cimplify:addon:${id}`,
+  subscriptions: () => "cimplify:subscriptions",
+  subscription: (id) => `cimplify:subscription:${id}`,
+  stock: () => "cimplify:stock",
+  stockFor: (productId) => `cimplify:stock:${productId}`,
   orders: (customerId) => `cimplify:orders:${customerId}`,
   order: (id) => `cimplify:order:${id}`
 };
 
 // src/server/revalidate.ts
+var DEFAULT_PROFILE = "max";
 var _revalidateTag = null;
 async function getRevalidateTag() {
   if (_revalidateTag) return _revalidateTag;
@@ -57,37 +70,241 @@ async function getRevalidateTag() {
   _revalidateTag = mod.revalidateTag;
   return _revalidateTag;
 }
-async function revalidate(...tagList) {
+async function revalidate(profile, ...tagList) {
   const fn = await getRevalidateTag();
-  for (const t of tagList) fn(t);
+  for (const t of tagList) fn(t, profile);
 }
-async function revalidateProducts() {
-  return revalidate(tags.products());
+async function revalidateProducts(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.products());
 }
-async function revalidateProduct(id) {
-  return revalidate(tags.product(id), tags.products());
+async function revalidateProduct(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.product(id), tags.products());
 }
-async function revalidateCategories() {
-  return revalidate(tags.categories());
+async function revalidateCategories(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.categories());
 }
-async function revalidateCategory(id) {
-  return revalidate(tags.category(id), tags.categoryProducts(id), tags.categories());
+async function revalidateCategory(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.category(id), tags.categoryProducts(id), tags.categories());
 }
-async function revalidateCollections() {
-  return revalidate(tags.collections());
+async function revalidateCollections(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.collections());
 }
-async function revalidateCollection(id) {
+async function revalidateCollection(id, profile = DEFAULT_PROFILE) {
   return revalidate(
+    profile,
     tags.collection(id),
     tags.collectionProducts(id),
     tags.collections()
   );
 }
-async function revalidateBusiness() {
-  return revalidate(tags.business());
+async function revalidateBusiness(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.business());
+}
+async function revalidateBrand(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.brand());
+}
+async function revalidateLocations(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.locations());
+}
+async function revalidateLocation(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.location(id), tags.locations());
+}
+async function revalidatePricing(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.pricing(), tags.products());
+}
+async function revalidateAddOns(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.addons());
+}
+async function revalidateAddOn(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.addon(id), tags.addons());
+}
+async function revalidateSubscriptions(profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.subscriptions());
+}
+async function revalidateSubscription(id, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tags.subscription(id), tags.subscriptions());
+}
+async function revalidateStock(productId, profile = DEFAULT_PROFILE) {
+  return productId ? revalidate(profile, tags.stockFor(productId), tags.stock()) : revalidate(profile, tags.stock());
+}
+async function revalidateByTag(tag, profile = DEFAULT_PROFILE) {
+  return revalidate(profile, tag);
+}
+
+// src/server/update.ts
+var _updateTag = null;
+var _refresh = null;
+async function getUpdateTag() {
+  if (_updateTag) return _updateTag;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  if (!mod.updateTag) {
+    throw new Error("updateTag is not exported from next/cache \u2014 requires Next 16+");
+  }
+  _updateTag = mod.updateTag;
+  return _updateTag;
+}
+async function getRefresh() {
+  if (_refresh) return _refresh;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  if (!mod.refresh) {
+    throw new Error("refresh is not exported from next/cache \u2014 requires Next 16+");
+  }
+  _refresh = mod.refresh;
+  return _refresh;
+}
+async function update(...tagList) {
+  const fn = await getUpdateTag();
+  for (const t of tagList) fn(t);
+}
+async function updateProducts() {
+  return update(tags.products());
+}
+async function updateProduct(id) {
+  return update(tags.product(id), tags.products());
+}
+async function updateCategories() {
+  return update(tags.categories());
+}
+async function updateCategory(id) {
+  return update(tags.category(id), tags.categoryProducts(id), tags.categories());
+}
+async function updateCollections() {
+  return update(tags.collections());
+}
+async function updateCollection(id) {
+  return update(tags.collection(id), tags.collectionProducts(id), tags.collections());
+}
+async function updateBusiness() {
+  return update(tags.business());
+}
+async function updateBrand() {
+  return update(tags.brand());
+}
+async function updateLocations() {
+  return update(tags.locations());
+}
+async function updateLocation(id) {
+  return update(tags.location(id), tags.locations());
+}
+async function updatePricing() {
+  return update(tags.pricing(), tags.products());
+}
+async function updateAddOns() {
+  return update(tags.addons());
+}
+async function updateAddOn(id) {
+  return update(tags.addon(id), tags.addons());
+}
+async function updateSubscriptions() {
+  return update(tags.subscriptions());
+}
+async function updateSubscription(id) {
+  return update(tags.subscription(id), tags.subscriptions());
+}
+async function updateStock(productId) {
+  return productId ? update(tags.stockFor(productId), tags.stock()) : update(tags.stock());
+}
+async function updateByTag(tag) {
+  return update(tag);
+}
+async function refreshPage() {
+  const fn = await getRefresh();
+  fn();
+}
+
+// src/server/revalidate-route.ts
+var TIMESTAMP_HEADER = "x-cimplify-timestamp";
+var SIGNATURE_HEADER = "x-cimplify-signature";
+var SIGNATURE_PREFIX = "sha256=";
+var MAX_SKEW_MS = 5 * 60 * 1e3;
+var SECRET_ENV = "CIMPLIFY_REVALIDATE_SECRET";
+var DEFAULT_PROFILE2 = "max";
+async function revalidateRouteHandler(req, options = {}) {
+  const secret = options.secret ?? envSecret();
+  if (!secret) return text(`revalidate disabled: ${SECRET_ENV} not set`, 500);
+  const timestamp = req.headers.get(TIMESTAMP_HEADER);
+  const signature = req.headers.get(SIGNATURE_HEADER);
+  if (!timestamp || !signature) return text("missing auth headers", 401);
+  const ts = Number.parseInt(timestamp, 10);
+  const now = options.now ?? Date.now;
+  if (!Number.isFinite(ts) || Math.abs(now() - ts) > MAX_SKEW_MS) {
+    return text("stale or invalid timestamp", 401);
+  }
+  const body = await req.text();
+  if (!await verifyHmac(secret, `${timestamp}.${body}`, signature)) {
+    return text("invalid signature", 401);
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(body);
+  } catch {
+    return text("invalid json", 400);
+  }
+  const tags2 = Array.isArray(parsed.tags) ? parsed.tags.filter((t) => typeof t === "string" && t.length > 0) : [];
+  if (tags2.length === 0) return text("no tags", 400);
+  const profile = parseProfile(parsed.profile) ?? options.defaultProfile ?? DEFAULT_PROFILE2;
+  const revalidate2 = options.revalidateTag ?? await loadRevalidateTag();
+  for (const tag of tags2) revalidate2(tag, profile);
+  return Response.json({ ok: true, revalidated: tags2.length, profile });
+}
+function parseProfile(raw) {
+  if (typeof raw === "string" && raw.length > 0) return raw;
+  if (raw && typeof raw === "object" && "expire" in raw && typeof raw.expire === "number") {
+    return { expire: raw.expire };
+  }
+  return void 0;
+}
+var cachedRevalidateTag = null;
+async function loadRevalidateTag() {
+  if (cachedRevalidateTag) return cachedRevalidateTag;
+  const specifier = "next/cache";
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    specifier
+  );
+  cachedRevalidateTag = mod.revalidateTag;
+  return cachedRevalidateTag;
+}
+async function verifyHmac(secret, payload, signatureHeader) {
+  if (!signatureHeader.startsWith(SIGNATURE_PREFIX)) return false;
+  const providedBytes = hexToBytes(signatureHeader.slice(SIGNATURE_PREFIX.length));
+  if (!providedBytes) return false;
+  const enc = new TextEncoder();
+  const key = await crypto.subtle.importKey(
+    "raw",
+    enc.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["verify"]
+  );
+  return crypto.subtle.verify("HMAC", key, providedBytes, enc.encode(payload));
+}
+function hexToBytes(hex) {
+  if (hex.length % 2 !== 0 || !/^[0-9a-f]+$/i.test(hex)) return null;
+  const buf = new ArrayBuffer(hex.length / 2);
+  const out = new Uint8Array(buf);
+  for (let i = 0; i < hex.length; i += 2) {
+    out[i / 2] = Number.parseInt(hex.slice(i, i + 2), 16);
+  }
+  return out;
+}
+function envSecret() {
+  const proc = globalThis.process;
+  return proc?.env?.[SECRET_ENV];
 }
-async function revalidateByTag(tag) {
-  return revalidate(tag);
+function text(message, status) {
+  return new Response(message, { status, headers: { "content-type": "text/plain" } });
 }
 
-export { getServerClient, revalidateBusiness, revalidateByTag, revalidateCategories, revalidateCategory, revalidateCollection, revalidateCollections, revalidateProduct, revalidateProducts, tags };
+export { getServerClient, refreshPage, revalidateAddOn, revalidateAddOns, revalidateBrand, revalidateBusiness, revalidateByTag, revalidateCategories, revalidateCategory, revalidateCollection, revalidateCollections, revalidateLocation, revalidateLocations, revalidatePricing, revalidateProduct, revalidateProducts, revalidateRouteHandler, revalidateStock, revalidateSubscription, revalidateSubscriptions, tags, updateAddOn, updateAddOns, updateBrand, updateBusiness, updateByTag, updateCategories, updateCategory, updateCollection, updateCollections, updateLocation, updateLocations, updatePricing, updateProduct, updateProducts, updateStock, updateSubscription, updateSubscriptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.48.2",
+  "version": "0.49.1",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/index.json

@@ -71,6 +71,30 @@
       "type": "component",
       "registryDependencies": []
     },
+    {
+      "name": "store-video",
+      "title": "StoreVideo",
+      "description": "Autoplay-muted-loop video for storefront heroes / product demos. Lazy-loaded, mobile-safe (playsInline), poster fallback for browsers without video.",
+      "type": "component",
+      "registryDependencies": []
+    },
+    {
+      "name": "product-model-3d",
+      "title": "ProductModel3D",
+      "description": "Interactive 3D product viewer wrapping Google's <model-viewer>. Loads the web component on demand; AR mode lights up on iOS (Quick Look) and Android (Scene Viewer) automatically.",
+      "type": "component",
+      "registryDependencies": []
+    },
+    {
+      "name": "media-gallery",
+      "title": "MediaGallery",
+      "description": "Like ProductImageGallery but accepts mixed image/video/3D items in one carousel. Thumbnails show a poster + small overlay icon for video/3D.",
+      "type": "component",
+      "registryDependencies": [
+        "store-video",
+        "product-model-3d"
+      ]
+    },
     {
       "name": "cart-summary",
       "title": "CartSummary",

package/registry/media-gallery.json

@@ -0,0 +1,16 @@
+{
+  "name": "media-gallery",
+  "title": "MediaGallery",
+  "description": "Like ProductImageGallery but accepts mixed image/video/3D items in one carousel. Thumbnails show a poster + small overlay icon for video/3D.",
+  "type": "component",
+  "registryDependencies": [
+    "store-video",
+    "product-model-3d"
+  ],
+  "files": [
+    {
+      "path": "media-gallery.tsx",
+      "content": "\"use client\";\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"@base-ui/react/radio\";\nimport { StoreVideo } from \"@cimplify/sdk/react\";\nimport { ProductModel3D } from \"@cimplify/sdk/react\";\n\nexport type MediaItem =\n  | { type: \"image\"; src: string; alt?: string }\n  | { type: \"video\"; src: string; poster?: string; alt?: string }\n  | { type: \"model\"; src: string; iosSrc?: string; poster?: string; alt?: string };\n\nexport interface MediaGalleryProps {\n  items: MediaItem[];\n  productName: string;\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  className?: string;\n}\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/10\": { aspectRatio: \"16/10\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nfunction thumbnailFor(item: MediaItem): string | null {\n  if (item.type === \"image\") return item.src;\n  return item.poster ?? null;\n}\n\nfunction thumbIcon(item: MediaItem): string | null {\n  if (item.type === \"video\") return \"▶\";\n  if (item.type === \"model\") return \"◆\";\n  return null;\n}\n\n/**\n * MediaGallery — like ProductImageGallery, but accepts mixed image/video/3D\n * items in one carousel. The active item renders via the matching SDK\n * component (img / StoreVideo / ProductModel3D); thumbnails show a poster\n * (or the image itself) with a small overlay icon for video/3D.\n */\nexport function MediaGallery({\n  items,\n  productName,\n  aspectRatio = \"4/3\",\n  className,\n}: MediaGalleryProps): React.ReactElement | null {\n  const validItems = useMemo(\n    () => items.filter((i) => typeof i.src === \"string\" && i.src.trim().length > 0),\n    [items],\n  );\n\n  const [selected, setSelected] = useState(0);\n\n  useEffect(() => {\n    setSelected(0);\n  }, [validItems.length, productName]);\n\n  if (validItems.length === 0) return null;\n\n  const active = validItems[selected] ?? validItems[0];\n\n  return (\n    <div data-cimplify-media-gallery className={className}>\n      <div\n        data-cimplify-media-gallery-main\n        style={{ position: \"relative\", overflow: \"hidden\", ...ASPECT_STYLES[aspectRatio] }}\n      >\n        {active.type === \"image\" ? (\n          <img\n            src={active.src}\n            alt={active.alt ?? productName}\n            style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n            data-cimplify-media-gallery-active\n          />\n        ) : active.type === \"video\" ? (\n          <StoreVideo\n            src={active.src}\n            poster={active.poster}\n            alt={active.alt ?? productName}\n            aspectRatio=\"square\"\n            lazy={false}\n          />\n        ) : (\n          <ProductModel3D\n            src={active.src}\n            iosSrc={active.iosSrc}\n            poster={active.poster}\n            alt={active.alt ?? productName}\n            aspectRatio=\"square\"\n          />\n        )}\n      </div>\n\n      {validItems.length > 1 && (\n        <RadioGroup\n          aria-label={`${productName} media thumbnails`}\n          value={String(selected)}\n          onValueChange={(v) => setSelected(Number(v))}\n          data-cimplify-media-gallery-thumbnails\n          style={{ display: \"flex\", gap: \"0.5rem\", marginTop: \"0.75rem\" }}\n        >\n          {validItems.map((item, index) => {\n            const thumb = thumbnailFor(item);\n            const icon = thumbIcon(item);\n            const isSelected = selected === index;\n            return (\n              <Radio.Root\n                key={`${item.src}-${index}`}\n                value={String(index)}\n                data-cimplify-media-gallery-thumb\n                data-selected={isSelected || undefined}\n                data-type={item.type}\n                style={{\n                  position: \"relative\",\n                  width: \"4rem\",\n                  height: \"4rem\",\n                  overflow: \"hidden\",\n                  padding: 0,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                  backgroundColor: \"var(--muted, #f3f4f6)\",\n                }}\n              >\n                {thumb ? (\n                  <img\n                    src={thumb}\n                    alt=\"\"\n                    style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                  />\n                ) : null}\n                {icon ? (\n                  <span\n                    aria-hidden\n                    style={{\n                      position: \"absolute\",\n                      inset: 0,\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"center\",\n                      color: \"white\",\n                      fontSize: \"0.875rem\",\n                      textShadow: \"0 1px 2px rgba(0,0,0,0.6)\",\n                      pointerEvents: \"none\",\n                    }}\n                  >\n                    {icon}\n                  </span>\n                ) : null}\n              </Radio.Root>\n            );\n          })}\n        </RadioGroup>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}