Refactor CanvasView: externalize styles and tooltips

Moved inline CSS from CanvasView.js to a dedicated canvas_view.css file and added dynamic stylesheet loading. Extracted tooltip and shortcut HTML into separate template files and implemented a ResourceManager utility for loading stylesheets and templates. Updated CanvasInteractions.js and CanvasView.js to use the new resource management and template loading approach, improving maintainability and modularity.

js/templates/clipspace_clipboard_tooltip.html

@@ -0,0 +1,13 @@
+<h4>📋 ComfyUI Clipspace Mode</h4>
+<table>
+    <tr><td><kbd>Ctrl + C</kbd></td><td>Copy selected layers to internal clipboard + <strong>ComfyUI Clipspace</strong> as flattened image</td></tr>
+    <tr><td><kbd>Ctrl + V</kbd></td><td><strong>Priority:</strong></td></tr>
+    <tr><td></td><td>1️⃣ Internal clipboard (copied layers)</td></tr>
+    <tr><td></td><td>2️⃣ ComfyUI Clipspace (workflow images)</td></tr>
+    <tr><td></td><td>3️⃣ System clipboard (fallback)</td></tr>
+    <tr><td><kbd>Paste Image</kbd></td><td>Same as Ctrl+V but respects fit_on_add setting</td></tr>
+    <tr><td><kbd>Drag & Drop</kbd></td><td>Load images directly from files</td></tr>
+</table>
+<div style="margin-top: 8px; padding: 6px; background: rgba(0,0,0,0.2); border-radius: 4px; font-size: 11px;">
+    💡 <strong>Best for:</strong> ComfyUI workflow integration and node-to-node image transfer
+</div>

js/templates/mask_shortcuts.html

@@ -0,0 +1,9 @@
+<h4>Mask Mode</h4>
+<table>
+    <tr><td><kbd>Click + Drag</kbd></td><td>Paint on the mask</td></tr>
+    <tr><td><kbd>Middle Mouse Button + Drag</kbd></td><td>Pan canvas view</td></tr>
+    <tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
+    <tr><td><strong>Brush Controls</strong></td><td>Use sliders to control brush <strong>Size</strong>, <strong>Strength</strong>, and <strong>Hardness</strong></td></tr>
+    <tr><td><strong>Clear Mask</strong></td><td>Remove the entire mask</td></tr>
+    <tr><td><strong>Exit Mode</strong></td><td>Click the "Draw Mask" button again</td></tr>
+</table>

js/templates/standard_shortcuts.html

@@ -0,0 +1,40 @@
+<h4>Canvas Control</h4>
+<table>
+    <tr><td><kbd>Click + Drag</kbd></td><td>Pan canvas view</td></tr>
+    <tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
+    <tr><td><kbd>Shift + Click (background)</kbd></td><td>Start resizing canvas area</td></tr>
+    <tr><td><kbd>Shift + Ctrl + Click</kbd></td><td>Start moving entire canvas</td></tr>
+    <tr><td><kbd>Single Click (background)</kbd></td><td>Deselect all layers</td></tr>
+</table>
+
+<h4>Clipboard & I/O</h4>
+<table>
+    <tr><td><kbd>Ctrl + C</kbd></td><td>Copy selected layer(s)</td></tr>
+    <tr><td><kbd>Ctrl + V</kbd></td><td>Paste from clipboard (image or internal layers)</td></tr>
+    <tr><td><kbd>Drag & Drop Image File</kbd></td><td>Add image as a new layer</td></tr>
+</table>
+
+<h4>Layer Interaction</h4>
+<table>
+    <tr><td><kbd>Click + Drag</kbd></td><td>Move selected layer(s)</td></tr>
+    <tr><td><kbd>Ctrl + Click</kbd></td><td>Add/Remove layer from selection</td></tr>
+    <tr><td><kbd>Alt + Drag</kbd></td><td>Clone selected layer(s)</td></tr>
+    <tr><td><kbd>Right Click</kbd></td><td>Show blend mode & opacity menu</td></tr>
+    <tr><td><kbd>Mouse Wheel</kbd></td><td>Scale layer (snaps to grid)</td></tr>
+    <tr><td><kbd>Ctrl + Mouse Wheel</kbd></td><td>Fine-scale layer</td></tr>
+    <tr><td><kbd>Shift + Mouse Wheel</kbd></td><td>Rotate layer by 5° steps</td></tr>
+    <tr><td><kbd>Shift + Ctrl + Mouse Wheel</kbd></td><td>Snap rotation to 5° increments</td></tr>
+    <tr><td><kbd>Arrow Keys</kbd></td><td>Nudge layer by 1px</td></tr>
+    <tr><td><kbd>Shift + Arrow Keys</kbd></td><td>Nudge layer by 10px</td></tr>
+    <tr><td><kbd>[</kbd> or <kbd>]</kbd></td><td>Rotate by 1°</td></tr>
+    <tr><td><kbd>Shift + [</kbd> or <kbd>]</kbd></td><td>Rotate by 10°</td></tr>
+    <tr><td><kbd>Delete</kbd></td><td>Delete selected layer(s)</td></tr>
+</table>
+
+<h4>Transform Handles (on selected layer)</h4>
+<table>
+    <tr><td><kbd>Drag Corner/Side</kbd></td><td>Resize layer</td></tr>
+    <tr><td><kbd>Drag Rotation Handle</kbd></td><td>Rotate layer</td></tr>
+    <tr><td><kbd>Hold Shift</kbd></td><td>Keep aspect ratio / Snap rotation to 15°</td></tr>
+    <tr><td><kbd>Hold Ctrl</kbd></td><td>Snap to grid</td></tr>
+</table>

js/templates/system_clipboard_tooltip.html

@@ -0,0 +1,16 @@
+<h4>📋 System Clipboard Mode</h4>
+<table>
+    <tr><td><kbd>Ctrl + C</kbd></td><td>Copy selected layers to internal clipboard + <strong>system clipboard</strong> as flattened image</td></tr>
+    <tr><td><kbd>Ctrl + V</kbd></td><td><strong>Priority:</strong></td></tr>
+    <tr><td></td><td>1️⃣ Internal clipboard (copied layers)</td></tr>
+    <tr><td></td><td>2️⃣ System clipboard (images, screenshots)</td></tr>
+    <tr><td></td><td>3️⃣ System clipboard (file paths, URLs)</td></tr>
+    <tr><td><kbd>Paste Image</kbd></td><td>Same as Ctrl+V but respects fit_on_add setting</td></tr>
+    <tr><td><kbd>Drag & Drop</kbd></td><td>Load images directly from files</td></tr>
+</table>
+<div style="margin-top: 8px; padding: 6px; background: rgba(255,165,0,0.2); border: 1px solid rgba(255,165,0,0.4); border-radius: 4px; font-size: 11px;">
+    ⚠️ <strong>Security Note:</strong> "Paste Image" button for external images may not work due to browser security restrictions. Use Ctrl+V instead or Drag & Drop.
+</div>
+<div style="margin-top: 8px; padding: 6px; background: rgba(0,0,0,0.2); border-radius: 4px; font-size: 11px;">
+    💡 <strong>Best for:</strong> Working with screenshots, copied images, file paths, and urls.
+</div>