robobyte-front-builder 1.0.17 → 1.0.21

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',

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

@@ -110,13 +110,12 @@ import { PROGRESS_LINE_RULES_FIELDS } from './progress-line/rules'
 import { PROGRESS_LINE_ACTIONS_FIELDS } from './progress-line/actions'
 
 import { CARD_MAIN_FIELDS } from './card/main'
-import { COLUMN_MAIN_FIELDS } from './column/main'
-import { COLUMN_GROUP_MAIN_FIELDS } from './column-group/main'
-import { CELL_MAIN_FIELDS } from './cell/main'
-import { HEADER_CELL_MAIN_FIELDS } from './header-cell/main'
 import { BREADCRUMB_MAIN_FIELDS } from './breadcrumb/main'
-import { TABLE_MAIN_FIELDS } from './table/main'
 import { REPORT_VIEWER_MAIN_FIELDS } from './reportViewer/main'
+import { DATA_TABLE_VIEWER_MAIN_FIELDS } from './dataTableViewer/main'
+import { VIEW_RENDERER_MAIN_FIELDS } from './viewRenderer/main'
+import { REPEATER_MAIN_FIELDS } from './repeater/main'
+import { DIALOG_MAIN_FIELDS } from './dialog/main'
 import { AUTOCOMPLETE_MAIN_FIELDS } from './autocomplete/main'
 
 import { LAYOUT_MAIN_FIELDS } from './layout/main'
@@ -129,6 +128,44 @@ import { LAYOUT_CELL_STYLE_FIELDS } from './layout-cell/style'
 import { LAYOUT_CELL_RULES_FIELDS } from './layout-cell/rules'
 import { LAYOUT_CELL_ACTIONS_FIELDS } from './layout-cell/actions'
 
