@markup-canvas/core 1.0.0

package/src/lib/rulers/createRulers.ts

@@ -0,0 +1,94 @@
+import type { RulerCanvas as Canvas, MarkupCanvasConfig, RulerSystem } from "@/types/index.js";
+import { createRulerElements } from "./createRulerElements.js";
+import type { RulerElements } from "./RulerElements.js";
+import { setupRulerEvents } from "./setupRulerEvents.js";
+import { updateRulers } from "./updateRulers.js";
+
+export function createRulers(canvas: Canvas, config: Required<MarkupCanvasConfig>): RulerSystem | null {
+  if (!canvas?.container) {
+    console.error("Invalid canvas provided to createRulers");
+    return null;
+  }
+
+  let elements: RulerElements;
+  let cleanupEvents: (() => void) | null = null;
+  let isDestroyed = false;
+
+  const rulerOptions = {
+    backgroundColor: config.rulerBackgroundColor,
+    borderColor: config.rulerBorderColor,
+    textColor: config.rulerTextColor,
+    majorTickColor: config.rulerMajorTickColor,
+    minorTickColor: config.rulerMinorTickColor,
+    fontSize: config.rulerFontSize,
+    fontFamily: config.rulerFontFamily,
+    showGrid: config.enableGrid,
+    gridColor: config.gridColor,
+    units: config.rulerUnits,
+  };
+
+  const safeUpdate = (): void => {
+    if (isDestroyed || !elements.horizontalRuler || !elements.verticalRuler) return;
+    updateRulers(canvas, elements.horizontalRuler, elements.verticalRuler, elements.gridOverlay, rulerOptions);
+  };
+
+  try {
+    elements = createRulerElements(canvas.container, rulerOptions);
+    cleanupEvents = setupRulerEvents(canvas, safeUpdate);
+
+    safeUpdate();
+
+    return {
+      horizontalRuler: elements.horizontalRuler,
+      verticalRuler: elements.verticalRuler,
+      cornerBox: elements.cornerBox,
+      gridOverlay: elements.gridOverlay,
+
+      update: safeUpdate,
+
+      show: () => {
+        if (elements.horizontalRuler) elements.horizontalRuler.style.display = "block";
+        if (elements.verticalRuler) elements.verticalRuler.style.display = "block";
+        if (elements.cornerBox) elements.cornerBox.style.display = "flex";
+        if (elements.gridOverlay) elements.gridOverlay.style.display = "block";
+      },
+
+      hide: () => {
+        if (elements.horizontalRuler) elements.horizontalRuler.style.display = "none";
+        if (elements.verticalRuler) elements.verticalRuler.style.display = "none";
+        if (elements.cornerBox) elements.cornerBox.style.display = "none";
+        if (elements.gridOverlay) elements.gridOverlay.style.display = "none";
+      },
+
+      toggleGrid: () => {
+        if (elements.gridOverlay) {
+          const isVisible = elements.gridOverlay.style.display !== "none";
+          elements.gridOverlay.style.display = isVisible ? "none" : "block";
+        }
+      },
+
+      destroy: () => {
+        isDestroyed = true;
+        if (cleanupEvents) {
+          cleanupEvents();
+        }
+
+        if (elements.horizontalRuler?.parentNode) {
+          elements.horizontalRuler.parentNode.removeChild(elements.horizontalRuler);
+        }
+        if (elements.verticalRuler?.parentNode) {
+          elements.verticalRuler.parentNode.removeChild(elements.verticalRuler);
+        }
+        if (elements.cornerBox?.parentNode) {
+          elements.cornerBox.parentNode.removeChild(elements.cornerBox);
+        }
+        if (elements.gridOverlay?.parentNode) {
+          elements.gridOverlay.parentNode.removeChild(elements.gridOverlay);
+        }
+      },
+    };
+  } catch (error) {
+    console.error("Failed to create rulers:", error);
+    return null;
+  }
+}

package/src/lib/rulers/createVerticalRuler.ts

