test: add gallery affordances, vrt tests, and perf budgets

Author: shayancoin

frontend/src/app/configurator/ClientPage.tsx

@@ -4,8 +4,8 @@ import { useEffect } from 'react'
 
 import KitchenLayoutShell from '@/components/KitchenLayoutShell'
 import { initOtelRoute } from '@/lib/otel-route'
-import Viewer3D from '../components/Viewer3D'
 import ConfiguratorPanel from '../components/configurator-panel'
+import Viewer3D from '../components/Viewer3D'
 
 export default function ClientPage() {
   const demoVariant = 'base_600'

frontend/src/components/GalleryAffordances.css

@@ -0,0 +1,78 @@
+.kds-gallery {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.kds-gallery__ctrl {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 12%;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: opacity 0.4s ease;
+}
+
+.kds-gallery:hover .kds-gallery__ctrl,
+.kds-gallery:focus-within .kds-gallery__ctrl {
+  opacity: 1;
+}
+
+.kds-gallery__prev {
+  left: 0;
+}
+
+.kds-gallery__next {
+  right: 0;
+}
+
+.kds-gallery__arrow {
+  width: var(--kds-gallery-arrow-size);
+  height: var(--kds-gallery-arrow-size);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(16, 16, 16, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  color: var(--kds-fg);
+  font-size: 32px;
+  line-height: 1;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.kds-gallery__ctrl:hover .kds-gallery__arrow,
+.kds-gallery__ctrl:focus-visible .kds-gallery__arrow {
+  transform: scale(1.05);
+}
+
+.kds-gallery__dots {
+  position: absolute;
+  left: 50%;
+  bottom: var(--kds-space-4);
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--kds-space-2);
+}
+
+.kds-gallery__dot {
+  width: var(--kds-gallery-dots-size);
+  height: var(--kds-gallery-dots-size);
+  border-radius: 999px;
+  opacity: 0.32;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(7px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.kds-gallery__dot--active {
+  opacity: 1;
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+}

frontend/tests/e2e/layout.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+const CONFIGURATOR_URL = '/configurator';
+
+test.describe('Configurator layout geometry', () => {
+  test('order summary card maintains Tesla geometry', async ({ page }) => {
+    await page.goto(CONFIGURATOR_URL);
+    const card = page.locator('.kds-card').first();
+    await expect(card).toHaveCSS('max-width', '432px');
+    await expect(card).toHaveCSS('border-radius', '8px');
+  });
+
+  test('gallery affordances reveal on hover', async ({ page }) => {
+    await page.goto(CONFIGURATOR_URL);
+    const gallery = page.locator('.kds-gallery-frame');
+    await gallery.hover();
+    const controls = page.locator('.kds-gallery__ctrl');
+    await expect(controls).toHaveCount(2);
+    await controls.first().waitFor({ state: 'visible' });
+  });
+});

tools/perf/budgets.json

@@ -0,0 +1,22 @@
+{
+  "budgets": [
+    {
+      "metric": "tti",
+      "target": 2500,
+      "threshold": "<=",
+      "label": "Time to Interactive (4G fast)"
+    },
+    {
+      "metric": "route-change-p95",
+      "target": 300,
+      "threshold": "<=",
+      "label": "Route change p95 (ms)"
+    },
+    {
+      "metric": "cpu-blocking",
+      "target": 150,
+      "threshold": "<=",
+      "label": "Main-thread blocking (ms)"
+    }
+  ]
+}