@starci/eslint-canon-fe 3.0.2 → 5.1.2

package/comments.mjs

@@ -1,190 +1,144 @@
-/**
- * The rules that hold `comments.md`.
- *
- * All three reach further than their names suggest, and deliberately. A language rule that read
- * only comments would leave the same sentence legal one line lower as an identifier or a diagnostic
- * string; an emoji rule that read only JSX would miss the one in a log message. So each walks
- * comments, identifiers, string literals, template chunks and JSX text alike - everywhere prose can
- * hide in a source file.
- *
- * The exceptions are paths, not judgements, and that is on purpose: a locale dictionary IS the other
- * language, and a fixture reproducing a real string has to reproduce it exactly. A judgement-based
- * exception would be argued per file forever.
- */
-
-/** Forward-slash form of a filename, so Windows paths compare like every other path. */
-const normalizePath = (filename) => String(filename || "").replace(/\\/g, "/")
-
-/** The letters that mark the second language this source is kept free of. */
-export const SECOND_LANGUAGE_LETTER = /[À-ÃÈ-ÊÌÍÒ-ÕÙÚÝà-ãè-êìíò-õùúýĂăĐđĨĩŨũƠơƯưẠ-ỿ]/
-
-/** The endonym a language picker must be able to render in its own script. */
-const ENDONYM = /Tiếng Việt/
-
-/** A functional literal, marked with the reason it stays. */
-const OK_PRAGMA = /\bvn-ok:/
-
-/**
- * Extended pictographs, or a regional-indicator pair.
- *
- * Two tests rather than one character class, so the class stays free of joiners and combining marks
- * - a single class covering both trips the misleading-character-class rule, and a rule that has to
- * be silenced to exist is one nobody trusts.
- */
-export const hasEmoji = (text) =>
-  typeof text === "string" &&
-  (/\p{Extended_Pictographic}/u.test(text) || /[\u{1F1E6}-\u{1F1FF}]{2}/u.test(text))
-
-/**
- * Paths whose second-language text or emoji is CONTENT rather than authoring.
- *
- * Two kinds only: the locale dictionaries, which are the product's other language, and fixtures,
- * which reproduce real strings and would be testing something else if they translated them.
- */
-export const CONTENT_PATHS = [
-  /\/messages\/[a-z-]+\.json$/i,
-  /\/src\/resources\//,
-  /\/__fixtures?__\//,
-  /\/fixtures?\//,
-  /\.fixture\.(ts|tsx|js|mjs|cjs)$/i,
-  /\.test\.(ts|tsx|js|mjs|cjs)$/i,
-  /\.spec\.(ts|tsx|js|mjs|cjs)$/i,
-]
-
-/** True when a file holds content rather than authoring. */
-export const isContentFile = (filename) => {
-  const file = normalizePath(filename)
-  return CONTENT_PATHS.some((pattern) => pattern.test(file))
-}
-
-/** Walk every place prose can hide, and hand each to one check. */
-const proseVisitors = (context, report) => {
-  const source = context.sourceCode || context.getSourceCode()
-  return {
-    Program() {
-      for (const comment of source.getAllComments()) report(comment, comment.value)
-    },
-    Identifier(node) {
-      report(node, node.name)
-    },
-    Literal(node) {
-      if (typeof node.value === "string") report(node, node.value)
-    },
-    TemplateElement(node) {
-      report(node, node.value && node.value.cooked)
-    },
-    JSXText(node) {
-      report(node, node.value)
-    },
-  }
-}
-
-// -- COMMENTS-1 ------------------------------------------------------------------------------------
-
-/** Every export opens with a documentation block. */
-export const requireExportJsdoc = {
-  meta: {
-    type: "suggestion",
-    docs: { description: "Exported declarations open with a documentation block." },
-    schema: [],
-    messages: {
-      jsdoc:
-        "`{{name}}` is exported with no documentation block. An export is read far more often than it is written, and by people who never open the body - name the ROLE it plays, not the signature, which the signature already states.",
-    },
-  },
-  create(context) {
-    const source = context.sourceCode || context.getSourceCode()
-    const hasBlock = (node) =>
-      source.getCommentsBefore(node).some((comment) => comment.type === "Block" && comment.value.startsWith("*"))
-    const check = (node) => {
-      const declaration = node.declaration
-      if (!declaration) return
-      const kinds = ["VariableDeclaration", "TSInterfaceDeclaration", "FunctionDeclaration", "TSTypeAliasDeclaration"]
-      if (!kinds.includes(declaration.type) || hasBlock(node)) return
-      const id =
-        declaration.id || (declaration.declarations && declaration.declarations[0] && declaration.declarations[0].id)
-      context.report({ node: id || declaration, messageId: "jsdoc", data: { name: (id && id.name) || "this export" } })
-    }
-    return { ExportNamedDeclaration: check, ExportDefaultDeclaration: check }
-  },
-}
-
-// -- COMMENTS-2 · COMMENTS-3 -----------------------------------------------------------------------
-
-/** The source is English, and the exceptions are paths plus one marked pragma. */
-export const noSecondLanguageInSource = {
-  meta: {
-    type: "problem",
-    docs: { description: "Source authoring is English; locale content and marked literals are exempt." },
-    schema: [],
-    messages: {
-      second:
-        "Second-language prose in source authoring. The bar is a stranger who joins in a year and does not share the first language of whoever wrote this line - a codebase with two languages has two populations of readers, and the smaller one stops reading the parts it cannot. If this is a literal the running program matches on or emits, keep it and mark the line with `vn-ok: <reason>`.",
-    },
-  },
-  create(context) {
-    if (isContentFile(context.filename || context.getFilename())) return {}
-    const source = context.sourceCode || context.getSourceCode()
-    /*
-     * Lines carrying the pragma, gathered once.
-     *
-     * The message tells the author to "mark the LINE", and until this existed
-     * that was not true of a literal: the exemption tested the node's OWN text,
-     * which for a string is its value, so `"Học viện Mộc" // vn-ok: ...` still
-     * reported and no phrasing could satisfy it. The rule's own valid fixture
-     * only passed because its string carried no diacritics at all.
-     *
-     * A marked line exempts the node ON it and the statement BELOW it, which are
-     * the two placements the message's wording admits.
-     */
-    const marked = new Set()
-    for (const comment of source.getAllComments()) {
-      if (!OK_PRAGMA.test(comment.value)) continue
-      marked.add(comment.loc.start.line)
-      marked.add(comment.loc.end.line + 1)
-    }
-    return proseVisitors(context, (node, text) => {
-      if (!text || !SECOND_LANGUAGE_LETTER.test(text)) return
-      if (ENDONYM.test(text) || OK_PRAGMA.test(text)) return
-      if (marked.has(node.loc.start.line)) return
-      context.report({ node, messageId: "second" })
-    })
-  },
-}
-
-// -- COMMENTS-4 ------------------------------------------------------------------------------------
-
-/** No Unicode emoji in source: stable product reactions use attributed checked-in SVG artwork. */
-export const noEmojiInSource = {
-  meta: {
-    type: "problem",
-    docs: { description: "No emoji in source authoring." },
-    schema: [],
-    messages: {
-      emoji:
-        "Unicode emoji in source authoring. It renders differently on every platform, sorts unpredictably, breaks a terminal that is not expecting it, and does not mean the same thing in two countries. Generic marks belong to the icon vocabulary; product reactions use the attributed checked-in SVG artwork through the reaction leaf.",
-    },
-  },
-  create(context) {
-    if (isContentFile(context.filename || context.getFilename())) return {}
-    return proseVisitors(context, (node, text) => {
-      if (hasEmoji(text)) context.report({ node, messageId: "emoji" })
-    })
-  },
-}
-
-/** The rules this law contributes to the plugin. */
-export const rules = {
-  "require-export-jsdoc": requireExportJsdoc,
-  "no-second-language-in-source": noSecondLanguageInSource,
-  "no-emoji-in-source": noEmojiInSource,
-}
-
-/**
- * The level this law asks for, as the plugin's own opinion.
- *
- * `require-export-jsdoc` is the one a repository adopting this with history should expect a count
- * from - every undocumented export in the tree reports at once. The other two are usually already
- * at zero, because a second language in source is noticed by readers long before a rule arrives.
- */
-export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]))
+/**
+ * The rules that hold `comments.md`.
+ *
+ * Both reach further than their names suggest, and deliberately. An emoji rule that read only JSX
+ * would miss the one in a log message, so it walks comments, identifiers, string literals, template
+ * chunks and JSX text alike - everywhere prose can hide in a source file.
+ *
+ * THE SECOND-LANGUAGE RULE IS GONE. It carried a `vn-ok: <reason>` pragma, an escape hatch that was
+ * used 490 times in one repository, and one escape is enough to turn a rule into a comment
+ * convention. Its job is now held by `no-hardcoded-copy` in `translation.mjs`, which has no
+ * pragma: user-facing text comes from a `next-intl` catalogue, and the catalogue is the only place
+ * a second language is content.
+ *
+ * The exceptions that remain are paths, not judgements, and that is on purpose: a locale dictionary
+ * IS the other language, and a fixture reproducing a real string has to reproduce it exactly. A
+ * judgement-based exception would be argued per file forever.
+ */
+
+import { normalizePath } from "./lib/path.mjs"
+
+/** The letters that mark the second language a source string must not carry outside a catalogue. */
+export const SECOND_LANGUAGE_LETTER = /[À-ÃÈ-ÊÌÍÒ-ÕÙÚÝà-ãè-êìíò-õùúýĂăĐđĨĩŨũƠơƯưẠ-ỿ]/
+
+/**
+ * Extended pictographs, or a regional-indicator pair.
+ *
+ * Two tests rather than one character class, so the class stays free of joiners and combining marks
+ * - a single class covering both trips the misleading-character-class rule, and a rule that has to
+ * be silenced to exist is one nobody trusts.
+ */
+export const hasEmoji = (text) =>
+  typeof text === "string" &&
+  (/\p{Extended_Pictographic}/u.test(text) || /[\u{1F1E6}-\u{1F1FF}]{2}/u.test(text))
+
+/**
+ * Paths whose second-language text or emoji is CONTENT rather than authoring.
+ *
+ * Two kinds only: the locale dictionaries (`messages/<locale>.json`), which are the product's other
+ * language, and fixtures and specs, which reproduce real strings and would be testing something else
+ * if they translated them. There is no "copy module" path: a `resources/` folder of strings is
+ * copy that skipped the catalogue.
+ */
+export const CONTENT_PATHS = [
+  /\/messages\/[a-z-]+\.json$/i,
+  /\/__fixtures?__\//,
+  /\/fixtures?\//,
+  /\.fixture\.(ts|tsx|js|mjs|cjs)$/i,
+  /\.test\.(ts|tsx|js|mjs|cjs)$/i,
+  /\.spec\.(ts|tsx|js|mjs|cjs)$/i,
+]
+
+/** True when a file holds content rather than authoring. */
+export const isContentFile = (filename) => {
+  const file = normalizePath(filename)
+  return CONTENT_PATHS.some((pattern) => pattern.test(file))
+}
+
+/** Walk every place prose can hide, and hand each to one check. */
+const proseVisitors = (context, report) => {
+  const source = context.sourceCode || context.getSourceCode()
+  return {
+    Program() {
+      for (const comment of source.getAllComments()) report(comment, comment.value)
+    },
+    Identifier(node) {
+      report(node, node.name)
+    },
+    Literal(node) {
+      if (typeof node.value === "string") report(node, node.value)
+    },
+    TemplateElement(node) {
+      report(node, node.value && node.value.cooked)
+    },
+    JSXText(node) {
+      report(node, node.value)
+    },
+  }
+}
+
+// -- COMMENTS-1 ------------------------------------------------------------------------------------
+
+/** Every export opens with a documentation block. */
+export const requireExportJsdoc = {
+  meta: {
+    type: "suggestion",
+    docs: { description: "Exported declarations open with a documentation block." },
+    schema: [],
+    messages: {
+      jsdoc:
+        "`{{name}}` is exported with no documentation block. An export is read far more often than it is written, and by people who never open the body - name the ROLE it plays, not the signature, which the signature already states.",
+    },
+  },
+  create(context) {
+    const source = context.sourceCode || context.getSourceCode()
+    const hasBlock = (node) =>
+      source.getCommentsBefore(node).some((comment) => comment.type === "Block" && comment.value.startsWith("*"))
+    const check = (node) => {
+      const declaration = node.declaration
+      if (!declaration) return
+      const kinds = ["VariableDeclaration", "TSInterfaceDeclaration", "FunctionDeclaration", "TSTypeAliasDeclaration"]
+      if (!kinds.includes(declaration.type) || hasBlock(node)) return
+      const id =
+        declaration.id || (declaration.declarations && declaration.declarations[0] && declaration.declarations[0].id)
+      context.report({ node: id || declaration, messageId: "jsdoc", data: { name: (id && id.name) || "this export" } })
+    }
+    return { ExportNamedDeclaration: check, ExportDefaultDeclaration: check }
+  },
+}
+
+// -- COMMENTS-4 ------------------------------------------------------------------------------------
+
+/** No Unicode emoji in source: stable product reactions use attributed checked-in SVG artwork. */
+export const noEmojiInSource = {
+  meta: {
+    type: "problem",
+    docs: { description: "No emoji in source authoring." },
+    schema: [],
+    messages: {
+      emoji:
+        "Unicode emoji in source authoring. It renders differently on every platform, sorts unpredictably, breaks a terminal that is not expecting it, and does not mean the same thing in two countries. Generic marks belong to the icon vocabulary; product reactions use the attributed checked-in SVG artwork through the reaction leaf.",
+    },
+  },
+  create(context) {
+    if (isContentFile(context.filename || context.getFilename())) return {}
+    return proseVisitors(context, (node, text) => {
+      if (hasEmoji(text)) context.report({ node, messageId: "emoji" })
+    })
+  },
+}
+
+/** The rules this law contributes to the plugin. */
+export const rules = {
+  "require-export-jsdoc": requireExportJsdoc,
+  "no-emoji-in-source": noEmojiInSource,
+}
+
+/**
+ * The level this law asks for, as the plugin's own opinion.
+ *
+ * `require-export-jsdoc` is the one a repository adopting this with history should expect a count
+ * from - every undocumented export in the tree reports at once. The other two are usually already
+ * at zero, because a second language in source is noticed by readers long before a rule arrives.
+ */
+export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]))

