@cimplify/sdk 0.44.18 → 0.44.20

package/dist/testing.js

@@ -1,28 +1,28 @@
 'use strict';
 
-var chunk53J2WE4S_js = require('./chunk-53J2WE4S.js');
+var chunkQ4I7JRGO_js = require('./chunk-Q4I7JRGO.js');
 require('./chunk-3FS3ZDKX.js');
 require('./chunk-HBRCVJL4.js');
 require('./chunk-BN2CXGMO.js');
-require('./chunk-CCSONJCO.js');
+require('./chunk-PGSM3NQ2.js');
 require('./chunk-QBQCMQ4F.js');
 var zod = require('zod');
 
 var PUBLIC_SCHEMAS = {
-  Brand: chunk53J2WE4S_js.BrandSchema,
-  AddItemPayload: chunk53J2WE4S_js.AddItemPayloadSchema,
-  Cart: chunk53J2WE4S_js.CartSchema,
-  CartItem: chunk53J2WE4S_js.CartItemSchema,
-  CartPricing: chunk53J2WE4S_js.CartPricingSchema,
-  CheckoutBody: chunk53J2WE4S_js.CheckoutBodySchema,
-  CheckoutResponse: chunk53J2WE4S_js.CheckoutResponseSchema,
-  VariantInfo: chunk53J2WE4S_js.VariantInfoSchema
+  Brand: chunkQ4I7JRGO_js.BrandSchema,
+  AddItemPayload: chunkQ4I7JRGO_js.AddItemPayloadSchema,
+  Cart: chunkQ4I7JRGO_js.CartSchema,
+  CartItem: chunkQ4I7JRGO_js.CartItemSchema,
+  CartPricing: chunkQ4I7JRGO_js.CartPricingSchema,
+  CheckoutBody: chunkQ4I7JRGO_js.CheckoutBodySchema,
+  CheckoutResponse: chunkQ4I7JRGO_js.CheckoutResponseSchema,
+  VariantInfo: chunkQ4I7JRGO_js.VariantInfoSchema
 };
 function exportJsonSchemas() {
   const out = {};
   for (const [name, schema] of Object.entries(PUBLIC_SCHEMAS)) {
-    const meta = chunk53J2WE4S_js.cimplifyRegistry.get(schema);
-    const json = zod.z.toJSONSchema(schema, { metadata: chunk53J2WE4S_js.cimplifyRegistry });
+    const meta = chunkQ4I7JRGO_js.cimplifyRegistry.get(schema);
+    const json = zod.z.toJSONSchema(schema, { metadata: chunkQ4I7JRGO_js.cimplifyRegistry });
     if (meta) {
       json.$id = meta.id;
       json["x-cimplify-version"] = meta.version;
@@ -34,16 +34,16 @@ function exportJsonSchemas() {
 function listRegisteredSchemas() {
   const entries = [];
   for (const schema of [
-    chunk53J2WE4S_js.BrandSchema,
-    chunk53J2WE4S_js.AddItemPayloadSchema,
-    chunk53J2WE4S_js.CartSchema,
-    chunk53J2WE4S_js.CartItemSchema,
-    chunk53J2WE4S_js.CartPricingSchema,
-    chunk53J2WE4S_js.CheckoutBodySchema,
-    chunk53J2WE4S_js.CheckoutResponseSchema,
-    chunk53J2WE4S_js.VariantInfoSchema
+    chunkQ4I7JRGO_js.BrandSchema,
+    chunkQ4I7JRGO_js.AddItemPayloadSchema,
+    chunkQ4I7JRGO_js.CartSchema,
+    chunkQ4I7JRGO_js.CartItemSchema,
+    chunkQ4I7JRGO_js.CartPricingSchema,
+    chunkQ4I7JRGO_js.CheckoutBodySchema,
+    chunkQ4I7JRGO_js.CheckoutResponseSchema,
+    chunkQ4I7JRGO_js.VariantInfoSchema
   ]) {
-    const meta = chunk53J2WE4S_js.cimplifyRegistry.get(schema);
+    const meta = chunkQ4I7JRGO_js.cimplifyRegistry.get(schema);
     if (meta) entries.push({ schema, meta });
   }
   return entries;
@@ -51,211 +51,227 @@ function listRegisteredSchemas() {
 
 Object.defineProperty(exports, "AddItemPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.AddItemPayloadSchema; }
+  get: function () { return chunkQ4I7JRGO_js.AddItemPayloadSchema; }
 });
 Object.defineProperty(exports, "AddOnDetailsSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.AddOnDetailsSchema; }
+  get: function () { return chunkQ4I7JRGO_js.AddOnDetailsSchema; }
+});
+Object.defineProperty(exports, "AddOnGroupDetailsSchema", {
+  enumerable: true,
+  get: function () { return chunkQ4I7JRGO_js.AddOnGroupDetailsSchema; }
+});
+Object.defineProperty(exports, "AddOnInDetailsSchema", {
+  enumerable: true,
+  get: function () { return chunkQ4I7JRGO_js.AddOnInDetailsSchema; }
+});
+Object.defineProperty(exports, "AddOnOptionDetailsSchema", {
+  enumerable: true,
+  get: function () { return chunkQ4I7JRGO_js.AddOnOptionDetailsSchema; }
 });
 Object.defineProperty(exports, "AuthorizationTypeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.AuthorizationTypeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.AuthorizationTypeSchema; }
 });
 Object.defineProperty(exports, "BrandContactSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandContactSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandContactSchema; }
 });
 Object.defineProperty(exports, "BrandFaqSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandFaqSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandFaqSchema; }
 });
 Object.defineProperty(exports, "BrandHeroSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandHeroSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandHeroSchema; }
 });
 Object.defineProperty(exports, "BrandNavLinkSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandNavLinkSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandNavLinkSchema; }
 });
 Object.defineProperty(exports, "BrandPolicyPageSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandPolicyPageSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandPolicyPageSchema; }
 });
 Object.defineProperty(exports, "BrandPolicySectionSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandPolicySectionSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandPolicySectionSchema; }
 });
 Object.defineProperty(exports, "BrandSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandSchema; }
 });
 Object.defineProperty(exports, "BrandSocialSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BrandSocialSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BrandSocialSchema; }
 });
 Object.defineProperty(exports, "BundleResolvedSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BundleResolvedSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BundleResolvedSchema; }
 });
 Object.defineProperty(exports, "BundleSelectionInputSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.BundleSelectionInputSchema; }
+  get: function () { return chunkQ4I7JRGO_js.BundleSelectionInputSchema; }
 });
 Object.defineProperty(exports, "CartItemSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CartItemSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CartItemSchema; }
 });
 Object.defineProperty(exports, "CartPricingSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CartPricingSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CartPricingSchema; }
 });
 Object.defineProperty(exports, "CartSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CartSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CartSchema; }
 });
 Object.defineProperty(exports, "CheckoutBodySchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CheckoutBodySchema; }
+  get: function () { return chunkQ4I7JRGO_js.CheckoutBodySchema; }
 });
 Object.defineProperty(exports, "CheckoutCustomerSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CheckoutCustomerSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CheckoutCustomerSchema; }
 });
 Object.defineProperty(exports, "CheckoutResponseSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CheckoutResponseSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CheckoutResponseSchema; }
 });
 Object.defineProperty(exports, "ChosenPriceSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.ChosenPriceSchema; }
+  get: function () { return chunkQ4I7JRGO_js.ChosenPriceSchema; }
 });
 Object.defineProperty(exports, "CompositeResolvedSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CompositeResolvedSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CompositeResolvedSchema; }
 });
 Object.defineProperty(exports, "CompositeSelectionInputSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CompositeSelectionInputSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CompositeSelectionInputSchema; }
 });
 Object.defineProperty(exports, "CountryCodeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CountryCodeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CountryCodeSchema; }
 });
 Object.defineProperty(exports, "CurrencyCodeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CurrencyCodeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CurrencyCodeSchema; }
 });
 Object.defineProperty(exports, "CustomerInputValueSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.CustomerInputValueSchema; }
+  get: function () { return chunkQ4I7JRGO_js.CustomerInputValueSchema; }
 });
 Object.defineProperty(exports, "DiscountDetailsSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.DiscountDetailsSchema; }
+  get: function () { return chunkQ4I7JRGO_js.DiscountDetailsSchema; }
 });
 Object.defineProperty(exports, "IsoDateTimeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.IsoDateTimeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.IsoDateTimeSchema; }
 });
 Object.defineProperty(exports, "LineTypeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.LineTypeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.LineTypeSchema; }
 });
 Object.defineProperty(exports, "LocaleSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.LocaleSchema; }
+  get: function () { return chunkQ4I7JRGO_js.LocaleSchema; }
 });
 Object.defineProperty(exports, "MoneyLooseSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.MoneyLooseSchema; }
+  get: function () { return chunkQ4I7JRGO_js.MoneyLooseSchema; }
 });
 Object.defineProperty(exports, "MoneySchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.MoneySchema; }
+  get: function () { return chunkQ4I7JRGO_js.MoneySchema; }
 });
 Object.defineProperty(exports, "NextActionSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.NextActionSchema; }
+  get: function () { return chunkQ4I7JRGO_js.NextActionSchema; }
 });
 Object.defineProperty(exports, "PhoneE164Schema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.PhoneE164Schema; }
+  get: function () { return chunkQ4I7JRGO_js.PhoneE164Schema; }
 });
 Object.defineProperty(exports, "ProductTypeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.ProductTypeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.ProductTypeSchema; }
 });
 Object.defineProperty(exports, "SchemaViolationError", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.SchemaViolationError; }
