@songsid/agend 2.3.1 → 2.3.2-beta.10

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

@@ -1,10 +1,12 @@
 // 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. No pack can be added yet (no upload): spriteSkin() and checkSkinPack() are the seam a later step plugs into.
+// 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.
 //
 // ── The interface ──
 //
@@ -22,16 +24,26 @@
 // @property {(ctx, desk, look, env) => void} drawDeskFront   desks: in front — the desk's front, its sign, folders, name tag
 // @property {(ctx, L, env) => void} [drawBackground]     zones: the whole 1280×720 background, areas and their names
 // @property {(ctx, item, active, ms, env) => void} [drawFurniture]   zones: one furniture item (active: activeWhen holds)
+// @property {(ctx, L, env) => void} [drawForeground]     zones: a pack's foreground over the whole 1280×720 scene, above
+//   the people, furniture and items in the air, below the crowd counts, name tags and bubbles
 // @property {(ctx, x, y, look, env) => void} [drawTag]   zones: a name tag under feet at (x, y)
+// @property {(ctx, area, n, env) => void} [drawCrowd]    zones: an area's "+n" (who found no spot in it)
 // @property {(ctx, desk, look, ms, env) => void} drawCharacter   the occupant in its pose at time `ms` (0: still); in
-//   zones `desk` is the character's box at its current position (its feet at desk.seat)
+//   zones `desk` is the character's box at its current position (its feet at desk.seat); walking, `look.heading` is
+//   the current step's { dx, dy }
+// @property {(look, at) => {x, y, w, h}} [charBox]   zones: the box drawCharacter covers with the feet at `at`
+//   ({ x, y, walking, heading }): what hover and click hit (fleet-office-zones.js personAt)
 // @property {(ctx, prop, ms, env) => void} drawProp      a traffic item in the air: { kind, hue, x, y, t }
 // @property {(ctx, x, y, text, env, lift?) => void} drawBubble  a speech bubble whose tail points at (x, y), its box `lift` px higher
-// The desks layout's back and front layers change only when the fleet does: the renderer keeps them as 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.
+// @property {(env) => string} matte   #2540: the colour around the scene (the Office fills the panel; the scene is 16:9)
+// @property {object|null} [backdrop]  a pack's loaded background picture (the page samples its edges for the matte)
+// The desks layout's back and front layers change only when the fleet (or the zoom) does: the renderer keeps them as
+// 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 } from "./fleet-office-pack.js";
+import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packImages, poseStrip, stripBox, walkStrip } from "./fleet-office-pack.js";
 
 export { nameHash };
 
@@ -212,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(); }
 }
@@ -271,21 +285,58 @@ function drawBubble(ctx, x, y, text, env, lift = 0) {
   ctx.restore();
 }
 
+/** A zones name tag's widest text (logical units): longer names are cut with an ellipsis. */
+export const TAG_TEXT_W = 84;
+const TAG_FONT = "600 10px system-ui, sans-serif";
+/** The box a name tag under feet at (x, y) takes (what drawTag draws; bubbles keep clear of it, #2513). */
+export function tagBox(ctx, x, y, label) {
+  ctx.save();
+  ctx.font = TAG_FONT;
+  const t = fitText(ctx, label, TAG_TEXT_W), w = Math.ceil((ctx.measureText ? ctx.measureText(t).width : t.length * 6) + 10);
+  ctx.restore();
+  return { x: Math.round(x - w / 2), y: y + 3, w, h: 14, text: t };
+}
 /** Zones: a name tag under someone's feet at (x, y). */
 function drawTag(ctx, x, y, look, env) {
   const { pal } = env;
   ctx.save();
   if (look.dim) ctx.globalAlpha = 0.35;
-  ctx.font = "600 10px system-ui, sans-serif";
-  const t = fitText(ctx, look.label, 84), w = Math.ceil((ctx.measureText ? ctx.measureText(t).width : t.length * 6) + 10);
+  ctx.font = TAG_FONT;
+  const t = fitText(ctx, look.label, TAG_TEXT_W), w = Math.ceil((ctx.measureText ? ctx.measureText(t).width : t.length * 6) + 10);
   ctx.fillStyle = pal.surface; ctx.fillRect(Math.round(x - w / 2), y + 3, w, 14);
   ctx.strokeStyle = look.match ? pal.focus : pal.border; ctx.lineWidth = look.match ? 2 : 1; ctx.strokeRect(Math.round(x - w / 2) + 0.5, y + 3.5, w - 1, 13);
   ctx.fillStyle = pal.text; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(t, x, y + 10.5);
   ctx.restore();
 }
 
