build(eslint): drop the Z_RAW and EDGED_LABEL selectors

Both came out of the E28 claim audit (0521149c named z-levels, e13d93a3 static labels as flat Badges) after the audit itself had fixed the sites. No real hit since: 0 matches in every lint run from E28 to E34 (S2/S3 measurement). Each still cost a probe test (zLayer.contract, the edged-label half of hoverAndLink.contract) and a place in the gate snapshot. The design rules stay in DESIGN.md (Tokens: no ad-hoc z-index; Static vs pressable), with a decision-log row saying the selectors went and why.
2026-10-05 00:19:38 +02:00
parent 91f6a77fa3
commit adaa7dc23c
6 changed files with 2 additions and 140 deletions
@@ -705,3 +705,4 @@ of a full-width panel and nothing on the right.
 | 2026-10-02 | E31 Plex detail second column (refined)          | The facts over the key crew beside the text; the keywords, chips that filter like the genres, under the text; the show page gets all three too                                                                                                                                                                         | All three in the column, as the mockup drew it                                                                                                                                                         | At 20 keywords and 12 crew the column ran to twice the text's height (849 vs ~400 px at 133%): a hole under the text instead of beside it                                                     |
 | 2026-10-02 | E31 Plex detail poster and crew                  | The movie and show poster keeps its 2:3 and grows a rung in a wide hero (w-56 at a 64rem panel); the crew shows its first 6 names and "Show N more" (a list of 8 or fewer shows whole)                                                                                                                                 | Poster stretched to the row; a "More" on the keywords                                                                                                                                                  | The row is as tall as the crew column, so the poster drew ~175×590 and cropped; the crew, not the keywords, set the hero's height                                                             |
 | 2026-10-04 | E32 `field` focus skips a mode switch | A form opens on its first field; a control above it that is not a field (the composer's Edit / Preview) is passed over by marking the field `data-initial-focus` | The first text field everywhere | That moved the focus in the download dialog off its profile choice and in the upload dialog off its drop zone; the mark changes only the form that needs it |
+| 2026-10-04 | E35 Lint for z-levels and edged labels | Both rules stay; the two eslint selectors (`Z_RAW`, `EDGED_LABEL`) that refused them go | Keep the selectors | 0 hits since the E28 sweep that fixed the sites: a check that never fires costs a probe test and a snapshot each, and the UI review holds both rules |
@@ -443,12 +443,6 @@ const BOX_PX_MESSAGE =
 const GRID_MIN_PX = "/minmax\\([\\d.]+px,/";
 const GRID_MIN_PX_MESSAGE =
  "px-frozen box size doesn't scale with --font-scale: give a grid column's minimum in rem (minmax(9.375rem,1fr)), not minmax(Npx,…).";
-// A stacking order outside the layer scale (DESIGN.md Tokens: `base < menu < chrome < … < tooltip` in
-// index.css). A numeric `z-10` equals a level today but doesn't follow it when the scale moves; name it.
-const Z_RAW = "/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/";
-const Z_RAW_MESSAGE =
-  "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].";
-
 // A hover that swaps a colour instead of laying the B3 state layer (DESIGN.md Tokens): `bg-card`,
 // `bg-border` and `bg-surface` vanish on a light card, an opacity dim reads as "disabled", and
 // `bg-(--hover)` restates the `state-layer` utility by hand. `group-hover:` (a reveal on a parent's
@@ -466,14 +460,6 @@ const PALETTE =
 const PALETTE_MESSAGE =
  "a palette colour: use a semantic token (text-rating, bg-live, bg-media-chrome, text-danger, …; DESIGN.md Tokens), not text-amber-500.";

-// A static label with an edge (DESIGN.md "Static vs pressable", audit F29): a <span> drawn round with a
-// border reads as a chip, is clicked and does nothing. A label that does nothing is ui/Badge (flat).
-// A small `rounded` box (a check mark drawn inside a menu row) is a glyph, not a label: only the label
-// radii match.
-const EDGED_LABEL = "/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/";
-const EDGED_LABEL_MESSAGE =
-  "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.";
-
 // A class name split by an interpolation: the text right after `${…}` starts with a variant (`hover:`),
 // or the interpolation IS the variant and the text goes on with its class (`${NARROW}:w-24`, E28 S3f3).
 // A clock (`${m}:00`) and a URL (`${u}://`) are not classes.
@@ -665,20 +651,10 @@ export default tseslint.config(
        { selector: `TemplateElement[value.raw=${BOX_PX}]`, message: BOX_PX_MESSAGE },
        { selector: `Literal[value=${GRID_MIN_PX}]`, message: GRID_MIN_PX_MESSAGE },
        { selector: `TemplateElement[value.raw=${GRID_MIN_PX}]`, message: GRID_MIN_PX_MESSAGE },
-        { selector: `Literal[value=${Z_RAW}]`, message: Z_RAW_MESSAGE },
-        { selector: `TemplateElement[value.raw=${Z_RAW}]`, message: Z_RAW_MESSAGE },
        { selector: `Literal[value=${HOVER_SWAP}]`, message: HOVER_SWAP_MESSAGE },
        { selector: `TemplateElement[value.raw=${HOVER_SWAP}]`, message: HOVER_SWAP_MESSAGE },
        { selector: `Literal[value=${PALETTE}]`, message: PALETTE_MESSAGE },
        { selector: `TemplateElement[value.raw=${PALETTE}]`, message: PALETTE_MESSAGE },
-        {
-          selector: `JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] Literal[value=${EDGED_LABEL}]`,
-          message: EDGED_LABEL_MESSAGE,
-        },
-        {
-          selector: `JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] TemplateElement[value.raw=${EDGED_LABEL}]`,
-          message: EDGED_LABEL_MESSAGE,
-        },
      ],
    },
  },