package/docs/brand-values.md

@@ -0,0 +1,30 @@
+# No raw brand values in TypeScript
+
+Law module: `brand-values.mjs`. Catalogue: R61 FE_STYLE_TOKEN_ONLY (TypeScript half; CSS belongs to @starci/stylelint-canon).
+
+Colour values exist only in `modules/brand/brand.css`, on the tokens the grammar declares, with a light and a dark value. A hex, a colour function, a named paint colour or a pixel length in TypeScript skips the token scale.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/no-raw-brand-value`
+
+No hex, colour function, named paint colour or px length in TypeScript; tokens only.
+
+**Invalid** (`src/components/blocks/Feed/index.tsx`)
+
+```ts
+const c = "#ff0000"
+<div style={{ width: 12 }} />
+```
+
+**Valid** (`src/components/blocks/Feed/index.tsx`)
+
+```ts
+<div className="bg-surface p-4" />
+```
+
+**Finding code:** `FE_STYLE_TOKEN_ONLY`
+
+**Vì sao (why):** `<file>` dùng giá trị màu/độ dài thô (`<what>`). Màu và khoảng cách chỉ đến từ token grammar; màu thương hiệu chỉ ở `brand.css`.
+
+**Cách sửa:** Dùng lớp hoặc biến token của grammar; giá trị màu chỉ khai trong `modules/brand/brand.css`.

package/docs/client-boundary.md

@@ -0,0 +1,99 @@
+# Client boundary
+
+Law module: `client-boundary.mjs`. Catalogue: R55 FE_CLIENT_BOUNDARY.
+
+Server first. `"use client"` appears only on the `index.tsx` of an interactive block (or overlay), on a leaf whose interaction is intrinsic, on a branch or leaf of a workspace package (`packages/<pkg>/src/{branches,leaves}/`, where the grammar tiers sit directly under `src/`), and on `error.tsx` / `global-error.tsx`, which Next requires to be client components. Routes, pages and layouts are server components.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/use-client-only-at-boundary`
+
+`"use client"` appears only at a block index, a leaf, or a Next error boundary.
+
+**Invalid** (`src/app/[locale]/layout.tsx`)
+
+```ts
+"use client"
+export default function Layout() { return null }
+```
+
+**Valid** (`src/components/blocks/Feed/index.tsx`)
+
+```ts
+"use client"
+export const Feed = () => null
+```
+
+**Finding code:** `FE_CLIENT_BOUNDARY`
+
+**Vì sao (why):** `"use client"` ở `<file>` (`<slot>` không được là client component).
+
+**Cách sửa:** Đặt `"use client"` ở `index.tsx` của block có tương tác, leaf, hoặc `error.tsx`/`global-error.tsx`; giữ layout và page là server component.
+
+## `starci-fe/client-no-server-import`
+
+A `"use client"` file does not import `server-only`, `next/headers`, a Node built-in or a server reader (sub-check `FE_CLIENT_SERVER_IMPORT`).
+
+**Invalid** (`src/components/blocks/Feed/index.tsx`)
+
+```tsx
+"use client"
+import { cookies } from "next/headers"
+```
+
+**Valid** (`src/components/blocks/Feed/index.tsx`)
+
+```tsx
+"use client"
+import useSWR from "swr"
+```
+
+**Finding code:** `FE_CLIENT_SERVER_IMPORT`
+
+**Vì sao (why):** Client component ở `<file>` nhập mã chỉ tồn tại ở server (`server-only`, `next/headers`, module Node, server reader).
+
+**Cách sửa:** Đọc dữ liệu ở server component hoặc server reader rồi truyền xuống bằng props; hoặc dùng SWR gọi client của app.
+
+## `starci-fe/web-storage-only-in-modules`
+
+`localStorage` and `sessionStorage` are touched only inside `modules/` (sub-check `FE_STORAGE_OUTSIDE_MODULES`).
+
+**Invalid** (`src/components/blocks/Wallet/index.tsx`)
+
+```tsx
+const raw = sessionStorage.getItem(KEY)
+```
+
+**Valid** (`src/components/blocks/Wallet/index.tsx`)
+
+```tsx
+const draft = useTopUpDraft()
+```
+
+**Finding code:** `FE_STORAGE_OUTSIDE_MODULES`
+
+**Vì sao (why):** `<file>` dùng `localStorage`/`sessionStorage` ngoài `modules/`; storage không có ở server và ném lỗi khi đầy hạn mức.
+
+**Cách sửa:** Đặt đọc/ghi sau một hook hoặc module trong `modules/` có bảo vệ (`typeof window`, try/catch) rồi gọi từ block.
+
+## `starci-fe/no-dangerous-html`
+
+`dangerouslySetInnerHTML` only on `<script>`; never on a visible element (sub-check `FE_DANGEROUS_HTML`).
+
+**Invalid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+<div dangerouslySetInnerHTML={{ __html: html }} />
+```
+
+**Valid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON_LD }} />
+```
+
+**Finding code:** `FE_DANGEROUS_HTML`
+
+**Vì sao (why):** `dangerouslySetInnerHTML` trên `<tag>` ở `<file>`: chuỗi bất kỳ trở thành HTML chạy được.
+
+**Cách sửa:** Render nội dung thành phần tử; chỉ `<script>` mang JSON-LD hoặc mã theme từ hằng số của app mới được dùng.

