@pgcorp/ui-kit 0.8.1 → 0.10.0

package/src/components/shared/data-display/scrollViewport.ts

@@ -0,0 +1,47 @@
+export type SScrollViewportAxis = 'x' | 'y' | 'both'
+export type SScrollViewportOverscrollBehavior = 'auto' | 'contain' | 'none'
+export type SScrollViewportPhysicalAxis = 'x' | 'y'
+export type SScrollViewportBoundary = 'start' | 'end'
+export type SScrollViewportBehavior = 'auto' | 'smooth'
+
+export interface SScrollViewportPhysicalState {
+  /** Distance from the physical left edge, normalized across browser RTL scroll models. */
+  readonly x: number
+  /** Distance from the physical top edge. */
+  readonly y: number
+  readonly maxX: number
+  readonly maxY: number
+}
+
+export interface SScrollViewportSemanticState {
+  readonly inline: number
+  readonly block: number
+  readonly maxInline: number
+  readonly maxBlock: number
+}
+
+/** Serializable viewport position and logical boundaries. / Сериализуемая позиция viewport и логические границы. */
+export interface SScrollViewportState {
+  readonly physical: SScrollViewportPhysicalState
+  readonly semantic: SScrollViewportSemanticState
+  readonly atInlineStart: boolean
+  readonly atInlineEnd: boolean
+  readonly atBlockStart: boolean
+  readonly atBlockEnd: boolean
+}
+
+export interface SScrollViewportRevealOptions {
+  readonly x?: number
+  readonly y?: number
+  readonly behavior?: SScrollViewportBehavior
+}
+
+/** Imperative viewport API without exposing its DOM owner. / Императивный API viewport без экспорта DOM-владельца. */
+export interface SScrollViewportApi {
+  focus: () => void
+  scrollToBoundary: (
+    axis: SScrollViewportPhysicalAxis,
+    boundary: SScrollViewportBoundary,
+  ) => void
+  reveal: (options: SScrollViewportRevealOptions) => void
+}

package/src/components/shared/data-display/toast.ts

