@superblocksteam/vite-plugin-file-sync 2.0.3-next.58 → 2.0.3-next.72

package/dist/ai-service/prompts/generated/library-components/SbButtonPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbButtonPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.965Z
+// Generated at: 2025-06-04T01:12:37.678Z
 export const content = "## SbButton\n\nThe following is the type definition for the SbButton component.\n\n```typescript\ninterface SbButtonProps {\n  label?: string;\n  /** @default {\"left\":{\"mode\":\"px\",\"value\":10},\"right\":{\"mode\":\"px\",\"value\":10},\"top\":{\"mode\":\"px\",\"value\":9},\"bottom\":{\"mode\":\"px\",\"value\":9}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  /** @default \"primary\" */\n  variant?: string;\n  icon?: string;\n  /** @default \"LEFT\" */\n  iconPosition?: string;\n  /** @default {\"variant\":\"buttonLabel\",\"textColor\":{\"default\":\"#FFFFFF\"}} */\n  textStyle?: Record<string, any>;\n  /** @default \"#27BBFF\" */\n  backgroundColor?: string;\n  /** @default {\"left\":{\"width\":{\"mode\":\"px\",\"value\":0},\"style\":\"solid\",\"color\":\"{{ theme.colors.neutral100 }}\"},\"right\":{\"width\":{\"mode\":\"px\",\"value\":0},\"style\":\"solid\",\"color\":\"{{ theme.colors.neutral100 }}\"},\"top\":{\"width\":{\"mode\":\"px\",\"value\":0},\"style\":\"solid\",\"color\":\"{{ theme.colors.neutral100 }}\"},\"bottom\":{\"width\":{\"mode\":\"px\",\"value\":0},\"style\":\"solid\",\"color\":\"{{ theme.colors.neutral100 }}\"}} */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {\"topLeft\":{\"mode\":\"px\",\"value\":4},\"topRight\":{\"mode\":\"px\",\"value\":4},\"bottomRight\":{\"mode\":\"px\",\"value\":4},\"bottomLeft\":{\"mode\":\"px\",\"value\":4}} */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n  /** @default \"center\" */\n  labelAlignment?: string;\n  /** @default true */\n  loadingAnimation?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n";
 //# sourceMappingURL=SbButtonPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbCheckboxPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbCheckboxPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.964Z
+// Generated at: 2025-06-04T01:12:37.678Z
 export const content = "## SbCheckbox\n\nThe following is the type definition for the SbCheckbox component.\n\n```typescript\ninterface SbCheckboxProps {\n  /** @default \"\" */\n  label?: string;\n  /** @default true */\n  defaultChecked?: boolean;\n  labelStyle?: any;\n  loadingAnimation?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: string;\n  /** @default \"\" */\n  customValidationRule?: string;\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onCheckChange?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbCheckboxComponentState {\n  value?: boolean;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbCheckboxPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbColumnPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbColumnPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.964Z
+// Generated at: 2025-06-04T01:12:37.677Z
 export const content = "## SbColumn\n\nThe following is the type definition for the SbColumn component.\n\n```typescript\ninterface SbColumnProps {\n  /** @default \"vertical\" */\n  layout?: string;\n  /** @default 48 */\n  columns?: number;\n  rows?: number;\n  rowSize?: number;\n  /** @default \"top\" */\n  verticalAlign?: string;\n  /** @default \"left\" */\n  horizontalAlign?: string;\n  /** @default {\"mode\":\"px\",\"value\":6} */\n  spacing?: Dim;\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  /** @default {\"mode\":\"fill\",\"value\":1} */\n  width?: Dim;\n  /** @default {\"mode\":\"fill\",\"value\":1} */\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  /** @default true */\n  shouldScrollContents?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n}\n```\n";
 //# sourceMappingURL=SbColumnPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbContainerPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbContainerPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.964Z
+// Generated at: 2025-06-04T01:12:37.677Z
 export const content = "## SbContainer\n\nThe following is the type definition for the SbContainer component.\n\n```typescript\ninterface SbContainerProps {\n  /** @default \"vertical\" */\n  layout?: string;\n  /** @default 48 */\n  columns?: number;\n  rows?: number;\n  rowSize?: number;\n  /** @default \"top\" */\n  verticalAlign?: string;\n  /** @default \"left\" */\n  horizontalAlign?: string;\n  /** @default {\"mode\":\"px\",\"value\":6} */\n  spacing?: Dim;\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  shouldScrollContents?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  /** @default \"none\" */\n  variant?: string;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {\"topLeft\":{\"mode\":\"px\",\"value\":0},\"topRight\":{\"mode\":\"px\",\"value\":0},\"bottomRight\":{\"mode\":\"px\",\"value\":0},\"bottomLeft\":{\"mode\":\"px\",\"value\":0}} */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n}\n```\n";
 //# sourceMappingURL=SbContainerPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbDatePickerPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbDatePickerPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.964Z
+// Generated at: 2025-06-04T01:12:37.677Z
 export const content = "## SbDatePicker\n\nThe following is the type definition for the SbDatePicker component.\n\n```typescript\ninterface SbDatePickerProps {\n  /** @default \"\" */\n  label?: string;\n  defaultDate?: string;\n  /** @default \"YYYY-MM-DD\" */\n  dateFormat?: string;\n  displayDateFormat?: string;\n  /** @default false */\n  manageTimezone?: boolean;\n  valueTimezone?: string;\n  displayTimezone?: string;\n  /** @default false */\n  twentyFourHourTime?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  /** @default \"top\" */\n  labelPosition?: string;\n  /** @default true */\n  showIcon?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: string;\n  /** @default \"\" */\n  customValidationRule?: string;\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onDateSelected?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbDatePickerComponentState {\n  value?: string;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  /** @default \"Current datetime\" */\n  outputDateLocal?: string;\n  /** @default \"Current datetime\" */\n  outputDateUtc?: string;\n  showError?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbDatePickerPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbDropdownPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbDropdownPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.964Z
