robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/inspector/Tabs/StyleTab.jsx

@@ -6,43 +6,28 @@ import BooleanEditor from '../fields/BooleanEditor'
 import SelectEditor from '../fields/SelectEditor'
 import TextEditor from '../fields/TextEditor'
 import { getStyleFields } from '../definitions'
-import { findNode, updateNodeInTree } from 'services/builderHelper'
+import { findNodeAnywhere, updateNodeAnywhere } from 'services/builderHelper'
 
-/**
- * Ensure every field is an object:
- * { valueType: 'value' | 'expression', value?, expression? }
- */
 function normalizeField(field) {
   if (field && typeof field === 'object' && field.valueType) return field
-
-  return {
-    valueType: 'value',
-    value: field
-  }
+  return { valueType: 'value', value: field }
 }
 
 export default function StyleTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, selectedId)
   if (!node) return null
 
   const fields = getStyleFields(node.type)
 
-  // 🔑 Normalize ALL style props
-  const style = Object.fromEntries(Object.entries(node.props?.style ?? {}).map(([k, v]) => [k, normalizeField(v)]))
+  const style = Object.fromEntries(
+    Object.entries(node.props?.style ?? {}).map(([k, v]) => [k, normalizeField(v)])
+  )
 
   const updateField = (name, fieldState) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          style: {
-            ...style,
-            [name]: fieldState
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { style: { ...style, [name]: fieldState } } }, location, dialogId)
+    )
   }
 
   return (

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

@@ -1,13 +1,11 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const AUTOCOMPLETE_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
   { name: 'fullWidth', label: 'Full Width', type: 'boolean' },

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

@@ -0,0 +1,7 @@
+export const BANNER_ACTIONS_FIELDS = [
+  {
+    name: 'onClose',
+    label: 'On Close',
+    desc: 'Fires when the user dismisses the banner (requires Dismissible = true).',
+  },
+]

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

@@ -0,0 +1,22 @@
+export const BANNER_MAIN_FIELDS = [
+  { name: 'key',     label: 'Key',     type: 'expression' },
+  { name: 'message', label: 'Message', type: 'expression' },
+  { name: 'title',   label: 'Title',   type: 'expression' },
+  {
+    name: 'severity',
+    label: 'Severity',
+    type: 'select',
+    options: ['info', 'success', 'warning', 'error'],
+  },
+  {
+    name: 'variant',
+    label: 'Variant',
+    type: 'select',
+    options: ['standard', 'filled', 'outlined'],
+  },
+  // Controlled visibility — bind to a data key to show/hide programmatically.
+  // Leave blank to let the component manage its own visible state.
+  { name: 'open',        label: 'Controlled Open', type: 'expression' },
+  { name: 'dismissible', label: 'Dismissible',     type: 'boolean' },
+  { name: 'icon',        label: 'Show Icon',       type: 'boolean' },
+]

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

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

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

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

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

@@ -1,9 +1,46 @@
 export const BREADCRUMB_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'separator', label: 'Separator', type: 'expression' },
+  { name: 'key',       label: 'Key',      type: 'expression' },
+  { name: 'items',     label: 'Items',    type: 'expression' },
+  // [{label, href?, disabled?}] — last item = current page
+
   {
-    name: 'items',
-    label: 'Items',
-    type: 'options', // Reusing options editor if it supports label/href or just label
-  }
+    name: 'variant', label: 'Variant', type: 'select',
+    options: ['breadcrumb', 'chevron'],
+  },
+  {
+    name: 'mode', label: 'Interaction Mode', type: 'select',
+    options: ['link', 'click', 'none'],
+    // link  → uses href for navigation
+    // click → calls onClick code with {item, index}
+    // none  → display only
+  },
+
+  // ── Breadcrumb-variant options ──────────────────────────────────────────
+  { name: 'separator',    label: 'Separator',    type: 'expression' },
+  { name: 'maxItems',     label: 'Max Items',    type: 'number' },
+  {
+    name: 'linkUnderline', label: 'Link Underline', type: 'select',
+    options: ['hover', 'always', 'none'],
+  },
+  {
+    name: 'currentColor', label: 'Current Item Color', type: 'select',
+    options: ['text.primary', 'primary.main', 'text.secondary', 'inherit'],
+  },
+
+  // ── Chevron-variant options ─────────────────────────────────────────────
+  { name: 'activeIndex', label: 'Active Index', type: 'expression' },
+  {
+    name: 'itemSize', label: 'Item Size', type: 'select',
+    options: ['small', 'medium', 'large'],
+  },
+  { name: 'fullWidth',       label: 'Full Width',           type: 'boolean' },
+  { name: 'completedColor',  label: 'Completed BG Color',   type: 'text' },
+  { name: 'activeColor',     label: 'Active BG Color',      type: 'text' },
+  { name: 'pendingColor',    label: 'Pending BG Color',     type: 'text' },
+  { name: 'completedTextColor', label: 'Completed Text Color', type: 'text' },
+  { name: 'activeTextColor',    label: 'Active Text Color',    type: 'text' },
+  { name: 'pendingTextColor',   label: 'Pending Text Color',   type: 'text' },
+
+  // ── onClick code ────────────────────────────────────────────────────────
+  { name: 'onClick', label: 'On Item Click', type: 'code', codeType: 'calculation' },
 ]

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

