@pixerate/editor 0.227.1 → 0.228.1

package/dist/{chunk-4EFNS2HV.cjs → chunk-T7QSEKDY.cjs}

@@ -2,8 +2,8 @@
 var PLATFORMS = ["mac", "windows", "linux"];
 function detectPlatform() {
   const nav = typeof navigator !== "undefined" ? navigator : void 0;
-  const text = `${_nullishCoalesce(_optionalChain([nav, 'optionalAccess', _ => _.platform]), () => ( ""))} ${_nullishCoalesce(_optionalChain([nav, 'optionalAccess', _2 => _2.userAgent]), () => ( ""))}`;
-  if (/Mac|iPod|iPhone|iPad/.test(_optionalChain([nav, 'optionalAccess', _3 => _3.platform]) || _optionalChain([nav, 'optionalAccess', _4 => _4.userAgent]) || "")) return "mac";
+  const text = `${_nullishCoalesce(_optionalChain([nav, 'optionalAccess', _2 => _2.platform]), () => ( ""))} ${_nullishCoalesce(_optionalChain([nav, 'optionalAccess', _3 => _3.userAgent]), () => ( ""))}`;
+  if (/Mac|iPod|iPhone|iPad/.test(_optionalChain([nav, 'optionalAccess', _4 => _4.platform]) || _optionalChain([nav, 'optionalAccess', _5 => _5.userAgent]) || "")) return "mac";
   if (/Win/.test(text)) return "windows";
   return "linux";
 }
@@ -222,7 +222,7 @@ function isEditableEventTarget(event) {
   if (!target) target = typeof document !== "undefined" ? document.activeElement : null;
   if (!target || typeof target.tagName !== "string") return false;
   const tag = target.tagName.toUpperCase();
-  return !!(tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable || _optionalChain([target, 'access', _5 => _5.getAttribute, 'optionalCall', _6 => _6("contenteditable")]) === "true" || _optionalChain([target, 'access', _7 => _7.closest, 'optionalCall', _8 => _8('[contenteditable="true"]')]) || _optionalChain([target, 'access', _9 => _9.closest, 'optionalCall', _10 => _10(".ProseMirror")]));
+  return !!(tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable || _optionalChain([target, 'access', _6 => _6.getAttribute, 'optionalCall', _7 => _7("contenteditable")]) === "true" || _optionalChain([target, 'access', _8 => _8.closest, 'optionalCall', _9 => _9('[contenteditable="true"]')]) || _optionalChain([target, 'access', _10 => _10.closest, 'optionalCall', _11 => _11(".ProseMirror")]));
 }
 
 // src/commands/shortcuts.ts
@@ -427,9 +427,252 @@ function arrangeShortcutMap(bindings) {
   return map;
 }
 function matchArrangeShortcut(event, bindings = DEFAULT_ARRANGE_SHORTCUTS) {
-  return _nullishCoalesce(_optionalChain([arrangeShortcutMap, 'call', _11 => _11(bindings), 'access', _12 => _12.resolve, 'call', _13 => _13(event), 'optionalAccess', _14 => _14.command]), () => ( null));
+  return _nullishCoalesce(_optionalChain([arrangeShortcutMap, 'call', _12 => _12(bindings), 'access', _13 => _13.resolve, 'call', _14 => _14(event), 'optionalAccess', _15 => _15.command]), () => ( null));
 }
 
