@songsid/agend 2.3.1 → 2.3.2-beta.10

package/dist/ui/fleet-office-view.js

@@ -0,0 +1,155 @@
+// #2540: the Office view's canvas controls — the pure part (fleet-office.js applies it). The office fills the Fleet
+// panel; its scene (the zones' 1280×720 logical canvas, or the desks layout) is panned and zoomed like the org chart's
+// canvas (fleet-canvas-view.js: the same view { k, x, y }, gestures, wheel and keys), with these of its own:
+//
+// - Pixel levels for the steps. + and − step to the next pixel level (one logical unit a whole number of device px:
+//   k·dpr = 1, 2, 3, …; below one device px a unit by 1.25); the canvas always draws unsmoothed (nearest neighbour).
+//   The wheel and a pinch zoom continuously, and Fit takes whatever scale fills the panel.
+// - Fit: two modes, kept per office (fleet-office-store.js). "contain" (the default): the largest scale at which the
+//   whole scene shows — non-integer, so the scene fills the panel's width or height. "cover" (Fill): the smallest
+//   scale that fills both; what overflows is cropped and stays a pan away. Either is centred.
+// - The view never loses the scene (clampPan): along an axis where the scene is larger than the panel it covers the
+//   panel (no gap at an edge); where it is smaller it is centred on that axis (the user: the canvas's middle is the
+//   scene's), on opening, Fit, any zoom and a resize alike.
+//
+// Around the scene is a matte: the pack's `matte` (fleet-office-pack.js), else the colour of the background's edge
+// pixels (sampled once per style: edgeMatte), else the skin's own (Studio's hall floor; Desks': the dashboard's
+// background). It paints the whole canvas outside the scene (and the stage behind it), never the page's grey.
+import { clampK, pinchTo, zoomTo } from "./fleet-canvas-view.js";
+import { CANVAS_MAX } from "./fleet-office-model.js";
+
+/** The zoom's range, in CSS px per logical unit. */
+export const OK_MIN = 0.1, OK_MAX = 8;
+const EPS = 1e-6;
+const clampO = (k) => clampK(k, OK_MIN, OK_MAX);
+/** The highest pixel level within the range at this ratio (at least 1). */
+const topLevel = (dpr) => Math.max(1, Math.floor(OK_MAX * dpr + EPS));
+
+/** `k` on its pixel level: k·dpr rounded to a whole number when it is 1 or more; as it is (in range) below that. */
+export function snapK(k, dpr = 1) {
+  const c = clampO(k), n = c * dpr;
+  if (n < 1 - EPS) return c;
+  return Math.min(topLevel(dpr), Math.max(1, Math.round(n))) / dpr;
+}
+/** Whether `k` is a pixel level (a whole number of device px per logical unit). */
+export const isPixelK = (k, dpr = 1) => k * dpr >= 1 - EPS && Math.abs(k * dpr - Math.round(k * dpr)) < 1e-6;
+/** One step in (`dir` > 0) or out: the next pixel level; below one device pixel a unit, by 1.25. */
+export function stepK(k, dir, dpr = 1) {
+  const n = k * dpr;
+  if (dir > 0) {
+    if (n >= 1 - EPS) return Math.min(topLevel(dpr), Math.floor(n + EPS) + 1) / dpr;
+    return n * 1.25 >= 1 - EPS ? 1 / dpr : clampO(k * 1.25);
+  }
+  if (n > 1 + EPS) return Math.max(1, Math.ceil(n - EPS) - 1) / dpr;
+  return clampO(k * 0.8);
+}
+/** The view at scale `k` (in range, continuous: the wheel's) about the viewport point (cx, cy). */
+export const zoomOffice = (v, k, cx, cy) => zoomTo(v, clampO(k), cx, cy);
+/** A pinch step: `raw` the zoom the pinch has reached (continuous); the world point under the old midpoint follows. */
+export const pinchOffice = (v, from, to, raw) => pinchTo(v, from, to, clampO(raw));
+
+/** The fit modes: "contain" (the whole scene shows) and "cover" (the panel is filled, the overflow cropped). */
+export const FIT_MODES = ["contain", "cover"];
+export const fitModeOk = (m) => (m === "cover" ? "cover" : "contain");
+/** The scale at which a `w`×`h` scene fits a `size` viewport: contain (the whole scene) or cover (the whole panel). */
+export function fitK(w, h, size, mode = "contain", margin = 0) {
+  const sx = (size.w - 2 * margin) / Math.max(1, w), sy = (size.h - 2 * margin) / Math.max(1, h);
+  return clampO(fitModeOk(mode) === "cover" ? Math.max(sx, sy) : Math.min(sx, sy));
+}
+/** The scene at fitK, centred. */
+export function fitScene(w, h, size, mode = "contain", margin = 0) {
+  const k = fitK(w, h, size, mode, margin);
+  return { k, x: (size.w - w * k) / 2, y: (size.h - h * k) / 2 };
+}
+/**
+ * The desks layout's scale when it opens: the pixel level nearest one CSS px a unit (1 on an ordinary or a 2× screen,
+ * 4/3 at 150 %, 0.8 at 125 %); the layout wraps at the panel's width over it, so it opens as wide as the panel.
+ */
+export const desksK = (dpr = 1) => Math.max(1, Math.round(dpr)) / dpr;
+/** The view a scene opens on with nothing kept: zones fitted (the office's mode), desks from the top left at desksK (centred by clampPan on an axis where it is smaller). */
+export const openingView = (w, h, size, dpr, zones, mode = "contain") => (zones ? fitScene(w, h, size, mode) : { k: desksK(dpr), x: 0, y: 0 });
+/** One axis of clampPan: offset `o` of a scene `s` long in a viewport `n` long. */
+const clampAxis = (o, s, n) => (s >= n ? Math.min(0, Math.max(n - s, o)) : (n - s) / 2);
+/**
+ * The view kept on the scene: along an axis where the scene is at least the viewport it covers the viewport (no gap at
+ * either edge); where it is smaller it is centred on that axis. Nothing can be scrolled off-screen.
+ */
+export function clampPan(v, w, h, size) {
+  return { k: v.k, x: clampAxis(v.x, w * v.k, size.w), y: clampAxis(v.y, h * v.k, size.h) };
+}
+/** The zoom as a person reads it: "150%". */
+export const zoomLabel = (k) => `${Math.round(k * 100)}%`;
+/**
+ * The overview's box in a `size` stage: the scene's aspect, about a seventh of the stage's width (120–280 px, at most
+ * a third of its height), `margin` px in from the bottom right corner — always inside the stage.
+ */
+export function miniBox(size, w, h, margin = 12) {
+  const ar = Math.max(1, w) / Math.max(1, h), roomW = Math.max(0, size.w - 2 * margin), roomH = Math.max(0, size.h - 2 * margin);
+  let bw = Math.min(280, Math.max(120, Math.round(size.w / 7)), roomW), bh = bw / ar;
+  const maxH = Math.min(roomH, Math.max(60, size.h / 3));
+  if (bh > maxH) { bh = maxH; bw = bh * ar; }
+  bw = Math.floor(bw); bh = Math.floor(bh);
+  return { x: size.w - margin - bw, y: size.h - margin - bh, w: bw, h: bh };
+}
+/** The view's frame on the overview (logical units): the part of the scene in view (never outside it). */
+export function miniFrame(v, size, w, h) {
+  const x0 = Math.max(0, -v.x / v.k), y0 = Math.max(0, -v.y / v.k);
+  const x1 = Math.min(w, (size.w - v.x) / v.k), y1 = Math.min(h, (size.h - v.y) / v.k);
+  return { x: x0, y: y0, width: Math.max(0, x1 - x0), height: Math.max(0, y1 - y0) };
+}
+
+// ── Kept per device, per office: the zoom and the logical point in the middle (the viewport's size may differ) ──
+
+/** What is kept of a view: { k, cx, cy }, and `fit: true` when it is a fit (it is fitted again, to the size then). */
+export const savedOf = (v, size, fit = false) => ({ k: v.k, cx: (size.w / 2 - v.x) / v.k, cy: (size.h / 2 - v.y) / v.k, ...(fit ? { fit: true } : {}) });
+/** A kept view, checked: { k, cx, cy } with finite numbers (k in range), else null. */
+export function savedOk(x) {
+  if (!x || typeof x !== "object") return null;
+  const { k, cx, cy } = x;
+  if (![k, cx, cy].every((n) => typeof n === "number" && Number.isFinite(n)) || k <= 0) return null;
+  if (Math.abs(cx) > 1e6 || Math.abs(cy) > 1e6) return null;
+  return { k: clampO(k), cx, cy, ...(x.fit === true ? { fit: true } : {}) };
+}
+/** The view a kept one gives in a `size` viewport: the same zoom, the same logical point in the middle. */
+export function viewFromSaved(s, size) {
+  const k = clampO(s.k);
+  return { k, x: size.w / 2 - s.cx * k, y: size.h / 2 - s.cy * k };
+}
+
+// ── Drawing ──
+
+/** The cached layers' budget (device px): beyond it they are drawn coarser and scaled up by a whole number. */
+export const LAYER_MAX = { side: CANVAS_MAX.side, area: 8 * 1024 * 1024 };
+/**
+ * The layers' resolution (layer px per logical unit) for a view at `a` device px a unit and a `w`×`h` scene: `a`
+ * itself (the layer is blitted 1:1), or — over the budget — `a` divided by the smallest whole number that fits it,
+ * so the blit is still an integer scale-up (nearest neighbour: crisp).
+ */
+export function layerScale(a, w, h, max = LAYER_MAX) {
+  const cap = Math.min(max.side / Math.max(1, w), max.side / Math.max(1, h), Math.sqrt(max.area / Math.max(1, w * h)));
+  if (a <= cap) return a;
+  return a / Math.ceil(a / cap - EPS);
+}
+/**
+ * The matte from a background's edge pixels: `strips` are RGBA pixel arrays (the top and bottom rows, the left and
+ * right columns); the mean of their opaque pixels as #rrggbb, or null when none is opaque.
+ */
+export function edgeMatte(strips) {
+  let r = 0, g = 0, b = 0, n = 0;
+  for (const s of strips) {
+    if (!s || typeof s.length !== "number") continue;
+    for (let i = 0; i + 3 < s.length; i += 4) { if (s[i + 3] < 128) continue; r += s[i]; g += s[i + 1]; b += s[i + 2]; n++; }
+  }
+  if (!n) return null;
+  const hx = (v) => Math.round(v / n).toString(16).padStart(2, "0");
+  return `#${hx(r)}${hx(g)}${hx(b)}`;
+}
+/** The edge strips of a canvas (its 2d context's pixels), for edgeMatte; null when they cannot be read. */
+export function edgeStrips(c) {
+  try {
+    const g = c && typeof c.getContext === "function" ? c.getContext("2d") : null;
+    if (!g || typeof g.getImageData !== "function" || !(c.width > 0) || !(c.height > 0)) return null;
+    const w = c.width, h = c.height;
+    return [g.getImageData(0, 0, w, 1).data, g.getImageData(0, h - 1, w, 1).data, g.getImageData(0, 0, 1, h).data, g.getImageData(w - 1, 0, 1, h).data];
+  } catch { return null; }   // a tainted or lost canvas: the skin's matte
+}