@@ -67,7 +67,6 @@ function TouchRow() {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-2">
-        {/* eslint-disable-next-line no-restricted-syntax -- a drawing of the segmented control, not a label */}
        <span className="inline-flex rounded-full border border-border bg-card p-0.5 text-xs">
          <span className={clsx(pill, "rounded-full bg-accent text-accent-fg")}>Mine</span>
          <span className={clsx(pill, "rounded-full text-muted")}>Library</span>
@@ -870,14 +870,6 @@
              "message": "px-frozen box size doesn't scale with --font-scale: give a grid column's minimum in rem (minmax(9.375rem,1fr)), not minmax(Npx,…).",
              "selector": "TemplateElement[value.raw=/minmax\\([\\d.]+px,/]"
            },
-            {
-              "message": "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].",
-              "selector": "Literal[value=/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/]"
-            },
-            {
-              "message": "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].",
-              "selector": "TemplateElement[value.raw=/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/]"
-            },
            {
              "message": "hover by a colour swap: use the B3 layer (`state-layer`, Pressable `layer`, `state-filled` on a fill), not hover:bg-card / bg-border / opacity-N.",
              "selector": "Literal[value=/(^|[\\s:])hover:(bg-(card|border|surface|muted)(?![\\w-])|bg-\\(--(hover|press)\\)|opacity-)/]"
@@ -893,14 +885,6 @@
            {
              "message": "a palette colour: use a semantic token (text-rating, bg-live, bg-media-chrome, text-danger, …; DESIGN.md Tokens), not text-amber-500.",
              "selector": "TemplateElement[value.raw=/(^|[\\s:])(text|bg|border|fill|stroke|from|via|to|ring|outline|decoration|divide|caret|shadow)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-\\d/]"
-            },
-            {
-              "message": "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.",
-              "selector": "JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] Literal[value=/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/]"
-            },
-            {
-              "message": "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.",
-              "selector": "JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] TemplateElement[value.raw=/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/]"
            }
          ],
          "no-self-assign": [2, { "props": true }],
@@ -1520,8 +1504,7 @@
        "src/lib/useUrlMirror.dom.test.ts",
        "src/lib/verifyEntry.dom.test.tsx",
        "src/lib/viewportUnits.contract.test.ts",
-        "src/lib/vocab.dom.test.ts",
-        "src/lib/zLayer.contract.test.ts"
+        "src/lib/vocab.dom.test.ts"
      ],
      "lib/api/core.ts": ["src/lib/api/core.ts"],
      "lib/http.ts": ["src/lib/http.ts"],