+// Generated at: 2025-06-04T01:12:37.677Z
 export const content = "## SbDropdown\n\nThe following is the type definition for the SbDropdown component.\n\n```typescript\ninterface SbDropdownProps {\n  /** @default \"\" */\n  label?: string;\n  options?: any;\n  defaultOptionValue?: string;\n  transformation?: any;\n  /** @default \"top\" */\n  labelPosition?: string;\n  /** @default {\"variant\":\"inputLabel\",\"textColor\":{\"default\":\"#1F2633\"}} */\n  labelStyle?: Record<string, any>;\n  icon?: string;\n  /** @default \"Select an option\" */\n  placeholder?: string;\n  /** @default {\"variant\":\"inputText\",\"textColor\":{\"default\":\"#1F2633\"}} */\n  textStyle?: Record<string, any>;\n  loadingAnimation?: boolean;\n  /** @default {\"left\":{\"mode\":\"px\",\"value\":10},\"right\":{\"mode\":\"px\",\"value\":10},\"top\":{\"mode\":\"px\",\"value\":4},\"bottom\":{\"mode\":\"px\",\"value\":4}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  /** @default false */\n  isMultiple?: boolean;\n  /** @default false */\n  allowSelectAll?: boolean;\n  /** @default false */\n  allowClearing?: boolean;\n  /** @default true */\n  clientSideFiltering?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: string;\n  /** @default \"\" */\n  customValidationRule?: string;\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onOptionChange?: SbEventFlow;\n  onSearchTextChange?: SbEventFlow;\n  onClear?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbDropdownComponentState {\n  value?: any;\n  defaultTransformation?: any;\n  /** @default [] */\n  transformedOptions?: any;\n  /** @default {} */\n  validationErrors?: any;\n  selectedOptionValue?: any;\n  selectedOptionValues?: any;\n  selectedOption?: any;\n  selectedOptionArr?: any;\n  selectedIndex?: number;\n  /** @default [] */\n  selectedIndexArr?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbDropdownPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbIconPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbIconPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.964Z
+// Generated at: 2025-06-04T01:12:37.677Z
 export const content = "## SbIcon\n\nThe following is the type definition for the SbIcon component.\n\n```typescript\ninterface SbIconProps {\n  /** @default \"info\" */\n  icon?: string;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  color?: string;\n  /** @default true */\n  animateLoading?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n";
 //# sourceMappingURL=SbIconPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbImagePropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbImagePropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.963Z
+// Generated at: 2025-06-04T01:12:37.676Z
 export const content = "## SbImage\n\nThe following is the type definition for the SbImage component.\n\n```typescript\ninterface SbImageProps {\n  src?: string;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {\"topLeft\":{\"mode\":\"px\",\"value\":0},\"topRight\":{\"mode\":\"px\",\"value\":0},\"bottomRight\":{\"mode\":\"px\",\"value\":0},\"bottomLeft\":{\"mode\":\"px\",\"value\":0}} */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n  /** @default false */\n  fillContainer?: boolean;\n  /** @default \"center\" */\n  align?: string;\n  animateLoading?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n";
 //# sourceMappingURL=SbImagePropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbInputPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbInputPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.963Z
+// Generated at: 2025-06-04T01:12:37.676Z
 export const content = "## SbInput\n\nThe following is the type definition for the SbInput component.\n\n```typescript\ninterface SbInputProps {\n  /** @default \"\" */\n  label?: string;\n  /** @default \"TEXT\" */\n  inputType?: string;\n  /** @default \"standard\" */\n  numberFormatting?: string;\n  /** @default \"USD\" */\n  currency?: string;\n  /** @default \"symbol\" */\n  currencyCodeDisplay?: string;\n  /** @default \"\" */\n  defaultValue?: string;\n  /** @default \"top\" */\n  labelPosition?: string;\n  /** @default {\"variant\":\"inputLabel\",\"textColor\":{\"default\":\"#1F2633\"}} */\n  labelStyle?: Record<string, any>;\n  /** @default \"Enter text\" */\n  placeholderText?: string;\n  /** @default {\"variant\":\"inputText\",\"textColor\":{\"default\":\"#1F2633\"}} */\n  textStyle?: Record<string, any>;\n  /** @default \"{{ theme.colors.neutral }}\" */\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {\"topLeft\":{\"mode\":\"px\",\"value\":4},\"topRight\":{\"mode\":\"px\",\"value\":4},\"bottomRight\":{\"mode\":\"px\",\"value\":4},\"bottomLeft\":{\"mode\":\"px\",\"value\":4}} */\n  borderRadius?: {\n    topLeft: Dim;\n    topRight: Dim;\n    bottomLeft: Dim;\n    bottomRight: Dim;\n  };\n  icon?: string;\n  /** @default \"LEFT\" */\n  iconPosition?: string;\n  inputType?: string;\n  /** @default false */\n  multiline?: boolean;\n  /** @default true */\n  loadingAnimation?: boolean;\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  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  labelPosition?: string;\n  /** @default {\"mode\":\"%\",\"value\":30} */\n  labelWidth?: any;\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  inputType?: string;\n  /** @default 1 */\n  minimumFractionDigits?: number;\n  /** @default 2 */\n  maximumFractionDigits?: number;\n  /** @default false */\n  stepper?: boolean;\n  /** @default 1 */\n  stepSize?: number;\n  minLength?: number;\n  maxLength?: number;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: string;\n  /** @default \"\" */\n  customValidationRule?: string;\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onTextChanged?: SbEventFlow;\n  onSubmit?: SbEventFlow;\n  onFocus?: SbEventFlow;\n  onFocusOut?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbInputComponentState {\n  /** @default \"\" */\n  value?: string;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbInputPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbKeyValuePropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbKeyValuePropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.963Z
+// Generated at: 2025-06-04T01:12:37.676Z
 export const content = "## SbKeyValue\n\nThe following is the type definition for the SbKeyValue component.\n\n```typescript\ninterface SbKeyValueProps {\n  sourceData?: any;\n  properties?: any;\n  /** @default [] */\n  propertiesOrder?: any;\n  /** @default \"left\" */\n  keyProps.position?: string;\n  keyProps.keyStyle?: any;\n  /** @default false */\n  keyProps.textWrap?: boolean;\n  valueProps.valueStyle?: any;\n  /** @default false */\n  valueProps.textWrap?: boolean;\n  styleProps.backgroundColor?: string;\n  styleProps.border?: any;\n  styleProps.borderRadius?: any;\n  /** @default {\"size\":{\"mode\":\"px\",\"value\":1},\"color\":\"{{ theme.colors.neutral100 }}\"} */\n  styleProps.divider?: any;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {} */\n  keyProps?: any;\n  keyProps.width?: any;\n  /** @default \"left\" */\n  valueProps.position?: string;\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbKeyValueComponentState {\n  /** @default {} */\n  data?: any;\n}\n```\n";
 //# sourceMappingURL=SbKeyValuePropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbModalPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbModalPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.963Z
