@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/fx/filter-string.js

@@ -0,0 +1,38 @@
+/**
+ * Pure helpers that translate between the editor's adjustment-slider
+ * UI and CSS `filter` strings / canvas-filter multipliers.
+ */
+
+/**
+ * Build a CSS `filter` string from a layer's `adjustments` object.
+ * Returns '' when every value is at identity so the composite path
+ * can skip the filter entirely.
+ *
+ * @param {{
+ *   brightness?: number, contrast?: number,
+ *   saturation?: number, hue?: number,
+ * }|null|undefined} adj
+ */
+export function layerFilterString(adj) {
+  if (!adj) return '';
+  const parts = [];
+  if (adj.brightness !== undefined && adj.brightness !== 1) parts.push(`brightness(${adj.brightness})`);
+  if (adj.contrast !== undefined && adj.contrast !== 1) parts.push(`contrast(${adj.contrast})`);
+  if (adj.saturation !== undefined && adj.saturation !== 1) parts.push(`saturate(${adj.saturation})`);
+  if (adj.hue !== undefined && adj.hue !== 0) parts.push(`hue-rotate(${adj.hue}deg)`);
+  return parts.join(' ');
+}
+
+
+/**
+ * Convert a stored filter multiplier (brightness/contrast/saturation
+ * are 0..2 with 1.0 = identity; hue is degrees, -180..+180) into the
+ * UI slider's -100..+100 (or -180..+180 for hue) range.
+ */
+export function fxFilterToSlider(key, value) {
+  if (key === 'brightness' || key === 'contrast' || key === 'saturation') {
+    return Math.round(((value ?? 1) - 1) * 100);
+  }
+  if (key === 'hue') return Math.round(value ?? 0);
+  return 0;
+}

package/dist/web/static/js/editor/fx/histogram.js

@@ -0,0 +1,67 @@
+/**
+ * Draw a luminance histogram of a layer's pixels onto the given
+ * canvas. Sampling is capped at ~400×400 so the call stays cheap on
+ * very large images.
+ *
+ * If the layer has a staged Levels adjustment
+ * (`layer._stagedAdj.params` with `inBlack` / `inWhite`), the two
+ * endpoint markers are drawn over the bars.
+ *
+ * @param {HTMLCanvasElement} canvas  The histogram canvas to render into.
+ * @param {{
+ *   canvas: HTMLCanvasElement,
+ *   _stagedAdj?: {params?: {inBlack?: number, inWhite?: number}}
+ * }} layer                            Source layer.
+ */
+export function drawHistogram(canvas, layer) {
+  if (!canvas) return;
+  const w = canvas.width, h = canvas.height;
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, w, h);
+
+  // Down-sample huge images so the histogram stays interactive on 8k+
+  // photos. ~400×400 is enough to characterise the distribution.
+  const src = layer.canvas;
+  const sw = src.width, sh = src.height;
+  const maxSamples = 400;
+  const sampleW = Math.min(maxSamples, sw);
+  const sampleH = Math.min(maxSamples, sh);
+  const tmp = document.createElement('canvas');
+  tmp.width = sampleW; tmp.height = sampleH;
+  const tctx = tmp.getContext('2d');
+  tctx.drawImage(src, 0, 0, sampleW, sampleH);
+  const img = tctx.getImageData(0, 0, sampleW, sampleH).data;
+
+  const hist = new Uint32Array(256);
+  for (let i = 0; i < img.length; i += 4) {
+    if (img[i + 3] < 8) continue; // skip near-transparent
+    // Rec. 709 luminance — common choice for histograms in photo editors.
+    const Y = (0.2126 * img[i] + 0.7152 * img[i + 1] + 0.0722 * img[i + 2]) | 0;
+    hist[Math.min(255, Y)]++;
+  }
+  let peak = 1;
+  for (let i = 0; i < 256; i++) if (hist[i] > peak) peak = hist[i];
+
+  // Background.
+  ctx.fillStyle = 'rgba(255,255,255,0.05)';
+  ctx.fillRect(0, 0, w, h);
+
+  // Bars. sqrt-scaled so the long tails (specular highlights, deep
+  // shadows) stay visible even when the central mass dominates.
+  ctx.fillStyle = 'rgba(255,255,255,0.55)';
+  for (let i = 0; i < 256; i++) {
+    const x = (i / 256) * w;
+    const bh = Math.pow(hist[i] / peak, 0.5) * h;
+    ctx.fillRect(x, h - bh, w / 256 + 0.5, bh);
+  }
+
+  // Endpoint markers (input black / input white) from a staged Levels
+  // adjustment, if one is in flight.
+  const p = layer._stagedAdj?.params;
+  if (p) {
+    ctx.fillStyle = 'rgba(0,0,0,0.9)';
+    ctx.fillRect((p.inBlack / 256) * w, 0, 1, h);
+    ctx.fillStyle = 'rgba(255,255,255,0.9)';
+    ctx.fillRect((p.inWhite / 256) * w, 0, 1, h);
+  }
+}

