@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/build/popups.js

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ */
+
+/** Keyboard-shortcuts popover. */
+export function shortcutsPopupHTML() {
+  return `
+      <div id="ge-shortcuts-handle" style="display:flex;align-items:center;gap:6px;margin:-4px -6px 4px;padding:4px 6px;cursor:grab;user-select:none;touch-action:none;">
+        <span style="display:inline-flex;flex-direction:column;gap:2px;margin-right:2px;opacity:0.35;">
+          <span style="display:block;width:18px;height:2px;border-radius:1px;background:currentColor;"></span>
+          <span style="display:block;width:18px;height:2px;border-radius:1px;background:currentColor;"></span>
+        </span>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.8"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10"/></svg>
+        <strong style="font-size:12px;letter-spacing:0.3px;">Editor Shortcuts</strong>
+        <span style="flex:1"></span>
+        <button id="ge-shortcuts-close" class="ge-btn ge-btn-sm" style="padding:0 6px;height:20px;line-height:1;background:none;border:none;opacity:0.55;cursor:pointer;color:var(--fg);">✖</button>
+      </div>
+      <div class="ge-shortcuts-grid">
+        <div class="ge-shortcuts-col">
+          <h5>Tools</h5>
+          <div><kbd>V</kbd> Move</div>
+          <div><kbd>T</kbd> Transform</div>
+          <div><kbd>B</kbd> Brush</div>
+          <div><kbd>E</kbd> Eraser</div>
+          <div><kbd>K</kbd> Clone Stamp <span style="opacity:0.5">(Alt-click = set source)</span></div>
+          <div><kbd>L</kbd> Lasso</div>
+          <div><kbd>W</kbd> Wand</div>
+          <div><kbd>M</kbd> Inpaint</div>
+          <div><kbd>E</kbd> Eraser</div>
+          <div><kbd>C</kbd> Crop</div>
+          <div><kbd>S</kbd> Sharpen</div>
+        </div>
+        <div class="ge-shortcuts-col">
+          <h5>Edit</h5>
+          <div><kbd>Ctrl</kbd>+<kbd>Z</kbd> Undo</div>
+          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> Redo</div>
+          <div><kbd>Ctrl</kbd>+<kbd>S</kbd> Save</div>
+          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd> Save to Gallery</div>
+          <div><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>J</kbd> New Layer</div>
+          <div><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>T</kbd> Free Transform</div>
+          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> Canvas size…</div>
+        </div>
+        <div class="ge-shortcuts-col">
+          <h5>Selection</h5>
+          <div><kbd>Ctrl</kbd>+<kbd>A</kbd> Select All</div>
+          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> Deselect</div>
+          <div><kbd>Ctrl</kbd>+<kbd>C</kbd> Copy to layer</div>
+          <div><kbd>Ctrl</kbd>+<kbd>X</kbd> Cut lasso</div>
+          <div><kbd>Ctrl</kbd>+<kbd>D</kbd> Delete pixels</div>
+          <div><kbd>Esc</kbd> Cancel selection / crop</div>
+        </div>
+        <div class="ge-shortcuts-col">
+          <h5>Brush / Mask</h5>
+          <div><kbd>[</kbd> Brush size −</div>
+          <div><kbd>]</kbd> Brush size +</div>
+          <div>Drag tolerance slider → live wand retune</div>
+        </div>
+      </div>
+      <div style="margin-top:8px;font-size:10px;opacity:0.5;text-align:center;">Press <kbd>?</kbd> or click the keyboard icon to toggle.</div>
+    `;
+}
+
+
+/**
+ * History panel — sidebar listing all undo entries.
+ * @param {string} historyIcon  Inline SVG markup for the title icon.
+ */
+export function historyPanelHTML(historyIcon) {
+  return `
+    <div class="ge-history-head" data-history-drag>
+      <span class="ge-adj-icon">${historyIcon}</span>
+      <span class="ge-history-title">History</span>
+      <span class="ge-head-btns">
+        <button class="ge-adj-min" type="button" title="Minimise">&minus;</button>
+      </span>
+    </div>
+    <div class="ge-history-list" id="ge-history-list"></div>
+  `;
+}
+
+
+/**
+ * Empty-canvas size-prompt modal — body markup (caller controls show /
+ * hide and wires the Cancel / Create buttons).
+ */
+export function canvasSizePromptHTML() {
+  return `
+        <div class="modal-content ge-canvas-prompt">
+          <div class="modal-header"><h4 id="ge-canvas-prompt-title">New canvas</h4></div>
+          <div class="modal-body">
+            <div class="ge-canvas-prompt-row">
+              <label class="ge-canvas-prompt-field">
+                <span>Width</span>
+                <input type="text" id="ge-canvas-prompt-w" inputmode="numeric" value="1024">
+              </label>
+              <span class="ge-canvas-prompt-x">×</span>
+              <label class="ge-canvas-prompt-field">
+                <span>Height</span>
+                <input type="text" id="ge-canvas-prompt-h" inputmode="numeric" value="1024">
+              </label>
+            </div>
+            <p class="ge-canvas-prompt-hint">Pixels, or type a ratio like 3x5 / 16:9 in either field.</p>
+          </div>
+          <div class="modal-footer">
+            <button class="confirm-btn confirm-btn-secondary" id="ge-canvas-prompt-cancel">Cancel</button>
+            <button class="confirm-btn confirm-btn-primary" id="ge-canvas-prompt-ok">Create</button>
+          </div>
+        </div>`;
+}

