From ae1beff69f207f2a2e76d12d859eeb3d476703c0 Mon Sep 17 00:00:00 2001
From: Sunny Karri <sunny.karri@wonderful.com>
Date: Tue, 19 May 2026 08:59:54 -0700
Subject: [PATCH] Improve validator coverage and add feature flag editor
 example

---
 README.md                                     |   8 +-
 bloom-validator/README.md                     |  10 +-
 bloom-validator/package.json                  |   2 +-
 bloom-validator/src/rule-registry.ts          |   6 +
 .../src/rules/no-empty-elements.ts            |  31 ++
 .../src/rules/no-inline-styles-except-root.ts |  29 ++
 .../src/rules/responsive-images.ts            |  34 +++
 ...invalid-responsive-empty-inline-style.html |  24 ++
 bloom-validator/tests/validator.test.ts       |  17 ++
 examples/design-system-example.html           |  30 +-
 examples/feature-flag-editor-example.html     | 283 ++++++++++++++++++
 examples/pr-review-example.html               |   9 +-
 templates/annotated-pr-review.html            |  33 +-
 templates/status-report-v2.html               |  10 +-
 templates/status-report.html                  |  12 +-
 15 files changed, 496 insertions(+), 42 deletions(-)
 create mode 100644 bloom-validator/src/rules/no-empty-elements.ts
 create mode 100644 bloom-validator/src/rules/no-inline-styles-except-root.ts
 create mode 100644 bloom-validator/src/rules/responsive-images.ts
 create mode 100644 bloom-validator/tests/fixtures/invalid-responsive-empty-inline-style.html
 create mode 100644 examples/feature-flag-editor-example.html
diff --git a/README.md b/README.md
index a17f2fa..90c8baa 100644
--- a/README.md
+++ b/README.md
@@ -273,7 +273,8 @@ Bloom/
 ├── examples/                                    # Fully worked artifacts
 │   ├── pr-review-example.html
 │   ├── incident-report-example.html
-│   └── design-system-example.html
+│   ├── design-system-example.html
+│   └── feature-flag-editor-example.html
 └── .github/
     └── workflows/
         └── ci.yml                               # Validator tests + artifact validation
@@ -368,7 +369,7 @@ cd bloom-validator && npm run validate-all
 
 Exit codes: `0` clean, `1` errors found, `2` invalid usage.
 
-The validator currently enforces 10 rules:
+The validator currently enforces 13 rules:
 
 - `no-external-deps`
 - `no-hardcoded-hex`
@@ -379,6 +380,9 @@ The validator currently enforces 10 rules:
 - `no-dialog-apis`
 - `lang-attribute`
 - `focus-visible`
+- `responsive-images`
+- `no-empty-elements`
+- `no-inline-styles-except-root`
 - `security-hardening` (bundles `no-eval`, `innerHTML-with-variable`, `no-network`, `no-inline-handlers`, `no-data-html-uri`, `no-javascript-uri`, and two more — see [`bloom-validator/README.md`](bloom-validator/README.md))
 
 Every template under `templates/` and every artifact under `examples/` passes this validator on every push (see [`.github/workflows/ci.yml`](.github/workflows/ci.yml)).
diff --git a/bloom-validator/README.md b/bloom-validator/README.md
index 4a2ce3a..3b66eeb 100644
--- a/bloom-validator/README.md
+++ b/bloom-validator/README.md
@@ -18,7 +18,7 @@ Exit codes:
 
 ## Rules implemented
 
-The validator currently enforces 10 rules. Each rule is a single file under [`src/rules/`](src/rules/) and is registered in [`src/rule-registry.ts`](src/rule-registry.ts).
+The validator currently enforces 13 rules. Each rule is a single file under [`src/rules/`](src/rules/) and is registered in [`src/rule-registry.ts`](src/rule-registry.ts).
 
 | ID | Name | Severity | Description |
 |---|---|---|---|
