@songsid/agend 2.3.2-beta.8 → 2.3.2

package/dist/ui/fleet-office.js

@@ -15,7 +15,8 @@
 //   goes through the same view transform.
 // - Speech bubbles: now and then a short line for its state (typed out; at once with reduced motion) — the page's own
 //   lines or the skin's, never anything an agent said. Furniture can react: an item with `activeWhen` animates while
-//   anyone shown is in that state.
+//   anyone shown is in that state — or (#2698, "activeOn": "seated") once its person sits down; one that "hides" its
+//   people carries their name tags and bubbles while it is active, and hovering it hits them (furnitureAt).
 // - Each occupant is a little pixel person in a pose that loops a few frames: working (typing, the lamp on), idle (tea),
 //   paused or stopped (asleep, a closed sign), needs you / crashed / looks stuck (a hand up, a blinking light).
 // - Traffic: each new message, delegation or report is an item carried from the sender's desk to the receiver's along
@@ -59,22 +60,24 @@ import { appStore } from "/assets/app-store.js";
 import { t, lang, register } from "/assets/app-i18n.js";
 import { identityOf } from "/assets/identity-color.js";
 import { Icon } from "/assets/ui-icons.js";
-import { nodeText } from "./fleet-org.js";
+import { nodeText, stateWords } from "./fleet-org.js";
 import { hits, needle } from "./fleet-canvas-layout.js";
 import { AUTO_ID, LOBBY, autoLayout, backingScale, coatOf, createFlights, customLayout, deskAt, desksOf, filterOk, lampOf, layoutOk, lightOf, membersOf,
   officePose, officeRooms, signOf, workOn } from "./fleet-office-model.js";
 import { BUILT_IN_SKINS, CHAR_DEPTH, DEFAULT_PAL, bubbleBox, loadCozySkin, loadPackSkin, modeOf, skinFor, tagBox } from "./fleet-office-skin.js";
-import { CALLING, activeFurniture, bubbleAt, bubbleRank, NIGHT, WANDER, createMail, createWalkers, isNight, linesFor, npcKey, personAt, placeBubbles, thinBubbles, walkTargets, zonesLayout } from "./fleet-office-zones.js";
+import { CALLING, activeFurniture, bubbleAt, hiddenBy, bubbleRank, NIGHT, WANDER, createMail, createWalkers, isNight, linesFor, npcKey, personAt, placeBubbles, thinBubbles, walkTargets, zonesLayout } from "./fleet-office-zones.js";
 import { actsOk, createOfficeStore } from "./fleet-office-store.js";
+import { badgeOf, fixedOf } from "./fleet-office-levels.js";
+import { OfficeCard, cardModel } from "./fleet-office-card.js";
 import { POLL_MS } from "./fleet-traffic.js";
 import { OfficeEditor, officeForSave } from "./fleet-office-editor.js";
 import { LayoutEditor, handlesOf } from "./fleet-office-layout.js";
 import { ShareButton } from "./office-share-dialog.js";
