@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,363 @@
+<template>
+  <SPanel
+    v-bind="ownedAttrs.bindings()"
+    :title="validatedTitle || undefined"
+    :title-id="validatedTitle ? generatedTitleId : undefined"
+    :footer-id="hasStatus ? generatedStatusId : undefined"
+    :heading-level="3"
+    :state="panelState"
+    no-content-padding
+    content-layout="block"
+    scroll-behavior="child"
+    surface-radius="md"
+    surface-overflow="clip"
+  >
+    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
+
+    <SCodeEditor
+      ref="codeEditor"
+      :model-value="modelValue"
+      :language="sqlLanguage"
+      :capabilities="editorCapabilities"
+      variant="sql"
+      :viewport="validatedViewport"
+      :autofocus="validatedAutofocus"
+      :placeholder="validatedPlaceholder"
+      :read-only="validatedReadOnly"
+      :disabled="validatedDisabled"
+      :aria-label="resolvedAccessibleName.ariaLabel"
+      :aria-labelledby="resolvedAccessibleName.ariaLabelledby"
+      :aria-describedby="hasStatus ? generatedStatusId : undefined"
+      :invalid="statusHasError"
+      :next-selection-pos="nextSelectionPos"
+      @update:model-value="onUpdate"
+      @cursor-activity="emitCursorActivity"
+      @selection-applied="emit('selection-applied', $event)"
+      @ready="emit('ready', $event)"
+    />
+
+    <template v-if="hasStatus" #footer>
+      <slot name="status" :diagnostics="validatedDiagnostics" :error-message="validatedErrorMessage">
+        <SStatus
+          :label="statusLabel"
+          :tone="statusTone"
+          size="sm"
+          :live="validatedErrorMessage ? 'assertive' : 'polite'"
+        />
+      </slot>
+    </template>
+  </SPanel>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId, useSlots } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { provideTrustedCodeEditorExtensions } from '../../../internal/codeEditorExtensions'
+import { validateCodeEditorViewport } from '../../../internal/codeEditorContract'
+import {
+  validateBoolean,
+  validateBoundedInteger,
+  validateDomId,
+  validateExactString,
+  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 SCodeEditor, {
+  type SCodeEditorCapabilities,
+  type SCodeEditorCursorActivity,
+  type SCodeEditorLanguage,
+  type SCodeEditorReadyPayload,
+  type SCodeEditorSelectionAppliedPayload,
+  type SCodeEditorViewport,
+} from '../data-display/SCodeEditor.vue'
+import SPanel from '../containers/SPanel.vue'
+import SStatus, { type StatusTone } from '../data-display/SStatus.vue'
+
+defineOptions({ inheritAttrs: false })
+
+interface SSqlEditorDiagnosticBase {
+  severity: 'error' | 'warning' | 'info'
+  message: string
+}
+
+/** Exact SQL diagnostic range через offsets либо line/column. / Exact SQL diagnostic range expressed either as offsets or line/column. */
+export type SSqlEditorDiagnostic = SSqlEditorDiagnosticBase & (
+  | { from: number; to?: number; line?: never; column?: never }
+  | { line: number; column: number; from?: never; to?: never }
+)
+
+/** Typed completion item для private SQL extension adapter. / Typed completion item transformed by the private SQL extension adapter. */
+export interface SSqlEditorCompletionItem {
+  label: string
+  apply?: string
+  detail?: string
+  kind?: 'keyword' | 'schema' | 'table' | 'view' | 'column' | 'function'
+}
+
+/** Public SQL-editor adapter contract; CodeMirror extensions остаются private. / Public SQL-editor adapter contract; CodeMirror extensions remain private. */
+export interface Props {
+  modelValue: string
+  title?: string
+  placeholder?: string
+  readOnly?: boolean
+  disabled?: boolean
+  loading?: boolean
+  errorMessage?: string
+  diagnostics?: readonly SSqlEditorDiagnostic[]
+  completionItems?: readonly SSqlEditorCompletionItem[]
+  showLineNumbers?: boolean
+  autofocus?: boolean
+  viewport?: SCodeEditorViewport
+  tabSize?: number
+  ariaLabel?: string
+  ariaLabelledby?: string
+  nextSelectionPos?: number | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  placeholder: 'select * from public.table_name;',
+  readOnly: false,
+  disabled: false,
+  loading: false,
+  errorMessage: '',
+  diagnostics: () => [],
+  completionItems: () => [],
+  showLineNumbers: true,
+  autofocus: false,
+  viewport: 'standard',
+  tabSize: 2,
+  ariaLabel: undefined,
+  ariaLabelledby: undefined,
+  nextSelectionPos: null,
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SSqlEditor', owner: 'SQL editor adapter root' })
+const slots = useSlots()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'cursor-activity', payload: { pos: number; line: number; column: number }): void
+  (e: 'selection-applied', payload: SCodeEditorSelectionAppliedPayload): void
+  (e: 'ready', payload: SCodeEditorReadyPayload): void
+}>()
+
+const codeEditor = ref<InstanceType<typeof SCodeEditor> | null>(null)
+
+const validatedReadOnly = computed(() => validateBoolean('SSqlEditor', 'readOnly', props.readOnly))
+const validatedDisabled = computed(() => validateBoolean('SSqlEditor', 'disabled', props.disabled))
+const validatedLoading = computed(() => validateBoolean('SSqlEditor', 'loading', props.loading))
+const validatedAutofocus = computed(() => validateBoolean('SSqlEditor', 'autofocus', props.autofocus))
+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 validatedErrorMessage = computed(() => {
+  if (typeof props.errorMessage !== 'string') {
+    throw new TypeError('SSqlEditor: errorMessage должен быть строкой. / SSqlEditor: errorMessage must be a string.')
+  }
+  return props.errorMessage === '' ? '' : validateNonEmptyString('SSqlEditor', 'errorMessage', props.errorMessage)
+})
+const resolvedAccessibleName = computed(() => {
+  if (validatedTitle.value !== '') {
+    if (props.ariaLabel !== undefined || props.ariaLabelledby !== undefined) {
+      throw new TypeError(
+        'SSqlEditor: title уже задаёт accessible name; не передавайте ariaLabel/ariaLabelledby. '
+        + '/ SSqlEditor: title already provides the accessible name; do not provide ariaLabel/ariaLabelledby.',
+      )
+    }
+    return { ariaLabel: undefined, ariaLabelledby: generatedTitleId }
+  }
+  if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
+    throw new TypeError('SSqlEditor: задайте только ariaLabel или ariaLabelledby. / SSqlEditor: provide only ariaLabel or ariaLabelledby.')
+  }
+  if (props.ariaLabelledby !== undefined) {
+    return { ariaLabel: undefined, ariaLabelledby: validateDomId('SSqlEditor', 'ariaLabelledby', props.ariaLabelledby) }
+  }
+  return {
+    ariaLabel: props.ariaLabel === undefined ? 'SQL editor' : validateNonEmptyString('SSqlEditor', 'ariaLabel', props.ariaLabel),
+    ariaLabelledby: undefined,
+  }
+})
+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: 'ready' as const })
+
+const onUpdate = (value: string) => {
+  emit('update:modelValue', value)
+}
+
+const completionSource = (context: CompletionContext) => {
+  const word = context.matchBefore(/[A-Za-zА-Яа-я0-9_.$"]*/)
+  if (!word || (word.from === word.to && !context.explicit)) {
+    return null
+  }
+  const options: Completion[] = validatedCompletionItems.value.map((item) => ({
+    label: item.label,
+    apply: item.apply ?? item.label,
+    detail: item.detail,
+    type: completionType(item.kind),
+  }))
+  return {
+    from: word.from,
+    options,
+  }
+}
+
+const completionType = (kind: SSqlEditorCompletionItem['kind']) => {
+  switch (kind) {
+    case 'schema':
+      return 'namespace'
+    case 'table':
+    case 'view':
+      return 'class'
+    case 'column':
+      return 'property'
+    case 'function':
+      return 'function'
+    case 'keyword':
+    default:
+      return 'keyword'
+  }
+}
+
+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'],
+  diagnostic: SSqlEditorDiagnostic,
+) : { from: number; to: number } => {
+  if ('from' in diagnostic) {
+    const from = validateBoundedInteger('SSqlEditor', 'diagnostics[].from', diagnostic.from, { minimum: 0, maximum: doc.length })
+    const to = diagnostic.to === undefined
+      ? Math.min(from + 1, doc.length)
+      : validateBoundedInteger('SSqlEditor', 'diagnostics[].to', diagnostic.to, { minimum: from, maximum: doc.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'
+}
+
+function assertPlainExactRecord(owner: string, value: unknown, allowed: readonly string[]): Record<string, unknown> {
+  if (typeof value !== 'object' || value === null || Array.isArray(value) || Object.getPrototypeOf(value) !== Object.prototype) {
+    throw new TypeError(`${owner}: значение должно быть plain object. / ${owner}: value must be a plain object.`)
+  }
+  const record = value as Record<string, unknown>
+  const unexpected = Object.keys(record).filter((key) => !allowed.includes(key))
+  if (unexpected.length > 0) throw new TypeError(`${owner}: неизвестные поля ${unexpected.join(', ')}. / ${owner}: unknown fields ${unexpected.join(', ')}.`)
+  return record
+}
+
+const validatedCompletionItems = computed<SSqlEditorCompletionItem[]>(() => {
+  if (!Array.isArray(props.completionItems)) throw new TypeError('SSqlEditor: completionItems должен быть массивом. / SSqlEditor: completionItems must be an array.')
+  return props.completionItems.map((candidate, index) => {
+    const record = assertPlainExactRecord(`SSqlEditor.completionItems[${index}]`, candidate, ['label', 'apply', 'detail', 'kind'])
+    return {
+      label: validateNonEmptyString('SSqlEditor', `completionItems[${index}].label`, record.label),
+      ...(record.apply === undefined ? {} : { apply: validateNonEmptyString('SSqlEditor', `completionItems[${index}].apply`, record.apply) }),
+      ...(record.detail === undefined ? {} : { detail: validateNonEmptyString('SSqlEditor', `completionItems[${index}].detail`, record.detail) }),
+      ...(record.kind === undefined ? {} : { kind: validateExactString('SSqlEditor', `completionItems[${index}].kind`, record.kind, ['keyword', 'schema', 'table', 'view', 'column', 'function'] as const) }),
+    }
+  })
+})
+
+const validatedDiagnostics = computed<SSqlEditorDiagnostic[]>(() => {
+  if (!Array.isArray(props.diagnostics)) throw new TypeError('SSqlEditor: diagnostics должен быть массивом. / SSqlEditor: diagnostics must be an array.')
+  return props.diagnostics.map((candidate, index) => {
+    const runtimeCandidate: unknown = candidate
+    const record = assertPlainExactRecord(`SSqlEditor.diagnostics[${index}]`, runtimeCandidate, ['severity', 'message', 'from', 'to', 'line', 'column'])
+    const hasOffset = Object.hasOwn(record, 'from')
+    const hasLine = Object.hasOwn(record, 'line') || Object.hasOwn(record, 'column')
+    if (hasOffset === hasLine) throw new TypeError(`SSqlEditor: diagnostics[${index}] должен задавать ровно один range: from/to или line/column. / SSqlEditor: diagnostics[${index}] must provide exactly one range: from/to or line/column.`)
+    const allowedRangeKeys = hasOffset
+      ? ['severity', 'message', 'from', 'to']
+      : ['severity', 'message', 'line', 'column']
+    const unexpectedRangeKeys = Object.keys(record).filter((key) => !allowedRangeKeys.includes(key))
+    if (unexpectedRangeKeys.length > 0) throw new TypeError(`SSqlEditor.diagnostics[${index}]: неизвестные поля ${unexpectedRangeKeys.join(', ')}. / SSqlEditor.diagnostics[${index}]: unknown fields ${unexpectedRangeKeys.join(', ')}.`)
+    const common = {
+      severity: validateExactString('SSqlEditor', `diagnostics[${index}].severity`, record.severity, ['error', 'warning', 'info'] as const),
+      message: validateNonEmptyString('SSqlEditor', `diagnostics[${index}].message`, record.message),
+    }
+    if (hasOffset) {
+      if (!Number.isInteger(record.from) || (record.to !== undefined && !Number.isInteger(record.to))) throw new TypeError(`SSqlEditor: diagnostics[${index}] offsets должны быть целыми числами. / SSqlEditor: diagnostics[${index}] offsets must be integers.`)
+      return { ...common, from: record.from as number, ...(record.to === undefined ? {} : { to: record.to as number }) }
+    }
+    if (!Number.isInteger(record.line) || !Number.isInteger(record.column)) throw new TypeError(`SSqlEditor: diagnostics[${index}] line/column должны быть целыми числами. / SSqlEditor: diagnostics[${index}] line/column must be integers.`)
+    return { ...common, line: record.line as number, column: record.column as number }
+  })
+})
+const statusLabel = computed(() => validatedErrorMessage.value || `${validatedDiagnostics.value.length} диагностик`)
+const hasStatus = computed(() => (
+  validatedErrorMessage.value !== ''
+  || validatedDiagnostics.value.length > 0
+  || Boolean(slots.status)
+))
+const statusHasError = computed(() => (
+  validatedErrorMessage.value !== ''
+  || validatedDiagnostics.value.some((diagnostic) => diagnostic.severity === 'error')
+))
+const statusTone = computed<StatusTone>(() => {
+  if (statusHasError.value) return 'danger'
+  if (validatedDiagnostics.value.some((diagnostic) => diagnostic.severity === 'warning')) return 'warn'
+  return 'info'
+})
+
+const sqlLanguage: SCodeEditorLanguage = { mode: 'explicit', id: 'sql' }
+const editorCapabilities = computed<SCodeEditorCapabilities>(() => ({
+  lineNumbers: validatedShowLineNumbers.value,
+  indentation: { tabSize: props.tabSize, keyBehavior: 'indent' },
+  cursorActivity: 'always',
+}))
+
+const extensions = computed<readonly Extension[]>(() => {
+  const result: Extension[] = []
+  result.push(autocompletion({ override: [completionSource] }))
+  result.push(diagnosticsExtension.value)
+  return result
+})
+
+provideTrustedCodeEditorExtensions('SSqlEditor', extensions)
+
+const emitCursorActivity = (payload: SCodeEditorCursorActivity): void => {
+  emit('cursor-activity', { pos: payload.pos, line: payload.line, column: payload.column })
+}
+
+const applySelection = (pos: number): void => {
+  const editor = codeEditor.value
+  if (!editor) throw new Error('SSqlEditor: editor не готов; дождитесь ready. / SSqlEditor: editor is not ready; wait for ready.')
+  editor.applySelection(pos)
+}
+
+const focus = (): void => {
+  const editor = codeEditor.value
+  if (!editor) throw new Error('SSqlEditor: editor не готов; дождитесь ready. / SSqlEditor: editor is not ready; wait for ready.')
+  editor.focus()
+}
+
+defineExpose({ applySelection, focus })
+</script>

package/src/components/shared/database/dataGrid.ts

@@ -0,0 +1,61 @@
+import type {
+  ScrollableViewportMaxBlockSize,
+  TableColumnInlineSize,
+  TableColumnMinInlineSize,
+} from '../../../internal/semanticSizing'
+import type { STableAlignment } from '../data-display/table'
+
+export type SDataGridColumnKey = string
+export type SDataGridCellKind = 'text' | 'number' | 'boolean' | 'json' | 'datetime' | 'binary'
+export type SDataGridRowState = 'clean' | 'inserted' | 'updated' | 'deleted'
+
+export interface SDataGridColumn<Key extends SDataGridColumnKey = SDataGridColumnKey> {
+  key: Key
+  label: string
+  type?: SDataGridCellKind
+  width?: TableColumnInlineSize
+  minWidth?: TableColumnMinInlineSize
+  editable?: boolean
+  align?: STableAlignment
+}
+
+export interface SDataGridCell {
+  value: unknown
+  display: string
+  kind?: SDataGridCellKind
+  pending?: boolean
+  readonly?: boolean
+}
+
+export interface SDataGridRow<Key extends SDataGridColumnKey = SDataGridColumnKey> {
+  id: string
+  cells: Record<Key, SDataGridCell>
+  state?: SDataGridRowState
+}
+
+export interface SDataGridEditPayload<Key extends SDataGridColumnKey = SDataGridColumnKey> {
+  rowId: string
+  columnKey: Key
+  value: unknown
+}
+
+export type SDataGridCommitInput =
+  | { source: 'draft' }
+  | { source: 'value'; value: unknown }
+
+export interface SDataGridProps<Key extends SDataGridColumnKey = SDataGridColumnKey> {
+  columns: readonly SDataGridColumn<Key>[]
+  rows: readonly SDataGridRow<Key>[]
+  title?: string
+  loading?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  errorMessage?: string
+  emptyMessage?: string
+  selectedRowId?: string
+  maxHeight?: ScrollableViewportMaxBlockSize
+  /** Accessible name без visible title. / Accessible name when there is no visible title. */
+  ariaLabel?: string
+  /** DOM id external visible title. / DOM id of an external visible title. */
+  ariaLabelledby?: string
+}

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

@@ -0,0 +1,26 @@
+@reference "../../../styles/reference.css";
+
+.s-async-state,
+.s-async-state__surface {
+  @apply min-w-0;
+}
+
+.s-async-state--block,
+.s-async-state__surface {
+  @apply w-full;
+}
+
+.s-async-state--overlay {
+  @apply absolute inset-0 flex items-center justify-center bg-surface-0/90 p-4 backdrop-blur-sm dark:bg-surface-900/90;
+  z-index: var(--s-layer-sticky);
+}
+
+.s-async-state__cell {
+  @apply p-0;
+}
+
+.s-async-state__loading {
+  @apply flex min-h-24 min-w-0 w-full items-center justify-center whitespace-normal p-4 text-center text-sm text-surface-500 dark:text-surface-400;
+  overflow-wrap: anywhere;
+  gap: var(--s-space-control-gap);
+}

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

@@ -0,0 +1,190 @@
+<template>
+  <slot v-if="validatedState.status === 'ready' && assertReadyAttrs()" />
+
+  <tr
+    v-else-if="validatedPresentation === 'table-row'"
+    class="s-async-state s-async-state--table-row"
+    :data-state="validatedState.status"
+  >
+    <td :colspan="validatedColspan" class="s-async-state__cell">
+      <div
+        v-bind="ownedAttrs.bindings()"
+        class="s-async-state__surface"
+        :data-state="validatedState.status"
+        :role="surfaceLiveAttributes.role"
+        :aria-live="surfaceLiveAttributes.ariaLive"
+        :aria-atomic="surfaceLiveAttributes.ariaAtomic"
+        :aria-busy="validatedState.status === 'loading' || undefined"
+      >
+        <AsyncStateBody />
+      </div>
+    </td>
+  </tr>
+
+  <div
+    v-else
+    v-bind="ownedAttrs.bindings()"
+    class="s-async-state"
+    :class="`s-async-state--${validatedPresentation}`"
+    :data-state="validatedState.status"
+    :role="surfaceLiveAttributes.role"
+    :aria-live="surfaceLiveAttributes.ariaLive"
+    :aria-atomic="surfaceLiveAttributes.ariaAtomic"
+    :aria-busy="validatedState.status === 'loading' || undefined"
+  >
+    <AsyncStateBody />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Fragment, computed, h, type Slots, type VNodeChild } from 'vue'
+
+import { resolveAsyncFeedbackPresentation } from '../../../internal/feedbackPresentation'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SEmptyState from '../data-display/SEmptyState.vue'
+import SMessage from '../data-display/SMessage.vue'
+import SProgressIndicator from '../data-display/SProgressIndicator.vue'
+
+defineOptions({ inheritAttrs: false })
+
+/**
+ * Единственное состояние асинхронной поверхности; error всегда содержит диагностику, endpoint допустим только для error.
+ * The sole async-surface state; error always carries diagnostics, and endpoint is valid only for error.
+ */
+export type SAsyncStateContract =
+  | { status: 'ready' }
+  | { status: 'loading'; message?: string }
+  | { status: 'empty'; message?: string }
+  | { status: 'error'; message: string; endpoint?: string }
+export type SAsyncStatePresentation = 'block' | 'table-row' | 'overlay'
+
+interface Props {
+  state: SAsyncStateContract
+  presentation?: SAsyncStatePresentation
+  /** Обязателен и допустим только для table-row. / Required and valid only for table-row. */
+  colspan?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  presentation: 'block',
+  colspan: undefined,
+})
+const slots = defineSlots<{
+  default?: () => VNodeChild
+  loading?: (props: { message: string; state: Extract<SAsyncStateContract, { status: 'loading' }> }) => VNodeChild
+  empty?: (props: { message: string; state: Extract<SAsyncStateContract, { status: 'empty' }> }) => VNodeChild
+  error?: (props: { message: string; state: Extract<SAsyncStateContract, { status: 'error' }> }) => VNodeChild
+}>()
+
+const ownedAttrs = useOwnedAttrs({
+  component: 'SAsyncState',
+  owner: 'rendered async-state surface',
+})
+
+const stateAllowedKeys: Readonly<Record<SAsyncStateContract['status'], readonly string[]>> = {
+  ready: ['status'],
+  loading: ['status', 'message'],
+  empty: ['status', 'message'],
+  error: ['status', 'message', 'endpoint'],
+}
+
+const assertNonEmptyOptionalString = (record: Record<string, unknown>, key: 'message' | 'endpoint') => {
+  if (!(key in record)) return
+  if (typeof record[key] !== 'string' || record[key].trim().length === 0) {
+    throw new TypeError(`SAsyncState: state.${key} должен быть непустой строкой при наличии.`)
+  }
+}
+
+const validateState = (state: unknown): SAsyncStateContract => {
+  if (typeof state !== 'object' || state === null || Array.isArray(state)) {
+    throw new TypeError('SAsyncState: state должен быть объектом discriminated union.')
+  }
+  const record = state as Record<string, unknown>
+  const status = record.status
+  if (!['ready', 'loading', 'empty', 'error'].includes(String(status))) {
+    throw new TypeError(`SAsyncState: неизвестный state.status "${String(status)}".`)
+  }
+  const typedStatus = status as SAsyncStateContract['status']
+  const unexpected = Object.keys(record).filter((key) => !stateAllowedKeys[typedStatus].includes(key))
+  if (unexpected.length > 0) {
+    throw new TypeError(`SAsyncState: state.status="${typedStatus}" не допускает поля ${unexpected.join(', ')}.`)
+  }
+  if (typedStatus === 'error') {
+    if (typeof record.message !== 'string' || record.message.trim().length === 0) {
+      throw new TypeError('SAsyncState: state.message должен быть непустой строкой для status="error".')
+    }
+    assertNonEmptyOptionalString(record, 'endpoint')
+  } else if (typedStatus === 'loading' || typedStatus === 'empty') {
+    assertNonEmptyOptionalString(record, 'message')
+  }
+  return state as SAsyncStateContract
+}
+
+const validatedState = computed(() => validateState(props.state))
+const validatedPresentation = computed<SAsyncStatePresentation>(() => {
+  const colspan = props.colspan
+  if (!['block', 'table-row', 'overlay'].includes(String(props.presentation))) {
+    throw new TypeError(`SAsyncState: неизвестный presentation "${String(props.presentation)}".`)
+  }
+  if (props.presentation !== 'table-row' && colspan !== undefined) {
+    throw new TypeError('SAsyncState: colspan допустим только для presentation="table-row".')
+  }
+  if (props.presentation === 'table-row' && colspan === undefined) {
+    throw new TypeError('SAsyncState: presentation="table-row" требует colspan.')
+  }
+  if (props.presentation === 'table-row'
+    && (typeof colspan !== 'number' || !Number.isSafeInteger(colspan) || colspan <= 0)) {
+    throw new TypeError('SAsyncState: colspan должен быть целым числом больше 0.')
+  }
+  return props.presentation
+})
+const validatedColspan = computed(() => {
+  return validatedPresentation.value === 'table-row' ? props.colspan : undefined
+})
+
+const assertReadyAttrs = (): boolean => {
+  ownedAttrs.reject('ready state отдаёт consumer content без UI-kit root / ready state renders consumer content without a UI-kit root')
+  return true
+}
+const statePresentation = computed(() => {
+  const state = validatedState.value
+  return state.status === 'ready' ? undefined : resolveAsyncFeedbackPresentation(state.status)
+})
+const resolvedMessage = computed(() => {
+  const state = validatedState.value
+  if (state.status === 'ready') return ''
+  return state.message ?? statePresentation.value?.fallbackMessage ?? ''
+})
+const customStateSlot = computed(() => {
+  const state = validatedState.value
+  return state.status === 'ready' ? undefined : slots[state.status] as Slots[string] | undefined
+})
+const surfaceLiveAttributes = computed(() => {
+  const state = validatedState.value
+  if (state.status === 'ready') return {}
+  return state.status === 'loading' || customStateSlot.value
+    ? statePresentation.value?.live ?? {}
+    : {}
+})
+
+const AsyncStateBody = () => {
+  const state = validatedState.value
+  if (state.status === 'ready') return null
+  const stateSlot = customStateSlot.value
+  if (stateSlot) {
+    return h(Fragment, stateSlot({ message: resolvedMessage.value, state }))
+  }
+  if (state.status === 'error') {
+    return h(SMessage, { severity: 'danger', live: 'auto', size: 'sm' }, () => resolvedMessage.value)
+  }
+  if (state.status === 'empty') {
+    return h(SEmptyState, { title: resolvedMessage.value, size: 'sm' })
+  }
+  return h('div', { class: 's-async-state__loading' }, [
+    h(SProgressIndicator, { accessibility: { mode: 'decorative' }, size: 'sm', tone: 'info' }),
+    h('span', resolvedMessage.value),
+  ])
+}
+</script>
+
+<style lang="postcss" src="./SAsyncState.css" scoped></style>

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

@@ -0,0 +1 @@
+export * from './_internal/graphViewportContract'