@wildwinter/app-shell 0.38.0 → 0.40.0

package/dist/index.js

@@ -1,241 +1,22 @@
+export { mountWelcome } from './chunk-SEWJLUOD.js';
+export { feedUpdaterDownloadProgress, showUpdaterDialog } from './chunk-OPZPFOPS.js';
+import { isKeyCombo, tipWithKey } from './chunk-YWMSQFXX.js';
+export { hintBar, isKeyCombo, keyHint, keyLabel, keyLegends, keyPlatform, setKeyPlatform, tipWithKey } from './chunk-YWMSQFXX.js';
+export { linkAddress, linkStatusClass, linkStatusTip, mountLinkStatus } from './chunk-SDOKZTAR.js';
+import { isEditableTarget } from './chunk-P6WLAEKZ.js';
+export { copyWithFeedback, debounce, formatCount, isEditableTarget, plural, relativeTime } from './chunk-P6WLAEKZ.js';
+export { EDIT_MENU, FILE_MENU, GO_MENU, PANE_MENU, PLAY_MENU, PUBLISH_MENU, REVIEW_MENU, VIEW_MENU } from './chunk-2ECJUTSX.js';
+export { defaultProblemCopy, describeProblem, problemLine, problemName } from './chunk-DS4XXAZS.js';
+export { PROPERTY_NAME_HINT, PROPERTY_TYPES, RESERVED_PROPERTY_NAMES, bindPropertyName, bindPropertyRef, defaultControl, dupGuard, expandableRow, firstIllegalPropertyName, focusNewRow, isCaseOnlyPropertyName, isValidPropertyName, mountPropertyList, mountSettingsDialog, propertyNameProblem, propertyNameify, propertyRefProblem, revalidatePropertyRefs, revealRow, revealRowWhenReady } from './chunk-R3NXPHRZ.js';
+import { dialogFrame } from './chunk-YRFJLJUH.js';
+export { dialogFrame } from './chunk-YRFJLJUH.js';
+export { createFloating } from './chunk-P4G4ERG6.js';
 export { JOB_PROGRESS } from './chunk-MDGOIT3O.js';
