ci: reduce duplicate actions and serialize checks

Repair investment recovery, draft preservation, date validation,
currency presentation, accessibility, and route error recovery.
Correct Docker and dependency checks and consume explicit income roles.

.ai/architecture.md

@@ -51,31 +51,40 @@ Cross-slice consumer использует `@/` и `index.ts` владельца,
 композиция принадлежит вышележащему owner. Existing меж-slice исключения
 не являются разрешением добавлять новые.
 
-Направление зависимостей и public imports частично проверяет
+Направление зависимостей, public imports и запрет соседних slices в
-`npm run deps`; Knip проверяет использование exports, а не смысл placement.
+`pages`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
+одного slice и связи shared segments этот запрет не ограничивает.
+Knip проверяет использование exports, а не смысл placement.
 
 ## UI foundation
 
-`shared/theme/tokens.json` — переносимый source design tokens; `theme.ts`
+Private workspace `packages/tokens` экспортирует переносимый source design tokens
+как `@wealthledger/tokens/tokens.json`. Private workspace `packages/ui`
 адаптирует доверенный JSON к Mantine без runtime schema. App и Storybook читают
-public API `shared/theme`. Storybook показывает synthetic presentation states,
+`@wealthledger/ui/theme` и явно подключают `@wealthledger/ui/styles.css` после
+Mantine CSS. Потребители используют public exports пакетов напрямую. Storybook показывает synthetic presentation states,
 не использует application API. RTL/MSW проверяют поведение приложения отдельно.
 
-Existing route-aware AppShell расположен в shared/ui; это legacy placement,
+Route-aware AppShell и его navigation styles принадлежат `app/ui`;
-а не образец нового shared primitive. При изменении foundation прочитай
+`ProtectedLayout` использует public API этого владельца. При изменении foundation прочитай
 [UI](conventions/ui.md#визуальная-основа) и [Storybook](conventions/storybook.md).
 
+Статичные Add/Edit/Delete и публичный `IconProps` принадлежат private
+`packages/icons`; package не зависит от UI, domain или motion.
+`BankOperationIcon` и mappings остаются у entity. Card/Cards используют package
+Add/Edit/Delete; restore/category SVG остаются локальными.
+
 ## Примеры
 
-- Общая busy-область: существующий [LoadingSkeleton](../src/shared/ui/LoadingSkeleton.tsx), а не domain widget в shared.
+- Общая busy-область: существующий [LoadingSkeleton](../packages/ui/src/LoadingSkeleton/LoadingSkeleton.tsx), а не domain widget в shared.
-- Account-income state views: [страница](../src/pages/account-income/ui/AccountIncomePage.tsx) и её flat `components/*.view.tsx`; новый page-local filter остаётся здесь.
+- Account-income state views: [страница](../src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx) и её `components/`; новый page-local filter остаётся здесь. Комплекты файлов группируются по [UI convention](conventions/ui.md#размещение-файлов-компонента).
 - Portfolio query: [entity public API](../src/entities/portfolio/index.ts); новая UI-сводка с бизнес-смыслом не становится shared только из-за нескольких экранов.
 
 ## Проверка
 
 После placement/import change: `npm run deps`, `npm run typecheck`, `npm run knip`;
 после собственного behavior — применимые tests. Финальный gate указан в AGENTS.
-Existing dependency config не запрещает все same-layer imports: их и смысл
+Graph `src` и `packages` проверяет текущий dependency-cruiser; зависимости
-owner проверяет review. Не объявляй Steiger установленным; graph проверяет
+из packages в код приложения `src` запрещены. Generated `packages/*/dist`
-текущий dependency-cruiser. Review отдельно проверяет смысл owner: разрешённый dependency graph не доказывает
+не анализируется как исходник; все package sources остаются в graph. Review отдельно проверяет смысл
-правильный выбор слоя.
+owner: разрешённый dependency graph не доказывает правильный выбор слоя.

.ai/conventions/storybook.md

@@ -1,5 +1,8 @@
 # Storybook
 
+Единый каталог включает stories приложения и `packages/*/src`; общие
+StateView/LoadingSkeleton и их stories принадлежат `packages/ui`.
+
 ## Когда нужна story
 
 - Shared UI/theme: показывай принятые visual roles и переиспользуемое поведение.
@@ -23,7 +26,7 @@ Stories не достигают application API, auth, VM и query providers д
 контракт: keyboard activation, доступность действия, local callback. Не повторяй
 RTL suite и не тестируй внутренности Mantine. Существующий
 [Button](../../src/shared/ui/Button.stories.tsx) показывает themed control
-без production wrapper; [LoadingSkeleton](../../src/shared/ui/LoadingSkeleton.stories.tsx)
+без production wrapper; [LoadingSkeleton](../../packages/ui/src/LoadingSkeleton/LoadingSkeleton.stories.tsx)
 — значимые busy states.
 
 `npm run typecheck`, `npm run deps:storybook`, `npm run build:catalog` проверяют

.ai/conventions/testing.md

@@ -45,7 +45,7 @@ Finance: loading/error/empty/loaded, cached snapshot при refetch failure, ret
 отсутствие старых данных после session/connection switch. ErrorBoundary: test-only
 throwing route, безопасная ссылка и reset после navigation.
 
-Примеры: [AuthForm test](../../src/features/auth/ui/AuthForm.test.tsx),
+Примеры: [AuthForm test](../../src/features/auth/ui/AuthForm/AuthForm.test.tsx),
 [client test](../../src/shared/api/client.test.ts),
 [usePortfolio test](../../src/entities/portfolio/api/usePortfolio.test.tsx).
 Не копируй fixtures/сценарии целиком, если задача затрагивает один исход.

.ai/conventions/ui.md

@@ -12,8 +12,11 @@ Mantine component и общую тему. Для выпадающего выбо
 Семантический HTML для структуры страницы остаётся уместным.
 
 Icons ищи у существующего owner (например,
-[BankOperationIcon](../../src/entities/bank-card/ui/BankOperationIcon.tsx));
+[BankOperationIcon](../../src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx));
-общая icon library сейчас не принята. Не добавляй пакет ради одного символа. Business/domain
+статичные Add/Edit/Delete доступны в `@wealthledger/icons`. Их SVG декоративны
+по умолчанию; имя action принадлежит кнопке. Standalone meaningful icon получает
+`aria-hidden={false}`, `role="img"` и доступное имя. Category/kind mappings
+и анимации остаются в entity. Не добавляй пакет ради одного символа. Business/domain
 components живут у feature/entity/page, даже при повторном использовании.
 
 Wrapper нужен для проектной ответственности, а не ради нового имени
@@ -53,11 +56,34 @@ retry callbacks, domain grouping и derived presentation data. View получа
 image fallback) и formatter одного переданного значения. Группировка/доли
 коллекции готовятся в VM. Перенос fetch во view ради меньшего container нарушает границу.
 
-Отдельный state/section с самостоятельной responsibility выноси в flat
+Отдельный state/section с самостоятельной responsibility выноси в
-`components/*.view.tsx`. Небольшой tightly-coupled renderer оставляй рядом.
+`components/` своего component. Небольшой tightly-coupled renderer оставляй
-Не создавай folder/barrel/test/CSS для каждого view и не дроби по line count.
+рядом; размер файла сам по себе не требует разделения.
-Пример: [AccountIncomePage](../../src/pages/account-income/ui/AccountIncomePage.tsx)
+Пример: [AccountIncomePage](../../src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx)
-и [его VM](../../src/pages/account-income/ui/AccountIncomePage.vm.ts).
+и [его VM](../../src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts).
+
+## Размещение файлов компонента
+
+Правило действует в `src` и `packages`: компонент с сопутствующими файлами
+(view, VM, types, CSS, tests, stories) размещай в папке `Component/`.
+Сохраняй полные имена файлов: `Component.tsx`, `Component.view.tsx`,
+`Component.test.tsx`. Создавай только нужные файлы; одиночный компонент
+оставляй непосредственно в `ui`, `components` или source-каталоге пакета.
+
+Внутренние части принадлежат папке родителя; для набора state/section views
+используй её `components/`. Внутри него действует то же правило: отдельная
+папка объединяет комплект файлов, одиночный view остаётся файлом.
+Стили и хуки нескольких соседних компонентов остаются у ближайшего общего
+владельца; не копируй их и не прячь внутрь одного потребителя.
+
+Папка компонента не создаёт новую FSD-границу. Публичные exports остаются в
+существующем `index.ts` slice/segment или entry пакета; внутри используй
+прямые относительные imports без дополнительных barrels на каждый компонент.
+При переносе обновляй imports, ссылки документации и проверки, зависящие от пути.
+
+Пример: [BankCardForm](../../src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx)
+лежит рядом со своим view, тестом и story; общий `BankForms.module.css`
+остаётся в `bank-card/ui`.
 
 ## Формы
 
@@ -107,10 +133,29 @@ loading/error/empty/loaded и recovery по применимости. [Storybook
 
 ## Визуальная основа
 
-Общая тема живёт в `src/shared/theme`: `tokens.json` задаёт переносимые значения,
+Private workspace `packages/tokens` владеет переносимыми значениями
-`theme.ts` адаптирует их к Mantine. Используй public API темы и её semantic roles,
+`tokens.json`; `packages/ui/src/theme.ts` читает export пакета
-без отдельной палитры в page/component. Поддерживается светлая схема.
+`@wealthledger/tokens/tokens.json` и адаптирует его к Mantine. Используй
+`@wealthledger/ui/theme` и его semantic roles; runtime подключает
+`@wealthledger/ui/styles.css` после Mantine CSS. Providers остаются у runtime.
+Палитра page/component следует этим semantic roles. Поддерживается светлая схема.
 Цвет дополняет подпись или знак; проверяй контраст конкретной пары text/background.
 Warning не используй для мелкого текста на белом. Деньги сохраняют валюту, знак
 и различие между нулём и неизвестной суммой. Общие состояния демонстрирует
 Storybook; presentation stories используют synthetic data без application API.
+
+EntryCard, StateView и LoadingSkeleton принадлежат `packages/ui`; публичный import —
+`@wealthledger/ui`. Переводы, retry и формы skeleton остаются у callers.
+Compatibility re-exports удалены; callers используют public export пакета.
+
+## Modal animation
+
+BankCardForm, OperationForm, DeleteOperation и CategoryManager монтируют Modal
+с `opened=true`: Mantine Transition начинает в состоянии `entered`.
+CSS `modal-appear`/`modal-backdrop-appear` в `packages/ui/src/styles.css`
+обеспечивает появление при mount (220ms, только no-preference). Mantine theme
+владеет exit transition (180ms), overlay blur и completion callback;
+`onExitTransitionEnd` позволяет дождаться закрытия перед unmount и вернуть фокус.
+Удаление CSS без изменения mount lifecycle убирает вступительную анимацию.
+TbankConnection Modal использует toggle `opened`; вывод о разделении фаз
+банковских форм на этот сценарий автоматически не распространяется.

.dockerignore

@@ -13,3 +13,33 @@
 !public/**
 !docker/
 !docker/**
+!packages/
+!packages/tokens/
+!packages/tokens/package.json
+!packages/tokens/tokens.json
+!packages/ui/
+!packages/ui/package.json
+!packages/ui/vite.config.ts
+!packages/ui/tsconfig.json
+!packages/ui/src/
+!packages/ui/src/**
+!packages/icons/
+!packages/icons/package.json
+!packages/icons/tsconfig.json
+!packages/icons/vite.config.ts
+!packages/icons/src/
+!packages/icons/src/index.ts
+!packages/icons/src/types.ts
+!packages/icons/src/svg/
+!packages/icons/src/svg/AddIcon.tsx
+!packages/icons/src/svg/EditIcon.tsx
+!packages/icons/src/svg/DeleteIcon.tsx
+
+# Keep local dependencies, outputs and secrets out of allowed source trees.
+**/node_modules
+**/dist
+**/coverage
+**/storybook-static
+**/.env*
+**/*.pem
+**/*.key

.gitea/workflows/commits.yml

@@ -1,26 +0,0 @@
-name: Conventional commits
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, edited]
-
-jobs:
-  commits:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: https://github.com/actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 0
-      - uses: https://github.com/actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-      - run: npm ci --ignore-scripts
-      - name: Check PR title and commits
-        env:
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          BASE_SHA: ${{ github.event.pull_request.base.sha }}
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-        run: |
-          printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
-          npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"

.gitea/workflows/image.yml

@@ -30,6 +30,8 @@ jobs:
       - run: npm ci
         env:
           HUSKY: '0'
+      - name: Install Chromium and system dependencies
+        run: npx --no-install playwright install --with-deps chromium
       - run: npm run verify
         env:
           KNIP_DISABLE_RAW_TRANSFER: '1'
@@ -45,15 +47,17 @@ jobs:
         run: |
           VERSION="${RELEASE_TAG#v}"
           if docker manifest inspect "$IMAGE:$VERSION" >/dev/null 2>manifest-error.log; then