@@ -0,0 +1,24 @@
+import type { RulerOptions } from "@/types/index.js";
+import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+
+export function createVerticalRuler(config: Required<RulerOptions>): HTMLElement {
+  const ruler = document.createElement("div");
+  ruler.className = "canvas-ruler vertical-ruler";
+  ruler.style.cssText = `
+	position: absolute;
+	top: ${RULER_SIZE}px;
+	left: 0;
+	bottom: 0;
+	width: ${RULER_SIZE}px;
+	background: ${config.backgroundColor};
+	border-right: 1px solid ${config.borderColor};
+	border-bottom: 1px solid ${config.borderColor};
+	z-index: ${RULER_Z_INDEX.RULERS};
+	pointer-events: none;
+	font-family: ${config.fontFamily};
+	font-size: ${config.fontSize}px;
+	color: ${config.textColor};
+	overflow: hidden;
+  `;
+  return ruler;
+}

package/src/lib/rulers/index.ts

@@ -0,0 +1,2 @@
+export type { RulerOptions, RulerSystem } from "@/types/index.js";
+export { createRulers } from "./createRulers.js";

package/src/lib/rulers/setupRulerEvents.ts

@@ -0,0 +1,23 @@
+import { withRAFThrottle } from "@/lib/helpers/index.js";
+import type { RulerCanvas as Canvas, Transform } from "@/types/index.js";
+
+export function setupRulerEvents(canvas: Canvas, updateCallback: () => void): () => void {
+  const throttledUpdateCallback = withRAFThrottle(updateCallback);
+
+  const originalUpdateTransform = canvas.updateTransform;
+  canvas.updateTransform = function (newTransform: Partial<Transform>): boolean {
+    const result = originalUpdateTransform.call(this, newTransform);
+    throttledUpdateCallback();
+    return result;
+  };
+
+  const resizeHandler = withRAFThrottle(updateCallback);
+  window.addEventListener("resize", resizeHandler);
+
+  return () => {
+    window.removeEventListener("resize", resizeHandler);
+    canvas.updateTransform = originalUpdateTransform;
+    throttledUpdateCallback.cleanup();
+    resizeHandler.cleanup();
+  };
+}

package/src/lib/rulers/ticks/calculateTickSpacing.ts

@@ -0,0 +1,15 @@
+export function calculateTickSpacing(contentSize: number, canvasSize: number): number {
+  const targetTicks = Math.max(5, Math.min(20, canvasSize / 50));
+  const rawSpacing = contentSize / targetTicks;
+
+  const magnitude = 10 ** Math.floor(Math.log10(rawSpacing));
+  const normalized = rawSpacing / magnitude;
+
+  let niceSpacing: number;
+  if (normalized <= 1) niceSpacing = 1;
+  else if (normalized <= 2) niceSpacing = 2;
+  else if (normalized <= 5) niceSpacing = 5;
+  else niceSpacing = 10;
+
+  return niceSpacing * magnitude;
+}

package/src/lib/rulers/ticks/createHorizontalTick.ts

@@ -0,0 +1,41 @@
+import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
+import type { RulerOptions } from "@/types/index.js";
+
+export function createHorizontalTick(
+  container: HTMLElement | DocumentFragment,
+  position: number,
+  pixelPos: number,
+  tickSpacing: number,
+  config: Required<RulerOptions>
+): void {
+  const tick = document.createElement("div");
+  const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
+  const tickHeight = isMajor ? TICK_SETTINGS.MAJOR_HEIGHT : TICK_SETTINGS.MINOR_HEIGHT;
+
+  tick.style.cssText = `
+		position: absolute;
+		left: ${pixelPos}px;
+		bottom: 0;
+		width: 1px;
+		height: ${tickHeight}px;
+		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+	`;
+
+  container.appendChild(tick);
+
+  const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
+  if (shouldShowLabel) {
+    const label = document.createElement("div");
+    label.style.cssText = `
+			position: absolute;
+			left: ${pixelPos}px;
+			bottom: ${tickHeight}px;
+			font-size: ${config.fontSize}px;
+			color: ${config.textColor};
+			white-space: nowrap;
+			pointer-events: none;
+		`;
+    label.textContent = Math.round(position).toString();
+    container.appendChild(label);
+  }
+}

package/src/lib/rulers/ticks/createVerticalTick.ts