-import { applyOverrides } from "./fleet-office-pack.js";
+import { applyOverrides, fitNight, fitSeatFor, stripBox } from "./fleet-office-pack.js";
 import { ALL_ID, LOBBY_TILE, OV, createCrossFlights, cropToRooms, fromTile, inTile, labelAt, lobbyNodes, overviewOk, tileAt, tileBox, tileLayout, visibleTiles } from "./fleet-office-overview.js";
 import { centreOn, gestureState, gestures, miniPoint, toScreen, toWorld, wheelFactor, zoomKey, zoomTo } from "./fleet-canvas-view.js";
 import { OK_MAX, OK_MIN, clampPan, desksK, edgeMatte, edgeStrips, fitScene, layerScale, miniBox, miniFrame, openingView, pinchOffice, savedOf, stepK, viewFromSaved,
-  zoomLabel, zoomOffice } from "./fleet-office-view.js";
+  wholeInView, zoomLabel, zoomOffice } from "./fleet-office-view.js";
 
 register("orgo", {
   en: {
@@ -88,6 +91,8 @@ register("orgo", {
     b_paused: "Zzz…|Back later", b_stopped: "Off duty|Zzz…", b_needs: "Need you!|A question for you|Over here!",
     b_crashed: "Ouch, crashed|Help!", b_stuck: "Hmm, stuck?|Still thinking…",
     hideAsleep: "Hide paused and stopped", nightOn: "Bedtime 0–6: the idle sleep", layoutIgnored: "Its saved layout does not fit this style: drawn as the style's own.",
+    styleForAll: "The whole fleet's style, for everyone: every device and share link", styleHere: "The whole fleet's style in this browser",
+    styleFailed: "The style was not saved for everyone ({0}).", styleBusy: "Too many changes. Try again in a minute.",
     fit: "Fit the office", overview: "Overview: click to move there", fullscreen: "Fullscreen", exitFullscreen: "Exit fullscreen",
     fill: "Fill", fillTitle: "Fill the panel (the scene's overflow is cropped; drag to see it)", zoomLevel: "Zoom {0}",
     allOffices: "All offices", labelAll: "All offices: each office is a tile, drawn in its own style. Drag to pan; the wheel, a pinch, + and − zoom, 0 fits, F is fullscreen. Double-click a tile to open that office.",
@@ -104,6 +109,8 @@ register("orgo", {
     b_paused: "Zzz…|晚點回來", b_stopped: "下班了|Zzz…", b_needs: "需要你！|有個問題|在這裡！",
     b_crashed: "糟糕，當掉了|救命！", b_stuck: "嗯，卡住了？|還在想…",
     hideAsleep: "隱藏暫停與停止的成員", nightOn: "0–6 點就寢：閒著的人去睡", layoutIgnored: "它儲存的配置不適用這個風格：以風格本身的配置顯示。",
+    styleForAll: "整個 fleet 的風格，所有人共用：每台裝置與分享連結都一樣", styleHere: "這個瀏覽器裡整個 fleet 的風格",
+    styleFailed: "風格沒有替所有人儲存（{0}）。", styleBusy: "變更太頻繁，請一分鐘後再試。",
     fit: "顯示整個辦公室", overview: "總覽：點一下移到那裡", fullscreen: "全螢幕", exitFullscreen: "結束全螢幕",
     fill: "填滿", fillTitle: "填滿整個面板（超出的部分會被裁切，拖曳即可看到）", zoomLevel: "縮放 {0}",
     allOffices: "所有辦公室", labelAll: "所有辦公室：每間辦公室是一格，以它自己的風格顯示。拖曳平移；滾輪、雙指、+ 和 − 縮放，0 顯示全部，F 切換全螢幕。雙擊一格即可開啟那間辦公室。",
@@ -147,6 +154,14 @@ function sampledMatte(img) {
   return m;
 }
 const now = () => (typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now());
+/** #2661: how often the levels are read again while the Office is shown (the host reuses them for a minute). */
+const LEVELS_MS = 60_000;
+/** #2661: how long a level-up's ring shows. */
+const UP_MS = 1800;
+/** #2661: Find in office zooms in to at least this (CSS px a logical unit). */
+const FIND_K = 2;
+/** #2661: below this stage width (CSS px) the card is a bottom sheet. */
+const SHEET_W = 560;
 /** How often the picture can change when nothing is in the air (the poses loop at 4 fps; a bubble types faster). */
 const FPS = 12;
 const STYLES = BUILT_IN_SKINS;
@@ -166,6 +181,7 @@ function readPal(el) {
     bg: v("--bg", D.bg), surface: v("--surface", D.surface), surface2: v("--surface-2", D.surface2), border: v("--border", D.border),
     text: v("--text", D.text), text2: v("--text-2", D.text2), text3: v("--text-3", D.text3), ok: v("--ok", D.ok), warn: v("--warn", D.warn),
     danger: v("--danger", D.danger), focus: v("--focus", D.focus),
+    accent: v("--accent", D.accent), accentDim: v("--accent-dim", D.accentDim), okBg: v("--ok-bg", D.okBg), warnBg: v("--warn-bg", D.warnBg), dangerBg: v("--danger-bg", D.dangerBg),
     fx: { task: v("--fx-task", D.fx.task), send: v("--fx-send", D.fx.send), report: v("--fx-report", D.fx.report), broadcast: v("--fx-broadcast", D.fx.broadcast) },
   };
 }
@@ -178,22 +194,26 @@ function teamOptions(view) {
 
 // ── A scene: one office's layout, looks and skin, drawn by itself (the single view) or as a tile (All offices, #2554) ──
 
-/** What each desk shows: the pose, the light, the coat; dimmed when the Find box matches someone else. */
-function looksOf(L, work, q, mode, zones) {
+/**
+ * What each desk shows: the pose, the light, the coat; dimmed when the Find box matches someone else; #2661: its level
+ * badge (`badge(name)`: fleet-office-levels.js badgeOf, or nothing).
+ */
+function looksOf(L, work, q, mode, zones, badge = () => null) {
   return new Map(L.rooms.flatMap((r) => r.desks).map((d) => {
     const n = d.node;
     if (!n) return [d.key, { name: "", label: "", state: "missing", pose: "away", light: null, lamp: false, sign: null, coat: "", work: 0, dim: !!q, match: false, free: zones }];
     const match = !!q && hits(n, q);
     // At night (#2568) the idle are drawn asleep (their state stays idle: the tooltip and the list say so).
     return [d.key, { name: n.name, label: nodeText(n).primary, state: n.state, pose: officePose(d.night ? "paused" : n.state), night: !!d.night, light: lightOf(n.state), lamp: lampOf(n.state),
-      sign: zones ? null : signOf(n.state), coat: coatOf(n.i, n.i ? identityOf(n.i) : null, mode), work: work.get(n.name) || 0, dim: !!q && !match, match, free: zones }];
+      sign: zones ? null : signOf(n.state), coat: coatOf(n.i, n.i ? identityOf(n.i) : null, mode), work: work.get(n.name) || 0, dim: !!q && !match, match, free: zones,
+      badge: badge(n.name) }];
   }));
 }
 /** A stored office's own layout on a zones style (its overrides); `ignored`: they do not fit this style. */
 function withOverrides(baseSkin, zones, office) {
   const ov = zones && office ? office.overrides : null;
   if (!ov || ov.pack !== baseSkin.id) return { skin: baseSkin, ignored: false };
-  const a = applyOverrides(baseSkin.pack, ov);
+  const a = applyOverrides(baseSkin.pack, fitSeatFor(baseSkin.pack, fitNight(baseSkin.pack, ov)));    // #2665/#2691: a night place or seat the pack lost: left out
   return a.ok ? { skin: { ...baseSkin, pack: a.pack }, ignored: false } : { skin: baseSkin, ignored: true };
 }
 /** A stored office's scene (or the lobby tile's): seats in its style's areas, its own seats, or one room wrapping at `deskW`. */
@@ -203,14 +223,56 @@ function officeScene(office, nodes, skin, zones, deskW, prevSeats, night = false
   return lay ? customLayout({ ...office, layout: lay }, nodes) : autoLayout([{ key: office.id, name: office.name, lobby: !!office.lobby, nodes }], { width: deskW });
 }
 /** What drawPart needs of a scene; its layers are painted on first draw (and again at another resolution). */
-function partOf(L, looks, skin, zones, walkers, flights) {
+export function partOf(L, looks, skin, zones, walkers, flights) {
   const all = L.rooms.flatMap((r) => r.desks);
   const shown = new Set([...looks.values()].map((l) => l.state)), byName = new Map([...looks.values()].filter((l) => l.name).map((l) => [l.name, l.state]));
-  return { L, looks, skin, zones, walkers, flights, all, desks: all.filter((d) => d.node), layers: null,
+  // #2661: each desk's room (Desks: who is in the same area as a level-up, drawPart).
+  const roomOf = new Map(L.rooms.flatMap((r) => r.desks.map((d) => [d.key, r.key])));
+  return { L, looks, skin, zones, walkers, flights, all, desks: all.filter((d) => d.node), layers: null, roomOf,
     active: zones ? activeFurniture(skin.pack, shown, byName) : new Set(), lines: bubbleDefaults(), lang: lang() };
 }
-/** At bedtime (#2568): each item with a `night` drawn as it — its strip playing, at its night place (its own when none). */
+/**
+ * At bedtime (#2568): each item with a `night` drawn as it — its strip playing, at its night place: the office's
+ * (Edit layout, #2665: applyOverrides puts it on `night`), else the pack's night x/y, else its (moved) day place.
+ */
 export const nightFurniture = (list) => list.map((f) => (f.night ? { ...f, sprite: f.night.sprite, activeSprite: null, x: f.night.x ?? f.x, y: f.night.y ?? f.y, asleep: true } : f));
+/** #2698: where someone is at `t` against their seat: "walking"; "seated" (still, at the seat zones gave them — or no
+ * walker yet: drawn there); "standing" (still elsewhere: a stroll's spot, an act's point, the seat left before a walk). */
+const postureAt = (p, t) => {
+  const seats = new Map(p.all.filter((d) => d.node).map((d) => [d.node.name, d.seat]));
+  return (name) => {
+    const at = p.walkers && p.walkers.at(name, t), s = seats.get(name);
+    if (!at) return "seated";
+    if (at.walking) return "walking";
+    return s && Math.abs(at.x - s.x) < 1 && Math.abs(at.y - s.y) < 1 ? "seated" : "standing";
+  };
+};
+/**
+ * The furniture active at `t` and who is drawn on an item instead of themselves (`hidden`: name → item id). A pack
+ * with no "activeOn": "seated" nor "hides" (#2698): the scene's `active`, as before, and nobody hidden; else worked out
+ * from where everyone is at `t` (their walkers). An item asleep at bedtime (a `night`) hides nobody.
+ */
+export function furnitureAt(p, t) {
+  const pk = p.zones && p.skin && p.skin.pack, list = (pk && pk.furniture) || [];
+  if (!list.some((f) => f.activeOn === "seated" || f.hides)) return { active: p.active || new Set(), hidden: new Map() };
+  const looks = [...p.looks.values()], byName = new Map(looks.filter((l) => l.name).map((l) => [l.name, l.state]));
+  const posture = postureAt(p, t), active = activeFurniture(pk, new Set(looks.map((l) => l.state)), byName, posture);
+  const hidden = hiddenBy(pk, active, byName, posture);
+  if (p.night) for (const [n, id] of [...hidden]) if (list.some((f) => f.id === id && f.night)) hidden.delete(n);
+  return { active, hidden };
+}
+/** #2698: the box an item hiding its people is hit in — its active picture, down to its name tags' row. */
+const hidingBox = (f) => {
+  const b = stripBox(f.activeSprite || f.sprite, f.x, f.y);
+  return { ...b, h: Math.max(b.h, f.y + 17 - b.y) };
+};
+/** #2698: name tags in one row centred on (x, y) — each { look, x } (its centre), TAG_GAP apart. */
+const TAG_GAP = 4;
+export function tagRow(ctx, x, y, looks) {
+  const ws = looks.map((l) => tagBox(ctx, x, y, l.label).w), total = ws.reduce((a, w) => a + w, 0) + TAG_GAP * Math.max(0, ws.length - 1);
+  let left = x - total / 2;
+  return looks.map((look, i) => { const cx = Math.round(left + ws[i] / 2); left += ws[i] + TAG_GAP; return { look, x: cx }; });
+}
 /** #2596: each NPC with a `walk` where its walker is now (`at(key)`): moved there — its tag and depth with it — and, while
  * it walks, `walking` and its `heading` (its walk strip: walkStrip); asleep, or with no walker (not strolling), where it is. */
 export const strollFurniture = (list, at) => list.map((f) => {
@@ -238,6 +300,8 @@ export function ghostsOf(pack, people = []) {
   }
   return out;
 }
+/** #2665: Edit layout's faint night places by day — each item with a `night` as it is drawn at bedtime (nightFurniture). */
+export const nightGhostsOf = (pack) => nightFurniture(pack.furniture.filter((f) => f.night));
 /** All offices: the tile `name` is drawn in ({ tile, skin }), or null. */
 const senderTile = (parts, name) => (name ? parts.find((p) => desksOf(p.L).some((d) => d.node.name === name)) || null : null);
 /**
@@ -304,7 +368,7 @@ function paintLayers(p, env, ls, tagsOff = false) {
  * hovered (its name tag shows even in a crowd); `tagsOff` (#2554: a tile too small to read them): the name tags show
  * only for the one hovered and the Find box's matches. Whether anything in it is moving (in the air, or someone walking).
  */
-function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer = null) {
+export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer = null) {
   const sk = p.skin;
   const ls = layerScale(a, p.L.width, p.L.height);
   if (!p.layers || p.layers.ls !== ls || p.layers.tagsOff !== tagsOff) p.layers = paintLayers(p, env, ls, tagsOff);
@@ -321,7 +385,7 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
     // Furniture under the people; the people (nearest last) with the furniture whose depth is "y" among them, by base
     // y (a tie: the item first, the person in front); furniture over them; things in the air; the pack's foreground
     // (door frames, pillars, table fronts); then what must stay readable: crowd counts and name tags (bubbles below).
-    const t = ms > 0 ? ms : now();
+    const t = ms > 0 ? ms : now(), live = furnitureAt(p, t);
     const people = p.desks.map((d) => {
       const at = p.walkers.at(d.node.name, t) || { ...d.seat, walking: false };
       if (at.walking) walking = true;
@@ -330,13 +394,17 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
     const furniture = strollFurniture(p.night ? nightFurniture(sk.pack.furniture) : sk.pack.furniture, (k) => p.walkers.at(k, t));
     if (furniture.some((f) => f.walking)) walking = true;
     const band = [...furniture.filter((f) => f.depth === "y").map((f) => ({ y: f.y, k: 0, f })), ...people.map((q) => ({ y: q.at.y, k: 1, p: q })),
-      ...(p.ghosts ? ghostsOf(sk.pack, people).map((g) => ({ y: g.y, k: 1, g })) : [])]
+      ...(p.ghosts ? ghostsOf(sk.pack, people).map((g) => ({ y: g.y, k: 1, g })) : []),
+      // #2665: by day, each item's night place too (at night the items are there already).
+      ...(p.ghosts && !p.night ? nightGhostsOf(sk.pack).map((n) => ({ y: n.y, k: 1, n })) : [])]
       .sort((x, y) => x.y - y.y || x.k - y.k);
-    for (const f of furniture) if (f.depth !== "y" && f.depth < CHAR_DEPTH) sk.drawFurniture(ctx, f, f.asleep || p.active.has(f.id), ms, env);
+    for (const f of furniture) if (f.depth !== "y" && f.depth < CHAR_DEPTH) sk.drawFurniture(ctx, f, f.asleep || live.active.has(f.id), ms, env);
     for (const it of post) if (it.t === 0) sk.drawProp(ctx, it, ms, env);        // a letter on the floor: under the people
-    for (const { f, p: q, g } of band) {
-      if (f) { sk.drawFurniture(ctx, f, f.asleep || p.active.has(f.id), ms, env); continue; }
+    for (const { f, p: q, g, n } of band) {
+      if (f) { sk.drawFurniture(ctx, f, f.asleep || live.active.has(f.id), ms, env); continue; }
+      if (n) { ctx.save(); ctx.globalAlpha = GHOST_ALPHA; sk.drawFurniture(ctx, n, true, 0, env); ctx.restore(); continue; }
       if (g) { ctx.save(); ctx.globalAlpha = GHOST_ALPHA; sk.drawCharacter(ctx, { x: g.x - 44, y: g.y - 53, w: 88, h: 53, seat: g }, g.look, 0, env); ctx.restore(); continue; }
+      if (live.hidden.has(q.look.name)) continue;                          // #2698: drawn as the item (never while walking)
       const box = { ...q.d, x: q.at.x - 44, y: q.at.y - 53, w: 88, h: 53, seat: { x: q.at.x, y: q.at.y } };
       // An agent's own pose (office_set, #2578) while its act lasts and nothing calls it; walking is walking.
       const posed = actPosed(p, q.look);
@@ -344,7 +412,7 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
       sk.drawCharacter(ctx, box, look, ms, env);
       if (!q.at.walking) speakers.push({ look: q.look, ...speakerAt(sk, look, q.at), area: q.d.area });
     }
-    for (const f of furniture) if (f.depth !== "y" && f.depth >= CHAR_DEPTH) sk.drawFurniture(ctx, f, f.asleep || p.active.has(f.id), ms, env);
+    for (const f of furniture) if (f.depth !== "y" && f.depth >= CHAR_DEPTH) sk.drawFurniture(ctx, f, f.asleep || live.active.has(f.id), ms, env);
     for (const it of up) sk.drawProp(ctx, it, ms, env);
     for (const it of post) if (it.t > 0) sk.drawProp(ctx, it, ms, env);
     if (sk.drawForeground) sk.drawForeground(ctx, p.L, env);
@@ -352,21 +420,62 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
     for (const [ar, n] of p.L.crowd || []) if (p.L.areas[ar] && sk.drawCrowd) sk.drawCrowd(ctx, p.L.areas[ar], n, env);
     // In an area over capacity the name tags show on hover or focus only (#2513: a crowd's tags covered each other).
     const over = p.L.over || new Set();
+    const tagged = (q) => !((tagsOff || over.has(q.d.area)) && q.d.key !== hot && !q.look.match);
     for (const q of people) {
-      if ((tagsOff || over.has(q.d.area)) && q.d.key !== hot && !q.look.match) continue;
+      if (live.hidden.has(q.look.name) || !tagged(q)) continue;
       sk.drawTag(ctx, q.at.x, q.at.y, q.look, env);
       tags.push(tagBox(ctx, q.at.x, q.at.y, q.look.label));
     }
     // A furniture item's own name (#2574: an NPC drawn as furniture), tagged like a person; none on a tile too small to read.
-    if (!tagsOff) for (const f of furniture) if (f.label) { sk.drawTag(ctx, f.x, f.y, { label: f.label }, env); tags.push(tagBox(ctx, f.x, f.y, f.label)); }
+    // #2698: an item hiding its people carries their tags too, in one row at its tag point (its own first; each keeps
+    // its place in the row while another's tag is left out), and their bubbles, over its picture. The tags drawn are
+    // kept on the scene (`heldTags`): hitPart hits each person on theirs, past the picture's edge too (#2699 review).
+    const held = [];
+    for (const f of furniture) {
+      const on = people.filter((q) => live.hidden.get(q.look.name) === f.id);
+      if (!on.length) {
+        if (!tagsOff && f.label) { const nl = npcLook(p, f); sk.drawTag(ctx, f.x, f.y, nl, env); tags.push(tagBox(ctx, f.x, f.y, nl.label)); }
+        continue;
+      }
+      const order = new Map((f.activeFor || []).map((n, i) => [n, i]));
+      on.sort((x, y) => (order.get(x.look.name) ?? 0) - (order.get(y.look.name) ?? 0));
+      const row = tagRow(ctx, f.x, f.y, [...(f.label ? [npcLook(p, f)] : []), ...on.map((q) => q.look)]);
+      const top = f.sprite ? Math.min(f.y - 50, stripBox(f.activeSprite || f.sprite, f.x, f.y).y + 2) : f.y - 50;
+      for (const [i, r] of row.entries()) {
+        const q = f.label ? on[i - 1] : on[i];
+        if (q) speakers.push({ look: q.look, x: r.x + 10, y: top, area: q.d.area });
+        if (q ? !tagged(q) : tagsOff) continue;
+        sk.drawTag(ctx, r.x, f.y, r.look, env);
+        const box = tagBox(ctx, r.x, f.y, r.look.label);
+        tags.push(box);
+        if (q) held.push({ name: q.look.name, id: f.id, box });
+      }
+    }
+    p.heldTags = held;
   } else {
-    for (const d of p.desks) { const look = p.looks.get(d.key); sk.drawCharacter(ctx, d, actPosed(p, look), ms, env); speakers.push({ look, x: d.x + 58, y: d.y + 12 }); }
+    for (const d of p.desks) { const look = p.looks.get(d.key); sk.drawCharacter(ctx, d, actPosed(p, look), ms, env); speakers.push({ look, x: d.x + 58, y: d.y + 12, area: p.roomOf.get(d.key) ?? null }); }
     blit(p.layers.front);
     // Tags left out of the layer: the hovered desk's front again, with its tag.
     const hd = tagsOff && hot ? p.desks.find((d) => d.key === hot) : null;
     if (hd) sk.drawDeskFront(ctx, hd, p.looks.get(hd.key), env);
     for (const it of up) sk.drawProp(ctx, it, ms, env);
   }
+  // #2661: a level up — a short ring over the head (UP_MS), and the people in the same area (a room's on Desks) glance
+  // over: a small "!" over theirs. Never with reduced motion (no loop: ms 0).
+  const rising = ms && p.ups && p.ups.size ? speakers.filter((sp) => { const t0 = p.ups.get(sp.look.name); return t0 !== undefined && now() - t0 < UP_MS; }) : [];
+  for (const sp of rising) {
+    const f = (now() - p.ups.get(sp.look.name)) / UP_MS;
+    ctx.save();
+    ctx.globalAlpha = 1 - f;
+    ctx.strokeStyle = env.pal.warn; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.arc(sp.x, sp.y - 8, 6 + f * 14, 0, Math.PI * 2); ctx.stroke();
+    ctx.fillStyle = env.pal.text; ctx.font = "700 9px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "bottom";
+    for (const o of speakers) {
+      if (o === sp || o.look.dim || o.look.pose === "away" || (o.area ?? null) !== (sp.area ?? null)) continue;
+      ctx.fillText("!", o.x, o.y - 4);
+    }
+    ctx.restore();
+  }
   // Speech bubbles: a short line for the state, now and then (typed out; whole at once when still), placed so no two
   // overlap (placeBubbles; #2431).
   const bubbles = [];
@@ -384,16 +493,44 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
   const placed = placeBubbles(thinBubbles(bubbles, p.zones ? p.L.over : null), 22, tags);
   const say = () => { T(); for (const { sp, b, dy } of placed) sk.drawBubble(ctx, sp.x, sp.y, [...b.text].slice(0, b.shown).join(""), env, -dy); };
   if (defer) defer.push(say); else say();
-  return walking || up.length > 0 || p.flights.size() > 0 || post.some((it) => it.t > 0);
+  return walking || up.length > 0 || p.flights.size() > 0 || post.some((it) => it.t > 0) || rising.length > 0;
+}
+/**
+ * #2661: an NPC's name tag (a furniture item's label) — with the title a pack pins on it (`levels.fixed` by its id),
+ * while levels are on: "label · title", and a mark for a badge (an NPC has no level).
+ */
+function npcLook(p, f) {
+  const fx = p.levelsOn ? fixedOf(f.id, p.skin.pack && p.skin.pack.levels) : null;
+  return fx ? { label: `${f.label} · ${fx.title}`, badge: { mark: true, tier: 0 } } : { label: f.label };
 }
 /**
  * The person at (x, y) in a scene's units, as it draws them: on zones where they walk, in the box the skin draws them
  * in (an uploaded character's strip, anchor and size: #2513 review), nearest first; on desks, the desk.
  */
-function hitPart(p, x, y, t) {
+export function hitPart(p, x, y, t) {
   if (!p.zones) return deskAt(p.L, x, y);
-  return personAt(p.all, x, y, (d) => p.walkers.at(d.node.name, t),
-    (d, at) => (p.skin.charBox && p.looks.get(d.key) ? p.skin.charBox(p.looks.get(d.key), at) : null));
+  // #2698: someone an item hides is hit on it, after everyone drawn as themselves: on their tag as drawPart last drew
+  // it (the row can run past the picture: a long label, long names), else on its picture and the tag row under it
+  // (several share its width, left to right in the row's order).
+  const { hidden } = furnitureAt(p, t);
+  const d = personAt(hidden.size ? p.all.filter((dk) => !dk.node || !hidden.has(dk.node.name)) : p.all, x, y, (dk) => p.walkers.at(dk.node.name, t),
+    (dk, at) => (p.skin.charBox && p.looks.get(dk.key) ? p.skin.charBox(p.looks.get(dk.key), at) : null));
+  if (d || !hidden.size) return d;
+  for (const h of [...(p.heldTags || [])].reverse()) {
+    const b = h.box;
+    if (hidden.get(h.name) !== h.id || x < b.x || x >= b.x + b.w || y < b.y || y >= b.y + b.h) continue;
+    return p.all.find((dk) => dk.node && dk.node.name === h.name) || null;
+  }
+  const sk = p.skin.pack, drawn = strollFurniture(p.night ? nightFurniture(sk.furniture) : sk.furniture, (k) => p.walkers.at(k, t));
+  for (const f of [...drawn].reverse()) {
+    if (!f.sprite || ![...hidden.values()].includes(f.id)) continue;
+    const b = hidingBox(f);
+    if (x < b.x || x >= b.x + b.w || y < b.y || y >= b.y + b.h) continue;
+    const order = new Map((f.activeFor || []).map((n, i) => [n, i]));
+    const on = p.all.filter((dk) => dk.node && hidden.get(dk.node.name) === f.id).sort((m, n) => (order.get(m.node.name) ?? 0) - (order.get(n.node.name) ?? 0));
+    return on[Math.min(on.length - 1, Math.floor(((x - b.x) / b.w) * on.length))] || null;
+  }
+  return null;
 }
 
 function People({ nodes, pinned, onChange }) {
@@ -426,10 +563,11 @@ function People({ nodes, pinned, onChange }) {
 /**
  * The view: `view` buildOrgView's answer; `traffic` the live items (null: Live is off); `q` the Find box's needle;
  * `lease` the tab's (its reads); `onOpen(name)` what a desk opens (the canvas's: the chat; none: a desk opens nothing,
- * as on a share link's page, #2636); `assetUrl(path)` where a skin pack's picture is read (the share's address);
+ * as on a share link's page, #2636); `assetUrl(path)` where a skin pack's picture is read (the share's address), and
+ * `assetImage(url)` how (the share's, which waits out a 429, #2662; none: the loader's own);
  * `opening` the office it opens on (the share's), instead of the one this browser chose last.
  */
-export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening }) {
+export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetImage, opening }) {
   const store = useMemo(() => createOfficeStore(lease ? { fetch: (path, o) => lease.fetch(path, o) } : {}), [lease]);
   const [stored, setStored] = useState([]);
   const [storedRev, setStoredRev] = useState(null);                  // the rev the list was read at (a save sends it)
@@ -438,7 +576,12 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
   const [editing, setEditing] = useState(false);
   const [choice, setChoice] = useState(() => opening ?? store.choice());
   const [filter, setFilter] = useState(() => store.filter());
-  const [style, setStyle] = useState(() => store.skin());
+  // #2716: the whole-fleet office's style — the host's (for everyone) and this browser's own pick. An admin sees the
+  // host's (their own pick only while the host keeps none) and picks for everyone; anyone else's own pick, else the host's.
+  const [hostStyle, setHostStyle] = useState(undefined);            // undefined: not read yet; null: none kept
+  const [ownStyle, setOwnStyle] = useState(() => store.skinChosen());
+  const [styleErr, setStyleErr] = useState("");
+  const style = canEdit ? hostStyle ?? ownStyle ?? "cozy" : ownStyle ?? hostStyle ?? "cozy";
   const [hideAsleep, setHideAsleep] = useState(() => store.hideAsleep());
   // Bedtime (#2568), when it is on here: the idle sleep from NIGHT.FROM to NIGHT.TO on this device's clock (read every NIGHT.TICK).
   const [nightOn, setNightOn] = useState(() => store.nightOn());
@@ -460,6 +603,10 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
   const [themeRev, setThemeRev] = useState(0);
   const [pal, setPal] = useState(DEFAULT_PAL);                      // the tokens in force (read once the stage is there)
   const [tip, setTip] = useState(null);                               // the desk key the tooltip is for
+  // #2661: the person whose card is open (their key, as `tip`), and the desk-list entry it was opened from (focus goes
+  // back there when it closes); the card's element and where it points (placed every frame: it follows them).
+  const [card, setCard] = useState(null);
+  const cardFrom = useRef(null), cardEl = useRef(null), cardDesk = useRef(null);
   const stageRef = useRef(null), canvasRef = useRef(null), tipRef = useRef(null), lastType = useRef("mouse");
   // Fullscreen: null, "native" (the Fullscreen API) or "immersive" (the CSS cover); per visit, never kept.
   const ooRef = useRef(null), [fs, setFs] = useState(null), fsRef = useRef(null), fsAsked = useRef(false), fsTarget = useRef(null);
@@ -479,15 +626,34 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
   // The editor's save and its 409 re-read are stamped when sent (`ask`), never when answered; `adopt` returns the
   // snapshot in force, so a re-read the stream overtook leaves the editor's draft on the newer one.
   const asked = useRef(0), shown = useRef(null);                      // a counter; shown: { rev, offices, arrived }
+  const migrated = useRef(false);                                     // #2716: this page's own style sent up
   const ask = () => ++asked.current;
   const adopt = (d, askedAt) => {
     const cur = shown.current;
     if (!d) return cur;
     if (cur && d.rev < cur.rev && askedAt <= cur.arrived) return cur;
     shown.current = { rev: d.rev, offices: d.offices, arrived: ++asked.current };
-    setStored(d.offices); setStoredRev(d.rev);
+    setStored(d.offices); setStoredRev(d.rev); setHostStyle(d.autoSkin || null);
     return shown.current;
   };
+  // #2716: an admin's own pick from before the host kept one (or since an older host's save dropped it) goes up once.
+  useEffect(() => {
+    if (!canEdit || hostStyle !== null || !ownStyle || migrated.current || !lease) return;
+    migrated.current = true;
+    void store.saveAutoSkin(ownStyle).then((r) => { if (r.ok && lease.current()) setHostStyle(r.autoSkin); });
+  }, [canEdit, hostStyle]);
+  /** #2716: a style picked here — this browser's own; an admin's, for everyone (on failure: said, and read again). */
+  const pickStyle = (id) => {
+    store.saveSkin(id); setOwnStyle(id); setTip(null); setStyleErr("");
+    if (!canEdit || !lease) return;
+    const was = hostStyle;
+    setHostStyle(id);
+    void store.saveAutoSkin(id).then((r) => {
+      if (!lease.current() || r.ok) return;
+      setHostStyle(was);
+      setStyleErr(to(r.status === 429 ? "styleBusy" : "styleFailed", r.error));
+    });
+  };
   useEffect(() => {
     if (!lease) return undefined;
     const read = async () => { const at = ask(); const d = await store.offices(); if (lease.current()) adopt(d, at); };
@@ -500,6 +666,27 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
   // A read a newer one or the stream overtook is dropped (it is older: review — an opening read answered after the one
   // the stream's return began brought a cleared act back); read again when the stream comes back, and — with no live
   // stream (the public link, or a stream polling) — every POLL_MS while the page is shown.
+  // #2661: everyone's level (fleet-office-levels.js levelsOk): read on opening and every LEVELS_MS while shown — the
+  // host works them out at most once a minute, so nothing here asks more often.
+  const [lv, setLv] = useState(null);
+  // Who went up a level since the last read (name → when it was seen): a ring over them for UP_MS (drawPart).
+  const ups = useRef(new Map()), lastLevels = useRef(null);
+  useEffect(() => {
+    if (!lease) return undefined;
+    const read = async () => {
+      const d = await store.levels();
+      if (!lease.current() || !d) return;
+      const before = lastLevels.current, t = now();
+      if (before) for (const [name, e] of d.levels) { const b = before.get(name); if (b && e.level > b.level) ups.current.set(name, t); }
+      for (const [name, t0] of ups.current) if (t - t0 >= UP_MS) ups.current.delete(name);
+      lastLevels.current = d.levels;
+      setLv(d);
+      loop.current?.wake();
+    };
+    void read();
+    const h = lease.interval(() => { if (!globalThis.document?.hidden) void read(); }, LEVELS_MS);
+    return () => lease.clear(h);
+  }, [lease, store]);
   const [acts, setActs] = useState([]);
   const actSeen = useRef(new Set());
   useEffect(() => {
@@ -585,7 +772,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     if (!want.length) return undefined;
     let live = true;
     const get = lease ? (path, o) => lease.fetch(path, o) : undefined;
-    for (const [k, pk] of want) loadPackSkin(pk.id, pk.sha, { ...(get ? { fetch: get } : {}), ...(assetUrl ? { url: assetUrl } : {}) }).then((sk) => { if (live) setPackSkins((m) => new Map(m).set(k, sk)); });
+    for (const [k, pk] of want) loadPackSkin(pk.id, pk.sha, { ...(get ? { fetch: get } : {}), ...(assetUrl ? { url: assetUrl } : {}), ...(assetImage ? { image: assetImage } : {}) }).then((sk) => { if (live) setPackSkins((m) => new Map(m).set(k, sk)); });
     return () => { live = false; };
   }, [neededKey]);
   const loading = !!packInfo && !packSkins.has(packKey);
@@ -646,10 +833,10 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     });
   }, [overview, stored, view, packs, packSkins, cozyRev, hideAsleep, lobbyOn, lobbyAll, style, night]);
   const arranged = useMemo(() => tileLayout(tiles.map((tl) => ({ key: tl.key, w: tl.L.width, h: tl.L.height })), size), [tiles, size.w, size.h]);
-  const tileLooks = useMemo(() => { const work = workOn(traffic); return tiles.map((tl) => looksOf(tl.L, work, q, mode, tl.zones)); }, [tiles, traffic, q, mode, themeRev]);
+  const tileLooks = useMemo(() => { const work = workOn(traffic); return tiles.map((tl) => looksOf(tl.L, work, q, mode, tl.zones, (n) => badgeOf(n, lv, tl.skin.pack && tl.skin.pack.levels))); }, [tiles, traffic, q, mode, themeRev, lv]);
   // The scene the view pans and zooms: the office's, or the overview of every tile.
   const L = useMemo(() => (overview ? { mode: "overview", rooms: [], width: arranged.width, height: arranged.height } : single), [overview, single, arranged]);
-  const looks = useMemo(() => looksOf(L, workOn(traffic), q, mode, zones), [L, traffic, q, mode, themeRev]);
+  const looks = useMemo(() => looksOf(L, workOn(traffic), q, mode, zones, (n) => badgeOf(n, lv, skin.pack && skin.pack.levels)), [L, traffic, q, mode, themeRev, lv, skin]);
   // #2564: what comes in from other offices — one office's and style's own: a letter's door and drop are that layout's,
   // so another office (or style) starts with none (one shown meanwhile is not carried over to a different room).
   // #2578: the acts of the people in this stored office (by name); none elsewhere. On a desks style (review: accepted
@@ -725,6 +912,23 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     const v = view0(), p = toScreen(v, d.x, d.y), x = Math.max(4, Math.min(p.x, size.w - 244)), above = p.y > 90;
     el.style.setProperty("transform", above ? `translate(${x}px, ${p.y + 6}px) translateY(-100%)` : `translate(${x}px, ${p.y + d.h * v.k}px)`);
   };
+  /**
+   * #2661: the card beside its person — to their right (left where it would not fit), level with their head, inside the
+   * stage — following them as they walk (a walker's position now, else their seat or desk). A bottom sheet is not placed.
+   */
+  const placeCard = () => {
+    const el = cardEl.current, c = cardDesk.current;
+    if (!el || !c || !el.style || el.classList?.contains("sheet")) return;
+    const v = view0(), sz = sizeRef.current;
+    const w = c.walks ? walkers.at(c.name, now()) : null;
+    const pt = w ? { x: w.x, y: w.y - 52, r: 16 } : { x: c.box.x + c.box.w / 2, y: c.box.y, r: (c.box.w / 2) * v.k };
+    const p = toScreen(v, pt.x, pt.y), cw = 320, ch = el.offsetHeight || 260, gap = 12 + (w ? pt.r : pt.r);
+    let x = p.x + gap;
+    if (x + cw > sz.w - 8) x = p.x - gap - cw;
+    x = Math.max(8, Math.min(x, sz.w - cw - 8));
+    const y = Math.max(8, Math.min(p.y - 24, sz.h - ch - 8));
+    el.style.setProperty("transform", `translate(${Math.round(x)}px, ${Math.round(y)}px)`);
+  };
   /**
    * Put the view on everything that shows it beside the canvas: the overview's frame (the part of the scene in view;
    * the whole view on its data-k/x/y), the zoom's percentage, the overlay, the tooltip.
@@ -739,6 +943,9 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     if (mb && mb.style) {                                              // the overview: inside the stage, scaled to it
       const b = miniBox(size, L.width, L.height);
       for (const [a, val] of [["left", b.x], ["top", b.y], ["width", b.w], ["height", b.h]]) mb.style.setProperty(a, `${val}px`);
+      // #2737: hidden while a single office is all in view (it would show what the panel shows); All offices keeps it.
+      if (!overview && wholeInView(v, size, L.width, L.height)) mb.setAttribute("data-whole", "");
+      else mb.removeAttribute("data-whole");
     }
     const pc = pctRef.current;
     if (pc) { const lb = zoomLabel(v.k); if (pc.textContent !== lb) pc.textContent = lb; pc.setAttribute("aria-label", to("zoomLevel", lb)); }
@@ -920,18 +1127,19 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     const base = { ctx, ratio, BW, BH, matte, env, dirty: true };
     if (overview) {
       // Each tile a scene of its own, where the overview puts it (arranged.tiles, in the same order).
-      const parts = tiles.map((tl, i) => ({ ...partOf(tl.L, tileLooks[i], tl.skin, tl.zones, tl.walkers, tl.flights), night, key: tl.key, prefix: tl.prefix, tile: arranged.tiles[i] }));
+      const parts = tiles.map((tl, i) => ({ ...partOf(tl.L, tileLooks[i], tl.skin, tl.zones, tl.walkers, tl.flights), night, key: tl.key, prefix: tl.prefix, tile: arranged.tiles[i], ups: ups.current, levelsOn: !!(lv && lv.enabled) }));
       scene.current = { ...base, overview: true, parts, lay: arranged };
     } else {
-      scene.current = { ...base, overview: false, part: { ...partOf(L, looks, skin, zones, walkers, flights), ghosts, night, mail, acts: actsHere, actSeen: actSeen.current } };
+      scene.current = { ...base, overview: false, part: { ...partOf(L, looks, skin, zones, walkers, flights), ghosts, night, mail, acts: actsHere, actSeen: actSeen.current, ups: ups.current, levelsOn: !!(lv && lv.enabled) } };
     }
     if (still) draw(0); else loop.current?.wake();
-  }, [L, looks, skin, pal, size.w, size.h, ratio, matte, overview, tiles, tileLooks, arranged, ghosts, night, mail, actsHere]);
+  }, [L, looks, skin, pal, size.w, size.h, ratio, matte, overview, tiles, tileLooks, arranged, ghosts, night, mail, actsHere, lv]);
 
   /** One frame at `ms` (0: still); whether anything is moving (in the air, or someone walking). */
   function draw(ms) {
     const s = scene.current;
     if (!s) return false;
+    placeCard();
     const { ctx, BW, BH, env } = s;
     // The view in bitmap px: a logical unit is `a` px (a whole number at a pixel level), the origin on a whole px.
     const v = view0(), a = v.k * s.ratio, ox = Math.round(v.x * s.ratio), oy = Math.round(v.y * s.ratio);
@@ -1010,11 +1218,16 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
   // Everyone drawn: { key, node, box (the desk, in the view's units), dot (where the overview marks them), office (All
   // offices: the tile's name) }. In All offices a key is the tile's prefix and the desk's key: one person in two
   // offices is two people here.
+  // #2661: and for the card, where they are (`area`: the zone's or the room's name), the style that draws them, their look.
+  const roomOf = (L0, d) => { const r = L0.rooms.find((rm) => rm.desks.includes(d)); return r ? (r.lobby ? to("lobbyRoom") : r.name) : null; };
+  const areaName = (a) => (a ? ({ desks: to("area_desks"), lounge: to("area_lounge"), alert: to("area_alert"), nap: to("area_nap") })[a] || a : null);
   const people = overview
-    ? tiles.flatMap((tl, i) => { const tt = arranged.tiles[i];
+    ? tiles.flatMap((tl, i) => { const tt = arranged.tiles[i], lk = tileLooks[i];
       return tt ? desksOf(tl.L).map((d) => ({ key: tl.prefix + d.key, node: d.node, box: tileBox(tt, d), office: tl.name,
-        dot: fromTile(tt, tl.zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 }) })) : []; })
-    : desksOf(L).map((d) => ({ key: d.key, node: d.node, box: d, office: null, dot: zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 } }));
+        dot: fromTile(tt, tl.zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 }),
+        area: tl.zones ? areaName(d.area) : roomOf(tl.L, d), skin: tl.skin, look: lk && lk.get(d.key) })) : []; })
+    : desksOf(L).map((d) => ({ key: d.key, node: d.node, box: d, office: null, dot: zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 },
+      area: zones ? areaName(d.area) : roomOf(L, d), skin, look: looks.get(d.key) }));
   // Preact owns the markup, not the view: put it back on the overview, the overlay and the tooltip after every render.
   const tipDesk = tip ? people.find((d) => d.key === tip) || null : null;
   tipDeskRef.current = tipDesk ? tipDesk.box : null;
@@ -1077,16 +1290,20 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     if (d) show(d.box);
   };
   const onMove = (e) => { if (e.pointerType === "touch" || g.busy()) return; const d = deskOf(e); const key = d ? d.key : null; if (key !== tip) setTip(key); };
