npm - @superblocksteam/vite-plugin-file-sync - Versions diffs - 2.0.22-next.3 → 2.0.22-next.5 - Mend

@superblocksteam/vite-plugin-file-sync 2.0.22-next.3 → 2.0.22-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/InputPropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from InputPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.278Z
+// Generated at: 2025-08-07T20:48:07.897Z
 export const content = "## Input\n\nThe following is the type definition for the Input component.\n\n```typescript\ninterface InputProps {\n  /** Sets a label text for the input */\n  /** @default \"\" */\n  label?: string;\n  /** Changes the type of data captured in the input */\n  /** @default \"TEXT\" */\n  inputType?:\n    | \"TEXT\"\n    | \"NUMBER\"\n    | \"PERCENTAGE\"\n    | \"CURRENCY\"\n    | \"PASSWORD\"\n    | \"EMAIL\"\n    | \"URL\";\n  /** The display format of the number */\n  /** @default \"standard\" */\n  numberFormat?:\n    | \"unformatted\"\n    | \"standard\"\n    | \"compact\"\n    | \"scientific\"\n    | \"engineering\";\n  /** The three letter ISO 4217 currency code of the input */\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  /** The display for currency codes. If a symbol is unavailable, the display will fall back to the code */\n  /** @default \"symbol\" */\n  currencyCodeDisplay?: \"symbol\" | \"iso_code\";\n  /** Sets the default text of the component. The text is updated if the default text changes */\n  /** @default \"\" */\n  defaultValue?: string;\n  /** Controls whether the label appears above or beside the input component */\n  /** @default \"top\" */\n  labelPosition?: \"top\" | \"left\";\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default {\"variant\":\"inputLabel\"} */\n  labelStyle?: TextStyleWithVariant;\n  /** The text that appears in the input when it is empty */\n  /** @default \"Enter text\" */\n  placeholderText?: string;\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default {\"variant\":\"inputText\"} */\n  textStyle?: TextStyleWithVariant;\n  /** Changes the color of the background */\n  /** @default \"Computed at runtime\" */\n  backgroundColor?: string;\n  /** Component border styling including color, width, and style for all sides */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** Component border radius settings for each corner (top-left, top-right, bottom-right, bottom-left) */\n  /** @default \"Computed at runtime\" */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n  /** Select an icon */\n  icon?: string;\n  /** The alignment of the icon */\n  /** @default \"left\" */\n  iconPosition?: \"left\" | \"right\";\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n  /** Sets the internal spacing around the component's content */\n  /** @default {\"left\":{\"mode\":\"px\",\"value\":10},\"right\":{\"mode\":\"px\",\"value\":10},\"top\":{\"mode\":\"px\",\"value\":8},\"bottom\":{\"mode\":\"px\",\"value\":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** Sets the width of the component (excluding fit-content mode) */\n  width?: Dim;\n  /** Sets the height of the component */\n  height?: Dim;\n  /** Controls the min width dimension of the component */\n  minWidth?: Dim;\n  /** Controls the max width dimension of the component */\n  maxWidth?: Dim;\n  /** Controls the min height dimension of the component */\n  minHeight?: Dim;\n  /** Controls the max height dimension of the component */\n  maxHeight?: Dim;\n  /** Sets the external spacing around the component */\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  /** Sets the width of the input label when positioned to the left, either as a percentage or fixed pixels */\n  /** @default {\"mode\":\"%\",\"value\":30} */\n  labelWidth?: any;\n  /** Controls whether the component is visible on the page */\n  /** @default true */\n  isVisible?: boolean;\n  /** Minimum number of decimal places to display in numeric values (0-20) */\n  minDecimals?: number;\n  /** Maximum number of decimal places to display in numeric values (0-20) */\n  maxDecimals?: number;\n  /** Controls where error messages are displayed - either in a tooltip or inline below the input */\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: \"tooltip\" | \"inline\";\n  /** Custom validation rule expression that returns true when the input value is valid */\n  customValidationRule?: any;\n  /** Custom error message to display when the validation rule fails */\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onTextChanged?: EventFlow;\n  onSubmit?: EventFlow;\n  onFocus?: EventFlow;\n  onFocusOut?: EventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface InputComponentState {\n  /** The current value of the input, processed according to the input type */\n  /** @readonly @default \"\" */\n  value?: any;\n  /** Array of validation error messages for the current input value */\n  /** @readonly @default {} */\n  validationErrors?: any;\n  /** Whether the current input value passes all validation rules */\n  /** @readonly @default \"Computed at runtime\" */\n  isValid?: boolean;\n  /** Whether validation errors should be displayed to the user */\n  /** @readonly */\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface InputMetaProperties {\n  /** The current text content of the input field */\n  text?: any;\n  /** Whether the input has been interacted with by the user */\n  /** @default false */\n  isTouched?: boolean;\n}\n```\n";
 //# sourceMappingURL=InputPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/ModalPropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from ModalPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.278Z
+// Generated at: 2025-08-07T20:48:07.896Z
 export const content = "## Modal\n\nThe following is the type definition for the Modal component.\n\n```typescript\ninterface ModalProps {\n  /** Controls how child components are arranged - freeform positioning, vertical stack, or horizontal row */\n  /** @default \"vertical\" */\n  layout?: \"freeform\" | \"vertical\" | \"horizontal\";\n  /** Controls the vertical alignment of child components within the container */\n  /** @default \"top\" */\n  verticalAlign?:\n    | \"top\"\n    | \"center\"\n    | \"bottom\"\n    | \"space-between\"\n    | \"space-around\";\n  /** Controls the horizontal alignment of child components within the container */\n  /** @default \"left\" */\n  horizontalAlign?:\n    | \"left\"\n    | \"center\"\n    | \"right\"\n    | \"space-between\"\n    | \"space-around\";\n  /** Sets the space between child components in the container */\n  /** @default {\"mode\":\"px\",\"value\":12} */\n  spacing?: Dim;\n  /** Sets the internal spacing around the component's content */\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":12},\"bottom\":{\"mode\":\"px\",\"value\":12},\"left\":{\"mode\":\"px\",\"value\":12},\"right\":{\"mode\":\"px\",\"value\":12}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** Sets the number of columns in the grid layout for positioning child components */\n  /** @default 12 */\n  columns?: number;\n  /** Sets the height of each row in the grid layout measured in pixels */\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** Allows selection of a color value using a color picker interface */\n  /** @default \"Computed at runtime\" */\n  backgroundColor?: string;\n  /** The border styling of the modal */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** The border radius (rounded corners) of the modal */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n  /** Whether to show a backdrop overlay behind the modal */\n  /** @default true */\n  hasBackdrop?: boolean;\n  /** The width preset for the modal (extra small to fullscreen) */\n  /** @default \"MEDIUM\" */\n  widthPreset?: any;\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n  /** Whether the modal can be closed by clicking outside or pressing escape */\n  /** @default true */\n  closeOnClickOutside?: boolean;\n  onOpen?: EventFlow;\n  onClose?: EventFlow;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface ModalMetaProperties {\n  /** Whether the modal is currently open and visible */\n  /** @default false */\n  isOpen?: boolean;\n}\n```\n";
 //# sourceMappingURL=ModalPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/PagePropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from PagePropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.277Z
+// Generated at: 2025-08-07T20:48:07.895Z
 export const content = "## Page\n\nThe following is the type definition for the Page component.\n\n```typescript\ninterface PageProps {\n  /** The array of section names that define the page layout */\n  columns?: any;\n  /** Sets the width of the component */\n  /** @default {\"mode\":\"fill\",\"value\":1} */\n  width?: Dim;\n  /** Sets the height of the component */\n  /** @default {\"mode\":\"fill\",\"value\":1} */\n  height?: Dim;\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n  onLoad?: EventFlow;\n}\n```\n";
 //# sourceMappingURL=PagePropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/SectionPropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SectionPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.277Z
