@songsid/agend 2.3.1 → 2.3.2-beta.10

package/dist/ui/chat-thread.js

@@ -14,7 +14,7 @@ import { chatTime, chatTimeFull, onDayChange } from "./chat-time.js";
 import { textLinkSegments } from "/assets/app-route.js";
 
 const R = () => globalThis.AgendChatRender;
-/** #1589: the public link shows attachments as downloads only (its page says so: <body data-public-link="1">). */
+/** #1589: the public link plays no media in the page (its page says so: <body data-public-link="1">); #2547: its text cards show. */
 const PUBLIC_LINK = () => globalThis.document?.body?.dataset?.publicLink === "1";
 /** #1589: how much of a text attachment is shown before "Show all". */
 export const TEXT_PREVIEW_LINES = 200;
@@ -146,7 +146,7 @@ export function createThread(list, scroller, opts) {
     // #2272: reply to it — a hover strip at its top right (phones: swipe left or long-press; R on a focused message).
     const key = msgKey(x);
     const act = opts.canReply?.() === false ? "" : `<div data-trust="thread-control" class="msg-actions"><button type="button" class="chip-btn icon-only" data-act="reply" data-arg="${escAttr(key)}" title="${escAttr(tr("chat.reply"))}" aria-label="${escAttr(tr("chat.reply"))}">${REPLY}</button></div>`;
-    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${R().reactionsHtml(x.reactions, tr("chat.reactedBy", x.instance || ""))}${tools}</div>`;
+    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK(), textPreviews: true })}${buttons}</div>${R().reactionsHtml(x.reactions, tr("chat.reactedBy", x.instance || ""))}${tools}</div>`;
   }
   /**
    * A message this page is sending (chat-store.js): its own bubble at once, dimmed with "Sending…" until the server

package/dist/ui/first-run.js

@@ -5,7 +5,7 @@ import { html } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
 import { appStore, createStore, useStore } from "/assets/app-store.js";
 import { navigate } from "/assets/app-nav.js";
-import { settingsPath } from "/assets/app-route.js";
+import { sectionPath } from "/assets/app-route.js";
 import { Icon } from "/assets/ui-icons.js";
 
 register("firstRun", {
@@ -52,7 +52,7 @@ export function useFirstRun() {
 export function FirstRunCard({ onConnect }) {
   const shown = useFirstRun();
   if (!shown) return null;
-  const connect = onConnect || (() => { local.set({ wizard: true }); navigate(settingsPath("bots")); });
+  const connect = onConnect || (() => { local.set({ wizard: true }); navigate(sectionPath("bots")); });
   return html`<section class="card first-run" aria-labelledby="first-run-title">
     <h3 id="first-run-title"><${Icon} name="plug" size=${14} /> ${t("firstRun.title")}</h3>
     <p>${t("firstRun.body")}</p>

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

@@ -0,0 +1,114 @@
+// The Fleet canvases' shared view (#1918's org chart canvas, fleet-canvas.js; #2540's Office, fleet-office.js): the pure
+// pan and zoom math and the pointer gestures, so both feel the same. A view is { k, x, y }: a world point (wx, wy) is
+// drawn at (x + wx·k, y + wy·k) in the viewport's CSS px.
+//
+// - One pointer pans once it has moved a few px (so a tap still opens what it is on); two pinch: the world point under
+//   their old midpoint goes to the new one, scaled by how their span changed (a two-finger move pans too). The pointer
+//   is captured only once it drags: a capture at once would send the tap's click to the viewport, not what was tapped.
+//   The click that ends a drag or a pinch opens nothing.
+// - The wheel zooms about the pointer; + / − / 0 zoom in, out and fit (with no Alt, Ctrl or Meta held).
+
+export const K_MIN = 0.2, K_MAX = 2.5;
+/** `k` kept in [lo, hi] (the org canvas's range by default). */
+export const clampK = (k, lo = K_MIN, hi = K_MAX) => Math.min(hi, Math.max(lo, k));
+
+/**
+ * The view that shows region `r` in a `size` viewport: as large as fits (at most `maxK`), centred across, from the top.
+ * `minK`: never smaller than this (a phone's opening); a region that is then wider than the viewport starts at its left.
+ * `widthOnly`: fit the width, let the height run on (the opening: the rest is below).
+ */
+export function fitView(r, size, { margin = 24, minK = K_MIN, maxK = 1.25, widthOnly = false } = {}) {
+  const across = (size.w - 2 * margin) / r.w, down = widthOnly ? Infinity : (size.h - 2 * margin) / r.h;
+  const k = clampK(Math.max(minK, Math.min(across, down, maxK)));
+  const x = r.w * k > size.w - 2 * margin ? margin - r.x * k : size.w / 2 - (r.x + r.w / 2) * k;
+  return { k, x, y: margin - r.y * k };
+}
+/** The view at scale `k` with the viewport point (cx, cy) on the same world point as in `v`. */
+export function zoomTo(v, k, cx, cy) {
+  return { k, x: cx - (cx - v.x) * (k / v.k), y: cy - (cy - v.y) * (k / v.k) };
+}
+/** Zoom by `f` about the viewport point (cx, cy): the canvas point under it stays under it. */
+export function zoomAt(v, f, cx, cy) { return zoomTo(v, clampK(v.k * f), cx, cy); }
+/** A pinch step at scale `k`: the world point under the old midpoint goes to the new midpoint. */
+export function pinchTo(v, from, to, k) {
+  const wx = (from.mid.x - v.x) / v.k, wy = (from.mid.y - v.y) / v.k;
+  return { k, x: to.mid.x - wx * k, y: to.mid.y - wy * k };
+}
+/** A pinch step: the canvas point under the old midpoint goes to the new midpoint, the zoom scaled by the spans' ratio. */
+export function pinchView(v, from, to) { return pinchTo(v, from, to, clampK(v.k * (to.dist / from.dist))); }
+/** Viewport CSS px → world units, and back. */
+export const toWorld = (v, sx, sy) => ({ x: (sx - v.x) / v.k, y: (sy - v.y) / v.k });
+export const toScreen = (v, wx, wy) => ({ x: v.x + wx * v.k, y: v.y + wy * v.k });
+/** The view at the same scale with world point (wx, wy) in the middle of a `size` viewport. */
+export const centreOn = (v, size, wx, wy) => ({ k: v.k, x: size.w / 2 - wx * v.k, y: size.h / 2 - wy * v.k });
+/**
+ * The world point a click on an overview at `rect` (its client box) shows, for an overview of world box `box` drawn
+ * whole and centred in it (an SVG viewBox's xMidYMid meet); null when it has no size.
+ */
+export function miniPoint(rect, box, clientX, clientY) {
+  if (!rect || !rect.width || !rect.height) return null;
+  const scale = Math.min(rect.width / box.w, rect.height / box.h);
+  return { x: box.x + (clientX - rect.left - (rect.width - box.w * scale) / 2) / scale, y: box.y + (clientY - rect.top - (rect.height - box.h * scale) / 2) / scale };
+}
+/** The wheel's zoom factor (a notch is about 15%; a trackpad's small deltas zoom a little). */
+export const wheelFactor = (e) => Math.exp(-e.deltaY * 0.0015);
+/** What a key does to the view: "in", "out", "fit" (0), or null (any other key, or with Alt, Ctrl or Meta). */
+export function zoomKey(e) {
+  if (e.altKey || e.ctrlKey || e.metaKey) return null;
+  if (e.key === "+" || e.key === "=") return "in";
+  if (e.key === "-" || e.key === "_") return "out";
+  if (e.key === "0") return "fit";
+  return null;
+}
+
+// ── The pointer gestures: the state lives in the caller's ref (it outlives a render), the handlers are made per render ──
+
+export const SLOP = 5;
+/** A fresh gesture state: the pointers down, how far the one has moved, the pinch's last span, whether to swallow the click. */
+export const gestureState = () => ({ pts: new Map(), moved: 0, span: null, swallow: false });
+/**
+ * The handlers for state `d`: `el()` the element measured and captured; `pan(dx, dy)` and `pinch(from, to)` move the
+ * view. `move` returns whether it was a drag or a pinch (not a hover). `busy()`: a drag or pinch is under way.
+ */
+export function gestures(d, { el, pan, pinch }) {
+  const spanOf = () => {
+    const [a, b] = [...d.pts.values()], r = el().getBoundingClientRect();
+    return { mid: { x: (a.x + b.x) / 2 - r.left, y: (a.y + b.y) / 2 - r.top }, dist: Math.hypot(a.x - b.x, a.y - b.y) };
+  };
+  return {
+    down(e) {
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (d.pts.size === 1) { d.moved = 0; d.swallow = false; d.span = null; }
+      else if (d.pts.size === 2) { d.swallow = true; d.span = spanOf(); }
+    },
+    move(e) {
+      const prev = d.pts.get(e.pointerId);
+      if (!prev) return false;
+      d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (d.pts.size === 1) {
+        d.moved += Math.abs(e.clientX - prev.x) + Math.abs(e.clientY - prev.y);
+        if (d.moved < SLOP) return false;
+        if (!d.swallow) { d.swallow = true; try { el().setPointerCapture(e.pointerId); } catch { /* gone already */ } }
+        pan(e.clientX - prev.x, e.clientY - prev.y);
+        return true;
+      }
+      if (d.pts.size !== 2) return true;
+      d.swallow = true;
+      const next = spanOf();
+      if (d.span && d.span.dist > 0 && next.dist > 0) pinch(d.span, next);
+      d.span = next;
+      return true;
+    },
+    up(e) {
+      d.pts.delete(e.pointerId);
+      // Back to one finger: it pans on at once (the pinch already swallows the click); two again: a new span.
+      d.span = d.pts.size === 2 ? spanOf() : null;
+      if (d.pts.size === 1) d.moved = SLOP;
+      // The click that ends a drag comes after this: let it be swallowed, then forget.
+      if (d.swallow && !d.pts.size) setTimeout(() => { if (!d.pts.size) d.swallow = false; }, 0);
+    },
+    clickCapture(e) { if (d.swallow) { e.preventDefault(); e.stopPropagation(); } },
+    busy: () => d.swallow && d.pts.size > 0,
+  };
+}

