@starci/eslint-canon-fe 8.4.42 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 9.0.0 - 2026-10-26
+- Changed: concrete Grammar component, variant, token and vendor rules move to `@starci/eslint-grammar-starci` under the `starci-grammar` namespace. Consumers compose both flat-config factories for their selected family.
+- Added: explicit shared infrastructure exports under `@starci/eslint-canon-fe/lib/*`; family packages reuse these readers without copying them.
+- Kept universal: the R318 surface composition law (`nested-control-variant`, `no-list-panel-padding`, `no-app-surface-paint`) and the R65 `no-app-relative-clock`, now in `size-and-state-budget.mjs`.
+
+### Migrating from 8.x
+- What moved: twenty rules leave this package with their IDs, finding codes and severity unchanged; only the namespace changes from `starci-fe/` to `starci-grammar/`. They are `app-shell-frame`, `no-shell-bottom-tabs`, `navbar-control-size`, `navbar-cluster`, `no-navbar-create`, `no-raw-structural-element`, `no-heading-tag-outside-heading-component`, `status-text-uses-soft-foreground`, `vendor-primitive-has-named-owner`, `no-vendor-icon-outside-icon-leaf`, `heroicons-is-the-glyph-vendor`, `no-off-scale-glyph-size`, `no-icon-size-class`, `destructive-menu-entry-needs-danger-tone`, `no-decorative-icon-in-metric-cell`, `no-inline-svg-outside-brand-mark-leaf`, `no-fractional-step`, `no-hand-rolled-heading`, `no-unresolved-token-class` and `slot-status-through-slotview`. StarCi apps get them from `@starci/eslint-grammar-starci`; Offset Pop apps get the same implementations from `@starci/eslint-grammar-offset-pop`.
+- Select the family explicitly: set `sides.fe.grammar` to `starci` or `offset-pop` in `hfs.json`. No family is inferred.
+- Install the family package at its canon-pins version beside this one (app root `devDependencies`). `starci app check` refuses an app that selects a family and declares canon-fe 9 without that package (`FE_STACK_FAMILY_LINT_MISSING`, R288), so the twenty rules cannot be lost silently.
+- Flat config order: the universal factory first, then the family factory, both with the same HFS view: `export default [...starciFeConfig({ hfs }), ...starciGrammarConfig({ hfs })]` (Offset Pop: `offsetPopGrammarConfig`). `starci app sync` renders this managed `fe/eslint.config.mjs`.
+- Rename any reference to a moved rule from `starci-fe/<rule>` to `starci-grammar/<rule>`; the removed-vocabulary check refuses the old spelling.
+- NIVO moves in v0.3.7.
+
+## 8.4.43 - 2026-10-26
+- Changed: the bundled canon pins follow back-end canon 3.4.43, hfs 4.7.34 and cli 1.7.34.
+
 ## 8.4.42 - 2026-10-26
 - Changed: the bundled canon pins follow back-end canon 3.4.42.
 
@@ -9,7 +25,7 @@
 - Fixed: `operations-only-in-swr-hooks` (FE_OP_OUTSIDE_SWR_HOOK) no longer reports named imports that all resolve, through relative re-exports, to a generated `__generated__/input-bounds` module (`INPUT_BOUNDS`, `inputBoundsIssues`): they are contract data, not API operations. Mixed, default and namespace imports of the barrel still report.
 - Added: the stream reader of server-sent events (`fe.transport.stream`, `modules/api/sse/clients/`) is part of the API layer, so it may call `fetch` (FE_TRANSPORT_OWNER); a stream operation (`sse/<area>/stream-<channel>.ts`) must import it.
 - Added: `useSWRSubscription` (`swr/subscription`) is an SWR request hook of the family (FE_SWR_OUTSIDE_FAMILY, FE_OP_OUTSIDE_SWR_HOOK, FE_HOOKS_ARE_HOOKS): a stream operation is consumed only by `hooks/swr/api/sse/subscriptions/useSubscribe<X>Swr.ts`.
-- Added: `nested-control-variant` (`FE_NESTED_VARIANT`) refuses explicit primary fields in Grammar surface subtrees and app-authored `bg-surface` paint. `no-list-panel-padding` (`FE_LIST_PANEL_PADDING`) refuses stacked horizontal wrapper padding around Grammar lists and section captions.
+- Changed: `nested-control-variant` (`FE_NESTED_VARIANT`) refuses static variants on layer-aware fields throughout app code and primary Tabs inside painted Grammar surfaces. R318 owns Grammar composition; `no-app-surface-paint` uses the separate layout-only code `FE_GRAMMAR_LAYOUT_ONLY`. `no-list-panel-padding` (`FE_LIST_PANEL_PADDING`) checks all horizontal padding forms only within the nearest painted surface.
 
 ## 8.4.40 - 2026-10-25
 - Changed: the bundled canon pins select @starci/stylelint-canon 2.0.11, @starci/hfs 4.7.33 and @starci/cli 1.7.33.

package/README.md

@@ -1,91 +1,43 @@
 # @starci/eslint-canon-fe
 
