sunpeak 0.16.3 → 0.16.5

package/dist/style.css

@@ -1283,10 +1283,6 @@
     background-color: #0000;
   }
 
-  .bg-white {
-    background-color: var(--color-white);
-  }
-
   .bg-gradient-to-l {
     --tw-gradient-position: to left in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1587,10 +1583,6 @@
     white-space: pre-wrap;
   }
 
-  .text-\[\#000000\] {
-    color: #000;
-  }
-
   .text-\[var\(--color-text-danger\)\] {
     color: var(--color-text-danger);
   }

package/package.json

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

package/template/package.json

@@ -30,12 +30,9 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.5.2",
     "jsdom": "^27.3.0",
-    "nodemon": "^3.1.11",
-    "postcss": "^8.5.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.1.18",
-    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^5.4.21",
     "vitest": "^4.0.12"

package/template/src/components/avatar.tsx

@@ -19,7 +19,7 @@ export function Avatar({ imageUrl, name, size = 32, className }: AvatarProps) {
       {imageUrl && !imgError ? (
         <img
           src={imageUrl}
-          alt={name ?? ''}
+          alt={name ?? 'Avatar'}
           className="w-full h-full object-cover"
           onError={() => setImgError(true)}
         />

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Button } from '../../../components/button';
-import { cn } from '../../../lib/index';
+import { Button } from '@/components/button';
+import { cn } from '@/lib/index';
 import type { Album } from './albums';
 
 export type AlbumCardProps = {

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
-import { ArrowLeft, ArrowRight } from '../../../components/icon';
-import { Button } from '../../../components/button';
-import { cn } from '../../../lib/index';
+import { ArrowLeft, ArrowRight } from '@/components/icon';
+import { Button } from '@/components/button';
+import { cn } from '@/lib/index';
 
 export type AlbumCarouselProps = {
   children?: React.ReactNode;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Button } from '../../../components/button';
-import { cn } from '../../../lib/index';
+import { Button } from '@/components/button';
+import { cn } from '@/lib/index';
 import type { Album } from './albums';
 
 export type FilmStripProps = {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SafeArea } from 'sunpeak';
-import { cn } from '../../../lib/index';
+import { cn } from '@/lib/index';
 import { FilmStrip } from './film-strip';
 import type { Album } from './albums';
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Button } from '../../../components/button';
-import { cn } from '../../../lib/index';
+import { Button } from '@/components/button';
+import { cn } from '@/lib/index';
 
 export interface CardButtonProps {
   isPrimary?: boolean;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
-import { ArrowLeft, ArrowRight } from '../../../components/icon';
-import { Button } from '../../../components/button';
-import { cn } from '../../../lib/index';
+import { ArrowLeft, ArrowRight } from '@/components/icon';
+import { Button } from '@/components/button';
+import { cn } from '@/lib/index';
 
 export type CarouselProps = {
   children?: React.ReactNode;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { cn } from '../../../lib/index';
+import { cn } from '@/lib/index';
 import type { Place } from './types';
 
 // Public Mapbox token for demo purposes

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useApp, useAppState, useDisplayMode, useToolData, useViewport } from 'sunpeak';
-import { Button } from '../../../components/button';
-import { ExpandLg } from '../../../components/icon';
-import { cn } from '../../../lib/index';
+import { Button } from '@/components/button';
+import { ExpandLg } from '@/components/icon';
+import { cn } from '@/lib/index';
 import { PlaceList } from './place-list';
 import { PlaceCarousel } from './place-carousel';
 import { PlaceInspector } from './place-inspector';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Star } from '../../../components/icon';
-import { cn } from '../../../lib/index';
+import { Star } from '@/components/icon';
+import { cn } from '@/lib/index';
 import type { Place } from './types';
 
 export type PlaceCardProps = {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
-import { cn } from '../../../lib/index';
+import { cn } from '@/lib/index';
 import { PlaceCard } from './place-card';
 import type { Place } from './types';
 

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Button } from '../../../components/button';
-import { Avatar } from '../../../components/avatar';
-import { X, Star } from '../../../components/icon';
-import { cn } from '../../../lib/index';
+import { Button } from '@/components/button';
+import { Avatar } from '@/components/avatar';
+import { X, Star } from '@/components/icon';
+import { cn } from '@/lib/index';
 import type { Place } from './types';
 
 export type PlaceInspectorProps = {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Settings } from '../../../components/icon';
-import { cn } from '../../../lib/index';
+import { Settings } from '@/components/icon';
+import { cn } from '@/lib/index';
 import { PlaceCard } from './place-card';
 import type { Place } from './types';
 

package/template/src/resources/review/review.tsx

@@ -7,8 +7,8 @@ import {
   SafeArea,
 } from 'sunpeak';
 import type { ResourceConfig } from 'sunpeak';
-import { Button } from '../../components/button';
-import { ExpandLg } from '../../components/icon';
+import { Button } from '@/components/button';
+import { ExpandLg } from '@/components/icon';
 
 export const resource: ResourceConfig = {
   title: 'Review',
@@ -77,15 +77,14 @@ interface Alert {
   message: string;
 }
 
-/** Content section - supports multiple display types */
-interface Section {
-  /** Optional section title */
-  title?: string;
-  /** Section content type */
-  type: 'details' | 'items' | 'changes' | 'preview' | 'summary';
-  /** Content data (type depends on section type) */
-  content: Detail[] | Item[] | Change[] | string;
-}
+/** Content section - discriminated union ensures type-safe content access */
+type Section = { title?: string } & (
+  | { type: 'details'; content: Detail[] }
+  | { type: 'items'; content: Item[] }
+  | { type: 'changes'; content: Change[] }
+  | { type: 'preview'; content: string }
+  | { type: 'summary'; content: Detail[] }
+);
 
 /** Tool call configuration for domain-specific review actions */
 interface ReviewTool {
@@ -128,17 +127,45 @@ interface ReviewState {
 // ============================================================================
 
 const changeTypeConfig = {
-  create: { icon: '+', color: '#16a34a', bg: '#f0fdf4' },
-  modify: { icon: '~', color: '#ca8a04', bg: '#fefce8' },
-  delete: { icon: '\u2212', color: '#dc2626', bg: '#fef2f2' },
-  action: { icon: '\u2192', color: '#2563eb', bg: '#eff6ff' },
+  create: { icon: '+', color: 'light-dark(#16a34a, #4ade80)', bg: 'light-dark(#f0fdf4, #052e16)' },
+  modify: { icon: '~', color: 'light-dark(#ca8a04, #facc15)', bg: 'light-dark(#fefce8, #422006)' },
+  delete: {
+    icon: '\u2212',
+    color: 'light-dark(#dc2626, #f87171)',
+    bg: 'light-dark(#fef2f2, #450a0a)',
+  },
+  action: {
+    icon: '\u2192',
+    color: 'light-dark(#2563eb, #60a5fa)',
+    bg: 'light-dark(#eff6ff, #172554)',
+  },
 };
 
 const alertTypeConfig = {
-  info: { icon: '\u2139', bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },
-  warning: { icon: '\u26A0', bg: '#fefce8', border: '#fde047', text: '#a16207' },
-  error: { icon: '\u2715', bg: '#fef2f2', border: '#fecaca', text: '#b91c1c' },
-  success: { icon: '\u2713', bg: '#f0fdf4', border: '#bbf7d0', text: '#15803d' },
+  info: {
+    icon: '\u2139',
+    bg: 'light-dark(#eff6ff, #172554)',
+    border: 'light-dark(#bfdbfe, #1e3a5f)',
+    text: 'light-dark(#1e40af, #93c5fd)',
+  },
+  warning: {
+    icon: '\u26A0',
+    bg: 'light-dark(#fefce8, #422006)',
+    border: 'light-dark(#fde047, #854d0e)',
+    text: 'light-dark(#a16207, #fde047)',
+  },
+  error: {
+    icon: '\u2715',
+    bg: 'light-dark(#fef2f2, #450a0a)',
+    border: 'light-dark(#fecaca, #7f1d1d)',
+    text: 'light-dark(#b91c1c, #fca5a5)',
+  },
+  success: {
+    icon: '\u2713',
+    bg: 'light-dark(#f0fdf4, #052e16)',
+    border: 'light-dark(#bbf7d0, #14532d)',
+    text: 'light-dark(#15803d, #86efac)',
+  },
 };
 
 function DetailsSection({ content }: { content: Detail[] }) {
@@ -228,7 +255,7 @@ function ChangesSection({ content }: { content: Change[] }) {
           >
             <div className="flex items-start gap-3">
               <span
-                className="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded font-mono font-bold bg-white"
+                className="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded font-mono font-bold bg-[var(--color-background-primary)]"
                 style={{
                   color: config.color,
                   borderWidth: 1,
@@ -244,7 +271,7 @@ function ChangesSection({ content }: { content: Change[] }) {
                     {change.path}
                   </code>
                 )}
-                <p className="text-sm text-[#000000]">{change.description}</p>
+                <p className="text-sm text-[var(--color-text-primary)]">{change.description}</p>
                 {change.details && (
                   <p className="mt-1 text-xs text-[var(--color-text-secondary)]">
                     {change.details}
@@ -299,17 +326,15 @@ function SectionRenderer({ section }: { section: Section }) {
   const renderContent = () => {
     switch (section.type) {
       case 'details':
-        return <DetailsSection content={section.content as Detail[]} />;
+        return <DetailsSection content={section.content} />;
       case 'items':
-        return <ItemsSection content={section.content as Item[]} />;
+        return <ItemsSection content={section.content} />;
       case 'changes':
-        return <ChangesSection content={section.content as Change[]} />;
+        return <ChangesSection content={section.content} />;
       case 'preview':
-        return <PreviewSection content={section.content as string} />;
+        return <PreviewSection content={section.content} />;
       case 'summary':
-        return <SummarySection content={section.content as Detail[]} />;
-      default:
-        return null;
+        return <SummarySection content={section.content} />;
     }
   };
 
@@ -500,7 +525,12 @@ export function ReviewResource() {
           <div className="flex flex-col items-center gap-1">
             <div
               className="flex items-center justify-center gap-2"
-              style={{ color: decision === 'accepted' ? '#16a34a' : '#dc2626' }}
+              style={{
+                color:
+                  decision === 'accepted'
+                    ? 'light-dark(#16a34a, #4ade80)'
+                    : 'light-dark(#dc2626, #f87171)',
+              }}
             >
               <span className="text-lg">{decision === 'accepted' ? '\u2713' : '\u2717'}</span>
               <span className="font-medium">

package/template/src/tools/review-diff.ts

@@ -19,6 +19,8 @@ export const schema = {
   runMigrations: z.boolean().describe('Whether to run database migrations as part of the change'),
 };
 
-export default async function (_args: Record<string, unknown>, _extra: ToolHandlerExtra) {
+type Args = z.infer<z.ZodObject<typeof schema>>;
+
+export default async function (_args: Args, _extra: ToolHandlerExtra) {
   return { structuredContent: { title: 'Review', sections: [] } };
 }

package/template/src/tools/review-post.ts

@@ -21,6 +21,8 @@ export const schema = {
   visibility: z.enum(['public', 'connections', 'private']).describe('Post visibility setting'),
 };
 
-export default async function (_args: Record<string, unknown>, _extra: ToolHandlerExtra) {
+type Args = z.infer<z.ZodObject<typeof schema>>;
+
+export default async function (_args: Args, _extra: ToolHandlerExtra) {
   return { structuredContent: { title: 'Review Your Post', sections: [] } };
 }

package/template/src/tools/review-purchase.ts

@@ -26,6 +26,8 @@ export const schema = {
   paymentMethodId: z.string().describe('ID of the saved payment method'),
 };
 
-export default async function (_args: Record<string, unknown>, _extra: ToolHandlerExtra) {
+type Args = z.infer<z.ZodObject<typeof schema>>;
+
+export default async function (_args: Args, _extra: ToolHandlerExtra) {
   return { structuredContent: { title: 'Confirm Your Order', sections: [] } };
 }

package/template/src/tools/show-albums.ts

@@ -17,6 +17,8 @@ export const schema = {
   limit: z.number().describe('Maximum number of albums to return'),
 };
 
-export default async function (_args: Record<string, unknown>, _extra: ToolHandlerExtra) {
+type Args = z.infer<z.ZodObject<typeof schema>>;
+
+export default async function (_args: Args, _extra: ToolHandlerExtra) {
   return { structuredContent: { albums: [] } };
 }

package/template/src/tools/show-carousel.ts

@@ -20,6 +20,8 @@ export const schema = {
   limit: z.number().describe('Maximum number of places to return'),
 };
 
-export default async function (_args: Record<string, unknown>, _extra: ToolHandlerExtra) {
+type Args = z.infer<z.ZodObject<typeof schema>>;
+
+export default async function (_args: Args, _extra: ToolHandlerExtra) {
   return { structuredContent: { places: [] } };
 }

package/template/src/tools/show-map.ts

@@ -24,6 +24,8 @@ export const schema = {
   priceRange: z.array(z.enum(['$', '$$', '$$$', '$$$$'])).describe('Price range filter'),
 };
 
-export default async function (_args: Record<string, unknown>, _extra: ToolHandlerExtra) {
+type Args = z.infer<z.ZodObject<typeof schema>>;
+
+export default async function (_args: Args, _extra: ToolHandlerExtra) {
   return { structuredContent: { places: [] } };
 }

package/template/tsconfig.json

@@ -16,7 +16,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src", ".sunpeak"]
+  "include": ["src", "tests", ".sunpeak"]
 }

package/template/vitest.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '@': path.resolve(__dirname, 'src'),
       // In workspace dev mode, use local sunpeak source
       ...(isTemplate && {
         sunpeak: parentSrc,

package/template/node_modules/.bin/nodemon

@@ -1,21 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  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/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" "$@"
-else
-  exec node  "$basedir/../nodemon/bin/nodemon.js" "$@"
-fi

package/template/node_modules/.bin/tsx

@@ -1,21 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  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/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" "$@"
-else
-  exec node  "$basedir/../tsx/dist/cli.mjs" "$@"
-fi