@7n/rules-lang-js 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.6.0] - 2026-07-19
+
+### Added
+
+- правило style з ядра (stylelint-детектор css/scss/vue, тулінг-канон, quasar/admin-table/colors/gap-концерни) — фронтенд-сімʼя правил тепер повністю у плагіні
+
+## [0.5.0] - 2026-07-19
+
+### Added
+
+- skipLocalTier для js-run/runtime: local-tier емпірично 0/14 успіхів (llm-trace.jsonl), cloud-tier — 3/6; ladder одразу стартує з cloud-min (ADR 260718-0754)
+
 ## [0.4.1] - 2026-07-19
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7n/rules-lang-js",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Плагін @7n/rules: JS/npm/bun-екосистема — lint-правила (js/bun/vue/js-run/npm-module/db), taze-провайдер (package.json, bunx taze) і doc-files-екстрактори (oxc AST)",
   "keywords": [
     "javascript",

package/rules/js-run/runtime/concern.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://unpkg.com/@7n/rules/schemas/concern.json",
+  "skipLocalTier": true,
   "lint": {
     "scope": "full",
     "glob": [

package/rules/style/admin_table/admin_table.mdc

@@ -0,0 +1,88 @@
+## Адмінські таблиці — n-admin-table
+
+Для таблиць, що мають займати всю висоту сторінки (або блоку), додавай клас `n-admin-table` і атрибути `hide-no-data`, `dense`, `flat`. Таблиця автоматично розтягнеться на весь доступний простір. У блоках меншої висоти — задай їм явний `height`.
+
+```vue
+<!-- ТАБЛИЦЯ -->
+<q-table class="n-admin-table" hide-no-data flat dense />
+```
+
+Якщо клас `.n-admin-table` не визначено в `app.scss` — додай:
+
+```scss
+// ADMIN TABLE
+.n-admin-table {
+  height: calc(100vh - 106px);
+
+  thead {
+    position: sticky;
+    z-index: 3;
+    top: 0;
+
+    tr th {
+      background-color: $grey-3;
+      height: 36px !important;
+    }
+  }
+
+  // tbody td {
+  //   font-size: 14px;
+  // }
+
+  tbody tr:last-child td {
+    border-bottom: 1px solid rgb(0 0 0 / 12%) !important;
+  }
+
+  th:first-child,
+  td:first-child,
+  th:last-child,
+  td:last-child {
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  .q-table__bottom {
+    background-color: $grey-3;
+  }
+
+  .q-table__progress th {
+    height: 1px !important;
+  }
+
+  .text-wrap {
+    max-width: 250px;
+    white-space: normal;
+  }
+
+  // sticky columns
+  td.sticky-left {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    background-color: white;
+    box-shadow: 2px 0 5px #0002;
+  }
+
+  td.sticky-right {
+    position: sticky;
+    right: 0;
+    z-index: 2;
+    background-color: white;
+    box-shadow: -2px 0 5px #0002;
+  }
+
+  th.sticky-left {
+    position: sticky;
+    left: 0;
+    z-index: 3;
+    box-shadow: 2px 0 5px #0002;
+  }
+
+  th.sticky-right {
+    position: sticky;
+    right: 0;
+    z-index: 3;
+    box-shadow: -2px 0 5px #0002;
+  }
+}
+```

package/rules/style/admin_table/concern.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://unpkg.com/@7n/rules/schemas/concern.json",
+  "lint": {
+    "scope": "full",
+    "glob": ["**/*.vue", "**/*.scss", "**/*.css"]
+  }
+}

package/rules/style/admin_table/docs/index.md

@@ -0,0 +1,9 @@
+---
+type: Directory Index
+title: npm/rules/style/admin_table
+resource: plugins/lang-js/rules/style/admin_table/
+---
+
+| Файл                | Тип       |
+| ------------------- | --------- |
+| [main.mjs](main.md) | JS Module |

package/rules/style/admin_table/docs/main.md

@@ -0,0 +1,14 @@
+---
+type: JS Module
+title: main.mjs
+resource: plugins/lang-js/rules/style/admin_table/main.mjs
+docgen:
+  crc: 267496d1
+---
+
+## Огляд
+
+Детектор concern-а `admin_table` (read-only, whole-repo): якщо десь у `.vue`-файлі
+використано клас `n-admin-table`, він має бути визначений хоч в одному `.scss`/`.css`/`.vue`
+файлі проєкту, інакше — порушення `missing-admin-table-style`. Потребує whole-repo
+сканування (usage і definition можуть бути в різних файлах), тому не залежить від `ctx.files`.

package/rules/style/admin_table/main.mjs

@@ -0,0 +1,46 @@
+/** @see ./docs/main.md */
+import { readFile } from 'node:fs/promises'
+
+import { createViolationReporter } from '@7n/rules/scripts/lib/lint-surface/violation-reporter.mjs'
+import { walkDir } from '@7n/rules/scripts/utils/walkDir.mjs'
+
+const RELEVANT_RE = /\.(?:vue|scss|css)$/u
+const USAGE_RE = /\bn-admin-table\b/u
+const DEFINITION_RE = /\.n-admin-table\b/u
+
+/**
+ * Detector style/admin_table (read-only, whole-repo): якщо десь у `.vue` використано
+ * клас `n-admin-table`, він має бути визначений хоч в одному `.scss`/`.css`/`.vue`
+ * (guide: `admin_table.mdc`). Для усунення false positives — крос-файлова перевірка,
+ * тож потребує whole-repo сканування незалежно від `ctx.files`.
+ * @param {import('../../../scripts/lib/lint-surface/types.mjs').LintContext} ctx контекст lint-прогону (cwd)
+ * @returns {Promise<import('../../../scripts/lib/lint-surface/types.mjs').LintResult>} результат зі зібраними violations
+ */
+export async function lint(ctx) {
+  const reporter = createViolationReporter(ctx)
+  const { fail } = reporter
+  const cwd = ctx.cwd
+
+  /** @type {string[]} */
+  const files = []
+  await walkDir(cwd, f => {
+    if (RELEVANT_RE.test(f)) files.push(f)
+  })
+
+  let used = false
+  let defined = false
+  for (const file of files) {
+    const content = await readFile(file, 'utf8')
+    if (!used && file.endsWith('.vue') && USAGE_RE.test(content)) used = true
+    if (!defined && DEFINITION_RE.test(content)) defined = true
+    if (used && defined) break
+  }
+
+  if (used && !defined) {
+    fail(
+      'Клас `.n-admin-table` використовується у `.vue`, але не визначений у жодному `.scss`/`.css` (guide: style/admin_table.mdc) — додай фікс до app.scss',
+      'missing-admin-table-style'
+    )
+  }
+  return reporter.result()
+}

package/rules/style/colors/colors.mdc

@@ -0,0 +1,21 @@
+## Кольори: quasar-variables.scss і app.scss
+
+Основні кольори визначай виключно через стандартні Quasar-змінні: `$primary`, `$secondary`, `$accent`, `$positive`, `$negative`, `$warning`.
+
+Якщо потрібен додатковий колір — визнач його в `quasar-variables.scss`, і **обов'язково** додай до `app.scss` відповідні `.text-*` / `.bg-*` класи:
+
+```scss
+/* quasar-variables.scss */
+$white-a1: color.adjust(white, $alpha: -0.85);
+```
+
+```scss
+/* app.scss */
+.text-white-a1 {
+  color: $white-a1 !important;
+}
+
+.bg-white-a1 {
+  background-color: $white-a1 !important;
+}
+```

package/rules/style/colors/concern.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://unpkg.com/@7n/rules/schemas/concern.json"
+}

package/rules/style/docs/index.md

@@ -0,0 +1,11 @@
+---
+type: Directory Index
+title: npm/rules/style
+resource: plugins/lang-js/rules/style/
+---
+
+# npm/rules/style
+
+| Файл                | Тип       |
+| ------------------- | --------- |
+| [main.mjs](main.md) | JS Module |

package/rules/style/gap/concern.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://unpkg.com/@7n/rules/schemas/concern.json",
+  "lint": {
+    "scope": "full",
+    "glob": ["**/*.vue", "**/*.scss", "**/*.css"]
+  }
+}

