@songsid/agend 2.3.2-beta.1 → 2.3.2-beta.10

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

@@ -1,8 +1,9 @@
 // The Office view's art (fleet-office.js draws with it on a <canvas>). A skin draws a layout that fleet-office-model.js
-// (desks) or fleet-office-zones.js (zones) made. Two skins are built in and draw everything procedurally — little
-// pixel people, desks, lamps — so no art ships: "pixel" (the desks layout: a room per team, a desk per instance) and
-// "studio" (the zones layout: work desks, a lounge, an alert corner and a nap corner; people walk to the area for their
-// state). Every drawing call goes through the OfficeSkin interface below, so a skin pack (pictures from an artist,
+// (desks) or fleet-office-zones.js (zones) made. Three skins are built in. Two draw everything procedurally — little
+// pixel people, desks, lamps: "pixel" (the desks layout: a room per team, a desk per instance) and "studio" (the zones
+// layout: work desks, a lounge, an alert corner and a nap corner; people walk to the area for their state). The third,
+// "cozy" (#2631), is the zones layout on one picture shipped with the page (a warm pixel-art office), the same built-in
+// people in it. Every drawing call goes through the OfficeSkin interface below, so a skin pack (pictures from an artist,
 // format v1 in fleet-office-pack.js) can replace any part; a part a pack does not supply falls back to the built-in
 // drawing. An admin uploads a pack (#2513, the host keeps it: src/web-office-skins.ts); loadPackSkin() reads it back —
 // its manifest checked here again (checkSkinPack), its pictures by their content ids — and spriteSkin() draws it.
@@ -40,8 +41,9 @@
 // pictures and draws the characters, props and bubbles each frame. In zones the background is kept; furniture, people (walking
 // along the pack's waypoints), tags, props and bubbles are drawn each frame, furniture by depth around the people (depth "y":
 // among them by base y), then the foreground, then the crowd counts, tags and bubbles.
+import { t } from "/assets/app-i18n.js";
 import { frameAt, nameHash } from "./fleet-office-model.js";
-import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packImages, poseStrip, stripBox } from "./fleet-office-pack.js";
+import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packImages, poseStrip, stripBox, walkStrip } from "./fleet-office-pack.js";
 
 export { nameHash };
 
@@ -222,14 +224,16 @@ function drawDeskFront(ctx, d, look, env) {
     ctx.fillStyle = pal.text2; ctx.font = "600 8px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
     ctx.fillText(fitText(ctx, env.labels.closed, 32), d.x + 48, d.y + 63);
   }
-  // The name tag.
-  ctx.fillStyle = pal.surface;
-  ctx.fillRect(d.x + 6, d.y + 78, d.w - 12, 16);
-  ctx.strokeStyle = look.match ? pal.focus : pal.border;
-  ctx.lineWidth = look.match ? 2 : 1;
-  ctx.strokeRect(d.x + 6.5, d.y + 78.5, d.w - 13, 15);
-  ctx.fillStyle = pal.text; ctx.font = "600 11px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
-  ctx.fillText(fitText(ctx, look.label, d.w - 18), d.x + d.w / 2, d.y + 86.5);
+  // The name tag (#2554: none when `notag` — a tile too small to read it; the page draws it again on hover).
+  if (!look.notag) {
+    ctx.fillStyle = pal.surface;
+    ctx.fillRect(d.x + 6, d.y + 78, d.w - 12, 16);
+    ctx.strokeStyle = look.match ? pal.focus : pal.border;
+    ctx.lineWidth = look.match ? 2 : 1;
+    ctx.strokeRect(d.x + 6.5, d.y + 78.5, d.w - 13, 15);
+    ctx.fillStyle = pal.text; ctx.font = "600 11px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
+    ctx.fillText(fitText(ctx, look.label, d.w - 18), d.x + d.w / 2, d.y + 86.5);
+  }
   ctx.restore();
   if (look.match) { ctx.save(); ctx.strokeStyle = pal.focus; ctx.lineWidth = 2; ctx.strokeRect(d.x + 2, d.y + 2, d.w - 4, d.h - 6); ctx.restore(); }
 }
