@nice2dev/ui-printing 1.0.28

package/src/template-editor/NiceTemplateEditor.tsx.first

@@ -0,0 +1,1011 @@
+import React, {
+  useState, useCallback, useRef, useReducer, useEffect, useMemo,
+} from 'react';
+import type {
+  PrintTemplate,
+  PrintSection,
+  PrintDataField,
+  PrintWatermark,
+  PrintSignature,
+  DataSourceField,
+  TemplateSampleData,
+  PaperSize,
+  PaperOrientation,
+  NiceTemplateEditorProps,
+  SectionType,
+  FieldStyle,
+  FieldPosition,
+} from '../types/printingTypes';
+import styles from './TemplateEditor.module.css';
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+const MM_TO_PX = 3.78;
+
+const PAPER_DIM: Record<PaperSize, [number, number]> = {
+  A3: [297, 420], A4: [210, 297], A5: [148, 210], A6: [105, 148],
+  Letter: [216, 279], Legal: [216, 356], Tabloid: [279, 432], custom: [210, 297],
+};
+
+const FONT_FAMILIES = ['sans-serif', 'serif', 'monospace', 'Arial', 'Times New Roman', 'Courier New', 'Georgia', 'Verdana', 'Tahoma'];
+const FONT_SIZES = [6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
+
+const FIELD_TYPE_ICONS: Record<string, string> = {
+  text: '📝', number: '#', currency: '€', date: '📅', datetime: '🕐',
+  boolean: '✓', image: '🖼', barcode: '▮▌▮', qr: '⬛', signature: '✍',
+  static_text: 'T', static_image: '🖼', line: '─', rect: '▭',
+  page_number: '#p', total_pages: '#pp', print_date: '📅',
+};
+
+const FIELD_TYPE_LABELS: Record<string, string> = {
+  text: 'Tekst', number: 'Liczba', currency: 'Waluta', date: 'Data', datetime: 'Data i czas',
+  boolean: 'Tak/Nie', image: 'Obraz', barcode: 'Kod kreskowy', qr: 'QR', signature: 'Podpis',
+  static_text: 'Tekst stały', static_image: 'Obraz stały', line: 'Linia', rect: 'Prostokąt',
+  page_number: 'Numer strony', total_pages: 'Liczba stron', print_date: 'Data wydruku',
+};
+
+// ─── Undo/Redo history ───────────────────────────────────────────────────────
+type HistoryState = { past: PrintTemplate[]; present: PrintTemplate; future: PrintTemplate[] };
+type HistoryAction =
+  | { type: 'UPDATE'; payload: PrintTemplate }
+  | { type: 'UNDO' }
+  | { type: 'REDO' };
+
+const MAX_HISTORY = 50;
+
+function historyReducer(state: HistoryState, action: HistoryAction): HistoryState {
+  switch (action.type) {
+    case 'UPDATE':
+      return {
+        past: [...state.past.slice(-MAX_HISTORY), state.present],
+        present: action.payload,
+        future: [],
+      };
+    case 'UNDO':
+      if (!state.past.length) return state;
+      return {
+        past: state.past.slice(0, -1),
+        present: state.past[state.past.length - 1],
+        future: [state.present, ...state.future],
+      };
+    case 'REDO':
+      if (!state.future.length) return state;
+      return {
+        past: [...state.past, state.present],
+        present: state.future[0],
+        future: state.future.slice(1),
+      };
+    default: return state;
+  }
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function uid() { return `f-${Date.now()}-${Math.floor(Math.random() * 1000)}`; }
+
+function makeField(type: string, schemaField?: DataSourceField): PrintDataField {
+  const base: PrintDataField = {
+    id: uid(), name: schemaField?.label ?? FIELD_TYPE_LABELS[type] ?? type,
+    label: schemaField?.label ?? FIELD_TYPE_LABELS[type] ?? type,
+    type: type as any,
+    dataPath: schemaField?.path ?? '',
+    fallback: type === 'static_text' ? 'Tekst statyczny' : undefined,
+    format: type === 'date' || type === 'datetime' ? 'DD.MM.YYYY' : undefined,
+    position: { x: 15, y: 15, width: type === 'line' ? 80 : 60, height: type === 'line' ? 1 : type === 'image' ? 30 : 8 },
+    style: { fontSize: 10, color: '#000000', fontFamily: 'sans-serif' },
+  };
+  if (type === 'rect') base.style.backgroundColor = '#f1f5f9';
+  if (type === 'line') base.style = { ...base.style, borderWidth: 0.5, borderColor: '#000000', borderStyle: 'solid' };
+  return base;
+}
+
+// ─── Ruler component ─────────────────────────────────────────────────────────
+const Ruler: React.FC<{ lengthMm: number; zoom: number; orientation: 'h' | 'v' }> = ({ lengthMm, zoom, orientation }) => {
+  const ticks: React.ReactNode[] = [];
+  const step = zoom < 0.6 ? 20 : zoom < 1 ? 10 : 5;
+  for (let mm = 0; mm <= lengthMm; mm += step) {
+    const pos = mm * zoom * MM_TO_PX;
+    const isMajor = mm % (step * 2) === 0;
+    ticks.push(
+      <div key={mm} className={`${styles.rulerTick} ${isMajor ? styles.rulerTickMajor : ''}`}
+        style={orientation === 'h' ? { left: pos } as React.CSSProperties : { top: pos } as React.CSSProperties}>
+        {isMajor && <span className={styles.rulerLabel}>{mm}</span>}
+      </div>
+    );
+  }
+  return (
+    <div className={`${styles.ruler} ${styles[`ruler_${orientation}`]}`}>
+      {ticks}
+    </div>
+  );
+};
+
+// ─── Resize handle ────────────────────────────────────────────────────────────
+type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+const RESIZE_DIRS: ResizeDir[] = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+
+interface ResizeHandlesProps {
+  onResizeStart: (dir: ResizeDir, e: React.MouseEvent) => void;
+}
+const ResizeHandles: React.FC<ResizeHandlesProps> = ({ onResizeStart }) => (
+  <>
+    {RESIZE_DIRS.map(dir => (
+      <div
+        key={dir}
+        className={`${styles.resizeHandle} ${styles[`handle_${dir}`]}`}
+        onMouseDown={e => { e.stopPropagation(); onResizeStart(dir, e); }}
+      />
+    ))}
+  </>
+);
+
+// ─── Field element on canvas ─────────────────────────────────────────────────
+interface FieldElementProps {
+  field: PrintDataField;
+  zoom: number;
+  selected: boolean;
+  sampleData?: Record<string, unknown>;
+  onClick: (e: React.MouseEvent) => void;
+  onDragStart: (e: React.MouseEvent) => void;
+  onResizeStart: (dir: ResizeDir, e: React.MouseEvent) => void;
+  readOnly: boolean;
+}
+
+function resolveFieldPreview(field: PrintDataField, data?: Record<string, unknown>): string {
+  if (field.type === 'static_text') return field.fallback ?? 'Tekst';
+  if (field.type === 'page_number') return '1';
+  if (field.type === 'total_pages') return '3';
+  if (field.type === 'print_date') return new Date().toLocaleDateString('pl-PL');
+  if (data && field.dataPath) {
+    const val = field.dataPath.split('.').reduce<unknown>((o, k) => (o && typeof o === 'object' ? (o as any)[k] : null), data);
+    if (val != null) return String(val);
+  }
+  return field.label ? `{${field.label}}` : `{${field.dataPath}}`;
+}
+
+const FieldElement: React.FC<FieldElementProps> = ({
+  field, zoom, selected, sampleData, onClick, onDragStart, onResizeStart, readOnly,
+}) => {
+  const pos = field.position;
+  const st = field.style;
+  const mm = (v: number) => v * zoom * MM_TO_PX;
+
+  const isLine = field.type === 'line';
+  const isRect = field.type === 'rect';
+  const isImage = field.type === 'image' || field.type === 'static_image';
+  const isBarcode = field.type === 'barcode' || field.type === 'qr';
+
+  const baseStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: mm(pos.x), top: mm(pos.y),
+    width: mm(pos.width), height: mm(pos.height),
+    zIndex: pos.zIndex ?? 1,
+    transform: st.rotation ? `rotate(${st.rotation}deg)` : undefined,
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    ...(!isLine && !isRect ? {
+      fontSize: (st.fontSize ?? 10) * zoom,
+      fontFamily: st.fontFamily ?? 'sans-serif',
+      fontWeight: st.fontWeight ?? 'normal',
+      fontStyle: st.fontStyle ?? 'normal',
+      color: st.color ?? '#000',
+      textAlign: st.textAlign ?? 'left',
+      lineHeight: st.lineHeight ?? 1.4,
+      letterSpacing: st.letterSpacing ? `${st.letterSpacing}em` : undefined,
+      padding: st.padding ? mm(st.padding) : 0,
+    } : {}),
+    backgroundColor: st.backgroundColor,
+    borderWidth: st.borderWidth ?? 0,
+    borderColor: st.borderColor ?? 'transparent',
+    borderStyle: (st.borderStyle ?? 'solid') as any,
+    borderRadius: st.borderRadius,
+    opacity: st.opacity,
+    outline: selected ? '1.5px solid #2563eb' : '1px dashed transparent',
+    outlineOffset: 1,
+    cursor: readOnly ? 'default' : 'move',
+  };
+
+  return (
+    <div style={baseStyle}
+      onClick={onClick}
+      onMouseDown={readOnly ? undefined : onDragStart}>
+      {isLine ? (
+        <div style={{ width: '100%', borderBottom: `${(st.borderWidth ?? 0.5) * zoom}px ${st.borderStyle ?? 'solid'} ${st.borderColor ?? '#000'}` }} />
+      ) : isRect ? null
+      : isImage ? (
+        <div className={styles.fieldImagePlaceholder}>🖼</div>
+      ) : isBarcode ? (
+        <div className={styles.fieldBarcodePlaceholder}>{field.type === 'qr' ? '⬛ QR' : '▮▌▮ Barcode'}</div>
+      ) : field.type === 'signature' ? (
+        <div className={styles.fieldSignaturePlaceholder}>✍ {field.label}</div>
+      ) : (
+        <span style={{ display: 'block', width: '100%' }}>
+          {resolveFieldPreview(field, sampleData)}
+        </span>
+      )}
+      {selected && !readOnly && <ResizeHandles onResizeStart={onResizeStart} />}
+    </div>
+  );
+};
+
+// ─── Section canvas ──────────────────────────────────────────────────────────
+interface SectionCanvasProps {
+  section: PrintSection;
+  zoom: number;
+  paperWidthMm: number;
+  selectedIds: Set<string>;
+  sampleData?: Record<string, unknown>;
+  readOnly: boolean;
+  showGrid: boolean;
+  onFieldClick: (id: string, e: React.MouseEvent) => void;
+  onFieldDragStart: (id: string, e: React.MouseEvent) => void;
+  onResizeStart: (id: string, dir: ResizeDir, e: React.MouseEvent) => void;
+  onSectionHeightChange: (sectionId: string, heightMm: number) => void;
+  onDropField: (sectionId: string, schemaPath: string, x: number, y: number) => void;
+}
+
+const SectionCanvas: React.FC<SectionCanvasProps> = ({
+  section, zoom, paperWidthMm, selectedIds, sampleData, readOnly, showGrid,
+  onFieldClick, onFieldDragStart, onResizeStart, onSectionHeightChange, onDropField,
+}) => {
+  const heightPx = (section.heightMm ?? (section.type === 'body' ? 200 : 40)) * zoom * MM_TO_PX;
+  const widthPx = paperWidthMm * zoom * MM_TO_PX;
+  const [draggingOver, setDraggingOver] = useState(false);
+
+  const sectionTypeColors: Record<string, string> = {
+    header: 'rgba(219,234,254,0.35)',
+    footer: 'rgba(220,252,231,0.35)',
+    background: 'rgba(254,249,195,0.35)',
+    body: 'transparent',
+  };
+
+  return (
+    <div
+      className={`${styles.sectionCanvas} ${draggingOver ? styles.sectionCanvasOver : ''}`}
+      style={{
+        width: widthPx, height: heightPx, position: 'relative',
+        background: sectionTypeColors[section.type] ?? 'transparent',
+        backgroundImage: showGrid
+          ? `repeating-linear-gradient(0deg, rgba(148,163,184,0.15) 0, rgba(148,163,184,0.15) 1px, transparent 1px, transparent ${5 * zoom * MM_TO_PX}px),
+             repeating-linear-gradient(90deg, rgba(148,163,184,0.15) 0, rgba(148,163,184,0.15) 1px, transparent 1px, transparent ${5 * zoom * MM_TO_PX}px)`
+          : undefined,
+      } as React.CSSProperties}
+      onDragOver={e => { e.preventDefault(); setDraggingOver(true); }}
+      onDragLeave={() => setDraggingOver(false)}
+      onDrop={e => {
+        e.preventDefault();
+        setDraggingOver(false);
+        const path = e.dataTransfer.getData('fieldPath');
+        if (!path) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const xMm = (e.clientX - rect.left) / (zoom * MM_TO_PX);
+        const yMm = (e.clientY - rect.top) / (zoom * MM_TO_PX);
+        onDropField(section.id, path, Math.max(0, xMm), Math.max(0, yMm));
+      }}
+    >
+      {/* Section label chip */}
+      <div className={styles.sectionTypeChip}>{section.type}</div>
+
+      {/* Fields */}
+      {section.fields.map(field => (
+        <FieldElement
+          key={field.id}
+          field={field}
+          zoom={zoom}
+          selected={selectedIds.has(field.id)}
+          sampleData={sampleData}
+          readOnly={readOnly}
+          onClick={e => onFieldClick(field.id, e)}
+          onDragStart={e => onFieldDragStart(field.id, e)}
+          onResizeStart={(dir, e) => onResizeStart(field.id, dir, e)}
+        />
+      ))}
+
+      {/* Section resize handle (bottom) for non-body sections */}
+      {!readOnly && section.type !== 'body' && (
+        <div
+          className={styles.sectionResizeBar}
+          onMouseDown={e => {
+            e.preventDefault();
+            const startY = e.clientY;
+            const startH = section.heightMm ?? 40;
+            const move = (me: MouseEvent) => {
+              const delta = (me.clientY - startY) / (zoom * MM_TO_PX);
+              onSectionHeightChange(section.id, Math.max(10, startH + delta));
+            };
+            const up = () => { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', up); };
+            document.addEventListener('mousemove', move);
+            document.addEventListener('mouseup', up);
+          }}
+        >
+          <div className={styles.sectionResizeGrip} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── Keyboard shortcuts chip ──────────────────────────────────────────────────
+const ShortcutChip: React.FC<{ keys: string; label: string }> = ({ keys, label }) => (
+  <div className={styles.shortcutChip}>
+    <span className={styles.shortcutKeys}>{keys}</span>
+    <span className={styles.shortcutLabel}>{label}</span>
+  </div>
+);
+
+// ─── Left panel tabs ──────────────────────────────────────────────────────────
+type LeftTab = 'fields' | 'layers' | 'watermarks' | 'signatures' | 'settings';
+const LEFT_TABS: { id: LeftTab; icon: string; label: string }[] = [
+  { id: 'fields', icon: '📝', label: 'Pola' },
+  { id: 'layers', icon: '◧', label: 'Warstwy' },
+  { id: 'watermarks', icon: '💧', label: 'Znaki' },
+  { id: 'signatures', icon: '✍', label: 'Podpisy' },
+  { id: 'settings', icon: '⚙', label: 'Ustawienia' },
+];
+
+// ─── Right panel tabs ─────────────────────────────────────────────────────────
+type RightTab = 'position' | 'style' | 'data' | 'conditional';
+const RIGHT_TABS: { id: RightTab; label: string }[] = [
+  { id: 'position', label: 'Pozycja' },
+  { id: 'style', label: 'Styl' },
+  { id: 'data', label: 'Dane' },
+  { id: 'conditional', label: 'Warunki' },
+];
+
+// ─── Toolbar ─────────────────────────────────────────────────────────────────
+interface ToolbarProps {
+  tpl: PrintTemplate;
+  zoom: number;
+  canUndo: boolean;
+  canRedo: boolean;
+  showGrid: boolean;
+  showRulers: boolean;
+  readOnly: boolean;
+  selectedCount: number;
+  onPaperChange: (size: PaperSize, orient: PaperOrientation) => void;
+  onZoom: (z: number) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onToggleGrid: () => void;
+  onToggleRulers: () => void;
+  onInsert: (type: string) => void;
+  onDelete: () => void;
+  onDuplicate: () => void;
+  onAlignH: (align: 'left' | 'center' | 'right') => void;
+  onAlignV: (align: 'top' | 'center' | 'bottom') => void;
+  onBringForward: () => void;
+  onSendBackward: () => void;
+  onSave?: () => void;
+}
+
+const Toolbar: React.FC<ToolbarProps> = ({
+  tpl, zoom, canUndo, canRedo, showGrid, showRulers, readOnly, selectedCount,
+  onPaperChange, onZoom, onUndo, onRedo, onToggleGrid, onToggleRulers,
+  onInsert, onDelete, onDuplicate, onAlignH, onAlignV, onBringForward, onSendBackward, onSave,
+}) => {
+  const [insertOpen, setInsertOpen] = useState(false);
+  const ZOOM_PRESETS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+  return (
+    <div className={styles.toolbar}>
+      {/* Paper size + orientation */}
+      <div className={styles.toolbarGroup}>
+        <select className={styles.toolbarSelect} value={tpl.paperSize}
+          onChange={e => onPaperChange(e.target.value as PaperSize, tpl.orientation)}>
+          {(['A4', 'A5', 'A3', 'Letter', 'Legal', 'Tabloid', 'custom'] as PaperSize[]).map(s => (
+            <option key={s} value={s}>{s}</option>
+          ))}
+        </select>
+        <button className={`${styles.toolbarBtn} ${tpl.orientation === 'portrait' ? styles.toolbarBtnActive : ''}`}
+          onClick={() => onPaperChange(tpl.paperSize, 'portrait')} title="Pion">⬜</button>
+        <button className={`${styles.toolbarBtn} ${tpl.orientation === 'landscape' ? styles.toolbarBtnActive : ''}`}
+          onClick={() => onPaperChange(tpl.paperSize, 'landscape')} title="Poziom">▭</button>
+      </div>
+
+      {/* Undo / Redo */}
+      {!readOnly && (
+        <div className={styles.toolbarGroup}>
+          <button className={styles.toolbarBtn} disabled={!canUndo} onClick={onUndo} title="Cofnij (Ctrl+Z)">↩</button>
+          <button className={styles.toolbarBtn} disabled={!canRedo} onClick={onRedo} title="Ponów (Ctrl+Y)">↪</button>
+        </div>
+      )}
+
+      {/* Insert dropdown */}
+      {!readOnly && (
+        <div className={styles.insertWrapper}>
+          <button className={`${styles.toolbarBtn} ${styles.insertBtn}`} onClick={() => setInsertOpen(o => !o)}>
+            ＋ Wstaw ▾
+          </button>
+          {insertOpen && (
+            <div className={styles.insertDropdown} onMouseLeave={() => setInsertOpen(false)}>
+              <div className={styles.insertCategory}>Pola danych</div>
+              {['text', 'number', 'currency', 'date', 'image', 'barcode', 'qr'].map(t => (
+                <button key={t} className={styles.insertItem} onClick={() => { onInsert(t); setInsertOpen(false); }}>
+                  <span className={styles.insertIcon}>{FIELD_TYPE_ICONS[t]}</span>
+                  {FIELD_TYPE_LABELS[t]}
+                </button>
+              ))}
+              <div className={styles.insertCategory}>Elementy statyczne</div>
+              {['static_text', 'static_image', 'line', 'rect', 'page_number', 'total_pages', 'print_date'].map(t => (
+                <button key={t} className={styles.insertItem} onClick={() => { onInsert(t); setInsertOpen(false); }}>
+                  <span className={styles.insertIcon}>{FIELD_TYPE_ICONS[t]}</span>
+                  {FIELD_TYPE_LABELS[t]}
+                </button>
+              ))}
+              <div className={styles.insertCategory}>Specjalne</div>
+              <button className={styles.insertItem} onClick={() => { onInsert('watermark'); setInsertOpen(false); }}>
+                <span className={styles.insertIcon}>💧</span>Znak wodny
+              </button>
+              <button className={styles.insertItem} onClick={() => { onInsert('signature'); setInsertOpen(false); }}>
+                <span className={styles.insertIcon}>✍</span>Podpis
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Selection actions */}
+      {!readOnly && selectedCount > 0 && (
+        <div className={styles.toolbarGroup}>
+          <button className={styles.toolbarBtn} onClick={onDuplicate} title="Duplikuj (Ctrl+D)">⧉</button>
+          <button className={`${styles.toolbarBtn} ${styles.toolbarBtnDanger}`} onClick={onDelete} title="Usuń (Del)">🗑</button>
+          <span className={styles.toolbarSep} />
+          <button className={styles.toolbarBtn} onClick={() => onAlignH('left')} title="Wyrównaj lewo">⬛□□</button>
+          <button className={styles.toolbarBtn} onClick={() => onAlignH('center')} title="Wyśrodkuj">□⬛□</button>
+          <button className={styles.toolbarBtn} onClick={() => onAlignH('right')} title="Wyrównaj prawo">□□⬛</button>
+          <button className={styles.toolbarBtn} onClick={() => onAlignV('top')} title="Góra">⊤</button>
+          <button className={styles.toolbarBtn} onClick={() => onAlignV('center')} title="Środek V">⊕</button>
+          <button className={styles.toolbarBtn} onClick={() => onAlignV('bottom')} title="Dół">⊥</button>
+          <span className={styles.toolbarSep} />
+          <button className={styles.toolbarBtn} onClick={onBringForward} title="Do przodu">▲</button>
+          <button className={styles.toolbarBtn} onClick={onSendBackward} title="Do tyłu">▼</button>
+        </div>
+      )}
+
+      {/* View options */}
+      <div className={styles.toolbarGroup}>
+        <button className={`${styles.toolbarBtn} ${showGrid ? styles.toolbarBtnActive : ''}`} onClick={onToggleGrid} title="Siatka">⊞</button>
+        <button className={`${styles.toolbarBtn} ${showRulers ? styles.toolbarBtnActive : ''}`} onClick={onToggleRulers} title="Linijki">⊢</button>
+      </div>
+
+      {/* Zoom */}
+      <div className={styles.toolbarGroup}>
+        <button className={styles.toolbarBtn} onClick={() => onZoom(Math.max(0.25, zoom - 0.1))}>−</button>
+        <select className={styles.zoomSelect} value={ZOOM_PRESETS.includes(zoom) ? zoom : ''}
+          onChange={e => onZoom(+e.target.value)}>
+          {ZOOM_PRESETS.map(z => <option key={z} value={z}>{Math.round(z * 100)}%</option>)}
+        </select>
+        <button className={styles.toolbarBtn} onClick={() => onZoom(Math.min(3, zoom + 0.1))}>+</button>
+        <button className={styles.toolbarBtn} onClick={() => onZoom(1)} title="100%">⊡</button>
+      </div>
+
+      {!readOnly && onSave && (
+        <button className={styles.saveBtn} onClick={onSave}>💾 Zapisz</button>
+      )}
+    </div>
+  );
+};
+
+// ─── Left panel ───────────────────────────────────────────────────────────────
+interface LeftPanelProps {
+  activeTab: LeftTab;
+  onTabChange: (t: LeftTab) => void;
+  schema?: { fields: DataSourceField[] };
+  tpl: PrintTemplate;
+  allFields: PrintDataField[];
+  selectedIds: Set<string>;
+  onInsertSchemaField: (f: DataSourceField) => void;
+  onSelectField: (id: string) => void;
+  onUpdateTpl: (patch: Partial<PrintTemplate>) => void;
+  onReorderField: (fieldId: string, delta: -1 | 1) => void;
+}
+
+const LeftPanel: React.FC<LeftPanelProps> = ({
+  activeTab, onTabChange, schema, tpl, allFields, selectedIds,
+  onInsertSchemaField, onSelectField, onUpdateTpl, onReorderField,
+}) => {
+  const [search, setSearch] = useState('');
+  const filteredFields = schema?.fields.filter(f =>
+    f.label.toLowerCase().includes(search.toLowerCase()) ||
+    f.path.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className={styles.leftPanel}>
+      <div className={styles.leftTabs}>
+        {LEFT_TABS.map(t => (
+          <button key={t.id}
+            className={`${styles.leftTab} ${activeTab === t.id ? styles.leftTabActive : ''}`}
+            onClick={() => onTabChange(t.id)} title={t.label}>
+            <span className={styles.leftTabIcon}>{t.icon}</span>
+            <span className={styles.leftTabLabel}>{t.label}</span>
+          </button>
+        ))}
+      </div>
+
+      <div className={styles.leftContent}>
+        {/* ── Fields tab ── */}
+        {activeTab === 'fields' && (
+          <>
+            <div className={styles.panelHeader}>Pola danych</div>
+            <div className={styles.searchBox}>
+              <input className={styles.searchInput} placeholder="Szukaj..." value={search} onChange={e => setSearch(e.target.value)} />
+            </div>
+            {schema ? (
+              <div className={styles.fieldList}>
+                {(filteredFields ?? []).map(f => (
+                  <div key={f.path} className={styles.fieldItem}
+                    draggable
+                    onDragStart={e => { e.dataTransfer.setData('fieldPath', f.path); e.dataTransfer.setData('fieldLabel', f.label); e.dataTransfer.setData('fieldType', f.type); }}
+                    onClick={() => onInsertSchemaField(f)}>
+                    <span className={styles.fieldItemIcon}>{FIELD_TYPE_ICONS[f.type] ?? '📝'}</span>
+                    <div className={styles.fieldItemInfo}>
+                      <div className={styles.fieldItemLabel}>{f.label}</div>
+                      <div className={styles.fieldItemPath}>{f.path}</div>
+                    </div>
+                    <span className={styles.fieldItemType}>{f.type}</span>
+                  </div>
+                ))}
+                {filteredFields?.length === 0 && <div className={styles.emptyMsg}>Brak wyników</div>}
+              </div>
+            ) : (
+              <div className={styles.emptyMsg}>Brak schematu danych. Przypisz encję w zakładce Ustawienia.</div>
+            )}
+          </>
+        )}
+
+        {/* ── Layers tab ── */}
+        {activeTab === 'layers' && (
+          <>
+            <div className={styles.panelHeader}>Warstwy ({allFields.length})</div>
+            <div className={styles.layerList}>
+              {allFields.length === 0 && <div className={styles.emptyMsg}>Brak elementów</div>}
+              {allFields.slice().reverse().map(f => (
+                <div key={f.id}
+                  className={`${styles.layerItem} ${selectedIds.has(f.id) ? styles.layerItemSelected : ''}`}
+                  onClick={() => onSelectField(f.id)}>
+                  <span className={styles.layerIcon}>{FIELD_TYPE_ICONS[f.type] ?? '📝'}</span>
+                  <span className={styles.layerName}>{f.name || f.label}</span>
+                  <div className={styles.layerActions}>
+                    <button className={styles.layerBtn} onClick={e => { e.stopPropagation(); onReorderField(f.id, -1); }} title="Do przodu">↑</button>
+                    <button className={styles.layerBtn} onClick={e => { e.stopPropagation(); onReorderField(f.id, 1); }} title="Do tyłu">↓</button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        {/* ── Watermarks tab ── */}
+        {activeTab === 'watermarks' && (
+          <>
+            <div className={styles.panelHeader}>Znaki wodne</div>
+            <div className={styles.wmList}>
+              {(tpl.watermarks ?? []).map(wm => (
+                <div key={wm.id} className={styles.wmItem}>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Typ</span>
+                    <select className={styles.wmSelect} value={wm.type}
+                      onChange={e => onUpdateTpl({ watermarks: tpl.watermarks?.map(w => w.id === wm.id ? { ...w, type: e.target.value as 'text' | 'image' } : w) })}>
+                      <option value="text">Tekst</option>
+                      <option value="image">Obraz</option>
+                    </select>
+                  </div>
+                  {wm.type === 'text' && (
+                    <div className={styles.wmRow}>
+                      <span className={styles.wmLabel}>Tekst</span>
+                      <input className={styles.wmInput} value={wm.text ?? ''}
+                        onChange={e => onUpdateTpl({ watermarks: tpl.watermarks?.map(w => w.id === wm.id ? { ...w, text: e.target.value } : w) })} />
+                    </div>
+                  )}
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Krycie</span>
+                    <input type="range" min={0.02} max={0.5} step={0.01} className={styles.wmSlider} value={wm.opacity}
+                      onChange={e => onUpdateTpl({ watermarks: tpl.watermarks?.map(w => w.id === wm.id ? { ...w, opacity: +e.target.value } : w) })} />
+                    <span className={styles.wmValue}>{Math.round(wm.opacity * 100)}%</span>
+                  </div>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Kąt</span>
+                    <input type="range" min={-90} max={90} step={5} className={styles.wmSlider} value={wm.angle}
+                      onChange={e => onUpdateTpl({ watermarks: tpl.watermarks?.map(w => w.id === wm.id ? { ...w, angle: +e.target.value } : w) })} />
+                    <span className={styles.wmValue}>{wm.angle}°</span>
+                  </div>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Rozmiar</span>
+                    <input type="number" min={8} max={200} className={styles.wmInputNum} value={wm.fontSize ?? 48}
+                      onChange={e => onUpdateTpl({ watermarks: tpl.watermarks?.map(w => w.id === wm.id ? { ...w, fontSize: +e.target.value } : w) })} />
+                    <span className={styles.wmUnit}>pt</span>
+                  </div>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Kolor</span>
+                    <input type="color" className={styles.colorPicker} value={wm.color ?? '#94a3b8'}
+                      onChange={e => onUpdateTpl({ watermarks: tpl.watermarks?.map(w => w.id === wm.id ? { ...w, color: e.target.value } : w) })} />
+                  </div>
+                  <button className={styles.wmDelete} onClick={() => onUpdateTpl({ watermarks: tpl.watermarks?.filter(w => w.id !== wm.id) })}>Usuń</button>
+                </div>
+              ))}
+              <button className={styles.addBtn} onClick={() => onUpdateTpl({ watermarks: [...(tpl.watermarks ?? []), { id: uid(), type: 'text', text: 'KOPIA', opacity: 0.12, angle: -45, fontSize: 60, color: '#94a3b8' }] })}>
+                + Dodaj znak wodny
+              </button>
+            </div>
+          </>
+        )}
+
+        {/* ── Signatures tab ── */}
+        {activeTab === 'signatures' && (
+          <>
+            <div className={styles.panelHeader}>Podpisy</div>
+            <div className={styles.wmList}>
+              {(tpl.signatures ?? []).map(sig => (
+                <div key={sig.id} className={styles.wmItem}>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Etykieta</span>
+                    <input className={styles.wmInput} value={sig.label}
+                      onChange={e => onUpdateTpl({ signatures: tpl.signatures?.map(s => s.id === sig.id ? { ...s, label: e.target.value } : s) })} />
+                  </div>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Nazwisko</span>
+                    <input className={styles.wmInput} value={sig.signerName ?? ''}
+                      onChange={e => onUpdateTpl({ signatures: tpl.signatures?.map(s => s.id === sig.id ? { ...s, signerName: e.target.value } : s) })} />
+                  </div>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Linia</span>
+                    <input type="checkbox" checked={sig.showLine ?? true}
+                      onChange={e => onUpdateTpl({ signatures: tpl.signatures?.map(s => s.id === sig.id ? { ...s, showLine: e.target.checked } : s) })} />
+                  </div>
+                  <div className={styles.wmRow}>
+                    <span className={styles.wmLabel}>Pokaż datę</span>
+                    <input type="checkbox" checked={sig.showDate ?? false}
+                      onChange={e => onUpdateTpl({ signatures: tpl.signatures?.map(s => s.id === sig.id ? { ...s, showDate: e.target.checked } : s) })} />
+                  </div>
+                  <button className={styles.wmDelete} onClick={() => onUpdateTpl({ signatures: tpl.signatures?.filter(s => s.id !== sig.id) })}>Usuń</button>
+                </div>
+              ))}
+              <button className={styles.addBtn} onClick={() => onUpdateTpl({ signatures: [...(tpl.signatures ?? []), { id: uid(), label: 'Podpis', position: { x: 10, y: 5, width: 70, height: 22 }, showLine: true, showDate: false }] })}>
+                + Dodaj podpis
+              </button>
+            </div>
+          </>
+        )}
+
+        {/* ── Settings tab ── */}
+        {activeTab === 'settings' && (
+          <>
+            <div className={styles.panelHeader}>Ustawienia szablonu</div>
+            <div className={styles.settingsForm}>
+              <div className={styles.settingsRow}>
+                <label className={styles.settingsLabel}>Nazwa</label>
+                <input className={styles.settingsInput} value={tpl.name} onChange={e => onUpdateTpl({ name: e.target.value })} />
+              </div>
+              <div className={styles.settingsRow}>
+                <label className={styles.settingsLabel}>Opis</label>
+                <textarea className={styles.settingsTextarea} value={tpl.description ?? ''} onChange={e => onUpdateTpl({ description: e.target.value })} rows={2} />
+              </div>
+              <div className={styles.settingsRow}>
+                <label className={styles.settingsLabel}>Kategoria</label>
+                <input className={styles.settingsInput} value={tpl.category ?? ''} onChange={e => onUpdateTpl({ category: e.target.value })} />
+              </div>
+              <div className={styles.settingsDivider}>Marginesy (mm)</div>
+              {(['top', 'right', 'bottom', 'left'] as const).map(side => (
+                <div key={side} className={styles.settingsRow}>
+                  <label className={styles.settingsLabel}>{side === 'top' ? 'Góra' : side === 'right' ? 'Prawo' : side === 'bottom' ? 'Dół' : 'Lewo'}</label>
+                  <input type="number" min={0} max={50} step={1} className={styles.settingsInputNum}
+                    value={tpl.margins[side]} onChange={e => onUpdateTpl({ margins: { ...tpl.margins, [side]: +e.target.value } })} />
+                  <span className={styles.settingsUnit}>mm</span>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ─── Right panel (Properties) ─────────────────────────────────────────────────
+interface PropertiesPanelProps {
+  field: PrintDataField | null;
+  activeTab: RightTab;
+  onTabChange: (t: RightTab) => void;
+  onChange: (patch: Partial<PrintDataField>) => void;
+  paperWidthMm: number;
+  paperHeightMm: number;
+}
+
+const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
+  field, activeTab, onTabChange, onChange, paperWidthMm, paperHeightMm,
+}) => {
+  const p = useCallback((patch: Partial<FieldPosition>) => field && onChange({ position: { ...field.position, ...patch } }), [field, onChange]);
+  const s = useCallback((patch: Partial<FieldStyle>) => field && onChange({ style: { ...(field?.style ?? {}), ...patch } }), [field, onChange]);
+
+  if (!field) {
+    return (
+      <div className={styles.rightPanel}>
+        <div className={styles.panelHeader}>Właściwości</div>
+        <div className={styles.propsEmpty}>
+          <div className={styles.propsEmptyIcon}>⬚</div>
+          <div className={styles.propsEmptyText}>Zaznacz element na szablonie</div>
+          <div className={styles.shortcutGrid}>
+            <ShortcutChip keys="Del" label="Usuń" />
+            <ShortcutChip keys="Ctrl+D" label="Duplikuj" />
+            <ShortcutChip keys="↑↓←→" label="Przesuń" />
+            <ShortcutChip keys="Ctrl+Z" label="Cofnij" />
+            <ShortcutChip keys="Ctrl+A" label="Zaznacz wszystko" />
+            <ShortcutChip keys="Shift+↑" label="Przesuń 5mm" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const hasText = !['line', 'rect', 'image', 'static_image', 'barcode', 'qr', 'signature'].includes(field.type);
+  const hasData = !['static_text', 'static_image', 'line', 'rect', 'page_number', 'total_pages', 'print_date'].includes(field.type);
+
+  return (
+    <div className={styles.rightPanel}>
+      <div className={styles.panelHeader}>
+        <span className={styles.panelHeaderIcon}>{FIELD_TYPE_ICONS[field.type]}</span>
+        <span className={styles.panelHeaderName}>{field.name}</span>
+      </div>
+
+      <div className={styles.rightTabs}>
+        {RIGHT_TABS.map(t => {
+          if (t.id === 'data' && !hasData) return null;
+          return (
+            <button key={t.id}
+              className={`${styles.rightTab} ${activeTab === t.id ? styles.rightTabActive : ''}`}
+              onClick={() => onTabChange(t.id)}>
+              {t.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className={styles.propsBody}>
+        {/* ── Position ── */}
+        {activeTab === 'position' && (
+          <>
+            <div className={styles.posGrid}>
+              {[
+                { key: 'x' as const, label: 'X', unit: 'mm' },
+                { key: 'y' as const, label: 'Y', unit: 'mm' },
+                { key: 'width' as const, label: 'Szer.', unit: 'mm' },
+                { key: 'height' as const, label: 'Wys.', unit: 'mm' },
+              ].map(({ key, label, unit }) => (
+                <div key={key} className={styles.posCell}>
+                  <label className={styles.posLabel}>{label}</label>
+                  <input type="number" step={0.5} className={styles.posInput}
+                    value={Math.round(field.position[key] * 10) / 10}
+                    onChange={e => p({ [key]: +e.target.value })} />
+                  <span className={styles.posUnit}>{unit}</span>
+                </div>
+              ))}
+              <div className={styles.posCell}>
+                <label className={styles.posLabel}>Obrót</label>
+                <input type="number" step={5} className={styles.posInput}
+                  value={field.style.rotation ?? 0} onChange={e => s({ rotation: +e.target.value })} />
+                <span className={styles.posUnit}>°</span>
+              </div>
+              <div className={styles.posCell}>
+                <label className={styles.posLabel}>Z-idx</label>
+                <input type="number" step={1} min={1} className={styles.posInput}
+                  value={field.position.zIndex ?? 1} onChange={e => p({ zIndex: +e.target.value })} />
+              </div>
+            </div>
+
+            <div className={styles.snapSection}>
+              <div className={styles.snapTitle}>Wyrównanie do strony</div>
+              <div className={styles.snapRow}>
+                <button className={styles.snapBtn} onClick={() => p({ x: 0 })} title="Lewa krawędź">⫷</button>
+                <button className={styles.snapBtn} onClick={() => p({ x: (paperWidthMm - field.position.width) / 2 })} title="Środek poziomy">⊕</button>
+                <button className={styles.snapBtn} onClick={() => p({ x: paperWidthMm - field.position.width })} title="Prawa krawędź">⫸</button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* ── Style ── */}
+        {activeTab === 'style' && (
+          <>
+            {hasText && (
+              <div className={styles.styleGroup}>
+                <div className={styles.styleGroupTitle}>Czcionka</div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>Rodzina</label>
+                  <select className={styles.styleSelectFull} value={field.style.fontFamily ?? 'sans-serif'}
+                    onChange={e => s({ fontFamily: e.target.value })}>
+                    {FONT_FAMILIES.map(f => <option key={f} value={f}>{f}</option>)}
+                  </select>
+                </div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>Rozmiar</label>
+                  <select className={styles.styleSelectSm} value={FONT_SIZES.includes(field.style.fontSize ?? 10) ? field.style.fontSize ?? 10 : ''}
+                    onChange={e => s({ fontSize: +e.target.value })}>
+                    {FONT_SIZES.map(f => <option key={f} value={f}>{f}</option>)}
+                  </select>
+                  <input type="number" step={0.5} min={4} max={200} className={styles.styleInput}
+                    value={field.style.fontSize ?? 10} onChange={e => s({ fontSize: +e.target.value })} />
+                  <span className={styles.styleUnit}>pt</span>
+                </div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>Kolor</label>
+                  <input type="color" className={styles.colorPicker} value={field.style.color ?? '#000000'}
+                    onChange={e => s({ color: e.target.value })} />
+                  <input className={styles.colorHex} value={field.style.color ?? '#000000'}
+                    onChange={e => s({ color: e.target.value })} maxLength={7} />
+                </div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>Styl</label>
+                  <div className={styles.toggleGroup}>
+                    <button className={`${styles.toggleBtn} ${field.style.fontWeight === 'bold' ? styles.toggleBtnActive : ''}`}
+                      onClick={() => s({ fontWeight: field.style.fontWeight === 'bold' ? 'normal' : 'bold' })}><b>B</b></button>
+                    <button className={`${styles.toggleBtn} ${field.style.fontStyle === 'italic' ? styles.toggleBtnActive : ''}`}
+                      onClick={() => s({ fontStyle: field.style.fontStyle === 'italic' ? 'normal' : 'italic' })}><i>I</i></button>
+                  </div>
+                </div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>Wyrówn.</label>
+                  <div className={styles.toggleGroup}>
+                    {(['left', 'center', 'right', 'justify'] as const).map(a => (
+                      <button key={a} title={a}
+                        className={`${styles.toggleBtn} ${(field.style.textAlign ?? 'left') === a ? styles.toggleBtnActive : ''}`}
+                        onClick={() => s({ textAlign: a })}>
+                        {a === 'left' ? '≡L' : a === 'center' ? '≡C' : a === 'right' ? '≡R' : '≡J'}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>W. linii</label>
+                  <input type="number" step={0.1} min={1} max={4} className={styles.styleInput}
+                    value={field.style.lineHeight ?? 1.4} onChange={e => s({ lineHeight: +e.target.value })} />
+                </div>
+                <div className={styles.styleRow}>
+                  <label className={styles.styleLabel}>Odstępy</label>
+                  <input type="number" step={0.01} min={-0.1} max={0.5} className={styles.styleInput}
+                    value={field.style.letterSpacing ?? 0} onChange={e => s({ letterSpacing: +e.target.value })} />
+                  <span className={styles.styleUnit}>em</span>
+                </div>
+              </div>
+            )}
+
+            <div className={styles.styleGroup}>
+              <div className={styles.styleGroupTitle}>Tło i ramka</div>
+              <div className={styles.styleRow}>
+                <label className={styles.styleLabel}>Tło</label>
+                <input type="color" className={styles.colorPicker} value={field.style.backgroundColor ?? '#ffffff'}
+                  onChange={e => s({ backgroundColor: e.target.value })} />
+                <button className={styles.clearBtn} onClick={() => s({ backgroundColor: undefined })} title="Wyczyść tło">✕</button>
+              </div>
+              <div className={styles.styleRow}>
+                <label className={styles.styleLabel}>Ramka</label>
+                <input type="number" step={0.5} min={0} max={10} className={styles.styleInput}
+                  value={field.style.borderWidth ?? 0} onChange={e => s({ borderWidth: +e.target.value })} />
+                <input type="color" className={styles.colorPicker} value={field.style.borderColor ?? '#000000'}
+                  onChange={e => s({ borderColor: e.target.value })} />
+                <select className={styles.styleSelectXs} value={field.style.borderStyle ?? 'solid'}
+                  onChange={e => s({ borderStyle: e.target.value as any })}>
+                  <option value="solid">─</option>
+                  <option value="dashed">- -</option>
+                  <option value="dotted">···</option>
+                </select>
+              </div>
+              <div className={styles.styleRow}>
+                <label className={styles.styleLabel}>Zaokr.</label>
+                <input type="number" step={1} min={0} max={50} className={styles.styleInput}
+                  value={field.style.borderRadius ?? 0} onChange={e => s({ borderRadius: +e.target.value })} />
+                <span className={styles.styleUnit}>px</span>
+              </div>
+              <div className={styles.styleRow}>
+                <label className={styles.styleLabel}>Padding</label>
+                <input type="number" step={0.5} min={0} max={20} className={styles.styleInput}
+                  value={field.style.padding ?? 0} onChange={e => s({ padding: +e.target.value })} />
+                <span className={styles.styleUnit}>mm</span>
+              </div>
+              <div className={styles.styleRow}>
+                <label className={styles.styleLabel}>Krycie</label>
+                <input type="range" min={0.1} max={1} step={0.05} className={styles.sliderInput}
+                  value={field.style.opacity ?? 1} onChange={e => s({ opacity: +e.target.value })} />
+                <span className={styles.styleValue}>{Math.round((field.style.opacity ?? 1) * 100)}%</span>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* ── Data ── */}
+        {activeTab === 'data' && hasData && (
+          <div className={styles.styleGroup}>
+            <div className={styles.styleGroupTitle}>Źródło danych</div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Ścieżka</label>
+              <input className={styles.styleInputFull} value={field.dataPath}
+                onChange={e => onChange({ dataPath: e.target.value })} placeholder="np. invoice.number" />
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Format</label>
+              <input className={styles.styleInputFull} value={field.format ?? ''}
+                onChange={e => onChange({ format: e.target.value })} placeholder="DD.MM.YYYY / #,##0.00" />
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Domyślny</label>
+              <input className={styles.styleInputFull} value={field.fallback ?? ''}
+                onChange={e => onChange({ fallback: e.target.value })} placeholder="Gdy brak wartości" />
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Typ</label>
+              <select className={styles.styleSelectFull} value={field.type}
+                onChange={e => onChange({ type: e.target.value as any })}>
+                {Object.entries(FIELD_TYPE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+              </select>
+            </div>
+            {(field.type === 'barcode' || field.type === 'qr') && (
+              <div className={styles.styleRow}>
+                <label className={styles.styleLabel}>Format kodu</label>
+                <select className={styles.styleSelectFull} value={field.barcodeType ?? 'code128'}
+                  onChange={e => onChange({ barcodeType: e.target.value as any })}>
+                  {['ean13', 'ean8', 'code128', 'code39', 'upc', 'itf14', 'datamatrix'].map(b => (
+                    <option key={b} value={b}>{b.toUpperCase()}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ── Conditional ── */}
+        {activeTab === 'conditional' && (
+          <div className={styles.styleGroup}>
+            <div className={styles.styleGroupTitle}>Widoczność warunkowa</div>
+            <div className={styles.conditionalHint}>
+              Element zostanie ukryty gdy warunek nie jest spełniony.
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Pole</label>
+              <input className={styles.styleInputFull} value={field.conditional?.field ?? ''}
+                onChange={e => onChange({ conditional: { field: e.target.value, operator: field.conditional?.operator ?? 'eq', value: field.conditional?.value } })}
+                placeholder="np. invoice.isPaid" />
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Operator</label>
+              <select className={styles.styleSelectFull} value={field.conditional?.operator ?? 'eq'}
+                onChange={e => onChange({ conditional: { field: field.conditional?.field ?? '', operator: e.target.value as any, value: field.conditional?.value } })}>
+                <option value="eq">= równe</option>
+                <option value="neq">≠ różne</option>
+                <option value="gt">&gt; większe</option>
+                <option value="lt">&lt; mniejsze</option>
+                <option value="contains">zawiera</option>
+              </select>
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Wartość</label>
+              <input className={styles.styleInputFull} value={String(field.conditional?.value ?? '')}
+                onChange={e => onChange({ conditional: { field: field.conditional?.field ?? '', operator: field.conditional?.operator ?? 'eq', value: e.target.value } })}
+                placeholder="np. true / &quot;PAID&quot;" />
+            </div>
+            {field.conditional?.field && (
+              <button className={styles.clearConditionalBtn} onClick={() => onChange({ conditional: undefined })}>
+                Wyczyść warunek
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ─── Default template factory ─────────────────────────────────────────────────
+function defaultTemplate(): PrintTemplate {
+  return {
+    id: `tpl-${Date.now()}`, name: 'Nowy szablon', description: '',
+    paperSize: 'A4', orientation: 'portrait',
+    margins: { top: 20, right: 15, bottom: 20, left: 15 },
+    sections: [
+      { id: 'sec-header', type: 'header', heightMm: 35, fields: [] },
+      { id: 'sec-body', type: 'body', fields: [] },
+      { id: 'sec-footer', type: 'footer', heightMm: 20, fields: [] },
+    ],
+    watermarks: [],
+    signatures: [],
+  };
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────