@@ -1,14 +1,13 @@
 export const BUTTON_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'label', label: 'Label', type: 'expression' },
-  { name: 'variant', label: 'Variant', type: 'select', options: ['text', 'outlined', 'contained'] },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
-  { name: 'disabled', label: 'Disabled', type: 'boolean' },
-  { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  { name: 'fullWidth', label: 'FullWidth', type: 'boolean' }
+  { name: 'key',        label: 'Key',        type: 'expression' },
+  { name: 'label',      label: 'Label',      type: 'expression' },
+  { name: 'variant',    label: 'Variant',    type: 'select', options: ['text', 'outlined', 'contained'] },
+  { name: 'color',      label: 'Color',      type: 'select', options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success', 'inherit'] },
+  { name: 'size',       label: 'Size',       type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'prefix',     label: 'Prefix',     type: 'icon' },
+  { name: 'suffix',     label: 'Suffix',     type: 'icon' },
+  { name: 'tooltip',    label: 'Tooltip',    type: 'expression' },
+  { name: 'iconButton', label: 'Icon Button', type: 'boolean' },
+  { name: 'disabled',   label: 'Disabled',   type: 'boolean' },
+  { name: 'fullWidth',  label: 'Full Width',  type: 'boolean' },
 ]

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

@@ -1,32 +1,20 @@
 export const BUTTON_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' }
+  // ── Visual — applied directly to the Button element via sx ────────────────
+  { name: 'background',       label: 'Background',        type: 'expression' },
+  { name: 'backgroundColor',  label: 'Background Color',  type: 'expression' },
+  { name: 'color',            label: 'Text Color',        type: 'expression' },
+  { name: 'borderRadius',     label: 'Border Radius',     type: 'expression' },
+  { name: 'boxShadow',        label: 'Box Shadow',        type: 'expression' },
+  { name: 'border',           label: 'Border',            type: 'expression' },
+  { name: 'borderColor',      label: 'Border Color',      type: 'expression' },
+  { name: 'textTransform',    label: 'Text Transform',    type: 'select', options: ['none', 'uppercase', 'lowercase', 'capitalize'] },
+  { name: 'fontWeight',       label: 'Font Weight',       type: 'expression' },
+  { name: 'fontSize',         label: 'Font Size',         type: 'expression' },
+  { name: 'letterSpacing',    label: 'Letter Spacing',    type: 'expression' },
+  // ── Layout / sizing ───────────────────────────────────────────────────────
+  { name: 'width',            label: 'Width',             type: 'expression' },
+  { name: 'height',           label: 'Height',            type: 'expression' },
+  { name: 'padding',          label: 'Padding',           type: 'expression' },
+  { name: 'margin',           label: 'Margin',            type: 'expression' },
+  { name: 'display',          label: 'Display',           type: 'expression' },
 ]

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

@@ -1 +1,3 @@
-export const CHECKBOX_ACTIONS_FIELDS = []
+export const CHECKBOX_ACTIONS_FIELDS = [
+  { name: 'onChange', label: 'On Change', type: 'action', actionTypes: [{ value: 'custom', label: 'Custom Action' }] },
+]

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

@@ -1,13 +1,11 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const CHECKBOX_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { 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/common/main.js

@@ -1,14 +1,25 @@
+export const LABEL_POSITION_FIELDS = [
+  {
+    name: 'labelPosition',
+    label: 'Label Position',
+    type: 'select',
+    options: ['top', 'left', 'right', 'none'],
+  },
+  { name: 'required', label: 'Required', type: 'boolean' },
+]
+
 export const COMMON_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
   {
     name: 'size',
     label: 'Size',
     type: 'select',
-    options: ['small', 'medium', 'large']
+    options: ['small', 'medium', 'large'],
   },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
-  { name: 'enabled', label: 'Enabled', type: 'boolean' }
+  { name: 'enabled', label: 'Enabled', type: 'boolean' },
 ]

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

