sunpeak 0.17.2 → 0.17.4

package/bin/commands/build.mjs

@@ -5,6 +5,7 @@ import { createRequire } from 'module';
 import { pathToFileURL } from 'url';
 import { toPascalCase } from '../lib/patterns.mjs';
 import { extractResourceExport } from '../lib/extract-resource.mjs';
+import { lightningcssConfig } from '../lib/css.mjs';
 
 /**
  * Resolve the ESM entry point for a package from a specific project directory.
@@ -237,6 +238,9 @@ export async function build(projectRoot = process.cwd(), { quiet = false } = {})
             define: {
               'process.env.NODE_ENV': JSON.stringify('production'),
             },
+            css: {
+              lightningcss: lightningcssConfig,
+            },
             resolve: {
               conditions: ['style', 'import', 'module', 'browser', 'default'],
               alias: {

package/bin/commands/dev.mjs

@@ -8,6 +8,7 @@ import { pathToFileURL } from 'url';
 import { spawn } from 'child_process';
 import { getPort } from '../lib/get-port.mjs';
 import { startSandboxServer } from '../lib/sandbox-server.mjs';
+import { lightningcssConfig } from '../lib/css.mjs';
 import { inspectServer } from './inspect.mjs';
 
 /**
@@ -422,6 +423,7 @@ if (import.meta.hot) {
     root: projectRoot,
     cacheDir: 'node_modules/.vite-mcp',
     plugins: [react(), tailwindcss(), sunpeakEntryPlugin()],
+    css: { lightningcss: lightningcssConfig },
     resolve: {
       alias: {
         '@': path.resolve(projectRoot, 'src'),

package/bin/lib/css.mjs

@@ -0,0 +1,13 @@
+/**
+ * Shared lightningcss configuration for all Vite instances that process Tailwind CSS.
+ *
+ * Tailwind v4's `@source` directive is consumed by `@tailwindcss/vite` but may
+ * still be visible to lightningcss during parsing/minification, producing
+ * "Unknown at rule: @source" warnings. Declaring it as a custom at-rule
+ * tells lightningcss the rule is intentional.
+ */
+export const lightningcssConfig = {
+  customAtRules: {
+    source: { prelude: '<string>' },
+  },
+};

package/dist/chatgpt/globals.css

@@ -1,88 +1,3 @@
-@import "tailwindcss";
-
-/* Scan simulator source files for Tailwind classes */
-@source "./**/*.{ts,tsx}";
-
-/* Also scan host-specific shell components */
-@source "../chatgpt/**/*.{ts,tsx}";
-@source "../claude/**/*.{ts,tsx}";
-
-/* Configure dark mode to use data-theme attribute */
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
-
-/* Sidebar utility — host-overridable via --sim-bg-sidebar */
-@utility bg-sidebar {
-  background-color: var(--sim-bg-sidebar, var(--color-background-secondary));
-}
-
-/* Sidebar form elements — match SDK look */
-.sunpeak-simulator-root select,
-.sunpeak-simulator-root input:not([type="checkbox"]),
-.sunpeak-simulator-root textarea {
-  border: 0;
-  box-shadow: inset 0 0 0 1px var(--color-border-primary);
-  transition: box-shadow 150ms ease, color 150ms ease, background-color 150ms ease;
-}
-.sunpeak-simulator-root select:hover,
-.sunpeak-simulator-root input:not([type="checkbox"]):hover,
-.sunpeak-simulator-root textarea:hover {
-  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
-}
-.sunpeak-simulator-root select:focus-visible,
-.sunpeak-simulator-root input:not([type="checkbox"]):focus-visible,
-.sunpeak-simulator-root textarea:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
-  outline: 2px solid var(--color-ring-primary);
-  outline-offset: -1px;
-}
-.sunpeak-simulator-root button:focus-visible {
-  outline: 2px solid var(--color-ring-primary);
-  outline-offset: -1px;
-}
-
-/* Custom checkbox */
-.sunpeak-simulator-root input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  border: 1px solid var(--color-border-secondary);
-  background-color: transparent;
-  background-size: 10px;
-  background-position: center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: border-color 150ms ease, background-color 150ms ease;
-}
-.sunpeak-simulator-root input[type="checkbox"]:hover {
-  border-color: var(--color-text-tertiary);
-}
-.sunpeak-simulator-root input[type="checkbox"]:checked {
-  border-color: var(--color-background-inverse);
-  background-color: var(--color-background-inverse);
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 5L4.25 7L8 3' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
-}
-[data-theme="dark"] .sunpeak-simulator-root input[type="checkbox"]:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 5L4.25 7L8 3' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
-}
-.sunpeak-simulator-root input[type="checkbox"]:focus-visible {
-  outline: 2px solid var(--color-ring-primary);
-  outline-offset: 2px;
-}
-
-/* Hide native number input spinners */
-.sunpeak-simulator-root input[type="number"]::-webkit-inner-spin-button,
-.sunpeak-simulator-root input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.sunpeak-simulator-root input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-/* Bundled component styles */
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "description": "Local-first MCP Apps framework. Quickstart, build, test, and ship your Claude Connector or ChatGPT App!",
   "type": "module",
   "main": "./dist/index.cjs",

