@homie-rocks/studio 0.17.0 → 0.18.1

package/lib/template-history.json

@@ -518,6 +518,62 @@
      "## Beta": "9d02638207a26e73"
     }
    }
+  },
+  "0.18.0": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "ce7a8fd91c6bbee2",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "a3dc042dadd39df8",
+    "videos/README.md": "16babc3437d5545b",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "eb1942414b8af7f8",
+     "## Commands (all through the pinned CLI in node_modules)": "9c51f189412e6a9f",
+     "## The site": "ab922bb6bde23293",
+     "## Making games": "a8a893eeada33bf5",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Running live games (the back office)": "f0566f07cff04113",
+     "## Servers and AI seats": "0a332b07e22d3fce",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "969318425c99f5a5",
+     "## Beta": "9d02638207a26e73"
+    }
+   }
+  },
+  "0.18.1": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "ce7a8fd91c6bbee2",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "a3dc042dadd39df8",
+    "videos/README.md": "16babc3437d5545b",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "eb1942414b8af7f8",
+     "## Commands (all through the pinned CLI in node_modules)": "9c51f189412e6a9f",
+     "## The site": "ab922bb6bde23293",
+     "## Making games": "a8a893eeada33bf5",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Running live games (the back office)": "f0566f07cff04113",
+     "## Servers and AI seats": "0a332b07e22d3fce",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "969318425c99f5a5",
+     "## Beta": "9d02638207a26e73"
+    }
+   }
   }
  }
 }

package/lib/upgrade.mjs

@@ -21,11 +21,16 @@
  * Without --apply it changes nothing and says what --apply would do: the person agrees first. It never touches
  * studio.json beyond `homie.studio`, the studio's look (site/theme.json), its Worker config (deploy's), its games,
  * media or posts.
+ *
+ * Media (0.18.0): the plan also says which songs and videos are big media (over studio.json media.r2Over, 1 MiB
+ * unless set, or left out of git), what is in the studio's R2 already, and the step that moves the rest
+ * (`media move`, which every deploy of a studio with storage also runs). Upgrade itself never moves a file.
  */
 import { createHash } from 'node:crypto';
 import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
 import { spawnSync } from 'node:child_process';
 import { dirname, join } from 'node:path';
+import { R2_COST, mediaPlan, r2OverOf, sizeOf } from './media.mjs';
 import { studioFiles } from './scaffold.mjs';
 import { readStudio } from './studio.mjs';
 import { STUDIO_VERSION, packageSpec } from './version.mjs';
@@ -210,14 +215,36 @@ export function upgradePlan(root, { history = readHistory() } = {}) {
 
   const git = spawnSync('git', ['status', '--porcelain'], { cwd: root, encoding: 'utf8' });
   const dirty = git.status === 0 ? git.stdout.split('\n').filter(Boolean).length : null;
+  const media = mediaNote(root, studio);
   return {
     ok: true, command: 'upgrade', applied: false, root, studio: name, from, to: STUDIO_VERSION,
     changes, kept,
+    ...(media ? { media } : {}),
     ...(dirty ? { uncommitted: dirty } : {}),
     next: changes.length ? ['npx --no-install homie-studio upgrade --apply   (after the person agrees)'] : [],
   };
 }
 
