robobyte-front-builder 1.0.19 → 1.0.23

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

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

@@ -0,0 +1,60 @@
+export const COLOR_SCALE_FIELDS = [
+  {
+    name: 'data_note', type: 'note', label: 'Data',
+    text: 'Positions one or more markers on a color scale bar between min and max.\n\nPrimary marker: set valueKey to a single numeric value.\nAdditional markers: use the Markers list below.',
+  },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "riskScore": 67, "target": 80 }\n→ valueKey: "riskScore"\n→ Marker 2 valueKey: "target"\n\nGradient (scaleMode: gradient):\n  Color Schema → Tints of red gives a white→red ramp\n  Color Schema → Custom [\"#e8f5e9\", \"#1b5e20\"] gives green-to-dark-green\n\nSteps (scaleMode: steps, or ≥ 2 thresholds):\n  Threshold colors override; schema colors fill any zone without a threshold color',
+  },
+
+  { name: 'valueKey', label: 'Primary Value Key', type: 'expression', placeholder: 'Numeric field or expression' },
+  { name: 'min',      label: 'Min',               type: 'expression' },
+  { name: 'max',      label: 'Max',               type: 'expression' },
+  { name: 'label',    label: '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: 'coloring_note', type: 'note', label: 'Track Coloring',
+    text: '"gradient" → smooth color ramp using the Color Schema colors as gradient stops.\n"steps" → discrete zone blocks; schema colors fill zones, threshold colors override per-zone.\n\nColor Schema controls the palette for both modes the same way as other KPI components.',
+  },
+  {
+    name: 'scaleMode', label: 'Scale Mode', type: 'select',
+    options: ['gradient', 'steps'],
+  },
+  { name: 'colorSchema', label: 'Color Schema', type: 'color-schema' },
+  { name: 'segments',    label: 'Gradient Stops', type: 'expression', placeholder: 'Gradient mode — default: 5' },
+
+  {
+    name: 'thresholds_note', type: 'note', label: 'Thresholds (Steps Mode)',
+    text: 'Define zone breakpoints and colors. Each threshold value becomes a zone boundary. Threshold colors take priority over Color Schema in steps mode.',
+  },
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'height',       label: 'Track Height (px)', type: 'expression' },
+  { name: 'borderRadius', label: 'Border Radius',     type: 'expression' },
+  { name: 'showLabels',   label: 'Show Min/Max Labels', type: 'boolean' },
+
+  { name: 'label_style_note', type: 'note', label: 'Label Style' },
+  { name: 'labelFontSize',   label: 'Font Size',   type: 'expression' },
+  { name: 'labelFontWeight', label: 'Font Weight', type: 'select', options: ['300','400','500','600','700','800'] },
+  { name: 'labelColor',      label: 'Color',       type: 'expression', placeholder: 'e.g. text.secondary or #555' },
+
+  {
+    name: 'primary_marker_note', type: 'note', label: 'Primary Marker',
+    text: 'The main marker driven by valueKey above.',
+  },
+  { name: 'showMarker',  label: 'Show Primary Marker', type: 'boolean' },
+  { name: 'markerColor', label: 'Marker Color',        type: 'expression', placeholder: 'default: #333' },
+
+  {
+    name: 'multi_markers_note', type: 'note', label: 'Additional Markers',
+    text: 'Add extra markers with their own value key, color, shape, and label. Useful for target, average, benchmark alongside the primary value.',
+  },
+  { name: 'markers', label: 'Markers', type: 'markers-editor' },
+]

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

