@songsid/agend 2.3.1 → 2.3.2-beta.1

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

@@ -4,7 +4,8 @@
 // "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,
 // 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 +23,25 @@
 // @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 { 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 } from "./fleet-office-pack.js";
 
 export { nameHash };
 
@@ -271,21 +281,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 ──
 
@@ -346,8 +393,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 +441,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 +453,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,6 +504,11 @@ 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.
@@ -456,19 +517,67 @@ export function spriteSkin(pack, images, base = pixelSkin) {
     },
     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);
+    },
+    drawProp(ctx, it, ms, env) { if (!strip(ctx, 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). */
+/** The skins built into this page; an uploaded pack is loaded by loadPackSkin. */
 export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin]]);
-export const skinFor = (id) => SKINS.get(id) || pixelSkin;
+export const BUILT_IN_SKINS = ["pixel", "studio"];
+/** 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;
+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.
+ */
+export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = defaultImage } = {}) {
+  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);
+      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`);
+        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,12 +2,30 @@
 // - 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.
+// - 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";
+/** #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. */
 export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {}) {
@@ -37,6 +55,31 @@ 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 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). */
     choice: () => { const v = read(CHOICE_KEY); return typeof v === "string" && v && v.length <= 40 ? v : AUTO_ID; },
     saveChoice: (id) => write(CHOICE_KEY, String(id)),
@@ -45,5 +88,33 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
     /** 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"; },
     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"),
+    /** 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)));
+    },
   };
 }

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

@@ -0,0 +1,154 @@
+// #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 stays wholly inside.
+//
+// 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. */
+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)));
+/**
+ * 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.
+ */
+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
+}