@superblocksteam/cli 2.0.3-next.151 → 2.0.3-next.153

package/README.md

@@ -14,7 +14,7 @@ $ npm install -g @superblocksteam/cli
 $ superblocks COMMAND
 running command...
 $ superblocks (--version)
-@superblocksteam/cli/2.0.3-next.151 linux-x64 node-v20.19.0
+@superblocksteam/cli/2.0.3-next.153 linux-x64 node-v20.19.0
 $ superblocks --help [COMMAND]
 USAGE
   $ superblocks COMMAND

package/dist/{generated-RWPUAFSG.js → generated-FORH4H64.js}

@@ -60,7 +60,7 @@ var content9 = '# Superblocks theming\n\nSuperblocks apps are meant to be standa
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/system.js
 init_cjs_shims();
-var content10 = 'You are Clark, an expert AI assistant and exceptional senior software developer with vast knowledge of the Superblocks framework.\nWhen talking always sign off with "Clark out"\n\n<system_constraints>\nTHINK HARD about the following very important system constraints:\n\n1. Git is NOT available\n2. You must use the Superblocks framework for all projects\n3. ALWAYS put all the generated code in the page/index.tsx file. ONLY create files for custom components. Do not use backticks like `\n4. ALWAYS destructure all needed Page1 entities at the top of the component function\n5. NEVER define helper functions inside or outside the component body. Instead, repeat code inline wherever it\'s needed (e.g., inside runJs() calls, sbComputed expressions, etc.). Code repetition is preferred over helper functions since helper functions are not editable in the UI.\n6. Only use sbComputed when referencing dynamic data (state variables, API responses, component values, or theme). Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme or dynamic values.\n7. NEVER use sbComputed as a child component. React cannot render the object type it returns as JSX children.\n\nThink hard about this: Always import ALL Superblocks library components and functions in the first line of Page files.\n\nExample of importing all Superblocks library components and functions:\n\n    ```tsx\n    import {\n      SbPage,\n      SbContainer,\n      SbText,\n      SbButton,\n      SbTable,\n      SbModal,\n      SbInput,\n      SbDropdown,\n      SbCheckbox,\n      SbDatePicker,\n      SbSwitch,\n      SbIcon,\n      SbImage,\n      Dim,\n      type DimModes,\n      sbComputed,\n      SbEventFlow,\n      SbVariable,\n      SbVariablePersistence,\n      SbTimer,\n      registerPage,\n      SbApi,\n      Global,\n      Theme,\n      Embed,\n      Env,\n    } from "@superblocksteam/library";\n    ```\n\nExample of NOT importing all Superblocks library components and functions. This is wrong:\n\n```tsx\nimport { SbPage } from "@superblocksteam/library";\n```\n\n</system_constraints>\n\n<code_formatting_info>\nUse 2 spaces for code indentation\n</code_formatting_info>\n\n<ui_styling_info>\n\n# Superblocks UI Styling Guide\n\nHow to make apps look good and be consistent:\n\n- All styling should be done using the Superblocks styling system. Components are styled by default using the appTheme.ts file to define the theme. You can modify this file.\n- If you need to style a component further, use the component\'s defined dedicated styling props (i.e. border, backgroundColor, etc) and reference theme variables where available. Access the theme by importing it: `import { Theme } from \'@superblocksteam/library\';`. Example: Theme.colors.primary500 resolves to the HEX value\n- Always look to use the theme values before reaching for something custom such as a color, font size, etc\n- Do not try to directly style the component with CSS using the style property\n- Do not use CSS at all to style components\n\n## Guidelines to easily making apps look good with less code\n\nThink hard about the following guidelines so you can create good looking apps:\n\n- ALWAYS use "vertical" or "horizontal" layouts for container components. Never anything else. Example: `<SbContainer layout="vertical">...` or `<SbContainer layout="horizontal">...`\n- When using a "vertical" or "horizontal" layout, always use the "spacing" prop to set the spacing between items unless you explicitly need the child components to touch each other\n- DO NOT add a margin to any component unless it\'s very clear you need to. Instead, rely on SBContainer components with "vertical" or "horizontal" layouts, using the spacing prop to set the spacing between items, and then use the verticalAlign and horizontalAlign props on the container component to align the items as needed. This is the best way to get nice layouts! Do not break this pattern unless it\'s an edge case.\n- When using padding on components, and especially on SBContainer components, always add equal padding to all sides unless you have a very good reason to do otherwise.\n- If using an SBTable component and the data has a small set of categorical values for one of the columns (like "status" or "type"), use the "tags" columnType property for that column\n- Some common components like SbTable have heading text built in. Rather than using a SbText component above these components, use the property on the component to get the heading text. Example: For SbTable, use the "tableHeader" property. If you absolutely must use an SbText component for a heading above these components that have built in heading text, make sure to clear the heading text by setting it to an empty string. But this should be rare.\n- Never try to javascript map over an array and return SBContainer components in an attempt to create a chart or graph. They are not designed for this.\n- When using input components for things like a search bar, use good placeholder text and usually remove the label by setting it to an empty string.\n- Prefer setting a theme border radius of 8px but always use the Dim type: `Dim.px(8)`\n- Always set the app theme\'s palette.light.appBackgroundColor to "#FFFFFF"\n- Always set the root SbContainer\'s height to Dim.fill(). Example: `<SbContainer height={Dim.fill()}>...`\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- Prefer "none" containerStyle for SbContainer components when just using them for layout purposes. Example: `<SbContainer containerStyle="none">...`. If you need to have nice padding and borders because you\'re using it as a "Card" or "Box" type container, then use the "card" containerStyle.\n\n### Company specific styling guidelines\n\n- If the company "Airwallex" is mentioned in the user\'s query, use #602FFF as the background color for application heading sections. Given this color is darker, make sure the text on top of it it white\n- If the company "Airwallex" is mentioned in the user\'s query, use the Airwallex logo from https://i.imgur.com/vWgvG58.png for the application\n  </ui_styling_info>\n\n<interaction_design_info>\n\n# Interaction Design Guidelines\n\nThink hard about these guidelines to help you create apps with great user experiences, especially when working with interactive components like form controls, modals, etc.\n\n- When using dropdowns to filter data, unless the user asks for something different ALWAYS include an "All" option as the first option in the dropdown that would show all data for that field. Unless asked or there is good reason not to, this should be the default option for the dropdown\n  </interaction_design_info>\n\n<mock_data_info>\nIf you\'re going to use mock data to fulfill a user\'s request, think hard about following these rules:\n\n1. For mock data, ALWAYS create a simple Superblocks API with one JavaScript step that returns the mock data instead of hardcoding it into variables, using Superblocks variables, or importing it from files. Only use alternative storage methods if the user explicitly requests it\n\nExample of using mock data:\n\nBelow is the Superblocks API you\'d create to return the mock data:\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n  new JavaScript("returnMockOrders", {\n    fn: () => {\n      return [\n        {\n          id: "ORD-001",\n          customerName: "John Smith",\n          orderDate: "2024-01-15",\n          total: 149.99,\n          status: "Shipped",\n        },\n        {\n          id: "ORD-002",\n          customerName: "Sarah Jones",\n          orderDate: "2024-01-14",\n          total: 89.5,\n          status: "Processing",\n        },\n        {\n          id: "ORD-003",\n          customerName: "Mike Wilson",\n          orderDate: "2024-01-13",\n          total: 299.99,\n          status: "Delivered",\n        },\n      ];\n    },\n  }),\n]);\n```\n\nAnd this is the scope file and page registration:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrders: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbTable,\n  sbComputed,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst MyPage = () => {\n  const { getOrders } = Page1;\n\n  return (\n    <SbPage>\n      <SbTable tableData={sbComputed(() => getOrders.response)} />\n    </SbPage>\n  );\n};\n\nexport default registerPage(MyPage, Page1Scope);\n```\n\n2. When using placeholder images, always use the following url format: https://placehold.co/{widthInteger}x{heightInteger}?text={urlEscapedText}\n\nExample: `https://placehold.co/600x400?text=Placeholder`\n\nUse more specific text if it\'s helpful, like "Chart placeholder".\n\n</mock_data_info>\n\n<message_formatting_info>\nYou can make the output pretty by using only the following available HTML elements: mdVar{{ALLOWED_HTML_ELEMENTS}}\n</message_formatting_info>\n\n<chain_of_thought_instructions>\nBefore providing a solution, BRIEFLY outline your implementation steps. This helps ensure systematic thinking and clear communication. Your planning should:\n\n- List concrete steps you\'ll take\n\n- Check if all the components you need are available in the <superblocks_components> section:\n\n  1. Prioritize the use of: SbButton, SbInput, SbCheckbox, SbContainer, SbDatePicker, SbDropdown, SbIcon, SbImage, SbModal, SbSection, SbSwitch, SbTable, SbText\n  2. IF AND ONLY IF a component cannot be created by combining these, ONLY THEN, AS A LAST RESORT use custom components.\n     YOU WILL BE TERMINATED IMMEDIATELY if you create unnecessary custom components.\n\n- List Superblocks components and custom components you will be using\n- Note potential challenges\n- Be concise (2-4 lines maximum)\n\nExample responses:\n\nUser: "Create a todo list app with local storage"\nAssistant: "Sure. I\'ll start by:\n\n1. Create TodoList and TodoItem using the components available in the Superblocks library like SbTable and SbContainer\n2. Implement localStorage for persistence\n3. Add CRUD operations\n\nLet\'s start now.\n\n[Rest of response...]"\n\nUser: "Help debug why my API calls aren\'t working"\nAssistant: "Great. My first steps will be:\n\n1. Check network requests\n2. Verify API endpoint format\n3. Examine error handling\n\n[Rest of response...]"\n\nUser: "Generate an app with a header, table and filters. The filters should have a numeric slider and a dropdown."\nAssistant: "Sure:\n\n1. I will make a header component out of <SbContainer>, stacks, <SbText />.\n2. For the table, I will use SbTable. For filters, I will use SbDropdown.\n3. Since there is no slider component, I will create a custom component\n4. Implement filters\n\n[Rest of response...]"\n\n</chain_of_thought_instructions>\n\n<artifact_info>\nClark creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components.\n\n<artifact_instructions> 1. CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:\n\n      - Consider ALL relevant files in the project\n      - Review ALL previous file changes and user modifications\n      - Analyze the entire project context and dependencies\n      - Anticipate potential impacts on other parts of the system\n\n      This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions.\n\n    2. IMPORTANT: When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file. This ensures that all changes are applied to the most up-to-date version of the file.\n\n    3. Wrap the content in opening and closing `<boltArtifact>` tags. These tags contain more specific `<boltAction>` elements.\n\n    4. Add a title for the artifact to the `title` attribute of the opening `<boltArtifact>`.\n\n    5. Add a unique identifier to the `id` attribute of the of the opening `<boltArtifact>`. For updates, reuse the prior identifier. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact\'s lifecycle, even when updating or iterating on the artifact.\n\n    6. Use `<boltAction>` tags to define specific actions to perform.\n\n    7. For each `<boltAction>`, add a type to the `type` attribute of the opening `<boltAction>` tag to specify the type of the action. Assign one of the following values to the `type` attribute:\n\n      - file: For writing new files or updating existing files. For each file add a `filePath` attribute to the opening `<boltAction>` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.\n\n    8. To cause npm dependencies to be installed, return an edited version of the package.json artifact you were provided. Always add the corresponding TypeScript definitions if you know them. If no package.json artifact was provided, you cannot add or remove dependencies.\n\n    9. ONLY remove package.json dependencies when at least one of the cases below is true:\n\n      - The prompt explicitly asks for the dependency to be removed.\n      - The provided diff shows that you had previously added the dependency and you want to revert or replace that dependency.\n\n    10. CRITICAL: Always provide the FULL, updated content of the artifact. This means:\n\n      - Include ALL code, even if parts are unchanged\n      - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->"\n      - ALWAYS show the complete, up-to-date file contents when updating files\n      - Avoid any form of truncation or summarization\n\n    11. IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.\n\n      - Ensure code is clean, readable, and maintainable.\n      - Adhere to proper naming conventions and consistent formatting.\n      - Split functionality into smaller, reusable modules instead of placing everything in a single large file.\n      - Keep files as small as possible by extracting related functionalities into separate modules.\n      - Use imports to connect these modules together effectively.\n\n</artifact_instructions>\n\n<superblocks_framework>\nmdVar{{SUPERBLOCKS_PARTS}}\n\n    - A project consists of one or more pages. Each page is a directory in the `pages` directory.\n    - Pages are registered in the `routes.json` file.\n\n</superblocks_framework>\n</artifact_info>\n\nNEVER use the word "artifact". For example:\n\n- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."\n- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."\n\nIMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!\n\nULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.\n\nULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.\n\nHere are some examples of correct usage of artifacts:\n\n<examples>\n  <example>\n    <user_query>create an app with a button that opens a modal</user_query>\n    <assistant_response>\n      Certainly! I\'ll create an app with a button that opens a modal.\n\n      <boltArtifact id="modal-app" title="Modal App">\n        <boltAction type="file" filePath="package.json">{\n\n"name": "modal-app",\n"private": true,\n"sideEffects": false,\n"type": "module",\n"dependencies": {\n"@superblocksteam/library": "npm:@superblocksteam/library-ephemeral@mdVar{{LIBRARY_VERSION}}",\n\n},\n"devDependencies": {\n"@superblocksteam/cli": "npm:@superblocksteam/cli-ephemeral@mdVar{{CLI_VERSION}}",\n"@types/react": "^18.2.20",\n"@types/react-dom": "^18.2.7",\n"typescript": "^5.1.6"\n},\n}</boltAction>\n<boltAction type="file" filePath="pages/App.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/app.css">...</boltAction>\n<boltAction type="file" filePath="pages/appTheme.ts">...</boltAction>\n<boltAction type="file" filePath="pages/root.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/Page1/index.tsx">...</boltAction>\n<boltAction type="file" filePath="routes.json">...</boltAction>\n</boltArtifact>\n\n      You can now view the modal app in the preview. The button will open the modal when clicked.\n    </assistant_response>\n\n  </example>\n</examples>\n';
+var content10 = 'You are Clark, an expert AI assistant and exceptional senior software developer with vast knowledge of the Superblocks framework.\nWhen talking always sign off with "Clark out"\n\n<system_constraints>\nTHINK HARD about the following very important system constraints:\n\n1. Git is NOT available\n2. You must use the Superblocks framework for all projects\n3. ALWAYS put all the generated code in the page/index.tsx file. ONLY create files for custom components. Do not use backticks like `\n4. ALWAYS destructure all needed Page1 entities at the top of the component function\n5. NEVER define helper functions inside or outside the component body. Instead, repeat code inline wherever it\'s needed (e.g., inside runJs() calls, sbComputed expressions, etc.). Code repetition is preferred over helper functions since helper functions are not editable in the UI.\n6. Only use sbComputed when referencing dynamic data (state variables, API responses, component values, or theme). Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme or dynamic values.\n7. NEVER use sbComputed as a child component. React cannot render the object type it returns as JSX children.\n\nThink hard about this: Always import ALL Superblocks library components and functions in the first line of Page files.\n\nExample of importing all Superblocks library components and functions:\n\n    ```tsx\n    import {\n      SbPage,\n      SbContainer,\n      SbText,\n      SbButton,\n      SbTable,\n      SbModal,\n      SbInput,\n      SbDropdown,\n      SbCheckbox,\n      SbDatePicker,\n      SbSwitch,\n      SbIcon,\n      SbImage,\n      Dim,\n      type DimModes,\n      sbComputed,\n      SbEventFlow,\n      SbVariable,\n      SbVariablePersistence,\n      SbTimer,\n      registerPage,\n      SbApi,\n      Global,\n      Theme,\n      Embed,\n      Env,\n    } from "@superblocksteam/library";\n    ```\n\nExample of NOT importing all Superblocks library components and functions. This is wrong:\n\n```tsx\nimport { SbPage } from "@superblocksteam/library";\n```\n\n</system_constraints>\n\n<code_formatting_info>\nUse 2 spaces for code indentation\n</code_formatting_info>\n\n<ui_styling_info>\n\n# Superblocks UI Styling Guide\n\nHow to make apps look good and be consistent:\n\n- All styling should be done using the Superblocks styling system. Components are styled by default using the appTheme.ts file to define the theme. You can modify this file.\n- If you need to style a component further, use the component\'s defined dedicated styling props (i.e. border, backgroundColor, etc) and reference theme variables where available. Access the theme by importing it: `import { Theme } from \'@superblocksteam/library\';`. Example: Theme.colors.primary500 resolves to the HEX value\n- Always look to use the theme values before reaching for something custom such as a color, font size, etc\n- Do not try to directly style the component with CSS using the style property\n- Do not use CSS at all to style components\n\n## Guidelines to easily making apps look good with less code\n\nThink hard about the following guidelines so you can create good looking apps:\n\n- ALWAYS use "vertical" or "horizontal" layouts for container components. Never anything else. Example: `<SbContainer layout="vertical">...` or `<SbContainer layout="horizontal">...`\n- When using a "vertical" or "horizontal" layout, always use the "spacing" prop to set the spacing between items unless you explicitly need the child components to touch each other\n- DO NOT add a margin to any component unless it\'s very clear you need to. Instead, rely on SBContainer components with "vertical" or "horizontal" layouts, using the spacing prop to set the spacing between items, and then use the verticalAlign and horizontalAlign props on the container component to align the items as needed. This is the best way to get nice layouts! Do not break this pattern unless it\'s an edge case.\n- When using padding on components, and especially on SBContainer components, always add equal padding to all sides unless you have a very good reason to do otherwise.\n- If using an SBTable component and the data has a small set of categorical values for one of the columns (like "status" or "type"), use the "tags" columnType property for that column\n- Some common components like SbTable have heading text built in. Rather than using a SbText component above these components, use the property on the component to get the heading text. Example: For SbTable, use the "tableHeader" property. If you absolutely must use an SbText component for a heading above these components that have built in heading text, make sure to clear the heading text by setting it to an empty string. But this should be rare.\n- Never try to javascript map over an array and return SBContainer components in an attempt to create a chart or graph. They are not designed for this.\n- When using input components for things like a search bar, use good placeholder text and usually remove the label by setting it to an empty string.\n- Prefer setting a theme border radius of 8px but always use the Dim type: `Dim.px(8)`\n- Always set the app theme\'s palette.light.appBackgroundColor to "#FFFFFF"\n- Always set the root SbContainer\'s height to Dim.fill(). Example: `<SbContainer height={Dim.fill()}>...`\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- Prefer "none" containerStyle for SbContainer components when just using them for layout purposes. Example: `<SbContainer containerStyle="none">...`. If you need to have nice padding and borders because you\'re using it as a "Card" or "Box" type container, then use the "card" containerStyle.\n\n  </ui_styling_info>\n\n<interaction_design_info>\n\n# Interaction Design Guidelines\n\nThink hard about these guidelines to help you create apps with great user experiences, especially when working with interactive components like form controls, modals, etc.\n\n- When using dropdowns to filter data, unless the user asks for something different ALWAYS include an "All" option as the first option in the dropdown that would show all data for that field. Unless asked or there is good reason not to, this should be the default option for the dropdown\n  </interaction_design_info>\n\n<mock_data_info>\nIf you\'re going to use mock data to fulfill a user\'s request, think hard about following these rules:\n\n1. For mock data, ALWAYS create a simple Superblocks API with one JavaScript step that returns the mock data instead of hardcoding it into variables, using Superblocks variables, or importing it from files. Only use alternative storage methods if the user explicitly requests it\n\nExample of using mock data:\n\nBelow is the Superblocks API you\'d create to return the mock data:\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n  new JavaScript("returnMockOrders", {\n    fn: () => {\n      return [\n        {\n          id: "ORD-001",\n          customerName: "John Smith",\n          orderDate: "2024-01-15",\n          total: 149.99,\n          status: "Shipped",\n        },\n        {\n          id: "ORD-002",\n          customerName: "Sarah Jones",\n          orderDate: "2024-01-14",\n          total: 89.5,\n          status: "Processing",\n        },\n        {\n          id: "ORD-003",\n          customerName: "Mike Wilson",\n          orderDate: "2024-01-13",\n          total: 299.99,\n          status: "Delivered",\n        },\n      ];\n    },\n  }),\n]);\n```\n\nAnd this is the scope file and page registration:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrders: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbTable,\n  sbComputed,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst MyPage = () => {\n  const { getOrders } = Page1;\n\n  return (\n    <SbPage>\n      <SbTable tableData={sbComputed(() => getOrders.response)} />\n    </SbPage>\n  );\n};\n\nexport default registerPage(MyPage, Page1Scope);\n```\n\n2. When using placeholder images, always use the following url format: https://placehold.co/{widthInteger}x{heightInteger}?text={urlEscapedText}\n\nExample: `https://placehold.co/600x400?text=Placeholder`\n\nUse more specific text if it\'s helpful, like "Chart placeholder".\n\n</mock_data_info>\n\n<message_formatting_info>\nYou can make the output pretty by using only the following available HTML elements: mdVar{{ALLOWED_HTML_ELEMENTS}}\n</message_formatting_info>\n\n<chain_of_thought_instructions>\nBefore providing a solution, BRIEFLY outline your implementation steps. This helps ensure systematic thinking and clear communication. Your planning should:\n\n- List concrete steps you\'ll take\n\n- Check if all the components you need are available in the <superblocks_components> section:\n\n  1. Prioritize the use of: SbButton, SbInput, SbCheckbox, SbContainer, SbDatePicker, SbDropdown, SbIcon, SbImage, SbModal, SbSection, SbSwitch, SbTable, SbText\n  2. IF AND ONLY IF a component cannot be created by combining these, ONLY THEN, AS A LAST RESORT use custom components.\n     YOU WILL BE TERMINATED IMMEDIATELY if you create unnecessary custom components.\n\n- List Superblocks components and custom components you will be using\n- Note potential challenges\n- Be concise (2-4 lines maximum)\n\nExample responses:\n\nUser: "Create a todo list app with local storage"\nAssistant: "Sure. I\'ll start by:\n\n1. Create TodoList and TodoItem using the components available in the Superblocks library like SbTable and SbContainer\n2. Implement localStorage for persistence\n3. Add CRUD operations\n\nLet\'s start now.\n\n[Rest of response...]"\n\nUser: "Help debug why my API calls aren\'t working"\nAssistant: "Great. My first steps will be:\n\n1. Check network requests\n2. Verify API endpoint format\n3. Examine error handling\n\n[Rest of response...]"\n\nUser: "Generate an app with a header, table and filters. The filters should have a numeric slider and a dropdown."\nAssistant: "Sure:\n\n1. I will make a header component out of <SbContainer>, stacks, <SbText />.\n2. For the table, I will use SbTable. For filters, I will use SbDropdown.\n3. Since there is no slider component, I will create a custom component\n4. Implement filters\n\n[Rest of response...]"\n\n</chain_of_thought_instructions>\n\n<artifact_info>\nClark creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components.\n\n<artifact_instructions> 1. CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:\n\n      - Consider ALL relevant files in the project\n      - Review ALL previous file changes and user modifications\n      - Analyze the entire project context and dependencies\n      - Anticipate potential impacts on other parts of the system\n\n      This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions.\n\n    2. IMPORTANT: When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file. This ensures that all changes are applied to the most up-to-date version of the file.\n\n    3. Wrap the content in opening and closing `<boltArtifact>` tags. These tags contain more specific `<boltAction>` elements.\n\n    4. Add a title for the artifact to the `title` attribute of the opening `<boltArtifact>`.\n\n    5. Add a unique identifier to the `id` attribute of the of the opening `<boltArtifact>`. For updates, reuse the prior identifier. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact\'s lifecycle, even when updating or iterating on the artifact.\n\n    6. Use `<boltAction>` tags to define specific actions to perform.\n\n    7. For each `<boltAction>`, add a type to the `type` attribute of the opening `<boltAction>` tag to specify the type of the action. Assign one of the following values to the `type` attribute:\n\n      - file: For writing new files or updating existing files. For each file add a `filePath` attribute to the opening `<boltAction>` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.\n\n    8. To cause npm dependencies to be installed, return an edited version of the package.json artifact you were provided. Always add the corresponding TypeScript definitions if you know them. If no package.json artifact was provided, you cannot add or remove dependencies.\n\n    9. ONLY remove package.json dependencies when at least one of the cases below is true:\n\n      - The prompt explicitly asks for the dependency to be removed.\n      - The provided diff shows that you had previously added the dependency and you want to revert or replace that dependency.\n\n    10. CRITICAL: Always provide the FULL, updated content of the artifact. This means:\n\n      - Include ALL code, even if parts are unchanged\n      - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->"\n      - ALWAYS show the complete, up-to-date file contents when updating files\n      - Avoid any form of truncation or summarization\n\n    11. IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.\n\n      - Ensure code is clean, readable, and maintainable.\n      - Adhere to proper naming conventions and consistent formatting.\n      - Split functionality into smaller, reusable modules instead of placing everything in a single large file.\n      - Keep files as small as possible by extracting related functionalities into separate modules.\n      - Use imports to connect these modules together effectively.\n\n</artifact_instructions>\n\n<superblocks_framework>\nmdVar{{SUPERBLOCKS_PARTS}}\n\n    - A project consists of one or more pages. Each page is a directory in the `pages` directory.\n    - Pages are registered in the `routes.json` file.\n\n</superblocks_framework>\n</artifact_info>\n\nNEVER use the word "artifact". For example:\n\n- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."\n- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."\n\nIMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!\n\nULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.\n\nULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.\n\nHere are some examples of correct usage of artifacts:\n\n<examples>\n  <example>\n    <user_query>create an app with a button that opens a modal</user_query>\n    <assistant_response>\n      Certainly! I\'ll create an app with a button that opens a modal.\n\n      <boltArtifact id="modal-app" title="Modal App">\n        <boltAction type="file" filePath="package.json">{\n\n"name": "modal-app",\n"private": true,\n"sideEffects": false,\n"type": "module",\n"dependencies": {\n"@superblocksteam/library": "npm:@superblocksteam/library-ephemeral@mdVar{{LIBRARY_VERSION}}",\n\n},\n"devDependencies": {\n"@superblocksteam/cli": "npm:@superblocksteam/cli-ephemeral@mdVar{{CLI_VERSION}}",\n"@types/react": "^18.2.20",\n"@types/react-dom": "^18.2.7",\n"typescript": "^5.1.6"\n},\n}</boltAction>\n<boltAction type="file" filePath="pages/App.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/app.css">...</boltAction>\n<boltAction type="file" filePath="pages/appTheme.ts">...</boltAction>\n<boltAction type="file" filePath="pages/root.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/Page1/index.tsx">...</boltAction>\n<boltAction type="file" filePath="routes.json">...</boltAction>\n</boltArtifact>\n\n      You can now view the modal app in the preview. The button will open the modal when clicked.\n    </assistant_response>\n\n  </example>\n</examples>\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/index.js
 var library_components_exports = {};

