@superblocksteam/cli 2.0.3 → 2.0.6-next.0

package/README.md

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

package/dist/{generated-W6HVWB2O.js → generated-36L7KYTH.js}

@@ -48,11 +48,11 @@ var content5 = "# Data Filtering Best Practices\n\n**\u{1F6A8} CRITICAL: When im
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-event-flow.js
 init_cjs_shims();
-var content6 = '# Event handlers with SbEventFlow\n\nRather than using standard browser event handlers, Superblocks provides a structured event handler action flow that allows you to run a series of events within the Superblocks system.\n\nImporting SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from "@superblocksteam/library";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\nconst { isReady } = Page1;\n<SbButton onClick={SbEventFlow.setStateVar(isReady, true)} />;\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` which correspond to actions in the Superblocks system.\n\nYou should always use these dedicated functions for individual and sequential actions.\n\nImportant: DO NOT use .run() at the end of a chain of SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\nconst { isReady, getUserData, getPermissions } = Page1;\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: "active" }, true)\n    .setStateVar(isReady, true)\n    .controlModal("loginModal", "close")\n\n    // run APIs allows you to run Superblocks APIs by name using string arrays\n    // Each runAPIs call executes the list of API names supplied in parallel\n    .runApis([getUserData, getPermissions])\n\n    // set a state variable\'s value\n    .showAlert("Workflow complete", "success")\n    .navigateTo({ url: "/dashboard", newWindow: false })}\n/>;\n```\n\n#### Using RunJS (only when needed)\n\n`SbEventFlow` also has a special `runJS` event type that allows you to run any JavaScript in the browser.\n\nThis allows you to write more complex logic such as control flow.\n\nImportant:\n\n- The only things you can do in runJS is set state variables or set the public state of components, like modal.isOpen.\n- You CANNOT use SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won\'t work!\n- **State access in runJS**: Scope entities are accessible directly by their names, global state is accessible via imported globals (Global, Theme, Embed, Env).\n\nExample accessing scope entities:\n\n```jsx\n<SbButton\n  label="Enable"\n  buttonStyle={"SECONDARY_BUTTON"}\n  onClick={SbEventFlow.runJS(() => {\n    // Scope entities (variables, bound components) are accessible directly in runJS\n    if (isUserAdmin.value) {\n      // isUserAdmin is a bound component from scope\n      myStateVar.value = true; // myStateVar is a state variable from scope\n      myModal.isOpen = false; // myModal is a bound component from scope\n    } else {\n      console.log("This user was not an admin");\n    }\n  })}\n/>\n```\n\nExample accessing global state when needed:\n\n```jsx\n<SbButton\n  label="Personalized Action"\n  onClick={SbEventFlow.runJS(() => {\n    // Import globals and access directly\n    if (Global.user.groups.some((g) => g.name === "admin")) {\n      // Also access scope entities (bound components) directly\n      adminPanel.isVisible = true; // adminPanel is a bound component from scope\n    }\n    console.log(`Welcome ${Global.user.name}!`);\n  })}\n/>\n```\n\nAs mentioned above, you should only use `runJS` when the flow is too complex to represent using only chained event flow actions.\n\n### SbEvent Flow Usage Examples\n\n```typescript\nimport { SbEventFlow, sbComputed } from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst { fetchUserData, saveUserData, userDataVariable } = Page1;\n\n// Navigation example\nSbEventFlow.navigateTo({ url: "https://example.com", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal("myModal", "open");\n\n// State management example\nconst { userProfile } = Page1;\nSbEventFlow.setStateVar(userProfile, { name: "John", role: "Admin" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    sbComputed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert("Data loaded successfully", "success");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert("Success!", "success");\nconst errorFlow = SbEventFlow.showAlert("An error occurred", "error");\nSbEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n\n**SbEventFlow: Managing Events and Side Effects in Superblocks**\n\n## Important Syntax Rules\n\n- Always use function braces with SbEventFlow.runJS. Example: `SbEventFlow.runJS(() => { someFunction(); })` not `SbEventFlow.runJS(() => someFunction())`\n- SbEventFlow.runApis() accepts an array of direct API entity references. Example: `SbEventFlow.runApis([fetchUserData, saveUserData])`\n';
+var content6 = '# Event handlers with SbEventFlow\n\nRather than using standard browser event handlers, Superblocks provides a structured event handler action flow that allows you to run a series of events within the Superblocks system.\n\nImporting SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from "@superblocksteam/library";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\nconst { isReady } = Page1;\n<SbButton onClick={SbEventFlow.setStateVar(isReady, true)} />;\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` which correspond to actions in the Superblocks system.\n\nYou should always use these dedicated functions for individual and sequential actions.\n\nImportant: DO NOT use .run() at the end of a chain of SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\nconst { isReady, getUserData, getPermissions, LoginModal } = Page1;\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: "active" }, true)\n    .setStateVar(isReady, true)\n    .controlModal(LoginModal, "close")\n\n    // run APIs allows you to run Superblocks APIs by name using string arrays\n    // Each runAPIs call executes the list of API names supplied in parallel\n    .runApis([getUserData, getPermissions])\n\n    // set a state variable\'s value\n    .showAlert("Workflow complete", "success")\n    .navigateTo({ url: "/dashboard", newWindow: false })}\n/>;\n```\n\n#### Using RunJS (only when needed)\n\n`SbEventFlow` also has a special `runJS` event type that allows you to run any JavaScript in the browser.\n\nThis allows you to write more complex logic such as control flow.\n\nImportant:\n\n- The only things you can do in runJS is set state variables or set the public state of components, like modal.isOpen.\n- You CANNOT use SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won\'t work!\n- **State access in runJS**: Scope entities are accessible directly by their names, global state is accessible via imported globals (Global, Theme, Embed, Env).\n\nExample accessing scope entities:\n\n```jsx\n<SbButton\n  label="Enable"\n  buttonStyle={"SECONDARY_BUTTON"}\n  onClick={SbEventFlow.runJS(() => {\n    // Scope entities (variables, bound components) are accessible directly in runJS\n    if (isUserAdmin.value) {\n      // isUserAdmin is a bound component from scope\n      myStateVar.value = true; // myStateVar is a state variable from scope\n      myModal.isOpen = false; // myModal is a bound component from scope\n    } else {\n      console.log("This user was not an admin");\n    }\n  })}\n/>\n```\n\nExample accessing global state when needed:\n\n```jsx\n<SbButton\n  label="Personalized Action"\n  onClick={SbEventFlow.runJS(() => {\n    // Import globals and access directly\n    if (Global.user.groups.some((g) => g.name === "admin")) {\n      // Also access scope entities (bound components) directly\n      adminPanel.isVisible = true; // adminPanel is a bound component from scope\n    }\n    console.log(`Welcome ${Global.user.name}!`);\n  })}\n/>\n```\n\nAs mentioned above, you should only use `runJS` when the flow is too complex to represent using only chained event flow actions.\n\n### SbEvent Flow Usage Examples\n\n```typescript\nimport { SbEventFlow, sbComputed } from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst { fetchUserData, saveUserData, userDataVariable, MyModal } = Page1;\n\n// Navigation example\nSbEventFlow.navigateTo({ url: "https://example.com", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal(MyModal, "open");\n\n// State management example\nconst { userProfile } = Page1;\nSbEventFlow.setStateVar(userProfile, { name: "John", role: "Admin" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    sbComputed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert("Data loaded successfully", "success");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert("Success!", "success");\nconst errorFlow = SbEventFlow.showAlert("An error occurred", "error");\nSbEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n\n**SbEventFlow: Managing Events and Side Effects in Superblocks**\n\n## Important Syntax Rules\n\n- Always use function braces with SbEventFlow.runJS. Example: `SbEventFlow.runJS(() => { someFunction(); })` not `SbEventFlow.runJS(() => someFunction())`\n- SbEventFlow.runApis() accepts an array of direct API entity references. Example: `SbEventFlow.runApis([fetchUserData, saveUserData])`\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-forms.js
 init_cjs_shims();