-The StarCi front-end lint canon for Next.js and TypeScript applications. It keeps
-component ownership, accessibility, loading behavior, vendor boundaries, translations, naming,
-and colocated class-name composition consistent without prescribing a custom rendering protocol.
-
-```bash
-npm i -D @starci/eslint-canon-fe eslint-plugin-react-hooks typescript
-```
-
-A repository's `eslint.config.mjs` is the managed one-liner `starci app sync` renders (and `starci app check` compares, R05/R17):
+Universal front-end laws for TypeScript and Next.js applications, classified by
+[FE-RULE-OWNERSHIP](../../../knowledge/patterns/fe/index.yaml#FE-RULE-OWNERSHIP).
+The canon owns composition, data and effect boundaries, translations, accessibility, source
+structure, typed contracts, token discipline and check integrity across Grammar families.
 
 ```js
 import { loadHfs, starciFeConfig } from "@starci/eslint-canon-fe"
-export default starciFeConfig({ hfs: loadHfs(import.meta.url) })
-```
-
-`loadHfs` reads the repository's `hfs.json` and the slot manifest shipped in `runtime/`. The factory returns two
-flat-config blocks and owns everything about the law: which files are linted (from the HFS profile), which rules are on
-(every one, at `error` - nothing is off and nothing is a warning), the React Hooks rules (`eslint-plugin-react-hooks` 7, its
-recommended set lifted to `error`), typed linting, and the inline-directive fence (`noInlineConfig` plus
-`reportUnusedDisableDirectives`). The repository states nothing.
-
-- The **Sonar parity** law (R235): the smells SonarCloud measures that a lint rule can decide, `no-await-in-loop`, `prefer-code-point`, `prefer-string-raw`, `no-nested-conditional`, `no-void-operator`, `no-unused-import`, `prefer-export-from` and `no-unused-prop-types`, plus the typescript-eslint rules `no-deprecated`, `no-base-to-string` and `require-await` the factory turns on (they read types, so the source block is typed). A Next `matcher` string keeps its escapes (the segment config is read statically); `*.spec.ts` and `*.e2e-spec.ts` are outside the scan, so outside these rules.
-- The **fe-stack** law: `fe-stack-import` refuses an import of a library the front-end stack catalog forbids (one canonical library per concern, read from `runtime/knowledge/hfs/fe-stack.yaml`) and `@supabase/*` outside `modules/auth`.
-- The **ignore** block: `node_modules`, `.next`, `dist`, `coverage`, `__generated__` and `.starci/`.
-- The **source** block governs `apps/*/src/**` and `packages/*/src/**` with types (`parserOptions.projectService`) and
-  `settings.starci.hfs`, the slot view path-scoped rules ask (`lib/hfs.mjs` `hfsOf`), never a path pattern.
-
-`recommended`, `why`, `loadHfs`, `linterOptions` and the plugin itself are also
-exported; `why[rule]` is `{ code, vi, fixVi }`, the finding code and the Vietnamese why the harness quotes.
-
-## Rules
-
-The [app-shell](docs/app-shell.md) law holds the fixed `WorkspaceShell` frame, mobile drawer navigation,
-navbar action kinds and order, shared bar control size, and page ownership of create actions. Its
-rules are gathered into the normal FE lint and application gate.
+import { starciGrammarConfig } from "@starci/eslint-grammar-starci"
 
-Each law has a page under [`docs/`](docs) with, for every rule, an invalid and a valid example and
-its Vietnamese why. New in 5.0: [env-owner](docs/env-owner.md), [transport](docs/transport.md),
-[client-boundary](docs/client-boundary.md), [hooks-folder](docs/hooks-folder.md),
-[next-conventions](docs/next-conventions.md), [translation](docs/translation.md) (no literal copy at any
-tier), [brand-values](docs/brand-values.md), [native-controls](docs/native-controls.md),
-[size-and-state-budget](docs/size-and-state-budget.md) and [lint-escape-hatch](docs/lint-escape-hatch.md). New in 5.1: [lists](docs/lists.md), [hygiene](docs/hygiene.md), [formatting](docs/formatting.md) and [type-safety](docs/type-safety.md), plus rules added to next-conventions, client-boundary, native-controls and transport. New in 6.1: `no-vietnamese-in-source` (English-only identifiers, strings, comments and test titles; the i18n fixtures slot `e2e/fixtures/i18n/` is the one exemption). New in 6.0: `effect-subscription-needs-cleanup` (timers, frames, listeners, observers, sockets and subscriptions are released against the same handle), `server-module-marks-server-only` ([client-boundary](docs/client-boundary.md)), `no-data-fetch-in-effect` sees indirect loads, `no-hardcoded-copy` reads templates and sentence values, `no-inline-lint-config` refuses `NOSONAR` and the coverage/formatter switches. Also new in 6.0: [grammar-boundary](docs/grammar-boundary.md) (`no-raw-structural-element`), `one-outcome-union` ([transport](docs/transport.md)), `i18n-stack-in-one-module` ([next-conventions](docs/next-conventions.md)), [size-growth](docs/size-growth.md) (`file-size-growth`: a file over the manifest's line budget is not born large and does not grow; the budget is `ruleParams.fe.fileLines`, read from the manifest copy in `runtime/`).
-
-Older laws cover comments, file layout, icons and vendor ownership, landmarks, loading states,
-naming, props, served locales, component splits, design tokens, type safety, typography, and
-class-name ownership. Reusable class names belong in a colocated `classNames.ts` module and should
-be composed with HeroUI `cn` using one utility token per argument.
-
-The `drawing` law holds the split surfaces (blocks, pages, layouts, overlays under `components/`
-or `features/`): the pure `XBase` takes `{ state, props, on }` of atoms, with named `render`/`renderX`
-callbacks in feature `props` for block composition (`base-props-atom`), only its
-sibling `index.tsx` imports it and never re-exports it (`base-import-pair`), `XState` names drawn
-shapes and never a data status (`no-data-status-shape`), and a block renders each slot's
-loading/forbidden/error/empty through `SlotView` (`slot-status-through-slotview`). The law's name is
-the `drawing` slot role of `component.tsx`; a split-surface reference tree lives under
-`.claude/examples/`.
-
-Page and layout owners in `features/{pages,layouts}/<Name>/index.tsx` may compose overlay and block public entries. A server
-page may import and render a client overlay entry while remaining a server component: `FE_CLIENT_BOUNDARY` accepts the
-overlay entry, and `FE_CLIENT_SERVER_IMPORT` / `FE_CLIENT_REACHES_SERVER` reject server-only imports from its client closure.
-The only feature-to-feature edge is pages or layouts to overlays; layouts never import pages, overlays never import other
-overlays, components never import overlays, and blocks never import another block. For a client list, a server page mounts an overlay whose connected entry reads list
-identities and supplies a block renderer to its pure Base. A pure component or branch may render that keyed list by
-calling the supplied render prop; it imports no block and fetches no data. The supplied renderer composes blocks only,
-with no intrinsic markup or hook calls, and each connected item block still renders its exact sibling `XBase`.
-
-A layout-level overlay host passes rendered overlay candidates into a client `features/overlays/OverlayRouteHost` entry.
-Its hook under `hooks/overlays` reads `usePathname()` and `useSearchParams()` and supplies scalar selection to the pure
-`components/branches/OverlayHost` branch. The layout imports the candidate overlay entries; the host and branch only
-receive rendered nodes. No callback crosses the server-to-client boundary, and pages stay server components. This
-composition-only host renders an existing public pure branch without a forwarding private Base; connected blocks still
-require their exact sibling Base. The worked tree is in
-[`knowledge/patterns/fe/boundaries.yaml`](../../../knowledge/patterns/fe/boundaries.yaml), `FE-BOUNDARY-5`.
-
-The one locale pattern everywhere is `next-intl`, a `[locale]` segment, default `vi`,
-`localePrefix: "as-needed"`, and `proxy.ts` instead of `middleware.ts`.
-
-Grammar is a business-neutral HeroUI-backed component package. Its components accept ordinary
-typed React props and children.
-
-The [surface composition law](docs/surface-rules.md) holds ANATOMY-2 and PADDING-0:
-`nested-control-variant` refuses explicit primary fields inside Grammar surfaces and raw app
-`bg-surface` paint (`FE_NESTED_VARIANT`); `no-list-panel-padding` refuses horizontal padding
-wrappers around Grammar lists and section captions (`FE_LIST_PANEL_PADDING`). Grammar supplies
-the nested secondary default and owns the list's panel inset.
-
-## Requirements
+const hfs = loadHfs(import.meta.url)
+export default [...starciFeConfig({ hfs }), ...starciGrammarConfig({ hfs })]
+```
 
-ESLint 9+ (flat config), `eslint-plugin-react-hooks` 7+, and Node.js 20.9+.
+`starci app sync` renders the selected family's managed flat config. Both factories cover every
+app and workspace package's source. Universal rules, React Hooks rules, type-aware rules and
+Sonar rules run at error; the factory sets typed parsing and refuses inline lint directives.
+Generated wire types, dependencies and build outputs follow the shared source-scope contract.
+
+Concrete Grammar component names, props, variants, scales and vendor recipes belong to
+`@starci/eslint-grammar-starci` or the selected family's package. The family rules keep their
+bare IDs under the `starci-grammar` namespace. This package exports shared AST, binding, type,
+slot and configuration infrastructure through `@starci/eslint-canon-fe/lib/*`; family packages
+import those readers without copying them.
+
+Every universal law remains gathered by `index.mjs`; its recommendation enables every rule.
+The `docs/` directory carries the detailed behavior of the documented laws. `why` supplies
+failure codes and English guidance for the catalogued rules.
+
+`starciPlainSourceConfig({ root })` applies slot-free universal rules to a TypeScript `src/`
+tree. `starciTypedSourceConfig({ root })` provides the shared typed, React Hooks and Sonar
+configuration for source that has not adopted the product composition laws.
+
+The [surface composition law](docs/surface-rules.md) (R318) holds ANATOMY-2 and PADDING-0 for every
+family that publishes the shared HeroUI surface and field API: `nested-control-variant` refuses static
+variants on layer-aware fields and primary Tabs inside painted Grammar surfaces (`FE_NESTED_VARIANT`),
+`no-app-surface-paint` keeps surface paint in Grammar (`FE_GRAMMAR_LAYOUT_ONLY`) and
+`no-list-panel-padding` refuses horizontal padding wrappers around Grammar lists and section captions
+within the nearest painted surface (`FE_LIST_PANEL_PADDING`). The R65 budget law's
+`no-app-relative-clock` leaves live relative time and countdowns to Grammar's shared clock.
+
+Regression specs belong to this package. Application front ends and Grammar libraries have no specs.

package/brand-values.mjs

@@ -13,7 +13,7 @@
  * breakpoint. Spacing and sizing come from the grammar's utility tokens.
  *
  * WHAT IT DELIBERATELY LEAVES ALONE: a fragment identifier (`href="#top"`, `id`, `htmlFor`), a
- * `data:` URI, a component's `color="primary"` prop (that is a variant name, not a colour), and
+ * `data:` URI, a component's semantic appearance prop (a named role rather than a raw colour), and
  * Tailwind arbitrary values (`w-[12px]`), which `no-arbitrary-value` already reports - two rules
  * for one span would be two findings for one fix.
  */

package/docs/hooks-folder.md

@@ -8,7 +8,7 @@ Every rule below is an error in `starciFeConfig`; none can be switched off or su
 
 ## `starci-fe/hooks-folder-holds-hooks-only`
 
-`hooks/` holds `use*.ts` hooks under the names their family slot gives and, per domain, one `<domain>.shared.ts`; nothing else. A hook file exports one hook; `server-only` and `next/headers` are never imported there. A hook is a function that calls a hook: a React, SWR or Redux hook, a `use*` imported from the app's own `hooks/` folders (a `hooks/swr` wrapper or a sibling domain hook, resolved by TypeScript symbol resolution through barrels; that hook's own file is judged when it is linted), or a library hook from an explicit list (`next-intl` `useTranslations`/`useLocale`/`useFormatter`/`useNow`/`useTimeZone`/`useMessages`, `next/navigation`, `react-hook-form`, `zustand`). A `use*` from outside every `hooks/` folder or an unlisted library is not a hook by its spelling, and a file that exports a helper, a constant or a component still fails (owner ruling 2026-10-16).
+`hooks/` holds `use*.ts` hooks under the names their family slot gives and, per domain, one `<domain>.shared.ts`; nothing else. A hook file exports one hook; `server-only` and `next/headers` are never imported there. A hook is a function that calls a hook: a React, SWR or Redux hook, a `use*` imported from the app's own `hooks/` folders (a `hooks/swr` wrapper or a sibling domain hook, resolved by TypeScript symbol resolution through barrels; that hook's own file is judged when it is linted), or a library hook from an explicit list (`next-intl` `useTranslations`/`useLocale`/`useFormatter`/`useNow`/`useTimeZone`/`useMessages`, `next/navigation`, `next-themes` `useTheme`, `react-hook-form`, `zustand`). A `use*` from outside every `hooks/` folder or an unlisted library is not a hook by its spelling, and a file that exports a helper, a constant or a component still fails (owner ruling 2026-10-16).
 
 **Invalid** (`src/hooks/course/readCourse.ts`)
 
