framewatch-mcp-server 0.1.1 → 0.2.0

package/dist/utils/style-rules.d.ts

@@ -0,0 +1,107 @@
+import type { BoundingBox } from "../types.js";
+/**
+ * What `framewatch_inspect` says about a measurement.
+ *
+ * One element's computed style and geometry in, lines of wording out. Nothing
+ * here touches a browser: the colour maths (WCAG contrast), the alignment
+ * descriptions and the formatting are all decided on plain numbers, so every
+ * verdict can be tested in milliseconds and the browser tests only have to
+ * prove the numbers are real.
+ */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    /** 0..1 */
+    a: number;
+}
+/** A colour as `getComputedStyle` prints it (`rgb()` / `rgba()`), or as a hex literal, or `transparent`. */
+export declare function parseColour(css: string): Rgba | null;
+/** `top` painted over `bottom`, the way the browser composites a translucent background. */
+export declare function compositeOver(top: Rgba, bottom: Rgba): Rgba;
+export declare function toHex(colour: Rgba): string;
+/** WCAG 2 relative luminance of an opaque colour. */
+export declare function relativeLuminance(colour: Rgba): number;
+/** WCAG 2 contrast ratio, 1..21, whichever way round the colours are given. */
+export declare function contrastRatio(a: Rgba, b: Rgba): number;
+/** WCAG's "large text": 24px, or 18.66px (14pt) when bold. */
+export declare function isLargeText(fontSizePx: number, fontWeight: number): boolean;
+export type ContrastVerdict = "AAA" | "AA" | "fail";
+export declare function contrastVerdict(ratio: number, large: boolean): ContrastVerdict;
+export declare function describeContrast(ratio: number, large: boolean): string;
+/**
+ * Where a box sits relative to its parent, and to the sibling before it.
+ * Horizontal first (flush, centred, or the inset from each side), then the
+ * vertical relationship to the previous sibling.
+ */
+export declare function describeAlignment(box: BoundingBox, parent: BoundingBox, previous?: BoundingBox): string;
+/** One element, as measured inside the page. Colours are as `getComputedStyle` printed them. */
+export interface ElementMeasurement {
+    /** What the caller asked for: a ref (`e8`) or a selector. */
+    target: string;
+    tag: string;
+    id?: string;
+    classes: string[];
+    role?: string;
+    /** Accessible name, when the element has one. */
+    name?: string;
+    /** Own visible text, trimmed and elided. */
+    text?: string;
+    /** Viewport pixels. */
+    box: BoundingBox;
+    visible: boolean;
+    in_viewport: "fully" | "partially" | "none";
+    /** An ancestor with `overflow` other than visible cuts part of it off. */
+    clipped: boolean;
+    /** Its own content is wider or taller than the box it was given. */
+    text_overflows: boolean;
+    display: string;
+    position: string;
+    opacity: number;
+    font: {
+        family: string;
+        size: number;
+        weight: number;
+        line_height: number | null;
+        style: string;
+    };
+    color: string;
+    /** Effective background: its own, composited over its ancestors' until opaque. */
+    background: string;
+    /** top, right, bottom, left — pixels. */
+    padding: [number, number, number, number];
+    margin: [number, number, number, number];
+    gap: number | null;
+    /** Shorthand as computed, e.g. `1px solid rgb(0, 0, 0)` or `0px none rgb(0, 0, 0)`. */
+    border: string;
+    radius: string;
+    parent?: {
+        tag: string;
+        box: BoundingBox;
+    };
+    previous?: {
+        tag: string;
+        box: BoundingBox;
+    };
+}
+/** The lines `framewatch_inspect` prints for one element. */
+export declare function formatInspection(m: ElementMeasurement, index: number): string[];
+export interface Tally {
+    value: string;
+    count: number;
+}
+/** What the page is built from — every value in use, with how often. Most-used first. */
+export interface PageInventory {
+    elements: number;
+    /** Elements with visible text of their own. */
+    text_elements: number;
+    fonts: Tally[];
+    font_sizes: Tally[];
+    font_weights: Tally[];
+    text_colours: Tally[];
+    backgrounds: Tally[];
+    /** Non-zero padding, margin and gap values. */
+    spacing: Tally[];
+    radii: Tally[];
+}
+export declare function formatInventory(inventory: PageInventory): string[];

