@superblocksteam/vite-plugin-file-sync 2.0.18-next.2 → 2.0.18-next.21

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "## Text\n\nThe following is the type definition for the Text component.\n\n```typescript\ninterface TextProps {\n  text?: string;\n  /** @default \"text\" */\n  textType?: \"text\" | \"number\" | \"currency\" | \"date\";\n  /** @default {\"variant\":\"label\"} */\n  textStyle?: TextStyleWithVariant;\n  /** @default \"left\" */\n  horizontalAlign?: \"left\" | \"center\" | \"right\";\n  /** @default \"center\" */\n  verticalAlign?: \"top\" | \"center\" | \"bottom\";\n  /** @default true */\n  wrapText?: boolean;\n  loading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default \"left\" */\n  iconPosition?: \"left\" | \"right\";\n  textType?: string;\n  /** @default \"USD\" */\n  currency?: \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BTN\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHE\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MKD\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VED\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\";\n  /** @default \"standard\" */\n  numberFormat?: \"unformatted\" | \"standard\" | \"compact\" | \"scientific\" | \"engineering\";\n  minDecimals?: number;\n  maxDecimals?: number;\n  dateInputFormat?: \"undefined\" | \"X\" | \"x\" | \"MM-DD-YYYY\" | \"MM-DD-YYYY HH:mm\" | \"MM-DD-YYYY HH:mm:ss\" | \"MM-DD-YYYY hh:mm:ss a\" | \"MM-DD-YYYYTHH:mm:ss.sssZ\" | \"YYYY-MM-DD\" | \"YYYY-MM-DD HH:mm\" | \"YYYY-MM-DD HH:mm:ss\" | \"YYYY-MM-DD HH:mm:ssZ\" | \"YYYY-MM-DDTHH:mm:ss.sssZ\" | \"YYYY-MM-DD hh:mm:ss a\" | \"YYYY-MM-DDTHH:mm:ss\" | \"DD-MM-YYYY\" | \"DD-MM-YYYY HH:mm\" | \"DD-MM-YYYY HH:mm:ss\" | \"DD-MM-YYYY hh:mm:ss a\" | \"DD-MM-YYYYTHH:mm:ss.sssZ\" | \"Do MMM YYYY\" | \"MM/DD/YYYY\" | \"MM/DD/YYYY HH:mm\" | \"MM/DD/YYYY HH:mm:ss\" | \"MM/DD/YYYY hh:mm:ss a\" | \"MM/DD/YYYYTHH:mm:ss.sssZ\" | \"YYYY/MM/DD\" | \"YYYY/MM/DD HH:mm\" | \"YYYY/MM/DD HH:mm:ss\" | \"YYYY/MM/DD hh:mm:ss a\" | \"YYYY/MM/DDTHH:mm:ss\" | \"DD/MM/YYYY\" | \"DD/MM/YYYY HH:mm\" | \"DD/MM/YYYY HH:mm:ss\" | \"DD/MM/YYYY hh:mm:ss a\" | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  dateOutputFormat?: \"X\" | \"x\" | \"MM-DD-YYYY\" | \"MM-DD-YYYY HH:mm\" | \"MM-DD-YYYY HH:mm:ss\" | \"MM-DD-YYYY hh:mm:ss a\" | \"MM-DD-YYYYTHH:mm:ss.sssZ\" | \"YYYY-MM-DD\" | \"YYYY-MM-DD HH:mm\" | \"YYYY-MM-DD HH:mm:ss\" | \"YYYY-MM-DD HH:mm:ssZ\" | \"YYYY-MM-DDTHH:mm:ss.sssZ\" | \"YYYY-MM-DD hh:mm:ss a\" | \"YYYY-MM-DDTHH:mm:ss\" | \"DD-MM-YYYY\" | \"DD-MM-YYYY HH:mm\" | \"DD-MM-YYYY HH:mm:ss\" | \"DD-MM-YYYY hh:mm:ss a\" | \"DD-MM-YYYYTHH:mm:ss.sssZ\" | \"Do MMM YYYY\" | \"MM/DD/YYYY\" | \"MM/DD/YYYY HH:mm\" | \"MM/DD/YYYY HH:mm:ss\" | \"MM/DD/YYYY hh:mm:ss a\" | \"MM/DD/YYYYTHH:mm:ss.sssZ\" | \"YYYY/MM/DD\" | \"YYYY/MM/DD HH:mm\" | \"YYYY/MM/DD HH:mm:ss\" | \"YYYY/MM/DD hh:mm:ss a\" | \"YYYY/MM/DDTHH:mm:ss\" | \"DD/MM/YYYY\" | \"DD/MM/YYYY HH:mm\" | \"DD/MM/YYYY HH:mm:ss\" | \"DD/MM/YYYY hh:mm:ss a\" | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n";
+export declare const content = "## Text\n\nThe following is the type definition for the Text component.\n\n```typescript\ninterface TextProps {\n  text?: string;\n  /** @default \"text\" */\n  textType?: \"text\" | \"number\" | \"currency\" | \"date\";\n  /** @default {\"variant\":\"label\"} */\n  textStyle?: TextStyleWithVariant;\n  /** @default \"left\" */\n  horizontalAlign?: \"left\" | \"center\" | \"right\";\n  /** @default \"center\" */\n  verticalAlign?: \"top\" | \"center\" | \"bottom\";\n  /** @default true */\n  wrapText?: boolean;\n  loading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default \"left\" */\n  iconPosition?: \"left\" | \"right\";\n  textType?: string;\n  /** @default \"USD\" */\n  currency?:\n    | \"AED\"\n    | \"AFN\"\n    | \"ALL\"\n    | \"AMD\"\n    | \"ANG\"\n    | \"AOA\"\n    | \"ARS\"\n    | \"AUD\"\n    | \"AWG\"\n    | \"AZN\"\n    | \"BAM\"\n    | \"BBD\"\n    | \"BDT\"\n    | \"BGN\"\n    | \"BHD\"\n    | \"BIF\"\n    | \"BMD\"\n    | \"BND\"\n    | \"BOB\"\n    | \"BOV\"\n    | \"BRL\"\n    | \"BSD\"\n    | \"BTN\"\n    | \"BWP\"\n    | \"BYN\"\n    | \"BZD\"\n    | \"CAD\"\n    | \"CDF\"\n    | \"CHE\"\n    | \"CHF\"\n    | \"CHW\"\n    | \"CLF\"\n    | \"CLP\"\n    | \"CNY\"\n    | \"COP\"\n    | \"COU\"\n    | \"CRC\"\n    | \"CUC\"\n    | \"CUP\"\n    | \"CVE\"\n    | \"CZK\"\n    | \"DJF\"\n    | \"DKK\"\n    | \"DOP\"\n    | \"DZD\"\n    | \"EGP\"\n    | \"ERN\"\n    | \"ETB\"\n    | \"EUR\"\n    | \"FJD\"\n    | \"FKP\"\n    | \"GBP\"\n    | \"GEL\"\n    | \"GHS\"\n    | \"GIP\"\n    | \"GMD\"\n    | \"GNF\"\n    | \"GTQ\"\n    | \"GYD\"\n    | \"HKD\"\n    | \"HNL\"\n    | \"HRK\"\n    | \"HTG\"\n    | \"HUF\"\n    | \"IDR\"\n    | \"ILS\"\n    | \"INR\"\n    | \"IQD\"\n    | \"IRR\"\n    | \"ISK\"\n    | \"JMD\"\n    | \"JOD\"\n    | \"JPY\"\n    | \"KES\"\n    | \"KGS\"\n    | \"KHR\"\n    | \"KMF\"\n    | \"KPW\"\n    | \"KRW\"\n    | \"KWD\"\n    | \"KYD\"\n    | \"KZT\"\n    | \"LAK\"\n    | \"LBP\"\n    | \"LKR\"\n    | \"LRD\"\n    | \"LSL\"\n    | \"LYD\"\n    | \"MAD\"\n    | \"MDL\"\n    | \"MGA\"\n    | \"MKD\"\n    | \"MMK\"\n    | \"MNT\"\n    | \"MOP\"\n    | \"MRU\"\n    | \"MUR\"\n    | \"MVR\"\n    | \"MWK\"\n    | \"MXN\"\n    | \"MXV\"\n    | \"MYR\"\n    | \"MZN\"\n    | \"NAD\"\n    | \"NGN\"\n    | \"NIO\"\n    | \"NOK\"\n    | \"NPR\"\n    | \"NZD\"\n    | \"OMR\"\n    | \"PAB\"\n    | \"PEN\"\n    | \"PGK\"\n    | \"PHP\"\n    | \"PKR\"\n    | \"PLN\"\n    | \"PYG\"\n    | \"QAR\"\n    | \"RON\"\n    | \"RSD\"\n    | \"RUB\"\n    | \"RWF\"\n    | \"SAR\"\n    | \"SBD\"\n    | \"SCR\"\n    | \"SDG\"\n    | \"SEK\"\n    | \"SGD\"\n    | \"SHP\"\n    | \"SLL\"\n    | \"SOS\"\n    | \"SRD\"\n    | \"SSP\"\n    | \"STN\"\n    | \"SVC\"\n    | \"SYP\"\n    | \"SZL\"\n    | \"THB\"\n    | \"TJS\"\n    | \"TMT\"\n    | \"TND\"\n    | \"TOP\"\n    | \"TRY\"\n    | \"TTD\"\n    | \"TWD\"\n    | \"TZS\"\n    | \"UAH\"\n    | \"UGX\"\n    | \"USD\"\n    | \"USN\"\n    | \"UYI\"\n    | \"UYU\"\n    | \"UYW\"\n    | \"UZS\"\n    | \"VED\"\n    | \"VES\"\n    | \"VND\"\n    | \"VUV\"\n    | \"WST\"\n    | \"XAF\"\n    | \"XAG\"\n    | \"XAU\"\n    | \"XBA\"\n    | \"XBB\"\n    | \"XBC\"\n    | \"XBD\"\n    | \"XCD\"\n    | \"XDR\"\n    | \"XOF\"\n    | \"XPD\"\n    | \"XPF\"\n    | \"XPT\"\n    | \"XSU\"\n    | \"XTS\"\n    | \"XUA\"\n    | \"XXX\"\n    | \"YER\"\n    | \"ZAR\"\n    | \"ZMW\"\n    | \"ZWL\";\n  /** @default \"standard\" */\n  numberFormat?:\n    | \"unformatted\"\n    | \"standard\"\n    | \"compact\"\n    | \"scientific\"\n    | \"engineering\";\n  minDecimals?: number;\n  maxDecimals?: number;\n  dateInputFormat?:\n    | \"undefined\"\n    | \"X\"\n    | \"x\"\n    | \"MM-DD-YYYY\"\n    | \"MM-DD-YYYY HH:mm\"\n    | \"MM-DD-YYYY HH:mm:ss\"\n    | \"MM-DD-YYYY hh:mm:ss a\"\n    | \"MM-DD-YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD\"\n    | \"YYYY-MM-DD HH:mm\"\n    | \"YYYY-MM-DD HH:mm:ss\"\n    | \"YYYY-MM-DD HH:mm:ssZ\"\n    | \"YYYY-MM-DDTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD hh:mm:ss a\"\n    | \"YYYY-MM-DDTHH:mm:ss\"\n    | \"DD-MM-YYYY\"\n    | \"DD-MM-YYYY HH:mm\"\n    | \"DD-MM-YYYY HH:mm:ss\"\n    | \"DD-MM-YYYY hh:mm:ss a\"\n    | \"DD-MM-YYYYTHH:mm:ss.sssZ\"\n    | \"Do MMM YYYY\"\n    | \"MM/DD/YYYY\"\n    | \"MM/DD/YYYY HH:mm\"\n    | \"MM/DD/YYYY HH:mm:ss\"\n    | \"MM/DD/YYYY hh:mm:ss a\"\n    | \"MM/DD/YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY/MM/DD\"\n    | \"YYYY/MM/DD HH:mm\"\n    | \"YYYY/MM/DD HH:mm:ss\"\n    | \"YYYY/MM/DD hh:mm:ss a\"\n    | \"YYYY/MM/DDTHH:mm:ss\"\n    | \"DD/MM/YYYY\"\n    | \"DD/MM/YYYY HH:mm\"\n    | \"DD/MM/YYYY HH:mm:ss\"\n    | \"DD/MM/YYYY hh:mm:ss a\"\n    | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  dateOutputFormat?:\n    | \"X\"\n    | \"x\"\n    | \"MM-DD-YYYY\"\n    | \"MM-DD-YYYY HH:mm\"\n    | \"MM-DD-YYYY HH:mm:ss\"\n    | \"MM-DD-YYYY hh:mm:ss a\"\n    | \"MM-DD-YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD\"\n    | \"YYYY-MM-DD HH:mm\"\n    | \"YYYY-MM-DD HH:mm:ss\"\n    | \"YYYY-MM-DD HH:mm:ssZ\"\n    | \"YYYY-MM-DDTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD hh:mm:ss a\"\n    | \"YYYY-MM-DDTHH:mm:ss\"\n    | \"DD-MM-YYYY\"\n    | \"DD-MM-YYYY HH:mm\"\n    | \"DD-MM-YYYY HH:mm:ss\"\n    | \"DD-MM-YYYY hh:mm:ss a\"\n    | \"DD-MM-YYYYTHH:mm:ss.sssZ\"\n    | \"Do MMM YYYY\"\n    | \"MM/DD/YYYY\"\n    | \"MM/DD/YYYY HH:mm\"\n    | \"MM/DD/YYYY HH:mm:ss\"\n    | \"MM/DD/YYYY hh:mm:ss a\"\n    | \"MM/DD/YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY/MM/DD\"\n    | \"YYYY/MM/DD HH:mm\"\n    | \"YYYY/MM/DD HH:mm:ss\"\n    | \"YYYY/MM/DD hh:mm:ss a\"\n    | \"YYYY/MM/DDTHH:mm:ss\"\n    | \"DD/MM/YYYY\"\n    | \"DD/MM/YYYY HH:mm\"\n    | \"DD/MM/YYYY HH:mm:ss\"\n    | \"DD/MM/YYYY hh:mm:ss a\"\n    | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n";
 //# sourceMappingURL=TextPropsDocs.d.ts.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextPropsDocs.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,wvJAAwvJ,CAAC"}
