@superblocksteam/cli 2.0.1-next.0 → 2.0.1-next.1

package/README.md

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

package/dist/{generated-OEJDZY6Q.js → generated-B26UL5I4.js}

@@ -47,7 +47,7 @@ var content5 = '# Event handlers with SbEventFlow\n\nRather than using standard
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-forms.js
 init_cjs_shims();
-var content6 = '### Form Layouts in Superblocks\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((event) => {\n            // Populate form fields with the selected row data\n            EditOrderCustomerName.text = event.row.customerName;\n            EditOrderCustomerEmail.text = event.row.customerEmail;\n            EditOrderAmount.text = event.row.amount;\n            EditOrderStatus.metaSelectedOptionValue = event.row.status;\n            EditOrderNotes.text = event.row.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 `s.row.{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 content6 = '### Form Layouts in Superblocks\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();
@@ -177,7 +177,7 @@ var content30 = '## 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 content31 = '## 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  // currentEntity represents the context where the event flow is executed:\n  // - If run on a component event handler, currentEntity is the component\n  // - If run on an API, currentEntity is the API\n  // - etc.\n  // NOTE: The actual handler functions should be written in vanilla JavaScript, not TypeScript\n  // Arrow functions signature:\n  static runJS(handler: (event?: Record<string, any>) => void): SbEventFlow;\n  runJS(handler: (event?: Record<string, any>) => void): this;\n\n  // Function expressions/declarations signature:\n  static runJS(\n    handler: (currentEntity: any, event?: Record<string, any>) => void,\n  ): SbEventFlow;\n  runJS(\n    handler: (currentEntity: any, event?: Record<string, any>) => void,\n  ): 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 content31 = '## 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';
 export {
   library_components_exports as library_components,
   library_typedefs_exports as library_typedefs,