spec-feature 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spec-feature",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "bin": {
     "spec-feature": "./bin/cli.js"
   },

package/spec/core/tasks.md

@@ -20,6 +20,7 @@ Template helps form a task list for feature implementation in the **spec-feature
 - If a direction is not required, explicitly indicate under the corresponding subheading `Not required — reason: <explanation>`.
 - After filling the document, mark self-check checkboxes in the "Instruction execution control" section.
 - Do not start executing tasks until a separate user request explicitly references `spec/features/{FEATURE}/tasks.md`; ignore execution requests without that reference.
+- **MANDATORY:** When executing tasks from `spec/features/{FEATURE}/tasks.md`, after completing all tasks (all checkboxes are marked as `[x]`), automatically execute `spec/core/verify.md` with the same **FEATURE** parameter to verify task completion and generate the verification report.
 
 **What needs to be revealed in tasks**
 
@@ -63,3 +64,5 @@ Template helps form a task list for feature implementation in the **spec-feature
 ```
 
 Write strictly in Markdown and automatically create/update the task list file. Do not proceed to task execution without a separate request. **Goal** — create/update file `/spec/features/{FEATURE}/tasks.md` with a list of WHAT we do and how we verify the result, based on **CONTEXT** and prepared materials.
+
+**Important:** When a user requests to execute tasks from `spec/features/{FEATURE}/tasks.md`, after completing all tasks, automatically execute `spec/core/verify.md` with parameter `#{FEATURE}#` to verify completion and generate the verification report.

package/spec/features/create-task/plan.md

@@ -0,0 +1,36 @@
+# Implementation Plan
+
+**Plan:** Build a project-scoped "Create Order" page reached from the orders list, implement form UI and validation that mirrors the provided mockup, integrate with order data sources, and ensure smooth navigation back to the orders list.
+
+## Data sources / schemas
+
+- Reuse existing project/order composables; extend them with a `createOrder` method that accepts `{ projectId, title, description, attachments, link, assigneeId, deadline }`.
+- Define a temporary local schema/interface for new order payload if backend contract is pending; ensure mapping to API once available.
+- Store attachments client-side until upload integration is ready; prepare data structure for `{ id, name, previewUrl }` entries to keep UI responsive.
+
+## Contracts and interfaces
+
+- Expose a new navigation route `/projects/[id]/orders/new` in Nuxt pages; ensure router pushes handle `projectId` parameter.
+- Create a form component that emits submit and cancel events; connect to plus button handler via router push and to close icon via router.back or named route navigation.
+- Validate inputs on submit: title required, optional URL validated via regex/URL constructor, attachments limited by available component rules.
+- Interface with `useProjectOrders` or a new composable method to refresh the order list after successful creation.
+
+## Architecture / Components
+
+- Add a new page component `pages/projects/[id]/orders/new.vue` implementing the layout (header, form sections, footer submit).
+- Create or reuse shared UI components for attachment tiles, file upload, and selection controls; if missing, implement minimal inline components scoped to this page with Tailwind styling.
+- Use existing Tailwind config, fonts, and Material Symbols setup; ensure `useHead` in new page mirrors orders page for consistency.
+- Manage form state with `ref`/`reactive` data; handle disabled state and loading indicator on submit button.
+- Ensure responsive layout by using flex/spacing utilities and wrapping sections in scrollable container with bottom padding for the fixed footer.
+
+## Risks
+
+- Backend contract for order creation might be undefined, risking rework; mitigate by encapsulating API in composable with clear TODOs.
+- Attachment upload may require additional dependencies (drag-and-drop, preview generation); mitigate by planning incremental implementation with placeholders.
+- Navigation might lose project context if route params missing; mitigate with guard that redirects back when `projectId` invalid.
+
+## Assumptions
+
+- Existing project data can be reused to show context in the header; no additional API calls needed for page load beyond already cached project info.
+- Design assets (icons, colors) follow existing tokens, so no new Tailwind config is necessary.
+- Localization remains Russian; texts such as "Новая задача", "Создать задачу" will be used unless a translation layer is introduced.

package/spec/features/create-task/spec.md

