sunpeak 0.5.41 → 0.6.1

package/README.md

@@ -21,6 +21,7 @@ Quickstart, build, test, and ship your ChatGPT App locally!
 
 [Demo (Hosted)](https://sunpeak.ai/#simulator) ~
 [Demo (Video)](https://d10djik02wlf6x.cloudfront.net/sunpeak-demo-prod.mp4) ~
+[Discord (NEW)](https://discord.gg/FB2QNXqRnw) ~
 [Documentation](https://docs.sunpeak.ai/) ~
 [GitHub](https://github.com/Sunpeak-AI/sunpeak)
 

package/bin/commands/build.mjs

@@ -26,12 +26,12 @@ export async function build(projectRoot = process.cwd()) {
   const distDir = path.join(projectRoot, 'dist/chatgpt');
   const buildDir = path.join(projectRoot, 'dist/build-output');
   const tempDir = path.join(projectRoot, '.tmp');
-  const resourcesDir = path.join(projectRoot, 'src/components/resources');
+  const resourcesDir = path.join(projectRoot, 'src/resources');
   const templateFile = path.join(projectRoot, 'src/index-resource.tsx');
 
   // Validate project structure
   if (!existsSync(resourcesDir)) {
-    console.error('Error: src/components/resources directory not found');
+    console.error('Error: src/resources directory not found');
     console.error('Expected location: ' + resourcesDir);
     console.error('\nThe build command expects the standard Sunpeak project structure.');
     console.error('If you have customized your project structure, you may need to use');
@@ -106,7 +106,7 @@ export async function build(projectRoot = process.cwd()) {
     });
 
   if (resourceFiles.length === 0) {
-    console.error('Error: No resource files found in src/components/resources/');
+    console.error('Error: No resource files found in src/resources/');
     console.error('Resource files should be named like: counter-resource.tsx');
     process.exit(1);
   }
@@ -144,7 +144,7 @@ export async function build(projectRoot = process.cwd()) {
 
       // Create entry file from template in temp directory
       const entryContent = template
-        .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/components/resources/${componentFile}';`)
+        .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/resources/${componentFile}';`)
         .replace('// RESOURCE_MOUNT', `createRoot(root).render(<${componentName} />);`);
 
       const entryPath = path.join(projectRoot, entry);

package/dist/chatgpt/globals.css

@@ -30,3 +30,10 @@
 @utility bg-sidebar {
   background-color: var(--color-surface-secondary);
 }
+
+/* Ensure Select dropdowns appear above mobile drawer overlay when simulator is present */
+@layer components {
+  :has(.sunpeak-simulator-root) :where([role="listbox"], [data-radix-select-content], [data-radix-popper-content-wrapper]) {
+    z-index: 100 !important;
+  }
+}

package/dist/index.cjs

@@ -5706,6 +5706,7 @@ const preventDefaultHandler = (evt) => {
 };
 const Check = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18.063 5.674a1 1 0 0 1 .263 1.39l-7.5 11a1 1 0 0 1-1.533.143l-4.5-4.5a1 1 0 1 1 1.414-1.414l3.647 3.647 6.82-10.003a1 1 0 0 1 1.39-.263Z", clipRule: "evenodd" }) });
 const ChevronDownVector = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 9", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L8 6.58579L14.2929 0.292894C14.6834 -0.0976305 15.3166 -0.0976304 15.7071 0.292894C16.0976 0.683418 16.0976 1.31658 15.7071 1.70711L8.70711 8.70711C8.31658 9.09763 7.68342 9.09763 7.29289 8.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" }) });
+const ChevronRight = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) });
 const CloseBold = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.83071 5.83077C6.33839 5.32309 7.16151 5.32309 7.66919 5.83077L12 10.1615L16.3307 5.83077C16.8384 5.32309 17.6615 5.32309 18.1692 5.83077C18.6769 6.33845 18.6769 7.16157 18.1692 7.66925L13.8384 12L18.1692 16.3308C18.6769 16.8385 18.6769 17.6616 18.1692 18.1693C17.6615 18.6769 16.8384 18.6769 16.3307 18.1693L12 13.8385L7.66919 18.1693C7.16151 18.6769 6.33839 18.6769 5.83071 18.1693C5.32303 17.6616 5.32303 16.8385 5.83071 16.3308L10.1615 12L5.83071 7.66925C5.32303 7.16157 5.32303 6.33845 5.83071 5.83077Z", fill: "currentColor" }) });
 const DropdownVector = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 10 16", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.34151 0.747423C4.71854 0.417526 5.28149 0.417526 5.65852 0.747423L9.65852 4.24742C10.0742 4.61111 10.1163 5.24287 9.75259 5.6585C9.38891 6.07414 8.75715 6.11626 8.34151 5.75258L5.00001 2.82877L1.65852 5.75258C1.24288 6.11626 0.61112 6.07414 0.247438 5.6585C-0.116244 5.24287 -0.0741267 4.61111 0.34151 4.24742L4.34151 0.747423ZM0.246065 10.3578C0.608879 9.94139 1.24055 9.89795 1.65695 10.2608L5.00001 13.1737L8.34308 10.2608C8.75948 9.89795 9.39115 9.94139 9.75396 10.3578C10.1168 10.7742 10.0733 11.4058 9.65695 11.7687L5.65695 15.2539C5.28043 15.582 4.7196 15.582 4.34308 15.2539L0.343082 11.7687C-0.0733128 11.4058 -0.116749 10.7742 0.246065 10.3578Z" }) });
 const Info = (props) => jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [jsxRuntime.jsx("path", { d: "M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z", clipRule: "evenodd" })] });
