@superblocksteam/vite-plugin-file-sync 2.0.7 → 2.0.8-next.1

package/dist/ai-service/test-utils/app-generation-mocks/orders-app.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "BUILDING APPLICATION FROM MOCK RESPONSE: I'll create a comprehensive order management app with CRUD operations using the DemoOrders and DemoShipping databases.\n\n<boltArtifact id=\"order-management-app\" title=\"Order Management App\">\n<boltAction type=\"file\" filePath=\"routes.json\">\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/scope.ts\">\nimport {\n  createSbScope,\n  SbApi,\n  SbVariable,\n  SbVariablePersistence,\n  sbComputed,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n  ProductFilterInput: any;\n  CreateOrderModal: any;\n  EditOrderModal: any;\n  OrderDetailsModal: any;\n  CreateOrderButton: any;\n  NewOrderProductInput: any;\n  NewOrderUserEmailInput: any;\n  NewOrderPriceInput: any;\n  NewOrderImageInput: any;\n  EditOrderProductInput: any;\n  EditOrderUserEmailInput: any;\n  EditOrderPriceInput: any;\n  EditOrderImageInput: any;\n}>(\n  ({\n    entities: {\n      OrdersTable,\n      ProductFilterInput,\n      getMetricsApi,\n      getOrdersApi,\n      getOrderDetailsApi,\n      getShippingInfoApi,\n      createOrderApi,\n      updateOrderApi,\n      deleteOrderApi,\n      NewOrderProductInput,\n      NewOrderUserEmailInput,\n      NewOrderPriceInput,\n      NewOrderImageInput,\n      EditOrderProductInput,\n      EditOrderUserEmailInput,\n      EditOrderPriceInput,\n      EditOrderImageInput,\n    },\n  }) => ({\n    getMetricsApi: SbApi({}),\n    getOrdersApi: SbApi({}),\n    getOrderDetailsApi: SbApi({}),\n    getShippingInfoApi: SbApi({}),\n    createOrderApi: SbApi({}),\n    updateOrderApi: SbApi({}),\n    deleteOrderApi: SbApi({}),\n    \n    filteredOrdersVar: SbVariable({\n      defaultValue: sbComputed(() => {\n        const orders = getOrdersApi.response || [];\n        const filterText = ProductFilterInput.value?.toLowerCase() || '';\n        \n        if (!filterText) return orders;\n        \n        return orders.filter((order: any) =>\n          order.product?.toLowerCase().includes(filterText)\n        );\n      }),\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: \"Page1\",\n  }\n);\n\nexport const Page1 = Page1Scope.entities;\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/index.tsx\">\nimport {\n  SbPage,\n  Dim,\n  SbSection,\n  SbColumn,\n  registerPage,\n  SbTable,\n  sbComputed,\n  SbContainer,\n  SbInput,\n  SbButton,\n  SbEventFlow,\n  SbModal,\n  SbText,\n  Theme,\n} from \"@superblocksteam/library\";\nimport MetricCard from \"components/MetricCard/MetricCard\";\nimport AppHeader from \"components/AppHeader/AppHeader\";\nimport KeyValue from \"components/KeyValue\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction Page() {\n  const {\n    OrdersTable,\n    ProductFilterInput,\n    CreateOrderModal,\n    EditOrderModal,\n    CreateOrderButton,\n    OrderDetailsModal,\n    NewOrderProductInput,\n    NewOrderUserEmailInput,\n    NewOrderPriceInput,\n    NewOrderImageInput,\n    EditOrderProductInput,\n    EditOrderUserEmailInput,\n    EditOrderPriceInput,\n    EditOrderImageInput,\n    getMetricsApi,\n    getOrdersApi,\n    getOrderDetailsApi,\n    getShippingInfoApi,\n    createOrderApi,\n    updateOrderApi,\n    deleteOrderApi,\n    filteredOrdersVar,\n  } = Page1;\n\n  return (\n    <SbPage\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={SbEventFlow.runApis([getMetricsApi, getOrdersApi])}\n    >\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()} spacing={Dim.px(0)}>\n          <AppHeader\n            title=\"Order Management\"\n            avatarUrl=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face\"\n            userEmail=\"admin@company.com\"\n            height={Dim.fit()}\n          />\n          \n          <SbContainer\n            layout=\"vertical\"\n            spacing={Dim.px(24)}\n            padding={{\n              top: Dim.px(24),\n              bottom: Dim.px(24),\n              left: Dim.px(24),\n              right: Dim.px(24),\n            }}\n            height={Dim.fill()}\n          >\n            {/* Metrics Cards */}\n            <SbContainer layout=\"horizontal\" spacing={Dim.px(16)}>\n              <MetricCard\n                title=\"Total Orders\"\n                value={sbComputed(() => getMetricsApi.response?.totalOrders?.toString() || \"0\")}\n                icon=\"receipt_long\"\n                width={Dim.fill()}\n              />\n              <MetricCard\n                title=\"Total Revenue\"\n                value={sbComputed(() => `$${getMetricsApi.response?.totalRevenue?.toLocaleString() || \"0\"}`)}\n                icon=\"attach_money\"\n                width={Dim.fill()}\n              />\n              <MetricCard\n                title=\"Orders This Month\"\n                value={sbComputed(() => getMetricsApi.response?.ordersThisMonth?.toString() || \"0\")}\n                icon=\"calendar_today\"\n                width={Dim.fill()}\n              />\n              <MetricCard\n                title=\"Active Shipments\"\n                value={sbComputed(() => getMetricsApi.response?.activeShipments?.toString() || \"0\")}\n                icon=\"local_shipping\"\n                width={Dim.fill()}\n              />\n            </SbContainer>\n\n            {/* Orders Section */}\n            <SbContainer layout=\"vertical\" spacing={Dim.px(16)} variant=\"card\">\n              <SbContainer layout=\"horizontal\" spacing={Dim.px(12)} verticalAlign=\"bottom\">\n                <SbInput\n                  bind={ProductFilterInput}\n                  label=\"Filter by Product\"\n                  placeholder=\"Search products...\"\n                  width={Dim.px(300)}\n                />\n                <SbButton\n                  bind={CreateOrderButton}\n                  label=\"Create Order\"\n                  variant=\"primary\"\n                  icon=\"add\"\n                  onClick={SbEventFlow.controlModal(CreateOrderModal, \"open\")}\n                />\n              </SbContainer>\n\n              <SbTable\n                bind={OrdersTable}\n                tableData={sbComputed(() => filteredOrdersVar.value)}\n                columns={{\n                  id: {\n                    label: \"Order ID\",\n                    columnType: \"text\",\n                  },\n                  product: {\n                    label: \"Product\",\n                    columnType: \"text\",\n                  },\n                  user_email: {\n                    label: \"Customer Email\",\n                    columnType: \"email\",\n                  },\n                  date_purchased: {\n                    label: \"Date Purchased\",\n                    columnType: \"date\",\n                    inputFormat: \"YYYY-MM-DD\",\n                    outputFormat: \"MM/DD/YYYY\",\n                  },\n                  price: {\n                    label: \"Price\",\n                    columnType: \"currency\",\n                    currency: \"USD\",\n                  },\n                  actions: {\n                    label: \"Actions\",\n                    columnType: \"button\",\n                    buttonLabel: \"View Details\",\n                    onClick: SbEventFlow.runJS(() => {\n                      getOrderDetailsApi.run();\n                      getShippingInfoApi.run();\n                    }).controlModal(OrderDetailsModal, \"open\"),\n                  },\n                }}\n                onRowClick={SbEventFlow.runJS(() => {\n                  EditOrderProductInput.text = OrdersTable.selectedRow?.product || \"\";\n                  EditOrderUserEmailInput.text = OrdersTable.selectedRow?.user_email || \"\";\n                  EditOrderPriceInput.text = OrdersTable.selectedRow?.price?.toString() || \"\";\n                  EditOrderImageInput.text = OrdersTable.selectedRow?.image || \"\";\n                }).controlModal(EditOrderModal, \"open\")}\n                height={Dim.px(400)}\n              />\n            </SbContainer>\n          </SbContainer>\n        </SbColumn>\n      </SbSection>\n\n      {/* Create Order Modal */}\n      <SbModal bind={CreateOrderModal}>\n        <SbContainer layout=\"vertical\" spacing={Dim.px(24)} width={Dim.fill()}>\n          <SbText text=\"Create New Order\" textStyle={{ variant: \"heading3\" }} />\n          \n          <SbContainer layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n            <SbInput\n              bind={NewOrderProductInput}\n              label=\"Product Name\"\n              placeholder=\"Enter product name\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <SbInput\n              bind={NewOrderUserEmailInput}\n              label=\"Customer Email\"\n              placeholder=\"Enter customer email\"\n              inputType=\"EMAIL\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <SbInput\n              bind={NewOrderPriceInput}\n              label=\"Price\"\n              placeholder=\"Enter price\"\n              inputType=\"NUMBER\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <SbInput\n              bind={NewOrderImageInput}\n              label=\"Product Image URL\"\n              placeholder=\"Enter image URL (optional)\"\n              width={Dim.fill()}\n            />\n          </SbContainer>\n\n          <SbContainer layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"right\" width={Dim.fill()}>\n            <SbButton\n              label=\"Cancel\"\n              variant=\"secondary\"\n              onClick={SbEventFlow.runJS(() => {\n                NewOrderProductInput.text = \"\";\n                NewOrderUserEmailInput.text = \"\";\n                NewOrderPriceInput.text = \"\";\n                NewOrderImageInput.text = \"\";\n              }).controlModal(CreateOrderModal, \"close\")}\n            />\n            <SbButton\n              label=\"Create Order\"\n              variant=\"primary\"\n              onClick={SbEventFlow.runApis([createOrderApi])\n                .runApis([getMetricsApi, getOrdersApi])\n                .runJS(() => {\n                  NewOrderProductInput.text = \"\";\n                  NewOrderUserEmailInput.text = \"\";\n                  NewOrderPriceInput.text = \"\";\n                  NewOrderImageInput.text = \"\";\n                })\n                .controlModal(CreateOrderModal, \"close\")}\n            />\n          </SbContainer>\n        </SbContainer>\n      </SbModal>\n\n      {/* Edit Order Modal */}\n      <SbModal bind={EditOrderModal}>\n        <SbContainer layout=\"vertical\" spacing={Dim.px(24)} width={Dim.fill()}>\n          <SbContainer layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"space-between\" width={Dim.fill()}>\n            <SbText \n              width={Dim.fit()}\n              text={sbComputed(() => `Edit Order #${OrdersTable.selectedRow?.id || \"\"}`)} \n              textStyle={{ variant: \"heading3\" }} \n            />\n          </SbContainer>\n          \n          <SbContainer layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n            <SbInput\n              bind={EditOrderProductInput}\n              label=\"Product Name\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <SbInput\n              bind={EditOrderUserEmailInput}\n              label=\"Customer Email\"\n              inputType=\"EMAIL\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <SbInput\n              bind={EditOrderPriceInput}\n              label=\"Price\"\n              inputType=\"NUMBER\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <SbInput\n              bind={EditOrderImageInput}\n              label=\"Product Image URL\"\n              width={Dim.fill()}\n            />\n          </SbContainer>\n\n          <SbContainer layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"right\" width={Dim.fill()}>\n            <SbButton\n              label=\"Cancel\"\n              variant=\"secondary\"\n              onClick={SbEventFlow.controlModal(EditOrderModal, \"close\")}\n            />\n            <SbButton\n              label=\"Update Order\"\n              variant=\"primary\"\n              onClick={SbEventFlow.runApis([updateOrderApi])\n                .runApis([getMetricsApi, getOrdersApi])\n                .controlModal(EditOrderModal, \"close\")}\n            />\n          </SbContainer>\n        </SbContainer>\n      </SbModal>\n\n      {/* Order Details Modal */}\n      <SbModal bind={OrderDetailsModal}>\n        <SbContainer layout=\"vertical\" spacing={Dim.px(24)} width={Dim.fill()}>\n          <SbText \n            text={sbComputed(() => `Order Details #${OrdersTable.selectedRow?.id || \"\"}`)} \n            textStyle={{ variant: \"heading3\" }} \n          />\n          \n          <SbContainer layout=\"horizontal\" spacing={Dim.px(24)} width={Dim.fill()}>\n            <SbContainer layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n              <KeyValue\n                label=\"Order Information\"\n                data={sbComputed(() => getOrderDetailsApi.response || {})}\n              />\n            </SbContainer>\n            \n            <SbContainer layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n              <KeyValue\n                label=\"Shipping Information\"\n                data={sbComputed(() => getShippingInfoApi.response || {})}\n              />\n            </SbContainer>\n          </SbContainer>\n\n          <SbContainer layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"right\" width={Dim.fill()}>\n            <SbButton\n              label=\"Close\"\n              variant=\"secondary\"\n              onClick={SbEventFlow.controlModal(OrderDetailsModal, \"close\")}\n            />\n          </SbContainer>\n        </SbContainer>\n      </SbModal>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page, Page1Scope);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getMetricsApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\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: 45,\n        totalRevenue: 12489.50,\n        ordersThisMonth: 8,\n        activeShipments: 12,\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getOrdersApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrdersApi\", [\n  new JavaScript(\"getOrders\", {\n    fn: () => {\n      return [\n        {\n          id: 1,\n          product: \"Wireless Headphones\",\n          user_email: \"john.doe@example.com\",\n          date_purchased: \"2024-01-15\",\n          price: 199.99,\n          image: \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 2,\n          product: \"Smart Watch\",\n          user_email: \"jane.smith@example.com\",\n          date_purchased: \"2024-01-14\",\n          price: 299.99,\n          image: \"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 3,\n          product: \"Laptop Stand\",\n          user_email: \"mike.johnson@example.com\",\n          date_purchased: \"2024-01-13\",\n          price: 49.99,\n          image: \"https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 4,\n          product: \"Bluetooth Speaker\",\n          user_email: \"sarah.wilson@example.com\",\n          date_purchased: \"2024-01-12\",\n          price: 79.99,\n          image: \"https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 5,\n          product: \"Gaming Mouse\",\n          user_email: \"alex.brown@example.com\",\n          date_purchased: \"2024-01-11\",\n          price: 89.99,\n          image: \"https://images.unsplash.com/photo-1527814050087-3793815479db?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 6,\n          product: \"USB-C Hub\",\n          user_email: \"emily.davis@example.com\",\n          date_purchased: \"2024-01-10\",\n          price: 39.99,\n          image: \"https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 7,\n          product: \"Phone Case\",\n          user_email: \"david.miller@example.com\",\n          date_purchased: \"2024-01-09\",\n          price: 24.99,\n          image: \"https://images.unsplash.com/photo-1601944177325-f8867652837f?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 8,\n          product: \"Tablet Stand\",\n          user_email: \"lisa.garcia@example.com\",\n          date_purchased: \"2024-01-08\",\n          price: 34.99,\n          image: \"https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=200&h=200&fit=crop\",\n        },\n      ];\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getOrderDetailsApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrderDetailsApi\", [\n  new JavaScript(\"getOrderDetails\", {\n    fn: ({ OrdersTable }) => {\n      const order = OrdersTable.selectedRow;\n      if (!order) return {};\n      \n      // Generate a user_id if not present (for display purposes)\n      const userId = order.user_id || Math.floor(Math.random() * 10000) + 1000;\n      \n      return {\n        \"Order ID\": order.id,\n        \"Product\": order.product,\n        \"Customer Email\": order.user_email,\n        \"User ID\": userId,\n        \"Date Purchased\": order.date_purchased,\n        \"Price\": `$${order.price}`,\n        \"Image URL\": order.image || \"N/A\",\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getShippingInfoApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getShippingInfoApi\", [\n  new JavaScript(\"getShippingInfo\", {\n    fn: ({ OrdersTable }) => {\n      const order = OrdersTable.selectedRow;\n      if (!order) return { \"Shipping Status\": \"No shipping info\" };\n      \n      const orderId = order.id;\n      \n      // Generate shipping data based on order ID patterns\n      const shippingStatuses = [\"Processing\", \"In Transit\", \"Delivered\", \"Out for Delivery\"];\n      const locations = [\"Los Angeles, CA\", \"Phoenix, AZ\", \"Denver, CO\", \"Chicago, IL\", \"Miami, FL\"];\n      const activities = [\"Order received\", \"Package shipped\", \"In transit\", \"Out for delivery\", \"Delivered\"];\n      \n      const statusIndex = orderId % shippingStatuses.length;\n      const status = shippingStatuses[statusIndex];\n      \n      // Generate 2-3 shipping activities\n      const numActivities = 2 + (orderId % 2);\n      const history = [];\n      \n      for (let i = 0; i < numActivities; i++) {\n        const date = new Date();\n        date.setDate(date.getDate() - (numActivities - i));\n        const timestamp = date.toISOString().replace('T', ' ').substring(0, 19);\n        \n        history.push({\n          TIMESTAMP: timestamp,\n          ACTIVITY: activities[i % activities.length],\n          LOCATION: locations[i % locations.length],\n        });\n      }\n      \n      const result = {\n        \"Shipping Status\": status,\n      };\n      \n      history.forEach((item, index) => {\n        result[`Activity ${index + 1}`] = `${item.ACTIVITY} - ${item.LOCATION} (${item.TIMESTAMP})`;\n      });\n      \n      return result;\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/createOrderApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"createOrderApi\", [\n  new Conditional(\"validateInputs\", {\n    if: {\n      when: ({ NewOrderProductInput, NewOrderUserEmailInput, NewOrderPriceInput }) =>\n        !NewOrderProductInput.value || \n        !NewOrderUserEmailInput.value || \n        !NewOrderPriceInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Product name, customer email, and price are required\",\n        }),\n      ],\n    },\n  }),\n  \n  new JavaScript(\"createOrder\", {\n    fn: ({ NewOrderProductInput, NewOrderUserEmailInput, NewOrderPriceInput, NewOrderImageInput }) => {\n      // Generate a new order ID and user ID\n      const orderId = Math.floor(Math.random() * 1000) + 100;\n      const userId = Math.floor(Math.random() * 10000) + 1;\n      const currentDate = new Date().toISOString().split('T')[0];\n      \n      // Simulate order creation\n      console.log(\"Creating order:\", {\n        id: orderId,\n        user_id: userId,\n        product: NewOrderProductInput.value,\n        user_email: NewOrderUserEmailInput.value,\n        price: NewOrderPriceInput.value,\n        date_purchased: currentDate,\n        image: NewOrderImageInput.value || \"\",\n      });\n      \n      return {\n        success: true,\n        message: \"Order created successfully\",\n        orderId: orderId,\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/updateOrderApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"updateOrderApi\", [\n  new Conditional(\"validateInputs\", {\n    if: {\n      when: ({ EditOrderProductInput, EditOrderUserEmailInput, EditOrderPriceInput }) =>\n        !EditOrderProductInput.value || \n        !EditOrderUserEmailInput.value || \n        !EditOrderPriceInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Product name, customer email, and price are required\",\n        }),\n      ],\n    },\n  }),\n  \n  new JavaScript(\"updateOrder\", {\n    fn: ({ OrdersTable, EditOrderProductInput, EditOrderUserEmailInput, EditOrderPriceInput, EditOrderImageInput }) => {\n      const orderId = OrdersTable.selectedRow?.id;\n      if (!orderId) {\n        throw new Error(\"No order selected for update\");\n      }\n      \n      // Simulate order update\n      console.log(\"Updating order:\", {\n        id: orderId,\n        product: EditOrderProductInput.value,\n        user_email: EditOrderUserEmailInput.value,\n        price: EditOrderPriceInput.value,\n        image: EditOrderImageInput.value || \"\",\n      });\n      \n      return {\n        success: true,\n        message: \"Order updated successfully\",\n        orderId: orderId,\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/deleteOrderApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"deleteOrderApi\", [\n  new JavaScript(\"deleteOrder\", {\n    fn: ({ OrdersTable }) => {\n      const orderId = OrdersTable.selectedRow?.id;\n      if (!orderId) {\n        throw new Error(\"No order selected for deletion\");\n      }\n      \n      // Simulate order deletion\n      console.log(\"Deleting order:\", {\n        id: orderId,\n        product: OrdersTable.selectedRow?.product,\n        user_email: OrdersTable.selectedRow?.user_email,\n      });\n      \n      return {\n        success: true,\n        message: \"Order deleted successfully\",\n        deletedOrderId: orderId,\n      };\n    },\n  }),\n]);\n</boltAction>\n</boltArtifact>\n\nThe order management app is now complete with all the requested features:\n\n## **Key Features:**\n\n### **Metrics Dashboard**\n- **Total Orders**: Count of all records from DemoOrders\n- **Total Revenue**: Sum of price field from DemoOrders  \n- **Orders This Month**: Count of orders from current month\n- **Active Shipments**: Count of records in DemoShipping SHIPPING_STATUS table\n\n### **Orders Management**\n- **Orders Table**: Displays all orders with id, product, user_email, date_purchased, price\n- **Product Filter**: Real-time text filtering on product names\n- **CRUD Operations**:\n  - **Create**: Add new orders with product, email, price, and optional image\n  - **Update**: Edit existing orders (click row to edit)\n  - **Delete**: Remove orders (delete button in edit modal)\n  - **View Details**: See full order info plus shipping status (click \"View Details\" button)\n\n### **Shipping Integration**\n- **Order Details Modal**: Shows order information plus shipping status and recent activity from DemoShipping tables\n- **Real-time Data**: Fetches shipping status and history by ORDER_ID\n\n### **User Experience**\n- Clean, professional interface with metric cards\n- Intuitive modals for all CRUD operations\n- Real-time filtering and data updates\n- Proper validation and error handling\n- Responsive design with consistent spacing\n\nThe app automatically loads metrics and orders data on page load, and all operations refresh the data to keep everything in sync.";
+declare const _default: "BUILDING APPLICATION FROM MOCK RESPONSE: I'll create a comprehensive order management app with CRUD operations using the DemoOrders and DemoShipping databases.\n\n<boltArtifact id=\"order-management-app\" title=\"Order Management App\">\n<boltAction type=\"file\" filePath=\"routes.json\">\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/scope.ts\">\nimport {\n  createScope,\n  SbApi,\n  SbVariable,\n  SbVariablePersistence,\n  computed,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  OrdersTable: any;\n  ProductFilterInput: any;\n  CreateOrderModal: any;\n  EditOrderModal: any;\n  OrderDetailsModal: any;\n  CreateOrderButton: any;\n  NewOrderProductInput: any;\n  NewOrderUserEmailInput: any;\n  NewOrderPriceInput: any;\n  NewOrderImageInput: any;\n  EditOrderProductInput: any;\n  EditOrderUserEmailInput: any;\n  EditOrderPriceInput: any;\n  EditOrderImageInput: any;\n}>(\n  ({\n    entities: {\n      OrdersTable,\n      ProductFilterInput,\n      getMetricsApi,\n      getOrdersApi,\n      getOrderDetailsApi,\n      getShippingInfoApi,\n      createOrderApi,\n      updateOrderApi,\n      deleteOrderApi,\n      NewOrderProductInput,\n      NewOrderUserEmailInput,\n      NewOrderPriceInput,\n      NewOrderImageInput,\n      EditOrderProductInput,\n      EditOrderUserEmailInput,\n      EditOrderPriceInput,\n      EditOrderImageInput,\n    },\n  }) => ({\n    getMetricsApi: SbApi({}),\n    getOrdersApi: SbApi({}),\n    getOrderDetailsApi: SbApi({}),\n    getShippingInfoApi: SbApi({}),\n    createOrderApi: SbApi({}),\n    updateOrderApi: SbApi({}),\n    deleteOrderApi: SbApi({}),\n    \n    filteredOrdersVar: SbVariable({\n      defaultValue: computed(() => {\n        const orders = getOrdersApi.response || [];\n        const filterText = ProductFilterInput.value?.toLowerCase() || '';\n        \n        if (!filterText) return orders;\n        \n        return orders.filter((order: any) =>\n          order.product?.toLowerCase().includes(filterText)\n        );\n      }),\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: \"Page1\",\n  }\n);\n\nexport const Page1 = Page1Scope.entities;\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/index.tsx\">\nimport {\n  Page,\n  Dim,\n  Section,\n  Column,\n  registerPage,\n  Table,\n  computed,\n  Container,\n  Input,\n  Button,\n  EventFlow,\n  Modal,\n  Text,\n  Theme,\n} from \"@superblocksteam/library\";\nimport MetricCard from \"components/MetricCard/MetricCard\";\nimport AppHeader from \"components/AppHeader/AppHeader\";\nimport KeyValue from \"components/KeyValue\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  const {\n    OrdersTable,\n    ProductFilterInput,\n    CreateOrderModal,\n    EditOrderModal,\n    CreateOrderButton,\n    OrderDetailsModal,\n    NewOrderProductInput,\n    NewOrderUserEmailInput,\n    NewOrderPriceInput,\n    NewOrderImageInput,\n    EditOrderProductInput,\n    EditOrderUserEmailInput,\n    EditOrderPriceInput,\n    EditOrderImageInput,\n    getMetricsApi,\n    getOrdersApi,\n    getOrderDetailsApi,\n    getShippingInfoApi,\n    createOrderApi,\n    updateOrderApi,\n    deleteOrderApi,\n    filteredOrdersVar,\n  } = Page1;\n\n  return (\n    <Page\n      name=\"Page1\"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getMetricsApi, getOrdersApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()} spacing={Dim.px(0)}>\n          <AppHeader\n            title=\"Order Management\"\n            avatarUrl=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face\"\n            userEmail=\"admin@company.com\"\n            height={Dim.fit()}\n          />\n          \n          <Container\n            layout=\"vertical\"\n            spacing={Dim.px(24)}\n            padding={{\n              top: Dim.px(24),\n              bottom: Dim.px(24),\n              left: Dim.px(24),\n              right: Dim.px(24),\n            }}\n            height={Dim.fill()}\n          >\n            {/* Metrics Cards */}\n            <Container layout=\"horizontal\" spacing={Dim.px(16)}>\n              <MetricCard\n                title=\"Total Orders\"\n                value={computed(() => getMetricsApi.response?.totalOrders?.toString() || \"0\")}\n                icon=\"receipt_long\"\n                width={Dim.fill()}\n              />\n              <MetricCard\n                title=\"Total Revenue\"\n                value={computed(() => `$${getMetricsApi.response?.totalRevenue?.toLocaleString() || \"0\"}`)}\n                icon=\"attach_money\"\n                width={Dim.fill()}\n              />\n              <MetricCard\n                title=\"Orders This Month\"\n                value={computed(() => getMetricsApi.response?.ordersThisMonth?.toString() || \"0\")}\n                icon=\"calendar_today\"\n                width={Dim.fill()}\n              />\n              <MetricCard\n                title=\"Active Shipments\"\n                value={computed(() => getMetricsApi.response?.activeShipments?.toString() || \"0\")}\n                icon=\"local_shipping\"\n                width={Dim.fill()}\n              />\n            </Container>\n\n            {/* Orders Section */}\n            <Container layout=\"vertical\" spacing={Dim.px(16)} variant=\"card\">\n              <Container layout=\"horizontal\" spacing={Dim.px(12)} verticalAlign=\"bottom\">\n                <Input\n                  bind={ProductFilterInput}\n                  label=\"Filter by Product\"\n                  placeholder=\"Search products...\"\n                  width={Dim.px(300)}\n                />\n                <Button\n                  bind={CreateOrderButton}\n                  label=\"Create Order\"\n                  variant=\"primary\"\n                  icon=\"add\"\n                  onClick={EventFlow.controlModal(CreateOrderModal, \"open\")}\n                />\n              </Container>\n\n              <Table\n                bind={OrdersTable}\n                tableData={computed(() => filteredOrdersVar.value)}\n                columns={{\n                  id: {\n                    label: \"Order ID\",\n                    columnType: \"text\",\n                  },\n                  product: {\n                    label: \"Product\",\n                    columnType: \"text\",\n                  },\n                  user_email: {\n                    label: \"Customer Email\",\n                    columnType: \"email\",\n                  },\n                  date_purchased: {\n                    label: \"Date Purchased\",\n                    columnType: \"date\",\n                    inputFormat: \"YYYY-MM-DD\",\n                    outputFormat: \"MM/DD/YYYY\",\n                  },\n                  price: {\n                    label: \"Price\",\n                    columnType: \"currency\",\n                    currency: \"USD\",\n                  },\n                  actions: {\n                    label: \"Actions\",\n                    columnType: \"button\",\n                    buttonLabel: \"View Details\",\n                    onClick: EventFlow.runJS(() => {\n                      getOrderDetailsApi.run();\n                      getShippingInfoApi.run();\n                    }).controlModal(OrderDetailsModal, \"open\"),\n                  },\n                }}\n                onRowClick={EventFlow.runJS(() => {\n                  EditOrderProductInput.text = OrdersTable.selectedRow?.product || \"\";\n                  EditOrderUserEmailInput.text = OrdersTable.selectedRow?.user_email || \"\";\n                  EditOrderPriceInput.text = OrdersTable.selectedRow?.price?.toString() || \"\";\n                  EditOrderImageInput.text = OrdersTable.selectedRow?.image || \"\";\n                }).controlModal(EditOrderModal, \"open\")}\n                height={Dim.px(400)}\n              />\n            </Container>\n          </Container>\n        </Column>\n      </Section>\n\n      {/* Create Order Modal */}\n      <Modal bind={CreateOrderModal}>\n        <Container layout=\"vertical\" spacing={Dim.px(24)} width={Dim.fill()}>\n          <Text text=\"Create New Order\" textStyle={{ variant: \"heading3\" }} />\n          \n          <Container layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n            <Input\n              bind={NewOrderProductInput}\n              label=\"Product Name\"\n              placeholder=\"Enter product name\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <Input\n              bind={NewOrderUserEmailInput}\n              label=\"Customer Email\"\n              placeholder=\"Enter customer email\"\n              inputType=\"EMAIL\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <Input\n              bind={NewOrderPriceInput}\n              label=\"Price\"\n              placeholder=\"Enter price\"\n              inputType=\"NUMBER\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <Input\n              bind={NewOrderImageInput}\n              label=\"Product Image URL\"\n              placeholder=\"Enter image URL (optional)\"\n              width={Dim.fill()}\n            />\n          </Container>\n\n          <Container layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"right\" width={Dim.fill()}>\n            <Button\n              label=\"Cancel\"\n              variant=\"secondary\"\n              onClick={EventFlow.runJS(() => {\n                NewOrderProductInput.text = \"\";\n                NewOrderUserEmailInput.text = \"\";\n                NewOrderPriceInput.text = \"\";\n                NewOrderImageInput.text = \"\";\n              }).controlModal(CreateOrderModal, \"close\")}\n            />\n            <Button\n              label=\"Create Order\"\n              variant=\"primary\"\n              onClick={EventFlow.runApis([createOrderApi])\n                .runApis([getMetricsApi, getOrdersApi])\n                .runJS(() => {\n                  NewOrderProductInput.text = \"\";\n                  NewOrderUserEmailInput.text = \"\";\n                  NewOrderPriceInput.text = \"\";\n                  NewOrderImageInput.text = \"\";\n                })\n                .controlModal(CreateOrderModal, \"close\")}\n            />\n          </Container>\n        </Container>\n      </Modal>\n\n      {/* Edit Order Modal */}\n      <Modal bind={EditOrderModal}>\n        <Container layout=\"vertical\" spacing={Dim.px(24)} width={Dim.fill()}>\n          <Container layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"space-between\" width={Dim.fill()}>\n            <Text \n              width={Dim.fit()}\n              text={computed(() => `Edit Order #${OrdersTable.selectedRow?.id || \"\"}`)} \n              textStyle={{ variant: \"heading3\" }} \n            />\n          </Container>\n          \n          <Container layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n            <Input\n              bind={EditOrderProductInput}\n              label=\"Product Name\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <Input\n              bind={EditOrderUserEmailInput}\n              label=\"Customer Email\"\n              inputType=\"EMAIL\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <Input\n              bind={EditOrderPriceInput}\n              label=\"Price\"\n              inputType=\"NUMBER\"\n              width={Dim.fill()}\n              isRequired={true}\n            />\n            <Input\n              bind={EditOrderImageInput}\n              label=\"Product Image URL\"\n              width={Dim.fill()}\n            />\n          </Container>\n\n          <Container layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"right\" width={Dim.fill()}>\n            <Button\n              label=\"Cancel\"\n              variant=\"secondary\"\n              onClick={EventFlow.controlModal(EditOrderModal, \"close\")}\n            />\n            <Button\n              label=\"Update Order\"\n              variant=\"primary\"\n              onClick={EventFlow.runApis([updateOrderApi])\n                .runApis([getMetricsApi, getOrdersApi])\n                .controlModal(EditOrderModal, \"close\")}\n            />\n          </Container>\n        </Container>\n      </Modal>\n\n      {/* Order Details Modal */}\n      <Modal bind={OrderDetailsModal}>\n        <Container layout=\"vertical\" spacing={Dim.px(24)} width={Dim.fill()}>\n          <Text \n            text={computed(() => `Order Details #${OrdersTable.selectedRow?.id || \"\"}`)} \n            textStyle={{ variant: \"heading3\" }} \n          />\n          \n          <Container layout=\"horizontal\" spacing={Dim.px(24)} width={Dim.fill()}>\n            <Container layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n              <KeyValue\n                label=\"Order Information\"\n                data={computed(() => getOrderDetailsApi.response || {})}\n              />\n            </Container>\n            \n            <Container layout=\"vertical\" spacing={Dim.px(16)} width={Dim.fill()}>\n              <KeyValue\n                label=\"Shipping Information\"\n                data={computed(() => getShippingInfoApi.response || {})}\n              />\n            </Container>\n          </Container>\n\n          <Container layout=\"horizontal\" spacing={Dim.px(12)} horizontalAlign=\"right\" width={Dim.fill()}>\n            <Button\n              label=\"Close\"\n              variant=\"secondary\"\n              onClick={EventFlow.controlModal(OrderDetailsModal, \"close\")}\n            />\n          </Container>\n        </Container>\n      </Modal>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getMetricsApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\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: 45,\n        totalRevenue: 12489.50,\n        ordersThisMonth: 8,\n        activeShipments: 12,\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getOrdersApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrdersApi\", [\n  new JavaScript(\"getOrders\", {\n    fn: () => {\n      return [\n        {\n          id: 1,\n          product: \"Wireless Headphones\",\n          user_email: \"john.doe@example.com\",\n          date_purchased: \"2024-01-15\",\n          price: 199.99,\n          image: \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 2,\n          product: \"Smart Watch\",\n          user_email: \"jane.smith@example.com\",\n          date_purchased: \"2024-01-14\",\n          price: 299.99,\n          image: \"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 3,\n          product: \"Laptop Stand\",\n          user_email: \"mike.johnson@example.com\",\n          date_purchased: \"2024-01-13\",\n          price: 49.99,\n          image: \"https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 4,\n          product: \"Bluetooth Speaker\",\n          user_email: \"sarah.wilson@example.com\",\n          date_purchased: \"2024-01-12\",\n          price: 79.99,\n          image: \"https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 5,\n          product: \"Gaming Mouse\",\n          user_email: \"alex.brown@example.com\",\n          date_purchased: \"2024-01-11\",\n          price: 89.99,\n          image: \"https://images.unsplash.com/photo-1527814050087-3793815479db?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 6,\n          product: \"USB-C Hub\",\n          user_email: \"emily.davis@example.com\",\n          date_purchased: \"2024-01-10\",\n          price: 39.99,\n          image: \"https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 7,\n          product: \"Phone Case\",\n          user_email: \"david.miller@example.com\",\n          date_purchased: \"2024-01-09\",\n          price: 24.99,\n          image: \"https://images.unsplash.com/photo-1601944177325-f8867652837f?w=200&h=200&fit=crop\",\n        },\n        {\n          id: 8,\n          product: \"Tablet Stand\",\n          user_email: \"lisa.garcia@example.com\",\n          date_purchased: \"2024-01-08\",\n          price: 34.99,\n          image: \"https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=200&h=200&fit=crop\",\n        },\n      ];\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getOrderDetailsApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrderDetailsApi\", [\n  new JavaScript(\"getOrderDetails\", {\n    fn: ({ OrdersTable }) => {\n      const order = OrdersTable.selectedRow;\n      if (!order) return {};\n      \n      // Generate a user_id if not present (for display purposes)\n      const userId = order.user_id || Math.floor(Math.random() * 10000) + 1000;\n      \n      return {\n        \"Order ID\": order.id,\n        \"Product\": order.product,\n        \"Customer Email\": order.user_email,\n        \"User ID\": userId,\n        \"Date Purchased\": order.date_purchased,\n        \"Price\": `$${order.price}`,\n        \"Image URL\": order.image || \"N/A\",\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getShippingInfoApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getShippingInfoApi\", [\n  new JavaScript(\"getShippingInfo\", {\n    fn: ({ OrdersTable }) => {\n      const order = OrdersTable.selectedRow;\n      if (!order) return { \"Shipping Status\": \"No shipping info\" };\n      \n      const orderId = order.id;\n      \n      // Generate shipping data based on order ID patterns\n      const shippingStatuses = [\"Processing\", \"In Transit\", \"Delivered\", \"Out for Delivery\"];\n      const locations = [\"Los Angeles, CA\", \"Phoenix, AZ\", \"Denver, CO\", \"Chicago, IL\", \"Miami, FL\"];\n      const activities = [\"Order received\", \"Package shipped\", \"In transit\", \"Out for delivery\", \"Delivered\"];\n      \n      const statusIndex = orderId % shippingStatuses.length;\n      const status = shippingStatuses[statusIndex];\n      \n      // Generate 2-3 shipping activities\n      const numActivities = 2 + (orderId % 2);\n      const history = [];\n      \n      for (let i = 0; i < numActivities; i++) {\n        const date = new Date();\n        date.setDate(date.getDate() - (numActivities - i));\n        const timestamp = date.toISOString().replace('T', ' ').substring(0, 19);\n        \n        history.push({\n          TIMESTAMP: timestamp,\n          ACTIVITY: activities[i % activities.length],\n          LOCATION: locations[i % locations.length],\n        });\n      }\n      \n      const result = {\n        \"Shipping Status\": status,\n      };\n      \n      history.forEach((item, index) => {\n        result[`Activity ${index + 1}`] = `${item.ACTIVITY} - ${item.LOCATION} (${item.TIMESTAMP})`;\n      });\n      \n      return result;\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/createOrderApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"createOrderApi\", [\n  new Conditional(\"validateInputs\", {\n    if: {\n      when: ({ NewOrderProductInput, NewOrderUserEmailInput, NewOrderPriceInput }) =>\n        !NewOrderProductInput.value || \n        !NewOrderUserEmailInput.value || \n        !NewOrderPriceInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Product name, customer email, and price are required\",\n        }),\n      ],\n    },\n  }),\n  \n  new JavaScript(\"createOrder\", {\n    fn: ({ NewOrderProductInput, NewOrderUserEmailInput, NewOrderPriceInput, NewOrderImageInput }) => {\n      // Generate a new order ID and user ID\n      const orderId = Math.floor(Math.random() * 1000) + 100;\n      const userId = Math.floor(Math.random() * 10000) + 1;\n      const currentDate = new Date().toISOString().split('T')[0];\n      \n      // Simulate order creation\n      console.log(\"Creating order:\", {\n        id: orderId,\n        user_id: userId,\n        product: NewOrderProductInput.value,\n        user_email: NewOrderUserEmailInput.value,\n        price: NewOrderPriceInput.value,\n        date_purchased: currentDate,\n        image: NewOrderImageInput.value || \"\",\n      });\n      \n      return {\n        success: true,\n        message: \"Order created successfully\",\n        orderId: orderId,\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/updateOrderApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"updateOrderApi\", [\n  new Conditional(\"validateInputs\", {\n    if: {\n      when: ({ EditOrderProductInput, EditOrderUserEmailInput, EditOrderPriceInput }) =>\n        !EditOrderProductInput.value || \n        !EditOrderUserEmailInput.value || \n        !EditOrderPriceInput.value,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Product name, customer email, and price are required\",\n        }),\n      ],\n    },\n  }),\n  \n  new JavaScript(\"updateOrder\", {\n    fn: ({ OrdersTable, EditOrderProductInput, EditOrderUserEmailInput, EditOrderPriceInput, EditOrderImageInput }) => {\n      const orderId = OrdersTable.selectedRow?.id;\n      if (!orderId) {\n        throw new Error(\"No order selected for update\");\n      }\n      \n      // Simulate order update\n      console.log(\"Updating order:\", {\n        id: orderId,\n        product: EditOrderProductInput.value,\n        user_email: EditOrderUserEmailInput.value,\n        price: EditOrderPriceInput.value,\n        image: EditOrderImageInput.value || \"\",\n      });\n      \n      return {\n        success: true,\n        message: \"Order updated successfully\",\n        orderId: orderId,\n      };\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/deleteOrderApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"deleteOrderApi\", [\n  new JavaScript(\"deleteOrder\", {\n    fn: ({ OrdersTable }) => {\n      const orderId = OrdersTable.selectedRow?.id;\n      if (!orderId) {\n        throw new Error(\"No order selected for deletion\");\n      }\n      \n      // Simulate order deletion\n      console.log(\"Deleting order:\", {\n        id: orderId,\n        product: OrdersTable.selectedRow?.product,\n        user_email: OrdersTable.selectedRow?.user_email,\n      });\n      \n      return {\n        success: true,\n        message: \"Order deleted successfully\",\n        deletedOrderId: orderId,\n      };\n    },\n  }),\n]);\n</boltAction>\n</boltArtifact>\n\nThe order management app is now complete with all the requested features:\n\n## **Key Features:**\n\n### **Metrics Dashboard**\n- **Total Orders**: Count of all records from DemoOrders\n- **Total Revenue**: Sum of price field from DemoOrders  \n- **Orders This Month**: Count of orders from current month\n- **Active Shipments**: Count of records in DemoShipping SHIPPING_STATUS table\n\n### **Orders Management**\n- **Orders Table**: Displays all orders with id, product, user_email, date_purchased, price\n- **Product Filter**: Real-time text filtering on product names\n- **CRUD Operations**:\n  - **Create**: Add new orders with product, email, price, and optional image\n  - **Update**: Edit existing orders (click row to edit)\n  - **Delete**: Remove orders (delete button in edit modal)\n  - **View Details**: See full order info plus shipping status (click \"View Details\" button)\n\n### **Shipping Integration**\n- **Order Details Modal**: Shows order information plus shipping status and recent activity from DemoShipping tables\n- **Real-time Data**: Fetches shipping status and history by ORDER_ID\n\n### **User Experience**\n- Clean, professional interface with metric cards\n- Intuitive modals for all CRUD operations\n- Real-time filtering and data updates\n- Proper validation and error handling\n- Responsive design with consistent spacing\n\nThe app automatically loads metrics and orders data on page load, and all operations refresh the data to keep everything in sync.";
 export default _default;
 //# sourceMappingURL=orders-app.d.ts.map