@@ -0,0 +1,41 @@
+export const COMPARISON_BARS_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Bind dataKey to an array. Each item renders a labeled horizontal bar scaled against the max value in the set.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "topProducts": [\n  { "label": "Widget A", "value": 4820, "color": "#1976d2" },\n  { "label": "Widget B", "value": 3210 },\n  { "label": "Widget C", "value": 5600 }\n] }\n→ dataKey: "topProducts"\n   labelField: "label"  valueField: "value"\n   colorField: "color" (optional per-item color)\n\nOverride the scale ceiling:\n   maxKey: "totalBudget"  (reads data["totalBudget"] as the 100% mark)',
+  },
+  { name: 'dataKey',    label: 'Data Key',    type: 'expression' },
+  { name: 'labelField', label: 'Label Field', type: 'expression', placeholder: 'default: label' },
+  { name: 'valueField', label: 'Value Field', type: 'expression', placeholder: 'default: value' },
+  { name: 'colorField', label: 'Color Field', type: 'expression', placeholder: 'default: color — per-item hex in data' },
+  { name: 'maxKey',     label: 'Max Value Key', type: 'expression', placeholder: 'data key whose value = 100 % bar width' },
+
+  { 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: 'color_schema_note', type: 'note', label: 'Bar Colors',
+    text: 'Color Schema controls bar colors when the data has no per-item color field and no threshold fires.\nPalette: cycles through the global palette.\nTints: monochromatic shades of one base color.\nData: rely entirely on per-item color field.\nCustom: your own JSON color array.\nDefault Color is the fallback when schema mode is "palette" and you want a single solid color.',
+  },
+  { name: 'colorSchema',  label: 'Color Schema',     type: 'color-schema' },
+  { name: 'color',        label: 'Default Color',    type: 'expression', placeholder: 'fallback when schema = palette' },
+  { name: 'trackColor',   label: 'Track Background', type: 'expression', placeholder: 'default: action.hover' },
+  { name: 'height',       label: 'Bar Height (px)',  type: 'expression', placeholder: 'default: 8' },
+  { name: 'upperRadius',  label: 'Bar Radius (top)', type: 'expression', placeholder: 'default: 4' },
+  { name: 'lowerRadius',  label: 'Bar Radius (bottom)', type: 'expression', placeholder: 'default: 0' },
+  { name: 'gap',          label: 'Gap Between Bars (px)', type: 'expression', placeholder: 'default: 10' },
+  { name: 'labelWidth',   label: 'Label Column Width (px)', type: 'expression', placeholder: 'default: 100' },
+  { name: 'showLabels',   label: 'Show Labels',      type: 'boolean' },
+  { name: 'showValues',   label: 'Show Values',      type: 'boolean' },
+  { name: 'sortDesc',     label: 'Sort Descending',  type: 'boolean' },
+  { name: 'maxItems',     label: 'Max Bars',         type: 'expression', placeholder: 'limit number of bars shown' },
+
+  {
+    name: 'thresholds_note', type: 'note', label: 'Thresholds',
+    text: 'Apply conditional bar color based on each bar\'s value. Overrides Color Schema.',
+  },
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+]

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

