Add minimal reproducers for Moderation UI and CSS Lint bugs

examples/reproducers/issue-1-moderation-ui/README.md

@@ -0,0 +1,17 @@
+# Moderation UI "Show Anyway" Bug Reproducer
+
+This directory contains a minimal reproducer for the bug where the "Show anyway" button is not visible in headless mode (or specific environments) within the moderation fixtures.
+
+## Issue
+
+The "Show anyway" button fails `toBeVisible()` check in tests, causing false negatives in moderation UI tests.
+
+## Running the Reproducer
+
+Run the following command from the repository root:
+
+```bash
+npx playwright test -c examples/reproducers/issue-1-moderation-ui/playwright.config.ts
+```
+
+Expected result: The test should **fail** with `Error: expect(locator).toBeVisible() failed`.

examples/reproducers/issue-1-moderation-ui/playwright.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "@playwright/test";
+import baseConfig from "../../../playwright.config.ts";
+
+export default defineConfig({
+  ...baseConfig,
+  testDir: ".",
+  projects: [
+    {
+      name: "repro",
+      testMatch: "**/*.spec.ts",
+    },
+  ],
+});

examples/reproducers/issue-1-moderation-ui/repro.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from "@playwright/test";
+
+const FIXTURE_URL = "/docs/moderation/fixtures/index.html";
+const STORAGE_KEY = "bitvid:moderation:fixture-overrides";
+const SENTINEL_KEY = "__moderationFixturesInit__";
+
+async function waitForFixtureReady(page) {
+  await page.waitForSelector('body[data-ready="true"]');
+}
+
+function setupStorageReset(page) {
+  return page.addInitScript(({ storageKey, sentinelKey }) => {
+    try {
+      const session = window.sessionStorage;
+      const local = window.localStorage;
+      if (session && !session.getItem(sentinelKey)) {
+        local?.removeItem(storageKey);
+        session.setItem(sentinelKey, "1");
+      }
+    } catch {
+      /* ignore reset failures in tests */
+    }
+  }, { storageKey: STORAGE_KEY, sentinelKey: SENTINEL_KEY });
+}
+
+test.beforeEach(async ({ page }) => {
+  await setupStorageReset(page);
+});
+
+test("show anyway button should be visible", async ({ page }) => {
+  await page.goto(FIXTURE_URL, { waitUntil: "networkidle" });
+  await waitForFixtureReady(page);
+
+  const overrideCard = page.locator('[data-test-id="show-anyway"]');
+  const showAnywayButton = overrideCard.getByRole("button", { name: "Show anyway" });
+
+  // This assertion fails in headless mode (bug)
+  await expect(showAnywayButton).toBeVisible();
+});

examples/reproducers/issue-2-css-lint/README.md

@@ -0,0 +1,17 @@
+# CSS Lint Tokens Bug Reproducer
+
+This directory contains a reproducer for the CSS linting issue where raw measurements are detected in `css/tailwind.source.css`.
+
+## Issue
+
+The `lint:tokens` check fails due to raw values (e.g., `40rem`) being used instead of design tokens.
+
+## Running the Reproducer
+
+Run the script from the repository root:
+
+```bash
+node examples/reproducers/issue-2-css-lint/repro.mjs
+```
+
+Expected result: The script should output a lint failure message and exit with a non-zero status.

examples/reproducers/issue-2-css-lint/repro.mjs

@@ -0,0 +1,14 @@
+import { spawn } from 'node:child_process';
+
+console.log("Running lint:tokens to reproduce the issue...");
+const child = spawn('npm', ['run', 'lint:tokens'], { stdio: 'inherit', shell: true });
+
+child.on('exit', (code) => {
+  if (code !== 0) {
+    console.log("\nReproduced: Lint check failed as expected.");
+    process.exit(code);
+  } else {
+    console.log("\nFailed to reproduce: Lint check passed.");
+    process.exit(0);
+  }
+});