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

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

@@ -4,13 +4,23 @@
 // 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.
+//
+// #2691: a selected seat lists the office's members under "Reserved for" (several may be picked) and "Lend when
+// away": whoever it is for takes it first, and nobody else does unless it is lent while they are all elsewhere
+// (fleet-office-zones.js assignSeats). Saved as the overrides' `seatFor` by area and slot; a reserved seat's handle
+// is ringed.
+//
 // 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, useRef, useState } from "/assets/app-html.js";
+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", {
@@ -18,7 +28,9 @@ register("orgl", {
     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}", door: "Door", waypoint: "Waypoint {0}", at: "{0} at {1}, {2}",
+    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",
+    seatFor: "Seat {0} in {1}, reserved for {2}", reservedFor: "Reserved for", lend: "Lend when away", nobody: "No members to pick.",
     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.",
@@ -27,7 +39,9 @@ register("orgl", {
     edit: "編輯配置", title: "編輯配置", coords: "顯示座標", addWaypoint: "新增路徑點", removeWaypoint: "移除路徑點",
     joinTo: "連到", join: "連接", unjoin: "取消連接 {0}", corridors: "走道", none: "尚未選取：請選座位、家具、門或路徑點。",
     reset: "還原成 pack 的配置", save: "儲存配置", cancel: "取消", saved: "配置已儲存。", hint: "拖曳，或用方向鍵移動（Shift：一次 10）。",
-    seat: "{1} 的座位 {0}", furniture: "家具 {0}", door: "門", waypoint: "路徑點 {0}", at: "{0}，位置 {1}, {2}",
+    seat: "{1} 的座位 {0}", furniture: "家具 {0}", night: "家具 {0}（夜間）", door: "門", waypoint: "路徑點 {0}", at: "{0}，位置 {1}, {2}",
+    nightReset: "回到 pack 的夜間位置",
+    seatFor: "{1} 的座位 {0}，保留給 {2}", reservedFor: "保留給", lend: "不在時借給別人", nobody: "沒有可選的成員。",
     changed: "有人在這期間修改了辦公室。你的配置已保留：再按一次儲存，會套用到目前的清單。",
     failed: "配置沒有儲存（{0}）。", rateLimited: "儲存太頻繁，請一分鐘後再試。",
     stale: "這個辦公室在這期間被移除，或它的風格已改變：這份配置無法再儲存。按取消關閉。",
@@ -38,11 +52,24 @@ 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)));
-/** Every handle on a pack: { key, kind, label, x, y } — seats by area, furniture, the door, the waypoints. */
+/** 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 (#2691: `for` and `lend` when reserved),
+ * 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 [name, a] of Object.entries(pack.areas)) a.seats.forEach((s, i) => out.push({ key: `seat:${name}:${i}`, kind: "seat",
+    label: s.for && s.for.length ? tl("seatFor", i + 1, name, s.for.join(", ")) : tl("seat", i + 1, name), x: s.x, y: s.y,
+    ...(s.for && s.for.length ? { for: [...s.for], lend: s.lend === true } : {}) }));
   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;
@@ -55,9 +82,10 @@ export function moveHandle(pack, key, x, y) {
     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)) } } };
+    return { ...pack, areas: { ...pack.areas, [a]: { ...area, seats: area.seats.map((s, j) => (j === i ? { ...s, ...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;
@@ -80,12 +108,35 @@ export function toggleEdge(pack, a, b) {
   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)) };
+}
+/**
+ * #2691: seat `key` ("seat:<area>:<i>") reserved for `names` (in that order, none twice), lent while they are all
+ * elsewhere when `lend`; no names: a plain seat again.
+ */
+export function reserveSeat(pack, key, names, lend = false) {
+  const [kind, a, b] = key.split(":");
+  const area = kind === "seat" ? own(pack.areas, a) : null, i = Number(b);
+  if (!area || !area.seats[i]) return pack;
+  const list = [...new Set(names)];
+  const seat = (s) => { const { for: _f, lend: _l, ...p } = s; return list.length ? { ...p, for: list, lend: lend === true } : p; };
+  return { ...pack, areas: { ...pack.areas, [a]: { ...area, seats: area.seats.map((s, j) => (j === i ? seat(s) : s)) } } };
+}
 /** 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] };
 
 /**
@@ -94,9 +145,10 @@ const KEY_STEP = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], Arr
  * 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.
+ * office or its style changed underneath the session — no handles, nothing to save, only Cancel. `members` (#2691):
+ * the office's instances' names, offered under a selected seat's "Reserved for".
  */