@@ -0,0 +1,43 @@
+import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
+import type { RulerOptions } from "@/types/index.js";
+
+export function createVerticalTick(
+  container: HTMLElement | DocumentFragment,
+  position: number,
+  pixelPos: number,
+  tickSpacing: number,
+  config: Required<RulerOptions>
+): void {
+  const tick = document.createElement("div");
+  const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
+  const tickWidth = isMajor ? TICK_SETTINGS.MAJOR_WIDTH : TICK_SETTINGS.MINOR_WIDTH;
+
+  tick.style.cssText = `
+		position: absolute;
+		top: ${pixelPos}px;
+		right: 0;
+		width: ${tickWidth}px;
+		height: 1px;
+		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+	`;
+
+  container.appendChild(tick);
+
+  const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
+  if (shouldShowLabel) {
+    const label = document.createElement("div");
+    label.style.cssText = `
+			position: absolute;
+			top: ${pixelPos - 6}px;
+			right: ${tickWidth + 6}px;
+			font-size: ${config.fontSize}px;
+			color: ${config.textColor};
+			white-space: nowrap;
+			pointer-events: none;
+			transform: rotate(-90deg);
+			transform-origin: right center;
+		`;
+    label.textContent = Math.round(position).toString();
+    container.appendChild(label);
+  }
+}

package/src/lib/rulers/ticks/index.ts

@@ -0,0 +1,3 @@
+export { calculateTickSpacing } from "./calculateTickSpacing.js";
+export { createHorizontalTick } from "./createHorizontalTick.js";
+export { createVerticalTick } from "./createVerticalTick.js";

package/src/lib/rulers/updateGrid.ts

@@ -0,0 +1,11 @@
+import { GRID_SETTINGS } from "@/lib/rulers/constants.js";
+
+export function updateGrid(gridOverlay: HTMLElement, scale: number, translateX: number, translateY: number): void {
+  let gridSize = GRID_SETTINGS.BASE_SIZE * scale;
+
+  while (gridSize < GRID_SETTINGS.MIN_SIZE) gridSize *= 2;
+  while (gridSize > GRID_SETTINGS.MAX_SIZE) gridSize /= 2;
+
+  gridOverlay.style.backgroundSize = `${gridSize}px ${gridSize}px`;
+  gridOverlay.style.backgroundPosition = `${translateX % gridSize}px ${translateY % gridSize}px`;
+}

package/src/lib/rulers/updateHorizontalRuler.ts

@@ -0,0 +1,32 @@
+import type { RulerOptions } from "@/types/index.js";
+import { calculateTickSpacing } from "./ticks/calculateTickSpacing.js";
+import { createHorizontalTick } from "./ticks/createHorizontalTick.js";
+
+export function updateHorizontalRuler(
+  ruler: HTMLElement,
+  contentLeft: number,
+  contentRight: number,
+  canvasWidth: number,
+  scale: number,
+  config: Required<RulerOptions>
+): void {
+  const rulerWidth = canvasWidth;
+  const contentWidth = contentRight - contentLeft;
+
+  const tickSpacing = calculateTickSpacing(contentWidth, rulerWidth);
+  const fragment = document.createDocumentFragment();
+
+  const startTick = Math.floor(contentLeft / tickSpacing) * tickSpacing;
+  const endTick = Math.ceil(contentRight / tickSpacing) * tickSpacing;
+
+  for (let pos = startTick; pos <= endTick; pos += tickSpacing) {
+    const pixelPos = (pos - contentLeft) * scale;
+
+    if (pixelPos >= -50 && pixelPos <= rulerWidth + 50) {
+      createHorizontalTick(fragment, pos, pixelPos, tickSpacing, config);
+    }
+  }
+
+  ruler.innerHTML = "";
+  ruler.appendChild(fragment);
+}

package/src/lib/rulers/updateRulers.ts

