sunpeak 0.6.1 → 0.6.5

package/bin/sunpeak.js

@@ -27,7 +27,82 @@ function checkPackageJson() {
   }
 }
 
-async function init(projectName) {
+function parseResourcesInput(input) {
+  const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'pizzaz'];
+
+  // If no input, return all resources
+  if (!input || input.trim() === '') {
+    return VALID_RESOURCES;
+  }
+
+  // Split by comma or space and trim
+  const tokens = input
+    .toLowerCase()
+    .split(/[,\s]+/)
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+
+  // Validate tokens
+  const invalid = tokens.filter((t) => !VALID_RESOURCES.includes(t));
+  if (invalid.length > 0) {
+    console.error(`Error: Invalid resource(s): ${invalid.join(', ')}`);
+    console.error(`Valid resources are: ${VALID_RESOURCES.join(', ')}`);
+    process.exit(1);
+  }
+
+  // Remove duplicates
+  return [...new Set(tokens)];
+}
+
+function updateIndexFiles(targetDir, selectedResources) {
+  // Map resource names to their component/export names
+  const resourceMap = {
+    albums: { component: 'album', resourceClass: 'AlbumsResource', simulation: 'albums' },
+    carousel: { component: 'carousel', resourceClass: 'CarouselResource', simulation: 'carousel' },
+    counter: { component: null, resourceClass: 'CounterResource', simulation: 'counter' },
+    pizzaz: { component: 'pizzaz', resourceClass: 'PizzazResource', simulation: 'pizzaz' },
+  };
+
+  // Update components/index.ts
+  const componentsIndexPath = join(targetDir, 'src', 'components', 'index.ts');
+  const componentExports = selectedResources
+    .map((r) => resourceMap[r].component)
+    .filter((comp) => comp !== null) // Filter out null components
+    .filter((v, i, a) => a.indexOf(v) === i) // Remove duplicates
+    .map((comp) => `export * from './${comp}';`)
+    .join('\n');
+  writeFileSync(componentsIndexPath, componentExports + '\n');
+
+  // Update resources/index.ts
+  const resourcesIndexPath = join(targetDir, 'src', 'resources', 'index.ts');
+  const resourceExports = selectedResources
+    .map((r) => `export { ${resourceMap[r].resourceClass} } from './${r}-resource';`)
+    .join('\n');
+  writeFileSync(resourcesIndexPath, resourceExports + '\n');
+
+  // Update simulations/index.ts
+  const simulationsIndexPath = join(targetDir, 'src', 'simulations', 'index.ts');
+  const simulationImports = selectedResources
+    .map((r) => `import { ${r}Simulation } from './${r}-simulation.js';`)
+    .join('\n');
+  const simulationExports = selectedResources.map((r) => `  ${r}: ${r}Simulation,`).join('\n');
+  const simulationsContent = `/**
+ * Server-safe simulation configurations
+ *
+ * This file contains only metadata and can be safely imported in Node.js contexts
+ * (like MCP servers) without causing issues with CSS imports or React components.
+ */
+
+${simulationImports}
+
+export const SIMULATIONS = {
+${simulationExports}
+} as const;
+`;
+  writeFileSync(simulationsIndexPath, simulationsContent);
+}
+
+async function init(projectName, resourcesArg) {
   if (!projectName) {
     projectName = await prompt('☀️ 🏔️ Project name [my-app]: ');
     if (!projectName) {
@@ -40,6 +115,18 @@ async function init(projectName) {
     process.exit(1);
   }
 
+  // Use resources from args or ask for them
+  let resourcesInput;
+  if (resourcesArg) {
+    resourcesInput = resourcesArg;
+    console.log(`☀️ 🏔️ Resources: ${resourcesArg}`);
+  } else {
+    resourcesInput = await prompt(
+      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, counter, pizzaz]: '
+    );
+  }
+  const selectedResources = parseResourcesInput(resourcesInput);
+
   const targetDir = join(process.cwd(), projectName);
 
   if (existsSync(targetDir)) {
@@ -53,11 +140,45 @@ async function init(projectName) {
 
   mkdirSync(targetDir, { recursive: true });
 
+  // Map resource names to their component directory names
+  const resourceComponentMap = {
+    albums: 'album',
+    carousel: 'carousel',
+    counter: null, // Counter doesn't have a component directory
+    pizzaz: 'pizzaz',
+  };
+
   cpSync(templateDir, targetDir, {
     recursive: true,
     filter: (src) => {
       const name = basename(src);
-      return name !== 'node_modules' && name !== 'pnpm-lock.yaml';
+
+      // Skip node_modules and lock file
+      if (name === 'node_modules' || name === 'pnpm-lock.yaml') {
+        return false;
+      }
+
+      // Filter resource files based on selection
+      const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'pizzaz'];
+      const excludedResources = VALID_RESOURCES.filter((r) => !selectedResources.includes(r));
+
+      for (const resource of excludedResources) {
+        // Skip resource files
+        if (name === `${resource}-resource.tsx` || name === `${resource}-resource.test.tsx`) {
+          return false;
+        }
+        // Skip simulation files
+        if (name === `${resource}-simulation.ts`) {
+          return false;
+        }
+        // Skip component directories (map resource name to component dir name)
+        const componentDirName = resourceComponentMap[resource];
+        if (componentDirName && src.includes('/components/') && name === componentDirName) {
+          return false;
+        }
+      }
+
+      return true;
     },
   });
 
@@ -88,6 +209,9 @@ async function init(projectName) {
 
   writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 
+  // Update index.ts files based on selected resources
+  updateIndexFiles(targetDir, selectedResources);
+
   console.log(`
 Done! To get started:
 
@@ -119,7 +243,7 @@ const [, , command, ...args] = process.argv;
 
   switch (command) {
     case 'new':
-      await init(args[0]);
+      await init(args[0], args[1]);
       break;
 
     case 'dev':
@@ -149,8 +273,11 @@ const [, , command, ...args] = process.argv;
 ☀️ 🏔️ sunpeak - The MCP App framework
 
 Usage:
-  npx sunpeak new [name]   Create a new project (no install needed)
-  pnpm dlx sunpeak new     Alternative with pnpm
+  npx sunpeak new [name] [resources]   Create a new project (no install needed)
+  pnpm dlx sunpeak new                  Alternative with pnpm
+
+  Resources: albums, carousel, counter, pizzaz (comma/space separated)
+  Example: npx sunpeak new my-app "albums,carousel"
 
 Inside your project, use npm scripts:
   pnpm dev                 Start development server
@@ -159,7 +286,7 @@ Inside your project, use npm scripts:
   pnpm test                Run tests
 
 Direct CLI commands (when sunpeak is installed):
-  sunpeak new [name]       Create a new project
+  sunpeak new [name] [resources]  Create a new project
   sunpeak dev              Start dev server
   sunpeak build            Build resources
   sunpeak mcp              Start MCP server

package/dist/chatgpt/conversation.d.ts

@@ -6,6 +6,7 @@ interface ConversationProps {
     appName?: string;
     appIcon?: string;
     userMessage?: string;
+    resourceMeta?: Record<string, unknown>;
 }
-export declare function Conversation({ children, screenWidth, appName, appIcon, userMessage, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ children, screenWidth, appName, appIcon, userMessage, resourceMeta, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.cjs

@@ -7572,9 +7572,10 @@ const SCREEN_WIDTHS = {
 function Conversation({
   children,
   screenWidth,
-  appName = "Sunpeak App",
+  appName = "Sunpeak",
   appIcon,
-  userMessage = "What have you got for me today?"
+  userMessage = "What have you got for me today?",
+  resourceMeta
 }) {
   const displayMode = useDisplayMode() ?? "inline";
   const api = useWidgetAPI();
@@ -7608,7 +7609,25 @@ function Conversation({
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end" })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    color: "primary",
+                    className: "bg-token-bg-primary",
+                    onClick: () => {
+                      const widgetDomain = resourceMeta == null ? void 0 : resourceMeta["openai/widgetDomain"];
+                      if ((api == null ? void 0 : api.openExternal) && widgetDomain) {
+                        api.openExternal({ href: widgetDomain });
+                      }
+                    },
+                    children: [
+                      appIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "me-2 h-4 w-4 flex items-center justify-center", children: appIcon }),
+                      "Open in ",
+                      appName
+                    ]
+                  }
+                ) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children }) }),
               /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7917,7 +7936,7 @@ const DEFAULT_DISPLAY_MODE = "inline";
 function ChatGPTSimulator({
   children,
   simulations = [],
-  appName = "Sunpeak App",
+  appName = "Sunpeak",
   appIcon
 }) {
   const [screenWidth, setScreenWidth] = React__namespace.useState("full");
@@ -8411,6 +8430,7 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage,
+          resourceMeta: selectedSim == null ? void 0 : selectedSim.resource._meta,
           children: content
         },
         selectedKey