@fieldnotes/core 0.1.0

package/dist/index.js

@@ -0,0 +1,2184 @@
+// src/core/event-bus.ts
+var EventBus = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(event, listener) {
+    const existing = this.listeners.get(event);
+    if (existing) {
+      existing.add(listener);
+    } else {
+      const set = /* @__PURE__ */ new Set([listener]);
+      this.listeners.set(event, set);
+    }
+    return () => this.off(event, listener);
+  }
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+  }
+  emit(event, data) {
+    this.listeners.get(event)?.forEach((listener) => listener(data));
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/core/state-serializer.ts
+var CURRENT_VERSION = 1;
+function exportState(elements, camera) {
+  return {
+    version: CURRENT_VERSION,
+    camera: {
+      position: { ...camera.position },
+      zoom: camera.zoom
+    },
+    elements: elements.map((el) => structuredClone(el))
+  };
+}
+function parseState(json) {
+  const data = JSON.parse(json);
+  validateState(data);
+  return data;
+}
+function validateState(data) {
+  if (!data || typeof data !== "object") {
+    throw new Error("Invalid state: expected an object");
+  }
+  const obj = data;
+  if (typeof obj["version"] !== "number") {
+    throw new Error("Invalid state: missing or invalid version");
+  }
+  if (!obj["camera"] || typeof obj["camera"] !== "object") {
+    throw new Error("Invalid state: missing camera");
+  }
+  const cam = obj["camera"];
+  if (!cam["position"] || typeof cam["position"] !== "object") {
+    throw new Error("Invalid state: missing camera.position");
+  }
+  const pos = cam["position"];
+  if (typeof pos["x"] !== "number" || typeof pos["y"] !== "number") {
+    throw new Error("Invalid state: camera.position must have x and y numbers");
+  }
+  if (typeof cam["zoom"] !== "number") {
+    throw new Error("Invalid state: missing camera.zoom");
+  }
+  if (!Array.isArray(obj["elements"])) {
+    throw new Error("Invalid state: elements must be an array");
+  }
+  for (const el of obj["elements"]) {
+    validateElement(el);
+    migrateElement(el);
+  }
+}
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html"]);
+function validateElement(el) {
+  if (!el || typeof el !== "object") {
+    throw new Error("Invalid element: expected an object");
+  }
+  const obj = el;
+  if (typeof obj["id"] !== "string") {
+    throw new Error("Invalid element: missing id");
+  }
+  if (typeof obj["type"] !== "string" || !VALID_TYPES.has(obj["type"])) {
+    throw new Error(`Invalid element: unknown type "${String(obj["type"])}"`);
+  }
+  if (typeof obj["zIndex"] !== "number") {
+    throw new Error("Invalid element: missing zIndex");
+  }
+}
+function migrateElement(obj) {
+  if (obj["type"] === "arrow" && typeof obj["bend"] !== "number") {
+    obj["bend"] = 0;
+  }
+}
+
+// src/canvas/camera.ts
+var DEFAULT_MIN_ZOOM = 0.1;
+var DEFAULT_MAX_ZOOM = 10;
+var Camera = class {
+  x = 0;
+  y = 0;
+  z = 1;
+  minZoom;
+  maxZoom;
+  changeListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.minZoom = options.minZoom ?? DEFAULT_MIN_ZOOM;
+    this.maxZoom = options.maxZoom ?? DEFAULT_MAX_ZOOM;
+  }
+  get position() {
+    return { x: this.x, y: this.y };
+  }
+  get zoom() {
+    return this.z;
+  }
+  pan(dx, dy) {
+    this.x += dx;
+    this.y += dy;
+    this.notifyChange();
+  }
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+    this.notifyChange();
+  }
+  setZoom(level) {
+    this.z = Math.min(this.maxZoom, Math.max(this.minZoom, level));
+    this.notifyChange();
+  }
+  zoomAt(level, screenPoint) {
+    const before = this.screenToWorld(screenPoint);
+    this.z = Math.min(this.maxZoom, Math.max(this.minZoom, level));
+    const after = this.screenToWorld(screenPoint);
+    this.x += (after.x - before.x) * this.z;
+    this.y += (after.y - before.y) * this.z;
+    this.notifyChange();
+  }
+  screenToWorld(screen) {
+    return {
+      x: (screen.x - this.x) / this.z,
+      y: (screen.y - this.y) / this.z
+    };
+  }
+  worldToScreen(world) {
+    return {
+      x: world.x * this.z + this.x,
+      y: world.y * this.z + this.y
+    };
+  }
+  toCSSTransform() {
+    return `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.z})`;
+  }
+  onChange(listener) {
+    this.changeListeners.add(listener);
+    return () => this.changeListeners.delete(listener);
+  }
+  notifyChange() {
+    this.changeListeners.forEach((fn) => fn());
+  }
+};
+
+// src/canvas/background.ts
+var DEFAULTS = {
+  pattern: "dots",
+  spacing: 24,
+  color: "#d0d0d0",
+  dotRadius: 1,
+  lineWidth: 0.5
+};
+var Background = class {
+  pattern;
+  spacing;
+  color;
+  dotRadius;
+  lineWidth;
+  constructor(options = {}) {
+    this.pattern = options.pattern ?? DEFAULTS.pattern;
+    this.spacing = options.spacing ?? DEFAULTS.spacing;
+    this.color = options.color ?? DEFAULTS.color;
+    this.dotRadius = options.dotRadius ?? DEFAULTS.dotRadius;
+    this.lineWidth = options.lineWidth ?? DEFAULTS.lineWidth;
+  }
+  render(ctx, camera) {
+    const { width, height } = ctx.canvas;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const cssWidth = width / dpr;
+    const cssHeight = height / dpr;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssWidth, cssHeight);
+    if (this.pattern === "dots") {
+      this.renderDots(ctx, camera, cssWidth, cssHeight);
+    } else if (this.pattern === "grid") {
+      this.renderGrid(ctx, camera, cssWidth, cssHeight);
+    }
+    ctx.restore();
+  }
+  renderDots(ctx, camera, width, height) {
+    const spacing = this.spacing * camera.zoom;
+    const offsetX = camera.position.x % spacing;
+    const offsetY = camera.position.y % spacing;
+    const radius = this.dotRadius * Math.min(camera.zoom, 2);
+    ctx.fillStyle = this.color;
+    ctx.beginPath();
+    for (let x = offsetX; x < width; x += spacing) {
+      for (let y = offsetY; y < height; y += spacing) {
+        ctx.moveTo(x + radius, y);
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+      }
+    }
+    ctx.fill();
+  }
+  renderGrid(ctx, camera, width, height) {
+    const spacing = this.spacing * camera.zoom;
+    const offsetX = camera.position.x % spacing;
+    const offsetY = camera.position.y % spacing;
+    const lineW = this.lineWidth * Math.min(camera.zoom, 2);
+    ctx.fillStyle = this.color;
+    for (let x = offsetX; x < width; x += spacing) {
+      ctx.fillRect(x, 0, lineW, height);
+    }
+    for (let y = offsetY; y < height; y += spacing) {
+      ctx.fillRect(0, y, width, lineW);
+    }
+  }
+};
+
+// src/canvas/input-handler.ts
+var ZOOM_SENSITIVITY = 1e-3;
+var MIDDLE_BUTTON = 1;
+var InputHandler = class {
+  constructor(element, camera, options = {}) {
+    this.element = element;
+    this.camera = camera;
+    this.toolManager = options.toolManager ?? null;
+    this.toolContext = options.toolContext ?? null;
+    this.historyRecorder = options.historyRecorder ?? null;
+    this.historyStack = options.historyStack ?? null;
+    this.element.style.touchAction = "none";
+    this.bind();
+  }
+  isPanning = false;
+  lastPointer = { x: 0, y: 0 };
+  spaceHeld = false;
+  activePointers = /* @__PURE__ */ new Map();
+  lastPinchDistance = 0;
+  lastPinchCenter = { x: 0, y: 0 };
+  toolManager;
+  toolContext;
+  historyRecorder;
+  historyStack;
+  isToolActive = false;
+  abortController = new AbortController();
+  setToolManager(toolManager, toolContext) {
+    this.toolManager = toolManager;
+    this.toolContext = toolContext;
+  }
+  destroy() {
+    this.abortController.abort();
+  }
+  bind() {
+    const opts = { signal: this.abortController.signal };
+    this.element.addEventListener("wheel", this.onWheel, { ...opts, passive: false });
+    this.element.addEventListener("pointerdown", this.onPointerDown, opts);
+    this.element.addEventListener("pointermove", this.onPointerMove, opts);
+    this.element.addEventListener("pointerup", this.onPointerUp, opts);
+    this.element.addEventListener("pointerleave", this.onPointerUp, opts);
+    this.element.addEventListener("pointercancel", this.onPointerUp, opts);
+    window.addEventListener("keydown", this.onKeyDown, opts);
+    window.addEventListener("keyup", this.onKeyUp, opts);
+  }
+  onWheel = (e) => {
+    e.preventDefault();
+    const zoomFactor = 1 - e.deltaY * ZOOM_SENSITIVITY;
+    const newZoom = this.camera.zoom * zoomFactor;
+    this.camera.zoomAt(newZoom, { x: e.clientX, y: e.clientY });
+  };
+  isInteractiveHtmlContent(e) {
+    const target = e.target;
+    if (!target) return false;
+    const node = target.closest("[data-element-id]");
+    if (!node) return false;
+    const elementId = node.dataset["elementId"];
+    if (!elementId) return false;
+    const store = this.toolContext?.store;
+    if (!store) return false;
+    const element = store.getById(elementId);
+    if (!element || element.type !== "html") return false;
+    return true;
+  }
+  onPointerDown = (e) => {
+    this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (this.isInteractiveHtmlContent(e)) {
+      return;
+    }
+    this.element.setPointerCapture?.(e.pointerId);
+    if (this.activePointers.size === 2) {
+      this.startPinch();
+      this.cancelToolIfActive(e);
+      return;
+    }
+    if (e.button === MIDDLE_BUTTON || e.button === 0 && this.spaceHeld) {
+      this.isPanning = true;
+      this.lastPointer = { x: e.clientX, y: e.clientY };
+      return;
+    }
+    if (this.activePointers.size === 1 && e.button === 0) {
+      this.dispatchToolDown(e);
+    }
+  };
+  onPointerMove = (e) => {
+    if (this.activePointers.has(e.pointerId)) {
+      this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    }
+    if (this.activePointers.size === 2) {
+      this.handlePinchMove();
+      return;
+    }
+    if (this.isPanning) {
+      const dx = e.clientX - this.lastPointer.x;
+      const dy = e.clientY - this.lastPointer.y;
+      this.lastPointer = { x: e.clientX, y: e.clientY };
+      this.camera.pan(dx, dy);
+      return;
+    }
+    if (this.isToolActive) {
+      this.dispatchToolMove(e);
+    } else if (this.activePointers.size === 0) {
+      this.dispatchToolHover(e);
+    }
+  };
+  onPointerUp = (e) => {
+    this.activePointers.delete(e.pointerId);
+    if (this.activePointers.size < 2) {
+      this.lastPinchDistance = 0;
+    }
+    if (this.isPanning && this.activePointers.size === 0) {
+      this.isPanning = false;
+    }
+    if (this.isToolActive) {
+      this.dispatchToolUp(e);
+      this.isToolActive = false;
+    }
+  };
+  onKeyDown = (e) => {
+    if (e.target?.isContentEditable) return;
+    if (e.key === " ") {
+      this.spaceHeld = true;
+    }
+    if (e.key === "Delete" || e.key === "Backspace") {
+      this.deleteSelected();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+      e.preventDefault();
+      this.handleUndo();
+    }
+    if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey)) {
+      e.preventDefault();
+      this.handleRedo();
+    }
+  };
+  onKeyUp = (e) => {
+    if (e.key === " ") {
+      this.spaceHeld = false;
+    }
+  };
+  startPinch() {
+    this.isPanning = true;
+    const [a, b] = this.getPinchPoints();
+    this.lastPinchDistance = this.distance(a, b);
+    this.lastPinchCenter = this.midpoint(a, b);
+    this.lastPointer = { ...this.lastPinchCenter };
+  }
+  handlePinchMove() {
+    const [a, b] = this.getPinchPoints();
+    const dist = this.distance(a, b);
+    const center = this.midpoint(a, b);
+    if (this.lastPinchDistance > 0) {
+      const scale = dist / this.lastPinchDistance;
+      const newZoom = this.camera.zoom * scale;
+      this.camera.zoomAt(newZoom, center);
+    }
+    const dx = center.x - this.lastPointer.x;
+    const dy = center.y - this.lastPointer.y;
+    this.camera.pan(dx, dy);
+    this.lastPinchDistance = dist;
+    this.lastPinchCenter = center;
+    this.lastPointer = { ...center };
+  }
+  getPinchPoints() {
+    const pts = [...this.activePointers.values()];
+    return [pts[0] ?? { x: 0, y: 0 }, pts[1] ?? { x: 0, y: 0 }];
+  }
+  distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  midpoint(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  }
+  toPointerState(e) {
+    return { x: e.clientX, y: e.clientY, pressure: e.pressure };
+  }
+  dispatchToolDown(e) {
+    if (!this.toolManager || !this.toolContext) return;
+    this.historyRecorder?.begin();
+    this.isToolActive = true;
+    this.toolManager.handlePointerDown(this.toPointerState(e), this.toolContext);
+  }
+  dispatchToolMove(e) {
+    if (!this.toolManager || !this.toolContext) return;
+    this.toolManager.handlePointerMove(this.toPointerState(e), this.toolContext);
+  }
+  dispatchToolHover(e) {
+    if (!this.toolManager?.activeTool || !this.toolContext) return;
+    const tool = this.toolManager.activeTool;
+    if (tool.onHover) {
+      tool.onHover(this.toPointerState(e), this.toolContext);
+    }
+  }
+  dispatchToolUp(e) {
+    if (!this.toolManager || !this.toolContext) return;
+    this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
+    this.historyRecorder?.commit();
+  }
+  deleteSelected() {
+    if (!this.toolManager || !this.toolContext) return;
+    const tool = this.toolManager.activeTool;
+    if (tool?.name !== "select") return;
+    const selectTool = tool;
+    const ids = selectTool.selectedIds;
+    if (ids.length === 0) return;
+    this.historyRecorder?.begin();
+    for (const id of ids) {
+      this.toolContext.store.remove(id);
+    }
+    this.historyRecorder?.commit();
+    this.toolContext.requestRender();
+  }
+  handleUndo() {
+    if (!this.historyStack || !this.toolContext) return;
+    this.historyRecorder?.pause();
+    this.historyStack.undo(this.toolContext.store);
+    this.historyRecorder?.resume();
+    this.toolContext.requestRender();
+  }
+  handleRedo() {
+    if (!this.historyStack || !this.toolContext) return;
+    this.historyRecorder?.pause();
+    this.historyStack.redo(this.toolContext.store);
+    this.historyRecorder?.resume();
+    this.toolContext.requestRender();
+  }
+  cancelToolIfActive(e) {
+    if (this.isToolActive) {
+      this.dispatchToolUp(e);
+      this.isToolActive = false;
+    }
+  }
+};
+
+// src/elements/element-store.ts
+var ElementStore = class {
+  elements = /* @__PURE__ */ new Map();
+  bus = new EventBus();
+  get count() {
+    return this.elements.size;
+  }
+  getAll() {
+    return [...this.elements.values()].sort((a, b) => a.zIndex - b.zIndex);
+  }
+  getById(id) {
+    return this.elements.get(id);
+  }
+  getElementsByType(type) {
+    return this.getAll().filter(
+      (el) => el.type === type
+    );
+  }
+  add(element) {
+    this.elements.set(element.id, element);
+    this.bus.emit("add", element);
+  }
+  update(id, partial) {
+    const existing = this.elements.get(id);
+    if (!existing) return;
+    const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    this.elements.set(id, updated);
+    this.bus.emit("update", { previous: existing, current: updated });
+  }
+  remove(id) {
+    const element = this.elements.get(id);
+    if (!element) return;
+    this.elements.delete(id);
+    this.bus.emit("remove", element);
+  }
+  clear() {
+    this.elements.clear();
+    this.bus.emit("clear", null);
+  }
+  snapshot() {
+    return this.getAll().map((el) => ({ ...el }));
+  }
+  loadSnapshot(elements) {
+    this.elements.clear();
+    for (const el of elements) {
+      this.elements.set(el.id, el);
+    }
+  }
+  on(event, listener) {
+    return this.bus.on(event, listener);
+  }
+};
+
+// src/elements/arrow-geometry.ts
+function getArrowControlPoint(from, to, bend) {
+  const midX = (from.x + to.x) / 2;
+  const midY = (from.y + to.y) / 2;
+  if (bend === 0) return { x: midX, y: midY };
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return { x: midX, y: midY };
+  const perpX = -dy / len;
+  const perpY = dx / len;
+  return {
+    x: midX + perpX * bend,
+    y: midY + perpY * bend
+  };
+}
+function getArrowMidpoint(from, to, bend) {
+  const cp = getArrowControlPoint(from, to, bend);
+  return {
+    x: 0.25 * from.x + 0.5 * cp.x + 0.25 * to.x,
+    y: 0.25 * from.y + 0.5 * cp.y + 0.25 * to.y
+  };
+}
+function getBendFromPoint(from, to, dragPoint) {
+  const midX = (from.x + to.x) / 2;
+  const midY = (from.y + to.y) / 2;
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return 0;
+  const perpX = -dy / len;
+  const perpY = dx / len;
+  return (dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY;
+}
+function getArrowTangentAngle(from, to, bend, t) {
+  const cp = getArrowControlPoint(from, to, bend);
+  const tangentX = 2 * (1 - t) * (cp.x - from.x) + 2 * t * (to.x - cp.x);
+  const tangentY = 2 * (1 - t) * (cp.y - from.y) + 2 * t * (to.y - cp.y);
+  return Math.atan2(tangentY, tangentX);
+}
+function isNearBezier(point, from, to, bend, threshold) {
+  if (bend === 0) return isNearLine(point, from, to, threshold);
+  const cp = getArrowControlPoint(from, to, bend);
+  const segments = 20;
+  for (let i = 0; i < segments; i++) {
+    const t0 = i / segments;
+    const t1 = (i + 1) / segments;
+    const a = bezierPoint(from, cp, to, t0);
+    const b = bezierPoint(from, cp, to, t1);
+    if (isNearLine(point, a, b, threshold)) return true;
+  }
+  return false;
+}
+function getArrowBounds(from, to, bend) {
+  if (bend === 0) {
+    const minX2 = Math.min(from.x, to.x);
+    const minY2 = Math.min(from.y, to.y);
+    return {
+      x: minX2,
+      y: minY2,
+      w: Math.abs(to.x - from.x),
+      h: Math.abs(to.y - from.y)
+    };
+  }
+  const cp = getArrowControlPoint(from, to, bend);
+  const steps = 20;
+  let minX = Math.min(from.x, to.x);
+  let minY = Math.min(from.y, to.y);
+  let maxX = Math.max(from.x, to.x);
+  let maxY = Math.max(from.y, to.y);
+  for (let i = 1; i < steps; i++) {
+    const t = i / steps;
+    const p = bezierPoint(from, cp, to, t);
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function bezierPoint(from, cp, to, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * from.x + 2 * mt * t * cp.x + t * t * to.x,
+    y: mt * mt * from.y + 2 * mt * t * cp.y + t * t * to.y
+  };
+}
+function isNearLine(point, a, b, threshold) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) {
+    return Math.hypot(point.x - a.x, point.y - a.y) <= threshold;
+  }
+  const t = Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / lenSq));
+  const projX = a.x + t * dx;
+  const projY = a.y + t * dy;
+  return Math.hypot(point.x - projX, point.y - projY) <= threshold;
+}
+
+// src/elements/element-renderer.ts
+var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html"]);
+var ARROWHEAD_LENGTH = 12;
+var ARROWHEAD_ANGLE = Math.PI / 6;
+var ElementRenderer = class {
+  isDomElement(element) {
+    return DOM_ELEMENT_TYPES.has(element.type);
+  }
+  renderCanvasElement(ctx, element) {
+    switch (element.type) {
+      case "stroke":
+        this.renderStroke(ctx, element);
+        break;
+      case "arrow":
+        this.renderArrow(ctx, element);
+        break;
+    }
+  }
+  renderStroke(ctx, stroke) {
+    if (stroke.points.length < 2) return;
+    ctx.save();
+    ctx.translate(stroke.position.x, stroke.position.y);
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.globalAlpha = stroke.opacity;
+    ctx.beginPath();
+    const first = stroke.points[0];
+    if (first) {
+      ctx.moveTo(first.x, first.y);
+    }
+    for (let i = 1; i < stroke.points.length; i++) {
+      const pt = stroke.points[i];
+      if (pt) {
+        ctx.lineTo(pt.x, pt.y);
+      }
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+  renderArrow(ctx, arrow) {
+    ctx.save();
+    ctx.strokeStyle = arrow.color;
+    ctx.lineWidth = arrow.width;
+    ctx.lineCap = "round";
+    ctx.beginPath();
+    ctx.moveTo(arrow.from.x, arrow.from.y);
+    if (arrow.bend !== 0) {
+      const cp = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+      ctx.quadraticCurveTo(cp.x, cp.y, arrow.to.x, arrow.to.y);
+    } else {
+      ctx.lineTo(arrow.to.x, arrow.to.y);
+    }
+    ctx.stroke();
+    this.renderArrowhead(ctx, arrow);
+    ctx.restore();
+  }
+  renderArrowhead(ctx, arrow) {
+    const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+    ctx.beginPath();
+    ctx.moveTo(arrow.to.x, arrow.to.y);
+    ctx.lineTo(
+      arrow.to.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
+      arrow.to.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
+    );
+    ctx.lineTo(
+      arrow.to.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
+      arrow.to.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
+    );
+    ctx.closePath();
+    ctx.fillStyle = arrow.color;
+    ctx.fill();
+  }
+};
+
+// src/elements/note-editor.ts
+var NoteEditor = class {
+  editingId = null;
+  editingNode = null;
+  blurHandler = null;
+  keyHandler = null;
+  pointerHandler = null;
+  pendingEditId = null;
+  get isEditing() {
+    return this.editingId !== null;
+  }
+  get editingElementId() {
+    return this.editingId;
+  }
+  startEditing(node, elementId, store) {
+    if (this.editingId === elementId) return;
+    if (this.editingId) {
+      this.stopEditing(store);
+    }
+    this.pendingEditId = elementId;
+    requestAnimationFrame(() => {
+      if (this.pendingEditId !== elementId) return;
+      this.pendingEditId = null;
+      this.activateEditing(node, elementId, store);
+    });
+  }
+  stopEditing(store) {
+    this.pendingEditId = null;
+    if (!this.editingId || !this.editingNode) return;
+    const text = this.editingNode.textContent ?? "";
+    store.update(this.editingId, { text });
+    this.editingNode.contentEditable = "false";
+    Object.assign(this.editingNode.style, {
+      userSelect: "none",
+      cursor: "default"
+    });
+    if (this.blurHandler) {
+      this.editingNode.removeEventListener("blur", this.blurHandler);
+    }
+    if (this.keyHandler) {
+      this.editingNode.removeEventListener("keydown", this.keyHandler);
+    }
+    if (this.pointerHandler) {
+      this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
+    }
+    this.editingId = null;
+    this.editingNode = null;
+    this.blurHandler = null;
+    this.keyHandler = null;
+    this.pointerHandler = null;
+  }
+  destroy(store) {
+    this.pendingEditId = null;
+    if (this.isEditing) {
+      this.stopEditing(store);
+    }
+  }
+  activateEditing(node, elementId, store) {
+    this.editingId = elementId;
+    this.editingNode = node;
+    node.contentEditable = "true";
+    Object.assign(node.style, {
+      userSelect: "text",
+      cursor: "text",
+      outline: "none"
+    });
+    node.focus();
+    const selection = window.getSelection?.();
+    if (selection) {
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    this.blurHandler = () => this.stopEditing(store);
+    this.keyHandler = (e) => {
+      if (e.key === "Escape") {
+        node.blur();
+      }
+      e.stopPropagation();
+    };
+    this.pointerHandler = (e) => {
+      e.stopPropagation();
+    };
+    node.addEventListener("blur", this.blurHandler);
+    node.addEventListener("keydown", this.keyHandler);
+    node.addEventListener("pointerdown", this.pointerHandler);
+  }
+};
+
+// src/tools/tool-manager.ts
+var ToolManager = class {
+  tools = /* @__PURE__ */ new Map();
+  current = null;
+  changeListeners = /* @__PURE__ */ new Set();
+  get activeTool() {
+    return this.current;
+  }
+  get toolNames() {
+    return [...this.tools.keys()];
+  }
+  register(tool) {
+    this.tools.set(tool.name, tool);
+  }
+  setTool(name, ctx) {
+    const tool = this.tools.get(name);
+    if (!tool) return;
+    this.current?.onDeactivate?.(ctx);
+    this.current = tool;
+    this.current.onActivate?.(ctx);
+    this.changeListeners.forEach((fn) => fn(name));
+  }
+  handlePointerDown(state, ctx) {
+    this.current?.onPointerDown(state, ctx);
+  }
+  handlePointerMove(state, ctx) {
+    this.current?.onPointerMove(state, ctx);
+  }
+  handlePointerUp(state, ctx) {
+    this.current?.onPointerUp(state, ctx);
+  }
+  onChange(listener) {
+    this.changeListeners.add(listener);
+    return () => this.changeListeners.delete(listener);
+  }
+};
+
+// src/history/history-stack.ts
+var DEFAULT_MAX_SIZE = 100;
+var HistoryStack = class {
+  undoStack = [];
+  redoStack = [];
+  maxSize;
+  changeListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.maxSize = options.maxSize ?? DEFAULT_MAX_SIZE;
+  }
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  get undoCount() {
+    return this.undoStack.length;
+  }
+  get redoCount() {
+    return this.redoStack.length;
+  }
+  push(command) {
+    this.undoStack.push(command);
+    this.redoStack = [];
+    if (this.undoStack.length > this.maxSize) {
+      this.undoStack.shift();
+    }
+    this.notifyChange();
+  }
+  undo(store) {
+    const command = this.undoStack.pop();
+    if (!command) return false;
+    command.undo(store);
+    this.redoStack.push(command);
+    this.notifyChange();
+    return true;
+  }
+  redo(store) {
+    const command = this.redoStack.pop();
+    if (!command) return false;
+    command.execute(store);
+    this.undoStack.push(command);
+    this.notifyChange();
+    return true;
+  }
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.notifyChange();
+  }
+  onChange(listener) {
+    this.changeListeners.add(listener);
+    return () => this.changeListeners.delete(listener);
+  }
+  notifyChange() {
+    this.changeListeners.forEach((fn) => fn());
+  }
+};
+
+// src/history/commands.ts
+var AddElementCommand = class {
+  element;
+  constructor(element) {
+    this.element = { ...element };
+  }
+  execute(store) {
+    store.add(this.element);
+  }
+  undo(store) {
+    store.remove(this.element.id);
+  }
+};
+var RemoveElementCommand = class {
+  element;
+  constructor(element) {
+    this.element = { ...element };
+  }
+  execute(store) {
+    store.remove(this.element.id);
+  }
+  undo(store) {
+    store.add(this.element);
+  }
+};
+var UpdateElementCommand = class {
+  constructor(id, previous, current) {
+    this.id = id;
+    this.previous = previous;
+    this.current = current;
+  }
+  execute(store) {
+    store.update(this.id, { ...this.current });
+  }
+  undo(store) {
+    store.update(this.id, { ...this.previous });
+  }
+};
+var BatchCommand = class {
+  commands;
+  constructor(commands) {
+    this.commands = [...commands];
+  }
+  execute(store) {
+    for (const cmd of this.commands) {
+      cmd.execute(store);
+    }
+  }
+  undo(store) {
+    for (let i = this.commands.length - 1; i >= 0; i--) {
+      this.commands[i]?.undo(store);
+    }
+  }
+};
+
+// src/history/history-recorder.ts
+var HistoryRecorder = class {
+  constructor(store, stack) {
+    this.store = store;
+    this.stack = stack;
+    this.unsubscribers = [
+      store.on("add", (el) => this.onAdd(el)),
+      store.on("remove", (el) => this.onRemove(el)),
+      store.on("update", ({ previous, current }) => this.onUpdate(previous, current))
+    ];
+  }
+  recording = true;
+  transaction = null;
+  updateSnapshots = /* @__PURE__ */ new Map();
+  unsubscribers;
+  pause() {
+    this.recording = false;
+  }
+  resume() {
+    this.recording = true;
+  }
+  begin() {
+    this.transaction = [];
+    this.updateSnapshots.clear();
+  }
+  commit() {
+    if (!this.transaction) return;
+    const finalCommands = this.flushUpdateSnapshots();
+    const all = [...this.transaction, ...finalCommands];
+    this.transaction = null;
+    this.updateSnapshots.clear();
+    if (all.length === 0) return;
+    const first = all[0];
+    this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+  }
+  rollback() {
+    this.transaction = null;
+    this.updateSnapshots.clear();
+  }
+  destroy() {
+    this.unsubscribers.forEach((fn) => fn());
+  }
+  record(command) {
+    if (this.transaction) {
+      this.transaction.push(command);
+    } else {
+      this.stack.push(command);
+    }
+  }
+  onAdd(element) {
+    if (!this.recording) return;
+    this.record(new AddElementCommand(element));
+  }
+  onRemove(element) {
+    if (!this.recording) return;
+    if (this.transaction && this.updateSnapshots.has(element.id)) {
+      this.updateSnapshots.delete(element.id);
+    }
+    this.record(new RemoveElementCommand(element));
+  }
+  onUpdate(previous, current) {
+    if (!this.recording) return;
+    if (this.transaction) {
+      if (!this.updateSnapshots.has(current.id)) {
+        this.updateSnapshots.set(current.id, { ...previous });
+      }
+    } else {
+      this.stack.push(new UpdateElementCommand(current.id, previous, current));
+    }
+  }
+  flushUpdateSnapshots() {
+    const commands = [];
+    for (const [id, previous] of this.updateSnapshots) {
+      const current = this.store.getById(id);
+      if (current) {
+        commands.push(new UpdateElementCommand(id, previous, current));
+      }
+    }
+    return commands;
+  }
+};
+
+// src/elements/create-id.ts
+var counter = 0;
+function createId(prefix) {
+  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
+}
+
+// src/elements/element-factory.ts
+function createStroke(input) {
+  return {
+    id: createId("stroke"),
+    type: "stroke",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    points: input.points,
+    color: input.color ?? "#000000",
+    width: input.width ?? 2,
+    opacity: input.opacity ?? 1
+  };
+}
+function createNote(input) {
+  return {
+    id: createId("note"),
+    type: "note",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    size: input.size ?? { w: 200, h: 100 },
+    text: input.text ?? "",
+    backgroundColor: input.backgroundColor ?? "#ffeb3b"
+  };
+}
+function createArrow(input) {
+  return {
+    id: createId("arrow"),
+    type: "arrow",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    from: input.from,
+    to: input.to,
+    bend: input.bend ?? 0,
+    color: input.color ?? "#000000",
+    width: input.width ?? 2
+  };
+}
+function createImage(input) {
+  return {
+    id: createId("image"),
+    type: "image",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    size: input.size,
+    src: input.src
+  };
+}
+function createHtmlElement(input) {
+  return {
+    id: createId("html"),
+    type: "html",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    size: input.size
+  };
+}
+
+// src/canvas/viewport.ts
+var Viewport = class {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.camera = new Camera(options.camera);
+    this.background = new Background(options.background);
+    this.store = new ElementStore();
+    this.toolManager = new ToolManager();
+    this.renderer = new ElementRenderer();
+    this.noteEditor = new NoteEditor();
+    this.history = new HistoryStack();
+    this.historyRecorder = new HistoryRecorder(this.store, this.history);
+    this.wrapper = this.createWrapper();
+    this.canvasEl = this.createCanvas();
+    this.domLayer = this.createDomLayer();
+    this.wrapper.appendChild(this.canvasEl);
+    this.wrapper.appendChild(this.domLayer);
+    this.container.appendChild(this.wrapper);
+    this.toolContext = {
+      camera: this.camera,
+      store: this.store,
+      requestRender: () => this.requestRender(),
+      switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
+      editElement: (id) => this.startEditingNote(id),
+      setCursor: (cursor) => {
+        this.wrapper.style.cursor = cursor;
+      }
+    };
+    this.inputHandler = new InputHandler(this.wrapper, this.camera, {
+      toolManager: this.toolManager,
+      toolContext: this.toolContext,
+      historyRecorder: this.historyRecorder,
+      historyStack: this.history
+    });
+    this.unsubCamera = this.camera.onChange(() => {
+      this.applyCameraTransform();
+      this.requestRender();
+    });
+    this.unsubStore = [
+      this.store.on("add", () => this.requestRender()),
+      this.store.on("remove", (el) => this.removeDomNode(el.id)),
+      this.store.on("update", () => this.requestRender()),
+      this.store.on("clear", () => this.clearDomNodes())
+    ];
+    this.wrapper.addEventListener("dblclick", this.onDblClick);
+    this.wrapper.addEventListener("dragover", this.onDragOver);
+    this.wrapper.addEventListener("drop", this.onDrop);
+    this.observeResize();
+    this.syncCanvasSize();
+    this.startRenderLoop();
+  }
+  camera;
+  store;
+  toolManager;
+  history;
+  domLayer;
+  canvasEl;
+  wrapper;
+  unsubCamera;
+  unsubStore;
+  inputHandler;
+  background;
+  renderer;
+  noteEditor;
+  historyRecorder;
+  toolContext;
+  resizeObserver = null;
+  animFrameId = 0;
+  needsRender = true;
+  domNodes = /* @__PURE__ */ new Map();
+  htmlContent = /* @__PURE__ */ new Map();
+  get ctx() {
+    return this.canvasEl.getContext("2d");
+  }
+  requestRender() {
+    this.needsRender = true;
+  }
+  exportState() {
+    return exportState(this.store.snapshot(), this.camera);
+  }
+  exportJSON() {
+    return JSON.stringify(this.exportState());
+  }
+  loadState(state) {
+    this.historyRecorder.pause();
+    this.noteEditor.destroy(this.store);
+    this.clearDomNodes();
+    this.store.loadSnapshot(state.elements);
+    this.history.clear();
+    this.historyRecorder.resume();
+    this.camera.moveTo(state.camera.position.x, state.camera.position.y);
+    this.camera.setZoom(state.camera.zoom);
+  }
+  loadJSON(json) {
+    this.loadState(parseState(json));
+  }
+  undo() {
+    this.historyRecorder.pause();
+    const result = this.history.undo(this.store);
+    this.historyRecorder.resume();
+    if (result) this.requestRender();
+    return result;
+  }
+  redo() {
+    this.historyRecorder.pause();
+    const result = this.history.redo(this.store);
+    this.historyRecorder.resume();
+    if (result) this.requestRender();
+    return result;
+  }
+  addImage(src, position, size = { w: 300, h: 200 }) {
+    const image = createImage({ position, size, src });
+    this.historyRecorder.begin();
+    this.store.add(image);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
+  addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
+    const el = createHtmlElement({ position, size });
+    this.htmlContent.set(el.id, dom);
+    this.historyRecorder.begin();
+    this.store.add(el);
+    this.historyRecorder.commit();
+    this.requestRender();
+    return el.id;
+  }
+  destroy() {
+    cancelAnimationFrame(this.animFrameId);
+    this.noteEditor.destroy(this.store);
+    this.historyRecorder.destroy();
+    this.wrapper.removeEventListener("dblclick", this.onDblClick);
+    this.wrapper.removeEventListener("dragover", this.onDragOver);
+    this.wrapper.removeEventListener("drop", this.onDrop);
+    this.inputHandler.destroy();
+    this.unsubCamera();
+    this.unsubStore.forEach((fn) => fn());
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.wrapper.remove();
+  }
+  startRenderLoop() {
+    const loop = () => {
+      if (this.needsRender) {
+        this.render();
+        this.needsRender = false;
+      }
+      this.animFrameId = requestAnimationFrame(loop);
+    };
+    this.animFrameId = requestAnimationFrame(loop);
+  }
+  render() {
+    const ctx = this.ctx;
+    if (!ctx) return;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    ctx.save();
+    ctx.scale(dpr, dpr);
+    this.background.render(ctx, this.camera);
+    ctx.save();
+    ctx.translate(this.camera.position.x, this.camera.position.y);
+    ctx.scale(this.camera.zoom, this.camera.zoom);
+    for (const element of this.store.getAll()) {
+      if (this.renderer.isDomElement(element)) {
+        this.syncDomNode(element);
+      } else {
+        this.renderer.renderCanvasElement(ctx, element);
+      }
+    }
+    const activeTool = this.toolManager.activeTool;
+    if (activeTool?.renderOverlay) {
+      activeTool.renderOverlay(ctx);
+    }
+    ctx.restore();
+    ctx.restore();
+  }
+  startEditingNote(id) {
+    const element = this.store.getById(id);
+    if (!element || element.type !== "note") return;
+    this.render();
+    const node = this.domNodes.get(id);
+    if (node) {
+      this.noteEditor.startEditing(node, id, this.store);
+    }
+  }
+  onDblClick = (e) => {
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el) return;
+    const nodeEl = el.closest("[data-element-id]");
+    if (!nodeEl) return;
+    const elementId = nodeEl.dataset["elementId"];
+    if (elementId) this.startEditingNote(elementId);
+  };
+  onDragOver = (e) => {
+    e.preventDefault();
+  };
+  onDrop = (e) => {
+    e.preventDefault();
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+    const rect = this.wrapper.getBoundingClientRect();
+    for (const file of files) {
+      if (!file.type.startsWith("image/")) continue;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const src = reader.result;
+        if (typeof src !== "string") return;
+        const screenPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        const worldPos = this.camera.screenToWorld(screenPos);
+        this.addImage(src, worldPos);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+  syncDomNode(element) {
+    let node = this.domNodes.get(element.id);
+    if (!node) {
+      node = document.createElement("div");
+      node.dataset["elementId"] = element.id;
+      Object.assign(node.style, {
+        position: "absolute",
+        pointerEvents: "auto"
+      });
+      this.domLayer.appendChild(node);
+      this.domNodes.set(element.id, node);
+    }
+    const size = "size" in element ? element.size : null;
+    Object.assign(node.style, {
+      left: `${element.position.x}px`,
+      top: `${element.position.y}px`,
+      width: size ? `${size.w}px` : "auto",
+      height: size ? `${size.h}px` : "auto"
+    });
+    this.renderDomContent(node, element);
+  }
+  renderDomContent(node, element) {
+    if (element.type === "note") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          backgroundColor: element.backgroundColor,
+          padding: "8px",
+          borderRadius: "4px",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+          fontSize: "14px",
+          overflow: "hidden",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.startEditingNote(id);
+        });
+      }
+      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        node.style.backgroundColor = element.backgroundColor;
+      }
+    }
+    if (element.type === "image") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        const img = document.createElement("img");
+        img.src = element.src;
+        Object.assign(img.style, {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          pointerEvents: "none"
+        });
+        img.draggable = false;
+        node.appendChild(img);
+      } else {
+        const img = node.querySelector("img");
+        if (img && img.src !== element.src) {
+          img.src = element.src;
+        }
+      }
+    }
+    if (element.type === "html" && !node.dataset["initialized"]) {
+      const content = this.htmlContent.get(element.id);
+      if (content) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          overflow: "hidden"
+        });
+        node.appendChild(content);
+      }
+    }
+  }
+  removeDomNode(id) {
+    this.htmlContent.delete(id);
+    const node = this.domNodes.get(id);
+    if (node) {
+      node.remove();
+      this.domNodes.delete(id);
+    }
+    this.requestRender();
+  }
+  clearDomNodes() {
+    this.domNodes.forEach((node) => node.remove());
+    this.domNodes.clear();
+    this.htmlContent.clear();
+    this.requestRender();
+  }
+  createWrapper() {
+    const el = document.createElement("div");
+    Object.assign(el.style, {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    });
+    return el;
+  }
+  createCanvas() {
+    const el = document.createElement("canvas");
+    Object.assign(el.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%"
+    });
+    return el;
+  }
+  createDomLayer() {
+    const el = document.createElement("div");
+    Object.assign(el.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      transformOrigin: "0 0"
+    });
+    return el;
+  }
+  applyCameraTransform() {
+    this.domLayer.style.transform = this.camera.toCSSTransform();
+  }
+  syncCanvasSize() {
+    const rect = this.container.getBoundingClientRect();
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    this.canvasEl.width = rect.width * dpr;
+    this.canvasEl.height = rect.height * dpr;
+    this.requestRender();
+  }
+  observeResize() {
+    if (typeof ResizeObserver === "undefined") return;
+    this.resizeObserver = new ResizeObserver(() => this.syncCanvasSize());
+    this.resizeObserver.observe(this.container);
+  }
+};
+
+// src/tools/hand-tool.ts
+var HandTool = class {
+  name = "hand";
+  panning = false;
+  lastScreen = { x: 0, y: 0 };
+  onActivate(ctx) {
+    ctx.setCursor?.("grab");
+  }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
+  }
+  onPointerDown(state, ctx) {
+    this.panning = true;
+    this.lastScreen = { x: state.x, y: state.y };
+    ctx.setCursor?.("grabbing");
+  }
+  onPointerMove(state, ctx) {
+    if (!this.panning) return;
+    const dx = state.x - this.lastScreen.x;
+    const dy = state.y - this.lastScreen.y;
+    this.lastScreen = { x: state.x, y: state.y };
+    ctx.camera.pan(dx, dy);
+  }
+  onPointerUp(_state, ctx) {
+    this.panning = false;
+    ctx.setCursor?.("grab");
+  }
+};
+
+// src/tools/pencil-tool.ts
+var MIN_POINTS_FOR_STROKE = 2;
+var PencilTool = class {
+  name = "pencil";
+  drawing = false;
+  points = [];
+  color;
+  width;
+  constructor(options = {}) {
+    this.color = options.color ?? "#000000";
+    this.width = options.width ?? 2;
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.("crosshair");
+  }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
+  }
+  setOptions(options) {
+    if (options.color !== void 0) this.color = options.color;
+    if (options.width !== void 0) this.width = options.width;
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.points = [world];
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.points.push(world);
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    if (this.points.length < MIN_POINTS_FOR_STROKE) {
+      this.points = [];
+      return;
+    }
+    const stroke = createStroke({
+      points: this.points,
+      color: this.color,
+      width: this.width
+    });
+    ctx.store.add(stroke);
+    this.points = [];
+    ctx.requestRender();
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing || this.points.length < 2) return;
+    ctx.save();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.globalAlpha = 0.8;
+    ctx.beginPath();
+    const first = this.points[0];
+    if (!first) return;
+    ctx.moveTo(first.x, first.y);
+    for (let i = 1; i < this.points.length; i++) {
+      const p = this.points[i];
+      if (p) ctx.lineTo(p.x, p.y);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+};
+
+// src/tools/eraser-tool.ts
+var DEFAULT_RADIUS = 20;
+function makeEraserCursor(radius) {
+  const size = radius * 2;
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><circle cx='${radius}' cy='${radius}' r='${radius - 1}' fill='none' stroke='%23666' stroke-width='1.5'/></svg>`;
+  return `url("data:image/svg+xml,${svg}") ${radius} ${radius}, crosshair`;
+}
+var EraserTool = class {
+  name = "eraser";
+  erasing = false;
+  radius;
+  cursor;
+  constructor(options = {}) {
+    this.radius = options.radius ?? DEFAULT_RADIUS;
+    this.cursor = makeEraserCursor(this.radius);
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.(this.cursor);
+  }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
+  }
+  onPointerDown(state, ctx) {
+    this.erasing = true;
+    this.eraseAt(state, ctx);
+  }
+  onPointerMove(state, ctx) {
+    if (!this.erasing) return;
+    this.eraseAt(state, ctx);
+  }
+  onPointerUp(_state, _ctx) {
+    this.erasing = false;
+  }
+  eraseAt(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const strokes = ctx.store.getElementsByType("stroke");
+    let erased = false;
+    for (const stroke of strokes) {
+      if (this.strokeIntersects(stroke, world)) {
+        ctx.store.remove(stroke.id);
+        erased = true;
+      }
+    }
+    if (erased) ctx.requestRender();
+  }
+  strokeIntersects(stroke, point) {
+    const radiusSq = this.radius * this.radius;
+    return stroke.points.some((p) => {
+      const dx = p.x + stroke.position.x - point.x;
+      const dy = p.y + stroke.position.y - point.y;
+      return dx * dx + dy * dy <= radiusSq;
+    });
+  }
+};
+
+// src/tools/arrow-handles.ts
+var HANDLE_RADIUS = 5;
+var HANDLE_HIT_PADDING = 4;
+var ARROW_HANDLE_CURSORS = {
+  start: "crosshair",
+  end: "crosshair",
+  mid: "grab"
+};
+function getArrowHandleCursor(handle, active) {
+  if (handle === "mid" && active) return "grabbing";
+  return ARROW_HANDLE_CURSORS[handle];
+}
+function getArrowHandlePositions(arrow) {
+  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+  return [
+    ["start", arrow.from],
+    ["mid", mid],
+    ["end", arrow.to]
+  ];
+}
+function hitTestArrowHandles(world, selectedIds, ctx) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const hitRadius = (HANDLE_RADIUS + HANDLE_HIT_PADDING) / zoom;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || el.type !== "arrow") continue;
+    const handles = getArrowHandlePositions(el);
+    for (const [handle, pos] of handles) {
+      const dx = world.x - pos.x;
+      const dy = world.y - pos.y;
+      if (dx * dx + dy * dy <= hitRadius * hitRadius) {
+        return { elementId: id, handle };
+      }
+    }
+  }
+  return null;
+}
+function applyArrowHandleDrag(handle, elementId, world, ctx) {
+  const el = ctx.store.getById(elementId);
+  if (!el || el.type !== "arrow") return;
+  switch (handle) {
+    case "start":
+      ctx.store.update(elementId, {
+        from: { x: world.x, y: world.y },
+        position: { x: world.x, y: world.y }
+      });
+      break;
+    case "end":
+      ctx.store.update(elementId, {
+        to: { x: world.x, y: world.y }
+      });
+      break;
+    case "mid": {
+      const bend = getBendFromPoint(el.from, el.to, world);
+      ctx.store.update(elementId, { bend });
+      break;
+    }
+  }
+  ctx.requestRender();
+}
+function renderArrowHandles(canvasCtx, arrow, zoom) {
+  const radius = HANDLE_RADIUS / zoom;
+  const handles = getArrowHandlePositions(arrow);
+  canvasCtx.setLineDash([]);
+  canvasCtx.lineWidth = 1.5 / zoom;
+  for (const [handle, pos] of handles) {
+    canvasCtx.fillStyle = handle === "mid" ? "#2196F3" : "#ffffff";
+    canvasCtx.strokeStyle = "#2196F3";
+    canvasCtx.beginPath();
+    canvasCtx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
+    canvasCtx.fill();
+    canvasCtx.stroke();
+  }
+}
+
+// src/tools/select-tool.ts
+var HANDLE_SIZE = 8;
+var HANDLE_HIT_PADDING2 = 4;
+var SELECTION_PAD = 4;
+var MIN_ELEMENT_SIZE = 20;
+var HANDLE_CURSORS = {
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize"
+};
+var SelectTool = class {
+  name = "select";
+  _selectedIds = [];
+  mode = { type: "idle" };
+  lastWorld = { x: 0, y: 0 };
+  currentWorld = { x: 0, y: 0 };
+  ctx = null;
+  get selectedIds() {
+    return [...this._selectedIds];
+  }
+  get isMarqueeActive() {
+    return this.mode.type === "marquee";
+  }
+  onActivate(ctx) {
+    this.ctx = ctx;
+  }
+  onDeactivate(ctx) {
+    this._selectedIds = [];
+    this.mode = { type: "idle" };
+    ctx.setCursor?.("default");
+  }
+  onPointerDown(state, ctx) {
+    this.ctx = ctx;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.lastWorld = world;
+    this.currentWorld = world;
+    const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
+    if (arrowHit) {
+      this.mode = {
+        type: "arrow-handle",
+        elementId: arrowHit.elementId,
+        handle: arrowHit.handle
+      };
+      ctx.requestRender();
+      return;
+    }
+    const resizeHit = this.hitTestResizeHandle(world, ctx);
+    if (resizeHit) {
+      const el = ctx.store.getById(resizeHit.elementId);
+      if (el) {
+        this.mode = {
+          type: "resizing",
+          elementId: resizeHit.elementId,
+          handle: resizeHit.handle
+        };
+        ctx.requestRender();
+        return;
+      }
+    }
+    const hit = this.hitTest(world, ctx);
+    if (hit) {
+      const alreadySelected = this._selectedIds.includes(hit.id);
+      if (!alreadySelected) {
+        this._selectedIds = [hit.id];
+      }
+      this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
+    } else {
+      this._selectedIds = [];
+      this.mode = { type: "marquee", start: world };
+    }
+    ctx.requestRender();
+  }
+  onPointerMove(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.currentWorld = world;
+    if (this.mode.type === "arrow-handle") {
+      ctx.setCursor?.(getArrowHandleCursor(this.mode.handle, true));
+      applyArrowHandleDrag(this.mode.handle, this.mode.elementId, world, ctx);
+      return;
+    }
+    if (this.mode.type === "resizing") {
+      ctx.setCursor?.(HANDLE_CURSORS[this.mode.handle]);
+      this.handleResize(world, ctx);
+      return;
+    }
+    if (this.mode.type === "dragging" && this._selectedIds.length > 0) {
+      ctx.setCursor?.("move");
+      const dx = world.x - this.lastWorld.x;
+      const dy = world.y - this.lastWorld.y;
+      this.lastWorld = world;
+      for (const id of this._selectedIds) {
+        const el = ctx.store.getById(id);
+        if (!el || el.locked) continue;
+        if (el.type === "arrow") {
+          ctx.store.update(id, {
+            position: { x: el.position.x + dx, y: el.position.y + dy },
+            from: { x: el.from.x + dx, y: el.from.y + dy },
+            to: { x: el.to.x + dx, y: el.to.y + dy }
+          });
+        } else {
+          ctx.store.update(id, {
+            position: { x: el.position.x + dx, y: el.position.y + dy }
+          });
+        }
+      }
+      ctx.requestRender();
+      return;
+    }
+    if (this.mode.type === "marquee") {
+      ctx.setCursor?.("crosshair");
+      ctx.requestRender();
+      return;
+    }
+    this.updateHoverCursor(world, ctx);
+  }
+  onPointerUp(_state, ctx) {
+    if (this.mode.type === "marquee") {
+      const rect = this.getMarqueeRect();
+      if (rect) {
+        this._selectedIds = this.findElementsInRect(rect, ctx);
+      }
+      ctx.requestRender();
+    }
+    this.mode = { type: "idle" };
+    ctx.setCursor?.("default");
+  }
+  onHover(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.updateHoverCursor(world, ctx);
+  }
+  renderOverlay(canvasCtx) {
+    this.renderMarquee(canvasCtx);
+    this.renderSelectionBoxes(canvasCtx);
+  }
+  updateHoverCursor(world, ctx) {
+    const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
+    if (arrowHit) {
+      ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
+      return;
+    }
+    const resizeHit = this.hitTestResizeHandle(world, ctx);
+    if (resizeHit) {
+      ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
+      return;
+    }
+    const hit = this.hitTest(world, ctx);
+    ctx.setCursor?.(hit ? "move" : "default");
+  }
+  handleResize(world, ctx) {
+    if (this.mode.type !== "resizing") return;
+    const el = ctx.store.getById(this.mode.elementId);
+    if (!el || !("size" in el)) return;
+    const { handle } = this.mode;
+    const dx = world.x - this.lastWorld.x;
+    const dy = world.y - this.lastWorld.y;
+    this.lastWorld = world;
+    let { x, y, w, h } = { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
+    switch (handle) {
+      case "se":
+        w += dx;
+        h += dy;
+        break;
+      case "sw":
+        x += dx;
+        w -= dx;
+        h += dy;
+        break;
+      case "ne":
+        y += dy;
+        w += dx;
+        h -= dy;
+        break;
+      case "nw":
+        x += dx;
+        y += dy;
+        w -= dx;
+        h -= dy;
+        break;
+    }
+    if (w < MIN_ELEMENT_SIZE) {
+      if (handle === "nw" || handle === "sw") x = el.position.x + el.size.w - MIN_ELEMENT_SIZE;
+      w = MIN_ELEMENT_SIZE;
+    }
+    if (h < MIN_ELEMENT_SIZE) {
+      if (handle === "nw" || handle === "ne") y = el.position.y + el.size.h - MIN_ELEMENT_SIZE;
+      h = MIN_ELEMENT_SIZE;
+    }
+    ctx.store.update(this.mode.elementId, {
+      position: { x, y },
+      size: { w, h }
+    });
+    ctx.requestRender();
+  }
+  hitTestResizeHandle(world, ctx) {
+    if (this._selectedIds.length === 0) return null;
+    const zoom = ctx.camera.zoom;
+    const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+    for (const id of this._selectedIds) {
+      const el = ctx.store.getById(id);
+      if (!el || !("size" in el)) continue;
+      const bounds = this.getElementBounds(el);
+      if (!bounds) continue;
+      const corners = this.getHandlePositions(bounds);
+      for (const [handle, pos] of corners) {
+        if (Math.abs(world.x - pos.x) <= handleHalf && Math.abs(world.y - pos.y) <= handleHalf) {
+          return { elementId: id, handle };
+        }
+      }
+    }
+    return null;
+  }
+  getHandlePositions(bounds) {
+    return [
+      ["nw", { x: bounds.x, y: bounds.y }],
+      ["ne", { x: bounds.x + bounds.w, y: bounds.y }],
+      ["sw", { x: bounds.x, y: bounds.y + bounds.h }],
+      ["se", { x: bounds.x + bounds.w, y: bounds.y + bounds.h }]
+    ];
+  }
+  renderMarquee(canvasCtx) {
+    if (this.mode.type !== "marquee") return;
+    const rect = this.getMarqueeRect();
+    if (!rect) return;
+    canvasCtx.save();
+    canvasCtx.strokeStyle = "#2196F3";
+    canvasCtx.fillStyle = "rgba(33, 150, 243, 0.08)";
+    canvasCtx.lineWidth = 1;
+    canvasCtx.setLineDash([4, 4]);
+    canvasCtx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+    canvasCtx.fillRect(rect.x, rect.y, rect.w, rect.h);
+    canvasCtx.restore();
+  }
+  renderSelectionBoxes(canvasCtx) {
+    if (this._selectedIds.length === 0 || !this.ctx) return;
+    const zoom = this.ctx.camera.zoom;
+    const handleWorldSize = HANDLE_SIZE / zoom;
+    canvasCtx.save();
+    canvasCtx.strokeStyle = "#2196F3";
+    canvasCtx.lineWidth = 1.5 / zoom;
+    canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+    for (const id of this._selectedIds) {
+      const el = this.ctx.store.getById(id);
+      if (!el) continue;
+      if (el.type === "arrow") {
+        renderArrowHandles(canvasCtx, el, zoom);
+        continue;
+      }
+      const bounds = this.getElementBounds(el);
+      if (!bounds) continue;
+      const pad = SELECTION_PAD / zoom;
+      canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+      if ("size" in el) {
+        canvasCtx.setLineDash([]);
+        canvasCtx.fillStyle = "#ffffff";
+        const corners = this.getHandlePositions(bounds);
+        for (const [, pos] of corners) {
+          canvasCtx.fillRect(
+            pos.x - handleWorldSize / 2,
+            pos.y - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+          canvasCtx.strokeRect(
+            pos.x - handleWorldSize / 2,
+            pos.y - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+        }
+        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+      }
+    }
+    canvasCtx.restore();
+  }
+  getMarqueeRect() {
+    if (this.mode.type !== "marquee") return null;
+    const { start } = this.mode;
+    const end = this.currentWorld;
+    const x = Math.min(start.x, end.x);
+    const y = Math.min(start.y, end.y);
+    const w = Math.abs(end.x - start.x);
+    const h = Math.abs(end.y - start.y);
+    if (w === 0 && h === 0) return null;
+    return { x, y, w, h };
+  }
+  findElementsInRect(marquee, ctx) {
+    const ids = [];
+    for (const el of ctx.store.getAll()) {
+      const bounds = this.getElementBounds(el);
+      if (bounds && this.rectsOverlap(marquee, bounds)) {
+        ids.push(el.id);
+      }
+    }
+    return ids;
+  }
+  rectsOverlap(a, b) {
+    return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+  }
+  getElementBounds(el) {
+    if ("size" in el) {
+      return { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
+    }
+    if (el.type === "stroke" && el.points.length > 0) {
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const p of el.points) {
+        const px = p.x + el.position.x;
+        const py = p.y + el.position.y;
+        if (px < minX) minX = px;
+        if (py < minY) minY = py;
+        if (px > maxX) maxX = px;
+        if (py > maxY) maxY = py;
+      }
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+    if (el.type === "arrow") {
+      return getArrowBounds(el.from, el.to, el.bend);
+    }
+    return null;
+  }
+  hitTest(world, ctx) {
+    const elements = ctx.store.getAll().reverse();
+    for (const el of elements) {
+      if (this.isInsideBounds(world, el)) return el;
+    }
+    return null;
+  }
+  isInsideBounds(point, el) {
+    if ("size" in el) {
+      const s = el.size;
+      return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
+    }
+    if (el.type === "stroke") {
+      const HIT_RADIUS = 10;
+      return el.points.some((p) => {
+        const dx = p.x + el.position.x - point.x;
+        const dy = p.y + el.position.y - point.y;
+        return dx * dx + dy * dy <= HIT_RADIUS * HIT_RADIUS;
+      });
+    }
+    if (el.type === "arrow") {
+      return isNearBezier(point, el.from, el.to, el.bend, 10);
+    }
+    return false;
+  }
+};
+
+// src/tools/arrow-tool.ts
+var ArrowTool = class {
+  name = "arrow";
+  drawing = false;
+  start = { x: 0, y: 0 };
+  end = { x: 0, y: 0 };
+  color;
+  width;
+  constructor(options = {}) {
+    this.color = options.color ?? "#000000";
+    this.width = options.width ?? 2;
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = { ...this.start };
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    if (this.start.x === this.end.x && this.start.y === this.end.y) return;
+    const arrow = createArrow({
+      from: this.start,
+      to: this.end,
+      color: this.color,
+      width: this.width
+    });
+    ctx.store.add(arrow);
+    ctx.requestRender();
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing) return;
+    if (this.start.x === this.end.x && this.start.y === this.end.y) return;
+    ctx.save();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.width;
+    ctx.lineCap = "round";
+    ctx.globalAlpha = 0.6;
+    ctx.beginPath();
+    ctx.moveTo(this.start.x, this.start.y);
+    ctx.lineTo(this.end.x, this.end.y);
+    ctx.stroke();
+    const angle = Math.atan2(this.end.y - this.start.y, this.end.x - this.start.x);
+    const headLen = 12;
+    const headAngle = Math.PI / 6;
+    ctx.fillStyle = this.color;
+    ctx.beginPath();
+    ctx.moveTo(this.end.x, this.end.y);
+    ctx.lineTo(
+      this.end.x - headLen * Math.cos(angle - headAngle),
+      this.end.y - headLen * Math.sin(angle - headAngle)
+    );
+    ctx.lineTo(
+      this.end.x - headLen * Math.cos(angle + headAngle),
+      this.end.y - headLen * Math.sin(angle + headAngle)
+    );
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+};
+
+// src/tools/note-tool.ts
+var NoteTool = class {
+  name = "note";
+  backgroundColor;
+  size;
+  constructor(options = {}) {
+    this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
+    this.size = options.size ?? { w: 200, h: 100 };
+  }
+  onPointerDown(_state, _ctx) {
+  }
+  onPointerMove(_state, _ctx) {
+  }
+  onPointerUp(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const note = createNote({
+      position: world,
+      size: { ...this.size },
+      backgroundColor: this.backgroundColor
+    });
+    ctx.store.add(note);
+    ctx.requestRender();
+    ctx.switchTool?.("select");
+    ctx.editElement?.(note.id);
+  }
+};
+
+// src/tools/image-tool.ts
+var ImageTool = class {
+  name = "image";
+  size;
+  src = null;
+  constructor(options = {}) {
+    this.size = options.size ?? { w: 300, h: 200 };
+  }
+  setSrc(src) {
+    this.src = src;
+  }
+  onPointerDown(_state, _ctx) {
+  }
+  onPointerMove(_state, _ctx) {
+  }
+  onPointerUp(state, ctx) {
+    if (!this.src) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const image = createImage({
+      position: world,
+      size: { ...this.size },
+      src: this.src
+    });
+    ctx.store.add(image);
+    ctx.requestRender();
+    this.src = null;
+    ctx.switchTool?.("select");
+  }
+};
+
+// src/index.ts
+var VERSION = "0.1.0";
+export {
+  AddElementCommand,
+  ArrowTool,
+  Background,
+  BatchCommand,
+  Camera,
+  ElementRenderer,
+  ElementStore,
+  EraserTool,
+  EventBus,
+  HandTool,
+  HistoryRecorder,
+  HistoryStack,
+  ImageTool,
+  InputHandler,
+  NoteEditor,
+  NoteTool,
+  PencilTool,
+  RemoveElementCommand,
+  SelectTool,
+  ToolManager,
+  UpdateElementCommand,
+  VERSION,
+  Viewport,
+  createArrow,
+  createHtmlElement,
+  createId,
+  createImage,
+  createNote,
+  createStroke,
+  exportState,
+  getArrowBounds,
+  getArrowControlPoint,
+  getArrowMidpoint,
+  getArrowTangentAngle,
+  getBendFromPoint,
+  isNearBezier,
+  parseState
+};
+//# sourceMappingURL=index.js.map