@markup-canvas/core 1.0.0

package/src/lib/events/trackpad/createTrackpadPanHandler.ts

@@ -0,0 +1,35 @@
+import { withRAFThrottle } from "@/lib/helpers/index.js";
+import { disableTransition } from "@/lib/transition";
+import type { BaseCanvas, Transform } from "@/types";
+
+export const createTrackpadPanHandler = (canvas: BaseCanvas) =>
+  withRAFThrottle((...args: unknown[]) => {
+    const event = args[0] as WheelEvent;
+    if (!event || !canvas?.updateTransform) {
+      return false;
+    }
+
+    try {
+      const currentTransform = canvas.transform;
+
+      // Calculate pan delta based on trackpad scroll
+      const panSensitivity = 1.0;
+      const deltaX = event.deltaX * panSensitivity;
+      const deltaY = event.deltaY * panSensitivity;
+
+      // Apply pan by adjusting translation
+      const newTransform: Partial<Transform> = {
+        scale: currentTransform.scale,
+        translateX: currentTransform.translateX - deltaX,
+        translateY: currentTransform.translateY - deltaY,
+      };
+
+      disableTransition(canvas.transformLayer, canvas.config);
+
+      // Apply the new transform
+      return canvas.updateTransform(newTransform);
+    } catch (error) {
+      console.error("Error handling trackpad pan:", error);
+      return false;
+    }
+  });

package/src/lib/events/trackpad/detectTrackpadGesture.ts

@@ -0,0 +1,22 @@
+import type { GestureInfo } from "@/types/index.js";
+
+export function detectTrackpadGesture(event: WheelEvent): GestureInfo {
+  const isZoomIntent = event.ctrlKey || event.metaKey;
+
+  const isPixelMode = event.deltaMode === 0;
+  const hasSmallDelta = Math.abs(event.deltaY) < 50;
+  const hasFractionalDelta = event.deltaY % 1 !== 0;
+  const hasMultiAxis = Math.abs(event.deltaX) > 0 && Math.abs(event.deltaY) > 0;
+
+  const trackpadCriteria = [isPixelMode, hasSmallDelta, hasFractionalDelta, hasMultiAxis];
+  const trackpadMatches = trackpadCriteria.filter(Boolean).length;
+  const isTrackpad = trackpadMatches >= 2;
+
+  return {
+    isTrackpad,
+    isMouseWheel: !isTrackpad,
+    isTrackpadScroll: isTrackpad && !isZoomIntent,
+    isTrackpadPinch: isTrackpad && isZoomIntent,
+    isZoomGesture: isZoomIntent,
+  };
+}

package/src/lib/events/utils/getAdaptiveZoomSpeed.ts

@@ -0,0 +1,21 @@
+import { ADAPTIVE_ZOOM_FACTOR, REFERENCE_DISPLAY_AREA } from "@/lib/events/constants.js";
+import type { BaseCanvas } from "@/types/index.js";
+
+export function getAdaptiveZoomSpeed(canvas: BaseCanvas, baseSpeed: number): number {
+  if (!canvas?.getBounds) {
+    return baseSpeed;
+  }
+
+  try {
+    const bounds = canvas.getBounds();
+    const displayArea = bounds.width * bounds.height;
+
+    const rawScaleFactor = (displayArea / REFERENCE_DISPLAY_AREA) ** ADAPTIVE_ZOOM_FACTOR;
+    const adaptiveSpeed = baseSpeed * rawScaleFactor;
+
+    return adaptiveSpeed;
+  } catch (error) {
+    console.warn("Failed to calculate adaptive zoom speed, using base speed:", error);
+    return baseSpeed;
+  }
+}

package/src/lib/events/utils/resetClickState.ts

@@ -0,0 +1,4 @@
+export function resetClickState(setters: { setMouseDownTime: (value: number) => void; setHasDragged: (value: boolean) => void }): void {
+  setters.setMouseDownTime(0);
+  setters.setHasDragged(false);
+}

package/src/lib/events/utils/resetDragState.ts

