@starci/eslint-canon-fe 9.2.0 → 9.4.0

package/lists.mjs

@@ -1,193 +0,0 @@
-/**
- * The rules that hold `lists.md` (HFS R65 `FE_SIZE_AND_STATE_BUDGET`, sub-check `FE_LIST_KEY`).
- *
- * A LIST IS ITEMS WITH IDENTITY. React reconciles a rendered list by `key`: the key is how it knows
- * that the third row is still the third row after the first was deleted. With no key React falls
- * back to position, with an index key it says position is identity, and either way a deleted row
- * hands its state (an open menu, a half-typed input, a focus ring) to its neighbour. Nothing fails a
- * type check and the bug appears only on the second interaction, on a real list.
- *
- * WHAT COUNTS AS A LIST. A `.map` callback that returns JSX. A static array written in place
- * (`[0, 1, 2].map(...)`) or a callback that ignores its item (`(_, index) => ...`, a skeleton) has no identity to lose, so an index key there is fine.
- *
- * THE MEMO TAX. A component prop written as `{{ ... }}` or `[...]` inside a `.map` callback is a new
- * object per row per render, so `memo` on the row never hits and the whole list re-renders on every
- * keystroke of its parent. Hoist the constant, or build it once above the map.
- */
-
-import { attribute, attributeValue, calleeName, isFunction, mentions } from "./lib/ast.mjs"
-
-/** `.map(callback)` where the callback is written inline; the call node, else null. */
-const mapCallback = (call) => {
-  if (call.type !== "CallExpression" || call.callee.type !== "MemberExpression" || call.callee.computed) return null
-  if (call.callee.property.type !== "Identifier" || call.callee.property.name !== "map") return null
-  const receiver = calleeName(call.callee.object)
-  if (receiver !== null && /(?:^|\.)Children$/.test(receiver)) return null
-  const callback = call.arguments[0]
-  return callback && isFunction(callback) ? callback : null
-}
-
-/** The JSX a callback returns: its expression body, or the value of each of its own `return` statements. */
-const returnedJsx = (callback) => {
-  const found = []
-  const take = (node) => {
-    if (!node) return
-    if (node.type === "JSXElement" || node.type === "JSXFragment") found.push(node)
-    else if (node.type === "ConditionalExpression") {
-      take(node.consequent)
-      take(node.alternate)
-    } else if (node.type === "LogicalExpression") take(node.right)
-  }
-  if (callback.body.type !== "BlockStatement") {
-    take(callback.body)
-    return found
-  }
-  const scan = (node) => {
-    if (!node || typeof node.type !== "string") return
-    if (node.type === "ReturnStatement") return take(node.argument)
-    if (node.type === "BlockStatement") node.body.forEach(scan)
-    else if (node.type === "IfStatement") {
-      scan(node.consequent)
-      scan(node.alternate)
-    } else if (node.type === "SwitchStatement") node.cases.forEach((entry) => entry.consequent.forEach(scan))
-    else if (node.type === "TryStatement") {
-      scan(node.block)
-      scan(node.handler?.body)
-    }
-  }
-  scan(callback.body)
-  return found
-}
-
-/**
- * True when the rows have no identity to lose: the receiver is an array written in place, or the callback
- * ignores the item (`(_, index) => ...`), which is how a skeleton or a placeholder count is rendered.
- */
-const isPositional = (call, callback) => {
-  if (call.callee.object.type === "ArrayExpression") return true
-  const item = callback.params[0]
-  return Boolean(item) && item.type === "Identifier" && item.name.startsWith("_")
-}
-
-// -- LISTS-1 ---------------------------------------------------------------------------------------
-
-/** Every element a `.map` callback returns carries a `key`. */
-export const listItemHasKey = {
-  meta: {
-    type: "problem",
-    docs: { description: "An element returned from `.map` carries a `key`." },
-    schema: [],
-    messages: {
-      missing:
-        "This element is returned from `.map` with no `key`. React then identifies rows by position, so deleting or reordering one hands its state (an open menu, typed text, focus) to its neighbour. Give it a stable key from the data: `key={row.id}`.",
-      fragment:
-        "A `<>...</>` returned from `.map` cannot carry a key. Use `<Fragment key={...}>` (import `Fragment` from `react`) so each row has an identity.",
-    },
-  },
-  create(context) {
-    return {
-      CallExpression(call) {
-        const callback = mapCallback(call)
-        if (!callback) return
-        for (const element of returnedJsx(callback)) {
-          if (element.type === "JSXFragment") context.report({ node: element, messageId: "fragment" })
-          else if (!attribute(element.openingElement, "key")) context.report({ node: element.openingElement, messageId: "missing" })
-        }
-      },
-    }
-  },
-}
-
-// -- LISTS-2 ---------------------------------------------------------------------------------------
-
-/** The key is never the position, and never made up on every render. */
-export const noIndexKey = {
-  meta: {
-    type: "problem",
-    docs: { description: "A list key is stable data identity, never the map index or a random value." },
-    schema: [],
-    messages: {
-      index:
-        "`key` is built from the `.map` index. The index is the row's position, not its identity: after a delete or a reorder the wrong row keeps the state. Use an id the data carries (`key={row.id}`).",
-      random:
-        "`key` is generated during render (`Math.random`, `Date.now`, `crypto.randomUUID`). A new key on every render remounts every row, throwing away its state and its DOM. Use an id the data carries.",
-    },
-  },
-  create(context) {
-    const source = context.sourceCode ?? context.getSourceCode()
-    return {
-      CallExpression(call) {
-        const callback = mapCallback(call)
-        if (!callback) return
-        const indexParam = callback.params[1]
-        const indexName = indexParam && indexParam.type === "Identifier" ? indexParam.name : null
-        for (const element of returnedJsx(callback)) {
-          if (element.type !== "JSXElement") continue
-          const key = attribute(element.openingElement, "key")
-          const value = attributeValue(key)
-          if (!value) continue
-          const text = source.getText(value)
-          if (/\b(?:Math\.random|Date\.now|randomUUID|nanoid|uuid)\b/.test(text)) {
-            context.report({ node: key, messageId: "random" })
-          } else if (indexName && !isPositional(call, callback) && mentions(source, value, indexName)) {
-            context.report({ node: key, messageId: "index" })
-          }
-        }
-      },
-    }
-  },
-}
-
-// -- LISTS-3 ---------------------------------------------------------------------------------------
-
-/** True for `<Component>` and `<a.B>`, false for a DOM tag: only a component can be memoised. */
-const isComponentTag = (opening) => {
-  if (opening.name.type === "JSXMemberExpression") return true
-  return opening.name.type === "JSXIdentifier" && /^[A-Z]/.test(opening.name.name)
-}
-
-/** True when the nearest function around `node` is a `.map` callback. */
-const insideMapCallback = (node) => {
-  for (let current = node.parent; current; current = current.parent) {
-    if (!isFunction(current)) continue
-    return current.parent?.type === "CallExpression" && current.parent.arguments[0] === current && mapCallback(current.parent) === current
-  }
-  return false
-}
-
-/** A component in a mapped list gets no object or array literal for a prop. */
-export const noInlineLiteralPropInList = {
-  meta: {
-    type: "problem",
-    docs: { description: "No object or array literal as a prop of a component rendered inside `.map`." },
-    schema: [],
-    messages: {
-      literal:
-        "`{{prop}}` is an object or array literal written inside `.map`: a new value per row per render, so a memoised row never hits and the whole list re-renders on every parent update. Hoist it to a constant above the component, or build it once before the map.",
-    },
-  },
-  create(context) {
-    return {
-      JSXAttribute(node) {
-        const opening = node.parent
-        if (!opening || opening.type !== "JSXOpeningElement" || !isComponentTag(opening)) return
-        if (node.name.type !== "JSXIdentifier" || node.name.name === "key") return
-        const value = attributeValue(node)
-        if (!value || (value.type !== "ObjectExpression" && value.type !== "ArrayExpression")) return
-        if (value.type === "ArrayExpression" && value.elements.length === 0) return
-        if (!insideMapCallback(node)) return
-        context.report({ node, messageId: "literal", data: { prop: node.name.name } })
-      },
-    }
-  },
-}
-
-/** The rules this law contributes to the plugin. */
-export const rules = {
-  "list-item-has-key": listItemHasKey,
-  "no-index-key": noIndexKey,
-  "no-inline-literal-prop-in-list": noInlineLiteralPropInList,
-}
-
-/** Every rule is an error. */
-export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]))

