@nice2dev/ui-printing 1.0.28

package/src/template-editor/NiceTemplateEditor.tsx

@@ -0,0 +1,2386 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
+import React, { useState, useCallback, useRef as _useRef, useReducer, useEffect, useMemo } from 'react';
+
+import type {
+  PrintTemplate,
+  PrintSection,
+  PrintDataField,
+  PrintWatermark as _PrintWatermark,
+  PrintSignature as _PrintSignature,
+  DataSourceField,
+  TemplateSampleData as _TemplateSampleData,
+  PaperSize,
+  PaperOrientation,
+  NiceTemplateEditorProps,
+  SectionType as _SectionType,
+  FieldStyle,
+  FieldPosition,
+  BarcodeType,
+} 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 PrintDataField['type'],
+    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: 'var(--nice-text, #000000)', fontFamily: 'sans-serif' },
+  };
+  if (type === 'rect') {
+    base.style.backgroundColor = 'var(--nice-bg-secondary, #f1f5f9)';
+  }
+  if (type === 'line') {
+    base.style = { ...base.style, borderWidth: 0.5, borderColor: 'var(--nice-text, #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 Record<string, unknown>)[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 ?? 'var(--nice-text, #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',
+    borderRadius: st.borderRadius,
+    opacity: st.opacity,
+    outline: selected ? '1.5px solid var(--nice-primary-hover, #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 ?? 'var(--nice-text, #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, var(--nice-overlay-15, rgba(148, 163, 184, 0.15)) 0, var(--nice-overlay-15, rgba(148, 163, 184, 0.15)) 1px, transparent 1px, transparent ${5 * zoom * MM_TO_PX}px),
+             repeating-linear-gradient(90deg, var(--nice-overlay-15, rgba(148, 163, 184, 0.15)) 0, var(--nice-overlay-15, 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 ?? 'var(--nice-text-muted, #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: 'var(--nice-text-muted, #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: _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 ?? 'var(--nice-text, #000000)'}
+                    onChange={(e) => s({ color: e.target.value })}
+                  />
+                  <input
+                    className={styles.colorHex}
+                    value={field.style.color ?? 'var(--nice-text, #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 ?? 'var(--nice-bg, #fff)'}
+                  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 ?? 'var(--nice-text, #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 FieldStyle['borderStyle'] })}
+                >
+                  <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 PrintDataField['type'] })}
+              >
+                {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 BarcodeType })}
+                >
+                  {['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 NonNullable<
+                        PrintDataField['conditional']
+                      >['operator'],
+                      value: field.conditional?.value,
+                    },
+                  })
+                }
+              >
+                <option value="eq">= r�wne</option>
+                <option value="neq">≠ różne</option>
+                <option value="gt">&gt; wieksze</option>
+                <option value="lt">&lt; mniejsze</option>
+                <option value="contains">zawiera</option>
+              </select>
+            </div>
+            <div className={styles.styleRow}>
+              <label className={styles.styleLabel}>Wartosc</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 / "PAID"'
+              />
+            </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 -----------------------------------------------------------
+export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
+  template: initialTemplate,
+  dataSchema,
+  sampleData = [],
+  onChange,
+  onSave,
+  readOnly = false,
+  className,
+  style,
+  theme = 'light',
+}) => {
+  const [{ past, present: tpl, future }, dispatch] = useReducer(historyReducer, {
+    past: [],
+    present: initialTemplate ?? defaultTemplate(),
+    future: [],
+  });
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [activeSection, _setActiveSection] = useState('sec-body');
+  const [zoom, setZoom] = useState(1);
+  const [testDataIdx, setTestDataIdx] = useState(0);
+  const [leftTab, setLeftTab] = useState<LeftTab>('fields');
+  const [rightTab, setRightTab] = useState<RightTab>('position');
+  const [showGrid, setShowGrid] = useState(false);
+  const [showRulers, setShowRulers] = useState(true);
+
+  const update = useCallback(
+    (patch: Partial<PrintTemplate>) => {
+      const next = { ...tpl, ...patch };
+      dispatch({ type: 'UPDATE', payload: next });
+      onChange?.(next);
+    },
+    [tpl, onChange],
+  );
+
+  // Paper dimensions
+  const [paperW, paperH] = useMemo((): [number, number] => {
+    const [w, h] = PAPER_DIM[tpl.paperSize] ?? PAPER_DIM.A4;
+    return tpl.orientation === 'landscape' ? [h, w] : [w, h];
+  }, [tpl.paperSize, tpl.orientation]);
+
+  // All fields (for layers panel and keyboard ops)
+  const allFields = useMemo(() => tpl.sections.flatMap((s) => s.fields), [tpl]);
+  const firstSelected = useMemo(
+    () => allFields.find((f) => selectedIds.has(f.id)) ?? null,
+    [allFields, selectedIds],
+  );
+
+  // -- Field mutation helpers --
+  const updateFieldById = useCallback(
+    (id: string, patch: Partial<PrintDataField>) => {
+      update({
+        sections: tpl.sections.map((s) => ({
+          ...s,
+          fields: s.fields.map((f) =>
+            f.id === id ? { ...f, ...patch, style: { ...f.style, ...(patch.style ?? {}) } } : f,
+          ),
+        })),
+      });
+    },
+    [tpl, update],
+  );
+
+  const updateSelected = useCallback(
+    (patch: Partial<PrintDataField>) => {
+      update({
+        sections: tpl.sections.map((s) => ({
+          ...s,
+          fields: s.fields.map((f) =>
+            selectedIds.has(f.id)
+              ? { ...f, ...patch, style: { ...f.style, ...(patch.style ?? {}) } }
+              : f,
+          ),
+        })),
+      });
+    },
+    [tpl, selectedIds, update],
+  );
+
+  // -- Insert field --
+  const insertField = useCallback(
+    (type: string, schemaField?: DataSourceField) => {
+      if (type === 'watermark') {
+        update({
+          watermarks: [
+            ...(tpl.watermarks ?? []),
+            {
+              id: uid(),
+              type: 'text',
+              text: 'KOPIA',
+              opacity: 0.12,
+              angle: -45,
+              fontSize: 60,
+              color: 'var(--nice-text-muted, #94a3b8)',
+            },
+          ],
+        });
+        setLeftTab('watermarks');
+        return;
+      }
+      if (type === 'signature') {
+        update({
+          signatures: [
+            ...(tpl.signatures ?? []),
+            {
+              id: uid(),
+              label: 'Podpis',
+              position: { x: 10, y: 5, width: 70, height: 22 },
+              showLine: true,
+              showDate: false,
+            },
+          ],
+        });
+        setLeftTab('signatures');
+        return;
+      }
+      const section =
+        tpl.sections.find((s) => s.id === activeSection) ??
+        tpl.sections.find((s) => s.type === 'body');
+      if (!section) {
+        return;
+      }
+      const field = makeField(type, schemaField);
+      const updated = {
+        sections: tpl.sections.map((s) =>
+          s.id === section.id ? { ...s, fields: [...s.fields, field] } : s,
+        ),
+      };
+      dispatch({ type: 'UPDATE', payload: { ...tpl, ...updated } });
+      onChange?.({ ...tpl, ...updated });
+      setSelectedIds(new Set([field.id]));
+    },
+    [tpl, activeSection, onChange],
+  );
+
+  // -- Drop from left panel --
+  const handleDropField = useCallback(
+    (sectionId: string, schemaPath: string, x: number, y: number) => {
+      const sf = dataSchema?.fields.find((f) => f.path === schemaPath);
+      const field = makeField(sf?.type ?? 'text', sf);
+      field.position.x = Math.round(x * 2) / 2;
+      field.position.y = Math.round(y * 2) / 2;
+      const updated = {
+        sections: tpl.sections.map((s) =>
+          s.id === sectionId ? { ...s, fields: [...s.fields, field] } : s,
+        ),
+      };
+      dispatch({ type: 'UPDATE', payload: { ...tpl, ...updated } });
+      onChange?.({ ...tpl, ...updated });
+      setSelectedIds(new Set([field.id]));
+    },
+    [tpl, dataSchema, onChange],
+  );
+
+  // -- Selection --
+  const handleFieldClick = useCallback((id: string, e: React.MouseEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      setSelectedIds((prev) => {
+        const n = new Set(prev);
+        n.has(id) ? n.delete(id) : n.add(id);
+        return n;
+      });
+    } else if (e.shiftKey) {
+      setSelectedIds((prev) => new Set([...prev, id]));
+    } else {
+      setSelectedIds(new Set([id]));
+    }
+  }, []);
+
+  // -- Drag to move --
+  const handleFieldDragStart = useCallback(
+    (fieldId: string, e: React.MouseEvent) => {
+      if (readOnly) {
+        return;
+      }
+      e.preventDefault();
+      // Ensure this field is selected
+      if (!selectedIds.has(fieldId)) {
+        setSelectedIds(new Set([fieldId]));
+      }
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const snapshot = tpl.sections.map((s) => ({
+        id: s.id,
+        fields: s.fields.map((f) => ({ id: f.id, pos: { ...f.position } })),
+      }));
+
+      const move = (me: MouseEvent) => {
+        const dx = (me.clientX - startX) / (zoom * MM_TO_PX);
+        const dy = (me.clientY - startY) / (zoom * MM_TO_PX);
+        const ids = selectedIds.has(fieldId) ? selectedIds : new Set([fieldId]);
+        const sections = tpl.sections.map((sec) => {
+          const snap = snapshot.find((s) => s.id === sec.id);
+          return {
+            ...sec,
+            fields: sec.fields.map((f) => {
+              if (!ids.has(f.id)) {
+                return f;
+              }
+              const origPos = snap?.fields.find((sf) => sf.id === f.id)?.pos ?? f.position;
+              return {
+                ...f,
+                position: {
+                  ...f.position,
+                  x: Math.max(0, Math.round((origPos.x + dx) * 2) / 2),
+                  y: Math.max(0, Math.round((origPos.y + dy) * 2) / 2),
+                },
+              };
+            }),
+          };
+        });
+        // Live update without history push
+        const next = { ...tpl, sections };
+        onChange?.(next);
+        // Update reducer state directly (without undo step until mouseup)
+        dispatch({ type: 'UPDATE', payload: next });
+      };
+
+      const up = () => {
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('mouseup', up);
+      };
+      document.addEventListener('mousemove', move);
+      document.addEventListener('mouseup', up);
+    },
+    [tpl, zoom, selectedIds, readOnly, onChange],
+  );
+
+  // -- Resize --
+  const handleResizeStart = useCallback(
+    (fieldId: string, dir: ResizeDir, e: React.MouseEvent) => {
+      if (readOnly) {
+        return;
+      }
+      e.preventDefault();
+      const field = allFields.find((f) => f.id === fieldId);
+      if (!field) {
+        return;
+      }
+      const origPos = { ...field.position };
+      const startX = e.clientX;
+      const startY = e.clientY;
+
+      const move = (me: MouseEvent) => {
+        const dx = (me.clientX - startX) / (zoom * MM_TO_PX);
+        const dy = (me.clientY - startY) / (zoom * MM_TO_PX);
+        let { x, y, width, height } = origPos;
+        if (dir.includes('e')) {
+          width = Math.max(5, width + dx);
+        }
+        if (dir.includes('s')) {
+          height = Math.max(3, height + dy);
+        }
+        if (dir.includes('w')) {
+          x = x + dx;
+          width = Math.max(5, width - dx);
+        }
+        if (dir.includes('n')) {
+          y = y + dy;
+          height = Math.max(3, height - dy);
+        }
+        updateFieldById(fieldId, {
+          position: {
+            ...origPos,
+            x: Math.round(x * 2) / 2,
+            y: Math.round(y * 2) / 2,
+            width: Math.round(width * 2) / 2,
+            height: Math.round(height * 2) / 2,
+          },
+        });
+      };
+      const up = () => {
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('mouseup', up);
+      };
+      document.addEventListener('mousemove', move);
+      document.addEventListener('mouseup', up);
+    },
+    [allFields, zoom, readOnly, updateFieldById],
+  );
+
+  // -- Selection operations --
+  const deleteSelected = useCallback(() => {
+    update({
+      sections: tpl.sections.map((s) => ({
+        ...s,
+        fields: s.fields.filter((f) => !selectedIds.has(f.id)),
+      })),
+    });
+    setSelectedIds(new Set());
+  }, [tpl, selectedIds, update]);
+
+  const duplicateSelected = useCallback(() => {
+    const newIds = new Set<string>();
+    update({
+      sections: tpl.sections.map((s) => {
+        const dupes = s.fields
+          .filter((f) => selectedIds.has(f.id))
+          .map((f) => {
+            const nf = {
+              ...f,
+              id: uid(),
+              position: { ...f.position, x: f.position.x + 5, y: f.position.y + 5 },
+            };
+            newIds.add(nf.id);
+            return nf;
+          });
+        return { ...s, fields: [...s.fields, ...dupes] };
+      }),
+    });
+    setSelectedIds(newIds);
+  }, [tpl, selectedIds, update]);
+
+  const alignH = useCallback(
+    (align: 'left' | 'center' | 'right') => {
+      update({
+        sections: tpl.sections.map((s) => ({
+          ...s,
+          fields: s.fields.map((f) => {
+            if (!selectedIds.has(f.id)) {
+              return f;
+            }
+            const x =
+              align === 'left'
+                ? tpl.margins.left
+                : align === 'right'
+                  ? paperW - tpl.margins.right - f.position.width
+                  : (paperW - f.position.width) / 2;
+            return { ...f, position: { ...f.position, x } };
+          }),
+        })),
+      });
+    },
+    [tpl, selectedIds, paperW, update],
+  );
+
+  const alignV = useCallback(
+    (align: 'top' | 'center' | 'bottom') => {
+      const section = tpl.sections.find((s) => s.id === activeSection);
+      if (!section) {
+        return;
+      }
+      const sectionH = section.heightMm ?? 200;
+      update({
+        sections: tpl.sections.map((s) => {
+          if (s.id !== activeSection) {
+            return s;
+          }
+          return {
+            ...s,
+            fields: s.fields.map((f) => {
+              if (!selectedIds.has(f.id)) {
+                return f;
+              }
+              const y =
+                align === 'top'
+                  ? 0
+                  : align === 'bottom'
+                    ? sectionH - f.position.height
+                    : (sectionH - f.position.height) / 2;
+              return { ...f, position: { ...f.position, y } };
+            }),
+          };
+        }),
+      });
+    },
+    [tpl, selectedIds, activeSection, update],
+  );
+
+  const bringForward = useCallback(() => {
+    update({
+      sections: tpl.sections.map((s) => ({
+        ...s,
+        fields: s.fields.map((f) =>
+          selectedIds.has(f.id)
+            ? { ...f, position: { ...f.position, zIndex: (f.position.zIndex ?? 1) + 1 } }
+            : f,
+        ),
+      })),
+    });
+  }, [tpl, selectedIds, update]);
+
+  const sendBackward = useCallback(() => {
+    update({
+      sections: tpl.sections.map((s) => ({
+        ...s,
+        fields: s.fields.map((f) =>
+          selectedIds.has(f.id)
+            ? {
+                ...f,
+                position: { ...f.position, zIndex: Math.max(1, (f.position.zIndex ?? 1) - 1) },
+              }
+            : f,
+        ),
+      })),
+    });
+  }, [tpl, selectedIds, update]);
+
+  const reorderFieldInLayers = useCallback(
+    (fieldId: string, delta: -1 | 1) => {
+      update({
+        sections: tpl.sections.map((s) => ({
+          ...s,
+          fields: s.fields.map((f) =>
+            f.id === fieldId
+              ? {
+                  ...f,
+                  position: {
+                    ...f.position,
+                    zIndex: Math.max(1, (f.position.zIndex ?? 1) - delta),
+                  },
+                }
+              : f,
+          ),
+        })),
+      });
+    },
+    [tpl, update],
+  );
+
+  // -- Keyboard shortcuts --
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+        return;
+      }
+      const NUDGE = e.shiftKey ? 5 : 0.5;
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (selectedIds.size) {
+          e.preventDefault();
+          deleteSelected();
+        }
+      } else if (e.ctrlKey && e.key === 'z') {
+        e.preventDefault();
+        dispatch({ type: 'UNDO' });
+      } else if (e.ctrlKey && (e.key === 'y' || e.key === 'Y')) {
+        e.preventDefault();
+        dispatch({ type: 'REDO' });
+      } else if (e.ctrlKey && (e.key === 'd' || e.key === 'D')) {
+        e.preventDefault();
+        if (selectedIds.size) {
+          duplicateSelected();
+        }
+      } else if (e.ctrlKey && e.key === 'a') {
+        e.preventDefault();
+        setSelectedIds(new Set(allFields.map((f) => f.id)));
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        updateSelected({
+          position: { ...firstSelected!.position, x: (firstSelected?.position.x ?? 0) - NUDGE },
+        });
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        updateSelected({
+          position: { ...firstSelected!.position, x: (firstSelected?.position.x ?? 0) + NUDGE },
+        });
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        updateSelected({
+          position: { ...firstSelected!.position, y: (firstSelected?.position.y ?? 0) - NUDGE },
+        });
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        updateSelected({
+          position: { ...firstSelected!.position, y: (firstSelected?.position.y ?? 0) + NUDGE },
+        });
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [selectedIds, allFields, firstSelected, deleteSelected, duplicateSelected, updateSelected]);
+
+  // -- Section height change --
+  const handleSectionHeightChange = useCallback(
+    (sectionId: string, h: number) => {
+      update({
+        sections: tpl.sections.map((s) =>
+          s.id === sectionId ? { ...s, heightMm: Math.round(h * 2) / 2 } : s,
+        ),
+      });
+    },
+    [tpl, update],
+  );
+
+  // -- Test/sample data --
+  const sampleDataRecord = useMemo((): Record<string, unknown> => {
+    const entry = Array.isArray(sampleData) ? sampleData[testDataIdx] : sampleData;
+    if (!entry) {
+      return {};
+    }
+    if ('data' in entry) {
+      return entry.data as Record<string, unknown>;
+    }
+    return entry as Record<string, unknown>;
+  }, [sampleData, testDataIdx]);
+
+  const paperWPx = paperW * zoom * MM_TO_PX;
+  const paperHPx = paperH * zoom * MM_TO_PX;
+
+  return (
+    <div
+      className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
+      style={style}
+      onClick={() => setSelectedIds(new Set())}
+    >
+      <Toolbar
+        tpl={tpl}
+        zoom={zoom}
+        canUndo={past.length > 0}
+        canRedo={future.length > 0}
+        showGrid={showGrid}
+        showRulers={showRulers}
+        readOnly={readOnly}
+        selectedCount={selectedIds.size}
+        onPaperChange={(size, orient) => update({ paperSize: size, orientation: orient })}
+        onZoom={setZoom}
+        onUndo={() => dispatch({ type: 'UNDO' })}
+        onRedo={() => dispatch({ type: 'REDO' })}
+        onToggleGrid={() => setShowGrid((g) => !g)}
+        onToggleRulers={() => setShowRulers((r) => !r)}
+        onInsert={insertField}
+        onDelete={deleteSelected}
+        onDuplicate={duplicateSelected}
+        onAlignH={alignH}
+        onAlignV={alignV}
+        onBringForward={bringForward}
+        onSendBackward={sendBackward}
+        onSave={onSave ? () => onSave(tpl) : undefined}
+      />
+
+      <div className={styles.editorBody}>
+        {/* Left panel */}
+        <LeftPanel
+          activeTab={leftTab}
+          onTabChange={setLeftTab}
+          schema={dataSchema}
+          tpl={tpl}
+          allFields={allFields}
+          selectedIds={selectedIds}
+          onInsertSchemaField={(f) => insertField(f.type, f)}
+          onSelectField={(id) => setSelectedIds(new Set([id]))}
+          onUpdateTpl={(patch) => update(patch)}
+          onReorderField={reorderFieldInLayers}
+        />
+
+        {/* Canvas area */}
+        <div className={styles.canvasArea}>
+          {/* Test data bar */}
+          {Array.isArray(sampleData) && sampleData.length > 0 && (
+            <div className={styles.testDataBar}>
+              <span className={styles.testDataLabel}>Dane testowe:</span>
+              <select
+                className={styles.testDataSelect}
+                value={testDataIdx}
+                onChange={(e) => setTestDataIdx(+e.target.value)}
+              >
+                {sampleData.map((_, i) => (
+                  <option key={i} value={i}>
+                    Rekord {i + 1}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {/* Ruler corner + rulers */}
+          {showRulers && (
+            <div className={styles.rulerWrapper}>
+              <div className={styles.rulerCorner} />
+              <Ruler lengthMm={paperW} zoom={zoom} orientation="h" />
+              <Ruler lengthMm={paperH} zoom={zoom} orientation="v" />
+            </div>
+          )}
+
+          {/* Scrollable paper area */}
+          <div className={styles.paperScroll} onClick={(e) => e.stopPropagation()}>
+            <div className={styles.paperShadow} style={{ width: paperWPx, minHeight: paperHPx }}>
+              {/* Margin guides */}
+              <div
+                className={styles.marginGuide}
+                style={{
+                  top: tpl.margins.top * zoom * MM_TO_PX,
+                  right: tpl.margins.right * zoom * MM_TO_PX,
+                  bottom: tpl.margins.bottom * zoom * MM_TO_PX,
+                  left: tpl.margins.left * zoom * MM_TO_PX,
+                }}
+              />
+
+              {/* Watermarks */}
+              {(tpl.watermarks ?? []).map((wm) => (
+                <div
+                  key={wm.id}
+                  className={styles.watermark}
+                  style={{
+                    fontSize: (wm.fontSize ?? 60) * zoom,
+                    color: wm.color ?? 'var(--nice-text-muted, #94a3b8)',
+                    opacity: wm.opacity,
+                    transform: `translate(-50%, -50%) rotate(${wm.angle}deg)`,
+                  }}
+                >
+                  {wm.type === 'text' ? wm.text : '??'}
+                </div>
+              ))}
+
+              {/* Sections */}
+              {tpl.sections.map((section) => (
+                <div key={section.id}>
+                  <SectionCanvas
+                    section={section}
+                    zoom={zoom}
+                    paperWidthMm={paperW}
+                    selectedIds={selectedIds}
+                    sampleData={sampleDataRecord}
+                    readOnly={readOnly}
+                    showGrid={showGrid}
+                    onFieldClick={handleFieldClick}
+                    onFieldDragStart={handleFieldDragStart}
+                    onResizeStart={handleResizeStart}
+                    onSectionHeightChange={handleSectionHeightChange}
+                    onDropField={handleDropField}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Right properties panel */}
+        <PropertiesPanel
+          field={firstSelected}
+          activeTab={rightTab}
+          onTabChange={setRightTab}
+          onChange={(patch) => firstSelected && updateFieldById(firstSelected.id, patch)}
+          paperWidthMm={paperW}
+          paperHeightMm={paperH}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NiceTemplateEditor;