package/dist/web/static/js/editor/build/right-panel.js

@@ -0,0 +1,200 @@
+/**
+ * Build the right-hand panel (controls + layers) — DOM creation,
+ * controls innerHTML population, mobile bottom-sheet swipe behavior,
+ * controls-panel re-parenting on mobile, slider value-chip layout
+ * normalization, layer-panel header + mobile peek/expand swipe, and
+ * the panel-width drag-resize handle.
+ *
+ * Owns its own event listeners (touch swipe gestures, mouse resize
+ * drag). Returns the `rightPanel` element + the `panelResize` handle
+ * + the inner `controls` element so the caller can wire any post-
+ * mount tweaks. Reads state.container (for mobile re-parenting) and
+ * state.color / state.brushSize / state.wandTolerance (initial slider
+ * values).
+ *
+ * @param {{
+ *   controlsHTML:     (ctx: {color, brushSize, wandTolerance}) => string,
+ *   layerPanelHTML:   () => string,
+ * }} build
+ *
+ * @returns {{
+ *   rightPanel:  HTMLDivElement,
+ *   controls:    HTMLDivElement,
+ *   layerPanel:  HTMLDivElement,
+ *   panelResize: HTMLDivElement,
+ * }}
+ */
+import { state } from '../state.js';
+
+export function buildRightPanel({ controlsHTML, layerPanelHTML }) {
+  const rightPanel = document.createElement('div');
+  rightPanel.className = 'ge-right-panel';
+
+  // Controls section.
+  const controls = document.createElement('div');
+  controls.className = 'ge-controls';
+  // Swipe-down to dismiss on mobile. Tap the same tool again to bring
+  // the sheet back. Only the top ~40 px (grab handle area) initiates
+  // the gesture so taps on inputs/sliders inside the panel still work.
+  {
+    let sy = 0, dragging = false;
+    controls.addEventListener('touchstart', (e) => {
+      if (window.innerWidth > 700) return;
+      const rect = controls.getBoundingClientRect();
+      const t = e.touches[0];
+      // Only engage if touch starts in the top grab zone.
+      if (t.clientY - rect.top > 40) return;
+      sy = t.clientY;
+      dragging = true;
+      controls.style.transition = 'none';
+    }, { passive: true });
+    controls.addEventListener('touchmove', (e) => {
+      if (!dragging) return;
+      const dy = e.touches[0].clientY - sy;
+      if (dy > 0) controls.style.transform = `translateY(${dy}px)`;
+    }, { passive: true });
+    controls.addEventListener('touchend', (e) => {
+      if (!dragging) return;
+      dragging = false;
+      const dy = e.changedTouches[0].clientY - sy;
+      controls.style.transition = '';
+      controls.style.transform = '';
+      if (dy > 60) controls.classList.add('dismissed');
+    });
+  }
+  controls.innerHTML = controlsHTML({
+    color: state.color,
+    brushSize: state.brushSize,
+    wandTolerance: state.wandTolerance,
+  });
+  rightPanel.appendChild(controls);
+  // Mobile only (≤ 700 px — matches the .ge-editor-body column-stack
+  // breakpoint): the right panel becomes a transformed bottom-sheet,
+  // so any position:fixed descendant gets trapped by the transform
+  // and rides along with the panel. Re-parent the controls panel to
+  // the editor root so it can truly fix to the viewport bottom
+  // regardless of the layers-sheet state. On desktop, controls stay
+  // docked inside the right panel above the layers list.
+  if (window.innerWidth <= 700 && state.container) {
+    state.container.appendChild(controls);
+  }
+
+  // Move every slider-row's value chip out of its <label> and place
+  // it AFTER the slider, so the value sits on the right edge of the
+  // row instead of being smashed against the slider track on the left.
+  controls.querySelectorAll('.ge-eraser-row').forEach(row => {
+    const valueSpan = row.querySelector('label > span[id$="-label"]');
+    const slider = row.querySelector('input[type="range"]');
+    if (valueSpan && slider) {
+      valueSpan.classList.add('ge-slider-value');
+      slider.after(valueSpan);
+    }
+  });
+
+  // Layer panel.
+  const layerPanel = document.createElement('div');
+  layerPanel.className = 'ge-layers';
+  layerPanel.innerHTML = layerPanelHTML();
+  rightPanel.appendChild(layerPanel);
+  // Mobile: tap the header grab handle or swipe up/down to toggle
+  // the layers sheet between peek and expanded. The peek state
+  // always shows the active layer so users never lose access to it.
+  {
+    const header = layerPanel.querySelector('.ge-layers-header');
+    if (header) {
+      let sy = 0, sx = 0, dragging = false, didSwipe = false;
+      header.addEventListener('touchstart', (e) => {
+        if (window.innerWidth > 700) return;
+        if (e.target.closest('button')) return;
+        sy = e.touches[0].clientY;
+        sx = e.touches[0].clientX;
+        dragging = true;
+        didSwipe = false;
+      }, { passive: true });
+      header.addEventListener('touchend', (e) => {
+        if (!dragging) return;
+        dragging = false;
+        const dy = e.changedTouches[0].clientY - sy;
+        const dx = Math.abs(e.changedTouches[0].clientX - sx);
+        // Real swipe — three states cycle by direction:
+        //   minimized → peek → expanded   (swipe up)
+        //   expanded → peek → minimized   (swipe down)
+        if (Math.abs(dy) > 20 && Math.abs(dy) > dx) {
+          didSwipe = true;
+          const isExpanded = rightPanel.classList.contains('expanded');
+          const isMinimized = rightPanel.classList.contains('minimized');
+          if (dy < 0) {
+            if (isMinimized) {
+              rightPanel.classList.remove('minimized');
+            } else if (!isExpanded) {
+              rightPanel.classList.add('expanded');
+            }
+          } else {
+            if (isExpanded) {
+              rightPanel.classList.remove('expanded');
+            } else if (!isMinimized) {
+              rightPanel.classList.add('minimized');
+            }
+          }
+          e.preventDefault();
+        }
+      });
+      header.addEventListener('click', (e) => {
+        if (window.innerWidth > 700) return;
+        if (e.target.closest('button')) return;
+        if (didSwipe) { didSwipe = false; return; }
+        // Click cycles between peek and expanded; minimized comes
+        // back to peek (so a tap on the handle always reveals at
+        // least the active layer row).
+        if (rightPanel.classList.contains('minimized')) {
+          rightPanel.classList.remove('minimized');
+        } else {
+          rightPanel.classList.toggle('expanded');
+        }
+      });
+    }
+  }
+
+  // Horizontal drag handle on the LEFT edge of the right panel — drag
+  // left to widen, right to narrow. Persists chosen width in
+  // localStorage so it survives reopens. (Earlier version was a
+  // vertical-drag for height; horizontal feels more natural since
+  // cramped LAYER ROWS are about width, not height.)
+  const panelResize = document.createElement('div');
+  panelResize.className = 'ge-panel-resize';
+  panelResize.title = 'Drag to resize panel';
+  rightPanel.appendChild(panelResize);
+  try {
+    const savedW = parseInt(localStorage.getItem('ge-right-panel-width') || '', 10);
+    if (savedW && savedW > 160 && savedW < 800) rightPanel.style.flex = `0 0 ${savedW}px`;
+  } catch {}
+  let panelResizing = false;
+  let panelStartX = 0;
+  let panelStartW = 0;
+  panelResize.addEventListener('mousedown', (e) => {
+    panelResizing = true;
+    panelStartX = e.clientX;
+    panelStartW = rightPanel.getBoundingClientRect().width;
+    e.preventDefault();
+    document.body.style.cursor = 'ew-resize';
+  });
+  document.addEventListener('mousemove', (e) => {
+    if (!panelResizing) return;
+    // Dragging left → wider panel (the panel sits on the right of
+    // the editor, so a leftward drag pulls its left edge left).
+    const delta = panelStartX - e.clientX;
+    const next = Math.max(160, Math.min(window.innerWidth - 200, panelStartW + delta));
+    rightPanel.style.flex = `0 0 ${next}px`;
+  });
+  document.addEventListener('mouseup', () => {
+    if (!panelResizing) return;
+    panelResizing = false;
+    document.body.style.cursor = '';
+    try {
+      const w = Math.round(rightPanel.getBoundingClientRect().width);
+      localStorage.setItem('ge-right-panel-width', String(w));
+    } catch {}
+  });
+
+  return { rightPanel, controls, layerPanel, panelResize };
+}

