@pgcorp/ui-kit 0.7.3 → 0.8.1

package/README.md

@@ -46,14 +46,32 @@ owns their single runtime instances.
 
 ## Быстрый старт / Quick start
 
-Подключите Pinia, router и базовые стили в entrypoint приложения:
+Создайте корневой CSS entrypoint приложения. Интеграционный stylesheet подключает
+стили и typography plugin, а явный `@source` регистрирует source-SFC пакета:
 
-Register Pinia, the router, and the base stylesheet in the application entrypoint:
+Create the application's root CSS entrypoint. The integration stylesheet includes
+the styles and typography plugin, while an explicit `@source` registers the package SFCs:
+
+```css
+@import "tailwindcss";
+@import "@pgcorp/ui-kit/tailwind.css";
+@source "../node_modules/@pgcorp/ui-kit";
+```
+
+`@source` обязателен: Tailwind 4 не сканирует dependencies автоматически, а путь
+разрешается относительно CSS-файла приложения. Runtime-импорт `reference.css`
+не требуется. / `@source` is required because Tailwind 4 does not scan
+dependencies automatically; the path resolves relative to the application CSS.
+No runtime `reference.css` import is required.
+
+Подключите CSS, Pinia и router в entrypoint приложения:
+
+Import the CSS, Pinia, and router from the application entrypoint:
 
 ```ts
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
-import '@pgcorp/ui-kit/style.css'
+import './styles.css'
 
 import App from './App.vue'
 import router from './router'
@@ -102,7 +120,7 @@ monorepo alias or copied UI-kit files.
 | Layout | App shell, dock regions, stacks, workbench layout | `layout/SAppShell.vue`, `layout/SStack.vue`, `layout/SWorkbenchLayout.vue` |
 | Controls | Buttons, fields, inputs, switches, selects, comboboxes, menus | `shared/controls/SButton.vue`, `shared/controls/SSwitch.vue`, `shared/controls/SCombobox.vue` |
 | Containers | Panels, modal, drawer, popover, sidebars | `shared/containers/SPanel.vue`, `shared/containers/SModal.vue`, `shared/containers/SPopover.vue` |
-| Data display | Tables, chips, status, progress, code, JSON, tooltips | `shared/data-display/STable.vue`, `shared/data-display/SChip.vue`, `shared/data-display/SStatus.vue` |
+| Data display | Tables, charts, metric cards, chips, status, progress, code, JSON, tooltips | `shared/data-display/STable.vue`, `shared/data-display/SChart.vue`, `shared/data-display/SMetricCard.vue` |
 | Navigation | Tabs, breadcrumbs, catalog navigation, wizard | `shared/navigation/STabs.vue`, `shared/navigation/SBreadcrumbs.vue`, `shared/navigation/SWizardSteps.vue` |
 | Complex surfaces | Tree, Kanban, data grid, SQL editor, graph | `shared/complex/STree.vue`, `shared/database/SDataGrid.vue`, `shared/graph/SGraphViewport.vue` |
 | Runtime | Themes, variants, icons, composables, stores | `theme`, `variants`, `icons`, `composables/useNotifier`, `stores/useNotifierStore` |
@@ -121,6 +139,13 @@ controlled keys и доменный контент, не копирует checkb
 `STable` owns selection and disclosure columns. Consumers provide controlled
 keys and domain content instead of copying checkboxes, disclosures, or CSS:
 
+```ts
+import type {
+  STableColumn,
+  STableSort,
+} from '@pgcorp/ui-kit/shared/data-display/table'
+```
+
 ```vue
 <STable
   v-model:selected-row-keys="selectedRowKeys"
