@trohde/agentic-canvas 0.1.0

package/dist/cli/index.js

@@ -0,0 +1,1873 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { parseArgs } from "util";
+import open from "open";
+
+// src/server/httpServer.ts
+import { existsSync } from "fs";
+import { createServer } from "http";
+import net from "net";
+import path4 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+
+// src/plugins/excalidraw/index.ts
+import { randomUUID as randomUUID2 } from "crypto";
+
+// src/core/scene.ts
+function isElementEndpoint(endpoint) {
+  return "elementId" in endpoint;
+}
+function cloneScene(scene) {
+  return {
+    elements: scene.elements.map((element) => ({ ...element })),
+    appState: { ...scene.appState },
+    files: { ...scene.files },
+    version: scene.version
+  };
+}
+
+// src/plugins/excalidraw/adapter.ts
+var SUPPORTED_TYPES = /* @__PURE__ */ new Set([
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "line",
+  "arrow",
+  "text",
+  "frame"
+]);
+function isSupportedElement(element) {
+  return SUPPORTED_TYPES.has(element.type) && !element.isDeleted;
+}
+function toCanvasObject(element) {
+  if (!isSupportedElement(element)) {
+    return void 0;
+  }
+  return {
+    id: element.id,
+    type: element.type,
+    x: element.x,
+    y: element.y,
+    width: element.width,
+    height: element.height,
+    text: element.text,
+    points: element.points,
+    style: {
+      strokeColor: element.strokeColor,
+      backgroundColor: element.backgroundColor,
+      fillStyle: normalizeFillStyle(element.fillStyle),
+      strokeWidth: normalizeStrokeWidth(element.strokeWidth),
+      strokeStyle: element.strokeStyle,
+      roughness: normalizeRoughness(element.roughness),
+      opacity: element.opacity,
+      fontSize: element.fontSize,
+      textAlign: element.textAlign
+    },
+    containerId: element.containerId ?? void 0,
+    groupIds: element.groupIds,
+    frameId: element.frameId,
+    raw: element
+  };
+}
+function toCanvasObjectSummary(element) {
+  const object = toCanvasObject(element);
+  if (!object) {
+    return void 0;
+  }
+  return {
+    id: object.id,
+    type: object.type,
+    x: object.x,
+    y: object.y,
+    width: object.width,
+    height: object.height,
+    text: object.text
+  };
+}
+function normalizeStrokeWidth(width) {
+  if (width === 1 || width === 4) {
+    return width;
+  }
+  return 2;
+}
+function normalizeFillStyle(fillStyle) {
+  if (fillStyle === "hachure" || fillStyle === "cross-hatch") {
+    return fillStyle;
+  }
+  return "solid";
+}
+function normalizeRoughness(roughness) {
+  if (roughness === 0 || roughness === 2) {
+    return roughness;
+  }
+  return 1;
+}
+
+// src/plugins/excalidraw/elements.ts
+import { randomUUID } from "crypto";
+var DEFAULT_WIDTH = 160;
+var DEFAULT_HEIGHT = 80;
+var ORDER_KEY_DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var elementIndexCounter = 0;
+function buildElement(spec, options = {}) {
+  const type = spec.type;
+  const width = spec.width ?? defaultWidth(type);
+  const height = spec.height ?? defaultHeight(type);
+  const points = spec.points ?? defaultPoints(type, width, height);
+  const base = {
+    id: options.id ?? randomUUID(),
+    index: nextElementIndex(),
+    type,
+    x: spec.x,
+    y: spec.y,
+    width,
+    height,
+    angle: 0,
+    strokeColor: spec.style?.strokeColor ?? "#1e1e1e",
+    backgroundColor: spec.style?.backgroundColor ?? "transparent",
+    fillStyle: spec.style?.fillStyle ?? "solid",
+    strokeWidth: spec.style?.strokeWidth ?? 2,
+    strokeStyle: spec.style?.strokeStyle ?? "solid",
+    roughness: spec.style?.roughness ?? 1,
+    opacity: spec.style?.opacity ?? 100,
+    groupIds: options.groupIds ?? spec.groupIds ?? [],
+    frameId: options.frameId ?? null,
+    roundness: roundnessFor(type),
+    seed: randomInt31(),
+    version: 1,
+    versionNonce: randomInt31(),
+    isDeleted: false,
+    boundElements: options.boundElements ?? null,
+    updated: Date.now(),
+    link: null,
+    locked: false
+  };
+  if (type === "text") {
+    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,
+      fontFamily: 1,
+      textAlign: spec.style?.textAlign ?? "center",
+      verticalAlign: "middle",
+      containerId: options.containerId ?? spec.containerId ?? null,
+      lineHeight: 1.25,
+      autoResize: true
+    };
+  }
+  if (type === "line" || type === "arrow") {
+    return {
+      ...base,
+      points,
+      width: linearWidth(points),
+      height: linearHeight(points),
+      lastCommittedPoint: null,
+      startBinding: options.startBinding ?? null,
+      endBinding: options.endBinding ?? null,
+      startArrowhead: null,
+      endArrowhead: type === "arrow" ? "arrow" : null
+    };
+  }
+  if (type === "frame") {
+    return {
+      ...base,
+      backgroundColor: spec.style?.backgroundColor ?? "transparent",
+      name: options.name ?? spec.text ?? null
+    };
+  }
+  return base;
+}
+function makeBinding(elementId) {
+  return { elementId, focus: 0, gap: 0 };
+}
+function addBoundElement(target, bound) {
+  const current = target.boundElements ?? [];
+  if (!current.some((entry) => entry.id === bound.id)) {
+    target.boundElements = [...current, bound];
+    touchElement(target);
+  }
+}
+function touchElement(element) {
+  element.version += 1;
+  element.versionNonce = randomInt31();
+  element.updated = Date.now();
+}
+function defaultWidth(type) {
+  return type === "text" ? 80 : DEFAULT_WIDTH;
+}
+function defaultHeight(type) {
+  return type === "text" ? 24 : DEFAULT_HEIGHT;
+}
+function defaultPoints(type, width, height) {
+  if (type === "line" || type === "arrow") {
+    return [
+      [0, 0],
+      [width, height]
+    ];
+  }
+  return [];
+}
+function linearWidth(points) {
+  const xs = points.map(([x]) => x);
+  return Math.max(...xs) - Math.min(...xs);
+}
+function linearHeight(points) {
+  const ys = points.map(([, y]) => y);
+  return Math.max(...ys) - Math.min(...ys);
+}
+function roundnessFor(type) {
+  if (type === "rectangle" || type === "diamond") {
+    return { type: 3 };
+  }
+  return null;
+}
+function randomInt31() {
+  return Math.floor(Math.random() * 2147483647);
+}
+function nextElementIndex() {
+  return orderKeyForInteger(elementIndexCounter++);
+}
+function orderKeyForInteger(value) {
+  let remaining = value;
+  for (let width = 1; width <= 26; width += 1) {
+    const capacity = ORDER_KEY_DIGITS.length ** width;
+    if (remaining < capacity) {
+      return `${String.fromCharCode("a".charCodeAt(0) + width - 1)}${encodeOrderDigits(
+        remaining,
+        width
+      )}`;
+    }
+    remaining -= capacity;
+  }
+  throw new Error("Element order key range exhausted");
+}
+function encodeOrderDigits(value, width) {
+  let encoded = "";
+  let remaining = value;
+  for (let index = 0; index < width; index += 1) {
+    encoded = ORDER_KEY_DIGITS[remaining % ORDER_KEY_DIGITS.length] + encoded;
+    remaining = Math.floor(remaining / ORDER_KEY_DIGITS.length);
+  }
+  return encoded;
+}
+
+// src/plugins/excalidraw/format.ts
+function serializeScene(scene) {
+  return {
+    type: "excalidraw",
+    version: 2,
+    source: "agentic-canvas",
+    elements: scene.elements,
+    appState: {
+      viewBackgroundColor: scene.appState.viewBackgroundColor
+    },
+    files: scene.files
+  };
+}
+function deserializeScene(raw) {
+  const parsed = JSON.parse(raw);
+  if (parsed.type !== "excalidraw" || !Array.isArray(parsed.elements)) {
+    throw new Error("Invalid .excalidraw file");
+  }
+  return {
+    elements: parsed.elements,
+    appState: {
+      viewBackgroundColor: parsed.appState?.viewBackgroundColor ?? "#ffffff"
+    },
+    files: parsed.files ?? {},
+    version: 0
+  };
+}
+
+// src/plugins/excalidraw/geometry.ts
+function centerPoint(element) {
+  return {
+    x: element.x + element.width / 2,
+    y: element.y + element.height / 2
+  };
+}
+function edgePoint(element, towardX, towardY) {
+  const center = centerPoint(element);
+  const dx = towardX - center.x;
+  const dy = towardY - center.y;
+  if (dx === 0 && dy === 0) {
+    return center;
+  }
+  const halfWidth = element.width / 2;
+  const halfHeight = element.height / 2;
+  if (halfWidth <= 0 || halfHeight <= 0) {
+    return center;
+  }
+  if (element.type === "ellipse") {
+    const scale2 = 1 / Math.sqrt(dx * dx / (halfWidth * halfWidth) + dy * dy / (halfHeight * halfHeight));
+    return {
+      x: center.x + dx * scale2,
+      y: center.y + dy * scale2
+    };
+  }
+  if (element.type === "diamond") {
+    const scale2 = 1 / (Math.abs(dx) / halfWidth + Math.abs(dy) / halfHeight);
+    return {
+      x: center.x + dx * scale2,
+      y: center.y + dy * scale2
+    };
+  }
+  const xScale = dx === 0 ? Number.POSITIVE_INFINITY : halfWidth / Math.abs(dx);
+  const yScale = dy === 0 ? Number.POSITIVE_INFINITY : halfHeight / Math.abs(dy);
+  const scale = Math.min(xScale, yScale);
+  return {
+    x: center.x + dx * scale,
+    y: center.y + dy * scale
+  };
+}
+
+// src/plugins/excalidraw/tools.ts
+import { z as z2 } from "zod";
+
+// src/mcp/schemas.ts
+import { z } from "zod";
+var canvasObjectTypeSchema = z.enum([
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "line",
+  "arrow",
+  "text",
+  "frame"
+]);
+var styleSchema = z.object({
+  strokeColor: z.string().optional(),
+  backgroundColor: z.string().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(),
+  roughness: z.union([z.literal(0), z.literal(1), z.literal(2)]).optional(),
+  opacity: z.number().min(0).max(100).optional(),
+  fontSize: z.number().positive().optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional()
+});
+var endpointSchema = z.union([
+  z.object({ elementId: z.string() }),
+  z.object({ x: z.number(), y: z.number() })
+]);
+var pointSchema = z.array(z.number()).length(2);
+var pointsSchema = z.array(pointSchema);
+var createObjectShape = {
+  type: canvasObjectTypeSchema,
+  x: z.number(),
+  y: z.number(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  text: z.string().optional(),
+  points: pointsSchema.optional(),
+  style: styleSchema.optional(),
+  start: endpointSchema.optional(),
+  end: endpointSchema.optional(),
+  containerId: z.string().optional(),
+  groupIds: z.array(z.string()).optional()
+};
+var updateObjectShape = {
+  id: z.string(),
+  x: z.number().optional(),
+  y: z.number().optional(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  text: z.string().optional(),
+  points: pointsSchema.optional(),
+  style: styleSchema.optional(),
+  start: endpointSchema.optional(),
+  end: endpointSchema.optional(),
+  containerId: z.string().optional(),
+  groupIds: z.array(z.string()).optional()
+};
+
+// src/plugins/excalidraw/flowchart.ts
+function planFlowchart(input) {
+  const direction = input.direction ?? "LR";
+  const spacingX = input.spacingX ?? 220;
+  const spacingY = input.spacingY ?? 140;
+  const levels = assignLevels(input);
+  const levelGroups = groupLevels(input.nodes, levels);
+  return {
+    nodes: input.nodes.map((node, index) => {
+      const level = levels.get(node.id) ?? index;
+      const peers = levelGroups.get(level) ?? [node.id];
+      const peerIndex = Math.max(0, peers.indexOf(node.id));
+      const crossAxisOffset = peerOffset(
+        peerIndex,
+        peers.length,
+        direction === "LR" ? spacingY : spacingX
+      );
+      return {
+        key: node.id,
+        spec: {
+          type: node.shape ?? "rectangle",
+          x: node.x ?? (direction === "LR" ? level * spacingX : crossAxisOffset),
+          y: node.y ?? (direction === "TB" ? level * spacingY : crossAxisOffset),
+          width: 160,
+          height: 60,
+          text: node.label
+        }
+      };
+    }),
+    edges: input.edges
+  };
+}
+function assignLevels(input) {
+  const nodeIds = new Set(input.nodes.map((node) => node.id));
+  const indegrees = new Map(input.nodes.map((node) => [node.id, 0]));
+  for (const edge of input.edges) {
+    if (nodeIds.has(edge.to)) {
+      indegrees.set(edge.to, (indegrees.get(edge.to) ?? 0) + 1);
+    }
+  }
+  const roots = input.nodes.filter((node) => (indegrees.get(node.id) ?? 0) === 0);
+  const levels = /* @__PURE__ */ new Map();
+  for (const root of roots.length > 0 ? roots : input.nodes.slice(0, 1)) {
+    levels.set(root.id, 0);
+  }
+  for (let pass = 0; pass < input.nodes.length; pass += 1) {
+    let changed = false;
+    for (const edge of input.edges) {
+      const fromLevel = levels.get(edge.from);
+      if (fromLevel === void 0 || !nodeIds.has(edge.to)) {
+        continue;
+      }
+      const nextLevel = fromLevel + 1;
+      if ((levels.get(edge.to) ?? -1) < nextLevel) {
+        levels.set(edge.to, nextLevel);
+        changed = true;
+      }
+    }
+    if (!changed) {
+      break;
+    }
+  }
+  for (const [index, node] of input.nodes.entries()) {
+    if (!levels.has(node.id)) {
+      levels.set(node.id, index);
+    }
+  }
+  return levels;
+}
+function groupLevels(nodes, levels) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const level = levels.get(node.id) ?? 0;
+    groups.set(level, [...groups.get(level) ?? [], node.id]);
+  }
+  return groups;
+}
+function peerOffset(index, count, spacing) {
+  return (index - (count - 1) / 2) * spacing;
+}
+
+// src/plugins/excalidraw/tools.ts
+var shapeInput = {
+  x: z2.number(),
+  y: z2.number(),
+  width: z2.number(),
+  height: z2.number(),
+  text: z2.string().optional(),
+  style: styleSchema.optional()
+};
+function registerExcalidrawTools(server, context) {
+  registerShapeTool(server, context, "draw_rectangle", "rectangle");
+  registerShapeTool(server, context, "draw_ellipse", "ellipse");
+  registerShapeTool(server, context, "draw_diamond", "diamond");
+  server.registerTool(
+    "draw_line",
+    {
+      description: "Draw an Excalidraw polyline.",
+      inputSchema: {
+        x: z2.number(),
+        y: z2.number(),
+        points: pointsSchema.min(2),
+        style: styleSchema.optional()
+      }
+    },
+    async ({ x, y, points, style }) => {
+      const object = context.controller.createObject({
+        type: "line",
+        x,
+        y,
+        points,
+        style
+      });
+      return textResult({ id: object.id });
+    }
+  );
+  server.registerTool(
+    "draw_arrow",
+    {
+      description: "Draw an Excalidraw arrow, optionally bound to existing elements.",
+      inputSchema: {
+        start: endpointSchema,
+        end: endpointSchema,
+        text: z2.string().optional(),
+        style: styleSchema.optional()
+      }
+    },
+    async ({ start, end, text, style }) => {
+      try {
+        const id = context.controller.transaction(
+          () => context.controller.createObject({
+            type: "arrow",
+            x: "x" in start ? start.x : 0,
+            y: "y" in start ? start.y : 0,
+            start,
+            end,
+            text,
+            style
+          }).id
+        );
+        return textResult({ id });
+      } catch (error) {
+        return errorResult(error);
+      }
+    }
+  );
+  server.registerTool(
+    "add_text",
+    {
+      description: "Add standalone text or a label bound to a container element.",
+      inputSchema: {
+        x: z2.number().optional(),
+        y: z2.number().optional(),
+        text: z2.string(),
+        containerId: z2.string().optional(),
+        style: styleSchema.optional()
+      }
+    },
+    async ({ x, y, text, containerId, style }) => {
+      const container = containerId ? context.controller.getObject(containerId) : void 0;
+      if (containerId && !container) {
+        return errorResult(`Object not found: ${containerId}`);
+      }
+      const object = context.controller.createObject({
+        type: "text",
+        x: x ?? (container ? container.x + 12 : 0),
+        y: y ?? (container ? container.y + container.height / 2 - 12 : 0),
+        width: container ? Math.max(40, container.width - 24) : void 0,
+        text,
+        containerId,
+        style
+      });
+      return textResult({ id: object.id });
+    }
+  );
+  server.registerTool(
+    "create_frame",
+    {
+      description: "Create a frame and optionally assign existing elements to it.",
+      inputSchema: {
+        x: z2.number(),
+        y: z2.number(),
+        width: z2.number(),
+        height: z2.number(),
+        name: z2.string().optional(),
+        childIds: z2.array(z2.string()).optional()
+      }
+    },
+    async ({ x, y, width, height, name, childIds }) => {
+      const result = context.controller.transaction(() => {
+        const frame = context.controller.createObject({
+          type: "frame",
+          x,
+          y,
+          width,
+          height,
+          text: name
+        });
+        const updated = context.controller.mutateScene(
+          (scene) => setFrameOnChildren(scene, childIds ?? [], frame.id)
+        );
+        return { id: frame.id, childIds: updated };
+      });
+      return textResult(result);
+    }
+  );
+  server.registerTool(
+    "group_objects",
+    {
+      description: "Group 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 });
+    }
+  );
+  server.registerTool(
+    "create_flowchart",
+    {
+      description: "Create a simple deterministic flowchart.",
+      inputSchema: {
+        nodes: z2.array(
+          z2.object({
+            id: z2.string(),
+            label: z2.string(),
+            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() })
+        ),
+        direction: z2.enum(["TB", "LR"]).optional(),
+        spacingX: z2.number().positive().optional(),
+        spacingY: z2.number().positive().optional()
+      }
+    },
+    async (input) => {
+      try {
+        const plan = planFlowchart(input);
+        const result = context.controller.transaction(() => {
+          const nodeIds = {};
+          for (const node of plan.nodes) {
+            const object = context.controller.createObject(node.spec);
+            nodeIds[node.key] = object.id;
+          }
+          const arrowIds = [];
+          for (const edge of plan.edges) {
+            const from = nodeIds[edge.from];
+            const to = nodeIds[edge.to];
+            if (!from || !to) {
+              throw new Error(`Flowchart edge references missing node: ${edge.from} -> ${edge.to}`);
+            }
+            const arrow = context.controller.createObject({
+              type: "arrow",
+              x: 0,
+              y: 0,
+              start: { elementId: from },
+              end: { elementId: to },
+              text: edge.label
+            });
+            arrowIds.push(arrow.id);
+          }
+          return { nodeIds, arrowIds };
+        });
+        return textResult(result);
+      } catch (error) {
+        return errorResult(error);
+      }
+    }
+  );
+}
+function registerShapeTool(server, context, name, type) {
+  server.registerTool(
+    name,
+    {
+      description: `Draw an Excalidraw ${type}.`,
+      inputSchema: shapeInput
+    },
+    async ({ x, y, width, height, text, style }) => {
+      const object = context.controller.createObject({ type, x, y, width, height, text, style });
+      return textResult({ id: object.id });
+    }
+  );
+}
+function textResult(value) {
+  return {
+    content: [{ type: "text", text: JSON.stringify(value) }]
+  };
+}
+function errorResult(error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return {
+    isError: true,
+    content: [{ type: "text", text: message }]
+  };
+}
+
+// src/plugins/excalidraw/index.ts
+function createExcalidrawPlugin() {
+  return {
+    name: "excalidraw",
+    createInitialScene,
+    getMetadata,
+    listObjects,
+    getObject,
+    createObject,
+    updateObject,
+    deleteObjects,
+    clear,
+    serialize,
+    deserialize,
+    registerTools
+  };
+}
+function createInitialScene() {
+  return {
+    elements: [],
+    appState: {
+      viewBackgroundColor: "#ffffff"
+    },
+    files: {},
+    version: 0
+  };
+}
+function getMetadata(scene) {
+  return {
+    canvas: "excalidraw",
+    version: scene.version,
+    objectCount: listObjects(scene).length,
+    viewBackgroundColor: scene.appState.viewBackgroundColor
+  };
+}
+function listObjects(scene, type) {
+  return scene.elements.map(toCanvasObjectSummary).filter((object) => Boolean(object)).filter((object) => !type || object.type === type);
+}
+function getObject(scene, id) {
+  const element = findElement(scene, id);
+  return element ? toCanvasObject(element) : void 0;
+}
+function createObject(scene, spec) {
+  const element = buildElementWithBindings(scene, spec);
+  scene.elements.push(element);
+  if (spec.text && canCreateBoundLabel(spec.type)) {
+    const label = createBoundLabel(element, spec.text, spec.style);
+    scene.elements.push(label);
+  }
+  const object = toCanvasObject(element);
+  if (!object) {
+    throw new Error(`Unsupported object type: ${spec.type}`);
+  }
+  return object;
+}
+function updateObject(scene, id, patch) {
+  const element = findElement(scene, id);
+  if (!element) {
+    return void 0;
+  }
+  if (patch.x !== void 0) {
+    element.x = patch.x;
+  }
+  if (patch.y !== void 0) {
+    element.y = patch.y;
+  }
+  if (patch.width !== void 0) {
+    element.width = patch.width;
+  }
+  if (patch.height !== void 0) {
+    element.height = patch.height;
+  }
+  if (patch.points !== void 0) {
+    element.points = patch.points;
+    element.width = linearWidth2(patch.points);
+    element.height = linearHeight2(patch.points);
+  }
+  if (patch.groupIds !== void 0) {
+    element.groupIds = patch.groupIds;
+  }
+  if (patch.containerId !== void 0) {
+    element.containerId = patch.containerId;
+  }
+  if (patch.style) {
+    applyStyle(element, patch.style);
+  }
+  if (patch.text !== void 0) {
+    if (element.type === "text") {
+      element.text = patch.text;
+      element.originalText = patch.text;
+    } else {
+      upsertContainerLabel(scene, element, patch.text, patch.style);
+    }
+  }
+  touchElement(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));
+}
+function clear(scene) {
+  scene.elements = [];
+  scene.files = {};
+}
+function serialize(scene) {
+  return serializeScene(scene);
+}
+function deserialize(raw) {
+  return deserializeScene(raw);
+}
+function registerTools(server, context) {
+  registerExcalidrawTools(server, context);
+}
+function buildElementWithBindings(scene, spec) {
+  if (spec.type !== "arrow" && spec.type !== "line") {
+    return buildElement(spec);
+  }
+  const start = spec.start ? resolveEndpoint(scene, spec.start) : void 0;
+  const end = spec.end ? resolveEndpoint(scene, spec.end) : void 0;
+  const defaultStart = { x: spec.x, y: spec.y };
+  const defaultEnd = {
+    x: spec.x + (spec.width ?? 160),
+    y: spec.y + (spec.height ?? 80)
+  };
+  const startCenter = start?.point ?? defaultStart;
+  const endCenter = end?.point ?? defaultEnd;
+  const startPoint = start?.element ? edgePoint(start.element, endCenter.x, endCenter.y) : startCenter;
+  const endPoint = end?.element ? edgePoint(end.element, startCenter.x, startCenter.y) : endCenter;
+  const points = spec.points ?? [
+    [0, 0],
+    [endPoint.x - startPoint.x, endPoint.y - startPoint.y]
+  ];
+  const element = buildElement(
+    {
+      ...spec,
+      x: startPoint.x,
+      y: startPoint.y,
+      points
+    },
+    {
+      startBinding: start?.element ? makeBinding(start.element.id) : null,
+      endBinding: end?.element ? makeBinding(end.element.id) : null
+    }
+  );
+  if (spec.type === "arrow") {
+    if (start?.element) {
+      addBoundElementById(scene, start.element.id, { id: element.id, type: "arrow" });
+    }
+    if (end?.element) {
+      addBoundElementById(scene, end.element.id, { id: element.id, type: "arrow" });
+    }
+  }
+  return element;
+}
+function resolveEndpoint(scene, endpoint) {
+  if (isElementEndpoint(endpoint)) {
+    const element = findElement(scene, endpoint.elementId);
+    if (!element) {
+      throw new Error(`Object not found: ${endpoint.elementId}`);
+    }
+    return {
+      point: centerPoint(element),
+      element
+    };
+  }
+  return { point: endpoint };
+}
+function upsertContainerLabel(scene, container, text, style) {
+  const existing = scene.elements.find(
+    (element) => element.type === "text" && element.containerId === container.id
+  );
+  if (existing) {
+    existing.text = text;
+    existing.originalText = text;
+    if (style) {
+      applyStyle(existing, style);
+    }
+    touchElement(existing);
+    return;
+  }
+  scene.elements.push(createBoundLabel(container, text, style));
+}
+function createBoundLabel(container, text, style) {
+  const labelStyle = { ...style, textAlign: style?.textAlign ?? "center" };
+  const position = labelPosition(container, text, labelStyle);
+  const label = buildElement(
+    {
+      type: "text",
+      x: position.x,
+      y: position.y,
+      width: position.width,
+      height: position.height,
+      text,
+      style: labelStyle
+    },
+    {
+      containerId: container.id
+    }
+  );
+  label.autoResize = false;
+  addBoundElement(container, { id: label.id, type: "text" });
+  return label;
+}
+function labelPosition(container, text, style) {
+  const fontSize = style.fontSize ?? 20;
+  const lineHeight = fontSize * 1.25;
+  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
+    };
+  }
+  return {
+    x: container.x,
+    y: container.y + container.height / 2 - lineHeight / 2,
+    width: Math.max(40, container.width),
+    height: lineHeight
+  };
+}
+function isLinearElement(element) {
+  return element.type === "line" || element.type === "arrow";
+}
+function canCreateBoundLabel(type) {
+  return type !== "text" && type !== "frame" && type !== "line";
+}
+function linearMidpoint(element) {
+  const points = element.points ?? [
+    [0, 0],
+    [element.width, element.height]
+  ];
+  const first = points[0] ?? [0, 0];
+  const last = points[points.length - 1] ?? first;
+  return {
+    x: element.x + (first[0] + last[0]) / 2,
+    y: element.y + (first[1] + last[1]) / 2
+  };
+}
+function addBoundElementById(scene, elementId, bound) {
+  const element = findElement(scene, elementId);
+  if (element) {
+    addBoundElement(element, bound);
+  }
+}
+function findElement(scene, id) {
+  return scene.elements.find((element) => element.id === id && !element.isDeleted);
+}
+function setFrameOnChildren(scene, childIds, frameId) {
+  const updated = [];
+  for (const childId of childIds) {
+    const child = findElement(scene, childId);
+    if (child) {
+      child.frameId = frameId;
+      touchElement(child);
+      updated.push(child.id);
+    }
+  }
+  return updated;
+}
+function groupElements(scene, ids) {
+  const groupId = randomUUID2();
+  for (const id of ids) {
+    const element = findElement(scene, id);
+    if (element && !element.groupIds.includes(groupId)) {
+      element.groupIds = [...element.groupIds, groupId];
+      touchElement(element);
+    }
+  }
+  return groupId;
+}
+function applyStyle(element, style) {
+  if (style.strokeColor !== void 0) {
+    element.strokeColor = style.strokeColor;
+  }
+  if (style.backgroundColor !== void 0) {
+    element.backgroundColor = style.backgroundColor;
+  }
+  if (style.fillStyle !== void 0) {
+    element.fillStyle = style.fillStyle;
+  }
+  if (style.strokeWidth !== void 0) {
+    element.strokeWidth = style.strokeWidth;
+  }
+  if (style.strokeStyle !== void 0) {
+    element.strokeStyle = style.strokeStyle;
+  }
+  if (style.roughness !== void 0) {
+    element.roughness = style.roughness;
+  }
+  if (style.opacity !== void 0) {
+    element.opacity = style.opacity;
+  }
+  if (style.fontSize !== void 0) {
+    element.fontSize = style.fontSize;
+    element.height = style.fontSize * 1.25;
+  }
+  if (style.textAlign !== void 0) {
+    element.textAlign = style.textAlign;
+  }
+}
+function linearWidth2(points) {
+  const xs = points.map(([x]) => x);
+  return Math.max(...xs) - Math.min(...xs);
+}
+function linearHeight2(points) {
+  const ys = points.map(([, y]) => y);
+  return Math.max(...ys) - Math.min(...ys);
+}
+
+// src/server/app.ts
+import path2 from "path";
+import express from "express";
+
+// src/mcp/buildServer.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+// src/shared/packageInfo.ts
+import { readFileSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+var CLI_NAME = "agentic-canvas";
+var MCP_SERVER_NAME = "agentic-canvas";
+var PACKAGE_NAME = "@trohde/agentic-canvas";
+function readPackageInfo() {
+  const packageJsonPath = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    "../../package.json"
+  );
+  const parsed = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+  return {
+    name: typeof parsed.name === "string" ? parsed.name : PACKAGE_NAME,
+    version: typeof parsed.version === "string" ? parsed.version : "0.0.0"
+  };
+}
+
+// src/mcp/baselineTools.ts
+import { z as z3 } from "zod";
+function registerBaselineTools(server, context) {
+  server.registerTool(
+    "get_canvas_state",
+    {
+      description: "Get canvas metadata and current scene state summary.",
+      inputSchema: {}
+    },
+    async () => textResult2(context.controller.getMetadata(context.clientsConnected()))
+  );
+  server.registerTool(
+    "list_objects",
+    {
+      description: "List normalized canvas objects.",
+      inputSchema: {
+        type: canvasObjectTypeSchema.optional()
+      }
+    },
+    async ({ type }) => textResult2(context.controller.listObjects(type))
+  );
+  server.registerTool(
+    "get_object",
+    {
+      description: "Get one normalized canvas object by id.",
+      inputSchema: {
+        id: z3.string()
+      }
+    },
+    async ({ id }) => {
+      const object = context.controller.getObject(id);
+      return object ? textResult2(object) : errorResult2(`Object not found: ${id}`);
+    }
+  );
+  server.registerTool(
+    "create_object",
+    {
+      description: "Create a normalized canvas object.",
+      inputSchema: createObjectShape
+    },
+    async (input) => {
+      try {
+        const object = context.controller.createObject(input);
+        return textResult2({ id: object.id });
+      } catch (error) {
+        return errorResult2(error);
+      }
+    }
+  );
+  server.registerTool(
+    "update_object",
+    {
+      description: "Patch a normalized canvas object.",
+      inputSchema: updateObjectShape
+    },
+    async ({ id, ...patch }) => {
+      const object = context.controller.updateObject(id, patch);
+      return object ? textResult2({ id: object.id }) : errorResult2(`Object not found: ${id}`);
+    }
+  );
+  server.registerTool(
+    "delete_object",
+    {
+      description: "Delete one or more canvas objects.",
+      inputSchema: {
+        ids: z3.array(z3.string()).min(1)
+      }
+    },
+    async ({ ids }) => textResult2({ deleted: context.controller.deleteObjects(ids) })
+  );
+  server.registerTool(
+    "clear_canvas",
+    {
+      description: "Clear all canvas objects.",
+      inputSchema: {}
+    },
+    async () => {
+      context.controller.clear();
+      return textResult2({ cleared: true });
+    }
+  );
+  server.registerTool(
+    "save_canvas",
+    {
+      description: "Save the current canvas to a .excalidraw file inside the workspace.",
+      inputSchema: {
+        path: z3.string().optional()
+      }
+    },
+    async ({ path: path5 }) => {
+      try {
+        const written = await context.workspace.writeText(
+          path5 ?? "canvas.excalidraw",
+          context.controller.serialize()
+        );
+        return textResult2({ path: written });
+      } catch (error) {
+        return errorResult2(error);
+      }
+    }
+  );
+  server.registerTool(
+    "open_canvas",
+    {
+      description: "Open a .excalidraw file from inside the workspace.",
+      inputSchema: {
+        path: z3.string()
+      }
+    },
+    async ({ path: path5 }) => {
+      try {
+        const file = await context.workspace.readText(path5);
+        context.controller.deserialize(file.text);
+        return textResult2({
+          path: file.path,
+          objectCount: context.controller.listObjects().length
+        });
+      } catch (error) {
+        return errorResult2(friendlyOpenError(error, path5));
+      }
+    }
+  );
+  server.registerTool(
+    "screenshot",
+    {
+      description: "Export a PNG screenshot through a connected browser.",
+      inputSchema: {
+        path: z3.string().optional(),
+        exportPadding: z3.number().min(0).max(200).optional()
+      }
+    },
+    async ({ path: path5, exportPadding }) => {
+      try {
+        const exported = await context.requestExport({ exportPadding });
+        const content = [{ type: "image", data: exported.base64, mimeType: exported.mimeType }];
+        if (path5) {
+          const written = await context.workspace.writeBinary(
+            path5,
+            Buffer.from(exported.base64, "base64")
+          );
+          content.push({ type: "text", text: JSON.stringify({ path: written }) });
+        }
+        return { content };
+      } catch (error) {
+        return errorResult2(error);
+      }
+    }
+  );
+  server.registerTool(
+    "get_selected_objects",
+    {
+      description: "Return normalized objects currently selected in the connected browser.",
+      inputSchema: {}
+    },
+    async () => {
+      try {
+        const selection = await context.requestSelection();
+        const objects = [];
+        const missingIds = [];
+        for (const id of selection.selectedIds) {
+          const object = context.controller.getObject(id);
+          if (object) {
+            objects.push(object);
+          } else {
+            missingIds.push(id);
+          }
+        }
+        return textResult2({
+          version: context.controller.currentVersion(),
+          selectedIds: selection.selectedIds,
+          objects,
+          missingIds
+        });
+      } catch (error) {
+        return errorResult2(error);
+      }
+    }
+  );
+}
+function textResult2(value) {
+  return {
+    content: [{ type: "text", text: JSON.stringify(value) }]
+  };
+}
+function errorResult2(error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return {
+    isError: true,
+    content: [{ type: "text", text: message }]
+  };
+}
+function friendlyOpenError(error, requestedPath) {
+  if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") {
+    return `No such canvas file: ${requestedPath}`;
+  }
+  return error;
+}
+
+// src/mcp/buildServer.ts
+function buildMcpServer(options) {
+  const packageInfo = readPackageInfo();
+  const server = new McpServer({
+    name: MCP_SERVER_NAME,
+    version: packageInfo.version
+  });
+  registerBaselineTools(server, {
+    controller: options.controller,
+    workspace: options.workspace,
+    clientsConnected: options.clientsConnected,
+    requestExport: options.requestExport,
+    requestSelection: options.requestSelection
+  });
+  options.plugin.registerTools(server, {
+    controller: options.controller
+  });
+  return server;
+}
+
+// src/server/mcpHttp.ts
+import { randomUUID as randomUUID3 } from "crypto";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
+function mountMcpHttp(router, createServer2, allowedHosts) {
+  const transports = /* @__PURE__ */ new Map();
+  router.post("/mcp", async (req, res) => {
+    try {
+      const sessionId = headerValue(req, "mcp-session-id");
+      let transport = sessionId ? transports.get(sessionId) : void 0;
+      if (!transport) {
+        if (!isInitialize(req.body)) {
+          res.status(400).json({ error: "Missing or invalid MCP session" });
+          return;
+        }
+        transport = new StreamableHTTPServerTransport({
+          sessionIdGenerator: () => randomUUID3(),
+          enableDnsRebindingProtection: true,
+          allowedHosts,
+          onsessioninitialized: (newSessionId) => {
+            transports.set(newSessionId, transport);
+          }
+        });
+        transport.onclose = () => {
+          const currentSessionId = transport?.sessionId;
+          if (currentSessionId) {
+            transports.delete(currentSessionId);
+          }
+        };
+        await createServer2().connect(transport);
+      }
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      sendTransportError(res, error);
+    }
+  });
+  router.get("/mcp", async (req, res) => {
+    await handleSessionRequest(req, res, transports);
+  });
+  router.delete("/mcp", async (req, res) => {
+    await handleSessionRequest(req, res, transports);
+  });
+}
+async function handleSessionRequest(req, res, transports) {
+  const sessionId = headerValue(req, "mcp-session-id");
+  const transport = sessionId ? transports.get(sessionId) : void 0;
+  if (!transport) {
+    res.status(400).json({ error: "Missing or invalid MCP session" });
+    return;
+  }
+  try {
+    await transport.handleRequest(req, res);
+  } catch (error) {
+    sendTransportError(res, error);
+  }
+}
+function isInitialize(body) {
+  const messages = Array.isArray(body) ? body : [body];
+  return messages.some((message) => isInitializeRequest(message));
+}
+function headerValue(req, name) {
+  const value = req.headers[name];
+  return Array.isArray(value) ? value[0] : value;
+}
+function sendTransportError(res, error) {
+  if (res.headersSent) {
+    return;
+  }
+  const message = error instanceof Error ? error.message : String(error);
+  res.status(500).json({ error: message });
+}
+
+// src/server/app.ts
+function createApp(options) {
+  const app = express();
+  app.use(express.json({ limit: "10mb" }));
+  app.get("/healthz", (_req, res) => {
+    res.json({
+      status: "ok",
+      canvas: options.plugin.name,
+      version: options.controller.getSnapshot().version
+    });
+  });
+  mountMcpHttp(app, () => buildMcpServer(options), options.allowedHosts);
+  app.use(express.static(options.webDistDir));
+  app.get("*", (_req, res) => {
+    res.sendFile(path2.join(options.webDistDir, "index.html"), (error) => {
+      if (error) {
+        res.status(404).send("Agentic Canvas web build not found. Run npm run build first.");
+      }
+    });
+  });
+  return app;
+}
+
+// src/server/canvasController.ts
+var CanvasController = class {
+  constructor(plugin) {
+    this.plugin = plugin;
+    this.scene = plugin.createInitialScene();
+  }
+  plugin;
+  scene;
+  listener;
+  txDepth = 0;
+  txDirty = false;
+  txOrigin;
+  get canvasName() {
+    return this.plugin.name;
+  }
+  setChangeListener(listener) {
+    this.listener = listener;
+  }
+  getScene() {
+    return cloneScene(this.scene);
+  }
+  getSnapshot() {
+    return {
+      version: this.scene.version,
+      elements: this.scene.elements,
+      appState: this.scene.appState,
+      files: this.scene.files
+    };
+  }
+  currentVersion() {
+    return this.scene.version;
+  }
+  getMetadata(clientsConnected = 0) {
+    return {
+      ...this.plugin.getMetadata(this.scene),
+      clientsConnected
+    };
+  }
+  listObjects(type) {
+    return this.plugin.listObjects(this.scene, type);
+  }
+  getObject(id) {
+    return this.plugin.getObject(this.scene, id);
+  }
+  createObject(spec) {
+    return this.mutateScene((scene) => this.plugin.createObject(scene, spec));
+  }
+  updateObject(id, patch) {
+    return this.mutateScene((scene) => this.plugin.updateObject(scene, id, patch));
+  }
+  deleteObjects(ids) {
+    return this.mutateScene((scene) => this.plugin.deleteObjects(scene, ids));
+  }
+  clear() {
+    this.mutateScene((scene) => this.plugin.clear(scene));
+  }
+  serialize() {
+    return JSON.stringify(this.plugin.serialize(this.scene), null, 2);
+  }
+  deserialize(raw) {
+    const currentVersion = this.scene.version;
+    this.scene = this.plugin.deserialize(raw);
+    this.scene.version = currentVersion;
+    this.bumpAndNotify();
+  }
+  replaceFromBrowser(elements, appState, files, origin) {
+    this.scene.elements = elements;
+    this.scene.appState = {
+      viewBackgroundColor: appState?.viewBackgroundColor ?? this.scene.appState.viewBackgroundColor
+    };
+    this.scene.files = files ?? this.scene.files;
+    this.bumpAndNotify(origin);
+  }
+  mutateScene(mutator, origin) {
+    const result = mutator(this.scene);
+    this.bumpAndNotify(origin);
+    return result;
+  }
+  transaction(fn, origin) {
+    this.txDepth += 1;
+    try {
+      return fn();
+    } finally {
+      this.txDepth -= 1;
+      if (this.txDepth === 0 && this.txDirty) {
+        const txOrigin = this.txOrigin;
+        this.txDirty = false;
+        this.txOrigin = void 0;
+        this.commit(txOrigin ?? origin);
+      }
+    }
+  }
+  bumpAndNotify(origin) {
+    if (this.txDepth > 0) {
+      this.txDirty = true;
+      this.txOrigin = origin ?? this.txOrigin;
+      return;
+    }
+    this.commit(origin);
+  }
+  commit(origin) {
+    this.scene.version += 1;
+    this.listener?.(this.getSnapshot(), origin);
+  }
+};
+
+// src/server/workspace.ts
+import { mkdir, readFile, writeFile } from "fs/promises";
+import path3 from "path";
+var Workspace = class {
+  root;
+  constructor(root) {
+    this.root = path3.resolve(root);
+  }
+  async ensure() {
+    await mkdir(this.root, { recursive: true });
+  }
+  resolveInWorkspace(userPath) {
+    if (!userPath || userPath.trim().length === 0) {
+      throw new Error("Path is required");
+    }
+    const resolved = path3.isAbsolute(userPath) ? path3.resolve(userPath) : path3.resolve(this.root, userPath);
+    const relative = path3.relative(this.root, resolved);
+    const staysInside = relative === "" || !relative.startsWith("..") && !path3.isAbsolute(relative);
+    if (!staysInside) {
+      throw new Error(`Path is outside workspace: ${userPath}`);
+    }
+    return resolved;
+  }
+  async readText(userPath) {
+    const resolved = this.resolveInWorkspace(userPath);
+    return {
+      path: resolved,
+      text: await readFile(resolved, "utf8")
+    };
+  }
+  async writeText(userPath, text) {
+    const resolved = this.resolveInWorkspace(userPath);
+    await mkdir(path3.dirname(resolved), { recursive: true });
+    await writeFile(resolved, text, "utf8");
+    return resolved;
+  }
+  async writeBinary(userPath, data) {
+    const resolved = this.resolveInWorkspace(userPath);
+    await mkdir(path3.dirname(resolved), { recursive: true });
+    await writeFile(resolved, data);
+    return resolved;
+  }
+};
+
+// src/server/wsBridge.ts
+import { randomUUID as randomUUID4 } from "crypto";
+import { WebSocket, WebSocketServer } from "ws";
+
+// src/shared/protocol.ts
+function parseBrowserMessage(data) {
+  try {
+    const parsed = JSON.parse(data);
+    if (typeof parsed === "object" && parsed !== null && "type" in parsed) {
+      return parsed;
+    }
+  } catch {
+    return void 0;
+  }
+  return void 0;
+}
+
+// src/server/wsBridge.ts
+var WsBridge = class {
+  constructor(controller) {
+    this.controller = controller;
+  }
+  controller;
+  clients = /* @__PURE__ */ new Map();
+  pendingExports = /* @__PURE__ */ new Map();
+  pendingSelections = /* @__PURE__ */ new Map();
+  syncOrder = 0;
+  wss;
+  attach(server, path5 = "/ws") {
+    this.wss = new WebSocketServer({ noServer: true });
+    this.wss.on("connection", (socket) => this.handleConnection(socket));
+    server.on("upgrade", (request, socket, head) => {
+      const url = new URL(request.url ?? "/", "http://127.0.0.1");
+      if (url.pathname !== path5 || !this.wss) {
+        return;
+      }
+      this.wss.handleUpgrade(request, socket, head, (ws) => {
+        this.wss?.emit("connection", ws, request);
+      });
+    });
+  }
+  connectedClientCount() {
+    return this.clients.size;
+  }
+  broadcastScene(snapshot, origin) {
+    for (const { socket } of this.clients.values()) {
+      if (socket !== origin) {
+        this.sendScene(socket, snapshot);
+      }
+    }
+    if (origin instanceof WebSocket) {
+      this.markClientSynced(origin, snapshot.version);
+    }
+  }
+  requestExport(options = {}) {
+    const client = this.mostRecentlySyncedClient();
+    if (!client) {
+      return Promise.reject(new Error("No browser canvas client is connected"));
+    }
+    const id = randomUUID4();
+    const request = {
+      type: "export:request",
+      id,
+      mimeType: "image/png",
+      exportPadding: options.exportPadding
+    };
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.pendingExports.delete(id);
+        reject(new Error("Screenshot export timed out"));
+      }, options.timeoutMs ?? 5e3);
+      this.pendingExports.set(id, { resolve, reject, timer });
+      client.socket.send(JSON.stringify(request));
+    });
+  }
+  requestSelection(options = {}) {
+    const client = this.mostRecentlySyncedClient();
+    if (!client) {
+      return Promise.reject(new Error("No browser canvas client is connected"));
+    }
+    const id = randomUUID4();
+    const request = {
+      type: "selection:request",
+      id
+    };
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.pendingSelections.delete(id);
+        reject(new Error("Selection request timed out"));
+      }, options.timeoutMs ?? 5e3);
+      this.pendingSelections.set(id, { resolve, reject, timer });
+      client.socket.send(JSON.stringify(request));
+    });
+  }
+  close() {
+    for (const { socket } of this.clients.values()) {
+      socket.close();
+    }
+    this.wss?.close();
+  }
+  handleConnection(socket) {
+    this.clients.set(socket, {
+      socket,
+      lastSyncedOrder: 0,
+      lastSyncedVersion: -1
+    });
+    socket.on("message", (data) => this.handleMessage(socket, data.toString()));
+    socket.on("close", () => {
+      this.clients.delete(socket);
+    });
+    this.sendScene(socket, this.controller.getSnapshot());
+  }
+  handleMessage(socket, data) {
+    const message = parseBrowserMessage(data);
+    if (!message) {
+      return;
+    }
+    if (message.type === "hello") {
+      this.sendScene(socket, this.controller.getSnapshot());
+      return;
+    }
+    if (message.type === "scene:changed") {
+      if (message.baseVersion < this.controller.currentVersion()) {
+        this.sendScene(socket, this.controller.getSnapshot());
+        return;
+      }
+      this.controller.replaceFromBrowser(
+        message.elements,
+        message.appState,
+        message.files,
+        socket
+      );
+      this.markClientSynced(socket, this.controller.currentVersion());
+      return;
+    }
+    if (message.type === "export:result" || message.type === "export:error") {
+      const pending = this.pendingExports.get(message.id);
+      if (!pending) {
+        return;
+      }
+      clearTimeout(pending.timer);
+      this.pendingExports.delete(message.id);
+      if (message.type === "export:result") {
+        pending.resolve({ mimeType: message.mimeType, base64: message.base64 });
+      } else {
+        pending.reject(new Error(message.message));
+      }
+      return;
+    }
+    if (message.type === "selection:result" || message.type === "selection:error") {
+      const pending = this.pendingSelections.get(message.id);
+      if (!pending) {
+        return;
+      }
+      clearTimeout(pending.timer);
+      this.pendingSelections.delete(message.id);
+      if (message.type === "selection:result") {
+        pending.resolve({ selectedIds: message.selectedIds });
+      } else {
+        pending.reject(new Error(message.message));
+      }
+    }
+  }
+  sendScene(socket, snapshot) {
+    if (socket.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    socket.send(
+      JSON.stringify({
+        type: "scene:set",
+        version: snapshot.version,
+        elements: snapshot.elements,
+        appState: snapshot.appState,
+        files: snapshot.files
+      })
+    );
+    this.markClientSynced(socket, snapshot.version);
+  }
+  markClientSynced(socket, version) {
+    const client = this.clients.get(socket);
+    if (!client) {
+      return;
+    }
+    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];
+  }
+};
+
+// src/server/httpServer.ts
+async function startHttpServer(options) {
+  const port = await findFreePort(options.host, options.port);
+  const workspace = new Workspace(options.workspace);
+  await workspace.ensure();
+  const plugin = createExcalidrawPlugin();
+  const controller = new CanvasController(plugin);
+  const bridge = new WsBridge(controller);
+  controller.setChangeListener((snapshot, origin) => bridge.broadcastScene(snapshot, origin));
+  const app = createApp({
+    plugin,
+    controller,
+    workspace,
+    webDistDir: findWebDistDir(),
+    allowedHosts: allowedHostsFor(options.host, port),
+    clientsConnected: () => bridge.connectedClientCount(),
+    requestExport: (exportOptions) => bridge.requestExport(exportOptions),
+    requestSelection: (selectionOptions) => bridge.requestSelection(selectionOptions)
+  });
+  const server = createServer(app);
+  bridge.attach(server);
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(port, options.host, () => {
+      server.off("error", reject);
+      resolve();
+    });
+  });
+  return {
+    host: options.host,
+    port,
+    canvasUrl: `http://${options.host}:${port}`,
+    mcpUrl: `http://${options.host}:${port}/mcp`,
+    server,
+    controller,
+    bridge,
+    close: () => new Promise((resolve, reject) => {
+      bridge.close();
+      server.close((error) => {
+        if (error) {
+          reject(error);
+        } else {
+          resolve();
+        }
+      });
+    })
+  };
+}
+async function findFreePort(host, requestedPort) {
+  for (let port = requestedPort; port < requestedPort + 20; port += 1) {
+    if (await canListen(host, port)) {
+      return port;
+    }
+  }
+  throw new Error(`No free port found starting at ${requestedPort}`);
+}
+function canListen(host, port) {
+  return new Promise((resolve) => {
+    const probe = net.createServer();
+    probe.once("error", () => resolve(false));
+    probe.listen(port, host, () => {
+      probe.close(() => resolve(true));
+    });
+  });
+}
+function allowedHostsFor(host, port) {
+  const hosts = /* @__PURE__ */ new Set(["127.0.0.1", "localhost", host]);
+  for (const hostname of [...hosts]) {
+    hosts.add(`${hostname}:${port}`);
+  }
+  return [...hosts];
+}
+function findWebDistDir() {
+  const here = path4.dirname(fileURLToPath2(import.meta.url));
+  const candidates = [
+    path4.resolve(here, "../web"),
+    path4.resolve(here, "../../dist/web"),
+    path4.resolve(process.cwd(), "dist/web")
+  ];
+  return candidates.find((candidate) => existsSync(path4.join(candidate, "index.html"))) ?? candidates[2];
+}
+
+// src/shared/logger.ts
+var levelOrder = {
+  debug: 10,
+  info: 20,
+  warn: 30,
+  error: 40
+};
+function createLogger(minLevel = "info") {
+  const min = levelOrder[minLevel];
+  const write = (level, message, details) => {
+    if (levelOrder[level] < min) {
+      return;
+    }
+    const suffix = details === void 0 ? "" : ` ${formatDetails(details)}`;
+    console.error(`[agentic-canvas] ${level}: ${message}${suffix}`);
+  };
+  return {
+    debug: (message, details) => write("debug", message, details),
+    info: (message, details) => write("info", message, details),
+    warn: (message, details) => write("warn", message, details),
+    error: (message, details) => write("error", message, details)
+  };
+}
+function formatDetails(details) {
+  if (details instanceof Error) {
+    return details.stack ?? details.message;
+  }
+  if (typeof details === "string") {
+    return details;
+  }
+  try {
+    return JSON.stringify(details);
+  } catch {
+    return String(details);
+  }
+}
+
+// src/cli/index.ts
+var logger = createLogger("info");
+async function main() {
+  const packageInfo = readPackageInfo();
+  const args = parseArgs({
+    allowPositionals: false,
+    allowNegative: true,
+    options: {
+      canvas: { type: "string", default: "excalidraw" },
+      port: { type: "string", default: process.env.AGENTIC_CANVAS_PORT ?? "3333" },
+      host: { type: "string", default: process.env.AGENTIC_CANVAS_HOST ?? "127.0.0.1" },
+      workspace: { type: "string", default: process.env.AGENTIC_CANVAS_WORKSPACE ?? process.cwd() },
+      open: { type: "boolean", default: true },
+      help: { type: "boolean", short: "h" },
+      version: { type: "boolean", short: "v" }
+    }
+  });
+  if (args.values.help) {
+    printHelp();
+    return;
+  }
+  if (args.values.version) {
+    console.log(packageInfo.version);
+    return;
+  }
+  if (args.values.canvas !== "excalidraw") {
+    throw new Error(`Unknown canvas "${args.values.canvas}". Available canvases: excalidraw`);
+  }
+  const requestedPort = Number(args.values.port);
+  if (!Number.isInteger(requestedPort) || requestedPort < 1 || requestedPort > 65535) {
+    throw new Error(`Invalid port: ${args.values.port}`);
+  }
+  const running = await startHttpServer({
+    canvas: "excalidraw",
+    host: String(args.values.host),
+    port: requestedPort,
+    workspace: String(args.values.workspace)
+  });
+  console.log(`Canvas: ${running.canvasUrl}`);
+  console.log(`MCP: ${running.mcpUrl}`);
+  if (args.values.open) {
+    await open(running.canvasUrl);
+  }
+}
+function printHelp() {
+  console.log(`${CLI_NAME}
+
+Start a local Excalidraw canvas with an MCP Streamable HTTP endpoint.
+
+Usage:
+  npx ${PACKAGE_NAME} --canvas excalidraw
+  ${CLI_NAME} --canvas excalidraw
+
+Options:
+  --canvas <name>      Canvas plugin, currently excalidraw (default: excalidraw)
+  --port <n>           Port (default: 3333 or AGENTIC_CANVAS_PORT)
+  --host <host>        Bind host (default: 127.0.0.1 or AGENTIC_CANVAS_HOST)
+  --workspace <dir>    Save/open/screenshot workspace (default: cwd)
+  --open, --no-open    Open browser on startup (default: open)
+  -h, --help           Show help
+  -v, --version        Show version`);
+}
+main().catch((error) => {
+  logger.error(error instanceof Error ? error.message : String(error));
+  process.exitCode = 1;
+});
+//# sourceMappingURL=index.js.map