@starci/eslint-canon-fe 4.0.0 → 6.0.0

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,124 @@
+# 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`, `next/server`, `next-intl/server`, 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/server-module-marks-server-only`
+
+A module that imports `next/headers`, `next/server` (a value import), `next-intl/server`, a Node built-in, or a module that is itself server-only starts with `import "server-only"` (sub-check `FE_SERVER_ONLY_MARK`). A module is server-only when the TypeScript module resolution of the import specifier reaches a source file whose first statement is `import "server-only"`; `import type` and `import { type X }` carry no runtime and are not judged. Route files are server components by construction and need no marker: they are recognized by their slot (`fe.route`, `fe.source-root-pinned`), not by their name. A `"use client"` file that imports the server is `client-no-server-import`'s finding. The multi-hop client reachability (a client block reaching a marked module through a hook) is the architecture machine's.
+
+**Invalid** (`src/modules/api/courses/read-courses.ts`)
+
+```ts
+import { headers } from "next/headers"
+export const readCourses = async () => (await headers()).get("x-locale")
+```
+
+**Valid** (`src/modules/api/courses/read-courses.ts`)
+
+```ts
+import "server-only"
+import { headers } from "next/headers"
+export const readCourses = async () => (await headers()).get("x-locale")
+```
+
+**Finding code:** `FE_SERVER_ONLY_MARK`
+
+**Vì sao (why):** Module `<file>` nhập API chỉ có ở server (`next/headers`, `next/server`, `next-intl/server`, module Node hoặc module đã là server-only) nhưng không mở đầu bằng `import "server-only"`.
+
+**Cách sửa:** Đặt `import "server-only"` làm câu lệnh đầu tiên của tệp; tệp route (`page`, `layout`, `route`, `proxy`) là server component sẵn nên không cần.
+
+## `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ư.

package/docs/env-owner.md

@@ -0,0 +1,52 @@
+# Environment owner
+
+Law module: `env-owner.mjs`. Catalogue: R49 FE_ENV_OWNER.
+
+The environment is read in exactly one place, `modules/config`, and nothing there has a literal default that stands in for a real deployment value. A missing production variable must fail when the config module loads, not point production at a developer's machine.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/no-env-outside-config`
+
+`process.env` and `import.meta.env` are read only in `modules/config`.
+
+**Invalid** (`src/hooks/session/useSession.ts`)
+
+```ts
+const url = process.env.API_URL
+```
+
+**Valid** (`src/hooks/session/useSession.ts`)
+
+```ts
+import { config } from "@/modules/config"
+const url = config.apiUrl
+```
+
+**Finding code:** `FE_ENV_OWNER`
+
+**Vì sao (why):** `<file>` đọc biến môi trường. Chỉ `modules/config` được đọc env.
+
+**Cách sửa:** Đọc giá trị từ export có kiểu của `modules/config` thay vì `process.env`.
+
+## `starci-fe/no-hardcoded-endpoint-fallback`
+
+No URL literal as a fallback, and no literal default for an address or secret variable.
+
+**Invalid** (`src/modules/config/env.ts`)
+
+```ts
+const url = process.env.API_URL ?? "http://localhost:3068"
+```
+
+**Valid** (`src/modules/config/env.ts`)
+
+```ts
+const url = process.env.API_URL
+```
+
+**Finding code:** `FE_ENV_OWNER`
+
+**Vì sao (why):** `<file>` có giá trị dự phòng cứng cho địa chỉ hoặc bí mật (`?? "http://localhost…"`). Thiếu biến ở production phải ném lỗi khi nạp cấu hình, không được lặng lẽ trỏ về máy dev.
+
+**Cách sửa:** Xóa giá trị dự phòng; để `modules/config` ném lỗi khi thiếu biến ở production.

package/docs/formatting.md