+import { POPOVER_MAIN_FIELDS } from './popover/main'
+import { WIZARD_MAIN_FIELDS } from './wizard/main'
+import { WIZARD_STEP_MAIN_FIELDS } from './wizard-step/main'
+import { TOGGLE_MAIN_FIELDS } from './toggle/main'
+import { DATA_GRID_MAIN_FIELDS } from './dataGrid/main'
+import { EXCEL_UPLOAD_MAIN_FIELDS } from './excelUpload/main'
+import { EXCEL_UPLOAD_ACTIONS_FIELDS } from './excelUpload/actions'
+import { EXCEL_UPLOAD_STYLE_FIELDS } from './excelUpload/style'
+import { EXCEL_UPLOAD_RULES_FIELDS } from './excelUpload/rules'
+
+import { BANNER_MAIN_FIELDS } from './banner/main'
+import { BANNER_STYLE_FIELDS } from './banner/style'
+import { BANNER_RULES_FIELDS } from './banner/rules'
+import { BANNER_ACTIONS_FIELDS } from './banner/actions'
+import { PAGE_NUMBER_MAIN_FIELDS } from './pageNumber/main'
+import { TREE_VIEW_MAIN_FIELDS } from './treeView/main'
+
+// KPI / data-viz components
+import { METRIC_FIELDS }          from './kpi/metric'
+import { TREND_FIELDS }           from './kpi/trend'
+import { BADGE_FIELDS }           from './kpi/badge'
+import { STATUS_DOT_FIELDS }      from './kpi/statusDot'
+import { ICON_BOX_FIELDS }        from './kpi/iconBox'
+import { CHART_FIELDS }           from './kpi/chart'
+import { GAUGE_FIELDS }           from './kpi/gauge'
+import { DONUT_FIELDS }           from './kpi/donut'
+import { FUNNEL_FIELDS }          from './kpi/funnel'
+import { BULLET_CHART_FIELDS }    from './kpi/bulletChart'
+import { COMPARISON_BARS_FIELDS } from './kpi/comparisonBars'
+import { TIMELINE_FIELDS }        from './kpi/timeline'
+import { TAG_LIST_FIELDS }        from './kpi/tagList'
+import { HEATMAP_GRID_FIELDS }    from './kpi/heatmapGrid'
+import { COUNTDOWN_FIELDS }       from './kpi/countdown'
+import { AVATAR_GROUP_FIELDS }    from './kpi/avatarGroup'
+import { RATING_FIELDS }          from './kpi/rating'
+import { STEP_STAGE_FIELDS }      from './kpi/stepStage'
+import { COLOR_SCALE_FIELDS }     from './kpi/colorScale'
+
 const GLOBAL_STYLE_FIELDS = [
   { name: 'elementCss', label: 'Element Css', type: 'expression' },
   { name: 'elementStyle', label: 'Element Style', type: 'expression' }
@@ -185,25 +222,18 @@ export function getMainFields(type) {
       return PROGRESS_LINE_MAIN_FIELDS
     case 'card':
       return CARD_MAIN_FIELDS
-    case 'column':
-      return COLUMN_MAIN_FIELDS
-    case 'column-group':
-      return COLUMN_GROUP_MAIN_FIELDS
-    case 'cell':
-      return CELL_MAIN_FIELDS
-    case 'header-cell':
-      return HEADER_CELL_MAIN_FIELDS
     case 'breadcrumb':
       return BREADCRUMB_MAIN_FIELDS
-    case 'table':
-      return TABLE_MAIN_FIELDS
-    case 'tab':
-    case 'wizard':
-    case 'wizard-step':
     case 'repeater':
-      return COMMON_MAIN_FIELDS
+      return REPEATER_MAIN_FIELDS
     case 'reportViewer':
       return REPORT_VIEWER_MAIN_FIELDS
+    case 'data-table-viewer':
+      return DATA_TABLE_VIEWER_MAIN_FIELDS
+    case 'viewRenderer':
+      return VIEW_RENDERER_MAIN_FIELDS
+    case 'dialog':
+      return DIALOG_MAIN_FIELDS
     case 'autocomplete':
       return AUTOCOMPLETE_MAIN_FIELDS
     case 'layout':
@@ -212,6 +242,49 @@ export function getMainFields(type) {
       return LAYOUT_CELL_MAIN_FIELDS
     case 'container':
       return CONTAINER_MAIN_FIELDS
+    case 'popover':
+      return POPOVER_MAIN_FIELDS
+    case 'wizard':
+      return WIZARD_MAIN_FIELDS
+    case 'wizard-step':
+      return WIZARD_STEP_MAIN_FIELDS
+    case 'toggle':
+      return TOGGLE_MAIN_FIELDS
+    case 'data-grid':
+      return DATA_GRID_MAIN_FIELDS
+    case 'excel-upload':
+      return EXCEL_UPLOAD_MAIN_FIELDS
+    case 'banner':
+      return BANNER_MAIN_FIELDS
+    case 'pageNumber':
+      return PAGE_NUMBER_MAIN_FIELDS
+    case 'treeView':
+      return TREE_VIEW_MAIN_FIELDS
+
+    // KPI / data-viz
+    case 'kpi-metric':       return METRIC_FIELDS
+    case 'kpi-trend':        return TREND_FIELDS
+    case 'kpi-badge':        return BADGE_FIELDS
+    case 'kpi-status-dot':   return STATUS_DOT_FIELDS
+    case 'kpi-icon-box':     return ICON_BOX_FIELDS
+    case 'kpi-chart':
+    case 'kpi-sparkline':   // legacy alias
+    case 'kpi-mini-bar':    // legacy alias
+      return CHART_FIELDS
+    case 'kpi-gauge':        return GAUGE_FIELDS
+    case 'kpi-donut':        return DONUT_FIELDS
+    case 'kpi-funnel':       return FUNNEL_FIELDS
+    case 'kpi-bullet':       return BULLET_CHART_FIELDS
+    case 'kpi-comparison':   return COMPARISON_BARS_FIELDS
+    case 'kpi-timeline':     return TIMELINE_FIELDS
+    case 'kpi-tag-list':     return TAG_LIST_FIELDS
+    case 'kpi-heatmap':      return HEATMAP_GRID_FIELDS
+    case 'kpi-countdown':    return COUNTDOWN_FIELDS
+    case 'kpi-avatar-group': return AVATAR_GROUP_FIELDS
+    case 'kpi-rating':       return RATING_FIELDS
+    case 'kpi-step-stage':   return STEP_STAGE_FIELDS
+    case 'kpi-color-scale':  return COLOR_SCALE_FIELDS
+
     default:
       return COMMON_MAIN_FIELDS
   }
@@ -291,6 +364,12 @@ export function getStyleFields(type) {
     case 'layout-cell':
       styleFields = LAYOUT_CELL_STYLE_FIELDS
       break
+    case 'excel-upload':
+      styleFields = EXCEL_UPLOAD_STYLE_FIELDS
+      break
+    case 'banner':
+      styleFields = BANNER_STYLE_FIELDS
+      break
     default:
       styleFields = COMMON_STYLE_FIELDS
       break
@@ -348,6 +427,10 @@ export function getRulesFields(type) {
       return LAYOUT_RULES_FIELDS
     case 'layout-cell':
       return LAYOUT_CELL_RULES_FIELDS
+    case 'excel-upload':
+      return EXCEL_UPLOAD_RULES_FIELDS
+    case 'banner':
+      return BANNER_RULES_FIELDS
     default:
       return COMMON_RULES_FIELDS
   }
@@ -401,6 +484,10 @@ export function getActionsFields(type) {
       return LAYOUT_ACTIONS_FIELDS
     case 'layout-cell':
       return LAYOUT_CELL_ACTIONS_FIELDS
+    case 'excel-upload':
+      return EXCEL_UPLOAD_ACTIONS_FIELDS
+    case 'banner':
+      return BANNER_ACTIONS_FIELDS
     default:
       return COMMON_ACTIONS_FIELDS
   }

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

@@ -1 +1,4 @@
-export const INPUT_ACTIONS_FIELDS = []
+export const INPUT_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/input/main.js

@@ -1,14 +1,23 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const INPUT_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'label', label: 'Label', type: 'expression' },
-  { name: 'value', label: 'Value', type: 'expression' },
+  { 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: 'disabled', label: 'Disabled', type: 'boolean' },
-  { name: 'enabled', label: 'Enabled', type: 'boolean' }
+  { name: 'size',        label: 'Size',        type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'prefix',      label: 'Prefix',       type: 'icon' },
+  { name: 'suffix',      label: 'Suffix',       type: 'icon' },
+  { name: 'labelPrefix',       label: 'Label Prefix',        type: 'icon' },
+  { name: 'labelSuffix',       label: 'Label Suffix',        type: 'icon' },
+  { name: 'labelIconSize',     label: 'Label Icon Size',     type: 'expression' },
+  { name: 'labelIconColor',    label: 'Label Icon Color',    type: 'expression' },
+  { name: 'labelFontSize',     label: 'Label Font Size',     type: 'expression' },
+  { name: 'labelFontWeight',   label: 'Label Font Weight',   type: 'expression' },
+  { name: 'labelColor',        label: 'Label Color',         type: 'expression' },
+  { name: 'labelFontStyle',    label: 'Label Font Style',    type: 'select', options: ['normal', 'italic', 'oblique'] },
+  { name: 'labelLetterSpacing',label: 'Label Letter Spacing',type: 'expression' },
+  { name: 'disabled',    label: 'Disabled',    type: 'boolean' },
+  { name: 'enabled',     label: 'Enabled',     type: 'boolean' },
 ]

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

@@ -0,0 +1,22 @@
+export const AVATAR_GROUP_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Bind dataKey to an array of user objects.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "assignees": [\n  { "name": "Sara Lee",  "image": "https://..." },\n  { "name": "John Doe", "color": "#9c27b0" },\n  { "name": "Ali Hassan" }\n] }\n→ dataKey: "assignees"\n\nColor priority: colorField → Color Schema → initials hash',
+  },
+  { name: 'dataKey',      label: 'Data Key',     type: 'expression' },
+  { name: 'nameField',    label: 'Name Field',   type: 'expression', placeholder: 'default: name' },
+  { name: 'imageField',   label: 'Image Field',  type: 'expression', placeholder: 'default: image' },
+  { name: 'colorField',   label: 'Color Field',  type: 'expression', placeholder: 'per-avatar color override' },
+  { name: 'tooltipField', label: 'Tooltip Field',type: 'expression', placeholder: 'defaults to nameField' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'colorSchema',  label: 'Color Schema',     type: 'color-schema' },
+  { name: 'size',         label: 'Avatar Size (px)', type: 'expression' },
+  { name: 'maxVisible',   label: 'Max Visible',      type: 'expression' },
+  { name: 'overlap',      label: 'Overlap (px)',      type: 'expression' },
+  { name: 'borderColor',  label: 'Border Color',      type: 'expression' },
+  { name: 'borderWidth',  label: 'Border Width',      type: 'expression' },
+  { name: 'direction',    label: 'Stack Direction',   type: 'select', options: ['ltr','rtl'] },
+  { name: 'align',        label: 'Align',             type: 'select', options: ['left','center','right'] },
+]

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