+// Generated at: 2025-06-04T01:12:37.676Z
 export const content = "## SbModal\n\nThe following is the type definition for the SbModal component.\n\n```typescript\ninterface SbModalProps {\n  /** @default \"vertical\" */\n  layout?: string;\n  /** @default 48 */\n  columns?: number;\n  rows?: number;\n  rowSize?: number;\n  /** @default \"top\" */\n  verticalAlign?: string;\n  /** @default \"left\" */\n  horizontalAlign?: string;\n  /** @default {\"mode\":\"px\",\"value\":6} */\n  spacing?: Dim;\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  backgroundColor?: string;\n  border?: any;\n  borderRadius?: any;\n  /** @default true */\n  hasBackdrop?: boolean;\n  /** @default \"MEDIUM\" */\n  widthPreset?: any;\n  /** @default true */\n  canOutsideClickClose?: boolean;\n  onOpen?: SbEventFlow;\n  onClose?: SbEventFlow;\n}\n```\n";
 //# sourceMappingURL=SbModalPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbPagePropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbPagePropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.963Z
+// Generated at: 2025-06-04T01:12:37.675Z
 export const content = "## SbPage\n\nThe following is the type definition for the SbPage component.\n\n```typescript\ninterface SbPageProps {\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  onLoad?: SbEventFlow;\n}\n```\n";
 //# sourceMappingURL=SbPagePropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbSectionPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbSectionPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.962Z
+// Generated at: 2025-06-04T01:12:37.675Z
 export const content = "## SbSection\n\nThe following is the type definition for the SbSection component.\n\n```typescript\ninterface SbSectionProps {\n  /** @default {\"mode\":\"fill\",\"value\":1} */\n  width?: Dim;\n  /** @default {\"mode\":\"fit\"} */\n  height?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default false */\n  sticky?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n}\n```\n";
 //# sourceMappingURL=SbSectionPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbSlideoutPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbSlideoutPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.962Z
+// Generated at: 2025-06-04T01:12:37.675Z
 export const content = "## SbSlideout\n\nThe following is the type definition for the SbSlideout component.\n\n```typescript\ninterface SbSlideoutProps {\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbSlideoutPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbSwitchPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbSwitchPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.962Z
+// Generated at: 2025-06-04T01:12:37.674Z
 export const content = "## SbSwitch\n\nThe following is the type definition for the SbSwitch component.\n\n```typescript\ninterface SbSwitchProps {\n  /** @default \"\" */\n  label?: string;\n  /** @default true */\n  defaultChecked?: boolean;\n  /** @default \"right\" */\n  labelPosition?: string;\n  labelStyle?: any;\n  loadingAnimation?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default \"tooltip\" */\n  errorMessagePlacement?: string;\n  /** @default \"\" */\n  customValidationRule?: string;\n  /** @default \"\" */\n  customErrorMessage?: string;\n  onSwitchChange?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbSwitchComponentState {\n  value?: boolean;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbSwitchPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbTablePropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbTablePropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.962Z
+// Generated at: 2025-06-04T01:12:37.674Z
 export const content = "## SbTable\n\nThe following is the type definition for the SbTable component.\n\n```typescript\ninterface SbTableProps {\n  /** @default \"\" */\n  tableHeader?: string;\n  tableData?: any;\n  columns?: any;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  /** @default true */\n  isFilterable?: boolean;\n  defaultFilters?: any;\n  /** @default false */\n  enableRowInsertion?: boolean;\n  /** @default false */\n  enableRowDeletion?: boolean;\n  /** @default false */\n  multiRowSelection?: boolean;\n  /** @default true */\n  isSearchable?: boolean;\n  /** @default true */\n  isDownloadable?: boolean;\n  /** @default \"NONE\" */\n  pageType?: string;\n  configuredPageSize?: number;\n  defaultSort?: Record<string, any>;\n  defaultSearchText?: string;\n  searchPlaceholder?: string;\n  defaultSelectedRow?: number;\n  showColumnBorders?: boolean;\n  headerProps.textStyle?: any;\n  columnHeaderProps.textStyle?: any;\n  cellProps.textStyle?: any;\n  backgroundColor?: string;\n  selectedRowBackgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {\"topLeft\":{\"mode\":\"px\",\"value\":4},\"topRight\":{\"mode\":\"px\",\"value\":4},\"bottomRight\":{\"mode\":\"px\",\"value\":4},\"bottomLeft\":{\"mode\":\"px\",\"value\":4}} */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  compactMode?: string;\n  maxLinesPerRow?: number;\n  animateLoading?: boolean;\n  isVisible?: boolean;\n  collapseWhenHidden?: boolean;\n  searchProps.textStyle?: any;\n  searchProps.backgroundColor?: string;\n  searchProps.border?: Record<string, any>;\n  /** @default {\"topLeft\":{\"mode\":\"px\",\"value\":4},\"topRight\":{\"mode\":\"px\",\"value\":4},\"bottomRight\":{\"mode\":\"px\",\"value\":4},\"bottomLeft\":{\"mode\":\"px\",\"value\":4}} */\n  searchProps.borderRadius?: Record<string, any>;\n  onRowClick?: SbEventFlow;\n  onSaveChanges?: SbEventFlow;\n  onCancelChanges?: SbEventFlow;\n  onRowSelected?: SbEventFlow;\n  onRowInserted?: SbEventFlow;\n  onRowDeleted?: SbEventFlow;\n  onPageChange?: SbEventFlow;\n  onFiltersChanged?: SbEventFlow;\n  onSearchTextChanged?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbTableComponentState {\n  /** @default [] */\n  tableDataWithInserts?: any;\n  /** @default [] */\n  tableDataWithInsertsOrderMap?: any;\n  /** @default null */\n  selectedRow?: any;\n  selectedRowSchema?: any;\n  /** @default [] */\n  selectedRows?: any;\n  /** @default 1 */\n  pageSize?: number;\n  filteredTableData?: any;\n  filteredOrderMap?: any;\n  /** @default {\"insertedRows\":[],\"updatedRows\":[],\"deletedRows\":[],\"originalRows\":[]} */\n  editedRows?: any;\n  /** @default [] */\n  allEdits?: any;\n  /** @default [] */\n  validationErrors?: any;\n  /** @default {\"deletedRows\":{\"absolute\":[],\"relative\":[]}} */\n  editedRowIndices?: any;\n}\n```\n";
 //# sourceMappingURL=SbTablePropsDocs.js.map

package/dist/ai-service/prompts/generated/library-components/SbTextPropsDocs.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbTextPropsDocs.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.961Z
+// Generated at: 2025-06-04T01:12:37.674Z
 export const content = "## SbText\n\nThe following is the type definition for the SbText component.\n\n```typescript\ninterface SbTextProps {\n  text?: string;\n  /** @default \"text\" */\n  textType?: string;\n  /** @default {\"variant\":\"label\",\"textColor\":{\"default\":\"#454D5F\"}} */\n  textStyle?: Record<string, any>;\n  /** @default \"left\" */\n  textAlign?: string;\n  /** @default \"center\" */\n  verticalAlign?: string;\n  /** @default true */\n  wrapText?: boolean;\n  animateLoading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default \"LEFT\" */\n  iconPosition?: string;\n  textType?: string;\n  /** @default \"USD\" */\n  currency?: string;\n  /** @default \"standard\" */\n  notation?: string;\n  /** @default 1 */\n  minimumFractionDigits?: number;\n  /** @default 2 */\n  maximumFractionDigits?: number;\n  dateInputFormat?: string;\n  dateOutputFormat?: string;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {\"top\":{\"mode\":\"px\",\"value\":0},\"bottom\":{\"mode\":\"px\",\"value\":0},\"left\":{\"mode\":\"px\",\"value\":0},\"right\":{\"mode\":\"px\",\"value\":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  collapseWhenInvisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n";
 //# sourceMappingURL=SbTextPropsDocs.js.map

