robobyte-front-builder 1.0.19 → 1.0.21

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

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

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

@@ -1,16 +1,13 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const RADIO_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Radio-specific props
   { name: 'options', label: 'Options', type: 'options-editor' },
-  { name: 'row', label: 'Horizontal Layout', type: 'boolean' }
+  { name: 'row', label: 'Horizontal Layout', type: 'boolean' },
 ]

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

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

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

@@ -1,12 +1,26 @@
 export const REPORT_VIEWER_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
   { name: 'id', label: 'Report ID', type: 'expression' },
   { name: 'pageId', label: 'Page ID', type: 'expression' },
   { name: 'filter', label: 'Filter', type: 'expression' },
   { name: 'minimized', label: 'Minimized', type: 'boolean' },
+  { name: 'isRerender', label: 'Is Rerender', type: 'boolean' },
+  { name: 'height', label: 'Height', type: 'expression' },
   { name: 'isSingle', label: 'Single', type: 'boolean' },
   { name: 'noHeader', label: 'No Header', type: 'boolean' },
   { name: 'refresh', label: 'Refresh', type: 'boolean' },
   { name: 'dataAsObject', label: 'Data As Object', type: 'boolean' },
   { name: 'externalTimer', label: 'External Timer', type: 'expression' },
-  { name: 'sessionId', label: 'Session ID', type: 'expression' }
+  { name: 'sessionId', label: 'Session ID', type: 'expression' },
+  // Extra columns: full AG Grid colDef objects added as new columns to the grid.
+  // Shape: [{ headerName, field, pinned?, width?, editable?, cellRenderer?, valueSetter?, ... }]
+  { name: 'extraCols', label: 'Extra Columns', type: 'extra-cols-editor' },
+  // Column config: overrides applied to existing columns, matched by field name.
+  // Shape: [{ field: string, config: { editable?, valueSetter?, valueGetter?, ... } }]
+  { name: 'columnsConfig', label: 'Columns Config', type: 'columns-config-editor' },
+
+  // Row actions: buttons shown in a popover when the user clicks the Actions cell.
+  // Shape: [{ label, color, variant, icon, code, confirmation?, disabled? }]
+  // Inside each Calculation, data.row is the current AG Grid row object.
+  { name: 'actionsConfig', label: 'Row Actions', type: 'actions-config-editor' },
 ]

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

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

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

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

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

@@ -1,17 +1,14 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TAG_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Tag picker-specific props
   { name: 'options', label: 'Options', type: 'options-editor' },
-  { name: 'freeSolo', label: 'Allow Custom Tags', type: 'boolean' }
+  { name: 'freeSolo', label: 'Allow Custom Tags', type: 'boolean' },
 ]

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

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

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

@@ -1,16 +1,14 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TEXTAREA_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
   { name: 'rows', label: 'Rows', type: 'number', defaultValue: 4 },
   { name: 'maxRows', label: 'Max Rows', type: 'number' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
-  { name: 'enabled', label: 'Enabled', type: 'boolean' }
+  { name: 'enabled', label: 'Enabled', type: 'boolean' },
 ]

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

@@ -1,18 +1,15 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TIME_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Time picker-specific props
   { name: 'ampm', label: '12-Hour Format (AM/PM)', type: 'boolean' },
   { name: 'minutesStep', label: 'Minutes Step', type: 'expression', placeholder: '1' },
-  { name: 'readOnly', label: 'Read Only', type: 'boolean' }
+  { name: 'readOnly', label: 'Read Only', type: 'boolean' },
 ]

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

@@ -1,26 +1,12 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TOGGLE_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
-  {
-    name: 'color',
-    label: 'Color',
-    type: 'select',
-    options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'color', label: 'Color', type: 'select', options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Toggle-specific props
-  {
-    name: 'labelPlacement',
-    label: 'Label Placement',
-    type: 'select',
-    options: ['end', 'start', 'top', 'bottom']
-  }
 ]

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

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

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

@@ -0,0 +1,53 @@
+export const VIEW_RENDERER_MAIN_FIELDS = [
+  // ── Identity ───────────────────────────────────────────────────────────────
+  { name: 'key',         label: 'Key',          type: 'expression' },
+
+  // ── View to load ──────────────────────────────────────────────────────────
+  // Numeric ID returned by UiBuilderModule/View/GetViewDetails.
+  { name: 'viewId',      label: 'View ID',      type: 'expression' },
+
+  // ── Reload trigger ────────────────────────────────────────────────────────
+  // When this expression's value changes (e.g. a counter, a form field value),
+  // the view schema is re-fetched and the child is remounted.
+  { name: 'refreshKey',  label: 'Refresh Key',  type: 'expression' },
+
+  // ── Data seeding ──────────────────────────────────────────────────────────
+  // Object expression whose value is merged into the child view's data state
+  // when it first loads (and whenever refreshKey fires).
+  // Example: { userId: form.userId, mode: 'edit' }
+  { name: 'initialData', label: 'Initial Data', type: 'expression' },
+
+  // Reactive data pushed into the child view on every parent re-render.
+  // Unlike initialData (one-time seed), externalData merges into the child
+  // state on every expression change — great for passing live parent state.
+  // Example: { selectedRow: data.selectedRow }
+  { name: 'externalData', label: 'External Data', type: 'expression' },
+
+  // ── State mode ────────────────────────────────────────────────────────────
+  // true  (default) → child has its own data/form stores (fully isolated)
+  // false           → child shares the parent page's setData/data/form
+  //                   (useful for sub-forms whose fields need to appear in
+  //                    the parent's form submit)
+  { name: 'isolated',    label: 'Isolated State', type: 'boolean' },
+
+  // ── Height mode ───────────────────────────────────────────────────────────
+  // auto  — wraps content; minHeight is the floor
+  // full  — stretches to fill the parent flex container (use inside a
+  //         container set to flex + full height)
+  // fixed — exact pixel height; content scrolls inside
+  {
+    name: 'heightMode',
+    label: 'Height Mode',
+    type: 'select',
+    options: ['auto', 'full', 'fixed'],
+  },
+  // Used when heightMode === 'fixed'. Value in pixels.
+  { name: 'height',      label: 'Height (px)',  type: 'number' },
+  // Used when heightMode === 'auto'. Sets the minimum height floor.
+  { name: 'minHeight',   label: 'Min Height (px)', type: 'number' },
+
+  // ── Layout / decoration ───────────────────────────────────────────────────
+  { name: 'title',       label: 'Title',        type: 'expression' },
+  { name: 'showBorder',  label: 'Show Border',  type: 'boolean' },
+  { name: 'showRefresh', label: 'Show Refresh', type: 'boolean' },
+]

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

