@nice2dev/ui-printing 1.1.6 → 1.1.9

package/src/template-editor/NiceTemplateEditor.tsx

@@ -1,5 +1,6 @@
 /* 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 { NiceAppShell } from '@nice2dev/ui';
+import { NiceAppShell, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import type { NiceTranslateFn } from '@nice2dev/ui';
 import React, {
   useState,
   useCallback,
@@ -55,52 +56,55 @@ const FONT_FAMILIES = [
 ];
 const FONT_SIZES = [6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
 
+/** NiceIcon name per field type. */
 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: '📅',
+  text: 'type',
+  number: 'hash',
+  currency: 'dollar',
+  date: 'calendar',
+  datetime: 'clock',
+  boolean: 'check-square',
+  image: 'image',
+  barcode: 'barcode',
+  qr: 'qr-code',
+  signature: 'pen',
+  static_text: 'type',
+  static_image: 'image',
+  line: 'line',
+  rect: 'square',
+  page_number: 'hash',
+  total_pages: 'layers',
+  print_date: 'calendar',
 };
 
 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',
+  text: 'Text',
+  number: 'Number',
+  currency: 'Currency',
+  date: 'Date',
+  datetime: 'Date and time',
+  boolean: 'Yes/No',
+  image: 'Image',
+  barcode: 'Barcode',
   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',
+  signature: 'Signature',
+  static_text: 'Static text',
+  static_image: 'Static image',
+  line: 'Line',
+  rect: 'Rectangle',
+  page_number: 'Page number',
+  total_pages: 'Total pages',
+  print_date: 'Print date',
 };
 
+/** Field-type label in the active language; the table above holds the English default. */
+const fieldTypeLabel = (tr: NiceTranslateFn, type: string): string =>
+  FIELD_TYPE_LABELS[type] ? tr(`printing.fieldType.${type}`, FIELD_TYPE_LABELS[type]) : type;
+
 // ─── Undo/Redo history ───────────────────────────────────────────────────────
 type HistoryState = { past: PrintTemplate[]; present: PrintTemplate; future: PrintTemplate[] };
 type HistoryAction =
-  | { type: 'UPDATE'; payload: PrintTemplate }
-  | { type: 'UNDO' }
-  | { type: 'REDO' };
+  { type: 'UPDATE'; payload: PrintTemplate } | { type: 'UNDO' } | { type: 'REDO' };
 
 const MAX_HISTORY = 50;
 
