@songsid/agend 2.3.2-beta.3 → 2.3.2-beta.4

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

@@ -3,7 +3,8 @@
 // changes it walks (along the pack's waypoints) to the new area. Pure — fleet-office.js draws it. Also here: what a
 // character says in its speech bubble, and which furniture is active.
 import { LOGICAL, own } from "./fleet-office-pack.js";
-import { nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
+import { FLIGHT, nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
+import { hue } from "./fleet-traffic.js";
 
 /** The area for a state: the pack's own, else its "default", else its first area. */
 export function zoneOf(pack, state) {
@@ -76,12 +77,16 @@ export function assignSeats(pack, wants, prev = new Map()) {
  * the desks layout (rooms → desks with a seat), in logical units, plus `mode: "zones"`, the pack's areas and graph, the
  * seats given (`seats`, the next call's `prev`), `crowd` and `over` (the areas over capacity).
  */
-export function zonesLayout(pack, nodes, prev = new Map()) {
-  const wants = nodes.filter((n) => n.state !== "missing").map((n) => ({ name: n.name, area: zoneOf(pack, n.state) }));
+export function zonesLayout(pack, nodes, prev = new Map(), { night = false } = {}) {
+  // At night (#2568) the idle go to bed: the area asleep people go to while it has a free seat; the rest doze where they are.
+  const bed = zoneOf(pack, "paused"), beds = (own(pack.areas, bed)?.seats || []).length, sleepers = new Set(), inBed = new Set();
+  let used = nodes.filter((n) => n.state !== "idle" && zoneOf(pack, n.state) === bed).length;
+  if (night) for (const n of nodes) if (n.state === "idle") { sleepers.add(n.name); if (used < beds) { used++; inBed.add(n.name); } }
+  const wants = nodes.filter((n) => n.state !== "missing").map((n) => ({ name: n.name, area: inBed.has(n.name) ? bed : zoneOf(pack, n.state) }));
   const { seats, crowd, over } = assignSeats(pack, wants, prev);
   const desks = nodes.filter((n) => seats.has(n.name)).map((n) => {
     const s = seats.get(n.name);
-    return { key: `zone/${n.name}`, node: n, x: s.x - 24, y: s.y - 52, w: 48, h: 66, seat: { x: s.x, y: s.y }, wp: null, area: s.area, slot: s.slot };
+    return { key: `zone/${n.name}`, node: n, x: s.x - 24, y: s.y - 52, w: 48, h: 66, seat: { x: s.x, y: s.y }, wp: null, area: s.area, slot: s.slot, night: sleepers.has(n.name) };
   });
   return { mode: "zones", rooms: [{ key: "\u0000zones", name: null, lobby: false, x: 0, y: 0, w: LOGICAL.w, h: LOGICAL.h, desks }], areas: pack.areas,
     waypoints: pack.waypoints || [], edges: pack.edges || [], door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd, over };
@@ -103,6 +108,145 @@ export function headingAt(pts, t) {
   }
   return null;
 }
+// ── Night (#2568) ──
+
+/** Bedtime on the viewer's clock: from FROM o'clock to TO o'clock the idle sleep (anyone with work still gets up for it). */
+export const NIGHT = { FROM: 0, TO: 6, TICK: 60000 };
+export const isNight = (d = new Date()) => { const h = d.getHours(); return NIGHT.FROM <= NIGHT.TO ? h >= NIGHT.FROM && h < NIGHT.TO : h >= NIGHT.FROM || h < NIGHT.TO; };
+
+// ── Wandering (#2560) ──
+
+/**
+ * An idle person now and then strolls to a spot near their seat and back, so a quiet room is not a row of statues:
+ * every PERIOD ms (each person's own phase, from their name) they are AWAY ms at a waypoint within REACH of the seat —
+ * one no seat of the office is on (taken or free), picked anew each time — then walk back. Pure: the page asks every TICK ms and walks the change.
+ */
+export const WANDER = { PERIOD: 40000, AWAY: 8000, REACH: 220, TICK: 1000 };
+/** Where `name`, seated at `seat`, should be at `t` (ms) while idle: a spot near the seat, or the seat. */
+export function wanderTarget(name, seat, graph, t, seats = []) {
+  const near = (graph.waypoints || []).filter((w) => Math.hypot(w.x - seat.x, w.y - seat.y) <= WANDER.REACH
+    && !seats.some((s) => Math.hypot(w.x - s.x, w.y - s.y) < 4));
+  if (!near.length) return seat;
+  const h = nameHash(name), k = t + (h % WANDER.PERIOD), turn = Math.floor(k / WANDER.PERIOD);
+  if (k - turn * WANDER.PERIOD >= WANDER.AWAY) return seat;
+  const w = near[nameHash(`${name}\u0000${turn}`) % near.length];
+  return { x: w.x, y: w.y };
+}
+/** An NPC drawn as furniture (#2596: an item with `walk`): its walker's name — never a person's, and its own phase. */
+export const npcKey = (f) => `furniture/${f.id}`;
+/** Everyone's walk target: their seat, or — idle and `wander` on — wanderTarget's spot (one person a spot: whoever
+ * would share it stays seated this time). And, `wander` on, each item of `furniture` with a `walk` (#2596): its spot
+ * (x, y), or a stroll near it as an idle person's (by npcKey) — none at `night` for one with a night place (asleep there). */
+export function walkTargets(desks, graph, t, wander = true, furniture = [], night = false) {
+  // Every seat of the office (anyone's, taken or not: someone may sit down on it any moment), not only the ones in use.
+  // And each walking NPC's spot (#2596 review): its home, where it stands outside its stroll and goes back to whenever
+  // its stroll would collide, so nobody else's stroll may end there — no two walkers ever share a target.
+  const homes = wander ? furniture.filter((f) => f.walk && !(night && f.night)).map((f) => ({ x: f.x, y: f.y })) : [];
+  const seats = [...Object.values(graph.areas || {}).flatMap((a) => a.seats || []), ...desks.map((d) => d.seat), ...homes];
+  const used = new Set(homes.map((h) => `${h.x},${h.y}`));
+  const stroll = (name, home) => {
+    const p = wanderTarget(name, home, graph, t, seats), k = `${p.x},${p.y}`;
+    if (p === home || used.has(k)) return home;
+    used.add(k);
+    return p;
+  };
+  const out = new Map(desks.map((d) => [d.node.name, !wander || d.node.state !== "idle" || d.night ? d.seat : stroll(d.node.name, d.seat)]));
+  if (wander) for (const f of furniture) if (f.walk && !(night && f.night)) out.set(npcKey(f), stroll(npcKey(f), { x: f.x, y: f.y }));
+  return out;
+}
+
+// ── Mail from another office (#2564) ──
+
+/**
+ * Something sent to a person here by someone who is not (in another office, or in none): it flies in at the door and
+ * lands on the floor near the middle of the room; the person walks over, picks it up and walks back to their seat.
+ * MAX_WAIT: a letter no one picks up is gone after it; GAP: letters waiting side by side; SEARCH: how far from the
+ * middle a landing spot is looked for when no waypoint will do; ASLEEP: who does not get up
+ * for it (it waits for them to wake, up to MAX_WAIT).
+ */
+export const MAIL = { MAX_WAIT: 60000, GAP: 16, SEARCH: 320, ASLEEP: new Set(["paused", "stopped"]), MAX: 20 };
+/**
+ * Where the `n`th waiting letter lands: `n` GAPs along from the waypoint nearest the room's middle — the nearest whose
+ * spot (offset included) no seat of the office is on, taken or free (someone may sit there any moment; #2561 likewise);
+ * with none, the nearest point round the middle (rings GAP·2 apart, inside the room) that no seat is on; with none of
+ * those either, null — the letter is not delivered here (never on a seat).
+ */
+export function dropPoint(L, n = 0) {
+  const mid = { x: L.width / 2, y: L.height * 0.55 }, d = (p, q) => Math.hypot(p.x - q.x, p.y - q.y);
+  const seats = [...Object.values(L.areas || {}).flatMap((a) => a.seats || []), ...desksIn(L).map((q) => q.seat)];
+  const onSeat = (p) => seats.some((q) => d(p, q) < 4);
+  const spots = (L.waypoints || []).map((w) => ({ x: Math.round(w.x + n * MAIL.GAP), y: Math.round(w.y), from: w }))
+    .filter((p) => !onSeat(p.from) && !onSeat(p)).sort((p, q) => d(p.from, mid) - d(q.from, mid));
+  if (spots.length) return { x: spots[0].x, y: spots[0].y };
+  const inRoom = (p) => p.x >= 0 && p.y >= 0 && p.x <= L.width && p.y <= L.height;
+  for (let r = 0; r <= MAIL.SEARCH; r += 2 * MAIL.GAP) {
+    for (let k = 0, m = r ? 16 : 1; k < m; k++) {
+      const a = (2 * Math.PI * k) / m, p = { x: Math.round(mid.x + r * Math.cos(a) + n * MAIL.GAP), y: Math.round(mid.y + r * Math.sin(a)) };
+      if (inRoom(p) && !onSeat(p)) return p;
+    }
+  }
+  return null;
+}
+const desksIn = (L) => (L.rooms || []).flatMap((r) => r.desks || []).filter((d) => d.node);
+/**
+ * The letters of one office. `sync(items, now, L, still)`: each new traffic item to someone drawn here from someone
+ * who is not becomes a letter (none with reduced motion, nor for a stale delegation; a zones office only).
+ * `frame(now, L, walkers)` → what to draw, { id, hue, kind, from, x, y, t } (t: its flight, 0 on the floor), picking
+ * up the letters whose person stands on them, and dropping those gone too long or whose person left. `targets(L)`:
+ * name → where to walk to pick one up (the first waiting for them; none while they are asleep). `prime(items)`: mark as
+ * seen what was in the air before this office was shown (a new office's or style's mail starts empty). `size()`.
+ */
+export function createMail({ max = MAIL.MAX } = {}) {
+  const seen = new Set();
+  let letters = [];
+  const here = (L, name) => desksIn(L).find((d) => d.node.name === name) || null;
+  return {
+    sync(items, now, L, still = false) {
+      let started = 0;
+      for (const it of items || []) {
+        if (seen.has(it.id)) continue;
+        seen.add(it.id);
+        if (seen.size > 2000) seen.delete(seen.values().next().value);
+        if (still || it.phase === "stale" || !L || L.mode !== "zones" || !here(L, it.to) || here(L, it.from)) continue;
+        const drop = dropPoint(L, letters.filter((l) => l.to !== it.to).length % 4);
+        if (!drop) continue;                                          // nowhere off the seats: not delivered here
+        const pts = [{ x: L.door.x, y: L.door.y }, drop];
+        letters.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now, drop, pts,
+          ms: Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(pts) / FLIGHT.SPEED)) });
+        started++;
+      }
+      if (letters.length > max) letters = letters.slice(letters.length - max);
+      return started;
+    },
+    frame(now, L, walkers) {
+      const out = [];
+      letters = letters.filter((l) => {
+        if (!here(L, l.to)) return false;
+        const t = (now - l.start) / l.ms;
+        if (t < 1) { if (t >= 0) { const p = along(l.pts, t); out.push({ id: l.id, hue: l.hue, kind: l.kind, from: l.from, x: p.x, y: p.y, t }); } return true; }
+        if (now - l.start - l.ms > MAIL.MAX_WAIT) return false;
+        const w = walkers && walkers.at(l.to, now);
+        if (w && !w.walking && Math.hypot(w.x - l.drop.x, w.y - l.drop.y) < 4) return false;   // picked up
+        out.push({ id: l.id, hue: l.hue, kind: l.kind, from: l.from, x: l.drop.x, y: l.drop.y, t: 0 });
+        return true;
+      });
+      return out;
+    },
+    targets(L, now) {
+      const out = new Map();
+      for (const l of letters) {
+        if (out.has(l.to) || now - l.start < l.ms) continue;
+        const d = here(L, l.to);
+        if (d && !MAIL.ASLEEP.has(d.node.state) && !d.night) out.set(l.to, l.drop);   // asleep, or in bed for the night (#2568)
+      }
+      return out;
+    },
+    /** What is already in the traffic when this office's mail starts (#2564): seen, so it is not delivered again here. */
+    prime(items) { for (const it of items || []) seen.add(it.id); },
+    size: () => letters.length,
+  };
+}
+
 /**
  * Where each character is. `sync(targets, now, graph, still)`: targets name → { x, y }; someone new is already there;
  * someone whose target moved walks from where they are now along the graph (routeVia) — or is there at once when
@@ -232,8 +376,13 @@ export function linesFor(state, lang, pack, defaults) {
 // ── Furniture ──
 
 /** The furniture active now: an item whose `activeWhen` names a state someone shown is in. */
-export function activeFurniture(pack, states) {
+export function activeFurniture(pack, states, byName = new Map()) {
   const on = new Set();
-  for (const f of (pack && pack.furniture) || []) if (f.activeWhen && f.activeWhen.some((s) => states.has(s))) on.add(f.id);
+  for (const f of (pack && pack.furniture) || []) {
+    if (!f.activeWhen) continue;
+    // activeFor (#2570): only those people's states count; else anyone's shown.
+    const hit = f.activeFor ? f.activeFor.some((n) => byName.has(n) && f.activeWhen.includes(byName.get(n))) : f.activeWhen.some((s) => states.has(s));
+    if (hit) on.add(f.id);
+  }
   return on;
 }

package/dist/ui/fleet-office.js

@@ -1,6 +1,6 @@
 // Fleet → Org chart → Office: the fleet as a small pixel office, the third view beside Canvas and List
 // (fleet-canvas.js). The same data as theirs: the structure from /ui/org (buildOrgView), the live state from the app
-// store, the traffic from fleet-traffic.js's store — nothing new is read but the offices people made (/ui/offices).
+// store, the traffic from fleet-traffic.js's store — nothing new is read but the offices people made (/ui/offices) and what agents do in them (/ui/office-acts, #2578).
 //
 // - Two layouts, by skin. Desks (the built-in "pixel" skin, the default): each team is a room, each member a desk with a
 //   name tag; General and the instances in no team share the lobby; a grid that wraps at the stage's width
@@ -62,8 +62,9 @@ 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, loadPackSkin, modeOf, skinFor, tagBox } from "./fleet-office-skin.js";
-import { CALLING, activeFurniture, bubbleAt, bubbleRank, createWalkers, linesFor, personAt, placeBubbles, thinBubbles, zonesLayout } from "./fleet-office-zones.js";
-import { createOfficeStore } from "./fleet-office-store.js";
+import { CALLING, activeFurniture, bubbleAt, 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 { POLL_MS } from "./fleet-traffic.js";
 import { OfficeEditor, officeForSave } from "./fleet-office-editor.js";
 import { LayoutEditor, handlesOf } from "./fleet-office-layout.js";
 import { applyOverrides } from "./fleet-office-pack.js";
@@ -83,7 +84,7 @@ register("orgo", {
     b_working: "On it.|Typing…|Almost there|In the zone|One more test", b_idle: "Tea time|Ready when you are|Stretching|Anything for me?",
     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", layoutIgnored: "Its saved layout does not fit this style: drawn as the style's own.",
+    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.",
     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.",
@@ -99,7 +100,7 @@ register("orgo", {
     b_working: "處理中|打字中…|快好了|專心中|再測一次", b_idle: "喝茶中|隨時可以開工|伸個懶腰|有事找我嗎？",
     b_paused: "Zzz…|晚點回來", b_stopped: "下班了|Zzz…", b_needs: "需要你！|有個問題|在這裡！",
     b_crashed: "糟糕，當掉了|救命！", b_stuck: "嗯，卡住了？|還在想…",
-    hideAsleep: "隱藏暫停與停止的成員", layoutIgnored: "它儲存的配置不適用這個風格：以風格本身的配置顯示。",
+    hideAsleep: "隱藏暫停與停止的成員", nightOn: "0–6 點就寢：閒著的人去睡", layoutIgnored: "它儲存的配置不適用這個風格：以風格本身的配置顯示。",
     fit: "顯示整個辦公室", overview: "總覽：點一下移到那裡", fullscreen: "全螢幕", exitFullscreen: "結束全螢幕",
     fill: "填滿", fillTitle: "填滿整個面板（超出的部分會被裁切，拖曳即可看到）", zoomLevel: "縮放 {0}",
     allOffices: "所有辦公室", labelAll: "所有辦公室：每間辦公室是一格，以它自己的風格顯示。拖曳平移；滾輪、雙指、+ 和 − 縮放，0 顯示全部，F 切換全螢幕。雙擊一格即可開啟那間辦公室。",
@@ -180,7 +181,8 @@ function looksOf(L, work, q, mode, zones) {
     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);
-    return [d.key, { name: n.name, label: nodeText(n).primary, state: n.state, pose: officePose(n.state), light: lightOf(n.state), lamp: lampOf(n.state),
+    // 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 }];
   }));
 }
@@ -192,17 +194,78 @@ function withOverrides(baseSkin, zones, office) {
   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`. */
-function officeScene(office, nodes, skin, zones, deskW, prevSeats) {
-  if (zones) return zonesLayout(skin.pack, nodes, prevSeats);
+function officeScene(office, nodes, skin, zones, deskW, prevSeats, night = false) {
+  if (zones) return zonesLayout(skin.pack, nodes, prevSeats, { night });
   const lay = office.layout || layoutOk(skin.layout);
   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) {
   const all = L.rooms.flatMap((r) => r.desks);
-  const shown = new Set([...looks.values()].map((l) => l.state));
+  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,
-    active: zones ? activeFurniture(skin.pack, shown) : new Set(), lines: bubbleDefaults(), lang: lang() };
+    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). */
+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));
+/** #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) => {
+  const w = f.walk && !f.asleep ? at(npcKey(f)) : null;
+  return w ? { ...f, x: w.x, y: w.y, walking: !!w.walking, heading: w.heading || null } : f;
+});
+/** Where a seated person's bubble points: over the head of the picture drawn — a pack's figure can be taller than the
+ * built-in one (#2558: a 134 px figure had its face under the bubble); never lower than the built-in spot. */
+export function speakerAt(sk, look, at) {
+  const top = sk.charBox ? sk.charBox(look, at).y + 2 : Infinity;
+  return { x: at.x + 10, y: Math.min(at.y - 50, top) };
+}
+/** The pose an area's seats are for: the first state (asleep, working, calling, idle) the pack sends there. */
+const GHOST_POSE = [["paused", "paused"], ["stopped", "paused"], ["working", "working"], ["needs", "needs"], ["crashed", "needs"], ["stuck", "needs"], ["idle", "idle"]];
+/** How faint Edit layout's figures are: seen through, yet readable over a busy picture (a dimmed person is 0.35). */
+const GHOST_ALPHA = 0.6;
+/** Edit layout's faint figures: one on each seat no one is on, { x, y, look } (the pack's default set; drawn at GHOST_ALPHA). */
+export function ghostsOf(pack, people = []) {
+  const taken = (s) => people.some((q) => Math.abs(q.at.x - s.x) < 2 && Math.abs(q.at.y - s.y) < 2);
+  const out = [];
+  for (const [name, a] of Object.entries(pack.areas)) {
+    const hit = GHOST_POSE.find(([st]) => pack.stateZones && pack.stateZones[st] === name);
+    const pose = hit ? hit[1] : "idle";
+    for (const s of a.seats) if (!taken(s)) out.push({ x: s.x, y: s.y, look: { key: `ghost:${name}`, name: "", label: "", state: pose, pose, coat: "#8a8f99", free: true } });
+  }
+  return out;
+}
+/** 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);
+/**
+ * Whether an agent's act (office_set, #2578) holds now: not past its end; its person not called (a call wins) nor
+ * asleep; and no new work begun since — `seen` (kept by the page) remembers each act whose person was seen not working,
+ * so working again after that (or after acting while idle) is new work, and the act gives way. The turn it acted in
+ * (working at the time) keeps it.
+ */
+export function actLive(a, state, at = Date.now(), seen = null) {
+  if (!a || at >= a.until || CALLING.has(state) || ASLEEP.has(state)) return false;
+  if (!seen) return true;
+  const k = `${a.instance}@${a.since ?? a.until}`;
+  if (state !== "working") { seen.add(k); return true; }
+  return !seen.has(k) && (!a.state || a.state === "working");
+}
+/** How far beside the person an agent going to them stands. */
+const ACT_BESIDE = 48;
+/** Where an agent's act sends it at `t`: its point, beside the person it goes to (where they are now), or null. */
+export function actTarget(a, L, walkers, t) {
+  if (a.x !== undefined) return { x: a.x, y: a.y };
+  if (!a.person) return null;
+  const d = desksOf(L).find((x) => x.node.name === a.person), there = (walkers && walkers.at(a.person, t)) || (d && d.seat);
+  return there ? { x: Math.round(Math.min(L.width, there.x + ACT_BESIDE)), y: Math.round(there.y) } : null;
+}
+/**
+ * A look in its agent's own pose (office_set, #2578) while its act holds, else as it is. In bed for the night (#2568,
+ * `look.night`) it is asleep, as for mail (#2569): bedtime wins over an act.
+ */
+function actPosed(p, look) {
+  const act = look && p.acts && p.acts.get(look.name);
+  return act && act.pose && actLive(act, look.night ? "paused" : look.state, Date.now(), p.actSeen) ? { ...look, pose: officePose(act.pose) } : look;
 }
 /** The back and front layers: pictures of the scene at `ls` layer px per logical unit (`tagsOff`: no name tags but the Find box's matches). */
 function paintLayers(p, env, ls, tagsOff = false) {
@@ -248,6 +311,8 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
   T();
   const speakers = [], tags = [];
   const up = still ? [] : p.flights.frame(ms, p.L);
+  // Mail from another office (#2564): flying in at the door, or on the floor until its person picks it up.
+  const post = still || !p.mail || !p.zones ? [] : p.mail.frame(ms > 0 ? ms : now(), p.L, p.walkers);
   let walking = false;
   if (p.zones) {
     // Furniture under the people; the people (nearest last) with the furniture whose depth is "y" among them, by base
@@ -259,18 +324,26 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
       if (at.walking) walking = true;
       return { d, at, look: p.looks.get(d.key) };
     }).sort((x, y) => x.at.y - y.at.y);
-    const furniture = sk.pack.furniture;
-    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 }))]
+    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 })) : [])]
       .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, p.active.has(f.id), ms, env);
-    for (const { f, p: q } of band) {
-      if (f) { sk.drawFurniture(ctx, f, p.active.has(f.id), ms, env); continue; }
+    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 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; }
+      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; }
       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 } };
-      sk.drawCharacter(ctx, box, q.at.walking ? { ...q.look, pose: "walk", heading: q.at.heading } : q.look, ms, env);
-      if (!q.at.walking) speakers.push({ look: q.look, x: q.at.x + 10, y: q.at.y - 50, area: q.d.area });
+      // 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);
+      const look = q.at.walking ? { ...q.look, pose: "walk", heading: q.at.heading } : posed;
+      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, 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 || p.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);
     // Who found no spot in an area: a count in its corner (never over its name).
     for (const [ar, n] of p.L.crowd || []) if (p.L.areas[ar] && sk.drawCrowd) sk.drawCrowd(ctx, p.L.areas[ar], n, env);
@@ -281,8 +354,10 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
       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)); }
   } else {
-    for (const d of p.desks) { const look = p.looks.get(d.key); sk.drawCharacter(ctx, d, 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 }); }
     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;
@@ -294,8 +369,11 @@ function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false, defer
   const bubbles = [];
   for (const sp of speakers) {
     if (sp.look.dim || sp.look.pose === "away") continue;
-    const b = bubbleAt(sp.look.name, sp.look.state, ms, linesFor(sp.look.state, p.lang, sk.pack, p.lines));
-    if (b) bubbles.push({ key: sp.look.name, area: sp.area, state: sp.look.state, calling: CALLING.has(sp.look.state), rank: bubbleRank(sp.look.state), shown: b.shown,
+    const says = sp.look.night ? "paused" : sp.look.state;                // asleep at night: its "Zzz…" lines
+    // What an agent says itself (office_set, #2578): whole, kept over the area's thinning like a call.
+    const act = p.acts && p.acts.get(sp.look.name), own = actLive(act, says, Date.now(), p.actSeen) && act.say ? act.say : null;
+    const b = own ? { text: own, shown: [...own].length } : bubbleAt(sp.look.name, says, ms, linesFor(says, p.lang, sk.pack, p.lines));
+    if (b) bubbles.push({ key: sp.look.name, area: sp.area, state: sp.look.state, calling: CALLING.has(sp.look.state), rank: own ? 0 : bubbleRank(sp.look.state), shown: b.shown,
       box: bubbleBox(ctx, sp.x, sp.y, b.text), tail: { x: sp.x, y: sp.y }, sp, b });
   }
   // A crowded area speaks less (thinBubbles: calls, then work, a few at most); no bubble covers a name tag. `defer`
@@ -303,7 +381,7 @@ 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;
+  return walking || up.length > 0 || p.flights.size() > 0 || post.some((it) => it.t > 0);
 }
 /**
  * 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
@@ -356,6 +434,11 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
   const [filter, setFilter] = useState(() => store.filter());
   const [style, setStyle] = useState(() => store.skin());
   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());
+  const [nightNow, setNightNow] = useState(() => isNight());
+  useEffect(() => { if (!nightOn) return undefined; setNightNow(isNight()); const h = setInterval(() => setNightNow(isNight()), NIGHT.TICK); return () => clearInterval(h); }, [nightOn]);
+  const night = nightOn && nightNow;
   const [lobbyOn, setLobbyOn] = useState(() => store.lobbyTile());       // #2554: All offices' lobby tile
   const [packs, setPacks] = useState([]);                             // the skin packs the host keeps: [{ id, name, sha }]
   const [packSkins, setPackSkins] = useState(() => new Map());        // id@sha → a loaded skin, or null (not a pack)
@@ -406,6 +489,24 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     const off = sub ? lease.hold(sub("offices", () => { void read(); })) : null;
     return () => { if (off) off(); };
   }, [lease, store]);
+  // #2578: what agents do here by their own hand (office_set) — on opening, then as the stream brings it.
+  // 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.
+  const [acts, setActs] = useState([]);
+  const actSeen = useRef(new Set());
+  useEffect(() => {
+    if (!lease) return undefined;
+    let heard = 0;                                                   // reads begun and events heard: the newest wins
+    const read = async () => { const at = ++heard, d = await store.acts(); if (lease.current() && d && at === heard) setActs(d); };
+    void read();
+    const sub = appStore.get().streamOn;
+    const polled = () => globalThis.document?.body?.dataset?.webTransport === "poll" || appStore.get().connection === "polling";
+    const offs = sub ? [lease.hold(sub("office_acts", (d) => { heard++; if (d && Array.isArray(d.acts)) setActs(actsOk(d.acts, d.now)); else void read(); })),
+      lease.hold(sub("connection", (c) => { if (c === "live") void read(); }))] : [];
+    const h = lease.interval(() => { if (polled() && !globalThis.document?.hidden) void read(); }, POLL_MS);
+    return () => { for (const off of offs) off(); lease.clear(h); };
+  }, [lease, store]);
   // The skin packs: on opening, and again whenever the stream says one was uploaded or deleted.
   useEffect(() => {
     if (!lease) return undefined;
@@ -489,17 +590,20 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     return withOverrides(baseSkin, zones, custom);
   }, [baseSkin, zones, custom, layout, layoutStale]);
   const skin = placed.skin;
+  // While Edit layout is open: a faint figure on every seat, in the pose its area is for (#2558), so a seat is placed by
+  // what will stand, sit or lie there, not by a dot.
+  const ghosts = zones && !!layout && !layoutStale;
   const keep = (n) => !(hideAsleep && ASLEEP.has(n.state));
   const single = useMemo(() => {
     if (overview) return { rooms: [], width: 1, height: 1 };            // All offices: the tiles below
     const all = custom ? membersOf(custom, view) : [...new Map(officeRooms(view, filter).flatMap((r) => r.nodes).map((n) => [n.name, n])).values()];
     const nodes = all.filter(keep);
-    if (zones) { const z = zonesLayout(skin.pack, nodes, seatsRef.current); seatsRef.current = z.seats; return z; }
+    if (zones) { const z = zonesLayout(skin.pack, nodes, seatsRef.current, { night }); seatsRef.current = z.seats; return z; }
     // The desks wrap at the stage's width at the scale they open on (desksK: a pixel level near one CSS px a unit).
     const deskW = Math.max(240, Math.floor(width / desksK(ratio)));
     if (!custom) return autoLayout(officeRooms(view, filter).map((r) => (hideAsleep ? { ...r, nodes: r.nodes.filter(keep) } : r)), { width: deskW });
     return officeScene(custom, nodes, skin, false, deskW);
-  }, [overview, view, filter, custom, width, ratio, skin, hideAsleep]);
+  }, [overview, view, filter, custom, width, ratio, skin, hideAsleep, night]);
   // ── #2554: All offices' tiles — each stored office (then the lobby: whoever is in no office) laid out as its own view
   // lays it out, in its own style (desks wrap at a cell's width), with its own seats, walkers and flights ──
   const lobbyAll = useMemo(() => (overview ? lobbyNodes(stored, view) : []), [overview, stored, view]);
@@ -516,24 +620,45 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
       const sk = withOverrides(base, z, sp.lobby ? null : sp.office).skin;
       const seatKey = `${sp.key}@${pk || base.id}`;
       // A desks office is as large as its rooms (cropped: no margins, no corridors outside them).
-      const TL0 = officeScene(sp.office, sp.nodes.filter(keep), sk, z, OV.CELL_W, tileSeats.current.get(seatKey)), TL = z ? TL0 : cropToRooms(TL0);
+      const TL0 = officeScene(sp.office, sp.nodes.filter(keep), sk, z, OV.CELL_W, tileSeats.current.get(seatKey), night), TL = z ? TL0 : cropToRooms(TL0);
       if (z) tileSeats.current.set(seatKey, TL0.seats);
       return { key: sp.key, name: sp.name, lobby: sp.lobby, count: sp.nodes.length, skin: sk, zones: z, L: TL, prefix: `${sp.key}\u0001`,
         walkers: mine(tileWalkers, sp.key, createWalkers), flights: mine(tileFlights, sp.key, createFlights) };
     });
-  }, [overview, stored, view, packs, packSkins, hideAsleep, lobbyOn, lobbyAll, style]);
+  }, [overview, stored, view, packs, packSkins, 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]);
   // 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]);
-  useEffect(() => { flights.sync(traffic || [], now(), still); }, [traffic]);
-  // Zones: everyone's seat is where they walk to.
+  // #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
+  // acts drew nothing there) the line and the pose show; nobody walks (the host refuses go there).
+  const actsHere = useMemo(() => new Map(custom && !overview ? acts.filter((a) => a.office === custom.id).map((a) => [a.instance, a]) : []), [acts, custom, overview]);
+  const mailKey = `${custom ? custom.id : AUTO_ID}@${baseSkin.id}`;
+  const mail = useMemo(() => { const m = createMail(); m.prime(traffic || []); return m; }, [mailKey]);
+  useEffect(() => { flights.sync(traffic || [], now(), still); if (zones && !overview && mail.sync(traffic || [], now(), L, still)) loop.current?.wake(); }, [traffic, mail]);
+  // Zones: everyone's seat is where they walk to — an idle person now and then strolls near it and back (#2560; not
+  // with reduced motion, nor while Edit layout is open: the seats are being placed); someone with mail from another
+  // office walks to it first (#2564). An NPC drawn as furniture with a `walk` strolls near its spot alike (#2596).
+  const wander = zones && !overview && !still && !layout;
   useEffect(() => {
-    if (!zones || overview) return;
-    walkers.sync(new Map(desksOf(L).map((d) => [d.node.name, d.seat])), now(), L, still);
-    loop.current?.wake();
-  }, [L]);
+    if (!zones || overview) return undefined;
+    const go = () => {
+      const t = now(), to = walkTargets(desksOf(L), L, t, wander, skin.pack.furniture, night);
+      // An act's walk; not someone in bed for the night (#2568: bedtime wins, as for mail).
+      for (const d of desksOf(L)) { const a = actsHere.get(d.node.name), at = !d.night && actLive(a, d.node.state, Date.now(), actSeen.current) ? actTarget(a, L, walkers, t) : null; if (at) to.set(d.node.name, at); }
+      for (const [name, at] of mail.targets(L, t)) to.set(name, at);
+      walkers.sync(to, t, L, still);
+      // Reduced motion has no loop: drawn again here, or an act's walk (set after the scene was drawn) never shows.
+      if (still) { if (scene.current && !globalThis.document?.hidden) draw(0); } else loop.current?.wake();
+    };
+    go();
+    if (still) return undefined;
+    const h = setInterval(go, WANDER.TICK);
+    return () => clearInterval(h);
+  }, [L, wander, mail, skin, night, actsHere]);
   // …and in each tile on a zones style; the traffic within a tile is its own, between tiles the overview's.
   useEffect(() => {
     for (const tl of tiles) if (tl.zones) tl.walkers.sync(new Map(desksOf(tl.L).map((d) => [d.node.name, d.seat])), now(), tl.L, still);
@@ -647,7 +772,7 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     const fitted0 = zones || overview;                                 // All offices opens whole, as a zones scene
     return { v: overview ? fitL(fitMode) : openingView(L.width, L.height, size, ratio, fitted0, fitMode), fit: fitted0 };
   };
-  // An office (or style) opened: its kept view, else its opening (zones fitted; desks from the top left). A resize fits
+  // An office (or style) opened: its kept view, else its opening (zones fitted; desks from the top left, or centred where smaller). A resize fits
   // a fitted view again (and opens an untouched one again); a view a person moved keeps the same point in the middle.
   // Either way it is then kept on the scene (clampPan): a kept view from a bigger panel cannot leave it off-screen.
   const opened = useRef(null), sized = useRef(null);
@@ -776,13 +901,13 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     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), 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] }));
       scene.current = { ...base, overview: true, parts, lay: arranged };
     } else {
-      scene.current = { ...base, overview: false, part: partOf(L, looks, skin, zones, walkers, flights) };
+      scene.current = { ...base, overview: false, part: { ...partOf(L, looks, skin, zones, walkers, flights), ghosts, night, mail, acts: actsHere, actSeen: actSeen.current } };
     }
     if (still) draw(0); else loop.current?.wake();
-  }, [L, looks, skin, pal, size.w, size.h, ratio, matte, overview, tiles, tileLooks, arranged]);
+  }, [L, looks, skin, pal, size.w, size.h, ratio, matte, overview, tiles, tileLooks, arranged, ghosts, night, mail, actsHere]);
 
   /** One frame at `ms` (0: still); whether anything is moving (in the air, or someone walking). */
   function draw(ms) {
@@ -815,10 +940,12 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     }
     for (const say of said) say();
     const up = still ? [] : cross.frame(ms, s.parts);
-    if (up.length) {
-      ctx.setTransform(a, 0, 0, a, ox, oy);
-      const prop = skinFor("pixel").drawProp;
-      for (const it of up) prop(ctx, it, ms, env);
+    // Each drawn by its sender's tile's skin (#2562: their own prop, else that pack's for its kind), at that tile's scale;
+    // a sender in no tile drawn: the built-in item, in overview units.
+    for (const it of up) {
+      const from = senderTile(s.parts, it.from);
+      if (from) { ctx.setTransform(a * from.tile.s, 0, 0, a * from.tile.s, ox, oy); from.skin.drawProp(ctx, { ...it, x: it.x / from.tile.s, y: it.y / from.tile.s }, ms, env); }
+      else { ctx.setTransform(a, 0, 0, a, ox, oy); skinFor("pixel").drawProp(ctx, it, ms, env); }
     }
     return moving || up.length > 0 || cross.size() > 0;
   }
@@ -1012,6 +1139,7 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
         </select></label>
         <${People} nodes=${everyone} pinned=${f.pinned} onChange=${(pinned) => setF({ ...f, pinned })} />` : null}
       <label class="check oo-hide-asleep"><input type="checkbox" checked=${hideAsleep} onChange=${() => { const v = !hideAsleep; store.saveHideAsleep(v); setHideAsleep(v); setTip(null); }} /><span>${to("hideAsleep")}</span></label>
+      ${zones || overview ? html`<label class="check oo-night"><input type="checkbox" checked=${nightOn} onChange=${() => { const v = !nightOn; store.saveNightOn(v); setNightOn(v); }} /><span>${to("nightOn")}</span></label>` : null}
       ${overview ? html`<label class="check oo-lobby-tile" title=${lobbyAll.length ? undefined : to("lobbyEveryone")}><input type="checkbox" checked=${lobbyOn && lobbyAll.length > 0}
         disabled=${!lobbyAll.length} onChange=${() => { const v = !lobbyOn; store.saveLobbyTile(v); setLobbyOn(v); setTip(null); }} /><span>${to("lobbyTile")}</span></label>
         ${lobbyAll.length ? null : html`<span class="muted oo-note oo-lobby-none">${to("lobbyEveryone")}</span>`}` : null}
@@ -1035,7 +1163,7 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
           : 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}
+      ${layout ? html`<${LayoutEditor} key=${layout.id} base=${layout.base} start=${layout.start} place=${placeOverlay} dock=${!fs}
         stale=${layoutStale ? t("orgl.stale") : ""} onChange=${onDraft} onSave=${saveLayout} onClose=${closeLayout} />` : null}
       ${tipText ? html`<div ref=${tipRef} class="oo-tip" role="tooltip">
         <strong>${tipText.primary}</strong>${tipText.secondary ? html` <span class="muted mono">${tipText.secondary}</span>` : null}