+// Generated at: 2025-08-07T20:48:07.894Z
 export const content = "## Section\n\nThe following is the type definition for the Section component.\n\n```typescript\ninterface SectionProps {\n  /** The array of column names that define the section layout */\n  columns?: any;\n  /** Sets the internal spacing around the component's content */\n  /** @default {\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0},\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** Sets the width of the component */\n  /** @default {\"mode\":\"fill\",\"value\":1} */\n  width?: Dim;\n  /** Sets the height of the component */\n  /** @default {\"mode\":\"fit\"} */\n  height?: Dim;\n  /** Controls the min height dimension of the component */\n  minHeight?: Dim;\n  /** Controls the max height dimension of the component */\n  maxHeight?: Dim;\n  /** Whether the section sticks to the top of the page when scrolling */\n  /** @default false */\n  sticky?: boolean;\n  /** Controls whether the component is visible on the page */\n  /** @default true */\n  isVisible?: boolean;\n  /** Allows selection of a color value using a color picker interface */\n  backgroundColor?: string;\n  /** Component border styling including color, width, and style for all sides */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n}\n```\n";
 //# sourceMappingURL=SectionPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/SlideoutPropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SlideoutPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.277Z
+// Generated at: 2025-08-07T20:48:07.894Z
 export const content = "## Slideout\n\nThe following is the type definition for the Slideout component.\n\n```typescript\ninterface SlideoutProps {\n  /** Controls how child components are arranged - freeform positioning, vertical stack, or horizontal row */\n  /** @default \"vertical\" */\n  layout?: \"freeform\" | \"vertical\" | \"horizontal\";\n  /** Controls the vertical alignment of child components within the container */\n  /** @default \"top\" */\n  verticalAlign?:\n    | \"top\"\n    | \"center\"\n    | \"bottom\"\n    | \"space-between\"\n    | \"space-around\";\n  /** Controls the horizontal alignment of child components within the container */\n  /** @default \"left\" */\n  horizontalAlign?:\n    | \"left\"\n    | \"center\"\n    | \"right\"\n    | \"space-between\"\n    | \"space-around\";\n  /** Sets the space between child components in the container */\n  /** @default {\"mode\":\"px\",\"value\":12} */\n  spacing?: Dim;\n  /** Sets the internal spacing around the component's content */\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":12},\"bottom\":{\"mode\":\"px\",\"value\":12},\"left\":{\"mode\":\"px\",\"value\":12},\"right\":{\"mode\":\"px\",\"value\":12}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** Sets the number of columns in the grid layout for positioning child components */\n  /** @default 12 */\n  columns?: number;\n  /** Sets the height of each row in the grid layout measured in pixels */\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** Allows selection of a color value using a color picker interface */\n  /** @default \"Computed at runtime\" */\n  backgroundColor?: string;\n  /** Component border styling including color, width, and style for all sides */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** The border radius (rounded corners) of the slideout */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n  /** Whether to show a backdrop overlay behind the slideout */\n  /** @default true */\n  hasBackdrop?: boolean;\n  /** The width preset for the slideout (extra small to fullscreen) */\n  /** @default \"medium\" */\n  widthPreset?: \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n  /** Whether the slideout can be closed by clicking outside or pressing escape */\n  /** @default true */\n  closeOnClickOutside?: boolean;\n  onOpen?: EventFlow;\n  onClose?: EventFlow;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SlideoutMetaProperties {\n  /** Whether the slideout is currently open and visible */\n  /** @default false */\n  isOpen?: boolean;\n}\n```\n";
 //# sourceMappingURL=SlideoutPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/SwitchPropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SwitchPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.276Z
+// Generated at: 2025-08-07T20:48:07.893Z
 export const content = "## Switch\n\nThe following is the type definition for the Switch component.\n\n```typescript\ninterface SwitchProps {\n  /** The text label displayed next to the switch */\n  /** @default \"\" */\n  label?: string;\n  /** Whether the switch is checked (toggled on) by default */\n  /** @default true */\n  defaultChecked?: boolean;\n  /** The position of the label relative to the switch (left or right) */\n  /** @default \"right\" */\n  labelPosition?: \"left\" | \"right\";\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default {\"variant\":\"inputLabel\"} */\n  labelStyle?: TextStyleWithVariant;\n  /** Sets the width of the component */\n  width?: Dim;\n  /** Sets the height of the component */\n  height?: Dim;\n  /** Controls the min width dimension of the component */\n  minWidth?: Dim;\n  /** Controls the max width dimension of the component */\n  maxWidth?: Dim;\n  /** Controls the min height dimension of the component */\n  minHeight?: Dim;\n  /** Controls the max height dimension of the component */\n  maxHeight?: Dim;\n  /** Sets the external spacing around the component */\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  /** Controls whether the component is visible on the page */\n  /** @default true */\n  isVisible?: boolean;\n  /** Whether the switch must be checked for form validation */\n  required?: boolean;\n  /** Whether the switch is disabled and cannot be interacted with */\n  /** @default false */\n  isDisabled?: boolean;\n  /** Controls where error messages are displayed - either in a tooltip or inline below the input */\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: \"tooltip\" | \"inline\";\n  /** Custom validation rule expression that returns true when the input value is valid */\n  /** @default \"\" */\n  customValidationRule?: string;\n  /** Custom error message to display when the validation rule fails */\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onSwitchChange?: EventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SwitchComponentState {\n  /** Whether the switch is currently toggled on (same as isChecked) */\n  /** @readonly */\n  isToggledOn?: boolean;\n  /** Object containing any validation errors for the switch */\n  /** @readonly @default {} */\n  validationErrors?: any;\n  /** Whether the switch passes all validation rules */\n  /** @readonly @default true */\n  isValid?: boolean;\n  /** Whether validation errors should be displayed to the user */\n  /** @readonly */\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SwitchMetaProperties {\n  /** @default false */\n  isTouched?: boolean;\n  /** The current checked state of the switch */\n  isChecked?: boolean;\n}\n```\n";
 //# sourceMappingURL=SwitchPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-components/TablePropsDocs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from TablePropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.276Z