@@ -0,0 +1,17 @@
+import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function resetDragState(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isSpacePressed: boolean,
+  setters: {
+    setIsDragging: (value: boolean) => void;
+    setDragButton: (value: number) => void;
+  }
+): void {
+  setters.setIsDragging(false);
+  setters.setDragButton(-1);
+  updateCursor(canvas, config, isDragEnabled, isSpacePressed, false);
+}

package/src/lib/events/utils/updateCursor.ts

@@ -0,0 +1,20 @@
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function updateCursor(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isSpacePressed: boolean,
+  isDragging: boolean
+): void {
+  if (!isDragEnabled) {
+    canvas.container.style.cursor = "default";
+    return;
+  }
+
+  if (config.requireSpaceForMouseDrag) {
+    canvas.container.style.cursor = isSpacePressed ? "grab" : "default";
+  } else {
+    canvas.container.style.cursor = isDragging ? "grabbing" : "grab";
+  }
+}

package/src/lib/events/wheel/handleWheel.ts

@@ -0,0 +1,67 @@
+import { TRACKPAD_PINCH_SPEED_FACTOR } from "@/lib/events/constants.js";
+import { detectTrackpadGesture } from "@/lib/events/trackpad/detectTrackpadGesture.js";
+import { getAdaptiveZoomSpeed } from "@/lib/events/utils/getAdaptiveZoomSpeed.js";
+import { withRulerOffset } from "@/lib/helpers/index.js";
+import { applyZoomToCanvas } from "@/lib/transform/applyZoomToCanvas.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function handleWheel(event: WheelEvent, canvas: Canvas, config: Required<MarkupCanvasConfig>): boolean {
+  if (!event || typeof event.deltaY !== "number") {
+    console.warn("Invalid wheel event provided");
+    return false;
+  }
+
+  if (!canvas?.updateTransform) {
+    console.warn("Invalid canvas provided to handleWheelEvent");
+    return false;
+  }
+
+  try {
+    event.preventDefault();
+
+    // Get mouse position
+    const rect = canvas.container.getBoundingClientRect();
+    const rawMouseX = event.clientX - rect.left;
+    const rawMouseY = event.clientY - rect.top;
+
+    // Account for ruler offset
+    const { mouseX, mouseY } = withRulerOffset(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => ({
+      mouseX: adjustedX,
+      mouseY: adjustedY,
+    }));
+
+    // Use the standard zoom speed
+    const baseZoomSpeed = config.zoomSpeed;
+
+    // Simple gesture detection
+    const gestureInfo = detectTrackpadGesture(event);
+
+    if (!gestureInfo.isZoomGesture) {
+      // Not a zoom gesture, ignore
+      return false;
+    }
+
+    // Apply display-size adaptive scaling if enabled
+    const currentZoomSpeed = config.enableAdaptiveSpeed ? getAdaptiveZoomSpeed(canvas, baseZoomSpeed) : baseZoomSpeed;
+
+    // Simple device-based zoom speed adjustment
+    let deviceZoomSpeed = currentZoomSpeed;
+
+    if (gestureInfo.isTrackpadPinch) {
+      const baseTrackpadSpeed = config.zoomSpeed * TRACKPAD_PINCH_SPEED_FACTOR;
+
+      deviceZoomSpeed = config.enableAdaptiveSpeed ? getAdaptiveZoomSpeed(canvas, baseTrackpadSpeed) : baseTrackpadSpeed;
+    }
+
+    // Calculate zoom delta
+    const zoomDirection = event.deltaY < 0 ? 1 : -1;
+
+    // Use exponential zoom for more natural feel
+    const rawZoomMultiplier = zoomDirection > 0 ? 1 + deviceZoomSpeed : 1 / (1 + deviceZoomSpeed);
+
+    return applyZoomToCanvas(canvas, rawZoomMultiplier, mouseX, mouseY);
+  } catch (error) {
+    console.error("Error handling wheel event:", error);
+    return false;
+  }
+}

package/src/lib/events/wheel/setupWheelEvents.ts