package/dist/web/static/js/editor/build/toolbar.js

@@ -0,0 +1,73 @@
+/**
+ * Build the editor's left-side tool palette.
+ *
+ * Pure DOM construction — no module state. The big tool-switch logic
+ * (cursor swap, control-section toggle, transform entry, inpaint
+ * mask plumbing, etc.) stays in the caller and arrives here as the
+ * `onSelectTool` callback.
+ *
+ * @param {{
+ *   currentTool: string,
+ *   onSelectTool: (toolId: string, btn: HTMLButtonElement, toolbar: HTMLDivElement) => void,
+ *   onClearSelection: (which: 'lasso'|'wand') => void,
+ * }} ctx
+ * @returns {{ toolbar: HTMLDivElement, toolKeyMap: Record<string,string> }}
+ */
+export function buildToolbar({ currentTool, onSelectTool, onClearSelection }) {
+  const toolbar = document.createElement('div');
+  toolbar.className = 'ge-toolbar';
+  const tools = [
+    { id: 'move', label: 'Move', icon: '✥', key: 'V' },
+    { id: 'crop', label: 'Crop', icon: '✂', key: 'C' },
+    { id: 'transform', label: 'Transform', icon: '⤢', key: 'T' },
+    { sep: true },
+    { id: 'brush', label: 'Brush', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"/></svg>', key: 'B' },
+    { id: 'eraser', label: 'Eraser', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19.4 14.6 14.6 19.4a2 2 0 0 1-2.83 0L4.6 12.23a2 2 0 0 1 0-2.83l7.17-7.17a2 2 0 0 1 2.83 0l4.8 4.8a2 2 0 0 1 0 2.83Z"/><line x1="22" y1="21" x2="7" y2="21"/><line x1="14" y1="3" x2="9" y2="8"/></svg>', key: 'E' },
+    { sep: true },
+    { id: 'clone', label: 'Clone', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="3"/><path d="M9 12l-3 4h12l-3-4"/><path d="M4 20h16"/></svg>', key: 'K' },
+    { id: 'lasso', label: 'Lasso', icon: '⟡', key: 'L' },
+    { id: 'wand', label: 'Wand', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 4V2"/><path d="M15 16v-2"/><path d="M8 9h2"/><path d="M20 9h2"/><path d="M17.8 11.8L19 13"/><path d="M15 9h0"/><path d="M17.8 6.2L19 5"/><path d="M3 21l9-9"/><path d="M12.2 6.2L11 5"/></svg>', key: 'W' },
+    { sep: true },
+    { id: 'inpaint', label: 'Inpaint', ai: true, icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"/></svg>', key: 'M' },
+    { id: 'rembg', ai: true, label: 'Bg Remove', icon: '✄' },
+    { id: 'sharpen', ai: true, label: 'Sharpen', icon: '◈', key: 'S' },
+  ];
+  const toolKeyMap = {};
+  for (const t of tools) {
+    if (t.sep) {
+      const sep = document.createElement('div');
+      sep.className = 'ge-tool-sep';
+      sep.textContent = t.label;
+      toolbar.appendChild(sep);
+      continue;
+    }
+    if (t.key) toolKeyMap[t.key.toLowerCase()] = t.id;
+    const btn = document.createElement('button');
+    btn.className = 'ge-tool-btn' + (t.id === currentTool ? ' active' : '');
+    btn.dataset.tool = t.id;
+    btn.title = t.label + (t.key ? ` (${t.key})` : '');
+    // Heavy 4-point AI star marker for AI-backed tools — sits just to
+    // the left of the icon so the user can spot AI vs local tools at a
+    // glance now that the "AI Tools" separator is gone.
+    const aiStar = t.ai ? '<span class="ge-tool-ai" title="AI">✦</span>' : '';
+    btn.classList.toggle('is-ai', !!t.ai);
+    // Selection-clear badge — rendered only for tools that can hold a
+    // selection (lasso, wand). Inpaint masks are first-class sub-layers
+    // now so they get their own delete-X in the layer panel.
+    const clearBadge = (t.id === 'lasso' || t.id === 'wand')
+      ? '<span class="ge-tool-clear" title="Clear selection" data-clear-tool="' + t.id + '">' +
+          '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>' +
+        '</span>'
+      : '';
+    btn.innerHTML = `${aiStar}<span class="ge-tool-icon"${t.small ? ' style="font-size:14px"' : ''}>${t.icon}</span><span class="ge-tool-label">${t.label}</span>${clearBadge}`;
+    // Clear-badge click stops propagation so the tool itself doesn't
+    // toggle; the actual clear is handled by the caller.
+    btn.querySelector('.ge-tool-clear')?.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      onClearSelection(ev.currentTarget.dataset.clearTool);
+    });
+    btn.addEventListener('click', () => onSelectTool(t.id, btn, toolbar));
+    toolbar.appendChild(btn);
+  }
+  return { toolbar, toolKeyMap };
+}

package/dist/web/static/js/editor/build/topbar.js

@@ -0,0 +1,131 @@
+/**
+ * Build the editor's top bar (undo/redo/history, zoom group, Image
+ * menu, Filter menu, Selection-edge menu, Shortcuts, Import, Save).
+ *
+ * Pure DOM — no module state, no event listeners. All wiring is done
+ * by the caller via `document.getElementById(...)` against the IDs
+ * baked into the markup.
+ *
+ * @returns {HTMLDivElement}
+ */
+export function buildTopbar() {
+  const topBar = document.createElement('div');
+  topBar.className = 'ge-topbar';
+  topBar.innerHTML = `
+    <div class="ge-topbar-left">
+      <span class="ge-alpha-badge" title="This editor is in active development — expect rough edges">ALPHA</span>
+      <button class="ge-btn ge-btn-sm ge-stacked-btn" id="ge-undo" title="Undo">
+        <span class="ge-stacked-glyph">↩</span>
+        <span class="ge-stacked-label">UNDO</span>
+      </button>
+      <button class="ge-btn ge-btn-sm ge-stacked-btn" id="ge-redo" title="Redo">
+        <span class="ge-stacked-glyph">↪</span>
+        <span class="ge-stacked-label">REDO</span>
+      </button>
+      <button class="ge-btn ge-btn-sm ge-stacked-btn" id="ge-history-btn" title="History — click an entry to jump to that state" aria-label="History">
+        <span class="ge-stacked-glyph"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/><polyline points="12 7 12 12 16 14"/></svg></span>
+        <span class="ge-stacked-label">HISTORY</span>
+      </button>
+      <span class="ge-topbar-sep"></span>
+      <button class="ge-btn ge-btn-sm" id="ge-zoom-out" title="Zoom out">&minus;</button>
+      <span class="ge-zoom-stack">
+        <span class="ge-zoom-glyph">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        </span>
+        <span class="ge-zoom-label">100%</span>
+      </span>
+      <button class="ge-btn ge-btn-sm" id="ge-zoom-in" title="Zoom in">+</button>
+      <span class="ge-topbar-sep"></span>
+      <button class="ge-btn ge-btn-sm ge-stacked-btn" id="ge-zoom-fit" title="Fit to view" aria-pressed="false">
+        <span class="ge-stacked-glyph"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 4 20 10 20"/><polyline points="20 10 20 4 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg></span>
+        <span class="ge-stacked-label">FIT</span>
+      </button>
+      <button class="ge-btn ge-btn-sm ge-stacked-btn" id="ge-zoom-100" title="Actual size" aria-pressed="false">
+        <span class="ge-stacked-glyph">1:1</span>
+        <span class="ge-stacked-label">SCALE</span>
+      </button>
+      <span class="ge-topbar-sep"></span>
+    </div>
+    <div class="ge-topbar-right">
+      <span class="ge-canvas-size" id="ge-canvas-size" title="Canvas size" hidden></span>
+      <div class="ge-image-wrap">
+        <button class="ge-btn ge-btn-sm" id="ge-image-menu-btn" title="Image actions" aria-haspopup="true">Image ▾</button>
+        <div class="ge-image-menu dropdown" id="ge-image-menu" hidden>
+          <button class="dropdown-item-compact" data-image-action="resize">
+            <span class="dropdown-icon">⤢</span>
+            <span>Canvas…</span>
+          </button>
+          <div class="ge-filter-submenu-label">Transform</div>
+          <button class="dropdown-item-compact" data-image-action="rotate-90">
+            <span class="dropdown-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><polyline points="21 3 21 9 15 9"/></svg></span>
+            <span>Rotate 90° CW</span>
+          </button>
+          <button class="dropdown-item-compact" data-image-action="rotate-180">
+            <span class="dropdown-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></span>
+            <span>Rotate 180°</span>
+          </button>
+          <button class="dropdown-item-compact" data-image-action="flip-h">
+            <span class="dropdown-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7"/><line x1="12" y1="3" x2="12" y2="21"/><polyline points="7 11 4 7 7 3"/><polyline points="17 11 20 7 17 3"/></svg></span>
+            <span>Flip horizontal</span>
+          </button>
+          <button class="dropdown-item-compact" data-image-action="flip-v">
+            <span class="dropdown-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10"/><line x1="3" y1="12" x2="21" y2="12"/><polyline points="11 7 7 4 3 7"/><polyline points="11 17 7 20 3 17"/></svg></span>
+            <span>Flip vertical</span>
+          </button>
+        </div>
+      </div>
+      <div class="ge-filter-wrap">
+        <button class="ge-btn ge-btn-sm" id="ge-filter-menu-btn" title="Filters" aria-haspopup="true">Filter ▾</button>
+        <div class="ge-filter-menu dropdown" id="ge-filter-menu" hidden>
+          <div class="ge-filter-submenu-label">Blur</div>
+          <button class="dropdown-item-compact" data-filter-action="blur-gaussian">
+            <span class="dropdown-icon ge-blur-icon ge-blur-gaussian" aria-hidden="true"></span>
+            <span>Gaussian Blur…</span>
+          </button>
+          <button class="dropdown-item-compact" data-filter-action="blur-zoom">
+            <span class="dropdown-icon ge-blur-icon ge-blur-zoom" aria-hidden="true"></span>
+            <span>Zoom Blur…</span>
+          </button>
+        </div>
+      </div>
+      <span class="ge-topbar-sep"></span>
+      <button class="ge-btn ge-btn-sm" id="ge-shortcuts-btn" title="Keyboard shortcuts (?)" aria-label="Shortcuts">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position:relative;top:2px;"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10"/></svg>
+      </button>
+      <button class="ge-btn ge-btn-sm" id="ge-import-topbar" title="Import image as layer">+ Import</button>
+      <div class="ge-save-wrap">
+        <button class="ge-btn ge-btn-primary" id="ge-save-menu-btn" title="Save options" style="display:inline-flex;align-items:center;gap:4px;">Save
+          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.7"><polyline points="6 9 12 15 18 9"/></svg>
+        </button>
+        <div class="ge-save-menu dropdown" id="ge-save-menu" hidden>
+          <div class="dropdown-section-label">Image</div>
+          <button class="dropdown-item-compact" id="ge-save" title="Overwrite the original image">
+            <span class="dropdown-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></span>
+            <span>Save over original</span>
+            <span class="dropdown-shortcut">Ctrl+S</span>
+          </button>
+          <button class="dropdown-item-compact" id="ge-export-gallery" title="Save as a new image in the gallery">
+            <span class="dropdown-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg></span>
+            <span>Save as copy</span>
+            <span class="dropdown-shortcut">Ctrl+Shift+S</span>
+          </button>
+          <button class="dropdown-item-compact" id="ge-download" title="Download PNG to your computer">
+            <span class="dropdown-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span>
+            <span>Download PNG</span>
+          </button>
+          <div class="dropdown-section-divider"></div>
+          <div class="dropdown-section-label">Project</div>
+          <button class="dropdown-item-compact" id="ge-save-project" title="Save layered project (.json) — keeps every layer editable for later">
+            <span class="dropdown-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="13" height="13" rx="1"/><rect x="8" y="8" width="13" height="13" rx="1"/></svg></span>
+            <span>Save project (.json)</span>
+          </button>
+          <button class="dropdown-item-compact" id="ge-load-project" title="Open a previously-saved project file">
+            <span class="dropdown-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
+            <span>Load project…</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+  return topBar;
+}

package/dist/web/static/js/editor/build/transform-popup.js

@@ -0,0 +1,109 @@
+/**
+ * Static markup for the Transform popup that floats over the canvas
+ * when the user activates the Resize/Transform tool.
+ *
+ * Pure DOM — no module state, no event listeners. The caller wires all
+ * IDs via document.getElementById / pop.querySelector.
+ *
+ * @returns {string}
+ */
+export function transformPopupHTML() {
+  return `
+    <div class="ge-adj-head ge-transform-popup-head" data-transform-drag>
+      <span class="ge-adj-icon">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 7 7 3 11 7"/><line x1="7" y1="3" x2="7" y2="21"/><polyline points="21 17 17 21 13 17"/><line x1="17" y1="21" x2="17" y2="3"/></svg>
+      </span>
+      <span class="ge-adj-title">Transform</span>
+      <button type="button" id="ge-transform-aspect" class="ge-transform-aspect-btn" title="Lock aspect ratio" aria-pressed="true">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+      </button>
+      <span class="ge-head-btns">
+        <button class="ge-adj-min" type="button" title="Minimise" id="ge-transform-min">&minus;</button>
+        <button class="ge-adj-close" type="button" title="Cancel" id="ge-transform-cancel">&times;</button>
+      </span>
+    </div>
+    <div class="ge-transform-popup-body">
+      <div class="ge-transform-field">
+        <label>W</label>
+        <input type="number" class="ge-transform-popup-input" id="ge-transform-w" step="1" />
+        <span class="ge-transform-spin" data-spin-for="ge-transform-w">
+          <button type="button" data-spin="down" tabindex="-1" aria-label="Decrease width">−</button>
+          <button type="button" data-spin="up" tabindex="-1" aria-label="Increase width">+</button>
+        </span>
+      </div>
+      <div class="ge-transform-field">
+        <label>H</label>
+        <input type="number" class="ge-transform-popup-input" id="ge-transform-h" step="1" />
+        <span class="ge-transform-spin" data-spin-for="ge-transform-h">
+          <button type="button" data-spin="down" tabindex="-1" aria-label="Decrease height">−</button>
+          <button type="button" data-spin="up" tabindex="-1" aria-label="Increase height">+</button>
+        </span>
+      </div>
+      <div class="ge-row-break"></div>
+      <div class="ge-transform-field">
+        <label>↻</label>
+        <input type="number" class="ge-transform-popup-input ge-transform-popup-input-rot" id="ge-transform-rot" step="1" value="0" />
+        <span class="ge-transform-spin" data-spin-for="ge-transform-rot">
+          <button type="button" data-spin="down" tabindex="-1" aria-label="Rotate -1°">−</button>
+          <button type="button" data-spin="up" tabindex="-1" aria-label="Rotate +1°">+</button>
+        </span>
+      </div>
+      <button type="button" class="ge-btn ge-btn-sm" id="ge-transform-cancel-btn">Cancel</button>
+      <button type="button" class="ge-btn ge-btn-sm ge-btn-primary" id="ge-transform-apply">Apply</button>
+    </div>
+    <p class="ge-transform-popup-hint">Type <strong>-</strong> before W / H to flip.</p>
+  `;
+}
+
+
+/**
+ * Wire a `<span class="ge-transform-spin">…<button data-spin="up|down"/>…</span>`
+ * group with tap-to-tick + hold-to-repeat. After 1.5 s the repeat
+ * accelerates from 70ms→30ms intervals so users can rapidly scrub a
+ * numeric field without mashing the button.
+ *
+ * On each tick, the helper looks up the target `<input>` by the
+ * spin-group's `data-spin-for` attribute and dispatches an `input`
+ * event so the rest of the popup's wiring picks up the change.
+ *
+ * @param {HTMLElement} root   Element that owns one or more spin groups
+ *                             (e.g. the transform popup).
+ */
+export function attachSpinRepeat(root) {
+  root.querySelectorAll('.ge-transform-spin button').forEach(btn => {
+    const tick = (shift) => {
+      const targetId = btn.parentElement?.dataset?.spinFor;
+      if (!targetId) return;
+      const input = root.querySelector('#' + CSS.escape(targetId));
+      if (!input || input.readOnly) return;
+      const step = shift ? 10 : 1;
+      const cur = parseInt(input.value, 10) || 0;
+      const next = btn.dataset.spin === 'up' ? cur + step : cur - step;
+      input.value = String(next);
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    let holdTimeout = null, repeatInterval = null, started = 0;
+    btn.addEventListener('pointerdown', (e) => {
+      e.preventDefault();
+      tick(e.shiftKey);
+      started = Date.now();
+      holdTimeout = setTimeout(() => {
+        repeatInterval = setInterval(() => {
+          tick(false);
+          if (Date.now() - started > 1500 && repeatInterval) {
+            clearInterval(repeatInterval);
+            repeatInterval = setInterval(() => tick(false), 30);
+          }
+        }, 70);
+      }, 350);
+    });
+    const endHold = () => {
+      if (holdTimeout) clearTimeout(holdTimeout);
+      if (repeatInterval) clearInterval(repeatInterval);
+      holdTimeout = null; repeatInterval = null;
+    };
+    btn.addEventListener('pointerup', endHold);
+    btn.addEventListener('pointerleave', endHold);
+    btn.addEventListener('pointercancel', endHold);
+  });
+}