package/dist/ai-service/prompts/generated/library-typedefs/Dim.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from Dim.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.965Z
+// Generated at: 2025-06-04T01:12:37.679Z
 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/prompts/generated/library-typedefs/SbEventFlow.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from SbEventFlow.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.965Z
+// Generated at: 2025-06-04T01:12:37.679Z
 export const content = "## SbEventFlow\n\nThe `SbEventFlow` 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 SbEventFlow {\n  // Run custom JavaScript code\n  static runJS(\n    handler: (s: ScopedState, additionalProps?: Record<string, any>) => void,\n  ): SbEventFlow;\n  runJS(\n    handler: (s: ScopedState, additionalProps?: Record<string, any>) => void,\n  ): this;\n\n  // Navigation methods\n  static navigateTo(props: { url: string; newWindow?: boolean }): SbEventFlow;\n  navigateTo(props: { url: string; newWindow?: boolean }): this;\n\n  static navigateToApp(appId: string): SbEventFlow;\n  navigateToApp(appId: string): this;\n\n  static navigateToRoute(route: string): SbEventFlow;\n  navigateToRoute(route: string): this;\n\n  static setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): SbEventFlow;\n  setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): this;\n\n  // Control UI components\n  static controlSlideout(\n    slideoutId: string,\n    action: \"open\" | \"close\",\n  ): SbEventFlow;\n  controlSlideout(slideoutId: string, action: \"open\" | \"close\"): this;\n\n  static controlModal(modalId: string, action: \"open\" | \"close\"): SbEventFlow;\n  controlModal(modalId: string, action: \"open\" | \"close\"): this;\n\n  static controlTimer(\n    timerId: string,\n    action: \"start\" | \"stop\" | \"toggle\",\n  ): SbEventFlow;\n  controlTimer(timerId: string, action: \"start\" | \"stop\" | \"toggle\"): this;\n\n  // API methods\n  static runApis(\n    apiNames: string[],\n    onSuccess?: SbEventFlow,\n    onError?: SbEventFlow,\n  ): SbEventFlow;\n  runApis(\n    apiNames: string[],\n    onSuccess?: SbEventFlow,\n    onError?: SbEventFlow,\n  ): this;\n\n  static cancelApis(apiNames: string[], onCancel?: SbEventFlow): SbEventFlow;\n  cancelApis(apiNames: string[], onCancel?: SbEventFlow): this;\n\n  // Component and state manipulation\n  static resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): SbEventFlow;\n  resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): this;\n\n  static resetStateVar(state: { name: string }): SbEventFlow;\n  resetStateVar(state: { name: string }): this;\n\n  static setStateVar(name: string, value: any): SbEventFlow;\n  setStateVar(name: string, value: any): this;\n\n  static setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): SbEventFlow;\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    alertType: \"info\" | \"success\" | \"warning\" | \"error\",\n  ): SbEventFlow;\n  showAlert(\n    message: string,\n    alertType: \"info\" | \"success\" | \"warning\" | \"error\",\n  ): this;\n\n  static setProfile(\n    profileId: string,\n    profileAction: \"set\" | \"unset\",\n  ): SbEventFlow;\n  setProfile(profileId: string, profileAction: \"set\" | \"unset\"): this;\n\n  static triggerEvent(\n    eventName: string,\n    eventData: Record<string, string>,\n  ): SbEventFlow;\n  triggerEvent(eventName: string, eventData: Record<string, string>): this;\n}\n```\n";
 //# sourceMappingURL=SbEventFlow.js.map

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

