robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/inspector/definitions/kpi/rating.js

@@ -0,0 +1,27 @@
+export const RATING_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Reads and writes the rating value from data[valueKey]. Set readonly to display only.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "productRating": 4 }\n→ valueKey: "productRating", max: 5\n\nInteractive mode: clicking a star writes\nthe new value back to data[valueKey]\nand fires onChangeCode.\n\nReadonly mode: just displays the value.',
+  },
+  { name: 'valueKey', label: 'Value Key', type: 'expression' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'max',        label: 'Max Rating',  type: 'expression' },
+  { name: 'icon',       label: 'Icon',        type: 'select', options: ['star','heart','circle','square'] },
+  { name: 'color',      label: 'Active Color', type: 'expression' },
+  { name: 'emptyColor', label: 'Empty Color',  type: 'expression' },
+  { name: 'size',       label: 'Icon Size (px)', type: 'expression' },
+  { name: 'gap',        label: 'Gap (px)',      type: 'expression' },
+  { name: 'align',      label: 'Align',         type: 'select', options: ['left','center','right'] },
+  { name: 'readonly',   label: 'Read Only',     type: 'boolean' },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user selects a rating. The new value is automatically written to data[valueKey] before the action runs. Available in the action:\n  newValue     — the new star rating (number)\n  clickedValue — alias for newValue',
+  },
+  {
+    name: 'onChange', type: 'kpi-action', label: 'On Rating Change',
+    context: ['newValue', 'clickedValue'],
+  },
+]

package/src/views/builder/inspector/definitions/kpi/statusDot.js

@@ -0,0 +1,18 @@
+export const STATUS_DOT_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Reads value from data[valueKey]. Use thresholds to map values to dot colors.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "serverStatus": "online" }\n{ "alertLevel": 2 }\n→ valueKey: "serverStatus"\n   threshold "== online" → color: success',
+  },
+  { name: 'valueKey', label: 'Value Key', type: 'expression' },
+  { name: 'label',    label: 'Static Label', type: 'expression' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'size',          label: 'Dot Size (px)',   type: 'expression' },
+  { name: 'pulse',         label: 'Pulse Animation', type: 'boolean' },
+  { name: 'showLabel',     label: 'Show Label',      type: 'boolean' },
+  { name: 'labelPosition', label: 'Label Position',  type: 'select', options: ['right','left','above','below'] },
+  { name: 'align',         label: 'Align',           type: 'select', options: ['left','center','right'] },
+
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+]

package/src/views/builder/inspector/definitions/kpi/stepStage.js

