From f43c3141562e107d2752dbc6d8356c7736741ffb Mon Sep 17 00:00:00 2001
From: Danijel Martinek <danijel@fraqtal.xyz>
Date: Wed, 13 May 2026 08:25:54 +0200
Subject: [PATCH] feat: install @playwright/test + playwright.config.ts

---
 eslint.config.js     | 10 +++++++++-
 package.json         |  3 ++-
 playwright.config.ts | 30 ++++++++++++++++++++++++++++++
 pnpm-lock.yaml       |  3 +++
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 playwright.config.ts

diff --git a/eslint.config.js b/eslint.config.js
index bfe4305..7ddb653 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,7 +20,15 @@ const nodeGlobals = {
 };
 
 export default [
-  { ignores: ["node_modules/**", "packages/**", "apps/**", "turbo/**"] },
+  {
+    ignores: [
+      "node_modules/**",
+      "packages/**",
+      "apps/**",
+      "turbo/**",
+      "playwright.config.ts",
+    ],
+  },
   js.configs.recommended,
   {
     files: ["scripts/**/*.{mjs,cjs,js}"],
diff --git a/package.json b/package.json
index 6053c62..0f38e95 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@ai-hero/sandcastle": "*",
+    "@playwright/test": "^1.49.0",
     "@turbo/gen": "^2.4.0",
     "@types/node": "^22.0.0",
     "husky": "^9.0.0",
@@ -31,7 +32,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js,mjs,jsx}": [
-      "eslint --fix --max-warnings=0"
+      "eslint --fix --max-warnings=0 --no-warn-ignored"
     ],
     "*.{ts,tsx,js,mjs,jsx,json,md,yml,yaml}": [
       "prettier --write"
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..5705738
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Playwright config for visual regression against Storybook.
+ *
+ * Expectations:
+ * - Storybook is served at http://localhost:6006 BEFORE running these tests.
+ *   The pnpm test:visual script wraps the start + run + stop dance.
+ * - Screenshot baselines live next to each test file in __snapshots__/.
+ * - One browser (chromium) is enough for v1; multi-browser comes later.
+ */
+export default defineConfig({
+  testDir: "./apps/storybook/tests",
+  testMatch: /.*\.spec\.ts/,
+  fullyParallel: false,
+  reporter: process.env.CI ? "github" : "list",
+  use: {
+    baseURL: "http://localhost:6006",
+    viewport: { width: 1280, height: 720 },
+    screenshot: "only-on-failure",
+  },
+  expect: {
+    toHaveScreenshot: {
+      // Tolerate up to 1% pixel difference. Tune when first real component
+      // lands and the noise floor is measurable.
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9ed3e7..4884542 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,9 @@ importers:
       "@ai-hero/sandcastle":
         specifier: "*"
         version: 0.5.10(@effect/cluster@0.57.0(@effect/platform@0.95.0(effect@3.21.2))(@effect/rpc@0.74.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/sql@0.50.0(@effect/experimental@0.59.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/workflow@0.17.0(@effect/experimental@0.59.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/platform@0.95.0(effect@3.21.2))(@effect/rpc@0.74.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(effect@3.21.2))(effect@3.21.2))(@effect/rpc@0.74.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/sql@0.50.0(@effect/experimental@0.59.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/typeclass@0.39.0(effect@3.21.2))
+      "@playwright/test":
+        specifier: ^1.49.0
+        version: 1.59.1
       "@turbo/gen":
         specifier: ^2.4.0
         version: 2.9.10(@types/node@22.19.17)