/** * Static markup for misc floating popups that live above the canvas. * * All pure DOM. Caller wires every ID via document.getElementById / * el.querySelector after appending. */ import { TOOL_SHORTCUTS } from '../tool-shortcuts.js'; /** Keyboard-shortcuts popover. */ export function shortcutsPopupHTML() { return `
Editor Shortcuts
Tools
V Move
H Hand (hold Space temporarily)
Arrow Move 1 px (Shift = 10 px)
T Text
B Brush
E Eraser
${TOOL_SHORTCUTS.clone} Clone Stamp (Alt-click = set source)
L Lasso
W Wand
${TOOL_SHORTCUTS.marquee} Marquee
C Crop
Edit
Ctrl+Z Undo
Ctrl+Shift+Z Redo
Ctrl+S Save
Ctrl+Shift+S Save to Gallery
Ctrl+Alt+J New Layer
Ctrl+Alt+G Clipping Mask
Ctrl+Alt+T Free Transform
Ctrl+Shift+T Canvas size…
Selection
Ctrl+A Select All
Ctrl+D Deselect
Ctrl+C Copy
Ctrl+X Cut
Ctrl+J Copy selection to layer / duplicate layer
Delete Delete pixels
Esc Cancel selection / crop
Brush / Mask
[ Brush size −
] Brush size +
Drag tolerance slider → live wand retune
Press ? or click the keyboard icon to toggle.
`; } /** * History panel — sidebar listing all undo entries. * @param {string} historyIcon Inline SVG markup for the title icon. */ export function historyPanelHTML(historyIcon) { return `
${historyIcon} History
`; } /** * Empty-canvas size-prompt modal — body markup (caller controls show / * hide and wires the Cancel / Create buttons). */ export function canvasSizePromptHTML() { return `

New project

Resolution templates
Custom size
×
Anchor
${[['0,0','Top left'],['0.5,0','Top'],['1,0','Top right'],['0,0.5','Left'],['0.5,0.5','Center'],['1,0.5','Right'],['0,1','Bottom left'],['0.5,1','Bottom'],['1,1','Bottom right']].map(([value, label], index) => ``).join('')}

Pixels, or type a ratio like 3x5 / 16:9 in either field.

`; }