@@ -31,6 +31,9 @@ The validator currently enforces 10 rules. Each rule is a single file under [`sr
 | `rule-12` | `no-dialog-apis` | error | No `alert()`, `prompt()`, or `confirm()` calls in inline `<script>` |
 | `rule-13` | `lang-attribute` | error | `<html>` must have a non-empty `lang` attribute |
 | `rule-14` | `focus-visible` | warning | Warns when interactive elements exist but no `:focus`/`:focus-visible` style is defined |
+| `rule-15` | `responsive-images` | warning | Warns when `<img>` elements exist but no responsive `img { max-width: 100%; ... }` style is defined |
+| `rule-16` | `no-empty-elements` | warning | Warns on empty `<div>`, `<span>`, and `<p>` elements unless marked with `data-template` or `aria-hidden` |
+| `rule-17` | `no-inline-styles-except-root` | error | No inline `style=` attributes; move styles into the document stylesheet and use tokens |
 | `security` | `security-hardening` | error | Bundle of S2/S3/S4/S5/S6/S8 checks — see below |
 
 The `security-hardening` rule emits issues under these `ruleName`s, all classified under rule id `security`:
@@ -46,11 +49,8 @@ The `security-hardening` rule emits issues under these `ruleName`s, all classifi
 
 The following are part of Bloom's published construction rules but are not yet implemented in the validator. They are tracked roadmap items, not silent stubs:
 
-- `responsive-images` — `<img>` should declare `max-width`
 - `aria-landmarks` — landmark role coverage
 - `contrast-minimum` — token-pair contrast heuristic
-- `no-empty-elements` — empty `<div>`/`<span>`/`<p>`
-- `no-inline-styles-except-root` — `style=` attribute outside `<style>` blocks
 
 If you'd like to implement one, drop a file under `src/rules/`, export a `Rule`, and add it to `src/rule-registry.ts`.
 
@@ -83,7 +83,7 @@ When multiple files are passed, the top level is an array of these objects.
 npm test
 ```
 
-12 tests under [`tests/`](tests/) cover one passing file (`valid.html`), one false-positive guard (`valid-with-urls.html`), and one targeted failure fixture per rule family.
+13 tests under [`tests/`](tests/) cover one passing file (`valid.html`), one false-positive guard (`valid-with-urls.html`), and one targeted failure fixture per rule family.
 
 ## Validating every template, skeleton, and example
 
diff --git a/bloom-validator/package.json b/bloom-validator/package.json
index 8542a52..0a8a8e8 100644
--- a/bloom-validator/package.json
+++ b/bloom-validator/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bloom-validator",
   "version": "1.0.0",
-  "description": "Validates .html files against Bloom's 12 construction rules and 8 security rules",
+  "description": "Validates self-contained Bloom .html artifacts against active construction and security rules",
   "type": "module",
   "bin": {
     "bloom-validate": "./src/index.ts"
diff --git a/bloom-validator/src/rule-registry.ts b/bloom-validator/src/rule-registry.ts
index 8071e7f..c64d1a7 100644
--- a/bloom-validator/src/rule-registry.ts
+++ b/bloom-validator/src/rule-registry.ts
@@ -2,10 +2,13 @@ import type { Rule } from "./types.ts";
 import { focusVisible } from "./rules/focus-visible.ts";
 import { headingHierarchy } from "./rules/heading-hierarchy.ts";
 import { langAttribute } from "./rules/lang-attribute.ts";
+import { noEmptyElements } from "./rules/no-empty-elements.ts";
 import { noDialogApis } from "./rules/no-dialog-apis.ts";
 import { noExternalDeps } from "./rules/no-external-deps.ts";
 import { noHardcodedHex } from "./rules/no-hardcoded-hex.ts";
+import { noInlineStylesExceptRoot } from "./rules/no-inline-styles-except-root.ts";
 import { printMediaQuery } from "./rules/print-media-query.ts";
+import { responsiveImages } from "./rules/responsive-images.ts";
 import { securityHardening } from "./rules/security-hardening.ts";
 import { semanticHtml } from "./rules/semantic-html.ts";
 import { viewportMeta } from "./rules/viewport-meta.ts";
@@ -20,5 +23,8 @@ export const ALL_RULES: Rule[] = [
   noDialogApis,
   langAttribute,
   focusVisible,
+  responsiveImages,
+  noEmptyElements,
+  noInlineStylesExceptRoot,
   securityHardening,
 ];
diff --git a/bloom-validator/src/rules/no-empty-elements.ts b/bloom-validator/src/rules/no-empty-elements.ts
new file mode 100644
index 0000000..eb73b08
--- /dev/null
+++ b/bloom-validator/src/rules/no-empty-elements.ts
@@ -0,0 +1,31 @@
+import type { Issue, Rule } from "../types.ts";
+import { offsetToLine, snippet } from "../parser.ts";
+
+const EMPTY_ELEMENT_RE = /<(div|span|p)\b([^>]*)>\s*<\/\1>/gi;
+
+export const noEmptyElements: Rule = {
+  id: "rule-16",
+  name: "no-empty-elements",
+  check(ctx): Issue[] {
+    const issues: Issue[] = [];
+    let m: RegExpExecArray | null;
+    EMPTY_ELEMENT_RE.lastIndex = 0;
+
+    while ((m = EMPTY_ELEMENT_RE.exec(ctx.source)) !== null) {
+      const attrs = m[2] ?? "";
+      if (/\b(?:aria-hidden|data-template|class|role)\b/i.test(attrs)) continue;
+
+      const line = offsetToLine(ctx.source, m.index);
+      issues.push({
+        rule: "rule-16",
+        ruleName: "no-empty-elements",
+        severity: "warning",
+        line,
+        message: `Empty <${m[1]}> element found — remove it or mark intentional generated content with data-template (Rule 16)`,
+        snippet: snippet(ctx.lines, line),
+      });
+    }
+
+    return issues;
+  },
+};
diff --git a/bloom-validator/src/rules/no-inline-styles-except-root.ts b/bloom-validator/src/rules/no-inline-styles-except-root.ts
new file mode 100644
index 0000000..85ef71b
--- /dev/null
+++ b/bloom-validator/src/rules/no-inline-styles-except-root.ts
@@ -0,0 +1,29 @@
+import type { Issue, Rule } from "../types.ts";
+import { offsetToLine, snippet } from "../parser.ts";
+
+const STYLE_ATTR_RE = /<[^>]+\sstyle\s*=\s*("([^"]*)"|'([^']*)'|[^\s>]+)[^>]*>/gi;
+
+export const noInlineStylesExceptRoot: Rule = {
+  id: "rule-17",
+  name: "no-inline-styles-except-root",
+  check(ctx): Issue[] {
+    const issues: Issue[] = [];
+    let m: RegExpExecArray | null;
+    STYLE_ATTR_RE.lastIndex = 0;
+
+    while ((m = STYLE_ATTR_RE.exec(ctx.source)) !== null) {
+      const line = offsetToLine(ctx.source, m.index);
+      issues.push({
+        rule: "rule-17",
+        ruleName: "no-inline-styles-except-root",
+        severity: "error",
+        line,
+        message:
+          "Inline `style=` attributes are forbidden — move styles into the document stylesheet and use tokens (Rule 17)",
+        snippet: snippet(ctx.lines, line),
+      });
+    }
+
+    return issues;
+  },
+};
diff --git a/bloom-validator/src/rules/responsive-images.ts b/bloom-validator/src/rules/responsive-images.ts
new file mode 100644
index 0000000..0ed7f35
--- /dev/null
+++ b/bloom-validator/src/rules/responsive-images.ts
@@ -0,0 +1,34 @@
+import type { Issue, Rule } from "../types.ts";
+import { offsetToLine, snippet } from "../parser.ts";
+
+const IMG_RE = /<img\b[^>]*>/gi;
+const RESPONSIVE_IMG_CSS_RE =
+  /(?:^|})\s*(?:img|picture\s+img|figure\s+img|\.responsive-img)\b[^{]*\{[^}]*\bmax-width\s*:\s*100%/i;
+
+export const responsiveImages: Rule = {
+  id: "rule-15",
+  name: "responsive-images",
+  check(ctx): Issue[] {
+    const images = [...ctx.source.matchAll(IMG_RE)];
+    if (images.length === 0) return [];
+
+    const hasResponsiveRule = ctx.styleBlocks.some((block) =>
+      RESPONSIVE_IMG_CSS_RE.test(block.content),
+    );
+    if (hasResponsiveRule) return [];
+
+    const first = images[0]!;
+    const line = offsetToLine(ctx.source, first.index ?? 0);
+    return [
+      {
+        rule: "rule-15",
+        ruleName: "responsive-images",
+        severity: "warning",
+        line,
+        message:
+          "Images are present but no responsive `img { max-width: 100%; ... }` style was found (Rule 15)",
+        snippet: snippet(ctx.lines, line),
+      },
+    ];
+  },
+};
diff --git a/bloom-validator/tests/fixtures/invalid-responsive-empty-inline-style.html b/bloom-validator/tests/fixtures/invalid-responsive-empty-inline-style.html
new file mode 100644
index 0000000..e880a01
--- /dev/null
+++ b/bloom-validator/tests/fixtures/invalid-responsive-empty-inline-style.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Warns — image and empty elements</title>
+<style>
+:root { --slate: #141413; --ivory: #FAF9F5; }
+body { background: var(--ivory); color: var(--slate); padding: 2rem; }
+:focus-visible { outline: 2px solid var(--slate); }
+@media print { body { padding: 0; } }
+</style>
+</head>
+<body>
+<header><h1>Missing responsive image styles</h1></header>
+<main>
+  <section>
+    <img src="diagram.png" alt="Dependency graph">
+    <p></p>
+    <div style="color: var(--slate)">Inline style should move to the stylesheet.</div>
+  </section>
+</main>
+</body>
+</html>
diff --git a/bloom-validator/tests/validator.test.ts b/bloom-validator/tests/validator.test.ts
index ae35b13..4dda127 100644
--- a/bloom-validator/tests/validator.test.ts
+++ b/bloom-validator/tests/validator.test.ts
@@ -174,4 +174,21 @@ describe("bloom-validator", () => {
       assert.equal(issue.severity, "warning");
     }
   });
+
+  it("flags unresponsive images, empty elements, and inline styles", () => {
+    const { path, source } = load("invalid-responsive-empty-inline-style.html");
+    const report = validate(path, source);
+    assert.equal(report.passed, false);
+
+    const rules = new Set(report.issues.map((i) => i.ruleName));
+    assert.ok(rules.has("responsive-images"), `missing responsive-images in ${[...rules].join(", ")}`);
+    assert.ok(rules.has("no-empty-elements"), `missing no-empty-elements in ${[...rules].join(", ")}`);
+    assert.ok(
+      rules.has("no-inline-styles-except-root"),
+      `missing no-inline-styles-except-root in ${[...rules].join(", ")}`,
+    );
+
+    const inlineStyle = report.issues.find((i) => i.ruleName === "no-inline-styles-except-root");
+    assert.equal(inlineStyle?.severity, "error");
+  });
 });
