robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/printBuilder/PrintBuilderViewer.jsx

@@ -0,0 +1,627 @@
+import { Box, Button, Dialog, IconButton, Tooltip, TextField, MenuItem, ToggleButton, ToggleButtonGroup } from '@mui/material'
+import { useState, useRef } from 'react'
+import {
+  DataObjectOutlined, FullscreenExitOutlined, SaveOutlined,
+  AddOutlined, DeleteOutlined, PrintOutlined,
+  DarkModeOutlined, LightModeOutlined, HistoryOutlined,
+} from '@mui/icons-material'
+import Editor from '@monaco-editor/react'
+import ComponentRenderer from 'views/builder/viewer/ComponentRenderer'
+import { useBuilder } from 'context/BuilderContext'
+import { Endpoints, Services } from 'services/Endpoints'
+import toast from 'react-hot-toast'
+import { createEmptyNode } from 'src/pages/printBuilder/index'
+import PrintDialog from 'views/builder/viewer/PrintDialog'
+import PrintPreviewCanvas from 'views/printBuilder/PrintPreviewCanvas'
+
+// ── Page-size lookup ──────────────────────────────────────────────────────────
+const PAGE_SIZES = {
+  A4:     { label: 'A4',        portrait: { w: 794,  h: 1123 }, landscape: { w: 1123, h: 794  } },
+  Letter: { label: 'US Letter', portrait: { w: 816,  h: 1056 }, landscape: { w: 1056, h: 816  } },
+  Legal:  { label: 'US Legal',  portrait: { w: 816,  h: 1344 }, landscape: { w: 1344, h: 816  } },
+}
+const mmToPx = (mm) => Math.round((mm ?? 0) * 3.7795)
+
+// ── Zone colours ──────────────────────────────────────────────────────────────
+export const ZONE_COLORS = {
+  header: '#1565c0',
+  footer: '#6a1b9a',
+  body:   '#1b5e20',
+}
+
+// ── Save dialog ───────────────────────────────────────────────────────────────
+function SaveDialog({ open, onClose, onSave, isSaving, defaultTitle }) {
+  const [title, setTitle] = useState(defaultTitle || '')
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='xs' fullWidth>
+      <Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <Box sx={{ fontWeight: 600, fontSize: 16 }}>Save Print Layout</Box>
+        <TextField label='Name' value={title} onChange={e => setTitle(e.target.value)}
+          size='small' fullWidth autoFocus
+          onKeyDown={e => { if (e.key === 'Enter' && title.trim()) onSave(title.trim()) }} />
+        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+          <Button onClick={onClose} size='small'>Cancel</Button>
+          <Button onClick={() => onSave(title.trim())} variant='contained' size='small'
+            disabled={!title.trim() || isSaving}>
+            {isSaving ? 'Saving…' : 'Save'}
+          </Button>
+        </Box>
+      </Box>
+    </Dialog>
+  )
+}
+
+// ── Zone frame (edit mode only) ────────────────────────────────────────────────
+function ZoneFrame({ label, color, height, isActive, onClick, children, onDelete, canDelete }) {
+  return (
+    <Box sx={{ mb: 2, cursor: 'pointer' }} onClick={onClick}>
+      <Box sx={{
+        display: 'flex', alignItems: 'center', gap: 1,
+        px: 1, py: 0.5,
+        bgcolor: isActive ? color : '#555',
+        borderRadius: '4px 4px 0 0',
+        transition: 'background 0.15s',
+      }}>
+        <Box sx={{ fontSize: 11, fontWeight: 700, color: '#fff', letterSpacing: 0.5, flex: 1 }}>
+          {label}
+        </Box>
+        {isActive && (
+          <Box sx={{ fontSize: 9, color: 'rgba(255,255,255,0.85)', bgcolor: 'rgba(255,255,255,0.2)',
+            borderRadius: 0.5, px: 0.75, py: 0.25, fontWeight: 700 }}>
+            ACTIVE
+          </Box>
+        )}
+        {canDelete && onDelete && (
+          <Tooltip title='Delete page'>
+            <IconButton size='small' onClick={e => { e.stopPropagation(); onDelete() }}
+              sx={{ color: 'rgba(255,255,255,0.7)', p: 0.25, '&:hover': { color: '#fff' } }}>
+              <DeleteOutlined sx={{ fontSize: 14 }} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Box>
+      <Box sx={{
+        bgcolor: 'white',
+        minHeight: height ?? 80,
+        border: '2px solid',
+        borderTop: 'none',
+        borderColor: isActive ? color : 'transparent',
+        borderRadius: '0 0 4px 4px',
+        transition: 'border-color 0.15s',
+        overflow: 'hidden',
+        position: 'relative',
+      }}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+// ── Settings tab (exported — used by the left sidebar) ────────────────────────
+export function PrintSettingsTab() {
+  const { schema, setSchema } = useBuilder()
+  const s = schema?.settings ?? {}
+
+  const set       = (patch) => setSchema(prev => ({ ...prev, settings: { ...(prev.settings ?? {}), ...patch } }))
+  const setMargin = (k, v)  => setSchema(prev => ({
+    ...prev,
+    settings: { ...(prev.settings ?? {}), margins: { ...(prev.settings?.margins ?? {}), [k]: Number(v) || 0 } },
+  }))
+  const setHeader = (patch) => setSchema(prev => ({
+    ...prev,
+    settings: { ...(prev.settings ?? {}), header: { ...(prev.settings?.header ?? {}), ...patch } },
+  }))
+  const setFooter = (patch) => setSchema(prev => ({
+    ...prev,
+    settings: { ...(prev.settings ?? {}), footer: { ...(prev.settings?.footer ?? {}), ...patch } },
+  }))
+  const setWatermark = (patch) => setSchema(prev => ({
+    ...prev,
+    settings: {
+      ...(prev.settings ?? {}),
+      watermark: { ...(prev.settings?.watermark ?? {}), ...patch },
+    },
+  }))
+  const setHeaderMargin = (k, v) => setSchema(prev => ({
+    ...prev,
+    settings: {
+      ...(prev.settings ?? {}),
+      header: {
+        ...(prev.settings?.header ?? {}),
+        margins: { ...(prev.settings?.header?.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }), [k]: Number(v) || 0 },
+      },
+    },
+  }))
+  const setFooterMargin = (k, v) => setSchema(prev => ({
+    ...prev,
+    settings: {
+      ...(prev.settings ?? {}),
+      footer: {
+        ...(prev.settings?.footer ?? {}),
+        margins: { ...(prev.settings?.footer?.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }), [k]: Number(v) || 0 },
+      },
+    },
+  }))
+
+  return (
+    <Box sx={{ p: 2, overflowY: 'auto', height: '100%', display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Box sx={{ fontWeight: 600, fontSize: 13 }}>Page Settings</Box>
+
+      <TextField select label='Page Size' size='small' value={s.pageSize ?? 'A4'}
+        onChange={e => set({ pageSize: e.target.value })}>
+        {Object.entries(PAGE_SIZES).map(([k, v]) => <MenuItem key={k} value={k}>{v.label}</MenuItem>)}
+      </TextField>
+
+      <TextField select label='Orientation' size='small' value={s.orientation ?? 'portrait'}
+        onChange={e => set({ orientation: e.target.value })}>
+        <MenuItem value='portrait'>Portrait</MenuItem>
+        <MenuItem value='landscape'>Landscape</MenuItem>
+      </TextField>
+
+      <Box sx={{ fontSize: 12, color: 'text.secondary', fontWeight: 600 }}>Body Margins (mm)</Box>
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
+        {['top', 'right', 'bottom', 'left'].map(side => (
+          <TextField key={side} label={side.charAt(0).toUpperCase() + side.slice(1)}
+            size='small' type='number' value={s.margins?.[side] ?? 0}
+            onChange={e => setMargin(side, e.target.value)} />
+        ))}
+      </Box>
+
+      <Box sx={{ fontSize: 12, color: ZONE_COLORS.header, fontWeight: 600 }}>Header</Box>
+      <Box sx={{ display: 'flex', gap: 1 }}>
+        <TextField select label='Enabled' size='small' sx={{ flex: 1 }}
+          value={s.header?.enabled ? 'yes' : 'no'}
+          onChange={e => setHeader({ enabled: e.target.value === 'yes' })}>
+          <MenuItem value='yes'>Yes</MenuItem>
+          <MenuItem value='no'>No</MenuItem>
+        </TextField>
+        <TextField label='Height (mm)' size='small' type='number' sx={{ flex: 1 }}
+          value={s.header?.height ?? 10}
+          onChange={e => setHeader({ height: Number(e.target.value) || 0 })} />
+      </Box>
+      <Box sx={{ fontSize: 11, color: 'text.secondary', fontWeight: 500 }}>Header Margins (mm)</Box>
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
+        {['top', 'right', 'bottom', 'left'].map(side => (
+          <TextField key={side} label={side.charAt(0).toUpperCase() + side.slice(1)}
+            size='small' type='number'
+            value={s.header?.margins?.[side] ?? 0}
+            onChange={e => setHeaderMargin(side, e.target.value)} />
+        ))}
+      </Box>
+
+      <Box sx={{ fontSize: 12, color: ZONE_COLORS.footer, fontWeight: 600 }}>Footer</Box>
+      <Box sx={{ display: 'flex', gap: 1 }}>
+        <TextField select label='Enabled' size='small' sx={{ flex: 1 }}
+          value={s.footer?.enabled ? 'yes' : 'no'}
+          onChange={e => setFooter({ enabled: e.target.value === 'yes' })}>
+          <MenuItem value='yes'>Yes</MenuItem>
+          <MenuItem value='no'>No</MenuItem>
+        </TextField>
+        <TextField label='Height (mm)' size='small' type='number' sx={{ flex: 1 }}
+          value={s.footer?.height ?? 10}
+          onChange={e => setFooter({ height: Number(e.target.value) || 0 })} />
+      </Box>
+      <Box sx={{ fontSize: 11, color: 'text.secondary', fontWeight: 500 }}>Footer Margins (mm)</Box>
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
+        {['top', 'right', 'bottom', 'left'].map(side => (
+          <TextField key={side} label={side.charAt(0).toUpperCase() + side.slice(1)}
+            size='small' type='number'
+            value={s.footer?.margins?.[side] ?? 0}
+            onChange={e => setFooterMargin(side, e.target.value)} />
+        ))}
+      </Box>
+
+      <TextField select label='Page Numbers' size='small'
+        value={s.footer?.showPageNumbers ? 'yes' : 'no'}
+        onChange={e => setFooter({ showPageNumbers: e.target.value === 'yes' })}>
+        <MenuItem value='yes'>Show</MenuItem>
+        <MenuItem value='no'>Hide</MenuItem>
+      </TextField>
+
+      {s.footer?.showPageNumbers && (
+        <>
+          <TextField select label='Alignment' size='small'
+            value={s.footer?.pageNumberAlign ?? 'center'}
+            onChange={e => setFooter({ pageNumberAlign: e.target.value })}>
+            <MenuItem value='left'>Left</MenuItem>
+            <MenuItem value='center'>Center</MenuItem>
+            <MenuItem value='right'>Right</MenuItem>
+          </TextField>
+          <TextField label='Format' size='small'
+            value={s.footer?.pageNumberFormat ?? 'Page {page} of {pages}'}
+            onChange={e => setFooter({ pageNumberFormat: e.target.value })}
+            helperText='Use {page} and {pages}' />
+        </>
+      )}
+
+      {/* ── Watermark ─────────────────────────────────────────────────── */}
+      <Box sx={{ fontSize: 12, color: 'text.secondary', fontWeight: 600, mt: 1 }}>Watermark</Box>
+      <TextField select label='Enabled' size='small'
+        value={s.watermark?.enabled ? 'yes' : 'no'}
+        onChange={e => setWatermark({ enabled: e.target.value === 'yes' })}>
+        <MenuItem value='yes'>Yes</MenuItem>
+        <MenuItem value='no'>No</MenuItem>
+      </TextField>
+
+      {s.watermark?.enabled && (
+        <>
+          <TextField label='Text' size='small'
+            value={s.watermark?.text ?? ''}
+            onChange={e => setWatermark({ text: e.target.value })}
+            placeholder='e.g. DRAFT, CONFIDENTIAL' />
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
+            <TextField label='Font Size (pt)' size='small' type='number'
+              value={s.watermark?.fontSize ?? 60}
+              onChange={e => setWatermark({ fontSize: Number(e.target.value) || 60 })} />
+            <TextField label='Angle (°)' size='small' type='number'
+              value={s.watermark?.angle ?? -45}
+              onChange={e => setWatermark({ angle: Number(e.target.value) })} />
+            <TextField label='Opacity (0–1)' size='small' type='number'
+              inputProps={{ step: 0.05, min: 0, max: 1 }}
+              value={s.watermark?.opacity ?? 0.1}
+              onChange={e => setWatermark({ opacity: Math.min(1, Math.max(0, Number(e.target.value))) })} />
+            <TextField label='Color' size='small'
+              value={s.watermark?.color ?? '#000000'}
+              onChange={e => setWatermark({ color: e.target.value })}
+              placeholder='#000000 or rgba(...)' />
+          </Box>
+        </>
+      )}
+
+      {/* ── Test Data ─────────────────────────────────────────────────── */}
+      <Box sx={{ fontSize: 12, color: 'text.secondary', fontWeight: 600, mt: 1 }}>Test Data (JSON)</Box>
+      <Box sx={{ fontSize: 11, color: 'text.disabled', mb: -1 }}>
+        Used by the Test Print button to simulate real data.
+      </Box>
+      <Box sx={{ height: 200, border: '1px solid', borderColor: 'divider', borderRadius: 1, overflow: 'hidden' }}>
+        <Editor
+          height='200px'
+          defaultLanguage='json'
+          theme='vs-dark'
+          value={schema?.testData ?? '{}'}
+          onChange={val => setSchema(prev => ({ ...prev, testData: val }))}
+          options={{ minimap: { enabled: false }, fontSize: 12, scrollBeyondLastLine: false }}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+// ── Main viewer ───────────────────────────────────────────────────────────────
+export default function PrintBuilderViewer({ metaData, onSaved, isDark, onToggleTheme }) {
+  const {
+    schema, setSchema,
+    selectedId, setSelectedId,
+    draggingNodeId, setDraggingNodeId,
+    data, setData, form, setForm, updateFormValue,
+    validationErrors, setValidationErrors,
+    dataRef, reportRefs, dialogRefs,
+    openDialog, closeDialog,
+    markClean,
+    logSchema, openSessionLog,
+  } = useBuilder()
+
+  const [saveOpen, setSaveOpen]     = useState(false)
+  const [isSaving, setIsSaving]     = useState(false)
+  const [schemaOpen, setSchemaOpen] = useState(false)
+  const [mode, setMode]             = useState('edit')
+  const printDialogRef              = useRef(null)
+
+  const settings    = schema?.settings ?? {}
+  const activeZone  = schema?.activeZone ?? 'body-page-0'
+  const pageOrder   = schema?.pageOrder  ?? ['body-page-0']
+  const zones       = schema?.zones      ?? {}
+  const m           = settings.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }
+
+  // ── Page dimensions ───────────────────────────────────────────────────────
+  const sizeConf  = PAGE_SIZES[settings.pageSize] ?? PAGE_SIZES.A4
+  const dimConf   = sizeConf[settings.orientation] ?? sizeConf.portrait
+  const pageW     = dimConf.w
+  const pageH     = dimConf.h
+  const headerH   = settings.header?.enabled ? mmToPx(settings.header?.height ?? 10) : 0
+  const footerH   = settings.footer?.enabled ? mmToPx(settings.footer?.height ?? 10) : 0
+  const bodyH     = pageH - headerH - footerH
+
+  // ── Zone switch ───────────────────────────────────────────────────────────
+  // Clicking a zone frame: switch to it if not active, then always select the
+  // zone's root container so the Inspector opens and the user can stylize it.
+  const switchZone = (zoneKey) => {
+    if (mode === 'preview') return
+
+    // Compute the new root BEFORE the schema update (needed for setSelectedId)
+    const newRoot = zoneKey === activeZone
+      ? (schema?.root ?? createEmptyNode(zoneKey))
+      : (zones[zoneKey] ?? createEmptyNode(zoneKey))
+
+    if (zoneKey !== activeZone) {
+      setSchema(prev => ({
+        ...prev,
+        zones:     { ...prev.zones, [prev.activeZone ?? zoneKey]: prev.root },
+        root:      prev.zones?.[zoneKey] ?? createEmptyNode(zoneKey),
+        activeZone: zoneKey,
+      }))
+    }
+
+    // Select the zone root so the Inspector shows its Style/Main tabs immediately
+    setSelectedId(newRoot?.id ?? null)
+  }
+
+  // ── Add page ──────────────────────────────────────────────────────────────
+  const addPage = () => {
+    const newId = `body-page-${Date.now()}`
+    setSchema(prev => ({
+      ...prev,
+      pageOrder: [...(prev.pageOrder ?? []), newId],
+      zones: {
+        ...prev.zones,
+        [prev.activeZone ?? newId]: prev.root,
+        [newId]: createEmptyNode(newId),
+      },
+    }))
+  }
+
+  // ── Delete page ───────────────────────────────────────────────────────────
+  const deletePage = (pageId) => {
+    setSchema(prev => {
+      const order     = (prev.pageOrder ?? []).filter(id => id !== pageId)
+      const newZones  = { ...prev.zones }
+      delete newZones[pageId]
+
+      let newRoot   = prev.root
+      let newActive = prev.activeZone
+      if (prev.activeZone === pageId) {
+        newActive = order[0] ?? 'body-page-0'
+        newRoot   = newZones[newActive] ?? createEmptyNode(newActive)
+      }
+      return { ...prev, pageOrder: order, zones: newZones, root: newRoot, activeZone: newActive }
+    })
+  }
+
+  // ── viewerContext factory ─────────────────────────────────────────────────
+  // isPrintBuilder: true signals ReportViewerRenderer to swap to placeholder/table
+  const makeZoneViewerContext = (zoneKey) => ({
+    schema:         { ...schema, root: getZoneRoot(zoneKey) },
+    mode,
+    isEditMode:     mode === 'edit',
+    isPreviewMode:  mode === 'preview',
+    isPrintBuilder: true,
+    data, setData, form, setForm, updateFormValue,
+    validationErrors, setValidationErrors,
+    submitForm:  async () => {},
+    resetForm:   () => {},
+    dataRef, reportRefs, dialogRefs,
+    openDialog, closeDialog,
+    builderContext: (mode === 'edit' && zoneKey === activeZone) ? {
+      selectedId, setSelectedId,
+      setSchema: (updater) => {
+        setSchema(prev => {
+          const updated = typeof updater === 'function' ? updater(prev) : updater
+          return {
+            ...prev,
+            zones: { ...prev.zones, [zoneKey]: updated.root },
+            root:  updated.root,
+          }
+        })
+      },
+      draggingNodeId, setDraggingNodeId,
+    } : null,
+  })
+
+  // ── Get zone root node ────────────────────────────────────────────────────
+  const getZoneRoot = (zoneKey) =>
+    zoneKey === activeZone
+      ? (schema?.root ?? createEmptyNode(zoneKey))
+      : (zones[zoneKey] ?? createEmptyNode(zoneKey))
+
+  // ── Save ──────────────────────────────────────────────────────────────────
+  const handleSave = async (title) => {
+    if (!schema?.root) return
+    setIsSaving(true)
+    try {
+      const fullSchema = {
+        ...schema,
+        zones: { ...schema.zones, [activeZone]: schema.root },
+      }
+      const value    = JSON.stringify(fullSchema)
+      const response = metaData?.id
+        ? await Services.UpdateService(Endpoints.PrintLayout.Put.Update, true, { id: metaData.id, title, value })
+        : await Services.PostService(Endpoints.PrintLayout.Post.Add, true, { title, value })
+      if (response) {
+        setSaveOpen(false); markClean(); onSaved?.(response)
+        // Capture this save as a future training example. Prompt left empty —
+        // developers fill it in via the Session Logs dialog.
+        try {
+          logSchema({
+            builder: 'print',
+            trigger: 'save',
+            title,
+            viewMetaData: { id: metaData?.id ?? response?.data?.id, title },
+            schema: fullSchema
+          })
+        } catch (e) { console.warn('[sessionLog] log on save failed:', e) }
+      }
+    } catch { toast.error('Failed to save') }
+    finally   { setIsSaving(false) }
+  }
+
+  if (!schema?.root) return null
+
+  const headerRoot = getZoneRoot('header')
+  const footerRoot = getZoneRoot('footer')
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+
+      {/* ── Toolbar ───────────────────────────────────────────────────────── */}
+      <Box sx={{
+        p: 1, borderBottom: '1px solid', borderColor: 'divider',
+        bgcolor: 'background.paper', display: 'flex', alignItems: 'center', gap: 1,
+        position: 'relative', flexShrink: 0,
+      }}>
+        <Box sx={{ fontSize: 13, fontWeight: 600, color: 'text.secondary' }}>
+          Print Layout Builder
+        </Box>
+        <Box sx={{ flex: 1 }} />
+
+        {/* Edit / Preview toggle */}
+        <ToggleButtonGroup value={mode} exclusive size='small'
+          onChange={(_, v) => { if (v) { setMode(v); setSelectedId(null) } }}>
+          <ToggleButton value='edit'>Edit</ToggleButton>
+          <ToggleButton value='preview'>Preview</ToggleButton>
+        </ToggleButtonGroup>
+
+        {/* Theme toggle */}
+        {onToggleTheme && (
+          <Tooltip title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+            <IconButton size='small' onClick={onToggleTheme} sx={{ color: 'text.secondary' }}>
+              {isDark ? <LightModeOutlined fontSize='small' /> : <DarkModeOutlined fontSize='small' />}
+            </IconButton>
+          </Tooltip>
+        )}
+
+        <Tooltip title='Session Logs (training data)'>
+          <IconButton size='small' onClick={openSessionLog} sx={{ color: 'text.secondary' }}>
+            <HistoryOutlined fontSize='small' />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title='Preview Schema (JSON)'>
+          <IconButton size='small' onClick={() => setSchemaOpen(true)}>
+            <DataObjectOutlined fontSize='small' />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title='Test Print — uses Test Data from Settings tab'>
+          <Button size='small' variant='outlined' startIcon={<PrintOutlined />}
+            onClick={() => {
+              // Persist active zone first, then open dialog with the full schema inline
+              const fullSchema = {
+                ...schema,
+                zones: { ...schema.zones, [activeZone]: schema.root },
+              }
+              let testData = {}
+              try { testData = JSON.parse(schema?.testData ?? '{}') } catch { /* ignore */ }
+              // Feed the schema directly into the dialog via a synthetic load
+              if (printDialogRef.current) {
+                printDialogRef.current.openWithSchema(fullSchema, testData)
+              }
+            }}>
+            Test Print
+          </Button>
+        </Tooltip>
+        <Button size='small' variant='contained' startIcon={<SaveOutlined />}
+          onClick={() => setSaveOpen(true)}>
+          Save
+        </Button>
+      </Box>
+
+      {/* ── Canvas ────────────────────────────────────────────────────────── */}
+      <Box sx={{ flex: 1, overflow: 'auto', bgcolor: isDark ? '#2a2d32' : '#888', py: 4, px: 3 }}>
+
+        {/* ── EDIT MODE ── zone frames with labels ── */}
+        {mode === 'edit' && (
+          <Box sx={{ width: pageW, mx: 'auto' }}>
+
+            {settings.header?.enabled && (
+              <ZoneFrame
+                label={`Header  —  ${settings.header?.height ?? 10} mm`}
+                color={ZONE_COLORS.header}
+                height={Math.max(headerH, 60)}
+                isActive={activeZone === 'header'}
+                onClick={() => switchZone('header')}
+              >
+                {(() => {
+                  const hm = settings.header?.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }
+                  return (
+                    <Box sx={{ pt: `${mmToPx(hm.top)}px`, pr: `${mmToPx(hm.right)}px`, pb: `${mmToPx(hm.bottom)}px`, pl: `${mmToPx(hm.left)}px` }}>
+                      <ComponentRenderer node={headerRoot} viewerContext={makeZoneViewerContext('header')} />
+                    </Box>
+                  )
+                })()}
+              </ZoneFrame>
+            )}
+
+            {pageOrder.map((pageId, idx) => {
+              const pageRoot = getZoneRoot(pageId)
+              return (
+                <ZoneFrame key={pageId}
+                  label={`Page ${idx + 1}`}
+                  color={ZONE_COLORS.body}
+                  height={Math.max(bodyH, 120)}
+                  isActive={activeZone === pageId}
+                  onClick={() => switchZone(pageId)}
+                  canDelete={pageOrder.length > 1}
+                  onDelete={() => deletePage(pageId)}
+                >
+                  <Box sx={{ p: `${mmToPx(m.top)}px ${mmToPx(m.right)}px ${mmToPx(m.bottom)}px ${mmToPx(m.left)}px` }}>
+                    <ComponentRenderer
+                      node={pageRoot}
+                      viewerContext={makeZoneViewerContext(pageId)}
+                    />
+                  </Box>
+                </ZoneFrame>
+              )
+            })}
+
+            <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+              <Button size='small' startIcon={<AddOutlined />} onClick={addPage} variant='outlined'
+                sx={{ borderColor: '#aaa', color: '#fff', '&:hover': { borderColor: '#fff' } }}>
+                Add Page
+              </Button>
+            </Box>
+
+            {settings.footer?.enabled && (
+              <ZoneFrame
+                label={`Footer  —  ${settings.footer?.height ?? 10} mm${settings.footer?.showPageNumbers ? '  ·  Page numbers ON' : ''}`}
+                color={ZONE_COLORS.footer}
+                height={Math.max(footerH, 60)}
+                isActive={activeZone === 'footer'}
+                onClick={() => switchZone('footer')}
+              >
+                {(() => {
+                  const fm = settings.footer?.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }
+                  return (
+                    <Box sx={{ pt: `${mmToPx(fm.top)}px`, pr: `${mmToPx(fm.right)}px`, pb: `${mmToPx(fm.bottom)}px`, pl: `${mmToPx(fm.left)}px` }}>
+                      <ComponentRenderer node={footerRoot} viewerContext={makeZoneViewerContext('footer')} />
+                    </Box>
+                  )
+                })()}
+              </ZoneFrame>
+            )}
+          </Box>
+        )}
+
+        {/* ── PREVIEW MODE ── identical to the PrintDialog screen preview ── */}
+        {mode === 'preview' && (
+          <PrintPreviewCanvas schema={schema} makeViewerCtx={makeZoneViewerContext} />
+        )}
+      </Box>
+
+      {/* ── Dialogs ───────────────────────────────────────────────────────── */}
+      <SaveDialog open={saveOpen} onClose={() => setSaveOpen(false)}
+        onSave={handleSave} isSaving={isSaving} defaultTitle={metaData?.title || ''} />
+
+      {/* PrintDialog mounted here for Test Print — receives a special viewerContext with the ref */}
+      <PrintDialog viewerContext={{ printDialogRef, data: {}, setData: () => {}, form: {}, setForm: () => {}, mode: 'preview', isEditMode: false, isPreviewMode: true, isPrintContext: true }} />
+
+      <Dialog open={schemaOpen} onClose={() => setSchemaOpen(false)} fullScreen
+        PaperProps={{ sx: { bgcolor: '#1e1e1e' } }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#252526',
+          borderBottom: '1px solid #1a1a1a', px: 1.5, py: 0.5, gap: 1 }}>
+          <Box sx={{ color: '#ccc', fontSize: 13, fontFamily: 'monospace', flex: 1 }}>
+            printLayout.json
+          </Box>
+          <Tooltip title='Close'>
+            <IconButton size='small' onClick={() => setSchemaOpen(false)}
+              sx={{ color: '#aaa', '&:hover': { color: '#fff' } }}>
+              <FullscreenExitOutlined fontSize='small' />
+            </IconButton>
+          </Tooltip>
+        </Box>
+        <Box sx={{ flex: 1, minHeight: 0, height: 'calc(100vh - 40px)' }}>
+          <Editor height='100%' defaultLanguage='json' theme='vs-dark'
+            value={schema ? JSON.stringify({ ...schema, zones: { ...schema.zones, [activeZone]: schema.root } }, null, 2) : '{}'}
+            options={{ readOnly: true, minimap: { enabled: true } }} />
+        </Box>
+      </Dialog>
+    </Box>
+  )
+}