@@ -374,7 +378,7 @@ const STUDIO_FURNITURE = [
 ].sort((a, b) => a.depth - b.depth);
 /** The studio's pack: the same shape as a checked one (fleet-office-pack.js), furniture by `shape` instead of sprites. */
 export const STUDIO_PACK = {
-  format: 1, id: "studio", scale: 1, areas: STUDIO_AREAS, door: { x: HALL_X, y: 704 }, furniture: STUDIO_FURNITURE, ...studioGraph(STUDIO_AREAS),
+  format: 1, id: "studio", scale: 1, areas: STUDIO_AREAS, door: { x: HALL_X, y: 704 }, furniture: STUDIO_FURNITURE, ...studioGraph(STUDIO_AREAS), straight: false,
   stateZones: { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" },
   characters: {}, byInstance: {}, props: {}, bubbles: {},
 };
@@ -511,8 +515,12 @@ export function spriteSkin(pack, images, base = pixelSkin) {
     },
     drawFurniture(ctx, f, active, ms, env) {
       if (f.shape) { drawFurniture(ctx, f, active, ms, env); return; }
-      // Active: its strip (or activeSprite) plays; otherwise its first frame holds.
+      // An NPC walking (#2596): its walk strip for its heading (walkSide mirrored going left), when its picture is loaded.
+      const ws = walkStrip(f);
+      if (ws && strip(ctx, ws.strip, ms, f.x, f.y, null, ws.mirror)) return;
+      // Active: its activeSprite (or its strip) plays; otherwise its strip loops ("loop", #2570) or its first frame holds.
       if (active) strip(ctx, f.activeSprite || f.sprite, ms, f.x, f.y);
+      else if (f.loop) strip(ctx, f.sprite, ms, f.x, f.y);
       else strip(ctx, f.sprite, 0, f.x, f.y, 0);
     },
     drawCharacter(ctx, d, look, ms, env) {
@@ -528,18 +536,84 @@ export function spriteSkin(pack, images, base = pixelSkin) {
       const ps = shown({ ...look, heading: at.heading }, !!at.walking);
       return ps ? stripBox(ps.strip, at.x, at.y, ps.mirror) : base.charBox(look, at);
     },
-    drawProp(ctx, it, ms, env) { if (!strip(ctx, own(pack.props, it.hue), ms, it.x, it.y)) base.drawProp(ctx, it, ms, env); },
+    // An item in the air: its sender's own (their set's "prop", #2562), else the pack's for its kind, else the built-in one.
+    drawProp(ctx, it, ms, env) {
+      const mine = it.from ? own(setOf({ name: it.from }) || {}, "prop") : null;
+      if (!strip(ctx, mine || own(pack.props, it.hue), ms, it.x, it.y)) base.drawProp(ctx, it, ms, env);
+    },
   };
 }
 
