robobyte-front-builder 1.0.0

package/src/views/builder/inspector/definitions/header/main.js

@@ -0,0 +1,29 @@
+export const HEADER_MAIN_FIELDS = [
+  { name: 'text', label: 'Text', type: 'expression' },
+  {
+    name: 'variant',
+    label: 'Variant',
+    type: 'select',
+    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+  },
+  {
+    name: 'component',
+    label: 'Component',
+    type: 'select',
+    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span']
+  },
+  {
+    name: 'color',
+    label: 'Color',
+    type: 'select',
+    options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success', 'textPrimary', 'textSecondary']
+  },
+  {
+    name: 'align',
+    label: 'Align',
+    type: 'select',
+    options: ['left', 'center', 'right', 'justify']
+  },
+  { name: 'gutterBottom', label: 'Gutter Bottom', type: 'boolean' },
+  { name: 'noWrap', label: 'No Wrap', type: 'boolean' }
+]

package/src/views/builder/inspector/definitions/header/rules.js

@@ -0,0 +1,4 @@
+export const HEADER_RULES_FIELDS = [
+  { name: 'visible', label: 'Visible', type: 'expression' },
+  { name: 'tooltip', label: 'Tooltip', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/header/style.js

@@ -0,0 +1,12 @@
+export const HEADER_STYLE_FIELDS = [
+  { name: 'display', label: 'Display', type: 'expression' },
+  { name: 'width', label: 'Width', type: 'expression' },
+  { name: 'height', label: 'Height', type: 'expression' },
+  { name: 'margin', label: 'Margin', type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' },
+  { name: 'fontSize', label: 'Font Size', type: 'expression' },
+  { name: 'fontWeight', label: 'Font Weight', type: 'expression' },
+  { name: 'lineHeight', label: 'Line Height', type: 'expression' },
+  { name: 'letterSpacing', label: 'Letter Spacing', type: 'expression' },
+  { name: 'textTransform', label: 'Text Transform', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/header-cell/main.js

@@ -0,0 +1,5 @@
+export const HEADER_CELL_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+  { name: 'label', label: 'Label', type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/image/actions.js

@@ -0,0 +1 @@
+export const IMAGE_ACTIONS_FIELDS = []

package/src/views/builder/inspector/definitions/image/main.js

@@ -0,0 +1,13 @@
+export const IMAGE_MAIN_FIELDS = [
+  { name: 'src', label: 'Source URL', type: 'expression' },
+  { name: 'alt', label: 'Alt Text', type: 'expression' },
+  { name: 'width', label: 'Width', type: 'expression' },
+  { name: 'height', label: 'Height', type: 'expression' },
+  {
+    name: 'objectFit',
+    label: 'Object Fit',
+    type: 'select',
+    options: ['cover', 'contain', 'fill', 'none', 'scale-down']
+  },
+  { name: 'borderRadius', label: 'Border Radius', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/image/rules.js

@@ -0,0 +1,4 @@
+export const IMAGE_RULES_FIELDS = [
+  { name: 'visible', label: 'Visible', type: 'expression' },
+  { name: 'tooltip', label: 'Tooltip', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/image/style.js

@@ -0,0 +1,12 @@
+export const IMAGE_STYLE_FIELDS = [
+  { name: 'display', label: 'Display', type: 'expression' },
+  { name: 'width', label: 'Width', type: 'expression' },
+  { name: 'height', label: 'Height', type: 'expression' },
+  { name: 'maxWidth', label: 'Max Width', type: 'expression' },
+  { name: 'maxHeight', label: 'Max Height', type: 'expression' },
+  { name: 'margin', label: 'Margin', type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' },
+  { name: 'border', label: 'Border', type: 'expression' },
+  { name: 'borderRadius', label: 'Border Radius', type: 'expression' },
+  { name: 'boxShadow', label: 'Box Shadow', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/index.js

@@ -0,0 +1,407 @@
+// Import from component folders
+import { COMMON_MAIN_FIELDS } from './common/main'
+import { COMMON_STYLE_FIELDS } from './common/style'
+import { COMMON_RULES_FIELDS } from './common/rules'
+import { COMMON_ACTIONS_FIELDS } from './common/actions'
+
+import { BUTTON_MAIN_FIELDS } from './button/main'
+import { BUTTON_STYLE_FIELDS } from './button/style'
+import { BUTTON_RULES_FIELDS } from './button/rules'
+import { BUTTON_ACTION_FIELDS } from './button/actions'
+
+import { INPUT_MAIN_FIELDS } from './input/main'
+import { INPUT_STYLE_FIELDS } from './input/style'
+import { INPUT_RULES_FIELDS } from './input/rules'
+import { INPUT_ACTIONS_FIELDS } from './input/actions'
+
+import { CHECKBOX_MAIN_FIELDS } from './checkbox/main'
+import { CHECKBOX_STYLE_FIELDS } from './checkbox/style'
+import { CHECKBOX_RULES_FIELDS } from './checkbox/rules'
+import { CHECKBOX_ACTIONS_FIELDS } from './checkbox/actions'
+
+import { DATEPICKER_MAIN_FIELDS } from './datepicker/main'
+import { DATEPICKER_STYLE_FIELDS } from './datepicker/style'
+import { DATEPICKER_RULES_FIELDS } from './datepicker/rules'
+import { DATEPICKER_ACTIONS_FIELDS } from './datepicker/actions'
+
+import { CONTAINER_MAIN_FIELDS } from './container/main'
+import { CONTAINER_STYLE_FIELDS } from './container/style'
+import { CONTAINER_RULES_FIELDS } from './container/rules'
+import { CONTAINER_ACTIONS_FIELDS } from './container/actions'
+
+import { DROPDOWN_MAIN_FIELDS } from './dropdown/main'
+import { DROPDOWN_STYLE_FIELDS } from './dropdown/style'
+import { DROPDOWN_RULES_FIELDS } from './dropdown/rules'
+import { DROPDOWN_ACTIONS_FIELDS } from './dropdown/actions'
+
+import { NUMBER_MAIN_FIELDS } from './number/main'
+import { NUMBER_STYLE_FIELDS } from './number/style'
+import { NUMBER_RULES_FIELDS } from './number/rules'
+import { NUMBER_ACTIONS_FIELDS } from './number/actions'
+
+import { RADIO_MAIN_FIELDS } from './radio/main'
+import { RADIO_STYLE_FIELDS } from './radio/style'
+import { RADIO_RULES_FIELDS } from './radio/rules'
+import { RADIO_ACTIONS_FIELDS } from './radio/actions'
+
+import { RICHTEXT_MAIN_FIELDS } from './richtext/main'
+import { RICHTEXT_STYLE_FIELDS } from './richtext/style'
+import { RICHTEXT_RULES_FIELDS } from './richtext/rules'
+import { RICHTEXT_ACTIONS_FIELDS } from './richtext/actions'
+
+import { TAG_MAIN_FIELDS } from './tag/main'
+import { TAG_STYLE_FIELDS } from './tag/style'
+import { TAG_RULES_FIELDS } from './tag/rules'
+import { TAG_ACTIONS_FIELDS } from './tag/actions'
+
+import { TIME_MAIN_FIELDS } from './time/main'
+import { TIME_STYLE_FIELDS } from './time/style'
+import { TIME_RULES_FIELDS } from './time/rules'
+import { TIME_ACTIONS_FIELDS } from './time/actions'
+
+import { TEXTAREA_MAIN_FIELDS } from './textarea/main'
+import { TEXTAREA_STYLE_FIELDS } from './textarea/style'
+import { TEXTAREA_RULES_FIELDS } from './textarea/rules'
+import { TEXTAREA_ACTIONS_FIELDS } from './textarea/actions'
+
+import { SIGNATURE_MAIN_FIELDS } from './signature/main'
+import { SIGNATURE_STYLE_FIELDS } from './signature/style'
+import { SIGNATURE_RULES_FIELDS } from './signature/rules'
+import { SIGNATURE_ACTIONS_FIELDS } from './signature/actions'
+
+import { LABEL_MAIN_FIELDS } from './label/main'
+import { LABEL_STYLE_FIELDS } from './label/style'
+import { LABEL_RULES_FIELDS } from './label/rules'
+import { LABEL_ACTIONS_FIELDS } from './label/actions'
+
+import { DIVIDER_MAIN_FIELDS } from './divider/main'
+import { DIVIDER_STYLE_FIELDS } from './divider/style'
+import { DIVIDER_RULES_FIELDS } from './divider/rules'
+import { DIVIDER_ACTIONS_FIELDS } from './divider/actions'
+
+import { HEADER_MAIN_FIELDS } from './header/main'
+import { HEADER_STYLE_FIELDS } from './header/style'
+import { HEADER_RULES_FIELDS } from './header/rules'
+import { HEADER_ACTIONS_FIELDS } from './header/actions'
+
+import { IMAGE_MAIN_FIELDS } from './image/main'
+import { IMAGE_STYLE_FIELDS } from './image/style'
+import { IMAGE_RULES_FIELDS } from './image/rules'
+import { IMAGE_ACTIONS_FIELDS } from './image/actions'
+
+import { LINK_MAIN_FIELDS } from './link/main'
+import { LINK_STYLE_FIELDS } from './link/style'
+import { LINK_RULES_FIELDS } from './link/rules'
+import { LINK_ACTIONS_FIELDS } from './link/actions'
+
+import { MENU_MAIN_FIELDS } from './menu/main'
+import { MENU_STYLE_FIELDS } from './menu/style'
+import { MENU_RULES_FIELDS } from './menu/rules'
+import { MENU_ACTIONS_FIELDS } from './menu/actions'
+
+import { PROGRESS_CIRCLE_MAIN_FIELDS } from './progress-circle/main'
+import { PROGRESS_CIRCLE_STYLE_FIELDS } from './progress-circle/style'
+import { PROGRESS_CIRCLE_RULES_FIELDS } from './progress-circle/rules'
+import { PROGRESS_CIRCLE_ACTIONS_FIELDS } from './progress-circle/actions'
+
+import { PROGRESS_LINE_MAIN_FIELDS } from './progress-line/main'
+import { PROGRESS_LINE_STYLE_FIELDS } from './progress-line/style'
+import { PROGRESS_LINE_RULES_FIELDS } from './progress-line/rules'
+import { PROGRESS_LINE_ACTIONS_FIELDS } from './progress-line/actions'
+
+import { CARD_MAIN_FIELDS } from './card/main'
+import { COLUMN_MAIN_FIELDS } from './column/main'
+import { COLUMN_GROUP_MAIN_FIELDS } from './column-group/main'
+import { CELL_MAIN_FIELDS } from './cell/main'
+import { HEADER_CELL_MAIN_FIELDS } from './header-cell/main'
+import { BREADCRUMB_MAIN_FIELDS } from './breadcrumb/main'
+import { TABLE_MAIN_FIELDS } from './table/main'
+import { REPORT_VIEWER_MAIN_FIELDS } from './reportViewer/main'
+import { AUTOCOMPLETE_MAIN_FIELDS } from './autocomplete/main'
+
+import { LAYOUT_MAIN_FIELDS } from './layout/main'
+import { LAYOUT_STYLE_FIELDS } from './layout/style'
+import { LAYOUT_RULES_FIELDS } from './layout/rules'
+import { LAYOUT_ACTIONS_FIELDS } from './layout/actions'
+
+import { LAYOUT_CELL_MAIN_FIELDS } from './layout-cell/main'
+import { LAYOUT_CELL_STYLE_FIELDS } from './layout-cell/style'
+import { LAYOUT_CELL_RULES_FIELDS } from './layout-cell/rules'
+import { LAYOUT_CELL_ACTIONS_FIELDS } from './layout-cell/actions'
+
+const GLOBAL_STYLE_FIELDS = [
+  { name: 'elementCss', label: 'Element Css', type: 'expression' },
+  { name: 'elementStyle', label: 'Element Style', type: 'expression' }
+]
+
+function withGlobalStyleFields(fields) {
+  const safeFields = Array.isArray(fields) ? fields : []
+  const existingFieldNames = new Set(safeFields.map(field => field?.name))
+  const missingGlobalFields = GLOBAL_STYLE_FIELDS.filter(field => !existingFieldNames.has(field.name))
+  return [...safeFields, ...missingGlobalFields]
+}
+
+export function getMainFields(type) {
+  switch (type) {
+    case 'input':
+      return INPUT_MAIN_FIELDS
+    case 'checkbox':
+      return CHECKBOX_MAIN_FIELDS
+    case 'button':
+      return BUTTON_MAIN_FIELDS
+    case 'datepicker':
+      return DATEPICKER_MAIN_FIELDS
+    case 'dropdown':
+      return DROPDOWN_MAIN_FIELDS
+    case 'radio':
+      return RADIO_MAIN_FIELDS
+    case 'number':
+      return NUMBER_MAIN_FIELDS
+    case 'richtext':
+      return RICHTEXT_MAIN_FIELDS
+    case 'tag':
+      return TAG_MAIN_FIELDS
+    case 'time':
+      return TIME_MAIN_FIELDS
+    case 'textarea':
+      return TEXTAREA_MAIN_FIELDS
+    case 'signature':
+      return SIGNATURE_MAIN_FIELDS
+    case 'label':
+      return LABEL_MAIN_FIELDS
+    case 'divider':
+      return DIVIDER_MAIN_FIELDS
+    case 'header':
+      return HEADER_MAIN_FIELDS
+    case 'image':
+      return IMAGE_MAIN_FIELDS
+    case 'link':
+      return LINK_MAIN_FIELDS
+    case 'menu':
+      return MENU_MAIN_FIELDS
+    case 'progress-circle':
+      return PROGRESS_CIRCLE_MAIN_FIELDS
+    case 'progress-line':
+      return PROGRESS_LINE_MAIN_FIELDS
+    case 'card':
+      return CARD_MAIN_FIELDS
+    case 'column':
+      return COLUMN_MAIN_FIELDS
+    case 'column-group':
+      return COLUMN_GROUP_MAIN_FIELDS
+    case 'cell':
+      return CELL_MAIN_FIELDS
+    case 'header-cell':
+      return HEADER_CELL_MAIN_FIELDS
+    case 'breadcrumb':
+      return BREADCRUMB_MAIN_FIELDS
+    case 'table':
+      return TABLE_MAIN_FIELDS
+    case 'tab':
+    case 'wizard':
+    case 'wizard-step':
+    case 'repeater':
+      return COMMON_MAIN_FIELDS
+    case 'reportViewer':
+      return REPORT_VIEWER_MAIN_FIELDS
+    case 'autocomplete':
+      return AUTOCOMPLETE_MAIN_FIELDS
+    case 'layout':
+      return LAYOUT_MAIN_FIELDS
+    case 'layout-cell':
+      return LAYOUT_CELL_MAIN_FIELDS
+    case 'container':
+      return CONTAINER_MAIN_FIELDS
+    default:
+      return COMMON_MAIN_FIELDS
+  }
+}
+
+export function getStyleFields(type) {
+  let styleFields
+
+  switch (type) {
+    case 'input':
+      styleFields = INPUT_STYLE_FIELDS
+      break
+    case 'checkbox':
+      styleFields = CHECKBOX_STYLE_FIELDS
+      break
+    case 'button':
+      styleFields = BUTTON_STYLE_FIELDS
+      break
+    case 'datepicker':
+      styleFields = DATEPICKER_STYLE_FIELDS
+      break
+    case 'dropdown':
+      styleFields = DROPDOWN_STYLE_FIELDS
+      break
+    case 'radio':
+      styleFields = RADIO_STYLE_FIELDS
+      break
+    case 'number':
+      styleFields = NUMBER_STYLE_FIELDS
+      break
+    case 'richtext':
+      styleFields = RICHTEXT_STYLE_FIELDS
+      break
+    case 'tag':
+      styleFields = TAG_STYLE_FIELDS
+      break
+    case 'time':
+      styleFields = TIME_STYLE_FIELDS
+      break
+    case 'textarea':
+      styleFields = TEXTAREA_STYLE_FIELDS
+      break
+    case 'signature':
+      styleFields = SIGNATURE_STYLE_FIELDS
+      break
+    case 'label':
+      styleFields = LABEL_STYLE_FIELDS
+      break
+    case 'divider':
+      styleFields = DIVIDER_STYLE_FIELDS
+      break
+    case 'header':
+      styleFields = HEADER_STYLE_FIELDS
+      break
+    case 'image':
+      styleFields = IMAGE_STYLE_FIELDS
+      break
+    case 'link':
+      styleFields = LINK_STYLE_FIELDS
+      break
+    case 'menu':
+      styleFields = MENU_STYLE_FIELDS
+      break
+    case 'progress-circle':
+      styleFields = PROGRESS_CIRCLE_STYLE_FIELDS
+      break
+    case 'progress-line':
+      styleFields = PROGRESS_LINE_STYLE_FIELDS
+      break
+    case 'reportViewer':
+    case 'container':
+      styleFields = CONTAINER_STYLE_FIELDS
+      break
+    case 'layout':
+      styleFields = LAYOUT_STYLE_FIELDS
+      break
+    case 'layout-cell':
+      styleFields = LAYOUT_CELL_STYLE_FIELDS
+      break
+    default:
+      styleFields = COMMON_STYLE_FIELDS
+      break
+  }
+
+  return withGlobalStyleFields(styleFields)
+}
+
+export function getRulesFields(type) {
+  switch (type) {
+    case 'input':
+      return INPUT_RULES_FIELDS
+    case 'checkbox':
+      return CHECKBOX_RULES_FIELDS
+    case 'button':
+      return BUTTON_RULES_FIELDS
+    case 'datepicker':
+      return DATEPICKER_RULES_FIELDS
+    case 'dropdown':
+      return DROPDOWN_RULES_FIELDS
+    case 'radio':
+      return RADIO_RULES_FIELDS
+    case 'number':
+      return NUMBER_RULES_FIELDS
+    case 'richtext':
+      return RICHTEXT_RULES_FIELDS
+    case 'tag':
+      return TAG_RULES_FIELDS
+    case 'time':
+      return TIME_RULES_FIELDS
+    case 'textarea':
+      return TEXTAREA_RULES_FIELDS
+    case 'signature':
+      return SIGNATURE_RULES_FIELDS
+    case 'label':
+      return LABEL_RULES_FIELDS
+    case 'divider':
+      return DIVIDER_RULES_FIELDS
+    case 'header':
+      return HEADER_RULES_FIELDS
+    case 'image':
+      return IMAGE_RULES_FIELDS
+    case 'link':
+      return LINK_RULES_FIELDS
+    case 'menu':
+      return MENU_RULES_FIELDS
+    case 'progress-circle':
+      return PROGRESS_CIRCLE_RULES_FIELDS
+    case 'progress-line':
+      return PROGRESS_LINE_RULES_FIELDS
+    case 'reportViewer':
+    case 'container':
+      return CONTAINER_RULES_FIELDS
+    case 'layout':
+      return LAYOUT_RULES_FIELDS
+    case 'layout-cell':
+      return LAYOUT_CELL_RULES_FIELDS
+    default:
+      return COMMON_RULES_FIELDS
+  }
+}
+
+export function getActionsFields(type) {
+  switch (type) {
+    case 'button':
+      return BUTTON_ACTION_FIELDS
+    case 'input':
+      return INPUT_ACTIONS_FIELDS
+    case 'checkbox':
+      return CHECKBOX_ACTIONS_FIELDS
+    case 'datepicker':
+      return DATEPICKER_ACTIONS_FIELDS
+    case 'dropdown':
+      return DROPDOWN_ACTIONS_FIELDS
+    case 'radio':
+      return RADIO_ACTIONS_FIELDS
+    case 'number':
+      return NUMBER_ACTIONS_FIELDS
+    case 'richtext':
+      return RICHTEXT_ACTIONS_FIELDS
+    case 'tag':
+      return TAG_ACTIONS_FIELDS
+    case 'time':
+      return TIME_ACTIONS_FIELDS
+    case 'textarea':
+      return TEXTAREA_ACTIONS_FIELDS
+    case 'signature':
+      return SIGNATURE_ACTIONS_FIELDS
+    case 'label':
+      return LABEL_ACTIONS_FIELDS
+    case 'divider':
+      return DIVIDER_ACTIONS_FIELDS
+    case 'header':
+      return HEADER_ACTIONS_FIELDS
+    case 'image':
+      return IMAGE_ACTIONS_FIELDS
+    case 'link':
+      return LINK_ACTIONS_FIELDS
+    case 'menu':
+      return MENU_ACTIONS_FIELDS
+    case 'progress-circle':
+      return PROGRESS_CIRCLE_ACTIONS_FIELDS
+    case 'progress-line':
+      return PROGRESS_LINE_ACTIONS_FIELDS
+    case 'container':
+      return CONTAINER_ACTIONS_FIELDS
+    case 'layout':
+      return LAYOUT_ACTIONS_FIELDS
+    case 'layout-cell':
+      return LAYOUT_CELL_ACTIONS_FIELDS
+    default:
+      return COMMON_ACTIONS_FIELDS
+  }
+}

package/src/views/builder/inspector/definitions/input/actions.js

@@ -0,0 +1 @@
+export const INPUT_ACTIONS_FIELDS = []

package/src/views/builder/inspector/definitions/input/main.js

@@ -0,0 +1,14 @@
+export const INPUT_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+  { name: 'label', label: 'Label', type: 'expression' },
+  { name: 'value', label: 'Value', type: 'expression' },
+  { name: 'placeholder', label: 'Placeholder', type: 'text' },
+  {
+    name: 'size',
+    label: 'Size',
+    type: 'select',
+    options: ['small', 'medium', 'large']
+  },
+  { name: 'disabled', label: 'Disabled', type: 'boolean' },
+  { name: 'enabled', label: 'Enabled', type: 'boolean' }
+]

package/src/views/builder/inspector/definitions/input/rules.js

@@ -0,0 +1,8 @@
+export const INPUT_RULES_FIELDS = [
+  { name: 'visible', label: 'Visible', type: 'expression' },
+  { name: 'readonly', label: 'Read Only', type: 'boolean' },
+  { name: 'required', label: 'Required', type: 'boolean' },
+  { name: 'validation', label: 'Validation', type: 'expression' },
+  { name: 'tooltip', label: 'Tooltip', type: 'expression' },
+  { name: 'helperText', label: 'Helper Text', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/input/style.js

@@ -0,0 +1,32 @@
+export const INPUT_STYLE_FIELDS = [
+  {
+    name: 'color',
+    label: 'Color',
+    type: 'select',
+    options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
+  },
+  { name: 'display', label: 'Display', type: 'expression' },
+  { name: 'width', label: 'Width', type: 'expression' },
+  { name: 'height', label: 'Height', type: 'expression' },
+  { name: 'margin', label: 'Margin', type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' },
+  {
+    name: 'flexDirection',
+    label: 'Flex Direction',
+    type: 'select',
+    options: ['row', 'column', 'row-reverse', 'column-reverse']
+  },
+  {
+    name: 'justifyContent',
+    label: 'Justify Content',
+    type: 'select',
+    options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']
+  },
+  {
+    name: 'alignItems',
+    label: 'Align Items',
+    type: 'select',
+    options: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline']
+  },
+  { name: 'gap', label: 'Gap', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/label/actions.js

@@ -0,0 +1 @@
+export const LABEL_ACTIONS_FIELDS = []

package/src/views/builder/inspector/definitions/label/main.js

@@ -0,0 +1,24 @@
+export const LABEL_MAIN_FIELDS = [
+  { name: 'text', label: 'Text', type: 'expression' },
+  {
+    name: 'variant',
+    label: 'Variant',
+    type: 'select',
+    options: ['body1', 'body2', 'caption', 'overline', 'subtitle1', 'subtitle2']
+  },
+  {
+    name: 'color',
+    label: 'Color',
+    type: 'select',
+    options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success', 'textPrimary', 'textSecondary']
+  },
+  {
+    name: 'align',
+    label: 'Align',
+    type: 'select',
+    options: ['left', 'center', 'right', 'justify']
+  },
+  { name: 'gutterBottom', label: 'Gutter Bottom', type: 'boolean' },
+  { name: 'noWrap', label: 'No Wrap', type: 'boolean' },
+  { name: 'paragraph', label: 'Paragraph', type: 'boolean' }
+]

package/src/views/builder/inspector/definitions/label/rules.js

@@ -0,0 +1,4 @@
+export const LABEL_RULES_FIELDS = [
+  { name: 'visible', label: 'Visible', type: 'expression' },
+  { name: 'tooltip', label: 'Tooltip', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/label/style.js

@@ -0,0 +1,12 @@
+export const LABEL_STYLE_FIELDS = [
+  { name: 'display', label: 'Display', type: 'expression' },
+  { name: 'width', label: 'Width', type: 'expression' },
+  { name: 'height', label: 'Height', type: 'expression' },
+  { name: 'margin', label: 'Margin', type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' },
+  { name: 'fontSize', label: 'Font Size', type: 'expression' },
+  { name: 'fontWeight', label: 'Font Weight', type: 'expression' },
+  { name: 'lineHeight', label: 'Line Height', type: 'expression' },
+  { name: 'letterSpacing', label: 'Letter Spacing', type: 'expression' },
+  { name: 'textTransform', label: 'Text Transform', type: 'expression' }
+]

package/src/views/builder/inspector/definitions/layout/actions.js

@@ -0,0 +1 @@
+export const LAYOUT_ACTIONS_FIELDS = []

package/src/views/builder/inspector/definitions/layout/main.js

@@ -0,0 +1,6 @@
+export const LAYOUT_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+  { name: 'cols', label: 'Columns', type: 'number' },
+  { name: 'gap', label: 'Gap (px)', type: 'number' },
+  { name: 'rowGap', label: 'Row Gap (px)', type: 'number' },
+]

package/src/views/builder/inspector/definitions/layout/rules.js

@@ -0,0 +1,3 @@
+export const LAYOUT_RULES_FIELDS = [
+  { name: 'visible', label: 'Visible', type: 'expression' },
+]

package/src/views/builder/inspector/definitions/layout/style.js

@@ -0,0 +1,7 @@
+export const LAYOUT_STYLE_FIELDS = [
+  { name: 'elementStyle', label: 'elementStyle', type: 'expression' },
+  { name: 'elementCss', label: 'elementCss', type: 'expression' },
+  { name: 'width', label: 'Width', type: 'expression' },
+  { name: 'margin', label: 'Margin', type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' },
+]

package/src/views/builder/inspector/definitions/layout-cell/actions.js

@@ -0,0 +1 @@
+export const LAYOUT_CELL_ACTIONS_FIELDS = []

package/src/views/builder/inspector/definitions/layout-cell/main.js

@@ -0,0 +1,7 @@
+export const LAYOUT_CELL_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+  { name: 'colStart', label: 'Column Start', type: 'number' },
+  { name: 'rowStart', label: 'Row Start', type: 'number' },
+  { name: 'colSpan', label: 'Column Span', type: 'number' },
+  { name: 'rowSpan', label: 'Row Span', type: 'number' },
+]

package/src/views/builder/inspector/definitions/layout-cell/rules.js

@@ -0,0 +1,3 @@
+export const LAYOUT_CELL_RULES_FIELDS = [
+  { name: 'visible', label: 'Visible', type: 'expression' },
+]