@@ -0,0 +1,23 @@
+export const DATA_GRID_MAIN_FIELDS = [
+  { name: 'key',           label: 'Key',              type: 'expression' },
+  { name: 'dataKey',       label: 'Data Key',         type: 'expression' },
+  { name: 'columns',       label: 'Columns',          type: 'expression' },
+  // Extra columns: full AG Grid colDef objects added as new columns to the grid.
+  // Shape: [{ headerName, field, pinned?, width?, editable?, cellRenderer?, valueSetter?, ... }]
+  { name: 'extraCols',     label: 'Extra Columns',    type: 'extra-cols-editor' },
+  // Column config: overrides applied to existing columns, matched by field name.
+  // Shape: [{ field: string, config: { editable?, valueSetter?, valueGetter?, ... } }]
+  { name: 'columnsConfig', label: 'Columns Config',   type: 'columns-config-editor' },
+  // Row actions: buttons shown in a popover when the user clicks the Actions cell.
+  // Shape: [{ label, color, variant, icon, code, confirmation?, disabled? }]
+  { name: 'actionsConfig', label: 'Row Actions',      type: 'actions-config-editor' },
+  { name: 'addLabel',      label: 'Add Button Label', type: 'expression' },
+  { name: 'addRow',        label: 'New Row Template', type: 'code' },
+  { name: 'readOnly',      label: 'Read Only',        type: 'expression' },
+  { name: 'showAddBtn',    label: 'Show Add Button',  type: 'boolean' },
+  { name: 'showDeleteCol', label: 'Show Delete Col',  type: 'boolean' },
+  { name: 'height',        label: 'Height',           type: 'expression' },
+  { name: 'rowSelection',  label: 'Row Selection',    type: 'select', options: ['none', 'single', 'multiple'] },
+  { name: 'pagination',    label: 'Pagination',       type: 'boolean' },
+  { name: 'pageSize',      label: 'Page Size',        type: 'number' },
+]

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

@@ -0,0 +1,46 @@
+export const DATA_TABLE_VIEWER_MAIN_FIELDS = [
+  // Key used in viewerContext.data to read the rows array.
+  { name: 'dataKey', label: 'Data Key', type: 'expression' },
+
+  // Column definitions: [{ label: string, field: string }]
+  // label → column header, field → flat key on each row object.
+  { name: 'columns', label: 'Columns', type: 'table-columns-editor' },
+
+  // Sample rows used when data[dataKey] is empty (edit/preview mode).
+  // JSON array of plain objects, e.g. [{ name: "Alice", amount: 100 }]
+  { name: 'testData', label: 'Test Data (JSON)', type: 'expression' },
+
+  // ── Table style ──────────────────────────────────────────────────────────────
+  { name: 'tableWidth',      label: 'Table Width',           type: 'expression' },  // e.g. '100%' or '800px'
+
+  // ── Header style ─────────────────────────────────────────────────────────────
+  { name: 'showHeader',      label: 'Show Header',           type: 'boolean' },
+  { name: 'headerBgColor',   label: 'Header Background',     type: 'expression' },
+  { name: 'headerTextColor', label: 'Header Text Color',     type: 'expression' },
+  { name: 'headerFontSize',  label: 'Header Font Size (px)', type: 'expression' },
+  { name: 'headerAlign',     label: 'Header Align',          type: 'select',
+    options: ['left', 'center', 'right'] },
+  { name: 'headerPaddingH',  label: 'Header Padding H (px)', type: 'expression' },
+  { name: 'headerPaddingV',  label: 'Header Padding V (px)', type: 'expression' },
+
+  // ── Cell style ───────────────────────────────────────────────────────────────
+  { name: 'fontSize',        label: 'Cell Font Size (px)',   type: 'expression' },
+  { name: 'cellTextColor',   label: 'Cell Text Color',       type: 'expression' },
+  { name: 'cellAlign',       label: 'Cell Align',            type: 'select',
+    options: ['left', 'center', 'right'] },
+  { name: 'cellPaddingH',    label: 'Cell Padding H (px)',   type: 'expression' },
+  { name: 'cellPaddingV',    label: 'Cell Padding V (px)',   type: 'expression' },
+  { name: 'cellVerticalAlign', label: 'Cell Vertical Align', type: 'select',
+    options: ['top', 'middle', 'bottom'] },
+
+  // ── Row style ────────────────────────────────────────────────────────────────
+  { name: 'striped',         label: 'Striped Rows',          type: 'boolean' },
+  { name: 'stripedColor',    label: 'Stripe Color',          type: 'expression' },
+  { name: 'rowHover',        label: 'Row Hover Highlight',   type: 'boolean' },
+  { name: 'rowHoverColor',   label: 'Row Hover Color',       type: 'expression' },
+
+  // ── Border style ─────────────────────────────────────────────────────────────
+  { name: 'bordered',        label: 'Bordered',              type: 'boolean' },
+  { name: 'borderColor',     label: 'Border Color',          type: 'expression' },
+  { name: 'borderWidth',     label: 'Border Width (px)',      type: 'expression' },
+]

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

