robobyte-front-builder 1.0.17 → 1.0.21

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,26 @@
 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' },
   { 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' },
 ]

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' }] },
+]

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

@@ -1,16 +1,14 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TEXTAREA_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: 'rows', label: 'Rows', type: 'number', defaultValue: 4 },
   { name: 'maxRows', label: 'Max Rows', type: 'number' },
-  {
-    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: 'enabled', label: 'Enabled', type: 'boolean' },
 ]

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

@@ -1,18 +1,15 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TIME_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' },
-  // Time picker-specific props
   { name: 'ampm', label: '12-Hour Format (AM/PM)', type: 'boolean' },
   { name: 'minutesStep', label: 'Minutes Step', type: 'expression', placeholder: '1' },
-  { name: 'readOnly', label: 'Read Only', type: 'boolean' }
+  { name: 'readOnly', label: 'Read Only', type: 'boolean' },
 ]

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

@@ -1,26 +1,12 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TOGGLE_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: 'color',
-    label: 'Color',
-    type: 'select',
-    options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'color', label: 'Color', type: 'select', options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Toggle-specific props
-  {
-    name: 'labelPlacement',
-    label: 'Label Placement',
-    type: 'select',
-    options: ['end', 'start', 'top', 'bottom']
-  }
 ]

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

@@ -0,0 +1,61 @@
+export const TREE_VIEW_MAIN_FIELDS = [
+  // ── Data ──────────────────────────────────────────────────────────────────
+  {
+    name: 'data_note', type: 'note', label: 'Data',
+    text: 'Accepts flat (parentId) or nested (children) arrays — auto-detected.',
+  },
+  { name: 'dataKey',        label: 'Data Key',         type: 'expression' },
+  { name: 'idField',        label: 'ID Field',         type: 'expression' },
+  { name: 'labelField',     label: 'Label Field',      type: 'expression' },
+  { name: 'childrenField',  label: 'Children Field',   type: 'expression' },
+  { name: 'parentIdField',  label: 'Parent ID Field',  type: 'expression' },
+
+  // ── Lazy loading ──────────────────────────────────────────────────────────
+  {
+    name: 'lazy_note', type: 'note', label: 'Lazy Loading',
+    text: 'Set hasChildrenField to a boolean flag on each node (e.g. "hasChildren"). When a flagged node is expanded onExpandCode runs — fetch children there and update data[dataKey].',
+  },
+  { name: 'hasChildrenField', label: 'Has-Children Flag Field', type: 'expression' },
+  { name: 'onExpandCode',     label: 'On Expand (lazy load)',   type: 'code', codeType: 'action' },
+
+  // ── Selection ─────────────────────────────────────────────────────────────
+  { name: 'sel_note', type: 'note', label: 'Selection', text: 'Selected node(s) are written to data[selectedKey].' },
+  { name: 'selectedKey',       label: 'Selected Key',      type: 'expression' },
+  { name: 'selectable',        label: 'Selectable',        type: 'boolean' },
+  { name: 'multiSelect',       label: 'Multi Select',      type: 'boolean' },
+  { name: 'checkboxSelection', label: 'Checkboxes',        type: 'boolean' },
+  { name: 'onSelectCode',      label: 'On Select',         type: 'code', codeType: 'action' },
+
+  // ── Icons ─────────────────────────────────────────────────────────────────
+  {
+    name: 'icon_note', type: 'note', label: 'Icons',
+    text: 'iconField: node field holding a MUI icon name.\ndefaultIcon: fallback icon for all nodes.\nleafIcon: icon used when node has no children.',
+  },
+  { name: 'iconField',    label: 'Icon Field',    type: 'expression' },
+  { name: 'defaultIcon',  label: 'Default Icon',  type: 'expression' },
+  { name: 'leafIcon',     label: 'Leaf Icon',     type: 'expression' },
+
+  // ── Expand behaviour ──────────────────────────────────────────────────────
+  { name: 'expandAll',      label: 'Expand All by Default', type: 'boolean' },
+  { name: 'defaultExpanded',label: 'Default Expanded IDs',  type: 'expression' },
+
+  // ── Search ────────────────────────────────────────────────────────────────
+  { name: 'showSearch',         label: 'Show Search',         type: 'boolean' },
+  { name: 'searchPlaceholder',  label: 'Search Placeholder',  type: 'expression' },
+
+  // ── Appearance ────────────────────────────────────────────────────────────
+  { name: 'dense',       label: 'Dense',           type: 'boolean' },
+  { name: 'showLines',   label: 'Show Lines',       type: 'boolean' },
+  { name: 'showCount',   label: 'Show Child Count', type: 'boolean' },
+  { name: 'indent',      label: 'Indent (px)',       type: 'expression' },
+  { name: 'height',      label: 'Height (px)',       type: 'expression' },
+  { name: 'fontSize',    label: 'Font Size',         type: 'expression' },
+  { name: 'nodeColor',   label: 'Node Color',        type: 'expression' },
+  { name: 'selectedBg',  label: 'Selected BG',       type: 'expression' },
+  { name: 'selectedColor', label: 'Selected Text Color', type: 'expression' },
+  { name: 'hoverBg',     label: 'Hover BG',          type: 'expression' },
+  { name: 'borderRadius',label: 'Border Radius',     type: 'expression' },
+
+  // ── Row actions ───────────────────────────────────────────────────────────
+  { name: 'actionsConfig', label: 'Node Actions', type: 'actions-config-editor', context: 'treeViewAction' },
+]