+{"version":3,"file":"TextPropsDocs.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,ggMAAggM,CAAC"}

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from TextPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-07-22T15:36:24.214Z
-export const content = "## Text\n\nThe following is the type definition for the Text component.\n\n```typescript\ninterface TextProps {\n  text?: string;\n  /** @default \"text\" */\n  textType?: \"text\" | \"number\" | \"currency\" | \"date\";\n  /** @default {\"variant\":\"label\"} */\n  textStyle?: TextStyleWithVariant;\n  /** @default \"left\" */\n  horizontalAlign?: \"left\" | \"center\" | \"right\";\n  /** @default \"center\" */\n  verticalAlign?: \"top\" | \"center\" | \"bottom\";\n  /** @default true */\n  wrapText?: boolean;\n  loading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default \"left\" */\n  iconPosition?: \"left\" | \"right\";\n  textType?: string;\n  /** @default \"USD\" */\n  currency?: \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BTN\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHE\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MKD\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VED\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\";\n  /** @default \"standard\" */\n  numberFormat?: \"unformatted\" | \"standard\" | \"compact\" | \"scientific\" | \"engineering\";\n  minDecimals?: number;\n  maxDecimals?: number;\n  dateInputFormat?: \"undefined\" | \"X\" | \"x\" | \"MM-DD-YYYY\" | \"MM-DD-YYYY HH:mm\" | \"MM-DD-YYYY HH:mm:ss\" | \"MM-DD-YYYY hh:mm:ss a\" | \"MM-DD-YYYYTHH:mm:ss.sssZ\" | \"YYYY-MM-DD\" | \"YYYY-MM-DD HH:mm\" | \"YYYY-MM-DD HH:mm:ss\" | \"YYYY-MM-DD HH:mm:ssZ\" | \"YYYY-MM-DDTHH:mm:ss.sssZ\" | \"YYYY-MM-DD hh:mm:ss a\" | \"YYYY-MM-DDTHH:mm:ss\" | \"DD-MM-YYYY\" | \"DD-MM-YYYY HH:mm\" | \"DD-MM-YYYY HH:mm:ss\" | \"DD-MM-YYYY hh:mm:ss a\" | \"DD-MM-YYYYTHH:mm:ss.sssZ\" | \"Do MMM YYYY\" | \"MM/DD/YYYY\" | \"MM/DD/YYYY HH:mm\" | \"MM/DD/YYYY HH:mm:ss\" | \"MM/DD/YYYY hh:mm:ss a\" | \"MM/DD/YYYYTHH:mm:ss.sssZ\" | \"YYYY/MM/DD\" | \"YYYY/MM/DD HH:mm\" | \"YYYY/MM/DD HH:mm:ss\" | \"YYYY/MM/DD hh:mm:ss a\" | \"YYYY/MM/DDTHH:mm:ss\" | \"DD/MM/YYYY\" | \"DD/MM/YYYY HH:mm\" | \"DD/MM/YYYY HH:mm:ss\" | \"DD/MM/YYYY hh:mm:ss a\" | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  dateOutputFormat?: \"X\" | \"x\" | \"MM-DD-YYYY\" | \"MM-DD-YYYY HH:mm\" | \"MM-DD-YYYY HH:mm:ss\" | \"MM-DD-YYYY hh:mm:ss a\" | \"MM-DD-YYYYTHH:mm:ss.sssZ\" | \"YYYY-MM-DD\" | \"YYYY-MM-DD HH:mm\" | \"YYYY-MM-DD HH:mm:ss\" | \"YYYY-MM-DD HH:mm:ssZ\" | \"YYYY-MM-DDTHH:mm:ss.sssZ\" | \"YYYY-MM-DD hh:mm:ss a\" | \"YYYY-MM-DDTHH:mm:ss\" | \"DD-MM-YYYY\" | \"DD-MM-YYYY HH:mm\" | \"DD-MM-YYYY HH:mm:ss\" | \"DD-MM-YYYY hh:mm:ss a\" | \"DD-MM-YYYYTHH:mm:ss.sssZ\" | \"Do MMM YYYY\" | \"MM/DD/YYYY\" | \"MM/DD/YYYY HH:mm\" | \"MM/DD/YYYY HH:mm:ss\" | \"MM/DD/YYYY hh:mm:ss a\" | \"MM/DD/YYYYTHH:mm:ss.sssZ\" | \"YYYY/MM/DD\" | \"YYYY/MM/DD HH:mm\" | \"YYYY/MM/DD HH:mm:ss\" | \"YYYY/MM/DD hh:mm:ss a\" | \"YYYY/MM/DDTHH:mm:ss\" | \"DD/MM/YYYY\" | \"DD/MM/YYYY HH:mm\" | \"DD/MM/YYYY HH:mm:ss\" | \"DD/MM/YYYY hh:mm:ss a\" | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n";
+// Generated at: 2025-07-23T19:45:15.239Z
+export const content = "## Text\n\nThe following is the type definition for the Text component.\n\n```typescript\ninterface TextProps {\n  text?: string;\n  /** @default \"text\" */\n  textType?: \"text\" | \"number\" | \"currency\" | \"date\";\n  /** @default {\"variant\":\"label\"} */\n  textStyle?: TextStyleWithVariant;\n  /** @default \"left\" */\n  horizontalAlign?: \"left\" | \"center\" | \"right\";\n  /** @default \"center\" */\n  verticalAlign?: \"top\" | \"center\" | \"bottom\";\n  /** @default true */\n  wrapText?: boolean;\n  loading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default \"left\" */\n  iconPosition?: \"left\" | \"right\";\n  textType?: string;\n  /** @default \"USD\" */\n  currency?:\n    | \"AED\"\n    | \"AFN\"\n    | \"ALL\"\n    | \"AMD\"\n    | \"ANG\"\n    | \"AOA\"\n    | \"ARS\"\n    | \"AUD\"\n    | \"AWG\"\n    | \"AZN\"\n    | \"BAM\"\n    | \"BBD\"\n    | \"BDT\"\n    | \"BGN\"\n    | \"BHD\"\n    | \"BIF\"\n    | \"BMD\"\n    | \"BND\"\n    | \"BOB\"\n    | \"BOV\"\n    | \"BRL\"\n    | \"BSD\"\n    | \"BTN\"\n    | \"BWP\"\n    | \"BYN\"\n    | \"BZD\"\n    | \"CAD\"\n    | \"CDF\"\n    | \"CHE\"\n    | \"CHF\"\n    | \"CHW\"\n    | \"CLF\"\n    | \"CLP\"\n    | \"CNY\"\n    | \"COP\"\n    | \"COU\"\n    | \"CRC\"\n    | \"CUC\"\n    | \"CUP\"\n    | \"CVE\"\n    | \"CZK\"\n    | \"DJF\"\n    | \"DKK\"\n    | \"DOP\"\n    | \"DZD\"\n    | \"EGP\"\n    | \"ERN\"\n    | \"ETB\"\n    | \"EUR\"\n    | \"FJD\"\n    | \"FKP\"\n    | \"GBP\"\n    | \"GEL\"\n    | \"GHS\"\n    | \"GIP\"\n    | \"GMD\"\n    | \"GNF\"\n    | \"GTQ\"\n    | \"GYD\"\n    | \"HKD\"\n    | \"HNL\"\n    | \"HRK\"\n    | \"HTG\"\n    | \"HUF\"\n    | \"IDR\"\n    | \"ILS\"\n    | \"INR\"\n    | \"IQD\"\n    | \"IRR\"\n    | \"ISK\"\n    | \"JMD\"\n    | \"JOD\"\n    | \"JPY\"\n    | \"KES\"\n    | \"KGS\"\n    | \"KHR\"\n    | \"KMF\"\n    | \"KPW\"\n    | \"KRW\"\n    | \"KWD\"\n    | \"KYD\"\n    | \"KZT\"\n    | \"LAK\"\n    | \"LBP\"\n    | \"LKR\"\n    | \"LRD\"\n    | \"LSL\"\n    | \"LYD\"\n    | \"MAD\"\n    | \"MDL\"\n    | \"MGA\"\n    | \"MKD\"\n    | \"MMK\"\n    | \"MNT\"\n    | \"MOP\"\n    | \"MRU\"\n    | \"MUR\"\n    | \"MVR\"\n    | \"MWK\"\n    | \"MXN\"\n    | \"MXV\"\n    | \"MYR\"\n    | \"MZN\"\n    | \"NAD\"\n    | \"NGN\"\n    | \"NIO\"\n    | \"NOK\"\n    | \"NPR\"\n    | \"NZD\"\n    | \"OMR\"\n    | \"PAB\"\n    | \"PEN\"\n    | \"PGK\"\n    | \"PHP\"\n    | \"PKR\"\n    | \"PLN\"\n    | \"PYG\"\n    | \"QAR\"\n    | \"RON\"\n    | \"RSD\"\n    | \"RUB\"\n    | \"RWF\"\n    | \"SAR\"\n    | \"SBD\"\n    | \"SCR\"\n    | \"SDG\"\n    | \"SEK\"\n    | \"SGD\"\n    | \"SHP\"\n    | \"SLL\"\n    | \"SOS\"\n    | \"SRD\"\n    | \"SSP\"\n    | \"STN\"\n    | \"SVC\"\n    | \"SYP\"\n    | \"SZL\"\n    | \"THB\"\n    | \"TJS\"\n    | \"TMT\"\n    | \"TND\"\n    | \"TOP\"\n    | \"TRY\"\n    | \"TTD\"\n    | \"TWD\"\n    | \"TZS\"\n    | \"UAH\"\n    | \"UGX\"\n    | \"USD\"\n    | \"USN\"\n    | \"UYI\"\n    | \"UYU\"\n    | \"UYW\"\n    | \"UZS\"\n    | \"VED\"\n    | \"VES\"\n    | \"VND\"\n    | \"VUV\"\n    | \"WST\"\n    | \"XAF\"\n    | \"XAG\"\n    | \"XAU\"\n    | \"XBA\"\n    | \"XBB\"\n    | \"XBC\"\n    | \"XBD\"\n    | \"XCD\"\n    | \"XDR\"\n    | \"XOF\"\n    | \"XPD\"\n    | \"XPF\"\n    | \"XPT\"\n    | \"XSU\"\n    | \"XTS\"\n    | \"XUA\"\n    | \"XXX\"\n    | \"YER\"\n    | \"ZAR\"\n    | \"ZMW\"\n    | \"ZWL\";\n  /** @default \"standard\" */\n  numberFormat?:\n    | \"unformatted\"\n    | \"standard\"\n    | \"compact\"\n    | \"scientific\"\n    | \"engineering\";\n  minDecimals?: number;\n  maxDecimals?: number;\n  dateInputFormat?:\n    | \"undefined\"\n    | \"X\"\n    | \"x\"\n    | \"MM-DD-YYYY\"\n    | \"MM-DD-YYYY HH:mm\"\n    | \"MM-DD-YYYY HH:mm:ss\"\n    | \"MM-DD-YYYY hh:mm:ss a\"\n    | \"MM-DD-YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD\"\n    | \"YYYY-MM-DD HH:mm\"\n    | \"YYYY-MM-DD HH:mm:ss\"\n    | \"YYYY-MM-DD HH:mm:ssZ\"\n    | \"YYYY-MM-DDTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD hh:mm:ss a\"\n    | \"YYYY-MM-DDTHH:mm:ss\"\n    | \"DD-MM-YYYY\"\n    | \"DD-MM-YYYY HH:mm\"\n    | \"DD-MM-YYYY HH:mm:ss\"\n    | \"DD-MM-YYYY hh:mm:ss a\"\n    | \"DD-MM-YYYYTHH:mm:ss.sssZ\"\n    | \"Do MMM YYYY\"\n    | \"MM/DD/YYYY\"\n    | \"MM/DD/YYYY HH:mm\"\n    | \"MM/DD/YYYY HH:mm:ss\"\n    | \"MM/DD/YYYY hh:mm:ss a\"\n    | \"MM/DD/YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY/MM/DD\"\n    | \"YYYY/MM/DD HH:mm\"\n    | \"YYYY/MM/DD HH:mm:ss\"\n    | \"YYYY/MM/DD hh:mm:ss a\"\n    | \"YYYY/MM/DDTHH:mm:ss\"\n    | \"DD/MM/YYYY\"\n    | \"DD/MM/YYYY HH:mm\"\n    | \"DD/MM/YYYY HH:mm:ss\"\n    | \"DD/MM/YYYY hh:mm:ss a\"\n    | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  dateOutputFormat?:\n    | \"X\"\n    | \"x\"\n    | \"MM-DD-YYYY\"\n    | \"MM-DD-YYYY HH:mm\"\n    | \"MM-DD-YYYY HH:mm:ss\"\n    | \"MM-DD-YYYY hh:mm:ss a\"\n    | \"MM-DD-YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD\"\n    | \"YYYY-MM-DD HH:mm\"\n    | \"YYYY-MM-DD HH:mm:ss\"\n    | \"YYYY-MM-DD HH:mm:ssZ\"\n    | \"YYYY-MM-DDTHH:mm:ss.sssZ\"\n    | \"YYYY-MM-DD hh:mm:ss a\"\n    | \"YYYY-MM-DDTHH:mm:ss\"\n    | \"DD-MM-YYYY\"\n    | \"DD-MM-YYYY HH:mm\"\n    | \"DD-MM-YYYY HH:mm:ss\"\n    | \"DD-MM-YYYY hh:mm:ss a\"\n    | \"DD-MM-YYYYTHH:mm:ss.sssZ\"\n    | \"Do MMM YYYY\"\n    | \"MM/DD/YYYY\"\n    | \"MM/DD/YYYY HH:mm\"\n    | \"MM/DD/YYYY HH:mm:ss\"\n    | \"MM/DD/YYYY hh:mm:ss a\"\n    | \"MM/DD/YYYYTHH:mm:ss.sssZ\"\n    | \"YYYY/MM/DD\"\n    | \"YYYY/MM/DD HH:mm\"\n    | \"YYYY/MM/DD HH:mm:ss\"\n    | \"YYYY/MM/DD hh:mm:ss a\"\n    | \"YYYY/MM/DDTHH:mm:ss\"\n    | \"DD/MM/YYYY\"\n    | \"DD/MM/YYYY HH:mm\"\n    | \"DD/MM/YYYY HH:mm:ss\"\n    | \"DD/MM/YYYY hh:mm:ss a\"\n    | \"DD/MM/YYYYTHH:mm:ss.sssZ\";\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n";
 //# sourceMappingURL=TextPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextPropsDocs.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,uCAAuC;AACvC,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,qvJAAqvJ,CAAC"}