@@ -0,0 +1,65 @@
+export const STEP_STAGE_FIELDS = [
+  {
+    name: 'data_note', type: 'note', label: 'Data',
+    text: 'Bind dataKey to an array of step objects.\n\nTwo ways to mark progress:\n① Status field — set a "status" string on each step (see keywords below).\n② Active key — point activeKey to a data value (index or id); steps before it are "done", matching step is "active", rest are "pending".',
+  },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '[\n  { "id": 1, "label": "Placed",      "status": "done",    "description": "Jan 10, 2025" },\n  { "id": 2, "label": "Processing",  "status": "done",    "description": "Jan 11, 2025" },\n  { "id": 3, "label": "Shipped",     "status": "active",  "description": "Est. Jan 15" },\n  { "id": 4, "label": "Out for delivery", "status": "pending" },\n  { "id": 5, "label": "Delivered",   "status": "pending" }\n]\n\nBuilt-in status keywords:\n  done / success / completed / approved / closed / resolved / delivered / shipped / paid\n  active / current / in-progress / running / processing / open\n  warning / at-risk / delayed / on-hold\n  error / failed / rejected / cancelled / blocked\n  pending / todo / future / upcoming / planned / queued',
+  },
+
+  { name: 'dataKey',     label: 'Steps Data Key',   type: 'expression' },
+  { name: 'activeKey',   label: 'Active Value Key',  type: 'expression', placeholder: 'data key holding current step index or id' },
+  { name: 'labelField',  label: 'Label Field',       type: 'expression', placeholder: 'default: label' },
+  { name: 'statusField', label: 'Status Field',      type: 'expression', placeholder: 'default: status' },
+  { name: 'descField',   label: 'Description Field', type: 'expression', placeholder: 'optional — shown below label' },
+  { name: 'iconField',   label: 'Icon Field',        type: 'expression', placeholder: 'optional — emoji/char inside dot' },
+  { name: 'idField',     label: 'ID Field',          type: 'expression', placeholder: 'default: id  (used with activeKey)' },
+  { name: 'maxItems',    label: 'Max Items',         type: 'expression' },
+
+  { name: 'layout_note', type: 'note', label: 'Layout' },
+  { name: 'orientation',   label: 'Orientation',    type: 'select', options: ['horizontal', 'vertical'] },
+  { name: 'labelPosition', label: 'Label Position', type: 'select', options: ['below', 'above'] },
+
+  { name: 'dot_note', type: 'note', label: 'Dot',
+    text: '"auto" — done steps show ✓, active shows a pulse ring, errors show ✕, pending renders as an outlined ring.\n"filled" — always solid circle.\n"ring" — always outlined ring, no glyphs.' },
+  { name: 'dotStyle',  label: 'Dot Style',      type: 'select', options: ['auto', 'filled', 'ring'] },
+  { name: 'size',      label: 'Dot Size (px)',   type: 'expression', placeholder: 'default: 28' },
+  { name: 'showNumbers', label: 'Show Numbers', type: 'boolean' },
+
+  { name: 'label_note', type: 'note', label: 'Labels' },
+  { name: 'showLabels', label: 'Show Labels',      type: 'boolean' },
+  { name: 'showDesc',   label: 'Show Description', type: 'boolean' },
+  { name: 'fontSize',   label: 'Font Size',        type: 'expression', placeholder: 'default: 12' },
+
+  { name: 'line_note', type: 'note', label: 'Connector Line' },
+  { name: 'lineColor',  label: 'Line Color',  type: 'expression', placeholder: 'default: #e0e0e0' },
+  { name: 'lineStyle',  label: 'Line Style',  type: 'select', options: ['solid', 'dashed'] },
+  { name: 'filledLine', label: 'Filled Line (done→done)', type: 'boolean' },
+
+  {
+    name: 'color_note', type: 'note', label: 'Coloring',
+    text: 'Priority: colorMap (explicit status→color) → Color Schema → thresholds → built-in status keywords → active/done/pending colors.',
+  },
+  { name: 'colorSchema',   label: 'Color Schema',    type: 'color-schema' },
+  { name: 'activeColor',   label: 'Active Color',    type: 'expression', placeholder: 'default: #1976d2' },
+  { name: 'doneColor',     label: 'Done Color',      type: 'expression', placeholder: 'default: #4caf50' },
+  { name: 'pendingColor',  label: 'Pending Color',   type: 'expression', placeholder: 'default: #e0e0e0' },
+  { name: 'warningColor',  label: 'Warning Color',   type: 'expression', placeholder: 'default: #ff9800' },
+  { name: 'errorColor',    label: 'Error Color',     type: 'expression', placeholder: 'default: #f44336' },
+  { name: 'thresholds',    label: 'Thresholds',      type: 'thresholds-editor' },
+  {
+    name: 'colormap_note', type: 'note', label: 'Color Map',
+    text: 'Map statusField string values to colors or MUI palette keys. Takes highest priority.',
+  },
+  { name: 'colorMap', label: 'Color Map (JSON)', type: 'expression', placeholder: '{"done":"#4caf50","blocked":"#f44336"}' },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user clicks a step. Available in the action:\n  clickedItem   — the full step object\n  clickedIndex  — position in the array (0-based)\n  clickedId     — the step\'s id field value\n  clickedLabel  — the step\'s label\n  clickedStatus — the step\'s status field value\n\nUse setData to advance the current step:\n  setData(prev => ({ ...prev, currentStep: clickedId }))',
+  },
+  {
+    name: 'onStepClick', type: 'kpi-action', label: 'On Step Click',
+    context: ['clickedItem', 'clickedIndex', 'clickedId', 'clickedLabel', 'clickedStatus'],
+  },
+]

package/src/views/builder/inspector/definitions/kpi/tagList.js