package/loading.mjs

@@ -1,156 +0,0 @@
-/**
- * The rules that hold `loading.md`.
- *
- * Three shapes of the same mistake: a second tree describing the first. A twin component, a
- * ready-made placeholder handed in as a prop, and a ternary picking between two different
- * components at a call site. Each is correct on the day it is written and wrong the first time the
- * real shape changes.
- *
- * WHY THIS NEEDS RULES AT ALL, when so much of this canon is held by types. A resting shape has no
- * assertion to fail: it is not wrong in a way a compiler or a test can see, it is wrong on screen,
- * and only for the second somebody happens to be watching. That is exactly the class of defect a
- * lint rule is for - the one nothing else will ever report.
- */
-
-import { classOf, fileOf, isComponentFile } from "./lib/scope.mjs"
-
-/** Product component source these rules govern: a component owner's file, and not a spec (a placeholder in a test fixture is a fixture, not a second tree). */
-const isGoverned = (context) => isComponentFile(context)
-
-/** A flag that means "waiting", in the spellings this codebase uses. */
-const WAITING_FLAG = /\bis(?:Loading|Skeleton|Pending)\b/
-
-/** The name of a component whose whole job is to mirror another one's shape. */
-const TWIN_NAME = /^[A-Za-z0-9]*Skeleton$/
-
-/** JSX element name, including `Foo.Bar`. */
-const jsxElementName = (opening) => {
-  const name = opening && opening.name
-  if (!name) return null
-  if (name.type === "JSXIdentifier") return name.name
-  if (name.type === "JSXMemberExpression" && name.object && name.property) {
-    return `${name.object.name}.${name.property.name}`
-  }
-  return null
-}
-
-// -- LOADING-1 -------------------------------------------------------------------------------------
-
-/** No component exists whose job is to mirror another component's shape. */
-export const noRestingTwinComponent = {
-  meta: {
-    type: "problem",
-    docs: { description: "No component whose whole job is to mirror another one's shape." },
-    schema: [],
-    messages: {
-      twin:
-        "`{{name}}` is a hand-mirrored twin: a second description of a shape that already has one. It cannot be kept in step - it can only be noticed after it has already drifted, and a resting shape has no assertion to fail, so nothing will report the drift. Give the component it mirrors a resting state and let it rest as ITSELF.",
-    },
-  },
-  create(context) {
-    if (!isGoverned(context)) return {}
-    const owner = classOf(context)
-    if (owner.role !== "entry" || !TWIN_NAME.test(owner.bindings?.name ?? "")) return {}
-    return {
-      Program(node) {
-        context.report({ node, messageId: "twin", data: { name: owner.bindings.name } })
-      },
-    }
-  },
-}
-
-// -- LOADING-1, handed in from outside --------------------------------------------------------------
-
-/** A ready-made placeholder is the same second tree, passed as a prop. */
-export const noPlaceholderProp = {
-  meta: {
-    type: "problem",
-    docs: { description: "No prop hands a component a ready-made resting shape to render." },
-    schema: [],
-    messages: {
-      prop:
-        "A resting shape handed in as markup is a second description of a tree that already has one, and it sits further from the shape it copies than a twin does - the component it describes cannot even see it. Pass the waiting flag down instead, and let each part rest as itself.",
-      import:
-        "`{{name}}` is a hand-kept resting tree imported from beside its subject. It drifts the first time the real shape changes, and nothing reports it. Thread the waiting flag down instead.",
-    },
-  },
-  create(context) {
-    if (!isGoverned(context)) return {}
-    return {
-      JSXAttribute(node) {
-        const name = node.name && node.name.type === "JSXIdentifier" ? node.name.name : null
-        if (name !== "skeleton" && name !== "placeholder" && name !== "fallback") return
-        const value = node.value
-        if (!value || value.type !== "JSXExpressionContainer") return
-        const expression = value.expression
-        if (expression.type === "JSXElement" || expression.type === "JSXFragment") {
-          context.report({ node, messageId: "prop" })
-        }
-      },
-      ImportDeclaration(node) {
-        const source = node.source && node.source.value
-        if (typeof source !== "string" || !/^\.\.?\//.test(source)) return
-        for (const specifier of node.specifiers || []) {
-          const local = specifier.local && specifier.local.name
-          // A bare `Skeleton` is the primitive a component rests WITH, not a twin of one.
-          if (!local || local === "Skeleton" || !TWIN_NAME.test(local)) continue
-          context.report({ node: specifier, messageId: "import", data: { name: local } })
-        }
-      },
-    }
-  },
-}
-
-// -- LOADING-2 -------------------------------------------------------------------------------------
-
-/** A caller never picks between a resting shape and a real one. */
-export const noRestingBranchAtCallSite = {
-  meta: {
-    type: "problem",
-    docs: { description: "A waiting flag must not choose between two different components." },
-    schema: [],
-    messages: {
-      branch:
-        "`{{flag}}` picks between two DIFFERENT elements, which is a resting shape written at the call site - and it drifts from the real one the first time the real one changes. Give the component below a waiting flag and pass it down; let it rest as ITSELF. The same component on both sides is the honest form: one description, two states.",
-    },
-  },
-  create(context) {
-    if (!isGoverned(context)) return {}
-    const source = context.sourceCode || context.getSourceCode()
-    /** Root element name of one arm, or null when the arm is not an element. */
-    const armName = (expression) => {
-      if (!expression) return null
-      if (expression.type === "JSXElement") return jsxElementName(expression.openingElement)
-      if (expression.type === "JSXFragment") return "<>"
-      return null
-    }
-    return {
-      ConditionalExpression(node) {
-        const test = source.getText(node.test)
-        if (!WAITING_FLAG.test(test)) return
-        const left = armName(node.consequent)
-        const right = armName(node.alternate)
-        // Both arms must be real elements AND differ. `null` on one side is LOADING-5 - a control
-        // that has nowhere to go yet - and that is correct rather than a second tree.
-        if (!left || !right || left === right) return
-        context.report({ node, messageId: "branch", data: { flag: test.trim().slice(0, 40) } })
-      },
-    }
-  },
-}
-
-/** The rules this law contributes to the plugin. */
-export const rules = {
-  "no-resting-twin-component": noRestingTwinComponent,
-  "no-placeholder-prop": noPlaceholderProp,
-  "no-resting-branch-at-call-site": noRestingBranchAtCallSite,
-}
-
-/**
- * The level this law asks for, as the plugin's own opinion.
- *
- * A repository adopting these with history should expect the twin rule to report a folder at a
- * time: hand-kept placeholder trees arrive in families, one per screen, and each is a real shape
- * that has to be folded back into the component it copies rather than deleted.
- */
-export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]))