package/dist/utils/style-rules.js

@@ -0,0 +1,223 @@
+/** A colour as `getComputedStyle` prints it (`rgb()` / `rgba()`), or as a hex literal, or `transparent`. */
+export function parseColour(css) {
+    const value = css.trim().toLowerCase();
+    if (value === "transparent")
+        return { r: 0, g: 0, b: 0, a: 0 };
+    const fn = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(value);
+    if (fn) {
+        return {
+            r: Math.round(Number(fn[1])),
+            g: Math.round(Number(fn[2])),
+            b: Math.round(Number(fn[3])),
+            a: fn[4] === undefined ? 1 : Number(fn[4]),
+        };
+    }
+    // The space-separated modern syntax, which Chromium uses for colours outside sRGB.
+    const modern = /^rgba?\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+%?)\s*)?\)$/.exec(value);
+    if (modern) {
+        const alpha = modern[4] === undefined ? 1 : modern[4].endsWith("%") ? Number(modern[4].slice(0, -1)) / 100 : Number(modern[4]);
+        return { r: Math.round(Number(modern[1])), g: Math.round(Number(modern[2])), b: Math.round(Number(modern[3])), a: alpha };
+    }
+    const hex = /^#([0-9a-f]{3,8})$/.exec(value);
+    if (hex) {
+        const digits = hex[1];
+        if (digits.length === 3 || digits.length === 4) {
+            const [r, g, b, a] = digits.split("").map((d) => parseInt(d + d, 16));
+            return { r, g, b, a: digits.length === 4 ? a / 255 : 1 };
+        }
+        if (digits.length === 6 || digits.length === 8) {
+            const r = parseInt(digits.slice(0, 2), 16);
+            const g = parseInt(digits.slice(2, 4), 16);
+            const b = parseInt(digits.slice(4, 6), 16);
+            const a = digits.length === 8 ? parseInt(digits.slice(6, 8), 16) / 255 : 1;
+            return { r, g, b, a };
+        }
+    }
+    return null;
+}
+/** `top` painted over `bottom`, the way the browser composites a translucent background. */
+export function compositeOver(top, bottom) {
+    if (top.a >= 1)
+        return { ...top };
+    if (top.a <= 0)
+        return { ...bottom };
+    const a = top.a + bottom.a * (1 - top.a);
+    const mix = (t, b) => Math.round((t * top.a + b * bottom.a * (1 - top.a)) / a);
+    return { r: mix(top.r, bottom.r), g: mix(top.g, bottom.g), b: mix(top.b, bottom.b), a };
+}
+export function toHex(colour) {
+    const part = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+    const rgb = `#${part(colour.r)}${part(colour.g)}${part(colour.b)}`;
+    return colour.a >= 1 ? rgb : `${rgb}${part(colour.a * 255)}`;
+}
+/** WCAG 2 relative luminance of an opaque colour. */
+export function relativeLuminance(colour) {
+    const channel = (n) => {
+        const s = n / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * channel(colour.r) + 0.7152 * channel(colour.g) + 0.0722 * channel(colour.b);
+}
+/** WCAG 2 contrast ratio, 1..21, whichever way round the colours are given. */
+export function contrastRatio(a, b) {
+    const la = relativeLuminance(a);
+    const lb = relativeLuminance(b);
+    const [light, dark] = la >= lb ? [la, lb] : [lb, la];
+    return (light + 0.05) / (dark + 0.05);
+}
+/** WCAG's "large text": 24px, or 18.66px (14pt) when bold. */
+export function isLargeText(fontSizePx, fontWeight) {
+    if (fontSizePx >= 24)
+        return true;
+    return fontWeight >= 700 && fontSizePx >= 18.66;
+}
+export function contrastVerdict(ratio, large) {
+    const aaa = large ? 4.5 : 7;
+    const aa = large ? 3 : 4.5;
+    if (ratio >= aaa)
+        return "AAA";
+    if (ratio >= aa)
+        return "AA";
+    return "fail";
+}
+export function describeContrast(ratio, large) {
+    const verdict = contrastVerdict(ratio, large);
+    const size = large ? "large text" : "normal text";
+    const shown = `contrast ${ratio.toFixed(2)}:1`;
+    if (verdict === "fail")
+        return `${shown} — fails AA for ${size} (needs ${large ? "3" : "4.5"}:1)`;
+    return `${shown} — passes ${verdict} for ${size}`;
+}
+/** Positions within a pixel of each other count as the same: layout rounds, and so does the reader. */
+const ALIGN_TOLERANCE_PX = 1;
+/**
+ * Where a box sits relative to its parent, and to the sibling before it.
+ * Horizontal first (flush, centred, or the inset from each side), then the
+ * vertical relationship to the previous sibling.
+ */
+export function describeAlignment(box, parent, previous) {
+    const parts = [];
+    const left = box.x - parent.x;
+    const right = parent.x + parent.width - (box.x + box.width);
+    if (Math.abs(left) <= ALIGN_TOLERANCE_PX && Math.abs(right) <= ALIGN_TOLERANCE_PX) {
+        parts.push("fills parent's width");
+    }
+    else if (Math.abs(left - right) <= ALIGN_TOLERANCE_PX) {
+        parts.push("horizontally centred in parent");
+    }
+    else if (Math.abs(left) <= ALIGN_TOLERANCE_PX) {
+        parts.push("left edge flush with parent");
+    }
+    else if (Math.abs(right) <= ALIGN_TOLERANCE_PX) {
+        parts.push("right edge flush with parent");
+    }
+    else {
+        parts.push(`${Math.round(left)}px from parent's left, ${Math.round(right)}px from parent's right`);
+    }
+    if (previous) {
+        const gap = box.y - (previous.y + previous.height);
+        const vertical = gap >= 0 ? `${Math.round(gap)}px below previous sibling` : `overlaps previous sibling by ${Math.round(-gap)}px`;
+        const shift = box.x - previous.x;
+        const horizontal = Math.abs(shift) <= ALIGN_TOLERANCE_PX
+            ? "left-aligned with it"
+            : `${Math.round(Math.abs(shift))}px ${shift > 0 ? "right" : "left"} of its left edge`;
+        parts.push(`${vertical}, ${horizontal}`);
+    }
+    return parts.join("; ");
+}
+/** The lines `framewatch_inspect` prints for one element. */
+export function formatInspection(m, index) {
+    const lines = [];
+    const identity = [m.target, m.role ?? m.tag, m.name !== undefined ? `"${m.name}"` : null].filter(Boolean).join(" ");
+    lines.push(`${index}. ${identity} — <${describeElement(m)}>`);
+    const { box } = m;
+    const centre = `${Math.round(box.x + box.width / 2)},${Math.round(box.y + box.height / 2)}`;
+    const state = [];
+    state.push(m.visible ? "visible" : `not visible${m.opacity === 0 ? " (opacity 0)" : ""}`);
+    state.push(m.in_viewport === "fully"
+        ? "fully in viewport"
+        : m.in_viewport === "partially"
+            ? "partly outside the viewport"
+            : "outside the viewport");
+    if (m.clipped)
+        state.push("clipped by an ancestor");
+    if (m.text_overflows)
+        state.push("text overflows its box");
+    lines.push(`   box: ${box.x},${box.y} ${box.width}x${box.height} (viewport px; centre ${centre}) — ${state.join(", ")}`);
+    lines.push(`   text: ${describeText(m)}`);
+    const spacing = [`padding ${sides(m.padding)}`, `margin ${sides(m.margin)}`];
+    if (m.gap !== null)
+        spacing.push(`gap ${m.gap}`);
+    lines.push(`   spacing: ${spacing.join("; ")}`);
+    lines.push(`   border: ${describeBorder(m.border)}; radius ${m.radius}`);
+    const layout = [m.display];
+    if (m.position !== "static")
+        layout.push(`position ${m.position}`);
+    if (m.parent)
+        layout.push(describeAlignment(m.box, m.parent.box, m.previous?.box));
+    lines.push(`   layout: ${layout.join("; ")}`);
+    return lines;
+}
+function describeElement(m) {
+    let out = m.tag;
+    if (m.id)
+        out += `#${m.id}`;
+    else if (m.classes.length > 0)
+        out += `.${m.classes[0]}`;
+    return out;
+}
+function describeText(m) {
+    const font = m.font;
+    const size = font.line_height !== null ? `${font.size}px/${font.line_height}px` : `${font.size}px`;
+    const parts = [`${size} ${font.family} ${font.weight}${font.style !== "normal" ? ` ${font.style}` : ""}`];
+    const fg = parseColour(m.color);
+    const bg = parseColour(m.background);
+    // A translucent text colour renders as a blend with what is behind it; that
+    // blend is what the eye sees and what the contrast is rated on, so it is the
+    // one printed, with the declared value beside it.
+    const rendered = fg && bg && fg.a < 1 && bg.a >= 1 ? compositeOver(fg, bg) : fg;
+    const shownFg = rendered ? (fg && fg.a < 1 && rendered !== fg ? `${toHex(rendered)} (${toHex(fg)} as declared)` : toHex(rendered)) : m.color;
+    parts.push(`${shownFg} on ${bg ? toHex(bg) : m.background}`);
+    const hasText = (m.text ?? "").length > 0 || (m.name ?? "").length > 0;
+    if (hasText && rendered && bg && bg.a >= 1) {
+        parts.push(describeContrast(contrastRatio(rendered, bg), isLargeText(font.size, font.weight)));
+    }
+    return parts.join(" — ");
+}
+/** `8 16 8 16` → `8 16`, `8 8 8 8` → `8`, the way a stylesheet would write it. */
+function sides([top, right, bottom, left]) {
+    if (top === right && right === bottom && bottom === left)
+        return String(top);
+    if (top === bottom && right === left)
+        return `${top} ${right}`;
+    return `${top} ${right} ${bottom} ${left}`;
+}
+function describeBorder(border) {
+    const match = /^([\d.]+)px\s+(\w+)\s+(.+)$/.exec(border.trim());
+    if (!match)
+        return border || "none";
+    const width = Number(match[1]);
+    if (width === 0 || match[2] === "none")
+        return "none";
+    const colour = parseColour(match[3]);
+    return `${match[1]}px ${match[2]} ${colour ? toHex(colour) : match[3]}`;
+}
+export function formatInventory(inventory) {
+    const lines = [`Design inventory — ${inventory.elements} elements, ${inventory.text_elements} with text`];
+    const row = (label, tallies) => {
+        if (tallies.length === 0) {
+            lines.push(`  ${label}: none`);
+            return;
+        }
+        lines.push(`  ${label} (${tallies.length}): ${tallies.map((t) => `${t.value} ×${t.count}`).join(", ")}`);
+    };
+    row("fonts", inventory.fonts);
+    row("font sizes", inventory.font_sizes);
+    row("font weights", inventory.font_weights);
+    row("text colours", inventory.text_colours);
+    row("backgrounds", inventory.backgrounds);
+    row("spacing", inventory.spacing);
+    row("radii", inventory.radii);
+    return lines;
+}
+//# sourceMappingURL=style-rules.js.map

package/dist/utils/style-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-rules.js","sourceRoot":"","sources":["../../src/utils/style-rules.ts"],"names":[],"mappings":"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","sourcesContent":["import type { BoundingBox } from \"../types.js\";\n\n/**\n * What `framewatch_inspect` says about a measurement.\n *\n * One element's computed style and geometry in, lines of wording out. Nothing\n * here touches a browser: the colour maths (WCAG contrast), the alignment\n * descriptions and the formatting are all decided on plain numbers, so every\n * verdict can be tested in milliseconds and the browser tests only have to\n * prove the numbers are real.\n */\n\nexport interface Rgba {\n  r: number;\n  g: number;\n  b: number;\n  /** 0..1 */\n  a: number;\n}\n\n/** A colour as `getComputedStyle` prints it (`rgb()` / `rgba()`), or as a hex literal, or `transparent`. */\nexport function parseColour(css: string): Rgba | null {\n  const value = css.trim().toLowerCase();\n  if (value === \"transparent\") return { r: 0, g: 0, b: 0, a: 0 };\n\n  const fn = /^rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*(?:,\\s*([\\d.]+)\\s*)?\\)$/.exec(value);\n  if (fn) {\n    return {\n      r: Math.round(Number(fn[1])),\n      g: Math.round(Number(fn[2])),\n      b: Math.round(Number(fn[3])),\n      a: fn[4] === undefined ? 1 : Number(fn[4]),\n    };\n  }\n  // The space-separated modern syntax, which Chromium uses for colours outside sRGB.\n  const modern = /^rgba?\\(\\s*([\\d.]+)\\s+([\\d.]+)\\s+([\\d.]+)\\s*(?:\\/\\s*([\\d.]+%?)\\s*)?\\)$/.exec(value);\n  if (modern) {\n    const alpha = modern[4] === undefined ? 1 : modern[4].endsWith(\"%\") ? Number(modern[4].slice(0, -1)) / 100 : Number(modern[4]);\n    return { r: Math.round(Number(modern[1])), g: Math.round(Number(modern[2])), b: Math.round(Number(modern[3])), a: alpha };\n  }\n\n  const hex = /^#([0-9a-f]{3,8})$/.exec(value);\n  if (hex) {\n    const digits = hex[1];\n    if (digits.length === 3 || digits.length === 4) {\n      const [r, g, b, a] = digits.split(\"\").map((d) => parseInt(d + d, 16));\n      return { r, g, b, a: digits.length === 4 ? a / 255 : 1 };\n    }\n    if (digits.length === 6 || digits.length === 8) {\n      const r = parseInt(digits.slice(0, 2), 16);\n      const g = parseInt(digits.slice(2, 4), 16);\n      const b = parseInt(digits.slice(4, 6), 16);\n      const a = digits.length === 8 ? parseInt(digits.slice(6, 8), 16) / 255 : 1;\n      return { r, g, b, a };\n    }\n  }\n  return null;\n}\n\n/** `top` painted over `bottom`, the way the browser composites a translucent background. */\nexport function compositeOver(top: Rgba, bottom: Rgba): Rgba {\n  if (top.a >= 1) return { ...top };\n  if (top.a <= 0) return { ...bottom };\n  const a = top.a + bottom.a * (1 - top.a);\n  const mix = (t: number, b: number): number => Math.round((t * top.a + b * bottom.a * (1 - top.a)) / a);\n  return { r: mix(top.r, bottom.r), g: mix(top.g, bottom.g), b: mix(top.b, bottom.b), a };\n}\n\nexport function toHex(colour: Rgba): string {\n  const part = (n: number): string => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, \"0\");\n  const rgb = `#${part(colour.r)}${part(colour.g)}${part(colour.b)}`;\n  return colour.a >= 1 ? rgb : `${rgb}${part(colour.a * 255)}`;\n}\n\n/** WCAG 2 relative luminance of an opaque colour. */\nexport function relativeLuminance(colour: Rgba): number {\n  const channel = (n: number): number => {\n    const s = n / 255;\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);\n  };\n  return 0.2126 * channel(colour.r) + 0.7152 * channel(colour.g) + 0.0722 * channel(colour.b);\n}\n\n/** WCAG 2 contrast ratio, 1..21, whichever way round the colours are given. */\nexport function contrastRatio(a: Rgba, b: Rgba): number {\n  const la = relativeLuminance(a);\n  const lb = relativeLuminance(b);\n  const [light, dark] = la >= lb ? [la, lb] : [lb, la];\n  return (light + 0.05) / (dark + 0.05);\n}\n\n/** WCAG's \"large text\": 24px, or 18.66px (14pt) when bold. */\nexport function isLargeText(fontSizePx: number, fontWeight: number): boolean {\n  if (fontSizePx >= 24) return true;\n  return fontWeight >= 700 && fontSizePx >= 18.66;\n}\n\nexport type ContrastVerdict = \"AAA\" | \"AA\" | \"fail\";\n\nexport function contrastVerdict(ratio: number, large: boolean): ContrastVerdict {\n  const aaa = large ? 4.5 : 7;\n  const aa = large ? 3 : 4.5;\n  if (ratio >= aaa) return \"AAA\";\n  if (ratio >= aa) return \"AA\";\n  return \"fail\";\n}\n\nexport function describeContrast(ratio: number, large: boolean): string {\n  const verdict = contrastVerdict(ratio, large);\n  const size = large ? \"large text\" : \"normal text\";\n  const shown = `contrast ${ratio.toFixed(2)}:1`;\n  if (verdict === \"fail\") return `${shown} — fails AA for ${size} (needs ${large ? \"3\" : \"4.5\"}:1)`;\n  return `${shown} — passes ${verdict} for ${size}`;\n}\n\n/** Positions within a pixel of each other count as the same: layout rounds, and so does the reader. */\nconst ALIGN_TOLERANCE_PX = 1;\n\n/**\n * Where a box sits relative to its parent, and to the sibling before it.\n * Horizontal first (flush, centred, or the inset from each side), then the\n * vertical relationship to the previous sibling.\n */\nexport function describeAlignment(box: BoundingBox, parent: BoundingBox, previous?: BoundingBox): string {\n  const parts: string[] = [];\n\n  const left = box.x - parent.x;\n  const right = parent.x + parent.width - (box.x + box.width);\n  if (Math.abs(left) <= ALIGN_TOLERANCE_PX && Math.abs(right) <= ALIGN_TOLERANCE_PX) {\n    parts.push(\"fills parent's width\");\n  } else if (Math.abs(left - right) <= ALIGN_TOLERANCE_PX) {\n    parts.push(\"horizontally centred in parent\");\n  } else if (Math.abs(left) <= ALIGN_TOLERANCE_PX) {\n    parts.push(\"left edge flush with parent\");\n  } else if (Math.abs(right) <= ALIGN_TOLERANCE_PX) {\n    parts.push(\"right edge flush with parent\");\n  } else {\n    parts.push(`${Math.round(left)}px from parent's left, ${Math.round(right)}px from parent's right`);\n  }\n\n  if (previous) {\n    const gap = box.y - (previous.y + previous.height);\n    const vertical =\n      gap >= 0 ? `${Math.round(gap)}px below previous sibling` : `overlaps previous sibling by ${Math.round(-gap)}px`;\n    const shift = box.x - previous.x;\n    const horizontal =\n      Math.abs(shift) <= ALIGN_TOLERANCE_PX\n        ? \"left-aligned with it\"\n        : `${Math.round(Math.abs(shift))}px ${shift > 0 ? \"right\" : \"left\"} of its left edge`;\n    parts.push(`${vertical}, ${horizontal}`);\n  }\n\n  return parts.join(\"; \");\n}\n\n/** One element, as measured inside the page. Colours are as `getComputedStyle` printed them. */\nexport interface ElementMeasurement {\n  /** What the caller asked for: a ref (`e8`) or a selector. */\n  target: string;\n  tag: string;\n  id?: string;\n  classes: string[];\n  role?: string;\n  /** Accessible name, when the element has one. */\n  name?: string;\n  /** Own visible text, trimmed and elided. */\n  text?: string;\n  /** Viewport pixels. */\n  box: BoundingBox;\n  visible: boolean;\n  in_viewport: \"fully\" | \"partially\" | \"none\";\n  /** An ancestor with `overflow` other than visible cuts part of it off. */\n  clipped: boolean;\n  /** Its own content is wider or taller than the box it was given. */\n  text_overflows: boolean;\n  display: string;\n  position: string;\n  opacity: number;\n  font: { family: string; size: number; weight: number; line_height: number | null; style: string };\n  color: string;\n  /** Effective background: its own, composited over its ancestors' until opaque. */\n  background: string;\n  /** top, right, bottom, left — pixels. */\n  padding: [number, number, number, number];\n  margin: [number, number, number, number];\n  gap: number | null;\n  /** Shorthand as computed, e.g. `1px solid rgb(0, 0, 0)` or `0px none rgb(0, 0, 0)`. */\n  border: string;\n  radius: string;\n  parent?: { tag: string; box: BoundingBox };\n  previous?: { tag: string; box: BoundingBox };\n}\n\n/** The lines `framewatch_inspect` prints for one element. */\nexport function formatInspection(m: ElementMeasurement, index: number): string[] {\n  const lines: string[] = [];\n\n  const identity = [m.target, m.role ?? m.tag, m.name !== undefined ? `\"${m.name}\"` : null].filter(Boolean).join(\" \");\n  lines.push(`${index}. ${identity} — <${describeElement(m)}>`);\n\n  const { box } = m;\n  const centre = `${Math.round(box.x + box.width / 2)},${Math.round(box.y + box.height / 2)}`;\n  const state: string[] = [];\n  state.push(m.visible ? \"visible\" : `not visible${m.opacity === 0 ? \" (opacity 0)\" : \"\"}`);\n  state.push(\n    m.in_viewport === \"fully\"\n      ? \"fully in viewport\"\n      : m.in_viewport === \"partially\"\n        ? \"partly outside the viewport\"\n        : \"outside the viewport\",\n  );\n  if (m.clipped) state.push(\"clipped by an ancestor\");\n  if (m.text_overflows) state.push(\"text overflows its box\");\n  lines.push(`   box: ${box.x},${box.y} ${box.width}x${box.height} (viewport px; centre ${centre}) — ${state.join(\", \")}`);\n\n  lines.push(`   text: ${describeText(m)}`);\n\n  const spacing = [`padding ${sides(m.padding)}`, `margin ${sides(m.margin)}`];\n  if (m.gap !== null) spacing.push(`gap ${m.gap}`);\n  lines.push(`   spacing: ${spacing.join(\"; \")}`);\n\n  lines.push(`   border: ${describeBorder(m.border)}; radius ${m.radius}`);\n\n  const layout = [m.display];\n  if (m.position !== \"static\") layout.push(`position ${m.position}`);\n  if (m.parent) layout.push(describeAlignment(m.box, m.parent.box, m.previous?.box));\n  lines.push(`   layout: ${layout.join(\"; \")}`);\n\n  return lines;\n}\n\nfunction describeElement(m: ElementMeasurement): string {\n  let out = m.tag;\n  if (m.id) out += `#${m.id}`;\n  else if (m.classes.length > 0) out += `.${m.classes[0]}`;\n  return out;\n}\n\nfunction describeText(m: ElementMeasurement): string {\n  const font = m.font;\n  const size = font.line_height !== null ? `${font.size}px/${font.line_height}px` : `${font.size}px`;\n  const parts = [`${size} ${font.family} ${font.weight}${font.style !== \"normal\" ? ` ${font.style}` : \"\"}`];\n\n  const fg = parseColour(m.color);\n  const bg = parseColour(m.background);\n  // A translucent text colour renders as a blend with what is behind it; that\n  // blend is what the eye sees and what the contrast is rated on, so it is the\n  // one printed, with the declared value beside it.\n  const rendered = fg && bg && fg.a < 1 && bg.a >= 1 ? compositeOver(fg, bg) : fg;\n  const shownFg = rendered ? (fg && fg.a < 1 && rendered !== fg ? `${toHex(rendered)} (${toHex(fg)} as declared)` : toHex(rendered)) : m.color;\n  parts.push(`${shownFg} on ${bg ? toHex(bg) : m.background}`);\n\n  const hasText = (m.text ?? \"\").length > 0 || (m.name ?? \"\").length > 0;\n  if (hasText && rendered && bg && bg.a >= 1) {\n    parts.push(describeContrast(contrastRatio(rendered, bg), isLargeText(font.size, font.weight)));\n  }\n  return parts.join(\" — \");\n}\n\n/** `8 16 8 16` → `8 16`, `8 8 8 8` → `8`, the way a stylesheet would write it. */\nfunction sides([top, right, bottom, left]: [number, number, number, number]): string {\n  if (top === right && right === bottom && bottom === left) return String(top);\n  if (top === bottom && right === left) return `${top} ${right}`;\n  return `${top} ${right} ${bottom} ${left}`;\n}\n\nfunction describeBorder(border: string): string {\n  const match = /^([\\d.]+)px\\s+(\\w+)\\s+(.+)$/.exec(border.trim());\n  if (!match) return border || \"none\";\n  const width = Number(match[1]);\n  if (width === 0 || match[2] === \"none\") return \"none\";\n  const colour = parseColour(match[3]);\n  return `${match[1]}px ${match[2]} ${colour ? toHex(colour) : match[3]}`;\n}\n\n/* ── Page inventory ───────────────────────────────────────────────────── */\n\nexport interface Tally {\n  value: string;\n  count: number;\n}\n\n/** What the page is built from — every value in use, with how often. Most-used first. */\nexport interface PageInventory {\n  elements: number;\n  /** Elements with visible text of their own. */\n  text_elements: number;\n  fonts: Tally[];\n  font_sizes: Tally[];\n  font_weights: Tally[];\n  text_colours: Tally[];\n  backgrounds: Tally[];\n  /** Non-zero padding, margin and gap values. */\n  spacing: Tally[];\n  radii: Tally[];\n}\n\nexport function formatInventory(inventory: PageInventory): string[] {\n  const lines = [`Design inventory — ${inventory.elements} elements, ${inventory.text_elements} with text`];\n  const row = (label: string, tallies: Tally[]): void => {\n    if (tallies.length === 0) {\n      lines.push(`  ${label}: none`);\n      return;\n    }\n    lines.push(`  ${label} (${tallies.length}): ${tallies.map((t) => `${t.value} ×${t.count}`).join(\", \")}`);\n  };\n  row(\"fonts\", inventory.fonts);\n  row(\"font sizes\", inventory.font_sizes);\n  row(\"font weights\", inventory.font_weights);\n  row(\"text colours\", inventory.text_colours);\n  row(\"backgrounds\", inventory.backgrounds);\n  row(\"spacing\", inventory.spacing);\n  row(\"radii\", inventory.radii);\n  return lines;\n}\n"]}