diff --git a/examples/design-system-example.html b/examples/design-system-example.html
index c11ff55..51c37e0 100644
--- a/examples/design-system-example.html
+++ b/examples/design-system-example.html
@@ -72,6 +72,16 @@
   border: 1px solid rgba(20,20,19,0.08);
   margin-bottom: 12px;
 }
+.chip.ivory { background: var(--ivory); }
+.chip.slate { background: var(--slate); }
+.chip.clay { background: var(--clay); }
+.chip.oat { background: var(--oat); }
+.chip.olive { background: var(--olive); }
+.chip.rust { background: var(--rust); }
+.chip.gray-100 { background: var(--gray-100); }
+.chip.gray-300 { background: var(--gray-300); }
+.chip.gray-500 { background: var(--gray-500); }
+.chip.gray-700 { background: var(--gray-700); }
 .swatch .name { font-weight: 600; color: var(--slate); font-size: 14px; }
 .swatch .var, .swatch .hex {
   font-family: var(--mono);
@@ -213,16 +223,16 @@ <h1>Tokens, type, and components — all in one file</h1>
     <h2>Colors</h2>
     <p class="sec-note">Tap a swatch's <code>copy</code> button to copy the <code>var(--token)</code> reference to your clipboard.</p>
     <div class="swatches">
-      <div class="swatch"><div class="chip" style="background:var(--ivory)"></div><div class="name">Ivory</div><span class="var">var(--ivory)</span><span class="hex">#FAF9F5</span><button class="copy" data-token="var(--ivory)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--slate)"></div><div class="name">Slate</div><span class="var">var(--slate)</span><span class="hex">#141413</span><button class="copy" data-token="var(--slate)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--clay)"></div><div class="name">Clay</div><span class="var">var(--clay)</span><span class="hex">#D97757</span><button class="copy" data-token="var(--clay)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--oat)"></div><div class="name">Oat</div><span class="var">var(--oat)</span><span class="hex">#E3DACC</span><button class="copy" data-token="var(--oat)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--olive)"></div><div class="name">Olive</div><span class="var">var(--olive)</span><span class="hex">#788C5D</span><button class="copy" data-token="var(--olive)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--rust)"></div><div class="name">Rust</div><span class="var">var(--rust)</span><span class="hex">#B04A3F</span><button class="copy" data-token="var(--rust)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--gray-100)"></div><div class="name">Gray 100</div><span class="var">var(--gray-100)</span><span class="hex">#F0EEE6</span><button class="copy" data-token="var(--gray-100)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--gray-300)"></div><div class="name">Gray 300</div><span class="var">var(--gray-300)</span><span class="hex">#D1CFC5</span><button class="copy" data-token="var(--gray-300)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--gray-500)"></div><div class="name">Gray 500</div><span class="var">var(--gray-500)</span><span class="hex">#87867F</span><button class="copy" data-token="var(--gray-500)">copy var</button></div>
-      <div class="swatch"><div class="chip" style="background:var(--gray-700)"></div><div class="name">Gray 700</div><span class="var">var(--gray-700)</span><span class="hex">#3D3D3A</span><button class="copy" data-token="var(--gray-700)">copy var</button></div>
+      <div class="swatch"><div class="chip ivory"></div><div class="name">Ivory</div><span class="var">var(--ivory)</span><span class="hex">#FAF9F5</span><button class="copy" data-token="var(--ivory)">copy var</button></div>
+      <div class="swatch"><div class="chip slate"></div><div class="name">Slate</div><span class="var">var(--slate)</span><span class="hex">#141413</span><button class="copy" data-token="var(--slate)">copy var</button></div>
+      <div class="swatch"><div class="chip clay"></div><div class="name">Clay</div><span class="var">var(--clay)</span><span class="hex">#D97757</span><button class="copy" data-token="var(--clay)">copy var</button></div>
+      <div class="swatch"><div class="chip oat"></div><div class="name">Oat</div><span class="var">var(--oat)</span><span class="hex">#E3DACC</span><button class="copy" data-token="var(--oat)">copy var</button></div>
+      <div class="swatch"><div class="chip olive"></div><div class="name">Olive</div><span class="var">var(--olive)</span><span class="hex">#788C5D</span><button class="copy" data-token="var(--olive)">copy var</button></div>
+      <div class="swatch"><div class="chip rust"></div><div class="name">Rust</div><span class="var">var(--rust)</span><span class="hex">#B04A3F</span><button class="copy" data-token="var(--rust)">copy var</button></div>
+      <div class="swatch"><div class="chip gray-100"></div><div class="name">Gray 100</div><span class="var">var(--gray-100)</span><span class="hex">#F0EEE6</span><button class="copy" data-token="var(--gray-100)">copy var</button></div>
+      <div class="swatch"><div class="chip gray-300"></div><div class="name">Gray 300</div><span class="var">var(--gray-300)</span><span class="hex">#D1CFC5</span><button class="copy" data-token="var(--gray-300)">copy var</button></div>
+      <div class="swatch"><div class="chip gray-500"></div><div class="name">Gray 500</div><span class="var">var(--gray-500)</span><span class="hex">#87867F</span><button class="copy" data-token="var(--gray-500)">copy var</button></div>
+      <div class="swatch"><div class="chip gray-700"></div><div class="name">Gray 700</div><span class="var">var(--gray-700)</span><span class="hex">#3D3D3A</span><button class="copy" data-token="var(--gray-700)">copy var</button></div>
     </div>
   </section>
 
diff --git a/examples/feature-flag-editor-example.html b/examples/feature-flag-editor-example.html
new file mode 100644
index 0000000..0a3e0ab
--- /dev/null
+++ b/examples/feature-flag-editor-example.html
@@ -0,0 +1,283 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Checkout Feature Flag Editor</title>
+<style>
+:root {
+  --ivory: #FAF9F5;
+  --slate: #141413;
+  --clay: #D97757;
+  --oat: #E3DACC;
+  --olive: #788C5D;
+  --rust: #B04A3F;
+  --gray-100: #F0EEE6;
+  --gray-300: #D1CFC5;
+  --gray-500: #87867F;
+  --gray-700: #3D3D3A;
+  --white: #FFFFFF;
+  --serif: ui-serif, Georgia, "Times New Roman", serif;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  background: var(--ivory);
+  color: var(--gray-700);
+  font-family: var(--sans);
+  font-size: 15px;
+  line-height: 1.6;
+  padding: 48px 24px 96px;
+}
+.page { max-width: 1100px; margin: 0 auto; }
+header { display: grid; gap: 12px; margin-bottom: 32px; }
+.eyebrow { color: var(--clay); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
+h1, h2, h3 { color: var(--slate); line-height: 1.15; }
+h1 { font-family: var(--serif); font-size: 38px; font-weight: 500; }
+h2 { font-size: 20px; margin-bottom: 12px; }
+h3 { font-size: 15px; }
+.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
+.flag-list, aside { display: grid; gap: 14px; }
+.flag-card, .panel {
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  padding: 18px;
+}
+.flag-card { display: grid; gap: 14px; }
+.flag-top { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
+.meta { color: var(--gray-500); font-size: 13px; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.chip {
+  background: var(--gray-100);
+  border: 1px solid var(--gray-300);
+  border-radius: 999px;
+  color: var(--gray-700);
+  font-size: 12px;
+  padding: 3px 8px;
+}
+.chip.risk { background: var(--oat); color: var(--slate); }
+.toggle {
+  align-items: center;
+  background: var(--gray-100);
+  border: 1px solid var(--gray-300);
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 34px;
+  padding: 3px;
+  width: 62px;
+}
+.knob {
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: 50%;
+  height: 26px;
+  transition: transform 160ms ease;
+  width: 26px;
+}
+.toggle[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); }
+.toggle[aria-pressed="true"] .knob { transform: translateX(28px); }
+.dependency {
+  border-left: 3px solid var(--clay);
+  color: var(--gray-700);
+  padding-left: 10px;
+}
+.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
+button.copy {
+  background: var(--slate);
+  border: 0;
+  border-radius: 6px;
+  color: var(--white);
+  cursor: pointer;
+  font: inherit;
+  padding: 8px 12px;
+}
+button.secondary { background: var(--gray-100); color: var(--slate); border: 1px solid var(--gray-300); }
+button:focus-visible, .toggle:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
+.diff { background: var(--slate); border-radius: 8px; color: var(--gray-100); font-family: var(--mono); font-size: 12px; overflow-x: auto; padding: 14px; white-space: pre-wrap; }
+.empty-state { color: var(--gray-500); }
+dl { display: grid; gap: 10px; }
+dt { color: var(--slate); font-weight: 700; }
+dd { color: var(--gray-700); }
+@media (max-width: 860px) {
+  .layout { grid-template-columns: 1fr; }
+  aside { order: -1; }
+}
+@media print {
+  body { background: var(--white); color: var(--slate); padding: 24px; }
+  .actions, .toggle { display: none; }
+  .layout { grid-template-columns: 1fr; }
+  .flag-card, .panel { break-inside: avoid; }
+}
+</style>
+</head>
+<body>
+<div class="page">
+  <header>
+    <p class="eyebrow">Custom editor example</p>
+    <h1>Checkout Feature Flag Editor</h1>
+    <p>Review rollout state for the checkout modernization project, inspect dependencies, and copy the pending flag diff for a change request.</p>
+  </header>
+
+  <main class="layout">
+    <section class="flag-list" aria-label="Feature flags">
+      <article class="flag-card" data-flag="checkout_redesign" data-label="Checkout redesign" data-initial="true">
+        <div class="flag-top">
+          <div>
+            <h2>Checkout redesign</h2>
+            <p class="meta">Owner: Payments Platform | Cohort: 35 percent US web traffic</p>
+          </div>
+          <button class="toggle" type="button" aria-pressed="true" aria-label="Toggle Checkout redesign"><span class="knob"></span></button>
+        </div>
+        <p>Routes eligible users to the React checkout shell while payment authorization still runs through the legacy service.</p>
+        <div class="chip-row">
+          <span class="chip">Experiment</span>
+          <span class="chip risk">Guarded by fraud fallback</span>
+        </div>
+      </article>
+
+      <article class="flag-card" data-flag="wallet_save_card" data-label="Save card wallet" data-initial="false">
+        <div class="flag-top">
+          <div>
+            <h2>Save card wallet</h2>
+            <p class="meta">Owner: Consumer Billing | Cohort: internal staff only</p>
+          </div>
+          <button class="toggle" type="button" aria-pressed="false" aria-label="Toggle Save card wallet"><span class="knob"></span></button>
+        </div>
+        <p>Adds a saved-card step after successful purchase. The flag should stay disabled until token-vault rotation completes.</p>
+        <p class="dependency">Dependency: token vault rotation must reach 100 percent before external rollout.</p>
+        <div class="chip-row">
+          <span class="chip risk">Dependency blocked</span>
+          <span class="chip">Internal only</span>
+        </div>
+      </article>
+
+      <article class="flag-card" data-flag="risk_step_up" data-label="Risk step-up challenge" data-initial="true">
+        <div class="flag-top">
+          <div>
+            <h2>Risk step-up challenge</h2>
+            <p class="meta">Owner: Trust Engineering | Cohort: high-risk payment attempts</p>
+          </div>
+          <button class="toggle" type="button" aria-pressed="true" aria-label="Toggle Risk step-up challenge"><span class="knob"></span></button>
+        </div>
+        <p>Prompts for a second verification factor when fraud score crosses the configured threshold.</p>
+        <div class="chip-row">
+          <span class="chip">Safety critical</span>
+          <span class="chip">Rollback tested</span>
+        </div>
+      </article>
+    </section>
+
+    <aside aria-label="Pending changes">
+      <section class="panel">
+        <h2>Pending diff</h2>
+        <pre class="diff" id="diff-output">No changes selected.</pre>
+        <div class="actions">
+          <button class="copy" type="button" id="copy-json">Copy JSON</button>
+          <button class="copy secondary" type="button" id="copy-markdown">Copy markdown</button>
+        </div>
+      </section>
+      <section class="panel">
+        <h2>Release notes</h2>
+        <dl>
+          <dt>Rollback owner</dt>
+          <dd>Payments Platform on-call</dd>
+          <dt>Monitoring window</dt>
+          <dd>First 90 minutes after cohort increase</dd>
+          <dt>Primary metric</dt>
+          <dd>Authorization success rate must stay above 98.6 percent</dd>
+        </dl>
+      </section>
+    </aside>
+  </main>
+</div>
+
+<script>
+var flags = Array.prototype.slice.call(document.querySelectorAll('[data-flag]'));
+var diffOutput = document.getElementById('diff-output');
+var copyJson = document.getElementById('copy-json');
+var copyMarkdown = document.getElementById('copy-markdown');
+
+function collectChanges() {
+  return flags.map(function (card) {
+    var toggle = card.querySelector('.toggle');
+    return {
+      key: card.getAttribute('data-flag'),
+      label: card.getAttribute('data-label'),
+      from: card.getAttribute('data-initial') === 'true',
+      to: toggle.getAttribute('aria-pressed') === 'true'
+    };
+  }).filter(function (flag) {
+    return flag.from !== flag.to;
+  });
+}
+
+function renderDiff() {
+  var changes = collectChanges();
+  if (changes.length === 0) {
+    diffOutput.textContent = 'No changes selected.';
+    return;
+  }
+  diffOutput.textContent = JSON.stringify({ flags: changes }, null, 2);
+}
+
+function markdownForChanges() {
+  var changes = collectChanges();
+  if (changes.length === 0) return 'No feature flag changes selected.';
+  return changes.map(function (flag) {
+    return '- ' + flag.label + ': ' + String(flag.from) + ' -> ' + String(flag.to);
+  }).join('\n');
+}
+
+function copyText(text, button) {
+  function flash() {
+    var original = button.textContent;
+    button.textContent = 'Copied';
+    window.setTimeout(function () {
+      button.textContent = original;
+    }, 900);
+  }
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(flash, function () {
+      fallbackCopy(text);
+      flash();
+    });
+  } else {
+    fallbackCopy(text);
+    flash();
+  }
+}
+
+function fallbackCopy(text) {
+  var ta = document.createElement('textarea');
+  ta.value = text;
+  ta.setAttribute('readonly', '');
+  ta.className = 'copy-buffer';
+  document.body.appendChild(ta);
+  ta.select();
+  try { document.execCommand('copy'); } catch (err) {}
+  document.body.removeChild(ta);
+}
+
+flags.forEach(function (card) {
+  var toggle = card.querySelector('.toggle');
+  toggle.addEventListener('click', function () {
+    var next = toggle.getAttribute('aria-pressed') !== 'true';
+    toggle.setAttribute('aria-pressed', String(next));
+    renderDiff();
+  });
+});
+
+copyJson.addEventListener('click', function () {
+  copyText(diffOutput.textContent, copyJson);
+});
+copyMarkdown.addEventListener('click', function () {
+  copyText(markdownForChanges(), copyMarkdown);
+});
+renderDiff();
+</script>
+</body>
+</html>
diff --git a/examples/pr-review-example.html b/examples/pr-review-example.html
index b3d903d..b148a1d 100644
--- a/examples/pr-review-example.html
+++ b/examples/pr-review-example.html
@@ -45,6 +45,9 @@
 .legend { margin-top: 12px; font-size: 12px; color: var(--gray-500); display: flex; flex-wrap: wrap; gap: 18px; }
 .legend span { display: inline-flex; align-items: center; gap: 6px; }
 .legend .dot { width: 8px; height: 8px; border-radius: 50%; }
+.legend .dot.safe { background: var(--olive); }
+.legend .dot.medium { background: var(--sand); }
+.legend .dot.attention { background: var(--clay); }
 .file-card { border: 1.5px solid var(--gray-300); border-radius: 12px; background: var(--white); margin-bottom: 24px; overflow: hidden; scroll-margin-top: 20px; }
 .file-head { padding: 16px 20px; border-bottom: 1.5px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
 .file-path { font-family: var(--mono); font-size: 13.5px; color: var(--slate); }
@@ -115,9 +118,9 @@ <h2>Risk map</h2>
       <a class="chip safe" href="#file-tests"><span class="dot"></span>internal/oauth/token_store_test.go</a>
     </div>
     <div class="legend">
-      <span><span class="dot" style="background:var(--olive)"></span> safe — tests or trivial change</span>
-      <span><span class="dot" style="background:var(--sand)"></span> worth a look — verify edge cases</span>
-      <span><span class="dot" style="background:var(--clay)"></span> needs attention — could regress prod</span>
+      <span><span class="dot safe"></span> safe — tests or trivial change</span>
+      <span><span class="dot medium"></span> worth a look — verify edge cases</span>
+      <span><span class="dot attention"></span> needs attention — could regress prod</span>
     </div>
   </section>
 
diff --git a/templates/annotated-pr-review.html b/templates/annotated-pr-review.html
index b9521a8..e9168ab 100644
--- a/templates/annotated-pr-review.html
+++ b/templates/annotated-pr-review.html
@@ -24,9 +24,12 @@
 .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--oat); color: var(--slate); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; border: 1.5px solid var(--gray-300); }
 .branch { font-family: var(--mono); font-size: 12.5px; color: var(--gray-700); background: var(--gray-100); border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 6px 10px; }
 .branch .arrow { color: var(--gray-500); margin: 0 6px; }
-.stat { font-family: var(--mono); font-size: 13px; }
-.stat .add { color: var(--olive); font-weight: 600; }
-.stat .del { color: var(--rust); font-weight: 600; }
+  .stat { font-family: var(--mono); font-size: 13px; }
+  .stat .add { color: var(--olive); font-weight: 600; }
+  .stat .del { color: var(--rust); font-weight: 600; }
+  .byline-meta, .stat-files { color: var(--gray-500); }
+  .byline-meta { font-size: 12px; }
+  .stat-files { margin-left: 10px; }
 section { margin-bottom: 40px; }
 h2 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--slate); margin-bottom: 14px; }
 .risk-map { display: flex; flex-wrap: wrap; gap: 10px; }