+/**
+ * Zones: how many more want an area than it has room for — a chip in its bottom-right corner, inside its rect, so it
+ * never covers the area's name (#2513: "+42" over the nap corner's title).
+ */
+export function crowdChip(ctx, area, n) {
+  ctx.save();
+  ctx.font = "700 12px system-ui, sans-serif";
+  const text = `+${n}`, w = Math.ceil((ctx.measureText ? ctx.measureText(text).width : text.length * 7) + 12), h = 18, r = area.rect;
+  ctx.restore();
+  return { x: Math.round(r.x + r.w - w - 6), y: Math.round(r.y + r.h - h - 6), w, h, text };
+}
+function drawCrowd(ctx, area, n, env) {
+  if (!n) return;
+  const { pal } = env, b = crowdChip(ctx, area, n);
+  ctx.save();
+  ctx.fillStyle = pal.surface; ctx.fillRect(b.x, b.y, b.w, b.h);
+  ctx.strokeStyle = pal.border; ctx.lineWidth = 1; ctx.strokeRect(b.x + 0.5, b.y + 0.5, b.w - 1, b.h - 1);
+  ctx.fillStyle = pal.text; ctx.font = "700 12px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
+  ctx.fillText(b.text, b.x + b.w / 2, b.y + b.h / 2 + 0.5);
+  ctx.restore();
+}
+
+/** The built-in character in zones covers this box around its feet (as zonesLayout's desk box). */
+const charBox = (look, at) => ({ x: at.x - 24, y: at.y - 52, w: 48, h: 66 });
+/** #2540: Desks' matte (around the scene): the page's background token, which the desks' floor is too (Studio has its own). */
+const matte = (env) => env.pal.bg;
 /** @type {OfficeSkin} */
-export const pixelSkin = { id: "pixel", drawFloor, drawRoom, drawDeskBack, drawCharacter, drawDeskFront, drawProp, drawBubble, drawTag };
+export const pixelSkin = { id: "pixel", drawFloor, drawRoom, drawDeskBack, drawCharacter, drawDeskFront, drawProp, drawBubble, drawTag, drawCrowd, charBox, matte };
 
 // ── The built-in studio: the zones layout, drawn procedurally ──
 
@@ -327,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: {},
 };
@@ -346,8 +397,6 @@ function drawBackground(ctx, L, env) {
     ctx.strokeStyle = pal.border; ctx.lineWidth = 2; ctx.strokeRect(r.x + 1, r.y + 1, r.w - 2, r.h - 2);
     ctx.fillStyle = pal.text; ctx.font = "600 16px system-ui, sans-serif"; ctx.textBaseline = "top"; ctx.textAlign = "left";
     ctx.fillText(fitText(ctx, env.labels.areas[a.name] || a.name, r.w - 60), r.x + 12, r.y + 10);
-    const crowd = L.crowd && L.crowd.get(a.name);
-    if (crowd) { ctx.fillStyle = pal.text2; ctx.textAlign = "right"; ctx.fillText(`+${crowd}`, r.x + r.w - 12, r.y + 10); }
     ctx.restore();
   }
 }
@@ -396,9 +445,11 @@ function drawFurniture(ctx, f, active, ms, env) {
   }
 }
 /** @type {OfficeSkin} */
-export const studioSkin = { ...pixelSkin, id: "studio", pack: STUDIO_PACK, drawBackground, drawFurniture };
+/** #2540: the studio's matte is its hall floor (the scene's edge), so the panel around the scene reads as more of it. */
+const studioMatte = (env) => (ZONE_FLOOR[env.mode] || ZONE_FLOOR.dark).hall;
+export const studioSkin = { ...pixelSkin, id: "studio", pack: STUDIO_PACK, drawBackground, drawFurniture, matte: studioMatte };
 
