@starci/eslint-canon-fe 9.8.4 → 9.8.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 9.8.5 - 2026-11-01
+
+- Added: `no-heading-above-card` (R354, `FE_HEADING_ABOVE_CARD`): a `SectionHeader` directly above a single card, or a card whose `ariaLabel` repeats the header title, is refused; several cards under one header stay legal.
+- Added: `no-selectable-tag-group` (R353, `FE_TAG_GROUP_SELECTION`): a selection prop on a Grammar `TagGroup` is refused; a filter is a `FilterButtonGroup`.
+- Added: `no-fill-command-in-header` (R352, `FE_COMMAND_FILLS_HEADER`): a Grammar `Button` with `width="fill"` in the `actions` of a `PageHeader` or the `labelEnd` of a `SurfaceCard` or `SurfaceListCard` is refused (a page or pane command hugs its label).
+- Added: `no-table-in-card` (R351, `FE_TABLE_IN_CARD`): a Grammar `DataTable` enclosed by a `SurfaceCard`, or rendered by a component of the same file that a `SurfaceCard` encloses, is refused; plain rows are a `SurfaceListCard` with the note in its `footer`. It is a slot-free surface law at error, with no inline exemption.
+- Changed: the bundled canon pins name @starci/grammar 0.20.2, eslint-grammar-core and eslint-grammar-offset-pop 0.20.2, eslint-canon-be 3.11.6, eslint-canon-fe 9.8.5, stylelint-canon 2.4.0 and hfs 4.16.5 (RELEASE_VERSION_NOT_BUMPED: the previous versions are on npm). One rule law changes (above).
+
 ## 9.8.4 - 2026-11-01
 
 - Changed: the bundled canon pins name @starci/grammar 0.20.1, eslint-grammar-core and eslint-grammar-offset-pop 0.20.1, eslint-canon-be 3.11.5, eslint-canon-fe 9.8.4, stylelint-canon 2.4.0 and hfs 4.16.4 (RELEASE_VERSION_NOT_BUMPED: the previous versions are on npm). No rule changes.
@@ -29,7 +37,7 @@
 
 ## 9.6.7 - 2026-10-31
 
-- Changed: the bundled runtime copies follow @starci/hfs 4.14.0 (R334 one style, `ruleParams.be.sqlPassThrough`) and the canon pins name the cohort hfs 4.14.0, eslint-canon-be 3.11.0, eslint-canon-fe 9.6.7, @starci/grammar, eslint-grammar-core and eslint-grammar-offset-pop 0.16.6, with @starci/ai-router 0.5.0; no rule changed.
+- Changed: the bundled runtime copies follow @starci/hfs 4.14.0 (R334 one style, `ruleParams.be.sqlPassThrough`) and the canon pins name the cohort hfs 4.14.0, eslint-canon-be 3.11.0, eslint-canon-fe 9.6.7, @starci/grammar, eslint-grammar-core and eslint-grammar-offset-pop 0.16.6, with @starci/ai-router 0.5.0; the status rule changes (below).
 
 ## 9.6.6 - 2026-10-31
 

package/README.md

@@ -41,9 +41,10 @@ family that publishes the shared HeroUI surface and field API: `nested-control-v
 variants on layer-aware fields and the pill (`variant="secondary"`) on Tabs, which are the underline bar (`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, a `Pane` or a `PaneSection` included (`FE_LIST_PANEL_PADDING`), and
+within the nearest painted surface, a `Pane` or a `PaneSection` included (`FE_LIST_PANEL_PADDING`),
 `no-hand-built-panes` refuses a multi-pane frame drawn by hand, a vertical divider as a column seam or
-columns inside a joined card, where `PaneGrid` owns both (`FE_HAND_BUILT_PANES`). The R65 budget law's
+columns inside a joined card, where `PaneGrid` owns both (`FE_HAND_BUILT_PANES`), and
+`no-heading-above-card` refuses a `SectionHeader` above a single card (`FE_HEADING_ABOVE_CARD`), `no-selectable-tag-group` refuses a selection on a `TagGroup` (`FE_TAG_GROUP_SELECTION`), `no-fill-command-in-header` refuses a `width="fill"` Button in a page or card header slot (`FE_COMMAND_FILLS_HEADER`), and `no-table-in-card` refuses a `DataTable` inside a `SurfaceCard`, where a `SurfaceListCard` with its note in `footer` holds plain rows (`FE_TABLE_IN_CARD`). The R65 budget law's
 `no-app-relative-clock` leaves live relative time and countdowns to Grammar's shared clock.
 
 The spacing law (R350) leaves every distance to Grammar: `no-spacing-utility` refuses a padding, margin, gap

