@markup-canvas/react 1.0.6 → 1.0.8

package/README.md

@@ -112,6 +112,8 @@ The `MarkupCanvas` component accepts the following props:
 |------|------|---------|-------------|
 | `enableRulers` | `boolean` | `true` | Show rulers on top and left |
 | `enableGrid` | `boolean` | `false` | Show background grid |
+| `showRulers` | `boolean` | `true` | Initially show rulers (only applies if `enableRulers` is true) |
+| `showGrid` | `boolean` | `false` | Initially show grid (only applies if `enableGrid` is true) |
 | `gridColor` | `string` | `"#e0e0e0"` | Grid line color |
 
 **Ruler Styling**
@@ -121,12 +123,22 @@ The `MarkupCanvas` component accepts the following props:
 | `rulerBackgroundColor` | `string` | `"#f5f5f5"` | Ruler background color |
 | `rulerBorderColor` | `string` | `"#d0d0d0"` | Ruler border color |
 | `rulerTextColor` | `string` | `"#666666"` | Ruler text color |
-| `rulerMajorTickColor` | `string` | `"#666666"` | Major tick mark color |
-| `rulerMinorTickColor` | `string` | `"#999999"` | Minor tick mark color |
+| `rulerTickColor` | `string` | `"#cccccc"` | Tick mark color |
 | `rulerFontSize` | `number` | `12` | Ruler font size in pixels |
 | `rulerFontFamily` | `string` | `"monospace"` | Ruler font family |
 | `rulerUnits` | `string` | `"px"` | Ruler units label |
 
+**Dark Theme Support**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `themeMode` | `"light" \| "dark"` | `"light"` | Current theme mode |
+| `rulerBackgroundColorDark` | `string` | `"rgba(30, 30, 30, 0.95)"` | Dark mode ruler background color |
+| `rulerBorderColorDark` | `string` | `"#444"` | Dark mode ruler border color |
+| `rulerTextColorDark` | `string` | `"#aaa"` | Dark mode ruler text color |
+| `rulerTickColorDark` | `string` | `"#383838"` | Dark mode tick mark color |
+| `gridColorDark` | `string` | `"rgba(255, 255, 255, 0.1)"` | Dark mode grid line color |
+
 **React-Specific Props**
 
 | Prop | Type | Default | Description |
@@ -162,6 +174,7 @@ The `MarkupCanvas` component accepts the following props:
   maxZoom={10}
   gridColor="#e8e8e8"
   rulerBackgroundColor="#fafafa"
+  themeMode="light"
   enableClickToZoom={true}
   clickZoomLevel={2}
   onZoomChange={(zoom) => console.log('Zoom:', zoom)}
@@ -173,6 +186,41 @@ The `MarkupCanvas` component accepts the following props:
 </MarkupCanvas>
 ```
 
+**Theme Switching Example**
+
+```tsx
+import { useRef, useState } from 'react';
+import { MarkupCanvas, type MarkupCanvasRef } from '@markup-canvas/react';
+
+function App() {
+  const canvasRef = useRef<MarkupCanvasRef>(null);
+  const [themeMode, setThemeMode] = useState<'light' | 'dark'>('light');
+
+  const handleThemeToggle = () => {
+    const newMode = themeMode === 'light' ? 'dark' : 'light';
+    setThemeMode(newMode);
+    canvasRef.current?.updateThemeMode(newMode);
+  };
+
+  return (
+    <div>
+      <button onClick={handleThemeToggle}>Toggle Theme</button>
+      
+      <MarkupCanvas
+        ref={canvasRef}
+        width={20000}
+        height={15000}
+        themeMode={themeMode}
+        enableRulers={true}
+        enableGrid={true}
+      >
+        <div>Your content here</div>
+      </MarkupCanvas>
+    </div>
+  );
+}
+```
+
 ### useMarkupCanvas Hook
 
 The `useMarkupCanvas` hook provides convenient access to canvas methods.
@@ -185,13 +233,26 @@ import { MarkupCanvas, type MarkupCanvasRef, useMarkupCanvas } from '@markup-can
 function App() {
   const canvasRef = useRef<MarkupCanvasRef>(null);
 
-  const { initCanvasUtils, zoom, zoomIn, zoomOut, fitToContent, resetZoom } = useMarkupCanvas(canvasRef);
+  const { 
+    initCanvasUtils, 
+    zoom, 
+    zoomIn, 
+    zoomOut, 
+    fitToContent, 
+    resetZoom,
+    themeMode,
+    toggleThemeMode,
+    updateThemeMode,
+  } = useMarkupCanvas(canvasRef);
 
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <button onClick={() => zoomIn()}>Zoom In</button>
       <button onClick={() => zoomOut()}>Zoom Out</button>
       <button onClick={() => fitToContent()}>Fit to Content</button>
+      <button onClick={toggleThemeMode}>
+        Toggle Theme (Current: {themeMode})
+      </button>
       <span>Current zoom: {zoom.toFixed(2)}</span>
       
       <MarkupCanvas
@@ -200,6 +261,7 @@ function App() {
         height={15000}
         enableZoom={true}
         enablePan={true}
+        themeMode={themeMode}
         onReady={initCanvasUtils} // Required for hook to work
       >
         <div style={{ position: 'absolute', top: 100, left: 100 }}>
@@ -211,9 +273,42 @@ function App() {
 }
 ```
 