+// Generated at: 2025-08-07T20:48:07.893Z
 export const content = "## Table\n\nThe following is the type definition for the Table component.\n\n```typescript\ninterface TableProps {\n  /** The header text displayed at the top of the table */\n  /** @default \"\" */\n  header?: string;\n  /** The array of data objects to display as rows in the table */\n  tableData?: any;\n  /** Sets the width of the component */\n  width?: Dim;\n  /** Sets the height of the component */\n  height?: Dim;\n  /** Controls the min width dimension of the component */\n  minWidth?: Dim;\n  /** Controls the max width dimension of the component */\n  maxWidth?: Dim;\n  /** Controls the min height dimension of the component */\n  minHeight?: Dim;\n  /** Controls the max height dimension of the component */\n  maxHeight?: Dim;\n  /** Sets the external spacing around the component */\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  /** Controls whether the component is visible on the page */\n  /** @default true */\n  isVisible?: boolean;\n  /** Whether column filtering is enabled for the table */\n  /** @default true */\n  isFilterable?: boolean;\n  /** The default filters applied to the table on page load */\n  defaultFilters?: any;\n  /** Whether multiple rows can be selected simultaneously */\n  /** @default false */\n  multiRowSelection?: boolean;\n  /** Whether the table has a search functionality */\n  /** @default true */\n  isSearchable?: boolean;\n  /** Whether the table data can be downloaded as CSV */\n  /** @default true */\n  isDownloadable?: boolean;\n  /** The type of pagination used (none, client-side, or server-side) */\n  /** @default \"none\" */\n  paginationType?: \"none\" | \"client-side\" | \"server-side\";\n  /** The number of rows displayed per page in paginated tables */\n  configuredPageSize?: any;\n  /** The default search text displayed in the search input */\n  defaultSearchText?: string;\n  /** The placeholder text displayed in the search input */\n  searchPlaceholder?: string;\n  /** The index of the row selected by default when the table loads */\n  defaultSelectedRow?: number;\n  /** Whether to display vertical borders between table columns */\n  showColumnBorders?: boolean;\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default \"Computed at runtime\" */\n  headerProps.textStyle?: TextStyleWithVariant;\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default \"Computed at runtime\" */\n  columnHeaderProps.textStyle?: TextStyleWithVariant;\n  /** Whether column header text should wrap to multiple lines when it's too long */\n  /** @default false */\n  columnHeaderTextWrap?: boolean;\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default \"Computed at runtime\" */\n  cellProps.textStyle?: TextStyleWithVariant;\n  /** Allows selection of a color value using a color picker interface */\n  /** @default \"Computed at runtime\" */\n  backgroundColor?: string;\n  /** Allows selection of a color value using a color picker interface */\n  /** @default \"Computed at runtime\" */\n  selectedRowBackgroundColor?: string;\n  /** Component border styling including color, width, and style for all sides */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** Component border radius settings for each corner (top-left, top-right, bottom-right, bottom-left) */\n  /** @default \"Computed at runtime\" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** The spacing density of table rows (extra small to large) */\n  /** @default \"medium\" */\n  rowDensity?: \"extra-small\" | \"small\" | \"medium\" | \"large\";\n  /** The maximum number of lines that row content can span */\n  /** @default -1 */\n  maxLinesPerRow?: number;\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n  onRowClick?: EventFlow;\n  onRowSelect?: EventFlow;\n  onPageChange?: EventFlow;\n  onFiltersChange?: EventFlow;\n  onSearchTextChange?: EventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface TableComponentState {\n  /** The table data with any inserted rows included */\n  /** @readonly @default [] */\n  tableDataWithInserts?: any;\n  /** The order mapping for table data with inserts */\n  /** @readonly @default [] */\n  tableDataWithInsertsOrderMap?: any;\n  /** The currently selected row object */\n  /** @readonly @default null */\n  selectedRow?: any;\n  /** The schema of the currently selected row */\n  /** @readonly */\n  selectedRowSchema?: any;\n  /** Array of all currently selected row objects */\n  /** @readonly @default [] */\n  selectedRows?: any;\n  /** The table data after applying filters and search */\n  /** @readonly */\n  filteredTableData?: any;\n  /** The order mapping for filtered table data */\n  /** @readonly */\n  filteredOrderMap?: any;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface TableMetaProperties {\n  /** The index of the currently selected row */\n  /** @readonly */\n  selectedRowIndex?: number;\n  /** Array of indices of all currently selected rows */\n  /** @readonly */\n  selectedRowIndices?: any;\n  /** The current sort configuration applied to the table */\n  /** @readonly */\n  sortedColumn?: any;\n  /** The current search text applied to the table */\n  /** @readonly @default \"\" */\n  searchText?: string;\n  /** The current filters applied to the table */\n  filters?: any;\n  /** Array of column identifiers that are currently hidden */\n  /** @readonly */\n  hiddenColumns?: any;\n  /** Configuration for frozen/pinned columns in the table */\n  /** @readonly */\n  columnFreezes?: any;\n  /** Color assignments for tag-type columns in the table */\n  /** @readonly */\n  tagsColorAssignment?: any;\n  /** The current page number in paginated tables */\n  /** @readonly @default 0 */\n  pageNo?: number;\n}\n```\n";
 //# sourceMappingURL=TablePropsDocs.js.map

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from TextPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.276Z
+// Generated at: 2025-08-07T20:48:07.893Z
 export const content = "## Text\n\nThe following is the type definition for the Text component.\n\n```typescript\ninterface TextProps {\n  /** The text content to display */\n  text?: string;\n  /** The type of data being displayed (text, number, currency, or date) */\n  /** @default \"text\" */\n  textType?: \"text\" | \"number\" | \"currency\" | \"date\";\n  /** Configures the text styling including font family, size, weight, color, and other typography properties */\n  /** @default {\"variant\":\"label\"} */\n  textStyle?: TextStyleWithVariant;\n  /** The horizontal alignment of the text within the component (left, center, or right) */\n  /** @default \"left\" */\n  horizontalAlign?: \"left\" | \"center\" | \"right\";\n  /** The vertical alignment of the text within the component (top, center, or bottom) */\n  /** @default \"center\" */\n  verticalAlign?: \"top\" | \"center\" | \"bottom\";\n  /** Whether text should wrap to multiple lines when it exceeds the component width */\n  /** @default true */\n  wrapText?: boolean;\n  /** Controls the loading state of the component - off, on, or auto-detected based on data loading */\n  loading?: boolean;\n  /** Whether users can scroll to view overflow content instead of clipping */\n  shouldScroll?: boolean;\n  /** The icon to display alongside the text */\n  icon?: string;\n  /** The position of the icon relative to the text (left or right) */\n  /** @default \"left\" */\n  iconPosition?: \"left\" | \"right\";\n  /** The three-letter ISO 4217 currency code for currency formatting */\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  /** The format used to display numeric values */\n  /** @default \"standard\" */\n  numberFormat?:\n    | \"unformatted\"\n    | \"standard\"\n    | \"compact\"\n    | \"scientific\"\n    | \"engineering\";\n  /** Minimum number of decimal places to display in numeric values (0-20) */\n  minDecimals?: number;\n  /** Maximum number of decimal places to display in numeric values (0-20) */\n  maxDecimals?: number;\n  /** The format expected for parsing input date strings */\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  /** The format used for displaying formatted dates */\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  /** Sets the width of the component */\n  width?: Dim;\n  /** Sets the height of the component */\n  height?: Dim;\n  /** Controls the min width dimension of the component */\n  minWidth?: Dim;\n  /** Controls the max width dimension of the component */\n  maxWidth?: Dim;\n  /** Controls the min height dimension of the component */\n  minHeight?: Dim;\n  /** Controls the max height dimension of the component */\n  maxHeight?: Dim;\n  /** Sets the external spacing around the component */\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  /** Controls whether the component is visible on the page */\n  /** @default true */\n  isVisible?: boolean;\n  /** Whether users can scroll to view overflow content instead of clipping */\n  shouldScroll?: boolean;\n}\n```\n";
 //# sourceMappingURL=TextPropsDocs.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/library-typedefs/Annotations.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from Annotations.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.283Z
+// Generated at: 2025-08-07T20:48:07.906Z
 export const content = "# TypeScript Documentation Annotations\n\nThis document explains the special annotations used in the Superblocks component type definitions.\n\n## @readonly\n\nThe `@readonly` annotation indicates that a property is **read-only** and cannot be directly modified by users. These properties represent computed or internal state values that can be accessed but not set.\n\n**Usage:**\n\n- Users can reference these properties in expressions but cannot assign new values to them\n- Attempting to set a readonly property (e.g., `Checkbox1.value = 'something'`) will not work and should be avoided\n\n**Example:**\n\n```typescript\ninterface CheckboxComponentState {\n  /** @readonly */\n  value?: boolean;\n}\n```\n\n## @default\n\nThe `@default` annotation specifies the default value for a property. It can be combined with other annotations.\n\n**Example:**\n\n```typescript\n/** @default \"\" */\nlabel?: string;\n/** @default true */\ndefaultChecked?: boolean;\n/** @readonly @default {} */\nvalidationErrors?: any;\n```\n";
 //# sourceMappingURL=Annotations.js.map

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from Dim.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.283Z
+// Generated at: 2025-08-07T20:48:07.905Z
 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from EventFlow.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.283Z
