From cd8549daa31067591a9f470432581e330b179e84 Mon Sep 17 00:00:00 2001
From: TraceLumen <tracelumen@root-kit.ru>
Date: Wed, 2 Sep 2026 16:52:54 +0300
Subject: [PATCH] Preview preload pages count

---
 src/lib/PrintMenu.svelte | 896 ++++++++++++++++++++-------------------
 1 file changed, 451 insertions(+), 445 deletions(-)

diff --git a/src/lib/PrintMenu.svelte b/src/lib/PrintMenu.svelte
index fdb7a74..6f83992 100644
--- a/src/lib/PrintMenu.svelte
+++ b/src/lib/PrintMenu.svelte
@@ -1,488 +1,494 @@
 <script>
-  import { onDestroy, tick } from 'svelte';
-  import SelectionPage from './preview/SelectionPage.svelte';
-  import PreviewPage from './preview/PreviewPage.svelte';
+import { onDestroy, tick } from 'svelte';
+import SelectionPage from './preview/SelectionPage.svelte';
+import PreviewPage from './preview/PreviewPage.svelte';
 
-  let { onBack = () => {}, onPrint = () => {} } = $props();
+let { onBack = () => {}, onPrint = () => {} } = $props();
 
-  // ── Модель данных ──
-  /** @typedef {{ id: number, file: File, previewUrl: string | null, fileType: 'image' | 'pdf' | 'other', expanded: boolean, format: 'A4' | 'A5', colorMode: 'bw' | 'color', qualityIndex: number, copies: number, pageRange: string, totalPages: number, selectedPages: Set<number>, pdfDoc: any }} FileEntry */
-  /** @type {FileEntry[]} */
-  let files = $state([]);
+// ── Модель данных ──
+/** @typedef {{ id: number, file: File, previewUrl: string | null, fileType: 'image' | 'pdf' | 'other', expanded: boolean, format: 'A4' | 'A5', colorMode: 'bw' | 'color', qualityIndex: number, copies: number, pageRange: string, totalPages: number, selectedPages: Set<number>, pdfDoc: any }} FileEntry */
+/** @type {FileEntry[]} */
+let files = $state([]);
 
-  // ── Общие состояния оверлея ──
-  /** @type {FileEntry | null} */
-  let activeFile = $state(null);
-  
-  /** Режим просмотра: 'gallery' (выбор страниц) или 'preview' (чтение) */
-  let viewMode = $state(/** @type {'gallery' | 'preview'} */ ('gallery'));
+// ── Общие состояния оверлея ──
+/** @type {FileEntry | null} */
+let activeFile = $state(null);
+/** Режим просмотра: 'gallery' (выбор страниц) или 'preview' (чтение) */
+let viewMode = $state(/** @type {'gallery' | 'preview'} */ ('gallery'));
 
-  // ── Данные для галереи (выбор страниц) ──
-  let galleryThumbnails = $state([]);
-  let galleryLoading = $state(false);
+// ── Данные для галереи (выбор страниц) ──
+let galleryThumbnails = $state([]);
+let galleryLoading = $state(false);
 
-  // ── Данные для превью (чтение) ──
-  /** Кэшированные URL больших страниц для превью */
-  let previewPagesCache = $state({}); 
-  let isPreviewRendering = $state(false);
+// ── Данные для превью (чтение) ──
+/** Кэшированные URL больших страниц для превью */
+let previewPagesCache = $state({});
+let isPreviewRendering = $state(false);
 
-  let uid = 0;
+let uid = 0;
 
-  const qualities = [
-    { id: 'low', label: 'Эконом' },
-    { id: 'medium', label: 'Стандарт' },
-    { id: 'high', label: 'Максимум' }
-  ];
-  const formats = ['A4', 'A5'];
-  const colorModes = [
-    { id: 'bw', label: 'Чб' },
-    { id: 'color', label: 'Цвет' }
-  ];
+const qualities = [
+	{ id: 'low', label: 'Эконом' },
+	{ id: 'medium', label: 'Стандарт' },
+	{ id: 'high', label: 'Максимум' }
+];
+const formats = ['A4', 'A5'];
+const colorModes = [
+	{ id: 'bw', label: 'Чб' },
+	{ id: 'color', label: 'Цвет' }
+];
 
