@comty.io/core 0.1.8 → 0.1.10

package/src/comments.js

@@ -97,10 +97,10 @@ export function createCommentThread(context) {
       statusMenuButton.disabled = comment.local_agent || !context.canManage;
       statusMenuButton.onclick = (event) => {
         event.stopPropagation();
-        const existingPopover = document.querySelector(
+        const existingPopover = root.querySelector(
           ".comty-status-popover",
         );
-        document
+        root
           .querySelectorAll(".comty-popover")
           .forEach((popover) => popover.remove());
         if (existingPopover) return;
@@ -158,8 +158,8 @@ export function createCommentThread(context) {
 
         const closeStatusPopover = (closeEvent) => {
           if (
-            !popover.contains(closeEvent.target) &&
-            closeEvent.target !== statusMenuButton
+            !closeEvent.composedPath().includes(popover) &&
+            !closeEvent.composedPath().includes(statusMenuButton)
           ) {
             popover.remove();
             document.removeEventListener("click", closeStatusPopover);
@@ -184,7 +184,7 @@ export function createCommentThread(context) {
         trigger,
         { onEdit, onDelete },
       ) => {
-        document
+        root
           .querySelectorAll(".comty-entry-actions-popover")
           .forEach((popover) => popover.remove());
 
@@ -232,7 +232,7 @@ export function createCommentThread(context) {
         });
 
         const closeEntryActions = (event) => {
-          if (!popover.contains(event.target) && event.target !== trigger) {
+          if (!event.composedPath().includes(popover) && !event.composedPath().includes(trigger)) {
             popover.remove();
             document.removeEventListener("click", closeEntryActions);
           }

package/src/dev.mjs

@@ -1,172 +1,377 @@
 #!/usr/bin/env node
-import { createServer, request as httpRequest } from 'node:http';
-import { spawn } from 'node:child_process';
-import { readFile } from 'node:fs/promises';
-import { realpathSync } from 'node:fs';
-import { resolve, delimiter } from 'node:path';
-import { parseArgs } from 'node:util';
-import { pathToFileURL } from 'node:url';
-import { createCompanion, isLoopback } from './companion.mjs';
+import { createServer, request as httpRequest } from "node:http";
+import { spawn } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { realpathSync } from "node:fs";
+import { resolve, delimiter } from "node:path";
+import { parseArgs } from "node:util";
+import { pathToFileURL } from "node:url";
+import { createCompanion, isLoopback } from "./companion.mjs";
 
-export async function startDev({ cwd = process.cwd(), target = 'http://127.0.0.1:5173', port = 4387, provider = 'codex', model, projectKey, apiUrl, command = [] } = {}) {
+export async function startDev({
+  cwd = process.cwd(),
+  target = "http://127.0.0.1:5173",
+  port = 4387,
+  provider = "codex",
+  model,
+  projectKey,
+  apiUrl,
+  command = [],
+} = {}) {
   const upstream = new URL(target);
-  if (upstream.protocol !== 'http:' || !isLoopback(upstream.hostname) || upstream.username || upstream.password || upstream.pathname !== '/' || upstream.search || upstream.hash) {
-    throw new Error('--target must be a loopback HTTP origin, e.g. http://127.0.0.1:5173');
+  if (
+    upstream.protocol !== "http:" ||
+    !isLoopback(upstream.hostname) ||
+    upstream.username ||
+    upstream.password ||
+    upstream.pathname !== "/" ||
+    upstream.search ||
+    upstream.hash
+  ) {
+    throw new Error(
+      "--target must be a loopback HTTP origin, e.g. http://127.0.0.1:5173",
+    );
   }
-  if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error('Invalid --port');
-  const runtime = await readFile(new URL('./browser.js', import.meta.url));
-  const style = await readFile(new URL('./style.js', import.meta.url));
-  const anchors = await readFile(new URL('./anchors.js', import.meta.url));
-  const capture = await readFile(new URL('./capture.js', import.meta.url));
-  const captureEngine = await readFile(new URL('./capture-engine.js', import.meta.url));
-  const captureResources = await readFile(new URL('./capture-resources.js', import.meta.url));
-  const comments = await readFile(new URL('./comments.js', import.meta.url));
-  const measurements = await readFile(new URL('./measurements.js', import.meta.url));
-  const markup = await readFile(new URL('./inspect-markup.js', import.meta.url));
+  if (!Number.isInteger(port) || port < 0 || port > 65535)
+    throw new Error("Invalid --port");
+  const runtime = await readFile(new URL("./browser.js", import.meta.url));
+  const style = await readFile(new URL("./style.js", import.meta.url));
+  const anchors = await readFile(new URL("./anchors.js", import.meta.url));
+  const resilientAnchors = await readFile(
+    new URL("./resilient-anchor.js", import.meta.url),
+  );
+  const capture = await readFile(new URL("./capture.js", import.meta.url));
+  const captureEngine = await readFile(
+    new URL("./capture-engine.js", import.meta.url),
+  );
+  const captureResources = await readFile(
+    new URL("./capture-resources.js", import.meta.url),
+  );
+  const comments = await readFile(new URL("./comments.js", import.meta.url));
+  const measurements = await readFile(
+    new URL("./measurements.js", import.meta.url),
+  );
+  const markup = await readFile(
+    new URL("./inspect-markup.js", import.meta.url),
+  );
   let companion, origin, child, closing, finished;
   const sockets = new Set();
   const proxies = new Set();
   const server = createServer((request, response) => {
     if (!origin || request.headers.host !== new URL(origin).host) {
-      response.writeHead(403); response.end('Comty is available on its loopback URL only'); return;
+      response.writeHead(403);
+      response.end("Comty is available on its loopback URL only");
+      return;
     }
     let url;
-    try { url = new URL(request.url, origin); }
-    catch { response.writeHead(400); response.end('Invalid request target'); return; }
-    if (url.origin !== origin) { response.writeHead(400); response.end('Invalid request target'); return; }
-    if (url.pathname.startsWith('/__comty/')) {
+    try {
+      url = new URL(request.url, origin);
+    } catch {
+      response.writeHead(400);
+      response.end("Invalid request target");
+      return;
+    }
+    if (url.origin !== origin) {
+      response.writeHead(400);
+      response.end("Invalid request target");
+      return;
+    }
+    if (url.pathname.startsWith("/__comty/")) {
       if (request.headers.origin && request.headers.origin !== origin) {
-        response.writeHead(403); response.end(); return;
+        response.writeHead(403);
+        response.end();
+        return;
       }
-      if (request.method === 'GET' && ['/__comty/browser.js', '/__comty/style.js', '/__comty/anchors.js', '/__comty/capture.js', '/__comty/capture-engine.js', '/__comty/capture-resources.js', '/__comty/comments.js', '/__comty/measurements.js', '/__comty/inspect-markup.js', '/__comty/start.js'].includes(url.pathname)) {
-        response.writeHead(200, { 'Content-Type': 'text/javascript', 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' });
-        response.end(url.pathname.endsWith('/browser.js') ? runtime : url.pathname.endsWith('/style.js') ? style : url.pathname.endsWith('/anchors.js') ? anchors : url.pathname.endsWith('/capture.js') ? capture : url.pathname.endsWith('/capture-engine.js') ? captureEngine : url.pathname.endsWith('/capture-resources.js') ? captureResources : url.pathname.endsWith('/comments.js') ? comments : url.pathname.endsWith('/measurements.js') ? measurements : url.pathname.endsWith('/inspect-markup.js') ? markup :
-          `import { initComty } from '/__comty/browser.js';\ninitComty(${JSON.stringify({ projectKey, apiUrl, agent: { url: `${origin}/__comty`, token: companion.token } })}).catch(console.error);`);
+      if (
+        request.method === "GET" &&
+        [
+          "/__comty/browser.js",
+          "/__comty/style.js",
+          "/__comty/anchors.js",
+          "/__comty/resilient-anchor.js",
+          "/__comty/capture.js",
+          "/__comty/capture-engine.js",
+          "/__comty/capture-resources.js",
+          "/__comty/comments.js",
+          "/__comty/measurements.js",
+          "/__comty/inspect-markup.js",
+          "/__comty/start.js",
+        ].includes(url.pathname)
+      ) {
+        response.writeHead(200, {
+          "Content-Type": "text/javascript",
+          "Cache-Control": "no-store",
+          "X-Content-Type-Options": "nosniff",
+        });
+        response.end(
+          url.pathname.endsWith("/browser.js")
+            ? runtime
+            : url.pathname.endsWith("/style.js")
+              ? style
+              : url.pathname.endsWith("/anchors.js")
+                ? anchors
+                : url.pathname.endsWith("/resilient-anchor.js")
+                  ? resilientAnchors
+                  : url.pathname.endsWith("/capture.js")
+                    ? capture
+                    : url.pathname.endsWith("/capture-engine.js")
+                      ? captureEngine
+                      : url.pathname.endsWith("/capture-resources.js")
+                        ? captureResources
+                        : url.pathname.endsWith("/comments.js")
+                          ? comments
+                          : url.pathname.endsWith("/measurements.js")
+                            ? measurements
+                            : url.pathname.endsWith("/inspect-markup.js")
+                              ? markup
+                              : `import { initComty } from '/__comty/browser.js';\ninitComty(${JSON.stringify({ projectKey, apiUrl, agent: { url: `${origin}/__comty`, token: companion.token } })}).catch(console.error);`,
+        );
         return;
       }
-      void companion.handle(request, response); return;
+      void companion.handle(request, response);
+      return;
     }
     const destination = new URL(upstream);
-    destination.pathname = url.pathname; destination.search = url.search;
-    const proxy = httpRequest(destination, {
-      method: request.method,
-      headers: { ...request.headers, host: upstream.host, 'accept-encoding': 'identity' },
-    }, incoming => {
-      const headers = { ...incoming.headers };
-      if (headers.location?.startsWith(upstream.origin)) headers.location = headers.location.replace(upstream.origin, origin);
-      if (!headers['content-type']?.includes('text/html') || request.method === 'HEAD') {
-        response.writeHead(incoming.statusCode, headers); incoming.pipe(response); return;
-      }
-      // ponytail: buffer development HTML for injection; use the Vite integration for streamed HTML.
-      const chunks = []; let length = 0;
-      incoming.on('data', chunk => {
-        length += chunk.length;
-        if (length > 8 * 1024 * 1024) incoming.destroy(new Error('HTML exceeds the 8 MiB development limit'));
-        else chunks.push(chunk);
-      });
-      incoming.on('error', error => { if (!response.headersSent) response.writeHead(502); response.end(error.message); });
-      incoming.on('end', () => {
-        if (incoming.headers['content-encoding'] && incoming.headers['content-encoding'] !== 'identity') {
-          response.writeHead(502); response.end('Comty requires uncompressed development HTML'); return;
+    destination.pathname = url.pathname;
+    destination.search = url.search;
+    const proxy = httpRequest(
+      destination,
+      {
+        method: request.method,
+        headers: {
+          ...request.headers,
+          host: upstream.host,
+          "accept-encoding": "identity",
+        },
+      },
+      (incoming) => {
+        const headers = { ...incoming.headers };
+        if (headers.location?.startsWith(upstream.origin))
+          headers.location = headers.location.replace(upstream.origin, origin);
+        if (
+          !headers["content-type"]?.includes("text/html") ||
+          request.method === "HEAD"
+        ) {
+          response.writeHead(incoming.statusCode, headers);
+          incoming.pipe(response);
+          return;
         }
-        const html = Buffer.concat(chunks).toString('utf8');
-        const script = '<script type="module" src="/__comty/start.js"></script>';
-        const injected = /<head(?:\s[^>]*)?>/i.test(html) ? html.replace(/<head(?:\s[^>]*)?>/i, match => match + script) : script + html;
-        delete headers['content-length']; delete headers.etag; delete headers['content-encoding'];
-        headers['cache-control'] = 'no-store';
-        response.writeHead(incoming.statusCode, headers); response.end(injected);
-      });
+        // ponytail: buffer development HTML for injection; use the Vite integration for streamed HTML.
+        const chunks = [];
+        let length = 0;
+        incoming.on("data", (chunk) => {
+          length += chunk.length;
+          if (length > 8 * 1024 * 1024)
+            incoming.destroy(
+              new Error("HTML exceeds the 8 MiB development limit"),
+            );
+          else chunks.push(chunk);
+        });
+        incoming.on("error", (error) => {
+          if (!response.headersSent) response.writeHead(502);
+          response.end(error.message);
+        });
+        incoming.on("end", () => {
+          if (
+            incoming.headers["content-encoding"] &&
+            incoming.headers["content-encoding"] !== "identity"
+          ) {
+            response.writeHead(502);
+            response.end("Comty requires uncompressed development HTML");
+            return;
+          }
+          const html = Buffer.concat(chunks).toString("utf8");
+          const script =
+            '<script type="module" src="/__comty/start.js"></script>';
+          const injected = /<head(?:\s[^>]*)?>/i.test(html)
+            ? html.replace(/<head(?:\s[^>]*)?>/i, (match) => match + script)
+            : script + html;
+          delete headers["content-length"];
+          delete headers.etag;
+          delete headers["content-encoding"];
+          headers["cache-control"] = "no-store";
+          response.writeHead(incoming.statusCode, headers);
+          response.end(injected);
+        });
+      },
+    );
+    proxies.add(proxy);
+    proxy.on("close", () => proxies.delete(proxy));
+    proxy.on("error", () => {
+      if (!response.headersSent)
+        response.writeHead(502, { "Content-Type": "text/plain" });
+      response.end(
+        `Development server unavailable at ${upstream.origin}. Check its terminal output and reload.`,
+      );
     });
-    proxies.add(proxy); proxy.on('close', () => proxies.delete(proxy));
-    proxy.on('error', () => {
-      if (!response.headersSent) response.writeHead(502, { 'Content-Type': 'text/plain' });
-      response.end(`Development server unavailable at ${upstream.origin}. Check its terminal output and reload.`);
-    });
-    request.on('aborted', () => proxy.destroy());
-    response.on('close', () => proxy.destroy());
+    request.on("aborted", () => proxy.destroy());
+    response.on("close", () => proxy.destroy());
     request.pipe(proxy);
   });
-  server.on('connection', socket => { sockets.add(socket); socket.on('close', () => sockets.delete(socket)); });
-  server.on('upgrade', (request, socket, head) => {
-    if (request.headers.host !== new URL(origin).host || (request.headers.origin && request.headers.origin !== origin)) return socket.destroy();
+  server.on("connection", (socket) => {
+    sockets.add(socket);
+    socket.on("close", () => sockets.delete(socket));
+  });
+  server.on("upgrade", (request, socket, head) => {
+    if (
+      request.headers.host !== new URL(origin).host ||
+      (request.headers.origin && request.headers.origin !== origin)
+    )
+      return socket.destroy();
     let url;
-    try { url = new URL(request.url, origin); } catch { return socket.destroy(); }
-    if (url.origin !== origin || url.pathname.startsWith('/__comty/')) return socket.destroy();
+    try {
+      url = new URL(request.url, origin);
+    } catch {
+      return socket.destroy();
+    }
+    if (url.origin !== origin || url.pathname.startsWith("/__comty/"))
+      return socket.destroy();
     const destination = new URL(upstream);
-    destination.pathname = url.pathname; destination.search = url.search;
-    const proxy = httpRequest(destination, { headers: { ...request.headers, host: upstream.host } });
-    proxies.add(proxy); proxy.on('close', () => proxies.delete(proxy));
-    proxy.on('upgrade', (response, upstreamSocket, upstreamHead) => {
-      sockets.add(upstreamSocket); upstreamSocket.on('close', () => sockets.delete(upstreamSocket));
-      socket.write(`HTTP/1.1 ${response.statusCode} ${response.statusMessage}\r\n${response.rawHeaders.reduce((text, value, index, all) => index % 2 ? text : text + value + ': ' + all[index + 1] + '\r\n', '')}\r\n`);
+    destination.pathname = url.pathname;
+    destination.search = url.search;
+    const proxy = httpRequest(destination, {
+      headers: { ...request.headers, host: upstream.host },
+    });
+    proxies.add(proxy);
+    proxy.on("close", () => proxies.delete(proxy));
+    proxy.on("upgrade", (response, upstreamSocket, upstreamHead) => {
+      sockets.add(upstreamSocket);
+      upstreamSocket.on("close", () => sockets.delete(upstreamSocket));
+      socket.write(
+        `HTTP/1.1 ${response.statusCode} ${response.statusMessage}\r\n${response.rawHeaders.reduce((text, value, index, all) => (index % 2 ? text : text + value + ": " + all[index + 1] + "\r\n"), "")}\r\n`,
+      );
       if (upstreamHead.length) socket.write(upstreamHead);
       if (head.length) upstreamSocket.write(head);
       socket.pipe(upstreamSocket).pipe(socket);
-      socket.on('error', () => upstreamSocket.destroy());
-      upstreamSocket.on('error', () => socket.destroy());
-      socket.on('close', () => upstreamSocket.destroy());
-      upstreamSocket.on('close', () => socket.destroy());
+      socket.on("error", () => upstreamSocket.destroy());
+      upstreamSocket.on("error", () => socket.destroy());
+      socket.on("close", () => upstreamSocket.destroy());
+      upstreamSocket.on("close", () => socket.destroy());
     });
-    proxy.on('response', response => { response.resume(); socket.destroy(); });
-    proxy.on('error', () => socket.destroy());
+    proxy.on("response", (response) => {
+      response.resume();
+      socket.destroy();
+    });
+    proxy.on("error", () => socket.destroy());
     proxy.end();
   });
-  await new Promise((resolve, reject) => { server.once('error', reject); server.listen(port, '127.0.0.1', resolve); });
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(port, "127.0.0.1", resolve);
+  });
   origin = `http://127.0.0.1:${server.address().port}`;
-  if (new URL(origin).port === upstream.port) { server.close(); throw new Error('Comty and the application must use different ports'); }
-  try { companion = createCompanion({ cwd, origin, provider, model }); }
-  catch (error) { server.close(); throw error; }
+  if (new URL(origin).port === upstream.port) {
+    server.close();
+    throw new Error("Comty and the application must use different ports");
+  }
+  try {
+    companion = createCompanion({ cwd, origin, provider, model });
+  } catch (error) {
+    server.close();
+    throw error;
+  }
   async function close() {
     if (closing) return closing;
     closing = (async () => {
-      const kill = signal => {
+      const kill = (signal) => {
         if (!child?.pid) return;
         try {
-          if (process.platform === 'win32') child.kill(signal);
+          if (process.platform === "win32") child.kill(signal);
           else process.kill(-child.pid, signal);
-        } catch (error) { if (error.code !== 'ESRCH') throw error; }
+        } catch (error) {
+          if (error.code !== "ESRCH") throw error;
+        }
       };
-      kill('SIGTERM');
-      const force = setTimeout(() => kill('SIGKILL'), 2000);
+      kill("SIGTERM");
+      const force = setTimeout(() => kill("SIGKILL"), 2000);
       for (const proxy of proxies) proxy.destroy();
       for (const socket of sockets) socket.destroy();
-      await Promise.all([companion.close(), new Promise(resolve => server.close(resolve)),
-        child && child.exitCode === null && child.signalCode === null ? new Promise(resolve => child.once('close', resolve)) : Promise.resolve()]);
+      await Promise.all([
+        companion.close(),
+        new Promise((resolve) => server.close(resolve)),
+        child && child.exitCode === null && child.signalCode === null
+          ? new Promise((resolve) => child.once("close", resolve))
+          : Promise.resolve(),
+      ]);
       clearTimeout(force);
     })();
     return closing;
   }
   if (command.length) {
     child = spawn(command[0], command.slice(1), {
-      cwd, stdio: 'inherit', detached: process.platform !== 'win32', env: { ...process.env, PATH: `${resolve(cwd, 'node_modules/.bin')}${delimiter}${process.env.PATH || ''}` },
+      cwd,
+      stdio: "inherit",
+      detached: process.platform !== "win32",
+      env: {
+        ...process.env,
+        PATH: `${resolve(cwd, "node_modules/.bin")}${delimiter}${process.env.PATH || ""}`,
+      },
     });
-    child.on('error', error => { console.error(`Comty could not start ${command[0]}: ${error.message}`); });
-    finished = new Promise(resolve => child.once('close', code => resolve(Number.isInteger(code) && code >= 0 ? code : 1))).then(async code => {
+    child.on("error", (error) => {
+      console.error(`Comty could not start ${command[0]}: ${error.message}`);
+    });
+    finished = new Promise((resolve) =>
+      child.once("close", (code) =>
+        resolve(Number.isInteger(code) && code >= 0 ? code : 1),
+      ),
+    ).then(async (code) => {
       await close();
       return code;
     });
-    finished.catch(error => console.error(`Comty shutdown failed: ${error.message}`));
+    finished.catch((error) =>
+      console.error(`Comty shutdown failed: ${error.message}`),
+    );
   }
   return { origin, close, finished };
 }
 
 async function main() {
   const args = process.argv.slice(2);
-  if (!args.length || args.includes('--help')) {
-    console.log('Usage: comty dev [--agent codex|claude|cursor|gemini|grok] [--model MODEL] [--target http://127.0.0.1:5173] [--port 4387] [--project-key KEY --api-url URL] -- vite --strictPort'); return;
+  if (!args.length || args.includes("--help")) {
+    console.log(
+      "Usage: comty dev [--agent codex|claude|cursor|gemini|grok] [--model MODEL] [--target http://127.0.0.1:5173] [--port 4387] [--project-key KEY --api-url URL] -- vite --strictPort",
+    );
+    return;
   }
-  if (args.shift() !== 'dev') throw new Error('Expected comty dev. Use --help for usage.');
-  const split = args.indexOf('--');
-  const { values } = parseArgs({ args: split < 0 ? args : args.slice(0, split), options: {
-    target: { type: 'string' }, port: { type: 'string' }, agent: { type: 'string' }, model: { type: 'string' }, 'project-key': { type: 'string' }, 'api-url': { type: 'string' },
-  } });
-  const session = await startDev({ target: values.target, port: values.port === undefined ? 4387 : Number(values.port), provider: values.agent, model: values.model,
-    projectKey: values['project-key'], apiUrl: values['api-url'], command: split < 0 ? [] : args.slice(split + 1) });
-  console.log(`Comty: ${session.origin} — open this URL to annotate with the local agent.`);
-  for (const signal of ['SIGINT', 'SIGTERM']) process.once(signal, () => { void session.close().catch(console.error); });
+  if (args.shift() !== "dev")
+    throw new Error("Expected comty dev. Use --help for usage.");
+  const split = args.indexOf("--");
+  const { values } = parseArgs({
+    args: split < 0 ? args : args.slice(0, split),
+    options: {
+      target: { type: "string" },
+      port: { type: "string" },
+      agent: { type: "string" },
+      model: { type: "string" },
+      "project-key": { type: "string" },
+      "api-url": { type: "string" },
+    },
+  });
+  const session = await startDev({
+    target: values.target,
+    port: values.port === undefined ? 4387 : Number(values.port),
+    provider: values.agent,
+    model: values.model,
+    projectKey: values["project-key"],
+    apiUrl: values["api-url"],
+    command: split < 0 ? [] : args.slice(split + 1),
+  });
+  console.log(
+    `Comty: ${session.origin} — open this URL to annotate with the local agent.`,
+  );
+  for (const signal of ["SIGINT", "SIGTERM"])
+    process.once(signal, () => {
+      void session.close().catch(console.error);
+    });
   if (session.finished) process.exitCode = await session.finished;
 }
 
-if (process.argv[1] && import.meta.url === pathToFileURL(realpathSync(process.argv[1])).href) {
-  main().catch(error => { console.error(`Comty: ${error.message}`); process.exitCode = 1; });
+if (
+  process.argv[1] &&
+  import.meta.url === pathToFileURL(realpathSync(process.argv[1])).href
+) {
+  main().catch((error) => {
+    console.error(`Comty: ${error.message}`);
+    process.exitCode = 1;
+  });
 }

package/src/inspect-markup.js

@@ -135,7 +135,7 @@ export function createInspectMarkup({ root, icon, onChange, capture, onError })
     colorField.setAttribute('aria-description', `Saturation ${Math.round(saturation * 100)}%, brightness ${Math.round(brightness * 100)}%. Left and right arrows adjust saturation. Up and down arrows adjust brightness.`);
     hueInput.value = String(Math.round(hue));
     hueInput.setAttribute('aria-valuetext', `${Math.round(hue)} degrees`);
-    if (document.activeElement !== hexInput) { hexInput.value = color.toUpperCase(); hexInput.removeAttribute('aria-invalid'); }
+    if (root.getRootNode().activeElement !== hexInput) { hexInput.value = color.toUpperCase(); hexInput.removeAttribute('aria-invalid'); }
   }
   picker.onclick = () => { pickerOpen = !pickerOpen; sync(); };
   function moveColor(event) {

package/src/measurements.js

@@ -154,10 +154,11 @@ export function createMeasurements({ root, isComtyElement, isElementTreeHidden,
     }
   }
   function isHostEvent(event) {
-    if (!enabled || isInteractionBlocked() || !(event.target instanceof Element)) return false;
-    if (!isComtyElement(event.target)) return true;
+    const target = event.composedPath()[0];
+    if (!enabled || isInteractionBlocked() || !(target instanceof Element)) return false;
+    if (!isComtyElement(target)) return true;
     // The outer ruler strip must still let us anchor to the page's top/left edge.
-    return event.target.matches(".comty-ruler") && (event.clientX + scrollX <= 10 || event.clientY + scrollY <= 10);
+    return target.matches(".comty-ruler") && (event.clientX + scrollX <= 10 || event.clientY + scrollY <= 10);
   }
   document.addEventListener("pointermove", event => {
     if (!enabled) return;
@@ -192,7 +193,7 @@ export function createMeasurements({ root, isComtyElement, isElementTreeHidden,
     if (isHostEvent(event)) { event.preventDefault(); event.stopImmediatePropagation(); }
   }, true);
   document.addEventListener("keydown", event => {
-    if (!enabled || isInteractionBlocked() || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
+    if (!enabled || isInteractionBlocked() || event.key !== "Escape" || event.composedPath()[0].closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
     event.preventDefault(); event.stopImmediatePropagation();
     if (drag) cancel(); else onExit();
   }, true);