// ==UserScript==
// @name         Autodraw Script
// @namespace    http://tampermonkey.net/
// @version      2025-11-07
// @description  Enjoy, and farewell drawaria!
// @license MIT
// @author       Toluwerr
// @match        https://drawaria.online/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @grant        none
// @downloadURL none
// ==/UserScript==


(() => {
  const SCRIPT_HANDLE = '__drawariaImageAutodraw';
  const MAX_COLOUR_CAPACITY = 1300;

  if (window[SCRIPT_HANDLE]?.cleanup) {
    try {
      window[SCRIPT_HANDLE].cleanup();
    } catch (err) {
      console.warn('drawaria image autodraw: cleanup error from previous run', err);
    }
  }

  const state = {
    running: false,
    abortRequested: false,
    prepared: false,
    previewDataUrl: null,
    pixelWidth: 0,
    pixelHeight: 0,
    palette: [],
    paletteUsage: [],
    assignments: null,
    sourceImageData: null,
    paletteSortMode: 'dark-first',
    selection: null,
    settings: {
      smoothnessPercent: 40,
      laneFanMultiplier: 100,
      coverageBoost: 100,
      detailMode: 'balanced',
      lowResEnhancer: true,
      edgeDetail: true,
      microDetail: true,
      autoStart: false,
      ditherStrength: 100,
      adaptiveTheme: true,
      spectralBoost: 120,
      highlightGlaze: true,
      textureWeave: false,
      gradientEcho: true,
    },
    metrics: {
      pixelCount: 0,
      paletteCount: 0,
      estimatedStrokes: 0,
      estimatedDurationMs: 0,
      laneCount: 0,
      scaleFactor: 1,
      boardWidth: 0,
      boardHeight: 0,
      targetWidth: 0,
      targetHeight: 0,
      selectionActive: false,
    },
    commandCache: null,
  };

  const funState = {
    running: false,
    abortRequested: false,
    pointerId: 8807,
    activeFeature: null,
  };

  const funSettings = {
    density: 70,
    tempo: 60,
    mirror: true,
    jitter: true,
  };

  const cleanupCallbacks = [];

  const wsBridge = installSocketBridge();
  cleanupCallbacks.push(() => wsBridge.release());

  function registerCleanup(fn) {
    cleanupCallbacks.push(fn);
  }

  function runCleanup() {
    while (cleanupCallbacks.length) {
      const fn = cleanupCallbacks.pop();
      try {
        fn();
      } catch (err) {
        console.warn('drawaria image autodraw: cleanup callback failed', err);
      }
    }
    delete window[SCRIPT_HANDLE];
  }

  function hexToRgb(hex) {
    const normalised = hex.replace('#', '');
    if (normalised.length !== 6) {
      return { r: 37, g: 99, b: 235 };
    }
    return {
      r: parseInt(normalised.slice(0, 2), 16),
      g: parseInt(normalised.slice(2, 4), 16),
      b: parseInt(normalised.slice(4, 6), 16),
    };
  }

  function rgbToHex(r, g, b) {
    return `#${[r, g, b]
      .map((channel) => Math.max(0, Math.min(255, Math.round(channel))).toString(16).padStart(2, '0'))
      .join('')}`;
  }

  function mixHex(baseHex, targetHex, amount) {
    const base = hexToRgb(baseHex);
    const target = hexToRgb(targetHex);
    const ratio = Math.max(0, Math.min(1, amount));
    const inv = 1 - ratio;
    return rgbToHex(
      base.r * inv + target.r * ratio,
      base.g * inv + target.g * ratio,
      base.b * inv + target.b * ratio
    );
  }

  function lightenHex(hex, amount) {
    return mixHex(hex, '#ffffff', amount);
  }

  function darkenHex(hex, amount) {
    return mixHex(hex, '#000000', amount);
  }

  function computeColourProfile(colour) {
    if (!colour) {
      return {
        luminance: 0,
        saturation: 0,
        value: 0,
        lightness: 0,
      };
    }
    const r = (colour.r ?? 0) / 255;
    const g = (colour.g ?? 0) / 255;
    const b = (colour.b ?? 0) / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const chroma = max - min;
    const saturation = max === 0 ? 0 : chroma / max;
    const lightness = (max + min) / 2;
    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    return {
      luminance,
      saturation,
      value: max,
      lightness,
    };
  }

  function formatNumber(value) {
    if (typeof value !== 'number' || Number.isNaN(value)) {
      return '—';
    }
    return value.toLocaleString('en-US');
  }

  function formatDuration(ms) {
    if (!ms || ms <= 0) {
      return '0s';
    }
    const seconds = ms / 1000;
    if (seconds < 60) {
      return `${seconds.toFixed(Math.max(0, seconds >= 10 ? 0 : 1))}s`;
    }
    const minutes = Math.floor(seconds / 60);
    const remaining = Math.round(seconds % 60);
    return `${minutes}m ${remaining.toString().padStart(2, '0')}s`;
  }

  class AbortPainting extends Error {
    constructor() {
      super('Drawing aborted');
      this.name = 'AbortPainting';
    }
  }

  class FunAbort extends Error {
    constructor() {
      super('Fun effect aborted');
      this.name = 'FunAbort';
    }
  }

  function ensureNotAborted() {
    if (state.abortRequested) {
      throw new AbortPainting();
    }
  }

  function ensureFunNotAborted() {
    if (funState.abortRequested) {
      throw new FunAbort();
    }
  }

  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const ui = createPanel();
  ui.paletteOrderSelect.value = state.paletteSortMode;
  registerCleanup(() => {
    ui.panel.remove();
    ui.style.remove();
  });

  registerCleanup(() => {
    funState.abortRequested = true;
  });

  const hiddenCanvas = document.createElement('canvas');
  const hiddenCtx = hiddenCanvas.getContext('2d', { willReadFrequently: true });

  let metricsUpdateScheduled = false;

  async function loadImageFromFile(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = event.target.result;
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  }

  function resizeImageToFit(img, maxDimension) {
    const scale = Math.min(1, maxDimension / Math.max(img.width, img.height));
    const width = Math.max(1, Math.round(img.width * scale));
    const height = Math.max(1, Math.round(img.height * scale));
    hiddenCanvas.width = width;
    hiddenCanvas.height = height;
    hiddenCtx.clearRect(0, 0, width, height);
    hiddenCtx.imageSmoothingEnabled = true;
    hiddenCtx.imageSmoothingQuality = 'high';
    hiddenCtx.drawImage(img, 0, 0, width, height);
    return hiddenCtx.getImageData(0, 0, width, height);
  }

  function previewImage(img, width, height) {
    const ctx = ui.previewCanvas.getContext('2d');
    const { width: previewW, height: previewH } = ui.previewCanvas;
    ctx.clearRect(0, 0, previewW, previewH);
    ctx.fillStyle = '#0f172a';
    ctx.fillRect(0, 0, previewW, previewH);
    ctx.save();
    ctx.shadowColor = 'rgba(15,23,42,0.45)';
    ctx.shadowBlur = 28;
    const scale = Math.min((previewW - 40) / width, (previewH - 40) / height);
    const drawW = width * scale;
    const drawH = height * scale;
    ctx.drawImage(hiddenCanvas, 0, 0, width, height, (previewW - drawW) / 2, (previewH - drawH) / 2, drawW, drawH);
    ctx.restore();
  }

  function quantizeToPalette(imageData, width, height, maxColors) {
    const data = imageData.data;
    const totalPixels = width * height;

    const map = new Map();

    for (let i = 0; i < totalPixels; i++) {
      const offset = i * 4;
      const alpha = data[offset + 3];
      if (alpha < 16) {
        continue;
      }
      const r = data[offset];
      const g = data[offset + 1];
      const b = data[offset + 2];
      const key = (r << 16) | (g << 8) | b;
      const record = map.get(key);
      if (record) {
        record.count += 1;
      } else {
        map.set(key, { r, g, b, count: 1 });
      }
    }

    if (!map.size) {
      const fallbackPalette = [{ r: 0, g: 0, b: 0, hex: '#000000' }];
      return {
        palette: fallbackPalette,
        assignments: new Uint16Array(totalPixels).fill(0xffff),
      };
    }

    const colours = Array.from(map.values());
    const targetColors = Math.max(1, Math.min(maxColors, colours.length));

    const boxes = [createColorBox(colours.map((_, idx) => idx), colours)];

    while (boxes.length < targetColors) {
      boxes.sort((a, b) => b.score - a.score);
      const box = boxes.shift();
      if (!box || box.indices.length <= 1) {
        if (box) {
          boxes.unshift(box);
        }
        break;
      }
      const split = splitBox(box, colours);
      if (!split || !split.low.indices.length || !split.high.indices.length) {
        boxes.unshift(box);
        break;
      }
      boxes.push(split.low, split.high);
    }

    const palette = boxes.map((box) => {
      let total = 0;
      let rSum = 0;
      let gSum = 0;
      let bSum = 0;
      for (const idx of box.indices) {
        const colour = colours[idx];
        total += colour.count;
        rSum += colour.r * colour.count;
        gSum += colour.g * colour.count;
        bSum += colour.b * colour.count;
      }
      if (!total) {
        total = 1;
      }
      const r = Math.round(rSum / total);
      const g = Math.round(gSum / total);
      const b = Math.round(bSum / total);
      return {
        r,
        g,
        b,
        hex: `#${[r, g, b]
          .map((component) => component.toString(16).padStart(2, '0'))
          .join('')}`,
      };
    });

    const assignments = assignPaletteWithDithering(imageData, width, height, palette);

    return { palette, assignments };
  }

  function createColorBox(indices, colours) {
    let rMin = 255;
    let rMax = 0;
    let gMin = 255;
    let gMax = 0;
    let bMin = 255;
    let bMax = 0;
    let population = 0;

    for (const idx of indices) {
      const colour = colours[idx];
      rMin = Math.min(rMin, colour.r);
      rMax = Math.max(rMax, colour.r);
      gMin = Math.min(gMin, colour.g);
      gMax = Math.max(gMax, colour.g);
      bMin = Math.min(bMin, colour.b);
      bMax = Math.max(bMax, colour.b);
      population += colour.count;
    }

    const rRange = rMax - rMin;
    const gRange = gMax - gMin;
    const bRange = bMax - bMin;
    const maxRange = Math.max(rRange, gRange, bRange, 1);

    return {
      indices,
      population,
      rRange,
      gRange,
      bRange,
      score: maxRange * Math.log(population + 1),
    };
  }

  function splitBox(box, colours) {
    const { rRange, gRange, bRange } = box;
    let component = 'r';
    if (gRange >= rRange && gRange >= bRange) {
      component = 'g';
    } else if (bRange >= rRange && bRange >= gRange) {
      component = 'b';
    }

    const sorted = [...box.indices].sort((a, b) => colours[a][component] - colours[b][component]);
    if (!sorted.length) {
      return null;
    }
    const total = sorted.reduce((acc, idx) => acc + colours[idx].count, 0);
    let midpoint = total / 2;
    let low = [];
    let high = [];
    let accumulator = 0;

    for (const idx of sorted) {
      if (accumulator < midpoint) {
        low.push(idx);
      } else {
        high.push(idx);
      }
      accumulator += colours[idx].count;
    }

    if (!low.length || !high.length) {
      const half = Math.ceil(sorted.length / 2);
      low = sorted.slice(0, half);
      high = sorted.slice(half);
    }

    return {
      low: createColorBox(low, colours),
      high: createColorBox(high, colours),
    };
  }

  function perceptualColourDistance(r1, g1, b1, r2, g2, b2) {
    const rMean = (r1 + r2) / 2;
    const dR = r1 - r2;
    const dG = g1 - g2;
    const dB = b1 - b2;
    return (
      (2 + rMean / 256) * dR * dR +
      4 * dG * dG +
      (2 + (255 - rMean) / 256) * dB * dB
    );
  }

  function clampChannel(value) {
    return Math.max(0, Math.min(255, value));
  }

  function assignPaletteWithDithering(imageData, width, height, palette) {
    const totalPixels = width * height;
    const assignments = new Uint16Array(totalPixels);
    if (!palette.length) {
      assignments.fill(0xffff);
      return assignments;
    }

    const ditherScale = (state.settings?.ditherStrength ?? 100) / 100;
    const data = imageData.data;
    const alphaChannel = new Uint8Array(totalPixels);
    const rBuffer = new Float32Array(totalPixels);
    const gBuffer = new Float32Array(totalPixels);
    const bBuffer = new Float32Array(totalPixels);

    for (let i = 0; i < totalPixels; i++) {
      const offset = i * 4;
      alphaChannel[i] = data[offset + 3];
      rBuffer[i] = data[offset];
      gBuffer[i] = data[offset + 1];
      bBuffer[i] = data[offset + 2];
    }

    const findNearest = (r, g, b) => {
      let bestIndex = 0;
      let bestDistance = Infinity;
      for (let j = 0; j < palette.length; j++) {
        const colour = palette[j];
        const distance = perceptualColourDistance(r, g, b, colour.r, colour.g, colour.b);
        if (distance < bestDistance) {
          bestDistance = distance;
          bestIndex = j;
        }
      }
      return bestIndex;
    };

    const distributeError = (x, y, errR, errG, errB, factor) => {
      if (ditherScale <= 0) {
        return;
      }
      if (x < 0 || x >= width || y < 0 || y >= height) {
        return;
      }
      const idx = y * width + x;
      if (alphaChannel[idx] < 16) {
        return;
      }
      const scaledFactor = factor * ditherScale;
      rBuffer[idx] += errR * scaledFactor;
      gBuffer[idx] += errG * scaledFactor;
      bBuffer[idx] += errB * scaledFactor;
    };

    for (let y = 0; y < height; y++) {
      const serpentine = y % 2 === 1;
      if (serpentine) {
        for (let x = width - 1; x >= 0; x--) {
          const idx = y * width + x;
          if (alphaChannel[idx] < 16) {
            assignments[idx] = 0xffff;
            continue;
          }
          const sourceR = clampChannel(rBuffer[idx]);
          const sourceG = clampChannel(gBuffer[idx]);
          const sourceB = clampChannel(bBuffer[idx]);
          const paletteIndex = findNearest(sourceR, sourceG, sourceB);
          assignments[idx] = paletteIndex;
          const target = palette[paletteIndex];
          const errR = sourceR - target.r;
          const errG = sourceG - target.g;
          const errB = sourceB - target.b;
          distributeError(x - 1, y, errR, errG, errB, 7 / 16);
          distributeError(x + 1, y + 1, errR, errG, errB, 3 / 16);
          distributeError(x, y + 1, errR, errG, errB, 5 / 16);
          distributeError(x - 1, y + 1, errR, errG, errB, 1 / 16);
        }
      } else {
        for (let x = 0; x < width; x++) {
          const idx = y * width + x;
          if (alphaChannel[idx] < 16) {
            assignments[idx] = 0xffff;
            continue;
          }
          const sourceR = clampChannel(rBuffer[idx]);
          const sourceG = clampChannel(gBuffer[idx]);
          const sourceB = clampChannel(bBuffer[idx]);
          const paletteIndex = findNearest(sourceR, sourceG, sourceB);
          assignments[idx] = paletteIndex;
          const target = palette[paletteIndex];
          const errR = sourceR - target.r;
          const errG = sourceG - target.g;
          const errB = sourceB - target.b;
          distributeError(x + 1, y, errR, errG, errB, 7 / 16);
          distributeError(x - 1, y + 1, errR, errG, errB, 3 / 16);
          distributeError(x, y + 1, errR, errG, errB, 5 / 16);
          distributeError(x + 1, y + 1, errR, errG, errB, 1 / 16);
        }
      }
    }

    return assignments;
  }

  function renderPaletteSwatches(palette, usage = []) {
    if (!ui.paletteStrip) {
      return;
    }
    ui.paletteStrip.innerHTML = '';
    let dominantIndex = 0;
    if (usage.length) {
      let best = -Infinity;
      usage.forEach((value, index) => {
        if (value > best) {
          best = value;
          dominantIndex = index;
        }
      });
    }
    const totalUsage = usage.reduce((acc, value) => acc + value, 0) || 1;
    palette.forEach((color, index) => {
      const swatch = document.createElement('div');
      swatch.className = 'pxa-swatch';
      swatch.style.background = color.hex;
      if (index === dominantIndex) {
        swatch.dataset.dominant = 'true';
      }
      const percentage = usage[index] ? ((usage[index] / totalUsage) * 100).toFixed(2) : null;
      swatch.title = `${index + 1}. ${color.hex}${percentage ? ` • ${percentage}%` : ''}`;
      ui.paletteStrip.appendChild(swatch);
    });
    const summaryText = `${palette.length} colours (max ${MAX_COLOUR_CAPACITY})`;
    if (ui.paletteSummary) {
      ui.paletteSummary.textContent = summaryText;
    }
    if (ui.paletteSummarySecondary) {
      ui.paletteSummarySecondary.textContent = summaryText;
    }
  }

  function renderPaletteInsights(palette, usage = []) {
    if (!ui.paletteInsights) {
      return;
    }
    ui.paletteInsights.innerHTML = '';
    if (!palette.length) {
      const emptyCard = document.createElement('div');
      emptyCard.className = 'pxa-insight-card';
      emptyCard.innerHTML = '<strong>Palette pending</strong><span>Import an image to unlock coverage analytics and colour rankings.</span>';
      ui.paletteInsights.appendChild(emptyCard);
      return;
    }
    const totalUsage = usage.reduce((acc, value) => acc + value, 0) || 1;
    const ranked = palette
      .map((colour, index) => ({
        index,
        hex: colour.hex,
        percent: usage[index] ? (usage[index] / totalUsage) * 100 : 0,
      }))
      .sort((a, b) => b.percent - a.percent)
      .slice(0, 4);
    const topColoursCard = document.createElement('div');
    topColoursCard.className = 'pxa-insight-card';
    topColoursCard.innerHTML = `<strong>Dominant colours</strong>${ranked
      .map((entry) => `<span>${entry.index + 1}. ${entry.hex} — ${entry.percent.toFixed(2)}%</span>`)
      .join('')}`;
    ui.paletteInsights.appendChild(topColoursCard);

    const cadenceCard = document.createElement('div');
    cadenceCard.className = 'pxa-insight-card';
    cadenceCard.innerHTML = `<strong>Stroke cadence</strong><span>${formatNumber(
      state.metrics.estimatedStrokes
    )} planned strokes • lane fan ×${state.metrics.laneCount || 1}</span><span>Smoothness ${state.settings.smoothnessPercent}% • Coverage ${state.settings.coverageBoost}%</span>`;
    ui.paletteInsights.appendChild(cadenceCard);

    const detailLabels = {
      balanced: 'Balanced detail',
      max: 'Maximum detail',
      minimal: 'Minimal detail',
    };
    const detailCard = document.createElement('div');
    detailCard.className = 'pxa-insight-card';
    detailCard.innerHTML = `<strong>Detail profile</strong><span>${
      detailLabels[state.settings.detailMode] || state.settings.detailMode
    }</span><span>Dither strength ${state.settings.ditherStrength}% • Low-res enhancer ${
      state.settings.lowResEnhancer ? 'on' : 'off'
    }</span>`;
    ui.paletteInsights.appendChild(detailCard);

    const harmonyCard = document.createElement('div');
    harmonyCard.className = 'pxa-insight-card';
    harmonyCard.innerHTML = `<strong>Harmony engines</strong><span>Spectral accent ${
      state.settings.spectralBoost
    }%</span><span>Glow ${state.settings.highlightGlaze !== false ? 'on' : 'off'} • Texture ${
      state.settings.textureWeave ? 'on' : 'off'
    } • Echo ${state.settings.gradientEcho !== false ? 'on' : 'off'}</span>`;
    ui.paletteInsights.appendChild(harmonyCard);
  }

  function applyPanelThemeFromPalette(palette, usage = []) {
    if (!ui.panel) {
      return;
    }
    if (state.settings.adaptiveTheme === false || !palette.length) {
      ui.panel.style.setProperty('--pxa-accent', '#2563eb');
      ui.panel.style.setProperty('--pxa-accent-dark', '#1e3a8a');
      ui.panel.style.setProperty('--pxa-accent-soft', 'rgba(37,99,235,0.16)');
      ui.panel.style.setProperty('--pxa-ambient', 'rgba(148,163,184,0.22)');
      return;
    }
    let dominantIndex = 0;
    if (usage.length) {
      let best = -Infinity;
      usage.forEach((value, index) => {
        if (value > best) {
          best = value;
          dominantIndex = index;
        }
      });
    }
    const accent = palette[dominantIndex]?.hex || '#2563eb';
    ui.panel.style.setProperty('--pxa-accent', accent);
    ui.panel.style.setProperty('--pxa-accent-dark', darkenHex(accent, 0.35));
    ui.panel.style.setProperty('--pxa-accent-soft', lightenHex(accent, 0.75));
    ui.panel.style.setProperty('--pxa-ambient', lightenHex(accent, 0.9));
  }

  function updateModeLabel() {
    if (!ui.modeLabel) {
      return;
    }
    const detailLabels = {
      balanced: 'Balanced detail',
      max: 'Maximum detail',
      minimal: 'Minimal detail',
    };
    const detailLabel = detailLabels[state.settings.detailMode] || state.settings.detailMode;
    const extras = [];
    if (state.settings.highlightGlaze !== false) {
      extras.push('glow glaze');
    }
    if (state.settings.textureWeave) {
      extras.push('texture weave');
    }
    if (state.settings.gradientEcho !== false) {
      extras.push('edge echo');
    }
    ui.modeLabel.textContent = `${detailLabel} • ${state.settings.smoothnessPercent}% smooth${
      extras.length ? ` • ${extras.join(' + ')}` : ''
    }`;
  }

  const funFeatures = {
    aurora: {
      label: 'Aurora sweep',
      description: 'Layered sine ribbons glide horizontally with pointer-drawn passes.',
      estimate(region, options) {
        const stripes = Math.max(3, Math.round((options.density || 0) / 12));
        return Math.max(1, stripes * (options.mirror ? 2 : 1));
      },
      async run(ctx) {
        const stripes = Math.max(3, Math.round((ctx.options.density || 0) / 12));
        const width = Math.max(1, ctx.region.width);
        const height = Math.max(1, ctx.region.height);
        const baseAmplitude = Math.max(4, height / Math.max(6, stripes * 2));
        const steps = Math.max(60, Math.round(width / 3));
        for (let lane = 0; lane < stripes; lane += 1) {
          ctx.ensureActive();
          const amplitude = baseAmplitude * (1 + lane / (stripes * 1.25));
          const frequency = 1.6 + lane * 0.35;
          const centerY = ctx.region.y + (height / (stripes + 1)) * (lane + 0.6);
          const path = [];
          for (let step = 0; step <= steps; step += 1) {
            const t = step / steps;
            let x = ctx.region.x + t * width;
            let y = centerY + Math.sin(t * Math.PI * frequency + lane * 0.4) * amplitude;
            if (ctx.options.jitter) {
              y += Math.cos((t * Math.PI * 6) + lane) * amplitude * 0.18;
            }
            x = clamp(x, ctx.minCanvasX, ctx.maxCanvasX);
            y = clamp(y, ctx.minCanvasY, ctx.maxCanvasY);
            path.push({ x, y });
          }
          await ctx.stroke(path, 0.58);
          ctx.advanceProgress();
          if (ctx.options.mirror) {
            const mirrored = path.map((point, index) => {
              const offset = ctx.options.jitter ? Math.sin(index * 0.25) * amplitude * 0.08 : 0;
              return {
                x: clamp(ctx.region.x + ctx.region.width - (point.x - ctx.region.x), ctx.minCanvasX, ctx.maxCanvasX),
                y: clamp(point.y + offset, ctx.minCanvasY, ctx.maxCanvasY),
              };
            });
            await ctx.stroke(mirrored, 0.58);
            ctx.advanceProgress();
          }
        }
      },
    },
    vortex: {
      label: 'Vortex bloom',
      description: 'Spirals orbit from the centre to sketch swirling blooms with pointer strokes.',
      estimate(region, options) {
        const arms = options.mirror ? 4 : 3;
        return Math.max(arms, 1);
      },
      async run(ctx) {
        const arms = ctx.options.mirror ? 4 : 3;
        const loops = Math.max(3, Math.round((ctx.options.density || 0) / 15));
        const steps = loops * 160;
        for (let arm = 0; arm < arms; arm += 1) {
          ctx.ensureActive();
          const offset = (2 * Math.PI * arm) / arms;
          const path = [];
          for (let step = 0; step <= steps; step += 1) {
            const t = step / steps;
            const angle = t * loops * Math.PI * 2 + offset;
            let radius = (Math.min(ctx.region.width, ctx.region.height) / 2) * Math.pow(t, 0.9);
            if (ctx.options.jitter) {
              radius += Math.sin(angle * 0.6) * radius * 0.08;
            }
            let x = ctx.region.x + ctx.region.width / 2 + Math.cos(angle) * radius;
            let y = ctx.region.y + ctx.region.height / 2 + Math.sin(angle) * radius * (ctx.options.mirror ? 0.9 : 1);
            x = clamp(x, ctx.minCanvasX, ctx.maxCanvasX);
            y = clamp(y, ctx.minCanvasY, ctx.maxCanvasY);
            path.push({ x, y });
          }
          await ctx.stroke(path, 0.5);
          ctx.advanceProgress();
        }
      },
    },
    firefly: {
      label: 'Firefly scatter',
      description: 'Launches sparkling bursts of short pointer flutters across the region.',
      estimate(region, options) {
        const base = Math.max(12, Math.round((options.density || 0) * 0.8));
        return Math.max(1, base * (options.mirror ? 2 : 1));
      },
      async run(ctx) {
        const base = Math.max(12, Math.round((ctx.options.density || 0) * 0.8));
        for (let i = 0; i < base; i += 1) {
          ctx.ensureActive();
          const originX = ctx.region.x + ctx.random() * ctx.region.width;
          const originY = ctx.region.y + ctx.random() * ctx.region.height;
          const heading = ctx.random() * Math.PI * 2;
          const length = Math.max(10, Math.min(ctx.region.width, ctx.region.height) * (0.18 + ctx.random() * 0.12));
          const segments = 4 + Math.floor(ctx.random() * 4);
          const path = [];
          for (let s = 0; s <= segments; s += 1) {
            const t = s / segments;
            const curve = Math.sin(t * Math.PI);
            let x = originX + Math.cos(heading) * length * t;
            let y = originY + Math.sin(heading) * length * t + curve * length * 0.25;
            if (ctx.options.jitter) {
              x += (ctx.random() - 0.5) * length * 0.18;
              y += (ctx.random() - 0.5) * length * 0.12;
            }
            x = clamp(x, ctx.minCanvasX, ctx.maxCanvasX);
            y = clamp(y, ctx.minCanvasY, ctx.maxCanvasY);
            path.push({ x, y });
          }
          await ctx.stroke(path, 0.45);
          ctx.advanceProgress();
          if (ctx.options.mirror) {
            const mirrored = path.map((point) => ({
              x: clamp(ctx.region.x + ctx.region.width - (point.x - ctx.region.x), ctx.minCanvasX, ctx.maxCanvasX),
              y: point.y,
            }));
            await ctx.stroke(mirrored, 0.45);
            ctx.advanceProgress();
          }
        }
      },
    },
    cascade: {
      label: 'Cascade drapery',
      description: 'Pointer sweeps unfurl silky waterfall ribbons that ripple across the canvas.',
      estimate(region, options) {
        const rows = Math.max(4, Math.round((options.density || 0) / 10));
        return Math.max(1, rows * (options.mirror ? 2 : 1));
      },
      async run(ctx) {
        const rows = Math.max(4, Math.round((ctx.options.density || 0) / 10));
        const width = Math.max(1, ctx.region.width);
        const height = Math.max(1, ctx.region.height);
        const amplitudeBase = Math.max(6, height * 0.08);
        for (let row = 0; row < rows; row += 1) {
          ctx.ensureActive();
          const baseY = ctx.region.y + (height / (rows + 1)) * (row + 1);
          const waveAmp = amplitudeBase * (1 + row / (rows * 0.9));
          const steps = Math.max(80, Math.round(width / 4));
          const path = [];
          for (let step = 0; step <= steps; step += 1) {
            const t = step / steps;
            const x = clamp(ctx.region.x + t * width, ctx.minCanvasX, ctx.maxCanvasX);
            let y = baseY + Math.sin(t * Math.PI * (1.6 + row * 0.25)) * waveAmp;
            if (ctx.options.jitter) {
              y += (ctx.random() - 0.5) * waveAmp * 0.35;
            }
            y = clamp(y, ctx.minCanvasY, ctx.maxCanvasY);
            path.push({ x, y });
          }
          await ctx.stroke(path, 0.52);
          ctx.advanceProgress();
          if (ctx.options.mirror) {
            const mirrored = path.map((point, index) => ({
              x: clamp(ctx.region.x + ctx.region.width - (point.x - ctx.region.x), ctx.minCanvasX, ctx.maxCanvasX),
              y: clamp(
                ctx.region.y + ctx.region.height - (point.y - ctx.region.y) + Math.sin(index * 0.08) * waveAmp * 0.12,
                ctx.minCanvasY,
                ctx.maxCanvasY
              ),
            }));
            await ctx.stroke(mirrored, 0.48);
            ctx.advanceProgress();
          }
        }
      },
    },
  };

  function updateFunDescription() {
    if (!ui.funDescription || !ui.funModeSelect) {
      return;
    }
    const effect = funFeatures[ui.funModeSelect.value];
    if (effect) {
      ui.funDescription.textContent = effect.description;
    } else {
      ui.funDescription.textContent = 'Select an effect to view its details.';
    }
  }

  function resolveFunRegion(canvas) {
    const width = canvas?.width || 0;
    const height = canvas?.height || 0;
    if (!state.selection) {
      return { x: 0, y: 0, width, height };
    }
    const sel = state.selection;
    const x = clamp(Math.round(sel.normX * width), 0, width);
    const y = clamp(Math.round(sel.normY * height), 0, height);
    const w = Math.max(1, Math.round(sel.normWidth * width));
    const h = Math.max(1, Math.round(sel.normHeight * height));
    const maxWidth = Math.max(1, width - x);
    const maxHeight = Math.max(1, height - y);
    return {
      x,
      y,
      width: clamp(w, 1, maxWidth),
      height: clamp(h, 1, maxHeight),
    };
  }

  function canvasPointToClient(canvas, x, y) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = rect.width / canvas.width || 1;
    const scaleY = rect.height / canvas.height || 1;
    return {
      clientX: rect.left + x * scaleX,
      clientY: rect.top + y * scaleY,
    };
  }

  function dispatchCanvasPointer(canvas, type, pointerId, x, y, options = {}) {
    const coords = canvasPointToClient(canvas, x, y);
    const eventInit = {
      pointerId,
      pointerType: 'pen',
      clientX: coords.clientX,
      clientY: coords.clientY,
      buttons: type === 'pointerup' ? 0 : 1,
      pressure: type === 'pointerup' ? 0 : options.pressure ?? 0.6,
      tiltX: options.tiltX ?? 0,
      tiltY: options.tiltY ?? 0,
      bubbles: true,
      cancelable: true,
    };
    const event = new PointerEvent(type, eventInit);
    canvas.dispatchEvent(event);
  }

  async function performPointerStroke(canvas, pointerId, points, stepDelay, pressure = 0.6) {
    if (!points.length) {
      return;
    }
    ensureFunNotAborted();
    const first = points[0];
    dispatchCanvasPointer(canvas, 'pointerdown', pointerId, first.x, first.y, { pressure });
    try {
      if (canvas.setPointerCapture) {
        try {
          canvas.setPointerCapture(pointerId);
        } catch (err) {
          // ignore capture failures
        }
      }
      for (let i = 1; i < points.length; i += 1) {
        ensureFunNotAborted();
        const point = points[i];
        dispatchCanvasPointer(canvas, 'pointermove', pointerId, point.x, point.y, { pressure });
        await wait(stepDelay);
      }
    } finally {
      const last = points[points.length - 1];
      dispatchCanvasPointer(canvas, 'pointerup', pointerId, last.x, last.y, { pressure: 0 });
      if (canvas.releasePointerCapture) {
        try {
          canvas.releasePointerCapture(pointerId);
        } catch (err) {
          // ignore release failures
        }
      }
    }
  }

  function computeFunTiming(tempo) {
    const raw = Number(tempo);
    const clampedTempo = clamp(Number.isFinite(raw) ? raw : 60, 10, 160);
    const stepDelay = Math.max(2, Math.round(22 - clampedTempo / 6));
    const strokeGap = Math.max(6, Math.round(stepDelay * 2));
    return { stepDelay, strokeGap };
  }

  function createFunContext(canvas, region, options, stepDelay, strokeGap, onProgress) {
    const pointerId = funState.pointerId;
    const minCanvasX = Math.max(0, Math.min(canvas.width, region.x));
    const maxCanvasX = Math.max(minCanvasX + 1, Math.min(canvas.width, region.x + region.width));
    const minCanvasY = Math.max(0, Math.min(canvas.height, region.y));
    const maxCanvasY = Math.max(minCanvasY + 1, Math.min(canvas.height, region.y + region.height));
    let completed = 0;
    const clampPoint = (point) => ({
      x: clamp(point.x, minCanvasX, maxCanvasX),
      y: clamp(point.y, minCanvasY, maxCanvasY),
    });
    return {
      canvas,
      region,
      options,
      pointerId,
      stepDelay,
      strokeGap,
      minCanvasX,
      maxCanvasX,
      minCanvasY,
      maxCanvasY,
      random: Math.random,
      ensureActive: ensureFunNotAborted,
      async stroke(points, pressure = 0.6) {
        ensureFunNotAborted();
        if (!points || points.length < 2) {
          return;
        }
        const safePoints = points.map(clampPoint);
        await performPointerStroke(canvas, pointerId, safePoints, stepDelay, pressure);
        await wait(strokeGap);
      },
      advanceProgress(increment = 1) {
        completed += increment;
        if (typeof onProgress === 'function') {
          onProgress(completed);
        }
      },
      setProgress(value) {
        completed = value;
        if (typeof onProgress === 'function') {
          onProgress(completed);
        }
      },
    };
  }

  async function startFunEffect() {
    if (!ui.funModeSelect || !ui.funRunButton) {
      return;
    }
    if (state.running) {
      updateFunStatus('Stop the image painter before launching a fun effect.');
      return;
    }
    if (funState.running) {
      updateFunStatus('A fun effect is already running.');
      return;
    }
    const effectKey = ui.funModeSelect.value;
    const effect = funFeatures[effectKey];
    if (!effect) {
      updateFunStatus('Select a fun effect to begin.');
      return;
    }
    const canvas = selectLargestCanvas();
    if (!canvas) {
      updateFunStatus('Canvas not found — join a Drawaria room first.');
      return;
    }
    if (!canvas.width || !canvas.height) {
      updateFunStatus('Canvas is not ready yet — wait for it to load.');
      return;
    }
    const region = resolveFunRegion(canvas);
    if (!region.width || !region.height) {
      updateFunStatus('Selection is too small for the fun lab.');
      return;
    }
    const options = {
      density: funSettings.density,
      tempo: funSettings.tempo,
      mirror: funSettings.mirror,
      jitter: funSettings.jitter,
    };
    const { stepDelay, strokeGap } = computeFunTiming(options.tempo);
    const total = Math.max(1, effect.estimate(region, options));
    funState.running = true;
    funState.abortRequested = false;
    funState.activeFeature = effectKey;
    ui.funRunButton.disabled = true;
    if (ui.funStopButton) {
      ui.funStopButton.disabled = false;
    }
    updateFunProgress(0);
    updateFunStatus(`Running ${effect.label}…`);
    let aborted = false;
    try {
      const context = createFunContext(canvas, region, options, stepDelay, strokeGap, (completed) => {
        const percent = (completed / total) * 100;
        updateFunProgress(percent);
      });
      await effect.run(context);
      aborted = funState.abortRequested;
      if (aborted) {
        updateFunStatus('Fun effect aborted.');
      } else {
        updateFunProgress(100);
        updateFunStatus(`${effect.label} complete!`);
      }
    } catch (err) {
      if (err instanceof FunAbort) {
        updateFunStatus('Fun effect aborted.');
      } else {
        console.error('drawaria image autodraw fun lab error', err);
        updateFunStatus(`Fun effect error: ${err.message || err}`);
      }
    } finally {
      funState.running = false;
      funState.activeFeature = null;
      funState.abortRequested = false;
      if (ui.funRunButton) {
        ui.funRunButton.disabled = false;
      }
      if (ui.funStopButton) {
        ui.funStopButton.disabled = true;
      }
    }
  }

  function stopFunEffect() {
    if (!funState.running) {
      updateFunStatus('No fun effect is currently running.');
      return;
    }
    funState.abortRequested = true;
    updateFunStatus('Stopping fun effect…');
  }

  function updateFunProgress(percent) {
    if (!ui.funProgressBar) {
      return;
    }
    const numeric = Number(percent);
    const clampedPercent = clamp(Number.isFinite(numeric) ? numeric : 0, 0, 100);
    ui.funProgressBar.style.width = `${clampedPercent}%`;
  }

  function updateFunStatus(message) {
    if (!ui.funStatus) {
      return;
    }
    ui.funStatus.textContent = message;
  }

  function updateSelectionUI() {
    if (!ui.selectionDetails) {
      return;
    }
    if (state.selection) {
      const sel = state.selection;
      const boardW = state.metrics.boardWidth || sel.boardWidth || 0;
      const boardH = state.metrics.boardHeight || sel.boardHeight || 0;
      const widthPx = Math.round(boardW * sel.normWidth);
      const heightPx = Math.round(boardH * sel.normHeight);
      const startX = Math.round(boardW * sel.normX);
      const startY = Math.round(boardH * sel.normY);
      ui.selectionDetails.textContent = `Region ${widthPx}×${heightPx}px @ (${startX}, ${startY})`;
      ui.selectionDetails.dataset.state = 'active';
      if (ui.clearRegionButton) {
        ui.clearRegionButton.disabled = false;
      }
    } else {
      ui.selectionDetails.textContent = 'Full canvas coverage';
      ui.selectionDetails.dataset.state = 'inactive';
      if (ui.clearRegionButton) {
        ui.clearRegionButton.disabled = true;
      }
    }
  }

  function updateMetricsUI() {
    if (!ui.metricResolution) {
      return;
    }
    if (state.pixelWidth && state.pixelHeight) {
      ui.metricResolution.textContent = `${state.pixelWidth}×${state.pixelHeight}`;
    } else {
      ui.metricResolution.textContent = '—';
    }
    const scale = state.metrics.scaleFactor || 1;
    const targetWidth = state.metrics.targetWidth || state.metrics.boardWidth;
    const targetHeight = state.metrics.targetHeight || state.metrics.boardHeight;
    if (scale && targetWidth && targetHeight) {
      const label = state.metrics.selectionActive ? `selection ${Math.round(targetWidth)}×${Math.round(targetHeight)}` : `${Math.round(targetWidth)}×${Math.round(targetHeight)}`;
      ui.metricScale.textContent = `Scaled ×${scale.toFixed(2)} into ${label}`;
    } else {
      ui.metricScale.textContent = 'Fit-to-canvas ready';
    }
    ui.metricPalette.textContent = formatNumber(state.metrics.paletteCount || state.palette.length || 0);
    const orderLabels = {
      'dark-first': 'Dark → Light',
      'light-first': 'Light → Dark',
      coverage: 'Coverage priority',
    };
    ui.metricPaletteNote.textContent = orderLabels[state.paletteSortMode] || state.paletteSortMode;
    ui.metricStrokes.textContent = formatNumber(state.metrics.estimatedStrokes || 0);
    ui.metricLanes.textContent = `Lane fan ×${state.metrics.laneCount || 1}`;
    ui.metricEta.textContent = formatDuration(state.metrics.estimatedDurationMs || 0);
    ui.metricDelay.textContent = `8ms stroke delay • ${formatNumber(state.metrics.estimatedStrokes || 0)} strokes`;
  }

  function getSettingsSignature() {
    const s = state.settings;
    return [
      state.paletteSortMode,
      s.smoothnessPercent,
      s.laneFanMultiplier,
      s.coverageBoost,
      s.detailMode,
      s.lowResEnhancer,
      s.edgeDetail,
      s.microDetail,
      s.ditherStrength,
      s.spectralBoost,
      s.highlightGlaze,
      s.textureWeave,
      s.gradientEcho,
    ].join('|');
  }

  function getSelectionSignature() {
    if (!state.selection) {
      return 'full';
    }
    const sel = state.selection;
    const toFixed = (value, fallback) => {
      const num = Number(value);
      if (!Number.isFinite(num)) {
        return fallback;
      }
      return num.toFixed(4);
    };
    return [
      toFixed(sel.normX, '0.0000'),
      toFixed(sel.normY, '0.0000'),
      toFixed(sel.normWidth, '1.0000'),
      toFixed(sel.normHeight, '1.0000'),
    ].join('|');
  }

  async function scheduleMetricsUpdate() {
    if (metricsUpdateScheduled || !state.prepared || state.running) {
      return;
    }
    metricsUpdateScheduled = true;
    try {
      await wait(80);
      const canvas = selectLargestCanvas();
      if (!canvas) {
        updateMetricsUI();
        return;
      }
      const commands = buildPixelCommands(canvas.width, canvas.height);
      if (!commands.length) {
        updateMetricsUI();
      }
    } finally {
      metricsUpdateScheduled = false;
    }
  }

  async function prepareFromFile(file) {
    if (!file) {
      throw new Error('Select an image file to begin.');
    }

    ui.previewLoading.classList.add('visible');
    ui.progressBar.style.width = '0%';
    ui.progressLabel.textContent = '0%';
    ui.status.textContent = 'Loading image…';

    try {
      await wait(10);

      const maxDimension = Number(ui.dimensionInput.value) || 500;
      const image = await loadImageFromFile(file);
      const imageData = resizeImageToFit(image, maxDimension);
      const { width, height } = imageData;
      state.sourceImageData = imageData;
      state.pixelWidth = width;
      state.pixelHeight = height;
      previewImage(image, width, height);

      ui.status.textContent = `Quantising colours (≤${MAX_COLOUR_CAPACITY})…`;
      await wait(10);
      const { palette, assignments } = quantizeToPalette(
        imageData,
        width,
        height,
        MAX_COLOUR_CAPACITY
      );

      state.palette = palette;
      state.assignments = assignments;
      state.prepared = true;
      state.previewDataUrl = hiddenCanvas.toDataURL('image/png');
      state.commandCache = null;
      const usage = new Float64Array(palette.length);
      for (let i = 0; i < assignments.length; i++) {
        const paletteIndex = assignments[i];
        if (paletteIndex !== 0xffff && usage[paletteIndex] !== undefined) {
          usage[paletteIndex] += 1;
        }
      }
      state.paletteUsage = Array.from(usage);
      state.metrics.pixelCount = width * height;
      state.metrics.paletteCount = palette.length;
      state.metrics.estimatedStrokes = 0;
      state.metrics.estimatedDurationMs = 0;
      state.metrics.scaleFactor = 0;
      state.metrics.boardWidth = 0;
      state.metrics.boardHeight = 0;
      state.metrics.targetWidth = 0;
      state.metrics.targetHeight = 0;
      state.metrics.selectionActive = false;
      renderPaletteSwatches(palette, state.paletteUsage);
      renderPaletteInsights(palette, state.paletteUsage);
      applyPanelThemeFromPalette(palette, state.paletteUsage);
      updateModeLabel();
      updateMetricsUI();
      ui.status.textContent = `Ready: ${width}×${height}px, ${palette.length} colours.`;
      await scheduleMetricsUpdate();
    } finally {
      ui.previewLoading.classList.remove('visible');
    }
  }

  async function waitForSocket(timeout = 5000) {
    const start = performance.now();
    while (performance.now() - start < timeout) {
      const socket = wsBridge.getSocket();
      if (socket && socket.readyState === WebSocket.OPEN) {
        return socket;
      }
      await wait(120);
    }
    return null;
  }



  function buildPixelCommands(canvasWidth, canvasHeight) {
    const assignments = state.assignments;
    const palette = state.palette;
    const width = state.pixelWidth;
    const height = state.pixelHeight;
    const imageData = state.sourceImageData;

    if (
      !assignments ||
      !palette.length ||
      !width ||
      !height ||
      !canvasWidth ||
      !canvasHeight
    ) {
      return [];
    }

    const boardWidth = canvasWidth;
    const boardHeight = canvasHeight;
    let targetX = 0;
    let targetY = 0;
    let targetWidth = boardWidth;
    let targetHeight = boardHeight;
    let selectionActive = false;

    if (state.selection) {
      const sel = state.selection;
      const normWidth = clamp(sel.normWidth ?? 1, 1 / Math.max(1, boardWidth), 1);
      const normHeight = clamp(sel.normHeight ?? 1, 1 / Math.max(1, boardHeight), 1);
      const normX = clamp(sel.normX ?? 0, 0, 1 - normWidth);
      const normY = clamp(sel.normY ?? 0, 0, 1 - normHeight);
      targetWidth = Math.max(1, normWidth * boardWidth);
      targetHeight = Math.max(1, normHeight * boardHeight);
      targetX = clamp(normX * boardWidth, 0, Math.max(0, boardWidth - targetWidth));
      targetY = clamp(normY * boardHeight, 0, Math.max(0, boardHeight - targetHeight));
      selectionActive = true;
      sel.boardWidth = boardWidth;
      sel.boardHeight = boardHeight;
    }

    const scaleX = targetWidth / width;
    const scaleY = targetHeight / height;
    const scale = Math.min(scaleX, scaleY);
    const drawWidth = width * scale;
    const drawHeight = height * scale;
    const offsetX = clamp(targetX + (targetWidth - drawWidth) / 2, 0, Math.max(0, boardWidth - drawWidth));
    const offsetY = clamp(targetY + (targetHeight - drawHeight) / 2, 0, Math.max(0, boardHeight - drawHeight));

    state.metrics.scaleFactor = scale;
    state.metrics.boardWidth = boardWidth;
    state.metrics.boardHeight = boardHeight;
    state.metrics.targetWidth = targetWidth;
    state.metrics.targetHeight = targetHeight;
    state.metrics.selectionActive = selectionActive;

    const settingsSignature = getSettingsSignature();
    const selectionSignature = getSelectionSignature();
    const cacheKey = `${width}x${height}|${boardWidth}x${boardHeight}|${targetWidth.toFixed(2)}x${targetHeight.toFixed(2)}|${settingsSignature}|${selectionSignature}`;
    if (state.commandCache && state.commandCache.key === cacheKey) {
      Object.assign(state.metrics, state.commandCache.metrics);
      updateMetricsUI();
      updateSelectionUI();
      return state.commandCache.commands;
    }

    const colourCommands = Array.from({ length: palette.length }, () => []);
    const paletteProfiles = palette.map((colour) => computeColourProfile(colour));
    const colourCoverage = new Float64Array(palette.length);
    const phaseOrder = {
      fill: 0,
      'fill-secondary': 1,
      detail: 2,
      'detail-edge': 3,
      glaze: 4,
      texture: 5,
      echo: 6,
    };

    const alphaData = imageData?.data ?? null;
    const detailMask = new Uint8Array(width * height);
    if (alphaData) {
      const threshold = 4200;
      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          const idx = y * width + x;
          const paletteIndex = assignments[idx];
          if (paletteIndex === 0xffff) {
            continue;
          }
          const offset = idx * 4;
          const r = alphaData[offset];
          const g = alphaData[offset + 1];
          const b = alphaData[offset + 2];

          let maxDiff = 0;
          if (x > 0) {
            const left = offset - 4;
            maxDiff = Math.max(
              maxDiff,
              perceptualColourDistance(r, g, b, alphaData[left], alphaData[left + 1], alphaData[left + 2])
            );
          }
          if (x + 1 < width) {
            const right = offset + 4;
            maxDiff = Math.max(
              maxDiff,
              perceptualColourDistance(r, g, b, alphaData[right], alphaData[right + 1], alphaData[right + 2])
            );
          }
          if (y > 0) {
            const up = offset - width * 4;
            maxDiff = Math.max(
              maxDiff,
              perceptualColourDistance(r, g, b, alphaData[up], alphaData[up + 1], alphaData[up + 2])
            );
          }
          if (y + 1 < height) {
            const down = offset + width * 4;
            maxDiff = Math.max(
              maxDiff,
              perceptualColourDistance(r, g, b, alphaData[down], alphaData[down + 1], alphaData[down + 2])
            );
          }

          if (maxDiff > threshold) {
            detailMask[idx] = 1;
          }
        }
      }
    }

    const edgeMask = new Uint8Array(width * height);
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const idx = y * width + x;
        const paletteIndex = assignments[idx];
        if (paletteIndex === 0xffff) {
          continue;
        }
        let isEdge = false;
        if (x > 0) {
          const neighbour = assignments[idx - 1];
          if (neighbour !== paletteIndex && neighbour !== 0xffff) {
            isEdge = true;
          }
        }
        if (x + 1 < width) {
          const neighbour = assignments[idx + 1];
          if (neighbour !== paletteIndex && neighbour !== 0xffff) {
            isEdge = true;
          }
        }
        if (y > 0) {
          const neighbour = assignments[idx - width];
          if (neighbour !== paletteIndex && neighbour !== 0xffff) {
            isEdge = true;
          }
        }
        if (y + 1 < height) {
          const neighbour = assignments[idx + width];
          if (neighbour !== paletteIndex && neighbour !== 0xffff) {
            isEdge = true;
          }
        }
        if (isEdge) {
          edgeMask[idx] = 1;
        }
      }
    }

    const pushStroke = (paletteIndex, x1, y1, x2, y2, orientation, phase = 'fill') => {
      if (paletteIndex < 0 || paletteIndex >= colourCommands.length) {
        return;
      }

      const minX = Math.min(x1, x2);
      const maxX = Math.max(x1, x2);
      const minY = Math.min(y1, y2);
      const maxY = Math.max(y1, y2);

      if (maxX <= 0 || maxY <= 0 || minX >= boardWidth || minY >= boardHeight) {
        return;
      }

      let nx1 = clamp(x1 / boardWidth, 0, 1);
      let ny1 = clamp(y1 / boardHeight, 0, 1);
      let nx2 = clamp(x2 / boardWidth, 0, 1);
      let ny2 = clamp(y2 / boardHeight, 0, 1);

      const epsilonX = boardWidth > 0 ? 0.75 / boardWidth : 0;
      const epsilonY = boardHeight > 0 ? 0.75 / boardHeight : 0;

      if (Math.abs(nx1 - nx2) < 1e-5) {
        nx2 = clamp(nx2 + (nx2 >= nx1 ? epsilonX : -epsilonX), 0, 1);
      }
      if (Math.abs(ny1 - ny2) < 1e-5) {
        ny2 = clamp(ny2 + (ny2 >= ny1 ? epsilonY : -epsilonY), 0, 1);
      }

      colourCommands[paletteIndex].push({
        nx1: nx1.toFixed(6),
        ny1: ny1.toFixed(6),
        nx2: nx2.toFixed(6),
        ny2: ny2.toFixed(6),
        orientation,
        phase,
      });
    };

    const smoothingPercent = state.settings.smoothnessPercent ?? 40;
    const laneMultiplier = state.settings.laneFanMultiplier ?? 100;
    const coverageBoost = (state.settings.coverageBoost ?? 100) / 100;
    const detailMode = state.settings.detailMode || 'balanced';
    const allowLowRes = state.settings.lowResEnhancer !== false;
    const allowEdgeDetail = state.settings.edgeDetail !== false;
    const allowMicroDetail = state.settings.microDetail !== false;
    const spectralBoost = Math.max(10, state.settings.spectralBoost ?? 120) / 100;
    const highlightGlaze = state.settings.highlightGlaze !== false;
    const weaveEnabled = state.settings.textureWeave === true;
    const gradientEcho = state.settings.gradientEcho !== false;

    const baseLaneSpacing = (() => {
      if (scale >= 24) {
        return 0.95;
      }
      if (scale >= 12) {
        return 0.88;
      }
      if (scale >= 6) {
        return 0.78;
      }
      return 0.64;
    })();

    const smoothingFactor = 1 + smoothingPercent / 100;
    const laneDensityFactor = Math.max(10, laneMultiplier) / 100;
    const laneSpacing = (baseLaneSpacing / smoothingFactor) / laneDensityFactor;

    const coveragePad = Math.min(
      scale * 0.45 * coverageBoost,
      Math.max(0.9, baseLaneSpacing * 1.5 * coverageBoost)
    );
    const detailMultiplier = detailMode === 'max' ? 1.35 : detailMode === 'minimal' ? 0.75 : 1;
    const detailLaneOffset = Math.min(
      scale * 0.28 * detailMultiplier,
      Math.max(0.45, baseLaneSpacing * 1.4 * detailMultiplier)
    );
    const microThreshold = detailMode === 'max' ? 4 : detailMode === 'minimal' ? 1 : 2;

    let laneCount = Math.max(1, Math.ceil((scale + laneSpacing * 0.5) / laneSpacing));
    if (allowLowRes) {
      if (scale < 1.5) {
        laneCount = Math.max(laneCount, 5);
      } else if (scale < 2.5) {
        laneCount = Math.max(laneCount, 4);
      } else if (scale < 4) {
        laneCount = Math.max(laneCount, 3);
      }
    }

    const laneOffsets = [];
    if (laneCount === 1) {
      laneOffsets.push(0);
    } else {
      const totalSpan = (laneCount - 1) * laneSpacing;
      const startOffset = -totalSpan / 2;
      for (let laneIndex = 0; laneIndex < laneCount; laneIndex++) {
        laneOffsets.push(startOffset + laneIndex * laneSpacing);
      }
    }
    state.metrics.laneCount = laneOffsets.length;

    for (let y = 0; y < height; y++) {
      let x = 0;
      while (x < width) {
        const idx = y * width + x;
        const paletteIndex = assignments[idx];
        if (paletteIndex === 0xffff) {
          x += 1;
          continue;
        }

        let runStart = x;
        let runEnd = x;
        let runDetail = false;
        let runEdge = false;
        while (runEnd < width && assignments[y * width + runEnd] === paletteIndex) {
          const runIdx = y * width + runEnd;
          if (detailMask[runIdx]) {
            runDetail = true;
          }
          if (edgeMask[runIdx]) {
            runEdge = true;
          }
          runEnd += 1;
        }

        const runLength = runEnd - runStart;
        const startX = offsetX + runStart * scale - coveragePad;
        const endX = offsetX + runEnd * scale + coveragePad;
        const centerY = offsetY + (y + 0.5) * scale;
        const profile = paletteProfiles[paletteIndex] || null;

        colourCoverage[paletteIndex] += runLength * laneOffsets.length;

        laneOffsets.forEach((laneOffset, laneIndex) => {
          pushStroke(
            paletteIndex,
            startX,
            centerY + laneOffset,
            endX,
            centerY + laneOffset,
            laneIndex === 0 ? 'run-primary' : 'run-lane',
            laneIndex === 0 ? 'fill' : 'fill-secondary'
          );
        });

        if (allowMicroDetail && runLength <= microThreshold) {
          const centerX = offsetX + (runStart + runLength / 2) * scale;
          const microHalf = Math.max(scale * 0.55, 0.85);
          pushStroke(
            paletteIndex,
            centerX - microHalf,
            centerY,
            centerX + microHalf,
            centerY,
            'micro-detail',
            'detail'
          );
        } else if ((runDetail && detailMode !== 'minimal') || (runEdge && allowEdgeDetail)) {
          pushStroke(
            paletteIndex,
            startX,
            centerY + detailLaneOffset,
            endX,
            centerY + detailLaneOffset,
            'detail-offset',
            'detail'
          );
        }

        if (runEdge && allowEdgeDetail) {
          const centerX = offsetX + (runStart + runLength / 2) * scale;
          const edgeHalf = Math.max(scale * 0.6, 0.9);
          pushStroke(
            paletteIndex,
            centerX - edgeHalf,
            centerY,
            centerX + edgeHalf,
            centerY,
            'edge-center',
            'detail-edge'
          );
        }

        let extraCoverage = 0;
        if (highlightGlaze && profile && profile.value > 0.62) {
          const glazeOffset = Math.max(scale * 0.35, detailLaneOffset * 0.45);
          pushStroke(
            paletteIndex,
            startX,
            centerY - glazeOffset,
            endX,
            centerY - glazeOffset,
            'glaze-upper',
            'glaze'
          );
          pushStroke(
            paletteIndex,
            startX,
            centerY + glazeOffset,
            endX,
            centerY + glazeOffset,
            'glaze-lower',
            'glaze'
          );
          extraCoverage += runLength * spectralBoost * 0.65;
        }

        if (gradientEcho && (runDetail || runEdge)) {
          const echoOffset = Math.max(scale * 0.42, detailLaneOffset * 0.6);
          pushStroke(
            paletteIndex,
            startX,
            centerY - echoOffset,
            endX,
            centerY - echoOffset,
            'echo-upper',
            'echo'
          );
          pushStroke(
            paletteIndex,
            startX,
            centerY + echoOffset,
            endX,
            centerY + echoOffset,
            'echo-lower',
            'echo'
          );
          extraCoverage += runLength * 0.55;
        }

        if (weaveEnabled && profile && profile.saturation > 0.4) {
          const weaveStep = Math.max(1, Math.round(4 / Math.max(0.5, spectralBoost)));
          const weaveSpan = Math.max(scale * 0.6, 0.9);
          const weaveTail = Math.max(scale * 0.3, 0.5);
          let weaveCount = 0;
          for (let px = runStart, alt = 0; px < runEnd; px += weaveStep, alt += 1) {
            const centerX = offsetX + (px + 0.5) * scale;
            const direction = alt % 2 === 0 ? 1 : -1;
            pushStroke(
              paletteIndex,
              centerX - weaveSpan,
              centerY - weaveTail * direction,
              centerX + weaveSpan,
              centerY + weaveTail * direction,
              'texture-weave',
              'texture'
            );
            weaveCount += 1;
          }
          if (weaveCount) {
            extraCoverage += runLength * 0.25 * spectralBoost + weaveCount * 0.6;
          }
        }

        if (extraCoverage > 0) {
          colourCoverage[paletteIndex] += extraCoverage;
        }

        x = runEnd;
      }
    }

    const paletteEntries = palette.map((colour, index) => ({
      index,
      coverage: colourCoverage[index],
      luminance: 0.2126 * colour.r + 0.7152 * colour.g + 0.0722 * colour.b,
    }));

    const sortMode = state.paletteSortMode || 'dark-first';
    paletteEntries.sort((a, b) => {
      if (sortMode === 'light-first') {
        if (b.luminance !== a.luminance) {
          return b.luminance - a.luminance;
        }
        return b.coverage - a.coverage;
      }
      if (sortMode === 'coverage') {
        if (b.coverage !== a.coverage) {
          return b.coverage - a.coverage;
        }
        return a.luminance - b.luminance;
      }
      if (a.luminance !== b.luminance) {
        return a.luminance - b.luminance;
      }
      return b.coverage - a.coverage;
    });

    const paletteOrder = paletteEntries.map((entry) => entry.index);

    const commands = [];
    for (const paletteIndex of paletteOrder) {
      const colour = palette[paletteIndex];
      const strokes = colourCommands[paletteIndex];
      strokes.sort((a, b) => (phaseOrder[a.phase] ?? 99) - (phaseOrder[b.phase] ?? 99));
      for (const stroke of strokes) {
        const { phase: _phase, ...rest } = stroke;
        commands.push({
          color: colour.hex,
          ...rest,
          pass: 'forward',
        });
      }
    }

    state.metrics.estimatedStrokes = commands.length;
    state.metrics.estimatedDurationMs = commands.length * 8;
    const metricsSnapshot = {
      pixelCount: state.metrics.pixelCount,
      paletteCount: palette.length,
      estimatedStrokes: state.metrics.estimatedStrokes,
      estimatedDurationMs: state.metrics.estimatedDurationMs,
      laneCount: state.metrics.laneCount,
      scaleFactor: scale,
      boardWidth,
      boardHeight,
      targetWidth,
      targetHeight,
      selectionActive,
    };
    Object.assign(state.metrics, metricsSnapshot);
    state.commandCache = { key: cacheKey, commands, metrics: metricsSnapshot };
    updateMetricsUI();
    updateSelectionUI();
    renderPaletteInsights(palette, state.paletteUsage);

    return commands;
  }

  async function streamCommands(commands, socket, delayMs) {
    const total = commands.length;
    let completed = 0;
    ui.progressBar.style.width = '0%';

    for (const command of commands) {
      ensureNotAborted();
      try {
        socket.send(
          `42["drawcmd",0,[${command.nx1},${command.ny1},${command.nx2},${command.ny2},false,-1,"${command.color}",0,0,{}]]`
        );
      } catch (err) {
        console.warn('drawaria image autodraw: socket send failed', err);
      }
      completed += 1;
      if (completed % 50 === 0 || completed === total) {
        const progress = (completed / total) * 100;
        ui.progressBar.style.width = `${progress}%`;
        ui.progressLabel.textContent = `${progress.toFixed(1)}%`;
        ui.status.textContent = `Drawing pixels… ${completed}/${total}`;
      }
      await wait(delayMs);
    }

    ui.progressBar.style.width = '100%';
    ui.progressLabel.textContent = '100%';
    ui.status.textContent = 'Drawing complete.';
  }

  async function runDrawing() {
    if (state.running) {
      return;
    }
    state.running = true;
    state.abortRequested = false;
    ui.startButton.disabled = true;
    ui.stopButton.disabled = false;
    ui.panel.classList.add('running');

    try {
      if (!state.prepared) {
        const file = ui.fileInput.files[0];
        await prepareFromFile(file);
      }
      ensureNotAborted();
      ui.status.textContent = 'Waiting for websocket…';
      const socket = await waitForSocket(5000);
      if (!socket) {
        throw new Error('Could not detect Drawaria websocket. Join a room and try again.');
      }
      const canvas = selectLargestCanvas();
      if (!canvas) {
        throw new Error('Canvas not found. Wait for Drawaria to finish loading.');
      }
      ensureNotAborted();
      ui.status.textContent = 'Mapping pixels to strokes…';
      await wait(10);
      const commands = buildPixelCommands(canvas.width, canvas.height);
      if (!commands.length) {
        throw new Error('No drawable pixels were detected.');
      }
      ensureNotAborted();
      ui.status.textContent = `Streaming ${commands.length} pixels…`;
      await streamCommands(commands, socket, 8);
      ensureNotAborted();
      ui.status.textContent = 'Image rendered successfully!';
    } catch (err) {
      if (err instanceof AbortPainting) {
        ui.status.textContent = 'Drawing aborted.';
      } else {
        console.error('drawaria image autodraw: error', err);
        ui.status.textContent = `Error: ${err.message || err}`;
      }
    } finally {
      state.running = false;
      state.abortRequested = false;
      ui.startButton.disabled = false;
      ui.stopButton.disabled = true;
      ui.panel.classList.remove('running');
    }
  }

  function handleStop() {
    if (!state.running) {
      return;
    }
    state.abortRequested = true;
    ui.status.textContent = 'Finishing current stroke…';
  }

  async function handleStartClick() {
    if (!ui.fileInput.files.length && !state.prepared) {
      ui.status.textContent = 'Please choose an image before drawing.';
      ui.fileInput.classList.add('shake');
      setTimeout(() => ui.fileInput.classList.remove('shake'), 500);
      return;
    }
    await runDrawing();
  }

  async function handleGeneratePreview() {
    const file = ui.fileInput.files[0];
    try {
      await prepareFromFile(file);
      if (state.settings.autoStart && !state.running) {
        ui.status.textContent = 'Auto start enabled — beginning draw…';
        await runDrawing();
      }
    } catch (err) {
      console.error('drawaria image autodraw: preview error', err);
      ui.status.textContent = `Error: ${err.message || err}`;
      ui.previewLoading.classList.remove('visible');
    }
  }

  const handleFileChange = () => {
    state.prepared = false;
    state.commandCache = null;
    if (ui.fileInput.files.length) {
      handleGeneratePreview();
    } else {
      ui.status.textContent = 'Select an image to begin (max 500px).';
      ui.paletteStrip.innerHTML = '';
      ui.paletteSummary.textContent = '0 colours';
      if (ui.paletteSummarySecondary) {
        ui.paletteSummarySecondary.textContent = '0 colours';
      }
      ui.progressBar.style.width = '0%';
      ui.progressLabel.textContent = '0%';
      applyPanelThemeFromPalette([], []);
      renderPaletteInsights([], []);
      updateMetricsUI();
    }
  };

  ui.fileInput.addEventListener('change', handleFileChange);
  registerCleanup(() => ui.fileInput.removeEventListener('change', handleFileChange));

  const handleDimensionInput = () => {
    ui.dimensionValue.textContent = `${ui.dimensionInput.value}px`;
    state.prepared = false;
    state.commandCache = null;
    if (ui.fileInput.files.length) {
      ui.status.textContent = 'Dimension changed — regenerate preview.';
    }
  };

  ui.dimensionInput.addEventListener('input', handleDimensionInput);
  registerCleanup(() => ui.dimensionInput.removeEventListener('input', handleDimensionInput));

  const handlePaletteOrderChange = () => {
    state.paletteSortMode = ui.paletteOrderSelect.value;
    state.commandCache = null;
    if (state.prepared) {
      const labelMap = {
        'dark-first': 'Dark → Light',
        'light-first': 'Light → Dark',
        coverage: 'Coverage Priority',
      };
      ui.status.textContent = `Colour order set to ${labelMap[state.paletteSortMode] || state.paletteSortMode}.`;
      scheduleMetricsUpdate();
    }
  };

  ui.paletteOrderSelect.addEventListener('change', handlePaletteOrderChange);
  registerCleanup(() => ui.paletteOrderSelect.removeEventListener('change', handlePaletteOrderChange));

  if (ui.selectRegionButton) {
    const handleSelectRegion = () => beginCanvasSelection();
    ui.selectRegionButton.addEventListener('click', handleSelectRegion);
    registerCleanup(() => ui.selectRegionButton.removeEventListener('click', handleSelectRegion));
  }

  if (ui.clearRegionButton) {
    const handleClearRegion = () => clearCanvasSelection();
    ui.clearRegionButton.addEventListener('click', handleClearRegion);
    registerCleanup(() => ui.clearRegionButton.removeEventListener('click', handleClearRegion));
  }

  function bindSlider(input, valueEl, key, suffix = '%', options = {}) {
    if (!input || !valueEl) {
      return;
    }
    if (state.settings[key] != null) {
      input.value = state.settings[key];
    }
    const update = () => {
      const rawValue = Number(input.value);
      const value = Number.isFinite(rawValue) ? rawValue : 0;
      valueEl.textContent = `${value}${suffix}`;
      state.settings[key] = value;
      if (options.onChange) {
        options.onChange(value);
      }
      if (options.requiresReprepare) {
        state.prepared = false;
        state.commandCache = null;
        ui.status.textContent = `${options.label || 'Setting'} changed — regenerate preview.`;
      } else {
        state.commandCache = null;
        if (state.prepared) {
          scheduleMetricsUpdate();
        }
      }
      updateModeLabel();
    };
    input.addEventListener('input', update);
    registerCleanup(() => input.removeEventListener('input', update));
    update();
  }

  function bindToggle(button, key, options = {}) {
    if (!button) {
      return;
    }
    const applyState = (active) => {
      button.dataset.active = active ? 'true' : 'false';
      button.setAttribute('aria-pressed', active ? 'true' : 'false');
      state.settings[key] = active;
      if (options.onChange) {
        options.onChange(active);
      }
      if (options.requiresReprepare) {
        state.prepared = false;
        state.commandCache = null;
        ui.status.textContent = `${options.label || 'Setting'} changed — regenerate preview.`;
      } else {
        state.commandCache = null;
        if (state.prepared) {
          scheduleMetricsUpdate();
        }
      }
      updateModeLabel();
    };
    const handleClick = () => {
      const nextState = button.dataset.active !== 'true';
      applyState(nextState);
    };
    button.addEventListener('click', handleClick);
    registerCleanup(() => button.removeEventListener('click', handleClick));
    const initial = options.initial !== undefined ? options.initial : state.settings[key] !== false;
    applyState(initial);
  }

  function bindFunSlider(input, valueEl, key) {
    if (!input || !valueEl) {
      return;
    }
    if (funSettings[key] != null) {
      input.value = funSettings[key];
    }
    const update = () => {
      const rawValue = Number(input.value);
      const value = Number.isFinite(rawValue) ? rawValue : 0;
      funSettings[key] = value;
      valueEl.textContent = `${value}`;
    };
    input.addEventListener('input', update);
    registerCleanup(() => input.removeEventListener('input', update));
    update();
  }

  function bindFunToggle(button, key) {
    if (!button) {
      return;
    }
    const apply = (active) => {
      const stateValue = !!active;
      button.dataset.active = stateValue ? 'true' : 'false';
      button.setAttribute('aria-pressed', stateValue ? 'true' : 'false');
      funSettings[key] = stateValue;
    };
    const handleClick = () => {
      apply(button.dataset.active !== 'true');
    };
    button.addEventListener('click', handleClick);
    registerCleanup(() => button.removeEventListener('click', handleClick));
    apply(funSettings[key]);
  }

  bindSlider(ui.smoothnessInput, ui.smoothnessValue, 'smoothnessPercent');
  bindSlider(ui.laneDensityInput, ui.laneDensityValue, 'laneFanMultiplier');
  bindSlider(ui.coverageInput, ui.coverageValue, 'coverageBoost');
  bindSlider(ui.ditherInput, ui.ditherValue, 'ditherStrength', '%', {
    requiresReprepare: true,
    label: 'Dither strength',
  });
  bindSlider(ui.spectralInput, ui.spectralValue, 'spectralBoost');

  if (ui.detailModeSelect) {
    ui.detailModeSelect.value = state.settings.detailMode;
    const handleDetailModeChange = () => {
      state.settings.detailMode = ui.detailModeSelect.value;
      state.commandCache = null;
      updateModeLabel();
      if (state.prepared) {
        scheduleMetricsUpdate();
      }
    };
    ui.detailModeSelect.addEventListener('change', handleDetailModeChange);
    registerCleanup(() => ui.detailModeSelect.removeEventListener('change', handleDetailModeChange));
  }

  bindToggle(ui.toggleLowRes, 'lowResEnhancer', { label: 'Low-res enhancer' });
  bindToggle(ui.toggleEdge, 'edgeDetail', { label: 'Edge emphasis' });
  bindToggle(ui.toggleMicro, 'microDetail', { label: 'Micro detail' });
  bindToggle(ui.toggleGlaze, 'highlightGlaze', { label: 'Glow glazing' });
  bindToggle(ui.toggleWeave, 'textureWeave', { label: 'Texture weave' });
  bindToggle(ui.toggleEcho, 'gradientEcho', { label: 'Gradient echo' });
  bindToggle(ui.toggleTheme, 'adaptiveTheme', {
    label: 'Adaptive theme',
    onChange(active) {
      applyPanelThemeFromPalette(active ? state.palette : [], active ? state.paletteUsage : []);
    },
  });

  bindFunSlider(ui.funDensityInput, ui.funDensityValue, 'density');
  bindFunSlider(ui.funTempoInput, ui.funTempoValue, 'tempo');
  bindFunToggle(ui.funMirrorToggle, 'mirror');
  bindFunToggle(ui.funJitterToggle, 'jitter');

  if (ui.funModeSelect) {
    const handleFunModeChange = () => {
      updateFunDescription();
      const effect = funFeatures[ui.funModeSelect.value];
      if (effect) {
        updateFunStatus(`${effect.label} ready — press play.`);
      } else {
        updateFunStatus('Select an effect and press play.');
      }
    };
    ui.funModeSelect.addEventListener('change', handleFunModeChange);
    registerCleanup(() => ui.funModeSelect.removeEventListener('change', handleFunModeChange));
    handleFunModeChange();
  } else {
    updateFunDescription();
    updateFunStatus('Select an effect and press play.');
  }

  if (ui.funRunButton) {
    const handleFunRun = () => {
      startFunEffect();
    };
    ui.funRunButton.addEventListener('click', handleFunRun);
    registerCleanup(() => ui.funRunButton.removeEventListener('click', handleFunRun));
  }

  if (ui.funStopButton) {
    const handleFunStop = () => {
      stopFunEffect();
    };
    ui.funStopButton.addEventListener('click', handleFunStop);
    registerCleanup(() => ui.funStopButton.removeEventListener('click', handleFunStop));
    ui.funStopButton.disabled = true;
  }

  updateFunProgress(0);

  if (ui.toggleAutoStart) {
    const setAutoStart = (active) => {
      ui.toggleAutoStart.dataset.active = active ? 'true' : 'false';
      ui.toggleAutoStart.setAttribute('aria-pressed', active ? 'true' : 'false');
      state.settings.autoStart = active;
    };
    const handleAutoStart = () => {
      const next = ui.toggleAutoStart.dataset.active !== 'true';
      setAutoStart(next);
      ui.status.textContent = next
        ? 'Auto start enabled — previews will launch drawing automatically.'
        : 'Auto start disabled.';
    };
    ui.toggleAutoStart.addEventListener('click', handleAutoStart);
    registerCleanup(() => ui.toggleAutoStart.removeEventListener('click', handleAutoStart));
    setAutoStart(state.settings.autoStart);
  }

  ui.previewButton.addEventListener('click', handleGeneratePreview);
  registerCleanup(() => ui.previewButton.removeEventListener('click', handleGeneratePreview));

  ui.startButton.addEventListener('click', handleStartClick);
  registerCleanup(() => ui.startButton.removeEventListener('click', handleStartClick));

  ui.stopButton.addEventListener('click', handleStop);
  registerCleanup(() => ui.stopButton.removeEventListener('click', handleStop));

  ui.closeButton.addEventListener('click', () => {
    state.abortRequested = true;
    runCleanup();
  });

  const socketWatcher = setInterval(() => {
    const socket = wsBridge.getSocket();
    let status = 'searching';
    let label = 'Socket: searching…';
    if (socket) {
      if (socket.readyState === WebSocket.OPEN) {
        status = 'connected';
        label = 'Socket: live';
      } else if (socket.readyState === WebSocket.CONNECTING) {
        status = 'searching';
        label = 'Socket: connecting…';
      } else {
        status = 'offline';
        label = 'Socket: offline';
      }
    }
    if (ui.socketChip && ui.socketChip.dataset.status !== status) {
      ui.socketChip.dataset.status = status;
    }
    if (ui.socketLabel && ui.socketLabel.textContent !== label) {
      ui.socketLabel.textContent = label;
    }
  }, 600);
  registerCleanup(() => clearInterval(socketWatcher));

  const handleExportPreview = () => {
    if (!state.previewDataUrl) {
      ui.status.textContent = 'Generate a preview before exporting.';
      return;
    }
    const link = document.createElement('a');
    link.href = state.previewDataUrl;
    const fileName = `autodraw-${state.pixelWidth || 'image'}x${state.pixelHeight || ''}.png`;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    ui.status.textContent = 'Preview PNG downloaded.';
  };

  if (ui.exportPreviewButton) {
    ui.exportPreviewButton.addEventListener('click', handleExportPreview);
    registerCleanup(() => ui.exportPreviewButton.removeEventListener('click', handleExportPreview));
  }

  const handleCopyPalette = async () => {
    if (!state.palette.length) {
      ui.status.textContent = 'No palette to copy yet — load an image first.';
      return;
    }
    const paletteText = state.palette.map((colour) => colour.hex).join('\n');
    try {
      await navigator.clipboard.writeText(paletteText);
      ui.status.textContent = 'Palette copied to clipboard.';
    } catch (err) {
      try {
        const textarea = document.createElement('textarea');
        textarea.value = paletteText;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        ui.status.textContent = 'Palette copied to clipboard.';
      } catch (fallbackErr) {
        console.warn('drawaria image autodraw: clipboard copy failed', err, fallbackErr);
        ui.status.textContent = 'Clipboard copy failed. Please copy manually from the console.';
      }
    }
  };

  if (ui.copyPaletteButton) {
    ui.copyPaletteButton.addEventListener('click', handleCopyPalette);
    registerCleanup(() => ui.copyPaletteButton.removeEventListener('click', handleCopyPalette));
  }

  applyPanelThemeFromPalette(state.palette, state.paletteUsage);
  renderPaletteInsights(state.palette, state.paletteUsage);
  updateModeLabel();
  updateMetricsUI();

  window[SCRIPT_HANDLE] = {
    cleanup: runCleanup,
    state,
  };

  ui.status.textContent = 'Select an image to begin (max 500px).';
  updateSelectionUI();

  function selectLargestCanvas() {
    const canvases = Array.from(document.querySelectorAll('canvas'));
    if (!canvases.length) {
      return null;
    }
    return canvases.reduce((largest, candidate) => {
      const largestArea = largest.width * largest.height;
      const candidateArea = candidate.width * candidate.height;
      return candidateArea > largestArea ? candidate : largest;
    }, canvases[0]);
  }

  function clamp(value, min, max) {
    return Math.max(min, Math.min(max, value));
  }

  let activeSelectionTeardown = null;

  function clearActiveSelectionOverlay() {
    if (activeSelectionTeardown) {
      try {
        activeSelectionTeardown();
      } catch (err) {
        console.warn('drawaria image autodraw: selection overlay cleanup failed', err);
      }
      activeSelectionTeardown = null;
    }
  }

  function beginCanvasSelection() {
    if (state.running) {
      ui.status.textContent = 'Stop the current render before selecting a region.';
      return;
    }
    const canvas = selectLargestCanvas();
    if (!canvas) {
      ui.status.textContent = 'Canvas not found — join a room before selecting a region.';
      return;
    }

    clearActiveSelectionOverlay();

    const rect = canvas.getBoundingClientRect();
    const overlay = document.createElement('div');
    overlay.id = 'pxa-selection-overlay';
    overlay.style.left = `${rect.left}px`;
    overlay.style.top = `${rect.top}px`;
    overlay.style.width = `${rect.width}px`;
    overlay.style.height = `${rect.height}px`;

    const selectionBox = document.createElement('div');
    selectionBox.id = 'pxa-selection-box';
    selectionBox.style.display = 'none';
    overlay.appendChild(selectionBox);

    document.body.appendChild(overlay);
    ui.status.textContent = 'Drag a rectangle to place the artwork.';

    let dragging = false;
    let startX = 0;
    let startY = 0;

    const clampToOverlay = (value, axis) => {
      const bounds = overlay.getBoundingClientRect();
      if (axis === 'x') {
        return clamp(value, bounds.left, bounds.right);
      }
      return clamp(value, bounds.top, bounds.bottom);
    };

    const updateBox = (currentX, currentY) => {
      const bounds = overlay.getBoundingClientRect();
      const clampedX = clampToOverlay(currentX, 'x');
      const clampedY = clampToOverlay(currentY, 'y');
      const left = Math.min(startX, clampedX) - bounds.left;
      const top = Math.min(startY, clampedY) - bounds.top;
      const width = Math.max(1, Math.abs(clampedX - startX));
      const height = Math.max(1, Math.abs(clampedY - startY));
      selectionBox.style.left = `${left}px`;
      selectionBox.style.top = `${top}px`;
      selectionBox.style.width = `${width}px`;
      selectionBox.style.height = `${height}px`;
      selectionBox.style.display = 'block';
    };

    const finishSelection = (apply) => {
      window.removeEventListener('mousemove', handlePointerMove, true);
      window.removeEventListener('mouseup', handlePointerUp, true);
      window.removeEventListener('keydown', handleKeyDown, true);

      if (!apply || !dragging) {
        overlay.remove();
        activeSelectionTeardown = null;
        if (apply) {
          ui.status.textContent = 'Canvas region selection cancelled.';
        }
        return;
      }

      const bounds = overlay.getBoundingClientRect();
      const cssWidth = bounds.width || 1;
      const cssHeight = bounds.height || 1;
      const boxRect = selectionBox.getBoundingClientRect();
      const leftPx = clamp(boxRect.left - bounds.left, 0, cssWidth);
      const topPx = clamp(boxRect.top - bounds.top, 0, cssHeight);
      const widthPx = clamp(boxRect.width, 1, cssWidth);
      const heightPx = clamp(boxRect.height, 1, cssHeight);

      const normX = leftPx / cssWidth;
      const normY = topPx / cssHeight;
      const normWidth = widthPx / cssWidth;
      const normHeight = heightPx / cssHeight;

      overlay.remove();
      activeSelectionTeardown = null;

      if (normWidth >= 0.995 && normHeight >= 0.995 && normX <= 0.002 && normY <= 0.002) {
        state.selection = null;
        ui.status.textContent = 'Canvas region reset to full coverage.';
      } else {
        state.selection = {
          normX,
          normY,
          normWidth,
          normHeight,
          boardWidth: canvas.width,
          boardHeight: canvas.height,
        };
        ui.status.textContent = `Region locked (${Math.round(normWidth * canvas.width)}×${Math.round(normHeight * canvas.height)}px).`;
      }

      state.commandCache = null;
      updateSelectionUI();
      if (state.prepared) {
        scheduleMetricsUpdate();
      }
    };

    const handlePointerDown = (event) => {
      if (event.button !== 0) {
        return;
      }
      dragging = true;
      startX = clampToOverlay(event.clientX, 'x');
      startY = clampToOverlay(event.clientY, 'y');
      updateBox(event.clientX, event.clientY);
      event.preventDefault();
    };

    const handlePointerMove = (event) => {
      if (!dragging) {
        return;
      }
      updateBox(event.clientX, event.clientY);
      event.preventDefault();
    };

    const handlePointerUp = (event) => {
      if (event.button !== 0) {
        return;
      }
      event.preventDefault();
      finishSelection(true);
    };

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        event.preventDefault();
        finishSelection(false);
      }
    };

    overlay.addEventListener('mousedown', handlePointerDown, { capture: true, passive: false });
    window.addEventListener('mousemove', handlePointerMove, true);
    window.addEventListener('mouseup', handlePointerUp, true);
    window.addEventListener('keydown', handleKeyDown, true);

    activeSelectionTeardown = () => {
      overlay.removeEventListener('mousedown', handlePointerDown, true);
      window.removeEventListener('mousemove', handlePointerMove, true);
      window.removeEventListener('mouseup', handlePointerUp, true);
      window.removeEventListener('keydown', handleKeyDown, true);
      if (overlay.parentNode) {
        overlay.parentNode.removeChild(overlay);
      }
    };

  }

  function clearCanvasSelection() {
    clearActiveSelectionOverlay();
    if (!state.selection) {
      ui.status.textContent = 'Canvas region already at full coverage.';
      return;
    }
    state.selection = null;
    state.commandCache = null;
    state.metrics.selectionActive = false;
    state.metrics.targetWidth = state.metrics.boardWidth || 0;
    state.metrics.targetHeight = state.metrics.boardHeight || 0;
    updateSelectionUI();
    ui.status.textContent = 'Canvas region reset to full coverage.';
    if (state.prepared) {
      scheduleMetricsUpdate();
    }
  }

  registerCleanup(() => clearActiveSelectionOverlay());

  function createPanel() {
    const style = document.createElement('style');
    style.textContent = `
      #pxa-panel { position: fixed; top: 24px; right: 24px; width: 520px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); z-index: 999999; font-family: 'Inter', 'Segoe UI', sans-serif; color: #0f172a; border-radius: 24px; overflow: hidden; box-shadow: 0 32px 110px rgba(15, 23, 42, 0.45); background: linear-gradient(165deg, rgba(15,23,42,0.92), rgba(15,23,42,0.88)), linear-gradient(140deg, var(--pxa-ambient, rgba(148,163,184,0.18)), rgba(226,232,240,0.9)); backdrop-filter: blur(30px); border: 1px solid rgba(148,163,184,0.28); --pxa-accent: #2563eb; --pxa-accent-soft: rgba(37,99,235,0.16); --pxa-accent-dark: #1e3a8a; --pxa-chip-bg: rgba(255,255,255,0.16); --pxa-ambient: rgba(148,163,184,0.22); display: flex; flex-direction: column; }
      #pxa-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 45%, rgba(255,255,255,0.12)); opacity: 0.9; }
      #pxa-panel::after { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle at 20% 20%, rgba(37,99,235,0.25), transparent 55%), radial-gradient(circle at 80% 10%, rgba(6,182,212,0.18), transparent 45%); filter: blur(0); opacity: 0.75; animation: pxa-ambient 18s ease-in-out infinite alternate; pointer-events: none; }
      #pxa-panel.running { box-shadow: 0 48px 140px rgba(37, 99, 235, 0.55); }
      @keyframes pxa-ambient { 0% { transform: rotate(0deg) scale(1); opacity: 0.8; } 50% { transform: rotate(6deg) scale(1.08); opacity: 0.9; } 100% { transform: rotate(-4deg) scale(1.02); opacity: 0.75; } }
      @media (prefers-reduced-motion: reduce) { #pxa-panel::after { animation: none; } }
      #pxa-head { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px 28px 16px; cursor: grab; color: white; }
      #pxa-logo { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(140deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.24); box-shadow: inset 0 1px 12px rgba(15,23,42,0.45), 0 12px 34px rgba(15,23,42,0.4); font-weight: 700; letter-spacing: 0.12em; font-size: 14px; text-transform: uppercase; }
      #pxa-logo span { display: block; text-align: center; }
      #pxa-logo .pxa-logo-icon { font-size: 20px; }
      #pxa-logo .pxa-logo-sub { font-size: 11px; opacity: 0.7; letter-spacing: 0.24em; }
      #pxa-title { flex: 1; min-width: 0; padding-top: 6px; }
      #pxa-title h1 { margin: 0; font-size: 22px; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; }
      #pxa-title p { margin: 6px 0 10px; font-size: 12px; opacity: 0.85; letter-spacing: 0.18em; text-transform: uppercase; }
      #pxa-headline-band { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
      .pxa-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--pxa-chip-bg); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 1px rgba(255,255,255,0.22); backdrop-filter: blur(12px); }
      .pxa-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 6px rgba(250,204,21,0.18); position: relative; }
      #pxa-chip-socket[data-status="connected"] .pxa-chip-dot { background: #34d399; box-shadow: 0 0 0 6px rgba(52,211,153,0.22); }
      #pxa-chip-socket[data-status="offline"] .pxa-chip-dot { background: #f87171; box-shadow: 0 0 0 6px rgba(248,113,113,0.22); }
      #pxa-chip-socket[data-status="searching"] .pxa-chip-dot { animation: pxa-pulse 1.8s ease infinite; }
      @keyframes pxa-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } }
      .pxa-chip-icon { font-size: 13px; filter: drop-shadow(0 2px 6px rgba(15,23,42,0.45)); }
      #pxa-close { border: none; background: rgba(15,23,42,0.45); color: white; width: 38px; height: 38px; border-radius: 12px; font-size: 16px; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; box-shadow: 0 12px 22px rgba(15,23,42,0.4); }
      #pxa-close:hover { transform: translateY(-2px) scale(1.04); background: rgba(15,23,42,0.65); }
      #pxa-body { position: relative; padding: 0 28px 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; overflow: hidden; }
      #pxa-body::before { content: ''; position: absolute; inset: 12px 18px 18px; border-radius: 22px; background: linear-gradient(150deg, rgba(248,250,252,0.94), rgba(226,232,240,0.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
      #pxa-body::after { content: ''; position: absolute; inset: 20px 24px 24px; border-radius: 18px; background: linear-gradient(120deg, rgba(255,255,255,0.25), transparent 60%); opacity: 0.35; pointer-events: none; }
      #pxa-body > * { position: relative; z-index: 2; }
      #pxa-scroll-area { position: relative; flex: 1; overflow-y: auto; padding: 12px 4px 16px 4px; display: flex; flex-direction: column; gap: 18px; scrollbar-color: var(--pxa-accent) rgba(148,163,184,0.16); }
      #pxa-scroll-area::-webkit-scrollbar { width: 8px; }
      #pxa-scroll-area::-webkit-scrollbar-track { background: rgba(148,163,184,0.12); border-radius: 999px; }
      #pxa-scroll-area::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--pxa-accent), var(--pxa-accent-dark)); border-radius: 999px; box-shadow: 0 4px 12px rgba(37,99,235,0.32); }
      .pxa-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; background: rgba(255,255,255,0.72); border-radius: 18px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); border: 1px solid rgba(148,163,184,0.24); }
      .pxa-tab { border: none; border-radius: 12px; padding: 12px 0; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; cursor: pointer; color: rgba(30,41,59,0.72); background: rgba(148,163,184,0.12); transition: all 0.22s ease; }
      .pxa-tab:hover { filter: brightness(1.06); }
      .pxa-tab.active { background: linear-gradient(135deg, var(--pxa-accent), var(--pxa-accent-dark)); color: white; box-shadow: 0 14px 28px rgba(37,99,235,0.32); }
      .pxa-tab-panels { display: flex; flex-direction: column; gap: 18px; }
      .pxa-tab-panel { display: none; }
      .pxa-tab-panel.active { display: block; }
      .pxa-section { background: rgba(255,255,255,0.85); border-radius: 22px; padding: 22px 24px 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 22px 40px rgba(15,23,42,0.1); border: 1px solid rgba(148,163,184,0.28); }
      .pxa-section h2 { margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pxa-accent-dark); }
      .pxa-controls { display: grid; gap: 16px; }
      .pxa-field { display: grid; gap: 8px; }
      .pxa-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #475569; font-weight: 700; }
      .pxa-input, .pxa-slider, .pxa-select { width: 100%; border: 1px solid rgba(148,163,184,0.45); border-radius: 14px; padding: 11px 14px; font-size: 13px; background: rgba(255,255,255,0.86); color: #0f172a; box-shadow: inset 0 1px 1px rgba(255,255,255,0.9); transition: border 0.2s ease, box-shadow 0.2s ease; }
      .pxa-input:focus, .pxa-slider:focus, .pxa-select:focus { border-color: var(--pxa-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.18); outline: none; }
      .pxa-slider { -webkit-appearance: none; height: 8px; padding: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(37,99,235,0.75), rgba(6,182,212,0.75)); position: relative; }
      .pxa-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: white; border-radius: 50%; border: 3px solid var(--pxa-accent); box-shadow: 0 6px 16px rgba(37,99,235,0.35); cursor: grab; }
      .pxa-slider::-moz-range-thumb { width: 20px; height: 20px; background: white; border-radius: 50%; border: 3px solid var(--pxa-accent); box-shadow: 0 6px 16px rgba(37,99,235,0.35); cursor: grab; }
      .pxa-value { font-size: 11px; letter-spacing: 0.12em; color: #0f172a; text-transform: uppercase; display: inline-flex; justify-content: flex-end; }
      .pxa-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
      .pxa-btn { border: none; border-radius: 14px; padding: 14px 0; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; position: relative; overflow: hidden; }
      .pxa-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none !important; transform: none !important; filter: none !important; }
      .pxa-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%); opacity: 0; transition: opacity 0.22s ease; }
      .pxa-btn:hover::after { opacity: 1; }
      .pxa-btn.primary { background: linear-gradient(135deg, var(--pxa-accent), var(--pxa-accent-dark)); color: white; box-shadow: 0 18px 32px rgba(37,99,235,0.35); }
      .pxa-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 24px 42px rgba(30,64,175,0.45); }
      .pxa-btn.secondary { background: rgba(255,255,255,0.92); color: #0f172a; border: 1px solid rgba(148,163,184,0.35); box-shadow: 0 16px 30px rgba(15,23,42,0.12); }
      .pxa-btn.secondary:hover { transform: translateY(-2px); filter: brightness(1.02); }
      .pxa-btn.danger { background: linear-gradient(135deg, #f43f5e, #be123c); color: white; box-shadow: 0 18px 34px rgba(244,63,94,0.36); }
      .pxa-btn.danger:hover { transform: translateY(-2px); }
      .pxa-toggle-row { display: flex; flex-wrap: wrap; gap: 18px; }
      .pxa-toggle-group { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(148,163,184,0.14); border: 1px solid rgba(148,163,184,0.28); }
      .pxa-selection-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 18px; background: rgba(148,163,184,0.18); border: 1px solid rgba(148,163,184,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
      .pxa-selection-info { display: grid; gap: 6px; min-width: 200px; }
      #pxa-selection-details { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #1f2937; }
      #pxa-selection-details[data-state="active"] { color: var(--pxa-accent-dark); }
      .pxa-selection-actions { display: flex; flex-wrap: wrap; gap: 10px; }
      .pxa-mini-btn { border: none; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; background: rgba(255,255,255,0.92); color: #0f172a; box-shadow: 0 12px 24px rgba(15,23,42,0.16); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
      .pxa-mini-btn.primary { background: linear-gradient(135deg, var(--pxa-accent), var(--pxa-accent-dark)); color: white; box-shadow: 0 16px 30px rgba(37,99,235,0.32); }
      .pxa-mini-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.02); }
      .pxa-mini-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
      .pxa-switch { position: relative; width: 54px; height: 28px; border-radius: 999px; border: none; cursor: pointer; background: rgba(148,163,184,0.4); transition: background 0.22s ease, box-shadow 0.22s ease; padding: 0; }
      .pxa-switch[data-active="true"] { background: linear-gradient(135deg, var(--pxa-accent), var(--pxa-accent-dark)); box-shadow: 0 10px 20px rgba(37,99,235,0.35); }
      .pxa-switch-handle { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 6px 12px rgba(15,23,42,0.25); transition: transform 0.22s ease; }
      .pxa-switch[data-active="true"] .pxa-switch-handle { transform: translateX(26px); }
      .pxa-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; align-items: stretch; }
      @media (max-width: 720px) { .pxa-preview-grid { grid-template-columns: 1fr; } }
      #pxa-preview-wrapper { position: relative; border-radius: 18px; overflow: hidden; background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.86)); min-height: 220px; border: 1px solid rgba(15,23,42,0.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
      #pxa-preview { width: 100%; height: 100%; display: block; }
      #pxa-preview::selection { background: transparent; }
      #pxa-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,0.72); color: white; font-weight: 600; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
      #pxa-preview-loading.visible { opacity: 1; }
      .pxa-metrics-grid { display: grid; gap: 12px; align-content: flex-start; }
      .pxa-metric-card { background: rgba(15,23,42,0.05); border-radius: 16px; padding: 14px 16px; border: 1px solid rgba(148,163,184,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); display: grid; gap: 4px; }
      .pxa-metric-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; }
      .pxa-metric-value { font-size: 20px; font-weight: 700; color: #0f172a; letter-spacing: 0.02em; }
      .pxa-metric-sub { font-size: 11px; letter-spacing: 0.1em; color: #475569; text-transform: uppercase; }
      .pxa-secondary-actions { display: grid; gap: 10px; margin-top: 14px; }
      .pxa-secondary-actions .pxa-btn { font-size: 10px; padding: 12px; }
      .pxa-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; color: #475569; letter-spacing: 0.08em; margin-top: 12px; }
      #pxa-progress { position: relative; height: 12px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; border: 1px solid rgba(148,163,184,0.24); }
      #pxa-progress-bar { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, #22d3ee, var(--pxa-accent)); box-shadow: 0 8px 22px rgba(59,130,246,0.38); transition: width 0.2s ease; }
      #pxa-progress-label { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: rgba(15,23,42,0.82); letter-spacing: 0.12em; }
      #pxa-status { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #1f2937; font-weight: 700; margin-top: 12px; }
      #pxa-selection-overlay { position: fixed; z-index: 999998; border: 1px solid rgba(37,99,235,0.45); background: rgba(37,99,235,0.08); box-shadow: 0 0 0 1px rgba(37,99,235,0.32), 0 32px 80px rgba(15,23,42,0.25); cursor: crosshair; backdrop-filter: blur(4px); }
      #pxa-selection-overlay::after { content: 'Drag to place the artwork'; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: white; background: rgba(15,23,42,0.65); box-shadow: 0 12px 24px rgba(15,23,42,0.35); pointer-events: none; }
      #pxa-selection-box { position: absolute; border: 2px dashed rgba(255,255,255,0.85); border-radius: 12px; background: rgba(37,99,235,0.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 18px 40px rgba(37,99,235,0.25); pointer-events: none; }
      #pxa-footer { padding: 16px 28px 22px; display: grid; gap: 10px; background: rgba(15,23,42,0.04); border-top: 1px solid rgba(148,163,184,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
      #pxa-palette-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(22px, 1fr)); gap: 6px; border-radius: 16px; padding: 12px; background: rgba(15,23,42,0.06); border: 1px solid rgba(148,163,184,0.32); max-height: 200px; overflow-y: auto; }
      .pxa-swatch { width: 100%; padding-bottom: 100%; border-radius: 10px; position: relative; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.12); }
      .pxa-swatch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
      .pxa-swatch[data-dominant="true"] { box-shadow: 0 0 0 2px var(--pxa-accent), inset 0 0 0 1px rgba(15,23,42,0.2); }
      .pxa-fun-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 18px; }
      .pxa-fun-note { margin-top: -4px; margin-bottom: 18px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(15,23,42,0.6); }
      .pxa-fun-actions { display: flex; flex-wrap: wrap; gap: 12px; }
      .pxa-fun-progress { position: relative; width: 100%; height: 12px; border-radius: 999px; background: rgba(148,163,184,0.28); overflow: hidden; margin-top: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
      .pxa-fun-progress-bar { position: absolute; inset: 0; width: 0%; background: linear-gradient(135deg, rgba(37,99,235,0.85), rgba(6,182,212,0.85)); box-shadow: 0 10px 24px rgba(37,99,235,0.35); transition: width 0.3s ease; }
      .pxa-fun-status { margin-top: 12px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: #1f2937; }
      .pxa-fun-description { margin-bottom: 12px; font-size: 12px; letter-spacing: 0.06em; color: rgba(15,23,42,0.75); }
      #pxa-palette-insights { display: grid; gap: 12px; margin-top: 16px; }
      .pxa-insight-card { border-radius: 16px; padding: 16px; background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); display: grid; gap: 6px; }
      .pxa-insight-card strong { font-size: 14px; letter-spacing: 0.02em; color: var(--pxa-accent-dark); }
      .pxa-insight-card span { font-size: 12px; color: #334155; letter-spacing: 0.04em; }
      .pxa-advanced-grid { display: grid; gap: 18px; }
      .pxa-two-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
      #pxa-advanced-note { font-size: 11px; letter-spacing: 0.08em; color: #475569; text-transform: uppercase; }
      input[type='file'].shake { animation: pxa-shake 0.45s ease; }
      @keyframes pxa-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
    `;
    document.head.appendChild(style);

    const panel = document.createElement('div');
    panel.id = 'pxa-panel';
    panel.innerHTML = `
      <div id="pxa-head">
        <div id="pxa-logo"><span class="pxa-logo-icon">PX</span><span class="pxa-logo-sub">Studio</span></div>
        <div id="pxa-title">
          <h1>Autodraw Studio</h1>
          <p>WebSocket Pixel Renderer</p>
          <div id="pxa-headline-band">
            <div class="pxa-chip" id="pxa-chip-socket" data-status="searching"><span class="pxa-chip-dot"></span><span id="pxa-socket-label">Socket: searching…</span></div>
            <div class="pxa-chip" id="pxa-chip-mode"><span class="pxa-chip-icon">✨</span><span id="pxa-mode-label">Balanced detail</span></div>
          </div>
        </div>
        <button id="pxa-close">✕</button>
      </div>
      <div id="pxa-body">
        <div class="pxa-tabs">
          <button class="pxa-tab active" data-tab="setup">Setup</button>
          <button class="pxa-tab" data-tab="preview">Preview</button>
          <button class="pxa-tab" data-tab="palette">Palette</button>
          <button class="pxa-tab" data-tab="advanced">Advanced</button>
          <button class="pxa-tab" data-tab="fun">Fun Lab</button>
        </div>
        <div id="pxa-scroll-area">
          <div class="pxa-tab-panels">
          <section class="pxa-section pxa-tab-panel active" data-tab="setup">
            <h2>Setup</h2>
            <div class="pxa-controls">
              <label class="pxa-field">
                <span class="pxa-label">Image File</span>
                <input id="pxa-file" type="file" accept="image/*" class="pxa-input" />
              </label>
              <label class="pxa-field">
                <span class="pxa-label">Max Dimension (px)</span>
                <input id="pxa-dimension" type="range" min="64" max="500" value="500" class="pxa-slider" />
                <div class="pxa-meta"><span>64px</span><span id="pxa-dimension-value">500px</span></div>
              </label>
              <label class="pxa-field">
                <span class="pxa-label">Colour Order</span>
                <select id="pxa-colour-order" class="pxa-select">
                  <option value="dark-first" selected>Dark → Light</option>
                  <option value="light-first">Light → Dark</option>
                  <option value="coverage">Coverage Priority</option>
                </select>
              </label>
              <div class="pxa-toggle-row">
                <div class="pxa-toggle-group">
                  <span class="pxa-label">Auto start after preview</span>
                  <button type="button" class="pxa-switch" id="pxa-toggle-autostart" data-active="false" aria-pressed="false"><span class="pxa-switch-handle"></span></button>
                </div>
                <div class="pxa-toggle-group">
                  <span class="pxa-label">Adaptive theme</span>
                  <button type="button" class="pxa-switch" id="pxa-toggle-theme" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
                </div>
              </div>
              <div class="pxa-selection-control">
                <div class="pxa-selection-info">
                  <span class="pxa-label">Canvas region</span>
                  <span id="pxa-selection-details">Full canvas coverage</span>
                </div>
                <div class="pxa-selection-actions">
                  <button class="pxa-mini-btn primary" id="pxa-select-region" type="button">Set region</button>
                  <button class="pxa-mini-btn" id="pxa-clear-region" type="button" disabled>Reset</button>
                </div>
              </div>
              <div class="pxa-buttons">
                <button class="pxa-btn secondary" id="pxa-preview-btn">Generate Preview</button>
                <button class="pxa-btn primary" id="pxa-start">Start Drawing</button>
                <button class="pxa-btn danger" id="pxa-stop" disabled>Stop</button>
              </div>
            </div>
          </section>

          <section class="pxa-section pxa-tab-panel" data-tab="preview">
            <h2>Preview & Metrics</h2>
            <div class="pxa-preview-grid">
              <div id="pxa-preview-wrapper">
                <canvas id="pxa-preview" width="420" height="260"></canvas>
                <div id="pxa-preview-loading">Processing…</div>
              </div>
              <div class="pxa-metrics-grid">
                <div class="pxa-metric-card">
                  <span class="pxa-metric-label">Resolution</span>
                  <span class="pxa-metric-value" id="pxa-metric-resolution">—</span>
                  <span class="pxa-metric-sub" id="pxa-metric-scale">Fit-to-canvas ready</span>
                </div>
                <div class="pxa-metric-card">
                  <span class="pxa-metric-label">Palette</span>
                  <span class="pxa-metric-value" id="pxa-metric-palette">0</span>
                  <span class="pxa-metric-sub" id="pxa-metric-palette-note">Up to 1300 colours</span>
                </div>
                <div class="pxa-metric-card">
                  <span class="pxa-metric-label">Stroke Estimate</span>
                  <span class="pxa-metric-value" id="pxa-metric-strokes">0</span>
                  <span class="pxa-metric-sub" id="pxa-metric-lanes">Lane fan ×1</span>
                </div>
                <div class="pxa-metric-card">
                  <span class="pxa-metric-label">Estimated Runtime</span>
                  <span class="pxa-metric-value" id="pxa-metric-eta">0s</span>
                  <span class="pxa-metric-sub" id="pxa-metric-delay">8ms stroke delay</span>
                </div>
              </div>
            </div>
            <div class="pxa-secondary-actions">
              <button class="pxa-btn secondary" id="pxa-export-preview">Download processed PNG</button>
              <button class="pxa-btn secondary" id="pxa-copy-palette">Copy palette to clipboard</button>
            </div>
            <div class="pxa-meta"><span id="pxa-palette-summary">0 colours</span><span>1px brush</span></div>
          </section>

          <section class="pxa-section pxa-tab-panel" data-tab="palette">
            <h2>Palette Insights</h2>
            <div class="pxa-meta"><span id="pxa-palette-summary-secondary">0 colours</span><span>Order linked to setup tab</span></div>
            <div id="pxa-palette-strip"></div>
            <div id="pxa-palette-insights"></div>
          </section>

          <section class="pxa-section pxa-tab-panel" data-tab="advanced">
            <h2>Advanced Painter Controls</h2>
            <div class="pxa-advanced-grid">
              <div class="pxa-two-column">
                <label class="pxa-field">
                  <span class="pxa-label">Smoothness boost</span>
                  <input id="pxa-smoothness" type="range" min="0" max="100" value="40" class="pxa-slider" />
                  <span class="pxa-value" id="pxa-smoothness-value">40%</span>
                </label>
                <label class="pxa-field">
                  <span class="pxa-label">Lane density</span>
                  <input id="pxa-lane-density" type="range" min="60" max="200" value="100" class="pxa-slider" />
                  <span class="pxa-value" id="pxa-lane-density-value">100%</span>
                </label>
              <label class="pxa-field">
                <span class="pxa-label">Coverage padding</span>
                <input id="pxa-coverage" type="range" min="80" max="180" value="100" class="pxa-slider" />
                <span class="pxa-value" id="pxa-coverage-value">100%</span>
              </label>
              <label class="pxa-field">
                <span class="pxa-label">Dither strength</span>
                <input id="pxa-dither" type="range" min="0" max="200" value="100" class="pxa-slider" />
                <span class="pxa-value" id="pxa-dither-value">100%</span>
              </label>
              <label class="pxa-field">
                <span class="pxa-label">Spectral accent</span>
                <input id="pxa-spectral" type="range" min="50" max="200" value="120" class="pxa-slider" />
                <span class="pxa-value" id="pxa-spectral-value">120%</span>
              </label>
            </div>
            <div class="pxa-two-column">
              <label class="pxa-field">
                <span class="pxa-label">Detail cadence</span>
                <select id="pxa-detail-mode" class="pxa-select">
                    <option value="balanced" selected>Balanced</option>
                    <option value="max">Maximum</option>
                    <option value="minimal">Minimal</option>
                  </select>
                </label>
                <div class="pxa-toggle-group">
                  <span class="pxa-label">Low-res enhancer</span>
                  <button type="button" class="pxa-switch" id="pxa-toggle-lowres" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
                </div>
              <div class="pxa-toggle-group">
                <span class="pxa-label">Edge emphasis</span>
                <button type="button" class="pxa-switch" id="pxa-toggle-edge" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
              </div>
              <div class="pxa-toggle-group">
                <span class="pxa-label">Micro detail</span>
                <button type="button" class="pxa-switch" id="pxa-toggle-micro" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
              </div>
              <div class="pxa-toggle-group">
                <span class="pxa-label">Glow glazing</span>
                <button type="button" class="pxa-switch" id="pxa-toggle-glaze" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
              </div>
              <div class="pxa-toggle-group">
                <span class="pxa-label">Texture weave</span>
                <button type="button" class="pxa-switch" id="pxa-toggle-weave" data-active="false" aria-pressed="false"><span class="pxa-switch-handle"></span></button>
              </div>
              <div class="pxa-toggle-group">
                <span class="pxa-label">Gradient echo</span>
                <button type="button" class="pxa-switch" id="pxa-toggle-echo" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
              </div>
            </div>
            <div id="pxa-advanced-note">Changes apply to the next draw and live estimates will update automatically.</div>
          </div>
        </section>
          <section class="pxa-section pxa-tab-panel" data-tab="fun">
            <h2>Fun Lab Experiments</h2>
            <div class="pxa-fun-description" id="pxa-fun-description">Layer playful pointer-driven effects over your canvas without touching the websocket painter.</div>
            <div class="pxa-fun-grid">
              <label class="pxa-field">
                <span class="pxa-label">Effect</span>
                <select id="pxa-fun-mode" class="pxa-select">
                  <option value="aurora">Aurora sweep</option>
                  <option value="vortex">Vortex bloom</option>
                  <option value="firefly">Firefly scatter</option>
                  <option value="cascade">Cascade drapery</option>
                </select>
              </label>
              <label class="pxa-field">
                <span class="pxa-label">Density</span>
                <input id="pxa-fun-density" type="range" min="10" max="120" value="70" class="pxa-slider" />
                <span class="pxa-value" id="pxa-fun-density-value">70</span>
              </label>
              <label class="pxa-field">
                <span class="pxa-label">Tempo</span>
                <input id="pxa-fun-tempo" type="range" min="10" max="160" value="60" class="pxa-slider" />
                <span class="pxa-value" id="pxa-fun-tempo-value">60</span>
              </label>
            </div>
            <div class="pxa-toggle-row">
              <div class="pxa-toggle-group">
                <span class="pxa-label">Mirror sweeps</span>
                <button type="button" class="pxa-switch" id="pxa-fun-toggle-mirror" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
              </div>
              <div class="pxa-toggle-group">
                <span class="pxa-label">Jitter accents</span>
                <button type="button" class="pxa-switch" id="pxa-fun-toggle-jitter" data-active="true" aria-pressed="true"><span class="pxa-switch-handle"></span></button>
              </div>
            </div>
            <div class="pxa-fun-note">Prep your brush size &amp; colour in Drawaria before pressing play — the fun lab reuses whatever is active.</div>
            <div class="pxa-fun-actions">
              <button class="pxa-btn primary" id="pxa-fun-run" type="button">Play effect</button>
              <button class="pxa-btn danger" id="pxa-fun-stop" type="button" disabled>Stop</button>
            </div>
            <div class="pxa-fun-progress"><div class="pxa-fun-progress-bar" id="pxa-fun-progress-bar"></div></div>
            <div class="pxa-fun-status" id="pxa-fun-status">Select an effect and press play.</div>
          </section>
          </div>
        </div>
      </div>
      <div id="pxa-footer">
        <div id="pxa-progress"><div id="pxa-progress-bar"></div><div id="pxa-progress-label">0%</div></div>
        <div id="pxa-status">Select an image to begin (max 500px).</div>
      </div>
    `;
    document.body.appendChild(panel);

    const head = panel.querySelector('#pxa-head');
    let dragOffsetX = 0;
    let dragOffsetY = 0;
    let dragging = false;

    const handlePointerDown = (event) => {
      dragging = true;
      const rect = panel.getBoundingClientRect();
      dragOffsetX = event.clientX - rect.left;
      dragOffsetY = event.clientY - rect.top;
      panel.style.transition = 'none';
      head.style.cursor = 'grabbing';
      event.preventDefault();
    };

    const handlePointerMove = (event) => {
      if (!dragging) return;
      panel.style.left = `${event.clientX - dragOffsetX}px`;
      panel.style.top = `${event.clientY - dragOffsetY}px`;
      panel.style.right = 'auto';
      panel.style.bottom = 'auto';
    };

    const handlePointerUp = () => {
      dragging = false;
      head.style.cursor = 'grab';
      panel.style.transition = '';
    };

    head.addEventListener('mousedown', handlePointerDown);
    window.addEventListener('mousemove', handlePointerMove);
    window.addEventListener('mouseup', handlePointerUp);

    registerCleanup(() => {
      head.removeEventListener('mousedown', handlePointerDown);
      window.removeEventListener('mousemove', handlePointerMove);
      window.removeEventListener('mouseup', handlePointerUp);
    });

    const tabButtons = Array.from(panel.querySelectorAll('.pxa-tab'));
    const tabPanels = Array.from(panel.querySelectorAll('.pxa-tab-panel'));

    const activateTab = (name) => {
      tabButtons.forEach((btn) => {
        btn.classList.toggle('active', btn.dataset.tab === name);
      });
      tabPanels.forEach((tabPanel) => {
        tabPanel.classList.toggle('active', tabPanel.dataset.tab === name);
      });
    };

    tabButtons.forEach((btn) => {
      const onClick = () => activateTab(btn.dataset.tab);
      btn.addEventListener('click', onClick);
      registerCleanup(() => btn.removeEventListener('click', onClick));
    });

    activateTab('setup');

    return {
      panel,
      style,
      fileInput: panel.querySelector('#pxa-file'),
      dimensionInput: panel.querySelector('#pxa-dimension'),
      previewCanvas: panel.querySelector('#pxa-preview'),
      previewButton: panel.querySelector('#pxa-preview-btn'),
      startButton: panel.querySelector('#pxa-start'),
      stopButton: panel.querySelector('#pxa-stop'),
      closeButton: panel.querySelector('#pxa-close'),
      status: panel.querySelector('#pxa-status'),
      progressBar: panel.querySelector('#pxa-progress-bar'),
      progressLabel: panel.querySelector('#pxa-progress-label'),
      paletteStrip: panel.querySelector('#pxa-palette-strip'),
      paletteSummary: panel.querySelector('#pxa-palette-summary'),
      paletteSummarySecondary: panel.querySelector('#pxa-palette-summary-secondary'),
      paletteInsights: panel.querySelector('#pxa-palette-insights'),
      selectionDetails: panel.querySelector('#pxa-selection-details'),
      selectRegionButton: panel.querySelector('#pxa-select-region'),
      clearRegionButton: panel.querySelector('#pxa-clear-region'),
      previewLoading: panel.querySelector('#pxa-preview-loading'),
      dimensionValue: panel.querySelector('#pxa-dimension-value'),
      paletteOrderSelect: panel.querySelector('#pxa-colour-order'),
      socketChip: panel.querySelector('#pxa-chip-socket'),
      socketLabel: panel.querySelector('#pxa-socket-label'),
      modeLabel: panel.querySelector('#pxa-mode-label'),
      metricResolution: panel.querySelector('#pxa-metric-resolution'),
      metricScale: panel.querySelector('#pxa-metric-scale'),
      metricPalette: panel.querySelector('#pxa-metric-palette'),
      metricPaletteNote: panel.querySelector('#pxa-metric-palette-note'),
      metricStrokes: panel.querySelector('#pxa-metric-strokes'),
      metricLanes: panel.querySelector('#pxa-metric-lanes'),
      metricEta: panel.querySelector('#pxa-metric-eta'),
      metricDelay: panel.querySelector('#pxa-metric-delay'),
      exportPreviewButton: panel.querySelector('#pxa-export-preview'),
      copyPaletteButton: panel.querySelector('#pxa-copy-palette'),
      smoothnessInput: panel.querySelector('#pxa-smoothness'),
      smoothnessValue: panel.querySelector('#pxa-smoothness-value'),
      laneDensityInput: panel.querySelector('#pxa-lane-density'),
      laneDensityValue: panel.querySelector('#pxa-lane-density-value'),
      coverageInput: panel.querySelector('#pxa-coverage'),
      coverageValue: panel.querySelector('#pxa-coverage-value'),
      ditherInput: panel.querySelector('#pxa-dither'),
      ditherValue: panel.querySelector('#pxa-dither-value'),
      spectralInput: panel.querySelector('#pxa-spectral'),
      spectralValue: panel.querySelector('#pxa-spectral-value'),
      detailModeSelect: panel.querySelector('#pxa-detail-mode'),
      toggleLowRes: panel.querySelector('#pxa-toggle-lowres'),
      toggleEdge: panel.querySelector('#pxa-toggle-edge'),
      toggleMicro: panel.querySelector('#pxa-toggle-micro'),
      toggleGlaze: panel.querySelector('#pxa-toggle-glaze'),
      toggleWeave: panel.querySelector('#pxa-toggle-weave'),
      toggleEcho: panel.querySelector('#pxa-toggle-echo'),
      toggleTheme: panel.querySelector('#pxa-toggle-theme'),
      toggleAutoStart: panel.querySelector('#pxa-toggle-autostart'),
      funModeSelect: panel.querySelector('#pxa-fun-mode'),
      funDensityInput: panel.querySelector('#pxa-fun-density'),
      funDensityValue: panel.querySelector('#pxa-fun-density-value'),
      funTempoInput: panel.querySelector('#pxa-fun-tempo'),
      funTempoValue: panel.querySelector('#pxa-fun-tempo-value'),
      funMirrorToggle: panel.querySelector('#pxa-fun-toggle-mirror'),
      funJitterToggle: panel.querySelector('#pxa-fun-toggle-jitter'),
      funRunButton: panel.querySelector('#pxa-fun-run'),
      funStopButton: panel.querySelector('#pxa-fun-stop'),
      funProgressBar: panel.querySelector('#pxa-fun-progress-bar'),
      funStatus: panel.querySelector('#pxa-fun-status'),
      funDescription: panel.querySelector('#pxa-fun-description'),
    };
  }

  function installSocketBridge() {
    const HANDLE = '__drawariaAutodrawSocketBridge';
    if (window[HANDLE]) {
      window[HANDLE].refCount += 1;
      return window[HANDLE];
    }

    const sockets = new Set();
    const originalSend = WebSocket.prototype.send;

    function track(socket) {
      if (sockets.has(socket)) {
        return;
      }
      sockets.add(socket);
      socket.addEventListener('close', () => sockets.delete(socket));
      socket.addEventListener('error', () => sockets.delete(socket));
    }

    function patchedSend(...args) {
      track(this);
      return originalSend.apply(this, args);
    }

    WebSocket.prototype.send = patchedSend;

    const bridge = {
      refCount: 1,
      release() {
        bridge.refCount -= 1;
        if (bridge.refCount <= 0) {
          WebSocket.prototype.send = originalSend;
          sockets.clear();
          delete window[HANDLE];
        }
      },
      getSocket() {
        const list = Array.from(sockets);
        for (let i = list.length - 1; i >= 0; i--) {
          const socket = list[i];
          if (socket && socket.readyState === WebSocket.OPEN) {
            return socket;
          }
        }
        return null;
      },
    };

    window[HANDLE] = bridge;
    return bridge;
  }
})();