package/dist/index.js

@@ -12508,10 +12508,10 @@ var require_axios = __commonJS({
       }
       return null;
     }
-    function stringifySafely2(rawValue, parser5, encoder) {
+    function stringifySafely2(rawValue, parser10, encoder) {
       if (utils$1.isString(rawValue)) {
         try {
-          (parser5 || JSON.parse)(rawValue);
+          (parser10 || JSON.parse)(rawValue);
           return utils$1.trim(rawValue);
         } catch (e) {
           if (e.name !== "SyntaxError") {
@@ -12639,7 +12639,7 @@ var require_axios = __commonJS({
       let key2;
       let val;
       let i2;
-      rawHeaders && rawHeaders.split("\n").forEach(function parser5(line3) {
+      rawHeaders && rawHeaders.split("\n").forEach(function parser10(line3) {
         i2 = line3.indexOf(":");
         key2 = line3.substring(0, i2).trim().toLowerCase();
         val = line3.substring(i2 + 1).trim();
@@ -12739,23 +12739,23 @@ var require_axios = __commonJS({
         }
         return this;
       }
-      get(header, parser5) {
+      get(header, parser10) {
         header = normalizeHeader2(header);
         if (header) {
           const key2 = utils$1.findKey(this, header);
           if (key2) {
             const value2 = this[key2];
-            if (!parser5) {
+            if (!parser10) {
               return value2;
             }
-            if (parser5 === true) {
+            if (parser10 === true) {
               return parseTokens2(value2);
             }
-            if (utils$1.isFunction(parser5)) {
-              return parser5.call(this, value2, key2);
+            if (utils$1.isFunction(parser10)) {
+              return parser10.call(this, value2, key2);
             }
-            if (utils$1.isRegExp(parser5)) {
-              return parser5.exec(value2);
+            if (utils$1.isRegExp(parser10)) {
+              return parser10.exec(value2);
             }
             throw new TypeError("parser must be boolean|regexp|function");
           }
@@ -55817,8 +55817,8 @@ var require_evaluation = __commonJS({
       };
     };
     exports2.extractEntity = extractEntity2;
-    var extractPythonEvaluationPairsWithParser2 = (code, entities, dataTree, parser5, namespacedEntitiesToExtract = {}) => {
-      const tree = parser5.parse(code);
+    var extractPythonEvaluationPairsWithParser2 = (code, entities, dataTree, parser10, namespacedEntitiesToExtract = {}) => {
+      const tree = parser10.parse(code);
       const cursor3 = tree.cursor();
       let isCapturing = false;
       const bindingPairs = [];
@@ -123124,9 +123124,9 @@ var require_graphql2 = __commonJS({
       shimmer.wrap(execute, "execute", wrapExecute(execute));
       return execute;
     });
-    addHook({ name: "graphql", file: "language/parser.js", versions: [">=0.10"] }, (parser5) => {
-      shimmer.wrap(parser5, "parse", wrapParse);
-      return parser5;
+    addHook({ name: "graphql", file: "language/parser.js", versions: [">=0.10"] }, (parser10) => {
+      shimmer.wrap(parser10, "parse", wrapParse);
+      return parser10;
     });
     addHook({ name: "graphql", file: "validation/validate.js", versions: [">=0.10"] }, (validate2) => {
       shimmer.wrap(validate2, "validate", wrapValidate);
@@ -196901,7 +196901,7 @@ var require_urlencoded = __commonJS({
     function extendedparser(options8) {
       var parameterLimit = options8.parameterLimit !== void 0 ? options8.parameterLimit : 1e3;
       var depth = typeof options8.depth !== "number" ? Number(options8.depth || 32) : options8.depth;
-      var parse12 = parser5("qs");
+      var parse12 = parser10("qs");
       if (isNaN(parameterLimit) || parameterLimit < 1) {
         throw new TypeError("option parameterLimit must be a positive number");
       }
@@ -196959,7 +196959,7 @@ var require_urlencoded = __commonJS({
       }
       return count;
     }
-    function parser5(name17) {
+    function parser10(name17) {
       var mod2 = parsers13[name17];
       if (mod2 !== void 0) {
         return mod2.parse;
@@ -196977,7 +196977,7 @@ var require_urlencoded = __commonJS({
     }
     function simpleparser(options8) {
       var parameterLimit = options8.parameterLimit !== void 0 ? options8.parameterLimit : 1e3;
-      var parse12 = parser5("querystring");
+      var parse12 = parser10("querystring");
       if (isNaN(parameterLimit) || parameterLimit < 1) {
         throw new TypeError("option parameterLimit must be a positive number");
       }
@@ -197060,25 +197060,25 @@ var require_body_parser2 = __commonJS({
         };
       }
       function loadParser(parserName) {
-        var parser5 = parsers13[parserName];
-        if (parser5 !== void 0) {
-          return parser5;
+        var parser10 = parsers13[parserName];
+        if (parser10 !== void 0) {
+          return parser10;
         }
         switch (parserName) {
           case "json":
-            parser5 = require_json3();
+            parser10 = require_json3();
             break;
           case "raw":
-            parser5 = require_raw();
+            parser10 = require_raw();
             break;
           case "text":
-            parser5 = require_text2();
+            parser10 = require_text2();
             break;
           case "urlencoded":
-            parser5 = require_urlencoded();
+            parser10 = require_urlencoded();
             break;
         }
-        return parsers13[parserName] = parser5;
+        return parsers13[parserName] = parser10;
       }
     })(...arguments);
     {
@@ -201589,8 +201589,8 @@ var require_evaluation2 = __commonJS({
       };
     };
     exports2.extractEntity = extractEntity2;
-    var extractPythonEvaluationPairsWithParser2 = (code, entities, dataTree, parser5, namespacedEntitiesToExtract = {}) => {
-      const tree = parser5.parse(code);
+    var extractPythonEvaluationPairsWithParser2 = (code, entities, dataTree, parser10, namespacedEntitiesToExtract = {}) => {
+      const tree = parser10.parse(code);
       const cursor3 = tree.cursor();
       let isCapturing = false;
       const bindingPairs = [];
@@ -225759,22 +225759,22 @@ var require_esprima = __commonJS({
               if (options8 && typeof options8.sourceType === "string") {
                 isModule = options8.sourceType === "module";
               }
-              var parser5;
+              var parser10;
               if (options8 && typeof options8.jsx === "boolean" && options8.jsx) {
-                parser5 = new jsx_parser_1.JSXParser(code, options8, parserDelegate);
+                parser10 = new jsx_parser_1.JSXParser(code, options8, parserDelegate);
               } else {
-                parser5 = new parser_1.Parser(code, options8, parserDelegate);
+                parser10 = new parser_1.Parser(code, options8, parserDelegate);
               }
-              var program = isModule ? parser5.parseModule() : parser5.parseScript();
+              var program = isModule ? parser10.parseModule() : parser10.parseScript();
               var ast = program;
               if (collectComment && commentHandler) {
                 ast.comments = commentHandler.comments;
               }
-              if (parser5.config.tokens) {
-                ast.tokens = parser5.tokens;
+              if (parser10.config.tokens) {
+                ast.tokens = parser10.tokens;
               }
-              if (parser5.config.tolerant) {
-                ast.errors = parser5.errorHandler.errors;
+              if (parser10.config.tolerant) {
+                ast.errors = parser10.errorHandler.errors;
               }
               return ast;
             }
@@ -233383,12 +233383,12 @@ var require_lib8 = __commonJS({
       }
     };
     var ScopeHandler = class {
-      constructor(parser5, inModule) {
+      constructor(parser10, inModule) {
         this.parser = void 0;
         this.scopeStack = [];
         this.inModule = void 0;
         this.undefinedExports = /* @__PURE__ */ new Map();
-        this.parser = parser5;
+        this.parser = parser10;
         this.inModule = inModule;
       }
       get inTopLevel() {
@@ -235312,11 +235312,11 @@ var require_lib8 = __commonJS({
       }
     };
     var ClassScopeHandler = class {
-      constructor(parser5) {
+      constructor(parser10) {
         this.parser = void 0;
         this.stack = [];
         this.undefinedPrivateNames = /* @__PURE__ */ new Map();
-        this.parser = parser5;
+        this.parser = parser10;
       }
       current() {
         return this.stack[this.stack.length - 1];
@@ -235409,10 +235409,10 @@ var require_lib8 = __commonJS({
       }
     };
     var ExpressionScopeHandler = class {
-      constructor(parser5) {
+      constructor(parser10) {
         this.parser = void 0;
         this.stack = [new ExpressionScope()];
-        this.parser = parser5;
+        this.parser = parser10;
       }
       enter(scope) {
         this.stack.push(scope);
@@ -235739,13 +235739,13 @@ var require_lib8 = __commonJS({
       }
     };
     var Node = class {
-      constructor(parser5, pos2, loc) {
+      constructor(parser10, pos2, loc) {
         this.type = "";
         this.start = pos2;
         this.end = 0;
         this.loc = new SourceLocation(loc);
-        if ((parser5 == null ? void 0 : parser5.optionFlags) & 64) this.range = [pos2, 0];
-        if (parser5 != null && parser5.filename) this.loc.filename = parser5.filename;
+        if ((parser10 == null ? void 0 : parser10.optionFlags) & 64) this.range = [pos2, 0];
+        if (parser10 != null && parser10.filename) this.loc.filename = parser10.filename;
       }
     };
     var NodePrototype = Node.prototype;
@@ -246030,12 +246030,12 @@ var require_lib8 = __commonJS({
         options8 = Object.assign({}, options8);
         try {
           options8.sourceType = "module";
-          const parser5 = getParser2(options8, input);
-          const ast = parser5.parse();
-          if (parser5.sawUnambiguousESM) {
+          const parser10 = getParser2(options8, input);
+          const ast = parser10.parse();
+          if (parser10.sawUnambiguousESM) {
             return ast;
           }
-          if (parser5.ambiguousScriptDifferentAst) {
+          if (parser10.ambiguousScriptDifferentAst) {
             try {
               options8.sourceType = "script";
               return getParser2(options8, input).parse();
@@ -246058,11 +246058,11 @@ var require_lib8 = __commonJS({
       }
     }
     function parseExpression2(input, options8) {
-      const parser5 = getParser2(options8, input);
-      if (parser5.options.strictMode) {
-        parser5.state.strict = true;
+      const parser10 = getParser2(options8, input);
+      if (parser10.options.strictMode) {
+        parser10.state.strict = true;
       }
-      return parser5.getExpression();
+      return parser10.getExpression();
     }
     function generateExportedTokenTypes(internalTokenTypes) {
       const tokenTypes2 = {};
@@ -273653,7 +273653,7 @@ var require_options = __commonJS({
         placeholderPattern,
         preserveComments,
         syntacticPlaceholders
-      } = _ref, parser5 = _objectWithoutPropertiesLoose(_ref, _excluded);
+      } = _ref, parser10 = _objectWithoutPropertiesLoose(_ref, _excluded);
       if (placeholderWhitelist != null && !(placeholderWhitelist instanceof Set)) {
         throw new Error("'.placeholderWhitelist' must be a Set, null, or undefined");
       }
@@ -273670,7 +273670,7 @@ var require_options = __commonJS({
         throw new Error("'.placeholderWhitelist' and '.placeholderPattern' aren't compatible with '.syntacticPlaceholders: true'");
       }
       return {
-        parser: parser5,
+        parser: parser10,
         placeholderWhitelist: placeholderWhitelist || void 0,
         placeholderPattern: placeholderPattern == null ? void 0 : placeholderPattern,
         preserveComments: preserveComments == null ? void 0 : preserveComments,
@@ -289395,7 +289395,7 @@ var require_parser2 = __commonJS({
     Object.defineProperty(exports2, "__esModule", {
       value: true
     });
-    exports2.default = parser5;
+    exports2.default = parser10;
     function _parser() {
       const data = require_lib8();
       _parser = function() {
@@ -289411,7 +289411,7 @@ var require_parser2 = __commonJS({
       return data;
     }
     var _missingPluginHelper = require_missing_plugin_helper();
-    function* parser5(pluginPasses, {
+    function* parser10(pluginPasses, {
       parserOpts,
       highlightCode = true,
       filename = "unknown"
@@ -312041,8 +312041,8 @@ var require_fecha_umd = __commonJS({
         }
         var combinedI18nSettings = assign(assign({}, globalI18n), i18n);
         for (var i2 = 1; i2 < matches.length; i2++) {
-          var _a17 = parseInfo[i2 - 1], field = _a17[0], parser5 = _a17[2];
-          var value2 = parser5 ? parser5(matches[i2], combinedI18nSettings) : +matches[i2];
+          var _a17 = parseInfo[i2 - 1], field = _a17[0], parser10 = _a17[2];
+          var value2 = parser10 ? parser10(matches[i2], combinedI18nSettings) : +matches[i2];
           if (value2 == null) {
             return null;
           }
@@ -321523,10 +321523,10 @@ function formDataToJSON(formData) {
 var formDataToJSON_default = formDataToJSON;
 
 // ../../../../node_modules/.pnpm/axios@1.8.4_debug@4.4.0/node_modules/axios/lib/defaults/index.js
-function stringifySafely(rawValue, parser5, encoder) {
+function stringifySafely(rawValue, parser10, encoder) {
   if (utils_default.isString(rawValue)) {
     try {
-      (parser5 || JSON.parse)(rawValue);
+      (parser10 || JSON.parse)(rawValue);
       return utils_default.trim(rawValue);
     } catch (e) {
       if (e.name !== "SyntaxError") {
@@ -321660,7 +321660,7 @@ var parseHeaders_default = (rawHeaders) => {
   let key2;
   let val;
   let i2;
-  rawHeaders && rawHeaders.split("\n").forEach(function parser5(line3) {
+  rawHeaders && rawHeaders.split("\n").forEach(function parser10(line3) {
     i2 = line3.indexOf(":");
     key2 = line3.substring(0, i2).trim().toLowerCase();
     val = line3.substring(i2 + 1).trim();
@@ -321762,23 +321762,23 @@ var AxiosHeaders = class {
     }
     return this;
   }
-  get(header, parser5) {
+  get(header, parser10) {
     header = normalizeHeader(header);
     if (header) {
       const key2 = utils_default.findKey(this, header);
       if (key2) {
         const value2 = this[key2];
-        if (!parser5) {
+        if (!parser10) {
           return value2;
         }
-        if (parser5 === true) {
+        if (parser10 === true) {
           return parseTokens(value2);
         }
-        if (utils_default.isFunction(parser5)) {
-          return parser5.call(this, value2, key2);
+        if (utils_default.isFunction(parser10)) {
+          return parser10.call(this, value2, key2);
         }
-        if (utils_default.isRegExp(parser5)) {
-          return parser5.exec(value2);
+        if (utils_default.isRegExp(parser10)) {
+          return parser10.exec(value2);
         }
         throw new TypeError("parser must be boolean|regexp|function");
       }
@@ -331222,7 +331222,7 @@ var import_dd_trace = __toESM(require_dd_trace2(), 1);
 // ../sdk/package.json
 var package_default = {
   name: "@superblocksteam/sdk",
-  version: "2.0.3-next.151",
+  version: "2.0.3-next.153",
   type: "module",
   description: "Superblocks JS SDK",
   homepage: "https://www.superblocks.com",
@@ -331252,8 +331252,8 @@ var package_default = {
     "@rollup/wasm-node": "^4.35.0",
     "@superblocksteam/bucketeer-sdk": "0.4.1",
     "@superblocksteam/shared": "0.9115.0",
-    "@superblocksteam/util": "2.0.3-next.151",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.151",
+    "@superblocksteam/util": "2.0.3-next.153",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.153",
     "@vitejs/plugin-react": "^4.3.4",
     axios: "^1.4.0",
     chokidar: "^4.0.3",
@@ -331408,9 +331408,18 @@ var Property = {
 function isPropertyInfo(value2) {
   return typeof value2 === "object" && value2 !== null && "__info" in value2 && value2.__info === true;
 }
+function isComputedPropertyInfo(value2) {
+  return isPropertyInfo(value2) && value2.type === "COMPUTED";
+}
 
 // ../../../library-shared/dist/utils/strings.js
 init_cjs_shims();
+function containsStringInterpolation(value2) {
+  if (typeof value2 === "string") {
+    return /\${\s*[^}]+\s*}/.test(value2);
+  }
+  return false;
+}
 
 // ../../../library-shared/dist/layout.js
 init_cjs_shims();
@@ -331920,10 +331929,10 @@ NodeProp.contextHash = new NodeProp({ perNode: true });
 NodeProp.lookAhead = new NodeProp({ perNode: true });
 NodeProp.mounted = new NodeProp({ perNode: true });
 var MountedTree = class {
-  constructor(tree, overlay, parser5) {
+  constructor(tree, overlay, parser10) {
     this.tree = tree;
     this.overlay = overlay;
-    this.parser = parser5;
+    this.parser = parser10;
   }
   /**
   @internal
@@ -333458,16 +333467,16 @@ var Stack = class _Stack {
   reduce(action) {
     var _a17;
     let depth = action >> 19, type2 = action & 65535;
-    let { parser: parser5 } = this.p;
+    let { parser: parser10 } = this.p;
     let lookaheadRecord = this.reducePos < this.pos - 25;
     if (lookaheadRecord)
       this.setLookAhead(this.pos);
-    let dPrec = parser5.dynamicPrecedence(type2);
+    let dPrec = parser10.dynamicPrecedence(type2);
     if (dPrec)
       this.score += dPrec;
     if (depth == 0) {
-      this.pushState(parser5.getGoto(this.state, type2, true), this.reducePos);
-      if (type2 < parser5.minRepeatTerm)
+      this.pushState(parser10.getGoto(this.state, type2, true), this.reducePos);
+      if (type2 < parser10.minRepeatTerm)
         this.storeNode(type2, this.reducePos, this.reducePos, lookaheadRecord ? 8 : 4, true);
       this.reduceContext(type2, this.reducePos);
       return;
@@ -333485,8 +333494,8 @@ var Stack = class _Stack {
       }
     }
     let bufferBase = base ? this.stack[base - 1] : 0, count = this.bufferBase + this.buffer.length - bufferBase;
-    if (type2 < parser5.minRepeatTerm || action & 131072) {
-      let pos2 = parser5.stateFlag(
+    if (type2 < parser10.minRepeatTerm || action & 131072) {
+      let pos2 = parser10.stateFlag(
         this.state,
         1
         /* StateFlag.Skipped */
@@ -333497,7 +333506,7 @@ var Stack = class _Stack {
       this.state = this.stack[base];
     } else {
       let baseStateID = this.stack[base - 3];
-      this.state = parser5.getGoto(baseStateID, type2, true);
+      this.state = parser10.getGoto(baseStateID, type2, true);
     }
     while (this.stack.length > base)
       this.stack.pop();
@@ -333560,10 +333569,10 @@ var Stack = class _Stack {
     if (action & 131072) {
       this.pushState(action & 65535, this.pos);
     } else if ((action & 262144) == 0) {
-      let nextState = action, { parser: parser5 } = this.p;
-      if (end > this.pos || type2 <= parser5.maxNode) {
+      let nextState = action, { parser: parser10 } = this.p;
+      if (end > this.pos || type2 <= parser10.maxNode) {
         this.pos = end;
-        if (!parser5.stateFlag(
+        if (!parser10.stateFlag(
           nextState,
           1
           /* StateFlag.Skipped */
@@ -333572,7 +333581,7 @@ var Stack = class _Stack {
       }
       this.pushState(nextState, start);
       this.shiftContext(type2, start);
-      if (type2 <= parser5.maxNode)
+      if (type2 <= parser10.maxNode)
         this.buffer.push(type2, start, end, 4);
     } else {
       this.pos = end;
@@ -333706,18 +333715,18 @@ var Stack = class _Stack {
   @internal
   */
   forceReduce() {
-    let { parser: parser5 } = this.p;
-    let reduce = parser5.stateSlot(
+    let { parser: parser10 } = this.p;
+    let reduce = parser10.stateSlot(
       this.state,
       5
       /* ParseState.ForcedReduce */
     );
     if ((reduce & 65536) == 0)
       return false;
-    if (!parser5.validAction(this.state, reduce)) {
+    if (!parser10.validAction(this.state, reduce)) {
       let depth = reduce >> 19, term = reduce & 65535;
       let target = this.stack.length - depth * 3;
-      if (target < 0 || parser5.getGoto(this.stack[target], term, false) < 0) {
+      if (target < 0 || parser10.getGoto(this.stack[target], term, false) < 0) {
         let backup = this.findForcedReduction();
         if (backup == null)
           return false;
@@ -333736,18 +333745,18 @@ var Stack = class _Stack {
   isn't a valid action. @internal
   */
   findForcedReduction() {
-    let { parser: parser5 } = this.p, seen = [];
+    let { parser: parser10 } = this.p, seen = [];
     let explore = (state, depth) => {
       if (seen.includes(state))
         return;
       seen.push(state);
-      return parser5.allActions(state, (action) => {
+      return parser10.allActions(state, (action) => {
         if (action & (262144 | 131072)) ;
         else if (action & 65536) {
           let rDepth = (action >> 19) - depth;
           if (rDepth > 1) {
             let term = action & 65535, target = this.stack.length - rDepth * 3;
-            if (target >= 0 && parser5.getGoto(this.stack[target], term, false) >= 0)
+            if (target >= 0 && parser10.getGoto(this.stack[target], term, false) >= 0)
               return rDepth << 19 | 65536 | term;
           }
         } else {
@@ -333783,12 +333792,12 @@ var Stack = class _Stack {
   get deadEnd() {
     if (this.stack.length != 3)
       return false;
-    let { parser: parser5 } = this.p;
-    return parser5.data[parser5.stateSlot(
+    let { parser: parser10 } = this.p;
+    return parser10.data[parser10.stateSlot(
       this.state,
       1
       /* ParseState.Actions */
-    )] == 65535 && !parser5.stateSlot(
+    )] == 65535 && !parser10.stateSlot(
       this.state,
       4
       /* ParseState.DefaultReduce */
@@ -334210,8 +334219,8 @@ var TokenGroup = class {
     this.id = id2;
   }
   token(input, stack2) {
-    let { parser: parser5 } = stack2.p;
-    readToken(this.data, input, stack2, this.id, parser5.data, parser5.tokenPrecTable);
+    let { parser: parser10 } = stack2.p;
+    readToken(this.data, input, stack2, this.id, parser10.data, parser10.tokenPrecTable);
   }
 };
 TokenGroup.prototype.contextual = TokenGroup.prototype.fallback = TokenGroup.prototype.extend = false;
@@ -334412,18 +334421,18 @@ var FragmentCursor = class {
   }
 };
 var TokenCache = class {
-  constructor(parser5, stream5) {
+  constructor(parser10, stream5) {
     this.stream = stream5;
     this.tokens = [];
     this.mainToken = null;
     this.actions = [];
-    this.tokens = parser5.tokenizers.map((_) => new CachedToken());
+    this.tokens = parser10.tokenizers.map((_) => new CachedToken());
   }
   getActions(stack2) {
     let actionIndex = 0;
     let main = null;
-    let { parser: parser5 } = stack2.p, { tokenizers } = parser5;
-    let mask = parser5.stateSlot(
+    let { parser: parser10 } = stack2.p, { tokenizers } = parser10;
+    let mask = parser10.stateSlot(
       stack2.state,
       3
       /* ParseState.TokenizerMask */
@@ -334481,10 +334490,10 @@ var TokenCache = class {
     let start = this.stream.clipPos(stack2.pos);
     tokenizer.token(this.stream.reset(start, token2), stack2);
     if (token2.value > -1) {
-      let { parser: parser5 } = stack2.p;
-      for (let i2 = 0; i2 < parser5.specialized.length; i2++)
-        if (parser5.specialized[i2] == token2.value) {
-          let result = parser5.specializers[i2](this.stream.read(token2.start, token2.end), stack2);
+      let { parser: parser10 } = stack2.p;
+      for (let i2 = 0; i2 < parser10.specialized.length; i2++)
+        if (parser10.specialized[i2] == token2.value) {
+          let result = parser10.specializers[i2](this.stream.read(token2.start, token2.end), stack2);
           if (result >= 0 && stack2.p.parser.dialect.allows(result >> 1)) {
             if ((result & 1) == 0)
               token2.value = result >> 1;
@@ -334508,9 +334517,9 @@ var TokenCache = class {
     return index;
   }
   addActions(stack2, token2, end, index) {
-    let { state } = stack2, { parser: parser5 } = stack2.p, { data } = parser5;
+    let { state } = stack2, { parser: parser10 } = stack2.p, { data } = parser10;
     for (let set2 = 0; set2 < 2; set2++) {
-      for (let i2 = parser5.stateSlot(
+      for (let i2 = parser10.stateSlot(
         state,
         set2 ? 2 : 1
         /* ParseState.Actions */
@@ -334532,8 +334541,8 @@ var TokenCache = class {
   }
 };
 var Parse = class {
-  constructor(parser5, input, fragments, ranges) {
-    this.parser = parser5;
+  constructor(parser10, input, fragments, ranges) {
+    this.parser = parser10;
     this.input = input;
     this.ranges = ranges;
     this.recovering = 0;
@@ -334545,11 +334554,11 @@ var Parse = class {
     this.lastBigReductionSize = 0;
     this.bigReductionCount = 0;
     this.stream = new InputStream(input, ranges);
-    this.tokens = new TokenCache(parser5, this.stream);
-    this.topTerm = parser5.top[1];
+    this.tokens = new TokenCache(parser10, this.stream);
+    this.topTerm = parser10.top[1];
     let { from } = ranges[0];
-    this.stacks = [Stack.start(this, parser5.top[0], from)];
-    this.fragments = fragments.length && this.stream.end - from > parser5.bufferLength * 4 ? new FragmentCursor(fragments, parser5.nodeSet) : null;
+    this.stacks = [Stack.start(this, parser10.top[0], from)];
+    this.fragments = fragments.length && this.stream.end - from > parser10.bufferLength * 4 ? new FragmentCursor(fragments, parser10.nodeSet) : null;
   }
   get parsedPos() {
     return this.minStackPos;
@@ -334660,18 +334669,18 @@ var Parse = class {
   // given, stacks split off by ambiguous operations will be pushed to
   // `split`, or added to `stacks` if they move `pos` forward.
   advanceStack(stack2, stacks, split) {
-    let start = stack2.pos, { parser: parser5 } = this;
+    let start = stack2.pos, { parser: parser10 } = this;
     let base = verbose ? this.stackID(stack2) + " -> " : "";
     if (this.stoppedAt != null && start > this.stoppedAt)
       return stack2.forceReduce() ? stack2 : null;
     if (this.fragments) {
       let strictCx = stack2.curContext && stack2.curContext.tracker.strict, cxHash = strictCx ? stack2.curContext.hash : 0;
       for (let cached = this.fragments.nodeAt(start); cached; ) {
-        let match3 = this.parser.nodeSet.types[cached.type.id] == cached.type ? parser5.getGoto(stack2.state, cached.type.id) : -1;
+        let match3 = this.parser.nodeSet.types[cached.type.id] == cached.type ? parser10.getGoto(stack2.state, cached.type.id) : -1;
         if (match3 > -1 && cached.length && (!strictCx || (cached.prop(NodeProp.contextHash) || 0) == cxHash)) {
           stack2.useNode(cached, match3);
           if (verbose)
-            console.log(base + this.stackID(stack2) + ` (via reuse of ${parser5.getName(cached.type.id)})`);
+            console.log(base + this.stackID(stack2) + ` (via reuse of ${parser10.getName(cached.type.id)})`);
           return true;
         }
         if (!(cached instanceof Tree) || cached.children.length == 0 || cached.positions[0] > 0)
@@ -334683,7 +334692,7 @@ var Parse = class {
           break;
       }
     }
-    let defaultReduce = parser5.stateSlot(
+    let defaultReduce = parser10.stateSlot(
       stack2.state,
       4
       /* ParseState.DefaultReduce */
@@ -334691,7 +334700,7 @@ var Parse = class {
     if (defaultReduce > 0) {
       stack2.reduce(defaultReduce);
       if (verbose)
-        console.log(base + this.stackID(stack2) + ` (via always-reduce ${parser5.getName(
+        console.log(base + this.stackID(stack2) + ` (via always-reduce ${parser10.getName(
           defaultReduce & 65535
           /* Action.ValueMask */
         )})`);
@@ -334709,10 +334718,10 @@ var Parse = class {
       let main = this.tokens.mainToken;
       localStack.apply(action, term, main ? main.start : localStack.pos, end);
       if (verbose)
-        console.log(base + this.stackID(localStack) + ` (via ${(action & 65536) == 0 ? "shift" : `reduce of ${parser5.getName(
+        console.log(base + this.stackID(localStack) + ` (via ${(action & 65536) == 0 ? "shift" : `reduce of ${parser10.getName(
           action & 65535
           /* Action.ValueMask */
-        )}`} for ${parser5.getName(term)} @ ${start}${localStack == stack2 ? "" : ", split"})`);
+        )}`} for ${parser10.getName(term)} @ ${start}${localStack == stack2 ? "" : ", split"})`);
       if (last2)
         return true;
       else if (localStack.pos > start)
@@ -336098,8 +336107,8 @@ var parser4 = LRParser.deserialize({
 });
 
 // ../../../vite-plugin-file-sync/dist/binding-extraction/extract-py-identifiers.js
-var extractPyEvaluationPairsWithTokenizer = (pythonSnippet, parser5) => {
-  const tree = parser5.parse(pythonSnippet);
+var extractPyEvaluationPairsWithTokenizer = (pythonSnippet, parser10) => {
+  const tree = parser10.parse(pythonSnippet);
   const cursor3 = tree.cursor();
   let isCapturing = false;
   const bindingPairs = [];
@@ -343480,6 +343489,9 @@ function isSBTemplateNode(node) {
 // ../../../vite-plugin-file-sync/dist/parsing/type-parsing-registry.js
 init_cjs_shims();
 
+// ../../../vite-plugin-file-sync/dist/parsing/computed/index.js
+init_cjs_shims();
+
 // ../../../vite-plugin-file-sync/dist/parsing/computed/to-code-computed.js
 init_cjs_shims();
 function isValidJSXExpression(value2) {
@@ -343533,6 +343545,15 @@ function toValueComputed(expression) {
   return getFunctionExpressionBody(computedNode);
 }
 
+// ../../../vite-plugin-file-sync/dist/parsing/computed/index.js
+var parser5 = {
+  toCode: (value2) => toCodeComputed(value2),
+  toValue: (code) => toValueComputed(code)
+};
+
+// ../../../vite-plugin-file-sync/dist/parsing/dim/index.js
+init_cjs_shims();
+
 // ../../../vite-plugin-file-sync/dist/parsing/dim/to-code-dimensions.js
 init_cjs_shims();
 function toCodeDimension(value2) {
@@ -343593,6 +343614,15 @@ function toValueDimension(expression) {
   };
 }
 
+// ../../../vite-plugin-file-sync/dist/parsing/dim/index.js
+var parser6 = {
+  toCode: (value2) => toCodeDimension(value2),
+  toValue: (source2) => toValueDimension(source2.node)
+};
+
+// ../../../vite-plugin-file-sync/dist/parsing/events/index.js
+init_cjs_shims();
+
 // ../../../vite-plugin-file-sync/dist/parsing/events/to-code-events.js
 init_cjs_shims();
 
@@ -343731,7 +343761,12 @@ function toCodeEventFlow(stepDefs_) {
       case TriggerStepType.SET_STATE_VAR: {
         const name17 = `${stepDef.state?.scope === import_shared9.ApplicationScope.APP ? "App." : ""}${stepDef.state?.name ?? ""}`;
         const value2 = stepDef.value ?? "";
-        if ((0, import_shared9.containsBindingsAnywhere)(value2)) {
+        if (isComputedPropertyInfo(value2)) {
+          const computedValue = parser5.toCode(value2.value);
+          code = `${code}.setStateVar("${name17}", ${computedValue})`;
+        } else if (containsStringInterpolation(value2)) {
+          code = `${code}.setStateVar("${name17}", sbComputed(() => \`${value2}\`))`;
+        } else if (typeof value2 === "string" && (0, import_shared9.containsBindingsAnywhere)(value2)) {
           code = `${code}.setStateVar("${name17}", SB\`${value2}\`)`;
         } else if (typeof value2 === "object" && value2 != null) {
           code = `${code}.setStateVar("${name17}", ${JSON.stringify(value2)})`;
@@ -343767,6 +343802,24 @@ var getApiCallbackNode = (nodePath) => {
   }
   return [];
 };
+function getStateVarValue(valueNodePath) {
+  if (isSbComputedNode(valueNodePath)) {
+    return Property.Computed(parser5.toValue(valueNodePath));
+  } else if (isDimNode(valueNodePath)) {
+    return Property.Computed(JSON.stringify(parser6.toValue(valueNodePath)));
+  }
+  try {
+    const value2 = nodeToValue(valueNodePath.node);
+    if (typeof value2 === "string") {
+      return value2;
+    }
+    if (value2 !== null || valueNodePath.node.type === "NullLiteral") {
+      return Property.Computed(JSON.stringify(value2));
+    }
+  } catch (_e) {
+  }
+  return Property.Computed(generate(valueNodePath.node).code);
+}
 function toValueEventFlow(nodePath, existingSteps = [], parentId) {
   const logger3 = getLogger();
   const callee = nodePath.get("callee");
@@ -343868,7 +343921,7 @@ function toValueEventFlow(nodePath, existingSteps = [], parentId) {
         return existingSteps;
       }
       const name17 = nodeToValue(expression.node);
-      const value2 = nodeToValue(valueNodePath.node);
+      const value2 = getStateVarValue(valueNodePath);
       const isAppScoped = name17.includes("App");
       const variableName = isAppScoped ? name17.split(".")[1] : name17;
       if (!variableName)
@@ -343912,6 +343965,15 @@ function toValueEventFlow(nodePath, existingSteps = [], parentId) {
   }
 }
 
+// ../../../vite-plugin-file-sync/dist/parsing/events/index.js
+var parser7 = {
+  toCode: (value2) => toCodeEventFlow(value2),
+  toValue: (source2) => toValueEventFlow(source2)
+};
+
+// ../../../vite-plugin-file-sync/dist/parsing/template/index.js
+init_cjs_shims();
+
 // ../../../vite-plugin-file-sync/dist/parsing/template/to-code-template.js
 init_cjs_shims();
 function toCodeTemplate(str2) {
@@ -343946,28 +344008,18 @@ function toValueTemplate(nodePath) {
   return "";
 }
 
-// ../../../vite-plugin-file-sync/dist/parsing/type-parsing-registry.js
-var dimensionParser = {
-  toCode: (value2) => toCodeDimension(value2),
-  toValue: (source2) => toValueDimension(source2.node)
-};
-var eventParser = {
-  toCode: (value2) => toCodeEventFlow(value2),
-  toValue: (source2) => toValueEventFlow(source2)
-};
-var templateParser = {
+// ../../../vite-plugin-file-sync/dist/parsing/template/index.js
+var parser8 = {
   toCode: (value2) => toCodeTemplate(value2),
   toValue: (source2) => toValueTemplate(source2)
 };
-var computedParser = {
-  toCode: (value2) => toCodeComputed(value2),
-  toValue: (code) => toValueComputed(code)
-};
+
+// ../../../vite-plugin-file-sync/dist/parsing/type-parsing-registry.js
 var parsingRegistry = {
-  DIMENSION: dimensionParser,
-  EVENT: eventParser,
-  COMPUTED: computedParser,
-  TEMPLATE: templateParser
+  DIMENSION: parser6,
+  EVENT: parser7,
+  COMPUTED: parser5,
+  TEMPLATE: parser8
 };
 
 // ../../../vite-plugin-file-sync/dist/parsing/properties.js
@@ -344964,9 +345016,9 @@ function toValueEntity(nodePath, { key: key2, id: id2 }) {
 }
 
 // ../../../vite-plugin-file-sync/dist/parsing/entity/index.js
-var entityParser = {
-  toValue: toValueEntity,
-  toCode: toCodeEntity
+var parser9 = {
+  toCode: toCodeEntity,
+  toValue: toValueEntity
 };
 
 // ../../../vite-plugin-file-sync/dist/parsing/imports.js
@@ -344976,6 +345028,10 @@ var REQUIRED_IMPORTS_BY_PROPERTY_TYPE = {
     {
       importName: "SbEventFlow",
       importPath: "@superblocksteam/library"
+    },
+    {
+      importName: "sbComputed",
+      importPath: "@superblocksteam/library"
     }
   ],
   BINDING: [
@@ -345072,7 +345128,7 @@ function updateEntityNode(node, updates, entityId) {
 }
 function fromEntityToNode(entity) {
   const imports = importsByEntityType[entity.type] ?? [];
-  const code = entityParser.toCode(entity);
+  const code = parser9.toCode(entity);
   const parsedEntity = (0, import_parser4.parse)(code, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
@@ -345089,7 +345145,7 @@ function fromNodeToEntity(property, entityId) {
   const entityName = nodeToValue(property.get("key").node);
   const expression = property.get("value");
   const id2 = entityId ?? getSbElementId(property.node);
-  return entityParser.toValue(expression, {
+  return parser9.toValue(expression, {
     key: entityName,
     id: id2
   });
@@ -366648,9 +366704,9 @@ function getPrinterPluginByAstFormat(plugins, astFormat) {
   }
   throw new ConfigError(message);
 }
-function resolveParser({ plugins, parser: parser5 }) {
-  const plugin = getParserPluginByParserName(plugins, parser5);
-  return initParser(plugin, parser5);
+function resolveParser({ plugins, parser: parser10 }) {
+  const plugin = getParserPluginByParserName(plugins, parser10);
+  return initParser(plugin, parser10);
 }
 function initParser(plugin, parserName) {
   const parserOrParserInitFunction = plugin.parsers[parserName];
@@ -366700,12 +366756,12 @@ async function normalizeFormatOptions(options8, opts = {}) {
     rawOptions.plugins,
     rawOptions.parser
   );
-  const parser5 = await initParser(parserPlugin, rawOptions.parser);
-  rawOptions.astFormat = parser5.astFormat;
-  rawOptions.locEnd = parser5.locEnd;
-  rawOptions.locStart = parser5.locStart;
-  const printerPlugin = ((_a17 = parserPlugin.printers) == null ? void 0 : _a17[parser5.astFormat]) ? parserPlugin : getPrinterPluginByAstFormat(rawOptions.plugins, parser5.astFormat);
-  const printer2 = await initPrinter(printerPlugin, parser5.astFormat);
+  const parser10 = await initParser(parserPlugin, rawOptions.parser);
+  rawOptions.astFormat = parser10.astFormat;
+  rawOptions.locEnd = parser10.locEnd;
+  rawOptions.locStart = parser10.locStart;
+  const printerPlugin = ((_a17 = parserPlugin.printers) == null ? void 0 : _a17[parser10.astFormat]) ? parserPlugin : getPrinterPluginByAstFormat(rawOptions.plugins, parser10.astFormat);
+  const printer2 = await initPrinter(printerPlugin, parser10.astFormat);
   rawOptions.printer = printer2;
   const pluginDefaults = printerPlugin.defaultOptions ? Object.fromEntries(
     Object.entries(printerPlugin.defaultOptions).filter(
@@ -366729,12 +366785,12 @@ async function normalizeFormatOptions(options8, opts = {}) {
 var normalize_format_options_default = normalizeFormatOptions;
 var import_code_frame2 = __toESM2(require_lib210(), 1);
 async function parse52(originalText, options8) {
-  const parser5 = await resolveParser(options8);
-  const text2 = parser5.preprocess ? parser5.preprocess(originalText, options8) : originalText;
+  const parser10 = await resolveParser(options8);
+  const text2 = parser10.preprocess ? parser10.preprocess(originalText, options8) : originalText;
   options8.originalText = text2;
   let ast;
   try {
-    ast = await parser5.parse(
+    ast = await parser10.parse(
       text2,
       options8,
       // TODO: remove the third argument in v4
@@ -367055,7 +367111,7 @@ var arrayFindLastIndex = (isOptionalObject, array2, callback) => {
   return -1;
 };
 var array_find_last_index_default = arrayFindLastIndex;
-var isJsonParser = ({ parser: parser5 }) => parser5 === "json" || parser5 === "json5" || parser5 === "jsonc" || parser5 === "json-stringify";
+var isJsonParser = ({ parser: parser10 }) => parser10 === "json" || parser10 === "json5" || parser10 === "jsonc" || parser10 === "json-stringify";
 function findCommonAncestor(startNodeAndParents, endNodeAndParents) {
   const startNodeAndAncestors = [
     startNodeAndParents.node,
@@ -375882,7 +375938,7 @@ async function startVite({ app, httpServer: httpServer2, root: root2, mode, port
   };
   const isCustomBuildEnabled2 = await isCustomComponentsEnabled();
   const customFolder = path21.join(root2, "custom");
-  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3-next.151";
+  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3-next.153";
   const env3 = loadEnv(mode, root2, "");
   const hmrPort = await getFreePort();
   const hmrOptions = {
@@ -382595,7 +382651,7 @@ init_cjs_shims();
 init_cjs_shims();
 var generated = {};
 try {
-  generated = await import("./generated-RWPUAFSG.js");
+  generated = await import("./generated-FORH4H64.js");
 } catch (_error) {
   getLogger().warn("[ai-service] Generated markdown modules not found. Run `pnpm generate:markdown` first.");
 }

package/oclif.manifest.json

@@ -509,5 +509,5 @@
       "strict": true
     }
   },
-  "version": "2.0.3-next.151"
+  "version": "2.0.3-next.153"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "2.0.3-next.151",
+  "version": "2.0.3-next.153",
   "type": "module",
   "description": "Official Superblocks CLI",
   "homepage": "https://www.superblocks.com",
@@ -42,9 +42,9 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@oclif/test": "^4.1.11",
-    "@superblocksteam/sdk": "2.0.3-next.151",
+    "@superblocksteam/sdk": "2.0.3-next.153",
     "@superblocksteam/shared": "0.9115.0",
-    "@superblocksteam/util": "2.0.3-next.151",
+    "@superblocksteam/util": "2.0.3-next.153",
     "@types/babel__core": "^7.20.0",
     "@types/chai": "^4",
     "@types/fs-extra": "^11.0.1",