package/dist/lib/config.js

@@ -104,7 +104,7 @@ export const SLOT_FREE_RULES = Object.freeze([
     "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", "no-hand-built-panes", "no-app-surface-paint", "divider-full-bleed", "control-height", "selection-fill-no-check", "no-grammar-shim",
+    "nested-control-variant", "no-list-panel-padding", "no-hand-built-panes", "no-table-in-card", "no-heading-above-card", "no-selectable-tag-group", "no-fill-command-in-header", "no-app-surface-paint", "divider-full-bleed", "control-height", "selection-fill-no-check", "no-grammar-shim",
     "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/dist/lib/why.d.ts

@@ -42,6 +42,26 @@ export declare const why: {
         en: string;
         fix: string;
     };
+    "no-fill-command-in-header": {
+        code: string;
+        en: string;
+        fix: string;
+    };
+    "no-selectable-tag-group": {
+        code: string;
+        en: string;
+        fix: string;
+    };
+    "no-heading-above-card": {
+        code: string;
+        en: string;
+        fix: string;
+    };
+    "no-table-in-card": {
+        code: string;
+        en: string;
+        fix: string;
+    };
     "button-intent-required": {
         code: string;
         en: string;

package/dist/lib/why.js

@@ -42,6 +42,26 @@ export const why = {
         en: "`<file>` draws a multi-pane frame by hand: a vertical Divider between columns of a flex row, or a flex row of columns inside a joined SurfaceCard.",
         fix: "Compose the columns as Panes of a PaneGrid (areas per breakpoint, collapse=\"drawer\" for a side pane), mounted as Page chrome=\"panes\" on a tabbed app page.",
     },
+    "no-fill-command-in-header": {
+        code: "FE_COMMAND_FILLS_HEADER",
+        en: "`<file>` stretches a command in a page or card header (`PageHeader actions`, `labelEnd`) with `width=\"fill\"`.",
+        fix: "A page or pane command hugs its label and sits at the end of its header row: drop `width`. `width=\"fill\"` is for a form submit, an auth panel and a phone action bar.",
+    },
+    "no-selectable-tag-group": {
+        code: "FE_TAG_GROUP_SELECTION",
+        en: "`<file>` gives a TagGroup a selection (`selectionMode`, `selectedIds`, `onSelectionChange`) to use it as a filter.",
+        fix: "A TagGroup holds values the user entered; peer values that filter a collection are a FilterButtonGroup (sm toggle buttons on one row, the rest behind a +n search list).",
+    },
+    "no-heading-above-card": {
+        code: "FE_HEADING_ABOVE_CARD",
+        en: "`<file>` puts a SectionHeader directly above a single SurfaceCard, SurfaceListCard or SurfaceAccordionCard, or gives the card an ariaLabel that repeats the header's title.",
+        fix: "A card has a label by design: move the title to the card's label, the count to fact, the action to labelEnd and the note to footer.",
+    },
+    "no-table-in-card": {
+        code: "FE_TABLE_IN_CARD",
+        en: "`<file>` puts a DataTable inside a SurfaceCard (directly, or in a component of the file that a SurfaceCard encloses).",
+        fix: "Plain rows with a few facts are a SurfaceListCard of ListRow with the label outside and the note in its footer; a comparison table sits in its section with no card around it.",
+    },
     "button-intent-required": {
         code: "FE_BUTTON_INTENT_REQUIRED",
         en: "`<file>` renders a Button or IconButton without the command's intent.",

package/dist/surface-rules.d.ts

@@ -9,11 +9,23 @@ export declare const noListPanelPadding: import("./lib/rule.js").Rule<"padding",
 export declare const dividerFullBleed: import("./lib/rule.js").Rule<"padding", []>;
 /** A multi-pane frame is a PaneGrid: a vertical divider between columns, or columns inside a joined card, is a pane frame drawn by hand. */
 export declare const noHandBuiltPanes: import("./lib/rule.js").Rule<"seam" | "joined", []>;
+/** A table is not placed in a SurfaceCard: plain rows are a SurfaceListCard with the note in its footer. */
+export declare const noTableInCard: import("./lib/rule.js").Rule<"table", []>;
+/** A page or pane command hugs its label and sits at the end of its header row: a Button in a header slot is never `width="fill"`. */
+export declare const noFillCommandInHeader: import("./lib/rule.js").Rule<"fill", []>;
+/** A TagGroup holds values the user entered (remove, reorder); a filter over a collection is a FilterButtonGroup. */
+export declare const noSelectableTagGroup: import("./lib/rule.js").Rule<"selection", []>;
+/** A card has a label by design: a SectionHeader above it is a hand heading. */
+export declare const noHeadingAboveCard: import("./lib/rule.js").Rule<"name" | "header", []>;
 /** The surface laws ship at error in every composing source tree. */
 export declare const rules: {
     "divider-full-bleed": import("./lib/rule.js").Rule<"padding", []>;
     "nested-control-variant": import("./lib/rule.js").Rule<"variant" | "tabs", []>;
     "no-hand-built-panes": import("./lib/rule.js").Rule<"seam" | "joined", []>;
+    "no-fill-command-in-header": import("./lib/rule.js").Rule<"fill", []>;
+    "no-selectable-tag-group": import("./lib/rule.js").Rule<"selection", []>;
+    "no-heading-above-card": import("./lib/rule.js").Rule<"name" | "header", []>;
+    "no-table-in-card": import("./lib/rule.js").Rule<"table", []>;
     "no-list-panel-padding": import("./lib/rule.js").Rule<"padding", []>;
     "no-app-surface-paint": import("./lib/rule.js").Rule<"surface", []>;
 };

package/dist/surface-rules.js

@@ -595,7 +595,201 @@ export const noHandBuiltPanes = defineRule({
         };
     },
 });
+/** The capitalised same-file component a node renders inside (a declaration, a variable's function, or a wrapped one), or null. */
+const componentNameOf = (node) => {
+    for (let current = node.parent; current; current = current.parent) {
+        if (current.type === "FunctionDeclaration") {
+            if (current.id !== null && /^[A-Z]/.test(current.id.name))
+                return current.id.name;
+            continue;
+        }
+        if (current.type !== "ArrowFunctionExpression" && current.type !== "FunctionExpression")
+            continue;
+        const holder = current.parent.type === "CallExpression" ? current.parent.parent : current.parent;
+        if (holder.type === "VariableDeclarator" && holder.id.type === "Identifier" && /^[A-Z]/.test(holder.id.name))
+            return holder.id.name;
+    }
+    return null;
+};
+/** True when a SurfaceCard element encloses the node, or a component of this file that renders the node is itself rendered inside one. */
+const standsInCard = (context, node, seen) => {
+    for (let current = node.parent; current; current = current.parent) {
+        if (current.type !== "JSXElement")
+            continue;
+        const name = grammarName(context, current.openingElement.name);
+        if (name?.length === 1 && name[0] === "SurfaceCard")
+            return true;
+    }
+    const component = componentNameOf(node);
+    if (component === null || seen.has(component))
+        return false;
+    seen.add(component);
+    const usages = [];
+    walk(context.sourceCode, context.sourceCode.ast, (visited) => {
+        if (visited.type === "JSXOpeningElement" && visited.name.type === "JSXIdentifier" && visited.name.name === component)
+            usages.push(visited);
+    });
+    return usages.some((usage) => standsInCard(context, usage, seen));
+};
+/** A table is not placed in a SurfaceCard: plain rows are a SurfaceListCard with the note in its footer. */
+export const noTableInCard = defineRule({
+    meta: {
+        type: "problem",
+        docs: { description: "A DataTable is not placed inside a SurfaceCard." },
+        schema: [],
+        messages: {
+            table: "FE_TABLE_IN_CARD: this DataTable stands inside a SurfaceCard (here or in the component that renders it). Plain rows with a few facts are a `SurfaceListCard` of `ListRow` with the label outside and the note in its `footer`; a table that compares records across many columns sits in its section with its label outside, with no card around it.",
+        },
+    },
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                const name = grammarName(context, node.name);
+                if (name?.length !== 1 || name[0] !== "DataTable")
+                    return;
+                if (standsInCard(context, node, new Set()))
+                    context.report({ node, messageId: "table" });
+            },
+        };
+    },
+});
+/** The header slots whose command hugs its label: `PageHeader` `actions` and the `labelEnd` of a card or a list card. */
+const HEADER_SLOTS = new Map([
+    ["PageHeader", ["actions"]],
+    ["SurfaceCard", ["labelEnd"]],
+    ["SurfaceListCard", ["labelEnd"]],
+]);
+/** True when the Button's own opening element sets `width="fill"`. */
+const fillsWidth = (context, opening) => opening.attributes.some((entry) => propStrings(context, entry, "width", "variant").some((value) => value.text === "fill"));
+/** The header slot (`PageHeader actions`, `labelEnd`) a node is written in, or null. */
+const headerSlotOf = (context, node) => {
+    for (let current = node.parent; current; current = current.parent) {
+        if (current.type !== "JSXAttribute" || current.name.type !== "JSXIdentifier")
+            continue;
+        const owner = current.parent;
+        if (owner.type !== "JSXOpeningElement")
+            continue;
+        const name = grammarName(context, owner.name);
+        if (name?.length === 1 && name[0] !== undefined && HEADER_SLOTS.get(name[0])?.includes(current.name.name) === true)
+            return `${name[0]} ${current.name.name}`;
+    }
+    return null;
+};
+/** A page or pane command hugs its label and sits at the end of its header row: a Button in a header slot is never `width="fill"`. */
+export const noFillCommandInHeader = defineRule({
+    meta: {
+        type: "problem",
+        docs: { description: "A command in a page or card header hugs its label." },
+        schema: [],
+        messages: {
+            fill: "FE_COMMAND_FILLS_HEADER: this Button is `width=\"fill\"` in {{slot}}. A page or pane command hugs its label and sits at the end of its header row; `width=\"fill\"` is for a form submit, an auth panel and a phone action bar (`PinnedActionBar`). Drop `width`.",
+        },
+    },
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                const name = grammarName(context, node.name);
+                if (name?.length !== 1 || name[0] !== "Button" || !fillsWidth(context, node))
+                    return;
+                const slot = headerSlotOf(context, node);
+                if (slot !== null)
+                    context.report({ node, messageId: "fill", data: { slot } });
+            },
+        };
+    },
+});
+/** The props that made a TagGroup a selectable filter. */
+const TAG_SELECTION_PROPS = new Set(["selectionMode", "selectedIds", "defaultSelectedIds", "onSelectionChange"]);
+/** A TagGroup holds values the user entered (remove, reorder); a filter over a collection is a FilterButtonGroup. */
+export const noSelectableTagGroup = defineRule({
+    meta: {
+        type: "problem",
+        docs: { description: "A TagGroup has no selection: a filter over a collection is a FilterButtonGroup." },
+        schema: [],
+        messages: {
+            selection: "FE_TAG_GROUP_SELECTION: a TagGroup holds values the user entered, to remove or to order, and has no selection. Peer values that filter a collection that stays in place are a `FilterButtonGroup` (`sm` toggle buttons on one row, the rest behind a \"+n\" search list).",
+        },
+    },
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                const name = grammarName(context, node.name);
+                if (name?.length !== 1 || name[0] !== "TagGroup")
+                    return;
+                for (const entry of node.attributes) {
+                    if (entry.type === "JSXAttribute" && entry.name.type === "JSXIdentifier" && TAG_SELECTION_PROPS.has(entry.name.name))
+                        context.report({ node: entry, messageId: "selection" });
+                }
+            },
+        };
+    },
+});
+/** The bounded surfaces that carry their own label. */
+const LABELLED_CARDS = new Set(["SurfaceCard", "SurfaceListCard", "SurfaceAccordionCard"]);
+/** The source text of a prop value, or null when the prop is absent: `"a"` and `{"a"}` read the same, an expression reads as written. */
+const propText = (context, opening, name) => {
+    const attribute = opening.attributes.find((entry) => entry.type === "JSXAttribute" && entry.name.type === "JSXIdentifier" && entry.name.name === name);
+    if (attribute === undefined || attribute.type !== "JSXAttribute" || attribute.value === null)
+        return null;
+    const value = attribute.value;
+    if (value.type === "Literal")
+        return String(value.value);
+    if (value.type === "JSXExpressionContainer" && value.expression.type !== "JSXEmptyExpression") {
+        const expression = value.expression;
+        return expression.type === "Literal" ? String(expression.value) : context.sourceCode.getText(expression);
+    }
+    return null;
+};
+/** The element children of a JSX parent, whitespace-only text and empty expressions left out. */
+const meaningfulChildren = (parent) => parent.children.filter((child) => !(child.type === "JSXText" && child.value.trim() === "") && !(child.type === "JSXExpressionContainer" && child.expression.type === "JSXEmptyExpression"));
+/** A card has a label by design: a SectionHeader above it is a hand heading. */
+export const noHeadingAboveCard = defineRule({
+    meta: {
+        type: "problem",
+        docs: { description: "A SectionHeader directly above a single card is a hand heading: the card has a label." },
+        schema: [],
+        messages: {
+            header: "FE_HEADING_ABOVE_CARD: this SectionHeader is directly followed by a single card, and a card has a label by design. Move the title to the card's `label`, the count to `fact`, the action to `labelEnd` and the note to `footer`. Several cards under one header stay legal.",
+            name: "FE_HEADING_ABOVE_CARD: this card's `ariaLabel` repeats the title of the SectionHeader above it. Give the card that title as its `label` (count in `fact`, action in `labelEnd`, note in `footer`) and drop the header.",
+        },
+    },
+    create(context) {
+        const check = (parent) => {
+            const children = meaningfulChildren(parent);
+            children.forEach((child, index) => {
+                if (child.type !== "JSXElement")
+                    return;
+                const header = grammarName(context, child.openingElement.name);
+                if (header?.length !== 1 || header[0] !== "SectionHeader")
+                    return;
+                const cards = [];
+                for (let next = index + 1; next < children.length; next += 1) {
+                    const sibling = children[next];
+                    if (sibling === undefined || sibling.type !== "JSXElement")
+                        break;
+                    const name = grammarName(context, sibling.openingElement.name);
+                    if (name?.length !== 1 || name[0] === undefined || !LABELLED_CARDS.has(name[0]))
+                        break;
+                    cards.push(sibling);
+                }
+                if (cards.length === 1)
+                    context.report({ node: child.openingElement, messageId: "header" });
+                const title = propText(context, child.openingElement, "title");
+                if (title === null)
+                    return;
+                for (const card of cards) {
+                    if (propText(context, card.openingElement, "ariaLabel") === title)
+                        context.report({ node: card.openingElement, messageId: "name" });
+                }
+            });
+        };
+        return {
+            JSXElement: check,
+            JSXFragment: check,
+        };
+    },
+});
 /** The surface laws ship at error in every composing source tree. */