+// ── The built-in cozy (#2631): the zones layout on a warm pixel-art office drawn as one picture, the built-in people ──
+
+/** Its picture, shipped with the page (src/ui/shared/office/cozy.png, auth-api.ts ASSETS: public static, as the font). */
+export const COZY_BACKGROUND = "/assets/office-cozy.png";
+const pts = (...xy) => xy.map(([x, y]) => ({ x, y }));
+// The seats are feet points on the picture: chairs in front of the desks, the sofa, the coffee table and machine, the
+// beanbags (a sleeper's bottom), in front of the whiteboard. The rects put a crowd's first extra spots (fleet-office-zones.js
+// overflowSpots: rows from the rect's top) on the aisles: under the first row of desks, in front of the sofa.
+const COZY_AREAS = {
+  desks: { name: "desks", rect: { x: 130, y: 196, w: 430, h: 220 }, seats: pts([193, 238], [336, 238], [481, 238], [193, 354], [336, 354], [481, 354]) },
+  lounge: { name: "lounge", rect: { x: 700, y: 196, w: 476, h: 184 }, seats: pts([940, 240], [1025, 310], [1120, 305]) },
+  alert: { name: "alert", rect: { x: 900, y: 500, w: 220, h: 110 }, seats: pts([965, 570], [1045, 570]) },
+  nap: { name: "nap", rect: { x: 110, y: 470, w: 400, h: 150 }, seats: pts([180, 562], [300, 562], [422, 565]) },
+};
+/** Its walkable graph, on the picture's aisles, every edge across or up/down; each seat's nearest waypoint is in front of it. */
+const COZY_WAYPOINTS = [
+  ["door", 642, 640], ["hall", 642, 395], ["top", 642, 175],
+  // the desks: the aisle under the first row (y 250), the one under the second (y 395), the column beside them (x 560)
+  ["d-east", 560, 395], ["d-up", 560, 250], ["d1-3", 481, 250], ["d1-2", 336, 250], ["d1-1", 193, 250],
+  ["d2-3", 481, 395], ["d2-2", 336, 395], ["d2-x", 300, 395], ["d2-1", 193, 395],
+  // the beanbags: the aisle above them (y 460)
+  ["n-x", 300, 460], ["n-1", 180, 460], ["n-3", 422, 460],
+  // the lounge: below the coffee table (y 340), up the sofa's west end; the coffee machine's column (x 1140)
+  ["l-hall", 946, 395], ["l-mid", 946, 340], ["l-west", 860, 340], ["l-sofa", 860, 250], ["l-table", 1025, 340],
+  ["e-hall", 1140, 395], ["e-coffee", 1140, 305],
+  // the whiteboard: in front of it (y 570), from the coffee machine's column
+  ["a-east", 1140, 570], ["a-mid", 1005, 570],
+].map(([id, x, y]) => ({ id, x, y }));
+const COZY_EDGES = [
+  ["door", "hall"], ["hall", "top"], ["hall", "d-east"], ["d-east", "d2-3"], ["d2-3", "d2-2"], ["d2-2", "d2-x"], ["d2-x", "d2-1"],
+  ["d-east", "d-up"], ["d-up", "d1-3"], ["d1-3", "d1-2"], ["d1-2", "d1-1"], ["d2-x", "n-x"], ["n-x", "n-1"], ["n-x", "n-3"],
+  ["hall", "l-hall"], ["l-hall", "l-mid"], ["l-mid", "l-west"], ["l-west", "l-sofa"], ["l-mid", "l-table"],
+  ["l-hall", "e-hall"], ["e-hall", "e-coffee"], ["e-hall", "a-east"], ["a-east", "a-mid"],
+];
+/** The cozy's pack: the picture is the room; the one item is the notice board, its tag saying a pack can restyle it. */
+export const COZY_PACK = {
+  format: 1, id: "cozy", scale: 1, background: COZY_BACKGROUND, areas: COZY_AREAS, door: { x: 642, y: 662 },
+  waypoints: COZY_WAYPOINTS, edges: COZY_EDGES, straight: true,
+  furniture: [{ id: "notice", x: 1211, y: 628, depth: 5, get label() { return t("orgo.cozyNotice"); } }],
+  stateZones: { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" },
+  characters: {}, byInstance: {}, props: {}, bubbles: {},
+};
+/** Until its picture is in (loadCozySkin): the studio's floors under the cozy's areas. */
+const cozyBare = spriteSkin(COZY_PACK, new Map(), studioSkin);
+let cozyJob = null;
+
 /** The skins built into this page; an uploaded pack is loaded by loadPackSkin. */
-export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin]]);
-export const BUILT_IN_SKINS = ["pixel", "studio"];
+export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin], ["cozy", cozyBare]]);
+export const BUILT_IN_SKINS = ["pixel", "studio", "cozy"];
+/**
+ * #2631: the cozy's picture, loaded once; the skin drawn from it then takes the cozy's place in SKINS (skinFor). The
+ * skin, or null while it cannot load (the bare one stays; tried again next time).
+ */
+export function loadCozySkin({ image = defaultImage } = {}) {
+  if (SKINS.get("cozy") !== cozyBare) return Promise.resolve(SKINS.get("cozy"));
+  cozyJob ??= image(COZY_BACKGROUND).then((im) => {
+    cozyJob = null;
+    if (!im) return null;
+    const sk = spriteSkin(COZY_PACK, new Map([[COZY_BACKGROUND, im]]), studioSkin);
+    SKINS.set("cozy", sk);
+    return sk;
+  }, () => { cozyJob = null; return null; });
+  return cozyJob;
+}
 /** A skin by id: a built-in one, else a pack loaded here (`packs`: id → skin), else the default (pixel). */
 export const skinFor = (id, packs = null) => SKINS.get(id) || (packs && packs.get(id)) || pixelSkin;
 
 const loaded = new Map();                                 // `${id}@${sha}` → Promise<OfficeSkin | null>
