sunpeak 0.2.4 → 0.2.5

package/template/README.md

@@ -19,12 +19,48 @@ Edit [src/App.tsx](./src/App.tsx) to build your app UI.
 ```
 src/
 ├── App.tsx          # Your main app component
-└── components       # Your shadcn/ui React components
+└── components/      # Your shadcn/ui React components
+
+mcp/
+└── server.ts        # MCP server for testing in ChatGPT
 
 dist/                # Build output (generated)
 └── chatgpt/         # ChatGPT builds
 ```
 
+## Testing
+
+### Testing Locally
+
+Run the following scripts, and manually QA the UI from the dev server:
+
+```bash
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm build
+pnpm dev
+```
+
+### Testing in ChatGPT
+
+Test your app directly in ChatGPT using the built-in MCP server:
+
+```bash
+# 1. Build your app. You must rebuild your app for changes to take effect.
+pnpm build
+
+# 2. Start the MCP server.
+pnpm mcp
+
+# 3. In another terminal, run a tunnel. For example:
+ngrok http 6766
+```
+
+The server will run on `http://localhost:6766` and serve your App component with dummy data from `mcp/server.ts`.
+
+You can then connect to the tunnel `/mcp` path from ChatGPT in developer mode to see your UI in action.
+
 ## Build & Deploy
 
 Build your app for production:
@@ -36,7 +72,7 @@ pnpm build
 This creates optimized builds in the `dist/` directory:
 
 - `dist/chatgpt/index.js` - ChatGPT iframe component
-  - Host this file somewhere and reference it as a resource in your MCP server.
+  - Host this file somewhere and reference it as a resource in your production MCP server.
 
 ## Resources
 

package/template/dev/main.tsx

@@ -4,53 +4,55 @@ import { ChatGPTSimulator } from 'sunpeak';
 import { App } from '@/App';
 import './styles.css';
 
-const places = [
-  {
-    id: '1',
-    name: 'Lady Bird Lake',
-    rating: 4.5,
-    category: 'Waterfront',
-    location: 'Austin',
-    image: 'https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop',
-    description: 'Scenic lake perfect for kayaking, paddleboarding, and trails.',
-  },
-  {
-    id: '2',
-    name: 'Texas State Capitol',
-    rating: 4.8,
-    category: 'Historic Site',
-    location: 'Austin',
-    image: 'https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop',
-    description: 'Stunning capitol building with free tours and beautiful grounds.',
-  },
-  {
-    id: '3',
-    name: 'The Paramount Theatre',
-    rating: 4.7,
-    category: 'Architecture',
-    location: 'Austin',
-    image: 'https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop',
-    description: 'Century-old performance and movie theatre in the heart of downtown Austin.',
-  },
-  {
-    id: '4',
-    name: 'Zilker Park',
-    rating: 4.7,
-    category: 'Park',
-    location: 'Austin',
-    image: 'https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop',
-    description: 'Popular park with trails, sports fields, and Barton Springs Pool.',
-  },
-  {
-    id: '5',
-    name: 'South Congress Avenue',
-    rating: 4.6,
-    category: 'Landmark',
-    location: 'Austin',
-    image: 'https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop',
-    description: 'Vibrant street with unique shops, restaurants, and live music.',
-  },
-];
+const toolOutput = {
+  places: [
+    {
+      id: '1',
+      name: 'Lady Bird Lake',
+      rating: 4.5,
+      category: 'Waterfront',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop',
+      description: 'Scenic lake perfect for kayaking, paddleboarding, and trails.',
+    },
+    {
+      id: '2',
+      name: 'Texas State Capitol',
+      rating: 4.8,
+      category: 'Historic Site',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop',
+      description: 'Stunning capitol building with free tours and beautiful grounds.',
+    },
+    {
+      id: '3',
+      name: 'The Paramount Theatre',
+      rating: 4.7,
+      category: 'Architecture',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop',
+      description: 'Century-old performance and movie theatre in the heart of downtown Austin.',
+    },
+    {
+      id: '4',
+      name: 'Zilker Park',
+      rating: 4.7,
+      category: 'Park',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop',
+      description: 'Popular park with trails, sports fields, and Barton Springs Pool.',
+    },
+    {
+      id: '5',
+      name: 'South Congress Avenue',
+      rating: 4.6,
+      category: 'Landmark',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop',
+      description: 'Vibrant street with unique shops, restaurants, and live music.',
+    },
+  ],
+};
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -58,8 +60,9 @@ createRoot(document.getElementById('root')!).render(
       appName="Splorin"
       appIcon="✈️"
       userMessage="Show me popular places to visit in Austin Texas"
+      toolOutput={toolOutput}
     >
-      <App data={places} />
+      <App />
     </ChatGPTSimulator>
   </StrictMode>
 );

package/template/mcp/server.ts

