@superblocksteam/vite-plugin-file-sync 2.0.8-next.19 → 2.0.8-next.2

package/dist/ai-service/prompts/generated/subprompts/superblocks-data-filtering.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "# Data Filtering Best Practices\n\n**\uD83D\uDEA8 CRITICAL: When implementing data filtering, remember that computed cannot be used as React children.** All dynamic filtered content must be passed to component properties like `tableData={}`, `text={}`, etc. Never use `{computed(...)}` as children.\n\nWhen filtering data from APIs or state variables, follow these patterns to keep component properties clean and maintainable:\n\n## When to Use Reactive State Variables for Filtering\n\n**Use reactive state variables with `defaultValue` for complex filtering when:**\n\n- The filtering logic is more than 1-2 lines of code\n- Multiple conditions need to be evaluated\n- Multiple form controls affect the same filtered dataset\n- The logic would make component properties hard to read in the visual editor\n\n**Keep simple filtering in component properties when:**\n\n- The filtering is 1-2 lines of basic logic\n- It's a straightforward filter operation\n- Only one control affects the filtering\n\n## Good Pattern: Reactive State Variables with defaultValue\n\n```tsx\n// First, define component bindings in scope.ts\nexport const Page1Scope = createScope<{\n  OrderSearchInput: any;\n  StatusFilterDropdown: any;\n  DateFromPicker: any;\n  DateToPicker: any;\n}>(\n  ({ entities: { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, getOrdersApi } }) => ({\n    getOrdersApi: SbApi({}),\n    // Define reactive state variable with complex filtering logic in defaultValue\n    filteredOrdersVar: StateVar({\n      defaultValue: computed(() => {\n        return getOrdersApi.response?.filter(order => {\n          const matchesSearch = OrderSearchInput.value === '' ||\n            order.customerName.toLowerCase().includes(OrderSearchInput.value.toLowerCase()) ||\n            order.id.toLowerCase().includes(OrderSearchInput.value.toLowerCase());\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            order.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesDateRange = !DateFromPicker.value || !DateToPicker.value ||\n            (new Date(order.orderDate) >= new Date(DateFromPicker.value) &&\n             new Date(order.orderDate) <= new Date(DateToPicker.value));\n          return matchesSearch && matchesStatus && matchesDateRange;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use bind properties\nconst { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, filteredOrdersVar } = Page1;\n\n// Clean component properties - just reference the reactive state variable\n<Table tableData={computed(() => filteredOrdersVar.value)} />\n\n// Form controls use bind properties - no onChange logic needed\n<Input\n  bind={OrderSearchInput}\n  placeholder=\"Search orders...\"\n/>\n\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={[\n    { value: 'All', label: 'All Statuses' },\n    { value: 'Processing', label: 'Processing' },\n    { value: 'Shipped', label: 'Shipped' },\n    { value: 'Delivered', label: 'Delivered' }\n  ]}\n/>\n\n<DatePicker bind={DateFromPicker} />\n<DatePicker bind={DateToPicker} />\n```\n\n## Bad Pattern: Duplicated Filtering Logic in Event Handlers\n\n```tsx\n// Avoid this - duplicates filtering logic in every event handler\n<Input\n  placeholder=\"Search orders...\"\n  onChange={EventFlow([\n    (value) => {\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = value === '' ||\n          order.customerName.toLowerCase().includes(value.toLowerCase()) ||\n          order.id.toLowerCase().includes(value.toLowerCase());\n        const matchesStatus = statusFilterVar.value === 'All' || order.status === statusFilterVar.value;\n        const matchesDateRange = !dateFromVar.value || !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n           new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n\n<Dropdown\n  onChange={EventFlow([\n    (value) => {\n      // Same filtering logic repeated here - this is what we want to avoid\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = searchTermVar.value === '' ||\n          order.customerName.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus = value === 'All' || order.status === value;\n        return matchesSearch && matchesStatus;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n```\n\n## Bad Pattern: Complex Filtering in Component Properties\n\n```tsx\n// Avoid this - complex logic in component property makes visual editor cluttered\n<Table\n  tableData={computed(\n    () =>\n      getOrdersApi.response?.filter((order) => {\n        const matchesSearch =\n          searchTermVar.value === \"\" ||\n          order.customerName\n            .toLowerCase()\n            .includes(searchTermVar.value.toLowerCase()) ||\n          order.id.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus =\n          statusFilterVar.value === \"All\" ||\n          order.status === statusFilterVar.value;\n        const matchesDateRange =\n          !dateFromVar.value ||\n          !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n            new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [],\n  )}\n/>\n```\n\n## Acceptable: Simple Filtering in Component Properties\n\n```tsx\n// This is fine - simple, straightforward filtering\n<Table tableData={computed(() => getOrdersApi.response?.filter(order => order.status === 'Active') || [])} />\n<Text text={computed(() => `Total: ${getOrdersApi.response?.length || 0}`)} />\n```\n\n## Pattern for Non-Table Components\n\nThis pattern applies to all components, not just tables:\n\n```tsx\n// In scope.ts - define component binding and reactive state variable\nexport const Page1Scope = createScope<{\n  CategoryDropdown: any;\n}>(\n  ({ entities: { CategoryDropdown } }) => ({\n    rawDataVar: StateVar({ defaultValue: [] }),\n    // Good: Complex calculation in reactive state variable\n    summaryTextVar: StateVar({\n      defaultValue: computed(() => {\n        const filteredData = rawDataVar.value?.filter(item => item.category === CategoryDropdown.selectedOptionValue) || [];\n        const total = filteredData.reduce((sum, item) => sum + item.amount, 0);\n        const average = filteredData.length > 0 ? total / filteredData.length : 0;\n        return `${CategoryDropdown.selectedOptionValue} category: ${filteredData.length} items, Total: $${total.toFixed(2)}, Average: $${average.toFixed(2)}`;\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In component - destructure and use bind\nconst { CategoryDropdown, summaryTextVar } = Page1;\n\n// Clean component property - just references reactive state variable\n<Text text={computed(() => summaryTextVar.value)} />\n\n// Form control uses bind property - no onChange needed\n<Dropdown\n  bind={CategoryDropdown}\n  options={[\n    { value: 'Electronics', label: 'Electronics' },\n    { value: 'Clothing', label: 'Clothing' },\n    { value: 'Books', label: 'Books' }\n  ]}\n/>\n```\n\n## Dynamic Dropdown Options from API Data\n\nWhen you need to create dropdown filters based on actual values from your API response (like filtering by status, category, type, etc.), extract the unique values from the API data to populate dropdown options dynamically.\n\n**Use this pattern when:**\n\n- You want to filter on a property that exists in your API data\n- The possible values for that property are not known in advance\n- You want the dropdown to show only values that actually exist in the data\n\n```tsx\n// In scope.ts - define component bindings and reactive state variables\nexport const Page1Scope = createScope<{\n  StatusFilterDropdown: any;\n  CategoryFilterDropdown: any;\n}>(\n  ({ entities: { StatusFilterDropdown, CategoryFilterDropdown, getProductsApi } }) => ({\n    getProductsApi: SbApi({}),\n\n    // Generate unique status options from API data\n    statusOptionsVar: StateVar({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Statuses' }];\n\n        const uniqueStatuses = [...new Set(getProductsApi.response.map(product => product.status))]\n          .filter(status => status) // Remove any null/undefined values\n          .sort()\n          .map(status => ({ value: status, label: status }));\n\n        return [{ value: 'All', label: 'All Statuses' }, ...uniqueStatuses];\n      })\n    }),\n\n    // Generate unique category options from API data\n    categoryOptionsVar: StateVar({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Categories' }];\n\n        const uniqueCategories = [...new Set(getProductsApi.response.map(product => product.category))]\n          .filter(category => category) // Remove any null/undefined values\n          .sort()\n          .map(category => ({ value: category, label: category }));\n\n        return [{ value: 'All', label: 'All Categories' }, ...uniqueCategories];\n      })\n    }),\n\n    // Filtered data based on both dropdowns\n    filteredProductsVar: StateVar({\n      defaultValue: computed(() => {\n        return getProductsApi.response?.filter(product => {\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            product.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesCategory = CategoryFilterDropdown.selectedOptionValue === 'All' ||\n            product.category === CategoryFilterDropdown.selectedOptionValue;\n          return matchesStatus && matchesCategory;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use\nconst { StatusFilterDropdown, CategoryFilterDropdown, statusOptionsVar, categoryOptionsVar, filteredProductsVar } = Page1;\n\n// Dropdowns with dynamic options from API data\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={computed(() => statusOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n<Dropdown\n  bind={CategoryFilterDropdown}\n  options={computed(() => categoryOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n// Table showing filtered results\n<Table tableData={computed(() => filteredProductsVar.value)} />\n```\n\n**Key points:**\n\n- Always include an \"All\" option as the first option\n- Use `new Set()` to get unique values from the API response\n- Filter out null/undefined values to avoid empty options\n- Sort the options alphabetically for better UX\n- The dropdown options are reactive - they update when the API data changes\n- Use `bind` properties on dropdowns so that the bind entities you set up in the scope file update automatically when the dropdown values change\n- Default to \"All\" to show all data initially\n";
+export declare const content = "# Data Filtering Best Practices\n\n**\uD83D\uDEA8 CRITICAL: When implementing data filtering, remember that computed cannot be used as React children.** All dynamic filtered content must be passed to component properties like `tableData={}`, `text={}`, etc. Never use `{computed(...)}` as children.\n\nWhen filtering data from APIs or state variables, follow these patterns to keep component properties clean and maintainable:\n\n## When to Use Reactive State Variables for Filtering\n\n**Use reactive state variables with `defaultValue` for complex filtering when:**\n\n- The filtering logic is more than 1-2 lines of code\n- Multiple conditions need to be evaluated\n- Multiple form controls affect the same filtered dataset\n- The logic would make component properties hard to read in the visual editor\n\n**Keep simple filtering in component properties when:**\n\n- The filtering is 1-2 lines of basic logic\n- It's a straightforward filter operation\n- Only one control affects the filtering\n\n## Good Pattern: Reactive State Variables with defaultValue\n\n```tsx\n// First, define component bindings in scope.ts\nexport const Page1Scope = createScope<{\n  OrderSearchInput: any;\n  StatusFilterDropdown: any;\n  DateFromPicker: any;\n  DateToPicker: any;\n}>(\n  ({ entities: { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, getOrdersApi } }) => ({\n    getOrdersApi: SbApi({}),\n    // Define reactive state variable with complex filtering logic in defaultValue\n    filteredOrdersVar: SbVariable({\n      defaultValue: computed(() => {\n        return getOrdersApi.response?.filter(order => {\n          const matchesSearch = OrderSearchInput.value === '' ||\n            order.customerName.toLowerCase().includes(OrderSearchInput.value.toLowerCase()) ||\n            order.id.toLowerCase().includes(OrderSearchInput.value.toLowerCase());\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            order.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesDateRange = !DateFromPicker.value || !DateToPicker.value ||\n            (new Date(order.orderDate) >= new Date(DateFromPicker.value) &&\n             new Date(order.orderDate) <= new Date(DateToPicker.value));\n          return matchesSearch && matchesStatus && matchesDateRange;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use bind properties\nconst { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, filteredOrdersVar } = Page1;\n\n// Clean component properties - just reference the reactive state variable\n<Table tableData={computed(() => filteredOrdersVar.value)} />\n\n// Form controls use bind properties - no onChange logic needed\n<Input\n  bind={OrderSearchInput}\n  placeholder=\"Search orders...\"\n/>\n\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={[\n    { value: 'All', label: 'All Statuses' },\n    { value: 'Processing', label: 'Processing' },\n    { value: 'Shipped', label: 'Shipped' },\n    { value: 'Delivered', label: 'Delivered' }\n  ]}\n/>\n\n<DatePicker bind={DateFromPicker} />\n<DatePicker bind={DateToPicker} />\n```\n\n## Bad Pattern: Duplicated Filtering Logic in Event Handlers\n\n```tsx\n// Avoid this - duplicates filtering logic in every event handler\n<Input\n  placeholder=\"Search orders...\"\n  onChange={EventFlow([\n    (value) => {\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = value === '' ||\n          order.customerName.toLowerCase().includes(value.toLowerCase()) ||\n          order.id.toLowerCase().includes(value.toLowerCase());\n        const matchesStatus = statusFilterVar.value === 'All' || order.status === statusFilterVar.value;\n        const matchesDateRange = !dateFromVar.value || !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n           new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n\n<Dropdown\n  onChange={EventFlow([\n    (value) => {\n      // Same filtering logic repeated here - this is what we want to avoid\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = searchTermVar.value === '' ||\n          order.customerName.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus = value === 'All' || order.status === value;\n        return matchesSearch && matchesStatus;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n```\n\n## Bad Pattern: Complex Filtering in Component Properties\n\n```tsx\n// Avoid this - complex logic in component property makes visual editor cluttered\n<Table\n  tableData={computed(\n    () =>\n      getOrdersApi.response?.filter((order) => {\n        const matchesSearch =\n          searchTermVar.value === \"\" ||\n          order.customerName\n            .toLowerCase()\n            .includes(searchTermVar.value.toLowerCase()) ||\n          order.id.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus =\n          statusFilterVar.value === \"All\" ||\n          order.status === statusFilterVar.value;\n        const matchesDateRange =\n          !dateFromVar.value ||\n          !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n            new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [],\n  )}\n/>\n```\n\n## Acceptable: Simple Filtering in Component Properties\n\n```tsx\n// This is fine - simple, straightforward filtering\n<Table tableData={computed(() => getOrdersApi.response?.filter(order => order.status === 'Active') || [])} />\n<Text text={computed(() => `Total: ${getOrdersApi.response?.length || 0}`)} />\n```\n\n## Pattern for Non-Table Components\n\nThis pattern applies to all components, not just tables:\n\n```tsx\n// In scope.ts - define component binding and reactive state variable\nexport const Page1Scope = createScope<{\n  CategoryDropdown: any;\n}>(\n  ({ entities: { CategoryDropdown } }) => ({\n    rawDataVar: SbVariable({ defaultValue: [] }),\n    // Good: Complex calculation in reactive state variable\n    summaryTextVar: SbVariable({\n      defaultValue: computed(() => {\n        const filteredData = rawDataVar.value?.filter(item => item.category === CategoryDropdown.selectedOptionValue) || [];\n        const total = filteredData.reduce((sum, item) => sum + item.amount, 0);\n        const average = filteredData.length > 0 ? total / filteredData.length : 0;\n        return `${CategoryDropdown.selectedOptionValue} category: ${filteredData.length} items, Total: $${total.toFixed(2)}, Average: $${average.toFixed(2)}`;\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In component - destructure and use bind\nconst { CategoryDropdown, summaryTextVar } = Page1;\n\n// Clean component property - just references reactive state variable\n<Text text={computed(() => summaryTextVar.value)} />\n\n// Form control uses bind property - no onChange needed\n<Dropdown\n  bind={CategoryDropdown}\n  options={[\n    { value: 'Electronics', label: 'Electronics' },\n    { value: 'Clothing', label: 'Clothing' },\n    { value: 'Books', label: 'Books' }\n  ]}\n/>\n```\n\n## Dynamic Dropdown Options from API Data\n\nWhen you need to create dropdown filters based on actual values from your API response (like filtering by status, category, type, etc.), extract the unique values from the API data to populate dropdown options dynamically.\n\n**Use this pattern when:**\n\n- You want to filter on a property that exists in your API data\n- The possible values for that property are not known in advance\n- You want the dropdown to show only values that actually exist in the data\n\n```tsx\n// In scope.ts - define component bindings and reactive state variables\nexport const Page1Scope = createScope<{\n  StatusFilterDropdown: any;\n  CategoryFilterDropdown: any;\n}>(\n  ({ entities: { StatusFilterDropdown, CategoryFilterDropdown, getProductsApi } }) => ({\n    getProductsApi: SbApi({}),\n\n    // Generate unique status options from API data\n    statusOptionsVar: SbVariable({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Statuses' }];\n\n        const uniqueStatuses = [...new Set(getProductsApi.response.map(product => product.status))]\n          .filter(status => status) // Remove any null/undefined values\n          .sort()\n          .map(status => ({ value: status, label: status }));\n\n        return [{ value: 'All', label: 'All Statuses' }, ...uniqueStatuses];\n      })\n    }),\n\n    // Generate unique category options from API data\n    categoryOptionsVar: SbVariable({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Categories' }];\n\n        const uniqueCategories = [...new Set(getProductsApi.response.map(product => product.category))]\n          .filter(category => category) // Remove any null/undefined values\n          .sort()\n          .map(category => ({ value: category, label: category }));\n\n        return [{ value: 'All', label: 'All Categories' }, ...uniqueCategories];\n      })\n    }),\n\n    // Filtered data based on both dropdowns\n    filteredProductsVar: SbVariable({\n      defaultValue: computed(() => {\n        return getProductsApi.response?.filter(product => {\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            product.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesCategory = CategoryFilterDropdown.selectedOptionValue === 'All' ||\n            product.category === CategoryFilterDropdown.selectedOptionValue;\n          return matchesStatus && matchesCategory;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use\nconst { StatusFilterDropdown, CategoryFilterDropdown, statusOptionsVar, categoryOptionsVar, filteredProductsVar } = Page1;\n\n// Dropdowns with dynamic options from API data\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={computed(() => statusOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n<Dropdown\n  bind={CategoryFilterDropdown}\n  options={computed(() => categoryOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n// Table showing filtered results\n<Table tableData={computed(() => filteredProductsVar.value)} />\n```\n\n**Key points:**\n\n- Always include an \"All\" option as the first option\n- Use `new Set()` to get unique values from the API response\n- Filter out null/undefined values to avoid empty options\n- Sort the options alphabetically for better UX\n- The dropdown options are reactive - they update when the API data changes\n- Use `bind` properties on dropdowns so that the bind entities you set up in the scope file update automatically when the dropdown values change\n- Default to \"All\" to show all data initially\n";
 //# sourceMappingURL=superblocks-data-filtering.d.ts.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-data-filtering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-data-filtering.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-data-filtering.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,i9VAAu8V,CAAC"}
