@markup-canvas/core 1.4.1 → 1.4.3

package/dist/markup-canvas.cjs.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.4.1
+ * @version 1.4.3
  */
 'use strict';
 
@@ -253,14 +253,6 @@ function withRulerOffset(canvas, x, y, rulerSize, operation) {
     return operation(adjustedX, adjustedY);
 }
 
-function getThemeValue(config, key) {
-    if (config.themeMode === "dark") {
-        const darkKey = `${key}Dark`;
-        return config[darkKey];
-    }
-    return config[key];
-}
-
 const DEFAULT_CONFIG = {
     // Canvas dimensions
     width: 8000,
@@ -676,9 +668,8 @@ function updateThemeMode(canvasContainer, config, rulers, mode) {
         themeMode: mode,
     };
     const updatedConfig = createMarkupCanvasConfig(newConfig);
-    // Update canvas background color
-    const backgroundColor = getThemeValue(updatedConfig, "canvasBackgroundColor");
-    canvasContainer.style.backgroundColor = backgroundColor;
+    // Update color-scheme CSS property
+    canvasContainer.style.colorScheme = mode;
     // Update rulers if they exist
     if (rulers) {
         rulers.updateTheme(updatedConfig);
@@ -846,10 +837,12 @@ function setupCanvasContainer(container, config) {
     container.style.overflow = "hidden";
     container.style.cursor = "grab";
     container.style.overscrollBehavior = "none";
-    // Apply canvas background color
+    // Apply canvas background color using light-dark() CSS function
     if (config) {
-        const backgroundColor = getThemeValue(config, "canvasBackgroundColor");
+        const backgroundColor = `light-dark(${config.canvasBackgroundColor}, ${config.canvasBackgroundColorDark})`;
         container.style.backgroundColor = backgroundColor;
+        // Set color-scheme to enable light-dark() function
+        container.style.colorScheme = config.themeMode;
     }
     if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
@@ -991,11 +984,11 @@ function isCanvasShortcut(event) {
     if (event.key === "0" && (event.ctrlKey || event.metaKey)) {
         return true; // Ctrl+0 or Cmd+0 for reset view
     }
-    if ((event.key === "g" || event.key === "G") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        return true; // Shift+G for toggle grid
+    if (event.key === "+" && (event.ctrlKey || event.metaKey)) {
+        return true;
     }
-    if ((event.key === "r" || event.key === "R") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        return true; // Shift+R for toggle rulers
+    if (event.key === "-" && (event.ctrlKey || event.metaKey)) {
+        return true;
     }
     return false;
 }
@@ -2047,18 +2040,19 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
 }
 
 function updateRulerTheme(elements, config) {
-    // Get theme-aware colors
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
-    const tickColor = getThemeValue(config, "rulerTickColor");
-    const gridColor = getThemeValue(config, "gridColor");
+    // Create theme-aware colors using light-dark() CSS function
+    const backgroundColor = `light-dark(${config.rulerBackgroundColor}, ${config.rulerBackgroundColorDark})`;
+    const borderColor = `light-dark(${config.rulerBorderColor}, ${config.rulerBorderColorDark})`;
+    const textColor = `light-dark(${config.rulerTextColor}, ${config.rulerTextColorDark})`;
+    const tickColor = `light-dark(${config.rulerTickColor}, ${config.rulerTickColorDark})`;
+    const gridColor = `light-dark(${config.gridColor}, ${config.gridColorDark})`;
     // Update horizontal ruler with CSS variables
     if (elements.horizontalRuler) {
         elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
         elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
         elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
         elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
+        elements.horizontalRuler.style.colorScheme = config.themeMode;
     }
     // Update vertical ruler with CSS variables
     if (elements.verticalRuler) {
@@ -2066,16 +2060,19 @@ function updateRulerTheme(elements, config) {
         elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
         elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
         elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
+        elements.verticalRuler.style.colorScheme = config.themeMode;
     }
     // Update corner box with CSS variables
     if (elements.cornerBox) {
         elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
         elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
         elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
+        elements.cornerBox.style.colorScheme = config.themeMode;
     }
     // Update grid overlay with CSS variables
     if (elements.gridOverlay) {
         elements.gridOverlay.style.setProperty("--grid-color", gridColor);
+        elements.gridOverlay.style.colorScheme = config.themeMode;
     }
 }
 
@@ -2357,9 +2354,8 @@ class MarkupCanvas {
                 }
             });
         });
-        if (options.themeMode) {
-            updateThemeMode(this.canvas.container, this.config, this.rulers, options.themeMode);
-        }
+        // Always set initial color-scheme
+        updateThemeMode(this.canvas.container, this.config, this.rulers, this.config.themeMode);
         // Always bind canvas to window
         this.event.setEmitInterceptor((event, data) => {
             broadcastEvent(event, data, this.config);

package/dist/markup-canvas.esm.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.4.1
+ * @version 1.4.3
  */
 const EDITOR_PRESET = {
     // Canvas dimensions
@@ -249,14 +249,6 @@ function withRulerOffset(canvas, x, y, rulerSize, operation) {
     return operation(adjustedX, adjustedY);
 }
 
-function getThemeValue(config, key) {
-    if (config.themeMode === "dark") {
-        const darkKey = `${key}Dark`;
-        return config[darkKey];
-    }
-    return config[key];
-}
-
 const DEFAULT_CONFIG = {
     // Canvas dimensions
     width: 8000,
@@ -672,9 +664,8 @@ function updateThemeMode(canvasContainer, config, rulers, mode) {
         themeMode: mode,
     };
     const updatedConfig = createMarkupCanvasConfig(newConfig);
-    // Update canvas background color
-    const backgroundColor = getThemeValue(updatedConfig, "canvasBackgroundColor");
-    canvasContainer.style.backgroundColor = backgroundColor;
+    // Update color-scheme CSS property
+    canvasContainer.style.colorScheme = mode;
     // Update rulers if they exist
     if (rulers) {
         rulers.updateTheme(updatedConfig);
@@ -842,10 +833,12 @@ function setupCanvasContainer(container, config) {
     container.style.overflow = "hidden";
     container.style.cursor = "grab";
     container.style.overscrollBehavior = "none";
-    // Apply canvas background color
+    // Apply canvas background color using light-dark() CSS function
     if (config) {
-        const backgroundColor = getThemeValue(config, "canvasBackgroundColor");
+        const backgroundColor = `light-dark(${config.canvasBackgroundColor}, ${config.canvasBackgroundColorDark})`;
         container.style.backgroundColor = backgroundColor;
+        // Set color-scheme to enable light-dark() function
+        container.style.colorScheme = config.themeMode;
     }
     if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
@@ -987,11 +980,11 @@ function isCanvasShortcut(event) {
     if (event.key === "0" && (event.ctrlKey || event.metaKey)) {
         return true; // Ctrl+0 or Cmd+0 for reset view
     }
-    if ((event.key === "g" || event.key === "G") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        return true; // Shift+G for toggle grid
+    if (event.key === "+" && (event.ctrlKey || event.metaKey)) {
+        return true;
     }
-    if ((event.key === "r" || event.key === "R") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        return true; // Shift+R for toggle rulers
+    if (event.key === "-" && (event.ctrlKey || event.metaKey)) {
+        return true;
     }
     return false;
 }
@@ -2043,18 +2036,19 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
 }
 
 function updateRulerTheme(elements, config) {
-    // Get theme-aware colors
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
-    const tickColor = getThemeValue(config, "rulerTickColor");
-    const gridColor = getThemeValue(config, "gridColor");
+    // Create theme-aware colors using light-dark() CSS function
+    const backgroundColor = `light-dark(${config.rulerBackgroundColor}, ${config.rulerBackgroundColorDark})`;
+    const borderColor = `light-dark(${config.rulerBorderColor}, ${config.rulerBorderColorDark})`;
+    const textColor = `light-dark(${config.rulerTextColor}, ${config.rulerTextColorDark})`;
+    const tickColor = `light-dark(${config.rulerTickColor}, ${config.rulerTickColorDark})`;
+    const gridColor = `light-dark(${config.gridColor}, ${config.gridColorDark})`;
     // Update horizontal ruler with CSS variables
     if (elements.horizontalRuler) {
         elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
         elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
         elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
         elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
+        elements.horizontalRuler.style.colorScheme = config.themeMode;
     }
     // Update vertical ruler with CSS variables
     if (elements.verticalRuler) {
@@ -2062,16 +2056,19 @@ function updateRulerTheme(elements, config) {
         elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
         elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
         elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
+        elements.verticalRuler.style.colorScheme = config.themeMode;
     }
     // Update corner box with CSS variables
     if (elements.cornerBox) {
         elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
         elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
         elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
+        elements.cornerBox.style.colorScheme = config.themeMode;
     }
     // Update grid overlay with CSS variables
     if (elements.gridOverlay) {
         elements.gridOverlay.style.setProperty("--grid-color", gridColor);
+        elements.gridOverlay.style.colorScheme = config.themeMode;
     }
 }
 
@@ -2353,9 +2350,8 @@ class MarkupCanvas {
                 }
             });
         });
-        if (options.themeMode) {
-            updateThemeMode(this.canvas.container, this.config, this.rulers, options.themeMode);
-        }
+        // Always set initial color-scheme
+        updateThemeMode(this.canvas.container, this.config, this.rulers, this.config.themeMode);
         // Always bind canvas to window
         this.event.setEmitInterceptor((event, data) => {
             broadcastEvent(event, data, this.config);

package/dist/markup-canvas.umd.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.4.1
+ * @version 1.4.3
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -193,14 +193,6 @@
         return operation(adjustedX, adjustedY);
     }
 
-    function getThemeValue(config, key) {
-        if (config.themeMode === "dark") {
-            const darkKey = `${key}Dark`;
-            return config[darkKey];
-        }
-        return config[key];
-    }
-
     const DEFAULT_CONFIG = {
         // Canvas dimensions
         width: 8000,
@@ -616,9 +608,8 @@
             themeMode: mode,
         };
         const updatedConfig = createMarkupCanvasConfig(newConfig);
-        // Update canvas background color
-        const backgroundColor = getThemeValue(updatedConfig, "canvasBackgroundColor");
-        canvasContainer.style.backgroundColor = backgroundColor;
+        // Update color-scheme CSS property
+        canvasContainer.style.colorScheme = mode;
         // Update rulers if they exist
         if (rulers) {
             rulers.updateTheme(updatedConfig);
@@ -786,10 +777,12 @@
         container.style.overflow = "hidden";
         container.style.cursor = "grab";
         container.style.overscrollBehavior = "none";
-        // Apply canvas background color
+        // Apply canvas background color using light-dark() CSS function
         if (config) {
-            const backgroundColor = getThemeValue(config, "canvasBackgroundColor");
+            const backgroundColor = `light-dark(${config.canvasBackgroundColor}, ${config.canvasBackgroundColorDark})`;
             container.style.backgroundColor = backgroundColor;
+            // Set color-scheme to enable light-dark() function
+            container.style.colorScheme = config.themeMode;
         }
         if (!container.hasAttribute("tabindex")) {
             container.setAttribute("tabindex", "0");
@@ -931,11 +924,11 @@
         if (event.key === "0" && (event.ctrlKey || event.metaKey)) {
             return true; // Ctrl+0 or Cmd+0 for reset view
         }
-        if ((event.key === "g" || event.key === "G") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-            return true; // Shift+G for toggle grid
+        if (event.key === "+" && (event.ctrlKey || event.metaKey)) {
+            return true;
         }
-        if ((event.key === "r" || event.key === "R") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-            return true; // Shift+R for toggle rulers
+        if (event.key === "-" && (event.ctrlKey || event.metaKey)) {
+            return true;
         }
         return false;
     }
@@ -1987,18 +1980,19 @@
     }
 
     function updateRulerTheme(elements, config) {
-        // Get theme-aware colors
-        const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-        const borderColor = getThemeValue(config, "rulerBorderColor");
-        const textColor = getThemeValue(config, "rulerTextColor");
-        const tickColor = getThemeValue(config, "rulerTickColor");
-        const gridColor = getThemeValue(config, "gridColor");
+        // Create theme-aware colors using light-dark() CSS function
+        const backgroundColor = `light-dark(${config.rulerBackgroundColor}, ${config.rulerBackgroundColorDark})`;
+        const borderColor = `light-dark(${config.rulerBorderColor}, ${config.rulerBorderColorDark})`;
+        const textColor = `light-dark(${config.rulerTextColor}, ${config.rulerTextColorDark})`;
+        const tickColor = `light-dark(${config.rulerTickColor}, ${config.rulerTickColorDark})`;
+        const gridColor = `light-dark(${config.gridColor}, ${config.gridColorDark})`;
         // Update horizontal ruler with CSS variables
         if (elements.horizontalRuler) {
             elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
             elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
             elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
             elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
+            elements.horizontalRuler.style.colorScheme = config.themeMode;
         }
         // Update vertical ruler with CSS variables
         if (elements.verticalRuler) {
@@ -2006,16 +2000,19 @@
             elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
             elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
             elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
+            elements.verticalRuler.style.colorScheme = config.themeMode;
         }
         // Update corner box with CSS variables
         if (elements.cornerBox) {
             elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
             elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
             elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
+            elements.cornerBox.style.colorScheme = config.themeMode;
         }
         // Update grid overlay with CSS variables
         if (elements.gridOverlay) {
             elements.gridOverlay.style.setProperty("--grid-color", gridColor);
+            elements.gridOverlay.style.colorScheme = config.themeMode;
         }
     }
 
@@ -2297,9 +2294,8 @@
                     }
                 });
             });
-            if (options.themeMode) {
-                updateThemeMode(this.canvas.container, this.config, this.rulers, options.themeMode);
-            }
+            // Always set initial color-scheme
+            updateThemeMode(this.canvas.container, this.config, this.rulers, this.config.themeMode);
             // Always bind canvas to window
             this.event.setEmitInterceptor((event, data) => {
                 broadcastEvent(event, data, this.config);

package/dist/markup-canvas.umd.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas=t()}(this,function(){"use strict";function e(e,t,n){if(!n?.inverse)return{x:e,y:t};try{const r=n.inverse(),a=new DOMPoint(e,t).matrixTransform(r);return{x:a.x,y:a.y}}catch(n){return console.warn("Canvas to content conversion failed:",n),{x:e,y:t}}}function t(e,t){return Math.max(t.minZoom,Math.min(t.maxZoom,e))}function n(e,t,n){return new DOMMatrix([e,0,0,e,t,n])}const r="canvas-container",a="transform-layer",o="content-layer";function i(e,n,r,a,o){const i=o.enableRulers?-o.rulerSize:0,s=r||{scale:1,translateX:i,translateY:i},{scale:l,translateX:c,translateY:u}=s,d=t(l*a,o);if(Math.abs(d-l)<.001)return{scale:l,translateX:c,translateY:u};return{scale:d,translateX:e-(e-c)/l*d,translateY:n-(n-u)/l*d}}function s(e){return e.getBounds().visibleArea}function l(e,n){return n(n=>t(n,e))}const c=new Map;function u(e,t,n){return e[t]?n():null}function d(e){let t=null,n=null;const r=(...r)=>{n=r,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return r.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},r}function h(e,t,n){return n(null!==e.container.querySelector(".canvas-ruler")?t:0)}function m(e,t,n,r,a){const o=null!==e.container.querySelector(".canvas-ruler");return a(o?t-r:t,o?n-r:n)}function g(e,t){if("dark"===e.themeMode){return e[`${t}Dark`]}return e[t]}const p={width:8e3,height:8e3,enableAcceleration:!0,initialZoom:1,initialPan:{x:0,y:0},name:"markupCanvas",enablePostMessageAPI:!1,enableZoom:!0,enablePan:!0,enableTouch:!0,enableKeyboard:!0,bindKeyboardEventsTo:"document",sendKeyboardEventsToParent:!1,zoomSpeed:1.5,minZoom:.05,maxZoom:80,enableTransition:!0,transitionDuration:.2,enableAdaptiveSpeed:!0,enableLeftDrag:!0,enableMiddleDrag:!0,requireSpaceForMouseDrag:!1,keyboardPanStep:50,keyboardFastMultiplier:20,keyboardZoomStep:.2,enableClickToZoom:!0,clickZoomLevel:1,requireOptionForClickZoom:!1,enableRulers:!0,enableGrid:!1,showRulers:!0,showGrid:!1,rulerFontSize:9,rulerFontFamily:"Monaco, Menlo, monospace",rulerUnits:"px",rulerSize:20,canvasBackgroundColor:"rgba(250, 250, 250, 1)",canvasBackgroundColorDark:"rgba(40, 40, 40, 1)",rulerBackgroundColor:"rgba(255, 255, 255, 0.95)",rulerBorderColor:"rgba(240, 240, 240, 1)",rulerTextColor:"rgba(102, 102, 102, 1)",rulerTickColor:"rgba(204, 204, 204, 1)",gridColor:"rgba(232, 86, 193, 0.5)",rulerBackgroundColorDark:"rgba(30, 30, 30, 0.95)",rulerBorderColorDark:"rgba(68, 68, 68, 1)",rulerTextColorDark:"rgba(170, 170, 170, 1)",rulerTickColorDark:"rgba(104, 104, 104, 1)",gridColorDark:"rgba(232, 86, 193, 0.5)",themeMode:"light"};function f(t,r){try{const a=t.container,o=t.transform||{scale:1,translateX:0,translateY:0},i=a.getBoundingClientRect(),s=i.width||a.clientWidth||0,l=i.height||a.clientHeight||0,c=h({container:a},r.rulerSize,e=>Math.max(0,s-e)),u=h({container:a},r.rulerSize,e=>Math.max(0,l-e)),d=r.width||p.width,m=r.height||p.height,g=function(t,r,a,o,i){const s=e(0,0,n(i.scale,i.translateX,i.translateY)),l=e(t,r,n(i.scale,i.translateX,i.translateY));return{x:Math.max(0,Math.min(a,s.x)),y:Math.max(0,Math.min(o,s.y)),width:Math.max(0,Math.min(a-s.x,l.x-s.x)),height:Math.max(0,Math.min(o-s.y,l.y-s.y))}}(c,u,d,m,o);return{width:c,height:u,contentWidth:d,contentHeight:m,scale:o.scale,translateX:o.translateX,translateY:o.translateY,visibleArea:g,scaledContentWidth:d*o.scale,scaledContentHeight:m*o.scale,canPanLeft:o.translateX<0,canPanRight:o.translateX+d*o.scale>c,canPanUp:o.translateY<0,canPanDown:o.translateY+m*o.scale>u,canZoomIn:o.scale<3.5,canZoomOut:o.scale>.1}}catch(e){return console.error("Failed to calculate canvas bounds:",e),{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:!1,canPanRight:!1,canPanUp:!1,canPanDown:!1,canZoomIn:!1,canZoomOut:!1}}}function b(e,t){try{if(t.enableTransition){window.__markupCanvasTransitionTimeout&&(clearTimeout(window.__markupCanvasTransitionTimeout),window.__markupCanvasTransitionTimeout=void 0);return function(e,t,n){const r=c.get(e);r&&clearTimeout(r);const a=window.setTimeout(()=>{n(),c.delete(e)},t);c.set(e,a)}("disableTransition",1e3*(t.transitionDuration??.2),()=>{e.style.transition="none",window.__markupCanvasTransitionTimeout=void 0}),!0}return!1}catch(e){return console.error("Failed to disable transitions:",e),!0}}function y(e,t,n){!function(e,t){try{return!!t.enableTransition&&(window.__markupCanvasTransitionTimeout&&(clearTimeout(window.__markupCanvasTransitionTimeout),window.__markupCanvasTransitionTimeout=void 0),e.style.transition=`transform ${t.transitionDuration}s linear`,!0)}catch(e){return console.error("Failed to enable transitions:",e),!1}}(e,t);try{return n()}finally{b(e,t)}}function v(e,t,n){const r=t.keyboardPanStep;return n({translateY:e.transform.translateY-r})}function k(e,t,n){const r=t.keyboardPanStep;return n({translateX:e.transform.translateX+r})}function w(e,t,n){const r=t.keyboardPanStep;return n({translateX:e.transform.translateX-r})}function x(e,t,n){const r=t.keyboardPanStep;return n({translateY:e.transform.translateY+r})}function T(e,t){if(!e?.style||!t)return!1;try{return e.style.transform=function(e){return`matrix3d(${e.m11}, ${e.m12}, ${e.m13}, ${e.m14}, ${e.m21}, ${e.m22}, ${e.m23}, ${e.m24}, ${e.m31}, ${e.m32}, ${e.m33}, ${e.m34}, ${e.m41}, ${e.m42}, ${e.m43}, ${e.m44})`}(t),!0}catch(e){return console.warn("Transform application failed:",e),!1}}function C(e,t){e.transform={...e.transform,...t};const r=n(e.transform.scale,e.transform.translateX,e.transform.translateY);return T(e.transformLayer,r)}function M(e={}){const t={...p,...e};return("number"!=typeof t.width||t.width<=0)&&(console.warn("Invalid width, using default"),t.width=p.width),("number"!=typeof t.height||t.height<=0)&&(console.warn("Invalid height, using default"),t.height=p.height),("number"!=typeof t.zoomSpeed||t.zoomSpeed<=0)&&(console.warn("Invalid zoomSpeed, using default"),t.zoomSpeed=p.zoomSpeed),("number"!=typeof t.minZoom||t.minZoom<=0)&&(console.warn("Invalid minZoom, using default"),t.minZoom=p.minZoom),("number"!=typeof t.maxZoom||t.maxZoom<=t.minZoom)&&(console.warn("Invalid maxZoom, using default"),t.maxZoom=p.maxZoom),("number"!=typeof t.keyboardPanStep||t.keyboardPanStep<=0)&&(console.warn("Invalid keyboardPanStep, using default"),t.keyboardPanStep=p.keyboardPanStep),("number"!=typeof t.keyboardFastMultiplier||t.keyboardFastMultiplier<=0)&&(console.warn("Invalid keyboardFastMultiplier, using default"),t.keyboardFastMultiplier=p.keyboardFastMultiplier),("number"!=typeof t.clickZoomLevel||t.clickZoomLevel<=0)&&(console.warn("Invalid clickZoomLevel, using default"),t.clickZoomLevel=p.clickZoomLevel),("number"!=typeof t.rulerFontSize||t.rulerFontSize<=0)&&(console.warn("Invalid rulerFontSize, using default"),t.rulerFontSize=p.rulerFontSize),("number"!=typeof t.rulerSize||t.rulerSize<=0)&&(console.warn("Invalid rulerSize, using default"),t.rulerSize=p.rulerSize),t}function S(e,t,n,r){const a=M({...t,themeMode:r}),o=g(a,"canvasBackgroundColor");e.style.backgroundColor=o,n&&n.updateTheme(a)}function D(e){try{const t=e.getBounds();return{x:t.width/2,y:t.height/2}}catch(e){return console.warn("Failed to calculate viewport center:",e),{x:0,y:0}}}function E(e,t){const n=Array.from(e.children);let r=e.querySelector(`.${a}`);r||(r=document.createElement("div"),r.className=a,e.appendChild(r)),function(e,t){e.style.position="absolute";const n=t.rulerSize;e.style.top=`${n}px`,e.style.left=`${n}px`,e.style.width=`${t.width}px`,e.style.height=`${t.height}px`,e.style.transformOrigin="0 0"}(r,t);let i=r.querySelector(`.${o}`);return i||(i=document.createElement("div"),i.className=o,r.appendChild(i),function(e,t,n){e.forEach(e=>{e===n||e.classList.contains(a)||t.appendChild(e)})}(n,i,r)),function(e){e.style.position="relative",e.style.width="100%",e.style.height="100%",e.style.pointerEvents="auto"}(i),{transformLayer:r,contentLayer:i}}function z(e,t){if("static"===getComputedStyle(e).position&&(e.style.position="relative"),e.style.overflow="hidden",e.style.cursor="grab",e.style.overscrollBehavior="none",t){const n=g(t,"canvasBackgroundColor");e.style.backgroundColor=n}e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),function(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e);0===t.height&&"auto"===n.height&&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.",e),0===t.width&&"auto"===n.width&&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.",e)}(e),e.classList.contains(r)||e.classList.add(r)}function L(e,t){if(!e?.appendChild)return console.error("Invalid container element provided to createCanvas"),null;try{z(e,t);const{transformLayer:r,contentLayer:a}=E(e,t);u(t,"enableAcceleration",()=>{!function(e){try{return e.style.transform=e.style.transform||"translateZ(0)",e.style.backfaceVisibility="hidden",!0}catch(e){return console.error("Failed to enable hardware acceleration:",e),!1}}(r)});const o=t.enableRulers?-t.rulerSize:0,i={scale:t.initialZoom??1,translateX:(t.initialPan?.x??0)+o,translateY:(t.initialPan?.y??0)+o},s=n(i.scale,i.translateX,i.translateY);T(r,s);return{container:e,transformLayer:r,contentLayer:a,transform:i}}catch(e){return console.error("Failed to create canvas:",e),null}}class R{constructor(){this.listeners=new Map}setEmitInterceptor(e){this.emitInterceptor=e}on(e,t){this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t)}off(e,t){const n=this.listeners.get(e);n&&n.delete(t)}emit(e,t){this.emitInterceptor?.(e,t);const n=this.listeners.get(e);n&&n.forEach(n=>{try{n(t)}catch(t){console.error(`Error in event handler for "${String(e)}":`,t)}})}removeAllListeners(){this.listeners.clear()}}function P(e,t){const n=t.transform;e.emit("transform",n),e.emit("zoom",n.scale),e.emit("pan",{x:n.translateX,y:n.translateY})}const Y=300,X=5;function I(e,t){if(!e?.getBounds)return t;try{const n=e.getBounds(),r=n.width*n.height;return t*(r/2073600)**1}catch(e){return console.warn("Failed to calculate adaptive zoom speed, using base speed:",e),t}}function $(e,t,n){const r=n?.textEditModeEnabled??!1;function a(n){if(!(n instanceof KeyboardEvent))return;if("canvas"===t.bindKeyboardEventsTo&&document.activeElement!==e.container)return;if(u(t,"sendKeyboardEventsToParent",()=>{r&&!function(e){return!("0"!==e.key||!e.ctrlKey&&!e.metaKey)||!("g"!==e.key&&"G"!==e.key||!e.shiftKey||e.ctrlKey||e.metaKey||e.altKey)||!("r"!==e.key&&"R"!==e.key||!e.shiftKey||e.ctrlKey||e.metaKey||e.altKey)}(n)||(!function(e,t){if("undefined"==typeof window||!window.parent)return;const n=t.name||"markupCanvas";window.parent.postMessage({source:"markup-canvas",action:"keyboardShortcut",data:{key:e.key,ctrlKey:e.ctrlKey,metaKey:e.metaKey,shiftKey:e.shiftKey,altKey:e.altKey,code:e.code},timestamp:Date.now(),canvasName:n},"*")}(n,t),n.preventDefault())}),t.sendKeyboardEventsToParent)return;let a=!1;const o={};switch(n.key){case"ArrowLeft":if(r)return;o.translateX=e.transform.translateX+t.keyboardPanStep,a=!0;break;case"ArrowRight":if(r)return;o.translateX=e.transform.translateX-t.keyboardPanStep,a=!0;break;case"ArrowUp":if(r)return;o.translateY=e.transform.translateY+t.keyboardPanStep,a=!0;break;case"ArrowDown":if(r)return;o.translateY=e.transform.translateY-t.keyboardPanStep,a=!0;break;case"=":case"+":if(r)return;{const n=t.enableAdaptiveSpeed?I(e,t.keyboardZoomStep):t.keyboardZoomStep;e.zoomIn(n),a=!0}break;case"-":if(r)return;{const n=t.enableAdaptiveSpeed?I(e,t.keyboardZoomStep):t.keyboardZoomStep;e.zoomOut(n),a=!0}break;case"0":n.ctrlKey?(e.resetView&&e.resetView(),a=!0):n.metaKey&&(e.resetViewToCenter&&e.resetViewToCenter(),a=!0);break;case"g":case"G":!n.shiftKey||n.ctrlKey||n.metaKey||n.altKey||!e.toggleGrid||(e.toggleGrid(),a=!0);break;case"r":case"R":!n.shiftKey||n.metaKey||n.ctrlKey||n.altKey||!e.toggleRulers||(e.toggleRulers(),a=!0)}a&&(n.preventDefault(),Object.keys(o).length>0&&e.updateTransform(o))}const o="canvas"===t.bindKeyboardEventsTo?e.container:document;return o.addEventListener("keydown",a),()=>{o.removeEventListener("keydown",a)}}function B(e,t,n,r,a){n?t.requireSpaceForMouseDrag?e.container.style.cursor=r?"grab":"default":e.container.style.cursor=a?"grabbing":"grab":e.container.style.cursor="default"}function Z(e,t,n,r,a){a.setIsDragging(!1),a.setDragButton(-1),B(e,t,n,r,!1)}function F(e,t,n,r,a,o,i,s,l,c){o&&e.button===i&&Z(t,n,r,a,{setIsDragging:c.setIsDragging,setDragButton:c.setDragButton}),r&&0===e.button&&n.enableClickToZoom&&s>0&&function(e,t,n,r,a,o){const i=Date.now()-r,s=e.altKey,l=!n.requireOptionForClickZoom||s;if(i<Y&&!a&&!o&&l){e.preventDefault();const r=t.container.getBoundingClientRect(),a=e.clientX-r.left,o=e.clientY-r.top,{clickX:i,clickY:s}=m(t,a,o,n.rulerSize,(e,t)=>({clickX:e,clickY:t})),l=t.canvasToContent(i,s),c=r.width/2,u=r.height/2,d=n.clickZoomLevel,h={scale:d,translateX:c-l.x*d,translateY:u-l.y*d};y(t.transformLayer,t.config,()=>{t.updateTransform(h)})}}(e,t,n,s,l,o),0===e.button&&function(e){e.setMouseDownTime(0),e.setHasDragged(!1)}({setMouseDownTime:c.setMouseDownTime,setHasDragged:c.setHasDragged})}function K(e,t,n=!0){let r=!0,a=!1,o=0,i=0,s=-1,l=!1,c=0,u=0,h=0,m=!1;const g={setIsDragging:e=>{a=e},setDragButton:e=>{s=e},setIsSpacePressed:e=>{l=e},setMouseDownTime:e=>{c=e},setMouseDownX:e=>{u=e},setMouseDownY:e=>{h=e},setHasDragged:e=>{m=e},setLastMouseX:e=>{o=e},setLastMouseY:e=>{i=e}},p=n=>{!function(e,t,n,r,a,o){n.requireSpaceForMouseDrag&&" "===e.key&&(o.setIsSpacePressed(!0),B(t,n,r,!0,a))}(n,e,t,r,a,{setIsSpacePressed:g.setIsSpacePressed})},f=n=>{!function(e,t,n,r,a,o){n.requireSpaceForMouseDrag&&" "===e.key&&(o.setIsSpacePressed(!1),B(t,n,r,!1,a),a&&Z(t,n,r,!1,{setIsDragging:o.setIsDragging,setDragButton:o.setDragButton}))}(n,e,t,r,a,{setIsSpacePressed:g.setIsSpacePressed,setIsDragging:g.setIsDragging,setDragButton:g.setDragButton})},b=n=>{!function(e,t,n,r,a,o){const i=0===e.button,s=1===e.button;if(i&&(o.setMouseDownTime(Date.now()),o.setMouseDownX(e.clientX),o.setMouseDownY(e.clientY),o.setHasDragged(!1)),!r)return;(!n.requireSpaceForMouseDrag||a)&&(i&&n.enableLeftDrag||s&&n.enableMiddleDrag)&&(e.preventDefault(),o.setDragButton(e.button),o.setLastMouseX(e.clientX),o.setLastMouseY(e.clientY),B(t,n,r,a,!1))}(n,e,t,r,l,g)},y=n=>{!function(e,t,n,r,a,o,i,s,l,c,u,h){if(i>0){const t=Math.abs(e.clientX-s),i=Math.abs(e.clientY-l);if(t>X||i>X){h.setHasDragged(!0);const e=!n.requireSpaceForMouseDrag||o;!a&&r&&e&&h.setIsDragging(!0)}}if(!a||!r)return;e.preventDefault(),d((...e)=>{const n=e[0];if(!a||!r)return;const o=n.clientX-c,i=n.clientY-u,s={translateX:t.transform.translateX+o,translateY:t.transform.translateY+i};t.updateTransform(s),h.setLastMouseX(n.clientX),h.setLastMouseY(n.clientY)})(e)}(n,e,t,r,a,l,c,u,h,o,i,{setHasDragged:g.setHasDragged,setIsDragging:g.setIsDragging,setLastMouseX:g.setLastMouseX,setLastMouseY:g.setLastMouseY})},v=n=>{F(n,e,t,r,l,a,s,c,m,{setIsDragging:g.setIsDragging,setDragButton:g.setDragButton,setMouseDownTime:g.setMouseDownTime,setHasDragged:g.setHasDragged})},k=()=>{!function(e,t,n,r,a,o){a&&Z(e,t,n,r,o)}(e,t,r,l,a,{setIsDragging:g.setIsDragging,setDragButton:g.setDragButton})};e.container.addEventListener("mousedown",b),document.addEventListener("mousemove",y),document.addEventListener("mouseup",v),e.container.addEventListener("mouseleave",k),t.requireSpaceForMouseDrag&&(document.addEventListener("keydown",p),document.addEventListener("keyup",f)),B(e,t,r,l,a);const w=()=>{e.container.removeEventListener("mousedown",b),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",v),e.container.removeEventListener("mouseleave",k),t.requireSpaceForMouseDrag&&(document.removeEventListener("keydown",p),document.removeEventListener("keyup",f))};return n?{cleanup:w,enable:()=>(r=!0,B(e,t,r,l,a),!0),disable:()=>(r=!1,a&&Z(e,t,r,l,{setIsDragging:g.setIsDragging,setDragButton:g.setDragButton}),B(e,t,r,l,a),!0),isEnabled:()=>r}:w}function O(e,t,n,r){try{switch(t){case"zoomIn":e.zoomIn(n);break;case"zoomOut":e.zoomOut(n);break;case"setZoom":{const t=n;if("number"!=typeof t||t<=0)throw new Error(`Invalid zoom level: ${t}. Must be a positive number.`);e.setZoom(t);break}case"resetZoom":e.resetZoom();break;case"panLeft":e.panLeft(n);break;case"panRight":e.panRight(n);break;case"panUp":e.panUp(n);break;case"panDown":e.panDown(n);break;case"fitToScreen":e.fitToScreen();break;case"centerContent":e.centerContent();break;case"panToPoint":{const t=n;e.panToPoint(t.x,t.y);break}case"resetView":e.resetView();break;case"resetViewToCenter":e.resetViewToCenter();break;case"resetToInitial":e.resetToInitial();break;case"toggleRulers":e.toggleRulers();break;case"showRulers":e.showRulers();break;case"hideRulers":e.hideRulers();break;case"toggleGrid":e.toggleGrid();break;case"showGrid":e.showGrid();break;case"hideGrid":e.hideGrid();break;case"updateThemeMode":{const t=n;if("light"!==t&&"dark"!==t)throw new Error(`Invalid theme mode: ${t}`);e.updateThemeMode(t);break}case"toggleThemeMode":{const t="light"===e.getConfig().themeMode?"dark":"light";e.updateThemeMode(t);break}case"updateTransition":{const t=n;if("boolean"!=typeof t)throw new Error(`Invalid transition enabled value: ${t}. Must be a boolean.`);e.updateTransition(t);break}case"toggleTransitionMode":e.toggleTransitionMode();break;default:throw new Error(`Unknown action: ${t}`)}}catch(e){!function(e,t,n){window.postMessage({source:"markup-canvas-error",canvasName:e,action:t,error:n,timestamp:Date.now()},"*")}(r,t,e instanceof Error?e.message:String(e))}}function V(e,t){return{x:(e.clientX+t.clientX)/2,y:(e.clientY+t.clientY)/2}}function A(e,t){const n=e.clientX-t.clientX,r=e.clientY-t.clientY;return Math.sqrt(n*n+r*r)}function _(e,t,n,r){const a=i(n,r,e.transform,t,e.config);return e.updateTransform(a)}function G(e,t,n){e.preventDefault();const r=Array.from(e.touches);d((...e)=>{const r=e[0];if(1===r.length){if(1===n.touches.length){const e=r[0].clientX-n.touches[0].clientX,a=r[0].clientY-n.touches[0].clientY,o={translateX:t.transform.translateX+e,translateY:t.transform.translateY+a};t.updateTransform(o)}}else if(2===r.length){const e=A(r[0],r[1]),a=V(r[0],r[1]);if(n.lastDistance>0){const r=e/n.lastDistance,o=t.container.getBoundingClientRect();let i=a.x-o.left,s=a.y-o.top;const l=function(e,t,n,r){return h(e,t,e=>{const t={...n,x:n.x-e,y:n.y-e};return r(t)})}(t,t.config.rulerSize,{x:i,y:s},e=>e);i=l.x,s=l.y,_(t,r,i,s)}n.lastDistance=e,n.lastCenter=a}n.touches=r})(r)}function N(e){const t={touches:[],lastDistance:0,lastCenter:{}},n=e=>{!function(e,t){e.preventDefault(),t.touches=Array.from(e.touches),2===t.touches.length&&(t.lastDistance=A(t.touches[0],t.touches[1]),t.lastCenter=V(t.touches[0],t.touches[1]))}(e,t)},r=n=>{G(n,e,t)},a=e=>{!function(e,t){t.touches=Array.from(e.touches),t.touches.length<2&&(t.lastDistance=0)}(e,t)};return e.container.addEventListener("touchstart",n,{passive:!1}),e.container.addEventListener("touchmove",r,{passive:!1}),e.container.addEventListener("touchend",a,{passive:!1}),()=>{e.container.removeEventListener("touchstart",n),e.container.removeEventListener("touchmove",r),e.container.removeEventListener("touchend",a)}}function H(e){const t=e.ctrlKey||e.metaKey,n=[0===e.deltaMode,Math.abs(e.deltaY)<50,e.deltaY%1!=0,Math.abs(e.deltaX)>0&&Math.abs(e.deltaY)>0].filter(Boolean).length>=2;return{isTrackpad:n,isMouseWheel:!n,isTrackpadScroll:n&&!t,isTrackpadPinch:n&&t,isZoomGesture:t}}function q(e,t){const n=(e=>d((...t)=>{const n=t[0];if(!n||!e?.updateTransform)return!1;try{const t=e.transform,r=1,a=n.deltaX*r,o=n.deltaY*r,i={scale:t.scale,translateX:t.translateX-a,translateY:t.translateY-o};return b(e.transformLayer,e.config),e.updateTransform(i)}catch(e){return console.error("Error handling trackpad pan:",e),!1}}))(e),r=r=>H(r).isTrackpadScroll?n(r):function(e,t,n){if(!e||"number"!=typeof e.deltaY)return console.warn("Invalid wheel event provided"),!1;if(!t?.updateTransform)return console.warn("Invalid canvas provided to handleWheelEvent"),!1;try{e.preventDefault();const r=t.container.getBoundingClientRect(),a=e.clientX-r.left,o=e.clientY-r.top,{mouseX:i,mouseY:s}=m(t,a,o,n.rulerSize,(e,t)=>({mouseX:e,mouseY:t})),l=n.zoomSpeed,c=H(e);if(!c.isZoomGesture)return!1;let u=n.enableAdaptiveSpeed?I(t,l):l;if(c.isTrackpadPinch){const e=.05*n.zoomSpeed;u=n.enableAdaptiveSpeed?I(t,e):e}return _(t,(e.deltaY<0?1:-1)>0?1+u:1/(1+u),i,s)}catch(e){return console.error("Error handling wheel event:",e),!1}}(r,e,t);return e.container.addEventListener("wheel",r,{passive:!1}),()=>{e.container.removeEventListener("wheel",r)}}const U=100,W=1e3,j=1001,J=4,Q=4,ee=100,te=100,ne=20,re=200;function ae(e,t){const n=function(e){const t=document.createElement("div");return t.className="canvas-ruler horizontal-ruler",t.style.cssText=`\n\tposition: absolute;\n\ttop: 0;\n\tleft: ${e.rulerSize}px;\n\tright: 0;\n\theight: ${e.rulerSize}px;\n\tbackground: var(--ruler-background-color);\n\tborder-bottom: 1px solid var(--ruler-border-color);\n\tz-index: ${W};\n\tpointer-events: none;\n\tfont-family: ${e.rulerFontFamily};\n\tfont-size: ${e.rulerFontSize}px;\n\tcolor: var(--ruler-text-color);\n\toverflow: hidden;\n  `,t}(t),r=function(e){const t=document.createElement("div");return t.className="canvas-ruler vertical-ruler",t.style.cssText=`\n\tposition: absolute;\n\ttop: ${e.rulerSize}px;\n\tleft: 0;\n\tbottom: 0;\n\twidth: ${e.rulerSize}px;\n\tbackground: var(--ruler-background-color);\n\tborder-right: 1px solid var(--ruler-border-color);\n\tz-index: ${W};\n\tpointer-events: none;\n\tfont-family: ${e.rulerFontFamily};\n\tfont-size: ${e.rulerFontSize}px;\n\tcolor: var(--ruler-text-color);\n\toverflow: hidden;\n  `,t}(t),a=function(e){const t=document.createElement("div");return t.className="canvas-ruler corner-box",t.style.cssText=`\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: ${e.rulerSize}px;\n\t\theight: ${e.rulerSize}px;\n\t\tbackground: var(--ruler-background-color);\n\t\tborder-right: 1px solid var(--ruler-border-color);\n\t\tborder-bottom: 1px solid var(--ruler-border-color);\n\t\tz-index: ${j};\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-family: ${e.rulerFontFamily};\n\t\tfont-size: ${e.rulerFontSize-2}px;\n\t\tcolor: var(--ruler-text-color);\n\t\tpointer-events: none;\n\t`,t.textContent=e.rulerUnits,t}(t),o=t.enableGrid?function(e){const t=document.createElement("div");return t.className="canvas-ruler grid-overlay",t.style.cssText=`\n\t\tposition: absolute;\n\t\ttop: ${e.rulerSize}px;\n\t\tleft: ${e.rulerSize}px;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tpointer-events: none;\n\t\tz-index: ${U};\n\t\tbackground-image: \n\t\t\tlinear-gradient(var(--grid-color) 1px, transparent 1px),\n\t\t\tlinear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\n\t\tbackground-size: 100px 100px;\n\t\topacity: 0.5;\n\t`,t}(t):void 0;return e.appendChild(n),e.appendChild(r),e.appendChild(a),o&&e.appendChild(o),{horizontalRuler:n,verticalRuler:r,cornerBox:a,gridOverlay:o}}function oe(e,t){const n=e/Math.max(5,Math.min(20,t/50)),r=10**Math.floor(Math.log10(n)),a=n/r;let o;return o=a<=1?1:a<=2?2:a<=5?5:10,o*r}function ie(e,t,n,r,a){const o=document.createElement("div");o.className="tick",o.style.cssText=`\n\t\tposition: absolute;\n\t\tleft: ${n}px;\n\t\tbottom: 0;\n\t\twidth: 1px;\n\t\theight: ${J}px;\n\t\tbackground: var(--ruler-tick-color);\n\t`,e.appendChild(o);if(t%ee===0){const r=document.createElement("div");r.style.cssText=`\n\t\t\tposition: absolute;\n\t\t\tleft: ${n}px;\n\t\t\tbottom: ${J+2}px;\n\t\t\tfont-size: ${a.rulerFontSize}px;\n\t\t\tline-height: 1;\n\t\t\tcolor: var(--ruler-text-color);\n\t\t\twhite-space: nowrap;\n\t\t\tpointer-events: none;\n\t\t`,r.textContent=Math.round(t).toString(),e.appendChild(r)}}function se(e,t,n,r,a){const o=document.createElement("div");o.className="tick",o.style.cssText=`\n\t\tposition: absolute;\n\t\ttop: ${n}px;\n\t\tright: 0;\n\t\twidth: ${Q}px;\n\t\theight: 1px;\n\t\tbackground: var(--ruler-tick-color);\n\t`,e.appendChild(o);if(t%ee===0){const r=document.createElement("div");r.style.cssText=`\n\t\t\tposition: absolute;\n\t\t\ttop: ${n-6}px;\n\t\t\tright: ${Q+6}px;\n\t\t\tfont-size: ${a.rulerFontSize}px;\n\t\t\tline-height: 1;\n\t\t\tcolor: var(--ruler-text-color);\n\t\t\twhite-space: nowrap;\n\t\t\tpointer-events: none;\n\t\t\ttransform: rotate(-90deg);\n\t\t\ttransform-origin: right center;\n\t\t`,r.textContent=Math.round(t).toString(),e.appendChild(r)}}function le(e,t,n,r,a){const o=e.getBounds(),i=o.scale||1,s=o.translateX||0,l=o.translateY||0,c=o.width-a.rulerSize,u=o.height-a.rulerSize,d=-s/i,h=-l/i,m=h+u/i;!function(e,t,n,r,a,o){const i=r,s=oe(n-t,i),l=document.createDocumentFragment(),c=Math.floor(t/s)*s,u=Math.ceil(n/s)*s;for(let e=c;e<=u;e+=s){const n=(e-t)*a;n>=-50&&n<=i+50&&ie(l,e,n,0,o)}e.innerHTML="",e.appendChild(l)}(t,d,d+c/i,c,i,a),function(e,t,n,r,a,o){const i=r,s=oe(n-t,i),l=document.createDocumentFragment(),c=Math.floor(t/s)*s,u=Math.ceil(n/s)*s;for(let e=c;e<=u;e+=s){const n=(e-t)*a;n>=-50&&n<=i+50&&se(l,e,n,0,o)}e.innerHTML="",e.appendChild(l)}(n,h,m,u,i,a),r&&function(e,t,n,r){let a=te*t;for(;a<ne;)a*=2;for(;a>re;)a/=2;e.style.backgroundSize=`${a}px ${a}px`,e.style.backgroundPosition=`${n%a}px ${r%a}px`}(r,i,s,l)}function ce(e,t){const n=g(t,"rulerBackgroundColor"),r=g(t,"rulerBorderColor"),a=g(t,"rulerTextColor"),o=g(t,"rulerTickColor"),i=g(t,"gridColor");e.horizontalRuler&&(e.horizontalRuler.style.setProperty("--ruler-background-color",n),e.horizontalRuler.style.setProperty("--ruler-border-color",r),e.horizontalRuler.style.setProperty("--ruler-text-color",a),e.horizontalRuler.style.setProperty("--ruler-tick-color",o)),e.verticalRuler&&(e.verticalRuler.style.setProperty("--ruler-background-color",n),e.verticalRuler.style.setProperty("--ruler-border-color",r),e.verticalRuler.style.setProperty("--ruler-text-color",a),e.verticalRuler.style.setProperty("--ruler-tick-color",o)),e.cornerBox&&(e.cornerBox.style.setProperty("--ruler-background-color",n),e.cornerBox.style.setProperty("--ruler-border-color",r),e.cornerBox.style.setProperty("--ruler-text-color",a)),e.gridOverlay&&e.gridOverlay.style.setProperty("--grid-color",i)}function ue(e,t){if(!e?.container)return console.error("Invalid canvas provided to createRulers"),null;let n,r=null,a=!1;const o=()=>{!a&&n.horizontalRuler&&n.verticalRuler&&le(e,n.horizontalRuler,n.verticalRuler,n.gridOverlay,t)};try{return n=ae(e.container,t),r=function(e,t){const n=d(t),r=e.updateTransform;e.updateTransform=function(e){const t=r.call(this,e);return n(),t};const a=d(t);return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a),e.updateTransform=r,n.cleanup(),a.cleanup()}}(e,o),ce(n,t),o(),t.showRulers||(n.horizontalRuler.style.display="none",n.verticalRuler.style.display="none",n.cornerBox.style.display="none"),!t.showGrid&&n.gridOverlay&&(n.gridOverlay.style.display="none"),{horizontalRuler:n.horizontalRuler,verticalRuler:n.verticalRuler,cornerBox:n.cornerBox,gridOverlay:n.gridOverlay,update:o,updateTheme:e=>{a||ce(n,e)},show:()=>{n.horizontalRuler&&(n.horizontalRuler.style.display="block"),n.verticalRuler&&(n.verticalRuler.style.display="block"),n.cornerBox&&(n.cornerBox.style.display="flex")},hide:()=>{n.horizontalRuler&&(n.horizontalRuler.style.display="none"),n.verticalRuler&&(n.verticalRuler.style.display="none"),n.cornerBox&&(n.cornerBox.style.display="none"),n.gridOverlay&&(n.gridOverlay.style.display="none")},toggleGrid:()=>{if(n.gridOverlay){const e="none"!==n.gridOverlay.style.display;n.gridOverlay.style.display=e?"none":"block"}},destroy:()=>{a=!0,r&&r(),n.horizontalRuler?.parentNode&&n.horizontalRuler.parentNode.removeChild(n.horizontalRuler),n.verticalRuler?.parentNode&&n.verticalRuler.parentNode.removeChild(n.verticalRuler),n.cornerBox?.parentNode&&n.cornerBox.parentNode.removeChild(n.cornerBox),n.gridOverlay?.parentNode&&n.gridOverlay.parentNode.removeChild(n.gridOverlay)}}}catch(e){return console.error("Failed to create rulers:",e),null}}return class{constructor(e,t={}){if(this.cleanupCallbacks=[],this.rulers=null,this.dragSetup=null,this.keyboardCleanup=null,this.textEditModeEnabled=!1,this.event=new R,this._isReady=!1,!e)throw new Error("Container element is required");this.config=M(t);const n=L(e,this.config);if(!n)throw new Error("Failed to create canvas");if(this.canvas=n,u(this.config,"enableRulers",()=>{this.rulers=ue(this,this.config),this.cleanupCallbacks.push(()=>{this.rulers&&this.rulers.destroy()})}),t.themeMode&&S(this.canvas.container,this.config,this.rulers,t.themeMode),this.event.setEmitInterceptor((e,t)=>{!function(e,t,n){if("undefined"==typeof window)return;let r=t;"ready"===e&&(r={ready:!0});const a=n.name||"markupCanvas";window.postMessage({source:"markup-canvas",action:e,data:r,timestamp:Date.now(),canvasName:a},"*"),window.parent&&window.parent.postMessage({source:"markup-canvas",action:e,data:r,timestamp:Date.now(),canvasName:a},"*")}(e,t,this.config)}),function(e,t){if("undefined"==typeof window)return;const n=t.name||"markupCanvas",r=window,a={config:{get current(){return e.config},get:e.getConfig.bind(e),update:e.updateConfig.bind(e)},transform:{update:e.updateTransform.bind(e),reset:e.reset.bind(e),resetToInitial:e.resetToInitial.bind(e)},zoom:{get current(){return e.transform.scale||1},set:e.setZoom.bind(e),toPoint:e.zoomToPoint.bind(e),in:e.zoomIn.bind(e),out:e.zoomOut.bind(e),reset:e.resetZoom.bind(e),resetToCenter:e.resetViewToCenter.bind(e),fitToScreen:e.fitToScreen.bind(e)},pan:{left:e.panLeft.bind(e),right:e.panRight.bind(e),up:e.panUp.bind(e),down:e.panDown.bind(e),toPoint:e.panToPoint.bind(e),toCenter:e.centerContent.bind(e)},mouseDrag:{enable:e.enableMouseDrag.bind(e),disable:e.disableMouseDrag.bind(e),isEnabled:e.isMouseDragEnabled.bind(e)},keyboard:{enable:e.enableKeyboard.bind(e),disable:e.disableKeyboard.bind(e),isEnabled:e.isKeyboardEnabled.bind(e),enableTextEditMode:e.enableTextEditMode.bind(e),disableTextEditMode:e.disableTextEditMode.bind(e),isTextEditModeEnabled:e.isTextEditModeEnabled.bind(e)},grid:{toggle:e.toggleGrid.bind(e),show:e.showGrid.bind(e),hide:e.hideGrid.bind(e),isVisible:e.isGridVisible.bind(e)},rulers:{toggle:e.toggleRulers.bind(e),show:e.showRulers.bind(e),hide:e.hideRulers.bind(e),isVisible:e.areRulersVisible.bind(e)},canvas:{canvasToContent:e.canvasToContent.bind(e),getVisibleArea:e.getVisibleArea.bind(e),isPointVisible:e.isPointVisible.bind(e),getBounds:e.getBounds.bind(e)},theme:{get current(){return e.config.themeMode},update:e.updateThemeMode.bind(e),toggle:e.toggleThemeMode.bind(e)},transition:{get current(){return e.config.enableTransition},set:e.updateTransition.bind(e),toggle:e.toggleTransitionMode.bind(e)},event:e.event,lifecycle:{cleanup:e.cleanup.bind(e),destroy:e.destroy.bind(e)},state:{get isReady(){return e.isReady},get isTransforming(){return e.isTransforming},get visibleBounds(){return e.visibleBounds},get transform(){return e.transform}}};r[n]=a,r.__markupCanvasInstances||(r.__markupCanvasInstances=new Map),r.__markupCanvasInstances.set(n,a)}(this,this.config),this.config.enablePostMessageAPI){const e=function(e){const t=t=>{const n=t.data;if(!["markup-canvas","application"].includes(n.source))return;const r=e.config.name||"markupCanvas";if(n.canvasName!==r)return;const a=n.action,o=n.data;O(e,a,o,r)};return"undefined"!=typeof window&&window.addEventListener("message",t),()=>{"undefined"!=typeof window&&window.removeEventListener("message",t)}}(this);this.cleanupCallbacks.push(e)}this.setupEventHandlers(),this._isReady=!0,this.event.emit("ready",this)}setupEventHandlers(){try{u(this.config,"enableZoom",()=>{const e=q(this,this.config);this.cleanupCallbacks.push(e)}),(this.config.enablePan||this.config.enableClickToZoom)&&(this.dragSetup=K(this,this.config,!0),this.cleanupCallbacks.push(this.dragSetup.cleanup)),u(this.config,"enableKeyboard",()=>{const e=$(this,this.config,{textEditModeEnabled:this.textEditModeEnabled});this.keyboardCleanup=e,this.cleanupCallbacks.push(e)}),u(this.config,"enableTouch",()=>{const e=N(this);this.cleanupCallbacks.push(e)})}catch(e){throw console.error("Failed to set up event handlers:",e),this.cleanup(),e}}get container(){return this.canvas.container}get transformLayer(){return this.canvas.transformLayer}get contentLayer(){return this.canvas.contentLayer}get transform(){return this.canvas.transform}get isReady(){return this._isReady}get isTransforming(){return this.dragSetup?.isEnabled()||!1}get visibleBounds(){return s(this)}getBounds(){return f(this.canvas,this.config)}updateTransform(e){const t=C(this.canvas,e);return t&&P(this.event,this.canvas),t}reset(){const e=C(this.canvas,{scale:1,translateX:0,translateY:0});return e&&P(this.event,this.canvas),e}resetToInitial(){const e=(t=this.canvas,n=this.transformLayer,r=this.config,y(n,r,()=>h(t,r.rulerSize,e=>{const n=r.initialZoom??1,a=r.initialPan??{x:0,y:0},o=-1*e,i={scale:n,translateX:a.x+o,translateY:a.y+o};return C(t,i)})));var t,n,r;return e&&P(this.event,this.canvas),e}setZoom(e){return function(e,t,n,r,a){return y(t,n,()=>l(n,t=>{const n=t(a),o=D(e);return r(o.x,o.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this),e)}canvasToContent(t,r){return e(t,r,n(this.canvas.transform.scale,this.canvas.transform.translateX,this.canvas.transform.translateY))}zoomToPoint(e,t,n){const r=function(e,t,n,r,a,o){return y(t,n,()=>{const t=i(r,a,e.transform,o/e.transform.scale,n);return C(e,t)})}(this.canvas,this.transformLayer,this.config,e,t,n);return r&&P(this.event,this.canvas),r}resetView(){return e=this.canvas,t=this.transformLayer,n=this.config,y(t,n,()=>h(e,n.rulerSize,t=>C(e,{scale:1,translateX:-1*t,translateY:-1*t})));var e,t,n}resetViewToCenter(){return function(e,t,n,r){return y(t,n,()=>l(n,t=>{const n=t(1),a=D(e);return r(a.x,a.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this))}panLeft(e){return k(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&k(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}panRight(e){return w(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&w(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}panUp(e){return x(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&x(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}panDown(e){return v(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&v(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}zoomIn(e=.5){return function(e,t,n,r,a=.5){return y(t,n,()=>l(n,t=>{const n=t(e.transform.scale*(1+a)),o=D(e);return r(o.x,o.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this),e)}zoomOut(e=.5){return function(e,t,n,r,a=.5){return y(t,n,()=>l(n,t=>{const n=t(e.transform.scale*(1-a)),o=D(e);return r(o.x,o.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this),e)}resetZoom(){return this.resetViewToCenter()}enableMouseDrag(){return this.dragSetup?.enable()??!1}disableMouseDrag(){return this.dragSetup?.disable()??!1}isMouseDragEnabled(){return this.dragSetup?.isEnabled()??!1}enableKeyboard(){return this.keyboardCleanup||(this.keyboardCleanup=$(this,this.config,{textEditModeEnabled:this.textEditModeEnabled}),this.cleanupCallbacks.push(this.keyboardCleanup)),!0}disableKeyboard(){return!!this.keyboardCleanup&&(this.keyboardCleanup(),this.keyboardCleanup=null,!0)}isKeyboardEnabled(){return null!==this.keyboardCleanup}enableTextEditMode(){if(this.textEditModeEnabled)return!0;if(this.textEditModeEnabled=!0,this.keyboardCleanup){const e=this.cleanupCallbacks.indexOf(this.keyboardCleanup);e>-1&&this.cleanupCallbacks.splice(e,1),this.keyboardCleanup(),this.keyboardCleanup=$(this,this.config,{textEditModeEnabled:!0}),this.cleanupCallbacks.push(this.keyboardCleanup)}return!0}disableTextEditMode(){if(!this.textEditModeEnabled)return!0;if(this.textEditModeEnabled=!1,this.keyboardCleanup){const e=this.cleanupCallbacks.indexOf(this.keyboardCleanup);e>-1&&this.cleanupCallbacks.splice(e,1),this.keyboardCleanup(),this.keyboardCleanup=$(this,this.config,{textEditModeEnabled:!1}),this.cleanupCallbacks.push(this.keyboardCleanup)}return!0}isTextEditModeEnabled(){return this.textEditModeEnabled}toggleGrid(){const e=(t=this.rulers,!!t?.toggleGrid&&(t.toggleGrid(),!0));var t;return e&&this.event.emit("gridVisibility",this.isGridVisible()),e}showGrid(){const e=(t=this.rulers,!!t?.gridOverlay&&(t.gridOverlay.style.display="block",!0));var t;return e&&this.event.emit("gridVisibility",!0),e}hideGrid(){const e=(t=this.rulers,!!t?.gridOverlay&&(t.gridOverlay.style.display="none",!0));var t;return e&&this.event.emit("gridVisibility",!1),e}isGridVisible(){return e=this.rulers,!!e?.gridOverlay&&"none"!==e.gridOverlay.style.display;var e}toggleRulers(){const e=function(e,t){if(e)return t()?e.hide():e.show(),!0;return!1}(this.rulers,()=>this.areRulersVisible());return e&&this.event.emit("rulersVisibility",this.areRulersVisible()),e}showRulers(){const e=!!(t=this.rulers)&&(t.show(),!0);var t;return e&&this.event.emit("rulersVisibility",!0),e}hideRulers(){const e=!!(t=this.rulers)&&(t.hide(),!0);var t;return e&&this.event.emit("rulersVisibility",!1),e}areRulersVisible(){return e=this.rulers,!!e?.horizontalRuler&&"none"!==e.horizontalRuler.style.display;var e}centerContent(){return e=this.canvas,t=this.config,n=this.updateTransform.bind(this),y(this.transformLayer,t,()=>{const r=f(e,t),a=(r.width-r.contentWidth*e.transform.scale)/2,o=(r.height-r.contentHeight*e.transform.scale)/2;return n({translateX:a,translateY:o})});var e,t,n}fitToScreen(){return e=this.canvas,t=this.transformLayer,n=this.config,y(t,n,()=>{const t=f(e,n),r=t.width/n.width,a=t.height/n.height,o=l(n,e=>e(.9*Math.min(r,a))),i=n.width*o,s=n.height*o,c=(t.width-i)/2,u=(t.height-s)/2;return C(e,{scale:o,translateX:c,translateY:u})});var e,t,n}getVisibleArea(){return s(this)}isPointVisible(e,t){return function(e,t,n){const r=s(e);return t>=r.x&&t<=r.x+r.width&&n>=r.y&&n<=r.y+r.height}(this,e,t)}panToPoint(e,t){return function(e,t,n,r,a,o){return y(o,t,()=>{const o=f(e,t),i=o.width/2,s=o.height/2,l=i-n*e.transform.scale,c=s-r*e.transform.scale;return a({translateX:l,translateY:c})})}(this.canvas,this.config,e,t,this.updateTransform.bind(this),this.transformLayer)}getConfig(){return{...this.config}}updateConfig(e){this.config=M({...this.config,...e})}updateThemeMode(e){this.config=M({...this.config,themeMode:e}),S(this.canvas.container,this.config,this.rulers,e)}toggleThemeMode(){const e="light"===this.config.themeMode?"dark":"light";return this.updateThemeMode(e),e}updateTransition(e){this.config=M({...this.config,enableTransition:e})}toggleTransitionMode(){const e=function(e){return!e}(this.config.enableTransition);return this.updateTransition(e),e}cleanup(){!function(e){if("undefined"==typeof window)return;const t=e.name||"markupCanvas",n=window;delete n[t],n.__markupCanvasInstances&&n.__markupCanvasInstances.delete(t)}(this.config),this.cleanupCallbacks.forEach(e=>{try{e()}catch(e){console.warn("Error during cleanup:",e)}}),this.cleanupCallbacks=[],this.removeAllListeners()}on(e,t){this.event.on(e,t)}off(e,t){this.event.off(e,t)}emit(e,t){this.event.emit(e,t)}removeAllListeners(){this.event.removeAllListeners()}destroy(){this.cleanup(),window.__markupCanvasTransitionTimeout&&clearTimeout(window.__markupCanvasTransitionTimeout)}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas=t()}(this,function(){"use strict";function e(e,t,n){if(!n?.inverse)return{x:e,y:t};try{const r=n.inverse(),a=new DOMPoint(e,t).matrixTransform(r);return{x:a.x,y:a.y}}catch(n){return console.warn("Canvas to content conversion failed:",n),{x:e,y:t}}}function t(e,t){return Math.max(t.minZoom,Math.min(t.maxZoom,e))}function n(e,t,n){return new DOMMatrix([e,0,0,e,t,n])}const r="canvas-container",a="transform-layer",o="content-layer";function i(e,n,r,a,o){const i=o.enableRulers?-o.rulerSize:0,s=r||{scale:1,translateX:i,translateY:i},{scale:l,translateX:c,translateY:u}=s,d=t(l*a,o);if(Math.abs(d-l)<.001)return{scale:l,translateX:c,translateY:u};return{scale:d,translateX:e-(e-c)/l*d,translateY:n-(n-u)/l*d}}function s(e){return e.getBounds().visibleArea}function l(e,n){return n(n=>t(n,e))}const c=new Map;function u(e,t,n){return e[t]?n():null}function d(e){let t=null,n=null;const r=(...r)=>{n=r,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return r.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},r}function h(e,t,n){return n(null!==e.container.querySelector(".canvas-ruler")?t:0)}function m(e,t,n,r,a){const o=null!==e.container.querySelector(".canvas-ruler");return a(o?t-r:t,o?n-r:n)}const g={width:8e3,height:8e3,enableAcceleration:!0,initialZoom:1,initialPan:{x:0,y:0},name:"markupCanvas",enablePostMessageAPI:!1,enableZoom:!0,enablePan:!0,enableTouch:!0,enableKeyboard:!0,bindKeyboardEventsTo:"document",sendKeyboardEventsToParent:!1,zoomSpeed:1.5,minZoom:.05,maxZoom:80,enableTransition:!0,transitionDuration:.2,enableAdaptiveSpeed:!0,enableLeftDrag:!0,enableMiddleDrag:!0,requireSpaceForMouseDrag:!1,keyboardPanStep:50,keyboardFastMultiplier:20,keyboardZoomStep:.2,enableClickToZoom:!0,clickZoomLevel:1,requireOptionForClickZoom:!1,enableRulers:!0,enableGrid:!1,showRulers:!0,showGrid:!1,rulerFontSize:9,rulerFontFamily:"Monaco, Menlo, monospace",rulerUnits:"px",rulerSize:20,canvasBackgroundColor:"rgba(250, 250, 250, 1)",canvasBackgroundColorDark:"rgba(40, 40, 40, 1)",rulerBackgroundColor:"rgba(255, 255, 255, 0.95)",rulerBorderColor:"rgba(240, 240, 240, 1)",rulerTextColor:"rgba(102, 102, 102, 1)",rulerTickColor:"rgba(204, 204, 204, 1)",gridColor:"rgba(232, 86, 193, 0.5)",rulerBackgroundColorDark:"rgba(30, 30, 30, 0.95)",rulerBorderColorDark:"rgba(68, 68, 68, 1)",rulerTextColorDark:"rgba(170, 170, 170, 1)",rulerTickColorDark:"rgba(104, 104, 104, 1)",gridColorDark:"rgba(232, 86, 193, 0.5)",themeMode:"light"};function p(t,r){try{const a=t.container,o=t.transform||{scale:1,translateX:0,translateY:0},i=a.getBoundingClientRect(),s=i.width||a.clientWidth||0,l=i.height||a.clientHeight||0,c=h({container:a},r.rulerSize,e=>Math.max(0,s-e)),u=h({container:a},r.rulerSize,e=>Math.max(0,l-e)),d=r.width||g.width,m=r.height||g.height,p=function(t,r,a,o,i){const s=e(0,0,n(i.scale,i.translateX,i.translateY)),l=e(t,r,n(i.scale,i.translateX,i.translateY));return{x:Math.max(0,Math.min(a,s.x)),y:Math.max(0,Math.min(o,s.y)),width:Math.max(0,Math.min(a-s.x,l.x-s.x)),height:Math.max(0,Math.min(o-s.y,l.y-s.y))}}(c,u,d,m,o);return{width:c,height:u,contentWidth:d,contentHeight:m,scale:o.scale,translateX:o.translateX,translateY:o.translateY,visibleArea:p,scaledContentWidth:d*o.scale,scaledContentHeight:m*o.scale,canPanLeft:o.translateX<0,canPanRight:o.translateX+d*o.scale>c,canPanUp:o.translateY<0,canPanDown:o.translateY+m*o.scale>u,canZoomIn:o.scale<3.5,canZoomOut:o.scale>.1}}catch(e){return console.error("Failed to calculate canvas bounds:",e),{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:!1,canPanRight:!1,canPanUp:!1,canPanDown:!1,canZoomIn:!1,canZoomOut:!1}}}function f(e,t){try{if(t.enableTransition){window.__markupCanvasTransitionTimeout&&(clearTimeout(window.__markupCanvasTransitionTimeout),window.__markupCanvasTransitionTimeout=void 0);return function(e,t,n){const r=c.get(e);r&&clearTimeout(r);const a=window.setTimeout(()=>{n(),c.delete(e)},t);c.set(e,a)}("disableTransition",1e3*(t.transitionDuration??.2),()=>{e.style.transition="none",window.__markupCanvasTransitionTimeout=void 0}),!0}return!1}catch(e){return console.error("Failed to disable transitions:",e),!0}}function b(e,t,n){!function(e,t){try{return!!t.enableTransition&&(window.__markupCanvasTransitionTimeout&&(clearTimeout(window.__markupCanvasTransitionTimeout),window.__markupCanvasTransitionTimeout=void 0),e.style.transition=`transform ${t.transitionDuration}s linear`,!0)}catch(e){return console.error("Failed to enable transitions:",e),!1}}(e,t);try{return n()}finally{f(e,t)}}function y(e,t,n){const r=t.keyboardPanStep;return n({translateY:e.transform.translateY-r})}function v(e,t,n){const r=t.keyboardPanStep;return n({translateX:e.transform.translateX+r})}function k(e,t,n){const r=t.keyboardPanStep;return n({translateX:e.transform.translateX-r})}function w(e,t,n){const r=t.keyboardPanStep;return n({translateY:e.transform.translateY+r})}function x(e,t){if(!e?.style||!t)return!1;try{return e.style.transform=function(e){return`matrix3d(${e.m11}, ${e.m12}, ${e.m13}, ${e.m14}, ${e.m21}, ${e.m22}, ${e.m23}, ${e.m24}, ${e.m31}, ${e.m32}, ${e.m33}, ${e.m34}, ${e.m41}, ${e.m42}, ${e.m43}, ${e.m44})`}(t),!0}catch(e){return console.warn("Transform application failed:",e),!1}}function T(e,t){e.transform={...e.transform,...t};const r=n(e.transform.scale,e.transform.translateX,e.transform.translateY);return x(e.transformLayer,r)}function C(e={}){const t={...g,...e};return("number"!=typeof t.width||t.width<=0)&&(console.warn("Invalid width, using default"),t.width=g.width),("number"!=typeof t.height||t.height<=0)&&(console.warn("Invalid height, using default"),t.height=g.height),("number"!=typeof t.zoomSpeed||t.zoomSpeed<=0)&&(console.warn("Invalid zoomSpeed, using default"),t.zoomSpeed=g.zoomSpeed),("number"!=typeof t.minZoom||t.minZoom<=0)&&(console.warn("Invalid minZoom, using default"),t.minZoom=g.minZoom),("number"!=typeof t.maxZoom||t.maxZoom<=t.minZoom)&&(console.warn("Invalid maxZoom, using default"),t.maxZoom=g.maxZoom),("number"!=typeof t.keyboardPanStep||t.keyboardPanStep<=0)&&(console.warn("Invalid keyboardPanStep, using default"),t.keyboardPanStep=g.keyboardPanStep),("number"!=typeof t.keyboardFastMultiplier||t.keyboardFastMultiplier<=0)&&(console.warn("Invalid keyboardFastMultiplier, using default"),t.keyboardFastMultiplier=g.keyboardFastMultiplier),("number"!=typeof t.clickZoomLevel||t.clickZoomLevel<=0)&&(console.warn("Invalid clickZoomLevel, using default"),t.clickZoomLevel=g.clickZoomLevel),("number"!=typeof t.rulerFontSize||t.rulerFontSize<=0)&&(console.warn("Invalid rulerFontSize, using default"),t.rulerFontSize=g.rulerFontSize),("number"!=typeof t.rulerSize||t.rulerSize<=0)&&(console.warn("Invalid rulerSize, using default"),t.rulerSize=g.rulerSize),t}function M(e,t,n,r){const a=C({...t,themeMode:r});e.style.colorScheme=r,n&&n.updateTheme(a)}function S(e){try{const t=e.getBounds();return{x:t.width/2,y:t.height/2}}catch(e){return console.warn("Failed to calculate viewport center:",e),{x:0,y:0}}}function D(e,t){const n=Array.from(e.children);let r=e.querySelector(`.${a}`);r||(r=document.createElement("div"),r.className=a,e.appendChild(r)),function(e,t){e.style.position="absolute";const n=t.rulerSize;e.style.top=`${n}px`,e.style.left=`${n}px`,e.style.width=`${t.width}px`,e.style.height=`${t.height}px`,e.style.transformOrigin="0 0"}(r,t);let i=r.querySelector(`.${o}`);return i||(i=document.createElement("div"),i.className=o,r.appendChild(i),function(e,t,n){e.forEach(e=>{e===n||e.classList.contains(a)||t.appendChild(e)})}(n,i,r)),function(e){e.style.position="relative",e.style.width="100%",e.style.height="100%",e.style.pointerEvents="auto"}(i),{transformLayer:r,contentLayer:i}}function E(e,t){if("static"===getComputedStyle(e).position&&(e.style.position="relative"),e.style.overflow="hidden",e.style.cursor="grab",e.style.overscrollBehavior="none",t){const n=`light-dark(${t.canvasBackgroundColor}, ${t.canvasBackgroundColorDark})`;e.style.backgroundColor=n,e.style.colorScheme=t.themeMode}e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),function(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e);0===t.height&&"auto"===n.height&&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.",e),0===t.width&&"auto"===n.width&&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.",e)}(e),e.classList.contains(r)||e.classList.add(r)}function z(e,t){if(!e?.appendChild)return console.error("Invalid container element provided to createCanvas"),null;try{E(e,t);const{transformLayer:r,contentLayer:a}=D(e,t);u(t,"enableAcceleration",()=>{!function(e){try{return e.style.transform=e.style.transform||"translateZ(0)",e.style.backfaceVisibility="hidden",!0}catch(e){return console.error("Failed to enable hardware acceleration:",e),!1}}(r)});const o=t.enableRulers?-t.rulerSize:0,i={scale:t.initialZoom??1,translateX:(t.initialPan?.x??0)+o,translateY:(t.initialPan?.y??0)+o},s=n(i.scale,i.translateX,i.translateY);x(r,s);return{container:e,transformLayer:r,contentLayer:a,transform:i}}catch(e){return console.error("Failed to create canvas:",e),null}}class L{constructor(){this.listeners=new Map}setEmitInterceptor(e){this.emitInterceptor=e}on(e,t){this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t)}off(e,t){const n=this.listeners.get(e);n&&n.delete(t)}emit(e,t){this.emitInterceptor?.(e,t);const n=this.listeners.get(e);n&&n.forEach(n=>{try{n(t)}catch(t){console.error(`Error in event handler for "${String(e)}":`,t)}})}removeAllListeners(){this.listeners.clear()}}function R(e,t){const n=t.transform;e.emit("transform",n),e.emit("zoom",n.scale),e.emit("pan",{x:n.translateX,y:n.translateY})}const P=300,$=5;function Y(e,t){if(!e?.getBounds)return t;try{const n=e.getBounds(),r=n.width*n.height;return t*(r/2073600)**1}catch(e){return console.warn("Failed to calculate adaptive zoom speed, using base speed:",e),t}}function X(e,t,n){const r=n?.textEditModeEnabled??!1;function a(n){if(!(n instanceof KeyboardEvent))return;if("canvas"===t.bindKeyboardEventsTo&&document.activeElement!==e.container)return;if(u(t,"sendKeyboardEventsToParent",()=>{r&&!function(e){return!("0"!==e.key||!e.ctrlKey&&!e.metaKey)||!("+"!==e.key||!e.ctrlKey&&!e.metaKey)||!("-"!==e.key||!e.ctrlKey&&!e.metaKey)}(n)||(!function(e,t){if("undefined"==typeof window||!window.parent)return;const n=t.name||"markupCanvas";window.parent.postMessage({source:"markup-canvas",action:"keyboardShortcut",data:{key:e.key,ctrlKey:e.ctrlKey,metaKey:e.metaKey,shiftKey:e.shiftKey,altKey:e.altKey,code:e.code},timestamp:Date.now(),canvasName:n},"*")}(n,t),n.preventDefault())}),t.sendKeyboardEventsToParent)return;let a=!1;const o={};switch(n.key){case"ArrowLeft":if(r)return;o.translateX=e.transform.translateX+t.keyboardPanStep,a=!0;break;case"ArrowRight":if(r)return;o.translateX=e.transform.translateX-t.keyboardPanStep,a=!0;break;case"ArrowUp":if(r)return;o.translateY=e.transform.translateY+t.keyboardPanStep,a=!0;break;case"ArrowDown":if(r)return;o.translateY=e.transform.translateY-t.keyboardPanStep,a=!0;break;case"=":case"+":if(r)return;{const n=t.enableAdaptiveSpeed?Y(e,t.keyboardZoomStep):t.keyboardZoomStep;e.zoomIn(n),a=!0}break;case"-":if(r)return;{const n=t.enableAdaptiveSpeed?Y(e,t.keyboardZoomStep):t.keyboardZoomStep;e.zoomOut(n),a=!0}break;case"0":n.ctrlKey?(e.resetView&&e.resetView(),a=!0):n.metaKey&&(e.resetViewToCenter&&e.resetViewToCenter(),a=!0);break;case"g":case"G":!n.shiftKey||n.ctrlKey||n.metaKey||n.altKey||!e.toggleGrid||(e.toggleGrid(),a=!0);break;case"r":case"R":!n.shiftKey||n.metaKey||n.ctrlKey||n.altKey||!e.toggleRulers||(e.toggleRulers(),a=!0)}a&&(n.preventDefault(),Object.keys(o).length>0&&e.updateTransform(o))}const o="canvas"===t.bindKeyboardEventsTo?e.container:document;return o.addEventListener("keydown",a),()=>{o.removeEventListener("keydown",a)}}function I(e,t,n,r,a){n?t.requireSpaceForMouseDrag?e.container.style.cursor=r?"grab":"default":e.container.style.cursor=a?"grabbing":"grab":e.container.style.cursor="default"}function B(e,t,n,r,a){a.setIsDragging(!1),a.setDragButton(-1),I(e,t,n,r,!1)}function Z(e,t,n,r,a,o,i,s,l,c){o&&e.button===i&&B(t,n,r,a,{setIsDragging:c.setIsDragging,setDragButton:c.setDragButton}),r&&0===e.button&&n.enableClickToZoom&&s>0&&function(e,t,n,r,a,o){const i=Date.now()-r,s=e.altKey,l=!n.requireOptionForClickZoom||s;if(i<P&&!a&&!o&&l){e.preventDefault();const r=t.container.getBoundingClientRect(),a=e.clientX-r.left,o=e.clientY-r.top,{clickX:i,clickY:s}=m(t,a,o,n.rulerSize,(e,t)=>({clickX:e,clickY:t})),l=t.canvasToContent(i,s),c=r.width/2,u=r.height/2,d=n.clickZoomLevel,h={scale:d,translateX:c-l.x*d,translateY:u-l.y*d};b(t.transformLayer,t.config,()=>{t.updateTransform(h)})}}(e,t,n,s,l,o),0===e.button&&function(e){e.setMouseDownTime(0),e.setHasDragged(!1)}({setMouseDownTime:c.setMouseDownTime,setHasDragged:c.setHasDragged})}function F(e,t,n=!0){let r=!0,a=!1,o=0,i=0,s=-1,l=!1,c=0,u=0,h=0,m=!1;const g={setIsDragging:e=>{a=e},setDragButton:e=>{s=e},setIsSpacePressed:e=>{l=e},setMouseDownTime:e=>{c=e},setMouseDownX:e=>{u=e},setMouseDownY:e=>{h=e},setHasDragged:e=>{m=e},setLastMouseX:e=>{o=e},setLastMouseY:e=>{i=e}},p=n=>{!function(e,t,n,r,a,o){n.requireSpaceForMouseDrag&&" "===e.key&&(o.setIsSpacePressed(!0),I(t,n,r,!0,a))}(n,e,t,r,a,{setIsSpacePressed:g.setIsSpacePressed})},f=n=>{!function(e,t,n,r,a,o){n.requireSpaceForMouseDrag&&" "===e.key&&(o.setIsSpacePressed(!1),I(t,n,r,!1,a),a&&B(t,n,r,!1,{setIsDragging:o.setIsDragging,setDragButton:o.setDragButton}))}(n,e,t,r,a,{setIsSpacePressed:g.setIsSpacePressed,setIsDragging:g.setIsDragging,setDragButton:g.setDragButton})},b=n=>{!function(e,t,n,r,a,o){const i=0===e.button,s=1===e.button;if(i&&(o.setMouseDownTime(Date.now()),o.setMouseDownX(e.clientX),o.setMouseDownY(e.clientY),o.setHasDragged(!1)),!r)return;(!n.requireSpaceForMouseDrag||a)&&(i&&n.enableLeftDrag||s&&n.enableMiddleDrag)&&(e.preventDefault(),o.setDragButton(e.button),o.setLastMouseX(e.clientX),o.setLastMouseY(e.clientY),I(t,n,r,a,!1))}(n,e,t,r,l,g)},y=n=>{!function(e,t,n,r,a,o,i,s,l,c,u,h){if(i>0){const t=Math.abs(e.clientX-s),i=Math.abs(e.clientY-l);if(t>$||i>$){h.setHasDragged(!0);const e=!n.requireSpaceForMouseDrag||o;!a&&r&&e&&h.setIsDragging(!0)}}if(!a||!r)return;e.preventDefault(),d((...e)=>{const n=e[0];if(!a||!r)return;const o=n.clientX-c,i=n.clientY-u,s={translateX:t.transform.translateX+o,translateY:t.transform.translateY+i};t.updateTransform(s),h.setLastMouseX(n.clientX),h.setLastMouseY(n.clientY)})(e)}(n,e,t,r,a,l,c,u,h,o,i,{setHasDragged:g.setHasDragged,setIsDragging:g.setIsDragging,setLastMouseX:g.setLastMouseX,setLastMouseY:g.setLastMouseY})},v=n=>{Z(n,e,t,r,l,a,s,c,m,{setIsDragging:g.setIsDragging,setDragButton:g.setDragButton,setMouseDownTime:g.setMouseDownTime,setHasDragged:g.setHasDragged})},k=()=>{!function(e,t,n,r,a,o){a&&B(e,t,n,r,o)}(e,t,r,l,a,{setIsDragging:g.setIsDragging,setDragButton:g.setDragButton})};e.container.addEventListener("mousedown",b),document.addEventListener("mousemove",y),document.addEventListener("mouseup",v),e.container.addEventListener("mouseleave",k),t.requireSpaceForMouseDrag&&(document.addEventListener("keydown",p),document.addEventListener("keyup",f)),I(e,t,r,l,a);const w=()=>{e.container.removeEventListener("mousedown",b),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",v),e.container.removeEventListener("mouseleave",k),t.requireSpaceForMouseDrag&&(document.removeEventListener("keydown",p),document.removeEventListener("keyup",f))};return n?{cleanup:w,enable:()=>(r=!0,I(e,t,r,l,a),!0),disable:()=>(r=!1,a&&B(e,t,r,l,{setIsDragging:g.setIsDragging,setDragButton:g.setDragButton}),I(e,t,r,l,a),!0),isEnabled:()=>r}:w}function K(e,t,n,r){try{switch(t){case"zoomIn":e.zoomIn(n);break;case"zoomOut":e.zoomOut(n);break;case"setZoom":{const t=n;if("number"!=typeof t||t<=0)throw new Error(`Invalid zoom level: ${t}. Must be a positive number.`);e.setZoom(t);break}case"resetZoom":e.resetZoom();break;case"panLeft":e.panLeft(n);break;case"panRight":e.panRight(n);break;case"panUp":e.panUp(n);break;case"panDown":e.panDown(n);break;case"fitToScreen":e.fitToScreen();break;case"centerContent":e.centerContent();break;case"panToPoint":{const t=n;e.panToPoint(t.x,t.y);break}case"resetView":e.resetView();break;case"resetViewToCenter":e.resetViewToCenter();break;case"resetToInitial":e.resetToInitial();break;case"toggleRulers":e.toggleRulers();break;case"showRulers":e.showRulers();break;case"hideRulers":e.hideRulers();break;case"toggleGrid":e.toggleGrid();break;case"showGrid":e.showGrid();break;case"hideGrid":e.hideGrid();break;case"updateThemeMode":{const t=n;if("light"!==t&&"dark"!==t)throw new Error(`Invalid theme mode: ${t}`);e.updateThemeMode(t);break}case"toggleThemeMode":{const t="light"===e.getConfig().themeMode?"dark":"light";e.updateThemeMode(t);break}case"updateTransition":{const t=n;if("boolean"!=typeof t)throw new Error(`Invalid transition enabled value: ${t}. Must be a boolean.`);e.updateTransition(t);break}case"toggleTransitionMode":e.toggleTransitionMode();break;default:throw new Error(`Unknown action: ${t}`)}}catch(e){!function(e,t,n){window.postMessage({source:"markup-canvas-error",canvasName:e,action:t,error:n,timestamp:Date.now()},"*")}(r,t,e instanceof Error?e.message:String(e))}}function O(e,t){return{x:(e.clientX+t.clientX)/2,y:(e.clientY+t.clientY)/2}}function V(e,t){const n=e.clientX-t.clientX,r=e.clientY-t.clientY;return Math.sqrt(n*n+r*r)}function A(e,t,n,r){const a=i(n,r,e.transform,t,e.config);return e.updateTransform(a)}function _(e,t,n){e.preventDefault();const r=Array.from(e.touches);d((...e)=>{const r=e[0];if(1===r.length){if(1===n.touches.length){const e=r[0].clientX-n.touches[0].clientX,a=r[0].clientY-n.touches[0].clientY,o={translateX:t.transform.translateX+e,translateY:t.transform.translateY+a};t.updateTransform(o)}}else if(2===r.length){const e=V(r[0],r[1]),a=O(r[0],r[1]);if(n.lastDistance>0){const r=e/n.lastDistance,o=t.container.getBoundingClientRect();let i=a.x-o.left,s=a.y-o.top;const l=function(e,t,n,r){return h(e,t,e=>{const t={...n,x:n.x-e,y:n.y-e};return r(t)})}(t,t.config.rulerSize,{x:i,y:s},e=>e);i=l.x,s=l.y,A(t,r,i,s)}n.lastDistance=e,n.lastCenter=a}n.touches=r})(r)}function G(e){const t={touches:[],lastDistance:0,lastCenter:{}},n=e=>{!function(e,t){e.preventDefault(),t.touches=Array.from(e.touches),2===t.touches.length&&(t.lastDistance=V(t.touches[0],t.touches[1]),t.lastCenter=O(t.touches[0],t.touches[1]))}(e,t)},r=n=>{_(n,e,t)},a=e=>{!function(e,t){t.touches=Array.from(e.touches),t.touches.length<2&&(t.lastDistance=0)}(e,t)};return e.container.addEventListener("touchstart",n,{passive:!1}),e.container.addEventListener("touchmove",r,{passive:!1}),e.container.addEventListener("touchend",a,{passive:!1}),()=>{e.container.removeEventListener("touchstart",n),e.container.removeEventListener("touchmove",r),e.container.removeEventListener("touchend",a)}}function N(e){const t=e.ctrlKey||e.metaKey,n=[0===e.deltaMode,Math.abs(e.deltaY)<50,e.deltaY%1!=0,Math.abs(e.deltaX)>0&&Math.abs(e.deltaY)>0].filter(Boolean).length>=2;return{isTrackpad:n,isMouseWheel:!n,isTrackpadScroll:n&&!t,isTrackpadPinch:n&&t,isZoomGesture:t}}function H(e,t){const n=(e=>d((...t)=>{const n=t[0];if(!n||!e?.updateTransform)return!1;try{const t=e.transform,r=1,a=n.deltaX*r,o=n.deltaY*r,i={scale:t.scale,translateX:t.translateX-a,translateY:t.translateY-o};return f(e.transformLayer,e.config),e.updateTransform(i)}catch(e){return console.error("Error handling trackpad pan:",e),!1}}))(e),r=r=>N(r).isTrackpadScroll?n(r):function(e,t,n){if(!e||"number"!=typeof e.deltaY)return console.warn("Invalid wheel event provided"),!1;if(!t?.updateTransform)return console.warn("Invalid canvas provided to handleWheelEvent"),!1;try{e.preventDefault();const r=t.container.getBoundingClientRect(),a=e.clientX-r.left,o=e.clientY-r.top,{mouseX:i,mouseY:s}=m(t,a,o,n.rulerSize,(e,t)=>({mouseX:e,mouseY:t})),l=n.zoomSpeed,c=N(e);if(!c.isZoomGesture)return!1;let u=n.enableAdaptiveSpeed?Y(t,l):l;if(c.isTrackpadPinch){const e=.05*n.zoomSpeed;u=n.enableAdaptiveSpeed?Y(t,e):e}return A(t,(e.deltaY<0?1:-1)>0?1+u:1/(1+u),i,s)}catch(e){return console.error("Error handling wheel event:",e),!1}}(r,e,t);return e.container.addEventListener("wheel",r,{passive:!1}),()=>{e.container.removeEventListener("wheel",r)}}const q=100,U=1e3,W=1001,j=4,J=4,Q=100,ee=100,te=20,ne=200;function re(e,t){const n=function(e){const t=document.createElement("div");return t.className="canvas-ruler horizontal-ruler",t.style.cssText=`\n\tposition: absolute;\n\ttop: 0;\n\tleft: ${e.rulerSize}px;\n\tright: 0;\n\theight: ${e.rulerSize}px;\n\tbackground: var(--ruler-background-color);\n\tborder-bottom: 1px solid var(--ruler-border-color);\n\tz-index: ${U};\n\tpointer-events: none;\n\tfont-family: ${e.rulerFontFamily};\n\tfont-size: ${e.rulerFontSize}px;\n\tcolor: var(--ruler-text-color);\n\toverflow: hidden;\n  `,t}(t),r=function(e){const t=document.createElement("div");return t.className="canvas-ruler vertical-ruler",t.style.cssText=`\n\tposition: absolute;\n\ttop: ${e.rulerSize}px;\n\tleft: 0;\n\tbottom: 0;\n\twidth: ${e.rulerSize}px;\n\tbackground: var(--ruler-background-color);\n\tborder-right: 1px solid var(--ruler-border-color);\n\tz-index: ${U};\n\tpointer-events: none;\n\tfont-family: ${e.rulerFontFamily};\n\tfont-size: ${e.rulerFontSize}px;\n\tcolor: var(--ruler-text-color);\n\toverflow: hidden;\n  `,t}(t),a=function(e){const t=document.createElement("div");return t.className="canvas-ruler corner-box",t.style.cssText=`\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: ${e.rulerSize}px;\n\t\theight: ${e.rulerSize}px;\n\t\tbackground: var(--ruler-background-color);\n\t\tborder-right: 1px solid var(--ruler-border-color);\n\t\tborder-bottom: 1px solid var(--ruler-border-color);\n\t\tz-index: ${W};\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-family: ${e.rulerFontFamily};\n\t\tfont-size: ${e.rulerFontSize-2}px;\n\t\tcolor: var(--ruler-text-color);\n\t\tpointer-events: none;\n\t`,t.textContent=e.rulerUnits,t}(t),o=t.enableGrid?function(e){const t=document.createElement("div");return t.className="canvas-ruler grid-overlay",t.style.cssText=`\n\t\tposition: absolute;\n\t\ttop: ${e.rulerSize}px;\n\t\tleft: ${e.rulerSize}px;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tpointer-events: none;\n\t\tz-index: ${q};\n\t\tbackground-image: \n\t\t\tlinear-gradient(var(--grid-color) 1px, transparent 1px),\n\t\t\tlinear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\n\t\tbackground-size: 100px 100px;\n\t\topacity: 0.5;\n\t`,t}(t):void 0;return e.appendChild(n),e.appendChild(r),e.appendChild(a),o&&e.appendChild(o),{horizontalRuler:n,verticalRuler:r,cornerBox:a,gridOverlay:o}}function ae(e,t){const n=e/Math.max(5,Math.min(20,t/50)),r=10**Math.floor(Math.log10(n)),a=n/r;let o;return o=a<=1?1:a<=2?2:a<=5?5:10,o*r}function oe(e,t,n,r,a){const o=document.createElement("div");o.className="tick",o.style.cssText=`\n\t\tposition: absolute;\n\t\tleft: ${n}px;\n\t\tbottom: 0;\n\t\twidth: 1px;\n\t\theight: ${j}px;\n\t\tbackground: var(--ruler-tick-color);\n\t`,e.appendChild(o);if(t%Q===0){const r=document.createElement("div");r.style.cssText=`\n\t\t\tposition: absolute;\n\t\t\tleft: ${n}px;\n\t\t\tbottom: ${j+2}px;\n\t\t\tfont-size: ${a.rulerFontSize}px;\n\t\t\tline-height: 1;\n\t\t\tcolor: var(--ruler-text-color);\n\t\t\twhite-space: nowrap;\n\t\t\tpointer-events: none;\n\t\t`,r.textContent=Math.round(t).toString(),e.appendChild(r)}}function ie(e,t,n,r,a){const o=document.createElement("div");o.className="tick",o.style.cssText=`\n\t\tposition: absolute;\n\t\ttop: ${n}px;\n\t\tright: 0;\n\t\twidth: ${J}px;\n\t\theight: 1px;\n\t\tbackground: var(--ruler-tick-color);\n\t`,e.appendChild(o);if(t%Q===0){const r=document.createElement("div");r.style.cssText=`\n\t\t\tposition: absolute;\n\t\t\ttop: ${n-6}px;\n\t\t\tright: ${J+6}px;\n\t\t\tfont-size: ${a.rulerFontSize}px;\n\t\t\tline-height: 1;\n\t\t\tcolor: var(--ruler-text-color);\n\t\t\twhite-space: nowrap;\n\t\t\tpointer-events: none;\n\t\t\ttransform: rotate(-90deg);\n\t\t\ttransform-origin: right center;\n\t\t`,r.textContent=Math.round(t).toString(),e.appendChild(r)}}function se(e,t,n,r,a){const o=e.getBounds(),i=o.scale||1,s=o.translateX||0,l=o.translateY||0,c=o.width-a.rulerSize,u=o.height-a.rulerSize,d=-s/i,h=-l/i,m=h+u/i;!function(e,t,n,r,a,o){const i=r,s=ae(n-t,i),l=document.createDocumentFragment(),c=Math.floor(t/s)*s,u=Math.ceil(n/s)*s;for(let e=c;e<=u;e+=s){const n=(e-t)*a;n>=-50&&n<=i+50&&oe(l,e,n,0,o)}e.innerHTML="",e.appendChild(l)}(t,d,d+c/i,c,i,a),function(e,t,n,r,a,o){const i=r,s=ae(n-t,i),l=document.createDocumentFragment(),c=Math.floor(t/s)*s,u=Math.ceil(n/s)*s;for(let e=c;e<=u;e+=s){const n=(e-t)*a;n>=-50&&n<=i+50&&ie(l,e,n,0,o)}e.innerHTML="",e.appendChild(l)}(n,h,m,u,i,a),r&&function(e,t,n,r){let a=ee*t;for(;a<te;)a*=2;for(;a>ne;)a/=2;e.style.backgroundSize=`${a}px ${a}px`,e.style.backgroundPosition=`${n%a}px ${r%a}px`}(r,i,s,l)}function le(e,t){const n=`light-dark(${t.rulerBackgroundColor}, ${t.rulerBackgroundColorDark})`,r=`light-dark(${t.rulerBorderColor}, ${t.rulerBorderColorDark})`,a=`light-dark(${t.rulerTextColor}, ${t.rulerTextColorDark})`,o=`light-dark(${t.rulerTickColor}, ${t.rulerTickColorDark})`,i=`light-dark(${t.gridColor}, ${t.gridColorDark})`;e.horizontalRuler&&(e.horizontalRuler.style.setProperty("--ruler-background-color",n),e.horizontalRuler.style.setProperty("--ruler-border-color",r),e.horizontalRuler.style.setProperty("--ruler-text-color",a),e.horizontalRuler.style.setProperty("--ruler-tick-color",o),e.horizontalRuler.style.colorScheme=t.themeMode),e.verticalRuler&&(e.verticalRuler.style.setProperty("--ruler-background-color",n),e.verticalRuler.style.setProperty("--ruler-border-color",r),e.verticalRuler.style.setProperty("--ruler-text-color",a),e.verticalRuler.style.setProperty("--ruler-tick-color",o),e.verticalRuler.style.colorScheme=t.themeMode),e.cornerBox&&(e.cornerBox.style.setProperty("--ruler-background-color",n),e.cornerBox.style.setProperty("--ruler-border-color",r),e.cornerBox.style.setProperty("--ruler-text-color",a),e.cornerBox.style.colorScheme=t.themeMode),e.gridOverlay&&(e.gridOverlay.style.setProperty("--grid-color",i),e.gridOverlay.style.colorScheme=t.themeMode)}function ce(e,t){if(!e?.container)return console.error("Invalid canvas provided to createRulers"),null;let n,r=null,a=!1;const o=()=>{!a&&n.horizontalRuler&&n.verticalRuler&&se(e,n.horizontalRuler,n.verticalRuler,n.gridOverlay,t)};try{return n=re(e.container,t),r=function(e,t){const n=d(t),r=e.updateTransform;e.updateTransform=function(e){const t=r.call(this,e);return n(),t};const a=d(t);return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a),e.updateTransform=r,n.cleanup(),a.cleanup()}}(e,o),le(n,t),o(),t.showRulers||(n.horizontalRuler.style.display="none",n.verticalRuler.style.display="none",n.cornerBox.style.display="none"),!t.showGrid&&n.gridOverlay&&(n.gridOverlay.style.display="none"),{horizontalRuler:n.horizontalRuler,verticalRuler:n.verticalRuler,cornerBox:n.cornerBox,gridOverlay:n.gridOverlay,update:o,updateTheme:e=>{a||le(n,e)},show:()=>{n.horizontalRuler&&(n.horizontalRuler.style.display="block"),n.verticalRuler&&(n.verticalRuler.style.display="block"),n.cornerBox&&(n.cornerBox.style.display="flex")},hide:()=>{n.horizontalRuler&&(n.horizontalRuler.style.display="none"),n.verticalRuler&&(n.verticalRuler.style.display="none"),n.cornerBox&&(n.cornerBox.style.display="none"),n.gridOverlay&&(n.gridOverlay.style.display="none")},toggleGrid:()=>{if(n.gridOverlay){const e="none"!==n.gridOverlay.style.display;n.gridOverlay.style.display=e?"none":"block"}},destroy:()=>{a=!0,r&&r(),n.horizontalRuler?.parentNode&&n.horizontalRuler.parentNode.removeChild(n.horizontalRuler),n.verticalRuler?.parentNode&&n.verticalRuler.parentNode.removeChild(n.verticalRuler),n.cornerBox?.parentNode&&n.cornerBox.parentNode.removeChild(n.cornerBox),n.gridOverlay?.parentNode&&n.gridOverlay.parentNode.removeChild(n.gridOverlay)}}}catch(e){return console.error("Failed to create rulers:",e),null}}return class{constructor(e,t={}){if(this.cleanupCallbacks=[],this.rulers=null,this.dragSetup=null,this.keyboardCleanup=null,this.textEditModeEnabled=!1,this.event=new L,this._isReady=!1,!e)throw new Error("Container element is required");this.config=C(t);const n=z(e,this.config);if(!n)throw new Error("Failed to create canvas");if(this.canvas=n,u(this.config,"enableRulers",()=>{this.rulers=ce(this,this.config),this.cleanupCallbacks.push(()=>{this.rulers&&this.rulers.destroy()})}),M(this.canvas.container,this.config,this.rulers,this.config.themeMode),this.event.setEmitInterceptor((e,t)=>{!function(e,t,n){if("undefined"==typeof window)return;let r=t;"ready"===e&&(r={ready:!0});const a=n.name||"markupCanvas";window.postMessage({source:"markup-canvas",action:e,data:r,timestamp:Date.now(),canvasName:a},"*"),window.parent&&window.parent.postMessage({source:"markup-canvas",action:e,data:r,timestamp:Date.now(),canvasName:a},"*")}(e,t,this.config)}),function(e,t){if("undefined"==typeof window)return;const n=t.name||"markupCanvas",r=window,a={config:{get current(){return e.config},get:e.getConfig.bind(e),update:e.updateConfig.bind(e)},transform:{update:e.updateTransform.bind(e),reset:e.reset.bind(e),resetToInitial:e.resetToInitial.bind(e)},zoom:{get current(){return e.transform.scale||1},set:e.setZoom.bind(e),toPoint:e.zoomToPoint.bind(e),in:e.zoomIn.bind(e),out:e.zoomOut.bind(e),reset:e.resetZoom.bind(e),resetToCenter:e.resetViewToCenter.bind(e),fitToScreen:e.fitToScreen.bind(e)},pan:{left:e.panLeft.bind(e),right:e.panRight.bind(e),up:e.panUp.bind(e),down:e.panDown.bind(e),toPoint:e.panToPoint.bind(e),toCenter:e.centerContent.bind(e)},mouseDrag:{enable:e.enableMouseDrag.bind(e),disable:e.disableMouseDrag.bind(e),isEnabled:e.isMouseDragEnabled.bind(e)},keyboard:{enable:e.enableKeyboard.bind(e),disable:e.disableKeyboard.bind(e),isEnabled:e.isKeyboardEnabled.bind(e),enableTextEditMode:e.enableTextEditMode.bind(e),disableTextEditMode:e.disableTextEditMode.bind(e),isTextEditModeEnabled:e.isTextEditModeEnabled.bind(e)},grid:{toggle:e.toggleGrid.bind(e),show:e.showGrid.bind(e),hide:e.hideGrid.bind(e),isVisible:e.isGridVisible.bind(e)},rulers:{toggle:e.toggleRulers.bind(e),show:e.showRulers.bind(e),hide:e.hideRulers.bind(e),isVisible:e.areRulersVisible.bind(e)},canvas:{canvasToContent:e.canvasToContent.bind(e),getVisibleArea:e.getVisibleArea.bind(e),isPointVisible:e.isPointVisible.bind(e),getBounds:e.getBounds.bind(e)},theme:{get current(){return e.config.themeMode},update:e.updateThemeMode.bind(e),toggle:e.toggleThemeMode.bind(e)},transition:{get current(){return e.config.enableTransition},set:e.updateTransition.bind(e),toggle:e.toggleTransitionMode.bind(e)},event:e.event,lifecycle:{cleanup:e.cleanup.bind(e),destroy:e.destroy.bind(e)},state:{get isReady(){return e.isReady},get isTransforming(){return e.isTransforming},get visibleBounds(){return e.visibleBounds},get transform(){return e.transform}}};r[n]=a,r.__markupCanvasInstances||(r.__markupCanvasInstances=new Map),r.__markupCanvasInstances.set(n,a)}(this,this.config),this.config.enablePostMessageAPI){const e=function(e){const t=t=>{const n=t.data;if(!["markup-canvas","application"].includes(n.source))return;const r=e.config.name||"markupCanvas";if(n.canvasName!==r)return;const a=n.action,o=n.data;K(e,a,o,r)};return"undefined"!=typeof window&&window.addEventListener("message",t),()=>{"undefined"!=typeof window&&window.removeEventListener("message",t)}}(this);this.cleanupCallbacks.push(e)}this.setupEventHandlers(),this._isReady=!0,this.event.emit("ready",this)}setupEventHandlers(){try{u(this.config,"enableZoom",()=>{const e=H(this,this.config);this.cleanupCallbacks.push(e)}),(this.config.enablePan||this.config.enableClickToZoom)&&(this.dragSetup=F(this,this.config,!0),this.cleanupCallbacks.push(this.dragSetup.cleanup)),u(this.config,"enableKeyboard",()=>{const e=X(this,this.config,{textEditModeEnabled:this.textEditModeEnabled});this.keyboardCleanup=e,this.cleanupCallbacks.push(e)}),u(this.config,"enableTouch",()=>{const e=G(this);this.cleanupCallbacks.push(e)})}catch(e){throw console.error("Failed to set up event handlers:",e),this.cleanup(),e}}get container(){return this.canvas.container}get transformLayer(){return this.canvas.transformLayer}get contentLayer(){return this.canvas.contentLayer}get transform(){return this.canvas.transform}get isReady(){return this._isReady}get isTransforming(){return this.dragSetup?.isEnabled()||!1}get visibleBounds(){return s(this)}getBounds(){return p(this.canvas,this.config)}updateTransform(e){const t=T(this.canvas,e);return t&&R(this.event,this.canvas),t}reset(){const e=T(this.canvas,{scale:1,translateX:0,translateY:0});return e&&R(this.event,this.canvas),e}resetToInitial(){const e=(t=this.canvas,n=this.transformLayer,r=this.config,b(n,r,()=>h(t,r.rulerSize,e=>{const n=r.initialZoom??1,a=r.initialPan??{x:0,y:0},o=-1*e,i={scale:n,translateX:a.x+o,translateY:a.y+o};return T(t,i)})));var t,n,r;return e&&R(this.event,this.canvas),e}setZoom(e){return function(e,t,n,r,a){return b(t,n,()=>l(n,t=>{const n=t(a),o=S(e);return r(o.x,o.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this),e)}canvasToContent(t,r){return e(t,r,n(this.canvas.transform.scale,this.canvas.transform.translateX,this.canvas.transform.translateY))}zoomToPoint(e,t,n){const r=function(e,t,n,r,a,o){return b(t,n,()=>{const t=i(r,a,e.transform,o/e.transform.scale,n);return T(e,t)})}(this.canvas,this.transformLayer,this.config,e,t,n);return r&&R(this.event,this.canvas),r}resetView(){return e=this.canvas,t=this.transformLayer,n=this.config,b(t,n,()=>h(e,n.rulerSize,t=>T(e,{scale:1,translateX:-1*t,translateY:-1*t})));var e,t,n}resetViewToCenter(){return function(e,t,n,r){return b(t,n,()=>l(n,t=>{const n=t(1),a=S(e);return r(a.x,a.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this))}panLeft(e){return v(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&v(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}panRight(e){return k(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&k(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}panUp(e){return w(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&w(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}panDown(e){return y(this.canvas,this.config,this.updateTransform.bind(this))||!!e&&y(this.canvas,{...this.config,keyboardPanStep:e},this.updateTransform.bind(this))}zoomIn(e=.5){return function(e,t,n,r,a=.5){return b(t,n,()=>l(n,t=>{const n=t(e.transform.scale*(1+a)),o=S(e);return r(o.x,o.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this),e)}zoomOut(e=.5){return function(e,t,n,r,a=.5){return b(t,n,()=>l(n,t=>{const n=t(e.transform.scale*(1-a)),o=S(e);return r(o.x,o.y,n)}))}(this,this.transformLayer,this.config,this.zoomToPoint.bind(this),e)}resetZoom(){return this.resetViewToCenter()}enableMouseDrag(){return this.dragSetup?.enable()??!1}disableMouseDrag(){return this.dragSetup?.disable()??!1}isMouseDragEnabled(){return this.dragSetup?.isEnabled()??!1}enableKeyboard(){return this.keyboardCleanup||(this.keyboardCleanup=X(this,this.config,{textEditModeEnabled:this.textEditModeEnabled}),this.cleanupCallbacks.push(this.keyboardCleanup)),!0}disableKeyboard(){return!!this.keyboardCleanup&&(this.keyboardCleanup(),this.keyboardCleanup=null,!0)}isKeyboardEnabled(){return null!==this.keyboardCleanup}enableTextEditMode(){if(this.textEditModeEnabled)return!0;if(this.textEditModeEnabled=!0,this.keyboardCleanup){const e=this.cleanupCallbacks.indexOf(this.keyboardCleanup);e>-1&&this.cleanupCallbacks.splice(e,1),this.keyboardCleanup(),this.keyboardCleanup=X(this,this.config,{textEditModeEnabled:!0}),this.cleanupCallbacks.push(this.keyboardCleanup)}return!0}disableTextEditMode(){if(!this.textEditModeEnabled)return!0;if(this.textEditModeEnabled=!1,this.keyboardCleanup){const e=this.cleanupCallbacks.indexOf(this.keyboardCleanup);e>-1&&this.cleanupCallbacks.splice(e,1),this.keyboardCleanup(),this.keyboardCleanup=X(this,this.config,{textEditModeEnabled:!1}),this.cleanupCallbacks.push(this.keyboardCleanup)}return!0}isTextEditModeEnabled(){return this.textEditModeEnabled}toggleGrid(){const e=(t=this.rulers,!!t?.toggleGrid&&(t.toggleGrid(),!0));var t;return e&&this.event.emit("gridVisibility",this.isGridVisible()),e}showGrid(){const e=(t=this.rulers,!!t?.gridOverlay&&(t.gridOverlay.style.display="block",!0));var t;return e&&this.event.emit("gridVisibility",!0),e}hideGrid(){const e=(t=this.rulers,!!t?.gridOverlay&&(t.gridOverlay.style.display="none",!0));var t;return e&&this.event.emit("gridVisibility",!1),e}isGridVisible(){return e=this.rulers,!!e?.gridOverlay&&"none"!==e.gridOverlay.style.display;var e}toggleRulers(){const e=function(e,t){if(e)return t()?e.hide():e.show(),!0;return!1}(this.rulers,()=>this.areRulersVisible());return e&&this.event.emit("rulersVisibility",this.areRulersVisible()),e}showRulers(){const e=!!(t=this.rulers)&&(t.show(),!0);var t;return e&&this.event.emit("rulersVisibility",!0),e}hideRulers(){const e=!!(t=this.rulers)&&(t.hide(),!0);var t;return e&&this.event.emit("rulersVisibility",!1),e}areRulersVisible(){return e=this.rulers,!!e?.horizontalRuler&&"none"!==e.horizontalRuler.style.display;var e}centerContent(){return e=this.canvas,t=this.config,n=this.updateTransform.bind(this),b(this.transformLayer,t,()=>{const r=p(e,t),a=(r.width-r.contentWidth*e.transform.scale)/2,o=(r.height-r.contentHeight*e.transform.scale)/2;return n({translateX:a,translateY:o})});var e,t,n}fitToScreen(){return e=this.canvas,t=this.transformLayer,n=this.config,b(t,n,()=>{const t=p(e,n),r=t.width/n.width,a=t.height/n.height,o=l(n,e=>e(.9*Math.min(r,a))),i=n.width*o,s=n.height*o,c=(t.width-i)/2,u=(t.height-s)/2;return T(e,{scale:o,translateX:c,translateY:u})});var e,t,n}getVisibleArea(){return s(this)}isPointVisible(e,t){return function(e,t,n){const r=s(e);return t>=r.x&&t<=r.x+r.width&&n>=r.y&&n<=r.y+r.height}(this,e,t)}panToPoint(e,t){return function(e,t,n,r,a,o){return b(o,t,()=>{const o=p(e,t),i=o.width/2,s=o.height/2,l=i-n*e.transform.scale,c=s-r*e.transform.scale;return a({translateX:l,translateY:c})})}(this.canvas,this.config,e,t,this.updateTransform.bind(this),this.transformLayer)}getConfig(){return{...this.config}}updateConfig(e){this.config=C({...this.config,...e})}updateThemeMode(e){this.config=C({...this.config,themeMode:e}),M(this.canvas.container,this.config,this.rulers,e)}toggleThemeMode(){const e="light"===this.config.themeMode?"dark":"light";return this.updateThemeMode(e),e}updateTransition(e){this.config=C({...this.config,enableTransition:e})}toggleTransitionMode(){const e=function(e){return!e}(this.config.enableTransition);return this.updateTransition(e),e}cleanup(){!function(e){if("undefined"==typeof window)return;const t=e.name||"markupCanvas",n=window;delete n[t],n.__markupCanvasInstances&&n.__markupCanvasInstances.delete(t)}(this.config),this.cleanupCallbacks.forEach(e=>{try{e()}catch(e){console.warn("Error during cleanup:",e)}}),this.cleanupCallbacks=[],this.removeAllListeners()}on(e,t){this.event.on(e,t)}off(e,t){this.event.off(e,t)}emit(e,t){this.event.emit(e,t)}removeAllListeners(){this.event.removeAllListeners()}destroy(){this.cleanup(),window.__markupCanvasTransitionTimeout&&clearTimeout(window.__markupCanvasTransitionTimeout)}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markup-canvas/core",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "High-performance canvas-like container with pan and zoom capabilities",
   "type": "module",
   "main": "dist/markup-canvas.cjs.js",

package/src/lib/MarkupCanvas.ts

@@ -59,9 +59,8 @@ export class MarkupCanvas {
       });
     });
 
-    if (options.themeMode) {
-      updateThemeMode(this.canvas.container, this.config, this.rulers, options.themeMode);
-    }
+    // Always set initial color-scheme
+    updateThemeMode(this.canvas.container, this.config, this.rulers, this.config.themeMode);
 
     // Always bind canvas to window
     this.event.setEmitInterceptor((event, data) => {

package/src/lib/actions/ui/updateThemeMode.ts

@@ -1,5 +1,4 @@
 import { createMarkupCanvasConfig } from "@/lib/config/createMarkupCanvasConfig.js";
-import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig, RulerSystem } from "@/types/index.js";
 
 export function updateThemeMode(
@@ -14,9 +13,8 @@ export function updateThemeMode(
   };
   const updatedConfig = createMarkupCanvasConfig(newConfig);
 
-  // Update canvas background color
-  const backgroundColor = getThemeValue(updatedConfig, "canvasBackgroundColor");
-  canvasContainer.style.backgroundColor = backgroundColor;
+  // Update color-scheme CSS property
+  canvasContainer.style.colorScheme = mode;
 
   // Update rulers if they exist
   if (rulers) {

package/src/lib/canvas/setupCanvasContainer.ts

@@ -1,6 +1,5 @@
 import { checkContainerDimensions } from "@/lib/canvas/checkContainerDimensions";
 import { CANVAS_CONTAINER_CLASS } from "@/lib/constants";
-import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function setupCanvasContainer(container: HTMLElement, config?: Required<MarkupCanvasConfig>): void {
@@ -12,10 +11,12 @@ export function setupCanvasContainer(container: HTMLElement, config?: Required<M
   container.style.cursor = "grab";
   container.style.overscrollBehavior = "none";
 
-  // Apply canvas background color
+  // Apply canvas background color using light-dark() CSS function
   if (config) {
-    const backgroundColor = getThemeValue(config, "canvasBackgroundColor");
+    const backgroundColor = `light-dark(${config.canvasBackgroundColor}, ${config.canvasBackgroundColorDark})`;
     container.style.backgroundColor = backgroundColor;
+    // Set color-scheme to enable light-dark() function
+    container.style.colorScheme = config.themeMode;
   }
 
   if (!container.hasAttribute("tabindex")) {

package/src/lib/events/keyboard/isCanvasShortcut.ts

@@ -2,11 +2,12 @@ export function isCanvasShortcut(event: KeyboardEvent): boolean {
   if (event.key === "0" && (event.ctrlKey || event.metaKey)) {
     return true; // Ctrl+0 or Cmd+0 for reset view
   }
-  if ((event.key === "g" || event.key === "G") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-    return true; // Shift+G for toggle grid
+  if (event.key === "+" && (event.ctrlKey || event.metaKey)) {
+    return true;
   }
-  if ((event.key === "r" || event.key === "R") && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-    return true; // Shift+R for toggle rulers
+  if (event.key === "-" && (event.ctrlKey || event.metaKey)) {
+    return true;
   }
+
   return false;
 }

package/src/lib/rulers/updateRulerTheme.ts

@@ -1,4 +1,3 @@
-import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export interface RulerThemeUpdater {
@@ -9,12 +8,12 @@ export interface RulerThemeUpdater {
 }
 
 export function updateRulerTheme(elements: RulerThemeUpdater, config: Required<MarkupCanvasConfig>): void {
-  // Get theme-aware colors
-  const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-  const borderColor = getThemeValue(config, "rulerBorderColor");
-  const textColor = getThemeValue(config, "rulerTextColor");
-  const tickColor = getThemeValue(config, "rulerTickColor");
-  const gridColor = getThemeValue(config, "gridColor");
+  // Create theme-aware colors using light-dark() CSS function
+  const backgroundColor = `light-dark(${config.rulerBackgroundColor}, ${config.rulerBackgroundColorDark})`;
+  const borderColor = `light-dark(${config.rulerBorderColor}, ${config.rulerBorderColorDark})`;
+  const textColor = `light-dark(${config.rulerTextColor}, ${config.rulerTextColorDark})`;
+  const tickColor = `light-dark(${config.rulerTickColor}, ${config.rulerTickColorDark})`;
+  const gridColor = `light-dark(${config.gridColor}, ${config.gridColorDark})`;
 
   // Update horizontal ruler with CSS variables
   if (elements.horizontalRuler) {
@@ -22,6 +21,7 @@ export function updateRulerTheme(elements: RulerThemeUpdater, config: Required<M
     elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
     elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
     elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
+    elements.horizontalRuler.style.colorScheme = config.themeMode;
   }
 
   // Update vertical ruler with CSS variables
@@ -30,6 +30,7 @@ export function updateRulerTheme(elements: RulerThemeUpdater, config: Required<M
     elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
     elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
     elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
+    elements.verticalRuler.style.colorScheme = config.themeMode;
   }
 
   // Update corner box with CSS variables
@@ -37,10 +38,12 @@ export function updateRulerTheme(elements: RulerThemeUpdater, config: Required<M
     elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
     elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
     elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
+    elements.cornerBox.style.colorScheme = config.themeMode;
   }
 
   // Update grid overlay with CSS variables
   if (elements.gridOverlay) {
     elements.gridOverlay.style.setProperty("--grid-color", gridColor);
+    elements.gridOverlay.style.colorScheme = config.themeMode;
   }
 }