@@ -0,0 +1,33 @@
+import { updateGrid } from "@/lib/rulers/updateGrid.js";
+import type { RulerCanvas as Canvas, RulerOptions } from "@/types/index.js";
+import { RULER_SIZE } from "./constants";
+import { updateHorizontalRuler } from "./updateHorizontalRuler.js";
+import { updateVerticalRuler } from "./updateVerticalRuler.js";
+
+export function updateRulers(
+  canvas: Canvas,
+  horizontalRuler: HTMLElement,
+  verticalRuler: HTMLElement,
+  gridOverlay: HTMLElement | undefined,
+  config: Required<RulerOptions>
+): void {
+  const bounds = canvas.getBounds();
+  const scale = bounds.scale || 1;
+  const translateX = bounds.translateX || 0;
+  const translateY = bounds.translateY || 0;
+
+  const canvasWidth = bounds.width - RULER_SIZE;
+  const canvasHeight = bounds.height - RULER_SIZE;
+
+  const contentLeft = -translateX / scale;
+  const contentTop = -translateY / scale;
+  const contentRight = contentLeft + canvasWidth / scale;
+  const contentBottom = contentTop + canvasHeight / scale;
+
+  updateHorizontalRuler(horizontalRuler, contentLeft, contentRight, canvasWidth, scale, config);
+  updateVerticalRuler(verticalRuler, contentTop, contentBottom, canvasHeight, scale, config);
+
+  if (gridOverlay) {
+    updateGrid(gridOverlay, scale, translateX, translateY);
+  }
+}

package/src/lib/rulers/updateVerticalRuler.ts

@@ -0,0 +1,31 @@
+import { calculateTickSpacing, createVerticalTick } from "@/lib/rulers/ticks";
+import type { RulerOptions } from "@/types/index.js";
+
+export function updateVerticalRuler(
+  ruler: HTMLElement,
+  contentTop: number,
+  contentBottom: number,
+  canvasHeight: number,
+  scale: number,
+  config: Required<RulerOptions>
+): void {
+  const rulerHeight = canvasHeight;
+  const contentHeight = contentBottom - contentTop;
+
+  const tickSpacing = calculateTickSpacing(contentHeight, rulerHeight);
+  const fragment = document.createDocumentFragment();
+
+  const startTick = Math.floor(contentTop / tickSpacing) * tickSpacing;
+  const endTick = Math.ceil(contentBottom / tickSpacing) * tickSpacing;
+
+  for (let pos = startTick; pos <= endTick; pos += tickSpacing) {
+    const pixelPos = (pos - contentTop) * scale;
+
+    if (pixelPos >= -50 && pixelPos <= rulerHeight + 50) {
+      createVerticalTick(fragment, pos, pixelPos, tickSpacing, config);
+    }
+  }
+
+  ruler.innerHTML = "";
+  ruler.appendChild(fragment);
+}

package/src/lib/transform/applyTransform.ts

@@ -0,0 +1,15 @@
+import { createMatrixString } from "@/lib/matrix/createMatrixString";
+
+export function applyTransform(element: HTMLElement, matrix: DOMMatrix): boolean {
+  if (!element?.style || !matrix) {
+    return false;
+  }
+
+  try {
+    element.style.transform = createMatrixString(matrix);
+    return true;
+  } catch (error) {
+    console.warn("Transform application failed:", error);
+    return false;
+  }
+}

package/src/lib/transform/applyZoomToCanvas.ts

@@ -0,0 +1,7 @@
+import { getZoomToMouseTransform } from "@/lib/matrix";
+import type { Canvas } from "@/types";
+
+export function applyZoomToCanvas(canvas: Canvas, rawZoomFactor: number, centerX: number, centerY: number): boolean {
+  const newTransform = getZoomToMouseTransform(centerX, centerY, canvas.transform, rawZoomFactor, canvas.config);
+  return canvas.updateTransform(newTransform);
+}

package/src/lib/transform/hardware-acceleration.ts

@@ -0,0 +1,11 @@
+export function enableHardwareAcceleration(element: HTMLElement): boolean {
+  try {
+    // Set CSS properties for hardware acceleration
+    element.style.transform = element.style.transform || "translateZ(0)";
+    element.style.backfaceVisibility = "hidden";
+    return true;
+  } catch (error) {
+    console.error("Failed to enable hardware acceleration:", error);
+    return false;
+  }
+}

package/src/lib/transform/index.ts

@@ -0,0 +1,2 @@
+export { applyTransform } from "./applyTransform.js";
+export { enableHardwareAcceleration } from "./hardware-acceleration.js";

