robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/inspector/fields/MarkersEditorField.jsx

@@ -0,0 +1,173 @@
+import { useState } from 'react'
+import {
+  Box, Button, IconButton, TextField, Typography,
+  Select, MenuItem, Collapse, Tooltip,
+} from '@mui/material'
+import { Add, DeleteOutline, ExpandMore, ExpandLess } from '@mui/icons-material'
+import ExpressionEditor from './ExpressionEditor'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const PALETTE = [
+  '#1976d2','#e91e63','#4caf50','#ff9800','#9c27b0',
+  '#00bcd4','#f44336','#009688','#3f51b5','#ff5722',
+]
+
+const SHAPES = [
+  { value: 'line',    label: 'Line'    },
+  { value: 'diamond', label: 'Diamond' },
+  { value: 'circle',  label: 'Circle'  },
+]
+
+const SX = {
+  input: {
+    '& .MuiInputBase-root':               { color: '#e0e0e0', fontSize: 12 },
+    '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+    '& .MuiInputLabel-root':              { color: '#aaa', fontSize: 12 },
+    '& input':                            { py: '6px', px: 1 },
+  },
+  select: {
+    color: '#e0e0e0', fontSize: 12,
+    '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+    '.MuiSelect-select': { py: '6px', pl: 1 },
+  },
+}
+
+// valueKey stored as a field object so ExpressionEditor handles both simple
+// string values and full JS expressions identically to any other inspector field.
+const defaultMarker = (i = 0) => ({
+  id:       Date.now() + Math.random(),
+  valueKey: { valueType: 'value', value: '' },
+  label:    '',
+  color:    PALETTE[i % PALETTE.length],
+  shape:    'line',
+})
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export default function MarkersEditorField({ field, onChange }) {
+  const markers  = Array.isArray(field?.value) ? field.value : []
+  const save     = (next) => onChange({ valueType: 'value', value: next })
+  const [expanded, setExpanded] = useState({})
+
+  const update = (idx, patch) => save(markers.map((m, i) => i === idx ? { ...m, ...patch } : m))
+  const add    = () => {
+    save([...markers, defaultMarker(markers.length)])
+    setExpanded(e => ({ ...e, [markers.length]: true }))
+  }
+  const remove = idx => save(markers.filter((_, i) => i !== idx))
+  const toggle = idx => setExpanded(e => ({ ...e, [idx]: !e[idx] }))
+
+  // Normalise the valueKey field so ExpressionEditor always receives a proper
+  // field object even for markers that were created before the schema change.
+  const normaliseValueKey = (raw) => {
+    if (!raw || typeof raw === 'string') return { valueType: 'value', value: raw ?? '' }
+    if (raw.valueType) return raw
+    return { valueType: 'value', value: '' }
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+      {markers.map((m, i) => (
+        <Box key={m.id ?? i} sx={{
+          border: '1px solid #3a3a3a', borderRadius: 1,
+          bgcolor: '#1e1e1e', overflow: 'hidden',
+        }}>
+          {/* ── Header row ── */}
+          <Box
+            sx={{ display: 'flex', alignItems: 'center', px: 1, py: 0.5, gap: 0.5, cursor: 'pointer' }}
+            onClick={() => toggle(i)}
+          >
+            <Box sx={{
+              width: 10, height: 10, borderRadius: '50%', flexShrink: 0,
+              bgcolor: m.color || PALETTE[i % PALETTE.length], border: '1px solid #555',
+            }} />
+            <Typography sx={{ fontSize: 11, color: '#ccc', flex: 1 }} noWrap>
+              {m.label
+                || (typeof m.valueKey === 'string' ? m.valueKey : m.valueKey?.value)
+                || `Marker ${i + 1}`}
+            </Typography>
+            <IconButton
+              size='small'
+              onClick={e => { e.stopPropagation(); remove(i) }}
+              sx={{ color: '#666', '&:hover': { color: '#f44336' }, p: '2px' }}
+            >
+              <DeleteOutline sx={{ fontSize: 14 }} />
+            </IconButton>
+            {expanded[i]
+              ? <ExpandLess  sx={{ fontSize: 14, color: '#666' }} />
+              : <ExpandMore sx={{ fontSize: 14, color: '#666' }} />}
+          </Box>
+
+          {/* ── Expanded fields ── */}
+          <Collapse in={!!expanded[i]}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, px: 1.5, pb: 1.5 }}>
+
+              {/* Value Key — uses ExpressionEditor for JS editor button */}
+              <Box>
+                <Typography sx={{ fontSize: 10, color: '#777', mb: 0.5 }}>Value Key / Expression</Typography>
+                <ExpressionEditor
+                  field={normaliseValueKey(m.valueKey)}
+                  onChange={fieldObj => update(i, { valueKey: fieldObj })}
+                />
+              </Box>
+
+              {/* Label */}
+              <TextField
+                label='Label (tooltip / footer)' size='small' fullWidth
+                value={m.label ?? ''} onChange={e => update(i, { label: e.target.value })}
+                sx={SX.input}
+              />
+
+              {/* Color + Shape row */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
+                <Box>
+                  <Typography sx={{ fontSize: 10, color: '#777', mb: 0.25 }}>Color</Typography>
+                  <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
+                    <Box
+                      component='input' type='color'
+                      value={m.color || '#1976d2'}
+                      onChange={e => update(i, { color: e.target.value })}
+                      style={{ width: 28, height: 28, border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}
+                    />
+                    <TextField
+                      size='small'
+                      value={m.color ?? ''}
+                      onChange={e => update(i, { color: e.target.value })}
+                      placeholder='#1976d2'
+                      sx={{ ...SX.input, width: 80 }}
+                    />
+                  </Box>
+                </Box>
+
+                <Box sx={{ flex: 1 }}>
+                  <Typography sx={{ fontSize: 10, color: '#777', mb: 0.25 }}>Shape</Typography>
+                  <Select
+                    size='small' fullWidth
+                    value={m.shape ?? 'line'}
+                    onChange={e => update(i, { shape: e.target.value })}
+                    sx={SX.select}
+                  >
+                    {SHAPES.map(s => (
+                      <MenuItem key={s.value} value={s.value} sx={{ fontSize: 12 }}>{s.label}</MenuItem>
+                    ))}
+                  </Select>
+                </Box>
+              </Box>
+
+            </Box>
+          </Collapse>
+        </Box>
+      ))}
+
+      <Button
+        size='small'
+        startIcon={<Add sx={{ fontSize: 14 }} />}
+        onClick={add}
+        sx={{ fontSize: 11, color: '#90caf9', justifyContent: 'flex-start', textTransform: 'none', mt: 0.5 }}
+      >
+        Add Marker
+      </Button>
+    </Box>
+  )
+}