package/dist/ai-service/test-utils/app-generation-mocks/orders-app.js

@@ -11,14 +11,14 @@ export default `BUILDING APPLICATION FROM MOCK RESPONSE: I'll create a comprehen
 
 <boltAction type="file" filePath="pages/Page1/scope.ts">
 import {
-  createSbScope,
+  createScope,
   SbApi,
   SbVariable,
   SbVariablePersistence,
-  sbComputed,
+  computed,
 } from "@superblocksteam/library";
 
-export const Page1Scope = createSbScope<{
+export const Page1Scope = createScope<{
   OrdersTable: any;
   ProductFilterInput: any;
   CreateOrderModal: any;
@@ -64,7 +64,7 @@ export const Page1Scope = createSbScope<{
     deleteOrderApi: SbApi({}),
     
     filteredOrdersVar: SbVariable({
-      defaultValue: sbComputed(() => {
+      defaultValue: computed(() => {
         const orders = getOrdersApi.response || [];
         const filterText = ProductFilterInput.value?.toLowerCase() || '';
         
@@ -87,19 +87,19 @@ export const Page1 = Page1Scope.entities;
 
 <boltAction type="file" filePath="pages/Page1/index.tsx">
 import {
-  SbPage,
+  Page,
   Dim,
-  SbSection,
-  SbColumn,
+  Section,
+  Column,
   registerPage,
-  SbTable,
-  sbComputed,
-  SbContainer,
-  SbInput,
-  SbButton,
-  SbEventFlow,
-  SbModal,
-  SbText,
+  Table,
+  computed,
+  Container,
+  Input,
+  Button,
+  EventFlow,
+  Modal,
+  Text,
   Theme,
 } from "@superblocksteam/library";
 import MetricCard from "components/MetricCard/MetricCard";
@@ -107,7 +107,7 @@ import AppHeader from "components/AppHeader/AppHeader";
 import KeyValue from "components/KeyValue";
 import { Page1, Page1Scope } from "./scope";
 
-function Page() {
+function PageContent() {
   const {
     OrdersTable,
     ProductFilterInput,
@@ -134,14 +134,14 @@ function Page() {
   } = Page1;
 
   return (
-    <SbPage
+    <Page
       name="Page1"
       height={Dim.fill()}
       width={Dim.fill()}
-      onLoad={SbEventFlow.runApis([getMetricsApi, getOrdersApi])}
+      onLoad={EventFlow.runApis([getMetricsApi, getOrdersApi])}
     >
-      <SbSection height={Dim.fill()}>
-        <SbColumn width={Dim.fill()} spacing={Dim.px(0)}>
+      <Section height={Dim.fill()}>
+        <Column width={Dim.fill()} spacing={Dim.px(0)}>
           <AppHeader
             title="Order Management"
             avatarUrl="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face"
@@ -149,7 +149,7 @@ function Page() {
             height={Dim.fit()}
           />
           
-          <SbContainer
+          <Container
             layout="vertical"
             spacing={Dim.px(24)}
             padding={{
@@ -161,54 +161,54 @@ function Page() {
             height={Dim.fill()}
           >
             {/* Metrics Cards */}
-            <SbContainer layout="horizontal" spacing={Dim.px(16)}>
+            <Container layout="horizontal" spacing={Dim.px(16)}>
               <MetricCard
                 title="Total Orders"
-                value={sbComputed(() => getMetricsApi.response?.totalOrders?.toString() || "0")}
+                value={computed(() => getMetricsApi.response?.totalOrders?.toString() || "0")}
                 icon="receipt_long"
                 width={Dim.fill()}
               />
               <MetricCard
                 title="Total Revenue"
-                value={sbComputed(() => \`$\${getMetricsApi.response?.totalRevenue?.toLocaleString() || "0"}\`)}
+                value={computed(() => \`$\${getMetricsApi.response?.totalRevenue?.toLocaleString() || "0"}\`)}
                 icon="attach_money"
                 width={Dim.fill()}
               />
               <MetricCard
                 title="Orders This Month"
-                value={sbComputed(() => getMetricsApi.response?.ordersThisMonth?.toString() || "0")}
+                value={computed(() => getMetricsApi.response?.ordersThisMonth?.toString() || "0")}
                 icon="calendar_today"
                 width={Dim.fill()}
               />
               <MetricCard
                 title="Active Shipments"
-                value={sbComputed(() => getMetricsApi.response?.activeShipments?.toString() || "0")}
+                value={computed(() => getMetricsApi.response?.activeShipments?.toString() || "0")}
                 icon="local_shipping"
                 width={Dim.fill()}
               />
-            </SbContainer>
+            </Container>
 
             {/* Orders Section */}
-            <SbContainer layout="vertical" spacing={Dim.px(16)} variant="card">
-              <SbContainer layout="horizontal" spacing={Dim.px(12)} verticalAlign="bottom">
-                <SbInput
+            <Container layout="vertical" spacing={Dim.px(16)} variant="card">
+              <Container layout="horizontal" spacing={Dim.px(12)} verticalAlign="bottom">
+                <Input
                   bind={ProductFilterInput}
                   label="Filter by Product"
                   placeholder="Search products..."
                   width={Dim.px(300)}
                 />
-                <SbButton
+                <Button
                   bind={CreateOrderButton}
                   label="Create Order"
                   variant="primary"
                   icon="add"
-                  onClick={SbEventFlow.controlModal(CreateOrderModal, "open")}
+                  onClick={EventFlow.controlModal(CreateOrderModal, "open")}
                 />
-              </SbContainer>
+              </Container>
 
-              <SbTable
+              <Table
                 bind={OrdersTable}
-                tableData={sbComputed(() => filteredOrdersVar.value)}
+                tableData={computed(() => filteredOrdersVar.value)}
                 columns={{
                   id: {
                     label: "Order ID",
@@ -237,13 +237,13 @@ function Page() {
                     label: "Actions",
                     columnType: "button",
                     buttonLabel: "View Details",
-                    onClick: SbEventFlow.runJS(() => {
+                    onClick: EventFlow.runJS(() => {
                       getOrderDetailsApi.run();
                       getShippingInfoApi.run();
                     }).controlModal(OrderDetailsModal, "open"),
                   },
                 }}
-                onRowClick={SbEventFlow.runJS(() => {
+                onRowClick={EventFlow.runJS(() => {
                   EditOrderProductInput.text = OrdersTable.selectedRow?.product || "";
                   EditOrderUserEmailInput.text = OrdersTable.selectedRow?.user_email || "";
                   EditOrderPriceInput.text = OrdersTable.selectedRow?.price?.toString() || "";
@@ -251,25 +251,25 @@ function Page() {
                 }).controlModal(EditOrderModal, "open")}
                 height={Dim.px(400)}
               />
-            </SbContainer>
-          </SbContainer>
-        </SbColumn>
-      </SbSection>
+            </Container>
+          </Container>
+        </Column>
+      </Section>
 
       {/* Create Order Modal */}
-      <SbModal bind={CreateOrderModal}>
-        <SbContainer layout="vertical" spacing={Dim.px(24)} width={Dim.fill()}>
-          <SbText text="Create New Order" textStyle={{ variant: "heading3" }} />
+      <Modal bind={CreateOrderModal}>
+        <Container layout="vertical" spacing={Dim.px(24)} width={Dim.fill()}>
+          <Text text="Create New Order" textStyle={{ variant: "heading3" }} />
           
-          <SbContainer layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
-            <SbInput
+          <Container layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
+            <Input
               bind={NewOrderProductInput}
               label="Product Name"
               placeholder="Enter product name"
               width={Dim.fill()}
               isRequired={true}
             />
-            <SbInput
+            <Input
               bind={NewOrderUserEmailInput}
               label="Customer Email"
               placeholder="Enter customer email"
@@ -277,7 +277,7 @@ function Page() {
               width={Dim.fill()}
               isRequired={true}
             />
-            <SbInput
+            <Input
               bind={NewOrderPriceInput}
               label="Price"
               placeholder="Enter price"
@@ -285,29 +285,29 @@ function Page() {
               width={Dim.fill()}
               isRequired={true}
             />
-            <SbInput
+            <Input
               bind={NewOrderImageInput}
               label="Product Image URL"
               placeholder="Enter image URL (optional)"
               width={Dim.fill()}
             />
-          </SbContainer>
+          </Container>
 
-          <SbContainer layout="horizontal" spacing={Dim.px(12)} horizontalAlign="right" width={Dim.fill()}>
-            <SbButton
+          <Container layout="horizontal" spacing={Dim.px(12)} horizontalAlign="right" width={Dim.fill()}>
+            <Button
               label="Cancel"
               variant="secondary"
-              onClick={SbEventFlow.runJS(() => {
+              onClick={EventFlow.runJS(() => {
                 NewOrderProductInput.text = "";
                 NewOrderUserEmailInput.text = "";
                 NewOrderPriceInput.text = "";
                 NewOrderImageInput.text = "";
               }).controlModal(CreateOrderModal, "close")}
             />
-            <SbButton
+            <Button
               label="Create Order"
               variant="primary"
-              onClick={SbEventFlow.runApis([createOrderApi])
+              onClick={EventFlow.runApis([createOrderApi])
                 .runApis([getMetricsApi, getOrdersApi])
                 .runJS(() => {
                   NewOrderProductInput.text = "";
@@ -317,104 +317,104 @@ function Page() {
                 })
                 .controlModal(CreateOrderModal, "close")}
             />
-          </SbContainer>
-        </SbContainer>
-      </SbModal>
+          </Container>
+        </Container>
+      </Modal>
 
       {/* Edit Order Modal */}
-      <SbModal bind={EditOrderModal}>
-        <SbContainer layout="vertical" spacing={Dim.px(24)} width={Dim.fill()}>
-          <SbContainer layout="horizontal" spacing={Dim.px(12)} horizontalAlign="space-between" width={Dim.fill()}>
-            <SbText 
+      <Modal bind={EditOrderModal}>
+        <Container layout="vertical" spacing={Dim.px(24)} width={Dim.fill()}>
+          <Container layout="horizontal" spacing={Dim.px(12)} horizontalAlign="space-between" width={Dim.fill()}>
+            <Text 
               width={Dim.fit()}
-              text={sbComputed(() => \`Edit Order #\${OrdersTable.selectedRow?.id || ""}\`)} 
+              text={computed(() => \`Edit Order #\${OrdersTable.selectedRow?.id || ""}\`)} 
               textStyle={{ variant: "heading3" }} 
             />
-          </SbContainer>
+          </Container>
           
-          <SbContainer layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
-            <SbInput
+          <Container layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
+            <Input
               bind={EditOrderProductInput}
               label="Product Name"
               width={Dim.fill()}
               isRequired={true}
             />
-            <SbInput
+            <Input
               bind={EditOrderUserEmailInput}
               label="Customer Email"
               inputType="EMAIL"
               width={Dim.fill()}
               isRequired={true}
             />
-            <SbInput
+            <Input
               bind={EditOrderPriceInput}
               label="Price"
               inputType="NUMBER"
               width={Dim.fill()}
               isRequired={true}
             />
-            <SbInput
+            <Input
               bind={EditOrderImageInput}
               label="Product Image URL"
               width={Dim.fill()}
             />
-          </SbContainer>
+          </Container>
 
-          <SbContainer layout="horizontal" spacing={Dim.px(12)} horizontalAlign="right" width={Dim.fill()}>
-            <SbButton
+          <Container layout="horizontal" spacing={Dim.px(12)} horizontalAlign="right" width={Dim.fill()}>
+            <Button
               label="Cancel"
               variant="secondary"
-              onClick={SbEventFlow.controlModal(EditOrderModal, "close")}
+              onClick={EventFlow.controlModal(EditOrderModal, "close")}
             />
-            <SbButton
+            <Button
               label="Update Order"
               variant="primary"
-              onClick={SbEventFlow.runApis([updateOrderApi])
+              onClick={EventFlow.runApis([updateOrderApi])
                 .runApis([getMetricsApi, getOrdersApi])
                 .controlModal(EditOrderModal, "close")}
             />
-          </SbContainer>
-        </SbContainer>
-      </SbModal>
+          </Container>
+        </Container>
+      </Modal>
 
       {/* Order Details Modal */}
-      <SbModal bind={OrderDetailsModal}>
-        <SbContainer layout="vertical" spacing={Dim.px(24)} width={Dim.fill()}>
-          <SbText 
-            text={sbComputed(() => \`Order Details #\${OrdersTable.selectedRow?.id || ""}\`)} 
+      <Modal bind={OrderDetailsModal}>
+        <Container layout="vertical" spacing={Dim.px(24)} width={Dim.fill()}>
+          <Text 
+            text={computed(() => \`Order Details #\${OrdersTable.selectedRow?.id || ""}\`)} 
             textStyle={{ variant: "heading3" }} 
           />
           
-          <SbContainer layout="horizontal" spacing={Dim.px(24)} width={Dim.fill()}>
-            <SbContainer layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
+          <Container layout="horizontal" spacing={Dim.px(24)} width={Dim.fill()}>
+            <Container layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
               <KeyValue
                 label="Order Information"
-                data={sbComputed(() => getOrderDetailsApi.response || {})}
+                data={computed(() => getOrderDetailsApi.response || {})}
               />
-            </SbContainer>
+            </Container>
             
-            <SbContainer layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
+            <Container layout="vertical" spacing={Dim.px(16)} width={Dim.fill()}>
               <KeyValue
                 label="Shipping Information"
-                data={sbComputed(() => getShippingInfoApi.response || {})}
+                data={computed(() => getShippingInfoApi.response || {})}
               />
-            </SbContainer>
-          </SbContainer>
+            </Container>
+          </Container>
 
-          <SbContainer layout="horizontal" spacing={Dim.px(12)} horizontalAlign="right" width={Dim.fill()}>
-            <SbButton
+          <Container layout="horizontal" spacing={Dim.px(12)} horizontalAlign="right" width={Dim.fill()}>
+            <Button
               label="Close"
               variant="secondary"
-              onClick={SbEventFlow.controlModal(OrderDetailsModal, "close")}
+              onClick={EventFlow.controlModal(OrderDetailsModal, "close")}
             />
-          </SbContainer>
-        </SbContainer>
-      </SbModal>
-    </SbPage>
+          </Container>
+        </Container>
+      </Modal>
+    </Page>
   );
 }
 
-export default registerPage(Page, Page1Scope);
+export default registerPage(PageContent, Page1Scope);
 </boltAction>
 
 <boltAction type="file" filePath="pages/Page1/apis/getMetricsApi.ts">

package/dist/ai-service/test-utils/app-generation-mocks/smoketest.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "BUILDING APPLICATION FROM MOCK RESPONSE: I'll create an app with an API that returns \"Hello World from API App Generation\" and connect it to a text component.\n\n<boltArtifact id=\"hello-world-api-app\" title=\"Hello World API App\">\n<boltAction type=\"file\" filePath=\"pages/Page1/scope.ts\">\nimport { createSbScope, SbApi } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createSbScope<{\n  HelloText: any;\n}>(\n  () => ({\n    getHelloWorldApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  }\n);\n\nexport const Page1 = Page1Scope.entities;\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/index.tsx\">\nimport {\n  SbPage,\n  Dim,\n  SbSection,\n  SbColumn,\n  SbText,\n  SbButton,\n  SbEventFlow,\n  sbComputed,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction Page() {\n  const { HelloText, getHelloWorldApi } = Page1;\n\n  return (\n    <SbPage \n      name=\"Page1\" \n      height={Dim.fill()} \n      width={Dim.fill()}\n      onLoad={SbEventFlow.runApis([getHelloWorldApi])}\n    >\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()} layout=\"vertical\" spacing={Dim.px(12)}>\n          <SbButton\n            label=\"Fetch Hello World\"\n            onClick={SbEventFlow.runApis([getHelloWorldApi])}\n          />\n          <SbText\n            width={Dim.fit()}\n            height={Dim.fit()}\n            text={sbComputed(() => `${getHelloWorldApi.response || \"\"}`)}\n            bind={HelloText}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page, Page1Scope);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getHelloWorldApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getHelloWorldApi\", [\n  new JavaScript(\"returnHelloWorld\", {\n    fn: () => {\n      return \"Hello World from API App Generation\";\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"routes.json\">\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n</boltAction>\n</boltArtifact>\n\nThe app is now set up with:\n\n1. **API**: `getHelloWorldApi` that returns the string \"Hello World from API App Generation\"\n2. **Text**: Connected to display the API response value\n3. **Button**: To manually trigger the API call\n4. **Auto-load**: The API runs automatically when the page loads\n\nThe text will show the API response, and you can click the button to refresh the data from the API.";
+declare const _default: "BUILDING APPLICATION FROM MOCK RESPONSE: I'll create an app with an API that returns \"Hello World from API App Generation\" and connect it to a text component.\n\n<boltArtifact id=\"hello-world-api-app\" title=\"Hello World API App\">\n<boltAction type=\"file\" filePath=\"pages/Page1/scope.ts\">\nimport { createScope, SbApi } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  HelloText: any;\n}>(\n  () => ({\n    getHelloWorldApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  }\n);\n\nexport const Page1 = Page1Scope.entities;\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/index.tsx\">\nimport {\n  Page,\n  Dim,\n  Section,\n  Column,\n  Text,\n  Button,\n  EventFlow,\n  computed,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nfunction PageContent() {\n  const { HelloText, getHelloWorldApi } = Page1;\n\n  return (\n    <Page \n      name=\"Page1\" \n      height={Dim.fill()} \n      width={Dim.fill()}\n      onLoad={EventFlow.runApis([getHelloWorldApi])}\n    >\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()} layout=\"vertical\" spacing={Dim.px(12)}>\n          <Button\n            label=\"Fetch Hello World\"\n            onClick={EventFlow.runApis([getHelloWorldApi])}\n          />\n          <Text\n            width={Dim.fit()}\n            height={Dim.fit()}\n            text={computed(() => `${getHelloWorldApi.response || \"\"}`)}\n            bind={HelloText}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n}\n\nexport default registerPage(PageContent, Page1Scope);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"pages/Page1/apis/getHelloWorldApi.ts\">\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getHelloWorldApi\", [\n  new JavaScript(\"returnHelloWorld\", {\n    fn: () => {\n      return \"Hello World from API App Generation\";\n    },\n  }),\n]);\n</boltAction>\n\n<boltAction type=\"file\" filePath=\"routes.json\">\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n</boltAction>\n</boltArtifact>\n\nThe app is now set up with:\n\n1. **API**: `getHelloWorldApi` that returns the string \"Hello World from API App Generation\"\n2. **Text**: Connected to display the API response value\n3. **Button**: To manually trigger the API call\n4. **Auto-load**: The API runs automatically when the page loads\n\nThe text will show the API response, and you can click the button to refresh the data from the API.";
 export default _default;
 //# sourceMappingURL=smoketest.d.ts.map