@@ -0,0 +1,46 @@
+export const COUNTDOWN_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Bind targetDateKey to a page-data key that holds a date/time value, or enter a fixed value in Static Target Date. All common date representations are accepted.' },
+  {
+    name: 'data_example', type: 'note', label: 'Accepted date formats',
+    text: 'ISO datetime string:\n  "2025-12-31T23:59:59"\n  "2025-12-31T23:59:59Z"\n\nISO date-only (local midnight):\n  "2025-12-31"\n\nEpoch milliseconds (number):\n  1735689599000\n\nEpoch seconds (number < 1e11):\n  1735689599\n\nJS Date object (from expression):\n  new Date("2025-12-31")\n  new Date(data.ts * 1000)\n\nData binding example:\n{ "dealDeadline": "2025-12-31T23:59:59" }\n→ targetDateKey: "dealDeadline"\n\nExpression example (returns Date directly):\n→ targetDateKey: new Date(data.expiresAt)',
+  },
+  { name: 'targetDateKey', label: 'Target Date Key', type: 'expression', placeholder: 'data key or expression returning a date' },
+  { name: 'targetDate',    label: 'Static Target Date', type: 'expression', placeholder: 'e.g. 2025-12-31 or 2025-12-31T23:59:59' },
+  { name: 'doneLabel',     label: 'Done Label',         type: 'expression', placeholder: 'Shown when countdown reaches zero' },
+  { name: 'label',         label: 'Label',              type: 'expression', placeholder: 'Optional heading above the digits' },
+
+  { name: 'segments_note', type: 'note', label: 'Segments' },
+  { name: 'showDays',    label: 'Show Days',    type: 'boolean' },
+  { name: 'showHours',   label: 'Show Hours',   type: 'boolean' },
+  { name: 'showMinutes', label: 'Show Minutes', type: 'boolean' },
+  { name: 'showSeconds', label: 'Show Seconds', type: 'boolean' },
+
+  { name: 'unit_labels_note', type: 'note', label: 'Unit Label Overrides', text: 'Override the default unit labels shown below each digit group.' },
+  { name: 'labelDays',    label: 'Days Label',    type: 'expression', placeholder: 'default: days' },
+  { name: 'labelHours',   label: 'Hours Label',   type: 'expression', placeholder: 'default: hrs' },
+  { name: 'labelMinutes', label: 'Minutes Label', type: 'expression', placeholder: 'default: min' },
+  { name: 'labelSeconds', label: 'Seconds Label', type: 'expression', placeholder: 'default: sec' },
+
+  { name: 'layout_note', type: 'note', label: 'Layout' },
+  { name: 'size',      label: 'Size',      type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'align',     label: 'Align',     type: 'select', options: ['left', 'center', 'right'] },
+  { name: 'separator', label: 'Separator', type: 'expression', placeholder: 'default: :' },
+
+  { name: 'color_note', type: 'note', label: 'Colors' },
+  { name: 'color',          label: 'Digit Color',      type: 'expression', placeholder: 'Overridden by thresholds' },
+  { name: 'unitColor',      label: 'Unit Label Color', type: 'expression', placeholder: 'default: text.disabled' },
+  { name: 'separatorColor', label: 'Separator Color',  type: 'expression', placeholder: 'default: text.disabled' },
+  { name: 'doneLabelColor', label: 'Done Label Color', type: 'expression', placeholder: 'default: success.main' },
+
+  { name: 'digit_style_note', type: 'note', label: 'Digit Style' },
+  { name: 'numberFontWeight', label: 'Digit Font Weight', type: 'select', options: ['300','400','500','600','700','800','900'], },
+
+  { name: 'label_style_note', type: 'note', label: 'Label Style', text: 'Styles the optional heading label above the digits.' },
+  { 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: 'default: text.secondary' },
+
+  { name: 'thresholds', label: 'Thresholds (on remaining seconds)', type: 'thresholds-editor' },
+
+  { name: 'onDoneCode', label: 'On Done', type: 'code', codeType: 'calculation' },
+]

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