+{"version":3,"file":"superblocks-data-filtering.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-data-filtering.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,69VAAm9V,CAAC"}

package/dist/ai-service/prompts/generated/subprompts/superblocks-data-filtering.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-data-filtering.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.317Z
-export const content = "# Data Filtering Best Practices\n\n**🚨 CRITICAL: When implementing data filtering, remember that computed cannot be used as React children.** All dynamic filtered content must be passed to component properties like `tableData={}`, `text={}`, etc. Never use `{computed(...)}` as children.\n\nWhen filtering data from APIs or state variables, follow these patterns to keep component properties clean and maintainable:\n\n## When to Use Reactive State Variables for Filtering\n\n**Use reactive state variables with `defaultValue` for complex filtering when:**\n\n- The filtering logic is more than 1-2 lines of code\n- Multiple conditions need to be evaluated\n- Multiple form controls affect the same filtered dataset\n- The logic would make component properties hard to read in the visual editor\n\n**Keep simple filtering in component properties when:**\n\n- The filtering is 1-2 lines of basic logic\n- It's a straightforward filter operation\n- Only one control affects the filtering\n\n## Good Pattern: Reactive State Variables with defaultValue\n\n```tsx\n// First, define component bindings in scope.ts\nexport const Page1Scope = createScope<{\n  OrderSearchInput: any;\n  StatusFilterDropdown: any;\n  DateFromPicker: any;\n  DateToPicker: any;\n}>(\n  ({ entities: { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, getOrdersApi } }) => ({\n    getOrdersApi: SbApi({}),\n    // Define reactive state variable with complex filtering logic in defaultValue\n    filteredOrdersVar: StateVar({\n      defaultValue: computed(() => {\n        return getOrdersApi.response?.filter(order => {\n          const matchesSearch = OrderSearchInput.value === '' ||\n            order.customerName.toLowerCase().includes(OrderSearchInput.value.toLowerCase()) ||\n            order.id.toLowerCase().includes(OrderSearchInput.value.toLowerCase());\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            order.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesDateRange = !DateFromPicker.value || !DateToPicker.value ||\n            (new Date(order.orderDate) >= new Date(DateFromPicker.value) &&\n             new Date(order.orderDate) <= new Date(DateToPicker.value));\n          return matchesSearch && matchesStatus && matchesDateRange;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use bind properties\nconst { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, filteredOrdersVar } = Page1;\n\n// Clean component properties - just reference the reactive state variable\n<Table tableData={computed(() => filteredOrdersVar.value)} />\n\n// Form controls use bind properties - no onChange logic needed\n<Input\n  bind={OrderSearchInput}\n  placeholder=\"Search orders...\"\n/>\n\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={[\n    { value: 'All', label: 'All Statuses' },\n    { value: 'Processing', label: 'Processing' },\n    { value: 'Shipped', label: 'Shipped' },\n    { value: 'Delivered', label: 'Delivered' }\n  ]}\n/>\n\n<DatePicker bind={DateFromPicker} />\n<DatePicker bind={DateToPicker} />\n```\n\n## Bad Pattern: Duplicated Filtering Logic in Event Handlers\n\n```tsx\n// Avoid this - duplicates filtering logic in every event handler\n<Input\n  placeholder=\"Search orders...\"\n  onChange={EventFlow([\n    (value) => {\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = value === '' ||\n          order.customerName.toLowerCase().includes(value.toLowerCase()) ||\n          order.id.toLowerCase().includes(value.toLowerCase());\n        const matchesStatus = statusFilterVar.value === 'All' || order.status === statusFilterVar.value;\n        const matchesDateRange = !dateFromVar.value || !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n           new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n\n<Dropdown\n  onChange={EventFlow([\n    (value) => {\n      // Same filtering logic repeated here - this is what we want to avoid\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = searchTermVar.value === '' ||\n          order.customerName.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus = value === 'All' || order.status === value;\n        return matchesSearch && matchesStatus;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n```\n\n## Bad Pattern: Complex Filtering in Component Properties\n\n```tsx\n// Avoid this - complex logic in component property makes visual editor cluttered\n<Table\n  tableData={computed(\n    () =>\n      getOrdersApi.response?.filter((order) => {\n        const matchesSearch =\n          searchTermVar.value === \"\" ||\n          order.customerName\n            .toLowerCase()\n            .includes(searchTermVar.value.toLowerCase()) ||\n          order.id.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus =\n          statusFilterVar.value === \"All\" ||\n          order.status === statusFilterVar.value;\n        const matchesDateRange =\n          !dateFromVar.value ||\n          !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n            new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [],\n  )}\n/>\n```\n\n## Acceptable: Simple Filtering in Component Properties\n\n```tsx\n// This is fine - simple, straightforward filtering\n<Table tableData={computed(() => getOrdersApi.response?.filter(order => order.status === 'Active') || [])} />\n<Text text={computed(() => `Total: ${getOrdersApi.response?.length || 0}`)} />\n```\n\n## Pattern for Non-Table Components\n\nThis pattern applies to all components, not just tables:\n\n```tsx\n// In scope.ts - define component binding and reactive state variable\nexport const Page1Scope = createScope<{\n  CategoryDropdown: any;\n}>(\n  ({ entities: { CategoryDropdown } }) => ({\n    rawDataVar: StateVar({ defaultValue: [] }),\n    // Good: Complex calculation in reactive state variable\n    summaryTextVar: StateVar({\n      defaultValue: computed(() => {\n        const filteredData = rawDataVar.value?.filter(item => item.category === CategoryDropdown.selectedOptionValue) || [];\n        const total = filteredData.reduce((sum, item) => sum + item.amount, 0);\n        const average = filteredData.length > 0 ? total / filteredData.length : 0;\n        return `${CategoryDropdown.selectedOptionValue} category: ${filteredData.length} items, Total: $${total.toFixed(2)}, Average: $${average.toFixed(2)}`;\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In component - destructure and use bind\nconst { CategoryDropdown, summaryTextVar } = Page1;\n\n// Clean component property - just references reactive state variable\n<Text text={computed(() => summaryTextVar.value)} />\n\n// Form control uses bind property - no onChange needed\n<Dropdown\n  bind={CategoryDropdown}\n  options={[\n    { value: 'Electronics', label: 'Electronics' },\n    { value: 'Clothing', label: 'Clothing' },\n    { value: 'Books', label: 'Books' }\n  ]}\n/>\n```\n\n## Dynamic Dropdown Options from API Data\n\nWhen you need to create dropdown filters based on actual values from your API response (like filtering by status, category, type, etc.), extract the unique values from the API data to populate dropdown options dynamically.\n\n**Use this pattern when:**\n\n- You want to filter on a property that exists in your API data\n- The possible values for that property are not known in advance\n- You want the dropdown to show only values that actually exist in the data\n\n```tsx\n// In scope.ts - define component bindings and reactive state variables\nexport const Page1Scope = createScope<{\n  StatusFilterDropdown: any;\n  CategoryFilterDropdown: any;\n}>(\n  ({ entities: { StatusFilterDropdown, CategoryFilterDropdown, getProductsApi } }) => ({\n    getProductsApi: SbApi({}),\n\n    // Generate unique status options from API data\n    statusOptionsVar: StateVar({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Statuses' }];\n\n        const uniqueStatuses = [...new Set(getProductsApi.response.map(product => product.status))]\n          .filter(status => status) // Remove any null/undefined values\n          .sort()\n          .map(status => ({ value: status, label: status }));\n\n        return [{ value: 'All', label: 'All Statuses' }, ...uniqueStatuses];\n      })\n    }),\n\n    // Generate unique category options from API data\n    categoryOptionsVar: StateVar({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Categories' }];\n\n        const uniqueCategories = [...new Set(getProductsApi.response.map(product => product.category))]\n          .filter(category => category) // Remove any null/undefined values\n          .sort()\n          .map(category => ({ value: category, label: category }));\n\n        return [{ value: 'All', label: 'All Categories' }, ...uniqueCategories];\n      })\n    }),\n\n    // Filtered data based on both dropdowns\n    filteredProductsVar: StateVar({\n      defaultValue: computed(() => {\n        return getProductsApi.response?.filter(product => {\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            product.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesCategory = CategoryFilterDropdown.selectedOptionValue === 'All' ||\n            product.category === CategoryFilterDropdown.selectedOptionValue;\n          return matchesStatus && matchesCategory;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use\nconst { StatusFilterDropdown, CategoryFilterDropdown, statusOptionsVar, categoryOptionsVar, filteredProductsVar } = Page1;\n\n// Dropdowns with dynamic options from API data\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={computed(() => statusOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n<Dropdown\n  bind={CategoryFilterDropdown}\n  options={computed(() => categoryOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n// Table showing filtered results\n<Table tableData={computed(() => filteredProductsVar.value)} />\n```\n\n**Key points:**\n\n- Always include an \"All\" option as the first option\n- Use `new Set()` to get unique values from the API response\n- Filter out null/undefined values to avoid empty options\n- Sort the options alphabetically for better UX\n- The dropdown options are reactive - they update when the API data changes\n- Use `bind` properties on dropdowns so that the bind entities you set up in the scope file update automatically when the dropdown values change\n- Default to \"All\" to show all data initially\n";
+// Generated at: 2025-07-03T16:20:58.432Z
+export const content = "# Data Filtering Best Practices\n\n**🚨 CRITICAL: When implementing data filtering, remember that computed cannot be used as React children.** All dynamic filtered content must be passed to component properties like `tableData={}`, `text={}`, etc. Never use `{computed(...)}` as children.\n\nWhen filtering data from APIs or state variables, follow these patterns to keep component properties clean and maintainable:\n\n## When to Use Reactive State Variables for Filtering\n\n**Use reactive state variables with `defaultValue` for complex filtering when:**\n\n- The filtering logic is more than 1-2 lines of code\n- Multiple conditions need to be evaluated\n- Multiple form controls affect the same filtered dataset\n- The logic would make component properties hard to read in the visual editor\n\n**Keep simple filtering in component properties when:**\n\n- The filtering is 1-2 lines of basic logic\n- It's a straightforward filter operation\n- Only one control affects the filtering\n\n## Good Pattern: Reactive State Variables with defaultValue\n\n```tsx\n// First, define component bindings in scope.ts\nexport const Page1Scope = createScope<{\n  OrderSearchInput: any;\n  StatusFilterDropdown: any;\n  DateFromPicker: any;\n  DateToPicker: any;\n}>(\n  ({ entities: { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, getOrdersApi } }) => ({\n    getOrdersApi: SbApi({}),\n    // Define reactive state variable with complex filtering logic in defaultValue\n    filteredOrdersVar: SbVariable({\n      defaultValue: computed(() => {\n        return getOrdersApi.response?.filter(order => {\n          const matchesSearch = OrderSearchInput.value === '' ||\n            order.customerName.toLowerCase().includes(OrderSearchInput.value.toLowerCase()) ||\n            order.id.toLowerCase().includes(OrderSearchInput.value.toLowerCase());\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            order.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesDateRange = !DateFromPicker.value || !DateToPicker.value ||\n            (new Date(order.orderDate) >= new Date(DateFromPicker.value) &&\n             new Date(order.orderDate) <= new Date(DateToPicker.value));\n          return matchesSearch && matchesStatus && matchesDateRange;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use bind properties\nconst { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, filteredOrdersVar } = Page1;\n\n// Clean component properties - just reference the reactive state variable\n<Table tableData={computed(() => filteredOrdersVar.value)} />\n\n// Form controls use bind properties - no onChange logic needed\n<Input\n  bind={OrderSearchInput}\n  placeholder=\"Search orders...\"\n/>\n\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={[\n    { value: 'All', label: 'All Statuses' },\n    { value: 'Processing', label: 'Processing' },\n    { value: 'Shipped', label: 'Shipped' },\n    { value: 'Delivered', label: 'Delivered' }\n  ]}\n/>\n\n<DatePicker bind={DateFromPicker} />\n<DatePicker bind={DateToPicker} />\n```\n\n## Bad Pattern: Duplicated Filtering Logic in Event Handlers\n\n```tsx\n// Avoid this - duplicates filtering logic in every event handler\n<Input\n  placeholder=\"Search orders...\"\n  onChange={EventFlow([\n    (value) => {\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = value === '' ||\n          order.customerName.toLowerCase().includes(value.toLowerCase()) ||\n          order.id.toLowerCase().includes(value.toLowerCase());\n        const matchesStatus = statusFilterVar.value === 'All' || order.status === statusFilterVar.value;\n        const matchesDateRange = !dateFromVar.value || !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n           new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n\n<Dropdown\n  onChange={EventFlow([\n    (value) => {\n      // Same filtering logic repeated here - this is what we want to avoid\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = searchTermVar.value === '' ||\n          order.customerName.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus = value === 'All' || order.status === value;\n        return matchesSearch && matchesStatus;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n```\n\n## Bad Pattern: Complex Filtering in Component Properties\n\n```tsx\n// Avoid this - complex logic in component property makes visual editor cluttered\n<Table\n  tableData={computed(\n    () =>\n      getOrdersApi.response?.filter((order) => {\n        const matchesSearch =\n          searchTermVar.value === \"\" ||\n          order.customerName\n            .toLowerCase()\n            .includes(searchTermVar.value.toLowerCase()) ||\n          order.id.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus =\n          statusFilterVar.value === \"All\" ||\n          order.status === statusFilterVar.value;\n        const matchesDateRange =\n          !dateFromVar.value ||\n          !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n            new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [],\n  )}\n/>\n```\n\n## Acceptable: Simple Filtering in Component Properties\n\n```tsx\n// This is fine - simple, straightforward filtering\n<Table tableData={computed(() => getOrdersApi.response?.filter(order => order.status === 'Active') || [])} />\n<Text text={computed(() => `Total: ${getOrdersApi.response?.length || 0}`)} />\n```\n\n## Pattern for Non-Table Components\n\nThis pattern applies to all components, not just tables:\n\n```tsx\n// In scope.ts - define component binding and reactive state variable\nexport const Page1Scope = createScope<{\n  CategoryDropdown: any;\n}>(\n  ({ entities: { CategoryDropdown } }) => ({\n    rawDataVar: SbVariable({ defaultValue: [] }),\n    // Good: Complex calculation in reactive state variable\n    summaryTextVar: SbVariable({\n      defaultValue: computed(() => {\n        const filteredData = rawDataVar.value?.filter(item => item.category === CategoryDropdown.selectedOptionValue) || [];\n        const total = filteredData.reduce((sum, item) => sum + item.amount, 0);\n        const average = filteredData.length > 0 ? total / filteredData.length : 0;\n        return `${CategoryDropdown.selectedOptionValue} category: ${filteredData.length} items, Total: $${total.toFixed(2)}, Average: $${average.toFixed(2)}`;\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In component - destructure and use bind\nconst { CategoryDropdown, summaryTextVar } = Page1;\n\n// Clean component property - just references reactive state variable\n<Text text={computed(() => summaryTextVar.value)} />\n\n// Form control uses bind property - no onChange needed\n<Dropdown\n  bind={CategoryDropdown}\n  options={[\n    { value: 'Electronics', label: 'Electronics' },\n    { value: 'Clothing', label: 'Clothing' },\n    { value: 'Books', label: 'Books' }\n  ]}\n/>\n```\n\n## Dynamic Dropdown Options from API Data\n\nWhen you need to create dropdown filters based on actual values from your API response (like filtering by status, category, type, etc.), extract the unique values from the API data to populate dropdown options dynamically.\n\n**Use this pattern when:**\n\n- You want to filter on a property that exists in your API data\n- The possible values for that property are not known in advance\n- You want the dropdown to show only values that actually exist in the data\n\n```tsx\n// In scope.ts - define component bindings and reactive state variables\nexport const Page1Scope = createScope<{\n  StatusFilterDropdown: any;\n  CategoryFilterDropdown: any;\n}>(\n  ({ entities: { StatusFilterDropdown, CategoryFilterDropdown, getProductsApi } }) => ({\n    getProductsApi: SbApi({}),\n\n    // Generate unique status options from API data\n    statusOptionsVar: SbVariable({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Statuses' }];\n\n        const uniqueStatuses = [...new Set(getProductsApi.response.map(product => product.status))]\n          .filter(status => status) // Remove any null/undefined values\n          .sort()\n          .map(status => ({ value: status, label: status }));\n\n        return [{ value: 'All', label: 'All Statuses' }, ...uniqueStatuses];\n      })\n    }),\n\n    // Generate unique category options from API data\n    categoryOptionsVar: SbVariable({\n      defaultValue: computed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Categories' }];\n\n        const uniqueCategories = [...new Set(getProductsApi.response.map(product => product.category))]\n          .filter(category => category) // Remove any null/undefined values\n          .sort()\n          .map(category => ({ value: category, label: category }));\n\n        return [{ value: 'All', label: 'All Categories' }, ...uniqueCategories];\n      })\n    }),\n\n    // Filtered data based on both dropdowns\n    filteredProductsVar: SbVariable({\n      defaultValue: computed(() => {\n        return getProductsApi.response?.filter(product => {\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            product.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesCategory = CategoryFilterDropdown.selectedOptionValue === 'All' ||\n            product.category === CategoryFilterDropdown.selectedOptionValue;\n          return matchesStatus && matchesCategory;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use\nconst { StatusFilterDropdown, CategoryFilterDropdown, statusOptionsVar, categoryOptionsVar, filteredProductsVar } = Page1;\n\n// Dropdowns with dynamic options from API data\n<Dropdown\n  bind={StatusFilterDropdown}\n  options={computed(() => statusOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n<Dropdown\n  bind={CategoryFilterDropdown}\n  options={computed(() => categoryOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n// Table showing filtered results\n<Table tableData={computed(() => filteredProductsVar.value)} />\n```\n\n**Key points:**\n\n- Always include an \"All\" option as the first option\n- Use `new Set()` to get unique values from the API response\n- Filter out null/undefined values to avoid empty options\n- Sort the options alphabetically for better UX\n- The dropdown options are reactive - they update when the API data changes\n- Use `bind` properties on dropdowns so that the bind entities you set up in the scope file update automatically when the dropdown values change\n- Default to \"All\" to show all data initially\n";
 //# sourceMappingURL=superblocks-data-filtering.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-data-filtering.js.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-data-filtering.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-data-filtering.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oDAAoD;AACpD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,o8VAAo8V,CAAC"}
