@wildwinter/app-shell 0.38.0 → 0.39.0

package/dist/index.cjs

@@ -149,6 +149,204 @@ function initTooltips(opts = {}) {
   window.addEventListener("blur", () => hide());
 }
 
+// src/icons.ts
+var icon = {
+  // --- dismissing and revealing ---------------------------------------------
+  /** Close a panel, a dialog, a popover. Patterpad's, twelve times over. */
+  close: "\u2715",
+  /** The overflow menu on a document or a row: "more about this". */
+  more: "\u22EF",
+  /** Collapsed disclosure, pointing at what would open. */
+  collapsed: "\u25B8",
+  /** Expanded disclosure. */
+  expanded: "\u25BE",
+  /** A dropdown's affordance, where it is not a real <select>. */
+  dropdown: "\u25BE",
+  // --- moving through things ------------------------------------------------
+  /** Back / previous, in a breadcrumb or a stepper. */
+  back: "\u2039",
+  /** Forward / next. */
+  forward: "\u203A",
+  /** Up one, in a list. */
+  up: "\u2191",
+  /** Down one. */
+  down: "\u2193",
+  // --- state ----------------------------------------------------------------
+  /** Done, applied, agreed. */
+  tick: "\u2713",
+  /** Somebody else holds this: the version-control lock. */
+  locked: "\u2298",
+  /** Read-only on disk with no other holder: the resting state of everything
+   *  in a lock-based working copy that nobody has checked out yet. */
+  readOnly: "\u25CB",
+  /** YOU hold this one: checked out / opened by the current user, still yours to
+   *  edit. Shares its glyph with `note`, which the table permits: an entry is a
+   *  MEANING, and two meanings may draw the same shape. */
+  checkedOut: "\u270E",
+  /** Tracked, with local changes not yet committed. */
+  modified: "\u25CF",
+  /** Not in version control yet: new since the last commit. */
+  untracked: "+",
+  /** Something needs attention but is not fatal. */
+  warning: "\u203C",
+  /** A live thing: the running position, an active marker. */
+  dot: "\u25CF",
+  /** Play, in the sense of "run this". */
+  play: "\u25B6",
+  /** Start the thing again from the top: a play session, a sweep. Named for the
+   *  act, not the arrow, which is the table's rule. */
+  restart: "\u27F2",
+  /** The three ways a collection can be shown. Named by what you get rather than
+   *  by the glyph, so a second app can pick the same three without copying
+   *  somebody's taste in symbols. */
+  viewCards: "\u25A6",
+  viewTable: "\u2630",
+  viewNode: "\u25C8",
+  // --- handling -------------------------------------------------------------
+  /** The drag grip on a reorderable row. */
+  grip: "\u283F",
+  /** Add one of whatever this list holds. */
+  add: "+",
+  // --- annotation -----------------------------------------------------------
+  /** Documentation notes: the pencil. Both apps had chosen it independently,
+   *  which is the happiest way for a vocabulary entry to arrive. */
+  note: "\u270E",
+  /** A comment thread. Speech, not a pencil: documentation states the reason,
+   *  comments are the conversation, and the two must never look alike. */
+  comment: "\u275D"
+};
+var STROKE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.571" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">';
+var FILL = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">';
+var stroked = (inner) => `${STROKE}${inner}</svg>`;
+var filled = (inner) => `${FILL}${inner}</svg>`;
+var DISC = filled('<circle cx="12" cy="12" r="6"/>');
+var DISC_LARGE = filled('<circle cx="12" cy="12" r="9"/>');
+var DRAWN = {
+  // --- dismissing and revealing ---------------------------------------------
+  /** Close a panel, a dialog, a popover. (x) */
+  close: stroked('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'),
+  /** The overflow menu on a document or a row: "more about this". (ellipsis) */
+  more: stroked('<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>'),
+  /** Collapsed disclosure, pointing at what would open. (chevron-right) */
+  collapsed: stroked('<path d="m9 18 6-6-6-6"/>'),
+  /** Expanded disclosure. (chevron-down) */
+  expanded: stroked('<path d="m6 9 6 6 6-6"/>'),
+  /** A dropdown's affordance, where it is not a real <select>. (chevron-down) */
+  dropdown: stroked('<path d="m6 9 6 6 6-6"/>'),
+  // --- moving through things ------------------------------------------------
+  /** Back / previous, in a breadcrumb or a stepper. (chevron-left) */
+  back: stroked('<path d="m15 18-6-6 6-6"/>'),
+  /** Forward / next. (chevron-right) */
+  forward: stroked('<path d="m9 18 6-6-6-6"/>'),
+  /** Up one, in a list. (arrow-up) */
+  up: stroked('<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>'),
+  /** Down one. (arrow-down) */
+  down: stroked('<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>'),
+  /** History back. (arrow-left) */
+  arrowLeft: stroked('<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>'),
+  /** History forward; "go there". (arrow-right) */
+  arrowRight: stroked('<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>'),
+  // --- state ----------------------------------------------------------------
+  /** Done, applied, agreed. (check) */
+  tick: stroked('<path d="M20 6 9 17l-5-5"/>'),
+  /** Somebody else holds this: the version-control lock. (lock) */
+  locked: stroked('<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>'),
+  /** Read-only on disk with no other holder. (lock-open) An open lock rather
+   *  than a struck-out eye: this state is not a prohibition. Nobody holds the
+   *  file, saving checks it out, and it is the resting state of everything the
+   *  author has not touched yet under a lock-based VCS. eye-off would say "you
+   *  cannot", which is false here; the open lock says "not held", beside
+   *  `locked`, which is the shut one, so the two read as a pair. */
+  readOnly: stroked('<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>'),
+  /** YOU hold this one: checked out, still yours to edit. (pencil) */
+  checkedOut: stroked('<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>'),
+  /** Tracked, with local changes not yet committed. (a disc; see DISC) */
+  modified: DISC,
+  /** Not in version control yet: new since the last commit. (plus) */
+  untracked: stroked('<path d="M5 12h14"/><path d="M12 5v14"/>'),
+  /** Something needs attention but is not fatal. (triangle-alert) */
+  warning: stroked('<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>'),
+  /** A live thing: the running position, an active marker. (a disc) */
+  dot: DISC,
+  /** Play, in the sense of "run this". (play) */
+  play: stroked('<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>'),
+  /** Start the thing again from the top: a play session, a sweep. (rotate-ccw) */
+  restart: stroked('<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>'),
+  /** The three ways a collection can be shown, named by what you get. */
+  /** Cards. (layout-grid) */
+  viewCards: stroked('<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>'),
+  /** A table. (rows-3: a ruled box, which is a table. `list` is bullets, and
+   *  the view is not a list.) */
+  viewTable: stroked('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M21 9H3"/><path d="M21 15H3"/>'),
+  /** A node graph. (waypoints: four nodes on edges reads as a graph.
+   *  `git-fork` reads as version control, which this family also draws, and
+   *  a picture that means two things is the fault this table exists to
+   *  prevent.) */
+  viewNode: stroked('<path d="m10.586 5.414-5.172 5.172"/><path d="m18.586 13.414-5.172 5.172"/><path d="M6 12h12"/><circle cx="12" cy="20" r="2"/><circle cx="12" cy="4" r="2"/><circle cx="20" cy="12" r="2"/><circle cx="4" cy="12" r="2"/>'),
+  /** Record: the disc, in whatever colour the button is. (a disc; see DISC_LARGE) */
+  record: DISC_LARGE,
+  // --- handling -------------------------------------------------------------
+  /** The drag grip on a reorderable row. (grip-vertical) */
+  grip: stroked('<circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>'),
+  /** Add one of whatever this list holds. (plus) */
+  add: stroked('<path d="M5 12h14"/><path d="M12 5v14"/>'),
+  /** Connect: to a server, a live link, a running game. (plug) */
+  connect: stroked('<path d="M12 22v-5"/><path d="M15 8V2"/><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"/><path d="M9 8V2"/>'),
+  /** Search. (search) */
+  search: stroked('<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>'),
+  /** Keep this window on top. (pin) */
+  pin: stroked('<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>'),
+  /** Settings. (settings) */
+  settings: stroked('<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/>'),
+  // --- annotation -----------------------------------------------------------
+  /** Documentation notes: a document with lines on it. (file-text) The glyph
+   *  table drew a pencil and shared it with `checkedOut`; the drawn set gives
+   *  the two meanings two shapes, and notes get the document, which is what
+   *  the shell's own noteFilled/noteOutline pair had always drawn. */
+  note: stroked('<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>'),
+  /** A comment thread. Speech, not a document: documentation states the
+   *  reason, comments are the conversation, and the two must never look
+   *  alike. (message-square) */
+  comment: stroked('<path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/>')
+};
+var iconSvg = {
+  ...DRAWN,
+  /** A document with lines: notes exist on this thing. (legacy, 16 grid) */
+  noteFilled: '<svg viewBox="0 0 16 16" width="13" height="13" fill="currentColor" fill-rule="evenodd" aria-hidden="true"><path d="M3.4 1.4h5.3L12.6 5.3v8.1a1.2 1.2 0 0 1-1.2 1.2H3.4a1.2 1.2 0 0 1-1.2-1.2V2.6A1.2 1.2 0 0 1 3.4 1.4ZM4.9 6.8h6.2v1.1H4.9Zm0 2.1h6.2v1.1H4.9Zm0 2.1h3.7v1.1H4.9Z"/></svg>',
+  /** The same document, empty: nothing written here yet. (legacy, 16 grid) */
+  noteOutline: '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true"><path d="M3.4 2h4.9l3.9 3.9v7.5a1 1 0 0 1-1 1H3.4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z"/><path d="M8.3 2.2v3.8h3.8"/><path d="M4.9 8h6.2M4.9 10h6.2M4.9 12h3.7" stroke-width="0.95"/></svg>'
+};
+var ICON_NAMES = Object.keys(DRAWN);
+var ICON_SIZE = 14;
+function iconHtml(name, size = ICON_SIZE) {
+  return DRAWN[name].replace("<svg ", `<svg width="${size}" height="${size}" data-icon="${name}" `);
+}
+var templates = /* @__PURE__ */ new Map();
+function iconNode(name, size = ICON_SIZE) {
+  let tpl = templates.get(name);
+  if (!tpl) {
+    const holder = document.createElement("template");
+    holder.innerHTML = DRAWN[name];
+    tpl = holder.content.firstElementChild;
+    tpl.setAttribute("data-icon", name);
+    templates.set(name, tpl);
+  }
+  const node2 = tpl.cloneNode(true);
+  node2.setAttribute("width", String(size));
+  node2.setAttribute("height", String(size));
+  return node2;
+}
+var BY_GLYPH = /* @__PURE__ */ new Map();
+for (const [name, glyph] of Object.entries(icon)) {
+  if (!BY_GLYPH.has(glyph)) BY_GLYPH.set(glyph, name);
+}
+function iconNameOfGlyph(glyph) {
+  return BY_GLYPH.get(glyph);
+}
+function isIconName(s) {
+  return Object.prototype.hasOwnProperty.call(DRAWN, s);
+}
+
 // src/dom.ts
 function el(tag, classNameOrProps, ...children) {
   const node2 = document.createElement(tag);
@@ -169,12 +367,14 @@ function el(tag, classNameOrProps, ...children) {
   checkTooltipHost();
   return node2;
 }
-function iconBtn(glyph, title, onClick, disabled = false, danger = false) {
+function iconBtn(name, title, onClick, disabled = false, danger = false) {
   const b = el("button", `shell-icon${danger ? " danger" : ""}`);
   b.type = "button";
-  b.textContent = glyph;
   b.dataset["tip"] = title;
   b.setAttribute("aria-label", title);
+  const word = isIconName(name) ? name : iconNameOfGlyph(name);
+  if (word) b.append(iconNode(word));
+  else b.textContent = name;
   b.disabled = disabled;
   b.addEventListener("click", onClick);
   return b;
@@ -195,6 +395,7 @@ function moveItem(arr, i, delta) {
   [arr[i], arr[j]] = [arr[j], arr[i]];
   return true;
 }
+var CHIP_ICON = 10;
 function tagChips(holder, onChange) {
   const wrap = el("div", "shell-tags");
   const input = el("input", "shell-tag-input");
@@ -203,10 +404,10 @@ function tagChips(holder, onChange) {
   input.spellcheck = false;
   const makeChip = (v) => {
     const chip = el("span", "shell-tag", v);
-    const x = el("button", "shell-tag-x", "\u2715");
+    const x = el("button", "shell-tag-x", iconNode("close", CHIP_ICON));
     x.type = "button";
-    x.dataset["tip"] = `remove ${v}`;
-    x.setAttribute("aria-label", `remove ${v}`);
+    x.dataset["tip"] = `Remove ${v}`;
+    x.setAttribute("aria-label", `Remove ${v}`);
     x.addEventListener("click", () => {
       holder.values = (holder.values ?? []).filter((o) => o !== v);
       chip.remove();
@@ -235,6 +436,120 @@ function tagChips(holder, onChange) {
   wrap.append(input);
   return wrap;
 }
+function stageChips(holder, onChange) {
+  const wrap = el("div", "shell-tags shell-stages");
+  const input = el("input", "shell-tag-input");
+  input.type = "text";
+  input.placeholder = "Add stage";
+  input.spellcheck = false;
+  const control = (name, tip2, disabled, onClick) => {
+    const b = el("button", "shell-tag-x shell-tag-move", iconNode(name, CHIP_ICON));
+    b.type = "button";
+    b.dataset["tip"] = tip2;
+    b.setAttribute("aria-label", tip2);
+    b.disabled = disabled;
+    b.addEventListener("click", onClick);
+    return b;
+  };
+  const rebuild = () => {
+    for (const c of Array.from(wrap.children)) if (c !== input) c.remove();
+    const stages = holder.stages ?? [];
+    stages.forEach((v, i) => {
+      const chip = el("span", "shell-tag", `${i + 1}. ${v}`);
+      chip.dataset["stage"] = v;
+      chip.append(
+        control(
+          "back",
+          `Move ${v} earlier`,
+          i === 0,
+          () => {
+            if (moveItem(stages, i, -1)) {
+              rebuild();
+              onChange?.();
+            }
+          }
+        ),
+        control(
+          "forward",
+          `Move ${v} later`,
+          i === stages.length - 1,
+          () => {
+            if (moveItem(stages, i, 1)) {
+              rebuild();
+              onChange?.();
+            }
+          }
+        )
+      );
+      const x = el("button", "shell-tag-x", iconNode("close", CHIP_ICON));
+      x.type = "button";
+      x.dataset["tip"] = `Remove ${v}`;
+      x.setAttribute("aria-label", `Remove ${v}`);
+      x.addEventListener("click", () => {
+        holder.stages = (holder.stages ?? []).filter((o) => o !== v);
+        rebuild();
+        onChange?.();
+      });
+      chip.append(x);
+      wrap.insertBefore(chip, input);
+    });
+  };
+  const commit = () => {
+    const v = input.value.trim();
+    if (v && !(holder.stages ?? []).includes(v)) {
+      (holder.stages ??= []).push(v);
+      rebuild();
+      onChange?.();
+    }
+    input.value = "";
+  };
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit();
+    }
+  });
+  input.addEventListener("blur", commit);
+  wrap.append(input);
+  rebuild();
+  return wrap;
+}
+var reorderDragId = null;
+var clearDropMarks = (host) => host.querySelectorAll(".drop-before, .drop-after").forEach((e) => e.classList.remove("drop-before", "drop-after"));
+function wireReorder(el2, id, axis, onMove) {
+  el2.draggable = true;
+  el2.dataset["reorderId"] = id;
+  const host = () => el2.parentElement ?? el2;
+  el2.addEventListener("dragstart", (e) => {
+    reorderDragId = id;
+    el2.classList.add("dragging");
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", id);
+    }
+  });
+  el2.addEventListener("dragend", () => {
+    reorderDragId = null;
+    el2.classList.remove("dragging");
+    clearDropMarks(host());
+  });
+  el2.addEventListener("dragover", (e) => {
+    if (!reorderDragId || reorderDragId === id) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    const r = el2.getBoundingClientRect();
+    const before = axis === "y" ? e.clientY < r.top + r.height / 2 : e.clientX < r.left + r.width / 2;
+    clearDropMarks(host());
+    el2.classList.add(before ? "drop-before" : "drop-after");
+  });
+  el2.addEventListener("dragleave", () => el2.classList.remove("drop-before", "drop-after"));
+  el2.addEventListener("drop", (e) => {
+    e.preventDefault();
+    const before = el2.classList.contains("drop-before");
+    clearDropMarks(host());
+    if (reorderDragId && reorderDragId !== id) onMove(reorderDragId, before, id);
+  });
+}
 
 // src/colour.ts
 var PALETTE_SIZE = 12;
@@ -256,79 +571,6 @@ function colourFor(name) {
   return PALETTE[colourIndex(name)];
 }
 
-// src/icons.ts
-var icon = {
-  // --- dismissing and revealing ---------------------------------------------
-  /** Close a panel, a dialog, a popover. Patterpad's, twelve times over. */
-  close: "\u2715",
-  /** The overflow menu on a document or a row: "more about this". */
-  more: "\u22EF",
-  /** Collapsed disclosure, pointing at what would open. */
-  collapsed: "\u25B8",
-  /** Expanded disclosure. */
-  expanded: "\u25BE",
-  /** A dropdown's affordance, where it is not a real <select>. */
-  dropdown: "\u25BE",
-  // --- moving through things ------------------------------------------------
-  /** Back / previous, in a breadcrumb or a stepper. */
-  back: "\u2039",
-  /** Forward / next. */
-  forward: "\u203A",
-  /** Up one, in a list. */
-  up: "\u2191",
-  /** Down one. */
-  down: "\u2193",
-  // --- state ----------------------------------------------------------------
-  /** Done, applied, agreed. */
-  tick: "\u2713",
-  /** Somebody else holds this: the version-control lock. */
-  locked: "\u2298",
-  /** Read-only on disk with no other holder: the resting state of everything
-   *  in a lock-based working copy that nobody has checked out yet. */
-  readOnly: "\u25CB",
-  /** YOU hold this one: checked out / opened by the current user, still yours to
-   *  edit. Shares its glyph with `note`, which the table permits: an entry is a
-   *  MEANING, and two meanings may draw the same shape. */
-  checkedOut: "\u270E",
-  /** Tracked, with local changes not yet committed. */
-  modified: "\u25CF",
-  /** Not in version control yet: new since the last commit. */
-  untracked: "+",
-  /** Something needs attention but is not fatal. */
-  warning: "\u203C",
-  /** A live thing: the running position, an active marker. */
-  dot: "\u25CF",
-  /** Play, in the sense of "run this". */
-  play: "\u25B6",
-  /** Start the thing again from the top: a play session, a sweep. Named for the
-   *  act, not the arrow, which is the table's rule. */
-  restart: "\u27F2",
-  /** The three ways a collection can be shown. Named by what you get rather than
-   *  by the glyph, so a second app can pick the same three without copying
-   *  somebody's taste in symbols. */
-  viewCards: "\u25A6",
-  viewTable: "\u2630",
-  viewNode: "\u25C8",
-  // --- handling -------------------------------------------------------------
-  /** The drag grip on a reorderable row. */
-  grip: "\u283F",
-  /** Add one of whatever this list holds. */
-  add: "+",
-  // --- annotation -----------------------------------------------------------
-  /** Documentation notes: the pencil. Both apps had chosen it independently,
-   *  which is the happiest way for a vocabulary entry to arrive. */
-  note: "\u270E",
-  /** A comment thread. Speech, not a pencil: documentation states the reason,
-   *  comments are the conversation, and the two must never look alike. */
-  comment: "\u275D"
-};
-var iconSvg = {
-  /** A document with lines: notes exist on this thing. */
-  noteFilled: '<svg viewBox="0 0 16 16" width="13" height="13" fill="currentColor" fill-rule="evenodd" aria-hidden="true"><path d="M3.4 1.4h5.3L12.6 5.3v8.1a1.2 1.2 0 0 1-1.2 1.2H3.4a1.2 1.2 0 0 1-1.2-1.2V2.6A1.2 1.2 0 0 1 3.4 1.4ZM4.9 6.8h6.2v1.1H4.9Zm0 2.1h6.2v1.1H4.9Zm0 2.1h3.7v1.1H4.9Z"/></svg>',
-  /** The same document, empty: nothing written here yet. */
-  noteOutline: '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true"><path d="M3.4 2h4.9l3.9 3.9v7.5a1 1 0 0 1-1 1H3.4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z"/><path d="M8.3 2.2v3.8h3.8"/><path d="M4.9 8h6.2M4.9 10h6.2M4.9 12h3.7" stroke-width="0.95"/></svg>'
-};
-
 // src/pane-shell.ts
 var DEFAULT_MAX = (w) => Math.min(640, w - 420);
 var openVar = { nav: "--nav-open-w", inspector: "--insp-open-w" };
@@ -341,6 +583,8 @@ function mountPaneShell(host, opts) {
     inspector: offered("inspector") && (opts.initial?.open?.inspector ?? true)
   };
   const width = { ...opts.initial?.width ?? {} };
+  const held = { nav: false, inspector: false };
+  const showing = (side) => open[side] && !held[side];
   const el2 = (tag, cls) => {
     const n = document.createElement(tag);
     if (cls) n.className = cls;
@@ -371,18 +615,28 @@ function mountPaneShell(host, opts) {
   host.append(root);
   if (!offered("nav")) navToggle.remove();
   if (!offered("inspector")) inspToggle.remove();
-  function applyToggleGlyph(side, button) {
-    const isOpen = open[side];
-    button.textContent = side === "nav" ? isOpen ? "\u2039" : "\u203A" : isOpen ? "\u203A" : "\u2039";
+  const defaultTip = (side, isOpen) => {
     const noun = cfg[side].label ?? side;
     const hint = cfg[side].shortcutHint ? ` (${cfg[side].shortcutHint})` : "";
-    button.title = `${isOpen ? "Hide" : "Show"} ${noun}${hint}`;
-    button.setAttribute("aria-label", button.title);
+    return `${isOpen ? "Hide" : "Show"} ${noun}${hint}`;
+  };
+  const tipFor = opts.tipFor ?? defaultTip;
+  function applyToggleGlyph(side, button) {
+    const isOpen = open[side];
+    button.replaceChildren(iconNode(side === "nav" ? isOpen ? "back" : "forward" : isOpen ? "forward" : "back"));
+    const tip2 = tipFor(side, isOpen);
+    button.dataset["tip"] = tip2;
+    button.setAttribute("aria-label", tip2);
     button.setAttribute("aria-pressed", String(isOpen));
   }
+  ensureTooltipHost();
   function apply() {
-    panes.classList.toggle(collapseClass.nav, !open.nav);
-    panes.classList.toggle(collapseClass.inspector, !open.inspector);
+    for (const side of ["nav", "inspector"]) {
+      const collapsed = !showing(side);
+      panes.classList.toggle(collapseClass[side], collapsed);
+      const also = opts.collapseAlso?.[side];
+      if (also) panes.classList.toggle(also, collapsed);
+    }
     panes.style.setProperty(openVar.nav, width.nav !== void 0 ? `${width.nav}px` : cfg.nav.defaultWidth);
     panes.style.setProperty(openVar.inspector, width.inspector !== void 0 ? `${width.inspector}px` : cfg.inspector.defaultWidth);
     applyToggleGlyph("nav", navToggle);
@@ -401,6 +655,11 @@ function mountPaneShell(host, opts) {
   function togglePane(side) {
     if (offered(side)) setPaneOpen(side, !open[side]);
   }
+  function holdClosed(side, next) {
+    if (held[side] === next) return;
+    held[side] = next;
+    apply();
+  }
   function resetWidths() {
     delete width.nav;
     delete width.inspector;
@@ -410,9 +669,11 @@ function mountPaneShell(host, opts) {
   navToggle.addEventListener("click", () => togglePane("nav"));
   inspToggle.addEventListener("click", () => togglePane("inspector"));
   function beginResize(side, startEvent) {
-    if (cfg[side].resizable === false || !open[side]) return;
+    if (cfg[side].resizable === false || !showing(side)) return;
     startEvent.preventDefault();
     const pane = side === "nav" ? navPane : inspPane;
+    const seam = side === "nav" ? navResizer : inspResizer;
+    seam.classList.add("dragging");
     const min = cfg[side].minWidth ?? 160;
     const max = cfg[side].maxWidth ?? DEFAULT_MAX;
     const startX = startEvent.clientX;
@@ -428,6 +689,7 @@ function mountPaneShell(host, opts) {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
       document.body.classList.remove("pane-resizing");
+      seam.classList.remove("dragging");
       width[side] = latest;
       persist();
     };
@@ -457,7 +719,8 @@ function mountPaneShell(host, opts) {
     inspector: inspInner,
     togglePane,
     setPaneOpen,
-    isOpen: (s) => open[s],
+    isOpen: showing,
+    holdClosed,
     resetWidths,
     state: snapshot,
     destroy: () => {
@@ -471,7 +734,8 @@ var EDIT_MENU = {
   undo: { label: "Undo", accelerator: "CmdOrCtrl+Z" },
   redo: { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z" },
   duplicate: { label: "Duplicate", accelerator: "CmdOrCtrl+D" },
-  find: { label: "Find\u2026", accelerator: "CmdOrCtrl+F" }
+  find: { label: "Find\u2026", accelerator: "CmdOrCtrl+F" },
+  replace: { label: "Replace\u2026", acceleratorMac: "Cmd+Alt+F", acceleratorOther: "Ctrl+H" }
 };
 var GO_MENU = {
   back: { label: "Back", acceleratorMac: "Ctrl+Cmd+Left", acceleratorOther: "Alt+Left" },
@@ -482,6 +746,38 @@ var PANE_MENU = {
   showInspector: { label: "Show Inspector", accelerator: "CmdOrCtrl+2" },
   resetView: { label: "Reset View" }
 };
+var FILE_MENU = {
+  newProject: { label: "New Project\u2026", accelerator: "CmdOrCtrl+N" },
+  openProject: { label: "Open Project\u2026", accelerator: "CmdOrCtrl+O" },
+  openRecent: { label: "Open Recent" },
+  noRecents: { label: "No Recent Projects" },
+  clearRecents: { label: "Clear Recents" },
+  closeProject: { label: "Close Project" },
+  save: { label: "Save", accelerator: "CmdOrCtrl+S" },
+  saveAs: { label: "Save As\u2026", accelerator: "Shift+CmdOrCtrl+S" },
+  projectSettings: { label: "Project Settings\u2026", accelerator: "CmdOrCtrl+," }
+};
+var PLAY_MENU = {
+  liveLink: { label: "Live Link" }
+};
+var REVIEW_MENU = {
+  reviewFeedback: { label: "Review Feedback", accelerator: "CmdOrCtrl+Shift+R" },
+  nextFeedback: { label: "Next Feedback", accelerator: "F8" },
+  previousFeedback: { label: "Previous Feedback", accelerator: "Shift+F8" },
+  coverageTest: { label: "Coverage Test\u2026", accelerator: "Shift+CmdOrCtrl+C" },
+  findPropertyUsage: { label: "Find Property Usage\u2026" },
+  showResolvedComments: { label: "Show Resolved Comments" }
+};
+var PUBLISH_MENU = {
+  playableHtml: { label: "Publish Playable HTML\u2026" },
+  bundle: { label: "Publish Bundle", accelerator: "Shift+CmdOrCtrl+B" },
+  autoRebuild: { label: "Auto Rebuild" }
+};
+var VIEW_MENU = {
+  projectOverview: { label: "Project Overview" },
+  upALevel: { label: "Up a Level", accelerator: "CmdOrCtrl+[" },
+  colourTheme: { label: "Colour Theme" }
+};
 
 // src/settings.ts
 function expandableRow(opts) {
@@ -525,6 +821,22 @@ function revealRow(within, name) {
   row.addEventListener("animationend", () => row.classList.remove("landed"), { once: true });
   return true;
 }
+function revealRowWhenReady(within, name, tries = 12) {
+  return new Promise((resolve) => {
+    const attempt = (left) => {
+      if (revealRow(within, name)) {
+        resolve(true);
+        return;
+      }
+      if (left <= 0) {
+        resolve(false);
+        return;
+      }
+      requestAnimationFrame(() => attempt(left - 1));
+    };
+    attempt(tries);
+  });
+}
 function focusNewRow(listEl) {
   const last = listEl?.lastElementChild;
   if (!(last instanceof HTMLElement)) return;
@@ -532,6 +844,7 @@ function focusNewRow(listEl) {
   const name = last.querySelector("input.set-name") ?? last.querySelector("input");
   name?.focus();
 }
+var DUP_MESSAGE = "Another row already has this name.";
 function dupGuard() {
   const items = [];
   const check = () => {
@@ -546,9 +859,9 @@ function dupGuard() {
       const dup = !!k && (counts.get(k) ?? 0) > 1;
       it.input.classList.toggle("invalid", dup);
       if (dup) {
-        it.input.title = "Duplicate name. Names must be unique.";
+        it.input.dataset["tip"] = DUP_MESSAGE;
         any = true;
-      } else if (it.input.title === "Duplicate name. Names must be unique.") it.input.removeAttribute("title");
+      } else if (it.input.dataset["tip"] === DUP_MESSAGE) delete it.input.dataset["tip"];
     }
     return any;
   };
@@ -594,7 +907,9 @@ function mountSettingsDialog(opts) {
     const tab = el("button", "settings-tab", s.label);
     tab.type = "button";
     tab.dataset["tab"] = s.id;
-    tab.addEventListener("click", () => showTab(s.id));
+    tab.addEventListener("click", () => {
+      if (!tab.classList.contains("is-disabled")) showTab(s.id);
+    });
     tabs.append(tab);
     tabFor.set(s.id, tab);
     const panel = el("section", "settings-panel");
@@ -608,6 +923,25 @@ function mountSettingsDialog(opts) {
     for (const [sid, t] of tabFor) t.classList.toggle("active", sid === id);
     for (const [sid, p] of panelFor) p.hidden = sid !== id;
   }
+  const usable = (s) => !tabFor.get(s.id)?.classList.contains("is-disabled");
+  function refreshTabs() {
+    for (const s of opts.sections) {
+      const tab = tabFor.get(s.id);
+      const reason = s.disabled?.() ?? null;
+      tab.classList.toggle("is-disabled", reason !== null);
+      if (reason !== null) {
+        tab.dataset["tip"] = reason;
+        tab.setAttribute("aria-disabled", "true");
+      } else {
+        delete tab.dataset["tip"];
+        tab.removeAttribute("aria-disabled");
+      }
+    }
+    if (!opts.sections.some((s) => s.id === active2 && usable(s))) {
+      const first = opts.sections.find(usable);
+      if (first) showTab(first.id);
+    }
+  }
   form.append(
     el("h2", "settings-title", opts.title),
     el("div", "settings-body", tabs, panels),
@@ -623,14 +957,15 @@ function mountSettingsDialog(opts) {
     e.preventDefault();
     error.hidden = true;
     for (const s of opts.sections) {
-      const bad = handles.get(s.id)?.firstInvalid?.();
-      if (bad) {
-        showTab(s.id);
-        bad.focus();
-        error.textContent = "Fix the highlighted fields first.";
-        error.hidden = false;
-        return;
-      }
+      const found = handles.get(s.id)?.firstInvalid?.();
+      if (!found) continue;
+      const bad = found instanceof HTMLElement ? found : found.el;
+      const message = (found instanceof HTMLElement ? void 0 : found.message) ?? bad.dataset["tip"];
+      showTab(s.id);
+      bad.focus();
+      error.textContent = message || "Fix the highlighted fields first.";
+      error.hidden = false;
+      return;
     }
     void (async () => {
       await opts.onSave();
@@ -647,25 +982,94 @@ function mountSettingsDialog(opts) {
       }
       error.hidden = true;
       showTab(tabId ?? active2 ?? opts.sections[0]?.id ?? "");
+      refreshTabs();
       dialog.showModal();
     },
+    refreshTabs,
     destroy() {
       dialog.remove();
     }
   };
 }
 
+// src/util.ts
+function plural(n, noun, pluralForm = `${noun}s`) {
+  return `${n} ${n === 1 ? noun : pluralForm}`;
+}
+function debounce(fn, ms) {
+  let timer3;
+  let pending;
+  const run = () => {
+    timer3 = void 0;
+    if (pending === void 0) return;
+    const args = pending;
+    pending = void 0;
+    fn(...args);
+  };
+  const debounced = ((...args) => {
+    pending = args;
+    if (timer3 !== void 0) clearTimeout(timer3);
+    timer3 = setTimeout(run, ms);
+  });
+  debounced.cancel = () => {
+    if (timer3 !== void 0) clearTimeout(timer3);
+    timer3 = void 0;
+    pending = void 0;
+  };
+  debounced.flush = () => {
+    if (timer3 !== void 0) clearTimeout(timer3);
+    run();
+  };
+  return debounced;
+}
+function isEditableTarget(t) {
+  if (!(t instanceof Element)) return false;
+  if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) return true;
+  if (t instanceof HTMLElement && t.isContentEditable === true) return true;
+  const attr = t.getAttribute("contenteditable");
+  return attr !== null && attr !== "false";
+}
+function formatCount(n) {
+  return n.toLocaleString();
+}
+var copyTimers = /* @__PURE__ */ new WeakMap();
+function copyWithFeedback(el2, text, ms = 1e3) {
+  const write = typeof navigator !== "undefined" && navigator.clipboard ? navigator.clipboard.writeText(text).catch(() => {
+  }) : Promise.resolve();
+  el2.classList.add("copied");
+  const prior = copyTimers.get(el2);
+  if (prior !== void 0) clearTimeout(prior);
+  copyTimers.set(el2, setTimeout(() => {
+    el2.classList.remove("copied");
+    copyTimers.delete(el2);
+  }, ms));
+  return write;
+}
+function relativeTime(date, now = Date.now()) {
+  const then = date instanceof Date ? date.getTime() : new Date(date).getTime();
+  if (!Number.isFinite(then)) return "";
+  const mins = Math.floor((now - then) / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${plural(mins, "minute")} ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours === 1) return "an hour ago";
+  if (hours < 24) return `${hours} hours ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "yesterday";
+  if (days < 7) return `${days} days ago`;
+  return new Date(then).toLocaleDateString(void 0, { day: "numeric", month: "short", year: "numeric" });
+}
+
 // src/tool-window-web.ts
-var PIN_ICON = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="17" x2="12" y2="22"/><path d="M9 10.8a2 2 0 0 1-1.1 1.8l-1.8.9A2 2 0 0 0 5 15.3V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.7a2 2 0 0 0-1.1-1.8l-1.8-.9A2 2 0 0 1 15 10.8V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>`;
 function pinButton(opts) {
   const b = el("button", "swin-pin");
   b.type = "button";
-  b.innerHTML = PIN_ICON;
+  b.append(iconNode("pin"));
   let pinned = opts.pinned;
   const reflect = () => {
     b.classList.toggle("on", pinned);
     b.setAttribute("aria-pressed", String(pinned));
-    const label2 = pinned ? "Pinned on top: click to unpin" : "Click to keep on top";
+    const label2 = pinned ? "Pinned on top. Click to unpin." : "Keep on top";
     b.dataset["tip"] = label2;
     b.setAttribute("aria-label", label2);
   };
@@ -680,6 +1084,61 @@ function pinButton(opts) {
     reflect();
   } };
 }
+var escSlot;
+var escWired = false;
+function wireEsc() {
+  if (escWired) return;
+  escWired = true;
+  window.addEventListener("keydown", (e) => {
+    if (e.key !== "Escape" || !escSlot) return;
+    if (e.defaultPrevented) return;
+    if (!escSlot.fromFields && isEditableTarget(e.target)) return;
+    if (escSlot.onEscape?.() === true) return;
+    escSlot.onClose();
+  });
+}
+function toolWindowHead(opts) {
+  const keep = (parts) => (parts ?? []).filter((p) => p !== null);
+  const pin = opts.pin ?? pinButton({ pinned: opts.pinned ?? true, onToggle: opts.onPin ?? (() => {
+  }) });
+  if (opts.esc !== false) {
+    escSlot = { onClose: opts.onClose, onEscape: opts.onEscape, fromFields: opts.esc === "always" };
+    wireEsc();
+  }
+  return el(
+    "header",
+    { className: `swin-head${opts.className ? ` ${opts.className}` : ""}` },
+    ...opts.title !== void 0 ? [el("span", { className: "swin-title", text: opts.title })] : [],
+    ...opts.tabs ? [opts.tabs] : [],
+    ...keep(opts.lead),
+    el("span", { className: "swin-spacer" }),
+    ...keep(opts.trail),
+    pin.el,
+    el("button", { className: "swin-close", tip: "Close (Esc)", onClick: opts.onClose }, iconNode("close"))
+  );
+}
+function followButton(opts) {
+  const what = opts.what ?? "line";
+  const b = el("button", "btn swin-follow", "Follow in the editor");
+  b.type = "button";
+  let on = opts.on;
+  const reflect = () => {
+    b.classList.toggle("on", on);
+    b.setAttribute("aria-pressed", String(on));
+    const label2 = on ? `The editor opens each ${what} as it plays. Click to stop.` : `Open each ${what} in the editor as it plays`;
+    b.dataset["tip"] = label2;
+  };
+  reflect();
+  b.addEventListener("click", () => {
+    on = !on;
+    reflect();
+    opts.onToggle(on);
+  });
+  return { el: b, set: (next) => {
+    on = next;
+    reflect();
+  } };
+}
 
 // src/exit.ts
 function closeWithExit(element, done) {
@@ -704,61 +1163,232 @@ function closeWithExit(element, done) {
   const timer3 = setTimeout(finish, seconds * 1e3 + 120);
 }
 
+// src/dialog.ts
+function dialogFrame(opts) {
+  const dialog = el("dialog", `shell-dialog ${opts.className ?? ""}`.trim());
+  const body = el("div", "shell-dialog-body");
+  const actions = el("div", "shell-dialog-actions");
+  dialog.append(el("h2", "shell-dialog-title", opts.title));
+  if (opts.sub !== void 0) dialog.append(el("p", "shell-dialog-sub", opts.sub));
+  dialog.append(body, actions);
+  dialog.setAttribute("aria-label", opts.title);
+  document.body.append(dialog);
+  let state = "closed";
+  let opener = null;
+  const teardown = () => {
+    dialog.remove();
+    if (opener instanceof HTMLElement && opener.isConnected) opener.focus();
+    opener = null;
+    state = "closed";
+    opts.onClose?.();
+  };
+  const close = () => {
+    if (state !== "open") return;
+    state = "closing";
+    closeWithExit(dialog, () => {
+      if (dialog.open) dialog.close();
+      teardown();
+    });
+  };
+  dialog.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    close();
+  });
+  dialog.addEventListener("close", () => {
+    if (state === "open") teardown();
+  });
+  return {
+    dialog,
+    body,
+    actions,
+    open() {
+      if (state !== "closed") return;
+      opener = document.activeElement;
+      state = "open";
+      dialog.showModal();
+    },
+    close,
+    isOpen: () => state === "open"
+  };
+}
+
 // src/confirm.ts
 function confirmDialog(opts) {
   return new Promise((resolve) => {
-    const cancel = el("button", "confirm-btn cancel", "Cancel");
-    const danger = el("button", "confirm-btn danger", opts.confirmLabel);
-    cancel.type = "button";
-    danger.type = "button";
-    const dlg = el(
-      "dialog",
-      "confirm-dialog",
-      el("div", "confirm-title", opts.title),
-      el("div", "confirm-body", opts.body),
-      el("div", "confirm-actions", cancel, danger)
-    );
-    dlg.setAttribute("aria-label", opts.title);
-    document.body.append(dlg);
     let done = false;
     const finish = (ok) => {
       if (done) return;
       done = true;
       resolve(ok);
-      closeWithExit(dlg, () => {
-        dlg.close();
-        dlg.remove();
-      });
+      frame.close();
     };
+    const frame = dialogFrame({
+      title: opts.title,
+      className: "confirm-dialog",
+      onClose: () => finish(false)
+      // Esc, or closed by someone else
+    });
+    const cancel = el("button", "btn confirm-btn cancel", "Cancel");
+    const danger = el("button", "btn danger confirm-btn", opts.confirmLabel);
+    cancel.type = "button";
+    danger.type = "button";
+    if (opts.body !== void 0) frame.body.append(el("div", "confirm-body", opts.body));
+    if (opts.bodyNode) frame.body.append(opts.bodyNode);
+    frame.actions.append(cancel, danger);
     cancel.addEventListener("click", () => finish(false));
     danger.addEventListener("click", () => finish(true));
-    dlg.addEventListener("cancel", (e) => {
-      e.preventDefault();
-      finish(false);
+    frame.dialog.addEventListener("mousedown", (e) => {
+      if (e.target === frame.dialog) finish(false);
     });
-    dlg.addEventListener("mousedown", (e) => {
-      if (e.target === dlg) finish(false);
-    });
-    dlg.showModal();
+    frame.open();
     cancel.focus();
   });
 }
 
+// src/floating.ts
+function followOnScroll(reposition) {
+  const onMove = () => reposition();
+  window.addEventListener("scroll", onMove, true);
+  window.addEventListener("resize", onMove);
+  return () => {
+    window.removeEventListener("scroll", onMove, true);
+    window.removeEventListener("resize", onMove);
+  };
+}
+function createFloating(className, opts = {}) {
+  const el2 = document.createElement("div");
+  el2.className = className;
+  el2.style.display = "none";
+  (opts.host ?? document.body).appendChild(el2);
+  let open = false;
+  let detach = null;
+  let outside = null;
+  let closeToken = 0;
+  const close = () => {
+    if (!open) return;
+    open = false;
+    detach?.();
+    detach = null;
+    if (outside) {
+      document.removeEventListener("mousedown", outside, true);
+      outside = null;
+    }
+    const myToken = ++closeToken;
+    closeWithExit(el2, () => {
+      if (myToken !== closeToken) return;
+      el2.style.display = "none";
+      el2.replaceChildren();
+      el2.classList.remove("closing");
+    });
+  };
+  const show2 = (reposition) => {
+    closeToken++;
+    el2.classList.remove("closing");
+    open = true;
+    el2.style.display = "block";
+    reposition();
+    detach ??= followOnScroll(reposition);
+  };
+  const dismissOnOutside = (onOutside, isInside) => {
+    if (outside) return;
+    outside = (e) => {
+      const t = e.target;
+      if (!el2.contains(t) && !(isInside?.(t) ?? false)) onOutside();
+    };
+    document.addEventListener("mousedown", outside, true);
+  };
+  return { el: el2, show: show2, dismissOnOutside, close, isOpen: () => open };
+}
+
+// src/context-menu.ts
+var EDGE2 = 6;
+var current = null;
+function floating(node2, onDismiss) {
+  let gone = false;
+  const dismiss = () => {
+    if (gone) return;
+    gone = true;
+    if (current === dismiss) current = null;
+    window.removeEventListener("pointerdown", onAway, true);
+    window.removeEventListener("keydown", onKey, true);
+    closeWithExit(node2, () => node2.remove());
+    onDismiss?.();
+  };
+  const onAway = (e) => {
+    if (!node2.contains(e.target)) dismiss();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      dismiss();
+    }
+  };
+  window.addEventListener("pointerdown", onAway, true);
+  window.addEventListener("keydown", onKey, true);
+  current?.();
+  current = dismiss;
+  return { dismiss };
+}
+function placeBelow(node2, anchor) {
+  node2.style.left = `${anchor.left}px`;
+  node2.style.top = `${anchor.bottom + 4}px`;
+  const r = node2.getBoundingClientRect();
+  if (r.right > window.innerWidth) node2.style.left = `${Math.max(EDGE2, window.innerWidth - r.width - EDGE2)}px`;
+  if (r.bottom > window.innerHeight) node2.style.top = `${Math.max(EDGE2, anchor.top - r.height - 4)}px`;
+}
+function openPopover(anchor, build, onClose, opts = {}) {
+  const pop = el("div", "popover");
+  let closed = false;
+  const finish = () => {
+    if (closed) return;
+    closed = true;
+    onClose?.();
+  };
+  const { dismiss } = floating(pop, finish);
+  pop.append(build(dismiss));
+  (opts.host ?? document.body).append(pop);
+  placeBelow(pop, anchor.getBoundingClientRect());
+}
+function openContextMenu(x, y, items) {
+  const menu = el("div", "ctxmenu");
+  menu.setAttribute("role", "menu");
+  const { dismiss } = floating(menu);
+  for (const item of items) {
+    const button = el("button", {
+      className: `ctxmenu-item${item.danger ? " danger" : ""}`,
+      text: item.label,
+      onClick: () => {
+        if (item.disabled === true) return;
+        dismiss();
+        item.onClick();
+      }
+    });
+    button.type = "button";
+    button.setAttribute("role", "menuitem");
+    if (item.disabled === true) button.disabled = true;
+    menu.append(button);
+  }
+  menu.style.left = `${x}px`;
+  menu.style.top = `${y}px`;
+  document.body.append(menu);
+  const r = menu.getBoundingClientRect();
+  if (r.right > window.innerWidth) menu.style.left = `${Math.max(EDGE2, window.innerWidth - r.width - EDGE2)}px`;
+  if (r.bottom > window.innerHeight) menu.style.top = `${Math.max(EDGE2, window.innerHeight - r.height - EDGE2)}px`;
+}
+
 // src/about.ts
 function showAbout(opts) {
   return new Promise((resolve) => {
-    const dialog = el("dialog", "shell-about");
+    const frame = dialogFrame({ title: opts.appName, className: "shell-about", onClose: () => resolve() });
+    frame.dialog.setAttribute("aria-label", `About ${opts.appName}`);
     if (opts.wordmark !== void 0) {
       const mark = el("div", "shell-about-mark");
       mark.innerHTML = opts.wordmark;
-      dialog.append(mark);
+      frame.dialog.prepend(mark);
     }
-    dialog.append(
-      el("div", "shell-about-name", opts.appName),
-      el("div", "shell-about-version", `Version ${opts.version}`)
-    );
-    if (opts.blurb !== void 0) dialog.append(el("p", "shell-about-blurb", opts.blurb));
-    if (opts.credits !== void 0) dialog.append(el("p", "shell-about-credits", opts.credits));
+    frame.body.append(el("div", "shell-about-version", `Version ${opts.version}`));
+    if (opts.blurb !== void 0) frame.body.append(el("p", "shell-about-blurb", opts.blurb));
+    if (opts.credits !== void 0) frame.body.append(el("p", "shell-about-credits", opts.credits));
     if (opts.links?.length) {
       const row = el("div", "shell-about-links");
       for (const link of opts.links) {
@@ -771,39 +1401,28 @@ function showAbout(opts) {
         a.addEventListener("click", () => opts.onOpenLink?.(link.url));
         row.append(a);
       }
-      dialog.append(row);
+      frame.body.append(row);
     }
-    const close = el("button", "shell-about-close", "Close");
+    const close = el("button", "btn shell-about-close", "Close");
     close.type = "button";
-    dialog.append(el("div", "shell-about-actions", close));
-    dialog.setAttribute("aria-label", `About ${opts.appName}`);
-    document.body.append(dialog);
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      dialog.close();
-      dialog.remove();
-      resolve();
-    };
-    close.addEventListener("click", finish);
-    dialog.addEventListener("close", finish);
-    dialog.showModal();
+    close.addEventListener("click", () => frame.close());
+    frame.actions.append(close);
+    frame.open();
     close.focus();
   });
 }
 
 // src/anchored.ts
-var current = null;
+var current2 = null;
 function openAnchoredPanel(opts) {
-  if (current) {
-    const prev = current;
-    current = null;
+  if (current2) {
+    const prev = current2;
+    current2 = null;
     prev.close();
     if (prev.anchor === opts.anchor) return null;
   }
   const panel = el("div", `shell-anchored ${opts.className ?? ""}`.trim());
-  const closeBtn = el("button", "shell-anchored-close", "\u2715");
+  const closeBtn = el("button", "shell-anchored-close", iconNode("close", 12));
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close");
   const body = el("div", "shell-anchored-body");
@@ -811,13 +1430,13 @@ function openAnchoredPanel(opts) {
     el("div", "shell-anchored-head", el("span", "shell-anchored-title", opts.title), closeBtn),
     body
   );
-  document.body.append(panel);
+  (opts.host ?? document.body).append(panel);
   placeAnchored(panel, opts.anchor, opts.width, opts.prefer ?? "below", opts.keepClear ?? []);
   let closed = false;
   const close = () => {
     if (closed) return;
     closed = true;
-    if (current?.panel === panel) current = null;
+    if (current2?.panel === panel) current2 = null;
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     closeWithExit(panel, () => {
@@ -841,12 +1460,12 @@ function openAnchoredPanel(opts) {
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
   }, 0);
-  current = { anchor: opts.anchor, panel, close };
+  current2 = { anchor: opts.anchor, panel, close };
   return { panel, body, close };
 }
 function closeAnchoredPanel() {
-  const open = current;
-  current = null;
+  const open = current2;
+  current2 = null;
   open?.close();
 }
 function placeAnchored(panel, anchor, width, prefer, keepClear) {
@@ -903,7 +1522,7 @@ function isValidGameId(gameId) {
 
 // src/property-names.ts
 var RESERVED_PROPERTY_NAMES = ["true", "false", "and", "or", "not"];
-var PROPERTY_NAME_HINT = "Lower case letters, digits and underscores. Cannot start with a digit. No hyphens or spaces.";
+var PROPERTY_NAME_HINT = "Lower case letters, digits, and underscores. It can't start with a digit. No hyphens or spaces.";
 function propertyNameify(text) {
   const trimmed = text.trim();
   const deliberateLeading = trimmed.startsWith("_");
@@ -927,14 +1546,14 @@ function propertyNameProblem(name) {
   const suggestion = propertyNameify(name);
   const tail = suggestion ? ` Try "${suggestion}", or press Tab.` : "";
   if (RESERVED_PROPERTY_NAMES.includes(name.toLowerCase())) {
-    return `Cannot be used: "${name.toLowerCase()}" is a keyword in expressions.${tail}`;
+    return `Can't be used. "${name.toLowerCase()}" is a keyword in expressions.${tail}`;
   }
-  if (name.includes("-")) return `Cannot be used: a hyphen reads as subtraction in an expression.${tail}`;
-  if (/^[0-9]/.test(name)) return `Cannot be used: a name cannot start with a digit.${tail}`;
+  if (name.includes("-")) return `Can't be used. A hyphen reads as subtraction in an expression.${tail}`;
+  if (/^[0-9]/.test(name)) return `Can't be used. A name can't start with a digit.${tail}`;
   if (name !== name.toLowerCase()) {
-    return `Cannot be used: expressions fold names, so this would look for "${name.toLowerCase()}".${tail}`;
+    return `Can't be used. Expressions fold names, so this would look for "${name.toLowerCase()}".${tail}`;
   }
-  return `Cannot be used: only lower case letters, digits and underscores.${tail}`;
+  return `Can't be used. Only lower case letters, digits, and underscores.${tail}`;
 }
 function bindPropertyName(input, onCommit, opts = {}) {
   const hint = opts.hint;
@@ -943,7 +1562,7 @@ function bindPropertyName(input, onCommit, opts = {}) {
     const problem = v === "" ? void 0 : propertyNameProblem(v);
     input.classList.toggle("illegal", !!problem);
     if (problem) input.title = problem;
-    else if (input.title.startsWith("Cannot be used")) {
+    else if (input.title.startsWith("Can't be used")) {
       if (hint) input.title = hint;
       else input.removeAttribute("title");
     }
@@ -999,10 +1618,10 @@ function propertyRefProblem(name, opts) {
   if (!isValidPropertyName(folded)) {
     const suggestion = propertyNameify(name);
     const tail = suggestion ? ` Try "${suggestion}", or press Tab.` : "";
-    if (RESERVED_PROPERTY_NAMES.includes(folded)) return `Cannot be used: "${folded}" is a keyword in expressions.${tail}`;
-    if (name.includes("-")) return `Cannot be used: a hyphen reads as subtraction in an expression.${tail}`;
-    if (/^[0-9]/.test(name)) return `Cannot be used: a name cannot start with a digit.${tail}`;
-    return `Cannot be used: only lower case letters, digits and underscores.${tail}`;
+    if (RESERVED_PROPERTY_NAMES.includes(folded)) return `Can't be used. "${folded}" is a keyword in expressions.${tail}`;
+    if (name.includes("-")) return `Can't be used. A hyphen reads as subtraction in an expression.${tail}`;
+    if (/^[0-9]/.test(name)) return `Can't be used. A name can't start with a digit.${tail}`;
+    return `Can't be used. Only lower case letters, digits, and underscores.${tail}`;
   }
   const known = opts.known();
   if (known.some((k) => k.toLowerCase() === folded)) return void 0;
@@ -1011,7 +1630,7 @@ function propertyRefProblem(name, opts) {
   if (known.length === 0) return `No ${scope} properties are declared yet. Declare one above first.`;
   const shown = known.slice(0, 3).map((k) => `"${k}"`).join(", ");
   const more = known.length > 3 ? `, and ${known.length - 3} more` : "";
-  return `No ${scope} property is called "${name}". Declared: ${shown}${more}.`;
+  return `No ${scope} property is called "${name}". Pick one of ${shown}${more}.`;
 }
 function bindPropertyRef(input, onCommit, opts) {
   const list = document.createElement("datalist");
@@ -1032,7 +1651,7 @@ function bindPropertyRef(input, onCommit, opts) {
     const problem = v === "" ? void 0 : propertyRefProblem(v, opts);
     input.classList.toggle("illegal", !!problem);
     if (problem) input.title = problem;
-    else if (input.title.startsWith("Cannot be used") || input.title.startsWith("No ")) {
+    else if (input.title.startsWith("Can't be used") || input.title.startsWith("No ")) {
       if (opts.hint) input.title = opts.hint;
       else input.removeAttribute("title");
     }
@@ -1075,9 +1694,9 @@ function openGameIdEditor(opts) {
   const input = el("input", "shell-id-input");
   input.type = "text";
   input.value = opts.value;
-  input.placeholder = opts.derived || "<game-id>";
+  input.placeholder = opts.derived || "game-id";
   input.spellcheck = false;
-  const hint = el("div", "shell-id-hint", "Lower case, digits, hyphens. Empty = auto from the name.");
+  const hint = el("div", "shell-id-hint", "Lower case letters, digits, and hyphens. Leave it empty to derive one from the name.");
   const actions = el("div", "shell-id-actions");
   const reset = el("button", "shell-id-reset", "Reset to auto");
   const set = el("button", "shell-id-set", "Set");
@@ -1139,12 +1758,13 @@ function foldVc(shards, keys) {
   return out;
 }
 function vcBadgeFor(s) {
-  if (s?.lockedBy?.length) return { glyph: icon.locked, cls: "vc-locked", title: `Locked by ${s.lockedBy.join(", ")}` };
-  if (s?.outOfDate) return { glyph: icon.down, cls: "vc-stale", title: "Out of date - a newer version is on the server" };
-  if (s?.checkedOutByMe) return { glyph: icon.checkedOut, cls: "vc-mine", title: "Checked out by you" };
-  if (s?.dirty) return { glyph: icon.modified, cls: "vc-dirty", title: "Modified - uncommitted local changes" };
-  if (s?.untracked) return { glyph: icon.untracked, cls: "vc-new", title: "New - not yet committed" };
-  if (s && !s.writable) return { glyph: icon.readOnly, cls: "vc-frozen", title: "Read-only on disk - saving checks it out" };
+  const badge = (name, cls, title) => ({ name, glyph: icon[name] ?? "", cls, title });
+  if (s?.lockedBy?.length) return badge("locked", "vc-locked", `Locked by ${s.lockedBy.join(", ")}`);
+  if (s?.outOfDate) return badge("down", "vc-stale", "Out of date. A newer version is on the server.");
+  if (s?.checkedOutByMe) return badge("checkedOut", "vc-mine", "Checked out by you");
+  if (s?.dirty) return badge("modified", "vc-dirty", "Modified. Local changes aren't committed yet.");
+  if (s?.untracked) return badge("untracked", "vc-new", "New. Not in version control yet.");
+  if (s && !s.writable) return badge("readOnly", "vc-frozen", "Read-only on disk. Saving checks it out.");
   return null;
 }
 function paintVcBadges(root, shards) {
@@ -1152,7 +1772,7 @@ function paintVcBadges(root, shards) {
     host.querySelector(":scope > .vc-badge")?.remove();
     const badge = vcBadgeFor(foldVc(shards, host.dataset["vc"]));
     if (!badge) return;
-    const span = el("span", { className: `vc-badge ${badge.cls}`, text: badge.glyph, tip: badge.title });
+    const span = el("span", { className: `vc-badge ${badge.cls}`, tip: badge.title }, iconNode(badge.name, 12));
     host.append(span);
   });
 }
@@ -1175,8 +1795,8 @@ function lockNotice(holders) {
   return el(
     "div",
     { className: "vc-lock" },
-    el("span", { className: "vc-lock-glyph", text: icon.locked }),
-    el("span", { text: `Locked by ${holders.join(", ")} - read-only until they release it.` })
+    el("span", { className: "vc-lock-glyph" }, iconNode("locked")),
+    el("span", { text: `Locked by ${holders.join(", ")}. Read-only until they release it.` })
   );
 }
 
@@ -1184,41 +1804,36 @@ function lockNotice(holders) {
 function askIdentity(opts = {}) {
   return new Promise((resolve) => {
     const seed = opts.current ?? opts.suggested;
-    const name = el("input", "shell-ident-input");
+    const name = el("input", "field shell-ident-input");
     name.placeholder = "Your name";
     name.value = seed?.name ?? "";
-    const email = el("input", "shell-ident-input");
-    email.placeholder = "Email (optional)";
+    const email = el("input", "field shell-ident-input");
+    email.placeholder = "Optional";
     email.type = "email";
     email.value = seed?.email ?? "";
-    const skip = el("button", "shell-ident-btn", "Skip");
-    const save = el("button", "shell-ident-btn primary", "Save");
+    const skip = el("button", "btn shell-ident-btn", "Skip");
+    const save = el("button", "btn primary shell-ident-btn", opts.mode === "welcome" ? "Continue" : "Save");
     skip.type = "button";
     save.type = "button";
-    const dialog = el(
-      "dialog",
-      "shell-ident",
-      el("div", "shell-ident-title", "Who is working here?"),
-      el(
-        "p",
-        "shell-ident-hint",
-        "Stamped on the comments you write. Kept in this app, never in the project, and changeable later."
-      ),
-      el("div", "shell-ident-fields", name, email),
-      el("div", "shell-ident-actions", skip, save)
-    );
-    document.body.append(dialog);
     let done = false;
     const finish = (keep) => {
       if (done) return;
       done = true;
       const typed = name.value.trim();
       const value = email.value.trim();
-      const answer = keep && typed !== "" ? value === "" ? { name: typed } : { name: typed, email: value } : void 0;
-      dialog.close();
-      dialog.remove();
+      const answer = keep && typed !== "" ? value === "" ? { name: typed } : { name: typed, email: value } : opts.neverAskAgainOnSkip === true ? { name: "" } : void 0;
       resolve(answer);
+      frame.close();
     };
+    const frame = dialogFrame({
+      title: titleFor(opts),
+      sub: subFor(opts),
+      className: "shell-ident",
+      onClose: () => finish(false)
+      // Escape, or closed by someone else: a skip
+    });
+    frame.body.append(el("div", "shell-ident-fields", labelled("Name", name), labelled("Email", email)));
+    frame.actions.append(skip, save);
     skip.addEventListener("click", () => finish(false));
     save.addEventListener("click", () => finish(true));
     name.addEventListener("keydown", (e) => {
@@ -1227,11 +1842,19 @@ function askIdentity(opts = {}) {
     email.addEventListener("keydown", (e) => {
       if (e.key === "Enter") finish(true);
     });
-    dialog.addEventListener("close", () => finish(false));
-    dialog.showModal();
+    frame.open();
     name.focus();
   });
 }
+function titleFor(opts) {
+  if (opts.mode === "welcome") return opts.appName ? `Welcome to ${opts.appName}` : "Welcome";
+  if (opts.mode === "edit") return "User information";
+  return "Who is working here?";
+}
+function subFor(opts) {
+  const why = "Your name goes on the comments you write. It's kept in this app, not in the project.";
+  return opts.mode === "edit" ? why : `${why} You can change it later.`;
+}
 
 // src/notes-editor.ts
 var EDITOR_ONLY = "";
@@ -1244,10 +1867,10 @@ var CLASS_LABEL = {
 };
 var label = (cls) => cls === EDITOR_ONLY ? "Note (editor-only)" : CLASS_LABEL[cls] ?? cls[0].toUpperCase() + cls.slice(1);
 var PLACEHOLDER = {
-  vo: "direction for the voice actor / director",
-  loc: "context for translators"
+  vo: "Direction for the voice actor or director",
+  loc: "Context for translators"
 };
-var placeholder = (cls) => cls === EDITOR_ONLY ? "an internal note - never exported" : PLACEHOLDER[cls] ?? "intent / rationale - why this is here";
+var placeholder = (cls) => cls === EDITOR_ONLY ? "An internal note, never exported" : PLACEHOLDER[cls] ?? "Why this is here";
 function openNotesEditor(opts) {
   const { notes } = opts;
   const seed = /* @__PURE__ */ new Map();
@@ -1301,7 +1924,7 @@ ${line.text}` : line.text);
         { className: "shell-notes-class" },
         el("label", "shell-notes-caption", label(cls))
       );
-      const area = el("textarea", "shell-notes-text");
+      const area = el("textarea", "field shell-notes-text");
       area.value = areas.get(cls)?.value ?? seed.get(cls) ?? "";
       area.rows = 4;
       area.placeholder = placeholder(cls);
@@ -1327,29 +1950,24 @@ ${line.text}` : line.text);
     }
   };
   render();
-  const done = el("button", "shell-notes-btn primary", "Done");
-  const dialog = el(
-    "dialog",
-    { className: "shell-notes" },
-    el("div", { className: "shell-notes-title", text: `Notes: ${opts.subject}` }),
-    body,
-    el("div", { className: "shell-notes-actions" }, done)
-  );
-  dialog.setAttribute("aria-label", `Notes: ${opts.subject}`);
-  document.body.append(dialog);
+  const done = el("button", "btn primary shell-notes-btn", "Done");
+  done.type = "button";
   const before = JSON.stringify(notes.own);
   let closed = false;
-  const close = () => {
+  const commit = () => {
     if (closed) return;
     closed = true;
     const next = value();
     if (JSON.stringify(next) !== before) opts.save(next);
-    dialog.close();
-    dialog.remove();
   };
-  done.addEventListener("click", close);
-  dialog.addEventListener("close", close);
-  dialog.showModal();
+  const frame = dialogFrame({ title: `Notes: ${opts.subject}`, className: "shell-notes", onClose: commit });
+  frame.body.append(body);
+  frame.actions.append(done);
+  done.addEventListener("click", () => {
+    commit();
+    frame.close();
+  });
+  frame.open();
   areas.get(shown[0] ?? EDITOR_ONLY)?.focus();
 }
 
@@ -1421,7 +2039,7 @@ function openComments(opts) {
           el("span", { className: "shell-cmt-ts", text: stamp(message.ts) })
         );
         if (opts.deleteMessage && message.deleted !== true) {
-          const bin = el("button", { className: "shell-cmt-del", text: "\u2715" });
+          const bin = el("button", { className: "shell-cmt-del" }, iconNode("close", 12));
           bin.dataset.tip = "Delete this comment";
           bin.setAttribute("aria-label", "Delete this comment");
           bin.addEventListener("click", () => opts.deleteMessage?.(thread.id, index));
@@ -1486,37 +2104,65 @@ var clock = (ms) => {
 var estimable = (done, total, elapsedMs) => done > 0 && total > 0 && elapsedMs > 1e3 && done / total > 0.1;
 function mountJobProgress(host, opts) {
   const units = opts.units ?? "runs";
+  const pinned = opts.indeterminate === true;
+  const cancellableByDefault = opts.cancellable ?? opts.onCancel !== void 0;
   const fill = el("i", { className: "job-fill" });
   const bar = el("div", { className: "job-bar" }, fill);
+  bar.setAttribute("role", "progressbar");
+  bar.setAttribute("aria-valuemin", "0");
+  bar.setAttribute("aria-valuemax", "100");
   const what = el("span", { className: "job-label" });
   const count = el("span", { className: "job-count" });
   const time = el("span", { className: "job-time" });
   const cancel = el("button", { className: "job-cancel", text: "Cancel" });
+  cancel.type = "button";
   const strip = el("div", { className: "job-strip" }, what, bar, count, time, cancel);
   strip.hidden = true;
   host.append(strip);
+  let runPinned = pinned;
+  let indeterminate = false;
+  const setMode = (band) => {
+    indeterminate = band;
+    strip.classList.toggle("indeterminate", band);
+    count.hidden = band;
+    if (band) {
+      fill.style.width = "";
+      bar.removeAttribute("aria-valuenow");
+    }
+  };
   const view = {
     element: strip,
     get visible() {
       return !strip.hidden;
     },
-    begin(label2) {
+    get indeterminate() {
+      return indeterminate;
+    },
+    begin(label2, run) {
+      runPinned = run?.indeterminate ?? pinned;
+      const cancellable = run?.cancellable ?? cancellableByDefault;
       what.textContent = label2 ?? "Running\u2026";
       count.textContent = "";
       time.textContent = "";
-      fill.style.width = "0%";
+      cancel.hidden = !cancellable;
       cancel.disabled = false;
       cancel.textContent = "Cancel";
+      setMode(true);
       strip.hidden = false;
     },
     update(done, total, elapsedMs) {
       if (strip.hidden) strip.hidden = false;
-      const pct = total > 0 ? Math.min(100, done / total * 100) : 0;
-      fill.style.width = `${pct}%`;
-      count.textContent = total > 0 ? `${done} / ${total} ${units}` : `${done} ${units}`;
-      if (estimable(done, total, elapsedMs)) {
+      const band = runPinned || !(total > 0);
+      setMode(band);
+      if (!band) {
+        const pct = Math.min(100, done / total * 100);
+        fill.style.width = `${pct}%`;
+        bar.setAttribute("aria-valuenow", String(Math.round(pct)));
+        count.textContent = `${done} / ${total} ${units}`.trimEnd();
+      }
+      if (!band && estimable(done, total, elapsedMs)) {
         const remaining = elapsedMs / done * (total - done);
-        time.textContent = `${clock(elapsedMs)} elapsed \xB7 about ${clock(remaining)} left`;
+        time.textContent = `${clock(elapsedMs)} elapsed, about ${clock(remaining)} left`;
       } else {
         time.textContent = clock(elapsedMs);
       }
@@ -1528,8 +2174,10 @@ function mountJobProgress(host, opts) {
   cancel.addEventListener("click", () => {
     cancel.disabled = true;
     cancel.textContent = "Stopping\u2026";
-    opts.onCancel();
+    opts.onCancel?.();
   });
+  cancel.hidden = !cancellableByDefault;
+  setMode(true);
   return view;
 }
 
@@ -1655,11 +2303,14 @@ function staleBar(opts) {
       className: "stale-bar-msg",
       text: `${opts.subject} changed in the editor. ${opts.advice ?? "Restart to play the new version."}`
     }),
-    el("button", {
-      className: "stale-bar-go",
-      text: `${icon.restart} ${label2}`,
-      onClick: () => opts.onRestart()
-    })
+    // The icon is a node beside the word, not a character inside it; the
+    // button's flex gap sets the space (stale.css).
+    el(
+      "button",
+      { className: "stale-bar-go", onClick: () => opts.onRestart() },
+      iconNode("restart", 12),
+      label2
+    )
   );
 }
 
@@ -1701,14 +2352,14 @@ function dismissToast() {
 }
 
 // src/stepper.ts
+var STEP_ICON = 12;
 function renderStepperBar(host, opts) {
   const { items } = opts;
   const close = opts.onClose === void 0 ? null : el("button", {
     className: "stepbar-nav stepbar-close",
-    text: icon.close,
     tip: opts.closeTip ?? "Close",
     onClick: opts.onClose
-  });
+  }, iconNode("close", STEP_ICON));
   const actions = (opts.actions ?? []).filter((a) => a !== null && a !== void 0);
   if (items.length === 0) {
     if (opts.empty === void 0) {
@@ -1732,17 +2383,15 @@ function renderStepperBar(host, opts) {
   const nav = items.length > 1 ? [
     el("button", {
       className: "stepbar-nav",
-      text: icon.back,
       tip: opts.tips?.prev ?? "Previous",
       onClick: () => step(-1)
-    }),
+    }, iconNode("back", STEP_ICON)),
     el("span", { className: "stepbar-of", text: `${index + 1}/${items.length}` }),
     el("button", {
       className: "stepbar-nav",
-      text: icon.forward,
       tip: opts.tips?.next ?? "Next",
       onClick: () => step(1)
-    })
+    }, iconNode("forward", STEP_ICON))
   ] : [];
   host.replaceChildren(
     el("span", { className: `stepbar-count ${opts.tone ?? "muted"}`, text: String(items.length) }),
@@ -1759,19 +2408,383 @@ function renderStepperBar(host, opts) {
   );
 }
 
+// src/updater-view.ts
+var liveProgress = null;
+var mb = (n) => (n / (1024 * 1024)).toFixed(1);
+function feedUpdaterDownloadProgress(p) {
+  if (!liveProgress) return;
+  const pct = Math.max(0, Math.min(100, p.percent));
+  liveProgress.bar.style.width = `${pct}%`;
+  liveProgress.label.textContent = `${pct.toFixed(0)}%, ${mb(p.transferred)} of ${mb(p.total)} MB (${mb(p.bytesPerSecond)} MB/s)`;
+}
+function showUpdaterDialog(opts) {
+  return new Promise((resolve) => {
+    const defaultId = opts.defaultId ?? 0;
+    const cancelId = opts.cancelId ?? opts.buttons.length - 1;
+    let done = false;
+    const finish = (idx) => {
+      if (done) return;
+      done = true;
+      liveProgress = null;
+      resolve(idx);
+      frame.close();
+    };
+    const frame = dialogFrame({
+      title: opts.message,
+      className: "updater-dialog",
+      // Esc is the cancel button, not a further answer: main is waiting on an index.
+      onClose: () => finish(cancelId)
+    });
+    if (opts.detail) frame.body.append(el("p", "updater-detail", opts.detail));
+    if (opts.progress) {
+      const track = el("div", "updater-progress-track");
+      const bar = el("div", "updater-progress-bar");
+      track.append(bar);
+      const label2 = el("p", "updater-progress-label", "Starting download\u2026");
+      frame.body.append(track, label2);
+      liveProgress = { bar, label: label2 };
+    }
+    if (opts.links?.length) {
+      const row = el("p", "updater-links");
+      for (const link of opts.links) {
+        const a = el("a", void 0, link.label);
+        a.href = link.url;
+        a.addEventListener("click", (e) => {
+          e.preventDefault();
+          opts.openExternal?.(link.url);
+        });
+        row.append(a);
+      }
+      frame.body.append(row);
+    }
+    opts.buttons.forEach((label2, i) => {
+      const b = el("button", i === defaultId ? "btn primary" : "btn", label2);
+      b.type = "button";
+      b.addEventListener("click", () => finish(i));
+      frame.actions.append(b);
+      if (i === defaultId) queueMicrotask(() => b.focus());
+    });
+    frame.open();
+  });
+}
+
+// src/welcome.ts
+function mountWelcome(host, opts) {
+  const caption = (text) => el("h2", "welcome-caption", text);
+  const group = (label2, ...body) => el("section", "welcome-group", caption(label2), ...body);
+  const actions = el("div", "welcome-actions");
+  for (const a of opts.actions) {
+    const b = el("button", { className: `btn${a.primary ? " primary" : ""}`, text: a.label, onClick: a.onClick });
+    b.type = "button";
+    actions.append(b);
+  }
+  const groups = (opts.groups ?? []).map((g) => group(
+    g.caption,
+    g.note !== void 0 ? el("p", "welcome-note", g.note) : null,
+    el("div", "welcome-list", ...g.items.map((item) => {
+      const b = el(
+        "button",
+        { className: "welcome-item", onClick: item.onOpen },
+        el("span", "welcome-item-name", item.name),
+        item.hint !== void 0 ? el("span", "welcome-item-hint", item.hint) : null
+      );
+      b.type = "button";
+      return b;
+    }))
+  ));
+  const recentsHost = el("div", "welcome-recents-slot");
+  const drawRecents = (recents) => {
+    const shown = recents.slice(0, opts.maxRecents ?? 5);
+    recentsHost.replaceChildren();
+    if (shown.length === 0) return;
+    recentsHost.append(group(
+      opts.recentsCaption ?? "Recent",
+      el("div", "welcome-recents", ...shown.map((r) => {
+        const b = el(
+          "button",
+          { className: "welcome-recent", onClick: r.onOpen },
+          el("span", "welcome-recent-name", r.name),
+          el("span", "welcome-recent-path", r.path)
+        );
+        b.type = "button";
+        return b;
+      }))
+    ));
+  };
+  drawRecents(opts.recents);
+  const error = el("p", "welcome-error");
+  const setError = (text) => {
+    error.textContent = text ?? "";
+    error.hidden = text === void 0 || text === "";
+  };
+  setError(opts.error);
+  const root = el("div", "welcome", el(
+    "div",
+    "welcome-card",
+    el("h1", "welcome-title", opts.title),
+    el("p", "welcome-sub", opts.sub),
+    actions,
+    opts.tourLine ? el("div", "welcome-line", opts.tourLine) : null,
+    ...groups,
+    recentsHost,
+    error
+  ));
+  host.replaceChildren(root);
+  return { el: root, setRecents: drawRecents, setError };
+}
+
+// src/link-status.ts
+function linkStatusClass(s) {
+  if (s.state === "off" || s.state === "error") return "off";
+  if (s.state === "listening") return "listening";
+  return s.build === "stale" ? "stale" : "live";
+}
+function linkStatusTip(s) {
+  switch (s.state) {
+    case "off":
+      return "Live link is off. Click to start listening.";
+    case "error":
+      return `Live link failed (${s.message}). Click to retry.`;
+    case "listening":
+      return "Live link is listening for a game. Click to stop.";
+    case "connected": {
+      const who = s.project !== void 0 ? ` to ${s.project}` : "";
+      const build = s.build === "stale" ? " on a different build, so save or rebuild to re-sync" : s.build === "match" ? " and in sync" : "";
+      const note = s.note ? ` ${s.note}` : "";
+      return `Live link is connected${who}${build}.${note} Click to stop.`;
+    }
+  }
+}
+function linkAddress(s) {
+  if (s.state !== "listening" && s.state !== "connected") return void 0;
+  return s.address ?? `ws://127.0.0.1:${s.port}`;
+}
+function mountLinkStatus(host, opts) {
+  const wrap = el("div", "linkstatus");
+  wrap.hidden = true;
+  const url = el("button", "linkstatus-url");
+  url.type = "button";
+  url.hidden = true;
+  const toggle = el("button", "linkstatus-toggle off");
+  toggle.type = "button";
+  toggle.append(iconNode("connect"));
+  if (opts.label !== void 0) wrap.append(el("span", "linkstatus-word", opts.label));
+  wrap.append(...opts.lead ?? [], url, toggle);
+  host.append(wrap);
+  let status = { state: "off" };
+  const render = () => {
+    toggle.className = `linkstatus-toggle ${linkStatusClass(status)}`;
+    const tip2 = linkStatusTip(status);
+    toggle.dataset["tip"] = tip2;
+    toggle.setAttribute("aria-label", tip2);
+    const addr = linkAddress(status);
+    if (addr !== void 0) {
+      url.textContent = addr;
+      url.dataset["tip"] = "Click to copy the live link address";
+      url.hidden = false;
+    } else url.hidden = true;
+  };
+  const apply = (s) => {
+    status = s;
+    render();
+  };
+  render();
+  toggle.addEventListener("click", () => {
+    const out = opts.onToggle(status);
+    void Promise.resolve(out).then((next) => {
+      if (next) apply(next);
+    });
+  });
+  url.addEventListener("click", () => {
+    const addr = url.textContent ?? "";
+    if (!addr) return;
+    void copyWithFeedback(url, addr);
+    opts.onCopy?.(addr);
+  });
+  return {
+    el: wrap,
+    apply,
+    status: () => status,
+    setVisible(on) {
+      wrap.hidden = !on;
+    },
+    toggle() {
+      toggle.click();
+    }
+  };
+}
+
+// src/property-list.ts
+var PROPERTY_TYPES = [
+  ["number", "Number"],
+  ["boolean", "True / False"],
+  ["string", "Text"],
+  ["enum", "List"],
+  ["flags", "Flags"],
+  ["quality", "Quality"]
+];
+var option = (value, label2, selected) => {
+  const o = el("option", void 0, label2);
+  o.value = value;
+  o.selected = selected;
+  return o;
+};
+var NONE = "(none)";
+function defaultControl(p, onChange, opts = {}) {
+  const typed = opts.typed === true;
+  const write = (raw) => {
+    if (raw === "") {
+      if (typed) delete p.default;
+      else p.default = "";
+    } else if (typed && p.type === "boolean") p.default = raw === "true";
+    else if (typed && p.type === "number") p.default = Number(raw);
+    else p.default = raw;
+    onChange?.();
+  };
+  const current3 = p.default === void 0 || p.default === null ? "" : String(p.default);
+  if (p.type === "boolean") {
+    const sel = el("select", "field set-default");
+    sel.append(option("", NONE, current3 === ""), option("true", "True", current3 === "true"), option("false", "False", current3 === "false"));
+    sel.addEventListener("change", () => write(sel.value));
+    return sel;
+  }
+  if (p.type === "enum") {
+    const sel = el("select", "field set-default");
+    sel.append(option("", NONE, current3 === ""));
+    for (const v of p.values ?? []) sel.append(option(v, v, current3 === v));
+    sel.addEventListener("change", () => write(sel.value));
+    return sel;
+  }
+  if (p.type === "quality") {
+    const sel = el("select", "field set-default");
+    sel.append(option("", "(first stage)", current3 === ""));
+    for (const v of p.stages ?? []) sel.append(option(v, v, current3 === v));
+    sel.addEventListener("change", () => write(sel.value));
+    return sel;
+  }
+  if (p.type === "flags") {
+    const s = el("span", "set-flagnote", "Starts empty");
+    s.dataset["tip"] = "A flags property starts with none set.";
+    return s;
+  }
+  const input = el("input", "field set-default");
+  input.type = p.type === "number" ? "number" : "text";
+  input.placeholder = "Default";
+  input.value = current3;
+  input.addEventListener("input", () => write(input.value));
+  return input;
+}
+function mountPropertyList(host, decls, opts = {}) {
+  const changed = () => opts.onChange?.();
+  const guard = dupGuard();
+  const types = opts.types ?? PROPERTY_TYPES;
+  const list = el("div", "set-list");
+  const keep = (parts) => (parts ?? []).filter((p) => p !== null);
+  const row = (p, i) => {
+    const name = el("input", "field set-name");
+    name.type = "text";
+    name.placeholder = "Property name";
+    name.value = p.name;
+    name.spellcheck = false;
+    name.dataset["tip"] = PROPERTY_NAME_HINT;
+    bindPropertyName(name, (v) => {
+      p.name = v;
+      changed();
+    }, { hint: PROPERTY_NAME_HINT });
+    guard.track(name);
+    const type = el("select", "field set-type");
+    for (const [v, label2] of types) type.append(option(v, label2, v === p.type));
+    type.addEventListener("change", () => {
+      p.type = type.value;
+      if (opts.typed) delete p.default;
+      else p.default = "";
+      if (p.type === "enum" || p.type === "flags") p.values ??= [];
+      else delete p.values;
+      if (p.type === "quality") p.stages ??= [];
+      else delete p.stages;
+      render();
+      changed();
+    });
+    let def = defaultControl(p, changed, opts);
+    const refreshDefault = () => {
+      const fresh = defaultControl(p, changed, opts);
+      def.replaceWith(fresh);
+      def = fresh;
+      changed();
+    };
+    const up = iconBtn("up", "Move up", () => {
+      if (moveItem(decls, i, -1)) {
+        render();
+        changed();
+      }
+    }, i === 0);
+    const down = iconBtn("down", "Move down", () => {
+      if (moveItem(decls, i, 1)) {
+        render();
+        changed();
+      }
+    }, i === decls.length - 1);
+    const del = iconBtn("close", "Delete property", () => {
+      decls.splice(i, 1);
+      render();
+      changed();
+    }, false, true);
+    const details = keep(opts.extraDetails?.(p, i));
+    if (p.type === "enum" || p.type === "flags") details.push(labelled("Values", tagChips(p, refreshDefault)));
+    if (p.type === "quality") details.push(labelled("Stages (in order)", stageChips(p, refreshDefault)));
+    if (opts.purpose !== false) {
+      const purpose = el("input", "field set-purpose");
+      purpose.type = "text";
+      purpose.placeholder = "What this property is for";
+      purpose.value = p.purpose ?? "";
+      purpose.addEventListener("input", () => {
+        if (purpose.value.trim()) p.purpose = purpose.value;
+        else delete p.purpose;
+        changed();
+      });
+      details.push(labelled("Purpose", purpose));
+    }
+    return expandableRow({ line: [name, type, def, ...keep(opts.extraLine?.(p, i)), up, down, del], details, name: p.name });
+  };
+  const render = () => {
+    guard.reset();
+    list.replaceChildren();
+    if (decls.length === 0) list.append(el("p", "empty", opts.emptyText ?? "No properties yet."));
+    else decls.forEach((p, i) => list.append(row(p, i)));
+    guard.check();
+  };
+  render();
+  const add = el("button", "btn set-add", opts.addLabel ?? "+ Add property");
+  add.type = "button";
+  add.addEventListener("click", () => {
+    decls.push(opts.newDecl ? opts.newDecl() : { name: "", type: types[0]?.[0] ?? "string", ...opts.typed ? {} : { default: "" } });
+    render();
+    changed();
+    focusNewRow(list);
+  });
+  host.append(list, add);
+  return {
+    firstDuplicate: () => guard.firstDuplicate(),
+    firstIllegalName: () => firstIllegalPropertyName(host),
+    // The Save gate takes both faults; the field's own rollover says which.
+    firstInvalid: () => guard.firstDuplicate() ?? firstIllegalPropertyName(host),
+    render
+  };
+}
+
 // src/nav-history.ts
 function createNavHistory(opts) {
   const cap = opts.cap ?? 100;
   const usable = opts.usable ?? (() => true);
   let past = [];
   let ahead = [];
-  const step = (from, to, current2) => {
+  const step = (from, to, current3) => {
     for (; ; ) {
       const p = from.pop();
       if (p === void 0) return void 0;
       if (!usable(p)) continue;
-      if (opts.same(p, current2)) continue;
-      to.push(current2);
+      if (opts.same(p, current3)) continue;
+      to.push(current3);
       return p;
     }
   };
@@ -1783,11 +2796,11 @@ function createNavHistory(opts) {
       else past.push(place2);
       if (past.length > cap) past = past.slice(past.length - cap);
     },
-    back(current2) {
-      return step(past, ahead, current2);
+    back(current3) {
+      return step(past, ahead, current3);
     },
-    forward(current2) {
-      return step(ahead, past, current2);
+    forward(current3) {
+      return step(ahead, past, current3);
     },
     canBack() {
       return past.length > 0;
@@ -1798,18 +2811,18 @@ function createNavHistory(opts) {
   };
 }
 function historyNav(onBack, onForward) {
-  const btn = (glyph, tip2, onClick) => {
+  const btn = (name, tip2, onClick) => {
     const b = document.createElement("button");
     b.type = "button";
     b.className = "shell-histnav-btn";
-    b.textContent = glyph;
+    b.append(iconNode(name));
     b.dataset["tip"] = tip2;
     b.setAttribute("aria-label", tip2);
     b.addEventListener("click", onClick);
     return b;
   };
-  const back = btn("\u2190", "Back", onBack);
-  const forward = btn("\u2192", "Forward", onForward);
+  const back = btn("arrowLeft", "Back", onBack);
+  const forward = btn("arrowRight", "Forward", onForward);
   const el2 = document.createElement("span");
   el2.className = "shell-histnav";
   el2.append(back, forward);
@@ -1823,13 +2836,21 @@ function historyNav(onBack, onForward) {
 }
 
 exports.EDIT_MENU = EDIT_MENU;
+exports.FILE_MENU = FILE_MENU;
 exports.GO_MENU = GO_MENU;
+exports.ICON_NAMES = ICON_NAMES;
+exports.ICON_SIZE = ICON_SIZE;
 exports.JOB_PROGRESS = JOB_PROGRESS;
 exports.PALETTE = PALETTE;
 exports.PALETTE_SIZE = PALETTE_SIZE;
 exports.PANE_MENU = PANE_MENU;
+exports.PLAY_MENU = PLAY_MENU;
 exports.PROPERTY_NAME_HINT = PROPERTY_NAME_HINT;
+exports.PROPERTY_TYPES = PROPERTY_TYPES;
+exports.PUBLISH_MENU = PUBLISH_MENU;
 exports.RESERVED_PROPERTY_NAMES = RESERVED_PROPERTY_NAMES;
+exports.REVIEW_MENU = REVIEW_MENU;
+exports.VIEW_MENU = VIEW_MENU;
 exports.askIdentity = askIdentity;
 exports.bindPropertyName = bindPropertyName;
 exports.bindPropertyRef = bindPropertyRef;
@@ -1838,52 +2859,80 @@ exports.closeWithExit = closeWithExit;
 exports.colourFor = colourFor;
 exports.colourIndex = colourIndex;
 exports.confirmDialog = confirmDialog;
+exports.copyWithFeedback = copyWithFeedback;
+exports.createFloating = createFloating;
 exports.createNavHistory = createNavHistory;
 exports.createSaveController = createSaveController;
+exports.debounce = debounce;
+exports.defaultControl = defaultControl;
+exports.dialogFrame = dialogFrame;
 exports.dismissToast = dismissToast;
 exports.dupGuard = dupGuard;
 exports.el = el;
 exports.expandableRow = expandableRow;
+exports.feedUpdaterDownloadProgress = feedUpdaterDownloadProgress;
 exports.firstIllegalPropertyName = firstIllegalPropertyName;
 exports.focusNewRow = focusNewRow;
 exports.foldVc = foldVc;
+exports.followButton = followButton;
+exports.formatCount = formatCount;
 exports.gameIdify = gameIdify;
 exports.hideTip = hideTip;
 exports.historyNav = historyNav;
 exports.icon = icon;
 exports.iconBtn = iconBtn;
+exports.iconHtml = iconHtml;
+exports.iconNameOfGlyph = iconNameOfGlyph;
+exports.iconNode = iconNode;
 exports.iconSvg = iconSvg;
 exports.initTooltips = initTooltips;
 exports.isCaseOnlyPropertyName = isCaseOnlyPropertyName;
+exports.isEditableTarget = isEditableTarget;
+exports.isIconName = isIconName;
 exports.isValidGameId = isValidGameId;
 exports.isValidPropertyName = isValidPropertyName;
 exports.labelled = labelled;
+exports.linkAddress = linkAddress;
+exports.linkStatusClass = linkStatusClass;
+exports.linkStatusTip = linkStatusTip;
 exports.lockControls = lockControls;
 exports.lockNotice = lockNotice;
 exports.mountJobProgress = mountJobProgress;
+exports.mountLinkStatus = mountLinkStatus;
 exports.mountPaneShell = mountPaneShell;
+exports.mountPropertyList = mountPropertyList;
 exports.mountSettingsDialog = mountSettingsDialog;
+exports.mountWelcome = mountWelcome;
 exports.moveItem = moveItem;
 exports.openAnchoredPanel = openAnchoredPanel;
 exports.openComments = openComments;
+exports.openContextMenu = openContextMenu;
 exports.openGameIdEditor = openGameIdEditor;
 exports.openNotesEditor = openNotesEditor;
+exports.openPopover = openPopover;
 exports.paintVcBadges = paintVcBadges;
 exports.pinButton = pinButton;
 exports.placeAnchored = placeAnchored;
+exports.plural = plural;
 exports.propertyNameProblem = propertyNameProblem;
 exports.propertyNameify = propertyNameify;
 exports.propertyRefProblem = propertyRefProblem;
+exports.relativeTime = relativeTime;
 exports.renderStepperBar = renderStepperBar;
 exports.revalidatePropertyRefs = revalidatePropertyRefs;
 exports.revealRow = revealRow;
+exports.revealRowWhenReady = revealRowWhenReady;
 exports.saveIndicator = saveIndicator;
 exports.showAbout = showAbout;
+exports.showUpdaterDialog = showUpdaterDialog;
+exports.stageChips = stageChips;
 exports.staleBar = staleBar;
 exports.tagChips = tagChips;
 exports.tipAt = tipAt;
 exports.tipBold = tipBold;
 exports.toast = toast;
+exports.toolWindowHead = toolWindowHead;
 exports.vcBadgeFor = vcBadgeFor;
+exports.wireReorder = wireReorder;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map