@@ -7378,12 +7379,78 @@ const Segment = ({ children, ...restProps }) => {
 };
 SegmentedControl.Option = Segment;
 function SimpleSidebar({ children, controls }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen w-full overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "max-md:hidden md:flex w-56 flex-col border-r border-subtle bg-sidebar overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold sticky top-0 bg-sidebar z-10 py-2", children: "Controls" }),
-      controls
-    ] }) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children })
+  const [isDrawerOpen, setIsDrawerOpen] = React__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sunpeak-simulator-root flex h-screen w-full overflow-hidden relative", children: [
+    isDrawerOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "md:hidden fixed inset-0 bg-black/50 z-40 pointer-events-auto",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            setIsDrawerOpen(false);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "aside",
+      {
+        className: `
+          w-56 flex flex-col border-r border-subtle bg-sidebar
+          md:relative md:z-auto
+          max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-[100]
+          max-md:transition-transform max-md:duration-300
+          ${isDrawerOpen ? "max-md:translate-x-0" : "max-md:-translate-x-full"}
+        `,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold", children: "Controls" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsDrawerOpen(false),
+                className: "md:hidden text-secondary hover:text-primary transition-colors p-1",
+                type: "button",
+                "aria-label": "Close sidebar",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M12 4L4 12M4 4L12 12",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          controls
+        ] }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-auto relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setIsDrawerOpen(true),
+          className: "md:hidden fixed top-18 left-0 z-30 bg-sidebar border-r border-t border-b border-subtle rounded-r-md p-2 shadow-lg hover:bg-primary/10 transition-colors",
+          type: "button",
+          "aria-label": "Open sidebar",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
+        }
+      ),
+      children
+    ] })
   ] });
 }
 function SidebarControl({ label, children }) {
@@ -7616,7 +7683,7 @@ 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: "no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-4 z-50 mx-auto max-w-[40rem] lg:max-w-[48rem] sm:start-0 sm:end-0 sm:top-[3.25rem] sm:w-full overflow-visible",
+                                className: "no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-12 z-50 mx-auto max-w-[40rem] lg:max-w-[48rem] sm:start-0 sm:end-0 sm:top-[3.25rem] sm:w-full overflow-visible",
                                 style: { maxHeight: "480px" },
                                 children: [
                                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -7633,7 +7700,7 @@ function Conversation({
                                       children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, { className: "h-4 w-4" })
                                     }
                                   ),
-                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-[#212121]", children }) })
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-white dark:bg-[#212121]", children }) })
                                 ]
                               }
                             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-[1rem] max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full", children }) }) })