+// Generated at: 2025-08-07T20:48:07.904Z
 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from TextStyleWithVariant.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.282Z
+// Generated at: 2025-08-07T20:48:07.904Z
 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.js CHANGED Viewed

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

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/superblocks-api.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-api.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.273Z
+// Generated at: 2025-08-07T20:48:07.890Z
 export const content = "### APIs\n\nThe Superblocks framework allows you to create backend APIs. The high level structure for creating APIs is as follows:\n\n1. APIs are defined using TypeScript files that live inside the apis directory inside the page they are scoped to. Example: /pages/Page1/apis/myApi.ts\n2. This pattern is a declarative workflow builder, where you define each API step, its configuration, and its execution order within the API workflow.\n3. To make the API available for use, you must import it into the scope file and register it with `SbApi()`, then import and destructure it in your page component for use.\n4. **CRITICAL INTEGRATION RULE**:\n   - DO NOT create API steps with integrations that require a configuration ID (PostgreSQL, Snowflake, Databricks, etc.) unless you have been explicitly provided with valid integration configuration IDs\n   - NEVER make up or hallucinate integration IDs like \"postgres-integration-id\", a uuid, or similar placeholder strings\n   - User mentions like \"@some-intgration-name\" or \"use the postgres database\" do NOT constitute valid integration configurations. You must match the user's request to a valid integration configuration\n   - The only integrations that do not require a configuration are: JavaScript, Python, Conditional, TryCatch, Variables, Loop, Parallel, Wait, Throw, Return\n   - If a user requests integration functionality but no valid integration configurations have been provided, you can ignore that part of their request and in your description of what you've built, add that there was no integration configuration provided for their request\n   - Only use integration IDs that appear in the explicitly provided list of integration configurations\n\n#### CRITICAL VARIABLE SCOPING RULES\n\n**🚨 EXTREMELY IMPORTANT**: Variables referenced in API blocks can ONLY come from these sources:\n\n1. **Outputs of previous blocks** in the same API (accessed via the block name)\n2. **Page entities defined in the scope file** (passed as destructured parameters)\n3. **Never reference variables that don't exist** - this is the #1 cause of API generation errors\n\n**❌ WRONG - Variables that don't exist in scope:**\n\n```ts\nnew PostgreSQL(\"insert_data\", \"postgres-integration-id\", {\n  statement: ({ SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown }) =>\n    `INSERT INTO issues VALUES (${SelectedCustomerIdVar.value}, '${ProductNameInput.value}', '${IssueTypeDropdown.selectedOptionValue}')`,\n  // ❌ ERROR: SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown are not defined anywhere!\n});\n```\n\n**✅ CORRECT - Variables from scope entities:**\n\n```ts\n// First, define in scope.ts:\nexport const Page1Scope = createScope<{\n  SelectedCustomerIdVar: any;\n  ProductNameInput: any;\n  IssueTypeDropdown: any;\n}>(\n  () => ({\n    // Register the API\n    submitIssueApi: SbApi({}),\n  }),\n  { name: \"Page1\" },\n);\n\n// Then use in API:\nnew PostgreSQL(\"insert_data\", \"postgres-integration-id\", {\n  statement: ({ SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown }) =>\n    `INSERT INTO issues VALUES (${SelectedCustomerIdVar.value}, '${ProductNameInput.value}', '${IssueTypeDropdown.selectedOptionValue}')`,\n  // ✅ CORRECT: These are page entities defined in the scope\n});\n```\n\n**✅ CORRECT - Variables from previous blocks:**\n\n```ts\nexport default new Api(\"processOrderApi\", [\n  new JavaScript(\"get_customer_data\", {\n    fn: () => ({ customerId: 123, customerName: \"John Doe\" }),\n  }),\n  new PostgreSQL(\"insert_order\", \"postgres-integration-id\", {\n    statement: ({ get_customer_data }) =>\n      `INSERT INTO orders VALUES (${get_customer_data.output.customerId}, '${get_customer_data.output.customerName}')`,\n    // ✅ CORRECT: get_customer_data is a previous block in this API\n  }),\n]);\n```\n\n#### CRITICAL MENTAL MODEL: APIs Access Page Scope (They Don't Define Parameters)\n\n**🚨 FUNDAMENTAL MISCONCEPTION TO AVOID:**\n\n❌ **WRONG THINKING**: \"APIs define their input parameters like traditional backend services\"\n\n```ts\n// WRONG - This is NOT how Superblocks APIs work!\nfunction submitOrder(customerId, productName) {\n  // ❌ APIs don't define parameters!\n  // API logic here\n}\n```\n\n✅ **CORRECT THINKING**: \"APIs are frontend-coupled functions that automatically access the page's existing scope\"\n\n```ts\n// CORRECT - APIs inherit page scope automatically\nnew PostgreSQL(\"insert_order\", \"postgres-integration-id\", {\n  statement: ({ SelectedCustomerIdVar, ProductNameInput }) =>\n    // ↑ This is NOT defining parameters - this is accessing existing page scope!\n    // These variables must ALREADY exist in your page scope\n    `INSERT INTO orders VALUES (${SelectedCustomerIdVar.value}, '${ProductNameInput.value}')`,\n});\n```\n\n**KEY CONCEPTS:**\n\n1. **APIs are frontend-aware**: They're tightly coupled to your page, not independent backend services\n2. **No parameter definition**: APIs cannot define their own input parameters\n3. **Scope inheritance only**: APIs automatically access whatever exists in your page scope\n4. **Mandatory order**: Page Scope → Components → APIs (scope must exist first)\n\n**The Flow:**\n\n```\nPage Scope Variables → APIs Automatically Access → Use in API Logic\n(Must exist first)   → (No parameter passing)   → (Just destructure from scope)\n```\n\n**Contrasting Examples:**\n\n❌ **Traditional Backend API (NOT how Superblocks works):**\n\n```ts\n// This is how traditional APIs work - NOT Superblocks!\nfunction createOrder(customerId, productName, quantity) {\n  // ❌ Defines own parameters\n  return database.insert({\n    customer_id: customerId,\n    product: productName,\n    qty: quantity,\n  });\n}\n\n// Called like: createOrder(123, \"Widget\", 5) - parameters passed in\n```\n\n✅ **Superblocks API (Frontend-coupled):**\n\n```ts\n// This is how Superblocks APIs work - inherits page scope\nnew PostgreSQL(\"insert_order\", \"postgres-integration-id\", {\n  statement: ({ CustomerIdInput, ProductNameInput, QuantityInput }) => {\n    // ↑ NOT defining parameters! These must exist in page scope already\n    return `INSERT INTO orders VALUES (${CustomerIdInput.value}, '${ProductNameInput.value}', ${QuantityInput.value})`;\n  },\n});\n\n// No \"calling with parameters\" - scope variables are automatically available\n```\n\n#### Rules\n\n1. CRITICAL: The name of the API must be consistent across the API's TypeScript definition, the API's file name, references in page files, and the key used to register it in the scope file. See the consistent use of 'myApi' below as an example.\n2. ALWAYS import ALL API classes from the superblocks library at the top of every API file. Use this complete import statement for every API file:\n3. When using database integrations (PostgreSQL, Snowflake, Databricks), the integration_id parameter should be the actual integration ID from your Superblocks workspace, not a placeholder string.\n4. **CRITICAL**: DO NOT reference variables that are not in scope. The ONLY things in scope are (1) the outputs of previous blocks that are in lexical scope and (2) page entities defined in the scope file.\n\n```ts\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n```\n\n#### Examples\n\n##### Complete Example: Scope → Components → API Flow\n\nThis example shows the complete flow from defining variables in scope, to binding them to components, to using them in APIs.\n\n**Step 1: Define entities in scope file**\n\n```ts\n// /pages/Page1/scope.ts\nimport { createScope, SbApi } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  CustomerNameInput: any;\n  ProductNameInput: any;\n  IssueTypeDropdown: any;\n  IssueNotesInput: any;\n}>(\n  () => ({\n    // Register the API\n    submitProductIssueApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**Step 2: Use entities in page components**\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Input,\n  Dropdown,\n  Button,\n  EventFlow,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  const {\n    CustomerNameInput,\n    ProductNameInput,\n    IssueTypeDropdown,\n    IssueNotesInput,\n    submitProductIssueApi,\n  } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Input bind={CustomerNameInput} label=\"Customer Name\" />\n          <Input bind={ProductNameInput} label=\"Product Name\" />\n          <Dropdown\n            bind={IssueTypeDropdown}\n            label=\"Issue Type\"\n            options={[\n              { label: \"Defect\", value: \"defect\" },\n              { label: \"Complaint\", value: \"complaint\" },\n              { label: \"Return\", value: \"return\" },\n            ]}\n          />\n          <Input bind={IssueNotesInput} label=\"Notes\" multiline={true} />\n          <Button\n            label=\"Submit Issue\"\n            onClick={EventFlow.runApis([submitProductIssueApi])}\n          />\n        </Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n**Step 3: Create API that uses the scope entities**\n\n```ts\n// /pages/Page1/apis/submitProductIssueApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"submitProductIssueApi\", [\n  new Conditional(\"validate_inputs\", {\n    if: {\n      when: ({\n        CustomerNameInput,\n        ProductNameInput,\n        IssueTypeDropdown,\n      }): boolean =>\n        !CustomerNameInput.value ||\n        !ProductNameInput.value ||\n        !IssueTypeDropdown.selectedOptionValue,\n      then: [\n        new Throw(\"validation_error\", {\n          error: \"Customer name, product name, and issue type are required\",\n        }),\n      ],\n    },\n  }),\n  new PostgreSQL(\"insert_issue\", \"your-postgresql-integration-id\", {\n    statement: ({\n      CustomerNameInput,\n      ProductNameInput,\n      IssueTypeDropdown,\n      IssueNotesInput,\n    }) =>\n      `INSERT INTO product_issues\n       (customer_name, product_name, issue_type, notes, status, date_reported, created_by)\n       VALUES (\n         '${CustomerNameInput.value}',\n         '${ProductNameInput.value}',\n         '${IssueTypeDropdown.selectedOptionValue}',\n         '${IssueNotesInput.value || \"\"}',\n         'Open',\n         NOW(),\n         1\n       )`,\n  }),\n  new JavaScript(\"return_success\", {\n    fn: ({ insert_issue }) => ({\n      success: true,\n      message: \"Issue submitted successfully\",\n      issueId: insert_issue.output?.insertId || null,\n    }),\n  }),\n]);\n```\n\n##### ❌ COMMON MISTAKES TO AVOID\n\n**❌ WRONG: Using undefined variables**\n\n```ts\n// This is WRONG - these variables don't exist!\nexport default new Api(\"badExampleApi\", [\n  new PostgreSQL(\"insert_data\", \"postgres-integration-id\", {\n    statement: ({\n      SelectedCustomerIdVar,\n      ProductNameInput,\n      IssueTypeDropdown,\n    }) =>\n      `INSERT INTO issues VALUES (${SelectedCustomerIdVar.value}, '${ProductNameInput.value}', '${IssueTypeDropdown.selectedOptionValue}')`,\n    // ❌ ERROR: SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown are not defined in scope!\n  }),\n]);\n```\n\n**❌ WRONG: Mixing up variable names**\n\n```ts\n// Scope defines CustomerNameInput but API tries to use CustomerName\nexport default new Api(\"badExampleApi\", [\n  new PostgreSQL(\"insert_data\", \"postgres-integration-id\", {\n    statement: (\n      { CustomerName }, // ❌ ERROR: Should be CustomerNameInput\n    ) => `INSERT INTO issues VALUES ('${CustomerName.value}')`,\n  }),\n]);\n```\n\n**❌ WRONG: Not destructuring function parameters**\n\n```ts\n// This is WRONG - you must destructure the parameters\nexport default new Api(\"badExampleApi\", [\n  new PostgreSQL(\"insert_data\", \"postgres-integration-id\", {\n    statement: (\n      state, // ❌ ERROR: Should destructure { CustomerNameInput }\n    ) => `INSERT INTO issues VALUES ('${state.CustomerNameInput.value}')`,\n  }),\n]);\n```\n\n##### Creating and registering a Superblocks API\n\nCreate the API by adding the myApi.ts file:\n\n```ts\n// /pages/Page1/apis/myApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"myApi\", [\n  new JavaScript(\"retrieve_orders\", {\n    fn: () => {\n      return [\n        {\n          id: \"ORD-001\",\n          customerName: \"John Smith\",\n          total: 149.99,\n        },\n        {\n          id: \"ORD-002\",\n          customerName: \"Sarah Jones\",\n          total: 89.5,\n        },\n      ];\n    },\n  }),\n]);\n```\n\nThen register the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\n\nimport { createScope, SbApi } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope(\n  () => ({\n    // Register the API in the scope\n    retrieveOrdersApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen use the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  Page,\n  Section,\n  Column,\n  Button,\n  Table,\n  computed,\n  EventFlow,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  const { retrieveOrdersApi } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Button\n            // APIs can be invoked with the EventFlow API\n            onClick={EventFlow.runApis([retrieveOrdersApi])}\n            label=\"Fetch Data\"\n          />\n          {/* Access API response using computed */}\n          <Table tableData={computed(() => retrieveOrdersApi.response)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n##### Referencing the output of a previous block\n\nThink hard about how you access the output of previous steps. You MUST use the output property of the previous step variable. There is no other way to access the output of a previous step (other than using a Variable block, but that is not what you want in this case and should only be used in very specific cases).\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrdersApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrdersApi\", [\n  new JavaScript(\"retrieve_orders\", {\n    fn: () => {\n      return [\n        {\n          id: 1,\n          customer: \"John Smith\",\n          date: \"2024-01-15\",\n          total: 199.99,\n          status: \"Pending\",\n        },\n        {\n          id: 2,\n          customer: \"Jane Doe\",\n          date: \"2024-01-14\",\n          total: 149.99,\n          status: \"Shipped\",\n        },\n        {\n          id: 3,\n          customer: \"Bob Wilson\",\n          date: \"2024-01-13\",\n          total: 299.99,\n          status: \"Delivered\",\n        },\n      ];\n    },\n  }),\n  new JavaScript(\"format_orders\", {\n    fn: ({ retrieve_orders }) => {\n      return retrieve_orders.output.map((order) => ({\n        ...order,\n        date: new Date(order.date).toLocaleDateString(),\n      }));\n    },\n  }),\n]);\n```\n\nThen you would register the API in your scope file and use it in your page component:\n\n```ts\n// /pages/Page1/scope.ts\nexport const Page1Scope = createScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  Page,\n  Section,\n  Column,\n  Table,\n  computed,\n  registerPage,\n} from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  const { getOrdersApi } = Page1;\n\n  return (\n    <Page name=\"Page1\" height={Dim.fill()} width={Dim.fill()}>\n      <Section height={Dim.fill()}>\n        <Column width={Dim.fill()}>\n          <Table tableData={computed(() => getOrdersApi.response)} />\n        </Column>\n      </Section>\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n##### Ensuring variable existence in application\n\n**🚨 CRITICAL**: APIs cannot create their own variables - they only access what already exists in page scope!\n\nWhen creating an API that references variables like `FirstNameInput`, `LastNameInput`, and `SelectedUserIdVar`, these variables MUST exist in your page scope BEFORE you write the API. APIs don't define parameters - they inherit scope.\n\n**Mandatory Flow: Scope → Components → APIs**\n\n**STEP 1: Create variables in scope FIRST** (APIs cannot access variables that don't exist)\n\nSince you've determined that we'll use input components to take in the first name and last name, you MUST ensure that you use the same names for the entities in the `scope.ts` file as the variable names in the API.\n\n```ts\n// /pages/Page1/scope.ts\n\nimport {\n  createScope,\n  SbApi,\n  StateVar,\n  StateVarPersistence,\n  Global,\n} from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  FirstNameInput: any;\n  LastNameInput: any;\n}>(\n  // register non-component entities in the scope\n  ({\n    entities: {\n      FirstNameInput,\n      LastNameInput,\n      handlePeopleUpdates,\n      SelectedUserIdVar,\n    },\n  }) => ({\n    handlePeopleUpdatesApi: SbApi({}),\n    SelectedUserIdVar: StateVar({\n      defaultValue: Global.user.id,\n      persistence: StateVarPersistence.TEMPORARY,\n    }),\n  }),\n  // configure page options\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen, use the variables in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport { Page, Input, EventFlow, registerPage } from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  const {\n    handlePeopleUpdatesApi,\n    FirstNameInput,\n    LastNameInput,\n    SelectedUserIdVar,\n  } = Page1;\n\n  return (\n    <Page name=\"Page1\">\n      <Input\n        label=\"First Name\"\n        bind={FirstNameInput}\n        minLength={1}\n        inputType=\"TEXT\"\n      />\n      <Input\n        label=\"Last Name\"\n        bind={LastNameInput}\n        minLength={1}\n        inputType=\"TEXT\"\n      />\n      {/* The rest of the page... */}\n    </Page>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nFinally, create the API that references these variables:\n\n```ts\n// /pages/Page1/apis/handlePeopleUpdatesApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from \"@superblocksteam/library\";\n\nexport default new Api(\"handlePeopleUpdatesApi\", [\n  new Conditional(\"validate\", {\n    if: {\n      when: ({ FirstNameInput, LastNameInput }): boolean =>\n        !FirstNameInput.isValid || !LastNameInput.isValid,\n      then: [\n        new Throw(\"reject\", {\n          error: \"either the first name or last name is invalid\",\n        }),\n      ],\n    },\n  }),\n  new PostgreSQL(\"update\", \"your-postgresql-integration-id\", {\n    statement: ({ FirstNameInput, LastNameInput, SelectedUserIdVar }) =>\n      `UPDATE people SET first_name = '${FirstNameInput.value}', last_name = '${LastNameInput.value}' WHERE id = ${SelectedUserIdVar.value}`,\n  }),\n]);\n```\n\n#### The Superblocks API TypeScript Type\n\nBelow is the full TypeScript spec for the APIs you create:\n\n````ts\n// @superblocksteam/library\n\nexport type JsonValue =\n  | undefined\n  | null\n  | number\n  | string\n  | boolean\n  | JsonValue[]\n  | object;\nexport type State = { [key: string]: JsonValue };\nexport type Binding<T> = T | ((state: State) => T);\ntype Integrations = { id: string; description: string; metadata: JsonValue }[];\n\nclass Block {\n  constructor(name: string) {}\n  public run(): { output: JsonValue } {\n    /* ... */\n  }\n}\n\nclass Integration extends Block {\n  constructor(name: string, integration_id: string) {}\n}\n\ntype State = Record<string, JsonValue>;\n\nclass JavaScript extends Integration {\n  constructor(\n    name: string,\n    config: {\n      fn: (\n        {\n          /* ... */\n        },\n      ) => JsonValue;\n    },\n  ) {\n    super(name, \"javascript\");\n  }\n}\n\nclass Python extends Integration {\n  constructor(\n    name: string,\n    config: {\n      // We want to just put the python function body here. The scope is the same as it would be if it were a JavaScript integration.\n      fn: string;\n    },\n  ) {\n    super(name, \"python\");\n  }\n}\n\nclass Databricks extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass Athena extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      sqlBody: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass BigQuery extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      sqlBody: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass DynamoDb extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name                       The name of the block.\n   * @param {string} integration_id             The id of the integration.\n   * @param {object} config                     The config object.\n   * @param {string} config.action              The DynamoDB action to perform.\n   * @param {Binding<string>} config.paramsJson A string binding containing a JSON object\n   *                                            with parameters specific to the selected action.\n   *                                            For example: '{\"TableName\": \"MyTable\", \"Key\": {...}}'\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      action:\n        | \"getItem\"\n        | \"updateItem\"\n        | \"putItem\"\n        | \"batchWriteItem\"\n        | \"deleteItem\"\n        | \"query\"\n        | \"scan\"\n        | \"executeStatement\"\n        | \"executeTransaction\"\n        | \"listTagsOfResource\"\n        | \"tagResource\"\n        | \"listTables\"\n        | \"describeTable\"\n        | \"createTable\"\n        | \"updateTable\"\n        | \"deleteTable\";\n      paramsJson: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass Snowflake extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass PostgreSQL extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass MicrosoftSql extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass MySQL extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass Salesforce extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      soqlBody: Binding<string>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass RestApi extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    // If you need to make a request that is detached from an integration, you MUST set this to \"restapi\".\n    integration: string = \"restapi\",\n    config: {\n      method: string;\n      url: Binding<string>;\n      // 🚨 IMPORTANT: Headers and params NEED to be arrays of keys and values. For example:\n      // headers: [{ key: \"Authorization\", value: ({ userKey }: { userKey: any }) => userKey.value }]\n      //\n      // Omit them if you cannot follow this rule.\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass GitHub extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Jira extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Airtable extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Anthropic extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Asana extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Bitbucket extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Box extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass CircleCI extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Cohere extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Datadog extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Dropbox extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Elasticsearch extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Fireworks extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Front extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Gemini extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass GoogleAnalytics extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass GoogleDrive extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Groq extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass HubSpot extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Intercom extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass LaunchDarkly extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Mistral extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Notion extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass PagerDuty extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Perplexity extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Segment extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass SendGrid extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Slack extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass StabilityAI extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Stripe extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Twilio extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Zendesk extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Zoom extends RestApi {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      /**\n       * This is the path exactly as it appears in the OpenAPI spec.\n       *\n       * For example, if we had the following OpenAPI specification.\n       *\n       * paths:\n       *   /resources/{id}:\n       *     get: # ...\n       *\n       * If you determine that this is the path we should use, then the path would be \"/resources/{id}\".\n       */\n      path: string;\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Email extends Integration {\n  constructor(\n    name: string,\n    config: {\n      from: Binding<string>;\n      to: Binding<string>;\n      subject: Binding<string>;\n      cc?: Binding<string>;\n      bcc?: Binding<string>;\n      body?: Binding<string>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nexport type Condition = {\n  when: boolean | ((state: State) => boolean);\n  then: Block[];\n};\n\nexport type Conditions = {\n  if: Condition;\n  elif?: Condition[];\n  else?: Block[];\n};\n\nclass Conditional extends Block {\n  constructor(name: string, config: Conditions) {\n    super(name);\n  }\n}\n\nclass TryCatch extends Block {\n  constructor(\n    name: string,\n    config: {\n      try: Block[];\n      catch: Block[];\n      finally?: Block[];\n      variables: { error: string };\n    },\n  ) {\n    super(name);\n  }\n}\n\n/**\n * A Superblocks variable has the following access pattern:\n *\n * How to retrieve the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.value\n *\n * // INCORRECT\n * my_variable\n * ```\n *\n * How to set the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.set(value)\n *\n * // INCORRECT\n * my_variable = value\n * ```\n *\n */\n\nclass Variables extends Block {\n  constructor(\n    name: string,\n    variables: {\n      // The name of the variable.\n      key: string;\n      // The value of the variable.\n      value: Binding<JsonValue>;\n    }[],\n  ) {\n    super(name);\n  }\n}\n\nclass Loop extends Block {\n  constructor(\n    name: string,\n    config: {\n      over: Binding<JsonValue[]>;\n      variables: {\n        // What the variable name for the current item is.\n        item: string;\n        // What the variable name for the current index is.\n        index: string;\n      };\n      blocks: Block[];\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Parallel extends Block {\n  constructor(\n    name: string,\n    config: {\n      over: Binding<JsonValue[]>;\n      variables: {\n        // What the variable name for the current item is.\n        item: string;\n      };\n      blocks: Block[];\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Throw extends Block {\n  constructor(\n    name: string,\n    config: {\n      error: Binding<JsonValue>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Return extends Block {\n  constructor(\n    name: string,\n    config: {\n      data: Binding<JsonValue>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Api {\n  constructor(\n    name: string,\n    steps: Block[],\n    authorization:\n      | {\n          type: \"AUTHORIZATION_TYPE_APP_USERS\";\n        }\n      | {\n          type: \"AUTHORIZATION_TYPE_JS_EXPRESSION\";\n          expression: Binding<boolean>;\n        } = { type: \"AUTHORIZATION_TYPE_APP_USERS\" },\n  ) {\n    /* ... */\n  }\n  public get response(): JsonValue {\n    /* ... */\n  }\n  public get error(): string | undefined {\n    /* ... */\n  }\n  public run(): void {\n    /* ... */\n  }\n  public cancel(): void {\n    /* ... */\n  }\n}\n````\n\n#### Rules for using Superblocks APIs\n\nThink hard about the following important rules for correctly using Superblocks APIs:\n\n- You MUST use a destructured object to access page scope variables in dynamic block fields. This syntax is NOT defining function parameters - it's accessing the inherited page scope.\n\n```ts\n// CORRECT: destructuring to access page scope variables that must already exist\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n// ↑ These variables (Dropdown1, TextInput1) must exist in your page scope!\n\n// INCORRECT: trying to use scope object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n// ↑ This syntax doesn't work in Superblocks\n```\n\n- DO NOT reference variables that are not in scope or that don't exist. The ONLY things in scope are (1) the outputs of previous blocks that are in lexical scope and (2) page entities.\n\n- The result of each scope is the result of the last block in that scope. In the following example, the value of `sendEmail.response` is the result of the `return_summary` block. Use this information to carefully ensure that the last block in your API is the one that returns the value you want.\n\n```ts\nexport default new Api(\"sendEmailApi\", [\n  new Email(\"send_email\", {\n    from: \"noreply@company.com\",\n    to: \"test@test.com\",\n    subject: \"Test Email\",\n    body: \"This is a test email\",\n  }),\n  new JavaScript(\"return_summary\", {\n    fn: () => \"Email sent successfully!\",\n  }),\n]);\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- You cannot set Superblocks state variables inside an API\n  ❌ DON'T: Set Superblocks state variableds inside an API.\n  Example:\n\n```\nnew Api(\"addUserApi\", [\n  new JavaScript(\"generateMockUser\", {\n    fn: ({ UsersData }) => {\n      // Generate a new mock user\n      const newUser = {\n        id: Math.floor(Math.random() * 10000) + 1000,\n        name: `User ${Math.floor(Math.random() * 1000)}`,\n        email: `user${Math.floor(Math.random() * 1000)}@example.com`,\n      };\n      // Add the new user to the existing data\n      const updatedUsers = [...UsersData.value, newUser];\n\n      // Update the state variable\n      UsersData.setValue(updatedUsers);\n      return {\n        success: true,\n        message: \"User added successfully\",\n        newUser: newUser,\n        totalUsers: updatedUsers.length,\n\n    };\n   },\n }),\n]);\n```\n\n✅ DO: Set state variables in the APIs onSuccess in the scope file with an EventFlow:\n\nExample:\n\n```\nimport { createScope, StateVar, StateVarPersistence, SbApi, EventFlow } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createScope<{\n  MainTable: any;\n}>(({ entities }) => ({ addUserApi, UsersData }), {\n  name: \"Page1\",\n  UsersData: StateVar({\n    persistence: StateVarPersistence.TEMPORARY,\n    defaultValue: [],\n  }),\n  addUserApi: SbApi({\n    onSuccess: EventFlow.setStateVar(UsersData, [...UsersData.value, addUserApi.response])\n  }),\n});\n```\n\n- You cannot set properties of frontend UI components inside an API\n\n- APIs are registered in scope files using `SbApi()` and then accessed in page components by destructuring from the scope entities. Make sure you name the key used in registerScope the same as the imported API, but do not pass the imported Api into the SbApi() call.\n\n- To access API responses in your UI, use `computed(() => apiName.response)` or `computed(() => apiName.error)`.\n\n- You will not always be told which integrations to use in your API; you will have to determine that yourself based on the data you need to fetch.\n\n- Never add comments to code you (the ai) generate. User added comments are fine - leave those!\n";
 //# sourceMappingURL=superblocks-api.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/superblocks-components-rules.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-components-rules.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.273Z