package/naming.mjs

@@ -1,185 +0,0 @@
-/**
- * The rules that hold `naming.md`.
- *
- * Two spellings, both of which work, which is exactly why they are rules: nothing corrects the
- * second one, so a file written on a Tuesday reads differently from its neighbour and every diff
- * afterwards carries noise that has nothing to do with the change.
- *
- * Neither rule can see intent, and both are deliberately narrow because of it. NAMING-1 fires on
- * shape alone - a module-level `function` - which is exact. NAMING-2 fires on the `handle` prefix
- * alone, which catches the rename-at-the-boundary case and nothing else; a name that merely
- * describes an action is not its business.
- */
-
-import { hfsOf } from "./lib/hfs.mjs"
-import { NEXT_RESERVED_EXPORTS } from "./lib/next.mjs"
-import { fileOf, inSlot, roleOfFile } from "./lib/scope.mjs"
-
-/** Parents that make a function declaration module-level rather than nested. */
-const MODULE_LEVEL_PARENTS = new Set(["Program", "ExportNamedDeclaration", "ExportDefaultDeclaration"])
-
-// -- NAMING-1 --------------------------------------------------------------------------------------
-
-/** A module-level function is an arrow const, so nothing exists before the line that declares it. */
-export const preferArrowExport = {
-  meta: {
-    type: "suggestion",
-    docs: { description: "Module-level functions use an arrow const, not a `function` declaration." },
-    schema: [],
-    messages: {
-      fn: "`function {{name}}` is hoisted, so it exists before the line that declares it and the order of this file stops promising anything about what is defined when. Write `const {{name}} = (...) => {...}` - a const cannot be used before it exists, so the file reads in the order it runs.",
-    },
-  },
-  create(context) {
-    return {
-      FunctionDeclaration(node) {
-        const parent = node.parent && node.parent.type
-        if (!MODULE_LEVEL_PARENTS.has(parent)) return
-        context.report({
-          node: node.id || node,
-          messageId: "fn",
-          data: { name: (node.id && node.id.name) || "default" },
-        })
-      },
-    }
-  },
-}
-
-// -- NAMING-2 --------------------------------------------------------------------------------------
-
-/** Something a reader triggers is named `onX`, so the name survives being passed. */
-export const handlerOnPrefix = {
-  meta: {
-    type: "suggestion",
-    docs: { description: "Handlers are named `onX`, not `handleX`." },
-    schema: [],
-    messages: {
-      handle: "`{{name}}` is renamed at every boundary it crosses - the slot is `on`, the DOM attribute is `onClick`, and the props type says `on{{rest}}`. Call it `on{{rest}}` at birth and the name is the same at the declaration, at the call site and in the type.",
-    },
-  },
-  create(context) {
-    const flag = (node, name) => {
-      if (!name || !/^handle[A-Z]/.test(name)) return
-      context.report({ node, messageId: "handle", data: { name, rest: name.slice("handle".length) } })
-    }
-    return {
-      VariableDeclarator(node) {
-        if (node.id && node.id.type === "Identifier") flag(node.id, node.id.name)
-      },
-      JSXAttribute(node) {
-        if (node.name) flag(node.name, node.name.name)
-      },
-      TSPropertySignature(node) {
-        if (node.key && node.key.type === "Identifier") flag(node.key, node.key.name)
-      },
-    }
-  },
-}
-
-// -- machine-only identity -------------------------------------------------------------------------
-
-/** A const introduces a value; it does not merely give an existing identifier a second name. */
-export const noDirectConstAlias = {
-  meta: {
-    type: "problem",
-    docs: { description: "A const must not be a direct identifier-to-identifier alias." },
-    schema: [],
-    messages: {
-      alias:
-        "`const {{alias}} = {{original}}` gives one value two names without adding behavior. Use `{{original}}` directly, or make `{{alias}}` the result of the transformation it claims to represent.",
-    },
-  },
-  create(context) {
-    // A route segment file (slot `fe.route`, a role: page, layout, route, ...) is the one place Next dictates the exported name; `export const generateMetadata = x` is the contract.
-    const segmentFile = inSlot(context, "fe.route") && roleOfFile(context) !== null
-    return {
-      VariableDeclarator(node) {
-        if (node.parent?.kind !== "const") return
-        if (node.id?.type !== "Identifier" || node.init?.type !== "Identifier") return
-        if (segmentFile && NEXT_RESERVED_EXPORTS.has(node.id.name) && node.parent.parent?.type === "ExportNamedDeclaration") return
-        context.report({
-          node: node.id,
-          messageId: "alias",
-          data: { alias: node.id.name, original: node.init.name },
-        })
-      },
-    }
-  },
-}
-
-/** The rules this law contributes to the plugin. */
-// -- NAMING-3 --------------------------------------------------------------------------------------
-
-/** Letters that exist in Vietnamese and not in English, in the forms a path can carry. */
-const SECOND_LANGUAGE_PATH = /[\u00e0\u00e1\u00e2\u00e3\u00e8\u00e9\u00ea\u00ec\u00ed\u00f2\u00f3\u00f4\u00f5\u00f9\u00fa\u00fd\u0103\u0111\u0129\u0169\u01a1\u01b0\u1ea1\u1ea3\u1ea5\u1ea7\u1ea9\u1eab\u1ead\u1eaf\u1eb1\u1eb3\u1eb5\u1eb7\u1eb9\u1ebb\u1ebd\u1ebf\u1ec1\u1ec3\u1ec5\u1ec7\u1ec9\u1ecb\u1ecd\u1ecf\u1ed1\u1ed3\u1ed5\u1ed7\u1ed9\u1edb\u1edd\u1edf\u1ee1\u1ee3\u1ee5\u1ee7\u1ee9\u1eeb\u1eed\u1eef\u1ef1\u1ef3\u1ef5\u1ef7\u1ef9]/i
-
-/**
- * Second-language words spelled in ASCII, as a route or folder segment writes them.
- *
- * A path cannot carry diacritics, so a name written with them reaches the filesystem unaccented
- * (`cap-phat` below) and every accent-based check passes it. The segments below are the ones this product actually produced.
- * A list is the honest instrument here: guessing at Vietnamese-shaped ASCII would refuse `dang`
- * in `dangerous` and `cap` in `capacity`, and a rule that fires on English words is one a
- * repository turns off.
- */
-const ROMANISED = [
-  "dang-nhap", "dang-ky", "dang-xuat", "cap-phat", "khoa-hoc", "hoc-vien", "gioi-thieu",
-  "lien-he", "tai-khoan", "thanh-toan", "gio-hang", "tin-tuc", "san-pham", "bang-gia",
-  "dieu-khoan", "chinh-sach", "trang-chu", "quan-ly", "cai-dat", "ho-so",
-]
-
-/** A route segment or folder name, lowercased, from a normalized path. */
-const segmentsOf = (filename) =>
-  String(filename || "").replace(/\\/g, "/").toLowerCase().split("/").filter(Boolean)
-
-/**
- * A path names things in one language: the one every reader of this repository shares.
- *
- * WHY A PATH AND NOT ONLY THE SOURCE. `no-second-language-in-source` reads identifiers, comments
- * and strings, and cannot see the file it is reading. So a route could be `app/cap-phat/page.tsx`
- * with every identifier inside it in English, and nothing said a word - while the URL, the import
- * specifier, the folder in every editor sidebar and the path in every stack trace stayed in a
- * language half the readers do not have.
- *
- * A ROUTE SEGMENT IS ALSO A PUBLIC NAME. It is the address a customer sees and a support ticket
- * quotes, so this is not only an authoring question: the product's own URLs stop being readable to
- * anybody outside one language.
- */
-const noSecondLanguageInPath = {
-  meta: {
-    type: "problem",
-    docs: { description: "File and route names are written in the repository's one shared language." },
-    schema: [],
-    messages: {
-      path:
-        "`{{segment}}` names this file in a second language. A path is read by more people than the code inside it - it is the URL a customer quotes, the folder every editor shows, and the specifier every import repeats - and unlike a comment it cannot be skimmed past. Rename the segment; the words a person READS belong in the locale catalogue, never in the address.",
-    },
-  },
-  create(context) {
-    const offending = segmentsOf(hfsOf(context).relative(fileOf(context))).find(
-      (segment) => SECOND_LANGUAGE_PATH.test(segment) || ROMANISED.includes(segment.replace(/[()[\]]/g, "")),
-    )
-    if (!offending) return {}
-    return {
-      Program(node) {
-        context.report({ node, messageId: "path", data: { segment: offending } })
-      },
-    }
-  },
-}
-
-export const rules = {
-  "prefer-arrow-export": preferArrowExport,
-  "handler-on-prefix": handlerOnPrefix,
-  "no-second-language-in-path": noSecondLanguageInPath,
-  "no-direct-const-alias": noDirectConstAlias,
-}
-
-/**
- * The level this law asks for, as the plugin's own opinion.
- *
- * A consuming repository's `eslint.config.mjs` stays the authority on what is actually switched on.
- * Both rules here are mechanical and auto-correctable by hand in seconds, so a repository adopting
- * them with existing debt should burn the count down rather than live at `warn`.
- */
-export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]))