-// ── Skin packs (the seam; nothing registers one yet) ──
+// ── Skin packs ──
 
 /**
  * An OfficeSkin from a checked pack (fleet-office-pack.js checkSkinPack) and its loaded pictures (`images`: src → a
@@ -406,20 +457,29 @@ export const studioSkin = { ...pixelSkin, id: "studio", pack: STUDIO_PACK, drawB
  */
 export function spriteSkin(pack, images, base = pixelSkin) {
   const img = (src) => (src && images.get(src)) || null;
-  const strip = (ctx, st, ms, x, y, frame = null) => {
+  // A strip's frame at its displayed size (dw × dh, unsmoothed), its anchor on (x, y); mirrored about the anchor.
+  const strip = (ctx, st, ms, x, y, frame = null, mirror = false) => {
     const im = img(st && st.src);
     if (!im) return false;
-    const f = frame ?? frameAt(ms, st.frames, st.fps), s = pack.scale;
+    const f = frame ?? frameAt(ms, st.frames, st.fps), b = stripBox(st, x, y, mirror);
     ctx.save();
     ctx.imageSmoothingEnabled = false;
-    ctx.drawImage(im, f * st.w, 0, st.w, st.h, Math.round(x - st.ax * s), Math.round(y - st.ay * s), st.w * s, st.h * s);
+    if (mirror) { ctx.translate(b.x + b.w, b.y); ctx.scale(-1, 1); ctx.drawImage(im, f * st.w, 0, st.w, st.h, 0, 0, b.w, b.h); }
+    else ctx.drawImage(im, f * st.w, 0, st.w, st.h, b.x, b.y, b.w, b.h);
     ctx.restore();
     return true;
   };
+  const setOf = (look) => own(pack.characters, own(pack.byInstance, look.name)) || own(pack.characters, "default");
+  /** The strip a look shows (its pose; walking, by its heading), when its picture is loaded. */
+  const shown = (look, walking = look.pose === "walk") => {
+    const ps = poseStrip(setOf(look), walking ? "walk" : look.pose, look.heading);
+    return ps && img(ps.strip.src) ? ps : null;
+  };
   return {
     ...base,
     id: pack.id,
     pack,
+    backdrop: img(pack.background),
     drawRoom(ctx, room, env) {
       const floor = img(pack.room.floor), wall = img(pack.room.wall);
       if (!floor) { base.drawRoom(ctx, room, env); return; }
@@ -448,27 +508,151 @@ export function spriteSkin(pack, images, base = pixelSkin) {
       if (!im) { drawBackground(ctx, L, env); return; }
       ctx.save(); ctx.imageSmoothingEnabled = false; ctx.drawImage(im, 0, 0, LOGICAL.w, LOGICAL.h); ctx.restore();
     },
+    drawForeground(ctx, L, env) {
+      const im = img(pack.foreground);
+      if (!im) return;
+      ctx.save(); ctx.imageSmoothingEnabled = false; ctx.drawImage(im, 0, 0, LOGICAL.w, LOGICAL.h); ctx.restore();
+    },
     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) {
       if (look.pose === "away") return;
-      const set = pack.characters[pack.byInstance[look.name]] || pack.characters.default;
+      const ps = shown(look);
       ctx.save();
       if (look.dim) ctx.globalAlpha = 0.35;
-      const done = !!set && strip(ctx, set[look.pose] || set.idle, ms, d.seat.x, d.seat.y);
+      const done = !!ps && strip(ctx, ps.strip, ms, d.seat.x, d.seat.y, null, ps.mirror);
       ctx.restore();
       if (!done) base.drawCharacter(ctx, d, look, ms, env);
     },
-    drawProp(ctx, it, ms, env) { if (!strip(ctx, pack.props[it.hue], ms, it.x, it.y)) base.drawProp(ctx, it, ms, env); },
+    charBox(look, at) {
+      const ps = shown({ ...look, heading: at.heading }, !!at.walking);
+      return ps ? stripBox(ps.strip, at.x, at.y, ps.mirror) : base.charBox(look, at);
+    },
+    // 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 skins this page has: the built-in ones (a pack would be added here once loaded). */
-export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin]]);
-export const skinFor = (id) => SKINS.get(id) || pixelSkin;
+// ── 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], ["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>
+// 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();
+  im.onload = () => resolve(im);
+  im.onerror = () => resolve(null);
+  im.src = url;
+});
+/**
+ * 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. `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, url = (p) => p } = {}) {
+  const key = `${id}@${sha}`;
+  if (loaded.has(key)) return loaded.get(key);
+  const base = `/ui/office-skins/${encodeURIComponent(id)}`;
+  const job = (async () => {
+    try {
+      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, { 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(url(`${base}/img/${fid}.png`));
+        if (im) images.set(src, im);
+      }));
+      return spriteSkin(c.pack, images);
+    } catch { return null; }
+  })();
+  loaded.set(key, job);
+  if (loaded.size > MAX_LOADED) loaded.delete(loaded.keys().next().value);
+  job.then((skin) => { if (!skin) loaded.delete(key); });   // a failed read is tried again next time
+  return job;
+}
 /** The people's depth in zones (fleet-office-pack.js). */
 export { CHAR_DEPTH };

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