@@ -1 +1,3 @@
-export const DATEPICKER_ACTIONS_FIELDS = []
+export const DATEPICKER_ACTIONS_FIELDS = [
+  { name: 'onChange', label: 'On Change', type: 'action', actionTypes: [{ value: 'custom', label: 'Custom Action' }] },
+]

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

@@ -1,28 +1,20 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const DATEPICKER_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Calendar-specific props
   { name: 'format', label: 'Date Format', type: 'text', placeholder: 'YYYY-MM-DD' },
-  {
-    name: 'views',
-    label: 'Views',
-    type: 'select',
-    options: ['day', 'month', 'year']
-  },
+  { name: 'views', label: 'Views', type: 'select', options: ['day', 'month', 'year'] },
   { name: 'openTo', label: 'Open To', type: 'select', options: ['day', 'month', 'year'] },
   { name: 'minDate', label: 'Min Date', type: 'expression' },
   { name: 'maxDate', label: 'Max Date', type: 'expression' },
   { name: 'disableFuture', label: 'Disable Future', type: 'boolean' },
   { name: 'disablePast', label: 'Disable Past', type: 'boolean' },
-  { name: 'readOnly', label: 'Read Only', type: 'boolean' }
+  { name: 'readOnly', label: 'Read Only', type: 'boolean' },
 ]

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

@@ -0,0 +1,36 @@
+export const DIALOG_MAIN_FIELDS = [
+  // ── Identity ──────────────────────────────────────────────────────────────
+  // 'key' is the name you pass to openDialog(key) / closeDialog(key).
+  { name: 'key',             label: 'Key',              type: 'expression' },
+
+  // ── Embedded view ─────────────────────────────────────────────────────────
+  // When set, the dialog body renders a ViewRenderer for this view ID.
+  // Leave blank to use dropped child components instead.
+  { name: 'viewId',          label: 'View ID',          type: 'expression' },
+
+  // ── Title ─────────────────────────────────────────────────────────────────
+  { name: 'title',           label: 'Title',            type: 'expression' },
+  // When true the entire title bar (including the close button) is hidden.
+  { name: 'hideTitle',       label: 'Hide Title Bar',   type: 'boolean' },
+
+  // ── Size ─────────────────────────────────────────────────────────────────
+  {
+    name: 'maxWidth',
+    label: 'Max Width',
+    type: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+  },
+  { name: 'fullWidth',       label: 'Full Width',       type: 'boolean' },
+  { name: 'fullScreen',      label: 'Full Screen',      type: 'boolean' },
+
+  // ── Behaviour ─────────────────────────────────────────────────────────────
+  // Show the × icon in the dialog title bar (ignored when hideTitle is true)
+  { name: 'showCloseButton', label: 'Show Close Button', type: 'boolean' },
+  // Close when user clicks the backdrop
+  { name: 'closeOnBackdrop', label: 'Close on Backdrop', type: 'boolean' },
+
+  // ── Action buttons ────────────────────────────────────────────────────────
+  // Buttons rendered in a DialogActions bar at the bottom of the dialog.
+  // Each button has its own Calculation code; closeDialog(key) is available.
+  { name: 'dialogActions',   label: 'Action Buttons',   type: 'actions-config-editor' },
+]

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

@@ -1,19 +1,16 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const DROPDOWN_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
   { name: 'fullWidth', label: 'Full Width', type: 'boolean' },
-  // Dropdown-specific props
   { name: 'options', label: 'Options', type: 'options-editor' },
   { name: 'multiple', label: 'Multiple', type: 'boolean' },
-  { name: 'native', label: 'Native', type: 'boolean' }
+  { name: 'native', label: 'Native', type: 'boolean' },
 ]

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

