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/renderer.js

@@ -10,7 +10,7 @@ import { TILE_FRAMES, TILE_RADIUS, TILE_ASPECT } from './sprites.js';
 export const COLORS=PIGMENTS.map(p=>p.color);
 // Scene commands remain engine-independent. sprite() is an optional atlas adapter.
 export function drawTile(p,x,y,size,tile,angle=-Math.PI/2+tile.dir*Math.PI/3,scale=1) {
-  const r=size*TILE_RADIUS*scale;
+  const r=size*(tile.artStyle==='paper'?.88:TILE_RADIUS)*scale;
   if(drawStyledToken(p,x,y,r,tile,angle))return;
   const textured=p.sprite?.(tile.color,x,y,r)===true;
   if(!textured){
@@ -25,6 +25,7 @@ export function drawScene(p,level,tiles,view,state={}) {
   const {size}=view;
   const visualTile=tile=>appearanceTile({...tile,color:pigmentIndex(state.theme?Math.max(0,level.tiles.findIndex(t=>t.id===tile.id)):tile.color,state.theme)},state.theme);
   const materials={...THEME,...state.theme?.materials};
+  const paper=state.theme?.artStyle==='paper';
   const angle=state.boardAngle||0,cos=Math.cos(angle),sin=Math.sin(angle);
   const rotate=points=>points.map(pt=>{const x=pt.x-view.ox,y=pt.y-view.oy;return {x:view.ox+x*cos-y*sin,y:view.oy+x*sin+y*cos};});
   const base={polygon:(pts,c)=>p.polygon(rotate(pts),c),line:(pts,c,w)=>p.line(rotate(pts),c,w)};
@@ -43,14 +44,13 @@ export function drawScene(p,level,tiles,view,state={}) {
   const movingIds=new Set(motions.map(a=>a.route.tile.id));
   const cellKeys=new Set(level.cells.map(c=>key(c.q,c.r)));
   const sorted=[...level.cells].sort((a,b)=>center(a,view).y-center(b,view).y);
-  // Complete the contiguous board before drawing any rails. A tiny overlap
-  // prevents antialiasing seams between touching hexagons.
-  for(const cell of sorted){const {x,y}=center(cell,view);base.polygon(hexPoints(x,y,size+.2),materials.board);}
-  // Subtle cell boundaries beneath the rails: retain the hex grid without
-  // opening background gaps or painting over connected track endpoints.
+  // Paint cells before rails. Paper keeps the reference's narrow gaps; other
+  // styles overlap slightly to avoid antialiasing seams.
+  for(const cell of sorted){const {x,y}=center(cell,view);base.polygon(hexPoints(x,y,paper?size*.97:size+.2),materials.board);}
+  // Cell boundaries stay beneath the connected track endpoints.
   for(const cell of sorted){
-    const {x,y}=center(cell,view),edge=hexPoints(x,y,size);
-    base.line([...edge,edge[0]],materials.boardGrid,Math.max(1,size*.024));
+    const {x,y}=center(cell,view),edge=hexPoints(x,y,paper?size*.97:size);
+    base.line([...edge,edge[0]],materials.boardGrid,paper?Math.max(.4,size*.025):Math.max(1,size*.024));
   }
   const rails=[];
   for(const cell of sorted) {
@@ -65,15 +65,15 @@ export function drawScene(p,level,tiles,view,state={}) {
       const first=points[0],last=points[points.length-1],shrink=1-visualRadius/size;
       const dx0=exterior(a)?(first.x-x)*shrink:0,dy0=exterior(a)?(first.y-y)*shrink:0;
       const dx1=exterior(b)?(last.x-x)*shrink:0,dy1=exterior(b)?(last.y-y)*shrink:0;
-      points.forEach((p,i)=>{const t=i/(points.length-1),u=1-t;p.x-=u*u*u*dx0+t*t*t*dx1;p.y-=u*u*u*dy0+t*t*t*dy1;});
+      if(!paper)points.forEach((p,i)=>{const t=i/(points.length-1),u=1-t;p.x-=u*u*u*dx0+t*t*t*dx1;p.y-=u*u*u*dy0+t*t*t*dy1;});
       rails.push({points,primary:!state.trackEmphasis||state.trackEmphasis(cell,a,b)});
     }
   }
   // Pattern studies can emphasize real routes while retaining the other paired
   // connections as secondary lines. Ordinary levels keep the same drawing passes.
   for(const {points,primary} of rails)if(!primary)base.line(points,state.secondaryTrackColor||materials.boardGrid,Math.max(1,size*.025));
-  for(const {points,primary} of rails)if(primary)base.line(points,materials.trackHalo,Math.max(4,size*.16));
-  for(const {points,primary} of rails)if(primary)base.line(points,materials.track,Math.max(2.5,size*.10));
+  if(!paper)for(const {points,primary} of rails)if(primary)base.line(points,materials.trackHalo,Math.max(4,size*.16));
+  for(const {points,primary} of rails)if(primary)base.line(points,materials.track,paper?Math.max(.7,size*.055):Math.max(2.5,size*.10));
   if(state.path) p.line(routePoints(state.path,view),state.path.status==='exit'?THEME.primary:THEME.warning,Math.max(4,size*.12));
   if(state.selected) {
     const cell=level.cells.find(c=>c.q===state.selected.q&&c.r===state.selected.r);