@@ -0,0 +1,194 @@
+import type { SButtonAppearance } from '../controls/SButton.vue'
+import type { FeedbackSeverity } from '../../../internal/feedbackPresentation'
+import {
+  validateBoolean,
+  validateBoundedInteger,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+
+/** Serializable notification identity owned by the consumer. */
+export type SToastId = string | number
+
+/** Serializable action identity owned by the consumer. */
+export type SToastActionId = string | number
+
+/** Placement of a controlled toast viewport in the application viewport. */
+export const S_TOAST_POSITIONS = [
+  'top-start',
+  'top-center',
+  'top-end',
+  'bottom-start',
+  'bottom-center',
+  'bottom-end',
+] as const
+export type SToastPosition = (typeof S_TOAST_POSITIONS)[number]
+
+/** Selects the owner of presentation lifetime without changing data ownership. */
+export const S_TOAST_LIFETIME_OWNERS = ['consumer', 'viewport'] as const
+export type SToastLifetimeOwner = (typeof S_TOAST_LIFETIME_OWNERS)[number]
+
+/** Serializable action rendered by the shared toast presentation. */
+export interface SToastAction<ActionId extends SToastActionId = string> {
+  readonly id: ActionId
+  readonly label: string
+  readonly appearance?: SButtonAppearance
+}
+
+/** Controlled notification record. The viewport never mutates this record or its source array. */
+export interface SToastPresentation<
+  Id extends SToastId = string,
+  ActionId extends SToastActionId = string,
+> {
+  readonly id: Id
+  readonly severity: FeedbackSeverity
+  readonly title?: string
+  readonly message: string
+  readonly actions?: readonly SToastAction<ActionId>[]
+  readonly dismissible?: boolean
+  /** Presentation lifetime in milliseconds. Omitted or zero means persistent. */
+  readonly durationMs?: number
+}
+
+export interface SToastDismissIntent<Id extends SToastId = string> {
+  readonly id: Id
+  readonly reason: 'close'
+}
+
+export interface SToastActionIntent<
+  Id extends SToastId = string,
+  ActionId extends SToastActionId = string,
+> {
+  readonly notificationId: Id
+  readonly actionId: ActionId
+}
+
+export interface SToastLifetimeExpiredIntent<Id extends SToastId = string> {
+  readonly id: Id
+}
+
+const TOAST_SEVERITIES = ['info', 'success', 'warn', 'danger'] as const
+const ACTION_APPEARANCES = ['solid', 'soft', 'outline', 'ghost', 'text'] as const
+const TOAST_KEYS = new Set(['id', 'severity', 'title', 'message', 'actions', 'dismissible', 'durationMs'])
+const ACTION_KEYS = new Set(['id', 'label', 'appearance'])
+
+function assertRecord(owner: string, coordinate: string, value: unknown): asserts value is Record<string, unknown> {
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) return
+  throw new TypeError(
+    `${owner}: ${coordinate} должен быть object. / ${owner}: ${coordinate} must be an object.`,
+  )
+}
+
+function assertExactKeys(
+  owner: string,
+  coordinate: string,
+  value: Record<string, unknown>,
+  allowed: ReadonlySet<string>,
+): void {
+  const unknownKeys = Object.keys(value).filter((key) => !allowed.has(key))
+  if (unknownKeys.length === 0) return
+  throw new TypeError(
+    `${owner}: ${coordinate} содержит неизвестные поля ${unknownKeys.map((key) => JSON.stringify(key)).join(', ')}. `
+    + `/ ${owner}: ${coordinate} contains unknown fields ${unknownKeys.map((key) => JSON.stringify(key)).join(', ')}.`,
+  )
+}
+
+function validateIdentifier(owner: string, coordinate: string, value: unknown): SToastId {
+  if (typeof value === 'string') return validateNonEmptyString(owner, coordinate, value)
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  throw new TypeError(
+    `${owner}: ${coordinate} должен быть непустой строкой или конечным числом. `
+    + `/ ${owner}: ${coordinate} must be a non-empty string or finite number.`,
+  )
+}
+
+function validateAction(owner: string, coordinate: string, value: unknown): void {
+  assertRecord(owner, coordinate, value)
+  assertExactKeys(owner, coordinate, value, ACTION_KEYS)
+  validateIdentifier(owner, `${coordinate}.id`, value.id)
+  validateNonEmptyString(owner, `${coordinate}.label`, value.label)
+  if (value.appearance !== undefined) {
+    validateExactString(owner, `${coordinate}.appearance`, value.appearance, ACTION_APPEARANCES)
+  }
+}
+
+/** Runtime-validates a readonly controlled notification list and preserves its generic IDs. */
+export function validateToastPresentations<
+  Id extends SToastId,
+  ActionId extends SToastActionId,
+>(
+  owner: string,
+  value: readonly SToastPresentation<Id, ActionId>[],
+): readonly SToastPresentation<Id, ActionId>[] {
+  if (!Array.isArray(value)) {
+    throw new TypeError(`${owner}: notifications должен быть массивом. / ${owner}: notifications must be an array.`)
+  }
+  const notificationIds = new Set<SToastId>()
+  value.forEach((notification, notificationIndex) => {
+    const coordinate = `notifications[${notificationIndex}]`
+    assertRecord(owner, coordinate, notification)
+    assertExactKeys(owner, coordinate, notification, TOAST_KEYS)
+    const id = validateIdentifier(owner, `${coordinate}.id`, notification.id)
+    if (notificationIds.has(id)) {
+      throw new TypeError(
+        `${owner}: ${coordinate}.id дублирует ${JSON.stringify(id)}. `
+        + `/ ${owner}: ${coordinate}.id duplicates ${JSON.stringify(id)}.`,
+      )
+    }
+    notificationIds.add(id)
+    validateExactString(owner, `${coordinate}.severity`, notification.severity, TOAST_SEVERITIES)
+    if (notification.title !== undefined) {
+      validateNonEmptyString(owner, `${coordinate}.title`, notification.title)
+    }
+    if (typeof notification.message !== 'string') {
+      throw new TypeError(
+        `${owner}: ${coordinate}.message должен быть строкой. `
+        + `/ ${owner}: ${coordinate}.message must be a string.`,
+      )
+    }
+    if (notification.dismissible !== undefined) {
+      validateBoolean(owner, `${coordinate}.dismissible`, notification.dismissible)
+    }
+    if (notification.durationMs !== undefined) {
+      validateBoundedInteger(owner, `${coordinate}.durationMs`, notification.durationMs, {
+        minimum: 0,
+        maximum: 2_147_483_647,
+      })
+    }
+    if (notification.actions !== undefined) {
+      if (!Array.isArray(notification.actions)) {
+        throw new TypeError(
+          `${owner}: ${coordinate}.actions должен быть массивом. `
+          + `/ ${owner}: ${coordinate}.actions must be an array.`,
+        )
+      }
+      const actionIds = new Set<SToastId>()
+      notification.actions.forEach((action, actionIndex) => {
+        const actionCoordinate = `${coordinate}.actions[${actionIndex}]`
+        validateAction(owner, actionCoordinate, action)
+        const actionId = validateIdentifier(owner, `${actionCoordinate}.id`, action.id)
+        if (actionIds.has(actionId)) {
+          throw new TypeError(
+            `${owner}: ${actionCoordinate}.id дублирует ${JSON.stringify(actionId)}. `
+            + `/ ${owner}: ${actionCoordinate}.id duplicates ${JSON.stringify(actionId)}.`,
+          )
+        }
+        actionIds.add(actionId)
+      })
+    }
+  })
+  return value
+}
+
+export function validateToastPosition(value: unknown): SToastPosition {
+  return validateExactString('SControlledToastViewport', 'position', value, S_TOAST_POSITIONS)
+}
+
+export function validateToastLifetimeOwner(value: unknown): SToastLifetimeOwner {
+  return validateExactString(
+    'SControlledToastViewport',
+    'lifetimeOwner',
+    value,
+    S_TOAST_LIFETIME_OWNERS,
+  )
+}