-            echo 'Refusing to overwrite an existing release tag'; exit 1
+            DIGEST="$(docker buildx imagetools inspect "$IMAGE:$VERSION" --format '{{.Manifest.Digest}}')"
-          fi
+          else
             if ! grep -Eq 'manifest unknown|no such manifest' manifest-error.log; then
               echo 'Cannot prove tag absence; refusing publication'; exit 1
             fi
             docker buildx build --target production --build-arg VERSION="$VERSION" --build-arg REVISION="$REVISION" --tag "$IMAGE:$VERSION" --metadata-file image-metadata.json --push .
             DIGEST="$(node --input-type=commonjs -p 'require("./image-metadata.json")["containerimage.digest"]')"
+          fi
           docker pull "$IMAGE@$DIGEST"
           test "$(docker image inspect "$IMAGE@$DIGEST" --format '{{index .Config.Labels "org.opencontainers.image.revision"}}')" = "$REVISION"
+          test "$(docker image inspect "$IMAGE@$DIGEST" --format '{{index .Config.Labels "org.opencontainers.image.version"}}')" = "$VERSION"
           docker run --rm --entrypoint sh "$IMAGE@$DIGEST" -c 'test -s /usr/share/nginx/html/index.html && nginx -t && nginx && wget -q -O /dev/null http://127.0.0.1:8080/'
           printf 'Frontend image: %s@%s\n' "$IMAGE" "$DIGEST"
       - name: Remove registry session

.gitea/workflows/security.yml

@@ -1,33 +0,0 @@
-name: Frontend security
-
-on:
-  push:
-    branches:
-      - '**'
-  pull_request:
-  schedule:
-    - cron: '17 5 * * *'
-
-jobs:
-  security:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: https://github.com/actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Record checked revision
-        run: git rev-parse HEAD
-      - name: Scan history with Gitleaks 8.30.1
-        run: |
-          curl --fail --location --silent --show-error https://github.com/gitleaks/gitleaks/releases/download/v8.30.1/gitleaks_8.30.1_linux_x64.tar.gz -o /tmp/gitleaks.tar.gz
-          echo '551f6fc83ea457d62a0d98237cbad105af8d557003051f41f3e7ca7b3f2470eb  /tmp/gitleaks.tar.gz' | sha256sum --check
-          mkdir -p /tmp/gitleaks-bin
-          tar -xzf /tmp/gitleaks.tar.gz -C /tmp/gitleaks-bin gitleaks
-          /tmp/gitleaks-bin/gitleaks git --log-opts=--all --redact=100 --no-banner
-      - uses: https://github.com/actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-      - name: Verify pre-commit secret blocking and redaction
-        run: PATH=/tmp/gitleaks-bin:$PATH node --test scripts/test-pre-commit.mjs
-      - name: Audit runtime and development dependencies
-        run: npm audit --include=dev --audit-level=low

.gitea/workflows/verify.yml

@@ -2,12 +2,74 @@ name: Frontend verify
 
 on:
   push:
-    branches:
+    branches: [develop, main]
-      - '**'
   pull_request:
+    types: [opened, synchronize, reopened, edited]
+  schedule:
+    - cron: '17 5 * * *'
+
+# Gitea >= 1.26. A new revision supersedes only the same PR/branch/event.
+concurrency:
+  group: frontend-verify-${{ gitea.event_name }}-${{ gitea.event.pull_request.number || gitea.ref }}
+  cancel-in-progress: true
 
 jobs:
+  commits:
+    if: gitea.event_name == 'pull_request'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - uses: https://github.com/actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+      - uses: https://github.com/actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+      - run: npm ci --ignore-scripts
+      - name: Check PR title and commits
+        env:
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        run: |
+          printf '%s\n' "$PR_TITLE" | npm run commitlint -- --strict
+          npm run commitlint -- --strict --from "$BASE_SHA" --to "$HEAD_SHA"
+
+  security:
+    needs: commits
+    if: >-
+      !cancelled() &&
+      (needs.commits.result == 'success' || needs.commits.result == 'skipped')
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - uses: https://github.com/actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Record checked revision
+        run: git rev-parse HEAD
+      - name: Scan history with Gitleaks 8.30.1
+        run: |
+          curl --fail --location --silent --show-error https://github.com/gitleaks/gitleaks/releases/download/v8.30.1/gitleaks_8.30.1_linux_x64.tar.gz -o /tmp/gitleaks.tar.gz
+          echo '551f6fc83ea457d62a0d98237cbad105af8d557003051f41f3e7ca7b3f2470eb  /tmp/gitleaks.tar.gz' | sha256sum --check
+          mkdir -p /tmp/gitleaks-bin
+          tar -xzf /tmp/gitleaks.tar.gz -C /tmp/gitleaks-bin gitleaks
+          /tmp/gitleaks-bin/gitleaks git --log-opts=--all --redact=100 --no-banner
+      - uses: https://github.com/actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+      - name: Verify pre-commit secret blocking and redaction
+        run: PATH=/tmp/gitleaks-bin:$PATH node --test scripts/test-pre-commit.mjs
+      - name: Audit runtime and development dependencies
+        run: npm audit --include=dev --audit-level=low
+
   verify:
+    needs: [commits, security]
+    if: >-
+      !cancelled() && needs.security.result == 'success' &&
+      gitea.event_name != 'schedule'
+    timeout-minutes: 45
     runs-on: ubuntu-latest
     steps:
       - uses: https://github.com/actions/checkout@v4
@@ -21,6 +83,8 @@ jobs:
       - run: npm ci
         env:
           HUSKY: '0'
+      - name: Install Chromium and system dependencies
+        run: npx --no-install playwright install --with-deps chromium
       - name: Run all frontend gates
         run: npm run verify
         env:

.gitignore

@@ -12,6 +12,7 @@ dist
 storybook-static
 dist-ssr
 coverage
+.vitest
 .scannerwork
 *.local
 

.storybook/dependency-cruiser.cjs

@@ -9,7 +9,7 @@ module.exports = {
 			severity: "error",
 			from: { path: "\\.stories\\.tsx$|^\\.storybook/preview\\.tsx$" },
 			to: {
-				path: "^src/(shared/api|features/auth|app/routes|app/ui)/|^src/(entities|features)/[^/]+/api/|\\.vm\\.ts$|^src/pages/[^/]+/ui/[^/]+Page\\.tsx$|node_modules/(@tanstack/react-query|openapi-fetch|openapi-react-query)/",
+				path: "^src/(shared/api|features/auth|app/routes|app/ui)/|^src/(entities|features)/[^/]+/api/|\\.vm\\.ts$|^src/pages/[^/]+/ui/.*Page\\.tsx$|node_modules/(@tanstack/react-query|openapi-fetch|openapi-react-query)/",
 				reachable: true,
 			},
 		},

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-	stories: ["../src/**/*.stories.tsx"],
+	stories: ["../src/**/*.stories.tsx", "../packages/*/src/**/*.stories.tsx"],
 	addons: ["@storybook/addon-docs"],
 	framework: "@storybook/react-vite",
 	core: { disableTelemetry: true },

.storybook/preview.tsx

@@ -1,12 +1,13 @@
 import "@mantine/core/styles.css";
 import "@mantine/charts/styles.css";
 import "@mantine/dates/styles.css";
+import "@wealthledger/ui/styles.css";
 import "dayjs/locale/ru";
 import "../src/shared/i18n";
 import { MantineProvider } from "@mantine/core";
 import { DatesProvider } from "@mantine/dates";
 import type { Preview } from "@storybook/react-vite";
-import { cssVariablesResolver, theme } from "@/shared/theme";
+import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
 
 const colorSchemeManager = {
 	get: () => "light" as const,

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.3.0...v0.4.0) (2026-09-26)
+
+### Features
+
+* show persisted investment data and sync state ([4e5f564](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/4e5f564fa1d583013fb3e7febdb3baa9737446b4))
+
+### Bug Fixes
+
+* **api:** update validation and conflict response contract ([db184c8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/db184c8caec01609e8a3df3b16097ce634e5eff0))
+* **auth:** isolate session races and financial caches ([a209d71](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a209d715892862bb6d48084df0c84a10b8d56bf1))
+* **ci:** resume verification of immutable release images ([6a87379](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/6a87379813ba1d4002779b23b2a65446b4d10258))
+* **ui:** improve financial text contrast ([c86be7b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c86be7bf73d0141e0606d259ada6453c0d8e3dec))
+
+### Refactoring
+
+* colocate frontend component files ([b987fd8](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b987fd8e780963dfe1dde0c714232697a52e0475))
+* establish local frontend workspace boundaries ([85fcfe3](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/85fcfe3d073f80e759dafb14281c9462c1d7410d))
+
 ## [0.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.2.3...v0.3.0) (2026-09-20)
 
 ### Features

Dockerfile

@@ -2,10 +2,14 @@ FROM node:24.21.0-bookworm-slim AS dependencies
 WORKDIR /app
 ENV HUSKY=0
 COPY package.json package-lock.json ./
+COPY packages/tokens/package.json ./packages/tokens/
+COPY packages/ui/package.json ./packages/ui/
+COPY packages/icons/package.json ./packages/icons/
 RUN npm ci
 
 FROM dependencies AS development
 COPY . .
+RUN npm run build:packages
 ENV VITE_API_BASE_URL="" API_PROXY_TARGET=http://backend:3000
 EXPOSE 8080
 CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "8080", "--strictPort"]

README.md

@@ -28,7 +28,8 @@ staged diff с полной редакцией секретов, затем за
 `Dockerfile` имеет targets `development` (Vite HMR и proxy `/api/` во внутренний backend)
 и `production` (nginx на 8080, SPA fallback и same-origin API proxy). Node соответствует `.nvmrc`.
 Build context ограничен `.dockerignore`; `.env`, local DB и host node_modules
-не попадают в image.
+не попадают в image. Изменение `packages/tokens` или `packages/ui` требует rebuild development
+image, если локальный запуск использует bind-mount только `src`/`public`.
 
 ```bash
 docker build --target development -t wealthledger-frontend:development .
@@ -74,20 +75,43 @@ Service worker кеширует только статическую оболоч
 
 ```bash
 nvm use --silent
+npm ci
+npx --no-install playwright install chromium
 npm run verify
 ```
 
 Команда проверяет, что generated OpenAPI types соответствуют committed snapshot,
 затем запускает strict TypeScript, Biome, один coverage-backed запуск Vitest,
 Knip, dependency rules приложения и stories, сборки приложения и Storybook.
-Отдельный CI workflow `Frontend security` на push, pull request и ежедневно
+Vitest включает JSDOM-тесты и проверку геометрии секций позиций в headless
-проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
+Chromium при ширинах 375 и 1280 px. Browser project не использует JSDOM setup
+и его заглушки layout API. Только браузерная проверка:
+`npm run test:run -- --project='browser-*'`. После обновления Playwright повторите
+установку Chromium; CI устанавливает его с `--with-deps` для Linux.
+Единый `.gitea/workflows/verify.yml` запускает `commits → security → verify`
+последовательно на PR; на push в `develop`/`main` — `security → verify`.
+Рабочие ветки проверяются после открытия PR, без дублирующего push-запуска.
+Изменение заголовка PR тоже повторяет проверки Conventional Commits.
+Новый запуск отменяет устаревший для того же PR/ветки и типа события
+(требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`.
+Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
 `npm audit --include=dev --audit-level=low`. Любой advisory блокирует security job;
 исключений frontend нет. Локально можно выполнить те же команды:
 `gitleaks git --log-opts=--all --redact=100 --no-banner` и
 `npm audit --include=dev --audit-level=low`. Audit требует доступа к npm registry;
 проверка секретов выполняется локально и не выводит их значения.
 
+Имена jobs `commits`, `security`, `verify` сохранены, но Gitea включает имя
+workflow в статус. При внедрении администратор должен заменить required checks
+для защищённых веток на `Frontend verify / commits (pull_request)`,
+`Frontend verify / security (pull_request)` и
+`Frontend verify / verify (pull_request)`, удалив старые имена и push-статусы,
+если они требовались. Все три PR-проверки должны оставаться обязательными.
+Публикация образов по тегам остаётся в `image.yml`.
+Последовательность jobs ограничивает один запуск; для ограничения нагрузки всего сервера настройте
+`runner.capacity: 1` у общего runner и учтите остальные зарегистрированные
+runners. Конфигурация runner управляется вне этого репозитория.
+
 TypeScript остаётся на 5.9.3: `openapi-typescript@7.13.0` требует peer `^5.x`.
 Обновление до TypeScript 7 из Renovate dashboard откладывается до совместимого
 релиза генератора; `--force`/`--legacy-peer-deps` для обхода этого ограничения
@@ -194,3 +218,33 @@ Commits и PR titles — Conventional Commits, включая `spec:`. Верс
 администратором, обязательны `verify`, `security`, `commits`; теги `v*` защищены.
 Workflow сам не включает эти настройки. Отдельное review approval для одного
 владельца не требуется. Npm publishing, deploy и Gitea Releases не включены.