package/dist/ui/fleet-office-zones.js

@@ -2,27 +2,40 @@
 // fleet-office-pack.js). Each instance goes to the area for its state now and takes a seat slot there; when its state
 // changes it walks (along the pack's waypoints) to the new area. Pure — fleet-office.js draws it. Also here: what a
 // character says in its speech bubble, and which furniture is active.
-import { LOGICAL } from "./fleet-office-pack.js";
-import { nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
+import { LOGICAL, own } from "./fleet-office-pack.js";
+import { FLIGHT, nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
+import { hue } from "./fleet-traffic.js";
 
 /** The area for a state: the pack's own, else its "default", else its first area. */
 export function zoneOf(pack, state) {
   const z = pack.stateZones || {};
-  return z[state] || z.default || Object.keys(pack.areas)[0];
+  return own(z, state) || own(z, "default") || Object.keys(pack.areas)[0];
 }
 
-/** How far apart overflow spots are, and how far they stay from the area's seats (logical units). */
-export const OVERFLOW = { STEP: 56, CLEAR: 40, EDGE: 24 };
-/** An area's overflow spots, for when its seats are taken: a grid inside its rect, clear of its seats, in reading order. */
-export function overflowSpots(area) {
-  const out = [], { x, y, w, h } = area.rect;
-  for (let sy = y + OVERFLOW.EDGE + 30; sy <= y + h - OVERFLOW.EDGE; sy += OVERFLOW.STEP) {
-    for (let sx = x + OVERFLOW.EDGE; sx <= x + w - OVERFLOW.EDGE; sx += OVERFLOW.STEP) {
-      if (area.seats.every((s) => Math.hypot(s.x - sx, s.y - sy) >= OVERFLOW.CLEAR)) out.push({ x: sx, y: sy });
+/**
+ * How far apart overflow spots are, and how far they stay from the area's seats (logical units); TITLE: the band at
+ * the top of an area its name is written in, kept clear. A crowded area packs tighter (STEPS, #2513: 70 instances, 42
+ * idle, piled up in the lounge) before anyone is left to the "+N" count.
+ */
+export const OVERFLOW = { STEP: 56, CLEAR: 40, EDGE: 24, TITLE: 30, STEPS: [56, 46, 38, 32] };
+function spotsAt(area, step) {
+  const out = [], { x, y, w, h } = area.rect, clear = step === OVERFLOW.STEP ? OVERFLOW.CLEAR : Math.round(step * 0.72);
+  for (let sy = y + OVERFLOW.EDGE + OVERFLOW.TITLE; sy <= y + h - OVERFLOW.EDGE; sy += step) {
+    for (let sx = x + OVERFLOW.EDGE; sx <= x + w - OVERFLOW.EDGE; sx += step) {
+      if (area.seats.every((s) => Math.hypot(s.x - sx, s.y - sy) >= clear)) out.push({ x: sx, y: sy });
     }
   }
   return out;
 }
+/**
+ * An area's overflow spots, for when its seats are taken: a tidy grid inside its rect, clear of its seats and its
+ * title, in reading order. `need`: how many are wanted — the widest spacing that fits them all, else the tightest.
+ */
+export function overflowSpots(area, need = 0) {
+  let spots = [];
+  for (const step of OVERFLOW.STEPS) { spots = spotsAt(area, step); if (spots.length >= need) return spots; }
+  return spots;
+}
 
 /**
  * Seats for everyone: `wants` [{ name, area }] in the fleet's order; `prev` what the last call gave (name → { area,
@@ -31,51 +44,224 @@ export function overflowSpots(area) {
  * Returns { seats: Map name → { area, slot, x, y }, crowd: Map }.
  */
 export function assignSeats(pack, wants, prev = new Map()) {
-  const seats = new Map(), crowd = new Map(), taken = new Map(), spill = new Map();
-  const spotsOf = (area) => { if (!spill.has(area)) spill.set(area, overflowSpots(pack.areas[area])); return spill.get(area); };
-  const pos = (area, slot) => (slot >= 0 ? pack.areas[area].seats[slot] : spotsOf(area)[-slot - 1]);
+  const seats = new Map(), crowd = new Map(), taken = new Map(), spill = new Map(), demand = new Map();
+  const areaOf = (a) => own(pack.areas, a);
+  for (const w of wants) demand.set(w.area, (demand.get(w.area) || 0) + 1);
+  const spotsOf = (area) => {
+    if (!spill.has(area)) spill.set(area, overflowSpots(areaOf(area), Math.max(0, (demand.get(area) || 0) - areaOf(area).seats.length)));
+    return spill.get(area);
+  };
+  const pos = (area, slot) => (slot >= 0 ? areaOf(area).seats[slot] : spotsOf(area)[-slot - 1]);
   const usedIn = (area) => { if (!taken.has(area)) taken.set(area, new Set()); return taken.get(area); };
   const give = (name, area, slot) => { const p = pos(area, slot); usedIn(area).add(slot); seats.set(name, { area, slot, x: p.x, y: p.y }); };
   for (const w of wants) {
     const p = prev.get(w.name);
-    if (!p || p.area !== w.area || !pack.areas[w.area] || !pos(w.area, p.slot) || usedIn(w.area).has(p.slot)) continue;
+    if (!p || p.area !== w.area || !areaOf(w.area) || !pos(w.area, p.slot) || usedIn(w.area).has(p.slot)) continue;
     give(w.name, w.area, p.slot);
   }
   for (const w of wants) {
-    if (seats.has(w.name) || !pack.areas[w.area]) continue;
-    const used = usedIn(w.area), area = pack.areas[w.area];
+    if (seats.has(w.name) || !areaOf(w.area)) continue;
+    const used = usedIn(w.area), area = areaOf(w.area);
     let slot = area.seats.findIndex((_, i) => !used.has(i));
     if (slot < 0) { const j = spotsOf(w.area).findIndex((_, i) => !used.has(-i - 1)); slot = j < 0 ? null : -j - 1; }
     if (slot === null) crowd.set(w.area, (crowd.get(w.area) || 0) + 1);
     else give(w.name, w.area, slot);
   }
-  return { seats, crowd };
+  // Over capacity: more people want the area than it has seats (their bubbles and tags are thinned, fleet-office.js).
+  const over = new Set([...demand].filter(([a, n]) => areaOf(a) && n > areaOf(a).seats.length).map(([a]) => a));
+  return { seats, crowd, over };
 }
 
 /**
  * The zones layout for `nodes` (buildOrgView's) on a pack: everyone but the missing at their seat. The same shape as
- * the desks layout (rooms → desks with a seat), in logical units, plus `mode: "zones"`, the pack's areas and graph, the
- * seats given (`seats`, the next call's `prev`) and `crowd`.
+ * the desks layout (rooms → desks with a seat), in logical units, plus `mode: "zones"`, the pack's areas and graph (and
+ * its `straight`, #2634), the seats given (`seats`, the next call's `prev`), `crowd` and `over` (the areas over capacity).
  */
-export function zonesLayout(pack, nodes, prev = new Map()) {
-  const wants = nodes.filter((n) => n.state !== "missing").map((n) => ({ name: n.name, area: zoneOf(pack, n.state) }));
-  const { seats, crowd } = assignSeats(pack, wants, prev);
+export function zonesLayout(pack, nodes, prev = new Map(), { night = false } = {}) {
+  // At night (#2568) the idle go to bed: the area asleep people go to while it has a free seat; the rest doze where they are.
+  const bed = zoneOf(pack, "paused"), beds = (own(pack.areas, bed)?.seats || []).length, sleepers = new Set(), inBed = new Set();
+  let used = nodes.filter((n) => n.state !== "idle" && zoneOf(pack, n.state) === bed).length;
+  if (night) for (const n of nodes) if (n.state === "idle") { sleepers.add(n.name); if (used < beds) { used++; inBed.add(n.name); } }
+  const wants = nodes.filter((n) => n.state !== "missing").map((n) => ({ name: n.name, area: inBed.has(n.name) ? bed : zoneOf(pack, n.state) }));
+  const { seats, crowd, over } = assignSeats(pack, wants, prev);
   const desks = nodes.filter((n) => seats.has(n.name)).map((n) => {
     const s = seats.get(n.name);
-    return { key: `zone/${n.name}`, node: n, x: s.x - 24, y: s.y - 52, w: 48, h: 66, seat: { x: s.x, y: s.y }, wp: null, area: s.area, slot: s.slot };
+    return { key: `zone/${n.name}`, node: n, x: s.x - 24, y: s.y - 52, w: 48, h: 66, seat: { x: s.x, y: s.y }, wp: null, area: s.area, slot: s.slot, night: sleepers.has(n.name) };
   });
   return { mode: "zones", rooms: [{ key: "\u0000zones", name: null, lobby: false, x: 0, y: 0, w: LOGICAL.w, h: LOGICAL.h, desks }], areas: pack.areas,
-    waypoints: pack.waypoints || [], edges: pack.edges || [], door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd };
+    waypoints: pack.waypoints || [], edges: pack.edges || [], straight: pack.straight === true, door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd, over };
 }
 
 // ── Walking ──
 
 /** Logical units per ms (crossing the canvas takes about six seconds). */
 export const WALK = { SPEED: 0.2 };
+/** The step of a polyline a fraction `t` (0–1) of the way along it: { dx, dy } (its direction), or null (no length). */
+export function headingAt(pts, t) {
+  const total = pathLength(pts);
+  if (!total) return null;
+  let left = Math.max(0, Math.min(1, t)) * total;
+  for (let i = 1; i < pts.length; i++) {
+    const dx = pts[i].x - pts[i - 1].x, dy = pts[i].y - pts[i - 1].y, l = Math.hypot(dx, dy);
+    if (l > 0 && (left <= l || i === pts.length - 1)) return { dx, dy };
+    left -= l;
+  }
+  return null;
+}
+/**
+ * #2634: a polyline with each diagonal leg made an L — across first, then up or down — so a character set's three
+ * walking strips always fit; legs already across or up/down are kept, and no point repeats (no zero-length leg).
+ */
+export function straighten(pts) {
+  const out = [];
+  const add = (x, y) => { const l = out[out.length - 1]; if (!l || l.x !== x || l.y !== y) out.push({ x, y }); };
+  for (const p of pts) { const l = out[out.length - 1]; if (l && l.x !== p.x && l.y !== p.y) add(p.x, l.y); add(p.x, p.y); }
+  return out;
+}
+// ── Night (#2568) ──
+
+/** Bedtime on the viewer's clock: from FROM o'clock to TO o'clock the idle sleep (anyone with work still gets up for it). */
+export const NIGHT = { FROM: 0, TO: 6, TICK: 60000 };
+export const isNight = (d = new Date()) => { const h = d.getHours(); return NIGHT.FROM <= NIGHT.TO ? h >= NIGHT.FROM && h < NIGHT.TO : h >= NIGHT.FROM || h < NIGHT.TO; };
+
+// ── Wandering (#2560) ──
+
+/**
+ * An idle person now and then strolls to a spot near their seat and back, so a quiet room is not a row of statues:
+ * every PERIOD ms (each person's own phase, from their name) they are AWAY ms at a waypoint within REACH of the seat —
+ * one no seat of the office is on (taken or free), picked anew each time — then walk back. Pure: the page asks every TICK ms and walks the change.
+ */
+export const WANDER = { PERIOD: 40000, AWAY: 8000, REACH: 220, TICK: 1000 };
+/** Where `name`, seated at `seat`, should be at `t` (ms) while idle: a spot near the seat, or the seat. */
+export function wanderTarget(name, seat, graph, t, seats = []) {
+  const near = (graph.waypoints || []).filter((w) => Math.hypot(w.x - seat.x, w.y - seat.y) <= WANDER.REACH
+    && !seats.some((s) => Math.hypot(w.x - s.x, w.y - s.y) < 4));
+  if (!near.length) return seat;
+  const h = nameHash(name), k = t + (h % WANDER.PERIOD), turn = Math.floor(k / WANDER.PERIOD);
+  if (k - turn * WANDER.PERIOD >= WANDER.AWAY) return seat;
+  const w = near[nameHash(`${name}\u0000${turn}`) % near.length];
+  return { x: w.x, y: w.y };
+}
+/** An NPC drawn as furniture (#2596: an item with `walk`): its walker's name — never a person's, and its own phase. */
+export const npcKey = (f) => `furniture/${f.id}`;
+/** Everyone's walk target: their seat, or — idle and `wander` on — wanderTarget's spot (one person a spot: whoever
+ * would share it stays seated this time). And, `wander` on, each item of `furniture` with a `walk` (#2596): its spot
+ * (x, y), or a stroll near it as an idle person's (by npcKey) — none at `night` for one with a night place (asleep there). */
+export function walkTargets(desks, graph, t, wander = true, furniture = [], night = false) {
+  // Every seat of the office (anyone's, taken or not: someone may sit down on it any moment), not only the ones in use.
+  // And each walking NPC's spot (#2596 review): its home, where it stands outside its stroll and goes back to whenever
+  // its stroll would collide, so nobody else's stroll may end there — no two walkers ever share a target.
+  const homes = wander ? furniture.filter((f) => f.walk && !(night && f.night)).map((f) => ({ x: f.x, y: f.y })) : [];
+  const seats = [...Object.values(graph.areas || {}).flatMap((a) => a.seats || []), ...desks.map((d) => d.seat), ...homes];
+  const used = new Set(homes.map((h) => `${h.x},${h.y}`));
+  const stroll = (name, home) => {
+    const p = wanderTarget(name, home, graph, t, seats), k = `${p.x},${p.y}`;
+    if (p === home || used.has(k)) return home;
+    used.add(k);
+    return p;
+  };
+  const out = new Map(desks.map((d) => [d.node.name, !wander || d.node.state !== "idle" || d.night ? d.seat : stroll(d.node.name, d.seat)]));
+  if (wander) for (const f of furniture) if (f.walk && !(night && f.night)) out.set(npcKey(f), stroll(npcKey(f), { x: f.x, y: f.y }));
+  return out;
+}
+
+// ── Mail from another office (#2564) ──
+
+/**
+ * Something sent to a person here by someone who is not (in another office, or in none): it flies in at the door and
+ * lands on the floor near the middle of the room; the person walks over, picks it up and walks back to their seat.
+ * MAX_WAIT: a letter no one picks up is gone after it; GAP: letters waiting side by side; SEARCH: how far from the
+ * middle a landing spot is looked for when no waypoint will do; ASLEEP: who does not get up
+ * for it (it waits for them to wake, up to MAX_WAIT).
+ */
+export const MAIL = { MAX_WAIT: 60000, GAP: 16, SEARCH: 320, ASLEEP: new Set(["paused", "stopped"]), MAX: 20 };
+/**
+ * Where the `n`th waiting letter lands: `n` GAPs along from the waypoint nearest the room's middle — the nearest whose
+ * spot (offset included) no seat of the office is on, taken or free (someone may sit there any moment; #2561 likewise);
+ * with none, the nearest point round the middle (rings GAP·2 apart, inside the room) that no seat is on; with none of
+ * those either, null — the letter is not delivered here (never on a seat).
+ */
+export function dropPoint(L, n = 0) {
+  const mid = { x: L.width / 2, y: L.height * 0.55 }, d = (p, q) => Math.hypot(p.x - q.x, p.y - q.y);
+  const seats = [...Object.values(L.areas || {}).flatMap((a) => a.seats || []), ...desksIn(L).map((q) => q.seat)];
+  const onSeat = (p) => seats.some((q) => d(p, q) < 4);
+  const spots = (L.waypoints || []).map((w) => ({ x: Math.round(w.x + n * MAIL.GAP), y: Math.round(w.y), from: w }))
+    .filter((p) => !onSeat(p.from) && !onSeat(p)).sort((p, q) => d(p.from, mid) - d(q.from, mid));
+  if (spots.length) return { x: spots[0].x, y: spots[0].y };
+  const inRoom = (p) => p.x >= 0 && p.y >= 0 && p.x <= L.width && p.y <= L.height;
+  for (let r = 0; r <= MAIL.SEARCH; r += 2 * MAIL.GAP) {
+    for (let k = 0, m = r ? 16 : 1; k < m; k++) {
+      const a = (2 * Math.PI * k) / m, p = { x: Math.round(mid.x + r * Math.cos(a) + n * MAIL.GAP), y: Math.round(mid.y + r * Math.sin(a)) };
+      if (inRoom(p) && !onSeat(p)) return p;
+    }
+  }
+  return null;
+}
+const desksIn = (L) => (L.rooms || []).flatMap((r) => r.desks || []).filter((d) => d.node);
+/**
+ * The letters of one office. `sync(items, now, L, still)`: each new traffic item to someone drawn here from someone
+ * who is not becomes a letter (none with reduced motion, nor for a stale delegation; a zones office only).
+ * `frame(now, L, walkers)` → what to draw, { id, hue, kind, from, x, y, t } (t: its flight, 0 on the floor), picking
+ * up the letters whose person stands on them, and dropping those gone too long or whose person left. `targets(L)`:
+ * name → where to walk to pick one up (the first waiting for them; none while they are asleep). `prime(items)`: mark as
+ * seen what was in the air before this office was shown (a new office's or style's mail starts empty). `size()`.
+ */
+export function createMail({ max = MAIL.MAX } = {}) {
+  const seen = new Set();
+  let letters = [];
+  const here = (L, name) => desksIn(L).find((d) => d.node.name === name) || null;
+  return {
+    sync(items, now, L, still = false) {
+      let started = 0;
+      for (const it of items || []) {
+        if (seen.has(it.id)) continue;
+        seen.add(it.id);
+        if (seen.size > 2000) seen.delete(seen.values().next().value);
+        if (still || it.phase === "stale" || !L || L.mode !== "zones" || !here(L, it.to) || here(L, it.from)) continue;
+        const drop = dropPoint(L, letters.filter((l) => l.to !== it.to).length % 4);
+        if (!drop) continue;                                          // nowhere off the seats: not delivered here
+        const pts = [{ x: L.door.x, y: L.door.y }, drop];
+        letters.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now, drop, pts,
+          ms: Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(pts) / FLIGHT.SPEED)) });
+        started++;
+      }
+      if (letters.length > max) letters = letters.slice(letters.length - max);
+      return started;
+    },
+    frame(now, L, walkers) {
+      const out = [];
+      letters = letters.filter((l) => {
+        if (!here(L, l.to)) return false;
+        const t = (now - l.start) / l.ms;
+        if (t < 1) { if (t >= 0) { const p = along(l.pts, t); out.push({ id: l.id, hue: l.hue, kind: l.kind, from: l.from, x: p.x, y: p.y, t }); } return true; }
+        if (now - l.start - l.ms > MAIL.MAX_WAIT) return false;
+        const w = walkers && walkers.at(l.to, now);
+        if (w && !w.walking && Math.hypot(w.x - l.drop.x, w.y - l.drop.y) < 4) return false;   // picked up
+        out.push({ id: l.id, hue: l.hue, kind: l.kind, from: l.from, x: l.drop.x, y: l.drop.y, t: 0 });
+        return true;
+      });
+      return out;
+    },
+    targets(L, now) {
+      const out = new Map();
+      for (const l of letters) {
+        if (out.has(l.to) || now - l.start < l.ms) continue;
+        const d = here(L, l.to);
+        if (d && !MAIL.ASLEEP.has(d.node.state) && !d.night) out.set(l.to, l.drop);   // asleep, or in bed for the night (#2568)
+      }
+      return out;
+    },
+    /** What is already in the traffic when this office's mail starts (#2564): seen, so it is not delivered again here. */
+    prime(items) { for (const it of items || []) seen.add(it.id); },
+    size: () => letters.length,
+  };
+}
+
 /**
  * Where each character is. `sync(targets, now, graph, still)`: targets name → { x, y }; someone new is already there;
- * someone whose target moved walks from where they are now along the graph (routeVia) — or is there at once when
- * `still` (reduced motion); someone gone is forgotten. `at(name, now)` → { x, y, walking }; `moving(now)`.
+ * someone whose target moved walks from where they are now along the graph (routeVia; each diagonal leg an L when the
+ * graph is `straight`, #2634) — or is there at once when `still` (reduced motion); someone gone is forgotten. `at(name, now)` → { x, y, walking } and, while walking, `heading`: the
+ * current step's { dx, dy }, which picks a pack's walkDown / walkUp / walkSide strip; `moving(now)`.
  */
 export function createWalkers() {
   const by = new Map();
@@ -84,7 +270,7 @@ export function createWalkers() {
     const t = (now - w.start) / w.ms;
     if (t >= 1) return { x: w.to.x, y: w.to.y, walking: false };
     const p = along(w.pts, Math.max(0, t));
-    return { x: p.x, y: p.y, walking: true };
+    return { x: p.x, y: p.y, walking: true, heading: headingAt(w.pts, Math.max(0, t)) };
   };
   return {
     sync(targets, now, graph, still = false) {
@@ -93,7 +279,8 @@ export function createWalkers() {
         const w = by.get(name);
         if (!w || still) { if (!w || w.to.x !== to.x || w.to.y !== to.y) by.set(name, { pts: null, to }); continue; }
         if (w.to.x === to.x && w.to.y === to.y) continue;
-        const here = posAt(w, now), pts = routeVia(graph, { x: here.x, y: here.y }, { x: to.x, y: to.y });
+        const here = posAt(w, now), via = routeVia(graph, { x: here.x, y: here.y }, { x: to.x, y: to.y });
+        const pts = graph.straight ? straighten(via) : via;   // #2634: timed along the longer way
         by.set(name, { pts, start: now, ms: Math.max(1, pathLength(pts) / WALK.SPEED), to });
       }
     },
@@ -104,14 +291,17 @@ export function createWalkers() {
 
 /**
  * The person at (x, y) in layout px as the scene draws them (#2431 review): each desk's box moved to where its person is
- * now (`posOf(desk)`: a walker's position; null: at the seat), the one drawn last (the nearest) tried first.
+ * now (`posOf(desk)`: a walker's position; null: at the seat), the one drawn last (the nearest) tried first — the same
+ * order the scene draws them in. `boxOf(desk, at)` (#2513 review): the box the skin draws that person in there (an
+ * uploaded character's strip, anchor and size, in its current pose and walking direction); null: the desk's own box.
  */
-export function personAt(desks, x, y, posOf) {
-  const people = desks.filter((d) => d.node).map((d) => { const at = posOf(d) || d.seat; return { d, at, dx: at.x - d.seat.x, dy: at.y - d.seat.y }; })
+export function personAt(desks, x, y, posOf, boxOf = null) {
+  const people = desks.filter((d) => d.node).map((d) => ({ d, at: posOf(d) || { ...d.seat, walking: false, heading: null } }))
     .sort((a, b) => a.at.y - b.at.y);
   for (let i = people.length - 1; i >= 0; i--) {
-    const { d, dx, dy } = people[i];
-    if (x >= d.x + dx && x < d.x + dx + d.w && y >= d.y + dy && y < d.y + dy + d.h) return d;
+    const { d, at } = people[i];
+    const b = (boxOf && boxOf(d, at)) || { x: d.x + at.x - d.seat.x, y: d.y + at.y - d.seat.y, w: d.w, h: d.h };
+    if (x >= b.x && x < b.x + b.w && y >= b.y && y < b.y + b.h) return d;
   }
   return null;
 }
@@ -143,11 +333,13 @@ export function bubbleAt(name, state, ms, lines) {
  * { key, calling, shown, box, tail? } with `box` the bubble's whole box ({ x, y, w, h }, for its whole line, so it never
  * moves while typing out) and `tail` the point its tail reaches: the strip from the box down to it is kept clear too. The ones calling for the person go first (they always show), then the one that started earliest
  * (the most typed out) — one already showing keeps its place. Each takes its spot, or one row up (`lift`) when that is
- * free; else it waits for another round. Returns the placed ones, each with its `dy` (0 or -lift).
+ * free; else it waits for another round. Returns the placed ones, each with its `dy` (0 or -lift). `rank` (optional,
+ * bubbleRank): a lower one goes first (else: calling 0, the rest 2); `blocked`: boxes no bubble may cover (name tags).
  */
-export function placeBubbles(items, lift = 22) {
-  const order = [...items].sort((a, b) => (Number(b.calling) - Number(a.calling)) || (b.shown - a.shown) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
-  const taken = [], out = [];
+export function placeBubbles(items, lift = 22, blocked = []) {
+  const rank = (it) => (it.rank ?? (it.calling ? 0 : 2));
+  const order = [...items].sort((a, b) => (rank(a) - rank(b)) || (b.shown - a.shown) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+  const taken = [...blocked], out = [];
   const hits = (r) => taken.some((t) => r.x < t.x + t.w && t.x < r.x + r.w && r.y < t.y + t.h && t.y < r.y + r.h);
   for (const it of order) {
     for (const dy of [0, -lift]) {
@@ -161,17 +353,47 @@ export function placeBubbles(items, lift = 22) {
   return out;
 }
 
+/** Who speaks first when bubbles compete: calling for the person, then working, then everyone else. */
+export const bubbleRank = (state) => (CALLING.has(state) ? 0 : state === "working" ? 1 : 2);
+/** At most this many bubbles in an area over capacity (#2513). */
+export const CROWD_BUBBLES = 3;
+/** States whose bubbles are left out in an area over capacity (the chatter; a call or work still speaks). */
+const QUIET_IN_CROWD = new Set(["idle", "paused", "stopped", "starting", "queued"]);
+/**
+ * The bubbles a frame may show (#2513): in an area over capacity (`over`), none for idle or asleep people and at most
+ * CROWD_BUBBLES, the highest ranked first (bubbleRank); elsewhere all of them. `items`: { area, state, shown, key, … }.
+ */
+export function thinBubbles(items, over) {
+  const byArea = new Map(), out = [];
+  for (const it of items) {
+    if (!over || !over.has(it.area)) { out.push(it); continue; }
+    if (QUIET_IN_CROWD.has(it.state)) continue;
+    if (!byArea.has(it.area)) byArea.set(it.area, []);
+    byArea.get(it.area).push(it);
+  }
+  for (const list of byArea.values()) {
+    list.sort((a, b) => (bubbleRank(a.state) - bubbleRank(b.state)) || (b.shown - a.shown) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+    out.push(...list.slice(0, CROWD_BUBBLES));
+  }
+  return out;
+}
+
 /** The lines for a state: the skin's (in the page's language), else the page's own. */
 export function linesFor(state, lang, pack, defaults) {
-  const own = pack && pack.bubbles && pack.bubbles[lang] && pack.bubbles[lang][state];
-  return own && own.length ? own : defaults[state] || [];
+  const mine = pack && own(own(pack.bubbles, lang), state);
+  return Array.isArray(mine) && mine.length ? mine : own(defaults, state) || [];
 }
 
 // ── Furniture ──
 
 /** The furniture active now: an item whose `activeWhen` names a state someone shown is in. */
-export function activeFurniture(pack, states) {
+export function activeFurniture(pack, states, byName = new Map()) {
   const on = new Set();
-  for (const f of (pack && pack.furniture) || []) if (f.activeWhen && f.activeWhen.some((s) => states.has(s))) on.add(f.id);
+  for (const f of (pack && pack.furniture) || []) {
+    if (!f.activeWhen) continue;
+    // activeFor (#2570): only those people's states count; else anyone's shown.
+    const hit = f.activeFor ? f.activeFor.some((n) => byName.has(n) && f.activeWhen.includes(byName.get(n))) : f.activeWhen.some((s) => states.has(s));
+    if (hit) on.add(f.id);
+  }
   return on;
 }