From 04128a24d38a8e9ca5a69852be7158bda3a3be1e Mon Sep 17 00:00:00 2001
From: artheru <artheru@gmail.com>
Date: Wed, 10 Jun 2026 08:05:49 +0800
Subject: [PATCH] route transition: fade-up on navigation (0.56.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- wrap the routed Scene in a key={route} container so each page mounts with
  a subtle fade-up — a premium app feel on every navigation
- the wrapper preserves the flex/scroll layout (flex:1, min-height:0, column)
  so the per-page scroll containers (gm-home, td-page) still scroll
- respects prefers-reduced-motion
- verified live: transition wrapper present, home + inner pages still scroll
  (2813>744), navigation works, layout intact
---
 index.html      | 2 +-
 package.json    | 2 +-
 src/Scene2D.jsx | 4 ++--
 src/styles.css  | 5 +++++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index d733291..bd571f6 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0e0a14" />
     <meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
-    <meta name="version" content="0.55.0-broker" />
+    <meta name="version" content="0.56.0-routes" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
diff --git a/package.json b/package.json
index d4e2982..8187d28 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "amerc-site",
-  "version": "0.55.0-broker",
+  "version": "0.56.0-routes",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/Scene2D.jsx b/src/Scene2D.jsx
index 37c7ce3..005fc86 100644
--- a/src/Scene2D.jsx
+++ b/src/Scene2D.jsx
@@ -7,7 +7,7 @@ import Account from './Account.jsx';
 import TavernGame from './TavernGame.jsx';
 import { api } from './api.js';
 
-const RELEASE = '0.55.0-broker';
+const RELEASE = '0.56.0-routes';
 
 const NAV = [
   { id: 'home', label: 'Tavern' },
@@ -445,7 +445,7 @@ export default function Scene2DApp() {
     <main className="px-app td-app">
       <h1 className="sr-only">amerc agent mercenary tavern</h1>
       <PixelTopbar route={route} setRoute={setRoute} auth={auth} />
-      <Scene route={route} setRoute={setRoute} auth={auth} />
+      <div key={route} className="route-enter"><Scene route={route} setRoute={setRoute} auth={auth} /></div>
     </main>
   );
 }
diff --git a/src/styles.css b/src/styles.css
index 435e310..e2b1455 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1402,3 +1402,8 @@ button {
 .ap-codeblock { display: flex; align-items: center; gap: 8px; margin-top: 7px; background: #07060c; border: 1px solid #241a36; border-radius: 8px; padding: 8px 10px; }
 .ap-codeblock code { flex: 1; color: #7fe9ff; font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.5; word-break: break-all; white-space: pre-wrap; background: none; padding: 0; }
 .ap-codeblock .px-action { flex: 0 0 auto; }
+
+/* route transition (0.55+) */
+.route-enter { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: route-in .34s cubic-bezier(.2,.7,.2,1); }
+@keyframes route-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .route-enter { animation: none; } }