robobyte-front-builder 1.0.17 → 1.0.21

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

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

@@ -0,0 +1,426 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, TextField, Select, MenuItem, FormControl,
+  InputLabel, Accordion, AccordionSummary, AccordionDetails, Chip,
+  Divider, Tooltip, Switch, FormControlLabel,
+} from '@mui/material'
+import {
+  Add, Close, ExpandMore, DragIndicator, BoltOutlined,
+} from '@mui/icons-material'
+import ColumnFunctionEditor from './ColumnFunctionEditor'
+import { HelpPopover } from './FunctionHelpPopover'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const COLOR_OPTIONS = [
+  { value: 'primary',   label: 'Primary'   },
+  { value: 'secondary', label: 'Secondary' },
+  { value: 'success',   label: 'Success'   },
+  { value: 'error',     label: 'Error'     },
+  { value: 'warning',   label: 'Warning'   },
+  { value: 'info',      label: 'Info'      },
+  { value: 'inherit',   label: 'Inherit'   },
+]
+
+const VARIANT_OPTIONS = [
+  { value: 'text',      label: 'Text'      },
+  { value: 'contained', label: 'Contained' },
+  { value: 'outlined',  label: 'Outlined'  },
+]
+
+// Curated list of common MUI icon names (matched to actual imports in RowActionsCell)
+const ICON_OPTIONS = [
+  { value: '',                  label: '(none)'        },
+  { value: 'EditOutlined',      label: 'Edit'          },
+  { value: 'DeleteOutlined',    label: 'Delete'        },
+  { value: 'VisibilityOutlined',label: 'View'          },
+  { value: 'OpenInNewOutlined', label: 'Open'          },
+  { value: 'ContentCopyOutlined',label: 'Copy'         },
+  { value: 'DownloadOutlined',  label: 'Download'      },
+  { value: 'PrintOutlined',     label: 'Print'         },
+  { value: 'CheckOutlined',     label: 'Check'         },
+  { value: 'CloseOutlined',     label: 'Close'         },
+  { value: 'SendOutlined',      label: 'Send'          },
+  { value: 'RefreshOutlined',   label: 'Refresh'       },
+  { value: 'SettingsOutlined',  label: 'Settings'      },
+  { value: 'InfoOutlined',      label: 'Info'          },
+  { value: 'WarningOutlined',   label: 'Warning'       },
+  { value: 'ArchiveOutlined',   label: 'Archive'       },
+  { value: 'RestoreOutlined',   label: 'Restore'       },
+  { value: 'LockOutlined',      label: 'Lock'          },
+  { value: 'LockOpenOutlined',  label: 'Unlock'        },
+  { value: 'StarOutlined',      label: 'Star'          },
+  { value: 'AddOutlined',       label: 'Add'           },
+  { value: 'RemoveOutlined',    label: 'Remove'        },
+]
+
+const CODE_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+
+}
+`
+
+const TREE_VIEW_CODE_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog) {
+
+}
+`
+
+const DEFAULT_ACTION = () => ({
+  label:        '',
+  color:        'primary',
+  variant:      'text',
+  icon:         '',
+  code:         CODE_TEMPLATE,
+  confirmation: '',
+  disabled:     false,
+})
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const INPUT_SX = {
+  '& .MuiInputBase-root': { color: '#e0e0e0' },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+  '& .MuiInputLabel-root': { color: '#aaa' },
+}
+
+const CODE_FIELD_SX = {
+  '& .MuiInputBase-root': {
+    fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+    fontSize: 12,
+    bgcolor: '#1e1e1e',
+    color: '#d4d4d4',
+  },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
+  '& .MuiInputLabel-root': { color: '#888' },
+}
+
+const SELECT_SX = {
+  color: '#e0e0e0',
+  '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+}
+
+const SECTION_LABEL_SX = {
+  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
+  textTransform: 'uppercase', color: '#888', mb: 1,
+}
+
+// ── COLOR CHIP ────────────────────────────────────────────────────────────────
+
+const COLOR_MAP = {
+  primary:   '#1976d2',
+  secondary: '#9c27b0',
+  success:   '#2e7d32',
+  error:     '#d32f2f',
+  warning:   '#ed6c02',
+  info:      '#0288d1',
+  inherit:   '#666',
+}
+
+// ── Action card ───────────────────────────────────────────────────────────────
+
+function ActionCard({ action, index, expanded, onToggle, onChange, onRemove, context }) {
+  const update = (key, val) => onChange({ ...action, [key]: val })
+  const isTreeView  = context === 'treeViewAction'
+  const helpType    = isTreeView ? 'treeViewAction' : 'actionButton'
+  const codeDefault = isTreeView ? TREE_VIEW_CODE_TEMPLATE : CODE_TEMPLATE
+
+  const summary = action.label || `Action ${index + 1}`
+  const dot = COLOR_MAP[action.color] ?? '#666'
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={onToggle}
+      disableGutters
+      sx={{
+        bgcolor: '#2a2d32', color: '#e0e0e0',
+        border: '1px solid #3a3f45', borderRadius: '6px !important', mb: 1,
+        '&:before': { display: 'none' },
+      }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMore sx={{ color: '#aaa' }} />}
+        sx={{ minHeight: 44, '& .MuiAccordionSummary-content': { alignItems: 'center', gap: 1 } }}
+      >
+        <DragIndicator sx={{ fontSize: 16, color: '#555', flexShrink: 0 }} />
+        {/* colour dot */}
+        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: dot, flexShrink: 0 }} />
+        <Typography variant='body2' sx={{ fontWeight: 600, flex: 1 }} noWrap>{summary}</Typography>
+        <Chip
+          label={action.variant}
+          size='small'
+          sx={{ fontSize: 10, height: 18, bgcolor: '#2a3a4a', color: '#90caf9' }}
+        />
+        {action.icon && (
+          <Chip label={action.icon.replace('Outlined', '')} size='small'
+            sx={{ fontSize: 10, height: 18, bgcolor: '#1a2a1a', color: '#81c784' }} />
+        )}
+        {action.confirmation && (
+          <Chip label='confirm' size='small'
+            sx={{ fontSize: 10, height: 18, bgcolor: '#3a2a1a', color: '#ffcc80' }} />
+        )}
+        <Tooltip title='Remove action'>
+          <IconButton size='small' onClick={e => { e.stopPropagation(); onRemove() }}
+            sx={{ color: '#f44336', ml: 0.5 }}>
+            <Close fontSize='small' />
+          </IconButton>
+        </Tooltip>
+      </AccordionSummary>
+
+      <AccordionDetails sx={{ pt: 0, pb: 2, px: 2 }}>
+        <Divider sx={{ borderColor: '#3a3f45', mb: 2 }} />
+
+        {/* ── Identity ── */}
+        <Typography sx={SECTION_LABEL_SX}>Identity</Typography>
+        <Box display='flex' gap={2} mb={2} flexWrap='wrap'>
+          <TextField
+            label='Label'
+            value={action.label}
+            onChange={e => update('label', e.target.value)}
+            size='small'
+            fullWidth
+            placeholder='e.g. Edit Record'
+            sx={INPUT_SX}
+            InputLabelProps={{ shrink: true }}
+          />
+        </Box>
+
+        {/* ── Appearance ── */}
+        <Typography sx={SECTION_LABEL_SX}>Appearance</Typography>
+        <Box display='flex' gap={2} mb={2} flexWrap='wrap'>
+          <FormControl size='small' sx={{ minWidth: 130 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Color</InputLabel>
+            <Select value={action.color} label='Color'
+              onChange={e => update('color', e.target.value)} sx={SELECT_SX}>
+              {COLOR_OPTIONS.map(o => (
+                <MenuItem key={o.value} value={o.value}>
+                  <Box display='flex' alignItems='center' gap={1}>
+                    <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: COLOR_MAP[o.value] ?? '#666' }} />
+                    {o.label}
+                  </Box>
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl size='small' sx={{ minWidth: 130 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Variant</InputLabel>
+            <Select value={action.variant} label='Variant'
+              onChange={e => update('variant', e.target.value)} sx={SELECT_SX}>
+              {VARIANT_OPTIONS.map(o => (
+                <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl size='small' sx={{ minWidth: 160 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Icon</InputLabel>
+            <Select value={action.icon} label='Icon'
+              onChange={e => update('icon', e.target.value)} sx={SELECT_SX}>
+              {ICON_OPTIONS.map(o => (
+                <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {/* ── Behaviour ── */}
+        <Typography sx={SECTION_LABEL_SX}>Behaviour</Typography>
+        <Box display='flex' gap={2} mb={2} flexWrap='wrap'>
+          <TextField
+            label='Confirmation message (optional)'
+            value={action.confirmation}
+            onChange={e => update('confirmation', e.target.value)}
+            size='small'
+            fullWidth
+            placeholder='Are you sure you want to delete this record?'
+            sx={INPUT_SX}
+            InputLabelProps={{ shrink: true }}
+          />
+        </Box>
+        <Box mb={2}>
+          <FormControlLabel
+            control={
+              <Switch size='small' checked={!!action.disabled}
+                onChange={e => update('disabled', e.target.checked)} color='warning' />
+            }
+            label={<Typography variant='caption'>Disabled</Typography>}
+          />
+        </Box>
+
+        {/* ── Code ── */}
+        <Typography sx={SECTION_LABEL_SX}>Action Code</Typography>
+        <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+          <Typography sx={{ fontSize: 11, color: '#aaa' }}>Calculation function</Typography>
+          <ColumnFunctionEditor label='Action' type={helpType} value={action.code} onChange={v => update('code', v)} />
+          <HelpPopover type={helpType} />
+        </Box>
+        <TextField
+          value={action.code}
+          onChange={e => update('code', e.target.value)}
+          multiline
+          minRows={6}
+          maxRows={14}
+          fullWidth
+          size='small'
+          placeholder={codeDefault}
+          sx={CODE_FIELD_SX}
+        />
+        {isTreeView ? (
+          <Typography variant='caption' sx={{ color: '#555', mt: 0.5, display: 'block' }}>
+            <code style={{ color: '#90caf9' }}>node</code> — the clicked tree node object (all its fields).&nbsp;
+            <code style={{ color: '#90caf9' }}>data</code> / <code style={{ color: '#90caf9' }}>setData</code> — page state.&nbsp;
+            <code style={{ color: '#90caf9' }}>openDialog</code> / <code style={{ color: '#90caf9' }}>closeDialog</code> — dialog helpers.
+          </Typography>
+        ) : (
+          <Typography variant='caption' sx={{ color: '#555', mt: 0.5, display: 'block' }}>
+            <code style={{ color: '#90caf9' }}>rowData</code> — current row (all field values).&nbsp;
+            <code style={{ color: '#90caf9' }}>data</code> / <code style={{ color: '#90caf9' }}>setData</code> — page state.&nbsp;
+            <code style={{ color: '#90caf9' }}>setRefValue</code>, <code style={{ color: '#90caf9' }}>getRefValue</code>, <code style={{ color: '#90caf9' }}>clearRefRow</code>, <code style={{ color: '#90caf9' }}>getNodeRef</code>, <code style={{ color: '#90caf9' }}>THIS_NODE</code> — ref helpers.
+          </Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
+// ── Main editor ───────────────────────────────────────────────────────────────
+
+export default function ActionsConfigEditor({ field, context, onChange }) {
+  const safeField     = field ?? { valueType: 'value', value: [] }
+  const storedValue   = Array.isArray(safeField.value) ? safeField.value : []
+  const isTreeView    = context === 'treeViewAction'
+  const dialogTitle   = isTreeView ? 'Node Actions' : 'Row Actions'
+  const emptyHint     = isTreeView
+    ? 'Each action opens from the ⋮ button on the tree node. Use `node` to access the clicked item.'
+    : 'Each action appears as a button in a popover when the user clicks the ⋮ button in the Actions column. Inside each Calculation, `rowData` is available as a direct variable containing the full AG Grid row object.'
+
+  const [open, setOpen]            = useState(false)
+  const [draft, setDraft]          = useState([])
+  const [expandedIdx, setExpanded] = useState(null)
+
+  const handleOpen = () => {
+    setDraft(storedValue.length > 0 ? storedValue.map(a => ({ ...DEFAULT_ACTION(), ...a })) : [])
+    setExpanded(storedValue.length === 0 ? null : null)
+    setOpen(true)
+  }
+
+  const handleClose = () => setOpen(false)
+
+  const handleSave = () => {
+    const valid = draft.filter(a => a.label?.trim())
+    onChange?.({ valueType: 'value', value: valid })
+    setOpen(false)
+  }
+
+  const handleAdd = () => {
+    const next = [...draft, DEFAULT_ACTION()]
+    setDraft(next)
+    setExpanded(next.length - 1)
+  }
+
+  const handleRemove = idx => {
+    setDraft(prev => prev.filter((_, i) => i !== idx))
+    if (expandedIdx === idx) setExpanded(null)
+  }
+
+  const handleChange = (idx, updated) =>
+    setDraft(prev => prev.map((a, i) => i === idx ? updated : a))
+
+  return (
+    <>
+      {/* ── Trigger ── */}
+      <Box display='flex' alignItems='center' justifyContent='space-between'>
+        <Box display='flex' alignItems='center' gap={1}>
+          <BoltOutlined sx={{ fontSize: 16, color: '#7b8ea0' }} />
+          <Typography variant='caption' sx={{ color: '#aaa' }}>
+            {storedValue.length > 0
+              ? `${storedValue.length} action${storedValue.length !== 1 ? 's' : ''}`
+              : 'No row actions'}
+          </Typography>
+        </Box>
+        <Button
+          size='small' variant='outlined' onClick={handleOpen}
+          sx={{ fontSize: 11, py: 0.3, borderColor: '#555', color: '#ccc' }}
+        >
+          Configure
+        </Button>
+      </Box>
+
+      {/* ── Dialog ── */}
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        fullWidth
+        maxWidth='md'
+        PaperProps={{ sx: { bgcolor: '#1e2126', color: '#e0e0e0', border: '1px solid #3a3f45' } }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+          <Box display='flex' alignItems='center' gap={1}>
+            <BoltOutlined sx={{ color: '#7b8ea0' }} />
+            <Typography variant='h6' sx={{ fontWeight: 600 }}>{dialogTitle}</Typography>
+            <Chip
+              label={`${draft.length} action${draft.length !== 1 ? 's' : ''}`}
+              size='small'
+              sx={{ bgcolor: '#2a3a4a', color: '#90caf9', fontSize: 11 }}
+            />
+          </Box>
+          <IconButton onClick={handleClose} size='small' sx={{ color: '#aaa' }}>
+            <Close />
+          </IconButton>
+        </DialogTitle>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogContent sx={{ pt: 2, pb: 1 }}>
+          <Typography variant='caption' sx={{ color: '#666', display: 'block', mb: 2 }}>
+            {emptyHint}
+          </Typography>
+
+          {draft.length === 0 && (
+            <Box sx={{ textAlign: 'center', py: 4, color: '#555' }}>
+              <BoltOutlined sx={{ fontSize: 40, mb: 1 }} />
+              <Typography variant='body2'>No actions yet. Click Add to create one.</Typography>
+            </Box>
+          )}
+
+          {draft.map((action, idx) => (
+            <ActionCard
+              key={idx}
+              action={action}
+              index={idx}
+              context={context}
+              expanded={expandedIdx === idx}
+              onToggle={() => setExpanded(expandedIdx === idx ? null : idx)}
+              onChange={updated => handleChange(idx, updated)}
+              onRemove={() => handleRemove(idx)}
+            />
+          ))}
+
+          <Button
+            startIcon={<Add />}
+            onClick={handleAdd}
+            size='small'
+            fullWidth
+            sx={{
+              mt: 1, borderStyle: 'dashed', border: '1px dashed #3a3f45',
+              color: '#90caf9', borderRadius: 1.5, py: 1,
+              '&:hover': { bgcolor: '#1a2a3a', borderColor: '#90caf9' },
+            }}
+          >
+            Add Action
+          </Button>
+        </DialogContent>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogActions sx={{ px: 3, py: 1.5, gap: 1 }}>
+          <Button onClick={handleClose} sx={{ color: '#aaa' }}>Cancel</Button>
+          <Button onClick={handleSave} variant='contained' color='primary'>
+            Save ({draft.filter(a => a.label?.trim()).length} actions)
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}