+  // #2661: a click (or a tap) on a person opens their card; on the same person again, or off everyone, closes it; on
+  // someone else, switches to theirs. A double-click skips the card and opens the chat.
   const onClick = (e) => {
     const d = deskOf(e);
-    if (!d || !d.node.i) { setTip(null); return; }
-    if (lastType.current === "touch" && tip !== d.key) { setTip(d.key); return; }   // a first tap shows; a second opens
-    open(d.node.name);
+    if (!d || !d.node.i) { setTip(null); setCard(null); return; }
+    if (lastType.current === "touch") setTip(null);
+    cardFrom.current = null;
+    setCard((cur) => (cur === d.key ? null : d.key));
   };
   // All offices: a double-click on a tile (off its people) opens that office; the lobby is no office.
   const onDblClick = (e) => {
-    const s = scene.current, w = pointOf(e);
-    if (!overview || !s || !s.overview || !w || deskOf(e)) return;
+    const s = scene.current, w = pointOf(e), hit = deskOf(e);
+    if (hit && hit.node.i) { setCard(null); open(hit.node.name); return; }   // #2661: a person's chat, past the card
+    if (!overview || !s || !s.overview || !w || hit) return;
     const tt = tileAt(s.lay, w.x, w.y) || labelAt(s.lay, w.x, w.y), tl = tt ? tiles.find((x) => x.key === tt.key) : null;
     if (tl && !tl.lobby) pick(tl.key);
   };