package/docs/e2e-shape.md

@@ -0,0 +1,161 @@
+# e2e shape
+
+Law module: `e2e-shape.mjs`. Catalogue: R66 FE_E2E_SHAPE.
+
+These rules govern `e2e/**` and `playwright.config.*`, not `src/`; `starciFeConfig` attaches them through its second block. Specs are `e2e/<area>/<name>.e2e-spec.ts`; the Playwright projects cover 1440x900, 768x1024 and 390x844; no absolute path, no docker, no write outside the repository, no `test.skip`, and typed helpers.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/e2e-spec-location`
+
+An e2e spec is `e2e/<area>/<name>.e2e-spec.ts`; helpers live under `support/` or `fixtures/`.
+
+**Invalid** (`e2e/play.spec.ts`)
+
+```ts
+// file: e2e/play.spec.ts
+```
+
+**Valid** (`e2e/course/play.e2e-spec.ts`)
+
+```ts
+// file: e2e/course/play.e2e-spec.ts
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** Spec e2e `<file>` không nằm ở `e2e/<area>/<name>.e2e-spec.ts`.
+
+**Cách sửa:** Đưa spec vào `e2e/<area>/` với hậu tố `.e2e-spec.ts`; helper vào `e2e/support/` hoặc `e2e/fixtures/`.
+
+## `starci-fe/e2e-no-absolute-path`
+
+No absolute filesystem path in e2e source.
+
+**Invalid** (`e2e/support/session.ts`)
+
+```ts
+const p = "D:/repos/nivo-backend/out"
+```
+
+**Valid** (`e2e/support/session.ts`)
+
+```ts
+const p = path.join(__dirname, "fixtures", "a.png")
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** Spec e2e `<file>` dùng đường dẫn tuyệt đối.
+
+**Cách sửa:** Dựng đường dẫn từ cấu hình hoặc thư mục của chính spec.
+
+## `starci-fe/e2e-no-docker`
+
+An e2e suite does not start or require Docker.
+
+**Invalid** (`e2e/support/stack.ts`)
+
+```ts
+execSync("docker compose up -d")
+```
+
+**Valid** (`e2e/course/play.e2e-spec.ts`)
+
+```ts
+await page.goto(baseUrl)
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** Spec e2e `<file>` phụ thuộc vào docker.
+
+**Cách sửa:** Trỏ suite tới một URL từ cấu hình; môi trường tự cung cấp stack.
+
+## `starci-fe/e2e-no-cross-repo-write`
+
+An e2e file write never targets an absolute path or climbs out of the repository.
+
+**Invalid** (`e2e/support/seed.ts`)
+
+```ts
+await fs.writeFile("../backend/seed.json", data)
+```
+
+**Valid** (`e2e/support/seed.ts`)
+
+```ts
+await fs.writeFile(path.join(outDir, "report.json"), data)
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** Spec e2e `<file>` ghi ra ngoài repo của app (đường dẫn tuyệt đối hoặc `..`).
+
+**Cách sửa:** Chỉ ghi vào thư mục kết quả của chính repo này.
+
+## `starci-fe/e2e-no-skip`
+
+No `test.skip`, `test.fixme` or `describe.skip`: a missing environment fails the run.
+
+**Invalid** (`e2e/course/play.e2e-spec.ts`)
+
+```ts
+test.skip(!process.env.BASE_URL, "needs env")
+```
+
+**Valid** (`e2e/course/play.e2e-spec.ts`)
+
+```ts
+test("plays", async ({ page }) => {})
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** Spec e2e `<file>` bỏ qua test (`test.skip`/`fixme`) — thiếu môi trường phải làm suite đỏ, không được xanh.
+
+**Cách sửa:** Sửa môi trường hoặc xóa test; không bỏ qua có điều kiện.
+
+## `starci-fe/e2e-typed-helpers`
+
+e2e helper parameters are typed and nothing is `any`.
+
+**Invalid** (`e2e/support/session.ts`)
+
+```ts
+export const login = async (page, role) => page
+```
+
+**Valid** (`e2e/support/session.ts`)
+
+```ts
+export const login = async (page: Page, role: Role) => page
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** Helper e2e ở `<file>` có tham số không kiểu hoặc dùng `any`.
+
+**Cách sửa:** Khai kiểu cho mọi tham số của helper; thay `any` bằng kiểu thật hoặc `unknown` kèm kiểm tra.
+
+## `starci-fe/playwright-viewports`
+
+playwright.config declares the viewports 1440x900, 768x1024, 390x844 and no others.
+
+**Invalid** (`playwright.config.ts`)
+
+```ts
+projects: [{ use: { viewport: { width: 1440, height: 900 } } }]
+```
+
+**Valid** (`playwright.config.ts`)
+
+```ts
+projects: three, each with one of 1440x900, 768x1024, 390x844
+```
+
+**Finding code:** `FE_E2E_SHAPE`
+
+**Vì sao (why):** `playwright.config` không khai đúng ba viewport 1440x900, 768x1024, 390x844.
+
+**Cách sửa:** Mỗi project khai một viewport; đủ ba, không thêm cỡ thứ tư.