sunpeak 0.5.41 → 0.6.4

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/bin/sunpeak.js

@@ -27,7 +27,81 @@ function checkPackageJson() {
   }
 }
 
-async function init(projectName) {
+function parseResourcesInput(input) {
+  const VALID_RESOURCES = ['albums', 'carousel', 'counter'];
+
+  // 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' },
+  };
+
+  // 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 +114,16 @@ 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]: ');
+  }
+  const selectedResources = parseResourcesInput(resourcesInput);
+
   const targetDir = join(process.cwd(), projectName);
 
   if (existsSync(targetDir)) {
@@ -53,11 +137,44 @@ 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
+  };
+
   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'];
+      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 +205,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 +239,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 +269,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 (comma/space separated, or "all")
+  Example: npx sunpeak new my-app "albums,carousel"
 
 Inside your project, use npm scripts:
   pnpm dev                 Start development server
@@ -159,7 +282,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/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 }) {
@@ -7505,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();
@@ -7541,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(
@@ -7616,7 +7702,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 +7719,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 }) }) })
@@ -7850,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");
@@ -8344,6 +8430,7 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage,
+          resourceMeta: selectedSim == null ? void 0 : selectedSim.resource._meta,
           children: content
         },
         selectedKey