sunpeak 0.14.3 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.14.3",
+  "version": "0.15.1",
   "description": "Local-first MCP Apps framework. Quickstart, build, test, and ship your Claude or ChatGPT App!",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,12 +17,24 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./simulator": {
+      "import": {
+        "types": "./dist/simulator/index.d.ts",
+        "default": "./dist/simulator/index.js"
+      }
+    },
     "./chatgpt": {
       "import": {
         "types": "./dist/chatgpt/index.d.ts",
         "default": "./dist/chatgpt/index.js"
       }
     },
+    "./claude": {
+      "import": {
+        "types": "./dist/claude/index.d.ts",
+        "default": "./dist/claude/index.js"
+      }
+    },
     "./style.css": "./dist/style.css",
     "./chatgpt/globals.css": "./dist/chatgpt/globals.css",
     "./mcp": {
@@ -55,7 +67,9 @@
     "README.md"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/chatgpt-host.*",
+    "**/claude-host.*"
   ],
   "keywords": [
     "openai-app",
@@ -64,6 +78,8 @@
     "mcp-ui",
     "mcp",
     "chatgpt-simulator",
+    "claude",
+    "claude-simulator",
     "testing",
     "multi-platform",
     "react",
@@ -73,7 +89,6 @@
   "author": "Sunpeak AI",
   "license": "MIT",
   "peerDependencies": {
-    "@openai/apps-sdk-ui": "^0.2.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package/template/.sunpeak/dev.tsx

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 /**
  * Bootstrap file for Sunpeak dev server
- * This file bootstraps the ChatGPT simulator for development
+ * This file bootstraps the multi-host simulator for development.
  *
  * Auto-discovers simulations and resources by file naming convention:
  * - tests/simulations/{resource}/{resource}-{scenario}-simulation.json
@@ -10,11 +10,11 @@
  */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { chatgpt } from 'sunpeak';
+import { simulator } from 'sunpeak';
 import '../src/styles/globals.css';
 import resourceComponents from '../src/resources';
 
-const { ChatGPTSimulator, buildDevSimulations } = chatgpt;
+const { Simulator, buildDevSimulations } = simulator;
 
 // Build simulations from discovered files
 const simulations = buildDevSimulations({
@@ -34,7 +34,7 @@ if (import.meta.hot) import.meta.hot.data.root = root;
 
 root.render(
   <StrictMode>
-    <ChatGPTSimulator simulations={simulations} appName={appName} appIcon={appIcon} />
+    <Simulator simulations={simulations} appName={appName} appIcon={appIcon} />
   </StrictMode>
 );
 

package/template/.sunpeak/resource-loader.html

@@ -9,7 +9,7 @@
       margin: 0;
       padding: 0;
       width: 100%;
-      background-color: var(--color-surface);
+      background: transparent;
     }
   </style>
 </head>

package/template/node_modules/.bin/nodemon

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../nodemon/bin/nodemon.js" "$@"

package/template/node_modules/.bin/playwright

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/test/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/test/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/test/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/test/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../@playwright/test/cli.js" "$@"

package/template/node_modules/.bin/sunpeak

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/packages/sunpeak/bin/node_modules:/home/runner/work/sunpeak/sunpeak/packages/sunpeak/node_modules:/home/runner/work/sunpeak/sunpeak/packages/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules:/home/runner/work/sunpeak/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/packages/sunpeak/bin/node_modules:/home/runner/work/sunpeak/sunpeak/packages/sunpeak/node_modules:/home/runner/work/sunpeak/sunpeak/packages/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules:/home/runner/work/sunpeak/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../sunpeak/bin/sunpeak.js" "$@"

package/template/node_modules/.bin/tsc

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"

package/template/node_modules/.bin/tsserver

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"

package/template/node_modules/.bin/tsx

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tsx/dist/cli.mjs" "$@"

package/template/node_modules/.bin/vite

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules/vite/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules/vite/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules/vite/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules/vite/bin/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules/vite/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules/vite/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.6_lightningcss@1.30.2/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"

package/template/src/components/avatar.tsx

@@ -24,7 +24,10 @@ export function Avatar({ imageUrl, name, size = 32, className }: AvatarProps) {
           onError={() => setImgError(true)}
         />
       ) : (
-        <span className="text-secondary font-medium leading-none" style={{ fontSize: size * 0.4 }}>
+        <span
+          className="text-[var(--color-text-secondary)] font-medium leading-none"
+          style={{ fontSize: size * 0.4 }}
+        >
           {initial}
         </span>
       )}

package/template/src/components/button.tsx

@@ -19,48 +19,45 @@ const sizeClasses: Record<ButtonSize, string> = {
   lg: 'h-10 px-4 text-base gap-2',
 };
 
-// Colors reference CSS variables from the ChatGPT theme bundled with sunpeak,
-// which are available in the template's iframe via sunpeak/chatgpt/globals.css.
+// Colors use MCP standard CSS variables (--color-*) provided by the host.
 const variantColorClasses: Record<ButtonVariant, Record<ButtonColor, string>> = {
   solid: {
     primary:
-      'bg-[var(--color-background-primary-solid)] hover:bg-[var(--color-background-primary-solid-hover)] active:bg-[var(--color-background-primary-solid-active)] text-[var(--color-text-primary-solid)]',
+      'bg-[var(--color-background-inverse)] text-[var(--color-text-inverse)] hover:opacity-85 active:opacity-75',
     secondary:
-      'bg-[var(--color-background-secondary-solid)] hover:bg-[var(--color-background-secondary-solid-hover)] active:bg-[var(--color-background-secondary-solid-active)] text-[var(--color-text-secondary-solid)]',
-    warning:
-      'bg-[var(--color-background-warning-solid)] hover:bg-[var(--color-background-warning-solid-hover)] active:bg-[var(--color-background-warning-solid-active)] text-[var(--color-text-warning-solid)]',
-    danger:
-      'bg-[var(--color-background-danger-solid)] hover:bg-[var(--color-background-danger-solid-hover)] active:bg-[var(--color-background-danger-solid-active)] text-[var(--color-text-danger-solid)]',
+      'bg-[var(--color-background-tertiary)] text-[var(--color-text-primary)] hover:opacity-80 active:opacity-70',
+    warning: 'bg-[var(--color-text-warning)] text-white hover:opacity-85 active:opacity-75',
+    danger: 'bg-[var(--color-text-danger)] text-white hover:opacity-85 active:opacity-75',
   },
   soft: {
     primary:
-      'bg-[var(--color-background-primary-soft-alpha)] hover:bg-[var(--color-background-primary-soft-alpha-hover)] active:bg-[var(--color-background-primary-soft-alpha-active)] text-[var(--color-text-primary-soft)]',
+      'bg-[var(--color-background-info)] text-[var(--color-text-info)] hover:opacity-75 active:opacity-65',
     secondary:
-      'bg-[var(--color-background-secondary-soft-alpha)] hover:bg-[var(--color-background-secondary-soft-alpha-hover)] active:bg-[var(--color-background-secondary-soft-alpha-active)] text-[var(--color-text-secondary-soft)]',
+      'bg-[var(--color-background-secondary)] text-[var(--color-text-primary)] hover:opacity-80 active:opacity-70',
     warning:
-      'bg-[var(--color-background-warning-soft-alpha)] hover:bg-[var(--color-background-warning-soft-alpha-hover)] active:bg-[var(--color-background-warning-soft-alpha-active)] text-[var(--color-text-warning-soft)]',
+      'bg-[var(--color-background-warning)] text-[var(--color-text-warning)] hover:opacity-75 active:opacity-65',
     danger:
-      'bg-[var(--color-background-danger-soft-alpha)] hover:bg-[var(--color-background-danger-soft-alpha-hover)] active:bg-[var(--color-background-danger-soft-alpha-active)] text-[var(--color-text-danger-soft)]',
+      'bg-[var(--color-background-danger)] text-[var(--color-text-danger)] hover:opacity-75 active:opacity-65',
   },
   ghost: {
     primary:
-      'bg-transparent hover:bg-[var(--color-background-primary-ghost-hover)] active:bg-[var(--color-background-primary-ghost-active)] text-[var(--color-text-primary-ghost)]',
+      'bg-transparent text-[var(--color-text-info)] hover:bg-[var(--color-background-secondary)] active:bg-[var(--color-background-tertiary)]',
     secondary:
-      'bg-transparent hover:bg-[var(--color-background-secondary-ghost-hover)] active:bg-[var(--color-background-secondary-ghost-active)] text-[var(--color-text-secondary-ghost)]',
+      'bg-transparent text-[var(--color-text-secondary)] hover:bg-[var(--color-background-secondary)] active:bg-[var(--color-background-tertiary)]',
     warning:
-      'bg-transparent hover:bg-[var(--color-background-warning-ghost-hover)] active:bg-[var(--color-background-warning-ghost-active)] text-[var(--color-text-warning-ghost)]',
+      'bg-transparent text-[var(--color-text-warning)] hover:bg-[var(--color-background-warning)] active:bg-[var(--color-background-tertiary)]',
     danger:
-      'bg-transparent hover:bg-[var(--color-background-danger-ghost-hover)] active:bg-[var(--color-background-danger-ghost-active)] text-[var(--color-text-danger-ghost)]',
+      'bg-transparent text-[var(--color-text-danger)] hover:bg-[var(--color-background-danger)] active:bg-[var(--color-background-tertiary)]',
   },
   outline: {
     primary:
-      'bg-transparent border border-[var(--color-border-primary-outline)] hover:bg-[var(--color-background-primary-outline-hover)] hover:border-[var(--color-border-primary-outline-hover)] active:bg-[var(--color-background-primary-outline-active)] text-[var(--color-text-primary-outline)] hover:text-[var(--color-text-primary-outline-hover)]',
+      'bg-transparent border border-[var(--color-border-primary)] text-[var(--color-text-info)] hover:bg-[var(--color-background-secondary)]',
     secondary:
-      'bg-transparent border border-[var(--color-border-secondary-outline)] hover:bg-[var(--color-background-secondary-outline-hover)] hover:border-[var(--color-border-secondary-outline-hover)] active:bg-[var(--color-background-secondary-outline-active)] text-[var(--color-text-secondary-outline)] hover:text-[var(--color-text-secondary-outline-hover)]',
+      'bg-transparent border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-background-secondary)]',
     warning:
-      'bg-transparent border border-[var(--color-border-warning-outline)] hover:bg-[var(--color-background-warning-outline-hover)] hover:border-[var(--color-border-warning-outline-hover)] active:bg-[var(--color-background-warning-outline-active)] text-[var(--color-text-warning-outline)] hover:text-[var(--color-text-warning-outline-hover)]',
+      'bg-transparent border border-[var(--color-border-warning)] text-[var(--color-text-warning)] hover:bg-[var(--color-background-warning)]',
     danger:
-      'bg-transparent border border-[var(--color-border-danger-outline)] hover:bg-[var(--color-background-danger-outline-hover)] hover:border-[var(--color-border-danger-outline-hover)] active:bg-[var(--color-background-danger-outline-active)] text-[var(--color-text-danger-outline)] hover:text-[var(--color-text-danger-outline-hover)]',
+      'bg-transparent border border-[var(--color-border-danger)] text-[var(--color-text-danger)] hover:bg-[var(--color-background-danger)]',
   },
 };
 

package/template/src/resources/albums/albums-resource.tsx

@@ -9,9 +9,8 @@ export const resource: ResourceConfig = {
   mimeType: 'text/html;profile=mcp-app',
   _meta: {
     ui: {
-      domain: 'https://sunpeak.ai',
       csp: {
-        resourceDomains: ['https://cdn.sunpeak.ai', 'https://cdn.openai.com'],
+        resourceDomains: ['https://cdn.sunpeak.ai'],
       },
     },
   },
@@ -25,7 +24,7 @@ export const resource: ResourceConfig = {
  */
 export function AlbumsResource() {
   return (
-    <SafeArea>
+    <SafeArea className="p-4">
       <Albums />
     </SafeArea>
   );

package/template/src/resources/albums/components/album-card.tsx

@@ -33,8 +33,10 @@ export const AlbumCard = React.forwardRef<HTMLButtonElement, AlbumCardProps>(
           />
         </div>
         <div className="flex-shrink-0 w-full p-2">
-          <div className="text-base font-normal text-primary">{album.title}</div>
-          <div className="text-sm text-secondary">
+          <div className="text-base font-normal text-[var(--color-text-primary)]">
+            {album.title}
+          </div>
+          <div className="text-sm text-[var(--color-text-secondary)]">
             {album.photos.length} {album.photos.length === 1 ? 'photo' : 'photos'}
           </div>
         </div>

package/template/src/resources/albums/components/film-strip.test.tsx

@@ -20,8 +20,8 @@ describe('FilmStrip', () => {
 
     const buttons = container.querySelectorAll('button');
 
-    // Selected photo (index 1) should have border-primary
-    expect(buttons[1].className).toContain('border-primary');
+    // Selected photo (index 1) should have accent border
+    expect(buttons[1].className).toContain('border-[var(--color-ring-primary)]');
     expect(buttons[1].className).toContain('shadow-md');
 
     // Non-selected photos should have border-transparent

package/template/src/resources/albums/components/film-strip.tsx

@@ -29,8 +29,8 @@ export const FilmStrip = React.forwardRef<HTMLDivElement, FilmStripProps>(
             className={cn(
               'block w-full h-auto p-[1px] pointer-events-auto rounded-[10px] border transition-all',
               idx === selectedIndex
-                ? 'border-primary shadow-md'
-                : 'border-transparent hover:border-primary/30 opacity-60 hover:opacity-100'
+                ? 'border-[var(--color-ring-primary)] shadow-md'
+                : 'border-transparent hover:border-[var(--color-ring-primary)]/30 opacity-60 hover:opacity-100'
             )}
           >
             <div className="aspect-[5/3] rounded-lg overflow-hidden w-full">

package/template/src/resources/albums/components/fullscreen-viewer.tsx

@@ -44,16 +44,18 @@ export function FullscreenViewer({ album, className }: FullscreenViewerProps) {
     <SafeArea
       ref={containerRef}
       className={cn(
-        'min-h-dvh flex w-full bg-surface',
+        'h-full flex w-full bg-[var(--color-background-primary)]',
         isMobile ? 'flex-col' : 'flex-row',
         className
       )}
     >
       {/* Album header - mobile only */}
       {isMobile && (
-        <div className="border-b border-subtle bg-surface/95 backdrop-blur-sm px-4 py-3">
-          <h2 className="text-base font-semibold text-primary">{album.title}</h2>
-          <p className="text-sm text-secondary">
+        <div className="border-b border-[var(--color-border-tertiary)] bg-[var(--color-background-primary)]/95 backdrop-blur-sm px-4 py-3">
+          <h2 className="text-base font-semibold text-[var(--color-text-primary)]">
+            {album.title}
+          </h2>
+          <p className="text-sm text-[var(--color-text-secondary)]">
             {selectedIndex + 1} / {album.photos.length}
           </p>
         </div>
@@ -72,7 +74,7 @@ export function FullscreenViewer({ album, className }: FullscreenViewerProps) {
           <img
             src={selectedPhoto.url}
             alt={selectedPhoto.title || album.title}
-            className="rounded-3xl shadow-sm border border-primary/10 max-w-full max-h-full object-contain"
+            className="rounded-3xl shadow-sm border border-[var(--color-ring-primary)]/10 max-w-full max-h-full object-contain"
           />
         ) : null}
       </div>

package/template/src/resources/carousel/carousel-resource.tsx

@@ -9,9 +9,8 @@ export const resource: ResourceConfig = {
   mimeType: 'text/html;profile=mcp-app',
   _meta: {
     ui: {
-      domain: 'https://sunpeak.ai',
       csp: {
-        resourceDomains: ['https://cdn.sunpeak.ai', 'https://cdn.openai.com'],
+        resourceDomains: ['https://cdn.sunpeak.ai'],
       },
     },
   },
@@ -47,7 +46,7 @@ export function CarouselResource() {
   const places = output?.places ?? [];
 
   return (
-    <SafeArea>
+    <SafeArea className="p-4">
       <Carousel
         gap={16}
         showArrows={true}

package/template/src/resources/carousel/components/card.test.tsx

@@ -11,14 +11,15 @@ describe('Card', () => {
     );
 
     const card = container.firstChild as HTMLElement;
-    expect(card.className).toContain('border border-subtle bg-surface');
+    expect(card.className).toContain('border border-[var(--color-border-tertiary)]');
+    expect(card.className).toContain('bg-[var(--color-background-primary)]');
 
     rerender(
       <Card variant="bordered" data-testid="card">
         Content
       </Card>
     );
-    expect(card.className).toContain('border-2 border-default bg-surface');
+    expect(card.className).toContain('border-2 border-[var(--color-border-primary)]');
 
     rerender(
       <Card variant="elevated" data-testid="card">

package/template/src/resources/carousel/components/card.tsx

@@ -43,9 +43,11 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     ref
   ) => {
     const variantClasses = {
-      default: 'border border-subtle bg-surface',
-      bordered: 'border-2 border-default bg-surface',
-      elevated: 'border border-subtle bg-surface shadow-lg',
+      default: 'border border-[var(--color-border-tertiary)] bg-[var(--color-background-primary)]',
+      bordered:
+        'border-2 border-[var(--color-border-primary)] bg-[var(--color-background-primary)]',
+      elevated:
+        'border border-[var(--color-border-tertiary)] bg-[var(--color-background-primary)] shadow-lg',
     };
 
     const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -109,7 +111,9 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
               {header}
             </h2>
           )}
-          {metadata && <p className="text-secondary text-xs mb-1">{metadata}</p>}
+          {metadata && (
+            <p className="text-[var(--color-text-secondary)] text-xs mb-1">{metadata}</p>
+          )}
           {children && <div className="text-sm leading-normal line-clamp-2 mb-3">{children}</div>}
           {hasButtons && (
             <div className="flex gap-2 flex-wrap mt-auto">

package/template/src/resources/map/components/map-view.tsx

@@ -195,7 +195,7 @@ export function MapView({
       className={cn(
         'absolute inset-0 overflow-hidden',
         isFullscreen &&
-          'left-[340px] right-2 top-2 bottom-4 border border-black/10 dark:border-white/10 rounded-3xl',
+          'left-[340px] right-2 top-2 bottom-4 border border-[var(--color-border-tertiary)] rounded-3xl',
         className
       )}
     >

package/template/src/resources/map/components/map.tsx

@@ -66,7 +66,7 @@ export function Map({ className }: MapProps) {
           'relative w-full h-full',
           isFullscreen
             ? 'rounded-none border-0'
-            : 'border border-black/10 dark:border-white/10 rounded-2xl sm:rounded-3xl'
+            : 'border border-[var(--color-border-tertiary)] rounded-2xl sm:rounded-3xl'
         )}
       >
         {/* Fullscreen button - only show in embedded mode */}

package/template/src/resources/map/components/place-card.tsx

@@ -24,7 +24,7 @@ export const PlaceCard = React.forwardRef<HTMLDivElement, PlaceCardProps>(
         <div
           className={cn(
             'border-b hover:border-transparent',
-            isSelected ? 'border-transparent' : 'border-black/5 dark:border-white/5'
+            isSelected ? 'border-transparent' : 'border-[var(--color-border-tertiary)]'
           )}
         >
           <button
@@ -38,9 +38,13 @@ export const PlaceCard = React.forwardRef<HTMLDivElement, PlaceCardProps>(
               loading="lazy"
             />
             <div className="min-w-0">
-              <div className="font-medium truncate text-primary">{place.name}</div>
-              <div className="text-xs text-secondary truncate">{place.description}</div>
-              <div className="text-xs mt-1 text-secondary flex items-center gap-1">
+              <div className="font-medium truncate text-[var(--color-text-primary)]">
+                {place.name}
+              </div>
+              <div className="text-xs text-[var(--color-text-secondary)] truncate">
+                {place.description}
+              </div>
+              <div className="text-xs mt-1 text-[var(--color-text-secondary)] flex items-center gap-1">
                 <Star className="h-3 w-3" aria-hidden="true" />
                 {place.rating.toFixed(1)}
                 {place.price && <span>· {place.price}</span>}

package/template/src/resources/map/components/place-carousel.tsx

@@ -26,7 +26,7 @@ export const PlaceCarousel = React.forwardRef<HTMLDivElement, PlaceCarouselProps
               {places.map((place) => (
                 <div
                   key={place.id}
-                  className="ring ring-black/10 dark:ring-white/10 max-w-[330px] w-full shadow-xl rounded-2xl bg-surface flex-shrink-0"
+                  className="ring ring-black/10 dark:ring-white/10 max-w-[330px] w-full shadow-xl rounded-2xl bg-[var(--color-background-primary)] flex-shrink-0"
                 >
                   <PlaceCard
                     place={place}

package/template/src/resources/map/components/place-inspector.tsx

@@ -54,7 +54,7 @@ export const PlaceInspector = React.forwardRef<HTMLDivElement, PlaceInspectorPro
           <X className="h-[18px] w-[18px]" aria-hidden="true" />
         </Button>
 
-        <div className="relative h-full overflow-y-auto rounded-none xl:rounded-3xl bg-surface xl:shadow-xl xl:ring ring-black/10 dark:ring-white/10">
+        <div className="relative h-full overflow-y-auto rounded-none xl:rounded-3xl bg-[var(--color-background-primary)] xl:shadow-xl xl:ring ring-black/10 dark:ring-white/10">
           {/* Thumbnail */}
           <div className="relative mt-2 xl:mt-0 px-2 xl:px-0">
             <img
@@ -68,8 +68,10 @@ export const PlaceInspector = React.forwardRef<HTMLDivElement, PlaceInspectorPro
           <div className="h-[calc(100%-11rem)] sm:h-[calc(100%-14rem)]">
             {/* Place info */}
             <div className="p-4 sm:p-5">
-              <div className="text-2xl font-medium truncate text-primary">{place.name}</div>
-              <div className="text-sm mt-1 text-secondary flex items-center gap-1">
+              <div className="text-2xl font-medium truncate text-[var(--color-text-primary)]">
+                {place.name}
+              </div>
+              <div className="text-sm mt-1 text-[var(--color-text-secondary)] flex items-center gap-1">
                 <Star className="h-3.5 w-3.5" aria-hidden="true" />
                 {place.rating.toFixed(1)}
                 {place.price && <span>· {place.price}</span>}
@@ -100,7 +102,7 @@ export const PlaceInspector = React.forwardRef<HTMLDivElement, PlaceInspectorPro
               </div>
 
               {/* Description */}
-              <div className="text-sm mt-5 text-primary">
+              <div className="text-sm mt-5 text-[var(--color-text-primary)]">
                 {place.description} Enjoy a slice at one of SF&apos;s favorites. Fresh ingredients,
                 great crust, and cozy vibes.
               </div>
@@ -108,15 +110,21 @@ export const PlaceInspector = React.forwardRef<HTMLDivElement, PlaceInspectorPro
 
             {/* Reviews */}
             <div className="px-4 sm:px-5 pb-4">
-              <div className="text-lg font-medium mb-2 text-primary">Reviews</div>
+              <div className="text-lg font-medium mb-2 text-[var(--color-text-primary)]">
+                Reviews
+              </div>
               <ul className="space-y-3 divide-y divide-black/5 dark:divide-white/5">
                 {REVIEWS.map((review, idx) => (
                   <li key={idx} className="py-3">
                     <div className="flex items-start gap-3">
                       <Avatar imageUrl={review.avatar} name={review.user} size={32} />
                       <div className="min-w-0 gap-1 flex flex-col">
-                        <div className="text-xs font-medium text-secondary">{review.user}</div>
-                        <div className="text-sm text-primary">{review.text}</div>
+                        <div className="text-xs font-medium text-[var(--color-text-secondary)]">
+                          {review.user}
+                        </div>
+                        <div className="text-sm text-[var(--color-text-primary)]">
+                          {review.text}
+                        </div>
                       </div>
                     </div>
                   </li>

package/template/src/resources/map/components/place-list.tsx

@@ -46,11 +46,14 @@ export const PlaceList = React.forwardRef<HTMLDivElement, PlaceListProps>(
           className
         )}
       >
-        <div ref={scrollRef} className="relative px-2 h-full overflow-y-auto bg-surface">
+        <div
+          ref={scrollRef}
+          className="relative px-2 h-full overflow-y-auto bg-[var(--color-background-primary)]"
+        >
           {/* Header */}
-          <div className="flex justify-between flex-row items-center px-3 sticky bg-surface top-0 py-4 text-md font-medium">
-            <span className="text-primary">{places.length} results</span>
-            <Settings className="h-5 w-5 text-secondary" aria-hidden="true" />
+          <div className="flex justify-between flex-row items-center px-3 sticky bg-[var(--color-background-primary)] top-0 py-4 text-md font-medium">
+            <span className="text-[var(--color-text-primary)]">{places.length} results</span>
+            <Settings className="h-5 w-5 text-[var(--color-text-secondary)]" aria-hidden="true" />
           </div>
 
           {/* Place list */}

package/template/src/resources/map/map-resource.tsx

@@ -9,12 +9,10 @@ export const resource: ResourceConfig = {
   mimeType: 'text/html;profile=mcp-app',
   _meta: {
     ui: {
-      domain: 'https://sunpeak.ai',
       csp: {
         connectDomains: ['https://api.mapbox.com', 'https://events.mapbox.com'],
         resourceDomains: [
           'https://cdn.sunpeak.ai',
-          'https://cdn.openai.com',
           'https://api.mapbox.com',
           'https://events.mapbox.com',
         ],