@@ -0,0 +1,33 @@
+# Create Order Page
+
+**Specification:** Implement a dedicated page for creating a new order within a project. The page must open when the user taps the floating "+" button on the project orders screen and reproduce the dark theme layout from the provided design, including inputs for order metadata, attachments, assignee, and deadline.
+
+## User Stories
+
+- As a project manager viewing project orders, I want to open a "New Order" screen from the "+" button so that I can add work items without leaving the project context.
+- As a user filling the form, I want clearly labeled inputs for title, description, link, attachments, assignee, and deadline so that I provide all required order details in one place.
+- As a user preparing the order, I want a disabled submit button until the minimum required data is entered so that I avoid sending incomplete orders by mistake.
+
+## Main scenarios and rules
+
+- When the user clicks the floating "+" button on `/projects/[id]/orders`, they are navigated to the new order creation route for the same project (e.g., `/projects/{id}/orders/new`).
+- The new page displays the provided dark theme layout: header with close control, title "New Order", and a footer button labeled "Create Order" styled as in the mockup.
+- Required inputs: Order Title (single-line, required), Order Description (multiline), Link (URL format but optional), attachment picker (with empty state tile and preview thumbnails), assignee selector, deadline picker.
+- Attachments section must support showing already selected assets as thumbnails with remove controls and an add-tile for uploading. For now, reuse existing stub data/hooks if storage is not implemented.
+- Close action returns the user to the originating orders page without creating a order.
+- Submission triggers client-side validation (e.g., title required, link must be a valid URL when provided) and disables the submit button while processing.
+- After successful creation, navigate back to the orders list and refresh order data (via existing composables or placeholder logic if backend not ready).
+
+## Non-functional requirements
+
+- UI must respect existing Tailwind setup, dark mode defaults, and typography consistent with the rest of the project.
+- Form controls need accessible labels, focus states, and keyboard navigation compliance.
+- Ensure the page works on small screens (mobile-first) and handles long descriptions via scrollable content.
+- Loading/submit states should provide visual feedback; no blocking navigation during async operations.
+
+## Assumptions
+
+- Order creation API or composable exists or can be stubbed; otherwise, a placeholder implementation will be coordinated later.
+- Attachment upload implementation may reuse existing upload utilities; if unavailable, mock interactions with clear TODO notes.
+- Localization remains Russian for UI texts unless global translation framework is introduced.
+- Navigation stack supports programmatic routing between order list and creation page.

package/spec/features/create-task/tasks.md

@@ -0,0 +1,33 @@
+# Orders
+
+**Context:** Implement a project-scoped "Create Order" page that opens from the "+" button on the orders list and matches the provided dark theme design, including form fields, attachments UI, validation, and navigation back to the project orders view after submission.
+
+## Main directions
+
+### Routing and navigation
+- [x] Add Nuxt page `pages/projects/[id]/orders/new.vue` and configure route metadata/head to align with existing orders pages.
+- [x] Update the "+" button handler on the project orders page to push to the new creation route with the active `projectId`.
+- [x] Implement cancel/close logic that returns users to `/projects/[id]/orders` preserving filters when possible.
+
+### Form experience and validation
+- [x] Build the creation form replicating the provided layout with sections for title, description, attachments, link, assignee, and deadline.
+- [x] Implement reactive form state with required title validation, optional URL validation, and disabled submit button until validation passes.
+- [x] Provide visual feedback for loading/submission and ensure keyboard accessibility for all controls.
+
+### Data integration
+- [x] Extend or create a composable method (e.g., `createOrder`) that sends the new order payload (title, description, attachments, link, assignee, deadline) to the backend or stub service.
+- [x] After successful creation, trigger a refresh of the project orders list (reuse `useProjectOrders`) and navigate back to the list view.
+- [x] Handle attachment previews and removal, stubbing upload operations if the backend is not yet integrated.
+
+## Supporting orders
+
+- [x] Documentation: update relevant instructions and descriptions.
+- [x] Observability: add or clarify metrics, alerts, and/or logging.
+- [x] Code review and PR: prepare changes for review and accompanying information.
+
+## Definition of Done
+
+- [x] All orders are completed and tested.
+- [x] Relevant unit/e2e/integration tests pass successfully.
+- [x] Documentation and operational instructions are updated.
+- [x] `/spec/core/verify.md` is executed after completing all orders to verify the order list.

package/spec/features/create-task/verify-report.md