+  get: function () { return chunkQ4I7JRGO_js.SchemaViolationError; }
 });
 Object.defineProperty(exports, "SeedNameSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.SeedNameSchema; }
+  get: function () { return chunkQ4I7JRGO_js.SeedNameSchema; }
+});
+Object.defineProperty(exports, "SelectedAddOnOptionSchema", {
+  enumerable: true,
+  get: function () { return chunkQ4I7JRGO_js.SelectedAddOnOptionSchema; }
 });
 Object.defineProperty(exports, "ServiceStatusSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.ServiceStatusSchema; }
+  get: function () { return chunkQ4I7JRGO_js.ServiceStatusSchema; }
 });
 Object.defineProperty(exports, "TimestampSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.TimestampSchema; }
+  get: function () { return chunkQ4I7JRGO_js.TimestampSchema; }
 });
 Object.defineProperty(exports, "VariantDetailsSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.VariantDetailsSchema; }
+  get: function () { return chunkQ4I7JRGO_js.VariantDetailsSchema; }
 });
 Object.defineProperty(exports, "VariantDisplayAttributeSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.VariantDisplayAttributeSchema; }
+  get: function () { return chunkQ4I7JRGO_js.VariantDisplayAttributeSchema; }
 });
 Object.defineProperty(exports, "VariantInfoSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.VariantInfoSchema; }
+  get: function () { return chunkQ4I7JRGO_js.VariantInfoSchema; }
 });
 Object.defineProperty(exports, "assertAddItemPayload", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.assertAddItemPayload; }