@@ -0,0 +1,32 @@
+export const TAG_LIST_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Bind dataKey to an array of strings or objects.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: 'Plain strings:\n{ "skills": ["React", "Node.js", "GraphQL"] }\n→ dataKey: "skills"\n\nObjects:\n{ "tags": [\n  { "label": "Urgent", "color": "#e53935" },\n  { "label": "Bug",    "color": "#fb8c00" }\n] }\n→ dataKey: "tags", labelField: "label", colorField: "color"\n\nColor priority: colorField → colorMap → threshold → Color Schema',
+  },
+  { name: 'dataKey',    label: 'Data Key',    type: 'expression' },
+  { name: 'labelField', label: 'Label Field', type: 'expression', placeholder: 'default: label' },
+  { name: 'colorField', label: 'Color Field', type: 'expression', placeholder: 'per-item color override' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'colorSchema', label: 'Color Schema', type: 'color-schema' },
+  { name: 'variant',     label: 'Variant',      type: 'select', options: ['soft','outlined','filled'] },
+  { name: 'size',        label: 'Size',         type: 'select', options: ['small','medium','large'] },
+  { name: 'maxTags',     label: 'Max Tags',     type: 'expression' },
+  { name: 'gap',         label: 'Gap (px)',     type: 'expression' },
+  { name: 'wrap',        label: 'Wrap Tags',    type: 'boolean' },
+  { name: 'align',       label: 'Align',        type: 'select', options: ['left','center','right'] },
+
+  { name: 'colormap_note', type: 'note', label: 'Color Map', text: 'Map label values to MUI palette colors. Takes priority over Color Schema.' },
+  { name: 'colorMap',  label: 'Color Map (JSON)',  type: 'expression', placeholder: '{"Urgent":"error","Done":"success"}' },
+  { name: 'thresholds', label: 'Thresholds (color by value)', type: 'thresholds-editor' },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user clicks a tag chip. Available in the action:\n  clickedItem  — the raw item (string or object)\n  clickedTag   — alias for clickedItem\n  clickedLabel — the tag\'s display text\n  clickedValue — the tag\'s value field (if objects)\n  clickedIndex — position in the array',
+  },
+  {
+    name: 'onTagClick', type: 'kpi-action', label: 'On Tag Click',
+    context: ['clickedItem', 'clickedTag', 'clickedLabel', 'clickedValue', 'clickedIndex'],
+  },
+]

package/src/views/builder/inspector/definitions/kpi/timeline.js

