sunpeak 0.5.35 → 0.5.39

package/bin/commands/build.mjs

@@ -19,6 +19,10 @@ export async function build(projectRoot = process.cwd()) {
     process.exit(1);
   }
 
+  // Check if we're in the sunpeak workspace (directory is named "template")
+  const isTemplate = path.basename(projectRoot) === 'template';
+  const parentSrc = path.resolve(projectRoot, '../src');
+
   const distDir = path.join(projectRoot, 'dist/chatgpt');
   const buildDir = path.join(projectRoot, 'dist/build-output');
   const tempDir = path.join(projectRoot, '.tmp');
@@ -155,6 +159,12 @@ export async function build(projectRoot = process.cwd()) {
         },
         resolve: {
           conditions: ['style', 'import', 'module', 'browser', 'default'],
+          alias: {
+            // In workspace dev mode, use local sunpeak source
+            ...(isTemplate && {
+              sunpeak: parentSrc,
+            }),
+          },
         },
         build: {
           target: 'es2020',

package/bin/commands/dev.mjs

@@ -3,7 +3,7 @@ import { createServer } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
 import { existsSync } from 'fs';
-import { join } from 'path';
+import { join, resolve, basename } from 'path';
 
 /**
  * Start the Vite development server
@@ -27,10 +27,22 @@ export async function dev(projectRoot = process.cwd(), args = []) {
 
   console.log(`Starting Vite dev server on port ${port}...`);
 
+  // Check if we're in the sunpeak workspace (directory is named "template")
+  const isTemplate = basename(projectRoot) === 'template';
+  const parentSrc = resolve(projectRoot, '../src');
+
   // Create and start Vite dev server programmatically
   const server = await createServer({
     root: projectRoot,
     plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        // In workspace dev mode, use local sunpeak source
+        ...(isTemplate && {
+          sunpeak: parentSrc,
+        }),
+      },
+    },
     server: {
       port,
       open: true,

package/dist/index.cjs

@@ -7511,23 +7511,37 @@ function Conversation({
         api.requestDisplayMode({ mode: "inline" });
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-subtle bg-surface z-10 grid h-12 grid-cols-[1fr_auto_1fr] border-b px-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleClose,
-            "aria-label": "Close",
-            className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
-            type: "button",
-            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" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden flex-1", 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(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "w-full border-subtle bg-surface z-10 grid h-12 grid-cols-[1fr_auto_1fr] border-b px-2",
+          style: { maxWidth: containerWidth },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleClose,
+                "aria-label": "Close",
+                className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
+                type: "button",
+                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" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "relative overflow-hidden flex-1 w-full",
+          style: { maxWidth: containerWidth },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface w-full", style: { maxWidth: containerWidth }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "text",
@@ -7539,18 +7553,25 @@ function Conversation({
       ) }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: "SimGPT" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "header",
+      {
+        className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40 w-full",
+        style: { maxWidth: containerWidth },
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: "SimGPT" })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "flex flex-col flex-1 mx-auto w-full transition-all duration-200 overflow-hidden",
+        className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
         style: { maxWidth: containerWidth },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "sr-only", children: "You said:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto pt-12 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto md:pt-8 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   "data-message-author-role": "user",
@@ -7571,7 +7592,7 @@ function Conversation({
                     " said:"
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-full flex-col grow", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-3", children: [
                       appIcon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium text-xs", children: "AI" }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: appName })
                     ] }),
@@ -7583,8 +7604,11 @@ function Conversation({
                         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
-                            className: "fixed start-4 end-4 top-14 z-50 mx-auto max-w-[48rem] md:start-60 md:end-4 sm:start-0 sm:end-0 sm:w-full overflow-visible",
-                            style: { maxHeight: "429px" },
+                            className: "fixed top-14 z-50 overflow-visible left-1/2 md:left-[calc(50vw+7rem)] -translate-x-1/2 max-w-[calc(100vw-2rem)] md:max-w-[calc(100vw-16rem)]",
+                            style: {
+                              maxHeight: "429px",
+                              width: containerWidth
+                            },
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx(
                                 "button",
@@ -7818,6 +7842,7 @@ function ChatGPTSimulator({
   appIcon
 }) {
   const [screenWidth, setScreenWidth] = React__namespace.useState("full");
+  const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
   const getSimulationKey = (sim) => `${sim.resource.name}-${sim.tool.name}`;
   const [selectedKey, setSelectedKey] = React__namespace.useState(
     simulations.length > 0 ? getSimulationKey(simulations[0]) : ""
@@ -7916,6 +7941,11 @@ function ChatGPTSimulator({
       }
     };
   }, []);
+  React.useEffect(() => {
+    if (isMobileWidth(screenWidth) && displayMode === "pip") {
+      mock.setDisplayMode("fullscreen");
+    }
+  }, [screenWidth, displayMode, mock]);
   React.useEffect(() => {
     if (editingField !== "toolInput") {
       setToolInputJson(JSON.stringify(toolInput ?? {}, null, 2));
@@ -8017,7 +8047,14 @@ function ChatGPTSimulator({
           SidebarToggle,
           {
             value: displayMode,
-            onChange: (value) => mock.setDisplayMode(value),
+            onChange: (value) => {
+              const newMode = value;
+              if (isMobileWidth(screenWidth) && newMode === "pip") {
+                mock.setDisplayMode("fullscreen");
+              } else {
+                mock.setDisplayMode(newMode);
+              }
+            },
             options: [
               { value: "inline", label: "Inline" },
               { value: "pip", label: "PiP" },