-export { EDIT_MENU, GO_MENU, PANE_MENU } from './chunk-QDPFU4WX.js';
-
-// src/tooltip.ts
-var B_OPEN = "";
-var B_CLOSE = "";
-function tipBold(s) {
-  return `${B_OPEN}${s}${B_CLOSE}`;
-}
-function renderTip(host, text) {
-  host.textContent = "";
-  const re = /\u0002([^\u0003]*)\u0003/g;
-  let last = 0;
-  let m;
-  while ((m = re.exec(text)) !== null) {
-    if (m.index > last) host.append(text.slice(last, m.index));
-    const strong = document.createElement("strong");
-    strong.textContent = m[1] ?? "";
-    host.append(strong);
-    last = m.index + m[0].length;
-  }
-  if (last < text.length) host.append(text.slice(last));
-}
-var inited = false;
-var checked = false;
-var suppressed;
-var SHOW_DELAY = 350;
-var EDGE = 6;
-var GAP = 7;
-var tip = null;
-var timer = 0;
-var active = null;
-var activeKey = null;
-function ensureEl() {
-  if (tip) return tip;
-  const el2 = document.createElement("div");
-  el2.className = "tooltip";
-  el2.setAttribute("role", "tooltip");
-  el2.hidden = true;
-  document.body.appendChild(el2);
-  tip = el2;
-  return el2;
-}
-var rectOf = (anchor) => anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor;
-function place(anchor) {
-  const t = ensureEl();
-  const r = rectOf(anchor);
-  const tr = t.getBoundingClientRect();
-  let top = r.top - tr.height - GAP;
-  if (top < EDGE) top = r.top + r.height + GAP;
-  let left = r.left + r.width / 2 - tr.width / 2;
-  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));
-  t.style.left = `${Math.round(left)}px`;
-  t.style.top = `${Math.round(top)}px`;
-}
-function show(anchor) {
-  const text = anchor.dataset["tip"];
-  if (!text) return;
-  paint(anchor, text);
-}
-function paint(anchor, text) {
-  if (suppressed?.()) return;
-  const t = ensureEl();
-  const host = (anchor instanceof HTMLElement ? anchor.closest("dialog[open]") : null) ?? document.body;
-  if (t.parentElement !== host) host.appendChild(t);
-  active = anchor instanceof HTMLElement ? anchor : null;
-  renderTip(t, text);
-  t.hidden = false;
-  t.classList.remove("show");
-  void t.offsetWidth;
-  place(anchor);
-  t.classList.add("show");
-}
-function hide() {
-  if (timer) {
-    window.clearTimeout(timer);
-    timer = 0;
-  }
-  active = null;
-  activeKey = null;
-  if (tip) {
-    tip.hidden = true;
-    tip.classList.remove("show");
-  }
-}
-function schedule(anchor) {
-  if (anchor === active) return;
-  if (timer) window.clearTimeout(timer);
-  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);
-}
-function tipAt(key, rect, text) {
-  if (key === activeKey) {
-    if (tip && !tip.hidden) {
-      renderTip(tip, text);
-      place(rect);
-    }
-    return;
-  }
-  hide();
-  activeKey = key;
-  timer = window.setTimeout(() => {
-    timer = 0;
-    paint(rect, text);
-  }, SHOW_DELAY);
-}
-function hideTip() {
-  hide();
-}
-function ensureTooltipHost() {
-  initTooltips();
-}
-function checkTooltipHost() {
-  if (checked) return;
-  checked = true;
-  setTimeout(() => {
-    if (inited || typeof document === "undefined") return;
-    if (document.querySelector("[data-tip]")) {
-      console.warn("app-shell: something set `data-tip` but no tooltip host is mounted, so those rollovers will not draw. Call initTooltips() once per window.");
-    }
-  }, 0);
-}
-var tipAncestor = (n) => n instanceof Element ? n.closest("[data-tip]") : null;
-function initTooltips(opts = {}) {
-  if (opts.suppressed !== void 0) suppressed = opts.suppressed;
-  if (inited) return;
-  inited = true;
-  document.addEventListener("pointerover", (e) => {
-    const el2 = tipAncestor(e.target);
-    if (el2) schedule(el2);
-  });
-  document.addEventListener("pointerout", (e) => {
-    const el2 = tipAncestor(e.target);
-    if (!el2) return;
-    const to = e.relatedTarget;
-    if (to instanceof Node && el2.contains(to)) return;
-    hide();
-  });
-  document.addEventListener("focusin", (e) => {
-    const el2 = tipAncestor(e.target);
-    if (el2) schedule(el2);
-  });
-  document.addEventListener("focusout", () => hide());
-  document.addEventListener("pointerdown", () => hide(), true);
-  document.addEventListener("scroll", () => {
-    if (active) hide();
-  }, true);
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") hide();
-  });
-  window.addEventListener("blur", () => hide());
-}
-
-// src/dom.ts
-function el(tag, classNameOrProps, ...children) {
-  const node2 = document.createElement(tag);
-  const props = typeof classNameOrProps === "string" ? { className: classNameOrProps } : classNameOrProps ?? {};
-  if (props.className) node2.className = props.className;
-  if (props.text !== void 0 && props.text !== null) node2.textContent = props.text;
-  if (props.title !== void 0) node2.title = props.title;
-  if (props.tip !== void 0) {
-    node2.dataset["tip"] = props.tip;
-    node2.setAttribute("aria-label", props.tip);
-    ensureTooltipHost();
-  }
-  if (props.onClick) node2.addEventListener("click", props.onClick);
-  for (const child of children) {
-    if (child === null || child === void 0) continue;
-    node2.append(child);
-  }
-  checkTooltipHost();
-  return node2;
-}
-function iconBtn(glyph, 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);
-  b.disabled = disabled;
-  b.addEventListener("click", onClick);
-  return b;
-}
-function labelled(label2, control) {
-  const target = control.matches("input, select, textarea") ? control : control.querySelector("input:not([type=button]):not([type=submit]), select, textarea");
-  const w = el(target ? "label" : "div", "shell-labelled");
-  w.append(el("span", "shell-fieldcap", label2), control);
-  if (target) {
-    if (!target.id) target.id = `shell-f-${Math.random().toString(36).slice(2, 9)}`;
-    w.htmlFor = target.id;
-  }
-  return w;
-}
-function moveItem(arr, i, delta) {
-  const j = i + delta;
-  if (j < 0 || j >= arr.length) return false;
-  [arr[i], arr[j]] = [arr[j], arr[i]];
-  return true;
-}
-function tagChips(holder, onChange) {
-  const wrap = el("div", "shell-tags");
-  const input = el("input", "shell-tag-input");
-  input.type = "text";
-  input.placeholder = "Add value";
-  input.spellcheck = false;
-  const makeChip = (v) => {
-    const chip = el("span", "shell-tag", v);
-    const x = el("button", "shell-tag-x", "\u2715");
-    x.type = "button";
-    x.dataset["tip"] = `remove ${v}`;
-    x.setAttribute("aria-label", `remove ${v}`);
-    x.addEventListener("click", () => {
-      holder.values = (holder.values ?? []).filter((o) => o !== v);
-      chip.remove();
-      onChange?.();
-    });
-    chip.append(x);
-    return chip;
-  };
-  const commit = () => {
-    const v = input.value.trim();
-    if (v && !(holder.values ?? []).includes(v)) {
-      (holder.values ??= []).push(v);
-      wrap.insertBefore(makeChip(v), input);
-      onChange?.();
-    }
-    input.value = "";
-  };
-  input.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
-      commit();
-    }
-  });
-  input.addEventListener("blur", commit);
-  for (const v of holder.values ?? []) wrap.append(makeChip(v));
-  wrap.append(input);
-  return wrap;
-}
+export { openContextMenu, openPopover } from './chunk-EHR2KBZC.js';
+import { ensureTooltipHost, el, iconNode, labelled, icon } from './chunk-UG2P777F.js';
+export { ICON_NAMES, ICON_SIZE, breadcrumb, el, hideTip, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isIconName, labelled, metaLine, moveItem, stageChips, tagChips, tipAt, tipBold, wireReorder } from './chunk-UG2P777F.js';
+import { closeWithExit } from './chunk-IU7EY6BI.js';
+export { closeWithExit } from './chunk-IU7EY6BI.js';
 
 // src/colour.ts
 var PALETTE_SIZE = 12;