-export const rules = { "divider-full-bleed": dividerFullBleed, "nested-control-variant": nestedControlVariant, "no-hand-built-panes": noHandBuiltPanes, "no-list-panel-padding": noListPanelPadding, "no-app-surface-paint": noAppSurfacePaint };
+export const rules = { "divider-full-bleed": dividerFullBleed, "nested-control-variant": nestedControlVariant, "no-hand-built-panes": noHandBuiltPanes, "no-fill-command-in-header": noFillCommandInHeader, "no-selectable-tag-group": noSelectableTagGroup, "no-heading-above-card": noHeadingAboveCard, "no-table-in-card": noTableInCard, "no-list-panel-padding": noListPanelPadding, "no-app-surface-paint": noAppSurfacePaint };
 /** No app can lower or omit a surface law. */
 export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]));

package/docs/surface-rules.md

@@ -74,3 +74,91 @@ const Frame = () => (
   </Page>
 )
 ```
+
+## `starci-fe/no-table-in-card`
+
+Finding code: `FE_TABLE_IN_CARD` (R351). A `DataTable` is not placed in a `SurfaceCard`. Plain rows with a few facts are a `SurfaceListCard` of `ListRow` with the label outside and the note in its `footer`; a table that compares records across many columns sits in its section with no card around it. The rule reads the file: a Grammar `DataTable` enclosed by a Grammar `SurfaceCard` element is a finding, and so is a `DataTable` rendered by a component of the same file (a declaration, a variable's function, a `memo` or `forwardRef` wrapper, followed through other components of the file) that a `SurfaceCard` encloses. A card in another file that renders a table component is judged where the card is written. There is no inline exemption; a table the owner rules complex enough to sit in a card is named in this rule.
+
+Invalid:
+
+```tsx
+import { SurfaceCard, DataTable } from "@starci/grammar/core"
+const Rules = () => (
+  <SurfaceCard label="Rules" headingLevel={2}>
+    <Text>{description}</Text>
+    <DataTable label="Rules" columns={columns} rows={rows} renderCell={renderCell} emptyContent={null} />
+    <Text>{footnote}</Text>
+  </SurfaceCard>
+)
+```
+
+Valid:
+
+```tsx
+import { SurfaceListCard, ListRow } from "@starci/grammar/core"
+const Rules = () => (
+  <SurfaceListCard label="Rules" footer={footnote}>
+    {rules.map((rule) => <ListRow key={rule.id} title={rule.title} description={rule.summary} />)}
+  </SurfaceListCard>
+)
+```
+
+## `starci-fe/no-fill-command-in-header`
+
+Finding code: `FE_COMMAND_FILLS_HEADER` (R352). A page or pane command hugs its label and sits at the end of its header row: a Grammar `Button` with `width="fill"` written in the `actions` of a `PageHeader` or in the `labelEnd` of a `SurfaceCard` or `SurfaceListCard` is refused. `width="fill"` is for a form submit, an auth panel and a phone action bar (`PinnedActionBar`); the rule judges the header slots only, since a form, an auth panel and a phone action bar are not decidable from the file.
+
+Invalid:
+
+```tsx
+import { PageHeader, Button } from "@starci/grammar/core"
+const Head = () => <PageHeader title="Agents" actions={<Button intent="commit" width="fill">Add agent</Button>} />
+```
+
+Valid:
+
+```tsx
+import { PageHeader, Button } from "@starci/grammar/core"
+const Head = () => <PageHeader title="Agents" actions={<Button intent="commit">Add agent</Button>} />
+```
+
+## `starci-fe/no-selectable-tag-group`
+
+Finding code: `FE_TAG_GROUP_SELECTION` (R353). A Grammar `TagGroup` holds values the user entered, to remove or to order, and has no selection: `selectionMode`, `selectedIds`, `defaultSelectedIds` and `onSelectionChange` on it are refused. Peer values that filter a collection that stays in place are a `FilterButtonGroup`.
+
+Invalid:
+
+```tsx
+import { TagGroup } from "@starci/grammar/core"
+const Filter = () => <TagGroup label="Team" items={items} selectionMode="single" selectedIds={[team]} onSelectionChange={pick} />
+```
+
+Valid:
+
+```tsx
+import { FilterButtonGroup } from "@starci/grammar/core"
+const Filter = () => <FilterButtonGroup label="Team" options={options} value={team} onValueChange={pick} />
+```
+
+## `starci-fe/no-heading-above-card`
+
+Finding code: `FE_HEADING_ABOVE_CARD` (R354). A card has a label by design (ruling `card-carries-its-own-label`), so a hand heading above it is wrong. A Grammar `SectionHeader` directly followed, in the same parent, by one `SurfaceCard`, `SurfaceListCard` or `SurfaceAccordionCard` is refused, and so is a card whose `ariaLabel` is the header's `title`. Several cards under one header stay legal, and a header followed by anything else is not judged. The fix moves the title to the card's `label`, the count to `fact`, the action to `labelEnd` and the note to `footer`.
+
+Invalid:
+
+```tsx
+import { SectionHeader, SurfaceListCard } from "@starci/grammar/core"
+const Rules = () => (
+  <section>
+    <SectionHeader title="Rules" count={3} action={add} />
+    <SurfaceListCard ariaLabel="Rules">{rows}</SurfaceListCard>
+  </section>
+)
+```
+
+Valid:
+
+```tsx
+import { SurfaceListCard } from "@starci/grammar/core"
+const Rules = () => <SurfaceListCard label="Rules" fact="3" labelEnd={add} footer={note}>{rows}</SurfaceListCard>
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starci/eslint-canon-fe",
-  "version": "9.8.4",
+  "version": "9.8.5",
   "description": "Universal front-end lint laws for TypeScript and Next.js, independent of the selected Grammar family.",
   "type": "module",
   "license": "MIT",

