@pgcorp/ui-kit 0.3.0 → 0.3.1

package/docs/public-api.md

@@ -18,6 +18,10 @@
 
 Компонентный contract выражается через typed props, slots, events и exposed
 methods. Внутренний DOM, CSS-классы и private modules не являются API.
+Публичные source-SFC объявляют runtime props и events локально: consumer Vue
+compiler регистрирует их без межфайлового filesystem type resolver.
+Публикуемый production-source компилируется с `target/lib: ES2020`, совпадающим
+с baseline `@vue/tsconfig/tsconfig.dom.json`, и не требует скрытых полифиллов.
 
 ## English
 
@@ -37,3 +41,7 @@ Primary groups:
 
 Component contracts are expressed through typed props, slots, events, and exposed
 methods. Internal DOM, CSS classes, and private modules are not API.
+Public source SFCs declare runtime props and events locally, so the consumer Vue
+compiler registers them without a cross-file filesystem type resolver.
+Published production source compiles with the `target/lib: ES2020` baseline from
+`@vue/tsconfig/tsconfig.dom.json` and does not require implicit polyfills.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",

package/src/components/layout/SAppShell.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, useSlots } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import { hasOwn } from '../../internal/es2020'
 import { useOwnedAttrs } from '../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../internal/runtimeContract'
 import SBadge from '../shared/data-display/SBadge.vue'
@@ -98,8 +99,8 @@ function toKebabCase(value: string): string {
 function hasExplicitProp(propName: string): boolean {
   const vnodeProps = componentInstance.vnode.props
   return vnodeProps !== null && (
-    Object.hasOwn(vnodeProps, propName)
-    || Object.hasOwn(vnodeProps, toKebabCase(propName))
+    hasOwn(vnodeProps, propName)
+    || hasOwn(vnodeProps, toKebabCase(propName))
   )
 }
 

package/src/components/shared/complex/STree.vue

@@ -32,8 +32,36 @@
   </ul>
 </template>
 
+<script lang="ts">
+import type {
+  SelectionKey,
+  TreeActionsLayout,
+  TreeDensity,
+  TreeExpandControl,
+  TreeModel,
+  TreeRowVariant,
+  TreeSelection,
+  TreeSelectionRail,
+} from './types'
+
+/** Публичный контракт дерева принадлежит source-SFC runtime. / The public tree contract is owned by the source-SFC runtime. */
+export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
+  nodes: readonly T[]
+  model: TreeModel<T, K>
+  label: string
+  selection: TreeSelection<K>
+  expanded?: ReadonlySet<K>
+  density?: TreeDensity
+  actionsLayout?: TreeActionsLayout
+  expandControl?: TreeExpandControl
+  selectionRail?: TreeSelectionRail
+  rowVariant?: TreeRowVariant
+}
+</script>
+
 <script setup lang="ts" generic="T extends object, K extends SelectionKey">
 import { computed, nextTick, provide, ref, watch } from 'vue'
+import { lastItem } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { assertSelectionKey, selectionKeyToken } from '../_internal/useSelectionRoving'
 import STreeNode from '../_internal/STreeNode.vue'