@@ -0,0 +1,80 @@
+export const TIMELINE_FIELDS = [
+  {
+    name: 'data_note', type: 'note', label: 'Data',
+    text: 'Bind dataKey to an array of event/milestone objects.',
+  },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '[\n  {\n    "label":       "Design review",\n    "date":        "Jan 28, 2025",\n    "status":      "done",\n    "description": "UI approved by product team.",\n    "value":       "100%"\n  },\n  {\n    "label":       "Development sprint",\n    "date":        "Feb 10, 2025",\n    "status":      "active",\n    "description": "Frontend 60% complete.",\n    "value":       "60%"\n  },\n  {\n    "label":       "QA & testing",\n    "date":        "Feb 24, 2025",\n    "status":      "pending"\n  }\n]\n\nBuilt-in status keywords:\n  done / success / completed / approved / closed\n  active / current / in-progress / running\n  warning / at-risk / delayed\n  error / failed / rejected / blocked\n  pending / todo / future / planned',
+  },
+
+  { name: 'dataKey',     label: 'Data Key',          type: 'expression' },
+  { name: 'labelField',  label: 'Label Field',        type: 'expression', placeholder: 'default: label' },
+  { name: 'dateField',   label: 'Date Field',         type: 'expression', placeholder: 'default: date' },
+  { name: 'statusField', label: 'Status Field',       type: 'expression', placeholder: 'default: status' },
+  { name: 'descField',   label: 'Description Field',  type: 'expression', placeholder: 'default: description' },
+  { name: 'valueField',  label: 'Value Field',        type: 'expression', placeholder: 'optional — shown right of title' },
+  { name: 'iconField',   label: 'Icon Field',         type: 'expression', placeholder: 'optional — emoji/char inside dot' },
+  { name: 'maxItems',    label: 'Max Items',          type: 'expression' },
+
+  { name: 'layout_note', type: 'note', label: 'Layout' },
+  {
+    name: 'layout', label: 'Layout', type: 'select',
+    options: ['left', 'right', 'alternate'],
+  },
+  {
+    name: 'density', label: 'Density', type: 'select',
+    options: ['comfortable', 'compact'],
+  },
+
+  { name: 'dot_note', type: 'note', label: 'Dot',
+    text: '"auto" — pending items render as an outlined ring, done items show ✓, active shows a pulse ring, errors show ✕.\n"filled" — always solid circle.\n"ring" — always outlined ring.' },
+  {
+    name: 'dotStyle', label: 'Dot Style', type: 'select',
+    options: ['auto', 'filled', 'ring'],
+  },
+  { name: 'dotSize', label: 'Dot Size (px)', type: 'expression', placeholder: 'default: 10' },
+
+  { name: 'line_note', type: 'note', label: 'Connector Line' },
+  { name: 'lineColor',  label: 'Line Color',       type: 'expression', placeholder: 'default: #e0e0e0' },
+  { name: 'lineWidth',  label: 'Line Width (px)',   type: 'expression', placeholder: 'default: 2' },
+  { name: 'lineStyle',  label: 'Line Style',        type: 'select', options: ['solid', 'dashed'] },
+  { name: 'filledLine', label: 'Filled Line (done→done)', type: 'boolean' },
+
+  {
+    name: 'active_note', type: 'note', label: 'Active Item Indicator',
+    text: 'Highlights the "current" item with a colored left accent bar and tinted background.\n\nTwo modes:\n① Auto — any item whose status is "active" / "current" / "in-progress" is highlighted automatically.\n② Explicit — set Active Key to a data value (e.g. data.currentStep) and Active Field to the item field to match against (e.g. "id" or "label"). The item whose field equals that value is highlighted.',
+  },
+  { name: 'activeKey',      label: 'Active Key',      type: 'expression', placeholder: 'e.g. data.currentStep — value to match' },
+  { name: 'activeField',    label: 'Active Field',    type: 'expression', placeholder: 'item field to compare (e.g. id, label)' },
+  { name: 'activeColor',    label: 'Active Color',    type: 'expression', placeholder: 'default: #1976d2' },
+  { name: 'showActiveLine', label: 'Show Accent Bar', type: 'boolean' },
+
+  { name: 'display_note', type: 'note', label: 'Display' },
+  { name: 'showDate',  label: 'Show Date',         type: 'boolean' },
+  { name: 'showBadge', label: 'Show Status Badge', type: 'boolean' },
+  { name: 'showValue', label: 'Show Value',        type: 'boolean' },
+
+  { name: 'fmt_note', type: 'note', label: 'Value Format' },
+  { name: 'format',   label: 'Format',   type: 'select', options: ['number','currency','percent','compact'] },
+  { name: 'prefix',   label: 'Prefix',   type: 'expression' },
+  { name: 'suffix',   label: 'Suffix',   type: 'expression' },
+
+  {
+    name: 'color_note', type: 'note', label: 'Coloring',
+    text: 'Priority: colorMap (explicit status→color) → thresholds → built-in status colors → Color Schema → defaultColor.',
+  },
+  { name: 'colorSchema',   label: 'Color Schema',       type: 'color-schema' },
+  { name: 'defaultColor',  label: 'Default Dot Color',  type: 'expression', placeholder: '#bdbdbd' },
+  { name: 'colorMap',      label: 'Color Map (JSON)',    type: 'expression', placeholder: '{"done":"success","pending":"warning"}' },
+  { name: 'thresholds',    label: 'Thresholds',         type: 'thresholds-editor' },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user clicks a timeline item. Available in the action:\n  clickedItem   — the full event/milestone object\n  clickedIndex  — position in the array\n  clickedLabel  — the item\'s label\n  clickedStatus — the item\'s status field value\n  clickedValue  — the item\'s value field (if configured)',
+  },
+  {
+    name: 'onItemClick', type: 'kpi-action', label: 'On Item Click',
+    context: ['clickedItem', 'clickedIndex', 'clickedLabel', 'clickedStatus', 'clickedValue'],
+  },
+]

package/src/views/builder/inspector/definitions/kpi/trend.js