+/** What the studio's big media does from this version on: what R2 holds, what would go there, and the step that does it. */
+function mediaNote(root, studio) {
+  const cf = studio.cloudflare ?? {};
+  const storage = cf.r2 && (cf.created ?? []).includes(`r2:${cf.r2}`) ? cf.r2 : null;
+  const over = r2OverOf(studio);
+  let rows = [];
+  try { rows = mediaPlan(root, { over }); } catch { return null; }
+  const big = rows.filter((r) => r.state === 'move' || r.state === 'too-big').map(({ abs, held, ...r }) => r);
+  const inR2 = rows.filter((r) => r.state === 'r2').map(({ abs, held, ...r }) => r);
+  if (!big.length && !inR2.length) return null;
+  const bytes = big.reduce((n, r) => n + (r.bytes ?? 0), 0);
+  return {
+    storage, over, big, inR2,
+    next: !big.length ? null : storage
+      ? `npx --no-install homie-studio media move --dry-run, then media move (the next npm run deploy also does it): ${big.length} file(s), ${sizeOf(bytes)}, go to R2 ${storage}, each read back and checked by SHA-256 before the site stops carrying it; the addresses stay the same and the files stay in this folder. Upgrade itself moves nothing.`
+      : `no storage: these stay on the site (up to 25 MiB a file), and a deploy from another computer or Workers Builds leaves out any that git does not keep. With the person's agreement: npx --no-install homie-studio storage add (Cloudflare asks for a payment method on the account first), then media move.`,
+    cost: R2_COST,
+  };
+}
+
 function writeAtomic(path, text) {
   mkdirSync(dirname(path), { recursive: true });
   const tmp = `${path}.upgrade-${process.pid}`;

package/media/MEDIA.md

@@ -75,20 +75,71 @@ homie.rocks shows a cover only from the studio's own site, as a `.jpg`, `.png`,
 
 ## Where the bytes come from
 
-A studio needs no storage for songs and videos: the site serves them itself. For every public
-file of a published entry, the build picks the first that exists:
-
-1. `key`: the file is in the studio's storage, an R2 bucket that `homie-studio storage add`
-   creates (Cloudflare asks for a payment method on the account before R2 works, so the person
-   agrees first) and `homie-studio media put <file>` uploads to; the site serves it at
-   `/media/<key>`, with byte ranges so phones can seek.
-2. `path`: the file is in the studio folder; the build copies it into the site as `/<path>` when
-   it is 25 MiB or smaller (Cloudflare's limit for one static file), and the Worker answers byte
-   ranges for it too. This is the default, and it needs nothing but a deploy.
-3. `url`: an absolute `https://` address somewhere else.
-
-A file with none of these is left out and `media list` says so. Media never goes into git: the
-studio's `.gitignore` keeps `*.wav`, `*.mp3`, `*.flac`, `*.mp4`, `*.mov` and `*.webm` under
-`music/` and `videos/` out of the repository, so without storage the site is deployed from the
-computer that has the files. Keep deliveries under 25 MiB (the video skill's cuts do) or add
-storage for bigger ones.
+A new studio needs no storage for songs and videos: the site serves each file itself, up to 25 MiB
+a file (Cloudflare's limit for one static file of a Worker). Once the studio has storage, its big
+media lives in R2 instead. For every public file of a published entry, the build picks the first
+that applies:
+
+1. `r2`: the file is in the studio's own R2 bucket, put there by `homie-studio media move` (or a
+   deploy). The site serves it at **the same address it always had**, `/<path>` (for example
+   `/videos/trailer/trailer.mp4`), from R2, with byte ranges (206: phones seek with them, Safari needs
+   them to play a video at all), HEAD, an ETag and `If-None-Match` (304), and the same
+   `Cache-Control` as the site's own files (`public, max-age=0, must-revalidate`). A deploy's build
+   no longer carries the file in the site's static assets.
+2. `key`: a file `homie-studio media put` uploaded before 0.18.0 is served at `/media/<key>`, as it
+   always was (`media move` leaves it alone).
+3. `path`: the file is in the studio folder; the build copies it into the site as `/<path>` when it
+   is 25 MiB or smaller, and the Worker answers byte ranges for it too. This is the default, and it
+   needs nothing but a deploy.
+4. `url`: an absolute `https://` address somewhere else.
+
+A file with none of these is left out and `media list` says so.
+
+### Big media goes to R2, by default, once the studio has storage
+
+`homie-studio storage add` makes the studio's R2 bucket (one step the person agrees to: Cloudflare
+asks for a payment method on the account before R2 works, even inside its free tier). From then on,
+every `npm run deploy` first moves the studio's big media into it, and `homie-studio media move` does
+the same on its own:
+
+- **What moves:** every public file of a published song or video that is over 1 MiB, or that git
+  leaves out of the repository (`*.mp4`, `*.mp3`, `*.wav`… under `music/` and `videos/`, by the
+  studio's `.gitignore`). A deploy from another computer, or Cloudflare's Workers Builds, does not
+  have git-ignored files, so a file that is only on this computer would disappear from the site;
+  in R2 it stays. `studio.json` sets another size: `"media": { "r2Over": 5242880 }` (bytes), or
+  `"media": { "r2Over": false }` to move nothing on its own (`media move <file>` still moves the file
+  it names).
+- **How:** each file is hashed (SHA-256), uploaded with `wrangler r2 object put` to the key that is
+  its path, read back with `wrangler r2 object get --pipe` and hashed again. Only when the size and
+  the hash match does `media move` record it on the manifest's file:
+
+  ```json
+  { "role": "video", "path": "videos/trailer/trailer.mp4", "type": "video/mp4", "bytes": 45431041,
+    "r2": { "key": "videos/trailer/trailer.mp4", "sha256": "8efe9b96…", "bytes": 45431041, "at": "2026-10-02T03:00:00Z" } }
+  ```
+
+  A copy that comes back different is refused, nothing is recorded, and the file stays on the site.
+  The file on this computer is never deleted, moved or changed.
+- **After a re-cut** at the same path, the next `media move` or deploy sees a different hash and
+  uploads it again; until then a deploy's site carries the changed file itself when it fits.
+- **`media move --dry-run`** says what would move and calls nothing; **`media move --verify`** reads
+  every file R2 already holds back and checks its hash again.
+- **Local `dev`** still copies a moved file into the local site when it is 25 MiB or smaller,
+  because `wrangler dev`'s own R2 is empty; a bigger one does not play locally.
+
+**What it costs (Cloudflare's R2 pricing):** serving costs nothing in bandwidth (R2 has no egress
+fees). Storage is free up to 10 GB-month, then US$0.015 per GB-month; uploads (Class A operations)
+are free up to 1 million a month, reads (Class B) up to 10 million a month. A video served from R2
+costs one or two reads per byte range a player asks for. Beyond the free tier Cloudflare bills the
+studio's own account; `media move` and `media list` say how much the studio's media adds up to, and
+warn past 10 GB. Wrangler uploads at most 300 MiB in one go: a bigger file is refused with the
+reason (the video skill's deliveries are far smaller).
+
+Why not the site's own files for everything? A Worker's static files are at most 25 MiB each (and
+20,000 per version on the free plan); every deploy of a site carrying them uploads whichever
+changed; a byte range of a static file is cut out by the Worker after reading the whole file; and
+files git does not keep exist only on the computer that made them.
+
+Media never goes into git: the studio's `.gitignore` keeps `*.wav`, `*.mp3`, `*.flac`, `*.mp4`,
+`*.mov` and `*.webm` under `music/` and `videos/` out of the repository. Commit the manifests: they
+name each file's R2 copy, which is all a deploy from anywhere else needs.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.17.0",
-  "description": "A studio for games, music and video on its own Cloudflare: scaffold, multiplayer starters on the netplay contract, a port toolkit that makes existing single-player web games multiplayer, the site Worker with public rooms (Table/Lobby Durable Objects and D1, all on the free Workers plan, no payment method), a site with the hub's sections (Home, Games, Music, Videos, Rooms, Posts with feeds) in the studio's own look, an epic landing page for every game, optional R2 storage for large media, deploy, and the homie.rocks directory.",
+  "version": "0.18.1",
+  "description": "A studio for games, music and video on its own Cloudflare: scaffold, multiplayer starters on the netplay contract, a port toolkit that makes existing single-player web games multiplayer, the site Worker with public rooms (Table/Lobby Durable Objects and D1, all on the free Workers plan, no payment method), a site with the hub's sections (Home, Games, Music, Videos, Rooms, Posts with feeds) in the studio's own look, an epic landing page for every game, big songs and videos in the studio's own R2 once it has storage (uploaded, checked by SHA-256, served at the same addresses), deploy, and the homie.rocks directory.",
   "type": "module",
   "license": "Apache-2.0",
   "homepage": "https://homie.rocks/studio/",

package/port/index.ts

@@ -8,6 +8,9 @@
  *                keys on computers, a floating stick and small buttons on phones
  *   groundBasis / screenToGround / PlayerYaw
  *                the camera rules: input on screen axes, a yaw only the player turns
+ *   fitView / easeView / toScreen / createLabels
+ *                a flat world on every screen (the whole of it, or filling an upright phone and following the
+ *                player) and name labels that never pile up
  *   exposePort   what `homie-studio port check` reads (owner tests)
  *   createHud    a minimal clock / scores / results overlay
  *   BotBrain, seek, nearest, rubberBand
@@ -26,6 +29,7 @@ export { createKeys, synthKey, holdKey, tapKey, keyInfo, releaseAllSynthKeys, ty
 export { createTouchControls, type TouchControls, type TouchOptions, type TouchButton } from './touch';
 export { createControls, type Controls, type ControlsOptions } from './controls';
 export { groundBasis, screenToGround, PlayerYaw, type GroundBasis, type CameraLike } from './camera';
+export { fitView, easeView, toScreen, createLabels, type Fit, type FitOptions, type LabelIn, type LabelOut, type LabelOptions, type LabelBox } from './view';
 export { exposePort, type PortProbeOptions, type View } from './probe';
 export { createRoom, type Room, type RoomOptions, type BodyBase, type RoomSnap, type RoomCkpt } from './room';
 export { createHud, type HudOptions } from './hud';

package/port/view.ts

@@ -0,0 +1,213 @@
+/*
+ * A flat world on every screen: a phone held upright, the same phone on its side, a computer and a television.
+ * Two pieces for a top-down canvas game (both starters use them):
+ *
+ *   fitView(o)            where the camera looks and how close. The whole world where it fits at a size that reads
+ *                         (a computer, a TV); elsewhere (most of all a phone held upright, where "fit" drew a strip
+ *                         a quarter of the screen tall) the world FILLS the screen and follows the player, never
+ *                         past the world's edge, except as far as it takes to keep the player clear of the HUD.
+ *   createLabels()        name labels that never pile up. Each label wants its spot above its body; when that spot
+ *                         is taken it tries a row higher, then under the body, else it fades out. The player's own
+ *                         label is placed first and nothing covers it; a moved label keeps its new spot while it is
+ *                         free (no flicker), and labels fade in and out rather than pop.
+ *
+ * Everything is in CSS pixels (screen) and world units; the game draws. See the starters (gem-rush, ember-vale).
+ */
+
+export interface FitOptions {
+  /** The world's size, in world units. */
+  world: { w: number; h: number };
+  /** The screen (the canvas's CSS size). */
+  screen: { w: number; h: number };
+  /** CSS px per world unit below which the whole world is too small to play (bodies too small to see, names too small
+   *  to read): under it the camera follows `focus`. 0: never show the whole world unless `whole`. */
+  readable: number;
+  /** How close a following camera is, in CSS px per world unit (default `readable`). It is never less than what
+   *  fills the screen, so a following camera never shows an empty band beside the world. */
+  zoom?: number;
+  /** Where a following camera looks, in world units (the player's body, or the player a watcher follows). null: the
+   *  world's middle. */
+  focus?: { x: number; y: number } | null;
+  /** Show the whole world whatever its size (an overview: a watcher following nobody). */
+  whole?: boolean;
+  /** CSS px of HUD along each edge: a following camera slides past the world's edge (up to this much) only when the
+   *  player would otherwise be under the HUD, at the very edge of the world. */
+  inset?: { top?: number; right?: number; bottom?: number; left?: number };
+}
+
+export interface Fit {
+  /** CSS px per world unit. */
+  scale: number;
+  /** The world point at the screen's centre. */
+  x: number;
+  y: number;
+  /** True when the camera follows (the whole world is not on screen). */
+  follow: boolean;
+}
+
+/** Where the camera should look this frame (ease towards it: a cut only at a round start or a respawn). */
+export function fitView(o: FitOptions): Fit {
+  const W = o.world.w; const H = o.world.h;
+  const sw = Math.max(1, o.screen.w); const sh = Math.max(1, o.screen.h);
+  const contain = Math.min(sw / W, sh / H);
+  if (o.whole || (o.readable > 0 && contain >= o.readable)) return { scale: contain, x: W / 2, y: H / 2, follow: false };
+  const cover = Math.max(sw / W, sh / H);
+  const scale = Math.max(cover, o.zoom ?? o.readable);
+  const f = o.focus ?? { x: W / 2, y: H / 2 };
+  const i = { top: 0, right: 0, bottom: 0, left: 0, ...(o.inset ?? {}) };
+  const hw = sw / 2 / scale; const hh = sh / 2 / scale;
+  const within = (v: number, lo: number, hi: number): number => (lo > hi ? (lo + hi) / 2 : Math.max(lo, Math.min(hi, v)));
+  // Centred on the focus, kept inside the world; then moved just enough that the focus is clear of the HUD's margins.
+  const clear = (c: number, focus: number, half: number, lo: number, hi: number): number => {
+    const at = (half + focus - c) * scale; // the focus on screen, from the near edge
+    const span = 2 * half * scale;
+    if (at < lo) return c - (lo - at) / scale;
+    if (at > span - hi) return c + (at - (span - hi)) / scale;
+    return c;
+  };
+  return {
+    scale,
+    x: clear(within(f.x, hw, W - hw), f.x, hw, i.left, i.right),
+    y: clear(within(f.y, hh, H - hh), f.y, hh, i.top, i.bottom),
+    follow: true,
+  };
+}
+
+/** A world point on screen (CSS px) under a camera. */
+export function toScreen(fit: Fit, screen: { w: number; h: number }, x: number, y: number): { x: number; y: number } {
+  return { x: screen.w / 2 + (x - fit.x) * fit.scale, y: screen.h / 2 + (y - fit.y) * fit.scale };
+}
+
+/** Ease a camera towards where it should be (frame-rate independent; `rate` about 8 to 12 a second). */
+export function easeView(cam: Fit | null, want: Fit, dt: number, rate = 10): Fit {
+  if (!cam) return { ...want };
+  const k = 1 - Math.exp(-Math.max(0, dt) * rate);
+  return { scale: cam.scale + (want.scale - cam.scale) * k, x: cam.x + (want.x - cam.x) * k, y: cam.y + (want.y - cam.y) * k, follow: want.follow };
+}
+
+export interface LabelBox { left: number; top: number; right: number; bottom: number }
+
+export interface LabelIn {
+  /** Stable per body (its slot): a label keeps its spot and its fade from frame to frame. */
+  key: string | number;
+  text: string;
+  /** The label's centre x and its BOTTOM edge where it wants to sit (above its body), CSS px. */
+  x: number;
+  y: number;
+  /** Its size as drawn, CSS px (measureText's width; the font's line height). */
+  w: number;
+  h: number;
+  /** Where its bottom edge goes if it sits under its body instead (CSS px); omitted: never under. */
+  below?: number;
+  /** Its body on screen (with its bars): other labels keep off it when they can. */
+  body?: LabelBox;
+  /** The player's own label (or the player a watcher follows): placed first, never covered, never faded. */
+  self?: boolean;
+  /** Lower first: who keeps their spot when two want it (people before AI before bots, near before far). */
+  rank?: number;
+}
+
+export interface LabelOut extends LabelIn, LabelBox {
+  /** The text's centre (draw with textAlign center, textBaseline middle). */
+  cx: number;
+  cy: number;
+  /** 0..1: 1 shown, 0 gone (no room for it). */
+  alpha: number;
+  /** Not in its own spot above its body (draw a thin line to the body, so whose it is stays plain). */
+  moved: boolean;
+}
+
+export interface LabelOptions {
+  /** CSS px kept clear between two labels (default 3). */
+  gap?: number;
+  /** CSS px kept clear round the player's own label, for a chip drawn behind it (default 4). */
+  selfPad?: number;
+  /** How fast a label fades in (default 8 a second). One with no room left goes at once if it would touch another. */
+  fade?: number;
+  /** The screen, so a label is never pushed off it (default the window). */
+  screen?: () => { w: number; h: number };
+  /** Boxes labels must keep clear of (the game's own speech bubbles, a panel), CSS px. */
+  avoid?: () => LabelBox[];
+}
+
+/**
+ * Name labels that never pile up. Call `place(labels, dt)` each frame with every label that wants drawing; draw what
+ * comes back (skip alpha 0). The order of the input does not matter: `self` first, then `rank`.
+ *
+ * Each label tries, in order: its own spot above its body, a row higher, under its body, two rows higher; first
+ * clear of every placed label and of other bodies, then clear of labels only. A label that moved keeps its new spot
+ * until its own is clear by a margin, so labels do not flicker between two spots as bodies jostle.
+ */
+export function createLabels(opts: LabelOptions = {}): { place(labels: LabelIn[], dt: number): LabelOut[]; reset(): void } {
+  const gap = opts.gap ?? 3;
+  const selfPad = opts.selfPad ?? 4;
+  const fadeRate = opts.fade ?? 8;
+  const state = new Map<string | number, { spot: number; alpha: number }>();
+  const screen = opts.screen ?? ((): { w: number; h: number } => ({ w: typeof innerWidth === 'number' ? innerWidth : 1e9, h: typeof innerHeight === 'number' ? innerHeight : 1e9 }));
+  const hits = (a: LabelBox, b: LabelBox, m = gap): boolean => a.left < b.right + m && b.left < a.right + m && a.top < b.bottom + m && b.top < a.bottom + m;
+  return {
+    reset() { state.clear(); },
+    place(labels, dt) {
+      const { w: sw, h: sh } = screen();
+      const order = [...labels].sort((a, b) => Number(Boolean(b.self)) - Number(Boolean(a.self)) || (a.rank ?? 0) - (b.rank ?? 0));
+      const taken: LabelBox[] = [...(opts.avoid?.() ?? [])];
+      const bodies = labels.filter((l) => l.body).map((l) => ({ key: l.key, box: l.body as LabelBox }));
+      const out: LabelOut[] = [];
+      const seen = new Set<string | number>();
+      const k = 1 - Math.exp(-Math.max(0, dt) * fadeRate);
+      for (const l of order) {
+        seen.add(l.key);
+        // Spots: 0 its own (above the body), 1 a row higher, 2 under the body, 3 two rows higher.
+        const bottoms = [l.y, l.y - l.h - gap, l.below, l.y - 2 * (l.h + gap)];
+        const boxAt = (spot: number): LabelBox | null => {
+          const b = bottoms[spot];
+          if (b === undefined) return null;
+          const half = l.w / 2;
+          // Kept on screen sideways; a spot off the top or the bottom is not a spot.
+          const cx = Math.max(half + 2, Math.min(sw - half - 2, l.x));
+          const box = { left: cx - half, top: b - l.h, right: cx + half, bottom: b };
+          return box.top < 0 || box.bottom > sh ? null : box;
+        };
+        const clear = (b: LabelBox, strict: boolean, m = gap): boolean => !taken.some((t) => hits(b, t, m)) && (!strict || !bodies.some((o) => o.key !== l.key && hits(b, o.box, 0)));
+        const st = state.get(l.key) ?? { spot: 0, alpha: l.self ? 1 : 0 };
+        let spot = -1; let box: LabelBox | null = null;
+        if (l.self) {
+          spot = boxAt(0) ? 0 : boxAt(2) ? 2 : 0;
+          box = boxAt(spot) ?? { left: l.x - l.w / 2, top: l.y - l.h, right: l.x + l.w / 2, bottom: l.y };
+        } else {
+          // Home first (back home only with room to spare, once moved), then last frame's spot, then the rest.
+          const home = boxAt(0);
+          const tries = [st.spot, 1, 2, 3].filter((x, i, all) => x !== 0 && all.indexOf(x) === i);
+          for (const strict of [true, false]) {
+            if (home && clear(home, strict, st.spot === 0 ? gap : gap + 8)) { spot = 0; box = home; break; }
+            for (const x of tries) { const b = boxAt(x); if (b && clear(b, strict)) { spot = x; box = b; break; } }
+            if (box) break;
+          }
+        }
+        if (box) {
+          st.spot = spot;
+          st.alpha = l.self ? 1 : st.alpha + (1 - st.alpha) * k;
+          taken.push(l.self ? { left: box.left - selfPad, top: box.top - selfPad, right: box.right + selfPad, bottom: box.bottom + selfPad } : box);
+        } else {
+          // No room: it fades where it was, or goes at once if it would touch a label that has room.
+          const was = boxAt(st.spot);
+          st.alpha = !was || taken.some((t) => hits(was, t, 0)) ? 0 : st.alpha * (1 - k);
+          if (st.alpha < 0.05) st.alpha = 0;
+        }
+        state.set(l.key, st);
+        const shown = box ?? boxAt(st.spot) ?? boxAt(0) ?? { left: l.x - l.w / 2, top: l.y - l.h, right: l.x + l.w / 2, bottom: l.y };
+        out.push({ ...l, ...shown, cx: (shown.left + shown.right) / 2, cy: (shown.top + shown.bottom) / 2, alpha: Math.round(st.alpha * 100) / 100, moved: st.spot !== 0, ...(box ? {} : { fading: true }) });
+      }
+      // A name fading out never touches a name that has its place, nor another one fading (whatever their order).
+      const kept: LabelBox[] = [...taken];
+      for (const o of out as (LabelOut & { fading?: boolean })[]) {
+        if (!o.fading) continue;
+        delete o.fading;
+        if (o.alpha > 0 && kept.some((t) => hits(o, t, 0))) { o.alpha = 0; (state.get(o.key) as { alpha: number }).alpha = 0; }
+        if (o.alpha > 0) kept.push(o);
+      }
+      for (const key of [...state.keys()]) if (!seen.has(key)) state.delete(key);
+      return out;
+    },
+  };
+}

package/starters/ember-vale/index.html

@@ -21,20 +21,25 @@
   .panel li { margin: 4px 0; color: #e7d9b4; }
   .panel li small { color: #a39a80; }
   .panel .close { float: right; background: none; border: 0; color: #c9c0a6; font-size: 20px; cursor: pointer; }
-  /* Asking a guide: buttons (agents.json "asks"), never a text box. Bottom centre, clear of the stick and STRIKE. */
+  /* Asking a guide: buttons (agents.json "asks"), never a text box. On a computer: bottom centre. */
   .asks { left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); max-width: min(560px, calc(100vw - 200px)); box-sizing: border-box; padding: 8px 10px; border-radius: 14px; background: rgba(10,20,18,.84); border: 1px solid rgba(127,216,200,.45); text-align: center; }
   .asks .who { font: 700 12.5px/1.2 inherit; font-family: inherit; color: #7fd8c8; margin: 0 0 6px; }
   .asks .list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
   .asks button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(127,216,200,.5); background: rgba(127,216,200,.12); color: #e9fff9; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
   .asks button.sent { background: #7fd8c8; color: #0b1512; }
-  @media (max-width: 540px) { .asks { max-width: calc(100vw - 168px); bottom: calc(10px + env(safe-area-inset-bottom)); } .asks button { min-height: 40px; padding: 0 10px; } }
+  /* On a touch screen (body.touch: the touch kit drew STRIKE), either way up: a column right above STRIKE (68 px, 24 px
+     up from the bottom, 18 px in), where the thumb that strikes reaches it, clear of the stick and of the vale's
+     middle, where your hero is. */
+  .touch .asks { left: auto; transform: none; right: calc(12px + env(safe-area-inset-right)); bottom: calc(106px + env(safe-area-inset-bottom)); width: min(232px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 166px); overflow: auto; }
+  .touch .asks .list { flex-direction: column; flex-wrap: nowrap; }
+  .touch .asks button { min-height: 40px; padding: 4px 10px; line-height: 1.15; }
   [hidden] { display: none !important; }
 </style>
 </head>
 <body>
 <canvas id="c"></canvas>
 <div class="ui pill"><button type="button" id="who"></button><button type="button" id="hall-btn">Hall of the Fallen</button></div>
-<div class="ui asks" id="asks" hidden aria-live="polite"><p class="who" id="asks-who"></p><div class="list" id="asks-list"></div></div>
+<div class="ui asks" id="asks" hidden aria-live="polite" data-touch-pass><p class="who" id="asks-who"></p><div class="list" id="asks-list"></div></div>
 <div class="ui panel" id="make" hidden>
   <h2>A new hero</h2>
   <p>Your hero keeps every level and coin, on every device you play on.</p>