@wildwinter/app-shell 0.1.0 → 0.14.0

package/dist/index.js

@@ -1,3 +1,6 @@
+export { JOB_PROGRESS } from './chunk-MDGOIT3O.js';
+export { EDIT_MENU, PANE_MENU } from './chunk-R6RO5TXB.js';
+
 // src/dom.ts
 function el(tag, classNameOrProps, ...children) {
   const node = document.createElement(tag);
@@ -5,6 +8,10 @@ function el(tag, classNameOrProps, ...children) {
   if (props.className) node.className = props.className;
   if (props.text !== void 0 && props.text !== null) node.textContent = props.text;
   if (props.title !== void 0) node.title = props.title;
+  if (props.tip !== void 0) {
+    node.dataset["tip"] = props.tip;
+    node.setAttribute("aria-label", props.tip);
+  }
   if (props.onClick) node.addEventListener("click", props.onClick);
   for (const child of children) {
     if (child === null || child === void 0) continue;
@@ -12,6 +19,67 @@ function el(tag, classNameOrProps, ...children) {
   }
   return node;
 }
+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 w = el("label", "shell-labelled");
+  w.append(el("span", "shell-fieldcap", label2), control);
+  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.title = `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;
+}
 
 // src/colour.ts
 var PALETTE_SIZE = 12;
@@ -33,6 +101,1178 @@ function colourFor(name) {
   return PALETTE[colourIndex(name)];
 }
 
-export { PALETTE, PALETTE_SIZE, colourFor, colourIndex, el };
+// 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",
+  /** 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",
+  // --- 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" };
+var collapseClass = { nav: "no-nav", inspector: "no-inspector" };
+function mountPaneShell(host, opts) {
+  const cfg = { nav: opts.nav, inspector: opts.inspector };
+  const open = { nav: opts.initial?.open?.nav ?? true, inspector: opts.initial?.open?.inspector ?? true };
+  const width = { ...opts.initial?.width ?? {} };
+  const el2 = (tag, cls) => {
+    const n = document.createElement(tag);
+    if (cls) n.className = cls;
+    return n;
+  };
+  const navToggle = el2("button", "pane-toggle");
+  navToggle.type = "button";
+  const inspToggle = el2("button", "pane-toggle");
+  inspToggle.type = "button";
+  const topbarLead = el2("div", "topbar-lead");
+  const topbarTrail = el2("div", "topbar-trail");
+  const spacer = el2("span", "topbar-spacer");
+  const topbar = el2("header", "topbar");
+  topbar.append(navToggle, topbarLead, spacer, topbarTrail, inspToggle);
+  const panes = el2("main", "panes");
+  const navPane = el2("nav", "pane pane-nav");
+  const navInner = el2("div", "pane-inner");
+  navPane.append(navInner);
+  const centre = el2("section", "pane-centre");
+  const inspPane = el2("aside", "pane pane-inspector");
+  const inspInner = el2("div", "pane-inner");
+  inspPane.append(inspInner);
+  const navResizer = el2("div", "pane-resizer pane-resizer-nav");
+  const inspResizer = el2("div", "pane-resizer pane-resizer-insp");
+  panes.append(navPane, centre, inspPane, navResizer, inspResizer);
+  const root = el2("div", "pane-shell");
+  root.append(topbar, panes);
+  host.append(root);
+  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.setAttribute("aria-pressed", String(isOpen));
+  }
+  function apply() {
+    panes.classList.toggle(collapseClass.nav, !open.nav);
+    panes.classList.toggle(collapseClass.inspector, !open.inspector);
+    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);
+    applyToggleGlyph("inspector", inspToggle);
+    navResizer.style.display = cfg.nav.resizable === false ? "none" : "";
+    inspResizer.style.display = cfg.inspector.resizable === false ? "none" : "";
+  }
+  const snapshot = () => ({ open: { ...open }, width: { ...width } });
+  const persist = () => opts.onChange?.(snapshot());
+  function setPaneOpen(side, next) {
+    if (open[side] === next) return;
+    open[side] = next;
+    apply();
+    persist();
+  }
+  function togglePane(side) {
+    setPaneOpen(side, !open[side]);
+  }
+  function resetWidths() {
+    delete width.nav;
+    delete width.inspector;
+    apply();
+    persist();
+  }
+  navToggle.addEventListener("click", () => togglePane("nav"));
+  inspToggle.addEventListener("click", () => togglePane("inspector"));
+  function beginResize(side, startEvent) {
+    if (cfg[side].resizable === false || !open[side]) return;
+    startEvent.preventDefault();
+    const pane = side === "nav" ? navPane : inspPane;
+    const min = cfg[side].minWidth ?? 160;
+    const max = cfg[side].maxWidth ?? DEFAULT_MAX;
+    const startX = startEvent.clientX;
+    const startW = pane.getBoundingClientRect().width;
+    document.body.classList.add("pane-resizing");
+    let latest = startW;
+    const onMove = (e) => {
+      const delta = side === "nav" ? e.clientX - startX : startX - e.clientX;
+      latest = Math.max(min, Math.min(max(window.innerWidth), startW + delta));
+      panes.style.setProperty(openVar[side], `${latest}px`);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      document.body.classList.remove("pane-resizing");
+      width[side] = latest;
+      persist();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }
+  navResizer.addEventListener("pointerdown", (e) => beginResize("nav", e));
+  inspResizer.addEventListener("pointerdown", (e) => beginResize("inspector", e));
+  navResizer.addEventListener("dblclick", () => {
+    delete width.nav;
+    apply();
+    persist();
+  });
+  inspResizer.addEventListener("dblclick", () => {
+    delete width.inspector;
+    apply();
+    persist();
+  });
+  apply();
+  return {
+    root,
+    topbar,
+    topbarLead,
+    topbarTrail,
+    nav: navInner,
+    centre,
+    inspector: inspInner,
+    togglePane,
+    setPaneOpen,
+    isOpen: (s) => open[s],
+    resetWidths,
+    state: snapshot,
+    destroy: () => {
+      root.remove();
+    }
+  };
+}
+
+// src/settings.ts
+function expandableRow(opts) {
+  const row = el("div", "set-row");
+  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.title = "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 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;
+  let pinned = opts.pinned;
+  const reflect = () => {
+    b.classList.toggle("on", pinned);
+    b.setAttribute("aria-pressed", String(pinned));
+    b.title = pinned ? "Pinned on top: click to unpin" : "Click to keep on top";
+  };
+  reflect();
+  b.addEventListener("click", () => {
+    pinned = !pinned;
+    reflect();
+    opts.onToggle(pinned);
+  });
+  return b;
+}
+
+// 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);
+      dlg.classList.add("closing");
+      const dur = parseFloat(getComputedStyle(dlg).animationDuration) || 0;
+      const teardown = () => {
+        dlg.close();
+        dlg.remove();
+      };
+      if (dur === 0) {
+        teardown();
+        return;
+      }
+      const timer2 = setTimeout(teardown, dur * 1e3 + 120);
+      dlg.addEventListener("animationend", (e) => {
+        if (e.target !== dlg) return;
+        clearTimeout(timer2);
+        teardown();
+      });
+    };
+    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);
+    });
+    dlg.showModal();
+    cancel.focus();
+  });
+}
+
+// src/about.ts
+function showAbout(opts) {
+  return new Promise((resolve) => {
+    const dialog = el("dialog", "shell-about");
+    if (opts.wordmark !== void 0) {
+      const mark = el("div", "shell-about-mark");
+      mark.innerHTML = opts.wordmark;
+      dialog.append(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));
+    if (opts.links?.length) {
+      const row = el("div", "shell-about-links");
+      for (const link of opts.links) {
+        if (!opts.onOpenLink) {
+          row.append(el("span", "shell-about-link", link.label));
+          continue;
+        }
+        const a = el("button", "shell-about-link", link.label);
+        a.type = "button";
+        a.addEventListener("click", () => opts.onOpenLink?.(link.url));
+        row.append(a);
+      }
+      dialog.append(row);
+    }
+    const close = el("button", "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.focus();
+  });
+}
+
+// src/anchored.ts
+var current = null;
+function openAnchoredPanel(opts) {
+  if (current) {
+    const prev = current;
+    current = 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");
+  closeBtn.type = "button";
+  closeBtn.setAttribute("aria-label", "Close");
+  const body = el("div", "shell-anchored-body");
+  panel.append(
+    el("div", "shell-anchored-head", el("span", "shell-anchored-title", opts.title), closeBtn),
+    body
+  );
+  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;
+    document.removeEventListener("pointerdown", onDown, true);
+    document.removeEventListener("keydown", onKey, true);
+    panel.remove();
+    opts.onClose?.();
+  };
+  closeBtn.addEventListener("click", close);
+  const onDown = (e) => {
+    const target = e.target;
+    if (panel.contains(target) || opts.anchor.contains(target)) return;
+    if (opts.ignoreDown !== void 0 && target instanceof Element && target.closest(opts.ignoreDown)) return;
+    close();
+  };
+  const onKey = (e) => {
+    if (e.key !== "Escape") return;
+    if (opts.deferEscape !== void 0 && document.querySelector(opts.deferEscape)) return;
+    close();
+  };
+  setTimeout(() => {
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+  }, 0);
+  current = { anchor: opts.anchor, panel, close };
+  return { panel, body, close };
+}
+function closeAnchoredPanel() {
+  const open = current;
+  current = null;
+  open?.close();
+}
+function placeAnchored(panel, anchor, width, prefer, keepClear) {
+  const a = anchor.getBoundingClientRect();
+  const GAP2 = 10;
+  const CAP = window.innerHeight * 0.7;
+  const MIN_H = 140;
+  panel.style.width = `${width}px`;
+  const leftOf = a.left - width - GAP2;
+  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`;
+  let bottomLimit = window.innerHeight - 8;
+  for (const selector of keepClear) {
+    const bar = document.querySelector(selector);
+    if (!bar) continue;
+    const r = bar.getBoundingClientRect();
+    if (r.height > 0) bottomLimit = Math.min(bottomLimit, r.top - 6);
+  }
+  const roomBelow = bottomLimit - (a.bottom + GAP2);
+  const roomAbove = a.top - GAP2 - 8;
+  if (roomAbove > roomBelow) {
+    panel.style.top = "auto";
+    panel.style.bottom = `${Math.round(window.innerHeight - (a.top - GAP2))}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.maxHeight = `${Math.round(Math.max(MIN_H, Math.min(CAP, roomBelow)))}px`;
+  }
+}
+
+// src/vc-view.ts
+function foldVc(shards, keys) {
+  if (!keys) return void 0;
+  let out;
+  for (const key of keys.split(" ")) {
+    const s = shards.get(key);
+    if (!s) continue;
+    out ??= { key, writable: true };
+    if (!s.writable) out.writable = false;
+    if (s.lockedBy?.length) out.lockedBy = [.../* @__PURE__ */ new Set([...out.lockedBy ?? [], ...s.lockedBy])];
+    if (s.outOfDate) out.outOfDate = true;
+  }
+  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 && !s.writable) return { glyph: icon.readOnly, cls: "vc-frozen", title: "Read-only on disk - saving checks it out" };
+  return null;
+}
+function paintVcBadges(root, shards) {
+  root.querySelectorAll("[data-vc]").forEach((host) => {
+    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 });
+    host.append(span);
+  });
+}
+function lockControls(host, off, staysLive) {
+  host.classList.toggle("vc-readonly", off);
+  if (off) {
+    host.querySelectorAll("input, textarea, select, button").forEach((c) => {
+      if (c.disabled || staysLive !== "" && c.matches(staysLive)) return;
+      c.disabled = true;
+      c.classList.add("vc-off");
+    });
+  } else {
+    host.querySelectorAll(".vc-off").forEach((c) => {
+      c.disabled = false;
+      c.classList.remove("vc-off");
+    });
+  }
+}
+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.` })
+  );
+}
+
+// src/identity.ts
+function askIdentity(opts = {}) {
+  return new Promise((resolve) => {
+    const seed = opts.current ?? opts.suggested;
+    const name = el("input", "shell-ident-input");
+    name.placeholder = "Your name";
+    name.value = seed?.name ?? "";
+    const email = el("input", "shell-ident-input");
+    email.placeholder = "Email (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");
+    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();
+      resolve(answer);
+    };
+    skip.addEventListener("click", () => finish(false));
+    save.addEventListener("click", () => finish(true));
+    name.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") finish(true);
+    });
+    email.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") finish(true);
+    });
+    dialog.addEventListener("close", () => finish(false));
+    dialog.showModal();
+    name.focus();
+  });
+}
+
+// src/notes-editor.ts
+var EDITOR_ONLY = "";
+var UNTYPED_KEY = "__untyped";
+var CLASS_LABEL = {
+  everyone: "Everyone",
+  writing: "Writing",
+  vo: "Voice (VO)",
+  loc: "Localisers"
+};
+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"
+};
+var placeholder = (cls) => cls === EDITOR_ONLY ? "an internal note - never exported" : PLACEHOLDER[cls] ?? "intent / rationale - why this is here";
+function openNotesEditor(opts) {
+  const { notes } = opts;
+  const seed = /* @__PURE__ */ new Map();
+  for (const line of notes.own) {
+    const key = line.type ?? EDITOR_ONLY;
+    seed.set(key, seed.has(key) ? `${seed.get(key)}
+${line.text}` : line.text);
+  }
+  const shown = [...seed.keys()];
+  if (shown.length === 0) shown.push(notes.classes[0] ?? EDITOR_ONLY);
+  const areas = /* @__PURE__ */ new Map();
+  const value = () => {
+    const out = [];
+    for (const cls of shown) {
+      const area = areas.get(cls);
+      if (!area) continue;
+      for (const raw of area.value.split("\n")) {
+        const text = raw.trim();
+        if (text !== "") out.push(cls === EDITOR_ONLY ? { text } : { type: cls, text });
+      }
+    }
+    return out;
+  };
+  const body = el("div", "shell-notes-body");
+  const render = () => {
+    body.replaceChildren();
+    if (notes.inherited.length > 0) {
+      const from = el(
+        "div",
+        { className: "shell-notes-inherited" },
+        el("div", "shell-notes-caption", "Inherited")
+      );
+      for (const level of notes.inherited) {
+        from.append(el(
+          "div",
+          { className: "shell-notes-level" },
+          el("span", "shell-notes-level-label", level.label),
+          ...level.lines.map((line) => el(
+            "div",
+            { className: "shell-notes-line" },
+            ...line.type !== void 0 && line.type !== "everyone" ? [el("span", "shell-notes-cls", label(line.type))] : [],
+            el("span", "", line.text)
+          ))
+        ));
+      }
+      body.append(from);
+    }
+    for (const cls of shown) {
+      const block = el(
+        "div",
+        { className: "shell-notes-class" },
+        el("label", "shell-notes-caption", label(cls))
+      );
+      const area = el("textarea", "shell-notes-text");
+      area.value = areas.get(cls)?.value ?? seed.get(cls) ?? "";
+      area.rows = 4;
+      area.placeholder = placeholder(cls);
+      area.spellcheck = true;
+      areas.set(cls, area);
+      block.append(area);
+      body.append(block);
+    }
+    body.append(el("p", "shell-notes-hint", "One note per line."));
+    const remaining = [...notes.classes, EDITOR_ONLY].filter((c) => !shown.includes(c));
+    if (remaining.length > 0) {
+      const add = el("select", "shell-notes-add");
+      add.append(new Option("Add a note for\u2026", ""));
+      for (const cls of remaining) add.append(new Option(label(cls), cls === EDITOR_ONLY ? UNTYPED_KEY : cls));
+      add.addEventListener("change", () => {
+        if (add.value === "") return;
+        const cls = add.value === UNTYPED_KEY ? EDITOR_ONLY : add.value;
+        shown.push(cls);
+        render();
+        areas.get(cls)?.focus();
+      });
+      body.append(add);
+    }
+  };
+  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 before = JSON.stringify(notes.own);
+  let closed = false;
+  const close = () => {
+    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();
+  areas.get(shown[0] ?? EDITOR_ONLY)?.focus();
+}
+
+// src/comments.ts
+var stamp = (ts) => {
+  const when = new Date(ts);
+  if (Number.isNaN(when.getTime())) return ts;
+  return when.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+};
+var gist = (thread) => {
+  const first = thread.messages[0]?.body ?? "";
+  return first.length > 60 ? `${first.slice(0, 57)}\u2026` : first;
+};
+function openComments(opts) {
+  const visible = opts.threads.filter((t) => opts.showResolved || t.resolved !== true);
+  const panel = openAnchoredPanel({
+    anchor: opts.anchor,
+    className: "comments",
+    title: "Comments",
+    width: 320,
+    // Below its button (the topline), unlike Patterpad's inspector rows which
+    // want it to the left; and never over the problems bar, which an author may
+    // be stepping through while reading the thread.
+    prefer: "below",
+    keepClear: [".problembar"]
+  });
+  if (!panel) return;
+  const { body, close } = panel;
+  let open = visible.length === 1 ? visible[0] : void 0;
+  let composing = visible.length === 0;
+  const render = () => {
+    body.replaceChildren();
+    if (!composing && open === void 0) {
+      for (const thread2 of visible) {
+        const row = el(
+          "button",
+          { className: `shell-cmt-row${thread2.resolved === true ? " resolved" : ""}` },
+          el("span", { className: "shell-cmt-row-author", text: thread2.messages[0]?.author ?? "Someone" }),
+          el("span", { className: "shell-cmt-row-gist", text: gist(thread2) }),
+          ...thread2.messages.length > 1 ? [el("span", { className: "shell-cmt-row-count", text: `${thread2.messages.length}` })] : []
+        );
+        row.addEventListener("click", () => {
+          open = thread2;
+          render();
+        });
+        body.append(row);
+      }
+      const fresh = el("button", { className: "shell-cmt-new", text: "New comment" });
+      fresh.addEventListener("click", () => {
+        open = void 0;
+        composing = true;
+        render();
+      });
+      body.append(fresh);
+      return;
+    }
+    const thread = open;
+    if (thread) {
+      const list = el("div", { className: `shell-cmt-list${thread.resolved === true ? " resolved" : ""}` });
+      for (const message of thread.messages) {
+        list.append(el(
+          "div",
+          { className: "shell-cmt-msg" },
+          el(
+            "div",
+            { className: "shell-cmt-msg-head" },
+            el("span", { className: "shell-cmt-author", text: message.author === "" ? "Someone" : message.author }),
+            el("span", { className: "shell-cmt-ts", text: stamp(message.ts) })
+          ),
+          el("div", { className: "shell-cmt-body", text: message.body })
+        ));
+      }
+      body.append(list);
+    }
+    const input = el("textarea", { className: "shell-cmt-input" });
+    input.rows = 2;
+    input.placeholder = thread ? "Reply\u2026" : "Comment\u2026";
+    input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key !== "Enter" || e.shiftKey) return;
+      e.preventDefault();
+      submit(true);
+    });
+    body.append(input);
+    const submit = (andClose) => {
+      const text = input.value.trim();
+      if (text === "") return;
+      const id = thread?.id ?? opts.newThreadId();
+      opts.post(id, text);
+      if (andClose) close();
+      else {
+        input.value = "";
+      }
+    };
+    const actions = el("div", { className: "shell-cmt-actions" });
+    const post = el("button", { className: "shell-cmt-btn primary", text: thread ? "Reply" : "Comment" });
+    post.addEventListener("click", () => submit(false));
+    actions.append(post);
+    if (thread) {
+      const resolved = thread.resolved === true;
+      const toggle = el("button", { className: "shell-cmt-btn", text: resolved ? "Reopen" : "Mark complete" });
+      toggle.addEventListener("click", () => {
+        opts.setResolved(thread.id, !resolved);
+        if (!resolved) close();
+        else render();
+      });
+      actions.append(toggle);
+    }
+    body.append(actions);
+    if (!thread) input.focus();
+  };
+  render();
+}
+
+// src/job-view.ts
+var clock = (ms) => {
+  const total = Math.round(ms / 1e3);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return m > 0 ? `${m}m ${String(s).padStart(2, "0")}s` : `${s}s`;
+};
+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 fill = el("i", { className: "job-fill" });
+  const bar = el("div", { className: "job-bar" }, fill);
+  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" });
+  const strip = el("div", { className: "job-strip" }, what, bar, count, time, cancel);
+  strip.hidden = true;
+  host.append(strip);
+  const view = {
+    element: strip,
+    get visible() {
+      return !strip.hidden;
+    },
+    begin(label2) {
+      what.textContent = label2 ?? "Running\u2026";
+      count.textContent = "";
+      time.textContent = "";
+      fill.style.width = "0%";
+      cancel.disabled = false;
+      cancel.textContent = "Cancel";
+      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 remaining = elapsedMs / done * (total - done);
+        time.textContent = `${clock(elapsedMs)} elapsed \xB7 about ${clock(remaining)} left`;
+      } else {
+        time.textContent = clock(elapsedMs);
+      }
+    },
+    end() {
+      strip.hidden = true;
+    }
+  };
+  cancel.addEventListener("click", () => {
+    cancel.disabled = true;
+    cancel.textContent = "Stopping\u2026";
+    opts.onCancel();
+  });
+  return view;
+}
+
+// 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 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();
+}
+var tipAncestor = (n) => n instanceof Element ? n.closest("[data-tip]") : null;
+function initTooltips(opts = {}) {
+  if (inited) return;
+  inited = true;
+  suppressed = opts.suppressed;
+  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/save.ts
+function createSaveController(opts) {
+  const delayMs = opts.delayMs ?? 700;
+  const maxWaitMs = opts.maxWaitMs ?? 5e3;
+  let status = "saved";
+  let auto = true;
+  let dirty = false;
+  let dirtySince = 0;
+  let timer2;
+  let inFlight;
+  const setStatus = (next) => {
+    if (next === status) return;
+    status = next;
+    opts.onStatus?.(status);
+  };
+  const clearTimer = () => {
+    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()));
+    timer2 = setTimeout(() => {
+      timer2 = void 0;
+      void run();
+    }, wait);
+  };
+  const run = async () => {
+    if (inFlight) return inFlight;
+    if (!dirty) {
+      setStatus("saved");
+      return;
+    }
+    clearTimer();
+    dirty = false;
+    setStatus("saving");
+    inFlight = (async () => {
+      let ok = false;
+      try {
+        ok = await opts.write();
+      } catch {
+        ok = false;
+      }
+      if (!ok) {
+        if (!dirty) {
+          dirty = true;
+          dirtySince = dirtySince || Date.now();
+        }
+      }
+      setStatus(dirty ? "unsaved" : "saved");
+      if (dirty) arm();
+    })();
+    try {
+      await inFlight;
+    } finally {
+      inFlight = void 0;
+    }
+  };
+  return {
+    get status() {
+      return status;
+    },
+    get pending() {
+      return dirty || inFlight !== void 0;
+    },
+    touch() {
+      if (!dirty) dirtySince = Date.now();
+      dirty = true;
+      if (!inFlight) setStatus("unsaved");
+      arm();
+    },
+    async flush() {
+      if (inFlight) await inFlight;
+      if (dirty) await run();
+      else setStatus("saved");
+    },
+    cancel() {
+      clearTimer();
+      dirty = false;
+      setStatus(inFlight ? "saving" : "saved");
+    },
+    setAuto(on) {
+      auto = on;
+      if (on) {
+        if (dirty) arm();
+      } else clearTimer();
+    }
+  };
+}
+
+export { PALETTE, PALETTE_SIZE, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, hideTip, icon, iconBtn, iconSvg, initTooltips, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openNotesEditor, paintVcBadges, pinButton, placeAnchored, showAbout, tagChips, tipAt, tipBold, vcBadgeFor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map