@@ -0,0 +1,20 @@
+export const TREND_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Reads a delta value from data[valueKey]. Positive = up, negative = down.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "revenueDelta": 12.4 }  ← percent change\n{ "countDelta": -3 }        ← absolute change\n→ valueKey: "revenueDelta", isPercent: true',
+  },
+  { name: 'valueKey',     label: 'Value Key',    type: 'expression' },
+  { name: 'label',        label: 'Label',        type: 'expression', placeholder: 'e.g. vs last month' },
+
+  { name: 'fmt_note', type: 'note', label: 'Format' },
+  { name: 'isPercent',    label: 'Value is Percent', type: 'boolean' },
+  { name: 'decimals',     label: 'Decimals',         type: 'expression' },
+  { name: 'invertColors', label: 'Invert Colors (down = good)', type: 'boolean' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'variant',  label: 'Variant', type: 'select', options: ['chip','text','inline'] },
+  { name: 'size',     label: 'Size',    type: 'select', options: ['small','medium','large'] },
+  { name: 'showIcon', label: 'Show Icon', type: 'boolean' },
+  { name: 'align',    label: 'Align',   type: 'select', options: ['left','center','right'] },
+]

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

@@ -1,5 +1,14 @@
 export const LABEL_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',

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

@@ -1,6 +1,30 @@
 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: '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' },
+
+  // ── Default Cell Style ────────────────────────────────────────────────────
+  // These apply to every cell unless overridden by the cell's own style tab.
+  { name: 'cellMinHeight',       label: 'Cell Min Height',       type: 'expression' },
+  { name: 'cellPadding',         label: 'Cell Padding',          type: 'expression' },
+  { name: 'cellBackgroundColor', label: 'Cell Background',       type: 'expression' },
+  { name: 'cellBorder',          label: 'Cell Border',           type: 'expression' },
+  { name: 'cellBorderRadius',    label: 'Cell Border Radius',    type: 'expression' },
+  { name: 'cellBoxShadow',       label: 'Cell Box Shadow',       type: 'expression' },
+  {
+    name: 'cellJustifyContent',
+    label: 'Cell Justify Content',
+    type: 'select',
+    options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
+  },
+  {
+    name: 'cellAlignItems',
+    label: 'Cell Align Items',
+    type: 'select',
+    options: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+  },
+  // Advanced: arbitrary style overrides (merged last, highest priority among grid defaults)
+  { name: 'cellElementStyle', label: 'Cell Element Style', type: 'expression' },
+  { name: 'cellElementCss',   label: 'Cell Element Css',   type: 'expression' },
 ]

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

@@ -1,23 +1,15 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const NUMBER_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' },
-  // Number format specific props
-  {
-    name: 'formatType',
-    label: 'Format Type',
-    type: 'select',
-    options: ['decimal', 'currency', 'percentage', 'custom']
-  },
+  { name: 'formatType', label: 'Format Type', type: 'select', options: ['decimal', 'currency', 'percentage', 'custom'] },
   { name: 'decimalScale', label: 'Decimal Scale', type: 'expression', placeholder: '2' },
   { name: 'fixedDecimalScale', label: 'Fixed Decimal Scale', type: 'boolean' },
   { name: 'thousandSeparator', label: 'Thousand Separator', type: 'boolean' },
@@ -25,5 +17,5 @@ export const NUMBER_MAIN_FIELDS = [
   { name: 'prefix', label: 'Prefix', type: 'text' },
   { name: 'suffix', label: 'Suffix', type: 'text' },
   { name: 'allowNegative', label: 'Allow Negative', type: 'boolean' },
-  { name: 'format', label: 'Custom Format', type: 'text', placeholder: '#### #### #### ####' }
+  { name: 'format', label: 'Custom Format', type: 'text', placeholder: '#### #### #### ####' },
 ]

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

@@ -0,0 +1,21 @@
+export const PAGE_NUMBER_MAIN_FIELDS = [
+  {
+    name:  'format_note',
+    type:  'note',
+    label: 'Tokens',
+    text:  '{page} → current page number\n{pages} → total pages\n\nExample: "Page {page} of {pages}"',
+  },
+  {
+    name:  'format',
+    label: 'Format',
+    type:  'expression',
+  },
+  {
+    name:    'align',
+    label:   'Align',
+    type:    'select',
+    options: ['left', 'center', 'right'],
+  },
+  { name: 'fontSize', label: 'Font Size', type: 'expression' },
+  { name: 'color',    label: 'Color',     type: 'expression' },
+]

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