-  // ── PDF.js Core (Остается в родителе для управления памятью) ──
-  async function loadPdfDocument(entry) {
-    if (entry.pdfDoc) return entry.pdfDoc;
-    try {
-      const pdfjsLib = await import('https://mozilla.github.io/pdf.js/build/pdf.mjs');
-      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs';
-      const arrayBuffer = await entry.file.arrayBuffer();
-      const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
-      const pdf = await loadingTask.promise;
-      entry.pdfDoc = pdf;
-      entry.totalPages = pdf.numPages;
-      entry.selectedPages = new Set(Array.from({ length: pdf.numPages }, (_, i) => i + 1));
-      return pdf;
-    } catch (err) {
-      console.error('PDF load error:', err);
-      entry.totalPages = 0;
-      return null;
-    }
-  }
+// ── PDF.js Core ──
+async function loadPdfDocument(entry) {
+	if (entry.pdfDoc) return entry.pdfDoc;
+	try {
+		const pdfjsLib = await import('https://mozilla.github.io/pdf.js/build/pdf.mjs');
+		pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs';
+		
+		const arrayBuffer = await entry.file.arrayBuffer();
+		const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
+		const pdf = await loadingTask.promise;
+		
+		entry.pdfDoc = pdf;
+		entry.totalPages = pdf.numPages;
+		// Инициализируем выбранные страницы только если они еще не заданы
+		if (!entry.selectedPages || entry.selectedPages.size === 0) {
+			entry.selectedPages = new Set(Array.from({ length: pdf.numPages }, (_, i) => i + 1));
+		}
+		return pdf;
+	} catch (err) {
+		console.error('PDF load error:', err);
+		entry.totalPages = 0;
+		return null;
+	}
+}
 
-  async function renderPageToImage(pdfDoc, pageNum, scale = 1.0) {
-    const page = await pdfDoc.getPage(pageNum);
-    const viewport = page.getViewport({ scale });
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    
-    const outputScale = window.devicePixelRatio || 1;
-    canvas.width = Math.floor(viewport.width * outputScale);
-    canvas.height = Math.floor(viewport.height * outputScale);
-    
-    canvas.style.width = `${Math.floor(viewport.width)}px`;
-    canvas.style.height = `${Math.floor(viewport.height)}px`;
+async function renderPageToImage(pdfDoc, pageNum, scale = 1.0) {
+	const page = await pdfDoc.getPage(pageNum);
+	const viewport = page.getViewport({ scale });
+	const canvas = document.createElement('canvas');
+	const context = canvas.getContext('2d');
+	const outputScale = window.devicePixelRatio || 1;
+	
+	canvas.width = Math.floor(viewport.width * outputScale);
+	canvas.height = Math.floor(viewport.height * outputScale);
+	canvas.style.width = `${Math.floor(viewport.width)}px`;
+	canvas.style.height = `${Math.floor(viewport.height)}px`;
+	
+	const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined;
+	
+	await page.render({
+		canvasContext: context,
+		viewport,
+		transform
+	}).promise;
+	
+	return canvas.toDataURL('image/jpeg', 0.85);
+}
 
-    const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined;
+// ── Логика Галереи ──
+async function openPageGallery(entry) {
+	activeFile = entry;
+	viewMode = 'gallery';
+	galleryThumbnails = [];
+	galleryLoading = true;
+	previewPagesCache = {};
+	
+	await tick();
+	
+	// Используем уже загруженный документ или загружаем при необходимости
+	if (!entry.pdfDoc) await loadPdfDocument(entry);
+	
+	if (!entry.pdfDoc || entry.totalPages === 0) {
+		galleryLoading = false;
+		return;
+	}
+	
+	const thumbs = [];
+	for (let i = 1; i <= entry.totalPages; i++) {
+		try {
+			const url = await renderPageToImage(entry.pdfDoc, i, 0.4);
+			thumbs.push(url);
+			galleryThumbnails = [...thumbs];
+		} catch (err) {
+			thumbs.push('');
+			galleryThumbnails = [...thumbs];
+		}
+	}
+	galleryLoading = false;
+}
 
-    await page.render({ 
-      canvasContext: context, 
-      viewport,
-      transform 
-    }).promise;
-    
-    return canvas.toDataURL('image/jpeg', 0.85);
-  }
+// ── Логика Превью ──
+async function openPreview(entry) {
+	activeFile = entry;
+	viewMode = 'preview';
+	previewPagesCache = {};
+	galleryThumbnails = [];
+	
+	await tick();
+	
+	if (entry.fileType === 'pdf') {
+		// Документ должен быть уже загружен при добавлении файла, 
+		// но на всякий случай проверяем
+		if (!entry.pdfDoc) await loadPdfDocument(entry);
+		
+		// Берем totalPages из entry, которое было получено при добавлении файла
+		if (entry.totalPages > 0) {
+			preloadPreviewPages(entry, 1, 5);
+		}
+	}
+}
 
