sunpeak 0.20.53 → 0.20.56

package/template/package.json

@@ -18,27 +18,27 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "mapbox-gl": "^3.24.0",
+    "mapbox-gl": "^3.24.1",
     "sunpeak": "workspace:*",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.60.0",
-    "@tailwindcss/vite": "^4.3.0",
+    "@playwright/test": "1.60.0",
+    "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.9.2",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
-    "happy-dom": "^20.10.1",
+    "happy-dom": "^20.10.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.1",
     "typescript": "^6.0.3",
     "vite": "8.0.16",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9"
   }
 }

package/template/tests/e2e/albums.spec.ts

@@ -6,13 +6,6 @@ test('should render album cards with correct styles', async ({ inspector }) => {
 
   const albumCard = app.locator('button:has-text("Summer Slice")');
   await expect(albumCard).toBeVisible();
-
-  const styles = await albumCard.evaluate((el) => {
-    const computed = window.getComputedStyle(el);
-    return { cursor: computed.cursor, borderRadius: computed.borderRadius };
-  });
-  expect(styles.cursor).toBe('pointer');
-  expect(styles.borderRadius).toBe('12px');
 });
 
 test('should have album image with correct aspect ratio', async ({ inspector }) => {
@@ -21,13 +14,6 @@ test('should have album image with correct aspect ratio', async ({ inspector })
 
   const imageContainer = app.locator('button:has-text("Summer Slice") .aspect-\\[4\\/3\\]');
   await expect(imageContainer).toBeVisible();
-
-  const styles = await imageContainer.evaluate((el) => {
-    const computed = window.getComputedStyle(el);
-    return { borderRadius: computed.borderRadius, overflow: computed.overflow };
-  });
-  expect(styles.borderRadius).toBe('12px');
-  expect(styles.overflow).toBe('hidden');
 });
 
 test('should render album cards in dark mode', async ({ inspector }) => {
@@ -36,11 +22,6 @@ test('should render album cards in dark mode', async ({ inspector }) => {
 
   const albumTitle = app.locator('button:has-text("Summer Slice") div').first();
   await expect(albumTitle).toBeVisible();
-
-  const titleStyles = await albumTitle.evaluate((el) => ({
-    color: window.getComputedStyle(el).color,
-  }));
-  expect(titleStyles.color).toBeTruthy();
 });
 
 test('should activate prod resources mode without errors', async ({ inspector }) => {
@@ -57,13 +38,6 @@ test('should render correctly in fullscreen', async ({ inspector }) => {
 
   const albumCard = app.locator('button:has-text("Summer Slice")');
   await expect(albumCard).toBeVisible();
-
-  const styles = await albumCard.evaluate((el) => ({
-    cursor: window.getComputedStyle(el).cursor,
-    borderRadius: window.getComputedStyle(el).borderRadius,
-  }));
-  expect(styles.cursor).toBe('pointer');
-  expect(styles.borderRadius).toBe('12px');
 });
 
 test('should render content in fullscreen mode', async ({ inspector }) => {

package/template/tests/e2e/carousel.spec.ts

@@ -6,13 +6,7 @@ test('should render carousel cards with correct styles', async ({ inspector }) =
 
   const card = app.locator('.rounded-2xl').first();
   await expect(card).toBeVisible();
-
-  const styles = await card.evaluate((el) => {
-    const computed = window.getComputedStyle(el);
-    return { borderRadius: computed.borderRadius, cursor: computed.cursor };
-  });
-  expect(styles.borderRadius).toBe('16px');
-  expect(styles.cursor).toBe('pointer');
+  await expect(card).toContainText('Lady Bird Lake');
 });
 
 test('should have card with border styling', async ({ inspector }) => {
@@ -21,13 +15,6 @@ test('should have card with border styling', async ({ inspector }) => {
 
   const card = app.locator('.rounded-2xl.border').first();
   await expect(card).toBeVisible();
-
-  const styles = await card.evaluate((el) => {
-    const computed = window.getComputedStyle(el);
-    return { borderWidth: computed.borderWidth, borderStyle: computed.borderStyle };
-  });
-  expect(styles.borderWidth).toBe('1px');
-  expect(styles.borderStyle).toBe('solid');
 });
 
 test('should have interactive buttons', async ({ inspector }) => {
@@ -35,12 +22,7 @@ test('should have interactive buttons', async ({ inspector }) => {
   const app = result.app();
 
   const visitButton = app.locator('button:has-text("Visit")').first();
-  await expect(visitButton).toBeAttached();
-
-  const styles = await visitButton.evaluate((el) => ({
-    cursor: window.getComputedStyle(el).cursor,
-  }));
-  expect(styles.cursor).toBe('pointer');
+  await expect(visitButton).toBeVisible();
 });
 
 test('should activate prod resources mode without errors', async ({ inspector }) => {
@@ -50,10 +32,10 @@ test('should activate prod resources mode without errors', async ({ inspector })
 });
 
 test('should render correctly in fullscreen', async ({ inspector }) => {
-  await inspector.renderTool('show-carousel', undefined, { displayMode: 'fullscreen' });
-  await inspector.page.waitForLoadState('networkidle');
-  const root = inspector.page.locator('#root');
-  await expect(root).not.toBeEmpty();
+  const result = await inspector.renderTool('show-carousel', undefined, {
+    displayMode: 'fullscreen',
+  });
+  await expect(result.app().locator('h2:has-text("Lady Bird Lake")')).toBeVisible();
 });
 
 test('should show detail view with place info in fullscreen', async ({ inspector }) => {
@@ -111,11 +93,7 @@ test('should center the hero image without stretching', async ({ inspector }) =>
   await card.click();
 
   await expect(app.locator('h1:has-text("Lady Bird Lake")')).toBeVisible({ timeout: 5000 });
-  const imageContainer = app.locator('img').first().locator('..');
-  const styles = await imageContainer.evaluate((el) => ({
-    justifyContent: window.getComputedStyle(el).justifyContent,
-  }));
-  expect(styles.justifyContent).toBe('center');
+  await expect(app.locator('img[alt="Lady Bird Lake"]')).toBeVisible();
 });
 
 test('should render carousel in dark mode with correct styles', async ({ inspector }) => {
@@ -124,13 +102,6 @@ test('should render carousel in dark mode with correct styles', async ({ inspect
 
   const card = app.locator('.rounded-2xl').first();
   await expect(card).toBeVisible();
-
-  const styles = await card.evaluate((el) => ({
-    borderRadius: window.getComputedStyle(el).borderRadius,
-    cursor: window.getComputedStyle(el).cursor,
-  }));
-  expect(styles.borderRadius).toBe('16px');
-  expect(styles.cursor).toBe('pointer');
 });
 
 test('should have appropriate dark mode styling', async ({ inspector }) => {
@@ -139,31 +110,4 @@ test('should have appropriate dark mode styling', async ({ inspector }) => {
 
   const card = app.locator('.rounded-2xl.border').first();
   await expect(card).toBeVisible();
-
-  const styles = await card.evaluate((el) => ({
-    borderWidth: window.getComputedStyle(el).borderWidth,
-    borderStyle: window.getComputedStyle(el).borderStyle,
-  }));
-  expect(styles.borderWidth).toBe('1px');
-  expect(styles.borderStyle).toBe('solid');
-});
-
-test('should load without console errors in dark mode', async ({ inspector }) => {
-  const errors: string[] = [];
-  inspector.page.on('console', (msg) => {
-    if (msg.type() === 'error') errors.push(msg.text());
-  });
-
-  const result = await inspector.renderTool('show-carousel', undefined, { theme: 'dark' });
-  const app = result.app();
-  await expect(app.locator('.rounded-2xl').first()).toBeVisible();
-
-  const unexpectedErrors = errors.filter(
-    (e) =>
-      !e.includes('[IframeResource]') &&
-      !e.includes('mcp') &&
-      !e.includes('PostMessage') &&
-      !e.includes('connect')
-  );
-  expect(unexpectedErrors).toHaveLength(0);
 });

package/template/tests/e2e/map.spec.ts

@@ -6,11 +6,6 @@ test('should render map container with correct styles', async ({ inspector }) =>
 
   const mapContainer = app.locator('.antialiased.w-full.overflow-hidden').first();
   await expect(mapContainer).toBeVisible({ timeout: 10000 });
-
-  const styles = await mapContainer.evaluate((el) => ({
-    overflow: window.getComputedStyle(el).overflow,
-  }));
-  expect(styles.overflow).toBe('hidden');
 });
 
 test('should have rounded border in inline mode', async ({ inspector }) => {
@@ -19,11 +14,6 @@ test('should have rounded border in inline mode', async ({ inspector }) => {
 
   const innerContainer = app.locator('.border.rounded-2xl').first();
   await expect(innerContainer).toBeVisible({ timeout: 10000 });
-
-  const styles = await innerContainer.evaluate((el) => ({
-    borderRadius: window.getComputedStyle(el).borderRadius,
-  }));
-  expect(parseInt(styles.borderRadius)).toBeGreaterThanOrEqual(16);
 });
 
 test('should have fullscreen expand button in inline mode', async ({ inspector }) => {
@@ -32,13 +22,6 @@ test('should have fullscreen expand button in inline mode', async ({ inspector }
 
   const expandButton = app.locator('button[aria-label="Enter fullscreen"]');
   await expect(expandButton).toBeVisible({ timeout: 10000 });
-
-  const styles = await expandButton.evaluate((el) => ({
-    cursor: window.getComputedStyle(el).cursor,
-    position: window.getComputedStyle(el).position,
-  }));
-  expect(styles.cursor).toBe('pointer');
-  expect(styles.position).toBe('absolute');
 });
 
 test('should load without console errors in light mode', async ({ inspector }) => {
@@ -86,11 +69,6 @@ test('should have appropriate border color in dark mode', async ({ inspector })
 
   const innerContainer = app.locator('.border.rounded-2xl').first();
   await expect(innerContainer).toBeVisible({ timeout: 10000 });
-
-  const styles = await innerContainer.evaluate((el) => ({
-    borderColor: window.getComputedStyle(el).borderColor,
-  }));
-  expect(styles.borderColor).toBeTruthy();
 });
 
 test('should load without console errors in dark mode', async ({ inspector }) => {
@@ -123,11 +101,6 @@ test('should not have rounded border in fullscreen mode', async ({ inspector })
 
   const innerContainer = app.locator('.rounded-none.border-0').first();
   await expect(innerContainer).toBeVisible({ timeout: 10000 });
-
-  const styles = await innerContainer.evaluate((el) => ({
-    borderRadius: window.getComputedStyle(el).borderRadius,
-  }));
-  expect(styles.borderRadius).toBe('0px');
 });
 
 test('should not show fullscreen button in fullscreen mode', async ({ inspector }) => {
@@ -153,5 +126,4 @@ test('should show suggestion chips in fullscreen on desktop', async ({ inspector
   await expect(app.locator('.antialiased.w-full.overflow-hidden').first()).toBeVisible({
     timeout: 10000,
   });
-  await expect(app.locator('button:has-text("Open now")')).toBeAttached({ timeout: 5000 });
 });

package/template/tests/e2e/review.spec.ts

@@ -6,11 +6,6 @@ test('should render review title with correct styles', async ({ inspector }) =>
 
   const title = app.locator('h1:has-text("Refactor Authentication Module")');
   await expect(title).toBeVisible();
-
-  const styles = await title.evaluate((el) => ({
-    fontWeight: window.getComputedStyle(el).fontWeight,
-  }));
-  expect(parseInt(styles.fontWeight)).toBeGreaterThanOrEqual(600);
 });
 
 test('should render change items with type-specific styling', async ({ inspector }) => {
@@ -19,12 +14,6 @@ test('should render change items with type-specific styling', async ({ inspector
 
   const changeItem = app.locator('li').first();
   await expect(changeItem).toBeVisible();
-
-  const styles = await changeItem.evaluate((el) => ({
-    backgroundColor: window.getComputedStyle(el).backgroundColor,
-  }));
-  expect(styles.backgroundColor).toBeTruthy();
-  expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
 });
 
 test('should have interactive apply and cancel buttons', async ({ inspector }) => {
@@ -33,11 +22,9 @@ test('should have interactive apply and cancel buttons', async ({ inspector }) =
 
   const applyButton = app.locator('button:has-text("Apply Changes")');
   await expect(applyButton).toBeVisible();
-  expect(await applyButton.evaluate((el) => window.getComputedStyle(el).cursor)).toBe('pointer');
 
   const cancelButton = app.locator('button:has-text("Cancel")');
   await expect(cancelButton).toBeVisible();
-  expect(await cancelButton.evaluate((el) => window.getComputedStyle(el).cursor)).toBe('pointer');
 });
 
 test('should have expand fullscreen button in inline mode', async ({ inspector }) => {
@@ -46,7 +33,6 @@ test('should have expand fullscreen button in inline mode', async ({ inspector }
 
   const expandButton = app.locator('button[aria-label="Enter fullscreen"]');
   await expect(expandButton).toBeVisible();
-  expect(await expandButton.evaluate((el) => window.getComputedStyle(el).cursor)).toBe('pointer');
 });
 
 test('should activate prod resources mode without errors', async ({ inspector }) => {
@@ -61,25 +47,6 @@ test('should render review title in dark mode', async ({ inspector }) => {
   await expect(app.locator('h1:has-text("Refactor Authentication Module")')).toBeVisible();
 });
 
-test('should have appropriate text colors in dark mode', async ({ inspector }) => {
-  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
-  const app = result.app();
-
-  const title = app.locator('h1').first();
-  await expect(title).toBeVisible();
-
-  const styles = await title.evaluate((el) => ({
-    color: window.getComputedStyle(el).color,
-  }));
-  expect(styles.color).toBeTruthy();
-});
-
-test('should render change items in dark mode', async ({ inspector }) => {
-  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
-  const app = result.app();
-  await expect(app.locator('li').first()).toBeVisible();
-});
-
 test('should load without console errors in dark mode', async ({ inspector }) => {
   const errors: string[] = [];
   inspector.page.on('console', (msg) => {
@@ -122,15 +89,13 @@ test('should render content in fullscreen mode', async ({ inspector }) => {
 });
 
 test('should render post review in light mode', async ({ inspector }) => {
-  await inspector.renderTool('review-post');
-  await inspector.page.waitForLoadState('networkidle');
-  await expect(inspector.page.locator('#root')).not.toBeEmpty();
+  const result = await inspector.renderTool('review-post');
+  await expect(result.app().locator('h1').first()).toBeVisible();
 });
 
 test('should render post review in dark mode', async ({ inspector }) => {
-  await inspector.renderTool('review-post', undefined, { theme: 'dark' });
-  await inspector.page.waitForLoadState('networkidle');
-  await expect(inspector.page.locator('#root')).not.toBeEmpty();
+  const result = await inspector.renderTool('review-post', undefined, { theme: 'dark' });
+  await expect(result.app().locator('h1').first()).toBeVisible();
 });
 
 test('should show server success message when confirming post', async ({ inspector }) => {
@@ -157,15 +122,13 @@ test('should show server cancel message when rejecting post', async ({ inspector
 });
 
 test('should render purchase review in light mode', async ({ inspector }) => {
-  await inspector.renderTool('review-purchase');
-  await inspector.page.waitForLoadState('networkidle');
-  await expect(inspector.page.locator('#root')).not.toBeEmpty();
+  const result = await inspector.renderTool('review-purchase');
+  await expect(result.app().locator('h1').first()).toBeVisible();
 });
 
 test('should render purchase review in dark mode', async ({ inspector }) => {
-  await inspector.renderTool('review-purchase', undefined, { theme: 'dark' });
-  await inspector.page.waitForLoadState('networkidle');
-  await expect(inspector.page.locator('#root')).not.toBeEmpty();
+  const result = await inspector.renderTool('review-purchase', undefined, { theme: 'dark' });
+  await expect(result.app().locator('h1').first()).toBeVisible();
 });
 
 test('should show loading then result when placing order', async ({ inspector }) => {