+{"version":3,"file":"superblocks-data-filtering.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-data-filtering.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oDAAoD;AACpD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,g9VAAg9V,CAAC"}

package/dist/ai-service/prompts/generated/subprompts/superblocks-event-flow.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-event-flow.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.317Z
+// Generated at: 2025-07-03T16:20:58.432Z
 export const content = "# Event handlers with EventFlow\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 EventFlow:\n\n```jsx\nimport { EventFlow } from \"@superblocksteam/library\";\n```\n\nAll event handlers MUST be written using the `EventFlow` 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<Button onClick={EventFlow.setStateVar(isReady, true)} />;\n```\n\n## EventFlow builder pattern\n\n`EventFlow` provides a number of functions that can be chained together using `EventFlow` 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 EventFlow functions, it is not needed and it will throw an error.\n\n```jsx\nconst { isReady, getUserData, getPermissions, LoginModal } = Page1;\n<Button\n  onClick={EventFlow.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`EventFlow` 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 EventFlow inside of a EventFlow.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<Button\n  label=\"Enable\"\n  buttonStyle={\"SECONDARY_BUTTON\"}\n  onClick={EventFlow.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<Button\n  label=\"Personalized Action\"\n  onClick={EventFlow.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### EventFlow Usage Examples\n\n```typescript\nimport { EventFlow, computed } from \"@superblocksteam/library\";\nimport { Page1 } from \"./scope\";\n\nconst { fetchUserData, saveUserData, userDataVariable, MyModal } = Page1;\n\n// Navigation example\nEventFlow.navigateTo({ url: \"https://example.com\", newWindow: true });\n\n// Control UI components example\nEventFlow.controlModal(MyModal, \"open\");\n\n// State management example\nconst { userProfile } = Page1;\nEventFlow.setStateVar(userProfile, { name: \"John\", role: \"Admin\" });\n\n// Chaining multiple actions\nEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    computed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert(\"Data loaded successfully\", \"success\");\n\n// Conditional flow with success/error handlers\nconst successFlow = EventFlow.showAlert(\"Success!\", \"success\");\nconst errorFlow = EventFlow.showAlert(\"An error occurred\", \"error\");\nEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n\n**EventFlow: Managing Events and Side Effects in Superblocks**\n\n## Important Syntax Rules\n\n- Always use function braces with EventFlow.runJS. Example: `EventFlow.runJS(() => { someFunction(); })` not `EventFlow.runJS(() => someFunction())`\n- EventFlow.runApis() accepts an array of direct API entity references. Example: `EventFlow.runApis([fetchUserData, saveUserData])`\n";
 //# sourceMappingURL=superblocks-event-flow.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-forms.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "### Form Layouts in Superblocks\n\n**\uD83D\uDEA8 CRITICAL: Remember that computed 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 `Container` 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 `Input`). 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<Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n  <Input label=\"First Name\" bind={FirstName} width={Dim.fill()} />\n  <Input label=\"Last Name\" bind={LastName} width={Dim.fill()} />\n  <Input label=\"Email\" bind={Email} inputType=\"EMAIL\" width={Dim.fill()} />\n</Container>\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  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\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<Modal bind={CreateOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Create New Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Fill out the form below to create a new order\" />\n    </Container>\n\n    {/* Form Content */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.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      <Button\n        label=\"Create Order\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>;\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  Page,\n  Section,\n  Column,\n  Table,\n  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\n  computed,\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<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  <Section height={Dim.fill()}>\n    <Column width={Dim.fill()} spacing={Dim.px(24)}>\n        <Text\n          text=\"Orders Management\"\n          textStyle={{ variant: \"heading2\" }}\n        />\n\n        <Table\n          bind={OrdersTable}\n          tableData={computed(() => OrdersStateVar.value)}\n          onRowClick={EventFlow.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    </Column>\n  </Section>\n</Page>\n\n// Edit modal with form pre-populated from table row\n<Modal bind={EditOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Edit Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Update the order details below\" />\n    </Container>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.controlModal(EditOrderModal, \"close\")}\n      />\n      <Button\n        label=\"Save Changes\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createScope,\n  StateVar,\n  StateVarPersistence,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\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: StateVar({\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: StateVarPersistence.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<Button\n  label=\"Edit Selected User\"\n  onClick={EventFlow.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 `EventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `Container` 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";