@@ -19,7 +19,8 @@ export const readCourse = () => 1
 **Valid** (`src/hooks/course/useCourse.ts`)
 
 ```ts
-export const useCourse = () => 1
+import { useState } from "react"
+export const useCourse = () => useState(1)
 ```
 
 **Finding code:** `FE_HOOKS_ARE_HOOKS`
@@ -33,7 +34,8 @@ export const useGetCourseSwr = () => 1
 **Valid** (`src/hooks/swr/api/graphql/queries/useQueryCourseSwr.ts`)
 
 ```ts
-export const useQueryCourseSwr = () => 1
+import { useState } from "react"
+export const useQueryCourseSwr = () => useState(1)
 ```
 
 **Why:** `<file>` inside `hooks/` is not a React hook, or is not a file its hooks family names. A call to the back end goes to `modules/api`, a helper to `<domain>.shared.ts`.

package/docs/native-controls.md

@@ -16,11 +16,7 @@ Use the grammar's renderers; never a bare select, input, textarea or button.
 <button onClick={go} />
 ```
 
-**Valid** (`src/components/blocks/Feed/index.tsx`)
-
-```ts
-<Button onPress={go}>{t("go")}</Button>
-```
+**Valid:** Compose the selected grammar's published control with its supported event props and a translated label.
 
 **Finding code:** `FE_NATIVE_FORM_CONTROL`
 

package/docs/next-conventions.md

@@ -141,7 +141,7 @@ export default function Page() { return <CoursesPage /> }
 
 ## `starci-fe/navigation-from-intl`
 
-`Link`, `useRouter`, `usePathname` and `redirect` come from `modules/i18n/navigation`, not from Next (catalogue R59, sub-check `FE_I18N_NAVIGATION`).
+`Link`, `useRouter`, `usePathname` and `redirect` come from `modules/routes`, not from Next (catalogue R59, sub-check `FE_I18N_NAVIGATION`).
 
 **Invalid** (`src/components/blocks/Feed/component.tsx`)
 
@@ -152,18 +152,18 @@ import { useRouter } from "next/navigation"
 **Valid** (`src/components/blocks/Feed/component.tsx`)
 
 ```tsx