@@ -1,2 +1,2 @@
-export declare 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 page file where it is used and use the registerPage function along with SbApi to register the API with the application. An example follows in the next section.\n\n#### Example of creating and then registering a Superblocks API:\n\nCreating the API by adding the myApi.ts file:\n\n```ts\n// Path to this api: /pages/Page1/apis/myApi.ts\n\nimport { Api, JavaScript } 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 registering the myApi API inside the registerPage call, and executing it when an SbButton is clicked:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport { SbPage, SbApi, SbTable } from \"@superblocksteam/library\";\nimport { registerPage } from \"@superblocksteam/library\";\n\nimport MyExampleAPI from \"./apis/example\";\n\n// APIs are part of the state object just like components. Example inside the table component's tableData below.\n\nconst Page1 = () => (\n  <SbPage>\n    <SbButton\n      // APIs can be invoked with the SBEventFlow API.\n      onClick={SbEventFlow.runApis([\"myApi\"])}\n    />\n    <SbTable tableData={(state) => state.myApi.response} />\n  </SbPage>\n);\n\nexport default registerPage(Page1, {\n  name: \"Page1\",\n  // You register APIs just like you would SbVariables\n  myApi: SbApi(MyExampleAPI),\n});\n```\n\n#### Example 2: API where a step references the output of a previous step\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/getOrders.ts\n\nimport { JavaScript, Api } from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrders\", [\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 as normal in the page file inside the registerPage function call, same as the first example.\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 state object as the function parameter for dynamic block fields. The valid keys are (1) Superblocks entities (components, variables, etc) and (2) previous block outputs that are in the lexical scope. Example below:\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Do not reference variables that are not in scope. The ONLY things in scope in an API block are the outputs of previous steps and the state object.\n\n- Backend APIs CANNOT mutate frontend state inside of the API.\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";
+export declare 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.\n\n#### Example of creating and then registering a Superblocks API:\n\nCreating the API by adding the myApi.ts file:\n\n```ts\n// Path to this api: /pages/Page1/apis/myApi.ts\n\nimport { Api, JavaScript } 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 registering the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createSbScope(\n  {\n    // Register the API in the scope\n    myApi: SbApi({}),\n  },\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen using the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  SbPage,\n  SbButton,\n  SbTable,\n  sbComputed,\n  SbEventFlow,\n} from \"@superblocksteam/library\";\nimport { registerPage } from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  // Destructure the API from the scope entities\n  const { myApi } = Page1;\n\n  return (\n    <SbPage>\n      <SbButton\n        // APIs can be invoked with the SbEventFlow API\n        onClick={SbEventFlow.runApis([\"myApi\"])}\n        label=\"Fetch Data\"\n      />\n      {/* Access API response using sbComputed */}\n      <SbTable tableData={sbComputed(() => myApi.response)} />\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n#### Example 2: API where a step references the output of a previous step\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/getOrders.ts\n\nimport { JavaScript, Api } from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrders\", [\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\nimport getOrdersApi from \"./apis/getOrders\";\n\nexport const Page1Scope = createSbScope(\n  {\n    getOrders: SbApi({}),\n  },\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport { SbPage, SbTable, sbComputed } from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  const { getOrders } = Page1;\n\n  return (\n    <SbPage>\n      <SbTable tableData={sbComputed(() => getOrders.response)} />\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\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 state object as the function parameter for dynamic block fields. The valid keys are (1) Superblocks entities (components, variables, etc) and (2) previous block outputs that are in the lexical scope. Example below:\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Do not reference variables that are not in scope. The ONLY things in scope in an API block are the outputs of previous steps and the state object.\n\n- Backend APIs CANNOT mutate frontend state inside of the 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 `sbComputed(() => apiName.response)` or `sbComputed(() => 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.d.ts.map

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

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-api.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.960Z
-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 page file where it is used and use the registerPage function along with SbApi to register the API with the application. An example follows in the next section.\n\n#### Example of creating and then registering a Superblocks API:\n\nCreating the API by adding the myApi.ts file:\n\n```ts\n// Path to this api: /pages/Page1/apis/myApi.ts\n\nimport { Api, JavaScript } 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 registering the myApi API inside the registerPage call, and executing it when an SbButton is clicked:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport { SbPage, SbApi, SbTable } from \"@superblocksteam/library\";\nimport { registerPage } from \"@superblocksteam/library\";\n\nimport MyExampleAPI from \"./apis/example\";\n\n// APIs are part of the state object just like components. Example inside the table component's tableData below.\n\nconst Page1 = () => (\n  <SbPage>\n    <SbButton\n      // APIs can be invoked with the SBEventFlow API.\n      onClick={SbEventFlow.runApis([\"myApi\"])}\n    />\n    <SbTable tableData={(state) => state.myApi.response} />\n  </SbPage>\n);\n\nexport default registerPage(Page1, {\n  name: \"Page1\",\n  // You register APIs just like you would SbVariables\n  myApi: SbApi(MyExampleAPI),\n});\n```\n\n#### Example 2: API where a step references the output of a previous step\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/getOrders.ts\n\nimport { JavaScript, Api } from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrders\", [\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 as normal in the page file inside the registerPage function call, same as the first example.\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 state object as the function parameter for dynamic block fields. The valid keys are (1) Superblocks entities (components, variables, etc) and (2) previous block outputs that are in the lexical scope. Example below:\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Do not reference variables that are not in scope. The ONLY things in scope in an API block are the outputs of previous steps and the state object.\n\n- Backend APIs CANNOT mutate frontend state inside of the API.\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";
+// Generated at: 2025-06-04T01:12:37.673Z
+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.\n\n#### Example of creating and then registering a Superblocks API:\n\nCreating the API by adding the myApi.ts file:\n\n```ts\n// Path to this api: /pages/Page1/apis/myApi.ts\n\nimport { Api, JavaScript } 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 registering the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from \"@superblocksteam/library\";\n\nexport const Page1Scope = createSbScope(\n  {\n    // Register the API in the scope\n    myApi: SbApi({}),\n  },\n  {\n    name: \"Page1\",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen using the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  SbPage,\n  SbButton,\n  SbTable,\n  sbComputed,\n  SbEventFlow,\n} from \"@superblocksteam/library\";\nimport { registerPage } from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  // Destructure the API from the scope entities\n  const { myApi } = Page1;\n\n  return (\n    <SbPage>\n      <SbButton\n        // APIs can be invoked with the SbEventFlow API\n        onClick={SbEventFlow.runApis([\"myApi\"])}\n        label=\"Fetch Data\"\n      />\n      {/* Access API response using sbComputed */}\n      <SbTable tableData={sbComputed(() => myApi.response)} />\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n#### Example 2: API where a step references the output of a previous step\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/getOrders.ts\n\nimport { JavaScript, Api } from \"@superblocksteam/library\";\n\nexport default new Api(\"getOrders\", [\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\nimport getOrdersApi from \"./apis/getOrders\";\n\nexport const Page1Scope = createSbScope(\n  {\n    getOrders: SbApi({}),\n  },\n  {\n    name: \"Page1\",\n  },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport { SbPage, SbTable, sbComputed } from \"@superblocksteam/library\";\nimport { Page1, Page1Scope } from \"./scope\";\n\nconst Page1Component = () => {\n  const { getOrders } = Page1;\n\n  return (\n    <SbPage>\n      <SbTable tableData={sbComputed(() => getOrders.response)} />\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\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 state object as the function parameter for dynamic block fields. The valid keys are (1) Superblocks entities (components, variables, etc) and (2) previous block outputs that are in the lexical scope. Example below:\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Do not reference variables that are not in scope. The ONLY things in scope in an API block are the outputs of previous steps and the state object.\n\n- Backend APIs CANNOT mutate frontend state inside of the 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 `sbComputed(() => apiName.response)` or `sbComputed(() => 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/prompts/generated/subprompts/superblocks-api.js.map

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

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