package/runtime/knowledge/hfs/canon-pins.yaml

@@ -31,35 +31,35 @@ pins:
     source: packages/event-stream/package.json
     why: 'the one server-sent-events client of every front end (fe-stack event-stream, owner:event-stream-package): the transport client layer (modules/api/sse/clients) creates one instance for the app with the bearer token source and the stream operations follow on it; it carries Last-Event-ID resume, the capped doubling backoff, the heartbeat timeout, the single 401 renewal and the useSWRSubscription adapter, so no app keeps a hand-written reader.'
   '@starci/grammar':
-    version: 0.20.1
+    version: 0.20.2
     group: starci
     install: registry
     side: fe
     source: packages/grammar/package.json
     why: 'the grammar front ends read: the brand layer sets `--font-sans` and `--font-mono` and the grammar reads them; it carries the Input tel kind, the copyable and read-only Input, the IconButton disclosure props and count badge, ChatBubble, FillViewport, Textarea mentions and Enter-to-send, the leading PrimaryRailLayout rail, the plate-less Image, ListRow, the soft Alert, Progress steps, the floating primary IconButton, FlowGraph, the STATE-8 loading views and the bordered selectable TagGroup chips. The runtime source version wins for a @starci package.'
   '@starci/eslint-canon-be':
-    version: 3.11.5
+    version: 3.11.6
     group: starci
     install: registry
     side: be
     source: packages/eslint-canon-be/package.json
     why: 'the back-end ESLint canon: `loadHfs(import.meta.url)` of be/eslint.config.mjs finds the app-root hfs.json (kind app) and gives every linted file the view of the be side, and the project graph is built per side; its bundled runtime copies (slots, canon-pins, failure codes, the architecture machine) put .starcistacks and .sops.yaml at the app root; `starciBeConfig({ hfs: loadHfs(import.meta.url) })` is the typed factory and the BE-CONVENTION laws are its rules.'
   '@starci/eslint-canon-fe':
