@itmetsam/samurai-framework 0.9.0 → 0.12.0

package/dist/recorder/toolbar/page-scope.js

@@ -0,0 +1,43 @@
+/** What a wait on the page ends with when the page was left first */
+export const LEFT = Symbol("left the page");
+/**
+ * Tracks which document the toolbar is working for. Work started for an older document must not be answered, and
+ * Chrome never answers a command into a document that is being replaced, so such work stops being waited for.
+ */
+export class PageScope {
+    constructor() {
+        this.page = 0;
+        /** Wake-ups for the work waiting on the current page: called, and forgotten, when the page changes */
+        this.waiting = new Set();
+    }
+    /** Bumped on every page load */
+    get current() {
+        return this.page;
+    }
+    /** A new document loaded */
+    enter() {
+        this.page++;
+        this.leave();
+    }
+    /** Lets what waits on the current document stop waiting */
+    leave() {
+        const wakes = [...this.waiting];
+        this.waiting.clear();
+        for (const wake of wakes)
+            wake();
+    }
+    /** Runs `work`, but stops waiting for it when the page is left; resolves `LEFT` then */
+    async whileOn(work) {
+        let wake;
+        const left = new Promise((resolve) => {
+            wake = () => resolve(LEFT);
+            this.waiting.add(wake);
+        });
+        try {
+            return await Promise.race([work(), left]);
+        }
+        finally {
+            this.waiting.delete(wake);
+        }
+    }
+}

package/dist/recorder/toolbar/protocol.d.ts

@@ -3,7 +3,7 @@ import type { LocatorCall } from "../../steps/model.js";
 export declare const TOOLBAR_SANDBOX = "samurai-toolbar";
 /** `Symbol.for(TOOLBAR_KEY)` on the sandbox global holds the toolbar's hook: `update`, `reply`, `press`, `root` */
 export declare const TOOLBAR_KEY = "samurai.toolbar";