+{"version":3,"file":"TextPropsDocs.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompt-builder-service/static-fragments/library-components/TextPropsDocs.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,uCAAuC;AACvC,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,6/LAA6/L,CAAC"}

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from Dim.md
 // Do not edit this file directly
-// Generated at: 2025-07-22T15:36:24.222Z
+// Generated at: 2025-07-23T19:45:15.247Z
 export const content = "## Dim\n\nThe `Dim` class is used to define dimensions for size properties in Superblocks (especially width and height). It has three main modes: `px`, `fit`, and `fill`.\n\n```typescript\nclass Dim {\n  mode: \"px\" | \"fit\" | \"fill\";\n  value?: number;\n}\n```\n";
 //# sourceMappingURL=Dim.js.map

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from EventFlow.md
 // Do not edit this file directly
-// Generated at: 2025-07-22T15:36:24.221Z
+// Generated at: 2025-07-23T19:45:15.247Z
 export const content = "## EventFlow\n\nThe `EventFlow` class is used to define responses to events triggered on components (like onClick) in Superblocks. It has a number of methods that can be chained together.\n\n```typescript\nclass EventFlow {\n  // Run custom JavaScript code\n  static runJS(handler: () => void): EventFlow;\n  runJS(handler: () => void): this;\n\n  // Navigation methods\n  static navigateTo(\n    url: string,\n    opts?: {\n      newWindow?: boolean;\n      replaceHistory?: boolean;\n      arguments?: string;\n    },\n  ): EventFlow;\n  navigateTo(\n    url: string,\n    opts?: {\n      newWindow?: boolean;\n      replaceHistory?: boolean;\n      arguments?: string;\n    },\n  ): this;\n\n  static navigateToApp(appId: string): EventFlow;\n  navigateToApp(appId: string): this;\n\n  static navigateToRoute(route: string): EventFlow;\n  navigateToRoute(route: string): this;\n\n  static setQueryParams(\n    params: Record<string, string>,\n    opts?: {\n      keep?: boolean;\n    },\n  ): EventFlow;\n  setQueryParams(\n    params: Record<string, string>,\n    opts?: {\n      keep?: boolean;\n    },\n  ): this;\n\n  // Control whether modals are opened or closed\n  // Pass the bound modal component directly rather than its id\n  static controlModal(\n    modal: WithBindingIdentifier,\n    opts: { action: \"open\" | \"close\" },\n  ): EventFlow;\n  controlModal(\n    modal: WithBindingIdentifier,\n    opts: { action: \"open\" | \"close\" },\n  ): this;\n\n  static controlSlideout(\n    slideout: WithBindingIdentifier,\n    opts: { action: \"open\" | \"close\" },\n  ): EventFlow;\n  controlSlideout(\n    slideout: WithBindingIdentifier,\n    opts: { action: \"open\" | \"close\" },\n  ): this;\n\n  static controlTimer(\n    stateTimer: WithBindingIdentifier,\n    opts: {\n      action: \"start\" | \"stop\" | \"toggle\";\n    },\n  ): EventFlow;\n  controlTimer(\n    stateTimer: WithBindingIdentifier,\n    opts: {\n      action: \"start\" | \"stop\" | \"toggle\";\n    },\n  ): this;\n\n  // API methods\n  static runApis(\n    apis: SbApi[],\n    opts?: {\n      onSuccess?: EventFlow;\n      onError?: EventFlow;\n    },\n  ): EventFlow;\n  runApis(\n    apis: SbApi[],\n    opts?: {\n      onSuccess?: EventFlow;\n      onError?: EventFlow;\n    },\n  ): this;\n\n  static cancelApis(apiNames: string[], onCancel?: EventFlow): EventFlow;\n  cancelApis(apiNames: string[], onCancel?: EventFlow): this;\n\n  // Component and state manipulation\n  static resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): EventFlow;\n  resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): this;\n\n  static resetStateVar(stateVar: StateVar): EventFlow;\n  resetStateVar(stateVar: StateVar): this;\n\n  static setStateVar(\n    stateVar: StateVar,\n    opts: {\n      value: any;\n    },\n  ): EventFlow;\n  setStateVar(\n    stateVar: StateVar,\n    opts: {\n      value: any;\n    },\n  ): this;\n\n  static setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): EventFlow;\n  setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): this;\n\n  // Utility methods\n  static showAlert(\n    message: string,\n    opts?: {\n      type?: \"info\" | \"success\" | \"warning\" | \"error\";\n      durationMs?: number;\n      position?: \"top\" | \"bottom\" | \"center\";\n    },\n  ): EventFlow;\n  showAlert(\n    message: string,\n    opts?: {\n      type?: \"info\" | \"success\" | \"warning\" | \"error\";\n      durationMs?: number;\n      position?: \"top\" | \"bottom\" | \"center\";\n    },\n  ): this;\n\n  static setProfile(\n    profileId: string,\n    opts: {\n      action: \"set\" | \"unset\";\n    },\n  ): EventFlow;\n  setProfile(\n    profileId: string,\n    opts: {\n      action: \"set\" | \"unset\";\n    },\n  ): this;\n\n  static triggerEvent(\n    eventName: string,\n    opts?: {\n      data: Record<string, string>;\n    },\n  ): EventFlow;\n  triggerEvent(\n    eventName: string,\n    opts?: {\n      data: Record<string, string>;\n    },\n  ): this;\n}\n```\n";
 //# sourceMappingURL=EventFlow.js.map

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from TextStyleWithVariant.md
 // Do not edit this file directly
