@songsid/agend 2.3.1 → 2.3.2-beta.10

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

@@ -0,0 +1,235 @@
+// Fleet → Org chart → Office → Edit layout (#2513): an admin moves things on a stored office's zones skin — its seats,
+// furniture, the door and the walkable graph's waypoints — and adds or removes waypoints and the corridors between
+// them. The pack stays as it was uploaded: what differs from it is kept as the office's `overrides` (fleet-office-pack.js
+// overridesBetween), saved with the whole list and the rev read (PUT /ui/offices; a change made meanwhile is a 409).
+// Reset goes back to the pack's own positions. A "show coordinates" overlay draws the 1280×720 logical grid.
+//
+// #2665: an item with a `night` (#2568) has a night handle too — its night strip drawn faint on the canvas (as the
+// seats' figures, #2558), a moon, and a thin line to its day place. One that sleeps in place shows it on its day place
+// (and it follows the item); dragged away, the item has its own night place; its Reset puts back the pack's.
+//
+// Every handle is a button for the keyboard too: Tab to it, the arrow keys move it (Shift: by 10), Delete removes a
+// waypoint; the selected waypoint's corridors are listed with a way to join or unjoin each. Never offered to a guest,
+// the public link or a read-only session (the host refuses their saves too).
+//
+// The pure part (handles, moving, adding and removing) is exported for tests; LayoutEditor is the overlay.
+import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { SidePanel } from "/assets/side-panel.js";
+import { LOGICAL, overridesBetween, own } from "./fleet-office-pack.js";
+
+register("orgl", {
+  en: {
+    edit: "Edit layout", title: "Edit layout", coords: "Show coordinates", addWaypoint: "Add waypoint", removeWaypoint: "Remove waypoint",
+    joinTo: "Join to", join: "Join", unjoin: "Unjoin {0}", corridors: "Corridors", none: "Nothing selected: pick a seat, an item, the door or a waypoint.",
+    reset: "Reset to the pack's layout", save: "Save layout", cancel: "Cancel", saved: "Layout saved.", hint: "Drag, or use the arrow keys (Shift: by 10).",
+    seat: "Seat {0} in {1}", furniture: "Item {0}", night: "Item {0} (night)", door: "Door", waypoint: "Waypoint {0}", at: "{0} at {1}, {2}",
+    nightReset: "Back to the pack's night place",
+    changed: "Someone changed the offices meanwhile. Your layout is kept: Save again puts it on the current list.",
+    failed: "The layout was not saved ({0}).", rateLimited: "Too many saves. Try again in a minute.",
+    stale: "This office was removed or its style changed meanwhile: this layout can no longer be saved. Cancel closes it.",
+  },
+  "zh-TW": {
+    edit: "編輯配置", title: "編輯配置", coords: "顯示座標", addWaypoint: "新增路徑點", removeWaypoint: "移除路徑點",
+    joinTo: "連到", join: "連接", unjoin: "取消連接 {0}", corridors: "走道", none: "尚未選取：請選座位、家具、門或路徑點。",
+    reset: "還原成 pack 的配置", save: "儲存配置", cancel: "取消", saved: "配置已儲存。", hint: "拖曳，或用方向鍵移動（Shift：一次 10）。",
+    seat: "{1} 的座位 {0}", furniture: "家具 {0}", night: "家具 {0}（夜間）", door: "門", waypoint: "路徑點 {0}", at: "{0}，位置 {1}, {2}",
+    nightReset: "回到 pack 的夜間位置",
+    changed: "有人在這期間修改了辦公室。你的配置已保留：再按一次儲存，會套用到目前的清單。",
+    failed: "配置沒有儲存（{0}）。", rateLimited: "儲存太頻繁，請一分鐘後再試。",
+    stale: "這個辦公室在這期間被移除，或它的風格已改變：這份配置無法再儲存。按取消關閉。",
+  },
+});
+const tl = (k, ...v) => t(`orgl.${k}`, ...v);
+
+// ── The pure part ──
+
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, Math.round(v)));
+/** An item's night place (#2665): its own, or (in place) its day place; `own` whether it has one. */
+const nightAt = (f) => (f.night.x !== null && f.night.x !== undefined && f.night.y !== null && f.night.y !== undefined ? { x: f.night.x, y: f.night.y, own: true } : { x: f.x, y: f.y, own: false });
+/**
+ * Every handle on a pack: { key, kind, label, x, y } — seats by area, furniture, each item's night place (#2665: an
+ * item with a `night`; `day` its day place, `inPlace` while it sleeps there), the door, the waypoints.
+ */
+export function handlesOf(pack) {
+  const out = [];
+  for (const [name, a] of Object.entries(pack.areas)) a.seats.forEach((s, i) => out.push({ key: `seat:${name}:${i}`, kind: "seat", label: tl("seat", i + 1, name), x: s.x, y: s.y }));
+  for (const f of pack.furniture) out.push({ key: `furn:${f.id}`, kind: "furniture", label: tl("furniture", f.id), x: f.x, y: f.y });
+  for (const f of pack.furniture) {
+    if (!f.night) continue;
+    const n = nightAt(f);
+    out.push({ key: `night:${f.id}`, kind: "night", label: tl("night", f.id), x: n.x, y: n.y, day: { x: f.x, y: f.y }, inPlace: !n.own });
+  }
+  out.push({ key: "door", kind: "door", label: tl("door"), x: pack.door.x, y: pack.door.y });
+  for (const w of pack.waypoints) out.push({ key: `wp:${w.id}`, kind: "waypoint", label: tl("waypoint", w.id), x: w.x, y: w.y });
+  return out;
+}
+/** The pack with handle `key` at (x, y), rounded and kept in range: a seat inside its area, anything else on the canvas. */
+export function moveHandle(pack, key, x, y) {
+  const [kind, a, b] = key.split(":");
+  const inCanvas = () => ({ x: clamp(x, 0, LOGICAL.w), y: clamp(y, 0, LOGICAL.h) });
+  if (kind === "seat") {
+    const area = own(pack.areas, a), i = Number(b);
+    if (!area || !area.seats[i]) return pack;
+    const r = area.rect, p = { x: clamp(x, Math.ceil(r.x), Math.floor(r.x + r.w)), y: clamp(y, Math.ceil(r.y), Math.floor(r.y + r.h)) };
+    return { ...pack, areas: { ...pack.areas, [a]: { ...area, seats: area.seats.map((s, j) => (j === i ? p : s)) } } };
+  }
+  if (kind === "furn") return { ...pack, furniture: pack.furniture.map((f) => (f.id === a ? { ...f, ...inCanvas() } : f)) };
+  if (kind === "night") return { ...pack, furniture: pack.furniture.map((f) => (f.id === a && f.night ? { ...f, night: { ...f.night, ...inCanvas() } } : f)) };
+  if (kind === "door") return { ...pack, door: inCanvas() };
+  if (kind === "wp") return { ...pack, waypoints: pack.waypoints.map((w) => (w.id === a ? { ...w, ...inCanvas() } : w)) };
+  return pack;
+}
+/** A new waypoint at (x, y), named wp-<n> (a name no other waypoint has); returns { pack, id }. */
+export function addWaypoint(pack, x = LOGICAL.w / 2, y = LOGICAL.h / 2) {
+  const ids = new Set(pack.waypoints.map((w) => w.id));
+  let n = pack.waypoints.length + 1;
+  while (ids.has(`wp-${n}`)) n++;
+  const id = `wp-${n}`;
+  return { pack: { ...pack, waypoints: [...pack.waypoints, { id, x: clamp(x, 0, LOGICAL.w), y: clamp(y, 0, LOGICAL.h) }] }, id };
+}
+/** The pack without waypoint `id` and its corridors. */
+export function removeWaypoint(pack, id) {
+  return { ...pack, waypoints: pack.waypoints.filter((w) => w.id !== id), edges: pack.edges.filter((e) => e[0] !== id && e[1] !== id) };
+}
+/** A corridor between `a` and `b` added, or removed when there is one (either way round). */
+export function toggleEdge(pack, a, b) {
+  if (a === b || !pack.waypoints.some((w) => w.id === a) || !pack.waypoints.some((w) => w.id === b)) return pack;
+  const has = (e) => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a);
+  return { ...pack, edges: pack.edges.some(has) ? pack.edges.filter((e) => !has(e)) : [...pack.edges, [a, b]] };
+}
+/** #2665: item `id`'s night place back to the pack's (`base`): its own x/y, or in place again. */
+export function resetNight(pack, base, id) {
+  const o = base.furniture.find((f) => f.id === id);
+  if (!o || !o.night) return pack;
+  return { ...pack, furniture: pack.furniture.map((f) => (f.id === id && f.night ? { ...f, night: { ...f.night, x: o.night.x, y: o.night.y } } : f)) };
+}
+/** What Save keeps: the overrides between the pack and the edited layout (null: the pack's own). */
+export const layoutOverrides = (base, edited) => overridesBetween(base, edited);
+
+// ── The overlay ──
+
+const GRID = 80, LABEL = 160;
+/**
+ * A night handle's moon (#2665): a crescent centred near (x, y). Night handles are drawn under the others: one in place
+ * is a wider ring round its item's square (the item stays grabbable), its moon at the ring's corner.
+ */
+const moonPath = (x, y) => `M ${x + 1} ${y - 5} A 5 5 0 1 0 ${x + 1} ${y + 5} A 4 4 0 1 1 ${x + 1} ${y - 5} Z`;
+const KEY_STEP = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+
+/**
+ * The editor over the canvas: `base` the pack as uploaded; `start` the layout shown when it opens (the base with the
+ * office's overrides on it); `place(el)` puts the overlay over the scene wherever the view has it (#2540: panned and
+ * zoomed; the page sets its box through the CSSOM, never a style attribute: #1300) — a pointer is read back through
+ * the overlay's own box, so a drag lands on the logical point under it at any zoom; `onChange(edited)` as anything
+ * moves (the canvas redraws it); `onSave(overrides | null)` → { ok } or { ok: false, message }; `onClose()`. `stale` (a message): the
+ * office or its style changed underneath the session — no handles, nothing to save, only Cancel.
+ */
+export function LayoutEditor({ base, start, place = null, stale = "", dock = true, onChange, onSave, onClose }) {
+  const [edited, setEdited] = useState(start);
+  const [sel, setSel] = useState(null);
+  const [coords, setCoords] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState("");
+  const [joinTo, setJoinTo] = useState("");
+  const svg = useRef(null), drag = useRef(null), overlay = useRef(null);
+  useLayoutEffect(() => { if (place) place(overlay.current); });
+  const change = (next) => { setEdited(next); onChange(next); };
+  useEffect(() => { onChange(start); }, []);
+  const handles = handlesOf(edited);
+  const selected = sel ? handles.find((h) => h.key === sel) || null : null;
+  const toLogical = (e) => {
+    const r = svg.current && svg.current.getBoundingClientRect ? svg.current.getBoundingClientRect() : null;
+    if (!r || !r.width || !r.height) return null;
+    return { x: ((e.clientX - r.left) / r.width) * LOGICAL.w, y: ((e.clientY - r.top) / r.height) * LOGICAL.h };
+  };
+  const down = (key) => (e) => {
+    if (busy) return;
+    setSel(key); drag.current = key;
+    try { e.currentTarget?.setPointerCapture?.(e.pointerId); } catch { /* not captured: moves still reach the svg */ }
+  };
+  const move = (e) => { if (!drag.current) return; const p = toLogical(e); if (p) change(moveHandle(edited, drag.current, p.x, p.y)); };
+  const up = () => { drag.current = null; };
+  const keyOn = (h) => (e) => {
+    if (busy) return;
+    const d = KEY_STEP[e.key];
+    if (d) { e.preventDefault(); const k = e.shiftKey ? 10 : 1; setSel(h.key); change(moveHandle(edited, h.key, h.x + d[0] * k, h.y + d[1] * k)); return; }
+    if ((e.key === "Delete" || e.key === "Backspace") && h.kind === "waypoint") { e.preventDefault(); change(removeWaypoint(edited, h.key.slice(3))); setSel(null); }
+    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSel(h.key); }
+  };
+  const add = () => { const at = selected ? { x: selected.x + 40, y: selected.y } : { x: LOGICAL.w / 2, y: LOGICAL.h / 2 }; const r = addWaypoint(edited, at.x, at.y); change(r.pack); setSel(`wp:${r.id}`); };
+  const wpSel = selected && selected.kind === "waypoint" ? selected.key.slice(3) : null;
+  const nightSel = selected && selected.kind === "night" ? selected.key.slice(6) : null;
+  const save = async () => {
+    if (busy) return;
+    setBusy(true); setMsg("");
+    try {
+      const r = await onSave(layoutOverrides(base, edited));
+      if (r && r.ok) { onClose(); return; }
+      setMsg(r && r.message ? r.message : tl("failed", "?"));
+    } finally { setBusy(false); }
+  };
+  const reset = () => { change(base); setSel(null); setMsg(""); };
+  const grid = [];
+  if (coords) {
+    for (let x = GRID; x < LOGICAL.w; x += GRID) grid.push(html`<line key=${`gx${x}`} class="ol-grid" x1=${x} y1="0" x2=${x} y2=${LOGICAL.h} />`);
+    for (let y = GRID; y < LOGICAL.h; y += GRID) grid.push(html`<line key=${`gy${y}`} class="ol-grid" x1="0" y1=${y} x2=${LOGICAL.w} y2=${y} />`);
+    for (let x = 0; x < LOGICAL.w; x += LABEL) grid.push(html`<text key=${`lx${x}`} class="ol-label" x=${x + 3} y="14">${x}</text>`);
+    for (let y = LABEL; y < LOGICAL.h; y += LABEL) grid.push(html`<text key=${`ly${y}`} class="ol-label" x="3" y=${y - 3}>${y}</text>`);
+  }
+  const at = new Map(edited.waypoints.map((w) => [w.id, w]));
+  const edgeKey = (e) => `${e[0]}\u0000${e[1]}`;
+  // #2585: the controls dock in the side panel on a wide desk (the canvas left whole for the handles), else they are
+  // the bar over the canvas as before. Esc (in the panel, or on the canvas's handles) is Cancel, never mid-save.
+  const esc = (e) => { if (e.key === "Escape" && !e.defaultPrevented && !busy) { e.preventDefault(); onClose(); } };
+  const dirty = useMemo(() => JSON.stringify(edited) !== JSON.stringify(start), [edited, start]);
+  const panel = (controls, actions, tail) => html`<${SidePanel} title=${tl("title")} dock=${dock} busy=${busy} dirty=${dirty} onClose=${onClose} actions=${actions}
+      fallback=${html`<div class="ol-bar">${controls}<span class="ol-actions">${actions}</span>${tail}</div>`}>
+    <div class="ol-side">${controls}${tail}</div>
+  </${SidePanel}>`;
+  if (stale) {
+    return html`<div class="ol" role="group" aria-label=${tl("title")} onKeyDown=${esc}>
+      ${panel(null, html`<button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button>`,
+        html`<p class="note ol-msg ol-stale" role="status">${stale}</p>`)}
+    </div>`;
+  }
+  const controls = html`<label class="check"><input type="checkbox" class="ol-coords" checked=${coords} onChange=${() => setCoords((v) => !v)} /><span>${tl("coords")}</span></label>
+      <button type="button" class="btn btn-sm ol-add" onClick=${add} disabled=${busy}>${tl("addWaypoint")}</button>
+      <span class="muted ol-sel" aria-live="polite">${selected ? tl("at", selected.label, selected.x, selected.y) : tl("none")}</span>
+      ${nightSel ? html`<button type="button" class="btn btn-sm ol-night-reset" onClick=${() => change(resetNight(edited, base, nightSel))} disabled=${busy}>${tl("nightReset")}</button>` : null}
+      ${wpSel ? html`<button type="button" class="btn btn-sm btn-danger ol-remove" onClick=${() => { change(removeWaypoint(edited, wpSel)); setSel(null); }} disabled=${busy}>${tl("removeWaypoint")}</button>
+        <label class="oo-pick"><span class="oo-pick-label">${tl("joinTo")}</span>
+          <select class="tb-select ol-join-to" value=${joinTo} onChange=${(e) => setJoinTo(e.target.value)}>
+            <option value="">—</option>
+            ${edited.waypoints.filter((w) => w.id !== wpSel).map((w) => html`<option key=${w.id} value=${w.id}>${w.id}</option>`)}
+          </select></label>
+        <button type="button" class="btn btn-sm ol-join" disabled=${busy || !joinTo || joinTo === wpSel} onClick=${() => { change(toggleEdge(edited, wpSel, joinTo)); setJoinTo(""); }}>${tl("join")}</button>
+        <span class="ol-corridors">${edited.edges.filter((e) => e[0] === wpSel || e[1] === wpSel).map((e) => { const other = e[0] === wpSel ? e[1] : e[0];
+          return html`<button key=${edgeKey(e)} type="button" class="btn btn-sm ol-unjoin" data-other=${other} disabled=${busy} onClick=${() => change(toggleEdge(edited, wpSel, other))}>${tl("unjoin", other)}</button>`; })}</span>` : null}`;
+  const actions = html`<button type="button" class="btn btn-sm ol-reset" onClick=${reset} disabled=${busy}>${tl("reset")}</button>
+        <button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button>
+        <button type="button" class="btn btn-sm btn-primary ol-save" onClick=${save} disabled=${busy}>${tl("save")}</button>`;
+  const tail = html`<span class="muted oo-note">${tl("hint")}</span>
+      ${msg ? html`<p class="note ol-msg" role="status">${msg}</p>` : null}`;
+  return html`<div class="ol" role="group" aria-label=${tl("title")} onKeyDown=${esc}>
+    <div class="ol-overlay" ref=${overlay}>
+      <svg ref=${svg} class="ol-svg" viewBox=${`0 0 ${LOGICAL.w} ${LOGICAL.h}`} width="100%" height="100%"
+        onPointerMove=${move} onPointerUp=${up} onPointerCancel=${up} onPointerLeave=${up}>
+        ${grid}
+        ${Object.values(edited.areas).map((a) => html`<rect key=${`a:${a.name}`} class="ol-area" x=${a.rect.x} y=${a.rect.y} width=${a.rect.w} height=${a.rect.h} />`)}
+        ${edited.edges.map((e) => { const p = at.get(e[0]), q = at.get(e[1]); return p && q ? html`<line key=${`e:${edgeKey(e)}`} class="ol-edge" x1=${p.x} y1=${p.y} x2=${q.x} y2=${q.y} />` : null; })}
+        ${handles.filter((h) => h.kind === "night" && !h.inPlace).map((h) => html`<line key=${`nl:${h.key}`} class="ol-night-line" x1=${h.day.x} y1=${h.day.y} x2=${h.x} y2=${h.y} />`)}
+        ${[...handles.filter((h) => h.kind === "night"), ...handles.filter((h) => h.kind !== "night")].map((h) => html`<g key=${h.key} class=${`ol-handle ol-${h.kind}${sel === h.key ? " on" : ""}`} data-handle=${h.key} tabindex="0" role="button"
+            aria-label=${tl("at", h.label, h.x, h.y)} aria-pressed=${sel === h.key ? "true" : "false"}
+            onPointerDown=${down(h.key)} onKeyDown=${keyOn(h)} onFocus=${() => setSel(h.key)}>
+          ${h.kind === "door" ? html`<rect x=${h.x - 9} y=${h.y - 9} width="18" height="18" transform=${`rotate(45 ${h.x} ${h.y})`} />`
+            : h.kind === "furniture" ? html`<rect x=${h.x - 8} y=${h.y - 8} width="16" height="16" />`
+            : h.kind === "night" ? html`<circle cx=${h.x} cy=${h.y} r=${h.inPlace ? 15 : 8} /><path class="ol-moon" d=${h.inPlace ? moonPath(h.x + 10, h.y - 10) : moonPath(h.x, h.y)} />`
+            : html`<circle cx=${h.x} cy=${h.y} r=${h.kind === "seat" ? 9 : 7} />`}
+          ${coords && sel === h.key ? html`<text class="ol-coord" x=${h.x + 12} y=${h.y - 10}>${h.x}, ${h.y}</text>` : null}
+        </g>`)}
+      </svg>
+    </div>
+    ${panel(controls, actions, tail)}
+  </div>`;
+}

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

