@siyahi/tools 0.1.9-next.16 → 0.1.9-next.18

package/README.md

@@ -8,6 +8,10 @@ Kept apart from the UI package so installing the UI does not pull in Playwright.
 An [oxlint](https://oxc.rs) JS plugin, `siyahi`. Every rule runs only in files
 that import `@siyahi/ui`.
 
+```sh
+npm install --save-dev @siyahi/tools@next oxlint
+```
+
 | Rule                          | Rejects                                                                                                             |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------------- |
 | `siyahi/no-color-literal`     | hex, `rgb()`, `hsl()`, `oklch()` and other colour literals in strings                                               |
@@ -21,7 +25,14 @@ that import `@siyahi/ui`.
 {
   "jsPlugins": ["@siyahi/tools/lint"],
   "settings": { "shadcn": { "ui": "@siyahi/ui", "themeImports": ["^@siyahi/ui/"] } },
-  "rules": { "siyahi/no-color-literal": "error" }
+  "rules": {
+    "siyahi/no-color-literal": "error",
+    "siyahi/no-scheme-variant": "error",
+    "siyahi/no-numeric-font-size": "error",
+    "siyahi/no-chart-theme-map": "error",
+    "siyahi/no-raw-colors": "error",
+    "siyahi/no-arbitrary-values": "error"
+  }
 }
 ```
 
@@ -45,6 +56,12 @@ export default defineConfig({ plugins: [react(), tailwindcss(), preloadFonts()]
 It runs in `vite build` only. The fonts stay self-hosted: the tags point at
 the files Vite emitted from `@siyahi/ui`'s fontsource imports.
 
+The theme's fallback fonts match Geist's metrics until it loads: Arial or its
+Linux equivalents for body text, Courier New for mono. If an app renders its
+own HTML, add preload tags for the build's hashed URLs of
+`geist-latin-wght-normal.woff2`, `geist-latin-ext-wght-normal.woff2` and
+`geist-mono-latin-wght-normal.woff2`.
+
 ## siyahi-cls
 
 ```sh
@@ -70,7 +87,7 @@ counted (`moved=` against `in-view=`) and listed, but do not fail it. Run `npx p
 ## siyahi-shots
 
 ```sh
-npx siyahi-shots http://localhost:5173/#/page [more URLs] [--out shots] [--gutter 16] [--font Geist] [--chrome '[data-slot="sidebar"]'] [--wait-for h1] [--report]
+npx siyahi-shots http://localhost:5173/#/page [more URLs] [--out shots] [--gutter 16] [--font Geist] [--chrome '[data-slot="sidebar"]'] [--wait-for h1] [--report] [--widths 1920,390]
 ```
 
 Renders each URL in Chromium at 1920 and 390 pixels wide, light and dark, and
@@ -100,6 +117,12 @@ anything inside `--chrome` (by default the shadcn sidebar, which sits flush to
 the edge by design). The font default, Geist, is Siyahi's; pass another family
 for other pages. Run `npx playwright install chromium` once.
 
+Pass `--widths 320,390,768,1366,1920` to include small phones, tablets and laptops;
+each width runs in light and dark. The check also rejects a scrolling table whose
+frozen columns occupy more than half its available width. These captures
+complement interaction checks for scrolling, state retention, keyboard navigation
+and touch readouts.
+
 ## siyahi-contrast
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/tools",
-  "version": "0.1.9-next.16",
+  "version": "0.1.9-next.18",
   "description": "Checks and build helpers for Siyahi pages: a lint plugin, a font preload plugin, a theme contrast check, and screenshot and layout shift scripts.",
   "homepage": "https://siyahi.jatinbansal.com",
   "license": "MIT",

package/shots.mjs

@@ -37,15 +37,7 @@ import { parseArgs } from "node:util";
 import { chromium, errors } from "playwright";
 
 /** @typedef {{ name: string, width: number, height: number, dark: boolean }} Mode */
-/** @typedef {{ gutterLeft: number | null, gutterRight: number | null, overflow: number, overflowWithScrollbar: number, clipped: string[], font: string, fontLoaded: boolean, docHeight: number, h1: string | null }} Probe */
-
-/** @type {Mode[]} */
-const MODES = [
-  { name: "1920-light", width: 1920, height: 1080, dark: false },
-  { name: "1920-dark", width: 1920, height: 1080, dark: true },
-  { name: "390-light", width: 390, height: 844, dark: false },
-  { name: "390-dark", width: 390, height: 844, dark: true },
-];
+/** @typedef {{ gutterLeft: number | null, gutterRight: number | null, overflow: number, overflowWithScrollbar: number, clipped: string[], frozen: string[], font: string, fontLoaded: boolean, docHeight: number, h1: string | null }} Probe */
 // How long --wait-for may take to appear before the mode fails.
 const WAIT_FOR_TIMEOUT = 15_000;
 // Tallest PNG written. Headless Chromium renders taller pages, but many image
@@ -61,15 +53,30 @@ const { values, positionals } = parseArgs({
     chrome: { type: "string", default: '[data-slot="sidebar"]' },
     "wait-for": { type: "string", default: "h1" },
     report: { type: "boolean", default: false },
+    widths: { type: "string", default: "1920,390" },
   },
 });
 if (positionals.length === 0) {
   console.error(
-    "usage: siyahi-shots <url>... [--out shots] [--gutter 16] [--font Geist] [--chrome <selector>] [--wait-for <selector>] [--report]",
+    "usage: siyahi-shots <url>... [--out shots] [--gutter 16] [--font Geist] [--chrome <selector>] [--wait-for <selector>] [--report] [--widths 1920,390]",
   );
   process.exit(2);
 }
 const outDir = path.resolve(values.out);
+const widths = values.widths.split(",").map(Number);
+if (widths.some((width) => !Number.isInteger(width) || width < 240 || width > 3840)) {
+  console.error("--widths must be comma-separated pixel widths between 240 and 3840");
+  process.exit(2);
+}
+/** @type {Mode[]} */
+const MODES = [...new Set(widths)].flatMap((width) =>
+  [false, true].map((dark) => ({
+    name: `${width}-${dark ? "dark" : "light"}`,
+    width,
+    height: width < 768 ? 844 : 1080,
+    dark,
+  })),
+);
 const minGutter = Number(values.gutter);
 const waitFor = values["wait-for"];
 mkdirSync(outDir, { recursive: true });
@@ -93,7 +100,12 @@ const PROBE = `((chrome) => {
   };
   const shown = (el) => {
     const r = el.getBoundingClientRect();
-    return r.width > 0 && r.height > 0 && !el.closest(chrome) && getComputedStyle(el).visibility !== "hidden";
+    const style = getComputedStyle(el);
+    // Base UI keeps clipped controls for form submission; aria-hidden alone
+    // does not mean a control (or its descendants) is visually hidden.
+    const hiddenControl = el.matches('input[aria-hidden="true"],select[aria-hidden="true"],textarea[aria-hidden="true"]') &&
+      (style.clipPath === "inset(50%)" || style.clip === "rect(0px, 0px, 0px, 0px)");
+    return r.width > 0 && r.height > 0 && !el.closest(chrome) && style.visibility !== "hidden" && !hiddenControl;
   };
   // Pixels of el cut off at the side by an ancestor that hides its overflow,
   // and how it hides it, up to the nearest one that scrolls, which shows the
@@ -129,6 +141,18 @@ const PROBE = `((chrome) => {
   const overflowWithScrollbar = de.scrollWidth - de.clientWidth;
   de.style.overflowY = prev;
   const font = getComputedStyle(document.body).fontFamily;
+  const frozen = [];
+  for (const table of document.querySelectorAll("table")) {
+    let container = table.parentElement;
+    while (container && !["auto", "scroll"].includes(getComputedStyle(container).overflowX)) container = container.parentElement;
+    if (!container || container.scrollWidth <= container.clientWidth) continue;
+    const cells = [...(table.querySelector("tbody tr")?.children ?? [])];
+    const pinned = cells.filter((cell) => getComputedStyle(cell).position === "sticky");
+    const occupied = pinned.reduce((sum, cell) => sum + cell.getBoundingClientRect().width, 0);
+    if (pinned.length < cells.length && occupied > container.clientWidth / 2) {
+      frozen.push("frozen columns occupy " + Math.round(occupied) + " of " + container.clientWidth + "px; unpin them in narrow space");
+    }
+  }
   const first = font.split(",")[0].trim().replace(/^["']|["']$/g, "");
   const h1 = document.querySelector("h1");
   return {
@@ -137,6 +161,7 @@ const PROBE = `((chrome) => {
     overflow,
     overflowWithScrollbar,
     clipped,
+    frozen,
     font: first,
     fontLoaded: document.fonts.check('16px "' + first + '"') && [...document.fonts].some((f) => f.family.replace(/["']/g, "") === first && f.status === "loaded"),
     docHeight: de.scrollHeight,
@@ -219,6 +244,7 @@ function problemsOf(p, ready) {
   if (p.overflowWithScrollbar > 0)
     problems.push(`scrolls sideways by ${p.overflowWithScrollbar}px once a scrollbar takes its width`);
   for (const what of p.clipped.slice(0, 5)) problems.push(what);
+  problems.push(...p.frozen);
   if (p.clipped.length > 5) problems.push(`and ${p.clipped.length - 5} more cut off`);
   if (!p.font.startsWith(values.font)) problems.push(`body font is ${p.font}, not ${values.font}`);
   else if (!p.fontLoaded && !values.report) problems.push(`${p.font} is named but never loaded`);

package/types/shots.d.mts

@@ -11,6 +11,7 @@ export type Probe = {
     overflow: number;
     overflowWithScrollbar: number;
     clipped: string[];
+    frozen: string[];
     font: string;
     fontLoaded: boolean;
     docHeight: number;