-  // ── Логика Галереи ──
-  async function openPageGallery(entry) {
-    activeFile = entry;
-    viewMode = 'gallery';
-    galleryThumbnails = [];
-    galleryLoading = true;
-    previewPagesCache = {}; 
+async function preloadPreviewPages(entry, startPage, count, direction = 'forward') {
+	if (!entry.pdfDoc || isPreviewRendering) return;
+	isPreviewRendering = true;
+	
+	let pagesToLoad = [];
+	if (direction === 'around') {
+		const half = Math.floor(count / 2);
+		const from = Math.max(1, startPage - half);
+		const to = Math.min(entry.totalPages, startPage + half);
+		for(let i = from; i <= to; i++) pagesToLoad.push(i);
+	} else {
+		const endPage = Math.min(startPage + count - 1, entry.totalPages);
+		for (let i = startPage; i <= endPage; i++) pagesToLoad.push(i);
+	}
+	
+	pagesToLoad = pagesToLoad.filter(p => !previewPagesCache[p]);
+	
+	if (pagesToLoad.length > 0) {
+		const newCacheEntries = {};
+		for (const pageNum of pagesToLoad) {
+			try {
+				const url = await renderPageToImage(entry.pdfDoc, pageNum, 1.5);
+				newCacheEntries[pageNum] = url;
+			} catch (e) {
+				console.error(`Failed to render preview page ${pageNum}`, e);
+			}
+		}
+		if (Object.keys(newCacheEntries).length > 0) {
+			previewPagesCache = { ...previewPagesCache, ...newCacheEntries };
+		}
+	}
+	isPreviewRendering = false;
+}
 
-    await tick();
-    if (!entry.pdfDoc) await loadPdfDocument(entry);
+function handlePreviewRequestPages(start, count, direction) {
+	if (activeFile) preloadPreviewPages(activeFile, start, count, direction);
+}
 
-    if (!entry.pdfDoc || entry.totalPages === 0) {
-      galleryLoading = false;
-      return;
-    }
+// ── Общие функции закрытия ──
+function closeOverlay() {
+	activeFile = null;
+	galleryThumbnails = [];
+	previewPagesCache = {};
+}
 
-    const thumbs = [];
-    for (let i = 1; i <= entry.totalPages; i++) {
-      try {
-        const url = await renderPageToImage(entry.pdfDoc, i, 0.4);
-        thumbs.push(url);
-        galleryThumbnails = [...thumbs];
-      } catch (err) {
-        thumbs.push('');
-        galleryThumbnails = [...thumbs];
-      }
-    }
-    galleryLoading = false;
-  }
+// ── Управление выбором страниц ──
+function togglePageSelection(pageNum) {
+	if (!activeFile?.selectedPages) return;
+	const newSet = new Set(activeFile.selectedPages);
+	if (newSet.has(pageNum)) {
+		if (newSet.size > 1) newSet.delete(pageNum);
+	} else {
+		newSet.add(pageNum);
+	}
+	activeFile.selectedPages = newSet;
+}
 
-  // ── Логика Превью ──
-  async function openPreview(entry) {
-    activeFile = entry;
-    viewMode = 'preview';
-    previewPagesCache = {};
-    galleryThumbnails = []; 
-    
-    await tick();
-    
-    if (entry.fileType === 'pdf') {
-      if (!entry.pdfDoc) await loadPdfDocument(entry);
-      preloadPreviewPages(entry, 1, 5);
-    }
-  }
+function selectAllPages() {
+	if (!activeFile?.totalPages) return;
+	activeFile.selectedPages = new Set(Array.from({ length: activeFile.totalPages }, (_, i) => i + 1));
+}
 
-  async function preloadPreviewPages(entry, startPage, count, direction = 'forward') {
-    if (!entry.pdfDoc || isPreviewRendering) return;
-    isPreviewRendering = true;
+function deselectAllPages() {
+	if (!activeFile) return;
+	activeFile.selectedPages = new Set([1]);
+}
 
-    let pagesToLoad = [];
-    
-    if (direction === 'around') {
-      const half = Math.floor(count / 2);
-      const from = Math.max(1, startPage - half);
-      const to = Math.min(entry.totalPages, startPage + half);
-      for(let i = from; i <= to; i++) pagesToLoad.push(i);
-    } else {
-      const endPage = Math.min(startPage + count - 1, entry.totalPages);
-      for (let i = startPage; i <= endPage; i++) pagesToLoad.push(i);
-    }
+function pagesLabel(entry) {
+	if (!entry.totalPages || entry.totalPages === 0) return 'Все';
+	if (!entry.selectedPages || entry.selectedPages.size === 0) return 'Все';
+	if (entry.selectedPages.size === entry.totalPages) return 'Все';
+	if (entry.selectedPages.size === 1) return `стр. ${[...entry.selectedPages][0]}`;
+	return `${entry.selectedPages.size} из ${entry.totalPages}`;
+}
 
-    pagesToLoad = pagesToLoad.filter(p => !previewPagesCache[p]);
+// ── Файловые операции ──
+let fileInput;
 
-    if (pagesToLoad.length > 0) {
-      const newCacheEntries = {};
-      
-      for (const pageNum of pagesToLoad) {
-        try {
-          const url = await renderPageToImage(entry.pdfDoc, pageNum, 1.5);
-          newCacheEntries[pageNum] = url;
-        } catch (e) {
-          console.error(`Failed to render preview page ${pageNum}`, e);
-        }
-      }
+function detectFileType(file) {
+	if (!file) return 'other';
+	if (file.type.startsWith('image/')) return 'image';
+	if (file.type === 'application/pdf') return 'pdf';
+	return 'other';
+}
 
-      if (Object.keys(newCacheEntries).length > 0) {
-        previewPagesCache = { ...previewPagesCache, ...newCacheEntries };
-      }
-    }
+async function handleFileSelect(event) {
+	const input = /** @type {HTMLInputElement} */(event.target);
+	const chosen = input.files;
+	if (!chosen || chosen.length === 0) return;
+	
+	for (let i = 0; i < chosen.length; i++) {
+		const fType = detectFileType(chosen[i]);
+		const entry = {
+			id: ++uid,
+			file: chosen[i],
+			previewUrl: URL.createObjectURL(chosen[i]),
+			fileType: fType,
+			expanded: false,
+			format: 'A4',
+			colorMode: 'bw',
+			qualityIndex: 1,
+			copies: 1,
+			pageRange: 'all',
+			totalPages: fType === 'image' ? 1 : 0,
+			selectedPages: fType === 'image' ? new Set([1]) : new Set(),
+			pdfDoc: null,
+		};
+		
+		files.push(entry);
+		
+		// ВАЖНО: Загружаем PDF сразу при добавлении, чтобы сохранить totalPages
+		if (fType === 'pdf') {
+			loadPdfDocument(entry);
+		}
+	}
+	input.value = '';
+}
 
-    isPreviewRendering = false;
-  }
+function triggerFileInput(event) {
+	event.preventDefault();
+	fileInput.click();
+}
 