package/dist/web/static/js/editor/fx/pixel-pass.js

@@ -0,0 +1,249 @@
+/**
+ * Apply a Brightness/Contrast, Hue/Saturation, Levels, or Color Balance
+ * adjustment to a source canvas and return a fresh canvas with the
+ * result. Pure pixel math — no DOM, no module state.
+ *
+ * Used by the editor's per-layer FX stack: each `adjLayer` calls
+ * `applyAdjustment(prevCanvas, adjLayer)` and the result feeds the
+ * next layer in the stack.
+ *
+ * Adjustment shape:
+ *   { type: 'brightness-contrast', params: { brightness, contrast } }
+ *   { type: 'hue-saturation',      params: { hue, saturation } }
+ *   { type: 'levels',              params: { inBlack, inWhite, gamma, outBlack, outWhite } }
+ *   { type: 'color-balance',       params: { shadows, midtones, highlights } }
+ */
+export function applyAdjustment(srcCanvas, adj) {
+  const w = srcCanvas.width, h = srcCanvas.height;
+  const out = document.createElement('canvas');
+  out.width = w; out.height = h;
+  const octx = out.getContext('2d');
+
+  // B/C and H/S can use the fast browser-native CSS filter pipeline.
+  if (adj.type === 'brightness-contrast') {
+    const p = adj.params;
+    octx.filter = `brightness(${p.brightness}) contrast(${p.contrast})`;
+    octx.drawImage(srcCanvas, 0, 0);
+    octx.filter = 'none';
+    return out;
+  }
+  if (adj.type === 'hue-saturation') {
+    const p = adj.params;
+    octx.filter = `saturate(${p.saturation}) hue-rotate(${p.hue}deg)`;
+    octx.drawImage(srcCanvas, 0, 0);
+    octx.filter = 'none';
+    return out;
+  }
+
+  // Levels + Color Balance need per-pixel math.
+  octx.drawImage(srcCanvas, 0, 0);
+  const img = octx.getImageData(0, 0, w, h);
+  const d = img.data;
+
+  if (adj.type === 'levels') {
+    const l = adj.params;
+    const inLow  = Math.max(0, Math.min(254, l.inBlack));
+    const inHigh = Math.max(inLow + 1, Math.min(255, l.inWhite));
+    const gamma  = Math.max(0.1, l.gamma || 1);
+    const outLow  = Math.max(0, Math.min(255, l.outBlack));
+    const outHigh = Math.max(outLow, Math.min(255, l.outWhite));
+    const inv = 1.0 / gamma;
+    const span = (outHigh - outLow);
+    const lut = new Uint8ClampedArray(256);
+    for (let v = 0; v < 256; v++) {
+      let t = (v - inLow) / (inHigh - inLow);
+      if (t < 0) t = 0; else if (t > 1) t = 1;
+      t = Math.pow(t, inv);
+      lut[v] = Math.round(t * span + outLow);
+    }
+    for (let i = 0; i < d.length; i += 4) {
+      d[i] = lut[d[i]]; d[i+1] = lut[d[i+1]]; d[i+2] = lut[d[i+2]];
+    }
+    octx.putImageData(img, 0, 0);
+    return out;
+  }
+
+  if (adj.type === 'color-balance') {
+    const cb = adj.params;
+    const scale = 0.6;
+    const s = cb.shadows, m = cb.midtones, hi = cb.highlights;
+    const sR = s.r*scale, sG = s.g*scale, sB = s.b*scale;
+    const mR = m.r*scale, mG = m.g*scale, mB = m.b*scale;
+    const hR = hi.r*scale, hG = hi.g*scale, hB = hi.b*scale;
+    // Bell-curve tone weights so each pixel's shift is proportional to
+    // how "shadow", "midtone", or "highlight" its luminance is.
+    const wS = new Float32Array(256), wM = new Float32Array(256), wH = new Float32Array(256);
+    const sig = 0.25;
+    for (let v = 0; v < 256; v++) {
+      const t = v / 255;
+      wS[v] = Math.exp(-(t*t) / (2*sig*sig));
+      wM[v] = Math.exp(-((t-0.5)*(t-0.5)) / (2*sig*sig));
+      wH[v] = Math.exp(-((1-t)*(1-t)) / (2*sig*sig));
+    }
+    for (let i = 0; i < d.length; i += 4) {
+      let r = d[i], g = d[i+1], b = d[i+2];
+      const Y = (0.2126*r + 0.7152*g + 0.0722*b) | 0;
+      const ws = wS[Y], wm = wM[Y], wh = wH[Y];
+      r += sR*ws + mR*wm + hR*wh;
+      g += sG*ws + mG*wm + hG*wh;
+      b += sB*ws + mB*wm + hB*wh;
+      d[i]   = r < 0 ? 0 : r > 255 ? 255 : r;
+      d[i+1] = g < 0 ? 0 : g > 255 ? 255 : g;
+      d[i+2] = b < 0 ? 0 : b > 255 ? 255 : b;
+    }
+    octx.putImageData(img, 0, 0);
+    return out;
+  }
+
+  return out;
+}
+
+
+/**
+ * Apply a combined Levels + Color Balance pass to a layer in-place via
+ * its `layer.adjustments` field. Cached on `layer._adjCache` keyed by
+ * `cacheKey` so repeated composite passes don't re-run the math.
+ *
+ * Returns the cached output canvas.
+ *
+ * @param {{
+ *   canvas: HTMLCanvasElement,
+ *   adjustments: object,
+ *   _adjCache?: HTMLCanvasElement,
+ *   _adjCacheKey?: string,
+ * }} layer
+ * @param {string} cacheKey  Stable signature of `layer.adjustments`.
+ */
+export function renderLayerPixelAdjustments(layer, cacheKey) {
+  const adj = layer.adjustments;
+  if (layer._adjCache && layer._adjCacheKey === cacheKey) return layer._adjCache;
+  if (!layer._adjCache) {
+    layer._adjCache = document.createElement('canvas');
+  }
+  const out = layer._adjCache;
+  out.width = layer.canvas.width;
+  out.height = layer.canvas.height;
+  const octx = out.getContext('2d');
+  octx.clearRect(0, 0, out.width, out.height);
+  octx.drawImage(layer.canvas, 0, 0);
+  const img = octx.getImageData(0, 0, out.width, out.height);
+  const d = img.data;
+
+  // Single 256-entry LUT for the Levels portion (applied per R/G/B
+  // channel identically — luma-style isn't right when colour balance
+  // follows, per-channel is fine here).
+  const l = adj.levels || { inBlack: 0, inWhite: 255, gamma: 1, outBlack: 0, outWhite: 255 };
+  const inLow  = Math.max(0, Math.min(254, l.inBlack));
+  const inHigh = Math.max(inLow + 1, Math.min(255, l.inWhite));
+  const gamma  = Math.max(0.1, l.gamma || 1);
+  const outLow  = Math.max(0, Math.min(255, l.outBlack));
+  const outHigh = Math.max(outLow, Math.min(255, l.outWhite));
+  const inv = 1.0 / gamma;
+  const span = (outHigh - outLow);
+  const lut = new Uint8ClampedArray(256);
+  for (let v = 0; v < 256; v++) {
+    let t = (v - inLow) / (inHigh - inLow);
+    if (t < 0) t = 0; else if (t > 1) t = 1;
+    t = Math.pow(t, inv);
+    lut[v] = Math.round(t * span + outLow);
+  }
+
+  // Color Balance bell-curve weights (see applyAdjustment).
+  const cb = adj.colorBalance || { shadows: {r:0,g:0,b:0}, midtones: {r:0,g:0,b:0}, highlights: {r:0,g:0,b:0} };
+  const s = cb.shadows || {r:0,g:0,b:0};
+  const m = cb.midtones || {r:0,g:0,b:0};
+  const h = cb.highlights || {r:0,g:0,b:0};
+  const scale = 0.6;
+  const sR = s.r * scale, sG = s.g * scale, sB = s.b * scale;
+  const mR = m.r * scale, mG = m.g * scale, mB = m.b * scale;
+  const hR = h.r * scale, hG = h.g * scale, hB = h.b * scale;
+
+  const wS = new Float32Array(256);
+  const wM = new Float32Array(256);
+  const wH = new Float32Array(256);
+  for (let v = 0; v < 256; v++) {
+    const t = v / 255;
+    const dS = t, wsig = 0.25;
+    const dM = t - 0.5;
+    const dH = 1 - t;
+    wS[v] = Math.exp(-(dS * dS) / (2 * wsig * wsig));
+    wM[v] = Math.exp(-(dM * dM) / (2 * wsig * wsig));
+    wH[v] = Math.exp(-(dH * dH) / (2 * wsig * wsig));
+  }
+
+  for (let i = 0; i < d.length; i += 4) {
+    let r = lut[d[i]];
+    let g = lut[d[i + 1]];
+    let b = lut[d[i + 2]];
+    const Y = (0.2126 * r + 0.7152 * g + 0.0722 * b) | 0;
+    const ws = wS[Y], wm = wM[Y], wh = wH[Y];
+    r += sR * ws + mR * wm + hR * wh;
+    g += sG * ws + mG * wm + hG * wh;
+    b += sB * ws + mB * wm + hB * wh;
+    d[i]     = r < 0 ? 0 : r > 255 ? 255 : r;
+    d[i + 1] = g < 0 ? 0 : g > 255 ? 255 : g;
+    d[i + 2] = b < 0 ? 0 : b > 255 ? 255 : b;
+  }
+  octx.putImageData(img, 0, 0);
+  layer._adjCacheKey = cacheKey;
+  return out;
+}
+
+
+/**
+ * Walk the layer's `adjLayers` stack (skipping the one currently being
+ * edited, if any) plus an optional staged preview adjustment, producing
+ * a final canvas the composite step can paint. The result is memoised
+ * on `layer._adjFinal` keyed by a signature of all adjLayer params +
+ * staged + editing id, so repeated composite passes are O(1) when
+ * nothing has changed.
+ *
+ * If the stack is empty AND nothing is staged, returns the layer's own
+ * canvas unchanged (no allocation).
+ *
+ * @param {{
+ *   canvas: HTMLCanvasElement,
+ *   adjLayers?: Array<{id: string, type: string, params: object, visible: boolean, opacity: number}>,
+ *   _stagedAdj?: {type: string, params: object} | null,
+ *   _editingAdjId?: string | null,
+ *   _adjFinal?: HTMLCanvasElement,
+ *   _adjFinalKey?: string,
+ * }} layer
+ * @returns {HTMLCanvasElement}
+ */
+export function renderLayerWithAdjLayers(layer) {
+  const editingId = layer._editingAdjId || null;
+  const stack = (layer.adjLayers || []).filter(a => a.visible && a.id !== editingId);
+  const staged = layer._stagedAdj;
+  if (stack.length === 0 && !staged) {
+    layer._adjFinalKey = '';
+    return layer.canvas;
+  }
+  const sig = stack.map(a => `${a.id}:${a.visible?1:0}:${a.opacity}:${a.type}:${JSON.stringify(a.params)}`).join('|') +
+    (staged ? `|S:${staged.type}:${JSON.stringify(staged.params)}` : '') +
+    (editingId ? `|E:${editingId}` : '');
+  if (layer._adjFinal && layer._adjFinalKey === sig) return layer._adjFinal;
+  let cur = layer.canvas;
+  const w = layer.canvas.width, h = layer.canvas.height;
+  for (const adj of stack) {
+    const adjOut = applyAdjustment(cur, adj);
+    if (adj.opacity >= 0.999) {
+      cur = adjOut;
+    } else {
+      const blend = document.createElement('canvas');
+      blend.width = w; blend.height = h;
+      const bctx = blend.getContext('2d');
+      bctx.drawImage(cur, 0, 0);
+      bctx.globalAlpha = adj.opacity;
+      bctx.drawImage(adjOut, 0, 0);
+      bctx.globalAlpha = 1;
+      cur = blend;
+    }
+  }
+  if (staged) {
+    cur = applyAdjustment(cur, staged);
+  }
+  layer._adjFinal = cur;
+  layer._adjFinalKey = sig;
+  return cur;
+}