package/template/dist/albums/albums.json

@@ -12,5 +12,5 @@
     }
   },
   "name": "albums",
-  "uri": "ui://albums-mn3eflsg"
+  "uri": "ui://albums-mn3jnkfe"
 }

package/template/dist/carousel/carousel.json

@@ -12,5 +12,5 @@
     }
   },
   "name": "carousel",
-  "uri": "ui://carousel-mn3eflsg"
+  "uri": "ui://carousel-mn3jnkfe"
 }

package/template/dist/map/map.json

@@ -18,5 +18,5 @@
     }
   },
   "name": "map",
-  "uri": "ui://map-mn3eflsg"
+  "uri": "ui://map-mn3jnkfe"
 }

package/template/dist/review/review.json

@@ -12,5 +12,5 @@
     }
   },
   "name": "review",
-  "uri": "ui://review-mn3eflsg"
+  "uri": "ui://review-mn3jnkfe"
 }

package/template/playwright.config.ts

@@ -1,30 +1,9 @@
 import { defineConfig, devices } from '@playwright/test';
-import { execSync } from 'child_process';
 
-/**
- * Find an available port synchronously.
- * Spawns a tiny Node script that binds, prints the port, and exits.
- */
-function getPortSync(preferred: number): number {
-  const script = `
-    const s = require("net").createServer();
-    s.listen(${preferred}, () => {
-      process.stdout.write(String(s.address().port));
-      s.close();
-    });
-    s.on("error", () => {
-      const f = require("net").createServer();
-      f.listen(0, () => {
-        process.stdout.write(String(f.address().port));
-        f.close();
-      });
-    });
-  `;
-  return Number(execSync(`node -e '${script}'`, { encoding: 'utf-8' }).trim());
-}
-
-const port = Number(process.env.SUNPEAK_TEST_PORT) || getPortSync(6776);
-const sandboxPort = Number(process.env.SUNPEAK_SANDBOX_PORT) || getPortSync(24680);
+// Use fixed preferred ports. If in use, `reuseExistingServer` (local) reuses
+// the running server. In CI, validate.mjs assigns unique ports via env vars.
+const port = Number(process.env.SUNPEAK_TEST_PORT) || 6776;
+const sandboxPort = Number(process.env.SUNPEAK_SANDBOX_PORT) || 24680;
 
 export default defineConfig({
   globalSetup: './tests/e2e/global-setup.ts',

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

@@ -318,7 +318,9 @@ for (const host of hosts) {
         const iframe = page.frameLocator('iframe').frameLocator('iframe');
         const publishButton = iframe.locator('button:has-text("Publish")');
         await expect(publishButton).toBeVisible();
-        await publishButton.click();
+        // Use evaluate to dispatch click directly — Playwright's coordinate-based
+        // click can miss the target inside the double cross-origin iframe.
+        await publishButton.evaluate((el) => (el as HTMLElement).click());
 
         // Should show the server's success message from serverTools mock
         await expect(iframe.locator('text=Completed.')).toBeVisible({ timeout: 10000 });
@@ -338,7 +340,7 @@ for (const host of hosts) {
         const iframe = page.frameLocator('iframe').frameLocator('iframe');
         const cancelButton = iframe.locator('button:has-text("Cancel")');
         await expect(cancelButton).toBeVisible();
-        await cancelButton.click();
+        await cancelButton.evaluate((el) => (el as HTMLElement).click());
 
         // Server returned cancelled status via serverTools when condition
         await expect(iframe.locator('text=Cancelled.')).toBeVisible({ timeout: 10000 });
@@ -378,7 +380,7 @@ for (const host of hosts) {
         const iframe = page.frameLocator('iframe').frameLocator('iframe');
         const placeOrderButton = iframe.locator('button:has-text("Place Order")');
         await expect(placeOrderButton).toBeVisible();
-        await placeOrderButton.click();
+        await placeOrderButton.evaluate((el) => (el as HTMLElement).click());
 
         // After server responds, should show what the user clicked and the server result
         await expect(iframe.locator('text=Placing order...')).toBeVisible({ timeout: 10000 });
@@ -399,7 +401,7 @@ for (const host of hosts) {
         const iframe = page.frameLocator('iframe').frameLocator('iframe');
         const applyButton = iframe.locator('button:has-text("Apply Changes")');
         await expect(applyButton).toBeVisible();
-        await applyButton.click();
+        await applyButton.evaluate((el) => (el as HTMLElement).click());
 
         // Should show the decision label and server response
         await expect(iframe.locator('text=Applying changes...')).toBeVisible({ timeout: 10000 });
@@ -418,7 +420,7 @@ for (const host of hosts) {
         const iframe = page.frameLocator('iframe').frameLocator('iframe');
         const cancelButton = iframe.locator('button:has-text("Cancel")');
         await expect(cancelButton).toBeVisible();
-        await cancelButton.click();
+        await cancelButton.evaluate((el) => (el as HTMLElement).click());
 
         // Server returned cancelled status via when condition matching
         await expect(iframe.locator('text=Cancelled.')).toBeVisible({ timeout: 10000 });