@genex-ai/cli-demo 0.51.0-dev.98 → 0.52.0-dev.111

package/dist/index.js

@@ -1652,7 +1652,13 @@ async function callPublish(ctx, commit, opts, log) {
 async function pushSource(cwd, ctx, log) {
   const target = await fetchPushUrl(ctx, log);
   if (!target) return false;
-  return pushWorktree(cwd, target.pushUrl, target.managed, log);
+  if (await pushWorktree(cwd, target.pushUrl, target.managed, log)) return true;
+  if (!target.managed) return false;
+  log.info("Retrying the source push\u2026");
+  await new Promise((r) => setTimeout(r, 2e3));
+  const fresh = await fetchPushUrl(ctx, log);
+  if (!fresh) return false;
+  return pushWorktree(cwd, fresh.pushUrl, fresh.managed, log);
 }
 async function pushWorktree(cwd, pushUrl, managed, log) {
   const EMPTY_TREE = "4b825dc642cb6eb9a060e54bf8d69288fbee4904";
@@ -2119,6 +2125,104 @@ async function runPreview(opts) {
   }
 }
 
+// src/commands/generate.ts
+import { PNG } from "pngjs";
+
+// src/lib/open.ts
+import { spawn as spawn4 } from "child_process";
+function tokenize(cmd) {
+  return cmd.trim().split(/\s+/).filter(Boolean);
+}
+function openUrl(url) {
+  let command;
+  let args;
+  const custom = (process.env.GENEX_BROWSER || process.env.BROWSER)?.trim();
+  const customParts = custom ? tokenize(custom) : [];
+  if (customParts.length > 0) {
+    command = customParts[0];
+    args = [...customParts.slice(1), url];
+  } else {
+    switch (process.platform) {
+      case "darwin":
+        command = "open";
+        args = [url];
+        break;
+      case "win32":
+        command = "cmd";
+        args = ["/c", "start", "", url];
+        break;
+      default:
+        command = "xdg-open";
+        args = [url];
+        break;
+    }
+  }
+  try {
+    const child = spawn4(command, args, { stdio: "ignore", detached: true });
+    child.on("error", () => {
+    });
+    child.unref();
+  } catch {
+  }
+}
+
+// src/lib/seams.ts
+var DEFAULT_SEAM_TOLERANCE = 3;
+function measureSeam(png, tolerance = DEFAULT_SEAM_TOLERANCE) {
+  const { width: w, height: h, data } = png;
+  const chan = (x, y, ch) => data[(y * w + x) * 4 + ch] ?? 0;
+  const colDiff = (a, b) => {
+    let s = 0;
+    for (let y = 0; y < h; y++) {
+      s += Math.abs(chan(a, y, 0) - chan(b, y, 0));
+      s += Math.abs(chan(a, y, 1) - chan(b, y, 1));
+      s += Math.abs(chan(a, y, 2) - chan(b, y, 2));
+    }
+    return s / (h * 3);
+  };
+  const rowDiff = (a, b) => {
+    let s = 0;
+    for (let x = 0; x < w; x++) {
+      s += Math.abs(chan(x, a, 0) - chan(x, b, 0));
+      s += Math.abs(chan(x, a, 1) - chan(x, b, 1));
+      s += Math.abs(chan(x, a, 2) - chan(x, b, 2));
+    }
+    return s / (w * 3);
+  };
+  const seamH = colDiff(0, w - 1);
+  const seamV = rowDiff(0, h - 1);
+  const stepX = Math.max(1, Math.floor(w / 64));
+  const stepY = Math.max(1, Math.floor(h / 64));
+  let baseH = 0;
+  let nH = 0;
+  for (let x = 1; x < w - 1; x += stepX) {
+    baseH += colDiff(x, x + 1);
+    nH++;
+  }
+  let baseV = 0;
+  let nV = 0;
+  for (let y = 1; y < h - 1; y += stepY) {
+    baseV += rowDiff(y, y + 1);
+    nV++;
+  }
+  baseH = Math.max(baseH / Math.max(1, nH), 1e-6);
+  baseV = Math.max(baseV / Math.max(1, nV), 1e-6);
+  const round = (n) => Math.round(n * 100) / 100;
+  const ratioHorizontal = round(seamH / baseH);
+  const ratioVertical = round(seamV / baseV);
+  const worstRatio = Math.max(ratioHorizontal, ratioVertical);
+  return {
+    width: w,
+    height: h,
+    ratioHorizontal,
+    ratioVertical,
+    worstRatio,
+    worstAxis: ratioHorizontal >= ratioVertical ? "horizontal" : "vertical",
+    tolerance,
+    seamless: worstRatio <= tolerance
+  };
+}
+
 // src/lib/sse.ts
 async function* readSSE(body) {
   const decoder = new TextDecoder();
@@ -2255,9 +2359,9 @@ async function runGenerate(kind, opts) {
     log.dim("  (Re-running the generate command would start \u2014 and bill \u2014 a NEW generation.)");
     return;
   }
-  await awaitAndReport(apiUrl, token, id, kind, log);
+  await awaitAndReport(apiUrl, token, id, kind, log, opts.open);
 }
-async function awaitAndReport(apiUrl, token, id, kind, log) {
+async function awaitAndReport(apiUrl, token, id, kind, log, open = false) {
   log.step("Generating\u2026 (this can take up to a minute)");
   const onProgress = (p) => log.dim(`  ${p}%`);
   const timeoutMs = waitTimeoutFor(kind);
@@ -2269,9 +2373,9 @@ async function awaitAndReport(apiUrl, token, id, kind, log) {
     process.exitCode = 1;
     return;
   }
-  await reportTerminal(kind, view, log);
+  await reportTerminal(kind, view, log, open);
 }
-async function reportTerminal(kind, view, log) {
+async function reportTerminal(kind, view, log, open = false) {
   if (view.status !== "completed") {
     log.error(`Generation ${view.status}${view.error ? `: ${view.error}` : ""}.`);
     process.exitCode = 1;
@@ -2290,6 +2394,15 @@ async function reportTerminal(kind, view, log) {
     log.plain(`  ${label}${f.url}`);
   }
   log.plain("");
+  if (kind === "texture" && files[0]) await reportTextureSeam(files[0].url, log);
+  if (open && files[0]) {
+    openUrl(files[0].url);
+    log.plain(
+      `  ${c.bold("\u{1F441}  Show this to the user")} \u2014 it just opened in their browser; paste this link in chat too so they can open it themselves:`
+    );
+    log.plain(`     ${files[0].url}`);
+    log.plain("");
+  }
   printHint(kind, files, log);
   await firstPreviewNudge(log);
 }
@@ -2375,6 +2488,27 @@ async function poll(apiUrl, token, id, onProgress, timeoutMs) {
   }
   return null;
 }
+async function reportTextureSeam(url, log) {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return;
+    const png = PNG.sync.read(Buffer.from(await res.arrayBuffer()));
+    if (png.width < 4 || png.height < 4) return;
+    const r = measureSeam(png);
+    if (r.seamless) {
+      log.dim(`  Tiling check: seam ${r.worstRatio}\xD7 this texture's own detail \u2014 tiles cleanly.`);
+      return;
+    }
+    log.error(
+      `Visible ${r.worstAxis} tiling seam \u2014 the tile boundary jumps ${r.worstRatio}\xD7 this texture's own detail (want \u2264 ${r.tolerance}\xD7).`
+    );
+    log.plain("  It will read as a repeating grid on any large surface. Before wiring it in:");
+    log.plain('  \u2022 regenerate with "seamless tiling, no visible edges" in the prompt (--terrain for ground), or');
+    log.plain("  \u2022 lower the mesh's UV repeat so the seam falls off-camera.");
+    log.plain(`  Re-check any image any time: ${c.cyan("npx genex ui seams --in <url>")}`);
+  } catch {
+  }
+}
 function printHint(kind, files, log) {
   const url = files[0]?.url ?? "";
   const hint = {
@@ -2440,10 +2574,10 @@ async function runWait(opts) {
   log.dim(`  ${kind} ${id}`);
   log.plain("");
   if (TERMINAL2.has(view.status)) {
-    await reportTerminal(kind, view, log);
+    await reportTerminal(kind, view, log, opts.open);
     return;
   }
-  await awaitAndReport(apiUrl, token, id, kind, log);
+  await awaitAndReport(apiUrl, token, id, kind, log, opts.open);
 }
 
 // src/commands/controller.ts
@@ -3029,11 +3163,11 @@ function rank(items, query) {
 // src/commands/ui.ts
 import fs14 from "fs/promises";
 import path14 from "path";
-import { PNG as PNG2 } from "pngjs";
+import { PNG as PNG3 } from "pngjs";
 
 // src/lib/png-tools.ts
 import fs13 from "fs/promises";
-import { PNG } from "pngjs";
+import { PNG as PNG2 } from "pngjs";
 var ALPHA_TRANSPARENT_MAX = 16;
 var isHttpUrl = (s) => /^https?:\/\//i.test(s);
 async function loadPng(input) {
@@ -3045,14 +3179,14 @@ async function loadPng(input) {
   } else {
     buf = await fs13.readFile(input);
   }
-  return PNG.sync.read(buf);
+  return PNG2.sync.read(buf);
 }
 async function writePng(file, png) {
-  await fs13.writeFile(file, PNG.sync.write(png));
+  await fs13.writeFile(file, PNG2.sync.write(png));
 }
 function cropPng(image, box) {
-  const out = new PNG({ width: box.w, height: box.h });
-  PNG.bitblt(image, out, box.x, box.y, box.w, box.h, 0, 0);
+  const out = new PNG2({ width: box.w, height: box.h });
+  PNG2.bitblt(image, out, box.x, box.y, box.w, box.h, 0, 0);
   return out;
 }
 function floodFill(width, height, visited, queue, startX, startY, inRegion, onPixel) {
@@ -3183,7 +3317,8 @@ var UI_NUMBER_FLAGS = {
   "--edge-flush-max": "edgeFlushMax",
   "--quantize": "quantize",
   "--ink-dist": "inkDist",
-  "--min-frac": "minFrac"
+  "--min-frac": "minFrac",
+  "--seam-tolerance": "seamTolerance"
 };
 var UI_USAGE = `${c.bold("Options for `ui` (all tools read --in <png path or https URL>)")}
   ui extract           --out-dir <dir> --names a,b,c (reading order) \u2014 split an
@@ -3199,7 +3334,10 @@ var UI_USAGE = `${c.bold("Options for `ui` (all tools read --in <png path or htt
                        ink candidates as JSON. [--quantize 12] [--ink-dist 60]
                        [--min-frac 0.004] [--out <json>] [--crop <png>]
   ui trim              [--out <png>] \u2014 crop to the alpha bbox (default: overwrite
-                       --in), print real dims + refresh the .bbox.json sidecar.`;
+                       --in), print real dims + refresh the .bbox.json sidecar.
+  ui seams             measure a tiling texture's wrap seam (opposite edges vs
+                       interior detail) \u2192 ratio + verdict as JSON; nonzero exit on
+                       a visible seam. [--seam-tolerance 3]`;
 async function runUi(opts) {
   const log = createLogger({ quiet: opts.quiet });
   try {
@@ -3216,9 +3354,12 @@ async function runUi(opts) {
       case "trim":
         await uiTrim(opts, log);
         return;
+      case "seams":
+        await uiSeams(opts, log);
+        return;
       default:
         log.error(
-          opts.sub ? `Unknown ui tool "${opts.sub}". Tools: extract, masks, text-color, trim.` : "Missing ui tool. Tools: extract, masks, text-color, trim."
+          opts.sub ? `Unknown ui tool "${opts.sub}". Tools: extract, masks, text-color, trim, seams.` : "Missing ui tool. Tools: extract, masks, text-color, trim, seams."
         );
         log.plain(UI_USAGE);
         process.exitCode = 1;
@@ -3384,7 +3525,7 @@ async function uiExtract(opts, log) {
       log.warn(`Skipping "${name}" \u2014 crop too small (${cropW}x${cropH}).`);
       continue;
     }
-    const out = new PNG2({ width: cropW, height: cropH });
+    const out = new PNG3({ width: cropW, height: cropH });
     for (let yo = 0; yo < cropH; yo++) {
       const sy = padY0 + yo;
       for (let xo = 0; xo < cropW; xo++) {
@@ -3545,7 +3686,7 @@ function greenAlpha(r, g, b, a) {
   return 0;
 }
 function convertGreenMask(annotatedCrop) {
-  const out = new PNG2({ width: annotatedCrop.width, height: annotatedCrop.height });
+  const out = new PNG3({ width: annotatedCrop.width, height: annotatedCrop.height });
   let filled = 0;
   let minX = annotatedCrop.width;
   let minY = annotatedCrop.height;
@@ -3647,7 +3788,7 @@ function blendPixel(image, x, y, rgba) {
   image.data[idx + 3] = Math.max(image.data[idx + 3], rgba[3]);
 }
 function makeOverlay(clean2, mask) {
-  const out = new PNG2({ width: clean2.width, height: clean2.height });
+  const out = new PNG3({ width: clean2.width, height: clean2.height });
   clean2.data.copy(out.data);
   for (let y = 0; y < mask.height; y += 1) {
     for (let x = 0; x < mask.width; x += 1) {
@@ -3925,6 +4066,27 @@ async function uiTrim(opts, log) {
 `
   );
 }
+async function uiSeams(opts, log) {
+  const input = requireOpt(opts.input, "--in", "seams");
+  const tol = opts.seamTolerance ?? DEFAULT_SEAM_TOLERANCE;
+  const png = await loadPng(input);
+  if (png.width < 4 || png.height < 4) {
+    fail("Image is too small to test for tiling.", { width: png.width, height: png.height });
+  }
+  const r = measureSeam(png, tol);
+  const name = input.split("/").pop() ?? input;
+  process.stdout.write(`${JSON.stringify({ input, ...r })}
+`);
+  if (r.seamless) {
+    log.success(
+      `${name}: tiles cleanly \u2014 worst seam ${r.worstRatio}\xD7 the texture's own detail (\u2264 ${tol}\xD7).`
+    );
+    return;
+  }
+  fail(
+    `Visible ${r.worstAxis} tiling seam in ${name}: the tile boundary jumps ${r.worstRatio}\xD7 the texture's own detail (want \u2264 ${tol}\xD7). Regenerate it seamless/tileable, or lower the mesh's UV repeat so the seam falls off-camera.`
+  );
+}
 
 // src/index.ts
 var GEN_KINDS = /* @__PURE__ */ new Set(["model", "skybox", "sfx", "texture", "image", "video"]);
@@ -3969,6 +4131,8 @@ ${c.bold("Options for the generators (`model` `skybox` `sfx` `texture` `image` `
   --terrain            (texture) seamless tiling surface for terrain/ground.
   --duration <sec>     (sfx, video) target clip length in seconds.
   --transparent        (image) transparent background (alpha) \u2014 for decals/stickers.
+  --open               (image/video) open the finished asset in the user's browser +
+                       print a link \u2014 show them the concept frame / anything they approve.
   --aspect <ratio>     (image) aspect preset (e.g. square, landscape, portrait).
   --quality <q>        (image) quality preset: low | medium | high.
   --candidates <n>     (image) generate 2-4 variants in ONE call and print every
@@ -4153,6 +4317,9 @@ function parseArgs(argv) {
       case "--no-wait":
         parsed.options.noWait = true;
         break;
+      case "--open":
+        parsed.options.open = true;
+        break;
       case "--terrain":
         parsed.options.terrain = true;
         break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genex-ai/cli-demo",
-  "version": "0.51.0-dev.98",
+  "version": "0.52.0-dev.111",
   "description": "Set up your ~/.claude workspace, authorize, create a game project, generate AI assets, and publish (genex CLI).",
   "type": "module",
   "bin": {
@@ -21,7 +21,7 @@
     "start": "node src/index.ts",
     "dev": "node --watch src/index.ts",
     "typecheck": "tsc --noEmit",
-    "test": "node --test test/*.test.ts"
+    "test": "node --test --test-concurrency=1 test/*.test.ts"
   },
   "keywords": [
     "cli",

package/templates/skills/genex-ai-hud/SKILL.md

@@ -114,6 +114,24 @@ The test: "is this fixed identity artwork, or should runtime code own it?"
 Baking a runtime value into a sprite is a failure; stripping a carved identity
 label flattens the art.
 
+## Icons & mechanics must match the game — diff before Stage 2
+
+Words are only half of it. Every ICON, slot, gauge, and pictogram in the mockup
+implies a MECHANIC: a grenade icon promises grenades, three ability slots
+promise three abilities, an armor bar promises armor. Before Stage 2, walk each
+one against the game contract — the mechanics the code actually has (or that you
+are committing to build):
+
+- **Backed by a real mechanic** → keep it and wire it to that state.
+- **No backing mechanic** → it is a promise the player will notice is empty.
+  CUT it (prompt Stage 2, or a region re-edit, to omit that icon/slot) OR add
+  the mechanic to the game. Shipping a depicted control the game can't do — a
+  grenade slot on a rifle-only HUD, an armor bar with no armor, a minimap over
+  no map — is a failure, and "the model drew it so I kept it" is how it happens.
+
+The mockup (and any concept frame) anchors STYLE; the game contract owns WHAT
+EXISTS. When the picture and the mechanics disagree, the mechanics win.
+
 ## The pipeline
 
 Each step is one command; every `<...-url>` is the R2 URL the previous command

package/templates/skills/genex-ai-image/SKILL.md

@@ -129,6 +129,18 @@ Gotchas (all bite in practice):
   moving or skinned target, use a small `PlaneGeometry` quad offset along the normal
   (`hit.point + n * 0.01`, `quad.lookAt(hit.point.clone().add(n))`) instead.
 
+### Impact marks (bullet holes, scorch, blood) — spawn on the hit, not a keypress
+
+A game that shoots, throws, or explodes and leaves NO mark on what it hits reads
+as unfinished — and it's the same recipe, driven by the weapon's raycast you
+already have. Generate ONE small `--transparent` bullet-hole / scorch / impact
+image, then on each confirmed **world** hit place a decal at `hit.point` with
+`hit.face.normal` (exactly the `spray()` body above), capped in a FIFO ring
+(~30–50) reusing one shared material. On enemy/skinned hits skip the decal and
+use the quad fallback or a hit-spark VFX instead. Impact marks are a first-class
+generated surface for any weapon/collision game — inventory them up front with
+the rest of your art, don't discover the bare walls at the end.
+
 ## Multiplayer
 
 The asset URL is public, permanent, and CORS-open, so it is safe to broadcast the

package/templates/skills/genex-ai-texture/SKILL.md

@@ -67,6 +67,39 @@ map.repeat.set(64, 64);
 scene.add(ground);
 ```
 
+## Tiling is checked FOR you — read the verdict
+
+`npx genex texture` measures the wrap seam of every texture it generates and
+prints the verdict right under the URL. A bad one looks like this:
+
+```
+✗ Visible vertical tiling seam — the tile boundary jumps 6.6× this texture's own detail (want ≤ 3×).
+```
+
+`--terrain` ASKS the model for seamless; it does **not** guarantee it — a shipped
+game seamed at 6.6× with `--terrain` set. So when that line appears, fix it
+BEFORE wiring the texture in: **regenerate** with "seamless tiling, no visible
+edges" in the prompt, or **lower the `repeat`** so the seam falls off-camera. A
+good texture prints `tiles cleanly` instead. To re-check any image (including one
+you didn't just generate): `npx genex ui seams --in <png|url>`.
+
+## Scale by texel density — never hand-pick `repeat`
+
+The other half of "the floor looks wrong" is a `repeat` guessed out of the air.
+Keep texels SQUARE: derive BOTH axes from the surface's real world size and ONE
+chosen tile size.
+
+```ts
+const TILE_M = 4;                                // one tile covers 4×4 metres — choose once
+map.repeat.set(width / TILE_M, depth / TILE_M);  // a 40×400 m lane → (10, 100)
+```
+
+A non-uniform guess like `repeat.set(2, 40)` on a long lane stretches the texture
+20:1 along it: the pattern smears one way and crowds the other. That reads as
+"wrong scale / glued together" even when the texture itself is flawless — and it
+is exactly what shipped in a real game. Same rule for walls and platforms: derive
+from that surface's own width/height, not from the floor's numbers.
+
 ## Publish checklist
 
 - Load it from the **URL** the command printed — absolute and permanent, so it resolves
@@ -92,6 +125,8 @@ scene.add(ground);
 - **"Email not verified" (`email_verification_required`)** — generation credits
   unlock after the account's email is verified. Give the user the verify link the
   CLI printed, wait for them to confirm, then re-run the command.
-- **Visible tiling seams** — use `--terrain` (tuned for seamless edges), lower the
-  `repeat`, or blend two textures. Perfect seamlessness is a known v1 limitation.
+- **Visible tiling seams** — measure first (`npx genex ui seams --in <url>`): a
+  high ratio is a defect to fix, not a limitation to accept. Regenerate with
+  `--terrain` / a "seamless tiling" prompt, lower the `repeat`, or blend two
+  textures until the check passes.
 - **Colors look washed/dark** — ensure `map.colorSpace = THREE.SRGBColorSpace`.

package/templates/skills/genex-threejs-game-ui/SKILL.md

@@ -79,13 +79,25 @@ lap counter in a game without laps). `--aspect 16:9 --quality high
 --no-wait`, enqueued FIRST of all art; the URL goes into the style-brief
 comment.
 
-**Share it before building on it.** The moment the frame lands, show it to
-the user — "this is roughly how the game will look: keep it, or change
-something?" — as ONE structured question with 2–3 concrete adjustment
-options. Keep building gameplay-neutral work (scaffold, physics, netcode)
-while waiting, but do NOT anchor further art to an unapproved frame; if the
-user redirects, regenerate with their notes before the HUD mockup and menu
-frame go out.
+**Share it before building on it — actually SHOW the image, don't just ask.**
+When the concept lands, pick it up with `genex wait <id> --open` (or generate it
+with `--open`): it opens in the user's browser AND prints the link. Paste that
+URL as a clickable link in your approval message — a URL is invisible in a
+terminal, and "do you like it?" with no picture in front of the user is the #1
+way this checkpoint fails (they end up digging logs for the file path). Then ask
+ONE structured question — "this is roughly how the game will look: keep it, or
+change something?" — with 2–3 concrete adjustment options. Keep building
+gameplay-neutral work (scaffold, physics, netcode) while waiting, but do NOT
+anchor further art to an unapproved frame. **Approval is a LOOP, not a
+one-shot:** if the user dislikes ANYTHING, regenerate with their exact notes
+(`--candidates 2–3` gives them options to choose from), open + link the new
+frame, and ask again — repeat until they actually approve. Carry every note
+forward so each round compounds; if two rounds don't converge, offer 2–3
+distinct directions as a structured question instead of re-rolling blind. The
+HUD mockup, the menu, and every downstream asset wait for a frame the user has
+signed off — a single "meh" is never permission to move on. The same "open it +
+paste the link" rule covers every image the user weighs in on — the menu still,
+the HUD mockup candidates.
 
 **The concept anchors STYLE, not truth.** Palette, materials, light, and
 register come from the frame; CONTENT comes from the game contract. When
@@ -195,6 +207,48 @@ edits scattered through the code:
    HUD state come from `$genex-threejs-multiplayer`; render what the SDK
    reports, don't guess at it.
 
+## Escape must pause the game — not shrink the window
+
+For a game that captures the mouse (first-person or pointer-lock aim — see the
+pointer bucket in `$genex-threejs-camera-direction`), pressing Escape does two
+**browser-reserved** things you CANNOT stop with `preventDefault`: it exits
+fullscreen and releases pointer lock, and the player sees the window "shrink".
+The real fix is the **Keyboard Lock API**, which routes Escape to your code
+instead — Chromium only, and only in fullscreen. Enter fullscreen on a gesture
+(the Deploy/Resume click), capture Escape, and own the pause:
+
+```ts
+// call ONLY from a user gesture (the Deploy click, the Resume click) — never at boot
+async function enterImmersive(): Promise<void> {
+  try {
+    if (!document.fullscreenElement)
+      await document.documentElement.requestFullscreen({ navigationUI: "hide" });
+  } catch { /* sandboxed iframe or no gesture — the pointer-lock path below still pauses */ }
+  // Chromium + fullscreen only: deliver Escape to us instead of exiting fullscreen.
+  try {
+    await (navigator as unknown as { keyboard?: { lock?: (k: string[]) => Promise<void> } })
+      .keyboard?.lock?.(["Escape"]);
+  } catch { /* Keyboard Lock unsupported — fine */ }
+}
+
+document.addEventListener("keydown", (e) => {
+  if (e.code !== "Escape") return;
+  e.preventDefault();                 // stops any *other* default; the reserved ones the lock handles
+  if (phase === "playing") { document.exitPointerLock?.(); setPhase("paused"); } // free cursor for the menu
+  else if (phase === "paused") { void enterImmersive(); canvas.requestPointerLock?.(); } // Esc resumes
+});
+```
+
+- **Degradation is built in.** Where Keyboard Lock is absent (Safari, Firefox) or
+  the game isn't fullscreen, the browser still releases pointer lock on Escape —
+  so ALSO keep the pointer-lock-loss → pause path (`pointerlockchange`: if
+  unlocked while `playing`, `setPhase("paused")`). Escape then always pauses; it
+  only *also* drops fullscreen on browsers without the lock — unavoidable there.
+- **Only for immersive/pointer-lock games.** A top-down or menu-driven game never
+  captures the mouse and has no window to shrink — skip all of this.
+- **Dashboard embed:** full coverage needs the game iframe to permit keyboard
+  lock; standalone play (`<slug>.genex.technology`) works today regardless.
+
 ## The loader
 
 The loader is the first thing every player sees — a bare "Loading… 3/5" over

package/templates/skills/genex-threejs-skill-router/SKILL.md

@@ -67,11 +67,21 @@ direction in the same plan block — the camera rig + pointer bucket
 (`$genex-threejs-camera-direction`), the renderer baseline (tone mapping,
 exposure, output color space — set deliberately at boot; stock three.js
 defaults are not a look, `$genex-threejs-exposure-color-grading`), the post
-stack this game ships (bloom/AO/grade — at least ONE built render-pass effect
-for EVERY game, justified by the shared style brief; the UI vignette div or a
-CSS filter on the canvas does not count, and a plan that "deliberately skips
-everything" is the stock default, not a look; `$genex-threejs-image-pipeline`
-owns ordering when 2+ compose), one named **ambient-motion loop** that keeps
+stack this game ships — read off the concept frame's OWN look (the grade, bloom
+level, haze, grain it already shows) and which post the 2–3 AAA references lean
+on, not a default single bloom; ONE built render-pass effect is the FLOOR
+against no-post for EVERY game, never the target — ship the richness the concept
+implies (the UI vignette div or a CSS canvas filter does not count;
+`$genex-threejs-image-pipeline` owns ordering when 2+ compose), a decision for
+**every primitive surface** the game builds — walls, barriers, kerbs and
+platforms each get a real texture or a **shader** where that surface wants motion
+or energy (a pulsing force barrier, an electric fence, a scrolling hazard strip),
+judged one by one: a shader that gives a barrier life earns its place, the same
+effect everywhere disfigures, deliberate flat black is valid if you say so — but
+a flat-colour box beside textured geometry is the "stopped halfway" tell
+(`$genex-threejs-procedural-materials` / `$genex-threejs-procedural-vfx`, and SEE
+it in the running game), one named
+**ambient-motion loop** that keeps
 the scene alive at rest (emissive pulse, shimmer, drifting dust — shader
 work, zero generations), and the lighting/atmosphere mood from that
 same brief. Planning is not building — effects still land last in the

package/templates/skills/genex-threejs-skill-router/references/routing-map.md

@@ -41,13 +41,19 @@ Three.js release or branch, and do not blindly copy demo architecture.
    - **renderer baseline**: tone mapping, exposure, and output color space set
      deliberately at boot (`$genex-threejs-exposure-color-grading` owns the
      staging — stock three.js defaults are not a look);
-   - **the post stack**: which image effects THIS game ships (bloom? AO?
-     grade?) — each named and justified by the shared style brief. The floor
-     for EVERY game is the deliberate renderer baseline PLUS at least one
-     scene-serving render-pass effect (bloom, AO, or a LUT/shader grade — the
-     UI vignette div or a CSS filter on the canvas does not count); "no post
-     at all" is the stock default, not a plan, and "it's only a draft" is not
-     a lower floor. When 2+ effects compose, `$genex-threejs-image-pipeline`
+   - **the post stack**: read the look off your evidence — don't default to a
+     single bloom. TWO sources drive it: (a) the CONCEPT FRAME — a rendered
+     image that already carries a grade, a bloom level, haze/DoF, maybe grain or
+     aberration; name what it actually shows and reproduce THAT; (b) the 2–3 AAA
+     references — name which post each one leans on (racing: motion blur + heat
+     haze; grounded shooter: restrained bloom + film grain + faint aberration;
+     clean sci-fi: crisp bloom + strong grade). Ship the stack that evidence
+     calls for, each effect named and justified. ONE scene-serving render-pass
+     effect (bloom, AO, or a LUT/shader grade — a UI vignette div or a CSS
+     canvas filter does NOT count) is the FLOOR against "no post", never the
+     target: match the concept's richness, don't stop at one token pass. "No
+     post at all" is the stock default, not a plan, and "it's only a draft" is
+     not a lower floor. When 2+ effects compose, `$genex-threejs-image-pipeline`
      owns the pass ordering;
    - **references**: name 2–3 AAA games whose look this game borrows
      (conventions, lighting mood, palette, post — never trade dress); the
@@ -59,6 +65,21 @@ Three.js release or branch, and do not blindly copy demo architecture.
      drifting dust, a slowly flowing texture. Shader/procedural, zero
      generations, built with the scene — a world that is perfectly still
      reads as a screenshot, not a place;
+   - **every primitive surface — texture it or shade it, decided one by one**:
+     the ground is never the only surface. Walk the walls, barriers, kerbs,
+     platforms and props the game BUILDS out of primitives, and give each a real
+     material: a generated texture, or a **shader** where that surface genuinely
+     wants motion or energy — a force barrier that pulses and refracts, an
+     electric fence, a scrolling hazard strip, an emissive seam that breathes.
+     Judge surface by surface: a shader that gives a blocking barrier life earns
+     its place; the same effect smeared over everything disfigures the scene.
+     Deliberate flat black IS a valid answer when the look calls for it — say so
+     in one line. What is never valid is not deciding: a flat-colour box standing
+     next to textured geometry is the "stopped halfway" tell, and it is what
+     ships when this bullet is skipped. `$genex-threejs-procedural-materials`
+     and `$genex-threejs-procedural-vfx` own the craft. Whatever you apply, SEE
+     it in the running game before calling it done — an unverified shader
+     disfigures as easily as it delights;
    - **lighting/atmosphere mood** from the SAME shared style brief the UI gate
      wrote — one art direction across scene and UI.
    Planning is not building: effects still land LAST (steps 10–11); this step