@@ -0,0 +1,17 @@
+export const BADGE_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Reads value from data[valueKey]. Thresholds map values to colors/labels.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "status": "active" }   ← string value\n{ "score": 87 }            ← numeric value\n→ valueKey: "status"\n   threshold label overrides the displayed text',
+  },
+  { name: 'valueKey', label: 'Value Key', type: 'expression' },
+  { name: 'label',    label: 'Static Label', type: 'expression', placeholder: 'Leave empty to show raw value' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'variant', label: 'Variant', type: 'select', options: ['soft','outlined','filled'] },
+  { name: 'size',    label: 'Size',    type: 'select', options: ['small','medium','large'] },
+  { name: 'dot',     label: 'Show Color Dot', type: 'boolean' },
+  { name: 'align',   label: 'Align',   type: 'select', options: ['left','center','right'] },
+
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+]

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

@@ -0,0 +1,47 @@
+export const BULLET_CHART_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Reads actual value and target from data keys. Optional range bands can define "good" zone.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "revenue": 82000,\n  "target": 100000 }\n→ valueKey: "revenue"\n   targetKey: "target"\n   min: 0, max: 150000\n\nOptional good-range band:\n   goodFrom: 70000  goodTo: 120000\n   (static numbers or expressions that resolve to numbers)',
+  },
+  { name: 'valueKey',  label: 'Actual Value Key', type: 'expression' },
+  { name: 'targetKey', label: 'Target Key',       type: 'expression' },
+  { name: 'min',       label: 'Min',              type: 'expression' },
+  { name: 'max',       label: 'Max',              type: 'expression' },
+  { name: 'label',    label: 'Label',     type: 'expression' },
+  { name: 'sublabel', label: 'Sub-label', type: 'expression' },
+
+  { name: 'fmt_note', type: 'note', label: '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: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'height',       label: 'Height (px)',         type: 'expression' },
+  {
+    name: 'bar_color_note', type: 'note', label: 'Bar Color',
+    text: 'Color Schema controls the actual bar color when no threshold matches.\nSet Actual Bar Color to override the schema base color directly.',
+  },
+  { name: 'colorSchema',  label: 'Color Schema',        type: 'color-schema' },
+  { name: 'actualColor',  label: 'Actual Bar Color',    type: 'expression', placeholder: 'overrides schema base color' },
+  { name: 'targetColor',  label: 'Target Marker Color', type: 'expression' },
+  { name: 'trackColor',   label: 'Track Background',    type: 'expression', placeholder: 'default: action.hover' },
+  { name: 'goodColor',    label: 'Good Range Color',    type: 'expression' },
+  { name: 'goodFrom',     label: 'Good Range From',     type: 'expression', placeholder: 'value or data key' },
+  { name: 'goodTo',       label: 'Good Range To',       type: 'expression', placeholder: 'value or data key' },
+  { name: 'showTarget',   label: 'Show Target Marker',  type: 'boolean' },
+  { name: 'showLabels',   label: 'Show Min/Max Labels', type: 'boolean' },
+
+  { name: 'thresholds_note', type: 'note', label: 'Thresholds', text: 'Apply conditional bar colors based on the actual value.' },
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+
+  { name: 'label_style_note', type: 'note', label: 'Label Style' },
+  { name: 'labelFontSize',   label: 'Label Font Size',   type: 'expression' },
+  { name: 'labelFontWeight', label: 'Label Font Weight', type: 'select', options: ['300','400','500','600','700','800'] },
+  { name: 'labelColor',      label: 'Label Color',       type: 'expression', placeholder: 'e.g. text.secondary or #555' },
+
+  { name: 'sublabel_style_note', type: 'note', label: 'Sub-label Style' },
+  { name: 'sublabelFontSize',   label: 'Sub-label Font Size',   type: 'expression' },
+  { name: 'sublabelFontWeight', label: 'Sub-label Font Weight', type: 'select', options: ['300','400','500','600','700','800'] },
+  { name: 'sublabelColor',      label: 'Sub-label Color',       type: 'expression', placeholder: 'e.g. text.disabled or #999' },
+]

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