@@ -0,0 +1,51 @@
+export const DONUT_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: 'Single series:\n{ "salesByRegion": [\n  { "name": "North", "value": 4200, "color": "#1976d2" },\n  { "name": "South", "value": 3100, "color": "#e91e63" }\n] }\n→ dataKey: "salesByRegion"\n\nSlice colors are read from each item\'s "color" field automatically.\nUse colorField to point to a differently-named field (e.g. "hex").\nFalls back to the Colors palette when no color is present.\n\nMulti-series (concentric rings):\n{ "thisYear": [{ "name": "Q1", "value": 3200 }, ...],\n  "lastYear": [{ "name": "Q1", "value": 2800 }, ...] }\n→ donutType: "multi"\n   Ring 1 (inner): field "thisYear"\n   Ring 2 (outer): field "lastYear"',
+  },
+
+  { name: 'type_note', type: 'note', label: 'Type' },
+  { name: 'donutType', label: 'Donut Type', type: 'select', options: ['single', 'multi'] },
+
+  { name: 'single_note', type: 'note', label: 'Single Series', text: 'Used when Donut Type is "single".' },
+  { name: 'dataKey',     label: 'Data Key',   type: 'expression' },
+  { name: 'nameField',   label: 'Name Field', type: 'expression', placeholder: 'default: name' },
+  { name: 'valueField',  label: 'Value Field', type: 'expression', placeholder: 'default: value' },
+  { name: 'colorField',  label: 'Color Field', type: 'expression', placeholder: 'default: color — field in each slice object' },
+  { name: 'centerLabel', label: 'Center Label',     type: 'expression' },
+  { name: 'centerKey',   label: 'Center Value Key', type: 'expression', placeholder: 'data key whose value shows in the hole' },
+
+  { name: 'multi_note', type: 'note', label: 'Multi-Series', text: 'Used when Donut Type is "multi". Each ring is a separate data array. First ring = innermost, last = outermost. Set each ring\'s Data Field to the data key that returns its slice array.' },
+  { name: 'series', label: 'Rings', type: 'rings-editor' },
+
+  { 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: 'color_schema_note', type: 'note', label: 'Slice Colors (single series)',
+    text: 'Controls how slices are colored when the data has no "color" field.\nPalette: cycles through the global palette.\nTints: monochromatic shades of one base color.\nData: only per-slice data colors — no fallback.\nCustom: your own JSON color array.',
+  },
+  { name: 'colorSchema', label: 'Color Schema', type: 'color-schema' },
+  { name: 'height',      label: 'Height (px)',    type: 'expression' },
+  { name: 'innerRadius', label: 'Inner Radius %', type: 'expression', placeholder: 'default: 55 — hole size' },
+  { name: 'outerRadius', label: 'Outer Radius %', type: 'expression', placeholder: 'default: 80 — overall size' },
+  {
+    name: 'padAngle', label: 'Gap Between Slices', type: 'expression',
+    placeholder: 'degrees, default: 2 — set 0 for no gap',
+  },
+  {
+    name: 'startAngle', label: 'First Slice Position', type: 'select',
+    options: ['90', '0', '180', '270'],
+  },
+  { name: 'showTooltip',    label: 'Show Tooltip',    type: 'boolean' },
+  { name: 'showLegend',     label: 'Show Legend',     type: 'boolean' },
+  { name: 'legendPosition', label: 'Legend Position', type: 'select', options: ['bottom','right','top'] },
+  {
+    name: 'colors', label: 'Fallback Palette (JSON)',  type: 'expression',
+    placeholder: '["#1976d2","#e91e63","#4caf50"] — used when slice has no color field',
+  },
+]

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

@@ -0,0 +1,25 @@
+export const FUNNEL_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Bind dataKey to an array of stage objects ordered from widest (top) to narrowest (bottom).' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "pipeline": [\n  { "label": "Leads",     "value": 1200 },\n  { "label": "Qualified", "value": 640 },\n  { "label": "Proposal",  "value": 280 },\n  { "label": "Closed",    "value": 95 }\n] }\n→ dataKey: "pipeline"\n   labelField: "label", valueField: "value"\n\nOptional per-item color:\n  { "label": "Leads", "value": 1200, "color": "#1976d2" }',
+  },
+  { name: 'dataKey',    label: 'Data Key',    type: 'expression' },
+  { name: 'labelField', label: 'Label Field', type: 'expression', placeholder: 'default: label' },
+  { name: 'valueField', label: 'Value Field', type: 'expression', placeholder: 'default: value' },
+  { name: 'colorField', label: 'Color Field', type: 'expression', placeholder: 'default: color — per-item override' },
+
+  { 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: 'colorSchema',  label: 'Color Schema',      type: 'color-schema' },
+  { name: 'height',       label: 'Height (px)',        type: 'expression' },
+  { name: 'barRadius',    label: 'Bar Radius',         type: 'expression' },
+  { name: 'gap',          label: 'Gap Between Bars',   type: 'expression' },
+  { name: 'showValues',   label: 'Show Values',        type: 'boolean' },
+  { name: 'showLabels',   label: 'Show Labels',        type: 'boolean' },
+  { name: 'showPercent',  label: 'Show Conversion %',  type: 'boolean' },
+]

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