@@ -2,14 +2,48 @@
 // - the offices people made: the host's (GET / PUT /ui/offices, src/web-office-store.ts — one list for every viewer);
 //   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).
-// TODO(office editor): adding and renaming offices, assigning people, dragging seats and drawing paths call
-// saveOffices() with the whole list and the rev they read (a change in between answers 409).
+//   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; #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";
+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. */
+const FIT_KEY = "agend_org_office_fit";
+const PACK_ID = /^[A-Za-z0-9_-]{1,40}$/;
+/** The host's list of skin packs, checked: [{ id, name, sha }] (anything odd dropped). */
+export function skinListOk(d) {
+  const out = [], ids = new Set();
+  for (const p of Array.isArray(d && d.packs) ? d.packs.slice(0, 64) : []) {
+    if (!p || typeof p.id !== "string" || !PACK_ID.test(p.id) || ids.has(p.id) || typeof p.sha !== "string" || !/^[0-9a-f]{32}$/.test(p.sha)) continue;
+    ids.add(p.id);
+    out.push({ id: p.id, name: typeof p.name === "string" && p.name.trim() ? p.name.trim().slice(0, 60) : p.id, sha: p.sha });
+  }
+  return out;
+}
 
 /** `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; } };
@@ -37,13 +71,84 @@ 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" }; }
     },
-    /** The office shown here: an id (one the host no longer has falls back to the auto office where it is used). */
+    /** #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 {
+        const r = await get("/ui/office-skins", { method: "GET", headers });
+        if (!r || !r.ok) return null;
+        const d = await r.json();
+        return { rev: typeof (d && d.rev) === "string" ? d.rev : "", packs: skinListOk(d) };
+      } catch { return null; }
+    },
+    /** Upload a pack (an admin session): { manifest, files: { name: base64 }, name? } → { ok, pack } or { ok: false, status, error, detail }. */
+    async uploadSkin(body) {
+      try {
+        const r = await get("/ui/office-skins", { method: "POST", headers, body: JSON.stringify(body) });
+        const d = await r.json().catch(() => ({}));
+        return r.ok ? { ok: true, pack: d.pack, rev: d.rev } : { ok: false, status: r.status, error: d.error || "skin_failed", detail: d.detail || "" };
+      } catch { return { ok: false, status: 0, error: "skin_failed", detail: "" }; }
+    },
+    /** Remove a pack (an admin session). */
+    async deleteSkin(id) {
+      try {
+        const r = await get(`/ui/office-skins/${encodeURIComponent(id)}`, { method: "DELETE", headers });
+        const d = await r.json().catch(() => ({}));
+        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), 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;
+        return Array.isArray(a) ? savedOk({ k: a[0], cx: a[1], cy: a[2], fit: a[3] === 1 }) : null; } catch { return null; }
+    },
+    saveView: (key, v) => {
+      const ok = savedOk(v);
+      if (!ok || typeof key !== "string" || key.length > 100) return;
+      let m = {};
+      try { const o = JSON.parse(read(VIEW_KEY) || "{}"); if (o && typeof o === "object" && !Array.isArray(o)) m = o; } catch { m = {}; }
+      const r = (n) => Math.round(n * 1000) / 1000;
+      const next = Object.entries(m).filter(([k2, a]) => k2 !== key && Array.isArray(a)).slice(-(VIEWS_MAX - 1));
+      write(VIEW_KEY, JSON.stringify(Object.fromEntries([...next, [key, [r(ok.k), r(ok.cx), r(ok.cy), ...(ok.fit ? [1] : [])]]])));
+    },
+    /** The fit mode kept for `key`: "contain" (the default) or "cover" (Fill). */
+    fitMode: (key) => {
+      try { const m = JSON.parse(read(FIT_KEY) || "{}"); return fitModeOk(m && Object.prototype.hasOwnProperty.call(m, key) ? m[key] : null); } catch { return "contain"; }
+    },
+    saveFitMode: (key, mode) => {
+      if (typeof key !== "string" || key.length > 100) return;
+      let m = {};
+      try { const o = JSON.parse(read(FIT_KEY) || "{}"); if (o && typeof o === "object" && !Array.isArray(o)) m = o; } catch { m = {}; }
+      const next = Object.entries(m).filter(([k2, v]) => k2 !== key && v === "cover").slice(-(VIEWS_MAX - 1));
+      write(FIT_KEY, JSON.stringify(Object.fromEntries(fitModeOk(mode) === "cover" ? [...next, [key, "cover"]] : next)));
+    },
   };
 }