@@ -6,14 +6,16 @@
 //   office the page makes itself (AUTO_ID, "the whole fleet", built from the teams as the canvas is), whose member
 //   filter is the team / people picker; any other office is the host's (GET /ui/offices, fleet-office-store.js),
 //   checked again here.
-//   TODO(office editor): adding and renaming offices, assigning people, dragging seats and drawing paths is a later
-//   step; it writes the same model through the store's saveOffices().
+//   The office editor (fleet-office-editor.js) adds, renames and deletes offices and picks who is in them; the layout
+//   editor (fleet-office-layout.js, #2513) moves things on a zones skin and keeps them as the office's `overrides`
+//   (fleet-office-pack.js) — both write the same model through the store's saveOffices().
 // - The auto layout: a lobby (General and the instances in no team), then a room per team in fleet.yaml's order, in a
 //   grid that wraps at the stage's width (a phone gets narrower rooms); a desk per member; a corridor graph of waypoints
 //   (each desk's aisle, a spine down each room's left padding, its door, a corridor under each row of rooms and one down
 //   the left margin) that traffic walks along (bfsPath).
 // - Poses come from the org chart's states (fleet-org.js ORG_STATES / orgState); nothing here invents a status.
 import { hue } from "./fleet-traffic.js";
+import { checkLayoutOverrides } from "./fleet-office-pack.js";
 
 // ── Poses: the org chart's states, as a character at a desk ──
 