@@ -0,0 +1,30 @@
+# Formatting numbers, money and dates
+
+Law module: `formatting.mjs`. Catalogue: R59 FE_I18N_PLACEMENT, sub-check `FE_I18N_FORMATTER`.
+
+`next-intl` owns the reader's locale and time zone and hands them to `useFormatter()` / `getFormatter()`. `toLocale*String`, `new Intl.*`, displayed `toFixed`, a currency symbol glued to a template substitution and the date libraries either guess the locale (server and browser disagree, so a price flickers on hydration) or hard-code one. `modules/i18n/**` is exempt: it is where formats are configured.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/use-intl-formatter`
+
+Format numbers, money and dates with `useFormatter` / `getFormatter` from `next-intl`.
+
+**Invalid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+<p>{new Date(at).toLocaleString()}</p>
+```
+
+**Valid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+const format = useFormatter()
+<p>{format.dateTime(new Date(at), { dateStyle: "medium" })}</p>
+```
+
+**Finding code:** `FE_I18N_FORMATTER`
+
+**Vì sao (why):** `<file>` định dạng số, tiền hoặc ngày bằng `toLocale*String`, `new Intl.*`, `toFixed`, ký hiệu tiền dán vào template hoặc thư viện ngày, thay vì formatter của next-intl.
+
+**Cách sửa:** Dùng `useFormatter()` (hoặc `getFormatter()` ở server): `number(...)`, `dateTime(...)`, `relativeTime(...)`.

package/docs/grammar-boundary.md