@@ -136,6 +140,17 @@ function historyReducer(state: HistoryState, action: HistoryAction): HistoryStat
 }
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
+/**
+ * Document ink, as a LITERAL rather than a token — same reason as `344d1b2` in the vector
+ * editor. These values are template DATA: they are written into exported documents, where
+ * no --nice-* property is declared, and they are fed to `<input type="color">`, which only
+ * accepts a 7-character hex and silently shows black for anything else. A `var(…)` string
+ * here never reached the paper as a colour and could not be edited in the picker.
+ */
+const INK = '#000000';
+/** Same, for the faint grey a watermark is drawn in. */
+const INK_FAINT = '#94a3b8';
+
 function uid() {
   return `f-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
 }
@@ -147,7 +162,7 @@ function makeField(type: string, schemaField?: DataSourceField): PrintDataField
     label: schemaField?.label ?? FIELD_TYPE_LABELS[type] ?? type,
     type: type as PrintDataField['type'],
     dataPath: schemaField?.path ?? '',
-    fallback: type === 'static_text' ? 'Tekst statyczny' : undefined,
+    fallback: type === 'static_text' ? 'Static text' : undefined,
     format: type === 'date' || type === 'datetime' ? 'DD.MM.YYYY' : undefined,
     position: {
       x: 15,
@@ -155,7 +170,7 @@ function makeField(type: string, schemaField?: DataSourceField): PrintDataField
       width: type === 'line' ? 80 : 60,
       height: type === 'line' ? 1 : type === 'image' ? 30 : 8,
     },
-    style: { fontSize: 10, color: 'var(--nice-text, #000000)', fontFamily: 'sans-serif' },
+    style: { fontSize: 10, color: INK, fontFamily: 'sans-serif' },
   };
   if (type === 'rect') {
     base.style.backgroundColor = 'var(--nice-bg-secondary, #f1f5f9)';
@@ -164,7 +179,7 @@ function makeField(type: string, schemaField?: DataSourceField): PrintDataField
     base.style = {
       ...base.style,
       borderWidth: 0.5,
-      borderColor: 'var(--nice-text, #000000)',
+      borderColor: INK,
       borderStyle: 'solid',
     };
   }
@@ -235,7 +250,7 @@ interface FieldElementProps {
 
 function resolveFieldPreview(field: PrintDataField, data?: Record<string, unknown>): string {
   if (field.type === 'static_text') {
-    return field.fallback ?? 'Tekst';
+    return field.fallback ?? 'Text';
   }
   if (field.type === 'page_number') {
     return '1';
@@ -295,7 +310,7 @@ const FieldElement: React.FC<FieldElementProps> = ({
           fontFamily: st.fontFamily ?? 'sans-serif',
           fontWeight: st.fontWeight ?? 'normal',
           fontStyle: st.fontStyle ?? 'normal',
-          color: st.color ?? 'var(--nice-text, #000)',
+          color: st.color ?? INK,
           textAlign: st.textAlign ?? 'left',
           lineHeight: st.lineHeight ?? 1.4,
           letterSpacing: st.letterSpacing ? `${st.letterSpacing}em` : undefined,
@@ -319,17 +334,22 @@ const FieldElement: React.FC<FieldElementProps> = ({
         <div
           style={{
             width: '100%',
-            borderBottom: `${(st.borderWidth ?? 0.5) * zoom}px ${st.borderStyle ?? 'solid'} ${st.borderColor ?? 'var(--nice-text, #000)'}`,
+            borderBottom: `${(st.borderWidth ?? 0.5) * zoom}px ${st.borderStyle ?? 'solid'} ${st.borderColor ?? INK}`,
           }}
         />
       ) : isRect ? null : isImage ? (
-        <div className={styles.fieldImagePlaceholder}>🖼</div>
+        <div className={styles.fieldImagePlaceholder}>
+          <NiceIcon name="image" size={24} />
+        </div>
       ) : isBarcode ? (
         <div className={styles.fieldBarcodePlaceholder}>
-          {field.type === 'qr' ? '⬛ QR' : '▮▌▮ Barcode'}
+          <NiceIcon name={field.type === 'qr' ? 'qr-code' : 'barcode'} size={14} />{' '}
+          {field.type === 'qr' ? 'QR' : 'Barcode'}
         </div>
       ) : field.type === 'signature' ? (
-        <div className={styles.fieldSignaturePlaceholder}>✍ {field.label}</div>
+        <div className={styles.fieldSignaturePlaceholder}>
+          <NiceIcon name="pen" size={14} /> {field.label}
+        </div>
       ) : (
         <span style={{ display: 'block', width: '100%' }}>
           {resolveFieldPreview(field, sampleData)}
@@ -469,21 +489,21 @@ const ShortcutChip: React.FC<{ keys: string; label: string }> = ({ keys, label }
 
 // ─── 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' },
+const LEFT_TABS: { id: LeftTab; icon: string; key: string; label: string }[] = [
+  { id: 'fields', icon: 'list', key: 'printing.editor.tabFields', label: 'Fields' },
+  { id: 'layers', icon: 'layers', key: 'printing.editor.tabLayers', label: 'Layers' },
+  { id: 'watermarks', icon: 'droplet', key: 'printing.editor.tabWatermarks', label: 'Watermarks' },
+  { id: 'signatures', icon: 'pen', key: 'printing.editor.tabSignatures', label: 'Signatures' },
+  { id: 'settings', icon: 'settings', key: 'printing.editor.tabSettings', label: 'Settings' },
 ];
 
 // ─── 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' },
+const RIGHT_TABS: { id: RightTab; key: string; label: string }[] = [
+  { id: 'position', key: 'printing.editor.tabPosition', label: 'Position' },
+  { id: 'style', key: 'printing.editor.tabStyle', label: 'Style' },
+  { id: 'data', key: 'printing.editor.tabData', label: 'Data' },
+  { id: 'conditional', key: 'printing.editor.tabConditional', label: 'Conditions' },
 ];
 
 // ─── Toolbar ─────────────────────────────────────────────────────────────────
@@ -536,6 +556,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
   onSendBackward,
   onSave,
 }) => {
+  const { t: tr } = useNiceTranslation();
   const [insertOpen, setInsertOpen] = useState(false);
   const ZOOM_PRESETS = [0.5, 0.75, 1, 1.25, 1.5, 2];
 
@@ -559,14 +580,14 @@ const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => onPaperChange(tpl.paperSize, 'portrait')}
           title="Pion"
         >
-          ⬜
+          <NiceIcon name="file" size={14} />
         </button>
         <button
           className={`${styles.toolbarBtn} ${tpl.orientation === 'landscape' ? styles.toolbarBtnActive : ''}`}
           onClick={() => onPaperChange(tpl.paperSize, 'landscape')}
           title="Poziom"
         >
-          ▭
+          <NiceIcon name="file" size={14} style={{ transform: 'rotate(90deg)' }} />
         </button>
       </div>
 
@@ -577,17 +598,17 @@ const Toolbar: React.FC<ToolbarProps> = ({
             className={styles.toolbarBtn}
             disabled={!canUndo}
             onClick={onUndo}
-            title="Cofnij (Ctrl+Z)"
+            title={`${tr('printing.editor.undo', 'Undo')} (Ctrl+Z)`}
           >
-            ↩
+            <NiceIcon name="undo" size={14} />
           </button>
           <button
             className={styles.toolbarBtn}
             disabled={!canRedo}
             onClick={onRedo}
-            title="Ponów (Ctrl+Y)"
+            title={`${tr('printing.editor.redo', 'Redo')} (Ctrl+Y)`}
           >
-            ↪
+            <NiceIcon name="redo" size={14} />
           </button>
         </div>
       )}
@@ -599,11 +620,14 @@ const Toolbar: React.FC<ToolbarProps> = ({
             className={`${styles.toolbarBtn} ${styles.insertBtn}`}
             onClick={() => setInsertOpen((o) => !o)}
           >
-            ＋ Wstaw ▾
+            <NiceIcon name="plus" size={14} /> {tr('printing.editor.insert', 'Insert')}{' '}
+            <NiceIcon name="chevron-down" size={12} />
           </button>
           {insertOpen && (
             <div className={styles.insertDropdown} onMouseLeave={() => setInsertOpen(false)}>
-              <div className={styles.insertCategory}>Pola danych</div>
+              <div className={styles.insertCategory}>
+                {tr('printing.editor.dataFields', 'Data fields')}
+              </div>
               {['text', 'number', 'currency', 'date', 'image', 'barcode', 'qr'].map((t) => (
                 <button
                   key={t}
@@ -614,7 +638,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
                   }}
                 >
                   <span className={styles.insertIcon}>{FIELD_TYPE_ICONS[t]}</span>
-                  {FIELD_TYPE_LABELS[t]}
+                  {fieldTypeLabel(tr, t)}
                 </button>
               ))}
               <div className={styles.insertCategory}>Elementy statyczne</div>
@@ -636,7 +660,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
                   }}
                 >
                   <span className={styles.insertIcon}>{FIELD_TYPE_ICONS[t]}</span>
-                  {FIELD_TYPE_LABELS[t]}
+                  {fieldTypeLabel(tr, t)}
                 </button>
               ))}
               <div className={styles.insertCategory}>Specjalne</div>
@@ -647,7 +671,10 @@ const Toolbar: React.FC<ToolbarProps> = ({
                   setInsertOpen(false);
                 }}
               >
-                <span className={styles.insertIcon}>💧</span>Znak wodny
+                <span className={styles.insertIcon}>
+                  <NiceIcon name="droplet" size={14} />
+                </span>
+                {tr('printing.editor.watermark', 'Watermark')}
               </button>
               <button
                 className={styles.insertItem}
@@ -656,7 +683,10 @@ const Toolbar: React.FC<ToolbarProps> = ({
                   setInsertOpen(false);
                 }}
               >
-                <span className={styles.insertIcon}>✍</span>Podpis
+                <span className={styles.insertIcon}>
+                  <NiceIcon name="pen" size={14} />
+                </span>
+                {tr('printing.editor.signature', 'Signature')}
               </button>
             </div>
           )}
@@ -666,53 +696,73 @@ const Toolbar: React.FC<ToolbarProps> = ({
       {/* Selection actions */}
       {!readOnly && selectedCount > 0 && (
         <div className={styles.toolbarGroup}>
-          <button className={styles.toolbarBtn} onClick={onDuplicate} title="Duplikuj (Ctrl+D)">
-            ⧉
+          <button
+            className={styles.toolbarBtn}
+            onClick={onDuplicate}
+            title={`${tr('printing.editor.duplicate', 'Duplicate')} (Ctrl+D)`}
+          >
+            <NiceIcon name="copy" size={14} />
           </button>
           <button
             className={`${styles.toolbarBtn} ${styles.toolbarBtnDanger}`}
             onClick={onDelete}
-            title="Usuń (Del)"
+            title={`${tr('printing.action.remove', 'Remove')} (Del)`}
           >
-            🗑
+            <NiceIcon name="trash" size={14} />
           </button>
           <span className={styles.toolbarSep} />
           <button
             className={styles.toolbarBtn}
             onClick={() => onAlignH('left')}
-            title="Wyrównaj lewo"
+            title={tr('printing.editor.alignLeft', 'Align left')}
           >
-            ⬛□□
+            <NiceIcon name="align-left" size={14} />
           </button>
           <button
             className={styles.toolbarBtn}
             onClick={() => onAlignH('center')}
-            title="Wyśrodkuj"
+            title={tr('printing.editor.alignCenter', 'Align centre')}
           >
-            □⬛□
+            <NiceIcon name="align-center" size={14} />
           </button>
           <button
             className={styles.toolbarBtn}
             onClick={() => onAlignH('right')}
-            title="Wyrównaj prawo"
+            title={tr('printing.editor.alignRight', 'Align right')}
           >
-            □□⬛
+            <NiceIcon name="align-right" size={14} />
           </button>
-          <button className={styles.toolbarBtn} onClick={() => onAlignV('top')} title="Góra">
+          <button
+            className={styles.toolbarBtn}
+            onClick={() => onAlignV('top')}
+            title={tr('printing.editor.alignTop', 'Align top')}
+          >
             ⊤
           </button>
-          <button className={styles.toolbarBtn} onClick={() => onAlignV('center')} title="Środek V">
+          <button
+            className={styles.toolbarBtn}
+            onClick={() => onAlignV('center')}
+            title={tr('printing.editor.alignMiddle', 'Align middle')}
+          >
             ⊕
           </button>
-          <button className={styles.toolbarBtn} onClick={() => onAlignV('bottom')} title="Dół">
+          <button
+            className={styles.toolbarBtn}
+            onClick={() => onAlignV('bottom')}
+            title={tr('printing.editor.alignBottom', 'Align bottom')}
+          >
             ⊥
           </button>
           <span className={styles.toolbarSep} />
           <button className={styles.toolbarBtn} onClick={onBringForward} title="Do przodu">
-            ▲
+            <NiceIcon name="arrow-up" size={14} />
           </button>
-          <button className={styles.toolbarBtn} onClick={onSendBackward} title="Do tyłu">
-            ▼
+          <button
+            className={styles.toolbarBtn}
+            onClick={onSendBackward}
+            title={tr('printing.editor.sendBackward', 'Send backward')}
+          >
+            <NiceIcon name="arrow-down" size={14} />
           </button>
         </div>
       )}
@@ -722,16 +772,16 @@ const Toolbar: React.FC<ToolbarProps> = ({
         <button
           className={`${styles.toolbarBtn} ${showGrid ? styles.toolbarBtnActive : ''}`}
           onClick={onToggleGrid}
-          title="Siatka"
+          title={tr('printing.editor.grid', 'Grid')}
         >
           ⊞
         </button>
         <button
           className={`${styles.toolbarBtn} ${showRulers ? styles.toolbarBtnActive : ''}`}
           onClick={onToggleRulers}
-          title="Linijki"
+          title={tr('printing.editor.rulers', 'Rulers')}
         >
-          ⊢
+          <NiceIcon name="ruler" size={14} />
         </button>
       </div>
 
@@ -761,7 +811,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
 
       {!readOnly && onSave && (
         <button className={styles.saveBtn} onClick={onSave}>
-          💾 Zapisz
+          <NiceIcon name="save" size={14} /> {tr('printing.editor.save', 'Save')}
         </button>
       )}
     </div>
@@ -794,6 +844,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   onUpdateTpl,
   onReorderField,
 }) => {
+  const { t: tr } = useNiceTranslation();
   const [search, setSearch] = useState('');
   const filteredFields = schema?.fields.filter(
     (f) =>
@@ -809,10 +860,12 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
             key={t.id}
             className={`${styles.leftTab} ${activeTab === t.id ? styles.leftTabActive : ''}`}
             onClick={() => onTabChange(t.id)}
-            title={t.label}
+            title={tr(t.key, t.label)}
           >
-            <span className={styles.leftTabIcon}>{t.icon}</span>
-            <span className={styles.leftTabLabel}>{t.label}</span>
+            <span className={styles.leftTabIcon}>
+              <NiceIcon name={t.icon} size={16} />
+            </span>
+            <span className={styles.leftTabLabel}>{tr(t.key, t.label)}</span>
           </button>
         ))}
       </div>
@@ -821,11 +874,13 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         {/* ── Fields tab ── */}
         {activeTab === 'fields' && (
           <>
-            <div className={styles.panelHeader}>Pola danych</div>
+            <div className={styles.panelHeader}>
+              {tr('printing.editor.dataFields', 'Data fields')}
+            </div>
             <div className={styles.searchBox}>
               <input
                 className={styles.searchInput}
-                placeholder="Szukaj..."
+                placeholder={tr('printing.editor.search', 'Search…')}
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
               />
@@ -844,7 +899,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     }}
                     onClick={() => onInsertSchemaField(f)}
                   >
-                    <span className={styles.fieldItemIcon}>{FIELD_TYPE_ICONS[f.type] ?? '📝'}</span>
+                    <span className={styles.fieldItemIcon}>
+                      <NiceIcon name={FIELD_TYPE_ICONS[f.type] ?? 'type'} size={14} />
+                    </span>
                     <div className={styles.fieldItemInfo}>
                       <div className={styles.fieldItemLabel}>{f.label}</div>
                       <div className={styles.fieldItemPath}>{f.path}</div>
@@ -853,12 +910,17 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                   </div>
                 ))}
                 {filteredFields?.length === 0 && (
-                  <div className={styles.emptyMsg}>Brak wyników</div>
+                  <div className={styles.emptyMsg}>
+                    {tr('printing.editor.noMatches', 'No matches')}
+                  </div>
                 )}
               </div>
             ) : (
               <div className={styles.emptyMsg}>
-                Brak schematu danych. Przypisz encję w zakładce Ustawienia.
+                {tr(
+                  'printing.editor.noSchema',
+                  'No data schema. Assign an entity in the Settings tab.',
+                )}
               </div>
             )}
           </>
@@ -867,9 +929,15 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         {/* ── Layers tab ── */}
         {activeTab === 'layers' && (
           <>
-            <div className={styles.panelHeader}>Warstwy ({allFields.length})</div>
+            <div className={styles.panelHeader}>
+              {tr('printing.editor.layers', 'Layers')} ({allFields.length})
+            </div>
             <div className={styles.layerList}>
-              {allFields.length === 0 && <div className={styles.emptyMsg}>Brak elementów</div>}
+              {allFields.length === 0 && (
+                <div className={styles.emptyMsg}>
+                  {tr('printing.editor.noElements', 'No elements')}
+                </div>
+              )}
               {allFields
                 .slice()
                 .reverse()
@@ -879,7 +947,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     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.layerIcon}>
+                      <NiceIcon name={FIELD_TYPE_ICONS[f.type] ?? 'type'} size={14} />
+                    </span>
                     <span className={styles.layerName}>{f.name || f.label}</span>
                     <div className={styles.layerActions}>
                       <button
@@ -888,9 +958,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                           e.stopPropagation();
                           onReorderField(f.id, -1);
                         }}
-                        title="Do przodu"
+                        title={tr('printing.editor.bringForward', 'Bring forward')}
                       >
-                        ↑
+                        <NiceIcon name="arrow-up" size={12} />
                       </button>
                       <button
                         className={styles.layerBtn}
@@ -898,9 +968,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                           e.stopPropagation();
                           onReorderField(f.id, 1);
                         }}
-                        title="Do tyłu"
+                        title={tr('printing.editor.sendBackward', 'Send backward')}
                       >
-                        ↓
+                        <NiceIcon name="arrow-down" size={12} />
                       </button>
                     </div>
                   </div>
@@ -917,7 +987,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
               {(tpl.watermarks ?? []).map((wm) => (
                 <div key={wm.id} className={styles.wmItem}>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Typ</span>
+                    <span className={styles.wmLabel}>{tr('printing.editor.type', 'Type')}</span>
                     <select
                       className={styles.wmSelect}
                       value={wm.type}
@@ -929,13 +999,15 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                         })
                       }
                     >
-                      <option value="text">Tekst</option>
-                      <option value="image">Obraz</option>
+                      <option value="text">{tr('printing.fieldType.text', 'Text')}</option>
+                      <option value="image">{tr('printing.fieldType.image', 'Image')}</option>
                     </select>
                   </div>
                   {wm.type === 'text' && (
                     <div className={styles.wmRow}>
-                      <span className={styles.wmLabel}>Tekst</span>
+                      <span className={styles.wmLabel}>
+                        {tr('printing.fieldType.text', 'Text')}
+                      </span>
                       <input
                         className={styles.wmInput}
                         value={wm.text ?? ''}
@@ -969,7 +1041,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     <span className={styles.wmValue}>{Math.round(wm.opacity * 100)}%</span>
                   </div>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Kąt</span>
+                    <span className={styles.wmLabel}>{tr('printing.editor.angle', 'Angle')}</span>
                     <input
                       type="range"
                       min={-90}
@@ -988,7 +1060,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     <span className={styles.wmValue}>{wm.angle}°</span>
                   </div>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Rozmiar</span>
+                    <span className={styles.wmLabel}>{tr('printing.editor.size', 'Size')}</span>
                     <input
                       type="number"
                       min={8}
@@ -1006,11 +1078,11 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     <span className={styles.wmUnit}>pt</span>
                   </div>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Kolor</span>
+                    <span className={styles.wmLabel}>{tr('printing.editor.colour', 'Colour')}</span>
                     <input
                       type="color"
                       className={styles.colorPicker}
-                      value={wm.color ?? 'var(--nice-text-muted, #94a3b8)'}
+                      value={wm.color ?? INK_FAINT}
                       onChange={(e) =>
                         onUpdateTpl({
                           watermarks: tpl.watermarks?.map((w) =>
@@ -1026,7 +1098,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       onUpdateTpl({ watermarks: tpl.watermarks?.filter((w) => w.id !== wm.id) })
                     }
                   >
-                    Usuń
+                    {tr('printing.action.remove', 'Remove')}
                   </button>
                 </div>
               ))}
@@ -1039,17 +1111,18 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       {
                         id: uid(),
                         type: 'text',
-                        text: 'KOPIA',
+                        text: 'COPY',
                         opacity: 0.12,
                         angle: -45,
                         fontSize: 60,
-                        color: 'var(--nice-text-muted, #94a3b8)',
+                        color: INK_FAINT,
                       },
                     ],
                   })
                 }
               >
-                + Dodaj znak wodny
+                <NiceIcon name="plus" size={12} />{' '}
+                {tr('printing.editor.addWatermark', 'Add watermark')}
               </button>
             </div>
           </>
@@ -1091,7 +1164,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     />
                   </div>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Linia</span>
+                    <span className={styles.wmLabel}>{tr('printing.fieldType.line', 'Line')}</span>
                     <input
                       type="checkbox"
                       checked={sig.showLine ?? true}
@@ -1105,7 +1178,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     />
                   </div>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Pokaż datę</span>
+                    <span className={styles.wmLabel}>
+                      {tr('printing.editor.showDate', 'Show date')}
+                    </span>
                     <input
                       type="checkbox"
                       checked={sig.showDate ?? false}
@@ -1124,7 +1199,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       onUpdateTpl({ signatures: tpl.signatures?.filter((s) => s.id !== sig.id) })
                     }
                   >
-                    Usuń
+                    {tr('printing.action.remove', 'Remove')}
                   </button>
                 </div>
               ))}
@@ -1136,7 +1211,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       ...(tpl.signatures ?? []),
                       {
                         id: uid(),
-                        label: 'Podpis',
+                        label: tr('printing.editor.signature', 'Signature'),
                         position: { x: 10, y: 5, width: 70, height: 22 },
                         showLine: true,
                         showDate: false,
@@ -1145,7 +1220,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                   })
                 }
               >
-                + Dodaj podpis
+                <NiceIcon name="plus" size={12} />{' '}
+                {tr('printing.editor.addSignature', 'Add signature')}
               </button>
             </div>
           </>
@@ -1154,10 +1230,12 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         {/* ── Settings tab ── */}
         {activeTab === 'settings' && (
           <>
-            <div className={styles.panelHeader}>Ustawienia szablonu</div>
+            <div className={styles.panelHeader}>
+              {tr('printing.editor.templateSettings', 'Template settings')}
+            </div>
             <div className={styles.settingsForm}>
               <div className={styles.settingsRow}>
-                <label className={styles.settingsLabel}>Nazwa</label>
+                <label className={styles.settingsLabel}>{tr('printing.editor.name', 'Name')}</label>
                 <input
                   className={styles.settingsInput}
                   value={tpl.name}
@@ -1165,7 +1243,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                 />
               </div>
               <div className={styles.settingsRow}>
-                <label className={styles.settingsLabel}>Opis</label>
+                <label className={styles.settingsLabel}>
+                  {tr('printing.editor.description', 'Description')}
+                </label>
                 <textarea
                   className={styles.settingsTextarea}
                   value={tpl.description ?? ''}
@@ -1181,17 +1261,19 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                   onChange={(e) => onUpdateTpl({ category: e.target.value })}
                 />
               </div>
-              <div className={styles.settingsDivider}>Marginesy (mm)</div>
+              <div className={styles.settingsDivider}>
+                {tr('printing.editor.margins', 'Margins (mm)')}
+              </div>
               {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
                 <div key={side} className={styles.settingsRow}>
                   <label className={styles.settingsLabel}>
                     {side === 'top'
-                      ? 'Góra'
+                      ? tr('printing.editor.marginTop', 'Top')
                       : side === 'right'
-                        ? 'Prawo'
+                        ? tr('printing.editor.marginRight', 'Right')
                         : side === 'bottom'
-                          ? 'Dół'
-                          : 'Lewo'}
+                          ? tr('printing.editor.marginBottom', 'Bottom')
+                          : tr('printing.editor.marginLeft', 'Left')}
                   </label>
                   <input
                     type="number"
@@ -1233,6 +1315,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
   paperWidthMm,
   paperHeightMm: _paperHeightMm,
 }) => {
+  const { t: tr } = useNiceTranslation();
   const p = useCallback(
     (patch: Partial<FieldPosition>) =>
       field && onChange({ position: { ...field.position, ...patch } }),
@@ -1247,17 +1330,21 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
   if (!field) {
     return (
       <div className={styles.rightPanel}>
-        <div className={styles.panelHeader}>Właściwości</div>
+        <div className={styles.panelHeader}>{tr('printing.editor.properties', 'Properties')}</div>
         <div className={styles.propsEmpty}>
-          <div className={styles.propsEmptyIcon}>⬚</div>
-          <div className={styles.propsEmptyText}>Zaznacz element na szablonie</div>
+          <div className={styles.propsEmptyIcon}>
+            <NiceIcon name="cursor" size={28} />
+          </div>
+          <div className={styles.propsEmptyText}>
+            {tr('printing.editor.selectElement', 'Select an element on the template')}
+          </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" />
+            <ShortcutChip keys="Del" label={tr('printing.action.remove', 'Remove')} />
+            <ShortcutChip keys="Ctrl+D" label={tr('printing.editor.duplicate', 'Duplicate')} />
+            <ShortcutChip keys="↑↓←→" label={tr('printing.editor.move', 'Move')} />
+            <ShortcutChip keys="Ctrl+Z" label={tr('printing.editor.undo', 'Undo')} />
+            <ShortcutChip keys="Ctrl+A" label={tr('printing.editor.selectAll', 'Select all')} />
+            <ShortcutChip keys="Shift+↑" label={tr('printing.editor.move5mm', 'Move 5 mm')} />
           </div>
         </div>
       </div>
@@ -1295,7 +1382,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               className={`${styles.rightTab} ${activeTab === t.id ? styles.rightTabActive : ''}`}
               onClick={() => onTabChange(t.id)}
             >
-              {t.label}
+              {tr(t.key, t.label)}
             </button>
           );
         })}
@@ -1325,7 +1412,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 </div>
               ))}
               <div className={styles.posCell}>
-                <label className={styles.posLabel}>Obrót</label>
+                <label className={styles.posLabel}>
+                  {tr('printing.editor.rotation', 'Rotation')}
+                </label>
                 <input
                   type="number"
                   step={5}
@@ -1349,24 +1438,30 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
             </div>
 
             <div className={styles.snapSection}>
-              <div className={styles.snapTitle}>Wyrównanie do strony</div>
+              <div className={styles.snapTitle}>
+                {tr('printing.editor.snapToPage', 'Snap to page')}
+              </div>
               <div className={styles.snapRow}>
-                <button className={styles.snapBtn} onClick={() => p({ x: 0 })} title="Lewa krawędź">
-                  ⫷
+                <button
+                  className={styles.snapBtn}
+                  onClick={() => p({ x: 0 })}
+                  title={tr('printing.editor.leftEdge', 'Left edge')}
+                >
+                  <NiceIcon name="align-left" size={14} />
                 </button>
                 <button
                   className={styles.snapBtn}
                   onClick={() => p({ x: (paperWidthMm - field.position.width) / 2 })}
-                  title="Środek poziomy"
+                  title={tr('printing.editor.horizontalCentre', 'Horizontal centre')}
                 >
                   ⊕
                 </button>
                 <button
                   className={styles.snapBtn}
                   onClick={() => p({ x: paperWidthMm - field.position.width })}
-                  title="Prawa krawędź"
+                  title={tr('printing.editor.rightEdge', 'Right edge')}
                 >
-                  ⫸
+                  <NiceIcon name="align-right" size={14} />
                 </button>
               </div>
             </div>
@@ -1394,7 +1489,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   </select>
                 </div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>Rozmiar</label>
+                  <label className={styles.styleLabel}>{tr('printing.editor.size', 'Size')}</label>
                   <select
                     className={styles.styleSelectSm}
                     value={
@@ -1422,22 +1517,26 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   <span className={styles.styleUnit}>pt</span>
                 </div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>Kolor</label>
+                  <label className={styles.styleLabel}>
+                    {tr('printing.editor.colour', 'Colour')}
+                  </label>
                   <input
                     type="color"
                     className={styles.colorPicker}
-                    value={field.style.color ?? 'var(--nice-text, #000000)'}
+                    value={field.style.color ?? INK}
                     onChange={(e) => s({ color: e.target.value })}
                   />
                   <input
                     className={styles.colorHex}
-                    value={field.style.color ?? 'var(--nice-text, #000000)'}
+                    value={field.style.color ?? INK}
                     onChange={(e) => s({ color: e.target.value })}
                     maxLength={7}
                   />
                 </div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>Styl</label>
+                  <label className={styles.styleLabel}>
+                    {tr('printing.editor.style', 'Style')}
+                  </label>
                   <div className={styles.toggleGroup}>
                     <button
                       className={`${styles.toggleBtn} ${field.style.fontWeight === 'bold' ? styles.toggleBtnActive : ''}`}
@@ -1458,7 +1557,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   </div>
                 </div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>Wyrówn.</label>
+                  <label className={styles.styleLabel}>
+                    {tr('printing.editor.align', 'Align')}
+                  </label>
                   <div className={styles.toggleGroup}>
                     {(['left', 'center', 'right', 'justify'] as const).map((a) => (
                       <button
@@ -1485,7 +1586,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   />
                 </div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>Odstępy</label>
+                  <label className={styles.styleLabel}>
+                    {tr('printing.editor.spacing', 'Spacing')}
+                  </label>
                   <input
                     type="number"
                     step={0.01}
@@ -1501,9 +1604,11 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
             )}
 
             <div className={styles.styleGroup}>
-              <div className={styles.styleGroupTitle}>Tło i ramka</div>
+              <div className={styles.styleGroupTitle}>
+                {tr('printing.editor.background', 'Background and border')}
+              </div>
               <div className={styles.styleRow}>
-                <label className={styles.styleLabel}>Tło</label>
+                <label className={styles.styleLabel}>{tr('printing.editor.fill', 'Fill')}</label>
                 <input
                   type="color"
                   className={styles.colorPicker}
@@ -1513,9 +1618,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 <button
                   className={styles.clearBtn}
                   onClick={() => s({ backgroundColor: undefined })}
-                  title="Wyczyść tło"
+                  title={tr('printing.editor.clearFill', 'Clear fill')}
                 >
-                  ✕
+                  <NiceIcon name="close" size={12} />
                 </button>
               </div>
               <div className={styles.styleRow}>
@@ -1532,7 +1637,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 <input
                   type="color"
                   className={styles.colorPicker}
-                  value={field.style.borderColor ?? 'var(--nice-text, #000000)'}
+                  value={field.style.borderColor ?? INK}
                   onChange={(e) => s({ borderColor: e.target.value })}
                 />
                 <select
@@ -1593,9 +1698,11 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
         {/* ── Data ── */}
         {activeTab === 'data' && hasData && (
           <div className={styles.styleGroup}>
-            <div className={styles.styleGroupTitle}>Źródło danych</div>
+            <div className={styles.styleGroupTitle}>
+              {tr('printing.editor.dataSource', 'Data source')}
+            </div>
             <div className={styles.styleRow}>
-              <label className={styles.styleLabel}>Ścieżka</label>
+              <label className={styles.styleLabel}>{tr('printing.editor.path', 'Path')}</label>
               <input
                 className={styles.styleInputFull}
                 value={field.dataPath}
@@ -1604,7 +1711,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               />
             </div>
             <div className={styles.styleRow}>
-              <label className={styles.styleLabel}>Format</label>
+              <label className={styles.styleLabel}>{tr('printing.editor.format', 'Format')}</label>
               <input
                 className={styles.styleInputFull}
                 value={field.format ?? ''}
@@ -1613,31 +1720,35 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               />
             </div>
             <div className={styles.styleRow}>
-              <label className={styles.styleLabel}>Domyślny</label>
+              <label className={styles.styleLabel}>
+                {tr('printing.editor.default', 'Default')}
+              </label>
               <input
                 className={styles.styleInputFull}
                 value={field.fallback ?? ''}
                 onChange={(e) => onChange({ fallback: e.target.value })}
-                placeholder="Gdy brak wartości"
+                placeholder={tr('printing.editor.whenEmpty', 'When there is no value')}
               />
             </div>
             <div className={styles.styleRow}>
-              <label className={styles.styleLabel}>Typ</label>
+              <label className={styles.styleLabel}>{tr('printing.editor.type', 'Type')}</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]) => (
+                {Object.keys(FIELD_TYPE_LABELS).map((k) => (
                   <option key={k} value={k}>
-                    {v}
+                    {fieldTypeLabel(tr, k)}
                   </option>
                 ))}
               </select>
             </div>
             {(field.type === 'barcode' || field.type === 'qr') && (
               <div className={styles.styleRow}>
-                <label className={styles.styleLabel}>Format kodu</label>
+                <label className={styles.styleLabel}>
+                  {tr('printing.editor.codeFormat', 'Code format')}
+                </label>
                 <select
                   className={styles.styleSelectFull}
                   value={field.barcodeType ?? 'code128'}
@@ -1657,12 +1768,19 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
         {/* ── Conditional ── */}
         {activeTab === 'conditional' && (
           <div className={styles.styleGroup}>
-            <div className={styles.styleGroupTitle}>Widoczność warunkowa</div>
+            <div className={styles.styleGroupTitle}>
+              {tr('printing.editor.conditionalVisibility', 'Conditional visibility')}
+            </div>
             <div className={styles.conditionalHint}>
-              Element zostanie ukryty gdy warunek nie jest spełniony.
+              {tr(
+                'printing.editor.conditionalHint',
+                'The element is hidden when the condition is not met.',
+              )}
             </div>
             <div className={styles.styleRow}>
-              <label className={styles.styleLabel}>Pole</label>
+              <label className={styles.styleLabel}>
+                {tr('printing.editor.conditionalField', 'Field')}
+              </label>
               <input
                 className={styles.styleInputFull}
                 value={field.conditional?.field ?? ''}
@@ -1695,15 +1813,15 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   })
                 }
               >
-                <option value="eq">= r�wne</option>
-                <option value="neq">≠ różne</option>
+                <option value="eq">= {tr('printing.editor.opEqual', 'equal')}</option>
+                <option value="neq">≠ {tr('printing.editor.opNotEqual', 'not equal')}</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>
+              <label className={styles.styleLabel}>{tr('printing.editor.value', 'Value')}</label>
               <input
                 className={styles.styleInputFull}
                 value={String(field.conditional?.value ?? '')}
@@ -1724,7 +1842,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 className={styles.clearConditionalBtn}
                 onClick={() => onChange({ conditional: undefined })}
               >
-                Wyczyść warunek
+                {tr('printing.editor.clearCondition', 'Clear condition')}
               </button>
             )}
           </div>
@@ -1738,7 +1856,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
 function defaultTemplate(): PrintTemplate {
   return {
     id: `tpl-${Date.now()}`,
-    name: 'Nowy szablon',
+    name: 'New template',
     description: '',
     paperSize: 'A4',
     orientation: 'portrait',
@@ -1770,6 +1888,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
     present: initialTemplate ?? defaultTemplate(),
     future: [],
   });
+  const { t: tr } = useNiceTranslation();
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [activeSection, _setActiveSection] = useState('sec-body');
   const [zoom, setZoom] = useState(1);
@@ -1842,11 +1961,11 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
             {
               id: uid(),
               type: 'text',
-              text: 'KOPIA',
+              text: 'COPY',
               opacity: 0.12,
               angle: -45,
               fontSize: 60,
-              color: 'var(--nice-text-muted, #94a3b8)',
+              color: INK_FAINT,
             },
           ],
         });
@@ -1859,7 +1978,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
             ...(tpl.signatures ?? []),
             {
               id: uid(),
-              label: 'Podpis',
+              label: tr('printing.editor.signature', 'Signature'),
               position: { x: 10, y: 5, width: 70, height: 22 },
               showLine: true,
               showDate: false,
@@ -2315,7 +2434,9 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
         {/* Test data bar */}
         {Array.isArray(sampleData) && sampleData.length > 0 && (
           <div className={styles.testDataBar}>
-            <span className={styles.testDataLabel}>Dane testowe:</span>
+            <span className={styles.testDataLabel}>
+              {tr('printing.editor.testData', 'Sample data')}:
+            </span>
             <select
               className={styles.testDataSelect}
               value={testDataIdx}
@@ -2323,7 +2444,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
             >
               {sampleData.map((_, i) => (
                 <option key={i} value={i}>
-                  Rekord {i + 1}
+                  {tr('printing.editor.record', 'Record')} {i + 1}
                 </option>
               ))}
             </select>
@@ -2360,12 +2481,16 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
                 className={styles.watermark}
                 style={{
                   fontSize: (wm.fontSize ?? 60) * zoom,
-                  color: wm.color ?? 'var(--nice-text-muted, #94a3b8)',
+                  color: wm.color ?? INK_FAINT,
                   opacity: wm.opacity,
                   transform: `translate(-50%, -50%) rotate(${wm.angle}deg)`,
                 }}
               >
-                {wm.type === 'text' ? wm.text : '??'}
+                {wm.type === 'text' ? (
+                  wm.text
+                ) : (
+                  <NiceIcon name="image" size={(wm.fontSize ?? 60) * zoom} />
+                )}
               </div>
             ))}