@comty.io/core 0.1.5 → 0.1.7

package/src/dev.mjs

@@ -0,0 +1,172 @@
+#!/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';
+
+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 (!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));
+  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;
+    }
+    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/')) {
+      if (request.headers.origin && request.headers.origin !== origin) {
+        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);`);
+        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;
+        }
+        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.`);
+    });
+    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();
+    let url;
+    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`);
+      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());
+    });
+    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); });
+  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; }
+  async function close() {
+    if (closing) return closing;
+    closing = (async () => {
+      const kill = signal => {
+        if (!child?.pid) return;
+        try {
+          if (process.platform === 'win32') child.kill(signal);
+          else process.kill(-child.pid, signal);
+        } catch (error) { if (error.code !== 'ESRCH') throw error; }
+      };
+      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()]);
+      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 || ''}` },
+    });
+    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}`));
+  }
+  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.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; });
+}

package/src/gemini.mjs

@@ -0,0 +1,3 @@
+import { runAcp } from './acp.mjs';
+
+export const runGemini = options => runAcp({ ...options, provider: 'gemini' });

package/src/grok.mjs

@@ -0,0 +1,3 @@
+import { runAcp } from './acp.mjs';
+
+export const runGrok = options => runAcp({ ...options, provider: 'grok' });

package/src/inspect-markup.js

@@ -0,0 +1,283 @@
+// Page-coordinate drawings stay attached to the document when the viewport scrolls.
+export function createInspectMarkup({ root, icon, onChange, capture, onError }) {
+  const ns = 'http://www.w3.org/2000/svg';
+  const layer = document.createElementNS(ns, 'svg');
+  layer.classList.add('comty-markup-layer');
+  layer.setAttribute('aria-hidden', 'true');
+  const drawings = document.createElementNS(ns, 'g');
+  layer.append(drawings);
+  root.append(layer);
+  const surface = document.createElement('div');
+  surface.className = 'comty-markup-surface';
+  surface.hidden = true;
+  const selection = document.createElement('div');
+  selection.className = 'comty-capture-selection';
+  selection.hidden = true;
+  surface.append(selection);
+  root.append(surface);
+  const panel = document.createElement('section');
+  panel.className = 'comty-tool-panel comty-markup-panel';
+  panel.id = 'comty-markup-panel';
+  panel.setAttribute('aria-label', 'Annotations and screenshot');
+  panel.hidden = true;
+  root.append(panel);
+  const shapes = {
+    pencil: ['Pencil', '<path d="m16 3 5 5L8 21H3v-5ZM14 5l5 5"/>'],
+    rectangle: ['Rectangle', '<rect x="4" y="5" width="16" height="14" rx="1"/>'],
+    ellipse: ['Ellipse', '<ellipse cx="12" cy="12" rx="9" ry="7"/>'],
+    arrow: ['Arrow', '<path d="M4 20 20 4M8 4h12v12"/>'],
+  };
+  const palette = [
+    ['Red', '--comty-measure'], ['Yellow', '--comty-markup-yellow'],
+    ['Green', '--comty-markup-green'], ['Blue', '--comty-accent'],
+    ['Black', '--comty-ink'], ['White', '--comty-paper'],
+  ];
+  const tokenColor = token => {
+    const value = getComputedStyle(root).getPropertyValue(token).trim();
+    return /^#[\da-f]{3}$/i.test(value) ? '#' + [...value.slice(1)].map(char => char + char).join('') : value;
+  };
+  panel.setAttribute('aria-label', 'Annotation tools');
+  panel.innerHTML = [
+    '<div class="comty-markup-controls" role="group" aria-label="Drawing tools">',
+    ...Object.entries(shapes).map(([key, [label, paths]]) => `<button type="button" data-shape="${key}" aria-label="${label}" title="${label}" aria-pressed="false">${icon(paths)}</button>`),
+    '<span class="comty-markup-divider" aria-hidden="true"></span>',
+    `<button type="button" data-undo aria-label="Undo annotation" title="Undo · ⌘/Ctrl Z">${icon('<path d="m9 4-5 5 5 5M4 9h10a6 6 0 0 1 0 12"/>')}</button>`,
+    `<button type="button" data-clear aria-label="Clear annotations" title="Clear annotations">${icon('<path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"/>')}</button></div>`,
+    '<div class="comty-markup-options"><div class="comty-markup-strokes" role="group" aria-label="Stroke width">',
+    ...[[2, 'Thin'], [3, 'Medium'], [5, 'Thick']].map(([width, label]) => `<button type="button" data-stroke="${width}" aria-label="${label} stroke" title="${label}" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m7 7 10 10" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg></button>`),
+    '</div><span class="comty-markup-divider" aria-hidden="true"></span><div class="comty-markup-colors" role="group" aria-label="Annotation colors">',
+    ...palette.map(([name, token]) => `<button type="button" data-color="${token}" aria-label="${name} ink" title="${name}" aria-pressed="false"><span class="comty-markup-swatch" aria-hidden="true"></span></button>`),
+    '<button type="button" class="comty-markup-picker" title="Custom color" aria-label="Custom annotation color" aria-expanded="false" aria-controls="comty-markup-color"></button>',
+    '</div></div>',
+    '<div class="comty-markup-color" id="comty-markup-color" role="group" aria-label="Custom color picker" hidden>',
+    '<div class="comty-markup-color-field" tabindex="0" role="group" aria-label="Saturation and brightness" aria-description="Left and right arrows adjust saturation. Up and down arrows adjust brightness."><span aria-hidden="true"></span></div>',
+    '<input class="comty-markup-hue" type="range" min="0" max="360" step="1" aria-label="Hue">',
+    '<label class="comty-markup-hex"><span class="comty-markup-color-preview" aria-hidden="true"></span><span>HEX</span><input type="text" aria-label="Hex color" maxlength="7" spellcheck="false" autocomplete="off" autocapitalize="off"></label>',
+    '</div>',
+  ].join('');
+  const picker = panel.querySelector('.comty-markup-picker');
+  const colorPanel = panel.querySelector('.comty-markup-color');
+  const colorField = panel.querySelector('.comty-markup-color-field');
+  const hueInput = panel.querySelector('.comty-markup-hue');
+  const hexInput = panel.querySelector('[aria-label="Hex color"]');
+  let pickerOpen = false, colorPointer = null;
+  let hue = 0, saturation = 1, brightness = 1;
+  let mode = null, shape = 'pencil', drag = null, visible = false, busy = false;
+  let stroke = 3, color = tokenColor('--comty-measure');
+  readColor(color);
+  for (const button of panel.querySelectorAll('[data-color]')) button.style.setProperty('--markup-swatch', tokenColor(button.dataset.color));
+  let revision = 0;
+  const history = [];
+  const clamp = (v, max) => Math.max(0, Math.min(max, v));
+  function point(event) { return { x: clamp(event.clientX, innerWidth), y: clamp(event.clientY, innerHeight) }; }
+  function sync() {
+    layer.style.display = visible ? '' : 'none';
+    surface.hidden = !visible || !mode;
+    panel.hidden = !visible || mode !== 'annotate';
+    for (const button of panel.querySelectorAll('[data-stroke]')) button.setAttribute('aria-pressed', String(Number(button.dataset.stroke) === stroke));
+    for (const button of panel.querySelectorAll('[data-color]')) button.setAttribute('aria-pressed', String(tokenColor(button.dataset.color) === color));
+    picker.toggleAttribute('data-selected', !palette.some(([, token]) => tokenColor(token) === color));
+    syncPicker();
+    for (const button of panel.querySelectorAll('[data-shape]')) button.setAttribute('aria-pressed', String(button.dataset.shape === shape));
+    panel.querySelector('[data-undo]').disabled = !history.length;
+    panel.querySelector('[data-clear]').disabled = !history.length;
+    render();
+    onChange();
+  }
+  function cancelDrag() {
+    if (!drag) return;
+    drag.node?.remove();
+    const id = drag.id;
+    drag = null;
+    if (surface.hasPointerCapture(id)) surface.releasePointerCapture(id);
+    selection.hidden = true;
+  }
+  function setMode(next) {
+    if (busy && next) return;
+    cancelDrag();
+    if (!next) revision++;
+    mode = next;
+    if (next !== 'annotate') { pickerOpen = false; finishColorDrag(); }
+    sync();
+  }
+  function undo() { history.pop()?.remove(); sync(); }
+  function clear() { cancelDrag(); history.length = 0; drawings.replaceChildren(); sync(); }
+  panel.querySelector('[data-undo]').onclick = undo;
+  panel.querySelector('[data-clear]').onclick = clear;
+  for (const button of panel.querySelectorAll('[data-shape]')) button.onclick = () => { shape = button.dataset.shape; sync(); };
+  for (const button of panel.querySelectorAll('[data-stroke]')) button.onclick = () => { stroke = Number(button.dataset.stroke); sync(); };
+  for (const button of panel.querySelectorAll('[data-color]')) button.onclick = () => {
+    color = tokenColor(button.dataset.color); readColor(color); sync();
+  };
+  function readColor(value) {
+    const [r, g, b] = value.slice(1).match(/../g).map(part => parseInt(part, 16) / 255);
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
+    if (delta) hue = ((max === r ? (g - b) / delta : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4) * 60 + 360) % 360;
+    saturation = max ? delta / max : 0;
+    brightness = max;
+  }
+  function writeColor() {
+    const channel = offset => {
+      const k = (offset + hue / 60) % 6;
+      return Math.round(255 * brightness * (1 - saturation * Math.max(0, Math.min(k, 4 - k, 1)))).toString(16).padStart(2, '0');
+    };
+    color = '#' + [5, 3, 1].map(channel).join('');
+    sync();
+  }
+  function syncPicker() {
+    colorPanel.hidden = !pickerOpen;
+    picker.setAttribute('aria-expanded', String(pickerOpen));
+    colorPanel.style.setProperty('--markup-hue', `hsl(${hue} 100% 50%)`);
+    colorPanel.style.setProperty('--markup-color', color);
+    const marker = colorField.firstElementChild;
+    marker.style.left = `${saturation * 100}%`;
+    marker.style.top = `${(1 - brightness) * 100}%`;
+    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'); }
+  }
+  picker.onclick = () => { pickerOpen = !pickerOpen; sync(); };
+  function moveColor(event) {
+    const rect = colorField.getBoundingClientRect();
+    saturation = clamp((event.clientX - rect.left) / rect.width, 1);
+    brightness = 1 - clamp((event.clientY - rect.top) / rect.height, 1);
+    writeColor();
+  }
+  function finishColorDrag() {
+    const id = colorPointer;
+    colorPointer = null;
+    if (id !== null && colorField.hasPointerCapture(id)) colorField.releasePointerCapture(id);
+  }
+  colorField.onpointerdown = event => {
+    if (event.button !== 0 || colorPointer !== null) return;
+    event.preventDefault(); event.stopPropagation();
+    colorField.focus({ preventScroll: true });
+    colorPointer = event.pointerId;
+    colorField.setPointerCapture(event.pointerId);
+    moveColor(event);
+  };
+  colorField.onpointermove = event => { if (colorPointer === event.pointerId) moveColor(event); };
+  colorField.onpointerup = event => { if (colorPointer === event.pointerId) { moveColor(event); finishColorDrag(); } };
+  colorField.onpointercancel = finishColorDrag;
+  colorField.onlostpointercapture = finishColorDrag;
+  window.addEventListener('blur', finishColorDrag);
+  colorField.onkeydown = event => {
+    if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+    event.preventDefault(); event.stopPropagation();
+    const step = event.shiftKey ? .1 : .01;
+    if (event.key === 'ArrowLeft') saturation = clamp(saturation - step, 1);
+    if (event.key === 'ArrowRight') saturation = clamp(saturation + step, 1);
+    if (event.key === 'ArrowUp') brightness = clamp(brightness + step, 1);
+    if (event.key === 'ArrowDown') brightness = clamp(brightness - step, 1);
+    writeColor();
+  };
+  hueInput.oninput = () => { hue = Number(hueInput.value); writeColor(); };
+  function applyHex(commit = false) {
+    const value = hexInput.value.trim().replace(/^#/, '');
+    const valid = /^[\da-f]{6}$/i.test(value) || (commit && /^[\da-f]{3}$/i.test(value));
+    if (valid) {
+      color = '#' + (value.length === 3 ? [...value].map(char => char + char).join('') : value).toLowerCase();
+      readColor(color); hexInput.removeAttribute('aria-invalid'); sync();
+    } else hexInput.setAttribute('aria-invalid', 'true');
+    if (commit) { hexInput.value = color.toUpperCase(); hexInput.removeAttribute('aria-invalid'); }
+  }
+  hexInput.oninput = () => applyHex();
+  hexInput.onblur = () => applyHex(true);
+  hexInput.onkeydown = event => { if (event.key === 'Enter') { event.preventDefault(); applyHex(true); } };
+  function render() { drawings.setAttribute('transform', `translate(${-scrollX} ${-scrollY})`); }
+  function update(event) {
+    const p = point(event), start = drag.start;
+    drag.end = p;
+    if (mode === 'capture') {
+      Object.assign(selection.style, { left: `${Math.min(start.x, p.x)}px`, top: `${Math.min(start.y, p.y)}px`, width: `${Math.abs(p.x - start.x)}px`, height: `${Math.abs(p.y - start.y)}px` });
+      selection.textContent = `${Math.round(Math.abs(p.x - start.x))} × ${Math.round(Math.abs(p.y - start.y))}`;
+      selection.hidden = false;
+      return;
+    }
+    const a = drag.origin, b = { x: p.x + scrollX, y: p.y + scrollY };
+    const left = Math.min(a.x, b.x), top = Math.min(a.y, b.y), w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y);
+    let d;
+    if (shape === 'pencil') {
+      drag.points.push(b);
+      d = drag.points.map((p, i) => `${i ? 'L' : 'M'}${p.x} ${p.y}`).join(' ');
+    } else if (shape === 'rectangle') d = `M${left} ${top}h${w}v${h}h${-w}Z`;
+    else if (shape === 'ellipse') d = `M${left} ${top + h/2}a${w/2} ${h/2} 0 1 0 ${w} 0a${w/2} ${h/2} 0 1 0 ${-w} 0`;
+    else {
+      const angle = Math.atan2(b.y-a.y, b.x-a.x), size = Math.min(16, Math.hypot(b.x-a.x,b.y-a.y)/3);
+      d = `M${a.x} ${a.y}L${b.x} ${b.y}M${b.x-size*Math.cos(angle-.5)} ${b.y-size*Math.sin(angle-.5)}L${b.x} ${b.y}L${b.x-size*Math.cos(angle+.5)} ${b.y-size*Math.sin(angle+.5)}`;
+    }
+    drag.node.setAttribute('d', d);
+  }
+  surface.addEventListener('pointerdown', event => {
+    if (event.button !== 0 || drag || busy) return;
+    event.preventDefault(); event.stopPropagation();
+    const start = point(event), origin = { x: start.x + scrollX, y: start.y + scrollY };
+    drag = { id: event.pointerId, start, end: start, origin, points: [origin] };
+    if (mode === 'annotate') {
+      drag.node = document.createElementNS(ns, 'path');
+      drag.node.setAttribute('fill', 'none');
+      drag.node.setAttribute('stroke', color);
+      drag.node.setAttribute('stroke-width', String(stroke));
+      drag.node.setAttribute('stroke-linecap', 'round');
+      drag.node.setAttribute('stroke-linejoin', 'round');
+      drawings.append(drag.node);
+    }
+    surface.setPointerCapture(event.pointerId);
+    update(event);
+  });
+  surface.addEventListener('pointermove', event => { if (drag?.id === event.pointerId) { event.preventDefault(); update(event); } });
+  surface.addEventListener('pointerup', async event => {
+    if (drag?.id !== event.pointerId) return;
+    event.preventDefault(); event.stopPropagation();
+    update(event);
+    const finished = drag;
+    drag = null;
+    surface.releasePointerCapture(event.pointerId);
+    selection.hidden = true;
+    if (mode === 'annotate') { history.push(finished.node); sync(); return; }
+    const region = { left: Math.floor(Math.min(finished.start.x, finished.end.x)), top: Math.floor(Math.min(finished.start.y, finished.end.y)), width: Math.round(Math.abs(finished.end.x-finished.start.x)), height: Math.round(Math.abs(finished.end.y-finished.start.y)) };
+    if (region.width < 4 || region.height < 4) return;
+    busy = true;
+    const current = ++revision;
+    surface.setAttribute('aria-busy', 'true');
+    sync();
+    try {
+      const result = await capture(region, layer);
+      if (current !== revision) return;
+      if (!result) throw new Error('Page is not visible');
+      const url = URL.createObjectURL(result.blob);
+      const link = document.createElement('a');
+      link.href = url; link.download = `comty-${new Date().toISOString().replace(/[:.]/g, '-')}.png`;
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(url), 60000);
+    } catch (error) {
+      if (current === revision) onError(`Capture failed. ${error.message}. Try again.`);
+    } finally {
+      busy = false; surface.removeAttribute('aria-busy'); sync();
+    }
+  });
+  surface.addEventListener('pointercancel', cancelDrag);
+  surface.addEventListener('lostpointercapture', cancelDrag);
+  surface.addEventListener('click', event => { event.preventDefault(); event.stopPropagation(); });
+  surface.addEventListener('wheel', event => { if (drag || busy) event.preventDefault(); }, { passive: false });
+  document.addEventListener('scroll', () => { cancelDrag(); render(); }, { passive: true, capture: true });
+  window.addEventListener('resize', cancelDrag);
+  window.addEventListener('blur', cancelDrag);
+  return {
+    panel, setMode, render, clear,
+    get mode() { return mode; },
+    get busy() { return busy; },
+    setVisible(value) { visible = value; if (!value) { revision++; mode = null; pickerOpen = false; finishColorDrag(); cancelDrag(); } sync(); },
+    keydown(event) {
+      if (!mode) return false;
+      if (event.key === 'Escape') {
+        if (pickerOpen) { pickerOpen = false; finishColorDrag(); picker.focus({ preventScroll: true }); sync(); return true; }
+        if (drag) cancelDrag(); else setMode(null);
+        return true;
+      }
+      if (mode === 'annotate' && (event.metaKey || event.ctrlKey) && !event.shiftKey && event.key.toLowerCase() === 'z') { cancelDrag(); undo(); return true; }
+      return false;
+    },
+  };
+}

package/src/measurements.js

@@ -30,7 +30,7 @@ export function measurementPoint(anchor, rect, scroll = { x: 0, y: 0 }) {
 }
 
 /** Border measurements live for one activation of the existing ruler tool. */
-export function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit }) {
+export function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit, isInteractionBlocked = () => false }) {
   let enabled = false;
   let hover = null;
   let drag = null;
@@ -154,7 +154,7 @@ export function createMeasurements({ root, isComtyElement, isElementTreeHidden,
     }
   }
   function isHostEvent(event) {
-    if (!enabled || !(event.target instanceof Element)) return false;
+    if (!enabled || isInteractionBlocked() || !(event.target instanceof Element)) return false;
     if (!isComtyElement(event.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);
@@ -192,7 +192,7 @@ export function createMeasurements({ root, isComtyElement, isElementTreeHidden,
     if (isHostEvent(event)) { event.preventDefault(); event.stopImmediatePropagation(); }
   }, true);
   document.addEventListener("keydown", event => {
-    if (!enabled || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
+    if (!enabled || isInteractionBlocked() || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
     event.preventDefault(); event.stopImmediatePropagation();
     if (drag) cancel(); else onExit();
   }, true);