@@ -0,0 +1,24 @@
+import { createTrackpadPanHandler } from "@/lib/events/trackpad/createTrackpadPanHandler";
+import { detectTrackpadGesture } from "@/lib/events/trackpad/detectTrackpadGesture";
+import { handleWheel } from "@/lib/events/wheel/handleWheel";
+import type { Canvas, MarkupCanvasConfig } from "@/types";
+
+export function setupWheelEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+  const trackpadPanHandler = createTrackpadPanHandler(canvas);
+
+  const wheelHandler = (event: WheelEvent) => {
+    const gestureInfo = detectTrackpadGesture(event);
+
+    if (gestureInfo.isTrackpadScroll) {
+      return trackpadPanHandler(event);
+    }
+
+    return handleWheel(event, canvas, config);
+  };
+
+  canvas.container.addEventListener("wheel", wheelHandler, { passive: false });
+
+  return () => {
+    canvas.container.removeEventListener("wheel", wheelHandler);
+  };
+}

package/src/lib/events/wheel/setupWheelHandler.ts

@@ -0,0 +1,24 @@
+import { createTrackpadPanHandler } from "@/lib/events/trackpad/createTrackpadPanHandler";
+import { detectTrackpadGesture } from "@/lib/events/trackpad/detectTrackpadGesture";
+import { handleWheel } from "@/lib/events/wheel/handleWheel";
+import type { Canvas, MarkupCanvasConfig } from "@/types";
+
+export function setupWheelEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+  const trackpadPanHandler = createTrackpadPanHandler(canvas);
+
+  const wheelHandler = (event: WheelEvent) => {
+    const gestureInfo = detectTrackpadGesture(event);
+
+    if (gestureInfo.isTrackpadScroll) {
+      return trackpadPanHandler(event);
+    }
+
+    return handleWheel(event, canvas, config);
+  };
+
+  canvas.container.addEventListener("wheel", wheelHandler, { passive: false });
+
+  return () => {
+    canvas.container.removeEventListener("wheel", wheelHandler);
+  };
+}

package/src/lib/helpers/index.ts

@@ -0,0 +1,12 @@
+export { withClampedZoom } from "./withClampedZoom.js";
+export { withDebounce } from "./withDebounce.js";
+export { withFeatureEnabled } from "./withFeatureEnabled.js";
+export { withRAF, withRAFThrottle } from "./withRAF.js";
+export {
+  withRulerAdjustment,
+  withRulerCheck,
+  withRulerOffsetObject,
+  withRulerOffsets,
+  withRulerSize,
+} from "./withRulerCheck.js";
+export { withRulerOffset } from "./withRulerOffset.js";

package/src/lib/helpers/withClampedZoom.ts

@@ -0,0 +1,7 @@
+import { clampZoom } from "@/lib/matrix/clampZoom.js";
+import type { MarkupCanvasConfig } from "@/types";
+
+export function withClampedZoom<T>(config: Required<MarkupCanvasConfig>, operation: (clamp: (scale: number) => number) => T): T {
+  const clampFunction = (scale: number) => clampZoom(scale, config);
+  return operation(clampFunction);
+}

package/src/lib/helpers/withDebounce.ts

@@ -0,0 +1,15 @@
+const debounceTimers = new Map<string, number>();
+
+export function withDebounce(key: string, delay: number, operation: () => void): void {
+  const existingTimer = debounceTimers.get(key);
+  if (existingTimer) {
+    clearTimeout(existingTimer);
+  }
+
+  const timer = window.setTimeout(() => {
+    operation();
+    debounceTimers.delete(key);
+  }, delay);
+
+  debounceTimers.set(key, timer);
+}

package/src/lib/helpers/withFeatureEnabled.ts

@@ -0,0 +1,8 @@
+import type { MarkupCanvasConfig } from "@/types";
+
+export function withFeatureEnabled<T>(config: MarkupCanvasConfig, feature: keyof MarkupCanvasConfig, operation: () => T): T | null {
+  if (config[feature]) {
+    return operation();
+  }
+  return null;
+}

package/src/lib/helpers/withRAF.ts