@@ -0,0 +1,39 @@
+export const GAUGE_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Reads a numeric value from data[valueKey]. Set min/max to define the scale.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "cpuUsage": 72 }\n→ valueKey: "cpuUsage", min: 0, max: 100\n\n{ "temperature": 38.5 }\n→ valueKey: "temperature", min: 0, max: 50\n   format: "number", suffix: "°C"',
+  },
+  { name: 'valueKey', label: 'Value 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','bytes','duration'] },
+  { name: 'decimals', label: 'Decimals', type: 'expression' },
+  { name: 'prefix',   label: 'Prefix',   type: 'expression' },
+  { name: 'suffix',   label: 'Suffix',   type: 'expression' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'size',        label: 'Size (px)',      type: 'expression' },
+  { name: 'strokeWidth', label: 'Track Width',    type: 'expression' },
+  { name: 'color',       label: 'Arc Color',      type: 'expression', placeholder: 'Overridden by thresholds' },
+  { name: 'trackColor',  label: 'Track Color',    type: 'expression' },
+  { name: 'showValue',   label: 'Show Value',     type: 'boolean' },
+  { name: 'showMinMax',  label: 'Show Min/Max',   type: 'boolean' },
+  { name: 'needleMode',  label: 'Needle Mode',    type: 'boolean' },
+
+  { name: 'label_style_note', type: 'note', label: 'Label Style', text: 'Label renders inside the SVG arc. Font size is relative to gauge size when left blank.' },
+  { name: 'labelFontSize',   label: 'Label Font Size (px)', type: 'expression', placeholder: 'Default: proportional to size' },
+  { name: 'labelFontWeight', label: 'Label Font Weight',    type: 'select', options: ['normal','300','400','500','600','700','800'] },
+  { name: 'labelColor',      label: 'Label Color',          type: 'expression', placeholder: 'e.g. #888 or #333' },
+
+  { name: 'sublabel_style_note', type: 'note', label: 'Sub-label Style', text: 'Sub-label renders below the SVG.' },
+  { 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.secondary or #999' },
+
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+]

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

