Add World Map sandbox tab; fix ported-component styling on the Space

Wire the shared Map playground (web/mapSandbox.js, synced from auto-battler) into a
World Map tab: pill switcher + all six sub-pages. build.sh bundles it, copies
worldmap.css, and curates exactly the ~105 map tilesets via the MAP_ASSET_URLS
manifest (no whole-pack copy). curate_assets.py is now manifest-driven and also
walks effects.json (its 204 effect/status icons were missing).

Host fixes so ported component CSS matches auto-battler instead of losing to
Gradio's own styles:
- extract :root design tokens -> web/shell/tokens.css (linked in HEAD)
- strip Gradio's .prose/.gradio-style wrappers off sandbox stages (web/tiny.js)
- scope component CSS under its stage id (build.sh) so it outranks Gradio's
.gradio-container-<ver> button/* base resets
- reroot /assets -> /sprites (incl. *.json) in the URL shim
- gate upgrade-insecure-requests (CSP meta + middleware) to the HTTPS Space so
plain-http LAN testing no longer hits ERR_SSL_PROTOCOL_ERROR

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app.py

@@ -110,18 +110,27 @@ THEME = ('<style>'
          # Gradio still hides it (display:none on the inactive tab's ancestor).
          '.gradio-container .tabitem{padding:0 !important;}'
          '.gradio-container .tabs{border:0 !important;}'
-         '#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage{position:fixed !important;top:0;bottom:0;'
+         '#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage,#worldmap-stage{position:fixed !important;top:0;bottom:0;'
          'right:0;left:var(--tac-w,240px);height:auto !important;z-index:1;}'
          'body.tac-collapsed #sprite-stage,body.tac-collapsed #persona-stage,'
-         'body.tac-collapsed #diary-stage,body.tac-collapsed #classes-stage,body.tac-collapsed #enemies-stage{left:0;}'
-         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage{left:0;}}'
+         'body.tac-collapsed #diary-stage,body.tac-collapsed #classes-stage,body.tac-collapsed #enemies-stage,'
+         'body.tac-collapsed #worldmap-stage{left:0;}'
+         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage,#worldmap-stage{left:0;}}'
          '</style>')
-HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
+# `upgrade-insecure-requests` is needed on the HTTPS Space (prevents mixed-content behind HF's
+# TLS edge) but BREAKS plain-http LAN testing: it forces every asset/manifest/frame URL to https
+# on a server with no TLS → ERR_SSL_PROTOCOL_ERROR. Only emit it when actually deployed on HF
+# (SPACE_ID/SPACE_HOST are set there); local `python app.py` over http omits it and just works.
+_CSP = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
+        if (os.environ.get("SPACE_ID") or os.environ.get("SPACE_HOST")) else '')
+HEAD = (_CSP
         + HIDE_TABS + FONTS + THEME +
+        '<link rel="stylesheet" href="/web/shell/tokens.css">'
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<link rel="stylesheet" href="/web/shell/spriteScene.css">'
         '<link rel="stylesheet" href="/web/shell/persona.css">'
         '<link rel="stylesheet" href="/web/shell/classes.css">'
+        '<link rel="stylesheet" href="/web/shell/worldmap.css">'
         '<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
@@ -216,6 +225,11 @@ with gr.Blocks(title="Tiny Army") as ui:
             # Sandbox: the shared Enemies playground (web/enemiesSandbox.js) — enemy
             # roster + WASD combat + stats/skill customize panel.
             gr.HTML('<div id="enemies-stage" style="overflow:hidden"></div>')
+        with gr.Tab("World Map"):
+            # Sandbox: the shared Map playground (web/mapSandbox.js, synced from auto-battler)
+            # — pill switcher + all six map sub-pages (World Map / Necropolis / Orc Kingdom /
+            # Forgotten Plains / Interiors / Towers), each with Generated/Tilesheet/Reference.
+            gr.HTML('<div id="worldmap-stage" style="overflow:hidden"></div>')
         # Pixi canvases start hidden (0×0); re-measure them when a tab is shown.
         battle_tab.select(None, None, None, js="()=>window.tinyResize&&window.tinyResize()")
         sprite_tab.select(None, None, None, js="()=>window.tinyResize&&window.tinyResize()")
@@ -241,7 +255,11 @@ fastapi_app = gr.Server() if USE_GRADIO_SERVER else FastAPI()
 @fastapi_app.middleware("http")
 async def upgrade_insecure(request, call_next):
     resp = await call_next(request)
-    resp.headers["Content-Security-Policy"] = "upgrade-insecure-requests"
+    # ONLY on the HTTPS Space (see the _CSP note above). On a plain-http LAN this header would
+    # force every asset/manifest/favicon to https on a TLS-less server → ERR_SSL_PROTOCOL_ERROR,
+    # so local `python app.py` over http must NOT send it.
+    if os.environ.get("SPACE_ID") or os.environ.get("SPACE_HOST"):
+        resp.headers["Content-Security-Policy"] = "upgrade-insecure-requests"
     # Our /web modules change on every deploy; without this the browser serves a
     # stale cached .js (e.g. old token caps) heuristically. no-cache = always
     # revalidate (cheap 304 via etag when unchanged). Model weights are fetched

build.sh

@@ -18,13 +18,27 @@ npx --yes esbuild "$AB/src/render/spritePlayground.js" --bundle --format=esm --o
 # pulls in the shared combatRenderer + engine. Pixi injected by web/tiny.js.
 npx --yes esbuild "$AB/src/render/classesSandbox.js"   --bundle --format=esm --outfile=web/classesSandbox.js
 npx --yes esbuild "$AB/src/render/enemiesSandbox.js"   --bundle --format=esm --outfile=web/enemiesSandbox.js
+# Map sandbox — the whole Map page (pill switcher + all six sub-pages: World Map / Necropolis /
+# Orc Kingdom / Forgotten Plains / Interiors / Towers, each with Generated/Tilesheet/Reference).
+# Pulls in every map renderer + the shared chunked-map engine. Pixi injected by web/tiny.js.
+npx --yes esbuild "$AB/src/render/mapSandbox.js"       --bundle --format=esm --outfile=web/mapSandbox.js
 
 # 2. App shell (nav IR + sidebar CSS/JS) + the playground chrome CSS → copied
 #    verbatim, so they can't drift from the React app, which renders the same files.
 mkdir -p web/shell
 cp "$AB/src/shell/nav.json" "$AB/src/shell/sidebar.css" "$AB/src/shell/sidebar.js" web/shell/
+# Design tokens — the shared component CSS (classes/worldmap/spriteScene) references the global
+# :root palette/fonts/shadows defined in the React app's styles.css. Extract just that :root block
+# (NOT the app-specific selectors) so the Space's components render with auto-battler's look.
+awk '/:root[[:space:]]*\{/{f=1} f{print} f&&/^\}/{exit}' "$AB/src/styles.css" > web/shell/tokens.css
 cp "$AB/src/render/spriteScene.css" web/shell/spriteScene.css
-cp "$AB/src/views/classes.css" web/shell/classes.css
+# Scope the sandbox component CSS under its stage id(s) (native CSS nesting). Gradio's own
+# `.gradio-container-<ver> button` / `… *` base resets (specificity 0,1,1 / 0,1,0) otherwise
+# outrank the components' single-class rules and strip their button/control backgrounds, borders
+# and padding. Adding the stage id gives every rule an id of specificity so it wins. Only the
+# Space's copies are wrapped — auto-battler loads the files unscoped, so the source is untouched.
+{ echo '#classes-stage, #enemies-stage {'; cat "$AB/src/views/classes.css"; echo '}'; } > web/shell/classes.css
+{ echo '#worldmap-stage {'; cat "$AB/src/views/worldmap.css"; echo '}'; } > web/shell/worldmap.css
 
 # 3. Assets → use auto-battler's FULL character manifest (so the Space lists every
 #    character, like the app) and curate every sheet it references (~1 MB).
@@ -34,7 +48,12 @@ cp "$AB/public/assets/characters.json" web/assets/characters.json
 cp "$AB/public/assets/effects.json" web/assets/effects.json
 cp "$AB/public/classes.json" web/assets/classes.json
 cp "$AB/public/enemies.json" web/assets/enemies.json
-AB="$AB" python3 curate_assets.py
+# Map assets: dump the manifest (MAP_ASSET_URLS — assembled from the map renderers + configs in
+# src/render/mapConfigs.js so it can't drift) and curate exactly those PNGs (tilesets / props /
+# premade-scene layers / interior+tower skins, ~105 files). No whole-pack copy.
+AB_ABS="$(cd "$AB" && pwd)"
+node --input-type=module -e "import {MAP_ASSET_URLS} from 'file://$AB_ABS/src/render/mapConfigs.js'; for (const u of MAP_ASSET_URLS) console.log(u)" > /tmp/tac-map-assets.txt
+AB="$AB" python3 curate_assets.py /tmp/tac-map-assets.txt
 
 # 4. /gw icons the Classes sandbox shows — just the ~44 CB skill icons (NOT all
 #    1484 GW icons) + the condition pips. Served at /gw (mounted in app.py).

curate_assets.py

@@ -1,19 +1,25 @@
 #!/usr/bin/env python3
-"""Curate the Space's sprite assets from the full auto-battler set.
+"""Curate the Space's assets from the full auto-battler set — manifest-driven.
 
-The Space ships a SUBSET of auto-battler's 65 MB asset library — only the sheets
-the curated characters (web/assets/characters.json) actually reference. Previously
-only the 5 core body sheets per character were copied, so every shadow, effect,
-projectile and diagonal sheet 404'd and silently degraded. This copies EVERY sheet
-the manifest references (body + shadows + extras + companions) so the Space renders
-identically to the React app for those characters.
+The Space ships a SUBSET of auto-battler's 65 MB asset library: only the files the
+app actually references. Rather than per-feature copy logic, this resolves a UNION of
+asset URLs from one or more manifests and copies exactly those, decoding %-escapes so
+URL-encoded folder names (e.g. "Carnival%20NPCs", "_Premade%20Scene") match on disk.
 
-  AB=../auto-battler python3 curate_assets.py      # copy referenced sheets
-Run from the tiny-army dir; idempotent. Add to build.sh so it stays reproducible.
+Manifests:
+  • web/assets/characters.json   — every sprite sheet the curated characters reference
+                                    (built in; body + shadows + extras + companions).
+  • extra URL-list files (argv)  — newline-delimited /assets/... URLs, e.g. the map's
+                                    MAP_ASSET_URLS dumped from auto-battler. Comment/blank
+                                    lines (#, empty) are skipped.
+
+  AB=../auto-battler python3 curate_assets.py [urls1.txt urls2.txt ...]
+Run from the tiny-army dir; idempotent. Driven by build.sh so it stays reproducible.
 """
 import json
 import os
 import shutil
+import sys
 from urllib.parse import unquote
 
 HERE = os.path.dirname(os.path.abspath(__file__))
@@ -23,8 +29,8 @@ DST_ROOT = os.path.join(HERE, "web", "assets")
 MANIFEST = os.path.join(DST_ROOT, "characters.json")
 
 
-def referenced_urls(manifest):
-    """Every /assets/... sheet URL the manifest points at, across all sheet kinds."""
+def character_urls(manifest):
+    """Every /assets/... sheet URL characters.json points at, across all sheet kinds."""
     urls = set()
     for pack in manifest["packs"]:
         for c in pack["characters"]:
@@ -41,13 +47,44 @@ def referenced_urls(manifest):
     return urls
 
 
+def file_urls(path):
+    """Newline-delimited /assets/... URLs from an extra manifest (skip blanks/comments)."""
+    with open(path) as f:
+        return {ln.strip() for ln in f if ln.strip() and not ln.startswith("#")}
+
+
+def json_asset_urls(path):
+    """Every /assets/....png|jpg URL anywhere in a JSON data file (recursive walk). Used for
+    effects.json — the classes/enemies skill cards render its effect + status-effect icons."""
+    urls = set()
+
+    def walk(o):
+        if isinstance(o, str):
+            if o.startswith("/assets/") and o.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
+                urls.add(o)
+        elif isinstance(o, dict):
+            for v in o.values():
+                walk(v)
+        elif isinstance(o, list):
+            for v in o:
+                walk(v)
+
+    if os.path.exists(path):
+        walk(json.load(open(path)))
+    return urls
+
+
 def main():
-    manifest = json.load(open(MANIFEST))
+    urls = character_urls(json.load(open(MANIFEST)))
+    urls |= json_asset_urls(os.path.join(DST_ROOT, "effects.json"))  # effect + status-effect icons
+    for path in sys.argv[1:]:
+        urls |= file_urls(path)
+
     copied = skipped = absent = 0
-    for url in sorted(referenced_urls(manifest)):
-        # Manifest URLs are URL-encoded (e.g. "Carnival%20NPCs"); decode so the path
-        # matches the real on-disk folder names (with spaces). The static server
-        # decodes the request the same way, so files land where the browser asks.
+    for url in sorted(urls):
+        # URLs are URL-encoded; decode so the path matches real on-disk folder names (with
+        # spaces). The static server decodes requests the same way, so files land where the
+        # browser asks. Strip the leading /assets/ (or any leading slash) to get the rel path.
         rel = unquote(url[len("/assets/"):] if url.startswith("/assets/") else url.lstrip("/"))
         src = os.path.join(SRC_ROOT, rel)
         dst = os.path.join(DST_ROOT, rel)