@trohde/agentic-canvas 0.1.0 → 0.2.0

package/dist/cli/index.js

@@ -20,12 +20,65 @@ function isElementEndpoint(endpoint) {
 }
 function cloneScene(scene) {
   return {
-    elements: scene.elements.map((element) => ({ ...element })),
+    elements: scene.elements.map(cloneElement),
     appState: { ...scene.appState },
     files: { ...scene.files },
     version: scene.version
   };
 }
+function cloneElement(element) {
+  return {
+    ...element,
+    groupIds: [...element.groupIds],
+    roundness: element.roundness ? { ...element.roundness } : null,
+    boundElements: element.boundElements ? element.boundElements.map((bound) => ({ ...bound })) : null,
+    points: element.points ? element.points.map(([x, y]) => [x, y]) : void 0,
+    startBinding: element.startBinding ? { ...element.startBinding } : element.startBinding,
+    endBinding: element.endBinding ? { ...element.endBinding } : element.endBinding,
+    lastCommittedPoint: element.lastCommittedPoint ? [element.lastCommittedPoint[0], element.lastCommittedPoint[1]] : element.lastCommittedPoint,
+    customData: element.customData ? { ...element.customData } : element.customData
+  };
+}
+
+// src/shared/colors.ts
+var NAMED_COLORS = /* @__PURE__ */ new Set([
+  "black",
+  "white",
+  "red",
+  "green",
+  "blue",
+  "yellow",
+  "orange",
+  "purple",
+  "pink",
+  "brown",
+  "gray",
+  "grey",
+  "cyan",
+  "magenta",
+  "lime",
+  "navy",
+  "teal",
+  "transparent"
+]);
+function isCanvasColor(value) {
+  const color = value.trim().toLowerCase();
+  if (NAMED_COLORS.has(color)) {
+    return true;
+  }
+  if (/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color)) {
+    return true;
+  }
+  if (/^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)$/i.test(color)) {
+    return true;
+  }
+  if (/^hsla?\(\s*-?\d+(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)$/i.test(
+    color
+  )) {
+    return true;
+  }
+  return false;
+}
 
 // src/plugins/excalidraw/adapter.ts
 var SUPPORTED_TYPES = /* @__PURE__ */ new Set([
@@ -106,6 +159,52 @@ function normalizeRoughness(roughness) {
 
 // src/plugins/excalidraw/elements.ts
 import { randomUUID } from "crypto";
+
+// src/plugins/excalidraw/textMetrics.ts
+var DEFAULT_FONT_SIZE = 20;
+var EXCALIDRAW_LINE_HEIGHT = 1.25;
+function measureTextBounds(text, style) {
+  const fontSize = style?.fontSize ?? DEFAULT_FONT_SIZE;
+  const lineHeight = fontSize * EXCALIDRAW_LINE_HEIGHT;
+  const lines = splitLines(text);
+  const widestLine = Math.max(...lines.map((line) => measureLineWidth(line, fontSize)), 0);
+  return {
+    width: Math.max(40, Math.ceil(widestLine)),
+    height: Math.max(lineHeight, Math.ceil(lines.length * lineHeight)),
+    fontSize,
+    lineHeight: EXCALIDRAW_LINE_HEIGHT
+  };
+}
+function splitLines(text) {
+  return text.split(/\r\n|\r|\n/);
+}
+function measureLineWidth(line, fontSize) {
+  let width = 0;
+  for (const character of line) {
+    width += fontSize * characterWeight(character);
+  }
+  return width;
+}
+function characterWeight(character) {
+  if (character === " " || character === "	") {
+    return 0.35;
+  }
+  if (/^[ilI.,:;|!']$/.test(character)) {
+    return 0.32;
+  }
+  if (/^[mwMW@#%&]$/.test(character)) {
+    return 0.9;
+  }
+  if (/^[A-Z0-9]$/.test(character)) {
+    return 0.68;
+  }
+  if ((character.codePointAt(0) ?? 0) > 11904) {
+    return 1;
+  }
+  return 0.58;
+}
+
+// src/plugins/excalidraw/elements.ts
 var DEFAULT_WIDTH = 160;
 var DEFAULT_HEIGHT = 80;
 var ORDER_KEY_DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
@@ -144,18 +243,20 @@ function buildElement(spec, options = {}) {
     locked: false
   };
   if (type === "text") {
+    const text = options.text ?? spec.text ?? "";
+    const bounds = measureTextBounds(text, spec.style);
     return {
       ...base,
-      width: spec.width ?? Math.max(40, (options.text ?? spec.text ?? "").length * 10),
-      height: spec.height ?? spec.style?.fontSize ?? 24,
-      text: options.text ?? spec.text ?? "",
-      originalText: options.text ?? spec.text ?? "",
-      fontSize: spec.style?.fontSize ?? 20,
+      width: spec.width ?? bounds.width,
+      height: spec.height ?? bounds.height,
+      text,
+      originalText: text,
+      fontSize: bounds.fontSize,
       fontFamily: 1,
       textAlign: spec.style?.textAlign ?? "center",
       verticalAlign: "middle",
       containerId: options.containerId ?? spec.containerId ?? null,
-      lineHeight: 1.25,
+      lineHeight: bounds.lineHeight,
       autoResize: true
     };
   }
@@ -339,9 +440,12 @@ var canvasObjectTypeSchema = z.enum([
   "text",
   "frame"
 ]);
+var colorSchema = z.string().refine(isCanvasColor, {
+  message: "Invalid canvas color"
+});
 var styleSchema = z.object({
-  strokeColor: z.string().optional(),
-  backgroundColor: z.string().optional(),
+  strokeColor: colorSchema.optional(),
+  backgroundColor: colorSchema.optional(),
   fillStyle: z.enum(["hachure", "cross-hatch", "solid"]).optional(),
   strokeWidth: z.union([z.literal(1), z.literal(2), z.literal(4)]).optional(),
   strokeStyle: z.enum(["solid", "dashed", "dotted"]).optional(),
@@ -355,13 +459,13 @@ var endpointSchema = z.union([
   z.object({ x: z.number(), y: z.number() })
 ]);
 var pointSchema = z.array(z.number()).length(2);
-var pointsSchema = z.array(pointSchema);
+var pointsSchema = z.array(pointSchema).min(2);
 var createObjectShape = {
   type: canvasObjectTypeSchema,
   x: z.number(),
   y: z.number(),
-  width: z.number().optional(),
-  height: z.number().optional(),
+  width: z.number().positive().optional(),
+  height: z.number().positive().optional(),
   text: z.string().optional(),
   points: pointsSchema.optional(),
   style: styleSchema.optional(),
@@ -374,8 +478,8 @@ var updateObjectShape = {
   id: z.string(),
   x: z.number().optional(),
   y: z.number().optional(),
-  width: z.number().optional(),
-  height: z.number().optional(),
+  width: z.number().positive().optional(),
+  height: z.number().positive().optional(),
   text: z.string().optional(),
   points: pointsSchema.optional(),
   style: styleSchema.optional(),
@@ -387,6 +491,7 @@ var updateObjectShape = {
 
 // src/plugins/excalidraw/flowchart.ts
 function planFlowchart(input) {
+  validateFlowchart(input);
   const direction = input.direction ?? "LR";
   const spacingX = input.spacingX ?? 220;
   const spacingY = input.spacingY ?? 140;
@@ -419,9 +524,10 @@ function planFlowchart(input) {
 }
 function assignLevels(input) {
   const nodeIds = new Set(input.nodes.map((node) => node.id));
+  const backEdges = findBackEdges(input);
   const indegrees = new Map(input.nodes.map((node) => [node.id, 0]));
   for (const edge of input.edges) {
-    if (nodeIds.has(edge.to)) {
+    if (nodeIds.has(edge.to) && !backEdges.has(edgeKey(edge))) {
       indegrees.set(edge.to, (indegrees.get(edge.to) ?? 0) + 1);
     }
   }
@@ -433,6 +539,9 @@ function assignLevels(input) {
   for (let pass = 0; pass < input.nodes.length; pass += 1) {
     let changed = false;
     for (const edge of input.edges) {
+      if (backEdges.has(edgeKey(edge))) {
+        continue;
+      }
       const fromLevel = levels.get(edge.from);
       if (fromLevel === void 0 || !nodeIds.has(edge.to)) {
         continue;
@@ -465,14 +574,62 @@ function groupLevels(nodes, levels) {
 function peerOffset(index, count, spacing) {
   return (index - (count - 1) / 2) * spacing;
 }
+function validateFlowchart(input) {
+  const nodeIds = /* @__PURE__ */ new Set();
+  for (const node of input.nodes) {
+    if (nodeIds.has(node.id)) {
+      throw new Error(`Duplicate flowchart node id: ${node.id}`);
+    }
+    nodeIds.add(node.id);
+  }
+  for (const edge of input.edges) {
+    if (!nodeIds.has(edge.from) || !nodeIds.has(edge.to)) {
+      throw new Error(`Flowchart edge references missing node: ${edge.from} -> ${edge.to}`);
+    }
+  }
+}
+function findBackEdges(input) {
+  const adjacency = /* @__PURE__ */ new Map();
+  for (const edge of input.edges) {
+    adjacency.set(edge.from, [...adjacency.get(edge.from) ?? [], edge]);
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const visiting = /* @__PURE__ */ new Set();
+  const backEdges = /* @__PURE__ */ new Set();
+  const visit = (nodeId) => {
+    if (visiting.has(nodeId)) {
+      return;
+    }
+    if (visited.has(nodeId)) {
+      return;
+    }
+    visiting.add(nodeId);
+    for (const edge of adjacency.get(nodeId) ?? []) {
+      if (visiting.has(edge.to)) {
+        backEdges.add(edgeKey(edge));
+        continue;
+      }
+      visit(edge.to);
+    }
+    visiting.delete(nodeId);
+    visited.add(nodeId);
+  };
+  for (const node of input.nodes) {
+    visit(node.id);
+  }
+  return backEdges;
+}
+function edgeKey(edge) {
+  return `${edge.from}\0${edge.to}`;
+}
 
 // src/plugins/excalidraw/tools.ts
 var shapeInput = {
   x: z2.number(),
   y: z2.number(),
-  width: z2.number(),
-  height: z2.number(),
-  text: z2.string().optional(),
+  width: z2.number().positive(),
+  height: z2.number().positive(),
+  text: z2.string().min(1).optional(),
   style: styleSchema.optional()
 };
 function registerExcalidrawTools(server, context) {
@@ -538,7 +695,7 @@ function registerExcalidrawTools(server, context) {
       inputSchema: {
         x: z2.number().optional(),
         y: z2.number().optional(),
-        text: z2.string(),
+        text: z2.string().min(1),
         containerId: z2.string().optional(),
         style: styleSchema.optional()
       }
@@ -567,9 +724,9 @@ function registerExcalidrawTools(server, context) {
       inputSchema: {
         x: z2.number(),
         y: z2.number(),
-        width: z2.number(),
-        height: z2.number(),
-        name: z2.string().optional(),
+        width: z2.number().positive(),
+        height: z2.number().positive(),
+        name: z2.string().min(1).optional(),
         childIds: z2.array(z2.string()).optional()
       }
     },
@@ -595,13 +752,51 @@ function registerExcalidrawTools(server, context) {
     "group_objects",
     {
       description: "Group existing Excalidraw elements.",
+      inputSchema: {
+        ids: z2.array(z2.string()).min(2)
+      }
+    },
+    async ({ ids }) => {
+      try {
+        return textResult(context.controller.mutateScene((scene) => groupElements(scene, ids)));
+      } catch (error) {
+        return errorResult(error);
+      }
+    }
+  );
+  server.registerTool(
+    "ungroup_objects",
+    {
+      description: "Remove one group, or all groups, from existing Excalidraw elements.",
+      inputSchema: {
+        ids: z2.array(z2.string()).min(1),
+        groupId: z2.string().optional()
+      }
+    },
+    async ({ ids, groupId }) => {
+      try {
+        return textResult(
+          context.controller.mutateScene((scene) => ungroupElements(scene, ids, groupId))
+        );
+      } catch (error) {
+        return errorResult(error);
+      }
+    }
+  );
+  server.registerTool(
+    "remove_from_frame",
+    {
+      description: "Clear the frame assignment from existing Excalidraw elements.",
       inputSchema: {
         ids: z2.array(z2.string()).min(1)
       }
     },
     async ({ ids }) => {
-      const groupId = context.controller.mutateScene((scene) => groupElements(scene, ids));
-      return textResult({ groupId });
+      try {
+        return textResult(context.controller.mutateScene((scene) => removeFromFrame(scene, ids)));
+      } catch (error) {
+        return errorResult(error);
+      }
     }
   );
   server.registerTool(
@@ -612,14 +807,14 @@ function registerExcalidrawTools(server, context) {
         nodes: z2.array(
           z2.object({
             id: z2.string(),
-            label: z2.string(),
+            label: z2.string().min(1),
             shape: z2.enum(["rectangle", "ellipse", "diamond"]).optional(),
             x: z2.number().optional(),
             y: z2.number().optional()
           })
         ).min(1),
         edges: z2.array(
-          z2.object({ from: z2.string(), to: z2.string(), label: z2.string().optional() })
+          z2.object({ from: z2.string(), to: z2.string(), label: z2.string().min(1).optional() })
         ),
         direction: z2.enum(["TB", "LR"]).optional(),
         spacingX: z2.number().positive().optional(),
@@ -730,8 +925,15 @@ function getObject(scene, id) {
   return element ? toCanvasObject(element) : void 0;
 }
 function createObject(scene, spec) {
+  validateCreateSpec(spec);
+  if (spec.containerId && !findElement(scene, spec.containerId)) {
+    throw new Error(`Object not found: ${spec.containerId}`);
+  }
   const element = buildElementWithBindings(scene, spec);
   scene.elements.push(element);
+  if (spec.type === "text" && spec.containerId) {
+    addBoundElementById(scene, spec.containerId, { id: element.id, type: "text" });
+  }
   if (spec.text && canCreateBoundLabel(spec.type)) {
     const label = createBoundLabel(element, spec.text, spec.style);
     scene.elements.push(label);
@@ -747,6 +949,7 @@ function updateObject(scene, id, patch) {
   if (!element) {
     return void 0;
   }
+  validateUpdatePatch(element, patch);
   if (patch.x !== void 0) {
     element.x = patch.x;
   }
@@ -772,25 +975,54 @@ function updateObject(scene, id, patch) {
   }
   if (patch.style) {
     applyStyle(element, patch.style);
+    if (element.type === "text") {
+      resizeTextElement(element);
+    } else {
+      applyTextStyleToBoundLabels(scene, element, patch.style);
+    }
   }
   if (patch.text !== void 0) {
     if (element.type === "text") {
       element.text = patch.text;
       element.originalText = patch.text;
+      resizeTextElement(element);
+      if (element.containerId) {
+        const container = findElement(scene, element.containerId);
+        if (container) {
+          relayoutBoundLabels(scene, container);
+        }
+      }
     } else {
       upsertContainerLabel(scene, element, patch.text, patch.style);
     }
   }
   touchElement(element);
+  syncBoundElements(scene, element);
   return toCanvasObject(element);
 }
 function deleteObjects(scene, ids) {
   const idSet = new Set(ids);
-  const before = scene.elements.length;
-  scene.elements = scene.elements.filter(
-    (element) => !idSet.has(element.id) && !idSet.has(element.containerId ?? "")
-  );
-  return before === scene.elements.length ? [] : ids.filter((id) => !findElement(scene, id));
+  const deleted = /* @__PURE__ */ new Set();
+  for (const element of scene.elements) {
+    if (idSet.has(element.id) || idSet.has(element.containerId ?? "")) {
+      deleted.add(element.id);
+    }
+  }
+  if (deleted.size === 0) {
+    return [];
+  }
+  scene.elements = scene.elements.filter((element) => !deleted.has(element.id));
+  for (const element of scene.elements) {
+    if (!element.boundElements) {
+      continue;
+    }
+    const kept = element.boundElements.filter((bound) => !deleted.has(bound.id));
+    if (kept.length !== element.boundElements.length) {
+      element.boundElements = kept.length > 0 ? kept : null;
+      touchElement(element);
+    }
+  }
+  return [...deleted];
 }
 function clear(scene) {
   scene.elements = [];
@@ -869,6 +1101,7 @@ function upsertContainerLabel(scene, container, text, style) {
     if (style) {
       applyStyle(existing, style);
     }
+    positionBoundLabel(existing, container);
     touchElement(existing);
     return;
   }
@@ -896,24 +1129,21 @@ function createBoundLabel(container, text, style) {
   return label;
 }
 function labelPosition(container, text, style) {
-  const fontSize = style.fontSize ?? 20;
-  const lineHeight = fontSize * 1.25;
+  const measured = measureTextBounds(text, style);
   if (isLinearElement(container)) {
     const midpoint = linearMidpoint(container);
-    const width = Math.max(40, text.length * fontSize * 0.6);
-    const height = lineHeight;
     return {
-      x: midpoint.x - width / 2,
-      y: midpoint.y - height / 2,
-      width,
-      height
+      x: midpoint.x - measured.width / 2,
+      y: midpoint.y - measured.height / 2,
+      width: measured.width,
+      height: measured.height
     };
   }
   return {
     x: container.x,
-    y: container.y + container.height / 2 - lineHeight / 2,
+    y: container.y + container.height / 2 - measured.height / 2,
     width: Math.max(40, container.width),
-    height: lineHeight
+    height: measured.height
   };
 }
 function isLinearElement(element) {
@@ -956,15 +1186,39 @@ function setFrameOnChildren(scene, childIds, frameId) {
   return updated;
 }
 function groupElements(scene, ids) {
+  const elements = resolveElements(scene, ids);
+  if (elements.length < 2) {
+    throw new Error("At least two existing objects are required to create a group");
+  }
   const groupId = randomUUID2();
-  for (const id of ids) {
-    const element = findElement(scene, id);
-    if (element && !element.groupIds.includes(groupId)) {
+  for (const element of elements) {
+    if (!element.groupIds.includes(groupId)) {
       element.groupIds = [...element.groupIds, groupId];
       touchElement(element);
     }
   }
-  return groupId;
+  return { groupId, ids: elements.map((element) => element.id) };
+}
+function ungroupElements(scene, ids, groupId) {
+  const elements = resolveElements(scene, ids);
+  for (const element of elements) {
+    const nextGroupIds = groupId ? element.groupIds.filter((candidate) => candidate !== groupId) : [];
+    if (nextGroupIds.length !== element.groupIds.length) {
+      element.groupIds = nextGroupIds;
+      touchElement(element);
+    }
+  }
+  return { ids: elements.map((element) => element.id), groupId };
+}
+function removeFromFrame(scene, ids) {
+  const elements = resolveElements(scene, ids);
+  for (const element of elements) {
+    if (element.frameId !== null) {
+      element.frameId = null;
+      touchElement(element);
+    }
+  }
+  return { ids: elements.map((element) => element.id) };
 }
 function applyStyle(element, style) {
   if (style.strokeColor !== void 0) {
@@ -989,13 +1243,184 @@ function applyStyle(element, style) {
     element.opacity = style.opacity;
   }
   if (style.fontSize !== void 0) {
+    if (element.type !== "text") {
+      return;
+    }
     element.fontSize = style.fontSize;
-    element.height = style.fontSize * 1.25;
   }
   if (style.textAlign !== void 0) {
+    if (element.type !== "text") {
+      return;
+    }
     element.textAlign = style.textAlign;
   }
 }
+function validateCreateSpec(spec) {
+  validateStyle(spec.style);
+  validateText(spec.type, spec.text);
+  validateDimensions(spec.type, spec.width, spec.height);
+  if ((spec.type === "line" || spec.type === "arrow") && spec.points) {
+    validateLinearPoints(spec.points);
+  }
+}
+function validateUpdatePatch(element, patch) {
+  validateStyle(patch.style);
+  validateText(element.type, patch.text);
+  validateDimensions(element.type, patch.width, patch.height);
+  if (patch.points) {
+    validateLinearPoints(patch.points);
+  }
+}
+function validateStyle(style) {
+  for (const [field, value] of [
+    ["strokeColor", style?.strokeColor],
+    ["backgroundColor", style?.backgroundColor]
+  ]) {
+    if (value !== void 0 && !isCanvasColor(value)) {
+      throw new Error(`Invalid ${field}: ${value}`);
+    }
+  }
+}
+function validateText(type, text) {
+  if (text !== void 0 && text.trim().length === 0 && type !== "frame") {
+    throw new Error("Text must not be empty");
+  }
+}
+function validateDimensions(type, width, height) {
+  if (type === "line" || type === "arrow" || type === "text") {
+    if (width !== void 0 && height !== void 0 && width === 0 && height === 0) {
+      throw new Error("Linear geometry must not be zero length");
+    }
+    return;
+  }
+  if (width !== void 0 && width <= 0) {
+    throw new Error("Width must be greater than zero");
+  }
+  if (height !== void 0 && height <= 0) {
+    throw new Error("Height must be greater than zero");
+  }
+}
+function validateLinearPoints(points) {
+  if (points.length < 2) {
+    throw new Error("Line and arrow points must contain at least two points");
+  }
+  const [firstX, firstY] = points[0] ?? [0, 0];
+  if (points.every(([x, y]) => x === firstX && y === firstY)) {
+    throw new Error("Line and arrow points must not be zero length");
+  }
+}
+function resizeTextElement(element) {
+  const bounds = measureTextBounds(element.text ?? "", styleFromElement(element));
+  element.width = bounds.width;
+  element.height = bounds.height;
+  element.fontSize = bounds.fontSize;
+  element.lineHeight = bounds.lineHeight;
+}
+function syncBoundElements(scene, element) {
+  relayoutBoundLabels(scene, element);
+  rerouteBoundArrows(scene, element);
+}
+function relayoutBoundLabels(scene, container) {
+  for (const label of scene.elements.filter(
+    (candidate) => candidate.type === "text" && candidate.containerId === container.id
+  )) {
+    positionBoundLabel(label, container);
+    touchElement(label);
+  }
+}
+function applyTextStyleToBoundLabels(scene, container, style) {
+  if (style.fontSize === void 0 && style.textAlign === void 0) {
+    return;
+  }
+  for (const label of scene.elements.filter(
+    (candidate) => candidate.type === "text" && candidate.containerId === container.id
+  )) {
+    applyStyle(label, {
+      fontSize: style.fontSize,
+      textAlign: style.textAlign
+    });
+    resizeTextElement(label);
+    positionBoundLabel(label, container);
+    touchElement(label);
+  }
+}
+function positionBoundLabel(label, container) {
+  const position = labelPosition(container, label.text ?? "", styleFromElement(label));
+  label.x = position.x;
+  label.y = position.y;
+  label.width = position.width;
+  label.height = position.height;
+  label.autoResize = false;
+}
+function rerouteBoundArrows(scene, changedElement) {
+  const arrowIds = new Set(
+    (changedElement.boundElements ?? []).filter((bound) => bound.type === "arrow").map((bound) => bound.id)
+  );
+  for (const candidate of scene.elements) {
+    if (isLinearElement(candidate) && (candidate.startBinding?.elementId === changedElement.id || candidate.endBinding?.elementId === changedElement.id)) {
+      arrowIds.add(candidate.id);
+    }
+  }
+  for (const arrowId of arrowIds) {
+    const arrow = findElement(scene, arrowId);
+    if (!arrow || !isLinearElement(arrow)) {
+      continue;
+    }
+    rerouteArrow(scene, arrow);
+    relayoutBoundLabels(scene, arrow);
+  }
+}
+function rerouteArrow(scene, arrow) {
+  const startTarget = arrow.startBinding ? findElement(scene, arrow.startBinding.elementId) : void 0;
+  const endTarget = arrow.endBinding ? findElement(scene, arrow.endBinding.elementId) : void 0;
+  if (!startTarget && !endTarget) {
+    return;
+  }
+  const currentStart = absoluteStartPoint(arrow);
+  const currentEnd = absoluteEndPoint(arrow);
+  const startReference = endTarget ? centerPoint(endTarget) : currentEnd;
+  const endReference = startTarget ? centerPoint(startTarget) : currentStart;
+  const startPoint = startTarget ? edgePoint(startTarget, startReference.x, startReference.y) : currentStart;
+  const endPoint = endTarget ? edgePoint(endTarget, endReference.x, endReference.y) : currentEnd;
+  arrow.x = startPoint.x;
+  arrow.y = startPoint.y;
+  arrow.points = [
+    [0, 0],
+    [endPoint.x - startPoint.x, endPoint.y - startPoint.y]
+  ];
+  arrow.width = linearWidth2(arrow.points);
+  arrow.height = linearHeight2(arrow.points);
+  touchElement(arrow);
+}
+function absoluteStartPoint(element) {
+  const first = element.points?.[0] ?? [0, 0];
+  return { x: element.x + first[0], y: element.y + first[1] };
+}
+function absoluteEndPoint(element) {
+  const points = element.points ?? [[0, 0]];
+  const last = points[points.length - 1] ?? [0, 0];
+  return { x: element.x + last[0], y: element.y + last[1] };
+}
+function styleFromElement(element) {
+  return {
+    strokeColor: element.strokeColor,
+    backgroundColor: element.backgroundColor,
+    fillStyle: element.fillStyle,
+    strokeWidth: element.strokeWidth,
+    strokeStyle: element.strokeStyle,
+    roughness: element.roughness,
+    opacity: element.opacity,
+    fontSize: element.fontSize,
+    textAlign: element.textAlign
+  };
+}
+function resolveElements(scene, ids) {
+  const missingIds = ids.filter((id) => !findElement(scene, id));
+  if (missingIds.length > 0) {
+    throw new Error(`Object not found: ${missingIds.join(", ")}`);
+  }
+  return ids.map((id) => findElement(scene, id)).filter((element) => Boolean(element));
+}
 function linearWidth2(points) {
   const xs = points.map(([x]) => x);
   return Math.max(...xs) - Math.min(...xs);
@@ -1132,6 +1557,21 @@ function registerBaselineTools(server, context) {
       }
     }
   );
+  server.registerTool(
+    "set_canvas_background",
+    {
+      description: "Set the canvas background color.",
+      inputSchema: {
+        color: colorSchema
+      }
+    },
+    async ({ color }) => {
+      context.controller.mutateScene((scene) => {
+        scene.appState.viewBackgroundColor = color;
+      });
+      return textResult2({ viewBackgroundColor: color });
+    }
+  );
   server.registerTool(
     "open_canvas",
     {
@@ -1209,6 +1649,57 @@ function registerBaselineTools(server, context) {
       }
     }
   );
+  server.registerTool(
+    "select_objects",
+    {
+      description: "Select existing objects in the connected browser.",
+      inputSchema: {
+        ids: z3.array(z3.string())
+      }
+    },
+    async ({ ids }) => {
+      try {
+        const selectedIds = [];
+        const missingIds = [];
+        for (const id of ids) {
+          if (context.controller.getObject(id)) {
+            selectedIds.push(id);
+          } else {
+            missingIds.push(id);
+          }
+        }
+        const result = await context.requestSetSelection(selectedIds);
+        return textResult2({
+          selectedIds: result.selectedIds,
+          missingIds
+        });
+      } catch (error) {
+        return errorResult2(error);
+      }
+    }
+  );
+  server.registerTool(
+    "undo",
+    {
+      description: "Undo the most recent authoritative scene change.",
+      inputSchema: {}
+    },
+    async () => {
+      const undone = context.controller.undo();
+      return textResult2({ version: context.controller.currentVersion(), undone });
+    }
+  );
+  server.registerTool(
+    "redo",
+    {
+      description: "Redo the most recently undone authoritative scene change.",
+      inputSchema: {}
+    },
+    async () => {
+      const redone = context.controller.redo();
+      return textResult2({ version: context.controller.currentVersion(), redone });
+    }
+  );
 }
 function textResult2(value) {
   return {
@@ -1241,7 +1732,8 @@ function buildMcpServer(options) {
     workspace: options.workspace,
     clientsConnected: options.clientsConnected,
     requestExport: options.requestExport,
-    requestSelection: options.requestSelection
+    requestSelection: options.requestSelection,
+    requestSetSelection: options.requestSetSelection
   });
   options.plugin.registerTools(server, {
     controller: options.controller
@@ -1356,6 +1848,10 @@ var CanvasController = class {
   txDepth = 0;
   txDirty = false;
   txOrigin;
+  txSnapshot;
+  undoStack = [];
+  redoStack = [];
+  maxHistory = 50;
   get canvasName() {
     return this.plugin.name;
   }
@@ -1404,12 +1900,17 @@ var CanvasController = class {
     return JSON.stringify(this.plugin.serialize(this.scene), null, 2);
   }
   deserialize(raw) {
+    const before = cloneScene(this.scene);
     const currentVersion = this.scene.version;
     this.scene = this.plugin.deserialize(raw);
     this.scene.version = currentVersion;
+    this.pushUndo(before);
+    this.redoStack.length = 0;
     this.bumpAndNotify();
   }
   replaceFromBrowser(elements, appState, files, origin) {
+    this.pushUndo(cloneScene(this.scene));
+    this.redoStack.length = 0;
     this.scene.elements = elements;
     this.scene.appState = {
       viewBackgroundColor: appState?.viewBackgroundColor ?? this.scene.appState.viewBackgroundColor
@@ -1418,24 +1919,73 @@ var CanvasController = class {
     this.bumpAndNotify(origin);
   }
   mutateScene(mutator, origin) {
+    if (this.txDepth > 0) {
+      const result2 = mutator(this.scene);
+      this.bumpAndNotify(origin);
+      return result2;
+    }
+    const before = cloneScene(this.scene);
     const result = mutator(this.scene);
+    this.pushUndo(before);
+    this.redoStack.length = 0;
     this.bumpAndNotify(origin);
     return result;
   }
   transaction(fn, origin) {
+    const isOuterTransaction = this.txDepth === 0;
+    if (isOuterTransaction) {
+      this.txSnapshot = cloneScene(this.scene);
+    }
     this.txDepth += 1;
+    let failed = false;
     try {
       return fn();
+    } catch (error) {
+      failed = true;
+      if (isOuterTransaction && this.txSnapshot) {
+        this.scene = this.txSnapshot;
+        this.txDirty = false;
+        this.txOrigin = void 0;
+      }
+      throw error;
     } finally {
       this.txDepth -= 1;
-      if (this.txDepth === 0 && this.txDirty) {
+      if (this.txDepth === 0 && failed) {
+        this.txSnapshot = void 0;
+      } else if (this.txDepth === 0 && this.txDirty) {
         const txOrigin = this.txOrigin;
+        const snapshot = this.txSnapshot;
         this.txDirty = false;
         this.txOrigin = void 0;
+        this.txSnapshot = void 0;
+        if (snapshot) {
+          this.pushUndo(snapshot);
+          this.redoStack.length = 0;
+        }
         this.commit(txOrigin ?? origin);
+      } else if (this.txDepth === 0) {
+        this.txSnapshot = void 0;
       }
     }
   }
+  undo() {
+    const previous = this.undoStack.pop();
+    if (!previous) {
+      return false;
+    }
+    this.redoStack.push(cloneScene(this.scene));
+    this.restoreScene(previous);
+    return true;
+  }
+  redo() {
+    const next = this.redoStack.pop();
+    if (!next) {
+      return false;
+    }
+    this.undoStack.push(cloneScene(this.scene));
+    this.restoreScene(next);
+    return true;
+  }
   bumpAndNotify(origin) {
     if (this.txDepth > 0) {
       this.txDirty = true;
@@ -1448,6 +1998,18 @@ var CanvasController = class {
     this.scene.version += 1;
     this.listener?.(this.getSnapshot(), origin);
   }
+  pushUndo(scene) {
+    this.undoStack.push(cloneScene(scene));
+    if (this.undoStack.length > this.maxHistory) {
+      this.undoStack.shift();
+    }
+  }
+  restoreScene(scene) {
+    const currentVersion = this.scene.version;
+    this.scene = cloneScene(scene);
+    this.scene.version = currentVersion;
+    this.commit();
+  }
 };
 
 // src/server/workspace.ts
@@ -1520,6 +2082,7 @@ var WsBridge = class {
   clients = /* @__PURE__ */ new Map();
   pendingExports = /* @__PURE__ */ new Map();
   pendingSelections = /* @__PURE__ */ new Map();
+  pendingSelectionSets = /* @__PURE__ */ new Map();
   syncOrder = 0;
   wss;
   attach(server, path5 = "/ws") {
@@ -1588,6 +2151,31 @@ var WsBridge = class {
       client.socket.send(JSON.stringify(request));
     });
   }
+  requestSetSelection(selectedIds, options = {}) {
+    const client = this.mostRecentlySyncedClient((candidate) => candidate.supportsSelectionSet);
+    if (!client) {
+      if (this.connectedClientCount() > 0) {
+        return Promise.reject(
+          new Error("No browser canvas client supports programmatic selection")
+        );
+      }
+      return Promise.reject(new Error("No browser canvas client is connected"));
+    }
+    const id = randomUUID4();
+    const request = {
+      type: "selection:set",
+      id,
+      selectedIds
+    };
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.pendingSelectionSets.delete(id);
+        reject(new Error("Selection set timed out"));
+      }, options.timeoutMs ?? 5e3);
+      this.pendingSelectionSets.set(id, { resolve, reject, timer });
+      client.socket.send(JSON.stringify(request));
+    });
+  }
   close() {
     for (const { socket } of this.clients.values()) {
       socket.close();
@@ -1598,7 +2186,8 @@ var WsBridge = class {
     this.clients.set(socket, {
       socket,
       lastSyncedOrder: 0,
-      lastSyncedVersion: -1
+      lastSyncedVersion: -1,
+      supportsSelectionSet: false
     });
     socket.on("message", (data) => this.handleMessage(socket, data.toString()));
     socket.on("close", () => {
@@ -1612,6 +2201,10 @@ var WsBridge = class {
       return;
     }
     if (message.type === "hello") {
+      const client = this.clients.get(socket);
+      if (client) {
+        client.supportsSelectionSet = Boolean(message.capabilities?.selectionSet);
+      }
       this.sendScene(socket, this.controller.getSnapshot());
       return;
     }
@@ -1655,6 +2248,20 @@ var WsBridge = class {
       } else {
         pending.reject(new Error(message.message));
       }
+      return;
+    }
+    if (message.type === "selection:set:result" || message.type === "selection:set:error") {
+      const pending = this.pendingSelectionSets.get(message.id);
+      if (!pending) {
+        return;
+      }
+      clearTimeout(pending.timer);
+      this.pendingSelectionSets.delete(message.id);
+      if (message.type === "selection:set:result") {
+        pending.resolve({ selectedIds: message.selectedIds });
+      } else {
+        pending.reject(new Error(message.message));
+      }
     }
   }
   sendScene(socket, snapshot) {
@@ -1680,8 +2287,8 @@ var WsBridge = class {
     client.lastSyncedOrder = ++this.syncOrder;
     client.lastSyncedVersion = version;
   }
-  mostRecentlySyncedClient() {
-    return [...this.clients.values()].filter((candidate) => candidate.socket.readyState === WebSocket.OPEN).sort((left, right) => right.lastSyncedOrder - left.lastSyncedOrder)[0];
+  mostRecentlySyncedClient(predicate = () => true) {
+    return [...this.clients.values()].filter((candidate) => candidate.socket.readyState === WebSocket.OPEN && predicate(candidate)).sort((left, right) => right.lastSyncedOrder - left.lastSyncedOrder)[0];
   }
 };
 
@@ -1702,7 +2309,8 @@ async function startHttpServer(options) {
     allowedHosts: allowedHostsFor(options.host, port),
     clientsConnected: () => bridge.connectedClientCount(),
     requestExport: (exportOptions) => bridge.requestExport(exportOptions),
-    requestSelection: (selectionOptions) => bridge.requestSelection(selectionOptions)
+    requestSelection: (selectionOptions) => bridge.requestSelection(selectionOptions),
+    requestSetSelection: (selectedIds, selectionOptions) => bridge.requestSetSelection(selectedIds, selectionOptions)
   });
   const server = createServer(app);
   bridge.attach(server);