package/dist/web/static/js/editor/harmonize-masks.js

@@ -0,0 +1,116 @@
+/**
+ * Mask builders used by the AI Harmonize pipeline.
+ *
+ *  - `layerUnionAlpha`  — union of every non-base layer's alpha, as a
+ *                         binary (0/255) mask. Used as the substrate
+ *                         for both seam and body masks.
+ *  - `seamMask`         — feathered band along the alpha edges of all
+ *                         non-base layers. White = "blend here",
+ *                         black = "leave alone". Returned as base64
+ *                         PNG (so it can be POST'd to the diffusion
+ *                         endpoint as JSON).
+ *  - `layerBodyMask`    — feathered FULL shape of every non-base layer.
+ *                         White = "AI may redraw this pixel using the
+ *                         existing pixels as a starting point";
+ *                         black = "preserve exactly". Returned as base64.
+ *
+ * Each helper takes the visible layer list + the doc dimensions; no
+ * module state.
+ *
+ * @typedef {{ visible: boolean, id: string, canvas: HTMLCanvasElement, offset: {x: number, y: number} }} HarmLayer
+ */
+
+/**
+ * Build a binary alpha mask = the UNION of every non-base visible
+ * layer's pixels. Returns null when fewer than 2 visible layers exist
+ * or when the non-base layers are entirely transparent.
+ *
+ * @param {number} w / h          Canvas dimensions in pixels.
+ * @param {HarmLayer[]} layers    All layers in stack order; the
+ *                                first VISIBLE layer is treated as
+ *                                the base / background.
+ * @returns {HTMLCanvasElement|null}
+ */
+export function layerUnionAlpha(w, h, layers) {
+  const visible = layers.filter(l => l.visible);
+  if (visible.length < 2) return null;
+  const bgId = visible[0].id;
+  const alphaCanvas = document.createElement('canvas');
+  alphaCanvas.width = w; alphaCanvas.height = h;
+  const actx = alphaCanvas.getContext('2d');
+  let hasFg = false;
+  for (const layer of visible) {
+    if (layer.id === bgId) continue;
+    const off = layer.offset || { x: 0, y: 0 };
+    actx.drawImage(layer.canvas, off.x, off.y);
+    hasFg = true;
+  }
+  if (!hasFg) return null;
+  const src = actx.getImageData(0, 0, w, h);
+  const bin = document.createElement('canvas');
+  bin.width = w; bin.height = h;
+  const bctx = bin.getContext('2d');
+  const binImg = bctx.createImageData(w, h);
+  let any = false;
+  for (let i = 0; i < src.data.length; i += 4) {
+    const v = src.data[i + 3] > 0 ? 255 : 0;
+    if (v) any = true;
+    binImg.data[i] = binImg.data[i + 1] = binImg.data[i + 2] = v;
+    binImg.data[i + 3] = 255;
+  }
+  if (!any) return null;
+  bctx.putImageData(binImg, 0, 0);
+  return bin;
+}
+
+
+/**
+ * Build a feathered seam mask along the alpha edges of all non-base
+ * visible layers. Returns base64-encoded PNG (no `data:` prefix), or
+ * null if there's nothing to harmonize.
+ */
+export function seamMask(w, h, layers, featherPx = 12) {
+  const bin = layerUnionAlpha(w, h, layers);
+  if (!bin) return null;
+  const blur = document.createElement('canvas');
+  blur.width = w; blur.height = h;
+  const blctx = blur.getContext('2d');
+  blctx.filter = `blur(${featherPx}px)`;
+  blctx.drawImage(bin, 0, 0);
+  blctx.filter = 'none';
+  const blurred = blctx.getImageData(0, 0, w, h);
+  const mask = blctx.createImageData(w, h);
+  // Triangular weight peaked at mid-grey — picks out the alpha-edge band.
+  for (let i = 0; i < blurred.data.length; i += 4) {
+    const v = blurred.data[i];
+    const dist = Math.abs(v - 128);
+    const wt = Math.max(0, 255 - dist * 2);
+    mask.data[i] = mask.data[i + 1] = mask.data[i + 2] = wt;
+    mask.data[i + 3] = 255;
+  }
+  blctx.putImageData(mask, 0, 0);
+  const soft = document.createElement('canvas');
+  soft.width = w; soft.height = h;
+  const sctx = soft.getContext('2d');
+  sctx.filter = `blur(${Math.max(2, Math.floor(featherPx / 4))}px)`;
+  sctx.drawImage(blur, 0, 0);
+  sctx.filter = 'none';
+  return soft.toDataURL('image/png').split(',')[1];
+}
+
+
+/**
+ * Build a feathered FULL-shape mask of every non-base visible layer.
+ * Returns base64-encoded PNG, or null if there are no non-base layers.
+ */
+export function layerBodyMask(w, h, layers, featherPx = 12) {
+  const bin = layerUnionAlpha(w, h, layers);
+  if (!bin) return null;
+  const soft = document.createElement('canvas');
+  soft.width = w; soft.height = h;
+  const sctx = soft.getContext('2d');
+  sctx.filter = `blur(${featherPx}px)`;
+  sctx.drawImage(bin, 0, 0);
+  sctx.filter = 'none';
+  return soft.toDataURL('image/png').split(',')[1];
+}