+
+## Локальные пакеты
+
+`packages/tokens` — private npm workspace с единственным export
+`@wealthledger/tokens/tokens.json`. `packages/ui` экспортирует собранные
+`@wealthledger/ui/theme` (JS + declarations) и `@wealthledger/ui/styles.css`.
+Корневой export `@wealthledger/ui` содержит EntryCard, StateView и LoadingSkeleton;
+Потребители импортируют компоненты напрямую из `@wealthledger/ui`.
+CSS явно подключается после Mantine; providers остаются в приложении/Storybook.
+Тема доступна через `@wealthledger/ui/theme`; compatibility re-exports удалены.
+
+JSON не требует сборки. `npm ci` связывает workspaces, а существующие команды
+разработки, проверок и сборки сначала выполняют `npm run build:packages`.
+Library build использует отдельный Vite config без app plugins и TypeScript
+для declarations. После изменения package sources перезапустите `npm run dev`
+или `npm run dev:catalog`; отдельный watch-процесс пока не нужен.
+Начальная версия manifest взята из приложения; отдельный release-процесс
+и публикация не настроены.
+
+Private `@wealthledger/icons` экспортирует `AddIcon`, `EditIcon`, `DeleteIcon`
+и type `IconProps`. Единственный source рисунка — TSX в `packages/icons/src/svg`;
+поставка содержит ESM/declarations, без raw SVG, CSS, Mantine и motion.
+React — peer/external. Размер `size` по умолчанию 24, `strokeWidth` — 1.5;
+цвет наследуется через `currentColor`, SVG props можно передать явно.
+В action используйте декоративный `<AddIcon size={20} strokeWidth={2} />`,
+доступное имя задавайте кнопке. Standalone пример:
+`<EditIcon aria-hidden={false} role="img" aria-label="Редактирование" />`.
+Поддерживается также стандартный `aria-labelledby`; подпись выбирает caller.
+Card/Cards используют пакетные Add/Edit/Delete с прежними размерами/strokeWidth.
+Restore/category SVG и предметный BankOperationIcon остаются в приложении.

biome.json

@@ -7,6 +7,7 @@
 		"includes": [
 			"**",
 			"!dist",
+			"!packages/*/dist",
 			"!storybook-static",
 			"!src/shared/api/generated",
 			"!src/shared/api/spec",
@@ -38,7 +39,8 @@
 				"vite.config.ts",
 				"vitest.config.ts",
 				".storybook/main.ts",
-				".storybook/preview.tsx"
+				".storybook/preview.tsx",
+				"packages/*/vite.config.ts"
 			],
 			"linter": {
 				"rules": {

dependency-cruiser.cjs

@@ -1,5 +1,17 @@
 module.exports = {
 	forbidden: [
+		{
+			name: "no-unresolved",
+			severity: "error",
+			from: {},
+			to: { couldNotResolve: true },
+		},
+		{
+			name: "packages-must-not-depend-on-app",
+			severity: "error",
+			from: { path: "^packages/" },
+			to: { path: "^src/" },
+		},
 		{
 			name: "no-circular",
 			severity: "error",
@@ -17,6 +29,12 @@ module.exports = {
 				pathNot: "^src/$1/$2/",
 			},
 		},
+		{
+			name: "no-same-layer-cross-slice-imports",
+			severity: "error",
+			from: { path: "^src/(pages|features|entities)/([^/]+)/" },
+			to: { path: "^src/$1/", pathNot: "^src/$1/$2/" },
+		},
 		{
 			name: "shared-must-not-depend-on-layers",
 			severity: "error",
@@ -43,8 +61,13 @@ module.exports = {
 		},
 	],
 	options: {
+		exclude: "^packages/[^/]+/dist/",
 		doNotFollow: { path: "node_modules" },
-		tsConfig: { fileName: "tsconfig.app.json" },
+		tsConfig: { fileName: "tsconfig.dependency-cruiser.json" },
+		enhancedResolveOptions: {
+			exportsFields: ["exports"],
+			conditionNames: ["import", "require", "node", "default"],
+		},
 		tsPreCompilationDeps: true,
 	},
 };

knip.json

@@ -1,4 +1,17 @@
 {
-	"project": ["src/**/*.{ts,tsx}", "!src/shared/api/generated/**"],
+	"ignoreDependencies": ["conventional-changelog-conventionalcommits"],
-	"ignoreDependencies": ["conventional-changelog-conventionalcommits"]
+	"workspaces": {
+		".": {
+			"project": ["src/**/*.{ts,tsx}", "!src/shared/api/generated/**"]
+		},
+		"packages/tokens": {
+			"entry": ["tokens.json"]
+		},
+		"packages/ui": {
+			"project": ["src/**/*.{ts,tsx}"]
+		},
+		"packages/icons": {
+			"project": ["src/**/*.{ts,tsx}"]
+		}
+	}
 }

package-lock.json

@@ -1,12 +1,15 @@
 {
 	"name": "wealth-ledger-frontend",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "wealth-ledger-frontend",
-			"version": "0.3.0",
+			"version": "0.4.0",
+			"workspaces": [
+				"packages/*"
+			],
 			"dependencies": {
 				"@hookform/resolvers": "5.9.1",
 				"@mantine/charts": "9.6.1",
@@ -14,6 +17,9 @@
 				"@mantine/dates": "9.6.1",
 				"@mantine/hooks": "9.6.1",
 				"@tanstack/react-query": "5.102.8",
+				"@wealthledger/icons": "file:packages/icons",
+				"@wealthledger/tokens": "file:packages/tokens",
+				"@wealthledger/ui": "file:packages/ui",
 				"dayjs": "1.11.23",
 				"i18next": "26.4.2",
 				"motion": "13.2.0",
@@ -43,6 +49,7 @@
 				"@types/react": "19.3.0",
 				"@types/react-dom": "19.3.0",
 				"@vitejs/plugin-react": "6.1.1",
+				"@vitest/browser-playwright": "5.0.0",
 				"@vitest/coverage-v8": "5.0.0",
 				"babel-plugin-react-compiler": "1.0.0",
 				"conventional-changelog-conventionalcommits": "10.4.0",
@@ -53,6 +60,7 @@
 				"lint-staged": "17.5.1",
 				"msw": "2.15.0",
 				"openapi-typescript": "7.13.0",
+				"playwright": "1.63.0",
 				"release-it": "21.0.2",
 				"storybook": "10.6.0",
 				"typescript": "5.9.3",
@@ -847,6 +855,13 @@
 				"node": ">=14.21.3"
 			}
 		},
+		"node_modules/@blazediff/core": {
+			"version": "1.10.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@blazediff/core/-/core-1.10.0.tgz",
+			"integrity": "sha512-AOQff0zgR7cGsZL+4E7hVkmujoPUpm0J9xzWGWZj5wCjd3gmxESXAPfKyuzs93VdpQNFhHlBhfOjrcZ+XTERtQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@bramus/specificity": {
 			"version": "2.4.2",
 			"resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -3726,6 +3741,13 @@
 				"url": "https://github.com/phun-ky/typeof?sponsor=1"
 			}
 		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@redocly/ajv": {
 			"version": "8.11.2",
 			"resolved": "https://registry.npmjs.org/@redocly/ajv/-/ajv-8.11.2.tgz",
@@ -5370,6 +5392,54 @@
 				}
 			}
 		},
+		"node_modules/@vitest/browser": {
+			"version": "5.0.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@vitest/browser/-/browser-5.0.0.tgz",
+			"integrity": "sha512-JC9FG5xIRxPHXJPcdCaluIJcEoeM0IwGQ3xneuJk09LXKHRNs40BqWDWymQikbb20yOpYvzpKzmYgPRuSzKmvg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@blazediff/core": "1.10.0",
+				"@vitest/mocker": "5.0.0",
+				"@vitest/ui": "5.0.0",
+				"@vitest/utils": "5.0.0",
+				"magic-string": "^1.2.3",
+				"pngjs": "^7.0.0",
+				"sirv": "^3.0.2",
+				"tinyrainbow": "^3.1.1",
+				"ws": "^8.21.3"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"vitest": "5.0.0"
+			}
+		},
+		"node_modules/@vitest/browser-playwright": {
+			"version": "5.0.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@vitest/browser-playwright/-/browser-playwright-5.0.0.tgz",
+			"integrity": "sha512-N+gED9y4/8pypaHjz/x0ah3CjoBr+N0hWWT+Gq4VXtMzyB+rUIdHni0ulzpD1j4H77iWy5Jg8PRMlVn6kjxo6g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/browser": "5.0.0",
+				"@vitest/mocker": "5.0.0",
+				"tinyrainbow": "^3.1.1"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"playwright": "*",
+				"vitest": "5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"playwright": {
+					"optional": false
+				}
+			}
+		},
 		"node_modules/@vitest/coverage-v8": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-5.0.0.tgz",
@@ -5450,6 +5520,19 @@
 				}
 			}
 		},
+		"node_modules/@vitest/pretty-format": {
+			"version": "5.0.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@vitest/pretty-format/-/pretty-format-5.0.0.tgz",
+			"integrity": "sha512-PVRNuB3wpReb4SQEs4zTKM4KWFhQ5pw3spE8naoDJNB5T5aWRzGKHwXcLUllr0WeOTXpB6bSr3CJLo5+7XQSSQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tinyrainbow": "^3.1.1"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
 		"node_modules/@vitest/spy": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-5.0.0.tgz",
@@ -5460,6 +5543,54 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/@vitest/ui": {
+			"version": "5.0.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@vitest/ui/-/ui-5.0.0.tgz",
+			"integrity": "sha512-h2FIFwggCY2GxUd2UdQoYNVQkOIqEQLPhNREcl3FUiRsdzQep7NWwYbSmhGEA9nFLPDq5pXzRMcBZQU8Py83sg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/utils": "5.0.0",
+				"fflate": "^0.8.3",
+				"flatted": "^3.4.4",
+				"pathe": "^2.0.3",
+				"sirv": "^3.0.2",
+				"tinyrainbow": "^3.1.1"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"vitest": "5.0.0"
+			}
+		},
+		"node_modules/@vitest/utils": {
+			"version": "5.0.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@vitest/utils/-/utils-5.0.0.tgz",
+			"integrity": "sha512-dO++xL3vDfvhTAVimfkuQUA3k+JClIF1i1vAkPqpcGAthRmeWnXmHB7YPViPvgCwviX8u7Y5W1u2N//AaQr3fw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/pretty-format": "5.0.0",
+				"convert-source-map": "^2.0.0",
+				"tinyrainbow": "^3.1.1"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@wealthledger/icons": {
+			"resolved": "packages/icons",
+			"link": true
+		},
+		"node_modules/@wealthledger/tokens": {
+			"resolved": "packages/tokens",
+			"link": true
+		},
+		"node_modules/@wealthledger/ui": {
+			"resolved": "packages/ui",
+			"link": true
+		},
 		"node_modules/@webcontainer/env": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@webcontainer/env/-/env-1.1.1.tgz",
@@ -7588,6 +7719,13 @@
 				}
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.8.3",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/fflate/-/fflate-0.8.3.tgz",
+			"integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/filelist": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
@@ -7628,6 +7766,13 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/flatted": {
+			"version": "3.4.4",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/flatted/-/flatted-3.4.4.tgz",
+			"integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==",
+			"dev": true,
+			"license": "ISC"
+		},
 		"node_modules/for-each": {
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -9928,6 +10073,16 @@
 			"integrity": "sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ==",
 			"license": "MIT"
 		},
+		"node_modules/mrmime": {
+			"version": "2.0.1",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10731,6 +10886,35 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/playwright": {
+			"version": "1.63.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/playwright/-/playwright-1.63.0.tgz",
+			"integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.63.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=20"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.63.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/playwright-core/-/playwright-core-1.63.0.tgz",
+			"integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"playwright-core": "cli.js"
+			},
+			"engines": {
+				"node": ">=20"
+			}
+		},
 		"node_modules/pluralize": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -10741,6 +10925,16 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/pngjs": {
+			"version": "7.0.0",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/pngjs/-/pngjs-7.0.0.tgz",
+			"integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.19.0"
+			}
+		},
 		"node_modules/possible-typed-array-names": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -12154,6 +12348,21 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/sirv": {
+			"version": "3.0.2",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/sirv/-/sirv-3.0.2.tgz",
+			"integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/sisteransi": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -13625,6 +13834,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/tough-cookie": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
@@ -16399,6 +16618,47 @@
 			"funding": {
 				"url": "https://github.com/sponsors/colinhacks"
 			}