-import { useRouter } from "@/modules/i18n/navigation"
+import { useRouter } from "@/modules/routes"
 ```
 
 **Finding code:** `FE_I18N_NAVIGATION`
 
 **Why:** `<file>` imports `Link`, `useRouter`, `usePathname` or `redirect` from Next, which is unaware of the locale: paths lose the `[locale]` prefix.
 
-**Fix:** Import from `modules/i18n/navigation`, which next-intl builds from `routing.ts`.
+**Fix:** Import from `modules/routes`, which next-intl builds from `routing.ts`.
 
 ## `starci-fe/no-native-anchor`
 
-An internal link is `Link` from `modules/i18n/navigation`; an external `_blank` link carries `rel` (catalogue R59, sub-check `FE_I18N_NAVIGATION`).
+An internal link is `Link` from `modules/routes`; an external `_blank` link carries `rel` (catalogue R59, sub-check `FE_I18N_NAVIGATION`).
 
 **Invalid** (`src/components/blocks/Feed/component.tsx`)
 
@@ -181,7 +181,7 @@ An internal link is `Link` from `modules/i18n/navigation`; an external `_blank`
 
 **Why:** `<a>` in `<file>` points at an internal route (reloads the whole page, loses the locale, loses prefetch) or opens a new tab without `rel`.
 
-**Fix:** Use `Link` from `modules/i18n/navigation` with an href built by `modules/routes`; for `_blank` links add `rel="noopener noreferrer"`.
+**Fix:** Use `Link` from `modules/routes` with an href built by `modules/routes`; for `_blank` links add `rel="noopener noreferrer"`.
 
 ## `starci-fe/no-hardcoded-route`
 
@@ -207,9 +207,9 @@ router.push(routes.newWorkspace())
 
 ## `starci-fe/i18n-stack-in-one-module`
 
-next-intl's routing, navigation, request config and middleware factories are called only in the i18n package (or the only app's `modules/i18n`).
+The shared i18n package owns a multi-app stack. A single app keeps routing/request config in `modules/i18n` and navigation in the `modules/routes` public entry.
 
-`defineRouting` (`next-intl/routing`), `createNavigation` (`next-intl/navigation`), `getRequestConfig` (`next-intl/server`) and `createMiddleware` (`next-intl/middleware`), resolved by the import that binds the called name (a renamed import or a namespace member counts), are called only in a file of slot `fe.package.i18n` (`packages/<family>-i18n`, exporting `createAppI18n`), or in a `fe.modules.i18n` file of a repository that declares exactly one app. In a multi-app repository each app's `modules/i18n` calls the package factory. It sits beside `no-second-i18n-stack`, which refuses another i18n library at its import; this rule refuses a second copy of next-intl's own stack.
+`defineRouting` and `getRequestConfig` remain in the i18n owner. `createNavigation` belongs to a shared `fe.package.i18n` owner or the single app's `fe.modules.routes` owner. A single app's proxy mounts locale middleware using the routing-only public i18n entry. A shared package exposes its routing-only proxy entry as a declared package export. The proxy does not import `next-intl/navigation` or the app's routes/navigation barrel. Named import aliases and namespace imports keep their factory identity.
 
 **Invalid** (`apps/web/src/modules/i18n/request.ts`, a repository with two apps)
 
@@ -229,4 +229,4 @@ export const i18n = createAppI18n({ locales: ["vi"] })
 
 **Why:** `<file>` builds a layer of the next-intl stack itself (`defineRouting`, `createNavigation`, `getRequestConfig`, `createMiddleware`). The stack may be written only once per repo.
 
-**Fix:** Call the `createAppI18n` factory of the shared i18n package in `modules/i18n/index.ts` and import the result; in a single-app repo, write the stack only in that app's `modules/i18n`.
+**Fix:** Use the shared i18n factory, or keep routing/request configuration in the single app's i18n module and navigation in its public routes entry. Keep navigation imports out of the proxy.

package/docs/size-and-state-budget.md

@@ -71,3 +71,25 @@ const d = useQueryFeedSwr({ refreshInterval: 5000 })
 **Why:** `<unit>` writes its own poll loop (`setInterval` or a self-calling `setTimeout`).
 
 **Fix:** Refresh through a data hook (`refreshInterval`) or a socket, exactly one mechanism per resource.
+
+## `starci-fe/no-app-relative-clock`
+
+Grammar owns the shared clock for live relative time and countdowns. App components, hooks, modules and shared packages, including a product UI package, pass `dateTime`, `locale` and `mode` to `RelativeTime`.
+
+The rule rejects a recurring `setInterval` or self-scheduling `setTimeout` whose callback or same-file helper reads `Date.now()`, `Date()`, zero-argument `new Date()` or `performance.now()`. It follows local aliases and destructured platform methods. Static reads, one-shot delays and timers that do not read the clock remain available. Indirect external clock helpers and counters that only decrement state need semantic review.
+
+**Invalid** (`src/hooks/time/useNow.ts`)
+
+```ts
+const timer = setInterval(() => update(Date.now()), 1000)
+```
+
+**Valid** (`src/components/leaves/UpdatedAt/index.tsx`)
+
+```tsx
+const UpdatedAt = () => <RelativeTime dateTime={instant} locale={locale} mode="relative" />
+```
+
+**Finding code:** `FE_SIZE_AND_STATE_BUDGET`
+
+**Fix:** Render the Grammar primitive and pass the instant; its single shared ticker owns updates and its deterministic fallback owns the server render.

package/docs/surface-rules.md

@@ -1,18 +1,16 @@
 # Grammar surface composition
 
-Law module: `surface-rules.mjs`. Canon: ANATOMY-2 and PADDING-0.
+Law module: `surface-rules.mjs`. HFS rule: R318. Canon: ANATOMY-2 and PADDING-0.
 
 ## `starci-fe/nested-control-variant`
 
-Finding code: `FE_NESTED_VARIANT`. Grammar surfaces supply the secondary field default through their nesting context. An explicit primary field inside a surface subtree in the same component is refused. Named import aliases and namespace imports preserve Grammar ownership. A different component owns a separate static subtree; overlay triggers belong outside the overlay content.
-
-App `className` values carry layout. A raw `bg-surface` utility paints a surface and is refused, including conditional classes, class builders, responsive variants, important modifiers and opacity suffixes. Static props spreads keep the same obligations. Typed app lint follows imported colocated class declarations as well as local constants.
+Finding code: `FE_NESTED_VARIANT`. Grammar context supplies field variants on the page background and inside painted surfaces. App code omits every static `variant` on layer-aware fields, including fields rendered by imported or helper components. Named import aliases, namespace imports, static constants and props spreads preserve Grammar ownership. Explicit primary `Tabs` inside a painted surface is also refused; its default follows the surface context.
 
 Invalid:
 
 ```tsx