@@ -257,79 +38,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" };
@@ -342,6 +50,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;
@@ -372,18 +82,29 @@ function mountPaneShell(host, opts) {
   host.append(root);
   if (!offered("nav")) navToggle.remove();
   if (!offered("inspector")) inspToggle.remove();
+  const defaultTip = (side, isOpen) => {
+    const text = `${isOpen ? "Hide" : "Show"} ${cfg[side].label ?? side}`;
+    const hint = cfg[side].shortcutHint;
+    if (!hint) return text;
+    return isKeyCombo(hint) ? tipWithKey(text, hint) : `${text} (${hint})`;
+  };
+  const tipFor = opts.tipFor ?? defaultTip;
   function applyToggleGlyph(side, button) {
     const isOpen = open[side];
-    button.textContent = side === "nav" ? isOpen ? "\u2039" : "\u203A" : isOpen ? "\u203A" : "\u2039";
-    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);
+    button.replaceChildren(iconNode(side === "nav" ? isOpen ? "back" : "forward" : isOpen ? "forward" : "back"));
+    const tip = tipFor(side, isOpen);
+    button.dataset["tip"] = tip;
+    button.setAttribute("aria-label", tip);
     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);
@@ -402,6 +123,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;
@@ -411,9 +137,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;
@@ -429,6 +157,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();
     };