@@ -1,2 +1,2 @@
-export declare 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- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\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: a 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 a SB binding. Example: SB`{{ theme.colors.neutral900 }}`, but also remember any time you use SB bindings to import SB from the library, example: import { SB } from '@superblocksteam/library;\n- When you see _SbEventFlow_, use the SbEventFlow builder\n- Import all components you use from '@superblocksteam/library'; Example: `import { SbContainer, SbButton, ... } 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- SbContainer has a default style of \"card\" if you want to remove the style, set the style to \"none\"\n";
+export declare 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- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\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: a 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 sbComputed. Example: sbComputed((s) => s.theme.colors.neutral900), and remember to import sbComputed from the library: import { sbComputed } from '@superblocksteam/library';\n- When you see _SbEventFlow_, use the SbEventFlow builder\n- Import all components you use from '@superblocksteam/library'; Example: `import { SbContainer, SbButton, sbComputed, ... } 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- SbContainer 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 `sbComputed` with the correct pattern:\n  - For scope entities (variables, APIs): `sbComputed(() => entityName.value)` (direct access)\n  - For bound components: `sbComputed(() => ComponentName.property)` (direct access after binding)\n  - For global state (theme, globals): `sbComputed((s) => s.theme.colors.primary)` (state parameter access)\n";
 //# sourceMappingURL=superblocks-components-rules.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"superblocks-components-rules.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-components-rules.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,u8CAAu8C,CAAC"}
+{"version":3,"file":"superblocks-components-rules.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-components-rules.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,+0DAA+0D,CAAC"}

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-components-rules.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.959Z
-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- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\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: a 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 a SB binding. Example: SB`{{ theme.colors.neutral900 }}`, but also remember any time you use SB bindings to import SB from the library, example: import { SB } from '@superblocksteam/library;\n- When you see _SbEventFlow_, use the SbEventFlow builder\n- Import all components you use from '@superblocksteam/library'; Example: `import { SbContainer, SbButton, ... } 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- SbContainer has a default style of \"card\" if you want to remove the style, set the style to \"none\"\n";
+// Generated at: 2025-06-04T01:12:37.672Z
+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- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\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: a 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 sbComputed. Example: sbComputed((s) => s.theme.colors.neutral900), and remember to import sbComputed from the library: import { sbComputed } from '@superblocksteam/library';\n- When you see _SbEventFlow_, use the SbEventFlow builder\n- Import all components you use from '@superblocksteam/library'; Example: `import { SbContainer, SbButton, sbComputed, ... } 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- SbContainer 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 `sbComputed` with the correct pattern:\n  - For scope entities (variables, APIs): `sbComputed(() => entityName.value)` (direct access)\n  - For bound components: `sbComputed(() => ComponentName.property)` (direct access after binding)\n  - For global state (theme, globals): `sbComputed((s) => s.theme.colors.primary)` (state parameter access)\n";
 //# sourceMappingURL=superblocks-components-rules.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"superblocks-components-rules.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-components-rules.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,sDAAsD;AACtD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,o8CAAo8C,CAAC"}
+{"version":3,"file":"superblocks-components-rules.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-components-rules.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,sDAAsD;AACtD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,40DAA40D,CAAC"}

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

@@ -1,2 +1,2 @@
-export declare 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\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)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: \"Your Label\" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\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 use custom components\n\n- If a user asks for something by name, like showing \"metrics\", and you do not find a \"metrics\" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-dedsigned templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you shold NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SBContainer component to layout the metrics in a row\n- We use the SBText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SBIcon component to show nice icons that make sense for the metric\n- We create a little \"badge\" using the SBContainer component to show smaqll annotation text. Prefer this over using brackets in the main heading text. Example: Rather than \"32 (2m)\" we use \"32\" in the main heading text and then a badge with the \"2m\" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport { SBIcon, SBText, SBContainer, SB } from \"@superblocksteam/library\";\n\n<SbContainer\n  layout=\"horizontal\"\n  name=\"HeroStatSection\"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant=\"none\"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout=\"vertical\"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant=\"card\"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"space-between\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"Avg delivery time (min)\"\n        textStyle={{\n          variant: \"body2\",\n          textColor: {\n            default: SB`{{ theme.colors.neutral500 }}`,\n          },\n        }}\n      />\n      <SbIcon icon=\"route\" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"left\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"32\"\n        textStyle={{\n          variant: \"heading1\",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered \"good\" (lower delivery time is better) */}\n      <SbContainer\n        layout=\"horizontal\"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant=\"none\"\n        spacing={Dim.px(2)}\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        backgroundColor=\"#c4e1af\"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon=\"arrow_downward_alt\"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text=\"2m\"\n          width={Dim.fit()}\n          textStyle={{\n            variant: \"body2\",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n";
+export declare 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\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)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: \"Your Label\" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\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 use custom components\n\n- If a user asks for something by name, like showing \"metrics\", and you do not find a \"metrics\" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-designed templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you should NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SbContainer component to layout the metrics in a row\n- We use the SbText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SbIcon component to show nice icons that make sense for the metric\n- We create a little \"badge\" using the SbContainer component to show small annotation text. Prefer this over using brackets in the main heading text. Example: Rather than \"32 (2m)\" we use \"32\" in the main heading text and then a badge with the \"2m\" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport {\n  SbIcon,\n  SbText,\n  SbContainer,\n  sbComputed,\n  Dim,\n} from \"@superblocksteam/library\";\n\n<SbContainer\n  layout=\"horizontal\"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant=\"none\"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout=\"vertical\"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant=\"card\"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"space-between\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"Avg delivery time (min)\"\n        textStyle={{\n          variant: \"body2\",\n          textColor: {\n            default: sbComputed((s) => s.theme.colors.neutral500),\n          },\n        }}\n      />\n      <SbIcon icon=\"route\" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"left\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"32\"\n        textStyle={{\n          variant: \"heading1\",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered \"good\" (lower delivery time is better) */}\n      <SbContainer\n        layout=\"horizontal\"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant=\"none\"\n        spacing={Dim.px(2)}\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        backgroundColor=\"#c4e1af\"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon=\"arrow_downward_alt\"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text=\"2m\"\n          width={Dim.fit()}\n          textStyle={{\n            variant: \"body2\",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n";
 //# sourceMappingURL=superblocks-custom-components.d.ts.map

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

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-custom-components.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.959Z
-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\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()`, `.writable()` — Control read/write capabilities.\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 use custom components\n\n- If a user asks for something by name, like showing \"metrics\", and you do not find a \"metrics\" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-dedsigned templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you shold NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SBContainer component to layout the metrics in a row\n- We use the SBText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SBIcon component to show nice icons that make sense for the metric\n- We create a little \"badge\" using the SBContainer component to show smaqll annotation text. Prefer this over using brackets in the main heading text. Example: Rather than \"32 (2m)\" we use \"32\" in the main heading text and then a badge with the \"2m\" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport { SBIcon, SBText, SBContainer, SB } from \"@superblocksteam/library\";\n\n<SbContainer\n  layout=\"horizontal\"\n  name=\"HeroStatSection\"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant=\"none\"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout=\"vertical\"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant=\"card\"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"space-between\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"Avg delivery time (min)\"\n        textStyle={{\n          variant: \"body2\",\n          textColor: {\n            default: SB`{{ theme.colors.neutral500 }}`,\n          },\n        }}\n      />\n      <SbIcon icon=\"route\" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"left\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"32\"\n        textStyle={{\n          variant: \"heading1\",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered \"good\" (lower delivery time is better) */}\n      <SbContainer\n        layout=\"horizontal\"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant=\"none\"\n        spacing={Dim.px(2)}\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        backgroundColor=\"#c4e1af\"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon=\"arrow_downward_alt\"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text=\"2m\"\n          width={Dim.fit()}\n          textStyle={{\n            variant: \"body2\",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n";
+// Generated at: 2025-06-04T01:12:37.672Z
+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\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()`, `.writable()` — Control read/write capabilities.\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 use custom components\n\n- If a user asks for something by name, like showing \"metrics\", and you do not find a \"metrics\" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-designed templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you should NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SbContainer component to layout the metrics in a row\n- We use the SbText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SbIcon component to show nice icons that make sense for the metric\n- We create a little \"badge\" using the SbContainer component to show small annotation text. Prefer this over using brackets in the main heading text. Example: Rather than \"32 (2m)\" we use \"32\" in the main heading text and then a badge with the \"2m\" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport {\n  SbIcon,\n  SbText,\n  SbContainer,\n  sbComputed,\n  Dim,\n} from \"@superblocksteam/library\";\n\n<SbContainer\n  layout=\"horizontal\"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant=\"none\"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout=\"vertical\"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant=\"card\"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"space-between\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"Avg delivery time (min)\"\n        textStyle={{\n          variant: \"body2\",\n          textColor: {\n            default: sbComputed((s) => s.theme.colors.neutral500),\n          },\n        }}\n      />\n      <SbIcon icon=\"route\" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout=\"horizontal\"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant=\"none\"\n      horizontalAlign=\"left\"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text=\"32\"\n        textStyle={{\n          variant: \"heading1\",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered \"good\" (lower delivery time is better) */}\n      <SbContainer\n        layout=\"horizontal\"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant=\"none\"\n        spacing={Dim.px(2)}\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        backgroundColor=\"#c4e1af\"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon=\"arrow_downward_alt\"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text=\"2m\"\n          width={Dim.fit()}\n          textStyle={{\n            variant: \"body2\",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n";
 //# sourceMappingURL=superblocks-custom-components.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"superblocks-custom-components.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-custom-components.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,uDAAuD;AACvD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,+kPAA+kP,CAAC"}
+{"version":3,"file":"superblocks-custom-components.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-custom-components.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,uDAAuD;AACvD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,2lPAA2lP,CAAC"}

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

@@ -1,2 +1,2 @@
-export declare const content = "# Event handlers with SbEventFlow\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 SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from \"@superblocksteam/library\";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\n<SbButton onClick={SbEventFlow.setStateVar(\"isReady\", true)} />\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` 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 SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: \"active\" }, true)\n    .setStateVar(\"isReady\", true)\n    .controlModal(\"loginModal\", \"close\")\n\n    // run APIs allows you to run Superblocks APIs by name\n    // Each runAPIs call executes the list of APIs supplied in parallel\n    .runApis([\"getUserData\", \"getPermissions\"])\n\n    // set a state variable's value\n    .showAlert(\"Workflow complete\", \"success\")\n    .navigateTo({ url: \"/dashboard\", newWindow: false })}\n/>\n```\n\n#### Using RunJS (only when neeeded)\n\n`SbEventFlow` 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 SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won't work!\n\nExample:\n\n```jsx\n<SbButton\n  label=\"Enable\"\n  buttonStyle={\"SECONDARY_BUTTON\"}\n  onClick={SbEventFlow.runJS((s) => {\n    if (s.App.isUserAdmin) {\n      s.myStateVar.enabled = true;\n      s.myModal.isOpen = false;\n    } else {\n      console.log(\"This user was not an admin\");\n    }\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### SbEvent Flow Usage Examples\n\n```typescript\n// Navigation example\nSbEventFlow.navigateTo({ url: \"https://example.com\", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal(\"myModal\", \"open\");\n\n// State management example\nSbEventFlow.setStateVar(\"userProfile\", { name: \"John\", role: \"Admin\" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([\"fetchUserData\"])\n  .setComponentProperty(\n    { id: \"userTable\" },\n    \"tableData\",\n    \"{{fetchUserData.data}}\",\n  )\n  .showAlert(\"Data loaded successfully\", \"success\");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert(\"Success!\", \"success\");\n\nconst errorFlow = SbEventFlow.showAlert(\"An error occurred\", \"error\");\n\nSbEventFlow.runApis([\"saveUserData\"], successFlow, errorFlow);\n```\n";
+export declare const content = "# Event handlers with SbEventFlow\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 SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from \"@superblocksteam/library\";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\n<SbButton onClick={SbEventFlow.setStateVar(\"isReady\", true)} />\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` 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 SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: \"active\" }, true)\n    .setStateVar(\"isReady\", true)\n    .controlModal(\"loginModal\", \"close\")\n\n    // run APIs allows you to run Superblocks APIs by name\n    // Each runAPIs call executes the list of APIs supplied in parallel\n    .runApis([\"getUserData\", \"getPermissions\"])\n\n    // set a state variable's value\n    .showAlert(\"Workflow complete\", \"success\")\n    .navigateTo({ url: \"/dashboard\", newWindow: false })}\n/>\n```\n\n#### Using RunJS (only when needed)\n\n`SbEventFlow` 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 SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won't work!\n- **State access in runJS**: Scope entities are accessible directly by their names, but global state requires the state parameter.\n\nExample accessing scope entities:\n\n```jsx\n<SbButton\n  label=\"Enable\"\n  buttonStyle={\"SECONDARY_BUTTON\"}\n  onClick={SbEventFlow.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<SbButton\n  label=\"Personalized Action\"\n  onClick={SbEventFlow.runJS((s) => {\n    // Use state parameter for global access\n    if (s.Global.user.role === \"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 ${s.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### SbEvent Flow Usage Examples\n\n```typescript\nimport { SbEventFlow, sbComputed } from \"@superblocksteam/library\";\nimport { Page1 } from \"./scope\";\n\nconst { fetchUserData, saveUserData, userDataVariable } = Page1;\n\n// Navigation example\nSbEventFlow.navigateTo({ url: \"https://example.com\", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal(\"myModal\", \"open\");\n\n// State management example\nSbEventFlow.setStateVar(\"userProfile\", { name: \"John\", role: \"Admin\" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    sbComputed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert(\"Data loaded successfully\", \"success\");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert(\"Success!\", \"success\");\n\nconst errorFlow = SbEventFlow.showAlert(\"An error occurred\", \"error\");\n\nSbEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n";
 //# sourceMappingURL=superblocks-event-flow.d.ts.map

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

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Auto-generated from superblocks-event-flow.md
 // Do not edit this file directly