-    version: 9.8.4
+    version: 9.8.5
     group: starci
     install: registry
     side: fe
     source: packages/eslint-canon-fe/package.json
     why: 'the front-end ESLint canon: `loadHfs(import.meta.url)` of fe/eslint.config.mjs finds the app-root hfs.json (kind app) and gives every linted file the view of the fe side, and the project graph is built per side; its bundled runtime copies (slots, canon-pins, failure codes, the architecture machine) put .starcistacks and .sops.yaml at the app root; the front end has no tests (FE_NO_TESTS R97 in hfs) and no-vietnamese-in-source (R91) applies.'
   '@starci/eslint-grammar-core':
-    version: 0.20.1
+    version: 0.20.2
     group: starci
     install: registry
     side: fe
     source: packages/eslint-grammar-core/package.json
     why: 'the StarCi Grammar component API lint, versioned with @starci/grammar; front ends compose this family package with the universal FE canon.'
   '@starci/eslint-grammar-offset-pop':
-    version: 0.20.1
+    version: 0.20.2
     group: starci
     install: registry
     side: fe
@@ -106,7 +106,7 @@ pins:
     source: packages/ai-router/package.json
     why: 'the AI pool router of a back end: a NestJS module that routes OpenAI-compatible chat, stream and embeddings calls across keys, models and providers, with @starci/ai-router/testing for its specs; @starci/jest-preset compiles it as an ESM-only dependency.'
   '@starci/hfs':
-    version: 4.16.4
+    version: 4.16.5
     group: starci
     install: registry
     side: both