@@ -39,11 +42,15 @@
 .chip.medium .dot { background: var(--sand); }
 .chip.attention { background: rgba(217,119,87,0.12); border-color: rgba(217,119,87,0.55); }
 .chip.attention .dot { background: var(--clay); }
-.legend { margin-top: 12px; font-size: 12px; color: var(--gray-500); display: flex; gap: 18px; }
-.legend span { display: inline-flex; align-items: center; gap: 6px; }
-.legend .dot { width: 8px; height: 8px; border-radius: 50%; }
+  .legend { margin-top: 12px; font-size: 12px; color: var(--gray-500); display: flex; gap: 18px; }
+  .legend span { display: inline-flex; align-items: center; gap: 6px; }
+  .legend .dot { width: 8px; height: 8px; border-radius: 50%; }
+  .legend .dot.safe { background: var(--olive); }
+  .legend .dot.medium { background: var(--sand); }
+  .legend .dot.attention { background: var(--clay); }
 .file-card { border: 1.5px solid var(--gray-300); border-radius: 12px; background: var(--white); margin-bottom: 24px; overflow: hidden; scroll-margin-top: 20px; }
-.file-head { padding: 16px 20px; border-bottom: 1.5px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .file-head { padding: 16px 20px; border-bottom: 1.5px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .file-head-actions { display: flex; align-items: center; gap: 12px; }
 .file-path { font-family: var(--mono); font-size: 13.5px; color: var(--slate); }
 .risk-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
 .risk-tag.safe { background: rgba(120,140,93,0.15); color: var(--olive); }
@@ -101,9 +108,9 @@
     <h1>[PR TITLE]</h1>
     <div class="meta-row">
       <div class="avatar">[INITIALS]</div>
-      <div><strong>[AUTHOR]</strong><br><span style="font-size:12px;color:var(--gray-500)">[OPENED WHEN]</span></div>
+      <div><strong>[AUTHOR]</strong><br><span class="byline-meta">[OPENED WHEN]</span></div>
       <div class="branch">[BRANCH] <span class="arrow">→</span> main</div>
-      <div class="stat"><span class="add">+[NUM]</span> / <span class="del">−[NUM]</span> <span style="color:var(--gray-500);margin-left:10px">[NUM] files changed</span></div>
+      <div class="stat"><span class="add">+[NUM]</span> / <span class="del">−[NUM]</span> <span class="stat-files">[NUM] files changed</span></div>
     </div>
   </header>
   <main>
@@ -114,9 +121,9 @@ <h2>Risk map</h2>
       <!-- Add chips per file, linked to #file-id sections -->
     </div>
     <div class="legend">
-      <span><span class="dot" style="background:var(--olive)"></span> safe</span>
-      <span><span class="dot" style="background:var(--sand)"></span> worth a look</span>
-      <span><span class="dot" style="background:var(--clay)"></span> needs attention</span>
+      <span><span class="dot safe"></span> safe</span>
+      <span><span class="dot medium"></span> worth a look</span>
+      <span><span class="dot attention"></span> needs attention</span>
     </div>
   </section>
 
@@ -126,7 +133,7 @@ <h2>Files</h2>
     <article class="file-card" id="file-[NAME]">
       <div class="file-head">
         <div><div class="file-path">[PATH]</div></div>
-        <div style="display:flex;align-items:center;gap:12px">
+        <div class="file-head-actions">
           <span class="risk-tag [LEVEL]">[RISK LEVEL]</span>
         </div>
       </div>
diff --git a/templates/status-report-v2.html b/templates/status-report-v2.html
index 2536696..a064041 100644
--- a/templates/status-report-v2.html
+++ b/templates/status-report-v2.html
@@ -103,6 +103,10 @@
   margin: 0 0 6px;
 }
 hr.rule { border: none; border-top: 1px solid var(--gray-300); margin: 0 0 22px; }
+.col-pr { width: 90px; }
+.col-author, .col-owner, .col-blocked { width: 140px; }
+.col-risk, .col-stage { width: 100px; }
+.col-action { width: 60px; }
 .summary-band {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -378,7 +382,7 @@ <h2>Work breakdown</h2>
 
         <article id="panel-shipped" class="tab-panel" role="tabpanel" aria-labelledby="tab-shipped">
           <table>
-            <thead><tr><th style="width:90px">PR</th><th>Title</th><th style="width:140px">Author</th><th style="width:100px">Risk</th></tr></thead>
+            <thead><tr><th class="col-pr">PR</th><th>Title</th><th class="col-author">Author</th><th class="col-risk">Risk</th></tr></thead>
             <tbody>
               <tr>
                 <td><span class="pr-link">#2841</span></td>
@@ -404,7 +408,7 @@ <h2>Work breakdown</h2>
 
         <article id="panel-progress" class="tab-panel" role="tabpanel" aria-labelledby="tab-progress" hidden>
           <table>
-            <thead><tr><th style="width:90px">PR</th><th>Title</th><th style="width:140px">Author</th><th style="width:100px">Stage</th></tr></thead>
+            <thead><tr><th class="col-pr">PR</th><th>Title</th><th class="col-author">Author</th><th class="col-stage">Stage</th></tr></thead>
             <tbody>
               <tr>
                 <td><span class="pr-link">#2848</span></td>
@@ -424,7 +428,7 @@ <h2>Work breakdown</h2>
 
         <article id="panel-blocked" class="tab-panel" role="tabpanel" aria-labelledby="tab-blocked" hidden>
           <table>
-            <thead><tr><th>Issue</th><th style="width:140px">Owner</th><th style="width:140px">Blocked on</th><th style="width:60px"></th></tr></thead>
+            <thead><tr><th>Issue</th><th class="col-owner">Owner</th><th class="col-blocked">Blocked on</th><th class="col-action"></th></tr></thead>
             <tbody>
               <tr>
                 <td>OAuth webhook timeout (95p 1.8s over SLA)</td>
diff --git a/templates/status-report.html b/templates/status-report.html
index 6cf520d..af712b7 100644
--- a/templates/status-report.html
+++ b/templates/status-report.html
@@ -31,11 +31,13 @@
 .stat-delta{font-family:var(--mono);font-size:11px;margin-top:6px}
 .stat-delta.up{color:var(--olive)}
 table{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border:1.5px solid var(--gray-300);border-radius:12px;overflow:hidden}
-thead th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-500);background:var(--gray-100);padding:12px 16px;border-bottom:1px solid var(--gray-300)}
-tbody td{padding:13px 16px;border-bottom:1px solid var(--gray-100);font-size:14px;vertical-align:middle}
+  thead th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-500);background:var(--gray-100);padding:12px 16px;border-bottom:1px solid var(--gray-300)}
+  .col-pr{width:90px}.col-author{width:140px}.col-risk{width:100px}
+  tbody td{padding:13px 16px;border-bottom:1px solid var(--gray-100);font-size:14px;vertical-align:middle}
 tbody tr:last-child td{border-bottom:none}
 tbody tr:hover{background:var(--ivory)}