@@ -0,0 +1,23 @@
+export const EXCEL_UPLOAD_ACTIONS_FIELDS = [
+  {
+    name: 'onUpload',
+    label: 'On Upload',
+    description: 'Fires after file is parsed, before mapping. newValue = { fileName, headers, rowCount }',
+    type: 'action',
+    actionTypes: [{ value: 'custom', label: 'Custom Action' }],
+  },
+  {
+    name: 'onMapped',
+    label: 'On Mapped',
+    description: 'Fires after mapping is confirmed, before data is saved. newValue = mapped rows array (e.g. [{ name, email }]). Return a modified array to override what gets stored.',
+    type: 'action',
+    actionTypes: [{ value: 'custom', label: 'Custom Action' }],
+  },
+  {
+    name: 'onClear',
+    label: 'On Clear',
+    description: 'Fires when the uploaded data is cleared. newValue = []',
+    type: 'action',
+    actionTypes: [{ value: 'custom', label: 'Custom Action' }],
+  },
+]

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

@@ -0,0 +1,17 @@
+export const EXCEL_UPLOAD_MAIN_FIELDS = [
+  { name: 'key',            label: 'Key',              type: 'expression' },
+  { name: 'dataKey',        label: 'Data Key',         type: 'expression' },
+  {
+    name: 'variant', label: 'Display Style', type: 'select',
+    options: [
+      { value: 'dropzone', label: 'Drop Zone (default)' },
+      { value: 'button',   label: 'Button' },
+      { value: 'icon',     label: 'Icon Button' },
+    ],
+  },
+  { name: 'defaultMapping', label: 'Column Mapping',   type: 'column-mapping-editor' },
+  { name: 'sheetIndex',     label: 'Sheet Index',      type: 'number' },
+  { name: 'label',          label: 'Button Label',     type: 'expression' },
+  { name: 'showPreview',    label: 'Show Preview',     type: 'boolean' },
+  { name: 'maxPreviewRows', label: 'Max Preview Rows', type: 'number' },
+]

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

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

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

@@ -0,0 +1,45 @@
+export const EXCEL_UPLOAD_STYLE_FIELDS = [
+  // ── Button / icon appearance ──────────────────────────────────────────────
+  {
+    name: 'color',
+    label: 'Color',
+    type: 'select',
+    options: [
+      { value: 'default',   label: 'Default' },
+      { value: 'primary',   label: 'Primary' },
+      { value: 'secondary', label: 'Secondary' },
+      { value: 'success',   label: 'Success' },
+      { value: 'warning',   label: 'Warning' },
+      { value: 'error',     label: 'Error' },
+      { value: 'info',      label: 'Info' },
+    ],
+  },
+  {
+    name: 'buttonVariant',
+    label: 'Button Style',
+    type: 'select',
+    options: [
+      { value: 'outlined',  label: 'Outlined' },
+      { value: 'contained', label: 'Contained' },
+      { value: 'text',      label: 'Text' },
+    ],
+  },
+  {
+    name: 'size',
+    label: 'Size',
+    type: 'select',
+    options: [
+      { value: 'small',  label: 'Small' },
+      { value: 'medium', label: 'Medium' },
+      { value: 'large',  label: 'Large' },
+    ],
+  },
+  { name: 'borderRadius', label: 'Border Radius',  type: 'expression' },
+  { name: 'fontSize',     label: 'Font Size',       type: 'expression' },
+  { name: 'fontWeight',   label: 'Font Weight',     type: 'expression' },
+  // ── Layout ────────────────────────────────────────────────────────────────
+  { name: 'width',   label: 'Width',   type: 'expression' },
+  { name: 'height',  label: 'Height',  type: 'expression' },
+  { name: 'margin',  label: 'Margin',  type: 'expression' },
+  { name: 'padding', label: 'Padding', type: 'expression' },
+]

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

@@ -1,5 +1,14 @@
 export const HEADER_MAIN_FIELDS = [
-  { name: 'text', label: 'Text', type: 'expression' },
+  { name: 'text',        label: 'Text',         type: 'expression' },
+  { name: 'prefix',      label: 'Prefix',       type: 'icon' },
+  { name: 'suffix',      label: 'Suffix',       type: 'icon' },
+  { name: 'iconSize',    label: 'Icon Size',    type: 'expression' },
+  { name: 'iconColor',   label: 'Icon Color',   type: 'expression' },
+  { name: 'prefixSize',  label: 'Prefix Size',  type: 'expression' },
+  { name: 'prefixColor', label: 'Prefix Color', type: 'expression' },
+  { name: 'suffixSize',  label: 'Suffix Size',  type: 'expression' },
+  { name: 'suffixColor', label: 'Suffix Color', type: 'expression' },
+  { name: 'iconGap',     label: 'Icon Gap',     type: 'expression' },
   {
     name: 'variant',
     label: 'Variant',