+  get: function () { return chunkQ4I7JRGO_js.assertAddItemPayload; }
 });
 Object.defineProperty(exports, "assertBrand", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.assertBrand; }
+  get: function () { return chunkQ4I7JRGO_js.assertBrand; }
 });
 Object.defineProperty(exports, "assertCart", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.assertCart; }
+  get: function () { return chunkQ4I7JRGO_js.assertCart; }
 });
 Object.defineProperty(exports, "assertCartItem", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.assertCartItem; }
+  get: function () { return chunkQ4I7JRGO_js.assertCartItem; }
 });
 Object.defineProperty(exports, "assertCheckoutBody", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.assertCheckoutBody; }
+  get: function () { return chunkQ4I7JRGO_js.assertCheckoutBody; }
 });
 Object.defineProperty(exports, "assertCheckoutResponse", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.assertCheckoutResponse; }
+  get: function () { return chunkQ4I7JRGO_js.assertCheckoutResponse; }
 });
 Object.defineProperty(exports, "cimplifyRegistry", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.cimplifyRegistry; }
+  get: function () { return chunkQ4I7JRGO_js.cimplifyRegistry; }
 });
 Object.defineProperty(exports, "createTestClient", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.createTestClient; }
+  get: function () { return chunkQ4I7JRGO_js.createTestClient; }
 });
 Object.defineProperty(exports, "fixtures", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.fixtures; }