+export declare const content = "### Form Layouts in Superblocks\n\n**\uD83D\uDEA8 CRITICAL: Remember that computed 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 `Container` 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 `Input`). 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<Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n  <Input label=\"First Name\" bind={FirstName} width={Dim.fill()} />\n  <Input label=\"Last Name\" bind={LastName} width={Dim.fill()} />\n  <Input label=\"Email\" bind={Email} inputType=\"EMAIL\" width={Dim.fill()} />\n</Container>\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  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\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<Modal bind={CreateOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Create New Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Fill out the form below to create a new order\" />\n    </Container>\n\n    {/* Form Content */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.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      <Button\n        label=\"Create Order\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>;\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  Page,\n  Section,\n  Column,\n  Table,\n  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\n  computed,\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<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  <Section height={Dim.fill()}>\n    <Column width={Dim.fill()} spacing={Dim.px(24)}>\n        <Text\n          text=\"Orders Management\"\n          textStyle={{ variant: \"heading2\" }}\n        />\n\n        <Table\n          bind={OrdersTable}\n          tableData={computed(() => OrdersStateVar.value)}\n          onRowClick={EventFlow.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    </Column>\n  </Section>\n</Page>\n\n// Edit modal with form pre-populated from table row\n<Modal bind={EditOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Edit Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Update the order details below\" />\n    </Container>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.controlModal(EditOrderModal, \"close\")}\n      />\n      <Button\n        label=\"Save Changes\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createScope,\n  SbVariable,\n  SbVariablePersistence,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\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<Button\n  label=\"Edit Selected User\"\n  onClick={EventFlow.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 `EventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `Container` 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";
 //# sourceMappingURL=superblocks-forms.d.ts.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-forms.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-forms.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,6+bAAm+b,CAAC"}
+{"version":3,"file":"superblocks-forms.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-forms.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,q/bAA2+b,CAAC"}

package/dist/ai-service/prompts/generated/subprompts/superblocks-forms.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-forms.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.317Z
-export const content = "### Form Layouts in Superblocks\n\n**🚨 CRITICAL: Remember that computed 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 `Container` 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 `Input`). 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<Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n  <Input label=\"First Name\" bind={FirstName} width={Dim.fill()} />\n  <Input label=\"Last Name\" bind={LastName} width={Dim.fill()} />\n  <Input label=\"Email\" bind={Email} inputType=\"EMAIL\" width={Dim.fill()} />\n</Container>\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  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\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<Modal bind={CreateOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Create New Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Fill out the form below to create a new order\" />\n    </Container>\n\n    {/* Form Content */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.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      <Button\n        label=\"Create Order\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>;\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  Page,\n  Section,\n  Column,\n  Table,\n  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\n  computed,\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<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  <Section height={Dim.fill()}>\n    <Column width={Dim.fill()} spacing={Dim.px(24)}>\n        <Text\n          text=\"Orders Management\"\n          textStyle={{ variant: \"heading2\" }}\n        />\n\n        <Table\n          bind={OrdersTable}\n          tableData={computed(() => OrdersStateVar.value)}\n          onRowClick={EventFlow.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    </Column>\n  </Section>\n</Page>\n\n// Edit modal with form pre-populated from table row\n<Modal bind={EditOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Edit Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Update the order details below\" />\n    </Container>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.controlModal(EditOrderModal, \"close\")}\n      />\n      <Button\n        label=\"Save Changes\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createScope,\n  StateVar,\n  StateVarPersistence,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\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: StateVar({\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: StateVarPersistence.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<Button\n  label=\"Edit Selected User\"\n  onClick={EventFlow.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 `EventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `Container` 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";
+// Generated at: 2025-07-03T16:20:58.431Z
+export const content = "### Form Layouts in Superblocks\n\n**🚨 CRITICAL: Remember that computed 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 `Container` 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 `Input`). 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<Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n  <Input label=\"First Name\" bind={FirstName} width={Dim.fill()} />\n  <Input label=\"Last Name\" bind={LastName} width={Dim.fill()} />\n  <Input label=\"Email\" bind={Email} inputType=\"EMAIL\" width={Dim.fill()} />\n</Container>\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  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\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<Modal bind={CreateOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Create New Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Fill out the form below to create a new order\" />\n    </Container>\n\n    {/* Form Content */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.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      <Button\n        label=\"Create Order\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>;\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  Page,\n  Section,\n  Column,\n  Table,\n  Modal,\n  Container,\n  Text,\n  Input,\n  Dropdown,\n  Button,\n  Dim,\n  EventFlow,\n  computed,\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<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  <Section height={Dim.fill()}>\n    <Column width={Dim.fill()} spacing={Dim.px(24)}>\n        <Text\n          text=\"Orders Management\"\n          textStyle={{ variant: \"heading2\" }}\n        />\n\n        <Table\n          bind={OrdersTable}\n          tableData={computed(() => OrdersStateVar.value)}\n          onRowClick={EventFlow.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    </Column>\n  </Section>\n</Page>\n\n// Edit modal with form pre-populated from table row\n<Modal bind={EditOrderModal}>\n  <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <Container layout=\"vertical\" spacing={Dim.px(8)}>\n      <Text\n        text=\"Edit Order\"\n        textStyle={{\n          variant: \"heading4\",\n        }}\n      />\n      <Text text=\"Update the order details below\" />\n    </Container>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <Container layout=\"vertical\" width={Dim.fill()} spacing={Dim.px(12)}>\n      <Input\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label=\"Customer Name\"\n        placeholderText=\"Enter customer name\"\n        required={true}\n      />\n\n      <Input\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      <Input\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      <Dropdown\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      <Input\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label=\"Order Notes\"\n        placeholderText=\"Optional notes about the order\"\n        multiline={true}\n      />\n    </Container>\n\n    {/* Modal Footer */}\n    <Container\n      layout=\"horizontal\"\n      horizontalAlign=\"right\"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <Button\n        label=\"Cancel\"\n        variant=\"secondary\"\n        onClick={EventFlow.controlModal(EditOrderModal, \"close\")}\n      />\n      <Button\n        label=\"Save Changes\"\n        variant=\"primary\"\n        onClick={EventFlow.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    </Container>\n  </Container>\n</Modal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createScope,\n  SbVariable,\n  SbVariablePersistence,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\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<Button\n  label=\"Edit Selected User\"\n  onClick={EventFlow.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 `EventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `Container` 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";
 //# sourceMappingURL=superblocks-forms.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-forms.js.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-forms.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-forms.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,2CAA2C;AAC3C,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,g+bAAg+b,CAAC"}