@@ -180,6 +205,124 @@ authoritative prop update becomes the base for subsequent actions.
 />
 ```
 
+### Графики и метрики / Charts and metrics
+
+`SChart` является единым semantic owner для line, area, grouped/stacked bar,
+pie и donut. Размеры `compact`, `sm`, `md`, `lg`, оси, сетка, легенда,
+маркеры, подписи, auto/fixed domain и таблица данных задаются typed props.
+Компонент пересчитывает SVG-геометрию по фактическому контейнеру, сохраняет
+читаемую типографику и переносит длинные подписи категорий на узкой ширине.
+
+`SChart` is the single semantic owner for line, area, grouped/stacked bar, pie,
+and donut charts. Typed props control `compact`, `sm`, `md`, and `lg` sizes,
+axes, grid, legend, markers, labels, auto/fixed domains, and the data table. The
+component recomputes SVG geometry for its actual container, preserves readable
+typography, and wraps long category labels at narrow widths.
+
+Форматированные подписи шкалы Y участвуют в расчёте поля графика. Крайние
+подписи X привязаны к границам plot-area, поэтому `x-labels="auto"` сохраняет
+полные начальное и конечное значения и не обрезает их краем SVG. Если ширины
+контейнера физически недостаточно, визуальная подпись сокращается, а полное
+значение остаётся в tooltip и доступной таблице данных.
+
+Formatted Y-axis labels participate in plot-gutter calculation. Endpoint
+X labels are anchored to the plot boundaries, so `x-labels="auto"` preserves
+the full first and last values instead of clipping them at the SVG edge. When
+the container is physically too narrow, the visual label is shortened while
+the full value remains available through the tooltip and accessible data table.
+
+```ts
+import type {
+  SChartCategory,
+  SChartSeries,
+} from '@pgcorp/ui-kit/shared/data-display/chart'
+```
+
+```vue
+<SChart
+  type="area"
+  :categories="categories"
+  :series="series"
+  :accessibility="{
+    mode: 'label',
+    label: 'Нагрузка VPN по часам',
+    description: 'Входящий и исходящий трафик',
+  }"
+  x-axis-label="Час"
+  y-axis-label="Мбит/с"
+  legend="top"
+/>
+```
+
+Для компактного тренда `SMetricCard` предоставляет слот `#chart`. Декоративный
+график внутри уже озвученной карточки использует
+`accessibility.mode="decorative"` и `data-table-presentation="none"`;
+содержательный самостоятельный график сохраняет default assistive data table.
+
+`SMetricCard` exposes `#chart` for a compact trend. A decorative chart inside an
+already labelled card uses `accessibility.mode="decorative"` with
+`data-table-presentation="none"`; a meaningful standalone chart keeps the
+default assistive data table.
+
+### Действия chip и адаптивный header панели / Chip actions and responsive panel header
+
+`SChip` принимает typed `surface` contract для статичного, action и link
+режимов и эмитит `activate`. Закрытие остаётся отдельным sibling-действием, не
+вложенной кнопкой. `SPanel` использует `header-layout="auto"` для переноса
+действий под заголовок по container width; `inline` и `stacked` доступны как
+явные варианты композиции.
+
+`SChip` accepts the typed `surface` contract for static, action, and link modes
+and emits `activate`. Closing remains a separate sibling action rather than a
+nested button. `SPanel` uses `header-layout="auto"` to move actions below the
+title based on container width; `inline` and `stacked` remain explicit layout
+options.
+
+Action/link chip всегда сохраняет видимый интерактивный контур, включая
+`severity="secondary"` на subtle-поверхности; static chip не получает ложного
+affordance. Для строк и карточек с дополнительными controls используйте
+`SActionCard#actions` или `SActionListItem#actions`. `actions-layout`/
+`trailing-layout` задаёт `inline`, `stacked` или container-responsive
+композицию. Основное действие и trailing controls остаются sibling-элементами
+внутри одной визуальной поверхности, без вложенных интерактивных элементов и
+дублирования рамки.
+
+Action and link chips always retain a visible interactive outline, including a
+`secondary` chip on a subtle surface; static chips do not gain a false action
+affordance. For rows and cards with additional controls, use
+`SActionCard#actions` or `SActionListItem#actions`. The `actions-layout` and
+`trailing-layout` props select `inline`, `stacked`, or container-responsive
+composition. The primary action and trailing controls remain siblings inside a
+single visual surface, with no nested interactive elements or duplicated
+chrome.
+
+### Лёгкий и редактируемый код / Lightweight and editable code
+
+`SCodeBlock` загружает CodeMirror отдельным async chunk только для
+`presentation="editor"`. Для read-only текста, логов и конфигурации используйте
+`presentation="plain"`: header, copy action, accessible name, line numbers и
+semantic viewport сохраняются, а editor/language runtime не загружается.
+
+`SCodeBlock` loads CodeMirror in a separate async chunk only for
+`presentation="editor"`. Use `presentation="plain"` for read-only text, logs,
+and configuration: the header, copy action, accessible name, line numbers, and
+semantic viewport remain available without loading the editor/language runtime.
+
+```vue
+<SCodeBlock
+  :code="diagnostic"
+  :language="{ mode: 'explicit', id: 'text' }"
+  presentation="plain"
+  aria-label="Диагностика подключения"
+/>
+```
+
+Plain presentation допускает только `readOnly=true` и явно отклоняет
+editor-only `interceptKeys`, `nextSelectionPos` и `applySelection`.
+
+Plain presentation accepts `readOnly=true` only and explicitly rejects the
+editor-only `interceptKeys`, `nextSelectionPos`, and `applySelection` contracts.
+
 ### Подсказка на части действия / Tooltip for part of an action
 
 Обычный tooltip использует combined `trigger`. Для пассивного фрагмента внутри