@@ -0,0 +1,71 @@
+export const POPOVER_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+
+  // ── Trigger ────────────────────────────────────────────────────────────────
+  {
+    name: 'triggerType',
+    label: 'Trigger Type',
+    type: 'select',
+    options: ['button', 'icon-button', 'text'],
+  },
+  { name: 'triggerLabel', label: 'Trigger Label', type: 'expression' },
+  {
+    name: 'triggerVariant',
+    label: 'Trigger Variant',
+    type: 'select',
+    options: ['text', 'outlined', 'contained'],
+  },
+  {
+    name: 'triggerColor',
+    label: 'Trigger Color',
+    type: 'select',
+    options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'inherit'],
+  },
+  {
+    name: 'triggerSize',
+    label: 'Trigger Size',
+    type: 'select',
+    options: ['small', 'medium', 'large'],
+  },
+  {
+    name: 'triggerIcon',
+    label: 'Trigger Icon',
+    type: 'select',
+    options: [
+      '', 'MoreVertOutlined', 'SettingsOutlined', 'TuneOutlined',
+      'FilterListOutlined', 'SearchOutlined', 'InfoOutlined', 'AddOutlined',
+      'EditOutlined', 'DeleteOutlined', 'DownloadOutlined', 'ExpandMoreOutlined',
+      'CheckOutlined', 'CloseOutlined', 'RefreshOutlined', 'StarOutlined',
+      'LockOutlined', 'LockOpenOutlined',
+    ],
+  },
+  { name: 'triggerFullWidth', label: 'Trigger Full Width', type: 'boolean' },
+
+  // ── Popover ────────────────────────────────────────────────────────────────
+  { name: 'title', label: 'Popover Title', type: 'expression' },
+  {
+    name: 'placement',
+    label: 'Placement',
+    type: 'select',
+    options: [
+      'bottom-start', 'bottom', 'bottom-end',
+      'top-start',    'top',    'top-end',
+      'left',         'right',
+    ],
+  },
+  {
+    name: 'triggerOn',
+    label: 'Trigger On',
+    type: 'select',
+    options: ['click', 'hover'],
+  },
+  {
+    name: 'open',
+    label: 'Controlled Open',
+    type: 'expression',
+  },
+  { name: 'maxWidth',        label: 'Max Width (px)',    type: 'expression' },
+  { name: 'maxHeight',       label: 'Max Height (px)',   type: 'expression' },
+  { name: 'contentPadding',  label: 'Content Padding',   type: 'expression' },
+  { name: 'closeOnContentClick', label: 'Close On Content Click', type: 'boolean' },
+]

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

@@ -1,16 +1,13 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const RADIO_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' },
-  // Radio-specific props
   { name: 'options', label: 'Options', type: 'options-editor' },
-  { name: 'row', label: 'Horizontal Layout', type: 'boolean' }
+  { name: 'row', label: 'Horizontal Layout', type: 'boolean' },
 ]

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

@@ -0,0 +1,31 @@
+export const REPEATER_MAIN_FIELDS = [
+  { name: 'key',       label: 'Key',       type: 'expression' },
+  // ── Data ──────────────────────────────────────────────────────────────────
+  // Array of objects to iterate over. Each element is exposed as `dataItem`
+  // and its position as `itemIndex` inside the template expressions.
+  { name: 'items',     label: 'Items',     type: 'expression' },
+  // Fixed repetition count — used when `items` is not set (or is empty).
+  // The repeater generates this many empty item slots.
+  { name: 'count',     label: 'Count',     type: 'expression' },
+  // Parent data key where item values are stored/read back.
+  // When set, each item gets a scoped data/setData so that input fields
+  // inside the Repeater write to data[dataKey][index], and the full array
+  // is readable in the main view as data[dataKey].
+  { name: 'dataKey',   label: 'Data Key',  type: 'expression' },
+  // Property path on each item to use as the React key (e.g. "id").
+  // Falls back to index when not set.
+  { name: 'itemKey',   label: 'Item Key',  type: 'expression' },
+  // ── Widget template (optional) ────────────────────────────────────────────
+  // When set, the repeater fetches this widget by ID and renders it as the
+  // item template instead of any inline children. The widget schema is loaded
+  // once and reused for every item.
+  { name: 'widgetId',  label: 'Widget ID', type: 'expression' },
+  // ── Layout ────────────────────────────────────────────────────────────────
+  {
+    name: 'direction',
+    label: 'Direction',
+    type: 'select',
+    options: ['vertical', 'horizontal', 'wrap'],
+  },
+  { name: 'gap',       label: 'Gap',       type: 'expression' },
+]

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