-import { SurfaceCard, SearchField } from "@starci/grammar/core"
-const Panel = () => <SurfaceCard><SearchField variant="primary" /></SurfaceCard>
+import { SearchField } from "@starci/grammar/core"
+const Search = () => <SearchField variant="secondary" />
 ```
 
 Valid:
@@ -22,20 +20,24 @@ import { SurfaceCard, SearchField } from "@starci/grammar/core"
 const Panel = () => <SurfaceCard><SearchField /></SurfaceCard>
 ```
 
+## `starci-fe/no-app-surface-paint`
+
+Finding code: `FE_GRAMMAR_LAYOUT_ONLY`. App classes carry layout. A raw `bg-surface` utility paints a surface and is refused, including conditional classes, class builders, responsive variants, important modifiers and opacity suffixes. Compose a painted Grammar surface such as `SurfaceCard`. Static props spreads keep the same obligations. Typed app lint follows imported colocated class declarations as well as local constants.
+
 ## `starci-fe/no-list-panel-padding`
 
-Finding code: `FE_LIST_PANEL_PADDING`. A wrapper around Grammar `ListBox` or its section caption cannot add `px-*`, `ps-*` or `pe-*`. These insets add to the list's own padding. Grammar's panel inset aligns rows, section captions and the surface header to one content edge.
+Finding code: `FE_LIST_PANEL_PADDING`. Within the nearest painted Grammar surface, a wrapper around `ListBox` or its section caption cannot add horizontal padding through `p-*`, `px-*`, `ps-*`, `pe-*`, `pl-*`, `pr-*` or arbitrary `padding-inline` properties. These insets add to the list's own padding. Page gutters outside that surface and lists outside any surface retain their layout padding. Unpainted containers such as `Rail` pass the parent context through.
 
 Invalid:
 
 ```tsx
 import { SurfaceCard, ListBox } from "@starci/grammar/core"
-const Panel = () => <SurfaceCard><div className="px-2"><ListBox label="Members" items={members} /></div></SurfaceCard>
+const Panel = () => <SurfaceCard><div className="pl-2"><ListBox label="Members" items={members} /></div></SurfaceCard>
 ```
 
 Valid:
 
 ```tsx
 import { SurfaceCard, ListBox } from "@starci/grammar/core"
-const Panel = () => <SurfaceCard><ListBox inset="panel" label="Members" items={members} /></SurfaceCard>
+const Panel = () => <div className="px-4"><SurfaceCard><ListBox inset="panel" label="Members" items={members} /></SurfaceCard></div>
 ```

