@pgcorp/ui-kit 0.8.1 → 0.10.0

package/src/locales/messages.ts

@@ -0,0 +1,150 @@
+import type {
+  UiKitLocale,
+  UiKitMessageKey,
+  UiKitMessageParameters,
+  UiKitMessages,
+  UiKitMessagesOverride,
+  UiKitParameterizedMessageKey,
+  UiKitStaticMessageKey,
+  UiKitTranslate,
+} from './locale'
+import { UI_KIT_MESSAGE_SCHEMA, UI_KIT_MESSAGE_VALUES } from './messages.generated'
+import { hasOwn } from '../internal/es2020'
+
+type MessageRecord = Readonly<Record<string, unknown>>
+
+function isRecord(value: unknown): value is MessageRecord {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function deepFreeze<T>(value: T): Readonly<T> {
+  if (!isRecord(value)) return value
+  for (const child of Object.values(value)) deepFreeze(child)
+  return Object.freeze(value)
+}
+
+function buildMessages(locale: UiKitLocale, values: readonly string[]): Readonly<UiKitMessages> {
+  const bundle: Record<string, Record<string, string>> = {}
+  let index = 0
+  for (const [groupName, messageNames] of UI_KIT_MESSAGE_SCHEMA) {
+    const group: Record<string, string> = {}
+    for (const messageName of messageNames) {
+      const message = values[index]
+      if (typeof message !== 'string' || message.trim().length === 0) {
+        throw new TypeError(`UI-kit locale ${locale}: message ${groupName}.${messageName} отсутствует.`)
+      }
+      group[messageName] = message
+      index += 1
+    }
+    bundle[groupName] = group
+  }
+  if (index !== values.length) {
+    throw new TypeError(`UI-kit locale ${locale}: compact catalog содержит лишние значения.`)
+  }
+  return deepFreeze(bundle) as Readonly<UiKitMessages>
+}
+
+function messageAtPath(messages: unknown, key: string): string {
+  let current: unknown = messages
+  for (const segment of key.split('.')) {
+    if (!isRecord(current) || !hasOwn(current, segment)) {
+      throw new TypeError(`UI-kit locale: неизвестный message key ${JSON.stringify(key)}.`)
+    }
+    current = current[segment]
+  }
+  if (typeof current !== 'string') {
+    throw new TypeError(`UI-kit locale: message key ${JSON.stringify(key)} не является строкой.`)
+  }
+  return current
+}
+
+function placeholders(message: string): readonly string[] {
+  return [...message.matchAll(/\{([A-Za-z][A-Za-z0-9]*)\}/gu)]
+    .map((match) => match[1] ?? '')
+    .filter((value, index, values) => value.length > 0 && values.indexOf(value) === index)
+    .sort()
+}
+
+const schemaKeys = Object.freeze(UI_KIT_MESSAGE_SCHEMA.flatMap(([groupName, messageNames]) => (
+  messageNames.map((messageName) => `${groupName}.${messageName}` as UiKitMessageKey)
+)))
+const schemaKeySet = new Set<string>(schemaKeys)
+
+/** Complete immutable message bundles for every supported locale. */
+export const UI_KIT_MESSAGES: Readonly<Record<UiKitLocale, Readonly<UiKitMessages>>> = deepFreeze({
+  en: buildMessages('en', UI_KIT_MESSAGE_VALUES.en),
+  ru: buildMessages('ru', UI_KIT_MESSAGE_VALUES.ru),
+  'zh-CN': buildMessages('zh-CN', UI_KIT_MESSAGE_VALUES['zh-CN']),
+  'zh-TW': buildMessages('zh-TW', UI_KIT_MESSAGE_VALUES['zh-TW']),
+})
+
+function mergeRecord(base: MessageRecord, override: unknown, coordinate: string): MessageRecord {
+  if (!isRecord(override)) {
+    throw new TypeError(`${coordinate} должен быть object.`)
+  }
+  const unexpected = Object.keys(override).filter((key) => !hasOwn(base, key))
+  if (unexpected.length > 0) {
+    throw new TypeError(`${coordinate}: неизвестные поля ${unexpected.join(', ')}.`)
+  }
+  const merged: Record<string, unknown> = { ...base }
+  for (const [key, value] of Object.entries(override)) {
+    const path = `${coordinate}.${key}`
+    const baseValue = base[key]
+    if (typeof baseValue === 'string') {
+      if (typeof value !== 'string' || value.trim().length === 0) {
+        throw new TypeError(`${path} должен быть непустой строкой.`)
+      }
+      if (placeholders(value).join('\n') !== placeholders(baseValue).join('\n')) {
+        throw new TypeError(`${path} должен сохранять placeholders ${placeholders(baseValue).join(', ')}.`)
+      }
+      merged[key] = value
+    } else if (isRecord(baseValue)) {
+      merged[key] = mergeRecord(baseValue, value, path)
+    } else {
+      throw new TypeError(`${path}: base schema повреждена.`)
+    }
+  }
+  return merged
+}
+
+/** Validates and immutably applies a provider-level exact deep override. */
+export function mergeUiKitMessages(
+  base: Readonly<UiKitMessages>,
+  override: UiKitMessagesOverride | undefined,
+): Readonly<UiKitMessages> {
+  if (override === undefined) return base
+  return deepFreeze(mergeRecord(base, override, 'SUiKitLocaleProvider.messages')) as Readonly<UiKitMessages>
+}
+
+function translate(
+  messages: Readonly<UiKitMessages>,
+  key: UiKitMessageKey,
+  parameters?: Readonly<Record<string, string | number>>,
+): string {
+  if (!schemaKeySet.has(key)) throw new TypeError(`UI-kit locale: неизвестный message key ${JSON.stringify(key)}.`)
+  const template = messageAtPath(messages, key)
+  const required = placeholders(template)
+  const received = parameters === undefined ? [] : Object.keys(parameters).sort()
+  if (required.join('\n') !== received.join('\n')) {
+    throw new TypeError(
+      `UI-kit locale: ${key} ожидает параметры [${required.join(', ')}], получено [${received.join(', ')}].`,
+    )
+  }
+  return template.replace(/\{([A-Za-z][A-Za-z0-9]*)\}/gu, (_match, name: string) => String(parameters?.[name]))
+}
+
+/** Creates a strict translator bound to a reactive message accessor. */
+export function createUiKitTranslate(messages: () => Readonly<UiKitMessages>): UiKitTranslate {
+  function t<Key extends UiKitStaticMessageKey>(key: Key): string
+  function t<Key extends UiKitParameterizedMessageKey>(key: Key, parameters: UiKitMessageParameters[Key]): string
+  function t(
+    key: UiKitMessageKey,
+    parameters?: Readonly<Record<string, string | number>>,
+  ): string {
+    return translate(messages(), key, parameters)
+  }
+  return t
+}
+
+/** Stable complete key inventory used by package and locale parity proofs. */
+export const UI_KIT_MESSAGE_KEYS: readonly UiKitMessageKey[] = schemaKeys

package/src/stores/useNotifierStore.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { onScopeDispose, ref } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import type { FeedbackSeverity } from '../internal/feedbackPresentation'
 
@@ -16,54 +17,70 @@ export interface Notification {
 
 export type NotificationInput = Omit<Notification, 'id' | 'createdAt'>
 
-interface NotifierState {
-  notifications: Notification[]
-  history: Notification[]
-}
-
 const DEFAULT_NOTIFICATION_DURATION_MS = 2800
-const removalTimers = new Map<string, ReturnType<typeof setTimeout>>()
+/** Maximum number of records retained by the autonomous notification history. */
+export const NOTIFIER_HISTORY_CAPACITY = 100
 
-function stopRemovalTimer(id: string): void {
-  const timer = removalTimers.get(id)
-  if (!timer) {
-    return
+export const useNotifierStore = defineStore('notifier', () => {
+  const notifications = ref<Notification[]>([])
+  const history = ref<Notification[]>([])
+  const removalTimers = new Map<string, ReturnType<typeof setTimeout>>()
+
+  function stopRemovalTimer(id: string): void {
+    const timer = removalTimers.get(id)
+    if (!timer) return
+    clearTimeout(timer)
+    removalTimers.delete(id)
+  }
+
+  function clearRemovalTimers(): void {
+    for (const timer of removalTimers.values()) clearTimeout(timer)
+    removalTimers.clear()
+  }
+
+  function remove(id: string): void {
+    stopRemovalTimer(id)
+    notifications.value = notifications.value.filter((notification) => notification.id !== id)
   }
-  clearTimeout(timer)
-  removalTimers.delete(id)
-}
 
-export const useNotifierStore = defineStore('notifier', {
-  state: (): NotifierState => ({
-    notifications: [],
-    history: [],
-  }),
-  actions: {
-    add(notification: NotificationInput) {
-      const id = uuidv4()
-      const newNotification: Notification = {
-        id,
-        createdAt: new Date().toISOString(),
-        duration: DEFAULT_NOTIFICATION_DURATION_MS,
-        ...notification,
-      }
+  function add(notification: NotificationInput): void {
+    const id = uuidv4()
+    const newNotification: Notification = {
+      id,
+      createdAt: new Date().toISOString(),
+      duration: DEFAULT_NOTIFICATION_DURATION_MS,
+      ...notification,
+    }
 
-      this.history.unshift(newNotification)
-      this.notifications.push(newNotification)
+    history.value.unshift(newNotification)
+    if (history.value.length > NOTIFIER_HISTORY_CAPACITY) {
+      history.value.splice(NOTIFIER_HISTORY_CAPACITY)
+    }
+    notifications.value.push(newNotification)
 
-      if (newNotification.duration) {
-        const removalTimer = setTimeout(() => {
-          this.remove(id)
-        }, newNotification.duration)
-        removalTimers.set(id, removalTimer)
-      }
-    },
-    remove(id: string) {
-      stopRemovalTimer(id)
-      this.notifications = this.notifications.filter((n) => n.id !== id)
-    },
-    clearHistory() {
-      this.history = []
-    },
-  },
+    if (newNotification.duration) {
+      removalTimers.set(id, setTimeout(() => remove(id), newNotification.duration))
+    }
+  }
+
+  function clearHistory(): void {
+    history.value = []
+  }
+
+  function $reset(): void {
+    clearRemovalTimers()
+    notifications.value = []
+    history.value = []
+  }
+
+  onScopeDispose(clearRemovalTimers)
+
+  return {
+    notifications,
+    history,
+    add,
+    remove,
+    clearHistory,
+    $reset,
+  }
 })

package/src/styles/tokens.css

@@ -111,11 +111,15 @@
   --safe-area-left: env(safe-area-inset-left, 0px);
 
   /* Semantic interaction geometry */
-  --s-control-hitbox-xs: 1.5rem;
-  --s-control-hitbox-sm: 1.75rem;
+  --s-control-hitbox-2xs: 1.5rem;
+  --s-control-hitbox-xs: 2rem;
+  --s-control-hitbox-sm: 2.25rem;
   --s-control-hitbox-md: 2.5rem;
   --s-control-hitbox-lg: 3rem;
   --s-control-indicator-size: 1.25rem;
+  --s-resize-handle-hitbox-compact: 0.375rem;
+  --s-resize-handle-hitbox-standard: 0.75rem;
+  --s-resize-handle-hitbox-spacious: 2rem;
   --s-icon-size-2xs: 0.75rem;
   --s-icon-size-xs: 1rem;
   --s-icon-size-sm: 1.25rem;
@@ -264,9 +268,26 @@
   --s-code-editor-viewport-compact: 12rem;
   --s-code-editor-viewport-standard: 20rem;
   --s-code-editor-viewport-expanded: 32rem;
+  --s-diff-row-block-size: 2rem;
+  --s-diff-surface: var(--color-surface);
+  --s-diff-gutter-surface: color-mix(in srgb, var(--color-surface-muted) 78%, transparent);
+  --s-diff-added-surface: color-mix(in srgb, var(--color-success-500) 13%, transparent);
+  --s-diff-added-accent: var(--color-success-600);
+  --s-diff-removed-surface: color-mix(in srgb, var(--color-danger-500) 12%, transparent);
+  --s-diff-removed-accent: var(--color-danger-600);
+  --s-diff-context-surface: color-mix(in srgb, var(--color-info-500) 7%, var(--color-surface));
+  --s-code-token-comment: var(--color-text-muted);
+  --s-code-token-keyword: var(--color-danger-600);
+  --s-code-token-title: var(--color-primary-600);
+  --s-code-token-literal: var(--color-warn-700);
+  --s-code-token-string: var(--color-success-700);
+  --s-code-token-meta: var(--color-info-700);
   --s-code-editor-search-match-background: rgb(99 102 241 / 22%);
   --s-code-editor-search-match-selected-background: rgb(16 185 129 / 35%);
   --s-code-editor-search-match-selected-outline: rgb(16 185 129 / 55%);
+  --s-code-editor-diagnostic-error: var(--color-danger-500);
+  --s-code-editor-diagnostic-warning: var(--color-warn-500);
+  --s-code-editor-diagnostic-info: var(--color-info-500);
 
   /* Semantic chart palette and geometry surfaces */
   --s-chart-series-1: var(--color-primary-600);

package/src/theme.ts

@@ -1,3 +1,6 @@
+import type { UiKitTranslate } from './locales/locale';
+import { createUiKitTranslate, UI_KIT_MESSAGES } from './locales/messages';
+
 export const themeFamilies = ['classic', 'pink', 'green'] as const;
 export type ThemeFamily = (typeof themeFamilies)[number];
 
@@ -28,6 +31,37 @@ export interface ThemeVariant {
 
 export const defaultThemeId: ThemeId = 'classic-light';
 
+const defaultThemeTranslate = createUiKitTranslate(() => UI_KIT_MESSAGES.ru);
+
+function themeFamilyMessageKey(family: ThemeFamily): 'theme.classic' | 'theme.pink' | 'theme.green' {
+  if (family === 'classic') return 'theme.classic';
+  if (family === 'pink') return 'theme.pink';
+  if (family === 'green') return 'theme.green';
+  throw new Error(`Неизвестное семейство темы: ${String(family)}`);
+}
+
+function themeModeMessageKey(mode: ThemeMode): 'theme.light' | 'theme.dark' {
+  if (mode === 'light') return 'theme.light';
+  if (mode === 'dark') return 'theme.dark';
+  throw new Error(`Неизвестный режим темы: ${String(mode)}`);
+}
+
+function localizeThemeVariant(
+  family: ThemeFamily,
+  mode: ThemeMode,
+  translate: UiKitTranslate,
+): Pick<ThemeVariant, 'label' | 'familyLabel' | 'modeLabel'> {
+  const familyLabel = translate(themeFamilyMessageKey(family));
+  const modeLabel = translate(themeModeMessageKey(mode));
+  return {
+    familyLabel,
+    modeLabel,
+    label: translate(mode === 'light' ? 'theme.variantLight' : 'theme.variantDark', {
+      family: familyLabel,
+    }),
+  };
+}
+
 export const themeVariants = [
   {
     id: 'classic-light',
@@ -36,9 +70,7 @@ export const themeVariants = [
     dataTheme: 'light',
     browserThemeColor: '#f8fafc',
     statusBarStyle: 'default',
-    label: 'Классическая светлая',
-    familyLabel: 'Классическая',
-    modeLabel: 'Светлая',
+    ...localizeThemeVariant('classic', 'light', defaultThemeTranslate),
   },
   {
     id: 'classic-dark',
@@ -47,9 +79,7 @@ export const themeVariants = [
     dataTheme: 'dark',
     browserThemeColor: '#020617',
     statusBarStyle: 'black-translucent',
-    label: 'Классическая тёмная',
-    familyLabel: 'Классическая',
-    modeLabel: 'Тёмная',
+    ...localizeThemeVariant('classic', 'dark', defaultThemeTranslate),
   },
   {
     id: 'pink-light',
@@ -58,9 +88,7 @@ export const themeVariants = [
     dataTheme: 'pink-light',
     browserThemeColor: '#fff6fb',
     statusBarStyle: 'default',
-    label: 'Розовая светлая',
-    familyLabel: 'Розовая',
-    modeLabel: 'Светлая',
+    ...localizeThemeVariant('pink', 'light', defaultThemeTranslate),
   },
   {
     id: 'pink-dark',
@@ -69,9 +97,7 @@ export const themeVariants = [
     dataTheme: 'pink-dark',
     browserThemeColor: '#020617',
     statusBarStyle: 'black-translucent',
-    label: 'Розовая тёмная',
-    familyLabel: 'Розовая',
-    modeLabel: 'Тёмная',
+    ...localizeThemeVariant('pink', 'dark', defaultThemeTranslate),
   },
   {
     id: 'green-light',
@@ -80,9 +106,7 @@ export const themeVariants = [
     dataTheme: 'green-light',
     browserThemeColor: '#f5fbf6',
     statusBarStyle: 'default',
-    label: 'Зелёная светлая',
-    familyLabel: 'Зелёная',
-    modeLabel: 'Светлая',
+    ...localizeThemeVariant('green', 'light', defaultThemeTranslate),
   },
   {
     id: 'green-dark',
@@ -91,9 +115,7 @@ export const themeVariants = [
     dataTheme: 'green-dark',
     browserThemeColor: '#04120b',
     statusBarStyle: 'black-translucent',
-    label: 'Зелёная тёмная',
-    familyLabel: 'Зелёная',
-    modeLabel: 'Тёмная',
+    ...localizeThemeVariant('green', 'dark', defaultThemeTranslate),
   },
 ] as const satisfies readonly ThemeVariant[];
 
@@ -417,22 +439,27 @@ export function resolveThemePreference(themeId: ThemeId): ThemePreference {
   return getThemeVariant(themeId).dataTheme;
 }
 
-export function getThemeFamilyLabel(family: ThemeFamily): string {
-  const variant = themeVariants.find((item) => item.family === family);
-  if (variant === undefined) {
-    throw new Error(`Неизвестное семейство темы: ${family}`);
-  }
-  return variant.familyLabel;
+export function getThemeFamilyLabel(
+  family: ThemeFamily,
+  translate: UiKitTranslate = defaultThemeTranslate,
+): string {
+  return translate(themeFamilyMessageKey(family));
 }
 
-export function getThemeModeLabel(mode: ThemeMode): string {
-  if (mode === 'light') {
-    return 'Светлая';
-  }
-  if (mode === 'dark') {
-    return 'Тёмная';
-  }
-  throw new Error(`Неизвестный режим темы: ${String(mode)}`);
+export function getThemeModeLabel(
+  mode: ThemeMode,
+  translate: UiKitTranslate = defaultThemeTranslate,
+): string {
+  return translate(themeModeMessageKey(mode));
+}
+
+/** Returns a locale-scoped display label without coupling theme state to one application locale. */
+export function getThemeVariantLabel(
+  themeId: ThemeId,
+  translate: UiKitTranslate = defaultThemeTranslate,
+): string {
+  const variant = getThemeVariant(themeId);
+  return localizeThemeVariant(variant.family, variant.mode, translate).label;
 }
 
 export function resolveLegacyThemeId(value: unknown): ThemeId | null {

package/src/workers/diff.worker.ts

@@ -0,0 +1,73 @@
+import { computeDiffModel, DiffEngineCancelledError } from '../internal/diffEngine'
+import {
+  S_DIFF_WORKER_PROTOCOL_VERSION,
+  validateDiffWorkerRequest,
+  type SDiffWorkerResponse,
+} from './diffProtocol'
+
+interface DiffWorkerScope {
+  addEventListener(type: 'message', listener: (event: MessageEvent<unknown>) => void): void
+  postMessage(message: SDiffWorkerResponse): void
+}
+
+const workerScope = self as unknown as DiffWorkerScope
+const cancelledRequestIds = new Set<string>()
+
+function errorResponse(requestId: string, cause: unknown): SDiffWorkerResponse {
+  const error = cause instanceof Error ? cause : new Error(String(cause))
+  return {
+    version: S_DIFF_WORKER_PROTOCOL_VERSION,
+    type: 'error',
+    requestId,
+    error: { name: error.name, message: error.message },
+  }
+}
+
+workerScope.addEventListener('message', (event) => {
+  let requestId = 'invalid-request'
+  try {
+    const request = validateDiffWorkerRequest(event.data)
+    requestId = request.requestId
+    if (request.type === 'cancel') {
+      cancelledRequestIds.add(request.requestId)
+      workerScope.postMessage({
+        version: S_DIFF_WORKER_PROTOCOL_VERSION,
+        type: 'cancelled',
+        requestId: request.requestId,
+      })
+      return
+    }
+    const result = computeDiffModel(
+      request.before,
+      request.after,
+      request.options,
+      () => cancelledRequestIds.has(request.requestId),
+    )
+    if (cancelledRequestIds.delete(request.requestId)) {
+      workerScope.postMessage({
+        version: S_DIFF_WORKER_PROTOCOL_VERSION,
+        type: 'cancelled',
+        requestId: request.requestId,
+      })
+      return
+    }
+    workerScope.postMessage({
+      version: S_DIFF_WORKER_PROTOCOL_VERSION,
+      type: 'result',
+      requestId: request.requestId,
+      result,
+    })
+  } catch (cause) {
+    if (cause instanceof DiffEngineCancelledError) {
+      workerScope.postMessage({
+        version: S_DIFF_WORKER_PROTOCOL_VERSION,
+        type: 'cancelled',
+        requestId,
+      })
+      return
+    }
+    workerScope.postMessage(errorResponse(requestId, cause))
+  } finally {
+    cancelledRequestIds.delete(requestId)
+  }
+})