+{"version":3,"file":"superblocks-forms.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-forms.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,2CAA2C;AAC3C,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,w+bAAw+b,CAAC"}

package/dist/ai-service/prompts/generated/subprompts/superblocks-layouts.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-layouts.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.316Z
+// Generated at: 2025-07-03T16:20:58.430Z
 export const content = "### Layout and Sizing in Superblocks\n\n- `Section` should only be used as a child of `Page` and `Column` only used as a child of `Section`\n- All other layouts in Superblocks are configured using the `Container` component\n- `Container` provides both layout and optional visual styling.\n\n```jsx\n<Container\n  variant=\"card\" | \"none\" // default is \"none\"\n  layout=\"vertical\" | \"horizontal\" | \"freeform\" // default is \"vertical\"\n>\n  {/* Children here */}\n</Container>\n```\n\nWe have three main layout options in Superblocks for `Container` and `Column`:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Horizontal or Vertical Stacks for almost all use cases, especially Vertical Stacks.\n\nThe `variant` prop is optional and can be set to `\"card\"` or `\"none\"`. Default is `\"none\"`.\n`\"card\"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n**When to use each variant:**\n\n- `variant=\"none\"` - For pure layout containers (by far most common)\n- `variant=\"card\"` - When you need visual separation with padding, borders, and background\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<Text width={Dim.px(2)}>Hello</Text>   // 2 pixels\n<Text width={Dim.fit()}>Hello</Text>   // Fit to content (default)\n<Text width={Dim.fill()}>Hello</Text>  // Fill available space, no weight (aka 1)\n<Text width={Dim.fill(2)}>Hello</Text> // Fill available space, with weight of 2\n```\n\n---\n\n### Spacing Between Components\n\n`Container` has a **default spacing of `Dim.px(6)`** between child components when using `layout=\"vertical\"` or `layout=\"horizontal\"`. You can override this default when you need different spacing.\n\n```jsx\n{\n  /* Uses default 6px spacing */\n}\n<Container layout=\"vertical\">\n  <Text text=\"First item\" />\n  <Text text=\"Second item\" />\n  <Text text=\"Third item\" />\n</Container>;\n\n{\n  /* Override with custom spacing */\n}\n<Container layout=\"vertical\" spacing={Dim.px(12)}>\n  <Text text=\"First item\" />\n  <Text text=\"Second item\" />\n</Container>;\n\n{\n  /* No spacing (components touch) - often useful for nested containers */\n}\n<Container layout=\"horizontal\" spacing={Dim.px(0)}>\n  <Container />\n  <Container />\n</Container>;\n```\n\n**Common spacing values:**\n\n- `spacing={Dim.px(0)}` - No spacing (components touch)\n- Default `Dim.px(6)` - Minimal spacing (used if spacing prop omitted)\n- `spacing={Dim.px(12)}` - Comfortable spacing for buttons/controls/form fields\n- `spacing={Dim.px(24)}` - Loose spacing for distinct sections\n\n**Best practices:**\n\n- The default 6px spacing works well for most layouts\n- Override spacing when you need tighter control or larger gaps\n- DO NOT add margins to components - use container spacing instead\n- Try to use consistent spacing values throughout your app\n\n---\n\n### Standard Page Structure\n\n**CRITICAL**: All new Superblocks apps must follow this standard page structure:\n\n```tsx\n<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  <Section height={Dim.fill()}>\n    <Column width={Dim.fill()}>{/* Your page content goes here */}</Column>\n  </Section>\n</Page>\n```\n\nNote that `Section` and `Column` can only be used inside `Page`. For anything inside an `Modal` or nested deeper inside an `Column`, use an `Container`.\n\n#### App headers\n\n- If you want to have a header section for your app, that's best done in its own `Section` above the main content's `Section`.\n- Put any background color on the section itself, as the columns are padded in from the edge by default\n\nExample:\n\n```tsx\n<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  {/* App header Section */}\n  <Section height={Dim.fit()} backgroundColor=\"#90EE90\">\n    <Column\n      width={Dim.fill()}\n      layout=\"horizontal\"\n      horizontalAlign=\"space-between\"\n    >\n      <Text text=\"My App\" textStyle={{ variant: \"heading2\" }} />\n      <Button label=\"New Item\" />\n    </Column>\n  </Section>\n\n  {/* Main Content Section */}\n  <Section height={Dim.fill()}>\n    <Column width={Dim.fill()}>\n      <Table tableData={computed(() => myData.response)} />\n    </Column>\n  </Section>\n</Page>\n```\n\n#### Column and Container Width Guidelines\n\n**Default Rule**: All columns under a section, and almost all Containers (especially if they are the root of a Column or Modal) should use `width={Dim.fill()}` unless you have a really good reason not to.\n\n**Good Reason Example** - Fixed Sidebar Layout:\nWhen you need a fixed-width sidebar alongside a flexible content area:\n\n```tsx\n<Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n  <Section height={Dim.fill()}>\n    {/* Fixed sidebar column */}\n    <Column width={Dim.px(250)}>\n      <Text text=\"Sidebar content\" />\n      <Button label=\"Menu Item 1\" />\n      <Button label=\"Menu Item 2\" />\n    </Column>\n\n    {/* Flexible content column */}\n    <Column width={Dim.fill()}>\n      <Text text=\"Main content area that fills remaining space\" />\n      <Table tableData={computed(() => myApi.response)} />\n    </Column>\n  </Section>\n</Page>\n```\n\nIn this example:\n\n- Left column uses `width={Dim.px(250)}` for a fixed 250px sidebar\n- Right column uses `width={Dim.fill()}` to take up all remaining space\n- This creates a responsive layout where the sidebar stays fixed while the content area adapts\n\n### Layouts for modals\n\n- Modal components should always use an Container with layout=vertical as the root of their content\n- Modal components DO NOT need to have their own close button. The modal component comes with a close button by default\n- Put the header of the modal into its own `Container` and the footer in its own `Container`. If the footer has buttons for actions, ensure you add `horizontalAlign=\"right\"` to the container\n\n**Modal Content Width Guidelines:**\n\nMost components inside modals should use `width={Dim.fill()}` to prevent left-aligned, inconsistent layouts:\n\n- Root container: `<Container layout=\"vertical\" width={Dim.fill()}>`\n- Form fields: `<Input bind={...} width={Dim.fill()} />`\n- Form containers: `<Container layout=\"vertical\" width={Dim.fill()}>`\n\n**Exceptions:** Some components work better with default `Dim.fit()` width:\n\n- Footer buttons (Button) - wide buttons look awkward\n- Icons, small text labels, or decorative elements\n\n**Good Example:** See the modal examples in `superblocks-forms.md` where the footer container uses `width={Dim.fill()}` but the Cancel/Submit buttons inside use default fit width for proper proportions.\n";
 //# sourceMappingURL=superblocks-layouts.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-page.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "### How to use Page\n\n**Important: Superblocks apps currently support only one page.**\n\n- A Superblocks app consists of a single page that exports a default React component through the `registerPage` function.\n- The page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A Superblocks app consists of a single page located in the `pages/Page1` directory.\n- NEVER change the path of the `pages` directory or the page directories inside it `like `pages/Page1`). If you change these paths or folder names, the app will crash.\n- DO NOT create more than ONE page in an app. Multiple pages is NOT supported!\n\n### Page Structure\n\nThe single page in your Superblocks app should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n  createScope,\n  StateVar,\n  StateVarPersistence,\n  SbApi,\n  Text,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  Text1: any;\n}>(\n  () => ({\n    // Define your entities here\n    myVariableVar: StateVar({\n      defaultValue: \"initial value\",\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n    fetchDataApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Text,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  // Destructure entities from the scope for easy access\n  const { Text1, myVariableVar, fetchDataApi } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          {/* Use entities in your components */}\n          <Text bind={Text1} text={computed(() => myVariableVar.value)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `computed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope's type definitions:\n\n```ts\nexport const Page1Scope = createScope<{\n  Text1: any;\n  UserInput: any;\n}>(\n  () => ({\n    // Your other entities (variables, APIs, etc.)\n    myVariableVar: StateVar({ defaultValue: \"Hello\" }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction PageContent() {\n  const { Text1, UserInput, myVariableVar } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input bind={UserInput} placeholder=\"Enter your name\" />\n          <Text\n            bind={Text1}\n            text={computed(() => `Hello, ${UserInput.value}!`)}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n```\n\n3. **Access component state**: Use `computed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={computed(() => UserInput.value)}\n\n// Access text content\ntext={computed(() => Text1.text)}\n\n// Combine with other state\n            text={computed(() => `${myVariableVar.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component's state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when the page is loaded using the onLoad property of the Page component. You must use the EventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n  registerPage,\n  EventFlow,\n  Page,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runJS(() => {\n        console.log(\"Page loaded\");\n      })}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using EventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n  Page,\n  registerPage,\n  EventFlow,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getOrdersApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrdersApi` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It's not necessary.\nexport const Page1Scope = createScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n";
+export declare const content = "### How to use Page\n\n**Important: Superblocks apps currently support only one page.**\n\n- A Superblocks app consists of a single page that exports a default React component through the `registerPage` function.\n- The page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A Superblocks app consists of a single page located in the `pages/Page1` directory.\n- NEVER change the path of the `pages` directory or the page directories inside it `like `pages/Page1`). If you change these paths or folder names, the app will crash.\n- DO NOT create more than ONE page in an app. Multiple pages is NOT supported!\n\n### Page Structure\n\nThe single page in your Superblocks app should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n  createScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  Text,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  Text1: any;\n}>(\n  () => ({\n    // Define your entities here\n    myVariableVar: SbVariable({\n      defaultValue: \"initial value\",\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    fetchDataApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Text,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  // Destructure entities from the scope for easy access\n  const { Text1, myVariableVar, fetchDataApi } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          {/* Use entities in your components */}\n          <Text bind={Text1} text={computed(() => myVariableVar.value)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `computed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope's type definitions:\n\n```ts\nexport const Page1Scope = createScope<{\n  Text1: any;\n  UserInput: any;\n}>(\n  () => ({\n    // Your other entities (variables, APIs, etc.)\n    myVariableVar: SbVariable({ defaultValue: \"Hello\" }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction PageContent() {\n  const { Text1, UserInput, myVariableVar } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input bind={UserInput} placeholder=\"Enter your name\" />\n          <Text\n            bind={Text1}\n            text={computed(() => `Hello, ${UserInput.value}!`)}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n```\n\n3. **Access component state**: Use `computed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={computed(() => UserInput.value)}\n\n// Access text content\ntext={computed(() => Text1.text)}\n\n// Combine with other state\n            text={computed(() => `${myVariableVar.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component's state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when the page is loaded using the onLoad property of the Page component. You must use the EventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n  registerPage,\n  EventFlow,\n  Page,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runJS(() => {\n        console.log(\"Page loaded\");\n      })}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using EventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n  Page,\n  registerPage,\n  EventFlow,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getOrdersApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrdersApi` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It's not necessary.\nexport const Page1Scope = createScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n";
 //# sourceMappingURL=superblocks-page.d.ts.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-page.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-page.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,2iMAA2iM,CAAC"}