-const MAX_LOADED = 16;
+// Room for every pack the host keeps (web-office-skins.ts SKIN_LIMITS.packs) and a few replaced ones (each a new sha).
+const MAX_LOADED = 24;
 const defaultImage = (url) => new Promise((resolve) => {
   if (typeof Image !== "function") { resolve(null); return; }
   const im = new Image();
@@ -550,9 +624,10 @@ const defaultImage = (url) => new Promise((resolve) => {
 /**
  * An uploaded pack (GET /ui/office-skins/<id>?v=<sha>) as an OfficeSkin: its manifest checked (null when it is not a
  * pack: the page then draws a built-in style and says so), its pictures loaded from their content ids (one that does
- * not load is drawn by the built-in skin). Kept per id and sha, so a pack is fetched once.
+ * not load is drawn by the built-in skin). Kept per id and sha, so a pack is fetched once. `url`: where a picture's path
+ * is read (a share link's page reads its own address, #2636).
  */
-export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = defaultImage } = {}) {
+export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = defaultImage, url = (p) => p } = {}) {
   const key = `${id}@${sha}`;
   if (loaded.has(key)) return loaded.get(key);
   const base = `/ui/office-skins/${encodeURIComponent(id)}`;
@@ -561,14 +636,14 @@ export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = d
       const r = await get(`${base}?v=${encodeURIComponent(sha)}`, { method: "GET", headers: { "Content-Type": "application/json" } });
       if (!r || !r.ok) return null;
       const d = await r.json();
-      const c = checkSkinPack(d && d.manifest);
+      const c = checkSkinPack(d && d.manifest, { kept: true });
       if (!c.ok || c.pack.id !== id) return null;
       const files = d.files && typeof d.files === "object" ? d.files : {};
       const images = new Map();
       await Promise.all(packImages(c.pack).map(async (src) => {
         const fid = own(files, src);
         if (typeof fid !== "string" || !/^[0-9a-f]{32}$/.test(fid)) return;
-        const im = await image(`${base}/img/${fid}.png`);
+        const im = await image(url(`${base}/img/${fid}.png`));
         if (im) images.set(src, im);
       }));
       return spriteSkin(c.pack, images);

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

@@ -3,14 +3,16 @@
 //   what comes back is checked again here (fleet-office-model.js officesOk), never trusted;
 // - this browser's own choices (localStorage; blocked storage: this page only, as the canvas's Canvas/List): which
 //   office is shown, the auto office's member filter, and its style (skin); #2540: the view (zoom and centre) and the
-//   fit mode (Fit or Fill) per office.
+//   fit mode (Fit or Fill) per office; #2554: whether All offices shows the lobby tile.
 // - the skin packs an admin uploaded (#2513: GET /ui/office-skins, POST to upload one, DELETE to remove one;
 //   src/web-office-skins.ts). The office editor and the layout editor call saveOffices() with the whole list and the rev
 //   they read (a change in between answers 409).
 import { AUTO_ID, filterOk, officesOk } from "./fleet-office-model.js";
 import { fitModeOk, savedOk } from "./fleet-office-view.js";
 
-const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", SKIN_KEY = "agend_org_office_skin", ASLEEP_KEY = "agend_org_office_hide_asleep";
+const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", SKIN_KEY = "agend_org_office_skin", ASLEEP_KEY = "agend_org_office_hide_asleep", NIGHT_KEY = "agend_org_office_night";
+/** #2554: "0" when All offices leaves the lobby tile out (default: shown). */
+const LOBBY_KEY = "agend_org_office_lobby";
 /** #2540: { "<office>@<style>": [k, cx, cy] (and a 1 after them: a fit) } — the last VIEWS_MAX views, the most recent last. */
 const VIEW_KEY = "agend_org_office_view", VIEWS_MAX = 32;
 /** #2540: { "<office>@<style>": "cover" } — the offices whose fit fills the panel (the rest: "contain"), the last VIEWS_MAX. */
@@ -28,6 +30,20 @@ export function skinListOk(d) {
 }
 
 /** `fetch`: the caller's (a lease's, so an answer after the person moved on is dropped); `storage`: default localStorage. */
+/**
+ * Agents' acts as the host sends them (GET /ui/office-acts, the `office_acts` event), checked: the well-formed ones.
+ * `now`: the host's clock when it sent them — each end is moved onto this page's clock (they may differ).
+ */
+export function actsOk(list, now) {
+  const skew = typeof now === "number" && Number.isFinite(now) ? now - Date.now() : 0;
+  const str = (v) => typeof v === "string" && v.length > 0 && v.length <= 200, num = (v) => typeof v === "number" && Number.isFinite(v);
+  return (Array.isArray(list) ? list : []).filter((a) => a && typeof a === "object" && str(a.instance) && str(a.office) && num(a.until)
+    && (a.x === undefined || num(a.x)) && (a.y === undefined || num(a.y)) && (a.person === undefined || str(a.person))
+    && (a.say === undefined || (typeof a.say === "string" && a.say.length <= 40)) && (a.pose === undefined || ["idle", "working", "needs", "paused"].includes(a.pose)))
+    .map((a) => ({ instance: a.instance, office: a.office, until: a.until - skew, ...(num(a.since) ? { since: a.since } : {}), ...(str(a.state) ? { state: a.state } : {}),
+      ...(num(a.x) && num(a.y) ? { x: a.x, y: a.y } : {}),
+      ...(a.person ? { person: a.person } : {}), ...(a.say ? { say: a.say } : {}), ...(a.pose ? { pose: a.pose } : {}) }));
+}
 export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {}) {
   const st = () => { try { return storage || globalThis.localStorage || null; } catch { return null; } };
   const read = (k) => { try { const s = st(); return s ? s.getItem(k) : null; } catch { return null; } };
@@ -55,6 +71,15 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
         return r.ok ? { ok: true, rev: d.rev, offices: officesOk(d.offices) } : { ok: false, status: r.status, error: d.error || "offices_failed" };
       } catch { return { ok: false, status: 0, error: "offices_failed" }; }
     },