package/rules/style/gap/docs/index.md

@@ -0,0 +1,9 @@
+---
+type: Directory Index
+title: npm/rules/style/gap
+resource: plugins/lang-js/rules/style/gap/
+---
+
+| Файл                | Тип       |
+| ------------------- | --------- |
+| [main.mjs](main.md) | JS Module |

package/rules/style/gap/docs/main.md

@@ -0,0 +1,15 @@
+---
+type: JS Module
+title: main.mjs
+resource: plugins/lang-js/rules/style/gap/main.mjs
+docgen:
+  crc: 23cd7951
+---
+
+## Огляд
+
+Детектор concern-а `gap` (read-only, whole-repo): кожен суфікс утиліти
+`.n-gap-{xs,sm,md,lg}`, використаний у `.vue`-файлі, має бути визначений хоч в одному
+`.scss`/`.css`/`.vue` файлі проєкту — інакше порушення `missing-gap-style` для цього
+суфіксу. Суфікси відстежуються незалежно один від одного, тож часткове покриття все одно
+виявляє відсутній. Whole-repo сканування, не залежить від `ctx.files`.

package/rules/style/gap/gap.mdc

@@ -0,0 +1,22 @@
+## Gap між flex/grid-елементами — .n-gap-*
+
+Для відступів між плаваючими елементами (flex, grid) використовуй класи `.n-gap-*` замість `q-gutter-*`. Якщо класів немає в `app.scss` — додай:
+
+```scss
+// GAP
+.n-gap-xs {
+  gap: 4px;
+}
+
+.n-gap-sm {
+  gap: 8px;
+}
+
+.n-gap-md {
+  gap: 16px;
+}
+
+.n-gap-lg {
+  gap: 24px;
+}
+```

