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).

ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx

@@ -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) ?? ''}
+          />
         )
       }}
     />

ordinis-admin-ui/src/components/ui/Modal.tsx

@@ -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>
-  )
-}