@@ -207,14 +350,24 @@ button and owns ARIA/focus, while `pointerTarget` is applied to a passive
 
 ## Темы и стили / Themes and styles
 
-Для обычного приложения подключайте полный style entrypoint один раз:
+Для приложения на Tailwind 4 подключайте integration entrypoint после собственного
+`@import "tailwindcss"`:
 
-For a regular application, import the complete style entrypoint once:
+For a Tailwind 4 application, import the integration entrypoint after the
+application's own `@import "tailwindcss"`:
 
-```ts
-import '@pgcorp/ui-kit/style.css'
+```css
+@import "tailwindcss";
+@import "@pgcorp/ui-kit/tailwind.css";
+@source "../node_modules/@pgcorp/ui-kit";
 ```
 
+`tailwind.css` включает `style.css`, dark variant и required typography plugin.
+`reference.css` предназначен для compile-time `@reference` в component styles.
+/ `tailwind.css` includes `style.css`, the dark variant, and the required
+typography plugin. `reference.css` is a compile-time `@reference` target for
+component styles.
+
 Для token-only интеграции доступен отдельный entrypoint:
 
 A separate entrypoint is available for token-only integration:

package/docs/accessibility.md

@@ -13,6 +13,12 @@
 Consumer обязан передавать человекочитаемые labels и не заменять семантику
 компонента локальными DOM listeners или CSS.
 
+`SChart` требует явный `accessibility` contract. Содержательный график получает
+accessible name через `mode: 'label'` или `mode: 'labelledby'` и по умолчанию
+рендерит assistive data table. `mode: 'decorative'` допустим только когда те же
+данные уже выражены ближайшим владельцем; для него задаётся
+`dataTablePresentation: 'none'` либо видимая таблица.
+
 ## English
 
 Interactive semantics belong to UI-kit leaf components. They own:
@@ -25,3 +31,9 @@ Interactive semantics belong to UI-kit leaf components. They own:
 
 Consumers must provide human-readable labels and must not replace component
 semantics with local DOM listeners or CSS.
+
+`SChart` requires an explicit `accessibility` contract. A meaningful chart gets
+an accessible name through `mode: 'label'` or `mode: 'labelledby'` and renders
+an assistive data table by default. `mode: 'decorative'` is valid only when a
+nearby owner already expresses the same data; it uses
+`dataTablePresentation: 'none'` or a visible table.

package/docs/getting-started.md

@@ -13,11 +13,26 @@ Consumer отвечает за единственные экземпляры `vu
 
 ### Подключение
 
+UI-kit публикует source-SFC и использует Tailwind 4 utilities. Подключите Tailwind
+и package integration entrypoint в корневом CSS приложения:
+
+```css
+@import "tailwindcss";
+@import "@pgcorp/ui-kit/tailwind.css";
+@source "../node_modules/@pgcorp/ui-kit";
+```
+
+`tailwind.css` подключает полные стили UI-kit и typography plugin. Tailwind 4 не
+сканирует зависимости автоматически, поэтому `@source` обязателен и задаётся
+относительно этого CSS-файла. Импорт `reference.css` consumer-у не нужен. Если
+source root приложения задаётся явно, сохраните его на собственном
+`@import "tailwindcss" source("…")`.
+
 ```ts
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import router from './router'
-import '@pgcorp/ui-kit/style.css'
+import './styles.css'
 
 import App from './App.vue'
 
@@ -53,11 +68,26 @@ instances.
 
 ### Setup
 
+The UI kit publishes source SFCs and uses Tailwind 4 utilities. Import Tailwind
+and the package integration entrypoint from the application's root CSS:
+
+```css
+@import "tailwindcss";
+@import "@pgcorp/ui-kit/tailwind.css";
+@source "../node_modules/@pgcorp/ui-kit";
+```
+
+`tailwind.css` includes the complete UI-kit styles and enables the typography
+plugin. Tailwind 4 does not scan dependencies automatically, so the `@source`
+line is required and resolves relative to this CSS file. Consumers do not need
+a `reference.css` import. If the application uses an explicit source root, keep
+it on its own `@import "tailwindcss" source("…")`.
+
 ```ts
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import router from './router'
-import '@pgcorp/ui-kit/style.css'
+import './styles.css'
 
 import App from './App.vue'
 