@@ -0,0 +1,38 @@
+export function withRAF(operation: () => void): () => void {
+  const rafId = requestAnimationFrame(() => {
+    operation();
+  });
+
+  return () => {
+    cancelAnimationFrame(rafId);
+  };
+}
+
+export function withRAFThrottle<T extends (...args: unknown[]) => void>(func: T): T & { cleanup: () => void } {
+  let rafId: number | null = null;
+  let lastArgs: Parameters<T> | null = null;
+
+  const throttled = (...args: Parameters<T>) => {
+    lastArgs = args;
+
+    if (rafId === null) {
+      rafId = requestAnimationFrame(() => {
+        if (lastArgs) {
+          func(...lastArgs);
+        }
+        rafId = null;
+        lastArgs = null;
+      });
+    }
+  };
+
+  throttled.cleanup = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+      lastArgs = null;
+    }
+  };
+
+  return throttled as T & { cleanup: () => void };
+}

package/src/lib/helpers/withRulerCheck.ts

@@ -0,0 +1,52 @@
+import { RULER_SIZE } from "../rulers/constants";
+
+export function withRulerCheck<T>(canvas: { container: HTMLElement }, operation: (hasRulers: boolean) => T): T {
+  const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
+  return operation(hasRulers);
+}
+
+export function withRulerSize<T>(canvas: { container: HTMLElement }, operation: (rulerSize: number) => T): T {
+  const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
+  const rulerSize = hasRulers ? RULER_SIZE : 0;
+  return operation(rulerSize);
+}
+
+export function withRulerAdjustment(
+  canvas: { container: HTMLElement },
+  value: number,
+  operation?: (adjustedValue: number) => void
+): number {
+  return withRulerSize(canvas, (rulerSize) => {
+    const adjusted = value - rulerSize;
+    operation?.(adjusted);
+    return adjusted;
+  });
+}
+
+export function withRulerOffsets<T>(
+  canvas: { container: HTMLElement },
+  x: number,
+  y: number,
+  operation: (adjustedX: number, adjustedY: number) => T
+): T {
+  return withRulerSize(canvas, (rulerSize) => {
+    const adjustedX = x - rulerSize;
+    const adjustedY = y - rulerSize;
+    return operation(adjustedX, adjustedY);
+  });
+}
+
+export function withRulerOffsetObject<T, C extends { x: number; y: number }>(
+  canvas: { container: HTMLElement },
+  coords: C,
+  operation: (adjusted: C) => T
+): T {
+  return withRulerSize(canvas, (rulerSize) => {
+    const adjusted = {
+      ...coords,
+      x: coords.x - rulerSize,
+      y: coords.y - rulerSize,
+    } as C;
+    return operation(adjusted);
+  });
+}

package/src/lib/helpers/withRulerOffset.ts

@@ -0,0 +1,14 @@
+import { RULER_SIZE } from "../rulers/constants";
+
+export function withRulerOffset<T>(
+  canvas: { container: HTMLElement },
+  x: number,
+  y: number,
+  operation: (adjustedX: number, adjustedY: number) => T
+): T {
+  const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
+  const adjustedX = hasRulers ? x - RULER_SIZE : x;
+  const adjustedY = hasRulers ? y - RULER_SIZE : y;
+
+  return operation(adjustedX, adjustedY);
+}

package/src/lib/matrix/canvasToContent.ts

@@ -0,0 +1,20 @@
+import type { Point } from "@/types";
+
+export function canvasToContent(canvasX: number, canvasY: number, matrix: DOMMatrix): Point {
+  if (!matrix?.inverse) {
+    return { x: canvasX, y: canvasY };
+  }
+
+  try {
+    const inverseMatrix = matrix.inverse();
+    const point = new DOMPoint(canvasX, canvasY);
+    const transformed = point.matrixTransform(inverseMatrix);
+    return {
+      x: transformed.x,
+      y: transformed.y,
+    };
+  } catch (error) {
+    console.warn("Canvas to content conversion failed:", error);
+    return { x: canvasX, y: canvasY };
+  }
+}

package/src/lib/matrix/clampZoom.ts

@@ -0,0 +1,5 @@
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function clampZoom(scale: number, config: Required<MarkupCanvasConfig>): number {
+  return Math.max(config.minZoom, Math.min(config.maxZoom, scale));
+}

package/src/lib/matrix/contentToCanvas.ts

