@starci/eslint-canon-fe 8.4.43 → 9.1.0

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,38 +1,31 @@
 /**
- * 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"
+import { recommended as buttonIntentRecommended, rules as buttonIntentRules } from "./button-intent.mjs"
 import { recommended as clientBoundaryRecommended, rules as clientBoundaryRules } from "./client-boundary.mjs"
 import { recommended as commentsRecommended, rules as commentsRules } from "./comments.mjs"
 import { recommended as classNamesRecommended, rules as classNamesRules } from "./class-names.mjs"
 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 +34,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,9 +47,9 @@ 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: "button-intent", rules: buttonIntentRules, recommended: buttonIntentRecommended },
   { law: "client-boundary", rules: clientBoundaryRules, recommended: clientBoundaryRecommended },
   { law: "comments", rules: commentsRules, recommended: commentsRecommended },
   {
@@ -70,16 +60,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 +75,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 +209,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

package/landmark.mjs

@@ -5,9 +5,6 @@
  * application may pass children through layouts and pages normally.
  */
 
-/** Named branch owners that may provide landmark semantics. */
-export const LANDMARK_BRANCHES = new Set(["Main"])
-
 /** No custom landmark AST rule is needed; semantic ownership is enforced by the component code. */
 export const rules = {}
 

package/lib/class-text.mjs

@@ -0,0 +1,29 @@
+/** Shared static class-string readers for token discipline and Grammar scale checks. */
+import { isClassAttribute, staticText } from "./ast.mjs"
+import { isProductSource } from "./scope.mjs"
+
+/** Static strings in JSX, constants and arrays, preserving the authored class order. */
+const classText = (value) => {
+  if (value?.type === "JSXExpressionContainer") return classText(value.expression)
+  if (value?.type === "ArrayExpression") {
+    const members = value.elements.map((element) => classText(element)).filter(Boolean)
+    return members.length > 0 ? members.join(" ") : null
+  }
+  return staticText(value)
+}
+
+/** Visit class strings in product JSX, declarations and named class arrays. */
+export const classTextVisitors = (context, report) => {
+  if (!isProductSource(context)) return {}
+  return {
+    JSXAttribute(node) {
+      if (isClassAttribute(node)) report(node, classText(node.value))
+    },
+    VariableDeclarator(node) {
+      report(node, classText(node.init))
+    },
+    Property(node) {
+      if (!node.computed && node.key.type === "Identifier" && node.key.name === "classes") report(node, classText(node.value))
+    },
+  }
+}

package/lib/config.mjs

@@ -1,10 +1,8 @@
 /**
  * The one flat config of a StarCi front end.
  *
- * A repository's `eslint.config.mjs` is a managed file (R05/R16/R17), rendered by `starci app sync` as exactly:
- *
- *     import { loadHfs, starciFeConfig } from "@starci/eslint-canon-fe"
- *     export default starciFeConfig({ hfs: loadHfs(import.meta.url) })
+ * A repository's `eslint.config.mjs` is managed by `starci app sync` (R05/R16/R17). Its template composes this universal
+ * factory with the explicitly selected Grammar family's factory, passing the same HFS view to both.
  *
  * The factory owns everything else: which files are linted (the source of every app and every workspace package), typed linting on the source (`parserOptions.projectService`, so a rule asks what a node IS rather than what
  * it is called), the ignores, the linter options that make a disable comment impossible, every canon rule at `error`,
@@ -97,10 +95,11 @@ export const SLOT_FREE_RULES = Object.freeze([
   "client-no-server-import", "no-server-action", "no-dangerous-html", "response-cookie-attributes", "require-export-jsdoc", "no-vietnamese-in-source",
   "no-hardcoded-endpoint-fallback", "no-runtime-namespace", "list-item-has-key", "no-index-key", "no-inline-literal-prop-in-list", "prefer-arrow-export",
   "handler-on-prefix", "no-native-form-control", "no-native-img", "image-has-size", "no-second-i18n-stack", "html-lang-from-locale", "no-null-suspense-fallback",
-  "no-native-anchor", "no-inline-parameter-type", "no-hand-rolled-polling", "status-text-uses-soft-foreground", "no-copy-in-call", "no-alert", "no-failure-collapse",
+  "no-native-anchor", "no-inline-parameter-type", "no-hand-rolled-polling", "no-copy-in-call", "no-alert", "no-failure-collapse",
   "outcome-kinds-exhaustive", "no-await-in-loop", "prefer-code-point", "prefer-string-raw", "no-nested-conditional", "no-void-operator", "no-unused-import",
   "prefer-export-from", "no-unused-prop-types", "media-has-caption", "max-params",
-  "nested-control-variant", "no-list-panel-padding",
+  "nested-control-variant", "no-list-panel-padding", "no-app-surface-paint",
+  "button-intent-required", "button-no-variant", "destructive-confirm-in-dialog", "single-commit-per-render", "no-commit-in-collection-item",
 ])
 
 /** The source of a plain front-end tree: its `src/`. */

package/lib/drawing-scope.mjs