+// Generated at: 2025-08-07T20:48:07.888Z
 export const content = "### Rules for using Superblocks components:\n\n- ENSURE THAT ALL PROPERTY VALUES COMPLY WITH THE SUPPLIED TYPES FOR EACH PROPERTY\n- NEVER use a component in this section in a custom component\n- **🚨 CRITICAL: NEVER use computed as React children.** computed returns an object that React cannot render. Examples:\n  - ❌ WRONG: `<Container>{computed(() => dynamicText)}</Container>`\n  - ❌ WRONG: `<Section>{computed(() => conditionalContent)}</Section>`\n  - ✅ CORRECT: `<Text text={computed(() => dynamicText)} />`\n  - ✅ CORRECT: `<Container isVisible={computed(() => showContainer)} />`\n- Modal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- NEVER store property values in variables and then pass those variables to components. ALWAYS define the values inline so the visual editor can show them correctly.\n\nNOTES:\n\n- When you see _Border_, it's {width: Dim, style: string, color: string}\n- When you see _TextStyle_, it's a plain JS object with the following properties:\n  - variant: \"heading1\" | \"heading2\" | \"heading3\" | \"heading4\" | \"heading5\" | \"body1\" | \"body2\" | \"body3\" | \"label\" | \"inputLabel\" | \"code\"\n  - textColor: an object with only the following properties:\n    - default: string // the text color to use. A color value from the theme, or a hex code if necessary. ALWAYS wrap this property in computed. Example: computed(() => Theme.colors.neutral900), and remember to import computed and globals from the library: import { computed,Theme } from '@superblocksteam/library';\n- When you see _EventFlow_, use the EventFlow builder\n- Import all components you use from '@superblocksteam/library'; Example: `import { Container, Button, computed, ... } from '@superblocksteam/library';` If you don't import all components you use, the app will crash!\n- Don't add props to the Page component other than onLoad\n- Container has a default style of \"card\" if you want to remove the style, set the style to \"none\"\n- When using dynamic values in component props, use `computed` with the correct pattern:\n  - For scope entities (variables, APIs): `computed(() => entityName.value)` (direct access)\n  - For bound components: `computed(() => ComponentName.property)` (direct access after binding)\n  - For global access: `computed(() => Global.user.name)` or `computed(() => Theme.colors.primary)` (import globals from the library first: `import { Global, Theme, Embed, Env } from '@superblocksteam/library';`)\n- Use computed ONLY when the value references dynamic data (state variables, API responses, component values, or theme)\n- Do NOT use computed for static configuration like table columns, static dropdown options, or style objects that don't reference theme\n";
 //# sourceMappingURL=superblocks-components-rules.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/superblocks-custom-components.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-custom-components.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.272Z