package/src/views/builder/inspector/fields/SelectEditor.jsx

@@ -14,11 +14,15 @@ export default function SelectEditor({ field, options, onChange }) {
         value={isExpression ? '' : (safeField.value ?? '')}
         onChange={e => onChange?.({ valueType: 'value', value: e.target.value })}
       >
-        {options.map(opt => (
-          <MenuItem key={opt} value={opt}>
-            {opt}
-          </MenuItem>
-        ))}
+        {options.map(opt => {
+          const val = typeof opt === 'object' ? opt.value : opt
+          const lbl = typeof opt === 'object' ? opt.label : opt
+          return (
+            <MenuItem key={val} value={val}>
+              {lbl}
+            </MenuItem>
+          )
+        })}
       </TextField>
 
       <JSEditor

package/src/views/builder/inspector/fields/SeriesEditorField.jsx

@@ -0,0 +1,363 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, TextField, Select, MenuItem, Divider,
+  Collapse, Checkbox, FormControlLabel, Tooltip,
+} from '@mui/material'
+import {
+  Add, Close, DeleteOutline, ExpandMore, ExpandLess,
+  ShowChart, BarChart, AreaChart,
+} from '@mui/icons-material'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const SERIES_TYPES = [
+  { value: 'line', label: 'Line',  Icon: ShowChart },
+  { value: 'area', label: 'Area',  Icon: AreaChart },
+  { value: 'bar',  label: 'Bar',   Icon: BarChart  },
+]
+
+const PALETTE = [
+  '#1976d2','#e91e63','#4caf50','#ff9800','#9c27b0',
+  '#00bcd4','#f44336','#009688','#3f51b5','#ff5722',
+  '#8bc34a','#607d8b',
+]
+
+const defaultSeries = () => ({
+  id:          Date.now() + Math.random(),
+  name:        '',
+  field:       '',
+  type:        'line',
+  color:       PALETTE[Math.floor(Math.random() * PALETTE.length)],
+  strokeWidth: 2,
+  smooth:      true,
+  showDot:     false,
+  fillOpacity: 0.15,
+  dashed:      false,
+  upperRadius: 3,
+  lowerRadius: 0,
+})
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const SX = {
+  input: {
+    '& .MuiInputBase-root':              { color: '#e0e0e0', fontSize: 12 },
+    '& .MuiOutlinedInput-notchedOutline':{ borderColor: '#555' },
+    '& .MuiInputLabel-root':             { color: '#aaa',   fontSize: 12 },
+    '& input':                           { py: '6px', px: 1 },
+  },
+  select: {
+    color: '#e0e0e0', fontSize: 12,
+    '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+    '.MuiSelect-select': { py: '6px', pl: 1 },
+  },
+  check: {
+    color: '#aaa', fontSize: 12,
+    '& .MuiCheckbox-root': { color: '#555', p: '4px' },
+    '& .MuiFormControlLabel-label': { fontSize: 11, color: '#bbb' },
+  },
+}
+
+// ── Single series card ────────────────────────────────────────────────────────
+
+function SeriesCard({ series, index, total, onChange, onRemove }) {
+  const [open, setOpen] = useState(index === 0 && total === 1)
+  const upd = (k, v) => onChange({ ...series, [k]: v })
+  const isLine = series.type === 'line'
+  const isArea = series.type === 'area'
+  const isBar  = series.type === 'bar'
+
+  return (
+    <Box sx={{
+      mb: 1, borderRadius: 1,
+      border: '1px solid #444',
+      overflow: 'hidden',
+    }}>
+      {/* ── Header row ── */}
+      <Box sx={{
+        display: 'flex', alignItems: 'center', gap: 1,
+        px: 1.5, py: 0.75,
+        bgcolor: '#2a2a2a',
+        borderLeft: `3px solid ${series.color || '#666'}`,
+        cursor: 'pointer',
+      }} onClick={() => setOpen(o => !o)}>
+        <Box sx={{
+          width: 10, height: 10, borderRadius: '50%',
+          bgcolor: series.color || '#666', flexShrink: 0,
+        }} />
+        <Typography sx={{ flex: 1, fontSize: 12, color: '#e0e0e0', fontWeight: 500 }}>
+          {series.name || series.field || `Series ${index + 1}`}
+        </Typography>
+        <Typography sx={{ fontSize: 10, color: '#888', textTransform: 'uppercase', mr: 1 }}>
+          {series.type}
+        </Typography>
+        {open ? <ExpandLess sx={{ fontSize: 16, color: '#888' }} /> : <ExpandMore sx={{ fontSize: 16, color: '#888' }} />}
+        <Tooltip title='Remove'>
+          <IconButton size='small' onClick={e => { e.stopPropagation(); onRemove() }}
+            sx={{ color: '#666', '&:hover': { color: '#f44336' }, p: '2px' }}>
+            <DeleteOutline sx={{ fontSize: 15 }} />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* ── Expanded fields ── */}
+      <Collapse in={open}>
+        <Box sx={{ px: 1.5, py: 1.25, bgcolor: '#1e1e1e', display: 'flex', flexDirection: 'column', gap: 1.25 }}>
+
+          {/* Row: Name + Field */}
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
+            <TextField
+              label='Name' size='small' value={series.name}
+              onChange={e => upd('name', e.target.value)}
+              placeholder={`Series ${index + 1}`}
+              sx={SX.input}
+              InputLabelProps={{ shrink: true }}
+            />
+            <TextField
+              label='Data Field' size='small' value={series.field}
+              onChange={e => upd('field', e.target.value)}
+              placeholder='e.g. revenue'
+              sx={SX.input}
+              InputLabelProps={{ shrink: true }}
+            />
+          </Box>
+
+          {/* Row: Type + Color */}
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
+            <Box>
+              <Typography sx={{ fontSize: 10, color: '#888', mb: 0.5 }}>Type</Typography>
+              <Select size='small' value={series.type} onChange={e => upd('type', e.target.value)}
+                sx={{ ...SX.select, width: '100%' }}>
+                {SERIES_TYPES.map(t => (
+                  <MenuItem key={t.value} value={t.value} sx={{ fontSize: 12 }}>
+                    {t.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Box>
+
+            <Box>
+              <Typography sx={{ fontSize: 10, color: '#888', mb: 0.5 }}>Color</Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+                <Box sx={{
+                  width: 24, height: 24, borderRadius: '4px',
+                  bgcolor: series.color || '#888',
+                  border: '1px solid #555', flexShrink: 0,
+                  overflow: 'hidden', position: 'relative',
+                }}>
+                  <input
+                    type='color'
+                    value={series.color || '#1976d2'}
+                    onChange={e => upd('color', e.target.value)}
+                    style={{
+                      position: 'absolute', inset: 0, width: '200%', height: '200%',
+                      border: 'none', padding: 0, cursor: 'pointer', opacity: 0,
+                    }}
+                  />
+                </Box>
+                <TextField
+                  size='small' value={series.color}
+                  onChange={e => upd('color', e.target.value)}
+                  sx={{ ...SX.input, flex: 1 }}
+                  inputProps={{ style: { fontFamily: 'monospace', fontSize: 11 } }}
+                />
+              </Box>
+              {/* Palette swatches */}
+              <Box sx={{ display: 'flex', gap: 0.5, mt: 0.75, flexWrap: 'wrap' }}>
+                {PALETTE.map(c => (
+                  <Box key={c} onClick={() => upd('color', c)} sx={{
+                    width: 14, height: 14, borderRadius: '3px', bgcolor: c,
+                    cursor: 'pointer', border: series.color === c ? '2px solid #fff' : '1px solid transparent',
+                    transition: 'transform .1s', '&:hover': { transform: 'scale(1.2)' },
+                  }} />
+                ))}
+              </Box>
+            </Box>
+          </Box>
+
+          {/* Line / Area options */}
+          {(isLine || isArea) && (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>
+              <TextField
+                label='Stroke Width' size='small' type='number'
+                value={series.strokeWidth} onChange={e => upd('strokeWidth', Number(e.target.value))}
+                sx={{ ...SX.input, width: 100 }}
+                InputLabelProps={{ shrink: true }}
+                inputProps={{ min: 1, max: 10, step: 0.5 }}
+              />
+              {isArea && (
+                <TextField
+                  label='Fill Opacity' size='small' type='number'
+                  value={series.fillOpacity} onChange={e => upd('fillOpacity', Number(e.target.value))}
+                  sx={{ ...SX.input, width: 100 }}
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ min: 0, max: 1, step: 0.05 }}
+                />
+              )}
+              <FormControlLabel
+                control={<Checkbox size='small' checked={!!series.smooth} onChange={e => upd('smooth', e.target.checked)} />}
+                label='Smooth' sx={SX.check}
+              />
+              <FormControlLabel
+                control={<Checkbox size='small' checked={!!series.showDot} onChange={e => upd('showDot', e.target.checked)} />}
+                label='Dots' sx={SX.check}
+              />
+              <FormControlLabel
+                control={<Checkbox size='small' checked={!!series.dashed} onChange={e => upd('dashed', e.target.checked)} />}
+                label='Dashed' sx={SX.check}
+              />
+            </Box>
+          )}
+
+          {/* Bar options */}
+          {isBar && (
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <TextField
+                label='Upper Radius' size='small' type='number'
+                value={series.upperRadius ?? 3} onChange={e => upd('upperRadius', Number(e.target.value))}
+                sx={{ ...SX.input, width: 110 }}
+                InputLabelProps={{ shrink: true }}
+                inputProps={{ min: 0, step: 1 }}
+              />
+              <TextField
+                label='Lower Radius' size='small' type='number'
+                value={series.lowerRadius ?? 0} onChange={e => upd('lowerRadius', Number(e.target.value))}
+                sx={{ ...SX.input, width: 110 }}
+                InputLabelProps={{ shrink: true }}
+                inputProps={{ min: 0, step: 1 }}
+              />
+            </Box>
+          )}
+
+        </Box>
+      </Collapse>
+    </Box>
+  )
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export default function SeriesEditorField({ field, onChange }) {
+  const [open, setOpen] = useState(false)
+
+  const series = Array.isArray(field?.value) ? field.value : []
+
+  const save = (next) => onChange({ valueType: 'value', value: next })
+
+  const addSeries = () => {
+    const next = [...series, defaultSeries()]
+    // auto-pick color from palette cycling
+    const s = next[next.length - 1]
+    s.color = PALETTE[(next.length - 1) % PALETTE.length]
+    save(next)
+  }
+
+  const updateSeries = (i, updated) => {
+    const next = series.map((s, idx) => idx === i ? updated : s)
+    save(next)
+  }
+
+  const removeSeries = (i) => {
+    save(series.filter((_, idx) => idx !== i))
+  }
+
+  return (
+    <>
+      {/* ── Trigger button ── */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Button
+          size='small'
+          variant='outlined'
+          onClick={() => setOpen(true)}
+          sx={{
+            fontSize: 11, py: 0.5, px: 1.5,
+            borderColor: '#555', color: '#ccc',
+            '&:hover': { borderColor: '#888', bgcolor: 'rgba(255,255,255,0.04)' },
+          }}
+        >
+          Configure Series
+        </Button>
+        {series.length > 0 && (
+          <Typography sx={{ fontSize: 11, color: '#888' }}>
+            {series.length} series
+          </Typography>
+        )}
+        {series.length > 0 && (
+          <Box sx={{ display: 'flex', gap: 0.5 }}>
+            {series.slice(0, 6).map((s, i) => (
+              <Box key={i} sx={{
+                width: 8, height: 8, borderRadius: '50%',
+                bgcolor: s.color || '#666',
+              }} />
+            ))}
+          </Box>
+        )}
+      </Box>
+
+      {/* ── Dialog ── */}
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        maxWidth='sm'
+        fullWidth
+        PaperProps={{ sx: { bgcolor: '#1a1a1a', color: '#e0e0e0', backgroundImage: 'none' } }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+          <Typography sx={{ fontWeight: 600, fontSize: 14 }}>Configure Series</Typography>
+          <IconButton size='small' onClick={() => setOpen(false)} sx={{ color: '#888' }}>
+            <Close sx={{ fontSize: 18 }} />
+          </IconButton>
+        </DialogTitle>
+
+        <Divider sx={{ borderColor: '#333' }} />
+
+        <DialogContent sx={{ pt: 2, pb: 1 }}>
+          {series.length === 0 && (
+            <Box sx={{ textAlign: 'center', py: 3 }}>
+              <Typography sx={{ fontSize: 12, color: '#666', mb: 1 }}>
+                No series yet. Add one to get started.
+              </Typography>
+            </Box>
+          )}
+
+          {series.map((s, i) => (
+            <SeriesCard
+              key={s.id ?? i}
+              series={s}
+              index={i}
+              total={series.length}
+              onChange={updated => updateSeries(i, updated)}
+              onRemove={() => removeSeries(i)}
+            />
+          ))}
+
+          <Button
+            startIcon={<Add />}
+            onClick={addSeries}
+            size='small'
+            sx={{
+              mt: 0.5, fontSize: 12, color: '#90caf9',
+              '&:hover': { bgcolor: 'rgba(144,202,249,0.08)' },
+            }}
+          >
+            Add Series
+          </Button>
+        </DialogContent>
+
+        <Divider sx={{ borderColor: '#333' }} />
+
+        <DialogActions sx={{ px: 2, py: 1 }}>
+          <Button
+            onClick={() => setOpen(false)}
+            size='small'
+            variant='contained'
+            sx={{ fontSize: 12, bgcolor: '#333', '&:hover': { bgcolor: '#444' } }}
+          >
+            Done
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

package/src/views/builder/inspector/fields/TableColumnsEditor.jsx

@@ -0,0 +1,104 @@
+import { Box, TextField, IconButton, Button, Typography } from '@mui/material'
+import { Add, Close, EastOutlined } from '@mui/icons-material'
+import { useState, useEffect } from 'react'
+import JSEditor from '../../JSEditor'
+
+/**
+ * TableColumnsEditor
+ *
+ * Stores an array of column mapping objects: { label: string, field: string }
+ *  • label — the column header shown in the table
+ *  • field — the flat key in each row object (e.g. "customerName", "invoiceDate")
+ *
+ * Used by DataTableViewer's inspector definition (type: 'table-columns-editor').
+ */
+export default function TableColumnsEditor({ field, onChange }) {
+  const safeField  = field ?? { valueType: 'value', value: [] }
+  const isExpr     = safeField.valueType === 'expression'
+  const [rows, setRows] = useState([])
+
+  useEffect(() => {
+    if (!isExpr && Array.isArray(safeField.value)) {
+      setRows(safeField.value.length > 0 ? safeField.value : [{ label: '', field: '' }])
+    } else {
+      setRows([{ label: '', field: '' }])
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isExpr, JSON.stringify(safeField.value)])
+
+  const commit = (next) => {
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  const handleAdd    = ()          => commit([...rows, { label: '', field: '' }])
+  const handleRemove = (i)         => commit(rows.filter((_, idx) => idx !== i))
+  const handleEdit   = (i, k, v)   => commit(rows.map((r, idx) => idx === i ? { ...r, [k]: v } : r))
+
+  return (
+    <Box>
+      <Box display='flex' alignItems='center' justifyContent='space-between' mb={1}>
+        <Typography variant='subtitle2' sx={{ opacity: 0.9 }}>
+          {isExpr ? 'Using JS Expression' : 'Column Mapping'}
+        </Typography>
+        <JSEditor
+          value={rows}
+          expression={safeField.expression}
+          mode={isExpr ? 'expression' : 'value'}
+          onChange={payload => onChange?.(payload)}
+        />
+      </Box>
+
+      {!isExpr && (
+        <>
+          <Box display='flex' alignItems='center' gap={1} mb={0.5}>
+            <Typography variant='caption' sx={{ flex: 1, opacity: 0.6 }}>Header Label</Typography>
+            <Box sx={{ width: 20 }} />
+            <Typography variant='caption' sx={{ flex: 1, opacity: 0.6 }}>Data Field</Typography>
+            <Box sx={{ width: 32 }} />
+          </Box>
+
+          {rows.map((row, i) => (
+            <Box key={i} display='flex' alignItems='center' gap={1} mb={1}>
+              <TextField
+                size='small'
+                value={row.label || ''}
+                onChange={e => handleEdit(i, 'label', e.target.value)}
+                placeholder='e.g. Customer Name'
+                sx={{ flex: 1 }}
+              />
+              <EastOutlined sx={{ fontSize: 16, color: 'text.disabled', flexShrink: 0 }} />
+              <TextField
+                size='small'
+                value={row.field || ''}
+                onChange={e => handleEdit(i, 'field', e.target.value)}
+                placeholder='e.g. customerName'
+                sx={{ flex: 1 }}
+              />
+              <IconButton
+                size='small'
+                onClick={() => handleRemove(i)}
+                disabled={rows.length === 1}
+                sx={{ width: 32, height: 32, flexShrink: 0 }}
+              >
+                <Close fontSize='small' />
+              </IconButton>
+            </Box>
+          ))}
+
+          <Button size='small' startIcon={<Add />} onClick={handleAdd} sx={{ mt: 0.5 }}>
+            Add Column
+          </Button>
+        </>
+      )}
+
+      {isExpr && (
+        <Box sx={{ p: 1.5, bgcolor: 'action.hover', borderRadius: 1, mt: 1 }}>
+          <Typography variant='body2' color='text.secondary'>
+            Columns defined by JS expression — click the code icon above to edit.
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}