@@ -0,0 +1,68 @@
+export const WIZARD_MAIN_FIELDS = [
+  { name: 'key',          label: 'Key',          type: 'expression' },
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  {
+    name: 'orientation',
+    label: 'Orientation',
+    type: 'select',
+    options: ['horizontal', 'vertical'],
+  },
+  {
+    name: 'variant',
+    label: 'Step Variant',
+    type: 'select',
+    options: ['standard', 'alternativeLabel'],
+  },
+
+  // ── Behaviour ─────────────────────────────────────────────────────────────
+  // linear: user must complete steps in order (default true).
+  // non-linear: any step label is clickable.
+  { name: 'linear',          label: 'Linear (sequential)', type: 'boolean' },
+  { name: 'hideNavigation',  label: 'Hide Nav Buttons',    type: 'boolean' },
+
+  // ── Controlled step ────────────────────────────────────────────────────────
+  // When set, the active step is driven by this expression (e.g. data.currentStep).
+  // Leave blank for internal uncontrolled state.
+  { name: 'activeStep',  label: 'Active Step (controlled)', type: 'expression' },
+
+  // ── Nav button labels ──────────────────────────────────────────────────────
+  { name: 'backLabel',   label: 'Back Label',   type: 'expression' },
+  { name: 'nextLabel',   label: 'Next Label',   type: 'expression' },
+  { name: 'finishLabel', label: 'Finish Label', type: 'expression' },
+
+  // ── Nav button appearance ─────────────────────────────────────────────────
+  {
+    name: 'nextColor',
+    label: 'Next Color',
+    type: 'select',
+    options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'inherit'],
+  },
+  {
+    name: 'nextVariant',
+    label: 'Next Variant',
+    type: 'select',
+    options: ['text', 'outlined', 'contained'],
+  },
+  {
+    name: 'backColor',
+    label: 'Back Color',
+    type: 'select',
+    options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'inherit'],
+  },
+  {
+    name: 'backVariant',
+    label: 'Back Variant',
+    type: 'select',
+    options: ['text', 'outlined', 'contained'],
+  },
+
+  // ── Lifecycle hooks ────────────────────────────────────────────────────────
+  // onStepChange — called whenever the active step changes.
+  //   extraVars: { from, to, direction ('next'|'back'|'jump'), goToStep, nextStep, prevStep }
+  { name: 'onStepChange', label: 'On Step Change', type: 'code' },
+
+  // onFinish — called when the user clicks Finish on the last step.
+  //   extraVars: { goToStep, nextStep, prevStep }
+  { name: 'onFinish',     label: 'On Finish',      type: 'code' },
+]

package/src/views/builder/inspector/definitions/wizard-step/main.js

@@ -0,0 +1,25 @@
+export const WIZARD_STEP_MAIN_FIELDS = [
+  { name: 'key',         label: 'Key',         type: 'expression' },
+  { name: 'label',       label: 'Label',       type: 'expression' },
+  // Short subtitle shown below the step label in the stepper header
+  { name: 'description', label: 'Description', type: 'expression' },
+
+  // ── State expressions ──────────────────────────────────────────────────────
+  // optional: shows "(Optional)" below the step label
+  { name: 'optional',   label: 'Optional',   type: 'boolean' },
+  // completed: expression — true marks the step with a checkmark
+  { name: 'completed',  label: 'Completed',  type: 'expression' },
+  // error: expression — true marks the step in the error state
+  { name: 'error',      label: 'Error',      type: 'expression' },
+
+  // ── Lifecycle hooks ────────────────────────────────────────────────────────
+  // onEnter — called when this step becomes active.
+  //   extraVars: { stepIndex, goToStep, nextStep, prevStep }
+  { name: 'onEnter', label: 'On Enter', type: 'code' },
+
+  // onNext — called before leaving this step by clicking Next.
+  //   Return true/undefined to allow, false to silently block,
+  //   or a string to block and display as an error message.
+  //   extraVars: { stepIndex, goToStep, nextStep, prevStep }
+  { name: 'onNext',  label: 'On Next (validate)', type: 'code' },
+]