package/src/lib/transition/disableTransition.ts

@@ -0,0 +1,33 @@
+import { FALLBACK_TRANSITION_DURATION } from "@/lib/constants";
+import { withDebounce } from "@/lib/helpers/index.js";
+import type { MarkupCanvasConfig } from "@/types";
+
+declare global {
+  interface Window {
+    __markupCanvasTransitionTimeout?: number;
+  }
+}
+
+export function disableTransition(element: HTMLElement, config: MarkupCanvasConfig): boolean {
+  try {
+    if (config.enableTransition) {
+      if (window.__markupCanvasTransitionTimeout) {
+        clearTimeout(window.__markupCanvasTransitionTimeout);
+        window.__markupCanvasTransitionTimeout = undefined;
+      }
+
+      const delay = (config.transitionDuration ?? FALLBACK_TRANSITION_DURATION) * 1000;
+      withDebounce("disableTransition", delay, () => {
+        element.style.transition = "none";
+        window.__markupCanvasTransitionTimeout = undefined;
+      });
+
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Failed to disable transitions:", error);
+    return true;
+  }
+}

package/src/lib/transition/enableTransition.ts

@@ -0,0 +1,26 @@
+import type { MarkupCanvasConfig } from "@/types";
+
+declare global {
+  interface Window {
+    __markupCanvasTransitionTimeout?: number;
+  }
+}
+
+export function enableTransition(element: HTMLElement, config: MarkupCanvasConfig): boolean {
+  try {
+    if (config.enableTransition) {
+      if (window.__markupCanvasTransitionTimeout) {
+        clearTimeout(window.__markupCanvasTransitionTimeout);
+        window.__markupCanvasTransitionTimeout = undefined;
+      }
+
+      element.style.transition = `transform ${config.transitionDuration}s linear`;
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Failed to enable transitions:", error);
+    return false;
+  }
+}

package/src/lib/transition/index.ts

@@ -0,0 +1,3 @@
+export { disableTransition } from "./disableTransition.js";
+export { enableTransition } from "./enableTransition.js";
+export { withTransition } from "./withTransition.js";

package/src/lib/transition/withTransition.ts

@@ -0,0 +1,13 @@
+import { disableTransition } from "@/lib/transition/disableTransition.js";
+import { enableTransition } from "@/lib/transition/enableTransition.js";
+import type { MarkupCanvasConfig } from "@/types";
+
+export function withTransition<T>(element: HTMLElement, config: MarkupCanvasConfig, operation: () => T): T {
+  enableTransition(element, config);
+  try {
+    const result = operation();
+    return result;
+  } finally {
+    disableTransition(element, config);
+  }
+}

package/src/types/canvas.ts

@@ -0,0 +1,89 @@
+import type { MarkupCanvasConfig } from "./config";
+
+export interface Transform {
+  scale: number;
+  translateX: number;
+  translateY: number;
+}
+
+export interface CanvasOptions {
+  width?: number;
+  height?: number;
+  enableAcceleration?: boolean;
+  enableEventHandling?: boolean;
+  onTransformUpdate?: (transform: Transform) => void;
+}
+
+export interface CanvasBounds {
+  width: number;
+  height: number;
+  contentWidth: number;
+  contentHeight: number;
+  scale: number;
+  translateX: number;
+  translateY: number;
+  visibleArea: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  scaledContentWidth: number;
+  scaledContentHeight: number;
+  canPanLeft: boolean;
+  canPanRight: boolean;
+  canPanUp: boolean;
+  canPanDown: boolean;
+  canZoomIn: boolean;
+  canZoomOut: boolean;
+}
+
+export interface BaseCanvas {
+  container: HTMLElement;
+  transformLayer: HTMLElement;
+  contentLayer: HTMLElement;
+  config: Required<MarkupCanvasConfig>;
+  transform: Transform;
+  getBounds: () => CanvasBounds;
+  updateTransform: (newTransform: Partial<Transform>) => boolean;
+  reset: () => boolean;
+  handleResize: () => boolean;
+  setZoom: (zoomLevel: number) => boolean;
+  canvasToContent: (x: number, y: number) => { x: number; y: number };
+  zoomToPoint: (x: number, y: number, targetScale: number) => boolean;
+  resetView: () => boolean;
+  zoomToFitContent: () => boolean;
+}
+
+// Legacy Canvas interface - kept for backwards compatibility with other parts of the codebase
+export interface Canvas extends BaseCanvas {
+  cleanup?: () => void;
+  // Exposed control functions for custom keyboard implementation
+  panLeft: (distance?: number) => boolean;
+  panRight: (distance?: number) => boolean;
+  panUp: (distance?: number) => boolean;
+  panDown: (distance?: number) => boolean;
+  zoomIn: (factor?: number) => boolean;
+  zoomOut: (factor?: number) => boolean;
+  resetZoom: (duration?: number) => boolean;
+  // Mouse drag control functions
+  enableMouseDrag: () => boolean;
+  disableMouseDrag: () => boolean;
+  isMouseDragEnabled: () => boolean;
+  // Grid control functions
+  toggleGrid?: () => boolean;
+  showGrid?: () => boolean;
+  hideGrid?: () => boolean;
+  isGridVisible?: () => boolean;
+  // Ruler control functions
+  toggleRulers?: () => boolean;
+  showRulers?: () => boolean;
+  hideRulers?: () => boolean;
+  areRulersVisible?: () => boolean;
+  // Additional utility functions
+  centerContent: () => boolean;
+  fitToScreen: () => boolean;
+  getVisibleArea: () => { x: number; y: number; width: number; height: number };
+  isPointVisible: (x: number, y: number) => boolean;
+  scrollToPoint: (x: number, y: number, duration?: number) => boolean;
+}

package/src/types/config.ts

@@ -0,0 +1,54 @@
+import type { Transform } from "./canvas";
+
+export interface MarkupCanvasConfig {
+  // Canvas dimensions
+  width?: number;
+  height?: number;
+  enableAcceleration?: boolean;
+
+  // Interaction controls
+  enableZoom?: boolean;
+  enablePan?: boolean;
+  enableTouch?: boolean;
+  enableKeyboard?: boolean;
+  limitKeyboardEventsToCanvas?: boolean;
+
+  // Zoom behavior
+  zoomSpeed?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  enableTransition?: boolean;
+  transitionDuration?: number;
+  enableAdaptiveSpeed?: boolean;
+
+  // Pan behavior
+  enableLeftDrag?: boolean;
+  enableMiddleDrag?: boolean;
+  requireSpaceForMouseDrag?: boolean;
+  keyboardPanStep?: number;
+  keyboardFastMultiplier?: number;
+  keyboardZoomStep?: number;
+
+  // Click-to-zoom
+  enableClickToZoom?: boolean;
+  clickZoomLevel?: number;
+  requireOptionForClickZoom?: boolean;
+
+  // Visual elements
+  enableRulers?: boolean;
+  enableGrid?: boolean;
+  gridColor?: string;
+
+  // Ruler styling
+  rulerBackgroundColor?: string;
+  rulerBorderColor?: string;
+  rulerTextColor?: string;
+  rulerMajorTickColor?: string;
+  rulerMinorTickColor?: string;
+  rulerFontSize?: number;
+  rulerFontFamily?: string;
+  rulerUnits?: string;
+
+  // Callbacks
+  onTransformUpdate?: (transform: Transform) => void;
+}

package/src/types/events.ts

@@ -0,0 +1,31 @@
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { Transform } from "@/types/canvas.js";
+
+export interface MarkupCanvasEvents {
+  transform: Transform;
+  zoom: number;
+  pan: { x: number; y: number };
+  ready: MarkupCanvas;
+  [key: string]: unknown;
+}
+
+export interface TouchState {
+  touches: Touch[];
+  lastDistance: number;
+  lastCenter: { x: number; y: number };
+}
+
+export interface GestureInfo {
+  isTrackpad: boolean;
+  isMouseWheel: boolean;
+  isTrackpadScroll: boolean;
+  isTrackpadPinch: boolean;
+  isZoomGesture: boolean;
+}
+
+export interface MouseDragControls {
+  cleanup: () => void;
+  enable: () => boolean;
+  disable: () => boolean;
+  isEnabled: () => boolean;
+}