+// Generated at: 2025-08-07T20:48:07.888Z
 export const content = "# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\n- CRITICAL: ALWAYS import React using a namespace import: `import * as React from 'react'`.\n\n## Default Custom Components\n\n- **IMPORTANT**: New Superblocks apps come with default custom components in the `components/` directory that provide common functionality not available in the core Superblocks library.\n\n- **USE THESE FIRST**: Before creating new custom components, check if existing default custom components in the `components/` directory can fulfill the user's requirements. These are likely to handle common use cases that users frequently request.\n\n- **PRESERVE INTERNALS**: Do NOT modify the internal implementation of default custom components (including their TypeScript/JavaScript code, CSS files, or other supporting files) unless the user explicitly asks you to change their internals. Instead, use them as-is with their existing API.\n\n- **COMMON PATTERN**: Many user requests that seem to require custom components can actually be fulfilled by using the existing default custom components that ship with new apps.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from \"antd\";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from \"@superblocksteam/library\";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: \"Default value\" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: \"On change\" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: \"flex\" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent(\"Rating\", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` — Sets a default value.\n- `.propertiesPanel({ label: \"Your Label\" })` — Controls how the prop appears in the editor.\n- `.validate(fn)` — Adds custom validation logic.\n- `.readable()`, `.readAndWrite()` — Control read/write capabilities.\n\n---\n\n## Property Readability and Writability\n\nProperties have different access levels based on their definition:\n\n- **`.readAndWrite()`**: Can be read (`Dropdown1.value`) and directly assigned (`Input1.text = \"New value\"`)\n- **`.readable()`**: Can be read but not directly assigned. For dynamic behavior, use computed logic in the property binding:\n  ```jsx\n  // ❌ Button1.label = \"Hello world\";  // Doesn't work for readonly\n  // ✅ <Button label={computed(() => isHidden.value ? \"Show\" : \"Hide\")} />\n  ```\n- **No modifier**: Internal only, cannot be accessed outside the component\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component's props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to create a net new custom component\n\n- If a user asks for something by name, like showing \"metrics card\", and you do not find a \"metrics card\" component in the Superblocks library, be sure to check if an existing custom component exists that you can use inside the `/components` directory of the project.\n";
 //# sourceMappingURL=superblocks-custom-components.js.map

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/superblocks-data-filtering.js CHANGED Viewed

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