@@ -0,0 +1,66 @@
+import { runMCPServer } from 'sunpeak/mcp';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Dummy data matching the dev script
+const toolOutput = {
+  places: [
+    {
+      id: '1',
+      name: 'Lady Bird Lake',
+      rating: 4.5,
+      category: 'Waterfront',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop',
+      description: 'Scenic lake perfect for kayaking, paddleboarding, and trails.',
+    },
+    {
+      id: '2',
+      name: 'Texas State Capitol',
+      rating: 4.8,
+      category: 'Historic Site',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop',
+      description: 'Stunning capitol building with free tours and beautiful grounds.',
+    },
+    {
+      id: '3',
+      name: 'The Paramount Theatre',
+      rating: 4.7,
+      category: 'Architecture',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop',
+      description: 'Century-old performance and movie theatre in the heart of downtown Austin.',
+    },
+    {
+      id: '4',
+      name: 'Zilker Park',
+      rating: 4.7,
+      category: 'Park',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop',
+      description: 'Popular park with trails, sports fields, and Barton Springs Pool.',
+    },
+    {
+      id: '5',
+      name: 'South Congress Avenue',
+      rating: 4.6,
+      category: 'Landmark',
+      location: 'Austin',
+      image: 'https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop',
+      description: 'Vibrant street with unique shops, restaurants, and live music.',
+    },
+  ],
+};
+
+runMCPServer({
+  name: 'my-sunpeak-app',
+  version: '0.1.0',
+  distPath: path.resolve(__dirname, '../dist/chatgpt/index.global.js'),
+  toolName: 'show-places',
+  toolDescription: 'Show popular places in Austin',
+  dummyData: toolOutput,
+  port: 6766,
+});

package/template/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "vite",
+    "mcp": "tsx mcp/server.ts",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
@@ -27,7 +28,9 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
+    "postcss": "^8.4.49",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/template/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/template/src/App.tsx

@@ -1,4 +1,6 @@
+import { useWidgetProps } from 'sunpeak';
 import { SunpeakCarousel, SunpeakCard } from './components';
+import 'tw-animate-css';
 import '@/styles/globals.css';
 import '@/styles/chatgpt.css';
 
@@ -12,14 +14,16 @@ export interface Place {
   description: string;
 }
 