package/docs/public-api.md

@@ -14,7 +14,8 @@
 - `shared/navigation/*` — tabs, breadcrumbs, catalog navigation и wizard steps;
 - `shared/database/*`, `shared/graph/*`, `shared/persona/*` — доменные сложные поверхности;
 - `composables/*`, `stores/*`, `theme`, `variants`, `icons` — typed runtime modules;
-- `style.css`, `tokens.css`, `reference.css` — документированные style entrypoints.
+- `tailwind.css` — полный Tailwind 4 integration entrypoint;
+- `style.css`, `tokens.css`, `reference.css` — global styles, token-only и compile-time reference entrypoints.
 
 Компонентный contract выражается через typed props, slots, events и exposed
 methods. Внутренний DOM, CSS-классы и private modules не являются API.
@@ -25,6 +26,17 @@ UI-kit-owned атрибуты `data-s-*` относятся к внутренн
 compiler регистрирует их без межфайлового filesystem type resolver.
 Публикуемый production-source компилируется с `target/lib: ES2020`, совпадающим
 с baseline `@vue/tsconfig/tsconfig.dom.json`, и не требует скрытых полифиллов.
+Типы таблицы импортируются из `shared/data-display/table`, типы графиков — из
+`shared/data-display/chart`. `SChart` объединяет line/area/bar/pie/donut,
+responsive geometry, semantic palette и доступную таблицу данных. `SMetricCard`
+принимает компактный график через `#chart`. `SCodeBlock` сохраняет CodeMirror за
+async boundary; `presentation="plain"` является lightweight read-only контрактом
+без загрузки editor runtime. `SChip.surface` владеет action/link семантикой, а
+`SPanel.headerLayout` — inline/stacked/auto компоновкой заголовка и действий.
+`SInteractiveSurface#actions` и использующие его `SActionCard`/
+`SActionListItem` держат primary activation и дополнительные controls
+sibling-элементами внутри одного chrome; `actionsLayout`/`trailingLayout`
+управляют inline, stacked и container-responsive раскладкой.
 
 ## English
 
@@ -40,7 +52,8 @@ Primary groups:
 - `shared/navigation/*` — tabs, breadcrumbs, catalog navigation, and wizard steps;
 - `shared/database/*`, `shared/graph/*`, `shared/persona/*` — complex domain surfaces;
 - `composables/*`, `stores/*`, `theme`, `variants`, `icons` — typed runtime modules;
-- `style.css`, `tokens.css`, `reference.css` — documented style entrypoints.
+- `tailwind.css` — the complete Tailwind 4 integration entrypoint;
+- `style.css`, `tokens.css`, `reference.css` — global styles, token-only, and compile-time reference entrypoints.
 
 Component contracts are expressed through typed props, slots, events, and exposed
 methods. Internal DOM, CSS classes, and private modules are not API.
@@ -51,3 +64,15 @@ 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.
+Table types are imported from `shared/data-display/table`; chart types are
+imported from `shared/data-display/chart`. `SChart` unifies
+line/area/bar/pie/donut charts, responsive geometry, the semantic palette, and
+an accessible data table. `SMetricCard` accepts a compact chart through
+`#chart`. `SCodeBlock` keeps CodeMirror behind an async boundary;
+`presentation="plain"` is the lightweight read-only contract that does not load
+the editor runtime. `SChip.surface` owns action/link semantics, while
+`SPanel.headerLayout` owns inline/stacked/auto title and action composition.
+`SInteractiveSurface#actions` and its `SActionCard`/`SActionListItem`
+compositions keep primary activation and additional controls as siblings inside
+one chrome; `actionsLayout`/`trailingLayout` control inline, stacked, and
+container-responsive layout.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",
@@ -270,6 +270,9 @@
       "shared/controls/STextarea.vue": [
         "src/components/shared/controls/STextarea.vue"
       ],