@@ -46,12 +74,9 @@ import {
 import { validateTreeModel } from './treeAdapter'
 import type {
   STreeNodeContentScope,
-  STreeProps,
-  SelectionKey,
   TreeActivationOrigin,
   TreeNodeActivationEvent,
   TreeNodeEvent,
-  TreeSelection,
 } from './types'
 
 defineOptions({ inheritAttrs: false })
@@ -172,7 +197,7 @@ function handleTreeItemKeydown(item: RegisteredTreeItem<T, K>, event: KeyboardEv
   }
   if (event.key === 'End') {
     event.preventDefault()
-    void focusItem(items.at(-1))
+    void focusItem(lastItem(items))
     return
   }
   if (event.key === 'ArrowRight' && item.hasChildren()) {

package/src/components/shared/complex/treeAdapter.ts

@@ -5,6 +5,7 @@ import {
   type SelectionIdentity,
   type SelectionKey,
 } from '../_internal/useSelectionRoving'
+import { withErrorCause } from '../../../internal/es2020'
 import type { TreeModel } from './types'
 
 export interface FlatTreeAdapter<T extends object, K extends SelectionKey> {
@@ -130,7 +131,7 @@ function readModelValue<R>(
   try {
     return reader()
   } catch (error) {
-    throw new TypeError(`STree: model.${field} failed at ${coordinate}`, { cause: error })
+    throw withErrorCause(new TypeError(`STree: model.${field} failed at ${coordinate}`), error)
   }
 }
 

package/src/components/shared/complex/types.ts

@@ -51,18 +51,7 @@ export type TreeExpandControl = 'button' | 'row'
 export type TreeSelectionRail = 'hidden' | 'visible'
 export type TreeRowVariant = 'default' | 'table'
 
-export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
-  nodes: readonly T[]
-  model: TreeModel<T, K>
-  label: string
-  selection: TreeSelection<K>
-  expanded?: ReadonlySet<K>
-  density?: TreeDensity
-  actionsLayout?: TreeActionsLayout
-  expandControl?: TreeExpandControl
-  selectionRail?: TreeSelectionRail
-  rowVariant?: TreeRowVariant
-}
+export type { STreeProps } from './STree.vue'
 
 export interface TreeNodeEvent<T extends object, K extends SelectionKey = SelectionKey> {
   node: T

package/src/components/shared/containers/SLeftSidebar.vue

@@ -33,7 +33,7 @@ import { type FunctionalComponent, type HTMLAttributes, type VNodeProps } from '
 import SPanel from './SPanel.vue';
 import SSidebarGroup from './SSidebarGroup.vue';
 import type { SAsyncStateContract } from '../feedback/SAsyncState.vue';
-import type { SidebarGroupEmits, SidebarSectionsState } from './sidebar';
+import type { SidebarSectionsState } from './sidebar';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
 
 defineOptions({ inheritAttrs: false });
@@ -48,6 +48,11 @@ export interface Props {
   scrollBehavior?: 'auto' | 'body' | 'self' | 'child';
 }
 
+interface Emits {
+  'update-sections': [state: SidebarSectionsState];
+  'toggle-section': [key: string];
+}
+
 withDefaults(defineProps<Props>(), {
   title: undefined,
   icon: undefined,
@@ -56,7 +61,7 @@ withDefaults(defineProps<Props>(), {
   scrollBehavior: 'child',
 });
 
-const emit = defineEmits<SidebarGroupEmits>();
+const emit = defineEmits<Emits>();
 const ownedAttrs = useOwnedAttrs({ component: 'SLeftSidebar', owner: 'left-sidebar root' });
 </script>
 

package/src/components/shared/containers/SPopover.vue

@@ -93,6 +93,7 @@ import SButton, {
 } from '../controls/SButton.vue';
 import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
 import { findRelativeTabTarget, getFocusableElements } from '../../../internal/focusNavigation';
+import { lastItem } from '../../../internal/es2020';
 import { resolveInteractiveElement } from '../../../internal/interactiveElement';
 import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
@@ -495,7 +496,7 @@ function handlePanelTab(event: KeyboardEvent): void {
   const focusable = getFocusableElements(panel);
   const active = document.activeElement;
   const first = focusable[0];
-  const last = focusable.at(-1);
+  const last = lastItem(focusable);
   const leavesPanel = focusable.length === 0
     || (event.shiftKey ? active === panel || active === first : active === last);
   if (!leavesPanel) return;

package/src/components/shared/containers/SSidebarGroup.vue

@@ -16,6 +16,7 @@ import {
 } from 'vue';
 
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { hasOwn, lastItem } from '../../../internal/es2020';
 import {
   sidebarGroupContextKey,
   type RegisteredSidebarSection,
@@ -27,7 +28,6 @@ import {
   createSidebarSectionsTransition,
   sidebarSectionsStateEqual,
   type SectionState,
-  type SidebarGroupEmits,
   type SidebarSectionReplacement,
   type SidebarSectionsState,
 } from './sidebar';
@@ -38,7 +38,12 @@ const props = defineProps<{
   sectionsState: SidebarSectionsState;
 }>();
 
-const emit = defineEmits<SidebarGroupEmits>();
+interface Emits {
+  'update-sections': [state: SidebarSectionsState];
+  'toggle-section': [key: string];
+}
+
+const emit = defineEmits<Emits>();
 
 const ownedAttrs = useOwnedAttrs({ component: 'SSidebarGroup', owner: 'sidebar group root' });
 const groupRef = ref<HTMLDivElement | null>(null);
@@ -147,7 +152,7 @@ function fitOpenSectionSizes(
 
   let delta = targetSize - [...sizes.values()].reduce((sum, size) => sum + size, 0);
   if (delta > 0) {
-    const growTarget = flexible ?? openSections.at(-1);
+    const growTarget = flexible ?? lastItem(openSections);
     if (growTarget) sizes.set(growTarget.key, sizes.get(growTarget.key)! + delta);
     delta = 0;
   }
@@ -200,7 +205,7 @@ function registerSection(registration: SidebarSectionRegistration): () => void {
   if (!(registration.element instanceof HTMLElement)) {
     throw new TypeError('SSidebarGroup: registered section element must be an HTMLElement');
   }
-  if (!Object.hasOwn(currentState(), registration.key)) {
+  if (!hasOwn(currentState(), registration.key)) {
     throw new Error(`SSidebarGroup: registered section '${registration.key}' has no controlled state`);
   }
   if (registrations.value.some((current) => current.key === registration.key)) {
@@ -371,7 +376,7 @@ function resizeSections(topKey: string, bottomKey: string, requestedTopSize: num
   );
   const delta = requestedTopSize - currentUpperSize;
   const shrinking = delta > 0 ? [...lower] : [...upper].reverse();
-  const growing = delta > 0 ? upper.at(-1) : lower[0];
+  const growing = delta > 0 ? lastItem(upper) : lower[0];
   let transferable = Math.abs(delta);
   transferable = Math.min(
     transferable,

package/src/components/shared/containers/sidebar.ts

@@ -163,7 +163,7 @@ export function createSidebarSectionsTransition(
     if (typeof replacement.key !== 'string' || replacement.key.trim().length === 0) {
       throw new TypeError(`SSidebarGroup: replacements[${index}].key must be a non-empty string`);
     }
-    if (!Object.hasOwn(current, replacement.key)) {
+    if (!hasOwn(current, replacement.key)) {
       throw new Error(`SSidebarGroup: cannot replace unknown section '${replacement.key}'`);
     }
     if (replacementsByKey.has(replacement.key)) {
@@ -204,3 +204,4 @@ export function sidebarSectionsStateEqual(
       && leftSection.minSize === rightSection.minSize;
   });
 }
+import { hasOwn } from '../../../internal/es2020';

package/src/components/shared/controls/SButton.vue

@@ -72,8 +72,8 @@ import { useTreeActionRegistration } from '../_internal/treeRuntime'
 import SBadge, { type BadgeSeverity } from '../data-display/SBadge.vue'
 import SProgressIndicator, { type SProgressIndicatorSize } from '../data-display/SProgressIndicator.vue'
 import type {
-  HrefLinkDestination,
-  RouterLinkDestination,
+  LinkBrowsingTarget,
+  LinkRouterTarget,
 } from './SLink'
 
 defineOptions({ inheritAttrs: false })
@@ -132,9 +132,14 @@ export type SButtonActionProps = SButtonPresentationProps & {
   type?: SButtonNativeType
 }
 
-export type SButtonNavigationProps = SButtonPresentationProps & (
-  | (HrefLinkDestination & { type?: never })
-  | (RouterLinkDestination & { type?: never })
+interface SButtonNavigationOptions {
+  target?: LinkBrowsingTarget
+  rel?: string
+}
+
+export type SButtonNavigationProps = SButtonPresentationProps & SButtonNavigationOptions & (
+  | { href: string; to?: never; type?: never }
+  | { href?: never; to: LinkRouterTarget; type?: never }
 )
 
 /** Strict action/navigation XOR with a shared button presentation. */

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -2,6 +2,7 @@
 import { computed, watchEffect, type VNodeChild } from 'vue'
 import { RouterLink, type RouteLocationRaw } from 'vue-router'
 import type { STooltipTriggerBinding } from '../data-display/STooltip.vue'
+import { hasOwn } from '../../../internal/es2020'
 import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
@@ -195,7 +196,7 @@ const validatedTooltipTrigger = computed<STooltipTriggerBinding | undefined>(()
   }
   const record = candidate as Record<string, unknown>
   const unexpected = Object.keys(record).filter((key) => !TOOLTIP_TRIGGER_KEYS.includes(key as typeof TOOLTIP_TRIGGER_KEYS[number]))
-  const missing = TOOLTIP_TRIGGER_KEYS.filter((key) => !Object.hasOwn(record, key))
+  const missing = TOOLTIP_TRIGGER_KEYS.filter((key) => !hasOwn(record, key))
   if (unexpected.length > 0 || missing.length > 0) {
     throw new Error(`SInteractiveSurface: tooltipTrigger имеет недопустимый набор ключей; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}. / SInteractiveSurface: tooltipTrigger has an invalid key set; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}.`)
   }

package/src/components/shared/controls/SLink.ts

@@ -1,4 +1,3 @@
-import type { Component } from 'vue'
 import type {
   HistoryState,
   LocationQueryRaw,
@@ -67,19 +66,4 @@ export type RouterLinkDestination = LinkDestinationOptions & {
 /** Строгий XOR-контракт обычного destination. / Strict XOR contract for an ordinary destination. */
 export type LinkDestination = HrefLinkDestination | RouterLinkDestination
 
-/** Canonical presentation/state API owned by SLink. */
-export interface LinkPresentationProps {
-  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
-  readonly external?: boolean
-  readonly active?: boolean
-  readonly disabled?: boolean
-  readonly width?: 'fit' | 'full'
-  readonly size?: 'inherit' | 'sm' | 'md'
-  readonly underline?: 'hover' | 'always' | 'none'
-  readonly wrap?: 'normal' | 'anywhere'
-  readonly contentKind?: 'text' | 'identifier'
-  readonly leadingIcon?: Component
-}
-
-/** Полный discriminated public props contract SLink. / Complete discriminated public SLink props contract. */
-export type SLinkProps = LinkDestination & LinkPresentationProps
+export type { LinkPresentationProps, Props as SLinkProps } from './SLink.vue'

package/src/components/shared/controls/SLink.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type Component,
   computed,
   type VNodeChild,
 } from 'vue'
@@ -12,13 +13,36 @@ import {
   type PassiveContentContract,
 } from '../../../internal/passiveContentContract'
 import type {
-  SLinkProps,
+  LinkBrowsingTarget,
+  LinkRouterTarget,
 } from './SLink'
 
 defineOptions({ inheritAttrs: false })
 
+/** Canonical presentation/state API owned by SLink. */
+export interface LinkPresentationProps {
+  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
+  readonly external?: boolean
+  readonly active?: boolean
+  readonly disabled?: boolean
+  readonly width?: 'fit' | 'full'
+  readonly size?: 'inherit' | 'sm' | 'md'
+  readonly underline?: 'hover' | 'always' | 'none'
+  readonly wrap?: 'normal' | 'anywhere'
+  readonly contentKind?: 'text' | 'identifier'
+  readonly leadingIcon?: Component
+}
+
+interface LinkDestinationOptions {
+  readonly target?: LinkBrowsingTarget
+  readonly rel?: string
+}
+
 /** Exact href/to XOR plus the canonical link presentation API. */
-export type Props = SLinkProps
+export type Props = LinkPresentationProps & LinkDestinationOptions & (
+  | { readonly href: string; readonly to?: never }
+  | { readonly href?: never; readonly to: LinkRouterTarget }
+)
 
 const props = withDefaults(defineProps<Props>(), {
   href: undefined,

package/src/components/shared/data-display/SDocBlock.vue

@@ -88,20 +88,20 @@ useInteractiveLeafRegistration({ owner: 'SDocBlock' });
 
 function escapeHighlightedCode(code: string): string {
   return code
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+    .replace(/"/gu, '&quot;')
+    .replace(/'/gu, '&#39;');
 }
 
 function escapeHtmlAttribute(value: string): string {
   return value
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+    .replace(/"/gu, '&quot;')
+    .replace(/'/gu, '&#39;');
 }
 
 const markdownRenderer = new marked.Renderer();

package/src/components/shared/data-display/SLinkedSystemsList.vue

@@ -113,6 +113,7 @@ export interface Slots<T extends LinkedSystemListItem = LinkedSystemListItem> {
 
 <script setup lang="ts" generic="T extends LinkedSystemListItem = LinkedSystemListItem">
 import { computed, watchEffect } from 'vue'
+import { withErrorCause } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateBoolean,
@@ -169,11 +170,10 @@ function validateExternalUrl(value: unknown, index: number): void {
   try {
     parsedUrl = new URL(externalUrl)
   } catch (error: unknown) {
-    throw new TypeError(
+    throw withErrorCause(new TypeError(
       `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL или null; получено ${JSON.stringify(externalUrl)}. `
       + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL or null; received ${JSON.stringify(externalUrl)}.`,
-      { cause: error },
-    )
+    ), error)
   }
   if (
     (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:')

package/src/components/shared/data-display/STable.vue

@@ -104,6 +104,19 @@
 </template>
 
 <script lang="ts">
+import type { ScrollableViewportMaxBlockSize } from '../../../internal/semanticSizing'
+import type {
+  STableCellState,
+  STableColumn,
+  STableColumnContent,
+  STableDensity,
+  STableMinWidth,
+  STableRowKey,
+  STableRowState,
+  STableSort,
+  STableSurface,
+} from './table'
+
 export type {
   STableAlignment,
   STableCellState,
@@ -111,18 +124,47 @@ export type {
   STableColumnContent,
   STableDensity,
   STableMinWidth,
-  STableProps,
   STableRowKey,
   STableRowState,
   STableSort,
   STableSortDirection,
   STableSurface,
 } from './table'
+
+/** Публичный generic-контракт таблицы принадлежит source-SFC runtime. / The public generic table contract is owned by the source-SFC runtime. */
+export interface STableProps<
+  Row extends object,
+  RowKey extends STableRowKey,
+  Field extends string,
+> {
+  columns: readonly STableColumn<Row, Field>[]
+  data: readonly Row[]
+  getRowKey: (row: Row) => RowKey
+  loading?: boolean
+  loadingMessage?: string
+  errorMessage?: string
+  emptyMessage?: string
+  selectedRowKey?: RowKey
+  sort?: STableSort<Field> | null
+  maxHeight?: ScrollableViewportMaxBlockSize
+  density?: STableDensity
+  surface?: STableSurface
+  minWidth?: STableMinWidth
+  rowState?: (row: Row) => STableRowState
+  cellState?: (row: Row, column: STableColumn<Row, Field>) => STableCellState
+  /** Accessible name без visible owner. / Accessible name when there is no visible owner. */
+  ariaLabel?: string
+  /** DOM id visible owner, mutually exclusive with ariaLabel. / DOM id of the visible owner, mutually exclusive with ariaLabel. */
+  ariaLabelledby?: string
+  /** DOM id supplemental status/diagnostic owner. / DOM id of a supplemental status/diagnostic owner. */
+  ariaDescribedby?: string
+}
 </script>
 
 <script setup lang="ts" generic="Row extends object = Record<string, unknown>, RowKey extends STableRowKey = STableRowKey, Field extends string = Extract<keyof Row, string>">
 import { computed, useSlots } from 'vue'
 import { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons/sputnigUiIcons'
+import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import {
@@ -138,16 +180,6 @@ import {
 } from '../../../internal/runtimeContract'
 import SAsyncState from '../feedback/SAsyncState.vue'
 import SButton from '../controls/SButton.vue'
-import type {
-  STableCellState,
-  STableColumn,
-  STableColumnContent,
-  STableProps,
-  STableRowKey,
-  STableRowState,
-  STableSort,
-} from './table'
-
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
@@ -392,7 +424,7 @@ const validatedRows = computed<readonly Row[]>(() => {
   for (const row of props.data) {
     for (const column of columns) {
       const content = column.content ?? (column.value === undefined ? 'field' : 'value')
-      if (content === 'field' && !Object.hasOwn(row, column.field)) {
+      if (content === 'field' && !hasOwn(row, column.field)) {
         throw new TypeError(
           `STable: column ${JSON.stringify(column.field)} не известен row; добавьте typed field или value resolver. `
           + `/ STable: column ${JSON.stringify(column.field)} is unknown to row; add a typed field or value resolver.`,

package/src/components/shared/data-display/STooltip.vue

@@ -69,6 +69,7 @@ import {
   type VNodeRef,
 } from 'vue';
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { hasOwn } from '../../../internal/es2020';
 import {
   resolveInteractiveElement,
   type ElementRefTarget,
@@ -202,7 +203,7 @@ function assertDenseArray(coordinate: string, value: unknown): readonly unknown[
     throw triggerContractError(`${coordinate} должен быть массивом. ${coordinate} must be an array.`);
   }
   for (let index = 0; index < value.length; index += 1) {
-    if (!Object.hasOwn(value, index)) {
+    if (!hasOwn(value, index)) {
       throw triggerContractError(`${coordinate}[${index}] отсутствует в sparse array. ${coordinate}[${index}] is missing from a sparse array.`);
     }
   }

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

@@ -1,19 +1,4 @@
 /** Ключ элемента виртуального списка. / Virtual-list item key. */
 export type SVirtualListItemKey = string | number
 
-/**
- * Публичный контракт виртуального списка с измеряемыми строками.
- * Public contract for a virtual list with measured rows.
- */
-export interface SVirtualListProps<Item = unknown> {
-  items: readonly Item[]
-  /** Оценочная высота строки до фактического измерения ResizeObserver. / Estimated row height before ResizeObserver measurement. */
-  itemSize: number
-  overscan?: number
-  height?: number | null
-  /** Устойчивый доменный ключ; индекс массива не является допустимым fallback. / Stable domain key; an array index is not a valid fallback. */
-  itemKey: (item: Item) => SVirtualListItemKey
-  itemLabel: (item: Item, index: number) => string
-  accessibleLabel: string
-  externalScrollTarget?: HTMLElement | null
-}
+export type { SVirtualListProps } from './SVirtualList.vue'

package/src/components/shared/data-display/SVirtualList.vue

@@ -35,6 +35,24 @@
   </div>
 </template>
 
+<script lang="ts">
+import type { SVirtualListItemKey } from './SVirtualList'
+
+/** Публичный контракт virtual list принадлежит source-SFC runtime. / The public virtual-list contract is owned by the source-SFC runtime. */
+export interface SVirtualListProps<Item = unknown> {
+  items: readonly Item[]
+  /** Оценочная высота строки до фактического измерения. / Estimated row height before measurement. */
+  itemSize: number
+  overscan?: number
+  height?: number | null
+  /** Устойчивый доменный ключ; индекс не является fallback. / Stable domain key; the index is not a fallback. */
+  itemKey: (item: Item) => SVirtualListItemKey
+  itemLabel: (item: Item, index: number) => string
+  accessibleLabel: string
+  externalScrollTarget?: HTMLElement | null
+}
+</script>
+
 <script setup lang="ts" generic="T">
 import {
   computed,
@@ -47,8 +65,6 @@ import {
 } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import type { SVirtualListItemKey, SVirtualListProps } from './SVirtualList'
-
 defineOptions({ inheritAttrs: false })
 
 type Alignment = 'auto' | 'start' | 'center' | 'end'

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

@@ -12,7 +12,7 @@ export type JsonValue = JsonScalar | JsonObject | JsonArray
 
 /** Escapes one RFC 6901 reference token. / Экранирует один reference token по RFC 6901. */
 export function escapeJsonPointerToken(token: string): string {
-  return token.replaceAll('~', '~0').replaceAll('/', '~1')
+  return token.replace(/~/gu, '~0').replace(/\//gu, '~1')
 }
 
 /** Appends a reference token to an RFC 6901 JSON Pointer. / Добавляет reference token к JSON Pointer по RFC 6901. */

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

@@ -1,5 +1,4 @@
 import type {
-  ScrollableViewportMaxBlockSize,
   TableColumnInlineSize,
   TableColumnMinInlineSize,
 } from '../../../internal/semanticSizing'
@@ -55,31 +54,4 @@ export type STableColumn<
   | STableSlotColumn<Field>
   | (Field extends Extract<keyof Row, string> ? STableFieldColumn<Field> : never)
 
-/** Публичный generic-контракт таблицы. / Public generic table contract. */
-export interface STableProps<
-  Row extends object,
-  RowKey extends STableRowKey,
-  Field extends string,
-> {
-  columns: readonly STableColumn<Row, Field>[]
-  data: readonly Row[]
-  getRowKey: (row: Row) => RowKey
-  loading?: boolean
-  loadingMessage?: string
-  errorMessage?: string
-  emptyMessage?: string
-  selectedRowKey?: RowKey
-  sort?: STableSort<Field> | null
-  maxHeight?: ScrollableViewportMaxBlockSize
-  density?: STableDensity
-  surface?: STableSurface
-  minWidth?: STableMinWidth
-  rowState?: (row: Row) => STableRowState
-  cellState?: (row: Row, column: STableColumn<Row, Field>) => STableCellState
-  /** Accessible name без visible owner. / Accessible name when there is no visible owner. */
-  ariaLabel?: string
-  /** DOM id visible owner, mutually exclusive with ariaLabel. / DOM id of the visible owner, mutually exclusive with ariaLabel. */
-  ariaLabelledby?: string
-  /** DOM id supplemental status/diagnostic owner. / DOM id of a supplemental status/diagnostic owner. */
-  ariaDescribedby?: string
-}
+export type { STableProps } from './STable.vue'

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

@@ -83,6 +83,13 @@
 </template>
 
 <script lang="ts">
+import type { ScrollableViewportMaxBlockSize } from '../../../internal/semanticSizing'
+import type {
+  SDataGridColumn,
+  SDataGridColumnKey,
+  SDataGridRow,
+} from './dataGrid'
+
 export type {
   SDataGridCell,
   SDataGridCellKind,
@@ -90,14 +97,32 @@ export type {
   SDataGridColumnKey,
   SDataGridCommitInput,
   SDataGridEditPayload,
-  SDataGridProps,
   SDataGridRow,
   SDataGridRowState,
 } from './dataGrid'
+
+/** Публичный контракт data grid принадлежит source-SFC runtime. / The public data-grid contract is owned by the source-SFC runtime. */
+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
+}
 </script>
 
 <script setup lang="ts" generic="ColumnKey extends string = string">
 import { computed, reactive, useId, useSlots, watch } from 'vue'
+import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateScrollableViewportMaxBlockSize,
@@ -121,12 +146,8 @@ import type {
 } from '../data-display/table'
 import type {
   SDataGridCell,
-  SDataGridColumn,
-  SDataGridColumnKey,
   SDataGridCommitInput,
   SDataGridEditPayload,
-  SDataGridProps,
-  SDataGridRow,
 } from './dataGrid'
 
 defineOptions({ inheritAttrs: false })
@@ -266,7 +287,7 @@ const validatedGrid = computed<ValidatedGrid<ColumnKey>>(() => {
       }
     }
     for (const [key, column] of columnByKey) {
-      if (!Object.hasOwn(row.cells, key)) {
+      if (!hasOwn(row.cells, key)) {
         throw new TypeError(
           `SDataGrid: row ${JSON.stringify(rowId)} не содержит cell ${JSON.stringify(key)}. `
           + `/ SDataGrid: row ${JSON.stringify(rowId)} is missing cell ${JSON.stringify(key)}.`,
@@ -358,7 +379,7 @@ function resolveColumn(key: string): SDataGridColumn<ColumnKey> {
 
 function resolveCell(row: SDataGridRow<ColumnKey>, columnKeyValue: string): SDataGridCell {
   const columnKey = resolveColumn(columnKeyValue).key
-  if (Object.hasOwn(row.cells, columnKey)) return row.cells[columnKey]
+  if (hasOwn(row.cells, columnKey)) return row.cells[columnKey]
   throw new TypeError(
     `SDataGrid: row ${JSON.stringify(row.id)} не содержит cell ${JSON.stringify(columnKey)}. `
     + `/ SDataGrid: row ${JSON.stringify(row.id)} is missing cell ${JSON.stringify(columnKey)}.`,
@@ -404,7 +425,7 @@ function editCell(row: SDataGridRow<ColumnKey>, column: SDataGridColumn<ColumnKe
 function validateCommitInput(input: unknown): SDataGridCommitInput {
   assertRecord(input, 'commit input')
   const source = validateExactString('SDataGrid', 'commit input.source', input.source, COMMIT_SOURCES)
-  const hasValue = Object.hasOwn(input, 'value')
+  const hasValue = hasOwn(input, 'value')
   if (source === 'draft' && hasValue) {
     throw new TypeError(
       'SDataGrid: draft commit не должен содержать value. / SDataGrid: draft commit must not contain value.',

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

@@ -51,6 +51,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useId, useSlots } from 'vue'
+import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { provideTrustedCodeEditorExtensions } from '../../../internal/codeEditorExtensions'
 import { validateCodeEditorViewport } from '../../../internal/codeEditorContract'
@@ -291,8 +292,8 @@ const validatedDiagnostics = computed<SSqlEditorDiagnostic[]>(() => {
   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')
+    const hasOffset = hasOwn(record, 'from')
+    const hasLine = hasOwn(record, 'line') || 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']

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

@@ -1,5 +1,4 @@
 import type {
-  ScrollableViewportMaxBlockSize,
   TableColumnInlineSize,
   TableColumnMinInlineSize,
 } from '../../../internal/semanticSizing'
@@ -43,19 +42,4 @@ 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
-}
+export type { SDataGridProps } from './SDataGrid.vue'

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

@@ -58,6 +58,7 @@ import {
   type VNodeChild,
 } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { lastItem } from '../../../internal/es2020'
 import {
   tabsContextKey,
   type STabListRegistrationKey,
@@ -425,7 +426,7 @@ function handleTabKeydown(key: STabRegistrationKey, event: KeyboardEvent): void
   }
   let next: TabRecord | undefined
   if (event.key === 'Home') next = enabled[0]
-  else if (event.key === 'End') next = enabled.at(-1)
+  else if (event.key === 'End') next = lastItem(enabled)
   else if (event.key === 'ArrowLeft') next = enabled[(currentIndex - 1 + enabled.length) % enabled.length]
   else if (event.key === 'ArrowRight') next = enabled[(currentIndex + 1) % enabled.length]
   if (!next) return

package/src/composables/uiPreferencesReset.ts

@@ -45,8 +45,9 @@ export function createUiPreferencesResetController(): UiPreferencesResetControll
         throw errors[0];
       }
       if (errors.length > 1) {
-        throw new AggregateError(errors, 'Не все owners UI-предпочтений смогли обработать сброс.');
+        throw createAggregateError(errors, 'Не все owners UI-предпочтений смогли обработать сброс.');
       }
     },
   };
 }
+import { createAggregateError } from '../internal/es2020';

package/src/composables/useClipboard.ts

@@ -28,10 +28,11 @@ export function useClipboard(): ClipboardService {
       const isDomException = typeof DOMException !== 'undefined' && cause instanceof DOMException
       const error = cause instanceof Error || isDomException
         ? cause
-        : new Error('Clipboard API rejected writeText without an Error object', { cause })
+        : withErrorCause(new Error('Clipboard API rejected writeText without an Error object'), cause)
       return { status: 'failed', error }
     }
   }
 
   return { copyText }
 }
+import { withErrorCause } from '../internal/es2020'

package/src/composables/useSidebarPanelState.ts

@@ -1,4 +1,5 @@
 import { computed, getCurrentScope, onScopeDispose, reactive, readonly, watch } from 'vue';
+import { hasOwn, lastItem } from '../internal/es2020';
 
 import {
   assertSidebarSectionsState,
@@ -284,7 +285,7 @@ function preferredFlexibleSectionKey(
     return config?.defaultIsOpen === true && config.defaultSize === null;
   });
   if (defaultFlexibleKey && state[defaultFlexibleKey]?.isOpen) return defaultFlexibleKey;
-  return openKeys.at(-1) ?? null;
+  return lastItem(openKeys) ?? null;
 }
 
 /**
@@ -327,7 +328,7 @@ function decodePersistedDocument(
   if (!isPlainRecord(value)) {
     throw new SidebarPanelStateContractError('$', 'expected an object');
   }
-  if (Object.hasOwn(value, 'version') || Object.hasOwn(value, 'sections')) {
+  if (hasOwn(value, 'version') || hasOwn(value, 'sections')) {
     assertExactKeys(value, ['sections', 'version'], '$');
     if (value.version !== SIDEBAR_PANEL_STATE_SCHEMA_VERSION) {
       throw new SidebarPanelStateContractError(

package/src/internal/es2020.ts

@@ -0,0 +1,50 @@
+/** Проверяет собственное свойство без зависимости от ES2022 Object.hasOwn. / Checks an own property without the ES2022 Object.hasOwn API. */
+export function hasOwn(object: object, key: PropertyKey): boolean {
+  return Object.prototype.hasOwnProperty.call(object, key)
+}
+
+/** Возвращает последний элемент без зависимости от ES2022 Array.at. / Returns the last item without the ES2022 Array.at API. */
+export function lastItem<T>(items: readonly T[]): T | undefined {
+  return items.length > 0 ? items[items.length - 1] : undefined
+}
+
+/** Ошибка с ES2022-compatible cause, доступная в ES2020 runtime. / An ES2022-compatible error cause for ES2020 runtimes. */
+export type ErrorWithCause<T extends Error = Error> = T & { cause: unknown }
+
+/** Добавляет стандартный non-enumerable cause без требования ES2022 lib. / Adds the standard non-enumerable cause without requiring the ES2022 lib. */
+export function withErrorCause<T extends Error>(error: T, cause: unknown): ErrorWithCause<T> {
+  Object.defineProperty(error, 'cause', {
+    configurable: true,
+    value: cause,
+    writable: true,
+  })
+  return error as ErrorWithCause<T>
+}
+
+interface AggregateErrorLike extends Error {
+  readonly errors: readonly unknown[]
+}
+
+interface AggregateErrorConstructorLike {
+  new (errors: Iterable<unknown>, message?: string): AggregateErrorLike
+}
+
+class Es2020AggregateError extends Error implements AggregateErrorLike {
+  readonly errors: readonly unknown[]
+
+  constructor(errors: readonly unknown[], message: string) {
+    super(message)
+    this.name = 'AggregateError'
+    this.errors = [...errors]
+  }
+}
+
+/** Создаёт native AggregateError при наличии и точный ES2020 fallback иначе. / Creates a native AggregateError when available and an exact ES2020 fallback otherwise. */
+export function createAggregateError(errors: readonly unknown[], message: string): AggregateErrorLike {
+  const candidate: unknown = (globalThis as { AggregateError?: unknown }).AggregateError
+  if (typeof candidate === 'function') {
+    const AggregateErrorConstructor = candidate as AggregateErrorConstructorLike
+    return new AggregateErrorConstructor(errors, message)
+  }
+  return new Es2020AggregateError(errors, message)
+}

package/src/internal/inlineTokenEditorContract.ts

@@ -1,4 +1,5 @@
 import { validateBoundedInteger, validateNonEmptyString } from './runtimeContract'
+import { hasOwn, lastItem } from './es2020'
 
 export type InlineTokenEditorSegmentContract =
   | { readonly kind: 'text'; readonly text: string }
@@ -44,7 +45,7 @@ export function parseInlineTokenEditorSource(
   const parsed: InlineTokenEditorSegmentContract[] = []
   const tokenOccurrences = new Map<string, number>()
   for (let index = 0; index < segments.length; index += 1) {
-    if (!Object.hasOwn(segments, index)) {
+    if (!hasOwn(segments, index)) {
       throw new TypeError(`SInlineTokenEditor: segments[${index}] отсутствует в sparse array. / SInlineTokenEditor: segments[${index}] is missing from a sparse array.`)
     }
     const record = assertPlainRecord(`SInlineTokenEditor.segments[${index}]`, segments[index])
@@ -54,7 +55,7 @@ export function parseInlineTokenEditorSource(
         throw new TypeError(`SInlineTokenEditor: segments[${index}].text должен быть непустой строкой. / SInlineTokenEditor: segments[${index}].text must be a non-empty string.`)
       }
       const text = record.text
-      if (parsed.at(-1)?.kind === 'text') {
+      if (lastItem(parsed)?.kind === 'text') {
         throw new TypeError(`SInlineTokenEditor: segments[${index}] является смежным text segment; объедините его в источнике. / SInlineTokenEditor: segments[${index}] is an adjacent text segment; merge it at the source.`)
       }
       parsed.push({ kind: 'text', text })
@@ -122,7 +123,7 @@ export function composeInlineTokenSegments(
   for (const segment of segments) {
     if (segment.kind === 'text') {
       if (segment.text.length === 0) continue
-      const previous = result.at(-1)
+      const previous = lastItem(result)
       if (previous?.kind === 'text') {
         result[result.length - 1] = { kind: 'text', text: previous.text + segment.text }
       } else {

package/src/internal/pointerInteractionLease.ts

@@ -19,7 +19,7 @@ let preservedCursor = ''
 let preservedUserSelect = ''
 
 const applyActiveInteraction = (): void => {
-  const interaction = activeInteractions.at(-1)
+  const interaction = lastItem(activeInteractions)
   if (!lockedBody || !interaction) return
   lockedBody.style.cursor = interaction.cursor
   lockedBody.style.userSelect = 'none'
@@ -79,3 +79,4 @@ export function acquirePointerInteractionLease(
     },
   }
 }
+import { lastItem } from './es2020'