package/rules/style/gap/main.mjs

@@ -0,0 +1,51 @@
+/** @see ./docs/main.md */
+import { readFile } from 'node:fs/promises'
+
+import { createViolationReporter } from '@7n/rules/scripts/lib/lint-surface/violation-reporter.mjs'
+import { walkDir } from '@7n/rules/scripts/utils/walkDir.mjs'
+
+const RELEVANT_RE = /\.(?:vue|scss|css)$/u
+const USAGE_RE = /\bn-gap-(xs|sm|md|lg)\b/gu
+const DEFINITION_RE = /\.n-gap-(xs|sm|md|lg)\b/gu
+
+/**
+ * Detector style/gap (read-only, whole-repo): кожен суфікс `.n-gap-{xs,sm,md,lg}`,
+ * використаний у `.vue`, має бути визначений хоч в одному `.scss`/`.css`/`.vue`
+ * (guide: `gap.mdc`). Крос-файлова перевірка usage↔definition — потребує whole-repo
+ * сканування незалежно від `ctx.files`.
+ * @param {import('../../../scripts/lib/lint-surface/types.mjs').LintContext} ctx контекст lint-прогону (cwd)
+ * @returns {Promise<import('../../../scripts/lib/lint-surface/types.mjs').LintResult>} результат зі зібраними violations
+ */
+export async function lint(ctx) {
+  const reporter = createViolationReporter(ctx)
+  const { fail } = reporter
+  const cwd = ctx.cwd
+
+  /** @type {string[]} */
+  const files = []
+  await walkDir(cwd, f => {
+    if (RELEVANT_RE.test(f)) files.push(f)
+  })
+
+  /** @type {Set<string>} */
+  const used = new Set()
+  /** @type {Set<string>} */
+  const defined = new Set()
+  for (const file of files) {
+    const content = await readFile(file, 'utf8')
+    if (file.endsWith('.vue')) {
+      for (const m of content.matchAll(USAGE_RE)) used.add(m[1])
+    }
+    for (const m of content.matchAll(DEFINITION_RE)) defined.add(m[1])
+  }
+
+  for (const suffix of used) {
+    if (!defined.has(suffix)) {
+      fail(
+        `Клас \`.n-gap-${suffix}\` використовується у \`.vue\`, але не визначений у жодному \`.scss\`/\`.css\` (guide: style/gap.mdc) — додай клас до app.scss`,
+        'missing-gap-style'
+      )
+    }
+  }
+  return reporter.result()
+}