package/dist/utils/test-data.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Test data generators.
+ *
+ * One job: given a field and a strategy, say what should go in it. Nothing
+ * here touches a browser, so the interesting decisions — what "valid" means
+ * for a field called `user_email`, what happens when Arabic text meets
+ * `<input type="date">` — are testable on their own.
+ *
+ * Two rules run through all of it:
+ *
+ *   - A value must be one the field can actually hold. Chromium refuses a
+ *     malformed value outright for the constrained input types (number, date,
+ *     color and friends), so a strategy that cannot be expressed in one of
+ *     them falls back to a valid value rather than producing a fill error that
+ *     says nothing about the app.
+ *   - A value never exceeds the field's own `maxlength`. Otherwise every
+ *     strategy would report the same truncation on the same short field, and
+ *     the one report that matters — an app truncating input in JavaScript,
+ *     with no maxlength anywhere — would be lost in it.
+ */
+export declare const FORM_STRATEGIES: readonly ["valid", "empty", "maxlength", "special_chars", "rtl_arabic", "numbers_only", "spaces_only", "boundary", "xss"];
+export type FormStrategy = (typeof FORM_STRATEGIES)[number];
+/**
+ * What `framewatch_form_test` runs when the caller names no strategies: the
+ * happy path, the empty submit, the characters that break naive escaping, and
+ * RTL text. Between them they catch most of what a form gets wrong.
+ */
+export declare const DEFAULT_FORM_STRATEGIES: FormStrategy[];
+/**
+ * The global an XSS payload sets when it executes.
+ *
+ * Payloads are written to assign this rather than to do anything: whether the
+ * marker is set after a submit is a yes/no answer to "did my input run as
+ * code", where looking for the payload in the DOM afterwards is guesswork —
+ * an input's own `value` serialises with its angle brackets intact and would
+ * read as an injection on a page that escaped everything correctly.
+ */
+export declare const XSS_MARKER = "__framewatch_xss";
+export interface OptionInfo {
+    value: string;
+    label: string;
+    disabled: boolean;
+}
+/** What the generators need to know about a field. A subset of `FieldInfo` in engine/forms.ts. */
+export interface FieldShape {
+    /** Input type lowercased ("text", "email", …), "textarea", or "select-one" / "select-multiple". */
+    type: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    maxlength?: number;
+    min?: string;
+    max?: string;
+    step?: string;
+}
+export declare function describeStrategy(strategy: FormStrategy): string;
+/**
+ * The value to put in a text-like field.
+ *
+ * `variant` is the field's position in the form. It is used to walk through
+ * the XSS payload list, so a form with five fields tries five different
+ * injections in one pass instead of the same one five times.
+ */
+export declare function valueFor(field: FieldShape, strategy: FormStrategy, variant?: number): string;
+/**
+ * Which option a `<select>` should end up on, or null to leave it alone.
+ *
+ * Disabled options are never chosen — picking one fails, and a form that
+ * offers nothing else has a bug worth reporting on its own.
+ */
+export declare function optionFor(field: FieldShape & {
+    options: OptionInfo[];
+}, strategy: FormStrategy): string | null;
+/** Whether a checkbox or radio should end up ticked. */
+export declare function checkedFor(strategy: FormStrategy): boolean;