-var content7 = '### Form Layouts in Superblocks\n\n**\u{1F6A8} CRITICAL: Remember that sbComputed cannot be used as React children.** When building forms, all dynamic content must be in component properties (like `text={}`, `label={}`) not as children.\n\nWhen creating forms using form field components, follow these rules:\n\n1. Always put form components together inside an `SbContainer` with `layout="vertical"`, `width={Dim.fill()}`, and appropriate `spacing`\n2. Use `spacing={Dim.px(12)}` or similar for consistent form field spacing\n3. Do not change the label position on form components (like `SbInput`). The default is the label is above the input and we want to keep that\n4. Make all form field components and any container parents be `width={Dim.fill()}` so they are all aligned horizontally and easy to use\n\n**Example:**\n\n```jsx\n<SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n  <SbInput label="First Name" bind={FirstName} width={Dim.fill()} />\n  <SbInput label="Last Name" bind={LastName} width={Dim.fill()} />\n  <SbInput label="Email" bind={Email} inputType="EMAIL" width={Dim.fill()} />\n</SbContainer>\n```\n\n### Forms inside Modals\n\nIt\'s common to put a form inside a Modal, like for creating or editing an entity. Here are comprehensive examples showing different patterns:\n\n#### Basic Create Form Modal\n\n```tsx\n// Import required components and utilities\nimport {\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\n// ...\n\nconst {\n  NewOrderCustomerName,\n  NewOrderCustomerEmail,\n  NewOrderAmount,\n  NewOrderStatus,\n  NewOrderNotes,\n  OrdersStateVar,\n  CreateOrderModal,\n} = Page1;\n\n<SbModal bind={CreateOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Create New Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Fill out the form below to create a new order" />\n    </SbContainer>\n\n    {/* Form Content */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={NewOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.runJS(() => {\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal("CreateOrderModal", "close")}\n      />\n      <SbButton\n        label="Create Order"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Create new order using the form values\n          const newOrder = {\n            id: `ORD_${Math.floor(Math.random() * 10000)\n              .toString()\n              .padStart(4, "0")}`,\n            customerName: NewOrderCustomerName.value,\n            customerEmail: NewOrderCustomerEmail.value,\n            amount: NewOrderAmount.value,\n            status: NewOrderStatus.selectedOptionValue,\n            notes: NewOrderNotes.value,\n            createdAt: new Date().toISOString(),\n          };\n\n          // Add to orders list or call API\n          OrdersStateVar.setValue([...OrdersStateVar.value, newOrder]);\n\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal("CreateOrderModal", "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>;\n```\n\n#### Table with Edit Form Modal\n\nThis example shows a more complete pattern where a table displays data and clicking a row opens an edit modal with the form fields pre-populated:\n\n```tsx\n// Import required components and utilities\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst {\n  OrdersTable,\n  EditOrderModal,\n  EditOrderCustomerName,\n  EditOrderCustomerEmail,\n  EditOrderAmount,\n  EditOrderStatus,\n  EditOrderNotes,\n  OrdersStateVar,\n} = Page1;\n\n// Main page with table\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()} spacing={Dim.px(24)}>\n        <SbText\n          text="Orders Management"\n          textStyle={{ variant: "heading2" }}\n        />\n\n        <SbTable\n          bind={OrdersTable}\n          tableData={sbComputed(() => OrdersStateVar.value)}\n          onRowClick={SbEventFlow.runJS(() => {\n            // Populate form fields with the selected row data\n            EditOrderCustomerName.text = OrdersTable.selectedRow.customerName;\n            EditOrderCustomerEmail.text = OrdersTable.selectedRow.customerEmail;\n            EditOrderAmount.text = OrdersTable.selectedRow.amount;\n            EditOrderStatus.metaSelectedOptionValue = OrdersTable.selectedRow.status;\n            EditOrderNotes.text = OrdersTable.selectedRow.notes || "";\n          })\n            // Open the edit modal\n            .controlModal("EditOrderModal", "open")}\n          width={Dim.fill()}\n          height={Dim.fill()}\n        />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n\n// Edit modal with form pre-populated from table row\n<SbModal bind={EditOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Edit Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Update the order details below" />\n    </SbContainer>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={EditOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.controlModal("EditOrderModal", "close")}\n      />\n      <SbButton\n        label="Save Changes"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Find and update the order in the orders array\n          const updatedOrders = OrdersStateVar.value.map(order => {\n            if (order.id === OrdersTable.selectedRow.id) {\n              return {\n                ...order,\n                customerName: EditOrderCustomerName.value,\n                customerEmail: EditOrderCustomerEmail.value,\n                amount: EditOrderAmount.value,\n                status: EditOrderStatus.selectedOptionValue,\n                notes: EditOrderNotes.value,\n                updatedAt: new Date().toISOString(),\n              };\n            }\n            return order;\n          });\n\n          // Update the orders state\n          OrdersStateVar.setValue(updatedOrders);\n        })\n          .controlModal("EditOrderModal", "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n  EditOrderModal: any;\n  EditOrderCustomerName: any;\n  EditOrderCustomerEmail: any;\n  EditOrderAmount: any;\n  EditOrderStatus: any;\n  EditOrderNotes: any;\n  OrdersStateVar: any;\n}>(\n  () => ({\n    OrdersStateVar: SbVariable({\n      defaultValue: [\n        {\n          id: 1,\n          customerName: "John Doe",\n          customerEmail: "john@example.com",\n          amount: 150.0,\n          status: "pending",\n          notes: "Rush order",\n          createdAt: "2024-01-15T10:30:00Z",\n        },\n        {\n          id: 2,\n          customerName: "Jane Smith",\n          customerEmail: "jane@example.com",\n          amount: 89.99,\n          status: "delivered",\n          notes: "",\n          createdAt: "2024-01-14T14:20:00Z",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n#### Alternative Population Method - Button with State Variable\n\nHere\'s another common pattern where a button populates form fields from a state variable:\n\n```tsx\n// Button that loads selected user data into edit form\n<SbButton\n  label="Edit Selected User"\n  onClick={SbEventFlow.runJS(() => {\n    const selectedUser = SelectedUserStateVar.value;\n\n    // Populate form fields from state variable\n    EditUserName.text = selectedUser.name;\n    EditUserEmail.text = selectedUser.email;\n    EditUserRole.metaSelectedOptionValue = selectedUser.role;\n    EditUserDepartment.text = selectedUser.department;\n  }).controlModal("EditUserModal", "open")}\n/>\n```\n\n### Key Form Patterns\n\n1. **Create Forms**: Start with empty fields, populate from user input\n2. **Edit Forms**: Pre-populate fields with existing data from various sources\n3. **Field Population Methods**:\n   - **Table Row Selection**: Use `onRowClick` to set form field values to `{TableName}.selectedRow.{columnName}` (most common)\n   - **Button Actions**: Use button clicks to populate from state variables or API responses\n   - **API Loading**: Fetch data and populate fields when modal opens\n   - **State Variables**: Populate from existing application state\n4. **Form Validation**: Use `required={true}` on form components and validate in submit handlers\n5. **Form Reset**: Always reset form fields when canceling or after successful submission\n6. **Modal Control**: Prefer `SbEventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `SbContainer` with `layout="vertical"`\n- **Consistent Spacing**: Use `spacing={Dim.px(12)}` for form field spacing\n- **Full Width**: Make form fields and containers `width={Dim.fill()}` for proper alignment\n- **Modal Structure**: Use header, content, and footer containers with appropriate spacing\n- **Button Alignment**: Use `horizontalAlign="right"` for the footer containers in modals that contain buttons\n';
+var content7 = '### Form Layouts in Superblocks\n\n**\u{1F6A8} CRITICAL: Remember that sbComputed cannot be used as React children.** When building forms, all dynamic content must be in component properties (like `text={}`, `label={}`) not as children.\n\nWhen creating forms using form field components, follow these rules:\n\n1. Always put form components together inside an `SbContainer` with `layout="vertical"`, `width={Dim.fill()}`, and appropriate `spacing`\n2. Use `spacing={Dim.px(12)}` or similar for consistent form field spacing\n3. Do not change the label position on form components (like `SbInput`). The default is the label is above the input and we want to keep that\n4. Make all form field components and any container parents be `width={Dim.fill()}` so they are all aligned horizontally and easy to use\n\n**Example:**\n\n```jsx\n<SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n  <SbInput label="First Name" bind={FirstName} width={Dim.fill()} />\n  <SbInput label="Last Name" bind={LastName} width={Dim.fill()} />\n  <SbInput label="Email" bind={Email} inputType="EMAIL" width={Dim.fill()} />\n</SbContainer>\n```\n\n### Forms inside Modals\n\nIt\'s common to put a form inside a Modal, like for creating or editing an entity. Here are comprehensive examples showing different patterns:\n\n#### Basic Create Form Modal\n\n```tsx\n// Import required components and utilities\nimport {\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\n// ...\n\nconst {\n  NewOrderCustomerName,\n  NewOrderCustomerEmail,\n  NewOrderAmount,\n  NewOrderStatus,\n  NewOrderNotes,\n  OrdersStateVar,\n  CreateOrderModal,\n} = Page1;\n\n<SbModal bind={CreateOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Create New Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Fill out the form below to create a new order" />\n    </SbContainer>\n\n    {/* Form Content */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={NewOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.runJS(() => {\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal(CreateOrderModal, "close")}\n      />\n      <SbButton\n        label="Create Order"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Create new order using the form values\n          const newOrder = {\n            id: `ORD_${Math.floor(Math.random() * 10000)\n              .toString()\n              .padStart(4, "0")}`,\n            customerName: NewOrderCustomerName.value,\n            customerEmail: NewOrderCustomerEmail.value,\n            amount: NewOrderAmount.value,\n            status: NewOrderStatus.selectedOptionValue,\n            notes: NewOrderNotes.value,\n            createdAt: new Date().toISOString(),\n          };\n\n          // Add to orders list or call API\n          OrdersStateVar.setValue([...OrdersStateVar.value, newOrder]);\n\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal(CreateOrderModal, "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>;\n```\n\n#### Table with Edit Form Modal\n\nThis example shows a more complete pattern where a table displays data and clicking a row opens an edit modal with the form fields pre-populated:\n\n```tsx\n// Import required components and utilities\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst {\n  OrdersTable,\n  EditOrderModal,\n  EditOrderCustomerName,\n  EditOrderCustomerEmail,\n  EditOrderAmount,\n  EditOrderStatus,\n  EditOrderNotes,\n  OrdersStateVar,\n} = Page1;\n\n// Main page with table\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()} spacing={Dim.px(24)}>\n        <SbText\n          text="Orders Management"\n          textStyle={{ variant: "heading2" }}\n        />\n\n        <SbTable\n          bind={OrdersTable}\n          tableData={sbComputed(() => OrdersStateVar.value)}\n          onRowClick={SbEventFlow.runJS(() => {\n            // Populate form fields with the selected row data\n            EditOrderCustomerName.text = OrdersTable.selectedRow.customerName;\n            EditOrderCustomerEmail.text = OrdersTable.selectedRow.customerEmail;\n            EditOrderAmount.text = OrdersTable.selectedRow.amount;\n            EditOrderStatus.metaSelectedOptionValue = OrdersTable.selectedRow.status;\n            EditOrderNotes.text = OrdersTable.selectedRow.notes || "";\n          })\n            // Open the edit modal\n            .controlModal(EditOrderModal, "open")}\n          width={Dim.fill()}\n          height={Dim.fill()}\n        />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n\n// Edit modal with form pre-populated from table row\n<SbModal bind={EditOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Edit Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Update the order details below" />\n    </SbContainer>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={EditOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.controlModal(EditOrderModal, "close")}\n      />\n      <SbButton\n        label="Save Changes"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Find and update the order in the orders array\n          const updatedOrders = OrdersStateVar.value.map(order => {\n            if (order.id === OrdersTable.selectedRow.id) {\n              return {\n                ...order,\n                customerName: EditOrderCustomerName.value,\n                customerEmail: EditOrderCustomerEmail.value,\n                amount: EditOrderAmount.value,\n                status: EditOrderStatus.selectedOptionValue,\n                notes: EditOrderNotes.value,\n                updatedAt: new Date().toISOString(),\n              };\n            }\n            return order;\n          });\n\n          // Update the orders state\n          OrdersStateVar.setValue(updatedOrders);\n        })\n          .controlModal(EditOrderModal, "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n  EditOrderModal: any;\n  EditOrderCustomerName: any;\n  EditOrderCustomerEmail: any;\n  EditOrderAmount: any;\n  EditOrderStatus: any;\n  EditOrderNotes: any;\n  OrdersStateVar: any;\n}>(\n  () => ({\n    OrdersStateVar: SbVariable({\n      defaultValue: [\n        {\n          id: 1,\n          customerName: "John Doe",\n          customerEmail: "john@example.com",\n          amount: 150.0,\n          status: "pending",\n          notes: "Rush order",\n          createdAt: "2024-01-15T10:30:00Z",\n        },\n        {\n          id: 2,\n          customerName: "Jane Smith",\n          customerEmail: "jane@example.com",\n          amount: 89.99,\n          status: "delivered",\n          notes: "",\n          createdAt: "2024-01-14T14:20:00Z",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n#### Alternative Population Method - Button with State Variable\n\nHere\'s another common pattern where a button populates form fields from a state variable:\n\n```tsx\n// Button that loads selected user data into edit form\n<SbButton\n  label="Edit Selected User"\n  onClick={SbEventFlow.runJS(() => {\n    const selectedUser = SelectedUserStateVar.value;\n\n    // Populate form fields from state variable\n    EditUserName.text = selectedUser.name;\n    EditUserEmail.text = selectedUser.email;\n    EditUserRole.metaSelectedOptionValue = selectedUser.role;\n    EditUserDepartment.text = selectedUser.department;\n  }).controlModal(EditUserModal, "open")}\n/>\n```\n\n### Key Form Patterns\n\n1. **Create Forms**: Start with empty fields, populate from user input\n2. **Edit Forms**: Pre-populate fields with existing data from various sources\n3. **Field Population Methods**:\n   - **Table Row Selection**: Use `onRowClick` to set form field values to `{TableName}.selectedRow.{columnName}` (most common)\n   - **Button Actions**: Use button clicks to populate from state variables or API responses\n   - **API Loading**: Fetch data and populate fields when modal opens\n   - **State Variables**: Populate from existing application state\n4. **Form Validation**: Use `required={true}` on form components and validate in submit handlers\n5. **Form Reset**: Always reset form fields when canceling or after successful submission\n6. **Modal Control**: Prefer `SbEventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `SbContainer` with `layout="vertical"`\n- **Consistent Spacing**: Use `spacing={Dim.px(12)}` for form field spacing\n- **Full Width**: Make form fields and containers `width={Dim.fill()}` for proper alignment\n- **Modal Structure**: Use header, content, and footer containers with appropriate spacing\n- **Button Alignment**: Use `horizontalAlign="right"` for the footer containers in modals that contain buttons\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-layouts.js
 init_cjs_shims();
