sunpeak 0.17.1 → 0.17.3

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.1",
+  "version": "0.17.3",
   "description": "Local-first MCP Apps framework. Quickstart, build, test, and ship your Claude Connector or ChatGPT App!",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -138,9 +138,11 @@
     "@clack/prompts": "^1.1.0",
     "@modelcontextprotocol/ext-apps": "^1.2.2",
     "@modelcontextprotocol/sdk": "^1.27.1",
+    "@vitejs/plugin-react": "^6.0.1",
     "clsx": "^2.1.1",
     "esbuild": "^0.27.4",
     "tailwind-merge": "^3.5.0",
+    "vite": "^8.0.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
@@ -153,7 +155,6 @@
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
-    "@vitejs/plugin-react": "^6.0.1",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
@@ -166,7 +167,6 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vite": "^8.0.1",
     "vite-plugin-dts": "^4.5.4",
     "@playwright/test": "^1.52.0",
     "vitest": "^4.1.0"

package/template/dist/albums/albums.json

@@ -12,5 +12,5 @@
     }
   },
   "name": "albums",
-  "uri": "ui://albums-mn3d6pat"
+  "uri": "ui://albums-mn3hdmxc"
 }

package/template/dist/carousel/carousel.json

@@ -12,5 +12,5 @@
     }
   },
   "name": "carousel",
-  "uri": "ui://carousel-mn3d6pat"
+  "uri": "ui://carousel-mn3hdmxc"
 }

package/template/dist/map/map.json

@@ -18,5 +18,5 @@
     }
   },
   "name": "map",
-  "uri": "ui://map-mn3d6pat"
+  "uri": "ui://map-mn3hdmxc"
 }

package/template/dist/review/review.json

@@ -12,5 +12,5 @@
     }
   },
   "name": "review",
-  "uri": "ui://review-mn3d6pat"
+  "uri": "ui://review-mn3hdmxc"
 }

package/template/node_modules/.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
 {
-  "hash": "94c29524",
+  "hash": "1ce9cdb5",
   "configHash": "6bb870ac",
-  "lockfileHash": "79024c29",
-  "browserHash": "017999f0",
+  "lockfileHash": "a41e63ba",
+  "browserHash": "33b5a01f",
   "optimized": {},
   "chunks": {}
 }

package/template/node_modules/.vite-mcp/deps/_metadata.json

@@ -1,103 +1,103 @@
 {
-  "hash": "0b87d214",
+  "hash": "ea2e52c1",
   "configHash": "276d46b2",
-  "lockfileHash": "79024c29",
-  "browserHash": "98225b94",
+  "lockfileHash": "a41e63ba",
+  "browserHash": "9b1eab7b",
   "optimized": {
     "@modelcontextprotocol/ext-apps": {
       "src": "../../../../../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.2.2_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_e9bf7657371391a829fe8b4e289b253c/node_modules/@modelcontextprotocol/ext-apps/dist/src/app.js",
       "file": "@modelcontextprotocol_ext-apps.js",
-      "fileHash": "5cf9cba0",
+      "fileHash": "c55a9218",
       "needsInterop": false
     },
     "@modelcontextprotocol/ext-apps/app-bridge": {
       "src": "../../../../../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.2.2_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_e9bf7657371391a829fe8b4e289b253c/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js",
       "file": "@modelcontextprotocol_ext-apps_app-bridge.js",
-      "fileHash": "788b66d7",
+      "fileHash": "0846f57f",
       "needsInterop": false
     },
     "@modelcontextprotocol/ext-apps/react": {
       "src": "../../../../../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.2.2_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_e9bf7657371391a829fe8b4e289b253c/node_modules/@modelcontextprotocol/ext-apps/dist/src/react/index.js",
       "file": "@modelcontextprotocol_ext-apps_react.js",
-      "fileHash": "e24dc457",
+      "fileHash": "4117a8f1",
       "needsInterop": false
     },
     "@testing-library/react": {
       "src": "../../../../../../node_modules/.pnpm/@testing-library+react@16.3.2_@testing-library+dom@10.4.1_@types+react-dom@19.2.3_@type_893f466751a7d66081fd06e9edb9241a/node_modules/@testing-library/react/dist/@testing-library/react.esm.js",
       "file": "@testing-library_react.js",
-      "fileHash": "54861a90",
+      "fileHash": "7da1596d",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "1c439706",
+      "fileHash": "0aaf372b",
       "needsInterop": false
     },
     "embla-carousel-react": {
       "src": "../../../../../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.4/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js",
       "file": "embla-carousel-react.js",
-      "fileHash": "695b3971",
+      "fileHash": "3c5a7c5c",
       "needsInterop": false
     },
     "embla-carousel-wheel-gestures": {
       "src": "../../../../../../node_modules/.pnpm/embla-carousel-wheel-gestures@8.1.0_embla-carousel@8.6.0/node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js",
       "file": "embla-carousel-wheel-gestures.js",
-      "fileHash": "d07fc67f",
+      "fileHash": "ccbdf054",
       "needsInterop": false
     },
     "mapbox-gl": {
       "src": "../../../../../../node_modules/.pnpm/mapbox-gl@3.20.0/node_modules/mapbox-gl/dist/mapbox-gl.js",
       "file": "mapbox-gl.js",
-      "fileHash": "8559179b",
+      "fileHash": "4ffe4afe",
       "needsInterop": true
     },
     "react-dom": {
       "src": "../../../../../../node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/index.js",
       "file": "react-dom.js",
-      "fileHash": "9eb38a9b",
+      "fileHash": "4d49f264",
       "needsInterop": true
     },
     "react-dom/client": {
       "src": "../../../../../../node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/client.js",
       "file": "react-dom_client.js",
-      "fileHash": "0ee455b5",
+      "fileHash": "80eaedf6",
       "needsInterop": true
     },
     "react": {
       "src": "../../../../../../node_modules/.pnpm/react@19.2.4/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "3fb02cc0",
+      "fileHash": "7e139e48",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../../../../../node_modules/.pnpm/react@19.2.4/node_modules/react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "591bceaf",
+      "fileHash": "8fe1fa8e",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../../../../../node_modules/.pnpm/react@19.2.4/node_modules/react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "6e1d7148",
+      "fileHash": "ba719946",
       "needsInterop": true
     },
     "tailwind-merge": {
       "src": "../../../../../../node_modules/.pnpm/tailwind-merge@3.5.0/node_modules/tailwind-merge/dist/bundle-mjs.mjs",
       "file": "tailwind-merge.js",
-      "fileHash": "64deb91e",
+      "fileHash": "47ba3d6b",
       "needsInterop": false
     },
     "vitest": {
       "src": "../../../../../../node_modules/.pnpm/vitest@4.1.0_@types+node@25.5.0_jsdom@29.0.1_vite@8.0.1_@types+node@25.5.0_esbuild@0.27.4_jiti@2.6.1_tsx@4.21.0_/node_modules/vitest/dist/index.js",
       "file": "vitest.js",
-      "fileHash": "4daaba14",
+      "fileHash": "258cddf8",
       "needsInterop": false
     },
     "zod": {
       "src": "../../../../../../node_modules/.pnpm/zod@4.3.6/node_modules/zod/index.js",
       "file": "zod.js",
-      "fileHash": "3671ff4b",
+      "fileHash": "d8049871",
       "needsInterop": false
     }
   },

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',