@miragon/modeler-api 1.3.0 → 1.4.0

package/dist/conformance.cjs

@@ -28,7 +28,7 @@ __export(conformance_exports, {
 module.exports = __toCommonJS(conformance_exports);
 
 // src/index.ts
-var MODELER_API_VERSION = "1.3.0";
+var MODELER_API_VERSION = "1.4.0";
 function apiVersionsCompatible(a, b) {
   const [aMajor = "", aMinor = ""] = a.split(".");
   const [bMajor = "", bMinor = ""] = b.split(".");
@@ -37,6 +37,8 @@ function apiVersionsCompatible(a, b) {
 }
 
 // src/conformance.ts
+var nextHostSerial = 0;
+var attachedHosts = [];
 function attachedHost(width = 800, height = 600) {
   const wrapper = document.createElement("div");
   wrapper.style.cssText = `width:${width}px;height:${height}px;position:absolute;left:0;top:0;overflow:hidden`;
@@ -44,6 +46,8 @@ function attachedHost(width = 800, height = 600) {
   host.style.cssText = "width:100%;height:100%";
   wrapper.append(host);
   document.body.append(wrapper);
+  attachedHosts = attachedHosts.filter((entry) => entry.wrapper.isConnected);
+  attachedHosts.push({ serial: nextHostSerial++, host, wrapper });
   return host;
 }
 function fail(message) {
@@ -85,17 +89,17 @@ function contentBoxOf(m, when) {
 }
 function expectContentAroundElements(m, when) {
   const box = contentBoxOf(m, when);
-  const listed = m.elements?.list() ?? [];
+  const listed2 = m.elements?.list() ?? [];
   if (box === void 0) {
-    if (listed.length > 0) {
+    if (listed2.length > 0) {
       fail(
-        `contentBounds() ${when} is undefined while elements.list() reports ${listed.length} element(s) \u2014 undefined means there is nothing to fit`
+        `contentBounds() ${when} is undefined while elements.list() reports ${listed2.length} element(s) \u2014 undefined means there is nothing to fit`
       );
     }
     return void 0;
   }
   if (m.elements && hasBounds(m.elements)) {
-    for (const { id } of listed) {
+    for (const { id } of listed2) {
       const element = m.elements.bounds(id);
       if (!isFiniteBox(element)) continue;
       if (!covers(box, element)) {
@@ -189,7 +193,9 @@ function probesOf(h) {
       { label: `${source} followed by a NUL character`, text: `${text}\0` }
     );
   });
-  (h.probeTexts ?? []).forEach((text, index) => probes.push({ label: `probeTexts[${index}]`, text }));
+  (h.probeTexts ?? []).forEach(
+    (text, index) => probes.push({ label: `probeTexts[${index}]`, text })
+  );
   const seen = /* @__PURE__ */ new Set();
   return probes.filter((probe) => {
     if (seen.has(probe.text)) return false;
@@ -202,7 +208,9 @@ async function importContentText(h, m) {
     await m.importText(text);
     if (!m.elements || m.elements.list().length > 0) return text;
   }
-  fail("L5 needs a canonical text that renders at least one element \u2014 an empty document has no fitted view");
+  fail(
+    "L5 needs a canonical text that renders at least one element \u2014 an empty document has no fitted view"
+  );
 }
 function conformanceCases() {
   return [
@@ -240,13 +248,19 @@ function conformanceCases() {
           for (const [index, text] of texts.entries()) {
             const source = `canonicalTexts[${index}]`;
             await control.importText(text);
-            const expected = exportOrFail(control, `after importing ${source} into a fresh instance`);
+            const expected = exportOrFail(
+              control,
+              `after importing ${source} into a fresh instance`
+            );
             await importOrFail(
               m,
               text,
               `importText(${source}) rejected on an instance that ran exportText() and a user command before its first import (wedged)`
             );
-            last = exportOrFail(m, `after importing ${source} into an instance used before its first import`);
+            last = exportOrFail(
+              m,
+              `after importing ${source} into an instance used before its first import`
+            );
             if (last !== expected) {
               fail(
                 `importText(${source}) on an instance that ran exportText() and a user command before its first import did not render that document:
@@ -264,7 +278,9 @@ ${last}`
             );
           }
           if (exportOrFail(m, "after a user mutation on an instance used before its first import") === last) {
-            fail("a user mutation did not apply on an instance used before its first import (wedged)");
+            fail(
+              "a user mutation did not apply on an instance used before its first import (wedged)"
+            );
           }
         } finally {
           m.destroy();
@@ -283,7 +299,11 @@ ${last}`
             ...(h.foreignTexts ?? []).map((f) => f.text)
           ];
           for (const text of texts) {
-            const { calls } = await changeEvents(h, m, () => m.importText(text).then(() => void 0));
+            const { calls } = await changeEvents(
+              h,
+              m,
+              () => m.importText(text).then(() => void 0)
+            );
             if (calls > 0) fail(`importText fired onContentChanged ${calls}x`);
           }
         } finally {
@@ -299,8 +319,13 @@ ${last}`
           await m.importText(h.canonicalTexts[0] ?? "");
           await h.mutate(m);
           await (h.settle ?? defaultSettle)();
-          const { calls } = await changeEvents(h, m, () => m.importText(secondText(h)).then(() => void 0));
-          if (calls > 0) fail(`importText over a non-empty undo history fired onContentChanged ${calls}x`);
+          const { calls } = await changeEvents(
+            h,
+            m,
+            () => m.importText(secondText(h)).then(() => void 0)
+          );
+          if (calls > 0)
+            fail(`importText over a non-empty undo history fired onContentChanged ${calls}x`);
         } finally {
           m.destroy();
         }
@@ -339,9 +364,15 @@ ${last}`
             await (h.settle ?? defaultSettle)();
             const opened = h.interactionState?.(m);
             if (h.interactionState && opened === void 0) {
-              fail("interactionState reports no interaction after openInteraction \u2014 the case proves nothing");
+              fail(
+                "interactionState reports no interaction after openInteraction \u2014 the case proves nothing"
+              );
             }
-            const { calls } = await changeEvents(h, m, () => m.importText(leg.text).then(() => void 0));
+            const { calls } = await changeEvents(
+              h,
+              m,
+              () => m.importText(leg.text).then(() => void 0)
+            );
             if (calls > 0) {
               fail(
                 `importing ${leg.what} over an open interaction fired onContentChanged ${calls}x \u2014 the interaction committed during or because of the import (if every import emits, see the L1 cases first)`
@@ -397,11 +428,13 @@ ${last}`
             await m.importText(text);
             const out = m.exportText();
             if (out !== text)
-              fail(`export after import differs from the canonical input:
+              fail(
+                `export after import differs from the canonical input:
 --- in
 ${text}
 --- out
-${out}`);
+${out}`
+              );
             if (m.exportText() !== out)
               fail("exportText is not deterministic \u2014 two exports of one document differ");
           }
@@ -469,7 +502,9 @@ ${out}`);
             if (calls === 0) fail(`config mutation "${mutation.name}" fired no onContentChanged`);
             const after = m.exportText();
             if (after === before) {
-              fail(`config mutation "${mutation.name}" did not change the export \u2014 the case proves nothing`);
+              fail(
+                `config mutation "${mutation.name}" did not change the export \u2014 the case proves nothing`
+              );
             }
             if (exportAtEmit !== after) {
               fail(
@@ -542,7 +577,9 @@ ${out}`);
         const first = h.canonicalTexts[0];
         const second = h.canonicalTexts[1];
         if (first === void 0 || second === void 0 || first === second) {
-          fail("the L4 case needs TWO DISTINCT canonicalTexts \u2014 with one, stale undo is undetectable");
+          fail(
+            "the L4 case needs TWO DISTINCT canonicalTexts \u2014 with one, stale undo is undetectable"
+          );
         }
         const m = await h.create();
         try {
@@ -569,7 +606,9 @@ ${out}`);
           await h.undo(m);
           await h.undo(m);
           if (m.exportText() !== baseline) {
-            fail("undo after importText mutated the freshly imported document (stale history applied)");
+            fail(
+              "undo after importText mutated the freshly imported document (stale history applied)"
+            );
           }
         } finally {
           m.destroy();
@@ -612,7 +651,9 @@ ${out}`);
           const applied = m.getViewState();
           assertFinite(applied, "after setViewState");
           if (same(applied, fitted)) {
-            fail("setViewState(viewState) had no effect \u2014 supply a state that differs from the fitted view");
+            fail(
+              "setViewState(viewState) had no effect \u2014 supply a state that differs from the fitted view"
+            );
           }
           await m.importText(text);
           if (!same(m.getViewState(), fitted)) {
@@ -621,7 +662,8 @@ ${out}`);
             );
           }
           const { calls } = await changeEvents(h, m, () => m.setViewState(applied));
-          if (calls > 0) fail("setViewState fired onContentChanged \u2014 view state is not document content");
+          if (calls > 0)
+            fail("setViewState fired onContentChanged \u2014 view state is not document content");
           if (m.exportText() !== doc)
             fail("setViewState changed the export \u2014 view state leaked into the document");
           if (!same(m.getViewState(), applied)) {
@@ -661,7 +703,9 @@ ${out}`);
             await settle();
             const opened2 = h.interactionState?.(m);
             if (h.interactionState && opened2 === void 0) {
-              fail("interactionState reports no interaction after openInteraction \u2014 the case proves nothing");
+              fail(
+                "interactionState reports no interaction after openInteraction \u2014 the case proves nothing"
+              );
             }
             return opened2;
           };
@@ -676,7 +720,11 @@ ${out}`);
                 "committing the interaction openInteraction opened did not write its typed input into the export \u2014 the case proves nothing (commitInteraction must commit the way a user does, openInteraction type input the serializer writes verbatim)"
               );
             }
-            await importOrFail(m, first, "re-importing canonicalTexts[0] after the commit rejected");
+            await importOrFail(
+              m,
+              first,
+              "re-importing canonicalTexts[0] after the commit rejected"
+            );
           }
           const opened = await open();
           const view = m.getViewState();
@@ -750,7 +798,8 @@ ${out}`;
             const { calls } = await changeEvents(h, m, () => {
               if (elements.reveal(firstId) !== true) fail("reveal(known id) must return true");
             });
-            if (calls > 0) fail("reveal fired onContentChanged \u2014 revealing is view behavior, not an edit");
+            if (calls > 0)
+              fail("reveal fired onContentChanged \u2014 revealing is view behavior, not an edit");
             if (!deliveries.some((d) => d.includes(firstId))) {
               fail(
                 `reveal('${firstId}') delivered no selection containing the id \u2014 is it a selectable element (not a root or a label)?`
@@ -765,7 +814,8 @@ ${out}`;
                 }
               }
             }
-            if (!elements.selection().includes(firstId)) fail("selection() does not contain the revealed id");
+            if (!elements.selection().includes(firstId))
+              fail("selection() does not contain the revealed id");
             const seen = deliveries.length;
             off();
             const otherId = ids[1];
@@ -939,7 +989,9 @@ ${out}`;
             await settle();
             const was = before.get(movedId);
             if (was === void 0)
-              fail(`moveElement returned '${movedId}', an id elements.list() did not report before the move`);
+              fail(
+                `moveElement returned '${movedId}', an id elements.list() did not report before the move`
+              );
             const box = boxesOf(elements, "after a move").get(movedId);
             if (box === void 0)
               fail(`'${movedId}' is gone from elements.list() after moveElement moved it`);
@@ -949,7 +1001,9 @@ ${out}`;
               );
             }
           } else {
-            unverified.push("moveElement is undefined \u2014 that a box follows a move was not verified");
+            unverified.push(
+              "moveElement is undefined \u2014 that a box follows a move was not verified"
+            );
           }
           if (h.viewState !== void 0) {
             const atRest = boxesOf(elements, "before a view change");
@@ -996,7 +1050,11 @@ ${out}`;
             await importOrFail(m, text, `importText(canonicalTexts[${index}]) rejected`);
             expectContentAroundElements(m, `after importing canonicalTexts[${index}]`);
           }
-          await importOrFail(m, h.canonicalTexts[0] ?? "", "importText(canonicalTexts[0]) rejected");
+          await importOrFail(
+            m,
+            h.canonicalTexts[0] ?? "",
+            "importText(canonicalTexts[0]) rejected"
+          );
           await h.mutate(m);
           await settle();
           const atRest = expectContentAroundElements(m, "after a user mutation added an element");
@@ -1023,7 +1081,11 @@ ${out}`;
             viewer = await h.createReadonly();
             if (hasContentBounds(viewer)) {
               contentBoxOf(viewer, "on the viewer before the first import");
-              await importOrFail(viewer, h.canonicalTexts[0] ?? "", "the viewer rejected canonicalTexts[0]");
+              await importOrFail(
+                viewer,
+                h.canonicalTexts[0] ?? "",
+                "the viewer rejected canonicalTexts[0]"
+              );
               expectContentAroundElements(viewer, "on the viewer after an import");
             }
           }
@@ -1072,7 +1134,9 @@ ${out}`;
       name: "L7: a rejected import leaves no trace",
       async run(h) {
         if (h.invalidTexts === void 0) {
-          return skip("invalidTexts is undefined \u2014 pass [] if the notation has no non-importable text");
+          return skip(
+            "invalidTexts is undefined \u2014 pass [] if the notation has no non-importable text"
+          );
         }
         if (h.invalidTexts.length === 0) return;
         const m = await h.create();
@@ -1125,7 +1189,9 @@ ${out}`;
       name: "L7: the modeler stays usable after a rejected import",
       async run(h) {
         if (h.invalidTexts === void 0) {
-          return skip("invalidTexts is undefined \u2014 pass [] if the notation has no non-importable text");
+          return skip(
+            "invalidTexts is undefined \u2014 pass [] if the notation has no non-importable text"
+          );
         }
         const bad = h.invalidTexts[0];
         if (bad === void 0) return;
@@ -1137,12 +1203,15 @@ ${out}`;
             () => void 0
           );
           const next = secondText(h);
-          await m.importText(next).catch((e) => fail(`the next VALID import after a rejection did not render: ${String(e)}`));
+          await m.importText(next).catch(
+            (e) => fail(`the next VALID import after a rejection did not render: ${String(e)}`)
+          );
           if (m.exportText() !== next)
             fail("the next valid import after a rejection did not replace the document");
           const before = m.exportText();
           const { calls } = await changeEvents(h, m, () => h.mutate(m));
-          if (calls === 0) fail("a user mutation after a rejected import fired no onContentChanged (wedged)");
+          if (calls === 0)
+            fail("a user mutation after a rejected import fired no onContentChanged (wedged)");
           if (exportOrFail(m, "after a mutation that followed a rejected import") === before) {
             fail("a user mutation after a rejected import did not apply (wedged)");
           }
@@ -1204,7 +1273,9 @@ ${out}`;
             if (rejected) {
               if (calls > 0) fail(`a rejected ${what} fired onContentChanged ${calls}x (L7)`);
               if (exportOrFail(m, `after a rejected ${what}`) !== doc) {
-                fail(`a rejected ${what} changed the document \u2014 the previous state must stay intact (L7)`);
+                fail(
+                  `a rejected ${what} changed the document \u2014 the previous state must stay intact (L7)`
+                );
               }
               if (ids && !same(ids, sortedIds(m))) {
                 fail(
@@ -1221,7 +1292,9 @@ ${out}`;
               }
             } else {
               if (calls > 0)
-                fail(`${what} resolved and fired onContentChanged ${calls}x \u2014 an import is silent (L1)`);
+                fail(
+                  `${what} resolved and fired onContentChanged ${calls}x \u2014 an import is silent (L1)`
+                );
               exportOrFail(m, `after ${what} resolved (L6)`);
             }
             previous = probe;
@@ -1236,7 +1309,8 @@ ${out}`;
     {
       name: "viewer (when shipped): read-only, silent, canonical, fits, reveals, keeps foreign content, unshaken by a rejected import",
       async run(h) {
-        if (!h.createReadonly) return skip("createReadonly is undefined \u2014 the package ships no viewer mount");
+        if (!h.createReadonly)
+          return skip("createReadonly is undefined \u2014 the package ships no viewer mount");
         const v = await h.createReadonly();
         try {
           if (v.meta.editable !== false)
@@ -1312,6 +1386,10 @@ ${out}`;
         }
       }
     },
+    {
+      name: "keys (recommended): a key aimed at the host's controls and editors or at <body> is left alone, a keydown or keyup without a key throws nothing, a key on the focused canvas acts",
+      run: keysStayOnTheCanvas
+    },
     {
       name: "destroy is safe to call twice",
       async run(h) {
@@ -1324,7 +1402,8 @@ ${out}`;
 }
 async function foreignRoundTrips(h, m, who) {
   for (const { text, mustSurvive } of h.foreignTexts ?? []) {
-    if (mustSurvive.length === 0) fail("a foreignTexts entry must name at least one fragment in mustSurvive");
+    if (mustSurvive.length === 0)
+      fail("a foreignTexts entry must name at least one fragment in mustSurvive");
     await m.importText(text);
     const first = exportOrFail(m, `${who}after importing a document with foreign content`);
     for (const fragment of mustSurvive) {
@@ -1333,8 +1412,397 @@ async function foreignRoundTrips(h, m, who) {
     }
     await m.importText(first);
     const second = exportOrFail(m, `${who}after re-importing its own export of foreign content`);
-    if (second !== first) fail(`${who}foreign content did not survive a second import \u2192 export round-trip`);
+    if (second !== first)
+      fail(`${who}foreign content did not survive a second import \u2192 export round-trip`);
+  }
+}
+var CANVAS_SELECTOR = "svg[tabindex]";
+var NAMED_CODES = {
+  " ": "Space",
+  "+": "Equal",
+  "=": "Equal",
+  "-": "Minus",
+  "!": "Digit1"
+};
+var codeOf = (key) => {
+  if (/^[a-z]$/i.test(key)) return `Key${key.toUpperCase()}`;
+  if (/^\d$/.test(key)) return `Digit${key}`;
+  return NAMED_CODES[key] ?? key;
+};
+var ARROWS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+var KEY_STROKES = [
+  ...[
+    "Backspace",
+    "Delete",
+    ...ARROWS,
+    "Enter",
+    "Escape",
+    " ",
+    "Tab",
+    "a",
+    "c",
+    "e",
+    "h",
+    "l",
+    "n",
+    "p",
+    "s",
+    "u"
+  ].map((key) => ({ key, code: codeOf(key) })),
+  ...ARROWS.map((key) => ({ key, code: key, shiftKey: true })),
+  { key: "!", code: codeOf("!"), shiftKey: true },
+  ...[
+    { key: "a" },
+    { key: "c" },
+    { key: "v" },
+    { key: "x" },
+    { key: "d" },
+    { key: "z" },
+    { key: "Z", shiftKey: true },
+    { key: "y" },
+    { key: "+" },
+    { key: "=" },
+    { key: "-" },
+    { key: "0" },
+    ...ARROWS.flatMap((key) => [{ key }, { key, shiftKey: true }])
+  ].flatMap((stroke) => [
+    { ...stroke, code: codeOf(stroke.key), ctrlKey: true },
+    { ...stroke, code: codeOf(stroke.key), metaKey: true }
+  ])
+];
+var describeStroke = (stroke) => [
+  stroke.ctrlKey ? "Ctrl" : "",
+  stroke.metaKey ? "Meta" : "",
+  stroke.shiftKey ? "Shift" : "",
+  stroke.key === " " ? "Space" : stroke.key === "!" ? "1" : stroke.key
+].filter((part) => part !== "").join("+");
+var focusOn = (element) => {
+  element.focus({ preventScroll: true });
+};
+var blurActive = (doc) => {
+  const active = doc.activeElement;
+  if (active !== null && active !== doc.body) active.blur();
+};
+var stayPut = () => void 0;
+function hostControls(parent, where) {
+  const doc = parent.ownerDocument;
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.textContent = "Host button";
+  const input = doc.createElement("input");
+  input.value = "host text";
+  const textarea = doc.createElement("textarea");
+  textarea.value = "host text";
+  const select = doc.createElement("select");
+  for (const label of ["one", "two"]) {
+    const option = doc.createElement("option");
+    option.textContent = label;
+    select.append(option);
+  }
+  const editable = doc.createElement("div");
+  editable.setAttribute("contenteditable", "true");
+  editable.textContent = "host text";
+  const monaco = doc.createElement("div");
+  monaco.className = "monaco-editor";
+  const monacoInput = doc.createElement("div");
+  monacoInput.className = "native-edit-context";
+  monacoInput.setAttribute("role", "textbox");
+  monacoInput.tabIndex = 0;
+  monaco.append(monacoInput);
+  const box = doc.createElement("div");
+  box.append(button, input, textarea, select, editable, monaco);
+  const controls = [
+    ["a host <button>", button],
+    ["a host text <input>", input],
+    ["a host <textarea>", textarea],
+    ["a host <select>", select],
+    ["a host contenteditable", editable],
+    ["a focusable element in a host .monaco-editor", monacoInput]
+  ];
+  const EditContextClass = globalThis.EditContext;
+  if (typeof EditContextClass === "function") {
+    const editor = doc.createElement("div");
+    editor.tabIndex = 0;
+    Object.assign(editor, { editContext: new EditContextClass() });
+    box.append(editor);
+    controls.push(["a host EditContext editor", editor]);
+  }
+  parent.append(box);
+  const targets = controls.map(([what, element]) => ({
+    what: `${what} ${where}`,
+    element,
+    enter: () => {
+      focusOn(element);
+      return stayPut;
+    }
+  }));
+  return { targets, box };
+}
+function bodyTargets(doc, canvas, wrapper) {
+  const body = doc.body;
+  const hideWith = (hide) => () => {
+    focusOn(canvas);
+    const show = hide();
+    blurActive(doc);
+    return show;
+  };
+  return [
+    {
+      what: "<body> with nothing focused",
+      element: body,
+      enter: () => {
+        blurActive(doc);
+        return stayPut;
+      }
+    },
+    {
+      what: "<body> right after the canvas lost the focus",
+      element: body,
+      enter: () => {
+        focusOn(canvas);
+        blurActive(doc);
+        return stayPut;
+      }
+    },
+    {
+      what: "<body> while the host hides the modeler (display: none)",
+      element: body,
+      enter: hideWith(() => {
+        const display = wrapper.style.display;
+        wrapper.style.display = "none";
+        return () => {
+          wrapper.style.display = display;
+        };
+      })
+    },
+    {
+      what: "<body> while the host makes the modeler inert",
+      element: body,
+      enter: hideWith(() => {
+        wrapper.setAttribute("inert", "");
+        return () => wrapper.removeAttribute("inert");
+      })
+    }
+  ];
+}
+var listed = (parts) => parts.length < 2 ? parts[0] ?? "" : `${parts.slice(0, -1).join(", ")} and ${parts.at(-1)}`;
+var SHOWN_KEY_FINDINGS = 12;
+var selectionOf = (m) => m.elements ? JSON.stringify([...m.elements.selection()].sort()) : "";
+function mountedCanvas(h, m, instance, firstSerial) {
+  const live = attachedHosts.filter((entry) => entry.wrapper.isConnected);
+  if (h.canvasElement) {
+    const named = h.canvasElement(m);
+    if (!named)
+      return `canvasElement() names no canvas for the ${instance}; keys were not verified`;
+    const mount2 = live.find((entry) => entry.host.contains(named));
+    return mount2 === void 0 ? `the canvas canvasElement() names for the ${instance} lies in no attachedHost() \u2014 the kit puts host controls into that host and hides it; keys were not verified` : { canvas: named, host: mount2.host, wrapper: mount2.wrapper };
+  }
+  const made = instance === "modeler" ? "create()" : "createReadonly()";
+  const mounts = live.filter(
+    (entry) => entry.serial >= firstSerial && entry.host.querySelector(CANVAS_SELECTOR) !== null
+  );
+  const [mount] = mounts;
+  const canvas = mount?.host.querySelector(CANVAS_SELECTOR);
+  if (mount && canvas && mounts.length === 1) {
+    return { canvas, host: mount.host, wrapper: mount.wrapper };
   }
+  return mount === void 0 ? `${made} mounted the ${instance} into no attachedHost() that holds a focusable <svg> (one with a tabindex, diagram-js's canvas) \u2014 mount into one, or name the canvas with canvasElement; keys were not verified` : `${made} made ${mounts.length} attachedHost() elements that hold a focusable <svg> \u2014 the kit cannot tell which one is the ${instance}'s canvas (run the cases one after another, or name the canvas with canvasElement); keys were not verified`;
+}
+async function aimKeysAt(h, instance, create, findings) {
+  const settle = h.settle ?? defaultSettle;
+  const text = h.canonicalTexts[0] ?? "";
+  const editable = instance === "modeler";
+  const found = (finding) => {
+    findings.push(editable ? finding : `the viewer: ${finding}`);
+  };
+  const firstSerial = nextHostSerial;
+  const m = await create();
+  const cleanups = [];
+  try {
+    await importOrFail(
+      m,
+      text,
+      editable ? "importText(canonicalTexts[0]) rejected" : "the viewer rejected canonicalTexts[0]"
+    );
+    const mount = mountedCanvas(h, m, instance, firstSerial);
+    if (typeof mount === "string") return mount;
+    const { canvas, host, wrapper } = mount;
+    const doc = host.ownerDocument;
+    const view = doc.defaultView ?? window;
+    const propagated = /* @__PURE__ */ new WeakSet();
+    const reachedWindow = (event) => {
+      propagated.add(event);
+    };
+    view.addEventListener("keydown", reachedWindow);
+    view.addEventListener("keyup", reachedWindow);
+    cleanups.push(() => {
+      view.removeEventListener("keydown", reachedWindow);
+      view.removeEventListener("keyup", reachedWindow);
+    });
+    let changes = 0;
+    cleanups.push(
+      m.onContentChanged(() => {
+        changes += 1;
+      })
+    );
+    const thrownBy = (dispatch) => {
+      const thrown = [];
+      const onError = (event) => {
+        thrown.push(String(event.error ?? event.message));
+        event.preventDefault();
+      };
+      view.addEventListener("error", onError);
+      try {
+        dispatch();
+      } finally {
+        view.removeEventListener("error", onError);
+      }
+      return thrown;
+    };
+    const press = (target, stroke) => {
+      const init = { ...stroke, bubbles: true, cancelable: true, composed: true };
+      const down = new view.KeyboardEvent("keydown", init);
+      const up = new view.KeyboardEvent("keyup", init);
+      const thrown = thrownBy(() => {
+        target.dispatchEvent(down);
+        target.dispatchEvent(up);
+      });
+      return {
+        prevented: down.defaultPrevented || up.defaultPrevented,
+        stopped: !propagated.has(down) || !propagated.has(up),
+        thrown
+      };
+    };
+    let revealed;
+    const setUp = async () => {
+      await importOrFail(m, text, "re-importing canonicalTexts[0] rejected");
+      if (editable) await h.mutate(m);
+      await settle();
+      revealed = m.elements?.list()[0]?.id;
+      if (revealed !== void 0) m.elements?.reveal(revealed);
+      await settle();
+    };
+    await setUp();
+    const placements = [
+      [doc.body, "beside the modeler"],
+      [host, "inside the modeler's container"]
+    ];
+    const canvasHolder = canvas.parentElement;
+    if (canvasHolder !== null && canvasHolder !== host) {
+      placements.push([canvasHolder, "next to the canvas"]);
+    }
+    const controls = placements.map(([parent, where]) => hostControls(parent, where));
+    for (const { box } of controls) cleanups.push(() => box.remove());
+    const outside = controls[0]?.targets ?? [];
+    const targets = [
+      ...controls.flatMap((placed) => placed.targets),
+      ...bodyTargets(doc, canvas, wrapper)
+    ];
+    for (const target of targets) {
+      const leave = target.enter();
+      let dirty = false;
+      try {
+        const last = { doc: exportOrFail(m, `with the focus on ${target.what}`), changes };
+        for (const stroke of KEY_STROKES) {
+          const key = `${describeStroke(stroke)} on ${target.what}`;
+          const selection = selectionOf(m);
+          const { prevented, stopped, thrown } = press(target.element, stroke);
+          const changed = [
+            ...changes !== last.changes ? ["fired onContentChanged"] : [],
+            ...exportOrFail(m, `after ${key}`) !== last.doc ? ["changed the document"] : [],
+            ...selectionOf(m) !== selection ? ["changed the selection"] : []
+          ];
+          const effects = [
+            ...changed,
+            ...prevented ? ["prevented it"] : [],
+            ...stopped ? ["stopped its propagation"] : [],
+            ...thrown.map((error) => `threw ${error}`)
+          ];
+          if (effects.length > 0) found(`${key} ${listed(effects)}`);
+          dirty = changed.length > 0;
+          if (dirty) break;
+        }
+        if (!dirty) {
+          await settle();
+          if (exportOrFail(m, `once the keys on ${target.what} settled`) !== last.doc) {
+            found(`a key on ${target.what} changed the document once it settled`);
+            dirty = true;
+          } else if (changes !== last.changes) {
+            found(`a key on ${target.what} fired onContentChanged once it settled`);
+            dirty = true;
+          }
+        }
+      } finally {
+        leave();
+      }
+      if (dirty) await setUp();
+    }
+    const keyless = [
+      ["the focused canvas", canvas, () => focusOn(canvas)],
+      ["<body> with nothing focused", doc.body, () => blurActive(doc)],
+      ...outside.slice(0, 2).map((target) => [
+        target.what,
+        target.element,
+        () => target.enter()
+      ])
+    ];
+    for (const [what, element, enter] of keyless) {
+      enter();
+      for (const type of ["keydown", "keyup"]) {
+        const thrown = thrownBy(
+          () => element.dispatchEvent(new view.Event(type, { bubbles: true, cancelable: true }))
+        );
+        for (const error of thrown) found(`a ${type} without a key on ${what} threw ${error}`);
+      }
+    }
+    if (!editable) return void 0;
+    if (!m.elements) {
+      return "the modeler exposes no elements surface (optional) \u2014 that Delete on the focused canvas removes a revealed element was not verified, so the case cannot tell a key the modeler leaves alone from one it never sees";
+    }
+    await setUp();
+    focusOn(canvas);
+    if (revealed === void 0) {
+      return "elements.list() reports no element after importing canonicalTexts[0] and one mutate \u2014 that Delete on the focused canvas removes a revealed element was not verified, so the case cannot tell a key the modeler leaves alone from one it never sees";
+    }
+    if (doc.activeElement !== canvas) {
+      return "the canvas did not take the focus \u2014 that a key on the focused canvas acts was not verified, so the case cannot tell a key the modeler leaves alone from one it never sees";
+    }
+    const before = exportOrFail(m, `with '${revealed}' revealed`);
+    for (const key of ["Delete", "Backspace"]) {
+      press(canvas, { key, code: key });
+      await settle();
+      if (exportOrFail(m, `after ${key} on the focused canvas`) !== before) return void 0;
+    }
+    return `Delete and Backspace on the focused canvas, with '${revealed}' revealed (selected), left the document as it was \u2014 the case cannot tell a key the modeler leaves alone from one it never sees`;
+  } finally {
+    for (const cleanup of cleanups) cleanup();
+    m.destroy();
+  }
+}
+async function keysStayOnTheCanvas(h) {
+  if (typeof document === "undefined") {
+    return skip(
+      "no DOM \u2014 keys need a document to be aimed at (run the kit in a browser, the modeler mounted into attachedHost())"
+    );
+  }
+  const findings = [];
+  const unverified = [];
+  const modelerGap = await aimKeysAt(h, "modeler", () => h.create(), findings);
+  if (modelerGap !== void 0) unverified.push(modelerGap);
+  if (h.createReadonly) {
+    const createViewer = () => h.createReadonly?.() ?? fail("createReadonly went away during the keys case");
+    const viewerGap = await aimKeysAt(h, "viewer", createViewer, findings);
+    if (viewerGap !== void 0) unverified.push(viewerGap);
+  }
+  const more = findings.length > SHOWN_KEY_FINDINGS ? `; and ${findings.length - SHOWN_KEY_FINDINGS} more` : "";
+  return {
+    ...unverified.length === 0 ? {} : { skipped: unverified.join("; ") },
+    ...findings.length === 0 ? {} : {
+      advisories: [
+        `keys left the canvas: ${findings.slice(0, SHOWN_KEY_FINDINGS).join("; ")}${more} \u2014 RECOMMENDED: act on a key only while the canvas holds the focus (its target is the canvas or lies inside it), leave every other key alone (no command, no change of the document or the selection, no preventDefault, no stopPropagation) and ignore a keydown or keyup without a key`
+      ]
+    }
+  };
 }
 function registerConformance(harness, test, options = {}) {
   const onSkip = options.onSkip ?? ((name, reason) => {
@@ -1346,8 +1814,8 @@ function registerConformance(harness, test, options = {}) {
   for (const conformanceCase of conformanceCases()) {
     test(`conformance: ${conformanceCase.name}`, async () => {
       const outcome = await conformanceCase.run(harness);
-      if (outcome?.skipped) onSkip(conformanceCase.name, outcome.skipped);
       for (const advice of outcome?.advisories ?? []) onAdvisory(conformanceCase.name, advice);
+      if (outcome?.skipped) onSkip(conformanceCase.name, outcome.skipped);
     });
   }
 }