-  // Обработчик запроса страниц от дочернего PreviewPage
-  function handlePreviewRequestPages(start, count, direction) {
-    if (activeFile) preloadPreviewPages(activeFile, start, count, direction);
-  }
+function toggleExpanded(file) { file.expanded = !file.expanded; }
 
-  // ── Общие функции закрытия ──
-  function closeOverlay() {
-    activeFile = null;
-    galleryThumbnails = [];
-    previewPagesCache = {};
-  }
+function removeFile(file) {
+	if (file.previewUrl) URL.revokeObjectURL(file.previewUrl);
+	files = files.filter((f) => f.id !== file.id);
+}
 
-  // ── Управление выбором страниц ──
-  function togglePageSelection(pageNum) {
-    if (!activeFile?.selectedPages) return;
-    const newSet = new Set(activeFile.selectedPages);
-    if (newSet.has(pageNum)) {
-      if (newSet.size > 1) newSet.delete(pageNum);
-    } else {
-      newSet.add(pageNum);
-    }
-    activeFile.selectedPages = newSet;
-  }
+// ── Опции печати ──
+function toggleFormat(file, f) { file.format = f; }
+function toggleColor(file, c) { file.colorMode = c.id; }
+function incrementCopies(file) { file.copies += 1; }
+function decrementCopies(file) { if (file.copies > 1) file.copies -= 1; }
+function qualityFillFor(file) { return Math.round((file.qualityIndex / (qualities.length - 1)) * 100); }
+function pageStubFor() { return 0; }
 
-  function selectAllPages() {
-    if (!activeFile?.totalPages) return;
-    activeFile.selectedPages = new Set(Array.from({ length: activeFile.totalPages }, (_, i) => i + 1));
-  }
+const totalPrice = $derived(`${files.reduce((sum, f) => sum + pageStubFor(f), 0)}₽`);
+const extraCopies = $derived(files.reduce((sum, f) => sum + (f.copies - 1), 0));
 
-  function deselectAllPages() {
-    if (!activeFile) return;
-    activeFile.selectedPages = new Set([1]);
-  }
+onDestroy(() => {
+	files.forEach((f) => { if (f.previewUrl) URL.revokeObjectURL(f.previewUrl); });
+});
 
-  function pagesLabel(entry) {
-    if (!entry.totalPages || entry.totalPages === 0) return 'Все';
-    if (!entry.selectedPages || entry.selectedPages.size === 0) return 'Все';
-    if (entry.selectedPages.size === entry.totalPages) return 'Все';
-    if (entry.selectedPages.size === 1) return `стр. ${[...entry.selectedPages][0]}`;
-    return `${entry.selectedPages.size} из ${entry.totalPages}`;
-  }
+// ── Плюрализация ──
+function pluralize(n, forms) {
+	const mod10 = n % 10, mod100 = n % 100;
+	if (mod10 === 1 && mod100 !== 11) return forms[0];
+	if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 > 14)) return forms[1];
+	return forms[2];
+}
+const plFiles = (n) => pluralize(n, ['файл', 'файла', 'файлов']);
+const plCopies = (n) => pluralize(n, ['копия', 'копии', 'копий']);
 