-export interface AppProps {
-  data: Place[];
+export interface AppData extends Record<string, unknown> {
+  places: Place[];
 }
 
-export function App({ data }: AppProps) {
+export function App() {
+  const data = useWidgetProps<AppData>(() => ({ places: [] }));
+
   return (
     <SunpeakCarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
-      {data.map((place) => (
+      {data.places.map((place) => (
         <SunpeakCard
           key={place.id}
           image={place.image}

package/template/src/components/sunpeak-card.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { useWidgetState } from "sunpeak"
 import { cn } from "@/lib/index"
 import {
   Card,
@@ -15,10 +16,27 @@ export interface SunpeakButtonProps extends Omit<React.ComponentProps<typeof But
   onClick: () => void
 }
 
+export interface SunpeakCardData extends Record<string, unknown> {
+  image?: string
+  imageAlt?: string
+  imageMaxWidth?: number
+  imageMaxHeight?: number
+  header?: React.ReactNode
+  metadata?: React.ReactNode
+  children?: React.ReactNode
+  button1?: SunpeakButtonProps
+  button2?: SunpeakButtonProps
+  variant?: "default" | "bordered" | "elevated"
+}
+
+export interface SunpeakCardState extends Record<string, unknown> {
+  selectedVariant?: "default" | "bordered" | "elevated"
+}
+
 export interface SunpeakCardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode
-  image: string
-  imageAlt: string
+  image?: string
+  imageAlt?: string
   imageMaxWidth?: number
   imageMaxHeight?: number
   header?: React.ReactNode
@@ -31,22 +49,35 @@ export interface SunpeakCardProps extends React.HTMLAttributes<HTMLDivElement> {
 export const SunpeakCard = React.forwardRef<HTMLDivElement, SunpeakCardProps>(
   (
     {
-      children,
-      image,
-      imageAlt,
-      imageMaxWidth = 400,
-      imageMaxHeight = 400,
-      header,
-      metadata,
-      button1,
-      button2,
-      variant = "default",
+      children: childrenProp,
+      image: imageProp,
+      imageAlt: imageAltProp,
+      imageMaxWidth: imageMaxWidthProp = 400,
+      imageMaxHeight: imageMaxHeightProp = 400,
+      header: headerProp,
+      metadata: metadataProp,
+      button1: button1Prop,
+      button2: button2Prop,
+      variant: variantProp = "default",
       className,
       onClick,
       ...props
     },
     ref
   ) => {
+    const [widgetState] = useWidgetState<SunpeakCardState>(() => ({}))
+
+    const children = childrenProp
+    const image = imageProp
+    const imageAlt = imageAltProp
+    const imageMaxWidth = imageMaxWidthProp
+    const imageMaxHeight = imageMaxHeightProp
+    const header = headerProp
+    const metadata = metadataProp
+    const button1 = button1Prop
+    const button2 = button2Prop
+    const variant = widgetState?.selectedVariant ?? variantProp
+
     const hasButtons = button1 || button2
 
     const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {

package/template/src/components/sunpeak-carousel.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
+import { useWidgetState, useDisplayMode } from "sunpeak"
 import { cn } from "@/lib/index"
 import {
   Carousel,
@@ -10,6 +11,18 @@ import {
   type CarouselApi,
 } from "@/components/shadcn/carousel"
 
+export interface SunpeakCarouselData extends Record<string, unknown> {
+  children?: React.ReactNode
+  gap?: number
+  showArrows?: boolean
+  showEdgeGradients?: boolean
+  cardWidth?: number | { inline?: number; fullscreen?: number }
+}
+
+export interface SunpeakCarouselState extends Record<string, unknown> {
+  currentIndex?: number
+}
+
 export type SunpeakCarouselProps = {
   children?: React.ReactNode
   gap?: number
@@ -25,15 +38,26 @@ export const SunpeakCarousel = React.forwardRef<
 >(
   (
     {
-      children,
-      gap = 16,
-      showArrows = true,
-      showEdgeGradients = true,
-      cardWidth,
+      children: childrenProp,
+      gap: gapProp = 16,
+      showArrows: showArrowsProp = true,
+      showEdgeGradients: showEdgeGradientsProp = true,
+      cardWidth: cardWidthProp,
       className,
     },
     ref
   ) => {
+    const [widgetState, setWidgetState] = useWidgetState<SunpeakCarouselState>(() => ({
+      currentIndex: 0,
+    }))
+    const displayMode = useDisplayMode()
+
+    const children = childrenProp
+    const gap = gapProp
+    const showArrows = showArrowsProp
+    const showEdgeGradients = showEdgeGradientsProp
+    const cardWidth = cardWidthProp
+
     const [api, setApi] = React.useState<CarouselApi>()
     const [canScrollPrev, setCanScrollPrev] = React.useState(false)
     const [canScrollNext, setCanScrollNext] = React.useState(false)
@@ -44,6 +68,11 @@ export const SunpeakCarousel = React.forwardRef<
       const onSelect = () => {
         setCanScrollPrev(api.canScrollPrev())
         setCanScrollNext(api.canScrollNext())
+
+        const currentIndex = api.selectedScrollSnap()
+        if (widgetState?.currentIndex !== currentIndex) {
+          setWidgetState({ currentIndex })
+        }
       }
 
       onSelect()
@@ -54,7 +83,7 @@ export const SunpeakCarousel = React.forwardRef<
         api.off("select", onSelect)
         api.off("reInit", onSelect)
       }
-    }, [api])
+    }, [api, widgetState?.currentIndex, setWidgetState])
 
     const childArray = React.Children.toArray(children)
 
@@ -62,8 +91,13 @@ export const SunpeakCarousel = React.forwardRef<
       if (typeof cardWidth === "number") {
         return `${cardWidth}px`
       }
-      if (cardWidth?.inline) {
-        return `${cardWidth.inline}px`
+      if (cardWidth && typeof cardWidth === "object") {
+        if (displayMode === "fullscreen" && cardWidth.fullscreen) {
+          return `${cardWidth.fullscreen}px`
+        }
+        if (cardWidth.inline) {
+          return `${cardWidth.inline}px`
+        }
       }
       return "220px"
     }

package/template/src/index.chatgpt.tsx

@@ -0,0 +1,8 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+// Mount the App to the root element
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<App />);
+}

package/template/src/styles/globals.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 

package/template/tsup.config.ts

@@ -1,23 +1,50 @@
 import { defineConfig } from 'tsup';
+import postcss from 'postcss';
+import tailwindcss from '@tailwindcss/postcss';
+import type { Plugin } from 'esbuild';
+import fs from 'fs';
+
+function postcssPlugin(): Plugin {
+  return {
+    name: 'postcss',
+    setup(build) {
+      build.onLoad({ filter: /\.css$/ }, async (args) => {
+        const css = fs.readFileSync(args.path, 'utf8');
+        const result = await postcss([tailwindcss()]).process(css, {
+          from: args.path,
+        });
+        return {
+          contents: result.css,
+          loader: 'css',
+        };
+      });
+    },
+  };
+}
 
 export default defineConfig({
   entry: {
-    'chatgpt/index': 'src/App.tsx',
+    'chatgpt/index': 'src/index.chatgpt.tsx',
   },
-  format: ['esm'],
+  format: ['iife'],
   dts: false,
   sourcemap: false,
   clean: true,
   external: [],
+  noExternal: [/.*/],
   treeshake: true,
   splitting: false,
   minify: true,
   outDir: 'dist',
   injectStyle: true,
+  globalName: 'SunpeakApp',
+  esbuildPlugins: [postcssPlugin()],
   esbuildOptions(options) {
     options.bundle = true;
     options.platform = 'browser';
     options.target = 'es2020';
     options.jsx = 'automatic';
+    // Enable "style" condition for CSS-only packages like tw-animate-css
+    options.conditions = ['style', 'import', 'module', 'browser', 'default'];
   },
 });