+    /** #2578: what agents are doing in the offices now (office_set): their acts, or null when they could not be read. */
+    async acts() {
+      try {
+        const r = await get("/ui/office-acts", { method: "GET", headers });
+        if (!r || !r.ok) return null;
+        const d = await r.json();
+        return actsOk(d && d.acts, d && d.now);
+      } catch { return null; }
+    },
     /** The skin packs the host keeps: { rev, packs: [{ id, name, sha }] }; null when they could not be read. */
     async skins() {
       try {
@@ -80,17 +105,26 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
         return r.ok ? { ok: true } : { ok: false, status: r.status, error: d.error || "skin_failed" };
       } catch { return { ok: false, status: 0, error: "skin_failed" }; }
     },
-    /** The office shown here: an id (one the host no longer has falls back to the auto office where it is used). */
+    /**
+     * The office shown here: an id (one the host no longer has falls back to the auto office where it is used), or
+     * #2554's All offices (fleet-office-overview.js ALL_ID; with fewer than two offices stored: the auto office).
+     */
     choice: () => { const v = read(CHOICE_KEY); return typeof v === "string" && v && v.length <= 40 ? v : AUTO_ID; },
     saveChoice: (id) => write(CHOICE_KEY, String(id)),
     filter: () => { const s = read(FILTER_KEY); try { return filterOk(s ? JSON.parse(s) : null); } catch { return filterOk(null); } },
     saveFilter: (f) => write(FILTER_KEY, JSON.stringify(filterOk(f))),