@@ -182,7 +182,7 @@ var content31 = '## Dim\n\nThe `Dim` class is used to define dimensions for size
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-typedefs/SbEventFlow.js
 init_cjs_shims();
-var content32 = '## SbEventFlow\n\nThe `SbEventFlow` class is used to define responses to events triggered on components (like onClick) in Superblocks. It has a number of methods that can be chained together.\n\n```typescript\nclass SbEventFlow {\n  // Run custom JavaScript code\n  static runJS(handler: () => void): SbEventFlow;\n  runJS(handler: () => void): this;\n\n  // Navigation methods\n  static navigateTo(props: { url: string; newWindow?: boolean }): SbEventFlow;\n  navigateTo(props: { url: string; newWindow?: boolean }): this;\n\n  static navigateToApp(appId: string): SbEventFlow;\n  navigateToApp(appId: string): this;\n\n  static navigateToRoute(route: string): SbEventFlow;\n  navigateToRoute(route: string): this;\n\n  static setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): SbEventFlow;\n  setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): this;\n\n  // Control whether modals are opened or closed\n  // modalId should be the name of the string value of the bind property on the modal component\n  static controlModal(modalId: string, action: "open" | "close"): SbEventFlow;\n  controlModal(modalId: string, action: "open" | "close"): this;\n\n  static controlTimer(\n    timerId: string,\n    action: "start" | "stop" | "toggle",\n  ): SbEventFlow;\n  controlTimer(timerId: string, action: "start" | "stop" | "toggle"): this;\n\n  // API methods\n  static runApis(\n    apis: SbApi[],\n    onSuccess?: SbEventFlow,\n    onError?: SbEventFlow,\n  ): SbEventFlow;\n  runApis(apis: SbApi[], onSuccess?: SbEventFlow, onError?: SbEventFlow): this;\n\n  static cancelApis(apiNames: string[], onCancel?: SbEventFlow): SbEventFlow;\n  cancelApis(apiNames: string[], onCancel?: SbEventFlow): this;\n\n  // Component and state manipulation\n  static resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): SbEventFlow;\n  resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): this;\n\n  static resetStateVar(stateVar: SbVariable): SbEventFlow;\n  resetStateVar(stateVar: SbVariable): this;\n\n  static setStateVar(stateVar: SbVariable, value: any): SbEventFlow;\n  setStateVar(stateVar: SbVariable, value: any): this;\n\n  static setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): SbEventFlow;\n  setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): this;\n\n  // Utility methods\n  static showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): SbEventFlow;\n  showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): this;\n\n  static setProfile(\n    profileId: string,\n    profileAction: "set" | "unset",\n  ): SbEventFlow;\n  setProfile(profileId: string, profileAction: "set" | "unset"): this;\n\n  static triggerEvent(\n    eventName: string,\n    eventData: Record<string, string>,\n  ): SbEventFlow;\n  triggerEvent(eventName: string, eventData: Record<string, string>): this;\n}\n```\n';
+var content32 = '## SbEventFlow\n\nThe `SbEventFlow` class is used to define responses to events triggered on components (like onClick) in Superblocks. It has a number of methods that can be chained together.\n\n```typescript\nclass SbEventFlow {\n  // Run custom JavaScript code\n  static runJS(handler: () => void): SbEventFlow;\n  runJS(handler: () => void): this;\n\n  // Navigation methods\n  static navigateTo(props: { url: string; newWindow?: boolean }): SbEventFlow;\n  navigateTo(props: { url: string; newWindow?: boolean }): this;\n\n  static navigateToApp(appId: string): SbEventFlow;\n  navigateToApp(appId: string): this;\n\n  static navigateToRoute(route: string): SbEventFlow;\n  navigateToRoute(route: string): this;\n\n  static setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): SbEventFlow;\n  setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): this;\n\n  // Control whether modals are opened or closed\n  // Pass the bound modal component directly rather than its id\n  static controlModal(\n    modal: WithBindingIdentifier,\n    action: "open" | "close",\n  ): SbEventFlow;\n  controlModal(modal: WithBindingIdentifier, action: "open" | "close"): this;\n\n  static controlTimer(\n    timerId: string,\n    action: "start" | "stop" | "toggle",\n  ): SbEventFlow;\n  controlTimer(timerId: string, action: "start" | "stop" | "toggle"): this;\n\n  // API methods\n  static runApis(\n    apis: SbApi[],\n    onSuccess?: SbEventFlow,\n    onError?: SbEventFlow,\n  ): SbEventFlow;\n  runApis(apis: SbApi[], onSuccess?: SbEventFlow, onError?: SbEventFlow): this;\n\n  static cancelApis(apiNames: string[], onCancel?: SbEventFlow): SbEventFlow;\n  cancelApis(apiNames: string[], onCancel?: SbEventFlow): this;\n\n  // Component and state manipulation\n  static resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): SbEventFlow;\n  resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): this;\n\n  static resetStateVar(stateVar: SbVariable): SbEventFlow;\n  resetStateVar(stateVar: SbVariable): this;\n\n  static setStateVar(stateVar: SbVariable, value: any): SbEventFlow;\n  setStateVar(stateVar: SbVariable, value: any): this;\n\n  static setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): SbEventFlow;\n  setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): this;\n\n  // Utility methods\n  static showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): SbEventFlow;\n  showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): this;\n\n  static setProfile(\n    profileId: string,\n    profileAction: "set" | "unset",\n  ): SbEventFlow;\n  setProfile(profileId: string, profileAction: "set" | "unset"): this;\n\n  static triggerEvent(\n    eventName: string,\n    eventData: Record<string, string>,\n  ): SbEventFlow;\n  triggerEvent(eventName: string, eventData: Record<string, string>): this;\n}\n```\n';
 export {
   library_components_exports as library_components,
   library_typedefs_exports as library_typedefs,

package/dist/index.js

@@ -393072,7 +393072,7 @@ init_cjs_shims();
 init_cjs_shims();
 var generated = {};
 try {
-  generated = await import("./generated-W6HVWB2O.js");
+  generated = await import("./generated-36L7KYTH.js");
 } catch (_error) {
   getLogger().warn("[ai-service] Generated markdown modules not found. Run `pnpm generate:markdown` first.");
 }
@@ -401003,6 +401003,12 @@ var BindingMetaSymbol = Symbol("binding-meta");
 // ../../../library-shared/dist/types/ai-operations.js
 init_cjs_shims();
 
+// ../../../library-shared/dist/types/vite.js
+init_cjs_shims();
+var VitePostMessageKind = {
+  UPDATE_CUSTOM_COMPONENT: "update-custom-component"
+};
+
 // ../../../vite-plugin-file-sync/dist/sync-service/index.js
 var import_shared19 = __toESM(require_dist2(), 1);
 
@@ -407967,9 +407973,9 @@ var extractApiDependencies = (allApiNames, apiBindingBlock) => {
 // ../../../vite-plugin-file-sync/dist/components-manager.js
 init_cjs_shims();
 var import_parser = __toESM(require_lib9(), 1);
-var import_shared24 = __toESM(require_dist2(), 1);
 import fs11 from "node:fs/promises";
 import path23 from "node:path";
+var import_shared24 = __toESM(require_dist2(), 1);
 
 // ../../../vite-plugin-file-sync/dist/file-system-helpers.js
 init_cjs_shims();
@@ -408019,7 +408025,7 @@ var ComponentsManager = class _ComponentsManager extends import_shared24.TracedE
     });
     for (const file of projectFiles) {
       const fileContents = await fs11.readFile(file, "utf-8");
-      const componentName = await this.getComponentName(fileContents);
+      const componentName = await this.getComponentNameFromFile(fileContents);
       if (componentName) {
         this.registeredComponentNames[file] = componentName;
         this.fileContents[file] = fileContents;
@@ -408040,7 +408046,7 @@ var ComponentsManager = class _ComponentsManager extends import_shared24.TracedE
         const newFileContents = await fs11.readFile(path54, "utf-8");
         if (existingFileContents !== newFileContents) {
           this.fileContents[path54] = newFileContents;
-          const newComponentName = await this.getComponentName(newFileContents);
+          const newComponentName = await this.getComponentNameFromFile(newFileContents);
           const existingName = this.registeredComponentNames[path54];
           if (existingName && !newComponentName) {
             this.emit("registeredComponentRemoved", existingName);
@@ -408063,7 +408069,7 @@ var ComponentsManager = class _ComponentsManager extends import_shared24.TracedE
       return;
     try {
       const fileContents = await fs11.readFile(path54, "utf-8");
-      const componentName = await this.getComponentName(fileContents);
+      const componentName = await this.getComponentNameFromFile(fileContents);
       if (componentName) {
         this.registeredComponentNames[path54] = componentName;
         this.fileContents[path54] = fileContents;
@@ -408082,9 +408088,15 @@ var ComponentsManager = class _ComponentsManager extends import_shared24.TracedE
       return;
     this.emit("registeredComponentRemoved", componentName);
   };
+  isCustomComponentFile(path54) {
+    return path54 in this.registeredComponentNames;
+  }
   isCustomComponent(componentName) {
     return Object.values(this.registeredComponentNames).includes(componentName);
   }
+  getComponentName(path54) {
+    return this.registeredComponentNames[path54];
+  }
   getComponentImportPath(componentName, rootPath) {
     const filePath = Object.keys(this.registeredComponentNames).find((filePath2) => this.registeredComponentNames[filePath2] === componentName);
     if (!filePath) {
@@ -408102,7 +408114,7 @@ var ComponentsManager = class _ComponentsManager extends import_shared24.TracedE
    *
    * We can make these assumptions for now, but maybe we revisit them in the future.
    */
-  async getComponentName(fileContents) {
+  async getComponentNameFromFile(fileContents) {
     if (!fileContents.includes("registerComponent")) {
       return;
     }
@@ -408142,11 +408154,37 @@ var ComponentsManager = class _ComponentsManager extends import_shared24.TracedE
     return Object.keys(this.registeredComponentNames);
   }
 };
+function getComponentSourceCode(fileContents) {
+  return (
+    /*js*/
+    `
+${fileContents}
+if (import.meta.hot) {
+  import.meta.hot.on("vite:afterUpdate", (data) => {
+    try {
+      const currentFilePath = new URL(import.meta.url).pathname;
+      const isFileUpdated = Array.isArray(data.updates) && data.updates.some(update => update.path === currentFilePath);
+      if (isFileUpdated) {
+        window.postMessage(
+          {
+            kind: "${VitePostMessageKind.UPDATE_CUSTOM_COMPONENT}",
+            component: componentName,
+          },
+          "*",
+        );
+      }
+    } catch {
+      // ignore
+    }
+  });
+}`
+  );
+}
 
 // ../../../vite-plugin-file-sync/dist/file-system-manager.js
 init_cjs_shims();
 var import_core3 = __toESM(require_lib36(), 1);
-var import_types25 = __toESM(require_lib7(), 1);
+var import_types26 = __toESM(require_lib7(), 1);
 import fs12 from "fs/promises";
 import path27 from "node:path";
 var import_shared32 = __toESM(require_dist2(), 1);
@@ -408156,12 +408194,12 @@ var import_yaml2 = __toESM(require_dist(), 1);
 
 // ../../../vite-plugin-file-sync/dist/codegen.js
 init_cjs_shims();
-var import_types12 = __toESM(require_lib7(), 1);
+var import_types13 = __toESM(require_lib7(), 1);
 var import_json5 = __toESM(require_lib10(), 1);
 
 // ../../../vite-plugin-file-sync/dist/parsing/ids.js
 init_cjs_shims();
-var import_types11 = __toESM(require_lib7(), 1);
+var import_types12 = __toESM(require_lib7(), 1);
 
 // ../../../vite-plugin-file-sync/dist/ids.js
 init_cjs_shims();
@@ -408184,7 +408222,7 @@ var generatePredictableId2 = (name18) => {
 
 // ../../../vite-plugin-file-sync/dist/parsing/jsx.js
 init_cjs_shims();
-var import_types10 = __toESM(require_lib7(), 1);
+var import_types11 = __toESM(require_lib7(), 1);
 var import_shared27 = __toESM(require_dist2(), 1);
 
 // ../../../vite-plugin-file-sync/dist/parsing/properties.js
@@ -408196,7 +408234,7 @@ init_cjs_shims();
 // ../../../vite-plugin-file-sync/dist/parsing/util.js
 init_cjs_shims();
 var import_parser2 = __toESM(require_lib9(), 1);
-var import_types7 = __toESM(require_lib7(), 1);
+var import_types8 = __toESM(require_lib7(), 1);
 import path24 from "node:path";
 
 // ../../../vite-plugin-file-sync/dist/generate.js
@@ -408217,10 +408255,10 @@ function objectExpressionToObject(obj, context2) {
   }, {});
 }
 function createObjectKey(key2) {
-  return import_types7.default.isValidIdentifier(key2) ? import_types7.default.identifier(key2) : import_types7.default.stringLiteral(key2);
+  return import_types8.default.isValidIdentifier(key2) ? import_types8.default.identifier(key2) : import_types8.default.stringLiteral(key2);
 }
 function stringToTaggedTemplate(str2) {
-  return import_types7.default.taggedTemplateExpression(import_types7.default.identifier("SB"), import_types7.default.templateLiteral([import_types7.default.templateElement({ raw: str2, cooked: str2 }, true)], []));
+  return import_types8.default.taggedTemplateExpression(import_types8.default.identifier("SB"), import_types8.default.templateLiteral([import_types8.default.templateElement({ raw: str2, cooked: str2 }, true)], []));
 }
 function nodeToValue(node, context2) {
   switch (node.type) {
@@ -408239,7 +408277,7 @@ function nodeToValue(node, context2) {
         if (element) {
           return nodeToValue(element);
         }
-        return import_types7.default.nullLiteral();
+        return import_types8.default.nullLiteral();
       });
     case "ObjectExpression":
       return objectExpressionToObject(node, context2);
@@ -408377,9 +408415,9 @@ function addImport({ path: path54, importName, importPath, isDefaultImport, onAd
     return;
   }
   const existingImportDeclaration = programPath.get("body").find((p) => p.isImportDeclaration() && p.node.source.value === importPath);
-  const importSpecifier = isDefaultImport ? import_types7.default.importDefaultSpecifier(import_types7.default.identifier(importName)) : import_types7.default.importSpecifier(import_types7.default.identifier(importName), import_types7.default.identifier(importName));
+  const importSpecifier = isDefaultImport ? import_types8.default.importDefaultSpecifier(import_types8.default.identifier(importName)) : import_types8.default.importSpecifier(import_types8.default.identifier(importName), import_types8.default.identifier(importName));
   if (!existingImportDeclaration) {
-    programPath.unshiftContainer("body", import_types7.default.importDeclaration([importSpecifier], import_types7.default.stringLiteral(importPath)));
+    programPath.unshiftContainer("body", import_types8.default.importDeclaration([importSpecifier], import_types8.default.stringLiteral(importPath)));
   } else {
     const existingSpecifier = existingImportDeclaration.node.specifiers.find((specifier) => specifier.type === "ImportSpecifier" && specifier.local.name === importName);
     if (existingSpecifier) {
@@ -408438,18 +408476,18 @@ function isSbScopeFunction(name18) {
 }
 function extractNameFromBindAttribute(bindAttribute, identifierOnly = false) {
   const bindValue = bindAttribute.value;
-  if (!bindValue || !import_types7.default.isJSXExpressionContainer(bindValue)) {
+  if (!bindValue || !import_types8.default.isJSXExpressionContainer(bindValue)) {
     return null;
   }
   const expression = bindValue.expression;
-  if (import_types7.default.isIdentifier(expression)) {
+  if (import_types8.default.isIdentifier(expression)) {
     return expression.name;
   }
   if (identifierOnly) {
     return null;
   }
-  if (import_types7.default.isMemberExpression(expression)) {
-    if (import_types7.default.isIdentifier(expression.property)) {
+  if (import_types8.default.isMemberExpression(expression)) {
+    if (import_types8.default.isIdentifier(expression.property)) {
       return expression.property.name;
     }
   }
@@ -408470,7 +408508,7 @@ function parseExpression(value2) {
     sourceType: "module",
     plugins: [["typescript", {}], "jsx"]
   });
-  const exprStatement = compiled.program.body.find((node) => import_types7.default.isExpressionStatement(node));
+  const exprStatement = compiled.program.body.find((node) => import_types8.default.isExpressionStatement(node));
   if (exprStatement) {
     return exprStatement.expression;
   } else {
@@ -408812,10 +408850,10 @@ function toCodeEventFlow(stepDefs_) {
 
 // ../../../vite-plugin-file-sync/dist/parsing/events/to-value-events.js
 init_cjs_shims();
-var import_types9 = __toESM(require_lib7(), 1);
+var import_types10 = __toESM(require_lib7(), 1);
 var import_shared26 = __toESM(require_dist2(), 1);
 var getApiCallbackNode = (nodePath) => {
-  if (nodePath && (0, import_types9.isCallExpression)(nodePath.node) && (0, import_types9.isMemberExpression)(nodePath.node.callee) && (0, import_types9.isIdentifier)(nodePath.node.callee.object) && nodePath.node.callee.object.name === "SbEventFlow") {
+  if (nodePath && (0, import_types10.isCallExpression)(nodePath.node) && (0, import_types10.isMemberExpression)(nodePath.node.callee) && (0, import_types10.isIdentifier)(nodePath.node.callee.object) && nodePath.node.callee.object.name === "SbEventFlow") {
     return toValueEventFlow(nodePath);
   }
   return [];
@@ -409157,7 +409195,7 @@ function parseNodeProperties(node) {
 
 // ../../../vite-plugin-file-sync/dist/parsing/jsx.js
 function makeJSXAttribute(key2, value2) {
-  return import_types10.default.jsxAttribute(import_types10.default.jsxIdentifier(key2), import_types10.default.stringLiteral(value2));
+  return import_types11.default.jsxAttribute(import_types11.default.jsxIdentifier(key2), import_types11.default.stringLiteral(value2));
 }
 function tagNameToWidgetType(tagName) {
   switch (tagName) {
@@ -409372,18 +409410,18 @@ function getVariableReferences(jsxAttribute, variablesToCheck) {
     let visit2 = function(node) {
       if (!node || typeof node !== "object")
         return;
-      if (import_types10.default.isIdentifier(node)) {
+      if (import_types11.default.isIdentifier(node)) {
         if (variablesToCheck.has(node.name)) {
           result.add(node.name);
         }
       }
-      if (import_types10.default.isMemberExpression(node)) {
-        if (import_types10.default.isIdentifier(node.object) && variablesToCheck.has(node.object.name)) {
+      if (import_types11.default.isMemberExpression(node)) {
+        if (import_types11.default.isIdentifier(node.object) && variablesToCheck.has(node.object.name)) {
           result.add(node.object.name);
         }
       }
-      if (import_types10.default.isCallExpression(node)) {
-        if (import_types10.default.isIdentifier(node.callee) && variablesToCheck.has(node.callee.name)) {
+      if (import_types11.default.isCallExpression(node)) {
+        if (import_types11.default.isIdentifier(node.callee) && variablesToCheck.has(node.callee.name)) {
           result.add(node.callee.name);
         }
       }
@@ -409453,7 +409491,7 @@ function supplementElementIds({ fileName, ast, shouldModifyAst, scopeId }) {
               }
             });
           }
-          if (entitiesObject && (0, import_types11.isObjectExpression)(entitiesObject.node)) {
+          if (entitiesObject && (0, import_types12.isObjectExpression)(entitiesObject.node)) {
             entitiesObject.node.properties.forEach((property, index) => {
               if (property.type === "ObjectProperty") {
                 const name18 = nodeToValue(property.key);
@@ -409461,9 +409499,9 @@ function supplementElementIds({ fileName, ast, shouldModifyAst, scopeId }) {
                 idMap.set(id2, entitiesObject.get(`properties.${index}`));
                 setSbElementId(property, id2);
                 if (shouldModifyAst) {
-                  if ((0, import_types11.isCallExpression)(property.value) && (0, import_types11.isObjectExpression)(property.value.arguments[0])) {
+                  if ((0, import_types12.isCallExpression)(property.value) && (0, import_types12.isObjectExpression)(property.value.arguments[0])) {
                     const entityConfig = property.value.arguments[0];
-                    entityConfig.properties.push((0, import_types11.objectProperty)((0, import_types11.identifier)("id"), (0, import_types11.stringLiteral)(id2)));
+                    entityConfig.properties.push((0, import_types12.objectProperty)((0, import_types12.identifier)("id"), (0, import_types12.stringLiteral)(id2)));
                   }
                 }
               }
@@ -409527,11 +409565,11 @@ function generateElementId(fileName, parentPath, count) {
 function generateJSXElement({ id: id2, tagName, properties, children }) {
   const attributes = Object.entries(properties).map(([name18, value2]) => generateJSXAttribute(name18, value2));
   const selfClosing = children.length === 0;
-  const openingElement = import_types12.default.jsxOpeningElement(import_types12.default.jsxIdentifier(tagName), attributes, selfClosing);
+  const openingElement = import_types13.default.jsxOpeningElement(import_types13.default.jsxIdentifier(tagName), attributes, selfClosing);
   if (id2) {
     setSbElementId(openingElement, id2);
   }
-  const jsxElement = import_types12.default.jsxElement(openingElement, selfClosing ? null : import_types12.default.jsxClosingElement(import_types12.default.jsxIdentifier(tagName)), [], selfClosing);
+  const jsxElement = import_types13.default.jsxElement(openingElement, selfClosing ? null : import_types13.default.jsxClosingElement(import_types13.default.jsxIdentifier(tagName)), [], selfClosing);
   const childElements = children.map((child) => {
     return generateJSXElement(child);
   });
@@ -409540,10 +409578,10 @@ function generateJSXElement({ id: id2, tagName, properties, children }) {
 }
 function generateJSXAttribute(name18, info) {
   const valueNode = getPropertyExpression(info, name18);
-  if (import_types12.default.isStringLiteral(valueNode)) {
-    return import_types12.default.jsxAttribute(import_types12.default.jsxIdentifier(name18), valueNode);
+  if (import_types13.default.isStringLiteral(valueNode)) {
+    return import_types13.default.jsxAttribute(import_types13.default.jsxIdentifier(name18), valueNode);
   } else {
-    return import_types12.default.jsxAttribute(import_types12.default.jsxIdentifier(name18), import_types12.default.jsxExpressionContainer(valueNode));
+    return import_types13.default.jsxAttribute(import_types13.default.jsxIdentifier(name18), import_types13.default.jsxExpressionContainer(valueNode));
   }
 }
 function writeNestedProperty({ node, paths, info, isDelete = false }) {
@@ -409572,9 +409610,9 @@ function writeNestedProperty({ node, paths, info, isDelete = false }) {
         if (isDelete) {
           return;
         }
-        const value3 = cleanedPaths.length > 0 ? import_types12.default.objectExpression([]) : import_types12.default.stringLiteral("");
+        const value3 = cleanedPaths.length > 0 ? import_types13.default.objectExpression([]) : import_types13.default.stringLiteral("");
         property = currentNode.pushContainer("properties", [
-          import_types12.default.objectProperty(createObjectKey(currentKey.toString()), value3)
+          import_types13.default.objectProperty(createObjectKey(currentKey.toString()), value3)
         ])[0];
       }
       const value2 = property?.get("value");
@@ -409596,7 +409634,7 @@ function writeNestedProperty({ node, paths, info, isDelete = false }) {
           return;
         }
         if (cleanedPaths.length > 0) {
-          const newObjectNode = import_types12.default.objectExpression([]);
+          const newObjectNode = import_types13.default.objectExpression([]);
           if (currentNode.get("elements").length > 0) {
             if (index === 0) {
               currentNode = currentNode.unshiftContainer("elements", [
@@ -409615,7 +409653,7 @@ function writeNestedProperty({ node, paths, info, isDelete = false }) {
           }
         } else {
           currentNode = currentNode.pushContainer("elements", [
-            import_types12.default.stringLiteral(String(info.value))
+            import_types13.default.stringLiteral(String(info.value))
           ])[0];
         }
       } else {
@@ -409641,7 +409679,7 @@ function getPropertyExpression(info, fieldName = "") {
       if (expression) {
         return expression;
       } else {
-        return import_types12.default.stringLiteral(code);
+        return import_types13.default.stringLiteral(code);
       }
     } else if (type2 === "DIMENSION") {
       const code = parsingRegistry.DIMENSION.toCode(value2, info);
@@ -409649,7 +409687,7 @@ function getPropertyExpression(info, fieldName = "") {
       if (expression) {
         return expression;
       } else {
-        return import_types12.default.stringLiteral(code);
+        return import_types13.default.stringLiteral(code);
       }
     }
     if (type2 === "EVENT") {
@@ -409658,7 +409696,7 @@ function getPropertyExpression(info, fieldName = "") {
       if (expression) {
         return expression;
       } else {
-        return import_types12.default.stringLiteral(code);
+        return import_types13.default.stringLiteral(code);
       }
     }
     if (type2 === "EXPRESSION" && typeof value2 === "string") {
@@ -409666,7 +409704,7 @@ function getPropertyExpression(info, fieldName = "") {
       if (expression) {
         return expression;
       } else {
-        return import_types12.default.stringLiteral(value2);
+        return import_types13.default.stringLiteral(value2);
       }
     } else if (type2 === "COMPUTED" && typeof value2 === "string") {
       let parsed;
@@ -409685,7 +409723,7 @@ function getPropertyExpression(info, fieldName = "") {
         } catch (e) {
           getLogger().error("could not generate computed expression", getErrorMeta(e));
         }
-        const fallbackLiteral = import_types12.default.templateLiteral([import_types12.default.templateElement({ raw: value2, cooked: value2 }, true)], []);
+        const fallbackLiteral = import_types13.default.templateLiteral([import_types13.default.templateElement({ raw: value2, cooked: value2 }, true)], []);
         fallbackLiteral.extra = {
           computedFallback: true,
           error: "Could not generate computed expression"
@@ -409698,10 +409736,10 @@ function getPropertyExpression(info, fieldName = "") {
         const propertyInfo = isPropertyInfo(v) ? v : Property.Any(v);
         return getPropertyExpression(propertyInfo, fieldName);
       });
-      return import_types12.default.arrayExpression(arrayElements);
+      return import_types13.default.arrayExpression(arrayElements);
     }
     if (typeof value2 === "object" && value2 !== null) {
-      return import_types12.default.objectExpression(Object.entries(value2).map(([key2, value3]) => {
+      return import_types13.default.objectExpression(Object.entries(value2).map(([key2, value3]) => {
         let objectValue;
         if (isPropertyInfo(value3)) {
           objectValue = getPropertyExpression(value3, key2);
@@ -409710,38 +409748,38 @@ function getPropertyExpression(info, fieldName = "") {
         } else if (typeof value3 === "object" && value3 !== null) {
           objectValue = getPropertyExpression(Property.Any(value3), key2);
         } else {
-          objectValue = (0, import_types12.valueToNode)(value3);
+          objectValue = (0, import_types13.valueToNode)(value3);
         }
-        return import_types12.default.objectProperty(createObjectKey(key2), objectValue);
+        return import_types13.default.objectProperty(createObjectKey(key2), objectValue);
       }));
     }
     if (typeof value2 === "number") {
-      return import_types12.default.numericLiteral(value2);
+      return import_types13.default.numericLiteral(value2);
     }
     if (typeof value2 === "boolean") {
-      return import_types12.default.booleanLiteral(value2);
+      return import_types13.default.booleanLiteral(value2);
     }
     if (typeof value2 === "string") {
       if (canBeAStringLiteral(value2)) {
-        return import_types12.default.stringLiteral(value2);
+        return import_types13.default.stringLiteral(value2);
       } else {
-        return import_types12.default.templateLiteral([import_types12.default.templateElement({ raw: value2, cooked: value2 }, true)], []);
+        return import_types13.default.templateLiteral([import_types13.default.templateElement({ raw: value2, cooked: value2 }, true)], []);
       }
     }
     if (typeof value2 === "object" || value2 === void 0) {
-      return (0, import_types12.valueToNode)(value2);
+      return (0, import_types13.valueToNode)(value2);
     }
     logger3.warn(`Unsupported value type: ${value2} ${type2}`);
-    return import_types12.default.stringLiteral(String(value2));
+    return import_types13.default.stringLiteral(String(value2));
   } catch (e) {
     logger3.error(`Error generating code value: ${value2} ${type2}`, getErrorMeta(e));
-    return import_types12.default.stringLiteral(String(value2));
+    return import_types13.default.stringLiteral(String(value2));
   }
 }
 
 // ../../../vite-plugin-file-sync/dist/custom-components.js
 init_cjs_shims();
-var import_types13 = __toESM(require_lib7(), 1);
+var import_types14 = __toESM(require_lib7(), 1);
 
 // ../../../vite-plugin-file-sync/dist/plugin-options.js
 init_cjs_shims();
@@ -409766,31 +409804,31 @@ function modifyLegacyCustomComponentImports(path54, tracker) {
   if (!specifier)
     return;
   tracker.add(specifier.local.name);
-  path54.get("source").replaceWith(import_types13.default.stringLiteral(source2.replace(customFolder, `${customFolder}dist/`)));
+  path54.get("source").replaceWith(import_types14.default.stringLiteral(source2.replace(customFolder, `${customFolder}dist/`)));
   const program = path54.scope.getProgramParent()?.path;
   const existingImport = program?.get("body").find((p) => p.isImportDeclaration() && p.node.source.value === "virtual:legacy-wrapper");
   if (existingImport) {
     return;
   }
-  program?.unshiftContainer("body", import_types13.default.importDeclaration([
-    import_types13.default.importSpecifier(import_types13.default.identifier("wrapCustomComponent"), import_types13.default.identifier("wrapCustomComponent"))
-  ], import_types13.default.stringLiteral("virtual:legacy-wrapper")));
+  program?.unshiftContainer("body", import_types14.default.importDeclaration([
+    import_types14.default.importSpecifier(import_types14.default.identifier("wrapCustomComponent"), import_types14.default.identifier("wrapCustomComponent"))
+  ], import_types14.default.stringLiteral("virtual:legacy-wrapper")));
 }
 function modifyLegacyCustomComponentElements(path54, tracker) {
   const elementName = getTagName(path54.node.openingElement.name);
   if (elementName && tracker.has(elementName)) {
-    path54.get("openingElement").get("name").replaceWith(import_types13.default.jsxIdentifier(`Wrapped${elementName}`));
+    path54.get("openingElement").get("name").replaceWith(import_types14.default.jsxIdentifier(`Wrapped${elementName}`));
     const closingElement = path54.get("closingElement");
     if (closingElement) {
-      closingElement.replaceWith(import_types13.default.jsxClosingElement(import_types13.default.jsxIdentifier(`Wrapped${elementName}`)));
+      closingElement.replaceWith(import_types14.default.jsxClosingElement(import_types14.default.jsxIdentifier(`Wrapped${elementName}`)));
     }
   }
 }
 function addLegacyCustomComponentVariables(path54, tracker) {
   tracker.forEach((name18) => {
-    path54.unshiftContainer("body", import_types13.default.variableDeclaration("const", [
-      import_types13.default.variableDeclarator(import_types13.default.identifier(`Wrapped${name18}`), import_types13.default.callExpression(import_types13.default.identifier("wrapCustomComponent"), [
-        import_types13.default.identifier(name18)
+    path54.unshiftContainer("body", import_types14.default.variableDeclaration("const", [
+      import_types14.default.variableDeclarator(import_types14.default.identifier(`Wrapped${name18}`), import_types14.default.callExpression(import_types14.default.identifier("wrapCustomComponent"), [
+        import_types14.default.identifier(name18)
       ]))
     ]));
   });
@@ -409958,7 +409996,7 @@ function getPageName(file) {
 init_cjs_shims();
 var import_core2 = __toESM(require_lib36(), 1);
 var import_parser4 = __toESM(require_lib9(), 1);
-var import_types16 = __toESM(require_lib7(), 1);
+var import_types17 = __toESM(require_lib7(), 1);
 var t6 = __toESM(require_lib7(), 1);
 
 // ../../../vite-plugin-file-sync/dist/parsing/entity/index.js
@@ -410237,9 +410275,9 @@ function updateEntityNode(node, updates, entityId) {
       return property2.isObjectProperty() && property2.get("key").isIdentifier() && getIdentiferName(property2.node.key) === key2;
     });
     if (!property) {
-      configObject.pushContainer("properties", (0, import_types16.objectProperty)((0, import_types16.identifier)(key2), getPropertyExpression(info)));
+      configObject.pushContainer("properties", (0, import_types17.objectProperty)((0, import_types17.identifier)(key2), getPropertyExpression(info)));
     } else {
-      property.replaceWith((0, import_types16.objectProperty)((0, import_types16.identifier)(key2), getPropertyExpression(info)));
+      property.replaceWith((0, import_types17.objectProperty)((0, import_types17.identifier)(key2), getPropertyExpression(info)));
     }
     if (info.type in REQUIRED_IMPORTS_BY_PROPERTY_TYPE) {
       const requiredImports = REQUIRED_IMPORTS_BY_PROPERTY_TYPE[info.type];
@@ -410261,7 +410299,7 @@ function fromEntityToNode(entity) {
     throw new Error("Invalid entity ast definition");
   }
   return {
-    entity: (0, import_types16.objectProperty)((0, import_types16.identifier)(entity.name), parsedEntity.program.body[0].expression),
+    entity: (0, import_types17.objectProperty)((0, import_types17.identifier)(entity.name), parsedEntity.program.body[0].expression),
     imports
   };
 }
@@ -410348,9 +410386,9 @@ function updateScopeUsages(scopeUsages, entityNames) {
             continue;
           const id2 = declaration.get("id");
           if (id2.isObjectPattern()) {
-            const newProperties = entityNames.map((name18) => (0, import_types16.objectProperty)(
-              (0, import_types16.identifier)(name18),
-              (0, import_types16.identifier)(name18),
+            const newProperties = entityNames.map((name18) => (0, import_types17.objectProperty)(
+              (0, import_types17.identifier)(name18),
+              (0, import_types17.identifier)(name18),
               false,
               // computed
               true
@@ -410381,14 +410419,14 @@ function findEnclosingComponent(elementPath) {
 }
 function addScopeDestructuring(componentPath, scopeDefinition) {
   const uniqueEntityNames = [...new Set(scopeDefinition.entityNames)];
-  const destructuringDeclaration = (0, import_types16.variableDeclaration)("const", [
-    (0, import_types16.variableDeclarator)((0, import_types16.objectPattern)(uniqueEntityNames.map((name18) => (0, import_types16.objectProperty)(
-      (0, import_types16.identifier)(name18),
-      (0, import_types16.identifier)(name18),
+  const destructuringDeclaration = (0, import_types17.variableDeclaration)("const", [
+    (0, import_types17.variableDeclarator)((0, import_types17.objectPattern)(uniqueEntityNames.map((name18) => (0, import_types17.objectProperty)(
+      (0, import_types17.identifier)(name18),
+      (0, import_types17.identifier)(name18),
       false,
       // computed
       true
-    ))), (0, import_types16.identifier)(scopeDefinition.name))
+    ))), (0, import_types17.identifier)(scopeDefinition.name))
   ]);
   let addedNodePath = null;
   if (componentPath.isFunctionDeclaration() || componentPath.isFunctionExpression() || componentPath.isArrowFunctionExpression()) {
@@ -410403,8 +410441,8 @@ function addScopeDestructuring(componentPath, scopeDefinition) {
       const [newPath] = body.unshiftContainer("body", destructuringDeclaration);
       addedNodePath = newPath;
     } else {
-      const retStatement = (0, import_types16.returnStatement)(body.node);
-      componentPath.node.body = (0, import_types16.blockStatement)([
+      const retStatement = (0, import_types17.returnStatement)(body.node);
+      componentPath.node.body = (0, import_types17.blockStatement)([
         destructuringDeclaration,
         retStatement
       ]);
@@ -410662,15 +410700,15 @@ function updateDestructuredEntitiesParam(scopeDef) {
     }
     return;
   }
-  const entitiesDestructuring = (0, import_types16.objectPattern)(uniqueEntityNames.map((name18) => (0, import_types16.objectProperty)(
-    (0, import_types16.identifier)(name18),
-    (0, import_types16.identifier)(name18),
+  const entitiesDestructuring = (0, import_types17.objectPattern)(uniqueEntityNames.map((name18) => (0, import_types17.objectProperty)(
+    (0, import_types17.identifier)(name18),
+    (0, import_types17.identifier)(name18),
     false,
     // computed
     true
   )));
-  const entitiesProperty = (0, import_types16.objectProperty)((0, import_types16.identifier)("entities"), entitiesDestructuring);
-  const mainDestructuringPattern = (0, import_types16.objectPattern)([entitiesProperty]);
+  const entitiesProperty = (0, import_types17.objectProperty)((0, import_types17.identifier)("entities"), entitiesDestructuring);
+  const mainDestructuringPattern = (0, import_types17.objectPattern)([entitiesProperty]);
   if (scopeDef.scopeFunction.node.params.length > 0) {
     const firstParam = scopeDef.scopeFunction.get("params")[0];
     if (firstParam && firstParam.isObjectPattern()) {
@@ -410688,7 +410726,7 @@ function updateDestructuredEntitiesParam(scopeDef) {
 
 // ../../../vite-plugin-file-sync/dist/rename-manager.js
 init_cjs_shims();
-var import_types19 = __toESM(require_lib7(), 1);
+var import_types20 = __toESM(require_lib7(), 1);
 
 // ../../../vite-plugin-file-sync/dist/refactor/blocks.js
 init_cjs_shims();
@@ -410902,7 +410940,7 @@ function getSetControlBlockExpressions2(block) {
 
 // ../../../vite-plugin-file-sync/dist/refactor/javascript.js
 init_cjs_shims();
-var import_types18 = __toESM(require_lib7(), 1);
+var import_types19 = __toESM(require_lib7(), 1);
 var import_shared30 = __toESM(require_dist2(), 1);
 function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, checkFunctionBinding = false }) {
   const functionVisitor = checkFunctionBinding ? {
@@ -410917,7 +410955,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
               continue;
             const keyName = getIdentiferName(property.get("key").node);
             if (keyName === oldName && !property.node.shorthand) {
-              property.get("key").replaceInline(import_types18.default.identifier(newName));
+              property.get("key").replaceInline(import_types19.default.identifier(newName));
               path54.skip();
               return;
             }
@@ -410934,8 +410972,8 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
               continue;
             const keyName = getIdentiferName(property.get("key").node);
             if (keyName === oldName) {
-              property.get("key").replaceInline(import_types18.default.identifier(newName));
-              property.get("value").replaceInline(import_types18.default.identifier(newName));
+              property.get("key").replaceInline(import_types19.default.identifier(newName));
+              property.get("value").replaceInline(import_types19.default.identifier(newName));
               property.set("shorthand", true);
             }
           }
@@ -410961,7 +410999,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
               return;
             }
             if (property.isIdentifier() && property.node.name === oldName) {
-              property.replaceInline(import_types18.default.identifier(newName));
+              property.replaceInline(import_types19.default.identifier(newName));
               path54.skip();
             }
           }
@@ -410977,7 +411015,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
     if (path54.node.computed) {
       const property = path54.get("property");
       if (property.isIdentifier() && property.node.name === oldName) {
-        property.replaceInline(import_types18.default.identifier(newName));
+        property.replaceInline(import_types19.default.identifier(newName));
         path54.skip();
         return;
       }
@@ -411007,7 +411045,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
     if (parentBinding) {
       for (let i2 = 0; i2 < components2.length - 1; i2++) {
         if (components2[i2]?.name === parentBinding && components2[i2 + 1]?.name === oldName) {
-          components2[i2 + 1]?.path.replaceInline(import_types18.default.identifier(newName));
+          components2[i2 + 1]?.path.replaceInline(import_types19.default.identifier(newName));
           path54.skip();
           return;
         }
@@ -411015,7 +411053,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
     } else {
       for (const component of components2) {
         if (component.name === oldName) {
-          component.path.replaceInline(import_types18.default.identifier(newName));
+          component.path.replaceInline(import_types19.default.identifier(newName));
           path54.skip();
           return;
         }
@@ -411033,7 +411071,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
     Identifier(path54) {
       if (path54.parentPath.isArrayExpression()) {
         if (path54.node.name === oldName) {
-          path54.replaceInline(import_types18.default.identifier(newName));
+          path54.replaceInline(import_types19.default.identifier(newName));
         }
       }
     }
@@ -411042,7 +411080,7 @@ function renameEntityInJavascript({ oldName, newName, nodePath, parentBinding, c
 function deleteEntityInJavascriptArray({ name: name18, nodePath }) {
   nodePath.traverse({
     ArrayExpression(path54) {
-      path54.node.elements = path54.node.elements.filter((element) => !import_types18.default.isIdentifier(element) || element.name !== name18);
+      path54.node.elements = path54.node.elements.filter((element) => !import_types19.default.isIdentifier(element) || element.name !== name18);
       path54.skip();
     }
   });
@@ -411064,40 +411102,40 @@ var RenameManager = class {
       oldName = extractNameFromBindAttribute(bindAttribute.node);
       if (oldName) {
         const bindValue = bindAttribute.node.value;
-        if (bindValue && import_types19.default.isJSXExpressionContainer(bindValue)) {
+        if (bindValue && import_types20.default.isJSXExpressionContainer(bindValue)) {
           const expression = bindValue.expression;
-          if (import_types19.default.isIdentifier(expression)) {
-            bindAttribute.node.value = import_types19.default.jsxExpressionContainer(import_types19.default.identifier(newName));
-          } else if (import_types19.default.isMemberExpression(expression)) {
+          if (import_types20.default.isIdentifier(expression)) {
+            bindAttribute.node.value = import_types20.default.jsxExpressionContainer(import_types20.default.identifier(newName));
+          } else if (import_types20.default.isMemberExpression(expression)) {
             const parentParts = [];
             let current = expression;
-            while (import_types19.default.isMemberExpression(current)) {
-              if (import_types19.default.isIdentifier(current.property)) {
+            while (import_types20.default.isMemberExpression(current)) {
+              if (import_types20.default.isIdentifier(current.property)) {
                 parentParts.unshift(current.property.name);
               }
               current = current.object;
             }
-            if (import_types19.default.isIdentifier(current)) {
+            if (import_types20.default.isIdentifier(current)) {
               parentParts.unshift(current.name);
             }
-            const newExpression = import_types19.default.cloneNode(expression, true);
+            const newExpression = import_types20.default.cloneNode(expression, true);
             let finalMember = newExpression;
-            while (import_types19.default.isMemberExpression(finalMember) && import_types19.default.isMemberExpression(finalMember.property)) {
+            while (import_types20.default.isMemberExpression(finalMember) && import_types20.default.isMemberExpression(finalMember.property)) {
               finalMember = finalMember.property;
             }
-            if (import_types19.default.isMemberExpression(finalMember) && import_types19.default.isIdentifier(finalMember.property)) {
-              finalMember.property = import_types19.default.identifier(newName);
+            if (import_types20.default.isMemberExpression(finalMember) && import_types20.default.isIdentifier(finalMember.property)) {
+              finalMember.property = import_types20.default.identifier(newName);
             }
-            bindAttribute.node.value = import_types19.default.jsxExpressionContainer(newExpression);
+            bindAttribute.node.value = import_types20.default.jsxExpressionContainer(newExpression);
           }
         }
       }
     } else if (!nameAttribute) {
-      widgetNode.pushContainer("attributes", import_types19.default.jsxAttribute(import_types19.default.jsxIdentifier("bind"), import_types19.default.jsxExpressionContainer(import_types19.default.identifier(newName))));
+      widgetNode.pushContainer("attributes", import_types20.default.jsxAttribute(import_types20.default.jsxIdentifier("bind"), import_types20.default.jsxExpressionContainer(import_types20.default.identifier(newName))));
       return;
     } else {
       oldName = nameAttribute.node.value ? nodeToValue(nameAttribute.node.value) : null;
-      widgetNode.pushContainer("attributes", import_types19.default.jsxAttribute(import_types19.default.jsxIdentifier("bind"), import_types19.default.jsxExpressionContainer(import_types19.default.identifier(newName))));
+      widgetNode.pushContainer("attributes", import_types20.default.jsxAttribute(import_types20.default.jsxIdentifier("bind"), import_types20.default.jsxExpressionContainer(import_types20.default.identifier(newName))));
       nameAttribute.remove();
     }
     if (!oldName) {
@@ -411146,7 +411184,7 @@ var RenameManager = class {
         });
       },
       ArrayExpression(path54) {
-        if (import_types19.default.isCallExpression(path54.parentPath.node)) {
+        if (import_types20.default.isCallExpression(path54.parentPath.node)) {
           renameEntityInJavascript({
             oldName,
             newName,
@@ -411201,57 +411239,57 @@ var RenameManager = class {
 // ../../../vite-plugin-file-sync/dist/source-tracker.js
 init_cjs_shims();
 var import_parser5 = __toESM(require_lib9(), 1);
-var import_types23 = __toESM(require_lib7(), 1);
+var import_types24 = __toESM(require_lib7(), 1);
 import path26 from "node:path";
 
 // ../../../vite-plugin-file-sync/dist/parsing/theme.js
 init_cjs_shims();
-var import_types20 = __toESM(require_lib7(), 1);
+var import_types21 = __toESM(require_lib7(), 1);
 function getKeyValue(key2) {
-  if (import_types20.default.isStringLiteral(key2.node)) {
+  if (import_types21.default.isStringLiteral(key2.node)) {
     return key2.node.value;
-  } else if (import_types20.default.isIdentifier(key2.node)) {
+  } else if (import_types21.default.isIdentifier(key2.node)) {
     return key2.node.name;
   }
   throw new Error(`Unsupported key type: ${key2.type}`);
 }
 function getKeyAst(key2) {
-  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key2) ? import_types20.default.identifier(key2) : import_types20.default.stringLiteral(key2);
+  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key2) ? import_types21.default.identifier(key2) : import_types21.default.stringLiteral(key2);
 }
 function createAstFromValue(value2) {
   if (typeof value2 === "object" && value2 !== null) {
     const properties = [];
     for (const [key2, val] of Object.entries(value2)) {
-      properties.push(import_types20.default.objectProperty(getKeyAst(key2), createAstFromValue(val)));
+      properties.push(import_types21.default.objectProperty(getKeyAst(key2), createAstFromValue(val)));
     }
-    return import_types20.default.objectExpression(properties);
+    return import_types21.default.objectExpression(properties);
   } else if (typeof value2 === "string") {
-    return import_types20.default.stringLiteral(value2);
+    return import_types21.default.stringLiteral(value2);
   } else if (typeof value2 === "number") {
-    return import_types20.default.numericLiteral(value2);
+    return import_types21.default.numericLiteral(value2);
   } else if (typeof value2 === "boolean") {
-    return import_types20.default.booleanLiteral(value2);
+    return import_types21.default.booleanLiteral(value2);
   } else if (value2 === null) {
-    return import_types20.default.nullLiteral();
+    return import_types21.default.nullLiteral();
   }
   throw new Error(`Unsupported value type: ${typeof value2}`);
 }
 function mergeThemeUpdates(nodePath, updates) {
-  if (!import_types20.default.isObjectExpression(nodePath.node)) {
+  if (!import_types21.default.isObjectExpression(nodePath.node)) {
     throw new Error("Current node must be an object expression");
   }
   Object.keys(updates).forEach((updatedKey) => {
     const propertyNodePath = nodePath.get("properties").find((prop) => getKeyValue(prop.get("key")) === updatedKey);
     const currentValue = propertyNodePath?.get("value");
     if (!currentValue) {
-      const newProperty = import_types20.default.objectProperty(getKeyAst(updatedKey), createAstFromValue(updates[updatedKey]));
+      const newProperty = import_types21.default.objectProperty(getKeyAst(updatedKey), createAstFromValue(updates[updatedKey]));
       nodePath.node.properties.push(newProperty);
       return;
     }
     if (Array.isArray(currentValue)) {
       throw new Error("Array values are not supported yet");
     }
-    if (currentValue && import_types20.default.isObjectExpression(currentValue.node)) {
+    if (currentValue && import_types21.default.isObjectExpression(currentValue.node)) {
       mergeThemeUpdates(currentValue, updates[updatedKey]);
       return;
     }
@@ -411262,7 +411300,7 @@ var updateThemeAst = (ast, updates) => {
   traverse(ast, {
     ExportDefaultDeclaration(path54) {
       const themeObject = path54.get("declaration").get("expression");
-      if (!(import_types20.default.isTSSatisfiesExpression(path54.node.declaration) && import_types20.default.isTSTypeReference(path54.node.declaration.typeAnnotation) && import_types20.default.isIdentifier(path54.node.declaration.typeAnnotation.typeName) && path54.node.declaration.typeAnnotation.typeName.name === "AppTheme" && !Array.isArray(themeObject) && import_types20.default.isObjectExpression(themeObject.node))) {
+      if (!(import_types21.default.isTSSatisfiesExpression(path54.node.declaration) && import_types21.default.isTSTypeReference(path54.node.declaration.typeAnnotation) && import_types21.default.isIdentifier(path54.node.declaration.typeAnnotation.typeName) && path54.node.declaration.typeAnnotation.typeName.name === "AppTheme" && !Array.isArray(themeObject) && import_types21.default.isObjectExpression(themeObject.node))) {
         throw new Error(`Could not update theme because the default export is not an object expression. We currently only support exporting the theme as a default export which should satisfy the Theme type from @superblocks/library. Example:
 
             import type { Theme } from "@superblocksteam/library";
@@ -411278,7 +411316,7 @@ var updateThemeAst = (ast, updates) => {
 
 // ../../../vite-plugin-file-sync/dist/sb-scope-manager.js
 init_cjs_shims();
-var import_types21 = __toESM(require_lib7(), 1);
+var import_types22 = __toESM(require_lib7(), 1);
 import path25 from "node:path";
 var import_shared31 = __toESM(require_dist2(), 1);
 var SbScopeManager = class extends import_shared31.TracedEventEmitter {
@@ -411521,7 +411559,7 @@ var SbScopeManager = class extends import_shared31.TracedEventEmitter {
   updateScopeEntity({ entityId, updates }) {
     const entityNode = this.sourceTracker.getElementToLocation(entityId);
     const filePath = this.sourceTracker.getElementToFilePath(entityId);
-    if (!entityNode || !(0, import_types21.isObjectProperty)(entityNode.node)) {
+    if (!entityNode || !(0, import_types22.isObjectProperty)(entityNode.node)) {
       throw new Error("Entity to update not found " + entityId);
     }
     if (!filePath) {
@@ -411559,7 +411597,7 @@ var SbScopeManager = class extends import_shared31.TracedEventEmitter {
     }
     const entityName = (entityNode?.node?.key).name;
     const filePath = this.sourceTracker.getElementToFilePath(entityId);
-    if (!entityNode || !(0, import_types21.isObjectProperty)(entityNode.node)) {
+    if (!entityNode || !(0, import_types22.isObjectProperty)(entityNode.node)) {
       throw new Error("Entity to delete not found" + entityId);
     }
     if (!filePath) {
@@ -411597,14 +411635,14 @@ var SbScopeManager = class extends import_shared31.TracedEventEmitter {
       };
     }
     const entityNode = this.sourceTracker.getElementToLocation(entityId);
-    if (!entityNode || !(0, import_types21.isObjectProperty)(entityNode.node)) {
+    if (!entityNode || !(0, import_types22.isObjectProperty)(entityNode.node)) {
       return {
         changedFiles: []
       };
     }
     const key2 = entityNode.get("key");
     if (key2) {
-      key2.replaceWith(import_types21.default.identifier(newName));
+      key2.replaceWith(import_types22.default.identifier(newName));
     }
     scopeDef.entityNames = scopeDef.entityNames.map((name18) => name18 === oldName ? newName : name18);
     const newEntityId = getStableEntityId(scopeDef.id, newName);
@@ -411637,7 +411675,7 @@ var SbScopeManager = class extends import_shared31.TracedEventEmitter {
     if (!scopeDef.scopeComponents) {
       throw new Error("Scope components not found, even though we added type parameters");
     }
-    const newProperty = import_types21.default.tsPropertySignature(import_types21.default.identifier(componentName), import_types21.default.tsTypeAnnotation(import_types21.default.tsAnyKeyword()));
+    const newProperty = import_types22.default.tsPropertySignature(import_types22.default.identifier(componentName), import_types22.default.tsTypeAnnotation(import_types22.default.tsAnyKeyword()));
     const newComponents = scopeDef.scopeComponents.pushContainer("members", newProperty);
     scopeDef.entityNames.push(componentName);
     const updatedFiles = this.updateScopeUsages(scopeDef.name, scopeDef.entityNames);
@@ -411658,7 +411696,7 @@ var SbScopeManager = class extends import_shared31.TracedEventEmitter {
     const componentTypeId = getStableEntityId(scopeDef.id, componentName);
     const componentNode = this.sourceTracker.getElementToLocation(componentTypeId);
     const filePath = this.sourceTracker.getElementToFilePath(componentTypeId);
-    if (!componentNode || !import_types21.default.isTSPropertySignature(componentNode.node) || !filePath) {
+    if (!componentNode || !import_types22.default.isTSPropertySignature(componentNode.node) || !filePath) {
       return [];
     }
     componentNode.remove();
@@ -411692,7 +411730,7 @@ var SbScopeManager = class extends import_shared31.TracedEventEmitter {
     }
     const key2 = componentNode.get("key");
     if (key2) {
-      key2.replaceWith(import_types21.default.identifier(newName));
+      key2.replaceWith(import_types22.default.identifier(newName));
     }
     scopeDef.entityNames = scopeDef.entityNames.map((name18) => name18 === oldName ? newName : name18);
     delete scopeDef.scopeNameToEntityId[oldName];
@@ -412385,7 +412423,7 @@ var SourceTracker = class {
     }
     if (!parentAttr && parent) {
       const newAttr = openingTag.pushContainer("attributes", [
-        import_types23.default.jsxAttribute(import_types23.default.jsxIdentifier(parent), import_types23.default.jSXExpressionContainer(import_types23.default.objectExpression([])))
+        import_types24.default.jsxAttribute(import_types24.default.jsxIdentifier(parent), import_types24.default.jSXExpressionContainer(import_types24.default.objectExpression([])))
       ]);
       parentAttr = newAttr[0];
     }
@@ -412409,7 +412447,7 @@ var SourceTracker = class {
     let attr = openingTag.get("attributes").find((attr2) => attr2.isJSXAttribute() && attr2.node.name.name === property);
     if (!attr) {
       attr = openingTag.pushContainer("attributes", [
-        import_types23.default.jsxAttribute(import_types23.default.jsxIdentifier(property), import_types23.default.stringLiteral(""))
+        import_types24.default.jsxAttribute(import_types24.default.jsxIdentifier(property), import_types24.default.stringLiteral(""))
       ])[0];
     }
     const value2 = info.value;
@@ -412436,7 +412474,7 @@ var SourceTracker = class {
     const openingElement = element.get("openingElement");
     if (openingElement.node.selfClosing) {
       openingElement.node.selfClosing = false;
-      element.node.closingElement = import_types23.default.jsxClosingElement(import_types23.default.jsxIdentifier(getTagName(openingElement.node.name) ?? ""));
+      element.node.closingElement = import_types24.default.jsxClosingElement(import_types24.default.jsxIdentifier(getTagName(openingElement.node.name) ?? ""));
     }
   };
   setProperty = async ({ source: source2, property, info }) => {
@@ -412610,7 +412648,7 @@ var SourceTracker = class {
     }
     const attributes = pageElement.get("openingElement").get("attributes");
     const attribute = attributes?.find((attr) => attr.isJSXAttribute() && attr.node.name.name === "name");
-    attribute?.replaceWith(import_types23.default.jsxAttribute(import_types23.default.jsxIdentifier("name"), import_types23.default.stringLiteral(newName)));
+    attribute?.replaceWith(import_types24.default.jsxAttribute(import_types24.default.jsxIdentifier("name"), import_types24.default.stringLiteral(newName)));
     this.changedFiles.add(filePath);
   };
   getAddElementImports = ({ properties, children }) => {
@@ -413004,48 +413042,54 @@ var FileSyncManager = class extends import_shared32.TracedEventEmitter {
     }
     return this.sourceTracker.handleNonVisualChangeByDeletingIds(path54, content2);
   }
-  async getFileWithIds(path54) {
+  async getFileWithIds(filePath) {
     const logger3 = getLogger();
     if (!this.sourceTracker) {
       throw new Error("Source tracker not initialized");
     }
     const files = this.sourceTracker.getCurrentFiles();
-    if (!files[path54]) {
-      throw new Error("File not found in source tracker " + path54);
+    if (!files[filePath]) {
+      throw new Error("File not found in source tracker " + filePath);
     }
-    const ast = files[path54].ast;
+    const ast = files[filePath].ast;
     if (!ast) {
-      throw new Error("No AST found for file in source tracker " + path54);
+      throw new Error("No AST found for file in source tracker " + filePath);
     }
     const clonedAst = await (0, import_core3.transformFromAstAsync)(ast, void 0, {
       ast: true
     });
     if (!clonedAst?.ast) {
-      throw new Error("Failed to clone AST for file " + path54);
+      throw new Error("Failed to clone AST for file " + filePath);
     }
+    const componentsManager = ComponentsManager.getInstance();
     const processedTransactions = this.getProcessedTransactionsWithNonce();
     const customImports = /* @__PURE__ */ new Set();
-    let customBuildTraversal = {};
-    if (isCustomBuildEnabled()) {
-      customBuildTraversal = {
-        ImportDeclaration(path55) {
-          modifyLegacyCustomComponentImports(path55, customImports);
-        },
-        JSXElement(path55) {
-          modifyLegacyCustomComponentElements(path55, customImports);
-        },
-        Program: {
-          // we want to write the wrapped custom elements as local variables to the file
-          exit(path55) {
-            addLegacyCustomComponentVariables(path55, customImports);
+    traverse(clonedAst.ast, {
+      Program: {
+        exit(nodePath) {
+          if (isCustomBuildEnabled()) {
+            addLegacyCustomComponentVariables(nodePath, customImports);
+          }
+          const name18 = componentsManager.getComponentName(filePath);
+          if (name18) {
+            nodePath.pushContainer("body", import_types26.default.variableDeclaration("const", [
+              import_types26.default.variableDeclarator(import_types26.default.identifier("componentName"), import_types26.default.stringLiteral(name18))
+            ]));
           }
         }
-      };
-    }
-    traverse(clonedAst.ast, {
-      ...customBuildTraversal,
-      ReturnStatement(path55) {
-        const argument = path55.get("argument");
+      },
+      ImportDeclaration(path54) {
+        if (isCustomBuildEnabled()) {
+          modifyLegacyCustomComponentImports(path54, customImports);
+        }
+      },
+      JSXElement(path54) {
+        if (isCustomBuildEnabled()) {
+          modifyLegacyCustomComponentElements(path54, customImports);
+        }
+      },
+      ReturnStatement(path54) {
+        const argument = path54.get("argument");
         if (!argument.isJSXElement()) {
           return;
         }
@@ -413060,22 +413104,22 @@ var FileSyncManager = class extends import_shared32.TracedEventEmitter {
           __info: true
         }));
       },
-      JSXOpeningElement(path55) {
-        const elementId = getSbElementId(path55.node);
+      JSXOpeningElement(path54) {
+        const elementId = getSbElementId(path54.node);
         if (elementId) {
-          path55.pushContainer("attributes", makeJSXAttribute(WIDGET_SOURCE_ID_ATTRIBUTE, elementId));
+          path54.pushContainer("attributes", makeJSXAttribute(WIDGET_SOURCE_ID_ATTRIBUTE, elementId));
         }
       },
-      ObjectProperty(path55) {
-        const elementId = getSbElementId(path55.node);
+      ObjectProperty(path54) {
+        const elementId = getSbElementId(path54.node);
         if (!elementId) {
-          path55.skip();
+          path54.skip();
           return;
         }
-        path55.traverse({
-          ObjectExpression(path56) {
-            path56.pushContainer("properties", import_types25.default.objectProperty(import_types25.default.identifier("id"), import_types25.default.stringLiteral(elementId)));
-            path56.skip();
+        path54.traverse({
+          ObjectExpression(path55) {
+            path55.pushContainer("properties", import_types26.default.objectProperty(import_types26.default.identifier("id"), import_types26.default.stringLiteral(elementId)));
+            path55.skip();
           }
         });
       }
@@ -414664,7 +414708,7 @@ var fileSyncVitePlugin = (pluginParams, options9) => {
           });
         });
       });
-      componentsManager.on("registeredComponentChanged", (name18, oldName) => {
+      componentsManager.on("registeredComponentChanged", async (name18, oldName) => {
         triggerRegisteredComponentUpdate();
         if (oldName) {
           socketManager.callLibraryClients(async (socket) => {
@@ -414702,6 +414746,13 @@ var fileSyncVitePlugin = (pluginParams, options9) => {
           if (!fileContents) {
             throw new Error("File not found in file sync manager " + id2);
           }
+          if (componentsManager.isCustomComponentFile(id2)) {
+            const code2 = getComponentSourceCode(fileContents);
+            return {
+              code: code2,
+              map: null
+            };
+          }
           return {
             code: fileContents,
             map: null
@@ -418477,7 +418528,7 @@ var import_util28 = __toESM(require_dist3(), 1);
 // ../sdk/package.json
 var package_default = {
   name: "@superblocksteam/sdk",
-  version: "2.0.3",
+  version: "2.0.6-next.0",
   type: "module",
   description: "Superblocks JS SDK",
   homepage: "https://www.superblocks.com",
@@ -418519,8 +418570,8 @@ var package_default = {
     "@rollup/wasm-node": "^4.35.0",
     "@superblocksteam/bucketeer-sdk": "0.5.0",
     "@superblocksteam/shared": "0.9160.0",
-    "@superblocksteam/util": "2.0.3",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.3",
+    "@superblocksteam/util": "2.0.6-next.0",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.6-next.0",
     "@vitejs/plugin-react": "^4.3.4",
     axios: "^1.4.0",
     chokidar: "^4.0.3",
@@ -426006,7 +426057,7 @@ async function startVite({ app, httpServer: httpServer2, root: root2, mode, port
   };
   const isCustomBuildEnabled2 = await isCustomComponentsEnabled();
   const customFolder = path36.join(root2, "custom");
-  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3";
+  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.6-next.0";
   const env3 = loadEnv(mode, root2, "");
   const hmrPort = await getFreePort();
   const hmrOptions = {

package/oclif.manifest.json

@@ -585,5 +585,5 @@
       "strict": true
     }
   },
-  "version": "2.0.3"
+  "version": "2.0.6-next.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "2.0.3",
+  "version": "2.0.6-next.0",
   "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",
+    "@superblocksteam/sdk": "2.0.6-next.0",
     "@superblocksteam/shared": "0.9160.0",
-    "@superblocksteam/util": "2.0.3",
+    "@superblocksteam/util": "2.0.6-next.0",
     "@types/babel__core": "^7.20.0",
     "@types/chai": "^4",
     "@types/fs-extra": "^11.0.1",