@@ -0,0 +1,33 @@
+# Grammar boundary
+
+Law module: `grammar-boundary.mjs`. Catalogue: R62 FE_NATIVE_FORM_CONTROL (the grammar owns the element).
+
+Page structure and text are composed from `@starci/grammar` (or the repository's `<family>-ui` package), not drawn as raw HTML.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/no-raw-structural-element`
+
+Page structure and text are grammar components, not raw `div`-family HTML; only `fe.package.ui` renderers draw raw tags.
+
+Applies to app source that composes the grammar (slots `fe.feature`, `fe.components`, `fe.route`, `fe.hooks`) and to every workspace package except the `<family>-ui` package (`fe.package.ui`), whose components are the renderers. Spec files render raw HTML as a harness and are not judged; a file no slot owns is not judged.
+
+The refused tags are exactly those `@starci/grammar` has a component for (the twin test reads the package source): `h1-h6` (`Heading`), `p` and `span` (`Text`), `hr` (`Divider`), `label` (`Label`), `form` (`Form`), `fieldset` (`Fieldset`), `dl` `dt` `dd` (`DescriptionList`), `table` `thead` `tbody` `tr` `td` `th` (`DataTable`), `ul` `ol` `li` (`SurfaceListCard`, `StaticStateRow`), `header` (`SectionHeader`, `TopBar`), `footer` (`Footer`), `nav` (`Subnav`, `Breadcrumbs`, `NavigationFeatureNav`), `section` (`SurfaceCard`), `main` (`WorkspaceShell`), `figure` and `figcaption` (`MediaFrame`). `div`, `br`, `aside` and `article` are not refused: the grammar has no component for them.
+
+**Invalid** (`src/features/pages/home/component.tsx`)
+
+```ts
+export const Home = () => <section><p>{t("intro")}</p></section>
+```
+
+**Valid** (`src/features/pages/home/component.tsx`)
+
+```ts
+export const Home = () => <SurfaceCard><Text>{t("intro")}</Text></SurfaceCard>
+```
+
+**Finding code:** `FE_NATIVE_FORM_CONTROL`
+
+**Vì sao (why):** `<tag>` thô ở `<file>`. Cấu trúc trang và chữ được ghép từ component của grammar, không viết HTML thô.
+
+**Cách sửa:** Thay bằng component grammar tương ứng (`Heading`, `Text`, `SurfaceCard`, ...); nếu grammar chưa có, thêm vào grammar hoặc gói ui thay vì vẽ tại chỗ.

package/docs/hooks-folder.md

@@ -0,0 +1,29 @@
+# hooks/ holds hooks
+
+Law module: `hooks-folder.mjs`. Catalogue: R56 FE_HOOKS_ARE_HOOKS (lint half).
+
+`hooks/<domain>/use<Name>.ts` holds one hook per file; `hooks/<domain>/<domain>.shared.ts` holds the domain's non-hook helpers; server readers live in `modules/api/<domain>/read-*.ts`. Whether a folder has exactly one shared file and whether a helper name repeats across files belongs to the architecture machine.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/hooks-folder-holds-hooks-only`
+
+`hooks/<domain>/` holds `use*.ts` hooks and one `<domain>.shared.ts`; nothing else.
+
+**Invalid** (`src/hooks/course/readCourse.ts`)
+
+```ts
+export const readCourse = () => 1
+```
+
+**Valid** (`src/hooks/course/useCourse.ts`)
+
+```ts
+export const useCourse = () => 1
+```
+
+**Finding code:** `FE_HOOKS_ARE_HOOKS`
+
+**Vì sao (why):** `<file>` trong `hooks/` không phải React hook. Reader server về `modules/api`, helper về `<domain>.shared.ts`.
+
+**Cách sửa:** Mỗi tệp `use*.ts` một hook; helper dùng chung vào `<domain>.shared.ts`; reader server vào `modules/api/<domain>/read-*.ts`.

package/docs/hygiene.md

@@ -0,0 +1,122 @@
+# Runtime hygiene
+
+Law module: `hygiene.mjs`. Catalogue: R65 FE_SIZE_AND_STATE_BUDGET (sub-checks `FE_EFFECT_CLEANUP`, `FE_SWALLOWED_ERROR`, `FE_CONSOLE_CALL`) and R50 FE_TRANSPORT_OWNER (sub-check `FE_EFFECT_FETCH`).
+
+Work started by a component that nobody owns the end of: a timer, listener, observer, socket or subscription that outlives the component, a fetch in an effect with no cache or cancel, an empty `catch` that hides the failure, a `console` call no pipeline reads. Every rule here decides by resolution: an effect is a call to React's own `useEffect` / `useLayoutEffect` export (the import is followed), the timer or listener is the platform's when its symbol is declared by the default library, "the same handle" is the same scope binding (or member path such as `timerRef.current`), and "a promise" is what the type checker says. There is no folder exemption: a `modules/` file is judged by its structure like any other (the API client starts its timeout timer and clears it in `finally`, in the same function).
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/effect-subscription-needs-cleanup`
+
+Inside a `useEffect` / `useLayoutEffect` callback and inside the subscribe function of `useSyncExternalStore`, everything that keeps running after the callback returns is released by the cleanup the callback returns, against the same handle, target and listener:
+
+| Started | Released by the returned cleanup |
+| --- | --- |
+| `setTimeout` / `setInterval` (the handle) | `clearTimeout(id)` / `clearInterval(id)` on the same handle (variable, ref member, module `let`, or a list drained with `forEach(clearTimeout)`) |
+| `requestAnimationFrame` (the id) | `cancelAnimationFrame(id)` |
+| `target.addEventListener(type, listener)` | `target.removeEventListener(type, listener)` with the same target, type and listener binding; an inline listener cannot be removed; or `{ signal }` with `controller.abort()` |
+| `new ResizeObserver` / `IntersectionObserver` / `MutationObserver` that is `.observe`d | `observer.disconnect()` |
+| `new WebSocket` / `EventSource` / `BroadcastChannel` | `connection.close()` |
+| a call returning a subscription object (its type has `unsubscribe`, `off` or `close`) | that method on the stored object |
+
+The cleanup may be a returned function, a named function that is returned, or may call a same-file function that releases. Outside an effect, a timer or frame is accepted only when the function that starts it also releases it (the API client's `try { ... } finally { clearTimeout(id) }`, the `subscribe` that returns its own unsubscribe); a listener started outside an effect is not judged. A function-returning unsubscribe (`const off = on(handler)`) is not decided here: the checker cannot tell it from any other callback.
+
+**Invalid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+const onClick = () => { setTimeout(() => setOpen(false), 300) }
+```
+
+**Valid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+useEffect(() => {
+  const id = setTimeout(() => setOpen(false), 300)
+  return () => clearTimeout(id)
+}, [])
+```
+
+**Valid** also: a function that starts the timer and directly returns a cleanup clearing the same handle (the `subscribe` of `useSyncExternalStore`)
+
+```tsx
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+  if (timer === undefined) timer = setInterval(tick, 60_000)
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0) { clearInterval(timer); timer = undefined }
+  }
+}
+```
+
+**Finding code:** `FE_EFFECT_CLEANUP`
+
+**Vì sao (why):** `<timer>` ở `<file>` chạy ngoài effect hoặc trong effect không có cleanup gọi `clearTimeout`/`clearInterval`.
+
+**Cách sửa:** Đặt timer trong `useEffect` và trả `() => clearTimeout(id)`; hoặc chuyển vào một hook làm việc đó.
+
+## `starci-fe/no-data-fetch-in-effect`
+
+An effect body starts no promise: no `await`, `fetch`, `.then`, `void load()`, `mutate()` or `refresh()`; read through SWR or a server reader. The call is judged when it runs synchronously in the body (an immediately-invoked function counts); a promise started inside a listener or timer callback the effect registers, or in the cleanup, is that callback's work. A call is a load when its type is a promise, when it is `.then`-ed, or when it is `void`-ed and untyped; a platform promise other than `fetch` (`audio.play()`, `clipboard.writeText()`) is not a data load. Data freshness comes from the SWR key: an SWR `mutate()` or `refresh()` called directly in the effect body is a finding too; run it from the event that changed the data (a handler, a socket message).
+
+**Invalid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+useEffect(() => { fetch(url).then(setData) }, [url])
+```
+
+**Valid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+const { data } = useSWR(key, fetcher)
+```
+
+**Finding code:** `FE_EFFECT_FETCH`
+
+**Vì sao (why):** `useEffect` ở `<file>` tải dữ liệu (`await`, `fetch`, `.then`): không cache, không gộp request, không trạng thái loading/lỗi, không huỷ.
+
+**Cách sửa:** Đọc phía client bằng SWR gọi client của app (`hooks/`), phía route bằng server reader `modules/api/<domain>/read-*.ts`.
+
+## `starci-fe/no-empty-catch`
+
+A `catch` that does nothing hides the failure; handle it or return a typed outcome.
+
+**Invalid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+try { await save() } catch {}
+```
+
+**Valid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+try { await save() } catch (error) { return { kind: "unavailable", cause: error } }
+```
+
+**Finding code:** `FE_SWALLOWED_ERROR`
+
+**Vì sao (why):** `catch` hoặc `.catch` ở `<file>` không làm gì: lỗi biến mất, không thông báo, không dấu vết.
+
+**Cách sửa:** Trả một outcome có kiểu mang nguyên nhân, hiển thị trạng thái lỗi, hoặc ném lại.
+
+## `starci-fe/no-console`
+
+No `console.*` call in product source.
+
+**Invalid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+console.error(error)
+```
+
+**Valid** (`src/components/blocks/Feed/component.tsx`)
+
+```tsx
+return { kind: "unavailable", cause: error }
+```
+
+**Finding code:** `FE_CONSOLE_CALL`
+
+**Vì sao (why):** `console.<method>` ở `<file>`: không vào pipeline log nào và lộ chi tiết nội bộ cho người dùng.
+
+**Cách sửa:** Trả outcome có kiểu, hiển thị trạng thái lỗi, hoặc để lỗi tới `error.tsx`.