@@ -115,7 +117,8 @@ export function officeOk(x) {
   if (!x || typeof x !== "object" || typeof x.id !== "string" || !ID.test(x.id) || x.id === AUTO_ID) return null;
   const name = typeof x.name === "string" && x.name.trim() ? x.name.trim().slice(0, 60) : x.id;
   const skin = typeof x.skin === "string" && ID.test(x.skin) ? x.skin : "pixel";
-  return { id: x.id, name, skin, members: nameList(x.members), layout: layoutOk(x.layout) };
+  const ov = x.overrides === undefined ? null : checkLayoutOverrides(x.overrides);
+  return { id: x.id, name, skin, members: nameList(x.members), layout: layoutOk(x.layout), ...(ov && ov.ok ? { overrides: ov.overrides } : {}) };
 }
 /** A stored list of offices: the valid ones, ids unique, at most MAX_OFFICES. */
 export function officesOk(list) {
@@ -196,7 +199,9 @@ export function autoLayout(rooms, { width = 960 } = {}) {
     }
   });
   const right = out.length ? Math.max(...out.map((r) => r.x + r.w)) : 0, bottom = out.length ? Math.max(...out.map((r) => r.y + r.h)) : 0;
-  return { rooms: out, waypoints, edges, width: Math.max(width, right + M), height: bottom + GAP / 2 + M };
+  // As wide as its rooms (rows wrap at `width`): a scene narrower than the stage is centred in it (clampPan), never
+  // left at the stage's left edge with the rest of the stage empty (#2585 B).
+  return { rooms: out, waypoints, edges, width: out.length ? right + M : width, height: bottom + GAP / 2 + M };
 }
 
 /**
@@ -315,7 +320,8 @@ const MAX_SEEN = 2000;
  * The items in the air. `sync(items, now, still)` takes fleet-traffic.js's store items: each new one (a message, a
  * delegation's work, its report coming back) starts one trip from its sender's desk to its receiver's; a delegation with
  * no report (stale) and anything seen before start none; `still` (reduced motion) starts none. `frame(now, L)` the
- * trips under way on layout L: { id, hue, kind, x, y, t }, finished ones dropped; a trip whose desks are not drawn goes.
+ * trips under way on layout L: { id, hue, kind, from, x, y, t } (from: who sent it — a pack can draw it as theirs),
+ * finished ones dropped; a trip whose desks are not drawn goes.
  */
 export function createFlights({ max = FLIGHT.MAX } = {}) {
   const seen = new Set();
@@ -341,7 +347,7 @@ export function createFlights({ max = FLIGHT.MAX } = {}) {
         if (!f.pts) return false;
         const t = (now - f.start) / f.ms;
         if (t >= 1) return false;
-        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, x: p.x, y: p.y, t }); }
+        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
         return true;
       });
       return out;

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

