- subgraph server["Next.js App Router — server"]
- direction TB
- layout["layout.tsx
metadata · OG · fonts"]:::srv
- page["page.tsx
server component"]:::srv
- health["api/health
nodejs · force-dynamic"]:::srv
- end
+| Experience |
+| 01 | Five-stage audit narrative | sections/* | Full-viewport sections bound to a shared section index | ✅ Shipped |
+| 02 | Synchronized 3D models | three/* | Supply network, laser audit gate, demand matrix, route terrain, warehouse grid | ✅ Shipped |
+| 03 | Cinematic camera choreography | IndustrialScene | Dual-target interpolation with frame-rate-independent damping | ✅ Shipped |
+| 04 | Deferred engine boot | PresentationShell | next/dynamic + ssr:false after the WebGL capability probe; no cover-screen CTA | ✅ Shipped |
+| 05 | Animated metric counters | MetricCounter | IntersectionObserver (0.35) → rAF cubic ease-out over 1250 ms | ✅ Shipped |
- subgraph client["Client experience — use client"]
- direction TB
- shell["PresentationShell
capability probe + error boundary"]:::cli
- loader["EngineLoader
static, engine-free"]:::cli
- pres["Presentation
nav · prefs · keyboard"]:::cli
- canvas["Canvas · ScrollControls
single WebGL context"]:::cli
- rig["IndustrialScene
camera rig + focus curve"]:::cli
- scenes["5 scene groups
network · scanner · matrix · terrain · grid"]:::cli
- html["5 HTML sections
semantic tables + charts"]:::cli
- end
+| Localization |
+| 06 | English / Arabic parity | lib/data.ts | Every copy node is LocalizedText; the compiler enforces coverage | ✅ Shipped |
+| 07 | Native RTL inversion | Presentation | documentElement.dir + lang flipped on toggle; CSS logical properties | ✅ Shipped |
+| 08 | Locale-correct numerals | lib/i18n.ts | Intl.NumberFormat with ar-EG digits and compact USD | ✅ Shipped |
+| 09 | Arabic display typography | @fontsource-variable/cairo | Self-hosted variable font — no third-party font request | ✅ Shipped |
- subgraph domain["Domain layer — pure TypeScript"]
- direction TB
- data["lib/data.ts
typed audit model"]:::srv
- i18n["lib/i18n.ts
Intl EN/AR formatters"]:::srv
- focus["lib/sceneFocus.ts
shared focus curve"]:::srv
- end
+| Accessibility |
+| 10 | Keyboard navigation | Presentation | Arrows · Page Up/Down · Home · End, with modifier and text-field guards | ✅ Shipped |
+| 11 | Semantic analytics | sections/* | Real <table> markup, aria-labelledby, aria-current="step" | ✅ Shipped |
+| 12 | Motion reduction | useReducedMotion | Programmatic scrolling drops to behavior: "auto" | ✅ Shipped |
+| 13 | Visible focus states | globals.css | :focus-visible outline on every interactive control | ✅ Shipped |
- subgraph plane["Optional data plane"]
- direction TB
- db["db/index.ts
lazy bounded pool"]:::opt
- pg[("PostgreSQL
Drizzle ORM")]:::opt
- end
+| Performance |
+| 14 | Background-tab suspension | Presentation | visibilitychange → frameloop="never": no GPU work when hidden | ✅ Shipped |
+| 15 | Tiered fill cost | Canvas | Device-derived DPR clamp, adaptive regression while scrolling, alpha:false, powerPreference:"high-performance" | ✅ Shipped |
+| 16 | Allocation-free render loop | IndustrialScene | Module-level vectors + refs; no per-frame object churn | ✅ Shipped |
+| 17 | React-free label updates | FocusFadeLabel | Opacity written straight to the DOM node inside useFrame | ✅ Shipped |
- visitor --> layout --> page --> shell
- shell --> loader
- shell -. "dynamic import once WebGL is confirmed" .-> pres
- pres --> canvas --> rig --> scenes
- canvas --> html
- scenes --> focus
- html --> data
- scenes --> data
- html --> i18n
- visitor --> health --> db -. "only if DATABASE_URL" .-> pg
-```
+| Resilience & platform |
+| 18 | Recoverable engine failure | ExperienceBoundary | Class boundary with a retry action and telemetry-friendly logging | ✅ Shipped |
+| 19 | Database-optional runtime | db/index.ts | Pool constructed lazily; importing the module never throws | ✅ Shipped |
+| 20 | Bounded connection pool | db/index.ts | max clamped to 1–50, 5 s connect timeout, 30 s idle reap | ✅ Shipped |
+| 21 | Honest health contract | api/health | 200 live · 503 only when a configured database is unreachable | ✅ Shipped |
+| 22 | Production security headers | next.config.ts | CSP plus eight defense headers, including HSTS preload in production builds | ✅ Shipped |
+| 23 | Animated social card | tools/og-image | Reproducible 1200×630 GIF + PNG fallback from design tokens | ✅ Shipped |
+| 24 | Scenario-consistent evidence | lib/export.ts | CSV rows and executive JSON summaries derive from the selected scenario; JSON includes illustrative provenance | ✅ Shipped |
+| 25 | Honest simulation state | LiveTelemetryFeed | Bilingual fixture-simulation disclosure; no interval or audio work while closed | ✅ Shipped |
+| 26 | Native modal lifecycle | useNativeDialog | Platform modality and Escape handling, deterministic initial focus, invoker-focus restoration | ✅ Shipped |
+| 27 | Calculator provenance | RecoveryCalculator / HandoutView | Bilingual fixed-assumption disclosure; illustrative, not a forecast | ✅ Shipped |
+| 28 | Context-safe global shortcuts | lib/keyboard.ts | Section keys yield to focused controls, IME composition, handled events, modifiers, and open modals | ✅ Shipped |
+| 29 | Accessible operating modes | ScenarioSwitcher / LiveTelemetryFeed | Roving radio focus, arrow/Home/End selection, localized pressed filters, and truthful running/paused status | ✅ Shipped |
+
+
+
+
-
+
+
+