@chalky/chalky 0.1.6 → 0.1.7

package/agent/extensions/board/browser.js

@@ -9,6 +9,8 @@
 // The shelf: a dot per board (yours is bigger). Hover it and the dots open into thumbnails, with + for a new board;
 // click one to go there. It stays clear of the chat panel: more thumbnails than fit scroll between ‹ and › (grey at
 // the ends; a new board scrolls to the end). Drag a card by its label onto a thumbnail to move it to that board, where it was ({type: "card_board"}).
+// Zoom: each board keeps its own (in this browser), as CSS zoom on #top, so places stay in main-space px; the control
+// at the bottom right (−, %, +, fit), or Ctrl/⌘ + wheel (a trackpad pinch). See setZoom below.
 //   page messages  board_view {board}: the board this page shows; board_add
 //   GET /board     {boards, current}        event "board" {boards, added?, by?}
 const CSS = `
@@ -61,7 +63,22 @@ const CSS = `
   .boards-shelf .slot.drop .mini { outline: 2px solid var(--accent); outline-offset: 1px; }
   .boards-shelf .add { display: none; width: 122px; height: 70px; border-radius: 6px;  /* a thumbnail's size, border included */ border: 1px dashed rgba(0, 0, 0, 0.25);
     color: var(--muted); font-size: 13px; align-self: flex-start; margin-top: 3px; }