-export function LayoutEditor({ base, start, place = null, stale = "", onChange, onSave, onClose }) {
+export function LayoutEditor({ base, start, place = null, stale = "", dock = true, members = [], onChange, onSave, onClose }) {
   const [edited, setEdited] = useState(start);
   const [sel, setSel] = useState(null);
   const [coords, setCoords] = useState(true);
@@ -130,6 +182,14 @@ export function LayoutEditor({ base, start, place = null, stale = "", onChange,
   };
   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 seatSel = selected && selected.kind === "seat" ? selected : null;
+  // #2691: the members to pick from, and anyone the seat is already for who is not one now (so they can be unpicked).
+  const pickable = seatSel ? [...new Set([...members, ...(seatSel.for || [])])] : [];
+  const pickFor = (name) => {
+    const now = seatSel.for || [], next = now.includes(name) ? now.filter((n) => n !== name) : [...now, name];
+    change(reserveSeat(edited, seatSel.key, next, next.length ? seatSel.lend === true : false));
+  };
   const save = async () => {
     if (busy) return;
     setBusy(true); setMsg("");
@@ -149,49 +209,64 @@ export function LayoutEditor({ base, start, place = null, stale = "", onChange,
   }
   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")}><div class="ol-bar">
-      <p class="note ol-msg ol-stale" role="status">${stale}</p>
-      <span class="ol-actions"><button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button></span>
-    </div></div>`;
+    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>`;
   }
-  return html`<div class="ol" role="group" aria-label=${tl("title")}>
+  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>
+      ${seatSel ? html`<fieldset class="ol-for"><legend class="oo-pick-label">${tl("reservedFor")}</legend>
+          ${pickable.length ? pickable.map((n) => html`<label key=${n} class="check"><input type="checkbox" class="ol-for-pick" value=${n} checked=${(seatSel.for || []).includes(n)}
+            disabled=${busy} onChange=${() => pickFor(n)} /><span>${n}</span></label>`) : html`<span class="muted">${tl("nobody")}</span>`}
+        </fieldset>
+        <label class="check"><input type="checkbox" class="ol-lend" checked=${seatSel.lend === true} disabled=${busy || !(seatSel.for || []).length}
+          onChange=${() => change(reserveSeat(edited, seatSel.key, seatSel.for || [], !(seatSel.lend === true)))} /><span>${tl("lend")}</span></label>` : null}
+      ${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.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"
+        ${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}${h.for ? " reserved" : ""}${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)} />`
+            : h.kind === "seat" && h.for ? html`<circle class="ol-for-ring" cx=${h.x} cy=${h.y} r="13" /><circle cx=${h.x} cy=${h.y} r="9" />`
             : 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>
-    <div class="ol-bar">
-      <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>
-      ${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}
-      <span class="ol-actions">
-        <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>
-      </span>
-      <span class="muted oo-note">${tl("hint")}</span>
-      ${msg ? html`<p class="note ol-msg" role="status">${msg}</p>` : null}
-    </div>
+    ${panel(controls, actions, tail)}
   </div>`;
 }

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

@@ -199,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 };
 }
 
 /**
@@ -318,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();
@@ -344,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

@@ -3,8 +3,11 @@
 /** `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[] }
-export interface PackFurniture { id: string; sprite: PackStrip; x: number; y: number; depth: number | "y"; activeWhen: string[] | null; activeSprite: PackStrip | null }
+/** #2691: a seat reserved for `for` (lent while they are all elsewhere when `lend`); a plain seat has neither. */
+export interface PackSeat extends PackPoint { for?: string[]; lend?: boolean }
+export interface PackArea { name: string; rect: { x: number; y: number; w: number; h: number }; seats: PackSeat[] }
+/** `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;
@@ -17,6 +20,10 @@ 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]>;
+  /** #2691: a seat's reservation by area and slot ("0", "1", …), in place of the pack's; `for: []` is none. */
+  seatFor?: Record<string, Record<string, { for: string[]; lend: boolean }>>;
   door?: [number, number];
   waypoints?: Array<{ id: string; x: number; y: number }>;
   edges?: Array<[string, string]>;
@@ -28,12 +35,15 @@ 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): { ok: true; pack: CheckedPack } | { ok: false; error: string };
+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 fitSeatFor<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 };