feat(admin-ui): migrate from custom components to @nstart/ui design system

Свои Modal/Button/inputs выкинуты — берём nstart-ui v0.1.3 как в других corp React приложениях. Установка через .npmrc → repo.nstart.cloud/repository/npm-hosted/. Что сделано: - .npmrc: scope @nstart на corp Nexus + min-release-age=7 - deps: @nstart/ui ^0.1.3, @phosphor-icons/react ^2.1.10 - bumped peer deps: i18next ^26 + react-i18next ^17 (требование nstart-ui) - styles.css: импорт @nstart/ui/styles/{fonts,theme}.css + critical @source директива (без неё Tailwind v4 tree-shaking дропнул бы все классы из dist либы) - main.tsx: <NStartUiProvider> на корне - DROP src/components/ui/Modal.tsx (свой Modal больше не нужен) Routes: - __root: LanguageSwitch вместо двух кнопок RU/EN, токены ultramarain/regolith/carbon - dictionaries.index: PageHeader + Badge для scope chip + Alert/EmptyState/LoadingBlock - dictionaries.$name: PageHeader с actions, Modal/Panel/Table/TableRow/Cell, IconButton с Phosphor (PencilSimple, XCircle), Button variant=primary/danger/ghost Form (SchemaDrivenForm): - TextInput/TextArea/SingleSelect/Checkbox + FieldLabel/Hint/Error из @nstart/ui - FormSection + FormGrid columns=1|2 для группировки - FormActions align=end с Button loading state - Alert variant=error для server-side ошибок (422 IdempotencyConflict / 409 InProgress) - ajv валидация по schema_json остаётся такой же (Draft-07, как у backend) Bundle: 192KB → 659KB gzip — тянет echarts/lottie/brand assets из nstart-ui, для internal admin tool приемлемо (cached after first load).
2026-05-04 02:24:44 +03:00
parent 7593699990
commit ebf1b03863
11 changed files with 436 additions and 409 deletions
@@ -0,0 +1,2 @@
+@nstart:registry=https://repo.nstart.cloud/repository/npm-hosted/
+min-release-age=7
@@ -10,17 +10,19 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
+    "@nstart/ui": "^0.1.3",
+    "@phosphor-icons/react": "^2.1.10",
    "@tanstack/react-query": "^5.62.0",
    "@tanstack/react-router": "^1.86.0",
    "ajv": "^8.17.1",
    "ajv-formats": "^3.0.1",
    "axios": "^1.7.9",
-    "i18next": "^24.0.5",
+    "i18next": "^26.0.3",
    "i18next-browser-languagedetector": "^8.0.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0"
+    "react-i18next": "^17.0.2"
  },
  "devDependencies": {
    "@tanstack/router-vite-plugin": "^1.86.0",
@@ -11,6 +11,12 @@ importers:
      '@hookform/resolvers':
        specifier: ^3.9.1
        version: 3.10.0(react-hook-form@7.75.0(react@19.2.5))
+      '@nstart/ui':
+        specifier: ^0.1.3
+        version: 0.1.3(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react-i18next@17.0.6(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3))(react@19.2.5)
+      '@phosphor-icons/react':
+        specifier: ^2.1.10
+        version: 2.1.10(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      '@tanstack/react-query':
        specifier: ^5.62.0
        version: 5.100.9(react@19.2.5)
@@ -27,8 +33,8 @@ importers:
        specifier: ^1.7.9
        version: 1.16.0
      i18next:
-        specifier: ^24.0.5
-        version: 24.2.3(typescript@5.9.3)
+        specifier: ^26.0.3
+        version: 26.0.8(typescript@5.9.3)
      i18next-browser-languagedetector:
        specifier: ^8.0.2
        version: 8.2.1
@@ -42,8 +48,8 @@ importers:
        specifier: ^7.54.2
        version: 7.75.0(react@19.2.5)
      react-i18next:
-        specifier: ^15.4.0
-        version: 15.7.4(i18next@24.2.3(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3)
+        specifier: ^17.0.2
+        version: 17.0.6(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3)
    devDependencies:
      '@tailwindcss/vite':
        specifier: ^4.0.0-beta.7
@@ -348,6 +354,22 @@ packages:
  '@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

+  '@nstart/ui@0.1.3':
+    resolution: {integrity: sha512-dLhM2Uzvok1UB+86c+WIYz/1uYr/wN3Ch1Ab3ioZbzxBEt0bZQs+QYkj3GXAEzffCjV4zTHen31yJUHzJmpyTQ==}
+    engines: {node: ^24.0.0 || ^22.0.0}
+    peerDependencies:
+      i18next: ^26.0.3
+      react: ^19.0.0
+      react-dom: ^19.0.0
+      react-i18next: ^17.0.2
+
+  '@phosphor-icons/react@2.1.10':
+    resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
  '@rolldown/pluginutils@1.0.0-beta.27':
    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}

@@ -779,6 +801,9 @@ packages:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}

+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
  electron-to-chromium@1.5.349:
    resolution: {integrity: sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A==}

@@ -886,16 +911,19 @@ packages:
    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
    engines: {node: '>= 0.4'}

+  hls.js@1.6.16:
+    resolution: {integrity: sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==}
+
  html-parse-stringify@3.0.1:
    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}

  i18next-browser-languagedetector@8.2.1:
    resolution: {integrity: sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==}