@@ -0,0 +1,96 @@
+export const HEATMAP_GRID_FIELDS = [
+  {
+    name: 'data_note', type: 'note', label: 'Data',
+    text: 'Three layout modes:\n\n① Flat wrap — flat array + cols to wrap into rows.\n② Row/col fields — each item has rowField + colField; renderer groups them into a matrix.\n③ Single-row strip — no cols/row fields.',
+  },
+  {
+    name: 'ex_calendar', type: 'note', label: 'Example — activity calendar (flat wrap)',
+    text: '[\n  { "label": "Mon W1", "value": 8 },\n  { "label": "Tue W1", "value": 31 },\n  ... (28 items total)\n]\n→ dataKey: "activity"  cols: 7\n   colLabels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]\n   rowLabels: ["W1","W2","W3","W4"]\n   showRowLabels: true  showColLabels: true  colLabelPosition: bottom\n   colorMode: gradient  colorSchema: tints of green\n   showLegend: true  legendPosition: top',
+  },
+  {
+    name: 'ex_matrix', type: 'note', label: 'Example — matrix with row × col fields',
+    text: '[\n  { "row": "January", "col": "London", "value": 42 },\n  { "row": "January", "col": "Paris",  "value": 38 },\n  ...\n]\n→ dataKey: "salesMatrix"\n   rowField: "row"  colField: "col"\n   showRowLabels: true   rowLabelWidth: 80\n   showColLabels: true   colLabelPosition: bottom\n   colorMode: gradient   fillWidth: true\n   showLegend: true      legendPosition: top\n   gap: 1                cellHeight: 36',
+  },
+  {
+    name: 'ex_rag', type: 'note', label: 'Example — RAG status grid (threshold mode)',
+    text: '[\n  { "label": "Service A", "value": 97 },\n  { "label": "Service B", "value": 43 },\n  { "label": "Service C", "value": 12 }\n]\n→ colorMode: threshold\n   Thresholds: < 50 → error, < 80 → warning, ≥ 80 → success\n   cellShape: circle  cellSize: 20  fillWidth: false\n   gap: 4  showLegend: true  showTooltip: true',
+  },
+
+  { 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  (shown in tooltip)' },
+
+  { name: 'layout_note', type: 'note', label: 'Grid Layout' },
+  { name: 'cols',      label: 'Columns (flat-wrap)', type: 'expression', placeholder: 'e.g. 7  →  7 cells per row' },
+  { name: 'rowField',  label: 'Row Field',           type: 'expression', placeholder: 'default: row' },
+  { name: 'colField',  label: 'Col Field',           type: 'expression', placeholder: 'default: col' },
+  {
+    name: 'fillWidth', label: 'Fill Width', type: 'boolean',
+  },
+  { name: 'cellHeight',   label: 'Cell Height (px)', type: 'expression', placeholder: 'default: 32' },
+  { name: 'cellSize',     label: 'Cell Size (px)',   type: 'expression', placeholder: 'Used when Fill Width is off (default: 24)' },
+  { name: 'gap',          label: 'Gap / Separator (px)', type: 'expression', placeholder: 'default: 1  (shows as grid lines)' },
+  { name: 'separatorColor', label: 'Separator Color', type: 'expression', placeholder: 'default: divider  (MUI color or hex)' },
+
+  { name: 'cell_note', type: 'note', label: 'Cell Appearance' },
+  { name: 'cellShape',    label: 'Cell Shape',    type: 'select', options: ['square', 'rounded', 'circle'] },
+  { name: 'borderRadius', label: 'Border Radius', type: 'expression', placeholder: 'rounded shape only' },
+
+  { name: 'row_label_note', type: 'note', label: 'Row Labels (Left)' },
+  { name: 'showRowLabels', label: 'Show Row Labels', type: 'boolean' },
+  {
+    name: 'rowLabels', label: 'Row Labels (static)', type: 'expression',
+    placeholder: '["Jan","Feb","Mar",...] — overrides data-driven',
+  },
+  { name: 'rowLabelField', label: 'Row Label Field', type: 'expression', placeholder: 'field on item  (defaults to rowField)' },
+  { name: 'rowLabelWidth', label: 'Row Label Width (px)', type: 'expression', placeholder: 'default: 70' },
+  { name: 'rowLabelAlign', label: 'Row Label Align', type: 'select', options: ['right', 'left', 'center'] },
+
+  { name: 'col_label_note', type: 'note', label: 'Col Labels' },
+  { name: 'showColLabels',    label: 'Show Col Labels',    type: 'boolean' },
+  { name: 'colLabelPosition', label: 'Col Label Position', type: 'select', options: ['bottom', 'top'] },
+  {
+    name: 'colLabels', label: 'Col Labels (static)', type: 'expression',
+    placeholder: '["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]',
+  },
+  { name: 'colLabelField', label: 'Col Label Field', type: 'expression', placeholder: 'field on item  (defaults to colField)' },
+
+  { name: 'axis_style_note', type: 'note', label: 'Axis Label Style' },
+  { name: 'axisLabelFontSize', label: 'Font Size',  type: 'expression', placeholder: 'default: 11' },
+  { name: 'axisLabelColor',    label: 'Color',      type: 'expression', placeholder: 'default: text.secondary' },
+
+  { 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: 'color_note', type: 'note', label: 'Coloring',
+    text: '"gradient" → value-mapped interpolation through Color Schema stops.\n"threshold" → zone colors; schema fills zones without an explicit threshold color.\n"schema" → each cell colored by palette index (categorical / position-based).',
+  },
+  { name: 'colorMode',  label: 'Color Mode',  type: 'select', options: ['gradient', 'threshold', 'schema'] },
+  { name: 'colorSchema', label: 'Color Schema', type: 'color-schema' },
+  { name: 'emptyColor', label: 'Empty Cell Color', type: 'expression', placeholder: 'default: #f5f5f5' },
+  { name: 'minValue',   label: 'Min Override', type: 'expression', placeholder: 'Auto-detected from data' },
+  { name: 'maxValue',   label: 'Max Override', type: 'expression', placeholder: 'Auto-detected from data' },
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+
+  { name: 'display_note', type: 'note', label: 'Display' },
+  { name: 'showValues',  label: 'Show Values',  type: 'boolean' },
+  { name: 'showTooltip', label: 'Show Tooltip', type: 'boolean' },
+  {
+    name: 'legend_note', type: 'note', label: 'Legend',
+    text: 'Gradient mode → color scale bar with min/max values.\nThreshold mode → color swatches with labels.',
+  },
+  { name: 'showLegend',     label: 'Show Legend',     type: 'boolean' },
+  { name: 'legendPosition', label: 'Legend Position', type: 'select', options: ['top', 'bottom'] },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user clicks a cell. Available in the action:\n  clickedItem     — the full data item\n  clickedValue    — numeric cell value\n  clickedLabel    — label field value\n  clickedRow      — row label (e.g. "Mon")\n  clickedCol      — col label (e.g. "12:00")\n  clickedRowIndex — row position\n  clickedColIndex — col position',
+  },
+  {
+    name: 'onCellClick', type: 'kpi-action', label: 'On Cell Click',
+    context: ['clickedItem', 'clickedValue', 'clickedLabel', 'clickedRow', 'clickedCol', 'clickedRowIndex', 'clickedColIndex'],
+  },
+]

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

