@markup-canvas/core 1.0.0

package/dist/markup-canvas.esm.js

@@ -0,0 +1,1995 @@
+/**
+ * Markup Canvas
+ * High-performance markup canvas with zoom and pan capabilities
+ * @version 1.0.0
+ */
+// Default transform values
+const DEFAULT_ZOOM = 1.0;
+// Validation thresholds
+const ZOOM_CHANGE_THRESHOLD = 0.001;
+// CSS transition values
+const FALLBACK_TRANSITION_DURATION = 0.2;
+// Zoom to fit padding factor
+const ZOOM_FIT_PADDING = 0.9;
+// CSS class names
+const CANVAS_CONTAINER_CLASS = "canvas-container";
+const TRANSFORM_LAYER_CLASS = "transform-layer";
+const CONTENT_LAYER_CLASS = "content-layer";
+
+function moveExistingContent(existingContent, contentLayer, transformLayer) {
+    existingContent.forEach((child) => {
+        if (child !== transformLayer && !child.classList.contains(TRANSFORM_LAYER_CLASS)) {
+            contentLayer.appendChild(child);
+        }
+    });
+}
+
+function setupContentLayer(contentLayer) {
+    contentLayer.style.position = "relative";
+    contentLayer.style.width = "100%";
+    contentLayer.style.height = "100%";
+    contentLayer.style.pointerEvents = "auto";
+}
+
+// Rulers
+const RULER_SIZE = 24;
+const RULER_Z_INDEX = {
+    GRID: 100,
+    RULERS: 1000,
+    CORNER: 1001,
+};
+const TICK_SETTINGS = {
+    MAJOR_HEIGHT: 6,
+    MINOR_HEIGHT: 4,
+    MAJOR_WIDTH: 8,
+    MINOR_WIDTH: 4,
+    MAJOR_MULTIPLIER: 5,
+    LABEL_INTERVAL: 100,
+};
+const GRID_SETTINGS = {
+    BASE_SIZE: 100,
+    MIN_SIZE: 20,
+    MAX_SIZE: 200,
+};
+
+// Sets up the transform layer with proper styles and dimensions
+function setupTransformLayer(transformLayer, config) {
+    transformLayer.style.position = "absolute";
+    const rulerOffset = RULER_SIZE;
+    transformLayer.style.top = `${rulerOffset}px`;
+    transformLayer.style.left = `${rulerOffset}px`;
+    transformLayer.style.width = `${config.width}px`;
+    transformLayer.style.height = `${config.height}px`;
+    transformLayer.style.transformOrigin = "0 0";
+}
+
+function createCanvasLayers(container, config) {
+    const existingContent = Array.from(container.children);
+    // Create or find transform layer
+    let transformLayer = container.querySelector(`.${TRANSFORM_LAYER_CLASS}`);
+    if (!transformLayer) {
+        transformLayer = document.createElement("div");
+        transformLayer.className = TRANSFORM_LAYER_CLASS;
+        container.appendChild(transformLayer);
+    }
+    setupTransformLayer(transformLayer, config);
+    // Create or find content layer
+    let contentLayer = transformLayer.querySelector(`.${CONTENT_LAYER_CLASS}`);
+    if (!contentLayer) {
+        contentLayer = document.createElement("div");
+        contentLayer.className = CONTENT_LAYER_CLASS;
+        transformLayer.appendChild(contentLayer);
+        moveExistingContent(existingContent, contentLayer, transformLayer);
+    }
+    // Set content layer properties
+    setupContentLayer(contentLayer);
+    return { transformLayer, contentLayer };
+}
+
+function canvasToContent(canvasX, canvasY, matrix) {
+    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 };
+    }
+}
+
+function clampZoom(scale, config) {
+    return Math.max(config.minZoom, Math.min(config.maxZoom, scale));
+}
+
+function createMatrix(scale, translateX, translateY) {
+    return new DOMMatrix([scale, 0, 0, scale, translateX, translateY]);
+}
+
+function getZoomToMouseTransform(mouseX, mouseY, currentTransform, zoomFactor, config) {
+    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,
+    };
+}
+
+function calculateVisibleArea(canvasWidth, canvasHeight, contentWidth, contentHeight, transform) {
+    const topLeft = canvasToContent(0, 0, createMatrix(transform.scale, transform.translateX, transform.translateY));
+    const bottomRight = canvasToContent(canvasWidth, canvasHeight, createMatrix(transform.scale, transform.translateX, transform.translateY));
+    return {
+        x: Math.max(0, Math.min(contentWidth, topLeft.x)),
+        y: Math.max(0, Math.min(contentHeight, topLeft.y)),
+        width: Math.max(0, Math.min(contentWidth - topLeft.x, bottomRight.x - topLeft.x)),
+        height: Math.max(0, Math.min(contentHeight - topLeft.y, bottomRight.y - topLeft.y)),
+    };
+}
+
+function getEmptyBounds() {
+    return {
+        width: 0,
+        height: 0,
+        contentWidth: 0,
+        contentHeight: 0,
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+        visibleArea: { x: 0, y: 0, width: 0, height: 0 },
+        scaledContentWidth: 0,
+        scaledContentHeight: 0,
+        canPanLeft: false,
+        canPanRight: false,
+        canPanUp: false,
+        canPanDown: false,
+        canZoomIn: false,
+        canZoomOut: false,
+    };
+}
+
+function withClampedZoom(config, operation) {
+    const clampFunction = (scale) => clampZoom(scale, config);
+    return operation(clampFunction);
+}
+
+const debounceTimers = new Map();
+function withDebounce(key, delay, operation) {
+    const existingTimer = debounceTimers.get(key);
+    if (existingTimer) {
+        clearTimeout(existingTimer);
+    }
+    const timer = window.setTimeout(() => {
+        operation();
+        debounceTimers.delete(key);
+    }, delay);
+    debounceTimers.set(key, timer);
+}
+
+function withFeatureEnabled(config, feature, operation) {
+    if (config[feature]) {
+        return operation();
+    }
+    return null;
+}
+
+function withRAFThrottle(func) {
+    let rafId = null;
+    let lastArgs = null;
+    const throttled = (...args) => {
+        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;
+}
+
+function withRulerSize(canvas, operation) {
+    const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
+    const rulerSize = hasRulers ? RULER_SIZE : 0;
+    return operation(rulerSize);
+}
+function withRulerOffsets(canvas, x, y, operation) {
+    return withRulerSize(canvas, (rulerSize) => {
+        const adjustedX = x - rulerSize;
+        const adjustedY = y - rulerSize;
+        return operation(adjustedX, adjustedY);
+    });
+}
+function withRulerOffsetObject(canvas, coords, operation) {
+    return withRulerSize(canvas, (rulerSize) => {
+        const adjusted = {
+            ...coords,
+            x: coords.x - rulerSize,
+            y: coords.y - rulerSize,
+        };
+        return operation(adjusted);
+    });
+}
+
+function withRulerOffset(canvas, x, y, operation) {
+    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);
+}
+
+const DEFAULT_CONFIG = {
+    // Canvas dimensions
+    width: 8000,
+    height: 8000,
+    enableAcceleration: true,
+    // Interaction controls
+    enableZoom: true,
+    enablePan: true,
+    enableTouch: true,
+    enableKeyboard: true,
+    limitKeyboardEventsToCanvas: false,
+    // Zoom behavior
+    zoomSpeed: 1.5,
+    minZoom: 0.05,
+    maxZoom: 80,
+    enableTransition: true,
+    transitionDuration: 0.2,
+    enableAdaptiveSpeed: true,
+    // Pan behavior
+    enableLeftDrag: true,
+    enableMiddleDrag: true,
+    requireSpaceForMouseDrag: false,
+    // Keyboard behavior
+    keyboardPanStep: 50,
+    keyboardFastMultiplier: 20,
+    keyboardZoomStep: 0.2,
+    // Click-to-zoom
+    enableClickToZoom: true,
+    clickZoomLevel: 1.0,
+    requireOptionForClickZoom: false,
+    // Visual elements
+    enableRulers: true,
+    enableGrid: true,
+    gridColor: "rgba(0, 123, 255, 0.1)",
+    // Ruler styling
+    rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
+    rulerBorderColor: "#ddd",
+    rulerTextColor: "#666",
+    rulerMajorTickColor: "#999",
+    rulerMinorTickColor: "#ccc",
+    rulerFontSize: 10,
+    rulerFontFamily: "Monaco, Menlo, monospace",
+    rulerUnits: "px",
+    // Callbacks
+    onTransformUpdate: () => { },
+};
+
+function getCanvasBounds(canvas) {
+    try {
+        const container = canvas.container;
+        const config = canvas.config;
+        const transform = canvas.transform || {
+            scale: 1.0,
+            translateX: 0,
+            translateY: 0,
+        };
+        // Get canvas dimensions
+        const containerRect = container.getBoundingClientRect();
+        const totalWidth = containerRect.width || container.clientWidth || 0;
+        const totalHeight = containerRect.height || container.clientHeight || 0;
+        // Calculate canvas dimensions accounting for rulers
+        const canvasWidth = withRulerSize({ container }, (rulerSize) => Math.max(0, totalWidth - rulerSize));
+        const canvasHeight = withRulerSize({ container }, (rulerSize) => Math.max(0, totalHeight - rulerSize));
+        // Get content dimensions
+        const contentWidth = config.width || DEFAULT_CONFIG.width;
+        const contentHeight = config.height || DEFAULT_CONFIG.height;
+        // Calculate visible area in content coordinates
+        const visibleArea = calculateVisibleArea(canvasWidth, canvasHeight, contentWidth, contentHeight, transform);
+        return {
+            // Canvas dimensions
+            width: canvasWidth,
+            height: canvasHeight,
+            // Content dimensions
+            contentWidth,
+            contentHeight,
+            // Current transform
+            scale: transform.scale,
+            translateX: transform.translateX,
+            translateY: transform.translateY,
+            // Visible area in content coordinates
+            visibleArea,
+            // Calculated properties
+            scaledContentWidth: contentWidth * transform.scale,
+            scaledContentHeight: contentHeight * transform.scale,
+            // Bounds checking
+            canPanLeft: transform.translateX < 0,
+            canPanRight: transform.translateX + contentWidth * transform.scale > canvasWidth,
+            canPanUp: transform.translateY < 0,
+            canPanDown: transform.translateY + contentHeight * transform.scale > canvasHeight,
+            // Zoom bounds
+            canZoomIn: transform.scale < 3.5,
+            canZoomOut: transform.scale > 0.1,
+        };
+    }
+    catch (error) {
+        console.error("Failed to calculate canvas bounds:", error);
+        return getEmptyBounds();
+    }
+}
+
+function createMatrixString(matrix) {
+    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})`;
+}
+
+function applyTransform(element, matrix) {
+    if (!element?.style || !matrix) {
+        return false;
+    }
+    try {
+        element.style.transform = createMatrixString(matrix);
+        return true;
+    }
+    catch (error) {
+        console.warn("Transform application failed:", error);
+        return false;
+    }
+}
+
+function enableHardwareAcceleration(element) {
+    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;
+    }
+}
+
+function disableTransition(element, config) {
+    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;
+    }
+}
+
+function enableTransition(element, config) {
+    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;
+    }
+}
+
+function withTransition(element, config, operation) {
+    enableTransition(element, config);
+    try {
+        const result = operation();
+        return result;
+    }
+    finally {
+        disableTransition(element, config);
+    }
+}
+
+function getCanvasMethods() {
+    return {
+        // Utility methods
+        getBounds: function () {
+            return getCanvasBounds(this);
+        },
+        // Transform methods
+        updateTransform: function (newTransform) {
+            this.transform = { ...this.transform, ...newTransform };
+            const matrix = createMatrix(this.transform.scale, this.transform.translateX, this.transform.translateY);
+            const result = applyTransform(this.transformLayer, matrix);
+            withFeatureEnabled(this.config, "onTransformUpdate", () => {
+                this.config.onTransformUpdate(this.transform);
+            });
+            return result;
+        },
+        // Reset method
+        reset: function () {
+            const resetTransform = {
+                scale: 1.0,
+                translateX: 0,
+                translateY: 0,
+            };
+            return this.updateTransform(resetTransform);
+        },
+        // Handle canvas resize
+        handleResize: function () {
+            this.container.getBoundingClientRect();
+            return true;
+        },
+        // Set zoom level
+        setZoom: function (zoomLevel) {
+            const newScale = withClampedZoom(this.config, (clamp) => clamp(zoomLevel));
+            return this.updateTransform({ scale: newScale });
+        },
+        // Convert canvas coordinates to content coordinates
+        canvasToContent: function (x, y) {
+            const matrix = createMatrix(this.transform.scale, this.transform.translateX, this.transform.translateY);
+            return canvasToContent(x, y, matrix);
+        },
+        // Zoom to a specific point with animation
+        zoomToPoint: function (x, y, targetScale) {
+            return withTransition(this.transformLayer, this.config, () => {
+                const newTransform = getZoomToMouseTransform(x, y, this.transform, targetScale / this.transform.scale, this.config);
+                return this.updateTransform(newTransform);
+            });
+        },
+        // Reset view with animation
+        resetView: function () {
+            return withTransition(this.transformLayer, this.config, () => {
+                return withRulerSize(this, (rulerSize) => {
+                    const resetTransform = {
+                        scale: 1.0,
+                        translateX: rulerSize * -1,
+                        translateY: rulerSize * -1,
+                    };
+                    return this.updateTransform(resetTransform);
+                });
+            });
+        },
+        // Zoom to fit content in canvas
+        zoomToFitContent: function () {
+            return withTransition(this.transformLayer, this.config, () => {
+                const bounds = this.getBounds();
+                const scaleX = bounds.width / this.config.width;
+                const scaleY = bounds.height / this.config.height;
+                const fitScale = withClampedZoom(this.config, (clamp) => clamp(Math.min(scaleX, scaleY) * ZOOM_FIT_PADDING));
+                // Center the content
+                const scaledWidth = this.config.width * fitScale;
+                const scaledHeight = this.config.height * fitScale;
+                const centerX = (bounds.width - scaledWidth) / 2;
+                const centerY = (bounds.height - scaledHeight) / 2;
+                return this.updateTransform({
+                    scale: fitScale,
+                    translateX: centerX,
+                    translateY: centerY,
+                });
+            });
+        },
+    };
+}
+
+function checkContainerDimensions(container) {
+    const containerRect = container.getBoundingClientRect();
+    const computedStyle = getComputedStyle(container);
+    if (containerRect.height === 0 && computedStyle.height === "auto") {
+        console.error("MarkupCanvas: Container height is 0. Please set a height on your container element using CSS.", "Examples: height: 100vh, height: 500px, or use flexbox/grid layout.", container);
+    }
+    if (containerRect.width === 0 && computedStyle.width === "auto") {
+        console.error("MarkupCanvas: Container width is 0. Please set a width on your container element using CSS.", "Examples: width: 100vw, width: 800px, or use flexbox/grid layout.", container);
+    }
+}
+
+function setupCanvasContainer(container) {
+    const currentPosition = getComputedStyle(container).position;
+    if (currentPosition === "static") {
+        container.style.position = "relative";
+    }
+    container.style.overflow = "hidden";
+    container.style.cursor = "grab";
+    container.style.overscrollBehavior = "none";
+    if (!container.hasAttribute("tabindex")) {
+        container.setAttribute("tabindex", "0");
+    }
+    checkContainerDimensions(container);
+    if (!container.classList.contains(CANVAS_CONTAINER_CLASS)) {
+        container.classList.add(CANVAS_CONTAINER_CLASS);
+    }
+}
+
+// Creates and initializes a canvas with the required DOM structure
+function createCanvas(container, config) {
+    if (!container?.appendChild) {
+        console.error("Invalid container element provided to createCanvas");
+        return null;
+    }
+    try {
+        setupCanvasContainer(container);
+        const { transformLayer, contentLayer } = createCanvasLayers(container, config);
+        // Enable hardware acceleration if requested
+        if (config.enableAcceleration) {
+            enableHardwareAcceleration(transformLayer);
+        }
+        const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+        const initialTransform = {
+            scale: DEFAULT_ZOOM,
+            translateX: rulerOffset,
+            translateY: rulerOffset,
+        };
+        // Apply initial transform
+        const initialMatrix = createMatrix(initialTransform.scale, initialTransform.translateX, initialTransform.translateY);
+        applyTransform(transformLayer, initialMatrix);
+        const canvas = {
+            // DOM references
+            container,
+            transformLayer,
+            contentLayer,
+            // Configuration
+            config: config,
+            // Current state
+            transform: initialTransform,
+            // Add all canvas methods
+            ...getCanvasMethods(),
+        };
+        return canvas;
+    }
+    catch (error) {
+        console.error("Failed to create canvas:", error);
+        return null;
+    }
+}
+
+function createMarkupCanvasConfig(options = {}) {
+    const config = {
+        ...DEFAULT_CONFIG,
+        ...options,
+    };
+    if (typeof config.width !== "number" || config.width <= 0) {
+        console.warn("Invalid width, using default");
+        config.width = DEFAULT_CONFIG.width;
+    }
+    if (typeof config.height !== "number" || config.height <= 0) {
+        console.warn("Invalid height, using default");
+        config.height = DEFAULT_CONFIG.height;
+    }
+    if (typeof config.zoomSpeed !== "number" || config.zoomSpeed <= 0) {
+        console.warn("Invalid zoomSpeed, using default");
+        config.zoomSpeed = DEFAULT_CONFIG.zoomSpeed;
+    }
+    if (typeof config.minZoom !== "number" || config.minZoom <= 0) {
+        console.warn("Invalid minZoom, using default");
+        config.minZoom = DEFAULT_CONFIG.minZoom;
+    }
+    if (typeof config.maxZoom !== "number" || config.maxZoom <= config.minZoom) {
+        console.warn("Invalid maxZoom, using default");
+        config.maxZoom = DEFAULT_CONFIG.maxZoom;
+    }
+    if (typeof config.keyboardPanStep !== "number" || config.keyboardPanStep <= 0) {
+        console.warn("Invalid keyboardPanStep, using default");
+        config.keyboardPanStep = DEFAULT_CONFIG.keyboardPanStep;
+    }
+    if (typeof config.keyboardFastMultiplier !== "number" || config.keyboardFastMultiplier <= 0) {
+        console.warn("Invalid keyboardFastMultiplier, using default");
+        config.keyboardFastMultiplier = DEFAULT_CONFIG.keyboardFastMultiplier;
+    }
+    if (typeof config.clickZoomLevel !== "number" || config.clickZoomLevel <= 0) {
+        console.warn("Invalid clickZoomLevel, using default");
+        config.clickZoomLevel = DEFAULT_CONFIG.clickZoomLevel;
+    }
+    if (typeof config.rulerFontSize !== "number" || config.rulerFontSize <= 0) {
+        console.warn("Invalid rulerFontSize, using default");
+        config.rulerFontSize = DEFAULT_CONFIG.rulerFontSize;
+    }
+    return config;
+}
+
+class EventEmitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(handler);
+    }
+    off(event, handler) {
+        const handlers = this.listeners.get(event);
+        if (handlers) {
+            handlers.delete(handler);
+        }
+    }
+    emit(event, data) {
+        const handlers = this.listeners.get(event);
+        if (handlers) {
+            handlers.forEach((handler) => {
+                try {
+                    handler(data);
+                }
+                catch (error) {
+                    console.error(`Error in event handler for "${String(event)}":`, error);
+                }
+            });
+        }
+    }
+    removeAllListeners() {
+        this.listeners.clear();
+    }
+}
+
+const REFERENCE_DISPLAY_AREA = 1920 * 1080;
+const TRACKPAD_PINCH_SPEED_FACTOR = 0.05;
+const ADAPTIVE_ZOOM_FACTOR = 1;
+const CLICK_THRESHOLDS = {
+    MAX_DURATION: 300,
+    MAX_MOVEMENT: 5,
+};
+
+function getAdaptiveZoomSpeed(canvas, baseSpeed) {
+    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;
+    }
+}
+
+function setupKeyboardEvents(canvas, config) {
+    // Track mouse position
+    let lastMouseX = 0;
+    let lastMouseY = 0;
+    function handleMouseMove(event) {
+        const rect = canvas.container.getBoundingClientRect();
+        const rawMouseX = event.clientX - rect.left;
+        const rawMouseY = event.clientY - rect.top;
+        withRulerOffsets(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
+            lastMouseX = adjustedX;
+            lastMouseY = adjustedY;
+        });
+    }
+    function handleKeyDown(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (config.limitKeyboardEventsToCanvas && document.activeElement !== canvas.container)
+            return;
+        const isFastPan = event.shiftKey;
+        const panDistance = config.keyboardPanStep * (isFastPan ? config.keyboardFastMultiplier : 1);
+        let handled = false;
+        const newTransform = {};
+        switch (event.key) {
+            case "ArrowLeft":
+                newTransform.translateX = canvas.transform.translateX + panDistance;
+                handled = true;
+                break;
+            case "ArrowRight":
+                newTransform.translateX = canvas.transform.translateX - panDistance;
+                handled = true;
+                break;
+            case "ArrowUp":
+                newTransform.translateY = canvas.transform.translateY + panDistance;
+                handled = true;
+                break;
+            case "ArrowDown":
+                newTransform.translateY = canvas.transform.translateY - panDistance;
+                handled = true;
+                break;
+            case "=":
+            case "+":
+                {
+                    const adaptiveZoomStep = config.enableAdaptiveSpeed
+                        ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
+                        : config.keyboardZoomStep;
+                    newTransform.scale = clampZoom(canvas.transform.scale * (1 + adaptiveZoomStep), config);
+                    handled = true;
+                }
+                break;
+            case "-":
+                {
+                    const adaptiveZoomStep = config.enableAdaptiveSpeed
+                        ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
+                        : config.keyboardZoomStep;
+                    newTransform.scale = clampZoom(canvas.transform.scale * (1 - adaptiveZoomStep), config);
+                    handled = true;
+                }
+                break;
+            case "0":
+                if (event.metaKey || event.ctrlKey) {
+                    const targetScale = 1.0;
+                    const zoomFactor = targetScale / canvas.transform.scale;
+                    const zoomTransform = getZoomToMouseTransform(lastMouseX, lastMouseY, canvas.transform, zoomFactor, config);
+                    Object.assign(newTransform, zoomTransform);
+                    handled = true;
+                }
+                break;
+            case "g":
+            case "G":
+                if (canvas.toggleGrid) {
+                    canvas.toggleGrid();
+                }
+                handled = true;
+                break;
+            case "r":
+            case "R":
+                if (!event.metaKey && !event.ctrlKey && !event.altKey && canvas.toggleRulers) {
+                    canvas.toggleRulers();
+                    handled = true;
+                }
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            if (Object.keys(newTransform).length > 0) {
+                canvas.updateTransform(newTransform);
+            }
+        }
+    }
+    const keyboardTarget = config.limitKeyboardEventsToCanvas ? canvas.container : document;
+    keyboardTarget.addEventListener("keydown", handleKeyDown);
+    canvas.container.addEventListener("mousemove", handleMouseMove);
+    return () => {
+        keyboardTarget.removeEventListener("keydown", handleKeyDown);
+        canvas.container.removeEventListener("mousemove", handleMouseMove);
+    };
+}
+
+function updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging) {
+    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";
+    }
+}
+
+function handleKeyDown(event, canvas, config, isDragEnabled, isDragging, setters) {
+    if (config.requireSpaceForMouseDrag && event.key === " ") {
+        setters.setIsSpacePressed(true);
+        updateCursor(canvas, config, isDragEnabled, true, isDragging);
+    }
+}
+
+function resetDragState(canvas, config, isDragEnabled, isSpacePressed, setters) {
+    setters.setIsDragging(false);
+    setters.setDragButton(-1);
+    updateCursor(canvas, config, isDragEnabled, isSpacePressed, false);
+}
+
+function handleKeyUp(event, canvas, config, isDragEnabled, isDragging, setters) {
+    if (config.requireSpaceForMouseDrag && event.key === " ") {
+        setters.setIsSpacePressed(false);
+        updateCursor(canvas, config, isDragEnabled, false, isDragging);
+        // Stop dragging if currently dragging
+        if (isDragging) {
+            resetDragState(canvas, config, isDragEnabled, false, {
+                setIsDragging: setters.setIsDragging,
+                setDragButton: setters.setDragButton,
+            });
+        }
+    }
+}
+
+function handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters) {
+    const isLeftButton = event.button === 0;
+    const isMiddleButton = event.button === 1;
+    if (isLeftButton) {
+        setters.setMouseDownTime(Date.now());
+        setters.setMouseDownX(event.clientX);
+        setters.setMouseDownY(event.clientY);
+        setters.setHasDragged(false);
+    }
+    if (!isDragEnabled)
+        return;
+    // Check if drag is allowed based on configuration
+    const canDrag = config.requireSpaceForMouseDrag ? isSpacePressed : true;
+    if (canDrag && ((isLeftButton && config.enableLeftDrag) || (isMiddleButton && config.enableMiddleDrag))) {
+        event.preventDefault();
+        // Don't set isDragging to true yet - wait for mouse move
+        setters.setDragButton(event.button);
+        setters.setLastMouseX(event.clientX);
+        setters.setLastMouseY(event.clientY);
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, false); // ← Changed to false
+    }
+}
+
+function handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragging, setters) {
+    if (isDragging) {
+        resetDragState(canvas, config, isDragEnabled, isSpacePressed, setters);
+    }
+}
+
+function handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, setters) {
+    if (mouseDownTime > 0) {
+        const deltaX = Math.abs(event.clientX - mouseDownX);
+        const deltaY = Math.abs(event.clientY - mouseDownY);
+        if (deltaX > CLICK_THRESHOLDS.MAX_MOVEMENT || deltaY > CLICK_THRESHOLDS.MAX_MOVEMENT) {
+            setters.setHasDragged(true);
+            if (!isDragging && isDragEnabled) {
+                setters.setIsDragging(true);
+            }
+        }
+    }
+    if (!isDragging || !isDragEnabled)
+        return;
+    event.preventDefault();
+    const handleMouseMoveThrottled = withRAFThrottle((...args) => {
+        const moveEvent = args[0];
+        if (!isDragging || !isDragEnabled)
+            return;
+        const deltaX = moveEvent.clientX - lastMouseX;
+        const deltaY = moveEvent.clientY - lastMouseY;
+        const newTransform = {
+            translateX: canvas.transform.translateX + deltaX,
+            translateY: canvas.transform.translateY + deltaY,
+        };
+        canvas.updateTransform(newTransform);
+        setters.setLastMouseX(moveEvent.clientX);
+        setters.setLastMouseY(moveEvent.clientY);
+    });
+    handleMouseMoveThrottled(event);
+}
+
+function handleClickToZoom(event, canvas, config, mouseDownTime, hasDragged, isDragging) {
+    const clickDuration = Date.now() - mouseDownTime;
+    // Check if Option/Alt key is required and pressed
+    const optionKeyPressed = event.altKey;
+    const shouldZoom = config.requireOptionForClickZoom ? optionKeyPressed : true;
+    if (clickDuration < CLICK_THRESHOLDS.MAX_DURATION && !hasDragged && !isDragging && shouldZoom) {
+        event.preventDefault();
+        const rect = canvas.container.getBoundingClientRect();
+        const rawClickX = event.clientX - rect.left;
+        const rawClickY = event.clientY - rect.top;
+        const { clickX, clickY } = withRulerOffset(canvas, rawClickX, rawClickY, (adjustedX, adjustedY) => ({
+            clickX: adjustedX,
+            clickY: adjustedY,
+        }));
+        // Convert canvas coordinates to content coordinates at current scale
+        const contentCoords = canvas.canvasToContent(clickX, clickY);
+        // Calculate the center of the canvas
+        const canvasCenterX = rect.width / 2;
+        const canvasCenterY = rect.height / 2;
+        const newScale = config.clickZoomLevel;
+        const newTranslateX = canvasCenterX - contentCoords.x * newScale;
+        const newTranslateY = canvasCenterY - contentCoords.y * newScale;
+        const newTransform = {
+            scale: newScale,
+            translateX: newTranslateX,
+            translateY: newTranslateY,
+        };
+        withTransition(canvas.transformLayer, canvas.config, () => {
+            canvas.updateTransform(newTransform);
+        });
+    }
+}
+
+function resetClickState(setters) {
+    setters.setMouseDownTime(0);
+    setters.setHasDragged(false);
+}
+
+function handleMouseUp(event, canvas, config, isDragEnabled, isSpacePressed, isDragging, dragButton, mouseDownTime, hasDragged, setters) {
+    if (isDragging && event.button === dragButton) {
+        resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+            setIsDragging: setters.setIsDragging,
+            setDragButton: setters.setDragButton,
+        });
+    }
+    if (isDragEnabled && event.button === 0 && config.enableClickToZoom && mouseDownTime > 0) {
+        handleClickToZoom(event, canvas, config, mouseDownTime, hasDragged, isDragging);
+    }
+    if (event.button === 0) {
+        resetClickState({
+            setMouseDownTime: setters.setMouseDownTime,
+            setHasDragged: setters.setHasDragged,
+        });
+    }
+}
+
+function setupMouseEvents(canvas, config, withControls = true) {
+    // State management
+    let isDragEnabled = true;
+    let isDragging = false;
+    let lastMouseX = 0;
+    let lastMouseY = 0;
+    let dragButton = -1;
+    let isSpacePressed = false;
+    // Click-to-zoom tracking
+    let mouseDownTime = 0;
+    let mouseDownX = 0;
+    let mouseDownY = 0;
+    let hasDragged = false;
+    // State setters for passing to functions
+    const setters = {
+        setIsDragging: (value) => {
+            isDragging = value;
+        },
+        setDragButton: (value) => {
+            dragButton = value;
+        },
+        setIsSpacePressed: (value) => {
+            isSpacePressed = value;
+        },
+        setMouseDownTime: (value) => {
+            mouseDownTime = value;
+        },
+        setMouseDownX: (value) => {
+            mouseDownX = value;
+        },
+        setMouseDownY: (value) => {
+            mouseDownY = value;
+        },
+        setHasDragged: (value) => {
+            hasDragged = value;
+        },
+        setLastMouseX: (value) => {
+            lastMouseX = value;
+        },
+        setLastMouseY: (value) => {
+            lastMouseY = value;
+        },
+    };
+    // Event handler wrappers
+    const keyDownHandler = (event) => {
+        handleKeyDown(event, canvas, config, isDragEnabled, isDragging, {
+            setIsSpacePressed: setters.setIsSpacePressed,
+        });
+    };
+    const keyUpHandler = (event) => {
+        handleKeyUp(event, canvas, config, isDragEnabled, isDragging, {
+            setIsSpacePressed: setters.setIsSpacePressed,
+            setIsDragging: setters.setIsDragging,
+            setDragButton: setters.setDragButton,
+        });
+    };
+    const mouseDownHandler = (event) => {
+        handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters);
+    };
+    const mouseMoveHandler = (event) => {
+        handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
+            setHasDragged: setters.setHasDragged,
+            setIsDragging: setters.setIsDragging,
+            setLastMouseX: setters.setLastMouseX,
+            setLastMouseY: setters.setLastMouseY,
+        });
+    };
+    const mouseUpHandler = (event) => {
+        handleMouseUp(event, canvas, config, isDragEnabled, isSpacePressed, isDragging, dragButton, mouseDownTime, hasDragged, {
+            setIsDragging: setters.setIsDragging,
+            setDragButton: setters.setDragButton,
+            setMouseDownTime: setters.setMouseDownTime,
+            setHasDragged: setters.setHasDragged,
+        });
+    };
+    const mouseLeaveHandler = () => {
+        handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragging, {
+            setIsDragging: setters.setIsDragging,
+            setDragButton: setters.setDragButton,
+        });
+    };
+    // Set up event listeners
+    canvas.container.addEventListener("mousedown", mouseDownHandler);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    canvas.container.addEventListener("mouseleave", mouseLeaveHandler);
+    if (config.requireSpaceForMouseDrag) {
+        document.addEventListener("keydown", keyDownHandler);
+        document.addEventListener("keyup", keyUpHandler);
+    }
+    updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+    const cleanup = () => {
+        canvas.container.removeEventListener("mousedown", mouseDownHandler);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        canvas.container.removeEventListener("mouseleave", mouseLeaveHandler);
+        if (config.requireSpaceForMouseDrag) {
+            document.removeEventListener("keydown", keyDownHandler);
+            document.removeEventListener("keyup", keyUpHandler);
+        }
+    };
+    if (withControls) {
+        return {
+            cleanup,
+            enable: () => {
+                isDragEnabled = true;
+                updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+                return true;
+            },
+            disable: () => {
+                isDragEnabled = false;
+                // Stop any current dragging
+                if (isDragging) {
+                    resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+                        setIsDragging: setters.setIsDragging,
+                        setDragButton: setters.setDragButton,
+                    });
+                }
+                updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+                return true;
+            },
+            isEnabled: () => isDragEnabled,
+        };
+    }
+    return cleanup;
+}
+
+function handleTouchEnd(event, touchState) {
+    touchState.touches = Array.from(event.touches);
+    if (touchState.touches.length < 2) {
+        touchState.lastDistance = 0;
+    }
+}
+
+function getTouchCenter(touch1, touch2) {
+    return {
+        x: (touch1.clientX + touch2.clientX) / 2,
+        y: (touch1.clientY + touch2.clientY) / 2,
+    };
+}
+
+function getTouchDistance(touch1, touch2) {
+    const dx = touch1.clientX - touch2.clientX;
+    const dy = touch1.clientY - touch2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+function applyZoomToCanvas(canvas, rawZoomFactor, centerX, centerY) {
+    const newTransform = getZoomToMouseTransform(centerX, centerY, canvas.transform, rawZoomFactor, canvas.config);
+    return canvas.updateTransform(newTransform);
+}
+
+function handleTouchMove(event, canvas, touchState) {
+    event.preventDefault();
+    const currentTouches = Array.from(event.touches);
+    // Enhanced RAF-throttled touch move handler for smooth gesture performance
+    const handleTouchMoveThrottled = withRAFThrottle((...args) => {
+        const touches = args[0];
+        if (touches.length === 1) {
+            // Single touch pan
+            if (touchState.touches.length === 1) {
+                const deltaX = touches[0].clientX - touchState.touches[0].clientX;
+                const deltaY = touches[0].clientY - touchState.touches[0].clientY;
+                const newTransform = {
+                    translateX: canvas.transform.translateX + deltaX,
+                    translateY: canvas.transform.translateY + deltaY,
+                };
+                canvas.updateTransform(newTransform);
+            }
+        }
+        else if (touches.length === 2) {
+            // Two finger pinch zoom
+            const currentDistance = getTouchDistance(touches[0], touches[1]);
+            const currentCenter = getTouchCenter(touches[0], touches[1]);
+            if (touchState.lastDistance > 0) {
+                const rawZoomFactor = currentDistance / touchState.lastDistance;
+                // Get center relative to canvas content area (accounting for rulers)
+                const rect = canvas.container.getBoundingClientRect();
+                let centerX = currentCenter.x - rect.left;
+                let centerY = currentCenter.y - rect.top;
+                // Account for ruler offset if rulers are present
+                const adjustedCenter = withRulerOffsetObject(canvas, { x: centerX, y: centerY }, (adjusted) => adjusted);
+                centerX = adjustedCenter.x;
+                centerY = adjustedCenter.y;
+                // Touch zoom uses global transition settings
+                applyZoomToCanvas(canvas, rawZoomFactor, centerX, centerY);
+            }
+            touchState.lastDistance = currentDistance;
+            touchState.lastCenter = currentCenter;
+        }
+        touchState.touches = touches;
+    });
+    handleTouchMoveThrottled(currentTouches);
+}
+
+function handleTouchStart(event, touchState) {
+    event.preventDefault();
+    touchState.touches = Array.from(event.touches);
+    if (touchState.touches.length === 2) {
+        touchState.lastDistance = getTouchDistance(touchState.touches[0], touchState.touches[1]);
+        touchState.lastCenter = getTouchCenter(touchState.touches[0], touchState.touches[1]);
+    }
+}
+
+function setupTouchEvents(canvas) {
+    const touchState = {
+        touches: [],
+        lastDistance: 0,
+        lastCenter: { },
+    };
+    const touchStartHandler = (event) => {
+        handleTouchStart(event, touchState);
+    };
+    const touchMoveHandler = (event) => {
+        handleTouchMove(event, canvas, touchState);
+    };
+    const touchEndHandler = (event) => {
+        handleTouchEnd(event, touchState);
+    };
+    canvas.container.addEventListener("touchstart", touchStartHandler, {
+        passive: false,
+    });
+    canvas.container.addEventListener("touchmove", touchMoveHandler, {
+        passive: false,
+    });
+    canvas.container.addEventListener("touchend", touchEndHandler, {
+        passive: false,
+    });
+    return () => {
+        canvas.container.removeEventListener("touchstart", touchStartHandler);
+        canvas.container.removeEventListener("touchmove", touchMoveHandler);
+        canvas.container.removeEventListener("touchend", touchEndHandler);
+    };
+}
+
+function detectTrackpadGesture(event) {
+    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,
+    };
+}
+
+const createTrackpadPanHandler = (canvas) => withRAFThrottle((...args) => {
+    const event = args[0];
+    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 = {
+            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;
+    }
+});
+
+function handleWheel(event, canvas, config) {
+    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;
+    }
+}
+
+function setupWheelEvents(canvas, config) {
+    const trackpadPanHandler = createTrackpadPanHandler(canvas);
+    const wheelHandler = (event) => {
+        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);
+    };
+}
+
+function createCornerBox(config) {
+    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;
+}
+
+function createGridOverlay(config) {
+    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;
+}
+
+function createHorizontalRuler(config) {
+    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;
+}
+
+function createVerticalRuler(config) {
+    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;
+}
+
+function createRulerElements(container, config) {
+    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,
+    };
+}
+
+function setupRulerEvents(canvas, updateCallback) {
+    const throttledUpdateCallback = withRAFThrottle(updateCallback);
+    const originalUpdateTransform = canvas.updateTransform;
+    canvas.updateTransform = function (newTransform) {
+        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();
+    };
+}
+
+function updateGrid(gridOverlay, scale, translateX, translateY) {
+    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`;
+}
+
+function calculateTickSpacing(contentSize, canvasSize) {
+    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;
+    if (normalized <= 1)
+        niceSpacing = 1;
+    else if (normalized <= 2)
+        niceSpacing = 2;
+    else if (normalized <= 5)
+        niceSpacing = 5;
+    else
+        niceSpacing = 10;
+    return niceSpacing * magnitude;
+}
+
+function createHorizontalTick(container, position, pixelPos, tickSpacing, config) {
+    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);
+    }
+}
+
+function updateHorizontalRuler(ruler, contentLeft, contentRight, canvasWidth, scale, config) {
+    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);
+}
+
+function createVerticalTick(container, position, pixelPos, tickSpacing, config) {
+    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);
+    }
+}
+
+function updateVerticalRuler(ruler, contentTop, contentBottom, canvasHeight, scale, config) {
+    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);
+}
+
+function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, config) {
+    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);
+    }
+}
+
+function createRulers(canvas, config) {
+    if (!canvas?.container) {
+        console.error("Invalid canvas provided to createRulers");
+        return null;
+    }
+    let elements;
+    let cleanupEvents = 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 = () => {
+        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;
+    }
+}
+
+class MarkupCanvas {
+    constructor(container, options = {}) {
+        this.cleanupFunctions = [];
+        this.rulers = null;
+        this.dragSetup = null;
+        this._isReady = false;
+        this.listen = new EventEmitter();
+        if (!container) {
+            throw new Error("Container element is required");
+        }
+        this.config = createMarkupCanvasConfig(options);
+        const canvas = createCanvas(container, this.config);
+        if (!canvas) {
+            throw new Error("Failed to create canvas");
+        }
+        this.baseCanvas = canvas;
+        this.setupEventHandlers();
+        this._isReady = true;
+        // Emit ready event
+        this.listen.emit("ready", this);
+    }
+    setupEventHandlers() {
+        try {
+            // Wheel zoom
+            withFeatureEnabled(this.config, "enableZoom", () => {
+                const wheelCleanup = setupWheelEvents(this, this.config);
+                this.cleanupFunctions.push(wheelCleanup);
+            });
+            // Mouse events (drag and click-to-zoom)
+            // Set up mouse events if either pan or click-to-zoom is enabled
+            if (this.config.enablePan || this.config.enableClickToZoom) {
+                this.dragSetup = setupMouseEvents(this, this.config, true);
+                this.cleanupFunctions.push(this.dragSetup.cleanup);
+            }
+            // Keyboard navigation
+            withFeatureEnabled(this.config, "enableKeyboard", () => {
+                const keyboardCleanup = setupKeyboardEvents(this, this.config);
+                this.cleanupFunctions.push(keyboardCleanup);
+            });
+            // Touch events (if enabled)
+            withFeatureEnabled(this.config, "enableTouch", () => {
+                const touchCleanup = setupTouchEvents(this);
+                this.cleanupFunctions.push(touchCleanup);
+            });
+            // Set up rulers and grid
+            withFeatureEnabled(this.config, "enableRulers", () => {
+                this.rulers = createRulers(this.baseCanvas, this.config);
+                this.cleanupFunctions.push(() => {
+                    if (this.rulers) {
+                        this.rulers.destroy();
+                    }
+                });
+            });
+        }
+        catch (error) {
+            console.error("Failed to set up event handlers:", error);
+            this.cleanup();
+            throw error;
+        }
+    }
+    // Base canvas properties and methods
+    get container() {
+        return this.baseCanvas.container;
+    }
+    get transformLayer() {
+        return this.baseCanvas.transformLayer;
+    }
+    get contentLayer() {
+        return this.baseCanvas.contentLayer;
+    }
+    get transform() {
+        return this.baseCanvas.transform;
+    }
+    // State management getters for React integration
+    get isReady() {
+        return this._isReady;
+    }
+    get isTransforming() {
+        return this.dragSetup?.isEnabled() || false;
+    }
+    get visibleBounds() {
+        return this.getVisibleArea();
+    }
+    getBounds() {
+        return this.baseCanvas.getBounds();
+    }
+    updateTransform(newTransform) {
+        const result = this.baseCanvas.updateTransform(newTransform);
+        if (result) {
+            this.emitTransformEvents();
+        }
+        return result;
+    }
+    emitTransformEvents() {
+        const transform = this.baseCanvas.transform;
+        this.listen.emit("transform", transform);
+        this.listen.emit("zoom", transform.scale);
+        this.listen.emit("pan", { x: transform.translateX, y: transform.translateY });
+    }
+    reset() {
+        return this.baseCanvas.reset();
+    }
+    handleResize() {
+        return this.baseCanvas.handleResize();
+    }
+    setZoom(zoomLevel) {
+        return this.baseCanvas.setZoom(zoomLevel);
+    }
+    canvasToContent(x, y) {
+        return this.baseCanvas.canvasToContent(x, y);
+    }
+    zoomToPoint(x, y, targetScale) {
+        return withTransition(this.transformLayer, this.config, () => {
+            const result = this.baseCanvas.zoomToPoint(x, y, targetScale);
+            if (result) {
+                this.emitTransformEvents();
+            }
+            return result;
+        });
+    }
+    resetView() {
+        return withTransition(this.transformLayer, this.config, () => {
+            const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
+            if (result) {
+                this.emitTransformEvents();
+            }
+            return result;
+        });
+    }
+    zoomToFitContent() {
+        return withTransition(this.transformLayer, this.config, () => {
+            const result = this.baseCanvas.zoomToFitContent();
+            if (result) {
+                this.emitTransformEvents();
+            }
+            return result;
+        });
+    }
+    // Pan methods
+    panLeft(distance) {
+        const panDistance = distance ?? this.config.keyboardPanStep;
+        const newTransform = {
+            translateX: this.baseCanvas.transform.translateX + panDistance,
+        };
+        return this.updateTransform(newTransform);
+    }
+    panRight(distance) {
+        const panDistance = distance ?? this.config.keyboardPanStep;
+        const newTransform = {
+            translateX: this.baseCanvas.transform.translateX - panDistance,
+        };
+        return this.updateTransform(newTransform);
+    }
+    panUp(distance) {
+        const panDistance = distance ?? this.config.keyboardPanStep;
+        const newTransform = {
+            translateY: this.baseCanvas.transform.translateY + panDistance,
+        };
+        return this.updateTransform(newTransform);
+    }
+    panDown(distance) {
+        const panDistance = distance ?? this.config.keyboardPanStep;
+        const newTransform = {
+            translateY: this.baseCanvas.transform.translateY - panDistance,
+        };
+        return this.updateTransform(newTransform);
+    }
+    // Zoom methods
+    zoomIn(factor = 0.1) {
+        return withTransition(this.transformLayer, this.config, () => {
+            return withClampedZoom(this.config, (clamp) => {
+                const newScale = clamp(this.baseCanvas.transform.scale * (1 + factor));
+                const newTransform = {
+                    scale: newScale,
+                };
+                return this.updateTransform(newTransform);
+            });
+        });
+    }
+    zoomOut(factor = 0.1) {
+        return withTransition(this.transformLayer, this.config, () => {
+            return withClampedZoom(this.config, (clamp) => {
+                const newScale = clamp(this.baseCanvas.transform.scale * (1 - factor));
+                const newTransform = {
+                    scale: newScale,
+                };
+                return this.updateTransform(newTransform);
+            });
+        });
+    }
+    resetZoom() {
+        return this.resetView();
+    }
+    // Mouse drag control methods
+    enableMouseDrag() {
+        return this.dragSetup?.enable() ?? false;
+    }
+    disableMouseDrag() {
+        return this.dragSetup?.disable() ?? false;
+    }
+    isMouseDragEnabled() {
+        return this.dragSetup?.isEnabled() ?? false;
+    }
+    // Grid control methods
+    toggleGrid() {
+        if (this.rulers?.toggleGrid) {
+            this.rulers.toggleGrid();
+            return true;
+        }
+        return false;
+    }
+    showGrid() {
+        if (this.rulers?.gridOverlay) {
+            this.rulers.gridOverlay.style.display = "block";
+            return true;
+        }
+        return false;
+    }
+    hideGrid() {
+        if (this.rulers?.gridOverlay) {
+            this.rulers.gridOverlay.style.display = "none";
+            return true;
+        }
+        return false;
+    }
+    isGridVisible() {
+        if (this.rulers?.gridOverlay) {
+            return this.rulers.gridOverlay.style.display !== "none";
+        }
+        return false;
+    }
+    // Ruler control methods
+    toggleRulers() {
+        if (this.rulers) {
+            const areVisible = this.areRulersVisible();
+            if (areVisible) {
+                this.rulers.hide();
+            }
+            else {
+                this.rulers.show();
+            }
+            return true;
+        }
+        return false;
+    }
+    showRulers() {
+        if (this.rulers) {
+            this.rulers.show();
+            return true;
+        }
+        return false;
+    }
+    hideRulers() {
+        if (this.rulers) {
+            this.rulers.hide();
+            return true;
+        }
+        return false;
+    }
+    areRulersVisible() {
+        if (this.rulers?.horizontalRuler) {
+            return this.rulers.horizontalRuler.style.display !== "none";
+        }
+        return false;
+    }
+    // Utility methods
+    centerContent() {
+        return withTransition(this.transformLayer, this.config, () => {
+            const bounds = this.baseCanvas.getBounds();
+            const centerX = (bounds.width - bounds.contentWidth * this.baseCanvas.transform.scale) / 2;
+            const centerY = (bounds.height - bounds.contentHeight * this.baseCanvas.transform.scale) / 2;
+            return this.updateTransform({
+                translateX: centerX,
+                translateY: centerY,
+            });
+        });
+    }
+    fitToScreen() {
+        return withTransition(this.transformLayer, this.config, () => {
+            const result = this.baseCanvas.zoomToFitContent();
+            if (result) {
+                this.emitTransformEvents();
+            }
+            return result;
+        });
+    }
+    getVisibleArea() {
+        const bounds = this.baseCanvas.getBounds();
+        return bounds.visibleArea;
+    }
+    isPointVisible(x, y) {
+        const visibleArea = this.getVisibleArea();
+        return x >= visibleArea.x && x <= visibleArea.x + visibleArea.width && y >= visibleArea.y && y <= visibleArea.y + visibleArea.height;
+    }
+    scrollToPoint(x, y) {
+        return withTransition(this.transformLayer, this.config, () => {
+            const bounds = this.baseCanvas.getBounds();
+            const centerX = bounds.width / 2;
+            const centerY = bounds.height / 2;
+            // Calculate new translation to center the point
+            const newTranslateX = centerX - x * this.baseCanvas.transform.scale;
+            const newTranslateY = centerY - y * this.baseCanvas.transform.scale;
+            return this.updateTransform({
+                translateX: newTranslateX,
+                translateY: newTranslateY,
+            });
+        });
+    }
+    // Configuration access
+    getConfig() {
+        return { ...this.config };
+    }
+    updateConfig(newConfig) {
+        this.config = createMarkupCanvasConfig({ ...this.config, ...newConfig });
+    }
+    // Cleanup method
+    cleanup() {
+        this.cleanupFunctions.forEach((cleanup) => {
+            try {
+                cleanup();
+            }
+            catch (cleanupError) {
+                console.warn("Error during cleanup:", cleanupError);
+            }
+        });
+        this.cleanupFunctions = [];
+        // Remove all event listeners
+        this.removeAllListeners();
+    }
+    // Event emitter delegation methods
+    on(event, handler) {
+        this.listen.on(event, handler);
+    }
+    off(event, handler) {
+        this.listen.off(event, handler);
+    }
+    emit(event, data) {
+        this.listen.emit(event, data);
+    }
+    removeAllListeners() {
+        this.listen.removeAllListeners();
+    }
+    destroy() {
+        this.cleanup();
+        if (window.__markupCanvasTransitionTimeout) {
+            clearTimeout(window.__markupCanvasTransitionTimeout);
+        }
+    }
+}
+
+export { MarkupCanvas, MarkupCanvas as default };