package/native-controls.mjs

@@ -1,108 +0,0 @@
-/**
- * The rule that holds `native-controls.md` (HFS R62, `FE_NATIVE_FORM_CONTROL`).
- *
- * THE GRAMMAR OWNS THE CONTROL. A bare `<select>`, `<input>`, `<textarea>` or `<button>` in product
- * source is a control with no focus ring, no dark value, no density, no disabled or invalid state
- * from the design system - it looks native on one platform and is styled by hand on the next, and
- * the hand styling is where the private colour and pixel values came from (see `brand-values`).
- * The renderer the grammar publishes is the same element with the state the product needs.
- *
- * NO TIER IS EXEMPT. The grammar package itself is not linted by this canon (it is where the native
- * element legitimately lives); everything the product owns - leaves included - renders the grammar's
- * control. If the grammar lacks the control, the fix is to add it to the grammar, not to draw one here.
- */
-
-import { attribute } from "./lib/ast.mjs"
-
-/** Intrinsic elements a reader operates, that the grammar renders for the product. */
-const NATIVE = new Set(["select", "input", "textarea", "button"])
-
-/** No native form control in product source. */
-export const noNativeFormControl = {
-  meta: {
-    type: "problem",
-    docs: { description: "Use the grammar's renderers; never a bare select, input, textarea or button." },
-    schema: [],
-    messages: {
-      native:
-        "A bare `<{{tag}}>`. The grammar owns this control: it brings the focus ring, disabled and invalid states, density and the dark value, and a hand-styled native element brings none of them. Use the grammar's renderer; if it does not exist yet, add it to the grammar rather than drawing one here.",
-    },
-  },
-  create(context) {
-    return {
-      JSXOpeningElement(node) {
-        if (node.name.type !== "JSXIdentifier" || !NATIVE.has(node.name.name)) return
-        context.report({ node, messageId: "native", data: { tag: node.name.name } })
-      },
-    }
-  },
-}
-
-// -- NATIVE-2 --------------------------------------------------------------------------------------
-
-/** No bare `<img>`; the framework's image owns size, format, lazy loading and layout shift. */
-export const noNativeImg = {
-  meta: {
-    type: "problem",
-    docs: { description: "Use `next/image`, never a bare `<img>`." },
-    schema: [],
-    messages: {
-      img:
-        "A bare `<img>` ships the original file at its original size, reserves no space (the page jumps when it loads) and is never lazy by policy. Use `Image` from `next/image` with `width` and `height`, or `fill` and `sizes`, and an `alt` from the message catalogue.",
-    },
-  },
-  create(context) {
-    return {
-      JSXOpeningElement(node) {
-        if (node.name.type === "JSXIdentifier" && node.name.name === "img") context.report({ node, messageId: "img" })
-      },
-    }
-  },
-}
-
-// -- NATIVE-3 --------------------------------------------------------------------------------------
-
-/** Every `next/image` reserves its space: a size, or `fill` inside a sized parent with `sizes`. */
-export const imageHasSize = {
-  meta: {
-    type: "problem",
-    docs: { description: "`next/image` carries `width` and `height`, or `fill` with `sizes`." },
-    schema: [],
-    messages: {
-      size:
-        "This `Image` has no `width` and `height` and is not `fill`. The browser cannot reserve its space, so the page shifts when it loads and the layout score falls. Give it both dimensions, or `fill` inside a sized parent.",
-      sizes:
-        "This `Image` is `fill` with no `sizes`. Next then assumes the image is as wide as the viewport and downloads the largest variant on every screen. State the rendered width: `sizes=\"(min-width: 768px) 33vw, 100vw\"`.",
-    },
-  },
-  create(context) {
-    const locals = new Set()
-    return {
-      ImportDeclaration(node) {
-        if (node.source.value !== "next/image") return
-        for (const specifier of node.specifiers) if (specifier.type === "ImportDefaultSpecifier") locals.add(specifier.local.name)
-      },
-      JSXOpeningElement(node) {
-        if (node.name.type !== "JSXIdentifier" || !locals.has(node.name.name)) return
-        // A spread may carry the size; the rule judges what it can read.
-        if (node.attributes.some((entry) => entry.type === "JSXSpreadAttribute")) return
-        const fill = attribute(node, "fill")
-        if (fill) {
-          if (!attribute(node, "sizes")) context.report({ node, messageId: "sizes" })
-          return
-        }
-        if (!attribute(node, "width") || !attribute(node, "height")) context.report({ node, messageId: "size" })
-      },
-    }
-  },
-}
-
-/** The rules this law contributes to the plugin. */
-export const rules = {
-  "no-native-form-control": noNativeFormControl,
-  "no-native-img": noNativeImg,
-  "image-has-size": imageHasSize,
-}
-
-/** Every rule is an error. */
-export const recommended = Object.fromEntries(Object.keys(rules).map((name) => [`starci-fe/${name}`, "error"]))