-// Generated at: 2025-06-03T14:23:19.959Z
-export const content = "# Event handlers with SbEventFlow\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 SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from \"@superblocksteam/library\";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\n<SbButton onClick={SbEventFlow.setStateVar(\"isReady\", true)} />\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` 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 SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: \"active\" }, true)\n    .setStateVar(\"isReady\", true)\n    .controlModal(\"loginModal\", \"close\")\n\n    // run APIs allows you to run Superblocks APIs by name\n    // Each runAPIs call executes the list of APIs supplied in parallel\n    .runApis([\"getUserData\", \"getPermissions\"])\n\n    // set a state variable's value\n    .showAlert(\"Workflow complete\", \"success\")\n    .navigateTo({ url: \"/dashboard\", newWindow: false })}\n/>\n```\n\n#### Using RunJS (only when neeeded)\n\n`SbEventFlow` 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 SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won't work!\n\nExample:\n\n```jsx\n<SbButton\n  label=\"Enable\"\n  buttonStyle={\"SECONDARY_BUTTON\"}\n  onClick={SbEventFlow.runJS((s) => {\n    if (s.App.isUserAdmin) {\n      s.myStateVar.enabled = true;\n      s.myModal.isOpen = false;\n    } else {\n      console.log(\"This user was not an admin\");\n    }\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### SbEvent Flow Usage Examples\n\n```typescript\n// Navigation example\nSbEventFlow.navigateTo({ url: \"https://example.com\", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal(\"myModal\", \"open\");\n\n// State management example\nSbEventFlow.setStateVar(\"userProfile\", { name: \"John\", role: \"Admin\" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([\"fetchUserData\"])\n  .setComponentProperty(\n    { id: \"userTable\" },\n    \"tableData\",\n    \"{{fetchUserData.data}}\",\n  )\n  .showAlert(\"Data loaded successfully\", \"success\");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert(\"Success!\", \"success\");\n\nconst errorFlow = SbEventFlow.showAlert(\"An error occurred\", \"error\");\n\nSbEventFlow.runApis([\"saveUserData\"], successFlow, errorFlow);\n```\n";
+// Generated at: 2025-06-04T01:12:37.672Z
+export const content = "# Event handlers with SbEventFlow\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 SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from \"@superblocksteam/library\";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\n<SbButton onClick={SbEventFlow.setStateVar(\"isReady\", true)} />\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` 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 SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: \"active\" }, true)\n    .setStateVar(\"isReady\", true)\n    .controlModal(\"loginModal\", \"close\")\n\n    // run APIs allows you to run Superblocks APIs by name\n    // Each runAPIs call executes the list of APIs supplied in parallel\n    .runApis([\"getUserData\", \"getPermissions\"])\n\n    // set a state variable's value\n    .showAlert(\"Workflow complete\", \"success\")\n    .navigateTo({ url: \"/dashboard\", newWindow: false })}\n/>\n```\n\n#### Using RunJS (only when needed)\n\n`SbEventFlow` 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 SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won't work!\n- **State access in runJS**: Scope entities are accessible directly by their names, but global state requires the state parameter.\n\nExample accessing scope entities:\n\n```jsx\n<SbButton\n  label=\"Enable\"\n  buttonStyle={\"SECONDARY_BUTTON\"}\n  onClick={SbEventFlow.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<SbButton\n  label=\"Personalized Action\"\n  onClick={SbEventFlow.runJS((s) => {\n    // Use state parameter for global access\n    if (s.Global.user.role === \"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 ${s.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### SbEvent Flow Usage Examples\n\n```typescript\nimport { SbEventFlow, sbComputed } from \"@superblocksteam/library\";\nimport { Page1 } from \"./scope\";\n\nconst { fetchUserData, saveUserData, userDataVariable } = Page1;\n\n// Navigation example\nSbEventFlow.navigateTo({ url: \"https://example.com\", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal(\"myModal\", \"open\");\n\n// State management example\nSbEventFlow.setStateVar(\"userProfile\", { name: \"John\", role: \"Admin\" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    sbComputed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert(\"Data loaded successfully\", \"success\");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert(\"Success!\", \"success\");\n\nconst errorFlow = SbEventFlow.showAlert(\"An error occurred\", \"error\");\n\nSbEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n";
 //# sourceMappingURL=superblocks-event-flow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"superblocks-event-flow.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-event-flow.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,gDAAgD;AAChD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,gsGAAgsG,CAAC"}