package/dist/ai-service/prompt-builder-service/static-fragments/platform-parts/superblocks-event-flow.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-event-flow.md
 // Do not edit this file directly
-// Generated at: 2025-08-07T19:36:24.272Z
+// Generated at: 2025-08-07T20:48:07.887Z
 export const content = "# Event handlers with EventFlow\n\nRather than using standard browser event handlers, Superblocks provides a structured event handler action flow that allows you to run a series of events within the Superblocks system.\n\nImporting EventFlow:\n\n```jsx\nimport { EventFlow } from \"@superblocksteam/library\";\n```\n\nAll event handlers MUST be written using the `EventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\nconst { isReady } = Page1;\n<Button onClick={EventFlow.setStateVar(isReady, { value: true })} />;\n```\n\n## EventFlow builder pattern\n\n`EventFlow` provides a number of functions that can be chained together using `EventFlow` which correspond to actions in the Superblocks system.\n\nYou should always use these dedicated functions for individual and sequential actions.\n\nImportant: DO NOT use .run() at the end of a chain of EventFlow functions, it is not needed and it will throw an error.\n\n```jsx\nconst { isReady, getUserData, getPermissions, LoginModal } = Page1;\n<Button\n  onClick={EventFlow.setQueryParams({ filter: \"active\" }, { keep: true })\n    .setStateVar(isReady, { value: true })\n    .controlModal(LoginModal, { action: \"close\" })\n\n    // run APIs allows you to run Superblocks APIs by name using string arrays\n    // Each runAPIs call executes the list of API names supplied in parallel\n    .runApis([getUserData, getPermissions])\n\n    // set a state variable's value\n    .showAlert(\"Workflow complete\", { type: \"success\" })\n    .navigateTo(\"/dashboard\", { newWindow: false })}\n/>;\n```\n\n#### Using RunJS (only when needed)\n\n`EventFlow` also has a special `runJS` event type that allows you to run any JavaScript in the browser.\n\nThis allows you to write more complex logic such as control flow.\n\nImportant:\n\n- The only things you can do in runJS is set state variables or set the public state of components, like modal.isOpen.\n- You CANNOT use EventFlow inside of a EventFlow.runJS function. If you do this, it won't work!\n- **State access in runJS**: Scope entities are accessible directly by their names, global state is accessible via imported globals (Global, Theme, Embed, Env).\n\nExample accessing scope entities:\n\n```jsx\n<Button\n  label=\"Enable\"\n  buttonStyle={\"SECONDARY_BUTTON\"}\n  onClick={EventFlow.runJS(() => {\n    // Scope entities (variables, bound components) are accessible directly in runJS\n    if (isUserAdmin.value) {\n      // isUserAdmin is a bound component from scope\n      myStateVar.value = true; // myStateVar is a state variable from scope\n      myModal.isOpen = false; // myModal is a bound component from scope\n    } else {\n      console.log(\"This user was not an admin\");\n    }\n  })}\n/>\n```\n\nExample accessing global state when needed:\n\n```jsx\n<Button\n  label=\"Personalized Action\"\n  onClick={EventFlow.runJS(() => {\n    // Import globals and access directly\n    if (Global.user.groups.some((g) => g.name === \"admin\")) {\n      // Also access scope entities (bound components) directly\n      adminPanel.isVisible = true; // adminPanel is a bound component from scope\n    }\n    console.log(`Welcome ${Global.user.name}!`);\n  })}\n/>\n```\n\nAs mentioned above, you should only use `runJS` when the flow is too complex to represent using only chained event flow actions.\n\n### EventFlow Usage Examples\n\n```typescript\nimport { EventFlow, computed } from \"@superblocksteam/library\";\nimport { Page1 } from \"./scope\";\n\nconst { fetchUserData, saveUserData, userDataVariable, MyModal } = Page1;\n\n// Navigation example\nEventFlow.navigateTo(\"https://example.com\", { newWindow: true });\n\n// Control UI components example\nEventFlow.controlModal(MyModal, { action: \"open\" });\n\n// State management example\nconst { userProfile } = Page1;\nEventFlow.setStateVar(userProfile, { value: { name: \"John\", role: \"Admin\" } });\n\n// Chaining multiple actions\nEventFlow.runApis([fetchUserData])\n  .setStateVar(userDataVariable, {\n    value: computed(() => {\n      fetchUserData.response;\n    }),\n  })\n  .showAlert(\"Data loaded successfully\", { type: \"success\" });\n\n// Conditional flow with success/error handlers\nconst successFlow = EventFlow.showAlert(\"Success!\", { type: \"success\" });\nconst errorFlow = EventFlow.showAlert(\"An error occurred\", { type: \"error\" });\nEventFlow.runApis([saveUserData], {\n  onSuccess: successFlow,\n  onError: errorFlow,\n});\n```\n\n**EventFlow: Managing Events and Side Effects in Superblocks**\n\n## Important Syntax Rules\n\n- Always use function braces with EventFlow.runJS. Example: `EventFlow.runJS(() => { someFunction(); })` not `EventFlow.runJS(() => someFunction())`\n- EventFlow.runApis() accepts an array of direct API entity references. Example: `EventFlow.runApis([fetchUserData, saveUserData])`\n";
 //# sourceMappingURL=superblocks-event-flow.js.map