@@ -0,0 +1,167 @@
+// #2554: the Office view's "All offices" — every stored office as a tile on one canvas, side by side, each drawn exactly
+// as its own view would be (its style, its members, seats, poses, bubbles, walking), scaled into its tile. This module
+// is the pure part (fleet-office.js draws it): who is in no office (the lobby tile), where the tiles go, what a point
+// on the overview hits, which tiles are on screen, and the traffic that crosses between tiles.
+//
+// - Shown when at least two offices are stored (overviewOk); an id no stored office can have (ALL_ID: '*' is not an
+//   office id's character), kept per device as any office pick is.
+// - The tiles: each as large as its office's drawn content — a zones scene its 1280×720, a desks office its rooms'
+//   bounds (cropToRooms: an office of three is small) — scaled down to at most CELL_W × CELL_H, never up; a LABEL band
+//   above each (the page's label sits there), GAP apart, M from the edge. Shelf packing in the stored order (the lobby
+//   last): a row takes tiles while they fit a row width, each row as tall as its tallest tile and centred across. The
+//   row width: whichever (of the widths a run of tiles makes) lets the whole overview show largest in the panel (Fit's
+//   contain); a tie keeps the narrower. The same input always gives the same picture.
+// - Traffic between people in different tiles is a straight flight between their seats in overview coordinates
+//   (createCrossFlights); between two people in the same tile it is that tile's own (createFlights, along its corridors).
+import { FLIGHT, along, desksOf, membersOf, pathLength } from "./fleet-office-model.js";
+import { hue } from "./fleet-traffic.js";
+
+/** The switcher's "All offices" value: '*' is never in a stored office's id (fleet-office-model.js officeOk). */
+export const ALL_ID = "*all";
+/** The lobby tile's key: never an office's id. */
+export const LOBBY_TILE = "\u0000lobby";
+/** The overview's geometry, in logical units. */
+export const OV = { CELL_W: 1280, CELL_H: 720, LABEL: 56, GAP: 24, M: 24 };
+
+/** Whether "All offices" is offered: at least two stored offices. */
+export const overviewOk = (stored) => Array.isArray(stored) && stored.length >= 2;
+
+/**
+ * The people in no stored office, in the org chart's order (General, the teams, the rest): the lobby tile's. An office
+ * with no members holds everyone (fleet-office-model.js membersOf), so then nobody is left for the lobby.
+ */
+export function lobbyNodes(stored, view) {
+  const placed = new Set((stored || []).flatMap((o) => membersOf(o, view).map((n) => n.name)));
+  const out = new Map();
+  for (const n of [...view.top, ...view.teams.flatMap((tm) => tm.nodes), ...view.rest.nodes]) if (!placed.has(n.name) && !out.has(n.name)) out.set(n.name, n);
+  return [...out.values()];
+}
+
+/** A scene's scale in its tile: its own size, scaled down to fit a CELL_W × CELL_H cell (never up). */
+export const tileScale = (w, h) => Math.min(1, OV.CELL_W / Math.max(1, w), OV.CELL_H / Math.max(1, h));
+
+/**
+ * A desks layout cropped to its rooms: everything moved so the rooms' bounds start at (0, 0), its size theirs (the
+ * corridors outside the rooms and the margins are not part of a tile). Unchanged when it has no rooms.
+ */
+export function cropToRooms(L) {
+  if (!L.rooms.length) return L;
+  const x0 = Math.min(...L.rooms.map((r) => r.x)), y0 = Math.min(...L.rooms.map((r) => r.y));
+  const x1 = Math.max(...L.rooms.map((r) => r.x + r.w)), y1 = Math.max(...L.rooms.map((r) => r.y + r.h));
+  const mv = (p) => ({ ...p, x: p.x - x0, y: p.y - y0 });
+  return { ...L, rooms: L.rooms.map((r) => ({ ...mv(r), desks: r.desks.map((d) => ({ ...mv(d), seat: mv(d.seat) })) })), waypoints: (L.waypoints || []).map(mv),
+    width: x1 - x0, height: y1 - y0 };
+}
+
+/**
+ * The tiles of `scenes` ([{ key, w, h }], in order) on shelves at most `rowW` wide (a tile wider than that has a row of
+ * its own): each { key, x, y, w, h, s (its scale), label: { x, y, w, h } (the band above it) }; and the overview's size.
+ * Each row is centred across the widest; its tiles stand at its top, under their labels.
+ */
+export function arrangeTiles(scenes, rowW) {
+  const { LABEL, GAP, M } = OV;
+  const rows = [];
+  let row = null;
+  for (const sc of scenes) {
+    const s = tileScale(sc.w, sc.h), it = { key: sc.key, s, w: Math.max(1, sc.w) * s, h: Math.max(1, sc.h) * s };
+    if (!row || row.w + GAP + it.w > rowW + 1e-6) { row = { items: [], w: -GAP, h: 0 }; rows.push(row); }
+    row.items.push(it); row.w += GAP + it.w; row.h = Math.max(row.h, it.h);
+  }
+  const inner = rows.length ? Math.max(...rows.map((r) => r.w)) : 0, tiles = [];
+  let y = M;
+  for (const r of rows) {
+    let x = M + (inner - r.w) / 2;
+    for (const it of r.items) {
+      tiles.push({ key: it.key, x, y: y + LABEL, w: it.w, h: it.h, s: it.s, label: { x, y, w: it.w, h: LABEL } });
+      x += it.w + GAP;
+    }
+    y += LABEL + r.h + GAP;
+  }
+  return { rows: rows.length, rowW, tiles, width: 2 * M + inner, height: rows.length ? y - GAP + M : 2 * M };
+}
+
+/**
+ * The tiles packed for a `size` panel: of the row widths a run of consecutive tiles makes, the one whose overview shows
+ * largest there (min of the two fits); a tie keeps the narrower.
+ */
+export function tileLayout(scenes, size) {
+  const ws = scenes.map((sc) => Math.max(1, sc.w) * tileScale(sc.w, sc.h)), cands = new Set();
+  for (let i = 0; i < ws.length; i++) { let run = -OV.GAP; for (let j = i; j < ws.length; j++) { run += OV.GAP + ws[j]; cands.add(run); } }
+  let best = arrangeTiles(scenes, 0), bestK = -1;
+  for (const rowW of [...cands].sort((a, b) => a - b)) {
+    const a = arrangeTiles(scenes, rowW), k = Math.min(size.w / a.width, size.h / a.height);
+    if (k > bestK + 1e-9) { best = a; bestK = k; }
+  }
+  return best;
+}
+
+/** The tile whose scene holds the overview point (x, y), or null. */
+export const tileAt = (lay, x, y) => lay.tiles.find((t) => x >= t.x && x < t.x + t.w && y >= t.y && y < t.y + t.h) || null;
+/** The tile whose label band holds the overview point, or null. */
+export const labelAt = (lay, x, y) => lay.tiles.find((t) => x >= t.label.x && x < t.label.x + t.label.w && y >= t.label.y && y < t.label.y + t.label.h) || null;
+/** Overview → the tile's own scene units, and back; a box in the scene → the overview. */
+export const inTile = (t, x, y) => ({ x: (x - t.x) / t.s, y: (y - t.y) / t.s });
+export const fromTile = (t, p) => ({ x: t.x + p.x * t.s, y: t.y + p.y * t.s });
+export const tileBox = (t, b) => ({ x: t.x + b.x * t.s, y: t.y + b.y * t.s, w: b.w * t.s, h: b.h * t.s });
+/** The tiles a view ({ k, x, y }) shows any of in a `size` viewport: the rest are not drawn. */
+export function visibleTiles(lay, v, size) {
+  return lay.tiles.filter((t) => {
+    const x = v.x + t.x * v.k, y = v.y + t.y * v.k;
+    return x < size.w && x + t.w * v.k > 0 && y < size.h && y + t.h * v.k > 0;
+  });
+}
+
+/**
+ * A straight flight between two people in different tiles: [the sender's seat, the receiver's] in overview units (the
+ * first tile each is in), or null — when either is drawn nowhere, or some tile holds both (that tile carries it along
+ * its corridors). `parts`: [{ tile, L }] in the tiles' order.
+ */
+export function crossPath(parts, from, to) {
+  let a = null, z = null;
+  for (const p of parts) {
+    const ds = desksOf(p.L), da = ds.find((d) => d.node.name === from), dz = ds.find((d) => d.node.name === to);
+    if (da && dz) return null;
+    if (da && !a) a = fromTile(p.tile, da.seat);
+    if (dz && !z) z = fromTile(p.tile, dz.seat);
+  }
+  return a && z ? [a, z] : null;
+}
+
+const MAX_SEEN = 2000;
+/**
+ * The items in the air between tiles — fleet-office-model.js createFlights's lifecycle (each new item once; none for a
+ * stale delegation or with reduced motion), on crossPath's straight line: `frame(now, parts)` → { id, hue, kind, from, x, y,
+ * t } in overview units; a trip with no crossing (both in one tile, or either gone) is dropped.
+ */
+export function createCrossFlights({ max = FLIGHT.MAX } = {}) {
+  const seen = new Set();
+  let trips = [];
+  return {
+    sync(items, now, still = false) {
+      let k = 0, started = 0;
+      for (const it of items || []) {
+        if (seen.has(it.id)) continue;
+        seen.add(it.id);
+        if (seen.size > MAX_SEEN) seen.delete(seen.values().next().value);
+        if (still || it.phase === "stale") continue;
+        trips.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now + k++ * FLIGHT.STAGGER_MS, parts: null, pts: null, ms: 0 });
+        started++;
+      }
+      if (trips.length > max) trips = trips.slice(trips.length - max);
+      return started;
+    },
+    frame(now, parts) {
+      const out = [];
+      trips = trips.filter((f) => {
+        if (f.parts !== parts) { f.parts = parts; f.pts = crossPath(parts, f.from, f.to); f.ms = f.pts ? Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(f.pts) / FLIGHT.SPEED)) : 0; }
+        if (!f.pts) return false;
+        const t = (now - f.start) / f.ms;
+        if (t >= 1) return false;
+        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
+        return true;
+      });
+      return out;
+    },
+    size: () => trips.length,
+  };
+}