package/dist/ui/fleet-canvas.js

@@ -32,6 +32,7 @@ import { Office } from "./fleet-office.js";
 import { OC, REST_KEY, SUM_LINE, canvasLayout, hits, needle, openingRegion, summaryRows } from "./fleet-canvas-layout.js";
 import { createTrafficStore, FAR_K, HEAD, POLL_MS, sendingBy, trafficEdges } from "./fleet-traffic.js";
 import { routeScene } from "./fleet-route-scene.js";
+import { K_MAX, K_MIN, fitView, gestureState, gestures, miniPoint, pinchView, wheelFactor, zoomAt, zoomKey } from "./fleet-canvas-view.js";
 import { createRouteClient } from "./fleet-route.js";
 
 register("orgc", {
@@ -62,32 +63,9 @@ const tc = (k, ...v) => t(`orgc.${k}`, ...v);
 
 export { OC, REST_KEY, SUM_LINE, canvasLayout, openingRegion, summaryRows };
 
-// ── The view: pan, zoom, fit (pure helpers; the component applies them) ──
+// ── The view: pan, zoom, fit and the gestures (fleet-canvas-view.js, shared with the Office view) ──
 
-export const K_MIN = 0.2, K_MAX = 2.5;
-const clampK = (k) => Math.min(K_MAX, Math.max(K_MIN, k));
-/**
- * The view that shows region `r` in a `size` viewport: as large as fits (at most `maxK`), centred across, from the top.
- * `minK`: never smaller than this (a phone's opening); a region that is then wider than the viewport starts at its left.
- * `widthOnly`: fit the width, let the height run on (the opening: the rest is below).
- */
-export function fitView(r, size, { margin = 24, minK = K_MIN, maxK = 1.25, widthOnly = false } = {}) {
-  const across = (size.w - 2 * margin) / r.w, down = widthOnly ? Infinity : (size.h - 2 * margin) / r.h;
-  const k = clampK(Math.max(minK, Math.min(across, down, maxK)));
-  const x = r.w * k > size.w - 2 * margin ? margin - r.x * k : size.w / 2 - (r.x + r.w / 2) * k;
-  return { k, x, y: margin - r.y * k };
-}
-/** A pinch step: the canvas point under the old midpoint goes to the new midpoint, the zoom scaled by the spans' ratio. */
-export function pinchView(v, from, to) {
-  const k = clampK(v.k * (to.dist / from.dist));
-  const wx = (from.mid.x - v.x) / v.k, wy = (from.mid.y - v.y) / v.k;
-  return { k, x: to.mid.x - wx * k, y: to.mid.y - wy * k };
-}
-/** Zoom by `f` about the viewport point (cx, cy): the canvas point under it stays under it. */
-export function zoomAt(v, f, cx, cy) {
-  const k = clampK(v.k * f);
-  return { k, x: cx - (cx - v.x) * (k / v.k), y: cy - (cy - v.y) * (k / v.k) };
-}
+export { K_MIN, K_MAX, fitView, pinchView, zoomAt };
 
 // ── Per device ──
 
@@ -316,7 +294,7 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
   const L = useMemo(() => canvasLayout(view, folded, { narrow, label: (s, n) => `${n} ${STATE_LABEL(s)}` }), [view, folded, narrow]);
   const svgRef = useRef(null), worldRef = useRef(null), miniRef = useRef(null), miniViewRef = useRef(null);
   const vp = useRef(null);
-  const drag = useRef({ pts: new Map(), moved: 0, span: null, swallow: false });
+  const drag = useRef(gestureState());
   const size = () => {
     const r = svgRef.current ? svgRef.current.getBoundingClientRect() : null;
     return r && r.width > 0 && r.height > 0 ? { w: r.width, h: r.height } : { w: 960, h: 600 };
@@ -364,58 +342,20 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
   });
 
   const open = openChat;
-  // The click that ends a drag or a pinch opens nothing and folds nothing.
-  const onClickCapture = (e) => { if (drag.current.swallow) { e.preventDefault(); e.stopPropagation(); } };
+  // The click that ends a drag or a pinch opens nothing and folds nothing (fleet-canvas-view.js gestures).
+  const g = gestures(drag.current, { el: () => svgRef.current, pan: (dx, dy) => set({ ...vp.current, x: vp.current.x + dx, y: vp.current.y + dy }),
+    pinch: (from, to) => set(pinchView(vp.current, from, to)) });
+  const onClickCapture = g.clickCapture;
   const onWheel = (e) => {
     e.preventDefault();
     const r = svgRef.current.getBoundingClientRect();
-    set(zoomAt(vp.current, Math.exp(-e.deltaY * 0.0015), e.clientX - r.left, e.clientY - r.top));
-  };
-  // One pointer pans (after a few pixels, so a tap still opens a card); two pinch: the canvas point under their old
-  // midpoint goes to the new one, scaled by how their span changed (so a two-finger move pans too). The pointer is
-  // captured only once it drags: a capture at once would send the tap's click to the canvas, not the card.
-  const spanOf = () => {
-    const [a, b] = [...drag.current.pts.values()], r = svgRef.current.getBoundingClientRect();
-    return { mid: { x: (a.x + b.x) / 2 - r.left, y: (a.y + b.y) / 2 - r.top }, dist: Math.hypot(a.x - b.x, a.y - b.y) };
-  };
-  const onPointerDown = (e) => {
-    if (e.pointerType === "mouse" && e.button !== 0) return;
-    const d = drag.current;
-    d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (d.pts.size === 1) { d.moved = 0; d.swallow = false; d.span = null; }
-    else if (d.pts.size === 2) { d.swallow = true; d.span = spanOf(); }
-  };
-  const onPointerMove = (e) => {
-    const d = drag.current, prev = d.pts.get(e.pointerId);
-    if (!prev) return;
-    d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (d.pts.size === 1) {
-      d.moved += Math.abs(e.clientX - prev.x) + Math.abs(e.clientY - prev.y);
-      if (d.moved < 5) return;
-      if (!d.swallow) { d.swallow = true; try { svgRef.current.setPointerCapture(e.pointerId); } catch { /* gone already */ } }
-      set({ ...vp.current, x: vp.current.x + e.clientX - prev.x, y: vp.current.y + e.clientY - prev.y });
-      return;
-    }
-    if (d.pts.size !== 2) return;
-    d.swallow = true;
-    const next = spanOf();
-    if (d.span && d.span.dist > 0 && next.dist > 0) set(pinchView(vp.current, d.span, next));
-    d.span = next;
-  };
-  const onPointerUp = (e) => {
-    const d = drag.current;
-    d.pts.delete(e.pointerId);
-    // Back to one finger: it pans on at once (the pinch already swallows the click); two again: a new span.
-    d.span = d.pts.size === 2 ? spanOf() : null;
-    if (d.pts.size === 1) d.moved = 5;
-    // The click that ends a drag comes after this: let it be swallowed, then forget.
-    if (d.swallow && !d.pts.size) setTimeout(() => { if (!d.pts.size) d.swallow = false; }, 0);
+    set(zoomAt(vp.current, wheelFactor(e), e.clientX - r.left, e.clientY - r.top));
   };
+  const onPointerDown = g.down, onPointerMove = g.move, onPointerUp = g.up;
   const onKeyDown = (e) => {
     if (e.altKey || e.ctrlKey || e.metaKey) return;
-    if (e.key === "+" || e.key === "=") { e.preventDefault(); zoomBy(1.25); return; }
-    if (e.key === "-" || e.key === "_") { e.preventDefault(); zoomBy(0.8); return; }
-    if (e.key === "0") { e.preventDefault(); fit(); return; }
+    const z = zoomKey(e);
+    if (z) { e.preventDefault(); if (z === "fit") fit(); else zoomBy(z === "in" ? 1.25 : 0.8); return; }
     const dir = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
     const card = e.target && e.target.closest ? e.target.closest(".oc-node") : null;
     if (card && (e.key === "Enter" || e.key === " ")) {
@@ -436,12 +376,10 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
     if (c) show(c, false);
   };
   const onMini = (e) => {
-    const m = miniRef.current, r = m.getBoundingClientRect(), box = miniBox(L);
-    if (!r.width || !r.height) return;
-    const scale = Math.min(r.width / box.w, r.height / box.h);
-    const wx = box.x + (e.clientX - r.left - (r.width - box.w * scale) / 2) / scale, wy = box.y + (e.clientY - r.top - (r.height - box.h * scale) / 2) / scale;
+    const w = miniPoint(miniRef.current.getBoundingClientRect(), miniBox(L), e.clientX, e.clientY);
+    if (!w) return;
     const s = size(), v = vp.current;
-    set({ k: v.k, x: s.w / 2 - wx * v.k, y: s.h / 2 - wy * v.k });
+    set({ k: v.k, x: s.w / 2 - w.x * v.k, y: s.h / 2 - w.y * v.k });
   };
 
   const box = miniBox(L);

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

@@ -2,13 +2,16 @@
 // editor). An admin session adds an office, renames it, chooses its style (Desks / Studio), picks who is in it (whole
 // teams, or one instance at a time; none: everyone) and deletes one — then saves the whole list with the rev it read
 // (PUT /ui/offices; a change made meanwhile is a 409: read again, nothing overwritten). A stored office's layout (seats,
-// paths) is kept as it is; drawing one is for a later editor. Never offered to a guest, the public link or a read-only
-// session (the host refuses them too).
+// paths) and its layout overrides (Edit layout, fleet-office-layout.js) are kept as they are. Skin packs (#2513): the
+// packs the host keeps are styles to choose; an admin uploads one here (its manifest.json and its PNGs, picked together
+// or as a folder — sent at once, checked by the host, which keeps it whole) or deletes one. Never offered to a guest,
+// the public link or a read-only session (the host refuses them too).
 import { html, useMemo, useState } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
-import { Dialog } from "/assets/ui-dialog.js";
+import { SidePanel } from "/assets/side-panel.js";
 import { toast } from "/assets/ui-toast.js";
 import { nodeText } from "./fleet-org.js";
+import { BUILT_IN_SKINS } from "./fleet-office-skin.js";
 
 register("orge", {
   en: {
@@ -22,6 +25,10 @@ register("orge", {
     rateLimited: "Too many saves. Try again in a minute.",
     failed: "The offices were not saved ({0}).", layoutKept: "Its seats and paths are kept.",
     styleUnknown: "{0} (not available here: drawn as Desks)",
+    packs: "Skin packs", packsLead: "Styles drawn from an artist's pictures. Pick a pack's manifest.json and all its PNG files together (or its folder).",
+    packsNone: "No skin packs yet.", upload: "Upload a skin pack", uploadFolder: "Upload a folder", uploading: "Uploading…", uploaded: "Skin pack “{0}” uploaded.",
+    uploadFailed: "The skin pack was not uploaded: {0}", noManifest: "no manifest.json among the files", badManifest: "manifest.json is not JSON",
+    removePack: "Delete {0}", removedPack: "Skin pack “{0}” deleted.", removeFailed: "The skin pack was not deleted ({0}).",
   },
   "zh-TW": {
     edit: "編輯辦公室", title: "辦公室", lead: "這個 fleet 的每個人在辦公室檢視中都會看到這些辦公室。沒有選任何成員的辦公室會顯示全部。",
@@ -34,11 +41,78 @@ register("orge", {
     rateLimited: "儲存太頻繁，請一分鐘後再試。",
     failed: "辦公室沒有儲存（{0}）。", layoutKept: "它的座位與路徑會保留。",
     styleUnknown: "{0}（這裡沒有：以辦公桌顯示）",
+    packs: "外觀包", packsLead: "用畫師的圖片畫出的風格。請把外觀包的 manifest.json 和所有 PNG 檔一起選取（或選整個資料夾）。",
+    packsNone: "還沒有外觀包。", upload: "上傳外觀包", uploadFolder: "上傳資料夾", uploading: "上傳中…", uploaded: "已上傳外觀包「{0}」。",
+    uploadFailed: "外觀包沒有上傳：{0}", noManifest: "檔案中沒有 manifest.json", badManifest: "manifest.json 不是 JSON",
+    removePack: "刪除 {0}", removedPack: "已刪除外觀包「{0}」。", removeFailed: "外觀包沒有刪除（{0}）。",
   },
 });
 const te = (k, ...v) => t(`orge.${k}`, ...v);
 export const MAX_OFFICES = 20;
-const STYLES = ["pixel", "studio"];
+const STYLES = BUILT_IN_SKINS;
+
+/** A file's bytes as base64 (in slices: a large picture never goes through one huge string call). */
+export function base64Of(bytes) {
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 0x8000) out += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  return btoa(out);
+}
+/**
+ * What an upload sends, from the files a person picked: { body } or { error }. A folder's files keep their path inside
+ * it (its first part, the folder's own name, dropped), so a manifest naming "sprites/idle.png" finds it.
+ */
+export async function packUpload(files) {
+  const named = [];
+  for (const f of files) {
+    const rel = typeof f.webkitRelativePath === "string" && f.webkitRelativePath ? f.webkitRelativePath.split("/").slice(1).join("/") : f.name;
+    named.push({ name: rel || f.name, file: f });
+  }
+  const man = named.find((x) => x.name === "manifest.json") || named.find((x) => x.name.endsWith("/manifest.json") || x.file.name === "manifest.json");
+  if (!man) return { error: te("noManifest") };
+  let manifest;
+  try { manifest = JSON.parse(await man.file.text()); } catch { return { error: te("badManifest") }; }
+  const out = {};
+  for (const x of named) {
+    if (x === man || !/\.png$/i.test(x.name)) continue;
+    out[x.name] = base64Of(new Uint8Array(await x.file.arrayBuffer()));
+  }
+  return { body: { manifest, files: out } };
+}
+
+function Packs({ packs, store }) {
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState("");
+  const send = async (e) => {
+    const input = e.target, files = [...(input.files || [])];
+    if (!files.length) return;
+    setBusy(true); setMsg(te("uploading"));
+    try {
+      const up = await packUpload(files);
+      if (up.error) { setMsg(te("uploadFailed", up.error)); return; }
+      const r = await store.uploadSkin(up.body);
+      if (r.ok) { setMsg(""); toast(te("uploaded", (r.pack && r.pack.name) || up.body.manifest.id)); }
+      else setMsg(te("uploadFailed", r.detail ? `${r.error} — ${r.detail}` : r.error));
+    } finally { setBusy(false); try { input.value = ""; } catch { /* a read-only value */ } }
+  };
+  const remove = async (pk) => {
+    setBusy(true); setMsg("");
+    try {
+      const r = await store.deleteSkin(pk.id);
+      if (r.ok) toast(te("removedPack", pk.name)); else setMsg(te("removeFailed", r.error || r.status));
+    } finally { setBusy(false); }
+  };
+  return html`<fieldset class="oe-packs oe-form" disabled=${busy}>
+    <legend class="oe-label">${te("packs")}</legend>
+    <p class="note">${te("packsLead")}</p>
+    ${packs.length ? html`<ul class="oe-pack-list">${packs.map((pk) => html`<li key=${pk.id} class="oe-pack" data-pack=${pk.id}>
+      <span>${pk.name}</span>${pk.name !== pk.id ? html` <span class="muted mono">${pk.id}</span>` : null}
+      <button type="button" class="btn btn-sm btn-danger oe-pack-remove" onClick=${() => remove(pk)} aria-label=${te("removePack", pk.name)}>${te("remove")}</button></li>`)}</ul>`
+      : html`<p class="note" id="oePacksNone">${te("packsNone")}</p>`}
+    <label class="btn btn-sm oe-upload">${te("upload")}<input type="file" class="sr-only oe-upload-files" multiple accept=".json,.png,application/json,image/png" onChange=${send} /></label>
+    <label class="btn btn-sm oe-upload">${te("uploadFolder")}<input type="file" class="sr-only oe-upload-dir" webkitdirectory="" multiple onChange=${send} /></label>
+    ${msg ? html`<p class="note oe-pack-msg" role="status">${msg}</p>` : null}
+  </fieldset>`;
+}
 
 /** A new office's id: unique among `taken`, the store's pattern ([A-Za-z0-9_-], never "auto"). */
 export function newOfficeId(taken, rand = Math.random) {
@@ -49,7 +123,7 @@ export function newOfficeId(taken, rand = Math.random) {
 }
 /** What is sent: the office as the host stores it (no empty layout key). */
 export function officeForSave(o) {
-  return { id: o.id, name: o.name.trim(), skin: o.skin, members: [...o.members], ...(o.layout ? { layout: o.layout } : {}) };
+  return { id: o.id, name: o.name.trim(), skin: o.skin, members: [...o.members], ...(o.layout ? { layout: o.layout } : {}), ...(o.overrides ? { overrides: o.overrides } : {}) };
 }
 
 function Members({ office, view, everyone, onChange }) {
@@ -69,13 +143,16 @@ function Members({ office, view, everyone, onChange }) {
  * the snapshot in force (the page keeps a newer one it already shows: #2431 review); `current()` that snapshot now (null:
  * not known), read when the person chooses after a 409 (#2449 review); `onClose`.
  */
-export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current = () => null, onSaved, onClose }) {
+export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () => 0, current = () => null, onSaved, onClose }) {
   // The draft and the rev it was read at go together (#2424 review): a list the stream re-reads meanwhile never moves
   // the rev under an older draft (a save would then overwrite what it never showed). After a 409 the person chooses
   // (#2431): keep their edits (on the newer rev: Save then replaces what was saved meanwhile, knowingly) or load the
   // newer list — never their draft thrown away unasked.
-  const [base, setBase] = useState(() => ({ rev, draft: offices.map((o) => ({ ...o, members: [...o.members] })) }));
+  // `saved`: the list the draft is measured against (as read, or the newer one loaded) — the draft holds changes when
+  // it differs (#2585: leaving the page beside the docked editor then asks first).
+  const [base, setBase] = useState(() => ({ rev, saved: JSON.stringify(offices), draft: offices.map((o) => ({ ...o, members: [...o.members] })) }));
   const draft = base.draft;
+  const dirty = JSON.stringify(draft) !== base.saved;
   const setDraft = (next) => setBase((b) => ({ ...b, draft: typeof next === "function" ? next(b.draft) : next }));
   const [open, setOpen] = useState(null);                              // the office whose members are shown
   const [busy, setBusy] = useState(false);
@@ -84,14 +161,14 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
   const copy = (list) => list.map((o) => ({ ...o, members: [...o.members] }));
   // The choice takes the snapshot in force when it is made: the stream may have read a newer one since the 409 (#2449).
   const inForce = () => current() || conflict;
-  const keepMine = () => { const now = inForce(); setBase((b) => ({ rev: now.rev, draft: b.draft })); setConflict(null); setMsg(te("keptMine")); };
-  const loadTheirs = () => { const now = inForce(); setBase({ rev: now.rev, draft: copy(now.offices) }); setOpen(null); setConflict(null); setMsg(""); };
+  const keepMine = () => { const now = inForce(); setBase((b) => ({ rev: now.rev, saved: JSON.stringify(now.offices), draft: b.draft })); setConflict(null); setMsg(te("keptMine")); };
+  const loadTheirs = () => { const now = inForce(); setBase({ rev: now.rev, saved: JSON.stringify(now.offices), draft: copy(now.offices) }); setOpen(null); setConflict(null); setMsg(""); };
   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 set = (id, patch) => setDraft((d) => d.map((o) => (o.id === id ? { ...o, ...patch } : o)));
   const add = () => {
     if (draft.length >= MAX_OFFICES) return;
     const id = newOfficeId(new Set(draft.map((o) => o.id)));
-    setDraft((d) => [...d, { id, name: te("newName"), skin: "pixel", members: [], layout: null }]);
+    setDraft((d) => [...d, { id, name: te("newName"), skin: "cozy", members: [], layout: null }]);   // #2631: a new office is cozy
     setOpen(id);
   };
   // Everything is frozen from Save until its answer (and a 409's re-read) is in (#2424 review): no edit made meanwhile
@@ -118,7 +195,8 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
   };
   const actions = html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${te("cancel")}</button>
     <button type="button" class="btn btn-primary" id="oeSave" onClick=${save} disabled=${busy || !!conflict}>${te("save")}</button>`;
-  return html`<${Dialog} title=${te("title")} onClose=${onClose} actions=${actions} busy=${busy} wide=${true}>
+  // #2585: docked on the right on a wide desk (the page beside it in use); the centred dialog elsewhere.
+  return html`<${SidePanel} title=${te("title")} onClose=${onClose} actions=${actions} busy=${busy} dirty=${dirty}>
     <p class="note">${te("lead")}</p>
     <fieldset class="oe-form" disabled=${busy}>
     ${draft.length ? null : html`<p class="note" id="oeNone">${te("none")}</p>`}
@@ -128,8 +206,9 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
           <input type="text" class="oe-name" maxlength="60" value=${o.name} onInput=${(e) => set(o.id, { name: e.target.value })} /></label>
         <label class="oe-field"><span class="oe-label">${te("styleLabel")}</span>
           <select class="tb-select oe-style" value=${o.skin} onChange=${(e) => set(o.id, { skin: e.target.value })}>
-            ${STYLES.map((s) => html`<option key=${s} value=${s}>${t(`orgo.style_${s}`)}</option>`)}
-            ${STYLES.includes(o.skin) ? null : html`<option key=${o.skin} value=${o.skin}>${te("styleUnknown", o.skin)}</option>`}</select></label>
+            ${STYLES.filter((s) => !packs.some((pk) => pk.id === s)).map((s) => html`<option key=${s} value=${s}>${t(`orgo.style_${s}`)}</option>`)}
+            ${packs.map((pk) => html`<option key=${`pack:${pk.id}`} value=${pk.id}>${pk.name}</option>`)}
+            ${STYLES.includes(o.skin) || packs.some((pk) => pk.id === o.skin) ? null : html`<option key=${o.skin} value=${o.skin}>${te("styleUnknown", o.skin)}</option>`}</select></label>
         <button type="button" class="btn btn-sm oe-members-btn" aria-expanded=${open === o.id ? "true" : "false"} onClick=${() => setOpen(open === o.id ? null : o.id)}>
           ${te("members")}: ${o.members.length ? te("membersN", o.members.length) : te("everyone")}</button>
         <button type="button" class="btn btn-sm btn-danger oe-remove" onClick=${() => { setDraft((d) => d.filter((x) => x.id !== o.id)); if (open === o.id) setOpen(null); }}>${te("remove")}</button>
@@ -141,9 +220,10 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
     ${draft.length >= MAX_OFFICES ? html`<span class="note">${te("tooMany", MAX_OFFICES)}</span>` : null}
     </fieldset>
     ${msg ? html`<p class="note oe-msg" role="status">${msg}</p>` : null}
+    ${store.uploadSkin ? html`<${Packs} packs=${packs} store=${store} />` : null}
     ${conflict ? html`<div class="oe-conflict">
       <button type="button" class="btn btn-sm" id="oeKeepMine" onClick=${keepMine} disabled=${busy}>${te("keepMine")}</button>
       <button type="button" class="btn btn-sm" id="oeLoadTheirs" onClick=${loadTheirs} disabled=${busy}>${te("loadTheirs")}</button>
     </div>` : null}
-  </${Dialog}>`;
+  </${SidePanel}>`;
 }