package/rules/style/lint/concern.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://unpkg.com/@7n/rules/schemas/concern.json",
+  "lint": {
+    "scope": "per-file",
+    "glob": ["**/*.{css,scss,vue}"]
+  }
+}

package/rules/style/lint/docs/fix-lint.md

@@ -0,0 +1,29 @@
+---
+type: JS Module
+title: fix-lint.mjs
+resource: plugins/lang-js/rules/style/lint/fix-lint.mjs
+docgen:
+  crc: a63dc24c
+---
+
+## Огляд
+
+T0-autofix для `style/lint`: детермінований прогін `stylelint --fix` по css/scss/vue-файлах.
+Виправляє авто-fixable правила stylelint; решта лишається детектору на re-check, далі — LLM-ладдеру.
+Запис незворотний (поза rollback).
+
+## Поведінка
+
+- Перелічує цільові файли: у дельта-режимі — зі списку змінених (лише css/scss/vue); у повному —
+  tracked css/scss/vue через git.
+- Застосовує `stylelint --fix` на них; до списку змінених потрапляють лише файли з фактичною зміною.
+
+## Публічний API
+
+- `patterns` — масив T0-патернів; єдиний `style-stylelint-fix` спрацьовує на агрегованому
+  порушенні детектора (`stylelint-violation`).
+
+## Гарантії поведінки
+
+- Відсутній stylelint → no-op (без змін).
+- Записуються лише фактично змінені файли; кожен реєструється через `recordWrite`.

package/rules/style/lint/docs/index.md

@@ -0,0 +1,11 @@
+---
+type: Directory Index
+title: npm/rules/style/lint
+resource: plugins/lang-js/rules/style/lint/
+---
+
+# npm/rules/style/lint
+
+| Файл                | Тип       |
+| ------------------- | --------- |
+| [main.mjs](main.md) | JS Module |

package/rules/style/lint/docs/main.md

@@ -0,0 +1,29 @@
+---
+type: JS Module
+title: main.mjs
+resource: plugins/lang-js/rules/style/lint/main.mjs
+docgen:
+  crc: c9a94f80
+  model: omlx/gemma-4-e4b-it-OptiQ-4bit
+  score: 100
+  issues: judge:inaccurate:0.99
+  judgeModel: openai-codex/gpt-5.4-mini
+---
+
+## Огляд
+
+Файл відповідає за вибірку стильових файлів у проекті, що реалізується через функцію `filterStyleFiles`. Він також забезпечує валідацію якості коду в цих файлах шляхом виконання перевірок, що реалізується функцією `lint`.
+
+## Поведінка
+
+filterStyleFiles відбирає з наданого списку шляхів лише ті, які мають розширення CSS, SCSS або Vue.
+lint виконує форматування та перевірку стильових файлів у проекті, застосовуючи автоматичне виправлення, якщо це не режим лише для читання.
+
+## Публічний API
+
+filterStyleFiles — Відбирає файли стилів для подальшої обробки.
+lint — Перевіряє стилі у файлах (CSS/SCSS/Vue) окремо для кожного або для всього проєкту.
+
+## Гарантії поведінки
+
+- Read-only: не виконує операцій запису (ФС/БД).

package/rules/style/lint/fix-lint.mjs