-  .boards-shelf.open .add { display: block; }  /* only in the open shelf: at rest it's just the dots */`;
+  .boards-shelf.open .add { display: block; }  /* only in the open shelf: at rest it's just the dots */
+  /* zoom: CSS zoom on #top scales everything in the main space; its padding (room for the palette, rail, input) stays
+     the same on screen */
+  #top { padding: calc(var(--palette) / var(--zoom, 1)) calc((var(--rail) + 28px) / var(--zoom, 1))
+                  calc(var(--bar) / var(--zoom, 1)) calc((var(--rail) + 28px) / var(--zoom, 1)); }
+  .boards-zoom { position: fixed; right: 16px; bottom: 24px; z-index: 25; display: flex; align-items: center; gap: 2px; padding: 3px;
+    border-radius: 12px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
+    border: 1px solid var(--edge); box-shadow: var(--shadow); font-size: 12px; color: var(--soft); }
+  .boards-zoom button { height: 26px; min-width: 26px; padding: 0 6px; border-radius: 8px; font-variant-numeric: tabular-nums; }
+  .boards-zoom button:hover { background: var(--hover); color: var(--text); }
+  .boards-zoom .pct { min-width: 46px; }
+  .boards-zoom .fit { font-size: 15px; }
+  /* the hand: drag the board to move around it; what is on it doesn't react meanwhile (apps' frames included) */
+  #top.panning { cursor: grab; }
+  #top.panning.grabbing { cursor: grabbing; }
+  #top.panning * { pointer-events: none !important; }`;
 
 export default async function (page) {
   document.head.insertAdjacentHTML("beforeend", `<style>${CSS}</style>`);
@@ -136,6 +153,129 @@ export default async function (page) {
       view.scrollLeft = s.offsetLeft - (view.clientWidth - s.offsetWidth) / 2;
   }
 
+  // ---- zoom: each board's own, kept in this browser (localStorage) ----
+  // CSS zoom on #top: places stay in main-space px (what cards, frames and marks store), and #top's scrollLeft/Top and
+  // clientWidth are in them too. Window px -> main px is (x - left) / zoom + scroll: the other extensions divide by
+  // #top's style.zoom where they turn the pointer into main px. Ctrl/⌘ + wheel (a trackpad pinch) zooms at the
+  // pointer; the control at the bottom right: −, the percentage (click: back to 100%), +, and fit (the whole board).
+  const MIN = 0.25, MAX = 2, KEY = "chalky.board-zoom";
+  const shot = new URLSearchParams(location.search).has("shot");  // the versions' headless view: always 100%
+  let zooms = {};
+  try { zooms = JSON.parse(localStorage.getItem(KEY)) || {}; } catch {}
+  const zoomOf = () => parseFloat(top.style.zoom) || 1;
+  function setZoom(z, at, save = true) {  // at: the window point that stays put (else the middle of the view)
+    z = shot ? 1 : Math.min(MAX, Math.max(MIN, Math.round(z * 100) / 100));
+    const m = top.getBoundingClientRect(), z0 = zoomOf();
+    at ??= { x: m.left + m.width / 2, y: m.top + m.height / 2 };
+    const p = { x: (at.x - m.left) / z0 + top.scrollLeft, y: (at.y - m.top) / z0 + top.scrollTop };  // in main px
+    top.style.zoom = z === 1 ? "" : z;
+    top.style.setProperty("--zoom", z);
+    if (z !== z0) { top.scrollLeft = p.x - (at.x - m.left) / z; top.scrollTop = p.y - (at.y - m.top) / z; }
+    pct.textContent = `${Math.round(z * 100)}%`;
+    if (save) {
+      if (z === 1) delete zooms[current]; else zooms[current] = z;
+      try { localStorage.setItem(KEY, JSON.stringify(zooms)); } catch {}
+    }
+  }
+  function fitZoom() {  // everything on this board in view
+    const els = [...container(current).children], z0 = zoomOf(), m = top.getBoundingClientRect();
+    if (!els.length) return setZoom(1);
+    const rs = els.map((el) => el.getBoundingClientRect()).filter((r) => r.width || r.height);
+    const main = (x, y) => ({ x: (x - m.left) / z0 + top.scrollLeft, y: (y - m.top) / z0 + top.scrollTop });
+    const a = main(Math.min(...rs.map((r) => r.left)), Math.min(...rs.map((r) => r.top)));
+    const b = main(Math.max(...rs.map((r) => r.right)), Math.max(...rs.map((r) => r.bottom)));
+    const s = getComputedStyle(document.documentElement), px = (v) => parseFloat(s.getPropertyValue(v)) || 0;
+    const side = px("--rail") + 28, w = innerWidth - 2 * side, h = innerHeight - px("--palette") - px("--bar");  // inside the padding
+    const z = Math.min(MAX, Math.max(MIN, Math.min(w / (b.x - a.x + 24), h / (b.y - a.y + 24), 1)));
+    setZoom(z);
+    top.scrollLeft = (a.x + b.x) / 2 - (m.width / 2) / z;
+    top.scrollTop = a.y - 12 - px("--palette") / z;
+  }
+  const zoomBar = Object.assign(document.createElement("div"), { className: "boards-zoom" });
+  zoomBar.dataset.name = "zoom";
+  const pct = button("pct", "100%", "Back to 100%", () => setZoom(1));
+  zoomBar.append(button("", "−", "Zoom out", () => setZoom(zoomOf() / 1.25)), pct,
+                 button("", "+", "Zoom in", () => setZoom(zoomOf() * 1.25)), button("fit", "⤢", "Fit the whole board", fitZoom));
+  document.body.append(zoomBar);
+  const pinch = (e, at) => {  // ctrl + wheel (a pinch on a trackpad sends that): zoom at the pointer, not the browser's
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    setZoom(zoomOf() * Math.exp(-e.deltaY * (e.deltaMode ? 0.05 : 0.01)), at);
+  };
+  // anywhere on the page, not only over the main space: over the messages panel (which lies over the board) a pinch
+  // would otherwise scroll the messages; captured, so nothing under the pointer scrolls with it
+  addEventListener("wheel", (e) => pinch(e, { x: e.clientX, y: e.clientY }), { passive: false, capture: true });
+  top.addEventListener("load", (e) => {  // an app's frame (same site): its pinches too, its px turned into window px
+    const fr = e.target;
+    if (fr.localName !== "iframe") return;
+    try {
+      fr.contentWindow.addEventListener("wheel", (ev) => {
+        const r = fr.getBoundingClientRect(), k = zoomOf();
+        pinch(ev, { x: r.left + fr.clientLeft * k + ev.clientX * k, y: r.top + fr.clientTop * k + ev.clientY * k });
+      }, { passive: false });
+    } catch {}  // another site's frame
+  }, true);
+
+  // ---- the hand: drag to move around the board (scrolls #top). The palette's hand tool (one tool at a time, Esc
+  // stops it); or hold Space (when not typing and no other tool is on); or drag with the middle button, any time.
+  // Two-finger scrolling on a trackpad moves around too (the browser's own scrolling).
+  const HAND = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V12"/>` +
+    `<path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0V12"/><path d="M14 5.5a1.5 1.5 0 0 1 3 0V12"/>` +
+    `<path d="M17 7.5a1.5 1.5 0 0 1 3 0V16a6 6 0 0 1-6 6h-2 .2a6 6 0 0 1-5-2.7l-.2-.3c-.3-.5-1.4-2.4-3.3-5.7a1.5 1.5 0 0 1 .5-2 1.9 1.9 0 0 1 2.3.3L8 13"/></svg>`;
+  const handButton = Object.assign(document.createElement("button"), { innerHTML: HAND,
+    title: "Hand: drag to move around the board (or hold Space, or drag with the middle button; Esc to stop)" });
+  handButton.dataset.name = "hand";
+  handButton.style.order = 99;  // the palette's last tool, at the right end, whichever script adds its tools after this one
+  page.slot("status").append(handButton);
+  let hand = false, spaceHand = false, panning = null;  // panning: {x, y, left, top} at the press
+  const panMode = () => top.classList.toggle("panning", hand || spaceHand || !!panning);
+  function setHand(v) {
+    hand = v;
+    handButton.classList.toggle("on", v);
+    panMode();
+    if (v) document.dispatchEvent(new CustomEvent("tool-on", { detail: "hand" }));  // the other tools turn off
+  }
+  handButton.onclick = () => setHand(!hand);
+  document.addEventListener("tool-on", (e) => { if (hand && e.detail !== "hand") setHand(false); });
+  const typing = () => document.activeElement?.matches?.("input, textarea, select, [contenteditable=''], [contenteditable='true']") ||
+    document.activeElement?.localName === "iframe";  // an app has the keys
+  const otherTool = () => !!document.querySelector("#status button.on:not([data-name='show-marks']):not([data-name='hand'])");
+  addEventListener("keydown", (e) => {
+    if (e.key === "Escape") setHand(false);
+    if (e.code !== "Space") return;
+    if (spaceHand) return e.preventDefault();  // held: its repeats don't scroll the page either
+    if (typing() || otherTool() || e.ctrlKey || e.metaKey || e.altKey) return;
+    e.preventDefault();  // not a page scroll, nor a click on the focused button
+    spaceHand = true;
+    panMode();
+  }, true);
+  addEventListener("keyup", (e) => { if (e.code === "Space" && spaceHand) { spaceHand = false; panMode(); } }, true);
+  addEventListener("blur", () => { spaceHand = false; panMode(); });
+  top.addEventListener("pointerdown", (e) => {
+    if (!(e.button === 1 || (e.button === 0 && (hand || spaceHand)))) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();  // not a click, a line or a frame on what is under it
+    panning = { x: e.clientX, y: e.clientY, left: top.scrollLeft, top: top.scrollTop, id: e.pointerId };
+    top.setPointerCapture(e.pointerId);
+    top.classList.add("grabbing");
+    panMode();
+  }, true);
+  top.addEventListener("pointermove", (e) => {
+    if (!panning || e.pointerId !== panning.id) return;
+    const z = zoomOf();  // window px moved -> main px scrolled, so the board stays under the pointer
+    top.scrollLeft = panning.left - (e.clientX - panning.x) / z;
+    top.scrollTop = panning.top - (e.clientY - panning.y) / z;
+  });
+  const stopPan = (e) => {
+    if (!panning || e.pointerId !== panning.id) return;
+    panning = null;
+    top.classList.remove("grabbing");
+    panMode();
+  };
+  top.addEventListener("pointerup", stopPan);
+  top.addEventListener("pointercancel", stopPan);
+  top.addEventListener("auxclick", (e) => { if (e.button === 1) e.preventDefault(); });  // the middle button doesn't open links
+
   const others = document.createElement("style");  // hides what is on the body for other boards (a note's pin)
   document.head.append(others);
   function show(n, tell = true) {  // go to board n (tell: the server, which the first show got it from)
@@ -145,6 +285,7 @@ export default async function (page) {
     document.body.dataset.board = n;
     others.textContent = `body > [data-board]:not([data-board="${n}"]) { display: none !important; }`;
     for (const b of boards) container(b).classList.toggle("on", b === n);
+    setZoom(zooms[n] ?? 1, null, false);  // each board keeps its own zoom (in this browser)
     if (tell) page.send({ type: "board_view", board: n });
     render();
   }

package/agent/extensions/card/browser.js

@@ -3,6 +3,7 @@
 // A card is bare: only what the agent built, no frame (its label shows on hover: name, owner, ✕). It is
 // stacked in the main space, its content keeping its own size; or pinned at place {x, y, width?, height?}
 // (px from the main space's top-left, so it scrolls with the page), its root block then filling it.
+// (a new card with no place gets one near the middle of the view: autoPlace)
 // What the user can do with the label (the handle, so clicks inside still work):
 //   drag          move it; a drop sends {type: "card_move", card, place} (unless draggable: false)
 //   drag and hold still over another card (it lights up), release   combine: it slides back and the page
@@ -287,11 +288,11 @@ export default async function (page) {
 
   page.on("card", (ev) => {
     if (ev.op === "render") {
-      const old = cards[ev.card] || {};
+      const isNew = !cards[ev.card], old = cards[ev.card] || {};
       const { op, type, card, ...record } = ev;
       cards[ev.card] = { ...record, box: old.box, label: old.label, body: old.body, nodes: old.nodes, frame: old.frame,
                                flipped: old.flipped, option: record.options ? old.option : 0 };
-      draw(ev.card);
+      draw(ev.card).then(() => { if (isNew && !record.place) autoPlace(ev.card); });
     } else if (ev.op === "delete" && cards[ev.card]) {
       cards[ev.card].box?.remove();
       delete cards[ev.card];
@@ -306,6 +307,47 @@ export default async function (page) {
     }
   });
 
+  // A new card the agent gave no place: near the middle of what the user sees (between the panel, if open, and the
+  // right edge; below the palette, above the input bar), clear of everything else on the board. The nearest free
+  // spot to the middle, on a 40 px grid, keeping a 24 px gap. Only the tab in view, and only on the board shown
+  // (a card for another board stays stacked). Sent as card_place: saved, with no step of its own in the history.
+  const GAP = 24, STEP = 40, RINGS = 60;
+  async function autoPlace(id) {
+    const s = cards[id];
+    if (!s?.box || s.place || document.visibilityState !== "visible") return;
+    if ((Number(s.board) || 1) !== (Number(document.body.dataset.board) || 1)) return;
+    await new Promise(requestAnimationFrame);  // its blocks drawn
+    if (s.place) return;
+    const box = s.box;
+    box.toggleAttribute("data-placed", true);  // its size as a placed card, off the stack
+    Object.assign(box.style, { position: "absolute", margin: "0", left: "0px", top: "0px", visibility: "hidden" });
+    const z = parseFloat(area.style.zoom) || 1, w = box.offsetWidth, h = box.offsetHeight;
+    const m = area.getBoundingClientRect();
+    const main = (x, y) => ({ x: (x - m.left) / z + area.scrollLeft, y: (y - m.top) / z + area.scrollTop });
+    const css = getComputedStyle(document.documentElement), px = (v) => parseFloat(css.getPropertyValue(v)) || 0;
+    const panel = document.getElementById("panel"), open = ["messages", "versions"].includes(document.body.dataset.panel);
+    const side = px("--rail") + 28;
+    const a = main(Math.max(side, open && panel ? panel.getBoundingClientRect().right : 0), px("--palette"));
+    const b = main(innerWidth - side, innerHeight - px("--bar"));
+    const cx = (a.x + b.x) / 2 - w / 2, cy = (a.y + b.y) / 2 - h / 2;
+    const others = [...(box.parentElement?.children ?? [])].filter((el) => el !== box).map((el) => el.getBoundingClientRect())
+      .filter((r) => r.width && r.height).map((r) => ({ ...main(r.left, r.top), w: r.width / z, h: r.height / z }));
+    const free = (x, y) => others.every((o) => x + w + GAP <= o.x || o.x + o.w + GAP <= x || y + h + GAP <= o.y || o.y + o.h + GAP <= y);
+    const spots = [];
+    for (let i = -RINGS; i <= RINGS; i++) for (let j = -RINGS; j <= RINGS; j++) {
+      const x = Math.round(cx + i * STEP), y = Math.round(cy + j * STEP);
+      if (x >= 0 && y >= 0) spots.push({ x, y, d: (i * i + j * j) });
+    }
+    spots.sort((p, q) => p.d - q.d);
+    const spot = spots.find((p) => free(p.x, p.y)) ?? { x: Math.max(0, Math.round(cx)), y: Math.max(0, Math.round(cy)) };
+    // an app keeps its width: a placed box with none shrinks to the room left of the window's edge, and in a narrower
+    // window (the card_show check's browser) an app far right would be 0px wide
+    s.place = s.app ? { x: spot.x, y: spot.y, width: w } : { x: spot.x, y: spot.y };
+    Object.assign(box.style, { left: `${spot.x}px`, top: `${spot.y}px`, visibility: "" });
+    if (s.app) { box.style.width = `${w}px`; s.frame && (s.frame.style.width = "100%"); }
+    page.send({ type: "card_place", card: id, place: s.place });
+  }
+
   function pinStacked() {  // pin each stacked card where it is now, so taking one out of the stack moves none
     const stacked = Object.entries(cards).filter(([, s]) => !s.place && s.box);
     for (const [, s] of stacked) s.place = { x: s.box.offsetLeft, y: s.box.offsetTop };  // read all, then move
@@ -325,6 +367,7 @@ export default async function (page) {
     const handle = e.currentTarget, box = s.box;
     handle.setPointerCapture(e.pointerId);  // keep getting moves over iframes and other cards
     let place = null, held = false, x0 = 0, y0 = 0;
+    const z = parseFloat(area.style.zoom) || 1;  // the board's zoom (board/browser.js): window px moved -> main px
     let under = null, armed = null, wait = null, sx = 0, sy = 0;  // the card under the pointer; armed: lit, ready to combine
     const hold = setTimeout(() => { held = true; page.send({ type: "card_pin", card: id, pinned: !s.pinned }); }, HOLD_MS);
     handle.onpointermove = (ev) => {
@@ -332,7 +375,7 @@ export default async function (page) {
       clearTimeout(hold);
       if (s.pinned || s.draggable === false) return;
       if (!place) { pinStacked(); x0 = box.offsetLeft; y0 = box.offsetTop; box.style.zIndex = 4; }  // offsets in the main space; above the rest while dragged
-      place = { ...s.place, x: Math.round(x0 + ev.clientX - e.clientX), y: Math.round(y0 + ev.clientY - e.clientY) };
+      place = { ...s.place, x: Math.round(x0 + (ev.clientX - e.clientX) / z), y: Math.round(y0 + (ev.clientY - e.clientY) / z) };
       box.toggleAttribute("data-placed", true);
       Object.assign(box.style, { position: "absolute", margin: "0", left: `${place.x}px`, top: `${place.y}px` });
       const now = cardAt(ev.clientX, ev.clientY, box);
@@ -366,12 +409,12 @@ export default async function (page) {
     if (s.pinned) return;
     pinStacked();
     const handle = e.currentTarget, box = s.box;
-    const x = box.offsetLeft, y = box.offsetTop, w0 = box.offsetWidth, h0 = box.offsetHeight;
+    const x = box.offsetLeft, y = box.offsetTop, w0 = box.offsetWidth, h0 = box.offsetHeight, z = parseFloat(area.style.zoom) || 1;
     handle.setPointerCapture(e.pointerId);
     let place = null;
     handle.onpointermove = (ev) => {
-      place = { x, y, width: Math.min(area.clientWidth - x, Math.max(40, Math.round(w0 + ev.clientX - e.clientX))),
-                height: Math.max(30, Math.round(h0 + ev.clientY - e.clientY)) };
+      place = { x, y, width: Math.min(area.clientWidth - x, Math.max(40, Math.round(w0 + (ev.clientX - e.clientX) / z))),
+                height: Math.max(30, Math.round(h0 + (ev.clientY - e.clientY) / z)) };
       box.toggleAttribute("data-placed", true);
       Object.assign(box.style, { position: "absolute", margin: "0", left: `${x}px`, top: `${y}px`,
                                  width: `${place.width}px`, height: `${place.height}px` });

package/agent/extensions/card/index.ts

@@ -16,7 +16,7 @@
 //   GET /card/all           every card                   GET /card/about   block name -> its about block
 //   GET /card/blocks        block name -> mtime          GET /card/blocks/<Name>.js, /card/node_modules/{marked,dompurify}/...
 //   GET /card/lib/...       libraries the agents added for blocks (lib/ here: ES-module builds)
-//   page messages           card_set, card_prop, card_move, card_board, card_pin, card_keep, card_close, card_action
+//   page messages           card_set, card_prop, card_move, card_place, card_board, card_pin, card_keep, card_close, card_action
 //   page event "card"       {op: "render", card, ...record} | {op: "delete", card} | {op: "reset", cards}
 import fs from "node:fs";
 import path from "node:path";
@@ -344,6 +344,9 @@ export default function (pi: ExtensionAPI) {
     else if (type === "card_move") {
       if (r.pinned) return host.broadcast("card", { op: "render", card: id, ...r });
       r.place = msg.place; cards.change(id, r, "user", `moved ${id}`);
+    } else if (type === "card_place") {  // the page put a new card with no place near the middle of the view: not a move
+      if (r.place || r.pinned) return;   // the user saw it appear there, so no step of its own (it is part of the showing)
+      r.place = msg.place; cards.change(id, r);
     } else if (type === "card_board" && host.api.board?.has(msg.board)) {  // dropped on another board's thumbnail
       if (r.pinned) return host.broadcast("card", { op: "render", card: id, ...r });
       r.board = msg.board; r.place = msg.place ?? null; cards.change(id, r, "user", `moved ${id} to board ${msg.board}`);

package/agent/extensions/doodle/README.md

@@ -29,7 +29,7 @@ You name the thing; the page draws it by hand in your colour, and keeps it on th
   page (the mark goes on just those characters), element a CSS selector or an element's id or data-name (also inside
   an app's frame), mark one of the marks (theirs or yours: m7). Example: {"card": "shop", "text": "12.50"}.
 - The page's own controls can be marked too, by name: {element: "pen"} (the marker), "text", "eraser", "show-marks"
-  (the eye), "note" (the note pencil), "frames", "files", "dictate" (the mic), "tools" (the whole palette, top centre),
+  (the eye), "note" (the speech bubble), "frames", "files", "dictate" (the mic), "tools" (the whole palette, top centre),
   "rail" (left edge), "messages", "versions", "message-line" (bottom), "boards" (the shelf above it), "new-board". Such
   marks stay fixed to the window. Good for a tour: ring "pen" with "draw here".
 - at: {x, y, width, height} in window px, as screen_see's picture shows it: a last resort for something with no name

package/agent/extensions/doodle/browser.js

@@ -175,13 +175,14 @@ export default async function (page) {
   const picture = (full, box) => screen.picture(full, box);  // crop a frame to box (window px) and upload it: {path, url}
 
   // ---- where things are ----
+  const zoom = () => parseFloat(area.style.zoom) || 1;  // the board's zoom (board/browser.js): window px per main px (and per app-frame px)
   const inMain = (x, y) => {  // window px -> main-space px (as note/browser.js)
-    const m = area.getBoundingClientRect();
-    return { x: x - m.left + area.scrollLeft, y: y - m.top + area.scrollTop };
+    const m = area.getBoundingClientRect(), z = zoom();
+    return { x: (x - m.left) / z + area.scrollLeft, y: (y - m.top) / z + area.scrollTop };
   };
   const inWindow = (p) => {
-    const m = area.getBoundingClientRect();
-    return { x: p.x + m.left - area.scrollLeft, y: p.y + m.top - area.scrollTop };
+    const m = area.getBoundingClientRect(), z = zoom();
+    return { x: m.left + (p.x - area.scrollLeft) * z, y: m.top + (p.y - area.scrollTop) * z };
   };
   const short = (s, n = 40) => { s = (s || "").replace(/\s+/g, " ").trim(); return s.length > n ? s.slice(0, n - 1) + "…" : s; };
 
@@ -266,7 +267,7 @@ export default async function (page) {
     const at = inMain(box.x, box.y);  // the part of the main space the picture shows, so the agent can place things
     const step = { drawn: marks.length > 0, words: marks.filter((m) => m.text).map((m) => m.text), then: [], shot: null,
                    board: Number(document.body.dataset.board) || 1,  // the board shown (board/)
-                   area: { x: Math.round(at.x), y: Math.round(at.y), width: Math.round(box.w), height: Math.round(box.h) } };
+                   area: { x: Math.round(at.x), y: Math.round(at.y), width: Math.round(box.w / zoom()), height: Math.round(box.h / zoom()) } };
     step.ready = full ? picture(full, box).then((s) => { step.shot = s; }, () => {}) : Promise.resolve();
     steps.push(step);
     for (const m of marks) m.el.remove();
@@ -303,10 +304,10 @@ export default async function (page) {
       doc.head.append(s);
       classes(doc.documentElement);
     }
-    const offset = () => {
-      if (!frameEl) return { x: 0, y: 0 };
-      const r = frameEl.getBoundingClientRect();
-      return { x: r.left + frameEl.clientLeft, y: r.top + frameEl.clientTop };
+    const offset = () => {  // an app frame's (0, 0) in window px, and window px per frame px (k: zoomed with the main space)
+      if (!frameEl) return { x: 0, y: 0, k: 1 };
+      const r = frameEl.getBoundingClientRect(), k = zoom();
+      return { x: r.left + frameEl.clientLeft * k, y: r.top + frameEl.clientTop * k, k };
     };
     const root = frameEl ? doc : area;
     root.addEventListener("pointerdown", (e) => {
@@ -316,16 +317,16 @@ export default async function (page) {
       if (erasing) {  // the press is for the eraser, not for what's under it
         e.preventDefault();
         press = { erase: true, win };
-        eraseAt(inMain(e.clientX + o.x, e.clientY + o.y));
+        eraseAt(inMain(o.x + e.clientX * o.k, o.y + e.clientY * o.k));
         return;
       }
       grabbed = marks.length ? frame() : null;  // before the click acts
       if (e.target.closest?.(texting && !drawing ? ".doodle-note" : OWN_DRAG)) return;
       if (texting) e.preventDefault();  // the press is for the words (or a line), not for what's under it
-      press = { x: e.clientX + o.x, y: e.clientY + o.y, id: e.pointerId, target: e.target, win, o, text: texting };
+      press = { x: o.x + e.clientX * o.k, y: o.y + e.clientY * o.k, id: e.pointerId, target: e.target, win, o, text: texting };
     }, true);
     win.addEventListener("pointermove", (e) => {
-      const o = offset(), x = e.clientX + o.x, y = e.clientY + o.y;
+      const o = offset(), x = o.x + e.clientX * o.k, y = o.y + e.clientY * o.k;
       over = frameEl || e.target.closest?.("#top") ? { x, y } : null;
       if (press?.erase && press.win === win) { win.getSelection().removeAllRanges(); eraseAt(inMain(x, y)); return; }
       if (!press || press.win !== win || !drawing) return;
@@ -495,7 +496,7 @@ export default async function (page) {
     hideAsk();
     const last = marks.at(-1).points.at(-1), to = document.getElementById("to")?.value || "agent1";
     ask = Object.assign(document.createElement("form"), { className: "doodle-ask" });
-    const m = area.getBoundingClientRect(), room = inMain(m.left + area.clientWidth - 316, m.bottom - 140);  // inside the view (not under the scrollbar)
+    const m = area.getBoundingClientRect(), z = zoom(), room = inMain(m.left + (area.clientWidth - 316) * z, m.bottom - 140 * z);  // inside the view (not under the scrollbar)
     Object.assign(ask.style, { left: `${Math.min(last.x + 16, room.x)}px`, top: `${Math.min(last.y + 12, room.y)}px` });
     const field = Object.assign(document.createElement("input"), { placeholder: `Say something… (Enter sends to ${to})`, autocomplete: "off" });
     field.setAttribute("aria-label", "Words to send with your marks");
@@ -527,10 +528,11 @@ export default async function (page) {
   const distBox = (b, q) => Math.hypot(Math.max(b.x - q.x, 0, q.x - b.x - b.w), Math.max(b.y - q.y, 0, q.y - b.y - b.h));
   const inPoly = (pts, q) => { let c = false; for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) { const a = pts[i], b = pts[j];
                                if ((a.y > q.y) !== (b.y > q.y) && q.x < (b.x - a.x) * (q.y - a.y) / (b.y - a.y) + a.x) c = !c; } return c; };
-  const frameOffset = (fr) => { const r = fr.getBoundingClientRect(); return { x: r.left + fr.clientLeft, y: r.top + fr.clientTop }; };
-  function rectOf(el, fr) {  // an element (or a Range), in main px; fr: the app frame it is in
-    const r = el.getBoundingClientRect(), o = fr ? frameOffset(fr) : { x: 0, y: 0 }, p = inMain(r.left + o.x, r.top + o.y);
-    return { x: p.x, y: p.y, w: r.width, h: r.height };
+  const frameOffset = (fr) => { const r = fr.getBoundingClientRect(), k = zoom(); return { x: r.left + fr.clientLeft * k, y: r.top + fr.clientTop * k, k }; };
+  function rectOf(el, fr) {  // an element (or a Range), in main px; fr: the app frame it is in (its px: main px)
+    const r = el.getBoundingClientRect(), o = fr ? frameOffset(fr) : { x: 0, y: 0, k: 1 }, p = inMain(o.x + r.left * o.k, o.y + r.top * o.k);
+    const s = fr ? 1 : 1 / zoom();  // window px -> main px
+    return { x: p.x, y: p.y, w: r.width * s, h: r.height * s };
   }
   const scopes = (el) => [{ root: el, fr: null }, ...[...(el.localName === "iframe" ? [el] : el.querySelectorAll("iframe"))].flatMap((fr) => {
     try { return fr.contentDocument?.body ? [{ root: fr.contentDocument.body, fr }] : []; } catch { return []; }  // other origins: not ours
@@ -671,7 +673,7 @@ export default async function (page) {
     if (under && !area.contains(under) && under !== document.documentElement && under !== document.body)
       return { box: { x, y, w, h }, board: Number(board()), fixed: true };
     const p = inMain(x, y);
-    return { box: { x: p.x, y: p.y, w, h }, board: Number(board()) };
+    return { box: { x: p.x, y: p.y, w: w / zoom(), h: h / zoom() }, board: Number(board()) };
   }
   function findMain(t, every) {
     if (t.mark) {

package/agent/extensions/frame/browser.js

@@ -71,9 +71,10 @@ export default async function (page) {
   const board = () => Number(document.body.dataset.board) || 1;  // the board shown (board/): frames are drawn and sent there
   document.addEventListener("board", () => setTimeout(() => render(shown)));  // after the switch: count that board's
 
+  const zoom = () => parseFloat(area.style.zoom) || 1;  // the board's zoom (board/browser.js)
   const inMain = (x, y) => {  // window px -> main-space px (as note/browser.js)
-    const m = area.getBoundingClientRect();
-    return { x: Math.round(x - m.left + area.scrollLeft), y: Math.round(y - m.top + area.scrollTop) };
+    const m = area.getBoundingClientRect(), z = zoom();
+    return { x: Math.round((x - m.left) / z + area.scrollLeft), y: Math.round((y - m.top) / z + area.scrollTop) };
   };
   const put = (box, f) => Object.assign(box.style, { left: `${f.x}px`, top: `${f.y}px`, width: `${f.width}px`, height: `${f.height}px` });
 
@@ -154,8 +155,9 @@ export default async function (page) {
     const corner = e.currentTarget, x = box.offsetLeft, y = box.offsetTop, w0 = box.offsetWidth, h0 = box.offsetHeight;
     corner.setPointerCapture(e.pointerId);
     let place = null;
+    const z = zoom();  // window px moved -> main px
     corner.onpointermove = (ev) => {
-      place = { x, y, width: Math.max(40, Math.round(w0 + ev.clientX - e.clientX)), height: Math.max(30, Math.round(h0 + ev.clientY - e.clientY)) };
+      place = { x, y, width: Math.max(40, Math.round(w0 + (ev.clientX - e.clientX) / z)), height: Math.max(30, Math.round(h0 + (ev.clientY - e.clientY) / z)) };
       put(box, place);
     };
     corner.onpointerup = () => {

package/agent/extensions/note/browser.js

@@ -1,5 +1,5 @@
-// The page side of the note extension. A pencil button in the tool palette (top) turns on a clear
-// layer over the page; the cursor is a pen, blue over something a click would point at.
+// The page side of the note extension. A speech-bubble button in the tool palette (top) turns on a clear
+// layer over the page; the cursor is a speech bubble, blue over something a click would point at.
 //   Click: a note box opens there.  Hold the button and draw: on release the note box opens, and the note
 //   covers the drawn area (its bounding box, in main-space px: where card_show's place puts a card).
 // The user sees only the box; the target goes to the agent with the note: card and block (from
@@ -28,11 +28,11 @@ export default async function (page) {
 
   const layer = document.createElement("div");  // catches clicks, so the page underneath doesn't react
   layer.style.cssText = "position:fixed;inset:0;z-index:9998;display:none";
-  // The cursor: the button's pen (white edge, so it shows on dark too), its tip (4, 20) is the spot pointed at.
+  // The cursor: the button's speech bubble (white edge, so it shows on dark too); its tail's tip (2, 22) is the spot pointed at.
+  const BUBBLE = "M7.9 20A9 9 0 1 0 4 16.1L2 22z";
   const pen = (color) => `url("data:image/svg+xml,${encodeURIComponent(
     `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">` +
-    `<g stroke="#fff" stroke-width="4"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/></g>` +
-    `<g stroke="${color}" stroke-width="2"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/></g></svg>`)}") 4 20, crosshair`;
+    `<path d="${BUBBLE}" stroke="#fff" stroke-width="4"/><path d="${BUBBLE}" stroke="${color}" stroke-width="2"/></svg>`)}") 2 22, crosshair`;
   const PEN = pen("#6e6e73"), PEN_ON = pen("#0071e3");  // grey: empty space; blue: over a thing
   layer.style.cursor = PEN;
   const input = document.createElement("input");  // the note box, opened where the user clicked
@@ -60,7 +60,7 @@ export default async function (page) {
   document.body.append(layer, ink, input);
 
   const button = document.createElement("button");
-  button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/></svg>`;
+  button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${BUBBLE}"/></svg>`;  // a speech bubble
   button.title = "Point: click anything, or hold and draw around an area, then write a note (Esc to stop)";
   button.dataset.name = "note";  // names an agent's pen can point at
   page.slot("status").prepend(button);  // the first tool in the palette, whichever script loads first
@@ -79,8 +79,13 @@ export default async function (page) {
     [...e.classList].slice(0, 2).map((c) => `.${c}`).join("");
 
   function inMain(x, y) {  // window px -> main-space px (the main space scrolls; card_show's place uses these)
-    const main = page.slot("top"), m = main.getBoundingClientRect();
-    return { x: Math.round(x - m.left + main.scrollLeft), y: Math.round(y - m.top + main.scrollTop) };
+    const main = page.slot("top"), m = main.getBoundingClientRect(), z = zoom();  // the board's zoom (board/browser.js)
+    return { x: Math.round((x - m.left) / z + main.scrollLeft), y: Math.round((y - m.top) / z + main.scrollTop) };
+  }
+  function zoom() { return parseFloat(page.slot("top").style.zoom) || 1; }  // window px per main px (and per app-frame px)
+  function inFrame(fr, x, y) {  // window px -> px in an app's frame (zoomed with the main space)
+    const r = fr.getBoundingClientRect(), z = zoom();
+    return [(x - r.left) / z - fr.clientLeft, (y - r.top) / z - fr.clientTop];
   }
 
   function target(x, y) {
@@ -89,9 +94,9 @@ export default async function (page) {
     let inner = null, frame = null, box = el.getBoundingClientRect();
     if (el.localName === "iframe") {  // look inside the frame (an App): same origin, so its document is readable
       try {
-        const r = el.getBoundingClientRect(), dx = r.left + el.clientLeft, dy = r.top + el.clientTop;
-        inner = el.contentDocument?.elementFromPoint(x - dx, y - dy);
-        if (inner) { frame = el; const b = inner.getBoundingClientRect(); box = new DOMRect(b.x + dx, b.y + dy, b.width, b.height); }
+        const r = el.getBoundingClientRect(), z = zoom(), dx = r.left + el.clientLeft * z, dy = r.top + el.clientTop * z;
+        inner = el.contentDocument?.elementFromPoint(...inFrame(el, x, y));
+        if (inner) { frame = el; const b = inner.getBoundingClientRect(); box = new DOMRect(dx + b.x * z, dy + b.y * z, b.width * z, b.height * z); }
       } catch {}
     }
     const hitEl = inner || el;
@@ -110,8 +115,7 @@ export default async function (page) {
     let part = null;  // what the thing itself says is at this spot (partAt), e.g. {"name": "enemy-2"}
     try {
       if (frame?.contentWindow?.partAt) {
-        const r = frame.getBoundingClientRect();
-        part = frame.contentWindow.partAt(x - r.left - frame.clientLeft, y - r.top - frame.clientTop);
+        part = frame.contentWindow.partAt(...inFrame(frame, x, y));
       } else {
         const owner = [hitEl, ...[...document.elementsFromPoint(x, y)]].find((e) => typeof e?.partAt === "function");
         if (owner) { const r = owner.getBoundingClientRect(); part = owner.partAt(x - r.left, y - r.top); }
@@ -188,8 +192,7 @@ export default async function (page) {
     const el = document.elementsFromPoint(x, y).find((e) => e !== layer && e !== ink);
     if (el?.localName === "iframe") {
       try {
-        const r = el.getBoundingClientRect(), dx = r.left + el.clientLeft, dy = r.top + el.clientTop;
-        if (typeof el.contentWindow.partIn === "function") return await el.contentWindow.partIn(points.map(([px, py]) => [px - dx, py - dy]));
+        if (typeof el.contentWindow.partIn === "function") return await el.contentWindow.partIn(points.map(([px, py]) => inFrame(el, px, py)));
       } catch (err) { console.warn("partIn:", err); }
     }
     const owner = document.elementsFromPoint(x, y).find((e) => typeof e.partIn === "function");
@@ -204,7 +207,7 @@ export default async function (page) {
     const left = Math.min(...xs), top = Math.min(...ys), width = Math.max(...xs) - left, height = Math.max(...ys) - top;
     if (width < 12 && height < 12) return openNote(target(e.clientX, e.clientY), e.clientX, e.clientY);
     const t = target(left + width / 2, top + height / 2);  // what is under the middle of the drawing
-    if (t) t.area = { ...inMain(left, top), width: Math.round(width), height: Math.round(height) };
+    if (t) t.area = { ...inMain(left, top), width: Math.round(width / zoom()), height: Math.round(height / zoom()) };
     const inside = t && (await partIn(left + width / 2, top + height / 2, points));
     if (inside) t.part = inside;
     openNote(t, e.clientX, e.clientY, points);

package/agent/extensions/page/page.html

@@ -193,7 +193,7 @@
   #f { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; width: min(720px, 64vw);
        display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
   #f:focus-within { border-bottom-color: rgba(0, 0, 0, 0.4); }
-  #to { border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); }
+  #to { border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); outline: none; }
   #text { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 16.5px; color: var(--text); padding: 4px 0; }
   #text::placeholder { color: var(--muted); }
   /* Slash commands: the list above the input while a command's name is typed */

package/agent/extensions/screen/browser.js

@@ -49,9 +49,9 @@ export default async function (page) {
     await new Promise((ok) => setTimeout(ok, 400));         // it has slid away; a fresh frame from the shared tab
     const full = frame();
     const s = full && await picture(full, { x: 0, y: 0, w: innerWidth, h: innerHeight }).catch(() => null);
-    const m = area.getBoundingClientRect();  // window (0, 0) in main-space px (as note/browser.js)
+    const m = area.getBoundingClientRect(), zoom = parseFloat(area.style.zoom) || 1;  // window (0, 0) in main-space px (as note/browser.js)
     page.send({ type: "screen_reply", id, shot: s?.path || null, window: { width: innerWidth, height: innerHeight },
-                main: { x: area.scrollLeft - m.left, y: area.scrollTop - m.top } });
+                main: { x: area.scrollLeft - m.left / zoom, y: area.scrollTop - m.top / zoom }, zoom });
   }
   page.on("screen_ask", ({ id, agent }) => {
     if (shared()) return answer(id);

package/agent/extensions/screen/index.ts

@@ -4,8 +4,9 @@
 // (their size, scroll, panels, running apps; browser-check's headless Chrome is a fresh window of its own).
 //   POST /screen/shot       a png (at most MAX_BYTES): saved in data/screen, {path} back
 //   event "screen_ask"      {id, agent} to every open page, when an agent calls screen_see
-//   page message            screen_reply {id, shot, window: {width, height}, main: {x, y}}: the first answers
-//                           (shot null: the user said no; main: window (0, 0) in main-space px)
+//   page message            screen_reply {id, shot, window: {width, height}, main: {x, y}, zoom}: the first answers
+//                           (shot null: the user said no; main: window (0, 0) in main-space px; zoom: the board's,
+//                           window px per main-space px)
 //   event "screen_ask_done" {id} to every page when answered or after ASK_WAIT s, so the asks go away
 //   host.api.screen         isShot(path): whether a path is a picture saved here (others attach pictures by path)
 import fs from "node:fs";
@@ -70,11 +71,12 @@ export default function (pi: ExtensionAPI) {
       if (!reply) return result(`no answer within ${ASK_WAIT} s (the page may not be open, or the user is away): ask them what they see`);
       if (!isShot(reply.shot)) return result("the user didn't share their screen: ask them what they see");
       const png = fs.readFileSync(reply.shot), pw = png.readUInt32BE(16), ph = png.readUInt32BE(20);  // the png's own size (IHDR)
-      const w = reply.window ?? {}, m = reply.main ?? {}, k = w.width ? pw / w.width : 1;
+      const w = reply.window ?? {}, m = reply.main ?? {}, z = Number(reply.zoom) || 1, k = (w.width ? pw / w.width : 1) * z;  // picture px per main px
       const mx = Math.round(m.x ?? 0), my = Math.round(m.y ?? 0);
       return result(`the user's screen right now: their window is ${w.width}x${w.height} px; the picture is the whole window, `
-        + `${pw}x${ph} px (${+k.toFixed(3)} picture px per window px). Window (0, 0) is main-space (${mx}, ${my}): a spot in `
-        + `the picture is main-space x = ${mx} + picture x / ${+k.toFixed(3)}, the same for y (what card_show's place uses).`, reply.shot);
+        + `${pw}x${ph} px${z !== 1 ? `, with the board zoomed to ${Math.round(z * 100)}%` : ""} (${+k.toFixed(3)} picture px per main-space px). `
+        + `Window (0, 0) is main-space (${mx}, ${my}): a spot in the picture is main-space x = ${mx} + picture x / ${+k.toFixed(3)}, `
+        + `the same for y (what card_show's place uses).`, reply.shot);
     },
   });
 }

package/agent/extensions/version/browser.js

@@ -15,15 +15,15 @@ const image = (src) => new Promise((ok, no) => Object.assign(new Image(), { onlo
 async function picture() {  // a PNG blob of the cards, or null if there are none
   const top = document.getElementById("top"), cards = [...top.querySelectorAll("[data-card]")];
   if (!cards.length) return null;
-  const domtoimage = await library(), at = top.getBoundingClientRect();
-  const box = (el) => { const r = el.getBoundingClientRect(); return { x: r.left - at.left + top.scrollLeft, y: r.top - at.top + top.scrollTop, w: r.width, h: r.height }; };
+  const domtoimage = await library(), at = top.getBoundingClientRect(), z = parseFloat(top.style.zoom) || 1;  // the board's zoom: drawn at 100%
+  const box = (el) => { const r = el.getBoundingClientRect(); return { x: (r.left - at.left) / z + top.scrollLeft, y: (r.top - at.top) / z + top.scrollTop, w: r.width / z, h: r.height / z }; };
   const all = cards.map(box);
   const x0 = Math.max(0, Math.min(...all.map((b) => b.x)) - MARGIN), y0 = Math.max(0, Math.min(...all.map((b) => b.y)) - MARGIN);
   const x1 = Math.max(...all.map((b) => b.x + b.w)) + MARGIN, y1 = Math.max(...all.map((b) => b.y + b.h)) + MARGIN;
   const width = Math.ceil(x1), height = Math.ceil(y1);  // the whole main space up to the last card; cropped below
   const bgcolor = getComputedStyle(document.body).backgroundColor;
   const page = await image(await domtoimage.toPng(top, { width, height, bgcolor,
-    style: { position: "static", inset: "auto", overflow: "visible", width: `${width}px`, height: `${height}px` } }));
+    style: { position: "static", inset: "auto", overflow: "visible", width: `${width}px`, height: `${height}px`, zoom: "1" } }));
   const canvas = Object.assign(document.createElement("canvas"), { width: Math.ceil(x1 - x0), height: Math.ceil(y1 - y0) });
   const g = canvas.getContext("2d");
   g.drawImage(page, -x0, -y0);