# The Little Crossing — a playable city built in Abralo

Make a deterministic, dependency-free browser traffic toy that will be embedded in Abralo's public website. This is a miniature illustration with real graph routing and queues, not a transport-engineering model. No backend, downloads, external services, package installs or network. Use only this folder. No other agents or schedules. The operator will integrate and polish the final website and disclose that contribution.

## File ownership and handoff
Simulation engineer owns city-engine.mjs, API.md, package.json, README.md. Cartographer owns city-view.mjs and preview.html only. Reviewer owns tests/ and REVIEW.md. Use only assigned files. Simulation engineer implements and verifies the engine, then uses workspace_post_message with @Cartographer to hand it off. Cartographer implements the renderer/preview and then uses workspace_post_message with @Reviewer to hand it off. Reviewer adds meaningful Node integration/invariant tests and reviews renderer correctness, reports genuine failures without inventing a bug or modifying implementation. Operator will perform final browser/visual verification.

## Stable engine contract (implement exactly, document extra properties)
Export createCity({seed = 20261005} = {}) from city-engine.mjs. Return step(seconds), setBridgeOpen(id, open), setDemand(mode), reset(), snapshot(). These mutate only that instance; snapshot returns a defensive plain object. No DOM or Date.now/Math.random. Seeded PRNG and fixed internal step, so frame chunking yields equivalent results. Clamp large steps to 0.25 seconds to avoid tab-resume jumps; reject nonfinite/negative steps cleanly.

World: 1100 by 640 units. Nodes on six columns [80,260,440,660,840,1020] and three rows [130,320,510]. Vertical river centred at x550, width140. Three river crossings join x440 to660 at each row. Bridge IDs north, central, south, names Willow bridge, Market bridge, Foundry bridge. Roads are two-way; directed edges with string id/from/to, bridge null or bridge ID, closed boolean. Node IDs are strings; nodes expose id,x,y. Cars keep right visually (offset within their direction of travel). Roads do not spawn or end cars on river. Trips cross from a bank's outer node to the opposite bank's outer node, with varied origins/targets. Show real changing traffic and visible queues; cars respect following gaps and a simple documented junction rule. Cap active cars to a small bounded number (<140).

snapshot(): {time, seed, demand, nodes, edges, bridges, cars, stats}. Bridges: [{id,name,y,open}]. Cars: [{id,x,y,angle,waiting,reroutes,...}] with angle in radians for heading. Stats: {arrived,active,waiting,rerouted,spawned}; all computed from simulation. Demand modes calm (default) and busy; busy increases actual spawning. Closure prevents entering a closed bridge; cars already on it finish crossing. Cars replan from a node, never teleport between roads. Closing all bridges leaves trips safely queued or unspawned; reopening lets them recover. setBridgeOpen invalid IDs or nonbooleans fail clearly. reset restores original seed/config and counters. Readable routing algorithm; finite values; bounded queues. No fake counters or status claims.

## Renderer contract and artistic direction
Export drawCity(context, snapshot, {width, height, pixelRatio=1}={}) from city-view.mjs. Drawing only, no event listeners, timers, DOM accesses or imports requiring a browser. Coordinates width/height are CSS pixels; host sizes canvas backing store and can setTransform(pixelRatio,0,0,pixelRatio,0,0). drawCity can save/scale internally but restore all context state. Export bridgeHitTest(x,y,width,height) returning north/central/south or null, with generous hit areas and matching projection. Host owns controls, frame loop, accessibility and stats. Can add helpers, no dependencies.

Handcrafted, warm architectural map. Think a model village printed on a beautiful piece of paper, with little rooflines, gardens, a market square, a clock tower, a railway-yard detail if purely decorative, a riverside footpath, barges/ducks as static details. Deliberate composition and quietly funny small details. Road geometry must MATCH the engine. All streets and bridges are drawn where the real nodes/edges are. Vanilla Canvas2D, muted terracotta/ochre/sage/cream, blue river with subtle drawn ripples. Avoid generic UI cards and neon AI graphics. Draw buildings with softly offset roofs/shadows and enough negative space to see cars. Fine stipples/hatching deterministic, never random each frame. Cars recognisable tiny vehicles with proper heading and no high-frequency flash. Closed bridges have barriers and a visibly interrupted route. Max readability on widths320 through1440; use proportional x/y projection to fit same world, minimum car pixel size for mobile. Cache expensive/static drawing if needed; under ~10ms/frame desktop is desirable. No animations independent of snapshot time; pause freezes everything. No browser tool available is not permission to claim a visual pass.

preview.html imports engine/view and renders a basic standalone local test page with pause, three bridge buttons, demand and reset. API.md explains routing, queues, scope and contract. README describes running a local static server and npm test. package.json has type module and test node --test tests/*.mjs. Reviewer names test files without .test. (integration.mjs) to avoid the parent project's Vitest discovery. No claims of production readiness, realistic road capacity, autonomous design, or performance advantage over a single agent.