@@ -458,7 +187,8 @@ function mountPaneShell(host, opts) {
     inspector: inspInner,
     togglePane,
     setPaneOpen,
-    isOpen: (s) => open[s],
+    isOpen: showing,
+    holdClosed,
     resetWidths,
     state: snapshot,
     destroy: () => {
@@ -467,189 +197,16 @@ function mountPaneShell(host, opts) {
   };
 }
 
-// src/settings.ts
-function expandableRow(opts) {
-  const row = el("div", "set-row");
-  if (opts.name !== void 0) row.dataset.name = opts.name;
-  const line = el("div", "set-rowline");
-  if (opts.details && opts.details.length) {
-    const details = el("div", "set-details");
-    details.hidden = true;
-    for (const d of opts.details) details.append(d);
-    const toggle = el("button", "set-expand");
-    toggle.type = "button";
-    toggle.dataset.tip = "More";
-    toggle.setAttribute("aria-label", "More");
-    toggle.setAttribute("aria-expanded", "false");
-    toggle.addEventListener("click", () => {
-      const open = details.hidden;
-      details.hidden = !open;
-      toggle.setAttribute("aria-expanded", String(open));
-      toggle.classList.toggle("open", open);
-    });
-    line.append(toggle);
-    opts.line.forEach((c) => line.append(c));
-    row.append(line, details);
-  } else {
-    opts.line.forEach((c) => line.append(c));
-    row.append(line);
-  }
-  return row;
-}
-function revealRow(within, name) {
-  const row = [...within.querySelectorAll(".set-row")].find((r) => r.dataset.name === name);
-  if (!row) return false;
-  const toggle = row.querySelector(".set-rowline > .set-expand");
-  if (toggle && toggle.getAttribute("aria-expanded") !== "true") toggle.click();
-  const still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-  row.scrollIntoView({ block: "center", behavior: still ? "auto" : "smooth" });
-  row.classList.remove("landed");
-  void row.offsetWidth;
-  row.classList.add("landed");
-  row.addEventListener("animationend", () => row.classList.remove("landed"), { once: true });
-  return true;
-}
-function focusNewRow(listEl) {
-  const last = listEl?.lastElementChild;
-  if (!(last instanceof HTMLElement)) return;
-  last.scrollIntoView({ block: "nearest" });
-  const name = last.querySelector("input.set-name") ?? last.querySelector("input");
-  name?.focus();
-}
-function dupGuard() {
-  const items = [];
-  const check = () => {
-    const counts = /* @__PURE__ */ new Map();
-    for (const it of items) {
-      const k = it.key().trim().toLowerCase();
-      if (k) counts.set(k, (counts.get(k) ?? 0) + 1);
-    }
-    let any = false;
-    for (const it of items) {
-      const k = it.key().trim().toLowerCase();
-      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.";
-        any = true;
-      } else if (it.input.title === "Duplicate name. Names must be unique.") it.input.removeAttribute("title");
-    }
-    return any;
-  };
-  return {
-    reset() {
-      items.length = 0;
-    },
-    track(input, key = () => input.value, also) {
-      items.push({ input, key });
-      input.addEventListener("input", check);
-      for (const a of also ?? []) a.addEventListener("input", check);
-    },
-    check,
-    firstDuplicate() {
-      check();
-      return items.find((it) => it.input.classList.contains("invalid"))?.input ?? null;
-    }
-  };
-}
-function mountSettingsDialog(opts) {
-  const dialog = el("dialog", "settings-dialog");
-  const form = el("form", "settings-form");
-  form.method = "dialog";
-  const tabs = el("nav", "settings-tabs");
-  const panels = el("div", "settings-panels");
-  const error = el("p", "settings-error");
-  error.hidden = true;
-  const cancel = el("button", "settings-cancel", "Cancel");
-  cancel.type = "button";
-  cancel.value = "cancel";
-  const save = el("button", "settings-save primary", "Save");
-  save.value = "save";
-  const panelFor = /* @__PURE__ */ new Map();
-  const tabFor = /* @__PURE__ */ new Map();
-  const handles = /* @__PURE__ */ new Map();
-  let active2 = opts.sections[0]?.id ?? "";
-  let lastGroup;
-  for (const s of opts.sections) {
-    if (s.group && s.group !== lastGroup) {
-      tabs.append(el("div", "settings-group", s.group));
-      lastGroup = s.group;
-    }
-    const tab = el("button", "settings-tab", s.label);
-    tab.type = "button";
-    tab.dataset["tab"] = s.id;
-    tab.addEventListener("click", () => showTab(s.id));
-    tabs.append(tab);
-    tabFor.set(s.id, tab);
-    const panel = el("section", "settings-panel");
-    panel.dataset["panel"] = s.id;
-    panel.hidden = true;
-    panels.append(panel);
-    panelFor.set(s.id, panel);
-  }
-  function showTab(id) {
-    active2 = id;
-    for (const [sid, t] of tabFor) t.classList.toggle("active", sid === id);
-    for (const [sid, p] of panelFor) p.hidden = sid !== id;
-  }
-  form.append(
-    el("h2", "settings-title", opts.title),
-    el("div", "settings-body", tabs, panels),
-    el("div", "settings-actions", error, cancel, save)
-  );
-  dialog.append(form);
-  document.body.append(dialog);
-  form.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && e.target?.tagName === "INPUT") e.preventDefault();
-  });
-  cancel.addEventListener("click", () => dialog.close("cancel"));
-  save.addEventListener("click", (e) => {
-    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;
-      }
-    }
-    void (async () => {
-      await opts.onSave();
-      dialog.close("save");
-    })();
-  });
-  return {
-    open(tabId) {
-      handles.clear();
-      for (const s of opts.sections) {
-        const panel = panelFor.get(s.id);
-        panel.replaceChildren();
-        handles.set(s.id, s.mount(panel));
-      }
-      error.hidden = true;
-      showTab(tabId ?? active2 ?? opts.sections[0]?.id ?? "");
-      dialog.showModal();
-    },
-    destroy() {
-      dialog.remove();
-    }
-  };
-}
-
 // 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);
   };