+  get: function () { return chunkQ4I7JRGO_js.fixtures; }
 });
 Object.defineProperty(exports, "makeAssertion", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.makeAssertion; }
+  get: function () { return chunkQ4I7JRGO_js.makeAssertion; }
 });
 Object.defineProperty(exports, "registerSchema", {
   enumerable: true,
-  get: function () { return chunk53J2WE4S_js.registerSchema; }
+  get: function () { return chunkQ4I7JRGO_js.registerSchema; }
 });
 exports.exportJsonSchemas = exportJsonSchemas;
 exports.listRegisteredSchemas = listRegisteredSchemas;

package/dist/testing.mjs

@@ -1,9 +1,9 @@
-import { VariantInfoSchema, CheckoutResponseSchema, CheckoutBodySchema, CartPricingSchema, CartItemSchema, CartSchema, AddItemPayloadSchema, BrandSchema, cimplifyRegistry } from './chunk-VDH3O7UB.mjs';
-export { AddItemPayloadSchema, AddOnDetailsSchema, AuthorizationTypeSchema, BrandContactSchema, BrandFaqSchema, BrandHeroSchema, BrandNavLinkSchema, BrandPolicyPageSchema, BrandPolicySectionSchema, BrandSchema, BrandSocialSchema, BundleResolvedSchema, BundleSelectionInputSchema, CartItemSchema, CartPricingSchema, CartSchema, CheckoutBodySchema, CheckoutCustomerSchema, CheckoutResponseSchema, ChosenPriceSchema, CompositeResolvedSchema, CompositeSelectionInputSchema, CountryCodeSchema, CurrencyCodeSchema, CustomerInputValueSchema, DiscountDetailsSchema, IsoDateTimeSchema, LineTypeSchema, LocaleSchema, MoneyLooseSchema, MoneySchema, NextActionSchema, PhoneE164Schema, ProductTypeSchema, SchemaViolationError, SeedNameSchema, ServiceStatusSchema, TimestampSchema, VariantDetailsSchema, VariantDisplayAttributeSchema, VariantInfoSchema, assertAddItemPayload, assertBrand, assertCart, assertCartItem, assertCheckoutBody, assertCheckoutResponse, cimplifyRegistry, createTestClient, fixtures, makeAssertion, registerSchema } from './chunk-VDH3O7UB.mjs';
+import { VariantInfoSchema, CheckoutResponseSchema, CheckoutBodySchema, CartPricingSchema, CartItemSchema, CartSchema, AddItemPayloadSchema, BrandSchema, cimplifyRegistry } from './chunk-GLOO4HUN.mjs';
+export { AddItemPayloadSchema, AddOnDetailsSchema, AddOnGroupDetailsSchema, AddOnInDetailsSchema, AddOnOptionDetailsSchema, AuthorizationTypeSchema, BrandContactSchema, BrandFaqSchema, BrandHeroSchema, BrandNavLinkSchema, BrandPolicyPageSchema, BrandPolicySectionSchema, BrandSchema, BrandSocialSchema, BundleResolvedSchema, BundleSelectionInputSchema, CartItemSchema, CartPricingSchema, CartSchema, CheckoutBodySchema, CheckoutCustomerSchema, CheckoutResponseSchema, ChosenPriceSchema, CompositeResolvedSchema, CompositeSelectionInputSchema, CountryCodeSchema, CurrencyCodeSchema, CustomerInputValueSchema, DiscountDetailsSchema, IsoDateTimeSchema, LineTypeSchema, LocaleSchema, MoneyLooseSchema, MoneySchema, NextActionSchema, PhoneE164Schema, ProductTypeSchema, SchemaViolationError, SeedNameSchema, SelectedAddOnOptionSchema, ServiceStatusSchema, TimestampSchema, VariantDetailsSchema, VariantDisplayAttributeSchema, VariantInfoSchema, assertAddItemPayload, assertBrand, assertCart, assertCartItem, assertCheckoutBody, assertCheckoutResponse, cimplifyRegistry, createTestClient, fixtures, makeAssertion, registerSchema } from './chunk-GLOO4HUN.mjs';
 import './chunk-5OK3YDZC.mjs';
 import './chunk-XZPO5GEM.mjs';
 import './chunk-NRT6PVW5.mjs';