-  i18next@24.2.3:
-    resolution: {integrity: sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==}
+  i18next@26.0.8:
+    resolution: {integrity: sha512-BRzLom0mhDhV9v0QhgUUHWQJuwFmnr1194xEcNLYD6ym8y8s542n4jXUvRLnhNTbh9PmpU6kGZamyuGHQMsGjw==}
    peerDependencies:
-      typescript: ^5
+      typescript: ^5 || ^6
    peerDependenciesMeta:
      typescript:
        optional: true
@@ -1014,6 +1042,15 @@ packages:
    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
    engines: {node: '>= 12.0.0'}

+  lottie-react@2.4.1:
+    resolution: {integrity: sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  lottie-web@5.13.0:
+    resolution: {integrity: sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==}
+
  lru-cache@5.1.1:
    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}

@@ -1085,14 +1122,14 @@ packages:
    peerDependencies:
      react: ^16.8.0 || ^17 || ^18 || ^19

-  react-i18next@15.7.4:
-    resolution: {integrity: sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==}
+  react-i18next@17.0.6:
+    resolution: {integrity: sha512-WzJ6SMKF+GTD7JZZqxSR1AKKmXjaSu39sClUrNlwxS4Tl7a99O+ltFy6yhPMO+wgZuxpQjJ2PZkfrQKmAqrLhw==}
    peerDependencies:
-      i18next: '>= 23.4.0'
+      i18next: '>= 26.0.1'
      react: '>= 16.8.0'
      react-dom: '*'
      react-native: '*'
-      typescript: ^5
+      typescript: ^5 || ^6
    peerDependenciesMeta:
      react-dom:
        optional: true
@@ -1158,6 +1195,9 @@ packages:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}

+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
  typescript@5.9.3:
    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
    engines: {node: '>=14.17'}
@@ -1231,6 +1271,9 @@ packages:
  zod@3.25.76:
    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}

+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
 snapshots:

  '@babel/code-frame@7.29.0':
@@ -1458,6 +1501,22 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