@@ -664,66 +221,91 @@ function pinButton(opts) {
     reflect();
   } };
 }
-
-// src/exit.ts
-function closeWithExit(element, done) {
-  element.classList.add("closing");
-  const seconds = parseFloat(getComputedStyle(element).animationDuration) || 0;
-  if (seconds === 0) {
-    done();
-    return;
+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();
   }
-  let fired = false;
-  const finish = () => {
-    if (fired) return;
-    fired = true;
-    element.removeEventListener("animationend", onEnd);
-    clearTimeout(timer3);
-    done();
-  };
-  const onEnd = (e) => {
-    if (e.target === element) finish();
+  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;
   };
-  element.addEventListener("animationend", onEnd);
-  const timer3 = setTimeout(finish, seconds * 1e3 + 120);
+  reflect();
+  b.addEventListener("click", () => {
+    on = !on;
+    reflect();
+    opts.onToggle(on);
+  });
+  return { el: b, set: (next) => {
+    on = next;
+    reflect();
+  } };
 }
 
 // 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);
-    });
-    dlg.addEventListener("mousedown", (e) => {
-      if (e.target === dlg) finish(false);
+    frame.dialog.addEventListener("mousedown", (e) => {
+      if (e.target === frame.dialog) finish(false);
     });
-    dlg.showModal();
+    frame.open();
     cancel.focus();
   });
 }
@@ -731,18 +313,16 @@ function confirmDialog(opts) {
 // 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) {
@@ -755,24 +335,13 @@ 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();
   });
 }
@@ -787,7 +356,7 @@ function openAnchoredPanel(opts) {
     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");
@@ -795,7 +364,7 @@ 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 = () => {
@@ -835,7 +404,7 @@ function closeAnchoredPanel() {
 }
 function placeAnchored(panel, anchor, width, prefer, keepClear) {
   const a = anchor.getBoundingClientRect();
-  const GAP2 = 10;
+  const GAP = 10;
   const CAP = window.innerHeight * 0.7;
   const MIN_H = 140;
   panel.style.width = `${width}px`;
@@ -843,7 +412,7 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
     const centred = a.left + a.width / 2 - width / 2;
     panel.style.left = `${Math.round(Math.min(Math.max(8, centred), window.innerWidth - width - 8))}px`;
   } else {
-    const leftOf = a.left - width - GAP2;
+    const leftOf = a.left - width - GAP;
     const alignedRight = Math.min(a.right - width, window.innerWidth - width - 8);
     panel.style.left = `${Math.round(prefer === "left" && leftOf >= 8 ? leftOf : Math.max(8, prefer === "left" ? a.left : alignedRight))}px`;
   }
@@ -864,15 +433,15 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
       return;
     }
   }
