robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -0,0 +1,240 @@
+import { Box } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+// Convert any cell value to a printable string.
+// Objects / arrays → compact JSON.  Primitives → native string coercion.
+function cellText(value) {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'object') {
+    try { return JSON.stringify(value) } catch { return String(value) }
+  }
+  return String(value)
+}
+
+/**
+ * DataTableViewerRenderer
+ *
+ * A lightweight, print-ready table that reads a flat array from
+ * viewerContext.data[dataKey] and renders it using configured column mappings.
+ *
+ * Unlike ReportViewer it never fetches data — the caller is responsible for
+ * loading the array into data[dataKey] before print/preview.
+ *
+ * Inspector props (see definitions/dataTableViewer/main.js):
+ *   dataKey       — key in viewerContext.data that holds the rows array
+ *   columns       — [{ label, field }]  (configured via TableColumnsEditor)
+ *   fontSize      — optional, default 12
+ *   headerBgColor — optional, default '#f0f0f0'
+ *   striped       — optional boolean, alternate row shading
+ *   bordered      — optional boolean, show cell borders (default true)
+ */
+export default function DataTableViewerRenderer({ node, viewerContext }) {
+  const {
+    data, form, setData, dataRef, reportRefs, openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+    isEditMode,
+  } = viewerContext
+
+  const resolveCtx = {
+    form, data, setData,
+    dataRef:    dataRef?.current ?? {},
+    reportRefs: reportRefs?.current ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  }
+
+  const main = resolveProps(node, 'main', resolveCtx)
+
+  const dataKey   = main.dataKey   || ''
+  const columns   = Array.isArray(main.columns) ? main.columns : []
+
+  // ── Table
+  const tableWidth     = main.tableWidth      || '100%'
+
+  // ── Header
+  const showHeader     = main.showHeader      !== false           // default true
+  const headerBg       = main.headerBgColor   ?? '#f0f0f0'
+  const headerText     = main.headerTextColor  || undefined
+  const headerFontSize = main.headerFontSize   != null ? Number(main.headerFontSize) : undefined
+  const headerAlign    = main.headerAlign      || 'left'
+  const headerPH       = main.headerPaddingH   != null ? `${main.headerPaddingH}px` : '8px'
+  const headerPV       = main.headerPaddingV   != null ? `${main.headerPaddingV}px` : '6px'
+
+  // ── Cell
+  const fontSize       = main.fontSize         ?? 12
+  const cellText2      = main.cellTextColor    || undefined
+  const cellAlign      = main.cellAlign        || 'left'
+  const cellPH         = main.cellPaddingH     != null ? `${main.cellPaddingH}px` : '8px'
+  const cellPV         = main.cellPaddingV     != null ? `${main.cellPaddingV}px` : '5px'
+  const cellVAlign     = main.cellVerticalAlign || 'top'
+
+  // ── Row
+  const striped        = main.striped          ?? false
+  const stripedColor   = main.stripedColor     || '#f9f9f9'
+  const rowHover       = main.rowHover         ?? false
+  const rowHoverColor  = main.rowHoverColor    || '#f0f4ff'
+
+  // ── Border
+  const bordered       = main.bordered         !== false           // default true
+  const borderColor    = main.borderColor      || '#ccc'
+  const borderWidth    = main.borderWidth      != null ? Number(main.borderWidth) : 1
+
+  // Parse testData — accepts a JS array value or a JSON string expression
+  let testRows = []
+  if (main.testData) {
+    if (Array.isArray(main.testData)) {
+      testRows = main.testData
+    } else if (typeof main.testData === 'string') {
+      try { testRows = JSON.parse(main.testData) } catch { /* ignore */ }
+    }
+  }
+
+  const liveRows = Array.isArray(data?.[dataKey]) ? data[dataKey] : []
+  // Use live data when available; fall back to testData for preview/edit
+  const rows = liveRows.length > 0 ? liveRows : testRows
+
+  // ── Edit mode placeholder ─────────────────────────────────────────────────
+  if (isEditMode) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{
+          border: '2px dashed #80cbc4', borderRadius: 1, p: 1.5, m: 0.5,
+          bgcolor: '#e0f2f1', display: 'flex', flexDirection: 'column', gap: 0.5, minHeight: 72,
+        }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box sx={{ fontSize: 10, fontWeight: 700, color: '#00796b',
+              textTransform: 'uppercase', letterSpacing: 0.5, flexShrink: 0 }}>
+              Data Table
+            </Box>
+            {columns.length > 0 && (
+              <Box sx={{ fontSize: 10, color: '#4db6ac', ml: 'auto', flexShrink: 0 }}>
+                {columns.length} col{columns.length !== 1 ? 's' : ''}
+              </Box>
+            )}
+          </Box>
+
+          {dataKey && (
+            <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'baseline' }}>
+              <Box sx={{ fontSize: 9, color: '#4db6ac', fontWeight: 600, minWidth: 48, flexShrink: 0 }}>
+                dataKey
+              </Box>
+              <Box sx={{ fontSize: 10, color: '#004d40', fontFamily: 'monospace' }}>
+                {cellText(dataKey)}
+              </Box>
+            </Box>
+          )}
+
+          {columns.length > 0 && (
+            <Box sx={{ fontSize: 9, color: '#26a69a', mt: 0.25,
+              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {columns.slice(0, 6).map(c => c.label || c.field || '?').join(' · ')}
+              {columns.length > 6 ? ` · +${columns.length - 6} more` : ''}
+            </Box>
+          )}
+
+          {columns.length === 0 && (
+            <Box sx={{ fontSize: 10, color: '#80cbc4', fontStyle: 'italic' }}>
+              No columns configured
+            </Box>
+          )}
+
+          {testRows.length > 0 && (
+            <Box sx={{ fontSize: 9, color: '#00796b', mt: 0.25 }}>
+              ⚡ {testRows.length} test row{testRows.length !== 1 ? 's' : ''} configured
+            </Box>
+          )}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Live / preview / print: plain HTML table ──────────────────────────────
+  const cellBorder = bordered ? `${borderWidth}px solid ${borderColor}` : 'none'
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box
+        component='table'
+        sx={{
+          width: tableWidth,
+          borderCollapse: 'collapse',
+          fontSize,
+          fontFamily: 'inherit',
+          tableLayout: 'auto',
+        }}
+      >
+        {showHeader && (
+          <thead>
+            <tr>
+              {columns.map((col, i) => (
+                <th
+                  key={i}
+                  style={{
+                    border: cellBorder,
+                    padding: `${headerPV} ${headerPH}`,
+                    textAlign: headerAlign,
+                    backgroundColor: headerBg,
+                    color: headerText,
+                    fontSize: headerFontSize,
+                    fontWeight: 600,
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {cellText(col.label || col.field || '')}
+                </th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length || 1}
+                style={{
+                  border: cellBorder,
+                  padding: '10px 8px',
+                  textAlign: 'center',
+                  color: '#aaa',
+                  fontSize: fontSize - 1,
+                }}
+              >
+                No data
+              </td>
+            </tr>
+          ) : (
+            rows.map((row, ri) => {
+              const isOdd = ri % 2 === 1
+              const rowBg = striped && isOdd ? stripedColor : undefined
+              return (
+                <tr
+                  key={ri}
+                  style={{ backgroundColor: rowBg }}
+                  onMouseEnter={rowHover ? e => { e.currentTarget.style.backgroundColor = rowHoverColor } : undefined}
+                  onMouseLeave={rowHover ? e => { e.currentTarget.style.backgroundColor = rowBg || '' } : undefined}
+                >
+                  {columns.map((col, ci) => (
+                    <td
+                      key={ci}
+                      style={{
+                        border: cellBorder,
+                        padding: `${cellPV} ${cellPH}`,
+                        verticalAlign: cellVAlign,
+                        textAlign: cellAlign,
+                        color: cellText2,
+                      }}
+                    >
+                      {cellText(row[col.field])}
+                    </td>
+                  ))}
+                </tr>
+              )
+            })
+          )}
+        </tbody>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -4,46 +4,47 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { TextField } from '@mui/material'
 import dayjs from 'dayjs'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
 export default function DatePickerRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
-  // 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] || null
+  const error = validationErrors?.[key]
 
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText, ...pickerProps } = main
 
   const handleChange = (newValue) => {
-    // Store as dayjs object or ISO string depending on preference
-    updateFormValue(key, newValue ? newValue.toISOString() : null)
+    const iso = newValue ? newValue.toISOString() : null
+    updateFormValue(key, iso)
+    runFieldAction(node, viewerContext, 'onChange', iso)
   }
 
-  // Convert value to dayjs if it exists
   const dayjsValue = value ? dayjs(value) : null
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DatePicker
-          {...main}
-          value={dayjsValue}
-          onChange={handleChange}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              fullWidth
-              error={!!error}
-              helperText={error || main.helperText}
-            />
-          )}
-        />
-      </LocalizationProvider>
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DatePicker
+            {...pickerProps}
+            value={dayjsValue}
+            onChange={handleChange}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                fullWidth
+                error={!!error}
+                helperText={error || helperText}
+              />
+            )}
+          />
+        </LocalizationProvider>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -0,0 +1,327 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import {
+  Dialog, DialogTitle, DialogContent, DialogActions,
+  Box, Typography, IconButton, Button, CircularProgress,
+} from '@mui/material'
+import {
+  CloseOutlined, OpenInBrowserOutlined,
+  EditOutlined, DeleteOutlined, VisibilityOutlined, OpenInNewOutlined,
+  ContentCopyOutlined, DownloadOutlined, PrintOutlined, CheckOutlined,
+  SendOutlined, RefreshOutlined, SettingsOutlined, InfoOutlined,
+  WarningOutlined, ArchiveOutlined, RestoreOutlined, LockOutlined,
+  LockOpenOutlined, StarOutlined, AddOutlined, RemoveOutlined,
+} from '@mui/icons-material'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+import ComponentRenderer from '../ComponentRenderer'
+import ViewRendererRenderer from './ViewRendererRenderer'
+
+// ── Icon registry (keep in sync with ActionsConfigEditor) ─────────────────────
+const ICON_MAP = {
+  EditOutlined, DeleteOutlined, VisibilityOutlined, OpenInNewOutlined,
+  ContentCopyOutlined, DownloadOutlined, PrintOutlined, CheckOutlined,
+  CloseOutlined, SendOutlined, RefreshOutlined, SettingsOutlined,
+  InfoOutlined, WarningOutlined, ArchiveOutlined, RestoreOutlined,
+  LockOutlined, LockOpenOutlined, StarOutlined, AddOutlined, RemoveOutlined,
+}
+
+function ResolvedIcon({ name }) {
+  const Comp = name ? ICON_MAP[name] : null
+  return Comp ? <Comp sx={{ fontSize: 16 }} /> : null
+}
+
+// ── Single action button ──────────────────────────────────────────────────────
+function DialogActionButton({ action, execCtx, onDone }) {
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = async () => {
+    if (!action.code) { onDone?.(); return }
+    setLoading(true)
+    try {
+      await executeJSCode(action.code, execCtx)
+    } catch (e) {
+      console.error('[DialogActionButton]', e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Button
+      variant={action.variant || 'text'}
+      color={action.color === 'inherit' ? undefined : (action.color || 'primary')}
+      disabled={!!action.disabled || loading}
+      size='small'
+      startIcon={loading ? <CircularProgress size={12} /> : <ResolvedIcon name={action.icon} />}
+      onClick={handleClick}
+      sx={{ textTransform: 'none', minWidth: 80 }}
+    >
+      {action.label}
+    </Button>
+  )
+}
+
+// ── DialogRenderer ────────────────────────────────────────────────────────────
+//
+// Renders a single dialog node.
+//
+// In EDIT MODE  — shows a compact card in the DialogsZone so the builder can
+//                 select it, inspect its props, and drop components into it.
+//                 The actual MUI Dialog is never opened in edit mode.
+//
+// In PRODUCTION — mounts a hidden MUI Dialog and registers open/close handlers
+//                 in viewerContext.dialogRefs so that any button / action / column
+//                 function can call openDialog(key) / closeDialog(key).
+//
+// When openDialog(key, data) is called the optional `data` object is merged into
+// the dialog's own isolated data state, making it available inside the dialog
+// via the normal `data` context variable.
+
+export default function DialogRenderer({ node, viewerContext }) {
+  const { data: parentData, form, setData: parentSetData, dataRef, reportRefs,
+          openDialog, closeDialog, dialogRefs, isEditMode, builderContext } = viewerContext
+
+  const main = resolveProps(node, 'main', {
+    form,
+    data: parentData,
+    setData: parentSetData,
+    dataRef: dataRef?.current ?? {},
+    reportRefs: reportRefs?.current ?? {},
+    openDialog: openDialog ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    // page — for dialogs the page stores are the parent page stores themselves
+    pageData:       viewerContext.pageData       ?? parentData,
+    pageSetData:    viewerContext.pageSetData    ?? parentSetData,
+    pageDataRef:    viewerContext.pageDataRef    ?? dataRef,
+    pageReportRefs: viewerContext.pageReportRefs ?? reportRefs,
+  })
+
+  const {
+    key: dialogKey,
+    viewId,
+    title,
+    hideTitle      = false,
+    maxWidth       = 'sm',
+    fullWidth      = true,
+    fullScreen     = false,
+    showCloseButton = true,
+    closeOnBackdrop = true,
+    dialogActions: rawDialogActions,
+  } = main
+
+  const dialogActions = Array.isArray(rawDialogActions)
+    ? rawDialogActions.filter(a => a.label?.trim())
+    : []
+
+  // Synthetic ViewRenderer node — built once per viewId change so that
+  // ViewRendererRenderer can resolve props and fetch the view normally.
+  const viewNode = useMemo(() => !viewId ? null : ({
+    id: `${node.id}__vr`,
+    type: 'viewRenderer',
+    props: {
+      main: {
+        key:        { valueType: 'value', value: `${dialogKey ?? node.id}_view` },
+        viewId:     { valueType: 'value', value: viewId },
+        heightMode: { valueType: 'value', value: 'auto' },
+        isolated:   { valueType: 'value', value: true },
+      },
+      style:    {},
+      advanced: {},
+    },
+  }), [viewId, node.id, dialogKey])
+
+  // ── Dialog state ──────────────────────────────────────────────────────────
+  const [isOpen, setIsOpen]         = useState(false)
+  const [dialogData, setDialogData] = useState({})
+
+  // ── Register in dialogRefs ────────────────────────────────────────────────
+  useEffect(() => {
+    if (!dialogRefs?.current || !dialogKey) return
+    dialogRefs.current[dialogKey] = {
+      open:  (data) => { setDialogData(data && typeof data === 'object' ? data : {}); setIsOpen(true) },
+      close: ()     => setIsOpen(false),
+    }
+    return () => { delete dialogRefs.current[dialogKey] }
+  }, [dialogKey, dialogRefs])
+
+  const handleClose = useCallback(() => {
+    if (!closeOnBackdrop) return
+    setIsOpen(false)
+  }, [closeOnBackdrop])
+
+  // ── Child viewerContext ───────────────────────────────────────────────────
+  // Dialogs always run in production mode regardless of the builder's edit mode.
+  // They get their own isolated data store seeded by the openDialog(key, data) call.
+  const [childData, setChildData]   = useState({})
+  const [childForm, setChildForm]   = useState({})
+  const childDataRef  = useRef({})
+  const childReportRefs = useRef({})
+
+  // Sync dialogData into childData when dialog opens
+  useEffect(() => {
+    if (isOpen) setChildData(dialogData)
+  }, [isOpen, dialogData])
+
+  const childViewerContext = {
+    ...viewerContext,
+    isEditMode:   false,
+    isPreviewMode: true,
+    builderContext: null,
+    data:    childData,
+    setData: setChildData,
+    form:    childForm,
+    setForm: setChildForm,
+    updateFormValue: (k, v) => setChildForm(prev => ({ ...prev, [k]: v })),
+    dataRef:    childDataRef,
+    reportRefs: childReportRefs,
+    // `page` — parent/main-page stores accessible as page.data, page.setData, etc.
+    // These are the outer page's stores; `data` above is the dialog's isolated state.
+    pageData:       parentData,
+    pageSetData:    parentSetData,
+    pageDataRef:    dataRef,
+    pageReportRefs: reportRefs,
+  }
+
+  // ── EDIT MODE — selectable card ───────────────────────────────────────────
+  if (isEditMode) {
+    const isSelected = builderContext?.selectedId === node.id
+    return (
+      <Box
+        onClick={() => builderContext?.setSelectedId(node.id)}
+        sx={{
+          border: isSelected ? '2px solid #9c27b0' : '1px dashed #555',
+          borderRadius: 1.5,
+          p: 1.5,
+          cursor: 'pointer',
+          bgcolor: isSelected ? 'rgba(156,39,176,0.07)' : 'rgba(255,255,255,0.03)',
+          '&:hover': { borderColor: '#9c27b0', bgcolor: 'rgba(156,39,176,0.05)' },
+          minWidth: 220,
+        }}
+      >
+        <Box display='flex' alignItems='center' gap={1} mb={1}>
+          <OpenInBrowserOutlined sx={{ fontSize: 15, color: '#9c27b0' }} />
+          <Typography sx={{ fontSize: 11, fontWeight: 700, color: '#9c27b0', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
+            Dialog
+          </Typography>
+          {dialogKey && (
+            <Typography sx={{ fontSize: 11, color: '#aaa', ml: 'auto', fontFamily: 'monospace' }}>
+              key: {dialogKey}
+            </Typography>
+          )}
+        </Box>
+
+        {/* Title row */}
+        <Typography sx={{ fontSize: 12, color: hideTitle ? '#555' : '#ccc', fontStyle: hideTitle ? 'italic' : 'normal', mb: 0.5 }}>
+          {hideTitle
+            ? '(title hidden)'
+            : title || <span style={{ opacity: 0.4 }}>(no title)</span>
+          }
+        </Typography>
+
+        {/* Content hint */}
+        <Box mb={dialogActions.length > 0 ? 0.5 : 0}>
+          {viewId ? (
+            <Typography sx={{ fontSize: 10, color: '#7b8ea0', fontFamily: 'monospace' }}>
+              viewId: {viewId}
+            </Typography>
+          ) : node.children?.length > 0 ? (
+            <Typography sx={{ fontSize: 10, color: '#666' }}>
+              {node.children.length} child component{node.children.length !== 1 ? 's' : ''}
+            </Typography>
+          ) : (
+            <Typography sx={{ fontSize: 10, color: '#444', fontStyle: 'italic' }}>
+              No view ID set — drop components or set a View ID
+            </Typography>
+          )}
+        </Box>
+
+        {/* Action buttons hint */}
+        {dialogActions.length > 0 && (
+          <Typography sx={{ fontSize: 10, color: '#7b8ea0' }}>
+            {dialogActions.length} action button{dialogActions.length !== 1 ? 's' : ''}: {dialogActions.map(a => a.label).join(', ')}
+          </Typography>
+        )}
+      </Box>
+    )
+  }
+
+  // ── Action buttons execution context ─────────────────────────────────────
+  // Runs in the dialog's isolated child context so Calculations see childData.
+  // closeDialog is pre-wired to close THIS dialog as a convenience shortcut.
+  const actionExecCtx = {
+    form:       childViewerContext.form    ?? {},
+    data:       childViewerContext.data    ?? {},
+    setData:    childViewerContext.setData ?? (() => {}),
+    dataRef:    childDataRef?.current      ?? {},
+    reportRefs: childReportRefs?.current   ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    pageData:       parentData,
+    pageSetData:    parentSetData,
+    pageDataRef:    dataRef,
+    pageReportRefs: reportRefs,
+    // Convenience: close THIS dialog without knowing its key
+    extraVars: {
+      closeThisDialog: () => setIsOpen(false),
+    },
+  }
+
+  // ── PRODUCTION MODE — MUI Dialog ──────────────────────────────────────────
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleClose}
+      maxWidth={maxWidth}
+      fullWidth={fullWidth}
+      fullScreen={fullScreen}
+    >
+      {/* Title bar — hidden when hideTitle is true */}
+      {!hideTitle && (title || showCloseButton) && (
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pr: 1 }}>
+          <Typography variant='h6' sx={{ fontSize: 16, fontWeight: 600 }}>
+            {title ?? ''}
+          </Typography>
+          {showCloseButton && (
+            <IconButton size='small' onClick={() => setIsOpen(false)}>
+              <CloseOutlined fontSize='small' />
+            </IconButton>
+          )}
+        </DialogTitle>
+      )}
+
+      {/* Close button only (no title text) when title hidden but button still wanted */}
+      {hideTitle && showCloseButton && (
+        <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1 }}>
+          <IconButton size='small' onClick={() => setIsOpen(false)}>
+            <CloseOutlined fontSize='small' />
+          </IconButton>
+        </Box>
+      )}
+
+      <DialogContent dividers={!hideTitle} sx={{ p: viewNode ? 0 : undefined }}>
+        {viewNode
+          ? /* View ID set → render the embedded view */
+            <ViewRendererRenderer node={viewNode} viewerContext={childViewerContext} />
+          : /* No view ID → render dropped child components */
+            node.children?.map(child => (
+              <ComponentRenderer key={child.id} node={child} viewerContext={childViewerContext} />
+            ))
+        }
+      </DialogContent>
+
+      {/* Action buttons footer */}
+      {dialogActions.length > 0 && (
+        <DialogActions sx={{ px: 2.5, py: 1.5, gap: 1 }}>
+          {dialogActions.map((action, idx) => (
+            <DialogActionButton
+              key={idx}
+              action={action}
+              execCtx={actionExecCtx}
+              onDone={() => setIsOpen(false)}
+            />
+          ))}
+        </DialogActions>
+      )}
+    </Dialog>
+  )
+}

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

@@ -4,7 +4,7 @@ import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function DividerRenderer({ 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}>