+		},
+		"packages/icons": {
+			"name": "@wealthledger/icons",
+			"version": "0.3.0",
+			"devDependencies": {
+				"@storybook/react-vite": "10.6.0",
+				"@testing-library/react": "16.3.3",
+				"@types/react": "19.3.0",
+				"typescript": "5.9.3",
+				"vite": "8.3.0",
+				"vitest": "5.0.0"
+			},
+			"peerDependencies": {
+				"react": "19.3.0"
+			}
+		},
+		"packages/tokens": {
+			"name": "@wealthledger/tokens",
+			"version": "0.3.0"
+		},
+		"packages/ui": {
+			"name": "@wealthledger/ui",
+			"version": "0.3.0",
+			"dependencies": {
+				"@wealthledger/tokens": "0.3.0"
+			},
+			"devDependencies": {
+				"@storybook/react-vite": "10.6.0",
+				"@testing-library/react": "16.3.3",
+				"@types/react": "19.3.0",
+				"storybook": "10.6.0",
+				"typescript": "5.9.3",
+				"vite": "8.3.0",
+				"vitest": "5.0.0"
+			},
+			"peerDependencies": {
+				"@mantine/core": "9.6.1",
+				"@mantine/hooks": "9.6.1",
+				"react": "19.3.0",
+				"react-dom": "19.3.0"
+			}
 		}
 	}
 }

package.json

@@ -1,33 +1,34 @@
 {
 	"name": "wealth-ledger-frontend",
 	"private": true,
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"type": "module",
 	"engines": {
 		"node": "24.21.0"
 	},
 	"scripts": {
-		"dev": "vite",
+		"dev": "npm run build:packages && vite",
-		"dev:catalog": "storybook dev -p 6006 --no-open --disable-telemetry",
+		"dev:catalog": "npm run build:packages && storybook dev -p 6006 --no-open --disable-telemetry",
-		"build:catalog": "storybook build --output-dir storybook-static --disable-telemetry",
+		"build:catalog": "npm run build:packages && storybook build --output-dir storybook-static --disable-telemetry",
 		"preview:catalog": "vite preview --outDir storybook-static",
-		"typecheck": "tsc -b --noEmit",
+		"typecheck": "npm run build:packages && tsc -b --noEmit",
-		"build": "tsc -b && vite build",
+		"build": "npm run build:packages && tsc -b && vite build",
 		"lint": "biome check .",
-		"test": "vitest",
+		"test": "npm run build:packages && vitest",
-		"test:run": "vitest run",
+		"test:run": "npm run build:packages && vitest run",
-		"test:coverage": "vitest run --coverage",
+		"test:coverage": "npm run build:packages && vitest run --coverage",
 		"openapi:generate": "openapi-typescript src/shared/api/spec/openapi.json -o src/shared/api/generated/schema.d.ts",
 		"openapi:check": "node scripts/check-openapi.mjs",
-		"knip": "knip",
+		"knip": "npm run build:packages && knip",
-		"deps": "depcruise src --config dependency-cruiser.cjs --output-type err-long",
+		"deps": "npm run build:packages && depcruise src packages --config dependency-cruiser.cjs --output-type err-long",
-		"verify": "npm run openapi:check && npm run typecheck && npm run lint && npm run test:coverage && npm run knip && npm run deps && npm run deps:storybook && npm run build && npm run build:catalog",
+		"verify": "npm run build:packages && npm run openapi:check && tsc -b --noEmit && npm run lint && vitest run --coverage && knip && depcruise src packages --config dependency-cruiser.cjs --output-type err-long && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long && tsc -b && vite build && storybook build --output-dir storybook-static --disable-telemetry",
 		"prepare": "husky",
 		"preview": "vite preview",
-		"deps:storybook": "depcruise src .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long",
+		"deps:storybook": "npm run build:packages && depcruise src packages .storybook/preview.tsx --config .storybook/dependency-cruiser.cjs --output-type err-long",
 		"release:preview": "release-it --dry-run --ci",
 		"release:prepare": "release-it --ci",
-		"commitlint": "commitlint"
+		"commitlint": "commitlint",
+		"build:packages": "npm run build --workspaces --if-present"
 	},
 	"lint-staged": {
 		"*.{css,html,json,md,ts,tsx}": "biome format --write --no-errors-on-unmatched"
@@ -39,6 +40,9 @@
 		"@mantine/dates": "9.6.1",
 		"@mantine/hooks": "9.6.1",
 		"@tanstack/react-query": "5.102.8",
+		"@wealthledger/icons": "file:packages/icons",
+		"@wealthledger/tokens": "file:packages/tokens",
+		"@wealthledger/ui": "file:packages/ui",
 		"dayjs": "1.11.23",
 		"i18next": "26.4.2",
 		"motion": "13.2.0",
@@ -68,6 +72,7 @@
 		"@types/react": "19.3.0",
 		"@types/react-dom": "19.3.0",
 		"@vitejs/plugin-react": "6.1.1",
+		"@vitest/browser-playwright": "5.0.0",
 		"@vitest/coverage-v8": "5.0.0",
 		"babel-plugin-react-compiler": "1.0.0",
 		"conventional-changelog-conventionalcommits": "10.4.0",
@@ -78,6 +83,7 @@
 		"lint-staged": "17.5.1",
 		"msw": "2.15.0",
 		"openapi-typescript": "7.13.0",
+		"playwright": "1.63.0",
 		"release-it": "21.0.2",
 		"storybook": "10.6.0",
 		"typescript": "5.9.3",
@@ -88,5 +94,8 @@
 	"allowScripts": {
 		"esbuild@0.28.2": true,
 		"fsevents@2.3.3": true
-	}
+	},
+	"workspaces": [
+		"packages/*"
+	]
 }

packages/icons/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "@wealthledger/icons",
+	"version": "0.3.0",
+	"private": true,
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		}
+	},
+	"sideEffects": false,
+	"scripts": {
+		"build": "vite build && tsc -p tsconfig.json"
+	},
+	"peerDependencies": {
+		"react": "19.3.0"
+	},
+	"devDependencies": {
+		"@storybook/react-vite": "10.6.0",
+		"@testing-library/react": "16.3.3",
+		"@types/react": "19.3.0",
+		"typescript": "5.9.3",
+		"vite": "8.3.0",
+		"vitest": "5.0.0"
+	}
+}

packages/icons/src/Icons.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AddIcon, DeleteIcon, EditIcon } from "./index";
+
+const meta = {
+	title: "Design System/Icons",
+	component: AddIcon,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Статичные SVG: size по умолчанию 24, strokeWidth 1.5, цвет currentColor. В кнопке иконка декоративная, имя принадлежит действию. Для самостоятельного изображения задайте aria-hidden={false}, role=img и aria-label либо aria-labelledby. Геометрия взята из Card/Cards; подписи и действия остаются у приложения.",
+			},
+		},
+	},
+} satisfies Meta<typeof AddIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Decorative: Story = {
+	render: () => (
+		<div style={{ display: "flex", gap: 16, color: "#2563eb" }}>
+			<button type="button" aria-label="Добавить пример">
+				<AddIcon size={20} strokeWidth={2} />
+			</button>
+			<button type="button" aria-label="Изменить пример">
+				<EditIcon size={18} />
+			</button>
+			<button type="button" aria-label="Удалить пример">
+				<DeleteIcon size={18} />
+			</button>
+		</div>
+	),
+};
+
+export const Meaningful: Story = {
+	render: () => (
+		<div style={{ display: "flex", gap: 16, color: "#2563eb" }}>
+			<AddIcon aria-hidden={false} role="img" aria-label="Добавление" />
+			<EditIcon aria-hidden={false} role="img" aria-label="Редактирование" />
+			<DeleteIcon aria-hidden={false} role="img" aria-label="Удаление" />
+		</div>
+	),
+};

packages/icons/src/Icons.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AddIcon, DeleteIcon, EditIcon } from "./index";
+
+describe("icon accessibility", () => {
+	it.each([AddIcon, EditIcon, DeleteIcon])(
+		"keeps decoration hidden and exposes explicitly named images: %s",
+		(Icon) => {
+			const { rerender } = render(
+				<button type="button" aria-label="Действие">
+					<Icon />
+				</button>,
+			);
+			expect(screen.queryByRole("img")).not.toBeInTheDocument();
+			expect(
+				screen.getByRole("button", { name: "Действие" }).querySelector("svg"),
+			).toHaveAttribute("focusable", "false");
+			rerender(
+				<Icon
+					aria-hidden={false}
+					role="img"
+					aria-label="Пример"
+					size={18}
+					strokeWidth={2}
+				/>,
+			);
+			const icon = screen.getByRole("img", { name: "Пример" });
+			expect(icon).toHaveAttribute("width", "18");
+			expect(icon).toHaveAttribute("height", "18");
+			expect(icon).toHaveAttribute("stroke-width", "2");
+			expect(icon).toHaveAttribute("stroke", "currentColor");
+		},
+	);
+});

packages/icons/src/index.ts

@@ -0,0 +1,4 @@
+export { AddIcon } from "./svg/AddIcon";
+export { DeleteIcon } from "./svg/DeleteIcon";
+export { EditIcon } from "./svg/EditIcon";
+export type { IconProps } from "./types";

packages/icons/src/svg/AddIcon.tsx

@@ -0,0 +1,24 @@
+import type { FC } from "react";
+import type { IconProps } from "../types";
+
+const AddIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			aria-hidden="true"
+			focusable="false"
+			{...svgProps}
+		>
+			<path d="M12 5v14 M5 12h14" />
+		</svg>
+	);
+};
+
+export { AddIcon };

packages/icons/src/svg/DeleteIcon.tsx

@@ -0,0 +1,25 @@
+import type { FC } from "react";
+import type { IconProps } from "../types";
+
+const DeleteIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			aria-hidden="true"
+			focusable="false"
+			{...svgProps}
+		>
+			<path d="M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7" />
+		</svg>
+	);
+};
+
+export { DeleteIcon };

packages/icons/src/svg/EditIcon.tsx

@@ -0,0 +1,25 @@
+import type { FC } from "react";
+import type { IconProps } from "../types";
+
+const EditIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			aria-hidden="true"
+			focusable="false"
+			{...svgProps}
+		>
+			<path d="m16 3 5 5-12 12-6 1 1-6L16 3Z M13 6l5 5" />
+		</svg>
+	);
+};
+
+export { EditIcon };

packages/icons/src/types.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+type IconProps = Omit<
+	ComponentPropsWithoutRef<"svg">,
+	"children" | "dangerouslySetInnerHTML"
+> & {
+	size?: number | string;
+};
+
+export type { IconProps };

packages/icons/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"target": "ES2023",
+		"lib": ["ES2023", "DOM"],
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"strict": true,
+		"skipLibCheck": true,
+		"verbatimModuleSyntax": true,
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"rootDir": "src",
+		"outDir": "dist",
+		"jsx": "react-jsx"
+	},
+	"include": ["src/index.ts"]
+}

packages/icons/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	build: {
+		lib: { entry: "src/index.ts", formats: ["es"], fileName: "index" },
+		rolldownOptions: { external: /^react(\/|$)/ },
+	},
+});

packages/tokens/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "@wealthledger/tokens",
+	"version": "0.3.0",
+	"private": true,
+	"type": "module",
+	"files": [
+		"tokens.json"
+	],
+	"exports": {
+		"./tokens.json": "./tokens.json"
+	}
+}

packages/tokens/tokens.json

@@ -53,7 +53,7 @@
 				"#40c057",
 				"#37b24d",
 				"#2f9e44",
-				"#2b8a3e"
+				"#237032"
 			],
 			"red": [
 				"#fff5f5",
@@ -131,7 +131,7 @@
 			},
 			"muted": {
 				"color": "gray",
-				"shade": 6,
+				"shade": 7,
 				"description": "Вторичный текст; проверяйте контраст при выборе фона"
 			},
 			"border": {
@@ -151,12 +151,12 @@
 			},
 			"positive": {
 				"color": "green",
-				"shade": 6,
+				"shade": 9,
 				"description": "Положительный результат; дополните знаком и текстом"
 			},
 			"negative": {
 				"color": "red",
-				"shade": 6,
+				"shade": 9,
 				"description": "Ошибка / отрицательный результат; дополните текстом"
 			},
 			"warning": {

packages/ui/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@wealthledger/ui",
+	"version": "0.3.0",
+	"private": true,
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./theme": {
+			"types": "./dist/theme.d.ts",
+			"import": "./dist/theme.js"
+		},
+		"./styles.css": "./dist/styles.css"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"scripts": {
+		"build": "vite build && tsc -p tsconfig.json"
+	},
+	"dependencies": {
+		"@wealthledger/tokens": "0.3.0"
+	},
+	"peerDependencies": {
+		"@mantine/core": "9.6.1",
+		"@mantine/hooks": "9.6.1",
+		"react": "19.3.0",
+		"react-dom": "19.3.0"
+	},
+	"devDependencies": {
+		"@storybook/react-vite": "10.6.0",
+		"@testing-library/react": "16.3.3",
+		"@types/react": "19.3.0",
+		"storybook": "10.6.0",
+		"typescript": "5.9.3",
+		"vite": "8.3.0",
+		"vitest": "5.0.0"
+	}
+}

packages/ui/src/EntryCard/EntryCard.module.css

@@ -4,8 +4,8 @@
 	gap: var(--mantine-spacing-sm);
 	align-items: center;
 	padding: var(--mantine-spacing-md);