@@ -13,7 +13,6 @@ async function messages(source: string, starts: string): Promise<number> {
 const swaps = (src: string) => messages(src, "hover by a colour swap");
 const glyphs = (src: string) => messages(src, "a glyph-only <a>");
 const palette = (src: string) => messages(src, "a palette colour");
-const edged = (src: string) => messages(src, "a static label with an edge");

 describe("a hover by a colour swap", () => {
  // Assembled, so this file does not trip the very rule it probes.
@@ -74,36 +73,3 @@ describe("a palette colour", () => {
    expect(await palette(`export const g = "bg-accent text-danger border-border";\n`)).toBe(0);
  });
 });
-
-// F29: DESIGN.md "Static vs pressable": a label that does nothing is a flat Badge. A span drawn with a
-// rounded edge reads as a chip, gets clicked and does nothing (three sites and a private Badge had it).
-describe("a static label with an edge", () => {
-  const b = "border"; // assembled, as above
-
-  it("is refused, in a plain class and inside clsx", async () => {
-    const src = [
-      'import clsx from "clsx";',
-      "export const A = ({ on }: { on: boolean }) => (",
-      "  <>",
-      `    <span className="px-2 rounded-full ${b} ${b}-accent/40 text-accent">x</span>`,
-      `    <span className={clsx("rounded-lg ${b} ${b}-dashed", on && "text-accent")}>y</span>`,
-      "  </>",
-      ");",
-    ].join("\n");
-    expect(await edged(src)).toBe(2);
-  });
-
-  it("passes a flat tint, an edge on a non-label element, a span with no rounding, a drawn check mark", async () => {
-    const src = [
-      "export const B = () => (",
-      "  <>",
-      '    <span className="rounded-full bg-fg/8 text-muted">x</span>',
-      `    <div className="rounded-lg ${b} ${b}-border">y</div>`,
-      `    <span className="${b}-b ${b}-border">z</span>`,
-      `    <span className="grid h-3.5 w-3.5 rounded ${b}">✓</span>`,
-      "  </>",
-      ");",
-    ].join("\n");
-    expect(await edged(src)).toBe(0);
-  });
-});
@@ -1,63 +0,0 @@
-import { readFileSync } from "node:fs";
-
-import { describe, expect, it } from "vitest";
-
-import { eslint } from "./lintProbe.testkit";
-
-// The layer-scale rule in eslint.config.js (DESIGN.md Tokens: "No ad-hoc z-index"). A numeric `z-10`
-// happened to equal `base` and passed every review; a `no-restricted-syntax` selector that matches
-// nothing looks exactly like a clean codebase, so pin that it fires.
-
-async function refused(source: string): Promise<number> {
-  const [result] = await eslint.lintText(source, { filePath: "src/components/__probe.tsx" });
-  return (result?.messages ?? []).filter((m) => m.message.startsWith("z-index off the layer scale"))
-    .length;
-}
-
-describe("a z-index off the layer scale", () => {
-  // Assembled, so this file does not trip the very rule it probes.
-  const z = (v: string) => `z-${v}`;
-
-  it("is refused as a number, an arbitrary value or a variant, in a string and a template", async () => {
-    expect(await refused(`export const a = "absolute ${z("10")} top-0";\n`)).toBe(1);
-    expect(await refused(`export const b = "hover:${z("[5]")}";\n`)).toBe(1);
-    expect(await refused("export const c = `x ${1} -" + z("20") + "`;\n")).toBe(1);
-  });
-
-  it("leaves a named level, z-0 and z-auto alone", async () => {
-    expect(await refused(`export const d = "${z("base")} ${z("menu")} ${z("tooltip")}";\n`)).toBe(
-      0,
-    );
-    expect(await refused(`export const e = "${z("0")} md:${z("auto")}";\n`)).toBe(0);
-  });
-});
-
-// The Plex player's notices (the track-switch OSD, the subtitle notice) sat on `menu` while its settings
-// and tracks popovers had no level: a notice drew over the open menu (E28 audit, seen live). A menu is
-// above a notice; the info overlay (`menu`, later in the tree) still covers both.
-describe("the Plex player's layers", () => {
-  const src = ["PlexPlayer.tsx", "PlexPlayerSettings.tsx"]
-    .map((f) => readFileSync(new URL(`../components/${f}`, import.meta.url), "utf8"))
-    .join("\n");
-  const classes = (marker: RegExp) =>
-    [...src.matchAll(/className="([^"]*)"/g)].map((m) => m[1]!).filter((c) => marker.test(c));
-
-  it("puts every popover on the menu level", () => {
-    const popovers = classes(
-      /\bbottom-full\b.*\bbg-media-chrome\b|\bbg-media-chrome\b.*\bbottom-full\b/,
-    );
-    expect(popovers).toHaveLength(1); // the settings panel, which renders inside the player
-    for (const c of popovers) expect(c).toMatch(/\bz-menu\b/);
-    // The tracks list and the ⋯ menu are on the popover engine (E28 review D3), which lifts them to
-    // z-popover — above the player's own z-overlay — and into the fullscreen element.
-    expect([
-      ...src.matchAll(/<PopoverSurface\b[^>]*?className=\{`\$\{PLAYER_MENU\}/g),
-    ]).toHaveLength(2);
-  });
-
-  it("keeps the notices a level below", () => {
-    const notices = classes(/pointer-events-none absolute inset-x-0 bottom-(24|36)\b/);
-    expect(notices).toHaveLength(2);
-    for (const c of notices) expect(c).toMatch(/\bz-base\b/);
-  });
-});