@@ -0,0 +1,66 @@
+/** @see ./docs/fix-lint.md */
+
+/**
+ * T0-autofix для `style/lint` — детермінований прогін `stylelint --fix` по css/scss/vue.
+ * Детектор емітить агрегований `stylelint-violation` без переліку файлів, тож фіксер
+ * самостійно перелічує цільові файли (ctx.files у дельті або tracked css/scss/vue у повному
+ * режимі), форматує їх і повертає лише фактично змінені. Запис permanent. Відсутній
+ * stylelint → no-op.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { filterStyleFiles, resolveStylelint } from './main.mjs'
+import { spawnAsync } from '@7n/rules/scripts/utils/spawn-async.mjs'
+
+/**
+ * Вміст файлу або null, якщо не читається.
+ * @param {string} abs абсолютний шлях
+ * @returns {string|null} вміст або null
+ */
+function readOrNull(abs) {
+  try {
+    return readFileSync(abs, 'utf8')
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Перелік цільових style-файлів: у дельті — з ctx.files; у повному режимі — tracked
+ * css/scss/vue через `git ls-files`.
+ * @param {string} cwd корінь
+ * @param {string[]|undefined} ctxFiles файли з контексту (дельта) або undefined (повний режим)
+ * @returns {Promise<string[]>} posix-relative шляхи
+ */
+async function listStyleFiles(cwd, ctxFiles) {
+  if (ctxFiles !== undefined) return filterStyleFiles(ctxFiles)
+  const r = await spawnAsync('git', ['ls-files', '-z', '--', '*.css', '*.scss', '*.vue'], { cwd })
+  if (r.exitCode !== 0) return []
+  return (r.stdout ?? '').split('\0').filter(Boolean)
+}
+
+/** @type {import('../../../scripts/lib/lint-surface/types.mjs').T0Pattern[]} */
+export const patterns = [
+  {
+    id: 'style-stylelint-fix',
+    standalone: true, // §8 Phase 2: apply бере ctx.files (не violations), stylelint --fix сам ре-аналізує
+    test: violations => violations.some(v => v.reason === 'stylelint-violation'),
+    apply: async (violations, ctx) => {
+      const stylelint = resolveStylelint(ctx.cwd)
+      if (!stylelint) return { touchedFiles: [] }
+      const files = await listStyleFiles(ctx.cwd, ctx.files)
+      if (files.length === 0) return { touchedFiles: [] }
+
+      const abs = files.map(f => resolve(ctx.cwd, f))
+      const before = new Map(abs.map(a => [a, readOrNull(a)]))
+      await spawnAsync(stylelint, ['--fix', ...files], { cwd: ctx.cwd })
+
+      const touchedFiles = abs.filter(a => readOrNull(a) !== before.get(a))
+      for (const a of touchedFiles) ctx.recordWrite?.(a)
+      return touchedFiles.length > 0
+        ? { touchedFiles, message: `stylelint --fix: ${touchedFiles.length} файл(ів)` }
+        : { touchedFiles: [] }
+    }
+  }
+]

package/rules/style/lint/main.mjs

@@ -0,0 +1,68 @@
+/**
+ * lint-поверхня style: read-only detector (stylelint без --fix) для css/scss/vue.
+ * Per-file (ctx.files) або весь проєкт (ctx.files === undefined). Якщо stylelint
+ * недоступний — крок пропускається (без npx-автовстановлення).
+ */
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { createViolationReporter } from '@7n/rules/scripts/lib/lint-surface/violation-reporter.mjs'
+import { resolveCmd } from '@7n/rules/scripts/utils/resolve-cmd.mjs'
+import { spawnAsync } from '@7n/rules/scripts/utils/spawn-async.mjs'
+
+const STYLE_EXT_RE = /\.(?:css|scss|vue)$/u
+
+/**
+ * @param {string[]} files список шляхів
+ * @returns {string[]} лише css/scss/vue
+ */
+export function filterStyleFiles(files) {
+  return files.filter(f => STYLE_EXT_RE.test(f))
+}
+
+/**
+ * Резолвить бінарник stylelint: спершу локальний node_modules/.bin, потім PATH.
+ * @param {string} cwd корінь
+ * @returns {string | null} абсолютний шлях або null
+ */
+export function resolveStylelint(cwd) {
+  const local = join(cwd, 'node_modules', '.bin', 'stylelint')
+  if (existsSync(local)) return local
+  return resolveCmd('stylelint')
+}
+
+/**
+ * Detector style/lint (read-only).
+ * @param {import('../../../scripts/lib/lint-surface/types.mjs').LintContext} ctx контекст lint-прогону (cwd, files)
+ * @returns {Promise<import('../../../scripts/lib/lint-surface/types.mjs').LintResult>} результат зі зібраними violations
+ */
+export async function lint(ctx) {
+  const reporter = createViolationReporter(ctx)
+  const { fail } = reporter
+  const cwd = ctx.cwd
+  const files = ctx.files
+
+  /** @type {string[]} */
+  const targets = []
+  if (files === undefined) {
+    targets.push('**/*.{css,scss,vue}')
+  } else {
+    const style = filterStyleFiles(files)
+    if (style.length === 0) return reporter.result()
+    targets.push(...style)
+  }
+
+  const stylelint = resolveStylelint(cwd)
+  if (!stylelint) {
+    // stylelint недоступний → крок пропущено (без автовстановлення)
+    return reporter.result()
+  }
+
+  const r = await spawnAsync(stylelint, targets, { cwd, shell: false })
+  if (r.exitCode !== 0) {
+    const out = `${r.stdout ?? ''}${r.stderr ?? ''}`.trim().slice(0, 2000)
+    const outSuffix = out ? `\n${out}` : ''
+    fail(`lint-style: stylelint — порушення (код ${r.exitCode ?? 1}, style.mdc)${outSuffix}`, 'stylelint-violation')
+  }
+  return reporter.result()
+}

package/rules/style/main.json

@@ -0,0 +1 @@
+{ "auto": { "glob": ["**/*.css", "**/*.vue"] } }

package/rules/style/main.mdc

@@ -0,0 +1,12 @@
+---
+description: Правила стилів CSS та SCSS
+version: '1.5'
+globs: "**/*.{css,scss,vue}"
+alwaysApply: false
+---
+
+Правило **style** для Vue-проєктів: Quasar як стильова система, SCSS-конвенції кольорів і відступів, фікси компонентів, stylelint через `@nitra/stylelint-config`.
+
+- [settings.json.snippet.json](./vscode_settings/template/settings.json.snippet.json)
+- [extensions.json.snippet.json](./vscode_extensions/template/extensions.json.snippet.json)
+- [package.json.snippet.json](./package_json/template/package.json.snippet.json)

package/rules/style/package_json/concern.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://unpkg.com/@7n/rules/schemas/concern.json",
+  "fixability": "config",
+  "policy": {
+    "files": {
+      "single": "package.json"
+    }
+  }
+}

package/rules/style/package_json/docs/fix-package_json.md

@@ -0,0 +1,26 @@
+---
+type: JS Module
+title: fix-package_json.mjs
+resource: plugins/lang-js/rules/style/package_json/fix-package_json.mjs
+docgen:
+  crc: f364c0e4
+  model: openai-codex/gpt-5.5
+  score: 100
+  judgeModel: openai-codex/gpt-5.4-mini
+---
+
+## Огляд
+
+Надає `patterns` для визначення очікуваних перевірок, що спираються на `package.json`. Використовується як read-only опис вимог до конфігурації пакета, без самостійних змін файлової системи.
+
+## Поведінка
+
+1. `patterns` визначає правило виправлення для `package.json`.
+
+2. `patterns` забезпечує приведення `package.json` до проєктного шаблону стилю.
+
+3. `patterns` не змінює файлову систему самостійно, а лише описує доступний сценарій автоматичного виправлення для зовнішнього механізму перевірок.
+
+## Гарантії поведінки
+
+- Read-only: не виконує операцій запису (ФС/БД).

package/rules/style/package_json/docs/index.md

@@ -0,0 +1,9 @@
+---
+type: Directory Index
+title: npm/rules/style/package_json
+resource: plugins/lang-js/rules/style/package_json/
+---
+
+| Файл                                        | Тип       |
+| ------------------------------------------- | --------- |
+| [fix-package_json.mjs](fix-package_json.md) | JS Module |

package/rules/style/package_json/fix-package_json.mjs

@@ -0,0 +1,3 @@
+import { createTemplateFixPattern } from '@7n/rules/scripts/lib/fix/template-deep-merge.mjs'
+
+export const patterns = [createTemplateFixPattern({ id: 'style-package_json-template', targetPath: 'package.json' })]