@@ -0,0 +1,55 @@
+export const CHART_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Bind dataKey to an array in page data, or return one directly from an expression.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: 'dataKey must always resolve to a flat array — never a plain object.\n\nSingle-series (bar / line / area):\n{ "sales": [\n  { "label": "Mon", "value": 420 },\n  { "label": "Tue", "value": 380 }\n] }\n→ dataKey: "sales"\n   valueField: "value"\n\nMulti-series (type: multi) — all series in the SAME flat array:\n{ "stats": [\n  { "month": "Jan", "revenue": 8200, "cost": 3100 },\n  { "month": "Feb", "revenue": 9400, "cost": 3400 }\n] }\n→ dataKey: "stats", labelField: "month"\n   Series 1: field "revenue"\n   Series 2: field "cost"\n\nDirect expression return:\n→ return [{ label: "A", value: 10 }, ...]',
+  },
+  { name: 'dataKey',    label: 'Data Key',    type: 'expression' },
+  { name: 'valueField', label: 'Value Field', type: 'expression', placeholder: 'default: value' },
+  { name: 'labelField', label: 'Label Field', type: 'expression', placeholder: 'default: label' },
+
+  { name: 'type_note', type: 'note', label: 'Chart Type' },
+  {
+    name: 'chartType', label: 'Type', type: 'select',
+    options: ['bar', 'bar-h', 'line', 'area', 'multi'],
+  },
+
+  { name: 'series_note', type: 'note', label: 'Multi-Series', text: 'Used when Type is "multi". Each series maps to a field in your data objects and can have its own line/area/bar style.' },
+  { name: 'series', label: 'Series', type: 'series-editor' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance (single series)' },
+  { name: 'colorSchema',     label: 'Color Schema',    type: 'color-schema' },
+  { name: 'color',          label: 'Color',           type: 'expression', placeholder: 'Overridden by thresholds' },
+  { name: 'height',         label: 'Height (px)',      type: 'expression' },
+  { name: 'strokeWidth',    label: 'Stroke Width',     type: 'expression', placeholder: 'line / area only' },
+  { name: 'smooth',         label: 'Smooth Curve',     type: 'boolean' },
+  { name: 'showDot',        label: 'Show Dots',        type: 'boolean' },
+  { name: 'fillOpacity',    label: 'Fill Opacity',     type: 'expression', placeholder: 'area only, default: 0.15' },
+  { name: 'upperRadius',    label: 'Bar Upper Radius', type: 'expression', placeholder: 'bar only, default: 3' },
+  { name: 'lowerRadius',    label: 'Bar Lower Radius', type: 'expression', placeholder: 'bar only, default: 0' },
+  { name: 'highlightLast',  label: 'Highlight Last',   type: 'boolean' },
+  { name: 'highlightColor', label: 'Highlight Color',  type: 'expression' },
+
+  { name: 'display_note', type: 'note', label: 'Display' },
+  { name: 'showXAxis',    label: 'Show Labels',    type: 'boolean' },
+  { name: 'showYAxis',    label: 'Show Y Axis',    type: 'boolean' },
+  { name: 'showTooltip',  label: 'Show Tooltip',   type: 'boolean' },
+  { name: 'showValues',   label: 'Show Values',    type: 'boolean' },
+  { name: 'showLegend',   label: 'Show Legend',    type: 'boolean', },
+  { name: 'prefix',       label: 'Prefix',         type: 'expression' },
+  { name: 'suffix',       label: 'Suffix',         type: 'expression' },
+
+  { name: 'ref_note', type: 'note', label: 'Reference Line' },
+  { name: 'referenceValue', label: 'Reference Value', type: 'expression' },
+
+  { name: 'thresholds', label: 'Thresholds (single series)', type: 'thresholds-editor' },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user clicks a data point. Available in the action:\n  clickedItem   — the full data row object\n  clickedValue  — the numeric value of the clicked point\n  clickedField  — the series field key that was clicked\n  clickedLabel  — the x-axis label\n  clickedIndex  — position in the data array',
+  },
+  {
+    name: 'onDataClick', type: 'kpi-action', label: 'On Data Point Click',
+    context: ['clickedItem', 'clickedValue', 'clickedField', 'clickedLabel', 'clickedIndex'],
+  },
+]