-    /** The whole fleet's style here: a skin id ("pixel": desks, "studio": zones); an unknown one is the default where used. */
-    skin: () => { const v = read(SKIN_KEY); return typeof v === "string" && /^[A-Za-z0-9_-]{1,40}$/.test(v) ? v : "pixel"; },
+    /** The whole fleet's style here: a skin id ("pixel": desks, "studio" and "cozy": zones); none chosen yet: cozy (#2631); an unknown one is the default where used. */
+    skin: () => { const v = read(SKIN_KEY); return typeof v === "string" && /^[A-Za-z0-9_-]{1,40}$/.test(v) ? v : "cozy"; },
     saveSkin: (id) => write(SKIN_KEY, String(id)),
     /** Whether paused and stopped people are left out of the Office here (default: shown). */
     hideAsleep: () => read(ASLEEP_KEY) === "1",
     saveHideAsleep: (v) => write(ASLEEP_KEY, v ? "1" : "0"),
+    /** #2568: whether the idle go to bed at night (00:00–06:00 on this device's clock) here (default: off). */
+    nightOn: () => read(NIGHT_KEY) === "1",
+    saveNightOn: (v) => write(NIGHT_KEY, v ? "1" : "0"),
+    /** #2554: whether All offices shows the lobby tile (the instances in no stored office) here (default: shown). */
+    lobbyTile: () => read(LOBBY_KEY) !== "0",
+    saveLobbyTile: (v) => write(LOBBY_KEY, v ? "1" : "0"),
     /** The view kept for `key` (an office and its style): { k, cx, cy } (fleet-office-view.js savedOf), or null. */
     view: (key) => {
       try { const m = JSON.parse(read(VIEW_KEY) || "{}"); const a = m && Object.prototype.hasOwnProperty.call(m, key) ? m[key] : null;

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

@@ -9,7 +9,8 @@
 //   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 stays wholly inside.
+//   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
@@ -65,13 +66,13 @@ export function fitScene(w, h, size, mode = "contain", margin = 0) {
  * 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. */
+/** 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)) : Math.min(n - s, Math.max(0, o)));
+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 stays wholly inside. Nothing can be scrolled off-screen.
+ * 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) };

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

@@ -3,7 +3,8 @@
 // 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, own } from "./fleet-office-pack.js";
-import { nameHash, pathLength, along, routeVia } from "./fleet-office-model.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) {
@@ -73,18 +74,22 @@ export function assignSeats(pack, wants, prev = new Map()) {
 
 /**
  * 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`), `crowd` and `over` (the areas over capacity).
+ * 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) }));
+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, over };
+    waypoints: pack.waypoints || [], edges: pack.edges || [], straight: pack.straight === true, door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd, over };
 }
 
 // ── Walking ──
@@ -103,10 +108,159 @@ export function headingAt(pts, t) {
   }
   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 } and, while walking, `heading`: the
+ * 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() {
@@ -125,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 });
       }
     },
@@ -232,8 +387,13 @@ export function linesFor(state, lang, pack, defaults) {
 // ── 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;
 }