@@ -0,0 +1,20 @@
+export const ICON_BOX_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Optional: bind valueKey to drive threshold-based color changes.' },
+  {
+    name: 'data_example', type: 'note', label: 'Expected data shape',
+    text: '{ "errorCount": 5 }\n→ valueKey: "errorCount"\n   threshold "> 0" → color: error\n   (icon stays fixed; only bg/color changes)',
+  },
+  { name: 'valueKey', label: 'Value Key (for threshold)', type: 'expression' },
+
+  { name: 'appearance_note', type: 'note', label: 'Appearance' },
+  { name: 'icon',         label: 'Icon Name',      type: 'expression', placeholder: 'e.g. StarOutlined, TrendingUpOutlined' },
+  { name: 'size',         label: 'Box Size (px)',   type: 'expression' },
+  { name: 'iconSize',     label: 'Icon Size (px)',  type: 'expression' },
+  { name: 'borderRadius', label: 'Border Radius',  type: 'expression' },
+  { name: 'iconColor',    label: 'Icon Color',      type: 'expression', placeholder: 'Override threshold color' },
+  { name: 'bgColor',      label: 'Background',      type: 'expression', placeholder: 'Override threshold bg' },
+  { name: 'shadow',       label: 'Glow Shadow',     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/metric.js

@@ -0,0 +1,45 @@
+export const METRIC_FIELDS = [
+  { name: 'data_note', type: 'note', label: 'Data', text: 'Value Key accepts a data key string OR any expression that returns a number directly.' },
+  {
+    name: 'data_example', type: 'note', label: 'Value Key — two modes',
+    text: 'Key lookup (string):\n  "revenue"  →  uses data["revenue"]\n\nDirect expression (returns a value):\n  data.price * data.qty\n  data.revenue - data.cost\n  42\n  data.a + data.b\n\nBoth modes work — if the expression\nreturns a non-string, it is used as-is.',
+  },
+  { name: 'valueKey',  label: 'Value Key',   type: 'expression' },
+  { name: 'label',     label: 'Label',        type: 'expression' },
+  { name: 'sublabel',  label: 'Sub-label',    type: 'expression' },
+
+  { name: 'fmt_note', type: 'note', label: 'Format', text: 'format: number | currency | percent | compact | bytes | duration' },
+  { name: 'format',   label: 'Format',   type: 'select', options: ['number','currency','percent','compact','bytes','duration'] },
+  { name: 'decimals', label: 'Decimals', type: 'expression' },
+  { name: 'prefix',   label: 'Prefix',   type: 'expression' },
+  { name: 'suffix',   label: 'Suffix',   type: 'expression' },
+  { name: 'currency', label: 'Currency Code', type: 'expression' },
+  { name: 'asRatio',  label: 'Percent is 0–1 ratio', type: 'boolean' },
+
+  { name: 'appearance_note', type: 'note', label: 'Value Appearance' },
+  { name: 'fontSize',      label: 'Value Font Size',   type: 'expression' },
+  { name: 'fontWeight',    label: 'Value Font Weight', type: 'select', options: ['400','500','600','700','800','900'] },
+  { name: 'align',         label: 'Align',             type: 'select', options: ['left','center','right'] },
+  { name: 'labelPosition', label: 'Label Position',    type: 'select', options: ['above','below'] },
+
+  { 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' },
+
+  { name: 'thresholds', label: 'Thresholds', type: 'thresholds-editor' },
+
+  {
+    name: 'actions_note', type: 'note', label: 'Actions',
+    text: 'Fires when a user clicks the metric. Available in the action:\n  clickedValue — the current displayed value',
+  },
+  {
+    name: 'onClick', type: 'kpi-action', label: 'On Click',
+    context: ['clickedValue'],
+  },
+]