package/dist/web/static/js/editor/history-panel.js

@@ -0,0 +1,176 @@
+/**
+ * History-panel subsystem — the floating frosted list of labeled
+ * undo/redo entries that hangs off the topbar History button.
+ *
+ * Same docking pattern as the FX adjustment popups: drag the head to
+ * reposition, click the minimise button to dock into the modalManager
+ * chip chain, click the chip to restore. Esc closes.
+ *
+ * @param {{
+ *   undo: () => void,
+ *   redo: () => void,
+ * }} deps
+ *
+ * @returns {{
+ *   toggleHistoryPanel:        () => void,
+ *   refreshHistoryPanelIfOpen: () => void,
+ *   jumpToHistory:             (offset: number) => void,
+ * }}
+ */
+import { state } from './state.js';
+import modalManager from '../modalManager.js';
+import { HISTORY_ICON, relTime } from './layer-helpers.js';
+import { historyPanelHTML } from './build/popups.js';
+
+export function createHistoryPanel({ undo, redo }) {
+  function jumpToHistory(offset) {
+    if (offset === 0) return;
+    if (offset < 0) {
+      for (let i = 0; i < -offset; i++) undo();
+    } else {
+      for (let i = 0; i < offset; i++) redo();
+    }
+  }
+
+  function closeHistoryPanel() {
+    if (state.historyPanelEl) {
+      if (state.historyPanelEl._escHandler) {
+        document.removeEventListener('keydown', state.historyPanelEl._escHandler, true);
+      }
+      if (state.historyPanelEl._awayHandler) {
+        document.removeEventListener('pointerdown', state.historyPanelEl._awayHandler, true);
+      }
+      state.historyPanelEl.remove();
+      state.historyPanelEl = null;
+    }
+  }
+
+  function minimiseHistoryPanel() {
+    if (!state.historyPanelEl) return;
+    const panel = state.historyPanelEl;
+    const r = panel.getBoundingClientRect();
+    panel._stashLeft = r.left;
+    panel._stashTop  = r.top;
+    panel.style.display = 'none';
+    state.historyPanelEl = null;
+    const modalId = panel._modalId || 'ge-history-panel-min';
+    panel._modalId = modalId;
+    modalManager.register(modalId, {
+      label: 'History',
+      icon: HISTORY_ICON,
+      restoreFn: () => {
+        panel.style.left = panel._stashLeft + 'px';
+        panel.style.top  = panel._stashTop  + 'px';
+        panel.style.display = '';
+        state.historyPanelEl = panel;
+        refreshHistoryPanelIfOpen();
+      },
+      closeFn: () => {
+        panel.remove();
+        modalManager.unregister(modalId);
+      },
+    });
+    modalManager.minimize(modalId);
+  }
+
+  function toggleHistoryPanel() {
+    if (state.historyPanelEl) { closeHistoryPanel(); return; }
+    const panel = document.createElement('div');
+    panel.id = 'ge-history-panel';
+    panel.className = 'ge-frosted';
+    panel.innerHTML = historyPanelHTML(HISTORY_ICON);
+    document.body.appendChild(panel);
+    state.historyPanelEl = panel;
+    const btn = document.getElementById('ge-history-btn');
+    if (btn) {
+      const r = btn.getBoundingClientRect();
+      panel.style.top  = (r.bottom + 6) + 'px';
+      panel.style.left = Math.max(8, r.left) + 'px';
+    }
+    panel.querySelector('.ge-adj-min').addEventListener('click', minimiseHistoryPanel);
+    // Click anywhere outside the panel (or trigger button) closes it.
+    setTimeout(() => {
+      const onAway = (ev) => {
+        if (!state.historyPanelEl) return;
+        if (state.historyPanelEl.contains(ev.target)) return;
+        if (btn && (ev.target === btn || btn.contains(ev.target))) return;
+        closeHistoryPanel();
+        document.removeEventListener('pointerdown', onAway, true);
+      };
+      document.addEventListener('pointerdown', onAway, true);
+      panel._awayHandler = onAway;
+    }, 0);
+
+    const head = panel.querySelector('[data-history-drag]');
+    head.addEventListener('pointerdown', (e) => {
+      if (e.target.closest('button')) return;
+      e.preventDefault();
+      const startX = e.clientX, startY = e.clientY;
+      const r0 = panel.getBoundingClientRect();
+      head.setPointerCapture(e.pointerId);
+      head.style.cursor = 'grabbing';
+      const onMove = (ev) => {
+        const nx = Math.max(0, Math.min(window.innerWidth - 60, r0.left + (ev.clientX - startX)));
+        const ny = Math.max(0, Math.min(window.innerHeight - 30, r0.top  + (ev.clientY - startY)));
+        panel.style.left = nx + 'px';
+        panel.style.top  = ny + 'px';
+      };
+      const onUp = () => {
+        head.releasePointerCapture(e.pointerId);
+        head.style.cursor = '';
+        head.removeEventListener('pointermove', onMove);
+        head.removeEventListener('pointerup', onUp);
+      };
+      head.addEventListener('pointermove', onMove);
+      head.addEventListener('pointerup', onUp);
+    });
+
+    const onKey = (ev) => {
+      if (ev.key === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        closeHistoryPanel();
+      }
+    };
+    document.addEventListener('keydown', onKey, true);
+    panel._escHandler = onKey;
+
+    refreshHistoryPanelIfOpen();
+  }
+
+  function refreshHistoryPanelIfOpen() {
+    if (!state.historyPanelEl) return;
+    const list = state.historyPanelEl.querySelector('#ge-history-list');
+    if (!list) return;
+    // Chronological order — oldest at top, latest at bottom. Past
+    // (undo) states first, then Current, then future (redo) states.
+    const rows = [];
+    for (let i = 0; i < state.undoStack.length; i++) {
+      const s = state.undoStack[i];
+      rows.push({ offset: -(state.undoStack.length - i), label: s._label || 'Edit', ts: s._ts });
+    }
+    rows.push({ offset: 0, label: 'Current', ts: Date.now(), current: true });
+    for (let i = state.redoStack.length - 1; i >= 0; i--) {
+      const s = state.redoStack[i];
+      rows.push({ offset: (state.redoStack.length - i), label: s._label || 'Edit', ts: s._ts, future: true });
+    }
+    list.innerHTML = rows.map(r => `
+    <button class="ge-history-row${r.current ? ' current' : ''}${r.future ? ' future' : ''}" data-offset="${r.offset}">
+      <span class="ge-history-row-dot"></span>
+      <span class="ge-history-row-label">${(r.label || '').replace(/[<>&]/g,'')}</span>
+      <span class="ge-history-row-time">${relTime(r.ts)}</span>
+    </button>
+  `).join('');
+    list.querySelectorAll('.ge-history-row').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const off = parseInt(btn.dataset.offset, 10);
+        jumpToHistory(off);
+      });
+    });
+    // Scroll the current marker into view.
+    const cur = list.querySelector('.current');
+    if (cur) cur.scrollIntoView({ block: 'center' });
+  }
+
+  return { toggleHistoryPanel, refreshHistoryPanelIfOpen, jumpToHistory };
+}