feat: design system release

.github/workflows/tests.yml

@@ -27,7 +27,7 @@ jobs:
     # Prettier formatting + content-link validation. Fast, no node_modules
     # needed beyond what setup-node cache restores.
     # (Renamed from "lint" — the job never actually ran a linter; ESLint now
-    # lives in its own advisory job below.)
+    # lives in its own blocking job below.)
     format:
         runs-on: ubuntu-latest
         steps:
@@ -60,9 +60,32 @@ jobs:
             - name: Validate sitemap, footer, and blog links
               run: pnpm validate-links
 
-    # Blocking ESLint pass. In ci-success.needs, so a red eslint job blocks the
-    # PR. `pnpm lint` fails on errors only — the remaining warnings do not gate.
-    # Ratchet to a warn floor (`--max-warnings`) once that count is down.
+    # DS debt ratchet (DS 10, TASK-21450). Runs scripts/ds-lint-counts.mjs
+    # --check against the committed baseline: debt counts (raw hex, inline
+    # styles, stock text sizes, non-DS classes in views, useSearchParams files)
+    # may only go down. A PR that lowers a count should also tighten the
+    # baseline (--write-baseline) so the gain locks in. Pure-node script — no
+    # pnpm install needed.
+    ds-lint:
+        runs-on: ubuntu-latest
+        steps:
+            # no submodules/token: the count script only reads src/**/*.ts(x)
+            # and the only submodule (src/content) holds none. no git ops after
+            # checkout either, so don't persist credentials.
+            - uses: actions/checkout@v4
+              with:
+                  persist-credentials: false
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20'
+
+            - name: DS lint-count ratchet
+              run: node scripts/ds-lint-counts.mjs --check
+
+    # Blocking ESLint pass (DS 10, TASK-21450). Errors reached zero on
+    # feat/design-system, so this gates the PR via ci-success.needs. Warnings
+    # do not fail the job; add a warn floor only if the team decides one.
     eslint:
         runs-on: ubuntu-latest
         steps:
@@ -510,7 +533,7 @@ jobs:
     ci-success:
         name: ci-success
         if: always()
-        needs: [format, eslint, typecheck, unit, e2e, report, human-authors]
+        needs: [format, ds-lint, eslint, typecheck, unit, e2e, report, human-authors]
         runs-on: ubuntu-latest
         steps:
             - name: Verify all required jobs passed
@@ -519,6 +542,7 @@ jobs:
                       echo "::error::One or more required jobs failed or were cancelled"
                       echo "Job results:"
                       echo "  format:    ${{ needs.format.result }}"
+                      echo "  ds-lint:   ${{ needs['ds-lint'].result }}"
                       echo "  eslint:    ${{ needs.eslint.result }}"
                       echo "  typecheck: ${{ needs.typecheck.result }}"
                       echo "  unit:      ${{ needs.unit.result }}"

.gitignore

@@ -60,6 +60,8 @@ next-env.d.ts
 
 # local files
 playground/
+# ...except the design-system doc-site Playground route, which is a real tracked route
+!src/app/(mobile-ui)/dev/ds/playground/
 
 # yarn and npm lockfiles
 package-lock.json

.prettierignore

@@ -17,5 +17,9 @@ src/components/TransactionDetails/__tests__/fixtures/render-baseline.json
 src/types/api.openapi.json
 src/types/api.generated.ts
 
+# generated from globals.css @theme via `pnpm gen:ds-tokens` — stable
+# JSON.stringify formatting so a prettier bump can't flip the drift gate.
+src/app/(mobile-ui)/dev/ds/foundations/tokens.generated.ts
+
 # static single-file quiz (hand-tuned inline CSS/JS; not prettier-formatted)
 public/onboarding-quiz/

e2e/flows/dev-showcase.spec.ts

@@ -1,44 +1,72 @@
 /**
- * Dev routes — design system showcase + component gallery.
+ * Dev routes — the /dev/ds design-system showcase.
  *
  * These are the CRITICAL snapshots for M2. When we kill MUI, flow contexts,
  * or Redux, the design system showcase should still render identically.
  *
- * The dev showcase renders every Bruddle primitive + Global component with
- * every variant — the canonical regression target.
+ * The /dev/ds doc-site pages render every Bruddle primitive + Global
+ * component with every variant — the canonical regression target. The sweep
+ * below walks every doc page from the showcase's own nav config, so new
+ * pages join the regression net automatically.
  */
 