@@ -1,12 +1,39 @@
 export const REPORT_VIEWER_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
   { name: 'id', label: 'Report ID', type: 'expression' },
   { name: 'pageId', label: 'Page ID', type: 'expression' },
   { name: 'filter', label: 'Filter', type: 'expression' },
+
+  // Presentation — title/caption render above the toolbar in the viewer.
+  // Both accept expressions so they can be data-bound (e.g. `${data.month} report`).
+  { name: 'title',   label: 'Title',   type: 'expression' },
+  { name: 'caption', label: 'Caption', type: 'expression' },
+
   { name: 'minimized', label: 'Minimized', type: 'boolean' },
+  { name: 'isRerender', label: 'Is Rerender', type: 'boolean' },
+  { name: 'height', label: 'Height', type: 'expression' },
   { name: 'isSingle', label: 'Single', type: 'boolean' },
   { name: 'noHeader', label: 'No Header', type: 'boolean' },
   { name: 'refresh', label: 'Refresh', type: 'boolean' },
   { name: 'dataAsObject', label: 'Data As Object', type: 'boolean' },
   { name: 'externalTimer', label: 'External Timer', type: 'expression' },
-  { name: 'sessionId', label: 'Session ID', type: 'expression' }
+  { name: 'sessionId', label: 'Session ID', 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? }]
+  // Inside each Calculation, data.row is the current AG Grid row object.
+  { name: 'actionsConfig', label: 'Row Actions', type: 'actions-config-editor' },
+
+  // Viewer actions: buttons rendered in the toolbar after the Filter / Refresh
+  // buttons. Same shape as Row Actions, except each Calculation runs WITHOUT a
+  // row context — they're page-level actions for the whole report (e.g.
+  // "Export PDF", "Open New Tab", "Reset filters", etc.).
+  // Shape: [{ label, color, variant, icon, code, confirmation?, disabled? }]
+  { name: 'viewerActions', label: 'Viewer Actions', type: 'actions-config-editor' },
 ]

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

@@ -1,21 +1,18 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const RICHTEXT_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: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Rich text editor specific props
   { name: 'height', label: 'Editor Height', type: 'text', placeholder: '300px' },
-  {
-    name: 'mode',
-    label: 'Editor Mode',
-    type: 'select',
-    options: ['classic', 'inline', 'balloon', 'balloon-always']
-  },
+  { name: 'mode', label: 'Editor Mode', type: 'select', options: ['classic', 'inline', 'balloon', 'balloon-always'] },
   { name: 'toolbar', label: 'Toolbar Buttons', type: 'expression' },
   { name: 'resizingBar', label: 'Resizing Bar', type: 'boolean' },
   { name: 'showPathLabel', label: 'Show Path Label', type: 'boolean' },
   { name: 'charCounter', label: 'Character Counter', type: 'boolean' },
-  { name: 'maxCharCount', label: 'Max Character Count', type: 'expression' }
+  { name: 'maxCharCount', label: 'Max Character Count', type: 'expression' },
 ]

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

@@ -1,6 +1,9 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const SIGNATURE_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'width', label: 'Canvas Width', type: 'number', defaultValue: 500 },
   { name: 'height', label: 'Canvas Height', type: 'number', defaultValue: 200 },
@@ -9,5 +12,5 @@ export const SIGNATURE_MAIN_FIELDS = [
   { name: 'minWidth', label: 'Min Pen Width', type: 'number', defaultValue: 0.5 },
   { name: 'maxWidth', label: 'Max Pen Width', type: 'number', defaultValue: 2.5 },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
-  { name: 'enabled', label: 'Enabled', type: 'boolean' }
+  { name: 'enabled', label: 'Enabled', type: 'boolean' },
 ]

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

@@ -1,17 +1,14 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TAG_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' },
-  // Tag picker-specific props
   { name: 'options', label: 'Options', type: 'options-editor' },
-  { name: 'freeSolo', label: 'Allow Custom Tags', type: 'boolean' }
+  { name: 'freeSolo', label: 'Allow Custom Tags', type: 'boolean' },
 ]

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

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