-import './chunk-MJBSVUHO.mjs';
+import './chunk-KSKZAXG2.mjs';
 import './chunk-XPXAZXF2.mjs';
 import { z } from 'zod';
 

package/package.json

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

package/templates/storefront-fashion/e2e/visual.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Visual regression on the storefront's key surfaces. Catches CSS / layout
+ * drift that the contract harness can't see.
+ *
+ * Anti-flake notes:
+ *   - We disable animations (CSS transitions can leave half-frame snapshots).
+ *   - We mask images (Unsplash / CDN URLs occasionally render slight pixel
+ *     differences). The container layout is what we're regressing on, not
+ *     image bytes.
+ *   - Fonts are served by `next/font` and locked at build time, but if you
+ *     see flake on a fresh CI runner, `await page.evaluate(() => document.fonts.ready)`
+ *     before the snapshot.
+ */
+test.describe("visual regression", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addStyleTag({
+      content: `*, *::before, *::after { animation: none !important; transition: none !important; }`,
+    });
+  });
+
+  test("homepage", async ({ page }) => {
+    await page.goto("/");
+    await page.evaluate(() => document.fonts.ready);
+    await expect(page).toHaveScreenshot("homepage.png", {
+      fullPage: true,
+      mask: [page.locator("img")],
+    });
+  });
+
+  test("shop / catalogue", async ({ page }) => {
+    await page.goto("/shop");
+    await page.evaluate(() => document.fonts.ready);
+    await expect(page).toHaveScreenshot("shop.png", {
+      fullPage: true,
+      mask: [page.locator("img")],
+    });
+  });
+
+  test("cart drawer after adding a product", async ({ page }) => {
+    await page.goto("/products/studio-tee-natural");
+    await page.evaluate(() => document.fonts.ready);
+    // Click whatever the storefront's primary Add-to-Cart button is.
+    await page.getByRole("button", { name: /add to cart/i }).first().click();
+    // Drawer auto-opens via CartDrawerProvider's openOnAdd watcher.
+    await expect(page.getByRole("dialog", { name: /cart/i })).toBeVisible();
+    await expect(page).toHaveScreenshot("cart-drawer.png", {
+      mask: [page.locator("img")],
+    });
+  });
+});

package/templates/storefront-fashion/package.json

@@ -15,15 +15,18 @@
     "check:brand": "vitest run __tests__/brand.test.ts",
     "check:cart": "vitest run __tests__/cart-flow.test.ts",
     "check:contract": "vitest run __tests__/contract.test.ts",
+    "check:visual": "playwright test",
+    "check:visual:update": "playwright test --update-snapshots",
     "check": "bun run typecheck && bun run lint && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.44.14",
+    "@cimplify/sdk": "^0.44.19",
     "next": "^16.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.50.0",
     "@tailwindcss/postcss": "^4.2.4",
     "@types/node": "^22.10.0",
     "@types/react": "^19.0.0",

package/templates/storefront-fashion/playwright.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Visual regression config — boots `bun dev` (mock + next), runs against
+ * a stable Chromium, snapshots key pages.
+ *
+ * Run:
+ *   bun run check:visual                  # compare against baseline
+ *   bun run check:visual --update-snapshots   # accept new baseline
+ *
+ * Baselines live in `e2e/__snapshots__/`. Commit them.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: false,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: process.env.CI ? "github" : "list",
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "retain-on-failure",
+    // Viewport snapshots are noisy across OS / browser builds. Lock here.
+    viewport: { width: 1280, height: 800 },
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"], viewport: { width: 1280, height: 800 } },
+    },
+  ],
+
+  expect: {
+    // Anti-flake: allow tiny rendering differences (font hinting across runners).
+    toHaveScreenshot: { maxDiffPixelRatio: 0.01 },
+  },
+
+  webServer: {
+    command: "bun dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    stdout: "ignore",
+    stderr: "pipe",
+  },
+});