@songsid/agend 2.3.1 → 2.3.2-beta.2

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,8 +2,10 @@
 // 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";
@@ -22,6 +24,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,12 +40,79 @@ 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"];
 
+/** 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) {
   for (;;) {
@@ -49,7 +122,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,7 +142,7 @@ 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
@@ -129,7 +202,8 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
         <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>
+            ${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,6 +215,7 @@ 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>

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

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