+{"version":3,"file":"superblocks-event-flow.js","sourceRoot":"","sources":["../../../../../src/ai-service/prompts/generated/subprompts/superblocks-event-flow.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,gDAAgD;AAChD,iCAAiC;AACjC,yCAAyC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,oqIAAoqI,CAAC"}

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

@@ -1,2 +1,2 @@
-export declare const content = "### Layout and Sizing in Superblocks\n\nAll layouts in Superblocks are configured through the `SbContainer` component.  \n`SbContainer` provides both layout and optional visual styling.\n\n```jsx\n<SbContainer\n  variant=\"card\" | \"none\" // default is \"none\"\n  layout=\"vertical\" | \"horizontal\" | \"freeform\" // default is \"vertical\"\n>\n  {/* Children here */}\n</SbContainer>\n```\n\nWe have three main layout options in Superblocks:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Stacks for most use cases.\n\nThe `variant` prop is optional and can be set to `\"card\"` or `\"none\"`. Default is `\"none\"`.\n`\"card\"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<SbText name=\"Text1\" width={Dim.px(2)}>Hello</SbText>   // 2 pixels\n<SbText name=\"Text1\" width={Dim.fit()}>Hello</SbText>   // Fit to content (default)\n<SbText name=\"Text1\" width={Dim.fill()}>Hello</SbText>  // Fill available space, no weight (aka 1)\n<SbText name=\"Text1\" width={Dim.fill(2)}>Hello</SbText> // Fill available space, with weight of 2\n```\n\n---\n\n### Import Location\n\n```ts\nimport { Dim } from \"@superblocksteam/library\";\n```\n";
+export declare const content = "### Layout and Sizing in Superblocks\n\nAll layouts in Superblocks are configured through the `SbContainer` component.  \n`SbContainer` provides both layout and optional visual styling.\n\n```jsx\n<SbContainer\n  variant=\"card\" | \"none\" // default is \"none\"\n  layout=\"vertical\" | \"horizontal\" | \"freeform\" // default is \"vertical\"\n>\n  {/* Children here */}\n</SbContainer>\n```\n\nWe have three main layout options in Superblocks:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Stacks for most use cases.\n\nThe `variant` prop is optional and can be set to `\"card\"` or `\"none\"`. Default is `\"none\"`.\n`\"card\"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<SbText width={Dim.px(2)}>Hello</SbText>   // 2 pixels\n<SbText width={Dim.fit()}>Hello</SbText>   // Fit to content (default)\n<SbText width={Dim.fill()}>Hello</SbText>  // Fill available space, no weight (aka 1)\n<SbText width={Dim.fill(2)}>Hello</SbText> // Fill available space, with weight of 2\n```\n";
 //# sourceMappingURL=superblocks-layouts.d.ts.map

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

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