sunpeak 0.8.1 → 0.8.4

package/bin/commands/dev.mjs

@@ -1,9 +1,56 @@
 #!/usr/bin/env node
-import { createServer } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
 import { existsSync } from 'fs';
-import { join, resolve, basename } from 'path';
+import { join, resolve, basename, dirname } from 'path';
+import { createRequire } from 'module';
+import { pathToFileURL } from 'url';
+
+/**
+ * Import a module from the project's node_modules using ESM resolution
+ */
+async function importFromProject(require, moduleName) {
+  // Resolve the module's main entry to find its location
+  const resolvedPath = require.resolve(moduleName);
+
+  // Walk up to find package.json
+  const { readFileSync } = await import('fs');
+  let pkgDir = dirname(resolvedPath);
+  let pkg;
+  while (pkgDir !== dirname(pkgDir)) {
+    try {
+      const pkgJsonPath = join(pkgDir, 'package.json');
+      pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+      if (pkg.name === moduleName || moduleName.startsWith(pkg.name + '/')) {
+        break;
+      }
+    } catch {
+      // No package.json at this level, keep looking
+    }
+    pkgDir = dirname(pkgDir);
+  }
+
+  if (!pkg) {
+    // Fallback to CJS resolution if we can't find package.json
+    return import(resolvedPath);
+  }
+
+  // Determine ESM entry: exports.import > exports.default > module > main
+  let entry = pkg.main || 'index.js';
+  if (pkg.exports) {
+    const exp = pkg.exports['.'] || pkg.exports;
+    if (typeof exp === 'string') {
+      entry = exp;
+    } else if (exp.import) {
+      entry = typeof exp.import === 'string' ? exp.import : exp.import.default;
+    } else if (exp.default) {
+      entry = exp.default;
+    }
+  } else if (pkg.module) {
+    entry = pkg.module;
+  }
+
+  const entryPath = join(pkgDir, entry);
+  return import(pathToFileURL(entryPath).href);
+}
 
 /**
  * Start the Vite development server
@@ -18,6 +65,15 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     process.exit(1);
   }
 
+  // Import vite and plugins from the project's node_modules (ESM)
+  const require = createRequire(join(projectRoot, 'package.json'));
+  const vite = await importFromProject(require, 'vite');
+  const createServer = vite.createServer;
+  const reactPlugin = await importFromProject(require, '@vitejs/plugin-react');
+  const react = reactPlugin.default;
+  const tailwindPlugin = await importFromProject(require, '@tailwindcss/vite');
+  const tailwindcss = tailwindPlugin.default;
+
   // Parse port from args or use default
   let port = parseInt(process.env.PORT || '6767');
   const portArgIndex = args.findIndex(arg => arg === '--port' || arg === '-p');

package/bin/commands/mcp.mjs

@@ -29,7 +29,7 @@ export async function mcp(projectRoot = process.cwd(), args = []) {
   // Add inline nodemon configuration
   nodemonArgs.push(
     '--watch', 'src',
-    '--ext', 'ts,tsx,js,jsx,css',
+    '--ext', 'ts,tsx,js,jsx,css,json',
     '--ignore', 'dist',
     '--ignore', 'node_modules',
     '--ignore', '.tmp',

package/bin/sunpeak.js

@@ -28,7 +28,7 @@ function checkPackageJson() {
 }
 
 function parseResourcesInput(input) {
-  const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'map'];
+  const VALID_RESOURCES = ['albums', 'carousel', 'confirmation', 'counter', 'map'];
 
   // If no input, return all resources
   if (!input || input.trim() === '') {
@@ -59,6 +59,7 @@ function updateIndexFiles(targetDir, selectedResources) {
   const resourceMap = {
     albums: { component: 'album', resourceClass: 'AlbumsResource' },
     carousel: { component: 'carousel', resourceClass: 'CarouselResource' },
+    confirmation: { component: null, resourceClass: 'ConfirmationResource' },
     counter: { component: null, resourceClass: 'CounterResource' },
     map: { component: 'map', resourceClass: 'MapResource' },
   };
@@ -138,7 +139,7 @@ async function init(projectName, resourcesArg) {
     console.log(`☀️ 🏔️ Resources: ${resourcesArg}`);
   } else {
     resourcesInput = await prompt(
-      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, counter, map]: '
+      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, confirmation, counter, map]: '
     );
   }
   const selectedResources = parseResourcesInput(resourcesInput);
@@ -160,6 +161,7 @@ async function init(projectName, resourcesArg) {
   const resourceComponentMap = {
     albums: 'album',
     carousel: 'carousel',
+    confirmation: null, // Confirmation doesn't have a component directory
     counter: null, // Counter doesn't have a component directory
     map: 'map',
   };
@@ -175,7 +177,7 @@ async function init(projectName, resourcesArg) {
       }
 
       // Filter resource files based on selection
-      const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'map'];
+      const VALID_RESOURCES = ['albums', 'carousel', 'confirmation', 'counter', 'map'];
       const excludedResources = VALID_RESOURCES.filter((r) => !selectedResources.includes(r));
 
       for (const resource of excludedResources) {
@@ -402,7 +404,7 @@ Usage:
   npx sunpeak new [name] [resources]   Create a new project (no install needed)
   pnpm dlx sunpeak new                  Alternative with pnpm
 
-  Resources: albums, carousel, counter, map (comma/space separated)
+  Resources: albums, carousel, confirmation, counter, map (comma/space separated)
   Example: npx sunpeak new my-app "albums,carousel"
 
 Inside your project, use npm scripts:

package/dist/index.cjs

@@ -7585,6 +7585,8 @@ function Conversation({
 }) {
   const displayMode = useDisplayMode() ?? "inline";
   const api = useWidgetAPI();
+  const userAgent = useUserAgent();
+  const isDesktop = (userAgent == null ? void 0 : userAgent.device.type) === "desktop";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
   if (displayMode === "fullscreen") {
     const handleClose = () => {
@@ -7614,8 +7616,8 @@ function Conversation({
                     children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, {})
                   }
                 ) }),
-                /* @__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", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                isDesktop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
+                isDesktop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   Button,
                   {
                     variant: "outline",