-import { test } from '@playwright/test'
-import { captureStep, collectConsoleLogs } from '../utils/capture'
+import { expect, test } from '@playwright/test'
+import { captureStep, collectConsoleLogs, getConsoleErrors } from '../utils/capture'
 import { dismissModals } from '../utils/dismiss-modals'
+// type-only IconName import inside nav-config is erased at runtime, so this is safe to import here
+import { SIDEBAR_CONFIG, TIERS } from '../../src/app/(mobile-ui)/dev/ds/_components/nav-config'
 
-test.describe('Dev showcase (design system)', () => {
-    test('/dev/components landing', async ({ page }, testInfo) => {
-        const c = collectConsoleLogs(page)
-        await page.goto('/dev/components', { waitUntil: 'domcontentloaded' })
-        await dismissModals(page)
-        await captureStep(page, testInfo, { name: '01-dev-components' })
-        await page.waitForTimeout(2000)
-        await captureStep(page, testInfo, { name: '02-dev-components-settled' })
-        c.flush(testInfo, 'dev-components')
-    })
+// tier indexes + every doc page; playground sub-items live under /dev (standalone harnesses), not /dev/ds
+const DS_DOC_ROUTES = [...TIERS, ...Object.values(SIDEBAR_CONFIG).flat()]
+    .map((item) => item.href)
+    .filter((href) => href.startsWith('/dev/ds'))
+
+// known sandbox noise the showcase cannot control (F-28: the sweep used to
+// collect console errors and assert nothing — a page could throw on every
+// render and stay green). Everything else that logs console.error fails.
+const SANDBOX_ERROR_ALLOW = [
+    /429/, // public RPC rate limits in the sandbox
+    /ERR_NETWORK|Failed to fetch|NetworkError|net::ERR/i, // providers absent in sandbox
+    /favicon/i,
+]
+const assertNoConsoleErrors = (entries: Array<{ type: string; text: string }>, where: string) => {
+    const errors = getConsoleErrors(entries).filter((e) => !SANDBOX_ERROR_ALLOW.some((p) => p.test(e.text)))
+    expect(errors, `${where}: unexpected console errors\n${errors.map((e) => e.text).join('\n')}`).toEqual([])
+}
 
+test.describe('Dev showcase (design system)', () => {
     test('/dev — root dev page', async ({ page }, testInfo) => {
         const c = collectConsoleLogs(page)
-        await page.goto('/dev', { waitUntil: 'domcontentloaded' })
+        const res = await page.goto('/dev', { waitUntil: 'domcontentloaded' })
+        expect(res?.ok(), '/dev responded non-2xx').toBeTruthy()
         await dismissModals(page)
         await captureStep(page, testInfo, { name: '01-dev-root' })
         c.flush(testInfo, 'dev-root')
+        assertNoConsoleErrors(c.entries, '/dev')
     })
 
     test('/dev/ds — design system root', async ({ page }, testInfo) => {
         const c = collectConsoleLogs(page)
-        const res = await page.goto('/dev/ds', { waitUntil: 'domcontentloaded' }).catch(() => null)
-        if (!res) return // not all repos have this route
+        const res = await page.goto('/dev/ds', { waitUntil: 'domcontentloaded' })
+        expect(res?.ok(), '/dev/ds responded non-2xx').toBeTruthy()
         await dismissModals(page)
         await captureStep(page, testInfo, { name: '01-ds-root' })
         await page.waitForTimeout(1500)
         await captureStep(page, testInfo, { name: '02-ds-root-settled' })
         c.flush(testInfo, 'ds-root')
+        assertNoConsoleErrors(c.entries, '/dev/ds')
+    })
+
+    test('/dev/ds doc pages — full component sweep', async ({ page }, testInfo) => {
+        const c = collectConsoleLogs(page)
+        for (const route of DS_DOC_ROUTES) {
+            const res = await page.goto(route, { waitUntil: 'domcontentloaded' })
+            expect(res?.ok(), `${route} responded non-2xx`).toBeTruthy()
+            await dismissModals(page)
+            await page.waitForTimeout(800)
+            await captureStep(page, testInfo, { name: route.replace('/dev/ds', 'ds').replaceAll('/', '-') })
+        }
+        c.flush(testInfo, 'ds-doc-sweep')
+        assertNoConsoleErrors(c.entries, 'ds doc sweep')
     })
 })