sunpeak 0.19.12 → 0.20.2

package/template/package.json

@@ -28,16 +28,16 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "happy-dom": "^18.0.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "happy-dom": "^20.8.9",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2"
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4"
   }
 }

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

@@ -1,7 +1,7 @@
 import { test, expect } from 'sunpeak/test';
 
-test('should render album cards with correct styles', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums');
+test('should render album cards with correct styles', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums');
   const app = result.app();
 
   const albumCard = app.locator('button:has-text("Summer Slice")');
@@ -15,8 +15,8 @@ test('should render album cards with correct styles', async ({ mcp }) => {
   expect(styles.borderRadius).toBe('12px');
 });
 
-test('should have album image with correct aspect ratio', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums');
+test('should have album image with correct aspect ratio', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums');
   const app = result.app();
 
   const imageContainer = app.locator('button:has-text("Summer Slice") .aspect-\\[4\\/3\\]');
@@ -30,8 +30,8 @@ test('should have album image with correct aspect ratio', async ({ mcp }) => {
   expect(styles.overflow).toBe('hidden');
 });
 
-test('should render album cards in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+test('should render album cards in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, { theme: 'dark' });
   const app = result.app();
 
   const albumTitle = app.locator('button:has-text("Summer Slice") div').first();
@@ -43,44 +43,16 @@ test('should render album cards in dark mode', async ({ mcp }) => {
   expect(titleStyles.color).toBeTruthy();
 });
 
-test('should show empty state with Run button in prod tools mode', async ({ mcp }) => {
-  await mcp.openTool('show-albums', { theme: 'dark' });
-
-  await expect(mcp.page.locator('text=Press Run to call the tool')).toBeVisible();
-  await expect(mcp.page.locator('button:has-text("Run")')).toBeVisible();
-  await expect(mcp.page.locator('iframe')).not.toBeAttached();
-});
-
-test('should have themed empty state colors in light mode', async ({ mcp }) => {
-  await mcp.openTool('show-albums', { theme: 'light' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeLessThan(600);
-});
-
-test('should have themed empty state colors in dark mode', async ({ mcp }) => {
-  await mcp.openTool('show-albums', { theme: 'dark' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeGreaterThan(200);
-});
-
-test('should activate prod resources mode without errors', async ({ mcp }) => {
-  await mcp.callTool('show-albums', {}, { theme: 'dark', prodResources: true });
-  const root = mcp.page.locator('#root');
+test('should activate prod resources mode without errors', async ({ inspector }) => {
+  await inspector.renderTool('show-albums', undefined, { theme: 'dark', prodResources: true });
+  const root = inspector.page.locator('#root');
   await expect(root).not.toBeEmpty();
 });
 
-test('should render correctly in fullscreen', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { displayMode: 'fullscreen' });
+test('should render correctly in fullscreen', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   const albumCard = app.locator('button:has-text("Summer Slice")');
@@ -94,22 +66,22 @@ test('should render correctly in fullscreen', async ({ mcp }) => {
   expect(styles.borderRadius).toBe('12px');
 });
 
-test('should preserve content when switching to fullscreen', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+test('should render content in fullscreen mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, {
+    theme: 'dark',
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
   await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
-
-  await mcp.setDisplayMode('fullscreen');
-  await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible({ timeout: 5000 });
 });
 
-test('should preserve content when switching to PiP', async ({ mcp }) => {
-  test.skip(mcp.host === 'claude', 'Claude does not support PiP');
+test('should render content in PiP mode', async ({ inspector }) => {
+  test.skip(inspector.host === 'claude', 'Claude does not support PiP');
 
-  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+  const result = await inspector.renderTool('show-albums', undefined, {
+    theme: 'dark',
+    displayMode: 'pip',
+  });
   const app = result.app();
   await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
-
-  await mcp.setDisplayMode('pip');
-  await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible({ timeout: 5000 });
 });

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

@@ -1,7 +1,7 @@
 import { test, expect } from 'sunpeak/test';
 
-test('should render carousel cards with correct styles', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel');
+test('should render carousel cards with correct styles', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel');
   const app = result.app();
 
   const card = app.locator('.rounded-2xl').first();
@@ -15,8 +15,8 @@ test('should render carousel cards with correct styles', async ({ mcp }) => {
   expect(styles.cursor).toBe('pointer');
 });
 
-test('should have card with border styling', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel');
+test('should have card with border styling', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel');
   const app = result.app();
 
   const card = app.locator('.rounded-2xl.border').first();
@@ -30,8 +30,8 @@ test('should have card with border styling', async ({ mcp }) => {
   expect(styles.borderStyle).toBe('solid');
 });
 
-test('should have interactive buttons', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel');
+test('should have interactive buttons', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel');
   const app = result.app();
 
   const visitButton = app.locator('button:has-text("Visit")').first();
@@ -43,51 +43,23 @@ test('should have interactive buttons', async ({ mcp }) => {
   expect(styles.cursor).toBe('pointer');
 });
 
-test('should show empty state with Run button in prod tools mode', async ({ mcp }) => {
-  await mcp.openTool('show-carousel', { theme: 'dark' });
-
-  await expect(mcp.page.locator('text=Press Run to call the tool')).toBeVisible();
-  await expect(mcp.page.locator('button:has-text("Run")')).toBeVisible();
-  await expect(mcp.page.locator('iframe')).not.toBeAttached();
-});
-
-test('should have themed empty state colors in light mode', async ({ mcp }) => {
-  await mcp.openTool('show-carousel', { theme: 'light' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeLessThan(600);
-});
-
-test('should have themed empty state colors in dark mode', async ({ mcp }) => {
-  await mcp.openTool('show-carousel', { theme: 'dark' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeGreaterThan(200);
-});
-
-test('should activate prod resources mode without errors', async ({ mcp }) => {
-  await mcp.callTool('show-carousel', {}, { theme: 'dark', prodResources: true });
-  const root = mcp.page.locator('#root');
+test('should activate prod resources mode without errors', async ({ inspector }) => {
+  await inspector.renderTool('show-carousel', undefined, { theme: 'dark', prodResources: true });
+  const root = inspector.page.locator('#root');
   await expect(root).not.toBeEmpty();
 });
 
-test('should render correctly in fullscreen', async ({ mcp }) => {
-  await mcp.callTool('show-carousel', {}, { displayMode: 'fullscreen' });
-  await mcp.page.waitForLoadState('networkidle');
-  const root = mcp.page.locator('#root');
+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();
 });
 
-test('should show detail view with place info in fullscreen', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel', {}, { displayMode: 'fullscreen' });
+test('should show detail view with place info in fullscreen', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   const card = app.locator('.rounded-2xl').first();
@@ -99,8 +71,10 @@ test('should show detail view with place info in fullscreen', async ({ mcp }) =>
   await expect(app.locator('text=Tips')).toBeVisible();
 });
 
-test('should show detail view when Learn More is clicked', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel', {}, { displayMode: 'fullscreen' });
+test('should show detail view when Learn More is clicked', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   const learnMore = app.locator('button:has-text("Learn More")').first();
@@ -111,8 +85,10 @@ test('should show detail view when Learn More is clicked', async ({ mcp }) => {
   await expect(app.locator('text=Address')).toBeVisible();
 });
 
-test('should not have a back button in detail view', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel', {}, { displayMode: 'fullscreen' });
+test('should not have a back button in detail view', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   const card = app.locator('.rounded-2xl').first();
@@ -124,8 +100,10 @@ test('should not have a back button in detail view', async ({ mcp }) => {
   await expect(backButton).not.toBeAttached();
 });
 
-test('should center the hero image without stretching', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel', {}, { displayMode: 'fullscreen' });
+test('should center the hero image without stretching', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   const card = app.locator('.rounded-2xl').first();
@@ -140,8 +118,8 @@ test('should center the hero image without stretching', async ({ mcp }) => {
   expect(styles.justifyContent).toBe('center');
 });
 
-test('should render carousel in dark mode with correct styles', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel', {}, { theme: 'dark' });
+test('should render carousel in dark mode with correct styles', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel', undefined, { theme: 'dark' });
   const app = result.app();
 
   const card = app.locator('.rounded-2xl').first();
@@ -155,8 +133,8 @@ test('should render carousel in dark mode with correct styles', async ({ mcp })
   expect(styles.cursor).toBe('pointer');
 });
 
-test('should have appropriate dark mode styling', async ({ mcp }) => {
-  const result = await mcp.callTool('show-carousel', {}, { theme: 'dark' });
+test('should have appropriate dark mode styling', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-carousel', undefined, { theme: 'dark' });
   const app = result.app();
 
   const card = app.locator('.rounded-2xl.border').first();
@@ -170,13 +148,13 @@ test('should have appropriate dark mode styling', async ({ mcp }) => {
   expect(styles.borderStyle).toBe('solid');
 });
 
-test('should load without console errors in dark mode', async ({ mcp }) => {
+test('should load without console errors in dark mode', async ({ inspector }) => {
   const errors: string[] = [];
-  mcp.page.on('console', (msg) => {
+  inspector.page.on('console', (msg) => {
     if (msg.type() === 'error') errors.push(msg.text());
   });
 
-  const result = await mcp.callTool('show-carousel', {}, { theme: 'dark' });
+  const result = await inspector.renderTool('show-carousel', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('.rounded-2xl').first()).toBeVisible();
 

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

@@ -1,7 +1,7 @@
 import { test, expect } from 'sunpeak/test';
 
-test('should render map container with correct styles', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map');
+test('should render map container with correct styles', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map');
   const app = result.app();
 
   const mapContainer = app.locator('.antialiased.w-full.overflow-hidden').first();
@@ -13,8 +13,8 @@ test('should render map container with correct styles', async ({ mcp }) => {
   expect(styles.overflow).toBe('hidden');
 });
 
-test('should have rounded border in inline mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map', {}, { displayMode: 'inline' });
+test('should have rounded border in inline mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map', undefined, { displayMode: 'inline' });
   const app = result.app();
 
   const innerContainer = app.locator('.border.rounded-2xl').first();
@@ -26,8 +26,8 @@ test('should have rounded border in inline mode', async ({ mcp }) => {
   expect(parseInt(styles.borderRadius)).toBeGreaterThanOrEqual(16);
 });
 
-test('should have fullscreen expand button in inline mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map', {}, { displayMode: 'inline' });
+test('should have fullscreen expand button in inline mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map', undefined, { displayMode: 'inline' });
   const app = result.app();
 
   const expandButton = app.locator('button[aria-label="Enter fullscreen"]');
@@ -41,13 +41,13 @@ test('should have fullscreen expand button in inline mode', async ({ mcp }) => {
   expect(styles.position).toBe('absolute');
 });
 
-test('should load without console errors in light mode', async ({ mcp }) => {
+test('should load without console errors in light mode', async ({ inspector }) => {
   const errors: string[] = [];
-  mcp.page.on('console', (msg) => {
+  inspector.page.on('console', (msg) => {
     if (msg.type() === 'error') errors.push(msg.text());
   });
 
-  const result = await mcp.callTool('show-map');
+  const result = await inspector.renderTool('show-map');
   const app = result.app();
   await expect(app.locator('.antialiased.w-full.overflow-hidden').first()).toBeVisible({
     timeout: 10000,
@@ -63,52 +63,25 @@ test('should load without console errors in light mode', async ({ mcp }) => {
   expect(unexpectedErrors).toHaveLength(0);
 });
 
-test('should show empty state with Run button in prod tools mode', async ({ mcp }) => {
-  await mcp.openTool('show-map', { theme: 'dark' });
-
-  await expect(mcp.page.locator('text=Press Run to call the tool')).toBeVisible();
-  await expect(mcp.page.locator('button:has-text("Run")')).toBeVisible();
-  await expect(mcp.page.locator('iframe')).not.toBeAttached();
-});
-
-test('should have themed empty state colors in light mode', async ({ mcp }) => {
-  await mcp.openTool('show-map', { theme: 'light' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeLessThan(600);
-});
-
-test('should have themed empty state colors in dark mode', async ({ mcp }) => {
-  await mcp.openTool('show-map', { theme: 'dark' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeGreaterThan(200);
-});
-
-test('should activate prod resources mode without errors', async ({ mcp }) => {
-  await mcp.callTool('show-map', {}, { theme: 'dark', prodResources: true });
-  const root = mcp.page.locator('#root');
+test('should activate prod resources mode without errors', async ({ inspector }) => {
+  await inspector.renderTool('show-map', undefined, { theme: 'dark', prodResources: true });
+  const root = inspector.page.locator('#root');
   await expect(root).not.toBeEmpty();
 });
 
-test('should render map in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map', {}, { theme: 'dark' });
+test('should render map in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('.antialiased.w-full.overflow-hidden').first()).toBeVisible({
     timeout: 10000,
   });
 });
 
-test('should have appropriate border color in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map', {}, { theme: 'dark', displayMode: 'inline' });
+test('should have appropriate border color in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map', undefined, {
+    theme: 'dark',
+    displayMode: 'inline',
+  });
   const app = result.app();
 
   const innerContainer = app.locator('.border.rounded-2xl').first();
@@ -120,13 +93,13 @@ test('should have appropriate border color in dark mode', async ({ mcp }) => {
   expect(styles.borderColor).toBeTruthy();
 });
 
-test('should load without console errors in dark mode', async ({ mcp }) => {
+test('should load without console errors in dark mode', async ({ inspector }) => {
   const errors: string[] = [];
-  mcp.page.on('console', (msg) => {
+  inspector.page.on('console', (msg) => {
     if (msg.type() === 'error') errors.push(msg.text());
   });
 
-  const result = await mcp.callTool('show-map', {}, { theme: 'dark' });
+  const result = await inspector.renderTool('show-map', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('.antialiased.w-full.overflow-hidden').first()).toBeVisible({
     timeout: 10000,
@@ -142,8 +115,10 @@ test('should load without console errors in dark mode', async ({ mcp }) => {
   expect(unexpectedErrors).toHaveLength(0);
 });
 
-test('should not have rounded border in fullscreen mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map', {}, { displayMode: 'fullscreen' });
+test('should not have rounded border in fullscreen mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   const innerContainer = app.locator('.rounded-none.border-0').first();
@@ -155,8 +130,10 @@ test('should not have rounded border in fullscreen mode', async ({ mcp }) => {
   expect(styles.borderRadius).toBe('0px');
 });
 
-test('should not show fullscreen button in fullscreen mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-map', {}, { displayMode: 'fullscreen' });
+test('should not show fullscreen button in fullscreen mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-map', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   await expect(app.locator('.antialiased.w-full.overflow-hidden').first()).toBeVisible({
@@ -165,10 +142,12 @@ test('should not show fullscreen button in fullscreen mode', async ({ mcp }) =>
   await expect(app.locator('button[aria-label="Enter fullscreen"]')).not.toBeVisible();
 });
 
-test('should show suggestion chips in fullscreen on desktop', async ({ mcp }) => {
-  await mcp.page.setViewportSize({ width: 1024, height: 768 });
+test('should show suggestion chips in fullscreen on desktop', async ({ inspector }) => {
+  await inspector.page.setViewportSize({ width: 1024, height: 768 });
 
-  const result = await mcp.callTool('show-map', {}, { displayMode: 'fullscreen' });
+  const result = await inspector.renderTool('show-map', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   await expect(app.locator('.antialiased.w-full.overflow-hidden').first()).toBeVisible({