+      "shared/data-display/chart": [
+        "src/components/shared/data-display/chart.ts"
+      ],
       "shared/data-display/json": [
         "src/components/shared/data-display/json.ts"
       ],
@@ -285,6 +288,9 @@
       "shared/data-display/SBadge.vue": [
         "src/components/shared/data-display/SBadge.vue"
       ],
+      "shared/data-display/SChart.vue": [
+        "src/components/shared/data-display/SChart.vue"
+      ],
       "shared/data-display/SChip.vue": [
         "src/components/shared/data-display/SChip.vue"
       ],
@@ -357,6 +363,9 @@
       "shared/data-display/SVirtualList.vue": [
         "src/components/shared/data-display/SVirtualList.vue"
       ],
+      "shared/data-display/table": [
+        "src/components/shared/data-display/table.ts"
+      ],
       "shared/database/SDataGrid.vue": [
         "src/components/shared/database/SDataGrid.vue"
       ],
@@ -428,7 +437,8 @@
   "sideEffects": [
     "./src/styles/style.css",
     "./src/styles/tokens.css",
-    "./src/styles/reference.css"
+    "./src/styles/reference.css",
+    "./src/styles/tailwind.css"
   ],
   "exports": {
     ".": "./index.ts",
@@ -501,11 +511,13 @@
     "./shared/controls/SSelect.vue": "./src/components/shared/controls/SSelect.vue",
     "./shared/controls/SSwitch.vue": "./src/components/shared/controls/SSwitch.vue",
     "./shared/controls/STextarea.vue": "./src/components/shared/controls/STextarea.vue",
+    "./shared/data-display/chart": "./src/components/shared/data-display/chart.ts",
     "./shared/data-display/json": "./src/components/shared/data-display/json.ts",
     "./shared/data-display/SActionCard.vue": "./src/components/shared/data-display/SActionCard.vue",
     "./shared/data-display/SActionList.vue": "./src/components/shared/data-display/SActionList.vue",
     "./shared/data-display/SActionListItem.vue": "./src/components/shared/data-display/SActionListItem.vue",
     "./shared/data-display/SBadge.vue": "./src/components/shared/data-display/SBadge.vue",
+    "./shared/data-display/SChart.vue": "./src/components/shared/data-display/SChart.vue",
     "./shared/data-display/SChip.vue": "./src/components/shared/data-display/SChip.vue",
     "./shared/data-display/SCodeBlock.vue": "./src/components/shared/data-display/SCodeBlock.vue",
     "./shared/data-display/SCodeEditor.vue": "./src/components/shared/data-display/SCodeEditor.vue",
@@ -530,6 +542,7 @@
     "./shared/data-display/STooltipTarget.vue": "./src/components/shared/data-display/STooltipTarget.vue",
     "./shared/data-display/SVirtualList": "./src/components/shared/data-display/SVirtualList.ts",
     "./shared/data-display/SVirtualList.vue": "./src/components/shared/data-display/SVirtualList.vue",
+    "./shared/data-display/table": "./src/components/shared/data-display/table.ts",
     "./shared/database/SDataGrid.vue": "./src/components/shared/database/SDataGrid.vue",
     "./shared/database/SSqlEditor.vue": "./src/components/shared/database/SSqlEditor.vue",
     "./shared/feedback/SAsyncState.vue": "./src/components/shared/feedback/SAsyncState.vue",
@@ -551,6 +564,7 @@
     "./shared/persona/types": "./src/components/shared/persona/types.ts",
     "./stores/useNotifierStore": "./src/stores/useNotifierStore.ts",
     "./style.css": "./src/styles/style.css",
+    "./tailwind.css": "./src/styles/tailwind.css",
     "./theme": "./src/theme.ts",
     "./tokens.css": "./src/styles/tokens.css",
     "./variants": "./src/variants.ts"
@@ -575,6 +589,7 @@
     "graphology": "^0.26.0",
     "highlight.js": "^11.11.1",
     "@lucide/vue": "^1.16.0",
+    "@tailwindcss/typography": "^0.5.19",
     "marked": "^17.0.3",
     "sigma": "^3.0.3",
     "tailwindcss": "^4.2.0",
@@ -583,7 +598,7 @@
   },
   "devDependencies": {
     "@storybook/vue3-vite": "10.5.3",
-    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/postcss": "^4.2.0",
     "@types/node": "^25.3.0",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vitest/coverage-v8": "^4.0.18",

package/src/components/shared/codeLanguages.ts

@@ -7,60 +7,10 @@ import { nginx } from '@codemirror/legacy-modes/mode/nginx'
 import { shell } from '@codemirror/legacy-modes/mode/shell'
 import {
   type CodeEditorLanguageContract,
-  validateCodeEditorLanguage,
 } from '../../internal/codeEditorContract'
+import { resolveCodeLanguageKey } from '../../internal/codeLanguageIdentity'
 
-type NullableText = string | null | undefined
-
-const SPECIAL_FILENAMES: Record<string, string> = {
-  'cmakelists.txt': 'cmake',
-  'dockerfile': 'dockerfile',
-  'docker-compose.yml': 'yaml',
-  'docker-compose.yaml': 'yaml',
-  'compose.yml': 'yaml',
-  'compose.yaml': 'yaml',
-  '.env': 'properties',
-  '.env.example': 'properties',
-  '.env.local': 'properties',
-  '.env.development': 'properties',
-  '.env.production': 'properties',
-  'makefile': 'makefile',
-  'nginx.conf': 'nginx',
-}
-
-const LANGUAGE_ALIASES: Record<string, string> = {
-  bash: 'shell',
-  'c#': 'cs',
-  csharp: 'cs',
-  env: 'properties',
-  fish: 'shell',
-  handlebars: 'handlebars',
-  htm: 'html',
-  js: 'javascript',
-  jsonc: 'json',
-  json5: 'json',
-  log: 'text',
-  make: 'makefile',
-  md: 'markdown',
-  mk: 'makefile',
-  plaintext: 'text',
-  proto3: 'proto',
-  ps1: 'powershell',
-  psm1: 'powershell',
-  psd1: 'powershell',
-  py: 'python',
-  pyw: 'python',
-  pyi: 'python',
-  rbw: 'ruby',
-  sh: 'shell',
-  shellsession: 'shell',
-  ts: 'typescript',
-  text: 'text',
-  txt: 'text',
-  yaml: 'yaml',
-  yml: 'yaml',
-  zsh: 'shell',
-}
+export { resolveCodeLanguageKey } from '../../internal/codeLanguageIdentity'
 
 const LEGACY_CODEMIRROR_LANGUAGES: Record<string, Extension> = {
   dockerfile: StreamLanguage.define(dockerFile),
@@ -88,65 +38,10 @@ type SupportedCodeMirrorLanguage = Parameters<typeof loadLanguage>[0]
 
 const SUPPORTED_CODEMIRROR_LANGUAGES = new Set<SupportedCodeMirrorLanguage>(langNames)
 
-function normalizeDetectedToken(value: NullableText): string | null {
-  if (!value) {
-    return null
-  }
-
-  const normalized = value.trim().toLowerCase().replace(/^\./, '')
-  if (!normalized) {
-    return null
-  }
-
-  return LANGUAGE_ALIASES[normalized] ?? normalized
-}
-
-function resolveLanguageFromFilePath(filePath: NullableText): string | null {
-  if (!filePath) {
-    return null
-  }
-
-  const normalizedPath = filePath.trim().toLowerCase()
-  if (!normalizedPath) {
-    return null
-  }
-
-  const basename = normalizedPath.split('/').pop() ?? normalizedPath
-  if (SPECIAL_FILENAMES[basename]) {
-    return SPECIAL_FILENAMES[basename]
-  }
-
-  if (basename.startsWith('dockerfile.')) {
-    return 'dockerfile'
-  }
-
-  if (!basename.includes('.')) {
-    return null
-  }
-
-  const extension = basename.split('.').pop()
-  return normalizeDetectedToken(extension)
-}
-
 function isSupportedCodeMirrorLanguage(value: string): value is SupportedCodeMirrorLanguage {
   return SUPPORTED_CODEMIRROR_LANGUAGES.has(value as SupportedCodeMirrorLanguage)
 }
 
-export function resolveCodeLanguageKey(input: CodeEditorLanguageContract): string {
-  const language = validateCodeEditorLanguage('codeLanguages', input)
-  if (language.mode === 'explicit') {
-    return LANGUAGE_ALIASES[language.id] ?? language.id
-  }
-  const detected = resolveLanguageFromFilePath(language.filePath)
-  if (!detected) {
-    throw new RangeError(
-      `codeLanguages: невозможно определить язык по filePath ${JSON.stringify(language.filePath)}. `
-      + `/ codeLanguages: cannot detect a language from filePath ${JSON.stringify(language.filePath)}.`,
-    )
-  }
-  return detected
-}
-
 export function getCodeMirrorLanguageExtension(input: CodeEditorLanguageContract): Extension | null {
   const languageKey = resolveCodeLanguageKey(input)
 

package/src/components/shared/containers/SPanel.css

@@ -4,6 +4,7 @@
   @apply relative flex flex-col rounded-lg border bg-surface-0 dark:bg-surface-800 border-surface-200 dark:border-surface-700;
   @apply text-surface-700 dark:text-surface-300;
   @apply min-h-0 min-w-0 w-full flex-none; /* предотвращаем горизонтальное распирание, панель заполняет доступную ширину; flex-none исключает сжатие панелей в flex-контейнерах */
+  container-type: inline-size;
 }
 
 .s-panel[data-grow='true'] {
@@ -70,10 +71,40 @@
 }
 
 .s-panel-header-right {
-  @apply flex items-center min-w-0 shrink-0;
+  @apply flex min-w-0 shrink-0 flex-wrap items-center;
   gap: var(--s-space-content-gap);
 }
 
+.s-panel-header[data-header-layout='stacked'] {
+  @apply flex-col items-stretch;
+  gap: var(--s-space-content-gap);
+}
+
+.s-panel-header[data-header-layout='stacked'] .s-panel-header-right {
+  @apply w-full shrink justify-start;
+}
+
+.s-panel-header[data-header-layout='stacked'] .s-panel-title {
+  @apply whitespace-normal;
+  overflow-wrap: anywhere;
+}
+
+@container (max-width: 30rem) {
+  .s-panel-header[data-header-layout='auto']:has(.s-panel-header-right > *) {
+    @apply flex-col items-stretch;
+    gap: var(--s-space-content-gap);
+  }
+
+  .s-panel-header[data-header-layout='auto']:has(.s-panel-header-right > *) .s-panel-header-right {
+    @apply w-full shrink justify-start;
+  }
+
+  .s-panel-header[data-header-layout='auto']:has(.s-panel-header-right > *) .s-panel-title {
+    @apply whitespace-normal;
+    overflow-wrap: anywhere;
+  }
+}
+
 .s-panel-content {
   /* Базово без внутренних скроллов; прокрутка включается только для grow-панелей */
   @apply min-h-0 min-w-0 w-full; /* безопасная ширина для любых сеток/инпутов внутри */

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

@@ -18,6 +18,7 @@
     <div
       v-if="title || $slots.actions || $slots.header"
       class="s-panel-header"
+      :data-header-layout="headerLayout"
     >
       <div class="s-panel-header-left">
         <slot name="header">
@@ -119,6 +120,8 @@ export interface Props {
   surfaceOverflow?: 'visible' | 'clip'
   /** DOM id общего footer/status region. / DOM id of the shared footer/status region. */
   footerId?: string
+  /** Адаптация heading/actions: auto складывает actions под heading при нехватке места. / Heading/actions adaptation: auto stacks actions below the heading when space is constrained. */
+  headerLayout?: 'auto' | 'inline' | 'stacked'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -141,6 +144,7 @@ const props = withDefaults(defineProps<Props>(), {
   surfaceElevation: 'flat',
   surfaceOverflow: 'visible',
   footerId: undefined,
+  headerLayout: 'auto',
 })
 
 const slots = useSlots()

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

@@ -13,7 +13,7 @@
     <template #default="field">
       <span class="s-checkbox-control">
         <input
-          ref="inputEl"
+          :ref="setInputElement"
           v-bind="ownedAttrs.bindings()"
           :id="field.controlId"
           type="checkbox"
@@ -84,10 +84,10 @@ const ownedAttrs = useOwnedAttrs({ component: 'SCheckbox', owner: 'native checkb
 useInteractiveLeafRegistration({ owner: 'SCheckbox' })
 const {
   checkedValue,
-  inputEl,
   inputId,
   onChange,
   onClick,
+  setInputElement,
 } = useBinaryInput({
   owner: 'SCheckbox',
   inputName: 'checkbox',