package/dist/ui/fleet-office-pack.d.ts

@@ -0,0 +1,44 @@
+// Types for fleet-office-pack.js: the page's module, which the host imports too (web-office-skins.ts,
+// web-office-store.ts), so both check a skin pack and an office's layout overrides by the same rules.
+/** `dw` × `dh`: its displayed size in logical units (w·scale × h·scale unless the manifest says otherwise). */
+export interface PackStrip { src: string; frames: number; w: number; h: number; fps: number; ax: number; ay: number; dw: number; dh: number }
+export interface PackPoint { x: number; y: number }
+export interface PackArea { name: string; rect: { x: number; y: number; w: number; h: number }; seats: PackPoint[] }
+/** `label` (#2574): its name tag, or null. */
+export interface PackFurniture { id: string; sprite: PackStrip; x: number; y: number; depth: number | "y"; activeWhen: string[] | null; activeSprite: PackStrip | null; label: string | null }
+export interface CheckedPack {
+  format: 1; id: string; scale: number; background?: string; foreground?: string; matte?: string;
+  areas: Record<string, PackArea>; stateZones: Record<string, string> | null; door: PackPoint;
+  waypoints: Array<{ id: string; x: number; y: number }>; edges: Array<[string, string]>;
+  furniture: PackFurniture[]; characters: Record<string, Record<string, PackStrip>>; byInstance: Record<string, string>;
+  props: Record<string, PackStrip>; bubbles: Record<string, Record<string, string[]>>;
+  room: { floor?: string; wall?: string }; desk: { back?: string; front?: string; lit?: string };
+}
+export interface LayoutOverrides {
+  pack: string;
+  seats?: Record<string, Array<[number, number]>>;
+  furniture?: Record<string, [number, number]>;
+  /** #2665: an item's night place (an item with a `night` only). */
+  furnitureNight?: Record<string, [number, number]>;
+  door?: [number, number];
+  waypoints?: Array<{ id: string; x: number; y: number }>;
+  edges?: Array<[string, string]>;
+}
+export const LOGICAL: { w: number; h: number };
+export const CHAR_DEPTH: number;
+export const PACK_STATES: string[];
+export function own<T = unknown>(o: unknown, k: unknown): T | undefined;
+export function inherited(k: unknown): boolean;
+export function matteOk(v: unknown): v is string;
+export function checkStrip(v: unknown, at?: string, scale?: number): PackStrip;
+export function checkSkinPack(x: unknown, opts?: { kept?: boolean }): { ok: true; pack: CheckedPack } | { ok: false; error: string };
+export function skinPackOk(x: unknown): CheckedPack | null;
+export function packImages(pack: CheckedPack): string[];
+export function packStrips(pack: CheckedPack): Array<{ at: string; strip: PackStrip }>;
+export function checkLayoutOverrides(x: unknown): { ok: true; overrides: LayoutOverrides } | { ok: false; error: string };
+export function applyOverrides(pack: CheckedPack, ov: LayoutOverrides | null | undefined): { ok: true; pack: CheckedPack } | { ok: false; error: string };
+export function fitNight<T extends LayoutOverrides | null | undefined>(pack: CheckedPack, ov: T): T;
+export function overridesBetween(pack: CheckedPack, edited: CheckedPack): LayoutOverrides | null;
+export function poseStrip(set: Record<string, PackStrip> | null | undefined, pose: string, heading?: { dx: number; dy: number } | null): { strip: PackStrip; mirror: boolean } | null;
+export function walkStrip(f: { walk?: Record<string, PackStrip> | null; walking?: boolean; heading?: { dx: number; dy: number } | null } | null | undefined): { strip: PackStrip; mirror: boolean } | null;
+export function stripBox(st: PackStrip, x: number, y: number, mirror?: boolean): { x: number; y: number; w: number; h: number };