-// Generated at: 2025-07-22T15:36:24.221Z
+// Generated at: 2025-07-23T19:45:15.246Z
 export const content = "## TextStyleWithVariant\n\nThe `TextStyleWithVariant` type is used to define the text styling values. Usually a variant is chosen which comes with pre-defined styling that you can see the details of in the Theme object, but also the naming is semantic. You can override the color using the textColor property. You can use \"SB_CUSTOM_TEXT_STYLE\" as the variant type if you want to define ad hoc text style values for a given component.\n\n```typescript\ntype TextStyleWithVariant {\n  variant: \"heading1\" | \"heading2\" | \"heading3\" | \"heading4\" | \"heading5\" | \"heading6\" | \"body1\" | \"body2\" | \"body3\" | \"label\" | \"inputLabel\" | \"inputPlaceholder\" | \"inputText\" | \"buttonLabel\" | \"link\" | \"code\" | \"SB_CUSTOM_TEXT_STYLE\" | string; // This could also be a variant name that's user-created if it's available in the Theme\n  textColor?: {\n    default: string;\n  }\n  // If variant is SB_CUSTOM_TEXT_STYLE, then we set the custom\n  // styling using these properties\n  fontFamily?: string;\n  fontSize?: string; // ex: \"14px\"\n  fontWeight?: number;\n  lineHeight?: number | string; // ex: 1.2, \"18px\", etc.\n  textDecoration?: string; // the css text-decoration values\n  fontStyle?: \"normal\" | \"italic\" | \"inherit\";\n  letterSpacing?: string; // ex: \"-2px\"\n  textTransform?: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"none\" | \"inherit\";\n}\n```\n";
 //# sourceMappingURL=TextStyleWithVariant.js.map

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  SB,\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  JavaScript,\n  Python,\n  Databricks,\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  JavaScript,\n  Python,\n  Databricks,\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  JavaScript,\n  Python,\n  Databricks,\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  SB,\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";
 //# 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,4yhCAA4yhC,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,4+hCAA4+hC,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-07-22T15:36:24.212Z
-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  SB,\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  JavaScript,\n  Python,\n  Databricks,\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  JavaScript,\n  Python,\n  Databricks,\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  JavaScript,\n  Python,\n  Databricks,\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-07-23T19:45:15.238Z
+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  SB,\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";
 //# 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,yyhCAAyyhC,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,y+hCAAy+hC,CAAC"}

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

@@ -12,4 +12,5 @@ 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 system_base } from "./system-base.js";
+export { content as system_incremental } from "./system-incremental.js";
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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"}

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

@@ -14,4 +14,5 @@ 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 system_base } from "./system-base.js";
+export { content as system_incremental } from "./system-incremental.js";
 //# sourceMappingURL=index.js.map

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"}
+{"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"}