@@ -1104,6 +1321,8 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     setTip(null);
   };
   const closeLayout = () => setLayout(null);
+  // #2691: whom a seat can be reserved for — the office's members (its teams' too).
+  const layoutMembers = useMemo(() => (layout && custom ? membersOf(custom, view).map((n) => n.name) : []), [layout && layout.id, custom, view]);
   const onDraft = (draft) => setLayout((cur) => (cur ? { ...cur, draft } : cur));
   // Save: the session's list, this office's overrides replaced (none: back to the style's own), with the session's rev.
   // A change made meanwhile (409) reads the list again: the session takes it (the view too), the draft is kept, and
@@ -1132,6 +1351,54 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
   const pick = (id) => { if (layoutRef.current) return; store.saveChoice(id); setChoice(id); setTip(null); };
   const everyone = useMemo(() => { const m = new Map(); for (const n of [...view.top, ...view.teams.flatMap((tm) => tm.nodes), ...view.rest.nodes]) if (!m.has(n.name)) m.set(n.name, n); return [...m.values()]; }, [view]);
   const tipText = tipDesk ? nodeText(tipDesk.node) : null;
+  // #2661: the card's person (gone from the office, filtered out or the office changed: it closes).
+  const cardOf = card ? people.find((d) => d.key === card && d.node.i) || null : null;
+  cardDesk.current = cardOf ? { name: cardOf.node.name, box: cardOf.box, walks: zones && !overview } : null;
+  useEffect(() => { if (card && !cardOf) setCard(null); }, [card, !!cardOf]);
+  const closeCard = () => {
+    setCard(null);
+    const from = cardFrom.current; cardFrom.current = null;
+    if (from) [...(ooRef.current?.querySelectorAll?.(".oo-desk") || [])].find((el) => el.getAttribute("data-key") === from)?.focus?.();
+  };
+  // Esc, or a press anywhere off the card and the scene (the scene's own click decides there), closes it.
+  useEffect(() => {
+    if (!card) return undefined;
+    const doc = globalThis.document;
+    const key = (e) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); closeCard(); } };
+    // A desk-list entry is the scene's too: its own click decides (the same person again closes, another switches) —
+    // closing here first would let that click open it again (#2761 review).
+    const press = (e) => {
+      const el = e.target;
+      if (cardEl.current?.contains?.(el) || el === canvasRef.current) return;
+      if (typeof el?.closest === "function" && el.closest(".oo-desk") && ooRef.current?.contains?.(el)) return;
+      closeCard();
+    };
+    doc?.addEventListener?.("keydown", key, true); doc?.addEventListener?.("pointerdown", press, true);
+    return () => { doc?.removeEventListener?.("keydown", key, true); doc?.removeEventListener?.("pointerdown", press, true); };
+  }, [card]);
+  /** Find in office: zoomed in (to at least TWO px a unit) and centred on them. */
+  const findCard = () => {
+    const c = cardDesk.current;
+    if (!c) return;
+    const w = c.walks ? walkers.at(c.name, now()) : null, at = w ? { x: w.x, y: w.y - 26 } : { x: c.box.x + c.box.w / 2, y: c.box.y + c.box.h / 2 };
+    const v = view0(), k = Math.min(OK_MAX, Math.max(v.k, FIND_K));
+    touched.current = true; fitted.current = false;
+    setView(centreOn({ ...v, k }, size, at.x, at.y));
+  };
+  /** The card's picture: the person's idle frame in the office's style (pack strip or built-in figure). */
+  const drawAvatar = (cv) => {
+    const s = scene.current, c = cardOf;
+    const g = cv && cv.getContext ? cv.getContext("2d") : null;
+    if (!g || !c || !s || !c.skin || !c.look) return;
+    const r = deviceRatio(), W = 56;
+    if (cv.width !== W * r) { cv.width = W * r; cv.height = W * r; }
+    g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, cv.width, cv.height); g.imageSmoothingEnabled = false;
+    const look = { ...c.look, pose: "idle", dim: false, match: false, badge: null, notag: true, free: true, work: 0, sign: null };
+    const at = { x: 0, y: 0 }, b = c.skin.charBox ? c.skin.charBox(look, at) : null, box = b || { x: -16, y: -48, w: 32, h: 48 };
+    const k = Math.min((W - 8) / box.w, (W - 8) / box.h) * r;
+    g.setTransform(k, 0, 0, k, (W * r) / 2 - (box.x + box.w / 2) * k, (W * r) / 2 - (box.y + box.h / 2) * k);
+    try { c.skin.drawCharacter(g, { x: at.x - 44, y: at.y - 53, w: 88, h: 53, seat: at }, look, 0, s.env); } catch { /* a picture not loaded yet: blank */ }
+  };
   // The overview: the scene's rooms (or areas; All offices: the tiles) and a dot for each person (a call in its colour),
   // the view's frame on it.
   const miniRects = overview ? arranged.tiles.map((tt) => ({ key: tt.key, x: tt.x, y: tt.y, w: tt.w, h: tt.h }))