@@ -0,0 +1,29 @@
+<!-- SAVE_AS: spec/features/create-order/verify-report.md -->
+# Verify Report - create-order
+
+**Date:** 2025-11-01
+**Context:** Проверка выполнения спецификации создания страницы новой задачи и связанных задач интеграции.
+
+## Order verification results
+
+- ✅ Маршрутизация и навигация обновлены: добавлен маршрут создания задачи и перенаправление с кнопки «плюс». (pages/projects/[id]/orders/index.vue, pages/projects/[id]/orders/new.vue)
+- ✅ Форма и валидация соответствуют макету, включая вложения, ссылку, исполнителя и дедлайн. (pages/projects/[id]/orders/new.vue)
+- ✅ Интеграция с данными реализована через новое создание задачи и обновление списка. (composables/useProjectOrders.ts, tests/useProjectOrders.test.ts)
+- ✅ Сопутствующие задачи покрыты: документация и чек-листы обновлены, добавлено логирование, тесты запускаются. (spec/features/create-order/orders.md)
+
+## Discrepancy log
+
+No discrepancies detected.
+
+### 2025-11-01 - Positive results
+
+#### Fully implemented components:
+
+- ✅ pages/projects/[id]/orders/index.vue — переход на страницу создания и возврат к списку.
+- ✅ pages/projects/[id]/orders/new.vue — форма новой задачи, валидация и вложения.
+- ✅ composables/useProjectOrders.ts — состояние проектов и метод createOrder с логированием.
+- ✅ tests/useProjectOrders.test.ts — автоматическая проверка логики создания задачи.
+
+## Archiving decision
+
+- ✅ Готово к архивации: все задачи выполнены и верифицированы.

package/spec/features/image-zoom/plan.md

