robobyte-front-builder 1.0.19 → 1.0.21

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,23 +1,15 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const NUMBER_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Number format specific props
-  {
-    name: 'formatType',
-    label: 'Format Type',
-    type: 'select',
-    options: ['decimal', 'currency', 'percentage', 'custom']
-  },
+  { name: 'formatType', label: 'Format Type', type: 'select', options: ['decimal', 'currency', 'percentage', 'custom'] },
   { name: 'decimalScale', label: 'Decimal Scale', type: 'expression', placeholder: '2' },
   { name: 'fixedDecimalScale', label: 'Fixed Decimal Scale', type: 'boolean' },
   { name: 'thousandSeparator', label: 'Thousand Separator', type: 'boolean' },
@@ -25,5 +17,5 @@ export const NUMBER_MAIN_FIELDS = [
   { name: 'prefix', label: 'Prefix', type: 'text' },
   { name: 'suffix', label: 'Suffix', type: 'text' },
   { name: 'allowNegative', label: 'Allow Negative', type: 'boolean' },
-  { name: 'format', label: 'Custom Format', type: 'text', placeholder: '#### #### #### ####' }
+  { name: 'format', label: 'Custom Format', type: 'text', placeholder: '#### #### #### ####' },
 ]

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

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