@askewly/design 0.4.4 → 0.4.5

package/dist/index.js

@@ -198,16 +198,30 @@ program
             write(`  ${path.relative(target, skip.file)}:${skip.line} — ${skip.reason}`);
         }
     };
-    if (violations.length === 0) {
+    // M53 split the report by severity. Warnings are layer-1 slop detections:
+    // they name a spot a human (or layer 2) should look at, and a detection is
+    // not yet a verdict, so they must not fail the run.
+    const errors = violations.filter((v) => v.severity === "error");
+    const warnings = violations.filter((v) => v.severity === "warn");
+    const format = (violation) => `  ${path.relative(target, violation.file)}:${violation.line} [${violation.rule}] ${violation.excerpt}`;
+    const printWarnings = (write) => {
+        if (warnings.length === 0)
+            return;
+        write(`\n${warnings.length} slop signal(s) — detected, not judged (methodology/slop-verification-boundary.md):`);
+        for (const warning of warnings)
+            write(format(warning));
+    };
+    if (errors.length === 0) {
         console.log(`verify PASS — ${files} file(s) scanned, no color literals and no file over ${typographyThreshold} type sizes`);
         printSkips((line) => console.log(line));
+        printWarnings((line) => console.log(line));
         return;
     }
-    console.error(`verify FAIL — ${violations.length} violation(s) in ${files} file(s):`);
-    for (const violation of violations) {
-        console.error(`  ${path.relative(target, violation.file)}:${violation.line} [${violation.rule}] ${violation.excerpt}`);
-    }
+    console.error(`verify FAIL — ${errors.length} violation(s) in ${files} file(s):`);
+    for (const violation of errors)
+        console.error(format(violation));
     printSkips((line) => console.error(line));
+    printWarnings((line) => console.error(line));
     console.error("\nFix: replace color literals with semantic token utilities (bg-primary, text-foreground, ...);");
     console.error("     collapse extra type sizes onto the token scale, or raise --typography-threshold.");
     process.exit(1);

package/dist/inject.js

@@ -37,10 +37,15 @@ export function extractCodeSnippet(recipe) {
         throw new InjectError(`recipe "${recipe.id}" has no ## Code section`);
     }
     const fence = codeSection.match(/```[a-z]*\n([\s\S]*?)```/);
-    if (!fence) {
-        throw new InjectError(`recipe "${recipe.id}" has no fenced code block under ## Code`);
+    if (fence) {
+        return fence[1].trimEnd() + "\n";
     }
-    return fence[1].trimEnd() + "\n";
+    // 최근 회차 recipe 는 발췌 대신 code_asset 파일을 가리킨다 — build-data 가 그 원문을
+    // code_source 로 실어 주므로 오프라인 add 가 여기서도 성립한다 (2026-08-20).
+    if (recipe.code_source) {
+        return recipe.code_source.trimEnd() + "\n";
+    }
+    throw new InjectError(`recipe "${recipe.id}" has no fenced code block under ## Code`);
 }
 /** Extracts list items of a `## <title>` section (used for Checks / Anti-patterns notes). */
 export function extractSectionNotes(recipe, title) {

package/dist/kickstart.js

@@ -261,6 +261,19 @@ ${vars(c.light, a.light, a.onLight, a.ring, "light")}
 ${vars(c.dark, a.dark, a.onDark, a.darkRing, "dark")}
 }
 
+/* Reserve the vertical scrollbar's track at all times. Without this the page
+ * jumps sideways by the scrollbar width whenever content height crosses the
+ * viewport — a row expands, a filter narrows a list, a modal locks scroll — and
+ * it reads as the whole layout twitching. \`scrollbar-gutter: stable\` alone does
+ * NOT do it: that property has no effect while overflow is \`visible\`, which is
+ * the root element's default. Both declarations, or neither works. Measured
+ * 2026-08-12 on ui.askewly.com: clientWidth flipped 2545 <-> 2560 between a tall
+ * and a short page, and three separate design verdicts blamed the assets for it. */
+html {
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

package/dist/slop.js

@@ -0,0 +1,400 @@
+/**
+ * Layer-1 slop rules (M53).
+ *
+ * These implement the thresholds fixed in
+ * `methodology/slop-verification-boundary.md` §정량 임계치. Every rule here is
+ * a pair: `extract` pulls the signal out of the source, `score` compares it to
+ * a threshold T. The split is not decoration — T moves when new evidence
+ * arrives, and it must move without anyone reopening the extraction.
+ *
+ * Two boundaries hold this file down:
+ *
+ * 1. **Detection only.** Layer 1 answers "is it there", never "is it right".
+ *    Glassmorphism *exists* is a fact; whether it communicates depth or just
+ *    decorates is layer 2. A rule that reaches for the second question stops
+ *    being deterministic.
+ * 2. **Severity is not cosmetic.** Only a rule the catalog already bans *and*
+ *    that the external survey classified as deterministic-with-no-caveat gets
+ *    to fail a build. Everything else warns. Failing all of them would rebuild
+ *    the ban list that D3 threw out: the problem was never the value, it was
+ *    that nobody chose it.
+ */
+export function toLines(masked) {
+    return masked.split("\n").map((text, index) => ({ line: index + 1, text }));
+}
+/**
+ * Strips Tailwind variant prefixes: `md:dark:backdrop-blur-sm` → `backdrop-blur-sm`.
+ * Variants change *when* a utility applies, never *what* it is, so a rule that
+ * reads the prefix as part of the name sees a different class on every screen.
+ */
+export function stripVariants(utility) {
+    const parts = utility.split(":");
+    return parts[parts.length - 1];
+}
+// ---------------------------------------------------------------------------
+// 후보 1 — backdrop-filter (glassmorphism). T = 1 (존재하면 검출). 경고.
+//
+// Threshold source: 슬롭 판정 경계 §정량 임계치 #1 — external survey §3.4 P2,
+// five independent sources (Hallmark·Krebs·Impeccable·DeleteSlop·Calvo,
+// 접근일 2026-08-13), plus the local catalog's A section.
+//
+// Warning, not failure: the survey files P2 as "존재는 A, 정당성은 B" and
+// Hallmark conditions it on purpose ("works only when communicating depth").
+// So this rule reports the site and hands the judgment to layer 2.
+// ---------------------------------------------------------------------------
+const GLASS_CSS = /backdrop-filter\s*:/;
+/**
+ * The utility form. The trailing lookahead is what separates a class from a
+ * mention: a utility in a class list is always followed by whitespace, a
+ * quote, or a closing bracket. M53 step-3 measured the alternative — a plain
+ * `\b` also matched the prose "backdrop-blur가 전경 가독성을 보존합니다" in a
+ * paragraph *about* glassmorphism, because a Korean particle ends an ASCII
+ * word too.
+ */
+const GLASS_UTILITY = /(?:^|[\s"'`{(])(?:[a-z0-9[\]-]+:)*backdrop-blur(?:-[a-z0-9[\].\/-]+)?(?=["'`\s})\],;]|$)/;
+/**
+ * A quoted literal that holds nothing but the utility name, and that no class
+ * attribute introduces, is an identifier rather than a class list — a term id
+ * in an array, or the right-hand side of `kind === "backdrop-blur"`. Both were
+ * measured in step-3.
+ *
+ * The lookbehind names the class attribute rather than a bare `=`: an equals
+ * sign also precedes `kind === "backdrop-blur"`, so the looser form let that
+ * comparison through on the first pass.
+ */
+const GLASS_IDENTIFIER = /(?<!class(?:Name)?\s{0,3}=\s{0,3})(["'`])backdrop-blur(?:-[a-z0-9-]+)?\1/g;
+/** Lines that declare a backdrop blur, in CSS or as a Tailwind utility. */
+export function extractGlass(lines) {
+    return lines.filter(({ text }) => {
+        if (GLASS_CSS.test(text))
+            return true;
+        return GLASS_UTILITY.test(text.replace(GLASS_IDENTIFIER, ""));
+    });
+}
+export function scoreGlass(signal, threshold = GLASS_LIMIT) {
+    if (signal.length < threshold)
+        return [];
+    return signal.map(({ line, text }) => ({
+        line,
+        rule: "slop-glass",
+        excerpt: `backdrop blur: ${text.trim().slice(0, 100)}`,
+    }));
+}
+/** One occurrence is the signal. There is no "a little glassmorphism". */
+export const GLASS_LIMIT = 1;
+// ---------------------------------------------------------------------------
+// 후보 2 — gradient text. T = 1 (조합이 한 번이라도 성립하면 검출). 하드 실패.
+//
+// Threshold source: 슬롭 판정 경계 §정량 임계치 #2 — external survey §3.1 C3
+// and its A table ("헤드라인은 background-clip: text 존재로 확정"), three
+// sources (Hallmark G2·Krebs·Impeccable, 접근일 2026-08-13). The local
+// catalog already bans it outright, which is the second half of the only
+// condition that earns a hard failure.
+//
+// The clip and the gradient are read as a pair on purpose. `bg-clip-text`
+// alone is a legitimate way to paint text with an image, and a gradient alone
+// is a background. It is the combination that the survey named.
+// ---------------------------------------------------------------------------
+const CLIP_TO_TEXT = /(?:-webkit-)?background-clip\s*:\s*text|(?:^|[\s"'`{(])(?:[a-z0-9[\]-]+:)*bg-clip-text\b/;
+const GRADIENT = /(?:linear|radial|conic)-gradient\(|(?:^|[\s"'`{(])(?:[a-z0-9[\]-]+:)*bg-(?:gradient-to-[trbl]+|linear-to-[trbl]+|linear-\d|radial|conic)\b/;
+/**
+ * The two halves, each with the line it was found on. Whole-file scope: the
+ * clip lives on the element and the gradient often on the line above or in a
+ * sibling class string, so a per-line rule would see neither.
+ */
+export function extractGradientText(lines) {
+    return {
+        clip: lines.find(({ text }) => CLIP_TO_TEXT.test(text)) ?? null,
+        gradient: lines.find(({ text }) => GRADIENT.test(text)) ?? null,
+    };
+}
+export function scoreGradientText(signal, threshold = GRADIENT_TEXT_LIMIT) {
+    const pairs = signal.clip && signal.gradient ? 1 : 0;
+    if (pairs < threshold)
+        return [];
+    const clip = signal.clip;
+    return [
+        {
+            line: clip.line,
+            rule: "slop-gradient-text",
+            // Reported at the clip, pointing at the gradient: the fix is to drop one
+            // of the two, and the reader needs both addresses to choose which.
+            excerpt: `gradient text: background-clip to text here, gradient at line ${signal.gradient.line}`,
+        },
+    ];
+}
+/** One pairing is the signal. */
+export const GRADIENT_TEXT_LIMIT = 1;
+// ---------------------------------------------------------------------------
+// 후보 5 — 폰트가 디폴트뿐. T = 부분집합 성립 (집합 크기와 무관). 경고.
+//
+// Threshold source: 슬롭 판정 경계 §정량 임계치 #5 — external survey §3.2
+// T1·T2 (접근일 2026-08-13). Rank-2 signal, seven sources.
+//
+// Warning by D3: the same name is a choice in one project and a leftover in
+// another, and a text scanner cannot tell them apart. What it can do is say
+// "every face on this page is one the survey keeps naming" and let a person
+// answer whether that was on purpose.
+//
+// ⚠ Membership here does not mean "framework default". The survey could not
+// confirm the common claim that Geist is Next.js's default font
+// (https://vercel.com/font carries no such wording, 접근일 2026-08-13). These
+// names are on the list because the survey's sources keep naming them, which
+// is a weaker and more honest reason.
+// ---------------------------------------------------------------------------
+const DEFAULT_FACES = new Set([
+    // Hallmark G1 — display set by a system or Google-default face.
+    "inter",
+    "roboto",
+    "open sans",
+    "poppins",
+    "lato",
+    "system-ui",
+    "-apple-system",
+    "blinkmacsystemfont",
+    "segoe ui",
+    "helvetica",
+    "helvetica neue",
+    "arial",
+    "sans-serif",
+    "serif",
+    "monospace",
+    // Krebs / Design Slop Cop / Impeccable — the 2026 "tasteful default" set.
+    "space grotesk",
+    "instrument serif",
+    "geist",
+    "geist mono",
+    "syne",
+    "fraunces",
+]);
+// `font-family: "Söhne", Inter, sans-serif` and the JS object form.
+const FONT_FAMILY_CSS = /font-family\s*:\s*([^;}\n]+)/g;
+const FONT_FAMILY_JS = /fontFamily\s*:\s*["'`]([^"'`]+)["'`]/g;
+/**
+ * The first name of each font stack, lowercased.
+ *
+ * Only the first position counts, matching how the survey states the check
+ * ("computed `font-family` 첫 항목이 금지 목록에 있는지"). Everything after it
+ * is a fallback the user is unlikely to ever see, and counting fallbacks would
+ * flag every stack ever written, since they all end in a generic name.
+ */
+export function extractFontFaces(lines) {
+    const faces = new Set();
+    let first = null;
+    for (const entry of lines) {
+        for (const rule of [FONT_FAMILY_CSS, FONT_FAMILY_JS]) {
+            rule.lastIndex = 0;
+            for (const match of entry.text.matchAll(rule)) {
+                const head = match[1].split(",")[0].trim().replace(/^["']|["']$/g, "").toLowerCase();
+                if (head.length === 0 || head.startsWith("var("))
+                    continue;
+                faces.add(head);
+                first ??= entry;
+            }
+        }
+    }
+    return { faces, first };
+}
+export function scoreDefaultFontOnly(signal, defaults = DEFAULT_FACES) {
+    if (signal.faces.size === 0 || signal.first === null)
+        return [];
+    const outliers = [...signal.faces].filter((face) => !defaults.has(face));
+    if (outliers.length > 0)
+        return [];
+    return [
+        {
+            line: signal.first.line,
+            rule: "slop-default-font-only",
+            excerpt: `every declared face is one the survey names: ${[...signal.faces].join(", ")}`,
+        },
+    ];
+}
+// ---------------------------------------------------------------------------
+// 후보 9 — 분리 수단 3개 이상 중첩. T = 3. 경고.
+//
+// Threshold source: 슬롭 판정 경계 §정량 임계치 #9 — KG
+// `separation-means-overuse-is-ai-slop` ("한 블록에 분리 수단이 3개 이상
+// 겹치면 슬롭 신호다", 2026-08-06), resting on knowledge/dashboard-density.md
+// §2 and Apple HIG Layout (접근일 2026-08-12).
+//
+// This is the one rule here whose source is ours rather than the survey's. The
+// survey lists the symptoms separately (nested cards, side stripes, hairline
+// plus shadow) but never names the count as the cause. That also means the
+// evidence is thinner: the KG node is `status: draft` off a single
+// measurement, which is exactly why this warns instead of failing — and why
+// running it across the live assets doubles as the reproduction check that
+// node has been waiting for.
+//
+// Padding is deliberately not counted. It is level 1 of the hierarchy and the
+// prescribed default; counting it would make every padded surface a finding
+// and say nothing. The measured case counted tint + left bar + border + badge.
+// ---------------------------------------------------------------------------
+/** `className="…"`, `class='…'`, and the quoted parts of `className={…}`. */
+const CLASS_ATTRIBUTE = /class(?:Name)?\s*=\s*(?:"([^"]*)"|'([^']*)'|\{([\s\S]*?)\})/g;
+const QUOTED_INSIDE_BRACES = /["'`]([^"'`]*)["'`]/g;
+/**
+ * The separation means present in one class string, by name.
+ *
+ * Three are counted: background difference, elevation, and the left accent
+ * bar. The bar stays apart from the border because the measured case had both.
+ *
+ * **Rounding and border are one mean, not two** (M53 step-3 correction).
+ * Counting them separately scored every ordinary card at 3 and made the rule
+ * fire 763 times across 158 files, 752 of them the identical
+ * `rounding + border + background` triple. Our own published knowledge says
+ * why that count is wrong: knowledge/dashboard-density.md §2-나 (M48,
+ * 2026-08-12) has border, radius and shadow chosen together as **one elevation
+ * step**, following Geist. One decision must not score as two.
+ *
+ * T did not move. The threshold is still 3, per the KG node; what was wrong
+ * was the signal definition, and the measured case it came from still trips
+ * the rule after the fold (tint + left bar + elevation = 3).
+ */
+export function separationMeans(classes) {
+    const utilities = classes.split(/\s+/).filter(Boolean).map(stripVariants);
+    const means = new Set();
+    for (const utility of utilities) {
+        // `bg-clip-text`, `bg-gradient-to-r`, `bg-cover` and friends set no surface.
+        if (/^bg-(?!clip-|gradient-|linear-|radial|conic|cover|contain|center|top|bottom|left|right|repeat|no-repeat|fixed|local|scroll|origin-|blend-|none$|transparent$|inherit$|current$)[a-z0-9]/.test(utility)) {
+            means.add("background");
+        }
+        if (/^rounded(?:-(?!none$)[a-z0-9[\]/.-]+)?$/.test(utility))
+            means.add("elevation");
+        if (/^border-l(?:-|$)/.test(utility))
+            means.add("left-bar");
+        else if (/^border(?:-(?!l$|l-)[a-z0-9[\]/.-]+)?$/.test(utility) && !/^border-(?:none|0)$/.test(utility)) {
+            means.add("elevation");
+        }
+    }
+    return [...means];
+}
+export function extractSeparation(lines) {
+    const found = [];
+    for (const { line, text } of lines) {
+        CLASS_ATTRIBUTE.lastIndex = 0;
+        for (const match of text.matchAll(CLASS_ATTRIBUTE)) {
+            const braces = match[3];
+            const classes = braces === undefined ? (match[1] ?? match[2] ?? "") : [...braces.matchAll(QUOTED_INSIDE_BRACES)].map((m) => m[1]).join(" ");
+            found.push({ line, means: separationMeans(classes) });
+        }
+    }
+    return found;
+}
+export function scoreSeparation(signal, threshold = SEPARATION_LIMIT) {
+    return signal
+        .filter((block) => block.means.length >= threshold)
+        .map(({ line, means }) => ({
+        line,
+        rule: "slop-separation-overuse",
+        excerpt: `${means.length} separation means on one block (limit ${threshold - 1}): ${means.join(" + ")}`,
+    }));
+}
+/** Three overlapping means is the signal, per the KG node. */
+export const SEPARATION_LIMIT = 3;
+// ---------------------------------------------------------------------------
+// 후보 10 — 배경 레벨 3단 이상. T = 2 상한. 경고.
+//
+// Threshold source: 슬롭 판정 경계 §정량 임계치 #10 —
+// knowledge/dashboard-density.md §2-3 "페이지 배경은 2단 상한 (Geist
+// Background 1/2)", 근거 장부 research/2026-08-01-m8-dashboard-density-capture.md
+// (Geist Colors 실브라우저 캡처, 접근일 2026-08-01).
+//
+// Same shape as `typography-scale-exceeded`: count distinct steps per file and
+// compare. Only the neutral surfaces count. Accent, status and brand surfaces
+// are a different channel — they carry meaning rather than depth, and folding
+// them in would make every screen with a danger banner a finding.
+// ---------------------------------------------------------------------------
+/** Neutral surface roles from the token SSOT (`color.semantic.surface`). */
+const NEUTRAL_SURFACES = new Set(["background", "card", "popover", "muted", "secondary"]);
+/** Off-token grey families. A hand-picked grey is a level too, and the third
+ * one is precisely what this rule exists to notice. */
+const GREY_FAMILIES = /^(?:gray|grey|slate|zinc|neutral|stone)-\d{2,3}$/;
+function levelName(utility, prefix, roles) {
+    if (!utility.startsWith(`${prefix}-`))
+        return null;
+    // `bg-muted/60` and `text-foreground/80` are the same level at another alpha.
+    const name = utility.slice(prefix.length + 1).split("/")[0];
+    if (roles.has(name))
+        return name;
+    if (GREY_FAMILIES.test(name))
+        return name;
+    return null;
+}
+function extractLevels(lines, prefix, roles) {
+    const levels = new Map();
+    for (const { line, text } of lines) {
+        CLASS_ATTRIBUTE.lastIndex = 0;
+        for (const match of text.matchAll(CLASS_ATTRIBUTE)) {
+            const braces = match[3];
+            const classes = braces === undefined
+                ? (match[1] ?? match[2] ?? "")
+                : [...braces.matchAll(QUOTED_INSIDE_BRACES)].map((m) => m[1]).join(" ");
+            for (const utility of classes.split(/\s+/).filter(Boolean).map(stripVariants)) {
+                const name = levelName(utility, prefix, roles);
+                if (name !== null && !levels.has(name))
+                    levels.set(name, line);
+            }
+        }
+    }
+    return { levels };
+}
+export function extractSurfaceLevels(lines) {
+    return extractLevels(lines, "bg", NEUTRAL_SURFACES);
+}
+function scoreLevels(signal, rule, limit, label) {
+    const names = [...signal.levels.keys()];
+    if (names.length <= limit)
+        return [];
+    // Reported where the step that broke the limit first appears, matching how
+    // the typography rule points at the breaking line rather than line 1.
+    const breaking = [...signal.levels.values()][limit];
+    return [
+        {
+            line: breaking,
+            rule,
+            excerpt: `${label}: ${names.join(", ")} (${names.length} > limit ${limit})`,
+        },
+    ];
+}
+export function scoreSurfaceLevels(signal, limit = SURFACE_LEVEL_LIMIT) {
+    return scoreLevels(signal, "slop-surface-levels", limit, "neutral surface levels");
+}
+/** Two, per the density doc. The third one is where layers start piling up. */
+export const SURFACE_LEVEL_LIMIT = 2;
+// ---------------------------------------------------------------------------
+// 후보 11 — 텍스트 색 3단 이상. T = 2 상한. 경고.
+//
+// Threshold source: 슬롭 판정 경계 §정량 임계치 #11 —
+// knowledge/dashboard-density.md §3-2 "텍스트 위계는 2단 — primary/secondary.
+// 세 번째 회색이 필요해 보이면 위계 설계 실패 신호".
+//
+// `card-foreground` and `popover-foreground` fold into `foreground`: in the
+// token SSOT all three resolve to the same value, so counting them apart would
+// report a hierarchy that nobody can see on screen.
+//
+// On-colour roles (`primary-foreground`, `accent-foreground`, and the status
+// foregrounds) are excluded for the same reason surfaces exclude status: they
+// are the readable pair of a coloured surface, not a step in the neutral
+// hierarchy.
+// ---------------------------------------------------------------------------
+const NEUTRAL_TEXT = new Set(["foreground", "muted-foreground", "secondary-foreground"]);
+/** Aliases that resolve to the same token value in the SSOT. */
+const TEXT_ALIASES = {
+    "card-foreground": "foreground",
+    "popover-foreground": "foreground",
+};
+export function extractTextLevels(lines) {
+    const raw = extractLevels(lines, "text", new Set([...NEUTRAL_TEXT, ...Object.keys(TEXT_ALIASES)]));
+    const levels = new Map();
+    for (const [name, line] of raw.levels) {
+        const canonical = TEXT_ALIASES[name] ?? name;
+        if (!levels.has(canonical))
+            levels.set(canonical, line);
+    }
+    return { levels };
+}
+export function scoreTextLevels(signal, limit = TEXT_LEVEL_LIMIT) {
+    return scoreLevels(signal, "slop-text-levels", limit, "neutral text levels");
+}
+/** Two, per the density doc: primary and secondary. */
+export const TEXT_LEVEL_LIMIT = 2;

package/dist/verify.js

@@ -1,6 +1,17 @@
 import { readFileSync, readdirSync, statSync } from "node:fs";
 import path from "node:path";
 import { DEFAULT_TYPOGRAPHY_THRESHOLD, typographyViolation } from "./typography.js";
+import { extractFontFaces, extractGlass, extractGradientText, extractSeparation, extractSurfaceLevels, extractTextLevels, scoreDefaultFontOnly, scoreSeparation, scoreSurfaceLevels, scoreTextLevels, scoreGlass, scoreGradientText, toLines, } from "./slop.js";
+/** Severity per slop rule. Thresholds and the reason for each grade live in
+ * `methodology/slop-verification-boundary.md` §정량 임계치. */
+const SLOP_SEVERITY = {
+    "slop-glass": "warn",
+    "slop-gradient-text": "error",
+    "slop-default-font-only": "warn",
+    "slop-separation-overuse": "warn",
+    "slop-surface-levels": "warn",
+    "slop-text-levels": "warn",
+};
 /**
  * File-level opt-out for the typography rule. Some files are not one screen —
  * a gallery holding a dozen demos, a miniature mockup drawn at fractional
@@ -168,12 +179,33 @@ export function verifyDir(dir, extensions = DEFAULT_EXTENSIONS, options = {}) {
                     continue;
                 // Report the untouched source line — the mask is a matching device,
                 // not something the reader should have to decode.
-                violations.push({ file, line: index + 1, rule: name, excerpt: original[index].trim().slice(0, 120) });
+                violations.push({ file, line: index + 1, rule: name, excerpt: original[index].trim().slice(0, 120), severity: "error" });
             }
         });
         // The marker is read from the original source: it lives in a comment, and
         // the masked copy has blanked those out.
         const markerLine = original.findIndex((text) => TYPOGRAPHY_MARKER.test(text));
+        const notOneScreen = markerLine !== -1 && (TYPOGRAPHY_MARKER.exec(original[markerLine])?.[1] ?? "").trim().length > 0;
+        // Layer-1 slop rules (M53). They read the same masked copy: a blur named in
+        // a comment is not a blur that renders.
+        //
+        // The two counting rules honour the same file-level marker the typography
+        // rule uses, because they ask the same question of the same unit: how many
+        // steps does *one screen* use. M53 step-3 measured what happens otherwise —
+        // six of ten level findings came from gallery files holding a dozen demos
+        // each, where the count is arithmetically right and means nothing.
+        const lines = toLines(masked);
+        const slop = [
+            ...scoreGlass(extractGlass(lines)),
+            ...scoreGradientText(extractGradientText(lines)),
+            ...scoreDefaultFontOnly(extractFontFaces(lines)),
+            ...scoreSeparation(extractSeparation(lines)),
+            ...(notOneScreen ? [] : scoreSurfaceLevels(extractSurfaceLevels(lines))),
+            ...(notOneScreen ? [] : scoreTextLevels(extractTextLevels(lines))),
+        ];
+        for (const finding of slop) {
+            violations.push({ file, ...finding, severity: SLOP_SEVERITY[finding.rule] });
+        }
         if (markerLine !== -1) {
             const reason = (TYPOGRAPHY_MARKER.exec(original[markerLine])?.[1] ?? "").trim();
             if (reason.length === 0) {
@@ -182,6 +214,7 @@ export function verifyDir(dir, extensions = DEFAULT_EXTENSIONS, options = {}) {
                     line: markerLine + 1,
                     rule: "typography-marker-no-reason",
                     excerpt: "askewly-typography-ok needs a reason: askewly-typography-ok: <why this file is not one screen>",
+                    severity: "error",
                 });
             }
             else {
@@ -200,6 +233,7 @@ export function verifyDir(dir, extensions = DEFAULT_EXTENSIONS, options = {}) {
                 line: typography.line,
                 rule: "typography-scale-exceeded",
                 excerpt: `font-size steps${where}: ${typography.steps.join(", ")} (${typography.steps.length} > limit ${typography.threshold})`,
+                severity: "error",
             });
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askewly/design",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Query, inject, and verify the Askewly Design system (tokens, UI vocabulary, recipes) from your terminal or coding agent.",
   "license": "MIT",
   "homepage": "https://ui.askewly.com",