<!--
  DEV NOTES — read this before picking up work on this file elsewhere.
  Repo: https://github.com/farja-king/vector-prep (main branch auto-deploys to
  https://farja-king.github.io/vector-prep/ via GitHub Pages — no build step, no manual deploy).

  WHAT THIS IS: browser-only image-to-SVG vectorizer (imagetracer.js under the hood). Two trace
  modes — B&W (single global brightness threshold) and Color/Posterize (k-means palette + custom
  quantization, bypassing imagetracer's own unreliable color matching). All processing is local;
  nothing leaves the browser.

  RECENT WORK (chronological, most recent last):
  1. Auto-correct Threshold/Invert when a fresh B&W trace comes back completely blank (light-
     foreground images tracing to zero visible paths against the fixed default threshold of 70).
     Scoped to only the first trace after a fresh image load; never fights manual tuning after.
  2. Auto-detect Color count from the image (estimateTrueColorCount's elbow method) instead of a
     flat default of 8 — also fixed a real bug in that estimator where it could never return the
     low end of its own search range (a true 2-color image always got bumped to 3+).
  3. Click-to-delete traced shapes (new "Delete shapes" section, separate from the freehand
     Touch-up brush — the two are mutually exclusive, since one needs Source view and the other
     needs Vector view). Select-then-confirm workflow: click a shape to preview what would be
     deleted (this shape only / its exact color / similar shades within a live tolerance slider),
     click again or press Delete Selected to commit. Deletes erase the actual SOURCE pixels (not
     just the SVG), so they survive re-tracing, and reuse the freehand brush's existing undo stack.
  4. Tolerance matching is gated on BOTH color distance AND on-canvas proximity (path center
     distance, scaled to the image's diagonal) — pure color-distance alone jumped straight from
     "just this shape" to "every shape of that color anywhere in the image" at the first nonzero
     notch, with no usable middle ground for grabbing just a few nearby similar-shade fragments.
  5. Re-arm the Color-count auto-detect after a delete-shapes commit, not just on fresh load —
     deleting a whole color changes the TRUE remaining color count, and leaving Color count stale
     forced kMeansPalette to invent a spurious near-duplicate shade to fill the now-unneeded slot,
     which then flickered pixel-by-pixel across an unrelated region into hundreds of fragmented
     paths. Confirmed and fixed against a real multi-color illustration (not just synthetic tests).
  6. TRIED then REVERTED: blurring the delete-shapes erase mask to soften the deletion boundary.
     Turned out unnecessary (the "271 fragmented paths" mess that motivated it was entirely #5's
     stale-colorCount bug, already fixed, and a plain hard erase already traced cleanly on the same
     real file once that was fixed) AND it introduced a new, worse defect: it only reduced ALPHA at
     the fringe, leaving the DELETED shape's own RGB in place there, so classifyToPalette's alpha<10
     skip threshold let most of that fringe still classify using the deleted color's stale RGB —
     rendering a visible ghost of the removed shade at full opacity instead of a clean hole. See
     commitDeleteSelection's mask-building comment for the full detail. Reverted to a plain hard
     erase (fully erase or fully leave alone, no gradient) — the existing despeckle/majority-vote
     pass every Color-mode trace already runs is what actually smooths a fresh deletion boundary.
  7. Added a third trace mode, Greyscale (Multi-tone) — reuses Color mode's ENTIRE pipeline
     (kMeansPalette, classifyToPalette, despeckle, per-color overrides, group merging,
     colorCountAutoPending) unchanged, just against a desaturated copy of the source pixels
     (toGreyscaleImageData), so it produces distinct grey shades with zero duplicated code. Has its
     own modeDetailState/DETAIL_DEFAULTS bucket so tuning it can't silently drag Color mode's
     baseline around. Labels swap contextually ("Grey levels"/"Detected shades" vs "Color
     count"/"Detected palette"). originalImageData itself is never touched by the conversion, so
     switching back to Color or B&W still traces the real colors.
  8. Fixed kMeansPalette's flat-pixel filter using the sampling STRIDE (`step`, which grows with
     image size) as its neighbor-check distance instead of a small fixed one — on a large/detailed
     image this meant checking "flatness" against a neighbor 15-20px away, almost always crossing
     real detail, starving the filter and silently falling back to unfiltered (anti-aliasing-noise-
     contaminated) sampling on exactly the images that most needed the filter. Now uses a fixed 2px
     check, matching estimateTrueColorCount's own (already-correct) call.
  9. Delete-shapes edge quality — FIVE rounds on the same spot, all reverted, settled back on the
     plain hard erase (binary alpha cut, no recolor). Full history, so nobody re-attempts these:
     - Round 1 (blend+fade fringe RGB, varying alpha): broken — classifyToPalette/classesToImageData
       ignore partial alpha entirely (anything above alpha 10 renders fully OPAQUE), so the "fade"
       never rendered soft, it just baked in solid blotches of whatever the ring math computed.
       Averaging multiple differently-colored neighbors together also fabricated brand-new colors
       that don't exist in the real palette, and once enough clustered along a deletion boundary,
       kMeansPalette picked them up as a real color and broadcast them to unrelated pixels elsewhere
       in the image (confirmed: stray beige/grey/green speckle inside unrelated black letterforms).
     - Round 2 (recolor to ONE real neighbor's RGB, but keep the OLD binary alpha cut): still jagged.
       Root cause: the erase mask IS naturally anti-aliased by the canvas fill (real partial-coverage
       values), but `if (mask[i] > 0) d[i] = 0` collapsed any nonzero coverage into a full erase,
       throwing that sub-pixel curve shape away and re-quantizing the boundary into a staircase.
     - Round 3 (proportional alpha reduction matching the mask's real coverage + recolor every
       touched pixel to its one nearest real neighbor's exact RGB, never blended): looked like a big
       improvement in isolated screenshots, but that was largely an illusion — the auto-revectorize-
       off default meant most of what looked "clean" was actually a STALE pre-delete trace never
       having been re-run at all, not genuinely fixed edges. Once auto-revectorize was removed
       (point 10) and every view/export started forcing a real retrace, the SAME corruption/jagged
       edges came right back on every export — confirmed directly: exports were reproducing the
       exact artifact this round was meant to fix, because the retrace itself was still broken, not
       just hidden by never running it.
     - Round 4 (proportional alpha + single-real-neighbor recolor, 2px reach, same technique as
       Round 3): this time verified with a SCRIPTED repro against a live instance (a local test
       server + driving the real app functions directly, not screenshots) — confirmed clean on a
       single large color region (deleted green on the real Cobra file: exact remaining palette,
       zero fabricated colors, no geometry/complexity anomalies). Shipped, then confirmed BROKEN by
       Martin on the SAME file's teeth/rib area — dense, thin, tightly alternating white/tan/black
       bands where a 2px recolor reach isn't enough to fully cover what a deletion touches, leaving
       patchy/speckled partial results. The lesson: even a scripted, non-screenshot verification is
       only as good as the test CASE — a single large color region isn't representative of dense
       thin-banded geometry, and this whole saga has now broken on a new real case every single
       time it looked genuinely fixed.
     - Round 5 (current): reverted to the plain hard erase — `if (mask[i] > 0) d[i] = 0`, nothing
       else. This is the only version ever confirmed clean across every real case thrown at it.
       Deletions have a hard pixel-edge boundary instead of a smooth one — accepted tradeoff after
       five attempts at smooth edges every one of which broke something else. If picked up again:
       test against BOTH a single large color region AND dense/thin-banded geometry (teeth, ribs,
       stripes) before trusting any result, ideally via scripted repro (see Round 4) rather than
       screenshots alone — neither test category alone has been sufficient so far.
  10. Removed the "Auto re-vectorize after each stroke" checkbox entirely (Touch-up brush + Delete
      shapes both used it). It defaulted ON, but whenever a session had it off, edits (brush strokes,
      deletes) updated originalImageData immediately while the Vector preview AND lastSvgString (what
      Download SVG/PNG actually export) silently kept showing the PREVIOUS trace until a manual
      re-vectorize — which is exactly how a deleted shape reappeared in a downloaded SVG: the
      download just read stale lastSvgString. Now retracing is always manual (Re-vectorize Now), and
      a new `needsRetrace` flag (set on every edit, cleared when a trace completes) makes the
      Download SVG/PNG handlers force-and-await a fresh trace first if pixels have changed since the
      last one — so an export can no longer go stale regardless of what the user clicked.
  11. The ACTUAL root cause of deletions intermittently/consistently missing from exports (point 10
      above was a real fix for a related but different problem — this is the one that mattered most).
      Two things landed together, found by scripting a real repro directly (loading the real Cobra
      file via loadImageFile in a live page and driving the actual functions — screenshots alone had
      already led to two wrong diagnoses in a row, see traceGeneration below):
      - Added `traceGeneration`: runTrace's Color/Greyscale branch yields mid-trace on purpose (see
        point 9), so calls can overlap; without a guard, an OLDER call finishing AFTER a newer one
        could silently overwrite lastSvgString with a stale result. Every edit (delete, brush stroke)
        now calls `invalidateInFlightTrace()`, which bumps traceGeneration immediately (not just when
        a replacement trace actually starts) so any in-flight trace recognizes itself as stale the
        moment it tries to commit, and only the latest generation is allowed to write results.
      - The REAL bug: deleting a whole color re-arms colorCountAutoPendingByMode (correctly — the
        true remaining count changed). But runTrace's handling of that used to set colorCount.value,
        dispatch 'input' on it (which only SCHEDULES a separate, debounced follow-up trace), and
        `return` — leaving THIS call's own lastSvgString commit undone. ensureFreshTrace's
        `await runTrace()` only awaits that one truncated call; its finally block still cleared
        needsRetrace as if the job were done, while the real corrected trace was sitting in an
        un-awaited 250ms debounce Download never waited for. Confirmed directly: after deleting a
        color (8 -> 7), lastSvgString still contained the deleted color and needsRetrace was already
        false. Fixed by applying the corrected colorCount and continuing within the SAME call instead
        of bailing out and relying on a second async trace to catch up — verified by scripting the
        exact repro (delete both green shades on the real Cobra file, force a fresh trace, assert the
        deleted colors are absent from lastSvgString) before and after the fix.
  12. Fixed colorOverrides going stale after a delete-shapes commit — the reported "perfect
      preview, then pixelated/random-colour paths after export" symptom. colorOverrides is keyed
      by PALETTE INDEX, but a delete forces the next trace's kMeansPalette to recompute from
      scratch, and k-means has no obligation to keep any real color at the index it held before.
      Confirmed by direct scripted repro against IMG_2685.PNG: gave orange (index 2) an extreme
      +100 contrast override, deleted orange entirely, and on the next trace TAN silently landed
      at index 2 and inherited orange's override — rendered rgb(255,158,0) instead of its real
      rgb(227,143,17). Since the same object also drives curveFit/edgeSmoothing/speckle for that
      color (GEOMETRY, not just color — see settingsForColor in runTrace), a misapplied override
      can just as easily produce jagged/pixelated geometry on an unrelated color as a wrong hue —
      matching both symptoms from one root cause. loadImageFile already had this exact guard for a
      fresh image load (same reasoning, same reset); a delete carries identical risk and simply
      never had it. Fix: clear colorOverrides / selectedColorIndex / hide the override panel on
      every delete-shapes commit, in commitDeleteSelection. Verified: re-ran the exact repro
      post-fix — overrides correctly cleared, tan renders at its real color, no console errors.
      NOTE: the freehand Touch-up brush's endBrushStroke shares the identical risk (a stroke can
      also change the true palette composition on the next trace) but was NOT touched — unconfirmed
      there, and per the working agreement below, don't extend this fix to that path without
      testing it first and confirming with Martin.

  INTENTIONAL BEHAVIOR, NOT BUGS:
  - Deleting a shape leaves a TRANSPARENT hole, not a fill of the surrounding color. Explicitly
    requested to stay this way: for garment/fabric print use, the hole is meant to let the
    fabric's own color show through — "fixing" this to auto-fill would break that workflow.
  - B&W mode's single global threshold will never cleanly separate a genuinely multi-color
    illustration (5+ real colors) into black/white — that's an inherent mismatch between the
    technique and that kind of content, not something to chase further. Color mode (or Greyscale,
    for tonal-only output) is the right tool for multi-color source images, and both already
    auto-detect the true color/shade count correctly. Leave B&W alone; don't chase threshold
    quality on multi-color images.

  WORKING AGREEMENT: propose a fix and wait for explicit go-ahead before writing code, even when a
  bug seems obvious and well-diagnosed — what looks like a defect can be intentional depending on
  the use case (see the transparent-hole point above, which is exactly that situation). Once agreed,
  verify against a REAL reference file before pushing, not just synthetic test images — synthetic
  tests already missed real bugs multiple times in this project (the ghost-fringe defect above, the
  original 271-path mess, and the auto-revectorize-hides-stale-state issue in point 10 above, all
  only ever reproduced on a real file). Known reference files: IMG_2685.PNG / "wolf export.svg" in
  Downloads on the Works PC (Delete-shapes + Color-mode, original reference); Downloads/
  CobraLogo-highreso-trans.png on the Home PC (used for point 8/9/10's testing — a good stand-in
  when the wolf file isn't on the machine you're working from).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vector Prep — Image to SVG Vectorizer | Crystal Groupz</title>
<meta name="description" content="Free browser-based image vectorizer: trace logos, line art and photos into clean, scalable SVG for cutting, engraving and print. All processing runs locally in your browser.">
<meta name="keywords" content="image to SVG, vectorize image, logo tracing, SVG converter, vinyl cutting artwork, laser engraving vector, raster to vector">
<meta name="author" content="Crystal Groupz">
<meta name="robots" content="index, follow">

<meta property="og:type" content="website">
<meta property="og:title" content="Vector Prep — Image to SVG Vectorizer">
<meta property="og:description" content="Free browser-based image vectorizer: trace logos, line art and photos into clean, scalable SVG for cutting, engraving and print.">
<meta property="og:site_name" content="Vector Prep by Crystal Groupz">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vector Prep — Image to SVG Vectorizer">
<meta name="twitter:description" content="Free browser-based image vectorizer: trace logos, line art and photos into clean, scalable SVG for cutting, engraving and print.">

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='8' fill='%23EDE8DF'/%3E%3Cpath d='M12 44 C20 14, 36 14, 52 30' fill='none' stroke='%232F4858' stroke-width='4'/%3E%3Ccircle cx='12' cy='44' r='4' fill='%23B23A26'/%3E%3Ccircle cx='52' cy='30' r='4' fill='%23B23A26'/%3E%3C/svg%3E">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Vector Prep",
  "applicationCategory": "DesignApplication",
  "operatingSystem": "Any (runs in web browser)",
  "description": "Browser-based image vectorizer for tracing logos, line art and photos into clean, scalable SVG. Built for print shops, sign makers and hobbyists preparing cut-ready or engrave-ready artwork.",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "GBP"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Crystal Groupz",
    "email": "hello@crystalgroupz.co.uk"
  }
}
</script>
<style>

  :root{
    /* Dark theme, distinct from Graphic Suite's own chrome colors but in
       the same dark family — this is the tool's content area, not the
       suite's sidebar/toolbar, so it deliberately isn't identical to
       either. --ink now plays a light/foreground role (text, the tool's
       original bold "boxy" borders, and inverted-fill button states) —
       everything that was near-black on a light page is now near-white
       on a dark one, keeping the same strong high-contrast graphic
       identity rather than softening it into a generic dark UI. */
    --canvas:#1a1c22;
    --ink:#e7e9ee;
    --thread-red:#B23A26;
    --thread-blue:#2F4858;
    --stitch-gold:#B8935F;
    --paper-line:#262a33;
    --white:#23262e;
    --field-border:#3a3f4a;
  }

  *{box-sizing:border-box;}
  html{height:100%;}
  body{
    height:100%;
    margin:0;
    /* No scrolling at all once a design is loaded — see the .wrap:has(.stage.on)
       rules below, which shrink the intro/drop-zone and cap the preview to
       fit whatever's left of the viewport instead.
       REAL BUG fixed alongside this: this standalone site's own header/version-tag and Buy Me a
       Coffee / cross-promo row (re-added when this site was rebuilt from the app-embedded tool
       source, which strips that branding since the app's own toolbar already provides it) were
       never covered by this shrink logic — they sat there at full size always, eating into the
       fixed height budget the rest of this design assumes it can reclaim. On a real laptop screen
       that pushed the tool panels' bottom below the visible area with nothing to scroll to (body
       is overflow:hidden), which is exactly what "have to zoom out to 80%" / "cut off at the
       bottom" were. Fixed the same way .sub/.footnote already are below: hidden entirely once a
       picture is loaded. */
    overflow:hidden;
    background:var(--canvas);
    font-family:'Segoe UI',sans-serif;
    color:var(--ink);
    background-image:radial-gradient(var(--paper-line) 1px, transparent 1px);
    background-size:14px 14px;
  }

  .wrap{max-width:960px;margin:0 auto;padding:36px 20px 60px;}

  /* Once an image is loaded, the intro text and the full drop-zone prompt
     are just wasted vertical space competing with the canvas for room —
     shrink them down so the working area (rail full height, canvas, the
     popouts) gets it instead, and the whole tool fits one screen with no
     page scrollbar. Re-opening a different file still works via the
     shrunk drop zone (its click-to-choose and drag-drop behavior is
     unchanged — only its size and prompt text collapse). */
  /* Base layout for the promo row lives here, not inline on the element, specifically so the
     .wrap:has(.stage.on) .promo-row rule below can actually override it — an inline style="" always
     wins over any stylesheet rule regardless of selector specificity, which silently defeated this
     hide-on-load rule the first time (confirmed on the live site: the header's h1 correctly
     disappeared once a picture loaded since it had no inline style, but this row didn't). */
  .promo-row{margin:16px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .wrap:has(.stage.on){padding-top:14px; padding-bottom:14px;}
  .wrap:has(.stage.on) .sub{display:none;}
  .wrap:has(.stage.on) header{display:none;}
  .wrap:has(.stage.on) .promo-row{display:none;}
  .wrap:has(.stage.on) .drop{padding:16px 20px; margin-bottom:10px;}
  .wrap:has(.stage.on) .footnote{display:none;}
  .wrap:has(.stage.on) .start-over-btn{margin-top:8px;}

  header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    border-bottom:3px solid var(--ink);
    padding-bottom:14px;
    margin-bottom:8px;
  }
  h1{
    font-family:'Bahnschrift',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-size:28px;
    margin:0;
  }
  h1 span{color:var(--thread-red);}
  .version-tag{
    font-family:'Consolas',monospace;
    font-size:11px;
    color:var(--thread-blue);
    letter-spacing:0.05em;
    margin-top:2px;
  }
  .tag{
    font-family:'Consolas',monospace;
    font-size:12px;
    color:var(--thread-blue);
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .sub{
    font-size:14px;
    color:#9aa0ac;
    margin:10px 0 28px;
    max-width:520px;
    line-height:1.5;
  }

  .drop{
    border:2px dashed var(--ink);
    background:var(--white);
    border-radius:2px;
    padding:36px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .drop.drag{border-color:var(--thread-red); background:var(--white);}
  .drop p{margin:0; font-size:15px;}
  .drop .hint{font-family:'Consolas',monospace; font-size:11px; color:var(--ink);font-weight:500; margin-top:8px;}
  input[type=file]{display:none;}

  .stage{display:none; margin-top:28px;}
  /* Traditional-graphics-app layout: a slim icon rail pinned to the left,
     the canvas filling the rest of the WINDOW (not just the ~960px reading
     column .wrap caps everything else to), and each tool's controls living
     in a panel docked to the right edge of the window — like a real
     graphics app's tool options, not squeezed into the page's own width.
     The stage breaks out of .wrap's max-width with the standard "full
     bleed" trick (100vw + negative margin) so it's genuinely adaptive to
     whatever size the window actually is, edge to edge, rather than
     capped. Only the stage does this — the intro text and drop zone above
     it stay at a comfortable reading width. */
  .stage.on{
    display:block;
    position:relative;
    width:100vw;
    left:50%;
    margin-left:-50vw;
    padding:0 24px 0 80px; /* left padding clears the fixed rail (56px + 24px gap) */
    box-sizing:border-box;
  }

  /* Pinned flush against Graphic Suite's own left sidebar and running the
     full height of the window, not floating with margins inside the page —
     position:fixed here is relative to this tool's own viewport, which
     already starts right at the suite sidebar's edge and right below its
     toolbar, so top:0/left:0 lands exactly there with no extra offset
     needed. Only visible while .stage has .on (it's stage's child, and a
     display:none ancestor hides a fixed child too). */
  .tool-rail{
    display:flex;
    flex-direction:column;
    gap:6px;
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:56px;
    padding-top:16px;
    background:var(--canvas);
    border-right:1px solid var(--field-border);
    z-index:30;
  }
  .rail-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:56px;
    padding:8px 2px;
    background:var(--white);
    border:1px solid var(--field-border);
    color:var(--ink);
    cursor:pointer;
    font-family:'Consolas',monospace;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .rail-btn svg{width:20px; height:20px;}
  .rail-btn:hover{border-color:var(--thread-red);}
  .rail-btn.active{background:var(--thread-red); border-color:var(--thread-red); color:#fff;}

  /* Fixed to the window's own right edge (not the canvas's), so it stays
     put — same spot on screen — regardless of page scroll or how wide the
     canvas column ends up being. */
  .tool-popout{
    display:none;
    position:fixed;
    top:24px;
    right:24px;
    width:300px;
    min-width:220px;
    min-height:120px;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    z-index:20;
    box-shadow:0 8px 28px rgba(0,0,0,0.5);
  }
  .tool-popout.open{display:block;}
  .popout-resize-handle{
    position:absolute;
    right:1px;
    bottom:1px;
    width:15px;
    height:15px;
    cursor:nwse-resize;
    color:var(--field-border);
    z-index:1;
  }
  .popout-resize-handle:hover{color:var(--thread-red);}
  .popout-resize-handle svg{width:100%; height:100%; display:block;}

  /* The popout floats over the canvas panel's right edge, which otherwise
     hides the zoom control and Source/Vector toggle behind it. Reserve
     the space instead of letting them collide. */
  body.panel-open .canvas-panel .label{padding-right:320px;}
  .tool-popout h3{position:relative; padding-right:22px; cursor:move; user-select:none;}
  .popout-close{
    position:absolute;
    top:0;
    right:0;
    background:transparent;
    border:none;
    color:var(--ink);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
  }
  .popout-close:hover{color:var(--thread-red);}

  .canvas-container{position:sticky; top:20px; min-width:0;}

  .canvas-panel{
    background:var(--white);
    border:1px solid var(--ink);
    padding:14px;
    position:relative;
  }
  .processing-overlay{
    display:none;
    position:absolute;
    top:24px; right:24px;
    background:var(--ink);
    color:var(--white);
    font-family:'Consolas',monospace;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:8px 14px;
    border:1px solid var(--thread-red);
    z-index:30;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
    animation:processingPulse 1.1s ease-in-out infinite;
  }
  .processing-overlay.show{display:block;}
  @keyframes processingPulse{
    0%, 100% { opacity:1; }
    50% { opacity:.55; }
  }
  .canvas-panel .label{
    font-family:'Consolas',monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--ink);font-weight:500;
    margin-bottom:10px;
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    justify-content:space-between;
    align-items:center;
  }

  .view-toggle{display:flex; gap:6px;}
  .view-toggle button{
    font-family:'Consolas',monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:4px 9px;
    border:1px solid var(--ink);
    background:transparent;
    color:var(--ink);
    cursor:pointer;
  }
  .view-toggle button.active{background:var(--ink); color:var(--white);}

  .zoom-control{display:flex; gap:8px; align-items:center; font-family:'Segoe UI',sans-serif; text-transform:none; letter-spacing:normal;}
  .zoom-control label{font-size:11px; color:var(--ink);font-weight:500; margin:0;}
  .zoom-control input[type=range]{width:80px; margin:0;}
  .zoom-control .zoom-val{font-size:11px; font-family:'Consolas',monospace; font-weight:bold; width:35px; text-align:right;}

  /* flex + margin:auto on the canvas/svg (below) centers it whenever it's smaller than this
     box; align-items:flex-start (not center) is required so overflow:auto can actually scroll
     to zoomed-in content instead of clipping it against a centered flex line — see Print Prep
     for the same pattern. */
  .preview-holder{
    position:relative;
    width:100%;
    margin:0 auto;
    overflow:auto;
    height:60vh;
    border:1px solid var(--paper-line);
    background:var(--canvas);
    display:flex;
    align-items:flex-start;
    scrollbar-width:none;
    user-select:none;
  }
  .preview-holder::-webkit-scrollbar{display:none;}
  }
  .preview-holder.checker{
    background-image:
      linear-gradient(45deg, #2c2f37 25%, transparent 25%),
      linear-gradient(-45deg, #2c2f37 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #2c2f37 75%),
      linear-gradient(-45deg, transparent 75%, #2c2f37 75%);
    background-size:16px 16px;
    background-position:0 0, 0 8px, 8px -8px, -8px 0px;
  }

  /* Background picker (view-only): lets dark/light artwork be judged against different backdrops.
     Never touches the exported file - it only restyles the preview box behind the artwork. */
  .bg-picker{display:flex; align-items:center; gap:6px;}
  .bg-picker .bg-label{font-size:11px; font-family:'Consolas',monospace; font-weight:bold; text-transform:uppercase; letter-spacing:.06em;}
  .swatch-row{display:flex; gap:6px; flex-wrap:wrap;}
  .swatch-btn{width:20px; height:20px; border-radius:50%; border:2px solid var(--ink); cursor:pointer; padding:0; box-sizing:border-box; display:block;}
  .swatch-btn.active{outline:2px solid var(--thread-red); outline-offset:2px;}
  .swatch-btn.auto-swatch{background:var(--canvas);}
  .swatch-btn.custom-swatch{background:conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow:hidden; position:relative;}
  .swatch-btn.custom-swatch input[type=color]{position:absolute; inset:-4px; opacity:0; cursor:pointer; border:none; padding:0;}

  canvas{display:block; margin:auto; flex-shrink:0;}
  canvas.brush-active{cursor:crosshair;}
  canvas.pan-active{cursor:grab;}
  canvas.pan-active:active{cursor:grabbing;}

  /* Crop marquee — darkens everywhere outside the drawn box, same look as the other tools'
     crop preview. Positioned in JS via canvas.offsetLeft/offsetTop, which stay correct
     regardless of zoom or centering since they're relative to previewHolder. */
  #cropMarqueeOverlay{
    position:absolute;
    top:0; left:0; width:0; height:0;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.55);
    border:2px dashed #fff;
    pointer-events:none;
    display:none;
  }
  #cropMarqueeOverlay.show{display:block;}
  #svgHolder{display:none; margin:auto; flex-shrink:0;}
  #svgHolder svg{display:block;}
  #svgHolder.delete-active path{cursor:pointer;}
  #svgHolder.pan-active{cursor:grab;}
  #svgHolder.pan-active:active{cursor:grabbing;}
  #svgHolder.delete-active path:hover{opacity:.55; outline:1px dashed var(--thread-red); outline-offset:1px;}
  #svgHolder.delete-active path.delete-selected{opacity:.4; outline:2px solid var(--thread-red); outline-offset:1px;}

  .tools{display:flex; flex-direction:column; gap:14px;}
  .tool-block{background:var(--white); border:1px solid var(--ink); padding:14px;}
  .tool-block h3{
    font-family:'Bahnschrift',sans-serif;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin:0 0 10px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .tool-block h3 .n{font-family:'Consolas',monospace; font-size:11px; color:var(--thread-red);}
  .tool-block p.hint{font-size:11px;color:var(--ink);font-weight:500;margin:4px 0 12px;line-height:1.4;}

  button.action{
    width:100%;
    font-family:'Segoe UI',sans-serif;
    font-weight:600;
    font-size:13px;
    padding:9px 10px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--white);
    cursor:pointer;
    transition:background .15s;
  }
  button.action:hover{background:var(--thread-red); border-color:var(--thread-red);}
  button.action:active{transform:translateY(1px);}
  button.action:disabled{cursor:wait; opacity:0.8;}
  /* Desktop-only lock (see lockPanelForDesktopOnly below): overrides the "processing" look above
     with a clearly permanent, "you can't use this" appearance — not "please wait". Specificity
     (.gm-locked ancestor) beats the plain button.action:disabled rule above on purpose. */
  .gm-locked input:disabled, .gm-locked select:disabled, .gm-locked button:disabled{
    cursor:not-allowed !important;
    opacity:0.4 !important;
    filter:grayscale(0.4);
  }
  button.action.busy{
    background:linear-gradient(90deg, var(--ink) 0%, var(--thread-red) 50%, var(--ink) 100%);
    background-size:220% 100%;
    animation:flashBtn 1.1s linear infinite;
    border-color:var(--thread-red);
  }
  @keyframes flashBtn{0%{background-position:0% 0%;} 100%{background-position:-220% 0%;}}
  button.action.done-state{
    background:#2e7d32;
    border-color:#2e7d32;
    color:#fff;
  }
  button.ghost{background:transparent; color:var(--ink);}
  button.ghost:hover{background:var(--ink); color:var(--white);}
  .start-over-btn{
    display:block;
    width:100%;
    margin-top:14px;
    font-family:'Segoe UI',sans-serif;
    font-weight:700;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.03em;
    padding:12px 10px;
    border:2px solid #7A1210;
    background:#D32F2F;
    color:#fff;
    cursor:pointer;
  }
  .start-over-btn:hover{background:#B71C1C;}
  .start-over-btn:active{transform:translateY(1px);}

  .row{display:flex; gap:8px; margin-bottom:8px; align-items:center;}
  .row label{font-size:11px; color:var(--ink);font-weight:500; display:block; margin-bottom:3px; font-family:'Consolas',monospace; flex:1;}
  .row .val{width:44px; text-align:right; font-family:'Consolas',monospace; font-size:12px; font-weight:bold; margin-top:8px;}
  input[type=range]{width:100%; accent-color:var(--thread-red);}
  select{width:100%;font-family:'Consolas',monospace;font-size:12px;padding:6px 8px;border:1px solid var(--field-border);background:var(--white);color:var(--ink);}

  .slider-row{display:flex; gap:8px; align-items:flex-end; margin-bottom:8px;}
  .slider-row .slider-col{flex:1;}
  .slider-row .slider-col label{font-size:11px; color:var(--ink);font-weight:500; display:block; margin-bottom:3px; font-family:'Consolas',monospace;}

  /* Custom up/down stepper rather than relying on the browser's native <input type=number>
     spinner — that spinner is inconsistent (hidden entirely in some browsers/zoom levels,
     squeezed invisible in a narrow box in others), so we build our own to guarantee it's
     always there. */
  .num-stepper{display:flex; width:82px; border:1px solid var(--field-border); background:var(--white);}
  .num-stepper .num-input{
    flex:1;
    width:0;
    min-width:0;
    border:none;
    background:transparent;
    color:var(--ink);
    font-family:'Consolas',monospace;
    font-size:12px;
    font-weight:bold;
    text-align:right;
    padding:5px 4px 5px 6px;
  }
  .num-input::-webkit-outer-spin-button,
  .num-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .num-input[type=number]{ -moz-appearance:textfield; }
  .num-stepper .stepper-btns{display:flex; flex-direction:column; border-left:1px solid var(--field-border);}
  .stepper-btn{
    border:none;
    background:var(--white);
    color:var(--ink);
    cursor:pointer;
    font-size:8px;
    line-height:1;
    padding:0;
    width:17px;
    height:12px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .stepper-btn:not(:last-child){border-bottom:1px solid var(--field-border);}
  .stepper-btn:hover{background:var(--thread-red); color:#fff;}
  .stepper-btn:active{background:var(--ink); color:var(--white);}

  .swatch-list{display:flex; flex-wrap:wrap; gap:6px;}
  .swatch-list .sw{
    width:26px; height:26px; border-radius:50%;
    border:2px solid var(--ink);
  }
  .swatch-empty{font-size:11px; color:var(--ink);font-weight:500; font-family:'Consolas',monospace;}

  .meta{
    font-family:'Consolas',monospace;
    font-size:11px;
    color:var(--ink);font-weight:500;
    margin-top:6px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px;
  }
  .meta b{color:var(--ink);}

  .footnote{
    margin-top:34px;
    font-size:12px;
    color:var(--ink);font-weight:500;
    border-top:1px solid var(--paper-line);
    padding-top:14px;
    line-height:1.6;
  }
</style>
<style id="gs-busy-style">
/* Busy indicator (shared across Graphic Suite tools): a spinner pill + progress cursor so a long
   operation never looks like a crash. */
#gsBusy{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:2147483000;display:none;align-items:center;gap:10px;padding:8px 18px 8px 12px;background:#23262e;color:#e7e9ee;border:1px solid #3a3f4a;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.45);font:600 13px system-ui,"Segoe UI",sans-serif;pointer-events:none;}
#gsBusy.show{display:flex;}
#gsBusy .gs-spin{width:16px;height:16px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:gsSpin .8s linear infinite;}
@keyframes gsSpin{to{transform:rotate(360deg);}}
html.gs-busy, html.gs-busy *{cursor:progress !important;}
</style>
</head>
<body>
<div class="wrap">

  <header>
    <div>
      <h1>Vector<span>Prep</span></h1>
      <div class="version-tag">Version 3.6</div>
    </div>
    <div class="tag">Trace &amp; Export • SVG Ready</div>
  </header>
  <p class="sub">Trace logos, line art and photos into clean, scalable SVG paths.<br>All processing runs locally in your browser.</p>

  <div class="promo-row">
    <a href="https://www.buymeacoffee.com/Vector_Print_Prep" target="_blank" style="display:block;flex-shrink:0;">
      <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me a Coffee" style="height:52px;width:188px;display:block;">
    </a>
    <a href="https://printprep.click" target="_blank" style="padding:0 18px;background:#B23A26;color:#ffffff;text-decoration:none;border-radius:4px;font-weight:600;font-size:15px;text-align:center;font-family:'Oswald',sans-serif;display:inline-flex;align-items:center;justify-content:center;height:52px;white-space:nowrap;flex-shrink:0;transition:background 0.2s;border:none;letter-spacing:0.5px;">
      Try Print Prep
    </a>
  </div>

  <div class="drop" id="drop">
    <p>Drop an image here, or click to choose</p>
    <div class="hint">PNG · JPG · WebP — stays on this device</div>
    <input type="file" id="file" accept="image/*">
  </div>

  <div class="stage" id="stage">
    <nav class="tool-rail" id="toolRail">
      <button type="button" class="rail-btn" data-panel="panel-upscale" title="Upscale (AI)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4H4v5M15 4h5v5M4 15v5h5M20 15v5h-5"/></svg>
        <span>Upscale</span>
      </button>
      <button type="button" class="rail-btn" data-panel="panel-crop" title="Crop">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v14a2 2 0 0 0 2 2h14M2 6h14a2 2 0 0 1 2 2v14"/></svg>
        <span>Crop</span>
      </button>
      <button type="button" class="rail-btn" data-panel="panel-trace" title="Trace mode">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7.6 7.2 11 16M16.4 7.2 13 16M8 6h8"/></svg>
        <span>Trace</span>
      </button>
      <button type="button" class="rail-btn" data-panel="panel-detail" title="Detail">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="14" cy="7" r="2.3"/><circle cx="8" cy="17" r="2.3"/></svg>
        <span>Detail</span>
      </button>
      <button type="button" class="rail-btn" data-panel="panel-touchup" title="Touch-up brush">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20c1-4 2-6 4-6s2 2 3 2 2-8 5-11 5 2 2 5-9 4-9 5 2 2 2 3-3 3-7 2Z"/></svg>
        <span>Touch-up</span>
      </button>
      <button type="button" class="rail-btn" data-panel="panel-export" title="Export">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V4m0 0L8 8m4-4 4 4"/><path d="M5 15v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3"/></svg>
        <span>Export</span>
      </button>
    </nav>
    <div class="canvas-container">
      <div class="canvas-panel">
        <div class="processing-overlay" id="processingOverlay">⏳ Processing…</div>
        <div class="label">
          <span>Preview</span>
          <div style="display:flex; gap:14px; align-items:center;">
            <div class="bg-picker" title="Preview background - view only, never changes your exported file">
              <span class="bg-label">Background</span>
              <div class="swatch-row" id="bgSwatchRow">
                <button type="button" class="swatch-btn auto-swatch active" data-bg="auto" title="Default (dark)"></button>
                <button type="button" class="swatch-btn" data-bg="#121212" title="Black" style="background:#121212;"></button>
                <button type="button" class="swatch-btn" data-bg="#FFFFFF" title="White" style="background:#FFFFFF;"></button>
                <button type="button" class="swatch-btn" data-bg="#1D2951" title="Navy" style="background:#1D2951;"></button>
                <button type="button" class="swatch-btn" data-bg="#E40000" title="Red" style="background:#E40000;"></button>
                <button type="button" class="swatch-btn" data-bg="#1E7B34" title="Green" style="background:#1E7B34;"></button>
                <button type="button" class="swatch-btn" data-bg="#B0B0B0" title="Heather Grey" style="background:#B0B0B0;"></button>
                <button type="button" class="swatch-btn" data-bg="#EDE0C8" title="Natural" style="background:#EDE0C8;"></button>
                <label class="swatch-btn custom-swatch" title="Custom colour"><input type="color" id="customBgColor" value="#888888"></label>
              </div>
            </div>
            <div class="zoom-control">
              <label>Zoom (scroll to zoom on cursor):</label>
              <input type="range" id="zoomLevel" min="1" max="500" value="100">
              <span class="zoom-val" id="zoomVal">100%</span>
            </div>
            <div class="view-toggle">
              <button type="button" id="viewSource" class="active">Source</button>
              <button type="button" id="viewVector">Vector</button>
            </div>
          </div>
        </div>
        <div class="preview-holder" id="previewHolder">
          <canvas id="canvas"></canvas>
          <div id="svgHolder"></div>
          <div id="cropMarqueeOverlay"></div>
        </div>
        <div class="meta">
          <span>output <b id="dims">—</b></span>
          <span id="pathCount">—</span>
          <span id="svgSize">—</span>
        </div>
      </div>
      <button class="start-over-btn" id="reset">Start Over — Erase Everything</button>
    </div>

    <div class="tools">
      <div class="tool-block tool-popout" id="panel-upscale">
        <h3><span class="n">00</span> Upscale (AI)<button type="button" class="popout-close" data-close title="Close">&times;</button></h3>
        <p class="hint">Real AI reconstruction (same engine as the Upscale tool) — runs fully offline, no blanket resize. Do this before tracing if the source image is small or soft, for a cleaner trace.</p>
        <div class="row" style="margin-bottom:12px;">
          <select id="upscaleFactor">
            <option value="2">2x Density Enhancement</option>
            <option value="4" selected>4x Smart Upscale</option>
            <option value="8">8x Max Density Upscale</option>
          </select>
        </div>
        <label style="font-size:11px; color:var(--ink);font-weight:500; display:block; margin-bottom:6px;">Artwork type</label>
        <div style="display:flex; gap:8px; margin-bottom:12px;">
          <label style="display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;">
            <input type="radio" name="upscaleModel" value="photo" checked style="margin:0;">Photo/realistic
          </label>
          <label style="display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;">
            <input type="radio" name="upscaleModel" value="illustration" style="margin:0;">Illustration/flat colour
          </label>
        </div>
        <button class="action" id="applyUpscale">Execute HD Upscale</button>
      </div>

      <div class="tool-block tool-popout" id="panel-crop">
        <h3><span class="n">01</span> Crop<button type="button" class="popout-close" data-close title="Close">&times;</button></h3>
        <p class="hint">Crop out empty space or unwanted background before tracing — the tracer then only spends time on the artwork itself, and the exported SVG isn't padded with a blank margin. Works on the source picture (Source view), before Vectorize.</p>
        <button class="action ghost" id="trimToContentBtn" style="margin-top:0;">Trim to Content</button>
        <p class="hint" id="vpTrimStatus" style="margin:6px 0 12px;"></p>
        <button class="action ghost" id="cropMarqueeToggle">Draw a Crop Box</button>
        <div class="row" id="cropMarqueeActions" style="display:none; margin-top:8px;">
          <button class="action" id="cropMarqueeApply" style="flex:1;" disabled>Apply Crop</button>
          <button class="action ghost" id="cropMarqueeCancel" style="flex:1;">Cancel</button>
        </div>
        <div class="history-controls" style="margin-top:8px;">
          <button class="action ghost history-back-btn" id="cropHistoryBack" style="flex:1;" disabled>← Undo</button>
          <button class="action ghost history-redo-btn" id="cropHistoryRedo" style="flex:1;" disabled>Redo →</button>
        </div>
      </div>

      <div class="tool-block tool-popout" id="panel-trace">
        <h3><span class="n">02</span> Trace mode<button type="button" class="popout-close" data-close title="Close">&times;</button></h3>
        <p class="hint">Line art / logos give the cleanest single-colour trace. Color mode posterizes photos into flat vector regions. Greyscale does the same but in tonal shades of grey, no hue.</p>
        <button class="action ghost" id="suggestSettings" style="margin-bottom:12px;">✨ Suggest Settings for This Image</button>
        <div class="row" style="margin-bottom:12px;">
          <select id="mode">
            <option value="bw">Line Art (Black &amp; White)</option>
            <option value="greyscale">Greyscale (Multi-tone)</option>
            <option value="color">Color / Posterize</option>
          </select>
        </div>
        <button class="action" id="vectorizeBtn" style="margin-bottom:12px;">Vectorize</button>
        <p class="hint" style="margin:-6px 0 12px;">Load an image, pick a mode above, then Vectorize to run the first trace. After that, every slider/setting below still updates the preview live as you adjust it — Vectorize is only for that first pass (or to force a full retrace on demand).</p>
        <button class="action ghost" id="refreshTrace" style="margin-bottom:12px;">↻ Refresh (Redo From Scratch)</button>
        <p class="hint" style="margin:-6px 0 12px;">If a color/shade count looks off (e.g. after switching modes), Refresh re-runs this mode's first-look detection fresh, exactly as if the image had just been loaded — no need to reload the file.</p>

        <div id="bwControls">
          <div class="slider-row">
            <div class="slider-col">
              <label>Threshold</label>
              <input type="range" id="threshold" min="1" max="254" value="70">
            </div>
            <input type="number" class="num-input" id="thresholdNum" min="1" max="254" step="1" value="70">
          </div>
          <label style="font-size:11px; color:var(--ink);font-weight:500; display:block; margin-top:4px;">
            <input type="checkbox" id="invert"> Invert (trace the light areas instead)
          </label>
          <button class="action ghost" id="resetTraceMode" style="margin-top:10px;">Reset Trace Mode to Defaults</button>
        </div>

        <div id="colorControls" style="display:none;">
          <div class="slider-row">
            <div class="slider-col">
              <label id="colorCountLabel">Color count</label>
              <input type="range" id="colorCount" min="2" max="32" value="8">
            </div>
            <input type="number" class="num-input" id="colorCountNum" min="2" max="32" step="1" value="8">
          </div>
          <button class="action ghost" id="resetColorCount" style="margin-top:10px;">Reset Color Count to Default</button>

          <div id="paletteBlock" style="display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--paper-line);">
            <div style="font-family:'Bahnschrift',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;" id="paletteBlockTitle">Detected palette</div>
            <p class="hint">Click a color to give it its own curve fit / edge smoothing, overriding the shared Detail settings just for that color.</p>
            <div class="swatch-list" id="swatchList"><span class="swatch-empty">Trace an image to see colors</span></div>
            <div id="colorOverridePanel" style="display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--paper-line);">
              <div style="font-family:'Consolas',monospace;font-size:11px;color:var(--ink);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:8px;justify-content:space-between;">
                <div style="display:flex;align-items:center;gap:8px;">
                  <span id="overrideColorSwatch" style="width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);display:inline-block;"></span>
                  <span>Editing this color only</span>
                </div>
                <button type="button" id="overrideCollapse" title="Close (your changes stay applied — click a swatch to reopen)" style="border:1px solid var(--field-border);background:var(--white);color:var(--ink);cursor:pointer;font-family:'Consolas',monospace;font-size:11px;line-height:1;width:20px;height:20px;padding:0;">✕</button>
              </div>
              <div class="slider-row">
                <div class="slider-col">
                  <label>Curve fit</label>
                  <input type="range" id="overrideCurveFit" min="0.02" max="40" step="0.01" value="2.21">
                </div>
                <input type="number" class="num-input" id="overrideCurveFitNum" min="0.02" max="40" step="0.01" value="2.21">
              </div>
              <div class="slider-row">
                <div class="slider-col">
                  <label>Edge smoothing</label>
                  <input type="range" id="overrideEdgeSmoothing" min="0" max="40" step="0.1" value="5">
                </div>
                <input type="number" class="num-input" id="overrideEdgeSmoothingNum" min="0" max="40" step="0.1" value="5">
              </div>
              <div class="slider-row">
                <div class="slider-col">
                  <label>Speckle removal</label>
                  <input type="range" id="overrideSpeckle" min="0" max="200" step="1" value="3">
                </div>
                <input type="number" class="num-input" id="overrideSpeckleNum" min="0" max="200" step="1" value="3">
              </div>
              <div style="margin-top:8px; padding-top:8px; border-top:1px solid var(--paper-line);">
                <div class="slider-row">
                  <div class="slider-col">
                    <label>Brightness</label>
                    <input type="range" id="overrideBrightness" min="-100" max="100" step="1" value="0">
                  </div>
                  <input type="number" class="num-input" id="overrideBrightnessNum" min="-100" max="100" step="1" value="0">
                </div>
                <div class="slider-row">
                  <div class="slider-col">
                    <label>Contrast</label>
                    <input type="range" id="overrideContrast" min="-100" max="100" step="1" value="0">
                  </div>
                  <input type="number" class="num-input" id="overrideContrastNum" min="-100" max="100" step="1" value="0">
                </div>
                <div class="slider-row">
                  <div class="slider-col">
                    <label>Saturation</label>
                    <input type="range" id="overrideSaturation" min="-100" max="100" step="1" value="0">
                  </div>
                  <input type="number" class="num-input" id="overrideSaturationNum" min="-100" max="100" step="1" value="0">
                </div>
                <div class="slider-row">
                  <div class="slider-col">
                    <label>Vibrancy</label>
                    <input type="range" id="overrideVibrancy" min="0" max="100" step="1" value="0">
                  </div>
                  <input type="number" class="num-input" id="overrideVibrancyNum" min="0" max="100" step="1" value="0">
                </div>
              </div>
              <button class="action ghost" id="overrideUseGlobal">Use Global Settings for This Color</button>
              <button class="action ghost" id="overrideDeleteColor" style="margin-top:8px; border-color:var(--thread-red); color:var(--thread-red);">Delete This Color</button>
              <p class="hint" style="margin:6px 0 0;">Removes just this color and re-assigns its pixels to whichever remaining color is closest — the other colors and their own settings are untouched.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="tool-block tool-popout" id="panel-detail">
        <h3><span class="n">03</span> Detail<button type="button" class="popout-close" data-close title="Close">&times;</button></h3>
        <p class="hint">Images are automatically supersampled before tracing for smoother, more accurate curves — these controls fine-tune fidelity on top of that.</p>
        <div class="row" style="margin-bottom:12px;">
          <select id="supersample">
            <option value="auto" selected>Supersampling: Auto (picks based on image size)</option>
            <option value="1">Supersampling: 1x</option>
            <option value="1.5">Supersampling: 1.5x</option>
            <option value="2">Supersampling: 2x</option>
            <option value="2.5">Supersampling: 2.5x</option>
            <option value="3">Supersampling: 3x</option>
            <option value="4">Supersampling: 4x</option>
            <option value="5">Supersampling: 5x</option>
            <option value="6">Supersampling: 6x</option>
            <option value="8">Supersampling: 8x</option>
          </select>
        </div>
        <p class="hint" style="margin:-6px 0 12px;">Higher = the source is upscaled more before tracing, giving the curve fitter finer pixel data to work from — sharper, more precise curves at the cost of a slower trace and a bigger SVG. Auto picks a sensible value based on image size; raise it manually for maximum precision on a small or detail-heavy source.</p>
        <div class="slider-row">
          <div class="slider-col">
            <label>Curve smoothing (higher = smoother; very low values trace the raw pixel staircase instead of fitting a curve)</label>
            <input type="range" id="simplify" min="0" max="8000" value="0">
          </div>
          <input type="number" class="num-input" id="simplifyNum" min="0.02" max="40" step="0.01" value="0.02">
        </div>

        <div class="slider-row">
          <div class="slider-col">
            <label>Speckle removal</label>
            <input type="range" id="speckle" min="0" max="200" value="0">
          </div>
          <input type="number" class="num-input" id="speckleNum" min="0" max="200" step="1" value="0">
        </div>

        <div class="slider-row">
          <div class="slider-col">
            <label>Edge smoothing / blur (a blunter, coarser tool than Curve smoothing above — push that one up first for jagged edges)</label>
            <input type="range" id="smoothing" min="0" max="40" step="0.1" value="0">
          </div>
          <input type="number" class="num-input" id="smoothingNum" min="0" max="40" step="0.1" value="0">
        </div>

        <label style="font-size:11px; color:var(--ink);font-weight:500; display:block; margin-top:4px;">
          <input type="checkbox" id="rightAngle" checked> Sharpen right-angle corners (logos/text)
        </label>

        <button class="action ghost" id="resetDetail" style="margin-top:10px;">Reset Detail to Defaults</button>
      </div>

      <div class="tool-block" style="display:none;">
        <!-- Hidden per Martin's request (2026-08-18) — caused trouble with the export and works
             better without it. Left fully in place (markup, IDs, event listeners, JS functions
             all untouched) in case it's wanted back later: just remove this display:none / restore
             the "0N" numbering below to re-enable it. -->
        <h3><span class="n">04</span> Delete shapes</h3>
        <p class="hint">Click a shape in the Vector preview to select it (and, at Tolerance scope, every similarly-colored shape near it), then click it again — or press Delete Selected — to remove it. Erases the underlying source pixels, so deletions survive re-tracing. Switches to Vector view automatically.</p>
        <div class="row" style="margin-bottom:12px;">
          <select id="deleteScope">
            <option value="off">Off</option>
            <option value="shape">Delete this shape only</option>
            <option value="color">Delete every shape of this exact color</option>
            <option value="tolerance">Delete similar shades (tolerance)</option>
          </select>
        </div>
        <div id="deleteToleranceRow" style="display:none; margin-bottom:12px;">
          <div class="slider-row">
            <div class="slider-col">
              <label>Color tolerance</label>
              <input type="range" id="deleteTolerance" min="0" max="100" value="15">
            </div>
            <input type="number" class="num-input" id="deleteToleranceNum" min="0" max="100" step="1" value="15">
          </div>
        </div>
        <div id="deleteSelectionActions" style="display:none; margin-bottom:12px;">
          <div class="meta" style="margin-bottom:8px; justify-content:flex-start;"><span id="deleteSelectionSummary"></span></div>
          <button class="action" id="deleteConfirm" style="margin-bottom:6px;">Delete Selected</button>
          <button class="action ghost" id="deleteCancel">Cancel Selection</button>
        </div>
        <button class="action ghost" id="deleteUndoLast" style="margin-bottom:6px;">Undo Last Delete</button>
        <button class="action ghost" id="deleteResetAll">Reset All Touch-ups</button>
      </div>

      <div class="tool-block tool-popout" id="panel-touchup">
        <h3><span class="n">04</span> Touch-up brush<button type="button" class="popout-close" data-close title="Close">&times;</button></h3>
        <p class="hint">Paints directly onto the source pixels (Source view), so edits get traced properly instead of sitting on top as a raster patch. Switches to Source view automatically.</p>
        <div class="row" style="margin-bottom:12px;">
          <select id="brushMode">
            <option value="off">Off</option>
            <option value="erase">Erase (remove)</option>
            <option value="restore">Restore (undo to original)</option>
            <option value="paint">Paint (custom color)</option>
          </select>
        </div>
        <div id="brushPaintControls" style="display:none;">
          <div class="row" style="align-items:center; margin-bottom:8px;">
            <label style="flex:1;">Paint color</label>
            <input type="color" id="brushColor" value="#B23A26" style="width:44px; height:28px; padding:0; border:1px solid var(--field-border); cursor:pointer;">
          </div>
          <button class="action ghost" id="eyedropperBtn" style="margin-bottom:12px;">🎨 Pick Color From Image</button>
        </div>
        <label style="font-family:'Consolas',monospace;font-size:11px;color:var(--ink);font-weight:500;">Brush size — <span id="brushSizeVal">30</span>px</label>
        <input type="range" id="brushSize" min="4" max="150" value="30">
        <div style="height:8px"></div>
        <p class="hint" style="margin-top:0;">Edits (brush strokes, deletes) are staged on the source pixels immediately — switching to VECTOR view or downloading automatically re-traces first if anything's changed, so there's never a separate step needed.</p>
        <button class="action ghost" id="brushUndo" style="margin-bottom:6px;">Undo Last Stroke</button>
        <button class="action ghost" id="brushResetAll" style="margin-bottom:12px;">Reset All Touch-ups</button>
      </div>

      <div class="tool-block tool-popout" id="panel-export">
        <h3><span class="n">05</span> Export<button type="button" class="popout-close" data-close title="Close">&times;</button></h3>
        <button class="action" id="downloadSvg" style="margin-bottom:8px;">Download SVG</button>
        <button class="action ghost" id="downloadPng" style="margin-bottom:8px;">Download PNG Preview</button>
        <button class="action ghost" id="saveToSuite" style="margin-bottom:8px; display:none;">Save to Gallery</button>
        <button class="action ghost" id="sendToGang" style="margin-bottom:8px; display:none;">Send to Gang Sheets</button>
        <div id="traceStatus" style="display:none;"></div>
        <div style="margin-top:8px;display:flex;flex-direction:column;gap:8px;">
          <a href="https://www.buymeacoffee.com/Vector_Print_Prep" target="_blank" style="display:block;width:100%;">
            <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me a Coffee" style="width:100%;height:auto;display:block;border-radius:4px;">
          </a>
          <a href="https://printprep.click" target="_blank" style="padding:9px 10px;background:#B23A26;color:#ffffff;text-decoration:none;border-radius:4px;font-weight:600;font-size:14px;text-align:center;font-family:'Oswald',sans-serif;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;border:none;letter-spacing:0.5px;">
            Try Print Prep
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- The standalone site's own footer (branding + copyright for a different business entirely)
       removed here for the same reason the header logo was removed above: Graphic Suite's own
       shell already provides the app's identity, and this tool is shared between two different
       apps (Crystal Suite, Graphical Magic) - a hardcoded brand name here would be wrong in
       whichever app it wasn't meant for. -->
</div>

<!-- Vendored locally (vendor/imagetracer_v1.2.6.js) instead of loaded from
     jsdelivr so the trace engine works fully offline. Same public-domain
     file, unmodified — see that file's own header for the license. -->
<script id="gs-busy-script">
window.GSBusy = (function () {
  var count = 0, timer = null, el = null, label = 'Working…';
  function ensure() {
    if (el) return el;
    el = document.createElement('div');
    el.id = 'gsBusy';
    el.setAttribute('role', 'status');
    el.innerHTML = '<div class="gs-spin"></div><span></span>';
    document.body.appendChild(el);
    return el;
  }
  function show() {
    var e = ensure();
    e.querySelector('span').textContent = label;
    e.classList.add('show');
    document.documentElement.classList.add('gs-busy');
  }
  function hide() {
    if (el) el.classList.remove('show');
    document.documentElement.classList.remove('gs-busy');
  }
  // immediate=true shows straight away (use for work known to be slow); otherwise a 150ms delay
  // avoids flicker on quick operations. Every start() must be paired with exactly one stop().
  function start(text, immediate) {
    count++;
    if (text) label = text;
    if (count === 1) {
      clearTimeout(timer);
      if (immediate) show(); else timer = setTimeout(show, 150);
    } else if (el && el.classList.contains('show')) {
      el.querySelector('span').textContent = label;
    }
  }
  function stop() {
    count = Math.max(0, count - 1);
    if (count === 0) { clearTimeout(timer); hide(); }
  }
  function setLabel(text) {
    label = text;
    if (el) el.querySelector('span').textContent = text;
  }
  // Lets the spinner paint before synchronous heavy work blocks the thread, then always clears it.
  function nextPaint() { return new Promise(function (r) { requestAnimationFrame(function () { setTimeout(r, 0); }); }); }
  async function run(text, fn) {
    start(text, true);
    try { await nextPaint(); return await fn(); } finally { stop(); }
  }
  // A task with a live percentage in the pill, e.g. task("Loading image") -> "Loading image — 42%".
  // Call progress(0..1) as work advances and finish() exactly once when done (safe to call twice).
  function task(text) {
    var finished = false;
    start(text + " — 0%", true);
    return {
      progress: function (fraction) {
        if (finished) return;
        setLabel(text + " — " + Math.max(0, Math.min(100, Math.round(fraction * 100))) + "%");
      },
      finish: function () { if (finished) return; finished = true; stop(); }
    };
  }
  return { start: start, stop: stop, setLabel: setLabel, run: run, task: task };
})();
</script>
<script src="vendor/imagetracer_v1.2.6.js"></script>
<script>
const drop = document.getElementById('drop');
const fileInput = document.getElementById('file');
const stage = document.getElementById('stage');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
const svgHolder = document.getElementById('svgHolder');
const previewHolder = document.getElementById('previewHolder');
const dimsEl = document.getElementById('dims');
const pathCountEl = document.getElementById('pathCount');
const svgSizeEl = document.getElementById('svgSize');
const traceStatus = document.getElementById('traceStatus');
const processingOverlay = document.getElementById('processingOverlay');
const swatchList = document.getElementById('swatchList');
const paletteBlock = document.getElementById('paletteBlock');

const modeSelect = document.getElementById('mode');
const bwControls = document.getElementById('bwControls');
const colorControls = document.getElementById('colorControls');
const threshold = document.getElementById('threshold');
const thresholdNum = document.getElementById('thresholdNum');
const invert = document.getElementById('invert');
const colorCount = document.getElementById('colorCount');
const colorCountNum = document.getElementById('colorCountNum');
const smoothing = document.getElementById('smoothing');
const smoothingNum = document.getElementById('smoothingNum');
const simplify = document.getElementById('simplify');
const simplifyNum = document.getElementById('simplifyNum');
const speckle = document.getElementById('speckle');
const speckleNum = document.getElementById('speckleNum');
const rightAngle = document.getElementById('rightAngle');
const supersample = document.getElementById('supersample');

const viewSourceBtn = document.getElementById('viewSource');
const viewVectorBtn = document.getElementById('viewVector');

let originalImageData = null; // pristine pixels straight from the loaded image — every trace re-runs from this, never from a previous trace's output
let lastSvgString = '';
let lastPalette = []; // Color mode's current palette — indices here are what colorOverrides keys into
// Set by "Delete this color" — an exact palette (same RGB values, no re-clustering) to use
// instead of a fresh kMeansPalette call. Cleared (falls back to fresh detection) whenever
// colorCount no longer matches its length — see runTrace's color branch.
let pinnedPalette = null;
let pristineImageData = null; // untouched backup for the Restore brush and Reset All Touch-ups
let brushUndoStack = []; // snapshots of originalImageData.data taken before each stroke
let traceTimeout = null;

// True whenever originalImageData has changed (a brush stroke, a delete commit) since the last
// completed trace — i.e. the Vector preview AND lastSvgString (what Download SVG/PNG actually
// export) are stale relative to the real source pixels. Set on every edit, cleared once runTrace
// finishes. The download handlers check this and force a synchronous retrace first so an export
// can never silently omit an edit that just hadn't been manually re-vectorized yet — which is
// exactly how a deleted shape previously reappeared in a downloaded SVG.
let needsRetrace = false;

// Marks the source pixels as changed. This must do MORE than just set needsRetrace = true: if a
// trace was already running when the edit happened (e.g. the automatic retrace triggered by
// entering Delete-shapes mode), that trace read/upsampled pixel data from BEFORE this edit, and if
// nothing else starts a newer trace before it finishes, it's still technically "the latest
// generation" — so it would go ahead and commit its (now stale) pre-edit result, AND clear
// needsRetrace in its finally block, silently erasing the very flag that was supposed to tell
// Download a retrace was still needed. Confirmed as the actual cause of a delete surviving on
// screen but reverting to the untouched source in the exported file: the in-flight trace from
// entering delete mode finished after the delete and quietly won. Bumping traceGeneration here
// (not just when a NEW trace starts) makes any currently-in-flight trace recognize itself as
// stale the moment it tries to commit, regardless of whether a replacement trace has actually
// been kicked off yet.
function invalidateInFlightTrace(){
  traceGeneration++;
  needsRetrace = true;
}

// Set true right after a fresh image load, consumed by the first B&W trace that follows it.
// Scoped narrowly to that one trace so it never fights the user while they're deliberately
// tuning sliders afterward, and never touches Detail settings (simplify/speckle/smoothing) —
// only Threshold/Invert, since those are the only two settings that can make a B&W trace come
// back completely empty (see runTrace's blank-trace check below).
let autoFixPending = false;
let autoFixMessage = '';

// Same one-shot-per-image pattern as autoFixPending above, but for Color/Greyscale: consumed by
// the first trace in EACH of those two modes after a fresh image load (may not be the very first
// trace overall, since B&W is the default — stays pending until the user actually switches into
// that mode). The hardcoded Color count default (8) was never actually checked against the image,
// so a true 2-color logo traced with 8 color slots requested regardless.
// Kept as a PER-MODE object, not one shared flag — confirmed as a real bug on a real file: loading
// B&W -> switching to Greyscale (consumes the flag, auto-detects grey-level count against the
// desaturated image) -> switching to Color used to find the flag already spent, so Color mode
// silently kept whatever count Greyscale had computed for a totally different color space, instead
// of getting its own auto-detect — the reported "missing colors until I re-vectorize" symptom.
let colorCountAutoPendingByMode = { color: true, greyscale: true };

// Maps the 0-8000 slider to an ltres/qtres error threshold of 0.02-40 — widened again from
// 0.02-20 for a busier real-world graphic that needed more headroom on all the Detail controls.
// Slider steps scale up proportionally so per-notch sensitivity stays the same as before.
function simplifyToTres(sliderVal){
  return 0.02 + (sliderVal / 8000) * 39.98;
}
function tresToSimplify(tres){
  return Math.round(((tres - 0.02) / 39.98) * 8000);
}

function setView(showVector){
  canvas.style.display = showVector ? 'none' : 'block';
  svgHolder.style.display = showVector ? 'block' : 'none';
  previewHolder.classList.toggle('checker', showVector);
  viewSourceBtn.classList.toggle('active', !showVector);
  viewVectorBtn.classList.toggle('active', showVector);
}
// --- Preview background picker (view-only) ---
// Inline styles beat the .checker class, so a chosen colour wins in both Source and Vector view;
// "auto" clears them so the original dark/checkerboard behaviour returns.
function setPreviewBackground(bg){
  if(bg === 'auto'){
    previewHolder.style.removeProperty('background-color');
    previewHolder.style.removeProperty('background-image');
  }else{
    previewHolder.style.setProperty('background-color', bg);
    previewHolder.style.setProperty('background-image', 'none');
  }
}
function setActiveBgSwatch(el){
  document.querySelectorAll('#bgSwatchRow .swatch-btn').forEach(b => b.classList.remove('active'));
  el.classList.add('active');
}
document.querySelectorAll('#bgSwatchRow .swatch-btn[data-bg]').forEach(btn => {
  btn.addEventListener('click', () => { setPreviewBackground(btn.dataset.bg); setActiveBgSwatch(btn); });
});
const customBgColorInput = document.getElementById('customBgColor');
customBgColorInput.addEventListener('input', e => {
  setPreviewBackground(e.target.value);
  setActiveBgSwatch(customBgColorInput.closest('.swatch-btn'));
});

viewSourceBtn.addEventListener('click', () => { setView(false); renderZoomSize(); });
// REAL BUG fixed here: this used to be a pure view switch with no side effects, on the theory that
// only Download and Delete-shapes needed to force a fresh retrace first (see ensureFreshTrace
// below). But the Touch-up brush panel's own on-screen text has always promised "switching to
// VECTOR view... automatically re-traces first if anything's changed" — which this never actually
// did, so a touch-up stroke (which deliberately does NOT auto-retrace itself, to avoid retracing
// after every single stroke — see invalidateInFlightTrace's comment) just kept showing the OLD
// trace from before the stroke when you clicked VECTOR, looking like the edit "didn't take" until
// you noticed you had to hit Refresh/Vectorize explicitly. ensureFreshTrace() is already gated on
// needsRetrace, so this costs nothing when nothing's actually changed - it only ever does real work
// exactly when a view switch like this one would otherwise show something stale.
viewVectorBtn.addEventListener('click', async () => { await ensureFreshTrace(); setView(true); renderZoomSize(); });

const canvasPanel = document.querySelector('.canvas-panel');
const zoomLevelInput = document.getElementById('zoomLevel');
const zoomValLabel = document.getElementById('zoomVal');
let zoomPct = 100;

// zoomPct is a percentage of the image's true native pixel width (originalImageData.width),
// applied identically to whichever of canvas/svg is currently visible so switching views never
// jumps the zoom level.
function renderZoomSize(){
  if (!originalImageData) return;
  const wPx = (originalImageData.width * zoomPct / 100) + 'px';
  const hPx = (originalImageData.height * zoomPct / 100) + 'px';
  canvas.style.width = wPx;
  canvas.style.height = hPx;
  const svgEl = svgHolder.querySelector('svg');
  if (svgEl) { svgEl.style.width = wPx; svgEl.style.height = hPx; }
  zoomLevelInput.value = zoomPct;
  zoomValLabel.textContent = Math.round(zoomPct) + '%';
}

function fitZoomToContainer(){
  if (!originalImageData) return;
  const containerWidth = previewHolder.clientWidth || 600;
  const containerHeight = previewHolder.clientHeight || 600;
  const fitPct = Math.min(100, (containerWidth / originalImageData.width) * 100, (containerHeight / originalImageData.height) * 100);
  zoomPct = Math.max(1, Math.min(500, fitPct));
  renderZoomSize();
  previewHolder.scrollLeft = 0;
  previewHolder.scrollTop = 0;
}

// Anchors zoom to the cursor using the element's actual on-screen rect, not an assumed
// top-left-flush position. The image is centered via margin:auto whenever it's smaller than
// the preview panel (common here — logos are far smaller than the panel, unlike Print Prep's
// typically panel-filling artwork), so assuming position 0 == the image's left edge was wrong
// most of the time and made the zoom anchor drift — that was the "hit and miss" targeting.
function applyZoom(newPct, anchorClientX, anchorClientY){
  newPct = Math.max(1, Math.min(500, newPct));
  if (Math.abs(newPct - zoomPct) < 0.01) return;

  const activeEl = svgHolder.style.display === 'block' ? (svgHolder.querySelector('svg') || svgHolder) : canvas;
  const beforeRect = activeEl.getBoundingClientRect();
  const fractionX = beforeRect.width ? (anchorClientX - beforeRect.left) / beforeRect.width : 0.5;
  const fractionY = beforeRect.height ? (anchorClientY - beforeRect.top) / beforeRect.height : 0.5;

  zoomPct = newPct;
  renderZoomSize();

  // getBoundingClientRect forces a synchronous layout, so the resized geometry is already
  // correct here — no need to wait a frame (and rAF is unreliable anyway: browsers fully pause
  // it on a backgrounded tab).
  const afterRect = activeEl.getBoundingClientRect();
  const pointScreenX = afterRect.left + fractionX * afterRect.width;
  const pointScreenY = afterRect.top + fractionY * afterRect.height;
  previewHolder.scrollLeft += pointScreenX - anchorClientX;
  previewHolder.scrollTop += pointScreenY - anchorClientY;
}

zoomLevelInput.addEventListener('input', e => {
  const r = previewHolder.getBoundingClientRect();
  applyZoom(parseFloat(e.target.value), r.left + r.width / 2, r.top + r.height / 2);
});

canvasPanel.addEventListener('wheel', e => {
  if (!stage.classList.contains('on')) return;
  e.preventDefault();
  e.stopPropagation();
  const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
  applyZoom(zoomPct * factor, e.clientX, e.clientY);
}, { passive: false });

let spacePressed = false;
let isPanning = false;
let panStartX = 0;
let panStartY = 0;
let panStartScrollLeft = 0;
let panStartScrollTop = 0;

// Sliders and colour swatches are <input> too, but space bar doesn't type anything into them — the
// only reason this check exists is to stop space-pan from hijacking a keystroke meant for a real
// text/number field. Blocking pan on those as well meant that after dragging ANY slider (zoom,
// threshold, colour count, brush size, all of them — focus lands on the slider once you let go),
// space did nothing at all until you clicked back onto the canvas first to shift focus away.
function isTypingTarget(el){
  if (!el) return false;
  if (el.isContentEditable) return true;
  if (el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') return true;
  if (el.tagName === 'INPUT') {
    const nonTyping = ['range', 'color', 'checkbox', 'radio', 'button', 'submit', 'file', 'image'];
    return !nonTyping.includes((el.type || 'text').toLowerCase());
  }
  return false;
}

// Capture phase + preventDefault on EVERY space keydown (not just the first): holding a key
// fires repeated keydown "auto-repeat" events, and the old code only guarded/prevented the
// first one (via !spacePressed). Every repeat after that skipped preventDefault entirely,
// letting the browser's native "space = scroll page down" fire on each repeat for as long as
// space stayed held — that's what made the whole page/preview jump while dragging.
document.addEventListener('keydown', e => {
  if (e.code !== 'Space' || isTypingTarget(e.target)) return;
  e.preventDefault();
  if (spacePressed) return;
  spacePressed = true;
  canvas.classList.add('pan-active');
  svgHolder.classList.add('pan-active');
  previewHolder.style.cursor = 'grab';
}, true);

document.addEventListener('keyup', e => {
  if (e.code !== 'Space') return;
  spacePressed = false;
  isPanning = false;
  canvas.classList.remove('pan-active');
  svgHolder.classList.remove('pan-active');
  previewHolder.style.cursor = '';
});

// Also released on window blur (alt-tab, devtools stealing focus mid-drag, etc.) — otherwise
// a keyup that never arrives leaves spacePressed stuck true forever.
window.addEventListener('blur', () => {
  spacePressed = false;
  isPanning = false;
  canvas.classList.remove('pan-active');
  svgHolder.classList.remove('pan-active');
  previewHolder.style.cursor = '';
});

previewHolder.addEventListener('mousedown', e => {
  if (!spacePressed) return;
  e.preventDefault();
  isPanning = true;
  panStartX = e.clientX;
  panStartY = e.clientY;
  panStartScrollLeft = previewHolder.scrollLeft;
  panStartScrollTop = previewHolder.scrollTop;
  previewHolder.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', e => {
  if (!isPanning) return;
  e.preventDefault();
  previewHolder.scrollLeft = panStartScrollLeft - (e.clientX - panStartX);
  previewHolder.scrollTop = panStartScrollTop - (e.clientY - panStartY);
}, { passive: false });

document.addEventListener('mouseup', () => {
  if (isPanning) {
    isPanning = false;
    previewHolder.style.cursor = spacePressed ? 'grab' : '';
  }
});

// Shared by loadImageFile (a brand new file) and the Upscale panel's AI
// result (a replacement image for the one already loaded) — both hand this
// a fully-decoded <img> and need the exact same "this is now THE image"
// reset: resize the canvas to match, re-derive originalImageData/
// pristineImageData from it, and clear every piece of state that belonged
// to whatever pixels were there before (palette overrides, brush undo
// history, auto-detect flags).
function applyNewCanvasImage(img, keepCropHistory){
  clearUpscaleDone();
  // Crop's own undo/redo (added below) snapshots pixels+dimensions across calls to this same
  // function, so a genuinely new picture (a fresh file, or a just-upscaled result at a new
  // resolution) must clear that history — it would otherwise silently restore mismatched pixels
  // for a totally different image. Crop's own two call sites pass keepCropHistory:true since they
  // manage cropUndoSnapshot/cropRedoSnapshot explicitly around their own calls here.
  if (!keepCropHistory) { cropUndoSnapshot = null; cropRedoSnapshot = null; if (typeof updateCropHistoryButtons === 'function') updateCropHistoryButtons(); }
  // Accepts either an <img> (naturalWidth/Height) or an already-sized
  // <canvas> (width/height) — the Upscale panel passes a canvas since it
  // needs an extra resize pass before this becomes the working image.
  canvas.width = img.naturalWidth || img.width;
  canvas.height = img.naturalHeight || img.height;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
  originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // Untouched backup for the Restore brush and "Reset All Touch-ups" — captured once here,
  // never mutated afterward, unlike originalImageData which the brush paints into directly.
  pristineImageData = new ImageData(new Uint8ClampedArray(originalImageData.data), originalImageData.width, originalImageData.height);
  ensurePristineCanvas();
  brushUndoStack = [];
  // A new image gets a fresh palette with different colors in a different order — any
  // per-color overrides from the previous image would silently apply to the wrong colors.
  colorOverrides = {};
  selectedColorIndex = null;
  pinnedPalette = null;
  colorOverridePanel.style.display = 'none';
  stage.classList.add('on');
  dimsEl.textContent = canvas.width + ' × ' + canvas.height;
  setView(false);
  fitZoomToContainer();
  autoFixPending = true;
  autoFixMessage = '';
  colorCountAutoPendingByMode = { color: true, greyscale: true };
  // No auto-trace on load anymore — pick a mode, then click Vectorize. These one-shot flags
  // stay armed regardless, so whichever mode is active when Vectorize is finally clicked still
  // gets its correct first-look auto-detect.
}

// --- Crop (before tracing): "Trim to Content" (auto-crop to the bounding box of every
// non-transparent pixel) and a manual marquee crop, both applied to the SOURCE picture — before
// Vectorize, not to an already-traced SVG. Cropping first means the tracer never spends time on
// empty space or unwanted background, and the exported SVG's viewBox isn't padded with a blank
// margin either. Both funnel through applyNewCanvasImage (the same "this is now THE image" reset
// the Upscale panel above already uses), so palette/brush-history/dims all reset correctly for
// free, then mark the pixels changed so Download/Send to Gang Sheets force a fresh retrace
// instead of exporting whatever the OLD, pre-crop trace last produced.
const trimToContentBtn = document.getElementById('trimToContentBtn');
const vpTrimStatus = document.getElementById('vpTrimStatus');
const cropMarqueeToggleBtn = document.getElementById('cropMarqueeToggle');
const cropMarqueeActions = document.getElementById('cropMarqueeActions');
const cropMarqueeApplyBtn = document.getElementById('cropMarqueeApply');
const cropMarqueeCancelBtn = document.getElementById('cropMarqueeCancel');
const cropMarqueeOverlay = document.getElementById('cropMarqueeOverlay');
let cropMarqueeOn = false, cropDragging = false, cropDragStart = null, cropRectPx = null;

function disableCropMarquee(){
  cropMarqueeOn = false;
  cropDragging = false;
  cropDragStart = null;
  cropRectPx = null;
  cropMarqueeToggleBtn.textContent = 'Draw a Crop Box';
  cropMarqueeActions.style.display = 'none';
  cropMarqueeApplyBtn.disabled = true;
  cropMarqueeOverlay.classList.remove('show');
  canvas.classList.remove('brush-active');
}

// sx/sy/sw/sh are native source-picture pixel coordinates.
// Added per direct request: Crop had no undo/redo at all (unlike every other tool with a real
// commit action), even though applyCropToSource funnels into applyNewCanvasImage — the same full
// "this is now THE image" reset a fresh load does (canvas dims, originalImageData,
// pristineImageData, brush history, palette overrides, all of it). A single-level undo/redo
// snapshotting just the pixels+dimensions (not the full reset's other fields) is enough for the
// realistic case, since Crop now sits BEFORE Trace in the rail order — nobody should have palette
// overrides or touch-up strokes to lose yet at the point they're still cropping.
let cropUndoSnapshot = null;
let cropRedoSnapshot = null;
function snapshotForCropHistory() {
  return { data: new Uint8ClampedArray(originalImageData.data), width: canvas.width, height: canvas.height };
}
function updateCropHistoryButtons() {
  const backBtn = document.getElementById('cropHistoryBack'), redoBtn = document.getElementById('cropHistoryRedo');
  if (backBtn) backBtn.disabled = !cropUndoSnapshot;
  if (redoBtn) redoBtn.disabled = !cropRedoSnapshot;
}
function restoreCropSnapshot(snap) {
  const tmp = document.createElement('canvas');
  tmp.width = snap.width; tmp.height = snap.height;
  tmp.getContext('2d').putImageData(new ImageData(new Uint8ClampedArray(snap.data), snap.width, snap.height), 0, 0);
  applyNewCanvasImage(tmp, true);
  invalidateInFlightTrace();
  updateCropHistoryButtons();
}

function applyCropToSource(sx, sy, sw, sh){
  sx = Math.max(0, Math.round(sx)); sy = Math.max(0, Math.round(sy));
  sw = Math.round(sw); sh = Math.round(sh);
  sw = Math.min(sw, canvas.width - sx); sh = Math.min(sh, canvas.height - sy);
  if (sw < 4 || sh < 4) return false; // too small to be a real crop
  if (sx === 0 && sy === 0 && sw === canvas.width && sh === canvas.height) return false; // no-op

  cropUndoSnapshot = snapshotForCropHistory();
  cropRedoSnapshot = null;
  const cropped = document.createElement('canvas');
  cropped.width = sw; cropped.height = sh;
  cropped.getContext('2d').drawImage(canvas, sx, sy, sw, sh, 0, 0, sw, sh);
  applyNewCanvasImage(cropped, true);
  invalidateInFlightTrace(); // the old SVG (if any) no longer matches this picture
  updateCropHistoryButtons();
  return true;
}

document.getElementById('cropHistoryBack').addEventListener('click', () => {
  if (!cropUndoSnapshot) return;
  cropRedoSnapshot = snapshotForCropHistory();
  const toRestore = cropUndoSnapshot;
  cropUndoSnapshot = null;
  restoreCropSnapshot(toRestore);
});
document.getElementById('cropHistoryRedo').addEventListener('click', () => {
  if (!cropRedoSnapshot) return;
  cropUndoSnapshot = snapshotForCropHistory();
  const toRestore = cropRedoSnapshot;
  cropRedoSnapshot = null;
  restoreCropSnapshot(toRestore);
});

trimToContentBtn.addEventListener('click', () => {
  if (!originalImageData) return;
  setView(false); // crop works on the source picture, same as the touch-up brush forces Source view
  const w = canvas.width, h = canvas.height;
  const data = ctx.getImageData(0, 0, w, h).data;
  let minX = w, minY = h, maxX = -1, maxY = -1;
  for (let y = 0; y < h; y++){
    for (let x = 0; x < w; x++){
      if (data[(y * w + x) * 4 + 3] > 0){
        if (x < minX) minX = x; if (x > maxX) maxX = x;
        if (y < minY) minY = y; if (y > maxY) maxY = y;
      }
    }
  }
  if (maxX < 0) { vpTrimStatus.textContent = 'Nothing to trim — the picture is empty.'; return; }
  const sw = maxX - minX + 1, sh = maxY - minY + 1;
  if (minX === 0 && minY === 0 && sw === w && sh === h) {
    vpTrimStatus.textContent = "Nothing to trim — there's no empty space around the edges.";
    return;
  }
  const savedPct = Math.round((1 - (sw * sh) / (w * h)) * 100);
  if (applyCropToSource(minX, minY, sw, sh)) {
    vpTrimStatus.textContent = `Trimmed to ${sw} × ${sh} (${savedPct}% less empty space).`;
  }
});

cropMarqueeToggleBtn.addEventListener('click', () => {
  if (!originalImageData) return;
  cropMarqueeOn = !cropMarqueeOn;
  cropMarqueeToggleBtn.textContent = cropMarqueeOn ? 'Cancel — drag a box on the picture' : 'Draw a Crop Box';
  canvas.classList.toggle('brush-active', cropMarqueeOn);
  cropMarqueeActions.style.display = cropMarqueeOn ? 'flex' : 'none';
  cropMarqueeApplyBtn.disabled = true;
  cropRectPx = null;
  cropMarqueeOverlay.classList.remove('show');
  if (cropMarqueeOn) setView(false);
});

function canvasPointFromEvent(e){
  const rect = canvas.getBoundingClientRect();
  return {
    x: Math.max(0, Math.min(canvas.width, (e.clientX - rect.left) / rect.width * canvas.width)),
    y: Math.max(0, Math.min(canvas.height, (e.clientY - rect.top) / rect.height * canvas.height)),
  };
}
function updateCropMarqueeOverlay(x0, y0, x1, y1){
  const rect = canvas.getBoundingClientRect();
  const scaleX = rect.width / canvas.width, scaleY = rect.height / canvas.height;
  const sx = Math.min(x0, x1), sy = Math.min(y0, y1);
  const sw = Math.abs(x1 - x0), sh = Math.abs(y1 - y0);
  cropMarqueeOverlay.style.left = (canvas.offsetLeft + sx * scaleX) + 'px';
  cropMarqueeOverlay.style.top = (canvas.offsetTop + sy * scaleY) + 'px';
  cropMarqueeOverlay.style.width = (sw * scaleX) + 'px';
  cropMarqueeOverlay.style.height = (sh * scaleY) + 'px';
  cropMarqueeOverlay.classList.add('show');
}

canvas.addEventListener('mousedown', (e) => {
  if (!cropMarqueeOn || spacePressed) return;
  cropDragging = true;
  cropDragStart = canvasPointFromEvent(e);
  cropMarqueeApplyBtn.disabled = true;
  e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
  if (!cropMarqueeOn || !cropDragging || !cropDragStart) return;
  const p = canvasPointFromEvent(e);
  updateCropMarqueeOverlay(cropDragStart.x, cropDragStart.y, p.x, p.y);
});
document.addEventListener('mouseup', (e) => {
  if (!cropMarqueeOn || !cropDragging || !cropDragStart) return;
  cropDragging = false;
  const p = canvasPointFromEvent(e);
  const sx = Math.min(cropDragStart.x, p.x), sy = Math.min(cropDragStart.y, p.y);
  const sw = Math.abs(p.x - cropDragStart.x), sh = Math.abs(p.y - cropDragStart.y);
  if (sw < 4 || sh < 4) { cropRectPx = null; cropMarqueeApplyBtn.disabled = true; cropMarqueeOverlay.classList.remove('show'); return; }
  cropRectPx = { x: sx, y: sy, w: sw, h: sh };
  cropMarqueeApplyBtn.disabled = false;
});

cropMarqueeApplyBtn.addEventListener('click', () => {
  if (!cropRectPx) return;
  applyCropToSource(cropRectPx.x, cropRectPx.y, cropRectPx.w, cropRectPx.h);
  disableCropMarquee();
});
cropMarqueeCancelBtn.addEventListener('click', () => disableCropMarquee());

function loadImageFile(file){
  // Percentage: reading the file is measured for real (0-70%); decoding and building the canvas
  // can't be measured, so they step through 75% -> 90% -> done.
  const task = GSBusy.task('Loading image');
  const img = new Image();
  const reader = new FileReader();
  reader.onprogress = e => { if (e.lengthComputable) task.progress(0.7 * e.loaded / e.total); };
  reader.onload = e => {
    task.progress(0.75);
    img.onload = () => {
      task.progress(0.9);
      // Let the pill repaint at 90% before the heavy synchronous canvas work blocks the page.
      requestAnimationFrame(() => setTimeout(() => { try { applyNewCanvasImage(img); } finally { task.finish(); } }, 0));
    };
    img.onerror = () => task.finish();
    img.src = e.target.result;
  };
  reader.onerror = () => task.finish();
  reader.readAsDataURL(file);
}

document.getElementById('applyUpscale').addEventListener('click', async (e) => {
  const btn = e.target;
  if (!window.graphicSuite || !window.graphicSuite.upscaleImage) {
    alert('This feature is being upgraded. Available soon.');
    return;
  }
  if (!originalImageData) return;
  if (btn.dataset.done && !(await gsAskProceed('Upscale again?', 'This picture has already been upscaled. Upscaling again processes it a second time and makes it bigger still.'))) return;

  const scale = parseInt(document.getElementById('upscaleFactor').value);
  const model = document.querySelector('input[name="upscaleModel"]:checked').value;

  btn.disabled = true;
  btn.classList.add('busy');
  const originalText = btn.textContent;
  btn.textContent = 'Starting…';
  GSBusy.start('Upscaling with AI — this can take a minute…', true);

  let unsubscribe = null;
  try {
    unsubscribe = window.graphicSuite.onUpscaleProgress((data) => {
      btn.textContent = `${data.stage.replace(/…$/, '')} ${Math.round(data.percent || 0)}%`;
      GSBusy.setLabel(`Upscaling — ${Math.round(data.percent || 0)}%`);
    });

    // Upscales whatever's currently on the canvas — the freshly loaded
    // source, since this runs before any trace — not a stale copy.
    const sourceDataUrl = canvas.toDataURL('image/png');
    const result = await window.graphicSuite.upscaleImage({ imageDataUrl: sourceDataUrl, scale, model });

    const resultImg = await new Promise((resolve, reject) => {
      const el = new Image();
      el.onload = () => resolve(el);
      el.onerror = () => reject(new Error('Could not load the upscaled result'));
      el.src = result.dataUrl;
    });

    // 6x/8x's last-mile adjustment (see the standalone Upscale tool's
    // main.ts comment for why this never goes through the AI engine
    // itself) is done here rather than a separate step, since the result
    // is about to be redrawn into the working canvas anyway.
    const factor = result.finalResizeFactor || 1;
    const targetW = Math.round(resultImg.naturalWidth * factor);
    const targetH = Math.round(resultImg.naturalHeight * factor);
    const highResCanvas = document.createElement('canvas');
    highResCanvas.width = targetW;
    highResCanvas.height = targetH;
    const hrCtx = highResCanvas.getContext('2d');
    hrCtx.imageSmoothingEnabled = true;
    hrCtx.imageSmoothingQuality = 'high';
    hrCtx.drawImage(resultImg, 0, 0, targetW, targetH);

    // Same "this is now THE image" reset loadImageFile uses — every trace/
    // touch-up/palette setting downstream needs to start fresh against the
    // new (much bigger) pixel data, exactly as if this had been the file
    // opened in the first place.
    applyNewCanvasImage(highResCanvas);

    // Nothing is locked. The button just turns green and says Done; running the upscale again asks Yes / No first
    // (4x of an already-4x'd image is 16x). Loading a new picture or Start Over puts it back to normal.
    btn.disabled = false;
    btn.classList.remove('busy');
    btn.classList.add('done-state');
    btn.dataset.done = '1';
    btn.textContent = '✓ Done';
  } catch (err) {
    console.error(err);
    btn.textContent = originalText;
    btn.disabled = false;
    btn.classList.remove('busy');
    alert(`Upscale failed: ${err && err.message ? err.message : err}. If this keeps happening, try updating your graphics drivers.`);
  } finally {
    if (unsubscribe) unsubscribe();
    GSBusy.stop();
  }
});

drop.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', () => { if (fileInput.files[0]) loadImageFile(fileInput.files[0]); });
['dragenter','dragover'].forEach(evt => drop.addEventListener(evt, e => { e.preventDefault(); drop.classList.add('drag'); }));
['dragleave','drop'].forEach(evt => drop.addEventListener(evt, e => { e.preventDefault(); drop.classList.remove('drag'); }));
drop.addEventListener('drop', e => { if (e.dataTransfer.files[0]) loadImageFile(e.dataTransfer.files[0]); });

document.getElementById('reset').addEventListener('click', () => {
  originalImageData = null;
  pristineImageData = null;
  pristineCanvas = null;
  brushUndoStack = [];
  brushModeSelect.value = 'off';
  brushModeSelect.dispatchEvent(new Event('change'));
  disableCropMarquee();
  vpTrimStatus.textContent = '';
  lastSvgString = '';
  lastPalette = [];
  autoFixPending = false;
  autoFixMessage = '';
  colorCountAutoPendingByMode = { color: false, greyscale: false };
  colorOverrides = {};
  selectedColorIndex = null;
  pinnedPalette = null;
  colorOverridePanel.style.display = 'none';
  stage.classList.remove('on');
  fileInput.value = '';
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  svgHolder.innerHTML = '';
  swatchList.innerHTML = '<span class="swatch-empty">Trace an image to see colors</span>';
  paletteBlock.style.display = 'none';
  clearUpscaleDone();
});

// Puts the Upscale button back to normal (used by Start Over, and whenever a new picture becomes the working image).
function clearUpscaleDone() {
  const upscaleBtn = document.getElementById('applyUpscale');
  if (!upscaleBtn) return;
  // Same bug already caught and fixed in Print Prep: this runs on every image load/crop (called
  // from inside applyNewCanvasImage), and used to unconditionally re-enable this button — silently
  // undoing the desktop-only lock on Upscale the moment a new picture landed, even though the
  // panel still showed its red notice and everything else in it stayed correctly disabled.
  const panel = upscaleBtn.closest('.gm-locked');
  upscaleBtn.disabled = !!panel;
  upscaleBtn.classList.remove('busy', 'done-state');
  delete upscaleBtn.dataset.done;
  upscaleBtn.textContent = 'Execute HD Upscale';
}

const paletteBlockTitle = document.getElementById('paletteBlockTitle');
const colorCountLabel = document.getElementById('colorCountLabel');
modeSelect.addEventListener('change', () => {
  const isBw = modeSelect.value === 'bw';
  const isGreyscale = modeSelect.value === 'greyscale';
  bwControls.style.display = isBw ? 'block' : 'none';
  colorControls.style.display = isBw ? 'none' : 'block';
  paletteBlock.style.display = isBw ? 'none' : 'block';
  // Greyscale reuses the exact same palette/classification machinery as Color mode (see runTrace)
  // on a desaturated copy of the source — only the labels change, so "shades" reads correctly
  // instead of implying hues that were never in the output.
  colorCountLabel.textContent = isGreyscale ? 'Grey levels' : 'Color count';
  paletteBlockTitle.textContent = isGreyscale ? 'Detected shades' : 'Detected palette';
  // A pinned (post-delete) palette holds RGB values from the PREVIOUS mode's color space —
  // meaningless once colorSource itself changes to a different mode's pixels.
  pinnedPalette = null;
  // No auto-trace on mode switch — pick a mode, then click Vectorize.
});

// Curve smoothing / Speckle removal / Edge smoothing / Right-angle enhance are ONE shared Detail
// panel used by both trace modes — without this, tuning them while working on Color mode would
// silently change the B&W baseline too, since it's the literal same slider value feeding both
// code paths. Each mode gets its own remembered state, saved whenever you leave a mode and
// restored whenever you come back to it, so testing Color mode can never disturb B&W's settings.
let currentDetailMode = 'bw';
// Color mode's default Edge smoothing is higher than B&W's — confirmed directly on a real
// gradient-shaded logo: unblurred color quantization produced 6491 paths (one color alone had
// nearly 2000), because a real illustrated gradient (shiny highlight shading, not just an
// anti-aliased edge) forces per-pixel "nearest palette color" decisions that flicker back and
// forth across the transition, creating speckle. Blur smooths that decision boundary. B&W stays
// low (0.9) because it needs to protect sharp right-angle corners; color mode has no such
// corner-fidelity requirement most of the time. IMPORTANT: path count alone is a misleading way
// to tune this — pushing blur up to 10-12 minimizes path count further but visibly turns real
// shape detail into a soft/mushy blob (confirmed against the actual reference logo). 5 is the
// value that actually looked right on that same file: clean, crisp, flat-vector shapes with no
// speckle, at colorCount 8.
const modeDetailState = {
  bw: { simplify: 0, speckle: 0, smoothing: 0, rightAngle: true },
  color: { simplify: 0, speckle: 0, smoothing: 0, rightAngle: true },
  // Greyscale shares Color mode's starting defaults (same underlying pipeline, see runTrace) —
  // its own bucket exists so tuning one doesn't silently drag the other's baseline around, same
  // reasoning as splitting bw/color above.
  greyscale: { simplify: 0, speckle: 0, smoothing: 0, rightAngle: true }
};
function saveDetailState(modeKey){
  modeDetailState[modeKey] = {
    simplify: parseInt(simplify.value),
    speckle: parseInt(speckle.value),
    smoothing: parseFloat(smoothing.value),
    rightAngle: rightAngle.checked
  };
}
// Restores the slider VALUES (and their paired number-box displays) directly rather than via
// .dispatchEvent — dispatching 'input'/'change' would also fire each control's own scheduleTrace()
// call, auto-retracing on every mode switch. Mode switching itself should never auto-trace (pick a
// mode, then click Vectorize); this keeps that true even though restoring per-mode Detail settings
// touches the same sliders a manual adjustment would.
function loadDetailState(modeKey){
  const s = modeDetailState[modeKey];
  simplify.value = s.simplify;
  simplifyNum.value = simplifyToTres(s.simplify).toFixed(2);
  speckle.value = s.speckle;
  speckleNum.value = s.speckle;
  smoothing.value = s.smoothing;
  smoothingNum.value = s.smoothing.toFixed(1);
  rightAngle.checked = s.rightAngle;
}
modeSelect.addEventListener('change', () => {
  saveDetailState(currentDetailMode);
  currentDetailMode = modeSelect.value; // 'bw' | 'color' | 'greyscale' — matches modeDetailState's keys directly
  loadDetailState(currentDetailMode);
});

// Keeps a range slider and a number input in sync both ways, like Print Prep's slider+number
// pairs — drag for coarse changes, type or click the up/down arrows for precise ones. toDisplay/
// fromDisplay let a pair use a transformed value in the number box (e.g. simplify's slider is an
// internal 0-400 index but the number box shows the actual 0.02-2.02 fidelity value it maps to).
function bindSliderNumberPair(slider, num, toDisplay, fromDisplay){
  toDisplay = toDisplay || (v => v);
  fromDisplay = fromDisplay || (v => v);
  const syncFromSlider = () => { num.value = toDisplay(parseFloat(slider.value)); };
  // `commit` is only true on blur/Enter. While the user is still typing (the 'input' event on
  // every keystroke), we must NOT rewrite num.value — doing so on every keystroke was stripping
  // the decimal point right after typing it (parseFloat("3.") is 3, so writing that back turned
  // "3." into "3" mid-type), making it effectively impossible to type a value like 3.0 by hand.
  // The slider still updates live for a real-time preview; only the visible text field waits.
  const syncFromNum = commit => {
    let v = parseFloat(num.value);
    if (isNaN(v)) return;
    v = Math.max(parseFloat(num.min), Math.min(parseFloat(num.max), v));
    if (commit) num.value = v;
    slider.value = fromDisplay(v);
  };
  slider.addEventListener('input', () => { syncFromSlider(); scheduleTrace(); });
  num.addEventListener('input', () => { syncFromNum(false); scheduleTrace(); });
  num.addEventListener('change', () => syncFromNum(true));
  num.addEventListener('keydown', e => { if (e.key === 'Enter') num.blur(); });
  syncFromSlider();
}

bindSliderNumberPair(threshold, thresholdNum);
bindSliderNumberPair(colorCount, colorCountNum);
bindSliderNumberPair(speckle, speckleNum);
bindSliderNumberPair(smoothing, smoothingNum, v => v.toFixed(1));
bindSliderNumberPair(
  simplify, simplifyNum,
  sliderVal => simplifyToTres(sliderVal).toFixed(2),
  displayVal => tresToSimplify(displayVal)
);

// Per-color overrides for Curve fit / Edge smoothing — these are plain tres/radius values
// directly (not the 0-4000 slider-index indirection the global Curve smoothing control uses),
// since they're a secondary fine-tune control and don't need that much resolution.
const overrideCurveFit = document.getElementById('overrideCurveFit');
const overrideCurveFitNum = document.getElementById('overrideCurveFitNum');
const overrideEdgeSmoothing = document.getElementById('overrideEdgeSmoothing');
const overrideEdgeSmoothingNum = document.getElementById('overrideEdgeSmoothingNum');
const overrideSpeckle = document.getElementById('overrideSpeckle');
const overrideSpeckleNum = document.getElementById('overrideSpeckleNum');
const overrideBrightness = document.getElementById('overrideBrightness');
const overrideBrightnessNum = document.getElementById('overrideBrightnessNum');
const overrideContrast = document.getElementById('overrideContrast');
const overrideContrastNum = document.getElementById('overrideContrastNum');
const overrideSaturation = document.getElementById('overrideSaturation');
const overrideSaturationNum = document.getElementById('overrideSaturationNum');
const overrideVibrancy = document.getElementById('overrideVibrancy');
const overrideVibrancyNum = document.getElementById('overrideVibrancyNum');
bindSliderNumberPair(overrideCurveFit, overrideCurveFitNum, v => (+v).toFixed(2));
bindSliderNumberPair(overrideEdgeSmoothing, overrideEdgeSmoothingNum, v => (+v).toFixed(1));
bindSliderNumberPair(overrideSpeckle, overrideSpeckleNum);
bindSliderNumberPair(overrideBrightness, overrideBrightnessNum);
bindSliderNumberPair(overrideContrast, overrideContrastNum);
bindSliderNumberPair(overrideSaturation, overrideSaturationNum);
bindSliderNumberPair(overrideVibrancy, overrideVibrancyNum);

let colorOverrides = {}; // paletteIndex -> { curveFit, edgeSmoothing, speckle, brightness, contrast, saturation, vibrancy }
let selectedColorIndex = null;
const colorOverridePanel = document.getElementById('colorOverridePanel');
const overrideColorSwatch = document.getElementById('overrideColorSwatch');
const ALL_OVERRIDE_INPUTS = [overrideCurveFit, overrideEdgeSmoothing, overrideSpeckle, overrideBrightness, overrideContrast, overrideSaturation, overrideVibrancy];

function selectColorForOverride(index, colorCss){
  selectedColorIndex = index;
  overrideColorSwatch.style.background = colorCss;
  colorOverridePanel.style.display = 'block';
  const existing = colorOverrides[index];
  overrideCurveFit.value = existing ? existing.curveFit : simplifyToTres(parseFloat(simplify.value));
  overrideCurveFit.dispatchEvent(new Event('input'));
  overrideEdgeSmoothing.value = existing ? existing.edgeSmoothing : parseFloat(smoothing.value);
  overrideEdgeSmoothing.dispatchEvent(new Event('input'));
  overrideSpeckle.value = existing ? existing.speckle : parseInt(speckle.value);
  overrideSpeckle.dispatchEvent(new Event('input'));
  overrideBrightness.value = existing ? existing.brightness : 0;
  overrideBrightness.dispatchEvent(new Event('input'));
  overrideContrast.value = existing ? existing.contrast : 0;
  overrideContrast.dispatchEvent(new Event('input'));
  overrideSaturation.value = existing ? existing.saturation : 0;
  overrideSaturation.dispatchEvent(new Event('input'));
  overrideVibrancy.value = existing ? existing.vibrancy : 0;
  overrideVibrancy.dispatchEvent(new Event('input'));
}

ALL_OVERRIDE_INPUTS.forEach(el => {
  el.addEventListener('input', () => {
    if (selectedColorIndex === null) return;
    colorOverrides[selectedColorIndex] = {
      curveFit: parseFloat(overrideCurveFit.value),
      edgeSmoothing: parseFloat(overrideEdgeSmoothing.value),
      speckle: parseInt(overrideSpeckle.value),
      brightness: parseFloat(overrideBrightness.value),
      contrast: parseFloat(overrideContrast.value),
      saturation: parseFloat(overrideSaturation.value),
      vibrancy: parseFloat(overrideVibrancy.value)
    };
    scheduleTrace();
  });
});

document.getElementById('overrideUseGlobal').addEventListener('click', () => {
  if (selectedColorIndex === null) return;
  delete colorOverrides[selectedColorIndex];
  colorOverridePanel.style.display = 'none';
  selectedColorIndex = null;
  scheduleTrace();
});

document.getElementById('overrideDeleteColor').addEventListener('click', () => {
  // Same floor as the Color count slider itself (min="2") — there's always at least one real
  // color plus the transparent background, so dropping to 1 doesn't make sense here either.
  if (selectedColorIndex === null || lastPalette.length <= 2) return;
  pinnedPalette = lastPalette.filter((_, i) => i !== selectedColorIndex);
  // Indices are about to shift (everything after the deleted color moves down by one) — clearing
  // colorOverrides rather than trying to remap it is the same safe-reset pattern already used
  // elsewhere in this file for other structural palette changes (see the delete-shapes fix notes).
  colorOverrides = {};
  selectedColorIndex = null;
  colorOverridePanel.style.display = 'none';
  colorCount.value = pinnedPalette.length;
  colorCountNum.value = pinnedPalette.length;
  scheduleTrace();
});

// Just hides the panel to save space — unlike "Use Global Settings" above, this does NOT discard
// selectedColorIndex or colorOverrides, so whatever was tuned stays applied. Clicking a swatch
// (any swatch, including the one just closed) reopens it via selectColorForOverride, which always
// sets display back to 'block'.
document.getElementById('overrideCollapse').addEventListener('click', () => {
  colorOverridePanel.style.display = 'none';
});

invert.addEventListener('change', () => scheduleTrace());
rightAngle.addEventListener('change', () => scheduleTrace());
supersample.addEventListener('change', () => scheduleTrace());

const TRACE_MODE_DEFAULTS = { threshold: 70, invert: false };
document.getElementById('resetTraceMode').addEventListener('click', () => {
  threshold.value = TRACE_MODE_DEFAULTS.threshold;
  threshold.dispatchEvent(new Event('input'));
  invert.checked = TRACE_MODE_DEFAULTS.invert;
  invert.dispatchEvent(new Event('change'));
});

const COLOR_COUNT_DEFAULT = 8;
document.getElementById('resetColorCount').addEventListener('click', () => {
  pinnedPalette = null; // back to fresh k-means detection at the default count, discarding any deletes
  colorCount.value = COLOR_COUNT_DEFAULT;
  colorCount.dispatchEvent(new Event('input'));
});

const DETAIL_DEFAULTS = {
  bw: { simplifySlider: 0, speckle: 0, smoothing: 0, rightAngle: true },
  color: { simplifySlider: 0, speckle: 0, smoothing: 0, rightAngle: true },
  greyscale: { simplifySlider: 0, speckle: 0, smoothing: 0, rightAngle: true }
};
document.getElementById('resetDetail').addEventListener('click', () => {
  const d = DETAIL_DEFAULTS[currentDetailMode];
  simplify.value = d.simplifySlider;
  simplify.dispatchEvent(new Event('input'));
  speckle.value = d.speckle;
  speckle.dispatchEvent(new Event('input'));
  smoothing.value = d.smoothing;
  smoothing.dispatchEvent(new Event('input'));
  rightAngle.checked = d.rightAngle;
  rightAngle.dispatchEvent(new Event('change'));
  // Without this, switching modes afterward would silently restore the PRE-reset values from
  // modeDetailState, undoing the reset the moment you leave this mode.
  saveDetailState(currentDetailMode);
});

// Otsu's method: finds the luminance threshold that best splits a bimodal histogram (e.g. dark
// ink vs light paper) by maximizing the variance BETWEEN the two resulting groups. Standard,
// cheap (single pass over a 256-bucket histogram) and far more reliable than a flat guess of 128
// for a real scanned/exported logo, whose ink/paper split rarely sits at exactly the middle.
function otsuThreshold(hist, total){
  let sum = 0;
  for (let i = 0; i < 256; i++) sum += i * hist[i];
  let sumB = 0, wB = 0, best = 128, varMax = -1;
  for (let t = 0; t < 256; t++){
    wB += hist[t];
    if (wB === 0) continue;
    const wF = total - wB;
    if (wF === 0) break;
    sumB += t * hist[t];
    const mB = sumB / wB;
    const mF = (sum - sumB) / wF;
    const varBetween = wB * wF * (mB - mF) * (mB - mF);
    if (varBetween > varMax){ varMax = varBetween; best = t; }
  }
  return best;
}

// Samples the source once to gather everything the suggestions below need: a luminance
// histogram (for Otsu), how much of the image is genuinely mid-tone/anti-aliased rather than
// flat ink-or-paper (to judge how much edge-blur actually helps vs just muddies things), how
// bright the four corners are (a cheap proxy for "is the background light or dark", used to
// guess whether Invert should be on), and a rough distinct-color count (for Color mode).
// Counting raw distinct color buckets (below) is a poor proxy for "how many real spot colors are
// in this design" — any gradient/soft shading inflates it hugely even though those are real,
// legitimate pixels, not noise. This estimates the TRUE color count properly: run k-means across
// a range of k, track how much further error (SSE) improves each time a color is added, and find
// the "elbow" — the point where adding more colors stops meaningfully helping and starts just
// chasing continuous shading variation. Standard technique, reusing the same flat-pixel sampling
// already used for the real palette (kMeansPalette) so it's not distracted by anti-aliased edges.
function estimateTrueColorCount(imgData, maxK){
  let samples = sampleFlatPixels(imgData, Math.max(1, Math.round(Math.sqrt((imgData.width * imgData.height) / 40000))), 2);
  if (samples.length < 50) {
    samples = [];
    const { data, width, height } = imgData;
    const step = Math.max(1, Math.round(Math.sqrt((width * height) / 40000)));
    for (let y = 0; y < height; y += step) for (let x = 0; x < width; x += step){
      const i = (y * width + x) * 4;
      if (data[i + 3] >= 10) samples.push([data[i], data[i + 1], data[i + 2]]);
    }
  }
  if (samples.length === 0) return 4;
  if (samples.length > 2500) {
    const stride = Math.ceil(samples.length / 2500);
    samples = samples.filter((_, i) => i % stride === 0);
  }

  const dist2 = (a, b) => { const dr = a[0]-b[0], dg = a[1]-b[1], db = a[2]-b[2]; return dr*dr+dg*dg+db*db; };

  function kmeansSSE(k, iterations){
    k = Math.min(k, samples.length);
    const centroids = [samples[0].slice()];
    const minDist = new Array(samples.length).fill(Infinity);
    while (centroids.length < k){
      let maxD = -1, maxIdx = 0;
      for (let s = 0; s < samples.length; s++){
        const d = dist2(samples[s], centroids[centroids.length - 1]);
        if (d < minDist[s]) minDist[s] = d;
        if (minDist[s] > maxD){ maxD = minDist[s]; maxIdx = s; }
      }
      centroids.push(samples[maxIdx].slice());
    }
    const assign = new Array(samples.length).fill(0);
    for (let iter = 0; iter < iterations; iter++){
      for (let s = 0; s < samples.length; s++){
        let best = 0, bestD = Infinity;
        for (let c = 0; c < centroids.length; c++){ const d = dist2(samples[s], centroids[c]); if (d < bestD){ bestD = d; best = c; } }
        assign[s] = best;
      }
      const sums = centroids.map(() => [0,0,0,0]);
      for (let s = 0; s < samples.length; s++){ const c = assign[s]; sums[c][0]+=samples[s][0]; sums[c][1]+=samples[s][1]; sums[c][2]+=samples[s][2]; sums[c][3]++; }
      for (let c = 0; c < centroids.length; c++){ if (sums[c][3] > 0) centroids[c] = [sums[c][0]/sums[c][3], sums[c][1]/sums[c][3], sums[c][2]/sums[c][3]]; }
    }
    let sse = 0;
    for (let s = 0; s < samples.length; s++) sse += dist2(samples[s], centroids[assign[s]]);
    return sse;
  }

  const kRange = [];
  for (let k = 2; k <= Math.min(maxK, 24, samples.length); k++) kRange.push(k);
  if (kRange.length < 3) return kRange[0] || 2;
  const sseValues = kRange.map(k => kmeansSSE(k, 6));

  // The "line distance from first-to-last point" version of the elbow method was too blunt —
  // tested against the real reference logo it picked k=5, when the SSE data (measured directly)
  // shows an unmistakable ~19x cliff specifically between k=7 and k=8 (110663 -> 5914), then
  // completely flattens out past that — a textbook true-color-count signal that matches the
  // artist's own manual choice of 8 exactly. A pure endpoint-line distance measure doesn't weight
  // a single sharp local cliff like that correctly when the overall curve is doing other bending
  // elsewhere. Directly finding the k with the single biggest proportional SSE drop from k-1 to k
  // catches this correctly instead.
  //
  // The loop below only ever compares WITHIN kRange (k=2 upward), so without a k=1 baseline it
  // can never actually select kRange[0]=2 itself — starting bestRatio at -1 means the very first
  // comparison (k=2 vs k=3) unconditionally overwrites bestK away from 2, no matter how negligible
  // that particular step is. That makes a genuinely 2-color image structurally undetectable:
  // confirmed directly on a flat two-color test image (solid red/blue halves, no gradient/AA) —
  // this returned 3, never 2, before adding the sse1 baseline below. Computing the true k=1 SSE
  // (single centroid over everything) and using the k=1->k=2 ratio as the first real candidate
  // fixes that, while leaving every later comparison (and the already-verified k=7->k=8 real-logo
  // case above, which lands well inside the untouched loop) exactly as it was.
  //
  // BUT: letting that k=1->2 ratio compete to WIN the whole search (not just serve as a fallback)
  // broke gradient/shaded artwork — confirmed directly on a real file (a heavily gradient-shaded
  // logo: blue lettering with light-to-dark shading, a shaded wood beam, a photographic beer-glass
  // reflection). Splitting 1 cluster into 2 captures the single biggest low-frequency variance
  // split on almost ANY gradient-heavy image (roughly "light half" vs "dark half"), regardless of
  // how many real colors follow, so its ratio wins outright and locks colorCount at 2 no matter
  // how much real structure exists later in the curve — confirmed: this file has a real (if
  // modest) elbow at k=4 (ratio 2.26) that never got a chance to compete. Fix: the k=1->2 ratio no
  // longer competes for the win — find the best candidate from k>=3 first, and only fall back to
  // k=2 if that later best doesn't clear a real-signal threshold above the noise floor (everything
  // past a genuine elbow sits near 1.0-1.2 in every real file measured so far). Verified this
  // doesn't regress either known-good case: the flat 2-color synthetic test still returns 2 (no
  // later candidate ever clears the threshold), and the original real reference logo still returns
  // 8 (its k=7->8 ratio of ~19x clears it easily) — confirmed stable across threshold values from
  // 1.1 to 1.8, not a fragile tuning choice.
  const sse1 = kmeansSSE(1, 6);
  const sse1ratio = sse1 / Math.max(sseValues[0], 1e-6);
  let bestLaterRatio = -1, bestLaterK = kRange[1];
  for (let i = 1; i < kRange.length; i++){
    const ratio = sseValues[i - 1] / Math.max(sseValues[i], 1e-6);
    if (ratio > bestLaterRatio){ bestLaterRatio = ratio; bestLaterK = kRange[i]; }
  }
  const NOISE_THRESHOLD = 1.3;
  return bestLaterRatio > NOISE_THRESHOLD ? bestLaterK : kRange[0];
}

function analyzeImage(imgData){
  const { width, height, data } = imgData;
  const hist = new Array(256).fill(0);
  const step = Math.max(1, Math.round(Math.sqrt((width * height) / 250000)));
  let sampled = 0, midtoneCount = 0;
  const colorBuckets = new Set();
  for (let y = 0; y < height; y += step){
    for (let x = 0; x < width; x += step){
      const i = (y * width + x) * 4;
      if (data[i + 3] < 10) continue;
      const lum = Math.round(0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
      hist[lum]++;
      sampled++;
      if (lum > 40 && lum < 215) midtoneCount++;
      // Quantize to a coarse 4-bit-per-channel bucket — enough to distinguish genuinely
      // different colors from anti-aliasing noise between two colors, without exploding into
      // thousands of near-identical buckets from a photo's natural gradients.
      colorBuckets.add(((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4));
    }
  }
  const corners = [
    [0, 0], [width - 1, 0], [0, height - 1], [width - 1, height - 1]
  ].map(([x, y]) => {
    const i = (y * width + x) * 4;
    return 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
  });
  const cornerBrightness = corners.reduce((a, b) => a + b, 0) / corners.length;

  return {
    otsu: sampled ? otsuThreshold(hist, sampled) : 128,
    midtoneRatio: sampled ? midtoneCount / sampled : 0,
    cornerBrightness,
    distinctColors: colorBuckets.size,
    longSide: Math.max(width, height),
    totalPixels: width * height
  };
}

// The elbow method in estimateTrueColorCount judges how many colors are "real" by how much each
// additional cluster reduces total error (SSE) — which structurally under-counts a color that
// only covers a small area of the image, since removing/merging a small patch barely moves SSE
// no matter how solid and distinct that color actually is. That's the "doesn't recognize all the
// colors straight away" bug: a real flat spot-color used for a small detail (a thin accent, a
// small logomark, a "TM") never produces a visible elbow, so it silently gets folded into a
// nearby cluster and the user has to manually raise the color count to recover it.
// Fix: for genuinely flat/vector-style source art (which is what this tool is for), just count
// the actual distinct flat colors directly instead of estimating from error curves — exact
// enumeration can't miss a color just because its area is small, only if it has literally zero
// non-anti-aliased pixels anywhere. Cap the scan so a photo/gradient image (where "distinct flat
// colors" isn't a meaningful concept and would explode into hundreds of near-duplicates) bails
// out and falls back to the existing elbow-based estimate instead.
function rgbToHsv(r, g, b){
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const v = max;
  const s = max === 0 ? 0 : delta / max;
  let h = 0;
  if (delta !== 0){
    if (max === r) h = 60 * (((g - b) / delta) % 6);
    else if (max === g) h = 60 * ((b - r) / delta + 2);
    else h = 60 * ((r - g) / delta + 4);
    if (h < 0) h += 360;
  }
  return [h, s, v];
}

// Real flat-color art commonly has a single "logical" color rendered with internal shading (a
// flame drawn light-to-dark, a gradient sheen on a stripe) that can drift a good 20-30 degrees in
// hue across the shape, not just in lightness. A first version of this function clustered each
// pixel against the nearest EXISTING cluster mean (RGB distance, then hue distance) — greedy and
// order-dependent, so a slow, continuous, no-natural-gap hue drift (confirmed on a real reference
// badge: its red flame drifts hue 356 -> 32 with no gap before yellow starts at ~55) gets carved
// into arbitrary extra clusters purely based on scan order, not on where the real color families
// actually are.
// Fix: build a full hue histogram (and a separate value histogram for near-white/grey/black
// pixels, where hue is meaningless) across every qualifying pixel, lightly smooth it, and find
// actual DENSITY PEAKS — mirroring how Otsu finds the real split point in a luminance histogram
// rather than guessing a threshold. A real design color shows up as a tall, narrow peak (badge:
// red ~3300 count peak, yellow ~54000, blue ~57000); anti-aliasing/dithering between two real
// colors shows up as a low, broad shoulder in between, never forming its own comparable peak. Only
// keep peaks separated enough from a taller neighboring peak (non-max suppression) and with enough
// mass to not be noise. Verified directly against the real badge file: returns 6 (white, black,
// blue, yellow, red, plus a real secondary lighter-blue shade the stripes actually contain) versus
// the elbow method's undercount of 4 that started this whole investigation.
function findHistogramPeaks(bins, n, circular, smoothWin, massWin, minSep, noiseFloor){
  const smoothed = new Array(n).fill(0);
  for (let i = 0; i < n; i++){
    let sum = 0;
    for (let k = -smoothWin; k <= smoothWin; k++){
      let j = i + k;
      if (circular) j = ((j % n) + n) % n;
      else if (j < 0 || j >= n) continue;
      sum += bins[j];
    }
    smoothed[i] = sum;
  }
  const candidates = [];
  for (let i = 0; i < n; i++){
    let prevIdx = i - 1, nextIdx = i + 1;
    if (circular){ prevIdx = ((prevIdx % n) + n) % n; nextIdx = nextIdx % n; }
    else if (prevIdx < 0 || nextIdx >= n) continue;
    if (smoothed[i] > 0 && smoothed[i] >= smoothed[prevIdx] && smoothed[i] >= smoothed[nextIdx]){
      let mass = 0;
      for (let k = -massWin; k <= massWin; k++){
        let j = i + k;
        if (circular) j = ((j % n) + n) % n;
        else if (j < 0 || j >= n) continue;
        mass += bins[j];
      }
      candidates.push([i, mass]);
    }
  }
  candidates.sort((a, b) => b[1] - a[1]);
  const accepted = [];
  for (const c of candidates){
    if (c[1] < noiseFloor) continue;
    let tooClose = false;
    for (const a of accepted){
      let d = Math.abs(a[0] - c[0]);
      if (circular) d = Math.min(d, n - d);
      if (d < minSep){ tooClose = true; break; }
    }
    if (!tooClose) accepted.push(c);
  }
  return accepted;
}

function countExactFlatColors(imgData, capK){
  const { width, height, data } = imgData;
  // Full resolution (or as close as is reasonably fast) so a small/thin region of a unique color
  // isn't stepped over by subsampling the way the elbow method's sampling does.
  const step = Math.max(1, Math.floor(Math.sqrt((width * height) / 1500000)));
  const checkDist = 1;
  const SAT_THRESHOLD = 0.18; // below this, hue is noisy/meaningless — treat as achromatic
  const FLAT_HUE_TOL = 25; // degrees a neighbor's hue may drift and still count as "flat" (tolerates internal shading)
  const FLAT_VALUE_TOL = 60; // 0-255, same idea for achromatic neighbors
  const hueBins = new Array(360).fill(0);
  const valBins = new Array(256).fill(0);
  let totalFlat = 0;
  for (let y = 0; y < height; y += step){
    for (let x = 0; x < width; x += step){
      const i = (y * width + x) * 4;
      if (data[i + 3] < 10) continue;
      const [h, s, v] = rgbToHsv(data[i], data[i + 1], data[i + 2]);
      const selfAchromatic = s < SAT_THRESHOLD;
      let flat = true;
      const offsets = [[-checkDist, 0], [checkDist, 0], [0, -checkDist], [0, checkDist]];
      for (const [dx, dy] of offsets){
        const nx = x + dx, ny = y + dy;
        if (nx < 0 || nx >= width || ny < 0 || ny >= height) continue;
        const ni = (ny * width + nx) * 4;
        if (data[ni + 3] < 10){ flat = false; break; }
        const [nh, ns, nv] = rgbToHsv(data[ni], data[ni + 1], data[ni + 2]);
        const nAchromatic = ns < SAT_THRESHOLD;
        if (selfAchromatic !== nAchromatic){ flat = false; break; }
        if (selfAchromatic){
          if (Math.abs(v - nv) > FLAT_VALUE_TOL){ flat = false; break; }
        } else {
          const d = Math.abs(h - nh);
          if (Math.min(d, 360 - d) > FLAT_HUE_TOL){ flat = false; break; }
        }
      }
      if (!flat) continue;
      totalFlat++;
      if (selfAchromatic){
        let vb = Math.floor(v); if (vb >= 256) vb = 255;
        valBins[vb]++;
      } else {
        let hb = Math.floor(h); if (hb >= 360) hb = 359;
        hueBins[hb]++;
      }
    }
  }
  if (totalFlat < 50) return capK + 1; // not enough signal to trust — let the caller fall back
  const noiseFloor = Math.max(40, totalFlat * 0.008);
  // 45 degrees, not 35: confirmed on the real badge file that a dithering/AA artifact along the
  // long blue/white stripe boundary can form a hue peak with pixel mass AND connected-region size
  // statistically indistinguishable from a genuine small color (the red flame) — no threshold on
  // mass or area alone separates them. What does separate them: every pair of ACTUAL distinct
  // design colors in that file sits at least 65 degrees apart in hue, while the artifact peak sat
  // only 38 degrees from the real blue peak. 45 comfortably suppresses artifacts that close to an
  // already-accepted peak while staying well under the 65-degree floor real distinct hues sat at.
  const huePeaks = findHistogramPeaks(hueBins, 360, true, 3, 12, 45, noiseFloor);
  const valPeaks = findHistogramPeaks(valBins, 256, false, 3, 20, 60, noiseFloor);
  return huePeaks.length + valPeaks.length;
}

document.getElementById('suggestSettings').addEventListener('click', () => {
  if (!originalImageData) return;
  const a = analyzeImage(originalImageData);

  if (modeSelect.value === 'bw') {
    threshold.value = a.otsu;
    threshold.dispatchEvent(new Event('input'));
    // A dark background (dark corners) means the light foreground is what we actually want
    // traced, which is what Invert is for — a flat default guess can't know this per image.
    invert.checked = a.cornerBrightness < 110;
    invert.dispatchEvent(new Event('change'));
  } else {
    // The true spot-color count (elbow method — see estimateTrueColorCount) rather than a raw
    // distinct-bucket count, which is a poor proxy: any gradient/soft shading inflates it hugely
    // even though that's real image content, not noise. Confirmed on the real reference logo: raw
    // bucket count was 361, but the elbow-estimated true count landed close to the artist's own
    // preferred 8 — a straight bucket-count-with-ceiling heuristic had no principled way to get
    // anywhere near that.
    // Greyscale needs the TRUE shade count off the desaturated data, not the real-color data —
    // two hues with identical luminance are one shade in greyscale output even though they're two
    // distinct colors in Color mode, so estimating off the raw RGB would overcount grey levels.
    const countSource = modeSelect.value === 'greyscale' ? toGreyscaleImageData(originalImageData) : originalImageData;
    // Try exact enumeration first — it can't miss a real color just because it only covers a
    // small area, unlike the elbow method below. If it stays within a small, sane palette size
    // that's almost certainly a clean flat-color/vector source, so trust it directly. Only if it
    // blows past that cap (photo, gradient, heavy shading) do we fall back to the elbow estimate,
    // which is the right tool for "how many colors matter" on continuous-tone images.
    const exactCount = countExactFlatColors(countSource, 32);
    const suggested = exactCount <= 32 ? exactCount : estimateTrueColorCount(countSource, 24);
    pinnedPalette = null; // fresh detection requested — discard any previously deleted colors
    colorCount.value = Math.max(2, Math.min(32, suggested));
    colorCount.dispatchEvent(new Event('input'));
  }

  // Curve smoothing: a big, simple graphic can tolerate (and looks better with) a looser curve
  // fit; a small or fine-detailed one needs a tighter fit or real detail gets smoothed away.
  const sizeFactor = Math.min(1, Math.max(0, (a.longSide - 150) / 1850));
  simplify.value = tresToSimplify(0.5 + sizeFactor * 5.5);
  simplify.dispatchEvent(new Event('input'));

  // Speckle removal: a sensible omit-threshold scales with total pixel area, not a flat count —
  // "3" might be fine for a small icon and pointlessly tiny for a large scan.
  speckle.value = Math.max(1, Math.min(20, Math.round(a.totalPixels / 90000)));
  speckle.dispatchEvent(new Event('input'));

  // Edge smoothing: in B&W mode this stays deliberately conservative — it's the blunt tool that
  // chamfers real corners — so only nudge it up when the source itself is genuinely soft/anti-
  // aliased (high midtone ratio). Color mode has a higher ceiling: a real gradient-shaded
  // illustration (highlights/shading within a color region, not just an anti-aliased edge) needs
  // real blur to smooth the "flickering" per-pixel nearest-color decision across the gradient
  // before quantization. IMPORTANT: more blur isn't automatically better here — minimizing path
  // count alone pushed this toward 12-15 in earlier testing, which visibly turned real shape
  // detail into a soft/mushy blob on the actual reference logo. 5 is what looked genuinely clean
  // and crisp on that same file (midtone ratio ~0.31), which is what this multiplier/cap is
  // calibrated against.
  const isBwMode = modeSelect.value === 'bw';
  const smoothingCap = isBwMode ? 2 : 8;
  const smoothingMultiplier = isBwMode ? 8 : 16;
  smoothing.value = Math.min(smoothingCap, +(a.midtoneRatio * smoothingMultiplier).toFixed(1));
  smoothing.dispatchEvent(new Event('input'));

  rightAngle.checked = true;
  rightAngle.dispatchEvent(new Event('change'));
  // Same reason as the reset button — without this, a later mode switch would restore
  // whatever Detail values existed before this suggestion, discarding it.
  saveDetailState(currentDetailMode);
});

// The explicit, one-click "run the first trace" step — loading an image or switching modes no
// longer auto-traces (see loadImageFile / modeSelect's handlers), so this is what actually kicks
// it off. Everything after that (sliders, Delete-shapes, Download) works exactly as it already did.
document.getElementById('vectorizeBtn').addEventListener('click', () => {
  // Switch to the Vector view immediately so the result of clicking Vectorize is always what's
  // on screen — previously a trace could complete while still looking at Source, making it look
  // like nothing happened.
  setView(true);
  renderZoomSize();
  scheduleTrace(0);
});

// Re-arms whichever one-shot "first look at this image" auto-detect belongs to the CURRENT mode
// (Threshold/Invert for B&W, Color/Grey-level count for Color/Greyscale — see autoFixPending /
// colorCountAutoPendingByMode) and retraces, exactly reproducing what happens on a genuinely fresh
// image load for that mode. Added because switching modes before a mode's own auto-detect had run
// against it (e.g. B&W -> Greyscale -> Color) could leave a mode's auto-detect never actually
// triggered — this gives a manual way to force it without reloading the file from disk.
document.getElementById('refreshTrace').addEventListener('click', () => {
  if (!originalImageData) return;
  if (modeSelect.value === 'bw') {
    autoFixPending = true;
    autoFixMessage = '';
  } else {
    colorCountAutoPendingByMode[modeSelect.value] = true;
  }
  scheduleTrace(0);
});

// Wraps every number input with custom up/down stepper buttons — moving the input into a new
// wrapper preserves its existing listeners, so this can run after the binding above with no
// extra wiring needed beyond the buttons themselves.
document.querySelectorAll('.num-input').forEach(input => {
  const wrap = document.createElement('div');
  wrap.className = 'num-stepper';
  input.parentNode.insertBefore(wrap, input);
  wrap.appendChild(input);

  const btns = document.createElement('div');
  btns.className = 'stepper-btns';
  const upBtn = document.createElement('button');
  upBtn.type = 'button';
  upBtn.className = 'stepper-btn';
  upBtn.textContent = '▲';
  upBtn.setAttribute('aria-label', 'Increase');
  const downBtn = document.createElement('button');
  downBtn.type = 'button';
  downBtn.className = 'stepper-btn';
  downBtn.textContent = '▼';
  downBtn.setAttribute('aria-label', 'Decrease');
  btns.appendChild(upBtn);
  btns.appendChild(downBtn);
  wrap.appendChild(btns);

  const step = parseFloat(input.step) || 1;
  const decimals = (input.step && input.step.includes('.')) ? input.step.split('.')[1].length : 0;
  const nudge = dir => {
    let v = (parseFloat(input.value) || 0) + dir * step;
    if (input.min !== '') v = Math.max(parseFloat(input.min), v);
    if (input.max !== '') v = Math.min(parseFloat(input.max), v);
    input.value = decimals ? v.toFixed(decimals) : v;
    input.dispatchEvent(new Event('input', { bubbles: true }));
  };
  upBtn.addEventListener('click', () => nudge(1));
  downBtn.addEventListener('click', () => nudge(-1));
});

function scheduleTrace(delay){
  if (!originalImageData) return;
  clearTimeout(traceTimeout);
  traceTimeout = setTimeout(runTrace, delay === undefined ? 250 : delay);
}

// Builds a strict two-tone RGBA copy: opaque black where luminance crosses `threshold`,
// fully transparent everywhere else, so ImageTracer's quantizer has an unambiguous single
// foreground color to trace instead of guessing a split from arbitrary source colors.
function buildBwImageData(src, thresholdValue, doInvert){
  const w = src.width, h = src.height;
  const out = new ImageData(w, h);
  const s = src.data, d = out.data;
  for (let i = 0; i < s.length; i += 4) {
    const lum = 0.299 * s[i] + 0.587 * s[i+1] + 0.114 * s[i+2];
    const alpha = s[i+3];
    let isForeground = lum < thresholdValue && alpha > 10;
    if (doInvert) isForeground = !isForeground && alpha > 10;
    if (isForeground) {
      d[i] = 0; d[i+1] = 0; d[i+2] = 0; d[i+3] = 255;
    } else {
      d[i] = 255; d[i+1] = 255; d[i+2] = 255; d[i+3] = 0;
    }
  }
  return out;
}

// Upsamples via a bilinear-filtered canvas draw before tracing. Source PNGs/JPGs carry
// anti-aliased edges (a gradient of intermediate luminance/colour across a boundary, not a hard
// jump) — thresholding or quantizing straight off the native pixels throws that gradient away
// and the tracer only ever sees stair-stepped blocks to fit curves to. Upsampling first lets the
// threshold/quantize step resolve the boundary at sub-pixel positions, so the tracer gets far
// more (and far smoother) contour points to work from. The final SVG's width/height attributes
// are still set to the ORIGINAL image size afterwards, so this only buys curve smoothness —
// it never changes the exported/displayed dimensions.
function computeSuperScale(w, h){
  const longSide = Math.max(w, h);
  if (longSide <= 500) return 4;
  if (longSide <= 900) return 3;
  if (longSide <= 1600) return 2.5;
  if (longSide <= 2600) return 1.75;
  if (longSide <= 4000) return 1.25;
  return 1;
}

function upsampleImageData(imgData, scale){
  if (scale <= 1) return imgData;
  const srcCanvas = document.createElement('canvas');
  srcCanvas.width = imgData.width;
  srcCanvas.height = imgData.height;
  srcCanvas.getContext('2d').putImageData(imgData, 0, 0);

  const dstW = Math.round(imgData.width * scale);
  const dstH = Math.round(imgData.height * scale);
  const dstCanvas = document.createElement('canvas');
  dstCanvas.width = dstW;
  dstCanvas.height = dstH;
  const dctx = dstCanvas.getContext('2d');
  dctx.imageSmoothingEnabled = true;
  dctx.imageSmoothingQuality = 'high';
  dctx.drawImage(srcCanvas, 0, 0, dstW, dstH);
  return dctx.getImageData(0, 0, dstW, dstH);
}

// Blurs the (already-upsampled) pixels BEFORE thresholding/quantizing. Upsampling alone still
// leaves a hard binary edge once thresholded — at finer resolution, but still a staircase — and
// a tight path-fidelity setting then faithfully traces every one of those tiny steps as jagged
// micro-corners instead of a smooth curve. Blurring first softens that boundary into a gradient
// again, so the threshold cuts through it at a smoothly-varying sub-pixel position, giving the
// tracer an actually smooth contour to follow. Uses the canvas 2D `filter` (real Gaussian blur)
// rather than ImageTracer's own post-quantization blurradius option, which runs too late in the
// pipeline to fix binary-mask staircasing.
// Greyscale mode reuses Color mode's ENTIRE pipeline (kMeansPalette, classification, despeckle,
// per-color overrides, group merging — see runTrace's color/greyscale branch) unchanged, just
// against a desaturated copy of the source instead of the real RGB data, so it naturally produces
// distinct grey shades instead of colors with zero code duplication.
function toGreyscaleImageData(imgData){
  const out = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
  const d = out.data;
  for (let i = 0; i < d.length; i += 4){
    const lum = Math.round(0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2]);
    d[i] = lum; d[i + 1] = lum; d[i + 2] = lum;
  }
  return out;
}

function smoothImageData(imgData, radiusPx){
  if (radiusPx <= 0) return imgData;
  const src = document.createElement('canvas');
  src.width = imgData.width;
  src.height = imgData.height;
  src.getContext('2d').putImageData(imgData, 0, 0);

  const dst = document.createElement('canvas');
  dst.width = imgData.width;
  dst.height = imgData.height;
  const dctx = dst.getContext('2d');
  dctx.filter = `blur(${radiusPx}px)`;
  dctx.drawImage(src, 0, 0);
  return dctx.getImageData(0, 0, imgData.width, imgData.height);
}

// ImageTracer's own built-in color quantization is unreliable whenever a design has very
// unevenly-sized color regions (e.g. a thick black outline + a few small accent-color details,
// as in most logos) — confirmed directly: on a 9-distinct-color test image shaped like that, it
// never produced more than 5 fill colors no matter what numberofcolors was requested (6 through
// 12 all collapsed to the same ~5). The failure mode is an empty/duplicate cluster problem: when
// a candidate palette color ends up with no assigned pixels after quantization, ImageTracer has
// no mechanism to notice and re-seed it, so a small distinct region just gets silently swallowed
// into whichever big cluster is nearest — which is exactly what "asking for more colors gives
// FEWER detected colors" looks like.
//
// Only sampling "flat interior" pixels — ones whose nearby neighbors are essentially the same
// color — is what actually matters here, more than the clustering algorithm itself: without it,
// anti-aliased blend pixels along every edge in the design get sampled too, and once a complex
// logo has enough total edge length, the ACCUMULATED blend-pixel samples can rival or outrank a
// genuinely small real color, so a plain farthest-point/frequency seeding still ends up picking
// a blend shade as its own "color" — confirmed directly: on a 4-real-color test image, asking
// for 5+ colors kept adding fabricated near-black/near-green blend shades and the path count
// exploded from 5 to 128, matching the "2587 paths / busy noise" symptom on a real logo. Filtering
// the sample set to flat-interior pixels before clustering fixes this at the source: the same
// test now stays at a clean 5 paths no matter how many colors are requested (extras just
// harmlessly duplicate a real color), while still finding every genuinely small distinct color
// correctly (verified against the uneven-region test from the original bug: 6→6 ... 9→9, then
// correctly plateaus at 9 — the true color count — instead of ever fabricating a 10th).
//
// REAL BUG, found and fixed here (confirmed by scripting a synthetic repro of a photographed
// embroidered patch — satin-stitch thread rendered with per-pixel highlight/shadow noise on top
// of each real color, exactly like the "HMS Hermes"-style badge report): the flatness test above
// used to compare neighbors by raw RGB distance (threshold 12) — fine for crisp flat vector art,
// where two adjacent interior pixels of the same fill are near-identical, but nowhere near
// tolerant enough for thread texture, where adjacent pixels of the SAME real color routinely swing
// 40-100+ RGB levels from stitch-direction sheen. Almost every foreground pixel failed that test,
// starving the sample set below the k*20 floor in kMeansPalette and silently triggering the fully
// UNFILTERED fallback — every highlight/shadow/blend pixel included. Farthest-point k-means
// seeding on that set then picks near-white and near-black extremes as its first centroids (their
// RGB distance, ~442, beats the distance between almost any two real hues), so every additional
// requested color just splits the brightness axis into more shades of grey instead of ever
// reaching gold/tan/red — exactly the "adding colors only adds more grey" symptom. Fix: judge
// flatness the same tolerant way countExactFlatColors already does (hue within 25 degrees, or
// value within 60 when the pixel is too desaturated for hue to mean anything) instead of a strict
// RGB distance. A slow gradient's per-step hue drift is far smaller than 25 degrees so smooth-
// shaded art keeps working exactly as before; thread-texture's large per-pixel brightness jumps
// now pass as long as the underlying hue holds, so real mid-tone samples of every true color
// survive to seed k-means instead of being swallowed by the unfiltered white/black fallback.
const FLAT_SAT_THRESHOLD = 0.18;
const FLAT_HUE_TOL_DEG = 25;
const FLAT_VALUE_TOL_RGB = 60;
function isFlatNeighborHSV(h, s, v, nh, ns, nv){
  const aAchromatic = s < FLAT_SAT_THRESHOLD;
  const bAchromatic = ns < FLAT_SAT_THRESHOLD;
  if (aAchromatic !== bAchromatic) return false;
  if (aAchromatic) return Math.abs(v - nv) <= FLAT_VALUE_TOL_RGB;
  const d = Math.abs(h - nh);
  return Math.min(d, 360 - d) <= FLAT_HUE_TOL_DEG;
}
function sampleFlatPixels(imgData, step, checkDist){
  const { data, width, height } = imgData;
  const samples = [];
  for (let y = 0; y < height; y += step){
    for (let x = 0; x < width; x += step){
      const i = (y * width + x) * 4;
      if (data[i + 3] < 10) continue;
      const r = data[i], g = data[i + 1], b = data[i + 2];
      const [h, s, v] = rgbToHsv(r, g, b);
      let flat = true;
      const offsets = [[-checkDist, 0], [checkDist, 0], [0, -checkDist], [0, checkDist]];
      for (const [dx, dy] of offsets){
        const nx = x + dx, ny = y + dy;
        if (nx < 0 || nx >= width || ny < 0 || ny >= height) continue;
        const ni = (ny * width + nx) * 4;
        if (data[ni + 3] < 10){ flat = false; break; }
        const [nh, ns, nv] = rgbToHsv(data[ni], data[ni + 1], data[ni + 2]);
        if (!isFlatNeighborHSV(h, s, v, nh, ns, nv)){ flat = false; break; }
      }
      if (flat) samples.push([r, g, b]);
    }
  }
  return samples;
}

function kMeansPalette(imgData, k, iterations){
  const { width, height, data } = imgData;
  const step = Math.max(1, Math.round(Math.sqrt((width * height) / 40000)));
  // checkDist must stay a small fixed distance (matching estimateTrueColorCount's own
  // sampleFlatPixels call), NOT the sampling stride `step` — step grows with image size/detail
  // (sqrt(area/40000)), so on a large detailed image it was checking neighbors 15-20px away to
  // judge "flatness". That's nowhere near "adjacent pixel" and almost always crosses real detail,
  // starving the flat-pixel filter down to too few samples and silently triggering the unfiltered
  // fallback below on exactly the detailed images that need the flat filter most — reintroducing
  // the anti-aliasing-noise-in-clustering problem (fragmented/speckled paths) the filter exists to
  // prevent, confirmed as the "grey scaling bugs on detailed images" report.
  let samples = sampleFlatPixels(imgData, step, 2);
  // A busy/photographic image (lots of gradients, few truly flat regions) can starve the flat-
  // pixel filter down to almost nothing — fall back to unfiltered sampling rather than
  // clustering on a near-empty set in that case.
  if (samples.length < k * 20) {
    samples = [];
    for (let y = 0; y < height; y += step){
      for (let x = 0; x < width; x += step){
        const i = (y * width + x) * 4;
        if (data[i + 3] >= 10) samples.push([data[i], data[i + 1], data[i + 2]]);
      }
    }
  }
  if (samples.length === 0) return [{ r: 0, g: 0, b: 0, a: 255 }];
  k = Math.min(k, samples.length);

  const dist2 = (a, b) => {
    const dr = a[0] - b[0], dg = a[1] - b[1], db = a[2] - b[2];
    return dr * dr + dg * dg + db * db;
  };

  const centroids = [samples[0].slice()];
  const minDist = new Array(samples.length).fill(Infinity);
  while (centroids.length < k){
    let maxD = -1, maxIdx = 0;
    for (let s = 0; s < samples.length; s++){
      const d = dist2(samples[s], centroids[centroids.length - 1]);
      if (d < minDist[s]) minDist[s] = d;
      if (minDist[s] > maxD){ maxD = minDist[s]; maxIdx = s; }
    }
    centroids.push(samples[maxIdx].slice());
  }

  const assign = new Array(samples.length).fill(0);
  for (let iter = 0; iter < iterations; iter++){
    for (let s = 0; s < samples.length; s++){
      let best = 0, bestD = Infinity;
      for (let c = 0; c < centroids.length; c++){
        const d = dist2(samples[s], centroids[c]);
        if (d < bestD){ bestD = d; best = c; }
      }
      assign[s] = best;
    }
    const sums = centroids.map(() => [0, 0, 0, 0]);
    for (let s = 0; s < samples.length; s++){
      const c = assign[s];
      sums[c][0] += samples[s][0]; sums[c][1] += samples[s][1]; sums[c][2] += samples[s][2]; sums[c][3]++;
    }
    for (let c = 0; c < centroids.length; c++){
      if (sums[c][3] > 0){
        centroids[c] = [sums[c][0] / sums[c][3], sums[c][1] / sums[c][3], sums[c][2] / sums[c][3]];
      } else {
        let maxD = -1, maxIdx = 0;
        for (let s = 0; s < samples.length; s++){
          let dmin = Infinity;
          for (let cc = 0; cc < centroids.length; cc++) dmin = Math.min(dmin, dist2(samples[s], centroids[cc]));
          if (dmin > maxD){ maxD = dmin; maxIdx = s; }
        }
        centroids[c] = samples[maxIdx].slice();
      }
    }
  }
  return centroids.map(c => ({ r: Math.round(c[0]), g: Math.round(c[1]), b: Math.round(c[2]), a: 255 }));
}

// Gaussian blur (used for B&W) turned out to be the wrong tool for color-mode noise: it softens
// EVERY boundary uniformly, including flat-color edges that were already crisp, which is exactly
// why blur-smoothed color traces looked mushy rather than clean. The right fix is a majority-vote
// despeckle pass on the DISCRETE palette classification, not a blend of raw pixel colors: classify
// every pixel to its nearest palette color first (crisp, no blending), then replace each pixel
// with whichever class is most common in its neighborhood. A true edge between two real regions
// has a clear majority on each side of the boundary at any reasonable radius, so it stays exactly
// where it is; only genuinely noisy/flickering pixels (the ones a smooth gradient produces when
// forced through nearest-color classification) get corrected. Confirmed on the real reference
// logo: this got color-mode path count lower than Gaussian blur did (156 vs 244 at the same color
// count) while looking crisp rather than soft.
// Per-color Brightness/Contrast/Saturation/Vibrancy re-colors a detected swatch's OUTPUT fill
// without touching which pixels get classified as belonging to it — classification always stays
// anchored to the original detected color (getDisplayColor is only ever consulted for what to
// paint a class, never for what counts as a match), so nudging a color's look never reshuffles
// region boundaries.
function rgbToHsl(r, g, b){
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s; const l = (max + min) / 2;
  if (max === min){ h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max){
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      default: h = (r - g) / d + 4;
    }
    h /= 6;
  }
  return [h, s, l];
}
function hslToRgb(h, s, l){
  if (s === 0){ const v = Math.round(l * 255); return [v, v, v]; }
  const hue2rgb = (p, q, t) => {
    if (t < 0) t += 1; if (t > 1) t -= 1;
    if (t < 1/6) return p + (q - p) * 6 * t;
    if (t < 1/2) return q;
    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
    return p;
  };
  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  const p = 2 * l - q;
  return [Math.round(hue2rgb(p, q, h + 1/3) * 255), Math.round(hue2rgb(p, q, h) * 255), Math.round(hue2rgb(p, q, h - 1/3) * 255)];
}
function adjustColor(r, g, b, adj){
  if (!adj) return [r, g, b];
  const clamp = v => Math.max(0, Math.min(255, v));
  if (adj.brightness){ const d = adj.brightness * 2.55; r = clamp(r + d); g = clamp(g + d); b = clamp(b + d); }
  if (adj.contrast){ const f = 1 + adj.contrast / 100; r = clamp(128 + (r - 128) * f); g = clamp(128 + (g - 128) * f); b = clamp(128 + (b - 128) * f); }
  if (adj.saturation){
    let [h, s, l] = rgbToHsl(r, g, b);
    s = Math.max(0, Math.min(1, s * (1 + adj.saturation / 100)));
    [r, g, b] = hslToRgb(h, s, l);
  }
  if (adj.vibrancy){
    const avg = (r + g + b) / 3;
    const maxDiff = Math.max(Math.abs(r - avg), Math.abs(g - avg), Math.abs(b - avg));
    const factor = (adj.vibrancy / 100) * (1 - Math.min(1, maxDiff / 128));
    r = clamp(r + (r - avg) * factor); g = clamp(g + (g - avg) * factor); b = clamp(b + (b - avg) * factor);
  }
  return [Math.round(r), Math.round(g), Math.round(b)];
}
function getDisplayColor(idx, palette){
  const base = palette[idx];
  const ov = colorOverrides[idx];
  if (!ov || (!ov.brightness && !ov.contrast && !ov.saturation && !ov.vibrancy)) return base;
  const [r, g, b] = adjustColor(base.r, base.g, base.b, ov);
  return { r, g, b, a: 255 };
}

function classifyToPalette(imgData, pal){
  const { data, width, height } = imgData;
  const classes = new Int16Array(width * height).fill(-1);
  for (let y = 0; y < height; y++){
    for (let x = 0; x < width; x++){
      const i = (y * width + x) * 4;
      if (data[i + 3] < 10) continue;
      let best = 0, bestD = Infinity;
      for (let p = 0; p < pal.length; p++){
        const dr = data[i] - pal[p].r, dg = data[i + 1] - pal[p].g, db = data[i + 2] - pal[p].b;
        const d = dr * dr + dg * dg + db * db;
        if (d < bestD){ bestD = d; best = p; }
      }
      classes[y * width + x] = best;
    }
  }
  return classes;
}

// A majority-vote window has a real weakness at SMALL radius on diagonal/curved boundaries: a
// 3x3 or 5x5 window doesn't sample a diagonal edge symmetrically, so the vote can flip
// inconsistently along an otherwise-smooth boundary, manufacturing a NEW staircase artifact
// rather than removing one. Confirmed directly on the real reference logo — path count actually
// got WORSE than doing nothing at radius 1-3 (235 → 867 → 1106 → 308) before finally improving
// past that at radius 4+ (122, then 97 at radius 6). So the fix isn't just "avoid a radius of
// exactly 0" — any value above 0 needs to jump straight to a radius large enough to land past
// that harmful small-radius zone, never land inside it.
function smoothingToDespeckleRadius(value, superScale){
  if (value <= 0) return 0;
  return Math.max(4, Math.round(value * (superScale / 2)));
}

// Brute-force majority vote re-scans the whole (2*radius+1)^2 window for every single pixel —
// O(width*height*radius^2). Measured 1.5s for one pass at radius 4 on a 2560x2560 working
// canvas, and that cost only gets worse quadratically for larger radius (radius 20 would be
// ~25x more work than radius 4, not 5x). This is a separable sliding-window version instead:
// maintain a per-column vertical histogram that's updated incrementally as the window slides
// down (add the row entering, remove the row leaving — O(1) per column per row), then maintain a
// running horizontal total across those column histograms as the window slides right (add the
// column entering, remove the column leaving — O(k) per pixel, not O(radius^2)). Total cost is
// O(width*height*k), independent of radius — same result, dramatically less work, and it actually
// gets RELATIVELY cheaper (compared to brute force) the larger the radius gets.
function despeckleClasses(classes, width, height, radius, k){
  if (radius <= 0) return classes;
  const out = new Int16Array(classes.length);
  const colHist = new Int32Array(width * k);

  // Seed colHist with the vertical window for y=0: rows [0, radius] (clipped at top edge).
  for (let y = 0; y <= Math.min(radius, height - 1); y++){
    for (let x = 0; x < width; x++){
      const c = classes[y * width + x];
      if (c >= 0) colHist[x * k + c]++;
    }
  }

  const rowTotal = new Int32Array(k);
  for (let y = 0; y < height; y++){
    rowTotal.fill(0);
    for (let x = 0; x <= Math.min(radius, width - 1); x++){
      const base = x * k;
      for (let c = 0; c < k; c++) rowTotal[c] += colHist[base + c];
    }
    for (let x = 0; x < width; x++){
      const idx = y * width + x;
      if (classes[idx] === -1){
        out[idx] = -1;
      } else {
        let best = classes[idx], bestCount = -1;
        for (let c = 0; c < k; c++){ if (rowTotal[c] > bestCount){ bestCount = rowTotal[c]; best = c; } }
        out[idx] = best;
      }
      const addX = x + radius + 1;
      if (addX < width){ const base = addX * k; for (let c = 0; c < k; c++) rowTotal[c] += colHist[base + c]; }
      const remX = x - radius;
      if (remX >= 0){ const base = remX * k; for (let c = 0; c < k; c++) rowTotal[c] -= colHist[base + c]; }
    }
    const addY = y + radius + 1;
    if (addY < height){
      const rowBase = addY * width;
      for (let x = 0; x < width; x++){ const c = classes[rowBase + x]; if (c >= 0) colHist[x * k + c]++; }
    }
    const remY = y - radius;
    if (remY >= 0){
      const rowBase = remY * width;
      for (let x = 0; x < width; x++){ const c = classes[rowBase + x]; if (c >= 0) colHist[x * k + c]--; }
    }
  }
  return out;
}

function classesToImageData(classes, pal, width, height){
  const out = new ImageData(width, height);
  const d = out.data;
  for (let i = 0; i < classes.length; i++){
    const c = classes[i];
    const o = i * 4;
    if (c === -1){ d[o + 3] = 0; continue; }
    d[o] = pal[c].r; d[o + 1] = pal[c].g; d[o + 2] = pal[c].b; d[o + 3] = 255;
  }
  return out;
}

// Returns a Promise resolving once this trace completes, so the download handlers can force a
// fresh retrace and actually wait for it before exporting (see needsRetrace) — otherwise Download
// would kick a trace off and immediately grab the still-stale lastSvgString written by the
// PREVIOUS trace, exporting exactly the same stale-SVG bug this was meant to fix.
//
// Genuine intermittent bug, confirmed on a real export: runTrace's Color/Greyscale branch yields
// mid-trace on purpose (per despeckle radius, per color group) to keep the tab responsive, so a
// trace can legitimately take a real moment. If a SECOND call starts before the first finishes
// (e.g. Color mode's own initial trace, or its auto-color-count correction retrace, still in
// flight when a delete's Download-triggered retrace starts), both eventually write to the same
// lastSvgString/svgHolder when they finish. Whichever finishes LAST wins — and the OLDER, stale
// trace can easily finish last, since it may still have the just-deleted shape's own color group
// left to process. That silently overwrote a correct, up-to-date export with a stale pre-edit one,
// entirely dependent on timing — exactly the "intermittent" symptom reported. traceGeneration
// tags every call; only the most-recently-STARTED call is allowed to actually commit its result.
let traceGeneration = 0;
function runTrace(){
  if (!originalImageData || typeof ImageTracer === 'undefined') return Promise.resolve();
  const myGeneration = ++traceGeneration;
  traceStatus.textContent = 'Tracing…';
  processingOverlay.classList.add('show');
  GSBusy.start('Tracing vector… (large images can take a moment)', true);

  // setTimeout, not requestAnimationFrame — rAF is fully paused on a backgrounded/inactive tab,
  // which would leave a trace started right before a tab-switch stuck at "Tracing…" forever.
  // setTimeout still yields one tick (letting the status text paint before the heavy synchronous
  // work below blocks the thread) but keeps firing regardless of tab visibility.
  return new Promise(resolve => { setTimeout(async () => {
    try {
      const isBw = modeSelect.value === 'bw';
      const tres = simplifyToTres(parseFloat(simplify.value));
      const superScale = supersample.value === 'auto'
        ? computeSuperScale(originalImageData.width, originalImageData.height)
        : parseFloat(supersample.value);
      // Blur radius in upsampled-pixel space, scaled by how much we upsampled so one slider
      // notch means the same relative smoothing regardless of source resolution.
      const blurPx = parseFloat(smoothing.value) * (superScale / 2);
      const options = {
        // ltres/qtres were tied to the same value, which starves curved regions of real Bezier
        // fitting: the tracer tries a straight-line fit first and only falls back to a curve when
        // that fails, so an ltres tight enough for accurate corners/straight edges also cuts off
        // every curve fit attempt after just a couple of points — producing a path that's
        // technically "vector" but is actually hundreds of tiny straight segments imitating a
        // curve (confirmed: a test letter went from 173 line / 21 curve segments to 18 line / 22
        // curve segments once qtres was freed to be much more permissive than ltres, with no
        // visible loss of shape accuracy). Corners/straight edges stay governed by the tighter
        // ltres; only the curve-fit tolerance is loosened.
        ltres: tres,
        qtres: tres * 20,
        pathomit: parseInt(speckle.value),
        blurradius: 0,
        roundcoords: 2,
        rightangleenhance: rightAngle.checked,
        strokewidth: 0,
        scale: 1,
        viewbox: true,
        colorquantcycles: 4
      };

      let svgString;
      if (isBw) {
        let upsampled = upsampleImageData(originalImageData, superScale);
        upsampled = smoothImageData(upsampled, blurPx);
        const bwData = buildBwImageData(upsampled, parseInt(threshold.value), invert.checked);
        options.numberofcolors = 2;
        options.pal = [
          { r: 255, g: 255, b: 255, a: 0 },
          { r: 0, g: 0, b: 0, a: 255 }
        ];
        svgString = ImageTracer.imagedataToSVG(bwData, options);
        swatchList.innerHTML = '<span class="swatch-empty">Line art — single colour</span>';
      } else {
        // Greyscale reuses this ENTIRE branch unchanged — palette, classification, despeckle,
        // per-color overrides, group merging, colorCountAutoPending, all of it — just against a
        // desaturated copy of the source pixels, so it naturally produces distinct grey shades
        // with zero duplicated pipeline code. colorSource is what every color-identity-driving
        // step below reads from; originalImageData itself (and its real RGB values) is untouched
        // so switching back to Color or B&W mode still traces the real colors.
        const isGreyscale = modeSelect.value === 'greyscale';
        const colorSource = isGreyscale ? toGreyscaleImageData(originalImageData) : originalImageData;

        // Consumed once per freshly-loaded image, the first time it actually gets traced in THIS
        // specific mode (Color and Greyscale each get their own flag — see
        // colorCountAutoPendingByMode's declaration for why: they're different color spaces with
        // different natural counts, and sharing one flag meant switching Greyscale -> Color found
        // it already spent).
        //
        // REAL BUG, found and fixed here (confirmed by directly scripting a repro — not guessed):
        // this used to set colorCount.value, dispatch 'input' on it (which schedules a SEPARATE,
        // debounced follow-up trace via scheduleTrace), and `return` immediately — leaving THIS
        // trace's own lastSvgString/DOM commit undone, relying entirely on that second, later,
        // uncoordinated trace to actually produce the real result. ensureFreshTrace's `await
        // runTrace()` only awaits THIS call, not the separate debounced one — so it would resolve,
        // its finally block would clear needsRetrace (having completed "successfully" as far as it
        // knew), and Download would immediately export whatever lastSvgString still held from
        // BEFORE this correction — the deleted shape's color, with the OLD colorCount. Confirmed
        // directly: after a delete that changed colorCount 8 -> 7, lastSvgString still had the
        // deleted color in it and needsRetrace was already false, despite a real corrected trace
        // being clearly necessary. Fix: apply the corrected count and keep going in THIS SAME
        // call instead of bailing out and hoping a second async trace catches up later — no
        // separate debounced retrace needed at all.
        const autoPendingKey = isGreyscale ? 'greyscale' : 'color';
        if (colorCountAutoPendingByMode[autoPendingKey]) {
          colorCountAutoPendingByMode[autoPendingKey] = false;
          const priorColorCount = parseInt(colorCount.value);
          // See countExactFlatColors above suggestSettings: the elbow method under-counts colors
          // that only cover a small area (e.g. this shield's red flame), so try exact enumeration
          // first and only fall back to the elbow estimate when the image isn't a clean flat palette.
          const exactColorCount = countExactFlatColors(colorSource, 32);
          const suggestedColorCount = Math.max(2, Math.min(32, exactColorCount <= 32 ? exactColorCount : estimateTrueColorCount(colorSource, 24)));
          if (suggestedColorCount !== priorColorCount) {
            colorCount.value = suggestedColorCount;
            colorCountNum.value = suggestedColorCount;
            const noun = isGreyscale ? 'shade' : 'color';
            autoFixMessage = `Detected ${suggestedColorCount} distinct ${noun}${suggestedColorCount === 1 ? '' : 's'} in this image — ${isGreyscale ? 'Grey levels' : 'Color count'} auto-set to ${suggestedColorCount}. Click "Reset Color Count to Default" to undo.`;
          }
        }
        const workingData = upsampleImageData(colorSource, superScale);
        // Palette computed on the native-resolution source (color identity doesn't need
        // supersampling, only shape smoothness does) and then supplied directly to ImageTracer,
        // bypassing its own unreliable quantizer entirely.
        const requestedColors = parseInt(colorCount.value);
        // A "Delete this color" click pins the exact remaining palette (same RGB values, nothing
        // re-clustered) instead of asking k-means for one fewer color — a fresh k-means run at a
        // lower k re-partitions ALL the pixels from scratch and has no way to know WHICH specific
        // color you wanted gone, so it can just as easily reshuffle or merge a totally different
        // pair. Pinning guarantees the other colors are untouched; classifyToPalette naturally
        // folds the deleted color's own pixels into whichever remaining color is now nearest.
        // Falls back to fresh detection the moment colorCount no longer matches the pinned size
        // (the user moved the slider away, ran Suggest Settings, or reset to default).
        const palette = (pinnedPalette && pinnedPalette.length === requestedColors)
          ? pinnedPalette
          : kMeansPalette(colorSource, requestedColors, 12);
        lastPalette = palette;
        const classes = classifyToPalette(workingData, palette);

        // Each color has its OWN effective curve-fit / despeckle radius / speckle threshold (an
        // override if the user set one via the palette panel, otherwise the shared Detail
        // settings). Tracing every color as its own separate full-canvas ImageTracer call was
        // correct but very expensive — measured ~900ms per color regardless of how little canvas
        // area it actually used (a scattered pattern like stripes/scales means each color's
        // bounding box still spans most of the image, so cropping alone doesn't save much here).
        // The real fix: colors sharing IDENTICAL effective settings (the common case — nobody has
        // set a per-color override) are traced together in ONE combined ImageTracer call instead
        // of one each. Only colors that actually have a custom override pay their own individual
        // cost. So the common no-override case collapses to essentially one pass, same as before
        // per-color overrides existed at all.
        const settingsForColor = palette.map((_, idx) => {
          const ov = colorOverrides[idx];
          const radius = smoothingToDespeckleRadius(
            (ov && ov.edgeSmoothing != null) ? ov.edgeSmoothing : parseFloat(smoothing.value),
            superScale
          );
          return {
            curveFit: (ov && ov.curveFit != null) ? ov.curveFit : tres,
            radius,
            speckle: (ov && ov.speckle != null) ? ov.speckle : parseInt(speckle.value)
          };
        });

        // Yielding here and between each group's trace below doesn't reduce the total work, but
        // it breaks one long unbroken synchronous block into several shorter ones — a busy image
        // can take multiple seconds regardless, and periodic yields keep the tab responsive
        // (repainting the "Tracing…" status, not tripping a browser's "page unresponsive"
        // watchdog) instead of hard-freezing for the whole duration.
        await new Promise(r => setTimeout(r, 0));

        const despeckledByRadius = {};
        for (const r of new Set(settingsForColor.map(s => s.radius))){
          despeckledByRadius[r] = despeckleClasses(classes, workingData.width, workingData.height, r, palette.length);
          await new Promise(r2 => setTimeout(r2, 0));
        }

        const groups = new Map(); // "curveFit|radius|speckle" -> [paletteIdx, ...]
        palette.forEach((_, idx) => {
          const s = settingsForColor[idx];
          const key = `${s.curveFit}|${s.radius}|${s.speckle}`;
          if (!groups.has(key)) groups.set(key, []);
          groups.get(key).push(idx);
        });

        const mergedPaths = [];
        for (const indices of groups.values()){
          await new Promise(r => setTimeout(r, 0));
          const s = settingsForColor[indices[0]];
          const cleaned = despeckledByRadius[s.radius];
          const idxSet = new Set(indices);

          // Union bounding box across every color in this group — still worth cropping even
          // though scattered patterns limit the win, since it's free and helps the compact cases.
          let minX = workingData.width, minY = workingData.height, maxX = -1, maxY = -1;
          for (let y = 0; y < workingData.height; y++){
            const rowBase = y * workingData.width;
            for (let x = 0; x < workingData.width; x++){
              if (idxSet.has(cleaned[rowBase + x])){
                if (x < minX) minX = x; if (x > maxX) maxX = x;
                if (y < minY) minY = y; if (y > maxY) maxY = y;
              }
            }
          }
          if (maxX < 0) continue;

          const pad = 4;
          const bx0 = Math.max(0, minX - pad), by0 = Math.max(0, minY - pad);
          const bx1 = Math.min(workingData.width - 1, maxX + pad), by1 = Math.min(workingData.height - 1, maxY + pad);
          const cw = bx1 - bx0 + 1, ch = by1 - by0 + 1;

          const groupImg = new ImageData(cw, ch);
          const d = groupImg.data;
          // Everywhere defaults to WHITE (not black) at alpha 0: ImageTracer's custom-palette
          // matching turned out to ignore alpha entirely and nearest-match on RGB alone, so a
          // plain zero-initialized (0,0,0,0) "empty" pixel — pure black — got matched to
          // whichever real color was darkest and flooded the canvas with it. White is what the
          // transparent palette slot itself is, so those pixels correctly match IT instead.
          for (let i = 0; i < d.length; i += 4){ d[i]=255; d[i+1]=255; d[i+2]=255; d[i+3]=0; }
          for (let y = by0; y <= by1; y++){
            const rowBase = y * workingData.width;
            for (let x = bx0; x <= bx1; x++){
              const c = cleaned[rowBase + x];
              if (idxSet.has(c)){
                const color = getDisplayColor(c, palette);
                const o = ((y - by0) * cw + (x - bx0)) * 4;
                d[o]=color.r; d[o+1]=color.g; d[o+2]=color.b; d[o+3]=255;
              }
            }
          }
          const groupPal = [{ r: 255, g: 255, b: 255, a: 0 }, ...indices.map(i => getDisplayColor(i, palette))];
          const groupOptions = {
            ltres: s.curveFit, qtres: s.curveFit * 20,
            pathomit: s.speckle, blurradius: 0, roundcoords: 2,
            rightangleenhance: rightAngle.checked, strokewidth: 0, scale: 1, viewbox: true,
            colorquantcycles: 1, numberofcolors: groupPal.length, pal: groupPal
          };
          const groupSvg = ImageTracer.imagedataToSVG(groupImg, groupOptions);
          let groupPaths = [];
          indices.forEach(i => {
            const color = getDisplayColor(i, palette);
            const re = new RegExp(`<path[^>]*fill="rgb\\(${color.r},\\s*${color.g},\\s*${color.b}\\)"[^>]*\\/?>`, 'g');
            groupPaths.push(...(groupSvg.match(re) || []));
          });
          // Each path gets its own transform attribute instead of a shared <g> wrapper — same crop
          // offset (this group was traced on a cropped sub-image, see bx0/by0 above), but every path
          // lands in the exported SVG as its own independent top-level element. A <g> import as one
          // locked/grouped object in Illustrator, Cricut Design Space etc. that needs ungrouping
          // before individual shapes can be selected; this skips that step entirely. getPathOffset()
          // (used by delete-shapes below) reads this same per-path transform to recover the offset.
          if (bx0 !== 0 || by0 !== 0) {
            groupPaths = groupPaths.map(p => p.replace(/^<path/, `<path transform="translate(${bx0},${by0})"`));
          }
          mergedPaths.push(...groupPaths);
        }
        svgString = `<svg viewBox="0 0 ${workingData.width} ${workingData.height}" version="1.1" xmlns="http://www.w3.org/2000/svg">${mergedPaths.join('')}</svg>`;
        renderPalette(palette);
      }

      // A newer trace was started while this one was still running (see traceGeneration's
      // declaration above for the full story) — bail out without committing anything. The newer
      // call owns the right to write lastSvgString/svgHolder/pathCount now; if THIS stale call
      // wrote over it after finishing later, that's the exact bug that let a pre-edit trace
      // silently overwrite a correct post-edit export.
      if (myGeneration !== traceGeneration) return;

      lastSvgString = svgString;
      svgHolder.innerHTML = svgString;
      const svgEl = svgHolder.querySelector('svg');
      if (svgEl) {
        svgEl.setAttribute('width', originalImageData.width);
        svgEl.setAttribute('height', originalImageData.height);
      }
      renderZoomSize();
      const pathMatches = svgString.match(/<path/g);
      const thisPathCount = pathMatches ? pathMatches.length : 0;
      pathCountEl.textContent = thisPathCount + ' paths';
      svgSizeEl.textContent = (new Blob([svgString]).size / 1024).toFixed(1) + ' KB';

      // A B&W trace that comes back with no VISIBLE paths on a fresh image load almost always
      // means the fixed default Threshold (70) doesn't fall inside this particular image's tonal
      // range — not that anything is broken. Rather than always auto-running the full "Suggest
      // Settings" (which also touches Detail sliders tuned to work well as-is and can overcorrect
      // on images that were already fine), only nudge the two settings that can actually cause a
      // total blank: Threshold and Invert. If the Otsu-derived guess doesn't actually change
      // either of those, an auto-retry would just reproduce the same blank result, so leave it
      // alone and surface the message instead.
      //
      // Raw path count alone isn't a reliable "is anything showing" signal: ImageTracer always
      // emits one fully-transparent background rect (fill white, opacity="0") even when the real
      // foreground colour produced zero shapes, so a genuinely blank trace still reports "1 path"
      // — confirmed directly by loading a light-foreground test image, which came back with
      // pathCount 1 and a single opacity="0" rect as its only content. Filtering those out is
      // what actually distinguishes "nothing traced" from "one real tiny shape traced".
      if (isBw && autoFixPending) {
        autoFixPending = false;
        const visiblePathCount = (svgString.match(/<path[^>]*>/g) || [])
          .filter(p => !/opacity="0"/.test(p)).length;
        if (visiblePathCount === 0) {
          const priorThreshold = parseInt(threshold.value);
          const priorInvert = invert.checked;
          const a = analyzeImage(originalImageData);
          const suggestedThreshold = a.otsu;
          const suggestedInvert = a.cornerBrightness < 110;
          if (suggestedThreshold !== priorThreshold || suggestedInvert !== priorInvert) {
            threshold.value = suggestedThreshold;
            threshold.dispatchEvent(new Event('input'));
            invert.checked = suggestedInvert;
            invert.dispatchEvent(new Event('change'));
            autoFixMessage = `No shapes found at threshold ${priorThreshold} — auto-adjusted to ${suggestedThreshold}${suggestedInvert !== priorInvert ? ' + inverted' : ''}. Click "Reset Trace Mode to Defaults" to undo.`;
            return;
          }
          autoFixMessage = 'No shapes found in this image at the current Threshold/Invert — try ✨ Suggest Settings.';
        }
      }
      traceStatus.textContent = autoFixMessage;
      autoFixMessage = '';
    } catch (e) {
      console.error(e);
      traceStatus.textContent = 'Trace failed — try a smaller image or different settings.';
    } finally {
      // Only the latest generation gets to declare the trace "done" — a stale call finishing late
      // must not hide the spinner or clear needsRetrace out from under a newer trace that's still
      // genuinely in flight (which would make things look finished when they aren't yet).
      if (myGeneration === traceGeneration) {
        processingOverlay.classList.remove('show');
        needsRetrace = false;
      }
      GSBusy.stop();
      resolve();
    }
  }); });
}

function renderPalette(palette){
  // Only ever set by the mode dropdown's change handler and the Start Over button before —
  // if a retrace happens in Color mode without the dropdown itself changing (Start Over, then
  // load a new file while staying in Color mode is the common case), nothing re-showed the
  // panel, so a real palette existed in the DOM but the whole block stayed hidden.
  paletteBlock.style.display = 'block';
  swatchList.innerHTML = '';
  if (!palette || palette.length === 0) {
    swatchList.innerHTML = '<span class="swatch-empty">No colors detected</span>';
    return;
  }
  palette.forEach((color, idx) => {
    const displayColor = getDisplayColor(idx, palette);
    const css = `rgb(${displayColor.r},${displayColor.g},${displayColor.b})`;
    const sw = document.createElement('div');
    sw.className = 'sw';
    sw.style.background = css;
    sw.style.cursor = 'pointer';
    sw.title = css + (colorOverrides[idx] ? ' (custom)' : '');
    if (colorOverrides[idx]) sw.style.outline = '2px solid var(--thread-red)';
    if (selectedColorIndex === idx) sw.style.outlineOffset = '2px';
    sw.addEventListener('click', () => selectColorForOverride(idx, css));
    swatchList.appendChild(sw);
  });
  // A retrace can change the palette (different colors/order) out from under a selection made
  // against the previous one — safest to just close the panel rather than risk editing the
  // wrong color under a stale index.
  if (selectedColorIndex !== null && selectedColorIndex >= palette.length) {
    selectedColorIndex = null;
    colorOverridePanel.style.display = 'none';
  }
}

// Forces a fresh, awaited retrace first if the source pixels have changed since the last one
// (a brush stroke or delete that was never manually re-vectorized) — otherwise the download would
// export whatever lastSvgString happened to be left over from an earlier trace, silently omitting
// edits that were staged but never shown. This is what a deleted shape reappearing in an exported
// SVG actually was: not a bug in the delete itself, the export was just reading stale data.
async function ensureFreshTrace(){
  if (needsRetrace) { clearTimeout(traceTimeout); await runTrace(); }
}

function ensureExtension(name, ext) {
  return name.toLowerCase().endsWith('.' + ext) ? name : `${name}.${ext}`;
}

// This standalone site's export is a free preview, not the deliverable — matches the same small
// bottom-right corner mark already shipped on Print Prep (printprep.click), just branded for this
// site. window.graphicSuite only exists inside the paid desktop app, so this is always true here,
// written as a real check in case this file is ever reused elsewhere.
function svgExportWatermarkGroup(w, h) {
  const big = Math.max(w, h);
  const pad = Math.round(big * 0.018);
  const fontSize = Math.max(11, Math.round(big * 0.022));
  const label = 'vectorprep.click';
  // No live DOM text measurement available for a string we're building outside any element —
  // a generous per-character estimate for this specific bold sans-serif label keeps the chip
  // comfortably wide regardless of the viewer's exact font substitution.
  const textW = label.length * fontSize * 0.62;
  const chipW = textW + pad * 2, chipH = fontSize + pad * 1.4;
  const chipX = w - chipW - pad, chipY = h - chipH - pad;
  const r = chipH * 0.25;
  return `<g><rect x="${chipX}" y="${chipY}" width="${chipW}" height="${chipH}" rx="${r}" fill="rgba(0,0,0,0.55)"/><text x="${chipX + chipW / 2}" y="${chipY + chipH / 2 + fontSize * 0.32}" font-family="Arial, sans-serif" font-weight="600" font-size="${fontSize}" fill="rgba(255,255,255,0.92)" text-anchor="middle">${label}</text></g>`;
}
function drawPngExportWatermark(wctx, w, h) {
  wctx.save();
  const big = Math.max(w, h);
  const pad = Math.round(big * 0.018);
  const fontSize = Math.max(11, Math.round(big * 0.022));
  wctx.font = `600 ${fontSize}px Arial, sans-serif`;
  const label = 'vectorprep.click';
  const textW = wctx.measureText(label).width;
  const chipW = textW + pad * 2, chipH = fontSize + pad * 1.4;
  const chipX = w - chipW - pad, chipY = h - chipH - pad;
  const r = chipH * 0.25;
  wctx.beginPath();
  wctx.moveTo(chipX + r, chipY);
  wctx.arcTo(chipX + chipW, chipY, chipX + chipW, chipY + chipH, r);
  wctx.arcTo(chipX + chipW, chipY + chipH, chipX, chipY + chipH, r);
  wctx.arcTo(chipX, chipY + chipH, chipX, chipY, r);
  wctx.arcTo(chipX, chipY, chipX + chipW, chipY, r);
  wctx.closePath();
  wctx.fillStyle = 'rgba(0,0,0,0.55)';
  wctx.fill();
  wctx.fillStyle = 'rgba(255,255,255,0.92)';
  wctx.textAlign = 'center';
  wctx.textBaseline = 'middle';
  wctx.fillText(label, chipX + chipW / 2, chipY + chipH / 2 + 1);
  wctx.restore();
}

document.getElementById('downloadSvg').addEventListener('click', async () => {
  await ensureFreshTrace();
  if (!lastSvgString) return;
  const name = await promptForFileName('vector-prep-trace', { label: 'Download SVG as:', confirmText: 'Download' });
  if (!name) return;
  let exportSvg = lastSvgString;
  if (false && exportSvg.endsWith('</svg>')) { // unlocked - watermark disabled
    exportSvg = exportSvg.slice(0, -6) + svgExportWatermarkGroup(canvas.width, canvas.height) + '</svg>';
  }
  const blob = new Blob([exportSvg], { type: 'image/svg+xml' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = ensureExtension(name, 'svg');
  a.click();
  URL.revokeObjectURL(a.href);
});

document.getElementById('downloadPng').addEventListener('click', async () => {
  await ensureFreshTrace();
  if (!lastSvgString) return;
  const name = await promptForFileName('vector-prep-preview', { label: 'Download PNG as:', confirmText: 'Download' });
  if (!name) return;
  const svgBlob = new Blob([lastSvgString], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(svgBlob);
  const img = new Image();
  img.onload = () => {
    const off = document.createElement('canvas');
    off.width = canvas.width;
    off.height = canvas.height;
    const offCtx = off.getContext('2d');
    offCtx.drawImage(img, 0, 0, off.width, off.height);
    if (false) drawPngExportWatermark(offCtx, off.width, off.height); // unlocked - watermark disabled
    off.toBlob(blob => {
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = ensureExtension(name, 'png');
      a.click();
      URL.revokeObjectURL(a.href);
      URL.revokeObjectURL(url);
    }, 'image/png');
  };
  img.src = url;
});

// ---- Touch-up / Paint brush ----
// Paints directly into originalImageData (the same source pixels every trace reads from), not
// onto the SVG output — so a brush edit gets properly re-vectorized on the next trace instead of
// sitting on top of the vector graphic as a raster patch, which would defeat the point of a
// vector tool. pristineImageData (captured once at load, never mutated) is what the Restore mode
// and "Reset All Touch-ups" revert back to.
const brushModeSelect = document.getElementById('brushMode');
const brushPaintControls = document.getElementById('brushPaintControls');
const brushColorInput = document.getElementById('brushColor');
const brushSizeInput = document.getElementById('brushSize');
const brushSizeVal = document.getElementById('brushSizeVal');
const eyedropperBtn = document.getElementById('eyedropperBtn');

let brushActive = false;
let eyedropperArmed = false;
let pristineCanvas = null;

function ensurePristineCanvas(){
  if (!pristineImageData) return null;
  if (!pristineCanvas || pristineCanvas.width !== pristineImageData.width || pristineCanvas.height !== pristineImageData.height){
    pristineCanvas = document.createElement('canvas');
    pristineCanvas.width = pristineImageData.width;
    pristineCanvas.height = pristineImageData.height;
  }
  pristineCanvas.getContext('2d').putImageData(pristineImageData, 0, 0);
  return pristineCanvas;
}

brushModeSelect.addEventListener('change', () => {
  brushPaintControls.style.display = brushModeSelect.value === 'paint' ? 'block' : 'none';
  canvas.classList.toggle('brush-active', brushModeSelect.value !== 'off');
  if (brushModeSelect.value !== 'off'){
    // Freehand and Delete-shapes are two separate, mutually-exclusive tools — each needs a
    // different view (Source vs Vector), so activating one always turns the other off rather
    // than leaving both "on" with no coherent shared view to show.
    deleteScopeSelect.value = 'off';
    deleteScopeSelect.dispatchEvent(new Event('change'));
    if (originalImageData){
      setView(false); // brush paints on the raster, so force Source view
      renderZoomSize();
    }
  }
});
brushSizeInput.addEventListener('input', () => { brushSizeVal.textContent = brushSizeInput.value; });

// Maps a mouse event's screen position to native image-pixel coordinates — the canvas's CSS
// display size differs from its native pixel buffer size whenever zoomed, so this can't just use
// the raw offsetX/offsetY.
function eventToImageCoords(e){
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width, scaleY = canvas.height / rect.height;
  return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY };
}

// REAL BUG fixed here: this used to stamp one filled circle per mousemove sample (paintStrokeAt(x,
// y), called with no memory of the previous point) instead of drawing a connected line between
// samples. Fast or slightly jerky mouse movement produces mousemove events that are further apart
// on screen than the brush radius, so consecutive stamps don't fully overlap - leaving a visible
// trail of separate circular imprints (bubble-wrap pattern) instead of one clean stroke, worst on
// Restore mode where each gap shows a hard-edged scallop rather than blending smoothly. Fixed the
// same way Print Prep's Touch-up brush already does it: track the last point and stroke a
// round-capped/round-joined line from it to the new point on every move, which fills in the gaps
// regardless of how far apart the sampled points are.
function paintStroke(from, to){
  const size = parseFloat(brushSizeInput.value);
  const mode = brushModeSelect.value;
  if (mode === 'erase'){
    ctx.save();
    ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = size;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y); ctx.stroke();
    ctx.restore();
  } else if (mode === 'paint'){
    ctx.save();
    ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = size;
    ctx.globalCompositeOperation = 'source-over';
    ctx.strokeStyle = brushColorInput.value;
    ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y); ctx.stroke();
    ctx.restore();
  } else if (mode === 'restore'){
    if (!pristineCanvas) return;
    // Same mask-and-composite approach as Print Prep: stroke the line into a separate mask canvas,
    // use source-in to keep only the pristine pixels that fall under that stroke, then draw just
    // that onto the live canvas — putImageData ignores clip paths and a clip() region can't itself
    // be stroke-shaped, so a plain clip+clearRect+drawImage (the old approach) could only ever
    // clip to one circle at a time, never a connected stroke shape.
    const mask = document.createElement('canvas');
    mask.width = canvas.width; mask.height = canvas.height;
    const mctx = mask.getContext('2d');
    mctx.lineCap = 'round'; mctx.lineJoin = 'round'; mctx.lineWidth = size;
    mctx.strokeStyle = '#fff';
    mctx.beginPath(); mctx.moveTo(from.x, from.y); mctx.lineTo(to.x, to.y); mctx.stroke();
    mctx.globalCompositeOperation = 'source-in';
    mctx.drawImage(pristineCanvas, 0, 0);
    ctx.drawImage(mask, 0, 0);
  }
}

let lastBrushPos = null;

canvas.addEventListener('mousedown', e => {
  // Space-bar pan must win over the brush regardless of brush mode — without this check, a brush
  // stroke started unconditionally on every mousedown whenever brush mode wasn't "off", so holding
  // space and dragging painted instead of panning if you'd left a brush mode selected. Vector view
  // never hit this since svgHolder has no competing mousedown handler of its own.
  if (spacePressed || brushModeSelect.value === 'off' || !originalImageData || eyedropperArmed) return;
  e.preventDefault();
  brushActive = true;
  brushUndoStack.push(new Uint8ClampedArray(originalImageData.data));
  if (brushUndoStack.length > 20) brushUndoStack.shift();
  const pos = eventToImageCoords(e);
  lastBrushPos = pos;
  paintStroke(pos, pos); // a plain click with no drag still needs to paint a single dab
});
canvas.addEventListener('mousemove', e => {
  if (!brushActive) return;
  const pos = eventToImageCoords(e);
  paintStroke(lastBrushPos || pos, pos);
  lastBrushPos = pos;
});
function endBrushStroke(){
  if (!brushActive) return;
  brushActive = false;
  lastBrushPos = null;
  originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // Strokes accumulate on the raster canvas (still visible in Source view) without retracing
  // after every single one — a full retrace can be slow enough on a busy image to get in the way
  // of painting several touch-ups in a row. Explicit "Re-vectorize Now" (or Download, which forces
  // one first — see needsRetrace) catches the preview/export up whenever you're ready. This used to
  // be an "Auto re-vectorize" checkbox that defaulted to auto-retracing after every stroke/delete —
  // removed because it made the Vector preview AND the exported SVG silently stale relative to the
  // real source pixels whenever it was off, which is exactly what caused a deleted shape to still
  // be present in a downloaded SVG (see needsRetrace / the download handlers below).
  invalidateInFlightTrace();
}
canvas.addEventListener('mouseup', endBrushStroke);
canvas.addEventListener('mouseleave', endBrushStroke);

eyedropperBtn.addEventListener('click', () => {
  eyedropperArmed = true;
  eyedropperBtn.textContent = 'Click the image to pick a color…';
});
canvas.addEventListener('click', e => {
  if (!eyedropperArmed) return;
  eyedropperArmed = false;
  eyedropperBtn.textContent = '🎨 Pick Color From Image';
  const { x, y } = eventToImageCoords(e);
  const px = Math.max(0, Math.min(canvas.width - 1, Math.round(x)));
  const py = Math.max(0, Math.min(canvas.height - 1, Math.round(y)));
  const d = ctx.getImageData(px, py, 1, 1).data;
  const hex = '#' + [d[0], d[1], d[2]].map(v => v.toString(16).padStart(2, '0')).join('');
  brushColorInput.value = hex;
  brushModeSelect.value = 'paint';
  brushModeSelect.dispatchEvent(new Event('change'));
});

// ---- Delete shapes (separate tool from the freehand brush above, own section/dropdown) ----
// Two-step select-then-confirm flow: click picks an anchor shape and highlights every path that
// currently matches the chosen scope (just that shape / its exact color / similar shades within
// a tolerance you can drag live); nothing is touched yet. A second click on the same selection —
// or the Delete Selected button — commits it. This mirrors the freehand brush's approach exactly:
// the actual delete erases SOURCE pixels (not just the <path> elements), reusing the same
// brushUndoStack / "Undo Last Stroke" / "Reset All Touch-ups" machinery, so it survives the next
// re-trace and gets the same undo for free.
const deleteScopeSelect = document.getElementById('deleteScope');
const deleteToleranceRow = document.getElementById('deleteToleranceRow');
const deleteTolerance = document.getElementById('deleteTolerance');
const deleteToleranceNum = document.getElementById('deleteToleranceNum');
const deleteSelectionActions = document.getElementById('deleteSelectionActions');
const deleteSelectionSummary = document.getElementById('deleteSelectionSummary');

let pendingDeleteSelection = null; // { anchor: <path>, matched: [<path>, ...] }

function parseFillRgb(fillStr){
  const m = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/.exec(fillStr || '');
  return m ? { r: +m[1], g: +m[2], b: +m[3] } : null;
}
// Slider is a friendlier 0-100 rather than exposing the raw RGB distance metric directly; 441.7 is
// the maximum possible Euclidean distance between two RGB colors (sqrt(255^2 * 3)), so 100 means
// "match everything" and 0 means "exact color only" (same as the dedicated Color scope option).
function toleranceSliderToDistance(v){ return (v / 100) * 441.7; }

// Native-pixel-space scale factor for the currently rendered SVG — its viewBox is in supersampled
// trace-space (see computeSuperScale), not native image pixels.
function getViewBoxScale(svgEl){
  const vb = (svgEl.getAttribute('viewBox') || '').split(/\s+/).map(Number);
  const vbWidth = vb[2] || (originalImageData ? originalImageData.width : 1);
  return (originalImageData ? originalImageData.width : vbWidth) / vbWidth;
}
// A path's crop-offset translate, wherever it's carried. Color/Greyscale traces put a
// transform="translate(bx0,by0)" directly on each <path> (see runTrace's color branch — every
// shape exports as its own independent element instead of being wrapped in a <g>); B&W paths have
// no offset at all. Falls back to a wrapping <g transform="..."> for anything traced before that
// change. Shared by getPathNativeCenter (delete-shapes matching) and commitDeleteSelection (the
// erase mask), which both need this same offset recovered from the live DOM.
function getPathOffset(pathEl){
  const own = /translate\(([-\d.]+)[,\s]+([-\d.]+)\)/.exec(pathEl.getAttribute('transform') || '');
  if (own) return { tx: parseFloat(own[1]), ty: parseFloat(own[2]) };
  const g = pathEl.closest('g[transform]');
  if (g) {
    const m = /translate\(([-\d.]+)[,\s]+([-\d.]+)\)/.exec(g.getAttribute('transform') || '');
    if (m) return { tx: parseFloat(m[1]), ty: parseFloat(m[2]) };
  }
  return { tx: 0, ty: 0 };
}
// A path's center in native image-pixel space, accounting for its crop-offset transform (see
// getPathOffset).
function getPathNativeCenter(pathEl, scale){
  const bbox = pathEl.getBBox();
  const { tx, ty } = getPathOffset(pathEl);
  return { x: (bbox.x + bbox.width / 2 + tx) * scale, y: (bbox.y + bbox.height / 2 + ty) * scale };
}
// Tolerance's spatial reach: at slider 0, radius is 0 (moot — see the force-include-anchor logic
// below); it grows to the full image diagonal by 100, i.e. "anywhere in the image" only becomes
// reachable at the tolerance dial's extreme end, not its first notch above zero.
function toleranceSliderToRadius(v){
  const diag = originalImageData ? Math.sqrt(originalImageData.width ** 2 + originalImageData.height ** 2) : 0;
  return (v / 100) * diag;
}

function computeDeleteMatches(anchorPath, scope, toleranceValue){
  const svgEl = svgHolder.querySelector('svg');
  const allPaths = svgEl ? Array.from(svgEl.querySelectorAll('path')) : [];
  if (scope === 'shape') return [anchorPath];
  if (scope === 'color') {
    const fillVal = anchorPath.getAttribute('fill');
    return allPaths.filter(p => p.getAttribute('fill') === fillVal);
  }
  // tolerance — at slider 0 this must mean "just the shape I clicked", not "every shape sharing
  // its exact color" (that's what the separate Color scope option is for). A plain <= distance
  // check doesn't give that: two DIFFERENT shapes with identical fill color sit at distance 0
  // from each other, so at maxDist 0 they'd still match (0 <= 0), silently reproducing Color
  // scope's behavior right at the tolerance dial's minimum instead of starting from "just this
  // one" and growing outward — confirmed directly: at tolerance 0 on a multi-region illustration,
  // this selected 7 shapes (every same-shade region), not 1. Fixed by always force-including the
  // actual anchor path, then requiring OTHER paths to be STRICTLY closer than maxDist — so an
  // identical-color sibling only joins once tolerance is nudged above 0 (0 < maxDist), while the
  // anchor itself is never at the mercy of that comparison.
  //
  // Color distance ALONE still wasn't enough, though — confirmed directly on a real multi-shade
  // illustration: any nonzero tolerance immediately swept in every shape sharing (or near) that
  // color anywhere in the whole image, not just the few stray fragments actually near the clicked
  // shape, because color distance has no idea what's spatially nearby versus just similarly
  // colored somewhere unrelated. Gating on BOTH color distance AND on-canvas proximity (path
  // center-to-center distance, scaled to the image's own diagonal so it works at any resolution)
  // fixes that: a shape now needs to be both close in color and close in space, so the dial can
  // grow gradually from "just this shape" through "nearby similar shades" before ever reaching
  // "anywhere in the image," rather than jumping straight there on the first notch.
  const anchorColor = parseFillRgb(anchorPath.getAttribute('fill'));
  if (!anchorColor) return [anchorPath];
  const maxColorDist = toleranceSliderToDistance(toleranceValue);
  const maxRadius = toleranceSliderToRadius(toleranceValue);
  const scale = getViewBoxScale(svgEl);
  const anchorCenter = getPathNativeCenter(anchorPath, scale);
  return allPaths.filter(p => {
    if (p === anchorPath) return true;
    const c = parseFillRgb(p.getAttribute('fill'));
    if (!c) return false;
    const dr = c.r - anchorColor.r, dg = c.g - anchorColor.g, db = c.b - anchorColor.b;
    if (Math.sqrt(dr * dr + dg * dg + db * db) >= maxColorDist) return false;
    const center = getPathNativeCenter(p, scale);
    const dx = center.x - anchorCenter.x, dy = center.y - anchorCenter.y;
    return Math.sqrt(dx * dx + dy * dy) < maxRadius;
  });
}

function clearDeleteHighlights(){
  svgHolder.querySelectorAll('path.delete-selected').forEach(p => p.classList.remove('delete-selected'));
}
function updateDeleteSelectionSummary(count){
  deleteSelectionSummary.textContent = count + (count === 1 ? ' shape selected' : ' shapes selected');
}
function startDeleteSelection(anchorPath){
  clearDeleteHighlights();
  const matched = computeDeleteMatches(anchorPath, deleteScopeSelect.value, parseFloat(deleteTolerance.value));
  matched.forEach(p => p.classList.add('delete-selected'));
  pendingDeleteSelection = { anchor: anchorPath, matched };
  deleteSelectionActions.style.display = 'block';
  updateDeleteSelectionSummary(matched.length);
}
function cancelDeleteSelection(){
  clearDeleteHighlights();
  pendingDeleteSelection = null;
  deleteSelectionActions.style.display = 'none';
}
function commitDeleteSelection(){
  if (!pendingDeleteSelection || !originalImageData) return;
  const targets = pendingDeleteSelection.matched;
  const svgEl = svgHolder.querySelector('svg');
  if (!svgEl) { cancelDeleteSelection(); return; }

  // The SVG's viewBox is in supersampled trace-space (see computeSuperScale), not native image
  // pixels — reading it directly off the live element rather than recomputing superScale keeps
  // this correct even if that upsampling factor ever changes independently of this code.
  const vb = (svgEl.getAttribute('viewBox') || '').split(/\s+/).map(Number);
  const vbWidth = vb[2] || originalImageData.width;
  const scale = originalImageData.width / vbWidth;

  // Rasterize the target path(s) at native image resolution to get an erase mask. Each path's `d`
  // is in its own local coordinate space — see getPathOffset for where the crop offset lives.
  // Re-deriving it from the live DOM (rather than trusting anything cached) guarantees the mask
  // lands on the exact pixels the visible shape actually occupies.
  const maskCanvas = document.createElement('canvas');
  maskCanvas.width = originalImageData.width;
  maskCanvas.height = originalImageData.height;
  const mctx = maskCanvas.getContext('2d');
  mctx.setTransform(scale, 0, 0, scale, 0, 0);
  targets.forEach(p => {
    const { tx, ty } = getPathOffset(p);
    mctx.save();
    mctx.translate(tx, ty);
    mctx.fill(new Path2D(p.getAttribute('d')));
    mctx.restore();
  });
  // REVERTED (see dev notes at top of file for the full story): a blurred/soft-edged version of
  // this mask was tried here to smooth the deletion boundary, but it only reduced ALPHA at the
  // fringe while leaving the DELETED shape's own RGB in place there — so any fringe pixel whose
  // alpha stayed above classifyToPalette's alpha<10 skip threshold (confirmed: most of a 2px-blur
  // fringe does) still classified using the deleted color's stale RGB and got rendered at full
  // opacity, producing a visible ghost of the color that was supposed to be gone, in place of the
  // color that actually surrounds it. Confirmed directly on the real reference illustration: the
  // faded fringe read back as (155,158,158) / (106,112,112) / (113,113,113) etc. — the deleted
  // grey's own tones, not the black that genuinely surrounds it. Separately confirmed the plain
  // hard mask below was never actually the source of the jagged/fragmented look that motivated
  // this in the first place — that was entirely the stale-colorCount bug (see
  // commitDeleteSelection's colorCountAutoPending re-arm above), already fixed independently, and
  // already produced a clean result on the same real file with this exact plain hard mask. The
  // existing despeckle/majority-vote pass every Color-mode trace already runs (see
  // smoothingToDespeckleRadius / despeckleClasses) is what actually smooths a fresh deletion
  // boundary — it doesn't need a second, custom smoothing step from the delete tool itself.
  const mask = mctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height).data;

  // Optimistic removal for instant feedback — the real fix (erasing the source pixels below) is
  // what actually persists; this just avoids a "did my click do anything?" beat while that trace
  // runs, especially with Auto re-vectorize off, where nothing else would visibly change yet.
  targets.forEach(p => p.remove());

  brushUndoStack.push(new Uint8ClampedArray(originalImageData.data));
  if (brushUndoStack.length > 20) brushUndoStack.shift();

  const d = originalImageData.data;
  // FOURTH attempt at smoothing this boundary — see git history for rounds 1-3 (fringe ghosting,
  // fabricated palette colors). Round 4 (proportional alpha + single-real-neighbor recolor,
  // 2px reach) verified clean via a scripted repro on a single large color region (green, on the
  // real Cobra file) — no fabricated colors, no geometry anomalies. BUT: confirmed broken by
  // Martin on the SAME file's teeth/rib area — thin, tightly alternating white/tan/black bands
  // where a 2px recolor reach isn't enough to fully cover what a deletion touches, leaving
  // patchy/speckled partial results instead of a clean fill or a clean hole. Reverted again — the
  // large-region test case wasn't representative of this kind of dense, thin-banded geometry, and
  // every attempt at this so far has broken on SOME real case not covered by whatever was tested.
  // Round 4's code is preserved in git history (search "FOURTH attempt" in old commits) if picked
  // up again — but don't re-enable it without testing specifically against dense/thin-banded
  // regions like this one, not just a single large color region.
  //
  // Round 6 (tried and reverted, this session): swapped the coverage threshold from `> 0` to
  // `>= 128` (nearest-rounding instead of rounding up), theorizing the aggressive `>0` cut was
  // inflating the erase boundary outward and causing the staircase. Scripted repro against
  // CobraLogo-highreso-trans.png proved the opposite: deleting the same hood-stripe band, `>0`
  // produced 217 total paths (11 in the affected region) while `>=128` produced 244 (27 in the
  // region) — MORE fragmentation, not less. Root cause: `>0` cleanly wipes the entire anti-aliased
  // boundary ring, leaving one clean edge; `>=128` leaves a partial ring of the deleted color's
  // fringe intact, which classifyToPalette then splits into extra tiny slivers along the boundary.
  // Reverted to `>0` — it is the more fragmentation-resistant of the two, confirmed by direct A/B
  // test on the real file, not just reasoning about it.
  for (let i = 3; i < mask.length; i += 4) {
    if (mask[i] > 0) d[i] = 0;
  }
  ctx.putImageData(originalImageData, 0, 0); // keep the raster canvas in sync with originalImageData, like the freehand brush does

  // Deleting a whole color's shapes changes the TRUE number of distinct colors left in the
  // image, but Color count itself doesn't know that and stays at whatever it was — confirmed
  // directly (real reference logo): deleting a 5th real color while colorCount stayed at 5 forced
  // kMeansPalette to invent a spurious near-duplicate cluster to fill the now-unneeded slot
  // (e.g. two orange shades one shade apart), and the classifier flickered between them pixel by
  // pixel across what should have been one solid region — exploding a clean 32-path trace into
  // 271 fragmented paths. Re-arming the same one-shot auto-detect used on fresh image loads lets
  // the very next trace correct colorCount back down (see runTrace's color/greyscale branch)
  // instead of leaving it stale. Both modes' flags are re-armed since a delete's pixel-level
  // change affects the true count in either color space; harmless to set even in B&W mode or when
  // nothing needs correcting — same no-op-if-already-right guard as the fresh-load case.
  colorCountAutoPendingByMode = { color: true, greyscale: true };

  // REAL BUG, confirmed by direct scripted repro against the real reference file (IMG_2685.PNG):
  // colorOverrides is keyed by PALETTE INDEX (paletteIndex -> {curveFit, edgeSmoothing, speckle,
  // brightness, contrast, saturation, vibrancy}), but a delete changes which real color k-means
  // assigns to which index on the very next trace — nothing here was clearing or remapping stale
  // entries. Confirmed directly: gave orange (index 2) an extreme +100 contrast override, deleted
  // orange entirely, and on the next trace TAN silently landed at index 2 and inherited orange's
  // override — rendered as rgb(255,158,0) instead of tan's real rgb(227,143,17). Since this same
  // object also feeds curveFit/edgeSmoothing/speckle (GEOMETRY, not just color — see
  // settingsForColor in runTrace's color/greyscale branch), a misapplied override can just as
  // easily manifest as unexpected jagged/pixelated geometry on a totally unrelated color, not only
  // a wrong hue. This is the same exact risk loadImageFile already guards against on a fresh image
  // (see its own colorOverrides reset and comment above) — a delete carries identical risk, since
  // it forces the exact same kind of full palette recompute, and was simply never covered.
  colorOverrides = {};
  selectedColorIndex = null;
  colorOverridePanel.style.display = 'none';

  cancelDeleteSelection();
  invalidateInFlightTrace();
}

deleteScopeSelect.addEventListener('change', async () => {
  const scope = deleteScopeSelect.value;
  deleteToleranceRow.style.display = scope === 'tolerance' ? 'block' : 'none';
  svgHolder.classList.toggle('delete-active', scope !== 'off');
  cancelDeleteSelection(); // a scope change invalidates whatever was previously matched
  if (scope !== 'off'){
    // Freehand and Delete-shapes are two separate, mutually-exclusive tools — see the matching
    // comment on brushModeSelect's handler above.
    brushModeSelect.value = 'off';
    brushModeSelect.dispatchEvent(new Event('change'));
    if (originalImageData){
      // Delete-shapes targets the rendered <path> elements directly — if a brush stroke or a
      // previous delete was staged but never viewed/downloaded (needsRetrace), those paths would
      // still reflect the OLD pixels, so clicks would target/erase the wrong geometry. Catch up
      // first, same as switching to Vector view manually.
      await ensureFreshTrace();
      setView(true); // click-delete targets rendered <path> elements, which only exist in Vector view
      renderZoomSize();
    }
  }
});

// Re-highlights live as the tolerance is dragged, without needing a fresh click — lets you widen
// or narrow the selection and see exactly what you're about to delete before committing.
deleteTolerance.addEventListener('input', () => {
  deleteToleranceNum.value = deleteTolerance.value;
  if (pendingDeleteSelection && deleteScopeSelect.value === 'tolerance') {
    const matched = computeDeleteMatches(pendingDeleteSelection.anchor, 'tolerance', parseFloat(deleteTolerance.value));
    clearDeleteHighlights();
    matched.forEach(p => p.classList.add('delete-selected'));
    pendingDeleteSelection.matched = matched;
    updateDeleteSelectionSummary(matched.length);
  }
});
deleteToleranceNum.addEventListener('input', () => {
  let v = Math.max(0, Math.min(100, parseFloat(deleteToleranceNum.value) || 0));
  deleteTolerance.value = v;
  deleteTolerance.dispatchEvent(new Event('input'));
});

svgHolder.addEventListener('click', e => {
  if (deleteScopeSelect.value === 'off' || !originalImageData) return;
  const pathEl = e.target.closest('path');
  if (!pathEl) return;

  // Clicking the anchor again, or any already-highlighted match, confirms the pending delete —
  // this is the "click again to delete" shortcut. Clicking a path outside the current selection
  // instead starts a new selection anchored there, so re-aiming never requires an explicit cancel.
  if (pendingDeleteSelection && (pathEl === pendingDeleteSelection.anchor || pendingDeleteSelection.matched.includes(pathEl))) {
    commitDeleteSelection();
    return;
  }
  startDeleteSelection(pathEl);
});
document.getElementById('deleteConfirm').addEventListener('click', commitDeleteSelection);
document.getElementById('deleteCancel').addEventListener('click', cancelDeleteSelection);
// Undo Last Delete / Reset All Touch-ups (Delete shapes section) share the exact same undo stack
// and pristine-image restore as the freehand brush's buttons — delegating to those rather than
// duplicating the logic keeps both sections' history in perfect sync no matter which tool you used.
document.getElementById('deleteUndoLast').addEventListener('click', () => document.getElementById('brushUndo').click());
document.getElementById('deleteResetAll').addEventListener('click', () => document.getElementById('brushResetAll').click());

document.getElementById('brushUndo').addEventListener('click', () => {
  if (brushUndoStack.length === 0 || !originalImageData) return;
  const prev = brushUndoStack.pop();
  originalImageData = new ImageData(prev, canvas.width, canvas.height);
  ctx.putImageData(originalImageData, 0, 0);
  scheduleTrace();
});
document.getElementById('brushResetAll').addEventListener('click', () => {
  if (!pristineImageData) return;
  originalImageData = new ImageData(new Uint8ClampedArray(pristineImageData.data), pristineImageData.width, pristineImageData.height);
  ctx.putImageData(originalImageData, 0, 0);
  brushUndoStack = [];
  scheduleTrace();
});

modeSelect.dispatchEvent(new Event('change'));

// --- Icon-rail popout panels ---------------------------------------------
// Purely a display layer on top of the existing tool-blocks: nothing here
// touches any of their inputs, IDs, or the functions wired to them above —
// it only shows/hides the panel and toggles which rail button looks active.
(function () {
  const railButtons = document.querySelectorAll('.rail-btn');
  const panels = document.querySelectorAll('.tool-popout');

  function closeAll() {
    panels.forEach((p) => p.classList.remove('open'));
    railButtons.forEach((b) => b.classList.remove('active'));
    document.body.classList.remove('panel-open');
  }

  // Panels default to vertically centered on the preview/canvas area,
  // docked to the right — not a fixed top:24px corner. Tracked separately
  // from a user's own drag so re-centering on every open doesn't fight a
  // position someone deliberately chose.
  const manuallyPositioned = new Set();

  function centerPopoutOnPreview(panel) {
    const previewHolder = document.getElementById('previewHolder');
    const reference = previewHolder || document.querySelector('.canvas-panel') || document.body;
    const refRect = reference.getBoundingClientRect();
    const targetCenterY = refRect.top + refRect.height / 2;

    panel.style.left = '';
    panel.style.right = '24px';
    // Needs to already be visible (display:block, via the .open class) to
    // measure its own height — this runs after that class is added.
    const panelHeight = panel.getBoundingClientRect().height;
    const maxTop = Math.max(0, window.innerHeight - panelHeight - 12);
    const top = Math.min(Math.max(12, targetCenterY - panelHeight / 2), maxTop);
    panel.style.top = top + 'px';
  }

  // Dragging/resizing sets inline left/top/width/height on a panel, which
  // otherwise persists for the rest of the session — fine while actively
  // working, but every panel should snap back to centered-on-preview,
  // docked-right on a fresh image load or Start Over, rather than staying
  // wherever it was last left (and forgetting it was ever manually moved).
  function resetPopoutPositions() {
    manuallyPositioned.clear();
    panels.forEach((p) => {
      p.style.left = '';
      p.style.top = '';
      p.style.right = '';
      p.style.width = '';
      p.style.height = '';
      p.style.maxHeight = '';
    });
  }
  window.__resetPopoutPositions = resetPopoutPositions;

  railButtons.forEach((btn) => {
    btn.addEventListener('click', () => {
      const panel = document.getElementById(btn.dataset.panel);
      const alreadyOpen = panel.classList.contains('open');
      closeAll();
      if (!alreadyOpen) {
        panel.classList.add('open');
        btn.classList.add('active');
        document.body.classList.add('panel-open');
        if (!manuallyPositioned.has(panel.id)) centerPopoutOnPreview(panel);
      }
    });
  });

  panels.forEach((panel) => {
    const closeBtn = panel.querySelector('[data-close]');
    if (closeBtn) closeBtn.addEventListener('click', closeAll);

    // Drag by the header (h3) to move the panel anywhere on screen instead
    // of it being locked to the top-right corner. Switches from the
    // stylesheet's right:24px anchor to explicit left/top once dragged,
    // and stays clamped inside the viewport so it can never be dragged
    // somewhere unreachable.
    //
    // Move/up listen on the whole document, not the header itself — the
    // header is only ~21px tall, and a real drag gesture's cursor drifts
    // off a strip that thin constantly, which is what made the first
    // version feel jumpy (movement only tracked while the mouse happened
    // to still be directly over the header).
    const header = panel.querySelector('h3');
    if (!header) return;
    let dragging = false;
    let startX = 0, startY = 0, startLeft = 0, startTop = 0;

    header.addEventListener('pointerdown', (e) => {
      if (e.target.closest('[data-close]')) return;
      dragging = true;
      const rect = panel.getBoundingClientRect();
      startX = e.clientX;
      startY = e.clientY;
      startLeft = rect.left;
      startTop = rect.top;
      panel.style.right = 'auto';
    });

    document.addEventListener('pointermove', (e) => {
      if (!dragging) return;
      manuallyPositioned.add(panel.id); // a real drag happened — stop auto-centering this one
      const rect = panel.getBoundingClientRect();
      const maxLeft = window.innerWidth - rect.width;
      const maxTop = window.innerHeight - rect.height;
      const newLeft = Math.min(Math.max(0, startLeft + (e.clientX - startX)), Math.max(0, maxLeft));
      const newTop = Math.min(Math.max(0, startTop + (e.clientY - startY)), Math.max(0, maxTop));
      panel.style.left = newLeft + 'px';
      panel.style.top = newTop + 'px';
    });

    document.addEventListener('pointerup', () => { dragging = false; });

    // Resize via a corner handle, dragged from the bottom-right — same
    // document-level move/up pattern as the drag-to-move above, for the
    // same reason (a tiny 15px handle is even easier for the cursor to
    // drift off mid-gesture than the header was).
    const resizeHandle = document.createElement('div');
    resizeHandle.className = 'popout-resize-handle';
    resizeHandle.title = 'Drag to resize';
    resizeHandle.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 3 3 14M14 8 8 14M14 13l-1 1"/></svg>';
    panel.appendChild(resizeHandle);

    let resizing = false;
    let resizeStartX = 0, resizeStartY = 0, resizeStartW = 0, resizeStartH = 0;

    resizeHandle.addEventListener('pointerdown', (e) => {
      e.stopPropagation(); // don't also trigger the header's drag-to-move
      resizing = true;
      const rect = panel.getBoundingClientRect();
      resizeStartX = e.clientX;
      resizeStartY = e.clientY;
      resizeStartW = rect.width;
      resizeStartH = rect.height;
      panel.style.maxHeight = 'none'; // manual height now takes over from the default cap
    });

    document.addEventListener('pointermove', (e) => {
      if (!resizing) return;
      const rect = panel.getBoundingClientRect();
      const maxW = window.innerWidth - rect.left;
      const maxH = window.innerHeight - rect.top;
      const newW = Math.min(Math.max(220, resizeStartW + (e.clientX - resizeStartX)), maxW);
      const newH = Math.min(Math.max(120, resizeStartH + (e.clientY - resizeStartY)), maxH);
      panel.style.width = newW + 'px';
      panel.style.height = newH + 'px';
    });

    document.addEventListener('pointerup', () => { resizing = false; });
  });

  // Opens on Upscale by default rather than leaving the user looking at a bare canvas with no
  // indication of where to go next — changed from Trace mode per direct request, to match the
  // rail's own top-to-bottom sequence (Upscale -> Crop -> Trace -> Detail -> Touch-up -> Export)
  // now that Next Step below walks that same order. Exposed on window so the loadImageFile wrapper
  // below can call it again on every subsequent image load too, not just this initial page-load
  // call. Name kept generic (not tied to "Trace") since which panel opens first is now just "the
  // rail's first entry", not something inherently about tracing.
  function openFirstPanelByDefault() {
    closeAll();
    resetPopoutPositions();
    const firstPanel = document.getElementById('panel-upscale');
    firstPanel.classList.add('open');
    document.querySelector('.rail-btn[data-panel="panel-upscale"]').classList.add('active');
    document.body.classList.add('panel-open');
    centerPopoutOnPreview(firstPanel);
  }
  window.__openTracePanelByDefault = openFirstPanelByDefault;
  // No unconditional call here at parse time — nothing is visible to
  // center against yet (.stage is still display:none, so previewHolder
  // and the panel itself both measure as zero-sized). The loadImageFile
  // wrapper below runs this once the stage is actually visible instead,
  // which also covers the very first load, not just subsequent ones.

  // Start Over is a second reset path distinct from loading a new image
  // (it clears the current one rather than replacing it) — an additional
  // listener alongside the button's own existing one, not a replacement,
  // so its original erase-everything behavior is untouched.
  const resetBtn = document.getElementById('reset');
  if (resetBtn) resetBtn.addEventListener('click', openFirstPanelByDefault);
})();

// "Next Step" — a semi-guided walk down the rail's own tool order, ported over from Print Prep
// after it proved out well there. Pure navigation, not a claim that a step is "finished" — works
// identically whether or not you touched anything in the panel it's leaving. Reuses the exact same
// rail-btn click the sidebar icons already use (open next, close current, re-center it) rather than
// duplicating that logic, so behaviour can never drift between the two ways of moving between
// panels. Export excluded — nothing comes after it.
const NEXT_STEP_SEQUENCE = ['panel-upscale', 'panel-crop', 'panel-trace', 'panel-detail', 'panel-touchup', 'panel-export'];
NEXT_STEP_SEQUENCE.slice(0, -1).forEach((panelId, i) => {
  const panel = document.getElementById(panelId);
  if (!panel) return;
  const nextId = NEXT_STEP_SEQUENCE[i + 1];
  const wrap = document.createElement('div');
  wrap.style.cssText = 'margin-top:14px;padding-top:12px;border-top:1px solid var(--paper-line);';
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'action next-step-btn';
  btn.textContent = 'Next Step →';
  btn.addEventListener('click', () => {
    const nextBtn = document.querySelector(`.rail-btn[data-panel="${nextId}"]`);
    if (nextBtn) nextBtn.click();
  });
  wrap.appendChild(btn);
  panel.appendChild(wrap);
});

// This standalone site (vectorprep.click) is the free preview; Upscale, Crop and the Touch-up
// brush are desktop-app-only features that fund the rest of it. window.graphicSuite only exists
// when this page is loaded inside the Graphical Magic desktop app (injected by its preload
// script) — plain undefined here, on any ordinary browser. Every control in a locked panel is
// actually disabled (not just dimmed) the moment the panel opens, with a clear red notice
// explaining why, instead of only announcing itself the moment you tried to use it. Next Step and
// each panel's own close button stay usable so a locked panel is never a dead end.
function lockPanelForDesktopOnly(panelId, featureLabel) {
  return; // unlocked
  const panel = document.getElementById(panelId);
  if (!panel) return;
  panel.classList.add('gm-locked');
  panel.querySelectorAll('input, select, button, textarea').forEach(el => {
    if (el.classList.contains('popout-close') || el.classList.contains('next-step-btn')) return;
    el.disabled = true;
  });
  const notice = document.createElement('div');
  notice.style.cssText = 'background:rgba(229,88,107,0.14);border:1px solid rgba(229,88,107,0.45);color:#b0223a;font-weight:700;font-size:11.5px;line-height:1.5;padding:9px 10px;margin-bottom:12px;border-radius:2px;';
  notice.textContent = `🔒 ${featureLabel} is a desktop-app-only feature. Please buy the desktop version to gain access to this tool.`;
  const header = panel.querySelector('h3');
  if (header) header.insertAdjacentElement('afterend', notice); else panel.prepend(notice);
}
lockPanelForDesktopOnly('panel-upscale', 'AI Upscaling');
lockPanelForDesktopOnly('panel-crop', 'Crop');
lockPanelForDesktopOnly('panel-touchup', 'Touch-up brush');

// Re-open Trace mode (closing whatever else was open) every time a new
// image loads, not just the very first one — otherwise loading a second
// image while, say, the Export panel was left open from the previous one
// would leave the user looking at Export controls for an image they
// haven't traced yet. loadImageFile is a plain top-level function
// declaration, so it's genuinely global here (this is a classic script,
// not a module) — wrapping it after the fact doesn't touch its original
// body at all.
(function () {
  const originalLoadImageFile = window.loadImageFile;

  // loadImageFile kicks off a FileReader -> Image.onload chain and returns
  // long before that finishes — .stage only actually gets its 'on' class
  // (and previewHolder/the panel only get real, non-zero layout) once that
  // async chain completes. Calling the reopen-and-center logic right after
  // loadImageFile() *returns* was computing against zero-sized elements,
  // which is why panels kept landing at a wrong/stale position instead of
  // truly centering. Poll via rAF for the stage to actually be visible
  // with real size instead of guessing a delay.
  function waitForStageVisible(callback, framesLeft) {
    if (framesLeft === undefined) framesLeft = 120; // ~2s at 60fps before giving up
    const stageEl = document.getElementById('stage');
    if (stageEl.classList.contains('on') && stageEl.getBoundingClientRect().height > 0) {
      callback();
      return;
    }
    if (framesLeft <= 0) return; // give up quietly rather than loop forever on a real error
    requestAnimationFrame(() => waitForStageVisible(callback, framesLeft - 1));
  }

  window.loadImageFile = function (...args) {
    const result = originalLoadImageFile.apply(this, args);
    waitForStageVisible(() => {
      if (window.__openTracePanelByDefault) window.__openTracePanelByDefault();
    });
    return result;
  };
})();

// --- Save to Suite ---------------------------------------------------------
// window.graphicSuite only exists when this page is running inside Graphic
// Suite's own BrowserView (exposed by toolPreload.cjs) — opened as a plain
// file in a regular browser, it's simply undefined, so the button stays
// hidden and nothing here runs. Keeps this a faithful standalone copy too.
function promptForFileName(defaultName, opts) {
  opts = opts || {};
  const labelText = opts.label || 'Save as:';
  const confirmText = opts.confirmText || 'Save';
  return new Promise((resolve) => {
    const overlay = document.createElement('div');
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;';

    const box = document.createElement('div');
    box.style.cssText = 'background:var(--white);border:1px solid var(--field-border);padding:20px;width:340px;max-width:90vw;box-shadow:0 8px 24px rgba(0,0,0,0.4);';

    const label = document.createElement('div');
    label.textContent = labelText;
    label.style.cssText = "font-family:'Consolas',monospace;font-size:12px;font-weight:500;color:var(--ink);margin-bottom:8px;";

    const input = document.createElement('input');
    input.type = 'text';
    input.value = defaultName;
    input.style.cssText = "width:100%;box-sizing:border-box;font-family:'Consolas',monospace;font-size:13px;padding:8px;border:1px solid var(--field-border);background:transparent;color:var(--ink);margin-bottom:14px;";

    // Folder picker: only rendered when the caller passes a `folders` array (Save to Gallery)
    // — the plain browser Download buttons have no concept of an app-managed folder, so they
    // never pass this and get the original name-only dialog.
    let folderSelect = null;
    let customerSelect = null;
    let newFolderInput = null;
    const folderFields = [];
    if (Array.isArray(opts.folders)) {
      const folderLabel = document.createElement('div');
      folderLabel.textContent = 'Save into:';
      folderLabel.style.cssText = "font-family:'Consolas',monospace;font-size:12px;font-weight:500;color:var(--ink);margin-bottom:8px;";

      folderSelect = document.createElement('select');
      folderSelect.style.cssText = "width:100%;box-sizing:border-box;font-family:'Consolas',monospace;font-size:13px;padding:8px;border:1px solid var(--field-border);background:var(--white);color:var(--ink);margin-bottom:10px;";
      const rootOption = document.createElement('option');
      rootOption.value = '';
      rootOption.textContent = '(Top level)';
      folderSelect.appendChild(rootOption);
      opts.folders.forEach((f) => {
        const o = document.createElement('option');
        o.value = f;
        o.textContent = f;
        folderSelect.appendChild(o);
      });
      const newOption = document.createElement('option');
      newOption.value = '__new__';
      newOption.textContent = '+ New folder…';
      folderSelect.appendChild(newOption);
      if (opts.defaultFolder && opts.folders.includes(opts.defaultFolder)) {
        folderSelect.value = opts.defaultFolder;
      }

      newFolderInput = document.createElement('input');
      newFolderInput.type = 'text';
      newFolderInput.placeholder = 'New folder name';
      newFolderInput.style.cssText = "width:100%;box-sizing:border-box;font-family:'Consolas',monospace;font-size:13px;padding:8px;border:1px solid var(--field-border);background:transparent;color:var(--ink);margin-bottom:10px;display:none;";
      folderSelect.addEventListener('change', () => {
        const isNew = folderSelect.value === '__new__';
        newFolderInput.style.display = isNew ? '' : 'none';
        if (isNew) newFolderInput.focus();
      });

      folderFields.push(folderLabel, folderSelect, newFolderInput);
    }

    // "For customer": only offered when the host app has a customer directory and passes it in
    // (Graphical Magic). Any other host passes no customers, so this dialog is unchanged there.
    if (Array.isArray(opts.customers) && opts.customers.length) {
      const customerLabel = document.createElement('div');
      customerLabel.textContent = 'For customer:';
      customerLabel.style.cssText = "font-family:'Consolas',monospace;font-size:12px;font-weight:500;color:var(--ink);margin-bottom:8px;";

      customerSelect = document.createElement('select');
      customerSelect.style.cssText = "width:100%;box-sizing:border-box;font-family:'Consolas',monospace;font-size:13px;padding:8px;border:1px solid var(--field-border);background:var(--white);color:var(--ink);margin-bottom:10px;";
      const noCustomer = document.createElement('option');
      noCustomer.value = '';
      noCustomer.textContent = '(No customer)';
      customerSelect.appendChild(noCustomer);
      opts.customers.forEach((c) => {
        const o = document.createElement('option');
        o.value = c.id;
        o.textContent = c.company ? c.name + ' — ' + c.company : c.name;
        customerSelect.appendChild(o);
      });
      folderFields.push(customerLabel, customerSelect);
    }

    const btnRow = document.createElement('div');
    btnRow.style.cssText = 'display:flex;justify-content:flex-end;gap:8px;';

    const cancelBtn = document.createElement('button');
    cancelBtn.type = 'button';
    cancelBtn.textContent = 'Cancel';
    cancelBtn.className = 'ghost';
    cancelBtn.style.cssText = 'padding:8px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;';

    const confirmBtn = document.createElement('button');
    confirmBtn.type = 'button';
    confirmBtn.textContent = confirmText;
    confirmBtn.style.cssText = 'padding:8px 14px;border:1px solid var(--ink);background:var(--ink);color:var(--white);cursor:pointer;';

    function resolveFolder() {
      if (!folderSelect) return undefined;
      if (folderSelect.value === '__new__') {
        return newFolderInput.value.trim();
      }
      return folderSelect.value;
    }
    function buildResult() {
      const name = input.value.trim() || defaultName;
      return folderSelect ? { name, folder: resolveFolder(), customerId: customerSelect ? customerSelect.value : '' } : name;
    }
    function close(result) {
      document.removeEventListener('keydown', onKeydown);
      overlay.remove();
      resolve(result);
    }
    function onKeydown(e) {
      if (e.key === 'Enter') { e.preventDefault(); close(buildResult()); }
      if (e.key === 'Escape') { e.preventDefault(); close(null); }
    }

    cancelBtn.addEventListener('click', () => close(null));
    confirmBtn.addEventListener('click', () => close(buildResult()));
    document.addEventListener('keydown', onKeydown);

    btnRow.append(cancelBtn, confirmBtn);
    box.append(label, input, ...folderFields, btnRow);
    overlay.append(box);
    document.body.append(overlay);
    input.focus();
    input.select();
  });
}

if (window.graphicSuite) {
  const saveBtn = document.getElementById('saveToSuite');
  saveBtn.style.display = '';
  saveBtn.addEventListener('click', async () => {
    await ensureFreshTrace();
    if (!lastSvgString) return;
    // Preselect a folder literally named (any case) "Vectors" if the user already made one —
    // e.g. by hand in Explorer via Settings' "Open Current Folder" — so saves land there by
    // default without forcing every image into a fixed, uneditable subfolder.
    const folders = window.graphicSuite.listGalleryFolders ? await window.graphicSuite.listGalleryFolders() : [];
    // Only Graphical Magic provides a customer directory; elsewhere this is simply empty.
    const customers = window.graphicSuite.listCustomers ? await window.graphicSuite.listCustomers() : [];
    const defaultFolder = folders.find((f) => f.toLowerCase() === 'vectors');
    const result = await promptForFileName(`Vector trace ${new Date().toLocaleString()}`, {
      label: 'Save to Gallery as:',
      confirmText: 'Save',
      folders,
      defaultFolder,
      customers,
    });
    if (!result) return;
    const { name, folder, customerId } = result;
    if (!name) return;
    saveBtn.disabled = true;
    const originalText = saveBtn.textContent;
    saveBtn.textContent = 'Saving…';
    try {
      await window.graphicSuite.saveToGallery({
        tool: 'vector-prep',
        title: name,
        format: 'svg',
        content: lastSvgString,
        folder,
        customerId: customerId || undefined,
      });
      saveBtn.textContent = '✓ Image Saved';
      saveBtn.style.background = '#2e7d32';
      saveBtn.style.color = '#fff';
      saveBtn.style.borderColor = '#2e7d32';
      setTimeout(() => {
        saveBtn.textContent = originalText;
        saveBtn.style.background = '';
        saveBtn.style.color = '';
        saveBtn.style.borderColor = '';
      }, 10000);
    } catch (err) {
      saveBtn.textContent = 'Save failed';
      setTimeout(() => { saveBtn.textContent = originalText; }, 2000);
    } finally {
      saveBtn.disabled = false;
    }
  });
}
// Asks Yes / No before doing something a second time. Resolves true for Yes, false for No (or Esc). Keys: Y = yes, N = no.
function gsAskProceed(titleText, messageText) {
  return new Promise((resolve) => {
    const overlay = document.createElement('div');
    overlay.setAttribute('data-gs-dialog', '1');
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;';
    const box = document.createElement('div');
    box.style.cssText = 'background:var(--white);border:1px solid var(--field-border);padding:24px;width:400px;max-width:90vw;box-shadow:0 8px 24px rgba(0,0,0,0.4);text-align:center;';
    const title = document.createElement('div');
    title.textContent = titleText;
    title.style.cssText = 'font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;';
    const msg = document.createElement('div');
    msg.textContent = messageText;
    msg.style.cssText = 'font-size:14px;color:var(--ink);margin-bottom:18px;line-height:1.4;';
    const row = document.createElement('div');
    row.style.cssText = 'display:flex;gap:10px;justify-content:center;';
    const mk = (label, primary) => {
      const b = document.createElement('button');
      b.type = 'button'; b.textContent = label;
      b.style.cssText = 'flex:1;padding:11px 14px;border:1px solid var(--ink);cursor:pointer;font-size:15px;font-weight:700;' + (primary ? 'background:var(--ink);color:var(--white);' : 'background:transparent;color:var(--ink);');
      return b;
    };
    const noBtn = mk('No', false), yesBtn = mk('Yes, run it again', true);
    const finish = (v) => { document.removeEventListener('keydown', onKey, true); overlay.remove(); resolve(v); };
    const onKey = (e) => {
      const k = e.key.toLowerCase();
      if (k === 'escape' || k === 'n') { e.preventDefault(); finish(false); }
      else if (k === 'y') { e.preventDefault(); finish(true); }
    };
    noBtn.addEventListener('click', () => finish(false));
    yesBtn.addEventListener('click', () => finish(true));
    document.addEventListener('keydown', onKey, true);
    row.append(noBtn, yesBtn);
    box.append(title, msg, row);
    overlay.append(box);
    document.body.append(overlay);
    noBtn.focus();
  });
}

// After something is sent to the gang sheet: ask what to do next, so nobody is left wondering.
// "Add next image" clears this screen for the next picture; "Go to the gang sheet" switches over to it. Esc just closes it.
function gsSentDialog(count, onNext) {
  const overlay = document.createElement('div');
  overlay.setAttribute('data-gs-dialog', '1');
  overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;';
  const box = document.createElement('div');
  box.style.cssText = 'background:var(--white);border:1px solid var(--field-border);padding:24px;width:400px;max-width:90vw;box-shadow:0 8px 24px rgba(0,0,0,0.4);text-align:center;';
  const title = document.createElement('div');
  title.textContent = '✓ Added to the gang sheet';
  title.style.cssText = 'font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;';
  const msg = document.createElement('div');
  msg.textContent = count === 1 ? 'There is 1 image on the gang sheet.' : 'There are ' + count + ' images on the gang sheet.';
  msg.style.cssText = 'font-size:14px;color:var(--ink);margin-bottom:18px;';
  const mk = (label, hint, primary) => {
    const b = document.createElement('button');
    b.type = 'button';
    b.style.cssText = 'display:block;width:100%;box-sizing:border-box;padding:12px 14px;margin-bottom:10px;border:1px solid var(--ink);cursor:pointer;text-align:center;' +
      (primary ? 'background:var(--ink);color:var(--white);' : 'background:transparent;color:var(--ink);');
    const l = document.createElement('div'); l.textContent = label; l.style.cssText = 'font-size:15px;font-weight:700;';
    const h = document.createElement('div'); h.textContent = hint; h.style.cssText = 'font-size:12px;margin-top:3px;opacity:0.85;';
    b.append(l, h);
    return b;
  };
  const nextBtn = mk('Add next image', 'Clears this screen, ready for the next one', true);
  const goBtn = mk('Go to the gang sheet →', 'See and arrange your images', false);
  const close = () => { document.removeEventListener('keydown', onKey, true); overlay.remove(); };
  const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } };
  nextBtn.addEventListener('click', () => { close(); onNext(); });
  goBtn.addEventListener('click', () => { close(); window.graphicSuite.openGangSheets(); });
  document.addEventListener('keydown', onKey, true);
  box.append(title, msg, nextBtn, goBtn);
  overlay.append(box);
  document.body.append(overlay);
  nextBtn.focus();
}

// Send the traced vector straight to the DTF Gang Sheet builder (only inside Crystal Suite / Graphical Magic). It is the same SVG
// "Download SVG" makes, so it stays a true vector on the sheet, as if it had been downloaded and dragged in.
if (window.graphicSuite && window.graphicSuite.sendToGangSheet) {
  const sendBtn = document.getElementById('sendToGang');
  sendBtn.style.display = '';
  let sentCount = 0;
  const svgDataUrl = (svg) => {
    const bytes = new TextEncoder().encode(svg);
    let bin = '';
    for (let i = 0; i < bytes.length; i += 0x8000) bin += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
    return 'data:image/svg+xml;base64,' + btoa(bin);
  };
  sendBtn.addEventListener('click', async () => {
    const originalText = sendBtn.textContent;
    if (!originalImageData) {
      sendBtn.textContent = 'Load a picture first';
      setTimeout(() => { sendBtn.textContent = originalText; }, 2500);
      return;
    }
    sendBtn.disabled = true;
    try {
      // Not vectorized yet? Do it now, with the current settings - the same as pressing Vectorize - so this button always works.
      if (!lastSvgString) {
        sendBtn.textContent = 'Vectorizing…';
        document.getElementById('vectorizeBtn').click();
        for (let i = 0; i < 900 && !lastSvgString; i++) await new Promise((r) => setTimeout(r, 100));
      }
      await ensureFreshTrace();
      if (!lastSvgString) throw new Error('no trace');
      sendBtn.textContent = 'Sending…';
      sentCount += 1;
      const r = await window.graphicSuite.sendToGangSheet({ name: 'Vector trace ' + sentCount, dataUrl: svgDataUrl(lastSvgString) });
      sendBtn.textContent = originalText;
      gsSentDialog(r.waiting, () => document.getElementById('reset').click()); // 'Add next image' = this page's Start Over
    } catch (err) {
      sendBtn.textContent = 'Couldn\'t send';
      setTimeout(() => { sendBtn.textContent = originalText; }, 2500);
    } finally {
      sendBtn.disabled = false;
    }
  });
}
</script>
</body>
</html>