feat: add Paper Routes and package five design systems

Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links.

Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links.

Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.

src/design-catalog.js

@@ -0,0 +1,39 @@
+import { ART_DIRECTIONS, directionTheme } from './art-directions.js';
+import { drawScene, CanvasPainter } from './renderer.js';
+import { layout } from './geometry.js';
+import { createStudyLevel } from './study-levels.js';
+import { TILE_ATLAS } from './sprites.js';
+
+const level = createStudyLevel(3), atlas = new Image();
+const themes = ART_DIRECTIONS[0].themes;
+const requestedTheme = new URL(location.href).searchParams.get('theme');
+let themeId = themes.some(t => t.id === requestedTheme) ? requestedTheme : themes[0].id;
+
+function paint() {
+  for (const direction of ART_DIRECTIONS) {
+    const canvas = document.querySelector(`[data-catalog-design="${direction.id}"]`);
+    const theme = directionTheme(direction, themeId), painter = new CanvasPainter(canvas.getContext('2d'));
+    painter.atlas = atlas;
+    painter.ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawScene(painter, level, level.tiles, layout(level.cells, canvas.width, canvas.height), { theme });
+    canvas.setAttribute('aria-label', `${direction.name} · ${theme.label}主题棋盘`);
+    const preview = canvas.closest('.card-preview');
+    preview.style.background = theme.background;
+    preview.style.color = theme.ink;
+    preview.querySelector('.preview-theme').textContent = theme.name;
+    document.querySelector(`[data-review-design="${direction.id}"]`).href = `../design-showcase.html?design=${direction.id}&theme=${themeId}#phone`;
+  }
+  document.querySelectorAll('[data-theme]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.theme === themeId)));
+  document.querySelector('#comparison-status').textContent = `当前对比：${themes.find(t => t.id === themeId).label} · ${ART_DIRECTIONS.length} 套设计`;
+}
+
+document.querySelectorAll('[data-theme]').forEach(button => button.addEventListener('click', () => {
+  themeId = button.dataset.theme;
+  const url = new URL(location.href);
+  url.searchParams.set('theme', themeId);
+  history.replaceState(null, '', url);
+  paint();
+}));
+atlas.onload = paint;
+atlas.src = '../' + TILE_ATLAS;
+paint();