@superblocksteam/vite-plugin-file-sync 2.0.34 → 2.0.35-next.0

package/dist/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.js

@@ -1,6 +1,5 @@
 // Auto-generated sub-index
 // Do not edit this file directly
-export { content as Annotations } from "./Annotations.js";
 export { content as Dim } from "./Dim.js";
 export { content as EventFlow } from "./EventFlow.js";
 export { content as TextStyleWithVariant } from "./TextStyleWithVariant.js";

package/dist/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,iCAAiC;AAEjC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-typedefs/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,iCAAiC;AAEjC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "### FULL EXAMPLES\n\n#### Full example 1:\n\nBelow is a full example of a user's prompt and acceptable app. Note that AppHeader, AppSidebar, MetricCard and Chart components are part of the default set of custom components available in every app.\n\nGiven this prompt:\n\n```text\nCreate a restaurant delivery dashboard with the following features:\n\n- A sidebar with navigation for restaurants, orders, and delivery sections\n- Key metrics displayed as cards showing total orders, active restaurants, active drivers, and average delivery time\n- A chart showing order trends over time\n- A filterable table of restaurants with search by name, cuisine type, and status\n- The ability to edit restaurant details through a modal\n- All data should be dynamically filtered based on user input\n```\n\nFiles generated:\n\n```pages/Page1/scope.ts\nimport {\n  createScope,\n  SbApi,\n  EventFlow,\n  StateVar,\n  computed,\n} from \"@superblocksteam/library\";\nexport const Page1Scope = createScope<{\n  Column1: any;\n  AppSidebar1: any;\n  AppHeader1: any;\n  MetricCard1: any;\n  MetricCard2: any;\n  MetricCard3: any;\n  MetricCard4: any;\n  RevenueChart: any;\n  RestaurantsTable: any;\n  Modal1: any;\n  RestaurantNameInput: any;\n  CuisineTypeDropdown: any;\n  StatusDropdown: any;\n  ResetButton: any;\n  CustomerNameInput: any;\n  PurchaseTypeDropdown: any;\n  CustomersTable: any;\n  ModalRestaurantNameInput: any;\n  ModalRestaurantEmailInput: any;\n  ModalRestaurantOwnerInput: any;\n  ModalRestaurantCuisineDropdown: any;\n  ModalRestaurantStatusDropdown: any;\n}>(\n  ({\n    entities: {\n      Column1,\n      AppSidebar1,\n      AppHeader1,\n      MetricCard1,\n      MetricCard2,\n      MetricCard3,\n      MetricCard4,\n      RevenueChart,\n      RestaurantsTable,\n      Modal1,\n      RestaurantNameInput,\n      CuisineTypeDropdown,\n      StatusDropdown,\n      ResetButton,\n      CustomerNameInput,\n      PurchaseTypeDropdown,\n      CustomersTable,\n      getMetricsApi,\n      getRestaurantsDataApi,\n      ChartDataVar,\n      RestaurantsTableDataVar,\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n      updateRestaurantApi,\n    },\n  }) => ({\n    getMetricsApi: SbApi({}),\n    getRestaurantsDataApi: SbApi({}),\n    ChartDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"];\n        return months.map((month) => {\n          const totalOrders = data.reduce((sum: number, restaurant: any) => {\n            return sum + (restaurant.monthlyOrders[month] || 0);\n          }, 0);\n          return {\n            name: month,\n            orders: totalOrders,\n          };\n        });\n      }),\n    }),\n    RestaurantsTableDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        return data.map((restaurant: any) => ({\n          photo: restaurant.photo,\n          name: restaurant.name,\n          email: restaurant.email,\n          cuisine: restaurant.cuisine,\n          owner: restaurant.owner,\n          status: restaurant.status,\n          date_joined: restaurant.date_joined,\n          last_activity: restaurant.last_activity,\n        }));\n      }),\n    }),\n    updateRestaurantApi: SbApi({\n      onError: EventFlow.controlModal(Modal1, { action: \"close\" }),\n      onSuccess: EventFlow.runApis([getRestaurantsDataApi]),\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\nexport const Page1 = Page1Scope.entities;\n```\n\nNote that the layout in the index file here makes use of Container components to logically group sections and ensure everything is spaced out and aligned well.\n\n```pages/Page1/index.tsx\nimport {\n  Page,\n  Dim,\n  Section,\n  Column,\n  registerPage,\n  Table,\n  computed,\n  Container,\n  Input,\n  Dropdown,\n  Button,\n  EventFlow,\n  Modal,\n  Text,\n  Icon,\n  Theme,\n} from \"@superblocksteam/library\";\nimport Chart from \"components/Chart/Chart\";\nimport MetricCard from \"components/MetricCard/MetricCard\";\nimport AppHeader from \"components/AppHeader/AppHeader\";\nimport AppSidebar from \"components/AppSidebar/AppSidebar\";\nimport KeyValue from \"components/KeyValue\";\nimport { Page1, Page1Scope } from \"./scope\";\nfunction PageContent() {\n  const {\n    Column1,\n    AppSidebar1,\n    AppHeader1,\n    MetricCard1,\n    MetricCard2,\n    MetricCard3,\n    MetricCard4,\n    RevenueChart,\n    RestaurantsTable,\n    Modal1,\n    RestaurantNameInput,\n    CuisineTypeDropdown,\n    StatusDropdown,\n    ResetButton,\n    CustomerNameInput,\n    PurchaseTypeDropdown,\n    CustomersTable,\n    ModalRestaurantNameInput,\n    ModalRestaurantEmailInput,\n    ModalRestaurantOwnerInput,\n    ModalRestaurantCuisineDropdown,\n    ModalRestaurantStatusDropdown,\n    getMetricsApi,\n    getRestaurantsDataApi,\n    ChartDataVar,\n    RestaurantsTableDataVar,\n    updateRestaurantApi,\n  } = Page1;\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getMetricsApi, getRestaurantsDataApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column\n          width={Dim.fit()}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n        >\n          <AppSidebar\n            width={Dim.fill()}\n            bind={AppSidebar1}\n            logoUrl=\"your-app-logo-url.png\"\n            sidebarLinks={[\n              {\n                header: \"Restaurants\",\n                links: [\n                  {\n                    label: \"All Restaurants\",\n                    icon: \"restaurant\",\n                  },\n                  {\n                    label: \"Onboarding\",\n                    icon: \"add_business\",\n                  },\n                ],\n              },\n              {\n                header: \"Orders\",\n                links: [\n                  {\n                    label: \"Active Orders\",\n                    icon: \"receipt_long\",\n                  },\n                  {\n                    label: \"Order History\",\n                    icon: \"history\",\n                  },\n                ],\n              },\n              {\n                header: \"Delivery\",\n                links: [\n                  {\n                    label: \"Drivers\",\n                    icon: \"directions_car\",\n                  },\n                  {\n                    label: \"Live Tracking\",\n                    icon: \"map\",\n                  },\n                  {\n                    label: \"Analytics\",\n                    icon: \"analytics\",\n                  },\n                ],\n              },\n            ]}\n            height={Dim.fill()}\n          />\n        </Column>\n        <Column\n          width={Dim.fill()}\n          bind={Column1}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n          spacing={Dim.px(0)}\n        >\n          <AppHeader\n            width={Dim.fill()}\n            height={Dim.fit()}\n            bind={AppHeader1}\n            title=\"Delivery Dashboard\"\n            avatarUrl=\"your-user-avatar-here.png\"\n            userEmail=\"user@workdoamin.com\"\n          />\n          <Container\n            width={Dim.fill()}\n            height={Dim.fill()}\n            layout=\"vertical\"\n            padding={{\n              top: {\n                value: 12,\n                mode: \"px\",\n              },\n              bottom: {\n                value: 12,\n                mode: \"px\",\n              },\n              left: {\n                value: 12,\n                mode: \"px\",\n              },\n              right: {\n                value: 12,\n                mode: \"px\",\n              },\n            }}\n          >\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              layout=\"horizontal\"\n            >\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard1}\n                title=\"Total Orders\"\n                value={computed(\n                  () => getMetricsApi.response?.totalOrders.value,\n                )}\n                changeValue={computed(\n                  () => getMetricsApi.response?.totalOrders.changeValue,\n                )}\n                changeType={getMetricsApi.response?.totalOrders.changeType}\n                icon=\"receipt_long\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard2}\n                title=\"Active Restaurants\"\n                value={computed(\n                  () => getMetricsApi.response?.activeRestaurants.value,\n                )}\n                changeValue={\n                  getMetricsApi.response?.activeRestaurants.changeValue\n                }\n                changeType={\n                  getMetricsApi.response?.activeRestaurants.changeType\n                }\n                icon=\"restaurant\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard3}\n                title=\"Active Drivers\"\n                value={computed(\n                  () => getMetricsApi.response?.activeDrivers.value,\n                )}\n                changeValue={getMetricsApi.response?.activeDrivers.changeValue}\n                changeType={getMetricsApi.response?.activeDrivers.changeType}\n                icon=\"directions_car\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard4}\n                title=\"Avg Delivery Time\"\n                value={getMetricsApi.response?.avgDeliveryTime.value}\n                changeType={getMetricsApi.response?.avgDeliveryTime.changeType}\n                icon=\"schedule\"\n                changeValue={computed(\n                  () => getMetricsApi.response?.avgDeliveryTime.changeValue,\n                )}\n              />\n            </Container>\n            <Chart\n              width={Dim.fill()}\n              height={Dim.px(180)}\n              bind={RevenueChart}\n              title=\"Orders\"\n              data={computed(() => ChartDataVar.value || [])}\n            />\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              variant=\"card\"\n              layout=\"horizontal\"\n              verticalAlign=\"bottom\"\n            >\n              <Input\n                label=\"Restaurant Name\"\n                placeholderText=\"Search restaurants...\"\n                bind={RestaurantNameInput}\n              />\n              <Dropdown\n                label=\"Cuisine Type\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Italian\",\n                    value: \"Italian\",\n                  },\n                  {\n                    label: \"Chinese\",\n                    value: \"Chinese\",\n                  },\n                  {\n                    label: \"Mexican\",\n                    value: \"Mexican\",\n                  },\n                  {\n                    label: \"American\",\n                    value: \"American\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={CuisineTypeDropdown}\n              />\n              <Dropdown\n                label=\"Status\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Online\",\n                    value: \"Online\",\n                  },\n                  {\n                    label: \"Offline\",\n                    value: \"Offline\",\n                  },\n                  {\n                    label: \"Busy\",\n                    value: \"Busy\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={StatusDropdown}\n              />\n              <Button\n                label=\"Reset Filters\"\n                bind={ResetButton}\n                onClick={EventFlow.runJS(() => {\n                  RestaurantNameInput.text = \"\";\n                  CuisineTypeDropdown.metaSelectedOptionValue = \"All\";\n                  StatusDropdown.metaSelectedOptionValue = \"All\";\n                })}\n              />\n            </Container>\n            <Table\n              width={Dim.fill()}\n              height={Dim.fit()}\n              tableData={computed(() => RestaurantsTableDataVar.value || [])}\n              columns={{\n                name: {\n                  columnType: \"text\",\n                  label: \"Restaurant\",\n                },\n                email: {\n                  columnType: \"email\",\n                  label: \"Email\",\n                },\n                cuisine: {\n                  columnType: \"text\",\n                  label: \"Cuisine\",\n                },\n                owner: {\n                  columnType: \"text\",\n                  label: \"Owner\",\n                },\n                status: {\n                  columnType: \"tags\",\n                  tagDisplayConfig: {\n                    Online: {\n                      color: \"#14CDB733\",\n                    },\n                    Busy: {\n                      color: \"#FF9F3533\",\n                    },\n                    Offline: {\n                      color: \"#a6a0a033\",\n                    },\n                  },\n                  label: \"Status\",\n                },\n                date_joined: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DD\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Date joined\",\n                },\n                last_activity: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DDTHH:mm:ssZ\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Last activity\",\n                },\n                photo: {\n                  columnType: \"image\",\n                  label: \"Photo\",\n                  imageBorderRadius: {\n                    topLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    topRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                  },\n                },\n              }}\n              header=\"Restaurants\"\n              isSearchable={false}\n              bind={RestaurantsTable}\n              onRowClick={EventFlow.runJS(() => {\n                // set values of all the modal inputs to the values of the selected row\n                ModalRestaurantNameInput.text =\n                  RestaurantsTable.selectedRow?.name;\n                ModalRestaurantEmailInput.text =\n                  RestaurantsTable.selectedRow?.email;\n                ModalRestaurantOwnerInput.text =\n                  RestaurantsTable.selectedRow?.owner;\n                ModalRestaurantCuisineDropdown.metaSelectedOptionValue =\n                  RestaurantsTable.selectedRow?.cuisine;\n                ModalRestaurantStatusDropdown.metaSelectedOptionValue =\n                  RestaurantsTable.selectedRow?.status;\n              }).controlModal(Modal1, { action: \"open\" })}\n              paginationType=\"client-side\"\n              configuredPageSize={10}\n            />\n          </Container>\n        </Column>\n      </Section>\n      <Modal\n        width={Dim.fill()}\n        height={Dim.fit()}\n        bind={Modal1}\n        spacing={Dim.px(0)}\n        padding={{\n          top: {\n            value: 0,\n            mode: \"px\",\n          },\n          bottom: {\n            value: 0,\n            mode: \"px\",\n          },\n          left: {\n            value: 0,\n            mode: \"px\",\n          },\n          right: {\n            value: 0,\n            mode: \"px\",\n          },\n        }}\n      >\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          layout=\"vertical\"\n          spacing={Dim.px(4)}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Text\n            text={computed(() => {\n              return RestaurantsTable.selectedRow?.name || \"Restaurant Details\";\n            })}\n            textStyle={{\n              variant: \"heading3\",\n            }}\n          />\n        </Container>\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n        >\n          {/* <Text\n            text={computed(() => {\n              return `Joined ${RestaurantsTable.selectedRow?.date_joined} and last active ${RestaurantsTable.selectedRow?.last_activity}`;\n            })}\n            textStyle={{\n              variant: \"body2\",\n            }}\n            isVisible={computed(() => {\n              return (\n                RestaurantsTable.selectedRow?.date_joined !== undefined &&\n                RestaurantsTable.selectedRow?.last_activity !== undefined\n              );\n            })}\n           /> */}\n\n          <Input label=\"Restaurant Name\" bind={ModalRestaurantNameInput} />\n          <Input label=\"Email\" bind={ModalRestaurantEmailInput} />\n          <Input label=\"Owner\" bind={ModalRestaurantOwnerInput} />\n          <Dropdown\n            label=\"Cuisine\"\n            options={[\n              {\n                label: \"Italian\",\n                value: \"Italian\",\n              },\n              {\n                label: \"Chinese\",\n                value: \"Chinese\",\n              },\n              {\n                label: \"Mexican\",\n                value: \"Mexican\",\n              },\n              {\n                label: \"American\",\n                value: \"American\",\n              },\n            ]}\n            bind={ModalRestaurantCuisineDropdown}\n          />\n          <Dropdown\n            label=\"Status\"\n            options={[\n              {\n                label: \"Online\",\n                value: \"Online\",\n              },\n              {\n                label: \"Offline\",\n                value: \"Offline\",\n              },\n              {\n                label: \"Busy\",\n                value: \"Busy\",\n              },\n            ]}\n            bind={ModalRestaurantStatusDropdown}\n          />\n        </Container>\n        <Container\n          spacing={Dim.px(8)}\n          width={Dim.fill()}\n          variant=\"none\"\n          layout=\"horizontal\"\n          horizontalAlign=\"right\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Button\n            label=\"Close\"\n            variant=\"secondary\"\n            onClick={EventFlow.controlModal(Modal1, { action: \"close\" })}\n          />\n          <Button\n            label=\"Save Changes\"\n            onClick={EventFlow.runApis([updateRestaurantApi]).controlModal(\n              Modal1,\n              { action: \"close\" },\n            )}\n          />\n        </Container>\n      </Modal>\n    </Page>\n  );\n}\nexport default registerPage(PageContent, Page1Scope);\n```\n\n```pages/Page1/apis/getMetricsApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getMetricsApi\", [\n  new JavaScript(\"getMetrics\", {\n    fn: () => {\n      return {\n        totalOrders: {\n          value: \"24.7K\",\n          changeValue: \"+18.2%\",\n          changeType: \"positive\",\n        },\n        activeRestaurants: {\n          value: \"1.8K\",\n          changeValue: \"+12.5%\",\n          changeType: \"positive\",\n        },\n        activeDrivers: {\n          value: \"523\",\n          changeValue: \"+5.8%\",\n          changeType: \"positive\",\n        },\n        avgDeliveryTime: {\n          value: \"28 min\",\n          changeValue: \"-2.3 min\",\n          changeType: \"positive\",\n        },\n      };\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/getRestaurantsDataApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getRestaurantsDataApi\", [\n  new JavaScript(\"getData\", {\n    fn: () => {\n      return [\n        {\n          photo: \"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=50&h=50&fit=crop&crop=face\",\n          name: \"Bella Vista Italian\",\n          email: \"contact@bellavista.com\",\n          cuisine: \"Italian\",\n          owner: \"Marco Rossi\",\n          status: \"Active\",\n          date_joined: \"2023-01-15\",\n          last_activity: \"2024-01-20\",\n          monthlyOrders: {\n            Jan: 450,\n            Feb: 520,\n            Mar: 480,\n            Apr: 610,\n            May: 590,\n            Jun: 650,\n            Jul: 720,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=50&h=50&fit=crop&crop=face\",\n          name: \"Golden Dragon\",\n          email: \"info@goldendragon.com\",\n          cuisine: \"Chinese\",\n          owner: \"Wei Chen\",\n          status: \"Active\",\n          date_joined: \"2023-02-22\",\n          last_activity: \"2024-01-19\",\n          monthlyOrders: {\n            Jan: 380,\n            Feb: 420,\n            Mar: 460,\n            Apr: 510,\n            May: 540,\n            Jun: 580,\n            Jul: 620,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=50&h=50&fit=crop&crop=face\",\n          name: \"Taco Fiesta\",\n          email: \"orders@tacofiesta.com\",\n          cuisine: \"Mexican\",\n          owner: \"Carlos Rodriguez\",\n          status: \"Pending\",\n          date_joined: \"2023-12-10\",\n          last_activity: \"2024-01-18\",\n          monthlyOrders: {\n            Jan: 280,\n            Feb: 320,\n            Mar: 350,\n            Apr: 390,\n            May: 420,\n            Jun: 450,\n            Jul: 480,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1571091718767-18b5b1457add?w=50&h=50&fit=crop&crop=face\",\n          name: \"Burger Palace\",\n          email: \"hello@burgerpalace.com\",\n          cuisine: \"American\",\n          owner: \"John Smith\",\n          status: \"Active\",\n          date_joined: \"2022-11-08\",\n          last_activity: \"2024-01-21\",\n          monthlyOrders: {\n            Jan: 680,\n            Feb: 720,\n            Mar: 650,\n            Apr: 780,\n            May: 810,\n            Jun: 850,\n            Jul: 920,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=50&h=50&fit=crop&crop=face\",\n          name: \"Sakura Sushi\",\n          email: \"reservations@sakurasushi.com\",\n          cuisine: \"Japanese\",\n          owner: \"Takeshi Yamamoto\",\n          status: \"Inactive\",\n          date_joined: \"2023-06-12\",\n          last_activity: \"2023-12-15\",\n          monthlyOrders: {\n            Jan: 320,\n            Feb: 280,\n            Mar: 260,\n            Apr: 240,\n            May: 200,\n            Jun: 180,\n            Jul: 150,\n          },\n        },\n      ];\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/updateRestaurantApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"updateRestaurantApi\", [\n  new Conditional(\"validate_inputs\", {\n    if: {\n      when: ({\n        ModalRestaurantNameInput,\n        ModalRestaurantEmailInput,\n        ModalRestaurantOwnerInput,\n      }): boolean =>\n        !ModalRestaurantNameInput.value ||\n        !ModalRestaurantEmailInput.value ||\n        !ModalRestaurantOwnerInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Restaurant name, email, and owner are required fields\",\n        }),\n      ],\n    },\n  }),\n  new JavaScript(\"updateRestaurantData\", {\n    fn: ({\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n    }) => {\n      const updatedRestaurant = {\n        name: ModalRestaurantNameInput.value,\n        email: ModalRestaurantEmailInput.value,\n        cuisine: ModalRestaurantCuisineDropdown.selectedOptionValue,\n        owner: ModalRestaurantOwnerInput.value,\n        status: ModalRestaurantStatusDropdown.selectedOptionValue,\n        updated_at: new Date().toISOString(),\n      };\n\n      return {\n        success: true,\n        message: \"Restaurant updated successfully\",\n        data: updatedRestaurant,\n      };\n    },\n  }),\n]);\n```\n\n##### Important notes about the choices made in the code generated here:\n\n1. **API Implementation Strategy**: All APIs use dummy data implementations for demonstration purposes. In production applications:\n\n   - `getMetricsApi` and `getRestaurantsDataApi` should connect to actual databases or external services using SQL queries, REST API calls, or other data connectors\n   - `updateRestaurantApi` should perform real database updates or API calls to persist changes\n   - Consider replacing dummy implementations with actual integrations when users specify particular data sources in their prompts\n\n2. **Layout Architecture**:\n\n   - `Column` components have padding removed to allow `AppSidebar` and `AppHeader` to extend to screen edges\n   - Content sections use `Container` components for proper spacing and alignment\n   - This pattern ensures consistent visual hierarchy and responsive behavior\n\n3. **Component Styling Patterns**:\n\n   - Filter controls are wrapped together in a `Container` with `variant=\"card\"` to provide visual containment\n   - Components like `MetricCard`, `Table`, and `Chart` have built-in containers and don't require additional wrapping\n   - Form elements (`Input`, `Dropdown`, `Button`) need explicit container styling for proper presentation\n\n4. **State Management**:\n\n   - Computed variables (`ChartDataVar`, `RestaurantsTableDataVar`) automatically recalculate when filter inputs change\n   - Modal state is managed through event flows that handle open/close actions and API responses\n   - Error handling and validation are implemented at the API level with appropriate user feedback\n";
+export declare const content = "### FULL EXAMPLES\n\n#### Full example 1:\n\nBelow is a full example of a user's prompt and acceptable app. Note that AppHeader, AppSidebar, MetricCard and Chart components are part of the default set of custom components available in every app.\n\nGiven this prompt:\n\n```text\nCreate a restaurant delivery dashboard with the following features:\n\n- A sidebar with navigation for restaurants, orders, and delivery sections\n- Key metrics displayed as cards showing total orders, active restaurants, active drivers, and average delivery time\n- A chart showing order trends over time\n- A filterable table of restaurants with search by name, cuisine type, and status\n- The ability to edit restaurant details through a modal\n- All data should be dynamically filtered based on user input\n```\n\nFiles generated:\n\n```pages/Page1/scope.ts\nimport {\n  createScope,\n  SbApi,\n  EventFlow,\n  StateVar,\n  computed,\n} from \"@superblocksteam/library\";\nexport const Page1Scope = createScope<{\n  Column1: any;\n  AppSidebar1: any;\n  AppHeader1: any;\n  MetricCard1: any;\n  MetricCard2: any;\n  MetricCard3: any;\n  MetricCard4: any;\n  RevenueChart: any;\n  RestaurantsTable: any;\n  Modal1: any;\n  RestaurantNameInput: any;\n  CuisineTypeDropdown: any;\n  StatusDropdown: any;\n  ResetButton: any;\n  CustomerNameInput: any;\n  PurchaseTypeDropdown: any;\n  CustomersTable: any;\n  ModalRestaurantNameInput: any;\n  ModalRestaurantEmailInput: any;\n  ModalRestaurantOwnerInput: any;\n  ModalRestaurantCuisineDropdown: any;\n  ModalRestaurantStatusDropdown: any;\n}>(\n  ({\n    entities: {\n      Column1,\n      AppSidebar1,\n      AppHeader1,\n      MetricCard1,\n      MetricCard2,\n      MetricCard3,\n      MetricCard4,\n      RevenueChart,\n      RestaurantsTable,\n      Modal1,\n      RestaurantNameInput,\n      CuisineTypeDropdown,\n      StatusDropdown,\n      ResetButton,\n      CustomerNameInput,\n      PurchaseTypeDropdown,\n      CustomersTable,\n      getMetricsApi,\n      getRestaurantsDataApi,\n      ChartDataVar,\n      RestaurantsTableDataVar,\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n      updateRestaurantApi,\n    },\n  }) => ({\n    getMetricsApi: SbApi({}),\n    getRestaurantsDataApi: SbApi({}),\n    ChartDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"];\n        return months.map((month) => {\n          const totalOrders = data.reduce((sum: number, restaurant: any) => {\n            return sum + (restaurant.monthlyOrders[month] || 0);\n          }, 0);\n          return {\n            name: month,\n            orders: totalOrders,\n          };\n        });\n      }),\n    }),\n    RestaurantsTableDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        return data.map((restaurant: any) => ({\n          photo: restaurant.photo,\n          name: restaurant.name,\n          email: restaurant.email,\n          cuisine: restaurant.cuisine,\n          owner: restaurant.owner,\n          status: restaurant.status,\n          date_joined: restaurant.date_joined,\n          last_activity: restaurant.last_activity,\n        }));\n      }),\n    }),\n    updateRestaurantApi: SbApi({\n      onError: EventFlow.controlModal(Modal1, { action: \"close\" }),\n      onSuccess: EventFlow.runApis([getRestaurantsDataApi]),\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\nexport const Page1 = Page1Scope.entities;\n```\n\nNote that the layout in the index file here makes use of Container components to logically group sections and ensure everything is spaced out and aligned well.\n\n```pages/Page1/index.tsx\nimport Table from \"components/ui/Table/index\";\nimport Container from \"components/ui/Container/index\";\nimport Input from \"components/ui/Input/index\";\nimport Dropdown from \"components/ui/Dropdown/index\";\nimport Button from \"components/ui/Button/index\";\nimport Modal from \"components/ui/Modal/index\";\nimport Text from \"components/ui/Text/index\";\nimport {\n  Page,\n  Dim,\n  registerPage,\n  computed,\n  EventFlow,\n  Theme,\n} from \"@superblocksteam/library\";\nimport Chart from \"components/Chart/Chart\";\nimport MetricCard from \"components/MetricCard/MetricCard\";\nimport AppHeader from \"components/AppHeader/AppHeader\";\nimport AppSidebar from \"components/AppSidebar/AppSidebar\";\nimport KeyValue from \"components/KeyValue\";\nimport { Page1, Page1Scope } from \"./scope\";\nfunction PageContent() {\n  const {\n    Column1,\n    AppSidebar1,\n    AppHeader1,\n    MetricCard1,\n    MetricCard2,\n    MetricCard3,\n    MetricCard4,\n    RevenueChart,\n    RestaurantsTable,\n    Modal1,\n    RestaurantNameInput,\n    CuisineTypeDropdown,\n    StatusDropdown,\n    ResetButton,\n    CustomerNameInput,\n    PurchaseTypeDropdown,\n    CustomersTable,\n    ModalRestaurantNameInput,\n    ModalRestaurantEmailInput,\n    ModalRestaurantOwnerInput,\n    ModalRestaurantCuisineDropdown,\n    ModalRestaurantStatusDropdown,\n    getMetricsApi,\n    getRestaurantsDataApi,\n    ChartDataVar,\n    RestaurantsTableDataVar,\n    updateRestaurantApi,\n  } = Page1;\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getMetricsApi, getRestaurantsDataApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column\n          width={Dim.fit()}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n        >\n          <AppSidebar\n            width={Dim.fill()}\n            bind={AppSidebar1}\n            logoUrl=\"your-app-logo-url.png\"\n            sidebarLinks={[\n              {\n                header: \"Restaurants\",\n                links: [\n                  {\n                    label: \"All Restaurants\",\n                    icon: \"restaurant\",\n                  },\n                  {\n                    label: \"Onboarding\",\n                    icon: \"add_business\",\n                  },\n                ],\n              },\n              {\n                header: \"Orders\",\n                links: [\n                  {\n                    label: \"Active Orders\",\n                    icon: \"receipt_long\",\n                  },\n                  {\n                    label: \"Order History\",\n                    icon: \"history\",\n                  },\n                ],\n              },\n              {\n                header: \"Delivery\",\n                links: [\n                  {\n                    label: \"Drivers\",\n                    icon: \"directions_car\",\n                  },\n                  {\n                    label: \"Live Tracking\",\n                    icon: \"map\",\n                  },\n                  {\n                    label: \"Analytics\",\n                    icon: \"analytics\",\n                  },\n                ],\n              },\n            ]}\n            height={Dim.fill()}\n          />\n        </Column>\n        <Column\n          width={Dim.fill()}\n          bind={Column1}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n          spacing={Dim.px(0)}\n        >\n          <AppHeader\n            width={Dim.fill()}\n            height={Dim.fit()}\n            bind={AppHeader1}\n            title=\"Delivery Dashboard\"\n            avatarUrl=\"your-user-avatar-here.png\"\n            userEmail=\"user@workdoamin.com\"\n          />\n          <Container\n            width={Dim.fill()}\n            height={Dim.fill()}\n            layout=\"vertical\"\n            padding={{\n              top: {\n                value: 12,\n                mode: \"px\",\n              },\n              bottom: {\n                value: 12,\n                mode: \"px\",\n              },\n              left: {\n                value: 12,\n                mode: \"px\",\n              },\n              right: {\n                value: 12,\n                mode: \"px\",\n              },\n            }}\n          >\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              layout=\"horizontal\"\n            >\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard1}\n                title=\"Total Orders\"\n                value={computed(\n                  () => getMetricsApi.response?.totalOrders.value,\n                )}\n                changeValue={computed(\n                  () => getMetricsApi.response?.totalOrders.changeValue,\n                )}\n                changeType={getMetricsApi.response?.totalOrders.changeType}\n                icon=\"receipt_long\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard2}\n                title=\"Active Restaurants\"\n                value={computed(\n                  () => getMetricsApi.response?.activeRestaurants.value,\n                )}\n                changeValue={\n                  getMetricsApi.response?.activeRestaurants.changeValue\n                }\n                changeType={\n                  getMetricsApi.response?.activeRestaurants.changeType\n                }\n                icon=\"restaurant\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard3}\n                title=\"Active Drivers\"\n                value={computed(\n                  () => getMetricsApi.response?.activeDrivers.value,\n                )}\n                changeValue={getMetricsApi.response?.activeDrivers.changeValue}\n                changeType={getMetricsApi.response?.activeDrivers.changeType}\n                icon=\"directions_car\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard4}\n                title=\"Avg Delivery Time\"\n                value={getMetricsApi.response?.avgDeliveryTime.value}\n                changeType={getMetricsApi.response?.avgDeliveryTime.changeType}\n                icon=\"schedule\"\n                changeValue={computed(\n                  () => getMetricsApi.response?.avgDeliveryTime.changeValue,\n                )}\n              />\n            </Container>\n            <Chart\n              width={Dim.fill()}\n              height={Dim.px(180)}\n              bind={RevenueChart}\n              title=\"Orders\"\n              data={computed(() => ChartDataVar.value || [])}\n            />\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              variant=\"card\"\n              layout=\"horizontal\"\n              verticalAlign=\"bottom\"\n            >\n              <Input\n                label=\"Restaurant Name\"\n                placeholderText=\"Search restaurants...\"\n                bind={RestaurantNameInput}\n              />\n              <Dropdown\n                label=\"Cuisine Type\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Italian\",\n                    value: \"Italian\",\n                  },\n                  {\n                    label: \"Chinese\",\n                    value: \"Chinese\",\n                  },\n                  {\n                    label: \"Mexican\",\n                    value: \"Mexican\",\n                  },\n                  {\n                    label: \"American\",\n                    value: \"American\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={CuisineTypeDropdown}\n              />\n              <Dropdown\n                label=\"Status\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Online\",\n                    value: \"Online\",\n                  },\n                  {\n                    label: \"Offline\",\n                    value: \"Offline\",\n                  },\n                  {\n                    label: \"Busy\",\n                    value: \"Busy\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={StatusDropdown}\n              />\n              <Button\n                label=\"Reset Filters\"\n                bind={ResetButton}\n                onClick={EventFlow.runJS(() => {\n                  RestaurantNameInput.text = \"\";\n                  CuisineTypeDropdown.value = \"All\";\n                  StatusDropdown.value = \"All\";\n                })}\n              />\n            </Container>\n            <Table\n              width={Dim.fill()}\n              height={Dim.fit()}\n              tableData={computed(() => RestaurantsTableDataVar.value || [])}\n              columns={{\n                name: {\n                  columnType: \"text\",\n                  label: \"Restaurant\",\n                },\n                email: {\n                  columnType: \"email\",\n                  label: \"Email\",\n                },\n                cuisine: {\n                  columnType: \"text\",\n                  label: \"Cuisine\",\n                },\n                owner: {\n                  columnType: \"text\",\n                  label: \"Owner\",\n                },\n                status: {\n                  columnType: \"tags\",\n                  tagDisplayConfig: {\n                    Online: {\n                      color: \"#14CDB733\",\n                    },\n                    Busy: {\n                      color: \"#FF9F3533\",\n                    },\n                    Offline: {\n                      color: \"#a6a0a033\",\n                    },\n                  },\n                  label: \"Status\",\n                },\n                date_joined: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DD\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Date joined\",\n                },\n                last_activity: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DDTHH:mm:ssZ\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Last activity\",\n                },\n                photo: {\n                  columnType: \"image\",\n                  label: \"Photo\",\n                  imageBorderRadius: {\n                    topLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    topRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                  },\n                },\n              }}\n              header=\"Restaurants\"\n              isSearchable={false}\n              bind={RestaurantsTable}\n              onRowClick={EventFlow.runJS(() => {\n                // set values of all the modal inputs to the values of the selected row\n                ModalRestaurantNameInput.text =\n                  RestaurantsTable.selectedRow?.name;\n                ModalRestaurantEmailInput.text =\n                  RestaurantsTable.selectedRow?.email;\n                ModalRestaurantOwnerInput.text =\n                  RestaurantsTable.selectedRow?.owner;\n                ModalRestaurantCuisineDropdown.value =\n                  RestaurantsTable.selectedRow?.cuisine;\n                ModalRestaurantStatusDropdown.value =\n                  RestaurantsTable.selectedRow?.status;\n              }).controlModal(Modal1, { action: \"open\" })}\n              paginationType=\"client-side\"\n              configuredPageSize={10}\n            />\n          </Container>\n        </Column>\n      </Section>\n      <Modal\n        width={Dim.fill()}\n        height={Dim.fit()}\n        bind={Modal1}\n        spacing={Dim.px(0)}\n        padding={{\n          top: {\n            value: 0,\n            mode: \"px\",\n          },\n          bottom: {\n            value: 0,\n            mode: \"px\",\n          },\n          left: {\n            value: 0,\n            mode: \"px\",\n          },\n          right: {\n            value: 0,\n            mode: \"px\",\n          },\n        }}\n      >\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          layout=\"vertical\"\n          spacing={Dim.px(4)}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Text\n            text={computed(() => {\n              return RestaurantsTable.selectedRow?.name || \"Restaurant Details\";\n            })}\n            textStyle={{\n              variant: \"heading3\",\n            }}\n          />\n        </Container>\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n        >\n          {/* <Text\n            text={computed(() => {\n              return `Joined ${RestaurantsTable.selectedRow?.date_joined} and last active ${RestaurantsTable.selectedRow?.last_activity}`;\n            })}\n            textStyle={{\n              variant: \"body2\",\n            }}\n            isVisible={computed(() => {\n              return (\n                RestaurantsTable.selectedRow?.date_joined !== undefined &&\n                RestaurantsTable.selectedRow?.last_activity !== undefined\n              );\n            })}\n           /> */}\n\n          <Input label=\"Restaurant Name\" bind={ModalRestaurantNameInput} />\n          <Input label=\"Email\" bind={ModalRestaurantEmailInput} />\n          <Input label=\"Owner\" bind={ModalRestaurantOwnerInput} />\n          <Dropdown\n            label=\"Cuisine\"\n            options={[\n              {\n                label: \"Italian\",\n                value: \"Italian\",\n              },\n              {\n                label: \"Chinese\",\n                value: \"Chinese\",\n              },\n              {\n                label: \"Mexican\",\n                value: \"Mexican\",\n              },\n              {\n                label: \"American\",\n                value: \"American\",\n              },\n            ]}\n            bind={ModalRestaurantCuisineDropdown}\n          />\n          <Dropdown\n            label=\"Status\"\n            options={[\n              {\n                label: \"Online\",\n                value: \"Online\",\n              },\n              {\n                label: \"Offline\",\n                value: \"Offline\",\n              },\n              {\n                label: \"Busy\",\n                value: \"Busy\",\n              },\n            ]}\n            bind={ModalRestaurantStatusDropdown}\n          />\n        </Container>\n        <Container\n          spacing={Dim.px(8)}\n          width={Dim.fill()}\n          variant=\"none\"\n          layout=\"horizontal\"\n          horizontalAlign=\"right\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Button\n            label=\"Close\"\n            variant=\"secondary\"\n            onClick={EventFlow.controlModal(Modal1, { action: \"close\" })}\n          />\n          <Button\n            label=\"Save Changes\"\n            onClick={EventFlow.runApis([updateRestaurantApi]).controlModal(\n              Modal1,\n              { action: \"close\" },\n            )}\n          />\n        </Container>\n      </Modal>\n    </Page>\n  );\n}\nexport default registerPage(PageContent, Page1Scope);\n```\n\n```pages/Page1/apis/getMetricsApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getMetricsApi\", [\n  new JavaScript(\"getMetrics\", {\n    fn: () => {\n      return {\n        totalOrders: {\n          value: \"24.7K\",\n          changeValue: \"+18.2%\",\n          changeType: \"positive\",\n        },\n        activeRestaurants: {\n          value: \"1.8K\",\n          changeValue: \"+12.5%\",\n          changeType: \"positive\",\n        },\n        activeDrivers: {\n          value: \"523\",\n          changeValue: \"+5.8%\",\n          changeType: \"positive\",\n        },\n        avgDeliveryTime: {\n          value: \"28 min\",\n          changeValue: \"-2.3 min\",\n          changeType: \"positive\",\n        },\n      };\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/getRestaurantsDataApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getRestaurantsDataApi\", [\n  new JavaScript(\"getData\", {\n    fn: () => {\n      return [\n        {\n          photo: \"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=50&h=50&fit=crop&crop=face\",\n          name: \"Bella Vista Italian\",\n          email: \"contact@bellavista.com\",\n          cuisine: \"Italian\",\n          owner: \"Marco Rossi\",\n          status: \"Active\",\n          date_joined: \"2023-01-15\",\n          last_activity: \"2024-01-20\",\n          monthlyOrders: {\n            Jan: 450,\n            Feb: 520,\n            Mar: 480,\n            Apr: 610,\n            May: 590,\n            Jun: 650,\n            Jul: 720,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=50&h=50&fit=crop&crop=face\",\n          name: \"Golden Dragon\",\n          email: \"info@goldendragon.com\",\n          cuisine: \"Chinese\",\n          owner: \"Wei Chen\",\n          status: \"Active\",\n          date_joined: \"2023-02-22\",\n          last_activity: \"2024-01-19\",\n          monthlyOrders: {\n            Jan: 380,\n            Feb: 420,\n            Mar: 460,\n            Apr: 510,\n            May: 540,\n            Jun: 580,\n            Jul: 620,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=50&h=50&fit=crop&crop=face\",\n          name: \"Taco Fiesta\",\n          email: \"orders@tacofiesta.com\",\n          cuisine: \"Mexican\",\n          owner: \"Carlos Rodriguez\",\n          status: \"Pending\",\n          date_joined: \"2023-12-10\",\n          last_activity: \"2024-01-18\",\n          monthlyOrders: {\n            Jan: 280,\n            Feb: 320,\n            Mar: 350,\n            Apr: 390,\n            May: 420,\n            Jun: 450,\n            Jul: 480,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1571091718767-18b5b1457add?w=50&h=50&fit=crop&crop=face\",\n          name: \"Burger Palace\",\n          email: \"hello@burgerpalace.com\",\n          cuisine: \"American\",\n          owner: \"John Smith\",\n          status: \"Active\",\n          date_joined: \"2022-11-08\",\n          last_activity: \"2024-01-21\",\n          monthlyOrders: {\n            Jan: 680,\n            Feb: 720,\n            Mar: 650,\n            Apr: 780,\n            May: 810,\n            Jun: 850,\n            Jul: 920,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=50&h=50&fit=crop&crop=face\",\n          name: \"Sakura Sushi\",\n          email: \"reservations@sakurasushi.com\",\n          cuisine: \"Japanese\",\n          owner: \"Takeshi Yamamoto\",\n          status: \"Inactive\",\n          date_joined: \"2023-06-12\",\n          last_activity: \"2023-12-15\",\n          monthlyOrders: {\n            Jan: 320,\n            Feb: 280,\n            Mar: 260,\n            Apr: 240,\n            May: 200,\n            Jun: 180,\n            Jul: 150,\n          },\n        },\n      ];\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/updateRestaurantApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"updateRestaurantApi\", [\n  new Conditional(\"validate_inputs\", {\n    if: {\n      when: ({\n        ModalRestaurantNameInput,\n        ModalRestaurantEmailInput,\n        ModalRestaurantOwnerInput,\n      }): boolean =>\n        !ModalRestaurantNameInput.value ||\n        !ModalRestaurantEmailInput.value ||\n        !ModalRestaurantOwnerInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Restaurant name, email, and owner are required fields\",\n        }),\n      ],\n    },\n  }),\n  new JavaScript(\"updateRestaurantData\", {\n    fn: ({\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n    }) => {\n      const updatedRestaurant = {\n        name: ModalRestaurantNameInput.value,\n        email: ModalRestaurantEmailInput.value,\n        cuisine: ModalRestaurantCuisineDropdown.selectedOptionValue,\n        owner: ModalRestaurantOwnerInput.value,\n        status: ModalRestaurantStatusDropdown.selectedOptionValue,\n        updated_at: new Date().toISOString(),\n      };\n\n      return {\n        success: true,\n        message: \"Restaurant updated successfully\",\n        data: updatedRestaurant,\n      };\n    },\n  }),\n]);\n```\n\n##### Important notes about the choices made in the code generated here:\n\n1. **API Implementation Strategy**: All APIs use dummy data implementations for demonstration purposes. In production applications:\n   - `getMetricsApi` and `getRestaurantsDataApi` should connect to actual databases or external services using SQL queries, REST API calls, or other data connectors\n   - `updateRestaurantApi` should perform real database updates or API calls to persist changes\n   - Consider replacing dummy implementations with actual integrations when users specify particular data sources in their prompts\n\n2. **Layout Architecture**:\n   - `Column` components have padding removed to allow `AppSidebar` and `AppHeader` to extend to screen edges\n   - Content sections use `Container` components for proper spacing and alignment\n   - This pattern ensures consistent visual hierarchy and responsive behavior\n\n3. **Component Styling Patterns**:\n   - Filter controls are wrapped together in a `Container` with `variant=\"card\"` to provide visual containment\n   - Components like `MetricCard`, `Table`, and `Chart` have built-in containers and don't require additional wrapping\n   - Form elements (`Input`, `Dropdown`, `Button`) need explicit container styling for proper presentation\n\n4. **State Management**:\n   - Computed variables (`ChartDataVar`, `RestaurantsTableDataVar`) automatically recalculate when filter inputs change\n   - Modal state is managed through event flows that handle open/close actions and API responses\n   - Error handling and validation are implemented at the API level with appropriate user feedback\n";
 //# sourceMappingURL=full-examples.d.ts.map

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"full-examples.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,q+hCAAq+hC,CAAC"}
+{"version":3,"file":"full-examples.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,opiCAAopiC,CAAC"}

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from full-examples.md
 // Do not edit this file directly
-// Generated at: 2025-09-16T22:07:58.074Z
-export const content = "### FULL EXAMPLES\n\n#### Full example 1:\n\nBelow is a full example of a user's prompt and acceptable app. Note that AppHeader, AppSidebar, MetricCard and Chart components are part of the default set of custom components available in every app.\n\nGiven this prompt:\n\n```text\nCreate a restaurant delivery dashboard with the following features:\n\n- A sidebar with navigation for restaurants, orders, and delivery sections\n- Key metrics displayed as cards showing total orders, active restaurants, active drivers, and average delivery time\n- A chart showing order trends over time\n- A filterable table of restaurants with search by name, cuisine type, and status\n- The ability to edit restaurant details through a modal\n- All data should be dynamically filtered based on user input\n```\n\nFiles generated:\n\n```pages/Page1/scope.ts\nimport {\n  createScope,\n  SbApi,\n  EventFlow,\n  StateVar,\n  computed,\n} from \"@superblocksteam/library\";\nexport const Page1Scope = createScope<{\n  Column1: any;\n  AppSidebar1: any;\n  AppHeader1: any;\n  MetricCard1: any;\n  MetricCard2: any;\n  MetricCard3: any;\n  MetricCard4: any;\n  RevenueChart: any;\n  RestaurantsTable: any;\n  Modal1: any;\n  RestaurantNameInput: any;\n  CuisineTypeDropdown: any;\n  StatusDropdown: any;\n  ResetButton: any;\n  CustomerNameInput: any;\n  PurchaseTypeDropdown: any;\n  CustomersTable: any;\n  ModalRestaurantNameInput: any;\n  ModalRestaurantEmailInput: any;\n  ModalRestaurantOwnerInput: any;\n  ModalRestaurantCuisineDropdown: any;\n  ModalRestaurantStatusDropdown: any;\n}>(\n  ({\n    entities: {\n      Column1,\n      AppSidebar1,\n      AppHeader1,\n      MetricCard1,\n      MetricCard2,\n      MetricCard3,\n      MetricCard4,\n      RevenueChart,\n      RestaurantsTable,\n      Modal1,\n      RestaurantNameInput,\n      CuisineTypeDropdown,\n      StatusDropdown,\n      ResetButton,\n      CustomerNameInput,\n      PurchaseTypeDropdown,\n      CustomersTable,\n      getMetricsApi,\n      getRestaurantsDataApi,\n      ChartDataVar,\n      RestaurantsTableDataVar,\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n      updateRestaurantApi,\n    },\n  }) => ({\n    getMetricsApi: SbApi({}),\n    getRestaurantsDataApi: SbApi({}),\n    ChartDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"];\n        return months.map((month) => {\n          const totalOrders = data.reduce((sum: number, restaurant: any) => {\n            return sum + (restaurant.monthlyOrders[month] || 0);\n          }, 0);\n          return {\n            name: month,\n            orders: totalOrders,\n          };\n        });\n      }),\n    }),\n    RestaurantsTableDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        return data.map((restaurant: any) => ({\n          photo: restaurant.photo,\n          name: restaurant.name,\n          email: restaurant.email,\n          cuisine: restaurant.cuisine,\n          owner: restaurant.owner,\n          status: restaurant.status,\n          date_joined: restaurant.date_joined,\n          last_activity: restaurant.last_activity,\n        }));\n      }),\n    }),\n    updateRestaurantApi: SbApi({\n      onError: EventFlow.controlModal(Modal1, { action: \"close\" }),\n      onSuccess: EventFlow.runApis([getRestaurantsDataApi]),\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\nexport const Page1 = Page1Scope.entities;\n```\n\nNote that the layout in the index file here makes use of Container components to logically group sections and ensure everything is spaced out and aligned well.\n\n```pages/Page1/index.tsx\nimport {\n  Page,\n  Dim,\n  Section,\n  Column,\n  registerPage,\n  Table,\n  computed,\n  Container,\n  Input,\n  Dropdown,\n  Button,\n  EventFlow,\n  Modal,\n  Text,\n  Icon,\n  Theme,\n} from \"@superblocksteam/library\";\nimport Chart from \"components/Chart/Chart\";\nimport MetricCard from \"components/MetricCard/MetricCard\";\nimport AppHeader from \"components/AppHeader/AppHeader\";\nimport AppSidebar from \"components/AppSidebar/AppSidebar\";\nimport KeyValue from \"components/KeyValue\";\nimport { Page1, Page1Scope } from \"./scope\";\nfunction PageContent() {\n  const {\n    Column1,\n    AppSidebar1,\n    AppHeader1,\n    MetricCard1,\n    MetricCard2,\n    MetricCard3,\n    MetricCard4,\n    RevenueChart,\n    RestaurantsTable,\n    Modal1,\n    RestaurantNameInput,\n    CuisineTypeDropdown,\n    StatusDropdown,\n    ResetButton,\n    CustomerNameInput,\n    PurchaseTypeDropdown,\n    CustomersTable,\n    ModalRestaurantNameInput,\n    ModalRestaurantEmailInput,\n    ModalRestaurantOwnerInput,\n    ModalRestaurantCuisineDropdown,\n    ModalRestaurantStatusDropdown,\n    getMetricsApi,\n    getRestaurantsDataApi,\n    ChartDataVar,\n    RestaurantsTableDataVar,\n    updateRestaurantApi,\n  } = Page1;\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getMetricsApi, getRestaurantsDataApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column\n          width={Dim.fit()}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n        >\n          <AppSidebar\n            width={Dim.fill()}\n            bind={AppSidebar1}\n            logoUrl=\"your-app-logo-url.png\"\n            sidebarLinks={[\n              {\n                header: \"Restaurants\",\n                links: [\n                  {\n                    label: \"All Restaurants\",\n                    icon: \"restaurant\",\n                  },\n                  {\n                    label: \"Onboarding\",\n                    icon: \"add_business\",\n                  },\n                ],\n              },\n              {\n                header: \"Orders\",\n                links: [\n                  {\n                    label: \"Active Orders\",\n                    icon: \"receipt_long\",\n                  },\n                  {\n                    label: \"Order History\",\n                    icon: \"history\",\n                  },\n                ],\n              },\n              {\n                header: \"Delivery\",\n                links: [\n                  {\n                    label: \"Drivers\",\n                    icon: \"directions_car\",\n                  },\n                  {\n                    label: \"Live Tracking\",\n                    icon: \"map\",\n                  },\n                  {\n                    label: \"Analytics\",\n                    icon: \"analytics\",\n                  },\n                ],\n              },\n            ]}\n            height={Dim.fill()}\n          />\n        </Column>\n        <Column\n          width={Dim.fill()}\n          bind={Column1}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n          spacing={Dim.px(0)}\n        >\n          <AppHeader\n            width={Dim.fill()}\n            height={Dim.fit()}\n            bind={AppHeader1}\n            title=\"Delivery Dashboard\"\n            avatarUrl=\"your-user-avatar-here.png\"\n            userEmail=\"user@workdoamin.com\"\n          />\n          <Container\n            width={Dim.fill()}\n            height={Dim.fill()}\n            layout=\"vertical\"\n            padding={{\n              top: {\n                value: 12,\n                mode: \"px\",\n              },\n              bottom: {\n                value: 12,\n                mode: \"px\",\n              },\n              left: {\n                value: 12,\n                mode: \"px\",\n              },\n              right: {\n                value: 12,\n                mode: \"px\",\n              },\n            }}\n          >\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              layout=\"horizontal\"\n            >\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard1}\n                title=\"Total Orders\"\n                value={computed(\n                  () => getMetricsApi.response?.totalOrders.value,\n                )}\n                changeValue={computed(\n                  () => getMetricsApi.response?.totalOrders.changeValue,\n                )}\n                changeType={getMetricsApi.response?.totalOrders.changeType}\n                icon=\"receipt_long\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard2}\n                title=\"Active Restaurants\"\n                value={computed(\n                  () => getMetricsApi.response?.activeRestaurants.value,\n                )}\n                changeValue={\n                  getMetricsApi.response?.activeRestaurants.changeValue\n                }\n                changeType={\n                  getMetricsApi.response?.activeRestaurants.changeType\n                }\n                icon=\"restaurant\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard3}\n                title=\"Active Drivers\"\n                value={computed(\n                  () => getMetricsApi.response?.activeDrivers.value,\n                )}\n                changeValue={getMetricsApi.response?.activeDrivers.changeValue}\n                changeType={getMetricsApi.response?.activeDrivers.changeType}\n                icon=\"directions_car\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard4}\n                title=\"Avg Delivery Time\"\n                value={getMetricsApi.response?.avgDeliveryTime.value}\n                changeType={getMetricsApi.response?.avgDeliveryTime.changeType}\n                icon=\"schedule\"\n                changeValue={computed(\n                  () => getMetricsApi.response?.avgDeliveryTime.changeValue,\n                )}\n              />\n            </Container>\n            <Chart\n              width={Dim.fill()}\n              height={Dim.px(180)}\n              bind={RevenueChart}\n              title=\"Orders\"\n              data={computed(() => ChartDataVar.value || [])}\n            />\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              variant=\"card\"\n              layout=\"horizontal\"\n              verticalAlign=\"bottom\"\n            >\n              <Input\n                label=\"Restaurant Name\"\n                placeholderText=\"Search restaurants...\"\n                bind={RestaurantNameInput}\n              />\n              <Dropdown\n                label=\"Cuisine Type\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Italian\",\n                    value: \"Italian\",\n                  },\n                  {\n                    label: \"Chinese\",\n                    value: \"Chinese\",\n                  },\n                  {\n                    label: \"Mexican\",\n                    value: \"Mexican\",\n                  },\n                  {\n                    label: \"American\",\n                    value: \"American\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={CuisineTypeDropdown}\n              />\n              <Dropdown\n                label=\"Status\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Online\",\n                    value: \"Online\",\n                  },\n                  {\n                    label: \"Offline\",\n                    value: \"Offline\",\n                  },\n                  {\n                    label: \"Busy\",\n                    value: \"Busy\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={StatusDropdown}\n              />\n              <Button\n                label=\"Reset Filters\"\n                bind={ResetButton}\n                onClick={EventFlow.runJS(() => {\n                  RestaurantNameInput.text = \"\";\n                  CuisineTypeDropdown.metaSelectedOptionValue = \"All\";\n                  StatusDropdown.metaSelectedOptionValue = \"All\";\n                })}\n              />\n            </Container>\n            <Table\n              width={Dim.fill()}\n              height={Dim.fit()}\n              tableData={computed(() => RestaurantsTableDataVar.value || [])}\n              columns={{\n                name: {\n                  columnType: \"text\",\n                  label: \"Restaurant\",\n                },\n                email: {\n                  columnType: \"email\",\n                  label: \"Email\",\n                },\n                cuisine: {\n                  columnType: \"text\",\n                  label: \"Cuisine\",\n                },\n                owner: {\n                  columnType: \"text\",\n                  label: \"Owner\",\n                },\n                status: {\n                  columnType: \"tags\",\n                  tagDisplayConfig: {\n                    Online: {\n                      color: \"#14CDB733\",\n                    },\n                    Busy: {\n                      color: \"#FF9F3533\",\n                    },\n                    Offline: {\n                      color: \"#a6a0a033\",\n                    },\n                  },\n                  label: \"Status\",\n                },\n                date_joined: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DD\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Date joined\",\n                },\n                last_activity: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DDTHH:mm:ssZ\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Last activity\",\n                },\n                photo: {\n                  columnType: \"image\",\n                  label: \"Photo\",\n                  imageBorderRadius: {\n                    topLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    topRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                  },\n                },\n              }}\n              header=\"Restaurants\"\n              isSearchable={false}\n              bind={RestaurantsTable}\n              onRowClick={EventFlow.runJS(() => {\n                // set values of all the modal inputs to the values of the selected row\n                ModalRestaurantNameInput.text =\n                  RestaurantsTable.selectedRow?.name;\n                ModalRestaurantEmailInput.text =\n                  RestaurantsTable.selectedRow?.email;\n                ModalRestaurantOwnerInput.text =\n                  RestaurantsTable.selectedRow?.owner;\n                ModalRestaurantCuisineDropdown.metaSelectedOptionValue =\n                  RestaurantsTable.selectedRow?.cuisine;\n                ModalRestaurantStatusDropdown.metaSelectedOptionValue =\n                  RestaurantsTable.selectedRow?.status;\n              }).controlModal(Modal1, { action: \"open\" })}\n              paginationType=\"client-side\"\n              configuredPageSize={10}\n            />\n          </Container>\n        </Column>\n      </Section>\n      <Modal\n        width={Dim.fill()}\n        height={Dim.fit()}\n        bind={Modal1}\n        spacing={Dim.px(0)}\n        padding={{\n          top: {\n            value: 0,\n            mode: \"px\",\n          },\n          bottom: {\n            value: 0,\n            mode: \"px\",\n          },\n          left: {\n            value: 0,\n            mode: \"px\",\n          },\n          right: {\n            value: 0,\n            mode: \"px\",\n          },\n        }}\n      >\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          layout=\"vertical\"\n          spacing={Dim.px(4)}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Text\n            text={computed(() => {\n              return RestaurantsTable.selectedRow?.name || \"Restaurant Details\";\n            })}\n            textStyle={{\n              variant: \"heading3\",\n            }}\n          />\n        </Container>\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n        >\n          {/* <Text\n            text={computed(() => {\n              return `Joined ${RestaurantsTable.selectedRow?.date_joined} and last active ${RestaurantsTable.selectedRow?.last_activity}`;\n            })}\n            textStyle={{\n              variant: \"body2\",\n            }}\n            isVisible={computed(() => {\n              return (\n                RestaurantsTable.selectedRow?.date_joined !== undefined &&\n                RestaurantsTable.selectedRow?.last_activity !== undefined\n              );\n            })}\n           /> */}\n\n          <Input label=\"Restaurant Name\" bind={ModalRestaurantNameInput} />\n          <Input label=\"Email\" bind={ModalRestaurantEmailInput} />\n          <Input label=\"Owner\" bind={ModalRestaurantOwnerInput} />\n          <Dropdown\n            label=\"Cuisine\"\n            options={[\n              {\n                label: \"Italian\",\n                value: \"Italian\",\n              },\n              {\n                label: \"Chinese\",\n                value: \"Chinese\",\n              },\n              {\n                label: \"Mexican\",\n                value: \"Mexican\",\n              },\n              {\n                label: \"American\",\n                value: \"American\",\n              },\n            ]}\n            bind={ModalRestaurantCuisineDropdown}\n          />\n          <Dropdown\n            label=\"Status\"\n            options={[\n              {\n                label: \"Online\",\n                value: \"Online\",\n              },\n              {\n                label: \"Offline\",\n                value: \"Offline\",\n              },\n              {\n                label: \"Busy\",\n                value: \"Busy\",\n              },\n            ]}\n            bind={ModalRestaurantStatusDropdown}\n          />\n        </Container>\n        <Container\n          spacing={Dim.px(8)}\n          width={Dim.fill()}\n          variant=\"none\"\n          layout=\"horizontal\"\n          horizontalAlign=\"right\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Button\n            label=\"Close\"\n            variant=\"secondary\"\n            onClick={EventFlow.controlModal(Modal1, { action: \"close\" })}\n          />\n          <Button\n            label=\"Save Changes\"\n            onClick={EventFlow.runApis([updateRestaurantApi]).controlModal(\n              Modal1,\n              { action: \"close\" },\n            )}\n          />\n        </Container>\n      </Modal>\n    </Page>\n  );\n}\nexport default registerPage(PageContent, Page1Scope);\n```\n\n```pages/Page1/apis/getMetricsApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getMetricsApi\", [\n  new JavaScript(\"getMetrics\", {\n    fn: () => {\n      return {\n        totalOrders: {\n          value: \"24.7K\",\n          changeValue: \"+18.2%\",\n          changeType: \"positive\",\n        },\n        activeRestaurants: {\n          value: \"1.8K\",\n          changeValue: \"+12.5%\",\n          changeType: \"positive\",\n        },\n        activeDrivers: {\n          value: \"523\",\n          changeValue: \"+5.8%\",\n          changeType: \"positive\",\n        },\n        avgDeliveryTime: {\n          value: \"28 min\",\n          changeValue: \"-2.3 min\",\n          changeType: \"positive\",\n        },\n      };\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/getRestaurantsDataApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getRestaurantsDataApi\", [\n  new JavaScript(\"getData\", {\n    fn: () => {\n      return [\n        {\n          photo: \"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=50&h=50&fit=crop&crop=face\",\n          name: \"Bella Vista Italian\",\n          email: \"contact@bellavista.com\",\n          cuisine: \"Italian\",\n          owner: \"Marco Rossi\",\n          status: \"Active\",\n          date_joined: \"2023-01-15\",\n          last_activity: \"2024-01-20\",\n          monthlyOrders: {\n            Jan: 450,\n            Feb: 520,\n            Mar: 480,\n            Apr: 610,\n            May: 590,\n            Jun: 650,\n            Jul: 720,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=50&h=50&fit=crop&crop=face\",\n          name: \"Golden Dragon\",\n          email: \"info@goldendragon.com\",\n          cuisine: \"Chinese\",\n          owner: \"Wei Chen\",\n          status: \"Active\",\n          date_joined: \"2023-02-22\",\n          last_activity: \"2024-01-19\",\n          monthlyOrders: {\n            Jan: 380,\n            Feb: 420,\n            Mar: 460,\n            Apr: 510,\n            May: 540,\n            Jun: 580,\n            Jul: 620,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=50&h=50&fit=crop&crop=face\",\n          name: \"Taco Fiesta\",\n          email: \"orders@tacofiesta.com\",\n          cuisine: \"Mexican\",\n          owner: \"Carlos Rodriguez\",\n          status: \"Pending\",\n          date_joined: \"2023-12-10\",\n          last_activity: \"2024-01-18\",\n          monthlyOrders: {\n            Jan: 280,\n            Feb: 320,\n            Mar: 350,\n            Apr: 390,\n            May: 420,\n            Jun: 450,\n            Jul: 480,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1571091718767-18b5b1457add?w=50&h=50&fit=crop&crop=face\",\n          name: \"Burger Palace\",\n          email: \"hello@burgerpalace.com\",\n          cuisine: \"American\",\n          owner: \"John Smith\",\n          status: \"Active\",\n          date_joined: \"2022-11-08\",\n          last_activity: \"2024-01-21\",\n          monthlyOrders: {\n            Jan: 680,\n            Feb: 720,\n            Mar: 650,\n            Apr: 780,\n            May: 810,\n            Jun: 850,\n            Jul: 920,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=50&h=50&fit=crop&crop=face\",\n          name: \"Sakura Sushi\",\n          email: \"reservations@sakurasushi.com\",\n          cuisine: \"Japanese\",\n          owner: \"Takeshi Yamamoto\",\n          status: \"Inactive\",\n          date_joined: \"2023-06-12\",\n          last_activity: \"2023-12-15\",\n          monthlyOrders: {\n            Jan: 320,\n            Feb: 280,\n            Mar: 260,\n            Apr: 240,\n            May: 200,\n            Jun: 180,\n            Jul: 150,\n          },\n        },\n      ];\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/updateRestaurantApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"updateRestaurantApi\", [\n  new Conditional(\"validate_inputs\", {\n    if: {\n      when: ({\n        ModalRestaurantNameInput,\n        ModalRestaurantEmailInput,\n        ModalRestaurantOwnerInput,\n      }): boolean =>\n        !ModalRestaurantNameInput.value ||\n        !ModalRestaurantEmailInput.value ||\n        !ModalRestaurantOwnerInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Restaurant name, email, and owner are required fields\",\n        }),\n      ],\n    },\n  }),\n  new JavaScript(\"updateRestaurantData\", {\n    fn: ({\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n    }) => {\n      const updatedRestaurant = {\n        name: ModalRestaurantNameInput.value,\n        email: ModalRestaurantEmailInput.value,\n        cuisine: ModalRestaurantCuisineDropdown.selectedOptionValue,\n        owner: ModalRestaurantOwnerInput.value,\n        status: ModalRestaurantStatusDropdown.selectedOptionValue,\n        updated_at: new Date().toISOString(),\n      };\n\n      return {\n        success: true,\n        message: \"Restaurant updated successfully\",\n        data: updatedRestaurant,\n      };\n    },\n  }),\n]);\n```\n\n##### Important notes about the choices made in the code generated here:\n\n1. **API Implementation Strategy**: All APIs use dummy data implementations for demonstration purposes. In production applications:\n\n   - `getMetricsApi` and `getRestaurantsDataApi` should connect to actual databases or external services using SQL queries, REST API calls, or other data connectors\n   - `updateRestaurantApi` should perform real database updates or API calls to persist changes\n   - Consider replacing dummy implementations with actual integrations when users specify particular data sources in their prompts\n\n2. **Layout Architecture**:\n\n   - `Column` components have padding removed to allow `AppSidebar` and `AppHeader` to extend to screen edges\n   - Content sections use `Container` components for proper spacing and alignment\n   - This pattern ensures consistent visual hierarchy and responsive behavior\n\n3. **Component Styling Patterns**:\n\n   - Filter controls are wrapped together in a `Container` with `variant=\"card\"` to provide visual containment\n   - Components like `MetricCard`, `Table`, and `Chart` have built-in containers and don't require additional wrapping\n   - Form elements (`Input`, `Dropdown`, `Button`) need explicit container styling for proper presentation\n\n4. **State Management**:\n\n   - Computed variables (`ChartDataVar`, `RestaurantsTableDataVar`) automatically recalculate when filter inputs change\n   - Modal state is managed through event flows that handle open/close actions and API responses\n   - Error handling and validation are implemented at the API level with appropriate user feedback\n";
+// Generated at: 2025-09-17T12:35:00.776Z
+export const content = "### FULL EXAMPLES\n\n#### Full example 1:\n\nBelow is a full example of a user's prompt and acceptable app. Note that AppHeader, AppSidebar, MetricCard and Chart components are part of the default set of custom components available in every app.\n\nGiven this prompt:\n\n```text\nCreate a restaurant delivery dashboard with the following features:\n\n- A sidebar with navigation for restaurants, orders, and delivery sections\n- Key metrics displayed as cards showing total orders, active restaurants, active drivers, and average delivery time\n- A chart showing order trends over time\n- A filterable table of restaurants with search by name, cuisine type, and status\n- The ability to edit restaurant details through a modal\n- All data should be dynamically filtered based on user input\n```\n\nFiles generated:\n\n```pages/Page1/scope.ts\nimport {\n  createScope,\n  SbApi,\n  EventFlow,\n  StateVar,\n  computed,\n} from \"@superblocksteam/library\";\nexport const Page1Scope = createScope<{\n  Column1: any;\n  AppSidebar1: any;\n  AppHeader1: any;\n  MetricCard1: any;\n  MetricCard2: any;\n  MetricCard3: any;\n  MetricCard4: any;\n  RevenueChart: any;\n  RestaurantsTable: any;\n  Modal1: any;\n  RestaurantNameInput: any;\n  CuisineTypeDropdown: any;\n  StatusDropdown: any;\n  ResetButton: any;\n  CustomerNameInput: any;\n  PurchaseTypeDropdown: any;\n  CustomersTable: any;\n  ModalRestaurantNameInput: any;\n  ModalRestaurantEmailInput: any;\n  ModalRestaurantOwnerInput: any;\n  ModalRestaurantCuisineDropdown: any;\n  ModalRestaurantStatusDropdown: any;\n}>(\n  ({\n    entities: {\n      Column1,\n      AppSidebar1,\n      AppHeader1,\n      MetricCard1,\n      MetricCard2,\n      MetricCard3,\n      MetricCard4,\n      RevenueChart,\n      RestaurantsTable,\n      Modal1,\n      RestaurantNameInput,\n      CuisineTypeDropdown,\n      StatusDropdown,\n      ResetButton,\n      CustomerNameInput,\n      PurchaseTypeDropdown,\n      CustomersTable,\n      getMetricsApi,\n      getRestaurantsDataApi,\n      ChartDataVar,\n      RestaurantsTableDataVar,\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n      updateRestaurantApi,\n    },\n  }) => ({\n    getMetricsApi: SbApi({}),\n    getRestaurantsDataApi: SbApi({}),\n    ChartDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"];\n        return months.map((month) => {\n          const totalOrders = data.reduce((sum: number, restaurant: any) => {\n            return sum + (restaurant.monthlyOrders[month] || 0);\n          }, 0);\n          return {\n            name: month,\n            orders: totalOrders,\n          };\n        });\n      }),\n    }),\n    RestaurantsTableDataVar: StateVar({\n      defaultValue: computed(() => {\n        const restaurantName =\n          RestaurantNameInput.value && RestaurantNameInput.value !== \"\"\n            ? RestaurantNameInput.value\n            : null;\n        const cuisineType =\n          CuisineTypeDropdown.selectedOptionValue === \"All\"\n            ? null\n            : CuisineTypeDropdown.selectedOptionValue;\n        const status =\n          StatusDropdown.selectedOptionValue === \"All\"\n            ? null\n            : StatusDropdown.selectedOptionValue;\n        let data = getRestaurantsDataApi.response || [];\n\n        data = data.filter((restaurant: any) => {\n          if (\n            restaurantName &&\n            !restaurant.name\n              .toLowerCase()\n              .includes(restaurantName.toLowerCase())\n          ) {\n            return false;\n          }\n          if (cuisineType && restaurant.cuisine !== cuisineType) {\n            return false;\n          }\n          if (status && restaurant.status !== status) {\n            return false;\n          }\n          return true;\n        });\n        return data.map((restaurant: any) => ({\n          photo: restaurant.photo,\n          name: restaurant.name,\n          email: restaurant.email,\n          cuisine: restaurant.cuisine,\n          owner: restaurant.owner,\n          status: restaurant.status,\n          date_joined: restaurant.date_joined,\n          last_activity: restaurant.last_activity,\n        }));\n      }),\n    }),\n    updateRestaurantApi: SbApi({\n      onError: EventFlow.controlModal(Modal1, { action: \"close\" }),\n      onSuccess: EventFlow.runApis([getRestaurantsDataApi]),\n    }),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\nexport const Page1 = Page1Scope.entities;\n```\n\nNote that the layout in the index file here makes use of Container components to logically group sections and ensure everything is spaced out and aligned well.\n\n```pages/Page1/index.tsx\nimport Table from \"components/ui/Table/index\";\nimport Container from \"components/ui/Container/index\";\nimport Input from \"components/ui/Input/index\";\nimport Dropdown from \"components/ui/Dropdown/index\";\nimport Button from \"components/ui/Button/index\";\nimport Modal from \"components/ui/Modal/index\";\nimport Text from \"components/ui/Text/index\";\nimport {\n  Page,\n  Dim,\n  registerPage,\n  computed,\n  EventFlow,\n  Theme,\n} from \"@superblocksteam/library\";\nimport Chart from \"components/Chart/Chart\";\nimport MetricCard from \"components/MetricCard/MetricCard\";\nimport AppHeader from \"components/AppHeader/AppHeader\";\nimport AppSidebar from \"components/AppSidebar/AppSidebar\";\nimport KeyValue from \"components/KeyValue\";\nimport { Page1, Page1Scope } from \"./scope\";\nfunction PageContent() {\n  const {\n    Column1,\n    AppSidebar1,\n    AppHeader1,\n    MetricCard1,\n    MetricCard2,\n    MetricCard3,\n    MetricCard4,\n    RevenueChart,\n    RestaurantsTable,\n    Modal1,\n    RestaurantNameInput,\n    CuisineTypeDropdown,\n    StatusDropdown,\n    ResetButton,\n    CustomerNameInput,\n    PurchaseTypeDropdown,\n    CustomersTable,\n    ModalRestaurantNameInput,\n    ModalRestaurantEmailInput,\n    ModalRestaurantOwnerInput,\n    ModalRestaurantCuisineDropdown,\n    ModalRestaurantStatusDropdown,\n    getMetricsApi,\n    getRestaurantsDataApi,\n    ChartDataVar,\n    RestaurantsTableDataVar,\n    updateRestaurantApi,\n  } = Page1;\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getMetricsApi, getRestaurantsDataApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column\n          width={Dim.fit()}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n        >\n          <AppSidebar\n            width={Dim.fill()}\n            bind={AppSidebar1}\n            logoUrl=\"your-app-logo-url.png\"\n            sidebarLinks={[\n              {\n                header: \"Restaurants\",\n                links: [\n                  {\n                    label: \"All Restaurants\",\n                    icon: \"restaurant\",\n                  },\n                  {\n                    label: \"Onboarding\",\n                    icon: \"add_business\",\n                  },\n                ],\n              },\n              {\n                header: \"Orders\",\n                links: [\n                  {\n                    label: \"Active Orders\",\n                    icon: \"receipt_long\",\n                  },\n                  {\n                    label: \"Order History\",\n                    icon: \"history\",\n                  },\n                ],\n              },\n              {\n                header: \"Delivery\",\n                links: [\n                  {\n                    label: \"Drivers\",\n                    icon: \"directions_car\",\n                  },\n                  {\n                    label: \"Live Tracking\",\n                    icon: \"map\",\n                  },\n                  {\n                    label: \"Analytics\",\n                    icon: \"analytics\",\n                  },\n                ],\n              },\n            ]}\n            height={Dim.fill()}\n          />\n        </Column>\n        <Column\n          width={Dim.fill()}\n          bind={Column1}\n          padding={{\n            top: {\n              value: 0,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 0,\n              mode: \"px\",\n            },\n            left: {\n              value: 0,\n              mode: \"px\",\n            },\n            right: {\n              value: 0,\n              mode: \"px\",\n            },\n          }}\n          spacing={Dim.px(0)}\n        >\n          <AppHeader\n            width={Dim.fill()}\n            height={Dim.fit()}\n            bind={AppHeader1}\n            title=\"Delivery Dashboard\"\n            avatarUrl=\"your-user-avatar-here.png\"\n            userEmail=\"user@workdoamin.com\"\n          />\n          <Container\n            width={Dim.fill()}\n            height={Dim.fill()}\n            layout=\"vertical\"\n            padding={{\n              top: {\n                value: 12,\n                mode: \"px\",\n              },\n              bottom: {\n                value: 12,\n                mode: \"px\",\n              },\n              left: {\n                value: 12,\n                mode: \"px\",\n              },\n              right: {\n                value: 12,\n                mode: \"px\",\n              },\n            }}\n          >\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              layout=\"horizontal\"\n            >\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard1}\n                title=\"Total Orders\"\n                value={computed(\n                  () => getMetricsApi.response?.totalOrders.value,\n                )}\n                changeValue={computed(\n                  () => getMetricsApi.response?.totalOrders.changeValue,\n                )}\n                changeType={getMetricsApi.response?.totalOrders.changeType}\n                icon=\"receipt_long\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard2}\n                title=\"Active Restaurants\"\n                value={computed(\n                  () => getMetricsApi.response?.activeRestaurants.value,\n                )}\n                changeValue={\n                  getMetricsApi.response?.activeRestaurants.changeValue\n                }\n                changeType={\n                  getMetricsApi.response?.activeRestaurants.changeType\n                }\n                icon=\"restaurant\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard3}\n                title=\"Active Drivers\"\n                value={computed(\n                  () => getMetricsApi.response?.activeDrivers.value,\n                )}\n                changeValue={getMetricsApi.response?.activeDrivers.changeValue}\n                changeType={getMetricsApi.response?.activeDrivers.changeType}\n                icon=\"directions_car\"\n              />\n              <MetricCard\n                width={Dim.fill()}\n                height={Dim.fill()}\n                bind={MetricCard4}\n                title=\"Avg Delivery Time\"\n                value={getMetricsApi.response?.avgDeliveryTime.value}\n                changeType={getMetricsApi.response?.avgDeliveryTime.changeType}\n                icon=\"schedule\"\n                changeValue={computed(\n                  () => getMetricsApi.response?.avgDeliveryTime.changeValue,\n                )}\n              />\n            </Container>\n            <Chart\n              width={Dim.fill()}\n              height={Dim.px(180)}\n              bind={RevenueChart}\n              title=\"Orders\"\n              data={computed(() => ChartDataVar.value || [])}\n            />\n            <Container\n              width={Dim.fill()}\n              height={Dim.fit()}\n              variant=\"card\"\n              layout=\"horizontal\"\n              verticalAlign=\"bottom\"\n            >\n              <Input\n                label=\"Restaurant Name\"\n                placeholderText=\"Search restaurants...\"\n                bind={RestaurantNameInput}\n              />\n              <Dropdown\n                label=\"Cuisine Type\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Italian\",\n                    value: \"Italian\",\n                  },\n                  {\n                    label: \"Chinese\",\n                    value: \"Chinese\",\n                  },\n                  {\n                    label: \"Mexican\",\n                    value: \"Mexican\",\n                  },\n                  {\n                    label: \"American\",\n                    value: \"American\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={CuisineTypeDropdown}\n              />\n              <Dropdown\n                label=\"Status\"\n                options={[\n                  {\n                    label: \"All\",\n                    value: \"All\",\n                  },\n                  {\n                    label: \"Online\",\n                    value: \"Online\",\n                  },\n                  {\n                    label: \"Offline\",\n                    value: \"Offline\",\n                  },\n                  {\n                    label: \"Busy\",\n                    value: \"Busy\",\n                  },\n                ]}\n                defaultValue=\"All\"\n                bind={StatusDropdown}\n              />\n              <Button\n                label=\"Reset Filters\"\n                bind={ResetButton}\n                onClick={EventFlow.runJS(() => {\n                  RestaurantNameInput.text = \"\";\n                  CuisineTypeDropdown.value = \"All\";\n                  StatusDropdown.value = \"All\";\n                })}\n              />\n            </Container>\n            <Table\n              width={Dim.fill()}\n              height={Dim.fit()}\n              tableData={computed(() => RestaurantsTableDataVar.value || [])}\n              columns={{\n                name: {\n                  columnType: \"text\",\n                  label: \"Restaurant\",\n                },\n                email: {\n                  columnType: \"email\",\n                  label: \"Email\",\n                },\n                cuisine: {\n                  columnType: \"text\",\n                  label: \"Cuisine\",\n                },\n                owner: {\n                  columnType: \"text\",\n                  label: \"Owner\",\n                },\n                status: {\n                  columnType: \"tags\",\n                  tagDisplayConfig: {\n                    Online: {\n                      color: \"#14CDB733\",\n                    },\n                    Busy: {\n                      color: \"#FF9F3533\",\n                    },\n                    Offline: {\n                      color: \"#a6a0a033\",\n                    },\n                  },\n                  label: \"Status\",\n                },\n                date_joined: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DD\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Date joined\",\n                },\n                last_activity: {\n                  columnType: \"date\",\n                  inputFormat: \"YYYY-MM-DDTHH:mm:ssZ\",\n                  outputFormat: \"MM-DD-YYYY\",\n                  label: \"Last activity\",\n                },\n                photo: {\n                  columnType: \"image\",\n                  label: \"Photo\",\n                  imageBorderRadius: {\n                    topLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    topRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomLeft: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                    bottomRight: {\n                      mode: \"px\",\n                      value: 16,\n                    },\n                  },\n                },\n              }}\n              header=\"Restaurants\"\n              isSearchable={false}\n              bind={RestaurantsTable}\n              onRowClick={EventFlow.runJS(() => {\n                // set values of all the modal inputs to the values of the selected row\n                ModalRestaurantNameInput.text =\n                  RestaurantsTable.selectedRow?.name;\n                ModalRestaurantEmailInput.text =\n                  RestaurantsTable.selectedRow?.email;\n                ModalRestaurantOwnerInput.text =\n                  RestaurantsTable.selectedRow?.owner;\n                ModalRestaurantCuisineDropdown.value =\n                  RestaurantsTable.selectedRow?.cuisine;\n                ModalRestaurantStatusDropdown.value =\n                  RestaurantsTable.selectedRow?.status;\n              }).controlModal(Modal1, { action: \"open\" })}\n              paginationType=\"client-side\"\n              configuredPageSize={10}\n            />\n          </Container>\n        </Column>\n      </Section>\n      <Modal\n        width={Dim.fill()}\n        height={Dim.fit()}\n        bind={Modal1}\n        spacing={Dim.px(0)}\n        padding={{\n          top: {\n            value: 0,\n            mode: \"px\",\n          },\n          bottom: {\n            value: 0,\n            mode: \"px\",\n          },\n          left: {\n            value: 0,\n            mode: \"px\",\n          },\n          right: {\n            value: 0,\n            mode: \"px\",\n          },\n        }}\n      >\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          layout=\"vertical\"\n          spacing={Dim.px(4)}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Text\n            text={computed(() => {\n              return RestaurantsTable.selectedRow?.name || \"Restaurant Details\";\n            })}\n            textStyle={{\n              variant: \"heading3\",\n            }}\n          />\n        </Container>\n        <Container\n          variant=\"none\"\n          width={Dim.fill()}\n          horizontalAlign=\"left\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n        >\n          {/* <Text\n            text={computed(() => {\n              return `Joined ${RestaurantsTable.selectedRow?.date_joined} and last active ${RestaurantsTable.selectedRow?.last_activity}`;\n            })}\n            textStyle={{\n              variant: \"body2\",\n            }}\n            isVisible={computed(() => {\n              return (\n                RestaurantsTable.selectedRow?.date_joined !== undefined &&\n                RestaurantsTable.selectedRow?.last_activity !== undefined\n              );\n            })}\n           /> */}\n\n          <Input label=\"Restaurant Name\" bind={ModalRestaurantNameInput} />\n          <Input label=\"Email\" bind={ModalRestaurantEmailInput} />\n          <Input label=\"Owner\" bind={ModalRestaurantOwnerInput} />\n          <Dropdown\n            label=\"Cuisine\"\n            options={[\n              {\n                label: \"Italian\",\n                value: \"Italian\",\n              },\n              {\n                label: \"Chinese\",\n                value: \"Chinese\",\n              },\n              {\n                label: \"Mexican\",\n                value: \"Mexican\",\n              },\n              {\n                label: \"American\",\n                value: \"American\",\n              },\n            ]}\n            bind={ModalRestaurantCuisineDropdown}\n          />\n          <Dropdown\n            label=\"Status\"\n            options={[\n              {\n                label: \"Online\",\n                value: \"Online\",\n              },\n              {\n                label: \"Offline\",\n                value: \"Offline\",\n              },\n              {\n                label: \"Busy\",\n                value: \"Busy\",\n              },\n            ]}\n            bind={ModalRestaurantStatusDropdown}\n          />\n        </Container>\n        <Container\n          spacing={Dim.px(8)}\n          width={Dim.fill()}\n          variant=\"none\"\n          layout=\"horizontal\"\n          horizontalAlign=\"right\"\n          padding={{\n            top: {\n              value: 16,\n              mode: \"px\",\n            },\n            bottom: {\n              value: 16,\n              mode: \"px\",\n            },\n            left: {\n              value: 16,\n              mode: \"px\",\n            },\n            right: {\n              value: 16,\n              mode: \"px\",\n            },\n          }}\n          border={{\n            left: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            right: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n            top: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 1,\n              },\n              style: \"solid\",\n            },\n            bottom: {\n              color: Theme.colors.neutral100,\n              width: {\n                mode: \"px\",\n                value: 0,\n              },\n              style: \"solid\",\n            },\n          }}\n        >\n          <Button\n            label=\"Close\"\n            variant=\"secondary\"\n            onClick={EventFlow.controlModal(Modal1, { action: \"close\" })}\n          />\n          <Button\n            label=\"Save Changes\"\n            onClick={EventFlow.runApis([updateRestaurantApi]).controlModal(\n              Modal1,\n              { action: \"close\" },\n            )}\n          />\n        </Container>\n      </Modal>\n    </Page>\n  );\n}\nexport default registerPage(PageContent, Page1Scope);\n```\n\n```pages/Page1/apis/getMetricsApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getMetricsApi\", [\n  new JavaScript(\"getMetrics\", {\n    fn: () => {\n      return {\n        totalOrders: {\n          value: \"24.7K\",\n          changeValue: \"+18.2%\",\n          changeType: \"positive\",\n        },\n        activeRestaurants: {\n          value: \"1.8K\",\n          changeValue: \"+12.5%\",\n          changeType: \"positive\",\n        },\n        activeDrivers: {\n          value: \"523\",\n          changeValue: \"+5.8%\",\n          changeType: \"positive\",\n        },\n        avgDeliveryTime: {\n          value: \"28 min\",\n          changeValue: \"-2.3 min\",\n          changeType: \"positive\",\n        },\n      };\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/getRestaurantsDataApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getRestaurantsDataApi\", [\n  new JavaScript(\"getData\", {\n    fn: () => {\n      return [\n        {\n          photo: \"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=50&h=50&fit=crop&crop=face\",\n          name: \"Bella Vista Italian\",\n          email: \"contact@bellavista.com\",\n          cuisine: \"Italian\",\n          owner: \"Marco Rossi\",\n          status: \"Active\",\n          date_joined: \"2023-01-15\",\n          last_activity: \"2024-01-20\",\n          monthlyOrders: {\n            Jan: 450,\n            Feb: 520,\n            Mar: 480,\n            Apr: 610,\n            May: 590,\n            Jun: 650,\n            Jul: 720,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=50&h=50&fit=crop&crop=face\",\n          name: \"Golden Dragon\",\n          email: \"info@goldendragon.com\",\n          cuisine: \"Chinese\",\n          owner: \"Wei Chen\",\n          status: \"Active\",\n          date_joined: \"2023-02-22\",\n          last_activity: \"2024-01-19\",\n          monthlyOrders: {\n            Jan: 380,\n            Feb: 420,\n            Mar: 460,\n            Apr: 510,\n            May: 540,\n            Jun: 580,\n            Jul: 620,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=50&h=50&fit=crop&crop=face\",\n          name: \"Taco Fiesta\",\n          email: \"orders@tacofiesta.com\",\n          cuisine: \"Mexican\",\n          owner: \"Carlos Rodriguez\",\n          status: \"Pending\",\n          date_joined: \"2023-12-10\",\n          last_activity: \"2024-01-18\",\n          monthlyOrders: {\n            Jan: 280,\n            Feb: 320,\n            Mar: 350,\n            Apr: 390,\n            May: 420,\n            Jun: 450,\n            Jul: 480,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1571091718767-18b5b1457add?w=50&h=50&fit=crop&crop=face\",\n          name: \"Burger Palace\",\n          email: \"hello@burgerpalace.com\",\n          cuisine: \"American\",\n          owner: \"John Smith\",\n          status: \"Active\",\n          date_joined: \"2022-11-08\",\n          last_activity: \"2024-01-21\",\n          monthlyOrders: {\n            Jan: 680,\n            Feb: 720,\n            Mar: 650,\n            Apr: 780,\n            May: 810,\n            Jun: 850,\n            Jul: 920,\n          },\n        },\n        {\n          photo: \"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=50&h=50&fit=crop&crop=face\",\n          name: \"Sakura Sushi\",\n          email: \"reservations@sakurasushi.com\",\n          cuisine: \"Japanese\",\n          owner: \"Takeshi Yamamoto\",\n          status: \"Inactive\",\n          date_joined: \"2023-06-12\",\n          last_activity: \"2023-12-15\",\n          monthlyOrders: {\n            Jan: 320,\n            Feb: 280,\n            Mar: 260,\n            Apr: 240,\n            May: 200,\n            Jun: 180,\n            Jul: 150,\n          },\n        },\n      ];\n    },\n  }),\n]);\n```\n\n```pages/Page1/apis/updateRestaurantApi.ts\nimport {\n  Api,\n  Athena,\n  BigQuery,\n  DynamoDb,\n  JavaScript,\n  Python,\n  Databricks,\n  MicrosoftSql,\n  MySql,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Salesforce,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"updateRestaurantApi\", [\n  new Conditional(\"validate_inputs\", {\n    if: {\n      when: ({\n        ModalRestaurantNameInput,\n        ModalRestaurantEmailInput,\n        ModalRestaurantOwnerInput,\n      }): boolean =>\n        !ModalRestaurantNameInput.value ||\n        !ModalRestaurantEmailInput.value ||\n        !ModalRestaurantOwnerInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Restaurant name, email, and owner are required fields\",\n        }),\n      ],\n    },\n  }),\n  new JavaScript(\"updateRestaurantData\", {\n    fn: ({\n      ModalRestaurantNameInput,\n      ModalRestaurantEmailInput,\n      ModalRestaurantOwnerInput,\n      ModalRestaurantCuisineDropdown,\n      ModalRestaurantStatusDropdown,\n    }) => {\n      const updatedRestaurant = {\n        name: ModalRestaurantNameInput.value,\n        email: ModalRestaurantEmailInput.value,\n        cuisine: ModalRestaurantCuisineDropdown.selectedOptionValue,\n        owner: ModalRestaurantOwnerInput.value,\n        status: ModalRestaurantStatusDropdown.selectedOptionValue,\n        updated_at: new Date().toISOString(),\n      };\n\n      return {\n        success: true,\n        message: \"Restaurant updated successfully\",\n        data: updatedRestaurant,\n      };\n    },\n  }),\n]);\n```\n\n##### Important notes about the choices made in the code generated here:\n\n1. **API Implementation Strategy**: All APIs use dummy data implementations for demonstration purposes. In production applications:\n   - `getMetricsApi` and `getRestaurantsDataApi` should connect to actual databases or external services using SQL queries, REST API calls, or other data connectors\n   - `updateRestaurantApi` should perform real database updates or API calls to persist changes\n   - Consider replacing dummy implementations with actual integrations when users specify particular data sources in their prompts\n\n2. **Layout Architecture**:\n   - `Column` components have padding removed to allow `AppSidebar` and `AppHeader` to extend to screen edges\n   - Content sections use `Container` components for proper spacing and alignment\n   - This pattern ensures consistent visual hierarchy and responsive behavior\n\n3. **Component Styling Patterns**:\n   - Filter controls are wrapped together in a `Container` with `variant=\"card\"` to provide visual containment\n   - Components like `MetricCard`, `Table`, and `Chart` have built-in containers and don't require additional wrapping\n   - Form elements (`Input`, `Dropdown`, `Button`) need explicit container styling for proper presentation\n\n4. **State Management**:\n   - Computed variables (`ChartDataVar`, `RestaurantsTableDataVar`) automatically recalculate when filter inputs change\n   - Modal state is managed through event flows that handle open/close actions and API responses\n   - Error handling and validation are implemented at the API level with appropriate user feedback\n";
 //# sourceMappingURL=full-examples.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"full-examples.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,uCAAuC;AACvC,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,k+hCAAk+hC,CAAC"}
+{"version":3,"file":"full-examples.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/full-examples.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,uCAAuC;AACvC,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,ipiCAAipiC,CAAC"}

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/index.d.ts

@@ -10,7 +10,7 @@ export { content as superblocks_page } from "./superblocks-page.js";
 export { content as superblocks_rbac } from "./superblocks-rbac.js";
 export { content as superblocks_routes } from "./superblocks-routes.js";
 export { content as superblocks_state } from "./superblocks-state.js";
-export { content as superblocks_theming } from "./superblocks-theming.js";
+export { content as superblocks_theming_chakra_new } from "./superblocks-theming-chakra-new.js";
 export { content as system_base } from "./system-base.js";
 export { content as system_incremental } from "./system-incremental.js";
 export { content as system_specific_edit } from "./system-specific-edit.js";

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/index.js

@@ -12,7 +12,7 @@ export { content as superblocks_page } from "./superblocks-page.js";
 export { content as superblocks_rbac } from "./superblocks-rbac.js";
 export { content as superblocks_routes } from "./superblocks-routes.js";
 export { content as superblocks_state } from "./superblocks-state.js";
-export { content as superblocks_theming } from "./superblocks-theming.js";
+export { content as superblocks_theming_chakra_new } from "./superblocks-theming-chakra-new.js";
 export { content as system_base } from "./system-base.js";
 export { content as system_incremental } from "./system-incremental.js";
 export { content as system_specific_edit } from "./system-specific-edit.js";

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,iCAAiC;AAEjC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/platform-parts/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,iCAAiC;AAEjC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}