package/drawing.mjs

@@ -3,7 +3,7 @@
  *
  * TWO AXES, AND ONLY ONE IS DRAWN. A surface's `state` is its SHAPE: a layout the owner approves as
  * one drawing. A slot's data status (loading, forbidden, error, empty) is not a shape; it is a
- * recipe applied per api through `SlotView`, and it is never drawn. Mixing the two is what made
+ * status recipe applied per resource, and it is never a drawn shape. Mixing the two is what made
  * every block ship four hand-drawn variants that disagreed with each other.
  *
  * THE PURE HALF TAKES ATOMS. `component.tsx` receives `{ state, props, on }`: `props` is data
@@ -19,21 +19,9 @@
  * never wrong, beyond it.
  */
 
-import { hfsOf } from "./lib/hfs.mjs"
-import { classifyImport, fileOf, inSlot, kindOfFile, roleOfFile } from "./lib/scope.mjs"
+import { classifyImport, roleOfFile } from "./lib/scope.mjs"
 
-/** The layers and feature kinds that split into a connected `index.tsx` and a pure `component.tsx`; a shared package's layers never split. */
-const SPLIT_KINDS = new Set(["blocks", "pages", "layouts", "overlays"])
-
-/** The folder name of the linted file: the surface a `component.tsx` or `index.tsx` belongs to. */
-const surfaceName = (context) => hfsOf(context).relative(fileOf(context)).split("/").slice(-2)[0]
-
-/** Whether the linted file sits in a component or feature owner of a split kind. */
-const inSplitTier = (context) => inSlot(context, "fe.components", "fe.feature") && SPLIT_KINDS.has(kindOfFile(context))
-
-/** The pure half of a split tier (the drawing role of a surface folder), and which tier it is. */
-const pureHalf = (context) =>
-  inSplitTier(context) && roleOfFile(context) === "drawing" && /^[A-Z][A-Za-z0-9]*$/.test(surfaceName(context)) ? kindOfFile(context) : null
+import { inSplitTier, pureHalf } from "./lib/drawing-scope.mjs"
 
 /** Type names that carry a rendered tree rather than data. */
 const NON_ATOM_TYPE = /^(?:ReactNode|ReactElement|ReactPortal|JSX\.Element|Element|ComponentType|FC|FunctionComponent|ElementType|ComponentProps|RenderFunction)$/
@@ -294,7 +282,7 @@ export const noDataStatusShape = {
     schema: [],
     messages: {
       status:
-        "`{{name}}` lists \"{{value}}\" as a shape. Loading, forbidden, error and empty are a slot's data status: pass them as `Slot<T>` in `props` and render them through `SlotView`. Open/closed is an atom (`isOpen`). A shape is a layout the owner approves as one drawing.",
+        "`{{name}}` lists \"{{value}}\" as a shape. Loading, forbidden, error and empty describe resource status: pass them as data to the owned status renderer. Open/closed is a boolean atom. A shape is a layout the owner approves as one drawing.",
     },
   },
   create(context) {
@@ -316,61 +304,11 @@ export const noDataStatusShape = {
   },
 }
 
-// -- DRAWING-4 ----------------------------------------------------------------------------------
-
-/** Flags that are a slot's data status. */
-const STATUS_FLAG = /^(?:isLoading|isError|isForbidden|isPending|isValidating|isEmpty)$/
-
-/** The name a test expression reads, if it is a status flag. */
-const statusFlagOf = (node) => {
-  if (!node) return null
-  if (node.type === "UnaryExpression") return statusFlagOf(node.argument)
-  if (node.type === "ChainExpression") return statusFlagOf(node.expression)
-  if (node.type === "Identifier" && STATUS_FLAG.test(node.name)) return node.name
-  if (node.type === "MemberExpression" && node.property?.type === "Identifier" && STATUS_FLAG.test(node.property.name)) {
-    return node.property.name
-  }
-  if (node.type === "LogicalExpression" || node.type === "BinaryExpression") return statusFlagOf(node.left) ?? statusFlagOf(node.right)
-  return null
-}
-
-/** A block's pure half never branches on a data status itself. */
-export const slotStatusThroughSlotView = {
-  meta: {
-    type: "problem",
-    docs: { description: "A block's pure half renders data status through `SlotView`, never its own branch." },
-    schema: [],
-    messages: {
-      branch:
-        "This branches on `{{flag}}` by hand. Every slot renders its status through `SlotView`, the one recipe: a second branch drifts from it and becomes one more variant somebody draws.",
-    },
-  },
-  create(context) {
-    if (pureHalf(context) !== "blocks") return {}
-    const check = (node, test) => {
-      const flag = statusFlagOf(test)
-      if (flag) context.report({ node, messageId: "branch", data: { flag } })
-    }
-    return {
-      ConditionalExpression(node) {
-        check(node, node.test)
-      },
-      IfStatement(node) {
-        check(node, node.test)
-      },
-      LogicalExpression(node) {
-        if (node.operator === "&&" && node.parent?.type === "JSXExpressionContainer") check(node, node.left)
-      },
-    }
-  },
-}
-
 /** The rules this law contributes to the plugin. */
 export const rules = {
   "base-props-atom": basePropsAtom,
   "base-import-pair": baseImportPair,
   "no-data-status-shape": noDataStatusShape,
-  "slot-status-through-slotview": slotStatusThroughSlotView,
 }
 
 /** Every FE canon rule is an error; existing debt is fixed before adoption. */

package/hooks-folder.mjs