package/docs/lint-escape-hatch.md

@@ -0,0 +1,34 @@
+# No inline suppression of any spelling
+
+Law module: `lint-escape-hatch.mjs`. Catalogue: R18 HFS_INLINE_SUPPRESSION.
+
+No `eslint-disable` (line, next-line, block), `eslint-enable`, `eslint-env`, inline `eslint rule: ...` config, `@ts-ignore`, `@ts-expect-error`, `@ts-nocheck`, no retired `vn-ok:` pragma, and no `NOSONAR`, `@sonar-ignore`, `istanbul ignore`, `c8 ignore`, `v8 ignore`, `prettier-ignore` or `stylelint-disable` comment. `noInlineConfig` makes a directive ineffective, this rule makes it a finding, and `reportUnusedDisableDirectives` reports a leftover that suppresses nothing. The rule covers `src/**`, specs and the e2e tree.
+
+Every rule below is an error in `starciFeConfig`; none can be switched off or suppressed inline.
+
+## `starci-fe/no-inline-lint-config`
+
+Source cannot change its own lint or type-check policy, and the vn-ok pragma is retired.
+
+**Invalid** (`src/components/blocks/Feed/index.tsx`)
+
+```ts
+// eslint-disable-next-line no-console
+// @ts-ignore
+// NOSONAR
+/* istanbul ignore next */
+const s = "x" // vn-ok: reason
+```
+
+**Valid** (`src/components/blocks/Feed/index.tsx`)
+
+```ts
+// the rule is fixed centrally; fix the code instead
+const s = 1
+```
+
+**Finding code:** `HFS_INLINE_SUPPRESSION`
+
+**Vì sao (why):** Có chú thích tắt luật ở `<file>:<line>`. HFS không cho tắt tại chỗ — sửa code, hoặc đề xuất đổi luật.
+
+**Cách sửa:** Xóa `eslint-disable`, `@ts-ignore`, `@ts-expect-error` hoặc `vn-ok` và sửa nguyên nhân.