@@ -0,0 +1,20 @@
+import type { Point } from "@/types";
+
+export function contentToCanvas(contentX: number, contentY: number, matrix: DOMMatrix): Point {
+  if (!matrix?.transformPoint) {
+    return { x: contentX, y: contentY };
+  }
+
+  try {
+    const point = new DOMPoint(contentX, contentY);
+    const transformed = point.matrixTransform(matrix);
+
+    return {
+      x: transformed.x,
+      y: transformed.y,
+    };
+  } catch (error) {
+    console.warn("Content to canvas conversion failed:", error);
+    return { x: contentX, y: contentY };
+  }
+}

package/src/lib/matrix/createMatrix.ts

@@ -0,0 +1,3 @@
+export function createMatrix(scale: number, translateX: number, translateY: number): DOMMatrix {
+  return new DOMMatrix([scale, 0, 0, scale, translateX, translateY]);
+}

package/src/lib/matrix/createMatrixString.ts

@@ -0,0 +1,3 @@
+export function createMatrixString(matrix: DOMMatrix): string {
+  return `matrix3d(${matrix.m11}, ${matrix.m12}, ${matrix.m13}, ${matrix.m14}, ${matrix.m21}, ${matrix.m22}, ${matrix.m23}, ${matrix.m24}, ${matrix.m31}, ${matrix.m32}, ${matrix.m33}, ${matrix.m34}, ${matrix.m41}, ${matrix.m42}, ${matrix.m43}, ${matrix.m44})`;
+}

package/src/lib/matrix/getZoomToMouseTransform.ts

@@ -0,0 +1,46 @@
+import { DEFAULT_ZOOM, ZOOM_CHANGE_THRESHOLD } from "@/lib/constants.js";
+import { clampZoom } from "@/lib/matrix/clampZoom.js";
+import type { MarkupCanvasConfig, Transform } from "@/types/index.js";
+import { RULER_SIZE } from "../rulers/constants";
+
+export function getZoomToMouseTransform(
+  mouseX: number,
+  mouseY: number,
+  currentTransform: Transform,
+  zoomFactor: number,
+  config: Required<MarkupCanvasConfig>
+): Transform {
+  const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+
+  const transform = currentTransform || {
+    scale: DEFAULT_ZOOM,
+    translateX: rulerOffset,
+    translateY: rulerOffset,
+  };
+
+  const { scale, translateX, translateY } = transform;
+
+  // Calculate new scale with clamping
+  const newScale = clampZoom(scale * zoomFactor, config);
+
+  // Early return if zoom didn't change (hit bounds)
+  if (Math.abs(newScale - scale) < ZOOM_CHANGE_THRESHOLD) {
+    return { scale, translateX, translateY };
+  }
+
+  // Convert mouse position to content space
+  // Formula: contentPos = (mousePos - translate) / scale
+  const contentX = (mouseX - translateX) / scale;
+  const contentY = (mouseY - translateY) / scale;
+
+  // Calculate new translation
+  // Formula: newTranslate = mousePos - (contentPos * newScale)
+  const newTranslateX = mouseX - contentX * newScale;
+  const newTranslateY = mouseY - contentY * newScale;
+
+  return {
+    scale: newScale,
+    translateX: newTranslateX,
+    translateY: newTranslateY,
+  };
+}

package/src/lib/matrix/index.ts

@@ -0,0 +1,5 @@
+export { canvasToContent } from "./canvasToContent.js";
+export { clampZoom } from "./clampZoom.js";
+export { contentToCanvas } from "./contentToCanvas.js";
+export { createMatrix } from "./createMatrix.js";
+export { getZoomToMouseTransform } from "./getZoomToMouseTransform.js";

package/src/lib/rulers/RulerElements.ts

@@ -0,0 +1,6 @@
+export interface RulerElements {
+  horizontalRuler: HTMLElement;
+  verticalRuler: HTMLElement;
+  cornerBox: HTMLElement;
+  gridOverlay?: HTMLElement;
+}

package/src/lib/rulers/constants.ts

