@tsdraw/core 0.4.0

package/dist/index.js

@@ -0,0 +1,1653 @@
+import { getStroke } from 'perfect-freehand';
+
+// src/types.ts
+var STROKE_WIDTHS = {
+  s: 2,
+  m: 3.5,
+  l: 5,
+  xl: 10
+};
+var DRAG_DISTANCE_SQUARED = 36;
+var DEFAULT_COLORS = {
+  black: "#1d1d1d",
+  grey: "#9fa8b2",
+  "light-violet": "#e085f4",
+  violet: "#ae3ec9",
+  blue: "#4465e9",
+  "light-blue": "#4ba1f1",
+  yellow: "#f1ac4b",
+  orange: "#e16919",
+  green: "#099268",
+  "light-green": "#4cb05e",
+  "light-red": "#f87777",
+  red: "#e03131",
+  white: "#ffffff"
+};
+var MAX_POINTS_PER_SHAPE = 200;
+
+// src/utils/pathCodec.ts
+function encodePoints(points) {
+  const arr = [];
+  for (const p of points) {
+    arr.push(p.x, p.y, p.z ?? 0.5);
+  }
+  return btoa(JSON.stringify(arr));
+}
+function decodePoints(path) {
+  try {
+    const arr = JSON.parse(atob(path));
+    const out = [];
+    for (let i = 0; i < arr.length; i += 3) {
+      out.push({
+        x: arr[i] ?? 0,
+        y: arr[i + 1] ?? 0,
+        z: arr[i + 2]
+      });
+    }
+    return out;
+  } catch {
+    return [];
+  }
+}
+function decodeFirstPoint(path) {
+  const pts = decodePoints(path);
+  return pts.length > 0 ? pts[0] : null;
+}
+function decodeLastPoint(path) {
+  const pts = decodePoints(path);
+  return pts.length > 0 ? pts[pts.length - 1] : null;
+}
+function decodePathToPoints(segments, ox, oy) {
+  const out = [];
+  for (const seg of segments) {
+    const pts = decodePoints(seg.path);
+    for (const p of pts) {
+      out.push({ x: ox + p.x, y: oy + p.y });
+    }
+  }
+  return out;
+}
+
+// src/store/documentStore.ts
+var DocumentStore = class {
+  state = {
+    id: "page-1",
+    shapes: {},
+    erasingShapeIds: []
+  };
+  order = [];
+  getPage() {
+    return this.state;
+  }
+  getShape(id) {
+    return this.state.shapes[id];
+  }
+  // Shapes organised in sorted order (first at bottom)
+  getCurrentPageShapesSorted() {
+    const list = this.order.length > 0 ? this.order : Object.keys(this.state.shapes);
+    return list.map((id) => this.state.shapes[id]).filter((s) => s != null);
+  }
+  // Shapes in reverse order (topmost first) for hit-testing
+  getCurrentPageRenderingShapesSorted() {
+    return [...this.getCurrentPageShapesSorted()].reverse();
+  }
+  getErasingShapeIds() {
+    return [...this.state.erasingShapeIds];
+  }
+  setErasingShapes(ids) {
+    this.state.erasingShapeIds = ids;
+  }
+  createShape(shape) {
+    this.state.shapes[shape.id] = shape;
+    this.order.push(shape.id);
+  }
+  updateShape(id, partial) {
+    const existing = this.state.shapes[id];
+    if (!existing) return;
+    this.state.shapes[id] = { ...existing, ...partial, id };
+  }
+  deleteShapes(ids) {
+    for (const id of ids) {
+      delete this.state.shapes[id];
+      this.order = this.order.filter((i) => i !== id);
+    }
+    this.state.erasingShapeIds = this.state.erasingShapeIds.filter((i) => !ids.includes(i));
+  }
+  getCurrentPageShapes() {
+    return Object.values(this.state.shapes);
+  }
+  // Shape IDs whose bounds intersect the given box for eraser line-segment hit
+  getShapeIdsInBounds(box) {
+    const ids = /* @__PURE__ */ new Set();
+    for (const shape of this.getCurrentPageShapesSorted()) {
+      const b = getShapeBounds(shape);
+      if (b.maxX >= box.minX && b.minX <= box.maxX && b.maxY >= box.minY && b.minY <= box.maxY) {
+        ids.add(shape.id);
+      }
+    }
+    return ids;
+  }
+};
+function getShapeBounds(shape) {
+  if (shape.type !== "draw") {
+    return { minX: shape.x, minY: shape.y, maxX: shape.x, maxY: shape.y };
+  }
+  const pts = decodePathToPoints(shape.props.segments, shape.x, shape.y);
+  if (pts.length === 0) return { minX: shape.x, minY: shape.y, maxX: shape.x, maxY: shape.y };
+  let minX = pts[0].x;
+  let minY = pts[0].y;
+  let maxX = minX;
+  let maxY = minY;
+  for (const p of pts) {
+    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;
+  }
+  const stroke = STROKE_WIDTHS[shape.props.size] * shape.props.scale;
+  return { minX: minX - stroke, minY: minY - stroke, maxX: maxX + stroke, maxY: maxY + stroke };
+}
+
+// src/store/stateNode.ts
+var StateNode = class {
+  constructor(ctx, editor) {
+    this.ctx = ctx;
+    this.editor = editor;
+  }
+  static id = "base";
+  onEnter(_info) {
+  }
+  onExit(_info, _to) {
+  }
+  onPointerDown(_info) {
+  }
+  onPointerMove(_info) {
+  }
+  onPointerUp() {
+  }
+  onKeyDown(_info) {
+  }
+  onKeyUp(_info) {
+  }
+  onCancel() {
+  }
+  onInterrupt() {
+  }
+};
+
+// src/canvas/viewport.ts
+function createViewport() {
+  return { x: 0, y: 0, zoom: 1 };
+}
+function screenToPage(viewport, screenX, screenY) {
+  return {
+    x: (screenX - viewport.x) / viewport.zoom,
+    y: (screenY - viewport.y) / viewport.zoom
+  };
+}
+function pageToScreen(viewport, pageX, pageY) {
+  return {
+    x: pageX * viewport.zoom + viewport.x,
+    y: pageY * viewport.zoom + viewport.y
+  };
+}
+function setViewport(viewport, updater) {
+  return {
+    x: updater.x ?? viewport.x,
+    y: updater.y ?? viewport.y,
+    zoom: updater.zoom ?? viewport.zoom
+  };
+}
+function panViewport(viewport, dx, dy) {
+  return { ...viewport, x: viewport.x + dx, y: viewport.y + dy };
+}
+function zoomViewport(viewport, factor, centerX, centerY) {
+  const zoom = Math.max(0.1, Math.min(4, viewport.zoom * factor));
+  if (centerX == null || centerY == null) {
+    return { ...viewport, zoom };
+  }
+  const pageBefore = screenToPage(viewport, centerX, centerY);
+  const x = centerX - pageBefore.x * zoom;
+  const y = centerY - pageBefore.y * zoom;
+  return { x, y, zoom };
+}
+
+// src/utils/colors.ts
+function resolveThemeColor(colorStyle, theme) {
+  const paletteColor = DEFAULT_COLORS[colorStyle];
+  if (!paletteColor) return colorStyle;
+  if (theme === "light") return paletteColor;
+  return invertAndHueRotate180(paletteColor);
+}
+function invertAndHueRotate180(color) {
+  const rgb = parseHexColor(color);
+  if (!rgb) return color;
+  const inverted = {
+    r: 255 - rgb.r,
+    g: 255 - rgb.g,
+    b: 255 - rgb.b
+  };
+  const hsl = rgbToHsl(inverted.r, inverted.g, inverted.b);
+  const rotated = hslToRgb((hsl.h + 180) % 360, hsl.s, hsl.l);
+  return rgbToHex(rotated.r, rotated.g, rotated.b);
+}
+function parseHexColor(color) {
+  const normalized = color.trim().toLowerCase();
+  if (!normalized.startsWith("#")) return null;
+  if (normalized.length === 4) {
+    return {
+      r: parseInt(normalized[1] + normalized[1], 16),
+      g: parseInt(normalized[2] + normalized[2], 16),
+      b: parseInt(normalized[3] + normalized[3], 16)
+    };
+  }
+  if (normalized.length !== 7) return null;
+  return {
+    r: parseInt(normalized.slice(1, 3), 16),
+    g: parseInt(normalized.slice(3, 5), 16),
+    b: parseInt(normalized.slice(5, 7), 16)
+  };
+}
+function rgbToHex(r, g, b) {
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function toHex(value) {
+  return Math.round(Math.max(0, Math.min(255, value))).toString(16).padStart(2, "0");
+}
+function rgbToHsl(r, g, b) {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const maxChannel = Math.max(red, green, blue);
+  const minChannel = Math.min(red, green, blue);
+  const delta = maxChannel - minChannel;
+  const lightness = (maxChannel + minChannel) / 2;
+  if (delta === 0) {
+    return { h: 0, s: 0, l: lightness };
+  }
+  const saturation = lightness > 0.5 ? delta / (2 - maxChannel - minChannel) : delta / (maxChannel + minChannel);
+  let hue = 0;
+  if (maxChannel === red) {
+    hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
+  } else if (maxChannel === green) {
+    hue = ((blue - red) / delta + 2) * 60;
+  } else {
+    hue = ((red - green) / delta + 4) * 60;
+  }
+  return { h: hue, s: saturation, l: lightness };
+}
+function hslToRgb(h, s, l) {
+  if (s === 0) {
+    const channel = l * 255;
+    return { r: channel, g: channel, b: channel };
+  }
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const hueSegment = h / 60;
+  const x = chroma * (1 - Math.abs(hueSegment % 2 - 1));
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (hueSegment >= 0 && hueSegment < 1) {
+    red = chroma;
+    green = x;
+  } else if (hueSegment < 2) {
+    red = x;
+    green = chroma;
+  } else if (hueSegment < 3) {
+    green = chroma;
+    blue = x;
+  } else if (hueSegment < 4) {
+    green = x;
+    blue = chroma;
+  } else if (hueSegment < 5) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
+  }
+  const match = l - chroma / 2;
+  return {
+    r: (red + match) * 255,
+    g: (green + match) * 255,
+    b: (blue + match) * 255
+  };
+}
+var CanvasRenderer = class {
+  theme = "light";
+  setTheme(theme) {
+    this.theme = theme;
+  }
+  render(ctx, viewport, shapes) {
+    ctx.save();
+    ctx.translate(viewport.x, viewport.y);
+    ctx.scale(viewport.zoom, viewport.zoom);
+    for (const shape of shapes) {
+      if (shape.type === "draw") {
+        this.paintStroke(ctx, shape);
+      }
+    }
+    ctx.restore();
+  }
+  paintStroke(ctx, shape) {
+    const width = (STROKE_WIDTHS[shape.props.size] ?? 3.5) * shape.props.scale;
+    const samples = flattenSegments(shape);
+    if (samples.length === 0) return;
+    const color = resolveThemeColor(shape.props.color, this.theme);
+    if (shape.props.dash !== "draw") {
+      this.paintDashedStroke(ctx, samples, width, color, shape.props.dash);
+      return;
+    }
+    const config = strokeConfig(shape, width);
+    const outline = getStroke(
+      samples.map((p) => [p.x, p.y, p.pressure]),
+      config
+    );
+    if (outline.length === 0) return;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    const first = outline[0];
+    if (!first) return;
+    ctx.moveTo(first[0], first[1]);
+    for (let i = 1; i < outline.length; i++) {
+      const p = outline[i];
+      if (p) ctx.lineTo(p[0], p[1]);
+    }
+    ctx.closePath();
+    ctx.fill();
+  }
+  paintDashedStroke(ctx, samples, width, color, dash) {
+    if (samples.length === 1) {
+      const p = samples[0];
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, width / 2, 0, Math.PI * 2);
+      ctx.fill();
+      return;
+    }
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.setLineDash(getLineDash(dash, width));
+    ctx.beginPath();
+    ctx.moveTo(samples[0].x, samples[0].y);
+    for (let i = 1; i < samples.length; i++) {
+      const p = samples[i];
+      ctx.lineTo(p.x, p.y);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+};
+var PRESSURE_FLOOR = 0.025;
+var STYLUS_CURVE = (t) => t * 0.65 + Math.sin(t * Math.PI / 2) * 0.35;
+var sineOut = (t) => Math.sin(t * Math.PI / 2);
+var cubicInOut = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+function remap(value, inRange, outRange, clamp = false) {
+  const [lo, hi] = inRange;
+  const [outLo, outHi] = outRange;
+  const t = (value - lo) / (hi - lo);
+  const clamped = clamp ? Math.max(0, Math.min(1, t)) : t;
+  return outLo + (outHi - outLo) * clamped;
+}
+function strokeConfig(shape, width) {
+  const done = shape.props.isComplete;
+  if (shape.props.isPen) {
+    return {
+      size: 1 + width * 1.2,
+      thinning: 0.62,
+      streamline: 0.62,
+      smoothing: 0.62,
+      simulatePressure: false,
+      easing: STYLUS_CURVE,
+      last: done
+    };
+  }
+  return {
+    size: width,
+    thinning: 0.5,
+    streamline: remap(width, [9, 16], [0.64, 0.74], true),
+    smoothing: 0.62,
+    simulatePressure: true,
+    easing: sineOut,
+    last: done
+  };
+}
+function flattenSegments(shape) {
+  const out = [];
+  for (const seg of shape.props.segments) {
+    const decoded = decodePoints(seg.path).map((p) => ({
+      x: p.x + shape.x,
+      y: p.y + shape.y,
+      pressure: Math.max(PRESSURE_FLOOR, p.z ?? 0.5)
+    }));
+    if (seg.type === "free" || decoded.length < 2) {
+      out.push(...decoded);
+      continue;
+    }
+    const A = decoded[0];
+    const D = decoded[1];
+    const len = Math.hypot(D.x - A.x, D.y - A.y);
+    if (len === 0) {
+      out.push(A);
+      continue;
+    }
+    const ux = (D.x - A.x) / len;
+    const uy = (D.y - A.y) / len;
+    const nudge = Math.min(1, Math.floor(len / 4));
+    const B = { x: A.x + ux * nudge, y: A.y + uy * nudge, pressure: A.pressure };
+    const C = { x: D.x - ux * nudge, y: D.y - uy * nudge, pressure: D.pressure };
+    const count = Math.max(4, Math.floor(len / 16));
+    out.push(A);
+    for (let i = 1; i <= count; i++) {
+      const t = i / (count + 1);
+      const e = cubicInOut(t);
+      out.push({
+        x: B.x + (C.x - B.x) * e,
+        y: B.y + (C.y - B.y) * e,
+        pressure: B.pressure + (C.pressure - B.pressure) * e
+      });
+    }
+    out.push(D);
+  }
+  if (out.length > 0 && !shape.props.isPen) {
+    for (const p of out) p.pressure = 0.5;
+  }
+  return out;
+}
+function getLineDash(dash, width) {
+  switch (dash) {
+    case "dashed":
+      return [width * 2, width * 2];
+    case "dotted":
+      return [Math.max(1, width * 0.25), width * 2];
+    case "solid":
+    case "draw":
+    default:
+      return [];
+  }
+}
+
+// src/input/inputManager.ts
+var InputManager = class {
+  _current = { x: 0, y: 0 };
+  _origin = { x: 0, y: 0 };
+  // Where pointer_down occured
+  _previous = { x: 0, y: 0 };
+  // Where pointer was before most recent update
+  _isPen = false;
+  // Whether input is from a stylus
+  _shiftKey = false;
+  // Whether shift is pressed
+  _ctrlKey = false;
+  // Whether ctrl is pressed
+  _metaKey = false;
+  // Whether meta is pressed
+  _isDragging = false;
+  // Whether pointer is dragging
+  getCurrentPagePoint() {
+    return { ...this._current };
+  }
+  getOriginPagePoint() {
+    return { ...this._origin };
+  }
+  getPreviousPagePoint() {
+    return { ...this._previous };
+  }
+  getIsPen() {
+    return this._isPen;
+  }
+  getShiftKey() {
+    return this._shiftKey;
+  }
+  getCtrlKey() {
+    return this._ctrlKey;
+  }
+  getAccelKey() {
+    return this._ctrlKey || this._metaKey;
+  }
+  getIsDragging() {
+    return this._isDragging;
+  }
+  pointerDown(pageX, pageY, pressure, isPen) {
+    this._origin = { x: pageX, y: pageY, z: pressure ?? 0.5 };
+    this._current = { ...this._origin };
+    this._previous = { ...this._origin };
+    this._isDragging = false;
+    if (isPen !== void 0) this._isPen = isPen;
+  }
+  pointerMove(pageX, pageY, pressure, isPen) {
+    this._previous = { ...this._current };
+    this._current = { x: pageX, y: pageY, z: pressure ?? this._current.z ?? 0.5 };
+    this._isPen = isPen ?? this._isPen;
+    if (this._origin.x !== this._current.x || this._origin.y !== this._current.y) {
+      this._isDragging = true;
+    }
+  }
+  pointerUp() {
+  }
+  setModifiers(shift, ctrl, meta) {
+    this._shiftKey = shift;
+    this._ctrlKey = ctrl;
+    this._metaKey = meta ?? ctrl;
+  }
+  getInputs() {
+    return {
+      currentPagePoint: this.getCurrentPagePoint(),
+      originPagePoint: this.getOriginPagePoint(),
+      previousPagePoint: this.getPreviousPagePoint(),
+      isPen: this._isPen,
+      shiftKey: this._shiftKey,
+      ctrlKey: this._ctrlKey,
+      isDragging: this._isDragging
+    };
+  }
+};
+
+// src/tools/toolManager.ts
+var ToolManager = class {
+  currentToolId = "pen";
+  currentState = null;
+  states = /* @__PURE__ */ new Map();
+  toolInitialStateIds = /* @__PURE__ */ new Map();
+  registerState(state) {
+    const ctor = state.constructor;
+    if (this.states.has(ctor.id)) {
+      throw new Error(`Tool state '${ctor.id}' is already registered.`);
+    }
+    this.states.set(ctor.id, state);
+  }
+  registerTool(id, initialStateId) {
+    if (this.toolInitialStateIds.has(id)) {
+      throw new Error(`Tool '${id}' is already registered.`);
+    }
+    this.toolInitialStateIds.set(id, initialStateId);
+  }
+  hasTool(id) {
+    return this.toolInitialStateIds.has(id);
+  }
+  setCurrentTool(id) {
+    const initialStateId = this.toolInitialStateIds.get(id);
+    if (!initialStateId) return;
+    const nextState = this.states.get(initialStateId);
+    if (!nextState) return;
+    this.currentState?.onExit?.(void 0, initialStateId);
+    this.currentToolId = id;
+    this.currentState = nextState;
+    this.currentState.onEnter?.();
+  }
+  getCurrentToolId() {
+    return this.currentToolId;
+  }
+  getCurrentState() {
+    return this.currentState;
+  }
+  transition(stateId, info) {
+    const next = this.states.get(stateId);
+    if (!next) return;
+    this.currentState?.onExit?.(void 0, stateId);
+    this.currentState = next;
+    this.currentState.onEnter?.(info);
+  }
+  pointerDown(info) {
+    this.currentState?.onPointerDown?.(info);
+  }
+  pointerMove(info) {
+    this.currentState?.onPointerMove?.(info);
+  }
+  pointerUp() {
+    this.currentState?.onPointerUp?.();
+  }
+  keyDown(info) {
+    this.currentState?.onKeyDown?.(info);
+  }
+  keyUp(info) {
+    this.currentState?.onKeyUp?.(info);
+  }
+  cancel() {
+    this.currentState?.onCancel?.();
+  }
+  interrupt() {
+    this.currentState?.onInterrupt?.();
+  }
+};
+
+// src/tools/pen/states/PenIdleState.ts
+var PenIdleState = class extends StateNode {
+  static id = "pen_idle";
+  onPointerDown(info) {
+    this.ctx.transition("pen_drawing", info);
+  }
+};
+
+// src/utils/vec.ts
+function dist(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function sqDist(a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return dx * dx + dy * dy;
+}
+function withinRadius(a, b, r) {
+  return dist(a, b) <= r;
+}
+function toFixed(n, digits = 2) {
+  return Number(Number.prototype.toFixed.call(n, digits));
+}
+function roundPt(p) {
+  return { x: toFixed(p.x), y: toFixed(p.y), z: p.z != null ? toFixed(p.z) : void 0 };
+}
+function lerpPath(from, to, steps) {
+  const result = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    result.push({
+      x: toFixed(from.x + (to.x - from.x) * t),
+      y: toFixed(from.y + (to.y - from.y) * t),
+      z: from.z != null && to.z != null ? toFixed(from.z + (to.z - from.z) * t) : to.z ?? from.z
+    });
+  }
+  return result;
+}
+function quantizeAngle(rad, divisions) {
+  const step = Math.PI * 2 / divisions;
+  return Math.round(rad / step) * step;
+}
+function rotateAround(pt, origin, angle) {
+  const c = Math.cos(angle);
+  const s = Math.sin(angle);
+  const rx = pt.x - origin.x;
+  const ry = pt.y - origin.y;
+  return {
+    x: origin.x + rx * c - ry * s,
+    y: origin.y + rx * s + ry * c,
+    z: pt.z
+  };
+}
+function tail(arr) {
+  return arr[arr.length - 1];
+}
+
+// src/tools/pen/states/PenDrawingState.ts
+var PenDrawingState = class extends StateNode {
+  static id = "pen_drawing";
+  _startInfo = { point: { x: 0, y: 0, z: 0.5 } };
+  _target;
+  _isPenDevice = false;
+  _hasPressure = false;
+  _phase = "free";
+  _extending = false;
+  _anchor = { x: 0, y: 0 };
+  _pendingAnchor = null;
+  _lastSample = { x: 0, y: 0 };
+  _shouldMerge = false;
+  _pathLen = 0;
+  _activePts = [];
+  onEnter(info) {
+    this._startInfo = info ?? { point: { x: 0, y: 0, z: 0.5 } };
+    this._lastSample = { ...this.editor.input.getCurrentPagePoint() };
+    this.beginStroke();
+  }
+  onPointerMove() {
+    const inputs = this.editor.input;
+    const penActive = inputs.getIsPen();
+    if (this._isPenDevice && !penActive) {
+      this.beginStroke();
+      return;
+    }
+    if (this._hasPressure) {
+      const cur = inputs.getCurrentPagePoint();
+      const threshold = 1 / this.editor.getZoomLevel();
+      if (dist(cur, this._lastSample) >= threshold) {
+        this._lastSample = { ...cur };
+        this._shouldMerge = false;
+      } else {
+        this._shouldMerge = true;
+      }
+    } else {
+      this._shouldMerge = false;
+    }
+    this.advanceStroke();
+  }
+  // Shift: start a new straight segment
+  // Maybe add a specific key for snapping or turning drawing into a proper shape?
+  onKeyDown(info) {
+    if (info?.key === "Shift") {
+      switch (this._phase) {
+        case "free":
+          this._phase = "starting_straight";
+          this._pendingAnchor = { ...this.editor.input.getCurrentPagePoint() };
+          break;
+        case "starting_free":
+          this._phase = "starting_straight";
+          break;
+      }
+    }
+    this.advanceStroke();
+  }
+  onKeyUp(info) {
+    if (info?.key === "Shift") {
+      switch (this._phase) {
+        case "straight":
+          this._phase = "starting_free";
+          this._pendingAnchor = { ...this.editor.input.getCurrentPagePoint() };
+          break;
+        case "starting_straight":
+          this._pendingAnchor = null;
+          this._phase = "free";
+          break;
+      }
+    }
+    this.advanceStroke();
+  }
+  onPointerUp() {
+    this.endStroke();
+  }
+  onCancel() {
+    this.ctx.transition("pen_idle", this._startInfo);
+  }
+  onInterrupt() {
+    if (!this.editor.input.getIsDragging()) {
+      this.ctx.transition("pen_idle", this._startInfo);
+    }
+  }
+  canClosePath() {
+    return true;
+  }
+  detectClosure(segments, size, scale) {
+    if (!this.canClosePath() || segments.length === 0) return false;
+    const w = STROKE_WIDTHS[size];
+    const first = decodeFirstPoint(segments[0].path);
+    const lastSeg = segments[segments.length - 1];
+    const end = decodeLastPoint(lastSeg.path);
+    if (!first || !end) return false;
+    if (first.x === end.x && first.y === end.y) return false;
+    if (this._pathLen <= w * 4 * scale) return false;
+    return withinRadius(first, end, w * 2 * scale);
+  }
+  measurePath(segments) {
+    let sum = 0;
+    for (const seg of segments) {
+      const pts = decodePoints(seg.path);
+      for (let i = 0; i < pts.length - 1; i++) {
+        sum += sqDist(pts[i], pts[i + 1]);
+      }
+    }
+    return Math.sqrt(sum);
+  }
+  // Start a new shape, when user starts a stroke
+  beginStroke() {
+    const inputs = this.editor.input;
+    const origin = inputs.getOriginPagePoint();
+    const penActive = inputs.getIsPen();
+    const z = this._startInfo?.point?.z ?? 0.5;
+    this._isPenDevice = penActive;
+    this._hasPressure = penActive && z !== 0 || z > 0 && z < 0.5 || z > 0.5 && z < 1;
+    const pressure = this._hasPressure ? toFixed(z * 1.25) : 0.5;
+    this._phase = inputs.getShiftKey() ? "straight" : "free";
+    this._extending = false;
+    this._lastSample = { ...origin };
+    const sorted = this.editor.store.getCurrentPageShapesSorted();
+    const prev = tail(sorted);
+    const existing = prev?.type === "draw" ? prev : void 0;
+    this._target = existing;
+    if (existing && this._phase === "straight") {
+      const prevSeg = tail(existing.props.segments);
+      if (!prevSeg) {
+        this.spawnShape(origin, pressure);
+        return;
+      }
+      const prevEnd = decodeLastPoint(prevSeg.path);
+      if (!prevEnd) {
+        this.spawnShape(origin, pressure);
+        return;
+      }
+      this._extending = true;
+      const local = this.editor.getPointInShapeSpace(existing, origin);
+      const localPt = { x: toFixed(local.x), y: toFixed(local.y), z: pressure };
+      const newSeg = {
+        type: "straight",
+        path: encodePoints([
+          { x: prevEnd.x, y: prevEnd.y, z: pressure },
+          localPt
+        ])
+      };
+      this._anchor = {
+        x: existing.x + prevEnd.x,
+        y: existing.y + prevEnd.y
+      };
+      this._pendingAnchor = null;
+      const segs = [...existing.props.segments, newSeg];
+      this._pathLen = this.measurePath(segs);
+      this.editor.updateShapes([
+        {
+          id: existing.id,
+          type: "draw",
+          props: {
+            segments: segs,
+            isClosed: this.detectClosure(segs, existing.props.size, existing.props.scale)
+          }
+        }
+      ]);
+      return;
+    }
+    this.spawnShape(origin, pressure);
+  }
+  // Create a new shape, when we need a new drawing shape 
+  spawnShape(originPt, pressure) {
+    this._anchor = { ...originPt };
+    const drawStyle = this.editor.getCurrentDrawStyle();
+    const id = this.editor.createShapeId();
+    const firstPt = { x: 0, y: 0, z: pressure };
+    this._activePts = [firstPt];
+    this.editor.createShape({
+      id,
+      type: "draw",
+      x: originPt.x,
+      y: originPt.y,
+      props: {
+        color: drawStyle.color,
+        dash: drawStyle.dash,
+        size: drawStyle.size,
+        scale: 1,
+        isPen: this._hasPressure,
+        isComplete: false,
+        segments: [
+          {
+            type: this._phase === "straight" ? "straight" : "free",
+            path: encodePoints([firstPt])
+          }
+        ]
+      }
+    });
+    const shape = this.editor.getShape(id);
+    if (!shape) {
+      this.ctx.transition("pen_idle", this._startInfo);
+      return;
+    }
+    this._pathLen = 0;
+    this._target = shape;
+  }
+  // Update the drawing shape, while user is drawing
+  advanceStroke() {
+    const target = this._target;
+    const inputs = this.editor.input;
+    if (!target) return;
+    const shape = this.editor.getShape(target.id);
+    if (!shape) return;
+    const { id, props: { size, scale } } = target;
+    const { segments } = shape.props;
+    const curPt = inputs.getCurrentPagePoint();
+    const local = this.editor.getPointInShapeSpace(shape, curPt);
+    const pressure = this._hasPressure ? toFixed((curPt.z ?? 0.5) * 1.25) : 0.5;
+    const pt = { x: toFixed(local.x), y: toFixed(local.y), z: pressure };
+    switch (this._phase) {
+      case "starting_straight": {
+        const pending = this._pendingAnchor;
+        if (!pending) break;
+        if (sqDist(pending, inputs.getCurrentPagePoint()) <= this.editor.options.dragDistanceSquared) break;
+        this._anchor = { ...pending };
+        this._pendingAnchor = null;
+        this._phase = "straight";
+        const prevSeg = tail(segments);
+        if (!prevSeg) break;
+        const prevEnd = decodeLastPoint(prevSeg.path);
+        if (!prevEnd) break;
+        const anchorLocal = this.editor.getPointInShapeSpace(shape, this._anchor);
+        const anchorPt = roundPt(anchorLocal);
+        const seg = {
+          type: "straight",
+          path: encodePoints([prevEnd, { ...anchorPt, z: pressure }])
+        };
+        this.editor.updateShapes([
+          {
+            id,
+            type: "draw",
+            props: {
+              segments: [...segments, seg],
+              isClosed: this.detectClosure(segments, size, scale)
+            }
+          }
+        ]);
+        break;
+      }
+      case "starting_free": {
+        const pending = this._pendingAnchor;
+        if (!pending) break;
+        if (sqDist(pending, inputs.getCurrentPagePoint()) <= this.editor.options.dragDistanceSquared) break;
+        this._anchor = { ...pending };
+        this._pendingAnchor = null;
+        this._phase = "free";
+        const prevSeg = tail(segments);
+        if (!prevSeg) break;
+        const prevEnd = decodeLastPoint(prevSeg.path);
+        if (!prevEnd) break;
+        const interpolated = lerpPath(prevEnd, pt, 6);
+        this._activePts = interpolated;
+        const freeSeg = {
+          type: "free",
+          path: encodePoints(interpolated)
+        };
+        const allSegs = [...segments, freeSeg];
+        this._pathLen = this.measurePath(allSegs);
+        this.editor.updateShapes([
+          {
+            id,
+            type: "draw",
+            props: {
+              segments: allSegs,
+              isClosed: this.detectClosure(allSegs, size, scale)
+            }
+          }
+        ]);
+        break;
+      }
+      case "straight": {
+        const updated = segments.slice();
+        const lastSeg = updated[updated.length - 1];
+        if (!lastSeg) break;
+        const anchorPage = this._anchor;
+        const current = inputs.getCurrentPagePoint();
+        const shouldSnap = !this._extending || inputs.getIsDragging();
+        if (this._extending && inputs.getIsDragging()) {
+          this._extending = false;
+        }
+        let pagePt;
+        if (shouldSnap) {
+          const angle = Math.atan2(
+            current.y - anchorPage.y,
+            current.x - anchorPage.x
+          );
+          const snapped = quantizeAngle(angle, 24);
+          const diff = snapped - angle;
+          pagePt = rotateAround(current, anchorPage, diff);
+        } else {
+          pagePt = { ...current };
+        }
+        const localPt = this.editor.getPointInShapeSpace(shape, pagePt);
+        const fixedPt = roundPt(localPt);
+        const segStart = decodeFirstPoint(lastSeg.path);
+        if (segStart) {
+          this._pathLen += dist(segStart, fixedPt);
+        }
+        updated[updated.length - 1] = {
+          ...lastSeg,
+          type: "straight",
+          path: encodePoints([segStart ?? fixedPt, { ...fixedPt, z: pressure }])
+        };
+        this.editor.updateShapes([
+          {
+            id,
+            type: "draw",
+            props: {
+              segments: updated,
+              isClosed: this.detectClosure(segments, size, scale)
+            }
+          }
+        ]);
+        break;
+      }
+      case "free": {
+        const cached = this._activePts;
+        if (cached.length && this._shouldMerge) {
+          const last = cached[cached.length - 1];
+          last.x = pt.x;
+          last.y = pt.y;
+          last.z = last.z != null ? Math.max(last.z, pt.z ?? 0) : pt.z;
+        } else {
+          this._pathLen += cached.length ? dist(cached[cached.length - 1], pt) : 0;
+          cached.push({ x: pt.x, y: pt.y, z: pt.z });
+        }
+        const updated = segments.slice();
+        const lastSeg = updated[updated.length - 1];
+        updated[updated.length - 1] = {
+          ...lastSeg,
+          path: encodePoints(cached)
+        };
+        if (this._pathLen < STROKE_WIDTHS[shape.props.size] * 4) {
+          this._pathLen = this.measurePath(updated);
+        }
+        this.editor.updateShapes([
+          {
+            id,
+            type: "draw",
+            props: {
+              segments: updated,
+              isClosed: this.detectClosure(updated, size, scale)
+            }
+          }
+        ]);
+        if (cached.length > MAX_POINTS_PER_SHAPE) {
+          this.editor.updateShapes([{ id, type: "draw", props: { isComplete: true } }]);
+          const newId = this.editor.createShapeId();
+          const curPage = inputs.getCurrentPagePoint();
+          const firstPt = {
+            x: 0,
+            y: 0,
+            z: this._hasPressure ? toFixed((curPage.z ?? 0.5) * 1.25) : 0.5
+          };
+          this._activePts = [firstPt];
+          this.editor.createShape({
+            id: newId,
+            type: "draw",
+            x: curPage.x,
+            y: curPage.y,
+            props: {
+              color: shape.props.color,
+              dash: shape.props.dash,
+              size: shape.props.size,
+              scale: shape.props.scale,
+              isPen: this._hasPressure,
+              isComplete: false,
+              segments: [{ type: "free", path: encodePoints([firstPt]) }]
+            }
+          });
+          const created = this.editor.getShape(newId);
+          if (created) {
+            this._target = created;
+            this._lastSample = { ...curPage };
+            this._pathLen = 0;
+          }
+        }
+        break;
+      }
+    }
+  }
+  endStroke() {
+    if (!this._target) return;
+    this.editor.updateShapes([
+      { id: this._target.id, type: "draw", props: { isComplete: true } }
+    ]);
+    this.ctx.transition("pen_idle");
+  }
+};
+
+// src/tools/eraser/states/EraserIdleState.ts
+var EraserIdleState = class extends StateNode {
+  static id = "eraser_idle";
+  onPointerDown(info) {
+    this.ctx.transition("eraser_pointing", info);
+  }
+};
+
+// src/utils/geometry.ts
+function boundsOf(points) {
+  if (points.length === 0) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+  let minX = points[0].x;
+  let minY = points[0].y;
+  let maxX = minX;
+  let maxY = minY;
+  for (const p of points) {
+    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 { minX, minY, maxX, maxY };
+}
+function padBounds(b, amount) {
+  return {
+    minX: b.minX - amount,
+    minY: b.minY - amount,
+    maxX: b.maxX + amount,
+    maxY: b.maxY + amount
+  };
+}
+function sqDistance(ax, ay, bx, by) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  return dx * dx + dy * dy;
+}
+function distance(ax, ay, bx, by) {
+  return Math.sqrt(sqDistance(ax, ay, bx, by));
+}
+function closestOnSegment(ax, ay, bx, by, px, py) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) return { x: ax, y: ay };
+  const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lenSq));
+  return { x: ax + t * dx, y: ay + t * dy };
+}
+function segmentTouchesPolyline(polyline, ax, ay, bx, by, margin) {
+  for (let i = 0; i < polyline.length - 1; i++) {
+    const p = polyline[i];
+    const q = polyline[i + 1];
+    const n1 = closestOnSegment(p.x, p.y, q.x, q.y, ax, ay);
+    if (distance(n1.x, n1.y, ax, ay) <= margin) return true;
+    const n2 = closestOnSegment(p.x, p.y, q.x, q.y, bx, by);
+    if (distance(n2.x, n2.y, bx, by) <= margin) return true;
+    const n3 = closestOnSegment(ax, ay, bx, by, p.x, p.y);
+    if (distance(n3.x, n3.y, p.x, p.y) <= margin) return true;
+  }
+  if (polyline.length === 1) {
+    const p = polyline[0];
+    return distance(p.x, p.y, ax, ay) <= margin || distance(p.x, p.y, bx, by) <= margin;
+  }
+  return false;
+}
+function minDistanceToPolyline(px, py, polyline) {
+  if (polyline.length === 0) return Infinity;
+  if (polyline.length === 1) return distance(px, py, polyline[0].x, polyline[0].y);
+  let best = Infinity;
+  for (let i = 0; i < polyline.length - 1; i++) {
+    const a = polyline[i];
+    const b = polyline[i + 1];
+    const n = closestOnSegment(a.x, a.y, b.x, b.y, px, py);
+    const d = distance(n.x, n.y, px, py);
+    if (d < best) best = d;
+  }
+  return best;
+}
+
+// src/tools/eraser/eraserHitTest.ts
+var ERASER_MARGIN = 4;
+function shapePagePoints(shape) {
+  return decodePathToPoints(shape.props.segments, shape.x, shape.y);
+}
+function pointHitsShape(shape, pageX, pageY, margin) {
+  const pts = shapePagePoints(shape);
+  if (pts.length === 0) return false;
+  const strokeMargin = margin + (STROKE_WIDTHS[shape.props.size] ?? 3.5) * shape.props.scale;
+  return minDistanceToPolyline(pageX, pageY, pts) <= strokeMargin;
+}
+function segmentHitsShape(shape, ax, ay, bx, by, margin) {
+  const pts = shapePagePoints(shape);
+  if (pts.length === 0) return false;
+  const strokeMargin = margin + (STROKE_WIDTHS[shape.props.size] ?? 3.5) * shape.props.scale;
+  return segmentTouchesPolyline(pts, ax, ay, bx, by, strokeMargin);
+}
+
+// src/tools/eraser/states/EraserPointingState.ts
+var EraserPointingState = class extends StateNode {
+  static id = "eraser_pointing";
+  onEnter(_info) {
+    const zoom = this.editor.getZoomLevel();
+    const tolerance = ERASER_MARGIN / zoom;
+    const pt = this.editor.input.getCurrentPagePoint();
+    const allShapes = this.editor.store.getCurrentPageRenderingShapesSorted();
+    const hits = [];
+    for (const shape of allShapes) {
+      if (shape.type !== "draw") continue;
+      if (pointHitsShape(shape, pt.x, pt.y, tolerance)) {
+        hits.push(shape.id);
+      }
+    }
+    this.editor.setErasingShapes(hits);
+  }
+  onPointerMove(info) {
+    if (this.editor.input.getIsDragging()) {
+      this.ctx.transition("eraser_erasing", info);
+    }
+  }
+  onPointerUp() {
+    this.finish();
+  }
+  onExit(_info, to) {
+    if (to !== "eraser_erasing") {
+      this.editor.setErasingShapes([]);
+    }
+  }
+  onCancel() {
+    this.editor.setErasingShapes([]);
+    this.ctx.transition("eraser_idle");
+  }
+  finish() {
+    const ids = this.editor.getErasingShapeIds();
+    if (ids.length > 0) {
+      this.editor.store.deleteShapes(ids);
+      this.editor.setErasingShapes([]);
+    }
+    this.ctx.transition("eraser_idle");
+  }
+};
+
+// src/tools/eraser/states/EraserErasingState.ts
+var EraserErasingState = class extends StateNode {
+  static id = "eraser_erasing";
+  _marked = [];
+  onEnter(_info) {
+    this._marked = [...this.editor.getErasingShapeIds()];
+    this.sweep();
+  }
+  onPointerMove() {
+    this.sweep();
+  }
+  onPointerUp() {
+    this.finish();
+  }
+  onExit() {
+    this.editor.setErasingShapes([]);
+  }
+  onCancel() {
+    this.ctx.transition("eraser_idle");
+  }
+  sweep() {
+    const zoom = this.editor.getZoomLevel();
+    const tolerance = ERASER_MARGIN / zoom;
+    const cur = this.editor.input.getCurrentPagePoint();
+    const prev = this.editor.input.getPreviousPagePoint();
+    const hitIds = new Set(this.editor.getErasingShapeIds());
+    const sweepArea = padBounds(boundsOf([prev, cur]), tolerance);
+    const nearby = this.editor.store.getShapeIdsInBounds(sweepArea);
+    const candidates = this.editor.store.getCurrentPageRenderingShapesSorted().filter((s) => nearby.has(s.id));
+    for (const shape of candidates) {
+      if (shape.type !== "draw") continue;
+      if (segmentHitsShape(shape, prev.x, prev.y, cur.x, cur.y, tolerance)) {
+        hitIds.add(shape.id);
+      }
+    }
+    this._marked = [...hitIds];
+    this.editor.setErasingShapes(this._marked);
+  }
+  finish() {
+    const ids = this.editor.getErasingShapeIds();
+    if (ids.length > 0) {
+      this.editor.store.deleteShapes(ids);
+    }
+    this.editor.setErasingShapes([]);
+    this._marked = [];
+    this.ctx.transition("eraser_idle");
+  }
+};
+
+// src/tools/select/states/SelectIdleState.ts
+var SelectIdleState = class extends StateNode {
+  static id = "select_idle";
+};
+
+// src/tools/hand/states/HandIdleState.ts
+var HandIdleState = class extends StateNode {
+  static id = "hand_idle";
+  onPointerDown(info) {
+    this.ctx.transition("hand_dragging", info);
+  }
+};
+
+// src/tools/hand/states/HandDraggingState.ts
+var HandDraggingState = class extends StateNode {
+  static id = "hand_dragging";
+  onPointerMove(info) {
+    const move = info ?? {};
+    const dx = move.screenDeltaX ?? 0;
+    const dy = move.screenDeltaY ?? 0;
+    if (dx === 0 && dy === 0) return;
+    this.editor.panBy(dx, dy);
+  }
+  onPointerUp() {
+    this.ctx.transition("hand_idle");
+  }
+  onCancel() {
+    this.ctx.transition("hand_idle");
+  }
+  onInterrupt() {
+    this.ctx.transition("hand_idle");
+  }
+};
+
+// src/editor/Editor.ts
+var shapeIdCounter = 0;
+function createShapeId() {
+  return `shape:${String(++shapeIdCounter).padStart(6, "0")}`;
+}
+var Editor = class {
+  store = new DocumentStore();
+  input = new InputManager();
+  tools = new ToolManager();
+  renderer = new CanvasRenderer();
+  viewport = createViewport();
+  options;
+  // Default draw style
+  drawStyle = {
+    color: "black",
+    dash: "draw",
+    size: "m"
+  };
+  toolStateContext;
+  // Creates a new editor instance with the given options (with defaults if not provided)
+  constructor(opts = {}) {
+    this.options = { dragDistanceSquared: opts.dragDistanceSquared ?? DRAG_DISTANCE_SQUARED };
+    this.toolStateContext = {
+      transition: (id, info) => this.tools.transition(id, info)
+    };
+    for (const defaultTool of this.getDefaultToolDefinitions()) {
+      this.registerToolDefinition(defaultTool);
+    }
+    for (const customTool of opts.toolDefinitions ?? []) {
+      this.registerToolDefinition(customTool);
+    }
+    this.tools.setCurrentTool(opts.initialToolId ?? "pen");
+  }
+  registerToolDefinition(toolDefinition) {
+    for (const stateConstructor of toolDefinition.stateConstructors) {
+      this.tools.registerState(new stateConstructor(this.toolStateContext, this));
+    }
+    this.tools.registerTool(toolDefinition.id, toolDefinition.initialStateId);
+  }
+  getDefaultToolDefinitions() {
+    return [
+      { id: "pen", initialStateId: PenIdleState.id, stateConstructors: [PenIdleState, PenDrawingState] },
+      { id: "eraser", initialStateId: EraserIdleState.id, stateConstructors: [EraserIdleState, EraserPointingState, EraserErasingState] },
+      { id: "select", initialStateId: SelectIdleState.id, stateConstructors: [SelectIdleState] },
+      { id: "hand", initialStateId: HandIdleState.id, stateConstructors: [HandIdleState, HandDraggingState] }
+    ];
+  }
+  createShapeId() {
+    return createShapeId();
+  }
+  getZoomLevel() {
+    return this.viewport.zoom;
+  }
+  getShape(id) {
+    return this.store.getShape(id);
+  }
+  createShape(shape) {
+    this.store.createShape(shape);
+  }
+  updateShapes(partials) {
+    for (const p of partials) {
+      const existing = this.store.getShape(p.id);
+      if (existing && p.props) {
+        this.store.updateShape(p.id, { props: { ...existing.props, ...p.props } });
+      }
+    }
+  }
+  // Page point to shape local point (for draw shapes: subtract shape pos)
+  getPointInShapeSpace(shape, pagePoint) {
+    return {
+      x: pagePoint.x - shape.x,
+      y: pagePoint.y - shape.y,
+      z: pagePoint.z
+    };
+  }
+  getCurrentPageShapes() {
+    return this.store.getCurrentPageShapes();
+  }
+  getCurrentPageShapesSorted() {
+    return this.store.getCurrentPageShapesSorted();
+  }
+  getCurrentPageRenderingShapesSorted() {
+    return this.store.getCurrentPageRenderingShapesSorted();
+  }
+  getErasingShapeIds() {
+    return this.store.getErasingShapeIds();
+  }
+  setErasingShapes(ids) {
+    this.store.setErasingShapes(ids);
+  }
+  setCurrentTool(id) {
+    this.tools.setCurrentTool(id);
+  }
+  getCurrentToolId() {
+    return this.tools.getCurrentToolId();
+  }
+  getCurrentDrawStyle() {
+    return { ...this.drawStyle };
+  }
+  setCurrentDrawStyle(partial) {
+    this.drawStyle = { ...this.drawStyle, ...partial };
+  }
+  panBy(dx, dy) {
+    this.viewport.x += dx;
+    this.viewport.y += dy;
+  }
+  // Convert screen coords to page coords
+  screenToPage(screenX, screenY) {
+    return screenToPage(this.viewport, screenX, screenY);
+  }
+  // Render current page to 2d canvas context
+  render(ctx) {
+    const shapes = this.getCurrentPageShapesSorted();
+    const erasingIds = new Set(this.getErasingShapeIds());
+    const visible = shapes.filter((s) => !erasingIds.has(s.id));
+    this.renderer.render(ctx, this.viewport, visible);
+  }
+};
+
+// src/tools/select/selectHelpers.ts
+function isSelectTool(tool) {
+  return tool === "select";
+}
+function getShapeBounds2(shape) {
+  const points = decodePathToPoints(shape.props.segments, shape.x, shape.y);
+  if (points.length === 0) {
+    return { minX: shape.x, minY: shape.y, maxX: shape.x, maxY: shape.y };
+  }
+  let minX = points[0].x;
+  let minY = points[0].y;
+  let maxX = minX;
+  let maxY = minY;
+  for (const p of points) {
+    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;
+  }
+  const stroke = (STROKE_WIDTHS[shape.props.size] ?? 3.5) * shape.props.scale;
+  return { minX: minX - stroke, minY: minY - stroke, maxX: maxX + stroke, maxY: maxY + stroke };
+}
+function normalizeSelectionBounds(a, b) {
+  return {
+    minX: Math.min(a.x, b.x),
+    minY: Math.min(a.y, b.y),
+    maxX: Math.max(a.x, b.x),
+    maxY: Math.max(a.y, b.y)
+  };
+}
+function boundsContainPoint(bounds, x, y) {
+  return x >= bounds.minX && x <= bounds.maxX && y >= bounds.minY && y <= bounds.maxY;
+}
+function boundsIntersect(a, b) {
+  return a.maxX >= b.minX && a.minX <= b.maxX && a.maxY >= b.minY && a.minY <= b.maxY;
+}
+function rotatePoint(point, center, radians) {
+  const dx = point.x - center.x;
+  const dy = point.y - center.y;
+  const c = Math.cos(radians);
+  const s = Math.sin(radians);
+  return {
+    x: center.x + dx * c - dy * s,
+    y: center.y + dx * s + dy * c
+  };
+}
+function buildTransformSnapshots(editor, ids) {
+  const snapshots = /* @__PURE__ */ new Map();
+  for (const id of ids) {
+    const shape = editor.getShape(id);
+    if (!shape || shape.type !== "draw") continue;
+    snapshots.set(id, {
+      x: shape.x,
+      y: shape.y,
+      segments: shape.props.segments.map((seg) => ({
+        type: seg.type,
+        points: decodePoints(seg.path)
+      }))
+    });
+  }
+  return snapshots;
+}
+function buildStartPositions(editor, ids) {
+  const positions = /* @__PURE__ */ new Map();
+  for (const id of ids) {
+    const shape = editor.getShape(id);
+    if (!shape) continue;
+    positions.set(id, { x: shape.x, y: shape.y });
+  }
+  return positions;
+}
+function getTopShapeAtPoint(editor, point) {
+  const margin = 6 / editor.viewport.zoom;
+  const shapes = editor.getCurrentPageRenderingShapesSorted();
+  for (const shape of shapes) {
+    if (shape.type !== "draw") continue;
+    const b = getShapeBounds2(shape);
+    if (boundsContainPoint(
+      {
+        minX: b.minX - margin,
+        minY: b.minY - margin,
+        maxX: b.maxX + margin,
+        maxY: b.maxY + margin
+      },
+      point.x,
+      point.y
+    )) {
+      return shape;
+    }
+  }
+  return null;
+}
+function getSelectionBoundsPage(editor, ids) {
+  if (ids.length === 0) return null;
+  let union = null;
+  for (const id of ids) {
+    const shape = editor.getShape(id);
+    if (!shape || shape.type !== "draw") continue;
+    const b = getShapeBounds2(shape);
+    union = union ? {
+      minX: Math.min(union.minX, b.minX),
+      minY: Math.min(union.minY, b.minY),
+      maxX: Math.max(union.maxX, b.maxX),
+      maxY: Math.max(union.maxY, b.maxY)
+    } : b;
+  }
+  return union;
+}
+function getShapesInBounds(editor, bounds) {
+  return editor.getCurrentPageShapesSorted().filter((shape) => shape.type === "draw").filter((shape) => boundsIntersect(getShapeBounds2(shape), bounds)).map((shape) => shape.id);
+}
+function applyMove(editor, startPositions, deltaX, deltaY) {
+  for (const [id, start] of startPositions) {
+    editor.store.updateShape(id, {
+      x: start.x + deltaX,
+      y: start.y + deltaY
+    });
+  }
+}
+function applyRotation(editor, startShapes, center, delta) {
+  for (const [id, snapshot] of startShapes) {
+    const shape = editor.getShape(id);
+    if (!shape || shape.type !== "draw") continue;
+    const rotatedOrigin = rotatePoint({ x: snapshot.x, y: snapshot.y }, center, delta);
+    const segments = snapshot.segments.map((segment) => ({
+      type: segment.type,
+      path: encodePoints(
+        segment.points.map((pt) => {
+          const absolute = { x: snapshot.x + pt.x, y: snapshot.y + pt.y };
+          const rotated = rotatePoint(absolute, center, delta);
+          return {
+            x: rotated.x - rotatedOrigin.x,
+            y: rotated.y - rotatedOrigin.y,
+            z: pt.z
+          };
+        })
+      )
+    }));
+    editor.store.updateShape(id, {
+      x: rotatedOrigin.x,
+      y: rotatedOrigin.y,
+      props: { ...shape.props, segments }
+    });
+  }
+}
+function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspectRatio) {
+  const minSize = 8 / editor.viewport.zoom;
+  const startW = Math.max(1e-4, startBounds.maxX - startBounds.minX);
+  const startH = Math.max(1e-4, startBounds.maxY - startBounds.minY);
+  const aspectRatio = startW / startH;
+  let minX = startBounds.minX;
+  let minY = startBounds.minY;
+  let maxX = startBounds.maxX;
+  let maxY = startBounds.maxY;
+  switch (handle) {
+    case "nw":
+      minX = Math.min(pointer.x, startBounds.maxX - minSize);
+      minY = Math.min(pointer.y, startBounds.maxY - minSize);
+      break;
+    case "ne":
+      maxX = Math.max(pointer.x, startBounds.minX + minSize);
+      minY = Math.min(pointer.y, startBounds.maxY - minSize);
+      break;
+    case "sw":
+      minX = Math.min(pointer.x, startBounds.maxX - minSize);
+      maxY = Math.max(pointer.y, startBounds.minY + minSize);
+      break;
+    case "se":
+      maxX = Math.max(pointer.x, startBounds.minX + minSize);
+      maxY = Math.max(pointer.y, startBounds.minY + minSize);
+      break;
+  }
+  if (lockAspectRatio) {
+    let nextW = Math.max(minSize, maxX - minX);
+    let nextH = Math.max(minSize, maxY - minY);
+    if (nextW / nextH > aspectRatio) {
+      nextH = nextW / aspectRatio;
+    } else {
+      nextW = nextH * aspectRatio;
+    }
+    if (nextW < minSize) {
+      nextW = minSize;
+      nextH = nextW / aspectRatio;
+    }
+    if (nextH < minSize) {
+      nextH = minSize;
+      nextW = nextH * aspectRatio;
+    }
+    switch (handle) {
+      case "nw":
+        minX = startBounds.maxX - nextW;
+        minY = startBounds.maxY - nextH;
+        maxX = startBounds.maxX;
+        maxY = startBounds.maxY;
+        break;
+      case "ne":
+        minX = startBounds.minX;
+        minY = startBounds.maxY - nextH;
+        maxX = startBounds.minX + nextW;
+        maxY = startBounds.maxY;
+        break;
+      case "sw":
+        minX = startBounds.maxX - nextW;
+        minY = startBounds.minY;
+        maxX = startBounds.maxX;
+        maxY = startBounds.minY + nextH;
+        break;
+      case "se":
+        minX = startBounds.minX;
+        minY = startBounds.minY;
+        maxX = startBounds.minX + nextW;
+        maxY = startBounds.minY + nextH;
+        break;
+    }
+  }
+  const newBounds = { minX, minY, maxX, maxY };
+  const sx = (newBounds.maxX - newBounds.minX) / startW;
+  const sy = (newBounds.maxY - newBounds.minY) / startH;
+  for (const [id, snapshot] of startShapes) {
+    const shape = editor.getShape(id);
+    if (!shape || shape.type !== "draw") continue;
+    const nextX = newBounds.minX + (snapshot.x - startBounds.minX) * sx;
+    const nextY = newBounds.minY + (snapshot.y - startBounds.minY) * sy;
+    const segments = snapshot.segments.map((segment) => ({
+      type: segment.type,
+      path: encodePoints(
+        segment.points.map((p) => ({
+          x: p.x * sx,
+          y: p.y * sy,
+          z: p.z
+        }))
+      )
+    }));
+    editor.store.updateShape(id, {
+      x: nextX,
+      y: nextY,
+      props: { ...shape.props, segments }
+    });
+  }
+}
+
+export { CanvasRenderer, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map