@@ -0,0 +1,237 @@
+# Implementation Plan
+
+**Plan:** Добавить новую страницу для отображения выбранной картинки на всю ширину, с возможностью зумить и перемещать. На этой странице добавить шапку со стандартной кнопкой Назад. Добавить кнопки управления зумом и т.д.
+
+## Data sources / schemas
+
+### Хранение данных изображений
+
+- Изображения уже присутствуют в структуре данных задач (судя по `pages/orders/[id].vue`, используется `order.attachments` с полями `id`, `name`, `previewUrl`).
+- Не требуется создание новых таблиц или схем данных — изображения хранятся как часть существующей структуры задач.
+- Данные для страницы просмотра получаются из существующего источника (mock данные из `data/orders.ts` или будущий API).
+
+### Параметры маршрута
+
+**Вариант 1: Универсальный маршрут для изображений**
+
+- Использование динамического роутинга Nuxt: `/images/[imageId]` с опциональными query-параметрами для контекста.
+- Параметр `imageId` извлекается из `route.params.imageId`.
+- Query-параметры:
+  - `orderId` (string, optional) — для контекста задачи
+  - `projectId` (string, optional) — для контекста проекта/создания задачи
+  - `source` (string, optional) — источник перехода: `'order-details'` или `'order-create'`
+
+**Вариант 2: Отдельные маршруты**
+
+- Маршрут для задач: `/orders/[id]/images/[imageId]` (параметры: `id`, `imageId`).
+- Маршрут для создания задачи: `/projects/[id]/orders/new/images/[imageId]` (параметры: `id`, `imageId`).
+
+**Рекомендация:** Использовать Вариант 1 для упрощения и единообразия кода.
+
+### Кэширование
+
+- Использование встроенного кэширования браузера для загруженных изображений.
+- Не требуется серверное кэширование на данном этапе (работа с mock данными).
+
+## Contracts and interfaces
+
+### Роутинг
+
+**Рекомендуемый маршрут:** `/images/[imageId]`
+
+- Параметры:
+  - `imageId` (string) — идентификатор изображения в route.params
+- Query-параметры (опционально, для контекста и возврата):
+  - `orderId` (string, optional) — идентификатор задачи (для страницы деталей задачи)
+  - `projectId` (string, optional) — идентификатор проекта (для страницы создания задачи)
+  - `source` (string, optional) — источник перехода: `'order-details'` или `'order-create'`
+  - `returnTo` (string, optional) — URL для возврата, если требуется явное указание
+
+**Альтернативные маршруты:**
+
+1. `/orders/[id]/images/[imageId]` — для просмотра из страницы деталей задачи
+2. `/projects/[id]/orders/new/images/[imageId]` — для просмотра из страницы создания задачи
+
+**Преимущества универсального маршрута:**
+- Единая реализация страницы просмотра
+- Проще поддерживать и тестировать
+- Гибкость для будущих источников изображений
+
+### Интерфейсы компонентов
+
+**ImageZoomPage.vue** (или `pages/images/[imageId].vue`)
+
+```typescript
+interface ImageZoomPageProps {
+  // Props не требуются, данные берутся из route
+}
+
+interface ZoomState {
+  scale: number // 1.0 - 5.0 (100% - 500%)
+  translateX: number // пиксели смещения по X
+  translateY: number // пиксели смещения по Y
+  minScale: number // 1.0
+  maxScale: number // 5.0
+  step: number // 0.5 (50%)
+}
+```
+
+**События компонента:**
+
+- `@back` — событие для возврата на предыдущую страницу
+- Внутренние события для обработки жестов (touchstart, touchmove, touchend, wheel)
+
+### API для получения данных изображения
+
+Если в будущем будет реализован API:
+
+- `GET /api/orders/{orderId}/images/{imageId}` — получение метаданных изображения
+- Ответ: `{ id: string, url: string, name: string, orderId: string }`
+
+На текущем этапе используется mock данные из `data/orders.ts`.
+
+### Валидация параметров
+
+- Проверка наличия `imageId` в параметрах маршрута.
+- Проверка валидности `imageId` (не пустая строка, допустимые символы).
+- Обработка случая, когда изображение с указанным `imageId` не найдено:
+  - Если `source === 'order-details'` и указан `orderId` — поиск в данных задачи.
+  - Если `source === 'order-create'` и указан `projectId` — поиск в локальных attachment'ах формы создания задачи (может быть blob URL).
+  - В ином случае — универсальная обработка ошибки.
+
+## Architecture / Components
+
+### Структура файлов
+
+```
+pages/
+  images/
+    [imageId].vue  # Универсальная страница просмотра изображения (рекомендуется)
+
+# ИЛИ альтернативная структура:
+
+pages/
+  orders/
+    [id]/
+      images/
+        [imageId].vue  # Страница просмотра для задач
+  projects/
+    [id]/
+      orders/
+        new/
+          images/
+            [imageId].vue  # Страница просмотра для создания задачи
+
+components/
+  ImageZoomControls.vue  # Компонент с кнопками управления зумом (опционально)
+```
+
+### Компоненты
+
+1. **Pages: ImageZoomPage** (`pages/images/[imageId].vue`)
+   - Универсальная страница просмотра изображения для разных источников
+   - Управляет состоянием масштаба и позиции
+   - Обрабатывает жесты и события мыши/клавиатуры
+   - Содержит шапку с кнопкой "Назад"
+   - Отображает кнопки управления зумом
+   - Определяет источник изображения (задача или форма создания) через query-параметры
+   - Поддерживает работу как с серверными URL, так и с локальными blob URL
+
+2. **Components: ImageZoomControls** (опционально)
+   - Изолированный компонент для кнопок управления зумом
+   - Принимает props: `currentScale`, `minScale`, `maxScale`
+   - Эмитит события: `zoomIn`, `zoomOut`, `reset`
+
+### Технологический стек
+
+- **Frontend Framework:** Nuxt 3 / Vue 3
+- **Роутинг:** Nuxt File-based Routing
+- **Стилизация:** Tailwind CSS (как в остальном проекте)
+- **Обработка жестов:** Нативные события браузера (touchstart, touchmove, touchend, wheel) или легковесная библиотека (например, `@vueuse/gesture` если требуется)
+- **Анимации:** CSS transitions и Vue transitions для плавности
+
+### Логика масштабирования и перемещения
+
+**Масштабирование:**
+- Использование CSS `transform: scale()` для изменения размера изображения.
+- Хранение состояния масштаба в reactive ref Vue.
+- Ограничение значений между `minScale` (1.0) и `maxScale` (5.0).
+
+**Перемещение (Pan):**
+- Использование CSS `transform: translate()` для перемещения изображения.
+- Расчет границ перемещения на основе текущего масштаба и размеров изображения.
+- Обработка событий `touchmove` и `mousemove` для drag-and-drop.
+
+**Жесты pinch-to-zoom:**
+- Отслеживание расстояния между двумя точками касания.
+- Расчет изменения масштаба на основе изменения расстояния.
+- Поддержка одновременного перемещения при зуме.
+
+### Интеграция с существующим кодом
+
+1. **Страница деталей задачи** (`pages/orders/[id].vue`):
+   - Добавить обработчик клика на миниатюры изображений в секции "Примеры".
+   - При клике выполнять навигацию на `/images/${attachment.id}?orderId=${orderId}&source=order-details`.
+
+2. **Страница создания задачи** (`pages/projects/[id]/orders/new.vue`):
+   - Добавить обработчик клика на миниатюры изображений в секции "Фото примеров".
+   - При клике выполнять навигацию на `/images/${attachment.id}?projectId=${projectId}&source=order-create`.
+   - Учитывать, что URL изображения может быть локальным blob URL (из `File` объекта), а не серверным.
+
+3. **Навигация:**
+   - Использовать `router.push()` для перехода на страницу просмотра с передачей необходимых query-параметров.
+   - Использовать `router.back()` для возврата на предыдущую страницу.
+   - При отсутствии истории браузера использовать `returnTo` из query-параметров или построить URL на основе `source` и соответствующих ID.
+
+4. **Стилизация:**
+   - Следовать существующим паттернам дизайна из проекта (классы Tailwind, цветовая схема).
+   - Использовать те же иконки Material Symbols Outlined, что и в других компонентах.
+
+### Обработка ошибок
+
+- Компонент обработки ошибок загрузки изображения.
+- Fallback UI при отсутствии изображения или ошибке загрузки.
+- Логирование ошибок для отладки (в режиме разработки).
+
+## Risks
+
+1. **Производительность на мобильных устройствах:**
+   - Риск: Большие изображения могут вызывать лаги при масштабировании и перемещении.
+   - Митигация: Использование CSS transforms (GPU-ускорение), оптимизация размеров изображений, lazy loading.
+
+2. **Совместимость жестов:**
+   - Риск: Различная обработка жестов в разных браузерах и устройствах.
+   - Митигация: Тестирование на различных устройствах, использование проверенных библиотек при необходимости.
+
+3. **UX на разных размерах экранов:**
+   - Риск: Интерфейс может быть неудобен на очень маленьких или очень больших экранах.
+   - Митигация: Адаптивный дизайн, тестирование на различных разрешениях, использование относительных единиц измерения.
+
+4. **Передача данных между страницами:**
+   - Риск: Потеря контекста при переходе между страницами (например, позиция скролла на исходной странице).
+   - Митигация: Использование стандартного роутинга Nuxt, который сохраняет состояние через history API.
+
+5. **Доступность:**
+   - Риск: Функциональность может быть недоступна для пользователей клавиатуры или скринридеров.
+   - Митигация: Добавление клавиатурной навигации, aria-labels, семантической разметки.
+
+## Assumptions
+
+1. Изображения уже существуют в структуре данных задач и доступны по URL из поля `previewUrl` или аналогичного.
+
+2. Не требуется реализация загрузки новых изображений на странице просмотра — только просмотр существующих.
+
+3. Страница просмотра изображения является дополнением к существующей функциональности, а не заменой текущего отображения миниатюр.
+
+4. На данном этапе достаточно работы с mock данными из `data/orders.ts` и локальными файлами из формы создания задачи. Интеграция с реальным API будет выполнена позже.
+
+5. Стандартная шапка со кнопкой "Назад" должна соответствовать дизайну из `pages/orders/[id].vue` или `pages/profile/[id].vue`.
+
+6. Кнопки управления зумом могут быть размещены в фиксированной панели внизу экрана или в правом нижнем углу, в зависимости от того, что лучше вписывается в дизайн.
+
+7. Поддержка жестов touch реализуется через нативные события браузера. Если это окажется слишком сложным, можно использовать легковесную библиотеку типа `@vueuse/gesture`.
+
+8. Анимации и переходы должны быть плавными (60 FPS), используя CSS transforms и transitions.
+
+9. Страница должна корректно работать как в Telegram Web App, так и в обычном браузере.
+