@@ -0,0 +1,23 @@
+// Rulers
+export const RULER_SIZE = 24;
+
+export const RULER_Z_INDEX = {
+  GRID: 100,
+  RULERS: 1000,
+  CORNER: 1001,
+} as const;
+
+export const TICK_SETTINGS = {
+  MAJOR_HEIGHT: 6,
+  MINOR_HEIGHT: 4,
+  MAJOR_WIDTH: 8,
+  MINOR_WIDTH: 4,
+  MAJOR_MULTIPLIER: 5,
+  LABEL_INTERVAL: 100,
+} as const;
+
+export const GRID_SETTINGS = {
+  BASE_SIZE: 100,
+  MIN_SIZE: 20,
+  MAX_SIZE: 200,
+} as const;

package/src/lib/rulers/createCornerBox.ts

@@ -0,0 +1,27 @@
+import type { RulerOptions } from "@/types/index.js";
+import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+
+export function createCornerBox(config: Required<RulerOptions>): HTMLElement {
+  const corner = document.createElement("div");
+  corner.className = "canvas-ruler corner-box";
+  corner.style.cssText = `
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: ${RULER_SIZE}px;
+		height: ${RULER_SIZE}px;
+		background: ${config.backgroundColor};
+		border-right: 1px solid ${config.borderColor};
+		border-bottom: 1px solid ${config.borderColor};
+		z-index: ${RULER_Z_INDEX.CORNER};
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-family: ${config.fontFamily};
+		font-size: ${config.fontSize - 2}px;
+		color: ${config.textColor};
+		pointer-events: none;
+	`;
+  corner.textContent = config.units;
+  return corner;
+}

package/src/lib/rulers/createGridOverlay.ts

@@ -0,0 +1,22 @@
+import type { RulerOptions } from "@/types/index.js";
+import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+
+export function createGridOverlay(config: Required<RulerOptions>): HTMLElement {
+  const grid = document.createElement("div");
+  grid.className = "canvas-ruler grid-overlay";
+  grid.style.cssText = `
+		position: absolute;
+		top: ${RULER_SIZE}px;
+		left: ${RULER_SIZE}px;
+		right: 0;
+		bottom: 0;
+		pointer-events: none;
+		z-index: ${RULER_Z_INDEX.GRID};
+		background-image: 
+			linear-gradient(${config.gridColor} 1px, transparent 1px),
+			linear-gradient(90deg, ${config.gridColor} 1px, transparent 1px);
+		background-size: 100px 100px;
+		opacity: 0.5;
+	`;
+  return grid;
+}

package/src/lib/rulers/createHorizontalRuler.ts

@@ -0,0 +1,24 @@
+import type { RulerOptions } from "@/types/index.js";
+import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+
+export function createHorizontalRuler(config: Required<RulerOptions>): HTMLElement {
+  const ruler = document.createElement("div");
+  ruler.className = "canvas-ruler horizontal-ruler";
+  ruler.style.cssText = `
+	position: absolute;
+	top: 0;
+	left: ${RULER_SIZE}px;
+	right: 0;
+	height: ${RULER_SIZE}px;
+	background: ${config.backgroundColor};
+	border-bottom: 1px solid ${config.borderColor};
+	border-right: 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/createRulerElements.ts

@@ -0,0 +1,27 @@
+import type { RulerOptions } from "@/types/index.js";
+import { createCornerBox } from "./createCornerBox.js";
+import { createGridOverlay } from "./createGridOverlay.js";
+import { createHorizontalRuler } from "./createHorizontalRuler.js";
+import { createVerticalRuler } from "./createVerticalRuler.js";
+import type { RulerElements } from "./RulerElements.js";
+
+export function createRulerElements(container: HTMLElement, config: Required<RulerOptions>): RulerElements {
+  const horizontalRuler = createHorizontalRuler(config);
+  const verticalRuler = createVerticalRuler(config);
+  const cornerBox = createCornerBox(config);
+  const gridOverlay = config.showGrid ? createGridOverlay(config) : undefined;
+
+  container.appendChild(horizontalRuler);
+  container.appendChild(verticalRuler);
+  container.appendChild(cornerBox);
+  if (gridOverlay) {
+    container.appendChild(gridOverlay);
+  }
+
+  return {
+    horizontalRuler,
+    verticalRuler,
+    cornerBox,
+    gridOverlay,
+  };
+}