+// src/canvas/gestures.ts
+function gestureRandom(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function gestureSeed(value) {
+  const text = _nullishCoalesce(JSON.stringify(value), () => ( ""));
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function gestureUnion(rects) {
+  if (!rects.length) throw new Error("Pass at least one rect.");
+  const x = Math.min(...rects.map((r) => r.x));
+  const y = Math.min(...rects.map((r) => r.y));
+  const right = Math.max(...rects.map((r) => r.x + r.width));
+  const bottom = Math.max(...rects.map((r) => r.y + r.height));
+  return { x, y, width: right - x, height: bottom - y };
+}
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var centre = (r) => [r.x + r.width / 2, r.y + r.height / 2];
+function smoothNoise(rand, octaves = 3) {
+  const waves = Array.from({ length: octaves }, (_, i) => ({ f: (i + 1) * (0.6 + rand() * 0.8), phase: rand() * Math.PI * 2, amp: 1 / (i + 1) }));
+  const total = waves.reduce((sum, w) => sum + w.amp, 0);
+  return (t) => waves.reduce((sum, w) => sum + w.amp * Math.sin(2 * Math.PI * w.f * t + w.phase), 0) / total;
+}
+function handPressure(rand) {
+  const r = (lo, hi) => Math.round((lo + rand() * (hi - lo)) * 100) / 100;
+  return [r(0.35, 0.55), r(0.8, 0.95), r(0.9, 1), r(0.75, 0.95), r(0.4, 0.65)];
+}
+var round = (p) => [Math.round(p[0] * 100) / 100, Math.round(p[1] * 100) / 100];
+function wobblyLine(a, b, rand, amp, bow = 0) {
+  const dx = b[0] - a[0];
+  const dy = b[1] - a[1];
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return [a];
+  const nx = -dy / len;
+  const ny = dx / len;
+  const noise = smoothNoise(rand);
+  const n = clamp(Math.ceil(len / 4), 8, 200);
+  return Array.from({ length: n + 1 }, (_, i) => {
+    const t = i / n;
+    const off = bow * 4 * t * (1 - t) + amp * noise(t) * Math.sqrt(Math.sin(Math.PI * t));
+    return [a[0] + dx * t + nx * off, a[1] + dy * t + ny * off];
+  });
+}
+function circleGesture(rect, seed, options = {}) {
+  const rand = gestureRandom(seed);
+  const pad = Math.max(0, _nullishCoalesce(options.padding, () => ( 8)));
+  const [cx, cy] = centre(rect);
+  const tilt = (rand() - 0.5) * 0.08;
+  const c = Math.abs(Math.cos(tilt));
+  const s = Math.abs(Math.sin(tilt));
+  const a = (rect.width / 2 * c + rect.height / 2 * s) * Math.SQRT2 + pad;
+  const b = (rect.width / 2 * s + rect.height / 2 * c) * Math.SQRT2 + pad;
+  const dir = rand() < 0.7 ? -1 : 1;
+  const start = -Math.PI * 0.75 + (rand() - 0.5) * 0.6;
+  const sweep = Math.PI * 2 + Math.PI * (0.1 + rand() * 0.12);
+  const jitter = 0.03 + rand() * 0.03;
+  const drift = 0.04 + rand() * 0.05;
+  const noise = smoothNoise(rand, 4);
+  const perimeter = Math.PI * (3 * (a + b) - Math.sqrt((3 * a + b) * (a + 3 * b)));
+  const n = clamp(Math.ceil(perimeter * (sweep / (Math.PI * 2)) / 5), 48, 360);
+  const points = Array.from({ length: n + 1 }, (_, i) => {
+    const t = i / n;
+    const angle = start + dir * sweep * t;
+    const grow = 1 + jitter * (0.5 + 0.5 * noise(t)) + drift * t * t;
+    const ex = a * grow * Math.cos(angle);
+    const ey = b * grow * Math.sin(angle);
+    return round([cx + ex * Math.cos(tilt) - ey * Math.sin(tilt), cy + ex * Math.sin(tilt) + ey * Math.cos(tilt)]);
+  });
+  return { points, pressure: handPressure(rand) };
+}
+function underlineGesture(rect, seed, options = {}) {
+  const rand = gestureRandom(seed);
+  const offset = Math.max(0, _nullishCoalesce(options.offset, () => ( 4)));
+  const amp = options.wave ? clamp(rect.width * 0.02, 2, 4) : 0;
+  const shake = Math.min(1.5, offset * 0.4);
+  const base = rect.y + rect.height + offset + amp + shake;
+  const slope = Math.min(6, rect.width * 0.03);
+  const x0 = rect.x - rect.width * (0.01 + rand() * 0.04);
+  const x1 = rect.x + rect.width * (0.96 + rand() * 0.08);
+  const line = wobblyLine([x0, base + rand() * slope], [x1, base + rand() * slope], rand, shake, (rand() - 0.5) * 2 * shake);
+  const wavelength = clamp(rect.width / 8, 12, 28);
+  const phase = rand() * Math.PI * 2;
+  const points = amp ? line.map(([x, y]) => [x, y + amp * Math.sin(2 * Math.PI * (x - x0) / wavelength + phase)]) : line;
+  return { points: points.map(round), pressure: handPressure(rand) };
+}
+function gestureEdgePoint(rect, toward, gap = 0) {
+  const [cx, cy] = centre(rect);
+  const dx = toward[0] - cx;
+  const dy = toward[1] - cy;
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return [cx, cy];
+  const t = Math.min(dx ? rect.width / 2 / Math.abs(dx) : Infinity, dy ? rect.height / 2 / Math.abs(dy) : Infinity);
+  return [cx + dx * t + dx / len * gap, cy + dy * t + dy / len * gap];
+}
+var isRect = (end) => !Array.isArray(end);
+function arrowGesture(from, to, seed, options = {}) {
+  const rand = gestureRandom(seed);
+  const gap = Math.max(0, _nullishCoalesce(options.gap, () => ( 6)));
+  const fromCentre = isRect(from) ? centre(from) : from;
+  const toCentre = isRect(to) ? centre(to) : to;
+  const start = isRect(from) ? gestureEdgePoint(from, toCentre, gap) : from;
+  const tip = isRect(to) ? gestureEdgePoint(to, fromCentre, gap) : to;
+  const dx = tip[0] - start[0];
+  const dy = tip[1] - start[1];
+  const len = Math.hypot(dx, dy);
+  if (len < 4) throw new Error("The arrow's ends are too close together (or overlap): pass ends at least a few canvas units apart.");
+  const curve = clamp(_nullishCoalesce(options.curve, () => ( (0.08 + rand() * 0.08) * (rand() < 0.5 ? -1 : 1))), -1, 1);
+  const nx = -dy / len;
+  const ny = dx / len;
+  const control = [(start[0] + tip[0]) / 2 + nx * curve * len, (start[1] + tip[1]) / 2 + ny * curve * len];
+  const noise = smoothNoise(rand);
+  const amp = Math.min(2, len * 0.01);
+  const n = clamp(Math.ceil(len / 4), 12, 200);
+  const shaft = Array.from({ length: n + 1 }, (_, i) => {
+    const t = i / n;
+    const u = 1 - t;
+    const x = u * u * start[0] + 2 * u * t * control[0] + t * t * tip[0];
+    const y = u * u * start[1] + 2 * u * t * control[1] + t * t * tip[1];
+    const off = amp * noise(t) * Math.sqrt(Math.sin(Math.PI * t));
+    return [x + nx * off, y + ny * off];
+  });
+  const tx = tip[0] - control[0];
+  const ty = tip[1] - control[1];
+  const tl = Math.hypot(tx, ty) || 1;
+  const head = clamp(len * 0.15, 8, 22);
+  const barb = (angle2, length) => {
+    const c = Math.cos(angle2);
+    const s = Math.sin(angle2);
+    const bx = -(tx / tl) * c + ty / tl * s;
+    const by = -(ty / tl) * c - tx / tl * s;
+    return [1 / 3, 2 / 3, 1].map((f) => [tip[0] + bx * length * f, tip[1] + by * length * f]);
+  };
+  const clear = (pts) => !isRect(to) || pts.every(([x, y]) => x <= to.x || x >= to.x + to.width || y <= to.y || y >= to.y + to.height);
+  const fit = (angle2) => {
+    const length = head * (0.85 + rand() * 0.3);
+    for (let k = 1; k > 0.05; k -= 0.15) {
+      const pts = barb(angle2 * k, length);
+      if (clear(pts)) return pts;
+    }
+    return barb(0, length);
+  };
+  const angle = () => (25 + rand() * 8) * Math.PI / 180;
+  const first = fit(angle());
+  const second = fit(-angle());
+  const points = [...shaft, ...first, ...first.slice(0, -1).reverse(), tip, ...second];
+  return { points: points.map(round), pressure: handPressure(rand) };
+}
+function bracketGesture(rect, side, seed, options = {}) {
+  const rand = gestureRandom(seed);
+  const pad = Math.max(0, _nullishCoalesce(options.padding, () => ( 8)));
+  const vertical = side === "left" || side === "right";
+  const span = vertical ? rect.height : rect.width;
+  const depth = Math.max(1, _nullishCoalesce(options.depth, () => ( clamp(span * 0.08, 6, 20))));
+  const from = vertical ? rect.y : rect.x;
+  const edge = side === "left" ? rect.x - pad : side === "right" ? rect.x + rect.width + pad : side === "top" ? rect.y - pad : rect.y + rect.height + pad;
+  const out = side === "left" || side === "top" ? -1 : 1;
+  const at = (s, d) => vertical ? [edge + out * d, from + s * span] : [from + s * span, edge + out * d];
+  const noise = smoothNoise(rand);
+  const shake = Math.min(1, depth * 0.06);
+  const n = clamp(Math.ceil(span / 4), 24, 240);
+  let points;
+  if (options.shape === "square") {
+    const arm = depth * (0.8 + rand() * 0.2);
+    const spine = Array.from({ length: n + 1 }, (_, i) => at(i / n, depth + shake * (1 + noise(i / n))));
+    points = [at(0, depth - arm), at(0, depth * 0.5), ...spine, at(1, depth * 0.5), at(1, depth - arm * (0.85 + rand() * 0.15))];
+  } else {
+    const e = clamp(depth / Math.max(span, 1), 0.04, 0.2);
+    const brace = (s) => {
+      const u = s <= 0.5 ? s : 1 - s;
+      if (u < e) return depth / 2 * Math.sin(Math.PI / 2 * u / e);
+      if (u < 0.5 - e) return depth / 2;
+      return depth / 2 + depth / 2 * (1 - Math.cos(Math.PI / 2 * (u - (0.5 - e)) / e));
+    };
+    points = Array.from({ length: n + 1 }, (_, i) => {
+      const s = i / n;
+      return at(s, brace(s) + shake * (1 + noise(s)) * Math.sin(Math.PI * s));
+    });
+  }
+  return { points: points.map(round), pressure: handPressure(rand) };
+}
+function strikeGesture(rect, seed) {
+  const rand = gestureRandom(seed);
+  const [, cy] = centre(rect);
+  const slope = rect.height * 0.08;
+  const x0 = rect.x - rect.width * (0.01 + rand() * 0.03);
+  const x1 = rect.x + rect.width * (1.01 + rand() * 0.03);
+  const y0 = cy + (rand() - 0.5) * rect.height * 0.1 + slope * (rand() - 0.5);
+  const y1 = cy + (rand() - 0.5) * rect.height * 0.1 + slope * (rand() - 0.5);
+  const points = wobblyLine([x0, y0], [x1, y1], rand, Math.min(1.5, rect.height * 0.05));
+  return { points: points.map(round), pressure: handPressure(rand) };
+}
+function crossGesture(rect, seed) {
+  const rand = gestureRandom(seed);
+  const over = () => 0.02 + rand() * 0.04;
+  const left = () => rect.x - rect.width * over();
+  const right = () => rect.x + rect.width * (1 + over());
+  const top = () => rect.y - rect.height * over();
+  const bottom = () => rect.y + rect.height * (1 + over());
+  const amp = Math.min(1.5, Math.min(rect.width, rect.height) * 0.03);
+  const first = wobblyLine([left(), top()], [right(), bottom()], rand, amp);
+  const second = wobblyLine([right(), top()], [left(), bottom()], rand, amp);
+  const mid1 = Math.floor(first.length / 2);
+  const mid2 = Math.floor(second.length / 2);
+  const points = [...first, ...first.slice(mid1, -1).reverse(), ...second.slice(1, mid2 + 1).reverse(), ...second];
+  return { points: points.map(round), pressure: handPressure(rand) };
+}
+function checkGesture(at, seed, options = {}) {
+  const rand = gestureRandom(seed);
+  const [cx, cy] = isRect(at) ? centre(at) : at;
+  const s = Math.max(4, _nullishCoalesce(options.size, () => ( (isRect(at) ? clamp(Math.min(at.width, at.height) * 0.6, 12, 48) : 20))));
+  const turn = (rand() - 0.5) * 12 * Math.PI / 180;
+  const place = ([x, y]) => [cx + s * (x * Math.cos(turn) - y * Math.sin(turn)), cy + s * (x * Math.sin(turn) + y * Math.cos(turn))];
+  const p0 = [-0.42 + rand() * 0.08, -0.05 + rand() * 0.08];
+  const p1 = [-0.12 + rand() * 0.06, 0.38 + rand() * 0.06];
+  const p2 = [0.48 + rand() * 0.06, -0.5 + rand() * 0.06];
+  const short = wobblyLine(place(p0), place(p1), rand, 0, -s * 0.03);
+  const long = wobblyLine(place(p1), place(p2), rand, Math.min(1, s * 0.02), s * 0.06);
+  return { points: [...short, ...long.slice(1)].map(round), pressure: [0.5, 0.95, 0.9, 0.7, 0.35] };
+}
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -449,4 +692,4 @@ function matchArrangeShortcut(event, bindings = DEFAULT_ARRANGE_SHORTCUTS) {
 
 
 
-exports.PLATFORMS = PLATFORMS; exports.detectPlatform = detectPlatform; exports.keyToCode = keyToCode; exports.codeToKeyText = codeToKeyText; exports.parseChord = parseChord; exports.chordToString = chordToString; exports.normalizeChord = normalizeChord; exports.effectiveChord = effectiveChord; exports.effectiveChordKey = effectiveChordKey; exports.formatShortcut = formatShortcut; exports.eventCode = eventCode; exports.shortcutCode = shortcutCode; exports.codeFromKey = codeFromKey; exports.isEditableEventTarget = isEditableEventTarget; exports.toShortcutBindings = toShortcutBindings; exports.ShortcutMap = ShortcutMap; exports.DEFAULT_ARRANGE_SHORTCUTS = DEFAULT_ARRANGE_SHORTCUTS; exports.matchArrangeShortcut = matchArrangeShortcut;
+exports.PLATFORMS = PLATFORMS; exports.detectPlatform = detectPlatform; exports.keyToCode = keyToCode; exports.codeToKeyText = codeToKeyText; exports.parseChord = parseChord; exports.chordToString = chordToString; exports.normalizeChord = normalizeChord; exports.effectiveChord = effectiveChord; exports.effectiveChordKey = effectiveChordKey; exports.formatShortcut = formatShortcut; exports.eventCode = eventCode; exports.shortcutCode = shortcutCode; exports.codeFromKey = codeFromKey; exports.isEditableEventTarget = isEditableEventTarget; exports.toShortcutBindings = toShortcutBindings; exports.ShortcutMap = ShortcutMap; exports.DEFAULT_ARRANGE_SHORTCUTS = DEFAULT_ARRANGE_SHORTCUTS; exports.matchArrangeShortcut = matchArrangeShortcut; exports.gestureRandom = gestureRandom; exports.gestureSeed = gestureSeed; exports.gestureUnion = gestureUnion; exports.circleGesture = circleGesture; exports.underlineGesture = underlineGesture; exports.gestureEdgePoint = gestureEdgePoint; exports.arrowGesture = arrowGesture; exports.bracketGesture = bracketGesture; exports.strikeGesture = strikeGesture; exports.crossGesture = crossGesture; exports.checkGesture = checkGesture;

package/dist/{chunk-ZPJEH456.js → chunk-XVIK73LS.js}

@@ -1,7 +1,16 @@
 import {
   DEFAULT_ARRANGE_SHORTCUTS,
-  ShortcutMap
-} from "./chunk-7KZ2HKKC.js";
+  ShortcutMap,
+  arrowGesture,
+  bracketGesture,
+  checkGesture,
+  circleGesture,
+  crossGesture,
+  gestureSeed,
+  gestureUnion,
+  strikeGesture,
+  underlineGesture
+} from "./chunk-LPFQHVCO.js";
 
 // src/commands/builtins.ts
 var DEFAULT_HISTORY_SHORTCUTS = [
@@ -370,7 +379,202 @@ function createDrawCommands(target, options = {}) {
       params: { type: "object", additionalProperties: false, properties: {} },
       readOnly: true,
       run: async () => ({ brushes: await target.listBrushes() })
+    },
+    ...createGestureCommands(target, base, prefix, options)
+  ];
+}
+var GESTURE_RECT_PARAM = {
+  type: "object",
+  additionalProperties: false,
+  required: ["x", "y", "width", "height"],
+  description: "A box in canvas units (top left x, y and its size), e.g. a node's bounds from get_editor_state or a stroke's `bounds`.",
+  properties: {
+    x: { type: "number", description: "Left edge, canvas units." },
+    y: { type: "number", description: "Top edge, canvas units." },
+    width: { type: "number", minimum: 0, description: "Width, canvas units." },
+    height: { type: "number", minimum: 0, description: "Height, canvas units." }
+  }
+};
+var GESTURE_NODE_PARAM = {
+  type: "object",
+  additionalProperties: false,
+  required: ["nodeId"],
+  description: "A node on the canvas by id; its current box is used, so you need not read its position first.",
+  properties: { nodeId: { type: "string", minLength: 1, description: "The node id (from get_editor_state or a result)." } }
+};
+var GESTURE_POINT_PARAM = {
+  type: "array",
+  minItems: 2,
+  maxItems: 2,
+  items: { type: "number" },
+  description: "A point as [x, y] in canvas units."
+};
+var gestureBox = (what) => ({ description: what, oneOf: [GESTURE_RECT_PARAM, GESTURE_NODE_PARAM] });
+var gestureEnd = (what) => ({ description: what, oneOf: [GESTURE_RECT_PARAM, GESTURE_NODE_PARAM, GESTURE_POINT_PARAM] });
+var gestureBoxes = (what) => ({
+  type: "array",
+  minItems: 1,
+  maxItems: 100,
+  items: { oneOf: [GESTURE_RECT_PARAM, GESTURE_NODE_PARAM] },
+  description: `${what} Each is a box { x, y, width, height } or a node { nodeId }; the gesture spans the box around all of them.`
+});
+var GESTURE_STYLE_PARAMS = {
+  tool: { type: "string", enum: ["pen", "highlighter"], description: "Pen (default: blue, width 3) or highlighter (yellow, width 24, opacity 0.35); sets the defaults below." },
+  color: { type: "string", description: "Stroke colour, any CSS colour (default from the tool)." },
+  width: { type: "number", exclusiveMinimum: 0, maximum: 2500, description: "Stroke width in canvas units (default from the tool; with a brush, the preset's own size)." },
+  opacity: { type: "number", minimum: 0, maximum: 1, description: "Stroke opacity 0..1 (default from the tool)." },
+  brush: {
+    description: 'Paint the mark with a dry paint brush: a preset id such as "ink-pen", "marker", "pencil-hb" or "brush-pen" (all ids: canvas.listBrushes), or tip settings. Brushed marks get an uneven hand pressure. Omit for a plain vector stroke.',
+    oneOf: [{ type: "string", minLength: 1 }, BRUSH_SETTINGS_PARAM]
+  },
+  seed: { type: "integer", minimum: 0, maximum: 4294967295, description: "Seed for the hand-drawn wobble (default: derived from the other params, so the same request draws the same mark). Change it for a different take." }
+};
+function createGestureCommands(target, base, prefix, options) {
+  const box = (value, name) => {
+    if (Array.isArray(value)) throw new Error(`${name} must be a box { x, y, width, height } or a node { nodeId }, not a point.`);
+    if ("nodeId" in value) {
+      if (!target.nodeBounds) throw new Error(`This canvas cannot look up nodes: pass ${name} as a box { x, y, width, height } (a node's bounds from get_editor_state).`);
+      const rect = target.nodeBounds(value.nodeId);
+      if (!rect) throw new Error(`Unknown node "${value.nodeId}" in ${name}: use an id from get_editor_state.`);
+      return rect;
     }
+    return value;
+  };
+  const end = (value, name) => Array.isArray(value) ? [value[0], value[1]] : box(value, name);
+  const boxes = (values, name) => gestureUnion(values.map((v, i) => box(v, `${name}[${i}]`)));
+  const gesture = (spec) => {
+    const seedOf = (params) => params.seed ?? gestureSeed({ gesture: spec.name, ...params });
+    const generate = (params) => {
+      const seed = seedOf(params);
+      return { seed, stroke: spec.make(params, seed) };
+    };
+    return {
+      ...base,
+      id: `${prefix}${spec.name}`,
+      label: spec.label,
+      keywords: ["annotate", "mark up", "hand-drawn", ...spec.keywords],
+      description: `${spec.description} Drawn as one hand-drawn pen or highlighter stroke node (one undo step), with a seeded wobble. Returns the new node \`id\`, its \`bounds\`, the stored \`brush\` (when brushed) and the \`seed\` used.`,
+      params: {
+        type: "object",
+        additionalProperties: false,
+        required: spec.required,
+        properties: { ...spec.properties, ...GESTURE_STYLE_PARAMS }
+      },
+      enabled: () => options.readOnlyReason?.() || true,
+      plan: (_ctx, params) => {
+        try {
+          return planFreehandPlayback(generate(params).stroke.points);
+        } catch {
+          return null;
+        }
+      },
+      run: async (_ctx, params) => {
+        const { seed, stroke } = generate(params);
+        const result = await target.drawStroke({
+          points: stroke.points,
+          ...params.tool ? { tool: params.tool } : {},
+          style: {
+            ...params.color !== void 0 ? { color: params.color } : {},
+            ...params.width !== void 0 ? { width: params.width } : {},
+            ...params.width !== void 0 && params.brush !== void 0 ? { brushSize: params.width } : {},
+            ...params.opacity !== void 0 ? { opacity: params.opacity } : {},
+            ...params.brush !== void 0 ? { brush: params.brush } : {}
+          },
+          ...params.brush !== void 0 ? { pressure: stroke.pressure } : {}
+        });
+        return { ...result, seed };
+      }
+    };
+  };
+  return [
+    gesture({
+      name: "circle",
+      label: "Circle Around",
+      keywords: ["circle", "ring", "loop", "highlight", "pick", "ellipse"],
+      description: "Circles boxes or nodes with a loose, slightly open ellipse that never cuts into them: the way to point out a pick or the thing you are talking about.",
+      required: ["around"],
+      properties: {
+        around: gestureBoxes("What to circle."),
+        padding: { type: "number", minimum: 0, maximum: 500, description: "Space between them and the loop, canvas units (default 8)." }
+      },
+      make: (p, seed) => circleGesture(boxes(p.around, "around"), seed, { ...p.padding !== void 0 ? { padding: p.padding } : {} })
+    }),
+    gesture({
+      name: "underline",
+      label: "Underline",
+      keywords: ["underline", "emphasis", "line under", "squiggle"],
+      description: "Underlines a box or node with a stroke just below its bottom edge, a little longer or shorter than it: for stressing a line of text or a value.",
+      required: ["under"],
+      properties: {
+        under: gestureBox("What to underline: a box { x, y, width, height } or a node { nodeId }."),
+        offset: { type: "number", minimum: 0, maximum: 200, description: "Gap below the bottom edge, canvas units (default 4)." },
+        wave: { type: "boolean", description: "A wavy (squiggly) underline instead of a straight one (default false)." }
+      },
+      make: (p, seed) => underlineGesture(box(p.under, "under"), seed, { ...p.offset !== void 0 ? { offset: p.offset } : {}, ...p.wave ? { wave: true } : {} })
+    }),
+    gesture({
+      name: "arrow",
+      label: "Arrow",
+      keywords: ["arrow", "point", "connect", "from", "to", "pointer"],
+      description: "Draws a curved arrow with a hand-drawn head from one thing to another: a box or node is reached at its nearest edge, a point exactly. For linking a swatch to where it is used, or pointing from a note to its subject.",
+      required: ["from", "to"],
+      properties: {
+        from: gestureEnd("Where the arrow starts: a box, a node { nodeId } or a point [x, y]."),
+        to: gestureEnd("Where the arrow points: a box, a node { nodeId } or a point [x, y]."),
+        curve: { type: "number", minimum: -1, maximum: 1, description: "Bend of the shaft \u22121..1: how far its middle bulges, as a fraction of half its length; positive bends to the left of travel, 0 is straight (default: a gentle seeded bend, about 0.1)." },
+        gap: { type: "number", minimum: 0, maximum: 200, description: "Space between a box end and the arrow, canvas units (default 6)." }
+      },
+      make: (p, seed) => arrowGesture(end(p.from, "from"), end(p.to, "to"), seed, { ...p.curve !== void 0 ? { curve: p.curve } : {}, ...p.gap !== void 0 ? { gap: p.gap } : {} })
+    }),
+    gesture({
+      name: "bracket",
+      label: "Bracket",
+      keywords: ["bracket", "brace", "group", "curly", "span"],
+      description: "Brackets boxes or nodes on one side with a curly or square bracket spanning them end to end: for grouping a set of items or a range of lines, usually with a note beside it.",
+      required: ["around", "side"],
+      properties: {
+        around: gestureBoxes("What to bracket."),
+        side: { type: "string", enum: ["left", "right", "top", "bottom"], description: "Which side the bracket goes on." },
+        shape: { type: "string", enum: ["curly", "square"], description: "Curly brace (default) or square bracket." },
+        padding: { type: "number", minimum: 0, maximum: 500, description: "Gap between them and the bracket, canvas units (default 8)." },
+        depth: { type: "number", exclusiveMinimum: 0, maximum: 500, description: "How far the bracket reaches out, canvas units (default: from the span, 6..20)." }
+      },
+      make: (p, seed) => bracketGesture(boxes(p.around, "around"), p.side, seed, {
+        ...p.shape ? { shape: p.shape } : {},
+        ...p.padding !== void 0 ? { padding: p.padding } : {},
+        ...p.depth !== void 0 ? { depth: p.depth } : {}
+      })
+    }),
+    gesture({
+      name: "strike",
+      label: "Strike Through",
+      keywords: ["strike", "strikethrough", "cross out", "line through", "delete"],
+      description: "Strikes a line through the middle of a box or node, a little past both ends: for text or a value to drop. It only marks it; nothing is deleted.",
+      required: ["over"],
+      properties: { over: gestureBox("What to strike through: a box { x, y, width, height } or a node { nodeId }.") },
+      make: (p, seed) => strikeGesture(box(p.over, "over"), seed)
+    }),
+    gesture({
+      name: "cross",
+      label: "Cross Out",
+      keywords: ["cross", "x", "reject", "no", "wrong", "cross out"],
+      description: "Crosses out a box or node with an X from corner to corner: for a rejected option. It only marks it; nothing is deleted. One stroke, so the pen runs back over part of the first diagonal before drawing the second.",
+      required: ["over"],
+      properties: { over: gestureBox("What to cross out: a box { x, y, width, height } or a node { nodeId }.") },
+      make: (p, seed) => crossGesture(box(p.over, "over"), seed)
+    }),
+    gesture({
+      name: "check",
+      label: "Check Mark",
+      keywords: ["check", "tick", "approve", "yes", "done", "ok"],
+      description: "Draws a tick mark in the middle of a box or node, or centred on a point: for an approved option or a done item.",
+      required: ["at"],
+      properties: {
+        at: gestureEnd("Where the tick goes: a box, a node { nodeId } (its centre) or a point [x, y]."),
+        size: { type: "number", exclusiveMinimum: 0, maximum: 2e3, description: "Height of the tick, canvas units (default: 60% of the box's smaller side, 12..48; 20 at a point)." }
+      },
+      make: (p, seed) => checkGesture(end(p.at, "at"), seed, { ...p.size !== void 0 ? { size: p.size } : {} })
+    })
   ];
 }
 function hasVariantCommands(controller) {

package/dist/commands/agentTools.d.cts

@@ -11,6 +11,17 @@ export interface CommandToolProviderOptions<TContext = any> {
     scope?: string | readonly string[];
     /** Commands agents may not see or run (e.g. ones that open dialogs). */
     exclude?: (id: string) => boolean;
+    /**
+     * Commands also listed as tools of their own, beside `run_command` (ids, or a filter): the
+     * params schema is the tool's input schema, and the label, description, read-only flag and
+     * playback plan carry over. Agents then see them without calling `list_commands` first.
+     */
+    tools?: readonly string[] | ((id: string) => boolean);
+    /**
+     * Name of a command's own tool (default: the id with every character other than letters,
+     * digits, `_` and `-` replaced by `_`, so `canvas.circle` is `canvas_circle`).
+     */
+    toolName?: (id: string) => string;
 }
 /**
  * Exposes a `CommandRegistry` to agents through a `ToolRegistry`:
@@ -26,6 +37,9 @@ export interface CommandToolProviderOptions<TContext = any> {
  *   registry with `history`) runs them as one undo step named `label` and takes everything
  *   back when one fails.
  *
+ * With `tools`, chosen commands are also tools of their own (`canvas.circle` →
+ * `canvas_circle`, or `toolName`), taking the command's params as arguments.
+ *
  * The id enum in `run_command`'s schema follows the registered commands, so the
  * `ToolRegistry` announces `listChanged` when commands are added or removed.
  */

package/dist/commands/agentTools.d.ts

@@ -11,6 +11,17 @@ export interface CommandToolProviderOptions<TContext = any> {
     scope?: string | readonly string[];
     /** Commands agents may not see or run (e.g. ones that open dialogs). */
     exclude?: (id: string) => boolean;
+    /**
+     * Commands also listed as tools of their own, beside `run_command` (ids, or a filter): the
+     * params schema is the tool's input schema, and the label, description, read-only flag and
+     * playback plan carry over. Agents then see them without calling `list_commands` first.
+     */
+    tools?: readonly string[] | ((id: string) => boolean);
+    /**
+     * Name of a command's own tool (default: the id with every character other than letters,
+     * digits, `_` and `-` replaced by `_`, so `canvas.circle` is `canvas_circle`).
+     */
+    toolName?: (id: string) => string;
 }
 /**
  * Exposes a `CommandRegistry` to agents through a `ToolRegistry`:
@@ -26,6 +37,9 @@ export interface CommandToolProviderOptions<TContext = any> {
  *   registry with `history`) runs them as one undo step named `label` and takes everything
  *   back when one fails.
  *
+ * With `tools`, chosen commands are also tools of their own (`canvas.circle` →
+ * `canvas_circle`, or `toolName`), taking the command's params as arguments.
+ *
  * The id enum in `run_command`'s schema follows the registered commands, so the
  * `ToolRegistry` announces `listChanged` when commands are added or removed.
  */

package/dist/commands/builtins.d.cts

@@ -126,6 +126,13 @@ export interface DrawCommandTarget {
     }>;
     /** The dry paint presets a stroke can be brushed with (loads the paint engine). */
     listBrushes(): Promise<CanvasBrushPreset[]>;
+    /** A node's box in canvas coordinates, so gestures can take `{ nodeId }` targets (without it they take boxes and points only). */
+    nodeBounds?(id: string): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | undefined;
 }
 export interface DrawCommandOptions {
     /** Id prefix (default `canvas.`). */
@@ -144,7 +151,10 @@ export declare function planFreehandPlayback(points: unknown, max?: number): Pla
 /**
  * Agent / palette commands for freehand drawing: `canvas.drawFreehand` (a pen or highlighter
  * stroke through given points, optionally brushed with a dry paint preset and a pressure / tilt
- * profile; one undo step) and the read-only `canvas.listBrushes` (the dry presets it accepts).
+ * profile; one undo step), the read-only `canvas.listBrushes` (the dry presets it accepts) and
+ * the annotation gestures `canvas.circle`, `canvas.underline`, `canvas.arrow`, `canvas.bracket`,
+ * `canvas.strike`, `canvas.cross` and `canvas.check` (hand-drawn marks around boxes, points or,
+ * when the target has `nodeBounds`, nodes).
  */
 export declare function createDrawCommands(target: DrawCommandTarget, options?: DrawCommandOptions): CommandSpec[];
 type ComponentActionResult = {

package/dist/commands/builtins.d.ts

@@ -126,6 +126,13 @@ export interface DrawCommandTarget {
     }>;
     /** The dry paint presets a stroke can be brushed with (loads the paint engine). */
     listBrushes(): Promise<CanvasBrushPreset[]>;
+    /** A node's box in canvas coordinates, so gestures can take `{ nodeId }` targets (without it they take boxes and points only). */
+    nodeBounds?(id: string): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | undefined;
 }
 export interface DrawCommandOptions {
     /** Id prefix (default `canvas.`). */
@@ -144,7 +151,10 @@ export declare function planFreehandPlayback(points: unknown, max?: number): Pla
 /**
  * Agent / palette commands for freehand drawing: `canvas.drawFreehand` (a pen or highlighter
  * stroke through given points, optionally brushed with a dry paint preset and a pressure / tilt
- * profile; one undo step) and the read-only `canvas.listBrushes` (the dry presets it accepts).
+ * profile; one undo step), the read-only `canvas.listBrushes` (the dry presets it accepts) and
+ * the annotation gestures `canvas.circle`, `canvas.underline`, `canvas.arrow`, `canvas.bracket`,
+ * `canvas.strike`, `canvas.cross` and `canvas.check` (hand-drawn marks around boxes, points or,
+ * when the target has `nodeBounds`, nodes).
  */
 export declare function createDrawCommands(target: DrawCommandTarget, options?: DrawCommandOptions): CommandSpec[];
 type ComponentActionResult = {