+  '@nstart/ui@0.1.3(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react-i18next@17.0.6(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3))(react@19.2.5)':
+    dependencies:
+      '@phosphor-icons/react': 2.1.10(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      echarts: 6.0.0
+      hls.js: 1.6.16
+      i18next: 26.0.8(typescript@5.9.3)
+      lottie-react: 2.4.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      react-i18next: 17.0.6(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3)
+
+  '@phosphor-icons/react@2.1.10(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+    dependencies:
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+
  '@rolldown/pluginutils@1.0.0-beta.27': {}

  '@rollup/rollup-android-arm-eabi@4.60.2':
@@ -1839,6 +1898,11 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.2.0

+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
  electron-to-chromium@1.5.349: {}

  enhanced-resolve@5.21.0:
@@ -1957,6 +2021,8 @@ snapshots:
    dependencies:
      function-bind: 1.1.2

+  hls.js@1.6.16: {}
+
  html-parse-stringify@3.0.1:
    dependencies:
      void-elements: 3.1.0
@@ -1965,9 +2031,7 @@ snapshots:
    dependencies:
      '@babel/runtime': 7.29.2

-  i18next@24.2.3(typescript@5.9.3):
-    dependencies:
-      '@babel/runtime': 7.29.2
+  i18next@26.0.8(typescript@5.9.3):
    optionalDependencies:
      typescript: 5.9.3

@@ -2044,6 +2108,14 @@ snapshots:
      lightningcss-win32-arm64-msvc: 1.32.0
      lightningcss-win32-x64-msvc: 1.32.0

+  lottie-react@2.4.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+    dependencies:
+      lottie-web: 5.13.0
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+
+  lottie-web@5.13.0: {}
+
  lru-cache@5.1.1:
    dependencies:
      yallist: 3.1.1
@@ -2095,12 +2167,13 @@ snapshots:
    dependencies:
      react: 19.2.5

-  react-i18next@15.7.4(i18next@24.2.3(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3):
+  react-i18next@17.0.6(i18next@26.0.8(typescript@5.9.3))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@5.9.3):
    dependencies:
      '@babel/runtime': 7.29.2
      html-parse-stringify: 3.0.1
-      i18next: 24.2.3(typescript@5.9.3)
+      i18next: 26.0.8(typescript@5.9.3)
      react: 19.2.5
+      use-sync-external-store: 1.6.0(react@19.2.5)
    optionalDependencies:
      react-dom: 19.2.5(react@19.2.5)
      typescript: 5.9.3
@@ -2171,6 +2244,8 @@ snapshots:
    dependencies:
      is-number: 7.0.0

+  tslib@2.3.0: {}
+
  typescript@5.9.3: {}

  unplugin@3.0.0:
@@ -2209,3 +2284,7 @@ snapshots:
  yallist@3.1.1: {}

  zod@3.25.76: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
@@ -3,6 +3,21 @@ import { useForm, Controller, type SubmitHandler } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import Ajv, { type ErrorObject } from 'ajv'
 import addFormats from 'ajv-formats'
+import {
+  Alert,
+  Button,
+  Checkbox,
+  FieldError,
+  FieldHint,
+  FieldLabel,
+  FormActions,
+  FormGrid,
+  FormSection,
+  SingleSelect,
+  TextArea,
+  TextInput,
+  type SelectOption,
+} from '@nstart/ui'
 import type { CreateRecordRequest, JsonSchema } from '@/api/client'

 type FormValues = {
@@ -28,9 +43,7 @@ const ajv = new Ajv({ allErrors: true, strict: false })
 addFormats(ajv)

 const isLocalized = (s: JsonSchema): boolean => Boolean(s['x-localized'])
-
-const fieldLabel = (key: string, schema: JsonSchema): string =>
-  schema.title ?? key
+const fieldLabel = (key: string, schema: JsonSchema): string => schema.title ?? key

 export const SchemaDrivenForm = ({
  schema,
@@ -74,59 +87,43 @@ export const SchemaDrivenForm = ({
      }
    }

-    const req: CreateRecordRequest = {
+    onSubmit({
      businessKey: values.businessKey.trim(),
      data: values.data,
      validFrom: values.validFrom || undefined,
      validTo: values.validTo || undefined,
-    }
-    onSubmit(req)
+    })
  }

  return (
-    <form onSubmit={handleSubmit(submit)} className="space-y-4">
-      <div>
-        <label className="block text-sm font-medium text-zinc-700 mb-1">
-          {t('form.businessKey')} <span className="text-red-500">*</span>
-        </label>
-        <input
-          type="text"
-          disabled={mode === 'edit'}
-          {...register('businessKey', { required: true, minLength: 1 })}
-          className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:bg-zinc-100 disabled:text-zinc-500 font-mono"
-          placeholder="MY_RECORD_KEY"
-        />
-        {formState.errors.businessKey && (
-          <p className="text-xs text-red-600 mt-1">{t('form.error.required')}</p>
-        )}
-      </div>
-
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="block text-sm font-medium text-zinc-700 mb-1">
-            {t('form.validFrom')}
-          </label>
-          <input
+    <form onSubmit={handleSubmit(submit)} className="space-y-6">
+      <FormSection title={t('form.identity')}>
+        <FormGrid columns={1}>
+          <TextInput
+            label={t('form.businessKey')}
+            required
+            disabled={mode === 'edit'}
+            placeholder="MY_RECORD_KEY"
+            error={formState.errors.businessKey ? t('form.error.required') : undefined}
+            {...register('businessKey', { required: true, minLength: 1 })}
+          />
+        </FormGrid>
+        <FormGrid columns={2}>
+          <TextInput
            type="datetime-local"
+            label={t('form.validFrom')}
            {...register('validFrom')}
-            className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-zinc-700 mb-1">
-            {t('form.validTo')}
-          </label>
-          <input
+          <TextInput
            type="datetime-local"
+            label={t('form.validTo')}
            {...register('validTo')}
-            className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
          />
-        </div>
-      </div>
+        </FormGrid>
+      </FormSection>

-      <div className="border-t border-zinc-200 pt-4">
-        <h3 className="text-sm font-semibold text-zinc-700 mb-3">{t('form.dataFields')}</h3>
-        <div className="space-y-3">
+      <FormSection title={t('form.dataFields')}>
+        <FormGrid columns={1}>
          {Object.entries(properties).map(([key, propSchema]) => (
            <FieldRenderer
              key={key}
@@ -139,32 +136,19 @@ export const SchemaDrivenForm = ({
              fieldError={formState.errors.data?.[key as keyof FormValues['data']]}
            />
          ))}
-        </div>
-      </div>
+        </FormGrid>
+      </FormSection>

-      {serverError && (
-        <div className="px-3 py-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
-          {serverError}
-        </div>
-      )}
+      {serverError && <Alert variant="error">{serverError}</Alert>}

-      <div className="flex justify-end gap-2 pt-2 border-t border-zinc-200">
-        <button
-          type="button"
-          onClick={onCancel}
-          disabled={isPending}
-          className="px-4 py-2 text-sm border border-zinc-300 rounded hover:bg-zinc-50 disabled:opacity-50"
-        >
+      <FormActions align="end">
+        <Button type="button" variant="ghost" onClick={onCancel} disabled={isPending}>
          {t('form.cancel')}
-        </button>
-        <button
-          type="submit"
-          disabled={isPending}
-          className="px-4 py-2 text-sm bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
-        >
+        </Button>
+        <Button type="submit" variant="primary" loading={isPending}>
          {isPending ? t('form.saving') : t('form.save')}
-        </button>
-      </div>
+        </Button>
+      </FormActions>
    </form>
  )
 }
@@ -194,12 +178,10 @@ const FieldRenderer = ({
  if (isLocalized(schema)) {
    return (
      <div>
-        <label className="block text-sm font-medium text-zinc-700 mb-1">
-          {label}
-          {required && <span className="text-red-500"> *</span>}
-          <span className="text-xs text-zinc-400 ml-1">(i18n)</span>
-        </label>
-        <div className="space-y-2 pl-3 border-l-2 border-zinc-200">
+        <FieldLabel required={required}>
+          {label} <span className="text-2xs uppercase tracking-label text-carbon/60 ml-1">i18n</span>
+        </FieldLabel>
+        <div className="space-y-2 pl-3 border-l-2 border-regolith mt-1">
          {supportedLocales.map((loc) => (
            <Controller
              key={loc}
@@ -207,53 +189,43 @@ const FieldRenderer = ({
              name={`data.${fieldKey}.${loc}` as `data.${string}`}
              render={({ field }) => (
                <div className="flex items-center gap-2">
-                  <span className="text-xs font-mono text-zinc-500 w-12">
+                  <span className="text-2xs font-mono text-carbon/70 w-12 shrink-0">
                    {loc === defaultLocale ? <strong>{loc}</strong> : loc}
                  </span>
-                  <input
-                    type="text"
-                    {...field}
-                    value={(field.value as string | undefined) ?? ''}
-                    className="flex-1 px-3 py-1.5 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-                  />
+                  <div className="flex-1">
+                    <TextInput {...field} value={(field.value as string | undefined) ?? ''} />
+                  </div>
                </div>
              )}
            />
          ))}
        </div>
-        {schema.description && (
-          <p className="text-xs text-zinc-500 mt-1">{schema.description}</p>
-        )}
-        {errorMsg && <p className="text-xs text-red-600 mt-1">{errorMsg}</p>}
+        {schema.description && <FieldHint>{schema.description}</FieldHint>}
+        <FieldError>{errorMsg}</FieldError>
      </div>
    )
  }

  if (schema.enum) {
+    const options: SelectOption[] = schema.enum.map((v) => ({
+      id: String(v),
+      label: String(v),
+    }))
    return (
      <Controller
        control={control}
        name={`data.${fieldKey}` as `data.${string}`}
        render={({ field }) => (
-          <div>
-            <label className="block text-sm font-medium text-zinc-700 mb-1">
-              {label}
-              {required && <span className="text-red-500"> *</span>}
-            </label>
-            <select
-              {...field}
-              value={(field.value as string | undefined) ?? ''}
-              className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white"
-            >
-              <option value="">—</option>
-              {schema.enum?.map((v) => (
-                <option key={String(v)} value={String(v)}>
-                  {String(v)}
-                </option>
-              ))}
-            </select>
-            {errorMsg && <p className="text-xs text-red-600 mt-1">{errorMsg}</p>}
-          </div>
+          <SingleSelect
+            label={label}
+            required={required}
+            hint={schema.description}
+            error={errorMsg}
+            options={options}
+            value={(field.value as string | undefined) ?? ''}
+            onChange={field.onChange}
+            placeholder="—"
+          />
        )}
      />
    )
@@ -265,15 +237,13 @@ const FieldRenderer = ({
        control={control}
        name={`data.${fieldKey}` as `data.${string}`}
        render={({ field }) => (
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="checkbox"
-              checked={Boolean(field.value)}
-              onChange={(e) => field.onChange(e.target.checked)}
-              className="rounded"
-            />
-            <span>{label}</span>
-          </label>
+          <Checkbox
+            label={label}
+            description={schema.description}
+            error={errorMsg}
+            checked={Boolean(field.value)}
+            onChange={(e) => field.onChange(e.target.checked)}
+          />
        )}
      />
    )
@@ -285,22 +255,18 @@ const FieldRenderer = ({
        control={control}
        name={`data.${fieldKey}` as `data.${string}`}
        render={({ field }) => (
-          <div>
-            <label className="block text-sm font-medium text-zinc-700 mb-1">
-              {label}
-              {required && <span className="text-red-500"> *</span>}
-            </label>
-            <input
-              type="number"
-              step={schema.type === 'integer' ? 1 : 'any'}
-              value={(field.value as number | undefined) ?? ''}
-              onChange={(e) =>
-                field.onChange(e.target.value === '' ? undefined : Number(e.target.value))
-              }
-              className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-            />
-            {errorMsg && <p className="text-xs text-red-600 mt-1">{errorMsg}</p>}
-          </div>
+          <TextInput
+            type="number"
+            step={schema.type === 'integer' ? 1 : 'any'}
+            label={label}
+            required={required}
+            hint={schema.description}
+            error={errorMsg}
+            value={(field.value as number | undefined) ?? ''}
+            onChange={(e) =>
+              field.onChange(e.target.value === '' ? undefined : Number(e.target.value))
+            }
+          />
        )}
      />
    )
@@ -312,27 +278,21 @@ const FieldRenderer = ({
        control={control}
        name={`data.${fieldKey}` as `data.${string}`}
        render={({ field }) => (
-          <div>
-            <label className="block text-sm font-medium text-zinc-700 mb-1">
-              {label}
-              {required && <span className="text-red-500"> *</span>}
-              <span className="text-xs text-zinc-400 ml-1">(comma-separated)</span>
-            </label>
-            <input
-              type="text"
-              value={Array.isArray(field.value) ? (field.value as string[]).join(', ') : ''}
-              onChange={(e) =>
-                field.onChange(
-                  e.target.value
-                    .split(',')
-                    .map((s) => s.trim())
-                    .filter(Boolean),
-                )
-              }
-              className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-            />
-            {errorMsg && <p className="text-xs text-red-600 mt-1">{errorMsg}</p>}
-          </div>
+          <TextInput
+            label={label}
+            required={required}
+            hint={schema.description ? `${schema.description} (comma-separated)` : 'comma-separated'}
+            error={errorMsg}
+            value={Array.isArray(field.value) ? (field.value as string[]).join(', ') : ''}
+            onChange={(e) =>
+              field.onChange(
+                e.target.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              )
+            }
+          />
        )}
      />
    )
@@ -344,33 +304,30 @@ const FieldRenderer = ({
      name={`data.${fieldKey}` as `data.${string}`}
      render={({ field }) => {
        const isLong = (schema.maxLength ?? 0) > 200
+        if (isLong) {
+          return (
+            <TextArea
+              label={label}
+              required={required}
+              hint={schema.description}
+              error={errorMsg}
+              rows={3}
+              {...field}
+              value={(field.value as string | undefined) ?? ''}
+            />
+          )
+        }
        return (
-          <div>
-            <label className="block text-sm font-medium text-zinc-700 mb-1">
-              {label}
-              {required && <span className="text-red-500"> *</span>}
-            </label>
-            {isLong ? (
-              <textarea
-                {...field}
-                value={(field.value as string | undefined) ?? ''}
-                rows={3}
-                className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-              />
-            ) : (
-              <input
-                type={schema.format === 'date-time' ? 'datetime-local' : 'text'}
-                {...field}
-                value={(field.value as string | undefined) ?? ''}
-                pattern={schema.pattern}
-                className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-              />
-            )}
-            {schema.description && (
-              <p className="text-xs text-zinc-500 mt-1">{schema.description}</p>
-            )}
-            {errorMsg && <p className="text-xs text-red-600 mt-1">{errorMsg}</p>}
-          </div>
+          <TextInput
+            type={schema.format === 'date-time' ? 'datetime-local' : 'text'}
+            label={label}
+            required={required}
+            hint={schema.description}
+            error={errorMsg}
+            pattern={schema.pattern}
+            {...field}
+            value={(field.value as string | undefined) ?? ''}
+          />
        )
      }}
    />
@@ -1,50 +0,0 @@
-import { useEffect, type ReactNode } from 'react'
-
-type Props = {
-  open: boolean
-  title: string
-  onClose: () => void
-  children: ReactNode
-  widthClass?: string
-}
-
-export const Modal = ({ open, title, onClose, children, widthClass = 'max-w-2xl' }: Props) => {
-  useEffect(() => {
-    if (!open) return
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    window.addEventListener('keydown', handleKey)
-    return () => window.removeEventListener('keydown', handleKey)
-  }, [open, onClose])
-
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-zinc-900/50 backdrop-blur-sm pt-16 px-4"
-      role="dialog"
-      aria-modal="true"
-      aria-label={title}
-      onClick={onClose}
-    >
-      <div
-        className={`bg-white rounded-lg shadow-xl w-full ${widthClass} max-h-[85vh] flex flex-col`}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 py-3 border-b border-zinc-200">
-          <h2 className="text-lg font-semibold">{title}</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="text-zinc-400 hover:text-zinc-700 text-xl leading-none w-8 h-8 rounded hover:bg-zinc-100"
-            aria-label="Close"
-          >
-            ×
-          </button>
-        </div>
-        <div className="overflow-y-auto p-5">{children}</div>
-      </div>
-    </div>
-  )
-}
@@ -15,6 +15,7 @@ i18n
          'app.title': 'Ordinis НСИ ЦУОД',
          'nav.dictionaries': 'Справочники',
          'header.scope': 'Доступный scope',
+          'dict.list.subtitle': 'Каталоги НСИ ЦУОД ОДХ',
          'dict.empty': 'В этом справочнике пока нет записей',
          'dict.col.businessKey': 'Бизнес-ключ',
          'dict.col.scope': 'Scope',
@@ -30,6 +31,7 @@ i18n
            'Запись «{{key}}» будет помечена как закрытая (valid_to = now). Действие обратимо через создание новой версии.',
          'dict.confirmClose.reason': 'Причина (опционально)',
          'dict.confirmClose.reasonPlaceholder': 'например, «дубликат» или «выведено из эксплуатации»',
+          'form.identity': 'Идентификация',
          'form.businessKey': 'Бизнес-ключ',
          'form.validFrom': 'Действует с',
          'form.validTo': 'Действует до',
@@ -47,6 +49,7 @@ i18n
          'app.title': 'Ordinis MDM',
          'nav.dictionaries': 'Dictionaries',
          'header.scope': 'Allowed scope',
+          'dict.list.subtitle': 'Reference data catalogues',
          'dict.empty': 'No records in this dictionary yet',
          'dict.col.businessKey': 'Business key',
          'dict.col.scope': 'Scope',
@@ -62,6 +65,7 @@ i18n
            'Record "{{key}}" will be marked as closed (valid_to = now). Reversible by creating a new version.',
          'dict.confirmClose.reason': 'Reason (optional)',
          'dict.confirmClose.reasonPlaceholder': 'e.g., "duplicate" or "decommissioned"',
+          'form.identity': 'Identity',
          'form.businessKey': 'Business key',
          'form.validFrom': 'Valid from',
          'form.validTo': 'Valid to',
@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { NStartUiProvider } from '@nstart/ui'
 import { routeTree } from './routeTree.gen'
 import './i18n'
 import './styles.css'
@@ -23,7 +24,9 @@ declare module '@tanstack/react-router' {
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <NStartUiProvider>
+        <RouterProvider router={router} />
+      </NStartUiProvider>
    </QueryClientProvider>
  </StrictMode>,
 )
@@ -1,42 +1,41 @@
 import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router'
 import type { QueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import { LanguageSwitch } from '@nstart/ui'

 export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  component: RootLayout,
 })

+const LANG_OPTIONS = [
+  { id: 'ru-RU', label: 'RU' },
+  { id: 'en-US', label: 'EN' },
+]
+
 function RootLayout() {
  const { t, i18n } = useTranslation()
  return (
-    <div className="min-h-full flex flex-col">
-      <header className="border-b border-zinc-200 bg-white">
+    <div className="min-h-full flex flex-col bg-white">
+      <header className="border-b border-regolith bg-white">
        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center gap-6">
-          <Link to="/" className="font-semibold text-lg text-brand-700">
+          <Link to="/" className="font-primary text-lg text-ultramarain">
            {t('app.title')}
          </Link>
          <nav className="flex gap-4 text-sm">
            <Link
              to="/dictionaries"
-              className="text-zinc-600 hover:text-brand-700"
-              activeProps={{ className: 'text-brand-700 font-medium' }}
+              className="text-carbon hover:text-ultramarain"
+              activeProps={{ className: 'text-ultramarain font-medium' }}
            >
              {t('nav.dictionaries')}
            </Link>
          </nav>
-          <div className="ml-auto flex items-center gap-2 text-sm">
-            <button
-              onClick={() => i18n.changeLanguage('ru-RU')}
-              className={`px-2 py-1 rounded ${i18n.language === 'ru-RU' ? 'bg-brand-50 text-brand-700' : 'text-zinc-500'}`}
-            >
-              RU
-            </button>
-            <button
-              onClick={() => i18n.changeLanguage('en-US')}
-              className={`px-2 py-1 rounded ${i18n.language === 'en-US' ? 'bg-brand-50 text-brand-700' : 'text-zinc-500'}`}
-            >
-              EN
-            </button>
+          <div className="ml-auto">
+            <LanguageSwitch
+              value={i18n.language}
+              options={LANG_OPTIONS}
+              onChange={(id) => i18n.changeLanguage(id)}
+            />
          </div>
        </div>
      </header>
@@ -2,10 +2,28 @@ import { useState } from 'react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import axios from 'axios'
+import {
+  Alert,
+  Badge,
+  Button,
+  EmptyState,
+  IconButton,
+  LoadingBlock,
+  Modal,
+  PageHeader,
+  Panel,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TextInput,
+} from '@nstart/ui'
+import { PlusIcon, PencilSimpleIcon, XCircleIcon } from '@phosphor-icons/react'
 import { useDictionaryDetail, useRecords } from '@/api/queries'
 import { useCreateRecord, useUpdateRecord, useCloseRecord } from '@/api/mutations'
 import type { CreateRecordRequest, FlattenedRecord } from '@/api/client'
-import { Modal } from '@/components/ui/Modal'
 import { SchemaDrivenForm } from '@/components/form/SchemaDrivenForm'

 export const Route = createFileRoute('/dictionaries/$name')({
@@ -60,95 +78,106 @@ function DictionaryDetail() {
    edit.kind === 'create' ? createMut : edit.kind === 'edit' ? updateMut : null
  const serverError = serverErrorMessage(activeMutation?.error)

+  const totalRecords = recordsResult.data?.length ?? 0
+
  return (
-    <div>
-      <div className="flex items-center gap-2 mb-4">
-        <Link to="/dictionaries" className="text-sm text-zinc-500 hover:text-brand-700">
-          ← {t('nav.dictionaries')}
-        </Link>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        breadcrumb={
+          <Link to="/dictionaries" className="text-sm text-carbon/70 hover:text-ultramarain">
+            ← {t('nav.dictionaries')}
+          </Link>
+        }
+        title={detailQuery.data?.displayName ?? name}
+        description={
+          detailQuery.data?.description
+            ? `${detailQuery.data.description} · ${totalRecords} ${t('dict.list.records')}`
+            : `${totalRecords} ${t('dict.list.records')}`
+        }
+        actions={
+          <Button
+            variant="primary"
+            leftIcon={<PlusIcon weight="bold" size={16} />}
+            disabled={!detailQuery.data}
+            onClick={() => setEdit({ kind: 'create' })}
+          >
+            {t('dict.action.create')}
+          </Button>
+        }
+      />

-      <div className="flex items-start justify-between mb-4">
-        <div>
-          <h1 className="text-2xl font-semibold mb-1">
-            {detailQuery.data?.displayName ?? name}
-          </h1>
-          {detailQuery.data?.description && (
-            <p className="text-sm text-zinc-500">{detailQuery.data.description}</p>
-          )}
-          <p className="text-sm text-zinc-500 mt-1">
-            {recordsResult.data?.length ?? 0} {t('dict.list.records')}
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setEdit({ kind: 'create' })}
-          disabled={!detailQuery.data}
-          className="px-4 py-2 text-sm bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
-        >
-          + {t('dict.action.create')}
-        </button>
-      </div>
+      {recordsResult.isLoading && <LoadingBlock size="md" label={t('loading')} />}

-      {recordsResult.isLoading && <p className="text-zinc-500">{t('loading')}</p>}
-      {recordsResult.error && <p className="text-red-600">{t('error.failed')}</p>}
+      {recordsResult.error && (
+        <Alert variant="error" title={t('error.failed')}>
+          {String(recordsResult.error)}
+        </Alert>
+      )}

      {recordsResult.data && recordsResult.data.length === 0 && (
-        <p className="text-zinc-500 italic">{t('dict.empty')}</p>
+        <EmptyState title={t('dict.empty')} />
      )}

      {recordsResult.data && recordsResult.data.length > 0 && (
-        <div className="overflow-x-auto bg-white border border-zinc-200 rounded-lg">
-          <table className="w-full text-sm">
-            <thead className="bg-zinc-50 text-zinc-600">
-              <tr>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.businessKey')}</th>
-                <th className="text-left px-4 py-2 font-medium">name / code</th>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.scope')}</th>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.locale')}</th>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.validFrom')}</th>
-                <th className="text-right px-4 py-2 font-medium">{t('dict.col.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
+        <Panel>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell>{t('dict.col.businessKey')}</TableHeaderCell>
+                <TableHeaderCell>name / code</TableHeaderCell>
+                <TableHeaderCell>{t('dict.col.scope')}</TableHeaderCell>
+                <TableHeaderCell>{t('dict.col.locale')}</TableHeaderCell>
+                <TableHeaderCell>{t('dict.col.validFrom')}</TableHeaderCell>
+                <TableHeaderCell align="right">{t('dict.col.actions')}</TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
              {recordsResult.data.map((r) => (
-                <tr key={r.id} className="border-t border-zinc-100 hover:bg-zinc-50">
-                  <td className="px-4 py-2 font-mono text-xs">{r.businessKey}</td>
-                  <td className="px-4 py-2">
+                <TableRow key={r.id}>
+                  <TableCell>
+                    <span className="font-mono text-2xs">{r.businessKey}</span>
+                  </TableCell>
+                  <TableCell>
                    {String(r.data.name ?? r.data.code ?? '—')}
-                  </td>
-                  <td className="px-4 py-2">
-                    <span className="text-xs px-2 py-0.5 rounded bg-zinc-100">{r.dataScope}</span>
-                  </td>
-                  <td className="px-4 py-2 text-zinc-500 text-xs">{r._meta?.locale ?? '—'}</td>
-                  <td className="px-4 py-2 text-zinc-500 text-xs">
-                    {new Date(r.validFrom).toLocaleDateString()}
-                  </td>
-                  <td className="px-4 py-2 text-right whitespace-nowrap">
-                    <button
-                      type="button"
-                      onClick={() => setEdit({ kind: 'edit', record: r })}
-                      className="text-xs text-brand-700 hover:underline mr-3"
-                    >
-                      {t('dict.action.edit')}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setEdit({ kind: 'close-confirm', record: r })}
-                      className="text-xs text-red-600 hover:underline"
-                    >
-                      {t('dict.action.close')}
-                    </button>
-                  </td>
-                </tr>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="info">{r.dataScope}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-2xs text-carbon/60">{r._meta?.locale ?? '—'}</span>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-2xs text-carbon/60">
+                      {new Date(r.validFrom).toLocaleDateString()}
+                    </span>
+                  </TableCell>
+                  <TableCell align="right">
+                    <div className="flex items-center justify-end gap-1">
+                      <IconButton
+                        label={t('dict.action.edit')}
+                        variant="default"
+                        onClick={() => setEdit({ kind: 'edit', record: r })}
+                      >
+                        <PencilSimpleIcon size={16} />
+                      </IconButton>
+                      <IconButton
+                        label={t('dict.action.close')}
+                        variant="danger"
+                        onClick={() => setEdit({ kind: 'close-confirm', record: r })}
+                      >
+                        <XCircleIcon size={16} />
+                      </IconButton>
+                    </div>
+                  </TableCell>
+                </TableRow>
              ))}
-            </tbody>
-          </table>
-        </div>
+            </TableBody>
+          </Table>
+        </Panel>
      )}

      <Modal
-        open={edit.kind === 'create' || edit.kind === 'edit'}
+        isOpen={edit.kind === 'create' || edit.kind === 'edit'}
        onClose={() => setEdit({ kind: 'closed' })}
        title={
          edit.kind === 'create'
@@ -157,6 +186,7 @@ function DictionaryDetail() {
              ? `${t('dict.action.edit')}: ${edit.record.businessKey}`
              : ''
        }
+        maxWidth="max-w-2xl"
      >
        {detailQuery.data && (edit.kind === 'create' || edit.kind === 'edit') && (
          <SchemaDrivenForm
@@ -183,50 +213,45 @@ function DictionaryDetail() {
      </Modal>

      <Modal
-        open={edit.kind === 'close-confirm'}
-        onClose={() => setEdit({ kind: 'closed' })}
+        isOpen={edit.kind === 'close-confirm'}
+        onClose={() => {
+          setEdit({ kind: 'closed' })
+          setCloseReason('')
+        }}
        title={t('dict.confirmClose.title')}
-        widthClass="max-w-md"
+        maxWidth="max-w-md"
      >
        {edit.kind === 'close-confirm' && (
          <div className="space-y-4">
-            <p className="text-sm text-zinc-600">
+            <p className="text-sm text-carbon">
              {t('dict.confirmClose.body', { key: edit.record.businessKey })}
            </p>
-            <div>
-              <label className="block text-sm font-medium text-zinc-700 mb-1">
-                {t('dict.confirmClose.reason')}
-              </label>
-              <input
-                type="text"
-                value={closeReason}
-                onChange={(e) => setCloseReason(e.target.value)}
-                className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-                placeholder={t('dict.confirmClose.reasonPlaceholder')}
-              />
-            </div>
+            <TextInput
+              label={t('dict.confirmClose.reason')}
+              placeholder={t('dict.confirmClose.reasonPlaceholder')}
+              value={closeReason}
+              onChange={(e) => setCloseReason(e.target.value)}
+            />
            {serverErrorMessage(closeMut.error) && (
-              <div className="px-3 py-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
-                {serverErrorMessage(closeMut.error)}
-              </div>
+              <Alert variant="error">{serverErrorMessage(closeMut.error)}</Alert>
            )}
-            <div className="flex justify-end gap-2 pt-2">
-              <button
+            <div className="flex justify-end gap-2 pt-2 border-t border-regolith">
+              <Button
                type="button"
-                onClick={() => setEdit({ kind: 'closed' })}
+                variant="ghost"
                disabled={closeMut.isPending}
-                className="px-4 py-2 text-sm border border-zinc-300 rounded hover:bg-zinc-50 disabled:opacity-50"
+                onClick={() => setEdit({ kind: 'closed' })}
              >
                {t('form.cancel')}
-              </button>
-              <button
+              </Button>
+              <Button
                type="button"
+                variant="danger"
+                loading={closeMut.isPending}
                onClick={handleClose}
-                disabled={closeMut.isPending}
-                className="px-4 py-2 text-sm bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
              >
-                {closeMut.isPending ? t('form.saving') : t('dict.action.close')}
-              </button>
+                {t('dict.action.close')}
+              </Button>
            </div>
          </div>
        )}
@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
+import { Alert, Badge, EmptyState, LoadingBlock, PageHeader } from '@nstart/ui'
 import { useDictionaries } from '@/api/queries'

 export const Route = createFileRoute('/dictionaries/')({
@@ -10,34 +11,53 @@ function DictionariesPage() {
  const { t } = useTranslation()
  const { data, isLoading, error } = useDictionaries()

-  if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
-  if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
+  if (isLoading) {
+    return <LoadingBlock size="md" label={t('loading')} />
+  }
+
+  if (error) {
+    return (
+      <Alert variant="error" title={t('error.failed')}>
+        {String(error)}
+      </Alert>
+    )
+  }
+
+  if (!data || data.length === 0) {
+    return <EmptyState title={t('dict.empty')} />
+  }

  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {(data ?? []).map((d) => (
-        <Link
-          key={d.id}
-          to="/dictionaries/$name"
-          params={{ name: d.name }}
-          className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
-        >
-          <div className="flex items-center justify-between mb-1">
-            <h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
-            <span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
-              {d.scope}
-            </span>
-          </div>
-          <p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
-          <div className="flex gap-2 text-xs text-zinc-400">
-            <span>v{d.schemaVersion}</span>
-            <span>·</span>
-            <span>{d.bundle}</span>
-            <span>·</span>
-            <span>{d.supportedLocales.join(', ')}</span>
-          </div>
-        </Link>
-      ))}
+    <div className="space-y-6">
+      <PageHeader title={t('nav.dictionaries')} description={t('dict.list.subtitle')} />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {data.map((d) => (
+          <Link
+            key={d.id}
+            to="/dictionaries/$name"
+            params={{ name: d.name }}
+            className="block bg-white border border-regolith rounded-lg p-4 transition shadow-card hover:shadow-hover hover:border-ultramarain/40"
+          >
+            <div className="flex items-start justify-between mb-2 gap-2">
+              <h2 className="font-primary text-base text-ultramarain">
+                {d.displayName ?? d.name}
+              </h2>
+              <Badge variant="info">{d.scope}</Badge>
+            </div>
+            {d.description && (
+              <p className="text-sm text-carbon line-clamp-2 mb-3">{d.description}</p>
+            )}
+            <div className="flex gap-2 text-2xs uppercase tracking-label text-carbon/60">
+              <span>v{d.schemaVersion}</span>
+              <span>·</span>
+              <span>{d.bundle}</span>
+              <span>·</span>
+              <span>{d.supportedLocales.join(', ')}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
    </div>
  )
 }
@@ -1,26 +1,12 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+@import "@nstart/ui/styles/fonts.css";
+@import "@nstart/ui/styles/theme.css";

-@theme {
-  --color-brand-50: oklch(0.97 0.02 250);
-  --color-brand-100: oklch(0.93 0.04 250);
-  --color-brand-200: oklch(0.86 0.07 250);
-  --color-brand-300: oklch(0.77 0.10 250);
-  --color-brand-400: oklch(0.66 0.13 250);
-  --color-brand-500: oklch(0.55 0.16 250);
-  --color-brand-600: oklch(0.48 0.17 250);
-  --color-brand-700: oklch(0.42 0.18 250);
-  --color-brand-800: oklch(0.34 0.16 250);
-  --color-brand-900: oklch(0.26 0.13 250);
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-}
+/* Без @source Tailwind v4 не сгенерирует CSS для классов внутри dist/@nstart/ui */
+@source "../node_modules/@nstart/ui/dist";

 html,
 body,
 #root {
  height: 100%;
 }
-
-body {
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-}