-  const roomBelow = bottomLimit - (a.bottom + GAP2);
-  const roomAbove = a.top - GAP2 - 8;
+  const roomBelow = bottomLimit - (a.bottom + GAP);
+  const roomAbove = a.top - GAP - 8;
   if (roomAbove > roomBelow) {
     panel.style.top = "auto";
-    panel.style.bottom = `${Math.round(window.innerHeight - (a.top - GAP2))}px`;
+    panel.style.bottom = `${Math.round(window.innerHeight - (a.top - GAP))}px`;
     panel.style.maxHeight = `${Math.round(Math.max(MIN_H, Math.min(CAP, roomAbove)))}px`;
   } else {
     panel.style.bottom = "auto";
-    panel.style.top = `${Math.round(Math.max(8, a.bottom + GAP2))}px`;
+    panel.style.top = `${Math.round(Math.max(8, a.bottom + GAP))}px`;
     panel.style.maxHeight = `${Math.round(Math.max(MIN_H, Math.min(CAP, roomBelow)))}px`;
   }
 }
@@ -885,164 +454,6 @@ function isValidGameId(gameId) {
   return /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(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.";
-function propertyNameify(text) {
-  const trimmed = text.trim();
-  const deliberateLeading = trimmed.startsWith("_");
-  let out = trimmed.toLowerCase().replace(/['’]/g, "").replace(/[^a-z0-9_]+/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
-  if (out === "") return "";
-  if (deliberateLeading || /^[0-9]/.test(out)) out = `_${out}`;
-  if (RESERVED_PROPERTY_NAMES.includes(out)) out = `${out}_`;
-  return out;
-}
-function isValidPropertyName(name) {
-  return /^[a-z_][a-z0-9_]*$/.test(name) && !RESERVED_PROPERTY_NAMES.includes(name);
-}
-function isCaseOnlyPropertyName(name) {
-  return !isValidPropertyName(name) && isValidPropertyName(name.toLowerCase());
-}
-
-// src/property-name-field.ts
-var refSyncs = /* @__PURE__ */ new WeakMap();
-function propertyNameProblem(name) {
-  if (isValidPropertyName(name)) return void 0;
-  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}`;
-  }
-  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 !== name.toLowerCase()) {
-    return `Cannot 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}`;
-}
-function bindPropertyName(input, onCommit, opts = {}) {
-  const hint = opts.hint;
-  const sync = () => {
-    const v = input.value.trim();
-    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")) {
-      if (hint) input.title = hint;
-      else input.removeAttribute("title");
-    }
-  };
-  input.addEventListener("input", () => {
-    onCommit(input.value);
-    sync();
-  });
-  input.addEventListener("keydown", (e) => {
-    if (e.key !== "Tab" || e.shiftKey) return;
-    const typed = input.value.trim();
-    if (typed === "" || isValidPropertyName(typed)) return;
-    const coerced = propertyNameify(typed);
-    if (!coerced || coerced === input.value) return;
-    e.preventDefault();
-    input.value = coerced;
-    onCommit(coerced);
-    sync();
-  });
-  sync();
-}
-function firstIllegalPropertyName(host) {
-  return host.querySelector("input.illegal");
-}
-function nearest(name, known) {
-  const n = name.toLowerCase();
-  const byPrefix = known.filter((k) => k.toLowerCase().startsWith(n) || n.startsWith(k.toLowerCase()));
-  if (byPrefix.length === 1) return byPrefix[0];
-  let best;
-  let bestScore = 3;
-  for (const k of known) {
-    const a = k.toLowerCase();
-    if (Math.abs(a.length - n.length) > 2) continue;
-    let prev = Array.from({ length: n.length + 1 }, (_, i) => i);
-    for (let i = 1; i <= a.length; i++) {
-      const row = [i];
-      for (let j = 1; j <= n.length; j++) {
-        row[j] = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === n[j - 1] ? 0 : 1));
-      }
-      prev = row;
-    }
-    const d = prev[n.length];
-    if (d < bestScore) {
-      bestScore = d;
-      best = k;
-    }
-  }
-  return best;
-}
-function propertyRefProblem(name, opts) {
-  const scope = opts.scope ? `@${opts.scope}` : "that scope";
-  const folded = name.toLowerCase();
-  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}`;
-  }
-  const known = opts.known();
-  if (known.some((k) => k.toLowerCase() === folded)) return void 0;
-  const near = nearest(folded, known);
-  if (near) return `No ${scope} property is called "${name}". Did you mean "${near}"?`;
-  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}.`;
-}
-function bindPropertyRef(input, onCommit, opts) {
-  const list = document.createElement("datalist");
-  list.id = `shell-propref-${Math.random().toString(36).slice(2, 9)}`;
-  input.setAttribute("list", list.id);
-  const attach = () => {
-    if (!list.isConnected && input.parentNode) input.after(list);
-  };
-  const sync = () => {
-    attach();
-    const known = opts.known();
-    list.replaceChildren(...known.map((k) => {
-      const o = document.createElement("option");
-      o.value = k;
-      return o;
-    }));
-    const v = input.value.trim();
-    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 ")) {
-      if (opts.hint) input.title = opts.hint;
-      else input.removeAttribute("title");
-    }
-  };
-  refSyncs.set(input, sync);
-  input.addEventListener("input", () => {
-    onCommit(input.value);
-    sync();
-  });
-  input.addEventListener("keydown", (e) => {
-    if (e.key !== "Tab" || e.shiftKey) return;
-    const typed = input.value.trim();
-    if (typed === "" || isValidPropertyName(typed.toLowerCase())) return;
-    const coerced = propertyNameify(typed);
-    if (!coerced || coerced === input.value) return;
-    e.preventDefault();
-    input.value = coerced;
-    onCommit(coerced);
-    sync();
-  });
-  sync();
-}
-function revalidatePropertyRefs(host) {
-  for (const input of host.querySelectorAll("input")) refSyncs.get(input)?.();
-}
-
 // src/id-editor.ts
 function openGameIdEditor(opts) {
   const slugify = opts.slugify ?? gameIdify;
@@ -1059,9 +470,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");
@@ -1123,12 +534,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) {
@@ -1136,7 +548,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);
   });
 }
@@ -1159,8 +571,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.` })
   );
 }
 