-## License
+**Hook Return Values**
+
+The `useMarkupCanvas` hook returns an object with the following properties and methods:
+
+| Property/Method | Type | Description |
+|-----------------|------|-------------|
+| `canvas` | `MarkupCanvas \| null` | The canvas instance |
+| `initCanvasUtils` | `(canvas: MarkupCanvas) => void` | Initialize function to pass to `onReady` |
+| `transform` | `Transform` | Current canvas transform |
+| `zoom` | `number` | Current zoom level |
+| `pan` | `{ x: number; y: number }` | Current pan position |
+| `isReady` | `boolean` | Whether canvas is ready |
+| `zoomIn` | `(factor?: number) => void` | Zoom in by factor |
+| `zoomOut` | `(factor?: number) => void` | Zoom out by factor |
+| `resetZoom` | `() => void` | Reset zoom to 100% |
+| `panTo` | `(x: number, y: number) => void` | Pan to specific coordinates |
+| `fitToContent` | `() => void` | Fit content to viewport |
+| `centerContent` | `() => void` | Center content on canvas |
+| `setTransitionMode` | `(enabled: boolean) => void` | Enable/disable transitions |
+| `toggleTransitionMode` | `() => boolean` | Toggle transition mode |
+| `themeMode` | `"light" \| "dark"` | Current theme mode |
+| `updateThemeMode` | `(mode: "light" \| "dark") => void` | Update theme mode |
+| `toggleThemeMode` | `() => "light" \| "dark"` | Toggle between themes |
+| `toggleRulers` | `() => void` | Toggle rulers visibility |
+| `showRulers` | `() => void` | Show rulers |
+| `hideRulers` | `() => void` | Hide rulers |
+| `areRulersVisible` | `() => boolean` | Check if rulers are visible |
+| `showRulersState` | `boolean` | Current rulers visibility state |
+| `toggleGrid` | `() => void` | Toggle grid visibility |
+| `showGrid` | `() => void` | Show grid |
+| `hideGrid` | `() => void` | Hide grid |
+| `isGridVisible` | `() => boolean` | Check if grid is visible |
+| `showGridState` | `boolean` | Current grid visibility state |
+  
+  ## License
 
 **CC BY-NC 4.0** - Creative Commons Attribution-NonCommercial 4.0 International
 
-This project is licensed for non-commercial use only. See the [LICENSE](../../LICENSE) file for details.
-
+This project is licensed for non-commercial use only. See the [LICENSE](../../LICENSE) file for details.

package/dist/hooks/useMarkupCanvas.d.ts

@@ -19,4 +19,11 @@ export declare function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | n
     centerContent: () => void;
     setTransitionMode: (enabled: boolean) => void;
     toggleTransitionMode: () => boolean;
+    themeMode: "light" | "dark";
+    updateThemeMode: (mode: "light" | "dark") => void;
+    toggleThemeMode: () => "light" | "dark";
+    toggleRulers: () => void;
+    areRulersVisible: () => boolean;
+    toggleGrid: () => void;
+    isGridVisible: () => boolean;
 };

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas React
  * React components and hooks for markup-canvas
- * @version 1.0.6
+ * @version 1.0.8
  */
 'use strict';
 