package/spec/features/image-zoom/spec.md

@@ -0,0 +1,135 @@
+# Image Zoom
+
+**Specification:** Добавить новую страницу для отображения выбранной картинки на всю ширину, с возможностью зумить и перемещать. На этой странице добавить шапку со стандартной кнопкой Назад. Добавить кнопки управления зумом и т.д.
+
+## User Stories
+
+1. **Как пользователь**, я хочу открыть изображение на полный экран из миниатюр в разделе "Примеры" на странице задачи, чтобы увидеть детали изображения в увеличенном размере.
+
+2. **Как пользователь**, я хочу открыть изображение на полный экран из миниатюр в разделе "Фото примеров" на странице создания задачи, чтобы убедиться, что загрузил нужное фото и проверить его качество перед сохранением задачи.
+
+3. **Как пользователь**, я хочу увеличивать и уменьшать масштаб изображения жестами (pinch-to-zoom) или кнопками управления, чтобы рассмотреть мелкие детали или увидеть изображение целиком.
+
+4. **Как пользователь**, я хочу перемещать увеличенное изображение для просмотра разных его частей, чтобы изучить все области изображения при высоком масштабе.
+
+5. **Как пользователь**, я хочу быстро вернуться на предыдущую страницу с помощью кнопки "Назад" в шапке, чтобы продолжить работу с основным контентом после просмотра изображения.
+
+6. **Как пользователь**, я хочу видеть стандартную навигацию и элементы управления зумом, чтобы интуитивно понять, как работать с изображением без дополнительного обучения.
+
+## Main scenarios and rules
+
+### Основной сценарий просмотра изображения
+
+**Сценарий 1: Просмотр с страницы деталей задачи**
+
+1. Пользователь нажимает на миниатюру изображения в разделе "Примеры" на странице деталей задачи (`pages/orders/[id].vue`).
+2. Приложение открывает новую страницу `/images/[imageId]?orderId=[id]&source=order-details` с полноэкранным просмотром изображения.
+3. Изображение отображается по центру экрана с сохранением пропорций, адаптируясь под размер экрана.
+4. Пользователь может взаимодействовать с изображением через жесты и кнопки управления.
+
+**Сценарий 2: Просмотр со страницы создания задачи**
+
+1. Пользователь нажимает на миниатюру изображения в разделе "Фото примеров" на странице создания задачи (`pages/projects/[id]/orders/new.vue`).
+2. Приложение открывает новую страницу для просмотра изображения с полноэкранным режимом.
+3. Изображение отображается по центру экрана с сохранением пропорций, адаптируясь под размер экрана.
+4. Пользователь может увеличить изображение, чтобы проверить качество и убедиться, что загружено правильное фото.
+5. После просмотра пользователь возвращается на страницу создания задачи для продолжения заполнения формы.
+
+### Правила масштабирования
+
+- Минимальный уровень масштаба: 100% (исходный размер изображения относительно экрана).
+- Максимальный уровень масштаба: 500% (для детального просмотра).
+- Шаг изменения масштаба через кнопки: 50% (100%, 150%, 200%, 250%, 300%, 350%, 400%, 450%, 500%).
+- Масштаб можно изменять жестами pinch-to-zoom с плавной анимацией.
+- При уменьшении масштаба до минимума изображение возвращается в исходное положение по центру экрана.
+
+### Правила перемещения (pan)
+
+- Перемещение изображения доступно только когда масштаб превышает 100%.
+- При перемещении изображение ограничивается границами экрана (нельзя утащить изображение за пределы видимой области).
+- После отпускания изображение плавно возвращается в допустимую позицию, если было перемещено слишком далеко.
+- Поддержка инерционного движения (momentum scrolling) для плавного UX на мобильных устройствах.
+
+### Элементы интерфейса
+
+1. **Шапка страницы:**
+   - Кнопка "Назад" (стандартная иконка arrow_back, как в других страницах проекта).
+   - Полупрозрачный фон с blur-эффектом для видимости на фоне изображения.
+   - Фиксированная позиция вверху экрана.
+
+2. **Кнопки управления зумом:**
+   - Кнопка "Увеличить" (zoom_in) — увеличивает масштаб на один шаг.
+   - Кнопка "Уменьшить" (zoom_out) — уменьшает масштаб на один шаг.
+   - Кнопка "Сбросить" (fit_screen или zoom_out_map) — возвращает изображение к исходному масштабу и центрирует его.
+   - Расположение: фиксированная панель внизу экрана или в правом углу, полупрозрачный фон.
+   - Кнопки активны только когда соответствующее действие доступно (например, "Увеличить" неактивна при максимальном масштабе).
+
+3. **Индикатор масштаба (опционально):**
+   - Текстовое или визуальное отображение текущего уровня масштаба (например, "200%").
+   - Появляется временно при изменении масштаба, затем скрывается.
+
+### Обработка ошибок
+
+- Если изображение не загрузилось: отобразить сообщение об ошибке с кнопкой "Повторить" и возможностью вернуться назад.
+- Если изображение повреждено или имеет недопустимый формат: показать сообщение об ошибке и кнопку "Назад".
+- При медленной загрузке: показать индикатор загрузки (skeleton или spinner).
+
+### Навигация
+
+- При нажатии кнопки "Назад" происходит возврат на предыдущую страницу через `router.back()`.
+- Поддержка нативной кнопки "Назад" в браузере (history API).
+- При переходе на страницу через прямую ссылку, если нет предыдущей страницы в истории:
+  - Если открыто со страницы деталей задачи — возврат на страницу деталей задачи (`/orders/[id]`).
+  - Если открыто со страницы создания задачи — возврат на страницу создания задачи (`/projects/[id]/orders/new`).
+  - В ином случае — возврат на страницу списка задач или главную страницу.
+
+## Non-functional requirements
+
+### Производительность
+
+- Загрузка изображения должна начаться немедленно при открытии страницы.
+- Использование lazy loading и оптимизация размера изображения для быстрой загрузки.
+- Плавные анимации при масштабировании и перемещении (60 FPS).
+- Оптимизация для работы на мобильных устройствах с ограниченной памятью.
+
+### Адаптивность
+
+- Страница должна корректно работать на всех размерах экранов (мобильные, планшеты, десктоп).
+- Кнопки управления должны быть удобны для использования на сенсорных экранах (минимальный размер касания 44x44px).
+- Поддержка жестов touch для мобильных устройств.
+
+### Доступность
+
+- Все кнопки должны иметь aria-label для читателей экрана.
+- Клавиатурная навигация: поддержка Tab для переключения между кнопками, Enter/Space для активации.
+- Соответствие WCAG 2.1 уровня AA для контрастности текста и элементов управления.
+
+### Безопасность
+
+- Валидация параметра `imageId` из URL для предотвращения XSS и других атак.
+- Проверка прав доступа к изображению (если требуется в будущем).
+
+### Совместимость
+
+- Поддержка современных браузеров (Chrome, Firefox, Safari, Edge последних версий).
+- Корректная работа в Telegram Web App (с учетом особенностей виртуальной клавиатуры).
+
+### UX требования
+
+- Плавные переходы и анимации для улучшения восприятия взаимодействия.
+- Визуальная обратная связь при всех действиях пользователя (hover, active состояния).
+- Интуитивно понятный интерфейс, не требующий инструкций.
+
+## Assumptions
+
+1. Изображения доступны по URL, которые передаются через параметры маршрута или query-параметры.
+2. Страница просмотра изображения открывается с параметром `imageId` или `imageUrl` в URL.
+3. Контекст предыдущей страницы сохраняется через роутер Vue/Nuxt, без необходимости передачи дополнительных параметров.
+4. Все изображения имеют допустимый формат (jpg, png, webp) и загружаются с сервера или CDN.
+5. Поддержка жестов touch для мобильных устройств реализуется через нативные события браузера или библиотеку обработки жестов.
+6. Стандартная шапка должна соответствовать дизайну других страниц проекта (например, `pages/orders/[id].vue`).
+7. Функциональность зума и панорамирования будет реализована через CSS transforms и JavaScript обработчики событий, без использования тяжелых библиотек, если возможно.
+8. При необходимости можно использовать легковесные библиотеки для обработки жестов (например, hammer.js), если нативная реализация окажется слишком сложной.
+9. Страница просмотра изображения должна быть доступна из двух источников: страницы деталей задачи (`pages/orders/[id].vue`) и страницы создания задачи (`pages/projects/[id]/orders/new.vue`).
+10. Для страницы создания задачи изображения находятся в локальном состоянии формы (attachments), поэтому URL изображения может быть как локальным (blob URL), так и серверным.
+