@@ -1168,41 +580,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) => {
@@ -1211,11 +618,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 = "";
@@ -1228,10 +643,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();
@@ -1285,7 +700,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);
@@ -1311,29 +726,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();
 }
 
@@ -1405,7 +815,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));
@@ -1470,37 +880,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);
       }
@@ -1512,8 +950,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;
 }
 
@@ -1525,7 +965,7 @@ function createSaveController(opts) {
   let auto = true;
   let dirty = false;
   let dirtySince = 0;
-  let timer3;
+  let timer2;
   let inFlight;
   const setStatus = (next) => {
     if (next === status) return;
@@ -1533,17 +973,17 @@ function createSaveController(opts) {
     opts.onStatus?.(status);
   };
   const clearTimer = () => {
-    if (timer3 === void 0) return;
-    clearTimeout(timer3);
-    timer3 = void 0;
+    if (timer2 === void 0) return;
+    clearTimeout(timer2);
+    timer2 = void 0;
   };
   const arm = () => {
     clearTimer();
     if (!auto) return;
     const deadline = dirtySince + maxWaitMs;
     const wait = Math.max(0, Math.min(delayMs, deadline - Date.now()));
-    timer3 = setTimeout(() => {
-      timer3 = void 0;
+    timer2 = setTimeout(() => {
+      timer2 = void 0;
       void run();
     }, wait);
   };
@@ -1636,18 +1076,21 @@ 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
+    )
   );
 }
 
 // src/toast.ts
 var DURATION = { info: 4e3, ok: 4e3, error: 7e3 };
 var node;
-var timer2 = 0;
+var timer = 0;
 var seq = 0;
 function mount() {
   if (node && node.isConnected) return node;
@@ -1664,8 +1107,8 @@ function toast(message, kind = "info", opts = {}) {
   t.textContent = message;
   t.className = `shell-toast ${kind}`;
   t.hidden = false;
-  window.clearTimeout(timer2);
-  timer2 = window.setTimeout(() => {
+  window.clearTimeout(timer);
+  timer = window.setTimeout(() => {
     closeWithExit(t, () => {
       if (seq === id) t.hidden = true;
     });
@@ -1673,7 +1116,7 @@ function toast(message, kind = "info", opts = {}) {
 }
 function dismissToast() {
   if (!node || node.hidden) return;
-  window.clearTimeout(timer2);
+  window.clearTimeout(timer);
   const id = seq;
   const t = node;
   closeWithExit(t, () => {
@@ -1682,14 +1125,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) {
@@ -1713,17 +1156,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) }),
@@ -1732,7 +1173,7 @@ function renderStepperBar(host, opts) {
       "button",
       { className: "stepbar-cur", tip: opts.tips?.go ?? "Go to this", onClick: () => opts.onGo(index) },
       item.kind === void 0 ? null : el("span", { className: `stepbar-cat${item.kindClass ? ` ${item.kindClass}` : ""}`, text: item.kind }),
-      item.where === void 0 ? null : el("span", { className: "stepbar-where", text: item.where }),
+      item.where === void 0 ? null : typeof item.where === "string" ? el("span", { className: "stepbar-where", text: item.where }) : el("span", "stepbar-where", item.where),
       el("span", { className: "stepbar-msg", text: item.text })
     ),
     ...actions,
@@ -1757,11 +1198,11 @@ function createNavHistory(opts) {
     }
   };
   return {
-    visit(place2) {
+    visit(place) {
       ahead = [];
       const top = past[past.length - 1];
-      if (top !== void 0 && opts.same(top, place2)) past[past.length - 1] = place2;
-      else past.push(place2);
+      if (top !== void 0 && opts.same(top, place)) past[past.length - 1] = place;
+      else past.push(place);
       if (past.length > cap) past = past.slice(past.length - cap);
     },
     back(current2) {
@@ -1779,18 +1220,18 @@ function createNavHistory(opts) {
   };
 }
 function historyNav(onBack, onForward) {
-  const btn = (glyph, tip2, onClick) => {
+  const btn = (name, tip, onClick) => {
     const b = document.createElement("button");
     b.type = "button";
     b.className = "shell-histnav-btn";
-    b.textContent = glyph;
-    b.dataset["tip"] = tip2;
-    b.setAttribute("aria-label", tip2);
+    b.append(iconNode(name));
+    b.dataset["tip"] = tip;
+    b.setAttribute("aria-label", tip);
     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);
@@ -1803,6 +1244,6 @@ function historyNav(onBack, onForward) {
   };
 }
 
-export { PALETTE, PALETTE_SIZE, PROPERTY_NAME_HINT, RESERVED_PROPERTY_NAMES, askIdentity, bindPropertyName, bindPropertyRef, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createNavHistory, createSaveController, dismissToast, dupGuard, el, expandableRow, firstIllegalPropertyName, focusNewRow, foldVc, gameIdify, hideTip, historyNav, icon, iconBtn, iconSvg, initTooltips, isCaseOnlyPropertyName, isValidGameId, isValidPropertyName, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, propertyNameProblem, propertyNameify, propertyRefProblem, renderStepperBar, revalidatePropertyRefs, revealRow, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, toast, vcBadgeFor };
+export { PALETTE, PALETTE_SIZE, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createNavHistory, createSaveController, dismissToast, foldVc, followButton, gameIdify, historyNav, isValidGameId, lockControls, lockNotice, mountJobProgress, mountPaneShell, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, toast, toolWindowHead, vcBadgeFor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map