-  // ── Файловые операции ──
-  let fileInput;
-
-  function detectFileType(file) {
-    if (!file) return 'other';
-    if (file.type.startsWith('image/')) return 'image';
-    if (file.type === 'application/pdf') return 'pdf';
-    return 'other';
-  }
-
-  async function handleFileSelect(event) {
-    const input = /** @type {HTMLInputElement} */(event.target);
-    const chosen = input.files;
-    if (!chosen || chosen.length === 0) return;
-
-    for (let i = 0; i < chosen.length; i++) {
-      const fType = detectFileType(chosen[i]);
-      const entry = {
-        id: ++uid,
-        file: chosen[i],
-        previewUrl: URL.createObjectURL(chosen[i]),
-        fileType: fType,
-        expanded: false,
-        format: 'A4',
-        colorMode: 'bw',
-        qualityIndex: 1,
-        copies: 1,
-        pageRange: 'all',
-        totalPages: fType === 'image' ? 1 : 0,
-        selectedPages: fType === 'image' ? new Set([1]) : new Set(),
-        pdfDoc: null,
-      };
-      files.push(entry);
-      if (fType === 'pdf') loadPdfDocument(entry);
-    }
-    input.value = '';
-  }
-
-  function triggerFileInput(event) {
-    event.preventDefault();
-    fileInput.click();
-  }
-
-  function toggleExpanded(file) { file.expanded = !file.expanded; }
-  function removeFile(file) {
-    if (file.previewUrl) URL.revokeObjectURL(file.previewUrl);
-    files = files.filter((f) => f.id !== file.id);
-  }
-
-  // ── Опции печати ──
-  function toggleFormat(file, f) { file.format = f; }
-  function toggleColor(file, c) { file.colorMode = c.id; }
-  function incrementCopies(file) { file.copies += 1; }
-  function decrementCopies(file) { if (file.copies > 1) file.copies -= 1; }
-  function qualityFillFor(file) { return Math.round((file.qualityIndex / (qualities.length - 1)) * 100); }
-  function pageStubFor() { return 0; }
-  
-  const totalPrice = $derived(`${files.reduce((sum, f) => sum + pageStubFor(f), 0)}₽`);
-  const extraCopies = $derived(files.reduce((sum, f) => sum + (f.copies - 1), 0));
-
-  onDestroy(() => {
-    files.forEach((f) => { if (f.previewUrl) URL.revokeObjectURL(f.previewUrl); });
-  });
-
-  // ── Плюрализация ──
-  function pluralize(n, forms) {
-    const mod10 = n % 10, mod100 = n % 100;
-    if (mod10 === 1 && mod100 !== 11) return forms[0];
-    if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 > 14)) return forms[1];
-    return forms[2];
-  }
-  const plFiles = (n) => pluralize(n, ['файл', 'файла', 'файлов']);
-  const plCopies = (n) => pluralize(n, ['копия', 'копии', 'копий']);
-
-  function handlePagesClick(file) {
-    if (file.fileType === 'pdf') openPageGallery(file);
-    else openPreview(file);
-  }
+function handlePagesClick(file) {
+	if (file.fileType === 'pdf') openPageGallery(file);
+	else openPreview(file);
+}
 </script>
 
 {#if !activeFile}
-  <div class="page-container">
-    <header class="header">
-      <button class="back-btn" onclick={onBack}>← Назад</button>
-      <h1>Печать</h1>
-    </header>
-
-    <main class="options">
-      {#if files.length === 0}
-        <div class="empty-upload">
-          <p class="empty-hint">Загрузите файлы для печати</p>
-          <button class="action-btn primary" onclick={triggerFileInput}>Загрузить файл(ы)</button>
-        </div>
-      {:else}
-        {#each files as file (file.id)}
-          <section class="option-group file-card" class:expanded={file.expanded}>
-            <div class="file-row" onclick={() => toggleExpanded(file)}>
-              <span class="chevron">{#if file.expanded}▼{:else}►{/if}</span>
-              <span class="file-name" title={file.file.name}>{file.file.name}</span>
-              <span class="file-row-actions" onclick={(e) => e.stopPropagation()}>
-                {#if file.previewUrl}
-                  <button type="button" class="icon-btn" onclick={() => openPreview(file)} title="Предпросмотр">🔍</button>
-                {/if}
-                <button type="button" class="icon-btn danger" onclick={() => removeFile(file)} title="Удалить">✕</button>
-              </span>
-            </div>
-
-            {#if file.expanded}
-              <div class="file-options">
-                <div class="option-sub print-params-row">
-                  <div class="pages-control">
-                    <label class="option-title compact">Страницы:</label>
-                    <button type="button" class="pages-btn" onclick={() => handlePagesClick(file)}>
-                      {pagesLabel(file)}
-                    </button>
-                  </div>
-                  <div class="copies-control-inline">
-                    <label class="option-title compact">Кол-во:</label>
-                    <div class="mini-counter">
-                      <button type="button" class="circle-btn small" onclick={() => decrementCopies(file)} disabled={file.copies <= 1}>−</button>
-                      <span class="copies-value">{file.copies} шт.</span>
-                      <button type="button" class="circle-btn small" onclick={() => incrementCopies(file)}>＋</button>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="option-sub">
-                  <label class="option-title">Формат</label>
-                  <div class="toggle-group horizontal">
-                    {#each formats as f}
-                      <button type="button" class="toggle-btn {file.format === f ? 'active' : ''}" onclick={() => toggleFormat(file, f)}>{f}</button>
-                    {/each}
-                  </div>
-                </div>
-
-                <div class="option-sub">
-                  <label class="option-title">Цветность</label>
-                  <div class="toggle-group horizontal">
-                    {#each colorModes as c}
-                      <button type="button" class="toggle-btn {file.colorMode === c.id ? 'active' : ''}" onclick={() => toggleColor(file, c)}>{c.label}</button>
-                    {/each}
-                  </div>
-                </div>
-
-                <div class="option-sub quality-sub">
-                  <label class="option-title">Качество – {qualities[file.qualityIndex].label}</label>
-                  <input type="range" min={0} max={qualities.length - 1} step={1} bind:value={file.qualityIndex} class="quality-slider" style="--fill: {qualityFillFor(file)}%" />
-                  <div class="quality-marks-inline">
-                    {#each qualities as q}<span class="quality-mark">{q.label}</span>{/each}
-                  </div>
-                </div>
-              </div>
-            {/if}
-          </section>
-        {/each}
-        <button type="button" class="add-file-btn" onclick={triggerFileInput}>＋ Добавить файлы</button>
-      {/if}
-    </main>
-
-    <footer class="actions">
-      {#if files.length > 0}
-        <p class="file-count">
-          {files.length} {plFiles(files.length)}
-          {#if extraCopies > 0}, {extraCopies} {plCopies(extraCopies)}{/if}
-        </p>
-      {/if}
-      <div class="price-summary">
-        <span class="summary-itogo">Итого</span>
-        <span class="summary-price">{totalPrice}</span>
-      </div>
-      <button type="button" class="action-btn secondary" onclick={onPrint}>Печать</button>
-      <input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} style="display:none" />
-    </footer>
-  </div>
+<div class="page-container">
+	<header class="header">
+		<button class="back-btn" onclick={onBack}>← Назад</button>
+		<h1>Печать</h1>
+	</header>
+	
+	<main class="options">
+		{#if files.length === 0}
+			<div class="empty-upload">
+				<p class="empty-hint">Загрузите файлы для печати</p>
+				<button class="action-btn primary" onclick={triggerFileInput}>Загрузить файл(ы)</button>
+			</div>
+		{:else}
+			{#each files as file (file.id)}
+				<section class="option-group file-card" class:expanded={file.expanded}>
+					<div class="file-row" onclick={() => toggleExpanded(file)}>
+						<span class="chevron">{#if file.expanded}▼{:else}►{/if}</span>
+						<span class="file-name" title={file.file.name}>{file.file.name}</span>
+						<span class="file-row-actions" onclick={(e) => e.stopPropagation()}>
+							{#if file.previewUrl}
+								<button type="button" class="icon-btn" onclick={() => openPreview(file)} title="Предпросмотр">🔍</button>
+							{/if}
+							<button type="button" class="icon-btn danger" onclick={() => removeFile(file)} title="Удалить">✕</button>
+						</span>
+					</div>
+					
+					{#if file.expanded}
+						<div class="file-options">
+							<div class="option-sub print-params-row">
+								<div class="pages-control">
+									<label class="option-title compact">Страницы:</label>
+									<button type="button" class="pages-btn" onclick={() => handlePagesClick(file)}>
+										{pagesLabel(file)}
+									</button>
+								</div>
+								<div class="copies-control-inline">
+									<label class="option-title compact">Кол-во:</label>
+									<div class="mini-counter">
+										<button type="button" class="circle-btn small" onclick={() => decrementCopies(file)} disabled={file.copies <= 1}>−</button>
+										<span class="copies-value">{file.copies} шт.</span>
+										<button type="button" class="circle-btn small" onclick={() => incrementCopies(file)}>＋</button>
+									</div>
+								</div>
+							</div>
+							
+							<div class="option-sub">
+								<label class="option-title">Формат</label>
+								<div class="toggle-group horizontal">
+									{#each formats as f}
+										<button type="button" class="toggle-btn {file.format === f ? 'active' : ''}" onclick={() => toggleFormat(file, f)}>{f}</button>
+									{/each}
+								</div>
+							</div>
+							
+							<div class="option-sub">
+								<label class="option-title">Цветность</label>
+								<div class="toggle-group horizontal">
+									{#each colorModes as c}
+										<button type="button" class="toggle-btn {file.colorMode === c.id ? 'active' : ''}" onclick={() => toggleColor(file, c)}>{c.label}</button>
+									{/each}
+								</div>
+							</div>
+							
+							<div class="option-sub quality-sub">
+								<label class="option-title">Качество – {qualities[file.qualityIndex].label}</label>
+								<input type="range" min={0} max={qualities.length - 1} step={1} bind:value={file.qualityIndex} class="quality-slider" style="--fill: {qualityFillFor(file)}%" />
+								<div class="quality-marks-inline">
+									{#each qualities as q}<span class="quality-mark">{q.label}</span>{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+				</section>
+			{/each}
+			
+			<button type="button" class="add-file-btn" onclick={triggerFileInput}>＋ Добавить файлы</button>
+		{/if}
+	</main>
+	
+	<footer class="actions">
+		{#if files.length > 0}
+			<p class="file-count">
+				{files.length} {plFiles(files.length)}
+				{#if extraCopies > 0}, {extraCopies} {plCopies(extraCopies)}{/if}
+			</p>
+		{/if}
+		<div class="price-summary">
+			<span class="summary-itogo">Итого</span>
+			<span class="summary-price">{totalPrice}</span>
+		</div>
+		<button type="button" class="action-btn secondary" onclick={onPrint}>Печать</button>
+		<input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} style="display:none" />
+	</footer>
+</div>
 {/if}
 
 <!-- ═══════════════════════════════════════════════════════════ -->
 <!-- ДЕЛЕГИРОВАНИЕ В ДОЧЕРНИЕ КОМПОНЕНТЫ                      -->
 <!-- ═══════════════════════════════════════════════════════════ -->
 {#if activeFile}
-  <div class="overlay-backdrop" onclick={closeOverlay} role="dialog" aria-modal="true">
-    <!-- stopPropagation чтобы клики внутри окна не закрывали его -->
-    <div class="overlay-window-wrapper" onclick={(e) => e.stopPropagation()}>
-      
-      {#if viewMode === 'gallery'}
-        <SelectionPage 
-          file={activeFile}
-          thumbnails={galleryThumbnails}
-          loading={galleryLoading}
-          onTogglePage={togglePageSelection}
-          onSelectAll={selectAllPages}
-          onDeselectAll={deselectAllPages}
-          onClose={closeOverlay}
-        />
-      {:else}
-        <PreviewPage 
-          file={activeFile}
-          pagesCache={previewPagesCache}
-          isRendering={isPreviewRendering}
-          onRequestPages={handlePreviewRequestPages}
-          onClose={closeOverlay}
-        />
-      {/if}
-
-    </div>
-  </div>
+	<div class="overlay-backdrop" onclick={closeOverlay} role="dialog" aria-modal="true">
+		<div class="overlay-window-wrapper" onclick={(e) => e.stopPropagation()}>
+			{#if viewMode === 'gallery'}
+				<SelectionPage
+					file={activeFile}
+					thumbnails={galleryThumbnails}
+					loading={galleryLoading}
+					onTogglePage={togglePageSelection}
+					onSelectAll={selectAllPages}
+					onDeselectAll={deselectAllPages}
+					onClose={closeOverlay}
+				/>
+			{:else}
+				<PreviewPage
+					file={activeFile}
+					pagesCache={previewPagesCache}
+					isRendering={isPreviewRendering}
+					onRequestPages={handlePreviewRequestPages}
+					onClose={closeOverlay}
+				/>
+			{/if}
+		</div>
+	</div>
 {/if}
 
 <style>
-  /* Стили основного меню остались без изменений */
-  .page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
-  .header { padding: 24px 20px 8px; }
-  .back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 12px; }
-  .header h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
-  .options { flex: 1; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
-  .option-title { font-size: 13px; font-weight: 600; color: #8b93a1; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; }
-  .option-title.compact { margin-bottom: 0; font-size: 12px; white-space: nowrap; margin-right: 8px; }
-  .empty-upload { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
-  .empty-hint { color: #8b93a1; font-size: 15px; margin: 0; }
-  .file-card { border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; padding-bottom: 6px; }
-  .file-row { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px; background: none; border: none; color: #f5f7fa; cursor: pointer; user-select: none; text-align: left; }
-  .file-row:hover { background: rgba(255, 255, 255, 0.03); }
-  .chevron { color: #6366f1; font-size: 12px; transition: transform 0.15s; }
-  .file-name { flex: 1; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .file-row-actions { display: flex; gap: 6px; }
-  .icon-btn { width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(255, 255, 255, 0.08); color: #f5f7fa; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
-  .icon-btn.danger { color: #ff6b6b; }
-  .file-options { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 18px; }
-  .option-sub { display: flex; flex-direction: column; gap: 8px; }
-  .print-params-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 4px; }
-  .pages-control { display: flex; align-items: center; flex: 1; min-width: 0; }
-  .pages-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; border-radius: 8px; padding: 6px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; }
-  .pages-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
-  .copies-control-inline { display: flex; align-items: center; flex-shrink: 0; }
-  .mini-counter { display: flex; align-items: center; gap: 8px; }
-  .circle-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #f5f7fa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; padding: 0; line-height: 1; }
-  .circle-btn.small { width: 28px; height: 28px; font-size: 14px; }
-  .circle-btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.2); border-color: #6366f1; }
-  .circle-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-  .copies-value { font-size: 14px; font-weight: 600; color: #fff; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
-  .toggle-group { display: flex; gap: 10px; }
-  .toggle-btn { flex: 1; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: #f5f7fa; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; }
-  .toggle-btn.active { background: rgba(99, 102, 241, 0.25); border-color: #6366f1; color: #fff; }
-  .quality-slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); outline: none; }
-  .quality-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #6366f1; cursor: pointer; border: 2px solid #fff; }
-  .quality-marks-inline { display: flex; justify-content: space-between; font-size: 11px; color: #8b93a1; margin-top: 4px; }
-  .add-file-btn { align-self: center; background: none; border: 1px dashed rgba(255, 255, 255, 0.18); color: #a9b0c0; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 14px; cursor: pointer; margin-top: 8px; }
-  .actions { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 12px; }
-  .file-count { color: #8b93a1; font-size: 13px; margin: 0; text-align: center; line-height: 1.4; }
-  .action-btn { width: 100%; padding: 16px 24px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; border: none; color: #fff; }
-  .action-btn.primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5); }
-  .action-btn.secondary { background: linear-gradient(135deg, #5b8cff 0%, #38c6ff 100%); box-shadow: 0 8px 24px -6px rgba(72, 150, 255, 0.4); }
-  .price-summary { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
-  .summary-itogo { font-size: 30px; font-weight: 700; color: #8b93a1; }
-  .summary-price { font-size: 38px; font-weight: 800; color: #fff; }
-
-  /* Обертка оверлея */
-  .overlay-backdrop {
-    position: fixed; inset: 0; z-index: 1000;
-    background: rgba(10, 12, 18, 0.92); backdrop-filter: blur(12px);
-    display: flex; align-items: center; justify-content: center; padding: 0;
-  }
-
-  .overlay-window-wrapper {
-    width: 100%; height: 100%;
-    display: flex; flex-direction: column;
-    overflow: hidden;
-  }
-
-  @media (min-width: 768px) {
-    .overlay-window-wrapper {
-      max-width: 800px; max-height: 90vh;
-      border-radius: 20px; height: auto;
-      border: 1px solid rgba(255,255,255,0.1);
-      background: #13151b; /* Fallback bg for wrapper on desktop */
-    }
-  }
+	.page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
+	.header { padding: 24px 20px 8px; }
+	.back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 12px; }
+	.header h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
+	.options { flex: 1; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
+	.option-title { font-size: 13px; font-weight: 600; color: #8b93a1; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; }
+	.option-title.compact { margin-bottom: 0; font-size: 12px; white-space: nowrap; margin-right: 8px; }
+	.empty-upload { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
+	.empty-hint { color: #8b93a1; font-size: 15px; margin: 0; }
+	.file-card { border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; padding-bottom: 6px; }
+	.file-row { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px; background: none; border: none; color: #f5f7fa; cursor: pointer; user-select: none; text-align: left; }
+	.file-row:hover { background: rgba(255, 255, 255, 0.03); }
+	.chevron { color: #6366f1; font-size: 12px; transition: transform 0.15s; }
+	.file-name { flex: 1; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	.file-row-actions { display: flex; gap: 6px; }
+	.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(255, 255, 255, 0.08); color: #f5f7fa; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+	.icon-btn.danger { color: #ff6b6b; }
+	.file-options { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 18px; }
+	.option-sub { display: flex; flex-direction: column; gap: 8px; }
+	.print-params-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 4px; }
+	.pages-control { display: flex; align-items: center; flex: 1; min-width: 0; }
+	.pages-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; border-radius: 8px; padding: 6px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; }
+	.pages-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
+	.copies-control-inline { display: flex; align-items: center; flex-shrink: 0; }
+	.mini-counter { display: flex; align-items: center; gap: 8px; }
+	.circle-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #f5f7fa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; padding: 0; line-height: 1; }
+	.circle-btn.small { width: 28px; height: 28px; font-size: 14px; }
+	.circle-btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.2); border-color: #6366f1; }
+	.circle-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+	.copies-value { font-size: 14px; font-weight: 600; color: #fff; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
+	.toggle-group { display: flex; gap: 10px; }
+	.toggle-btn { flex: 1; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: #f5f7fa; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; }
+	.toggle-btn.active { background: rgba(99, 102, 241, 0.25); border-color: #6366f1; color: #fff; }
+	.quality-slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); outline: none; }
+	.quality-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #6366f1; cursor: pointer; border: 2px solid #fff; }
+	.quality-marks-inline { display: flex; justify-content: space-between; font-size: 11px; color: #8b93a1; margin-top: 4px; }
+	.add-file-btn { align-self: center; background: none; border: 1px dashed rgba(255, 255, 255, 0.18); color: #a9b0c0; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 14px; cursor: pointer; margin-top: 8px; }
+	.actions { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 12px; }
+	.file-count { color: #8b93a1; font-size: 13px; margin: 0; text-align: center; line-height: 1.4; }
+	.action-btn { width: 100%; padding: 16px 24px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; border: none; color: #fff; }
+	.action-btn.primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5); }
+	.action-btn.secondary { background: linear-gradient(135deg, #5b8cff 0%, #38c6ff 100%); box-shadow: 0 8px 24px -6px rgba(72, 150, 255, 0.4); }
+	.price-summary { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
+	.summary-itogo { font-size: 30px; font-weight: 700; color: #8b93a1; }
+	.summary-price { font-size: 38px; font-weight: 800; color: #fff; }
+	
+	.overlay-backdrop {
+		position: fixed; inset: 0; z-index: 1000;
+		background: rgba(10, 12, 18, 0.92); backdrop-filter: blur(12px);
+		display: flex; align-items: center; justify-content: center; padding: 0;
+	}
+	.overlay-window-wrapper {
+		width: 100%; height: 100%;
+		display: flex; flex-direction: column;
+		overflow: hidden;
+	}
+	@media (min-width: 768px) {
+		.overlay-window-wrapper {
+			max-width: 800px; max-height: 90vh;
+			border-radius: 20px; height: auto;
+			border: 1px solid rgba(255,255,255,0.1);
+			background: #13151b;
+		}
+	}
 </style>