+{"version":3,"file":"superblocks-page.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-page.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,qjMAAqjM,CAAC"}

package/dist/ai-service/prompts/generated/subprompts/superblocks-page.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-page.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.316Z
-export const content = "### How to use Page\n\n**Important: Superblocks apps currently support only one page.**\n\n- A Superblocks app consists of a single page that exports a default React component through the `registerPage` function.\n- The page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A Superblocks app consists of a single page located in the `pages/Page1` directory.\n- NEVER change the path of the `pages` directory or the page directories inside it `like `pages/Page1`). If you change these paths or folder names, the app will crash.\n- DO NOT create more than ONE page in an app. Multiple pages is NOT supported!\n\n### Page Structure\n\nThe single page in your Superblocks app should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n  createScope,\n  StateVar,\n  StateVarPersistence,\n  SbApi,\n  Text,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  Text1: any;\n}>(\n  () => ({\n    // Define your entities here\n    myVariableVar: StateVar({\n      defaultValue: \"initial value\",\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n    fetchDataApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Text,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  // Destructure entities from the scope for easy access\n  const { Text1, myVariableVar, fetchDataApi } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          {/* Use entities in your components */}\n          <Text bind={Text1} text={computed(() => myVariableVar.value)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `computed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope's type definitions:\n\n```ts\nexport const Page1Scope = createScope<{\n  Text1: any;\n  UserInput: any;\n}>(\n  () => ({\n    // Your other entities (variables, APIs, etc.)\n    myVariableVar: StateVar({ defaultValue: \"Hello\" }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction PageContent() {\n  const { Text1, UserInput, myVariableVar } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input bind={UserInput} placeholder=\"Enter your name\" />\n          <Text\n            bind={Text1}\n            text={computed(() => `Hello, ${UserInput.value}!`)}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n```\n\n3. **Access component state**: Use `computed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={computed(() => UserInput.value)}\n\n// Access text content\ntext={computed(() => Text1.text)}\n\n// Combine with other state\n            text={computed(() => `${myVariableVar.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component's state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when the page is loaded using the onLoad property of the Page component. You must use the EventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n  registerPage,\n  EventFlow,\n  Page,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runJS(() => {\n        console.log(\"Page loaded\");\n      })}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using EventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n  Page,\n  registerPage,\n  EventFlow,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getOrdersApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrdersApi` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It's not necessary.\nexport const Page1Scope = createScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n";
+// Generated at: 2025-07-03T16:20:58.430Z
+export const content = "### How to use Page\n\n**Important: Superblocks apps currently support only one page.**\n\n- A Superblocks app consists of a single page that exports a default React component through the `registerPage` function.\n- The page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A Superblocks app consists of a single page located in the `pages/Page1` directory.\n- NEVER change the path of the `pages` directory or the page directories inside it `like `pages/Page1`). If you change these paths or folder names, the app will crash.\n- DO NOT create more than ONE page in an app. Multiple pages is NOT supported!\n\n### Page Structure\n\nThe single page in your Superblocks app should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n  createScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  Text,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  Text1: any;\n}>(\n  () => ({\n    // Define your entities here\n    myVariableVar: SbVariable({\n      defaultValue: \"initial value\",\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    fetchDataApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Text,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  // Destructure entities from the scope for easy access\n  const { Text1, myVariableVar, fetchDataApi } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          {/* Use entities in your components */}\n          <Text bind={Text1} text={computed(() => myVariableVar.value)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `computed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope's type definitions:\n\n```ts\nexport const Page1Scope = createScope<{\n  Text1: any;\n  UserInput: any;\n}>(\n  () => ({\n    // Your other entities (variables, APIs, etc.)\n    myVariableVar: SbVariable({ defaultValue: \"Hello\" }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction PageContent() {\n  const { Text1, UserInput, myVariableVar } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input bind={UserInput} placeholder=\"Enter your name\" />\n          <Text\n            bind={Text1}\n            text={computed(() => `Hello, ${UserInput.value}!`)}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n```\n\n3. **Access component state**: Use `computed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={computed(() => UserInput.value)}\n\n// Access text content\ntext={computed(() => Text1.text)}\n\n// Combine with other state\n            text={computed(() => `${myVariableVar.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component's state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when the page is loaded using the onLoad property of the Page component. You must use the EventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n  registerPage,\n  EventFlow,\n  Page,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runJS(() => {\n        console.log(\"Page loaded\");\n      })}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using EventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n  Page,\n  registerPage,\n  EventFlow,\n  Section,\n  Column,\n  computed,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getOrdersApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>...</Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrdersApi` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It's not necessary.\nexport const Page1Scope = createScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n";
 //# sourceMappingURL=superblocks-page.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-page.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-page.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,0CAA0C;AAC1C,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,wiMAAwiM,CAAC"}
+{"version":3,"file":"superblocks-page.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-page.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,0CAA0C;AAC1C,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,kjMAAkjM,CAAC"}

package/dist/ai-service/prompts/generated/subprompts/superblocks-rbac.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-rbac.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.316Z
+// Generated at: 2025-07-03T16:20:58.430Z
 export const content = "# Role-Based Access Control (RBAC)\n\nSuperblocks provides role-based access control through user groups. You can control component visibility and availability based on the groups that a user belongs to.\n\n## Accessing User Groups\n\nUser groups are available via `Global.user.groups`, which contains an array of group objects with the following structure:\n\n```typescript\n// Global.user.groups is an ARRAY OF OBJECTS, not an array of strings\nGlobal.user.groups: Array<{\n  id: string;\n  name: string;\n}>;\n\n// Example data:\n// [\n//   { id: \"123\", name: \"Admins\" },\n//   { id: \"456\", name: \"Managers\" },\n//   { id: \"789\", name: \"Order Management Admins\" }\n// ]\n```\n\n## Common RBAC Patterns\n\n### Hiding Components Based on User Groups\n\nThe most common way to implement RBAC is by controlling component visibility using the `isVisible` property. Nearly all components support this property.\n\n```javascript\n// Show a component only to users in the \"Admins\" group\n<Button\n  label=\"Admin Action\"\n  isVisible={Global.user.groups.some((g) => g.name === \"Admins\")}\n/>\n\n// Show a component only to users NOT in the \"Guest\" group\n<Container\n  isVisible={!Global.user.groups.some((g) => g.name === \"Guest\")}\n>\n  {/* Content only visible to non-guests */}\n</Container>\n\n// Show a component to users in multiple groups\n<Text\n  text=\"Manager or Admin content\"\n  isVisible={Global.user.groups.some((g) => [\"Managers\", \"Admins\"].includes(g.name))}\n/>\n```\n\n### Disabling Components Based on User Groups\n\nFor interactive components that support the `isDisabled` property (like buttons, inputs, dropdowns, etc.), you can disable functionality while keeping the component visible:\n\n```javascript\n// Disable a button for users not in the \"Editors\" group\n<Button\n  label=\"Edit Record\"\n  isDisabled={!Global.user.groups.some((g) => g.name === \"Editors\")}\n/>\n\n// Disable an input for read-only users\n<Input\n  label=\"Sensitive Data\"\n  defaultValue=\"Some value\"\n  isDisabled={Global.user.groups.some((g) => g.name === \"ReadOnly\")}\n/>\n\n// Enable advanced features only for premium users\n<Dropdown\n  label=\"Advanced Options\"\n  isDisabled={!Global.user.groups.some((g) => g.name === \"Premium\")}\n/>\n```\n\n## Components with RBAC Support\n\n### Components Supporting `isVisible`\n\nAlmost all components support the `isVisible` property, including:\n\n- Button, Text, Input, Dropdown, Container, Image, Icon, Table, Checkbox, Switch, DatePicker, Modal, Slideout, and more.\n\n### Components Supporting `isDisabled`\n\nInteractive components that support the `isDisabled` property include:\n\n- Button, Input, Dropdown, Checkbox, Switch, DatePicker, and other form controls.\n\n## Best Practices\n\n1. **Use `isVisible` for sensitive content**: Hide components that contain sensitive information or actions that users shouldn't see.\n\n2. **Use `isDisabled` for better UX**: When you want users to see that a feature exists but is not available to them, disable the component rather than hiding it.\n\n3. **Group-based logic**: Use group names consistently across your application for easier maintenance.\n\n4. **Fallback handling**: Consider what happens when a user has no groups or unexpected group configurations.\n\n5. **Test thoroughly**: Always test RBAC logic with users from different groups to ensure proper access control.\n\n## Example: Complete RBAC Implementation\n\n```javascript\n// A dashboard with different access levels\n<Container layout=\"vertical\">\n  {/* Everyone can see this */}\n  <Text text=\"Welcome to the Dashboard\" />\n\n  {/* Only visible to authenticated users (not guests) */}\n  <Button\n    label=\"My Profile\"\n    isVisible={!Global.user.groups.some((g) => g.name === \"Guest\")}\n  />\n\n  {/* Visible to managers and admins, but disabled for managers */}\n  <Button\n    label=\"Delete Records\"\n    isVisible={Global.user.groups.some((g) =>\n      [\"Managers\", \"Admins\"].includes(g.name),\n    )}\n    isDisabled={\n      Global.user.groups.some((g) => g.name === \"Managers\") &&\n      !Global.user.groups.some((g) => g.name === \"Admins\")\n    }\n  />\n\n  {/* Admin-only section */}\n  <Container isVisible={Global.user.groups.some((g) => g.name === \"Admins\")}>\n    <Text text=\"Admin Controls\" />\n    <Button label=\"System Settings\" />\n    <Button label=\"User Management\" />\n  </Container>\n</Container>\n```\n";
 //# sourceMappingURL=superblocks-rbac.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-routes.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-routes.md
 // Do not edit this file directly
