robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/viewer/renderers/HeatmapGridRenderer.jsx

@@ -0,0 +1,432 @@
+import { useMemo, useCallback } from 'react'
+import { Box, Typography, Tooltip } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { resolveColorSchema, hexToRgb, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+import { runKpiAction } from 'services/builderHelper/actionExecutor'
+
+// ── Color helpers ─────────────────────────────────────────────────────────────
+
+function parseColor(c) {
+  if (!c) return [200, 200, 200]
+  if (typeof c === 'string' && c.startsWith('rgb')) {
+    const m = c.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/)
+    return m ? [+m[1], +m[2], +m[3]] : [200, 200, 200]
+  }
+  const rgb = hexToRgb(c)
+  return (rgb[0] === 0 && rgb[1] === 0 && rgb[2] === 0 && c !== '#000000' && c !== '#000')
+    ? [200, 200, 200]
+    : rgb
+}
+
+function lerpRound(a, b, t) { return Math.round(a + (b - a) * t) }
+
+function interpolateStops(colors, t) {
+  if (!colors?.length) return '#e0e0e0'
+  if (colors.length === 1) return colors[0]
+  const n   = colors.length - 1
+  const pos = Math.max(0, Math.min(1, t)) * n
+  const i   = Math.min(Math.floor(pos), n - 1)
+  const f   = pos - i
+  const [r1, g1, b1] = parseColor(colors[i])
+  const [r2, g2, b2] = parseColor(colors[i + 1])
+  return `rgb(${lerpRound(r1,r2,f)},${lerpRound(g1,g2,f)},${lerpRound(b1,b2,f)})`
+}
+
+function contrastText(bg) {
+  const [r, g, b] = parseColor(bg)
+  return 0.299 * r + 0.587 * g + 0.114 * b > 150
+    ? 'rgba(0,0,0,0.72)'
+    : 'rgba(255,255,255,0.88)'
+}
+
+// ── Sample data ───────────────────────────────────────────────────────────────
+// Weekly sales by hour — days × hours (8:00–22:00)
+
+const SAMPLE_DAYS  = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const SAMPLE_HOURS = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
+const SAMPLE_SALES = [
+  [120, 180, 310, 420, 680, 710, 590, 380, 290, 540, 720, 640, 480, 210,  90], // Mon
+  [140, 190, 320, 440, 700, 730, 610, 360, 310, 560, 740, 660, 500, 220, 100], // Tue
+  [130, 175, 300, 410, 660, 700, 580, 370, 280, 530, 710, 630, 470, 200,  85], // Wed
+  [150, 200, 340, 460, 720, 750, 630, 390, 320, 580, 760, 680, 520, 240, 110], // Thu
+  [160, 210, 360, 490, 760, 790, 670, 420, 350, 620, 800, 720, 560, 280, 140], // Fri
+  [ 90, 140, 260, 450, 640, 720, 750, 700, 660, 690, 730, 760, 680, 430, 200], // Sat
+  [ 70, 110, 220, 400, 580, 660, 690, 650, 620, 650, 700, 720, 640, 380, 160], // Sun
+]
+const SAMPLE_DATA = SAMPLE_DAYS.flatMap((day, di) =>
+  SAMPLE_HOURS.map((h, hi) => ({
+    row:   day,
+    col:   `${h}:00`,
+    label: `${day} ${h}:00`,
+    value: SAMPLE_SALES[di][hi],
+  }))
+)
+
+// ── Legend ────────────────────────────────────────────────────────────────────
+
+function GradientLegend({ colors, minVal, maxVal, format, prefix, suffix, rowLabelWidth, showRL }) {
+  const gradient = `linear-gradient(to right, ${colors.join(', ')})`
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+      {showRL && <Box sx={{ width: rowLabelWidth, flexShrink: 0 }} />}
+      <Typography sx={{ fontSize: 10, color: 'text.secondary', flexShrink: 0 }}>
+        {formatNumber(minVal, { format, prefix, suffix })}
+      </Typography>
+      <Box sx={{ flex: 1, height: 10, borderRadius: 1, background: gradient }} />
+      <Typography sx={{ fontSize: 10, color: 'text.secondary', flexShrink: 0 }}>
+        {formatNumber(maxVal, { format, prefix, suffix })}
+      </Typography>
+    </Box>
+  )
+}
+
+function ThresholdLegend({ thresholds, format, prefix, suffix, rowLabelWidth, showRL }) {
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5, mb: 1.5 }}>
+      {showRL && <Box sx={{ width: rowLabelWidth, flexShrink: 0 }} />}
+      {thresholds.map((t, i) => {
+        const { bg, color } = resolveMuiColor(t.color)
+        const swatch = bg !== 'transparent' ? bg : color
+        return (
+          <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Box sx={{ width: 12, height: 12, borderRadius: 0.5, bgcolor: swatch, flexShrink: 0 }} />
+            <Typography sx={{ fontSize: 10, color: 'text.disabled' }}>
+              {t.label || `< ${formatNumber(Number(t.value), { format, prefix, suffix })}`}
+            </Typography>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+
+// ── Cell shape ────────────────────────────────────────────────────────────────
+
+function shapeToBorderRadius(shape, cellH, borderRadius) {
+  if (shape === 'circle')  return '50%'
+  if (shape === 'square')  return 0
+  return Number(borderRadius) || Math.max(2, Math.floor(cellH * 0.12))
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function HeatmapGridRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    // data
+    dataKey,
+    valueField = 'value',
+    labelField = 'label',
+    rowField   = 'row',
+    colField   = 'col',
+    cols,
+
+    // coloring
+    colorMode  = 'gradient',   // 'gradient' | 'threshold' | 'schema'
+    colorSchema,
+    thresholds = [],
+    emptyColor = '#f5f5f5',
+    minValue,
+    maxValue,
+
+    // layout
+    fillWidth     = true,      // true → cells flex to fill width; false → fixed cellSize
+    cellSize      = 24,        // used when fillWidth = false
+    cellHeight    = 32,        // row height in pixels (always respected)
+    borderRadius  = 4,
+    gap           = 1,         // px between cells — shows as separator lines
+    separatorColor = 'divider', // MUI color key or hex for the gap background
+
+    // row labels (left)
+    showRowLabels  = false,
+    rowLabelField,
+    rowLabels,
+    rowLabelWidth  = 70,       // px reserved for the row label column
+    rowLabelAlign  = 'right',  // 'left' | 'center' | 'right'
+
+    // col labels — BOTTOM by default (matches reference images)
+    showColLabels    = false,
+    colLabelField,
+    colLabels,
+    colLabelPosition = 'bottom',  // 'top' | 'bottom'
+
+    // legend — TOP by default (matches reference images)
+    showLegend      = false,
+    legendPosition  = 'top',     // 'top' | 'bottom'
+
+    // axis label style
+    axisLabelFontSize = 11,
+    axisLabelColor    = 'text.secondary',
+
+    // cell display
+    cellShape   = 'square',
+    showValues  = false,
+    showTooltip = true,
+
+    // format
+    format = 'number',
+    prefix = '',
+    suffix = '',
+  } = main
+
+  // ── Data resolution ─────────────────────────────────────────────────────────
+  const rawResolved = resolveValue(dataKey, data)
+  const noDataBound = inBuilder && (!Array.isArray(rawResolved) || rawResolved.length === 0)
+  const raw         = noDataBound ? SAMPLE_DATA : (Array.isArray(rawResolved) ? rawResolved : [])
+
+  // ── Grid construction ────────────────────────────────────────────────────────
+  const { grid, minVal, maxVal, derivedRowLabels, derivedColLabels } = useMemo(() => {
+    if (!raw.length) return { grid: [], minVal: 0, maxVal: 1, derivedRowLabels: [], derivedColLabels: [] }
+
+    const items = raw.map(item => typeof item === 'object' ? item : { [valueField]: item })
+    const vals  = items.map(i => Number(i[valueField] ?? 0)).filter(v => isFinite(v))
+    const minV  = minValue != null ? Number(minValue) : (vals.length ? Math.min(...vals) : 0)
+    const maxV  = maxValue != null ? Number(maxValue) : (vals.length ? Math.max(...vals) : 1)
+
+    let builtGrid = []
+    let rLabels   = []
+    let cLabels   = []
+
+    if (cols) {
+      // ── Flat-wrap mode ──────────────────────────────────────────────────────
+      const nc = Number(cols)
+      for (let i = 0; i < items.length; i += nc) builtGrid.push(items.slice(i, i + nc))
+      if (Array.isArray(rowLabels)) rLabels = rowLabels
+      cLabels = Array.isArray(colLabels) ? colLabels : Array.from({ length: nc }, (_, i) => String(i + 1))
+
+    } else if (items[0]?.[rowField] != null) {
+      // ── Row/col field mode ──────────────────────────────────────────────────
+      const rowOrder = []
+      const rowMap   = {}
+      const colSet   = new Set()
+      items.forEach(item => {
+        const r = String(item[rowField])
+        const c = String(item[colField] ?? 0)
+        if (!rowMap[r]) { rowMap[r] = {}; rowOrder.push(r) }
+        rowMap[r][c] = item
+        colSet.add(c)
+      })
+      const colOrder = Array.from(colSet).sort((a, b) => {
+        const na = Number(a), nb = Number(b)
+        return isFinite(na) && isFinite(nb) ? na - nb : a.localeCompare(b)
+      })
+      builtGrid = rowOrder.map(r => colOrder.map(c => rowMap[r][c] ?? null))
+      rLabels   = Array.isArray(rowLabels)
+        ? rowLabels
+        : rowOrder.map(r => rowMap[r][colOrder[0]]?.[rowLabelField ?? rowField] ?? r)
+      cLabels   = Array.isArray(colLabels)
+        ? colLabels
+        : colOrder.map(c => items.find(i => String(i[colField]) === c)?.[colLabelField ?? colField] ?? c)
+
+    } else {
+      // ── Single-row strip ────────────────────────────────────────────────────
+      builtGrid = [items]
+      if (Array.isArray(colLabels)) cLabels = colLabels
+    }
+
+    // Sample mode — override with sensible demo labels
+    if (noDataBound) {
+      rLabels = SAMPLE_DAYS
+      cLabels = SAMPLE_HOURS.map(h => `${h}:00`)
+    }
+
+    return { grid: builtGrid, minVal: minV, maxVal: maxV, derivedRowLabels: rLabels, derivedColLabels: cLabels }
+  }, [raw, valueField, rowField, colField, cols, minValue, maxValue, rowLabels, colLabels, noDataBound, rowLabelField, colLabelField])
+
+  // ── Colors ──────────────────────────────────────────────────────────────────
+  const totalCells   = grid.reduce((s, r) => s + (r?.length || 0), 0)
+  const schemaColors = useMemo(
+    () => resolveColorSchema(colorSchema, Math.max(totalCells, 5), DEFAULT_PALETTE) ?? DEFAULT_PALETTE,
+    [colorSchema, totalCells]
+  )
+
+  // ── Derived layout values ────────────────────────────────────────────────────
+  const ch    = Number(cellHeight) || 32
+  const cw    = fillWidth ? undefined : (Number(cellSize) || 24)
+  const gp    = Number(gap) ?? 1
+  const rad   = shapeToBorderRadius(cellShape, ch, borderRadius)
+  const rlw   = Number(rowLabelWidth) || 70
+  const axFsz = Number(axisLabelFontSize) || 11
+  const showRL = showRowLabels && derivedRowLabels.length > 0
+  const showCL = showColLabels && derivedColLabels.length > 0
+
+  // globalIdx for schema mode (cycles palette by cell order)
+  let globalIdx = 0
+  const getCellColor = (item) => {
+    if (!item) return emptyColor
+    const v = Number(item[valueField] ?? 0)
+
+    if (colorMode === 'threshold' && thresholds.length) {
+      const rule = evaluateThreshold(v, thresholds)
+      if (rule) {
+        const { bg, color } = resolveMuiColor(rule.color)
+        return bg !== 'transparent' ? bg : color
+      }
+    }
+
+    if (colorMode === 'schema') {
+      return schemaColors[(globalIdx++) % schemaColors.length]
+    }
+
+    // Gradient — interpolate through schema stops by value position
+    const t = maxVal === minVal ? 0.5 : (v - minVal) / (maxVal - minVal)
+    return interpolateStops(schemaColors, t)
+  }
+
+  if (grid.length === 0) return null
+
+  // ── Click action ─────────────────────────────────────────────────────────────
+  const hasClickAction = !!node.props?.actions?.onCellClick?.code
+  const handleCellClick = useCallback((item, ri, ci) => {
+    if (!item) return
+    const v = Number(item[valueField] ?? 0)
+    runKpiAction(node, viewerContext, 'onCellClick', {
+      clickedItem:     item,
+      clickedValue:    v,
+      clickedLabel:    item[labelField],
+      clickedRow:      derivedRowLabels[ri] ?? ri,
+      clickedCol:      derivedColLabels[ci] ?? ci,
+      clickedRowIndex: ri,
+      clickedColIndex: ci,
+    })
+  }, [node, viewerContext, valueField, labelField, derivedRowLabels, derivedColLabels])
+
+  // ── Shared legend props ──────────────────────────────────────────────────────
+  const legendProps = {
+    format, prefix, suffix,
+    rowLabelWidth: rlw, showRL,
+    minVal, maxVal,
+    colors: schemaColors,
+    thresholds,
+  }
+
+  // Col label row (reusable for top and bottom positions)
+  const ColLabelRow = () => (
+    <Box sx={{ display: 'flex', mt: colLabelPosition === 'bottom' ? `${Math.max(gp, 4)}px` : 0,
+                                mb: colLabelPosition === 'top'    ? `${Math.max(gp, 4)}px` : 0 }}>
+      {showRL && <Box sx={{ width: rlw, flexShrink: 0 }} />}
+      <Box sx={{ flex: 1, display: 'flex' }}>
+        {derivedColLabels.map((lbl, ci) => (
+          <Box key={ci} sx={{ flex: cw ? undefined : 1, width: cw, textAlign: 'center' }}>
+            <Typography sx={{ fontSize: axFsz, color: axisLabelColor, lineHeight: 1.2 }}>
+              {lbl}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ width: '100%' }}>
+
+        {/* ── Legend top ── */}
+        {showLegend && legendPosition === 'top' && colorMode === 'gradient' && (
+          <GradientLegend {...legendProps} />
+        )}
+        {showLegend && legendPosition === 'top' && colorMode === 'threshold' && thresholds.length > 0 && (
+          <ThresholdLegend {...legendProps} />
+        )}
+
+        {/* ── Col labels TOP ── */}
+        {showCL && colLabelPosition === 'top' && <ColLabelRow />}
+
+        {/* ── Grid ─────────────────────────────────────────────────────────── */}
+        {/* The gap colour shows through as separator lines between cells */}
+        <Box sx={{
+          display:         'flex',
+          flexDirection:   'column',
+          gap:             `${gp}px`,
+          bgcolor:         separatorColor,
+          borderRadius:    Number(borderRadius) || 2,
+          overflow:        'hidden',
+        }}>
+          {grid.map((row, ri) => (
+            <Box key={ri} sx={{ display: 'flex', gap: `${gp}px` }}>
+
+              {/* Row label */}
+              {showRL && (
+                <Box sx={{
+                  width: rlw, flexShrink: 0,
+                  display: 'flex', alignItems: 'center',
+                  justifyContent: rowLabelAlign === 'left' ? 'flex-start'
+                    : rowLabelAlign === 'center' ? 'center' : 'flex-end',
+                  pr: rowLabelAlign === 'right' ? 1 : 0,
+                  pl: rowLabelAlign === 'left'  ? 0.5 : 0,
+                }}>
+                  <Typography sx={{ fontSize: axFsz, color: axisLabelColor, lineHeight: 1.2 }} noWrap>
+                    {derivedRowLabels[ri] ?? ''}
+                  </Typography>
+                </Box>
+              )}
+
+              {/* Cell row */}
+              <Box sx={{ flex: 1, display: 'flex', gap: `${gp}px` }}>
+                {(Array.isArray(row) ? row : []).map((item, ci) => {
+                  const v    = item != null ? Number(item[valueField] ?? 0) : null
+                  const lbl  = item?.[labelField]
+                  const fmt  = v != null ? formatNumber(v, { format, prefix, suffix }) : ''
+                  const bg   = getCellColor(item)
+                  const fg   = showValues && v != null ? contrastText(bg) : undefined
+
+                  const cellSx = {
+                    flex:            cw ? undefined : 1,
+                    width:           cw,
+                    height:          ch,
+                    bgcolor:         bg,
+                    borderRadius:    rad,
+                    display:         'flex',
+                    alignItems:      'center',
+                    justifyContent:  'center',
+                    fontSize:        Math.max(8, Math.min(ch * 0.38, 13)),
+                    fontWeight:      600,
+                    color:           fg,
+                    transition:      'background .15s, opacity .15s',
+                    flexShrink:      0,
+                    userSelect:      'none',
+                    cursor:          hasClickAction ? 'pointer' : 'default',
+                    ...(hasClickAction && { '&:hover': { opacity: 0.8 } }),
+                  }
+
+                  const tipText = lbl ? `${lbl}: ${fmt}` : fmt
+                  const cell    = (
+                    <Box
+                      sx={cellSx}
+                      onClick={hasClickAction && item ? () => handleCellClick(item, ri, ci) : undefined}
+                    >
+                      {showValues && v != null && fmt}
+                    </Box>
+                  )
+
+                  return showTooltip && tipText
+                    ? <Tooltip key={ci} title={tipText} placement='top' arrow>{cell}</Tooltip>
+                    : <Box key={ci} sx={cellSx} onClick={hasClickAction && item ? () => handleCellClick(item, ri, ci) : undefined}>{showValues && v != null && fmt}</Box>
+                })}
+              </Box>
+
+            </Box>
+          ))}
+        </Box>
+
+        {/* ── Col labels BOTTOM ── */}
+        {showCL && colLabelPosition === 'bottom' && <ColLabelRow />}
+
+        {/* ── Legend bottom ── */}
+        {showLegend && legendPosition === 'bottom' && colorMode === 'gradient' && (
+          <Box sx={{ mt: 1 }}><GradientLegend {...legendProps} /></Box>
+        )}
+        {showLegend && legendPosition === 'bottom' && colorMode === 'threshold' && thresholds.length > 0 && (
+          <Box sx={{ mt: 1 }}><ThresholdLegend {...legendProps} /></Box>
+        )}
+
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/IconBoxRenderer.jsx

@@ -0,0 +1,59 @@
+import { Box, Typography } from '@mui/material'
+import * as MuiIcons from '@mui/icons-material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+
+function DynIcon({ name, sx }) {
+  const Comp = name ? MuiIcons[name] : null
+  if (!Comp) return null
+  return <Comp sx={sx} />
+}
+
+export default function IconBoxRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data } = viewerContext ?? {}
+
+  const {
+    icon        = 'StarOutlined',
+    iconColor,
+    bgColor,
+    size        = 40,
+    iconSize,
+    borderRadius = 10,
+    thresholds  = [],
+    valueKey,
+    shadow      = false,
+    align       = 'left',
+  } = main
+
+  const rawValue = resolveValue(valueKey, data)
+  const rule     = evaluateThreshold(rawValue ?? 0, thresholds)
+  const palette  = resolveMuiColor(rule?.color ?? 'primary')
+
+  const resolvedBg    = bgColor   || palette.bg
+  const resolvedColor = iconColor || palette.color
+  const boxSz         = Number(size) || 40
+  const icoSz         = Number(iconSize) || Math.round(boxSz * 0.55)
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ textAlign: align }}>
+        <Box
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: boxSz, height: boxSz,
+            borderRadius: Number(borderRadius),
+            bgcolor: resolvedBg,
+            boxShadow: shadow ? `0 4px 14px ${resolvedBg}88` : 'none',
+            transition: 'background .2s',
+          }}
+        >
+          <DynIcon name={icon} sx={{ fontSize: icoSz, color: resolvedColor }} />
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/ImageRenderer.jsx

@@ -4,7 +4,7 @@ import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function ImageRenderer({ node, viewerContext }) {
   const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>

package/src/views/builder/viewer/renderers/InputRenderer.jsx

@@ -1,34 +1,91 @@
-import { TextField } from '@mui/material'
+import { TextField, InputAdornment } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { resolveIcon } from 'services/builderHelper/iconResolver'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
-export default function InputRenderer({ node, viewerContext }) {
-  const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+// ── Adornment helper ──────────────────────────────────────────────────────────
+// `value` can be:
+//   • an MUI icon name string  → renders the icon component
+//   • any other string         → renders as plain text
+//   • null / undefined         → renders nothing (returns undefined so MUI omits it)
+
+function Adornment({ value, position }) {
+  if (!value) return undefined
+  const str  = String(value)
+  const Icon = resolveIcon(str)
+  return (
+    <InputAdornment position={position}>
+      {Icon ? <Icon fontSize='small' /> : str}
+    </InputAdornment>
+  )
+}
 
-  // Get component key
-  const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
+// ─────────────────────────────────────────────────────────────────────────────
 
-  // Get value from form state
-  const value = form[key] || ''
+export default function InputRenderer({ node, viewerContext }) {
+  const { form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', viewerContext)
+
+  const key   = node.props?.main?.key?.value || node.props?.main?.key || node.id
+  const value = form[key] ?? ''
+  const error = validationErrors?.[key]
 
-  // Get validation error
-  const error = validationErrors[key]
+  const {
+    label, labelPosition, required, helperText,
+    // input adornments
+    prefix, suffix,
+    // label text & icon styling
+    labelPrefix, labelSuffix,
+    labelFontSize, labelFontWeight, labelColor, labelFontStyle, labelLetterSpacing,
+    labelIconSize, labelIconColor,
+    ...inputProps
+  } = main
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     updateFormValue(key, e.target.value)
+    runFieldAction(node, viewerContext, 'onChange', e.target.value)
   }
 
+  const handleBlur = e => {
+    runFieldAction(node, viewerContext, 'onBlur', e.target.value)
+  }
+
+  const startAdornment = prefix ? <Adornment value={prefix} position='start' /> : undefined
+  const endAdornment   = suffix ? <Adornment value={suffix} position='end'   /> : undefined
+
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <TextField
-        {...main}
-        fullWidth
-        value={value}
-        onChange={handleChange}
+      <FieldLabel
+        label={label}
+        required={required}
+        labelPosition={labelPosition}
         error={!!error}
-        helperText={error || main.helperText}
-      />
+        prefix={labelPrefix}
+        suffix={labelSuffix}
+        iconSize={labelIconSize}
+        iconColor={labelIconColor}
+        labelFontSize={labelFontSize}
+        labelFontWeight={labelFontWeight}
+        labelColor={labelColor}
+        labelFontStyle={labelFontStyle}
+        labelLetterSpacing={labelLetterSpacing}
+      >
+        <TextField
+          {...inputProps}
+          fullWidth
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          error={!!error}
+          helperText={error || helperText}
+          InputProps={{
+            ...(startAdornment && { startAdornment }),
+            ...(endAdornment   && { endAdornment }),
+          }}
+        />
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

package/src/views/builder/viewer/renderers/LabelRenderer.jsx

@@ -1,22 +1,48 @@
 import { Typography } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import AdornedLabel from '../AdornedLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function LabelRenderer({ node, viewerContext }) {
-  const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
+  const {
+    text, label, variant, color, align, gutterBottom, noWrap, paragraph,
+    prefix, suffix,
+    prefixColor, prefixSize,
+    suffixColor, suffixSize,
+    iconColor, iconSize, iconGap,
+  } = main
+
+  // Guard against expressions returning non-primitive values (arrays, objects)
+  const safeStr = (v) =>
+    v === null || v === undefined ? '' : typeof v === 'object' ? JSON.stringify(v) : String(v)
+  const content = safeStr(text || label) || 'Label'
+
+  // Build per-adornment sx — per-side overrides take priority over shared iconColor/iconSize
+  const prefixSx = (prefixColor || prefixSize) ? { color: prefixColor, fontSize: prefixSize } : undefined
+  const suffixSx = (suffixColor || suffixSize) ? { color: suffixColor, fontSize: suffixSize } : undefined
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
       <Typography
-        variant={main.variant || 'body1'}
-        color={main.color}
-        align={main.align}
-        gutterBottom={main.gutterBottom}
-        noWrap={main.noWrap}
-        paragraph={main.paragraph}
+        variant={variant || 'body1'}
+        color={color}
+        align={align}
+        gutterBottom={gutterBottom}
+        noWrap={noWrap}
+        paragraph={paragraph}
       >
-        {main.text || main.label || 'Label'}
+        <AdornedLabel
+          prefix={prefix}
+          suffix={suffix}
+          iconSize={iconSize || 'small'}
+          iconColor={iconColor}
+          prefixSx={prefixSx}
+          suffixSx={suffixSx}
+          gap={iconGap ?? 0.5}
+        >
+          {content}
+        </AdornedLabel>
       </Typography>
     </ViewerComponentWrapper>
   )