@@ -90,12 +90,13 @@ const SWR_HOOKS = new Map([
 ])
 const SWR_DEFAULTS = new Map([["swr", "useSWR"], ["swr/immutable", "useSWRImmutable"], ["swr/infinite", "useSWRInfinite"], ["swr/mutation", "useSWRMutation"], ["swr/subscription", "useSWRSubscription"]])
 /**
- * The library hooks a composite hook may stand on (an explicit list, owner ruling 2026-10-16): next-intl, next/navigation,
- * react-hook-form and zustand's React entry points. A name outside the list is not a hook by its spelling.
+ * The canonical library hooks a composite hook may call (R56, FE-THEME): next-intl, next/navigation,
+ * next-themes, react-hook-form and zustand's React entry points. A name outside the list is not a hook by its spelling.
  */
 const LIBRARY_HOOKS = new Map([
   ["next-intl", new Set(["useTranslations", "useLocale", "useFormatter", "useNow", "useTimeZone", "useMessages"])],
   ["next/navigation", new Set(["useRouter", "usePathname", "useSearchParams", "useParams", "useSelectedLayoutSegment", "useSelectedLayoutSegments"])],
+  ["next-themes", new Set(["useTheme"])],
   ["react-hook-form", new Set(["useForm", "useFormContext", "useWatch", "useController", "useFieldArray", "useFormState"])],
   ["zustand", new Set(["useStore"])],
   ["zustand/react/shallow", new Set(["useShallow"])],
@@ -121,6 +122,7 @@ const importOrigin = (definition) => {
   const source = String(definition.parent.source.value)
   if (definition.parent.importKind === "type" || specifier.importKind === "type") return null
   if (source !== "react" && !SWR_HOOKS.has(source) && !LIBRARY_HOOKS.has(source)) return null
+  if (source === "next-themes" && specifier.type === "ImportDefaultSpecifier") return null
   if (specifier.type === "ImportSpecifier") return namedOrigin(source, specifier.imported.name ?? specifier.imported.value)
   if (specifier.type === "ImportDefaultSpecifier" && SWR_DEFAULTS.has(source)) return { source, name: SWR_DEFAULTS.get(source) }
   return { source, name: null }
@@ -246,7 +248,7 @@ export const hooksFolderHoldsHooksOnly = {
       defaultExport:
         "FE_HOOKS_ARE_HOOKS: export the hook as a named use* function. A default export does not identify the hook this file owns.",
       fake:
-        "FE_HOOKS_ARE_HOOKS: `{{name}}` must be a function that calls a real hook: a React, Redux or SWR hook, a listed library hook (next-intl, next/navigation, react-hook-form, zustand) or a hook of the app's own `hooks/` folders. A use* name alone does not make a reader or helper a hook.",
+        "FE_HOOKS_ARE_HOOKS: `{{name}}` must be a function that calls a real hook: a React, Redux or SWR hook, a listed library hook (next-intl, next/navigation, next-themes useTheme, react-hook-form, zustand) or a hook of the app's own `hooks/` folders. A use* name alone does not make a reader or helper a hook.",
       sharedHook:
         "`{{name}}` is a hook exported from the shared helper file. That file holds non-hook helpers; a hook there is a hook nobody will find. Give it its own `use<Name>.ts`.",
       server:

package/index.mjs

@@ -1,19 +1,14 @@
 /**
- * The front-end plugin: every law's rules, gathered once.
+ * The universal frontend plugin: every applicable law's rules, gathered once.
  *
- * A consuming repository imports THIS and nothing below it. Registering rules one by one in the
- * target's own plugin file is how the two lists drift: a law gains a rule here, nobody adds it
- * there, and the rule ships as a document. `starciFeConfig` therefore owns BOTH questions - what
- * exists and what is switched on - and every rule is an error: the repository's `eslint.config.mjs`
- * names its layout and nothing else about the law.
+ * The public factory gathers every universal rule at error. A managed repository config composes
+ * it with the selected Grammar-family factory instead of registering individual rules. Family
+ * packages consume the public generic infrastructure exports; each rule implementation has one owner.
  *
- * WHAT THIS FILE REFUSES TO DO. It does not rename anything. A rule's published name is part of the
- * law that declares it, because that name is what appears in a build log, in a disable comment and
- * in every conversation about the failure. Aliasing one here to match a target's older spelling
- * would leave two names for one rule and no way to tell which a message came from.
+ * Published IDs identify their owning law. Namespace migrations are explicit in the removed-vocabulary
+ * catalog; compatibility aliases cannot create a second owner for a rule.
  */
 import { createRequire } from "node:module"
-import { recommended as appShellRecommended, rules as appShellRules } from "./app-shell.mjs"
 import { join } from "node:path"
 import { pathToFileURL } from "node:url"
 import { recommended as brandValuesRecommended, rules as brandValuesRules } from "./brand-values.mjs"
@@ -23,16 +18,13 @@ import { recommended as classNamesRecommended, rules as classNamesRules } from "
 import { recommended as envOwnerRecommended, rules as envOwnerRules } from "./env-owner.mjs"
 import { recommended as feStackRecommended, rules as feStackRules } from "./fe-stack.mjs"
 import { recommended as fileLayoutRecommended, rules as fileLayoutRules } from "./file-layout.mjs"
-import { recommended as grammarBoundaryRecommended, rules as grammarBoundaryRules } from "./grammar-boundary.mjs"
 import { recommended as formattingRecommended, rules as formattingRules } from "./formatting.mjs"
 import { recommended as hooksFolderRecommended, rules as hooksFolderRules } from "./hooks-folder.mjs"
 import { recommended as hygieneRecommended, rules as hygieneRules } from "./hygiene.mjs"
-import { recommended as iconRecommended, rules as iconRules } from "./icon.mjs"
 import { recommended as landmarkRecommended, rules as landmarkRules } from "./landmark.mjs"
 import { recommended as listsRecommended, rules as listsRules } from "./lists.mjs"
 import { recommended as loadingRecommended, rules as loadingRules } from "./loading.mjs"
 import { recommended as lintEscapeRecommended, rules as lintEscapeRules } from "./lint-escape-hatch.mjs"
-import { recommended as menuEntriesRecommended, rules as menuEntriesRules } from "./menu-entries.mjs"
 import { recommended as namingRecommended, rules as namingRules } from "./naming.mjs"
 import { recommended as nativeControlsRecommended, rules as nativeControlsRules } from "./native-controls.mjs"
 import { recommended as nextConventionsRecommended, rules as nextConventionsRules } from "./next-conventions.mjs"
@@ -41,15 +33,12 @@ import { recommended as servedLocaleRecommended, rules as servedLocaleRules } fr
 import { recommended as drawingRecommended, rules as drawingRules } from "./drawing.mjs"
 import { recommended as sizeBudgetRecommended, rules as sizeBudgetRules } from "./size-and-state-budget.mjs"
 import { recommended as sizeGrowthRecommended, rules as sizeGrowthRules } from "./size-growth.mjs"
-import { recommended as statusColorsRecommended, rules as statusColorsRules } from "./status-colors.mjs"
 import { recommended as surfaceRulesRecommended, rules as surfaceRules } from "./surface-rules.mjs"
 import { recommended as splitRecommended, rules as splitRules } from "./the-split.mjs"
 import { recommended as tokensRecommended, rules as tokensRules } from "./tokens.mjs"
 import { recommended as transportRecommended, rules as transportRules } from "./transport.mjs"
 import { recommended as translationRecommended, rules as translationRules } from "./translation.mjs"
 import { recommended as typeSafetyRecommended, rules as typeSafetyRules } from "./type-safety.mjs"
-import { recommended as typographyRecommended, rules as typographyRules } from "./typography.mjs"
-import { recommended as vendorRecommended, rules as vendorRules } from "./vendor-boundary.mjs"
 import { recommended as projectGraphRecommended, rules as projectGraphRules } from "./project-graph.mjs"
 import { recommended as sonarParityRecommended, rules as sonarParityRules } from "./sonar-parity.mjs"
 import { buildFeConfig, buildPlainSourceConfig } from "./lib/config.mjs"
@@ -57,7 +46,6 @@ import { why } from "./lib/why.mjs"
 
 /** Each law's contribution, kept separate so a duplicate name is detectable rather than silent. */
 const CONTRIBUTIONS = [
-  { law: "app-shell", rules: appShellRules, recommended: appShellRecommended },
     { law: "project-graph", rules: projectGraphRules, recommended: projectGraphRecommended },
   { law: "brand-values", rules: brandValuesRules, recommended: brandValuesRecommended },
   { law: "client-boundary", rules: clientBoundaryRules, recommended: clientBoundaryRecommended },
@@ -70,16 +58,13 @@ const CONTRIBUTIONS = [
   { law: "env-owner", rules: envOwnerRules, recommended: envOwnerRecommended },
   { law: "fe-stack", rules: feStackRules, recommended: feStackRecommended },
   { law: "file-layout", rules: fileLayoutRules, recommended: fileLayoutRecommended },
-  { law: "grammar-boundary", rules: grammarBoundaryRules, recommended: grammarBoundaryRecommended },
   { law: "formatting", rules: formattingRules, recommended: formattingRecommended },
   { law: "hooks-folder", rules: hooksFolderRules, recommended: hooksFolderRecommended },
   { law: "hygiene", rules: hygieneRules, recommended: hygieneRecommended },
-  { law: "icon", rules: iconRules, recommended: iconRecommended },
   { law: "landmark", rules: landmarkRules, recommended: landmarkRecommended },
   { law: "lists", rules: listsRules, recommended: listsRecommended },
   { law: "loading", rules: loadingRules, recommended: loadingRecommended },
   { law: "lint-escape-hatch", rules: lintEscapeRules, recommended: lintEscapeRecommended },
-  { law: "menu-entries", rules: menuEntriesRules, recommended: menuEntriesRecommended },
   { law: "naming", rules: namingRules, recommended: namingRecommended },
   { law: "native-controls", rules: nativeControlsRules, recommended: nativeControlsRecommended },
   { law: "next-conventions", rules: nextConventionsRules, recommended: nextConventionsRecommended },
@@ -88,15 +73,12 @@ const CONTRIBUTIONS = [
   { law: "drawing", rules: drawingRules, recommended: drawingRecommended },
   { law: "size-and-state-budget", rules: sizeBudgetRules, recommended: sizeBudgetRecommended },
   { law: "size-growth", rules: sizeGrowthRules, recommended: sizeGrowthRecommended },
-  { law: "status-colors", rules: statusColorsRules, recommended: statusColorsRecommended },
   { law: "surface-rules", rules: surfaceRules, recommended: surfaceRulesRecommended },
   { law: "the-split", rules: splitRules, recommended: splitRecommended },
   { law: "tokens", rules: tokensRules, recommended: tokensRecommended },
   { law: "translation", rules: translationRules, recommended: translationRecommended },
   { law: "transport", rules: transportRules, recommended: transportRecommended },
   { law: "type-safety", rules: typeSafetyRules, recommended: typeSafetyRecommended },
-  { law: "typography", rules: typographyRules, recommended: typographyRecommended },
-  { law: "vendor-boundary", rules: vendorRules, recommended: vendorRecommended },
   { law: "sonar-parity", rules: sonarParityRules, recommended: sonarParityRecommended },
 ]
 
@@ -225,7 +207,7 @@ export const reactHooksRules = (reactHooks) => {
 }
 
 /**
- * The whole flat config of a front end: `export default starciFeConfig({ hfs: loadHfs(import.meta.url) })`.
+ * The universal portion of a frontend's flat config, composed with its selected Grammar-family factory.
  *
  * It owns nothing the repository could choose: which files are linted comes from the HFS profile (every app's and every
  * workspace package's `src/`), not which rules are on, not their level, not whether an inline comment may