@@ -0,0 +1,15 @@
+/** Shared HFS scope of connected/presentational component pairs. */
+import { hfsOf } from "./hfs.mjs"
+import { fileOf, inSlot, kindOfFile, roleOfFile } from "./scope.mjs"
+
+const SPLIT_KINDS = new Set(["blocks", "pages", "layouts", "overlays"])
+
+/** The owning surface folder of the linted entry or presentation file. */
+const surfaceName = (context) => hfsOf(context).relative(fileOf(context)).split("/").slice(-2)[0]
+
+/** Whether the file belongs to an HFS owner with a connected/presentational pair. */
+export const inSplitTier = (context) => inSlot(context, "fe.components", "fe.feature") && SPLIT_KINDS.has(kindOfFile(context))
+
+/** The paired presentation file's component kind, or null outside that scope. */
+export const pureHalf = (context) =>
+  inSplitTier(context) && roleOfFile(context) === "drawing" && /^[A-Z][A-Za-z0-9]*$/.test(surfaceName(context)) ? kindOfFile(context) : null

package/lib/typed-class-values.mjs

@@ -5,7 +5,7 @@ import ts from "typescript"
 const fragments = (checker, node, seen, mode) => {
   if (!node || seen.has(node)) return []
   seen.add(node)
-  if (ts.isStringLiteralLike(node) || ts.isTemplateHead(node) || ts.isTemplateMiddle(node) || ts.isTemplateTail(node)) return [node.text]
+  if (ts.isStringLiteralLike(node) || ts.isTemplateHead(node) || ts.isTemplateMiddle(node) || ts.isTemplateTail(node)) return mode === "style-keys" ? [] : [node.text]
   if (ts.isAsExpression(node) || ts.isTypeAssertionExpression(node) || ts.isSatisfiesExpression(node) || ts.isParenthesizedExpression(node) || ts.isNonNullExpression(node)) return fragments(checker, node.expression, seen, mode)
   if (ts.isIdentifier(node) || ts.isPropertyAccessExpression(node) || ts.isElementAccessExpression(node)) {
     const symbol = ts.isElementAccessExpression(node) && ts.isStringLiteralLike(node.argumentExpression)
@@ -13,6 +13,15 @@ const fragments = (checker, node, seen, mode) => {
       : checker.getSymbolAtLocation(ts.isPropertyAccessExpression(node) ? node.name : node)
     return symbolFragments(checker, symbol, seen, mode)
   }
+  if (mode === "style-keys" && ts.isObjectLiteralExpression(node)) {
+    return node.properties.flatMap((property) => {
+      if (ts.isSpreadAssignment(property)) return fragments(checker, property.expression, seen, mode)
+      if (!ts.isPropertyAssignment(property) && !ts.isShorthandPropertyAssignment(property)) return []
+      return ts.isComputedPropertyName(property.name)
+        ? fragments(checker, property.name.expression, seen, "variant")
+        : [property.name.text]
+    })
+  }
   return fragmentChildren(node, mode).flatMap((child) => fragments(checker, child, seen, mode))
 }
 

package/lib/why.mjs

@@ -19,41 +19,46 @@
 
 /** @type {Record<string, Why>} */
 export const why = {
+  "button-intent-required": {
+    code: "FE_BUTTON_INTENT_REQUIRED",
+    en: "`<file>` renders a Button or IconButton without the command's intent.",
+    fix: "Declare intent from the command's consequence and rank so Grammar supplies its variant.",
+  },
+  "button-no-variant": {
+    code: "FE_BUTTON_NO_VARIANT",
+    en: "`<file>` chooses a Button or IconButton variant directly.",
+    fix: "Replace variant with intent and let Grammar resolve placement and visual treatment.",
+  },
+  "destructive-confirm-in-dialog": {
+    code: "FE_DESTRUCTIVE_CONFIRM_IN_DIALOG",
+    en: "`<file>` renders a final destructive press outside its confirmation dialog.",
+    fix: "Place the destructive confirm inside the same-file AlertDialog or ConfirmDialog; use entry on its trigger.",
+  },
+  "single-commit-per-render": {
+    code: "FE_SINGLE_COMMIT_PER_RENDER",
+    en: "`<file>` renders more than one commit in the same component render path.",
+    fix: "Keep the next action as commit and assign the other commands their consequence-based intents.",
+  },
+  "no-commit-in-collection-item": {
+    code: "FE_NO_COMMIT_IN_COLLECTION_ITEM",
+    en: "`<file>` repeats a commit inside a collection item render.",
+    fix: "Use alternative for the item's next action and keep the enclosing view's commit unique.",
+  },
   "nested-control-variant": {
     code: "FE_NESTED_VARIANT",
-    en: "`<file>` forces a primary field inside a Grammar surface, or paints a raw bg-surface in app CSS.",
-    fix: "Compose a Grammar surface and omit the nested field variant so its surface context supplies secondary.",
+    en: "`<file>` sets a static Grammar field variant, or forces primary Tabs inside a painted surface.",
+    fix: "Omit the field or nested Tabs variant so Grammar supplies the default from its surface context.",
+  },
+  "no-app-surface-paint": {
+    code: "FE_GRAMMAR_LAYOUT_ONLY",
+    en: "`<file>` sets paint or typography in app CSS instead of composing Grammar's published components and props.",
+    fix: "Keep app CSS layout-only and compose a painted Grammar surface such as SurfaceCard.",
   },
   "no-list-panel-padding": {
     code: "FE_LIST_PANEL_PADDING",
     en: "`<file>` adds horizontal wrapper padding to a Grammar list or its section caption, stacking the content inset.",
     fix: "Remove the wrapper padding and use ListBox inset=\"panel\" so headers, captions and rows share the panel content edge.",
   },
-  "app-shell-frame": {
-    code: "FE_APP_SHELL_FRAME",
-    en: "The app frame must use Grammar WorkspaceShell with its fixed viewport.",
-    fix: "Compose WorkspaceShell viewport=\"fixed\" and supply its header, navigation and primary slots.",
-  },
-  "no-shell-bottom-tabs": {
-    code: "FE_APP_SHELL_BOTTOM_TABS",
-    en: "Bottom tab navigation replaces the required mobile sidebar drawer.",
-    fix: "Use WorkspaceShell navigationDrawer and Sidebar presentation=\"drawer\".",
-  },
-  "navbar-control-size": {
-    code: "FE_NAVBAR_CONTROL_SIZE",
-    en: "A navbar control does not use Grammar's shared control height.",
-    fix: "Set size=\"control\" on every visible bar control.",
-  },
-  "navbar-cluster": {
-    code: "FE_NAVBAR_CLUSTER",
-    en: "Navbar action component kinds or order differ from the app-shell canon.",
-    fix: "Compose Language IconButton, theme Switch, notification IconButton and account AvatarButton in that order.",
-  },
-  "no-navbar-create": {
-    code: "FE_NAVBAR_CREATE",
-    en: "A create action is composed into the global navbar.",
-    fix: "Move the create action to the page that owns it.",
-  },
   "no-env-outside-config": {
     code: "FE_ENV_OWNER",
     en: "`<file>` reads an environment variable. Only `modules/config` may read env.",
@@ -134,11 +139,6 @@ export const why = {
     en: "`<file>` uses a raw colour/length value (`<what>`). Colour and spacing come only from grammar tokens; brand colour lives only in `brand.css`.",
     fix: "Use a grammar token class or variable; a colour value is declared only in `modules/brand/brand.css`.",
   },
-  "status-text-uses-soft-foreground": {
-    code: "FE_STYLE_TOKEN_ONLY",
-    en: "`<file>` paints text or an icon with a solid status tone (`<what>`, e.g. `text-success`). A solid tone is a background colour; used as a text colour it reads below 4.5:1 on the page background.",
-    fix: "Switch to the soft pair: `text-<tone>-soft-foreground` (with `bg-<tone>-soft` when it sits on a light surface); a solid tone is used only with `bg-<tone>` and `text-<tone>-foreground`.",
-  },
   "no-native-form-control": {
     code: "FE_NATIVE_FORM_CONTROL",
     en: "Raw `<tag>` in `<file>`. Use the grammar renderer.",
@@ -232,12 +232,12 @@ export const why = {
   "navigation-from-intl": {
     code: "FE_I18N_NAVIGATION",
     en: "`<file>` imports `Link`, `useRouter`, `usePathname` or `redirect` from Next, which does not know the locale: the path loses the `[locale]` prefix.",
-    fix: "Import from `modules/i18n/navigation`, built by next-intl from `routing.ts`.",
+    fix: "Import from the locale-aware public routes entry or shared i18n package, built from the one routing configuration.",
   },
   "no-native-anchor": {
     code: "FE_I18N_NAVIGATION",
     en: "`<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`; a `_blank` link adds `rel=\"noopener noreferrer\"`.",
+    fix: "Use the locale-aware Link with an href built by modules/routes; a _blank link adds rel=\"noopener noreferrer\".",
   },
   "use-intl-formatter": {
     code: "FE_I18N_FORMATTER",
@@ -307,12 +307,7 @@ export const why = {
   "i18n-stack-in-one-module": {
     code: "FE_I18N_PLACEMENT",
     en: "`<file>` builds a layer of the next-intl stack itself (`defineRouting`, `createNavigation`, `getRequestConfig`, `createMiddleware`). The stack is written once for the whole repo.",
-    fix: "Call the `createAppI18n` factory of the shared i18n package inside `modules/i18n/index.ts` and import the result; a single-app repo writes the stack only in that app's `modules/i18n`.",
-  },
-  "no-raw-structural-element": {
-    code: "FE_NATIVE_FORM_CONTROL",
-    en: "Raw `<tag>` in `<file>`. Page structure and text are composed from grammar components, not hand-written HTML.",
-    fix: "Replace it with the matching grammar component (`Heading`, `Text`, `SurfaceCard`, ...); if grammar lacks it, add it to grammar or the ui package instead of drawing it in place.",
+    fix: "Use the shared i18n factory; a single app keeps routing/request config in modules/i18n and navigation in modules/routes. The proxy imports routing without navigation.",
   },
   "no-app-relative-clock": {
     code: "FE_SIZE_AND_STATE_BUDGET",