-export type MatcherChoice = "toBeVisible" | "toHaveText" | "toContainText" | "toHaveValue" | "toHaveAttribute" | "toHaveCount";
+type MatcherChoice = "toBeVisible" | "toHaveText" | "toContainText" | "toHaveValue" | "toHaveAttribute" | "toHaveCount";
 /** What the toolbar draws; secrets are names only */
 export interface ToolbarState {
     status: "recording" | "paused";
@@ -143,3 +143,4 @@ export type ActionReply = {
     error: string;
     field?: "name";
 };
+export {};

package/dist/recorder/toolbar/source/attach.d.ts

@@ -0,0 +1,2 @@
+/** Attaching the host to the document. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const ATTACH_JS: string;

package/dist/recorder/toolbar/source/attach.js

@@ -0,0 +1,41 @@
+/** Attaching the host to the document. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const ATTACH_JS = String.raw `  // ---- Attach ----
+  let announced = false;
+  const attach = () => {
+    const html = document.documentElement;
+    if (!html) return false;
+    if (host.parentNode !== html) html.appendChild(host);
+    if (!announced) {
+      announced = true;
+      render();
+      post({ action: "ready", url: location.href });
+    }
+    return true;
+  };
+  const rebind = (fresh) => {
+    channel = fresh;
+    announced = false;
+    attach();
+  };
+  let watcher = null;
+  // The recording ended while this document stays open: take every listener and the host away
+  const dispose = () => {
+    endDrag();
+    for (const [target, type, handler, capture] of listening.splice(0)) target.removeEventListener(type, handler, capture);
+    if (watcher) watcher.disconnect();
+    clearTimeout(toastTimer);
+    channel = () => {};
+    host.remove();
+    if (globalThis[KEY] && globalThis[KEY].root === root) delete globalThis[KEY];
+  };
+  globalThis[KEY] = { root, update, reply, press, rebind, dispose, state: () => state, picking: () => ui.picking };
+
+  const focused = document.activeElement;
+  if (focused && focused.nodeType === 1 && isTextEntry(focused)) ui.field = focused;
+  if (!attach()) {
+    watcher = new MutationObserver(() => { if (attach()) watcher.disconnect(); });
+    watcher.observe(document, { childList: true });
+  }
+  // The page may replace the root element while it loads
+  listen(document, "DOMContentLoaded", attach);
+  listen(window, "load", attach);`;

package/dist/recorder/toolbar/source/dom.d.ts

@@ -0,0 +1,2 @@
+/** DOM helpers: the shadow root, element builder and icons. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const DOM_JS: string;

package/dist/recorder/toolbar/source/dom.js

@@ -0,0 +1,47 @@
+/** DOM helpers: the shadow root, element builder and icons. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const DOM_JS = String.raw `  // ---- DOM ----
+  const h = (tag, props, ...kids) => {
+    const node = document.createElement(tag);
+    for (const key in props || {}) {
+      const value = props[key];
+      if (value === undefined || value === null || value === false) continue;
+      if (key === "class") node.className = value;
+      else if (key === "value" || key === "checked" || key === "disabled" || key === "selected") node[key] = value;
+      else node.setAttribute(key, value === true ? "" : String(value));
+    }
+    for (const kid of kids.flat(Infinity)) {
+      if (kid === null || kid === undefined || kid === false || kid === "") continue;
+      node.append(typeof kid === "string" ? document.createTextNode(kid) : kid);
+    }
+    return node;
+  };
+  const ico = (text) => h("span", { class: "ico" }, text);
+
+  // Styles go through the CSSOM (property by property, and a constructed sheet), which a page's CSP does not
+  // block, unlike a style attribute or a <style> element without 'unsafe-inline'
+  const host = document.createElement("samurai-recorder-toolbar");
+  const HOST_STYLE = [
+    ["all", "initial"], ["display", "block"], ["position", "fixed"], ["top", "0"], ["left", "0"], ["width", "0"],
+    ["height", "0"], ["overflow", "visible"], ["z-index", "2147483647"],
+  ];
+  for (const [name, value] of HOST_STYLE) host.style.setProperty(name, value, "important");
+  const root = host.attachShadow({ mode: "closed" });
+  const frame = h("div", { class: "frame" });
+  const container = h("div", { class: "ui" });
+  const outline = h("div", { class: "outline", hidden: true });
+  const toast = h("div", { class: "toast ui", hidden: true });
+  const notices = h("div", { class: "notices ui" });
+  let adopted = false;
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(CSS);
+    root.adoptedStyleSheets = [sheet];
+    adopted = root.adoptedStyleSheets.length === 1;
+  } catch (err) {
+    adopted = false;
+  }
+  // Without constructed sheets: a <style> element, which a strict CSP blocks
+  root.append(...(adopted ? [] : [h("style", null, CSS)]), frame, outline, container, toast, notices);
+
+  const viewport = () => ({ w: frame.clientWidth || innerWidth, h: frame.clientHeight || innerHeight });
+`;

package/dist/recorder/toolbar/source/drag.d.ts

@@ -0,0 +1,2 @@
+/** Dragging the rail. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const DRAG_JS: string;

package/dist/recorder/toolbar/source/drag.js

@@ -0,0 +1,32 @@
+/** Dragging the rail. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const DRAG_JS = String.raw `  // ---- Drag ----
+  const onDragMove = (event) => {
+    if (!ui.drag) return;
+    ui.drag.pos = { x: event.clientX - ui.drag.dx, y: event.clientY - ui.drag.dy };
+    ui.drag.moved = true;
+    placeAll();
+  };
+  const endDrag = () => {
+    if (!ui.drag) return;
+    const { moved, pointer } = ui.drag;
+    ui.drag = null;
+    window.removeEventListener("pointermove", onDragMove, true);
+    window.removeEventListener("pointerup", endDrag, true);
+    window.removeEventListener("pointercancel", endDrag, true);
+    try { host.releasePointerCapture(pointer); } catch (err) { /* already released */ }
+    if (!moved) return;
+    ui.dropped = { x: Math.round(railBox.x), y: Math.round(railBox.y) };
+    post({ action: "move", x: ui.dropped.x, y: ui.dropped.y });
+    placeAll();
+  };
+  const startDrag = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    ui.drag = { dx: event.clientX - railBox.x, dy: event.clientY - railBox.y, pos: { x: railBox.x, y: railBox.y }, moved: false, pointer: event.pointerId };
+    // Captured on the host, which re-renders never replace
+    try { host.setPointerCapture(event.pointerId); } catch (err) { /* moves still arrive while over the window */ }
+    window.addEventListener("pointermove", onDragMove, true);
+    window.addEventListener("pointerup", endDrag, true);
+    window.addEventListener("pointercancel", endDrag, true);
+  };
+`;

package/dist/recorder/toolbar/source/events-page.d.ts

@@ -0,0 +1,2 @@
+/** Events on the page, seen in the capture phase. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const EVENTS_PAGE_JS: string;

package/dist/recorder/toolbar/source/events-page.js

@@ -0,0 +1,67 @@
+/** Events on the page, seen in the capture phase. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const EVENTS_PAGE_JS = String.raw `  // ---- Events on the page (window capture runs before the page's and the capture script's listeners) ----
+  const swallow = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  // Typing in the toolbar stays in the toolbar: these run first on the window (registered at document start,
+  // before any page script), so no page listener sees a key, typed text or the clipboard of a toolbar input
+  // (the New secret value among them). The browser's default action, the text going into the input, still
+  // happens. Outside the shadow root the event's target is the host, so the input is the focused element.
+  const TYPING = ["keydown", "keyup", "keypress", "beforeinput", "input", "compositionstart", "compositionupdate", "compositionend", "paste", "cut", "copy"];
+  for (const type of TYPING) {
+    listen(window, type, (event) => {
+      // An untrusted event was dispatched by the page itself: it neither carries the tester's typing nor acts
+      if (!event.isTrusted || !inToolbar(event)) return;
+      event.stopImmediatePropagation();
+      const target = root.activeElement;
+      if (type === "keydown") {
+        if (event.key === "Escape" && (ui.picking || ui.panel)) {
+          event.preventDefault();
+          handlers.escape();
+        } else onKeydown(event, target);
+      } else if (type === "input" && target && target.type !== "radio" && target.type !== "checkbox") {
+        // A radio or checkbox the pointer changed need not have the focus; its change event (below) updates it
+        onField(event, target);
+      }
+    }, true);
+  }
+  listen(window, "keydown", (event) => {
+    if (event.isTrusted && event.key === "Escape" && (ui.picking || ui.panel)) {
+      swallow(event);
+      handlers.escape();
+    }
+  }, true);
+  listen(window, "pointerover", (event) => {
+    if (!ui.picking) return;
+    if (inToolbar(event) || !event.target || event.target.nodeType !== 1) hideOutline();
+    else showOutline(event.target);
+  }, true);
+  for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "dblclick", "auxclick", "contextmenu"]) {
+    listen(window, type, (event) => {
+      if (inToolbar(event)) return;
+      if (ui.picking) return swallow(event);
+      if (type === "pointerdown" && ui.panel) {
+        closePanel();
+        render();
+      }
+    }, true);
+  }
+  listen(window, "click", (event) => {
+    if (!ui.picking || inToolbar(event)) return;
+    swallow(event);
+    pick(event.target);
+  }, true);
+  listen(document, "focusin", (event) => {
+    if (inToolbar(event) || !event.target || event.target.nodeType !== 1) return;
+    ui.field = isTextEntry(event.target) ? event.target : null;
+    if (ui.panel === "insert" && !ui.insert.field && ui.field) {
+      ui.insert.field = ui.field;
+      render();
+    }
+  }, true);
+  listen(window, "resize", () => render());
+  listen(window, "scroll", () => {
+    if (ui.panel === "assert" && ui.assert && !outline.hidden) showOutline(ui.assert.target);
+  }, true);
+`;

package/dist/recorder/toolbar/source/events-toolbar.d.ts

@@ -0,0 +1,2 @@
+/** Events inside the toolbar. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const EVENTS_TOOLBAR_JS: string;

package/dist/recorder/toolbar/source/events-toolbar.js

@@ -0,0 +1,35 @@
+/** Events inside the toolbar. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const EVENTS_TOOLBAR_JS = String.raw `  // ---- Events inside the toolbar; none of them reach the page's bubbling listeners ----
+  root.addEventListener("click", (event) => {
+    event.stopPropagation();
+    const control = event.target.closest && event.target.closest("[data-action]");
+    if (!control || control.disabled) return;
+    press(control.getAttribute("data-action"), {
+      kind: control.getAttribute("data-kind"),
+      name: control.getAttribute("data-name"),
+      matcher: control.getAttribute("data-matcher"),
+      id: control.getAttribute("data-id"),
+    });
+  });
+  root.addEventListener("pointerdown", (event) => {
+    event.stopPropagation();
+    if (event.target.closest && event.target.closest("[data-grip]")) startDrag(event);
+  });
+  const onKeydown = (event, target) => {
+    const enter = event.key === "Enter" && target && target.getAttribute && target.getAttribute("data-enter");
+    if (!enter || event.isComposing) return;
+    event.preventDefault();
+    if (target.getAttribute("data-field")) onField(event, target);
+    press(enter);
+  };
+  // Typing reaches these only when it does not cross the shadow boundary (the window listeners below take the rest)
+  root.addEventListener("input", (event) => { event.stopPropagation(); onField(event); });
+  root.addEventListener("change", (event) => { event.stopPropagation(); onField(event); });
+  root.addEventListener("keydown", (event) => {
+    event.stopPropagation();
+    onKeydown(event, event.target);
+  });
+  for (const type of ["keyup", "keypress", "mousedown", "mouseup", "pointerup", "dblclick", "focusin", "focusout"]) {
+    root.addEventListener(type, (event) => event.stopPropagation());
+  }
+`;

package/dist/recorder/toolbar/source/fields.d.ts

@@ -0,0 +1,2 @@
+/** press() for tests and form field updates. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const FIELDS_JS: string;

package/dist/recorder/toolbar/source/fields.js

@@ -0,0 +1,44 @@
+/** press() for tests and form field updates. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const FIELDS_JS = String.raw `  const press = (action, detail) => {
+    const handler = handlers[action];
+    if (handler) handler(detail || {});
+  };
+
+  const onField = (event, target) => {
+    const t = target || event.target;
+    const field = t && t.getAttribute && t.getAttribute("data-field");
+    if (!field) return;
+    const value = t.value;
+    if (field === "expected" && ui.assert) ui.assert.expected = value;
+    else if (field === "attribute" && ui.assert) {
+      ui.assert.attribute = value;
+      ui.assert.expected = prefill(ui.assert, "toHaveAttribute");
+      render();
+    } else if (field === "countIndex" && ui.assert) {
+      ui.assert.countIndex = Number(value);
+      ui.assert.expected = prefill(ui.assert, "toHaveCount");
+      render();
+    } else if (field === "filter" && ui.insert) {
+      if (ui.insert.filter === value) return;
+      ui.insert.filter = value;
+      render();
+    } else if (field === "name" && ui.form) {
+      if (ui.form.name === value) return;
+      ui.form.name = value;
+      ui.form.nameError = null;
+      render();
+    } else if (field === "value" && ui.form) ui.form.value = value;
+    else if (field === "waitKind") {
+      ui.wait.kind = value === "time" ? "time" : "idle";
+      render();
+    } else if (field === "seconds") {
+      ui.wait.seconds = value;
+      ui.wait.kind = "time";
+      render();
+    } else if (field === "shotName") ui.shot.name = value;
+    else if (field === "fullPage") {
+      ui.shot.fullPage = value === "true";
+      render();
+    }
+  };
+`;

package/dist/recorder/toolbar/source/handlers.d.ts

@@ -0,0 +1,2 @@
+/** Every toolbar action, as a click on its control runs it. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const HANDLERS_JS: string;

package/dist/recorder/toolbar/source/handlers.js

@@ -0,0 +1,134 @@
+/** Every toolbar action, as a click on its control runs it. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const HANDLERS_JS = String.raw `  // Every action is what a click on its control does; press() runs the same functions
+  const handlers = {
+    dismiss: (d) => post({ action: "dismiss", id: Number(d.id) }),
+    pause: () => { if (!paused()) post({ action: "pause" }); },
+    resume: () => { if (paused()) post({ action: "resume" }); },
+    stop: () => {
+      stopPicking();
+      closePanel();
+      post({ action: "stop" });
+      render();
+    },
+    collapse: () => {
+      stopPicking();
+      closePanel();
+      post({ action: "collapse", collapsed: true });
+      render();
+    },
+    expand: () => post({ action: "collapse", collapsed: false }),
+    "resume-yes": () => { if (state.resumeQuestion) post({ action: "resume-goto", add: true }); },
+    "resume-no": () => { if (state.resumeQuestion) post({ action: "resume-goto", add: false }); },
+    assert: () => {
+      if (!usable()) return;
+      const wasOn = toolOn("assert");
+      stopPicking();
+      closePanel();
+      ui.picking = !wasOn;
+      render();
+    },
+    insert: () => openTool("insert"),
+    wait: () => openTool("wait"),
+    screenshot: () => openTool("screenshot"),
+    pick: (detail) => pick(detail.target),
+    matcher: (detail) => {
+      const a = ui.panel === "assert" && ui.assert;
+      if (!a || !a.info || !a.info.ok || unavailable(a.info, detail.matcher)) return;
+      a.matcher = detail.matcher;
+      a.expected = prefill(a, detail.matcher);
+      render();
+    },
+    not: () => {
+      if (ui.panel !== "assert" || !ui.assert || !ui.assert.info) return;
+      ui.assert.not = !ui.assert.not;
+      render();
+    },
+    "assert-add": () => {
+      const a = ui.panel === "assert" && ui.assert;
+      if (!a || ui.busy || !a.info || !a.info.ok) return;
+      const message = { action: "assert", id: a.id, target: a.target, candidates: a.candidates, matcher: a.matcher, not: a.not };
+      if (a.matcher !== "toBeVisible") message.expected = a.expected;
+      if (a.matcher === "toHaveAttribute") message.attribute = a.attribute;
+      if (a.matcher === "toHaveCount") message.countIndex = a.countIndex;
+      ui.busy = true;
+      a.error = null;
+      post(message);
+      render();
+    },
+    "insert-item": (detail) => {
+      if (ui.panel !== "insert" || ui.busy || !ui.insert.field) return;
+      if (detail.kind === "secret") {
+        const secret = state.secrets.find((s) => s.name === detail.name);
+        if (!secret) return;
+        if (!secret.set) return openForm("secret", secret.name, true);
+      } else if (!state.canAddVariables || !state.variables.some((v) => v.name === detail.name)) {
+        return;
+      }
+      sendInsert(detail.kind, detail.name);
+    },
+    "insert-first": () => {
+      if (ui.panel !== "insert" || !ui.insert.field) return;
+      const found = matches();
+      const first = found.variables[0] ? { kind: "env", name: found.variables[0].name } : found.secrets[0] && { kind: "secret", name: found.secrets[0].name };
+      if (first) handlers["insert-item"](first);
+    },
+    "insert-new": (detail) => {
+      if (ui.panel !== "insert" || !ui.insert.field) return;
+      const filter = ui.insert.filter.trim();
+      const base = filter || fieldName(ui.insert.field);
+      const name = detail.kind === "secret" ? snake(base) : filter ? variableName(filter) : camel(base);
+      openForm(detail.kind === "secret" ? "secret" : "env", name, false);
+    },
+    "new-kind": (detail) => {
+      const f = ui.panel === "new" && ui.form;
+      if (!f || ui.busy || f.kind === detail.kind) return;
+      f.kind = detail.kind === "secret" ? "secret" : "env";
+      f.name = f.kind === "secret" ? snake(f.name) : camel(f.name);
+      f.nameError = null;
+      f.error = null;
+      render();
+    },
+    "new-save": () => {
+      const f = ui.panel === "new" && ui.form;
+      if (!f || ui.busy || !f.name.trim() || (f.kind === "env" && !state.canAddVariables)) return;
+      const field = ui.insert.field;
+      const id = nextId++;
+      ui.pending = id;
+      ui.busy = true;
+      f.nameError = null;
+      f.error = null;
+      post({ action: "add-insertable", id, target: field, candidates: candidatesOf(field), kind: f.kind, name: f.name.trim(), value: f.value });
+      render();
+    },
+    "new-cancel": () => {
+      if (ui.panel !== "new") return;
+      ui.panel = "insert";
+      ui.form = null;
+      ui.busy = false;
+      ui.pending = 0;
+      ui.focus = "filter";
+      render();
+    },
+    "wait-add": () => {
+      if (ui.panel !== "wait" || ui.busy) return;
+      if (ui.wait.kind === "time" && !secondsValid()) return;
+      ui.busy = true;
+      ui.closeOnUpdate = true;
+      post(ui.wait.kind === "time" ? { action: "wait", kind: "time", ms: Math.round(Number(ui.wait.seconds) * 1000) } : { action: "wait", kind: "idle" });
+      render();
+    },
+    "screenshot-add": () => {
+      if (ui.panel !== "screenshot" || ui.busy) return;
+      ui.busy = true;
+      ui.closeOnUpdate = true;
+      post({ action: "screenshot", name: ui.shot.name.trim(), fullPage: ui.shot.fullPage });
+      render();
+    },
+    escape: () => {
+      if (!ui.picking && !ui.panel) return false;
+      stopPicking();
+      closePanel();
+      render();
+      return true;
+    },
+  };`;

package/dist/recorder/toolbar/source/names.d.ts

@@ -0,0 +1,2 @@
+/** Variable and field naming helpers. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const NAMES_JS: string;

package/dist/recorder/toolbar/source/names.js

@@ -0,0 +1,12 @@
+/** Variable and field naming helpers. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const NAMES_JS = String.raw `  // ---- Names and labels ----
+  const words = (text) => String(text).replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^A-Za-z0-9]+/).filter(Boolean);
+  const camel = (text) => words(text).map((w, i) => (i ? w[0].toUpperCase() + w.slice(1).toLowerCase() : w.toLowerCase())).join("");
+  const snake = (text) => words(text).map((w) => w.toUpperCase()).join("_");
+  const variableName = (text) => (/^[A-Za-z_$][\w$]*$/.test(text.trim()) ? text.trim() : camel(text));
+  const fieldName = (el) => labelTexts(el)[0] || el.getAttribute("name") || el.id || "";
+  const fieldLabel = (el) => {
+    const text = labelTexts(el)[0] || el.getAttribute("placeholder") || el.getAttribute("name") || el.id || "field";
+    return text.length > 40 ? text.slice(0, 39) + "…" : text;
+  };
+`;

package/dist/recorder/toolbar/source/picking.d.ts

@@ -0,0 +1,2 @@
+/** Opening and closing panels, and picking an element. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const PICKING_JS: string;

package/dist/recorder/toolbar/source/picking.js

@@ -0,0 +1,72 @@
+/** Opening and closing panels, and picking an element. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const PICKING_JS = String.raw `  // ---- Panels and picking ----
+  const closePanel = () => {
+    ui.panel = null;
+    ui.assert = null;
+    ui.busy = false;
+    ui.closeOnUpdate = false;
+    ui.pending = 0;
+    hideOutline();
+  };
+  const stopPicking = () => {
+    ui.picking = false;
+    if (ui.panel !== "assert") hideOutline();
+  };
+  const usable = () => !paused() && !state.collapsed;
+  const openTool = (tool) => {
+    if (!usable()) return;
+    const wasOpen = toolOn(tool);
+    stopPicking();
+    closePanel();
+    if (!wasOpen) {
+      ui.panel = tool;
+      if (tool === "insert") {
+        // The field focused now, else the last one (a toolbar button may have taken the focus)
+        const active = document.activeElement;
+        const focused = active && active !== host && active.nodeType === 1 && isTextEntry(active) ? active : null;
+        const field = focused || (ui.field && ui.field.isConnected ? ui.field : null);
+        ui.field = field;
+        ui.insert = { field, filter: "", error: null };
+        if (field) ui.focus = "filter";
+      } else if (tool === "wait") {
+        ui.wait = { kind: "idle", seconds: "2" };
+      } else if (tool === "screenshot") {
+        ui.shot = { name: state.nextScreenshot, fullPage: false };
+        ui.focus = "shotName";
+      }
+    }
+    render();
+  };
+  const pick = (target) => {
+    if (!ui.picking || !target || target.nodeType !== 1) return;
+    ui.picking = false;
+    closePanel();
+    const id = nextId++;
+    const candidates = candidatesOf(target);
+    const r = target.getBoundingClientRect();
+    ui.assert = {
+      id, target, candidates, info: null, matcher: "toBeVisible", expected: "", attribute: null, countIndex: 0, not: false, error: null,
+      rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom },
+    };
+    ui.panel = "assert";
+    ui.pending = id;
+    showOutline(target);
+    post({ action: "pick", id, target, candidates });
+    render();
+  };
+  const openForm = (kind, name, setValue) => {
+    ui.form = { kind, name, value: "", nameError: null, error: null, setValue };
+    ui.panel = "new";
+    ui.focus = name ? "value" : "name";
+    render();
+  };
+  const sendInsert = (kind, name) => {
+    const field = ui.insert.field;
+    const id = nextId++;
+    ui.pending = id;
+    ui.busy = true;
+    ui.insert.error = null;
+    post({ action: "insert", id, target: field, candidates: candidatesOf(field), kind, name });
+    render();
+  };
+`;

package/dist/recorder/toolbar/source/placement.d.ts

@@ -0,0 +1,2 @@
+/** Where the rail and panels sit in the window. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const PLACEMENT_JS: string;

package/dist/recorder/toolbar/source/placement.js

@@ -0,0 +1,45 @@
+/** Where the rail and panels sit in the window. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const PLACEMENT_JS = String.raw `  // ---- Placement ----
+  const place = (node, want) => {
+    const rect = node.getBoundingClientRect();
+    const v = viewport();
+    const x = clamp(want ? want.x : v.w - rect.width - 12, v.w - rect.width);
+    const y = clamp(want ? want.y : 12, v.h - rect.height);
+    node.style.left = x + "px";
+    node.style.top = y + "px";
+    return { x, y, w: rect.width, h: rect.height };
+  };
+  const wantedSpot = () => (ui.drag ? ui.drag.pos : ui.dropped || state.position);
+  const placePanel = (panel) => {
+    const rect = panel.getBoundingClientRect();
+    const v = viewport();
+    let x;
+    let y;
+    if (ui.panel === "assert" && ui.assert) {
+      const t = ui.assert.rect;
+      // Beside the element; below it (or above) when it is too wide for either side
+      if (t.right + 8 + rect.width <= v.w) [x, y] = [t.right + 8, t.top];
+      else if (t.left - 8 - rect.width >= 0) [x, y] = [t.left - 8 - rect.width, t.top];
+      else [x, y] = [t.left, t.bottom + 8 + rect.height <= v.h ? t.bottom + 8 : t.top - 8 - rect.height];
+    } else {
+      x = railBox.x + railBox.w / 2 > v.w / 2 ? railBox.x - 8 - rect.width : railBox.x + railBox.w + 8;
+      y = railBox.y;
+    }
+    panel.style.left = clamp(x, v.w - rect.width) + "px";
+    panel.style.top = clamp(y, v.h - rect.height) + "px";
+  };
+  const placeAll = () => {
+    const [rail, panel] = container.children;
+    if (rail) railBox = place(rail, wantedSpot());
+    if (panel) placePanel(panel);
+  };
+  const showOutline = (el) => {
+    const r = el.getBoundingClientRect();
+    outline.style.left = r.left + "px";
+    outline.style.top = r.top + "px";
+    outline.style.width = r.width + "px";
+    outline.style.height = r.height + "px";
+    outline.hidden = false;
+  };
+  const hideOutline = () => { outline.hidden = true; };
+`;

package/dist/recorder/toolbar/source/recorder-side.d.ts

@@ -0,0 +1,2 @@
+/** The recorder's side of the hook: update, reply, rebind, dispose. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const RECORDER_SIDE_JS: string;