-	border-color: var(--mantine-color-gray-3);
+	border-color: var(--wl-color-border);
-	background: var(--mantine-color-gray-0);
+	background: var(--wl-color-subtle);
 }
 
 .identity,
@@ -19,15 +19,15 @@
 }
 
 .positive {
-	color: var(--mantine-color-green-6);
+	color: var(--wl-color-positive);
 }
 
 .negative {
-	color: var(--mantine-color-red-6);
+	color: var(--wl-color-negative);
 }
 
 .neutral {
-	color: var(--mantine-color-dimmed);
+	color: var(--mantine-color-gray-7);
 }
 
 @media (max-width: 36em) {

packages/ui/src/EntryCard/EntryCard.stories.tsx

@@ -0,0 +1,37 @@
+import { Button } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { EntryCard } from "./EntryCard";
+
+const meta = {
+	title: "Design System/Components/EntryCard",
+	component: EntryCard,
+	tags: ["autodocs"],
+	args: {
+		title:
+			"Учебная запись с очень длинным названием для проверки узкого экрана",
+		metadata: "22.09.2026 · Синтетические данные",
+		initial: "У",
+		imageSrc: "data:image/png;base64,invalid",
+		value: "−1 250,00 ₽",
+		valueLabel: "Тестовое значение",
+		tone: "negative",
+		actions: (
+			<Button size="compact-sm" onClick={fn()}>
+				Открыть пример
+			</Button>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Готовые строки и slots без финансовых вычислений. Невалидное локальное изображение показывает fallback; действие доступно с клавиатуры и на узком экране. Данные вымышлены.",
+			},
+		},
+	},
+} satisfies Meta<typeof EntryCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const LongContentAndFallback: Story = {};

packages/ui/src/EntryCard/EntryCard.test.tsx

@@ -0,0 +1,45 @@
+import { MantineProvider } from "@mantine/core";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { assert, describe, expect, it } from "vitest";
+import { EntryCard } from "./EntryCard";
+
+describe("EntryCard", () => {
+	it("keeps a failed image fallback until a new source is supplied", () => {
+		const props = {
+			title: "Пример",
+			metadata: "Описание",
+			initial: "У",
+			value: "—",
+			valueLabel: "Неизвестно",
+			tone: "neutral" as const,
+			imageSrc: "data:image/png;base64,invalid",
+		};
+		const { container, rerender } = render(
+			<MantineProvider>
+				<EntryCard {...props} />
+			</MantineProvider>,
+		);
+		// Decorative image has no accessible name; trigger its actual failure event.
+		const image = container.querySelector("img");
+		assert(image);
+		fireEvent.error(image);
+		rerender(
+			<MantineProvider>
+				<EntryCard {...props} title="Обновлённый пример" />
+			</MantineProvider>,
+		);
+		expect(container.querySelector("img")).toBeNull();
+		expect(screen.getByText("У")).toBeInTheDocument();
+		expect(screen.getByText("Обновлённый пример")).toBeInTheDocument();
+		rerender(
+			<MantineProvider>
+				<EntryCard {...props} imageSrc="/replacement-logo.png" />
+			</MantineProvider>,
+		);
+		expect(container.querySelector("img")).toHaveAttribute(
+			"src",
+			"/replacement-logo.png",
+		);
+		expect(screen.queryByText("У")).not.toBeInTheDocument();
+	});
+});

packages/ui/src/EntryCard/EntryCard.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Paper, Stack, Text } from "@mantine/core";
-import { type FC, type ReactNode, useState } from "react";
+import type { FC, ReactNode } from "react";
 import classes from "./EntryCard.module.css";
 
 type EntryCardProps = {
@@ -17,7 +17,6 @@ type EntryCardProps = {
 };
 
 const EntryCard: FC<EntryCardProps> = (props) => {
-	const [imageFailed, setImageFailed] = useState(false);
 	return (
 		<Paper
 			className={classes.row}
@@ -25,7 +24,7 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 			style={
 				props.color
 					? {
-							background: `color-mix(in srgb, var(--mantine-color-${props.color}-0) 45%, white)`,
+							background: `color-mix(in srgb, var(--mantine-color-${props.color}-0) 45%, var(--wl-color-surface))`,
 						}
 					: undefined
 			}
@@ -35,8 +34,7 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 				aria-hidden="true"
 				radius="md"
 				size={40}
-				src={imageFailed ? null : props.imageSrc}
+				src={props.imageSrc}
-				onError={() => setImageFailed(true)}
 			>
 				{props.icon ?? props.initial}
 			</Avatar>

packages/ui/src/StateView/StateView.test.tsx

@@ -1,7 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { LoadingSkeleton } from "./LoadingSkeleton";
+import { LoadingSkeleton } from "../LoadingSkeleton/LoadingSkeleton";
 import { StateView } from "./StateView";
 
 describe("StateView", () => {

packages/ui/src/index.ts

@@ -0,0 +1,3 @@
+export { EntryCard } from "./EntryCard/EntryCard";
+export { LoadingSkeleton } from "./LoadingSkeleton/LoadingSkeleton";
+export { StateView } from "./StateView/StateView";

packages/ui/src/theme.test.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_THEME, mergeMantineTheme } from "@mantine/core";
+import source from "@wealthledger/tokens/tokens.json";
 import { describe, expect, it } from "vitest";
 import { colorRoles, cssVariablesResolver, theme } from "./theme";
-import source from "./tokens.json";
 
 describe("design theme adapter", () => {
 	it("preserves scale-aware sizes, unscaled breakpoints and shadow layers", () => {
@@ -25,5 +25,8 @@ describe("design theme adapter", () => {
 		expect(Object.keys(variables)).toHaveLength(
 			Object.keys(source.color.roles).length,
 		);
+		expect(cssVariablesResolver(resolved).light["--mantine-color-dimmed"]).toBe(
+			variables["--wl-color-muted"],
+		);
 	});
 });

packages/ui/src/theme.ts

@@ -1,3 +1,4 @@
+import "./styles.css";
 import {
 	type CSSVariablesResolver,
 	colorsTuple,
@@ -8,7 +9,7 @@ import {
 	rem,
 	rgba,
 } from "@mantine/core";
-import designTokens from "./tokens.json";
+import designTokens from "@wealthledger/tokens/tokens.json";
 
 const { color, typography, spacing, radius, shadows, breakpoints } =
 	designTokens;
@@ -78,7 +79,9 @@ const cssVariablesResolver: CSSVariablesResolver = (resolvedTheme) => ({
 			getThemeColor(reference, resolvedTheme),
 		]),
 	),
-	light: {},
+	light: {
+		"--mantine-color-dimmed": getThemeColor(colorRoles.muted, resolvedTheme),
+	},
 	dark: {},
 });
 

packages/ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "ES2023",
+		"lib": ["ES2023", "DOM"],
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"resolveJsonModule": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"verbatimModuleSyntax": true,
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"rootDir": "src",
+		"outDir": "dist",
+		"jsx": "react-jsx",
+		"types": ["vite/client"]
+	},
+	"include": ["src/index.ts", "src/theme.ts"]
+}

packages/ui/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	build: {
+		lib: {
+			entry: { index: "src/index.ts", theme: "src/theme.ts" },
+			formats: ["es"],
+			cssFileName: "styles",
+		},
+		rolldownOptions: {
+			external: /^(react(?:-dom)?|@mantine\/[^/]+|@wealthledger\/tokens)(\/|$)/,
+		},
+	},
+});

scripts/check-image-publication.cjs

@@ -0,0 +1,75 @@
+const { test } = require("node:test");
+const assert = require("node:assert/strict");
+const {
+	mkdtempSync,
+	readFileSync,
+	writeFileSync,
+	chmodSync,
+	rmSync,
+} = require("node:fs");
+const { tmpdir } = require("node:os");
+const { join, resolve } = require("node:path");
+const EXECUTABLE_MODE = 0o755;
+const { spawnSync } = require("node:child_process");
+
+test("immutable publication resumes exact digest checks after post-push failure", () => {
+	const directory = mkdtempSync(join(tmpdir(), "wl-image-retry-"));
+	const workflow = readFileSync(
+		resolve(__dirname, "../.gitea/workflows/image.yml"),
+		"utf8",
+	);
+	const block = workflow
+		.split("      - name: Publish immutable release tag\n        run: |\n")[1]
+		.split("      - name:")[0]
+		.replace(/^ {10}/gm, "");
+	const double = `#!${process.execPath}
+const fs = require('node:fs');
+const args = process.argv.slice(2).join(' ');
+fs.appendFileSync('calls', args + '\\n');
+if (args.startsWith('manifest inspect')) {
+  if (!fs.existsSync('published')) { console.error('manifest unknown'); process.exit(1); }
+} else if (args.startsWith('buildx imagetools inspect')) {
+  console.log('sha256:exact');
+} else if (args.startsWith('buildx build')) {
+  fs.writeFileSync('published', 'yes');
+  fs.writeFileSync('image-metadata.json', JSON.stringify({'containerimage.digest': 'sha256:exact'}));
+} else if (args.startsWith('pull')) {
+  if (!fs.existsSync('pull-failed')) { fs.writeFileSync('pull-failed', 'yes'); process.exit(1); }
+} else if (args.startsWith('image inspect')) {
+  console.log(args.includes('image.version') ? '1.2.3' : process.env.BAD_REVISION ? 'other' : 'commit');
+} else if (args.startsWith('run') && process.env.BAD_SMOKE) process.exit(1);
+`;
+	try {
+		for (const name of ["docker", "npm"]) {
+			writeFileSync(join(directory, name), double);
+			chmodSync(join(directory, name), EXECUTABLE_MODE);
+		}
+		const run = (extra = {}) =>
+			spawnSync("/bin/sh", ["-ec", block], {
+				cwd: directory,
+				encoding: "utf8",
+				env: {
+					...process.env,
+					PATH: `${directory}:${process.env.PATH}`,
+					IMAGE: "synthetic/image",
+					RELEASE_TAG: "v1.2.3",
+					REVISION: "commit",
+					...extra,
+				},
+			});
+		assert.notEqual(run().status, 0);
+		const retry = run();
+		assert.equal(retry.status, 0, retry.stdout + retry.stderr);
+		assert.notEqual(run({ BAD_REVISION: "1" }).status, 0);
+		assert.notEqual(run({ BAD_SMOKE: "1" }).status, 0);
+		const calls = readFileSync(join(directory, "calls"), "utf8");
+		assert.equal(
+			calls.split("\n").filter((line) => line.startsWith("buildx build"))
+				.length,
+			1,
+		);
+		assert.ok(calls.includes("synthetic/image@sha256:exact"));
+	} finally {
+		rmSync(directory, { recursive: true, force: true });
+	}
+});

src/app/routes/AppRoutes/AllAccounts.test.tsx

@@ -16,6 +16,7 @@ import type { IncomeAnalytics } from "@/entities/income";
 import type { Portfolio } from "@/entities/portfolio";
 import { AuthProvider } from "@/features/auth";
 import { createTestQueryClient } from "@/test/query";
+import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 import { AppRoutes } from "./AppRoutes";
 