@@ -12,6 +12,7 @@ var react = require('react');
 const MarkupCanvas = react.forwardRef(({ children, className, style, onTransformChange, onZoomChange, onPanChange, onReady, ...options }, ref) => {
     const containerRef = react.useRef(null);
     const [canvasInstance, setCanvasInstance] = react.useState(null);
+    const themeModeRef = react.useRef(options.themeMode);
     react.useImperativeHandle(ref, () => ({
         canvas: canvasInstance,
         zoomIn: (factor = 0.1) => canvasInstance?.zoomIn(factor),
@@ -22,6 +23,15 @@ const MarkupCanvas = react.forwardRef(({ children, className, style, onTransform
         centerContent: () => canvasInstance?.centerContent(),
         getTransform: () => canvasInstance?.transform || { scale: 1, translateX: 0, translateY: 0 },
         getZoom: () => canvasInstance?.transform?.scale || 1,
+        updateThemeMode: (mode) => canvasInstance?.updateThemeMode(mode),
+        toggleRulers: () => canvasInstance?.toggleRulers(),
+        showRulers: () => canvasInstance?.showRulers(),
+        hideRulers: () => canvasInstance?.hideRulers(),
+        areRulersVisible: () => canvasInstance?.areRulersVisible() ?? false,
+        toggleGrid: () => canvasInstance?.toggleGrid(),
+        showGrid: () => canvasInstance?.showGrid(),
+        hideGrid: () => canvasInstance?.hideGrid(),
+        isGridVisible: () => canvasInstance?.isGridVisible() ?? false,
     }), [canvasInstance]);
     const onTransformChangeRef = react.useRef(onTransformChange);
     const onZoomChangeRef = react.useRef(onZoomChange);
@@ -43,11 +53,15 @@ const MarkupCanvas = react.forwardRef(({ children, className, style, onTransform
     const handleReady = react.useCallback((canvas) => {
         onReadyRef.current?.(canvas);
     }, []);
-    const stableOptions = react.useMemo(() => options, Object.values(options));
+    // Separate theme mode from other options
+    const { themeMode, ...configOptions } = options;
+    // Create stable reference for non-theme options using JSON serialization
+    const stableConfigJson = react.useMemo(() => JSON.stringify(configOptions), [configOptions]);
+    // Handle canvas creation with non-theme options
     react.useEffect(() => {
         if (!containerRef.current)
             return;
-        const canvas = new core.MarkupCanvas(containerRef.current, stableOptions);
+        const canvas = new core.MarkupCanvas(containerRef.current, configOptions);
         setCanvasInstance(canvas);
         canvas.on("transform", handleTransformChange);
         canvas.on("zoom", handleZoomChange);
@@ -67,7 +81,14 @@ const MarkupCanvas = react.forwardRef(({ children, className, style, onTransform
             canvas.cleanup();
             setCanvasInstance(null);
         };
-    }, [stableOptions, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    }, [stableConfigJson, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    // Handle theme changes separately without recreating the canvas
+    react.useEffect(() => {
+        if (!canvasInstance || themeMode === themeModeRef.current)
+            return;
+        canvasInstance.updateThemeMode(themeMode || "light");
+        themeModeRef.current = themeMode;
+    }, [canvasInstance, themeMode]);
     return (jsxRuntime.jsx("div", { ref: containerRef, className: className, style: { width: "100%", height: "100%", ...style }, children: children }));
 });
 MarkupCanvas.displayName = "MarkupCanvas";
@@ -78,6 +99,7 @@ function useMarkupCanvas(canvasRef, options = {}) {
     const [zoom, setZoom] = react.useState(1);
     const [pan, setPan] = react.useState({ x: 0, y: 0 });
     const [isReady, setIsReady] = react.useState(false);
+    const [themeMode, setThemeModeState] = react.useState("light");
     const optionsRef = react.useRef(options);
     optionsRef.current = options;
     const handleCanvasInstance = react.useCallback((canvas) => {
@@ -157,6 +179,27 @@ function useMarkupCanvas(canvasRef, options = {}) {
         }
         return false;
     }, [canvasRef]);
+    const updateThemeMode = react.useCallback((mode) => {
+        setThemeModeState(mode);
+        canvasRef.current?.updateThemeMode(mode);
+    }, [canvasRef]);
+    const toggleThemeMode = react.useCallback(() => {
+        const newMode = themeMode === "light" ? "dark" : "light";
+        updateThemeMode(newMode);
+        return newMode;
+    }, [themeMode, updateThemeMode]);
+    const toggleRulers = react.useCallback(() => {
+        canvasRef.current?.toggleRulers();
+    }, [canvasRef]);
+    const areRulersVisible = react.useCallback(() => {
+        return canvasRef.current?.areRulersVisible() ?? false;
+    }, [canvasRef]);
+    const toggleGrid = react.useCallback(() => {
+        canvasRef.current?.toggleGrid();
+    }, [canvasRef]);
+    const isGridVisible = react.useCallback(() => {
+        return canvasRef.current?.isGridVisible() ?? false;
+    }, [canvasRef]);
     return {
         canvas: canvasRef.current?.canvas || null,
         initCanvasUtils: handleCanvasInstance,
@@ -172,6 +215,13 @@ function useMarkupCanvas(canvasRef, options = {}) {
         centerContent,
         setTransitionMode,
         toggleTransitionMode,
+        themeMode,
+        updateThemeMode,
+        toggleThemeMode,
+        toggleRulers,
+        areRulersVisible,
+        toggleGrid,
+        isGridVisible,
     };
 }
 

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/components/MarkupCanvas.tsx","../src/hooks/useMarkupCanvas.ts"],"sourcesContent":[null,null],"names":["forwardRef","useRef","useState","useImperativeHandle","useCallback","useMemo","useEffect","CoreMarkupCanvas","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/components/MarkupCanvas.tsx","../src/hooks/useMarkupCanvas.ts"],"sourcesContent":[null,null],"names":["forwardRef","useRef","useState","useImperativeHandle","useCallback","useMemo","useEffect","CoreMarkupCanvas","_jsx"],"mappings":"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"}

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas React
  * React components and hooks for markup-canvas
- * @version 1.0.6
+ * @version 1.0.8
  */
 import { jsx } from 'react/jsx-runtime';
 import { MarkupCanvas as MarkupCanvas$1 } from '@markup-canvas/core';
@@ -10,6 +10,7 @@ import { forwardRef, useRef, useState, useImperativeHandle, useCallback, useMemo
 const MarkupCanvas = forwardRef(({ children, className, style, onTransformChange, onZoomChange, onPanChange, onReady, ...options }, ref) => {
     const containerRef = useRef(null);
     const [canvasInstance, setCanvasInstance] = useState(null);
+    const themeModeRef = useRef(options.themeMode);
     useImperativeHandle(ref, () => ({
         canvas: canvasInstance,
         zoomIn: (factor = 0.1) => canvasInstance?.zoomIn(factor),
@@ -20,6 +21,15 @@ const MarkupCanvas = forwardRef(({ children, className, style, onTransformChange
         centerContent: () => canvasInstance?.centerContent(),
         getTransform: () => canvasInstance?.transform || { scale: 1, translateX: 0, translateY: 0 },
         getZoom: () => canvasInstance?.transform?.scale || 1,
+        updateThemeMode: (mode) => canvasInstance?.updateThemeMode(mode),
+        toggleRulers: () => canvasInstance?.toggleRulers(),
+        showRulers: () => canvasInstance?.showRulers(),
+        hideRulers: () => canvasInstance?.hideRulers(),
+        areRulersVisible: () => canvasInstance?.areRulersVisible() ?? false,
+        toggleGrid: () => canvasInstance?.toggleGrid(),
+        showGrid: () => canvasInstance?.showGrid(),
+        hideGrid: () => canvasInstance?.hideGrid(),
+        isGridVisible: () => canvasInstance?.isGridVisible() ?? false,
     }), [canvasInstance]);
     const onTransformChangeRef = useRef(onTransformChange);
     const onZoomChangeRef = useRef(onZoomChange);
@@ -41,11 +51,15 @@ const MarkupCanvas = forwardRef(({ children, className, style, onTransformChange
     const handleReady = useCallback((canvas) => {
         onReadyRef.current?.(canvas);
     }, []);
-    const stableOptions = useMemo(() => options, Object.values(options));
+    // Separate theme mode from other options
+    const { themeMode, ...configOptions } = options;
+    // Create stable reference for non-theme options using JSON serialization
+    const stableConfigJson = useMemo(() => JSON.stringify(configOptions), [configOptions]);
+    // Handle canvas creation with non-theme options
     useEffect(() => {
         if (!containerRef.current)
             return;
-        const canvas = new MarkupCanvas$1(containerRef.current, stableOptions);
+        const canvas = new MarkupCanvas$1(containerRef.current, configOptions);
         setCanvasInstance(canvas);
         canvas.on("transform", handleTransformChange);
         canvas.on("zoom", handleZoomChange);
@@ -65,7 +79,14 @@ const MarkupCanvas = forwardRef(({ children, className, style, onTransformChange
             canvas.cleanup();
             setCanvasInstance(null);
         };
-    }, [stableOptions, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    }, [stableConfigJson, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    // Handle theme changes separately without recreating the canvas
+    useEffect(() => {
+        if (!canvasInstance || themeMode === themeModeRef.current)
+            return;
+        canvasInstance.updateThemeMode(themeMode || "light");
+        themeModeRef.current = themeMode;
+    }, [canvasInstance, themeMode]);
     return (jsx("div", { ref: containerRef, className: className, style: { width: "100%", height: "100%", ...style }, children: children }));
 });
 MarkupCanvas.displayName = "MarkupCanvas";
@@ -76,6 +97,7 @@ function useMarkupCanvas(canvasRef, options = {}) {
     const [zoom, setZoom] = useState(1);
     const [pan, setPan] = useState({ x: 0, y: 0 });
     const [isReady, setIsReady] = useState(false);
+    const [themeMode, setThemeModeState] = useState("light");
     const optionsRef = useRef(options);
     optionsRef.current = options;
     const handleCanvasInstance = useCallback((canvas) => {
@@ -155,6 +177,27 @@ function useMarkupCanvas(canvasRef, options = {}) {
         }
         return false;
     }, [canvasRef]);
+    const updateThemeMode = useCallback((mode) => {
+        setThemeModeState(mode);
+        canvasRef.current?.updateThemeMode(mode);
+    }, [canvasRef]);
+    const toggleThemeMode = useCallback(() => {
+        const newMode = themeMode === "light" ? "dark" : "light";
+        updateThemeMode(newMode);
+        return newMode;
+    }, [themeMode, updateThemeMode]);
+    const toggleRulers = useCallback(() => {
+        canvasRef.current?.toggleRulers();
+    }, [canvasRef]);
+    const areRulersVisible = useCallback(() => {
+        return canvasRef.current?.areRulersVisible() ?? false;
+    }, [canvasRef]);
+    const toggleGrid = useCallback(() => {
+        canvasRef.current?.toggleGrid();
+    }, [canvasRef]);
+    const isGridVisible = useCallback(() => {
+        return canvasRef.current?.isGridVisible() ?? false;
+    }, [canvasRef]);
     return {
         canvas: canvasRef.current?.canvas || null,
         initCanvasUtils: handleCanvasInstance,
@@ -170,6 +213,13 @@ function useMarkupCanvas(canvasRef, options = {}) {
         centerContent,
         setTransitionMode,
         toggleTransitionMode,
+        themeMode,
+        updateThemeMode,
+        toggleThemeMode,
+        toggleRulers,
+        areRulersVisible,
+        toggleGrid,
+        isGridVisible,
     };
 }
 

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/MarkupCanvas.tsx","../src/hooks/useMarkupCanvas.ts"],"sourcesContent":[null,null],"names":["CoreMarkupCanvas","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/MarkupCanvas.tsx","../src/hooks/useMarkupCanvas.ts"],"sourcesContent":[null,null],"names":["CoreMarkupCanvas","_jsx"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -9,6 +9,15 @@ export interface MarkupCanvasRef {
     centerContent: () => void;
     getTransform: () => Transform;
     getZoom: () => number;
+    updateThemeMode: (mode: "light" | "dark") => void;
+    toggleRulers: () => void;
+    showRulers: () => void;
+    hideRulers: () => void;
+    areRulersVisible: () => boolean;
+    toggleGrid: () => void;
+    showGrid: () => void;
+    hideGrid: () => void;
+    isGridVisible: () => boolean;
 }
 export interface UseMarkupCanvasOptions {
     onTransformChange?: (transform: Transform) => void;
@@ -28,3 +37,35 @@ export interface CanvasEventHandlers {
     onTransform?: (transform: Transform) => void;
     onReady?: (canvas: CoreMarkupCanvas) => void;
 }
+export interface UseMarkupCanvasReturn {
+    canvas: CoreMarkupCanvas | null;
+    initCanvasUtils: (canvas: CoreMarkupCanvas) => void;
+    transform: Transform;
+    zoom: number;
+    pan: {
+        x: number;
+        y: number;
+    };
+    isReady: boolean;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    resetZoom: () => void;
+    panTo: (x: number, y: number) => void;
+    fitToContent: () => void;
+    centerContent: () => void;
+    setTransitionMode: (enabled: boolean) => void;
+    toggleTransitionMode: () => boolean;
+    themeMode: "light" | "dark";
+    updateThemeMode: (mode: "light" | "dark") => void;
+    toggleThemeMode: () => "light" | "dark";
+    toggleRulers: () => void;
+    showRulers: () => void;
+    hideRulers: () => void;
+    areRulersVisible: () => boolean;
+    showRulersState: boolean;
+    toggleGrid: () => void;
+    showGrid: () => void;
+    hideGrid: () => void;
+    isGridVisible: () => boolean;
+    showGridState: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markup-canvas/react",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React components and hooks for markup-canvas",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "@markup-canvas/core": "^1.0.6"
+    "@markup-canvas/core": "1.0.8"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.6",
@@ -33,7 +33,7 @@
     "@types/react-dom": "^19.2.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "rollup": "^4.52.4",
+    "rollup": "^4.52.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^5.9.3",
     "tslib": "^2.8.1"

package/src/components/MarkupCanvas.tsx

@@ -26,6 +26,7 @@ export const MarkupCanvas = forwardRef<MarkupCanvasRef, MarkupCanvasProps>(
   ({ children, className, style, onTransformChange, onZoomChange, onPanChange, onReady, ...options }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [canvasInstance, setCanvasInstance] = useState<CoreMarkupCanvas | null>(null);
+    const themeModeRef = useRef<"light" | "dark" | undefined>(options.themeMode);
 
     useImperativeHandle(
       ref,
@@ -39,6 +40,15 @@ export const MarkupCanvas = forwardRef<MarkupCanvasRef, MarkupCanvasProps>(
         centerContent: () => canvasInstance?.centerContent(),
         getTransform: () => canvasInstance?.transform || { scale: 1, translateX: 0, translateY: 0 },
         getZoom: () => canvasInstance?.transform?.scale || 1,
+        updateThemeMode: (mode: "light" | "dark") => canvasInstance?.updateThemeMode(mode),
+        toggleRulers: () => canvasInstance?.toggleRulers(),
+        showRulers: () => canvasInstance?.showRulers(),
+        hideRulers: () => canvasInstance?.hideRulers(),
+        areRulersVisible: () => canvasInstance?.areRulersVisible() ?? false,
+        toggleGrid: () => canvasInstance?.toggleGrid(),
+        showGrid: () => canvasInstance?.showGrid(),
+        hideGrid: () => canvasInstance?.hideGrid(),
+        isGridVisible: () => canvasInstance?.isGridVisible() ?? false,
       }),
       [canvasInstance]
     );
@@ -69,12 +79,17 @@ export const MarkupCanvas = forwardRef<MarkupCanvasRef, MarkupCanvasProps>(
       onReadyRef.current?.(canvas);
     }, []);
 
-    const stableOptions = useMemo(() => options, Object.values(options));
+    // Separate theme mode from other options
+    const { themeMode, ...configOptions } = options;
 
+    // Create stable reference for non-theme options using JSON serialization
+    const stableConfigJson = useMemo(() => JSON.stringify(configOptions), [configOptions]);
+
+    // Handle canvas creation with non-theme options
     useEffect(() => {
       if (!containerRef.current) return;
 
-      const canvas = new CoreMarkupCanvas(containerRef.current, stableOptions);
+      const canvas = new CoreMarkupCanvas(containerRef.current, configOptions as MarkupCanvasConfig);
       setCanvasInstance(canvas);
 
       canvas.on("transform", handleTransformChange);
@@ -98,7 +113,15 @@ export const MarkupCanvas = forwardRef<MarkupCanvasRef, MarkupCanvasProps>(
         canvas.cleanup();
         setCanvasInstance(null);
       };
-    }, [stableOptions, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    }, [stableConfigJson, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+
+    // Handle theme changes separately without recreating the canvas
+    useEffect(() => {
+      if (!canvasInstance || themeMode === themeModeRef.current) return;
+
+      canvasInstance.updateThemeMode(themeMode || "light");
+      themeModeRef.current = themeMode;
+    }, [canvasInstance, themeMode]);
 
     return (
       <div ref={containerRef} className={className} style={{ width: "100%", height: "100%", ...style }}>

package/src/hooks/useMarkupCanvas.ts

@@ -8,6 +8,7 @@ export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, op
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [isReady, setIsReady] = useState(false);
+  const [themeMode, setThemeModeState] = useState<"light" | "dark">("light");
 
   const optionsRef = useRef(options);
   optionsRef.current = options;
@@ -120,6 +121,36 @@ export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, op
     return false;
   }, [canvasRef]);
 
+  const updateThemeMode = useCallback(
+    (mode: "light" | "dark") => {
+      setThemeModeState(mode);
+      canvasRef.current?.updateThemeMode(mode);
+    },
+    [canvasRef]
+  );
+
+  const toggleThemeMode = useCallback(() => {
+    const newMode = themeMode === "light" ? "dark" : "light";
+    updateThemeMode(newMode);
+    return newMode;
+  }, [themeMode, updateThemeMode]);
+
+  const toggleRulers = useCallback(() => {
+    canvasRef.current?.toggleRulers();
+  }, [canvasRef]);
+
+  const areRulersVisible = useCallback(() => {
+    return canvasRef.current?.areRulersVisible() ?? false;
+  }, [canvasRef]);
+
+  const toggleGrid = useCallback(() => {
+    canvasRef.current?.toggleGrid();
+  }, [canvasRef]);
+
+  const isGridVisible = useCallback(() => {
+    return canvasRef.current?.isGridVisible() ?? false;
+  }, [canvasRef]);
+
   return {
     canvas: canvasRef.current?.canvas || null,
     initCanvasUtils: handleCanvasInstance,
@@ -135,5 +166,12 @@ export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, op
     centerContent,
     setTransitionMode,
     toggleTransitionMode,
+    themeMode,
+    updateThemeMode,
+    toggleThemeMode,
+    toggleRulers,
+    areRulersVisible,
+    toggleGrid,
+    isGridVisible,
   };
 }

package/src/types/index.ts

@@ -10,6 +10,15 @@ export interface MarkupCanvasRef {
   centerContent: () => void;
   getTransform: () => Transform;
   getZoom: () => number;
+  updateThemeMode: (mode: "light" | "dark") => void;
+  toggleRulers: () => void;
+  showRulers: () => void;
+  hideRulers: () => void;
+  areRulersVisible: () => boolean;
+  toggleGrid: () => void;
+  showGrid: () => void;
+  hideGrid: () => void;
+  isGridVisible: () => boolean;
 }
 
 export interface UseMarkupCanvasOptions {
@@ -25,3 +34,33 @@ export interface CanvasEventHandlers {
   onTransform?: (transform: Transform) => void;
   onReady?: (canvas: CoreMarkupCanvas) => void;
 }
+
+export interface UseMarkupCanvasReturn {
+  canvas: CoreMarkupCanvas | null;
+  initCanvasUtils: (canvas: CoreMarkupCanvas) => void;
+  transform: Transform;
+  zoom: number;
+  pan: { x: number; y: number };
+  isReady: boolean;
+  zoomIn: (factor?: number) => void;
+  zoomOut: (factor?: number) => void;
+  resetZoom: () => void;
+  panTo: (x: number, y: number) => void;
+  fitToContent: () => void;
+  centerContent: () => void;
+  setTransitionMode: (enabled: boolean) => void;
+  toggleTransitionMode: () => boolean;
+  themeMode: "light" | "dark";
+  updateThemeMode: (mode: "light" | "dark") => void;
+  toggleThemeMode: () => "light" | "dark";
+  toggleRulers: () => void;
+  showRulers: () => void;
+  hideRulers: () => void;
+  areRulersVisible: () => boolean;
+  showRulersState: boolean;
+  toggleGrid: () => void;
+  showGrid: () => void;
+  hideGrid: () => void;
+  isGridVisible: () => boolean;
+  showGridState: boolean;
+}