-// Generated at: 2025-07-05T01:54:42.316Z
+// Generated at: 2025-07-03T16:20:58.430Z
 export const content = "- **IMPORTANT: Superblocks apps support only ONE page. There is only ever a single route mapping to the single page.**\n- The `routes.json` file maps the root URL to the single page in your Superblocks app.\n  Example routes.json file content:\n\n```json\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n```\n\nIn the above example, the '/' route maps to the single Page1 in your Superblocks app.\n\n**Critical: Superblocks apps only support a single page, so the routes.json file should only contain one route mapping to Page1.**\n\nCritical: Page paths in `routes.json` are relative to the 'pages/' directory. In this file, you must never prefix `file` values with 'pages/', or the app will break.\n";
 //# sourceMappingURL=superblocks-routes.js.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-state.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "**Superblocks State System**\n\nThe Superblocks state system is built around scopes that contain entities (variables, APIs, components). Here's how it works:\n\n### 1. Scopes\n\nScopes are defined in a `scope.ts` file for the single page and contain all the page's entities.\n\n- **Page scopes** contain all entities for your single Superblocks page\n- Entities are accessed by importing and destructuring from the scope\n\n> **Parent \u2192 child rule**: Child scopes can read & write parent entities, but parents cannot reach into children.\n\n### 2. Scope Structure\n\nThe single page has a scope file that defines all entities:\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createScope,\n  StateVar,\n  StateVarPersistence,\n  SbApi,\n  computed,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  OrdersTable: any;\n}>(\n  ({ entities: { counterVar } }) => ({\n    // Static state variable with a simple default value\n    counterVar: StateVar({\n      defaultValue: 0,\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n    // State variable with computed default value from other entities\n    doubledCounterVar: StateVar({\n      defaultValue: computed(() => counterVar.value * 2),\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n    retrieveDataApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen in your page component, you import and destructure the entities:\n\n```tsx\n// pages/Page1/index.tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Text,\n  Button,\n  computed,\n  EventFlow,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  // Destructure entities for easy access\n  const { counterVar, doubledCounterVar, retrieveDataApi, OrdersTable } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Text text={computed(() => `Count: ${counterVar.value}`)} />\n          <Button onClick={EventFlow.setStateVar(counterVar, 5)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n```\n\n_You should NOT create any extra scopes other than page scopes in most cases._\n\n### 3. Computed Default Values\n\nState variables can have their `defaultValue` computed from other entities in the same scope at initialization time.\n\n**Static default value:**\n\n```ts\nstaticVar: StateVar({\n  defaultValue: \"Hello World\",\n});\n```\n\n**Computed default value:**\n\n```ts\n({ entities: { Input1, staticVar } }) => ({\n  computedVar: StateVar({\n    defaultValue: computed(() => `${staticVar.value} - ${Input1.value}`),\n  }),\n});\n```\n\nWrap the entire scope object with the entities function and destructure needed entities from the `entities` parameter. This only sets the initial value - it doesn't create ongoing updates.\n\nNote: Always use the correct JavaScript type for your value. For arrays, use `defaultValue: []` instead of `defaultValue: \"[]\"`. Only use strings for values that should actually be strings.\n\n### 4. Entity Types\n\n- **Component state**\n\n  - Declared by defining the component type in the scope and using the `bind` prop\n  - Accessed by destructuring the component entity and using `computed(() => ComponentName.prop)`\n  - Writable if the prop is marked writable in the schema\n\n- **State variable**\n\n  - Declared with `StateVar({ defaultValue })` or within `(({ entities }) => ({ ... }))` wrapper for computed defaults\n  - `defaultValue` sets the initial value when the application loads\n  - For static variables: Only JSON parsable data structures, no functions\n  - For computed variables: Use `computed` within defaultValue to reference other entities\n  - Do not call `defaultValue` like a function. Set values with `EventFlow.setStateVar(importedStateVarEntity, value)` or read with `computed(() => importedStateVarEntity.value)`\n  - Accessed with `computed(() => varName.value)` \u2014 **always include `.value`**\n  - Writable through EventFlow\n\n- **API**\n  - Declared with `SbApi({})` in the scope file.\n  - Accessed with `computed(() => apiName.response)` or `computed(() => apiName.error)`\n  - Read\u2011only\n\n### 5. Reading State with computed\n\n**CRITICAL**: There are two different patterns for accessing data in `computed` depending on what you're accessing:\n\n#### 5.1. Scope Entities (Direct Access)\n\nFor entities defined in your scope file (variables, APIs, components), access them **directly** after destructuring:\n\n```tsx\nconst { UserSearchInput, myVar, retrieveDataApi } = Page1;\n\n// \u2705 CORRECT - Direct access for scope entities\n<Text text={computed(() => `Search: ${UserSearchInput.value}`)} />\n<Text text={computed(() => myVar.value)} />\n<Table tableData={computed(() => retrieveDataApi.response)} />\n```\n\n#### 4.2. Global State (Import Access)\n\nFor global state like globals, theme, environment, and embedded data, import the globals directly from the library:\n\n```tsx\n// \u2705 CORRECT - Import globals directly\n<Text\n  text={computed(() => `Welcome ${Global.user.name}!`)}\n  textStyle={{\n    textColor: {\n      default: computed(() => Theme.colors.neutral900)\n    }\n  }}\n/>\n<Container backgroundColor={computed(() => Theme.colors.primary)} />\n```\n\n#### 5.3. Mixed Access\n\nWhen you need both scope entities and global state in the same `computed`:\n\n```tsx\nconst { ordersVar } = Page1;\n\n// \u2705 CORRECT - Combine direct entity access with imported globals\n<Text\n  text={computed(() => `${ordersVar.length} orders for ${Global.user.name}`)}\n/>;\n```\n\n### 6. Writing State\n\nPreferred approach:\n\n```tsx\nconst { pageSize } = Page1;\nEventFlow.setStateVar(pageSize, 50);\n```\n\nFallback for complex operations:\n\n```tsx\nEventFlow.runJS(() => {\n  // Direct assignment works within EventFlow.runJS\n  pageSize.value = 50;\n});\n```\n\n### 7. CRITICAL Rules\n\n1. **Use component state directly**; NEVER create a state variable for a value that is available directly from a component property.\n2. Use component bindings by defining component types in your scope and using the `bind` prop.\n3. Keep logic declarative \u2014 derive UI from state using `computed` instead of mutating props at runtime.\n4. Always destructure entities from your scope for clean access patterns.\n5. **Use the correct computed pattern**: Direct access for scope entities, import globals (Global, Theme, Embed, Env) for global access.\n6. Always complete implement all features, don't stub out or skip anything.\n7. Everything named inside createScope MUST be unique. You cannot reuse names - they must be unique across the entire scope. You CANNOT reuse names.\n\n**\u2705 Example**\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  ApplicantSelector: any;\n}>(\n  () => ({\n    applicantsVar: StateVar({ defaultValue: [] }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\n// In your page component after destructuring entities\nconst { ApplicantSelector, applicantsVar } = Page1;\n\n<Dropdown bind={ApplicantSelector} options={/* ... */} />\n<Table tableData={computed(() => applicantsVar[ApplicantSelector.selectedOptionValue])} />\n```\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  FirstName: any;\n  LastName: any;\n}>(\n  ({ entities: { FirstName, LastName } }) => ({\n    applicantsVar: StateVar({ defaultValue: [] }),\n    fullNameVar: StateVar({\n      defaultValue: computed(() =>\n        `${FirstName.value} ${LastName.value}`.trim(),\n      ),\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\nconst { FirstName, LastName, fullNameVar } = Page1;\n\n<Input bind={FirstName} placeholder=\"First name\" />\n<Input bind={LastName} placeholder=\"Last name\" />\n<Text text={computed(() => `Welcome ${fullNameVar.value}!`)} />\n```\n\n```tsx\n{\n  /* The user types in the search input, and the value is displayed */\n}\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  searchTermVar: any;\n}>(() => ({}), {\n  name: \"Page1\",\n});\n```\n\n```tsx\nconst { searchTermVar } = Page1;\n\n<Input bind={searchTermVar} />\n<Text text={computed(() => searchTermVar.value)} />\n```\n\n```tsx\n{\n  /* Switch to change into admin mode */\n}\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  isAdminVar: any;\n}>(() => ({}), {\n  name: \"Page1\",\n});\n```\n\n```tsx\nconst { isAdminVar } = Page1;\n\n<Switch bind={isAdminVar} label=\"Use Admin Mode\" defaultChecked={false} />;\n{\n  /* Only enable the delete button when switched into Admin mode */\n}\n<Button\n  disabled={computed(() => !isAdminVar.isChecked)}\n  label=\"Delete profile\"\n/>;\n```\n\n\u2705 ALWAYS USE DIRECT COMPONENT STATE ACCESS WITH computed:\n\n```tsx\n// GOOD - DO THIS\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  UserNameInputVar: any;\n}>(() => ({}), {\n  name: \"Page1\",\n});\n```\n\n```tsx\nconst { UserNameInputVar } = Page1;\n\n<TextInput bind={UserNameInputVar} />\n<Text text={computed(() => `Hello, ${UserNameInputVar.value}!`)} />\n```\n\n\u274C NEVER CREATE REDUNDANT STATE VARIABLES:\n\n```tsx\n// WRONG - DON'T DO THIS\n<TextInput bind={UserNameInputVar} onChange={EventFlow.setStateVar(userNameVar, 'myValue')} />\n<Text text={computed(() => `Hello, ${userNameVar.value}!`)} />\n...\n// And then in scope.ts:\n{\n  userNameVar: StateVar({ defaultValue: \"\" }),\n}\n```\n\nTo reference a property of a component using `computed`, the component must have a binding defined in your scope.\n\nThat's why you should ALWAYS define component bindings in your scope for the following component types when you need to access their state:\n\n- Input\n- Dropdown\n- DatePicker\n- Checkbox\n- Switch\n- Form\n- SbRadio\n- SbRichText\n- FilePicker\n- CodeEditorEditor\n- Chat\n\n\u274C DO NOT USE STATE VARIABLES AS FUNCTIONS:\n\nState variables are not functions. You cannot call them or store functions in defaultValue.\n\n```tsx\n// WRONG - DON'T DO THIS\nfunction Page1() {\n  const { customerNameFilter, filterOrders } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input\n            bind={customerNameFilter}\n            label=\"Customer Name\"\n            placeholder=\"Filter by customer name\"\n            width={Dim.fill()}\n            onTextChanged={EventFlow.runJS(() => {\n              // This is wrong - you cannot call filterOrders as a function\n              filterOrders();\n            })}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\n// And in scope.ts (WRONG):\n{\n  filterOrders: StateVar({\n    defaultValue: () => {\n      // This doesn't work - state variables are not functions\n      const customerNameFilter = customerNameFilter.value.toLowerCase();\n      // ... more logic\n    },\n  });\n}\n```\n\nInstead do the following:\n\n\u2705 COMPUTE VALUES WITH computed AND SET STATE WITH EventFlow:\n\n```tsx\n// CORRECT - DO THIS\nimport {\n  Page,\n  Section,\n  Column,\n  Input,\n  Button,\n  Table,\n  computed,\n  EventFlow,\n  registerPage,\n} from \"@superblocksteam/library\";\n\nfunction Page1() {\n  const { customerNameFilter, filteredOrdersVar, ordersVar } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input\n            bind={customerNameFilter}\n            label=\"Customer Name\"\n            placeholder=\"Filter by customer name\"\n            width={Dim.fill()}\n            onTextChanged={EventFlow.runJS(() => {\n              // Repeat the filtering logic inline - do NOT create helper functions\n              const filtered = ordersVar.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              // Set the state variable with the computed result\n              filteredOrdersVar.value = filtered;\n            })}\n          />\n          {/* If you need the same filtering logic elsewhere, repeat it inline */}\n          <Button\n            label=\"Apply Filter\"\n            onClick={EventFlow.runJS(() => {\n              // Repeat the same filtering logic here - code repetition is preferred\n              const filtered = ordersVar.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              filteredOrdersVar.value = filtered;\n            })}\n          />\n          <Table tableData={computed(() => filteredOrdersVar.value)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(Page1, Page1Scope);\n```\n\nAnd in your scope.ts file:\n\n```ts\nexport const Page1Scope = createScope<{\n  customerNameFilterVar: any;\n}>(\n  () => ({\n    ordersVar: StateVar({\n      defaultValue: [\n        {\n          id: \"ORD-1001\",\n          customerName: \"John Smith\",\n          orderType: \"Grocery Delivery\",\n        },\n        {\n          id: \"ORD-1002\",\n          customerName: \"Emily Johnson\",\n          orderType: \"Express Delivery\",\n        },\n      ],\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n    filteredOrdersVar: StateVar({\n      defaultValue: [],\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n";