@@ -132,6 +133,7 @@ beforeEach(() => {
 		),
 		http.get("*/api/v1/brokerage-accounts", () =>
 			HttpResponse.json(
+				resource(
 					accounts.map((account) => ({
 						...account,
 						type: "BROKERAGE",
@@ -140,13 +142,15 @@ beforeEach(() => {
 					})),
 				),
 			),
+		),
 		http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
-			HttpResponse.json(portfolio),
+			HttpResponse.json(resource(portfolio)),
 		),
 		http.get(
 			"*/api/v1/brokerage-accounts/:accountId/operations",
 			({ params }) =>
-				HttpResponse.json({
+				HttpResponse.json(
+					resource({
 						accountId: params.accountId,
 						items,
 						hasNext: false,
@@ -154,11 +158,13 @@ beforeEach(() => {
 						observedAt: receipt.occurredAt,
 					}),
 				),
+		),
 		http.get("*/api/v1/brokerage-accounts/:accountId/income-analytics", () =>
-			HttpResponse.json(analytics),
+			HttpResponse.json(resource(analytics)),
 		),
 		http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
-			HttpResponse.json({
+			HttpResponse.json(
+				resource({
 					accountId: "all",
 					calculatedAt: receipt.occurredAt,
 					incomeTotalsByCurrency: [],
@@ -177,6 +183,7 @@ beforeEach(() => {
 					})),
 				}),
 			),
+		),
 	);
 });
 
@@ -224,7 +231,8 @@ describe("All accounts routes", () => {
 				({ request, params }) => {
 					const url = new URL(request.url);
 					requests.push(url);
-					return HttpResponse.json({
+					return HttpResponse.json(
+						resource({
 							accountId: params.accountId,
 							items: [
 								{
@@ -237,7 +245,8 @@ describe("All accounts routes", () => {
 							hasNext: !url.searchParams.has("cursor"),
 							nextCursor: url.searchParams.has("cursor") ? null : "next",
 							observedAt: receipt.occurredAt,
-					});
+						}),
+					);
 				},
 			),
 		);
@@ -274,7 +283,8 @@ describe("All accounts routes", () => {
 							{ code: "INVALID_OPERATIONS_CURSOR" },
 							{ status: 400 },
 						)
-					: HttpResponse.json({
+					: HttpResponse.json(
+							resource({
 								accountId: "all",
 								items,
 								hasNext: true,
@@ -282,6 +292,7 @@ describe("All accounts routes", () => {
 								observedAt: receipt.occurredAt,
 							}),
 						),
+			),
 		);
 		renderPage("/accounts/all/operations?from=2026-08-01&to=2026-08-31");
 		await screen.findAllByText("Выплата купона");

src/app/routes/AppRoutes/AppRoutes.test.tsx

@@ -1,12 +1,11 @@
 import { MantineProvider } from "@mantine/core";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
-
 import { AuthProvider } from "@/features/auth";
-import { cssVariablesResolver, theme } from "@/shared/theme";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
 import { AppRoutes } from "./AppRoutes";

src/app/routes/AppRoutes/AppRoutes.tsx

@@ -1,8 +1,8 @@
 import type { FC } from "react";
 import { lazy } from "react";
 import { Navigate, Route, Routes } from "react-router";
-import { LazyPage } from "./RouteFallback";
+import { LazyPage } from "../RouteFallback";
-import { Protected, Public } from "./RouteGuards";
+import { Protected, Public } from "../RouteGuards";
 
 const CardPage = lazy(async () => {
 	const { CardPage } = await import("@/pages/card");
@@ -65,7 +65,7 @@ const SettingsPage = lazy(async () => {
 	return { default: SettingsPage };
 });
 const ProtectedLayout = lazy(async () => {
-	const { ProtectedLayout } = await import("./ProtectedLayout");
+	const { ProtectedLayout } = await import("../ProtectedLayout");
 	return { default: ProtectedLayout };
 });
 

src/app/routes/DocumentTitle/DocumentTitle.test.tsx

@@ -12,6 +12,7 @@ import { MemoryRouter, useNavigate } from "react-router";
 import { beforeEach, describe, expect, it } from "vitest";
 import { AuthProvider } from "@/features/auth";
 import { createTestQueryClient } from "@/test/query";
+import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 import { ProtectedDocumentTitle } from "./DocumentTitle";
 
@@ -62,7 +63,7 @@ describe("document titles", () => {
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", async () => {
 				await accountsReady;
-				return HttpResponse.json([{ id: "a", name: "ИИС" }]);
+				return HttpResponse.json(resource([{ id: "a", name: "ИИС" }]));
 			}),
 		);
 		renderTitle("/accounts/a/income?from=2026-01-01&to=2026-08-31");
@@ -85,7 +86,7 @@ describe("document titles", () => {
 		async (kind, id, fallback, name) => {
 			server.use(
 				http.get(`*/api/v1/${kind}/by-ticker/:ticker`, () =>
-					HttpResponse.json({ name }),
+					HttpResponse.json(resource({ name })),
 				),
 			);
 			renderTitle(`/${kind}/${id}`);

src/app/routes/ProtectedLayout.tsx

@@ -1,7 +1,6 @@
 import type { FC } from "react";
-import { AppBreadcrumbs } from "@/app/ui";
+import { AppBreadcrumbs, AppShell } from "@/app/ui";
-import { AppShell } from "@/shared/ui";
+import { ProtectedDocumentTitle } from "./DocumentTitle/DocumentTitle";
-import { ProtectedDocumentTitle } from "./DocumentTitle";
 
 const ProtectedLayout: FC = () => {
 	return (

src/app/routes/RouteErrorBoundary.test.tsx

@@ -1,74 +0,0 @@
-import { MantineProvider } from "@mantine/core";
-import { render, screen, waitFor } from "@testing-library/react";
-import type { FC } from "react";
-import { MemoryRouter, useLocation, useNavigate } from "react-router";
-import { describe, expect, it, vi } from "vitest";
-import { RouteErrorBoundary } from "./RouteErrorBoundary";
-
-let authenticated = false;
-vi.mock("@/features/auth", () => ({
-	useAuth: () => ({ user: authenticated ? {} : null }),
-}));
-
-const ThrowingRoute: FC = () => {
-	throw new Error("test route failure");
-};
-
-const HealthyRoute: FC = () => {
-	return (
-		<div>
-			{useLocation().pathname === "/healthy" ? (
-				"healthy route"
-			) : (
-				<ThrowingRoute />
-			)}
-		</div>
-	);
-};
-
-const RouteHarness: FC = () => {
-	const navigate = useNavigate();
-
-	return (
-		<>
-			<button type="button" onClick={() => navigate("/healthy")}>
-				go healthy
-			</button>
-			<RouteErrorBoundary>
-				<HealthyRoute />
-			</RouteErrorBoundary>
-		</>
-	);
-};
-
-function renderBoundary(path: string) {
-	return render(
-		<MantineProvider>
-			<MemoryRouter initialEntries={[path]}>
-				<RouteHarness />
-			</MemoryRouter>
-		</MantineProvider>,
-	);
-}
-
-describe("RouteErrorBoundary", () => {
-	it("offers login after a public route error without error details", () => {
-		authenticated = false;
-		renderBoundary("/login");
-		expect(document.title).toBe("Не удалось открыть страницу — WealthLedger");
-		expect(screen.getByRole("link", { name: "Продолжить" })).toHaveAttribute(
-			"href",
-			"/login",
-		);
-		expect(screen.queryByText("test route failure")).not.toBeInTheDocument();
-	});
-
-	it("offers accounts after a protected route error and resets on navigation", async () => {
-		authenticated = true;
-		renderBoundary("/accounts");
-		screen.getByRole("button", { name: "go healthy" }).click();
-		await waitFor(() =>
-			expect(screen.getByText("healthy route")).toBeInTheDocument(),
-		);
-	});
-});

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.test.tsx

@@ -0,0 +1,142 @@
+import { MantineProvider } from "@mantine/core";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { type FC, lazy, Suspense } from "react";
+import { MemoryRouter, useLocation, useNavigate } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import { RouteErrorBoundary } from "./RouteErrorBoundary";
+
+let authenticated = false;
+vi.mock("@/features/auth", () => ({
+	useAuth: () => ({ user: authenticated ? {} : null }),
+}));
+
+const ThrowingRoute: FC = () => {
+	throw new Error("test route failure");
+};
+
+const HealthyRoute: FC = () => {
+	return (
+		<div>
+			{useLocation().pathname === "/healthy" ? (
+				"healthy route"
+			) : (
+				<ThrowingRoute />
+			)}
+		</div>
+	);
+};
+
+const RouteHarness: FC = () => {
+	const navigate = useNavigate();
+
+	return (
+		<>
+			<button type="button" onClick={() => navigate("/healthy")}>
+				go healthy
+			</button>
+			<RouteErrorBoundary>
+				<HealthyRoute />
+			</RouteErrorBoundary>
+		</>
+	);
+};
+
+function renderBoundary(path: string) {
+	return render(
+		<MantineProvider>
+			<MemoryRouter initialEntries={[path]}>
+				<RouteHarness />
+			</MemoryRouter>
+		</MantineProvider>,
+	);
+}
+
+describe("RouteErrorBoundary", () => {
+	it.each(["/accounts", "/login"])(
+		"recovers a transient failure through the fallback on %s itself",
+		async (path) => {
+			authenticated = path === "/accounts";
+			let failing = true;
+			const RecoverableRoute: FC = () => {
+				if (failing) throw new Error("temporary failure");
+				return <div>recovered route</div>;
+			};
+			render(
+				<MantineProvider>
+					<MemoryRouter initialEntries={[path]}>
+						<RouteErrorBoundary>
+							<RecoverableRoute />
+						</RouteErrorBoundary>
+					</MemoryRouter>
+				</MantineProvider>,
+			);
+			const action = screen.getByRole("link", { name: "Продолжить" });
+			failing = false;
+			fireEvent.click(action);
+			expect(await screen.findByText("recovered route")).toBeInTheDocument();
+		},
+	);
+
+	it("keeps a persistent failure recoverable without an automatic reset loop", () => {
+		authenticated = true;
+		renderBoundary("/accounts");
+		fireEvent.click(screen.getByRole("link", { name: "Продолжить" }));
+		expect(
+			screen.getByRole("heading", { name: "Не удалось открыть страницу" }),
+		).toBeInTheDocument();
+		expect(screen.queryByText("test route failure")).not.toBeInTheDocument();
+		expect(
+			screen.getByRole("link", { name: "Перезагрузить страницу" }),
+		).toHaveAttribute("href", "/accounts");
+	});
+
+	it("offers document navigation when React.lazy caches a rejected chunk", async () => {
+		authenticated = false;
+		const load = vi.fn(() => Promise.reject(new Error("chunk failed")));
+		const Chunk = lazy(load);
+		render(
+			<MantineProvider>
+				<MemoryRouter initialEntries={["/login"]}>
+					<RouteErrorBoundary>
+						<Suspense fallback={<div>loading chunk</div>}>
+							<Chunk />
+						</Suspense>
+					</RouteErrorBoundary>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+		fireEvent.click(await screen.findByRole("link", { name: "Продолжить" }));
+		expect(load).toHaveBeenCalledTimes(1);
+		const reload = screen.getByRole("link", { name: "Перезагрузить страницу" });
+		expect(reload).toHaveAttribute("href", "/login");
+		// Cancel browser navigation in JSDOM only after proving React Router did not intercept it.
+		let intercepted = true;
+		const preventNavigation = (event: MouseEvent) => {
+			intercepted = event.defaultPrevented;
+			event.preventDefault();
+		};
+		document.addEventListener("click", preventNavigation, { once: true });
+		fireEvent.click(reload);
+		expect(intercepted).toBe(false);
+	});
+
+	it("offers login after a public route error without error details", () => {
+		authenticated = false;
+		renderBoundary("/login");
+		expect(document.title).toBe("Не удалось открыть страницу — WealthLedger");
+		expect(screen.getByRole("link", { name: "Продолжить" })).toHaveAttribute(
+			"href",
+			"/login",
+		);
+		expect(screen.queryByText("test route failure")).not.toBeInTheDocument();
+	});
+
+	it("offers accounts after a protected route error and resets on navigation", async () => {
+		authenticated = true;
+		renderBoundary("/accounts");
+		screen.getByRole("button", { name: "go healthy" }).click();
+		await waitFor(() =>
+			expect(screen.getByText("healthy route")).toBeInTheDocument(),
+		);
+	});
+});

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

@@ -51,17 +51,23 @@ const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
 			<Button component={Link} to={to}>
 				{t("routeError.action")}
 			</Button>
+			<Button component="a" href={to} variant="default">
+				{t("routeError.reload")}
+			</Button>
 		</Stack>
 	);
 };
 
 const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
 	const { children } = props;
-	const { pathname, search } = useLocation();
+	const { pathname, search, key } = useLocation();
 	const { user } = useAuth();
 
 	return (
-		<Boundary authenticated={Boolean(user)} routeKey={`${pathname}${search}`}>
+		<Boundary
+			authenticated={Boolean(user)}
+			routeKey={`${pathname}${search}:${key}`}
+		>
 			{children}
 		</Boundary>
 	);

src/app/routes/index.ts

@@ -1,2 +1,2 @@
-export { AppRoutes } from "./AppRoutes";
+export { AppRoutes } from "./AppRoutes/AppRoutes";
-export { RouteErrorBoundary } from "./RouteErrorBoundary";
+export { RouteErrorBoundary } from "./RouteErrorBoundary/RouteErrorBoundary";

src/app/ui/App.tsx

@@ -1,11 +1,11 @@
 import { MantineProvider } from "@mantine/core";
 import { DatesProvider } from "@mantine/dates";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
 import type { FC } from "react";
 import { BrowserRouter } from "react-router";
 import { AppRoutes, RouteErrorBoundary } from "@/app/routes";
 import { AuthProvider } from "@/features/auth";
-import { cssVariablesResolver, theme } from "@/shared/theme";
 
 const queryClient = new QueryClient({
 	defaultOptions: {

src/app/ui/AppShell/AppShell.tsx

@@ -2,7 +2,7 @@ import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
 import type { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
-import { bindIconAnimation } from "../lib";
+import { bindIconAnimation } from "@/shared/lib";
 import classes from "./AppShell.module.css";
 
 type AppShellProps = {

src/app/ui/index.ts

@@ -1 +1,2 @@
-export { AppBreadcrumbs } from "./AppBreadcrumbs";
+export { AppBreadcrumbs } from "./AppBreadcrumbs/AppBreadcrumbs";
+export { AppShell } from "./AppShell/AppShell";

src/entities/bank-card/index.ts

@@ -18,12 +18,13 @@ export {
 	moneyCents,
 	positiveMoneySchema,
 } from "./model/form-validation";
+export { bankOperationKinds } from "./model/operation-kinds";
 export { bankPeriod } from "./model/period";
-export { BankCardFace } from "./ui/BankCardFace";
+export { BankCardFace } from "./ui/BankCardFace/BankCardFace";
-export { BankCardForm } from "./ui/BankCardForm";
+export { BankCardForm } from "./ui/BankCardForm/BankCardForm";
 export { BankFeedback } from "./ui/BankFeedback";
-export { BankOperationIcon } from "./ui/BankOperationIcon";
+export { BankOperationIcon } from "./ui/BankOperationIcon/BankOperationIcon";
 export { BankPeriodPicker } from "./ui/BankPeriodPicker";
-export { BankSummaryView } from "./ui/BankSummary.view";
+export { BankSummaryView } from "./ui/BankSummary/BankSummary.view";
-export { CategoryManager } from "./ui/CategoryManager";
+export { CategoryManager } from "./ui/CategoryManager/CategoryManager";
 export { useBankFormFocus } from "./ui/useBankFormFocus";

src/entities/bank-card/model/form-validation.ts

@@ -16,7 +16,7 @@ function bankDateInputValue(value: string) {
 	return value.replace(/^(\d{2})\.(\d{2})\.(\d{4})$/, "$3-$2-$1");
 }
 function bankMonth(value: string | null) {
-	return value && /^\d{4}-(0[1-9]|1[0-2])$/.test(value)
+	return value && value >= "0001-01" && /^\d{4}-(0[1-9]|1[0-2])$/.test(value)
 		? value
 		: bankToday().slice(0, ISO_MONTH_LENGTH);
 }

src/entities/bank-card/model/operation-kinds.ts

@@ -0,0 +1,10 @@
+import type { BankOperation } from "../api/queries";
+
+const bankOperationKinds = [
+	"expense",
+	"topup",
+	"transfer",
+	"refund",
+] as const satisfies readonly BankOperation["kind"][];
+
+export { bankOperationKinds };

src/entities/bank-card/model/period.test.ts

@@ -0,0 +1,25 @@
+import { afterEach, expect, it, vi } from "vitest";
+import { bankPeriod } from "./period";
+
+afterEach(() => vi.useRealTimers());
+
+it.each([
+	["0001-01", "0001-01-01", "0001-01-31"],
+	["0099-12", "0099-12-01", "0099-12-31"],
+	["2026-09", "2026-09-01", "2026-09-30"],
+	["2024-02", "2024-02-01", "2024-02-29"],
+	["0004-02", "0004-02-01", "0004-02-29"],
+])("keeps the ISO year for legacy month %s", (month, from, to) => {
+	expect(bankPeriod(new URLSearchParams({ month }))).toEqual({ from, to });
+});
+
+it("rejects zero year consistently in legacy and explicit periods", () => {
+	vi.useFakeTimers();
+	vi.setSystemTime(new Date("2026-09-27T10:00:00Z"));
+	for (const query of ["month=0000-01", "from=0000-01-01&to=0000-01-31"]) {
+		expect(bankPeriod(new URLSearchParams(query))).toEqual({
+			from: "2026-09-01",
+			to: "2026-09-30",
+		});
+	}
+});

src/entities/bank-card/model/period.ts

@@ -1,10 +1,12 @@
-import dayjs from "dayjs";
 import { z } from "zod";
 import { bankMonth } from "./form-validation";
 
 const calendarDate = z.string().date();
+const ISO_DATE_LENGTH = 10;
 function bankPeriod(params: URLSearchParams) {
 	const month = bankMonth(params.get("month"));
+	const monthEnd = new Date(`${month}-01T00:00:00Z`);
+	monthEnd.setUTCMonth(monthEnd.getUTCMonth() + 1, 0);
 	const from = params.get("from");
 	const to = params.get("to");
 	return from &&
@@ -16,7 +18,7 @@ function bankPeriod(params: URLSearchParams) {
 		? { from, to }
 		: {
 				from: `${month}-01`,
-				to: dayjs(`${month}-01`).endOf("month").format("YYYY-MM-DD"),
+				to: monthEnd.toISOString().slice(0, ISO_DATE_LENGTH),
 			};
 }
 

src/entities/bank-card/ui/BankCardFace/BankCardFace.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { formatMoney } from "@/shared/lib";
-import type { BankCard } from "../api/queries";
+import type { BankCard } from "../../api/queries";
 import classes from "./BankCardFace.module.css";
 
 type BankCardFaceProps = { card: BankCard };

src/entities/bank-card/ui/BankCardForm/BankCardForm.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FormProvider, useForm } from "react-hook-form";
-import type { BankCardValues } from "../model/form-validation";
+import type { BankCardValues } from "../../model/form-validation";
 import { BankCardFields } from "./BankCardForm.view";
 
 const meta = {

src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx

@@ -6,7 +6,7 @@ import { describe, expect, it, vi } from "vitest";
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
-import type { BankCard } from "../api/queries";
+import type { BankCard } from "../../api/queries";
 import { BankCardForm } from "./BankCardForm";
 
 const card: BankCard = {

src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx

@@ -4,18 +4,18 @@ import { type FC, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { formatDate } from "@/shared/lib";
-import { useBankMutations } from "../api/mutations";
+import { useBankMutations } from "../../api/mutations";
-import { type BankCard, useBankCard } from "../api/queries";
+import { type BankCard, useBankCard } from "../../api/queries";
 import {
 	type BankCardValues,
 	bankCardSchema,
 	bankMoneyValue,
 	bankToday,
-} from "../model/form-validation";
+} from "../../model/form-validation";
+import { BankFeedback } from "../BankFeedback";
+import classes from "../BankForms.module.css";
+import { useBankFormFocus } from "../useBankFormFocus";
 import { BankCardFields } from "./BankCardForm.view";
-import { BankFeedback } from "./BankFeedback";
-import classes from "./BankForms.module.css";
-import { useBankFormFocus } from "./useBankFormFocus";
 
 type BankCardFormProps = { card?: BankCard; onClose: () => void };
 const BankCardForm: FC<BankCardFormProps> = (props) => {

src/entities/bank-card/ui/BankCardForm/BankCardForm.view.tsx

@@ -8,7 +8,7 @@ import {
 	bankDateInputValue,
 	bankDateSchema,
 	bankToday,
-} from "../model/form-validation";
+} from "../../model/form-validation";
 
 type BankCardFieldsProps = { archived: boolean };
 const BankCardFields: FC<BankCardFieldsProps> = (props) => {

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx

@@ -1,6 +1,6 @@
 import { Stack } from "@mantine/core";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { EntryCard } from "@/shared/ui";
+import { EntryCard } from "@wealthledger/ui";
 import { BankOperationIcon } from "./BankOperationIcon";
 
 const meta = {

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx

@@ -1,8 +1,8 @@
 import type { FC } from "react";
 import { bindIconAnimation } from "@/shared/lib";
-import type { BankOperation } from "../api/queries";
+import type { BankOperation } from "../../api/queries";
 
-import { bankOperationAppearance } from "../model/operation-appearance";
+import { bankOperationAppearance } from "../../model/operation-appearance";
 import classes from "./BankOperationIcon.module.css";
 
 type BankOperationIconProps = {

src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx

@@ -1,10 +1,10 @@
 import { Button, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
 import type { CSSProperties, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { formatMoney } from "@/shared/lib";
-import { LoadingSkeleton } from "@/shared/ui";
+import type { BankSummary } from "../../api/queries";
-import type { BankSummary } from "../api/queries";
+import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
-import { BankOperationIcon } from "./BankOperationIcon";
 import classes from "./BankSummary.module.css";
 
 type BankSummaryViewProps = {

src/entities/bank-card/ui/CategoryManager.test.tsx

@@ -1,74 +0,0 @@
-import { MantineProvider } from "@mantine/core";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { HttpResponse, http } from "msw";
-import { describe, expect, it } from "vitest";
-import { configureAuthClient } from "@/shared/api";
-import { createTestQueryClient } from "@/test/query";
-import { server } from "@/test/server";
-import { CategoryManager } from "./CategoryManager";
-
-describe("CategoryManager", () => {
-	it("rejects duplicate case-insensitive and too long names then renames default identity", async () => {
-		configureAuthClient({
-			accessToken: () => "test",
-			refresh: async () => false,
-			clear: () => {},
-		});
-		let category = {
-			id: "default",
-			name: "Другое",
-			isDefault: true,
-			version: 1,
-		};
-		let creates = 0;
-		let body: unknown;
-		server.use(
-			http.get("*/api/v1/bank-cards/categories", () =>
-				HttpResponse.json([category]),
-			),
-			http.post("*/api/v1/bank-cards/categories", () => {
-				creates++;
-				return HttpResponse.json({});
-			}),
-			http.patch(
-				"*/api/v1/bank-cards/categories/default",
-				async ({ request }) => {
-					body = await request.json();
-					category = { ...category, name: "Остальное", version: 2 };
-					return HttpResponse.json(category);
-				},
-			),
-		);
-		render(
-			<QueryClientProvider client={createTestQueryClient()}>
-				<MantineProvider env="test">
-					<CategoryManager onClose={() => {}} />
-				</MantineProvider>
-			</QueryClientProvider>,
-		);
-		await screen.findByText("Другое");
-		fireEvent.change(screen.getByLabelText(/Название категории/), {
-			target: { value: " другое " },
-		});
-		fireEvent.click(screen.getByRole("button", { name: "Добавить категорию" }));
-		await screen.findByText("Категория с таким названием уже есть.");
-		fireEvent.change(screen.getByLabelText(/Название категории/), {
-			target: { value: "a".repeat(81) },
-		});
-		fireEvent.click(screen.getByRole("button", { name: "Добавить категорию" }));
-		await screen.findByText("Введите название от 1 до 80 символов.");
-		expect(creates).toBe(0);
-		fireEvent.click(screen.getByRole("button", { name: "Переименовать" }));
-		fireEvent.input(screen.getByLabelText(/Название категории/), {
-			target: { value: "Остальное" },
-		});
-		fireEvent.blur(screen.getByLabelText(/Название категории/));
-		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
-		await screen.findByText("Остальное");
-		await waitFor(() =>
-			expect(body).toEqual({ name: "Остальное", version: 1 }),
-		);
-		expect(screen.getByText("По умолчанию")).toBeInTheDocument();
-	});
-});

src/entities/bank-card/ui/CategoryManager/CategoryManager.test.tsx

@@ -0,0 +1,223 @@
+import { MantineProvider } from "@mantine/core";
+import { QueryClientProvider } from "@tanstack/react-query";
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import { describe, expect, it } from "vitest";
+import { configureAuthClient } from "@/shared/api";
+import { createTestQueryClient } from "@/test/query";
+import { server } from "@/test/server";
+import { CategoryManager } from "./CategoryManager";
+
+describe("CategoryManager", () => {
+	it("ignores a late reload for A while editing B and submits B's draft and version", async () => {
+		configureAuthClient({
+			accessToken: () => "test",
+			refresh: async () => false,
+			clear: () => {},
+		});
+		const categories = [
+			{ id: "a", name: "Первая", isDefault: false, version: 1 },
+			{ id: "b", name: "Вторая", isDefault: false, version: 4 },
+		];
+		let reads = 0;
+		let release = () => {};
+		const reloaded = new Promise<void>((resolve) => {
+			release = resolve;
+		});
+		const patches: { id: unknown; body: unknown }[] = [];
+		server.use(
+			http.get("*/api/v1/bank-cards/categories", async () => {
+				reads++;
+				if (reads === 3) await reloaded;
+				return HttpResponse.json(
+					categories.map((category) =>
+						category.id === "a" && reads > 1
+							? {
+									...category,
+									name: reads >= 3 ? "Первая обновлена" : category.name,
+									version: 2,
+								}
+							: category,
+					),
+				);
+			}),
+			http.patch(
+				"*/api/v1/bank-cards/categories/:id",
+				async ({ request, params }) => {
+					patches.push({ id: params.id, body: await request.json() });
+					return patches.length === 1
+						? HttpResponse.json(
+								{ code: "BANK_VERSION_CONFLICT" },
+								{ status: 409 },
+							)
+						: HttpResponse.json(categories[1]);
+				},
+			),
+		);
+		render(
+			<QueryClientProvider client={createTestQueryClient()}>
+				<MantineProvider env="test">
+					<CategoryManager onClose={() => {}} />
+				</MantineProvider>
+			</QueryClientProvider>,
+		);
+		fireEvent.click(
+			(await screen.findAllByRole("button", { name: "Переименовать" }))[0],
+		);
+		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
+		fireEvent.click(
+			await screen.findByRole("button", { name: "Перечитать запись" }),
+		);
+		await waitFor(() => expect(reads).toBe(3));
+		fireEvent.click(
+			screen.getAllByRole("button", { name: "Переименовать" })[1],
+		);
+		fireEvent.change(screen.getByLabelText(/Название категории/), {
+			target: { value: "Новая вторая" },
+		});
+		await act(async () => {
+			release();
+			await reloaded;
+		});
+		await screen.findByText("Первая обновлена");
+		await waitFor(() =>
+			expect(
+				screen.queryByRole("button", {
+					name: /Использовать актуальную версию/,
+				}),
+			).not.toBeInTheDocument(),
+		);
+		expect(screen.getByLabelText(/Название категории/)).toHaveValue(
+			"Новая вторая",
+		);
+		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
+		await waitFor(() =>
+			expect(patches).toEqual([
+				{ id: "a", body: { name: "Первая", version: 1 } },
+				{ id: "b", body: { name: "Новая вторая", version: 4 } },
+			]),
+		);
+	});
+
+	it.each(["Отмена", "Сохранить"])(
+		"clears reloaded recovery after %s",
+		async (action) => {
+			configureAuthClient({
+				accessToken: () => "test",
+				refresh: async () => false,
+				clear: () => {},
+			});
+			let version = 1;
+			let writes = 0;
+			server.use(
+				http.get("*/api/v1/bank-cards/categories", () =>
+					HttpResponse.json([
+						{ id: "a", name: "Первая", isDefault: false, version },
+					]),
+				),
+				http.patch("*/api/v1/bank-cards/categories/a", () => {
+					version = 2;
+					return ++writes === 1
+						? HttpResponse.json(
+								{ code: "BANK_VERSION_CONFLICT" },
+								{ status: 409 },
+							)
+						: HttpResponse.json({});
+				}),
+			);
+			render(
+				<QueryClientProvider client={createTestQueryClient()}>
+					<MantineProvider env="test">
+						<CategoryManager onClose={() => {}} />
+					</MantineProvider>
+				</QueryClientProvider>,
+			);
+			fireEvent.click(
+				await screen.findByRole("button", { name: "Переименовать" }),
+			);
+			fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
+			fireEvent.click(
+				await screen.findByRole("button", { name: "Перечитать запись" }),
+			);
+			await screen.findByRole("button", {
+				name: /Использовать актуальную версию/,
+			});
+			fireEvent.click(screen.getByRole("button", { name: action }));
+			await screen.findByRole("button", { name: "Добавить категорию" });
+			expect(
+				screen.queryByRole("button", {
+					name: /Использовать актуальную версию/,
+				}),
+			).not.toBeInTheDocument();
+		},
+	);
+
+	it("rejects duplicate case-insensitive and too long names then renames default identity", async () => {
+		configureAuthClient({
+			accessToken: () => "test",
+			refresh: async () => false,
+			clear: () => {},
+		});
+		let category = {
+			id: "default",
+			name: "Другое",
+			isDefault: true,
+			version: 1,
+		};
+		let creates = 0;
+		let body: unknown;
+		server.use(
+			http.get("*/api/v1/bank-cards/categories", () =>
+				HttpResponse.json([category]),
+			),
+			http.post("*/api/v1/bank-cards/categories", () => {
+				creates++;
+				return HttpResponse.json({});
+			}),
+			http.patch(
+				"*/api/v1/bank-cards/categories/default",
+				async ({ request }) => {
+					body = await request.json();
+					category = { ...category, name: "Остальное", version: 2 };
+					return HttpResponse.json(category);
+				},
+			),
+		);
+		render(
+			<QueryClientProvider client={createTestQueryClient()}>
+				<MantineProvider env="test">
+					<CategoryManager onClose={() => {}} />
+				</MantineProvider>
+			</QueryClientProvider>,
+		);
+		await screen.findByText("Другое");
+		fireEvent.change(screen.getByLabelText(/Название категории/), {
+			target: { value: " другое " },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Добавить категорию" }));
+		await screen.findByText("Категория с таким названием уже есть.");
+		fireEvent.change(screen.getByLabelText(/Название категории/), {
+			target: { value: "a".repeat(81) },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Добавить категорию" }));
+		await screen.findByText("Введите название от 1 до 80 символов.");
+		expect(creates).toBe(0);
+		fireEvent.click(screen.getByRole("button", { name: "Переименовать" }));
+		fireEvent.input(screen.getByLabelText(/Название категории/), {
+			target: { value: "Остальное" },
+		});
+		fireEvent.blur(screen.getByLabelText(/Название категории/));
+		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
+		await screen.findByText("Остальное");
+		await waitFor(() =>
+			expect(body).toEqual({ name: "Остальное", version: 1 }),
+		);
+		expect(screen.getByText("По умолчанию")).toBeInTheDocument();
+	});
+});

src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx

@@ -8,7 +8,7 @@ import {
 	Text,
 	TextInput,
 } from "@mantine/core";
-import { type FC, useState } from "react";
+import { type FC, useRef, useState } from "react";
 import {
 	Controller,
 	FormProvider,
@@ -18,12 +18,12 @@ import {
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { validationMessage } from "@/shared/i18n";
-import { useBankMutations } from "../api/mutations";
+import { useBankMutations } from "../../api/mutations";
-import { type ExpenseCategory, useBankCategories } from "../api/queries";
+import { type ExpenseCategory, useBankCategories } from "../../api/queries";
-import { BankFeedback } from "./BankFeedback";
+import { BankFeedback } from "../BankFeedback";
-import classes from "./BankForms.module.css";
+import classes from "../BankForms.module.css";
-import { BankOperationIcon } from "./BankOperationIcon";
+import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
-import { useBankFormFocus } from "./useBankFormFocus";
+import { useBankFormFocus } from "../useBankFormFocus";
 
 const MAX_CATEGORY_NAME_LENGTH = 80;
 
@@ -60,6 +60,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 	const categories = useBankCategories();
 	const mutation = useBankMutations();
 	const [editing, setEditing] = useState<ExpenseCategory>();
+	const editSession = useRef(0);
 	const [error, setError] = useState<unknown>();
 	const [latest, setLatest] = useState<ExpenseCategory>();
 	const methods = useForm<CategoryValues>({
@@ -114,7 +115,9 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 								});
 								if (result) props.onCreated?.(result.id);
 							}
+							editSession.current++;
 							setEditing(undefined);
+							setLatest(undefined);
 							methods.reset({ name: "" });
 						} catch (failure) {
 							setError(failure);
@@ -138,6 +141,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 									<Button
 										variant="subtle"
 										onClick={() => {
+											editSession.current++;
 											setEditing(category);
 											methods.reset({ name: category.name });
 											setError(undefined);
@@ -167,7 +171,9 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 										<Button
 											variant="default"
 											onClick={async () => {
+												const session = editSession.current;
 												const response = await categories.refetch();
+												if (session !== editSession.current) return;
 												if (response.error) setError(response.error);
 												else
 													setLatest(
@@ -180,7 +186,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 									)}
 								</>
 							) : null}
-							{latest && (
+							{latest && latest.id === editing?.id && (
 								<>
 									<Text>{t("bank.versionHint", { details: latest.name })}</Text>
 									<Button
@@ -202,7 +208,9 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 									<Button
 										variant="default"
 										onClick={() => {
+											editSession.current++;
 											setEditing(undefined);
+											setLatest(undefined);
 											methods.reset({ name: "" });
 											setError(undefined);
 										}}

src/entities/bond/api/queries.ts

@@ -1,8 +1,4 @@
-import {
+import { apiQueryClient, type paths, useResourceQuery } from "@/shared/api";
-	apiQueryClient,
-	type paths,
-	useAuthenticatedQuery,
-} from "@/shared/api";
 
 type BondPeriod = NonNullable<
 	NonNullable<
@@ -13,7 +9,7 @@ type BondPeriod = NonNullable<
 const BOND_STALE_TIME_MS = 30_000;
 
 function useBondSearch(query: string) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds", {
 			params: { query: { query } },
 		}),
@@ -36,11 +32,11 @@ function useBond(identifier: string) {
 			identifier,
 		);
 
-	const byUid = useAuthenticatedQuery({
+	const byUid = useResourceQuery({
 		...bondQueryOptions(identifier),
 		enabled: Boolean(identifier) && isUid,
 	});
-	const byTicker = useAuthenticatedQuery({
+	const byTicker = useResourceQuery({
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds/by-ticker/{ticker}", {
 			params: { path: { ticker: identifier } },
 		}),
@@ -50,7 +46,7 @@ function useBond(identifier: string) {
 	return isUid ? byUid : byTicker;
 }
 function useBondMetrics(uid: string) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/metrics", {
 			params: { path: { uid } },
 		}),
@@ -59,7 +55,7 @@ function useBondMetrics(uid: string) {
 	});
 }
 function useBondQuote(uid: string) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/quote", {
 			params: { path: { uid } },
 		}),
@@ -68,7 +64,7 @@ function useBondQuote(uid: string) {
 	});
 }
 function useBondCandles(uid: string, period: BondPeriod) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/candles", {
 			params: { path: { uid }, query: { period } },
 		}),
@@ -77,7 +73,8 @@ function useBondCandles(uid: string, period: BondPeriod) {
 	});
 }
 function useBondPosition(uid: string) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
+		meta: { accessGroup: "brokerage" },
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/position", {
 			params: { path: { uid } },
 		}),
@@ -86,7 +83,8 @@ function useBondPosition(uid: string) {
 	});
 }
 function useBondCoupons(uid: string) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
+		meta: { accessGroup: "brokerage" },
 		...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/coupons", {
 			params: { path: { uid } },
 		}),

src/entities/broker-operation/api/useBrokerageOperations.test.tsx

@@ -8,7 +8,7 @@ import {
 } from "./useBrokerageOperations";
 
 describe("useBrokerageOperations", () => {
-	it("normalizes query parameters and loads a page without retries", async () => {
+	it("normalizes categories, preserves the cursor and loads a page", async () => {
 		configureAuthClient({
 			accessToken: () => "token",
 			refresh: async () => true,

src/entities/broker-operation/api/useBrokerageOperations.ts

@@ -1,16 +1,14 @@
-import {
+import { apiQueryClient, type paths, useResourceQuery } from "@/shared/api";
-	apiQueryClient,
-	type paths,
-	useAuthenticatedQuery,
-} from "@/shared/api";
 
 type OperationsEndpoint =
 	paths["/api/v1/brokerage-accounts/{accountId}/operations"]["get"];
 
-type BrokerageOperation =
+type BrokerageOperation = NonNullable<
-	OperationsEndpoint["responses"][200]["content"]["application/json"]["items"][number];
+	OperationsEndpoint["responses"][200]["content"]["application/json"]["data"]
-type BrokerageOperationsQuery = NonNullable<
+>["items"][number];
-	OperationsEndpoint["parameters"]["query"]
+type BrokerageOperationsQuery = Omit<
+	NonNullable<OperationsEndpoint["parameters"]["query"]>,
+	"sync"
 >;
 type OperationCategory = BrokerageOperation["category"];
 
@@ -56,7 +54,8 @@ function useBrokerageOperations(
 	accountId: string | undefined,
 	query: BrokerageOperationsQuery = {},
 ) {
-	return useAuthenticatedQuery({
+	return useResourceQuery({
+		meta: { accessGroup: "brokerage" },
 		...brokerageOperationsQueryOptions(accountId, query),
 		enabled: Boolean(accountId),
 		staleTime: 30_000,

src/entities/broker-operation/ui/LedgerEntryRow.tsx

@@ -1,4 +1,5 @@
 import { Anchor, Group, Text } from "@mantine/core";
+import { EntryCard } from "@wealthledger/ui";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
@@ -8,7 +9,6 @@ import {
 	formatSnapshotTime,
 	instrumentLogoUrl,
 } from "@/shared/lib";
-import { EntryCard } from "@/shared/ui";
 import type { BrokerageOperation } from "../api/useBrokerageOperations";
 import { operationLabelKey, paymentPresentation } from "../model/display";
 

src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx

@@ -3,6 +3,7 @@ import { HttpResponse, http } from "msw";
 import { describe, expect, it, vi } from "vitest";
 import { configureAuthClient } from "@/shared/api";
 import { createQueryWrapper } from "@/test/query";
+import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 import { useBrokerageAccounts } from "./useBrokerageAccounts";
 
@@ -15,7 +16,8 @@ describe("useBrokerageAccounts", () => {
 		});
 		server.use(
 			http.get("*/api/v1/brokerage-accounts", () =>
-				HttpResponse.json([
+				HttpResponse.json(
+					resource([
 						{
 							id: "account-1",
 							name: "Основной",
@@ -24,6 +26,7 @@ describe("useBrokerageAccounts", () => {
 						},
 					]),
 				),
+			),
 		);
 
 		const { result } = renderHook(() => useBrokerageAccounts(), {
@@ -52,14 +55,16 @@ describe("useBrokerageAccounts", () => {
 			http.get("*/api/v1/brokerage-accounts", () => {
 				calls += 1;
 				return calls === 1
-					? HttpResponse.json([
+					? HttpResponse.json(
+							resource([
 								{
 									id: "account-1",
 									name: "Основной",
 									type: "BROKERAGE",
 									openedOn: "2024-08-13",
 								},
-						])
+							]),
+						)
 					: HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 });
 			}),
 		);