@@ -1148,7 +1415,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
     <div class="oo-bar">
       <label class="oo-pick"><span class="oo-pick-label">${to("office")}</span>${officeSelect("oo-office")}</label>
       ${auto ? html`<label class="oo-pick"><span class="oo-pick-label">${to("styleLabel")}</span>
-        <select class="tb-select" value=${STYLES.includes(style) || packs.some((pk) => pk.id === style) ? style : skin.id} onChange=${(e) => { store.saveSkin(e.target.value); setStyle(e.target.value); setTip(null); }}>
+        <select class="tb-select" value=${STYLES.includes(style) || packs.some((pk) => pk.id === style) ? style : skin.id} title=${to(canEdit ? "styleForAll" : "styleHere")} onChange=${(e) => pickStyle(e.target.value)}>
           ${styles.map((id) => html`<option key=${id} value=${id}>${to(`style_${id}`)}</option>`)}
           ${packs.map((pk) => html`<option key=${`pack:${pk.id}`} value=${pk.id}>${pk.name}</option>`)}
         </select></label>` : null}
@@ -1164,6 +1431,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
         ${lobbyAll.length ? null : html`<span class="muted oo-note oo-lobby-none">${to("lobbyEveryone")}</span>`}` : null}
       ${custom && baseSkin.id !== custom.skin && !loading ? html`<span class="muted oo-note">${to("skinUnknown", styleName(custom.skin))}</span>` : null}
       ${placed.ignored ? html`<span class="muted oo-note">${to("layoutIgnored")}</span>` : null}
+      ${styleErr && auto ? html`<span class="note oo-note oo-style-err" role="status">${styleErr}</span>` : null}
       ${L.unseated ? html`<span class="muted oo-note">${to("unseated", L.unseated)}</span>` : null}
       ${canEdit && storedRev !== null ? html`<button type="button" class="btn btn-sm oo-edit" onClick=${() => { if (!overview) setEditing(true); }} disabled=${!!layout || overview}
         title=${overview ? to("overviewNoEdit") : undefined}>${t("orge.edit")}</button>` : null}
@@ -1184,19 +1452,24 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening
           : html`<button key=${tl.key} ref=${at} type="button" class="oo-tile-label" data-office=${tl.key} title=${to("openOffice", tl.name)} aria-label=${to("openOffice", tl.name)}
               onClick=${() => pick(tl.key)}>${text}</button>`;
       }) : null}
-      ${layout ? html`<${LayoutEditor} key=${layout.id} base=${layout.base} start=${layout.start} place=${placeOverlay} dock=${!fs}
+      ${layout ? html`<${LayoutEditor} key=${layout.id} base=${layout.base} start=${layout.start} place=${placeOverlay} dock=${!fs} members=${layoutMembers}
         stale=${layoutStale ? t("orgl.stale") : ""} onChange=${onDraft} onSave=${saveLayout} onClose=${closeLayout} />` : null}