+export declare const content = "**Superblocks State System**\n\nThe Superblocks state system is built around scopes that contain entities (variables, APIs, components). Here's how it works:\n\n### 1. Scopes\n\nScopes are defined in a `scope.ts` file for the single page and contain all the page's entities.\n\n- **Page scopes** contain all entities for your single Superblocks page\n- Entities are accessed by importing and destructuring from the scope\n\n> **Parent \u2192 child rule**: Child scopes can read & write parent entities, but parents cannot reach into children.\n\n### 2. Scope Structure\n\nThe single page has a scope file that defines all entities:\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  computed,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  OrdersTable: any;\n}>(\n  ({ entities: { counterVar } }) => ({\n    // Static state variable with a simple default value\n    counterVar: SbVariable({\n      defaultValue: 0,\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    // State variable with computed default value from other entities\n    doubledCounterVar: SbVariable({\n      defaultValue: computed(() => counterVar.value * 2),\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    retrieveDataApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen in your page component, you import and destructure the entities:\n\n```tsx\n// pages/Page1/index.tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Text,\n  Button,\n  computed,\n  EventFlow,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  // Destructure entities for easy access\n  const { counterVar, doubledCounterVar, retrieveDataApi, OrdersTable } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Text text={computed(() => `Count: ${counterVar.value}`)} />\n          <Button onClick={EventFlow.setStateVar(counterVar, 5)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n```\n\n_You should NOT create any extra scopes other than page scopes in most cases._\n\n### 3. Computed Default Values\n\nState variables can have their `defaultValue` computed from other entities in the same scope at initialization time.\n\n**Static default value:**\n\n```ts\nstaticVar: SbVariable({\n  defaultValue: \"Hello World\",\n});\n```\n\n**Computed default value:**\n\n```ts\n({ entities: { Input1, staticVar } }) => ({\n  computedVar: SbVariable({\n    defaultValue: computed(() => `${staticVar.value} - ${Input1.value}`),\n  }),\n});\n```\n\nWrap the entire scope object with the entities function and destructure needed entities from the `entities` parameter. This only sets the initial value - it doesn't create ongoing updates.\n\nNote: Always use the correct JavaScript type for your value. For arrays, use `defaultValue: []` instead of `defaultValue: \"[]\"`. Only use strings for values that should actually be strings.\n\n### 4. Entity Types\n\n- **Component state**\n\n  - Declared by defining the component type in the scope and using the `bind` prop\n  - Accessed by destructuring the component entity and using `computed(() => ComponentName.prop)`\n  - Writable if the prop is marked writable in the schema\n\n- **State variable**\n\n  - Declared with `SbVariable({ defaultValue })` or within `(({ entities }) => ({ ... }))` wrapper for computed defaults\n  - `defaultValue` sets the initial value when the application loads\n  - For static variables: Only JSON parsable data structures, no functions\n  - For computed variables: Use `computed` within defaultValue to reference other entities\n  - Do not call `defaultValue` like a function. Set values with `EventFlow.setStateVar(importedStateVarEntity, value)` or read with `computed(() => importedStateVarEntity.value)`\n  - Accessed with `computed(() => varName.value)` \u2014 **always include `.value`**\n  - Writable through EventFlow\n\n- **API**\n  - Declared with `SbApi({})` in the scope file.\n  - Accessed with `computed(() => apiName.response)` or `computed(() => apiName.error)`\n  - Read\u2011only\n\n### 5. Reading State with computed\n\n**CRITICAL**: There are two different patterns for accessing data in `computed` depending on what you're accessing:\n\n#### 5.1. Scope Entities (Direct Access)\n\nFor entities defined in your scope file (variables, APIs, components), access them **directly** after destructuring:\n\n```tsx\nconst { UserSearchInput, myVar, retrieveDataApi } = Page1;\n\n// \u2705 CORRECT - Direct access for scope entities\n<Text text={computed(() => `Search: ${UserSearchInput.value}`)} />\n<Text text={computed(() => myVar.value)} />\n<Table tableData={computed(() => retrieveDataApi.response)} />\n```\n\n#### 4.2. Global State (Import Access)\n\nFor global state like globals, theme, environment, and embedded data, import the globals directly from the library:\n\n```tsx\n// \u2705 CORRECT - Import globals directly\n<Text\n  text={computed(() => `Welcome ${Global.user.name}!`)}\n  textStyle={{\n    textColor: {\n      default: computed(() => Theme.colors.neutral900)\n    }\n  }}\n/>\n<Container backgroundColor={computed(() => Theme.colors.primary)} />\n```\n\n#### 5.3. Mixed Access\n\nWhen you need both scope entities and global state in the same `computed`:\n\n```tsx\nconst { ordersVar } = Page1;\n\n// \u2705 CORRECT - Combine direct entity access with imported globals\n<Text\n  text={computed(() => `${ordersVar.length} orders for ${Global.user.name}`)}\n/>;\n```\n\n### 6. Writing State\n\nPreferred approach:\n\n```tsx\nconst { pageSize } = Page1;\nEventFlow.setStateVar(pageSize, 50);\n```\n\nFallback for complex operations:\n\n```tsx\nEventFlow.runJS(() => {\n  // Direct assignment works within EventFlow.runJS\n  pageSize.value = 50;\n});\n```\n\n### 7. CRITICAL Rules\n\n1. **Use component state directly**; NEVER create a state variable for a value that is available directly from a component property.\n2. Use component bindings by defining component types in your scope and using the `bind` prop.\n3. Keep logic declarative \u2014 derive UI from state using `computed` instead of mutating props at runtime.\n4. Always destructure entities from your scope for clean access patterns.\n5. **Use the correct computed pattern**: Direct access for scope entities, import globals (Global, Theme, Embed, Env) for global access.\n6. Always complete implement all features, don't stub out or skip anything.\n7. Everything named inside createScope MUST be unique. You cannot reuse names - they must be unique across the entire scope. You CANNOT reuse names.\n\n**\u2705 Example**\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  ApplicantSelector: any;\n}>(\n  () => ({\n    applicantsVar: SbVariable({ defaultValue: [] }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\n// In your page component after destructuring entities\nconst { ApplicantSelector, applicantsVar } = Page1;\n\n<Dropdown bind={ApplicantSelector} options={/* ... */} />\n<Table tableData={computed(() => applicantsVar[ApplicantSelector.selectedOptionValue])} />\n```\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  FirstName: any;\n  LastName: any;\n}>(\n  ({ entities: { FirstName, LastName } }) => ({\n    applicantsVar: SbVariable({ defaultValue: [] }),\n    fullNameVar: SbVariable({\n      defaultValue: computed(() =>\n        `${FirstName.value} ${LastName.value}`.trim(),\n      ),\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\nconst { FirstName, LastName, fullNameVar } = Page1;\n\n<Input bind={FirstName} placeholder=\"First name\" />\n<Input bind={LastName} placeholder=\"Last name\" />\n<Text text={computed(() => `Welcome ${fullNameVar.value}!`)} />\n```\n\n```tsx\n{\n  /* The user types in the search input, and the value is displayed */\n}\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  searchTermVar: any;\n}>(() => ({}), {\n  name: \"Page1\",\n});\n```\n\n```tsx\nconst { searchTermVar } = Page1;\n\n<Input bind={searchTermVar} />\n<Text text={computed(() => searchTermVar.value)} />\n```\n\n```tsx\n{\n  /* Switch to change into admin mode */\n}\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  isAdminVar: any;\n}>(() => ({}), {\n  name: \"Page1\",\n});\n```\n\n```tsx\nconst { isAdminVar } = Page1;\n\n<Switch bind={isAdminVar} label=\"Use Admin Mode\" defaultChecked={false} />;\n{\n  /* Only enable the delete button when switched into Admin mode */\n}\n<Button\n  disabled={computed(() => !isAdminVar.isChecked)}\n  label=\"Delete profile\"\n/>;\n```\n\n\u2705 ALWAYS USE DIRECT COMPONENT STATE ACCESS WITH computed:\n\n```tsx\n// GOOD - DO THIS\n// In your scope.ts file\nexport const Page1Scope = createScope<{\n  UserNameInputVar: any;\n}>(() => ({}), {\n  name: \"Page1\",\n});\n```\n\n```tsx\nconst { UserNameInputVar } = Page1;\n\n<TextInput bind={UserNameInputVar} />\n<Text text={computed(() => `Hello, ${UserNameInputVar.value}!`)} />\n```\n\n\u274C NEVER CREATE REDUNDANT STATE VARIABLES:\n\n```tsx\n// WRONG - DON'T DO THIS\n<TextInput bind={UserNameInputVar} onChange={EventFlow.setStateVar(userNameVar, 'myValue')} />\n<Text text={computed(() => `Hello, ${userNameVar.value}!`)} />\n...\n// And then in scope.ts:\n{\n  userNameVar: SbVariable({ defaultValue: \"\" }),\n}\n```\n\nTo reference a property of a component using `computed`, the component must have a binding defined in your scope.\n\nThat's why you should ALWAYS define component bindings in your scope for the following component types when you need to access their state:\n\n- Input\n- Dropdown\n- DatePicker\n- Checkbox\n- Switch\n- Form\n- SbRadio\n- SbRichText\n- FilePicker\n- CodeEditorEditor\n- Chat\n\n\u274C DO NOT USE STATE VARIABLES AS FUNCTIONS:\n\nState variables are not functions. You cannot call them or store functions in defaultValue.\n\n```tsx\n// WRONG - DON'T DO THIS\nfunction Page1() {\n  const { customerNameFilter, filterOrders } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input\n            bind={customerNameFilter}\n            label=\"Customer Name\"\n            placeholder=\"Filter by customer name\"\n            width={Dim.fill()}\n            onTextChanged={EventFlow.runJS(() => {\n              // This is wrong - you cannot call filterOrders as a function\n              filterOrders();\n            })}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\n// And in scope.ts (WRONG):\n{\n  filterOrders: SbVariable({\n    defaultValue: () => {\n      // This doesn't work - state variables are not functions\n      const customerNameFilter = customerNameFilter.value.toLowerCase();\n      // ... more logic\n    },\n  });\n}\n```\n\nInstead do the following:\n\n\u2705 COMPUTE VALUES WITH computed AND SET STATE WITH EventFlow:\n\n```tsx\n// CORRECT - DO THIS\nimport {\n  Page,\n  Section,\n  Column,\n  Input,\n  Button,\n  Table,\n  computed,\n  EventFlow,\n  registerPage,\n} from \"@superblocksteam/library\";\n\nfunction Page1() {\n  const { customerNameFilter, filteredOrdersVar, ordersVar } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input\n            bind={customerNameFilter}\n            label=\"Customer Name\"\n            placeholder=\"Filter by customer name\"\n            width={Dim.fill()}\n            onTextChanged={EventFlow.runJS(() => {\n              // Repeat the filtering logic inline - do NOT create helper functions\n              const filtered = ordersVar.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              // Set the state variable with the computed result\n              filteredOrdersVar.value = filtered;\n            })}\n          />\n          {/* If you need the same filtering logic elsewhere, repeat it inline */}\n          <Button\n            label=\"Apply Filter\"\n            onClick={EventFlow.runJS(() => {\n              // Repeat the same filtering logic here - code repetition is preferred\n              const filtered = ordersVar.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              filteredOrdersVar.value = filtered;\n            })}\n          />\n          <Table tableData={computed(() => filteredOrdersVar.value)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(Page1, Page1Scope);\n```\n\nAnd in your scope.ts file:\n\n```ts\nexport const Page1Scope = createScope<{\n  customerNameFilterVar: any;\n}>(\n  () => ({\n    ordersVar: SbVariable({\n      defaultValue: [\n        {\n          id: \"ORD-1001\",\n          customerName: \"John Smith\",\n          orderType: \"Grocery Delivery\",\n        },\n        {\n          id: \"ORD-1002\",\n          customerName: \"Emily Johnson\",\n          orderType: \"Express Delivery\",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    filteredOrdersVar: SbVariable({\n      defaultValue: [],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n";
 //# sourceMappingURL=superblocks-state.d.ts.map

package/dist/ai-service/prompts/generated/subprompts/superblocks-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"superblocks-state.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-state.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,8sbAAkpb,CAAC"}
+{"version":3,"file":"superblocks-state.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-state.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,kvbAAsrb,CAAC"}