-.risk{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--gray-500)}
+  .risk{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--gray-500)}
+  .pr-link{font-family:var(--mono);font-size:13px;color:var(--clay);text-decoration:none}.author-cell{font-size:13px;color:var(--gray-700)}
 .risk-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
 .risk-dot.low{background:var(--olive)}.risk-dot.med{background:var(--sand)}.risk-dot.high{background:var(--clay)}
 .highlights{list-style:none;padding:0}
@@ -83,9 +85,9 @@ <h2>Highlights</h2>
     <h2>Shipped</h2>
     <hr class="rule">
     <table>
-      <thead><tr><th style="width:90px">PR</th><th>Title</th><th style="width:140px">Author</th><th style="width:100px">Risk</th></tr></thead>
+      <thead><tr><th class="col-pr">PR</th><th>Title</th><th class="col-author">Author</th><th class="col-risk">Risk</th></tr></thead>
       <tbody>
-        <tr><td><a href="#" style="font-family:var(--mono);font-size:13px;color:var(--clay);text-decoration:none">#[NUM]</a></td><td>[TITLE]</td><td style="font-size:13px;color:var(--gray-700)">[AUTHOR]</td><td><span class="risk"><span class="risk-dot med"></span>Med</span></td></tr>
+        <tr><td><a class="pr-link" href="#">#[NUM]</a></td><td>[TITLE]</td><td class="author-cell">[AUTHOR]</td><td><span class="risk"><span class="risk-dot med"></span>Med</span></td></tr>
       </tbody>
     </table>
   </section>

Issue	Owner	Blocked on
Issue	Owner	Blocked on
OAuth webhook timeout (95p 1.8s over SLA)
PR	Title	Author	Risk
PR	Title	Author	Risk
#[NUM]	[TITLE]	[AUTHOR]	Med
#[NUM]	[TITLE]	[AUTHOR]	Med