-      ${tipText ? html`<div ref=${tipRef} class="oo-tip" role="tooltip">
+      ${tipText && tip !== card ? html`<div ref=${tipRef} class="oo-tip" role="tooltip">
         <strong>${tipText.primary}</strong>${tipText.secondary ? html` <span class="muted mono">${tipText.secondary}</span>` : null}
         <div>${tipText.sub}</div><div class="muted">${caption(officePose(tipDesk.node.state), tipDesk.node.state)}</div>
         ${tipDesk.office ? html`<div class="muted oo-tip-office">${tipDesk.office}</div>` : null}
-        ${tipDesk.node.i && onOpen && lastType.current === "touch" ? html`<div class="muted">${to("tapAgain")}</div>` : null}
       </div>` : null}
+      ${cardOf ? html`<${OfficeCard} key=${cardOf.key}
+        model=${cardModel({ node: cardOf.node, lv, levels: cardOf.skin && cardOf.skin.pack ? cardOf.skin.pack.levels : null, share: !onOpen,
+          state: stateWords(cardOf.node), now: caption(officePose(cardOf.node.state), cardOf.node.state),
+          where: [cardOf.office || (custom ? custom.name : to("allOffice")), cardOf.area].filter(Boolean).join(" · ") })}
+        avatar=${drawAvatar} sheet=${size.w < SHEET_W} place=${(el) => { cardEl.current = el; placeCard(); }}
+        onChat=${onOpen ? () => { const n = cardOf.node.name; setCard(null); open(n); } : null} onFind=${findCard} onClose=${closeCard} />` : null}
       <ul class="oo-desks" aria-label=${to("desks")}>${people.map((d) => {
         const nt = nodeText(d.node), cap = caption(officePose(d.node.state), d.node.state), where = d.office ? ` · ${d.office}` : "";
         return html`<li key=${d.key}>${d.node.i
-          ? html`<button type="button" class="oo-desk" data-name=${d.node.name} data-key=${d.key} aria-label=${`${nt.full}${where} · ${cap}.${onOpen ? ` ${t("orgc.openChat")}` : ""}`}
-              onFocus=${() => setTip(d.key)} onBlur=${() => setTip(null)} onClick=${() => open(d.node.name)}>${nt.primary}</button>`
+          ? html`<button type="button" class="oo-desk" data-name=${d.node.name} data-key=${d.key} aria-label=${`${nt.full}${where} · ${cap}.`} aria-haspopup="dialog"
+              onFocus=${() => setTip(d.key)} onBlur=${() => setTip(null)} onClick=${() => { cardFrom.current = d.key; setCard((cur) => (cur === d.key ? null : d.key)); }}>${nt.primary}</button>`
           : html`<span class="oo-desk" data-name=${d.node.name} data-key=${d.key}>${nt.full}</span>`}</li>`;
       })}</ul>
       <div class="oc-zoom oo-zoom" role="group" aria-label=${t("orgc.view")}>