package/src/components/shared/database/SDataGrid.vue

@@ -26,9 +26,9 @@
       :data="validatedGrid.rows"
       :get-row-key="getRowKey"
       :loading="validatedLoading"
-      loading-message="Загрузка данных..."
+      :loading-message="t('table.dataGridLoading')"
       :error-message="errorMessage"
-      :empty-message="emptyMessage"
+      :empty-message="resolvedEmptyMessage"
       :selected-row-key="selectedRowId"
       :max-height="validatedMaxHeight"
       density="compact"
@@ -127,6 +127,7 @@ export interface SDataGridProps<Key extends SDataGridColumnKey = SDataGridColumn
 
 <script setup lang="ts" generic="ColumnKey extends string = string">
 import { computed, reactive, useId, useSlots, watch } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
@@ -170,13 +171,15 @@ const props = withDefaults(defineProps<SDataGridProps<ColumnKey>>(), {
   disabled: false,
   readOnly: false,
   errorMessage: '',
-  emptyMessage: 'Нет строк для отображения',
+  emptyMessage: undefined,
   selectedRowId: undefined,
   maxHeight: 'none',
   presentation: 'panel',
   ariaLabel: undefined,
   ariaLabelledby: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedEmptyMessage = computed(() => props.emptyMessage ?? t('table.dataGridEmpty'))
 
 const ownedAttrs = useOwnedAttrs({ component: 'SDataGrid', owner: 'data grid adapter root' })
 const slots = useSlots()
@@ -334,7 +337,7 @@ const resolvedAccessibleName = computed(() => {
   }
   return {
     ariaLabel: props.ariaLabel === undefined
-      ? 'Таблица данных'
+      ? t('table.accessibleName')
       : validateNonEmptyString('SDataGrid', 'ariaLabel', props.ariaLabel),
     ariaLabelledby: undefined,
   }

package/src/components/shared/database/SSqlEditor.vue

@@ -30,6 +30,7 @@
       :aria-describedby="hasStatus ? generatedStatusId : undefined"
       :invalid="statusHasError"
       :next-selection-pos="nextSelectionPos"
+      :diagnostics="codeEditorDiagnostics"
       @update:model-value="onUpdate"
       @cursor-activity="emitCursorActivity"
       @selection-applied="emit('selection-applied', $event)"
@@ -51,6 +52,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useId, useSlots } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { provideTrustedCodeEditorExtensions } from '../../../internal/codeEditorExtensions'
@@ -63,8 +65,7 @@ import {
   validateNonEmptyString,
 } from '../../../internal/runtimeContract'
 import { autocompletion, type Completion, type CompletionContext } from '@codemirror/autocomplete'
-import { linter, type Diagnostic as CodeMirrorDiagnostic } from '@codemirror/lint'
-import { EditorState, type Extension } from '@codemirror/state'
+import type { Extension } from '@codemirror/state'
 import SCodeEditor, {
   type SCodeEditorCapabilities,
   type SCodeEditorCursorActivity,
@@ -73,6 +74,7 @@ import SCodeEditor, {
   type SCodeEditorSelectionAppliedPayload,
   type SCodeEditorViewport,
 } from '../data-display/SCodeEditor.vue'
+import type { SCodeEditorDiagnostic } from '../data-display/codeEditor'
 import SPanel from '../containers/SPanel.vue'
 import SStatus, { type StatusTone } from '../data-display/SStatus.vue'
 
@@ -119,7 +121,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: undefined,
-  placeholder: 'select * from public.table_name;',
+  placeholder: undefined,
   readOnly: false,
   disabled: false,
   loading: false,
@@ -134,6 +136,8 @@ const props = withDefaults(defineProps<Props>(), {
   ariaLabelledby: undefined,
   nextSelectionPos: null,
 })
+const { t } = useUiKitLocale()
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('editor.sqlPlaceholder'))
 
 const ownedAttrs = useOwnedAttrs({ component: 'SSqlEditor', owner: 'SQL editor adapter root' })
 const slots = useSlots()
@@ -154,7 +158,11 @@ const validatedAutofocus = computed(() => validateBoolean('SSqlEditor', 'autofoc
 const validatedShowLineNumbers = computed(() => validateBoolean('SSqlEditor', 'showLineNumbers', props.showLineNumbers))
 const validatedViewport = computed(() => validateCodeEditorViewport('SSqlEditor', props.viewport))
 const validatedTitle = computed(() => props.title === undefined ? '' : validateNonEmptyString('SSqlEditor', 'title', props.title))
-const validatedPlaceholder = computed(() => validateNonEmptyString('SSqlEditor', 'placeholder', props.placeholder))
+const validatedPlaceholder = computed(() => validateNonEmptyString(
+  'SSqlEditor',
+  'placeholder',
+  resolvedPlaceholder.value,
+))
 const validatedErrorMessage = computed(() => {
   if (typeof props.errorMessage !== 'string') {
     throw new TypeError('SSqlEditor: errorMessage должен быть строкой. / SSqlEditor: errorMessage must be a string.')
@@ -185,7 +193,7 @@ const resolvedAccessibleName = computed(() => {
 const generatedTitleId = `s-sql-editor-title-${useId()}`
 const generatedStatusId = `s-sql-editor-status-${useId()}`
 const panelState = computed(() => validatedLoading.value
-  ? { status: 'loading' as const, message: 'Загрузка SQL editor...' }
+  ? { status: 'loading' as const, message: t('editor.sqlLoading') }
   : { status: 'ready' as const })
 
 const onUpdate = (value: string) => {
@@ -226,42 +234,27 @@ const completionType = (kind: SSqlEditorCompletionItem['kind']) => {
   }
 }
 
-const diagnosticsExtension = computed(() =>
-  linter((view) =>
-    validatedDiagnostics.value.map((diagnostic): CodeMirrorDiagnostic => {
-      const { from, to } = resolveDiagnosticRange(view.state.doc, diagnostic)
-      return {
-        from,
-        to,
-        severity: diagnosticSeverity(diagnostic.severity),
-        message: diagnostic.message,
-      }
-    }),
-  ),
-)
-
 const resolveDiagnosticRange = (
-  doc: EditorState['doc'],
+  source: string,
   diagnostic: SSqlEditorDiagnostic,
 ) : { from: number; to: number } => {
   if ('from' in diagnostic) {
-    const from = validateBoundedInteger('SSqlEditor', 'diagnostics[].from', diagnostic.from, { minimum: 0, maximum: doc.length })
+    const from = validateBoundedInteger('SSqlEditor', 'diagnostics[].from', diagnostic.from, { minimum: 0, maximum: source.length })
     const to = diagnostic.to === undefined
-      ? Math.min(from + 1, doc.length)
-      : validateBoundedInteger('SSqlEditor', 'diagnostics[].to', diagnostic.to, { minimum: from, maximum: doc.length })
+      ? Math.min(from + 1, source.length)
+      : validateBoundedInteger('SSqlEditor', 'diagnostics[].to', diagnostic.to, { minimum: from, maximum: source.length })
     return { from, to }
   }
-  const lineNumber = validateBoundedInteger('SSqlEditor', 'diagnostics[].line', diagnostic.line, { minimum: 1, maximum: doc.lines })
-  const line = doc.line(lineNumber)
-  const column = validateBoundedInteger('SSqlEditor', 'diagnostics[].column', diagnostic.column, { minimum: 1, maximum: line.length + 1 })
-  const from = line.from + column - 1
-  return { from, to: Math.min(from + 1, doc.length) }
-}
-
-const diagnosticSeverity = (severity: SSqlEditorDiagnostic['severity']): CodeMirrorDiagnostic['severity'] => {
-  if (severity === 'info') return 'info'
-  if (severity === 'warning') return 'warning'
-  return 'error'
+  const lines = source.split('\n')
+  const lineNumber = validateBoundedInteger('SSqlEditor', 'diagnostics[].line', diagnostic.line, { minimum: 1, maximum: lines.length })
+  const lineText = lines[lineNumber - 1]
+  if (lineText === undefined) {
+    throw new RangeError(`SSqlEditor: diagnostics[].line ${lineNumber} отсутствует в документе. / SSqlEditor: diagnostics[].line ${lineNumber} is missing from the document.`)
+  }
+  const column = validateBoundedInteger('SSqlEditor', 'diagnostics[].column', diagnostic.column, { minimum: 1, maximum: lineText.length + 1 })
+  const lineFrom = lines.slice(0, lineNumber - 1).reduce((offset, line) => offset + line.length + 1, 0)
+  const from = lineFrom + column - 1
+  return { from, to: Math.min(from + 1, source.length) }
 }
 
 function assertPlainExactRecord(owner: string, value: unknown, allowed: readonly string[]): Record<string, unknown> {
@@ -312,7 +305,17 @@ const validatedDiagnostics = computed<SSqlEditorDiagnostic[]>(() => {
     return { ...common, line: record.line as number, column: record.column as number }
   })
 })
-const statusLabel = computed(() => validatedErrorMessage.value || `${validatedDiagnostics.value.length} диагностик`)
+const codeEditorDiagnostics = computed<readonly SCodeEditorDiagnostic<string>[]>(() =>
+  validatedDiagnostics.value.map((diagnostic, index) => ({
+    id: `sql-diagnostic-${index}`,
+    severity: diagnostic.severity,
+    message: diagnostic.message,
+    ...resolveDiagnosticRange(props.modelValue, diagnostic),
+    source: 'SSqlEditor',
+  })))
+const statusLabel = computed(() => validatedErrorMessage.value || t('editor.diagnosticsCount', {
+  count: validatedDiagnostics.value.length,
+}))
 const hasStatus = computed(() => (
   validatedErrorMessage.value !== ''
   || validatedDiagnostics.value.length > 0
@@ -336,10 +339,7 @@ const editorCapabilities = computed<SCodeEditorCapabilities>(() => ({
 }))
 
 const extensions = computed<readonly Extension[]>(() => {
-  const result: Extension[] = []
-  result.push(autocompletion({ override: [completionSource] }))
-  result.push(diagnosticsExtension.value)
-  return result
+  return [autocompletion({ override: [completionSource] })]
 })
 
 provideTrustedCodeEditorExtensions('SSqlEditor', extensions)

package/src/components/shared/feedback/SAsyncState.vue

@@ -38,6 +38,7 @@
 
 <script setup lang="ts">
 import { Fragment, computed, h, type Slots, type VNodeChild } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 
 import { resolveAsyncFeedbackPresentation } from '../../../internal/feedbackPresentation'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
@@ -75,6 +76,7 @@ const slots = defineSlots<{
   empty?: (props: { message: string; state: Extract<SAsyncStateContract, { status: 'empty' }> }) => VNodeChild
   error?: (props: { message: string; state: Extract<SAsyncStateContract, { status: 'error' }> }) => VNodeChild
 }>()
+const { t } = useUiKitLocale()
 
 const ownedAttrs = useOwnedAttrs({
   component: 'SAsyncState',
@@ -148,7 +150,7 @@ const assertReadyAttrs = (): boolean => {
 }
 const statePresentation = computed(() => {
   const state = validatedState.value
-  return state.status === 'ready' ? undefined : resolveAsyncFeedbackPresentation(state.status)
+  return state.status === 'ready' ? undefined : resolveAsyncFeedbackPresentation(state.status, t)
 })
 const resolvedMessage = computed(() => {
   const state = validatedState.value

package/src/components/shared/graph/SGraphViewport.vue

@@ -56,6 +56,7 @@ import {
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import { useRuntimeTheme } from '../../../internal/runtimeTheme'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import SListbox, { type SListboxOptionKeydownPayload } from '../controls/SListbox.vue'
 import SAsyncState from '../feedback/SAsyncState.vue'
 
@@ -103,6 +104,7 @@ const emit = defineEmits<{
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SGraphViewport', owner: 'graph viewport root' })
+const { t } = useUiKitLocale()
 useInteractiveLeafRegistration({ owner: 'SGraphViewport' })
 const rendererRef = ref<HTMLElement | null>(null)
 const runtimeTheme = useRuntimeTheme()
@@ -394,7 +396,7 @@ function refreshRuntimeTheme(): void {
   } catch (error) {
     failRender(
       'sigma_mount_failed',
-      error instanceof Error ? error.message : 'SGraphViewport: не удалось применить semantic runtime theme.',
+      error instanceof Error ? error.message : t('graph.themeFailed'),
     )
   }
 }
@@ -409,12 +411,12 @@ function mountSigma(): void {
   } catch (error) {
     failRender(
       error instanceof SGraphContractError ? 'invalid_graph' : 'sigma_mount_failed',
-      error instanceof Error ? error.message : 'Граф содержит некорректные данные.',
+      error instanceof Error ? error.message : t('graph.invalidData'),
     )
     return
   }
   if (!hasWebgl2Support()) {
-    failRender('webgl_unavailable', 'Графический движок требует WebGL2.')
+    failRender('webgl_unavailable', t('graph.webglRequired'))
     return
   }
   const startedAt = performance.now()
@@ -428,7 +430,7 @@ function mountSigma(): void {
   } catch (error) {
     failRender(
       error instanceof SGraphContractError ? 'invalid_graph' : 'sigma_mount_failed',
-      error instanceof Error ? error.message : 'Графический движок не смог построить карту.',
+      error instanceof Error ? error.message : t('graph.renderFailed'),
     )
   }
 }
@@ -493,7 +495,7 @@ function replaceGraph(): void {
     assertViewportConfiguration()
     nextGraph = buildGraph(props.graph)
   } catch (error) {
-    failRender('invalid_graph', error instanceof Error ? error.message : 'Граф содержит некорректные данные.')
+    failRender('invalid_graph', error instanceof Error ? error.message : t('graph.invalidData'))
     return
   }
   try {
@@ -511,7 +513,7 @@ function replaceGraph(): void {
   } catch (error) {
     failRender(
       error instanceof SGraphContractError ? 'invalid_graph' : 'sigma_mount_failed',
-      error instanceof Error ? error.message : 'SGraphViewport: не удалось заменить граф.',
+      error instanceof Error ? error.message : t('graph.renderFailed'),
     )
   }
 }
@@ -520,7 +522,7 @@ function refreshValidatedInteraction(): void {
   try {
     assertViewportConfiguration()
   } catch (error) {
-    failRender('invalid_graph', error instanceof Error ? error.message : 'SGraphViewport: interaction некорректен.')
+    failRender('invalid_graph', error instanceof Error ? error.message : t('graph.invalidData'))
     return
   }
   if (resolvedPositioningMode.value === 'readonly') cancelNodeDrag()
@@ -535,7 +537,7 @@ function refreshValidatedSettings(): void {
   try {
     assertViewportConfiguration()
   } catch (error) {
-    failRender('invalid_graph', error instanceof Error ? error.message : 'SGraphViewport: renderer settings некорректны.')
+    failRender('invalid_graph', error instanceof Error ? error.message : t('graph.invalidData'))
     return
   }
   if (!sigma) {
@@ -548,7 +550,7 @@ function refreshValidatedSettings(): void {
   } catch (error) {
     failRender(
       'sigma_mount_failed',
-      error instanceof Error ? error.message : 'SGraphViewport: не удалось обновить renderer settings.',
+      error instanceof Error ? error.message : t('graph.renderFailed'),
     )
   }
 }

package/src/components/shared/navigation/SBreadcrumbs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 
 import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
@@ -39,8 +40,10 @@ const props = withDefaults(defineProps<{
   items: readonly BreadcrumbItem[]
   ariaLabel?: string
 }>(), {
-  ariaLabel: 'Навигационная цепочка',
+  ariaLabel: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.breadcrumbs'))
 
 const emit = defineEmits<{
   action: [id: string, event: MouseEvent]
@@ -60,7 +63,7 @@ function assertRecord(value: unknown, coordinate: string): asserts value is Reco
 }
 
 function validateContract(): void {
-  if (typeof props.ariaLabel !== 'string' || !props.ariaLabel.trim()) {
+  if (!resolvedAriaLabel.value.trim()) {
     throw new TypeError('SBreadcrumbs: ariaLabel must be a non-empty string')
   }
   if (!Array.isArray(props.items) || props.items.length === 0) {
@@ -114,11 +117,11 @@ function validateContract(): void {
   }
 }
 
-watch(() => [props.items, props.ariaLabel] as const, validateContract, { immediate: true, deep: true })
+watch(() => [props.items, resolvedAriaLabel.value] as const, validateContract, { immediate: true, deep: true })
 </script>
 
 <template>
-  <nav v-bind="ownedAttrs.bindings()" class="s-breadcrumbs" :aria-label="ariaLabel">
+  <nav v-bind="ownedAttrs.bindings()" class="s-breadcrumbs" :aria-label="resolvedAriaLabel">
     <ol class="s-breadcrumbs__list">
       <li v-for="(item, index) in items" :key="item.id" class="s-breadcrumbs__item">
         <ChevronRight v-if="index > 0" class="s-breadcrumbs__divider" aria-hidden="true" />